diff --git a/ui/src/components/loa/loaList.vue b/ui/src/components/loa/loaList.vue
index 1785564..c33a1d4 100644
--- a/ui/src/components/loa/loaList.vue
+++ b/ui/src/components/loa/loaList.vue
@@ -75,15 +75,17 @@ function formatDate(date: Date): string {
     });
 }
 
-function loaStatus(loa: LOARequest): "Upcoming" | "Active" | "Overdue" | "Closed" {
+function loaStatus(loa: LOARequest): "Upcoming" | "Active" | "Extended" | "Overdue" | "Closed" {
     if (loa.closed) return "Closed";
 
     const now = new Date();
     const start = new Date(loa.start_date);
     const end = new Date(loa.end_date);
+    const extension = new Date(loa.extended_till);
 
     if (now < start) return "Upcoming";
-    if (now >= start && now <= end) return "Active";
+    if (now >= start && (now <= end)) return "Active";
+    if (now >= start && (now <= extension)) return "Extended";
     if (now > loa.extended_till || end) return "Overdue";
 
     return "Overdue"; // fallback
@@ -191,6 +193,7 @@ function setPage(pagenum: number) {
                             <TableCell>
                                 <Badge v-if="loaStatus(post) === 'Upcoming'" class="bg-blue-400">Upcoming</Badge>
                                 <Badge v-else-if="loaStatus(post) === 'Active'" class="bg-green-500">Active</Badge>
+                                <Badge v-else-if="loaStatus(post) === 'Extended'" class="bg-green-500">Extended</Badge>
                                 <Badge v-else-if="loaStatus(post) === 'Overdue'" class="bg-yellow-400">Overdue</Badge>
                                 <Badge v-else class="bg-gray-400">Ended</Badge>
                             </TableCell>