diff --git a/package-lock.json b/package-lock.json
index 47228b2..a176616 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "~TODO~",
+  "name": "shellnut-dev",
   "version": "0.0.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "~TODO~",
+      "name": "shellnut-dev",
       "version": "0.0.1",
       "devDependencies": {
         "@sveltejs/kit": "next",
@@ -19,7 +19,7 @@
         "prettier-plugin-svelte": "^2.2.0",
         "svelte": "^3.34.0",
         "svelte-check": "^2.0.0",
-        "svelte-preprocess": "^4.0.0",
+        "svelte-preprocess": "^4.9.1",
         "tslib": "^2.0.0",
         "typescript": "^4.0.0"
       }
@@ -563,16 +563,13 @@
       "dev": true
     },
     "node_modules/are-we-there-yet": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.6.tgz",
-      "integrity": "sha512-+1byPnimWdGcKFRS48zG73nxM08kamPFReUYvEmRXI3E8E4YhF4voMRDaGlfGD1UeRHEgs4NhQCE28KI8JVj1A==",
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.7.tgz",
+      "integrity": "sha512-nxwy40TuMiUGqMyRHgCSWZ9FM4VAoRP4xUYSTv5ImRog+h9yISPbVH7H8fASCIzYn9wlEv4zvFL7uKDMCFQm3g==",
       "dev": true,
       "dependencies": {
         "delegates": "^1.0.0",
-        "readable-stream": "^3.6.0"
-      },
-      "engines": {
-        "node": ">=10"
+        "readable-stream": "^2.0.6"
       }
     },
     "node_modules/argparse": {
@@ -705,6 +702,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -920,9 +926,9 @@
       "dev": true
     },
     "node_modules/core-util-is": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
       "dev": true
     },
     "node_modules/cross-spawn": {
@@ -1099,6 +1105,12 @@
         "is-arrayish": "^0.2.1"
       }
     },
+    "node_modules/es6-promise": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz",
+      "integrity": "sha1-oIzd6EzNvzTQJ6FFG8kdS80ophM=",
+      "dev": true
+    },
     "node_modules/esbuild": {
       "version": "0.12.24",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.12.24.tgz",
@@ -2939,17 +2951,18 @@
       }
     },
     "node_modules/readable-stream": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
       "dev": true,
       "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
       }
     },
     "node_modules/readdirp": {
@@ -3149,24 +3162,10 @@
       }
     },
     "node_modules/safe-buffer": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ]
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true
     },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
@@ -3174,6 +3173,59 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "node_modules/sander": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/sander/-/sander-0.5.1.tgz",
+      "integrity": "sha1-dB4kXiMfB8r7b98PEzrfohalAq0=",
+      "dev": true,
+      "dependencies": {
+        "es6-promise": "^3.1.2",
+        "graceful-fs": "^4.1.3",
+        "mkdirp": "^0.5.1",
+        "rimraf": "^2.5.2"
+      }
+    },
+    "node_modules/sander/node_modules/mkdirp": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
+      "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
+      "dev": true,
+      "dependencies": {
+        "minimist": "^1.2.5"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
+    "node_modules/sander/node_modules/rimraf": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
+    "node_modules/sass": {
+      "version": "1.39.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.39.0.tgz",
+      "integrity": "sha512-F4o+RhJkNOIG0b6QudYU8c78ZADKZjKDk5cyrf8XTKWfrgbtyVVXImFstJrc+1pkQDCggyidIOytq6gS4gCCZg==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
     "node_modules/sass-graph": {
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.5.tgz",
@@ -3285,6 +3337,21 @@
         "url": "https://github.com/chalk/slice-ansi?sponsor=1"
       }
     },
+    "node_modules/sorcery": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.10.0.tgz",
+      "integrity": "sha1-iukK19fLBfxZ8asMY3hF1cFaUrc=",
+      "dev": true,
+      "dependencies": {
+        "buffer-crc32": "^0.2.5",
+        "minimist": "^1.2.0",
+        "sander": "^0.5.0",
+        "sourcemap-codec": "^1.3.0"
+      },
+      "bin": {
+        "sorcery": "bin/index.js"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.7.3",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
@@ -3381,28 +3448,7 @@
         "readable-stream": "^2.0.1"
       }
     },
-    "node_modules/stdout-stream/node_modules/readable-stream": {
-      "version": "2.3.7",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
-      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
-      "dev": true,
-      "dependencies": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
-      }
-    },
-    "node_modules/stdout-stream/node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "dev": true
-    },
-    "node_modules/stdout-stream/node_modules/string_decoder": {
+    "node_modules/string_decoder": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
       "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
@@ -3411,15 +3457,6 @@
         "safe-buffer": "~5.1.0"
       }
     },
-    "node_modules/string_decoder": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
-      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-      "dev": true,
-      "dependencies": {
-        "safe-buffer": "~5.2.0"
-      }
-    },
     "node_modules/string-width": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
@@ -3524,15 +3561,17 @@
       }
     },
     "node_modules/svelte-preprocess": {
-      "version": "4.8.0",
-      "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.8.0.tgz",
-      "integrity": "sha512-i9Z17cwGlp+kuSSv3kJWdAdAP2L26A5yMzHHdDj8YL+86sN64Yz5/gfjQp3Xb6fiaToo4sB+wTpid/23Gz0yvw==",
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.9.1.tgz",
+      "integrity": "sha512-nNGilNME8T7a1Yuisdo6MDfpVxHURR4Vj9rGsgdd1EfoS7H+8SF3qaVE92aJQt2IhTB7+BshBqBLeVP080gnpg==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
         "@types/pug": "^2.0.4",
         "@types/sass": "^1.16.0",
         "detect-indent": "^6.0.0",
+        "magic-string": "^0.25.7",
+        "sorcery": "^0.10.0",
         "strip-indent": "^3.0.0"
       },
       "engines": {
@@ -3549,7 +3588,7 @@
         "stylus": "^0.54.7",
         "sugarss": "^2.0.0",
         "svelte": "^3.23.0",
-        "typescript": "^3.9.5 || ^4.0.0"
+        "typescript": "^4.4.2"
       },
       "peerDependenciesMeta": {
         "@babel/core": {
@@ -3829,6 +3868,12 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "node_modules/verror/node_modules/core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
+      "dev": true
+    },
     "node_modules/vite": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/vite/-/vite-2.5.2.tgz",
@@ -4552,13 +4597,13 @@
       "dev": true
     },
     "are-we-there-yet": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.6.tgz",
-      "integrity": "sha512-+1byPnimWdGcKFRS48zG73nxM08kamPFReUYvEmRXI3E8E4YhF4voMRDaGlfGD1UeRHEgs4NhQCE28KI8JVj1A==",
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.7.tgz",
+      "integrity": "sha512-nxwy40TuMiUGqMyRHgCSWZ9FM4VAoRP4xUYSTv5ImRog+h9yISPbVH7H8fASCIzYn9wlEv4zvFL7uKDMCFQm3g==",
       "dev": true,
       "requires": {
         "delegates": "^1.0.0",
-        "readable-stream": "^3.6.0"
+        "readable-stream": "^2.0.6"
       }
     },
     "argparse": {
@@ -4667,6 +4712,12 @@
         "fill-range": "^7.0.1"
       }
     },
+    "buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=",
+      "dev": true
+    },
     "callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -4834,9 +4885,9 @@
       "dev": true
     },
     "core-util-is": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
       "dev": true
     },
     "cross-spawn": {
@@ -4974,6 +5025,12 @@
         "is-arrayish": "^0.2.1"
       }
     },
+    "es6-promise": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz",
+      "integrity": "sha1-oIzd6EzNvzTQJ6FFG8kdS80ophM=",
+      "dev": true
+    },
     "esbuild": {
       "version": "0.12.24",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.12.24.tgz",
@@ -6368,14 +6425,18 @@
       }
     },
     "readable-stream": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
       "dev": true,
       "requires": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
       }
     },
     "readdirp": {
@@ -6514,9 +6575,9 @@
       }
     },
     "safe-buffer": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
       "dev": true
     },
     "safer-buffer": {
@@ -6525,6 +6586,49 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "sander": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/sander/-/sander-0.5.1.tgz",
+      "integrity": "sha1-dB4kXiMfB8r7b98PEzrfohalAq0=",
+      "dev": true,
+      "requires": {
+        "es6-promise": "^3.1.2",
+        "graceful-fs": "^4.1.3",
+        "mkdirp": "^0.5.1",
+        "rimraf": "^2.5.2"
+      },
+      "dependencies": {
+        "mkdirp": {
+          "version": "0.5.5",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
+          "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        },
+        "rimraf": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        }
+      }
+    },
+    "sass": {
+      "version": "1.39.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.39.0.tgz",
+      "integrity": "sha512-F4o+RhJkNOIG0b6QudYU8c78ZADKZjKDk5cyrf8XTKWfrgbtyVVXImFstJrc+1pkQDCggyidIOytq6gS4gCCZg==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0"
+      }
+    },
     "sass-graph": {
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.5.tgz",
@@ -6611,6 +6715,18 @@
         "is-fullwidth-code-point": "^3.0.0"
       }
     },
+    "sorcery": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.10.0.tgz",
+      "integrity": "sha1-iukK19fLBfxZ8asMY3hF1cFaUrc=",
+      "dev": true,
+      "requires": {
+        "buffer-crc32": "^0.2.5",
+        "minimist": "^1.2.0",
+        "sander": "^0.5.0",
+        "sourcemap-codec": "^1.3.0"
+      }
+    },
     "source-map": {
       "version": "0.7.3",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
@@ -6691,47 +6807,15 @@
       "dev": true,
       "requires": {
         "readable-stream": "^2.0.1"
-      },
-      "dependencies": {
-        "readable-stream": {
-          "version": "2.3.7",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
-          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
-          "dev": true,
-          "requires": {
-            "core-util-is": "~1.0.0",
-            "inherits": "~2.0.3",
-            "isarray": "~1.0.0",
-            "process-nextick-args": "~2.0.0",
-            "safe-buffer": "~5.1.1",
-            "string_decoder": "~1.1.1",
-            "util-deprecate": "~1.0.1"
-          }
-        },
-        "safe-buffer": {
-          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-          "dev": true
-        },
-        "string_decoder": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-          "dev": true,
-          "requires": {
-            "safe-buffer": "~5.1.0"
-          }
-        }
       }
     },
     "string_decoder": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
-      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
       "dev": true,
       "requires": {
-        "safe-buffer": "~5.2.0"
+        "safe-buffer": "~5.1.0"
       }
     },
     "string-width": {
@@ -6809,14 +6893,16 @@
       "requires": {}
     },
     "svelte-preprocess": {
-      "version": "4.8.0",
-      "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.8.0.tgz",
-      "integrity": "sha512-i9Z17cwGlp+kuSSv3kJWdAdAP2L26A5yMzHHdDj8YL+86sN64Yz5/gfjQp3Xb6fiaToo4sB+wTpid/23Gz0yvw==",
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.9.1.tgz",
+      "integrity": "sha512-nNGilNME8T7a1Yuisdo6MDfpVxHURR4Vj9rGsgdd1EfoS7H+8SF3qaVE92aJQt2IhTB7+BshBqBLeVP080gnpg==",
       "dev": true,
       "requires": {
         "@types/pug": "^2.0.4",
         "@types/sass": "^1.16.0",
         "detect-indent": "^6.0.0",
+        "magic-string": "^0.25.7",
+        "sorcery": "^0.10.0",
         "strip-indent": "^3.0.0"
       }
     },
@@ -7013,6 +7099,14 @@
         "assert-plus": "^1.0.0",
         "core-util-is": "1.0.2",
         "extsprintf": "^1.2.0"
+      },
+      "dependencies": {
+        "core-util-is": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+          "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
+          "dev": true
+        }
       }
     },
     "vite": {
diff --git a/package.json b/package.json
index a0a8909..905da2d 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "~TODO~",
+  "name": "shellnut-dev",
   "version": "0.0.1",
   "scripts": {
     "dev": "svelte-kit dev",
@@ -22,7 +22,7 @@
     "prettier-plugin-svelte": "^2.2.0",
     "svelte": "^3.34.0",
     "svelte-check": "^2.0.0",
-    "svelte-preprocess": "^4.0.0",
+    "svelte-preprocess": "^4.9.1",
     "tslib": "^2.0.0",
     "typescript": "^4.0.0"
   },
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
new file mode 100644
index 0000000..f692d8d
--- /dev/null
+++ b/src/components/Header.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import Logo from './Logo.svelte';
+	import Nav from './Nav.svelte';
+
+	export let segment: string;
+</script>
+
+<header>
+	<Logo />
+	<Nav {segment} />
+</header>
+
+<style lang="scss">
+	header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		background-color: var(--lightGrey);
+		background: var(--headerBackground);
+		box-shadow: var(--level-2);
+		padding: 0 var(--containerPadding);
+		font-size: 1.6rem;
+
+		@media (max-width: 1000px) {
+			padding-top: 3rem;
+		}
+
+		@media (max-width: 650px) {
+			display: grid;
+			align-content: center;
+			justify-items: center;
+			grid-template-columns: 1fr;
+		}
+	}
+</style>
diff --git a/src/components/Logo.svelte b/src/components/Logo.svelte
new file mode 100644
index 0000000..0978471
--- /dev/null
+++ b/src/components/Logo.svelte
@@ -0,0 +1,47 @@
+<script>
+	//import logodark from '../../static/Logo_Dark.svg';
+	//import logolight from 'images/Logo_Light.svg';
+</script>
+
+<div>
+	<a href="/">
+		<svg
+			width="40"
+			height="40"
+			viewBox="0 0 160 160"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<circle cx="80" cy="80" r="77.5" stroke="#BDBDBD" stroke-width="5" />
+			<path
+				d="M88.625 45.1562L93.2188 20.875H100.227L92.6562 55H85.5781L80.0234 32.1719L74.4688 55H67.3906L59.8203 20.875H66.8281L71.4453 45.1094L77.0703 20.875H83.0234L88.625 45.1562Z"
+				fill="#BDBDBD"
+			/>
+			<path
+				d="M48.3125 116.969H35.9844L33.6406 124H26.1641L38.8672 89.875H45.3828L58.1562 124H50.6797L48.3125 116.969ZM37.8828 111.273H46.4141L42.125 98.5L37.8828 111.273Z"
+				fill="#BDBDBD"
+			/>
+			<path
+				d="M131.047 119.688C129.781 121.203 127.992 122.383 125.68 123.227C123.367 124.055 120.805 124.469 117.992 124.469C115.039 124.469 112.445 123.828 110.211 122.547C107.992 121.25 106.273 119.375 105.055 116.922C103.852 114.469 103.234 111.586 103.203 108.273V105.953C103.203 102.547 103.773 99.6016 104.914 97.1172C106.07 94.6172 107.727 92.7109 109.883 91.3984C112.055 90.0703 114.594 89.4062 117.5 89.4062C121.547 89.4062 124.711 90.375 126.992 92.3125C129.273 94.2344 130.625 97.0391 131.047 100.727H124.203C123.891 98.7734 123.195 97.3438 122.117 96.4375C121.055 95.5312 119.586 95.0781 117.711 95.0781C115.32 95.0781 113.5 95.9766 112.25 97.7734C111 99.5703 110.367 102.242 110.352 105.789V107.969C110.352 111.547 111.031 114.25 112.391 116.078C113.75 117.906 115.742 118.82 118.367 118.82C121.008 118.82 122.891 118.258 124.016 117.133V111.25H117.617V106.07H131.047V119.688Z"
+				fill="#BDBDBD"
+			/>
+		</svg>
+	</a>
+	<h1>Shellnut DEV</h1>
+</div>
+
+<style type="text/scss">
+	div {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		gap: 1rem;
+		color: var(--textColor);
+
+		a {
+			margin: 0;
+			padding: 0;
+		}
+	}
+</style>
diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
new file mode 100644
index 0000000..08db4d5
--- /dev/null
+++ b/src/components/Nav.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+	// import ToggleTheme from '../util/ToggleTheme.svelte';
+
+	export let segment: string;
+</script>
+
+<nav aria-label="header navigation">
+	<a aria-current={segment === undefined ? 'page' : undefined} href=".">Home</a>
+	<a aria-current={segment === 'about' ? 'page' : undefined} href="about">About</a>
+	<!-- <a rel="prefetch" aria-current={segment === 'apology' ? 'page' : undefined} href="apology"
+		>Apologies</a
+	> -->
+	<!-- <ToggleTheme /> -->
+	<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
+				the blog data when we hover over the link or tap it on a touchscreen -->
+	<!-- <li><a rel=prefetch aria-current="{segment === 'blog' ? 'page' : undefined}" href="blog">blog</a></li> -->
+</nav>
+
+<style type="text/scss">
+	nav {
+		position: sticky;
+		top: 0;
+		z-index: 5;
+		display: grid;
+		grid-template-columns: repeat(4, auto);
+		justify-content: right;
+		align-content: center;
+		color: var(--lightGrey);
+
+		@media (max-width: 650px) {
+			justify-content: center;
+		}
+
+		margin: 0.5rem;
+		padding: 2rem;
+
+		a + a {
+			margin-left: 25px;
+		}
+
+		a::after {
+			content: '';
+			position: absolute;
+			width: 100%;
+			height: 2px;
+			bottom: 0px;
+			left: 0px;
+			background: var(--linkHover);
+			transition: transform 0.3s ease 0s;
+			transform: scale(0);
+		}
+
+		a {
+			position: relative;
+			font-size: 2rem;
+			text-decoration: none;
+
+			&[aria-current='page'] {
+				&:after {
+					transform: scale(1);
+				}
+			}
+
+			&:hover {
+				&:after {
+					transform: scale(1);
+				}
+			}
+		}
+	}
+</style>
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index c9ebd4e..d04b1c3 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,99 +1,197 @@
 <script lang="ts">
-  import Header from "../components/Header.svelte";
-  // import { theme } from './stores';
-  // import { onMount } from 'svelte';
+	import Header from '../components/Header.svelte';
+	// import { theme } from './stores';
+	// import { onMount } from 'svelte';
 
-  // onMount(() => {
-  // 	if ($theme === 'dark') {
-  // 		document.querySelector('html').classList.add('dark');
-  // 	}
-  // });
+	// onMount(() => {
+	// 	if ($theme === 'dark') {
+	// 		document.querySelector('html').classList.add('dark');
+	// 	}
+	// });
 
-  export let segment: string;
+	export let segment: string;
 </script>
 
 <Header {segment} />
 <main>
-  <slot />
+	<slot />
 </main>
 
 <style type="text/scss">
-  :global(figure) {
-    margin: 0 auto;
-  }
+	:global(:root) {
+		--red: #900;
+		--pinkRed: #ff5470;
+		--blue: #369;
+		--purpleBlue: #2e2b5e;
+		--white: #fffffe;
+		--greyWhite: #e6e3e0;
+		--grey: #efefef;
+		--yellow: #ffc600;
+		--light: #fff;
+		--black: #1b2d45;
+		--dark: #000;
+		--seaGreen: #83c6a4;
+		--lighterDark: #131415;
+		--shellYellow: #ffc850;
+		--purple: #7a5a84;
+		--lightGrey: #c5c5c5;
+		--lightGray: var(--lightGrey);
+		--lightShade: #f8f7f5;
+		--darkGrey: #272727;
 
-  :global(p) {
-    margin: 0 auto;
-  }
+		/* Define Colors intentions */
+		--primary: var(--purple);
+		--secondary: var(--seaGreen);
+		--danger: var(--pinkRed);
+		--background: var(--greyWhite);
+		--textColor: var(--black);
+		--buttonTextColor: var(--black);
+		--textAccent: var(--purpleBlue);
+		--lineColor: var(--grey);
+		--cardBg: var(--secondary);
+		--headerBackground: var(--darkGrey);
+		--footerBackground: var(--darkGrey);
+		--linkHover: var(--purpleBlue);
+		--lightHairLine: var(--lightGrey);
 
-  :global(a.button) {
-    background: var(--shellYellow);
-    color: var(--lightShade);
-    border: 0;
-    padding: 0.6rem 1rem;
-    border-radius: 2px;
-    cursor: pointer;
-    --cast: 2px;
-    box-shadow: var(--cast) var(--cast) 0 var(--lightAccent);
-    text-shadow: 0.5px 0.5px 0 rgba(0, 0, 0, 0.2);
-    transition: all 0.2s;
-    text-decoration: none;
-    &:hover {
-      --cast: 4px;
-    }
-    &:active {
-      --cast: 2px;
-    }
-  }
+		/* Toggle Switch */
+		--toggleBackgroundColor: var(--lightGray);
+		--toggleBackgroundUnchecked: var(--lightGrey);
+		--toggleCheckedBackgroundColor: var(--seaGreen);
+		--toggleButtonColor: var(--primary);
 
-  :global(button) {
-    background: var(--shellYellow);
-    color: var(--lightShade);
-    border: 0;
-    padding: 0.6rem 1rem;
-    border-radius: 2px;
-    cursor: pointer;
-    --cast: 2px;
-    box-shadow: var(--cast) var(--cast) 0 var(--lightAccent);
-    text-shadow: 0.5px 0.5px 0 rgba(0, 0, 0, 0.2);
-    transition: all 0.2s;
-    text-decoration: none;
-    &:hover {
-      --cast: 4px;
-    }
-    &:active {
-      --cast: 2px;
-    }
-  }
+		/* Styles */
+		--line: solid 1px var(--lineColor);
 
-  :global(.card) {
-    padding: 1.5rem;
-    background: var(--cardBg);
-    box-shadow: var(--level-3);
-    border-radius: var(--borderRadius);
-    color: var(--textColor);
+		/* Type */
+		--headingFont: 'Fira Sans';
+		--bodyFont: 'Merriweather';
+		--baseFontSize: 100%;
+		--h1: 3.052rem;
+		--h2: 2.441rem;
+		--h3: 1.953rem;
+		--h4: 1.563rem;
+		--h5: 1.25rem;
+		--h6: 1.8rem;
+		--bodyTextSize: 1.8rem;
+		--smallText: 1.44rem;
+		--lineHeight: 1.75;
 
-    *:first-child {
-      margin-top: 0;
-    }
+		/* Font Sizes */
+		--xsFont: 1.2rem;
+		--smFont: 1.4rem;
+		--mdFont: 1.4rem;
+		--lgFont: 1.8rem;
+		--xlFont: 2rem;
 
-    *:last-child {
-      margin-bottom: 0;
-    }
-  }
+		/* Radius */
+		--xsRadius: 0.2rem;
+		--smRadius: 0.4rem;
+		--mdRadius: 0.8rem;
+		--lgRadius: 1.6rem;
+		--xlRadius: 3.2rem;
 
-  main {
-    // position: relative;
-    max-width: var(--maxWidth);
-    margin: 0 auto;
-    padding: 2rem 0rem;
+		/* Spacing */
+		--xsSpacing: 1rem;
+		--smSpacing: 1.2rem;
+		--mdSpacing: 1.6rem;
+		--lgSpacing: 2rem;
+		--xlSpacing: 2.4rem;
 
-    p,
-    li,
-    label {
-      word-wrap: normal;
-      font-size: 1.8rem;
-      color: var(--lightShade);
-    }
-  }
+		/* Elevation */
+		--level-0: none;
+		--level-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+		--level-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+		--level-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+		--level-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+
+		/* Positioning */
+		--containerPadding: 2.5%;
+		--headerHeight: 8rem;
+		--borderRadius: 10px;
+		--buttonRadius: 8px;
+		--maxWidth: 1000px;
+
+		/* Color Theme */
+		--colorScheme: 'light';
+	}
+
+	:global(figure) {
+		margin: 0 auto;
+	}
+
+	:global(p) {
+		margin: 0 auto;
+	}
+
+	:global(a.button) {
+		background: var(--shellYellow);
+		color: var(--lightShade);
+		border: 0;
+		padding: 0.6rem 1rem;
+		border-radius: 2px;
+		cursor: pointer;
+		--cast: 2px;
+		box-shadow: var(--cast) var(--cast) 0 var(--lightAccent);
+		text-shadow: 0.5px 0.5px 0 rgba(0, 0, 0, 0.2);
+		transition: all 0.2s;
+		text-decoration: none;
+		&:hover {
+			--cast: 4px;
+		}
+		&:active {
+			--cast: 2px;
+		}
+	}
+
+	:global(button) {
+		background: var(--shellYellow);
+		color: var(--lightShade);
+		border: 0;
+		padding: 0.6rem 1rem;
+		border-radius: 2px;
+		cursor: pointer;
+		--cast: 2px;
+		box-shadow: var(--cast) var(--cast) 0 var(--lightAccent);
+		text-shadow: 0.5px 0.5px 0 rgba(0, 0, 0, 0.2);
+		transition: all 0.2s;
+		text-decoration: none;
+		&:hover {
+			--cast: 4px;
+		}
+		&:active {
+			--cast: 2px;
+		}
+	}
+
+	:global(.card) {
+		padding: 1.5rem;
+		background: var(--cardBg);
+		box-shadow: var(--level-3);
+		border-radius: var(--borderRadius);
+		color: var(--textColor);
+
+		*:first-child {
+			margin-top: 0;
+		}
+
+		*:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	main {
+		// position: relative;
+		max-width: var(--maxWidth);
+		margin: 0 auto;
+		padding: 2rem 0rem;
+
+		p,
+		li,
+		label {
+			word-wrap: normal;
+			font-size: 1.8rem;
+			color: var(--lightShade);
+		}
+	}
 </style>
diff --git a/src/routes/about.svelte b/src/routes/about.svelte
new file mode 100644
index 0000000..c4aa111
--- /dev/null
+++ b/src/routes/about.svelte
@@ -0,0 +1,4 @@
+<script lang="ts">
+</script>
+
+<h2>About Shellnut Dev</h2>
diff --git a/svelte.config.js b/svelte.config.js
index 5eb051a..3c34fca 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,10 +1,10 @@
-import preprocess from 'svelte-preprocess';
+import sveltePreprocess from 'svelte-preprocess';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://github.com/sveltejs/svelte-preprocess
 	// for more information about preprocessors
-	preprocess: preprocess(),
+	preprocess: sveltePreprocess(),
 
 	kit: {
 		// hydrate the <div id="svelte"> element in src/app.html