diff --git a/app/components/flow/patient/list.vue b/app/components/flow/patient/list.vue
index 8537ce3b..82c23eb5 100644
--- a/app/components/flow/patient/list.vue
+++ b/app/components/flow/patient/list.vue
@@ -6,7 +6,6 @@ import { Calendar, Hospital, UserCheck, UsersRound } from 'lucide-vue-next'
 const data = ref([])
 
 const refSearchNav: RefSearchNav = {
-
   onClick: () => {
     // open filter modal
   },
diff --git a/app/components/pub/base/error.vue b/app/components/pub/base/error.vue
index c1ebc354..7f7bc4ea 100644
--- a/app/components/pub/base/error.vue
+++ b/app/components/pub/base/error.vue
@@ -43,7 +43,8 @@ const router = useRouter()
       </template>
       <div class="mt-6 flex gap-4">
         <Button variant="outline" @click="router.back()"> Kembali </Button>
-        <Button @click="router.push('/')"> Kembali Ke Dashboard </Button>
+        <Button v-if="statusCode === 401" @click="router.push('/auth/login')">Login</Button>
+        <Button v-else @click="router.push('/')">Kembali ke Dashboard</Button>
       </div>
     </div>
   </div>
diff --git a/app/composables/useXfetch.ts b/app/composables/useXfetch.ts
index 24518c18..e4e4c3ef 100644
--- a/app/composables/useXfetch.ts
+++ b/app/composables/useXfetch.ts
@@ -55,6 +55,10 @@ export async function xfetch(
     const status = fetchError.response?.status || 500
     const resJson = fetchError.data
 
+    if (status === 401 && import.meta.client) {
+      clearStore()
+    }
+
     if (resJson?.errors) {
       errors = resJson.errors
     } else if (resJson?.code && resJson?.message) {
@@ -68,3 +72,10 @@ export async function xfetch(
     return { success, status_code: status, body, errors, error, message }
   }
 }
+
+function clearStore() {
+  const { $pinia } = useNuxtApp()
+  const userStore = useUserStore($pinia)
+  userStore.logout()
+  navigateTo('/401')
+}