diff --git a/components/layout/full/vertical-header/ProfileDD.vue b/components/layout/full/vertical-header/ProfileDD.vue
index ca2a13c..8a02271 100644
--- a/components/layout/full/vertical-header/ProfileDD.vue
+++ b/components/layout/full/vertical-header/ProfileDD.vue
@@ -99,7 +99,20 @@ const sessionInfo = computed(() => ({
           :loading="auth.isLoading.value"
           :disabled="auth.isLoading.value"
         >
-          Keluar
+          Logout
+        </v-btn>
+
+        <v-btn
+          class="mt-3"
+          color="primary"
+          variant="outlined"
+          block
+          @click="auth.fullLogout"
+          prepend-icon="mdi-logout"
+          :loading="auth.isLoading.value"
+          :disabled="auth.isLoading.value"
+        >
+          Full Logout
         </v-btn>
       </div>
     </v-sheet>
diff --git a/composables/useAuth.ts b/composables/useAuth.ts
index b6abd4b..335486b 100644
--- a/composables/useAuth.ts
+++ b/composables/useAuth.ts
@@ -107,9 +107,6 @@ export const useAuth = () => {
       const response = await $fetch<LogoutResponse>('/api/auth/logout', {
         method: 'POST'
       })
-      // const response = await $fetch<LogoutResponse>('/api/auth/clear-session', {
-      //   method: 'POST'
-      // });
       
       // Clear user immediately regardless of response
       _user.value = null
@@ -142,6 +139,45 @@ export const useAuth = () => {
     }
   }
 
+   const fullLogout = async (): Promise<void> => {
+    try {
+      _isLoading.value = true
+      clearError()
+      
+      const response = await $fetch<LogoutResponse>('/api/auth/clear-session', {
+        method: 'POST'
+      });
+      
+      // Clear user immediately regardless of response
+      _user.value = null
+      _accessToken.value = null
+      
+      if (response?.success && response?.logoutUrl) {
+        //remove all tokens from localstorage
+        localStorage.removeItem('idToken');
+        localStorage.removeItem('accessToken');
+        localStorage.removeItem('refreshToken');
+
+        // Keycloak will redirect back to the base URL after logout
+        // We can add a query param to detect the logout and show a message
+        window.location.href = response.logoutUrl
+      } else {
+        const warningMsg = response?.error || response?.message || 'No logout URL received'
+        console.warn('⚠️', warningMsg)
+        _error.value = warningMsg
+        await navigateTo('/auth/login')
+      }
+    } catch (logoutError: any) {
+      console.error('❌ Logout error:', logoutError)
+      _error.value = logoutError.message || 'Logout failed'
+      _user.value = null
+      _accessToken.value = null
+      await navigateTo('/auth/login')
+    } finally {
+      _isLoading.value = false
+    }
+  }
+
   // Helper function to refresh user data
   const refreshUser = async (): Promise<boolean> => {
     const userData = await checkAuth()
@@ -162,6 +198,6 @@ export const useAuth = () => {
     logout,
     refreshUser,
     clearError,
-    
+    fullLogout
   }
 }
\ No newline at end of file