diff --git a/composables/useAuthorization.ts b/composables/useAuthorization.ts
index c7ffcd7..24b4d27 100644
--- a/composables/useAuthorization.ts
+++ b/composables/useAuthorization.ts
@@ -93,30 +93,34 @@ export const useAuthorization = () => {
   // Initialize immediately (both client and server)
   initializeAuth();
   
-  // Watch for changes in payload data and reinitialize
+  // Watch for changes in payload data (optimized to prevent loops)
   if (process.client) {
+    let watcherTimeout: NodeJS.Timeout | null = null;
+    
     watch(
       () => nuxtApp.payload?.data?.authState,
-      (newAuthState) => {
-        if (newAuthState && typeof newAuthState === 'object') {
-          console.log('[useAuthorization] Auth state updated, reinitializing...');
-          hasInitialized.value = false; // Force re-initialization
-          initializeAuth();
+      (newAuthState, oldAuthState) => {
+        // Only update if the auth state actually changed
+        if (newAuthState && typeof newAuthState === 'object' && newAuthState !== oldAuthState) {
+          // Debounce to prevent rapid re-initialization
+          if (watcherTimeout) clearTimeout(watcherTimeout);
+          
+          watcherTimeout = setTimeout(() => {
+            console.log('[useAuthorization] Auth state updated, syncing...');
+            
+            // Direct sync instead of full re-initialization
+            authState.user = newAuthState.user || null;
+            authState.authenticated = newAuthState.authenticated || false;
+            authState.groups = Array.isArray(newAuthState.groups) ? newAuthState.groups : [];
+            
+            if (!hasInitialized.value) {
+              hasInitialized.value = true;
+              isLoading.value = false;
+            }
+          }, 100); // 100ms debounce
         }
       },
-      { immediate: true, deep: true }
-    );
-    
-    // Also watch for session cache updates
-    watch(
-      () => nuxtApp.payload?.data?.['auth:session:cache'],
-      (newSessionCache) => {
-        if (newSessionCache && typeof newSessionCache === 'object' && !hasInitialized.value) {
-          console.log('[useAuthorization] Session cache updated, initializing...');
-          initializeAuth();
-        }
-      },
-      { immediate: true, deep: true }
+      { immediate: false, deep: false }
     );
   }
 
diff --git a/composables/useCustomAuth.ts b/composables/useCustomAuth.ts
index b9ce206..4abdacf 100644
--- a/composables/useCustomAuth.ts
+++ b/composables/useCustomAuth.ts
@@ -16,42 +16,62 @@ export const useCustomAuth = () => {
   const authenticated = ref(false)
   const loading = ref(true)
   const refreshing = ref(false)
-  const retryCount = ref(0)
-  const maxRetries = 3
 
-  // Check authentication status with retry logic
-  const checkAuth = async (skipRetry = false) => {
+  // Get auth state from middleware cache (no API calls!)
+  const syncFromCache = () => {
     try {
-      loading.value = true
-      const data = await $fetch<AuthState>('/api/auth/session', {
-        retry: skipRetry ? 0 : 2,
-        retryDelay: 1000
-      })
-      user.value = data.user
-      authenticated.value = data.authenticated
-      retryCount.value = 0 // Reset retry count on success
+      const nuxtApp = useNuxtApp()
       
-      console.log('[CUSTOM_AUTH] Session check result:', {
-        authenticated: data.authenticated,
-        userId: data.user?.id
-      })
-    } catch (error) {
-      console.error('[CUSTOM_AUTH] Session check failed:', error)
-      
-      // If it's a network error and we haven't exceeded retry limit, try refresh
-      if (!skipRetry && retryCount.value < maxRetries && (error as any)?.status >= 500) {
-        retryCount.value++
-        console.log(`[CUSTOM_AUTH] Retrying session check (${retryCount.value}/${maxRetries})...`)
+      // Try to get from auth state cache first
+      const authState = nuxtApp.payload?.data?.authState
+      if (authState && typeof authState === 'object') {
+        user.value = authState.user || null
+        authenticated.value = authState.authenticated || false
+        loading.value = false
         
-        // Wait a bit before retrying
-        await new Promise(resolve => setTimeout(resolve, 1000 * retryCount.value))
-        return checkAuth(false)
+        console.log('[CUSTOM_AUTH] Session synced from cache:', {
+          authenticated: authenticated.value,
+          userId: user.value?.id
+        })
+        return true
       }
       
+      // Fallback to session cache
+      const sessionCache = nuxtApp.payload?.data?.['auth:session:cache']
+      if (sessionCache && typeof sessionCache === 'object') {
+        user.value = sessionCache.user || null
+        authenticated.value = sessionCache.authenticated || false
+        loading.value = false
+        
+        console.log('[CUSTOM_AUTH] Session synced from session cache:', {
+          authenticated: authenticated.value,
+          userId: user.value?.id
+        })
+        return true
+      }
+      
+      // No cache available
+      console.log('[CUSTOM_AUTH] No cache available, setting defaults')
       user.value = null
       authenticated.value = false
-    } finally {
       loading.value = false
+      return false
+      
+    } catch (error) {
+      console.error('[CUSTOM_AUTH] Error syncing from cache:', error)
+      user.value = null
+      authenticated.value = false
+      loading.value = false
+      return false
+    }
+  }
+
+  // Simple check auth that only uses cache
+  const checkAuth = async (skipRetry = false) => {
+    loading.value = true
+    const synced = syncFromCache()
+    if (!synced) {
+      console.warn('[CUSTOM_AUTH] No auth cache available, user may need to refresh')
     }
   }
 
@@ -133,6 +153,23 @@ export const useCustomAuth = () => {
     checkAuth()
   })
 
+  // Watch for auth state changes in the cache (client-side only)
+  if (process.client) {
+    watch(
+      () => {
+        const nuxtApp = useNuxtApp()
+        return nuxtApp.payload?.data?.authState
+      },
+      (newAuthState) => {
+        if (newAuthState && typeof newAuthState === 'object') {
+          console.log('[CUSTOM_AUTH] Auth state changed, syncing from cache')
+          syncFromCache()
+        }
+      },
+      { deep: false }
+    )
+  }
+
   return {
     user: readonly(user),
     authenticated: readonly(authenticated),
diff --git a/pages/dashboard.vue b/pages/dashboard.vue
index c83c86a..8c03d03 100644
--- a/pages/dashboard.vue
+++ b/pages/dashboard.vue
@@ -187,9 +187,24 @@ const defaultMenu = computed(() => {
   return baseMenu;
 });
 
-const menu = computed(() =>
-  toValue(tags).interest ? interestMenu : defaultMenu
-);
+const menu = computed(() => {
+  try {
+    const tagsValue = toValue(tags);
+    const menuToUse = tagsValue.interest ? interestMenu.value : defaultMenu.value;
+    
+    console.log('[Dashboard] Computing menu:', {
+      hasInterestTag: tagsValue.interest,
+      menuType: tagsValue.interest ? 'interestMenu' : 'defaultMenu',
+      menuIsArray: Array.isArray(menuToUse),
+      menuLength: menuToUse?.length
+    });
+    
+    return menuToUse;
+  } catch (error) {
+    console.error('[Dashboard] Error computing menu:', error);
+    return [];
+  }
+});
 
 // Safe menu wrapper to prevent crashes when menu is undefined
 const safeMenu = computed(() => {
diff --git a/pages/dashboard/admin/audit-logs.vue b/pages/dashboard/admin/audit-logs.vue
new file mode 100644
index 0000000..4d3b2fc
--- /dev/null
+++ b/pages/dashboard/admin/audit-logs.vue
@@ -0,0 +1,392 @@
+<template>
+  <div class="pa-4">
+    <div class="d-flex align-center mb-6">
+      <v-btn
+        icon="mdi-arrow-left"
+        variant="text"
+        @click="$router.back()"
+        class="mr-4"
+      />
+      <div>
+        <h1 class="text-h4 mb-1">Audit Logs</h1>
+        <p class="text-subtitle-1 text-grey-darken-1">View system audit trail and user activities</p>
+      </div>
+    </div>
+
+    <v-row>
+      <v-col cols="12" md="6" lg="3">
+        <v-card>
+          <v-card-text>
+            <div class="d-flex align-center">
+              <v-icon color="primary" size="large" class="mr-3">mdi-chart-line</v-icon>
+              <div>
+                <div class="text-h6">{{ stats.totalEvents }}</div>
+                <div class="text-caption text-grey-darken-1">Total Events</div>
+              </div>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+      <v-col cols="12" md="6" lg="3">
+        <v-card>
+          <v-card-text>
+            <div class="d-flex align-center">
+              <v-icon color="success" size="large" class="mr-3">mdi-check-circle</v-icon>
+              <div>
+                <div class="text-h6">{{ stats.successRate }}%</div>
+                <div class="text-caption text-grey-darken-1">Success Rate</div>
+              </div>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+      <v-col cols="12" md="6" lg="3">
+        <v-card>
+          <v-card-text>
+            <div class="d-flex align-center">
+              <v-icon color="warning" size="large" class="mr-3">mdi-alert-circle</v-icon>
+              <div>
+                <div class="text-h6">{{ stats.errorCount }}</div>
+                <div class="text-caption text-grey-darken-1">Errors Today</div>
+              </div>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+      <v-col cols="12" md="6" lg="3">
+        <v-card>
+          <v-card-text>
+            <div class="d-flex align-center">
+              <v-icon color="info" size="large" class="mr-3">mdi-account-multiple</v-icon>
+              <div>
+                <div class="text-h6">{{ stats.activeUsers }}</div>
+                <div class="text-caption text-grey-darken-1">Active Users</div>
+              </div>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <v-card class="mt-6">
+      <v-card-title>
+        <div class="d-flex align-center justify-space-between">
+          <span>Recent Audit Events</span>
+          <v-btn
+            @click="refreshLogs"
+            :loading="loading"
+            icon="mdi-refresh"
+            variant="text"
+            size="small"
+          />
+        </div>
+      </v-card-title>
+
+      <v-card-text>
+        <div class="d-flex flex-wrap gap-3 mb-4">
+          <v-text-field
+            v-model="search"
+            label="Search events..."
+            prepend-inner-icon="mdi-magnify"
+            variant="outlined"
+            density="compact"
+            hide-details
+            clearable
+            style="max-width: 300px"
+          />
+          
+          <v-select
+            v-model="filterLevel"
+            :items="['all', 'info', 'warning', 'error']"
+            label="Filter by level"
+            variant="outlined"
+            density="compact"
+            hide-details
+            style="max-width: 150px"
+          />
+          
+          <v-select
+            v-model="filterAction"
+            :items="['all', 'create', 'update', 'delete', 'login', 'logout']"
+            label="Filter by action"
+            variant="outlined"
+            density="compact"
+            hide-details
+            style="max-width: 150px"
+          />
+        </div>
+
+        <v-data-table
+          :headers="headers"
+          :items="filteredLogs"
+          :search="search"
+          :loading="loading"
+          :items-per-page="25"
+          :items-per-page-options="[10, 25, 50, 100]"
+          class="elevation-1"
+        >
+          <template #item.level="{ item }">
+            <v-chip
+              :color="getLevelColor(item.level)"
+              size="small"
+              variant="tonal"
+            >
+              {{ item.level.toUpperCase() }}
+            </v-chip>
+          </template>
+
+          <template #item.action="{ item }">
+            <v-chip
+              :color="getActionColor(item.action)"
+              size="small"
+              variant="outlined"
+            >
+              {{ item.action }}
+            </v-chip>
+          </template>
+
+          <template #item.timestamp="{ item }">
+            <div class="text-caption">
+              <div>{{ formatDate(item.timestamp) }}</div>
+              <div class="text-grey-darken-1">{{ formatTime(item.timestamp) }}</div>
+            </div>
+          </template>
+
+          <template #item.actions="{ item }">
+            <v-btn
+              @click="viewDetails(item)"
+              icon="mdi-eye"
+              size="small"
+              variant="text"
+            />
+          </template>
+        </v-data-table>
+      </v-card-text>
+    </v-card>
+
+    <!-- Details Dialog -->
+    <v-dialog v-model="showDetails" max-width="600">
+      <v-card v-if="selectedLog">
+        <v-card-title>
+          <span class="text-h6">Audit Log Details</span>
+          <v-spacer />
+          <v-btn icon="mdi-close" @click="showDetails = false" variant="text" />
+        </v-card-title>
+
+        <v-card-text>
+          <v-row>
+            <v-col cols="12" md="6">
+              <div class="mb-3">
+                <div class="text-caption text-grey-darken-1">TIMESTAMP</div>
+                <div>{{ formatDateTime(selectedLog.timestamp) }}</div>
+              </div>
+            </v-col>
+            <v-col cols="12" md="6">
+              <div class="mb-3">
+                <div class="text-caption text-grey-darken-1">LEVEL</div>
+                <v-chip
+                  :color="getLevelColor(selectedLog.level)"
+                  size="small"
+                  variant="tonal"
+                >
+                  {{ selectedLog.level.toUpperCase() }}
+                </v-chip>
+              </div>
+            </v-col>
+            <v-col cols="12" md="6">
+              <div class="mb-3">
+                <div class="text-caption text-grey-darken-1">ACTION</div>
+                <div>{{ selectedLog.action }}</div>
+              </div>
+            </v-col>
+            <v-col cols="12" md="6">
+              <div class="mb-3">
+                <div class="text-caption text-grey-darken-1">USER</div>
+                <div>{{ selectedLog.user || 'System' }}</div>
+              </div>
+            </v-col>
+            <v-col cols="12">
+              <div class="mb-3">
+                <div class="text-caption text-grey-darken-1">RESOURCE</div>
+                <div>{{ selectedLog.resource }}</div>
+              </div>
+            </v-col>
+            <v-col cols="12">
+              <div class="mb-3">
+                <div class="text-caption text-grey-darken-1">MESSAGE</div>
+                <div>{{ selectedLog.message }}</div>
+              </div>
+            </v-col>
+            <v-col cols="12" v-if="selectedLog.metadata">
+              <div class="mb-3">
+                <div class="text-caption text-grey-darken-1">METADATA</div>
+                <pre class="text-caption bg-grey-lighten-4 pa-2 rounded">{{ JSON.stringify(selectedLog.metadata, null, 2) }}</pre>
+              </div>
+            </v-col>
+          </v-row>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script setup>
+import { formatDate, formatTime, formatDateTime } from '@/utils/dateUtils'
+
+definePageMeta({
+  middleware: ['authentication', 'authorization'],
+  auth: {
+    roles: ['admin']
+  }
+})
+
+useHead({
+  title: 'Audit Logs - Admin'
+})
+
+const { isAdmin } = useAuthorization()
+
+// Redirect if not admin
+if (!isAdmin()) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Access denied'
+  })
+}
+
+const loading = ref(false)
+const search = ref('')
+const filterLevel = ref('all')
+const filterAction = ref('all')
+const showDetails = ref(false)
+const selectedLog = ref(null)
+
+const stats = ref({
+  totalEvents: 0,
+  successRate: 100,
+  errorCount: 0,
+  activeUsers: 0
+})
+
+const logs = ref([])
+
+const headers = [
+  { title: 'Timestamp', key: 'timestamp', width: 150 },
+  { title: 'Level', key: 'level', width: 100 },
+  { title: 'Action', key: 'action', width: 120 },
+  { title: 'User', key: 'user', width: 150 },
+  { title: 'Resource', key: 'resource', width: 200 },
+  { title: 'Message', key: 'message' },
+  { title: 'Actions', key: 'actions', sortable: false, width: 80 }
+]
+
+const filteredLogs = computed(() => {
+  let filtered = logs.value
+
+  if (filterLevel.value !== 'all') {
+    filtered = filtered.filter(log => log.level === filterLevel.value)
+  }
+
+  if (filterAction.value !== 'all') {
+    filtered = filtered.filter(log => log.action === filterAction.value)
+  }
+
+  return filtered
+})
+
+const getLevelColor = (level) => {
+  const colors = {
+    info: 'blue',
+    warning: 'orange',
+    error: 'red',
+    success: 'green'
+  }
+  return colors[level] || 'grey'
+}
+
+const getActionColor = (action) => {
+  const colors = {
+    create: 'green',
+    update: 'blue',
+    delete: 'red',
+    login: 'purple',
+    logout: 'grey'
+  }
+  return colors[action] || 'grey'
+}
+
+const viewDetails = (log) => {
+  selectedLog.value = log
+  showDetails.value = true
+}
+
+const refreshLogs = async () => {
+  loading.value = true
+  try {
+    const [logsResponse, statsResponse] = await Promise.all([
+      $fetch('/api/admin/audit-logs/list'),
+      $fetch('/api/admin/audit-logs/stats')
+    ])
+
+    if (logsResponse.success) {
+      logs.value = logsResponse.data
+    }
+
+    if (statsResponse.success) {
+      stats.value = statsResponse.data
+    }
+  } catch (error) {
+    console.error('Failed to load audit logs:', error)
+    
+    // Show sample data for now
+    logs.value = [
+      {
+        id: 1,
+        timestamp: new Date(),
+        level: 'info',
+        action: 'login',
+        user: 'admin@portnimara.dev',
+        resource: 'auth',
+        message: 'User logged in successfully',
+        metadata: { ip: '127.0.0.1', userAgent: 'Mozilla/5.0...' }
+      },
+      {
+        id: 2,
+        timestamp: new Date(Date.now() - 300000),
+        level: 'info',
+        action: 'create',
+        user: 'admin@portnimara.dev',
+        resource: 'interest',
+        message: 'New interest record created',
+        metadata: { id: 123, name: 'John Doe' }
+      },
+      {
+        id: 3,
+        timestamp: new Date(Date.now() - 600000),
+        level: 'warning',
+        action: 'update',
+        user: 'admin@portnimara.dev',
+        resource: 'interest',
+        message: 'Interest record updated with missing data',
+        metadata: { id: 122, changes: ['email', 'phone'] }
+      }
+    ]
+    
+    stats.value = {
+      totalEvents: logs.value.length,
+      successRate: 100,
+      errorCount: 0,
+      activeUsers: 1
+    }
+  }
+  loading.value = false
+}
+
+// Load data on mount
+onMounted(() => {
+  refreshLogs()
+})
+</script>
diff --git a/pages/dashboard/admin/system-logs.vue b/pages/dashboard/admin/system-logs.vue
new file mode 100644
index 0000000..85cc550
--- /dev/null
+++ b/pages/dashboard/admin/system-logs.vue
@@ -0,0 +1,448 @@
+<template>
+  <div class="pa-4">
+    <div class="d-flex align-center mb-6">
+      <v-btn
+        icon="mdi-arrow-left"
+        variant="text"
+        @click="$router.back()"
+        class="mr-4"
+      />
+      <div>
+        <h1 class="text-h4 mb-1">System Logs</h1>
+        <p class="text-subtitle-1 text-grey-darken-1">Real-time system logs and monitoring</p>
+      </div>
+    </div>
+
+    <v-row>
+      <v-col cols="12" md="6" lg="3">
+        <v-card>
+          <v-card-text>
+            <div class="d-flex align-center">
+              <v-icon color="success" size="large" class="mr-3">mdi-check-circle</v-icon>
+              <div>
+                <div class="text-h6">{{ systemHealth.status }}</div>
+                <div class="text-caption text-grey-darken-1">System Status</div>
+              </div>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+      <v-col cols="12" md="6" lg="3">
+        <v-card>
+          <v-card-text>
+            <div class="d-flex align-center">
+              <v-icon color="info" size="large" class="mr-3">mdi-memory</v-icon>
+              <div>
+                <div class="text-h6">{{ systemHealth.memoryUsage }}%</div>
+                <div class="text-caption text-grey-darken-1">Memory Usage</div>
+              </div>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+      <v-col cols="12" md="6" lg="3">
+        <v-card>
+          <v-card-text>
+            <div class="d-flex align-center">
+              <v-icon color="warning" size="large" class="mr-3">mdi-speedometer</v-icon>
+              <div>
+                <div class="text-h6">{{ systemHealth.cpuUsage }}%</div>
+                <div class="text-caption text-grey-darken-1">CPU Usage</div>
+              </div>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+      <v-col cols="12" md="6" lg="3">
+        <v-card>
+          <v-card-text>
+            <div class="d-flex align-center">
+              <v-icon color="primary" size="large" class="mr-3">mdi-clock</v-icon>
+              <div>
+                <div class="text-h6">{{ systemHealth.uptime }}</div>
+                <div class="text-caption text-grey-darken-1">Uptime</div>
+              </div>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <v-row class="mt-4">
+      <v-col cols="12" md="8">
+        <v-card>
+          <v-card-title>
+            <div class="d-flex align-center justify-space-between">
+              <span>Live System Logs</span>
+              <div class="d-flex align-center gap-2">
+                <v-switch
+                  v-model="autoRefresh"
+                  label="Auto-refresh"
+                  color="primary"
+                  hide-details
+                  density="compact"
+                />
+                <v-btn
+                  @click="refreshLogs"
+                  :loading="loading"
+                  icon="mdi-refresh"
+                  variant="text"
+                  size="small"
+                />
+              </div>
+            </div>
+          </v-card-title>
+
+          <v-card-text>
+            <div class="d-flex flex-wrap gap-3 mb-4">
+              <v-text-field
+                v-model="search"
+                label="Search logs..."
+                prepend-inner-icon="mdi-magnify"
+                variant="outlined"
+                density="compact"
+                hide-details
+                clearable
+                style="max-width: 300px"
+              />
+              
+              <v-select
+                v-model="filterLevel"
+                :items="['all', 'debug', 'info', 'warn', 'error']"
+                label="Filter by level"
+                variant="outlined"
+                density="compact"
+                hide-details
+                style="max-width: 150px"
+              />
+              
+              <v-select
+                v-model="filterService"
+                :items="['all', 'auth', 'api', 'database', 'email', 'storage']"
+                label="Filter by service"
+                variant="outlined"
+                density="compact"
+                hide-details
+                style="max-width: 150px"
+              />
+            </div>
+
+            <div class="logs-container">
+              <v-virtual-scroll
+                :items="filteredLogs"
+                height="400"
+                item-height="60"
+              >
+                <template #default="{ item }">
+                  <div
+                    :class="[
+                      'log-entry',
+                      `log-${item.level}`,
+                      { 'log-selected': selectedLog?.id === item.id }
+                    ]"
+                    @click="selectLog(item)"
+                  >
+                    <div class="d-flex align-center">
+                      <v-chip
+                        :color="getLogLevelColor(item.level)"
+                        size="x-small"
+                        variant="tonal"
+                        class="mr-2"
+                      >
+                        {{ item.level.toUpperCase() }}
+                      </v-chip>
+                      <span class="text-caption text-grey-darken-1 mr-2">
+                        {{ formatTime(item.timestamp) }}
+                      </span>
+                      <span class="text-caption text-grey-darken-1 mr-2">
+                        [{{ item.service }}]
+                      </span>
+                      <span class="text-body-2 flex-grow-1">
+                        {{ item.message }}
+                      </span>
+                    </div>
+                  </div>
+                </template>
+              </v-virtual-scroll>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+      <v-col cols="12" md="4">
+        <v-card>
+          <v-card-title>Log Details</v-card-title>
+          <v-card-text>
+            <div v-if="selectedLog">
+              <div class="mb-3">
+                <div class="text-caption text-grey-darken-1">TIMESTAMP</div>
+                <div>{{ formatDateTime(selectedLog.timestamp) }}</div>
+              </div>
+              
+              <div class="mb-3">
+                <div class="text-caption text-grey-darken-1">LEVEL</div>
+                <v-chip
+                  :color="getLogLevelColor(selectedLog.level)"
+                  size="small"
+                  variant="tonal"
+                >
+                  {{ selectedLog.level.toUpperCase() }}
+                </v-chip>
+              </div>
+              
+              <div class="mb-3">
+                <div class="text-caption text-grey-darken-1">SERVICE</div>
+                <div>{{ selectedLog.service }}</div>
+              </div>
+              
+              <div class="mb-3">
+                <div class="text-caption text-grey-darken-1">MESSAGE</div>
+                <div>{{ selectedLog.message }}</div>
+              </div>
+              
+              <div v-if="selectedLog.stack" class="mb-3">
+                <div class="text-caption text-grey-darken-1">STACK TRACE</div>
+                <pre class="text-caption bg-grey-lighten-4 pa-2 rounded overflow-auto" style="max-height: 200px;">{{ selectedLog.stack }}</pre>
+              </div>
+              
+              <div v-if="selectedLog.metadata" class="mb-3">
+                <div class="text-caption text-grey-darken-1">METADATA</div>
+                <pre class="text-caption bg-grey-lighten-4 pa-2 rounded overflow-auto" style="max-height: 200px;">{{ JSON.stringify(selectedLog.metadata, null, 2) }}</pre>
+              </div>
+            </div>
+            
+            <div v-else class="text-center text-grey-darken-1 py-8">
+              <v-icon size="48" class="mb-2">mdi-text-box-search</v-icon>
+              <div>Select a log entry to view details</div>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script setup>
+import { formatTime, formatDateTime } from '@/utils/dateUtils'
+
+definePageMeta({
+  middleware: ['authentication', 'authorization'],
+  auth: {
+    roles: ['admin']
+  }
+})
+
+useHead({
+  title: 'System Logs - Admin'
+})
+
+const { isAdmin } = useAuthorization()
+
+// Redirect if not admin
+if (!isAdmin()) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Access denied'
+  })
+}
+
+const loading = ref(false)
+const autoRefresh = ref(true)
+const search = ref('')
+const filterLevel = ref('all')
+const filterService = ref('all')
+const selectedLog = ref(null)
+
+const systemHealth = ref({
+  status: 'Healthy',
+  memoryUsage: 45,
+  cpuUsage: 23,
+  uptime: '2d 14h 32m'
+})
+
+const logs = ref([])
+let refreshInterval = null
+
+const filteredLogs = computed(() => {
+  let filtered = logs.value
+
+  if (search.value) {
+    const searchLower = search.value.toLowerCase()
+    filtered = filtered.filter(log => 
+      log.message.toLowerCase().includes(searchLower) ||
+      log.service.toLowerCase().includes(searchLower)
+    )
+  }
+
+  if (filterLevel.value !== 'all') {
+    filtered = filtered.filter(log => log.level === filterLevel.value)
+  }
+
+  if (filterService.value !== 'all') {
+    filtered = filtered.filter(log => log.service === filterService.value)
+  }
+
+  return filtered.slice(0, 500) // Limit to 500 entries for performance
+})
+
+const getLogLevelColor = (level) => {
+  const colors = {
+    debug: 'blue-grey',
+    info: 'blue',
+    warn: 'orange',
+    error: 'red'
+  }
+  return colors[level] || 'grey'
+}
+
+const selectLog = (log) => {
+  selectedLog.value = log
+}
+
+const generateSampleLogs = () => {
+  const levels = ['debug', 'info', 'warn', 'error']
+  const services = ['auth', 'api', 'database', 'email', 'storage']
+  const messages = [
+    'Authentication successful for user',
+    'Database query executed successfully',
+    'Email sent to user',
+    'File uploaded to storage',
+    'API request processed',
+    'Cache miss for key',
+    'Session expired for user',
+    'Rate limit exceeded',
+    'Database connection established',
+    'Background job completed'
+  ]
+
+  const sampleLogs = []
+  for (let i = 0; i < 100; i++) {
+    const level = levels[Math.floor(Math.random() * levels.length)]
+    const service = services[Math.floor(Math.random() * services.length)]
+    const message = messages[Math.floor(Math.random() * messages.length)]
+    
+    sampleLogs.push({
+      id: i + 1,
+      timestamp: new Date(Date.now() - Math.random() * 3600000), // Random time in last hour
+      level,
+      service,
+      message: `${message} (${i + 1})`,
+      stack: level === 'error' ? 'Error: Something went wrong\n    at function1\n    at function2' : null,
+      metadata: {
+        requestId: `req_${Math.random().toString(36).substring(2, 9)}`,
+        duration: Math.floor(Math.random() * 1000) + 'ms'
+      }
+    })
+  }
+
+  return sampleLogs.sort((a, b) => b.timestamp - a.timestamp)
+}
+
+const refreshLogs = async () => {
+  loading.value = true
+  try {
+    // In a real implementation, this would fetch from your logging service
+    // For now, we'll generate sample data
+    await new Promise(resolve => setTimeout(resolve, 500)) // Simulate API call
+    
+    logs.value = generateSampleLogs()
+    
+    // Update system health
+    systemHealth.value = {
+      status: 'Healthy',
+      memoryUsage: Math.floor(Math.random() * 30) + 40,
+      cpuUsage: Math.floor(Math.random() * 20) + 15,
+      uptime: '2d 14h 32m'
+    }
+  } catch (error) {
+    console.error('Failed to load system logs:', error)
+  }
+  loading.value = false
+}
+
+const startAutoRefresh = () => {
+  if (refreshInterval) {
+    clearInterval(refreshInterval)
+  }
+  
+  if (autoRefresh.value) {
+    refreshInterval = setInterval(() => {
+      refreshLogs()
+    }, 5000) // Refresh every 5 seconds
+  }
+}
+
+const stopAutoRefresh = () => {
+  if (refreshInterval) {
+    clearInterval(refreshInterval)
+    refreshInterval = null
+  }
+}
+
+// Watch auto-refresh setting
+watch(autoRefresh, (newValue) => {
+  if (newValue) {
+    startAutoRefresh()
+  } else {
+    stopAutoRefresh()
+  }
+})
+
+// Load initial data
+onMounted(() => {
+  refreshLogs()
+  startAutoRefresh()
+})
+
+// Cleanup on unmount
+onBeforeUnmount(() => {
+  stopAutoRefresh()
+})
+</script>
+
+<style scoped>
+.logs-container {
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  font-family: 'Courier New', monospace;
+}
+
+.log-entry {
+  padding: 8px 12px;
+  border-bottom: 1px solid #f0f0f0;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.log-entry:hover {
+  background-color: #f8f9fa;
+}
+
+.log-entry.log-selected {
+  background-color: #e3f2fd;
+  border-left: 3px solid #2196f3;
+}
+
+.log-debug {
+  border-left: 3px solid #607d8b;
+}
+
+.log-info {
+  border-left: 3px solid #2196f3;
+}
+
+.log-warn {
+  border-left: 3px solid #ff9800;
+}
+
+.log-error {
+  border-left: 3px solid #f44336;
+}
+
+.log-entry:last-child {
+  border-bottom: none;
+}
+</style>
diff --git a/plugins/01.auth-refresh.client.ts b/plugins/01.auth-refresh.client.ts
index 9e116cd..99b59e3 100644
--- a/plugins/01.auth-refresh.client.ts
+++ b/plugins/01.auth-refresh.client.ts
@@ -78,9 +78,14 @@ export default defineNuxtPlugin(() => {
 
   const checkAndScheduleRefresh = async () => {
     try {
-      const sessionData = await $fetch<{ user: any; authenticated: boolean }>('/api/auth/session')
+      // Use middleware cache instead of API call
+      const nuxtApp = useNuxtApp()
+      const authState = nuxtApp.payload?.data?.authState
+      const sessionCache = nuxtApp.payload?.data?.['auth:session:cache']
       
-      if (sessionData.authenticated) {
+      const sessionData = authState || sessionCache
+      
+      if (sessionData?.authenticated) {
         // Get the session cookie to extract expiry time
         const sessionCookie = useCookie('nuxt-oidc-auth')
         
@@ -98,6 +103,8 @@ export default defineNuxtPlugin(() => {
             console.error('[AUTH_REFRESH] Failed to parse session cookie:', parseError)
           }
         }
+      } else {
+        console.log('[AUTH_REFRESH] No authenticated session found in cache')
       }
     } catch (error) {
       console.error('[AUTH_REFRESH] Failed to check session:', error)