diff --git a/services/web/.env.example b/services/web/.env.example
deleted file mode 100644
index 5a807b8b..00000000
--- a/services/web/.env.example
+++ /dev/null
@@ -1,9 +0,0 @@
-# Base URL for browser to access backend API (AJAX).
-# Note: Do not include a trailing slash.
-# Example: https://nshm.store/api
-NEXT_PUBLIC_API_BASE_URL=
-
-# Base URL for web service to access backend API (SSR).
-# Note: Do not include a trailing slash.
-# Example: http://service-registry:8761
-API_BASE_URL=
diff --git a/services/web/.gitignore b/services/web/.gitignore
index 0f13086d..fe5ec9a9 100644
--- a/services/web/.gitignore
+++ b/services/web/.gitignore
@@ -3,4 +3,3 @@ coverage/
 node_modules/
 next-env.d.ts
 *.tsbuildinfo
-.env
diff --git a/services/web/package.json b/services/web/package.json
index c7b4b3ec..9c585f32 100644
--- a/services/web/package.json
+++ b/services/web/package.json
@@ -2,7 +2,7 @@
   "name": "web",
   "private": true,
   "type": "module",
-  "packageManager": "pnpm@9.12.1",
+  "packageManager": "pnpm@9.12.2",
   "scripts": {
     "dev": "next dev --turbo",
     "build": "next build && cp -r .next/static .next/standalone/.next && cp -r public .next/standalone",
@@ -13,46 +13,50 @@
     "@formkit/auto-animate": "^0.8.2",
     "@radix-ui/react-alert-dialog": "^1.1.2",
     "@radix-ui/react-avatar": "^1.1.1",
+    "@radix-ui/react-collapsible": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-primitive": "^2.0.0",
     "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.2",
     "@radix-ui/react-tooltip": "^1.1.3",
     "@radix-ui/react-use-controllable-state": "^1.1.0",
-    "@tanstack/react-query": "^5.59.13",
+    "@tanstack/react-query": "^5.59.15",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
     "dayjs": "^1.11.13",
     "embla-carousel-react": "^8.3.0",
-    "lucide-react": "^0.452.0",
+    "lucide-react": "^0.453.0",
     "next": "^14.2.15",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "sharp": "^0.33.5",
     "tailwind-merge": "^2.5.4",
     "tailwind-scrollbar": "^3.1.0",
+    "tailwindcss": "^3.4.14",
     "tailwindcss-animate": "^1.0.7",
-    "valibot": "1.0.0-beta.0"
+    "valibot": "1.0.0-beta.0",
+    "winston": "^3.15.0",
+    "winston-daily-rotate-file": "^5.0.0"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.2.0",
+    "@eslint/compat": "^1.2.1",
     "@eslint/eslintrc": "^3.1.0",
     "@types/eslint-config-prettier": "^6.11.3",
     "@types/eslint__eslintrc": "^2.1.2",
-    "@types/node": "^22.7.5",
+    "@types/node": "^22.7.7",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
-    "eslint": "^9.12.0",
+    "eslint": "^9.13.0",
     "eslint-config-next": "14.2.15",
     "eslint-config-prettier": "^9.1.0",
     "lint-staged": "^15.2.10",
     "prettier": "^3.3.3",
-    "tailwindcss": "^3.4.13",
     "typescript": "^5.6.3"
   },
   "pnpm": {
diff --git a/services/web/pnpm-lock.yaml b/services/web/pnpm-lock.yaml
index b8d8bc47..8456097a 100644
--- a/services/web/pnpm-lock.yaml
+++ b/services/web/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
       '@radix-ui/react-avatar':
         specifier: ^1.1.1
         version: 1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-collapsible':
+        specifier: ^1.1.1
+        version: 1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-dialog':
         specifier: ^1.1.2
         version: 1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -35,6 +38,9 @@ importers:
       '@radix-ui/react-select':
         specifier: ^2.1.2
         version: 2.1.2(@types/react-dom@18.3.1)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-separator':
+        specifier: ^1.1.0
+        version: 1.1.0(@types/react-dom@18.3.1)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-slot':
         specifier: ^1.1.0
         version: 1.1.0(@types/react@18.3.11)(react@18.3.1)
@@ -48,8 +54,8 @@ importers:
         specifier: ^1.1.0
         version: 1.1.0(@types/react@18.3.11)(react@18.3.1)
       '@tanstack/react-query':
-        specifier: ^5.59.13
-        version: 5.59.13(react@18.3.1)
+        specifier: ^5.59.15
+        version: 5.59.15(react@18.3.1)
       class-variance-authority:
         specifier: ^0.7.0
         version: 0.7.0
@@ -66,8 +72,8 @@ importers:
         specifier: ^8.3.0
         version: 8.3.0(react@18.3.1)
       lucide-react:
-        specifier: ^0.452.0
-        version: 0.452.0(react@18.3.1)
+        specifier: ^0.453.0
+        version: 0.453.0(react@18.3.1)
       next:
         specifier: ^14.2.15
         version: 14.2.15(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -85,17 +91,26 @@ importers:
         version: 2.5.4
       tailwind-scrollbar:
         specifier: ^3.1.0
-        version: 3.1.0(tailwindcss@3.4.13)
+        version: 3.1.0(tailwindcss@3.4.14)
+      tailwindcss:
+        specifier: ^3.4.14
+        version: 3.4.14
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.13)
+        version: 1.0.7(tailwindcss@3.4.14)
       valibot:
         specifier: 1.0.0-beta.0
         version: 1.0.0-beta.0(typescript@5.6.3)
+      winston:
+        specifier: ^3.15.0
+        version: 3.15.0
+      winston-daily-rotate-file:
+        specifier: ^5.0.0
+        version: 5.0.0(winston@3.15.0)
     devDependencies:
       '@eslint/compat':
-        specifier: ^1.2.0
-        version: 1.2.0(eslint@9.12.0(jiti@2.2.1))
+        specifier: ^1.2.1
+        version: 1.2.1(eslint@9.13.0(jiti@2.2.1))
       '@eslint/eslintrc':
         specifier: ^3.1.0
         version: 3.1.0
@@ -106,8 +121,8 @@ importers:
         specifier: ^2.1.2
         version: 2.1.2
       '@types/node':
-        specifier: ^22.7.5
-        version: 22.7.5
+        specifier: ^22.7.7
+        version: 22.7.7
       '@types/react':
         specifier: ^18.3.11
         version: 18.3.11
@@ -115,23 +130,20 @@ importers:
         specifier: ^18.3.1
         version: 18.3.1
       eslint:
-        specifier: ^9.12.0
-        version: 9.12.0(jiti@2.2.1)
+        specifier: ^9.13.0
+        version: 9.13.0(jiti@2.2.1)
       eslint-config-next:
         specifier: 14.2.15
-        version: 14.2.15(eslint@9.12.0(jiti@2.2.1))(typescript@5.6.3)
+        version: 14.2.15(eslint@9.13.0(jiti@2.2.1))(typescript@5.6.3)
       eslint-config-prettier:
         specifier: ^9.1.0
-        version: 9.1.0(eslint@9.12.0(jiti@2.2.1))
+        version: 9.1.0(eslint@9.13.0(jiti@2.2.1))
       lint-staged:
         specifier: ^15.2.10
         version: 15.2.10
       prettier:
         specifier: ^3.3.3
         version: 3.3.3
-      tailwindcss:
-        specifier: ^3.4.13
-        version: 3.4.13
       typescript:
         specifier: ^5.6.3
         version: 5.6.3
@@ -146,6 +158,13 @@ packages:
     resolution: {integrity: sha512-FjoyLe754PMiYsFaN5C94ttGiOmBNYTf6pLr4xXHAT5uctHb092PBszndLDR5XA/jghQvn4n7JMHl7dmTgbm9w==}
     engines: {node: '>=6.9.0'}
 
+  '@colors/colors@1.6.0':
+    resolution: {integrity: sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==}
+    engines: {node: '>=0.1.90'}
+
+  '@dabh/diagnostics@2.0.3':
+    resolution: {integrity: sha512-hrlQOIi7hAfzsMqlGSFyVucrx38O+j6wiGOf//H2ecvIEqYN4ADBSS2iLMh5UFyDunCNniUIPk/q3riFv45xRA==}
+
   '@emnapi/runtime@1.3.1':
     resolution: {integrity: sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==}
 
@@ -159,8 +178,8 @@ packages:
     resolution: {integrity: sha512-m4DVN9ZqskZoLU5GlWZadwDnYo3vAEydiUayB9widCl9ffWx2IvPnp6n3on5rJmziJSw9Bv+Z3ChDVdMwXCY8Q==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
 
-  '@eslint/compat@1.2.0':
-    resolution: {integrity: sha512-CkPWddN7J9JPrQedEr2X7AjK9y1jaMJtxZ4A/+jTMFA2+n5BWhcKHW/EbJyARqg2zzQfgtWUtVmG3hrG6+nGpg==}
+  '@eslint/compat@1.2.1':
+    resolution: {integrity: sha512-JbHG2TWuCeNzh87fXo+/46Z1LEo9DBA9T188d0fZgGxAD+cNyS6sx9fdiyxjGPBMyQVRlCutTByZ6a5+YMkF7g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^9.10.0
@@ -172,24 +191,24 @@ packages:
     resolution: {integrity: sha512-fTxvnS1sRMu3+JjXwJG0j/i4RT9u4qJ+lqS/yCGap4lH4zZGzQ7tu+xZqQmcMZq5OBZDL4QRxQzRjkWcGt8IVw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/core@0.6.0':
-    resolution: {integrity: sha512-8I2Q8ykA4J0x0o7cg67FPVnehcqWTBehu/lmY+bolPFHGjh49YzGBMXTvpqVgEbBdvNCSxj6iFgiIyHzf03lzg==}
+  '@eslint/core@0.7.0':
+    resolution: {integrity: sha512-xp5Jirz5DyPYlPiKat8jaq0EmYvDXKKpzTbxXMpT9eqlRJkRKIz9AGMdlvYjih+im+QlhWrpvVjl8IPC/lHlUw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/eslintrc@3.1.0':
     resolution: {integrity: sha512-4Bfj15dVJdoy3RfZmmo86RK1Fwzn6SstsvK9JS+BaVKqC6QQQQyXekNaC+g+LKNgkQ+2VhGAzm6hO40AhMR3zQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/js@9.12.0':
-    resolution: {integrity: sha512-eohesHH8WFRUprDNyEREgqP6beG6htMeUYeCpkEgBCieCMme5r9zFWjzAJp//9S+Kub4rqE+jXe9Cp1a7IYIIA==}
+  '@eslint/js@9.13.0':
+    resolution: {integrity: sha512-IFLyoY4d72Z5y/6o/BazFBezupzI/taV8sGumxTAVw3lXG9A6md1Dc34T9s1FoD/an9pJH8RHbAxsaEbBed9lA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/object-schema@2.1.4':
     resolution: {integrity: sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/plugin-kit@0.2.0':
-    resolution: {integrity: sha512-vH9PiIMMwvhCx31Af3HiGzsVNULDbyVkHXwlemn/B0TFj/00ho3y55efXrUZTfQipxoHC5u4xq6zblww1zm1Ig==}
+  '@eslint/plugin-kit@0.2.1':
+    resolution: {integrity: sha512-HFZ4Mp26nbWk9d/BpvP0YNL6W4UoZF0VFcTw/aPPA8RpOxeFQgK+ClABGgAUXs9Y/RGX/l1vOmrqz1MQt9MNuw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@floating-ui/core@1.6.8':
@@ -481,6 +500,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-collapsible@1.1.1':
+    resolution: {integrity: sha512-1///SnrfQHJEofLokyczERxQbWfCGQlQ2XsCZMucVs6it+lq9iw4vXy+uDn1edlb58cOZOWSldnfPAYcT4O/Yg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-collection@1.1.0':
     resolution: {integrity: sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==}
     peerDependencies:
@@ -831,6 +863,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-separator@1.1.0':
+    resolution: {integrity: sha512-3uBAs+egzvJBDZAzvb/n4NxxOYpnspmWxO2u5NbZ8Y6FM/NdrGSF9bop3Cf6F6C71z1rTSn8KV0Fo2ZVd79lGA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-slot@1.0.2':
     resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
     peerDependencies:
@@ -1005,8 +1050,8 @@ packages:
   '@tanstack/query-core@5.59.13':
     resolution: {integrity: sha512-Oou0bBu/P8+oYjXsJQ11j+gcpLAMpqW42UlokQYEz4dE7+hOtVO9rVuolJKgEccqzvyFzqX4/zZWY+R/v1wVsQ==}
 
-  '@tanstack/react-query@5.59.13':
-    resolution: {integrity: sha512-GB2ELtiH8tL0rcFiM4sWvnXhazt1xRXX/LolMEV12kfEKu58aNA4lQoieslP61PO4vZO9JJMwm+6lqyS0E1HOA==}
+  '@tanstack/react-query@5.59.15':
+    resolution: {integrity: sha512-QbVlAkTI78wB4Mqgf2RDmgC0AOiJqer2c5k9STOOSXGv1S6ZkY37r/6UpE8DbQ2Du0ohsdoXgFNEyv+4eDoPEw==}
     peerDependencies:
       react: ^18 || ^19
 
@@ -1028,8 +1073,8 @@ packages:
   '@types/json5@0.0.29':
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
 
-  '@types/node@22.7.5':
-    resolution: {integrity: sha512-jML7s2NAzMWc//QSJ1a3prpk78cOPchGvXJsC3C6R6PSMoooztvRVQEz89gmBTBY1SPMaqo5teB4uNHPdetShQ==}
+  '@types/node@22.7.7':
+    resolution: {integrity: sha512-SRxCrrg9CL/y54aiMCG3edPKdprgMVGDXjA3gB8UmmBW5TcXzRUYAh8EWzTnSJFAd1rgImPELza+A3bJ+qxz8Q==}
 
   '@types/prop-types@15.7.13':
     resolution: {integrity: sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==}
@@ -1040,8 +1085,11 @@ packages:
   '@types/react@18.3.11':
     resolution: {integrity: sha512-r6QZ069rFTjrEYgFdOck1gK7FLVsgJE7tTz0pQBczlBNUhBNk0MQH4UbnFSwjpQLMkLzgqvBBa+qGpLje16eTQ==}
 
-  '@typescript-eslint/eslint-plugin@8.8.1':
-    resolution: {integrity: sha512-xfvdgA8AP/vxHgtgU310+WBnLB4uJQ9XdyP17RebG26rLtDrQJV3ZYrcopX91GrHmMoH8bdSwMRh2a//TiJ1jQ==}
+  '@types/triple-beam@1.3.5':
+    resolution: {integrity: sha512-6WaYesThRMCl19iryMYP7/x2OVgCtbIVflDGFpWnb9irXI3UjYE4AzmYuiUKY1AJstGijoY+MgUszMgRxIYTYw==}
+
+  '@typescript-eslint/eslint-plugin@8.10.0':
+    resolution: {integrity: sha512-phuB3hoP7FFKbRXxjl+DRlQDuJqhpOnm5MmtROXyWi3uS/Xg2ZXqiQfcG2BJHiN4QKyzdOJi3NEn/qTnjUlkmQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       '@typescript-eslint/parser': ^8.0.0 || ^8.0.0-alpha.0
@@ -1051,8 +1099,8 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/parser@8.8.1':
-    resolution: {integrity: sha512-hQUVn2Lij2NAxVFEdvIGxT9gP1tq2yM83m+by3whWFsWC+1y8pxxxHUFE1UqDu2VsGi2i6RLcv4QvouM84U+ow==}
+  '@typescript-eslint/parser@8.10.0':
+    resolution: {integrity: sha512-E24l90SxuJhytWJ0pTQydFT46Nk0Z+bsLKo/L8rtQSL93rQ6byd1V/QbDpHUTdLPOMsBCcYXZweADNCfOCmOAg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
@@ -1061,12 +1109,12 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/scope-manager@8.8.1':
-    resolution: {integrity: sha512-X4JdU+66Mazev/J0gfXlcC/dV6JI37h+93W9BRYXrSn0hrE64IoWgVkO9MSJgEzoWkxONgaQpICWg8vAN74wlA==}
+  '@typescript-eslint/scope-manager@8.10.0':
+    resolution: {integrity: sha512-AgCaEjhfql9MDKjMUxWvH7HjLeBqMCBfIaBbzzIcBbQPZE7CPh1m6FF+L75NUMJFMLYhCywJXIDEMa3//1A0dw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/type-utils@8.8.1':
-    resolution: {integrity: sha512-qSVnpcbLP8CALORf0za+vjLYj1Wp8HSoiI8zYU5tHxRVj30702Z1Yw4cLwfNKhTPWp5+P+k1pjmD5Zd1nhxiZA==}
+  '@typescript-eslint/type-utils@8.10.0':
+    resolution: {integrity: sha512-PCpUOpyQSpxBn230yIcK+LeCQaXuxrgCm2Zk1S+PTIRJsEfU6nJ0TtwyH8pIwPK/vJoA+7TZtzyAJSGBz+s/dg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '*'
@@ -1074,12 +1122,12 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/types@8.8.1':
-    resolution: {integrity: sha512-WCcTP4SDXzMd23N27u66zTKMuEevH4uzU8C9jf0RO4E04yVHgQgW+r+TeVTNnO1KIfrL8ebgVVYYMMO3+jC55Q==}
+  '@typescript-eslint/types@8.10.0':
+    resolution: {integrity: sha512-k/E48uzsfJCRRbGLapdZgrX52csmWJ2rcowwPvOZ8lwPUv3xW6CcFeJAXgx4uJm+Ge4+a4tFOkdYvSpxhRhg1w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/typescript-estree@8.8.1':
-    resolution: {integrity: sha512-A5d1R9p+X+1js4JogdNilDuuq+EHZdsH9MjTVxXOdVFfTJXunKJR/v+fNNyO4TnoOn5HqobzfRlc70NC6HTcdg==}
+  '@typescript-eslint/typescript-estree@8.10.0':
+    resolution: {integrity: sha512-3OE0nlcOHaMvQ8Xu5gAfME3/tWVDpb/HxtpUZ1WeOAksZ/h/gwrBzCklaGzwZT97/lBbbxJ16dMA98JMEngW4w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '*'
@@ -1087,23 +1135,27 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/utils@8.8.1':
-    resolution: {integrity: sha512-/QkNJDbV0bdL7H7d0/y0qBbV2HTtf0TIyjSDTvvmQEzeVx8jEImEbLuOA4EsvE8gIgqMitns0ifb5uQhMj8d9w==}
+  '@typescript-eslint/utils@8.10.0':
+    resolution: {integrity: sha512-Oq4uZ7JFr9d1ZunE/QKy5egcDRXT/FrS2z/nlxzPua2VHFtmMvFNDvpq1m/hq0ra+T52aUezfcjGRIB7vNJF9w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
 
-  '@typescript-eslint/visitor-keys@8.8.1':
-    resolution: {integrity: sha512-0/TdC3aeRAsW7MDvYRwEc1Uwm0TIBfzjPFgg60UU2Haj5qsCs9cc3zNgY71edqE3LbWfF/WoZQd3lJoDXFQpag==}
+  '@typescript-eslint/visitor-keys@8.10.0':
+    resolution: {integrity: sha512-k8nekgqwr7FadWk548Lfph6V3r9OVqjzAIVskE7orMZR23cGJjAOVazsZSJW+ElyjfTM4wx/1g88Mi70DDtG9A==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  abort-controller@3.0.0:
+    resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
+    engines: {node: '>=6.5'}
+
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
 
-  acorn@8.12.1:
-    resolution: {integrity: sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==}
+  acorn@8.13.0:
+    resolution: {integrity: sha512-8zSiw54Oxrdym50NlZ9sUusyO1Z1ZchgRLWRaK6c86XJFClyCgFKetdowBg5bKxyp/u+CDBJG4Mpp0m3HLZl9w==}
     engines: {node: '>=0.4.0'}
     hasBin: true
 
@@ -1185,12 +1237,15 @@ packages:
   ast-types-flow@0.0.8:
     resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==}
 
+  async@3.2.6:
+    resolution: {integrity: sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==}
+
   available-typed-arrays@1.0.7:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
 
-  axe-core@4.10.0:
-    resolution: {integrity: sha512-Mr2ZakwQ7XUAjp7pAwQWRhhK8mQQ6JAaNWSjmjxil0R8BPioMtQsTLOolGYkji1rcL++3dCqZA3zWqpT+9Ew6g==}
+  axe-core@4.10.1:
+    resolution: {integrity: sha512-qPC9o+kD8Tir0lzNGLeghbOrWMr3ZJpaRlCIb6Uobt/7N4FiEDvqUMnxzCHRHmg8vOg14kr5gVNyScRmbMaJ9g==}
     engines: {node: '>=4'}
 
   axobject-query@4.1.0:
@@ -1200,6 +1255,9 @@ packages:
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
+  base64-js@1.5.1:
+    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
+
   binary-extensions@2.3.0:
     resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
@@ -1214,6 +1272,9 @@ packages:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
 
+  buffer@6.0.3:
+    resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
+
   busboy@1.6.0:
     resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
     engines: {node: '>=10.16.0'}
@@ -1230,8 +1291,8 @@ packages:
     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
     engines: {node: '>= 6'}
 
-  caniuse-lite@1.0.30001668:
-    resolution: {integrity: sha512-nWLrdxqCdblixUO+27JtGJJE/txpJlyUy5YN1u53wLZkP0emYCo5zgS6QYft7VUYR42LGgi/S5hdLZTrnyIddw==}
+  caniuse-lite@1.0.30001669:
+    resolution: {integrity: sha512-DlWzFDJqstqtIVx1zeSpIMLjunf5SmwOw0N2Ck/QSQdS8PLS4+9HrLaYei4w8BIAL7IB/UEDu889d8vhCTPA0w==}
 
   chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
@@ -1273,16 +1334,25 @@ packages:
       react: ^18.0.0
       react-dom: ^18.0.0
 
+  color-convert@1.9.3:
+    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
+
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
 
+  color-name@1.1.3:
+    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
+
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
   color-string@1.9.1:
     resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
 
+  color@3.2.1:
+    resolution: {integrity: sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==}
+
   color@4.2.3:
     resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
     engines: {node: '>=12.5.0'}
@@ -1290,6 +1360,9 @@ packages:
   colorette@2.0.20:
     resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
 
+  colorspace@1.1.4:
+    resolution: {integrity: sha512-BgvKJiuVu1igBUF2kEjRCZXol6wiiGbY5ipL/oVPwm0BL9sIpMIzM8IK7vwuxIIzOXMV3Ey5w+vxhm0rR/TN8w==}
+
   commander@12.1.0:
     resolution: {integrity: sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==}
     engines: {node: '>=18'}
@@ -1405,6 +1478,9 @@ packages:
   emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
 
+  enabled@2.0.0:
+    resolution: {integrity: sha512-AKrN98kuwOzMIdAizXGI86UFBoo26CL21UM763y1h/GMSJ4/OHU9k2YlsmBpyScFo/wbLzWQJBMCW4+IO3/+OQ==}
+
   enhanced-resolve@5.17.1:
     resolution: {integrity: sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==}
     engines: {node: '>=10.13.0'}
@@ -1543,8 +1619,8 @@ packages:
     resolution: {integrity: sha512-Q7lok0mqMUSf5a/AdAZkA5a/gHcO6snwQClVNNvFKCAVlxXucdU8pKydU5ZVZjBx5xr37vGbFFWtLQYreLzrZg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  eslint@9.12.0:
-    resolution: {integrity: sha512-UVIOlTEWxwIopRL1wgSQYdnVDcEvs2wyaO6DGo5mXqe3r16IoCNWkR29iHhyaP4cICWjbgbmFUGAhh0GJRuGZw==}
+  eslint@9.13.0:
+    resolution: {integrity: sha512-EYZK6SX6zjFHST/HRytOdA/zE72Cq/bfw45LSyuwrdvcclb/gqV8RRQxywOBEWO2+WDpva6UZa4CcDeJKzUCFA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     hasBin: true
     peerDependencies:
@@ -1573,9 +1649,17 @@ packages:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
 
+  event-target-shim@5.0.1:
+    resolution: {integrity: sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==}
+    engines: {node: '>=6'}
+
   eventemitter3@5.0.1:
     resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==}
 
+  events@3.3.0:
+    resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
+    engines: {node: '>=0.8.x'}
+
   execa@8.0.1:
     resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
     engines: {node: '>=16.17'}
@@ -1596,10 +1680,16 @@ packages:
   fastq@1.17.1:
     resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
 
+  fecha@4.2.3:
+    resolution: {integrity: sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw==}
+
   file-entry-cache@8.0.0:
     resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
     engines: {node: '>=16.0.0'}
 
+  file-stream-rotator@0.6.1:
+    resolution: {integrity: sha512-u+dBid4PvZw17PmDeRcNOtCP9CCK/9lRN2w+r1xIS7yOL9JFrIBKTvrYsxT4P0pGtThYTn++QS5ChHaUov3+zQ==}
+
   fill-range@7.1.1:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
@@ -1615,6 +1705,9 @@ packages:
   flatted@3.3.1:
     resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}
 
+  fn.name@1.1.0:
+    resolution: {integrity: sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw==}
+
   for-each@0.3.3:
     resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
 
@@ -1724,6 +1817,9 @@ packages:
     resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
     engines: {node: '>=16.17.0'}
 
+  ieee754@1.2.1:
+    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+
   ignore@5.3.2:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
@@ -1736,6 +1832,9 @@ packages:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
 
+  inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+
   internal-slot@1.0.7:
     resolution: {integrity: sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==}
     engines: {node: '>= 0.4'}
@@ -1843,6 +1942,10 @@ packages:
     resolution: {integrity: sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==}
     engines: {node: '>= 0.4'}
 
+  is-stream@2.0.1:
+    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
+    engines: {node: '>=8'}
+
   is-stream@3.0.0:
     resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -1922,6 +2025,9 @@ packages:
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
+  kuler@2.0.0:
+    resolution: {integrity: sha512-Xq9nH7KlWZmXAtodXDDRE7vs6DU1gTU8zYDHDiWLSip45Egwq3plLHzPn27NgvzL2r1LMPC1vdqh98sQxtqj4A==}
+
   language-subtag-registry@0.3.23:
     resolution: {integrity: sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==}
 
@@ -1964,6 +2070,10 @@ packages:
     resolution: {integrity: sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==}
     engines: {node: '>=18'}
 
+  logform@2.6.1:
+    resolution: {integrity: sha512-CdaO738xRapbKIMVn2m4F6KTj4j7ooJ8POVnebSgKo3KBz5axNXRAL7ZdRjIV6NOr2Uf4vjtRkxrFETOioCqSA==}
+    engines: {node: '>= 12.0.0'}
+
   loose-envify@1.4.0:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
@@ -1971,8 +2081,8 @@ packages:
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
-  lucide-react@0.452.0:
-    resolution: {integrity: sha512-kNefjOUOGm+Mu3KDiryONyPba9r+nhcrz5oJs3N6JDzGboQNEXw5GB3yB8rnV9/FA4bPyggNU6CRSihZm9MvSw==}
+  lucide-react@0.453.0:
+    resolution: {integrity: sha512-kL+RGZCcJi9BvJtzg2kshO192Ddy9hv3ij+cPrVPWSRzgCWCVazoQJxOjAwgK53NomL07HB7GPHW120FimjNhQ==}
     peerDependencies:
       react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc
 
@@ -2009,6 +2119,9 @@ packages:
     resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  moment@2.30.1:
+    resolution: {integrity: sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==}
+
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
@@ -2089,6 +2202,9 @@ packages:
     resolution: {integrity: sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==}
     engines: {node: '>= 0.4'}
 
+  one-time@1.0.0:
+    resolution: {integrity: sha512-5DXOiRKwuSEcQ/l0kGCF6Q3jcADFv5tSmRaJck/OqkVFcOzutB134KRSfF0xDrL39MNnqxbHBbUUcjZIhTgb2g==}
+
   onetime@6.0.0:
     resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
     engines: {node: '>=12'}
@@ -2135,8 +2251,8 @@ packages:
     resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
     engines: {node: '>=16 || 14 >=14.18'}
 
-  picocolors@1.1.0:
-    resolution: {integrity: sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==}
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
   picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
@@ -2213,6 +2329,10 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
+  process@0.11.10:
+    resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
+    engines: {node: '>= 0.6.0'}
+
   prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
@@ -2278,6 +2398,14 @@ packages:
   read-cache@1.0.0:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
 
+  readable-stream@3.6.2:
+    resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
+    engines: {node: '>= 6'}
+
+  readable-stream@4.5.2:
+    resolution: {integrity: sha512-yjavECdqeZ3GLXNgRXgeQEdz9fvDDkNKyHnbHRFtOr7/LcfgBcmct7t/ET+HaCTqfh06OzoAxrkN/IfjJBVe+g==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
   readdirp@3.6.0:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
@@ -2326,10 +2454,17 @@ packages:
     resolution: {integrity: sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==}
     engines: {node: '>=0.4'}
 
+  safe-buffer@5.2.1:
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+
   safe-regex-test@1.0.3:
     resolution: {integrity: sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==}
     engines: {node: '>= 0.4'}
 
+  safe-stable-stringify@2.5.0:
+    resolution: {integrity: sha512-b3rppTKm9T+PsVCBEOUR46GWI7fdOs00VKZ1+9c1EWDaDMvjQc6tUwuFyIprgGgTcWoVHSKrU8H31ZHA2e0RHA==}
+    engines: {node: '>=10'}
+
   scheduler@0.23.2:
     resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
 
@@ -2385,6 +2520,9 @@ packages:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
+  stack-trace@0.0.10:
+    resolution: {integrity: sha512-KGzahc7puUKkzyMt+IqAep+TVNbKP+k2Lmwhub39m1AsTSkaDutx56aDCo+HLDzf/D26BIHTJWNiTG1KAJiQCg==}
+
   stop-iteration-iterator@1.0.0:
     resolution: {integrity: sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==}
     engines: {node: '>= 0.4'}
@@ -2409,8 +2547,9 @@ packages:
     resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
     engines: {node: '>=18'}
 
-  string.prototype.includes@2.0.0:
-    resolution: {integrity: sha512-E34CkBgyeqNDcrbU76cDjL5JLcVrtSdYq0MEh/B10r17pRP4ciHLwTgnuLV8Ay6cgEMLkcBkFCKyFZ43YldYzg==}
+  string.prototype.includes@2.0.1:
+    resolution: {integrity: sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==}
+    engines: {node: '>= 0.4'}
 
   string.prototype.matchall@4.0.11:
     resolution: {integrity: sha512-NUdh0aDavY2og7IbBPenWqR9exH+E26Sv8e0/eTe1tltDGZL+GtBkDAnnyBtmekfK6/Dq3MkcGtzXFEd1LQrtg==}
@@ -2430,6 +2569,9 @@ packages:
     resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
     engines: {node: '>= 0.4'}
 
+  string_decoder@1.3.0:
+    resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
+
   strip-ansi@6.0.1:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
@@ -2490,8 +2632,8 @@ packages:
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders'
 
-  tailwindcss@3.4.13:
-    resolution: {integrity: sha512-KqjHOJKogOUt5Bs752ykCeiwvi0fKVkr5oqsFNt/8px/tA8scFPIlkygsf6jXrfCqGHz7VflA6+yytWuM+XhFw==}
+  tailwindcss@3.4.14:
+    resolution: {integrity: sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==}
     engines: {node: '>=14.0.0'}
     hasBin: true
 
@@ -2499,6 +2641,9 @@ packages:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
 
+  text-hex@1.0.0:
+    resolution: {integrity: sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg==}
+
   text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
 
@@ -2513,6 +2658,10 @@ packages:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
 
+  triple-beam@1.4.1:
+    resolution: {integrity: sha512-aZbgViZrg1QNcG+LULa7nhZpJTZSLm/mXnHXnbAbjmN5aSa0y7V+wvv6+4WaBtpISJzThKy+PIPxc1Nq1EJ9mg==}
+    engines: {node: '>= 14.0.0'}
+
   ts-api-utils@1.3.0:
     resolution: {integrity: sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==}
     engines: {node: '>=16'}
@@ -2525,8 +2674,8 @@ packages:
   tsconfig-paths@3.15.0:
     resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
 
-  tslib@2.7.0:
-    resolution: {integrity: sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==}
+  tslib@2.8.0:
+    resolution: {integrity: sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==}
 
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
@@ -2613,6 +2762,20 @@ packages:
     engines: {node: '>= 8'}
     hasBin: true
 
+  winston-daily-rotate-file@5.0.0:
+    resolution: {integrity: sha512-JDjiXXkM5qvwY06733vf09I2wnMXpZEhxEVOSPenZMii+g7pcDcTBt2MRugnoi8BwVSuCT2jfRXBUy+n1Zz/Yw==}
+    engines: {node: '>=8'}
+    peerDependencies:
+      winston: ^3
+
+  winston-transport@4.8.0:
+    resolution: {integrity: sha512-qxSTKswC6llEMZKgCQdaWgDuMJQnhuvF5f2Nk3SNXc4byfQ+voo2mX1Px9dkNOuR8p0KAjfPG29PuYUSIb+vSA==}
+    engines: {node: '>= 12.0.0'}
+
+  winston@3.15.0:
+    resolution: {integrity: sha512-RhruH2Cj0bV0WgNL+lOfoUBI4DVfdUNjVnJGVovWZmrcKtrFTTRzgXYK2O9cymSGjrERCtaAeHwMNnUWXlwZow==}
+    engines: {node: '>= 12.0.0'}
+
   word-wrap@1.2.5:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
@@ -2651,21 +2814,29 @@ snapshots:
     dependencies:
       regenerator-runtime: 0.14.1
 
+  '@colors/colors@1.6.0': {}
+
+  '@dabh/diagnostics@2.0.3':
+    dependencies:
+      colorspace: 1.1.4
+      enabled: 2.0.0
+      kuler: 2.0.0
+
   '@emnapi/runtime@1.3.1':
     dependencies:
-      tslib: 2.7.0
+      tslib: 2.8.0
     optional: true
 
-  '@eslint-community/eslint-utils@4.4.0(eslint@9.12.0(jiti@2.2.1))':
+  '@eslint-community/eslint-utils@4.4.0(eslint@9.13.0(jiti@2.2.1))':
     dependencies:
-      eslint: 9.12.0(jiti@2.2.1)
+      eslint: 9.13.0(jiti@2.2.1)
       eslint-visitor-keys: 3.4.3
 
   '@eslint-community/regexpp@4.11.1': {}
 
-  '@eslint/compat@1.2.0(eslint@9.12.0(jiti@2.2.1))':
+  '@eslint/compat@1.2.1(eslint@9.13.0(jiti@2.2.1))':
     optionalDependencies:
-      eslint: 9.12.0(jiti@2.2.1)
+      eslint: 9.13.0(jiti@2.2.1)
 
   '@eslint/config-array@0.18.0':
     dependencies:
@@ -2675,7 +2846,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/core@0.6.0': {}
+  '@eslint/core@0.7.0': {}
 
   '@eslint/eslintrc@3.1.0':
     dependencies:
@@ -2691,11 +2862,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/js@9.12.0': {}
+  '@eslint/js@9.13.0': {}
 
   '@eslint/object-schema@2.1.4': {}
 
-  '@eslint/plugin-kit@0.2.0':
+  '@eslint/plugin-kit@0.2.1':
     dependencies:
       levn: 0.4.1
 
@@ -2923,6 +3094,22 @@ snapshots:
       '@types/react': 18.3.11
       '@types/react-dom': 18.3.1
 
+  '@radix-ui/react-collapsible@1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.11)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.11)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.11)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.1)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.11)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.11)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.11
+      '@types/react-dom': 18.3.1
+
   '@radix-ui/react-collection@1.1.0(@types/react-dom@18.3.1)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.11)(react@18.3.1)
@@ -3293,6 +3480,15 @@ snapshots:
       '@types/react': 18.3.11
       '@types/react-dom': 18.3.1
 
+  '@radix-ui/react-separator@1.1.0(@types/react-dom@18.3.1)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.1)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.11
+      '@types/react-dom': 18.3.1
+
   '@radix-ui/react-slot@1.0.2(@types/react@18.3.11)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.25.7
@@ -3444,11 +3640,11 @@ snapshots:
   '@swc/helpers@0.5.5':
     dependencies:
       '@swc/counter': 0.1.3
-      tslib: 2.7.0
+      tslib: 2.8.0
 
   '@tanstack/query-core@5.59.13': {}
 
-  '@tanstack/react-query@5.59.13(react@18.3.1)':
+  '@tanstack/react-query@5.59.15(react@18.3.1)':
     dependencies:
       '@tanstack/query-core': 5.59.13
       react: 18.3.1
@@ -3470,7 +3666,7 @@ snapshots:
 
   '@types/json5@0.0.29': {}
 
-  '@types/node@22.7.5':
+  '@types/node@22.7.7':
     dependencies:
       undici-types: 6.19.8
 
@@ -3485,15 +3681,17 @@ snapshots:
       '@types/prop-types': 15.7.13
       csstype: 3.1.3
 
-  '@typescript-eslint/eslint-plugin@8.8.1(@typescript-eslint/parser@8.8.1(eslint@9.12.0(jiti@2.2.1))(typescript@5.6.3))(eslint@9.12.0(jiti@2.2.1))(typescript@5.6.3)':
+  '@types/triple-beam@1.3.5': {}
+
+  '@typescript-eslint/eslint-plugin@8.10.0(@typescript-eslint/parser@8.10.0(eslint@9.13.0(jiti@2.2.1))(typescript@5.6.3))(eslint@9.13.0(jiti@2.2.1))(typescript@5.6.3)':
     dependencies:
       '@eslint-community/regexpp': 4.11.1
-      '@typescript-eslint/parser': 8.8.1(eslint@9.12.0(jiti@2.2.1))(typescript@5.6.3)
-      '@typescript-eslint/scope-manager': 8.8.1
-      '@typescript-eslint/type-utils': 8.8.1(eslint@9.12.0(jiti@2.2.1))(typescript@5.6.3)
-      '@typescript-eslint/utils': 8.8.1(eslint@9.12.0(jiti@2.2.1))(typescript@5.6.3)
-      '@typescript-eslint/visitor-keys': 8.8.1
-      eslint: 9.12.0(jiti@2.2.1)
+      '@typescript-eslint/parser': 8.10.0(eslint@9.13.0(jiti@2.2.1))(typescript@5.6.3)
+      '@typescript-eslint/scope-manager': 8.10.0
+      '@typescript-eslint/type-utils': 8.10.0(eslint@9.13.0(jiti@2.2.1))(typescript@5.6.3)
+      '@typescript-eslint/utils': 8.10.0(eslint@9.13.0(jiti@2.2.1))(typescript@5.6.3)
+      '@typescript-eslint/visitor-keys': 8.10.0
+      eslint: 9.13.0(jiti@2.2.1)
       graphemer: 1.4.0
       ignore: 5.3.2
       natural-compare: 1.4.0
@@ -3503,28 +3701,28 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.8.1(eslint@9.12.0(jiti@2.2.1))(typescript@5.6.3)':
+  '@typescript-eslint/parser@8.10.0(eslint@9.13.0(jiti@2.2.1))(typescript@5.6.3)':
     dependencies:
-      '@typescript-eslint/scope-manager': 8.8.1
-      '@typescript-eslint/types': 8.8.1
-      '@typescript-eslint/typescript-estree': 8.8.1(typescript@5.6.3)
-      '@typescript-eslint/visitor-keys': 8.8.1
+      '@typescript-eslint/scope-manager': 8.10.0
+      '@typescript-eslint/types': 8.10.0
+      '@typescript-eslint/typescript-estree': 8.10.0(typescript@5.6.3)
+      '@typescript-eslint/visitor-keys': 8.10.0
       debug: 4.3.7
-      eslint: 9.12.0(jiti@2.2.1)
+      eslint: 9.13.0(jiti@2.2.1)
     optionalDependencies:
       typescript: 5.6.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/scope-manager@8.8.1':
+  '@typescript-eslint/scope-manager@8.10.0':
     dependencies:
-      '@typescript-eslint/types': 8.8.1
-      '@typescript-eslint/visitor-keys': 8.8.1
+      '@typescript-eslint/types': 8.10.0
+      '@typescript-eslint/visitor-keys': 8.10.0
 
-  '@typescript-eslint/type-utils@8.8.1(eslint@9.12.0(jiti@2.2.1))(typescript@5.6.3)':
+  '@typescript-eslint/type-utils@8.10.0(eslint@9.13.0(jiti@2.2.1))(typescript@5.6.3)':
     dependencies:
-      '@typescript-eslint/typescript-estree': 8.8.1(typescript@5.6.3)
-      '@typescript-eslint/utils': 8.8.1(eslint@9.12.0(jiti@2.2.1))(typescript@5.6.3)
+      '@typescript-eslint/typescript-estree': 8.10.0(typescript@5.6.3)
+      '@typescript-eslint/utils': 8.10.0(eslint@9.13.0(jiti@2.2.1))(typescript@5.6.3)
       debug: 4.3.7
       ts-api-utils: 1.3.0(typescript@5.6.3)
     optionalDependencies:
@@ -3533,12 +3731,12 @@ snapshots:
       - eslint
       - supports-color
 
-  '@typescript-eslint/types@8.8.1': {}
+  '@typescript-eslint/types@8.10.0': {}
 
-  '@typescript-eslint/typescript-estree@8.8.1(typescript@5.6.3)':
+  '@typescript-eslint/typescript-estree@8.10.0(typescript@5.6.3)':
     dependencies:
-      '@typescript-eslint/types': 8.8.1
-      '@typescript-eslint/visitor-keys': 8.8.1
+      '@typescript-eslint/types': 8.10.0
+      '@typescript-eslint/visitor-keys': 8.10.0
       debug: 4.3.7
       fast-glob: 3.3.2
       is-glob: 4.0.3
@@ -3550,27 +3748,31 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.8.1(eslint@9.12.0(jiti@2.2.1))(typescript@5.6.3)':
+  '@typescript-eslint/utils@8.10.0(eslint@9.13.0(jiti@2.2.1))(typescript@5.6.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.12.0(jiti@2.2.1))
-      '@typescript-eslint/scope-manager': 8.8.1
-      '@typescript-eslint/types': 8.8.1
-      '@typescript-eslint/typescript-estree': 8.8.1(typescript@5.6.3)
-      eslint: 9.12.0(jiti@2.2.1)
+      '@eslint-community/eslint-utils': 4.4.0(eslint@9.13.0(jiti@2.2.1))
+      '@typescript-eslint/scope-manager': 8.10.0
+      '@typescript-eslint/types': 8.10.0
+      '@typescript-eslint/typescript-estree': 8.10.0(typescript@5.6.3)
+      eslint: 9.13.0(jiti@2.2.1)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  '@typescript-eslint/visitor-keys@8.8.1':
+  '@typescript-eslint/visitor-keys@8.10.0':
     dependencies:
-      '@typescript-eslint/types': 8.8.1
+      '@typescript-eslint/types': 8.10.0
       eslint-visitor-keys: 3.4.3
 
-  acorn-jsx@5.3.2(acorn@8.12.1):
+  abort-controller@3.0.0:
+    dependencies:
+      event-target-shim: 5.0.1
+
+  acorn-jsx@5.3.2(acorn@8.13.0):
     dependencies:
-      acorn: 8.12.1
+      acorn: 8.13.0
 
-  acorn@8.12.1: {}
+  acorn@8.13.0: {}
 
   ajv@6.12.6:
     dependencies:
@@ -3606,7 +3808,7 @@ snapshots:
 
   aria-hidden@1.2.4:
     dependencies:
-      tslib: 2.7.0
+      tslib: 2.8.0
 
   aria-query@5.1.3:
     dependencies:
@@ -3679,16 +3881,20 @@ snapshots:
 
   ast-types-flow@0.0.8: {}
 
+  async@3.2.6: {}
+
   available-typed-arrays@1.0.7:
     dependencies:
       possible-typed-array-names: 1.0.0
 
-  axe-core@4.10.0: {}
+  axe-core@4.10.1: {}
 
   axobject-query@4.1.0: {}
 
   balanced-match@1.0.2: {}
 
+  base64-js@1.5.1: {}
+
   binary-extensions@2.3.0: {}
 
   brace-expansion@1.1.11:
@@ -3704,6 +3910,11 @@ snapshots:
     dependencies:
       fill-range: 7.1.1
 
+  buffer@6.0.3:
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+
   busboy@1.6.0:
     dependencies:
       streamsearch: 1.1.0
@@ -3720,7 +3931,7 @@ snapshots:
 
   camelcase-css@2.0.1: {}
 
-  caniuse-lite@1.0.30001668: {}
+  caniuse-lite@1.0.30001669: {}
 
   chalk@4.1.2:
     dependencies:
@@ -3770,10 +3981,16 @@ snapshots:
       - '@types/react'
       - '@types/react-dom'
 
+  color-convert@1.9.3:
+    dependencies:
+      color-name: 1.1.3
+
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
 
+  color-name@1.1.3: {}
+
   color-name@1.1.4: {}
 
   color-string@1.9.1:
@@ -3781,6 +3998,11 @@ snapshots:
       color-name: 1.1.4
       simple-swizzle: 0.2.2
 
+  color@3.2.1:
+    dependencies:
+      color-convert: 1.9.3
+      color-string: 1.9.1
+
   color@4.2.3:
     dependencies:
       color-convert: 2.0.1
@@ -3788,6 +4010,11 @@ snapshots:
 
   colorette@2.0.20: {}
 
+  colorspace@1.1.4:
+    dependencies:
+      color: 3.2.1
+      text-hex: 1.0.0
+
   commander@12.1.0: {}
 
   commander@4.1.1: {}
@@ -3901,6 +4128,8 @@ snapshots:
 
   emoji-regex@9.2.2: {}
 
+  enabled@2.0.0: {}
+
   enhanced-resolve@5.17.1:
     dependencies:
       graceful-fs: 4.2.11
@@ -4014,19 +4243,19 @@ snapshots:
 
   escape-string-regexp@4.0.0: {}
 
-  eslint-config-next@14.2.15(eslint@9.12.0(jiti@2.2.1))(typescript@5.6.3):
+  eslint-config-next@14.2.15(eslint@9.13.0(jiti@2.2.1))(typescript@5.6.3):
     dependencies:
       '@next/eslint-plugin-next': 14.2.15
       '@rushstack/eslint-patch': 1.10.4
-      '@typescript-eslint/eslint-plugin': 8.8.1(@typescript-eslint/parser@8.8.1(eslint@9.12.0(jiti@2.2.1))(typescript@5.6.3))(eslint@9.12.0(jiti@2.2.1))(typescript@5.6.3)
-      '@typescript-eslint/parser': 8.8.1(eslint@9.12.0(jiti@2.2.1))(typescript@5.6.3)
-      eslint: 9.12.0(jiti@2.2.1)
+      '@typescript-eslint/eslint-plugin': 8.10.0(@typescript-eslint/parser@8.10.0(eslint@9.13.0(jiti@2.2.1))(typescript@5.6.3))(eslint@9.13.0(jiti@2.2.1))(typescript@5.6.3)
+      '@typescript-eslint/parser': 8.10.0(eslint@9.13.0(jiti@2.2.1))(typescript@5.6.3)
+      eslint: 9.13.0(jiti@2.2.1)
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.8.1(eslint@9.12.0(jiti@2.2.1))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@9.12.0(jiti@2.2.1))
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.8.1(eslint@9.12.0(jiti@2.2.1))(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@9.12.0(jiti@2.2.1))
-      eslint-plugin-jsx-a11y: 6.10.0(eslint@9.12.0(jiti@2.2.1))
-      eslint-plugin-react: 7.37.1(eslint@9.12.0(jiti@2.2.1))
-      eslint-plugin-react-hooks: 5.0.0-canary-7118f5dd7-20230705(eslint@9.12.0(jiti@2.2.1))
+      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.10.0(eslint@9.13.0(jiti@2.2.1))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@9.13.0(jiti@2.2.1))
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.10.0(eslint@9.13.0(jiti@2.2.1))(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@9.13.0(jiti@2.2.1))
+      eslint-plugin-jsx-a11y: 6.10.0(eslint@9.13.0(jiti@2.2.1))
+      eslint-plugin-react: 7.37.1(eslint@9.13.0(jiti@2.2.1))
+      eslint-plugin-react-hooks: 5.0.0-canary-7118f5dd7-20230705(eslint@9.13.0(jiti@2.2.1))
     optionalDependencies:
       typescript: 5.6.3
     transitivePeerDependencies:
@@ -4034,9 +4263,9 @@ snapshots:
       - eslint-plugin-import-x
       - supports-color
 
-  eslint-config-prettier@9.1.0(eslint@9.12.0(jiti@2.2.1)):
+  eslint-config-prettier@9.1.0(eslint@9.13.0(jiti@2.2.1)):
     dependencies:
-      eslint: 9.12.0(jiti@2.2.1)
+      eslint: 9.13.0(jiti@2.2.1)
 
   eslint-import-resolver-node@0.3.9:
     dependencies:
@@ -4046,37 +4275,37 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@9.12.0(jiti@2.2.1))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@9.12.0(jiti@2.2.1)):
+  eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.10.0(eslint@9.13.0(jiti@2.2.1))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@9.13.0(jiti@2.2.1)):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
       debug: 4.3.7
       enhanced-resolve: 5.17.1
-      eslint: 9.12.0(jiti@2.2.1)
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.8.1(eslint@9.12.0(jiti@2.2.1))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@9.12.0(jiti@2.2.1))
+      eslint: 9.13.0(jiti@2.2.1)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.10.0(eslint@9.13.0(jiti@2.2.1))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@9.13.0(jiti@2.2.1))
       fast-glob: 3.3.2
       get-tsconfig: 4.8.1
       is-bun-module: 1.2.1
       is-glob: 4.0.3
     optionalDependencies:
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.8.1(eslint@9.12.0(jiti@2.2.1))(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@9.12.0(jiti@2.2.1))
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.10.0(eslint@9.13.0(jiti@2.2.1))(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@9.13.0(jiti@2.2.1))
     transitivePeerDependencies:
       - '@typescript-eslint/parser'
       - eslint-import-resolver-node
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.8.1(eslint@9.12.0(jiti@2.2.1))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@9.12.0(jiti@2.2.1)):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.10.0(eslint@9.13.0(jiti@2.2.1))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@9.13.0(jiti@2.2.1)):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
-      '@typescript-eslint/parser': 8.8.1(eslint@9.12.0(jiti@2.2.1))(typescript@5.6.3)
-      eslint: 9.12.0(jiti@2.2.1)
+      '@typescript-eslint/parser': 8.10.0(eslint@9.13.0(jiti@2.2.1))(typescript@5.6.3)
+      eslint: 9.13.0(jiti@2.2.1)
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.8.1(eslint@9.12.0(jiti@2.2.1))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@9.12.0(jiti@2.2.1))
+      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.10.0(eslint@9.13.0(jiti@2.2.1))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@9.13.0(jiti@2.2.1))
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@9.12.0(jiti@2.2.1))(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@9.12.0(jiti@2.2.1)):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.10.0(eslint@9.13.0(jiti@2.2.1))(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@9.13.0(jiti@2.2.1)):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -4085,9 +4314,9 @@ snapshots:
       array.prototype.flatmap: 1.3.2
       debug: 3.2.7
       doctrine: 2.1.0
-      eslint: 9.12.0(jiti@2.2.1)
+      eslint: 9.13.0(jiti@2.2.1)
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.8.1(eslint@9.12.0(jiti@2.2.1))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@9.12.0(jiti@2.2.1))
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.10.0(eslint@9.13.0(jiti@2.2.1))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@9.13.0(jiti@2.2.1))
       hasown: 2.0.2
       is-core-module: 2.15.1
       is-glob: 4.0.3
@@ -4099,37 +4328,37 @@ snapshots:
       string.prototype.trimend: 1.0.8
       tsconfig-paths: 3.15.0
     optionalDependencies:
-      '@typescript-eslint/parser': 8.8.1(eslint@9.12.0(jiti@2.2.1))(typescript@5.6.3)
+      '@typescript-eslint/parser': 8.10.0(eslint@9.13.0(jiti@2.2.1))(typescript@5.6.3)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-jsx-a11y@6.10.0(eslint@9.12.0(jiti@2.2.1)):
+  eslint-plugin-jsx-a11y@6.10.0(eslint@9.13.0(jiti@2.2.1)):
     dependencies:
       aria-query: 5.1.3
       array-includes: 3.1.8
       array.prototype.flatmap: 1.3.2
       ast-types-flow: 0.0.8
-      axe-core: 4.10.0
+      axe-core: 4.10.1
       axobject-query: 4.1.0
       damerau-levenshtein: 1.0.8
       emoji-regex: 9.2.2
       es-iterator-helpers: 1.1.0
-      eslint: 9.12.0(jiti@2.2.1)
+      eslint: 9.13.0(jiti@2.2.1)
       hasown: 2.0.2
       jsx-ast-utils: 3.3.5
       language-tags: 1.0.9
       minimatch: 3.1.2
       object.fromentries: 2.0.8
       safe-regex-test: 1.0.3
-      string.prototype.includes: 2.0.0
+      string.prototype.includes: 2.0.1
 
-  eslint-plugin-react-hooks@5.0.0-canary-7118f5dd7-20230705(eslint@9.12.0(jiti@2.2.1)):
+  eslint-plugin-react-hooks@5.0.0-canary-7118f5dd7-20230705(eslint@9.13.0(jiti@2.2.1)):
     dependencies:
-      eslint: 9.12.0(jiti@2.2.1)
+      eslint: 9.13.0(jiti@2.2.1)
 
-  eslint-plugin-react@7.37.1(eslint@9.12.0(jiti@2.2.1)):
+  eslint-plugin-react@7.37.1(eslint@9.13.0(jiti@2.2.1)):
     dependencies:
       array-includes: 3.1.8
       array.prototype.findlast: 1.2.5
@@ -4137,7 +4366,7 @@ snapshots:
       array.prototype.tosorted: 1.1.4
       doctrine: 2.1.0
       es-iterator-helpers: 1.1.0
-      eslint: 9.12.0(jiti@2.2.1)
+      eslint: 9.13.0(jiti@2.2.1)
       estraverse: 5.3.0
       hasown: 2.0.2
       jsx-ast-utils: 3.3.5
@@ -4160,15 +4389,15 @@ snapshots:
 
   eslint-visitor-keys@4.1.0: {}
 
-  eslint@9.12.0(jiti@2.2.1):
+  eslint@9.13.0(jiti@2.2.1):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.12.0(jiti@2.2.1))
+      '@eslint-community/eslint-utils': 4.4.0(eslint@9.13.0(jiti@2.2.1))
       '@eslint-community/regexpp': 4.11.1
       '@eslint/config-array': 0.18.0
-      '@eslint/core': 0.6.0
+      '@eslint/core': 0.7.0
       '@eslint/eslintrc': 3.1.0
-      '@eslint/js': 9.12.0
-      '@eslint/plugin-kit': 0.2.0
+      '@eslint/js': 9.13.0
+      '@eslint/plugin-kit': 0.2.1
       '@humanfs/node': 0.16.5
       '@humanwhocodes/module-importer': 1.0.1
       '@humanwhocodes/retry': 0.3.1
@@ -4204,8 +4433,8 @@ snapshots:
 
   espree@10.2.0:
     dependencies:
-      acorn: 8.12.1
-      acorn-jsx: 5.3.2(acorn@8.12.1)
+      acorn: 8.13.0
+      acorn-jsx: 5.3.2(acorn@8.13.0)
       eslint-visitor-keys: 4.1.0
 
   esquery@1.6.0:
@@ -4220,8 +4449,12 @@ snapshots:
 
   esutils@2.0.3: {}
 
+  event-target-shim@5.0.1: {}
+
   eventemitter3@5.0.1: {}
 
+  events@3.3.0: {}
+
   execa@8.0.1:
     dependencies:
       cross-spawn: 7.0.3
@@ -4252,10 +4485,16 @@ snapshots:
     dependencies:
       reusify: 1.0.4
 
+  fecha@4.2.3: {}
+
   file-entry-cache@8.0.0:
     dependencies:
       flat-cache: 4.0.1
 
+  file-stream-rotator@0.6.1:
+    dependencies:
+      moment: 2.30.1
+
   fill-range@7.1.1:
     dependencies:
       to-regex-range: 5.0.1
@@ -4272,6 +4511,8 @@ snapshots:
 
   flatted@3.3.1: {}
 
+  fn.name@1.1.0: {}
+
   for-each@0.3.3:
     dependencies:
       is-callable: 1.2.7
@@ -4381,6 +4622,8 @@ snapshots:
 
   human-signals@5.0.0: {}
 
+  ieee754@1.2.1: {}
+
   ignore@5.3.2: {}
 
   import-fresh@3.3.0:
@@ -4390,6 +4633,8 @@ snapshots:
 
   imurmurhash@0.1.4: {}
 
+  inherits@2.0.4: {}
+
   internal-slot@1.0.7:
     dependencies:
       es-errors: 1.3.0
@@ -4490,6 +4735,8 @@ snapshots:
     dependencies:
       call-bind: 1.0.7
 
+  is-stream@2.0.1: {}
+
   is-stream@3.0.0: {}
 
   is-string@1.0.7:
@@ -4571,6 +4818,8 @@ snapshots:
     dependencies:
       json-buffer: 3.0.1
 
+  kuler@2.0.0: {}
+
   language-subtag-registry@0.3.23: {}
 
   language-tags@1.0.9:
@@ -4626,13 +4875,22 @@ snapshots:
       strip-ansi: 7.1.0
       wrap-ansi: 9.0.0
 
+  logform@2.6.1:
+    dependencies:
+      '@colors/colors': 1.6.0
+      '@types/triple-beam': 1.3.5
+      fecha: 4.2.3
+      ms: 2.1.3
+      safe-stable-stringify: 2.5.0
+      triple-beam: 1.4.1
+
   loose-envify@1.4.0:
     dependencies:
       js-tokens: 4.0.0
 
   lru-cache@10.4.3: {}
 
-  lucide-react@0.452.0(react@18.3.1):
+  lucide-react@0.453.0(react@18.3.1):
     dependencies:
       react: 18.3.1
 
@@ -4661,6 +4919,8 @@ snapshots:
 
   minipass@7.1.2: {}
 
+  moment@2.30.1: {}
+
   ms@2.1.3: {}
 
   mz@2.7.0:
@@ -4678,7 +4938,7 @@ snapshots:
       '@next/env': 14.2.15
       '@swc/helpers': 0.5.5
       busboy: 1.6.0
-      caniuse-lite: 1.0.30001668
+      caniuse-lite: 1.0.30001669
       graceful-fs: 4.2.11
       postcss: 8.4.31
       react: 18.3.1
@@ -4749,6 +5009,10 @@ snapshots:
       define-properties: 1.2.1
       es-object-atoms: 1.0.0
 
+  one-time@1.0.0:
+    dependencies:
+      fn.name: 1.1.0
+
   onetime@6.0.0:
     dependencies:
       mimic-fn: 4.0.0
@@ -4793,7 +5057,7 @@ snapshots:
       lru-cache: 10.4.3
       minipass: 7.1.2
 
-  picocolors@1.1.0: {}
+  picocolors@1.1.1: {}
 
   picomatch@2.3.1: {}
 
@@ -4839,19 +5103,21 @@ snapshots:
   postcss@8.4.31:
     dependencies:
       nanoid: 3.3.7
-      picocolors: 1.1.0
+      picocolors: 1.1.1
       source-map-js: 1.2.1
 
   postcss@8.4.47:
     dependencies:
       nanoid: 3.3.7
-      picocolors: 1.1.0
+      picocolors: 1.1.1
       source-map-js: 1.2.1
 
   prelude-ls@1.2.1: {}
 
   prettier@3.3.3: {}
 
+  process@0.11.10: {}
+
   prop-types@15.8.1:
     dependencies:
       loose-envify: 1.4.0
@@ -4874,7 +5140,7 @@ snapshots:
     dependencies:
       react: 18.3.1
       react-style-singleton: 2.2.1(@types/react@18.3.11)(react@18.3.1)
-      tslib: 2.7.0
+      tslib: 2.8.0
     optionalDependencies:
       '@types/react': 18.3.11
 
@@ -4883,7 +5149,7 @@ snapshots:
       react: 18.3.1
       react-remove-scroll-bar: 2.3.6(@types/react@18.3.11)(react@18.3.1)
       react-style-singleton: 2.2.1(@types/react@18.3.11)(react@18.3.1)
-      tslib: 2.7.0
+      tslib: 2.8.0
       use-callback-ref: 1.3.2(@types/react@18.3.11)(react@18.3.1)
       use-sidecar: 1.1.2(@types/react@18.3.11)(react@18.3.1)
     optionalDependencies:
@@ -4894,7 +5160,7 @@ snapshots:
       react: 18.3.1
       react-remove-scroll-bar: 2.3.6(@types/react@18.3.11)(react@18.3.1)
       react-style-singleton: 2.2.1(@types/react@18.3.11)(react@18.3.1)
-      tslib: 2.7.0
+      tslib: 2.8.0
       use-callback-ref: 1.3.2(@types/react@18.3.11)(react@18.3.1)
       use-sidecar: 1.1.2(@types/react@18.3.11)(react@18.3.1)
     optionalDependencies:
@@ -4905,7 +5171,7 @@ snapshots:
       get-nonce: 1.0.1
       invariant: 2.2.4
       react: 18.3.1
-      tslib: 2.7.0
+      tslib: 2.8.0
     optionalDependencies:
       '@types/react': 18.3.11
 
@@ -4917,6 +5183,20 @@ snapshots:
     dependencies:
       pify: 2.3.0
 
+  readable-stream@3.6.2:
+    dependencies:
+      inherits: 2.0.4
+      string_decoder: 1.3.0
+      util-deprecate: 1.0.2
+
+  readable-stream@4.5.2:
+    dependencies:
+      abort-controller: 3.0.0
+      buffer: 6.0.3
+      events: 3.3.0
+      process: 0.11.10
+      string_decoder: 1.3.0
+
   readdirp@3.6.0:
     dependencies:
       picomatch: 2.3.1
@@ -4976,12 +5256,16 @@ snapshots:
       has-symbols: 1.0.3
       isarray: 2.0.5
 
+  safe-buffer@5.2.1: {}
+
   safe-regex-test@1.0.3:
     dependencies:
       call-bind: 1.0.7
       es-errors: 1.3.0
       is-regex: 1.1.4
 
+  safe-stable-stringify@2.5.0: {}
+
   scheduler@0.23.2:
     dependencies:
       loose-envify: 1.4.0
@@ -5063,6 +5347,8 @@ snapshots:
 
   source-map-js@1.2.1: {}
 
+  stack-trace@0.0.10: {}
+
   stop-iteration-iterator@1.0.0:
     dependencies:
       internal-slot: 1.0.7
@@ -5089,8 +5375,9 @@ snapshots:
       get-east-asian-width: 1.3.0
       strip-ansi: 7.1.0
 
-  string.prototype.includes@2.0.0:
+  string.prototype.includes@2.0.1:
     dependencies:
+      call-bind: 1.0.7
       define-properties: 1.2.1
       es-abstract: 1.23.3
 
@@ -5133,6 +5420,10 @@ snapshots:
       define-properties: 1.2.1
       es-object-atoms: 1.0.0
 
+  string_decoder@1.3.0:
+    dependencies:
+      safe-buffer: 5.2.1
+
   strip-ansi@6.0.1:
     dependencies:
       ansi-regex: 5.0.1
@@ -5170,15 +5461,15 @@ snapshots:
 
   tailwind-merge@2.5.4: {}
 
-  tailwind-scrollbar@3.1.0(tailwindcss@3.4.13):
+  tailwind-scrollbar@3.1.0(tailwindcss@3.4.14):
     dependencies:
-      tailwindcss: 3.4.13
+      tailwindcss: 3.4.14
 
-  tailwindcss-animate@1.0.7(tailwindcss@3.4.13):
+  tailwindcss-animate@1.0.7(tailwindcss@3.4.14):
     dependencies:
-      tailwindcss: 3.4.13
+      tailwindcss: 3.4.14
 
-  tailwindcss@3.4.13:
+  tailwindcss@3.4.14:
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
@@ -5193,7 +5484,7 @@ snapshots:
       micromatch: 4.0.8
       normalize-path: 3.0.0
       object-hash: 3.0.0
-      picocolors: 1.1.0
+      picocolors: 1.1.1
       postcss: 8.4.47
       postcss-import: 15.1.0(postcss@8.4.47)
       postcss-js: 4.0.1(postcss@8.4.47)
@@ -5207,6 +5498,8 @@ snapshots:
 
   tapable@2.2.1: {}
 
+  text-hex@1.0.0: {}
+
   text-table@0.2.0: {}
 
   thenify-all@1.6.0:
@@ -5221,6 +5514,8 @@ snapshots:
     dependencies:
       is-number: 7.0.0
 
+  triple-beam@1.4.1: {}
+
   ts-api-utils@1.3.0(typescript@5.6.3):
     dependencies:
       typescript: 5.6.3
@@ -5234,7 +5529,7 @@ snapshots:
       minimist: 1.2.8
       strip-bom: 3.0.0
 
-  tslib@2.7.0: {}
+  tslib@2.8.0: {}
 
   type-check@0.4.0:
     dependencies:
@@ -5290,7 +5585,7 @@ snapshots:
   use-callback-ref@1.3.2(@types/react@18.3.11)(react@18.3.1):
     dependencies:
       react: 18.3.1
-      tslib: 2.7.0
+      tslib: 2.8.0
     optionalDependencies:
       '@types/react': 18.3.11
 
@@ -5298,7 +5593,7 @@ snapshots:
     dependencies:
       detect-node-es: 1.1.0
       react: 18.3.1
-      tslib: 2.7.0
+      tslib: 2.8.0
     optionalDependencies:
       '@types/react': 18.3.11
 
@@ -5350,6 +5645,34 @@ snapshots:
     dependencies:
       isexe: 2.0.0
 
+  winston-daily-rotate-file@5.0.0(winston@3.15.0):
+    dependencies:
+      file-stream-rotator: 0.6.1
+      object-hash: 3.0.0
+      triple-beam: 1.4.1
+      winston: 3.15.0
+      winston-transport: 4.8.0
+
+  winston-transport@4.8.0:
+    dependencies:
+      logform: 2.6.1
+      readable-stream: 4.5.2
+      triple-beam: 1.4.1
+
+  winston@3.15.0:
+    dependencies:
+      '@colors/colors': 1.6.0
+      '@dabh/diagnostics': 2.0.3
+      async: 3.2.6
+      is-stream: 2.0.1
+      logform: 2.6.1
+      one-time: 1.0.0
+      readable-stream: 3.6.2
+      safe-stable-stringify: 2.5.0
+      stack-trace: 0.0.10
+      triple-beam: 1.4.1
+      winston-transport: 4.8.0
+
   word-wrap@1.2.5: {}
 
   wrap-ansi@7.0.0:
diff --git a/services/web/src/app/api/items/route.ts b/services/web/src/app/api/items/route.ts
index dd10fb3e..ca2b0ddc 100644
--- a/services/web/src/app/api/items/route.ts
+++ b/services/web/src/app/api/items/route.ts
@@ -6,12 +6,12 @@ export async function GET(request: NextRequest) {
   const cursorStr = request.nextUrl.searchParams.get("cursor");
   const cursor = cursorStr ? +cursorStr : 0;
 
-  const items = mockItems.slice(cursor, cursor + 8);
+  const items = mockItems.slice(cursor, cursor + 10);
 
   return NextResponse.json(
     {
       items,
-      next_cursor: items.length < 8 ? null : String(cursor + 8),
+      next_cursor: items.length < 10 ? null : String(cursor + 10),
     },
     { status: 200 },
   );
diff --git a/services/web/src/app/api/wishlists/[userId]/route.ts b/services/web/src/app/api/wishlists/[userId]/route.ts
index 0a37af4e..d4c2313e 100644
--- a/services/web/src/app/api/wishlists/[userId]/route.ts
+++ b/services/web/src/app/api/wishlists/[userId]/route.ts
@@ -5,12 +5,12 @@ export async function GET(request: NextRequest) {
   const cursorStr = request.nextUrl.searchParams.get("cursor");
   const cursor = cursorStr ? +cursorStr : 0;
 
-  const items = mockItems.slice(cursor, cursor + 8);
+  const items = mockItems.slice(cursor, cursor + 10);
 
   return NextResponse.json(
     {
       items,
-      next_cursor: items.length < 8 ? null : String(cursor + 8),
+      next_cursor: items.length < 10 ? null : String(cursor + 10),
     },
     { status: 200 },
   );
diff --git a/services/web/src/app/belongings/components/belongings-select.tsx b/services/web/src/app/belongings/belongings-select.tsx
similarity index 100%
rename from services/web/src/app/belongings/components/belongings-select.tsx
rename to services/web/src/app/belongings/belongings-select.tsx
diff --git a/services/web/src/app/belongings/components/belongings.tsx b/services/web/src/app/belongings/belongings.tsx
similarity index 98%
rename from services/web/src/app/belongings/components/belongings.tsx
rename to services/web/src/app/belongings/belongings.tsx
index c4a38583..39c2dd2b 100644
--- a/services/web/src/app/belongings/components/belongings.tsx
+++ b/services/web/src/app/belongings/belongings.tsx
@@ -18,7 +18,7 @@ export function Belongings({ firstPage, me }: Props) {
     queryFn: async ({ pageParam: cursor }) => {
       const searchParams = new URLSearchParams({
         seller_id: String(me.id),
-        limit: "8",
+        limit: "10",
         ...(cursor && { cursor }),
       });
 
diff --git a/services/web/src/app/belongings/components/compose-pack-dialog.tsx b/services/web/src/app/belongings/compose-pack-dialog.tsx
similarity index 100%
rename from services/web/src/app/belongings/components/compose-pack-dialog.tsx
rename to services/web/src/app/belongings/compose-pack-dialog.tsx
diff --git a/services/web/src/app/belongings/components/compose-pack-form.tsx b/services/web/src/app/belongings/compose-pack-form.tsx
similarity index 100%
rename from services/web/src/app/belongings/components/compose-pack-form.tsx
rename to services/web/src/app/belongings/compose-pack-form.tsx
diff --git a/services/web/src/app/belongings/page.tsx b/services/web/src/app/belongings/page.tsx
index e0041d06..b23e457f 100644
--- a/services/web/src/app/belongings/page.tsx
+++ b/services/web/src/app/belongings/page.tsx
@@ -1,9 +1,8 @@
-import { PageTitle } from "@/components/framework";
 import { prefetchBelongings, prefetchMe } from "@/prefetchers";
 import type { Metadata } from "next";
 import { redirect } from "next/navigation";
-import { Belongings } from "./components/belongings";
-import { ComposePackDialog } from "./components/compose-pack-dialog";
+import { Belongings } from "./belongings";
+import { ComposePackDialog } from "./compose-pack-dialog";
 
 export default async function BelongingsPage() {
   const { data: me, error: meError } = await prefetchMe();
@@ -24,11 +23,7 @@ export default async function BelongingsPage() {
 
   return (
     <>
-      <div className="flex justify-between items-center flex-wrap gap-4 mb-8">
-        <PageTitle
-          title="My belongings"
-          description="Here are the items you have listed"
-        />
+      <div className="mb-8">
         <ComposePackDialog />
       </div>
       <Belongings firstPage={page} me={me} />
diff --git a/services/web/src/components/item/publish/publish-item-form.tsx b/services/web/src/app/belongings/publish/form.tsx
similarity index 85%
rename from services/web/src/components/item/publish/publish-item-form.tsx
rename to services/web/src/app/belongings/publish/form.tsx
index 967dd1ee..ae5af345 100644
--- a/services/web/src/components/item/publish/publish-item-form.tsx
+++ b/services/web/src/app/belongings/publish/form.tsx
@@ -1,5 +1,6 @@
+"use client";
+
 import { Button } from "@/components/ui/button";
-import { DialogClose, DialogFooter } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
@@ -7,8 +8,9 @@ import { useToast } from "@/components/ui/use-toast";
 import type { SingleItem } from "@/types";
 import { clientRequester } from "@/utils/requester/client";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { Loader2Icon, PlusIcon, XIcon } from "lucide-react";
-import { useState, type FormEvent } from "react";
+import { Loader2Icon, PlusIcon, UndoIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useRef, useState, type FormEvent } from "react";
 import * as v from "valibot";
 import { PhotoSelector } from "./photo-selector";
 
@@ -44,15 +46,13 @@ const formSchema = v.object({
   ),
 });
 
-type Props = {
-  closeDialog: () => void;
-};
-
-export function PublishItemForm({ closeDialog }: Props) {
+export function PublishItemForm() {
   const [photoObjects, setPhotoObjects] = useState<
     { id: number; file: File; previewUrl: string }[]
   >([]);
 
+  const router = useRouter();
+
   const { toast } = useToast();
 
   const queryClient = useQueryClient();
@@ -78,7 +78,6 @@ export function PublishItemForm({ closeDialog }: Props) {
       return await clientRequester.form<SingleItem>("/items", data);
     },
     onSuccess: () => {
-      closeDialog();
       setPhotoObjects([]);
 
       queryClient.invalidateQueries({ queryKey: ["items"] });
@@ -87,6 +86,8 @@ export function PublishItemForm({ closeDialog }: Props) {
         title: "Item published",
         description: "Your item has been published successfully.",
       });
+
+      router.push("/belongings");
     },
     onError: (error) => {
       toast({
@@ -97,8 +98,18 @@ export function PublishItemForm({ closeDialog }: Props) {
     },
   });
 
+  const formRef = useRef<HTMLFormElement>(null);
+  const reset = () => {
+    formRef.current?.reset();
+    setPhotoObjects([]);
+  };
+
   return (
-    <form onSubmit={mutate} className="grid gap-4">
+    <form
+      ref={formRef}
+      onSubmit={mutate}
+      className="grow flex flex-col justify-center items-stretch gap-4 w-full max-w-lg mx-auto"
+    >
       <div className="grid gap-2">
         <Label showRequiredMarker htmlFor="name">
           Name
@@ -152,13 +163,11 @@ export function PublishItemForm({ closeDialog }: Props) {
         photoObjects={photoObjects}
         setPhotoObjects={setPhotoObjects}
       />
-      <DialogFooter>
-        <DialogClose asChild>
-          <Button variant="secondary">
-            <XIcon className="size-4 mr-2" />
-            Close
-          </Button>
-        </DialogClose>
+      <div className="grid sm:grid-cols-2 gap-x-4 gap-y-2">
+        <Button variant="secondary" onClick={reset}>
+          <UndoIcon className="size-4 mr-2" />
+          Reset
+        </Button>
         <Button type="submit" disabled={isPending}>
           {isPending ? (
             <Loader2Icon className="size-4 mr-2 animate-spin" />
@@ -167,7 +176,7 @@ export function PublishItemForm({ closeDialog }: Props) {
           )}
           Publish
         </Button>
-      </DialogFooter>
+      </div>
     </form>
   );
 }
diff --git a/services/web/src/app/belongings/publish/page.tsx b/services/web/src/app/belongings/publish/page.tsx
new file mode 100644
index 00000000..52511ea1
--- /dev/null
+++ b/services/web/src/app/belongings/publish/page.tsx
@@ -0,0 +1,10 @@
+import type { Metadata } from "next";
+import { PublishItemForm } from "./form";
+
+export default function PublishPage() {
+  return <PublishItemForm />;
+}
+
+export const metadata: Metadata = {
+  title: "Publish Item",
+};
diff --git a/services/web/src/components/item/publish/photo-selector.tsx b/services/web/src/app/belongings/publish/photo-selector.tsx
similarity index 100%
rename from services/web/src/components/item/publish/photo-selector.tsx
rename to services/web/src/app/belongings/publish/photo-selector.tsx
diff --git a/services/web/src/app/globals.css b/services/web/src/app/globals.css
index 446f8257..0e2493e5 100644
--- a/services/web/src/app/globals.css
+++ b/services/web/src/app/globals.css
@@ -29,6 +29,14 @@
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 20 5.9% 90%;
+    --sidebar-ring: 24.6 95% 53.1%;
   }
 
   .dark {
@@ -56,6 +64,14 @@
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 12 6.5% 15.1%;
+    --sidebar-ring: 20.5 90.2% 48.2%;
   }
 }
 
diff --git a/services/web/src/components/item/details/add-to-wishlist-button.tsx b/services/web/src/app/items/[id]/add-to-wishlist-button.tsx
similarity index 100%
rename from services/web/src/components/item/details/add-to-wishlist-button.tsx
rename to services/web/src/app/items/[id]/add-to-wishlist-button.tsx
diff --git a/services/web/src/components/item/details/children-grid.tsx b/services/web/src/app/items/[id]/children-grid.tsx
similarity index 86%
rename from services/web/src/components/item/details/children-grid.tsx
rename to services/web/src/app/items/[id]/children-grid.tsx
index 772c979a..c541d71e 100644
--- a/services/web/src/components/item/details/children-grid.tsx
+++ b/services/web/src/app/items/[id]/children-grid.tsx
@@ -1,5 +1,5 @@
+import { ItemCard } from "@/components/item";
 import type { Item } from "@/types";
-import { ItemCard } from "../card";
 
 type Props = {
   items: Item[];
diff --git a/services/web/src/components/item/details/decompose-pack-dialog.tsx b/services/web/src/app/items/[id]/decompose-pack-dialog.tsx
similarity index 100%
rename from services/web/src/components/item/details/decompose-pack-dialog.tsx
rename to services/web/src/app/items/[id]/decompose-pack-dialog.tsx
diff --git a/services/web/src/components/item/details/delete-item-dialog.tsx b/services/web/src/app/items/[id]/delete-item-dialog.tsx
similarity index 100%
rename from services/web/src/components/item/details/delete-item-dialog.tsx
rename to services/web/src/app/items/[id]/delete-item-dialog.tsx
diff --git a/services/web/src/components/item/edit/add-photo-input.tsx b/services/web/src/app/items/[id]/edit/add-photo-input.tsx
similarity index 100%
rename from services/web/src/components/item/edit/add-photo-input.tsx
rename to services/web/src/app/items/[id]/edit/add-photo-input.tsx
diff --git a/services/web/src/components/item/edit/edit-item.tsx b/services/web/src/app/items/[id]/edit/form.tsx
similarity index 99%
rename from services/web/src/components/item/edit/edit-item.tsx
rename to services/web/src/app/items/[id]/edit/form.tsx
index 2aa7859c..2ded39f3 100644
--- a/services/web/src/components/item/edit/edit-item.tsx
+++ b/services/web/src/app/items/[id]/edit/form.tsx
@@ -58,7 +58,7 @@ type Props = {
 
 type Photo = { url: string; file?: File };
 
-export function EditItem({ id, initialItem }: Props) {
+export function EditItemForm({ id, initialItem }: Props) {
   const { data: item } = useQuery({
     queryKey: ["items", id],
     queryFn: async () => {
diff --git a/services/web/src/app/items/[id]/edit/page.tsx b/services/web/src/app/items/[id]/edit/page.tsx
index 89d80c79..2ffaba3d 100644
--- a/services/web/src/app/items/[id]/edit/page.tsx
+++ b/services/web/src/app/items/[id]/edit/page.tsx
@@ -1,10 +1,9 @@
-import { PageTitle } from "@/components/framework/page-title";
-import { EditItem } from "@/components/item/edit/edit-item";
 import { prefetchItem, prefetchMe } from "@/prefetchers";
 import { ChevronLeftIcon } from "lucide-react";
 import type { Metadata } from "next";
 import Link from "next/link";
 import { notFound, redirect } from "next/navigation";
+import { EditItemForm } from "./form";
 
 type Props = {
   params: {
@@ -45,12 +44,7 @@ export default async function Page({ params: { id } }: Props) {
         <ChevronLeftIcon className="size-4 mr-2" />
         Back to details
       </Link>
-      <PageTitle
-        title="Edit item"
-        description="Update the details of your item"
-        className="mb-8"
-      />
-      <EditItem id={id} initialItem={item} />
+      <EditItemForm id={id} initialItem={item} />
     </div>
   );
 }
diff --git a/services/web/src/components/item/edit/photo-slot.tsx b/services/web/src/app/items/[id]/edit/photo-slot.tsx
similarity index 100%
rename from services/web/src/components/item/edit/photo-slot.tsx
rename to services/web/src/app/items/[id]/edit/photo-slot.tsx
diff --git a/services/web/src/components/item/edit/photo-slots.tsx b/services/web/src/app/items/[id]/edit/photo-slots.tsx
similarity index 100%
rename from services/web/src/components/item/edit/photo-slots.tsx
rename to services/web/src/app/items/[id]/edit/photo-slots.tsx
diff --git a/services/web/src/components/item/details/item-details.tsx b/services/web/src/app/items/[id]/item-details.tsx
similarity index 88%
rename from services/web/src/components/item/details/item-details.tsx
rename to services/web/src/app/items/[id]/item-details.tsx
index 67f141ba..d4c60654 100644
--- a/services/web/src/components/item/details/item-details.tsx
+++ b/services/web/src/app/items/[id]/item-details.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { FromNow } from "@/components/item/from-now";
+import { StatusBadge } from "@/components/item/status-badge";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/components/ui/utils";
@@ -13,8 +15,6 @@ import {
 } from "@/types";
 import { EditIcon, MailIcon } from "lucide-react";
 import Link from "next/link";
-import { StatusBadge } from "../card/status-badge";
-import { FromNow } from "../from-now";
 import { AddToWishListButton } from "./add-to-wishlist-button";
 import { ChildrenGrid } from "./children-grid";
 import { DecomposePackDialog } from "./decompose-pack-dialog";
@@ -87,7 +87,9 @@ export function ItemDetails({ initialItem, wishlistStatistics, me }: Props) {
         <div
           className={cn(
             "grid sm:grid-cols-2 gap-x-4 gap-y-2 pt-5",
-            me?.id === item.seller.id && "lg:grid-cols-3",
+            me?.id === item.seller.id &&
+              item.type === ItemType.SINGLE &&
+              "lg:grid-cols-3",
           )}
         >
           {me?.id === item.seller.id ? (
@@ -105,14 +107,16 @@ export function ItemDetails({ initialItem, wishlistStatistics, me }: Props) {
                   <UpdateStatusAction itemId={item.id} to={ItemStatus.SOLD} />
                 </UpdateStatusDropdownMenu>
               ) : null}
-              <Button variant="secondary" asChild>
-                <Link href={`/items/${item.id}/edit`}>
-                  <EditIcon className="size-4 mr-2" />
-                  Edit
-                </Link>
-              </Button>
               {item.type === ItemType.SINGLE ? (
-                <DeleteItemDialog item={item} />
+                <>
+                  <Button variant="secondary" asChild>
+                    <Link href={`/items/${item.id}/edit`}>
+                      <EditIcon className="size-4 mr-2" />
+                      Edit
+                    </Link>
+                  </Button>
+                  <DeleteItemDialog item={item} />
+                </>
               ) : (
                 <DecomposePackDialog item={item} />
               )}
diff --git a/services/web/src/app/items/[id]/page.tsx b/services/web/src/app/items/[id]/page.tsx
index 374ba10e..a9da09ca 100644
--- a/services/web/src/app/items/[id]/page.tsx
+++ b/services/web/src/app/items/[id]/page.tsx
@@ -1,4 +1,3 @@
-import { ItemDetails } from "@/components/item/details";
 import {
   prefetchItem,
   prefetchMe,
@@ -7,6 +6,7 @@ import {
 import { ChevronLeftIcon } from "lucide-react";
 import Link from "next/link";
 import { notFound, redirect } from "next/navigation";
+import { ItemDetails } from "./item-details";
 
 type Props = {
   params: {
diff --git a/services/web/src/components/item/details/photo-carousel.tsx b/services/web/src/app/items/[id]/photo-carousel.tsx
similarity index 100%
rename from services/web/src/components/item/details/photo-carousel.tsx
rename to services/web/src/app/items/[id]/photo-carousel.tsx
diff --git a/services/web/src/components/item/details/update-status-dropdown-menu.tsx b/services/web/src/app/items/[id]/update-status-dropdown-menu.tsx
similarity index 100%
rename from services/web/src/components/item/details/update-status-dropdown-menu.tsx
rename to services/web/src/app/items/[id]/update-status-dropdown-menu.tsx
diff --git a/services/web/src/app/layout.tsx b/services/web/src/app/layout.tsx
index e592e123..c92a8466 100644
--- a/services/web/src/app/layout.tsx
+++ b/services/web/src/app/layout.tsx
@@ -1,4 +1,5 @@
-import { Header, Sidebar } from "@/components/framework";
+import { Header, Sidebar } from "@/components/layout";
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
 import { Toaster } from "@/components/ui/toaster";
 import { QueryProvider } from "@/contexts/query-provider";
 import type { Metadata } from "next";
@@ -29,17 +30,13 @@ export default function RootLayout({ children }: PropsWithChildren) {
       </head>
       <body className="bg-background font-sans text-foreground antialiased scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-muted">
         <QueryProvider>
-          <div className="hidden md:block">
+          <SidebarProvider>
             <Sidebar />
-          </div>
-          <div className="md:hidden">
-            <Header />
-          </div>
-          <div className="md:pl-56 lg:pl-72 pt-14 md:pt-0">
-            <main className="flex flex-col min-h-[calc(100vh-56px)] md:min-h-screen px-6 md:px-12 lg:px-24 py-8 md:py-16">
-              {children}
-            </main>
-          </div>
+            <SidebarInset>
+              <Header />
+              <div className="grow flex flex-col px-8 pb-16">{children}</div>
+            </SidebarInset>
+          </SidebarProvider>
         </QueryProvider>
         <Toaster />
       </body>
diff --git a/services/web/src/app/loading.tsx b/services/web/src/app/loading.tsx
new file mode 100644
index 00000000..7d041ccf
--- /dev/null
+++ b/services/web/src/app/loading.tsx
@@ -0,0 +1,9 @@
+import { Loader2Icon } from "lucide-react";
+
+export default function Loading() {
+  return (
+    <div className="grow grid place-items-center">
+      <Loader2Icon className="size-16 animate-spin" />
+    </div>
+  );
+}
diff --git a/services/web/src/app/marketplace.tsx b/services/web/src/app/marketplace.tsx
index c81b9cd3..5526face 100644
--- a/services/web/src/app/marketplace.tsx
+++ b/services/web/src/app/marketplace.tsx
@@ -17,7 +17,7 @@ export function Marketplace({ firstPage }: Props) {
     queryFn: async ({ pageParam: cursor }) => {
       const searchParams = new URLSearchParams({
         status: String(ItemStatus.FOR_SALE),
-        limit: "8",
+        limit: "10",
         ...(cursor && { cursor }),
       });
 
diff --git a/services/web/src/app/page.tsx b/services/web/src/app/page.tsx
index 02e52c9b..149f5222 100644
--- a/services/web/src/app/page.tsx
+++ b/services/web/src/app/page.tsx
@@ -1,5 +1,3 @@
-import { PageTitle } from "@/components/framework";
-import { PublishItemDialog } from "@/components/item/publish";
 import { prefetchMarketplace } from "@/prefetchers";
 import type { Metadata } from "next";
 import { redirect } from "next/navigation";
@@ -12,18 +10,7 @@ export default async function MarketplacePage() {
     redirect(`/error?message=${error.message}`);
   }
 
-  return (
-    <>
-      <div className="flex justify-between items-center flex-wrap gap-4 mb-8">
-        <PageTitle
-          title="Marketplace"
-          description="We found something you might be interested in"
-        />
-        <PublishItemDialog />
-      </div>
-      <Marketplace firstPage={page} />
-    </>
-  );
+  return <Marketplace firstPage={page} />;
 }
 
 export const metadata: Metadata = {
diff --git a/services/web/src/app/search/search-results.tsx b/services/web/src/app/search/search-results.tsx
index 42b93669..f0b41cd1 100644
--- a/services/web/src/app/search/search-results.tsx
+++ b/services/web/src/app/search/search-results.tsx
@@ -18,7 +18,7 @@ export function SearchResults() {
     queryFn: async ({ pageParam: { cursor, threshold } }) => {
       const searchParams = new URLSearchParams({
         q,
-        limit: "8",
+        limit: "10",
         ...(cursor && { cursor }),
         ...(threshold && { threshold: String(threshold) }),
       });
diff --git a/services/web/src/app/settings/contacts/page.tsx b/services/web/src/app/settings/contacts/page.tsx
deleted file mode 100644
index 901e44e3..00000000
--- a/services/web/src/app/settings/contacts/page.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { prefetchMe } from "@/prefetchers";
-import type { Metadata } from "next";
-import { redirect } from "next/navigation";
-import { UpdateWhatsappCard } from "../cards/update-whatsapp-card";
-
-export default async function ContactsSettingsPage() {
-  const { data: me, error } = await prefetchMe();
-
-  if (error && error.status === 401) {
-    redirect("/login");
-  }
-
-  if (error) {
-    redirect(`/error?message=${error.message}`);
-  }
-
-  return (
-    <div className="grid gap-6">
-      <UpdateWhatsappCard
-        id={me.id}
-        initialPhoneCode={me.phone_code}
-        initialPhoneNumber={me.phone_number}
-      />
-    </div>
-  );
-}
-
-export const metadata: Metadata = {
-  title: "Contacts Settings",
-};
diff --git a/services/web/src/app/settings/cards/delete-account-button.tsx b/services/web/src/app/settings/delete-account-button.tsx
similarity index 100%
rename from services/web/src/app/settings/cards/delete-account-button.tsx
rename to services/web/src/app/settings/delete-account-button.tsx
diff --git a/services/web/src/app/settings/cards/delete-account-card.tsx b/services/web/src/app/settings/delete-account-card.tsx
similarity index 100%
rename from services/web/src/app/settings/cards/delete-account-card.tsx
rename to services/web/src/app/settings/delete-account-card.tsx
diff --git a/services/web/src/app/settings/display/page.tsx b/services/web/src/app/settings/display/page.tsx
deleted file mode 100644
index 02734594..00000000
--- a/services/web/src/app/settings/display/page.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { prefetchMe } from "@/prefetchers";
-import type { Metadata } from "next";
-import { redirect } from "next/navigation";
-import { UpdateNicknameCard } from "../cards/update-nickname-card";
-
-export default async function DisplaySettingsPage() {
-  const { data: me, error } = await prefetchMe();
-
-  if (error && error.status === 401) {
-    redirect("/login");
-  }
-
-  if (error) {
-    redirect(`/error?message=${error.message}`);
-  }
-
-  return (
-    <div className="grid gap-6">
-      <UpdateNicknameCard id={me.id} initialNickname={me.nickname} />
-    </div>
-  );
-}
-
-export const metadata: Metadata = {
-  title: "Display Settings",
-};
diff --git a/services/web/src/app/settings/layout.tsx b/services/web/src/app/settings/layout.tsx
deleted file mode 100644
index f2e1fd29..00000000
--- a/services/web/src/app/settings/layout.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { PageTitle } from "@/components/framework/page-title";
-import type { PropsWithChildren } from "react";
-import { NavLink } from "./nav-link";
-
-export default function SettingsLayout({ children }: PropsWithChildren) {
-  return (
-    <>
-      <PageTitle
-        title="Settings"
-        description="Manage your profile and account"
-        className="mb-8"
-      />
-      <div className="flex flex-col md:flex-row gap-8 md:gap-24 xl:gap-40">
-        <nav
-          aria-label="Settings navigation"
-          className="self-start grid gap-4 text-sm text-muted-foreground"
-        >
-          <NavLink href="/settings">Account</NavLink>
-          <NavLink href="/settings/display">Display</NavLink>
-          <NavLink href="/settings/contacts">Contacts</NavLink>
-        </nav>
-        <div className="grow">{children}</div>
-      </div>
-    </>
-  );
-}
diff --git a/services/web/src/app/settings/nav-link.tsx b/services/web/src/app/settings/nav-link.tsx
deleted file mode 100644
index a16faca9..00000000
--- a/services/web/src/app/settings/nav-link.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-"use client";
-
-import { cn } from "@/components/ui/utils";
-import type { Route } from "next";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import type { PropsWithChildren } from "react";
-
-type Props = PropsWithChildren<{
-  href: Route;
-}>;
-
-export function NavLink({ href, children }: Props) {
-  const pathname = usePathname();
-
-  const isActive = pathname === href;
-
-  return (
-    <Link href={href} className={cn(isActive && "font-semibold text-primary")}>
-      {children}
-    </Link>
-  );
-}
diff --git a/services/web/src/app/settings/page.tsx b/services/web/src/app/settings/page.tsx
index cdcd7af9..df58013b 100644
--- a/services/web/src/app/settings/page.tsx
+++ b/services/web/src/app/settings/page.tsx
@@ -1,9 +1,11 @@
 import { prefetchMe } from "@/prefetchers";
 import type { Metadata } from "next";
 import { redirect } from "next/navigation";
-import { DeleteAccountCard } from "./cards/delete-account-card";
-import { UpdateEmailCard } from "./cards/update-email-card";
-import { UpdatePasswordCard } from "./cards/update-password-card";
+import { DeleteAccountCard } from "./delete-account-card";
+import { UpdateEmailCard } from "./update-email-card";
+import { UpdateNicknameCard } from "./update-nickname-card";
+import { UpdatePasswordCard } from "./update-password-card";
+import { UpdateWhatsappCard } from "./update-whatsapp-card";
 
 export default async function AccountSettingsPage() {
   const { data: me, error } = await prefetchMe();
@@ -17,14 +19,20 @@ export default async function AccountSettingsPage() {
   }
 
   return (
-    <div className="grid gap-6">
+    <div className="grid gap-6 w-full max-w-xl mx-auto">
       <UpdateEmailCard id={me.id} initialEmail={me.email} />
       <UpdatePasswordCard />
+      <UpdateNicknameCard id={me.id} initialNickname={me.nickname} />
+      <UpdateWhatsappCard
+        id={me.id}
+        initialPhoneCode={me.phone_code}
+        initialPhoneNumber={me.phone_number}
+      />
       <DeleteAccountCard id={me.id} />
     </div>
   );
 }
 
 export const metadata: Metadata = {
-  title: "Account Settings",
+  title: "Settings",
 };
diff --git a/services/web/src/app/settings/cards/update-avatar-card.tsx b/services/web/src/app/settings/update-avatar-card.tsx
similarity index 100%
rename from services/web/src/app/settings/cards/update-avatar-card.tsx
rename to services/web/src/app/settings/update-avatar-card.tsx
diff --git a/services/web/src/app/settings/cards/update-email-card.tsx b/services/web/src/app/settings/update-email-card.tsx
similarity index 100%
rename from services/web/src/app/settings/cards/update-email-card.tsx
rename to services/web/src/app/settings/update-email-card.tsx
diff --git a/services/web/src/app/settings/cards/update-nickname-card.tsx b/services/web/src/app/settings/update-nickname-card.tsx
similarity index 100%
rename from services/web/src/app/settings/cards/update-nickname-card.tsx
rename to services/web/src/app/settings/update-nickname-card.tsx
diff --git a/services/web/src/app/settings/cards/update-password-card.tsx b/services/web/src/app/settings/update-password-card.tsx
similarity index 100%
rename from services/web/src/app/settings/cards/update-password-card.tsx
rename to services/web/src/app/settings/update-password-card.tsx
diff --git a/services/web/src/app/settings/cards/update-whatsapp-card.tsx b/services/web/src/app/settings/update-whatsapp-card.tsx
similarity index 95%
rename from services/web/src/app/settings/cards/update-whatsapp-card.tsx
rename to services/web/src/app/settings/update-whatsapp-card.tsx
index a14032eb..8a12c4ca 100644
--- a/services/web/src/app/settings/cards/update-whatsapp-card.tsx
+++ b/services/web/src/app/settings/update-whatsapp-card.tsx
@@ -14,7 +14,7 @@ import { useToast } from "@/components/ui/use-toast";
 import type { DetailedAccount } from "@/types";
 import { clientRequester } from "@/utils/requester/client";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { Loader2Icon, SendIcon } from "lucide-react";
+import { Loader2Icon, SaveIcon } from "lucide-react";
 import type { FormEvent } from "react";
 import * as v from "valibot";
 
@@ -106,9 +106,9 @@ export function UpdateWhatsappCard({
             {isPending ? (
               <Loader2Icon className="size-4 mr-2 animate-spin" />
             ) : (
-              <SendIcon className="size-4 mr-2" />
+              <SaveIcon className="size-4 mr-2" />
             )}
-            Send verification code
+            Save
           </Button>
         </CardFooter>
       </form>
diff --git a/services/web/src/app/wishlist/page.tsx b/services/web/src/app/wishlist/page.tsx
index 79be84ab..8d14c262 100644
--- a/services/web/src/app/wishlist/page.tsx
+++ b/services/web/src/app/wishlist/page.tsx
@@ -1,4 +1,3 @@
-import { PageTitle } from "@/components/framework";
 import { prefetchMe, prefetchWishlist } from "@/prefetchers";
 import type { Metadata } from "next";
 import { redirect } from "next/navigation";
@@ -21,16 +20,7 @@ export default async function WishlistPage() {
     redirect(`/error?message=${pageError.message}`);
   }
 
-  return (
-    <>
-      <PageTitle
-        title="My Wishlist"
-        description="Here are the items you wanted"
-        className="mb-8"
-      />
-      <WishList firstPage={page} me={me} />
-    </>
-  );
+  return <WishList firstPage={page} me={me} />;
 }
 
 export const metadata: Metadata = {
diff --git a/services/web/src/app/wishlist/wishlist.tsx b/services/web/src/app/wishlist/wishlist.tsx
index 5ba6b353..ee4731a3 100644
--- a/services/web/src/app/wishlist/wishlist.tsx
+++ b/services/web/src/app/wishlist/wishlist.tsx
@@ -17,7 +17,7 @@ export function WishList({ firstPage, me }: Props) {
     queryKey: ["wishlist"],
     queryFn: async ({ pageParam: cursor }) => {
       const searchParams = new URLSearchParams({
-        limit: "8",
+        limit: "10",
         ...(cursor && { cursor }),
       });
 
diff --git a/services/web/src/components/framework/header.tsx b/services/web/src/components/framework/header.tsx
deleted file mode 100644
index 94e88a53..00000000
--- a/services/web/src/components/framework/header.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { MenuIcon } from "lucide-react";
-import { Button } from "../ui/button";
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from "../ui/sheet";
-import { Logo } from "./logo";
-import { MeCard } from "./me-card";
-import { Nav } from "./nav";
-import { ThemeToggle } from "./theme-toggle";
-
-export function Header() {
-  return (
-    <header className="fixed top-0 inset-x-0 flex justify-center items-center py-2 border-b bg-background z-20">
-      <Logo />
-      <Sheet>
-        <SheetTrigger asChild>
-          <Button variant="ghost" size="icon" className="absolute left-2">
-            <MenuIcon className="size-5" />
-            <span className="sr-only">Toggle navigation menu</span>
-          </Button>
-        </SheetTrigger>
-        <SheetContent side="left" className="flex flex-col border-r">
-          <SheetHeader className="hidden">
-            <SheetTitle>Navigation menu</SheetTitle>
-            <SheetDescription>
-              Navigation menu on mobile screen
-            </SheetDescription>
-          </SheetHeader>
-          <Logo />
-          <Nav />
-          <ThemeToggle />
-          <MeCard />
-        </SheetContent>
-      </Sheet>
-    </header>
-  );
-}
diff --git a/services/web/src/components/framework/index.ts b/services/web/src/components/framework/index.ts
deleted file mode 100644
index 8407297a..00000000
--- a/services/web/src/components/framework/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { Header } from "./header";
-export { PageTitle } from "./page-title";
-export { Sidebar } from "./sidebar";
diff --git a/services/web/src/components/framework/logo.tsx b/services/web/src/components/framework/logo.tsx
deleted file mode 100644
index fa986b46..00000000
--- a/services/web/src/components/framework/logo.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import Image from "next/image";
-import Link from "next/link";
-
-export function Logo() {
-  return (
-    <Link href="/" className="flex items-center gap-3 px-3 py-2 font-semibold">
-      <Image
-        src="/icon.svg"
-        alt="Logo"
-        width={24}
-        height={24}
-        className="size-6"
-      />
-      <span>NSHM</span>
-    </Link>
-  );
-}
diff --git a/services/web/src/components/framework/me-card/index.ts b/services/web/src/components/framework/me-card/index.ts
deleted file mode 100644
index 5ca6356d..00000000
--- a/services/web/src/components/framework/me-card/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { MeCardServer as MeCard } from "./me-card-server";
diff --git a/services/web/src/components/framework/me-card/loading-card.tsx b/services/web/src/components/framework/me-card/loading-card.tsx
deleted file mode 100644
index fded5c94..00000000
--- a/services/web/src/components/framework/me-card/loading-card.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Skeleton } from "@/components/ui/skeleton";
-
-export function LoadingCard() {
-  return (
-    <div className="flex items-center gap-3 px-4 py-3 border rounded-lg md:mt-4 bg-card">
-      <Skeleton className="size-8 lg:size-10 rounded-full" />
-      <div className="grow space-y-1">
-        <Skeleton className="w-1/2 h-4 lg:h-5" />
-        <Skeleton className="h-4 lg:h-5" />
-      </div>
-    </div>
-  );
-}
diff --git a/services/web/src/components/framework/me-card/me-card-client.tsx b/services/web/src/components/framework/me-card/me-card-client.tsx
deleted file mode 100644
index fcdd779c..00000000
--- a/services/web/src/components/framework/me-card/me-card-client.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-"use client";
-
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { useMe } from "@/hooks/use-me";
-import { SettingsIcon } from "lucide-react";
-import Link from "next/link";
-import type { ReactNode } from "react";
-import { LogOutButton } from "./log-out-button";
-
-type Props = {
-  loadingFallback: ReactNode;
-  noAuthFallback: ReactNode;
-};
-
-export function MeCardClient({ loadingFallback, noAuthFallback }: Props) {
-  const { data: me, isLoading } = useMe();
-
-  if (isLoading) {
-    return loadingFallback;
-  }
-
-  if (!me) {
-    return noAuthFallback;
-  }
-
-  const nickname = me.nickname ?? me.email.replace("@u.nus.edu", "");
-
-  return (
-    <div className="relative flex items-center gap-3 px-4 py-3 border rounded-lg md:mt-4 bg-card hover:bg-secondary transition-colors">
-      <Avatar className="size-8 lg:size-10">
-        <AvatarImage src={me.avatar_url ?? undefined} alt="Your avatar" />
-        <AvatarFallback>{nickname[0]}</AvatarFallback>
-      </Avatar>
-      <div className="grow">
-        <p className="font-medium text-sm lg:text-base">{nickname}</p>
-        <p className="max-w-32 lg:max-w-40 text-xs lg:text-sm text-muted-foreground overflow-hidden whitespace-nowrap text-ellipsis">
-          {me.email}
-        </p>
-      </div>
-      <DropdownMenu>
-        <DropdownMenuTrigger className="absolute inset-0">
-          <span className="sr-only">Open user menu</span>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuLabel>My Account</DropdownMenuLabel>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem asChild>
-            <Link href="/settings">
-              <SettingsIcon className="size-4 mr-2" />
-              Settings
-            </Link>
-          </DropdownMenuItem>
-          <LogOutButton />
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  );
-}
diff --git a/services/web/src/components/framework/me-card/me-card-server.tsx b/services/web/src/components/framework/me-card/me-card-server.tsx
deleted file mode 100644
index 76e7f3ca..00000000
--- a/services/web/src/components/framework/me-card/me-card-server.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { JoinNowCard } from "./join-now-card";
-import { LoadingCard } from "./loading-card";
-import { MeCardClient } from "./me-card-client";
-
-export async function MeCardServer() {
-  return (
-    <MeCardClient
-      loadingFallback={<LoadingCard />}
-      noAuthFallback={<JoinNowCard />}
-    />
-  );
-}
diff --git a/services/web/src/components/framework/nav-link.tsx b/services/web/src/components/framework/nav-link.tsx
deleted file mode 100644
index 3bae4d4f..00000000
--- a/services/web/src/components/framework/nav-link.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client";
-
-import type { Route } from "next";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import type { PropsWithChildren } from "react";
-import { cn } from "../ui/utils";
-
-type Props = PropsWithChildren<{
-  href: Route;
-}>;
-
-export function NavLink({ children, href }: Props) {
-  const pathname = usePathname();
-
-  const isActive = href === "/" ? pathname === href : pathname.startsWith(href);
-
-  return (
-    <Link
-      href={href}
-      className={cn(
-        "flex items-center gap-3 px-3 py-2 rounded-lg font-medium text-sm transition-colors",
-        isActive
-          ? "bg-muted text-primary"
-          : "text-muted-foreground hover:text-primary",
-      )}
-    >
-      {children}
-    </Link>
-  );
-}
diff --git a/services/web/src/components/framework/nav.tsx b/services/web/src/components/framework/nav.tsx
deleted file mode 100644
index 5f1a3010..00000000
--- a/services/web/src/components/framework/nav.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import {
-  HeartIcon,
-  PackageIcon,
-  SearchIcon,
-  ShoppingBagIcon,
-} from "lucide-react";
-import { NavLink } from "./nav-link";
-
-export function Nav() {
-  return (
-    <nav className="grow flex flex-col gap-0.5 lg:gap-1 py-3 lg:py-4">
-      <NavLink href="/">
-        <ShoppingBagIcon className="size-4" />
-        Marketplace
-      </NavLink>
-      <NavLink href="/search">
-        <SearchIcon className="size-4" />
-        Search
-      </NavLink>
-      <NavLink href="/wishlist">
-        <HeartIcon className="size-4" />
-        My wishlist
-      </NavLink>
-      <NavLink href="/belongings">
-        <PackageIcon className="size-4" />
-        My belongings
-      </NavLink>
-    </nav>
-  );
-}
diff --git a/services/web/src/components/framework/page-title.tsx b/services/web/src/components/framework/page-title.tsx
deleted file mode 100644
index 5f017dc9..00000000
--- a/services/web/src/components/framework/page-title.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { cn } from "../ui/utils";
-
-type Props = {
-  title: string;
-  description?: string;
-  className?: string;
-};
-
-export function PageTitle({ title, description, className }: Props) {
-  return (
-    <div className={cn("space-y-4", className)}>
-      <h1 className="font-bold text-3xl">{title}</h1>
-      {description && <p className="text-muted-foreground">{description}</p>}
-    </div>
-  );
-}
diff --git a/services/web/src/components/framework/sidebar.tsx b/services/web/src/components/framework/sidebar.tsx
deleted file mode 100644
index 4291e091..00000000
--- a/services/web/src/components/framework/sidebar.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Logo } from "./logo";
-import { MeCard } from "./me-card";
-import { Nav } from "./nav";
-import { ThemeToggle } from "./theme-toggle";
-
-export function Sidebar() {
-  return (
-    <aside className="fixed left-0 inset-y-0 w-56 lg:w-72 flex flex-col p-2 lg:p-4 border-r bg-muted/40 z-10">
-      <div className="pb-1 lg:pb-3 border-b">
-        <Logo />
-      </div>
-      <Nav />
-      <ThemeToggle />
-      <MeCard />
-    </aside>
-  );
-}
diff --git a/services/web/src/components/framework/theme-toggle.tsx b/services/web/src/components/framework/theme-toggle.tsx
deleted file mode 100644
index 3b79a800..00000000
--- a/services/web/src/components/framework/theme-toggle.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-"use client";
-
-import { MoonIcon, SunIcon } from "lucide-react";
-
-export function ThemeToggle() {
-  return (
-    <button
-      type="button"
-      onClick={toggleTheme}
-      className="flex items-center gap-3 px-3 py-2 rounded-lg font-medium text-sm text-muted-foreground hover:text-primary transition-colors"
-    >
-      <SunIcon className="hidden dark:block size-4" />
-      <MoonIcon className="dark:hidden size-4" />
-      <span>Toggle theme</span>
-    </button>
-  );
-}
-
-function toggleTheme() {
-  const isNowDark = document.documentElement.classList.toggle("dark");
-
-  localStorage.setItem("theme", isNowDark ? "dark" : "light");
-
-  document.documentElement.classList.add("disable-transitions");
-  setTimeout(() => {
-    document.documentElement.classList.remove("disable-transitions");
-  }, 1);
-}
diff --git a/services/web/src/components/item/card/card.tsx b/services/web/src/components/item/card.tsx
similarity index 98%
rename from services/web/src/components/item/card/card.tsx
rename to services/web/src/components/item/card.tsx
index 8d1c550f..302df37e 100644
--- a/services/web/src/components/item/card/card.tsx
+++ b/services/web/src/components/item/card.tsx
@@ -3,7 +3,7 @@ import { Card } from "@/components/ui/card";
 import { ItemType, type Item } from "@/types";
 import { BoxesIcon } from "lucide-react";
 import Link from "next/link";
-import { FromNow } from "../from-now";
+import { FromNow } from "./from-now";
 import { Cover } from "./cover";
 import { StatusBadge } from "./status-badge";
 
diff --git a/services/web/src/components/item/card/index.ts b/services/web/src/components/item/card/index.ts
deleted file mode 100644
index b376d3b5..00000000
--- a/services/web/src/components/item/card/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { ItemCard } from "./card";
diff --git a/services/web/src/components/item/card/cover.tsx b/services/web/src/components/item/cover.tsx
similarity index 85%
rename from services/web/src/components/item/card/cover.tsx
rename to services/web/src/components/item/cover.tsx
index 1dace5da..d24502f6 100644
--- a/services/web/src/components/item/card/cover.tsx
+++ b/services/web/src/components/item/cover.tsx
@@ -21,7 +21,7 @@ export function Cover({ photoUrls }: Props) {
         src={photoUrls[0]}
         alt="A preview photo of this second-hand item"
         fill
-        sizes="100vw, (min-width: 480px) 50vw, (min-width: 1280px) 33vw, (min-width: 1536px) 25vw"
+        sizes="100vw, (min-width: 540px) 50vw, (min-width: 720px) 33vw, (min-width: 768px) 50vw, (min-width: 1024px) 33vw, (min-width: 1280px) 25vw, (min-width: 1536px) 20vw"
         className="object-contain"
       />
       {photoUrls.length >= 2 && (
diff --git a/services/web/src/components/item/details/index.ts b/services/web/src/components/item/details/index.ts
deleted file mode 100644
index 1acab227..00000000
--- a/services/web/src/components/item/details/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { ItemDetails } from "./item-details";
diff --git a/services/web/src/components/item/grid.tsx b/services/web/src/components/item/grid.tsx
index 4864fdd2..f334c626 100644
--- a/services/web/src/components/item/grid.tsx
+++ b/services/web/src/components/item/grid.tsx
@@ -7,7 +7,7 @@ type Props = {
 
 export function ItemGrid({ items }: Props) {
   return (
-    <ul className="grid min-[480px]:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-x-4 gap-y-6">
+    <ul className="grid min-[540px]:grid-cols-2 min-[720px]:grid-cols-3 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-x-4 gap-y-6">
       {items.map((item) => (
         <ItemCard key={item.id} item={item} />
       ))}
diff --git a/services/web/src/components/item/publish/index.ts b/services/web/src/components/item/publish/index.ts
deleted file mode 100644
index 2324585c..00000000
--- a/services/web/src/components/item/publish/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { PublishItemDialog } from "./publish-item-dialog";
diff --git a/services/web/src/components/item/publish/publish-item-dialog.tsx b/services/web/src/components/item/publish/publish-item-dialog.tsx
deleted file mode 100644
index 3b21d0c7..00000000
--- a/services/web/src/components/item/publish/publish-item-dialog.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { PlusIcon } from "lucide-react";
-import { useState } from "react";
-import { PublishItemForm } from "./publish-item-form";
-
-export function PublishItemDialog() {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <Dialog open={isOpen} onOpenChange={setIsOpen}>
-      <DialogTrigger asChild>
-        <Button>
-          <PlusIcon className="size-4 mr-2" />
-          Publish
-        </Button>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Publish an item</DialogTitle>
-          <DialogDescription>
-            Got something you no longer need? Publish it here and let others
-            know!
-          </DialogDescription>
-        </DialogHeader>
-        <PublishItemForm closeDialog={() => setIsOpen(false)} />
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/services/web/src/components/item/card/status-badge.tsx b/services/web/src/components/item/status-badge.tsx
similarity index 91%
rename from services/web/src/components/item/card/status-badge.tsx
rename to services/web/src/components/item/status-badge.tsx
index 7ab599aa..fb12ac03 100644
--- a/services/web/src/components/item/card/status-badge.tsx
+++ b/services/web/src/components/item/status-badge.tsx
@@ -1,5 +1,5 @@
 import { ItemStatus } from "@/types";
-import { Badge } from "../../ui/badge";
+import { Badge } from "../ui/badge";
 
 type Props = {
   status: ItemStatus;
diff --git a/services/web/src/components/layout/header.tsx b/services/web/src/components/layout/header.tsx
new file mode 100644
index 00000000..919f39eb
--- /dev/null
+++ b/services/web/src/components/layout/header.tsx
@@ -0,0 +1,13 @@
+import { Separator } from "../ui/separator";
+import { SidebarTrigger } from "../ui/sidebar";
+import { PageTitle } from "./page-title";
+
+export function Header() {
+  return (
+    <header className="flex items-center p-6">
+      <SidebarTrigger className="size-4 mr-3" />
+      <Separator orientation="vertical" className="mr-4" />
+      <PageTitle />
+    </header>
+  );
+}
diff --git a/services/web/src/components/layout/index.ts b/services/web/src/components/layout/index.ts
new file mode 100644
index 00000000..322a9212
--- /dev/null
+++ b/services/web/src/components/layout/index.ts
@@ -0,0 +1,2 @@
+export { Header } from "./header";
+export { AppSidebar as Sidebar } from "./sidebar";
diff --git a/services/web/src/components/layout/me-card/index.ts b/services/web/src/components/layout/me-card/index.ts
new file mode 100644
index 00000000..7d677e22
--- /dev/null
+++ b/services/web/src/components/layout/me-card/index.ts
@@ -0,0 +1 @@
+export { MeCardServer as MeCard } from "./me-card.server";
diff --git a/services/web/src/components/framework/me-card/join-now-card.tsx b/services/web/src/components/layout/me-card/join-now-card.tsx
similarity index 83%
rename from services/web/src/components/framework/me-card/join-now-card.tsx
rename to services/web/src/components/layout/me-card/join-now-card.tsx
index 750ed2a3..22c78fc4 100644
--- a/services/web/src/components/framework/me-card/join-now-card.tsx
+++ b/services/web/src/components/layout/me-card/join-now-card.tsx
@@ -11,14 +11,14 @@ import Link from "next/link";
 
 export function JoinNowCard() {
   return (
-    <Card className="md:mt-4">
-      <CardHeader>
-        <CardTitle>Join now 🤝</CardTitle>
+    <Card>
+      <CardHeader className="space-y-1 p-4">
+        <CardTitle className="text-lg">🤝 Join us now!</CardTitle>
         <CardDescription>
           Find your counterparty, and communicate efficiently.
         </CardDescription>
       </CardHeader>
-      <CardContent className="space-y-2">
+      <CardContent className="space-y-2 p-4 pt-0">
         <Button variant="secondary" size="sm" className="w-full" asChild>
           <Link href="/login">
             <LogInIcon className="size-4 mr-2" />
diff --git a/services/web/src/components/framework/me-card/log-out-button.tsx b/services/web/src/components/layout/me-card/log-out-button.tsx
similarity index 80%
rename from services/web/src/components/framework/me-card/log-out-button.tsx
rename to services/web/src/components/layout/me-card/log-out-button.tsx
index e76fc41b..a70b1cda 100644
--- a/services/web/src/components/framework/me-card/log-out-button.tsx
+++ b/services/web/src/components/layout/me-card/log-out-button.tsx
@@ -6,7 +6,6 @@ import { clientRequester } from "@/utils/requester/client";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { Loader2Icon, LogOutIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
-import type { MouseEvent } from "react";
 
 export function LogOutButton() {
   const router = useRouter();
@@ -16,17 +15,13 @@ export function LogOutButton() {
   const queryClient = useQueryClient();
 
   const { mutate, isPending } = useMutation({
-    mutationFn: async (event: MouseEvent<HTMLButtonElement>) => {
-      event.preventDefault();
+    mutationFn: async () => {
       return await clientRequester.delete<undefined>("/auth/token");
     },
     onSuccess: () => {
       queryClient.setQueryData(["auth", "me"], null);
 
-      toast({
-        title: "Logged out successfully",
-        description: "Hope to see you again soon! 👋",
-      });
+      toast({ description: "Hope to see you again soon! 👋" });
 
       router.push("/login");
       router.refresh();
@@ -34,7 +29,6 @@ export function LogOutButton() {
     onError: (error) => {
       toast({
         variant: "destructive",
-        title: "Failed to log out",
         description: error.message,
       });
     },
@@ -45,7 +39,7 @@ export function LogOutButton() {
       <button
         type="button"
         disabled={isPending}
-        onClick={mutate}
+        onClick={() => mutate()}
         className="w-full"
       >
         {isPending ? (
diff --git a/services/web/src/components/layout/me-card/me-card.client.tsx b/services/web/src/components/layout/me-card/me-card.client.tsx
new file mode 100644
index 00000000..1929ab41
--- /dev/null
+++ b/services/web/src/components/layout/me-card/me-card.client.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { SidebarMenuButton } from "@/components/ui/sidebar";
+import { useMe } from "@/hooks/use-me";
+import type { DetailedAccount } from "@/types";
+import type { ReactNode } from "react";
+import { LogOutButton } from "./log-out-button";
+
+type Props = {
+  initialMe: DetailedAccount;
+  noAuthFallback: ReactNode;
+};
+
+export function MeCardClient({ initialMe, noAuthFallback }: Props) {
+  const { data: me } = useMe(initialMe);
+
+  if (!me) {
+    return noAuthFallback;
+  }
+
+  const nickname = me.nickname ?? me.email.replace(/@.+$/, "");
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <SidebarMenuButton size="lg">
+          <Avatar className="size-8">
+            <AvatarImage src={me.avatar_url ?? undefined} alt="Your avatar" />
+            <AvatarFallback>{nickname[0]}</AvatarFallback>
+          </Avatar>
+          <div className="grow">
+            <p className="font-medium text-sm truncate">{nickname}</p>
+            <p className="text-xs text-muted-foreground truncate">{me.email}</p>
+          </div>
+        </SidebarMenuButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="min-w-60">
+        <DropdownMenuLabel>Hi, {nickname}! 👋</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <LogOutButton />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/services/web/src/components/layout/me-card/me-card.server.tsx b/services/web/src/components/layout/me-card/me-card.server.tsx
new file mode 100644
index 00000000..3bfa1c55
--- /dev/null
+++ b/services/web/src/components/layout/me-card/me-card.server.tsx
@@ -0,0 +1,22 @@
+import { SidebarMenuItem } from "@/components/ui/sidebar";
+import { prefetchMe } from "@/prefetchers";
+import { JoinNowCard } from "./join-now-card";
+import { MeCardClient } from "./me-card.client";
+
+export async function MeCardServer() {
+  const { data: me, error: meError } = await prefetchMe();
+
+  if (meError) {
+    return (
+      <SidebarMenuItem>
+        <JoinNowCard />
+      </SidebarMenuItem>
+    );
+  }
+
+  return (
+    <SidebarMenuItem>
+      <MeCardClient initialMe={me} noAuthFallback={<JoinNowCard />} />
+    </SidebarMenuItem>
+  );
+}
diff --git a/services/web/src/components/layout/nav-link.tsx b/services/web/src/components/layout/nav-link.tsx
new file mode 100644
index 00000000..42ac2435
--- /dev/null
+++ b/services/web/src/components/layout/nav-link.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import { Collapsible } from "@radix-ui/react-collapsible";
+import { ChevronRightIcon } from "lucide-react";
+import type { Route } from "next";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import type { ReactNode } from "react";
+import { CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible";
+import {
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "../ui/sidebar";
+
+type Props = {
+  icon: ReactNode;
+  title: string;
+  to: Route;
+  subLinks?: {
+    title: string;
+    to: Route;
+  }[];
+};
+
+export function NavLink({ icon, title, to, subLinks }: Props) {
+  const pathname = usePathname();
+
+  const isActive = to === "/" ? pathname === to : pathname.startsWith(to);
+
+  if (!subLinks) {
+    return (
+      <SidebarMenuItem>
+        <SidebarMenuButton isActive={isActive} tooltip={title} asChild>
+          <Link href={to}>
+            {icon}
+            <span>{title}</span>
+          </Link>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    );
+  }
+
+  return (
+    <Collapsible defaultOpen={isActive} asChild>
+      <SidebarMenuItem>
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton tooltip={title}>
+            {icon}
+            <span>{title}</span>
+            <ChevronRightIcon className="absolute right-1 size-4 group-data-[state=open]/menu-item:rotate-90 transition-transform" />
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            {subLinks.map(({ title, to }) => (
+              <SidebarMenuSubItem key={to}>
+                <SidebarMenuSubButton isActive={to === pathname} asChild>
+                  <Link href={to}>
+                    <span>{title}</span>
+                  </Link>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  );
+}
diff --git a/services/web/src/components/layout/page-title.tsx b/services/web/src/components/layout/page-title.tsx
new file mode 100644
index 00000000..89b77198
--- /dev/null
+++ b/services/web/src/components/layout/page-title.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
+
+export function PageTitle() {
+  const pathname = usePathname();
+
+  const [title, setTitle] = useState("");
+
+  useEffect(() => {
+    setTitle(document.title.replace(" | NUS Second-Hand Market", ""));
+  }, [pathname]);
+
+  return <h1>{title}</h1>;
+}
diff --git a/services/web/src/components/layout/sidebar.tsx b/services/web/src/components/layout/sidebar.tsx
new file mode 100644
index 00000000..4cdf510b
--- /dev/null
+++ b/services/web/src/components/layout/sidebar.tsx
@@ -0,0 +1,85 @@
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar";
+import {
+  HeartIcon,
+  PackageIcon,
+  SearchIcon,
+  SettingsIcon,
+  ShoppingBagIcon,
+} from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { MeCard } from "./me-card";
+import { NavLink } from "./nav-link";
+import { ThemeToggle } from "./theme-toggle";
+
+export function AppSidebar() {
+  return (
+    <Sidebar>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" className="gap-3" asChild>
+              <Link href="/">
+                <Image
+                  src="/icon.svg"
+                  alt="Logo"
+                  width={24}
+                  height={24}
+                  className="size-6"
+                />
+                <span className="font-semibold text-base">NSHM</span>
+              </Link>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <NavLink icon={<ShoppingBagIcon />} title="Marketplace" to="/" />
+              <NavLink icon={<SearchIcon />} title="Search" to="/search" />
+              <NavLink icon={<HeartIcon />} title="Wishlist" to="/wishlist" />
+              <NavLink
+                icon={<PackageIcon />}
+                title="Belongings"
+                to="/belongings"
+                subLinks={[
+                  { title: "My Items", to: "/belongings" },
+                  { title: "Publish New Item", to: "/belongings/publish" },
+                ]}
+              />
+              <NavLink
+                icon={<SettingsIcon />}
+                title="Settings"
+                to="/settings"
+              />
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+        <SidebarGroup className="mt-auto">
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <ThemeToggle />
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarFooter>
+        <SidebarMenu>
+          <MeCard />
+        </SidebarMenu>
+      </SidebarFooter>
+    </Sidebar>
+  );
+}
diff --git a/services/web/src/components/layout/theme-toggle.tsx b/services/web/src/components/layout/theme-toggle.tsx
new file mode 100644
index 00000000..74b0e35b
--- /dev/null
+++ b/services/web/src/components/layout/theme-toggle.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { MoonIcon, SunIcon } from "lucide-react";
+import { SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar";
+
+export function ThemeToggle() {
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton onClick={handleClick}>
+        <SunIcon className="hidden dark:block" />
+        <MoonIcon className="dark:hidden" />
+        <span>Toggle theme</span>
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  );
+}
+
+function handleClick() {
+  const isDark = document.documentElement.classList.toggle("dark");
+
+  localStorage.setItem("theme", isDark ? "dark" : "light");
+
+  document.documentElement.classList.add("disable-transitions");
+  setTimeout(() => {
+    document.documentElement.classList.remove("disable-transitions");
+  }, 1);
+}
diff --git a/services/web/src/components/ui/breadcrumb.tsx b/services/web/src/components/ui/breadcrumb.tsx
new file mode 100644
index 00000000..d6cb6643
--- /dev/null
+++ b/services/web/src/components/ui/breadcrumb.tsx
@@ -0,0 +1,115 @@
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "./utils";
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode;
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = "Breadcrumb";
+
+const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+      className,
+    )}
+    {...props}
+  />
+));
+BreadcrumbList.displayName = "BreadcrumbList";
+
+const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn("inline-flex items-center gap-1.5", className)}
+    {...props}
+  />
+));
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean;
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  );
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("font-normal text-foreground", className)}
+    {...props}
+  />
+));
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
+    {...props}
+  >
+    {children ?? <ChevronRight />}
+  </li>
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+};
diff --git a/services/web/src/components/ui/collapsible.tsx b/services/web/src/components/ui/collapsible.tsx
new file mode 100644
index 00000000..1fe76f5d
--- /dev/null
+++ b/services/web/src/components/ui/collapsible.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };
diff --git a/services/web/src/components/ui/separator.tsx b/services/web/src/components/ui/separator.tsx
new file mode 100644
index 00000000..f6931487
--- /dev/null
+++ b/services/web/src/components/ui/separator.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as React from "react";
+
+import { cn } from "./utils";
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref,
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
diff --git a/services/web/src/components/ui/sidebar.tsx b/services/web/src/components/ui/sidebar.tsx
new file mode 100644
index 00000000..99151d87
--- /dev/null
+++ b/services/web/src/components/ui/sidebar.tsx
@@ -0,0 +1,772 @@
+"use client";
+
+import { Slot } from "@radix-ui/react-slot";
+import { type VariantProps, cva } from "class-variance-authority";
+import { PanelLeft } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Sheet, SheetContent } from "@/components/ui/sheet";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import { Separator } from "./separator";
+import { cn } from "./utils";
+
+const SIDEBAR_COOKIE_NAME = "sidebar:state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+type SidebarContext = {
+  state: "expanded" | "collapsed";
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext<SidebarContext | null>(null);
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a Sidebar.");
+  }
+
+  return context;
+}
+
+const SidebarProvider = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+  }
+>(
+  (
+    {
+      defaultOpen = true,
+      open: openProp,
+      onOpenChange: setOpenProp,
+      className,
+      style,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const isMobile = useIsMobile();
+    const [openMobile, setOpenMobile] = React.useState(false);
+
+    // This is the internal state of the sidebar.
+    // We use openProp and setOpenProp for control from outside the component.
+    const [_open, _setOpen] = React.useState(defaultOpen);
+    const open = openProp ?? _open;
+    const setOpen = React.useCallback(
+      (value: boolean | ((value: boolean) => boolean)) => {
+        if (setOpenProp) {
+          return setOpenProp?.(
+            typeof value === "function" ? value(open) : value,
+          );
+        }
+
+        _setOpen(value);
+
+        // This sets the cookie to keep the sidebar state.
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+      },
+      [setOpenProp, open],
+    );
+
+    // Helper to toggle the sidebar.
+    const toggleSidebar = React.useCallback(() => {
+      return isMobile
+        ? setOpenMobile((open) => !open)
+        : setOpen((open) => !open);
+    }, [isMobile, setOpen, setOpenMobile]);
+
+    // Adds a keyboard shortcut to toggle the sidebar.
+    React.useEffect(() => {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (
+          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+          (event.metaKey || event.ctrlKey)
+        ) {
+          event.preventDefault();
+          toggleSidebar();
+        }
+      };
+
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [toggleSidebar]);
+
+    // We add a state so that we can do data-state="expanded" or "collapsed".
+    // This makes it easier to style the sidebar with Tailwind classes.
+    const state = open ? "expanded" : "collapsed";
+
+    const contextValue = React.useMemo<SidebarContext>(
+      () => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+      }),
+      [
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+      ],
+    );
+
+    return (
+      <SidebarContext.Provider value={contextValue}>
+        <TooltipProvider delayDuration={0}>
+          <div
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH,
+                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+                ...style,
+              } as React.CSSProperties
+            }
+            className={cn(
+              "group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar",
+              className,
+            )}
+            ref={ref}
+            {...props}
+          >
+            {children}
+          </div>
+        </TooltipProvider>
+      </SidebarContext.Provider>
+    );
+  },
+);
+SidebarProvider.displayName = "SidebarProvider";
+
+const Sidebar = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    side?: "left" | "right";
+    variant?: "sidebar" | "floating" | "inset";
+    collapsible?: "offcanvas" | "icon" | "none";
+  }
+>(
+  (
+    {
+      side = "left",
+      variant = "sidebar",
+      collapsible = "offcanvas",
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+    if (collapsible === "none") {
+      return (
+        <div
+          className={cn(
+            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
+            className,
+          )}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </div>
+      );
+    }
+
+    if (isMobile) {
+      return (
+        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+          <SheetContent
+            data-sidebar="sidebar"
+            data-mobile="true"
+            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+              } as React.CSSProperties
+            }
+            side={side}
+          >
+            <div className="flex h-full w-full flex-col">{children}</div>
+          </SheetContent>
+        </Sheet>
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        className="group peer hidden md:block"
+        data-state={state}
+        data-collapsible={state === "collapsed" ? collapsible : ""}
+        data-variant={variant}
+        data-side={side}
+      >
+        {/* This is what handles the sidebar gap on desktop */}
+        <div
+          className={cn(
+            "duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
+            "group-data-[collapsible=offcanvas]:w-0",
+            "group-data-[side=right]:rotate-180",
+            variant === "floating" || variant === "inset"
+              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
+          )}
+        />
+        <div
+          className={cn(
+            "duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
+            side === "left"
+              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+            // Adjust the padding for floating and inset variants.
+            variant === "floating" || variant === "inset"
+              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+            className,
+          )}
+          {...props}
+        >
+          <div
+            data-sidebar="sidebar"
+            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+Sidebar.displayName = "Sidebar";
+
+const SidebarTrigger = React.forwardRef<
+  React.ElementRef<typeof Button>,
+  React.ComponentProps<typeof Button>
+>(({ className, onClick, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <Button
+      ref={ref}
+      data-sidebar="trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("h-7 w-7", className)}
+      onClick={(event) => {
+        onClick?.(event);
+        toggleSidebar();
+      }}
+      {...props}
+    >
+      <PanelLeft />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  );
+});
+SidebarTrigger.displayName = "SidebarTrigger";
+
+const SidebarRail = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button">
+>(({ className, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <button
+      ref={ref}
+      data-sidebar="rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarRail.displayName = "SidebarRail";
+
+const SidebarInset = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"main">
+>(({ className, ...props }, ref) => {
+  return (
+    <main
+      ref={ref}
+      className={cn(
+        "relative flex min-h-svh flex-1 flex-col bg-background",
+        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarInset.displayName = "SidebarInset";
+
+const SidebarInput = React.forwardRef<
+  React.ElementRef<typeof Input>,
+  React.ComponentProps<typeof Input>
+>(({ className, ...props }, ref) => {
+  return (
+    <Input
+      ref={ref}
+      data-sidebar="input"
+      className={cn(
+        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarInput.displayName = "SidebarInput";
+
+const SidebarHeader = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  );
+});
+SidebarHeader.displayName = "SidebarHeader";
+
+const SidebarFooter = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  );
+});
+SidebarFooter.displayName = "SidebarFooter";
+
+const SidebarSeparator = React.forwardRef<
+  React.ElementRef<typeof Separator>,
+  React.ComponentProps<typeof Separator>
+>(({ className, ...props }, ref) => {
+  return (
+    <Separator
+      ref={ref}
+      data-sidebar="separator"
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      {...props}
+    />
+  );
+});
+SidebarSeparator.displayName = "SidebarSeparator";
+
+const SidebarContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarContent.displayName = "SidebarContent";
+
+const SidebarGroup = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  );
+});
+SidebarGroup.displayName = "SidebarGroup";
+
+const SidebarGroupLabel = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-label"
+      className={cn(
+        "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarGroupLabel.displayName = "SidebarGroupLabel";
+
+const SidebarGroupAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-action"
+      className={cn(
+        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarGroupAction.displayName = "SidebarGroupAction";
+
+const SidebarGroupContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="group-content"
+    className={cn("w-full text-sm", className)}
+    {...props}
+  />
+));
+SidebarGroupContent.displayName = "SidebarGroupContent";
+
+const SidebarMenu = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu"
+    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+    {...props}
+  />
+));
+SidebarMenu.displayName = "SidebarMenu";
+
+const SidebarMenuItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    data-sidebar="menu-item"
+    className={cn("group/menu-item relative", className)}
+    {...props}
+  />
+));
+SidebarMenuItem.displayName = "SidebarMenuItem";
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+const SidebarMenuButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+  } & VariantProps<typeof sidebarMenuButtonVariants>
+>(
+  (
+    {
+      asChild = false,
+      isActive = false,
+      variant = "default",
+      size = "default",
+      tooltip,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : "button";
+    const { isMobile, state } = useSidebar();
+
+    const button = (
+      <Comp
+        ref={ref}
+        data-sidebar="menu-button"
+        data-size={size}
+        data-active={isActive}
+        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+        {...props}
+      />
+    );
+
+    if (!tooltip) {
+      return button;
+    }
+
+    if (typeof tooltip === "string") {
+      tooltip = {
+        children: tooltip,
+      };
+    }
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent
+          side="right"
+          align="center"
+          hidden={state !== "collapsed" || isMobile}
+          {...tooltip}
+        />
+      </Tooltip>
+    );
+  },
+);
+SidebarMenuButton.displayName = "SidebarMenuButton";
+
+const SidebarMenuAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    showOnHover?: boolean;
+  }
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-action"
+      className={cn(
+        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarMenuAction.displayName = "SidebarMenuAction";
+
+const SidebarMenuBadge = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="menu-badge"
+    className={cn(
+      "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
+      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+      "peer-data-[size=sm]/menu-button:top-1",
+      "peer-data-[size=default]/menu-button:top-1.5",
+      "peer-data-[size=lg]/menu-button:top-2.5",
+      "group-data-[collapsible=icon]:hidden",
+      className,
+    )}
+    {...props}
+  />
+));
+SidebarMenuBadge.displayName = "SidebarMenuBadge";
+
+const SidebarMenuSkeleton = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    showIcon?: boolean;
+  }
+>(({ className, showIcon = false, ...props }, ref) => {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      data-sidebar="menu-skeleton"
+      className={cn("rounded-md h-8 flex gap-2 px-2 items-center", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 flex-1 max-w-[--skeleton-width]"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  );
+});
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
+
+const SidebarMenuSub = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu-sub"
+    className={cn(
+      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
+      "group-data-[collapsible=icon]:hidden",
+      className,
+    )}
+    {...props}
+  />
+));
+SidebarMenuSub.displayName = "SidebarMenuSub";
+
+const SidebarMenuSubItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ ...props }, ref) => <li ref={ref} {...props} />);
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
+
+const SidebarMenuSubButton = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentProps<"a"> & {
+    asChild?: boolean;
+    size?: "sm" | "md";
+    isActive?: boolean;
+  }
+>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:text-primary transition focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        "data-[active=true]:text-primary",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+};
diff --git a/services/web/src/hooks/use-is-mobile.ts b/services/web/src/hooks/use-is-mobile.ts
new file mode 100644
index 00000000..cb930efe
--- /dev/null
+++ b/services/web/src/hooks/use-is-mobile.ts
@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+/**
+ * Whether the current device is a mobile device, determined by screen width.
+ */
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const mql = matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    setIsMobile(mql.matches);
+
+    const handleMediaChange = (event: MediaQueryListEvent) => {
+      setIsMobile(event.matches);
+    };
+    mql.addEventListener("change", handleMediaChange);
+    return () => mql.removeEventListener("change", handleMediaChange);
+  }, []);
+
+  return isMobile;
+}
diff --git a/services/web/src/hooks/use-me.ts b/services/web/src/hooks/use-me.ts
index 2e2e4deb..5dd4965f 100644
--- a/services/web/src/hooks/use-me.ts
+++ b/services/web/src/hooks/use-me.ts
@@ -6,7 +6,7 @@ import { useQuery } from "@tanstack/react-query";
 /**
  * Fetch the current user.
  */
-export function useMe() {
+export function useMe(initialMe?: DetailedAccount) {
   return useQuery({
     queryKey: ["auth", "me"],
     queryFn: async () => {
@@ -19,5 +19,6 @@ export function useMe() {
         throw error;
       }
     },
+    initialData: initialMe,
   });
 }
diff --git a/services/web/src/middleware.ts b/services/web/src/middleware.ts
index 4cf92e35..b211a4fd 100644
--- a/services/web/src/middleware.ts
+++ b/services/web/src/middleware.ts
@@ -1,10 +1,12 @@
-import { type MiddlewareConfig, type NextRequest } from "next/server";
+import type { MiddlewareConfig, NextRequest } from "next/server";
 import { AuthGuard } from "./middleware/auth-guard";
+import { Logger } from "./middleware/logger";
 
 export async function middleware(req: NextRequest) {
-  const authGuard = new AuthGuard();
+  const logger = new Logger();
+  logger.setNext(new AuthGuard());
 
-  return authGuard.handle(req);
+  return logger.handle(req);
 }
 
 export const config: MiddlewareConfig = {
diff --git a/services/web/src/middleware/auth-guard.ts b/services/web/src/middleware/auth-guard.ts
index 6ec9941a..24edeaf9 100644
--- a/services/web/src/middleware/auth-guard.ts
+++ b/services/web/src/middleware/auth-guard.ts
@@ -1,12 +1,21 @@
 import { cookies } from "next/headers";
 import { NextResponse, type NextRequest } from "next/server";
-import { BaseMiddleware } from "./base";
+import { Middleware } from "./base";
+
+/**
+ * Protect certain routes based on the user's authentication status.
+ */
+export class AuthGuard extends Middleware {
+  /**
+   * These routes are accessible only if the user IS authenticated.
+   */
+  private static AUTH_ROUTES = /^\/belongings|^\/wishlist|^\/settings/;
 
-export class AuthGuard extends BaseMiddleware {
+  /**
+   * These routes are accessible only if the user IS NOT authenticated.
+   */
   private static NO_AUTH_ROUTES = /^\/login|^\/register|^\/forgot-password/;
 
-  private static AUTH_ROUTES = /^\/belongings|^\/wishlist|^\/settings/;
-
   public override async handle(req: NextRequest) {
     const isAuthenticated = cookies().has("access_token");
 
@@ -14,7 +23,6 @@ export class AuthGuard extends BaseMiddleware {
 
     if (isAuthRoute && !isAuthenticated) {
       const redirectUrl = req.nextUrl.clone();
-      redirectUrl.searchParams.set("next", req.nextUrl.pathname);
       redirectUrl.pathname = "/login";
       return NextResponse.redirect(redirectUrl);
     }
diff --git a/services/web/src/middleware/base.ts b/services/web/src/middleware/base.ts
index bed0edfc..91a6b0d8 100644
--- a/services/web/src/middleware/base.ts
+++ b/services/web/src/middleware/base.ts
@@ -1,19 +1,38 @@
 import { NextResponse, type NextRequest } from "next/server";
 
-interface Middleware {
-  setNext: (next: Middleware) => Middleware;
-  handle: (req: NextRequest) => Promise<NextResponse>;
-}
-
-export abstract class BaseMiddleware implements Middleware {
+/**
+ * Base class for all middleware.
+ */
+export abstract class Middleware {
+  /**
+   * The next middleware in the chain.
+   *
+   * Defaults to null, which means this middleware is the last in the chain.
+   */
   private next: Middleware | null = null;
 
-  public setNext(next: Middleware) {
+  /**
+   * Set the next middleware in the chain.
+   *
+   * That next middleware is returned for convenience of method chaining.
+   */
+  public setNext(next: Middleware): Middleware {
     this.next = next;
     return next;
   }
 
-  public async handle(req: NextRequest) {
+  /**
+   * Handle an incoming request.
+   *
+   * Upon completion, the middleware passes the request to the next middleware
+   * in the chain. And if there is no next middleware, it passes the request to
+   * Next.js instead.
+   *
+   * Usually, this method is overridden by subclasses to implement the actual
+   * middleware logic. The actual middleware can decide to directly return a
+   * response without further passing it to anyone.
+   */
+  public async handle(req: NextRequest): Promise<NextResponse> {
     if (this.next) {
       return await this.next.handle(req);
     }
diff --git a/services/web/src/middleware/logger.ts b/services/web/src/middleware/logger.ts
new file mode 100644
index 00000000..0ecf832f
--- /dev/null
+++ b/services/web/src/middleware/logger.ts
@@ -0,0 +1,27 @@
+import type { NextRequest } from "next/server";
+import { Middleware } from "./base";
+
+/**
+ * Log requests and responses in production environment only.
+ */
+export class Logger extends Middleware {
+  public override async handle(req: NextRequest) {
+    if (process.env.NODE_ENV !== "production") {
+      return await super.handle(req);
+    }
+
+    const start = new Date();
+    console.log(
+      `[${start.toISOString()}] <-- ${req.method} ${req.nextUrl.pathname}`,
+    );
+
+    const res = await super.handle(req);
+
+    const end = new Date();
+    console.log(
+      `[${end.toISOString()}] --> ${req.method} ${req.nextUrl.pathname} ${res.status} ${end.getTime() - start.getTime()}ms`,
+    );
+
+    return res;
+  }
+}
diff --git a/services/web/src/prefetchers.ts b/services/web/src/prefetchers.ts
index a7c6326a..6b2ece43 100644
--- a/services/web/src/prefetchers.ts
+++ b/services/web/src/prefetchers.ts
@@ -16,18 +16,18 @@ export const prefetchItem = cache(async (id: string) => {
 });
 
 export const prefetchMarketplace = cache(async () => {
-  return await serverRequester.get<PaginatedItems>("/items?status=0&limit=8");
+  return await serverRequester.get<PaginatedItems>("/items?status=0&limit=10");
 });
 
 export const prefetchBelongings = cache(async (userId: number) => {
   return await serverRequester.get<PaginatedItems>(
-    `/items?seller_id=${userId}&limit=8`,
+    `/items?seller_id=${userId}&limit=10`,
   );
 });
 
 export const prefetchWishlist = cache(async (userId: number) => {
   return await serverRequester.get<PaginatedItems>(
-    `/wishlists/${userId}?limit=8`,
+    `/wishlists/${userId}?limit=10`,
   );
 });
 
diff --git a/services/web/src/utils/logger.ts b/services/web/src/utils/logger.ts
new file mode 100644
index 00000000..aae98f9e
--- /dev/null
+++ b/services/web/src/utils/logger.ts
@@ -0,0 +1,35 @@
+import { createLogger, format, transports } from "winston";
+import "winston-daily-rotate-file";
+
+export const logger =
+  process.env.NODE_ENV === "production"
+    ? createProductionLogger()
+    : createDevelopmentLogger();
+
+function createDevelopmentLogger() {
+  return createLogger({
+    transports: [new transports.Console()],
+    format: format.combine(
+      format.colorize(),
+      format.timestamp({ format: "YYYY-MM-DD HH:mm:ss" }),
+      format.printf(
+        ({ level, message, timestamp }) =>
+          `${timestamp} - ${level} - ${message}`,
+      ),
+    ),
+  });
+}
+
+function createProductionLogger() {
+  return createLogger({
+    transports: [
+      new transports.DailyRotateFile({
+        dirname: "logs",
+        filename: "%DATE%",
+        extension: ".log",
+        maxFiles: "14d",
+      }),
+    ],
+    format: format.combine(format.timestamp(), format.json()),
+  });
+}
diff --git a/services/web/src/utils/requester/http-error.ts b/services/web/src/utils/requester/http-error.ts
index ca635c3d..29195525 100644
--- a/services/web/src/utils/requester/http-error.ts
+++ b/services/web/src/utils/requester/http-error.ts
@@ -1,3 +1,13 @@
+/**
+ * Error indicated in an HTTP response.
+ *
+ * This error does not mean that the HTTP request itself failed -
+ * The request has been sent, and the response has been received,
+ * but the response indicates a 4xx or 5xx error.
+ *
+ * Should the HTTP request itself fail, the error would be thrown
+ * by the `fetch` function, which is of type `Error`.
+ */
 export class HttpError extends Error {
   constructor(
     public readonly status: number,
diff --git a/services/web/src/utils/requester/server.ts b/services/web/src/utils/requester/server.ts
index 4a5811c4..6ce50e04 100644
--- a/services/web/src/utils/requester/server.ts
+++ b/services/web/src/utils/requester/server.ts
@@ -1,8 +1,11 @@
 import { cookies } from "next/headers";
+import { logger } from "../logger";
 import { HttpError } from "./http-error";
 import { createRequester } from "./requester";
 
 async function serverFetch<T>(endpoint: string, init: RequestInit = {}) {
+  logger.http(`server request to ${endpoint}`);
+
   try {
     const url = process.env.API_BASE_URL + endpoint;
 
@@ -12,7 +15,7 @@ async function serverFetch<T>(endpoint: string, init: RequestInit = {}) {
         ...init.headers,
         Cookie: cookies().toString(),
       },
-      signal: AbortSignal.timeout(5000),
+      signal: AbortSignal.timeout(3000),
     });
 
     if (res.status === 204) {
@@ -27,12 +30,17 @@ async function serverFetch<T>(endpoint: string, init: RequestInit = {}) {
 
     return { data: json as T, error: null };
   } catch (error) {
-    console.error("Error when requesting for endpoint:", endpoint);
+    if (error instanceof DOMException && error.name === "TimeoutError") {
+      logger.error(`server request to ${endpoint} timed out`);
+      return { data: null, error: new HttpError(504, "Request timed out") };
+    }
 
     if (error instanceof Error) {
+      logger.error(`server request to ${endpoint} failed: ${error.message}`);
       return { data: null, error: new HttpError(500, error.message) };
     }
 
+    logger.error(`server request to ${endpoint} failed: ${error}`);
     return { data: null, error: new HttpError(500, "Unknown error") };
   }
 }
diff --git a/services/web/tailwind.config.ts b/services/web/tailwind.config.ts
index ecab595e..8a196274 100644
--- a/services/web/tailwind.config.ts
+++ b/services/web/tailwind.config.ts
@@ -52,6 +52,16 @@ const config: Config = {
           "4": "hsl(var(--chart-4))",
           "5": "hsl(var(--chart-5))",
         },
+        sidebar: {
+          DEFAULT: "hsl(var(--sidebar-background))",
+          foreground: "hsl(var(--sidebar-foreground))",
+          primary: "hsl(var(--sidebar-primary))",
+          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+          accent: "hsl(var(--sidebar-accent))",
+          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+          border: "hsl(var(--sidebar-border))",
+          ring: "hsl(var(--sidebar-ring))",
+        },
       },
       borderRadius: {
         lg: "var(--radius)",