diff --git a/api/src/routes/loa.ts b/api/src/routes/loa.ts
index 65cbf4a..45d48cc 100644
--- a/api/src/routes/loa.ts
+++ b/api/src/routes/loa.ts
@@ -3,7 +3,7 @@ const router = express.Router();
 
 import { Request, Response } from 'express';
 import pool from '../db';
-import { closeLOA, createNewLOA, getAllLOA, getLOAbyID, getLoaTypes, getUserLOA } from '../services/loaService';
+import { closeLOA, createNewLOA, getAllLOA, getLOAbyID, getLoaTypes, getUserLOA, setLOAExtension } from '../services/loaService';
 import { LOARequest } from '@app/shared/types/loa';
 
 //member posts LOA
@@ -104,10 +104,15 @@ router.post('/adminCancel/:id', async (req: Request, res: Response) => {
 
 // TODO: Enforce admin only
 router.post('/extend/:id', async (req: Request, res: Response) => {
-    const extendTo = req.body;
-    console.log(extendTo);
-    try {
+    const to: Date = req.body.to;
 
+    if (!to) {
+        res.status(400).send("Extension length is required");
+    }
+
+    try {
+        await setLOAExtension(Number(req.params.id), to);
+        res.sendStatus(200);
     } catch (error) {
         console.error(error)
         res.status(500).json(error);
@@ -123,8 +128,7 @@ router.get('/policy', async (req: Request, res: Response) => {
 
     if (output.ok) {
         const out = await output.json();
-        console.log(out);
-        res.status(200).json(out);
+        res.status(200).json(out.markdown);
     } else {
         console.log("BAD");
         res.sendStatus(500);
diff --git a/api/src/routes/members.js b/api/src/routes/members.js
index c93f249..3196569 100644
--- a/api/src/routes/members.js
+++ b/api/src/routes/members.js
@@ -2,6 +2,7 @@ const express = require('express');
 const router = express.Router();
 
 import pool from '../db';
+import { getUserActiveLOA } from '../services/loaService';
 import { getUserData } from '../services/memberService';
 import { getUserRoles } from '../services/rolesService';
 
@@ -40,12 +41,13 @@ router.get('/me', async (req, res) => {
 
     try {
         const { id, name, state } = await getUserData(req.user.id);
-        const LOAData = await pool.query(
-            `SELECT *
-            FROM leave_of_absences
-            WHERE member_id = ?
-            AND deleted = 0 
-            AND UTC_TIMESTAMP() BETWEEN start_date AND end_date;`, req.user.id);
+        // const LOAData = await pool.query(
+        //     `SELECT *
+        //     FROM leave_of_absences
+        //     WHERE member_id = ?
+        //     AND deleted = 0 
+        //     AND UTC_TIMESTAMP() BETWEEN start_date AND end_date;`, req.user.id);
+        const LOAData = await getUserActiveLOA(req.user.id);
 
         const roleData = await getUserRoles(req.user.id);
 
diff --git a/api/src/services/loaService.ts b/api/src/services/loaService.ts
index 129f5e2..1446724 100644
--- a/api/src/services/loaService.ts
+++ b/api/src/services/loaService.ts
@@ -6,13 +6,28 @@ export async function getLoaTypes(): Promise<LOAType[]> {
     return await pool.query('SELECT * FROM leave_of_absences_types;');
 }
 
-export async function getAllLOA(): Promise<LOARequest[]> {
-    let res: LOARequest[] = await pool.query(
-        `SELECT loa.*, members.name, t.name AS type_name
-            FROM leave_of_absences AS loa
-            LEFT JOIN members ON loa.member_id = members.id
-            LEFT JOIN leave_of_absences_types AS t ON loa.type_id = t.id;
-            `) as LOARequest[];
+export async function getAllLOA(page = 1, pageSize = 20): Promise<LOARequest[]> {
+    const offset = (page - 1) * pageSize;
+
+    const sql = `
+        SELECT loa.*, members.name, t.name AS type_name
+        FROM leave_of_absences AS loa
+        LEFT JOIN members ON loa.member_id = members.id
+        LEFT JOIN leave_of_absences_types AS t ON loa.type_id = t.id
+        ORDER BY
+            CASE
+                WHEN loa.closed IS NULL 
+                     AND NOW() > COALESCE(loa.extended_till, loa.end_date) THEN 1
+                WHEN loa.closed IS NULL
+                     AND NOW() BETWEEN loa.start_date AND COALESCE(loa.extended_till, loa.end_date) THEN 2
+                WHEN loa.closed IS NULL AND NOW() < loa.start_date THEN 3
+                WHEN loa.closed IS NOT NULL THEN 4
+            END,
+            loa.start_date DESC
+        LIMIT ? OFFSET ?;
+    `;
+
+    let res: LOARequest[] = await pool.query(sql, [pageSize, offset]) as LOARequest[];
     return res;
 }
 
@@ -21,6 +36,16 @@ export async function getUserLOA(userId: number): Promise<LOARequest[]> {
     return result;
 }
 
+export async function getUserActiveLOA(userId: number): Promise<LOARequest[]> {
+    const sql = `SELECT *
+            FROM leave_of_absences
+            WHERE member_id = ?
+            AND closed IS NULL
+            AND UTC_TIMESTAMP() BETWEEN start_date AND end_date;`
+    const LOAData = await pool.query(sql, [userId]);
+    return LOAData;
+}
+
 export async function createNewLOA(data: LOARequest) {
     const sql = `INSERT INTO leave_of_absences 
                 (member_id, filed_date, start_date, end_date, type_id, reason) 
@@ -41,12 +66,17 @@ export async function closeLOA(id: number, closer: number) {
 
 export async function getLOAbyID(id: number): Promise<LOARequest> {
     let res = await pool.query(`SELECT * FROM leave_of_absences WHERE id = ?`, [id]);
-    if (res.length != 1)
+    console.log(res);
+    if (res.length == 1)
         throw new Error(`LOA with id ${id} not found`);
     return res[0];
 }
 
 export async function setLOAExtension(id: number, extendTo: Date) {
-    
-
+    let res = await pool.query(`UPDATE leave_of_absences
+                                    SET extended_till = ?
+                                    WHERE leave_of_absences.id = ? `, [toDateTime(extendTo), id]);
+    if (res.affectedRows != 1)
+        throw new Error(`Could not extend LOA`);
+    return res[0];
 }
\ No newline at end of file
diff --git a/ui/src/App.vue b/ui/src/App.vue
index a656c08..8289a75 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -5,6 +5,7 @@ import { useUserStore } from './stores/user';
 import Alert from './components/ui/alert/Alert.vue';
 import AlertDescription from './components/ui/alert/AlertDescription.vue';
 import Navbar from './components/Navigation/Navbar.vue';
+import { cancelLOA } from './api/loa';
 
 const userStore = useUserStore();
 
@@ -29,10 +30,11 @@ const environment = import.meta.env.VITE_ENVIRONMENT;
           <p>This is a development build of the application. Some features will be unavailable or unstable.</p>
         </AlertDescription>
       </Alert>
-      <Alert v-if="userStore.user?.loa?.[0]" class="m-2 mx-auto w-5xl" variant="info">
+      <Alert v-if="userStore.user?.LOAData?.[0]" class="m-2 mx-auto 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?.loa?.[0].end_date) }}</strong></p>
-          <Button variant="secondary">End LOA</Button>
+          <p>You are on LOA until <strong>{{ formatDate(userStore.user?.LOAData?.[0].end_date) }}</strong></p>
+          <Button variant="secondary" @click="async () => { await cancelLOA(userStore.user?.LOAData?.[0].id); userStore.loadUser(); }">End
+            LOA</Button>
         </AlertDescription>
       </Alert>
     </div>
diff --git a/ui/src/api/loa.ts b/ui/src/api/loa.ts
index 80417d9..fc85bb3 100644
--- a/ui/src/api/loa.ts
+++ b/ui/src/api/loa.ts
@@ -90,7 +90,6 @@ export async function getLoaTypes(): Promise<LOAType[]> {
 };
 
 export async function getLoaPolicy(): Promise<string> {
-    //@ts-ignore
     const res = await fetch(`${addr}/loa/policy`, {
         method: "GET",
         credentials: 'include',
@@ -106,3 +105,34 @@ export async function getLoaPolicy(): Promise<string> {
         return null;
     }
 }
+
+export async function cancelLOA(id: number, admin: boolean = false) {
+    let route = admin ? 'adminCancel' : 'cancel';
+    const res = await fetch(`${addr}/loa/${route}/${id}`, {
+        method: "POST",
+        credentials: 'include',
+    });
+
+    if (res.ok) {
+        return
+    } else {
+        throw new Error("Could not cancel LOA");
+    }
+}
+
+export async function extendLOA(id: number, to: Date) {
+    const res = await fetch(`${addr}/loa/extend/${id}`, {
+        method: "POST",
+        credentials: 'include',
+        body: JSON.stringify({ to }),
+        headers: {
+            "Content-Type": "application/json",
+        }
+    });
+
+    if (res.ok) {
+        return
+    } else {
+        throw new Error("Could not extend LOA");
+    }
+}
\ No newline at end of file
diff --git a/ui/src/components/loa/loaForm.vue b/ui/src/components/loa/loaForm.vue
index 1ae6063..4e157bb 100644
--- a/ui/src/components/loa/loaForm.vue
+++ b/ui/src/components/loa/loaForm.vue
@@ -177,7 +177,7 @@ const maxEndDate = computed(() => {
                                 <FieldLabel>Type</FieldLabel>
                                 <Select :model-value="field.value" @update:model-value="field.onChange">
                                     <SelectTrigger class="w-full">
-                                        <SelectValue></SelectValue>
+                                        <SelectValue placeholder="Select type"></SelectValue>
                                     </SelectTrigger>
                                     <SelectContent>
                                         <SelectItem v-for="type in loaTypes" :value="type">
diff --git a/ui/src/components/loa/loaList.vue b/ui/src/components/loa/loaList.vue
index 6494067..1154641 100644
--- a/ui/src/components/loa/loaList.vue
+++ b/ui/src/components/loa/loaList.vue
@@ -16,30 +16,47 @@ import {
     DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { Ellipsis } from "lucide-vue-next";
-import { getAllLOAs, LOARequest } from "@/api/loa";
+import { cancelLOA, extendLOA, getAllLOAs } from "@/api/loa";
 import { onMounted, ref, computed } from "vue";
+import { LOARequest } from "@shared/types/loa";
+import Dialog from "../ui/dialog/Dialog.vue";
+import DialogTrigger from "../ui/dialog/DialogTrigger.vue";
+import DialogContent from "../ui/dialog/DialogContent.vue";
+import DialogHeader from "../ui/dialog/DialogHeader.vue";
+import DialogTitle from "../ui/dialog/DialogTitle.vue";
+import DialogDescription from "../ui/dialog/DialogDescription.vue";
+import Button from "../ui/button/Button.vue";
+import Calendar from "../ui/calendar/Calendar.vue";
+import {
+    CalendarDate,
+    getLocalTimeZone,
+} from "@internationalized/date"
+
 
 const LOAList = ref<LOARequest[]>([]);
 
 onMounted(async () => {
-    LOAList.value = await getAllLOAs();
+    await loadLOAs();
 });
 
-function formatDate(dateStr: string): string {
-    if (!dateStr) return "";
-    return new Date(dateStr).toLocaleDateString("en-US", {
+async function loadLOAs() {
+    // const unsort = await getAllLOAs();
+    // LOAList.value = sortByStartDate(unsort);
+    LOAList.value = await getAllLOAs();
+}
+
+function formatDate(date: Date): string {
+    if (!date) return "";
+    date = typeof date === 'string' ? new Date(date) : date;
+    return date.toLocaleDateString("en-US", {
         year: "numeric",
         month: "short",
         day: "numeric",
     });
 }
 
-function loaStatus(loa: {
-    start_date: string;
-    end_date: string;
-    deleted?: number;
-}): "Upcoming" | "Active" | "Expired" | "Cancelled" {
-    if (loa.deleted) return "Cancelled";
+function loaStatus(loa: LOARequest): "Upcoming" | "Active" | "Overdue" | "Closed" {
+    if (loa.closed) return "Closed";
 
     const now = new Date();
     const start = new Date(loa.start_date);
@@ -47,9 +64,9 @@ function loaStatus(loa: {
 
     if (now < start) return "Upcoming";
     if (now >= start && now <= end) return "Active";
-    if (now > end) return "Expired";
+    if (now > end) return "Overdue";
 
-    return "Expired"; // fallback
+    return "Overdue"; // fallback
 }
 
 function sortByStartDate(loas: LOARequest[]): LOARequest[] {
@@ -58,50 +75,102 @@ function sortByStartDate(loas: LOARequest[]): LOARequest[] {
     );
 }
 
-const sortedLoas = computed(() => sortByStartDate(LOAList.value));
+async function cancelAndReload(id: number) {
+    await cancelLOA(id, true);
+    await loadLOAs();
+}
+
+const isExtending = ref(false);
+const targetLOA = ref<LOARequest | null>(null);
+const extendTo = ref<CalendarDate | null>(null);
+
+const targetEnd = computed(() => { return targetLOA.value.extended_till ? targetLOA.value.extended_till : targetLOA.value.end_date })
+
+function toCalendarDate(date: Date): CalendarDate {
+    if (typeof date === 'string')
+        date = new Date(date);
+    return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate())
+}
+
+async function commitExtend() {
+    await extendLOA(targetLOA.value.id, extendTo.value.toDate(getLocalTimeZone()));
+    isExtending.value = false;
+    await loadLOAs();
+}
 </script>
 
 <template>
-    <div class="w-5xl mx-auto">
-        <Table>
-            <TableHeader>
-                <TableRow>
-                    <TableHead class="w-[100px]">Member</TableHead>
-                    <TableHead>Start</TableHead>
-                    <TableHead>End</TableHead>
-                    <TableHead>Reason</TableHead>
-                    <TableHead>Posted on</TableHead>
-                    <TableHead>Status</TableHead>
-                </TableRow>
-            </TableHeader>
-            <TableBody>
-                <TableRow v-for="post in sortedLoas" :key="post.id" class="hover:bg-muted/50">
-                    <TableCell class="font-medium">
-                        {{ post.name }}
-                    </TableCell>
-                    <TableCell>{{ formatDate(post.start_date) }}</TableCell>
-                    <TableCell>{{ formatDate(post.end_date) }}</TableCell>
-                    <TableCell>{{ post.reason }}</TableCell>
-                    <TableCell>{{ formatDate(post.filed_date) }}</TableCell>
-                    <TableCell>
-                        <Badge v-if="loaStatus(post) === 'Upcoming'" class="bg-blue-500">Upcoming</Badge>
-                        <Badge v-else-if="loaStatus(post) === 'Active'" class="bg-green-500">Active</Badge>
-                        <Badge v-else-if="loaStatus(post) === 'Expired'" class="bg-gray-400">Expired</Badge>
-                        <Badge v-else class="bg-red-500">Cancelled</Badge>
-                    </TableCell>
-                    <TableCell @click.stop="console.log('hi')" class="text-right">
-                        <DropdownMenu>
-                            <DropdownMenuTrigger class="cursor-pointer">
-                                <Ellipsis></Ellipsis>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent>
-                                <DropdownMenuItem :variant="'destructive'">Cancel</DropdownMenuItem>
-                            </DropdownMenuContent>
-                        </DropdownMenu>
-                    </TableCell>
-
-                </TableRow>
-            </TableBody>
-        </Table>
+    <div>
+        <Dialog :open="isExtending" @update:open="(val) => isExtending = val">
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>Extend {{ targetLOA.name }}'s Leave of Absence </DialogTitle>
+                </DialogHeader>
+                <div class="flex gap-5">
+                    <Calendar v-model="extendTo" class="rounded-md border shadow-sm w-min" layout="month-and-year"
+                        :min-value="toCalendarDate(targetEnd)"
+                        :max-value="toCalendarDate(targetEnd).add({ years: 1 })" />
+                    <div class="flex flex-col w-full gap-3 px-2">
+                        <p>Quick Options</p>
+                        <Button variant="outline" @click="extendTo = toCalendarDate(targetEnd).add({ days: 7 })">1
+                            Week</Button>
+                        <Button variant="outline" @click="extendTo = toCalendarDate(targetEnd).add({ months: 1 })">1
+                            Month</Button>
+                    </div>
+                </div>
+                <div class="flex justify-end gap-4">
+                    <Button variant="outline" @click="isExtending = false">Cancel</Button>
+                    <Button @click="commitExtend">Extend</Button>
+                </div>
+            </DialogContent>
+        </Dialog>
+        <div class="max-w-7xl w-full mx-auto">
+            <Table>
+                <TableHeader>
+                    <TableRow>
+                        <TableHead>Member</TableHead>
+                        <TableHead>Type</TableHead>
+                        <TableHead>Start</TableHead>
+                        <TableHead>End</TableHead>
+                        <TableHead class="w-[500px]">Reason</TableHead>
+                        <TableHead>Posted on</TableHead>
+                        <TableHead>Status</TableHead>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    <TableRow v-for="post in LOAList" :key="post.id" class="hover:bg-muted/50">
+                        <TableCell class="font-medium">
+                            {{ post.name }}
+                        </TableCell>
+                        <TableCell>{{ post.type_name }}</TableCell>
+                        <TableCell>{{ formatDate(post.start_date) }}</TableCell>
+                        <TableCell>{{ post.extended_till ? formatDate(post.extended_till) : formatDate(post.end_date) }}
+                        </TableCell>
+                        <TableCell>{{ post.reason }}</TableCell>
+                        <TableCell>{{ formatDate(post.filed_date) }}</TableCell>
+                        <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) === 'Overdue'" class="bg-yellow-400">Overdue</Badge>
+                            <Badge v-else class="bg-gray-400">Ended</Badge>
+                        </TableCell>
+                        <TableCell @click.stop="" class="text-right">
+                            <DropdownMenu>
+                                <DropdownMenuTrigger class="cursor-pointer">
+                                    <Ellipsis></Ellipsis>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent>
+                                    <DropdownMenuItem v-if="!post.closed" @click="isExtending = true; targetLOA = post">
+                                        Extend
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem :variant="'destructive'" @click="cancelAndReload(post.id)">End
+                                    </DropdownMenuItem>
+                                </DropdownMenuContent>
+                            </DropdownMenu>
+                        </TableCell>
+                    </TableRow>
+                </TableBody>
+            </Table>
+        </div>
     </div>
 </template>