diff --git a/package.json b/package.json
index 1886298..f7bbfc1 100644
--- a/package.json
+++ b/package.json
@@ -11,29 +11,30 @@
         "lint": "eslint . --ext ts --ext vue --max-warnings 0"
     },
     "dependencies": {
-        "@theopensource-company/feature-flags": "^0.4.2",
+        "@theopensource-company/feature-flags": "^0.4.5",
+        "lucide-vue-next": "^0.292.0",
         "url": "^0.11.3",
-        "vue": "^3.3.4",
-        "vue-meta": "^3.0.0-alpha.7",
+        "vue": "^3.3.7",
+        "vue-meta": "3.0.0-alpha.10",
         "vue-router": "^4.2.5",
         "zod": "^3.22.4"
     },
     "devDependencies": {
-        "@typescript-eslint/eslint-plugin": "^6.8.0",
-        "@typescript-eslint/parser": "^6.8.0",
-        "@vitejs/plugin-vue": "^4.2.3",
-        "eslint": "^8.51.0",
+        "@typescript-eslint/eslint-plugin": "^6.9.1",
+        "@typescript-eslint/parser": "^6.9.1",
+        "@vitejs/plugin-vue": "^4.4.0",
+        "eslint": "^8.52.0",
         "eslint-config-prettier": "^9.0.0",
         "eslint-plugin-json": "^3.1.0",
         "eslint-plugin-only-error": "^1.0.2",
         "eslint-plugin-prettier": "^5.0.1",
         "eslint-plugin-unused-imports": "^3.0.0",
-        "eslint-plugin-vue": "^9.17.0",
+        "eslint-plugin-vue": "^9.18.1",
         "prettier": "^3.0.3",
         "prettier-plugin-organize-imports": "^3.2.3",
-        "sass": "^1.69.3",
-        "typescript": "^5.0.2",
-        "vite": "^4.4.5",
-        "vue-tsc": "^1.8.5"
+        "sass": "^1.69.5",
+        "typescript": "^5.2.2",
+        "vite": "^4.5.0",
+        "vue-tsc": "^1.8.22"
     }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ebee911..befcb8b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,16 +6,19 @@ settings:
 
 dependencies:
   '@theopensource-company/feature-flags':
-    specifier: ^0.4.2
+    specifier: ^0.4.5
     version: 0.4.5(typescript@5.2.2)
+  lucide-vue-next:
+    specifier: ^0.292.0
+    version: 0.292.0(vue@3.3.7)
   url:
     specifier: ^0.11.3
     version: 0.11.3
   vue:
-    specifier: ^3.3.4
+    specifier: ^3.3.7
     version: 3.3.7(typescript@5.2.2)
   vue-meta:
-    specifier: ^3.0.0-alpha.7
+    specifier: 3.0.0-alpha.10
     version: 3.0.0-alpha.10(vue@3.3.7)
   vue-router:
     specifier: ^4.2.5
@@ -26,16 +29,16 @@ dependencies:
 
 devDependencies:
   '@typescript-eslint/eslint-plugin':
-    specifier: ^6.8.0
-    version: 6.9.0(@typescript-eslint/parser@6.9.0)(eslint@8.52.0)(typescript@5.2.2)
+    specifier: ^6.9.1
+    version: 6.9.1(@typescript-eslint/parser@6.9.1)(eslint@8.52.0)(typescript@5.2.2)
   '@typescript-eslint/parser':
-    specifier: ^6.8.0
-    version: 6.9.0(eslint@8.52.0)(typescript@5.2.2)
+    specifier: ^6.9.1
+    version: 6.9.1(eslint@8.52.0)(typescript@5.2.2)
   '@vitejs/plugin-vue':
-    specifier: ^4.2.3
+    specifier: ^4.4.0
     version: 4.4.0(vite@4.5.0)(vue@3.3.7)
   eslint:
-    specifier: ^8.51.0
+    specifier: ^8.52.0
     version: 8.52.0
   eslint-config-prettier:
     specifier: ^9.0.0
@@ -51,9 +54,9 @@ devDependencies:
     version: 5.0.1(eslint-config-prettier@9.0.0)(eslint@8.52.0)(prettier@3.0.3)
   eslint-plugin-unused-imports:
     specifier: ^3.0.0
-    version: 3.0.0(@typescript-eslint/eslint-plugin@6.9.0)(eslint@8.52.0)
+    version: 3.0.0(@typescript-eslint/eslint-plugin@6.9.1)(eslint@8.52.0)
   eslint-plugin-vue:
-    specifier: ^9.17.0
+    specifier: ^9.18.1
     version: 9.18.1(eslint@8.52.0)
   prettier:
     specifier: ^3.0.3
@@ -62,16 +65,16 @@ devDependencies:
     specifier: ^3.2.3
     version: 3.2.3(prettier@3.0.3)(typescript@5.2.2)
   sass:
-    specifier: ^1.69.3
+    specifier: ^1.69.5
     version: 1.69.5
   typescript:
-    specifier: ^5.0.2
+    specifier: ^5.2.2
     version: 5.2.2
   vite:
-    specifier: ^4.4.5
+    specifier: ^4.5.0
     version: 4.5.0(sass@1.69.5)
   vue-tsc:
-    specifier: ^1.8.5
+    specifier: ^1.8.22
     version: 1.8.22(typescript@5.2.2)
 
 packages:
@@ -429,8 +432,8 @@ packages:
     resolution: {integrity: sha512-MMzuxN3GdFwskAnb6fz0orFvhfqi752yjaXylr0Rp4oDg5H0Zn1IuyRhDVvYOwAXoJirx2xuS16I3WjxnAIHiQ==}
     dev: true
 
-  /@typescript-eslint/eslint-plugin@6.9.0(@typescript-eslint/parser@6.9.0)(eslint@8.52.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-lgX7F0azQwRPB7t7WAyeHWVfW1YJ9NIgd9mvGhfQpRY56X6AVf8mwM8Wol+0z4liE7XX3QOt8MN1rUKCfSjRIA==}
+  /@typescript-eslint/eslint-plugin@6.9.1(@typescript-eslint/parser@6.9.1)(eslint@8.52.0)(typescript@5.2.2):
+    resolution: {integrity: sha512-w0tiiRc9I4S5XSXXrMHOWgHgxbrBn1Ro+PmiYhSg2ZVdxrAJtQgzU5o2m1BfP6UOn7Vxcc6152vFjQfmZR4xEg==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       '@typescript-eslint/parser': ^6.0.0 || ^6.0.0-alpha
@@ -441,11 +444,11 @@ packages:
         optional: true
     dependencies:
       '@eslint-community/regexpp': 4.10.0
-      '@typescript-eslint/parser': 6.9.0(eslint@8.52.0)(typescript@5.2.2)
-      '@typescript-eslint/scope-manager': 6.9.0
-      '@typescript-eslint/type-utils': 6.9.0(eslint@8.52.0)(typescript@5.2.2)
-      '@typescript-eslint/utils': 6.9.0(eslint@8.52.0)(typescript@5.2.2)
-      '@typescript-eslint/visitor-keys': 6.9.0
+      '@typescript-eslint/parser': 6.9.1(eslint@8.52.0)(typescript@5.2.2)
+      '@typescript-eslint/scope-manager': 6.9.1
+      '@typescript-eslint/type-utils': 6.9.1(eslint@8.52.0)(typescript@5.2.2)
+      '@typescript-eslint/utils': 6.9.1(eslint@8.52.0)(typescript@5.2.2)
+      '@typescript-eslint/visitor-keys': 6.9.1
       debug: 4.3.4
       eslint: 8.52.0
       graphemer: 1.4.0
@@ -458,8 +461,8 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser@6.9.0(eslint@8.52.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-GZmjMh4AJ/5gaH4XF2eXA8tMnHWP+Pm1mjQR2QN4Iz+j/zO04b9TOvJYOX2sCNIQHtRStKTxRY1FX7LhpJT4Gw==}
+  /@typescript-eslint/parser@6.9.1(eslint@8.52.0)(typescript@5.2.2):
+    resolution: {integrity: sha512-C7AK2wn43GSaCUZ9do6Ksgi2g3mwFkMO3Cis96kzmgudoVaKyt62yNzJOktP0HDLb/iO2O0n2lBOzJgr6Q/cyg==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0
@@ -468,10 +471,10 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/scope-manager': 6.9.0
-      '@typescript-eslint/types': 6.9.0
-      '@typescript-eslint/typescript-estree': 6.9.0(typescript@5.2.2)
-      '@typescript-eslint/visitor-keys': 6.9.0
+      '@typescript-eslint/scope-manager': 6.9.1
+      '@typescript-eslint/types': 6.9.1
+      '@typescript-eslint/typescript-estree': 6.9.1(typescript@5.2.2)
+      '@typescript-eslint/visitor-keys': 6.9.1
       debug: 4.3.4
       eslint: 8.52.0
       typescript: 5.2.2
@@ -479,16 +482,16 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/scope-manager@6.9.0:
-    resolution: {integrity: sha512-1R8A9Mc39n4pCCz9o79qRO31HGNDvC7UhPhv26TovDsWPBDx+Sg3rOZdCELIA3ZmNoWAuxaMOT7aWtGRSYkQxw==}
+  /@typescript-eslint/scope-manager@6.9.1:
+    resolution: {integrity: sha512-38IxvKB6NAne3g/+MyXMs2Cda/Sz+CEpmm+KLGEM8hx/CvnSRuw51i8ukfwB/B/sESdeTGet1NH1Wj7I0YXswg==}
     engines: {node: ^16.0.0 || >=18.0.0}
     dependencies:
-      '@typescript-eslint/types': 6.9.0
-      '@typescript-eslint/visitor-keys': 6.9.0
+      '@typescript-eslint/types': 6.9.1
+      '@typescript-eslint/visitor-keys': 6.9.1
     dev: true
 
-  /@typescript-eslint/type-utils@6.9.0(eslint@8.52.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-XXeahmfbpuhVbhSOROIzJ+b13krFmgtc4GlEuu1WBT+RpyGPIA4Y/eGnXzjbDj5gZLzpAXO/sj+IF/x2GtTMjQ==}
+  /@typescript-eslint/type-utils@6.9.1(eslint@8.52.0)(typescript@5.2.2):
+    resolution: {integrity: sha512-eh2oHaUKCK58qIeYp19F5V5TbpM52680sB4zNSz29VBQPTWIlE/hCj5P5B1AChxECe/fmZlspAWFuRniep1Skg==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0
@@ -497,8 +500,8 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/typescript-estree': 6.9.0(typescript@5.2.2)
-      '@typescript-eslint/utils': 6.9.0(eslint@8.52.0)(typescript@5.2.2)
+      '@typescript-eslint/typescript-estree': 6.9.1(typescript@5.2.2)
+      '@typescript-eslint/utils': 6.9.1(eslint@8.52.0)(typescript@5.2.2)
       debug: 4.3.4
       eslint: 8.52.0
       ts-api-utils: 1.0.3(typescript@5.2.2)
@@ -507,13 +510,13 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/types@6.9.0:
-    resolution: {integrity: sha512-+KB0lbkpxBkBSiVCuQvduqMJy+I1FyDbdwSpM3IoBS7APl4Bu15lStPjgBIdykdRqQNYqYNMa8Kuidax6phaEw==}
+  /@typescript-eslint/types@6.9.1:
+    resolution: {integrity: sha512-BUGslGOb14zUHOUmDB2FfT6SI1CcZEJYfF3qFwBeUrU6srJfzANonwRYHDpLBuzbq3HaoF2XL2hcr01c8f8OaQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
     dev: true
 
-  /@typescript-eslint/typescript-estree@6.9.0(typescript@5.2.2):
-    resolution: {integrity: sha512-NJM2BnJFZBEAbCfBP00zONKXvMqihZCrmwCaik0UhLr0vAgb6oguXxLX1k00oQyD+vZZ+CJn3kocvv2yxm4awQ==}
+  /@typescript-eslint/typescript-estree@6.9.1(typescript@5.2.2):
+    resolution: {integrity: sha512-U+mUylTHfcqeO7mLWVQ5W/tMLXqVpRv61wm9ZtfE5egz7gtnmqVIw9ryh0mgIlkKk9rZLY3UHygsBSdB9/ftyw==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       typescript: '*'
@@ -521,8 +524,8 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/types': 6.9.0
-      '@typescript-eslint/visitor-keys': 6.9.0
+      '@typescript-eslint/types': 6.9.1
+      '@typescript-eslint/visitor-keys': 6.9.1
       debug: 4.3.4
       globby: 11.1.0
       is-glob: 4.0.3
@@ -533,8 +536,8 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils@6.9.0(eslint@8.52.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-5Wf+Jsqya7WcCO8me504FBigeQKVLAMPmUzYgDbWchINNh1KJbxCgVya3EQ2MjvJMVeXl3pofRmprqX6mfQkjQ==}
+  /@typescript-eslint/utils@6.9.1(eslint@8.52.0)(typescript@5.2.2):
+    resolution: {integrity: sha512-L1T0A5nFdQrMVunpZgzqPL6y2wVreSyHhKGZryS6jrEN7bD9NplVAyMryUhXsQ4TWLnZmxc2ekar/lSGIlprCA==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0
@@ -542,9 +545,9 @@ packages:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.52.0)
       '@types/json-schema': 7.0.14
       '@types/semver': 7.5.4
-      '@typescript-eslint/scope-manager': 6.9.0
-      '@typescript-eslint/types': 6.9.0
-      '@typescript-eslint/typescript-estree': 6.9.0(typescript@5.2.2)
+      '@typescript-eslint/scope-manager': 6.9.1
+      '@typescript-eslint/types': 6.9.1
+      '@typescript-eslint/typescript-estree': 6.9.1(typescript@5.2.2)
       eslint: 8.52.0
       semver: 7.5.4
     transitivePeerDependencies:
@@ -552,11 +555,11 @@ packages:
       - typescript
     dev: true
 
-  /@typescript-eslint/visitor-keys@6.9.0:
-    resolution: {integrity: sha512-dGtAfqjV6RFOtIP8I0B4ZTBRrlTT8NHHlZZSchQx3qReaoDeXhYM++M4So2AgFK9ZB0emRPA6JI1HkafzA2Ibg==}
+  /@typescript-eslint/visitor-keys@6.9.1:
+    resolution: {integrity: sha512-MUaPUe/QRLEffARsmNfmpghuQkW436DvESW+h+M52w0coICHRfD6Np9/K6PdACwnrq1HmuLl+cSPZaJmeVPkSw==}
     engines: {node: ^16.0.0 || >=18.0.0}
     dependencies:
-      '@typescript-eslint/types': 6.9.0
+      '@typescript-eslint/types': 6.9.1
       eslint-visitor-keys: 3.4.3
     dev: true
 
@@ -575,22 +578,22 @@ packages:
       vue: 3.3.7(typescript@5.2.2)
     dev: true
 
-  /@volar/language-core@1.10.7:
-    resolution: {integrity: sha512-6+WI7HGqWCsKJ/bms4V45WP7eDeoGxDtLjYPrHB7QkIWVkRLIeGPzzBoonZz9kERM+Kld3W89Y+IlICejVAKhA==}
+  /@volar/language-core@1.10.10:
+    resolution: {integrity: sha512-nsV1o3AZ5n5jaEAObrS3MWLBWaGwUj/vAsc15FVNIv+DbpizQRISg9wzygsHBr56ELRH8r4K75vkYNMtsSNNWw==}
     dependencies:
-      '@volar/source-map': 1.10.7
+      '@volar/source-map': 1.10.10
     dev: true
 
-  /@volar/source-map@1.10.7:
-    resolution: {integrity: sha512-anA254XO0lmmeu0p/kvgPOCkrVpqNIHWMvEkPX70PSk4ntg0iBzN/f0Kip6deXvibl6v14Q3Z8RihWrZwdZEEQ==}
+  /@volar/source-map@1.10.10:
+    resolution: {integrity: sha512-GVKjLnifV4voJ9F0vhP56p4+F3WGf+gXlRtjFZsv6v3WxBTWU3ZVeaRaEHJmWrcv5LXmoYYpk/SC25BKemPRkg==}
     dependencies:
       muggle-string: 0.3.1
     dev: true
 
-  /@volar/typescript@1.10.7:
-    resolution: {integrity: sha512-2hvA3vjXVUn1vOpsP/nWLnE5DUmY6YKQhvDRoZVfBrnWwIo0ySxdTUP4XieXGGgSk43xJaeU1zqQS/3Wfm7QgA==}
+  /@volar/typescript@1.10.10:
+    resolution: {integrity: sha512-4a2r5bdUub2m+mYVnLu2wt59fuoYWe7nf0uXtGHU8QQ5LDNfzAR0wK7NgDiQ9rcl2WT3fxT2AA9AylAwFtj50A==}
     dependencies:
-      '@volar/language-core': 1.10.7
+      '@volar/language-core': 1.10.10
       path-browserify: 1.0.1
     dev: true
 
@@ -640,8 +643,8 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@volar/language-core': 1.10.7
-      '@volar/source-map': 1.10.7
+      '@volar/language-core': 1.10.10
+      '@volar/source-map': 1.10.10
       '@vue/compiler-dom': 3.3.7
       '@vue/shared': 3.3.7
       computeds: 0.0.1
@@ -1011,7 +1014,7 @@ packages:
       synckit: 0.8.5
     dev: true
 
-  /eslint-plugin-unused-imports@3.0.0(@typescript-eslint/eslint-plugin@6.9.0)(eslint@8.52.0):
+  /eslint-plugin-unused-imports@3.0.0(@typescript-eslint/eslint-plugin@6.9.1)(eslint@8.52.0):
     resolution: {integrity: sha512-sduiswLJfZHeeBJ+MQaG+xYzSWdRXoSw61DpU13mzWumCkR0ufD0HmO4kdNokjrkluMHpj/7PJeN35pgbhW3kw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -1021,7 +1024,7 @@ packages:
       '@typescript-eslint/eslint-plugin':
         optional: true
     dependencies:
-      '@typescript-eslint/eslint-plugin': 6.9.0(@typescript-eslint/parser@6.9.0)(eslint@8.52.0)(typescript@5.2.2)
+      '@typescript-eslint/eslint-plugin': 6.9.1(@typescript-eslint/parser@6.9.1)(eslint@8.52.0)(typescript@5.2.2)
       eslint: 8.52.0
       eslint-rule-composer: 0.3.0
     dev: true
@@ -1543,6 +1546,14 @@ packages:
       yallist: 4.0.0
     dev: true
 
+  /lucide-vue-next@0.292.0(vue@3.3.7):
+    resolution: {integrity: sha512-tVnEPLJvB9n+REfJsgJsG/zxGM0yamFs6WkOjuAvMG1ZlMS27soiKekuWk/+G2uLF4jqhEegQHVmcAJBlnJpeg==}
+    peerDependencies:
+      vue: '>=3.0.1'
+    dependencies:
+      vue: 3.3.7(typescript@5.2.2)
+    dev: false
+
   /magic-string@0.30.5:
     resolution: {integrity: sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==}
     engines: {node: '>=12'}
@@ -1790,8 +1801,8 @@ packages:
     resolution: {integrity: sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==}
     dev: false
 
-  /punycode@2.3.0:
-    resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
+  /punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
     dev: true
 
@@ -2014,7 +2025,7 @@ packages:
   /uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
     dependencies:
-      punycode: 2.3.0
+      punycode: 2.3.1
     dev: true
 
   /url@0.11.3:
@@ -2138,7 +2149,7 @@ packages:
     peerDependencies:
       typescript: '*'
     dependencies:
-      '@volar/typescript': 1.10.7
+      '@volar/typescript': 1.10.10
       '@vue/language-core': 1.8.22(typescript@5.2.2)
       semver: 7.5.4
       typescript: 5.2.2
diff --git a/src/App.vue b/src/App.vue
index 0e316ce..f68c84f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,9 +2,15 @@
     import Navbar from '@/components/nav/Navbar.vue';
     import NavbarLink from '@/components/nav/NavbarLink.vue';
     import Account from '@/components/nav/Account.vue';
-    import LogoLink from '@/components/nav/LogoLink.vue';
-    import { useRoute } from 'vue-router';
+    import Logo from '@/components/brand/Logo.vue';
+    import { RouterLink, RouterView, useRoute } from 'vue-router';
+    import TextInput from './components/input/TextInput.vue';
+    import { ref } from 'vue';
+    import { Home, Compass, Archive } from 'lucide-vue-next';
+
     const route = useRoute();
+
+    const search = ref('');
 </script>
 
 <template>
@@ -14,23 +20,106 @@
         }}</template>
         <template #description="{ content }">{{ content }}</template>
     </metainfo>
-    <header>
-        <LogoLink />
-        <Navbar>
-            <NavbarLink path="/">Home</NavbarLink>
-            <NavbarLink path="/">Community</NavbarLink>
-            <NavbarLink path="/">Events</NavbarLink>
-        </Navbar>
-        <Account />
-    </header>
-    <RouterView :key="route.fullPath" />
+    <div class="wrapper">
+        <aside>
+            <RouterLink to="/" class="logo-link">
+                <Logo />
+            </RouterLink>
+            <Navbar>
+                <NavbarLink path="/">
+                    <template #icon><Home /></template>
+                    Home
+                </NavbarLink>
+                <NavbarLink path="/discover">
+                    <template #icon><Compass /></template>
+                    Discover
+                </NavbarLink>
+                <NavbarLink path="/library">
+                    <template #icon><Archive /></template>
+                    Library
+                </NavbarLink>
+            </Navbar>
+        </aside>
+        <div class="search">
+            <TextInput
+                v-model="search"
+                class="search-bar"
+                placeholder="Search..."
+            />
+        </div>
+        <RouterView :key="route.fullPath" class="view" />
+        <Account class="account" />
+    </div>
 </template>
 
 <style scoped lang="scss">
-    header {
+    .wrapper {
         display: grid;
-        align-items: center;
-        grid-template-columns: 1fr auto 1fr;
-        margin: 0 5vw;
+        grid-template-columns: 1fr 5fr 1fr;
+        grid-template-rows: 3rem auto;
+        align-items: start;
+        gap: 3rem;
+        margin: 2rem auto;
+        padding: 0 2rem;
+        max-width: 170vh;
+
+        aside {
+            grid-column: 1;
+            grid-row: span 2;
+            display: flex;
+            flex-direction: column;
+            gap: 2rem;
+
+            font-size: 18px;
+
+            position: sticky;
+            top: 2rem;
+
+            min-height: 20em;
+        }
+
+        .search {
+            grid-column: 2;
+            grid-row: 1;
+
+            position: sticky;
+            top: 2rem;
+            z-index: 1001;
+
+            display: flex;
+            flex-direction: column;
+            align-items: stretch;
+            justify-content: stretch;
+
+            .search-bar {
+                line-height: 2em;
+                max-width: 500px;
+            }
+        }
+
+        .view {
+            display: grid;
+            grid-column-start: 2;
+            grid-column-end: 4;
+            grid-row: 2;
+            grid-template-columns: subgrid;
+            margin: 0.5rem;
+        }
+
+        .account {
+            grid-column: 3;
+            grid-row: 1;
+
+            position: sticky;
+            top: 2rem;
+            z-index: 1001;
+        }
+    }
+
+    .logo-link {
+        display: flex;
+        font-size: 3rem;
+        height: max-content;
+        text-decoration: none;
     }
 </style>
diff --git a/src/components/brand/Logo.vue b/src/components/brand/Logo.vue
index 5d0d0c8..7602728 100644
--- a/src/components/brand/Logo.vue
+++ b/src/components/brand/Logo.vue
@@ -14,18 +14,18 @@
         display: flex;
         flex-direction: row;
         align-items: center;
-        gap: 1em;
+        gap: 0.33em;
         color: var(--light);
         text-decoration: none;
     }
 
     .vector {
-        width: 3em;
-        height: 3em;
+        width: 1.25em;
+        height: 1em;
     }
 
     .text {
-        font-size: 2em;
+        font-size: 0.75em;
         font-weight: 700;
     }
 </style>
diff --git a/src/components/brand/LogoVector.vue b/src/components/brand/LogoVector.vue
index c3a4876..05b4520 100644
--- a/src/components/brand/LogoVector.vue
+++ b/src/components/brand/LogoVector.vue
@@ -3,14 +3,14 @@
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         width="100"
-        height="100"
-        viewBox="0 0 100 100"
+        height="80"
+        viewBox="0 0 100 80"
         v-bind="$attrs"
     >
         <g>
             <path
                 d="
-            M 35,10
+            M 35,0
             c 30,0 25,45 65,45
             q -10,35 -50,35
             c -35,0 -50,-30 -50,-45
diff --git a/src/components/input/TextInput.vue b/src/components/input/TextInput.vue
new file mode 100644
index 0000000..f94093c
--- /dev/null
+++ b/src/components/input/TextInput.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+    const { fieldStyle, modelValue } = defineProps<{
+        fieldStyle?: string;
+        modelValue?: string;
+    }>();
+    const emit = defineEmits<{
+        (e: 'update:modelValue', value: string | number): void;
+    }>();
+</script>
+
+<template>
+    <input
+        :class="[
+            'default',
+            fieldStyle && 'style-' + fieldStyle,
+            !modelValue && 'empty',
+        ]"
+        v-bind="$attrs"
+        :value="modelValue"
+        @input="
+            emit('update:modelValue', ($event.target as HTMLInputElement).value)
+        "
+    />
+</template>
+
+<style scoped lang="scss">
+    .default {
+        display: block;
+        font-size: 1em;
+        line-height: 1em;
+        padding: 0.5em 0.75em;
+        border-radius: 0.5em;
+        transition: 0.2s ease;
+
+        border: none;
+        background-color: var(--light-frosted);
+        backdrop-filter: blur(5px);
+        color: var(--light1);
+        outline: none;
+
+        .empty {
+            color: var(--light2);
+        }
+
+        &:hover,
+        &:focus {
+            color: var(--light1);
+        }
+    }
+</style>
diff --git a/src/components/nav/Account.vue b/src/components/nav/Account.vue
index 8b2f90f..552ece6 100644
--- a/src/components/nav/Account.vue
+++ b/src/components/nav/Account.vue
@@ -11,10 +11,11 @@
 
 <style scoped lang="scss">
     .account {
+        max-width: max-content;
+
         display: flex;
-        flex-direction: row-reverse;
-        justify-self: flex-end;
-        align-self: center;
+        justify-self: end;
+        flex-direction: row;
 
         align-items: center;
         gap: 1em;
diff --git a/src/components/nav/LogoLink.vue b/src/components/nav/LogoLink.vue
deleted file mode 100644
index 986c96e..0000000
--- a/src/components/nav/LogoLink.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-    import Logo from '@/components/brand/Logo.vue';
-</script>
-
-<template>
-    <RouterLink to="/" class="hide-link">
-        <Logo />
-    </RouterLink>
-</template>
-
-<style scoped>
-    .hide-link {
-        color: inherit;
-        text-decoration: none;
-    }
-</style>
diff --git a/src/components/nav/Navbar.vue b/src/components/nav/Navbar.vue
index ebfd871..6623634 100644
--- a/src/components/nav/Navbar.vue
+++ b/src/components/nav/Navbar.vue
@@ -9,10 +9,9 @@
 <style scoped lang="scss">
     .navbar {
         display: flex;
-        flex-direction: row;
-        gap: 3em;
-        height: 5em;
-
-        align-items: center;
+        flex: 1;
+        flex-direction: column;
+        gap: 1.5rem;
+        margin: 1rem;
     }
 </style>
diff --git a/src/components/nav/NavbarLink.vue b/src/components/nav/NavbarLink.vue
index bd7d252..db28990 100644
--- a/src/components/nav/NavbarLink.vue
+++ b/src/components/nav/NavbarLink.vue
@@ -7,19 +7,31 @@
 </script>
 
 <template>
-    <RouterLink :to="path" class="link">
+    <RouterLink :to="path" class="link" v-bind="$attrs">
+        <slot name="icon" class="icon"></slot>
         <slot />
     </RouterLink>
 </template>
 
 <style scoped lang="scss">
     .link {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        vertical-align: middle;
+        gap: 1em;
+        max-width: max-content;
         color: var(--light2);
         text-decoration: none;
         transition: color 0.2s ease;
 
-        &:hover {
+        &:hover,
+        &.router-link-exact-active {
             color: var(--light);
         }
+
+        .icon {
+            line-height: 1em;
+        }
     }
 </style>
diff --git a/src/components/store/StoreGrid.vue b/src/components/store/StoreGrid.vue
index fb145b0..8ccf771 100644
--- a/src/components/store/StoreGrid.vue
+++ b/src/components/store/StoreGrid.vue
@@ -9,8 +9,9 @@
 <style scoped lang="scss">
     .grid {
         display: grid;
-        grid-template-columns: repeat(3, 16fr);
-        grid-template-rows: repeat(3, 9fr);
+        grid-column: span 2;
+        grid-template-columns: repeat(3, 1fr);
+        grid-template-rows: repeat(3, 1fr);
 
         aspect-ratio: 16 / 9;
         gap: 1em;
diff --git a/src/components/store/StoreItem.vue b/src/components/store/StoreItem.vue
index aafc757..96931a0 100644
--- a/src/components/store/StoreItem.vue
+++ b/src/components/store/StoreItem.vue
@@ -11,16 +11,14 @@
 
 <template>
     <RouterLink
-        :to="(item && `/product/${item.slug}`) ?? ''"
+        :to="`/product/${(item && item.slug) ?? ''}`"
         :class="['item', size ?? 'small']"
     >
-        <div v-if="!!item">
-            <div class="thumbnail">
-                <img :src="item.thumbnail" />
-            </div>
-            <div class="details">
-                <span class="title">{{ item.title }}</span>
-            </div>
+        <div class="thumbnail">
+            <img
+                :src="(item && item.thumbnail) ?? ''"
+                :alt="(item && item.title) ?? ''"
+            />
         </div>
     </RouterLink>
 </template>
@@ -29,24 +27,25 @@
     .item {
         border-radius: 1em;
         background-color: var(--dark2);
-        position: relative;
         overflow: hidden;
-        color: #fff;
-        text-decoration: none;
+        position: relative;
 
         .thumbnail {
+            position: absolute;
+            inset: 0;
+            transition: transform 0.1s ease;
+
             img {
                 width: 100%;
                 height: 100%;
                 object-fit: cover;
-                object-position: center;
-                transform-origin: center;
-                transition: transform 0.2s ease;
             }
         }
 
-        &:hover .thumbnail img {
+        &:hover .thumbnail,
+        &:focus .thumbnail {
             transform: scale(1.05);
+            transition-duration: 0.2s;
         }
     }
 
diff --git a/src/main.ts b/src/main.ts
index 5bded1b..7569cdc 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,12 +2,24 @@ import { createApp } from 'vue';
 import { createMetaManager } from 'vue-meta';
 import { createRouter, createWebHistory } from 'vue-router';
 import App from './App.vue';
+import DiscoverVue from './routes/Discover.vue';
 import HomeVue from './routes/Home.vue';
+import LibraryVue from './routes/Library.vue';
 import './style.css';
 
 const router = createRouter({
     history: createWebHistory(),
-    routes: [{ path: '/', component: HomeVue }],
+    routes: [
+        { path: '/', component: HomeVue },
+        { path: '/discover', component: DiscoverVue },
+        { path: '/library', component: LibraryVue },
+        {
+            path: '/product/:id',
+            component: () => {
+                console.log('To-do');
+            },
+        },
+    ],
 });
 
 createApp(App).use(router).use(createMetaManager()).mount('#app');
diff --git a/src/routes/Discover.vue b/src/routes/Discover.vue
new file mode 100644
index 0000000..b3e91e4
--- /dev/null
+++ b/src/routes/Discover.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+    import { useFeatureFlags } from '@/library/featureFlags';
+    const [flags] = useFeatureFlags();
+</script>
+
+<template>
+    <Prelaunch v-if="flags.preLaunch" />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/src/routes/Home.vue b/src/routes/Home.vue
index 5e0677f..e4ca710 100644
--- a/src/routes/Home.vue
+++ b/src/routes/Home.vue
@@ -16,13 +16,13 @@
     <Prelaunch v-if="flags.preLaunch" />
     <div v-else>
         <div class="wrap">
-            <StoreGrid>
+            <StoreGrid v-for="n in 10" :key="n">
                 <StoreItem size="big" :item="demoItem" />
-                <StoreItem />
-                <StoreItem />
-                <StoreItem />
-                <StoreItem />
-                <StoreItem />
+                <StoreItem :item="demoItem" />
+                <StoreItem :item="demoItem" />
+                <StoreItem :item="demoItem" />
+                <StoreItem :item="demoItem" />
+                <StoreItem :item="demoItem" />
             </StoreGrid>
         </div>
     </div>
@@ -30,8 +30,9 @@
 
 <style scoped lang="scss">
     .wrap {
-        width: 1200px;
-        max-width: 80vw;
-        margin: 2em auto;
+        display: grid;
+        gap: 1em;
+        grid-column: span 2;
+        grid-template-columns: subgrid;
     }
 </style>
diff --git a/src/routes/Library.vue b/src/routes/Library.vue
new file mode 100644
index 0000000..b3e91e4
--- /dev/null
+++ b/src/routes/Library.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+    import { useFeatureFlags } from '@/library/featureFlags';
+    const [flags] = useFeatureFlags();
+</script>
+
+<template>
+    <Prelaunch v-if="flags.preLaunch" />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/src/style.css b/src/style.css
index 970f24e..84a6825 100644
--- a/src/style.css
+++ b/src/style.css
@@ -4,11 +4,11 @@
 
     --light: #ffffff;
     --light2: #aaa;
+    --light-frosted: #23232399;
 }
 
 html, body {
     width: 100%;
-    height: 100%;
     margin: 0;
 
     background-color: var(--dark);