diff --git a/frontend/index.html b/frontend/index.html
index f9cc4e1..e4d07fc 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -6,8 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link
-    href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap"
+  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap"
     rel="stylesheet">
 </head>
 
diff --git a/frontend/package.json b/frontend/package.json
index 4dd9dd5..8a78551 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -33,7 +33,7 @@
     "@tiptap/vue-3": "^2.4.0",
     "@unovis/ts": "^1.4.4",
     "@unovis/vue": "^1.4.4",
-    "@vee-validate/zod": "^4.13.2",
+    "@vee-validate/zod": "^4.15.0",
     "@vueuse/core": "^12.4.0",
     "axios": "^1.8.2",
     "class-variance-authority": "^0.7.0",
@@ -47,7 +47,7 @@
     "radix-vue": "^1.9.17",
     "reka-ui": "^2.2.0",
     "tailwind-merge": "^2.3.0",
-    "vee-validate": "^4.13.2",
+    "vee-validate": "^4.15.0",
     "vue": "^3.4.37",
     "vue-dompurify-html": "^5.2.0",
     "vue-i18n": "9",
@@ -57,7 +57,7 @@
     "vue-sonner": "^1.3.0",
     "vue3-emoji-picker": "^1.1.8",
     "vuedraggable": "^4.1.0",
-    "zod": "^3.23.8"
+    "zod": "^3.24.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 82c8e89..6d74fc0 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -60,7 +60,7 @@ importers:
         specifier: ^1.4.4
         version: 1.5.0(@unovis/ts@1.5.0)(vue@3.5.13(typescript@5.7.3))
       '@vee-validate/zod':
-        specifier: ^4.13.2
+        specifier: ^4.15.0
         version: 4.15.0(vue@3.5.13(typescript@5.7.3))(zod@3.24.1)
       '@vueuse/core':
         specifier: ^12.4.0
@@ -102,7 +102,7 @@ importers:
         specifier: ^2.3.0
         version: 2.6.0
       vee-validate:
-        specifier: ^4.13.2
+        specifier: ^4.15.0
         version: 4.15.0(vue@3.5.13(typescript@5.7.3))
       vue:
         specifier: ^3.4.37
@@ -132,7 +132,7 @@ importers:
         specifier: ^4.1.0
         version: 4.1.0(vue@3.5.13(typescript@5.7.3))
       zod:
-        specifier: ^3.23.8
+        specifier: ^3.24.1
         version: 3.24.1
     devDependencies:
       '@rushstack/eslint-patch':
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 8e34929..76f5724 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex w-full h-screen">
+  <div class="flex w-full h-screen text-foreground">
     <!-- Icon sidebar always visible -->
     <SidebarProvider style="--sidebar-width: 3rem" class="w-auto z-50">
       <ShadcnSidebar collapsible="none" class="border-r">
diff --git a/frontend/src/Root.vue b/frontend/src/Root.vue
index 3f7341b..291c510 100644
--- a/frontend/src/Root.vue
+++ b/frontend/src/Root.vue
@@ -1,9 +1,7 @@
 <template>
   <TooltipProvider :delay-duration="150">
-    <div class="!font-jakarta">
-      <Toaster class="pointer-events-auto" position="top-center" richColors />
-      <RouterView />
-    </div>
+    <Toaster class="pointer-events-auto" position="top-center" richColors />
+    <RouterView />
   </TooltipProvider>
 </template>
 
diff --git a/frontend/src/assets/styles/main.scss b/frontend/src/assets/styles/main.scss
index fb88746..4d2eeea 100644
--- a/frontend/src/assets/styles/main.scss
+++ b/frontend/src/assets/styles/main.scss
@@ -61,10 +61,39 @@
       }
     }
   }
-}
+  :root {
+    --sidebar-background: 0 0% 99%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+  .dark {
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+
+  :root {
+    --vis-tooltip-background-color: none !important;
+    --vis-tooltip-border-color: none !important;
+    --vis-tooltip-text-color: none !important;
+    --vis-tooltip-shadow-color: none !important;
+    --vis-tooltip-backdrop-filter: none !important;
+    --vis-tooltip-padding: none !important;
+    --vis-primary-color: var(--primary);
+    --vis-secondary-color: 160 81% 40%;
+    --vis-text-color: var(--muted-foreground);
+  }
 
-// Theme.
-@layer base {
   :root {
     --background: 0 0% 100%;
     --foreground: 240 10% 3.9%;
@@ -127,64 +156,8 @@
   }
 }
 
-@layer base {
-  :root {
-    --vis-tooltip-background-color: none !important;
-    --vis-tooltip-border-color: none !important;
-    --vis-tooltip-text-color: none !important;
-    --vis-tooltip-shadow-color: none !important;
-    --vis-tooltip-backdrop-filter: none !important;
-    --vis-tooltip-padding: none !important;
-    --vis-primary-color: var(--primary);
-    --vis-secondary-color: 160 81% 40%;
-    --vis-text-color: var(--muted-foreground);
-  }
-}
-
-// Shake animation
-@keyframes shake {
-  0% {
-    transform: translateX(0);
-  }
-  15% {
-    transform: translateX(-5px);
-  }
-  25% {
-    transform: translateX(5px);
-  }
-  35% {
-    transform: translateX(-5px);
-  }
-  45% {
-    transform: translateX(5px);
-  }
-  55% {
-    transform: translateX(-5px);
-  }
-  65% {
-    transform: translateX(5px);
-  }
-  75% {
-    transform: translateX(-5px);
-  }
-  85% {
-    transform: translateX(5px);
-  }
-  95% {
-    transform: translateX(-5px);
-  }
-  100% {
-    transform: translateX(0);
-  }
-}
-
-.animate-shake {
-  animation: shake 0.5s infinite;
-}
-
 .message-bubble {
-  @apply flex flex-col px-4 pt-2 pb-3 w-fit min-w-[30%] max-w-full border overflow-x-auto rounded-xl;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  @apply flex flex-col px-4 pt-2 pb-3 w-fit min-w-[30%] max-w-full border overflow-x-auto rounded shadow-sm;
   table {
     width: 100% !important;
     table-layout: fixed !important;
@@ -200,7 +173,7 @@
 }
 
 .box {
-  @apply border shadow rounded-lg;
+  @apply border shadow rounded;
 }
 
 // Scrollbar start
@@ -227,84 +200,9 @@
 // End Scrollbar
 
 .code-editor {
-  @apply rounded-md border shadow h-[65vh] min-h-[250px] w-full relative;
+  @apply rounded border shadow h-[65vh] min-h-[250px] w-full relative;
 }
 
-.ql-container {
-  margin: 0 !important;
-}
-
-.ql-container .ql-editor {
-  height: 300px !important;
-  border-radius: var(--radius) !important;
-  @apply rounded-lg rounded-t-none;
-}
-
-.ql-toolbar {
-  @apply rounded-t-lg;
-}
-
-.blinking-dot {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  background-color: red;
-  border-radius: 50%;
-  animation: blink 2s infinite;
-}
-
-@keyframes blink {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0;
-  }
-}
-
-// Sidebar start
-@layer base {
-  :root {
-    --sidebar-background: 0 0% 96%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-
-  .dark {
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-}
-a[data-active='true'] {
-  background-color: hsl(var(--sidebar-background)) !important;
-  color: hsl(var(--sidebar-accent-foreground)) !important;
-  font-weight: 500;
-  transition:
-    background-color 0.2s,
-    color 0.2s;
-}
-a[data-active='false']:hover {
-  background-color: hsl(var(--sidebar-accent)) !important;
-  color: hsl(var(--sidebar-accent-foreground)) !important;
-  font-weight: 500;
-  transition:
-    background-color 0.2s,
-    color 0.2s;
-}
-// Sidebar end
-
 .show-quoted-text {
   blockquote {
     @apply block;
@@ -358,3 +256,12 @@ a[data-active='false']:hover {
     @apply text-blue-500 hover:underline;
   }
 }
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/frontend/src/components/datatable/DataTable.vue b/frontend/src/components/datatable/DataTable.vue
index 62f1a3c..48343c4 100644
--- a/frontend/src/components/datatable/DataTable.vue
+++ b/frontend/src/components/datatable/DataTable.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="w-full">
-    <div class="rounded-md border shadow">
+    <div class="rounded border shadow">
       <Table>
         <TableHeader>
           <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
diff --git a/frontend/src/components/layout/MenuCard.vue b/frontend/src/components/layout/MenuCard.vue
index aa9aa19..c582f64 100644
--- a/frontend/src/components/layout/MenuCard.vue
+++ b/frontend/src/components/layout/MenuCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-col p-4 border rounded-lg shadow-sm hover:shadow transition-colors cursor-pointer max-w-xs"
+    class="flex flex-col p-4 border rounded shadow-sm hover:shadow transition-colors cursor-pointer max-w-xs"
     @click="handleClick">
     <div class="flex items-center mb-2">
       <component :is="icon" size="24" class="mr-2 text-primary" />
diff --git a/frontend/src/components/layout/PageHeader.vue b/frontend/src/components/layout/PageHeader.vue
index 0d67381..294abb6 100644
--- a/frontend/src/components/layout/PageHeader.vue
+++ b/frontend/src/components/layout/PageHeader.vue
@@ -1,8 +1,8 @@
 <template>
   <div v-if="!isHidden">
     <div class="flex items-center space-x-4 h-12 px-2">
-      <SidebarTrigger class="cursor-pointer w-4 h-4" />
-      <span class="text-xl font-semibold text-gray-800">
+      <SidebarTrigger class="cursor-pointer" />
+      <span class="text-xl font-semibold">
         {{ title }}
       </span>
     </div>
diff --git a/frontend/src/components/sidebar/Sidebar.vue b/frontend/src/components/sidebar/Sidebar.vue
index f6e6a1f..37125fb 100644
--- a/frontend/src/components/sidebar/Sidebar.vue
+++ b/frontend/src/components/sidebar/Sidebar.vue
@@ -98,13 +98,11 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
         <SidebarHeader>
           <SidebarMenu>
             <SidebarMenuItem>
-              <SidebarMenuButton :isActive="isActiveParent('/contacts')" asChild>
-                <div>
-                  <span class="font-semibold text-xl">
-                    {{ t('globals.terms.contact', 2) }}
-                  </span>
-                </div>
-              </SidebarMenuButton>
+              <div>
+                <span class="font-semibold text-xl">
+                  {{ t('globals.terms.contact', 2) }}
+                </span>
+              </div>
             </SidebarMenuItem>
           </SidebarMenu>
         </SidebarHeader>
@@ -137,13 +135,11 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
         <SidebarHeader>
           <SidebarMenu>
             <SidebarMenuItem>
-              <SidebarMenuButton :isActive="isActiveParent('/reports/overview')" asChild>
-                <div>
-                  <span class="font-semibold text-xl">
-                    {{ t('navigation.reports') }}
-                  </span>
-                </div>
-              </SidebarMenuButton>
+              <div>
+                <span class="font-semibold text-xl">
+                  {{ t('navigation.reports') }}
+                </span>
+              </div>
             </SidebarMenuItem>
           </SidebarMenu>
         </SidebarHeader>
@@ -171,17 +167,15 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
         <SidebarHeader>
           <SidebarMenu>
             <SidebarMenuItem>
-              <SidebarMenuButton :isActive="isActiveParent('/admin')" asChild>
-                <div class="flex items-center justify-between w-full">
-                  <span class="font-semibold text-xl">
-                    {{ t('navigation.admin') }}
-                  </span>
-                </div>
-                <!-- App version -->
-                <div class="text-xs text-muted-foreground ml-2">
-                  ({{ settingsStore.settings['app.version'] }})
-                </div>
-              </SidebarMenuButton>
+              <div class="flex items-center justify-between w-full">
+                <span class="font-semibold text-xl">
+                  {{ t('navigation.admin') }}
+                </span>
+              </div>
+              <!-- App version -->
+              <div class="text-xs text-muted-foreground">
+                ({{ settingsStore.settings['app.version'] }})
+              </div>
             </SidebarMenuItem>
           </SidebarMenu>
         </SidebarHeader>
@@ -239,13 +233,11 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
         <SidebarHeader>
           <SidebarMenu>
             <SidebarMenuItem>
-              <SidebarMenuButton :isActive="isActiveParent('/account/profile')" asChild>
-                <div>
-                  <span class="font-semibold text-xl">
-                    {{ t('navigation.account') }}
-                  </span>
-                </div>
-              </SidebarMenuButton>
+              <div>
+                <span class="font-semibold text-xl">
+                  {{ t('navigation.account') }}
+                </span>
+              </div>
             </SidebarMenuItem>
           </SidebarMenu>
         </SidebarHeader>
@@ -276,24 +268,22 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
         <SidebarHeader>
           <SidebarMenu>
             <SidebarMenuItem>
-              <SidebarMenuButton asChild>
-                <div class="flex items-center justify-between w-full">
-                  <div class="font-semibold text-xl">
-                    <span>{{ t('navigation.inbox') }}</span>
-                  </div>
-                  <div class="ml-auto">
-                    <div class="flex items-center space-x-2">
-                      <router-link :to="{ name: 'search' }">
-                        <button
-                          class="flex items-center bg-accent p-2 rounded-full hover:scale-110 transition-transform duration-100"
-                        >
-                          <Search size="15" stroke-width="2.5" />
-                        </button>
-                      </router-link>
-                    </div>
+              <div class="flex items-center justify-between w-full">
+                <div class="font-semibold text-xl">
+                  <span>{{ t('navigation.inbox') }}</span>
+                </div>
+                <div class="ml-auto">
+                  <div class="flex items-center space-x-2">
+                    <router-link :to="{ name: 'search' }">
+                      <button
+                        class="flex items-center bg-accent p-2 rounded-full hover:scale-110 transition-transform duration-100"
+                      >
+                        <Search size="15" stroke-width="2.5" />
+                      </button>
+                    </router-link>
                   </div>
                 </div>
-              </SidebarMenuButton>
+              </div>
             </SidebarMenuItem>
           </SidebarMenu>
         </SidebarHeader>
@@ -399,7 +389,7 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
                           <Plus
                             size="18"
                             @click.stop="openCreateViewDialog"
-                            class="rounded-lg cursor-pointer opacity-0 transition-all duration-200 group-hover/item:opacity-100 hover:bg-gray-200 hover:shadow-sm text-gray-600 hover:text-gray-800 transform hover:scale-105 active:scale-100 p-1"
+                            class="rounded cursor-pointer opacity-0 transition-all duration-200 group-hover/item:opacity-100 hover:bg-gray-200 hover:shadow-sm text-gray-600 hover:text-gray-800 transform hover:scale-105 active:scale-100 p-1"
                           />
                         </div>
                         <ChevronRight
diff --git a/frontend/src/components/sidebar/SidebarNavUser.vue b/frontend/src/components/sidebar/SidebarNavUser.vue
index e5e7d13..a611eaf 100644
--- a/frontend/src/components/sidebar/SidebarNavUser.vue
+++ b/frontend/src/components/sidebar/SidebarNavUser.vue
@@ -2,12 +2,12 @@
   <DropdownMenu>
     <DropdownMenuTrigger as-child>
       <SidebarMenuButton
-        size="lg"
-        class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground p-0"
+        size="md"
+        class="p-0"
       >
-        <Avatar class="h-8 w-8 rounded-lg relative overflow-visible">
-          <AvatarImage :src="userStore.avatar" alt="" class="rounded-lg" />
-          <AvatarFallback class="rounded-lg">
+        <Avatar class="h-8 w-8 rounded relative overflow-visible">
+          <AvatarImage :src="userStore.avatar" alt="U" class="rounded" />
+          <AvatarFallback class="rounded">
             {{ userStore.getInitials }}
           </AvatarFallback>
           <div
@@ -30,51 +30,65 @@
       </SidebarMenuButton>
     </DropdownMenuTrigger>
     <DropdownMenuContent
-      class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+      class="w-[--radix-dropdown-menu-trigger-width] min-w-56"
       side="bottom"
       :side-offset="4"
     >
-      <DropdownMenuLabel class="p-0 font-normal space-y-1">
-        <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-          <Avatar class="h-8 w-8 rounded-lg">
+      <DropdownMenuLabel class="font-normal space-y-2 px-2">
+        <!-- User header -->
+        <div class="flex items-center gap-2 py-1.5 text-left text-sm">
+          <Avatar class="h-8 w-8 rounded">
             <AvatarImage :src="userStore.avatar" alt="U" />
-            <AvatarFallback class="rounded-lg">
+            <AvatarFallback class="rounded">
               {{ userStore.getInitials }}
             </AvatarFallback>
           </Avatar>
-          <div class="grid flex-1 text-left text-sm leading-tight">
+          <div class="flex-1 flex flex-col leading-tight">
             <span class="truncate font-semibold">{{ userStore.getFullName }}</span>
-            <span class="truncate text-xs">{{ userStore.email }}</span>
+            <span class="truncate text-xs text-muted-foreground">{{ userStore.email }}</span>
           </div>
         </div>
+
         <div class="space-y-2">
-          <!-- Away switch is checked with 'away_manual' or 'away_and_reassigning' -->
-          <div class="flex items-center gap-2 px-1 text-left text-sm justify-between">
-            <span class="text-muted-foreground">{{ t('navigation.away') }}</span>
+          <!-- Dark-mode toggle -->
+          <div class="flex items-center justify-between text-sm">
+            <div class="flex items-center gap-2">
+              <Moon v-if="mode === 'dark'" size="16" class="text-muted-foreground" />
+              <Sun v-else size="16" class="text-muted-foreground" />
+              <span class="text-muted-foreground">{{ t('navigation.darkMode') }}</span>
+            </div>
             <Switch
-              :checked="
-                ['away_manual', 'away_and_reassigning'].includes(userStore.user.availability_status)
-              "
-              @update:checked="
-                (val) => {
-                  const newStatus = val ? 'away_manual' : 'online'
-                  userStore.updateUserAvailability(newStatus)
-                }
-              "
+              :checked="mode === 'dark'"
+              @update:checked="(val) => (mode = val ? 'dark' : 'light')"
             />
           </div>
-          <!-- Reassign Replies Switch is checked with 'away_and_reassigning' -->
-          <div class="flex items-center gap-2 px-1 text-left text-sm justify-between">
-            <span class="text-muted-foreground">{{ t('navigation.reassignReplies') }}</span>
-            <Switch
-              :checked="userStore.user.availability_status === 'away_and_reassigning'"
-              @update:checked="
-                (val) => {
-                  const newStatus = val ? 'away_and_reassigning' : 'away_manual'
-                  userStore.updateUserAvailability(newStatus)
-                }
-              "
-            />
+
+          <div class="border-t border-gray-200 dark:border-gray-700 pt-3 space-y-3">
+            <!-- Away toggle -->
+            <div class="flex items-center justify-between text-sm">
+              <span class="text-muted-foreground">{{ t('navigation.away') }}</span>
+              <Switch
+                :checked="
+                  ['away_manual', 'away_and_reassigning'].includes(
+                    userStore.user.availability_status
+                  )
+                "
+                @update:checked="
+                  (val) => userStore.updateUserAvailability(val ? 'away_manual' : 'online')
+                "
+              />
+            </div>
+            <!-- Reassign toggle -->
+            <div class="flex items-center justify-between text-sm">
+              <span class="text-muted-foreground">{{ t('navigation.reassignReplies') }}</span>
+              <Switch
+                :checked="userStore.user.availability_status === 'away_and_reassigning'"
+                @update:checked="
+                  (val) =>
+                    userStore.updateUserAvailability(val ? 'away_and_reassigning' : 'away_manual')
+                "
+              />
+            </div>
           </div>
         </div>
       </DropdownMenuLabel>
@@ -108,10 +122,13 @@ import {
 import { SidebarMenuButton } from '@/components/ui/sidebar'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Switch } from '@/components/ui/switch'
-import { ChevronsUpDown, CircleUserRound, LogOut } from 'lucide-vue-next'
+import { ChevronsUpDown, CircleUserRound, LogOut, Moon, Sun } from 'lucide-vue-next'
 import { useUserStore } from '@/stores/user'
 import { useRouter } from 'vue-router'
 
+import { useColorMode } from '@vueuse/core'
+
+const mode = useColorMode()
 const userStore = useUserStore()
 const router = useRouter()
 const { t } = useI18n()
diff --git a/frontend/src/components/table/SimpleTable.vue b/frontend/src/components/table/SimpleTable.vue
index 4101a8c..7c1d0f2 100644
--- a/frontend/src/components/table/SimpleTable.vue
+++ b/frontend/src/components/table/SimpleTable.vue
@@ -1,24 +1,24 @@
 <template>
-  <table class="min-w-full table-fixed divide-y divide-gray-200">
-    <thead class="bg-gray-50">
+  <table class="min-w-full table-fixed divide-y divide-border">
+    <thead class="bg-muted">
       <tr>
         <th
           v-for="(header, index) in headers"
           :key="index"
           scope="col"
-          class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+          class="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider"
         >
           {{ header }}
         </th>
         <th scope="col" class="relative px-6 py-3"></th>
       </tr>
     </thead>
-    <tbody class="bg-white divide-y divide-gray-200">
+    <tbody class="bg-background divide-y divide-border">
       <template v-if="data.length === 0">
         <tr>
           <td :colspan="headers.length + 1" class="px-6 py-12 text-center">
             <div class="flex flex-col items-center space-y-4">
-              <span class="text-md text-gray-500">
+              <span class="text-md text-muted-foreground">
                 {{
                   $t('globals.messages.noResults', {
                     name: $t('globals.terms.result', 2).toLowerCase()
@@ -30,15 +30,15 @@
         </tr>
       </template>
       <template v-else>
-        <tr v-for="(item, index) in data" :key="index">
+        <tr v-for="(item, index) in data" :key="index" class="hover:bg-accent">
           <td
             v-for="key in keys"
             :key="key"
-            class="px-6 py-4 text-sm font-medium text-gray-900 whitespace-normal break-words"
+            class="px-6 py-4 text-sm font-medium text-foreground whitespace-normal break-words"
           >
             {{ item[key] }}
           </td>
-          <td class="px-6 py-4 text-sm text-gray-500" v-if="showDelete">
+          <td v-if="showDelete" class="px-6 py-4 text-sm text-muted-foreground">
             <Button size="xs" variant="ghost" @click.prevent="deleteItem(item)">
               <Trash2 class="h-4 w-4" />
             </Button>
diff --git a/frontend/src/components/ui/avatar/AvatarUpload.vue b/frontend/src/components/ui/avatar/AvatarUpload.vue
index d5c14f0..cb3afba 100644
--- a/frontend/src/components/ui/avatar/AvatarUpload.vue
+++ b/frontend/src/components/ui/avatar/AvatarUpload.vue
@@ -14,7 +14,7 @@
 
     <!-- Delete Icon -->
     <X
-      class="absolute top-1 right-1 bg-white rounded-full p-1 shadow-md z-10 opacity-0 group-hover:opacity-100 transition-opacity"
+      class="absolute top-1 right-1 rounded-full p-1 shadow-md z-10 opacity-0 group-hover:opacity-100 transition-opacity"
       size="20"
       @click.stop="emit('remove')"
       v-if="src"
diff --git a/frontend/src/components/ui/button/Button.vue b/frontend/src/components/ui/button/Button.vue
index 5fa7bf5..2c15f06 100644
--- a/frontend/src/components/ui/button/Button.vue
+++ b/frontend/src/components/ui/button/Button.vue
@@ -1,9 +1,7 @@
 <script setup>
-import { Primitive } from 'radix-vue'
-import { buttonVariants } from '.'
-import { cn } from '@/lib/utils'
-import { ref, computed } from 'vue'
-import { DotLoader } from '@/components/ui/loader'
+import { Primitive } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '.';
 
 const props = defineProps({
   variant: { type: null, required: false },
@@ -11,26 +9,15 @@ const props = defineProps({
   class: { type: null, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false, default: 'button' },
-  isLoading: { type: Boolean, required: false, default: false }
-})
-
-const isDisabled = ref(false)
-
-const computedClass = computed(() => {
-  return cn(buttonVariants({ variant: props.variant, size: props.size }), props.class, {
-    'cursor-not-allowed opacity-50': props.isLoading || isDisabled.value
-  })
-})
+});
 </script>
 
 <template>
   <Primitive
     :as="as"
     :as-child="asChild"
-    :class="computedClass"
-    :disabled="isLoading || isDisabled"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
   >
-    <DotLoader v-if="isLoading" />
-    <slot v-else />
+    <slot />
   </Primitive>
 </template>
diff --git a/frontend/src/components/ui/button/index.js b/frontend/src/components/ui/button/index.js
index b50b970..bf766c8 100644
--- a/frontend/src/components/ui/button/index.js
+++ b/frontend/src/components/ui/button/index.js
@@ -1,31 +1,34 @@
-import { cva } from 'class-variance-authority'
+import { cva } from 'class-variance-authority';
 
-export { default as Button } from './Button.vue'
+export { default as Button } from './Button.vue';
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
-        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        default:
+          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
         outline:
           'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
-        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline'
+        link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
         default: 'h-9 px-4 py-2',
         xs: 'h-7 rounded px-2',
         sm: 'h-8 rounded-md px-3 text-xs',
         lg: 'h-10 rounded-md px-8',
-        icon: 'h-9 w-9'
-      }
+        icon: 'h-9 w-9',
+      },
     },
     defaultVariants: {
       variant: 'default',
-      size: 'default'
-    }
-  }
-)
+      size: 'default',
+    },
+  },
+);
diff --git a/frontend/src/components/ui/input/Input.vue b/frontend/src/components/ui/input/Input.vue
index 9c8555b..92244d6 100644
--- a/frontend/src/components/ui/input/Input.vue
+++ b/frontend/src/components/ui/input/Input.vue
@@ -1,19 +1,19 @@
 <script setup>
-import { useVModel } from '@vueuse/core'
-import { cn } from '@/lib/utils'
+import { useVModel } from '@vueuse/core';
+import { cn } from '@/lib/utils';
 
 const props = defineProps({
   defaultValue: { type: [String, Number], required: false },
   modelValue: { type: [String, Number], required: false },
-  class: { type: null, required: false }
-})
+  class: { type: null, required: false },
+});
 
-const emits = defineEmits(['update:modelValue'])
+const emits = defineEmits(['update:modelValue']);
 
 const modelValue = useVModel(props, 'modelValue', emits, {
   passive: true,
-  defaultValue: props.defaultValue
-})
+  defaultValue: props.defaultValue,
+});
 </script>
 
 <template>
@@ -22,7 +22,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
     :class="
       cn(
         'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
-        props.class
+        props.class,
       )
     "
   />
diff --git a/frontend/src/components/ui/input/index.js b/frontend/src/components/ui/input/index.js
index a691dd6..c5248c5 100644
--- a/frontend/src/components/ui/input/index.js
+++ b/frontend/src/components/ui/input/index.js
@@ -1 +1 @@
-export { default as Input } from './Input.vue'
+export { default as Input } from './Input.vue';
diff --git a/frontend/src/components/ui/separator/Separator.vue b/frontend/src/components/ui/separator/Separator.vue
index 9851910..602f425 100644
--- a/frontend/src/components/ui/separator/Separator.vue
+++ b/frontend/src/components/ui/separator/Separator.vue
@@ -1,21 +1,17 @@
 <script setup>
-import { computed } from 'vue'
-import { Separator } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core';
+import { Separator } from 'reka-ui';
+import { cn } from '@/lib/utils';
 
 const props = defineProps({
-  orientation: { type: String, required: false },
-  decorative: { type: Boolean, required: false },
+  orientation: { type: String, required: false, default: 'horizontal' },
+  decorative: { type: Boolean, required: false, default: true },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false }
-})
+  class: { type: null, required: false },
+});
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
@@ -24,8 +20,8 @@ const delegatedProps = computed(() => {
     :class="
       cn(
         'shrink-0 bg-border',
-        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
-        props.class
+        props.orientation === 'horizontal' ? 'h-px w-full' : 'w-px h-full',
+        props.class,
       )
     "
   />
diff --git a/frontend/src/components/ui/separator/index.js b/frontend/src/components/ui/separator/index.js
index 2287bcb..3cb07b0 100644
--- a/frontend/src/components/ui/separator/index.js
+++ b/frontend/src/components/ui/separator/index.js
@@ -1 +1 @@
-export { default as Separator } from './Separator.vue'
+export { default as Separator } from './Separator.vue';
diff --git a/frontend/src/components/ui/sheet/Sheet.vue b/frontend/src/components/ui/sheet/Sheet.vue
index 1cce970..bedc423 100644
--- a/frontend/src/components/ui/sheet/Sheet.vue
+++ b/frontend/src/components/ui/sheet/Sheet.vue
@@ -1,14 +1,14 @@
 <script setup>
-import { DialogRoot, useForwardPropsEmits } from 'radix-vue'
+import { DialogRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps({
   open: { type: Boolean, required: false },
   defaultOpen: { type: Boolean, required: false },
-  modal: { type: Boolean, required: false }
-})
-const emits = defineEmits(['update:open'])
+  modal: { type: Boolean, required: false },
+});
+const emits = defineEmits(['update:open']);
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/sheet/SheetClose.vue b/frontend/src/components/ui/sheet/SheetClose.vue
index 15a475e..8e118ec 100644
--- a/frontend/src/components/ui/sheet/SheetClose.vue
+++ b/frontend/src/components/ui/sheet/SheetClose.vue
@@ -1,10 +1,10 @@
 <script setup>
-import { DialogClose } from 'radix-vue'
+import { DialogClose } from 'reka-ui';
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false }
-})
+  as: { type: null, required: false },
+});
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/sheet/SheetContent.vue b/frontend/src/components/ui/sheet/SheetContent.vue
index dba88cc..e131ec8 100644
--- a/frontend/src/components/ui/sheet/SheetContent.vue
+++ b/frontend/src/components/ui/sheet/SheetContent.vue
@@ -1,19 +1,19 @@
 <script setup>
-import { computed } from 'vue'
+import { reactiveOmit } from '@vueuse/core';
+import { Cross2Icon } from '@radix-icons/vue';
 import {
   DialogClose,
   DialogContent,
   DialogOverlay,
   DialogPortal,
-  useForwardPropsEmits
-} from 'radix-vue'
-import { Cross2Icon } from '@radix-icons/vue'
-import { sheetVariants } from '.'
-import { cn } from '@/lib/utils'
+  useForwardPropsEmits,
+} from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { sheetVariants } from '.';
 
 defineOptions({
-  inheritAttrs: false
-})
+  inheritAttrs: false,
+});
 
 const props = defineProps({
   class: { type: null, required: false },
@@ -22,8 +22,8 @@ const props = defineProps({
   trapFocus: { type: Boolean, required: false },
   disableOutsidePointerEvents: { type: Boolean, required: false },
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false }
-})
+  as: { type: null, required: false },
+});
 
 const emits = defineEmits([
   'escapeKeyDown',
@@ -31,16 +31,12 @@ const emits = defineEmits([
   'focusOutside',
   'interactOutside',
   'openAutoFocus',
-  'closeAutoFocus'
-])
+  'closeAutoFocus',
+]);
 
-const delegatedProps = computed(() => {
-  const { class: _, side, ...delegated } = props
+const delegatedProps = reactiveOmit(props, 'class', 'side');
 
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/sheet/SheetDescription.vue b/frontend/src/components/ui/sheet/SheetDescription.vue
index 31fe47e..3d7e41a 100644
--- a/frontend/src/components/ui/sheet/SheetDescription.vue
+++ b/frontend/src/components/ui/sheet/SheetDescription.vue
@@ -1,19 +1,15 @@
 <script setup>
-import { computed } from 'vue'
-import { DialogDescription } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core';
+import { DialogDescription } from 'reka-ui';
+import { cn } from '@/lib/utils';
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false }
-})
+  class: { type: null, required: false },
+});
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/sheet/SheetFooter.vue b/frontend/src/components/ui/sheet/SheetFooter.vue
index 8b69675..347921a 100644
--- a/frontend/src/components/ui/sheet/SheetFooter.vue
+++ b/frontend/src/components/ui/sheet/SheetFooter.vue
@@ -1,13 +1,20 @@
 <script setup>
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/utils';
 
 const props = defineProps({
-  class: { type: null, required: false }
-})
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
-  <div :class="cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2', props.class)">
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
     <slot />
   </div>
 </template>
diff --git a/frontend/src/components/ui/sheet/SheetHeader.vue b/frontend/src/components/ui/sheet/SheetHeader.vue
index 0cf8b8c..939dd03 100644
--- a/frontend/src/components/ui/sheet/SheetHeader.vue
+++ b/frontend/src/components/ui/sheet/SheetHeader.vue
@@ -1,13 +1,15 @@
 <script setup>
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/utils';
 
 const props = defineProps({
-  class: { type: null, required: false }
-})
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
-  <div :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)">
+  <div
+    :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)"
+  >
     <slot />
   </div>
 </template>
diff --git a/frontend/src/components/ui/sheet/SheetTitle.vue b/frontend/src/components/ui/sheet/SheetTitle.vue
index 13ce61c..c41153b 100644
--- a/frontend/src/components/ui/sheet/SheetTitle.vue
+++ b/frontend/src/components/ui/sheet/SheetTitle.vue
@@ -1,19 +1,15 @@
 <script setup>
-import { computed } from 'vue'
-import { DialogTitle } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core';
+import { DialogTitle } from 'reka-ui';
+import { cn } from '@/lib/utils';
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false }
-})
+  class: { type: null, required: false },
+});
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/sheet/SheetTrigger.vue b/frontend/src/components/ui/sheet/SheetTrigger.vue
index ccb596c..6194804 100644
--- a/frontend/src/components/ui/sheet/SheetTrigger.vue
+++ b/frontend/src/components/ui/sheet/SheetTrigger.vue
@@ -1,10 +1,10 @@
 <script setup>
-import { DialogTrigger } from 'radix-vue'
+import { DialogTrigger } from 'reka-ui';
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false }
-})
+  as: { type: null, required: false },
+});
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/sheet/index.js b/frontend/src/components/ui/sheet/index.js
index e8f1989..da19f0b 100644
--- a/frontend/src/components/ui/sheet/index.js
+++ b/frontend/src/components/ui/sheet/index.js
@@ -1,13 +1,13 @@
-import { cva } from 'class-variance-authority'
+import { cva } from 'class-variance-authority';
 
-export { default as Sheet } from './Sheet.vue'
-export { default as SheetTrigger } from './SheetTrigger.vue'
-export { default as SheetClose } from './SheetClose.vue'
-export { default as SheetContent } from './SheetContent.vue'
-export { default as SheetHeader } from './SheetHeader.vue'
-export { default as SheetTitle } from './SheetTitle.vue'
-export { default as SheetDescription } from './SheetDescription.vue'
-export { default as SheetFooter } from './SheetFooter.vue'
+export { default as Sheet } from './Sheet.vue';
+export { default as SheetClose } from './SheetClose.vue';
+export { default as SheetContent } from './SheetContent.vue';
+export { default as SheetDescription } from './SheetDescription.vue';
+export { default as SheetFooter } from './SheetFooter.vue';
+export { default as SheetHeader } from './SheetHeader.vue';
+export { default as SheetTitle } from './SheetTitle.vue';
+export { default as SheetTrigger } from './SheetTrigger.vue';
 
 export const sheetVariants = cva(
   'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
@@ -19,11 +19,11 @@ export const sheetVariants = cva(
           'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
         left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
         right:
-          'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm'
-      }
+          'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+      },
     },
     defaultVariants: {
-      side: 'right'
-    }
-  }
-)
+      side: 'right',
+    },
+  },
+);
diff --git a/frontend/src/components/ui/sidebar/Sidebar.vue b/frontend/src/components/ui/sidebar/Sidebar.vue
index 680607e..0cf79a7 100644
--- a/frontend/src/components/ui/sidebar/Sidebar.vue
+++ b/frontend/src/components/ui/sidebar/Sidebar.vue
@@ -1,6 +1,6 @@
 <script setup>
-import { Sheet, SheetContent } from '@/components/ui/sheet';
 import { cn } from '@/lib/utils';
+import { Sheet, SheetContent } from '@/components/ui/sheet';
 import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils';
 
 defineOptions({
@@ -12,7 +12,6 @@ const props = defineProps({
   variant: { type: String, required: false, default: 'sidebar' },
   collapsible: { type: String, required: false, default: 'offcanvas' },
   class: { type: null, required: false },
-  collapseOnMobile: { type: Boolean, required: false, default: true },
 });
 
 const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
@@ -33,7 +32,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
   </div>
 
   <Sheet
-    v-else-if="isMobile && collapseOnMobile"
+    v-else-if="isMobile"
     :open="openMobile"
     v-bind="$attrs"
     @update:open="setOpenMobile"
@@ -55,7 +54,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
 
   <div
     v-else
-    :class="cn('group peer', collapseOnMobile ? 'hidden md:block' : 'block')"
+    class="group peer hidden md:block"
     :data-state="state"
     :data-collapsible="state === 'collapsed' ? collapsible : ''"
     :data-variant="variant"
@@ -77,8 +76,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
     <div
       :class="
         cn(
-          'duration-200 fixed inset-y-0 z-10 h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',
-          collapseOnMobile ? 'hidden' : '',
+          'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',
           side === 'left'
             ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
             : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
diff --git a/frontend/src/components/ui/sidebar/SidebarGroupAction.vue b/frontend/src/components/ui/sidebar/SidebarGroupAction.vue
index 28a8a26..21fefe7 100644
--- a/frontend/src/components/ui/sidebar/SidebarGroupAction.vue
+++ b/frontend/src/components/ui/sidebar/SidebarGroupAction.vue
@@ -1,12 +1,12 @@
-<script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue'
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { Primitive } from 'radix-vue'
+<script setup>
+import { Primitive } from 'reka-ui';
+import { cn } from '@/lib/utils';
 
-const props = defineProps<PrimitiveProps & {
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
@@ -14,12 +14,14 @@ const props = defineProps<PrimitiveProps & {
     data-sidebar="group-action"
     :as="as"
     :as-child="asChild"
-    :class="cn(
-      'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-      'after:absolute after:-inset-2 after:md:hidden',
-      'group-data-[collapsible=icon]:hidden',
-      props.class,
-    )"
+    :class="
+      cn(
+        'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'after:absolute after:-inset-2 after:md:hidden',
+        'group-data-[collapsible=icon]:hidden',
+        props.class,
+      )
+    "
   >
     <slot />
   </Primitive>
diff --git a/frontend/src/components/ui/sidebar/SidebarGroupContent.vue b/frontend/src/components/ui/sidebar/SidebarGroupContent.vue
index 37390c9..3fb7088 100644
--- a/frontend/src/components/ui/sidebar/SidebarGroupContent.vue
+++ b/frontend/src/components/ui/sidebar/SidebarGroupContent.vue
@@ -1,17 +1,13 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+<script setup>
+import { cn } from '@/lib/utils';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
-  <div
-    data-sidebar="group-content"
-    :class="cn('w-full text-sm', props.class)"
-  >
+  <div data-sidebar="group-content" :class="cn('w-full text-sm', props.class)">
     <slot />
   </div>
 </template>
diff --git a/frontend/src/components/ui/sidebar/SidebarGroupLabel.vue b/frontend/src/components/ui/sidebar/SidebarGroupLabel.vue
index 83826c3..857ca66 100644
--- a/frontend/src/components/ui/sidebar/SidebarGroupLabel.vue
+++ b/frontend/src/components/ui/sidebar/SidebarGroupLabel.vue
@@ -1,12 +1,12 @@
-<script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue'
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { Primitive } from 'radix-vue'
+<script setup>
+import { Primitive } from 'reka-ui';
+import { cn } from '@/lib/utils';
 
-const props = defineProps<PrimitiveProps & {
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
@@ -14,10 +14,13 @@ const props = defineProps<PrimitiveProps & {
     data-sidebar="group-label"
     :as="as"
     :as-child="asChild"
-    :class="cn(
-      'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
-      props.class)"
+    :class="
+      cn(
+        'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+        props.class,
+      )
+    "
   >
     <slot />
   </Primitive>
diff --git a/frontend/src/components/ui/sidebar/SidebarHeader.vue b/frontend/src/components/ui/sidebar/SidebarHeader.vue
index eecaddb..8d08ce9 100644
--- a/frontend/src/components/ui/sidebar/SidebarHeader.vue
+++ b/frontend/src/components/ui/sidebar/SidebarHeader.vue
@@ -1,10 +1,9 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+<script setup>
+import { cn } from '@/lib/utils';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/sidebar/SidebarInput.vue b/frontend/src/components/ui/sidebar/SidebarInput.vue
index adf11f9..3faab14 100644
--- a/frontend/src/components/ui/sidebar/SidebarInput.vue
+++ b/frontend/src/components/ui/sidebar/SidebarInput.vue
@@ -1,20 +1,21 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { Input } from '@/components/ui/input'
-import { cn } from '@/lib/utils'
+<script setup>
+import { cn } from '@/lib/utils';
+import { Input } from '@/components/ui/input';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
   <Input
     data-sidebar="input"
-    :class="cn(
-      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',
-      props.class,
-    )"
+    :class="
+      cn(
+        'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',
+        props.class,
+      )
+    "
   >
     <slot />
   </Input>
diff --git a/frontend/src/components/ui/sidebar/SidebarInset.vue b/frontend/src/components/ui/sidebar/SidebarInset.vue
index 27d1db5..57deb72 100644
--- a/frontend/src/components/ui/sidebar/SidebarInset.vue
+++ b/frontend/src/components/ui/sidebar/SidebarInset.vue
@@ -1,19 +1,20 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+<script setup>
+import { cn } from '@/lib/utils';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
   <main
-    :class="cn(
-      'relative flex min-h-svh flex-1 flex-col bg-background',
-      'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
-      props.class,
-    )"
+    :class="
+      cn(
+        'relative flex min-h-svh flex-1 flex-col bg-background',
+        'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
+        props.class,
+      )
+    "
   >
     <slot />
   </main>
diff --git a/frontend/src/components/ui/sidebar/SidebarMenu.vue b/frontend/src/components/ui/sidebar/SidebarMenu.vue
index 3bfd73e..2565af3 100644
--- a/frontend/src/components/ui/sidebar/SidebarMenu.vue
+++ b/frontend/src/components/ui/sidebar/SidebarMenu.vue
@@ -1,10 +1,9 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+<script setup>
+import { cn } from '@/lib/utils';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/sidebar/SidebarMenuAction.vue b/frontend/src/components/ui/sidebar/SidebarMenuAction.vue
index f8f77c0..ac83720 100644
--- a/frontend/src/components/ui/sidebar/SidebarMenuAction.vue
+++ b/frontend/src/components/ui/sidebar/SidebarMenuAction.vue
@@ -1,30 +1,31 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { Primitive, type PrimitiveProps } from 'radix-vue'
+<script setup>
+import { Primitive } from 'reka-ui';
+import { cn } from '@/lib/utils';
 
-const props = withDefaults(defineProps<PrimitiveProps & {
-  showOnHover?: boolean
-  class?: HTMLAttributes['class']
-}>(), {
-  as: 'button',
-})
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false, default: 'button' },
+  showOnHover: { type: Boolean, required: false },
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
   <Primitive
     data-sidebar="menu-action"
-    :class="cn(
-      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',
-      'after:absolute after:-inset-2 after:md:hidden',
-      'peer-data-[size=sm]/menu-button:top-1',
-      'peer-data-[size=default]/menu-button:top-1.5',
-      'peer-data-[size=lg]/menu-button:top-2.5',
-      'group-data-[collapsible=icon]:hidden',
-      showOnHover
-        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',
-      props.class,
-    )"
+    :class="
+      cn(
+        'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',
+        'after:absolute after:-inset-2 after:md:hidden',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        showOnHover &&
+          'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',
+        props.class,
+      )
+    "
     :as="as"
     :as-child="asChild"
   >
diff --git a/frontend/src/components/ui/sidebar/SidebarMenuBadge.vue b/frontend/src/components/ui/sidebar/SidebarMenuBadge.vue
index f878968..d8e48be 100644
--- a/frontend/src/components/ui/sidebar/SidebarMenuBadge.vue
+++ b/frontend/src/components/ui/sidebar/SidebarMenuBadge.vue
@@ -1,24 +1,25 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+<script setup>
+import { cn } from '@/lib/utils';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
   <div
     data-sidebar="menu-badge"
-    :class="cn(
-      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',
-      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
-      'peer-data-[size=sm]/menu-button:top-1',
-      'peer-data-[size=default]/menu-button:top-1.5',
-      'peer-data-[size=lg]/menu-button:top-2.5',
-      'group-data-[collapsible=icon]:hidden',
-      props.class,
-    )"
+    :class="
+      cn(
+        'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',
+        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        props.class,
+      )
+    "
   >
     <slot />
   </div>
diff --git a/frontend/src/components/ui/sidebar/SidebarMenuButton.vue b/frontend/src/components/ui/sidebar/SidebarMenuButton.vue
index ac6926b..da9c94c 100644
--- a/frontend/src/components/ui/sidebar/SidebarMenuButton.vue
+++ b/frontend/src/components/ui/sidebar/SidebarMenuButton.vue
@@ -1,31 +1,40 @@
-<script setup lang="ts">
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
-import { type Component, computed } from 'vue'
-import SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'
-import { useSidebar } from './utils'
+<script setup>
+import { computed } from 'vue';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import SidebarMenuButtonChild from './SidebarMenuButtonChild.vue';
+import { useSidebar } from './utils';
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
-const props = withDefaults(defineProps<SidebarMenuButtonProps & {
-  tooltip?: string | Component
-}>(), {
-  as: 'button',
-  variant: 'default',
-  size: 'default',
-})
+const props = defineProps({
+  variant: { type: null, required: false, default: 'default' },
+  size: { type: null, required: false, default: 'default' },
+  isActive: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false, default: 'button' },
+  tooltip: { type: null, required: false },
+});
 
-const { isMobile, state } = useSidebar()
+const { isMobile, state } = useSidebar();
 
 const delegatedProps = computed(() => {
-  const { tooltip, ...delegated } = props
-  return delegated
-})
+  const { tooltip, ...delegated } = props;
+  return delegated;
+});
 </script>
 
 <template>
-  <SidebarMenuButtonChild v-if="!tooltip" v-bind="{ ...delegatedProps, ...$attrs }">
+  <SidebarMenuButtonChild
+    v-if="!tooltip"
+    v-bind="{ ...delegatedProps, ...$attrs }"
+  >
     <slot />
   </SidebarMenuButtonChild>
 
diff --git a/frontend/src/components/ui/sidebar/SidebarMenuButtonChild.vue b/frontend/src/components/ui/sidebar/SidebarMenuButtonChild.vue
index 1d43866..a3f85de 100644
--- a/frontend/src/components/ui/sidebar/SidebarMenuButtonChild.vue
+++ b/frontend/src/components/ui/sidebar/SidebarMenuButtonChild.vue
@@ -1,21 +1,16 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { Primitive, type PrimitiveProps } from 'radix-vue'
-import { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'
+<script setup>
+import { Primitive } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { sidebarMenuButtonVariants } from '.';
 
-export interface SidebarMenuButtonProps extends PrimitiveProps {
-  variant?: SidebarMenuButtonVariants['variant']
-  size?: SidebarMenuButtonVariants['size']
-  isActive?: boolean
-  class?: HTMLAttributes['class']
-}
-
-const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {
-  as: 'button',
-  variant: 'default',
-  size: 'default',
-})
+const props = defineProps({
+  variant: { type: null, required: false, default: 'default' },
+  size: { type: null, required: false, default: 'default' },
+  isActive: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false, default: 'button' },
+});
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/sidebar/SidebarMenuItem.vue b/frontend/src/components/ui/sidebar/SidebarMenuItem.vue
index b600073..633289c 100644
--- a/frontend/src/components/ui/sidebar/SidebarMenuItem.vue
+++ b/frontend/src/components/ui/sidebar/SidebarMenuItem.vue
@@ -1,10 +1,9 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+<script setup>
+import { cn } from '@/lib/utils';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/sidebar/SidebarMenuSkeleton.vue b/frontend/src/components/ui/sidebar/SidebarMenuSkeleton.vue
index f63dac6..ec6d75e 100644
--- a/frontend/src/components/ui/sidebar/SidebarMenuSkeleton.vue
+++ b/frontend/src/components/ui/sidebar/SidebarMenuSkeleton.vue
@@ -1,16 +1,16 @@
-<script setup lang="ts">
-import { Skeleton } from '@/components/ui/skeleton'
-import { cn } from '@/lib/utils'
-import { computed, type HTMLAttributes } from 'vue'
+<script setup>
+import { computed } from 'vue';
+import { cn } from '@/lib/utils';
+import { Skeleton } from '@/components/ui/skeleton';
 
-const props = defineProps<{
-  showIcon?: boolean
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  showIcon: { type: Boolean, required: false },
+  class: { type: null, required: false },
+});
 
 const width = computed(() => {
-  return `${Math.floor(Math.random() * 40) + 50}%`
-})
+  return `${Math.floor(Math.random() * 40) + 50}%`;
+});
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/sidebar/SidebarMenuSub.vue b/frontend/src/components/ui/sidebar/SidebarMenuSub.vue
index 0bb5af7..25e326f 100644
--- a/frontend/src/components/ui/sidebar/SidebarMenuSub.vue
+++ b/frontend/src/components/ui/sidebar/SidebarMenuSub.vue
@@ -1,20 +1,21 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+<script setup>
+import { cn } from '@/lib/utils';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
   <ul
     data-sidebar="menu-badge"
-    :class="cn(
-      'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
-      'group-data-[collapsible=icon]:hidden',
-      props.class,
-    )"
+    :class="
+      cn(
+        'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
+        'group-data-[collapsible=icon]:hidden',
+        props.class,
+      )
+    "
   >
     <slot />
   </ul>
diff --git a/frontend/src/components/ui/sidebar/SidebarMenuSubButton.vue b/frontend/src/components/ui/sidebar/SidebarMenuSubButton.vue
index 0c63da1..18cd02f 100644
--- a/frontend/src/components/ui/sidebar/SidebarMenuSubButton.vue
+++ b/frontend/src/components/ui/sidebar/SidebarMenuSubButton.vue
@@ -1,17 +1,14 @@
-<script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue'
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { Primitive } from 'radix-vue'
+<script setup>
+import { Primitive } from 'reka-ui';
+import { cn } from '@/lib/utils';
 
-const props = withDefaults(defineProps<PrimitiveProps & {
-  size?: 'sm' | 'md'
-  isActive?: boolean
-  class?: HTMLAttributes['class']
-}>(), {
-  as: 'a',
-  size: 'md',
-})
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false, default: 'a' },
+  size: { type: String, required: false, default: 'md' },
+  isActive: { type: Boolean, required: false },
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
@@ -21,14 +18,16 @@ const props = withDefaults(defineProps<PrimitiveProps & {
     :as-child="asChild"
     :data-size="size"
     :data-active="isActive"
-    :class="cn(
-      'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
-      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
-      size === 'sm' && 'text-xs',
-      size === 'md' && 'text-sm',
-      'group-data-[collapsible=icon]:hidden',
-      props.class,
-    )"
+    :class="
+      cn(
+        'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
+        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+        size === 'sm' && 'text-xs',
+        size === 'md' && 'text-sm',
+        'group-data-[collapsible=icon]:hidden',
+        props.class,
+      )
+    "
   >
     <slot />
   </Primitive>
diff --git a/frontend/src/components/ui/sidebar/SidebarMenuSubItem.vue b/frontend/src/components/ui/sidebar/SidebarMenuSubItem.vue
index a0cfb71..fbc3fbf 100644
--- a/frontend/src/components/ui/sidebar/SidebarMenuSubItem.vue
+++ b/frontend/src/components/ui/sidebar/SidebarMenuSubItem.vue
@@ -1,5 +1,4 @@
-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>
 
 <template>
   <li>
diff --git a/frontend/src/components/ui/sidebar/SidebarProvider.vue b/frontend/src/components/ui/sidebar/SidebarProvider.vue
index 5775811..069416c 100644
--- a/frontend/src/components/ui/sidebar/SidebarProvider.vue
+++ b/frontend/src/components/ui/sidebar/SidebarProvider.vue
@@ -1,57 +1,64 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'
-import { TooltipProvider } from 'radix-vue'
-import { computed, type HTMLAttributes, type Ref, ref } from 'vue'
-import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'
+<script setup>
+import { useEventListener, useMediaQuery, useVModel } from '@vueuse/core';
+import { TooltipProvider } from 'reka-ui';
+import { computed, ref } from 'vue';
+import { cn } from '@/lib/utils';
+import {
+  provideSidebarContext,
+  SIDEBAR_COOKIE_MAX_AGE,
+  SIDEBAR_COOKIE_NAME,
+  SIDEBAR_KEYBOARD_SHORTCUT,
+  SIDEBAR_WIDTH,
+  SIDEBAR_WIDTH_ICON,
+} from './utils';
 
-const props = withDefaults(defineProps<{
-  defaultOpen?: boolean
-  open?: boolean
-  class?: HTMLAttributes['class']
-}>(), {
-  defaultOpen: true,
-  open: undefined,
-})
+const props = defineProps({
+  defaultOpen: { type: Boolean, required: false, default: true },
+  open: { type: Boolean, required: false, default: undefined },
+  class: { type: null, required: false },
+});
 
-const emits = defineEmits<{
-  'update:open': [open: boolean]
-}>()
+const emits = defineEmits(['update:open']);
 
-const isMobile = useMediaQuery('(max-width: 768px)')
-const openMobile = ref(false)
+const isMobile = useMediaQuery('(max-width: 768px)');
+const openMobile = ref(false);
 
 const open = useVModel(props, 'open', emits, {
   defaultValue: props.defaultOpen ?? false,
-  passive: (props.open === undefined) as false,
-}) as Ref<boolean>
+  passive: props.open === undefined,
+});
 
-function setOpen(value: boolean) {
-  open.value = value // emits('update:open', value)
+function setOpen(value) {
+  open.value = value; // emits('update:open', value)
 
   // This sets the cookie to keep the sidebar state.
-  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
 }
 
-function setOpenMobile(value: boolean) {
-  openMobile.value = value
+function setOpenMobile(value) {
+  openMobile.value = value;
 }
 
 // Helper to toggle the sidebar.
 function toggleSidebar() {
-  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)
+  return isMobile.value
+    ? setOpenMobile(!openMobile.value)
+    : setOpen(!open.value);
 }
 
-useEventListener('keydown', (event: KeyboardEvent) => {
-  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
-    event.preventDefault()
-    toggleSidebar()
+useEventListener('keydown', (event) => {
+  if (
+    event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+    (event.metaKey || event.ctrlKey)
+  ) {
+    event.preventDefault();
+    toggleSidebar();
   }
-})
+});
 
 // We add a state so that we can do data-state="expanded" or "collapsed".
 // This makes it easier to style the sidebar with Tailwind classes.
-const state = computed(() => open.value ? 'expanded' : 'collapsed')
+const state = computed(() => (open.value ? 'expanded' : 'collapsed'));
 
 provideSidebarContext({
   state,
@@ -61,7 +68,7 @@ provideSidebarContext({
   openMobile,
   setOpenMobile,
   toggleSidebar,
-})
+});
 </script>
 
 <template>
@@ -71,7 +78,12 @@ provideSidebarContext({
         '--sidebar-width': SIDEBAR_WIDTH,
         '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
       }"
-      :class="cn('group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar', props.class)"
+      :class="
+        cn(
+          'group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar',
+          props.class,
+        )
+      "
       v-bind="$attrs"
     >
       <slot />
diff --git a/frontend/src/components/ui/sidebar/SidebarRail.vue b/frontend/src/components/ui/sidebar/SidebarRail.vue
index 9b644cd..da9f834 100644
--- a/frontend/src/components/ui/sidebar/SidebarRail.vue
+++ b/frontend/src/components/ui/sidebar/SidebarRail.vue
@@ -1,13 +1,12 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { useSidebar } from './utils'
+<script setup>
+import { cn } from '@/lib/utils';
+import { useSidebar } from './utils';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 
-const { toggleSidebar } = useSidebar()
+const { toggleSidebar } = useSidebar();
 </script>
 
 <template>
@@ -16,15 +15,17 @@ const { toggleSidebar } = useSidebar()
     aria-label="Toggle Sidebar"
     :tabindex="-1"
     title="Toggle Sidebar"
-    :class="cn(
-      'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
-      '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
-      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
-      'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',
-      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
-      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
-      props.class,
-    )"
+    :class="
+      cn(
+        'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
+        '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
+        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+        'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',
+        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+        props.class,
+      )
+    "
     @click="toggleSidebar"
   >
     <slot />
diff --git a/frontend/src/components/ui/sidebar/SidebarSeparator.vue b/frontend/src/components/ui/sidebar/SidebarSeparator.vue
index dc7e93c..0c1750e 100644
--- a/frontend/src/components/ui/sidebar/SidebarSeparator.vue
+++ b/frontend/src/components/ui/sidebar/SidebarSeparator.vue
@@ -1,11 +1,10 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { Separator } from '@/components/ui/separator'
-import { cn } from '@/lib/utils'
+<script setup>
+import { cn } from '@/lib/utils';
+import { Separator } from '@/components/ui/separator';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/sidebar/SidebarTrigger.vue b/frontend/src/components/ui/sidebar/SidebarTrigger.vue
index 4bcc61a..0afcdb3 100644
--- a/frontend/src/components/ui/sidebar/SidebarTrigger.vue
+++ b/frontend/src/components/ui/sidebar/SidebarTrigger.vue
@@ -1,15 +1,14 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { Button } from '@/components/ui/button'
-import { cn } from '@/lib/utils'
-import { PanelLeft } from 'lucide-vue-next'
-import { useSidebar } from './utils'
+<script setup>
+import { ViewVerticalIcon } from '@radix-icons/vue';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { useSidebar } from './utils';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps({
+  class: { type: null, required: false },
+});
 
-const { toggleSidebar } = useSidebar()
+const { toggleSidebar } = useSidebar();
 </script>
 
 <template>
@@ -20,7 +19,7 @@ const { toggleSidebar } = useSidebar()
     :class="cn('h-7 w-7', props.class)"
     @click="toggleSidebar"
   >
-    <PanelLeft />
+    <ViewVerticalIcon />
     <span class="sr-only">Toggle Sidebar</span>
   </Button>
 </template>
diff --git a/frontend/src/components/ui/sidebar/index.js b/frontend/src/components/ui/sidebar/index.js
new file mode 100644
index 0000000..3d0a1a2
--- /dev/null
+++ b/frontend/src/components/ui/sidebar/index.js
@@ -0,0 +1,49 @@
+import { cva } from 'class-variance-authority';
+
+export { default as Sidebar } from './Sidebar.vue';
+export { default as SidebarContent } from './SidebarContent.vue';
+export { default as SidebarFooter } from './SidebarFooter.vue';
+export { default as SidebarGroup } from './SidebarGroup.vue';
+export { default as SidebarGroupAction } from './SidebarGroupAction.vue';
+export { default as SidebarGroupContent } from './SidebarGroupContent.vue';
+export { default as SidebarGroupLabel } from './SidebarGroupLabel.vue';
+export { default as SidebarHeader } from './SidebarHeader.vue';
+export { default as SidebarInput } from './SidebarInput.vue';
+export { default as SidebarInset } from './SidebarInset.vue';
+export { default as SidebarMenu } from './SidebarMenu.vue';
+export { default as SidebarMenuAction } from './SidebarMenuAction.vue';
+export { default as SidebarMenuBadge } from './SidebarMenuBadge.vue';
+export { default as SidebarMenuButton } from './SidebarMenuButton.vue';
+export { default as SidebarMenuItem } from './SidebarMenuItem.vue';
+export { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue';
+export { default as SidebarMenuSub } from './SidebarMenuSub.vue';
+export { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue';
+export { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue';
+export { default as SidebarProvider } from './SidebarProvider.vue';
+export { default as SidebarRail } from './SidebarRail.vue';
+export { default as SidebarSeparator } from './SidebarSeparator.vue';
+export { default as SidebarTrigger } from './SidebarTrigger.vue';
+
+export { useSidebar } from './utils';
+
+export const sidebarMenuButtonVariants = cva(
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        outline:
+          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+      },
+      size: {
+        default: 'h-8 text-sm',
+        sm: 'h-7 text-xs',
+        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
diff --git a/frontend/src/components/ui/sidebar/utils.js b/frontend/src/components/ui/sidebar/utils.js
new file mode 100644
index 0000000..ebbaca3
--- /dev/null
+++ b/frontend/src/components/ui/sidebar/utils.js
@@ -0,0 +1,10 @@
+import { createContext } from 'reka-ui';
+
+export const SIDEBAR_COOKIE_NAME = 'sidebar:state';
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+export const SIDEBAR_WIDTH = '16rem';
+export const SIDEBAR_WIDTH_MOBILE = '18rem';
+export const SIDEBAR_WIDTH_ICON = '3rem';
+export const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+
+export const [useSidebar, provideSidebarContext] = createContext('Sidebar');
diff --git a/frontend/src/components/ui/skeleton/Skeleton.vue b/frontend/src/components/ui/skeleton/Skeleton.vue
index 30ac5ec..e051b00 100644
--- a/frontend/src/components/ui/skeleton/Skeleton.vue
+++ b/frontend/src/components/ui/skeleton/Skeleton.vue
@@ -1,9 +1,9 @@
 <script setup>
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/utils';
 
 const props = defineProps({
-  class: { type: null, required: false }
-})
+  class: { type: null, required: false },
+});
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/skeleton/index.js b/frontend/src/components/ui/skeleton/index.js
index be21fad..38cc2ba 100644
--- a/frontend/src/components/ui/skeleton/index.js
+++ b/frontend/src/components/ui/skeleton/index.js
@@ -1 +1 @@
-export { default as Skeleton } from './Skeleton.vue'
+export { default as Skeleton } from './Skeleton.vue';
diff --git a/frontend/src/components/ui/tooltip/Tooltip.vue b/frontend/src/components/ui/tooltip/Tooltip.vue
index b66372f..2ce1323 100644
--- a/frontend/src/components/ui/tooltip/Tooltip.vue
+++ b/frontend/src/components/ui/tooltip/Tooltip.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { TooltipRoot, useForwardPropsEmits } from 'radix-vue'
+import { TooltipRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps({
   defaultOpen: { type: Boolean, required: false },
@@ -8,11 +8,11 @@ const props = defineProps({
   disableHoverableContent: { type: Boolean, required: false },
   disableClosingTrigger: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
-  ignoreNonKeyboardFocus: { type: Boolean, required: false }
-})
-const emits = defineEmits(['update:open'])
+  ignoreNonKeyboardFocus: { type: Boolean, required: false },
+});
+const emits = defineEmits(['update:open']);
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/tooltip/TooltipContent.vue b/frontend/src/components/ui/tooltip/TooltipContent.vue
index 5b09f1e..469f1c5 100644
--- a/frontend/src/components/ui/tooltip/TooltipContent.vue
+++ b/frontend/src/components/ui/tooltip/TooltipContent.vue
@@ -1,13 +1,14 @@
 <script setup>
-import { computed } from 'vue'
-import { TooltipContent, TooltipPortal, useForwardPropsEmits } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core';
+import { TooltipContent, TooltipPortal, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
 
 defineOptions({
-  inheritAttrs: false
-})
+  inheritAttrs: false,
+});
 
 const props = defineProps({
+  forceMount: { type: Boolean, required: false },
   ariaLabel: { type: String, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
@@ -21,18 +22,16 @@ const props = defineProps({
   arrowPadding: { type: Number, required: false },
   sticky: { type: String, required: false },
   hideWhenDetached: { type: Boolean, required: false },
-  class: { type: null, required: false }
-})
+  positionStrategy: { type: String, required: false },
+  updatePositionStrategy: { type: String, required: false },
+  class: { type: null, required: false },
+});
 
-const emits = defineEmits(['escapeKeyDown', 'pointerDownOutside'])
+const emits = defineEmits(['escapeKeyDown', 'pointerDownOutside']);
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+const delegatedProps = reactiveOmit(props, 'class');
 
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
@@ -42,7 +41,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       :class="
         cn(
           'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-          props.class
+          props.class,
         )
       "
     >
diff --git a/frontend/src/components/ui/tooltip/TooltipProvider.vue b/frontend/src/components/ui/tooltip/TooltipProvider.vue
index 2e978bd..e1f6385 100644
--- a/frontend/src/components/ui/tooltip/TooltipProvider.vue
+++ b/frontend/src/components/ui/tooltip/TooltipProvider.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { TooltipProvider } from 'radix-vue'
+import { TooltipProvider } from 'reka-ui';
 
 const props = defineProps({
   delayDuration: { type: Number, required: false },
@@ -7,8 +7,8 @@ const props = defineProps({
   disableHoverableContent: { type: Boolean, required: false },
   disableClosingTrigger: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
-  ignoreNonKeyboardFocus: { type: Boolean, required: false }
-})
+  ignoreNonKeyboardFocus: { type: Boolean, required: false },
+});
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/tooltip/TooltipTrigger.vue b/frontend/src/components/ui/tooltip/TooltipTrigger.vue
index b05cb99..a009e4f 100644
--- a/frontend/src/components/ui/tooltip/TooltipTrigger.vue
+++ b/frontend/src/components/ui/tooltip/TooltipTrigger.vue
@@ -1,10 +1,11 @@
 <script setup>
-import { TooltipTrigger } from 'radix-vue'
+import { TooltipTrigger } from 'reka-ui';
 
 const props = defineProps({
+  reference: { type: null, required: false },
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false }
-})
+  as: { type: null, required: false },
+});
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/tooltip/index.js b/frontend/src/components/ui/tooltip/index.js
index 82049b4..94e681c 100644
--- a/frontend/src/components/ui/tooltip/index.js
+++ b/frontend/src/components/ui/tooltip/index.js
@@ -1,4 +1,4 @@
-export { default as Tooltip } from './Tooltip.vue'
-export { default as TooltipContent } from './TooltipContent.vue'
-export { default as TooltipTrigger } from './TooltipTrigger.vue'
-export { default as TooltipProvider } from './TooltipProvider.vue'
+export { default as Tooltip } from './Tooltip.vue';
+export { default as TooltipContent } from './TooltipContent.vue';
+export { default as TooltipProvider } from './TooltipProvider.vue';
+export { default as TooltipTrigger } from './TooltipTrigger.vue';
diff --git a/frontend/src/features/admin/agents/AgentForm.vue b/frontend/src/features/admin/agents/AgentForm.vue
index fb79227..f694d26 100644
--- a/frontend/src/features/admin/agents/AgentForm.vue
+++ b/frontend/src/features/admin/agents/AgentForm.vue
@@ -12,7 +12,7 @@
 
         <div class="space-y-4 flex-2">
           <div class="flex items-center gap-3">
-            <h3 class="text-lg font-semibold text-gray-900">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-foreground">
               {{ props.initialValues.first_name }} {{ props.initialValues.last_name }}
             </h3>
             <Badge :class="['px-2 rounded-full text-xs font-medium', availabilityStatus.color]">
@@ -25,7 +25,7 @@
               <Clock class="w-5 h-5 text-gray-400" />
               <div>
                 <p class="text-sm text-gray-500">{{ $t('form.field.lastActive') }}</p>
-                <p class="text-sm font-medium text-gray-700">
+                <p class="text-sm font-medium text-gray-700 dark:text-foreground">
                   {{
                     props.initialValues.last_active_at
                       ? format(new Date(props.initialValues.last_active_at), 'PPpp')
@@ -38,7 +38,7 @@
               <LogIn class="w-5 h-5 text-gray-400" />
               <div>
                 <p class="text-sm text-gray-500">{{ $t('form.field.lastLogin') }}</p>
-                <p class="text-sm font-medium text-gray-700">
+                <p class="text-sm font-medium text-gray-700 dark:text-foreground">
                   {{
                     props.initialValues.last_login_at
                       ? format(new Date(props.initialValues.last_login_at), 'PPpp')
diff --git a/frontend/src/features/admin/automation/ActionBox.vue b/frontend/src/features/admin/automation/ActionBox.vue
index 2b3b5d1..2e660d3 100644
--- a/frontend/src/features/admin/automation/ActionBox.vue
+++ b/frontend/src/features/admin/automation/ActionBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="space-y-5 rounded-lg" :class="{ 'box p-5': actions.length > 0 }">
+  <div class="space-y-5 rounded" :class="{ 'box p-5': actions.length > 0 }">
     <div class="space-y-5">
       <div v-for="(action, index) in actions" :key="index" class="space-y-5">
         <div v-if="index > 0">
diff --git a/frontend/src/features/admin/automation/RuleBox.vue b/frontend/src/features/admin/automation/RuleBox.vue
index 13b29f9..9f5a936 100644
--- a/frontend/src/features/admin/automation/RuleBox.vue
+++ b/frontend/src/features/admin/automation/RuleBox.vue
@@ -23,7 +23,7 @@
       </RadioGroup>
     </div>
 
-    <div class="space-y-5 rounded-lg" :class="{ 'box p-5': ruleGroup.rules?.length > 0 }">
+    <div class="space-y-5 rounded" :class="{ 'box p-5': ruleGroup.rules?.length > 0 }">
       <div class="space-y-5">
         <div v-for="(rule, index) in ruleGroup.rules" :key="rule" class="space-y-5">
           <div v-if="index > 0">
diff --git a/frontend/src/features/admin/macros/ActionBuilder.vue b/frontend/src/features/admin/macros/ActionBuilder.vue
index f6a305f..ecaf348 100644
--- a/frontend/src/features/admin/macros/ActionBuilder.vue
+++ b/frontend/src/features/admin/macros/ActionBuilder.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="space-y-5 rounded-lg">
+  <div class="space-y-5 rounded">
     <div class="space-y-5">
       <div v-for="(action, index) in model" :key="index" class="space-y-5">
         <hr v-if="index" class="border-t-2 border-dotted border-gray-300" />
diff --git a/frontend/src/features/admin/roles/RoleForm.vue b/frontend/src/features/admin/roles/RoleForm.vue
index a51300f..0f752ef 100644
--- a/frontend/src/features/admin/roles/RoleForm.vue
+++ b/frontend/src/features/admin/roles/RoleForm.vue
@@ -30,7 +30,7 @@
         <div
           v-for="entity in permissions"
           :key="entity.name"
-          class="rounded-lg border border-border bg-card"
+          class="rounded border border-border bg-card"
         >
           <div class="border-b border-border bg-muted/30 px-5 py-3">
             <h4 class="font-medium text-card-foreground">{{ entity.name }}</h4>
diff --git a/frontend/src/features/admin/sla/SLAForm.vue b/frontend/src/features/admin/sla/SLAForm.vue
index 800a72f..19a5fe0 100644
--- a/frontend/src/features/admin/sla/SLAForm.vue
+++ b/frontend/src/features/admin/sla/SLAForm.vue
@@ -95,7 +95,7 @@
           <div class="flex items-center justify-between mb-5">
             <div class="flex items-center gap-3">
               <span
-                class="flex items-center justify-center w-8 h-8 rounded-lg"
+                class="flex items-center justify-center w-8 h-8 rounded"
                 :class="{
                   'bg-red-100/80 text-red-600': notification.type === 'breach',
                   'bg-amber-100/80 text-amber-600': notification.type === 'warning'
@@ -264,7 +264,7 @@
       <!-- Empty State -->
       <div
         v-else
-        class="flex flex-col items-center justify-center p-8 space-y-3 rounded-xl bg-muted/30 border border-dashed"
+        class="flex flex-col items-center justify-center p-8 space-y-3 rounded bg-muted/30 border border-dashed"
       >
         <Bell class="w-8 h-8 text-muted-foreground" />
         <p class="text-sm text-muted-foreground">{{ t('admin.sla.noAlertsConfigured') }}</p>
diff --git a/frontend/src/features/command/CommandBox.vue b/frontend/src/features/command/CommandBox.vue
index 7868fef..85824b0 100644
--- a/frontend/src/features/command/CommandBox.vue
+++ b/frontend/src/features/command/CommandBox.vue
@@ -64,7 +64,7 @@
                   :value="macro.label"
                   :data-index="index"
                   @select="handleApplyMacro(macro)"
-                  class="px-3 py-2 rounded-md cursor-pointer transition-all duration-200 hover:bg-primary/10 hover:text-primary"
+                  class="px-3 py-2 rounded cursor-pointer transition-all duration-200 hover:bg-primary/10 hover:text-primary"
                 >
                   <div class="flex items-center gap-2">
                     <Zap size="14" class="text-primary shrink-0" />
@@ -84,7 +84,7 @@
                       {{ $t('command.replyPreview') }}
                     </p>
                     <div
-                      class="w-full min-h-200 p-2 bg-muted/50 rounded-md overflow-auto shadow-sm native-html"
+                      class="w-full min-h-200 p-2 bg-muted/50 rounded overflow-auto shadow-sm native-html"
                       v-dompurify-html="replyContent"
                     />
                   </div>
@@ -98,7 +98,7 @@
                       <div
                         v-for="action in otherActions"
                         :key="action.type"
-                        class="flex items-center gap-2 px-2 py-1.5 bg-muted/30 hover:bg-accent hover:text-accent-foreground rounded-md text-xs transition-all duration-200 group"
+                        class="flex items-center gap-2 px-2 py-1.5 bg-muted/30 hover:bg-accent hover:text-accent-foreground rounded text-xs transition-all duration-200 group"
                       >
                         <div
                           class="p-1 bg-primary/10 rounded-full group-hover:bg-primary/20 transition-colors duration-200"
diff --git a/frontend/src/features/contact/ContactNotes.vue b/frontend/src/features/contact/ContactNotes.vue
index c96e42a..74ccc7f 100644
--- a/frontend/src/features/contact/ContactNotes.vue
+++ b/frontend/src/features/contact/ContactNotes.vue
@@ -2,7 +2,7 @@
   <div class="w-full space-y-6 pb-8 relative">
     <!-- Header -->
     <div class="flex items-center justify-between mb-4">
-      <span class="text-xl font-semibold text-gray-900">{{ $t('globals.terms.note', 2) }}</span>
+      <span class="text-xl font-semibold text-gray-900 dark:text-foreground">{{ $t('globals.terms.note', 2) }}</span>
       <Button
         variant="outline"
         size="sm"
@@ -54,7 +54,7 @@
         class="overflow-hidden border-gray-2 hover:border-gray-300 transition-all duration-200 box hover:shadow"
       >
         <!-- Header -->
-        <CardHeader class="bg-gray-50/50 border-b p-2">
+        <CardHeader class="bg-gray-50/50 dark:bg-secondary border-b p-2">
           <div class="flex items-center justify-between">
             <div class="flex items-center space-x-3">
               <Avatar class="border border-gray-200 shadow-sm">
@@ -64,7 +64,7 @@
                 </AvatarFallback>
               </Avatar>
               <div>
-                <p class="text-sm font-medium text-gray-900">{{ note.first_name }} {{ note.last_name }}</p>
+                <p class="text-sm font-medium text-gray-900 dark:text-foreground">{{ note.first_name }} {{ note.last_name }}</p>
                 <p class="text-xs text-muted-foreground flex items-center">
                   <ClockIcon class="h-3 w-3 mr-1 inline-block opacity-70" />
                   {{ formatDate(note.created_at) }}
@@ -109,13 +109,13 @@
     <!-- No notes message -->
     <div
       v-if="notes.length === 0 && !isAddingNote && !isLoading"
-      class="box border-dashed p-10 text-center bg-gray-50/50 mt-6"
+      class="box border-dashed p-10 text-center bg-gray-50/50 mt-6 dark:bg-background"
     >
       <div class="flex flex-col items-center">
-        <div class="rounded-full bg-gray-100 p-4 mb-2">
-          <MessageSquareIcon class="text-gray-400" size="25" />
+        <div class="rounded-full bg-gray-100 dark:bg-foreground p-4 mb-2">
+          <MessageSquareIcon class="text-gray-400 dark:text-background" size="25" />
         </div>
-        <h3 class="mt-2 text-base font-medium text-gray-900">{{ $t('contact.notes.empty') }}</h3>
+        <h3 class="mt-2 text-base font-medium text-gray-900 dark:text-foreground">{{ $t('contact.notes.empty') }}</h3>
         <p class="mt-1 text-sm text-muted-foreground max-w-sm mx-auto">
           {{ $t('contact.notes.help') }}
         </p>
diff --git a/frontend/src/features/conversation/Conversation.vue b/frontend/src/features/conversation/Conversation.vue
index a649665..4a7720a 100644
--- a/frontend/src/features/conversation/Conversation.vue
+++ b/frontend/src/features/conversation/Conversation.vue
@@ -12,7 +12,7 @@
         <DropdownMenu>
           <DropdownMenuTrigger>
             <div
-              class="flex items-center space-x-1 cursor-pointer bg-primary px-2 py-1 rounded-md text-sm"
+              class="flex items-center space-x-1 cursor-pointer bg-primary px-2 py-1 rounded text-sm"
               v-if="!conversationStore.conversation.loading"
             >
               <span class="text-secondary font-medium inline-block">
diff --git a/frontend/src/features/conversation/ConversationTextEditor.vue b/frontend/src/features/conversation/ConversationTextEditor.vue
index 3f48ba7..b9a50bd 100644
--- a/frontend/src/features/conversation/ConversationTextEditor.vue
+++ b/frontend/src/features/conversation/ConversationTextEditor.vue
@@ -4,7 +4,7 @@
       :editor="editor"
       :tippy-options="{ duration: 100 }"
       v-if="editor"
-      class="bg-white p-1 box will-change-transform"
+      class="bg-background p-1 box will-change-transform"
     >
       <div class="flex space-x-1 items-center">
         <DropdownMenu v-if="aiPrompts.length > 0">
@@ -32,7 +32,7 @@
           variant="ghost"
           @click.prevent="isBold = !isBold"
           :active="isBold"
-          :class="{ 'bg-gray-200': isBold }"
+          :class="{ 'bg-gray-200 dark:bg-secondary': isBold }"
         >
           <Bold size="14" />
         </Button>
@@ -41,7 +41,7 @@
           variant="ghost"
           @click.prevent="isItalic = !isItalic"
           :active="isItalic"
-          :class="{ 'bg-gray-200': isItalic }"
+          :class="{ 'bg-gray-200 dark:bg-secondary': isItalic }"
         >
           <Italic size="14" />
         </Button>
@@ -49,7 +49,7 @@
           size="sm"
           variant="ghost"
           @click.prevent="toggleBulletList"
-          :class="{ 'bg-gray-200': editor?.isActive('bulletList') }"
+          :class="{ 'bg-gray-200 dark:bg-secondary': editor?.isActive('bulletList') }"
         >
           <List size="14" />
         </Button>
@@ -58,7 +58,7 @@
           size="sm"
           variant="ghost"
           @click.prevent="toggleOrderedList"
-          :class="{ 'bg-gray-200': editor?.isActive('orderedList') }"
+          :class="{ 'bg-gray-200 dark:bg-secondary': editor?.isActive('orderedList') }"
         >
           <ListOrdered size="14" />
         </Button>
@@ -66,16 +66,16 @@
           size="sm"
           variant="ghost"
           @click.prevent="openLinkModal"
-          :class="{ 'bg-gray-200': editor?.isActive('link') }"
+          :class="{ 'bg-gray-200 dark:bg-secondary': editor?.isActive('link') }"
         >
           <LinkIcon size="14" />
         </Button>
-        <div v-if="showLinkInput" class="flex space-x-2 p-2 bg-white border rounded-lg">
-          <input
+        <div v-if="showLinkInput" class="flex space-x-2 p-2 bg-background border rounded">
+          <Input
             v-model="linkUrl"
             type="text"
             placeholder="Enter link URL"
-            class="border p-1 text-sm"
+            class="border p-1 text-sm w-[200px]"
           />
           <Button size="sm" @click="setLink">
             <Check size="14" />
@@ -111,6 +111,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
+import { Input } from '@/components/ui/input'
 import Placeholder from '@tiptap/extension-placeholder'
 import Image from '@tiptap/extension-image'
 import StarterKit from '@tiptap/starter-kit'
diff --git a/frontend/src/features/conversation/CreateConversation.vue b/frontend/src/features/conversation/CreateConversation.vue
index d657d9d..fdf1d35 100644
--- a/frontend/src/features/conversation/CreateConversation.vue
+++ b/frontend/src/features/conversation/CreateConversation.vue
@@ -5,7 +5,7 @@
         <DialogTitle>
           {{
             $t('globals.messages.new', {
-              name: $t('globals.terms.conversation')
+              name: $t('globals.terms.conversation').toLowerCase()
             })
           }}
         </DialogTitle>
@@ -28,13 +28,13 @@
 
               <ul
                 v-if="searchResults.length"
-                class="border rounded p-2 max-h-60 overflow-y-auto absolute bg-white w-full z-50 shadow-lg"
+                class="border rounded p-2 max-h-60 overflow-y-auto absolute w-full z-50 shadow-lg bg-background"
               >
                 <li
                   v-for="contact in searchResults"
                   :key="contact.email"
                   @click="selectContact(contact)"
-                  class="cursor-pointer p-2 hover:bg-gray-100 rounded"
+                  class="cursor-pointer p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800"
                 >
                   {{ contact.first_name }} {{ contact.last_name }} ({{ contact.email }})
                 </li>
@@ -125,11 +125,17 @@
                   <template #selected="{ selected }">
                     <div class="flex items-center gap-3">
                       <div class="w-7 h-7 flex items-center justify-center" v-if="selected">
-                        {{ selected?.emoji }}
+                        <span v-if="selected?.emoji">{{ selected?.emoji }}</span>
+                        <div
+                          v-else
+                          class="text-primary bg-muted rounded-full w-7 h-7 flex items-center justify-center"
+                        >
+                          <Users size="14" />
+                        </div>
                       </div>
-                      <span class="text-sm">{{
-                        selected?.label || t('form.field.selectTeam')
-                      }}</span>
+                      <span class="text-sm">
+                        {{ selected?.label || t('form.field.selectTeam') }}
+                      </span>
                     </div>
                   </template>
                 </ComboBox>
@@ -167,11 +173,7 @@
                     <div class="flex items-center gap-3">
                       <Avatar class="w-7 h-7" v-if="selected">
                         <AvatarImage
-                          :src="
-                            selected?.value === 'none'
-                              ? ''
-                              : selected?.avatar_url || ''
-                          "
+                          :src="selected?.value === 'none' ? '' : selected?.avatar_url || ''"
                           :alt="selected?.value === 'none' ? 'N' : selected?.label?.slice(0, 2)"
                         />
                         <AvatarFallback>
diff --git a/frontend/src/features/conversation/MacroActionsPreview.vue b/frontend/src/features/conversation/MacroActionsPreview.vue
index ab439e8..00e90fc 100644
--- a/frontend/src/features/conversation/MacroActionsPreview.vue
+++ b/frontend/src/features/conversation/MacroActionsPreview.vue
@@ -4,19 +4,18 @@
       <div
         v-for="action in actions"
         :key="action.type"
-        class="flex items-center bg-white border border-gray-200 rounded shadow-sm transition-all duration-300 ease-in-out hover:shadow-md group gap-2 py-1"
+        class="flex items-center border border-gray-200 rounded shadow-sm transition-all duration-300 ease-in-out hover:shadow-md group gap-2"
       >
         <div class="flex items-center space-x-2 px-2">
           <component
             :is="getIcon(action.type)"
             size="16"
-            class="text-gray-500 text-primary group-hover:text-primary"
+            class="text-gray-500 text-primary"
           />
           <Tooltip>
             <TooltipTrigger as-child>
               <div
-                class="max-w-[12rem] overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium text-primary group-hover:text-gray-900"
-              >
+                class="max-w-[12rem] overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium text-primary group-hover:text-gray-900 dark:group-hover:text-gray-100">
                 {{ getDisplayValue(action) }}
               </div>
             </TooltipTrigger>
@@ -27,7 +26,7 @@
         </div>
         <button
           @click.stop="onRemove(action)"
-          class="pr-2 text-gray-400 hover:text-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 rounded transition-colors duration-300 ease-in-out"
+          class="p-2 text-gray-400 hover:text-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 rounded transition-colors duration-300 ease-in-out"
           title="Remove action"
         >
           <X size="14" />
diff --git a/frontend/src/features/conversation/ReplyBox.vue b/frontend/src/features/conversation/ReplyBox.vue
index 6bbda3c..696a709 100644
--- a/frontend/src/features/conversation/ReplyBox.vue
+++ b/frontend/src/features/conversation/ReplyBox.vue
@@ -42,7 +42,7 @@
     <Dialog :open="isEditorFullscreen" @update:open="isEditorFullscreen = false">
       <DialogContent
         class="max-w-[60%] max-h-[75%] h-[70%] bg-card text-card-foreground p-4 flex flex-col"
-        :class="{ '!bg-[#FEF1E1]': messageType === 'private_note' }"
+        :class="{ '!bg-[#FEF1E1] dark:!bg-[#4C3A24]': messageType === 'private_note' }"
         @escapeKeyDown="isEditorFullscreen = false"
         :hide-close-button="true"
       >
@@ -80,7 +80,7 @@
     <!-- Main Editor non-fullscreen -->
     <div
       class="bg-card text-card-foreground box m-2 px-2 pt-2 flex flex-col"
-      :class="{ '!bg-[#FEF1E1]': messageType === 'private_note' }"
+      :class="{ '!bg-[#FEF1E1] dark:!bg-[#4C3A24]': messageType === 'private_note' }"
       v-if="!isEditorFullscreen"
     >
       <ReplyBoxContent
diff --git a/frontend/src/features/conversation/ReplyBoxContent.vue b/frontend/src/features/conversation/ReplyBoxContent.vue
index cf41153..f3d5ec7 100644
--- a/frontend/src/features/conversation/ReplyBoxContent.vue
+++ b/frontend/src/features/conversation/ReplyBoxContent.vue
@@ -6,18 +6,18 @@
       class="flex justify-between items-center"
       :class="{ 'mb-4': !isFullscreen, 'border-b border-border pb-4': isFullscreen }"
     >
-      <Tabs v-model="messageType" class="rounded-lg border">
-        <TabsList class="bg-muted p-1 rounded-lg">
+      <Tabs v-model="messageType" class="rounded border">
+        <TabsList class="bg-muted p-1 rounded">
           <TabsTrigger
             value="reply"
-            class="px-3 py-1 rounded-lg transition-colors duration-200"
+            class="px-3 py-1 rounded transition-colors duration-200"
             :class="{ 'bg-background text-foreground': messageType === 'reply' }"
           >
             {{ $t('replyBox.reply') }}
           </TabsTrigger>
           <TabsTrigger
             value="private_note"
-            class="px-3 py-1 rounded-lg transition-colors duration-200"
+            class="px-3 py-1 rounded transition-colors duration-200"
             :class="{ 'bg-background text-foreground': messageType === 'private_note' }"
           >
             {{ $t('replyBox.privateNote') }}
@@ -48,7 +48,7 @@
           type="text"
           :placeholder="t('replyBox.emailAddresess')"
           v-model="to"
-          class="flex-grow px-3 py-2 text-sm border rounded-md focus:ring-2 focus:ring-ring"
+          class="flex-grow px-3 py-2 text-sm border rounded focus:ring-2 focus:ring-ring"
           @blur="validateEmails('to')"
         />
       </div>
@@ -58,7 +58,7 @@
           type="text"
           :placeholder="t('replyBox.emailAddresess')"
           v-model="cc"
-          class="flex-grow px-3 py-2 text-sm border rounded-md focus:ring-2 focus:ring-ring"
+          class="flex-grow px-3 py-2 text-sm border rounded focus:ring-2 focus:ring-ring"
           @blur="validateEmails('cc')"
         />
         <Button
@@ -75,7 +75,7 @@
           type="text"
           :placeholder="t('replyBox.emailAddresess')"
           v-model="bcc"
-          class="flex-grow px-3 py-2 text-sm border rounded-md focus:ring-2 focus:ring-ring"
+          class="flex-grow px-3 py-2 text-sm border rounded focus:ring-2 focus:ring-ring"
           @blur="validateEmails('bcc')"
         />
       </div>
diff --git a/frontend/src/features/conversation/list/ConversationEmptyList.vue b/frontend/src/features/conversation/list/ConversationEmptyList.vue
index af8d434..3d33c25 100644
--- a/frontend/src/features/conversation/list/ConversationEmptyList.vue
+++ b/frontend/src/features/conversation/list/ConversationEmptyList.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="flex flex-col items-center justify-center h-64 space-y-2">
     <component :is="icon" :stroke-width="1" :size="50" />
-    <h1 class="text-md font-semibold text-gray-800">
+    <h1 class="text-md font-semibold text-gray-800 dark:text-foreground">
       {{ title }}
     </h1>
-    <p class="text-gray-600 text-center text-sm">
+    <p class="text-gray-600 dark:text-gray-300 text-center text-sm">
       {{ message }}
     </p>
   </div>
diff --git a/frontend/src/features/conversation/list/ConversationList.vue b/frontend/src/features/conversation/list/ConversationList.vue
index f9ce279..79b4c0b 100644
--- a/frontend/src/features/conversation/list/ConversationList.vue
+++ b/frontend/src/features/conversation/list/ConversationList.vue
@@ -2,12 +2,12 @@
   <div class="h-screen flex flex-col">
     <!-- Header -->
     <div class="flex items-center space-x-4 px-2 h-12 border-b shrink-0">
-      <SidebarTrigger class="h-4 w-4" />
-      <span class="text-xl font-semibold text-gray-800">{{ title }}</span>
+      <SidebarTrigger class="cursor-pointer" />
+      <span class="text-xl font-semibold">{{ title }}</span>
     </div>
 
     <!-- Filters -->
-    <div class="bg-white p-2 flex justify-between items-center">
+    <div class="p-2 flex justify-between items-center">
       <!-- Status dropdown-menu, hidden when a view is selected as views are pre-filtered -->
       <DropdownMenu v-if="!route.params.viewID">
         <DropdownMenuTrigger asChild>
@@ -107,7 +107,7 @@
             :conversation="conversation"
             :currentConversation="conversationStore.current"
             :contactFullName="conversationStore.getContactFullName(conversation.uuid)"
-            class="transition-colors duration-200 hover:bg-gray-50"
+            class="transition-colors duration-200 hover:bg-gray-50 dark:hover:bg-gray-600"
           />
         </div>
 
diff --git a/frontend/src/features/conversation/list/ConversationListItem.vue b/frontend/src/features/conversation/list/ConversationListItem.vue
index 1d6bf68..318a3fd 100644
--- a/frontend/src/features/conversation/list/ConversationListItem.vue
+++ b/frontend/src/features/conversation/list/ConversationListItem.vue
@@ -1,8 +1,9 @@
 <template>
   <div
-    class="group relative p-4 transition-all duration-200 ease-in-out cursor-pointer hover:bg-accent/20 border-gray-200 last:border-b-0 hover:shadow-sm"
+    class="group relative p-4 transition-all duration-200 ease-in-out cursor-pointer border-b last:border-b-0 hover:shadow-sm border-gray-200 dark:border-gray-700 hover:bg-accent/20 dark:hover:bg-accent/30"
     :class="{
-      'bg-accent/30 border-l-4': conversation.uuid === currentConversation?.uuid
+      'bg-accent/30 dark:bg-accent border-l-4 border-accent-500 dark:border-accent-400':
+        conversation.uuid === currentConversation?.uuid
     }"
     @click="navigateToConversation(conversation.uuid)"
   >
@@ -23,7 +24,7 @@
       <div class="flex-1 min-w-0 space-y-2">
         <!-- Contact name and last message time -->
         <div class="flex items-center justify-between gap-2">
-          <h3 class="text-sm font-semibold text-gray-900 truncate">
+          <h3 class="text-sm font-semibold truncate">
             {{ contactFullName }}
           </h3>
           <span class="text-xs text-gray-400 whitespace-nowrap" v-if="conversation.last_message_at">
@@ -39,7 +40,7 @@
 
         <!-- Message preview and unread count -->
         <div class="flex items-start justify-between gap-2">
-          <div class="text-sm text-gray-600 flex items-center gap-1.5 flex-1 break-all">
+          <div class="text-sm flex items-center gap-1.5 flex-1 break-all">
             <Reply
               class="text-green-600 flex-shrink-0"
               size="15"
diff --git a/frontend/src/features/conversation/message/AgentMessageBubble.vue b/frontend/src/features/conversation/message/AgentMessageBubble.vue
index 5191fe2..effebbc 100644
--- a/frontend/src/features/conversation/message/AgentMessageBubble.vue
+++ b/frontend/src/features/conversation/message/AgentMessageBubble.vue
@@ -14,10 +14,10 @@
         <div
           class="flex flex-col justify-end message-bubble relative"
           :class="{
-            '!bg-[#FEF1E1]': message.private,
-            'bg-white border border-border': !message.private,
+            'bg-[#FEF1E1] dark:bg-[#4C3A24]': message.private,
+            'border border-border': !message.private,
             'opacity-50 animate-pulse': message.status === 'pending',
-            'bg-red-50 border-red-200': message.status === 'failed'
+            'border-red-200': message.status === 'failed'
           }"
         >
           <!-- Message Envelope -->
diff --git a/frontend/src/features/conversation/message/ContactMessageBubble.vue b/frontend/src/features/conversation/message/ContactMessageBubble.vue
index 463f295..ed3ccf6 100644
--- a/frontend/src/features/conversation/message/ContactMessageBubble.vue
+++ b/frontend/src/features/conversation/message/ContactMessageBubble.vue
@@ -42,7 +42,7 @@
           <div
             v-if="hasQuotedContent"
             @click="toggleQuote"
-            class="text-xs cursor-pointer text-muted-foreground px-2 py-1 w-max hover:bg-muted hover:text-primary rounded-md transition-all"
+            class="text-xs cursor-pointer text-muted-foreground px-2 py-1 w-max hover:bg-muted hover:text-primary rounded transition-all"
           >
             {{
               showQuotedText ? t('conversation.hideQuotedText') : t('conversation.showQuotedText')
diff --git a/frontend/src/features/conversation/message/MessageList.vue b/frontend/src/features/conversation/message/MessageList.vue
index 3baf7d6..4b1e5ac 100644
--- a/frontend/src/features/conversation/message/MessageList.vue
+++ b/frontend/src/features/conversation/message/MessageList.vue
@@ -58,7 +58,7 @@
       <div v-show="!isAtBottom" class="absolute bottom-5 right-6 z-10">
         <button
           @click="handleScrollToBottom"
-          class="w-10 h-10 rounded-full flex items-center justify-center shadow-lg border bg-white text-primary transition-colors duration-200 hover:bg-gray-100"
+          class="w-10 h-10 rounded-full flex items-center justify-center shadow-lg border bg-background text-primary transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-700"
         >
           <ChevronDown size="18" />
         </button>
diff --git a/frontend/src/features/conversation/message/attachment/AttachmentsPreview.vue b/frontend/src/features/conversation/message/attachment/AttachmentsPreview.vue
index 50db0bd..68b1c44 100644
--- a/frontend/src/features/conversation/message/attachment/AttachmentsPreview.vue
+++ b/frontend/src/features/conversation/message/attachment/AttachmentsPreview.vue
@@ -4,16 +4,16 @@
       <div
         v-for="attachment in allAttachments"
         :key="attachment.uuid || attachment.tempId"
-        class="flex items-center bg-white border border-gray-200 rounded shadow-sm transition-all duration-300 ease-in-out hover:shadow-md group px-2 gap-2"
+        class="flex items-center bg-background border border-gray-200 rounded shadow-sm transition-all duration-300 ease-in-out hover:shadow-md group px-2 gap-2"
       >
         <div class="flex items-center space-x-1 py-1">
           <DotLoader v-if="attachment.loading"/>
-          <PaperclipIcon v-else size="16" class="text-gray-500 group-hover:text-primary" />
+          <PaperclipIcon v-else size="16" />
 
           <Tooltip>
             <TooltipTrigger as-child>
               <div
-                class="max-w-[12rem] overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium text-primary group-hover:text-gray-900"
+                class="max-w-[12rem] overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium text-primary group-hover:text-gray-900 dark:group-hover:text-foreground"
               >
                 {{ getAttachmentName(attachment.filename) }}
                 <span class="text-xs text-gray-500 ml-1">
diff --git a/frontend/src/features/conversation/sidebar/ConversationSideBar.vue b/frontend/src/features/conversation/sidebar/ConversationSideBar.vue
index 1e2f606..c73abb8 100644
--- a/frontend/src/features/conversation/sidebar/ConversationSideBar.vue
+++ b/frontend/src/features/conversation/sidebar/ConversationSideBar.vue
@@ -1,9 +1,9 @@
 <template>
-  <div>
+  <div class="text-foreground">
     <ConversationSideBarContact class="p-4" />
     <Accordion type="multiple" collapsible v-model="accordionState">
       <AccordionItem value="actions" class="border-0 mb-2">
-        <AccordionTrigger class="bg-muted px-4 py-3 text-sm font-medium rounded-lg mx-2">
+        <AccordionTrigger class="bg-muted px-4 py-3 text-sm font-medium rounded mx-2">
           {{ $t('conversation.sidebar.action', 2) }}
         </AccordionTrigger>
 
@@ -124,7 +124,7 @@
 
       <!-- Information -->
       <AccordionItem value="information" class="border-0 mb-2">
-        <AccordionTrigger class="bg-muted px-4 py-3 text-sm font-medium rounded-lg mx-2">
+        <AccordionTrigger class="bg-muted px-4 py-3 text-sm font-medium rounded mx-2">
           {{ $t('conversation.sidebar.information') }}
         </AccordionTrigger>
         <AccordionContent class="p-4">
@@ -138,7 +138,7 @@
         class="border-0 mb-2"
         v-if="customAttributeStore.contactAttributeOptions.length > 0"
       >
-        <AccordionTrigger class="bg-muted px-4 py-3 text-sm font-medium rounded-lg mx-2">
+        <AccordionTrigger class="bg-muted px-4 py-3 text-sm font-medium rounded mx-2">
           {{ $t('conversation.sidebar.contactAttributes') }}
         </AccordionTrigger>
         <AccordionContent class="p-4">
@@ -153,7 +153,7 @@
 
       <!-- Previous conversations -->
       <AccordionItem value="previous_conversations" class="border-0 mb-2">
-        <AccordionTrigger class="bg-muted px-4 py-3 text-sm font-medium rounded-lg mx-2">
+        <AccordionTrigger class="bg-muted px-4 py-3 text-sm font-medium rounded mx-2">
           {{ $t('conversation.sidebar.previousConvo') }}
         </AccordionTrigger>
         <AccordionContent class="p-4">
diff --git a/frontend/src/features/conversation/sidebar/ConversationSideBarContact.vue b/frontend/src/features/conversation/sidebar/ConversationSideBarContact.vue
index 78623f6..f0fbd45 100644
--- a/frontend/src/features/conversation/sidebar/ConversationSideBarContact.vue
+++ b/frontend/src/features/conversation/sidebar/ConversationSideBarContact.vue
@@ -7,11 +7,14 @@
           {{ conversation?.contact?.first_name?.toUpperCase().substring(0, 2) }}
         </AvatarFallback>
       </Avatar>
-      <PanelLeft
-        class="cursor-pointer"
+      <Button
+        variant="ghost"
+        size="icon"
+        class="h-7 w-7"
         @click="emitter.emit(EMITTER_EVENTS.CONVERSATION_SIDEBAR_TOGGLE)"
-        size="20"
-      />
+      >
+        <ViewVerticalIcon />
+      </Button>
     </div>
 
     <div class="h-6 flex items-center gap-2">
@@ -51,7 +54,8 @@
 
 <script setup>
 import { computed } from 'vue'
-import { PanelLeft } from 'lucide-vue-next'
+import { ViewVerticalIcon } from '@radix-icons/vue'
+import { Button } from '@/components/ui/button'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Mail, Phone, ExternalLink } from 'lucide-vue-next'
 import { useEmitter } from '@/composables/useEmitter'
diff --git a/frontend/src/features/conversation/sidebar/ConversationSideBarWrapper.vue b/frontend/src/features/conversation/sidebar/ConversationSideBarWrapper.vue
index 39477ea..e0c3562 100644
--- a/frontend/src/features/conversation/sidebar/ConversationSideBarWrapper.vue
+++ b/frontend/src/features/conversation/sidebar/ConversationSideBarWrapper.vue
@@ -14,7 +14,7 @@
         <button
           v-if="!conversationSidebarOpen"
           @click="toggleSidebar"
-          class="absolute right-full top-16 p-2 rounded-l-full bg-white text-primary hover:bg-opacity-90 transition-all duration-200 shadow-lg group"
+          class="absolute right-full top-16 p-2 rounded-l-full bg-background text-primary hover:bg-opacity-90 transition-all duration-200 shadow-lg group dark:border"
         >
           <ChevronLeft size="16" class="group-hover:scale-110 transition-transform" />
         </button>
diff --git a/frontend/src/features/conversation/sidebar/PreviousConversations.vue b/frontend/src/features/conversation/sidebar/PreviousConversations.vue
index bb7c6e6..998f494 100644
--- a/frontend/src/features/conversation/sidebar/PreviousConversations.vue
+++ b/frontend/src/features/conversation/sidebar/PreviousConversations.vue
@@ -19,7 +19,7 @@
           type: 'assigned'
         }
       }"
-      class="block p-2 rounded-md hover:bg-muted"
+      class="block p-2 rounded hover:bg-muted"
     >
       <div class="flex items-center justify-between">
         <div class="flex flex-col">
diff --git a/frontend/src/features/reports/DashboardCard.vue b/frontend/src/features/reports/DashboardCard.vue
index 93db58d..a409063 100644
--- a/frontend/src/features/reports/DashboardCard.vue
+++ b/frontend/src/features/reports/DashboardCard.vue
@@ -1,11 +1,7 @@
 <template>
-  <div class="flex flex-1 flex-col gap-x-5 box p-5 space-y-5 bg-white">
+  <div class="flex flex-1 flex-col gap-x-5 box p-5 space-y-5">
     <div class="flex items-center space-x-2">
       <p class="text-2xl flex items-center">{{ title }}</p>
-      <div class="bg-green-100/70 flex items-center space-x-2 px-1 rounded">
-        <span class="blinking-dot"></span>
-        <p class="uppercase text-xs">{{ $t('globals.terms.live') }}</p>
-      </div>
     </div>
     <div class="flex justify-between pr-32">
       <div
diff --git a/frontend/src/features/search/SearchHeader.vue b/frontend/src/features/search/SearchHeader.vue
index 504e76c..b8b4d11 100644
--- a/frontend/src/features/search/SearchHeader.vue
+++ b/frontend/src/features/search/SearchHeader.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="flex items-center space-x-4 px-2 h-12">
-      <SidebarTrigger class="cursor-pointer w-4 h-4 text-black" />
+      <SidebarTrigger class="cursor-pointer" />
       <div class="flex-1 flex items-center">
         <Search class="w-5 h-5" />
         <Separator orientation="vertical" />
diff --git a/frontend/src/features/search/SearchResults.vue b/frontend/src/features/search/SearchResults.vue
index cfc1192..fea2bb7 100644
--- a/frontend/src/features/search/SearchResults.vue
+++ b/frontend/src/features/search/SearchResults.vue
@@ -1,26 +1,33 @@
 <template>
-  <div class="max-w-5xl mx-auto p-6 bg-background min-h-screen">
+  <div class="max-w-5xl mx-auto p-6 min-h-screen">
     <div class="space-y-8">
       <div
         v-for="(items, type) in results"
         :key="type"
-        class="bg-card rounded-lg shadow-md overflow-hidden"
+        class="bg-card rounded shadow overflow-hidden"
       >
-        <h2 class="bg-primary text-lg font-bold text-secondary py-2 px-6 capitalize">
+        <!-- Header for each section -->
+        <h2
+          class="bg-primary dark:bg-primary text-lg font-bold text-white dark:text-primary-foreground py-2 px-6 capitalize"
+        >
           {{ type }}
         </h2>
 
-        <div v-if="items.length === 0" class="p-6 text-muted-foreground">
-          {{ $t('globals.messages.noResults', {
-            name: type
-          }) }}
+        <!-- No results message -->
+        <div v-if="items.length === 0" class="p-6 text-gray-500 dark:text-muted-foreground">
+          {{
+            $t('globals.messages.noResults', {
+              name: type
+            })
+          }}
         </div>
 
-        <div class="divide-y divide-border">
+        <!-- Results list -->
+        <div class="divide-y divide-gray-200 dark:divide-border">
           <div
             v-for="item in items"
             :key="item.id || item.uuid"
-            class="p-6 hover:bg-accent transition duration-300 ease-in-out group"
+            class="p-6 hover:bg-gray-100 dark:hover:bg-accent transition duration-300 ease-in-out group"
           >
             <router-link
               :to="{
@@ -34,8 +41,9 @@
             >
               <div class="flex justify-between items-start">
                 <div class="flex-grow">
+                  <!-- Reference number -->
                   <div
-                    class="text-sm font-semibold text-primary mb-2 group-hover:text-primary transition duration-300"
+                    class="text-sm font-semibold mb-2 group-hover:text-primary dark:group-hover:text-primary transition duration-300"
                   >
                     #{{
                       type === 'conversations'
@@ -43,14 +51,18 @@
                         : item.conversation_reference_number
                     }}
                   </div>
+
+                  <!-- Content -->
                   <div
-                    class="text-card-foreground font-medium mb-2 text-lg group-hover:text-foreground transition duration-300"
+                    class="text-gray-900 dark:text-card-foreground font-medium mb-2 text-lg group-hover:text-gray-950 dark:group-hover:text-foreground transition duration-300"
                   >
                     {{
                       truncateText(type === 'conversations' ? item.subject : item.text_content, 100)
                     }}
                   </div>
-                  <div class="text-sm text-muted-foreground flex items-center">
+
+                  <!-- Timestamp -->
+                  <div class="text-sm text-gray-500 dark:text-muted-foreground flex items-center">
                     <ClockIcon class="h-4 w-4 mr-1" />
                     {{
                       formatDate(
@@ -59,11 +71,13 @@
                     }}
                   </div>
                 </div>
+
+                <!-- Right arrow icon -->
                 <div
-                  class="bg-secondary rounded-full p-2 group-hover:bg-primary transition duration-300"
+                  class="bg-gray-200 dark:bg-secondary rounded-full p-2 group-hover:bg-primary dark:group-hover:bg-primary transition duration-300"
                 >
                   <ChevronRightIcon
-                    class="h-5 w-5 text-secondary-foreground group-hover:text-primary-foreground"
+                    class="h-5 w-5 text-gray-700 dark:text-secondary-foreground group-hover:text-white dark:group-hover:text-primary-foreground"
                     aria-hidden="true"
                   />
                 </div>
@@ -75,7 +89,6 @@
     </div>
   </div>
 </template>
-
 <script setup>
 import { ChevronRightIcon, ClockIcon } from 'lucide-vue-next'
 import { format, parseISO } from 'date-fns'
diff --git a/frontend/src/features/sla/SlaBadge.vue b/frontend/src/features/sla/SlaBadge.vue
index de396a2..b8758d0 100644
--- a/frontend/src/features/sla/SlaBadge.vue
+++ b/frontend/src/features/sla/SlaBadge.vue
@@ -1,9 +1,9 @@
 <template>
   <div v-if="dueAt" class="flex justify-start items-center space-x-2">
     <!-- Overdue-->
-    <span v-if="sla?.status === 'overdue'" key="overdue" class="sla-badge box sla-overdue">
-      <AlertCircle size="12" class="text-red-800" />
-      <span class="sla-text text-red-800">
+    <span v-if="sla?.status === 'overdue'" key="overdue" class="sla-badge sla-overdue">
+      <AlertCircle size="14" class="shrink-0 text-red-600 dark:text-red-300" stroke-width="2" />
+      <span class="sla-text">
         <span v-if="!showExtra">{{ label }} {{ $t('sla.overdue') }}</span>
         <span v-else>{{ label }} {{ $t('sla.overdueBy') }} {{ sla.value }} </span>
       </span>
@@ -13,9 +13,9 @@
     <span
       v-else-if="sla?.status === 'hit' && showExtra"
       key="sla-hit"
-      class="sla-badge box sla-hit"
+      class="sla-badge sla-hit"
     >
-      <CheckCircle size="12" />
+      <CheckCircle size="14" class="shrink-0 text-green-600 dark:text-green-300" stroke-width="2" />
       <span class="sla-text">{{ label }} {{ $t('sla.met') }}</span>
     </span>
 
@@ -23,9 +23,9 @@
     <span
       v-else-if="sla?.status === 'remaining'"
       key="remaining"
-      class="sla-badge box sla-remaining"
+      class="sla-badge sla-remaining"
     >
-      <Clock size="12" />
+      <Clock size="14" class="shrink-0 text-amber-600 dark:text-amber-300" stroke-width="2" />
       <span class="sla-text">{{ label }} {{ sla.value }}</span>
     </span>
   </div>
@@ -60,22 +60,27 @@ watch(
 
 <style scoped>
 .sla-badge {
-  @apply inline-flex items-center justify-center p-1 text-xs space-x-1 w-full rounded-lg;
+  @apply inline-flex items-center px-2 py-1 rounded-md border transition-all
+         text-xs font-medium tracking-tight space-x-1.5
+         hover:scale-[98%] hover:shadow-sm;
 }
 
 .sla-overdue {
-  @apply bg-red-100 text-red-800;
+  @apply bg-red-50/80 border-red-100 text-red-600 
+         dark:bg-red-900/40 dark:border-red-800/20 dark:text-red-300;
 }
 
 .sla-hit {
-  @apply bg-green-100 text-green-800;
+  @apply bg-green-50/80 border-green-100 text-green-600
+         dark:bg-green-900/40 dark:border-green-800/20 dark:text-green-300;
 }
 
 .sla-remaining {
-  @apply bg-yellow-100 text-yellow-800;
+  @apply bg-amber-50/80 border-amber-100 text-amber-600
+         dark:bg-amber-900/40 dark:border-amber-800/20 dark:text-amber-300;
 }
 
 .sla-text {
-  @apply text-[0.65rem];
+  @apply whitespace-nowrap;
 }
 </style>
diff --git a/frontend/src/layouts/admin/AdminPageWithHelp.vue b/frontend/src/layouts/admin/AdminPageWithHelp.vue
index 783f646..c08c8af 100644
--- a/frontend/src/layouts/admin/AdminPageWithHelp.vue
+++ b/frontend/src/layouts/admin/AdminPageWithHelp.vue
@@ -3,7 +3,7 @@
     <div class="w-8/12">
       <slot name="content" />
     </div>
-    <div class="rounded-lg w-3/12 p-2 space-y-2 self-start">
+    <div class="rounded w-3/12 p-2 space-y-2 self-start">
       <slot name="help" />
     </div>
   </div>
diff --git a/frontend/src/views/admin/automations/CreateOrEditRule.vue b/frontend/src/views/admin/automations/CreateOrEditRule.vue
index cf1012a..11f2adc 100644
--- a/frontend/src/views/admin/automations/CreateOrEditRule.vue
+++ b/frontend/src/views/admin/automations/CreateOrEditRule.vue
@@ -122,13 +122,21 @@
           <div class="flex justify-center">
             <div class="flex items-center space-x-2">
               <Button
-                :class="[groupOperator === 'AND' ? 'bg-black' : 'bg-gray-100 text-black']"
+                :class="[
+                  groupOperator === 'AND'
+                    ? 'bg-black text-white dark:bg-white dark:text-black'
+                    : 'bg-gray-100 text-black dark:bg-secondary dark:text-white'
+                ]"
                 @click.prevent="toggleGroupOperator('AND')"
               >
                 {{ $t('admin.automation.and') }}
               </Button>
               <Button
-                :class="[groupOperator === 'OR' ? 'bg-black' : 'bg-gray-100 text-black']"
+                :class="[
+                  groupOperator === 'OR'
+                    ? 'bg-black text-white dark:bg-white dark:text-black'
+                    : 'bg-gray-100 text-black dark:bg-secondary dark:text-white'
+                ]"
                 @click.prevent="toggleGroupOperator('OR')"
               >
                 {{ $t('admin.automation.or') }}
diff --git a/frontend/src/views/auth/ResetPasswordView.vue b/frontend/src/views/auth/ResetPasswordView.vue
index b97ea5c..2351f50 100644
--- a/frontend/src/views/auth/ResetPasswordView.vue
+++ b/frontend/src/views/auth/ResetPasswordView.vue
@@ -20,12 +20,12 @@
               :placeholder="t('auth.enterEmail')"
               v-model.trim="resetForm.email"
               :class="{ 'border-destructive': emailHasError }"
-              class="w-full bg-card border-border text-foreground placeholder:text-muted-foreground rounded-lg py-2 px-3 focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-200 ease-in-out"
+              class="w-full bg-card border-border text-foreground placeholder:text-muted-foreground rounded py-2 px-3 focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-200 ease-in-out"
             />
           </div>
 
           <Button
-            class="w-full bg-primary hover:bg-primary/90 text-primary-foreground rounded-lg py-2 transition-all duration-200 ease-in-out transform hover:scale-105"
+            class="w-full bg-primary hover:bg-primary/90 text-primary-foreground rounded py-2 transition-all duration-200 ease-in-out transform hover:scale-105"
             :disabled="isLoading"
             type="submit"
           >
@@ -60,7 +60,7 @@
           v-if="errorMessage"
           :errorMessage="errorMessage"
           :border="true"
-          class="w-full bg-destructive/10 text-destructive border-destructive/20 p-3 rounded-lg text-sm"
+          class="w-full bg-destructive/10 text-destructive border-destructive/20 p-3 rounded text-sm"
         />
 
         <div class="text-center">
diff --git a/frontend/src/views/auth/SetPasswordView.vue b/frontend/src/views/auth/SetPasswordView.vue
index 15c477e..6f190e1 100644
--- a/frontend/src/views/auth/SetPasswordView.vue
+++ b/frontend/src/views/auth/SetPasswordView.vue
@@ -25,7 +25,7 @@
               :placeholder="t('auth.enterNewPassword')"
               v-model="passwordForm.password"
               :class="{ 'border-destructive': passwordHasError }"
-              class="w-full bg-card border-border text-foreground placeholder:text-muted-foreground rounded-lg py-2 px-3 focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-200 ease-in-out"
+              class="w-full bg-card border-border text-foreground placeholder:text-muted-foreground rounded py-2 px-3 focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-200 ease-in-out"
             />
           </div>
 
@@ -40,12 +40,12 @@
               :placeholder="t('auth.confirmNewPassword')"
               v-model="passwordForm.confirmPassword"
               :class="{ 'border-destructive': confirmPasswordHasError }"
-              class="w-full bg-card border-border text-foreground placeholder:text-muted-foreground rounded-lg py-2 px-3 focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-200 ease-in-out"
+              class="w-full bg-card border-border text-foreground placeholder:text-muted-foreground rounded py-2 px-3 focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-200 ease-in-out"
             />
           </div>
 
           <Button
-            class="w-full bg-primary hover:bg-primary/90 text-primary-foreground rounded-lg py-2 transition-all duration-200 ease-in-out transform hover:scale-105"
+            class="w-full bg-primary hover:bg-primary/90 text-primary-foreground rounded py-2 transition-all duration-200 ease-in-out transform hover:scale-105"
             :disabled="isLoading"
             type="submit"
           >
@@ -80,7 +80,7 @@
           v-if="errorMessage"
           :errorMessage="errorMessage"
           :border="true"
-          class="w-full bg-destructive/10 text-destructive border-destructive/20 p-3 rounded-lg text-sm"
+          class="w-full bg-destructive/10 text-destructive border-destructive/20 p-3 rounded text-sm"
         />
       </CardContent>
     </Card>
diff --git a/frontend/src/views/auth/UserLoginView.vue b/frontend/src/views/auth/UserLoginView.vue
index 1cad087..3787232 100644
--- a/frontend/src/views/auth/UserLoginView.vue
+++ b/frontend/src/views/auth/UserLoginView.vue
@@ -21,7 +21,7 @@
             variant="outline"
             type="button"
             @click="redirectToOIDC(oidcProvider)"
-            class="w-full bg-card hover:bg-secondary text-foreground border-border rounded-lg py-2 transition-all duration-200 ease-in-out transform hover:scale-105"
+            class="w-full bg-card hover:bg-secondary text-foreground border-border rounded py-2 transition-all duration-200 ease-in-out transform hover:scale-105"
           >
             <img
               :src="oidcProvider.logo_url"
@@ -55,7 +55,7 @@
               :placeholder="t('auth.enterEmail')"
               v-model.trim="loginForm.email"
               :class="{ 'border-destructive': emailHasError }"
-              class="w-full bg-card border-border text-foreground placeholder:text-muted-foreground rounded-lg py-2 px-3 focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-200 ease-in-out"
+              class="w-full bg-card border-border text-foreground placeholder:text-muted-foreground rounded py-2 px-3 focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-200 ease-in-out"
             />
           </div>
 
@@ -70,7 +70,7 @@
               :placeholder="t('auth.enterPassword')"
               v-model="loginForm.password"
               :class="{ 'border-destructive': passwordHasError }"
-              class="w-full bg-card border-border text-foreground placeholder:text-muted-foreground rounded-lg py-2 px-3 focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-200 ease-in-out"
+              class="w-full bg-card border-border text-foreground placeholder:text-muted-foreground rounded py-2 px-3 focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-200 ease-in-out"
             />
           </div>
 
@@ -84,7 +84,7 @@
           </div>
 
           <Button
-            class="w-full bg-primary hover:bg-primary/90 text-primary-foreground rounded-lg py-2 transition-all duration-200 ease-in-out transform hover:scale-105"
+            class="w-full bg-primary hover:bg-primary/90 text-primary-foreground rounded py-2 transition-all duration-200 ease-in-out transform hover:scale-105"
             :disabled="isLoading"
             type="submit"
           >
@@ -119,7 +119,7 @@
           v-if="errorMessage"
           :errorMessage="errorMessage"
           :border="true"
-          class="w-full bg-destructive/10 text-destructive border-destructive/20 p-3 rounded-lg text-sm"
+          class="w-full bg-destructive/10 text-destructive border-destructive/20 p-3 rounded text-sm"
         />
       </CardContent>
     </Card>
diff --git a/frontend/src/views/contact/ContactDetailView.vue b/frontend/src/views/contact/ContactDetailView.vue
index 88f4eee..a2b5ccd 100644
--- a/frontend/src/views/contact/ContactDetailView.vue
+++ b/frontend/src/views/contact/ContactDetailView.vue
@@ -17,7 +17,7 @@
             />
 
             <div>
-              <h2 class="text-2xl font-bold text-gray-900">
+              <h2 class="text-2xl font-bold text-gray-900 dark:text-foreground">
                 {{ contact.first_name }} {{ contact.last_name }}
               </h2>
             </div>
diff --git a/frontend/src/views/reports/DashboardView.vue b/frontend/src/views/reports/DashboardView.vue
index 58b96ec..225bb46 100644
--- a/frontend/src/views/reports/DashboardView.vue
+++ b/frontend/src/views/reports/DashboardView.vue
@@ -18,10 +18,10 @@
             :labels="agentStatusLabels"
           />
         </div>
-        <div class="rounded-lg box w-full p-5 bg-white">
+        <div class="rounded box w-full p-5">
           <LineChart :data="chartData.processedData" />
         </div>
-        <div class="rounded-lg box w-full p-5 bg-white">
+        <div class="rounded box w-full p-5">
           <BarChart :data="chartData.status_summary" />
         </div>
       </div>
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 422a1bd..51ab13b 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -4,7 +4,7 @@ const typography = require("@tailwindcss/typography")
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   mode: 'jit',
-  darkMode: ["class"],
+  darkMode: "class",
   safelist: ["dark"],
   prefix: "",
 
@@ -18,81 +18,114 @@ module.exports = {
   theme: {
     container: {
       center: true,
-      padding: "2rem",
+      padding: '2rem',
       screens: {
-        "2xl": "1400px",
-      },
+        '2xl': '1400px'
+      }
     },
     extend: {
       height: {
-        screen: '100dvh',
+        screen: '100dvh'
       },
       minHeight: {
-        screen: '100dvh',
-      },
-      fontFamily: {
-        jakarta: ['Plus Jakarta Sans', 'Helvetica Neue', 'sans-serif'],
-        inter: ['Inter', 'Helvetica Neue', 'sans-serif'],
-        poppins: ['Poppins', 'Helvetica Neue', 'sans-serif'],
+        screen: '100dvh'
       },
       colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        sidebar: "white",
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        sidebar: {
+          DEFAULT: 'hsl(var(--sidebar-background))',
+          foreground: 'hsl(var(--sidebar-foreground))',
+          primary: 'hsl(var(--sidebar-primary))',
+          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+          accent: 'hsl(var(--sidebar-accent))',
+          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+          border: 'hsl(var(--sidebar-border))',
+          ring: 'hsl(var(--sidebar-ring))'
+        },
         primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))'
         },
         secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))'
         },
         destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))'
         },
         muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))'
         },
         accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))'
         },
         popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))'
         },
         card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))'
+        }
       },
       borderRadius: {
-        xl: "calc(var(--radius) + 4px)",
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
+        xl: 'calc(var(--radius) + 4px)',
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)'
       },
       keyframes: {
-        "accordion-down": {
-          from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
+        'accordion-down': {
+          from: {
+            height: 0
+          },
+          to: {
+            height: 'var(--radix-accordion-content-height)'
+          }
         },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: 0 },
+        shake: {
+          '0%': { transform: 'translateX(0)' },
+          '15%': { transform: 'translateX(-5px)' },
+          '25%': { transform: 'translateX(5px)' },
+          '35%': { transform: 'translateX(-5px)' },
+          '45%': { transform: 'translateX(5px)' },
+          '55%': { transform: 'translateX(-5px)' },
+          '65%': { transform: 'translateX(5px)' },
+          '75%': { transform: 'translateX(-5px)' },
+          '85%': { transform: 'translateX(5px)' },
+          '95%': { transform: 'translateX(-5px)' },
+          '100%': { transform: 'translateX(0)' },
         },
-        "collapsible-down": {
-          from: { height: 0 },
-          to: { height: 'var(--radix-collapsible-content-height)' },
+        'accordion-up': {
+          from: {
+            height: 'var(--radix-accordion-content-height)'
+          },
+          to: {
+            height: 0
+          }
         },
-        "collapsible-up": {
-          from: { height: 'var(--radix-collapsible-content-height)' },
-          to: { height: 0 },
+        'collapsible-down': {
+          from: {
+            height: 0
+          },
+          to: {
+            height: 'var(--radix-collapsible-content-height)'
+          }
+        },
+        'collapsible-up': {
+          from: {
+            height: 'var(--radix-collapsible-content-height)'
+          },
+          to: {
+            height: 0
+          }
         },
         'fade-in-down': {
           '0%': {
@@ -102,33 +135,59 @@ module.exports = {
           '100%': {
             opacity: '1',
             transform: 'translateY(0)'
-          },
+          }
         },
         'bounce-in': {
-          '0%': { transform: 'scale(0)' },
-          '50%': { transform: 'scale(1.2)' },
-          '100%': { transform: 'scale(1)' },
+          '0%': {
+            transform: 'scale(0)'
+          },
+          '50%': {
+            transform: 'scale(1.2)'
+          },
+          '100%': {
+            transform: 'scale(1)'
+          }
         },
         'fade-in': {
-          '0%': { opacity: '0' },
-          '100%': { opacity: '1' },
+          '0%': {
+            opacity: '0'
+          },
+          '100%': {
+            opacity: '1'
+          }
         },
         'fade-out': {
-          '0%': { opacity: '1' },
-          '100%': { opacity: '0' },
+          '0%': {
+            opacity: '1'
+          },
+          '100%': {
+            opacity: '0'
+          }
         },
         'slide-in': {
-          '0%': { transform: 'translateY(10px)', opacity: '0' },
-          '100%': { transform: 'translateY(0)', opacity: '1' }
+          '0%': {
+            transform: 'translateY(10px)',
+            opacity: '0'
+          },
+          '100%': {
+            transform: 'translateY(0)',
+            opacity: '1'
+          }
         },
         'slide-out': {
-          '0%': { transform: 'translateY(0)', opacity: '1' },
-          '100%': { transform: 'translateY(10px)', opacity: '0' }
-        },
+          '0%': {
+            transform: 'translateY(0)',
+            opacity: '1'
+          },
+          '100%': {
+            transform: 'translateY(10px)',
+            opacity: '0'
+          }
+        }
       },
       animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
         'collapsible-down': 'collapsible-down 0.2s ease-in-out',
         'collapsible-up': 'collapsible-up 0.2s ease-in-out',
         'fade-in-down': 'fade-in-down 0.3s ease-out',
@@ -137,9 +196,10 @@ module.exports = {
         'fade-in': 'fade-in 0.3s ease-out',
         'fade-out': 'fade-out 0.3s ease-in',
         'slide-in': 'slide-in 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-        'slide-out': 'slide-out 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
-      },
-    },
+        'slide-out': 'slide-out 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+        'shake': 'shake 0.5s infinite',
+      }
+    }
   },
   plugins: [animate, typography],
 }
diff --git a/i18n/en.json b/i18n/en.json
index 0adc685..0a5c3a8 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -259,6 +259,7 @@
   "navigation.allContacts": "All Contacts",
   "navigation.customAttributes": "Custom Attributes",
   "navigation.activityLog": "Activity Log",
+  "navigation.darkMode": "Dark Mode",
   "form.field.name": "Name",
   "form.field.regex": "Regex",
   "form.field.regexHint": "Regex hint",