diff --git a/api/src/routes/ranks.ts b/api/src/routes/ranks.ts
index 5eff733..af22a03 100644
--- a/api/src/routes/ranks.ts
+++ b/api/src/routes/ranks.ts
@@ -1,6 +1,7 @@
 import { MemberState } from "@app/shared/types/member";
 import { requireLogin, requireMemberState, requireRole } from "../middleware/auth";
-import { getAllRanks, insertMemberRank } from "../services/rankService";
+import { batchInsertMemberRank, getAllRanks, getPromotionHistorySummary, getPromotionsOnDay, insertMemberRank } from "../services/rankService";
+import { BatchPromotion, BatchPromotionMember } from '@app/shared/schemas/promotionSchema'
 
 import express = require('express');
 const r = express.Router();
@@ -11,11 +12,13 @@ r.use(requireLogin)
 ur.use(requireLogin)
 
 //insert a new latest rank for a user
-ur.post('/', [requireRole(["17th Command", "17th Administrator", "17th HQ"]), requireMemberState(MemberState.Member)], async (req, res) => {
-    3
+ur.post('/', [requireRole(["17th Command", "17th Administrator", "17th HQ"]), requireMemberState(MemberState.Member)], async (req: express.Request, res: express.Response) => {
     try {
-        const change = req.body?.change;
-        await insertMemberRank(change.member_id, change.rank_id, change.date);
+        const change = req.body.promotions as BatchPromotionMember[];
+        const author = req.user.id;
+        if (!change) res.sendStatus(400);
+
+        await batchInsertMemberRank(change, author);
 
         res.sendStatus(201);
     } catch (err) {
@@ -24,6 +27,31 @@ ur.post('/', [requireRole(["17th Command", "17th Administrator", "17th HQ"]), re
     }
 });
 
+ur.get('/', async (req: express.Request, res: express.Response) => {
+    try {
+        const promos = await getPromotionHistorySummary();
+        console.log(promos);
+        res.status(200).json(promos);
+    } catch (err) {
+        console.error(err);
+        res.status(500).json({ error: 'Internal server error' });
+    }
+});
+
+ur.get('/:day', async (req: express.Request, res: express.Response) => {
+    try {
+        if (!req.params.day) res.sendStatus(400);
+
+        let day = new Date(req.params.day)
+        const promos = await getPromotionsOnDay(day);
+        console.log(promos);
+        res.status(200).json(promos);
+    } catch (err) {
+        console.error(err);
+        res.status(500).json({ error: 'Internal server error' });
+    }
+})
+
 //get all ranks
 r.get('/', async (req, res) => {
     try {
diff --git a/api/src/services/rankService.ts b/api/src/services/rankService.ts
index ada4ea0..08b6804 100644
--- a/api/src/services/rankService.ts
+++ b/api/src/services/rankService.ts
@@ -1,4 +1,8 @@
+import { BatchPromotion, BatchPromotionMember } from "@app/shared/schemas/promotionSchema";
+import { PromotionSummary } from "@app/shared/types/rank"
 import pool from "../db";
+import { PagedData } from "@app/shared/types/pagination";
+import { toDateTime } from "@app/shared/utils/time";
 
 export async function getAllRanks() {
     const rows = await pool.query(
@@ -30,3 +34,78 @@ export async function insertMemberRank(member_id: number, rank_id: number, date?
 
     await pool.query(sql, params);
 }
+
+
+export async function batchInsertMemberRank(promos: BatchPromotionMember[], author: number) {
+    try {
+        var con = await pool.getConnection();
+        console.log(promos);
+        promos.forEach(p => {
+            con.query(`CALL sp_update_member_rank(?, ?, ?, ?, ?, ?)`, [p.member_id, p.rank_id, author, author, "Rank Change", toDateTime(new Date(p.start_date))])
+        });
+
+        con.commit();
+        return
+    } catch (error) {
+        throw error; //pass it up
+    } finally {
+        con.release();
+    }
+}
+
+export async function getPromotionHistorySummary(page: number = 1, pageSize: number = 15): Promise<PagedData<PromotionSummary>> {
+
+    const offset = (page - 1) * pageSize;
+
+    let sql = `SELECT
+                    DATE(start_date) AS entry_day
+                FROM
+                    members_ranks
+                GROUP BY
+                    entry_day
+                ORDER BY
+                    entry_day DESC
+                LIMIT ? OFFSET ?;`
+
+    let promoList: PromotionSummary[] = await pool.query(sql, [pageSize, offset]) as PromotionSummary[];
+
+    let loaCount = Number((await pool.query(`SELECT
+                                                COUNT(*) AS total_grouped_days_count
+                                            FROM
+                                                (
+                                                    SELECT DISTINCT DATE(start_date)
+                                                    FROM members_ranks
+                                                ) AS grouped_days;`))[0]);
+
+    console.log(loaCount);
+    let pageCount = loaCount / pageSize;
+
+    let output: PagedData<PromotionSummary> = { data: promoList, pagination: { page: page, pageSize: pageSize, total: loaCount, totalPages: pageCount } }
+    return output;
+}
+
+export async function getPromotionsOnDay(day: Date): Promise<BatchPromotion[]> {
+
+    // Convert the Date object to a 'YYYY-MM-DD' string for the SQL filter
+    // This assumes pool.query is used with a database that accepts this format for comparison.
+    const dayString = day.toISOString().split('T')[0];
+
+    // SQL query to fetch all records from members_unit for the specified day
+    let sql = `
+        SELECT
+            member_id,
+            unit_id AS rank_id,  -- Using unit_id as a proxy for rank_id based on the data structure
+            start_date
+        FROM
+            members_unit
+        WHERE
+            DATE(start_date) = ?
+        ORDER BY
+            start_date ASC;
+    `;
+
+
+    let batchPromotion = await pool.query(sql, [dayString]) as BatchPromotion[];
+
+    return batchPromotion;
+}
\ No newline at end of file
diff --git a/shared/schemas/promotionSchema.ts b/shared/schemas/promotionSchema.ts
index 80ebaac..6c78b75 100644
--- a/shared/schemas/promotionSchema.ts
+++ b/shared/schemas/promotionSchema.ts
@@ -6,7 +6,6 @@ export const batchPromotionMemberSchema = z.object({
     start_date: z.string().refine((val) => !isNaN(Date.parse(val)), {
         message: "Must be a valid date",
     }),
-    reason: z.string({ required_error: "Reason is required" }).max(50, "Reason too long"),
 });
 
 export const batchPromotionSchema = z.object({
@@ -27,3 +26,7 @@ export const batchPromotionSchema = z.object({
             }
         });
     });
+
+
+export type BatchPromotion = z.infer<typeof batchPromotionSchema>;
+export type BatchPromotionMember = z.infer<typeof batchPromotionMemberSchema>;
\ No newline at end of file
diff --git a/shared/types/rank.ts b/shared/types/rank.ts
index 2b68591..f08ef68 100644
--- a/shared/types/rank.ts
+++ b/shared/types/rank.ts
@@ -5,3 +5,7 @@ export type Rank = {
   category: string
   sortOrder: number
 }
+
+export interface PromotionSummary {
+  entry_day: Date;
+}
\ No newline at end of file
diff --git a/ui/src/api/rank.ts b/ui/src/api/rank.ts
index 278d100..52f8631 100644
--- a/ui/src/api/rank.ts
+++ b/ui/src/api/rank.ts
@@ -1,4 +1,6 @@
+import { BatchPromotion } from '@shared/schemas/promotionSchema';
 import { Rank } from '@shared/types/rank'
+
 //  @ts-ignore
 const addr = import.meta.env.VITE_APIHOST;
 
@@ -15,19 +17,19 @@ export async function getAllRanks(): Promise<Rank[]> {
 }
 
 // Placeholder: submit a rank change
-export async function submitRankChange(member_id: number, rank_id: number, date: string): Promise<{ ok: boolean }> {
+export async function submitRankChange(promo: BatchPromotion) {
   const res = await fetch(`${addr}/memberRanks`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
     },
-    body: JSON.stringify({ change: { member_id, rank_id, date } }),
+    credentials: 'include',
+    body: JSON.stringify(promo),
   })
 
   if (res.ok) {
-    return { ok: true }
+    return
   } else {
-    console.error("Failed to submit rank change")
-    return { ok: false }
+    throw new Error("Failed to submit rank change: Server error");
   }
 }
\ No newline at end of file
diff --git a/ui/src/components/promotions/promotionForm.vue b/ui/src/components/promotions/promotionForm.vue
index f338718..786c6b0 100644
--- a/ui/src/components/promotions/promotionForm.vue
+++ b/ui/src/components/promotions/promotionForm.vue
@@ -21,29 +21,32 @@ import Button from '../ui/button/Button.vue';
 import FieldError from '../ui/field/FieldError.vue';
 import { getAllLightMembers } from '@/api/member';
 import { Rank } from '@shared/types/rank';
-import { getAllRanks } from '@/api/rank';
+import { getAllRanks, submitRankChange } from '@/api/rank';
 import { error } from 'console';
 import Input from '../ui/input/Input.vue';
 import Field from '../ui/field/Field.vue';
 
-const { handleSubmit, errors, values } = useForm({
+const { handleSubmit, errors, values, resetForm } = useForm({
     validationSchema: toTypedSchema(batchPromotionSchema),
     validateOnMount: false,
 })
 
 const submitForm = handleSubmit(
-    (vals) => {
-        console.log("VALID SUBMIT", vals);
-    },
-    (errors) => {
-        console.log("INVALID SUBMIT", errors);
+    async (vals) => {
+        try {
+            let output = vals;
+            output.promotions.map(p => p.start_date = new Date(p.start_date).toISOString())
+            await submitRankChange(output);
+            formSubmitted.value = true;
+        } catch (error) {
+            submitError.value = error;
+            console.error(error);
+        }
     }
 );
 
-function onSubmit(vals) {
-    console.log('hi')
-    console.log(vals);
-}
+const submitError = ref<string>(null);
+const formSubmitted = ref(false);
 
 const allmembers = ref<MemberLight[]>([]);
 const allRanks = ref<Rank[]>([]);
@@ -105,157 +108,146 @@ onMounted(async () => {
 </script>
 
 <template>
-    <form id="trainingForm" @submit.prevent="submitForm" class="w-full min-w-0 flex flex-col gap-6">
-        <VeeFieldArray name="promotions" v-slot="{ fields, push, remove }">
-            <FieldSet class="w-full min-w-0">
-                <div class="flex flex-col gap-2">
-                    <FieldLegend class="text-lg tracking-tight">
-                        Attendees
-                    </FieldLegend>
-<!-- 
-                    <FieldDescription>
-                        Add members who attended this session.
-                    </FieldDescription> -->
-
-                    <div class="h-4">
-                        <p v-if="errors.promotions && typeof errors.promotions === 'string'"
-                            class="text-sm text-red-500">
-                            {{ errors.promotions }}
-                        </p>
-                    </div>
-
-                    <!-- TABLE SHELL -->
-                    <div class="relative w-full min-w-0">
-                        <FieldGroup class="min-w-max">
-
-                            <!-- HEADER -->
-                            <div class="grid grid-cols-[200px_200px_150px_500px_1fr_auto]
-                       gap-3 px-1 -mb-4
-                       text-sm font-medium text-muted-foreground">
-                                <div>Member</div>
-                                <div>Rank</div>
-                                <div>Date</div>
-                                <div>Reason</div>
-                                <div></div>
-                                <div></div>
+    <div class="w-xl">
+        <form v-if="!formSubmitted" id="trainingForm" @submit.prevent="submitForm"
+            class="w-full min-w-0 flex flex-col gap-6">
+            <VeeFieldArray name="promotions" v-slot="{ fields, push, remove }">
+                <FieldSet class="w-full min-w-0">
+                    <div class="flex flex-col gap-2">
+                        <div>
+                            <FieldLegend class="scroll-m-20 text-2xl font-semibold tracking-tight">
+                                Promotion Form
+                            </FieldLegend>
+                            <div class="h-6">
+                                <p v-if="errors.promotions && typeof errors.promotions === 'string'"
+                                    class="text-sm text-red-500">
+                                    {{ errors.promotions }}
+                                </p>
                             </div>
-
-                            <!-- BODY -->
-                            <div class="flex flex-col gap-2">
-                                <div v-for="(row, index) in fields" :key="row.key" class="grid grid-cols-[200px_200px_150px_1fr_auto]
-                         gap-3 items-start">
-                                    <!-- Member -->
-                                    <VeeField :name="`promotions[${index}].member_id`" v-slot="{ field, errors }">
-                                        <div class="flex flex-col min-w-0">
-                                            <Combobox :model-value="field.value" @update:model-value="field.onChange"
-                                                :ignore-filter="true">
-                                                <ComboboxAnchor>
-                                                    <ComboboxInput class="w-full pl-3" placeholder="Search members…"
-                                                        :display-value="id =>
-                                                            memberById.get(id)?.displayName ||
-                                                            memberById.get(id)?.username
-                                                            " @input="memberSearch = $event.target.value" />
-                                                </ComboboxAnchor>
-
-                                                <ComboboxList>
-                                                    <ComboboxEmpty>No results</ComboboxEmpty>
-                                                    <ComboboxGroup>
-                                                        <div
-                                                            class="max-h-80 overflow-y-auto min-w-[12rem] scrollbar-themed">
-                                                            <ComboboxItem v-for="member in filteredMembers"
-                                                                :key="member.id" :value="member.id">
-                                                                {{ member.displayName || member.username }}
-                                                                <ComboboxItemIndicator>
-                                                                    <Check />
-                                                                </ComboboxItemIndicator>
-                                                            </ComboboxItem>
-                                                        </div>
-                                                    </ComboboxGroup>
-                                                </ComboboxList>
-                                            </Combobox>
-                                            <div class="h-5">
-                                                <FieldError v-if="errors.length" :errors="errors" />
-                                            </div>
-                                        </div>
-                                    </VeeField>
-
-                                    <!-- Rank -->
-                                    <VeeField :name="`promotions[${index}].rank_id`" v-slot="{ field, errors }">
-                                        <div class="flex flex-col min-w-0">
-                                            <Combobox :model-value="field.value" @update:model-value="field.onChange"
-                                                :ignore-filter="true">
-                                                <ComboboxAnchor>
-                                                    <ComboboxInput class="w-full pl-3" placeholder="Select rank…"
-                                                        :display-value="id => rankById.get(id)?.name"
-                                                        @input="rankSearch = $event.target.value" />
-                                                </ComboboxAnchor>
-
-                                                <ComboboxList>
-                                                    <ComboboxEmpty>No results</ComboboxEmpty>
-                                                    <ComboboxGroup>
-                                                        <ComboboxItem v-for="rank in filteredRanks" :key="rank.id"
-                                                            :value="rank.id">
-                                                            {{ rank.name }}
-                                                            <ComboboxItemIndicator>
-                                                                <Check />
-                                                            </ComboboxItemIndicator>
-                                                        </ComboboxItem>
-                                                    </ComboboxGroup>
-                                                </ComboboxList>
-                                            </Combobox>
-
-                                            <div class="h-5">
-                                                <FieldError v-if="errors.length" :errors="errors" />
-                                            </div>
-                                        </div>
-                                    </VeeField>
-
-                                    <!-- Date -->
-                                    <VeeField :name="`promotions[${index}].start_date`" v-slot="{ field, errors }">
-                                        <Field>
-                                            <div>
-                                                <Input type="date" v-bind="field" />
+                        </div>
+                        <!-- TABLE SHELL -->
+                        <div class="">
+                            <FieldGroup class="">
+                                <!-- HEADER -->
+                                <div class="grid grid-cols-[200px_200px_150px_1fr_auto]
+                           gap-3 px-1 -mb-4
+                           text-sm font-medium text-muted-foreground">
+                                    <div>Member</div>
+                                    <div>Rank</div>
+                                    <div>Date</div>
+                                    <div></div>
+                                    <div></div>
+                                </div>
+                                <!-- BODY -->
+                                <div class="flex flex-col gap-2">
+                                    <div v-for="(row, index) in fields" :key="row.key" class="grid grid-cols-[200px_200px_150px_1fr_auto]
+                             gap-3 items-start">
+                                        <!-- Member -->
+                                        <VeeField :name="`promotions[${index}].member_id`" v-slot="{ field, errors }">
+                                            <div class="flex flex-col min-w-0">
+                                                <Combobox :model-value="field.value" @update:model-value="field.onChange"
+                                                    :ignore-filter="true">
+                                                    <ComboboxAnchor>
+                                                        <ComboboxInput class="w-full pl-3" placeholder="Search members…"
+                                                            :display-value="id =>
+                                                                memberById.get(id)?.displayName ||
+                                                                memberById.get(id)?.username
+                                                                " @input="memberSearch = $event.target.value" />
+                                                    </ComboboxAnchor>
+                                                    <ComboboxList>
+                                                        <ComboboxEmpty>No results</ComboboxEmpty>
+                                                        <ComboboxGroup>
+                                                            <div
+                                                                class="max-h-80 overflow-y-auto min-w-[12rem] scrollbar-themed">
+                                                                <ComboboxItem v-for="member in filteredMembers"
+                                                                    :key="member.id" :value="member.id">
+                                                                    {{ member.displayName || member.username }}
+                                                                    <ComboboxItemIndicator>
+                                                                        <Check />
+                                                                    </ComboboxItemIndicator>
+                                                                </ComboboxItem>
+                                                            </div>
+                                                        </ComboboxGroup>
+                                                    </ComboboxList>
+                                                </Combobox>
                                                 <div class="h-5">
                                                     <FieldError v-if="errors.length" :errors="errors" />
                                                 </div>
                                             </div>
-                                        </Field>
-
-                                    </VeeField>
-
-                                    <!-- Reason -->
-                                    <VeeField :name="`promotions[${index}].reason`" v-slot="{ field, errors }">
-                                        <Field>
-                                            <div>
-                                                <Input v-bind="field" />
+                                        </VeeField>
+                                        <!-- Rank -->
+                                        <VeeField :name="`promotions[${index}].rank_id`" v-slot="{ field, errors }">
+                                            <div class="flex flex-col min-w-0">
+                                                <Combobox :model-value="field.value" @update:model-value="field.onChange"
+                                                    :ignore-filter="true">
+                                                    <ComboboxAnchor>
+                                                        <ComboboxInput class="w-full pl-3" placeholder="Select rank…"
+                                                            :display-value="id => rankById.get(id)?.name"
+                                                            @input="rankSearch = $event.target.value" />
+                                                    </ComboboxAnchor>
+                                                    <ComboboxList>
+                                                        <ComboboxEmpty>No results</ComboboxEmpty>
+                                                        <ComboboxGroup>
+                                                            <div
+                                                                class="max-h-80 overflow-y-auto min-w-[12rem] scrollbar-themed">
+                                                                <ComboboxItem v-for="rank in filteredRanks" :key="rank.id"
+                                                                    :value="rank.id">
+                                                                    {{ rank.name }}
+                                                                    <ComboboxItemIndicator>
+                                                                        <Check />
+                                                                    </ComboboxItemIndicator>
+                                                                </ComboboxItem>
+                                                            </div>
+                                                        </ComboboxGroup>
+                                                    </ComboboxList>
+                                                </Combobox>
                                                 <div class="h-5">
                                                     <FieldError v-if="errors.length" :errors="errors" />
                                                 </div>
                                             </div>
-                                        </Field>
-                                    </VeeField>
-
-
-                                    <!-- Remove -->
-                                    <div class="flex justify-center">
-                                        <Button type="button" variant="ghost" size="icon" @click="remove(index)">
-                                            <X />
-                                        </Button>
+                                        </VeeField>
+                                        <!-- Date -->
+                                        <VeeField :name="`promotions[${index}].start_date`" v-slot="{ field, errors }">
+                                            <Field>
+                                                <div>
+                                                    <Input type="date" v-bind="field" />
+                                                    <div class="h-5">
+                                                        <FieldError v-if="errors.length" :errors="errors" />
+                                                    </div>
+                                                </div>
+                                            </Field>
+                                        </VeeField>
+                                        <!-- Remove -->
+                                        <div class="flex justify-end">
+                                            <Button type="button" variant="ghost" size="icon" @click="remove(index)">
+                                                <X />
+                                            </Button>
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
-                        </FieldGroup>
+                            </FieldGroup>
+                        </div>
+                        <Button type="button" @click="push({})" class="w-full" variant="outline">
+                            <Plus /> Member
+                        </Button>
                     </div>
-
-                    <Button type="button" @click="push({})" class="" variant="outline">
-                        <Plus /> Member
-                    </Button>
+                </FieldSet>
+            </VeeFieldArray>
+            <div class="flex justify-end items-center gap-5">
+                <p v-if="submitError" class="text-destructive">{{ submitError }}</p>
+                <Button type="submit">Submit</Button>
+            </div>
+        </form>
+        <div v-else>
+            <div class="flex flex-col max-w-sm justify-center gap-4 py-24 mx-auto">
+                <div class="text-left">
+                    <h2 class="text-2xl font-semibold mb-2">Successfully Submitted</h2>
+                    <p class="text-muted-foreground">Your promotions have been recorded.</p>
                 </div>
-            </FieldSet>
-        </VeeFieldArray>
-
-        <div class="flex justify-end">
-            <Button type="submit">Submit</Button>
+                <Button @click="() => { formSubmitted = false; resetForm(); }" variant="secondary">
+                    Submit Another
+                </Button>
+            </div>
         </div>
-    </form>
+    </div>
 </template>
diff --git a/ui/src/components/promotions/promotionList.vue b/ui/src/components/promotions/promotionList.vue
new file mode 100644
index 0000000..a8ccb77
--- /dev/null
+++ b/ui/src/components/promotions/promotionList.vue
@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { pagination } from '@shared/types/pagination';
+import { ref } from 'vue';
+
+const expanded = ref<number | null>(null);
+const hoverID = ref<number | null>(null);
+
+const pageNum = ref<number>(1);
+const pageData = ref<pagination>();
+
+const pageSize = ref<number>(15)
+const pageSizeOptions = [10, 15, 30]
+
+function setPageSize(size: number) {
+    pageSize.value = size
+    pageNum.value = 1;
+    // loadLOAs();
+}
+
+function setPage(pagenum: number) {
+    pageNum.value = pagenum;
+    // loadLOAs();
+}
+</script>
+<template>
+    <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>
+                    <template v-for="post in LOAList" :key="post.id">
+                        <TableRow class="hover:bg-muted/50 cursor-pointer" @click="expanded = post.id"
+                            @mouseenter="hoverID = post.id" @mouseleave="hoverID = null" :class="{
+                                'border-b-0': expanded === post.id,
+                                'bg-muted/50': hoverID === post.id
+                            }">
+                            <TableCell class="font-medium">
+                                <MemberCard :member-id="post.member_id"></MemberCard>
+                            </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">
+                                        <Button variant="ghost">
+                                            <Ellipsis class="size-6"></Ellipsis>
+                                        </Button>
+                                    </DropdownMenuTrigger>
+                                    <DropdownMenuContent>
+                                        <DropdownMenuItem v-if="!post.closed && props.adminMode"
+                                            @click="isExtending = true; targetLOA = post">
+                                            Extend
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem v-if="!post.closed" :variant="'destructive'"
+                                            @click="cancelAndReload(post.id)">{{ loaStatus(post) === 'Upcoming' ?
+                                                'Cancel' :
+                                                'End' }}
+                                        </DropdownMenuItem>
+                                        <!-- Fallback: no actions available -->
+                                        <p v-if="post.closed || (!props.adminMode && post.closed)"
+                                            class="p-2 text-center text-sm">
+                                            No actions
+                                        </p>
+                                    </DropdownMenuContent>
+                                </DropdownMenu>
+                            </TableCell>
+                            <TableCell>
+                                <Button v-if="expanded === post.id" @click.stop="expanded = null" variant="ghost">
+                                    <ChevronUp class="size-6" />
+                                </Button>
+                                <Button v-else @click.stop="expanded = post.id" variant="ghost">
+                                    <ChevronDown class="size-6" />
+                                </Button>
+                            </TableCell>
+                        </TableRow>
+                        <TableRow v-if="expanded === post.id" @mouseenter="hoverID = post.id"
+                            @mouseleave="hoverID = null" :class="{ 'bg-muted/50 border-t-0': hoverID === post.id }">
+                            <TableCell :colspan="8" class="p-0">
+                                <div class="w-full p-3 mb-6 space-y-3">
+                                    <div class="flex justify-between items-start gap-4">
+                                        <div class="flex-1">
+                                            <!-- Title -->
+                                            <p class="text-md font-semibold text-foreground">
+                                                Reason
+                                            </p>
+
+                                            <!-- Content -->
+                                            <p
+                                                class="mt-1 text-md whitespace-pre-wrap leading-relaxed text-muted-foreground">
+                                                {{ post.reason }}
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </TableCell>
+                        </TableRow>
+
+                    </template>
+                </TableBody>
+            </Table>
+            <div class="mt-5 flex justify-between">
+                <div></div>
+                <Pagination v-slot="{ page }" :items-per-page="pageData?.pageSize || 10" :total="pageData?.total || 10"
+                    :default-page="2" :page="pageNum" @update:page="setPage">
+                    <PaginationContent v-slot="{ items }">
+                        <PaginationPrevious />
+                        <template v-for="(item, index) in items" :key="index">
+                            <PaginationItem v-if="item.type === 'page'" :value="item.value"
+                                :is-active="item.value === page">
+                                {{ item.value }}
+                            </PaginationItem>
+                        </template>
+                        <PaginationEllipsis :index="4" />
+                        <PaginationNext />
+                    </PaginationContent>
+                </Pagination>
+                <div class="flex items-center gap-3 text-sm">
+                    <p class="text-muted-foreground text-nowrap">Per page:</p>
+
+                    <button v-for="size in pageSizeOptions" :key="size" @click="setPageSize(size)"
+                        class="px-2 py-1 rounded transition-colors" :class="{
+                            'bg-muted font-semibold': pageSize === size,
+                            'hover:bg-muted/50': pageSize !== size
+                        }">
+                        {{ size }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/ui/src/pages/RankChange.vue b/ui/src/pages/RankChange.vue
index b320f07..f5fb314 100644
--- a/ui/src/pages/RankChange.vue
+++ b/ui/src/pages/RankChange.vue
@@ -1,120 +1,24 @@
 <script setup lang="ts">
-import { Check, Search } from "lucide-vue-next"
-import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList } from "@/components/ui/combobox"
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
-import { onMounted, ref } from "vue";
-import { getAllLightMembers } from "@/api/member";
-import { MemberLight } from "@shared/types/member";
-import { cn } from "@/lib/utils"
-import { CalendarIcon } from "lucide-vue-next"
-import { batchPromotionSchema } from '@shared/schemas/promotionSchema'
 import PromotionForm from "@/components/promotions/promotionForm.vue";
-
-// import {
-//     DateFormatter,
-
-//     DateValue,
-
-//     getLocalTimeZone,
-//     today,
-// } from "@internationalized/date"
-
-// import Button from "@/components/ui/button/Button.vue";
-// import Calendar from "@/components/ui/calendar/Calendar.vue";
-
-// const members = ref<MemberLight[]>([])
-// const ranks = ref<Rank[]>([])
-// const date = ref<DateValue>(today(getLocalTimeZone()))
-
-
-// const currentMember = ref<MemberLight | null>(null);
-// const currentRank = ref<Rank | null>(null);
-// onMounted(async () => {
-//     members.value = await getAllLightMembers();
-//     ranks.value = await getRanks();
-// });
-
-// const df = new DateFormatter("en-US", {
-//     dateStyle: "long",
-// })
-
-// function submit() {
-//     submitRankChange(currentMember.value.member_id, currentRank.value?.id, date.value.toString())
-//         .then(() => {
-//             alert("Rank change submitted!");
-//             currentMember.value = null;
-//             currentRank.value = null;
-//             date.value = today(getLocalTimeZone());
-//         })
-//         .catch((err) => {
-//             console.error(err);
-//             alert("Failed to submit rank change.");
-//         });
-// }
-
+import PromotionList from "@/components/promotions/promotionList.vue";
 </script>
 
 <template>
-    <div class="mx-auto w-full max-w-7xl px-4">
-        <PromotionForm />
-    </div>
-    <!-- <div class="flex max-w-5xl justify-center gap-5 mx-auto mt-10">
-        <Combobox v-model="currentMember">
-            <ComboboxAnchor class="w-[300px]">
-                <ComboboxInput placeholder="Search members..." class="w-full pl-9"
-                    :display-value="(v) => v ? v.member_name : ''" />
-            </ComboboxAnchor>
-            <ComboboxList class="w-[300px]">
-                <ComboboxEmpty class="text-muted-foreground">No results</ComboboxEmpty>
-                <ComboboxGroup>
-                    <template v-for="member in members" :key="member.member_id">
-                        <ComboboxItem :value="member"
-                            class="data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative cursor-pointer select-none px-2 py-1.5">
-                            {{ member.member_name }}
-                            <ComboboxItemIndicator class="absolute left-2 inline-flex items-center">
-                                <Check class="h-4 w-4" />
-                            </ComboboxItemIndicator>
-                        </ComboboxItem>
-                    </template>
-</ComboboxGroup>
-</ComboboxList>
-</Combobox> -->
+    <div class="mx-auto mt-10 max-w-7xl px-8">
+        <div class="flex max-h-[70vh] gap-8">
 
-    <!-- Rank Combobox -->
-    <!-- <Combobox v-model="currentRank">
-            <ComboboxAnchor class="w-[300px]">
-                <ComboboxInput placeholder="Search ranks..." class="w-full pl-9"
-                    :display-value="(v) => v ? v.short_name : ''" />
-            </ComboboxAnchor>
-            <ComboboxList class="w-[300px]">
-                <ComboboxEmpty class="text-muted-foreground">No results</ComboboxEmpty>
-                <ComboboxGroup>
-                    <template v-for="rank in ranks" :key="rank.id">
-                        <ComboboxItem :value="rank"
-                            class="data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative cursor-pointer select-none px-2 py-1.5">
-                            {{ rank.short_name }}
-                            <ComboboxItemIndicator class="absolute left-2 inline-flex items-center">
-                                <Check class="h-4 w-4" />
-                            </ComboboxItemIndicator>
-                        </ComboboxItem>
-                    </template>
-                </ComboboxGroup>
-            </ComboboxList>
-        </Combobox>
-        <Popover>
-            <PopoverTrigger as-child>
-                <Button variant="outline" :class="cn(
-                    'w-[280px] justify-start text-left font-normal',
-                    !date && 'text-muted-foreground',
-                )">
-                    <CalendarIcon class="mr-2 h-4 w-4" />
-                    {{ date ? df.format(date.toDate(getLocalTimeZone())) : "Pick a date" }}
-                </Button>
-            </PopoverTrigger>
-            <PopoverContent class="w-auto p-0">
-                <Calendar v-model="date" initial-focus />
-            </PopoverContent>
-        </Popover>
-        <Button @click="submit">Submit</Button>
-    </div> -->
-</template>
\ No newline at end of file
+            <!-- LEFT COLUMN -->
+            <div class="flex-1 border-r pr-8">
+                <!-- <PromotionList></PromotionList> -->
+            </div>
+
+            <!-- RIGHT COLUMN -->
+            <div class="flex-1 flex justify-center pl-8">
+                <div class="w-full max-w-3xl">
+                    <PromotionForm />
+                </div>
+            </div>
+
+        </div>
+    </div>
+</template>