diff --git a/frontend/src/components/layout/NavBar.vue b/frontend/src/components/layout/NavBar.vue
index 9e49d1b9..d0047d4a 100644
--- a/frontend/src/components/layout/NavBar.vue
+++ b/frontend/src/components/layout/NavBar.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import {
   PlayingCardsFan,
   Search,
-  Heart,
   MessageCircle,
   Settings,
+  LogOut,
 } from '@lucide/vue'
+import { useAuth } from '@/composable/useAuth'
 
 interface NavItem {
   label: string
@@ -30,6 +30,10 @@ const isActive = (path: string) => {
 }
 
 const goTo = (path: string) => router.push(path)
+
+const logout = () => {
+  useAuth().disconnect()
+}
 </script>
 
 <template>
@@ -37,21 +41,31 @@ const goTo = (path: string) => router.push(path)
   <nav
     class="hidden md:flex md:flex-col md:justify-between md:items-center lg:items-stretch md:w-20 lg:w-64 md:h-screen md:sticky md:top-0 border-r bg-background"
   >
-    <div class="flex flex-col gap-2 p-3 mt-4">
+    <div class="h-full flex flex-col justify-between p-3">
+      <div class="flex flex-col gap-2 mt-4">
+        <button
+          v-for="item in navItems"
+          :key="item.path"
+          @click="goTo(item.path)"
+          :class="[
+            'flex items-center gap-3 rounded-xl px-3 py-2.5 transition-colors',
+            'hover:bg-muted',
+            isActive(item.path)
+              ? 'bg-primary/10 text-primary font-medium'
+              : 'text-muted-foreground',
+          ]"
+        >
+          <component :is="item.icon" class="h-6 w-6 shrink-0 md:items-center" />
+          <span class="hidden lg:inline text-sm">{{ item.label }}</span>
+        </button>
+      </div>
+
       <button
-        v-for="item in navItems"
-        :key="item.path"
-        @click="goTo(item.path)"
-        :class="[
-          'flex items-center gap-3 rounded-xl px-3 py-2.5 transition-colors',
-          'hover:bg-muted',
-          isActive(item.path)
-            ? 'bg-primary/10 text-primary font-medium'
-            : 'text-muted-foreground',
-        ]"
+        class="flex items-center gap-3 rounded-xl px-3 py-2.5 transition-colors hover:bg-muted text-destructive"
+        @click="() => logout()"
       >
-        <component :is="item.icon" class="h-6 w-6 shrink-0 md:items-center" />
-        <span class="hidden lg:inline text-sm">{{ item.label }}</span>
+        <LogOut class="h-6 w-6 shrink-0 md:items-center" />
+        <span class="hidden lg:inline text-sm">Logout</span>
       </button>
     </div>
   </nav>
@@ -77,6 +91,13 @@ const goTo = (path: string) => router.push(path)
         />
         <span class="leading-none">{{ item.label }}</span>
       </button>
+      <button
+        @click="() => logout()"
+        class="flex flex-col items-center justify-center gap-1 flex-1 h-full text-xs transition-colors text-muted-foreground"
+      >
+        <LogOut class="h-6 w-6" />
+        <span class="leading-none">Logout</span>
+      </button>
     </div>
   </nav>
 </template>
diff --git a/frontend/src/composable/useAuth.ts b/frontend/src/composable/useAuth.ts
index c1645ee5..c606c437 100644
--- a/frontend/src/composable/useAuth.ts
+++ b/frontend/src/composable/useAuth.ts
@@ -1,6 +1,6 @@
 import { ref } from 'vue'
 import { authApi, type LoginResponse, type RegisterCredentials } from '@/api/auth'
-import { getSocket } from '@/plugins/socket'
+import { disconnectSocket, getSocket } from '@/plugins/socket'
 import router from '@/router'
 import { useAuthStore } from '@/store/useAuthStore'
 
@@ -99,12 +99,12 @@ export function useAuth() {
 
     useAuthStore().clearSession()
 
-    getSocket().close()
+    disconnectSocket()
   }
 
-  const disconnect = (): void => {
+  const disconnect = async (): Promise<void> => {
     logout()
-    router.push({ name: 'home' }).then(r => {})
+    await router.push({ name: 'auth' })
   }
 
   const forgotPassword = async (email: string): Promise<boolean> => {