diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 7006f255..6a0a3f68 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -46,7 +46,7 @@ start command `task go:run`
 
 start command `task ui:dev`
 
-1. The frontend is a Vue 3 app with Nuxt.js that uses Tailwind and DaisyUI for styling.
+1. The frontend is a Vue 3 app with Nuxt.js that uses Tailwind and Shadcn-vue for styling.
 2. We're using Vitest for our automated testing. You can run these with `task ui:watch`.
 3. Tests require the API server to be running, and in some cases the first run will fail due to a race condition. If this happens, just run the tests again and they should pass.
 
diff --git a/docs/.vitepress/menus/en.mts b/docs/.vitepress/menus/en.mts
index 89ced4f3..e75ce893 100644
--- a/docs/.vitepress/menus/en.mts
+++ b/docs/.vitepress/menus/en.mts
@@ -26,7 +26,7 @@ export default [
         text: 'Contributing',
         items: [
             {text: 'Get Started', link: '/en/contribute/get-started'},
-            {text: 'Switching to Shadcn-vue', link: '/en/contribute/shadcn'},
+            {text: 'Using Shadcn-vue', link: '/en/contribute/shadcn'},
             {text: 'Bounty Program', link: '/en/contribute/bounty'}
         ]
     },
diff --git a/docs/en/contribute/get-started.md b/docs/en/contribute/get-started.md
index 7ac8a0e7..2e309ca3 100644
--- a/docs/en/contribute/get-started.md
+++ b/docs/en/contribute/get-started.md
@@ -37,7 +37,7 @@ swagger update command `task swag`
 
 start command `task ui:dev`
 
-1. The frontend is a Vue 3 app with Nuxt.js that uses Tailwind and DaisyUI for styling.
+1. The frontend is a Vue 3 app with Nuxt.js that uses Tailwind and Shadcn-vue for styling.
 2. We're using Vitest for our automated testing. You can run these with `task ui:watch`.
 3. Tests require the API server to be running, and in some cases the first run will fail due to a race condition. If this happens, just run the tests again and they should pass.
 
diff --git a/docs/en/contribute/shadcn.md b/docs/en/contribute/shadcn.md
index 77154d07..d7454c01 100644
--- a/docs/en/contribute/shadcn.md
+++ b/docs/en/contribute/shadcn.md
@@ -1,6 +1,6 @@
 # Shadcn-Vue
 
-[Shadcn-Vue](https://www.shadcn-vue.com/) is a collection of Vue components based on [shadcn/ui](https://ui.shadcn.com/). We are currently in the process of migrating from DaisyUI to Shadcn-Vue for our component system.
+[Shadcn-Vue](https://www.shadcn-vue.com/) is a collection of Vue components based on [shadcn/ui](https://ui.shadcn.com/). We use Shadcn-Vue for our component system.
 
 ## What is shadcn-vue?
 
@@ -46,15 +46,3 @@ When modifying components, follow these best practices:
 2. When making global changes:
    - Modify the component in the `components/ui` directory
    - Document any significant changes in comments
-
-## Testing without DaisyUI
-
-During the migration process, you can test without DaisyUI using these commands:
-
-```bash
-export DISABLE_DAISYUI=true; task ui:dev
-```
-or
-```bash
-export DISABLE_DAISYUI=true; task ui:fix
-```
diff --git a/frontend/assets/css/main.css b/frontend/assets/css/main.css
index f9953584..49f1a826 100644
--- a/frontend/assets/css/main.css
+++ b/frontend/assets/css/main.css
@@ -4,764 +4,953 @@
 
 @layer base {
   :root,.homebox {
-    --background: 0 0% 100%; /* base 100 */
-    --foreground: 0 0% 20%; /* base content */
-
-    --muted: 0 0% 81%; /* base 300 */
-    --muted-foreground: 0 0% 20%; /* base content */
-
-    --popover: 0 0% 100%; /* base 100 */
-    --popover-foreground: 0 0% 20%; /* base content */
-
-    --card: 0 0% 100%; /* base 100 */
-    --card-foreground: 0 0% 20%; /* base content */
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-
-    --primary: 139 16% 43%;                 /* primary */
-    --primary-foreground: 139 100% 89%;     /* primary text */
-
-    --secondary: 97 37% 93%;                /* secondary */
-    --secondary-foreground: 97 31% 19%;     /* secondary text */
-
-    --accent: 47 100% 67%;                    /* accent */
-    --accent-foreground: 47 100% 13%;        /* accent text */
-
-    --destructive: 0 84.2% 60.2%;           /* error */
-    --destructive-foreground: 210 40% 98%;  /* error text */
-
-    --ring: 222.2 84% 4.9%;
+    --background: 0 0% 100%;
+    --background-accent: 0 0% 81%;
+    --foreground: 0 0% 20%;
+    --primary: 139 16% 43%;
+    --primary-foreground: 139 100% 89%;
+    --secondary: 77 8% 17%;
+    --secondary-foreground: 76 18% 83%;
+    --accent: 97 37% 93%;
+    --accent-foreground: 97 31% 19%;
+    --muted: 0 0% 90%;
+    --muted-foreground: 0 0% 20%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 20%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 20%;
+    --destructive: 0 91% 71%;
+    --destructive-foreground: 0 100% 14%;
+    --input: 0 0% 81%;
+    --border: 0 0% 81%;
+    --ring: 139 16% 43%;
+    --sidebar-background: 0 0% 90%;
+    --sidebar-foreground: 0 0% 20%;
+    --sidebar-primary: 139 16% 43%;
+    --sidebar-primary-foreground: 139 100% 89%;
+    --sidebar-accent: 0 0% 81%;
+    --sidebar-accent-foreground: 0 0% 20%;
+    --sidebar-border: 0 0% 81%;
+    --sidebar-ring: 0 0% 81%;
 
     --radius: 0.5rem;
-
-
-
-    --sidebar-background: var(--background);
-    --sidebar-foreground: var(--foreground);
-    --sidebar-primary: var(--primary);
-    --sidebar-primary-foreground: var(--primary-foreground);
-    --sidebar-accent: var(--accent);
-    --sidebar-accent-foreground: var(--accent-foreground);
-    --sidebar-border: var(--border);
-    --sidebar-ring: var(--ring);
-  }
+}
 
   /*
   * The below themes are based on the daisyUI themes which are licensed under the MIT License.
   * Copyright (c) 2020 Pouya Saadeghi
-  * The  license can be found here https://github.com/saadeghi/daisyui
+  * The  license can be found here https://github.com/saadeghi/daisyui/tree/v2
   *
-  * The themes were converted to CSS variables by n0acar and licensed under the MIT License.
+  * The themes were converted to CSS variables by tonya and licensed under the MIT License.
+  * Copyright (c) 2025 tonya
+  * The license can be found here https://gist.github.com/tonyaellie/b9e683ae61ade6527b2cc3215fcc38e8
+  *
+  * The radius were converted to css variables by n0acar and licensed under the MIT License.
   * Copyright (c) 2024 n0acar
   * The license can be found here https://github.com/n0acar/tiny-projects
   */
 
   
   .theme-aqua {
-    --border: 219 11% 89%;
-    --input: 219 11% 89%;
-    --ring: 219 11% 89%;
     --background: 219 53% 43%;
-    --foreground: 219 11% 89%;
+    --background-accent: 219 53% 35%;
+    --foreground: 218 100% 89%;
     --primary: 182 93% 49%;
     --primary-foreground: 181 100% 17%;
-    --secondary: 274 31% 57%;
-    --secondary-foreground: 274 6% 11%;
-    --destructive: 5 100% 70%;
-    --destructive-foreground: 5 24% 15%;
-    --muted: 219 45% 37%;
-    --muted-foreground: 219 11% 89%;
-    --accent: 47 100% 80%;
-    --accent-foreground: 47 20% 16%;
-    --popover: 219 53% 43%;
-    --popover-foreground: 219 11% 89%;
+    --secondary: 205 54% 50%;
+    --secondary-foreground: 206 100% 90%;
+    --accent: 274 31% 57%;
+    --accent-foreground: 274 100% 91%;
+    --muted: 218 52% 39%;
+    --muted-foreground: 218 100% 89%;
     --card: 219 53% 43%;
-    --card-foreground: 219 11% 89%;
+    --card-foreground: 218 100% 89%;
+    --popover: 219 53% 43%;
+    --popover-foreground: 218 100% 89%;
+    --destructive: 0 72% 51%;
+    --destructive-foreground: 0 100% 90%;
+    --input: 219 53% 35%;
+    --border: 219 53% 35%;
+    --ring: 182 93% 49%;
+    --sidebar-background: 218 52% 39%;
+    --sidebar-foreground: 218 100% 89%;
+    --sidebar-primary: 182 93% 49%;
+    --sidebar-primary-foreground: 181 100% 17%;
+    --sidebar-accent: 219 53% 35%;
+    --sidebar-accent-foreground: 218 100% 89%;
+    --sidebar-border: 219 53% 35%;
+    --sidebar-ring: 219 53% 35%;
+
     --radius: 0.5rem;
   }
   .theme-black {
-    --border: 224 0% 84%;
-    --input: 224 0% 84%;
-    --ring: 224 0% 84%;
     --background: 0 0% 0%;
-    --foreground: 224 0% 84%;
-    --primary: 224 0% 22%;
-    --primary-foreground: 0 0% 84%;
-    --secondary: 224 0% 22%;
-    --secondary-foreground: 0 0% 84%;
-    --destructive: 0 100% 50%;
-    --destructive-foreground: 0 20% 10%;
-    --muted: 224 0% 15%;
-    --muted-foreground: 224 0% 84%;
-    --accent: 224 0% 22%;
-    --accent-foreground: 0 0% 84%;
-    --popover: 0 0% 0%;
-    --popover-foreground: 224 0% 84%;
+    --background-accent: 0 2% 10%;
+    --foreground: 0 0% 80%;
+    --primary: 0 2% 20%;
+    --primary-foreground: 0 5% 84%;
+    --secondary: 0 1% 15%;
+    --secondary-foreground: 0 2% 83%;
+    --accent: 0 2% 20%;
+    --accent-foreground: 0 5% 84%;
+    --muted: 0 0% 5%;
+    --muted-foreground: 0 0% 80%;
     --card: 0 0% 0%;
-    --card-foreground: 224 0% 84%;
+    --card-foreground: 0 0% 80%;
+    --popover: 0 0% 0%;
+    --popover-foreground: 0 0% 80%;
+    --destructive: 0 100% 50%;
+    --destructive-foreground: 0 100% 90%;
+    --input: 0 2% 10%;
+    --border: 0 2% 10%;
+    --ring: 0 2% 20%;
+    --sidebar-background: 0 0% 5%;
+    --sidebar-foreground: 0 0% 80%;
+    --sidebar-primary: 0 2% 20%;
+    --sidebar-primary-foreground: 0 5% 84%;
+    --sidebar-accent: 0 2% 10%;
+    --sidebar-accent-foreground: 0 0% 80%;
+    --sidebar-border: 0 2% 10%;
+    --sidebar-ring: 0 2% 10%;
+
     --radius: 0;
   }
   .theme-bumblebee {
-    --border: 224 -35% 20%;
-    --input: 224 -35% 20%;
-    --ring: 224 -35% 20%;
     --background: 0 0% 100%;
-    --foreground: 224 -35% 20%;
-    --primary: 51 100% 50%;
-    --primary-foreground: 49 31% 23%;
-    --secondary: 39 100% 50%;
-    --secondary-foreground: 34 59% 23%;
-    --destructive: 358.25 100% 69%;
-    --destructive-foreground: 0 0% 0%;
-    --muted: 224 -148% 86%;
-    --muted-foreground: 224 -35% 20%;
-    --accent: 28 100% 67%;
-    --accent-foreground: 27 24% 14%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 224 -35% 20%;
+    --background-accent: 0 0% 81%;
+    --foreground: 0 0% 20%;
+    --primary: 41 74% 53%;
+    --primary-foreground: 240 33% 14%;
+    --secondary: 240 33% 14%;
+    --secondary-foreground: 240 61% 83%;
+    --accent: 50 94% 58%;
+    --accent-foreground: 240 33% 14%;
+    --muted: 0 0% 90%;
+    --muted-foreground: 0 0% 20%;
     --card: 0 0% 100%;
-    --card-foreground: 224 -35% 20%;
+    --card-foreground: 0 0% 20%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 20%;
+    --destructive: 0 91% 71%;
+    --destructive-foreground: 0 100% 14%;
+    --input: 0 0% 81%;
+    --border: 0 0% 81%;
+    --ring: 41 74% 53%;
+    --sidebar-background: 0 0% 90%;
+    --sidebar-foreground: 0 0% 20%;
+    --sidebar-primary: 41 74% 53%;
+    --sidebar-primary-foreground: 240 33% 14%;
+    --sidebar-accent: 0 0% 81%;
+    --sidebar-accent-foreground: 0 0% 20%;
+    --sidebar-border: 0 0% 81%;
+    --sidebar-ring: 0 0% 81%;
+
     --radius: 0.5rem;
   }
   .theme-cmyk {
-    --border: 224 -35% 20%;
-    --input: 224 -35% 20%;
-    --ring: 224 -35% 20%;
     --background: 0 0% 100%;
-    --foreground: 224 -35% 20%;
+    --background-accent: 0 0% 81%;
+    --foreground: 0 0% 20%;
     --primary: 203 83% 60%;
-    --primary-foreground: 203 17% 12%;
-    --secondary: 335 78% 60%;
-    --secondary-foreground: 335 16% 12%;
-    --destructive: 4 81% 56%;
-    --destructive-foreground: 4 16% 11%;
-    --muted: 224 -148% 86%;
-    --muted-foreground: 224 -35% 20%;
-    --accent: 56 100% 60%;
-    --accent-foreground: 56 20% 12%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 224 -35% 20%;
+    --primary-foreground: 203 100% 12%;
+    --secondary: 0 0% 10%;
+    --secondary-foreground: 0 0% 82%;
+    --accent: 335 78% 60%;
+    --accent-foreground: 335 100% 92%;
+    --muted: 0 0% 90%;
+    --muted-foreground: 0 0% 20%;
     --card: 0 0% 100%;
-    --card-foreground: 224 -35% 20%;
+    --card-foreground: 0 0% 20%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 20%;
+    --destructive: 4 81% 56%;
+    --destructive-foreground: 4 100% 91%;
+    --input: 0 0% 81%;
+    --border: 0 0% 81%;
+    --ring: 203 83% 60%;
+    --sidebar-background: 0 0% 90%;
+    --sidebar-foreground: 0 0% 20%;
+    --sidebar-primary: 203 83% 60%;
+    --sidebar-primary-foreground: 203 100% 12%;
+    --sidebar-accent: 0 0% 81%;
+    --sidebar-accent-foreground: 0 0% 20%;
+    --sidebar-border: 0 0% 81%;
+    --sidebar-ring: 0 0% 81%;
+
     --radius: 0.5rem;
   }
   .theme-corporate {
-    --border: 233 27% 13%;
-    --input: 233 27% 13%;
-    --ring: 233 27% 13%;
     --background: 0 0% 100%;
+    --background-accent: 0 0% 81%;
     --foreground: 233 27% 13%;
-    --primary: 229 100% 65%;
-    --primary-foreground: 229 22% 13%;
-    --secondary: 215 26% 59%;
-    --secondary-foreground: 215 5% 12%;
-    --destructive: 358.25 100% 69%;
-    --destructive-foreground: 0 0% 0%;
-    --muted: 224 -148% 86%;
+    --primary: 229 96% 64%;
+    --primary-foreground: 229 100% 93%;
+    --secondary: 233 27% 13%;
+    --secondary-foreground: 210 38% 95%;
+    --accent: 215 26% 59%;
+    --accent-foreground: 215 100% 12%;
+    --muted: 0 0% 90%;
     --muted-foreground: 233 27% 13%;
-    --accent: 154 49% 60%;
-    --accent-foreground: 154 10% 12%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 233 27% 13%;
     --card: 0 0% 100%;
     --card-foreground: 233 27% 13%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 233 27% 13%;
+    --destructive: 0 91% 71%;
+    --destructive-foreground: 0 100% 14%;
+    --input: 0 0% 81%;
+    --border: 0 0% 81%;
+    --ring: 229 96% 64%;
+    --sidebar-background: 0 0% 90%;
+    --sidebar-foreground: 233 27% 13%;
+    --sidebar-primary: 229 96% 64%;
+    --sidebar-primary-foreground: 229 100% 93%;
+    --sidebar-accent: 0 0% 81%;
+    --sidebar-accent-foreground: 233 27% 13%;
+    --sidebar-border: 0 0% 81%;
+    --sidebar-ring: 0 0% 81%;
+
     --radius: 0.125rem;
   }
   .theme-cupcake {
-    --border: 280 46% 14%;
-    --input: 280 46% 14%;
-    --ring: 280 46% 14%;
     --background: 24 33% 97%;
+    --background-accent: 22 14% 89%;
     --foreground: 280 46% 14%;
     --primary: 183 47% 59%;
-    --primary-foreground: 183 9% 12%;
-    --secondary: 338 71% 78%;
-    --secondary-foreground: 338 14% 16%;
-    --destructive: 358.25 100% 69%;
-    --destructive-foreground: 0 0% 0%;
-    --muted: 23 14% 89%;
+    --primary-foreground: 183 100% 12%;
+    --secondary: 280 46% 14%;
+    --secondary-foreground: 280 82% 83%;
+    --accent: 338 71% 78%;
+    --accent-foreground: 338 100% 16%;
+    --muted: 27 22% 92%;
     --muted-foreground: 280 46% 14%;
-    --accent: 39 84% 58%;
-    --accent-foreground: 39 17% 12%;
-    --popover: 24 33% 97%;
-    --popover-foreground: 280 46% 14%;
     --card: 24 33% 97%;
     --card-foreground: 280 46% 14%;
+    --popover: 24 33% 97%;
+    --popover-foreground: 280 46% 14%;
+    --destructive: 0 91% 71%;
+    --destructive-foreground: 0 100% 14%;
+    --input: 22 14% 89%;
+    --border: 22 14% 89%;
+    --ring: 183 47% 59%;
+    --sidebar-background: 27 22% 92%;
+    --sidebar-foreground: 280 46% 14%;
+    --sidebar-primary: 183 47% 59%;
+    --sidebar-primary-foreground: 183 100% 12%;
+    --sidebar-accent: 22 14% 89%;
+    --sidebar-accent-foreground: 280 46% 14%;
+    --sidebar-border: 22 14% 89%;
+    --sidebar-ring: 22 14% 89%;
+
     --radius: 1.9rem;
   }
   .theme-cyberpunk {
-    --border: 55 20% 13%;
-    --input: 55 20% 13%;
-    --ring: 55 20% 13%;
-    --background: 56 100% 64%;
-    --foreground: 55 20% 13%;
-    --primary: 343 100% 72%;
-    --primary-foreground: 343 26% 15%;
-    --secondary: 185 100% 49%;
-    --secondary-foreground: 184 50% 6%;
-    --destructive: 358.25 100% 69%;
-    --destructive-foreground: 0 0% 0%;
-    --muted: 55 88% 55%;
-    --muted-foreground: 55 20% 13%;
-    --accent: 279 100% 73%;
-    --accent-foreground: 277 22% 15%;
-    --popover: 56 100% 64%;
-    --popover-foreground: 55 20% 13%;
-    --card: 56 100% 64%;
-    --card-foreground: 55 20% 13%;
+    --background: 56 100% 50%;
+    --background-accent: 56 100% 41%;
+    --foreground: 56 100% 10%;
+    --primary: 345 100% 73%;
+    --primary-foreground: 345 100% 15%;
+    --secondary: 57 100% 13%;
+    --secondary-foreground: 56 100% 50%;
+    --accent: 195 80% 70%;
+    --accent-foreground: 195 100% 14%;
+    --muted: 56 100% 45%;
+    --muted-foreground: 56 100% 10%;
+    --card: 56 100% 50%;
+    --card-foreground: 56 100% 10%;
+    --popover: 56 100% 50%;
+    --popover-foreground: 56 100% 10%;
+    --destructive: 0 91% 71%;
+    --destructive-foreground: 0 100% 14%;
+    --input: 56 100% 41%;
+    --border: 56 100% 41%;
+    --ring: 345 100% 73%;
+    --sidebar-background: 56 100% 45%;
+    --sidebar-foreground: 56 100% 10%;
+    --sidebar-primary: 345 100% 73%;
+    --sidebar-primary-foreground: 345 100% 15%;
+    --sidebar-accent: 56 100% 41%;
+    --sidebar-accent-foreground: 56 100% 10%;
+    --sidebar-border: 56 100% 41%;
+    --sidebar-ring: 56 100% 41%;
+
     --radius: 0;
-  }
-  .theme-dark {
-    --border: 220 13% 69%;
-    --input: 220 13% 69%;
-    --ring: 220 13% 69%;
-    --background: 212 18% 14%;
-    --foreground: 220 13% 69%;
-    --primary: 235 100% 73%;
-    --primary-foreground: 235 22% 15%;
-    --secondary: 316 100% 69%;
-    --secondary-foreground: 318 25% 14%;
-    --destructive: 358.25 100% 69%;
-    --destructive-foreground: 0 0% 0%;
-    --muted: 213 18% 10%;
-    --muted-foreground: 220 13% 69%;
-    --accent: 174 100% 40%;
-    --accent-foreground: 176 51% 5%;
-    --popover: 212 18% 14%;
-    --popover-foreground: 220 13% 69%;
-    --card: 212 18% 14%;
-    --card-foreground: 220 13% 69%;
-    --radius: 0.5rem;
+
+    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
   }
   .theme-dracula {
-    --border: 60 30% 96%;
-    --input: 60 30% 96%;
-    --ring: 60 30% 96%;
     --background: 231 15% 18%;
+    --background-accent: 230 16% 15%;
     --foreground: 60 30% 96%;
     --primary: 326 100% 74%;
-    --primary-foreground: 326 20% 15%;
-    --secondary: 265 89% 78%;
-    --secondary-foreground: 265 18% 16%;
-    --destructive: 0 100% 67%;
-    --destructive-foreground: 0 20% 13%;
-    --muted: 231 13% 16%;
+    --primary-foreground: 326 100% 15%;
+    --secondary: 230 15% 30%;
+    --secondary-foreground: 229 72% 86%;
+    --accent: 265 89% 78%;
+    --accent-foreground: 265 100% 15%;
+    --muted: 231 15% 17%;
     --muted-foreground: 60 30% 96%;
-    --accent: 31 100% 71%;
-    --accent-foreground: 31 20% 14%;
-    --popover: 231 15% 18%;
-    --popover-foreground: 60 30% 96%;
     --card: 231 15% 18%;
     --card-foreground: 60 30% 96%;
+    --popover: 231 15% 18%;
+    --popover-foreground: 60 30% 96%;
+    --destructive: 0 100% 67%;
+    --destructive-foreground: 0 100% 93%;
+    --input: 230 16% 15%;
+    --border: 230 16% 15%;
+    --ring: 326 100% 74%;
+    --sidebar-background: 231 15% 17%;
+    --sidebar-foreground: 60 30% 96%;
+    --sidebar-primary: 326 100% 74%;
+    --sidebar-primary-foreground: 326 100% 15%;
+    --sidebar-accent: 230 16% 15%;
+    --sidebar-accent-foreground: 60 30% 96%;
+    --sidebar-border: 230 16% 15%;
+    --sidebar-ring: 230 16% 15%;
+
     --radius: 0.5rem;
   }
   .theme-emerald {
-    --border: 219 20% 25%;
-    --input: 219 20% 25%;
-    --ring: 219 20% 25%;
     --background: 0 0% 100%;
+    --background-accent: 0 0% 81%;
     --foreground: 219 20% 25%;
     --primary: 141 50% 60%;
     --primary-foreground: 151 28% 19%;
-    --secondary: 219 96% 60%;
-    --secondary-foreground: 180 100% 100%;
-    --destructive: 358.25 100% 69%;
-    --destructive-foreground: 0 0% 0%;
-    --muted: 224 -148% 86%;
+    --secondary: 219 20% 25%;
+    --secondary-foreground: 210 20% 98%;
+    --accent: 219 96% 60%;
+    --accent-foreground: 210 20% 98%;
+    --muted: 0 0% 90%;
     --muted-foreground: 219 20% 25%;
-    --accent: 10 89% 68%;
-    --accent-foreground: 0 0% 0%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 219 20% 25%;
     --card: 0 0% 100%;
     --card-foreground: 219 20% 25%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 219 20% 25%;
+    --destructive: 0 91% 71%;
+    --destructive-foreground: 0 100% 14%;
+    --input: 0 0% 81%;
+    --border: 0 0% 81%;
+    --ring: 141 50% 60%;
+    --sidebar-background: 0 0% 90%;
+    --sidebar-foreground: 219 20% 25%;
+    --sidebar-primary: 141 50% 60%;
+    --sidebar-primary-foreground: 151 28% 19%;
+    --sidebar-accent: 0 0% 81%;
+    --sidebar-accent-foreground: 219 20% 25%;
+    --sidebar-border: 0 0% 81%;
+    --sidebar-ring: 0 0% 81%;
+
     --radius: 0.5rem;
   }
   .theme-fantasy {
-    --border: 215 28% 17%;
-    --input: 215 28% 17%;
-    --ring: 215 28% 17%;
     --background: 0 0% 100%;
+    --background-accent: 0 0% 81%;
     --foreground: 215 28% 17%;
-    --primary: 296 100% 23%;
-    --primary-foreground: 296 26% 84%;
-    --secondary: 203 100% 37%;
-    --secondary-foreground: 199 35% 86%;
-    --destructive: 358.25 100% 69%;
-    --destructive-foreground: 0 0% 0%;
-    --muted: 224 -148% 86%;
+    --primary: 296 83% 25%;
+    --primary-foreground: 296 100% 85%;
+    --secondary: 215 28% 17%;
+    --secondary-foreground: 215 62% 83%;
+    --accent: 200 100% 37%;
+    --accent-foreground: 200 100% 87%;
+    --muted: 0 0% 90%;
     --muted-foreground: 215 28% 17%;
-    --accent: 32 100% 50%;
-    --accent-foreground: 35 29% 9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 215 28% 17%;
     --card: 0 0% 100%;
     --card-foreground: 215 28% 17%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 215 28% 17%;
+    --destructive: 0 91% 71%;
+    --destructive-foreground: 0 100% 14%;
+    --input: 0 0% 81%;
+    --border: 0 0% 81%;
+    --ring: 296 83% 25%;
+    --sidebar-background: 0 0% 90%;
+    --sidebar-foreground: 215 28% 17%;
+    --sidebar-primary: 296 83% 25%;
+    --sidebar-primary-foreground: 296 100% 85%;
+    --sidebar-accent: 0 0% 81%;
+    --sidebar-accent-foreground: 215 28% 17%;
+    --sidebar-border: 0 0% 81%;
+    --sidebar-ring: 0 0% 81%;
+
     --radius: 0.5rem;
   }
   .theme-forest {
-    --border: 0 2% 82%;
-    --input: 0 2% 82%;
-    --ring: 0 2% 82%;
     --background: 0 12% 8%;
-    --foreground: 0 2% 82%;
+    --background-accent: 0 12% 7%;
+    --foreground: 0 12% 82%;
     --primary: 141 72% 42%;
-    --primary-foreground: 0 0% 0%;
-    --secondary: 164 73% 42%;
-    --secondary-foreground: 164 15% 8%;
-    --destructive: 358.25 100% 69%;
-    --destructive-foreground: 0 0% 0%;
-    --muted: 0 10% 7%;
-    --muted-foreground: 0 2% 82%;
-    --accent: 175 73% 42%;
-    --accent-foreground: 175 15% 8%;
-    --popover: 0 12% 8%;
-    --popover-foreground: 0 2% 82%;
+    --primary-foreground: 141 100% 88%;
+    --secondary: 0 10% 6%;
+    --secondary-foreground: 0 6% 81%;
+    --accent: 141 75% 48%;
+    --accent-foreground: 141 100% 10%;
+    --muted: 0 14% 7%;
+    --muted-foreground: 0 12% 82%;
     --card: 0 12% 8%;
-    --card-foreground: 0 2% 82%;
+    --card-foreground: 0 12% 82%;
+    --popover: 0 12% 8%;
+    --popover-foreground: 0 12% 82%;
+    --destructive: 0 91% 71%;
+    --destructive-foreground: 0 100% 14%;
+    --input: 0 12% 7%;
+    --border: 0 12% 7%;
+    --ring: 141 72% 42%;
+    --sidebar-background: 0 14% 7%;
+    --sidebar-foreground: 0 12% 82%;
+    --sidebar-primary: 141 72% 42%;
+    --sidebar-primary-foreground: 141 100% 88%;
+    --sidebar-accent: 0 12% 7%;
+    --sidebar-accent-foreground: 0 12% 82%;
+    --sidebar-border: 0 12% 7%;
+    --sidebar-ring: 0 12% 7%;
+
     --radius: 1.9rem;
   }
   .theme-garden {
-    --border: 0 3% 6%;
-    --input: 0 3% 6%;
-    --ring: 0 3% 6%;
     --background: 0 4% 91%;
+    --background-accent: 0 4% 74%;
     --foreground: 0 3% 6%;
-    --primary: 332 100% 49%;
-    --primary-foreground: 180 100% 100%;
-    --secondary: 334 37% 41%;
-    --secondary-foreground: 334 7% 88%;
-    --destructive: 358.25 100% 69%;
-    --destructive-foreground: 0 0% 0%;
-    --muted: 0 4% 78%;
+    --primary: 139 16% 43%;
+    --primary-foreground: 139 100% 89%;
+    --secondary: 0 4% 35%;
+    --secondary-foreground: 0 4% 91%;
+    --accent: 97 37% 93%;
+    --accent-foreground: 96 32% 15%;
+    --muted: 0 4% 82%;
     --muted-foreground: 0 3% 6%;
-    --accent: 139 16% 43%;
-    --accent-foreground: 139 3% 9%;
-    --popover: 0 4% 91%;
-    --popover-foreground: 0 3% 6%;
     --card: 0 4% 91%;
     --card-foreground: 0 3% 6%;
+    --popover: 0 4% 91%;
+    --popover-foreground: 0 3% 6%;
+    --destructive: 0 91% 71%;
+    --destructive-foreground: 0 100% 14%;
+    --input: 0 4% 74%;
+    --border: 0 4% 74%;
+    --ring: 139 16% 43%;
+    --sidebar-background: 0 4% 82%;
+    --sidebar-foreground: 0 3% 6%;
+    --sidebar-primary: 139 16% 43%;
+    --sidebar-primary-foreground: 139 100% 89%;
+    --sidebar-accent: 0 4% 74%;
+    --sidebar-accent-foreground: 0 3% 6%;
+    --sidebar-border: 0 4% 74%;
+    --sidebar-ring: 0 4% 74%;
+
     --radius: 0.5rem;
   }
   .theme-halloween {
-    --border: 0 0% 83%;
-    --input: 0 0% 83%;
-    --ring: 0 0% 83%;
-    --background: 224 0% 13%;
+    --background: 0 0% 13%;
+    --background-accent: 0 0% 11%;
     --foreground: 0 0% 83%;
-    --primary: 34 100% 50%;
+    --primary: 32 89% 52%;
     --primary-foreground: 180 7% 8%;
-    --secondary: 278 100% 38%;
-    --secondary-foreground: 279 24% 87%;
-    --destructive: 3 87% 62%;
-    --destructive-foreground: 3 17% 12%;
-    --muted: 0 0% 11%;
+    --secondary: 180 4% 11%;
+    --secondary-foreground: 180 5% 82%;
+    --accent: 271 46% 42%;
+    --accent-foreground: 272 100% 88%;
+    --muted: 0 0% 12%;
     --muted-foreground: 0 0% 83%;
-    --accent: 96 100% 33%;
-    --accent-foreground: 0 0% 0%;
-    --popover: 224 0% 13%;
-    --popover-foreground: 0 0% 83%;
-    --card: 224 0% 13%;
+    --card: 0 0% 13%;
     --card-foreground: 0 0% 83%;
+    --popover: 0 0% 13%;
+    --popover-foreground: 0 0% 83%;
+    --destructive: 0 72% 51%;
+    --destructive-foreground: 0 100% 90%;
+    --input: 0 0% 11%;
+    --border: 0 0% 11%;
+    --ring: 32 89% 52%;
+    --sidebar-background: 0 0% 12%;
+    --sidebar-foreground: 0 0% 83%;
+    --sidebar-primary: 32 89% 52%;
+    --sidebar-primary-foreground: 180 7% 8%;
+    --sidebar-accent: 0 0% 11%;
+    --sidebar-accent-foreground: 0 0% 83%;
+    --sidebar-border: 0 0% 11%;
+    --sidebar-ring: 0 0% 11%;
+
     --radius: 0.5rem;
   }
   .theme-light {
-    --border: 215 28% 17%;
-    --input: 215 28% 17%;
-    --ring: 215 28% 17%;
     --background: 0 0% 100%;
+    --background-accent: 180 2% 90%;
     --foreground: 215 28% 17%;
-    --primary: 257 100% 50%;
-    --primary-foreground: 258 22% 90%;
-    --secondary: 313 100% 56%;
-    --secondary-foreground: 320 100% 99%;
-    --destructive: 358.25 100% 69%;
-    --destructive-foreground: 0 0% 0%;
-    --muted: 180 2% 90%;
+    --primary: 259 94% 51%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 219 14% 28%;
+    --secondary-foreground: 0 0% 100%;
+    --accent: 314 100% 47%;
+    --accent-foreground: 0 0% 100%;
+    --muted: 0 0% 95%;
     --muted-foreground: 215 28% 17%;
-    --accent: 174 100% 41%;
-    --accent-foreground: 176 59% 4%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 215 28% 17%;
     --card: 0 0% 100%;
     --card-foreground: 215 28% 17%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 215 28% 17%;
+    --destructive: 0 91% 71%;
+    --destructive-foreground: 0 100% 14%;
+    --input: 180 2% 90%;
+    --border: 180 2% 90%;
+    --ring: 259 94% 51%;
+    --sidebar-background: 0 0% 95%;
+    --sidebar-foreground: 215 28% 17%;
+    --sidebar-primary: 259 94% 51%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 180 2% 90%;
+    --sidebar-accent-foreground: 215 28% 17%;
+    --sidebar-border: 180 2% 90%;
+    --sidebar-ring: 180 2% 90%;
+
     --radius: 0.5rem;
   }
   .theme-lofi {
-    --border: 0 0% 0%;
-    --input: 0 0% 0%;
-    --ring: 0 0% 0%;
     --background: 0 0% 100%;
+    --background-accent: 0 2% 90%;
     --foreground: 0 0% 0%;
-    --primary: 224 0% 5%;
+    --primary: 0 0% 5%;
     --primary-foreground: 0 0% 100%;
-    --secondary: 0 2% 10%;
+    --secondary: 0 0% 0%;
     --secondary-foreground: 0 0% 100%;
-    --destructive: 7 100% 76%;
-    --destructive-foreground: 7 24% 16%;
-    --muted: 0 2% 90%;
-    --muted-foreground: 0 0% 0%;
-    --accent: 224 0% 15%;
+    --accent: 0 2% 10%;
     --accent-foreground: 0 0% 100%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 0%;
+    --muted: 0 0% 95%;
+    --muted-foreground: 0 0% 0%;
     --card: 0 0% 100%;
     --card-foreground: 0 0% 0%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 0%;
+    --destructive: 325 78% 49%;
+    --destructive-foreground: 0 0% 100%;
+    --input: 0 2% 90%;
+    --border: 0 2% 90%;
+    --ring: 0 0% 5%;
+    --sidebar-background: 0 0% 95%;
+    --sidebar-foreground: 0 0% 0%;
+    --sidebar-primary: 0 0% 5%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 0 2% 90%;
+    --sidebar-accent-foreground: 0 0% 0%;
+    --sidebar-border: 0 2% 90%;
+    --sidebar-ring: 0 2% 90%;
+
     --radius: 0.125rem;
   }
   .theme-luxury {
-    --border: 37 67% 58%;
-    --input: 37 67% 58%;
-    --ring: 37 67% 58%;
     --background: 240 10% 4%;
+    --background-accent: 270 2% 18%;
     --foreground: 37 67% 58%;
     --primary: 0 0% 100%;
-    --primary-foreground: 224 -35% 20%;
-    --secondary: 218 54% 18%;
-    --secondary-foreground: 218 11% 84%;
-    --destructive: 0 100% 72%;
-    --destructive-foreground: 0 20% 14%;
-    --muted: 270 2% 18%;
+    --primary-foreground: 0 0% 20%;
+    --secondary: 270 4% 9%;
+    --secondary-foreground: 37 67% 58%;
+    --accent: 218 54% 18%;
+    --accent-foreground: 219 100% 84%;
+    --muted: 270 4% 9%;
     --muted-foreground: 37 67% 58%;
-    --accent: 319 22% 26%;
-    --accent-foreground: 319 4% 85%;
-    --popover: 240 10% 4%;
-    --popover-foreground: 37 67% 58%;
     --card: 240 10% 4%;
     --card-foreground: 37 67% 58%;
+    --popover: 240 10% 4%;
+    --popover-foreground: 37 67% 58%;
+    --destructive: 0 100% 72%;
+    --destructive-foreground: 0 100% 14%;
+    --input: 270 2% 18%;
+    --border: 270 2% 18%;
+    --ring: 0 0% 100%;
+    --sidebar-background: 270 4% 9%;
+    --sidebar-foreground: 37 67% 58%;
+    --sidebar-primary: 0 0% 100%;
+    --sidebar-primary-foreground: 0 0% 20%;
+    --sidebar-accent: 270 2% 18%;
+    --sidebar-accent-foreground: 37 67% 58%;
+    --sidebar-border: 270 2% 18%;
+    --sidebar-ring: 270 2% 18%;
+
     --radius: 0.5rem;
   }
   .theme-pastel {
-    --border: 224 -35% 20%;
-    --input: 224 -35% 20%;
-    --ring: 224 -35% 20%;
     --background: 0 0% 100%;
-    --foreground: 224 -35% 20%;
+    --background-accent: 216 12% 84%;
+    --foreground: 0 0% 20%;
     --primary: 284 22% 80%;
-    --primary-foreground: 284 4% 16%;
-    --secondary: 352 70% 88%;
-    --secondary-foreground: 352 14% 18%;
-    --destructive: 358.25 100% 69%;
-    --destructive-foreground: 0 0% 0%;
-    --muted: 216 12% 84%;
-    --muted-foreground: 224 -35% 20%;
-    --accent: 158 55% 81%;
-    --accent-foreground: 158 11% 16%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 224 -35% 20%;
+    --primary-foreground: 284 59% 16%;
+    --secondary: 199 44% 61%;
+    --secondary-foreground: 198 100% 12%;
+    --accent: 352 70% 88%;
+    --accent-foreground: 351 100% 18%;
+    --muted: 210 20% 98%;
+    --muted-foreground: 0 0% 20%;
     --card: 0 0% 100%;
-    --card-foreground: 224 -35% 20%;
+    --card-foreground: 0 0% 20%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 20%;
+    --destructive: 0 91% 71%;
+    --destructive-foreground: 0 100% 14%;
+    --input: 216 12% 84%;
+    --border: 216 12% 84%;
+    --ring: 284 22% 80%;
+    --sidebar-background: 210 20% 98%;
+    --sidebar-foreground: 0 0% 20%;
+    --sidebar-primary: 284 22% 80%;
+    --sidebar-primary-foreground: 284 59% 16%;
+    --sidebar-accent: 216 12% 84%;
+    --sidebar-accent-foreground: 0 0% 20%;
+    --sidebar-border: 216 12% 84%;
+    --sidebar-ring: 216 12% 84%;
+
     --radius: 1.9rem;
   }
   .theme-retro {
-    --border: 345 5% 15%;
-    --input: 345 5% 15%;
-    --ring: 345 5% 15%;
-    --background: 44 47% 86%;
+    --background: 45 47% 80%;
+    --background-accent: 42 36% 65%;
     --foreground: 345 5% 15%;
     --primary: 3 74% 76%;
     --primary-foreground: 345 5% 15%;
-    --secondary: 145 27% 72%;
-    --secondary-foreground: 345 5% 15%;
-    --destructive: 3 87% 62%;
-    --destructive-foreground: 3 17% 12%;
-    --muted: 44 47% 73%;
-    --muted-foreground: 345 5% 15%;
-    --accent: 24 67% 59%;
+    --secondary: 42 17% 42%;
+    --secondary-foreground: 45 47% 80%;
+    --accent: 145 27% 72%;
     --accent-foreground: 345 5% 15%;
-    --popover: 44 47% 86%;
-    --popover-foreground: 345 5% 15%;
-    --card: 44 47% 86%;
+    --muted: 45 37% 72%;
+    --muted-foreground: 345 5% 15%;
+    --card: 45 47% 80%;
     --card-foreground: 345 5% 15%;
+    --popover: 45 47% 80%;
+    --popover-foreground: 345 5% 15%;
+    --destructive: 0 72% 51%;
+    --destructive-foreground: 0 100% 90%;
+    --input: 42 36% 65%;
+    --border: 42 36% 65%;
+    --ring: 3 74% 76%;
+    --sidebar-background: 45 37% 72%;
+    --sidebar-foreground: 345 5% 15%;
+    --sidebar-primary: 3 74% 76%;
+    --sidebar-primary-foreground: 345 5% 15%;
+    --sidebar-accent: 42 36% 65%;
+    --sidebar-accent-foreground: 345 5% 15%;
+    --sidebar-border: 42 36% 65%;
+    --sidebar-ring: 42 36% 65%;
+
     --radius: 0.4rem;
   }
   .theme-synthwave {
-    --border: 260 60% 98%;
-    --input: 260 60% 98%;
-    --ring: 260 60% 98%;
-    --background: 253 58% 15%;
+    --background: 254 59% 26%;
+    --background-accent: 253 59% 21%;
     --foreground: 260 60% 98%;
     --primary: 321 70% 69%;
-    --primary-foreground: 321 14% 14%;
-    --secondary: 197 87% 65%;
-    --secondary-foreground: 197 17% 13%;
-    --destructive: 10 75% 70%;
-    --destructive-foreground: 257 63% 17%;
-    --muted: 253 50% 13%;
+    --primary-foreground: 321 100% 14%;
+    --secondary: 253 61% 19%;
+    --secondary-foreground: 260 60% 98%;
+    --accent: 197 87% 65%;
+    --accent-foreground: 197 100% 13%;
+    --muted: 255 59% 23%;
     --muted-foreground: 260 60% 98%;
-    --accent: 50 100% 50%;
-    --accent-foreground: 51 35% 7%;
-    --popover: 253 58% 15%;
-    --popover-foreground: 260 60% 98%;
-    --card: 253 58% 15%;
+    --card: 254 59% 26%;
     --card-foreground: 260 60% 98%;
+    --popover: 254 59% 26%;
+    --popover-foreground: 260 60% 98%;
+    --destructive: 352 74% 57%;
+    --destructive-foreground: 260 60% 98%;
+    --input: 253 59% 21%;
+    --border: 253 59% 21%;
+    --ring: 321 70% 69%;
+    --sidebar-background: 255 59% 23%;
+    --sidebar-foreground: 260 60% 98%;
+    --sidebar-primary: 321 70% 69%;
+    --sidebar-primary-foreground: 321 100% 14%;
+    --sidebar-accent: 253 59% 21%;
+    --sidebar-accent-foreground: 260 60% 98%;
+    --sidebar-border: 253 59% 21%;
+    --sidebar-ring: 253 59% 21%;
+
     --radius: 0.5rem;
   }
   .theme-valentine {
-    --border: 344 38% 28%;
-    --input: 344 38% 28%;
-    --ring: 344 38% 28%;
-    --background: 319 66% 94%;
+    --background: 318 46% 89%;
+    --background-accent: 318 46% 72%;
     --foreground: 344 38% 28%;
     --primary: 353 74% 67%;
-    --primary-foreground: 353 15% 13%;
-    --secondary: 254 86% 77%;
-    --secondary-foreground: 254 17% 15%;
-    --destructive: 5 100% 69%;
-    --destructive-foreground: 4 25% 14%;
-    --muted: 319 56% 81%;
+    --primary-foreground: 353 100% 13%;
+    --secondary: 336 43% 48%;
+    --secondary-foreground: 318 46% 89%;
+    --accent: 254 86% 77%;
+    --accent-foreground: 254 100% 15%;
+    --muted: 319 47% 80%;
     --muted-foreground: 344 38% 28%;
-    --accent: 182 34% 55%;
-    --accent-foreground: 182 7% 11%;
-    --popover: 319 66% 94%;
-    --popover-foreground: 344 38% 28%;
-    --card: 319 66% 94%;
+    --card: 318 46% 89%;
     --card-foreground: 344 38% 28%;
+    --popover: 318 46% 89%;
+    --popover-foreground: 344 38% 28%;
+    --destructive: 0 72% 51%;
+    --destructive-foreground: 0 100% 90%;
+    --input: 318 46% 72%;
+    --border: 318 46% 72%;
+    --ring: 353 74% 67%;
+    --sidebar-background: 319 47% 80%;
+    --sidebar-foreground: 344 38% 28%;
+    --sidebar-primary: 353 74% 67%;
+    --sidebar-primary-foreground: 353 100% 13%;
+    --sidebar-accent: 318 46% 72%;
+    --sidebar-accent-foreground: 344 38% 28%;
+    --sidebar-border: 318 46% 72%;
+    --sidebar-ring: 318 46% 72%;
+
     --radius: 1.9rem;
   }
   .theme-wireframe {
-    --border: 224 -35% 20%;
-    --input: 224 -35% 20%;
-    --ring: 224 -35% 20%;
     --background: 0 0% 100%;
-    --foreground: 224 -35% 20%;
-    --primary: 224 0% 72%;
-    --primary-foreground: 0 0% 14%;
-    --secondary: 224 0% 72%;
-    --secondary-foreground: 0 0% 14%;
-    --destructive: 0 100% 50%;
-    --destructive-foreground: 0 20% 10%;
-    --muted: 224 0% 87%;
-    --muted-foreground: 224 -35% 20%;
-    --accent: 224 0% 72%;
-    --accent-foreground: 0 0% 14%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 224 -35% 20%;
+    --background-accent: 0 0% 87%;
+    --foreground: 0 0% 20%;
+    --primary: 0 0% 72%;
+    --primary-foreground: 0 0% 15%;
+    --secondary: 0 0% 92%;
+    --secondary-foreground: 0 0% 18%;
+    --accent: 0 0% 72%;
+    --accent-foreground: 0 0% 15%;
+    --muted: 0 0% 93%;
+    --muted-foreground: 0 0% 20%;
     --card: 0 0% 100%;
-    --card-foreground: 224 -35% 20%;
+    --card-foreground: 0 0% 20%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 20%;
+    --destructive: 0 100% 50%;
+    --destructive-foreground: 0 100% 90%;
+    --input: 0 0% 87%;
+    --border: 0 0% 87%;
+    --ring: 0 0% 72%;
+    --sidebar-background: 0 0% 93%;
+    --sidebar-foreground: 0 0% 20%;
+    --sidebar-primary: 0 0% 72%;
+    --sidebar-primary-foreground: 0 0% 15%;
+    --sidebar-accent: 0 0% 87%;
+    --sidebar-accent-foreground: 0 0% 20%;
+    --sidebar-border: 0 0% 87%;
+    --sidebar-ring: 0 0% 87%;
+
     --radius: 0.2rem;
+
+    font-family: Chalkboard,comic sans ms, sanssecondaryerif;
   }
   .theme-autumn {
-    --border: 0 0% 19%;
-    --input: 0 0% 19%;
-    --ring: 0 0% 19%;
-    --background: 224 0% 95%;
+    --background: 0 0% 95%;
+    --background-accent: 0 0% 76%;
     --foreground: 0 0% 19%;
     --primary: 344 96% 28%;
-    --primary-foreground: 344 19% 86%;
-    --secondary: 0 63% 58%;
-    --secondary-foreground: 0 13% 12%;
-    --destructive: 353 100% 41%;
-    --destructive-foreground: 346 29% 87%;
-    --muted: 0 0% 81%;
+    --primary-foreground: 344 100% 86%;
+    --secondary: 22 17% 44%;
+    --secondary-foreground: 23 100% 89%;
+    --accent: 0 63% 58%;
+    --accent-foreground: 1 100% 92%;
+    --muted: 0 0% 85%;
     --muted-foreground: 0 0% 19%;
-    --accent: 27 56% 63%;
-    --accent-foreground: 27 11% 13%;
-    --popover: 224 0% 95%;
-    --popover-foreground: 0 0% 19%;
-    --card: 224 0% 95%;
+    --card: 0 0% 95%;
     --card-foreground: 0 0% 19%;
+    --popover: 0 0% 95%;
+    --popover-foreground: 0 0% 19%;
+    --destructive: 354 79% 49%;
+    --destructive-foreground: 354 100% 90%;
+    --input: 0 0% 76%;
+    --border: 0 0% 76%;
+    --ring: 344 96% 28%;
+    --sidebar-background: 0 0% 85%;
+    --sidebar-foreground: 0 0% 19%;
+    --sidebar-primary: 344 96% 28%;
+    --sidebar-primary-foreground: 344 100% 86%;
+    --sidebar-accent: 0 0% 76%;
+    --sidebar-accent-foreground: 0 0% 19%;
+    --sidebar-border: 0 0% 76%;
+    --sidebar-ring: 0 0% 76%;
+
     --radius: 0.5rem;
   }
   .theme-business {
-    --border: 0 0% 83%;
-    --input: 0 0% 83%;
-    --ring: 0 0% 83%;
-    --background: 224 0% 13%;
-    --foreground: 0 0% 83%;
+    --background: 0 0% 13%;
+    --background-accent: 0 0% 10%;
+    --foreground: 0 0% 82%;
     --primary: 210 64% 31%;
-    --primary-foreground: 210 13% 86%;
-    --secondary: 200 13% 55%;
-    --secondary-foreground: 200 3% 11%;
-    --destructive: 6 56% 43%;
-    --destructive-foreground: 6 11% 89%;
+    --primary-foreground: 210 100% 86%;
+    --secondary: 213 14% 16%;
+    --secondary-foreground: 213 28% 83%;
+    --accent: 200 13% 55%;
+    --accent-foreground: 200 100% 11%;
     --muted: 0 0% 11%;
-    --muted-foreground: 0 0% 83%;
-    --accent: 13 80% 60%;
-    --accent-foreground: 13 16% 12%;
-    --popover: 224 0% 13%;
-    --popover-foreground: 0 0% 83%;
-    --card: 224 0% 13%;
-    --card-foreground: 0 0% 83%;
+    --muted-foreground: 0 0% 82%;
+    --card: 0 0% 13%;
+    --card-foreground: 0 0% 82%;
+    --popover: 0 0% 13%;
+    --popover-foreground: 0 0% 82%;
+    --destructive: 6 56% 43%;
+    --destructive-foreground: 6 100% 89%;
+    --input: 0 0% 10%;
+    --border: 0 0% 10%;
+    --ring: 210 64% 31%;
+    --sidebar-background: 0 0% 11%;
+    --sidebar-foreground: 0 0% 82%;
+    --sidebar-primary: 210 64% 31%;
+    --sidebar-primary-foreground: 210 100% 86%;
+    --sidebar-accent: 0 0% 10%;
+    --sidebar-accent-foreground: 0 0% 82%;
+    --sidebar-border: 0 0% 10%;
+    --sidebar-ring: 0 0% 10%;
+
     --radius: 0.125rem;
   }
   .theme-acid {
-    --border: 0 0% 20%;
-    --input: 0 0% 20%;
-    --ring: 0 0% 20%;
-    --background: 224 0% 98%;
+    --background: 0 0% 98%;
+    --background-accent: 0 0% 80%;
     --foreground: 0 0% 20%;
-    --primary: 300 100% 53%;
-    --primary-foreground: 302 30% 9%;
-    --secondary: 28 100% 50%;
-    --secondary-foreground: 30 29% 9%;
-    --destructive: 2 100% 51%;
-    --destructive-foreground: 357 29% 9%;
-    --muted: 0 0% 84%;
+    --primary: 303 100% 50%;
+    --primary-foreground: 302 100% 90%;
+    --secondary: 238 43% 17%;
+    --secondary-foreground: 239 100% 84%;
+    --accent: 27 100% 50%;
+    --accent-foreground: 27 100% 10%;
+    --muted: 0 0% 88%;
     --muted-foreground: 0 0% 20%;
-    --accent: 73 100% 50%;
-    --accent-foreground: 70 39% 7%;
-    --popover: 224 0% 98%;
-    --popover-foreground: 0 0% 20%;
-    --card: 224 0% 98%;
+    --card: 0 0% 98%;
     --card-foreground: 0 0% 20%;
+    --popover: 0 0% 98%;
+    --popover-foreground: 0 0% 20%;
+    --destructive: 1 100% 45%;
+    --destructive-foreground: 1 100% 89%;
+    --input: 0 0% 80%;
+    --border: 0 0% 80%;
+    --ring: 303 100% 50%;
+    --sidebar-background: 0 0% 88%;
+    --sidebar-foreground: 0 0% 20%;
+    --sidebar-primary: 303 100% 50%;
+    --sidebar-primary-foreground: 302 100% 90%;
+    --sidebar-accent: 0 0% 80%;
+    --sidebar-accent-foreground: 0 0% 20%;
+    --sidebar-border: 0 0% 80%;
+    --sidebar-ring: 0 0% 80%;
+
     --radius: 1rem;
   }
   .theme-lemonade {
-    --border: 83 16% 19%;
-    --input: 83 16% 19%;
-    --ring: 83 16% 19%;
-    --background: 83 82% 97%;
-    --foreground: 83 16% 19%;
-    --primary: 93 100% 29%;
-    --primary-foreground: 86 36% 4%;
-    --secondary: 61 100% 38%;
-    --secondary-foreground: 61 39% 5%;
-    --destructive: 6 59% 85%;
-    --destructive-foreground: 6 12% 17%;
-    --muted: 83 70% 83%;
-    --muted-foreground: 83 16% 19%;
-    --accent: 53 100% 46%;
-    --accent-foreground: 54 35% 7%;
-    --popover: 83 82% 97%;
-    --popover-foreground: 83 16% 19%;
-    --card: 83 82% 97%;
-    --card-foreground: 83 16% 19%;
+    --background: 0 0% 100%;
+    --background-accent: 0 0% 81%;
+    --foreground: 0 0% 20%;
+    --primary: 89 96% 31%;
+    --primary-foreground: 89 100% 86%;
+    --secondary: 238 43% 17%;
+    --secondary-foreground: 239 100% 84%;
+    --accent: 60 81% 55%;
+    --accent-foreground: 60 100% 11%;
+    --muted: 0 0% 90%;
+    --muted-foreground: 0 0% 20%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 20%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 20%;
+    --destructive: 1 70% 83%;
+    --destructive-foreground: 1 100% 17%;
+    --input: 0 0% 81%;
+    --border: 0 0% 81%;
+    --ring: 89 96% 31%;
+    --sidebar-background: 0 0% 90%;
+    --sidebar-foreground: 0 0% 20%;
+    --sidebar-primary: 89 96% 31%;
+    --sidebar-primary-foreground: 89 100% 86%;
+    --sidebar-accent: 0 0% 81%;
+    --sidebar-accent-foreground: 0 0% 20%;
+    --sidebar-border: 0 0% 81%;
+    --sidebar-ring: 0 0% 81%;
+
     --radius: 0.5rem;
   }
   .theme-night {
-    --border: 222 9% 82%;
-    --input: 222 9% 82%;
-    --ring: 222 9% 82%;
     --background: 222 47% 11%;
-    --foreground: 222 9% 82%;
+    --background-accent: 221 48% 9%;
+    --foreground: 222 65% 82%;
     --primary: 198 93% 60%;
-    --primary-foreground: 198 19% 12%;
-    --secondary: 234 89% 74%;
-    --secondary-foreground: 234 18% 15%;
-    --destructive: 351 95% 71%;
-    --destructive-foreground: 351 19% 14%;
-    --muted: 222 41% 10%;
-    --muted-foreground: 222 9% 82%;
-    --accent: 329 86% 70%;
-    --accent-foreground: 329 17% 14%;
-    --popover: 222 47% 11%;
-    --popover-foreground: 222 9% 82%;
+    --primary-foreground: 199 100% 12%;
+    --secondary: 217 33% 17%;
+    --secondary-foreground: 218 76% 84%;
+    --accent: 234 89% 74%;
+    --accent-foreground: 234 100% 15%;
+    --muted: 223 46% 10%;
+    --muted-foreground: 222 65% 82%;
     --card: 222 47% 11%;
-    --card-foreground: 222 9% 82%;
+    --card-foreground: 222 65% 82%;
+    --popover: 222 47% 11%;
+    --popover-foreground: 222 65% 82%;
+    --destructive: 351 95% 71%;
+    --destructive-foreground: 351 100% 14%;
+    --input: 221 48% 9%;
+    --border: 221 48% 9%;
+    --ring: 198 93% 60%;
+    --sidebar-background: 223 46% 10%;
+    --sidebar-foreground: 222 65% 82%;
+    --sidebar-primary: 198 93% 60%;
+    --sidebar-primary-foreground: 199 100% 12%;
+    --sidebar-accent: 221 48% 9%;
+    --sidebar-accent-foreground: 222 65% 82%;
+    --sidebar-border: 221 48% 9%;
+    --sidebar-ring: 221 48% 9%;
+
     --radius: 0.5rem;
   }
   .theme-coffee {
-    --border: 37 47% 57%;
-    --input: 37 47% 57%;
-    --ring: 37 47% 57%;
     --background: 306 19% 11%;
-    --foreground: 37 47% 57%;
+    --background-accent: 308 18% 9%;
+    --foreground: 37 8% 42%;
     --primary: 30 67% 58%;
-    --primary-foreground: 30 13% 12%;
-    --secondary: 182 25% 20%;
-    --secondary-foreground: 182 5% 84%;
-    --destructive: 10 95% 75%;
-    --destructive-foreground: 10 19% 15%;
-    --muted: 306 16% 9%;
-    --muted-foreground: 37 47% 57%;
-    --accent: 194 74% 25%;
-    --accent-foreground: 194 15% 85%;
-    --popover: 306 19% 11%;
-    --popover-foreground: 37 47% 57%;
+    --primary-foreground: 29 100% 12%;
+    --secondary: 300 20% 6%;
+    --secondary-foreground: 300 15% 81%;
+    --accent: 182 25% 20%;
+    --accent-foreground: 183 68% 84%;
+    --muted: 307 18% 10%;
+    --muted-foreground: 37 8% 42%;
     --card: 306 19% 11%;
-    --card-foreground: 37 47% 57%;
+    --card-foreground: 37 8% 42%;
+    --popover: 306 19% 11%;
+    --popover-foreground: 37 8% 42%;
+    --destructive: 10 95% 75%;
+    --destructive-foreground: 9 100% 15%;
+    --input: 308 18% 9%;
+    --border: 308 18% 9%;
+    --ring: 30 67% 58%;
+    --sidebar-background: 307 18% 10%;
+    --sidebar-foreground: 37 8% 42%;
+    --sidebar-primary: 30 67% 58%;
+    --sidebar-primary-foreground: 29 100% 12%;
+    --sidebar-accent: 308 18% 9%;
+    --sidebar-accent-foreground: 37 8% 42%;
+    --sidebar-border: 308 18% 9%;
+    --sidebar-ring: 308 18% 9%;
+
     --radius: 0.5rem;
   }
   .theme-winter {
-    --border: 214 30% 32%;
-    --input: 214 30% 32%;
-    --ring: 214 30% 32%;
     --background: 0 0% 100%;
+    --background-accent: 219 44% 92%;
     --foreground: 214 30% 32%;
-    --primary: 215 100% 50%;
-    --primary-foreground: 211 28% 89%;
-    --secondary: 247 47% 43%;
-    --secondary-foreground: 247 9% 89%;
-    --destructive: 0 63% 72%;
-    --destructive-foreground: 0 13% 14%;
-    --muted: 219 44% 92%;
+    --primary: 212 100% 51%;
+    --primary-foreground: 212 100% 90%;
+    --secondary: 217 92% 10%;
+    --secondary-foreground: 217 100% 82%;
+    --accent: 247 47% 43%;
+    --accent-foreground: 247 100% 89%;
+    --muted: 217 100% 97%;
     --muted-foreground: 214 30% 32%;
-    --accent: 310 49% 52%;
-    --accent-foreground: 310 10% 10%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 214 30% 32%;
     --card: 0 0% 100%;
     --card-foreground: 214 30% 32%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 214 30% 32%;
+    --destructive: 0 63% 72%;
+    --destructive-foreground: 0 100% 15%;
+    --input: 219 44% 92%;
+    --border: 219 44% 92%;
+    --ring: 212 100% 51%;
+    --sidebar-background: 217 100% 97%;
+    --sidebar-foreground: 214 30% 32%;
+    --sidebar-primary: 212 100% 51%;
+    --sidebar-primary-foreground: 212 100% 90%;
+    --sidebar-accent: 219 44% 92%;
+    --sidebar-accent-foreground: 214 30% 32%;
+    --sidebar-border: 219 44% 92%;
+    --sidebar-ring: 219 44% 92%;
+
     --radius: 0.5rem;
   }
-  .theme-dim {
-    --border: 197 31% 77%;
-    --input: 197 31% 77%;
-    --ring: 197 31% 77%;
-    --background: 220 18% 20%;
-    --foreground: 197 31% 77%;
-    --primary: 108 66% 73%;
-    --primary-foreground: 108 13% 15%;
-    --secondary: 12 100% 68%;
-    --secondary-foreground: 12 20% 14%;
-    --destructive: 11 100% 80%;
-    --destructive-foreground: 11 20% 16%;
-    --muted: 219 18% 15%;
-    --muted-foreground: 197 31% 77%;
-    --accent: 277 66% 74%;
-    --accent-foreground: 277 13% 15%;
-    --popover: 220 18% 20%;
-    --popover-foreground: 197 31% 77%;
-    --card: 220 18% 20%;
-    --card-foreground: 197 31% 77%;
-    --radius: 0.5rem;
-  }
-  .theme-nord {
-    --border: 220 16% 22%;
-    --input: 220 16% 22%;
-    --ring: 220 16% 22%;
-    --background: 217 27% 94%;
-    --foreground: 220 16% 22%;
-    --primary: 213 32% 52%;
-    --primary-foreground: 213 6% 10%;
-    --secondary: 210 34% 63%;
-    --secondary-foreground: 210 7% 13%;
-    --destructive: 354 42% 56%;
-    --destructive-foreground: 354 8% 11%;
-    --muted: 219 28% 88%;
-    --muted-foreground: 220 16% 22%;
-    --accent: 193 43% 67%;
-    --accent-foreground: 193 9% 13%;
-    --popover: 217 27% 94%;
-    --popover-foreground: 220 16% 22%;
-    --card: 217 27% 94%;
-    --card-foreground: 220 16% 22%;
-    --radius: 0.2rem;
-  }
-  .theme-sunset {
-    --border: 208 34% 72%;
-    --input: 208 34% 72%;
-    --ring: 208 34% 72%;
-    --background: 204 31% 10%;
-    --foreground: 208 34% 72%;
-    --primary: 16 100% 68%;
-    --primary-foreground: 16 20% 14%;
-    --secondary: 341 97% 71%;
-    --secondary-foreground: 341 19% 14%;
-    --destructive: 358 100% 87%;
-    --destructive-foreground: 358 20% 17%;
-    --muted: 204 45% 7%;
-    --muted-foreground: 208 34% 72%;
-    --accent: 263 92% 75%;
-    --accent-foreground: 263 18% 15%;
-    --popover: 204 31% 10%;
-    --popover-foreground: 208 34% 72%;
-    --card: 204 31% 10%;
-    --card-foreground: 208 34% 72%;
-    --radius: 0.8rem;
-  }
 }
 
 @layer base {
diff --git a/frontend/components/App/HeaderDecor.vue b/frontend/components/App/HeaderDecor.vue
index e1b04842..35e1c4cd 100644
--- a/frontend/components/App/HeaderDecor.vue
+++ b/frontend/components/App/HeaderDecor.vue
@@ -1,116 +1,75 @@
-<script lang="ts" setup>
-  // https://stackoverflow.com/questions/36721830/convert-hsl-to-rgb-and-hex
-  function hslToHex(h: number, s: number, l: number) {
-    l /= 100;
-    const a = (s * Math.min(l, 1 - l)) / 100;
-    const f = (n: number) => {
-      const k = (n + h / 30) % 12;
-      const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
-      return Math.round(255 * color)
-        .toString(16)
-        .padStart(2, "0"); // convert to Hex and prefix "0" if needed
-    };
-    return `#${f(0)}${f(8)}${f(4)}`;
-  }
-
-  function unstring(value: string): [number, number, number] {
-    const [h, s, l] = value
-      .replace("hsla(", "")
-      .replace(")", "")
-      .replace(/%/g, "")
-      .split(",")
-      .map(v => v.trim());
-
-    return [Number(h), Number(s), Number(l)];
-  }
-
-  const primary = useCssVar("--p");
-  const primaryHex = computed(() => hslToHex(...unstring(primary.value)));
-
-  const secondary = useCssVar("--s");
-  const secondaryHex = computed(() => hslToHex(...unstring(secondary.value)));
-
-  const accent = useCssVar("--a");
-  const accentHex = computed(() => hslToHex(...unstring(accent.value)));
-
-  const neutral = useCssVar("--n");
-  const neutralHex = computed(() => hslToHex(...unstring(neutral.value)));
-
-  const base100 = useCssVar("--b1");
-  const base100Hex = computed(() => hslToHex(...unstring(base100.value)));
-</script>
 <template>
   <svg viewBox="0 0 1440 237" role="img" fill="none" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
     <g clip-path="url(#clip0_5_1510)" filter="url(#filter0_d_5_1510)">
       <rect width="1440" height="310" transform="translate(0 -103)" fill="white" />
-      <rect y="-103" width="1440" height="310" :fill="neutralHex" />
+      <rect y="-103" width="1440" height="310" class="fill-secondary" />
       <g clip-path="url(#clip1_5_1510)">
         <path
           d="M1344.93 230.569H1269.12V185.083H1299.44C1305.42 185.083 1311.33 186.26 1316.85 188.546C1322.37 190.832 1327.38 194.182 1331.61 198.406C1340.14 206.936 1344.93 218.505 1344.93 230.569V230.569Z"
-          :fill="primaryHex"
+          class="fill-accent/50"
         />
         <path
           d="M1297.89 170.07C1297.89 166.675 1295.14 163.923 1291.75 163.923C1288.35 163.923 1285.6 166.675 1285.6 170.07C1285.6 173.465 1288.35 176.218 1291.75 176.218C1295.14 176.218 1297.89 173.465 1297.89 170.07Z"
-          :fill="base100Hex"
+          class="fill-background"
         />
         <path
           d="M1328.45 170.07C1328.45 166.675 1325.7 163.923 1322.3 163.923C1318.91 163.923 1316.15 166.675 1316.15 170.07C1316.15 173.465 1318.91 176.218 1322.3 176.218C1325.7 176.218 1328.45 173.465 1328.45 170.07Z"
-          :fill="base100Hex"
+          class="fill-background"
         />
       </g>
       <g clip-path="url(#clip2_5_1510)">
         <path
           d="M1401.78 60C1409.28 60 1416.61 62.2231 1422.84 66.388C1429.08 70.553 1433.93 76.4728 1436.8 83.3989C1439.67 90.325 1440.42 97.9463 1438.96 105.299C1437.5 112.652 1433.89 119.406 1428.59 124.707C1423.29 130.008 1416.53 133.618 1409.18 135.08C1401.83 136.543 1394.2 135.792 1387.28 132.923C1380.35 130.054 1374.43 125.196 1370.27 118.963C1366.1 112.729 1363.88 105.401 1363.88 97.9043V60H1401.78Z"
-          :fill="base100Hex"
+          class="fill-background"
         />
       </g>
       <g clip-path="url(#clip3_5_1510)">
-        <path d="M1269.12 135.809H1344.93V60H1269.12V135.809Z" :fill="accentHex" />
+        <path d="M1269.12 135.809H1344.93V60H1269.12V135.809Z" class="fill-primary" />
       </g>
       <g clip-path="url(#clip4_5_1510)">
         <path
           d="M1250.17 97.9043C1250.17 105.401 1247.95 112.729 1243.78 118.963C1239.62 125.196 1233.7 130.054 1226.77 132.923C1219.84 135.792 1212.22 136.543 1204.87 135.08C1197.52 133.618 1190.76 130.008 1185.46 124.707C1180.16 119.406 1176.55 112.652 1175.09 105.299C1173.63 97.9463 1174.38 90.325 1177.25 83.3989C1180.11 76.4728 1184.97 70.553 1191.21 66.388C1197.44 62.2231 1204.77 60 1212.26 60H1250.17V97.9043Z"
-          :fill="secondaryHex"
+          class="fill-accent"
         />
       </g>
       <g clip-path="url(#clip5_5_1510)">
-        <path d="M1079.6 135.809H1155.41V60H1079.6V135.809Z" :fill="accentHex" />
+        <path d="M1079.6 135.809H1155.41V60H1079.6V135.809Z" class="fill-primary" />
       </g>
       <g clip-path="url(#clip6_5_1510)">
         <path
           d="M890.08 60L965.888 60V105.485H935.565C929.592 105.485 923.677 104.309 918.159 102.023C912.64 99.7369 907.626 96.3865 903.402 92.1628C894.872 83.6327 890.08 72.0634 890.08 60V60Z"
-          :fill="primaryHex"
+          class="fill-accent/50"
         />
         <path
           d="M937.114 120.498C937.114 123.893 939.866 126.646 943.261 126.646C946.656 126.646 949.408 123.893 949.408 120.498C949.408 117.103 946.656 114.351 943.261 114.351C939.866 114.351 937.114 117.103 937.114 120.498Z"
-          :fill="base100Hex"
+          class="fill-background"
         />
         <path
           d="M906.56 120.498C906.56 123.893 909.312 126.646 912.707 126.646C916.102 126.646 918.855 123.893 918.855 120.498C918.855 117.103 916.102 114.351 912.707 114.351C909.312 114.351 906.56 117.103 906.56 120.498Z"
-          :fill="base100Hex"
+          class="fill-background"
         />
       </g>
       <g clip-path="url(#clip7_5_1510)">
-        <path d="M795.32 154.76V230.569H871.128V154.76H795.32Z" :fill="accentHex" />
+        <path d="M795.32 154.76V230.569H871.128V154.76H795.32Z" class="fill-primary" />
       </g>
       <g clip-path="url(#clip8_5_1510)">
         <path
           d="M776.368 154.76V230.569H730.883V200.245C730.883 194.272 732.06 188.357 734.346 182.839C736.632 177.32 739.982 172.306 744.206 168.082C752.736 159.552 764.305 154.76 776.368 154.76V154.76Z"
-          :fill="primaryHex"
+          class="fill-accent/50"
         />
         <path
           d="M715.87 201.794C712.475 201.794 709.723 204.546 709.723 207.941C709.723 211.336 712.475 214.089 715.87 214.089C719.265 214.089 722.018 211.336 722.018 207.941C722.018 204.546 719.265 201.794 715.87 201.794Z"
-          :fill="base100Hex"
+          class="fill-background"
         />
         <path
           d="M715.87 171.24C712.475 171.24 709.723 173.992 709.723 177.387C709.723 180.782 712.475 183.535 715.87 183.535C719.265 183.535 722.018 180.782 722.018 177.387C722.018 173.992 719.265 171.24 715.87 171.24Z"
-          :fill="base100Hex"
+          class="fill-background"
         />
       </g>
       <g clip-path="url(#clip9_5_1510)">
         <path
           d="M871.128 97.9043C871.128 105.401 868.905 112.729 864.74 118.963C860.575 125.196 854.656 130.054 847.73 132.923C840.803 135.792 833.182 136.543 825.829 135.08C818.477 133.618 811.723 130.008 806.422 124.707C801.121 119.406 797.511 112.652 796.048 105.299C794.586 97.9463 795.336 90.325 798.205 83.3989C801.074 76.4728 805.932 70.553 812.166 66.388C818.399 62.2231 825.727 60 833.224 60H871.128V97.9043Z"
-          :fill="base100Hex"
+          class="fill-background"
         />
       </g>
       <g clip-path="url(#clip10_5_1510)">
@@ -125,21 +84,21 @@
       <g clip-path="url(#clip11_5_1510)">
         <path
           d="M605.8 97.9043C605.8 90.4075 608.023 83.0791 612.188 76.8458C616.353 70.6125 622.273 65.7542 629.199 62.8853C636.125 60.0164 643.746 59.2658 651.099 60.7283C658.452 62.1909 665.206 65.8009 670.507 71.1019C675.808 76.4029 679.418 83.1568 680.88 90.5095C682.343 97.8622 681.592 105.483 678.723 112.41C675.854 119.336 670.996 125.256 664.763 129.42C658.529 133.585 651.201 135.809 643.704 135.809H605.8V97.9043Z"
-          :fill="base100Hex"
+          class="fill-background"
         />
       </g>
       <g clip-path="url(#clip12_5_1510)">
         <path
           d="M511.04 135.809V60L556.525 60V90.3234C556.525 96.2966 555.349 102.211 553.063 107.73C550.777 113.248 547.426 118.263 543.203 122.486C534.673 131.016 523.103 135.809 511.04 135.809V135.809Z"
-          :fill="primaryHex"
+          class="fill-accent/50"
         />
         <path
           d="M571.538 88.7746C574.933 88.7746 577.685 86.0224 577.685 82.6273C577.685 79.2323 574.933 76.48 571.538 76.48C568.143 76.48 565.391 79.2323 565.391 82.6273C565.391 86.0224 568.143 88.7746 571.538 88.7746Z"
-          :fill="base100Hex"
+          class="fill-background"
         />
         <path
           d="M571.538 119.328C574.933 119.328 577.685 116.576 577.685 113.181C577.685 109.786 574.933 107.034 571.538 107.034C568.143 107.034 565.391 109.786 565.391 113.181C565.391 116.576 568.143 119.328 571.538 119.328Z"
-          :fill="base100Hex"
+          class="fill-background"
         />
       </g>
       <g clip-path="url(#clip13_5_1510)">
@@ -154,129 +113,129 @@
       <g clip-path="url(#clip14_5_1510)">
         <path
           d="M454.184 135.809C446.687 135.809 439.359 133.585 433.126 129.42C426.892 125.256 422.034 119.336 419.165 112.41C416.296 105.483 415.546 97.8622 417.008 90.5095C418.471 83.1568 422.081 76.4029 427.382 71.1019C432.683 65.8009 439.437 62.1909 446.789 60.7283C454.142 59.2658 461.763 60.0164 468.689 62.8853C475.616 65.7542 481.535 70.6125 485.7 76.8458C489.865 83.0791 492.088 90.4075 492.088 97.9043V135.809H454.184Z"
-          :fill="secondaryHex"
+          class="fill-accent"
         />
       </g>
       <g clip-path="url(#clip15_5_1510)">
         <path
           d="M132 230.569V154.76H177.485V185.083C177.485 191.057 176.309 196.971 174.023 202.49C171.737 208.008 168.387 213.023 164.163 217.246C155.633 225.776 144.063 230.569 132 230.569V230.569Z"
-          :fill="primaryHex"
+          class="fill-accent/50"
         />
         <path
           d="M192.498 183.535C195.893 183.535 198.646 180.782 198.646 177.387C198.646 173.992 195.893 171.24 192.498 171.24C189.103 171.24 186.351 173.992 186.351 177.387C186.351 180.782 189.103 183.535 192.498 183.535Z"
-          :fill="base100Hex"
+          class="fill-background"
         />
         <path
           d="M192.498 214.089C195.893 214.089 198.646 211.336 198.646 207.941C198.646 204.546 195.893 201.794 192.498 201.794C189.103 201.794 186.351 204.546 186.351 207.941C186.351 211.336 189.103 214.089 192.498 214.089Z"
-          :fill="base100Hex"
+          class="fill-background"
         />
       </g>
       <g clip-path="url(#clip16_5_1510)">
         <path
           d="M302.569 135.809H226.76V90.3234H257.083C263.057 90.3234 268.971 91.4999 274.49 93.7858C280.008 96.0716 285.023 99.422 289.246 103.646C297.776 112.176 302.569 123.745 302.569 135.809V135.809Z"
-          :fill="primaryHex"
+          class="fill-accent/50"
         />
         <path
           d="M255.535 75.3103C255.535 71.9152 252.782 69.163 249.387 69.163C245.992 69.163 243.24 71.9152 243.24 75.3103C243.24 78.7054 245.992 81.4576 249.387 81.4576C252.782 81.4576 255.535 78.7054 255.535 75.3103Z"
-          :fill="base100Hex"
+          class="fill-background"
         />
         <path
           d="M286.089 75.3103C286.089 71.9152 283.336 69.163 279.941 69.163C276.546 69.163 273.794 71.9152 273.794 75.3103C273.794 78.7054 276.546 81.4576 279.941 81.4576C283.336 81.4576 286.089 78.7054 286.089 75.3103Z"
-          :fill="base100Hex"
+          class="fill-background"
         />
       </g>
       <g clip-path="url(#clip17_5_1510)">
-        <path d="M207.809 60L132 60V135.809H207.809V60Z" :fill="accentHex" />
+        <path d="M207.809 60L132 60V135.809H207.809V60Z" class="fill-primary" />
       </g>
       <g clip-path="url(#clip18_5_1510)">
-        <path d="M502 -31V44.8085L577.809 44.8085V-31L502 -31Z" :fill="accentHex" />
+        <path d="M502 -31V44.8085L577.809 44.8085V-31L502 -31Z" class="fill-primary" />
       </g>
       <g clip-path="url(#clip19_5_1510)">
         <path
           d="M65.9043 -31.24C73.401 -31.24 80.7294 -29.017 86.9627 -24.852C93.1961 -20.687 98.0543 -14.7672 100.923 -7.84108C103.792 -0.914986 104.543 6.7063 103.08 14.059C101.618 21.4117 98.0076 28.1656 92.7066 33.4666C87.4056 38.7676 80.6517 42.3776 73.299 43.8402C65.9463 45.3027 58.325 44.5521 51.3989 41.6832C44.4728 38.8143 38.553 33.956 34.388 27.7227C30.2231 21.4894 28 14.161 28 6.66425L28 -31.24L65.9043 -31.24Z"
-          :fill="secondaryHex"
+          class="fill-accent"
         />
       </g>
       <g clip-path="url(#clip20_5_1510)">
         <path
           d="M160.664 44.5685C153.168 44.5685 145.839 42.3455 139.606 38.1805C133.372 34.0155 128.514 28.0957 125.645 21.1696C122.776 14.2435 122.026 6.62223 123.488 -0.730478C124.951 -8.08318 128.561 -14.8371 133.862 -20.1381C139.163 -25.4391 145.917 -29.0491 153.27 -30.5117C160.622 -31.9742 168.244 -31.2236 175.17 -28.3547C182.096 -25.4858 188.016 -20.6275 192.181 -14.3942C196.345 -8.16088 198.569 -0.832478 198.569 6.66428V44.5685H160.664Z"
-          :fill="secondaryHex"
+          class="fill-accent"
         />
       </g>
       <g clip-path="url(#clip21_5_1510)">
         <path
           d="M388.089 6.66425C388.089 14.161 385.865 21.4894 381.701 27.7227C377.536 33.956 371.616 38.8143 364.69 41.6832C357.764 44.5521 350.142 45.3027 342.79 43.8402C335.437 42.3776 328.683 38.7676 323.382 33.4666C318.081 28.1656 314.471 21.4117 313.008 14.059C311.546 6.7063 312.296 -0.914986 315.165 -7.84108C318.034 -14.7672 322.893 -20.687 329.126 -24.852C335.359 -29.017 342.688 -31.24 350.184 -31.24L388.089 -31.24V6.66425Z"
-          :fill="base100Hex"
+          class="fill-background"
         />
       </g>
       <g clip-path="url(#clip22_5_1510)">
         <path
           d="M444.944 -31.24C452.441 -31.24 459.769 -29.017 466.003 -24.852C472.236 -20.687 477.094 -14.7672 479.963 -7.84108C482.832 -0.914986 483.583 6.7063 482.12 14.059C480.658 21.4117 477.048 28.1656 471.747 33.4666C466.446 38.7676 459.692 42.3776 452.339 43.8402C444.986 45.3027 437.365 44.5521 430.439 41.6832C423.513 38.8143 417.593 33.956 413.428 27.7227C409.263 21.4894 407.04 14.161 407.04 6.66425V-31.24L444.944 -31.24Z"
-          :fill="secondaryHex"
+          class="fill-accent"
         />
       </g>
       <g clip-path="url(#clip23_5_1510)">
         <path
           d="M634.464 44.5685C626.968 44.5685 619.639 42.3455 613.406 38.1805C607.172 34.0155 602.314 28.0957 599.445 21.1696C596.576 14.2435 595.826 6.62223 597.288 -0.730478C598.751 -8.08318 602.361 -14.8371 607.662 -20.1381C612.963 -25.4391 619.717 -29.0491 627.07 -30.5117C634.422 -31.9742 642.043 -31.2236 648.97 -28.3547C655.896 -25.4858 661.816 -20.6275 665.98 -14.3942C670.145 -8.16088 672.369 -0.832478 672.369 6.66428V44.5685H634.464Z"
-          :fill="secondaryHex"
+          class="fill-accent"
         />
       </g>
       <g clip-path="url(#clip24_5_1510)">
         <path
           d="M823.984 -31.24C831.481 -31.24 838.809 -29.017 845.043 -24.852C851.276 -20.687 856.134 -14.7672 859.003 -7.84108C861.872 -0.914986 862.623 6.7063 861.16 14.059C859.698 21.4117 856.088 28.1656 850.787 33.4666C845.486 38.7676 838.732 42.3776 831.379 43.8402C824.026 45.3027 816.405 44.5521 809.479 41.6832C802.553 38.8143 796.633 33.956 792.468 27.7227C788.303 21.4894 786.08 14.161 786.08 6.66425V-31.24L823.984 -31.24Z"
-          :fill="secondaryHex"
+          class="fill-accent"
         />
       </g>
       <g clip-path="url(#clip25_5_1510)">
         <path
           d="M956.648 -31.24V44.5685L911.163 44.5685V14.2451C911.163 8.27192 912.34 2.35722 914.626 -3.16129C916.912 -8.67979 920.262 -13.694 924.486 -17.9177C933.016 -26.4478 944.585 -31.24 956.648 -31.24V-31.24Z"
-          :fill="primaryHex"
+          class="fill-accent/50"
         />
         <path
           d="M896.15 15.7939C892.755 15.7939 890.003 18.5461 890.003 21.9412C890.003 25.3363 892.755 28.0885 896.15 28.0885C899.545 28.0885 902.298 25.3363 902.298 21.9412C902.298 18.5461 899.545 15.7939 896.15 15.7939Z"
-          :fill="secondaryHex"
+          class="fill-accent"
         />
       </g>
       <g clip-path="url(#clip26_5_1510)">
         <path
           d="M1013.5 -31.24C1021 -31.24 1028.33 -29.017 1034.56 -24.852C1040.8 -20.687 1045.65 -14.7672 1048.52 -7.84108C1051.39 -0.914986 1052.14 6.7063 1050.68 14.059C1049.22 21.4117 1045.61 28.1656 1040.31 33.4666C1035.01 38.7676 1028.25 42.3776 1020.9 43.8402C1013.55 45.3027 1005.93 44.5521 998.999 41.6832C992.073 38.8143 986.153 33.956 981.988 27.7227C977.823 21.4894 975.6 14.161 975.6 6.66425V-31.24L1013.5 -31.24Z"
-          :fill="secondaryHex"
+          class="fill-accent"
         />
       </g>
       <g clip-path="url(#clip27_5_1510)">
         <path
           d="M1070.36 44.5685V-31.24H1115.85V-0.916588C1115.85 5.0566 1114.67 10.9713 1112.38 16.4898C1110.1 22.0083 1106.75 27.0226 1102.52 31.2462C1093.99 39.7764 1082.42 44.5685 1070.36 44.5685V44.5685Z"
-          :fill="primaryHex"
+          class="fill-accent/50"
         />
         <path
           d="M1130.86 28.0885C1134.25 28.0885 1137.01 25.3363 1137.01 21.9412C1137.01 18.5461 1134.25 15.7939 1130.86 15.7939C1127.46 15.7939 1124.71 18.5461 1124.71 21.9412C1124.71 25.3363 1127.46 28.0885 1130.86 28.0885Z"
-          :fill="secondaryHex"
+          class="fill-accent"
         />
       </g>
       <g clip-path="url(#clip28_5_1510)">
         <path
           d="M1203.02 44.5685C1195.53 44.5685 1188.2 42.3455 1181.97 38.1805C1175.73 34.0155 1170.87 28.0957 1168.01 21.1696C1165.14 14.2435 1164.39 6.62223 1165.85 -0.730478C1167.31 -8.08318 1170.92 -14.8371 1176.22 -20.1381C1181.52 -25.4391 1188.28 -29.0491 1195.63 -30.5117C1202.98 -31.9742 1210.6 -31.2236 1217.53 -28.3547C1224.46 -25.4858 1230.38 -20.6275 1234.54 -14.3942C1238.71 -8.16088 1240.93 -0.832478 1240.93 6.66428V44.5685H1203.02Z"
-          :fill="base100Hex"
+          class="fill-background"
         />
       </g>
       <g clip-path="url(#clip29_5_1510)">
         <path
           d="M1335.69 -31.24V44.5685L1290.2 44.5685V14.2451C1290.2 8.27192 1291.38 2.35722 1293.67 -3.16129C1295.95 -8.67979 1299.3 -13.694 1303.53 -17.9177C1312.06 -26.4478 1323.63 -31.24 1335.69 -31.24V-31.24Z"
-          :fill="primaryHex"
+          class="fill-accent/50"
         />
         <path
           d="M1275.19 15.7939C1271.8 15.7939 1269.04 18.5461 1269.04 21.9412C1269.04 25.3363 1271.8 28.0885 1275.19 28.0885C1278.59 28.0885 1281.34 25.3363 1281.34 21.9412C1281.34 18.5461 1278.59 15.7939 1275.19 15.7939Z"
-          :fill="secondaryHex"
+          class="fill-accent"
         />
       </g>
       <g clip-path="url(#clip30_5_1510)">
         <path
           d="M292.808 -31V44.8085L247.323 44.8085V14.4851C247.323 8.51194 248.5 2.59724 250.786 -2.92126C253.072 -8.43977 256.422 -13.454 260.646 -17.6777C269.176 -26.2078 280.745 -31 292.808 -31V-31Z"
-          :fill="primaryHex"
+          class="fill-accent/50"
         />
         <path
           d="M232.31 16.0339C228.915 16.0339 226.163 18.7861 226.163 22.1812C226.163 25.5763 228.915 28.3285 232.31 28.3285C235.705 28.3285 238.458 25.5763 238.458 22.1812C238.458 18.7861 235.705 16.0339 232.31 16.0339Z"
-          :fill="secondaryHex"
+          class="fill-accent"
         />
       </g>
       <path
@@ -348,7 +307,7 @@
         fill-rule="evenodd"
         clip-rule="evenodd"
         d="M1167.4 173.975C1167.4 173.782 1167.3 173.604 1167.13 173.508C1166.96 173.411 1166.76 173.411 1166.59 173.508L1155.31 180.023C1155.14 180.119 1155.04 180.297 1155.04 180.49V187.642C1155.04 187.835 1155.14 188.013 1155.31 188.109C1155.47 188.206 1155.68 188.206 1155.85 188.109L1167.13 181.594C1167.3 181.498 1167.4 181.32 1167.4 181.127V173.975V173.975Z"
-        :fill="primaryHex"
+        class="fill-primary"
       />
       <path
         fill-rule="evenodd"
diff --git a/frontend/components/App/Logo.vue b/frontend/components/App/Logo.vue
index da16ab67..0aacf513 100644
--- a/frontend/components/App/Logo.vue
+++ b/frontend/components/App/Logo.vue
@@ -29,9 +29,8 @@
     />
     <path d="M5443.74 520.879v4149.79" style="fill: none; stroke: #000; stroke-width: 153.5px" />
     <path
-      class="bg-primary"
+      class="fill-primary"
       d="M8951.41 4102.72c0-41.65-22.221-80.136-58.291-100.961-36.069-20.825-80.51-20.825-116.58 0l-2439.92 1408.69c-36.07 20.825-58.29 59.311-58.29 100.961V7058c0 41.65 22.22 80.136 58.29 100.961 36.07 20.825 80.51 20.825 116.58 0l2439.92-1408.69c36.07-20.825 58.291-59.312 58.291-100.962v-1546.59Z"
-      style="fill: hsl(var(--p) / var(--tw-bg-opacity))"
     />
     <path
       d="M8951.41 4102.72c0-41.65-22.221-80.136-58.291-100.961-36.069-20.825-80.51-20.825-116.58 0l-2439.92 1408.69c-36.07 20.825-58.29 59.311-58.29 100.961V7058c0 41.65 22.22 80.136 58.29 100.961 36.07 20.825 80.51 20.825 116.58 0l2439.92-1408.69c36.07-20.825 58.291-59.312 58.291-100.962v-1546.59ZM6463.98 5551.29v1387.06l2301.77-1328.92V4222.37L6463.98 5551.29Z"
diff --git a/frontend/components/Base/SectionHeader.vue b/frontend/components/Base/SectionHeader.vue
index f9d88315..10d9e144 100644
--- a/frontend/components/Base/SectionHeader.vue
+++ b/frontend/components/Base/SectionHeader.vue
@@ -1,11 +1,6 @@
 <template>
   <div class="pb-3">
-    <CardTitle
-      class="flex items-center"
-      :class="{
-        'text-neutral-content': dark,
-      }"
-    >
+    <CardTitle class="flex items-center">
       <slot />
     </CardTitle>
     <CardDescription v-if="$slots.description">
@@ -19,11 +14,4 @@
 
 <script lang="ts" setup>
   import { CardDescription, CardTitle } from "@/components/ui/card";
-
-  defineProps({
-    dark: {
-      type: Boolean,
-      default: false,
-    },
-  });
 </script>
diff --git a/frontend/components/Form/TextArea.vue b/frontend/components/Form/TextArea.vue
index 9c878a59..b8b3a6df 100644
--- a/frontend/components/Form/TextArea.vue
+++ b/frontend/components/Form/TextArea.vue
@@ -3,7 +3,7 @@
     <Label :for="id" class="flex w-full px-1">
       <span>{{ label }}</span>
       <span class="grow"></span>
-      <span :class="{ 'text-red-600': isLengthInvalid }">
+      <span :class="{ 'text-destructive': isLengthInvalid }">
         {{ lengthIndicator }}
       </span>
     </Label>
@@ -19,7 +19,7 @@
     <Label :for="id" class="flex w-full px-1 py-2">
       <span>{{ label }}</span>
       <span class="grow"></span>
-      <span :class="{ 'text-red-600': isLengthInvalid }">
+      <span :class="{ 'text-destructive': isLengthInvalid }">
         {{ lengthIndicator }}
       </span>
     </Label>
diff --git a/frontend/components/Form/TextField.vue b/frontend/components/Form/TextField.vue
index fe003195..6e81289e 100644
--- a/frontend/components/Form/TextField.vue
+++ b/frontend/components/Form/TextField.vue
@@ -5,7 +5,7 @@
       <span class="grow"></span>
       <span
         :class="{
-          'text-red-600':
+          'text-destructive':
             typeof value === 'string' &&
             ((maxLength !== -1 && value.length > maxLength) || (minLength !== -1 && value.length < minLength)),
         }"
@@ -29,7 +29,7 @@
       <span class="grow"></span>
       <span
         :class="{
-          'text-red-600':
+          'text-destructive':
             typeof value === 'string' &&
             ((maxLength !== -1 && value.length > maxLength) || (minLength !== -1 && value.length < minLength)),
         }"
diff --git a/frontend/components/Item/AttachmentsList.vue b/frontend/components/Item/AttachmentsList.vue
index e0247d76..eaa94fd1 100644
--- a/frontend/components/Item/AttachmentsList.vue
+++ b/frontend/components/Item/AttachmentsList.vue
@@ -1,5 +1,5 @@
 <template>
-  <ul role="list" class="divide-y divide-gray-400 rounded-md border border-gray-400">
+  <ul role="list" class="divide-y rounded-md border">
     <li
       v-for="attachment in attachments"
       :key="attachment.id"
diff --git a/frontend/components/Item/Card.vue b/frontend/components/Item/Card.vue
index b90b30e0..f38573eb 100644
--- a/frontend/components/Item/Card.vue
+++ b/frontend/components/Item/Card.vue
@@ -4,14 +4,14 @@
       <div class="relative h-[200px]">
         <img v-if="imageUrl" class="h-[200px] w-full object-cover shadow-md" loading="lazy" :src="imageUrl" alt="" />
         <div class="absolute inset-x-1 bottom-1">
-          <Badge class="text-wrap bg-neutral text-neutral-content hover:bg-neutral/90 hover:underline">
+          <Badge class="text-wrap bg-secondary text-secondary-foreground hover:bg-secondary/70 hover:underline">
             <NuxtLink v-if="item.location" :to="`/location/${item.location.id}`">
               {{ locationString }}
             </NuxtLink>
           </Badge>
         </div>
       </div>
-      <div class="col-span-4 flex grow flex-col gap-y-1 bg-base-100 p-4 pt-2">
+      <div class="col-span-4 flex grow flex-col gap-y-1 p-4 pt-2">
         <h2 class="line-clamp-2 text-ellipsis text-wrap text-lg font-bold">{{ item.name }}</h2>
         <Separator class="mb-1" />
         <TooltipProvider :delay-duration="0">
@@ -26,7 +26,7 @@
             </Tooltip>
             <Tooltip v-if="item.archived">
               <TooltipTrigger>
-                <MdiArchive class="size-5 text-red-700" />
+                <MdiArchive class="size-5 text-destructive" />
               </TooltipTrigger>
               <TooltipContent>
                 {{ $t("global.archived") }}
diff --git a/frontend/components/Item/CreateModal.vue b/frontend/components/Item/CreateModal.vue
index 36d98bc0..da65e1c5 100644
--- a/frontend/components/Item/CreateModal.vue
+++ b/frontend/components/Item/CreateModal.vue
@@ -56,14 +56,10 @@
       </div>
 
       <!-- photo preview area is AFTER the create button, to avoid pushing the button below the screen on small displays -->
-      <div v-if="form.photos.length > 0" class="mt-4 border-t border-gray-300 px-4 pb-4">
+      <div v-if="form.photos.length > 0" class="mt-4 border-t px-4 pb-4">
         <div v-for="(photo, index) in form.photos" :key="index">
           <div class="mt-8 w-full">
-            <img
-              :src="photo.fileBase64"
-              class="w-full rounded border-gray-300 object-fill shadow-sm"
-              alt="Uploaded Photo"
-            />
+            <img :src="photo.fileBase64" class="w-full rounded object-fill shadow-sm" alt="Uploaded Photo" />
           </div>
           <div class="mt-2 flex items-center gap-2">
             <TooltipProvider class="flex gap-2" :delay-duration="0">
diff --git a/frontend/components/Item/View/Table.vue b/frontend/components/Item/View/Table.vue
index 53c96b0e..231aa3d7 100644
--- a/frontend/components/Item/View/Table.vue
+++ b/frontend/components/Item/View/Table.vue
@@ -52,7 +52,7 @@
           <TableHead
             v-for="h in headers.filter(h => h.enabled)"
             :key="h.value"
-            class="text-no-transform cursor-pointer bg-neutral text-sm text-neutral-content hover:bg-neutral/90"
+            class="text-no-transform cursor-pointer bg-secondary text-sm text-secondary-foreground hover:bg-secondary/90"
             @click="sortBy(h.value)"
           >
             <div
@@ -97,7 +97,7 @@
             </template>
             <template v-else-if="h.type === 'boolean'">
               <MdiCheck v-if="d.insured" class="inline size-5 text-green-500" />
-              <MdiClose v-else class="inline size-5 text-red-500" />
+              <MdiClose v-else class="inline size-5 text-destructive" />
             </template>
             <template v-else-if="h.type === 'location'">
               <NuxtLink v-if="d.location" class="hover:underline" :to="`/location/${d.location.id}`">
diff --git a/frontend/components/Label/Chip.vue b/frontend/components/Label/Chip.vue
index 8f164732..364436d7 100644
--- a/frontend/components/Label/Chip.vue
+++ b/frontend/components/Label/Chip.vue
@@ -18,7 +18,7 @@
 
 <template>
   <NuxtLink
-    class="group/label-chip flex gap-2 rounded-full bg-secondary text-secondary-foreground shadow transition duration-300 hover:bg-secondary/70"
+    class="group/label-chip flex gap-2 rounded-full bg-accent text-accent-foreground shadow transition duration-300 hover:bg-accent/50"
     :class="{
       'p-4 py-1 text-base': size === 'lg',
       'p-3 py-1 text-sm': size !== 'sm' && size !== 'lg',
diff --git a/frontend/components/Location/Tree/Node.vue b/frontend/components/Location/Tree/Node.vue
index 72f8ca63..cdce9aeb 100644
--- a/frontend/components/Location/Tree/Node.vue
+++ b/frontend/components/Location/Tree/Node.vue
@@ -41,14 +41,14 @@
     <div
       class="flex items-center gap-1 rounded p-1"
       :class="{
-        'cursor-pointer hover:bg-base-200': hasChildren,
+        'cursor-pointer hover:bg-accent hover:text-accent-foreground': hasChildren,
       }"
       @click="openRef = !openRef"
     >
       <div
         class="mr-1 flex items-center justify-center rounded p-0.5"
         :class="{
-          'hover:bg-base-200': hasChildren,
+          'hover:bg-accent hover:text-accent-foreground': hasChildren,
         }"
       >
         <div v-if="!hasChildren" class="size-6"></div>
diff --git a/frontend/components/Maintenance/ListView.vue b/frontend/components/Maintenance/ListView.vue
index 1faaeb06..bd1590f2 100644
--- a/frontend/components/Maintenance/ListView.vue
+++ b/frontend/components/Maintenance/ListView.vue
@@ -128,8 +128,8 @@
     <MaintenanceEditModal ref="maintenanceEditModal" @changed="refreshList"></MaintenanceEditModal>
     <div class="container space-y-6">
       <BaseCard v-for="e in maintenanceDataList" :key="e.id">
-        <BaseSectionHeader class="border-b border-b-gray-300 p-6">
-          <span class="mb-2 text-base-content">
+        <BaseSectionHeader class="border-b p-6">
+          <span class="mb-2">
             <span v-if="!props.currentItemId">
               <NuxtLink class="hover:underline" :to="`/item/${(e as MaintenanceEntryWithDetails).itemID}/maintenance`">
                 {{ (e as MaintenanceEntryWithDetails).itemName }}
@@ -191,7 +191,7 @@
       <div v-if="props.currentItemId" class="hidden first:block">
         <button
           type="button"
-          class="relative block w-full rounded-lg border-2 border-dashed border-base-content p-12 text-center"
+          class="relative block w-full rounded-lg border-2 border-dashed p-12 text-center"
           @click="maintenanceEditModal?.openCreateModal(props.currentItemId)"
         >
           <MdiWrenchClock class="inline size-16" />
diff --git a/frontend/components/Search/Filter.vue b/frontend/components/Search/Filter.vue
index ca2cb3b9..bab1d8e8 100644
--- a/frontend/components/Search/Filter.vue
+++ b/frontend/components/Search/Filter.vue
@@ -14,7 +14,7 @@
         <Label
           v-for="v in selectedView"
           :key="v.id"
-          class="flex cursor-pointer justify-between px-4 py-2 text-sm hover:bg-base-200"
+          class="flex cursor-pointer justify-between px-4 py-2 text-sm hover:bg-accent hover:text-accent-foreground"
         >
           <div>
             <span>{{ v.name }}</span>
@@ -26,11 +26,13 @@
         <Label
           v-for="v in unselected"
           :key="v.id"
-          class="flex cursor-pointer justify-between px-4 py-2 text-sm hover:bg-base-200"
+          class="flex cursor-pointer justify-between px-4 py-2 text-sm hover:bg-accent hover:text-accent-foreground"
         >
           <div>
             <div>{{ v.name }}</div>
-            <div v-if="v.treeString && v.treeString !== v.name" class="ml-auto text-xs">{{ v.treeString }}</div>
+            <div v-if="v.treeString && v.treeString !== v.name" class="ml-auto text-xs">
+              {{ v.treeString }}
+            </div>
           </div>
           <Checkbox :model-value="false" @update:model-value="_ => (selected = [...selected, v])" />
         </Label>
diff --git a/frontend/components/global/DetailsSection/DetailsSection.vue b/frontend/components/global/DetailsSection/DetailsSection.vue
index 09a5abec..8b1a0562 100644
--- a/frontend/components/global/DetailsSection/DetailsSection.vue
+++ b/frontend/components/global/DetailsSection/DetailsSection.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="border-t border-gray-300 px-4 py-5 sm:p-0">
-    <dl class="sm:divide-y sm:divide-gray-300">
+  <div class="border-t px-4 py-5 sm:p-0">
+    <dl class="sm:divide-y">
       <div v-for="(detail, i) in details" :key="i" class="group py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-        <dt class="text-sm font-medium text-base-content">
+        <dt class="text-sm font-medium">
           {{ $t(detail.name) }}
         </dt>
-        <dd class="text-start text-sm text-base-content sm:col-span-2">
+        <dd class="text-start text-sm sm:col-span-2">
           <slot :name="detail.slot || detail.name" v-bind="{ detail }">
             <DateTime
               v-if="detail.type == 'date'"
diff --git a/frontend/components/global/StatCard/StatCard.vue b/frontend/components/global/StatCard/StatCard.vue
index 9e1e41ea..c69eefcf 100644
--- a/frontend/components/global/StatCard/StatCard.vue
+++ b/frontend/components/global/StatCard/StatCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <Card class="flex flex-col items-center bg-neutral p-3 text-neutral-content shadow">
+  <Card class="flex flex-col items-center bg-secondary p-3 text-secondary-foreground shadow">
     <CardHeader class="p-0">
       <CardTitle class="text-sm font-medium">{{ title }}</CardTitle>
     </CardHeader>
diff --git a/frontend/components/global/Table.vue b/frontend/components/global/Table.vue
deleted file mode 100644
index d73687b5..00000000
--- a/frontend/components/global/Table.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-  <div class="overflow-x-auto">
-    <table class="table w-full">
-      <thead>
-        <tr class="bg-primary">
-          <th
-            v-for="h in headers"
-            :key="h.value"
-            class="text-no-transform bg-neutral text-sm text-neutral-content"
-            :class="{
-              'text-center': h.align === 'center',
-              'text-right': h.align === 'right',
-              'text-left': h.align === 'left',
-            }"
-          >
-            <template v-if="typeof h === 'string'">{{ h }}</template>
-            <template v-else>{{ h.text }}</template>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <!-- row 1 -->
-        <tr v-for="(d, i) in data" :key="i">
-          <td
-            v-for="h in headers"
-            :key="`${h.value}-${i}`"
-            class="bg-base-100"
-            :class="{
-              'text-center': h.align === 'center',
-              'text-right': h.align === 'right',
-              'text-left': h.align === 'left',
-            }"
-          >
-            <slot :name="cell(h)" v-bind="{ item: d }">
-              {{ extractValue(d, h.value) }}
-            </slot>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import type { TableData, TableHeader } from "./Table.types";
-
-  type Props = {
-    headers: TableHeader[];
-    data: TableData[];
-  };
-
-  function extractValue(data: TableData, value: string) {
-    const parts = value.split(".");
-    let current = data;
-    for (const part of parts) {
-      current = current[part];
-    }
-    return current;
-  }
-
-  function cell(h: TableHeader) {
-    return `cell-${h.value.replace(".", "_")}`;
-  }
-
-  defineProps<Props>();
-</script>
-
-<style scoped></style>
diff --git a/frontend/components/ui/sonner/Sonner.vue b/frontend/components/ui/sonner/Sonner.vue
index 4394db34..a82aff26 100644
--- a/frontend/components/ui/sonner/Sonner.vue
+++ b/frontend/components/ui/sonner/Sonner.vue
@@ -5,20 +5,19 @@ const props = defineProps<ToasterProps>()
 </script>
 
 <template>
-  <!-- TODO: once daisyui is removed, remove shadcn- prefix -->
   <Sonner
-    class="shadcn-toaster group"
+    class="toaster group"
     v-bind="props"
     rich-colors
     visible-toasts="10"
     :toast-options="{
       classes: {
-        toast: 'group shadcn-toast group-[.shadcn-toaster]:bg-background group-[.shadcn-toaster]:text-foreground group-[.shadcn-toaster]:border-border group-[.shadcn-toaster]:shadow-lg',
-        description: 'group-[.shadcn-toast]:text-muted-foreground',
+        toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+        description: 'group-[.toast]:text-muted-foreground',
         actionButton:
-          'group-[.shadcn-toast]:bg-primary group-[.shadcn-toast]:text-primary-foreground',
+          'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
         cancelButton:
-          'group-[.shadcn-toast]:bg-muted group-[.shadcn-toast]:text-muted-foreground',
+          'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
       },
     }"
   />
diff --git a/frontend/composables/use-theme.ts b/frontend/composables/use-theme.ts
index 9284e3ff..abf07f05 100644
--- a/frontend/composables/use-theme.ts
+++ b/frontend/composables/use-theme.ts
@@ -75,7 +75,6 @@ export const themes = [
   "theme-corporate",
   "theme-cupcake",
   "theme-cyberpunk",
-  "theme-dark",
   "theme-dracula",
   "theme-emerald",
   "theme-fantasy",
@@ -97,7 +96,4 @@ export const themes = [
   "theme-night",
   "theme-coffee",
   "theme-winter",
-  "theme-dim",
-  "theme-nord",
-  "theme-sunset",
 ];
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index bf79f04e..c9b2c937 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -13,10 +13,12 @@
     <AppQuickMenuModal :actions="quickMenuActions" />
     <SidebarProvider :default-open="sidebarState">
       <Sidebar collapsible="icon">
-        <SidebarHeader class="items-center bg-base-200">
-          <SidebarGroupLabel class="text-base">{{ $t("global.welcome", { username: username }) }}</SidebarGroupLabel>
+        <SidebarHeader class="items-center">
+          <SidebarGroupLabel class="text-base group-data-[collapsible=icon]:hidden">{{
+            $t("global.welcome", { username: username })
+          }}</SidebarGroupLabel>
           <NuxtLink class="group-data-[collapsible=icon]:hidden" to="/home">
-            <div class="flex size-24 items-center justify-center rounded-full bg-base-300 p-4 text-neutral-content">
+            <div class="flex size-24 items-center justify-center rounded-full bg-background-accent p-4">
               <AppLogo />
             </div>
           </NuxtLink>
@@ -51,16 +53,15 @@
           </DropdownMenu>
         </SidebarHeader>
 
-        <SidebarContent class="bg-base-200">
+        <SidebarContent>
           <SidebarGroup>
             <SidebarMenu>
               <SidebarMenuItem v-for="n in nav" :key="n.id">
                 <SidebarMenuLink
                   :href="n.to"
                   :class="{
-                    'bg-secondary text-secondary-foreground': n.active?.value,
+                    'bg-accent text-accent-foreground': n.active?.value,
                     'text-nowrap': typeof locale === 'string' && locale.startsWith('zh-'),
-                    'hover:bg-base-300': !n.active?.value,
                   }"
                   :tooltip="n.name.value"
                 >
@@ -72,9 +73,9 @@
           </SidebarGroup>
         </SidebarContent>
 
-        <SidebarFooter class="bg-base-200">
+        <SidebarFooter>
           <SidebarMenuButton
-            class="flex justify-center hover:bg-base-300 group-data-[collapsible=icon]:justify-start group-data-[collapsible=icon]:bg-destructive group-data-[collapsible=icon]:text-destructive-foreground group-data-[collapsible=icon]:shadow-sm group-data-[collapsible=icon]:hover:bg-destructive/90"
+            class="flex justify-center group-data-[collapsible=icon]:justify-start group-data-[collapsible=icon]:bg-destructive group-data-[collapsible=icon]:text-destructive-foreground group-data-[collapsible=icon]:shadow-sm group-data-[collapsible=icon]:hover:bg-destructive/90"
             :tooltip="$t('global.sign_out')"
             @click="logout"
           >
@@ -87,14 +88,14 @@
 
         <SidebarRail />
       </Sidebar>
-      <SidebarInset class="min-h-screen bg-base-300">
+      <SidebarInset class="min-h-screen bg-background-accent">
         <div class="justify-center pt-20 lg:pt-0">
           <AppHeaderDecor v-if="preferences.displayHeaderDecor" class="-mt-10 hidden lg:block" />
           <SidebarTrigger class="absolute left-2 top-2 hidden lg:flex" variant="default" />
           <div class="fixed top-0 z-20 flex h-16 w-full items-center gap-2 bg-primary p-2 shadow-md lg:hidden">
-            <SidebarTrigger />
+            <SidebarTrigger class="hover:bg-foreground" />
             <NuxtLink to="/home">
-              <h2 class="flex text-3xl font-bold tracking-tight text-base-100">
+              <h2 class="flex text-3xl font-bold tracking-tight text-primary-foreground">
                 HomeB
                 <AppLogo class="-mb-3 w-8" />
                 x
@@ -103,7 +104,8 @@
           </div>
 
           <slot></slot>
-          <footer v-if="status" class="bottom-0 w-full bg-base-300 pb-4 text-center text-secondary-content">
+
+          <footer v-if="status" class="bottom-0 w-full pb-4 text-center">
             <p class="text-center text-sm">
               <span
                 v-html="
diff --git a/frontend/package.json b/frontend/package.json
index a40f59b7..62513448 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -43,7 +43,6 @@
     "vue-tsc": "2.1.6"
   },
   "dependencies": {
-    "@headlessui/vue": "^1.7.23",
     "@nuxtjs/color-mode": "^3.5.2",
     "@nuxtjs/tailwindcss": "^6.13.2",
     "@pinia/nuxt": "^0.5.5",
@@ -59,7 +58,6 @@
     "autoprefixer": "^10.4.21",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "daisyui": "^2.52.0",
     "date-fns": "^3.6.0",
     "dompurify": "^3.2.5",
     "fuzzysort": "^3.1.0",
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 402637a6..685abce4 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -140,8 +140,7 @@
 
 <template>
   <div class="flex min-h-screen flex-col">
-    <!-- TODO: when daisyui is removed then add -z-10 -->
-    <div class="absolute top-0 min-w-full fill-primary">
+    <div class="absolute top-0 -z-10 min-w-full fill-primary">
       <div class="flex min-h-[20vh] flex-col bg-primary" />
       <svg
         class="fill-primary drop-shadow-xl"
@@ -156,17 +155,17 @@
       </svg>
     </div>
     <div>
-      <header class="mx-auto p-4 sm:flex sm:items-end sm:p-6 lg:p-14">
+      <header class="mx-auto p-4 text-accent sm:flex sm:items-end sm:p-6 lg:p-14">
         <div class="z-10">
-          <h2 class="mt-1 flex text-4xl font-bold tracking-tight text-neutral-content sm:text-5xl lg:text-6xl">
+          <h2 class="mt-1 flex text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
             HomeB
             <AppLogo class="-mb-4 w-12" />
             x
           </h2>
-          <p class="ml-1 text-lg text-base-content/50">{{ $t("index.tagline") }}</p>
+          <p class="ml-1 text-lg text-foreground">{{ $t("index.tagline") }}</p>
         </div>
         <TooltipProvider :delay-duration="0">
-          <div class="z-10 ml-auto mt-6 flex items-center gap-4 text-neutral-content sm:mt-0">
+          <div class="z-10 ml-auto mt-6 flex items-center gap-4 sm:mt-0">
             <Tooltip>
               <TooltipTrigger as-child>
                 <a href="https://github.com/sysadminsmedia/homebox" target="_blank">
@@ -208,8 +207,7 @@
         </TooltipProvider>
       </header>
       <div class="grid min-h-[50vh] p-6 sm:place-items-center">
-        <!-- TODO: when daisyui is removed then remove z-10 -->
-        <div class="z-10">
+        <div>
           <Transition name="slide-fade">
             <form v-if="registerForm" @submit.prevent="registerUser">
               <Card class="md:w-[500px]">
@@ -288,7 +286,7 @@
               </div>
               {{ registerForm ? $t("index.login") : $t("index.register") }}
             </Button>
-            <p v-else class="inline-flex items-center gap-2 text-sm italic text-base-content">
+            <p v-else class="inline-flex items-center gap-2 text-sm italic">
               <MdiLock class="inline-block size-4" />
               {{ $t("index.disabled_registration") }}
             </p>
diff --git a/frontend/pages/item/[id]/index.vue b/frontend/pages/item/[id]/index.vue
index 13040e5d..c8fd697e 100644
--- a/frontend/pages/item/[id]/index.vue
+++ b/frontend/pages/item/[id]/index.vue
@@ -23,6 +23,7 @@
   import { useDialog } from "@/components/ui/dialog-provider";
   import { Label } from "@/components/ui/label";
   import { Switch } from "@/components/ui/switch";
+  import { Card } from "@/components/ui/card";
 
   const { openDialog, closeDialog } = useDialog();
 
@@ -527,11 +528,11 @@
     </Dialog>
 
     <section>
-      <div class="rounded bg-base-100 p-3">
+      <Card class="p-3">
         <header :class="{ 'mb-2': item.description }">
           <div class="flex flex-wrap items-end gap-2">
             <div
-              class="mb-auto flex size-12 items-center justify-center rounded-full bg-neutral-focus text-neutral-content"
+              class="mb-auto flex size-12 items-center justify-center rounded-full bg-secondary text-secondary-foreground"
             >
               <MdiPackageVariant class="size-7" />
             </div>
@@ -542,7 +543,7 @@
                     <BreadcrumbLink
                       v-if="idx < fullpath.length - 1"
                       as-child
-                      class="text-base-content/70 hover:underline"
+                      class="text-foreground/70 hover:underline"
                     >
                       <NuxtLink :to="`/${part.type}/${part.id}`">
                         {{ part.name }}
@@ -595,7 +596,7 @@
         <div v-if="item.description" class="prose max-w-full p-1">
           <Markdown class="text-base" :source="item.description"> </Markdown>
         </div>
-      </div>
+      </Card>
 
       <div class="mb-6 mt-3 flex flex-wrap items-center justify-between">
         <ButtonGroup>
@@ -656,9 +657,7 @@
         <template v-if="!hasNested">
           <BaseCard v-if="photos && photos.length > 0">
             <template #title> {{ $t("items.photos") }} </template>
-            <div
-              class="scroll-bg container mx-auto flex max-h-[500px] flex-wrap gap-2 overflow-y-scroll border-t border-gray-300 p-4"
-            >
+            <div class="scroll-bg container mx-auto flex max-h-[500px] flex-wrap gap-2 overflow-y-scroll border-t p-4">
               <button v-for="(img, i) in photos" :key="i" @click="openImageDialog(img)">
                 <img class="max-h-[200px] rounded" :src="img.src" />
               </button>
@@ -698,7 +697,7 @@
               </template>
             </DetailsSection>
             <div v-else>
-              <p class="px-6 pb-4 text-base-content/70">No attachments found</p>
+              <p class="px-6 pb-4 text-foreground/70">No attachments found</p>
             </div>
           </BaseCard>
 
diff --git a/frontend/pages/item/[id]/index/edit.vue b/frontend/pages/item/[id]/index/edit.vue
index 85df2c9a..ec090cbe 100644
--- a/frontend/pages/item/[id]/index/edit.vue
+++ b/frontend/pages/item/[id]/index/edit.vue
@@ -576,9 +576,9 @@
             <LabelSelector v-model="item.labelIds" :labels="labels" />
           </div>
 
-          <div class="border-t border-gray-300 sm:p-0">
-            <div v-for="field in mainFields" :key="field.ref" class="grid grid-cols-1 sm:divide-y sm:divide-gray-300">
-              <div class="border-b border-gray-300 px-4 pb-4 pt-2 sm:px-6">
+          <div class="border-t sm:p-0">
+            <div v-for="field in mainFields" :key="field.ref" class="grid grid-cols-1 sm:divide-y">
+              <div class="border-b px-4 pb-4 pt-2 sm:px-6">
                 <FormTextArea
                   v-if="field.type === 'textarea'"
                   v-model="item[field.ref]"
@@ -622,7 +622,7 @@
 
         <BaseCard v-if="preferences.editorAdvancedView">
           <template #title> {{ $t("items.custom_fields") }} </template>
-          <div class="space-y-4 divide-y divide-gray-300 border-t px-5">
+          <div class="space-y-4 divide-y border-t px-5">
             <div
               v-for="(field, idx) in item.fields"
               :key="`field-${idx}`"
@@ -648,12 +648,12 @@
           </div>
         </BaseCard>
 
-        <div ref="attDropZone" class="overflow-visible bg-base-100 shadow-xl sm:rounded-lg">
+        <Card ref="attDropZone" class="overflow-visible shadow-xl">
           <div class="px-4 py-5 sm:px-6">
             <h3 class="text-lg font-medium leading-6">{{ $t("items.attachments") }}</h3>
             <p class="text-xs">{{ $t("items.changes_persisted_immediately") }}</p>
           </div>
-          <div class="border-t border-gray-300 p-4">
+          <div class="border-t p-4">
             <div v-if="attDropZoneActive" class="grid grid-cols-4 gap-4">
               <DropZone @drop="dropPhoto"> {{ $t("items.photos") }} </DropZone>
               <DropZone @drop="dropWarranty"> {{ $t("items.warranty") }} </DropZone>
@@ -671,8 +671,8 @@
             </button>
           </div>
 
-          <div class="border-t border-gray-300 p-4">
-            <ul role="list" class="divide-y divide-gray-400 rounded-md border border-gray-400">
+          <div class="border-t p-4">
+            <ul role="list" class="divide-y rounded-md border">
               <li
                 v-for="attachment in item.attachments"
                 :key="attachment.id"
@@ -705,19 +705,15 @@
               </li>
             </ul>
           </div>
-        </div>
+        </Card>
 
-        <div v-if="preferences.editorAdvancedView" class="overflow-visible bg-base-100 shadow-xl sm:rounded-lg">
+        <Card v-if="preferences.editorAdvancedView" class="overflow-visible shadow-xl">
           <div class="px-4 py-5 sm:px-6">
             <h3 class="text-lg font-medium leading-6">{{ $t("items.purchase_details") }}</h3>
           </div>
-          <div class="border-t border-gray-300 sm:p-0">
-            <div
-              v-for="field in purchaseFields"
-              :key="field.ref"
-              class="grid grid-cols-1 sm:divide-y sm:divide-gray-300"
-            >
-              <div class="border-b border-gray-300 px-4 pb-4 pt-2 sm:px-6">
+          <div class="border-t sm:p-0">
+            <div v-for="field in purchaseFields" :key="field.ref" class="grid grid-cols-1 sm:divide-y">
+              <div class="border-b px-4 pb-4 pt-2 sm:px-6">
                 <FormTextArea
                   v-if="field.type === 'textarea'"
                   v-model="item[field.ref]"
@@ -756,19 +752,15 @@
               </div>
             </div>
           </div>
-        </div>
+        </Card>
 
-        <div v-if="preferences.editorAdvancedView" class="overflow-visible bg-base-100 shadow-xl sm:rounded-lg">
+        <Card v-if="preferences.editorAdvancedView" class="overflow-visible shadow-xl">
           <div class="px-4 py-5 sm:px-6">
             <h3 class="text-lg font-medium leading-6">{{ $t("items.warranty_details") }}</h3>
           </div>
-          <div class="border-t border-gray-300 sm:p-0">
-            <div
-              v-for="field in warrantyFields"
-              :key="field.ref"
-              class="grid grid-cols-1 sm:divide-y sm:divide-gray-300"
-            >
-              <div class="border-b border-gray-300 px-4 pb-4 pt-2 sm:px-6">
+          <div class="border-t sm:p-0">
+            <div v-for="field in warrantyFields" :key="field.ref" class="grid grid-cols-1 sm:divide-y">
+              <div class="border-b px-4 pb-4 pt-2 sm:px-6">
                 <FormTextArea
                   v-if="field.type === 'textarea'"
                   v-model="item[field.ref]"
@@ -807,15 +799,15 @@
               </div>
             </div>
           </div>
-        </div>
+        </Card>
 
-        <div v-if="preferences.editorAdvancedView" class="overflow-visible bg-base-100 shadow-xl sm:rounded-lg">
+        <Card v-if="preferences.editorAdvancedView" class="overflow-visible shadow-xl">
           <div class="px-4 py-5 sm:px-6">
             <h3 class="text-lg font-medium leading-6">Sold Details</h3>
           </div>
-          <div class="border-t border-gray-300 sm:p-0">
-            <div v-for="field in soldFields" :key="field.ref" class="grid grid-cols-1 sm:divide-y sm:divide-gray-300">
-              <div class="border-b border-gray-300 px-4 pb-4 pt-2 sm:px-6">
+          <div class="border-t sm:p-0">
+            <div v-for="field in soldFields" :key="field.ref" class="grid grid-cols-1 sm:divide-y">
+              <div class="border-b px-4 pb-4 pt-2 sm:px-6">
                 <FormTextArea
                   v-if="field.type === 'textarea'"
                   v-model="item[field.ref]"
@@ -854,7 +846,7 @@
               </div>
             </div>
           </div>
-        </div>
+        </Card>
       </div>
     </section>
   </div>
diff --git a/frontend/pages/label/[id].vue b/frontend/pages/label/[id].vue
index 57ba2e5b..174d5957 100644
--- a/frontend/pages/label/[id].vue
+++ b/frontend/pages/label/[id].vue
@@ -140,7 +140,7 @@
       <header :class="{ 'mb-2': label.description }">
         <div class="flex flex-wrap items-end gap-2">
           <div
-            class="mb-auto flex size-12 items-center justify-center rounded-full bg-neutral-focus text-neutral-content"
+            class="mb-auto flex size-12 items-center justify-center rounded-full bg-secondary text-secondary-foreground"
           >
             <MdiPackageVariant class="size-7" />
           </div>
diff --git a/frontend/pages/location/[id].vue b/frontend/pages/location/[id].vue
index e648501e..0681d8b6 100644
--- a/frontend/pages/location/[id].vue
+++ b/frontend/pages/location/[id].vue
@@ -158,7 +158,7 @@
         <header :class="{ 'mb-2': location?.description }">
           <div class="flex flex-wrap items-end gap-2">
             <div
-              class="mb-auto flex size-12 items-center justify-center rounded-full bg-neutral-focus text-neutral-content"
+              class="mb-auto flex size-12 items-center justify-center rounded-full bg-secondary text-secondary-foreground"
             >
               <MdiPackageVariant class="size-7" />
             </div>
@@ -166,7 +166,7 @@
               <Breadcrumb v-if="location?.parent">
                 <BreadcrumbList>
                   <BreadcrumbItem>
-                    <BreadcrumbLink as-child class="text-base-content/70 hover:underline">
+                    <BreadcrumbLink as-child class="text-foreground/70 hover:underline">
                       <NuxtLink :to="`/location/${location.parent.id}`">
                         {{ location.parent.name }}
                       </NuxtLink>
diff --git a/frontend/pages/profile.vue b/frontend/pages/profile.vue
index 58dfecae..b3a2e457 100644
--- a/frontend/pages/profile.vue
+++ b/frontend/pages/profile.vue
@@ -343,7 +343,7 @@
           </template>
           <div class="mt-4 flex justify-between gap-2">
             <DialogFooter class="flex w-full">
-              <Button :disabled="!(notifier && notifier.url)" type="button" @click="testNotifier">
+              <Button variant="secondary" :disabled="!(notifier && notifier.url)" type="button" @click="testNotifier">
                 {{ $t("profile.test") }}
               </Button>
               <div class="grow"></div>
@@ -368,10 +368,10 @@
 
         <div class="p-4">
           <div class="flex gap-2">
-            <Button size="sm" @click="openDialog('changePassword')">
+            <Button variant="secondary" size="sm" @click="openDialog('changePassword')">
               {{ $t("profile.change_password") }}
             </Button>
-            <Button size="sm" @click="generateToken"> {{ $t("profile.gen_invite") }} </Button>
+            <Button variant="secondary" size="sm" @click="generateToken"> {{ $t("profile.gen_invite") }} </Button>
           </div>
           <div v-if="token" class="flex items-center gap-2 pl-1 pt-4">
             <CopyText :text="tokenUrl" />
@@ -394,7 +394,7 @@
           </BaseSectionHeader>
         </template>
 
-        <div v-if="notifiers.data.value" class="mx-4 divide-y divide-gray-400 rounded-md border border-gray-400">
+        <div v-if="notifiers.data.value" class="mx-4 divide-y rounded-md border">
           <p v-if="notifiers.data.value.length === 0" class="p-2 text-center text-sm">
             {{ $t("profile.no_notifiers") }}
           </p>
@@ -434,7 +434,7 @@
         </div>
 
         <div class="p-4">
-          <Button size="sm" @click="openNotifierDialog"> {{ $t("global.create") }} </Button>
+          <Button variant="secondary" size="sm" @click="openNotifierDialog"> {{ $t("global.create") }} </Button>
         </div>
       </BaseCard>
 
@@ -475,7 +475,7 @@
           <p class="m-2 text-sm">{{ $t("profile.example") }}: {{ currencyExample }}</p>
 
           <div class="mt-4">
-            <Button size="sm" @click="updateGroup"> {{ $t("profile.update_group") }} </Button>
+            <Button variant="secondary" size="sm" @click="updateGroup"> {{ $t("profile.update_group") }} </Button>
           </div>
         </div>
       </BaseCard>
@@ -493,39 +493,37 @@
 
         <div class="px-4 pb-4">
           <div class="mb-3">
-            <Button variant="outline" size="sm" @click="setDisplayHeader">
+            <Button variant="secondary" size="sm" @click="setDisplayHeader">
               {{ $t("profile.display_header", { currentValue: preferences.displayHeaderDecor }) }}
             </Button>
           </div>
-          <div class="homebox grid grid-cols-1 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+          <div class="homebox grid grid-cols-1 gap-4 font-sans sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
             <div
               v-for="theme in themes"
               :key="theme.value"
               :class="'theme-' + theme.value"
-              class="overflow-hidden rounded-lg border border-base-content/20 outline-2 outline-offset-2 outline-base-content hover:border-base-content/40"
+              class="overflow-hidden rounded-lg border outline-2 outline-offset-2"
               :data-theme="theme.value"
               :data-set-theme="theme.value"
               data-act-class="outline"
               @click="setTheme(theme.value)"
             >
-              <div :data-theme="theme.value" class="w-full cursor-pointer bg-base-100 font-sans text-base-content">
+              <div :data-theme="theme.value" class="w-full cursor-pointer bg-background-accent text-foreground">
                 <div class="grid grid-cols-5 grid-rows-3">
-                  <div class="col-start-1 row-span-2 row-start-1 bg-base-200"></div>
-                  <div class="col-start-1 row-start-3 bg-base-300"></div>
-                  <div class="col-span-4 col-start-2 row-span-3 row-start-1 flex flex-col gap-1 bg-base-100 p-2">
+                  <div class="col-start-1 row-start-1 bg-background"></div>
+                  <div class="col-start-1 row-start-2 bg-sidebar"></div>
+                  <div class="col-start-1 row-start-3 bg-background-accent"></div>
+                  <div class="col-span-4 col-start-2 row-span-3 row-start-1 flex flex-col gap-1 bg-background p-2">
                     <div class="font-bold">{{ theme.label }}</div>
                     <div class="flex flex-wrap gap-1">
-                      <div class="flex aspect-1 w-5 items-center justify-center rounded bg-primary lg:w-6">
-                        <div class="text-sm font-bold text-primary-content">A</div>
+                      <div class="flex size-5 items-center justify-center rounded bg-primary lg:size-6">
+                        <div class="text-sm font-bold text-primary-foreground">A</div>
                       </div>
-                      <div class="flex aspect-1 w-5 items-center justify-center rounded bg-secondary lg:w-6">
-                        <div class="text-sm font-bold text-secondary-content">A</div>
+                      <div class="flex size-5 items-center justify-center rounded bg-secondary lg:size-6">
+                        <div class="text-sm font-bold text-secondary-foreground">A</div>
                       </div>
-                      <div class="flex aspect-1 w-5 items-center justify-center rounded bg-accent lg:w-6">
-                        <div class="text-sm font-bold text-accent-content">A</div>
-                      </div>
-                      <div class="flex aspect-1 w-5 items-center justify-center rounded bg-neutral lg:w-6">
-                        <div class="text-sm font-bold text-neutral-content">A</div>
+                      <div class="flex size-5 items-center justify-center rounded bg-accent lg:size-6">
+                        <div class="text-sm font-bold text-accent-foreground">A</div>
                       </div>
                     </div>
                   </div>
@@ -544,7 +542,7 @@
             <template #description> {{ $t("profile.delete_account_sub") }} </template>
           </BaseSectionHeader>
         </template>
-        <div class="border-t-2 border-gray-300 p-4 px-6">
+        <div class="border-t-2 p-4 px-6">
           <Button size="sm" variant="destructive" @click="deleteProfile">
             {{ $t("profile.delete_account") }}
           </Button>
diff --git a/frontend/pages/testing.vue b/frontend/pages/testing.vue
deleted file mode 100644
index 3954e59e..00000000
--- a/frontend/pages/testing.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<script setup lang="ts">
-  import { toast } from "@/components/ui/sonner";
-  import { Button, ButtonGroup } from "~/components/ui/button";
-  import { Shortcut } from "~/components/ui/shortcut";
-  import MdiPackageVariant from "~icons/mdi/package-variant";
-  import MdiPackageVariantClosed from "~icons/mdi/package-variant-closed";
-</script>
-
-<template>
-  <h1 class="text-3xl">Testing</h1>
-  <p>This is a page for testing during the transition to shadcn.</p>
-  <Button
-    @click="
-      toast.success('This is a test', {
-        duration: 100000,
-      })
-    "
-    >Create Toast</Button
-  >
-  <ButtonGroup>
-    <Button @click="toast.success('Success')">Success</Button>
-    <Button variant="outline" @click="toast.info('Info')">Info</Button>
-    <Button variant="destructive" @click="toast.warning('Warning')">Warning</Button>
-    <Button variant="destructive" @click="toast.error('Error')">Error</Button>
-    <Button>Button 3</Button>
-  </ButtonGroup>
-  <span class="flex items-center gap-1 text-sm">
-    Use
-    <Shortcut size="sm" :keys="['Shift']" /> + <Shortcut size="sm" :keys="['Enter']" /> to create and add another.
-  </span>
-  <div class="group relative size-12">
-    <div
-      class="absolute inset-0 flex items-center justify-center transition-transform duration-300 group-hover:rotate-180"
-    >
-      <MdiPackageVariant class="size-5 group-hover:hidden" />
-      <MdiPackageVariantClosed class="hidden size-5 group-hover:block" />
-    </div>
-  </div>
-</template>
diff --git a/frontend/pages/tools.vue b/frontend/pages/tools.vue
index 484545b6..0362ae4a 100644
--- a/frontend/pages/tools.vue
+++ b/frontend/pages/tools.vue
@@ -10,7 +10,7 @@
             <template #description> {{ $t("tools.reports_sub") }} </template>
           </BaseSectionHeader>
         </template>
-        <div class="divide-y divide-gray-300 border-t border-gray-300 px-6 pb-3">
+        <div class="divide-y border-t p-4">
           <DetailAction to="/reports/label-generator">
             <template #title>{{ $t("tools.reports_set.asset_labels") }}</template>
             {{ $t("tools.reports_set.asset_labels_sub") }}
@@ -36,7 +36,7 @@
             </template>
           </BaseSectionHeader>
         </template>
-        <div class="divide-y divide-gray-300 border-t border-gray-300 px-6 pb-3">
+        <div class="divide-y border-t px-6 pb-3">
           <DetailAction @action="openDialog('import')">
             <template #title> {{ $t("tools.import_export_set.import") }} </template>
             <!-- eslint-disable-next-line vue/no-v-html -->
@@ -61,7 +61,7 @@
             </template>
           </BaseSectionHeader>
         </template>
-        <div class="divide-y divide-gray-300 border-t border-gray-300 px-6 pb-3">
+        <div class="divide-y border-t px-6 pb-3">
           <DetailAction @action="ensureAssetIDs">
             <template #title>{{ $t("tools.actions_set.ensure_ids") }}</template>
             {{ $t("tools.actions_set.ensure_ids_sub") }}
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 2a3e4f19..8a5a1606 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -8,9 +8,6 @@ importers:
 
   .:
     dependencies:
-      '@headlessui/vue':
-        specifier: ^1.7.23
-        version: 1.7.23(vue@3.4.8(typescript@5.6.2))
       '@nuxtjs/color-mode':
         specifier: ^3.5.2
         version: 3.5.2(magicast@0.3.5)
@@ -56,9 +53,6 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
-      daisyui:
-        specifier: ^2.52.0
-        version: 2.52.0(autoprefixer@10.4.21(postcss@8.5.3))(postcss@8.5.3)
       date-fns:
         specifier: ^3.6.0
         version: 3.6.0
@@ -1410,12 +1404,6 @@ packages:
   '@formatjs/intl-localematcher@0.6.1':
     resolution: {integrity: sha512-ePEgLgVCqi2BBFnTMWPfIghu6FkbZnnBVhO2sSxvLfrdFw7wCHAHiDoM2h4NRgjbaY7+B7HgOLZGkK187pZTZg==}
 
-  '@headlessui/vue@1.7.23':
-    resolution: {integrity: sha512-JzdCNqurrtuu0YW6QaDtR2PIYCKPUWq28csDyMvN4zmGccmE7lz40Is6hc3LA4HFeCI7sekZ/PQMTNmn9I/4Wg==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      vue: ^3.2.0
-
   '@humanwhocodes/config-array@0.13.0':
     resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==}
     engines: {node: '>=10.10.0'}
@@ -2899,10 +2887,6 @@ packages:
   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'}
-
   colord@2.9.3:
     resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
 
@@ -3051,9 +3035,6 @@ packages:
   css-select@5.1.0:
     resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==}
 
-  css-selector-tokenizer@0.8.0:
-    resolution: {integrity: sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==}
-
   css-tree@2.2.1:
     resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
@@ -3096,12 +3077,6 @@ packages:
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
-  daisyui@2.52.0:
-    resolution: {integrity: sha512-LQTA5/IVXAJHBMFoeaEMfd7/akAFPPcdQPR3O9fzzcFiczneJFM73CFPnScmW2sOgn/D83cvkP854ep2T9OfTg==}
-    peerDependencies:
-      autoprefixer: ^10.0.2
-      postcss: ^8.1.6
-
   data-uri-to-buffer@4.0.1:
     resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==}
     engines: {node: '>= 12'}
@@ -3717,9 +3692,6 @@ packages:
   fast-uri@3.0.6:
     resolution: {integrity: sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw==}
 
-  fastparse@1.1.2:
-    resolution: {integrity: sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==}
-
   fastq@1.19.1:
     resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
 
@@ -8016,11 +7988,6 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@headlessui/vue@1.7.23(vue@3.4.8(typescript@5.6.2))':
-    dependencies:
-      '@tanstack/vue-virtual': 3.13.6(vue@3.4.8(typescript@5.6.2))
-      vue: 3.4.8(typescript@5.6.2)
-
   '@humanwhocodes/config-array@0.13.0':
     dependencies:
       '@humanwhocodes/object-schema': 2.0.3
@@ -8546,7 +8513,7 @@ snapshots:
 
   '@nuxtjs/eslint-config-typescript@12.1.0(eslint@8.57.1)(typescript@5.6.2)':
     dependencies:
-      '@nuxtjs/eslint-config': 12.0.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-typescript@3.10.0(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1)
+      '@nuxtjs/eslint-config': 12.0.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-typescript@3.10.0)(eslint@8.57.1)
       '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.6.2))(eslint@8.57.1)(typescript@5.6.2)
       '@typescript-eslint/parser': 6.21.0(eslint@8.57.1)(typescript@5.6.2)
       eslint: 8.57.1
@@ -8559,10 +8526,10 @@ snapshots:
       - supports-color
       - typescript
 
-  '@nuxtjs/eslint-config@12.0.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-typescript@3.10.0(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1)':
+  '@nuxtjs/eslint-config@12.0.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-typescript@3.10.0)(eslint@8.57.1)':
     dependencies:
       eslint: 8.57.1
-      eslint-config-standard: 17.1.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-typescript@3.10.0)(eslint@8.57.1))(eslint-plugin-n@15.7.0(eslint@8.57.1))(eslint-plugin-promise@6.6.0(eslint@8.57.1))(eslint@8.57.1)
+      eslint-config-standard: 17.1.0(eslint-plugin-import@2.31.0)(eslint-plugin-n@15.7.0(eslint@8.57.1))(eslint-plugin-promise@6.6.0(eslint@8.57.1))(eslint@8.57.1)
       eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-typescript@3.10.0)(eslint@8.57.1)
       eslint-plugin-n: 15.7.0(eslint@8.57.1)
       eslint-plugin-node: 11.1.0(eslint@8.57.1)
@@ -10020,11 +9987,6 @@ snapshots:
       color-convert: 1.9.3
       color-string: 1.9.1
 
-  color@4.2.3:
-    dependencies:
-      color-convert: 2.0.1
-      color-string: 1.9.1
-
   colord@2.9.3: {}
 
   colorspace@1.1.4:
@@ -10148,11 +10110,6 @@ snapshots:
       domutils: 3.2.2
       nth-check: 2.1.1
 
-  css-selector-tokenizer@0.8.0:
-    dependencies:
-      cssesc: 3.0.0
-      fastparse: 1.1.2
-
   css-tree@2.2.1:
     dependencies:
       mdn-data: 2.0.28
@@ -10217,17 +10174,6 @@ snapshots:
 
   csstype@3.1.3: {}
 
-  daisyui@2.52.0(autoprefixer@10.4.21(postcss@8.5.3))(postcss@8.5.3):
-    dependencies:
-      autoprefixer: 10.4.21(postcss@8.5.3)
-      color: 4.2.3
-      css-selector-tokenizer: 0.8.0
-      postcss: 8.5.3
-      postcss-js: 4.0.1(postcss@8.5.3)
-      tailwindcss: 3.4.17
-    transitivePeerDependencies:
-      - ts-node
-
   data-uri-to-buffer@4.0.1: {}
 
   data-view-buffer@1.0.2:
@@ -10673,7 +10619,7 @@ snapshots:
     dependencies:
       eslint: 8.57.1
 
-  eslint-config-standard@17.1.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-typescript@3.10.0)(eslint@8.57.1))(eslint-plugin-n@15.7.0(eslint@8.57.1))(eslint-plugin-promise@6.6.0(eslint@8.57.1))(eslint@8.57.1):
+  eslint-config-standard@17.1.0(eslint-plugin-import@2.31.0)(eslint-plugin-n@15.7.0(eslint@8.57.1))(eslint-plugin-promise@6.6.0(eslint@8.57.1))(eslint@8.57.1):
     dependencies:
       eslint: 8.57.1
       eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-typescript@3.10.0)(eslint@8.57.1)
@@ -10703,7 +10649,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.0(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.0)(eslint@8.57.1):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
@@ -10737,7 +10683,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.0(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.0)(eslint@8.57.1)
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
@@ -10993,8 +10939,6 @@ snapshots:
 
   fast-uri@3.0.6: {}
 
-  fastparse@1.1.2: {}
-
   fastq@1.19.1:
     dependencies:
       reusify: 1.1.0
@@ -12315,7 +12259,7 @@ snapshots:
       unenv: 1.10.0
       unimport: 3.14.6(rollup@4.40.0)
       unplugin: 1.16.1
-      unplugin-vue-router: 0.10.9(rollup@4.40.0)(vue-router@4.5.0(vue@3.5.13(typescript@5.6.2)))(vue@3.5.13(typescript@5.6.2))
+      unplugin-vue-router: 0.10.9(rollup@4.40.0)(vue-router@4.5.0(vue@3.4.8(typescript@5.6.2)))(vue@3.5.13(typescript@5.6.2))
       unstorage: 1.15.0(@netlify/blobs@8.2.0)(db0@0.3.2)(ioredis@5.6.1)
       untyped: 1.5.2
       vue: 3.5.13(typescript@5.6.2)
@@ -13941,7 +13885,7 @@ snapshots:
       pathe: 2.0.3
       picomatch: 4.0.2
 
-  unplugin-vue-router@0.10.9(rollup@4.40.0)(vue-router@4.5.0(vue@3.5.13(typescript@5.6.2)))(vue@3.5.13(typescript@5.6.2)):
+  unplugin-vue-router@0.10.9(rollup@4.40.0)(vue-router@4.5.0(vue@3.4.8(typescript@5.6.2)))(vue@3.5.13(typescript@5.6.2)):
     dependencies:
       '@babel/types': 7.27.0
       '@rollup/pluginutils': 5.1.4(rollup@4.40.0)
@@ -13958,7 +13902,7 @@ snapshots:
       unplugin: 2.0.0-beta.1
       yaml: 2.7.1
     optionalDependencies:
-      vue-router: 4.5.0(vue@3.5.13(typescript@5.6.2))
+      vue-router: 4.5.0(vue@3.4.8(typescript@5.6.2))
     transitivePeerDependencies:
       - rollup
       - vue
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 507c93b0..4d4e08a4 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,13 +1,6 @@
 import { config } from "dotenv";
 config();
 
-// check if DISABLE_DAISYUI is set to true in the environment
-const isDisabled = process.env.DISABLE_DAISYUI === "true";
-
-if (isDisabled) {
-  console.log("DAISYUI DISABLED");
-}
-
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: ["class"],
@@ -20,7 +13,6 @@ module.exports = {
     "theme-corporate",
     "theme-cupcake",
     "theme-cyberpunk",
-    "theme-dark",
     "theme-dracula",
     "theme-emerald",
     "theme-fantasy",
@@ -42,9 +34,6 @@ module.exports = {
     "theme-night",
     "theme-coffee",
     "theme-winter",
-    "theme-dim",
-    "theme-nord",
-    "theme-sunset",
   ],
   prefix: "",
 
@@ -62,6 +51,7 @@ module.exports = {
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",
         background: "hsl(var(--background))",
+        "background-accent": "hsl(var(--background-accent))",
         foreground: "hsl(var(--foreground))",
         primary: {
           DEFAULT: "hsl(var(--primary))",
@@ -91,6 +81,20 @@ module.exports = {
           DEFAULT: "hsl(var(--card))",
           foreground: "hsl(var(--card-foreground))",
         },
+        sidebar: {
+          DEFAULT: "hsl(var(--sidebar-background))",
+          foreground: "hsl(var(--sidebar-foreground))",
+        },
+        "sidebar-primary": {
+          DEFAULT: "hsl(var(--sidebar-primary))",
+          foreground: "hsl(var(--sidebar-primary-foreground))",
+        },
+        "sidebar-accent": {
+          DEFAULT: "hsl(var(--sidebar-accent))",
+          foreground: "hsl(var(--sidebar-accent-foreground))",
+        },
+        "sidebar-border": "hsl(var(--sidebar-border))",
+        "sidebar-ring": "hsl(var(--sidebar-ring))",
       },
       borderRadius: {
         xl: "calc(var(--radius) + 4px)",
@@ -124,58 +128,5 @@ module.exports = {
       },
     },
   },
-  daisyui: {
-    themes: [
-      {
-        homebox: {
-          primary: "#5C7F67",
-          secondary: "#ECF4E7",
-          accent: "#FFDA56",
-          neutral: "#2C2E27",
-          "base-100": "#FFFFFF",
-          info: "#3ABFF8",
-          success: "#36D399",
-          warning: "#FBBD23",
-          error: "#F87272",
-        },
-      },
-      "light",
-      "dark",
-      "cupcake",
-      "bumblebee",
-      "emerald",
-      "corporate",
-      "synthwave",
-      "retro",
-      "cyberpunk",
-      "valentine",
-      "halloween",
-      "garden",
-      "forest",
-      "aqua",
-      "lofi",
-      "pastel",
-      "fantasy",
-      "wireframe",
-      "black",
-      "luxury",
-      "dracula",
-      "cmyk",
-      "autumn",
-      "business",
-      "acid",
-      "lemonade",
-      "night",
-      "coffee",
-      "winter",
-    ],
-  },
-  plugins: isDisabled
-    ? [require("@tailwindcss/aspect-ratio"), require("@tailwindcss/typography"), require("tailwindcss-animate")]
-    : [
-        require("@tailwindcss/aspect-ratio"),
-        require("@tailwindcss/typography"),
-        require("daisyui"),
-        require("tailwindcss-animate"),
-      ],
+  plugins: [require("@tailwindcss/aspect-ratio"), require("@tailwindcss/typography"), require("tailwindcss-animate")],
 };