diff --git a/api/src/services/db/loaService.ts b/api/src/services/db/loaService.ts
index d6a9c40..b7131bf 100644
--- a/api/src/services/db/loaService.ts
+++ b/api/src/services/db/loaService.ts
@@ -69,7 +69,7 @@ export async function getUserActiveLOA(userId: number): Promise<LOARequest[]> {
             FROM leave_of_absences
             WHERE member_id = ?
             AND closed IS NULL
-            AND UTC_TIMESTAMP() BETWEEN start_date AND end_date;`
+            AND UTC_TIMESTAMP() > start_date;`
     const LOAData = await pool.query(sql, [userId]);
     return LOAData;
 }
diff --git a/ui/src/App.vue b/ui/src/App.vue
index 7e208d0..82bfe12 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -36,8 +36,12 @@ const version = import.meta.env.VITE_APPLICATION_VERSION;
       </Alert>
       <Alert v-if="userStore.user?.LOAs?.[0]" class="m-2 mx-auto max-w-5xl" variant="info">
         <AlertDescription class="flex flex-row items-center text-nowrap gap-5 mx-auto">
-          <p>You are on LOA until <strong>{{ formatDate(userStore.user?.LOAs?.[0].extended_till ||
-            userStore.user?.LOAs?.[0].end_date) }}</strong></p>
+            <p v-if="new Date(userStore.user?.LOAs?.[0].extended_till || userStore.user?.LOAs?.[0].end_date) > new Date()" class="text-yellow-600">
+            LOA until <strong>{{ formatDate(userStore.user?.LOAs?.[0].extended_till || userStore.user?.LOAs?.[0].end_date) }}</strong>
+            </p>
+            <p v-else>
+            LOA expired on <strong>{{ formatDate(userStore.user?.LOAs?.[0].extended_till || userStore.user?.LOAs?.[0].end_date) }}</strong>
+            </p>
           <Button variant="secondary"
             @click="async () => { await cancelLOA(userStore.user.LOAs?.[0].id); userStore.loadUser(); }">End
             LOA</Button>