diff --git a/components/auth/LoginForm.vue b/components/auth/LoginForm.vue
new file mode 100644
index 0000000..565497d
--- /dev/null
+++ b/components/auth/LoginForm.vue
@@ -0,0 +1,185 @@
+<template>
+  <div class="w-100 login-form-wrap">
+    <div class="d-flex align-center mb-10">
+      <img :src="Logoimg" alt="home" width="200" />
+    </div>
+
+    <h1 class="text-h3 font-weight-bold text-grey-darken-4 mb-2">Selamat Datang</h1>
+    <p class="text-body-1 text-grey mb-7">
+      Silakan masuk dengan akun yang telah terdaftar
+    </p>
+      <!-- Error Message -->
+        <v-alert v-if="errorMessage" type="error" closable class="mb-4" @click:close="errorMessage = ''">
+            {{ errorMessage }}
+        </v-alert>
+
+        <!-- Success Message -->
+        <v-alert v-if="successMessage" type="success" class="mb-4">
+            {{ successMessage }}
+        </v-alert>
+
+    <v-btn :loading="isLoading" :disabled="isLoading" block color="primary" size="large" rounded="pill" class="text-none mb-7 btn-login" @click="loginWithKeycloak">
+      <v-icon size="16" class="mr-2">mdi-key-variant</v-icon>
+      Masuk dengan Keycloak
+    </v-btn>
+
+    <div class="d-flex align-center mb-7">
+      <v-divider />
+      <div class="mx-3 text-caption text-medium-emphasis width-100">Atau</div>
+      <v-divider />
+    </div>
+
+    <v-form v-model="valid" @submit.prevent="login">
+      <label class="text-subtitle-2 text-grey-darken-1 mb-2 d-inline-block">Email </label>
+      <v-text-field
+        v-model="email"
+        placeholder="Masukkan email"
+        density="comfortable"
+        variant="outlined"
+        rounded="pill"
+        class="mb-5"
+        :rules="emailRules"
+      />
+
+      <div class="d-flex align-center justify-space-between mb-2">
+        <label class="text-subtitle-2 text-grey-darken-1">Password</label>
+      </div>
+      <v-text-field
+        v-model="password"
+        :type="showPassword ? 'text' : 'password'"
+        placeholder="Masukkan password"
+        density="comfortable"
+        variant="outlined"
+        rounded="pill"
+        class="mb-6"
+        :rules="passwordRules"
+        :append-inner-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
+        @click:append-inner="showPassword = !showPassword"
+      />
+      <v-btn 
+        block 
+        type="submit"
+        color="primary" 
+        size="large" 
+        rounded="pill" 
+        variant="tonal" 
+        class="text-none mb-8 btn-login" 
+        >
+        Masuk
+      </v-btn>
+    </v-form>
+
+    <p class="text-center text-body-2 text-medium-emphasis mb-0">
+      &copy; 2026 RSUD Dr. Saiful Anwar Provinsi Jawa Timur.
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import Logoimg from "/images/logos/logo-farmasi.svg";
+import { useValidation } from '~/composables/useValidation';
+import api from '~/utils/api';
+
+import { useSnackbarStore } from '~/store/snackbar';
+
+interface LoginResponse {
+  data : {
+    provider: string;
+    access_token: string;
+    refresh_token: string;
+    expires_in: number;
+    token_type: string;
+  }
+}
+
+const snackbarStore = useSnackbarStore();
+const { required } = useValidation();
+
+const email = ref("");
+const password = ref("");
+const valid = ref(false);
+const showPassword = ref(false);
+const isLoading = ref(false);
+const errorMessage = ref("");
+const successMessage = ref("");
+
+const emailRules = [
+    required,
+    (v : string) => /.+@.+\..+/.test(v) || 'Email tidak valid',
+];
+const passwordRules = [required];
+
+const login = async () => {
+  if (!valid.value) {
+    snackbarStore.showSnackbar('Password dan email harus diisi', 'error');
+    return;
+  }
+
+  isLoading.value = true;
+
+  try {
+    const response = await api.post<LoginResponse>('api/v1/auth/login', {
+      email: email.value,
+      password: password.value
+    });
+
+    const loginData = response.data.data;
+    console.log('Login response:', loginData);
+
+    if (!loginData?.access_token || !loginData?.refresh_token) {
+      throw new Error('Token login tidak valid');
+    }
+
+    await $fetch('/api/auth/sessionUserStore', {
+      method: 'POST',
+      body: {
+        accessToken: loginData.access_token,
+        refreshToken: loginData.refresh_token,
+      },
+    });
+
+    
+    window.location.href = "/apps/dashboard";
+  } catch (error: any) {
+    const loginError = error?.response?.data?.message || error?.message || 'Terjadi kesalahan saat login';
+    snackbarStore.showSnackbar(loginError, 'error');
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const loginWithKeycloak = async (): Promise<void> => {
+  isLoading.value = true;
+  errorMessage.value = '';
+  successMessage.value = '';
+
+  try {
+    
+    // Call API route to initiate Keycloak login process
+    const response = await $fetch<any>('/api/auth/keycloak-login', {
+      method: 'POST'
+    });
+
+    if (response?.success && response?.data?.authUrl) {
+      successMessage.value = 'Redirecting to Keycloak...';
+      
+      // Redirect the user to the Keycloak authorization URL
+      setTimeout(() => {
+        window.location.href = response.data!.authUrl;
+      }, 500);
+    } else {
+      throw new Error('Failed to get authorization URL');
+    }
+  } catch (error: any) {
+    console.error('Login error:', error);
+    // Display the error message
+    errorMessage.value = `Login failed: ${error.message || 'Please try again.'}`;
+  } finally {
+    // Only set isLoading back to false if no redirect is happening
+    if (!successMessage.value.includes('Redirecting')) {
+      isLoading.value = false;
+    }
+  }
+};
+</script>
diff --git a/components/layout/full/Main.vue b/components/layout/full/Main.vue
index b79beb4..84b4b0c 100644
--- a/components/layout/full/Main.vue
+++ b/components/layout/full/Main.vue
@@ -4,6 +4,8 @@ import { useDisplay } from "vuetify";
 import sidebarItems from "~/components/layout/full/vertical-sidebar/sidebarItem";
 import { Menu2Icon } from "vue-tabler-icons";
 import { useCustomizerStore } from "~/store/customizer";
+import AppSnackbar from '~/components/shared/AppSnackbar.vue';
+
 const sidebarMenu = shallowRef(sidebarItems);
 const customizer = useCustomizerStore();
 const { mdAndDown } = useDisplay();
@@ -46,19 +48,13 @@ watch(mdAndDown, (val) => {
         <LazyLayoutFullVerticalHeader v-if="!customizer.setHorizontalLayout" />
       </div>
 
-      <v-main class="ml-md-4">
-        <div class="rtl-lyt mb-3 hr-layout bg-containerBg">
-          <v-container
-            fluid
-            class="page-wrapper bg-background pt-md-8 rounded-xl"
-          >
-            <div>
-              <div class="">
-                <NuxtPage />
-              </div>
-            </div>
-          </v-container>
-        </div>
+      <v-main>
+        <v-container fluid class="page-wrapper">
+          <div :class="customizer.boxed ? 'maxWidth' : ''">
+            <RouterView />
+            <AppSnackbar />
+          </div>
+        </v-container>
       </v-main>
     </v-app>
   </v-locale-provider>
diff --git a/components/layout/full/vertical-header/ProfileDD.vue b/components/layout/full/vertical-header/ProfileDD.vue
index 24b7958..6a78c1e 100644
--- a/components/layout/full/vertical-header/ProfileDD.vue
+++ b/components/layout/full/vertical-header/ProfileDD.vue
@@ -1,105 +1,66 @@
 <!-- components/layout/ProfileDD.vue -->
 <script setup lang="ts">
 import { MailIcon } from "vue-tabler-icons";
-import { profileDD } from "~/_mockApis/headerData";
-import { PerfectScrollbar } from "vue3-perfect-scrollbar";
-import { useUserInfo } from "~/composables/useUserInfo";
-import { computed } from "vue";
+import { useAuth } from "~/composables/useAuth";
+import { computed, onMounted } from "vue";
 
-const userInfo = useUserInfo();
+const auth = useAuth();
+
+onMounted(async () => {
+  if (!auth.isLoggedIn.value) {
+    await auth.fetchUserSession();
+  }
+});
 
 // Enhanced logout with proper error handling
 const logout = async () => {
-  try {
-    // Use the updated logout method from useUserInfo that handles Keycloak logout and session clearing
-    await userInfo.logout({
-      reason: "idle",
-      confirmDialog: false // Show confirmation dialog
-    });
-  } catch (error) {
-    console.error("Logout from profile failed:", error);
-  }
+  await auth.logout();
 };
 
 // **TAMBAHAN: Full logout function dengan konfirmasi**
 const fullLogout = async () => {
-  try {
-    // Tampilkan konfirmasi sebelum full logout
-    const confirmed = confirm(
-      "Apakah Anda yakin ingin keluar dari semua sesi? Ini akan menghapus semua data lokal dan sesi Keycloak."
-    );
+  const confirmed = confirm(
+    "Apakah Anda yakin ingin keluar dari semua sesi? Ini akan menghapus semua data lokal dan sesi Keycloak."
+  );
 
-    if (!confirmed) return;
+  if (!confirmed) return;
 
-    console.log("Initiating full logout from ProfileDD...");
-
-    // Gunakan fullLogout dari useUserInfo composable
-    await userInfo.fullLogout();
-  } catch (error) {
-    console.error("Full logout from profile failed:", error);
-
-    // Fallback jika fullLogout gagal
-    try {
-      console.log("Attempting fallback logout...");
-      await userInfo.logout({
-        reason: "manual",
-        clearStorage: true
-      });
-    } catch (fallbackError) {
-      console.error("Fallback logout also failed:", fallbackError);
-
-      // Last resort - force redirect
-      if (process.client) {
-        localStorage.clear();
-        sessionStorage.clear();
-        window.location.href = "/auth/login?reason=force";
-      }
-    }
-  }
+  await auth.fullLogout();
 };
 
 // **TAMBAHAN: Logout dengan konfirmasi untuk UX yang lebih baik**
 const logoutWithConfirmation = async () => {
-  try {
-    const confirmed = confirm("Apakah Anda yakin ingin keluar?");
+  const confirmed = confirm("Apakah Anda yakin ingin keluar?");
 
-    if (!confirmed) return;
+  if (!confirmed) return;
 
-    await logout();
-  } catch (error) {
-    console.error("Logout with confirmation failed:", error);
-  }
+  await logout();
 };
 
 // Get user display info from session
 const getUserDisplayInfo = () => {
-  if (!userInfo.user.value && !userInfo.data.value?.user)
+  if (!auth.user.value)
     return {
       name: "Guest User",
       email: "guest@example.com",
       role: "Guest"
     };
 
-  const user = userInfo.user.value || userInfo.data.value?.user || {};
+  const user = auth.user.value || {};
   return {
-    name: user.name || user.given_name || user.preferred_username || "User",
+    name: user.name  || "User",
     email: user.email || "No email",
-    role: userInfo.userRoles.value[0] || "User"
+    role: auth.userRoles.value[0] || user.role || "User",
+    provider :user.auth_provider
   };
 };
 
 const displayInfo = computed(() => getUserDisplayInfo());
-
-// Computed properties for decodedToken and clientScopes
-// const decodedToken = computed(() => userInfo.decodedToken.value);
-// const clientScopes = computed(() => userInfo.clientScopes.value);
-
-// **TAMBAHAN: Computed property untuk menampilkan status session**
 const sessionInfo = computed(() => {
   return {
-    isAuthenticated: userInfo.isAuthenticated.value,
-    sessionExpires: userInfo.sessionExpires.value,
-    hasValidToken: !!userInfo.idToken.value
+    isAuthenticated: auth.isLoggedIn.value,
+    sessionExpires: auth.sessionData.value?.expiresAt || null,
+    hasValidToken: !!auth.sessionData.value?.accessToken
   };
 });
 </script>
@@ -127,10 +88,10 @@ const sessionInfo = computed(() => {
           </v-avatar>
           <div class="ml-3">
             <h6 class="text-h6 mb-n1">{{ displayInfo.name }}</h6>
-            <span class="text-subtitle-1 font-weight-regular textSecondary">
+            <!-- <span class="text-subtitle-1 font-weight-regular textSecondary">
               {{ displayInfo.role }}
-            </span>
-            <div class="d-flex align-center mt-1">
+            </span> -->
+            <div class="d-flex align-center mt-2">
               <MailIcon size="18" stroke-width="1.5" />
               <span
                 class="text-subtitle-1 font-weight-regular textSecondary ml-2"
@@ -151,46 +112,10 @@ const sessionInfo = computed(() => {
             </div>
           </div>
         </div>
-        <v-divider></v-divider>
       </div>
 
-      <PerfectScrollbar style="height: calc(100vh - 240px); max-height: 240px">
-        <v-list class="py-0 theme-list" lines="two">
-          <v-list-item
-            v-for="item in profileDD"
-            :key="item.title"
-            class="py-4 px-8 custom-text-primary"
-            :to="item.href"
-          >
-            <template v-slot:prepend>
-              <v-avatar
-                size="48"
-                color="lightprimary"
-                class="mr-3"
-                rounded="md"
-              >
-                <img
-                  :src="item.avatar"
-                  width="24"
-                  height="24"
-                  :alt="item.avatar"
-                />
-              </v-avatar>
-            </template>
-            <div>
-              <h6 class="text-subtitle-1 font-weight-bold mb-2 custom-title">
-                {{ item.title }}
-              </h6>
-            </div>
-            <p class="text-subtitle-1 font-weight-regular textSecondary">
-              {{ item.subtitle }}
-            </p>
-          </v-list-item>
-        </v-list>
-      </PerfectScrollbar>
-
       <!-- **DIPERBAIKI: Logout buttons section dengan multiple options** -->
-      <div class="pt-4 pb-6 px-8">
+      <div class="pt-0 pb-6 px-8">
         <!-- Regular Logout Button -->
         <v-btn
           color="primary"
@@ -205,6 +130,7 @@ const sessionInfo = computed(() => {
 
         <!-- **TAMBAHAN: Full Logout Button** -->
         <v-btn
+          v-if="displayInfo.provider === 'keycloak'"
           color="error"
           variant="outlined"
           block
@@ -214,13 +140,6 @@ const sessionInfo = computed(() => {
         >
           Full Logout
         </v-btn>
-
-        <!-- **TAMBAHAN: Quick info text** -->
-        <div class="text-center mt-2">
-          <span class="text-caption textSecondary">
-            Full logout akan menghapus semua sesi dan data lokal
-          </span>
-        </div>
       </div>
     </v-sheet>
   </v-menu>
diff --git a/components/layout/full/vertical-sidebar/sidebarItem.ts b/components/layout/full/vertical-sidebar/sidebarItem.ts
index e4f01a9..0350f09 100644
--- a/components/layout/full/vertical-sidebar/sidebarItem.ts
+++ b/components/layout/full/vertical-sidebar/sidebarItem.ts
@@ -214,17 +214,17 @@ const sidebarItem: menu[] = [
           {
               title: 'Banners',
               icon: 'gallery-wide-line-duotone',
-              to: '/widgets/banners'
+              to: '/template/widgets/banners'
           },
           {
               title: 'Cards',
               icon: 'layers-minimalistic-line-duotone',
-              to: '/widgets/cards'
+              to: '/template/widgets/cards'
           },
           {
               title: 'Charts',
               icon: 'chart-line-duotone',
-              to: '/widgets/charts'
+              to: '/template/widgets/charts'
           },
       ]
   },
@@ -236,67 +236,67 @@ const sidebarItem: menu[] = [
         {
             title: 'Alerts',
             icon: 'danger-triangle-line-duotone',
-            to: '/ui-components/alerts'
+            to: '/template/ui-components/alerts'
         },
         {
             title: 'Avatar',
             icon: 'user-circle-line-duotone',
-            to: '/ui-components/avatar'
+            to: '/template/ui-components/avatar'
         },
         {
             title: 'Buttons',
             icon: 'ghost-line-duotone',
-            to: '/ui-components/buttons'
+            to: '/template/ui-components/buttons'
         },
         {
             title: 'Cards',
             icon: 'layers-minimalistic-line-duotone',
-            to: '/ui-components/cards'
+            to: '/template/ui-components/cards'
         },
         {
             title: 'Chip',
             icon: 'tag-horizontal-line-duotone',
-            to: '/ui-components/chip'
+            to: '/template/ui-components/chip'
         },
         {
             title: 'Dialogs',
             icon: 'window-frame-line-duotone',
-            to: '/ui-components/dialogs'
+            to: '/template/ui-components/dialogs'
         },
         {
             title: 'Expansion Panel',
             icon: 'hamburger-menu-line-duotone',
-            to: '/ui-components/expansionPanel'
+            to: '/template/ui-components/expansionPanel'
         },
         {
             title: 'List',
             icon: 'list-line-duotone',
-            to: '/ui-components/list'
+            to: '/template/ui-components/list'
         },
         {
             title: 'Menus',
             icon: 'menu-dots-line-duotone',
-            to: '/ui-components/menus'
+            to: '/template/ui-components/menus'
         },
         {
             title: 'Ratting',
             icon: 'star-line-duotone',
-            to: '/ui-components/ratting'
+            to: '/template/ui-components/ratting'
         },
         {
             title: 'Tables',
             icon: 'tablet-line-duotone',
-            to: '/ui-components/tables'
+            to: '/template/ui-components/tables'
         },
         {
             title: 'Tabs',
             icon: 'notebook-line-duotone',
-            to: '/ui-components/tabs'
+            to: '/template/ui-components/tabs'
         },
         {
             title: 'Tooltip',
             icon: 'chat-round-dots-line-duotone',
-            to: '/ui-components/tooltip'
+            to: '/template/ui-components/tooltip'
         }
       ]
   },
@@ -307,12 +307,12 @@ const sidebarItem: menu[] = [
           {
               title: 'Shadow',
               icon: 'copy-line-duotone',
-              to: '/style-components/shadow'
+              to: '/template/style-components/shadow'
           },
           {
               title: 'Typography',
               icon: 'text-bold-circle-line-duotone',
-              to: '/style-components/typography'
+              to: '/template/style-components/typography'
           }
       ]
   },
@@ -324,37 +324,37 @@ const sidebarItem: menu[] = [
           {
               title: 'Overview',
               icon: 'widget-5-line-duotone',
-              to: '/shared-components'
+              to: '/template/shared-components'
           },
           {
               title: 'UiParentCard & UiChildCard',
               icon: 'layers-minimalistic-line-duotone',
-              to: '/shared-components/UiParentCard'
+              to: '/template/shared-components/UiParentCard'
           },
           {
               title: 'WidgetCard & WidgetCardv2',
               icon: 'chart-square-line-duotone',
-              to: '/shared-components/WidgetCards'
+              to: '/template/shared-components/WidgetCards'
           },
           {
               title: 'Card Components',
               icon: 'card-2-line-duotone',
-              to: '/shared-components/CardComponents'
+              to: '/template/shared-components/CardComponents'
           },
           {
               title: 'BaseBreadcrumb',
               icon: 'route-line-duotone',
-              to: '/shared-components/BaseBreadcrumb'
+              to: '/template/shared-components/BaseBreadcrumb'
           },
           {
               title: 'UiTextfieldPrimary',
               icon: 'text-field-line-duotone',
-              to: '/shared-components/UiTextfieldPrimary'
+              to: '/template/shared-components/UiTextfieldPrimary'
           },
           {
               title: 'AppBaseCard',
               icon: 'sidebar-minimalistic-line-duotone',
-              to: '/shared-components/AppBaseCard'
+              to: '/template/shared-components/AppBaseCard'
           },
       ]
   },
diff --git a/components/setting/pages/listPages.vue b/components/setting/pages/listPages.vue
new file mode 100644
index 0000000..ba53413
--- /dev/null
+++ b/components/setting/pages/listPages.vue
@@ -0,0 +1,2 @@
+<template>
+</template>
\ No newline at end of file
diff --git a/components/shared/AppSnackbar.vue b/components/shared/AppSnackbar.vue
new file mode 100644
index 0000000..dbdb8e1
--- /dev/null
+++ b/components/shared/AppSnackbar.vue
@@ -0,0 +1,21 @@
+<template>
+  <v-snackbar
+    v-model="snackbarStore.show"
+    :color="snackbarStore.color"
+    :timeout="snackbarStore.timeout"
+    location="bottom center"
+  >
+    {{ snackbarStore.text }}
+    <template v-slot:actions>
+      <v-btn color="white" variant="text" @click="snackbarStore.show = false">
+        Close
+      </v-btn>
+    </template>
+  </v-snackbar>
+</template>
+
+<script setup lang="ts">
+import { useSnackbarStore } from '~/store/snackbar';
+
+const snackbarStore = useSnackbarStore();
+</script>
diff --git a/components/shared/UiChildCard.vue b/components/shared/UiChildCard.vue
index a61b3e6..3271f12 100644
--- a/components/shared/UiChildCard.vue
+++ b/components/shared/UiChildCard.vue
@@ -5,11 +5,10 @@ const props = defineProps({
 </script>
 
 <template>
-    <v-card variant="outlined">
+    <v-card elevation="0" >
         <v-card-item class="py-4 px-6">
             <v-card-title class="text-h5 mb-0">{{ title }}</v-card-title>
         </v-card-item>
-        <v-divider />
         <v-card-text>
             <slot />
         </v-card-text>
diff --git a/composables/useAuth.ts b/composables/useAuth.ts
new file mode 100644
index 0000000..f3676d3
--- /dev/null
+++ b/composables/useAuth.ts
@@ -0,0 +1,89 @@
+// composables/useAuth.ts
+import { computed, ref } from 'vue';
+import type { SessionData as UserSession, LogoutResponse } from '~/types/auth';
+
+
+const sessionData = ref<UserSession | null>(null);
+const isLoggedIn = ref(false);
+const isLoading = ref(false);
+
+const clearLocalAuthStorage = () => {
+  if (!process.client) return;
+
+  localStorage.removeItem('accessToken');
+  localStorage.removeItem('refreshToken');
+  localStorage.removeItem('user-preferences');
+  localStorage.removeItem('app-state');
+  sessionStorage.clear();
+};
+
+export const useAuth = () => {
+  const fetchUserSession = async () => {
+    isLoading.value = true;
+
+    try {
+      const response = await $fetch<UserSession>('/api/auth/sessionUser', {
+        method: 'GET',
+      });
+
+      sessionData.value = response;
+      isLoggedIn.value = !!response;
+    } catch {
+      sessionData.value = null;
+      isLoggedIn.value = false;
+    } finally {
+      isLoading.value = false;
+    }
+  };
+
+  const logout = async (): Promise<void> => {
+    try {
+      await $fetch<LogoutResponse>('/api/auth/logout', {
+        method: 'POST',
+      });
+    } finally {
+      clearLocalAuthStorage();
+      sessionData.value = null;
+      isLoggedIn.value = false;
+      await navigateTo('/auth/login?logout=success');
+    }
+  };
+
+  const fullLogout = async (): Promise<void> => {
+    try {
+      const response = await $fetch<LogoutResponse>('/api/auth/logout', {
+        method: 'POST',
+      });
+
+      clearLocalAuthStorage();
+      sessionData.value = null;
+      isLoggedIn.value = false;
+
+      if (process.client && response?.success && response?.logoutUrl) {
+        window.location.href = response.logoutUrl;
+        return;
+      }
+
+      await navigateTo('/auth/login?logout=full');
+    } catch {
+      clearLocalAuthStorage();
+      sessionData.value = null;
+      isLoggedIn.value = false;
+      await navigateTo('/auth/login?logout=full');
+    }
+  };
+
+  const user = computed(() => sessionData.value?.user ?? null);
+  const userRoles = computed(() => sessionData.value?.user?.role ?? []);
+
+  return {
+    isLoggedIn,
+    isLoading,
+    sessionData,
+    user,
+    userRoles,
+    fetchUserSession,
+    logout,
+    fullLogout,
+  };
+};
diff --git a/composables/useAuthInfo.ts b/composables/useAuthInfo.ts
new file mode 100644
index 0000000..a34ea58
--- /dev/null
+++ b/composables/useAuthInfo.ts
@@ -0,0 +1,49 @@
+import { ref } from 'vue';
+import api from '~/utils/api';
+import type { AuthInfoResponse } from '~/types/auth';
+
+const authInfo = ref<AuthInfoResponse | null>(null);
+const isLoading = ref(false);
+const errorMessage = ref<string | null>(null);
+
+export const useAuthInfo = () => {
+  const fetchAuthInfo = async (accessToken: string) => {
+    if (!accessToken || !accessToken.trim()) {
+      throw new Error('accessToken is required');
+    }
+
+    isLoading.value = true;
+    errorMessage.value = null;
+
+    try {
+      const response = await api.get<AuthInfoResponse>('/api/v1/auth/info', {
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${accessToken}`,
+        },
+      });
+
+      authInfo.value = response.data;
+      return response.data;
+    } catch (error) {
+      authInfo.value = null;
+      errorMessage.value = error instanceof Error ? error.message : 'Failed to fetch auth info';
+      throw error;
+    } finally {
+      isLoading.value = false;
+    }
+  };
+
+  const clearAuthInfo = () => {
+    authInfo.value = null;
+    errorMessage.value = null;
+  };
+
+  return {
+    authInfo,
+    isLoading,
+    errorMessage,
+    fetchAuthInfo,
+    clearAuthInfo,
+  };
+};
diff --git a/middleware/auth.ts b/middleware/auth.ts
new file mode 100644
index 0000000..a47de17
--- /dev/null
+++ b/middleware/auth.ts
@@ -0,0 +1,24 @@
+// middleware/auth.ts
+import { useAuth } from '~/composables/useAuth';
+
+export default defineNuxtRouteMiddleware(async (to) => {
+  // This middleware should only run on the client-side after the initial server-side render.
+  if (process.server) {
+    return;
+  }
+
+  const { isLoggedIn, fetchUserSession } = useAuth();
+
+  // Initial check
+  if (!isLoggedIn.value) {
+    await fetchUserSession();
+  }
+
+  // List of public routes that don't require authentication
+  const publicRoutes = ['/auth/login', '/auth/register'];
+
+  // If the route is not public and the user is not logged in, redirect to login
+  if (!publicRoutes.includes(to.path) && !isLoggedIn.value) {
+    return navigateTo('/auth/login');
+  }
+});
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 23130e5..859c6c7 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -108,13 +108,15 @@ export default defineNuxtConfig({
   },
   runtimeConfig: {
     authSecret: process.env.AUTH_SECRET,
-    keycloakClientSecret: process.env.KEYCLOAK_CLIENT_SECRET,
-    keycloakClientId: process.env.KEYCLOAK_CLIENT_ID,
-    // Move keycloakIssuer to public to expose on client side
+    keycloakClientSecret: process.env.NUXT_KEYCLOAK_CLIENT_SECRET,
+    keycloakClientId: process.env.NUXT_KEYCLOAK_CLIENT_ID,
+    keycloakIssuer: process.env.NUXT_KEYCLOAK_ISSUER,
+    keycloakLogoutUri: process.env.NUXT_KEYCLOAK_LOGOUT_URI,
+    postLogoutRedirectUri: process.env.NUXT_POST_LOGOUT_REDIRECT_URI,
     public: {
-      authUrl: process.env.AUTH_ORIGIN || "http://meninjar.dev.rssa.id:3000",
-      keycloakIssuer:
-        process.env.KEYCLOAK_ISSUER || "https://auth.rssa.top/realms/sandbox"
+      baseUrl : process.env.NUXT_PUBLIC_BASE_URL,
+      authUrl: process.env.AUTH_ORIGIN,
+      postLogoutRedirectUri: process.env.NUXT_PUBLIC_POST_LOGOUT_REDIRECT_URI
     }
   },
   // auth: {
diff --git a/pages/apps/dashboard/index.vue b/pages/apps/dashboard/index.vue
index acc8741..f39ca62 100644
--- a/pages/apps/dashboard/index.vue
+++ b/pages/apps/dashboard/index.vue
@@ -6,9 +6,10 @@ import Totalincome from '@/components/dashboard/TotalIncome.vue';
 import RevenueProduct from '@/components/dashboard/RevenueProducts.vue';
 import DailyActivities from '@/components/dashboard/DailyActivities.vue';
 import BlogCards from '@/components/dashboard/BlogCards.vue';
-// definePageMeta({
-//   middleware: 'role',
-// });
+
+definePageMeta({
+  middleware: 'auth',
+});
 </script>
 
 <template>
diff --git a/pages/apps/setting/pages/index.vue b/pages/apps/setting/pages/index.vue
new file mode 100644
index 0000000..5a2513f
--- /dev/null
+++ b/pages/apps/setting/pages/index.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import api from '@/utils/api';
+import { Icon } from "@iconify/vue";
+
+
+interface RolePage {
+  id: number;
+  name: string;
+  icon: string;
+  url: string;
+  level: number;
+  sort: number;
+  active: boolean;
+  children?: RolePage[];
+}
+
+const pages = ref<RolePage[]>([]);
+const loading = ref(false);
+
+const fetchPages = async () => {
+  loading.value = true;
+  try {
+    const response = await api.get('/api/v1/roles/pages/tree');
+    pages.value = response.data?.data || [];
+    console.log('Pages loaded:', pages.value);
+  } catch (error) {
+    console.error('Error fetching pages:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const handleStatusChange = (page: RolePage) => {
+  console.log(`Page ${page.name} status changed to: ${page.active}`);
+  // Here you can add the API call to update the status on the server
+  // For example:
+  // api.put(`/api/v1/roles/pages/${page.id}`, { active: page.active })
+  //   .catch(error => console.error('Error updating status:', error));
+};
+
+onMounted(() => {
+  fetchPages();
+});
+</script>
+
+<template>
+  <div v-if="loading" class="text-center py-4">
+    <v-progress-circular indeterminate color="primary"></v-progress-circular>
+  </div>
+
+  <div v-else-if="pages.length === 0" class="text-center py-4">
+    <p class="text-muted">No pages found</p>
+  </div>
+
+  <div v-else>
+      <v-card v-for="page in pages" :key="page.id" class="mb-2" elevation="10">
+        <v-card-text class="px-4 pb-0 pt-4">
+          <div class="d-flex align-top">
+            <Icon :icon="'solar:' + page.icon" width="18" />
+            <div class="flex-grow-1 ms-2">
+              <h4 class="mb-1">{{ page.name }}</h4>
+              <p class="text-muted mb-0">{{ page.url }}</p>
+            </div>
+            <v-switch v-model="page.active" @change="handleStatusChange(page)"></v-switch>
+          </div>
+        </v-card-text>
+      </v-card>
+  </div>
+</template>
diff --git a/pages/auth/Login.vue b/pages/auth/Login.vue
index 26589a7..c694ba7 100644
--- a/pages/auth/Login.vue
+++ b/pages/auth/Login.vue
@@ -2,48 +2,7 @@
   <v-container fluid class="pa-0 fill-height login-page">
     <v-row no-gutters class="fill-height w-100">
       <v-col cols="12" md="6" class="d-flex align-center justify-center login-form-panel">
-        <div class="w-100 login-form-wrap">
-          <div class="d-flex align-center mb-10">
-            <img :src="Logoimg" alt="home" width="200" />
-          </div>
-
-          <h1 class="text-h3 font-weight-bold text-grey-darken-4 mb-2">Selamat Datang</h1>
-          <p class="text-body-1 text-grey mb-7">
-            Silakan masuk dengan akun yang telah terdaftar
-          </p>
-
-          <v-btn block color="primary" size="large" rounded="pill" class="text-none mb-7 btn-login"
-            @click="loginWithKeycloak">
-            <v-icon size="16" class="mr-2">mdi-key-variant</v-icon>
-            Masuk dengan Keycloak
-          </v-btn>
-
-          <div class="d-flex align-center mb-7">
-            <v-divider />
-            <div class="mx-3 text-caption text-medium-emphasis width-100">Atau</div>
-            <v-divider />
-          </div>
-
-          <v-form>
-            <label class="text-subtitle-2 text-grey-darken-1 mb-2 d-inline-block">Email </label>
-            <v-text-field v-model="email" placeholder="Masukkan email" density="comfortable" variant="outlined"
-              rounded="pill" hide-details class="mb-5" />
-
-            <div class="d-flex align-center justify-space-between mb-2">
-              <label class="text-subtitle-2 text-grey-darken-1">Password</label>
-            </div>
-            <v-text-field v-model="password" type="password" placeholder="Masukkan password" density="comfortable"
-              variant="outlined" rounded="pill" hide-details class="mb-6" />
-            <v-btn block color="primary" size="large" rounded="pill" variant="tonal" class="text-none mb-8 btn-login"
-              @click="loginWithKeycloak">
-              Masuk
-            </v-btn>
-          </v-form>
-
-          <p class="text-center text-body-2 text-medium-emphasis mb-0">
-            &copy; 2026 RSUD Dr. Saiful Anwar Provinsi Jawa Timur.
-          </p>
-        </div>
+        <auth-login-form />
       </v-col>
 
       <v-col cols="12" md="6" class="d-flex align-center justify-center px-8 px-md-12 right-panel bg-primary">
@@ -65,20 +24,12 @@
       </v-col>
     </v-row>
   </v-container>
+  <shared-app-snackbar />
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-import Logoimg from "/images/logos/logo-farmasi.svg";
 
 definePageMeta({
   layout: "blank"
 });
-
-const email = ref("");
-const password = ref("");
-
-const loginWithKeycloak = () => {
-  window.location.href = "/";
-};
 </script>
diff --git a/pages/index.vue b/pages/index.vue
index 340eaa3..f39ca62 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -6,6 +6,10 @@ import Totalincome from '@/components/dashboard/TotalIncome.vue';
 import RevenueProduct from '@/components/dashboard/RevenueProducts.vue';
 import DailyActivities from '@/components/dashboard/DailyActivities.vue';
 import BlogCards from '@/components/dashboard/BlogCards.vue';
+
+definePageMeta({
+  middleware: 'auth',
+});
 </script>
 
 <template>
diff --git a/pages/Icons.vue b/pages/template/Icons.vue
similarity index 100%
rename from pages/Icons.vue
rename to pages/template/Icons.vue
diff --git a/pages/Sample-Page.vue b/pages/template/Sample-Page.vue
similarity index 100%
rename from pages/Sample-Page.vue
rename to pages/template/Sample-Page.vue
diff --git a/pages/shared-components/AppBaseCard.vue b/pages/template/shared-components/AppBaseCard.vue
similarity index 100%
rename from pages/shared-components/AppBaseCard.vue
rename to pages/template/shared-components/AppBaseCard.vue
diff --git a/pages/shared-components/BaseBreadcrumb.vue b/pages/template/shared-components/BaseBreadcrumb.vue
similarity index 100%
rename from pages/shared-components/BaseBreadcrumb.vue
rename to pages/template/shared-components/BaseBreadcrumb.vue
diff --git a/pages/shared-components/CardComponents.vue b/pages/template/shared-components/CardComponents.vue
similarity index 100%
rename from pages/shared-components/CardComponents.vue
rename to pages/template/shared-components/CardComponents.vue
diff --git a/pages/shared-components/UiParentCard.vue b/pages/template/shared-components/UiParentCard.vue
similarity index 100%
rename from pages/shared-components/UiParentCard.vue
rename to pages/template/shared-components/UiParentCard.vue
diff --git a/pages/shared-components/UiTextfieldPrimary.vue b/pages/template/shared-components/UiTextfieldPrimary.vue
similarity index 100%
rename from pages/shared-components/UiTextfieldPrimary.vue
rename to pages/template/shared-components/UiTextfieldPrimary.vue
diff --git a/pages/shared-components/WidgetCards.vue b/pages/template/shared-components/WidgetCards.vue
similarity index 100%
rename from pages/shared-components/WidgetCards.vue
rename to pages/template/shared-components/WidgetCards.vue
diff --git a/pages/shared-components/index.vue b/pages/template/shared-components/index.vue
similarity index 100%
rename from pages/shared-components/index.vue
rename to pages/template/shared-components/index.vue
diff --git a/pages/style-components/Shadow.vue b/pages/template/style-components/Shadow.vue
similarity index 100%
rename from pages/style-components/Shadow.vue
rename to pages/template/style-components/Shadow.vue
diff --git a/pages/style-components/Typography.vue b/pages/template/style-components/Typography.vue
similarity index 100%
rename from pages/style-components/Typography.vue
rename to pages/template/style-components/Typography.vue
diff --git a/pages/ui-components/Alerts.vue b/pages/template/ui-components/Alerts.vue
similarity index 100%
rename from pages/ui-components/Alerts.vue
rename to pages/template/ui-components/Alerts.vue
diff --git a/pages/ui-components/Avatar.vue b/pages/template/ui-components/Avatar.vue
similarity index 100%
rename from pages/ui-components/Avatar.vue
rename to pages/template/ui-components/Avatar.vue
diff --git a/pages/ui-components/Buttons.vue b/pages/template/ui-components/Buttons.vue
similarity index 100%
rename from pages/ui-components/Buttons.vue
rename to pages/template/ui-components/Buttons.vue
diff --git a/pages/ui-components/Cards.vue b/pages/template/ui-components/Cards.vue
similarity index 100%
rename from pages/ui-components/Cards.vue
rename to pages/template/ui-components/Cards.vue
diff --git a/pages/ui-components/Chip.vue b/pages/template/ui-components/Chip.vue
similarity index 100%
rename from pages/ui-components/Chip.vue
rename to pages/template/ui-components/Chip.vue
diff --git a/pages/ui-components/Dialogs.vue b/pages/template/ui-components/Dialogs.vue
similarity index 100%
rename from pages/ui-components/Dialogs.vue
rename to pages/template/ui-components/Dialogs.vue
diff --git a/pages/ui-components/ExpansionPanel.vue b/pages/template/ui-components/ExpansionPanel.vue
similarity index 100%
rename from pages/ui-components/ExpansionPanel.vue
rename to pages/template/ui-components/ExpansionPanel.vue
diff --git a/pages/ui-components/List.vue b/pages/template/ui-components/List.vue
similarity index 100%
rename from pages/ui-components/List.vue
rename to pages/template/ui-components/List.vue
diff --git a/pages/ui-components/Menus.vue b/pages/template/ui-components/Menus.vue
similarity index 100%
rename from pages/ui-components/Menus.vue
rename to pages/template/ui-components/Menus.vue
diff --git a/pages/ui-components/Ratting.vue b/pages/template/ui-components/Ratting.vue
similarity index 100%
rename from pages/ui-components/Ratting.vue
rename to pages/template/ui-components/Ratting.vue
diff --git a/pages/ui-components/Tables.vue b/pages/template/ui-components/Tables.vue
similarity index 100%
rename from pages/ui-components/Tables.vue
rename to pages/template/ui-components/Tables.vue
diff --git a/pages/ui-components/Tabs.vue b/pages/template/ui-components/Tabs.vue
similarity index 100%
rename from pages/ui-components/Tabs.vue
rename to pages/template/ui-components/Tabs.vue
diff --git a/pages/ui-components/Tooltip.vue b/pages/template/ui-components/Tooltip.vue
similarity index 100%
rename from pages/ui-components/Tooltip.vue
rename to pages/template/ui-components/Tooltip.vue
diff --git a/pages/ui/Shadow.vue b/pages/template/ui/Shadow.vue
similarity index 100%
rename from pages/ui/Shadow.vue
rename to pages/template/ui/Shadow.vue
diff --git a/pages/ui/Typography.vue b/pages/template/ui/Typography.vue
similarity index 100%
rename from pages/ui/Typography.vue
rename to pages/template/ui/Typography.vue
diff --git a/pages/ui/tables/TableBasic.vue b/pages/template/ui/tables/TableBasic.vue
similarity index 100%
rename from pages/ui/tables/TableBasic.vue
rename to pages/template/ui/tables/TableBasic.vue
diff --git a/pages/ui/tables/TableDark.vue b/pages/template/ui/tables/TableDark.vue
similarity index 100%
rename from pages/ui/tables/TableDark.vue
rename to pages/template/ui/tables/TableDark.vue
diff --git a/pages/ui/tables/TableDensity.vue b/pages/template/ui/tables/TableDensity.vue
similarity index 100%
rename from pages/ui/tables/TableDensity.vue
rename to pages/template/ui/tables/TableDensity.vue
diff --git a/pages/ui/tables/TableEditable.vue b/pages/template/ui/tables/TableEditable.vue
similarity index 100%
rename from pages/ui/tables/TableEditable.vue
rename to pages/template/ui/tables/TableEditable.vue
diff --git a/pages/ui/tables/TableHeaderFixed.vue b/pages/template/ui/tables/TableHeaderFixed.vue
similarity index 100%
rename from pages/ui/tables/TableHeaderFixed.vue
rename to pages/template/ui/tables/TableHeaderFixed.vue
diff --git a/pages/ui/tables/TableHeight.vue b/pages/template/ui/tables/TableHeight.vue
similarity index 100%
rename from pages/ui/tables/TableHeight.vue
rename to pages/template/ui/tables/TableHeight.vue
diff --git a/pages/ui/tables/datatables/BasicTable.vue b/pages/template/ui/tables/datatables/BasicTable.vue
similarity index 100%
rename from pages/ui/tables/datatables/BasicTable.vue
rename to pages/template/ui/tables/datatables/BasicTable.vue
diff --git a/pages/ui/tables/datatables/CrudTable.vue b/pages/template/ui/tables/datatables/CrudTable.vue
similarity index 100%
rename from pages/ui/tables/datatables/CrudTable.vue
rename to pages/template/ui/tables/datatables/CrudTable.vue
diff --git a/pages/ui/tables/datatables/Filtering.vue b/pages/template/ui/tables/datatables/Filtering.vue
similarity index 100%
rename from pages/ui/tables/datatables/Filtering.vue
rename to pages/template/ui/tables/datatables/Filtering.vue
diff --git a/pages/ui/tables/datatables/Grouping.vue b/pages/template/ui/tables/datatables/Grouping.vue
similarity index 100%
rename from pages/ui/tables/datatables/Grouping.vue
rename to pages/template/ui/tables/datatables/Grouping.vue
diff --git a/pages/ui/tables/datatables/HeaderTables.vue b/pages/template/ui/tables/datatables/HeaderTables.vue
similarity index 100%
rename from pages/ui/tables/datatables/HeaderTables.vue
rename to pages/template/ui/tables/datatables/HeaderTables.vue
diff --git a/pages/ui/tables/datatables/Pagination.vue b/pages/template/ui/tables/datatables/Pagination.vue
similarity index 100%
rename from pages/ui/tables/datatables/Pagination.vue
rename to pages/template/ui/tables/datatables/Pagination.vue
diff --git a/pages/ui/tables/datatables/Selectable.vue b/pages/template/ui/tables/datatables/Selectable.vue
similarity index 100%
rename from pages/ui/tables/datatables/Selectable.vue
rename to pages/template/ui/tables/datatables/Selectable.vue
diff --git a/pages/ui/tables/datatables/Slots.vue b/pages/template/ui/tables/datatables/Slots.vue
similarity index 100%
rename from pages/ui/tables/datatables/Slots.vue
rename to pages/template/ui/tables/datatables/Slots.vue
diff --git a/pages/ui/tables/datatables/SortingTable.vue b/pages/template/ui/tables/datatables/SortingTable.vue
similarity index 100%
rename from pages/ui/tables/datatables/SortingTable.vue
rename to pages/template/ui/tables/datatables/SortingTable.vue
diff --git a/pages/widgets/Banners.vue b/pages/template/widgets/Banners.vue
similarity index 100%
rename from pages/widgets/Banners.vue
rename to pages/template/widgets/Banners.vue
diff --git a/pages/widgets/Cards.vue b/pages/template/widgets/Cards.vue
similarity index 100%
rename from pages/widgets/Cards.vue
rename to pages/template/widgets/Cards.vue
diff --git a/pages/widgets/Charts.vue b/pages/template/widgets/Charts.vue
similarity index 100%
rename from pages/widgets/Charts.vue
rename to pages/template/widgets/Charts.vue
diff --git a/server/api/auth/keycloak-callback.get.ts b/server/api/auth/keycloak-callback.get.ts
new file mode 100644
index 0000000..2163d14
--- /dev/null
+++ b/server/api/auth/keycloak-callback.get.ts
@@ -0,0 +1,203 @@
+// server/api/auth/keycloak-callback.ts - EXTENDED SESSION FIX
+import { createUserSession } from '~/server/utils/sessionStore';
+
+// Add this at the top of the file (after imports)
+const SESSION_DURATION = 1 * 60 * 60; // 1 hour in seconds (3600 seconds)
+// Or use one of these alternatives:
+// const SESSION_DURATION = 24 * 60 * 60;        // 1 day
+// const SESSION_DURATION = 30 * 24 * 60 * 60;   // 30 days
+// const SESSION_DURATION = 12 * 60 * 60;        // 12 hours
+// const SESSION_DURATION = 7 * 24 * 60 * 60;   // 7 days
+
+export default defineEventHandler(async (event) => {
+    try {
+        const config = useRuntimeConfig();
+        const query = getQuery(event);
+
+        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);
+
+            const errorMsg = encodeURIComponent(`Keycloak error: ${error} - ${errorDescription || 'Please try again'}`);
+            return sendRedirect(event, `/auth/login?error=${errorMsg}`);
+        }
+
+        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, `/auth/login?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, `/auth/login?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, `/auth/login?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, `/auth/login?error=${errorMsg}`);
+        }
+
+        const tokenUrl = `${config.keycloakIssuer}/protocol/openid-connect/token`;
+        const redirectUri = `${config.public.authUrl}/api/auth/keycloak-callback`;
+
+        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, `/auth/login?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, `/auth/login?error=${errorMsg}`);
+        }
+
+        const tokens = await tokenResponse.json();
+        
+        let idTokenPayload;
+        let accessTokenPayload;
+        let refreshTokenPayload;
+        try {
+            idTokenPayload = JSON.parse(
+                Buffer.from(tokens.id_token.split('.')[1], 'base64').toString()
+            );
+            accessTokenPayload = JSON.parse(
+                Buffer.from(tokens.access_token.split('.')[1], 'base64').toString()
+            );
+            refreshTokenPayload = JSON.parse(
+                Buffer.from(tokens.refresh_token.split('.')[1], 'base64').toString()
+            );
+        } catch (decodeError) {
+            console.error('❌ Failed to decode token:', decodeError);
+            const errorMsg = encodeURIComponent('Invalid token format');
+            return sendRedirect(event, `/auth/login?error=${errorMsg}`);
+        }
+                
+        const clientRoles = accessTokenPayload.resource_access?.[config.keycloakClientId]?.roles || [];
+        const nowInSeconds = Math.floor(Date.now() / 1000);
+        const refreshTokenExpiresInSeconds = Math.max(
+            refreshTokenPayload.exp - nowInSeconds,
+            0
+        );
+        const sessionDurationSeconds = refreshTokenExpiresInSeconds || SESSION_DURATION;
+
+        const sessionData = {
+            user: {
+                auth_provider: 'keycloak',
+                email: idTokenPayload.email,
+                name: idTokenPayload.name || idTokenPayload.preferred_username,
+                role: clientRoles, 
+                user_id: idTokenPayload.sub,
+                username: idTokenPayload.preferred_username,
+            },
+            accessToken: tokens.access_token,
+            refreshToken: tokens.refresh_token,
+            // idToken: tokens.id_token,
+            expiresAt: (nowInSeconds + sessionDurationSeconds) * 1000,
+        };
+
+        // 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';
+
+        // 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: sessionDurationSeconds,
+            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 sessionId = createUserSession(sessionData);
+
+        // Store only the session ID in the cookie (much smaller)
+        setCookie(event, 'user_session', sessionId, cookieOptions);
+        
+        return sendRedirect(event, '/apps/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, `/auth/login?error=${errorMsg}`);
+    }
+});
\ No newline at end of file
diff --git a/server/api/auth/keycloak-login.ts b/server/api/auth/keycloak-login.ts
new file mode 100644
index 0000000..3eeb494
--- /dev/null
+++ b/server/api/auth/keycloak-login.ts
@@ -0,0 +1,70 @@
+// server/api/auth/keycloak-login.ts
+import { randomBytes } from 'crypto'
+
+export default defineEventHandler(async (event) => {
+  console.log('🔐 Keycloak Login Handler Called')
+  console.log('📍 Method:', getMethod(event))
+  
+  try {
+    const config = useRuntimeConfig()
+    
+    // Debug: Log runtime config (without secrets)
+    console.log('🔧 Runtime Config Check:')
+    console.log('  - Has keycloakIssuer:', !!config.keycloakIssuer)
+    console.log('  - Has keycloakClientId:', !!config.keycloakClientId)
+    console.log('  - Has keycloakSecret:', !!config.keycloakClientSecret)
+    console.log('  - Issuer value:', config.keycloakIssuer)
+    
+    // Validate required configuration
+    if (!config.keycloakIssuer) {
+      throw new Error('KEYCLOAK_ISSUER is not configured')
+    }
+    if (!config.keycloakClientId) {
+      throw new Error('KEYCLOAK_CLIENT_ID is not configured')
+    }
+    
+    // Generate state parameter for security
+    const state = randomBytes(32).toString('hex')
+    console.log('🎲 Generated state:', state.substring(0, 8) + '...')
+    
+    // Store state in session cookie
+    setCookie(event, 'oauth_state', state, {
+      httpOnly: true,
+      secure: false,
+      sameSite: 'lax',
+      maxAge: 600 // 10 minutes
+    })
+    
+    // Build Keycloak authorization URL
+    const redirectUri = `${config.public.authUrl}/api/auth/keycloak-callback`
+    
+    // Debug: Log the redirect URI being used
+    console.log('🔧 AUTH_ORIGIN from config:', config.public.authUrl)
+    console.log('🔗 Redirect URI being sent to Keycloak:', redirectUri)
+    
+    const authUrl = new URL(`${config.keycloakIssuer}/protocol/openid-connect/auth`)
+    
+    authUrl.searchParams.set('client_id', config.keycloakClientId)
+    authUrl.searchParams.set('redirect_uri', redirectUri)
+    authUrl.searchParams.set('response_type', 'code')
+    authUrl.searchParams.set('scope', 'openid profile email')
+    authUrl.searchParams.set('state', state)
+    
+    console.log('🏗️ Auth URL built:', authUrl.toString())
+    
+    return {
+      success: true,
+      data: {
+        authUrl: authUrl.toString()
+      }
+    }
+    
+  } catch (error: any) {
+    console.error('❌ Login Error:', error.message)
+    
+    throw createError({
+      statusCode: 500,
+      statusMessage: `Failed to generate authorization URL: ${error.message}`
+    })
+  }
+})
\ No newline at end of file
diff --git a/server/api/auth/logout.post.ts b/server/api/auth/logout.post.ts
new file mode 100644
index 0000000..95ddf58
--- /dev/null
+++ b/server/api/auth/logout.post.ts
@@ -0,0 +1,82 @@
+// server/api/auth/logout.post.ts
+
+
+export default defineEventHandler(async (event) => {
+  const asString = (value: unknown): string => (typeof value === 'string' ? value : '');
+
+  const buildLogoutUrl = (idToken?: string) => {
+    const config = useRuntimeConfig();
+    const keycloakIssuer = asString(config.keycloakIssuer);
+    const keycloakClientId = asString(config.keycloakClientId);
+    const authUrl = asString(config.public.authUrl);
+    const baseUrl = asString(config.public.baseUrl);
+    const keycloakLogoutUri = asString(config.keycloakLogoutUri);
+    const postLogoutRedirectUriConfig = asString(config.postLogoutRedirectUri);
+
+    const logoutPath = keycloakLogoutUri || `${keycloakIssuer}/protocol/openid-connect/logout`;
+    const postLogoutRedirectUri = postLogoutRedirectUriConfig || baseUrl || authUrl;
+
+    const logoutUrl = new URL(logoutPath);
+    logoutUrl.searchParams.set('client_id', keycloakClientId);
+
+    if (postLogoutRedirectUri) {
+      logoutUrl.searchParams.set('post_logout_redirect_uri', postLogoutRedirectUri);
+    }
+
+    if (idToken) {
+      logoutUrl.searchParams.set('id_token_hint', idToken);
+    }
+
+    return logoutUrl.toString();
+  };
+
+  try {
+    // Retrieve token from the active session when available.
+    const sessionId = getCookie(event, 'user_session');
+    let idToken: string | undefined;
+
+    if (sessionId) {
+      try {
+        const { getUserSession, deleteUserSession } = await import('~/server/utils/sessionStore');
+        const session = getUserSession(sessionId);
+
+        if (session) {
+          idToken = session.idToken;
+          deleteUserSession(sessionId);
+        }
+      } catch {
+        // Ignore session-store retrieval failures; cookies are still cleared below.
+      }
+    }
+
+    // Always clear auth-related cookies.
+    deleteCookie(event, 'user_session');
+    deleteCookie(event, 'oauth_state');
+    deleteCookie(event, 'user_session', { path: '/' });
+    deleteCookie(event, 'oauth_state', { path: '/' });
+
+    const logoutUrl = buildLogoutUrl(idToken);
+
+    return {
+      success: true,
+      logoutUrl,
+      message: 'Session cleared successfully',
+    };
+
+  } catch {
+    let fallbackLogoutUrl = '';
+
+    try {
+      fallbackLogoutUrl = buildLogoutUrl();
+    } catch {
+      // Keep empty fallback URL if runtime config is not usable.
+    }
+
+    return {
+      success: false,
+      logoutUrl: fallbackLogoutUrl,
+      error: 'Logout encountered an error, but providing fallback logout URL',
+      message: 'Logout failed',
+    };
+  }
+});
\ No newline at end of file
diff --git a/server/api/auth/sessionUser.get.ts b/server/api/auth/sessionUser.get.ts
new file mode 100644
index 0000000..4b2a6cc
--- /dev/null
+++ b/server/api/auth/sessionUser.get.ts
@@ -0,0 +1,58 @@
+export default defineEventHandler(async (event) => {
+  const parseJwtPayload = (token: string): { exp?: number } | null => {
+    try {
+      const payload = token.split('.')[1];
+      if (!payload) return null;
+
+      const decoded = Buffer.from(payload, 'base64').toString();
+      return JSON.parse(decoded) as { exp?: number };
+    } catch {
+      return null;
+    }
+  };
+
+  const sessionId = getCookie(event, "user_session");
+
+  if (!sessionId) {
+    throw createError({
+      statusCode: 401,
+      statusMessage: "No session cookie found",
+    });
+  }
+
+   try {
+    // Get session from server-side store using session ID
+    const { getUserSession, deleteUserSession } = await import('~/server/utils/sessionStore');
+    const session = getUserSession(sessionId);
+    
+    if (!session) {
+      throw createError({
+        statusCode: 401,
+        statusMessage: "Session expired or invalid",
+      });
+    }
+
+    const accessPayload = parseJwtPayload(session.accessToken);
+    const nowInSeconds = Math.floor(Date.now() / 1000);
+
+    if (!accessPayload?.exp || accessPayload.exp <= nowInSeconds) {
+      deleteUserSession(sessionId);
+      throw createError({
+        statusCode: 401,
+        statusMessage: "Access token expired or invalid",
+      });
+    }
+
+    return session;
+  } catch (error: any) {
+    if (error?.statusCode) {
+      throw error;
+    }
+
+    console.error("❌ Failed to validate session:", error);
+    throw createError({
+      statusCode: 401,
+      statusMessage: "Invalid session data",
+    });
+  }
+});
\ No newline at end of file
diff --git a/server/api/auth/sessionUserStore.post.ts b/server/api/auth/sessionUserStore.post.ts
new file mode 100644
index 0000000..5d45fc5
--- /dev/null
+++ b/server/api/auth/sessionUserStore.post.ts
@@ -0,0 +1,119 @@
+import { createError } from 'h3';
+import type { AuthInfoResponse } from '~/types/auth';
+import {
+  createUserSession,
+  deleteUserSession,
+  getUserSession,
+} from '~/server/utils/sessionStore';
+
+type SessionStoreRequest = {
+  accessToken?: string;
+  refreshToken?: string;
+};
+
+const DEFAULT_SESSION_SECONDS = 60 * 60; // 1 hour
+
+
+const parseJwtPayload = (token: string): { exp?: number } | null => {
+  try {
+    const payload = token.split('.')[1];
+    if (!payload) return null;
+
+    const normalized = payload.replace(/-/g, '+').replace(/_/g, '/');
+    const padded = normalized.padEnd(Math.ceil(normalized.length / 4) * 4, '=');
+    const decoded = Buffer.from(padded, 'base64').toString();
+
+    return JSON.parse(decoded) as { exp?: number };
+  } catch {
+    return null;
+  }
+};
+
+export default defineEventHandler(async (event) => {
+  const body = await readBody<SessionStoreRequest>(event);
+
+  const accessToken = body?.accessToken;
+  const refreshToken = body?.refreshToken;
+
+  if (!accessToken || !refreshToken) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'accessToken and refreshToken are required',
+    });
+  }
+
+  const config = useRuntimeConfig();
+  const baseUrl = config.public.baseUrl;
+  const authInfoUrl = `${baseUrl}/api/v1/auth/info`;
+
+  let authInfoResponse: AuthInfoResponse;
+  try {
+    authInfoResponse = await $fetch<AuthInfoResponse>(authInfoUrl, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+  } catch (error: any) {
+    throw createError({
+      statusCode: 401,
+      statusMessage:
+        error?.data?.message || error?.message || 'Failed to fetch auth info',
+    });
+  }
+
+  if (!authInfoResponse?.data) {
+    throw createError({
+      statusCode: 502,
+      statusMessage: 'Invalid auth info response',
+    });
+  }
+
+  const now = Date.now();
+  const refreshPayload = parseJwtPayload(refreshToken);
+  const refreshExpSeconds = refreshPayload?.exp;
+
+  const expiresAt =
+    typeof refreshExpSeconds === 'number' && refreshExpSeconds > 0
+      ? refreshExpSeconds * 1000
+      : now + DEFAULT_SESSION_SECONDS * 1000;
+
+  const maxAge = Math.max(Math.floor((expiresAt - now) / 1000), 60);
+
+  const previousSessionId = getCookie(event, 'user_session');
+  if (previousSessionId && getUserSession(previousSessionId)) {
+    deleteUserSession(previousSessionId);
+  }
+
+  const sessionId = createUserSession({
+    user: {
+      auth_provider: authInfoResponse.data.auth_provider || 'jwt',
+      email: authInfoResponse.data.email,
+      name: authInfoResponse.data.name,
+      role: authInfoResponse.data.role,
+      user_id: authInfoResponse.data.user_id,
+      username: authInfoResponse.data.username,
+    },
+    accessToken,
+    refreshToken,
+    expiresAt,
+  });
+
+  const isSecure =
+    process.env.NODE_ENV === 'production' && event.node.req.headers['x-forwarded-proto'] === 'https';
+
+  setCookie(event, 'user_session', sessionId, {
+    httpOnly: true,
+    secure: isSecure,
+    sameSite: 'lax',
+    maxAge,
+    path: '/',
+  });
+
+  return {
+    success: true,
+    message: 'Session stored successfully',
+    expiresAt,
+  };
+});
diff --git a/server/utils/sessionStore.ts b/server/utils/sessionStore.ts
new file mode 100644
index 0000000..16e4532
--- /dev/null
+++ b/server/utils/sessionStore.ts
@@ -0,0 +1,75 @@
+// 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'
+import type { SessionData } from '~/types/auth';
+
+
+
+const sessions = new Map<string, SessionData>();
+
+// Clean up expired sessions every 5 minutes
+setInterval(() => {
+    const now = Date.now();
+    for (const [sessionId, session] of sessions.entries()) {
+        if (session.expiresAt < now) {
+            sessions.delete(sessionId);
+        }
+    }
+}, 5 * 60 * 1000);
+
+export function createUserSession(data: Omit<SessionData, 'createdAt'>): string {
+    // Generate a secure random session ID
+    const sessionId = randomBytes(32).toString('hex');
+    const sessionData: SessionData = {
+        ...data
+    };
+    sessions.set(sessionId, sessionData);
+    return sessionId;
+}
+
+export function getUserSession(sessionId: string): SessionData | null {
+    const session = sessions.get(sessionId);
+    if (!session) {
+        return null;
+    }
+
+    if (session.expiresAt <= Date.now()) {
+        sessions.delete(sessionId);
+        return null;
+    }
+    
+    return session;
+}
+
+export function deleteUserSession(sessionId: string): void {
+    sessions.delete(sessionId);
+}
+
+export function updateUserSession(sessionId: string, updates: Partial<SessionData>): boolean {
+    const session = sessions.get(sessionId);
+    if (!session) {
+        return false;
+    }
+    
+    // Update the session with new data
+    const updatedSession = {
+        ...session,
+        ...updates,
+    };
+    
+    sessions.set(sessionId, updatedSession);
+    return true;
+}
+
+// Helper function to get session from cookie (for use in API handlers)
+export async function getUserSessionFromCookie(event: any): Promise<SessionData | null> {
+    const sessionId = getCookie(event, 'user_session');
+    if (!sessionId) {
+        return null;
+    }
+    return getUserSession(sessionId);
+}
+
diff --git a/store/snackbar.ts b/store/snackbar.ts
new file mode 100644
index 0000000..87e43b8
--- /dev/null
+++ b/store/snackbar.ts
@@ -0,0 +1,32 @@
+import { defineStore } from 'pinia';
+
+export const useSnackbarStore = defineStore('snackbar', {
+/**
+ * The state of the snackbar store.
+ * It contains the following properties:
+ * - `show`: a boolean indicating whether the snackbar should be shown or not.
+ * - `text`: a string containing the text to be displayed in the snackbar.
+ * - `color`: a string containing the color of the snackbar.
+ * - `timeout`: a number containing the timeout of the snackbar in milliseconds.
+ */
+  state: () => ({
+    show: false,
+    text: '',
+    color: '',
+    timeout: 3000,
+  }),
+  actions: {
+    /**
+     * Show a snackbar with the given text, color and timeout.
+     * @param {string} text - The text to be displayed in the snackbar.
+     * @param {string} [color='error'] - The color of the snackbar.
+     * @param {number} [timeout=3000] - The timeout of the snackbar in milliseconds.
+     */
+    showSnackbar(text: string, color = 'error', timeout = 3000) {
+      this.text = text;
+      this.color = color;
+      this.timeout = timeout;
+      this.show = true;
+    },
+  },
+});
diff --git a/types/auth.ts b/types/auth.ts
index fd1e687..500e139 100644
--- a/types/auth.ts
+++ b/types/auth.ts
@@ -19,3 +19,42 @@ export interface ExtendedSession {
   refreshToken: string;
   expiresAt: number;
 }
+
+export interface AuthInfoData {
+  auth_provider: string;
+  email: string;
+  name: string;
+  role: any;
+  user_id: string;
+  username: string;
+}
+
+export interface AuthInfoResponse {
+  data: AuthInfoData;
+  message: string;
+}
+
+
+
+export interface LogoutResponse {
+  success: boolean;
+  logoutUrl?: string;
+}
+
+export interface SessionData {
+    user: AuthInfoData;
+    accessToken: string;
+    idToken?: string;
+    refreshToken: string;
+    expiresAt: number;
+}
+
+export interface LoginResponse {
+  data : {
+    provider: string;
+    access_token: string;
+    refresh_token: string;
+    expires_in: number;
+    token_type: string;
+  }
+}
\ No newline at end of file
diff --git a/utils/api.ts b/utils/api.ts
new file mode 100644
index 0000000..123ef46
--- /dev/null
+++ b/utils/api.ts
@@ -0,0 +1,11 @@
+import axios from 'axios'
+
+const config = useRuntimeConfig()
+
+const api = axios.create({
+  baseURL: config.public.baseUrl,
+  timeout: 10000,
+})
+
+
+export default api
\ No newline at end of file