diff --git a/resources/js/views/dashboard/DashboardLayout.vue b/resources/js/views/dashboard/DashboardLayout.vue
index 2ca57a1..4947858 100644
--- a/resources/js/views/dashboard/DashboardLayout.vue
+++ b/resources/js/views/dashboard/DashboardLayout.vue
@@ -15,42 +15,50 @@
                     </RouterLink>
 
                     <!-- User dropdown -->
-                    <div x-data="{ open: false }" class="relative">
+                    <div ref="dropdownRef" class="relative">
                         <button
-                            @click="open = !open"
+                            @click="dropdownOpen = !dropdownOpen"
                             class="w-9 h-9 rounded-full bg-[#bb5b3e] flex items-center justify-center text-white text-sm font-black hover:bg-[#a34a31] transition-colors"
+                            :aria-expanded="dropdownOpen"
+                            aria-haspopup="true"
                         >
                             {{ userInitials }}
                         </button>
-                        <div
-                            x-show="open"
-                            @click.away="open = false"
-                            x-transition
-                            class="absolute right-0 top-full mt-2 w-64 bg-white border border-[#e5ded7] rounded-2xl shadow-lg overflow-hidden z-50"
-                            style="display: none"
+                        <Transition
+                            enter-active-class="transition ease-out duration-100"
+                            enter-from-class="transform opacity-0 scale-95"
+                            enter-to-class="transform opacity-100 scale-100"
+                            leave-active-class="transition ease-in duration-75"
+                            leave-from-class="transform opacity-100 scale-100"
+                            leave-to-class="transform opacity-0 scale-95"
                         >
-                            <div class="px-4 py-3 border-b border-[#e5ded7]">
-                                <p class="text-sm font-black text-[#4a3f3b]">{{ user?.name }}</p>
-                                <p class="text-xs text-[#89726c] truncate">{{ user?.email }}</p>
+                            <div
+                                v-show="dropdownOpen"
+                                class="absolute right-0 top-full mt-2 w-64 bg-white border border-[#e5ded7] rounded-2xl shadow-lg overflow-hidden z-50"
+                            >
+                                <div class="px-4 py-3 border-b border-[#e5ded7]">
+                                    <p class="text-sm font-black text-[#4a3f3b]">{{ user?.name }}</p>
+                                    <p class="text-xs text-[#89726c] truncate">{{ user?.email }}</p>
+                                </div>
+                                <div class="py-1">
+                                    <RouterLink
+                                        to="/dashboard/settings"
+                                        @click="dropdownOpen = false"
+                                        class="flex items-center gap-3 px-4 py-2.5 text-sm font-bold text-[#89726c] hover:bg-[#faf6f3] hover:text-[#4a3f3b] transition-colors"
+                                    >
+                                        <iconify-icon icon="lucide:settings"></iconify-icon>
+                                        Settings
+                                    </RouterLink>
+                                    <button
+                                        @click="handleLogout"
+                                        class="w-full flex items-center gap-3 px-4 py-2.5 text-sm font-bold text-[#89726c] hover:bg-[#faf6f3] hover:text-[#4a3f3b] transition-colors"
+                                    >
+                                        <iconify-icon icon="lucide:log-out"></iconify-icon>
+                                        Log out
+                                    </button>
+                                </div>
                             </div>
-                            <div class="py-1">
-                                <RouterLink
-                                    to="/dashboard/settings"
-                                    @click="open = false"
-                                    class="flex items-center gap-3 px-4 py-2.5 text-sm font-bold text-[#89726c] hover:bg-[#faf6f3] hover:text-[#4a3f3b] transition-colors"
-                                >
-                                    <iconify-icon icon="lucide:settings"></iconify-icon>
-                                    Settings
-                                </RouterLink>
-                                <button
-                                    @click="handleLogout"
-                                    class="w-full flex items-center gap-3 px-4 py-2.5 text-sm font-bold text-[#89726c] hover:bg-[#faf6f3] hover:text-[#4a3f3b] transition-colors"
-                                >
-                                    <iconify-icon icon="lucide:log-out"></iconify-icon>
-                                    Log out
-                                </button>
-                            </div>
-                        </div>
+                        </Transition>
                     </div>
                 </div>
             </div>
@@ -84,7 +92,7 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { RouterLink, RouterView, useRoute, useRouter } from 'vue-router'
 import { useAuth } from '../../composables/useAuth.js'
 
@@ -92,6 +100,23 @@ const { user, logout } = useAuth()
 const $route = useRoute()
 const router = useRouter()
 
+const dropdownOpen = ref(false)
+const dropdownRef = ref(null)
+
+function handleClickOutside(event) {
+    if (dropdownRef.value && !dropdownRef.value.contains(event.target)) {
+        dropdownOpen.value = false
+    }
+}
+
+onMounted(() => {
+    document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+    document.removeEventListener('click', handleClickOutside)
+})
+
 const userInitials = computed(() => {
     if (!user.value?.name) {
         return '?'
@@ -105,6 +130,7 @@ const userInitials = computed(() => {
 })
 
 async function handleLogout() {
+    dropdownOpen.value = false
     await logout()
     router.push('/')
 }