diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 06cef8d..f8bc01c 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -2,6 +2,7 @@
 @use "./variables" as *;
 @use "./colors" as *;
 @use "./typography" as *;
+@use "./pages/dashboard" as *;
 
 // Global styles
 *,
diff --git a/assets/scss/pages/_dashboard.scss b/assets/scss/pages/_dashboard.scss
new file mode 100644
index 0000000..664f55f
--- /dev/null
+++ b/assets/scss/pages/_dashboard.scss
@@ -0,0 +1,179 @@
+@use "../variables" as *;
+@use "../colors" as *;
+
+.dashboard-container {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  padding: 0;
+}
+
+.dashboard-content {
+  width: 100%;
+  margin: 0;
+  background: white;
+  min-height: 100vh;
+}
+
+.dashboard-header {
+  background: white;
+  border-bottom: 1px solid #e0e0e0;
+  padding: 1.5rem 2rem;
+  
+  h1 {
+    font-size: 1.25rem;
+    font-weight: $font-weight-medium;
+    color: var(--color-neutral-900);
+    margin: 0;
+  }
+}
+
+.dashboard-body {
+  padding: 2rem;
+}
+
+.section {
+  margin-bottom: 2.5rem;
+  
+  &-title {
+    font-size: 0.875rem;
+    font-weight: $font-weight-semibold;
+    color: var(--color-neutral-900);
+    margin-bottom: 1rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid #e0e0e0;
+  }
+}
+
+.info-grid {
+  display: grid;
+  grid-template-columns: 140px 1fr;
+  gap: 0.75rem 1.5rem;
+  font-size: 0.875rem;
+  
+  .label {
+    color: var(--color-neutral-700);
+    font-weight: $font-weight-regular;
+  }
+  
+  .value {
+    color: var(--color-neutral-900);
+    font-weight: $font-weight-regular;
+  }
+}
+
+.token-section {
+  margin-bottom: 1.5rem;
+  
+  .token-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+    
+    h4 {
+      font-size: 0.875rem;
+      font-weight: $font-weight-medium;
+      color: var(--color-neutral-900);
+      margin: 0;
+    }
+  }
+  
+  .token-content {
+    background: #f8f9fa;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    padding: 1rem;
+    font-family: 'Courier New', monospace;
+    font-size: 0.75rem;
+    line-height: 1.6;
+    color: var(--color-neutral-800);
+    word-break: break-all;
+    white-space: pre-wrap;
+    max-height: 200px;
+    overflow-y: auto;
+    
+    &.collapsed {
+      max-height: 60px;
+      overflow: hidden;
+      position: relative;
+      
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 30px;
+        background: linear-gradient(transparent, #f8f9fa);
+      }
+    }
+  }
+  
+  .toggle-btn {
+    margin-top: 0.5rem;
+    font-size: 0.75rem;
+    color: var(--color-primary-600);
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 0;
+    text-decoration: underline;
+    
+    &:hover {
+      color: var(--color-primary-700);
+    }
+  }
+}
+
+.copy-btn {
+  font-size: 0.75rem;
+  padding: 0.25rem 0.75rem;
+  background: white;
+  border: 1px solid #d0d0d0;
+  border-radius: 4px;
+  color: var(--color-neutral-700);
+  cursor: pointer;
+  transition: all 0.2s;
+  
+  &:hover {
+    background: #f5f5f5;
+    border-color: #b0b0b0;
+  }
+  
+  .v-icon {
+    font-size: 14px;
+    margin-right: 4px;
+  }
+}
+
+.payload-section {
+  .payload-content {
+    background: #f8f9fa;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    padding: 1rem;
+    font-family: 'Courier New', monospace;
+    font-size: 0.75rem;
+    line-height: 1.6;
+    color: var(--color-neutral-800);
+    max-height: 300px;
+    overflow-y: auto;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+}
+
+@media (max-width: $breakpoint-mobile) {
+  .dashboard-body {
+    padding: 1rem;
+  }
+  
+  .info-grid {
+    grid-template-columns: 1fr;
+    gap: 0.5rem;
+    
+    .label {
+      font-weight: $font-weight-semibold;
+    }
+  }
+}
diff --git a/middleware/auth.ts b/middleware/auth.ts
index 44cb9e7..c580d24 100644
--- a/middleware/auth.ts
+++ b/middleware/auth.ts
@@ -10,9 +10,8 @@ export default defineNuxtRouteMiddleware(async (to: RouteLocationNormalized) =>
     const bypassFlag = sessionStorage.getItem('bypassRootRedirect');
     if (bypassFlag === 'true' && to.path === '/') {
       console.log('🔑 Bypass flag detected - allowing root access');
-      // Clear the flag immediately to prevent future bypasses
       sessionStorage.removeItem('bypassRootRedirect');
-      return; // Allow access without any redirect
+      return;
     }
   }
 
@@ -28,81 +27,61 @@ export default defineNuxtRouteMiddleware(async (to: RouteLocationNormalized) =>
     return;
   }
   
-  // On server-side during development, skip intensive checks
-  // The cookie check will happen on client-side
-  if (process.server && process.env.NODE_ENV === 'development') {
-    if (to.query.authenticated === 'true') {
-      console.log('⏭️ Server-side: Allowing authenticated redirect to pass through (dev mode)');
-      return; // Allow server-side render to proceed, client will verify
-    }
-    console.log('⏭️ Skipping intensive check on server-side during development');
-    useAuth();
+  // On server-side, skip auth check - let client handle it
+  if (process.server) {
+    console.log('⏭️ Server-side: Skipping auth check (will verify on client)');
     return;
   }
 
+  // CLIENT-SIDE ONLY from here
+  
   // Check for the authentication signal from a successful login redirect
-  const isAuthRedirect: boolean = to.query.authenticated === 'true';
+  const isAuthRedirect = to.query.authenticated === 'true';
 
   if (isAuthRedirect) {
-    console.log('⏳ Client-side is processing a new login session, checking cookie...');
+    console.log('⏳ Processing new login session...');
     
-    // Give the browser a moment to process the cookie from the redirect
-    if (process.client) {
-      await new Promise(resolve => setTimeout(resolve, 50));
-    }
+    // Give browser time to process the cookie from redirect
+    await new Promise(resolve => setTimeout(resolve, 100));
     
-    // Check authentication first before removing query parameter
     try {
       const { checkAuth } = useAuth();
       console.log('🔍 Checking authentication after redirect...');
       
       let user = await checkAuth();
       
-      // If not found, retry once more
-      if (!user && process.client) {
-        console.log('⚠️ Cookie not available yet, retrying...');
-        await new Promise(resolve => setTimeout(resolve, 150));
+      // Retry up to 3 times if cookie not available yet
+      let retries = 0;
+      while (!user && retries < 3) {
+        console.log(`⚠️ Cookie not available yet, retry ${retries + 1}/3...`);
+        await new Promise(resolve => setTimeout(resolve, 200));
         user = await checkAuth();
+        retries++;
       }
       
       if (user) {
-        console.log('✅ User is authenticated after redirect:', user.name || user.preferred_username || user.email);
+        console.log('✅ User authenticated after redirect:', user.name || user.email);
         // Remove query parameter and allow access
-        await navigateTo({ path: to.path, query: {} }, { replace: true });
-        return; // Allow access
+        return navigateTo({ path: to.path, query: {} }, { replace: true });
       } else {
-        console.log('❌ Still no session after retry, redirecting to login');
+        console.log('❌ No session after retries, redirecting to login');
         return navigateTo('/LoginPage');
       }
     } catch (authError) {
       console.error('❌ Auth check failed after redirect:', authError);
-      // Retry once
-      if (process.client) {
-        await new Promise(resolve => setTimeout(resolve, 150));
-        try {
-          const { checkAuth } = useAuth();
-          const retryUser = await checkAuth();
-          if (retryUser) {
-            console.log('✅ User authenticated on retry after error');
-            await navigateTo({ path: to.path, query: {} }, { replace: true });
-            return;
-          }
-        } catch (retryError) {
-          console.error('❌ Retry also failed:', retryError);
-        }
-      }
       return navigateTo('/LoginPage');
     }
   }
 
+  // Normal auth check for protected routes
   try {
     const { checkAuth } = useAuth();
-    console.log('🔍 Checking authentication status using useAuth...');
+    console.log('🔍 Checking authentication status...');
     
     const user = await checkAuth(); 
 
     if (user) {
-      console.log('✅ User is authenticated:', user.name || user.preferred_username || user.email);
+      console.log('✅ User is authenticated:', user.name || user.email);
       return;
     } else {
       console.log('❌ No valid session found, redirecting to login');
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 3bf7f25..3e6be5e 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -72,6 +72,10 @@ export default defineNuxtConfig({
     sessionDurationHours: parseInt(process.env.SESSION_DURATION_HOURS || '1', 10),
     oauthStateDurationMinutes: parseInt(process.env.OAUTH_STATE_DURATION_MINUTES || '10', 10),
 
+    // External API
+    externalApiBaseUrl: process.env.EXTERNAL_API_BASE_URL || 'http://10.10.150.100:8084',
+    externalApiTimeout: parseInt(process.env.EXTERNAL_API_TIMEOUT || '10000', 10),
+
     public: {
       authUrl: process.env.AUTH_ORIGIN,
       // authUrl: process.env.AUTH_ORIGIN || "http://10.10.150.175:3001",
diff --git a/pages/AdminKlinikRuang/[kodeKlinik].vue b/pages/AdminKlinikRuang/[kodeKlinik].vue
index d11429c..5ba9bef 100644
--- a/pages/AdminKlinikRuang/[kodeKlinik].vue
+++ b/pages/AdminKlinikRuang/[kodeKlinik].vue
@@ -791,7 +791,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useQueueStore } from '@/stores/queueStore';
 import { useMasterStore } from '@/stores/masterStore';
@@ -936,16 +936,43 @@ const filterOptionsList = {
 const config = useRuntimeConfig();
 const wsBaseUrl = config.public?.wsBaseUrl || 'ws://10.10.150.100:8084/api/v1/ws';
 
-// WebSocket client ID for admin (you can make this dynamic)
-const adminClientId = `admin-klinik-ruang-${kodeKlinik.value}`;
+// Generate a unique session suffix (random ID)
+const uniqueSessionSuffix = ref(process.client ? Math.random().toString(36).substring(2, 8) : '')
+
+// WebSocket client ID for admin
+const adminClientId = computed(() => {
+  return `admin-klinik-ruang-${kodeKlinik.value}-${uniqueSessionSuffix.value}`
+})
+
+const fetchAllData = async () => {
+  if (!klinikData.value) return;
+  console.log('🔄 AdminKlinikRuang refresh: Syncing data...');
+  try {
+    await fetchPatientsFromAPI();
+    queueStore.ensureInitialData();
+    console.log('✅ AdminKlinikRuang refresh: Success');
+  } catch (err) {
+    console.error('❌ AdminKlinikRuang refresh error:', err);
+  }
+};
 
 // Initialize WebSocket for sending messages
 const { sendViaPost } = useWebSocket({
   url: wsBaseUrl,
-  clientId: adminClientId,
+  clientId: adminClientId.value,
   fallbackPostUrl: '/stats-api/ws'
 });
 
+const isConnected = computed(() => queueStore.isWsConnected);
+
+// Watch for clientId changes and reconnect if needed
+watch(adminClientId, (newClientId, oldClientId) => {
+  if (newClientId && newClientId !== oldClientId) {
+    console.log('🔄 Client ID changed, reconnecting centralized WebSocket...')
+    queueStore.initWebSocket(newClientId)
+  }
+})
+
 const showSnackbar = (message, color = 'success') => {
   snackbarText.value = message;
   snackbarColor.value = color;
@@ -2269,9 +2296,23 @@ onMounted(async () => {
 
   if (!klinikData.value) {
     console.warn('⚠️ Klinik data not found after sync');
-    // We don't automatically redirect anymore to allow sync to complete
-    // but we can check again after a short delay or just let the computed handle it
   }
+
+  // 3. Centralized WebSocket & polling
+  await nextTick();
+  
+  // Initial fetch/sync
+  await fetchAllData();
+
+  // Polling every 10 seconds to keep data synchronized as fallback
+  const pollingInterval = setInterval(fetchAllData, 10000);
+
+  // Use centralized WebSocket
+  queueStore.initWebSocket(adminClientId.value);
+
+  onUnmounted(() => {
+    clearInterval(pollingInterval);
+  });
 });
 </script>
 
diff --git a/pages/AdminLoket/[id].vue b/pages/AdminLoket/[id].vue
index 8844ad2..22282cb 100644
--- a/pages/AdminLoket/[id].vue
+++ b/pages/AdminLoket/[id].vue
@@ -299,90 +299,74 @@ const {
   processNextQueue,
 } = useQueue("loket", loketId);
 
-// WebSocket Configuration
-const config = useRuntimeConfig();
-const wsBaseUrl =
-  config.public?.wsBaseUrl || "ws://10.10.150.100:8084/api/v1/ws";
-const uniqueSessionSuffix = ref(Math.random().toString(36).substring(7));
-let wsInstance = null;
-const isConnected = ref(false);
+// Generate a unique session suffix (random ID)
+const uniqueSessionSuffix = ref(process.client ? Math.random().toString(36).substring(2, 8) : '')
 
-const initWebSocket = () => {
-  if (!loketId.value) return null;
+const anjunganClientId = computed(() => {
+  if (!loketId.value) return ''
+  return `admin-loket-${loketId.value}-${uniqueSessionSuffix.value}`
+})
 
-  console.log("🔌 WebSocket (Admin): Connecting to", wsBaseUrl);
+const fetchAllData = async () => {
+  if (!loketId.value) return;
+  console.log('🔄 AdminLoket refresh: Syncing data...');
+  
+  try {
+    queueStore.ensureInitialData();
 
-  wsInstance = useWebSocket({
-    url: wsBaseUrl,
-    clientId: `admin-loket-${loketId.value}-${uniqueSessionSuffix.value}`,
-    onMessage: (data) => {
-      console.log("📨 WebSocket message received (Admin):", data);
+    // 1. Ensure CLINIC data
+    const hasRegulerClinics = clinicStore.clinics.some(
+      (c) => c.jenisLayanan === "Reguler",
+    );
+    if (!hasRegulerClinics) {
+      await clinicStore.fetchRegulerClinics();
+    }
 
-      const messageData = data?.data || data;
+    // 2. Ensure LOKET data
+    const hasRegularLokets = loketStore.lokets.some((l) => l.id < 1000);
+    const targetId = parseInt(loketId.value);
+    const currentLoketExists = loketStore.getLoketById(targetId);
 
-      // If it's a message that should trigger a refresh for this loket
-      // For Admin, any message usually means we should refresh our list
-      fetchPatientsForCurrentLoket();
+    if (!hasRegularLokets || !currentLoketExists) {
+      await loketStore.fetchLoketFromAPI();
+    }
 
-      // Also potentially refresh quota
-      fetchQuotaFromAPI();
-    },
-    onOpen: () => {
-      console.log("✅ WebSocket connected (Admin)");
-      isConnected.value = true;
-    },
-    onClose: () => {
-      isConnected.value = false;
-    },
-    onError: () => {
-      isConnected.value = false;
-    },
-    reconnectInterval: 5000,
-    maxReconnectAttempts: 10,
-  });
+    // 3. Fresh room data
+    await ruangStore.fetchRuangFromAPI();
 
-  return wsInstance;
+    // 4. Quota data
+    await fetchQuotaFromAPI();
+
+    // 5. Patient data
+    await fetchPatientsForCurrentLoket();
+
+    console.log('✅ AdminLoket refresh: Success');
+  } catch (err) {
+    console.error('❌ AdminLoket refresh error:', err);
+  }
 };
 
+const isConnected = computed(() => queueStore.isWsConnected);
+
+// Watch for clientId changes and reconnect if needed
+watch(anjunganClientId, (newClientId, oldClientId) => {
+  if (newClientId && newClientId !== oldClientId) {
+    console.log('🔄 Client ID changed, reconnecting centralized WebSocket...')
+    queueStore.initWebSocket(newClientId)
+  }
+})
+
 // PERSISTENCE FIX: Ensure data exists on mount
 onMounted(async () => {
+  console.log("🚀 AdminLoket Component mounted");
+  
+  // Wait for stores to be hydrated and ready
   await nextTick();
-  queueStore.ensureInitialData();
 
-  // 1. Ensure CLINIC data is loaded first (critical for mapping codes like "25" -> "MT")
-  // Check if we need to fetch reguler clinics (e.g. if we only have local exec clinics)
-  const hasRegulerClinics = clinicStore.clinics.some(
-    (c) => c.jenisLayanan === "Reguler",
-  );
-  if (!hasRegulerClinics) {
-    console.log("AdminLoket: Fetching reguler clinics...");
-    await clinicStore.fetchRegulerClinics();
-  }
+  // Initial fetch/sync
+  await fetchAllData();
 
-  // 2. Ensure LOKET data is loaded next (needs clinic data for mapping)
-  // Fix: Don't just check length (which might include local exec data). Check for API data (id < 1000)
-  const hasRegularLokets = loketStore.lokets.some((l) => l.id < 1000);
-  const targetId = parseInt(loketId.value);
-  const currentLoketExists = loketStore.getLoketById(targetId);
-
-  if (!hasRegularLokets || !currentLoketExists) {
-    console.log(
-      "AdminLoket: Fetching lokets (missing regular data or specific loket)...",
-    );
-    await loketStore.fetchLoketFromAPI();
-  }
-
-  // 3. Fetch fresh room data from API (and de-duplicate)
-  await ruangStore.fetchRuangFromAPI();
-
-  // 4. Fetch specific quota/loket data from API to ensure fresh counts
-  // This matches MasterLoket.vue implementation
-  await fetchQuotaFromAPI();
-
-  // 5. Fetch patient data for this loket
-  await fetchPatientsForCurrentLoket();
-
-  // 6. Periodic check for daily reset (2 AM)
+  // Periodic check for daily reset (2 AM)
   resetCheckInterval = setInterval(() => {
     const didReset = queueStore.checkAndResetDaily();
     if (didReset) {
@@ -393,16 +377,22 @@ onMounted(async () => {
     }
   }, 60000); // Check every minute
 
-  // 7. Initialize and connect WebSocket
-  wsInstance = initWebSocket();
-  if (wsInstance) {
-    wsInstance.connect();
-  }
+  // Polling every 10 seconds to keep data synchronized as fallback
+  const pollingInterval = setInterval(fetchAllData, 10000);
+
+  // Initialize and connect WebSocket (Centralized)
+  queueStore.initWebSocket(anjunganClientId.value);
+
+  onUnmounted(() => {
+    clearInterval(pollingInterval);
+  });
 });
 
 onUnmounted(() => {
   if (resetCheckInterval) clearInterval(resetCheckInterval);
-  if (wsInstance) wsInstance.disconnect();
+  // WebSocket is now global, we might not want to disconnect on every unmount 
+  // if other pages are still open, but usually for Admin/Anjungan it's okay.
+  // We keep it connected unless specified otherwise.
 });
 
 const apiQuota = ref(null);
diff --git a/pages/Anjungan/Anjungan/[id].vue b/pages/Anjungan/Anjungan/[id].vue
index 5cba8f3..08534e3 100644
--- a/pages/Anjungan/Anjungan/[id].vue
+++ b/pages/Anjungan/Anjungan/[id].vue
@@ -722,53 +722,81 @@ const queueStore = useQueueStore();
 const doctorStore = useDoctorStore();
 const { printTicketFromPatient, isPrinting } = useThermalPrint();
 
-// WebSocket state
-const config = useRuntimeConfig();
-const wsBaseUrl =
-  config.public?.wsBaseUrl || "ws://10.10.150.100:8084/api/v1/ws";
-const uniqueSessionSuffix = ref(Math.random().toString(36).substring(7));
-let wsInstance = null;
-const isConnected = ref(false);
-
-const initWebSocket = () => {
-  if (!anjunganId.value) return null;
-
-  console.log("🔌 WebSocket (Anjungan): Connecting to", wsBaseUrl);
-
-  wsInstance = useWebSocket({
-    url: wsBaseUrl,
-    clientId: `anjungan-${anjunganId.value}-${uniqueSessionSuffix.value}`,
-    onMessage: (data) => {
-      console.log("📨 WebSocket message received (Anjungan):", data);
-      // In Anjungan, we might need to refresh clinics or stats
-      // but usually Anjungan is more focused on registration.
-      // We can refresh clinics just in case.
-      if (anjunganData.value?.jenisPasien === "Reguler") {
-        clinicStore.fetchRegulerClinics();
-      }
-    },
-    onOpen: () => {
-      console.log("✅ WebSocket connected (Anjungan)");
-      isConnected.value = true;
-    },
-    onClose: () => {
-      isConnected.value = false;
-    },
-    onError: () => {
-      isConnected.value = false;
-    },
-    reconnectInterval: 5000,
-    maxReconnectAttempts: 10,
-  });
-
-  return wsInstance;
-};
-
-// Gunakan storeToRefs untuk memastikan reaktivitas yang stabil terutama saat cold start/refresh
+// reactive refs from stores
 const { anjunganItems } = storeToRefs(anjunganStore);
 const { getAllClinics } = storeToRefs(clinicStore);
 const { doctorsByKlinikId, loadingDoctors } = storeToRefs(doctorStore);
 
+const anjunganId = computed(() => {
+  const raw = route.params.id;
+  const val = Array.isArray(raw) ? raw[0] : raw;
+  const parsed = parseInt(val, 10);
+  return isNaN(parsed) ? null : parsed;
+});
+
+const anjunganData = computed(() => {
+  const idValue = anjunganId.value;
+  if (!idValue) return null;
+
+  // Use the refs from storeToRefs
+  const list = anjunganItems.value || [];
+  return list.find((a) => Number(a.id) === Number(idValue)) || null;
+});
+
+// Generate a unique session suffix (random ID)
+const uniqueSessionSuffix = ref(process.client ? Math.random().toString(36).substring(2, 8) : '')
+
+const anjunganClientId = computed(() => {
+  if (!anjunganId.value) return ''
+  return `anjungan-${anjunganId.value}-${uniqueSessionSuffix.value}`
+})
+
+const fetchAllData = async () => {
+  if (!anjunganId.value) return;
+  console.log('🔄 Anjungan refresh: Fetching clinics and initial data...');
+  try {
+    if (anjunganData.value?.jenisPasien === "Reguler") {
+      await clinicStore.fetchRegulerClinics();
+    }
+    queueStore.ensureInitialData();
+    console.log('✅ Anjungan refresh: Success');
+  } catch (err) {
+    console.error('❌ Anjungan refresh error:', err);
+  }
+};
+
+const isConnected = computed(() => queueStore.isWsConnected);
+
+// Watch for clientId changes and reconnect if needed
+watch(anjunganClientId, (newClientId, oldClientId) => {
+  if (newClientId && newClientId !== oldClientId) {
+    console.log('🔄 Client ID changed, reconnecting centralized WebSocket...')
+    queueStore.initWebSocket(newClientId)
+  }
+})
+
+onMounted(async () => {
+  console.log("🚀 Anjungan Component mounted");
+  
+  // Wait for stores to be hydrated and ready
+  await nextTick();
+  
+  // Initial fetch
+  await fetchAllData();
+
+  // Polling every 10 seconds to keep data synchronized as fallback
+  const pollingInterval = setInterval(fetchAllData, 10000);
+
+  // Use centralized WebSocket
+  queueStore.initWebSocket(anjunganClientId.value);
+
+  onUnmounted(() => {
+    clearInterval(pollingInterval);
+  });
+});
+
+// Lifecycle management consolidated below
+
 // Validasi bahwa queueStore ter-load dengan benar
 onMounted(() => {
   console.log("🔍 QueueStore initialized:", queueStore);
@@ -782,21 +810,7 @@ onMounted(() => {
   }
 });
 
-const anjunganId = computed(() => {
-  const raw = route.params.id;
-  const val = Array.isArray(raw) ? raw[0] : raw;
-  const parsed = parseInt(val, 10);
-  return isNaN(parsed) ? null : parsed;
-});
-
-const anjunganData = computed(() => {
-  const idValue = anjunganId.value;
-  if (!idValue) return null;
-
-  // Langsung cari di anjunganItems yang sudah di-storeToRefs
-  const list = anjunganItems.value || [];
-  return list.find((a) => Number(a.id) === Number(idValue)) || null;
-});
+// Initial data synchronization handled in watcher and onMounted
 
 // doctorsByKlinikId and loadingDoctors are now from doctorStore
 
@@ -855,24 +869,15 @@ const dialogDoctors = computed(() => {
   return staticDoctors;
 });
 
-onMounted(async () => {
-  console.log("🚀 Component mounted");
-  await nextTick();
-  console.log("✅ Initial mount complete");
-
-  // Initialize and connect WebSocket
-  wsInstance = initWebSocket();
-  if (wsInstance) {
-    wsInstance.connect();
-  }
-});
-
+// Cleanup saat component unmount (Preserved old code in comments)
+/*
 import { onUnmounted } from "vue";
 onUnmounted(() => {
   if (wsInstance) {
     wsInstance.disconnect();
   }
 });
+*/
 
 const filteredClinics = computed(() => {
   if (!anjunganData.value || !anjunganData.value.klinik) return [];
diff --git a/pages/Anjungan/AntreanMasuk/[id].vue b/pages/Anjungan/AntreanMasuk/[id].vue
index b0832d4..7a56f28 100644
--- a/pages/Anjungan/AntreanMasuk/[id].vue
+++ b/pages/Anjungan/AntreanMasuk/[id].vue
@@ -501,10 +501,13 @@ const anjunganClientId = computed(() => {
   return `anjungan-masuk-${screenId.value}-${uniqueSessionSuffix.value}`
 })
 
-let wsInstance = null
-const isConnected = ref(false)
+// let wsInstance = null
+// const isConnected = ref(false)
 
-const initWebSocket = () => {
+// WebSocket configuration (Centralized in queueStore)
+// Old implementation preserved for rollback
+/*
+const initWebSocketLocal = () => {
   if (!screenId.value) return null
   
   console.log('🔌 WebSocket: Connecting to', wsBaseUrl)
@@ -516,7 +519,6 @@ const initWebSocket = () => {
     fallbackPostUrl: '/stats-api/ws',
     onMessage: (data) => {
       console.log('📨 WebSocket message received:', data)
-      // Real-time update: refetch all relevant data when any message arrives
       fetchAllData()
     },
     onOpen: () => {
@@ -535,6 +537,9 @@ const initWebSocket = () => {
   
   return wsInstance
 }
+*/
+
+const isConnected = computed(() => queueStore.isWsConnected);
 
 // Watch loketPatients to ensure reactivity after refresh
 watch(loketPatients, (newPatients) => {
@@ -596,17 +601,12 @@ onMounted(() => {
     // Polling every 10 seconds to keep data synchronized as fallback
     const pollingInterval = setInterval(fetchAllData, 10000);
 
-    // Initialize and connect WebSocket
-    wsInstance = initWebSocket()
-    if (wsInstance) {
-      wsInstance.connect()
-    }
+    // Initialize and connect WebSocket (Centralized)
+    queueStore.initWebSocket(anjunganClientId.value);
     
     onUnmounted(() => {
       clearInterval(pollingInterval);
-      if (wsInstance) {
-        wsInstance.disconnect()
-      }
+      // wsInstance is now global
     });
 
     updateTime()
diff --git a/pages/Anjungan/AntrianKlinikRuang/[kodeKlinik].vue b/pages/Anjungan/AntrianKlinikRuang/[kodeKlinik].vue
index 6b56137..02be5af 100644
--- a/pages/Anjungan/AntrianKlinikRuang/[kodeKlinik].vue
+++ b/pages/Anjungan/AntrianKlinikRuang/[kodeKlinik].vue
@@ -441,6 +441,22 @@ const updateTime = () => {
 const config = useRuntimeConfig()
 const wsBaseUrl = config.public?.wsBaseUrl || 'ws://10.10.150.100:8084/api/v1/ws'
 
+// Generate a unique session suffix (random ID)
+const uniqueSessionSuffix = ref(process.client ? Math.random().toString(36).substring(2, 8) : '')
+
+const fetchAllData = async () => {
+  if (!kodeKlinik.value) return;
+  console.log('🔄 AntrianKlinikRuang refresh: Fetching data...');
+  try {
+    await clinicStore.fetchRegulerClinics();
+    await ruangStore.fetchRuangFromAPI();
+    queueStore.ensureInitialData();
+    console.log('✅ AntrianKlinikRuang refresh: Success');
+  } catch (err) {
+    console.error('❌ AntrianKlinikRuang refresh error:', err);
+  }
+};
+
 // WebSocket client ID for anjungan (you can make this dynamic based on screen number)
 const anjunganClientId = computed(() => {
   if (!kodeKlinik.value) return ''
@@ -465,17 +481,19 @@ const anjunganClientId = computed(() => {
   }
   
   // Priority 3: Fallback to client ID without screen number (broadcast)
-  const clientId = `anjungan-klinik-ruang-${kodeKlinik.value}`
-  console.log('🆔 Using default client ID (no screen number):', clientId)
+  const clientId = `anjungan-klinik-ruang-${kodeKlinik.value}-${uniqueSessionSuffix.value}`
+  console.log('🆔 Using default client ID (tab-specific):', clientId)
   return clientId
 })
 
 // WebSocket instance
-let wsInstance = null
-const isConnected = ref(false)
+// let wsInstance = null
+// const isConnected = ref(false)
 
-// Initialize WebSocket connection
-const initWebSocket = () => {
+// WebSocket configuration (Centralized in queueStore)
+// Old implementation preserved for rollback
+/*
+const initWebSocketLocal = () => {
   if (!kodeKlinik.value || !anjunganClientId.value) {
     console.warn('Cannot initialize WebSocket: missing kodeKlinik or clientId')
     return null
@@ -491,114 +509,65 @@ const initWebSocket = () => {
       fallbackPostUrl: '/stats-api/ws',
       onMessage: (data) => {
       console.log('📨 WebSocket raw message received:', data)
-      console.log('📨 Message type:', typeof data)
-      
-      // Backend mengirim data langsung atau dalam wrapper
-      // Handle both cases
       let messageData = data
-      
-      // Jika data ada dalam property 'data', ambil itu
       if (data && typeof data === 'object' && data.data) {
         messageData = data.data
-        console.log('📦 Extracted data from wrapper:', messageData)
       }
-      
-      // Handle patient called message - format: { noantrian: "AA001", tipeLayanan: "Pemeriksaan Awal" }
       if (messageData && messageData.noantrian) {
         const nomorAntrian = messageData.noantrian
-        const tipeLayanan = messageData.tipeLayanan || null // "Pemeriksaan Awal" atau "Tindakan"
-        console.log('✅ Processing patient call for nomor antrian:', nomorAntrian, 'tipeLayanan:', tipeLayanan)
-        
-        // Find patient by nomor antrian (check both noAntrian and barcode)
+        const tipeLayanan = messageData.tipeLayanan || null 
         const patientIndex = queueStore.allPatients.findIndex(p => {
           const pNoAntrian = p.noAntrian?.split(" |")[0] || p.noAntrian
           return (pNoAntrian === nomorAntrian || p.barcode === nomorAntrian) &&
                  p.kodeKlinik === kodeKlinik.value &&
                  p.processStage === 'klinik-ruang'
         })
-        
         if (patientIndex !== -1) {
-          // Update patient status to 'di-loket' (called) dan update tipeLayanan serta tracking flags
-          const oldPatient = { ...queueStore.allPatients[patientIndex] }
           const updateData = {
             ...queueStore.allPatients[patientIndex],
             status: 'di-loket',
             lastCalledAt: new Date().toISOString(),
             lastCalledTipeLayanan: tipeLayanan,
           }
-          
-          // Update tipeLayanan agar pasien muncul di kolom yang sesuai
           if (tipeLayanan) {
             updateData.tipeLayanan = tipeLayanan
           }
-          
-          // Update tracking flags berdasarkan tipeLayanan
           if (tipeLayanan === 'Pemeriksaan Awal') {
             updateData.calledPemeriksaanAwal = true
           } else if (tipeLayanan === 'Tindakan') {
             updateData.calledTindakan = true
           }
-          
           queueStore.allPatients[patientIndex] = updateData
-          
-          console.log('✅ Patient data updated in store based on nomor antrian:', nomorAntrian)
-          console.log('📊 Old:', { status: oldPatient.status, tipeLayanan: oldPatient.tipeLayanan })
-          console.log('📊 New:', { 
-            status: updateData.status, 
-            tipeLayanan: updateData.tipeLayanan,
-            calledPemeriksaanAwal: updateData.calledPemeriksaanAwal,
-            calledTindakan: updateData.calledTindakan
-          })
-        } else {
-          // If patient doesn't exist, log warning
-          console.warn('⚠️ Patient not found in store with nomor antrian:', nomorAntrian)
-          console.log('📋 Available patients:', klinikPatients.value.map(p => ({
-            noAntrian: p.noAntrian?.split(" |")[0],
-            barcode: p.barcode,
-            kodeKlinik: p.kodeKlinik
-          })))
         }
-      } else {
-        console.log('ℹ️ Message format is invalid or missing noantrian:', messageData)
       }
     },
     onOpen: () => {
-      console.log('✅ Anjungan WebSocket connected successfully!')
-      console.log('🆔 Connected as:', anjunganClientId.value)
       isConnected.value = true
     },
     onClose: () => {
-      console.log('⚠️ Anjungan WebSocket closed')
       isConnected.value = false
     },
     onError: (error) => {
-      console.error('❌ Anjungan WebSocket error:', error)
       isConnected.value = false
     },
     reconnectInterval: 3000,
     maxReconnectAttempts: 10,
   })
 
-  // Watch connection status
-  if (wsInstance.isConnected) {
-    watch(wsInstance.isConnected, (connected) => {
-      isConnected.value = connected
-    })
-  }
-
   return wsInstance
 }
+*/
+
+const isConnected = computed(() => queueStore.isWsConnected);
 
 onMounted(async () => {
   console.log('🚀 AntrianKlinikRuang (Anjungan) mounted, syncing data...')
   
-  // 1. Sync data if needed
-  try {
-    await clinicStore.fetchRegulerClinics()
-    await ruangStore.fetchRuangFromAPI()
-  } catch (error) {
-    console.error('❌ Error syncing data in AntrianKlinikRuang:', error)
-  }
+  // Wait for stores to be hydrated and ready
+  await nextTick();
+
+  // Initial fetch/sync
+  await fetchAllData();
 
   // Redirect to index if klinik not found after sync
   if (!klinikData.value) {
@@ -609,34 +578,30 @@ onMounted(async () => {
   
   updateTime()
   timeInterval = setInterval(updateTime, 1000)
+
+  // Polling every 10 seconds to keep data synchronized as fallback
+  const pollingInterval = setInterval(fetchAllData, 10000);
   
-  // Initialize and connect WebSocket
+  // Initialize and connect WebSocket (Centralized)
   if (kodeKlinik.value) {
-    wsInstance = initWebSocket()
-    if (wsInstance) {
-      wsInstance.connect()
-      console.log('🚀 WebSocket connection initiated')
-    }
+    queueStore.initWebSocket(anjunganClientId.value);
   }
+
+  onUnmounted(() => {
+    clearInterval(pollingInterval);
+  });
 })
 
 onUnmounted(() => {
   if (timeInterval) clearInterval(timeInterval)
-  if (wsInstance) {
-    wsInstance.disconnect()
-    console.log('🔌 WebSocket disconnected')
-  }
+  // wsInstance is now global
 })
 
 // Watch for clientId changes and reconnect if needed
 watch(anjunganClientId, (newClientId, oldClientId) => {
-  if (newClientId && newClientId !== oldClientId && wsInstance) {
-    console.log('🔄 Client ID changed, reconnecting...')
-    wsInstance.disconnect()
-    wsInstance = initWebSocket()
-    if (wsInstance) {
-      wsInstance.connect()
-    }
+  if (newClientId && newClientId !== oldClientId) {
+    console.log('🔄 Client ID changed, reconnecting centralized WebSocket...')
+    queueStore.initWebSocket(newClientId)
   }
 })
 </script>
diff --git a/pages/Anjungan/AntrianLoket/[id].vue b/pages/Anjungan/AntrianLoket/[id].vue
index fd95447..dca9b6c 100644
--- a/pages/Anjungan/AntrianLoket/[id].vue
+++ b/pages/Anjungan/AntrianLoket/[id].vue
@@ -864,10 +864,39 @@ const anjunganClientId = computed(() => {
   return `anjungan-loket-${loketId.value}-${uniqueSessionSuffix.value}`
 })
 
-let wsInstance = null
-const isConnected = ref(false)
+const fetchAllData = async () => {
+  if (!loketId.value) return;
+  console.log('🔄 Anjungan refresh: Fetching data for current loket...');
+  try {
+    // 1. Fetch data for this loket
+    await queueStore.fetchPatientsForLoket(loketId.value);
+    
+    // 2. Ensure initial data
+    queueStore.ensureInitialData();
+    
+    console.log('✅ Anjungan refresh: Success');
+  } catch (err) {
+    console.error('❌ Anjungan refresh error:', err);
+  }
+};
 
-const initWebSocket = () => {
+const isConnected = computed(() => queueStore.isWsConnected);
+
+// Watch for clientId changes and reconnect if needed
+watch(anjunganClientId, (newClientId, oldClientId) => {
+  if (newClientId && newClientId !== oldClientId) {
+    console.log('🔄 Client ID changed, reconnecting centralized WebSocket...')
+    queueStore.initWebSocket(newClientId)
+  }
+})
+
+// let wsInstance = null
+// const isConnected = ref(false)
+
+// WebSocket configuration (Centralized in queueStore)
+// Old implementation preserved for rollback
+/*
+const initWebSocketLocal = () => {
   if (!loketId.value) return null
   
   console.log('🔌 WebSocket: Connecting to', wsBaseUrl)
@@ -879,25 +908,14 @@ const initWebSocket = () => {
     fallbackPostUrl: '/stats-api/ws',
     onMessage: (data) => {
       console.log('📨 WebSocket message received:', data)
-      
-      // Handle both raw and wrapped data (matching AntreanMasuk style)
       const messageData = data?.data || data
-      
-      // If it's a patient call message, we should mimic the BroadcastChannel behavior
-      // The backend format might vary, but we look for 'noantrian' or 'patient'
       if (messageData?.noantrian || messageData?.type === 'CALL_PATIENT') {
-        console.log('📞 WebSocket triggered call update');
-        
-        // Refetch to ensure store is sync
         queueStore.fetchPatientsForLoket(loketId.value);
-        
-        // If message has full patient object, we can also update broadcastedPatient for instant Hero display
         if (messageData.patient) {
           broadcastedPatient.value = {
             ...messageData.patient,
             _rawMessage: messageData
           };
-          
           const targetId = String(loketId.value);
           const key = targetId ? `loket-${targetId}` : 'loket';
           if (queueStore.currentProcessingPatient) {
@@ -905,7 +923,6 @@ const initWebSocket = () => {
           }
         }
       } else {
-        // General update: refetch current loket data
         queueStore.fetchPatientsForLoket(loketId.value);
       }
     },
@@ -925,8 +942,16 @@ const initWebSocket = () => {
   
   return wsInstance
 }
+*/
+
+
+
+onMounted(async () => {
+  console.log("🚀 AntrianLoket Component mounted");
+
+  // Wait for stores to be hydrated and ready
+  await nextTick();
 
-onMounted(() => {
   // Fetch loket data from API to ensure fresh mapping
   loketStore.fetchLoketFromAPI(true).catch(console.error);
   
@@ -967,22 +992,24 @@ onMounted(() => {
     console.error('❌ BroadcastChannel error:', e);
   }
   
-  // Initialize and connect WebSocket
-  wsInstance = initWebSocket()
-  if (wsInstance) {
-    wsInstance.connect()
-  }
+  // Initial fetch
+  await fetchAllData();
 
-  // Ensure initial data is loaded if store is empty
-  setTimeout(() => {
-    queueStore.ensureInitialData();
-  }, 200);
+  // Polling every 10 seconds to keep data synchronized as fallback
+  const pollingInterval = setInterval(fetchAllData, 10000);
+
+  // Initialize and connect WebSocket (Centralized)
+  queueStore.initWebSocket(anjunganClientId.value);
+
+  onUnmounted(() => {
+    clearInterval(pollingInterval);
+  });
 });
 
 onUnmounted(() => {
   if (timeInterval) clearInterval(timeInterval)
   if (broadcastChannel) broadcastChannel.close()
-  if (wsInstance) wsInstance.disconnect()
+  // wsInstance is now global
 })
 </script>
 
diff --git a/pages/CheckInPasien/checkIn.vue b/pages/CheckInPasien/checkIn.vue
index 752fabf..2f956d6 100644
--- a/pages/CheckInPasien/checkIn.vue
+++ b/pages/CheckInPasien/checkIn.vue
@@ -1768,40 +1768,35 @@ const statusOptions = [
   { title: "Belum Diizinkan", value: "NOT_ALLOWED" },
 ];
 
-// WebSocket state
-let wsInstance: any = null;
-const isConnected = ref(false);
-const uniqueSessionSuffix = ref(Math.random().toString(36).substring(7));
+// WebSocket stabilization - version 1.1
+// Generate a unique session suffix (random ID)
+const uniqueSessionSuffix = ref(process.client ? Math.random().toString(36).substring(2, 8) : '')
 
-const initWebSocket = () => {
-  console.log("🔌 WebSocket (CheckIn): Connecting to", wsBaseUrl);
+const checkInClientId = computed(() => {
+  return `checkin-${uniqueSessionSuffix.value}`
+})
 
-  wsInstance = useWebSocket({
-    url: wsBaseUrl,
-    clientId: `checkin-${uniqueSessionSuffix.value}`,
-    onMessage: (data) => {
-      console.log("📨 WebSocket message received (CheckIn):", data);
-      // General update: ensure store data is synchronized
-      // This will ensure new registrations from Anjungan are picked up
-      queueStore.ensureInitialData();
-    },
-    onOpen: () => {
-      console.log("✅ WebSocket connected (CheckIn)");
-      isConnected.value = true;
-    },
-    onClose: () => {
-      isConnected.value = false;
-    },
-    onError: () => {
-      isConnected.value = false;
-    },
-    reconnectInterval: 5000,
-    maxReconnectAttempts: 10,
-  });
-
-  return wsInstance;
+const fetchAllData = async () => {
+  console.log('🔄 CheckIn refresh: Syncing data...');
+  try {
+    queueStore.ensureInitialData();
+    checkAndResetDaily();
+    console.log('✅ CheckIn refresh: Success');
+  } catch (err) {
+    console.error('❌ CheckIn refresh error:', err);
+  }
 };
 
+const isConnected = computed(() => queueStore.isWsConnected);
+
+// Watch for clientId changes and reconnect if needed
+watch(checkInClientId, (newClientId, oldClientId) => {
+  if (newClientId && newClientId !== oldClientId) {
+    console.log('🔄 Client ID changed, reconnecting centralized WebSocket...')
+    queueStore.initWebSocket(newClientId)
+  }
+})
+
 // Get klinik list for dropdown
 const klinikOptions = computed(() => {
   const klinikList = masterStore.klinikList.map(
@@ -2719,22 +2714,30 @@ onMounted(async () => {
       cameraChecking.value = false;
     }
 
+    // Wait for stores to be hydrated and ready
+    await nextTick();
+
     // Load history untuk ditampilkan di sidebar
     loadHistory();
 
-    // Check and reset daily at 10 PM
-    checkAndResetDaily();
+    // Initial fetch/sync
+    await fetchAllData();
 
-    // Initialize WebSocket
-    wsInstance = initWebSocket();
-    if (wsInstance) {
-      wsInstance.connect();
-    }
+    // Polling every 10 seconds to keep data synchronized as fallback
+    const pollingInterval = setInterval(fetchAllData, 10000);
+
+    // Initialize WebSocket (Centralized)
+    queueStore.initWebSocket(checkInClientId.value);
 
     // Set interval to check every minute for reset time
-    setInterval(() => {
+    const resetCheckInterval = setInterval(() => {
       checkAndResetDaily();
     }, 60000); // Check every minute
+
+    onUnmounted(() => {
+      clearInterval(pollingInterval);
+      clearInterval(resetCheckInterval);
+    });
   } else {
     hasCamera.value = false;
     cameraChecking.value = false;
@@ -2767,10 +2770,8 @@ onUnmounted(async () => {
     autoCloseTimer = null;
   }
 
-  // Disconnect WebSocket
-  if (wsInstance) {
-    wsInstance.disconnect();
-  }
+  // WebSocket is now global, we might not want to disconnect here if other tabs use it.
+  // if (wsInstance) wsInstance.disconnect(); // Old logic
 
   // Reset state
   isScanning.value = false;
diff --git a/pages/clear-session.vue b/pages/clear-session.vue
new file mode 100644
index 0000000..6cf5440
--- /dev/null
+++ b/pages/clear-session.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+// Simple page to clear session and redirect to Keycloak logout
+const router = useRouter();
+
+onMounted(async () => {
+  try {
+    console.log('🧹 Clearing session...');
+    
+    const response = await $fetch('/api/auth/clear-session', {
+      method: 'POST'
+    });
+    
+    console.log('✅ Session cleared, redirecting to Keycloak logout...');
+    
+    // Redirect to Keycloak logout URL
+    if (response.logoutUrl) {
+      window.location.href = response.logoutUrl;
+    } else {
+      // Fallback to login page
+      router.push('/LoginPage?logout=success');
+    }
+  } catch (error) {
+    console.error('❌ Error clearing session:', error);
+    // On error, just go to login page
+    router.push('/LoginPage?error=logout_failed');
+  }
+});
+</script>
+
+<template>
+  <div class="flex items-center justify-center min-h-screen">
+    <div class="text-center">
+      <v-progress-circular indeterminate color="primary" size="64"></v-progress-circular>
+      <p class="mt-4 text-lg">Clearing session and logging out...</p>
+    </div>
+  </div>
+</template>
diff --git a/pages/index.vue b/pages/index.vue
index af75733..6e4069b 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,16 +1,15 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, computed } from "vue";
 
 definePageMeta({
-  middleware:['auth']
-})
+  middleware: ["auth"],
+});
 
-// Define a type for the data structure you now return from the API
 interface SessionData {
   user: {
     name: string;
     email: string;
-    // ... add other user fields
+    roles?: string | string[];
   };
   status: string;
   createdAt: number;
@@ -27,36 +26,106 @@ const sessionData = ref<SessionData | null>(null);
 const loading = ref(true);
 const authError = ref<any>(null);
 
-
-// Computeds for easy display
 const sessionExpiresDate = computed(() => {
-    if (!sessionData.value?.expiresAt) return 'N/A';
-    return new Date(sessionData.value.expiresAt).toLocaleString();
+  if (!sessionData.value?.expiresAt) return "N/A";
+  return new Date(sessionData.value.expiresAt).toLocaleString("id-ID");
 });
 
 const sessionCreatedDate = computed(() => {
-    if (!sessionData.value?.createdAt) return 'N/A';
-    return new Date(sessionData.value.createdAt).toLocaleString();
+  if (!sessionData.value?.createdAt) return "N/A";
+  return new Date(sessionData.value.createdAt).toLocaleString("id-ID");
 });
 
-const currentDateTime = computed(() => new Date().toLocaleString());
+const remainingTime = computed(() => {
+  if (!sessionData.value?.expiresAt) return "N/A";
+  const remaining = sessionData.value.expiresAt - Date.now();
+  if (remaining <= 0) return "Expired";
+
+  const hours = Math.floor(remaining / (1000 * 60 * 60));
+  const minutes = Math.floor((remaining % (1000 * 60 * 60)) / (1000 * 60));
+  const seconds = Math.floor((remaining % (1000 * 60)) / 1000);
+
+  return `${hours}h ${minutes}m ${seconds}s`;
+});
+
+const tokenIssuedAt = computed(() => {
+  if (!sessionData.value?.accessTokenPayload?.iat) return "N/A";
+  return new Date(
+    sessionData.value.accessTokenPayload.iat * 1000,
+  ).toLocaleString("id-ID");
+});
+
+const tokenExpiresAt = computed(() => {
+  if (!sessionData.value?.accessTokenPayload?.exp) return "N/A";
+  return new Date(
+    sessionData.value.accessTokenPayload.exp * 1000,
+  ).toLocaleString("id-ID");
+});
 
-// Helper to display JSON data nicely
 const formatJson = (data: any) => {
   return JSON.stringify(data, null, 2);
 };
 
+const copyToClipboard = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text);
+    alert("Berhasil disalin ke clipboard!");
+  } catch (err) {
+    console.error("Gagal menyalin: ", err);
+  }
+};
+
+const expandedSections = ref<Record<string, boolean>>({
+  idToken: false,
+  accessToken: false,
+  refreshToken: false,
+});
+
+// External API Validation State
+const externalValidationLoading = ref(false);
+const externalValidationResult = ref<any>(null);
+const externalValidationError = ref<string | null>(null);
+
+const testTokenValidation = async () => {
+  try {
+    externalValidationLoading.value = true;
+    externalValidationError.value = null;
+    externalValidationResult.value = null;
+    
+    console.log("📡 Testing token validation with external API proxy...");
+    
+    const response = await $fetch<any>("/api/external/validate-token", {
+      method: "POST",
+    });
+    
+    externalValidationResult.value = response;
+    
+    if (!response.success) {
+      externalValidationError.value = response.error || "Validation failed";
+    }
+    
+    console.log("✅ Validation test completed:", response);
+  } catch (e: any) {
+    console.error("❌ Validation test failed:", e);
+    externalValidationError.value = e.data?.message || e.message || "Request failed";
+  } finally {
+    externalValidationLoading.value = false;
+  }
+};
+
+const toggleSection = (section: string) => {
+  expandedSections.value[section] = !expandedSections.value[section];
+};
+
 onMounted(async () => {
   try {
-    // Fetch the enhanced session data from your API
-    const data = await $fetch<SessionData>('/api/auth/session');
+    const data = await $fetch<SessionData>("/api/auth/session");
     sessionData.value = data;
     authError.value = null;
-
   } catch (e: any) {
-    console.error('Failed to fetch session data:', e);
-    // Store the error status for display
-    authError.value = e.data?.statusMessage || 'Session check failed. Please log in.';
+    console.error("Failed to fetch session data:", e);
+    authError.value =
+      e.data?.statusMessage || "Session check failed. Please log in.";
     sessionData.value = null;
   } finally {
     loading.value = false;
@@ -65,110 +134,332 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="container mx-auto p-4 max-w-4xl">
-    <h1 class="text-3xl font-bold mb-6 border-b pb-2">Complete Session Data Debug Page</h1>
+  <div class="dashboard-container">
+    <div class="dashboard-content">
+      <div class="dashboard-header">
+        <h1>Complete Session Data</h1>
+      </div>
 
-    <div v-if="loading" class="text-center p-8">
-      <p class="text-xl">Loading session data...</p>
-    </div>
-
-    <div v-else-if="authError" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative">
-      <strong class="font-bold">Authentication Error:</strong>
-      <span class="block sm:inline">{{ authError }}</span>
-      <p class="mt-2">If you expect to be logged in, the session may have expired or the cookie is missing/invalid.</p>
-      <NuxtLink to="/LoginPage" class="text-blue-600 hover:underline">Go to Login Page</NuxtLink>
-    </div>
-
-    <div v-else-if="sessionData">
-      
-      <section class="mb-6 border p-4 rounded-lg bg-gray-50">
-        <h2 class="text-xl font-semibold mb-3">Basic User Information</h2>
-        <div class="grid grid-cols-2 gap-2 text-sm">
-          <p><strong>Name:</strong> {{ sessionData.user.name }}</p>
-          <p><strong>Email:</strong> {{ sessionData.user.email }}</p>
-          <p><strong>Status:</strong> <span class="text-green-600 font-medium">{{ sessionData.status }}</span></p>
-          <p><strong>Session Expires:</strong> {{ sessionExpiresDate }}</p>
-          <p><strong>Created At:</strong> {{ sessionCreatedDate }}</p>
+      <div v-if="loading" class="dashboard-body">
+        <div class="text-center p-8">
+          <v-progress-circular
+            indeterminate
+            color="primary"
+            size="48"
+          ></v-progress-circular>
+          <p class="mt-4">Memuat data sesi...</p>
         </div>
-      </section>
+      </div>
 
-      <section class="mb-6 border p-4 rounded-lg">
-        <h2 class="text-xl font-semibold mb-3">Token Information (Raw)</h2>
-        <div class="space-y-3">
-          <details>
-            <summary class="cursor-pointer font-medium hover:text-blue-600">ID Token (session.idToken)</summary>
-            <pre class="whitespace-pre-wrap bg-gray-100 p-3 mt-1 text-xs">{{ sessionData.idToken }}</pre>
-          </details>
-          <details>
-            <summary class="cursor-pointer font-medium hover:text-blue-600">Access Token (session.accessToken)</summary>
-            <pre class="whitespace-pre-wrap bg-gray-100 p-3 mt-1 text-xs">{{ sessionData.accessToken }}</pre>
-          </details>
-          <details>
-            <summary class="cursor-pointer font-medium hover:text-blue-600">Refresh Token (session.refreshToken)</summary>
-            <pre class="whitespace-pre-wrap bg-gray-100 p-3 mt-1 text-xs">{{ sessionData.refreshToken || 'N/A' }}</pre>
-          </details>
+      <div v-else-if="authError" class="dashboard-body">
+        <div class="bg-red-50 border-l-4 border-red-500 p-4 rounded">
+          <h3 class="font-bold text-red-800">Authentication Error</h3>
+          <p class="text-red-700">{{ authError }}</p>
+          <NuxtLink
+            to="/LoginPage"
+            class="text-blue-600 hover:underline mt-2 inline-block"
+          >
+            Go to Login Page
+          </NuxtLink>
         </div>
-      </section>
+      </div>
 
-      <section class="mb-6 border p-4 rounded-lg">
-        <h2 class="text-xl font-semibold mb-3">Parsed Token Payloads</h2>
-        <div class="space-y-3">
-          <details open>
-            <summary class="cursor-pointer font-medium hover:text-blue-600">Access Token Payload</summary>
-            <pre class="whitespace-pre-wrap bg-gray-100 p-3 mt-1 text-xs">{{ formatJson(sessionData.accessTokenPayload) }}</pre>
-          </details>
-          <details>
-            <summary class="cursor-pointer font-medium hover:text-blue-600">ID Token Payload</summary>
-            <pre class="whitespace-pre-wrap bg-gray-100 p-3 mt-1 text-xs">{{ formatJson(sessionData.idTokenPayload) }}</pre>
-          </details>
+      <div v-else-if="sessionData" class="dashboard-body">
+        <!-- External API Validation Section -->
+        <div class="section mb-8 bg-blue-50 p-6 rounded-lg border border-blue-200">
+          <div class="flex justify-between items-center mb-4">
+            <h3 class="section-title mb-0 border-0 pb-0">External API Token Validation</h3>
+            <v-btn
+              color="primary"
+              :loading="externalValidationLoading"
+              prepend-icon="mdi-shield-check"
+              @click="testTokenValidation"
+            >
+              Test Token Validation
+            </v-btn>
+          </div>
+          
+          <p class="text-sm text-gray-600 mb-4">
+            Test and validate your current access token against the external API endpoint:
+            <code class="bg-blue-100 px-1 rounded text-blue-800">http://10.10.150.100:8084/api/v1/auth/me</code>
+          </p>
+          
+          <!-- Validation Status -->
+          <div v-if="externalValidationResult || externalValidationError" class="mt-4">
+            <v-alert
+              v-if="externalValidationResult?.success"
+              type="success"
+              variant="tonal"
+              title="Validation Successful"
+              class="mb-4"
+            >
+              The access token is valid and accepted by the external API.
+            </v-alert>
+            
+            <v-alert
+              v-else-if="externalValidationError"
+              type="error"
+              variant="tonal"
+              title="Validation Failed"
+              class="mb-4"
+            >
+              {{ externalValidationError }}
+              <div v-if="externalValidationResult?.details" class="mt-2 text-xs">
+                <strong>Details:</strong> {{ externalValidationResult.details }}
+              </div>
+            </v-alert>
+            
+            <!-- Result Data -->
+            <div v-if="externalValidationResult?.data" class="bg-white p-4 rounded border border-gray-200 mt-2">
+              <h4 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">External API Response:</h4>
+              <div class="payload-content text-xs">
+                {{ formatJson(externalValidationResult.data) }}
+              </div>
+            </div>
+          </div>
         </div>
-      </section>
-      
-      <section class="mb-6 border p-4 rounded-lg">
-        <h2 class="text-xl font-semibold mb-3">Complete Raw Session Data (Debug)</h2>
-        <details>
-          <summary class="cursor-pointer font-medium hover:text-blue-600">Full Session Object</summary>
-          <pre class="whitespace-pre-wrap bg-gray-100 p-3 mt-1 text-xs">{{ formatJson(sessionData.fullSessionObject) }}</pre>
-        </details>
-      </section>
 
-      <section class="mb-6 p-4 rounded-lg border-t-2 border-dashed">
-        <h2 class="text-xl font-semibold mb-3">Session Timeline</h2>
-        <ul class="space-y-2">
-          <li class="flex items-center space-x-2">
-            <span class="w-2 h-2 bg-black rounded-full"></span>
-            <p><strong>Session Created:</strong> {{ sessionCreatedDate }}</p>
-          </li>
-          <li class="flex items-center space-x-2">
-            <span class="w-2 h-2 bg-black rounded-full"></span>
-            <p><strong>Current Time:</strong> {{ currentDateTime }}</p>
-          </li>
-          <li class="flex items-center space-x-2">
-            <span class="w-2 h-2 bg-black rounded-full"></span>
-            <p><strong>Session Expires:</strong> {{ sessionExpiresDate }}</p>
-          </li>
-        </ul>
-      </section>
+        <!-- Basic User Information -->
+        <div class="section">
+          <h3 class="section-title">Basic User Information</h3>
+          <div class="info-grid">
+            <div class="label">Name:</div>
+            <div class="value">{{ sessionData.user.name }}</div>
+
+            <div class="label">Email:</div>
+            <div class="value">{{ sessionData.user.email }}</div>
+
+            <div class="label">Roles:</div>
+            <div class="value">
+              {{ sessionData.user.roles || "authenticated" }}
+            </div>
+
+            <div class="label">Status:</div>
+            <div class="value">{{ sessionData.status }}</div>
+          </div>
+        </div>
+
+        <!-- OAuth & Token Metadata -->
+        <div class="section">
+          <h3 class="section-title">OAuth & Token Metadata</h3>
+          <div class="info-grid">
+            <div class="label">Subject (User ID):</div>
+            <div class="value">
+              {{ sessionData.accessTokenPayload?.sub || "N/A" }}
+            </div>
+
+            <div class="label">Issuer:</div>
+            <div class="value">
+              {{ sessionData.accessTokenPayload?.iss || "N/A" }}
+            </div>
+
+            <div class="label">Audience:</div>
+            <div class="value">
+              {{ sessionData.accessTokenPayload?.aud || "N/A" }}
+            </div>
+
+            <div class="label">Token Issued At:</div>
+            <div class="value">{{ tokenIssuedAt }}</div>
+
+            <div class="label">Token Expires At:</div>
+            <div class="value">{{ tokenExpiresAt }}</div>
+          </div>
+        </div>
+
+        <!-- Token Information -->
+        <div class="section">
+          <h3 class="section-title">Token Information (after callbacks […])</h3>
+
+          <!-- ID Token -->
+          <div class="token-section">
+            <div class="token-header">
+              <h4>ID Token (session.id_token)</h4>
+              <button
+                class="copy-btn"
+                @click="copyToClipboard(sessionData.idToken)"
+              >
+                <v-icon size="small">mdi-content-copy</v-icon>
+                Copy
+              </button>
+            </div>
+            <div
+              class="token-content"
+              :class="{ collapsed: !expandedSections.idToken }"
+            >
+              {{ sessionData.idToken }}
+            </div>
+            <button class="toggle-btn" @click="toggleSection('idToken')">
+              {{ expandedSections.idToken ? "Show less" : "Show more" }}
+            </button>
+          </div>
+
+          <!-- Access Token -->
+          <div class="token-section">
+            <div class="token-header">
+              <h4>JWT Token (session.jwt)</h4>
+              <button
+                class="copy-btn"
+                @click="copyToClipboard(sessionData.accessToken)"
+              >
+                <v-icon size="small">mdi-content-copy</v-icon>
+                Copy
+              </button>
+            </div>
+            <div
+              class="token-content"
+              :class="{ collapsed: !expandedSections.accessToken }"
+            >
+              {{ sessionData.accessToken }}
+            </div>
+            <button class="toggle-btn" @click="toggleSection('accessToken')">
+              {{ expandedSections.accessToken ? "Show less" : "Show more" }}
+            </button>
+          </div>
+
+          <!-- Refresh Token -->
+          <div class="token-section" v-if="sessionData.refreshToken">
+            <div class="token-header">
+              <h4>Refresh Token (session.refresh_token)</h4>
+              <button
+                class="copy-btn"
+                @click="copyToClipboard(sessionData.refreshToken)"
+              >
+                <v-icon size="small">mdi-content-copy</v-icon>
+                Copy
+              </button>
+            </div>
+            <div
+              class="token-content"
+              :class="{ collapsed: !expandedSections.refreshToken }"
+            >
+              {{ sessionData.refreshToken }}
+            </div>
+            <button class="toggle-btn" @click="toggleSection('refreshToken')">
+              {{ expandedSections.refreshToken ? "Show less" : "Show more" }}
+            </button>
+          </div>
+        </div>
+
+        <!-- Session Timeline -->
+        <div class="section">
+          <h3 class="section-title">Session Timeline</h3>
+          <div class="info-grid">
+            <div class="label">Session Created:</div>
+            <div class="value">{{ sessionCreatedDate }}</div>
+
+            <div class="label">Session Expires:</div>
+            <div class="value">{{ sessionExpiresDate }}</div>
+
+            <div class="label">Remaining Time:</div>
+            <div class="value" style="font-weight: 600; color: #2563eb">
+              {{ remainingTime }}
+            </div>
+
+            <div class="label">Session Scope:</div>
+            <div class="value">
+              {{
+                sessionData.accessTokenPayload?.scope || "openid email profile"
+              }}
+            </div>
+          </div>
+        </div>
+
+        <!-- Full Session Object (Debug) -->
+        <div class="section payload-section">
+          <h3 class="section-title">Complete Raw Session Data (Debug)</h3>
+          <div class="token-header mb-2">
+            <h4>Full Session Object</h4>
+            <button
+              class="copy-btn"
+              @click="
+                copyToClipboard(formatJson(sessionData.fullSessionObject))
+              "
+            >
+              <v-icon size="small">mdi-content-copy</v-icon>
+              Copy
+            </button>
+          </div>
+          <div class="payload-content">
+            {{ formatJson(sessionData.fullSessionObject) }}
+          </div>
+        </div>
+
+        <!-- Access Token Payload -->>
+        <div class="section payload-section">
+          <h3 class="section-title">Access Token Payload (Parsed data […])</h3>
+          
+          <!-- Raw Access Token -->
+          <div class="token-header mb-2">
+            <h4>Raw Access Token (JWT)</h4>
+            <button
+              class="copy-btn"
+              @click="copyToClipboard(sessionData.accessToken)"
+            >
+              <v-icon size="small">mdi-content-copy</v-icon>
+              Copy
+            </button>
+          </div>
+          <div class="token-content mb-4" style="max-height: 100px;">
+            {{ sessionData.accessToken }}
+          </div>
+          
+          <!-- Parsed Payload -->
+          <div class="token-header mb-2">
+            <h4>Parsed Payload (Decoded from JWT)</h4>
+            <button
+              class="copy-btn"
+              @click="
+                copyToClipboard(formatJson(sessionData.accessTokenPayload))
+              "
+            >
+              <v-icon size="small">mdi-content-copy</v-icon>
+              Copy
+            </button>
+          </div>
+          <div class="payload-content">
+            {{ formatJson(sessionData.accessTokenPayload) }}
+          </div>
+        </div>
+
+        <!-- ID Token Payload -->
+        <div class="section payload-section">
+          <h3 class="section-title">ID Token Payload (Parsed data […])</h3>
+          
+          <!-- Raw ID Token -->
+          <div class="token-header mb-2">
+            <h4>Raw ID Token (JWT)</h4>
+            <button
+              class="copy-btn"
+              @click="copyToClipboard(sessionData.idToken)"
+            >
+              <v-icon size="small">mdi-content-copy</v-icon>
+              Copy
+            </button>
+          </div>
+          <div class="token-content mb-4" style="max-height: 100px;">
+            {{ sessionData.idToken }}
+          </div>
+          
+          <!-- Parsed Payload -->
+          <div class="token-header mb-2">
+            <h4>Parsed Payload (Decoded from JWT)</h4>
+            <button
+              class="copy-btn"
+              @click="copyToClipboard(formatJson(sessionData.idTokenPayload))"
+            >
+              <v-icon size="small">mdi-content-copy</v-icon>
+              Copy
+            </button>
+          </div>
+          <div class="payload-content">
+            {{ formatJson(sessionData.idTokenPayload) }}
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
-<style scoped>
-/* Optional: Basic styling for better visibility */
-summary {
-  list-style: none; /* Removes the default arrow */
-  display: block; /* Allows summary to span full width */
-  padding: 0.5rem 0;
-}
-/* Adds a custom arrow/chevron */
-summary::before {
-  content: "▶";
-  margin-right: 0.5em;
-  transition: transform 0.2s;
-  display: inline-block;
-}
-details[open] summary::before {
-  content: "▼";
-  /* transform: rotate(90deg); */
-}
-</style>
\ No newline at end of file
+<style scoped lang="scss">
+// Styles are in _dashboard.scss
+</style>
diff --git a/server/api/auth/clear-session.post.ts b/server/api/auth/clear-session.post.ts
new file mode 100644
index 0000000..5ce80e1
--- /dev/null
+++ b/server/api/auth/clear-session.post.ts
@@ -0,0 +1,77 @@
+// server/api/auth/clear-session.post.ts
+// Endpoint to forcefully clear session cookies and logout from Keycloak
+export default defineEventHandler(async (event) => {
+  try {
+    const config = useRuntimeConfig();
+    console.log('🧹 Clear session endpoint called');
+
+    // Get the current session to retrieve ID token for Keycloak logout
+    const sessionCookie = getCookie(event, 'user_session');
+    let idToken = null;
+
+    if (sessionCookie) {
+      try {
+        // Try to decode JWT-based session from cookie
+        const sessionJson = Buffer.from(sessionCookie, 'base64').toString('utf-8');
+        const session = JSON.parse(sessionJson);
+        idToken = session.idToken;
+        console.log('🔑 ID token found for Keycloak logout');
+      } catch (error) {
+        console.warn('⚠️ Could not parse session cookie (might be old format)');
+        // Continue anyway to clear cookies
+      }
+    }
+
+    // Clear all auth-related cookies
+    console.log('🧹 Clearing all session cookies...');
+    deleteCookie(event, 'user_session');
+    deleteCookie(event, 'oauth_state');
+    
+    // Also clear with different path variations
+    deleteCookie(event, 'user_session', { path: '/' });
+    deleteCookie(event, 'oauth_state', { path: '/' });
+
+    console.log('✅ Local session cleared successfully');
+
+    // Build Keycloak logout URL
+    const logoutPath = config.keycloakLogoutUri || `${config.keycloakIssuer}/protocol/openid-connect/logout`;
+    const logoutUrl = new URL(logoutPath);
+    
+    const postLogoutRedirectUri = config.postLogoutRedirectUri || `${config.public.authUrl}/LoginPage?logout=success`;
+    
+    logoutUrl.searchParams.set('client_id', config.keycloakClientId);
+    logoutUrl.searchParams.set('post_logout_redirect_uri', postLogoutRedirectUri);
+    
+    // Add ID token hint if available for proper Keycloak session termination
+    if (idToken) {
+      logoutUrl.searchParams.set('id_token_hint', idToken);
+      console.log('🔑 Added id_token_hint to Keycloak logout URL');
+    }
+    
+    console.log('🔗 Keycloak logout URL:', logoutUrl.toString());
+    
+    return {
+      success: true,
+      logoutUrl: logoutUrl.toString(),
+      message: 'Session cleared successfully. Redirecting to Keycloak logout...'
+    };
+
+  } catch (error: any) {
+    console.error('❌ Clear session error:', error);
+    
+    // Even on error, provide a basic logout URL
+    const config = useRuntimeConfig();
+    const postLogoutRedirectUri = config.postLogoutRedirectUri || `${config.public.authUrl}/LoginPage?logout=success`;
+    const logoutPath = config.keycloakLogoutUri || `${config.keycloakIssuer}/protocol/openid-connect/logout`;
+    const fallbackLogoutUrl = new URL(logoutPath);
+    fallbackLogoutUrl.searchParams.set('client_id', config.keycloakClientId);
+    fallbackLogoutUrl.searchParams.set('post_logout_redirect_uri', postLogoutRedirectUri);
+    
+    return {
+      success: false,
+      logoutUrl: fallbackLogoutUrl.toString(),
+      error: 'Error during session cleanup',
+      message: error.message
+    };
+  }
+});
diff --git a/server/api/auth/keycloak-callback.get.ts b/server/api/auth/keycloak-callback.get.ts
index c9afe11..f43bb94 100644
--- a/server/api/auth/keycloak-callback.get.ts
+++ b/server/api/auth/keycloak-callback.get.ts
@@ -1,242 +1,261 @@
 const config = useRuntimeConfig();
 // Define session duration (default to 1 hour if not specified in config)
-const SESSION_DURATION = (config.sessionDurationHours || 1) * 60 * 60 * 24; 
+const SESSION_DURATION = (config.sessionDurationHours || 1) * 60 * 60 * 24;
 
 // This is the MAIN SESSION duration. It controls how long a user stays logged in.
 // Current configuration: 1 hour (3600 seconds).
 
 export default defineEventHandler(async (event) => {
-    try {
-        const config = useRuntimeConfig();
-        const query = getQuery(event);
+  try {
+    const config = useRuntimeConfig();
+    const query = getQuery(event);
 
-        console.log('🔄 === KEYCLOAK CALLBACK STARTED ===');
-        console.log('📋 Query parameters:', query);
+    console.log("🔄 === KEYCLOAK CALLBACK STARTED ===");
+    console.log("📋 Query parameters:", query);
 
-        const code = query.code as string;
-        const state = query.state as string;
-        const error = query.error as string;
-        const storedState = getCookie(event, 'oauth_state');
+    const code = query.code as string;
+    const state = query.state as string;
+    const error = query.error as string;
+    const storedState = getCookie(event, "oauth_state");
 
-        if (error) {
-            console.error('❌ OAuth error from Keycloak:', error);
-            const errorDescription = query.error_description as string;
-            console.error('❌ Error description:', errorDescription);
+    if (error) {
+      console.error("❌ OAuth error from Keycloak:", error);
+      const errorDescription = query.error_description as string;
+      console.error("❌ Error description:", errorDescription);
 
-            const errorMsg = encodeURIComponent(`Keycloak error: ${error} - ${errorDescription || 'Please try again'}`);
-            return sendRedirect(event, `/LoginPage?error=${errorMsg}`);
-        }
-
-        console.log('📝 Code received:', !!code);
-        console.log('🎲 State from URL:', state);
-        console.log('🎲 State from cookie:', storedState);
-        console.log('🎲 State validation:', state === storedState);
-
-        if (!state || state !== storedState) {
-            console.error('❌ Invalid state parameter - possible CSRF attack');
-            console.error('   Expected:', storedState);
-            console.error('   Received:', state);
-
-            const errorMsg = encodeURIComponent('Security validation failed. Please try logging in again.');
-            return sendRedirect(event, `/LoginPage?error=${errorMsg}`);
-        }
-
-        deleteCookie(event, 'oauth_state');
-
-        if (!code) {
-            console.error('❌ Authorization code not provided');
-            const errorMsg = encodeURIComponent('No authorization code received from Keycloak.');
-            return sendRedirect(event, `/LoginPage?error=${errorMsg}`);
-        }
-
-        // Validate Keycloak configuration
-        if (!config.keycloakIssuer) {
-            console.error('❌ KEYCLOAK_ISSUER is not configured');
-            const errorMsg = encodeURIComponent('Keycloak server is not configured. Please contact administrator.');
-            return sendRedirect(event, `/LoginPage?error=${errorMsg}`);
-        }
-
-        if (!config.keycloakClientId || !config.keycloakClientSecret) {
-            console.error('❌ Keycloak client credentials are not configured');
-            const errorMsg = encodeURIComponent('Keycloak client credentials are missing. Please contact administrator.');
-            return sendRedirect(event, `/LoginPage?error=${errorMsg}`);
-        }
-
-        const tokenUrl = `${config.keycloakIssuer}/protocol/openid-connect/token`;
-        const redirectUri = `${config.public.authUrl}/api/auth/keycloak-callback`;
-
-        console.log('🔗 Token URL:', tokenUrl);
-        console.log('🔗 Redirect URI:', redirectUri);
-        console.log('🔑 Client ID:', config.keycloakClientId ? '***configured***' : 'MISSING');
-
-        const tokenPayload = new URLSearchParams({
-            grant_type: 'authorization_code',
-            client_id: config.keycloakClientId,
-            client_secret: config.keycloakClientSecret,
-            code,
-            redirect_uri: redirectUri,
-        });
-
-        let tokenResponse;
-        try {
-            // Create abort controller for timeout (compatible with all Node.js versions)
-            const controller = new AbortController();
-            const timeoutId = setTimeout(() => controller.abort(), 30000); // 30 second timeout
-
-            tokenResponse = await fetch(tokenUrl, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/x-www-form-urlencoded',
-                },
-                body: tokenPayload,
-                signal: controller.signal,
-            });
-
-            clearTimeout(timeoutId);
-        } catch (fetchError: any) {
-            console.error('❌ Fetch error details:');
-            console.error('   - Error type:', fetchError.name);
-            console.error('   - Error message:', fetchError.message);
-            console.error('   - Token URL attempted:', tokenUrl);
-            
-            // Provide more specific error messages
-            let errorMsg = 'Failed to connect to authentication server.';
-            if (fetchError.name === 'AbortError' || fetchError.message.includes('timeout')) {
-                errorMsg = 'Authentication server timeout. Please try again.';
-            } else if (fetchError.message.includes('ENOTFOUND') || fetchError.message.includes('getaddrinfo')) {
-                errorMsg = 'Cannot reach authentication server. Please check network connection.';
-            } else if (fetchError.message.includes('ECONNREFUSED')) {
-                errorMsg = 'Authentication server refused connection. Server may be down.';
-            } else if (fetchError.message.includes('certificate') || fetchError.message.includes('SSL')) {
-                errorMsg = 'SSL certificate error. Please contact administrator.';
-            }
-            
-            const encodedError = encodeURIComponent(errorMsg);
-            return sendRedirect(event, `/LoginPage?error=${encodedError}`);
-        }
-
-        if (!tokenResponse.ok) {
-            const errorText = await tokenResponse.text();
-            console.error('❌ Token exchange failed:', errorText);
-            const errorMsg = encodeURIComponent(`Token exchange failed: ${tokenResponse.status} - Please check Keycloak configuration`);
-            return sendRedirect(event, `/LoginPage?error=${errorMsg}`);
-        }
-
-        const tokens = await tokenResponse.json();
-        
-        let idTokenPayload;
-        try {
-            idTokenPayload = JSON.parse(
-                Buffer.from(tokens.id_token.split('.')[1], 'base64').toString()
-            );
-        } catch (decodeError) {
-            console.error('❌ Failed to decode ID token:', decodeError);
-            const errorMsg = encodeURIComponent('Invalid ID token format');
-            return sendRedirect(event, `/LoginPage?error=${errorMsg}`);
-        }
-        
-        // Store minimal session data in cookie to reduce size
-        // The ID token contains user info, so we can decode it when needed
-        const sessionData = {
-            // Store only essential user info (can be decoded from ID token if needed)
-            user: {
-                id: idTokenPayload.sub,
-                email: idTokenPayload.email,
-                name: idTokenPayload.name || idTokenPayload.preferred_username,
-                preferred_username: idTokenPayload.preferred_username,
-            },
-            // Store tokens - these are necessary for API calls
-            // Note: These JWT tokens are large, but necessary for authentication
-            accessToken: tokens.access_token,
-            idToken: tokens.id_token,
-            refreshToken: tokens.refresh_token,
-            // Session metadata
-            expiresAt: Date.now() + (SESSION_DURATION * 1000),
-            createdAt: Date.now(),
-        };
-
-        // Determine if we should use secure cookies
-        // For localhost, always use secure: false
-        const isSecure = process.env.NODE_ENV === 'production' && 
-                         event.node.req.headers['x-forwarded-proto'] === 'https';
-
-        console.log('🔗 Setting session cookie with secure flag:', isSecure);
-        console.log('⏱️ Session duration:', SESSION_DURATION, 'seconds');
-        console.log('🌐 Request host:', event.node.req.headers.host);
-        console.log('🔒 Protocol:', event.node.req.headers['x-forwarded-proto'] || 'http');
-
-        // Set cookie with proper settings for localhost
-        // For localhost HTTP, we need secure: false and sameSite: 'lax'
-        // IMPORTANT: Ensure domain is not set for localhost (allows cookie to work)
-        const cookieOptions: any = {
-            httpOnly: true,
-            secure: isSecure, 
-            sameSite: 'lax' as const, 
-            maxAge: SESSION_DURATION,
-            path: '/',
-            // Explicitly don't set domain for localhost - this is important!
-            // Setting domain to 'localhost' can cause cookies to not work
-        };
-
-        // For localhost, don't set domain (allows cookie to work on localhost)
-        // Only set domain in production if needed
-        if (process.env.NODE_ENV === 'production' && !event.node.req.headers.host?.includes('localhost')) {
-            // Optionally set domain in production
-            // cookieOptions.domain = '.yourdomain.com';
-        }
-
-        // Store session in server-side store and use session ID in cookie
-        // This avoids cookie size limits (4KB)
-        const { createSession } = await import('~/server/utils/sessionStore');
-        const sessionId = createSession(sessionData);
-        
-        console.log('💾 Session stored server-side with ID:', sessionId.substring(0, 8) + '...');
-        console.log('📦 Session ID cookie size: ~64 bytes (much smaller!)');
-        
-        // Store only the session ID in the cookie (much smaller)
-        setCookie(event, 'user_session', sessionId, cookieOptions);
-        
-        console.log('✅ Session ID cookie set in response headers (will be available in next request)');
-
-        console.log('✅ Session cookie created successfully');
-        console.log('🍪 Cookie details:');
-        console.log('   - Path: /');
-        console.log('   - Secure:', isSecure);
-        console.log('   - SameSite: lax');
-        console.log('   - HttpOnly: true');
-        console.log('   - MaxAge:', SESSION_DURATION, 'seconds');
-        console.log('   - Host:', event.node.req.headers.host);
-        
-        // Auto-sync user data to database (first time login check)
-        // Pass session createdAt as loginTime to sync function
-        try {
-            const { syncUserFromTokens } = await import('~/server/utils/userSync');
-            const result = syncUserFromTokens(tokens.id_token, tokens.access_token, sessionData.createdAt);
-            console.log(`✅ User auto-sync on login: ${result.action} - ${result.message}`);
-        } catch (syncError: any) {
-            // Don't fail the login if sync fails, just log it
-            console.error('⚠️ Failed to auto-sync user on login:', syncError);
-        }
-        
-        // IMPORTANT: Ensure cookie is set before redirect
-        // The cookie should be in the Set-Cookie header of the redirect response
-        console.log('↪️ Redirecting to dashboard with cookie in response headers...');
-        
-        // Note: In H3/Nitro, setCookie automatically adds Set-Cookie header to response
-        // The cookie will be available in the browser after the redirect
-        // We can't verify it in the same request, but it should be set correctly
-        
-        // Use sendRedirect - it should include the Set-Cookie header
-        // The browser will receive the cookie and include it in the next request
-        return sendRedirect(event, '/dashboard?authenticated=true', 302);
-
-    } catch (error: any) {
-        console.error('❌ === CALLBACK ERROR ===');
-        console.error('❌ Error message:', error.message);
-        console.error('❌ Error stack:', error.stack);
-        console.error('❌ ==================');
-
-        const errorMsg = encodeURIComponent(`Authentication failed: ${error.message}`);
-        return sendRedirect(event, `/LoginPage?error=${errorMsg}`);
+      const errorMsg = encodeURIComponent(
+        `Keycloak error: ${error} - ${errorDescription || "Please try again"}`,
+      );
+      return sendRedirect(event, `/LoginPage?error=${errorMsg}`);
     }
-});
\ No newline at end of file
+
+    console.log("📝 Code received:", !!code);
+    console.log("🎲 State from URL:", state);
+    console.log("🎲 State from cookie:", storedState);
+    console.log("🎲 State validation:", state === storedState);
+
+    if (!state || state !== storedState) {
+      console.error("❌ Invalid state parameter - possible CSRF attack");
+      console.error("   Expected:", storedState);
+      console.error("   Received:", state);
+
+      const errorMsg = encodeURIComponent(
+        "Security validation failed. Please try logging in again.",
+      );
+      return sendRedirect(event, `/LoginPage?error=${errorMsg}`);
+    }
+
+    deleteCookie(event, "oauth_state");
+
+    if (!code) {
+      console.error("❌ Authorization code not provided");
+      const errorMsg = encodeURIComponent(
+        "No authorization code received from Keycloak.",
+      );
+      return sendRedirect(event, `/LoginPage?error=${errorMsg}`);
+    }
+
+    // Validate Keycloak configuration
+    if (!config.keycloakIssuer) {
+      console.error("❌ KEYCLOAK_ISSUER is not configured");
+      const errorMsg = encodeURIComponent(
+        "Keycloak server is not configured. Please contact administrator.",
+      );
+      return sendRedirect(event, `/LoginPage?error=${errorMsg}`);
+    }
+
+    if (!config.keycloakClientId || !config.keycloakClientSecret) {
+      console.error("❌ Keycloak client credentials are not configured");
+      const errorMsg = encodeURIComponent(
+        "Keycloak client credentials are missing. Please contact administrator.",
+      );
+      return sendRedirect(event, `/LoginPage?error=${errorMsg}`);
+    }
+
+    const tokenUrl = `${config.keycloakIssuer}/protocol/openid-connect/token`;
+    const redirectUri = `${config.public.authUrl}/api/auth/keycloak-callback`;
+
+    console.log("🔗 Token URL:", tokenUrl);
+    console.log("🔗 Redirect URI:", redirectUri);
+    console.log(
+      "🔑 Client ID:",
+      config.keycloakClientId ? "***configured***" : "MISSING",
+    );
+
+    const tokenPayload = new URLSearchParams({
+      grant_type: "authorization_code",
+      client_id: config.keycloakClientId,
+      client_secret: config.keycloakClientSecret,
+      code,
+      redirect_uri: redirectUri,
+    });
+
+    let tokenResponse;
+    try {
+      // Create abort controller for timeout (compatible with all Node.js versions)
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), 30000); // 30 second timeout
+
+      tokenResponse = await fetch(tokenUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded",
+        },
+        body: tokenPayload,
+        signal: controller.signal,
+      });
+
+      clearTimeout(timeoutId);
+    } catch (fetchError: any) {
+      console.error("❌ Fetch error details:");
+      console.error("   - Error type:", fetchError.name);
+      console.error("   - Error message:", fetchError.message);
+      console.error("   - Token URL attempted:", tokenUrl);
+
+      // Provide more specific error messages
+      let errorMsg = "Failed to connect to authentication server.";
+      if (
+        fetchError.name === "AbortError" ||
+        fetchError.message.includes("timeout")
+      ) {
+        errorMsg = "Authentication server timeout. Please try again.";
+      } else if (
+        fetchError.message.includes("ENOTFOUND") ||
+        fetchError.message.includes("getaddrinfo")
+      ) {
+        errorMsg =
+          "Cannot reach authentication server. Please check network connection.";
+      } else if (fetchError.message.includes("ECONNREFUSED")) {
+        errorMsg =
+          "Authentication server refused connection. Server may be down.";
+      } else if (
+        fetchError.message.includes("certificate") ||
+        fetchError.message.includes("SSL")
+      ) {
+        errorMsg = "SSL certificate error. Please contact administrator.";
+      }
+
+      const encodedError = encodeURIComponent(errorMsg);
+      return sendRedirect(event, `/LoginPage?error=${encodedError}`);
+    }
+
+    if (!tokenResponse.ok) {
+      const errorText = await tokenResponse.text();
+      console.error("❌ Token exchange failed:", errorText);
+      const errorMsg = encodeURIComponent(
+        `Token exchange failed: ${tokenResponse.status} - Please check Keycloak configuration`,
+      );
+      return sendRedirect(event, `/LoginPage?error=${errorMsg}`);
+    }
+
+    const tokens = await tokenResponse.json();
+
+    // Parse token payloads for immediate availability
+    let accessTokenPayload;
+    let idTokenPayloadFull;
+    try {
+      accessTokenPayload = JSON.parse(
+        Buffer.from(tokens.access_token.split(".")[1], "base64").toString(),
+      );
+      idTokenPayloadFull = JSON.parse(
+        Buffer.from(tokens.id_token.split(".")[1], "base64").toString(),
+      );
+    } catch (parseError) {
+      console.error("❌ Failed to parse token payloads:", parseError);
+      const errorMsg = encodeURIComponent("Invalid token format");
+      return sendRedirect(event, `/LoginPage?error=${errorMsg}`);
+    }
+
+    // Create session data
+    const sessionData = {
+      user: {
+        id: idTokenPayloadFull.sub,
+        email: idTokenPayloadFull.email,
+        name: idTokenPayloadFull.name || idTokenPayloadFull.preferred_username,
+        preferred_username: idTokenPayloadFull.preferred_username,
+      },
+      accessToken: tokens.access_token,
+      idToken: tokens.id_token,
+      refreshToken: tokens.refresh_token,
+      expiresAt: Date.now() + SESSION_DURATION * 1000,
+      createdAt: Date.now(),
+      scope: accessTokenPayload.scope || "openid email profile",
+      status: "authenticated",
+    };
+
+    // Store session in server-side store and get session ID
+    const { createSession } = await import('~/server/utils/sessionStore');
+    const sessionId = createSession(sessionData);
+
+    // Determine if we should use secure cookies
+    const isSecure =
+      process.env.NODE_ENV === "production" &&
+      event.node.req.headers["x-forwarded-proto"] === "https";
+
+    console.log("🔗 Setting session ID cookie");
+    console.log("⏱️ Session duration:", SESSION_DURATION, "seconds");
+
+    const cookieOptions: any = {
+      httpOnly: true,
+      secure: isSecure,
+      sameSite: "lax" as const,
+      maxAge: SESSION_DURATION,
+      path: "/",
+    };
+
+    // Store only session ID in cookie (small size, ~64 bytes)
+    setCookie(event, "user_session", sessionId, cookieOptions);
+
+    console.log("✅ Session ID cookie created successfully");
+    console.log("🍪 Cookie details:");
+    console.log("   - Name: user_session");
+    console.log("   - Size:", sessionId.length, "bytes");
+    console.log("   - Path: /");
+    console.log("   - Secure:", isSecure);
+    console.log("   - SameSite: lax");
+    console.log("   - HttpOnly: true");
+    console.log("   - MaxAge:", SESSION_DURATION, "seconds");
+    console.log("   - Host:", event.node.req.headers.host);
+
+    // Auto-sync user data to database (first time login check)
+    // Pass session createdAt as loginTime to sync function
+    try {
+      const { syncUserFromTokens } = await import("~/server/utils/userSync");
+      const result = syncUserFromTokens(
+        tokens.id_token,
+        tokens.access_token,
+        sessionData.createdAt,
+      );
+      console.log(
+        `✅ User auto-sync on login: ${result.action} - ${result.message}`,
+      );
+    } catch (syncError: any) {
+      // Don't fail the login if sync fails, just log it
+      console.error("⚠️ Failed to auto-sync user on login:", syncError);
+    }
+
+    // IMPORTANT: Ensure cookie is set before redirect
+    // The cookie should be in the Set-Cookie header of the redirect response
+    console.log(
+      "↪️ Redirecting to dashboard with cookie in response headers...",
+    );
+
+    // Note: In H3/Nitro, setCookie automatically adds Set-Cookie header to response
+    // The cookie will be available in the browser after the redirect
+    // We can't verify it in the same request, but it should be set correctly
+
+    // Use sendRedirect - it should include the Set-Cookie header
+    // The browser will receive the cookie and include it in the next request
+    return sendRedirect(event, "/dashboard?authenticated=true", 302);
+  } catch (error: any) {
+    console.error("❌ === CALLBACK ERROR ===");
+    console.error("❌ Error message:", error.message);
+    console.error("❌ Error stack:", error.stack);
+    console.error("❌ ==================");
+
+    const errorMsg = encodeURIComponent(
+      `Authentication failed: ${error.message}`,
+    );
+    return sendRedirect(event, `/LoginPage?error=${errorMsg}`);
+  }
+});
diff --git a/server/api/auth/keycloak-login.ts b/server/api/auth/keycloak-login.ts
index 3bf6661..24a53ad 100644
--- a/server/api/auth/keycloak-login.ts
+++ b/server/api/auth/keycloak-login.ts
@@ -7,14 +7,15 @@ export default defineEventHandler(async (event) => {
   
   // === STALE SESSION CLEANUP ===
   // Check for existing session and clean up if invalid/expired
-  const existingSessionId = getCookie(event, 'user_session')
+  const existingSessionCookie = getCookie(event, 'user_session')
   
-  if (existingSessionId) {
+  if (existingSessionCookie) {
     console.log('🔍 Existing session cookie found, validating...')
     
     try {
-      const { getSession, deleteSession } = await import('~/server/utils/sessionStore')
-      const session = getSession(existingSessionId)
+      // Decode JWT-based session from cookie
+      const sessionJson = Buffer.from(existingSessionCookie, 'base64').toString('utf-8');
+      const session = JSON.parse(sessionJson);
       
       if (session) {
         // Check if session is expired
@@ -22,22 +23,15 @@ export default defineEventHandler(async (event) => {
         
         if (isExpired) {
           console.log('🧹 Cleaning up expired session...')
-          deleteSession(existingSessionId)
           deleteCookie(event, 'user_session')
           deleteCookie(event, 'oauth_state')
           console.log('✅ Expired session cleared')
         } else {
           console.log('⚠️ Valid session exists, clearing to allow fresh login...')
-          deleteSession(existingSessionId)
           deleteCookie(event, 'user_session')
           deleteCookie(event, 'oauth_state')
           console.log('✅ Existing session cleared for fresh login')
         }
-      } else {
-        console.log('🧹 Session cookie exists but no session in store, clearing cookie...')
-        deleteCookie(event, 'user_session')
-        deleteCookie(event, 'oauth_state')
-        console.log('✅ Stale cookie cleared')
       }
     } catch (error) {
       console.warn('⚠️ Error during session cleanup:', error)
diff --git a/server/api/auth/logout.post.ts b/server/api/auth/logout.post.ts
index 8236903..ed8e6b7 100644
--- a/server/api/auth/logout.post.ts
+++ b/server/api/auth/logout.post.ts
@@ -4,22 +4,19 @@ export default defineEventHandler(async (event) => {
     const config = useRuntimeConfig();
     console.log('🚪 Logout handler called');
 
-    // Get the current session to retrieve tokens
-    const sessionId = getCookie(event, 'user_session');
+    // Get the current session to retrieve ID token for proper Keycloak logout
+    const sessionCookie = getCookie(event, 'user_session');
     let idToken = null;
 
-    if (sessionId) {
+    if (sessionCookie) {
       try {
-        const { getSession, deleteSession } = await import('~/server/utils/sessionStore');
-        const session = getSession(sessionId);
-        if (session) {
-          idToken = session.idToken;
-          console.log('🔑 ID token found in session:', !!idToken);
-          // Delete session from store
-          deleteSession(sessionId);
-        }
+        // Decode JWT-based session from cookie
+        const sessionJson = Buffer.from(sessionCookie, 'base64').toString('utf-8');
+        const session = JSON.parse(sessionJson);
+        idToken = session.idToken;
+        console.log('🔑 ID token found in session:', !!idToken);
       } catch (error) {
-        console.warn('⚠️ Could not retrieve session:', error);
+        console.warn('⚠️ Could not parse session cookie:', error);
       }
     } else {
       console.warn('⚠️ No session cookie found');
diff --git a/server/api/auth/session.get.ts b/server/api/auth/session.get.ts
index 19ddb3b..c2b0594 100644
--- a/server/api/auth/session.get.ts
+++ b/server/api/auth/session.get.ts
@@ -1,74 +1,73 @@
 // server/api/auth/session.get.ts
 import type { SessionResponse } from '~/types/auth'
 
-// Helper function to safely decode the JWT payload (Access Token or ID Token)
-const decodeTokenPayload = (token: string | undefined): any | null => {
-  if (!token) return null;
-  try {
-    // Tokens are base64 encoded and separated by '.'
-    const parts = token.split(".");
-    if (parts.length < 2) return null; // Not a valid JWT format
-
-    const payloadBase64 = parts[1];
-
-    // Decode from base64 and parse the JSON
-    // Note: Using Buffer.from is standard in Node.js server environments (like Nitro/H3)
-    return JSON.parse(Buffer.from(payloadBase64, "base64").toString());
-  } catch (e) {
-    console.error("❌ Failed to decode token payload:", e);
-    return null;
-  }
-};
-
-// --- START OF THE SINGLE EXPORT DEFAULT HANDLER ---
 export default defineEventHandler(async (event) => {
-  console.log("🔍 Session endpoint called");
+  console.log('🔍 Session endpoint called');
 
-  const sessionId = getCookie(event, "user_session");
-  console.log("🍪 Session cookie exists:", !!sessionId);
+  const sessionCookie = getCookie(event, 'user_session');
+  console.log('🍪 Session cookie exists:', !!sessionCookie);
 
-  if (!sessionId) {
-    console.log("❌ No session cookie found");
+  if (!sessionCookie) {
+    console.log('❌ No session cookie found');
     throw createError({
       statusCode: 401,
-      statusMessage: "No session cookie found",
+      statusMessage: 'No session cookie found',
     });
   }
 
   try {
-    // Get session from server-side store using session ID
+    // Get session from store using session ID
     const { getSession } = await import('~/server/utils/sessionStore');
-    const session = getSession(sessionId);
+    const session = getSession(sessionCookie);
     
     if (!session) {
-      console.log("❌ Session not found or expired");
-      deleteCookie(event, "user_session");
+      console.log('❌ Session not found in store or expired');
+      deleteCookie(event, 'user_session');
       throw createError({
         statusCode: 401,
-        statusMessage: "Session expired or invalid",
+        statusMessage: 'Session not found or expired',
       });
     }
     
-    console.log("📋 Session retrieved from store successfully");
+    console.log('📋 Session retrieved from store successfully');
+    
+    // Parse token payloads on-demand from tokens
+    let accessTokenPayload = null;
+    let idTokenPayload = null;
+    
+    try {
+      if (session.accessToken) {
+        const accessParts = session.accessToken.split('.');
+        if (accessParts.length >= 2) {
+          accessTokenPayload = JSON.parse(Buffer.from(accessParts[1], 'base64').toString());
+        }
+      }
+      
+      if (session.idToken) {
+        const idParts = session.idToken.split('.');
+        if (idParts.length >= 2) {
+          idTokenPayload = JSON.parse(Buffer.from(idParts[1], 'base64').toString());
+        }
+      }
+    } catch (parseError) {
+      console.warn('⚠️ Failed to parse token payloads:', parseError);
+    }
+    
 
     const isExpired = Date.now() > session.expiresAt;
-    console.log("   Is Expired:", isExpired);
+    console.log('   Is Expired:', isExpired);
 
-    // Check if the token has expired
+    // Check if the session has expired
     if (isExpired) {
-      console.log("⏰ Session has expired, clearing cookie");
-      deleteCookie(event, "user_session");
+      console.log('⏰ Session has expired, clearing cookie');
+      deleteCookie(event, 'user_session');
       throw createError({
         statusCode: 401,
-        statusMessage: "Session expired",
+        statusMessage: 'Session expired',
       });
     }
 
-    // Decode tokens and prepare the enhanced response data
-    const idTokenPayload = decodeTokenPayload(session.idToken);
-    const accessTokenPayload = decodeTokenPayload(session.accessToken);
-
-    // Final response object - ensure it matches SessionResponse interface
+    // Return the full session data (already includes parsed payloads)
     const sessionResponse: SessionResponse & { 
       idTokenPayload?: any
       accessTokenPayload?: any
@@ -76,37 +75,55 @@ export default defineEventHandler(async (event) => {
       status?: string
       remainingSeconds?: number
       idToken?: string
+      scope?: string
+      createdAt?: number
     } = {
       success: true,
       // Basic User Info
       user: session.user,
 
-      // Raw Tokens (optional in SessionResponse)
+      // Raw Tokens
       accessToken: session.accessToken,
       refreshToken: session.refreshToken,
+      idToken: session.idToken,
 
-      // Session Timestamps (optional in SessionResponse)
+      // Session Timestamps
       expiresAt: session.expiresAt,
+      createdAt: session.createdAt,
       remainingSeconds: Math.max(0, Math.floor((session.expiresAt - Date.now()) / 1000)),
 
-      // Additional debug fields (not in SessionResponse interface)
-      idToken: session.idToken,
+      // Parsed token payloads (parsed on-demand, not stored in cookie)
       idTokenPayload: idTokenPayload,
       accessTokenPayload: accessTokenPayload,
+      
+      // Full session for debugging
       fullSessionObject: session,
-      status: "authenticated",
+      
+      // OAuth metadata
+      scope: session.scope,
+      status: session.status || 'authenticated',
     };
 
-    console.log("✅ Session is valid, returning full session data");
+    console.log('✅ Session is valid, returning full session data');
     return sessionResponse;
-  } catch (parseError) {
-    console.error("❌ Failed to parse session cookie:", parseError);
-    // If JSON parsing fails or any other error occurs, the session is invalid
-    deleteCookie(event, "user_session");
+  } catch (parseError: any) {
+    console.error('❌ Failed to parse session cookie:', parseError);
+    
+    // Check if this is an old session ID format (not base64 JSON)
+    if (parseError.message?.includes('Unexpected token') || parseError.message?.includes('JSON')) {
+      console.log('🧹 Detected old session format, clearing cookie...');
+      deleteCookie(event, 'user_session');
+      throw createError({
+        statusCode: 401,
+        statusMessage: 'Old session format detected. Please login again.',
+      });
+    }
+    
+    // If parsing fails, the session is invalid
+    deleteCookie(event, 'user_session');
     throw createError({
       statusCode: 401,
-      statusMessage: "Invalid session data",
+      statusMessage: 'Invalid session data',
     });
   }
 });
-// --- END OF THE SINGLE EXPORT DEFAULT HANDLER ---
diff --git a/server/api/auth/validate-session.post.ts b/server/api/auth/validate-session.post.ts
index 7b759c1..2e28f4a 100644
--- a/server/api/auth/validate-session.post.ts
+++ b/server/api/auth/validate-session.post.ts
@@ -1,22 +1,23 @@
 // server/api/auth/validate-session.post.ts
 export default defineEventHandler(async (event) => {
   const config = useRuntimeConfig()
-  const sessionId = getCookie(event, 'user_session')
+  const sessionCookie = getCookie(event, 'user_session')
   
   console.log('🔍 Session validation endpoint called')
-  console.log('🍪 Session cookie exists:', !!sessionId)
+  console.log('🍪 Session cookie exists:', !!sessionCookie)
   
-  if (!sessionId) {
+  if (!sessionCookie) {
     console.log('❌ No session cookie found')
     return { valid: false, reason: 'no_session' }
   }
   
   try {
-    const { getSession, deleteSession } = await import('~/server/utils/sessionStore')
-    const session = getSession(sessionId)
+    // Decode JWT-based session from cookie
+    const sessionJson = Buffer.from(sessionCookie, 'base64').toString('utf-8');
+    const session = JSON.parse(sessionJson);
     
     if (!session) {
-      console.log('❌ Session not found in store')
+      console.log('❌ Session not found or invalid')
       deleteCookie(event, 'user_session')
       return { valid: false, reason: 'session_not_found' }
     }
@@ -24,7 +25,6 @@ export default defineEventHandler(async (event) => {
     // Check local expiry
     if (Date.now() > session.expiresAt) {
       console.log('⏰ Session has expired locally')
-      deleteSession(sessionId)
       deleteCookie(event, 'user_session')
       return { valid: false, reason: 'session_expired' }
     }
@@ -53,7 +53,6 @@ export default defineEventHandler(async (event) => {
       // If Keycloak returns 401, the session is invalid on their side
       if (keycloakError.status === 401 || keycloakError.statusCode === 401) {
         console.log('❌ Keycloak session has expired (401)')
-        deleteSession(sessionId)
         deleteCookie(event, 'user_session')
         return { valid: false, reason: 'keycloak_session_expired' }
       }
diff --git a/server/api/external/validate-token.post.ts b/server/api/external/validate-token.post.ts
new file mode 100644
index 0000000..700111e
--- /dev/null
+++ b/server/api/external/validate-token.post.ts
@@ -0,0 +1,77 @@
+import { defineEventHandler, createError } from 'h3';
+import { getSessionFromCookie } from '~/server/utils/sessionStore';
+
+export default defineEventHandler(async (event) => {
+  console.log('🌐 Proxy: External token validation requested');
+  
+  const config = useRuntimeConfig();
+  
+  try {
+    // 1. Get current session to retrieve access token
+    const session = await getSessionFromCookie(event);
+    
+    if (!session || !session.accessToken) {
+      console.log('❌ Proxy: No valid session or access token found');
+      throw createError({
+        statusCode: 401,
+        statusMessage: 'Unauthorized: No valid session found',
+      });
+    }
+    
+    const accessToken = session.accessToken;
+    
+    // Log token details for debugging audience and claims
+    try {
+      const payloadPart = accessToken.split('.')[1];
+      const payload = JSON.parse(Buffer.from(payloadPart, 'base64').toString());
+      console.log('🎫 Full Token Payload:', JSON.stringify(payload, null, 2));
+      console.log('🎫 Token Audience (aud):', payload.aud);
+    } catch (e) {
+      console.warn('⚠️ Proxy: Failed to parse token for logging');
+    }
+
+    const externalApiUrl = `${config.externalApiBaseUrl}/api/v1/auth/me`;
+    
+    console.log(`📡 Proxy: Calling external API: ${externalApiUrl}`);
+    
+    // 2. Call external API with Bearer token
+    // We use $fetch from ofetch (auto-imported in Nuxt/Nitro)
+    const response = await $fetch(externalApiUrl, {
+      method: 'GET',
+      headers: {
+        'Authorization': `Bearer ${accessToken}`,
+        'Accept': 'application/json',
+      },
+      timeout: config.externalApiTimeout || 10000,
+    });
+    
+    console.log('✅ Proxy: External API call successful');
+    
+    return {
+      success: true,
+      data: response,
+      timestamp: new Date().toISOString()
+    };
+    
+  } catch (error: any) {
+    console.error('❌ Proxy: External API call failed:', error.message);
+    
+    // Check if it's an HTTP error from the external API
+    const statusCode = error.response?.status || 500;
+    const statusText = error.response?.statusText || 'External API Error';
+    const errorData = error.response?._data || error.data || null;
+    
+    console.error(`   Status: ${statusCode} ${statusText}`);
+    if (errorData) {
+      console.error('   Error Data:', JSON.stringify(errorData));
+    }
+    
+    return {
+      success: false,
+      error: statusText,
+      statusCode: statusCode,
+      details: errorData || error.message,
+      timestamp: new Date().toISOString()
+    };
+  }
+});
diff --git a/server/utils/sessionStore.ts b/server/utils/sessionStore.ts
index 72bc92a..a1a3a85 100644
--- a/server/utils/sessionStore.ts
+++ b/server/utils/sessionStore.ts
@@ -1,63 +1,91 @@
 // server/utils/sessionStore.ts
-// Simple in-memory session store (for development)
-// In production, use Redis or a database
-
-import { getCookie } from 'h3'
-import { randomBytes } from 'crypto'
+// Lightweight in-memory session store with automatic cleanup
 
 interface SessionData {
-    user: any;
-    accessToken: string;
-    idToken: string;
-    refreshToken: string;
-    expiresAt: number;
-    createdAt: number;
+  user: any;
+  accessToken: string;
+  idToken: string;
+  refreshToken: string;
+  expiresAt: number;
+  createdAt: number;
+  scope?: string;
+  status?: string;
 }
 
+// In-memory session storage
 const sessions = new Map<string, SessionData>();
 
-// Clean up expired sessions every 5 minutes
+// Cleanup expired sessions every 5 minutes
 setInterval(() => {
-    const now = Date.now();
-    for (const [sessionId, session] of sessions.entries()) {
-        if (session.expiresAt < now) {
-            sessions.delete(sessionId);
-        }
+  const now = Date.now();
+  let cleanedCount = 0;
+  
+  for (const [sessionId, session] of sessions.entries()) {
+    if (session.expiresAt < now) {
+      sessions.delete(sessionId);
+      cleanedCount++;
     }
-}, 5 * 60 * 1000);
+  }
+  
+  if (cleanedCount > 0) {
+    console.log(`🧹 Cleaned up ${cleanedCount} expired sessions. Active sessions: ${sessions.size}`);
+  }
+}, 5 * 60 * 1000); // Every 5 minutes
 
 export function createSession(data: SessionData): string {
-    // Generate a secure random session ID
-    const sessionId = randomBytes(32).toString('hex');
-    sessions.set(sessionId, data);
-    return sessionId;
+  // Generate random session ID
+  const sessionId = Array.from({ length: 32 }, () => 
+    Math.floor(Math.random() * 16).toString(16)
+  ).join('');
+  
+  sessions.set(sessionId, data);
+  console.log(`✅ Session created: ${sessionId.substring(0, 8)}... (Total active: ${sessions.size})`);
+  
+  return sessionId;
 }
 
 export function getSession(sessionId: string): SessionData | null {
-    const session = sessions.get(sessionId);
-    if (!session) {
-        return null;
-    }
-    
-    // Check if expired
-    if (session.expiresAt < Date.now()) {
-        sessions.delete(sessionId);
-        return null;
-    }
-    
-    return session;
+  const session = sessions.get(sessionId);
+  
+  if (!session) {
+    return null;
+  }
+  
+  // Check if expired
+  if (session.expiresAt < Date.now()) {
+    sessions.delete(sessionId);
+    return null;
+  }
+  
+  return session;
 }
 
 export function deleteSession(sessionId: string): void {
-    sessions.delete(sessionId);
+  sessions.delete(sessionId);
+  console.log(`🗑️ Session deleted: ${sessionId.substring(0, 8)}... (Remaining: ${sessions.size})`);
 }
 
-// Helper function to get session from cookie (for use in API handlers)
+// Helper function to get session from cookie (for API handlers)
 export async function getSessionFromCookie(event: any): Promise<SessionData | null> {
-    const sessionId = getCookie(event, 'user_session');
-    if (!sessionId) {
-        return null;
-    }
-    return getSession(sessionId);
+  const { getCookie } = await import('h3');
+  const sessionId = getCookie(event, 'user_session');
+  
+  if (!sessionId) {
+    return null;
+  }
+  
+  return getSession(sessionId);
 }
 
+// Get session stats
+export function getSessionStats() {
+  return {
+    totalSessions: sessions.size,
+    sessions: Array.from(sessions.entries()).map(([id, session]) => ({
+      id: id.substring(0, 8) + '...',
+      user: session.user?.email || session.user?.name,
+      expiresAt: new Date(session.expiresAt).toISOString(),
+      isExpired: session.expiresAt < Date.now()
+    }))
+  };
+}
diff --git a/stores/queueStore.js b/stores/queueStore.js
index 90bf290..d296dd9 100644
--- a/stores/queueStore.js
+++ b/stores/queueStore.js
@@ -4,6 +4,7 @@ import { ref, computed, watch } from 'vue';
 import { useClinicStore } from './clinicStore';
 import { usePenunjangStore } from './penunjangStore';
 import { useLoketStore } from './loketStore';
+import { useWebSocket } from '@/composables/useWebSocket';
 
 export const useQueueStore = defineStore('queue', () => {
   const clinicStore = useClinicStore();
@@ -26,6 +27,77 @@ export const useQueueStore = defineStore('queue', () => {
   const lastUpdated = ref(Date.now());
   // synchronization guard (moved lower)
 
+  // ============================================
+  // WEBSOCKET INTEGRATION (CENTRALIZED)
+  // ============================================
+  const wsInstance = ref(null);
+  const isWsConnected = ref(false);
+  const wsClientId = ref(`client-${Math.random().toString(36).substring(7)}`);
+
+  /**
+   * Initialize Global WebSocket
+   */
+  const initWebSocket = (customClientId = null) => {
+    if (wsInstance.value && isWsConnected.value) {
+      console.log('🔌 [queueStore] WebSocket already connected.');
+      return;
+    }
+
+    if (customClientId) {
+      wsClientId.value = customClientId;
+    }
+
+    const config = useRuntimeConfig();
+    const wsBaseUrl = config.public?.wsBaseUrl || "ws://10.10.150.100:8084/api/v1/ws";
+
+    console.log(`🔌 [queueStore] Connecting to WebSocket: ${wsBaseUrl} as ${wsClientId.value}`);
+
+    wsInstance.value = useWebSocket({
+      url: wsBaseUrl,
+      clientId: wsClientId.value,
+      onOpen: () => {
+        console.log('✅ [queueStore] WebSocket connected');
+        isWsConnected.value = true;
+      },
+      onClose: () => {
+        console.log('❌ [queueStore] WebSocket disconnected');
+        isWsConnected.value = false;
+      },
+      onError: (err) => {
+        console.error('⚠️ [queueStore] WebSocket error:', err);
+        isWsConnected.value = false;
+      },
+      onMessage: (data) => {
+        console.log('📨 [queueStore] Global WS Message:', data);
+        
+        // TRIGGER STRATEGIC REFRESHES
+        // 1. Refetch patients for all active lokets in the store
+        Object.keys(apiPatientsPerLoket.value).forEach(loketId => {
+          fetchPatientsForLoket(loketId);
+        });
+
+        // 2. Refetch clinics to update quotas/availability
+        clinicStore.fetchRegulerClinics();
+        
+        // 3. Ensure base data is synced
+        ensureInitialData();
+      }
+    });
+
+    wsInstance.value.connect();
+  };
+
+  /**
+   * Disconnect Global WebSocket
+   */
+  const disconnectWebSocket = () => {
+    if (wsInstance.value) {
+      wsInstance.value.disconnect();
+      wsInstance.value = null;
+      isWsConnected.value = false;
+    }
+  };
+
   /**
    * Sync patient status to apiPatientsPerLoket for reactivity
    */
@@ -2485,6 +2557,9 @@ export const useQueueStore = defineStore('queue', () => {
     checkAndResetDaily,
     isTodayPatient,
     getResetThreshold,
+    initWebSocket,
+    disconnectWebSocket,
+    isWsConnected,
   };
 
 }, {