diff --git a/src/web/package-lock.json b/src/web/package-lock.json
index dd617b5..019a734 100644
--- a/src/web/package-lock.json
+++ b/src/web/package-lock.json
@@ -48,9 +48,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.24.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.0.tgz",
-      "integrity": "sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==",
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.1.tgz",
+      "integrity": "sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -593,18 +593,10 @@
         }
       }
     },
-    "node_modules/@react-three/fiber/node_modules/scheduler": {
-      "version": "0.21.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz",
-      "integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==",
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      }
-    },
     "node_modules/@rushstack/eslint-patch": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.7.2.tgz",
-      "integrity": "sha512-RbhOOTCNoCrbfkRyoXODZp75MlpiHMgbE5MEBZAnnnLyQNgrigEj4p0lzsMDyc1zVsJDLrivB58tgg3emX0eEA==",
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.8.0.tgz",
+      "integrity": "sha512-0HejFckBN2W+ucM6cUOlwsByTKt9/+0tWhqUffNIcHqCXkthY/mZ7AuYPK/2IIaGWhdl0h+tICDO0ssLMd6XMQ==",
       "dev": true
     },
     "node_modules/@swc/helpers": {
@@ -823,16 +815,16 @@
       "dev": true
     },
     "node_modules/@use-gesture/core": {
-      "version": "10.3.0",
-      "resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.3.0.tgz",
-      "integrity": "sha512-rh+6MND31zfHcy9VU3dOZCqGY511lvGcfyJenN4cWZe0u1BH6brBpBddLVXhF2r4BMqWbvxfsbL7D287thJU2A=="
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.3.1.tgz",
+      "integrity": "sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw=="
     },
     "node_modules/@use-gesture/react": {
-      "version": "10.3.0",
-      "resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.3.0.tgz",
-      "integrity": "sha512-3zc+Ve99z4usVP6l9knYVbVnZgfqhKah7sIG+PS2w+vpig2v2OLct05vs+ZXMzwxdNCMka8B+8WlOo0z6Pn6DA==",
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.3.1.tgz",
+      "integrity": "sha512-Yy19y6O2GJq8f7CHf7L0nxL8bf4PZCPaVOCgJrusOeFHY1LvHgYXnmnXg6N5iwAnbgbZCDjo60SiM6IPJi9C5g==",
       "dependencies": {
-        "@use-gesture/core": "10.3.0"
+        "@use-gesture/core": "10.3.1"
       },
       "peerDependencies": {
         "react": ">= 16.8.0"
@@ -956,15 +948,16 @@
       }
     },
     "node_modules/array-includes": {
-      "version": "3.1.7",
-      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.7.tgz",
-      "integrity": "sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==",
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.8.tgz",
+      "integrity": "sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "get-intrinsic": "^1.2.1",
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
         "is-string": "^1.0.7"
       },
       "engines": {
@@ -983,35 +976,17 @@
         "node": ">=8"
       }
     },
-    "node_modules/array.prototype.filter": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/array.prototype.filter/-/array.prototype.filter-1.0.3.tgz",
-      "integrity": "sha512-VizNcj/RGJiUyQBgzwxzE5oHdeuXY5hSbbmKMlphj1cy1Vl7Pn2asCGbSrru6hSQjmCzqTBPVWAF/whmEOVHbw==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "es-array-method-boxes-properly": "^1.0.0",
-        "is-string": "^1.0.7"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/array.prototype.findlast": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.4.tgz",
-      "integrity": "sha512-BMtLxpV+8BD+6ZPFIWmnUBpQoy+A+ujcg4rhp2iwCRJYA7PEh2MS4NL3lz8EiDlLrJPp2hg9qWihr5pd//jcGw==",
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
+      "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.5",
+        "call-bind": "^1.0.7",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.22.3",
+        "es-abstract": "^1.23.2",
         "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
         "es-shim-unscopables": "^1.0.2"
       },
       "engines": {
@@ -1022,15 +997,16 @@
       }
     },
     "node_modules/array.prototype.findlastindex": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.4.tgz",
-      "integrity": "sha512-hzvSHUshSpCflDR1QMUBLHGHP1VIEBegT4pix9H/Z92Xw3ySoy6c2qh7lJWTJnRJ8JCZ9bJNCgTyYaJGcJu6xQ==",
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.5.tgz",
+      "integrity": "sha512-zfETvRFA8o7EiNn++N5f/kaCw221hrpGsDmcpndVupkPzEc1Wuf3VgC0qby1BbHs7f5DVYjgtEU2LLh5bqeGfQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.5",
+        "call-bind": "^1.0.7",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.22.3",
+        "es-abstract": "^1.23.2",
         "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
         "es-shim-unscopables": "^1.0.2"
       },
       "engines": {
@@ -1130,9 +1106,9 @@
       "dev": true
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.18",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.18.tgz",
-      "integrity": "sha512-1DKbDfsr6KUElM6wg+0zRNkB/Q7WcKYAaK+pzXn+Xqmszm/5Xa9coeNdtP88Vi+dPzZnMjhge8GIV49ZQkDa+g==",
+      "version": "10.4.19",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz",
+      "integrity": "sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==",
       "dev": true,
       "funding": [
         {
@@ -1150,7 +1126,7 @@
       ],
       "dependencies": {
         "browserslist": "^4.23.0",
-        "caniuse-lite": "^1.0.30001591",
+        "caniuse-lite": "^1.0.30001599",
         "fraction.js": "^4.3.7",
         "normalize-range": "^0.1.2",
         "picocolors": "^1.0.0",
@@ -1378,9 +1354,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001599",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001599.tgz",
-      "integrity": "sha512-LRAQHZ4yT1+f9LemSMeqdMpMxZcc4RMWdj4tiFe3G8tNkWK+E58g+/tzotb5cU6TbcVJLr4fySiAW7XmxQvZQA==",
+      "version": "1.0.30001600",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001600.tgz",
+      "integrity": "sha512-+2S9/2JFhYmYaDpZvo0lKkfvuKIglrx68MwOBqMGHhQsNkLjB5xtc/TGoEPs+MxjSyN/72qer2g97nzR641mOQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -1717,9 +1693,9 @@
       "dev": true
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.708",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.708.tgz",
-      "integrity": "sha512-iWgEEvREL4GTXXHKohhh33+6Y8XkPI5eHihDmm8zUk5Zo7HICEW+wI/j5kJ2tbuNUCXJ/sNXa03ajW635DiJXA==",
+      "version": "1.4.715",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.715.tgz",
+      "integrity": "sha512-XzWNH4ZSa9BwVUQSDorPWAUQ5WGuYz7zJUNpNif40zFCiCl20t8zgylmreNmn26h5kiyw2lg7RfTmeMBsDklqg==",
       "dev": true
     },
     "node_modules/emoji-regex": {
@@ -1742,9 +1718,9 @@
       }
     },
     "node_modules/es-abstract": {
-      "version": "1.23.1",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.1.tgz",
-      "integrity": "sha512-r+YVn6hTqQb+P5kK0u3KeDqrmhHKm+OhU/Mw4jSL4eQtOxXmp75fXIUUb3sUqFZOlb/YtW5JRaIfEC3UyjYUZQ==",
+      "version": "1.23.2",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.2.tgz",
+      "integrity": "sha512-60s3Xv2T2p1ICykc7c+DNDPLDMm9t4QxCOUU0K9JxiLjM3C1zB9YVdN7tjxrFd4+AkZ8CdX1ovUga4P2+1e+/w==",
       "dev": true,
       "dependencies": {
         "array-buffer-byte-length": "^1.0.1",
@@ -1784,8 +1760,8 @@
         "regexp.prototype.flags": "^1.5.2",
         "safe-array-concat": "^1.1.2",
         "safe-regex-test": "^1.0.3",
-        "string.prototype.trim": "^1.2.8",
-        "string.prototype.trimend": "^1.0.7",
+        "string.prototype.trim": "^1.2.9",
+        "string.prototype.trimend": "^1.0.8",
         "string.prototype.trimstart": "^1.0.7",
         "typed-array-buffer": "^1.0.2",
         "typed-array-byte-length": "^1.0.1",
@@ -1801,12 +1777,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/es-array-method-boxes-properly": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz",
-      "integrity": "sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==",
-      "dev": true
-    },
     "node_modules/es-define-property": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
@@ -2497,9 +2467,9 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "11.0.14",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.0.14.tgz",
-      "integrity": "sha512-RFjo2hB1MTW0EWsHQaXgVn0AEUDGxAs0ZL2vVjTTJJu3N7wFiLkmqTn5ysLjL+qKZ9jvfpKXDb9waN9AyLqk8g==",
+      "version": "11.0.20",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.0.20.tgz",
+      "integrity": "sha512-YSDmWznt3hpdERosbE0UAPYWoYhTnmQ0J1qWPsgpCia9NgY8Xsz5IpOiUEGGj/nzCAW29fSrWugeLRkdp5de7g==",
       "dependencies": {
         "tslib": "^2.4.0"
       },
@@ -3793,28 +3763,29 @@
       }
     },
     "node_modules/object.entries": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.7.tgz",
-      "integrity": "sha512-jCBs/0plmPsOnrKAfFQXRG2NFjlhZgjjcBLSmTnEhU8U6vVTsVe8ANeQJCHTl3gSsI4J+0emOoCgoKlmQPMgmA==",
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.8.tgz",
+      "integrity": "sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
       },
       "engines": {
         "node": ">= 0.4"
       }
     },
     "node_modules/object.fromentries": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.7.tgz",
-      "integrity": "sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==",
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
+      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -3824,16 +3795,17 @@
       }
     },
     "node_modules/object.groupby": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.2.tgz",
-      "integrity": "sha512-bzBq58S+x+uo0VjurFT0UktpKHOZmv4/xePiOA1nbB9pMqpGK7rUPNgf+1YC+7mE+0HzhTMqNUuCqvKhj6FnBw==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.3.tgz",
+      "integrity": "sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==",
       "dev": true,
       "dependencies": {
-        "array.prototype.filter": "^1.0.3",
-        "call-bind": "^1.0.5",
+        "call-bind": "^1.0.7",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.22.3",
-        "es-errors": "^1.0.0"
+        "es-abstract": "^1.23.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/object.hasown": {
@@ -3850,14 +3822,14 @@
       }
     },
     "node_modules/object.values": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.7.tgz",
-      "integrity": "sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.0.tgz",
+      "integrity": "sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -4036,9 +4008,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.36",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.36.tgz",
-      "integrity": "sha512-/n7eumA6ZjFHAsbX30yhHup/IMkOmlmvtEi7P+6RMYf+bGJSUHc3geH4a0NSZxAz/RJfiS9tooCTs9LAVYUZKw==",
+      "version": "8.4.38",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
       "dev": true,
       "funding": [
         {
@@ -4057,7 +4029,7 @@
       "dependencies": {
         "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
-        "source-map-js": "^1.1.0"
+        "source-map-js": "^1.2.0"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -4271,6 +4243,14 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-dom/node_modules/scheduler": {
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
     "node_modules/react-icons": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
@@ -4299,14 +4279,6 @@
         "react": "^18.0.0"
       }
     },
-    "node_modules/react-reconciler/node_modules/scheduler": {
-      "version": "0.21.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz",
-      "integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==",
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      }
-    },
     "node_modules/react-use-measure": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz",
@@ -4531,9 +4503,9 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.23.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
-      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz",
+      "integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==",
       "dependencies": {
         "loose-envify": "^1.1.0"
       }
@@ -4656,9 +4628,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.1.0.tgz",
-      "integrity": "sha512-9vC2SfsJzlej6MAaMPLu8HiBSHGdRAJ9hVFYN1ibZoNkeanmDmLUcIrj6G9DGL7XMJ54AKg/G75akXl1/izTOw==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4747,20 +4719,26 @@
       }
     },
     "node_modules/string.prototype.matchall": {
-      "version": "4.0.10",
-      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.10.tgz",
-      "integrity": "sha512-rGXbGmOEosIQi6Qva94HUjgPs9vKW+dkG7Y8Q5O2OYkWL6wFaTRZO8zM4mhP94uX55wgyrXzfS2aGtGzUL7EJQ==",
+      "version": "4.0.11",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.11.tgz",
+      "integrity": "sha512-NUdh0aDavY2og7IbBPenWqR9exH+E26Sv8e0/eTe1tltDGZL+GtBkDAnnyBtmekfK6/Dq3MkcGtzXFEd1LQrtg==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "get-intrinsic": "^1.2.1",
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
         "has-symbols": "^1.0.3",
-        "internal-slot": "^1.0.5",
-        "regexp.prototype.flags": "^1.5.0",
-        "set-function-name": "^2.0.0",
-        "side-channel": "^1.0.4"
+        "internal-slot": "^1.0.7",
+        "regexp.prototype.flags": "^1.5.2",
+        "set-function-name": "^2.0.2",
+        "side-channel": "^1.0.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -4799,14 +4777,17 @@
       }
     },
     "node_modules/string.prototype.trimstart": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.7.tgz",
-      "integrity": "sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -5223,9 +5204,9 @@
       }
     },
     "node_modules/typed-array-length": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.5.tgz",
-      "integrity": "sha512-yMi0PlwuznKHxKmcpoOdeLwxBoVPkqZxd7q2FgMkmD3bNwvF5VW0+UlUQ1k1vmktTu4Yu13Q0RIxEP8+B+wloA==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.6.tgz",
+      "integrity": "sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==",
       "dev": true,
       "dependencies": {
         "call-bind": "^1.0.7",
@@ -5243,9 +5224,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.4.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.2.tgz",
-      "integrity": "sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==",
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.3.tgz",
+      "integrity": "sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==",
       "dev": true,
       "peer": true,
       "bin": {
diff --git a/src/web/src/app/layout.js b/src/web/src/app/layout.js
index 58d69db..150f70d 100644
--- a/src/web/src/app/layout.js
+++ b/src/web/src/app/layout.js
@@ -1,5 +1,5 @@
 // Imports
-import "@/app/globals.css";
+import "@/style/globals.css";
 import Theme from "@/app/theme";
 import Header from "@/components/header";
 import Footer from "@/components/footer";
diff --git a/src/web/src/app/page.jsx b/src/web/src/app/page.jsx
index 77ab05e..a3aa4c2 100644
--- a/src/web/src/app/page.jsx
+++ b/src/web/src/app/page.jsx
@@ -6,6 +6,6 @@ import { HeroSection1, HeroSection2, HeroSection3 } from "@/components/hero";
 // Exports
 export default function Index() {
   return (
-    <HeroSection1 />
+    null
   );
 }
diff --git a/src/web/src/components/header.jsx b/src/web/src/components/header.jsx
deleted file mode 100644
index ff1b616..0000000
--- a/src/web/src/components/header.jsx
+++ /dev/null
@@ -1,194 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import Link from "next/link";
-import { motion, AnimatePresence } from "framer-motion";
-import { FaBars } from "react-icons/fa"; // Import hamburger icon
-
-
-// Tabs(links to be converted into a tab menu)
-const tabs = [
-  { id: "/", label: "Home", color: "green" },
-  { id: "projects", label: "Projects", color: "yellow" },
-  { id: "resume", label: "Resume", color: "blue" },
-  { id: "blog", label: "Blog", color: "purple" },
-  { id: "shop", label: "Shop", color: "aqua" }
-];
-
-// Tab theme colors
-const tabLineColors = {
-  green: "bg-light-green-1 dark:bg-dark-green-1",
-  yellow: "bg-light-yellow-1 dark:bg-dark-yellow-1",
-  blue: "bg-light-blue-1 dark:bg-dark-blue-1",
-  purple: "bg-light-purple-1 dark:bg-dark-purple-1",
-  aqua: "bg-light-aqua-1 dark:bg-dark-aqua-1"
-};
-
-const tabColors = {
-  green: "text-light-green-1 dark:text-dark-green-1",
-  yellow: "text-light-yellow-1 dark:text-dark-yellow-1",
-  blue: "text-light-blue-1 dark:text-dark-blue-1",
-  purple: "text-light-purple-1 dark:text-dark-purple-1",
-  aqua: "text-light-aqua-1 dark:text-dark-aqua-1"
-};
-
-// Individual tab links
-function MenuTab({ tab, activeTab, setActiveTab }) {
-  return (
-    <Link href={`/${tab.id}`} passHref>
-      <motion.a
-        onClick={() => setActiveTab(tab.id)}
-        className={`${
-          activeTab === tab.id ? "" : ""
-        } 
-        relative rounded-full
-        lg:px-6 md:px-5 sm:px-4 lg:py-1.5 md:py-1.5 sm:py-1.5
-        lg:mr-8 md:mr-4 sm:mr-2 lg:mb-1 md:mb-1 sm:mb-1
-        lg:text-4xl md:text-3xl sm:text-2xl font-bold text-light-foreground dark:text-dark-foreground
-        transition-all focus-visible:outline-2
-      `}
-        style={{
-          WebkitTapHighlightColor: "transparent"
-        }}
-        variants={{
-          visible: { opacity: 1, x: 0 },
-          hidden: { opacity: 0, x: -50 }
-        }}
-        transition={{ duration: 0.3 }}
-      >
-        {activeTab === tab.id && (
-          <motion.div
-            layoutId="underline"
-            className={`
-            absolute inset-x-0 
-            lg:bottom-0.5 md:bottom-0.5 sm:bottom-0.5 
-            lg:h-1.5 md:h-1.5 sm:h-1 
-            ${tabLineColors[tab.color]}
-          `}
-            style={{ marginLeft: "0.75em", marginRight: "0.75em", borderRadius: 9999 }}
-            transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
-          />
-        )}
-        {tab.label}
-      </motion.a>
-    </Link>
-  );
-}
-
-// List of tabs
-function TabMenu({ tabs, activeTab, setActiveTab }) {
-  return (
-    <motion.div
-      initial="hidden"
-      animate="visible"
-      exit="hidden"
-      variants={{
-        visible: {
-          opacity: 1,
-          transition: { staggerChildren: 0.1 }
-        },
-        hidden: { opacity: 0 }
-      }}
-      className="hidden 2xl:flex xl:flex lg:flex md:flex space-x-1" // Hide on small screens
-    >
-      {tabs.map((tab) => (
-        <MenuTab key={tab.id} tab={tab} activeTab={activeTab} setActiveTab={setActiveTab} />
-      ))}
-    </motion.div>
-  );
-}
-
-function CollapsibleTab({ tab, onClick }) {
-  const handleClick = () => {
-    onClick(); // Close the menu when a tab is clicked
-    // You can add additional functionality here if needed
-    // For example: console.log(`Clicked ${tab.label}`);
-  };
-
-  return (
-    <Link href={`/${tab.id}`} passHref>
-      <motion.a
-        className={`text-lg font-bold ${tabColors[tab.color]} rounded-full px-4 py-2 focus:outline-none`}
-        onClick={handleClick}
-        whileHover={{ scale: 1.1 }}
-        whileTap={{ scale: 0.9 }}
-      >
-        {tab.label}
-      </motion.a>
-    </Link>
-  );
-}
-
-// CollapsibleTabMenu component
-function CollapsibleTabMenu() {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const toggleMenu = () => {
-    setIsOpen(!isOpen);
-  };
-
-  const handleTabClick = () => {
-    setIsOpen(false); // Close the menu when a tab is clicked
-  };
-
-  return (
-    <div>
-      <div className="justify-end">
-        <button onClick={toggleMenu} className="focus:outline-none">
-          <FaBars size={24} />
-        </button>
-      </div>
-      <AnimatePresence>
-        {isOpen && (
-          <motion.div
-            className="fixed top-0 left-0 w-full h-full bg-gray-200 dark:bg-gray-800 z-50"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-          >
-            <motion.div
-              className="flex flex-col items-center justify-center h-full"
-              initial="hidden"
-              animate="visible"
-              exit="hidden"
-              variants={{
-                visible: { opacity: 1, scale: 1, transition: { staggerChildren: 0.1 } },
-                hidden: { opacity: 0, scale: 0.9 }
-              }}
-            >
-              {tabs.map((tab, index) => (
-                <motion.div key={tab.id} variants={{ hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }}>
-                  <CollapsibleTab tab={tab} onClick={handleTabClick} />
-                </motion.div>
-              ))}
-            </motion.div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-}
-
-function Header() {
-  const [mounted, setMounted] = useState(false);
-  const [activeTab, setActiveTab] = useState(tabs[0].id);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  return (
-    <div className="flex justify-center items-center">
-      <AnimatePresence>
-        {mounted && (
-          <>
-            <TabMenu tabs={tabs} activeTab={activeTab} setActiveTab={setActiveTab} />
-            <CollapsibleTabMenu tabs={tabs} />
-          </>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-}
-
-export default Header;
diff --git a/src/web/src/components/header/constants.js b/src/web/src/components/header/constants.js
new file mode 100644
index 0000000..088f9c5
--- /dev/null
+++ b/src/web/src/components/header/constants.js
@@ -0,0 +1,26 @@
+// Navigation links
+export const Links = [
+  { id: 0, href: "/", label: "Home", color: "green" },
+  { id: 1, href: "projects", label: "Projects", color: "yellow" },
+  { id: 2, href: "resume", label: "Resume", color: "blue" },
+  { id: 3, href: "blog", label: "Blog", color: "purple" },
+  { id: 4, href: "shop", label: "Shop", color: "aqua" }
+];
+
+// Drop down menu link colors
+export const LinkColors = {
+  green: "text-light-green-1 dark:text-dark-green-1",
+  yellow: "text-light-yellow-1 dark:text-dark-yellow-1",
+  blue: "text-light-blue-1 dark:text-dark-blue-1",
+  purple: "text-light-purple-1 dark:text-dark-purple-1",
+  aqua: "text-light-aqua-1 dark:text-dark-aqua-1"
+};
+
+// Link underline selector colors
+export const LinkUnderlineColors = {
+  green: "bg-light-green-1 dark:bg-dark-green-1",
+  yellow: "bg-light-yellow-1 dark:bg-dark-yellow-1",
+  blue: "bg-light-blue-1 dark:bg-dark-blue-1",
+  purple: "bg-light-purple-1 dark:bg-dark-purple-1",
+  aqua: "bg-light-aqua-1 dark:bg-dark-aqua-1"
+};
diff --git a/src/web/src/components/header/index.jsx b/src/web/src/components/header/index.jsx
new file mode 100644
index 0000000..2cf58e9
--- /dev/null
+++ b/src/web/src/components/header/index.jsx
@@ -0,0 +1,12 @@
+import Topbar from "@/components/header/topbar";
+import Sidebar from "@/components/header/sidebar";
+
+function Header() {
+  return (
+    <>
+      <Topbar />
+    </>
+  );
+}
+
+export default Header;
diff --git a/src/web/src/components/header/sidebar.jsx b/src/web/src/components/header/sidebar.jsx
new file mode 100644
index 0000000..97c88cc
--- /dev/null
+++ b/src/web/src/components/header/sidebar.jsx
@@ -0,0 +1,41 @@
+"use client"
+
+import Link from "next/link";
+import { motion } from "framer-motion";
+import { Links, LinkColors } from "@/components/header/constants";
+
+function Sidebar() {
+  return (
+    <div className="fixed top-0 left-0 h-screen w-45 flex justify-end transform -rotate-90 origin-top-left">
+      <motion.nav
+        initial="hidden"
+        animate="visible"
+        variants={{
+          visible: {
+            transiton: {
+              staggerChildren: 0.3
+            }
+          },
+        }}
+        className="
+          flex flex-col justify-center items-center transform -translate-x-full
+      ">
+        <div className="flex space-x-10">
+          {Links.map((link) => (
+            <motion.div
+              key={link.id}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: link.id * 0.2 }}
+              className={`
+                ${LinkColors[link.color]} dark:${LinkColors[link.color]}
+              `}>
+              <Link href={link.href}>{link.label}</Link>
+            </motion.div>
+          ))}
+        </div>
+      </motion.nav>
+    </div>
+  );
+}
+export default Sidebar;
diff --git a/src/web/src/components/header/topbar.jsx b/src/web/src/components/header/topbar.jsx
new file mode 100644
index 0000000..330fca8
--- /dev/null
+++ b/src/web/src/components/header/topbar.jsx
@@ -0,0 +1,46 @@
+"use client"
+
+import Link from "next/link";
+import { motion } from "framer-motion";
+import { Links, LinkColors } from "@/components/header/constants";
+
+function Topbar() {
+  return (
+    <div className="sticky mx-auto max-w-screen-lg">
+      <motion.nav
+        initial="hidden"
+        animate="visible"
+        variants={{
+          visible: {
+            transition: {
+              staggerChildren: 0.3
+            }
+          },
+        }}
+        className="
+          hidden 2xl:flex xl:flex lg:flex md:flex flex-row
+          lg:px-6 md:px-5 sm:px-4 lg:py-1.5 md:py-1.5
+          lg:text-4xl md:text-3xl
+          font-bold justify-center
+      ">
+        <div className="flex lg:space-x-20 md:space-x-10">
+          {Links.map((link) => (
+            <motion.div
+              key={link.id}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: link.id * 0.2 }}
+              className={`
+                inline-block
+                ${LinkColors[link.color]} dark:${LinkColors[link.color]}
+              `}>
+              <Link href={link.href}>{link.label}</Link>
+            </motion.div>
+          ))}
+        </div>
+      </motion.nav>
+    </div>
+  );
+}
+
+export default Topbar;
diff --git a/src/web/src/app/globals.css b/src/web/src/style/globals.css
similarity index 100%
rename from src/web/src/app/globals.css
rename to src/web/src/style/globals.css