diff --git a/src/components/haex/pass/mobile/menu/index.vue b/src/components/haex/pass/mobile/menu/index.vue
index 34ff3a3..8b84318 100644
--- a/src/components/haex/pass/mobile/menu/index.vue
+++ b/src/components/haex/pass/mobile/menu/index.vue
@@ -5,9 +5,9 @@
   >
     <li
       v-for="(group, index) in groupItems.groups"
-      class="bg-base-100 rounded-lg hover:bg-base-100/45 origin-to intersect:motion-preset-slide-down intersect:motion-ease-spring-bouncier intersect:motion-delay ease-in-out shadow"
+      class="bg-base-100 rounded-lg hover:bg-base-content/20 origin-to intersect:motion-preset-slide-down intersect:motion-ease-spring-bouncier intersect:motion-delay ease-in-out shadow"
       :class="{
-        'bg-base-300/15 outline outline-accent hover:bg-base-300/15':
+        'bg-base-content/20 outline outline-accent hover:bg-base-content/20':
           selectedItems.has(group.id),
       }"
       :style="{ '--motion-delay': `${50 * index}ms` }"
diff --git a/src/components/haex/sidebar/link.vue b/src/components/haex/sidebar/link.vue
index a995517..3963c70 100644
--- a/src/components/haex/sidebar/link.vue
+++ b/src/components/haex/sidebar/link.vue
@@ -2,7 +2,7 @@
   <li
     class="rounded"
     :class="{
-      ['bg-base-300/35 ']: isActive,
+      ['bg-base-content/20 ']: isActive,
     }"
     @click="triggerNavigate"
   >
diff --git a/src/layouts/app.vue b/src/layouts/app.vue
index 60a2d04..cca2e23 100644
--- a/src/layouts/app.vue
+++ b/src/layouts/app.vue
@@ -37,7 +37,7 @@
 
       <div class="navbar-end flex items-center gap-4 me-4">
         <div
-          class="dropdown relative inline-flex [--auto-close:inside] [--offset:20] [--placement:bottom-end]"
+          class="dropdown relative inline-flex [--auto-close:inside] [--offset:18] [--placement:bottom]"
         >
           <UiTooltip :tooltip="t('notifications.label')">
             <button
@@ -60,7 +60,7 @@
             </button>
           </UiTooltip>
           <div
-            class="dropdown-menu dropdown-open:opacity-100 hidden"
+            class="dropdown-menu dropdown-open:opacity-100 hidden w-full max-w-96 shadow"
             role="menu"
             aria-orientation="vertical"
             aria-labelledby="dropdown-scrollable"
@@ -71,7 +71,7 @@
               </h6>
             </div>
             <div
-              class="vertical-scrollbar horizontal-scrollbar rounded-scrollbar text-base-content/80 max-h-56 overflow-auto max-w-full"
+              class="vertical-scrollbar horizontal-scrollbar rounded-scrollbar text-base-content/80 max-h-56 overflow-auto"
             >
               <div
                 v-for="notification in notifications"
@@ -103,7 +103,7 @@
             </div>
             <NuxtLinkLocale
               :to="{ name: 'notifications' }"
-              class="dropdown-footer justify-center gap-1"
+              class="dropdown-footer justify-center gap-1 hover:bg-base-content/10"
             >
               <span class="icon-[tabler--eye] size-4" />
               {{ t('notifications.view_all') }}