diff --git a/api/src/services/rankService.ts b/api/src/services/rankService.ts
index 08b6804..cc10f94 100644
--- a/api/src/services/rankService.ts
+++ b/api/src/services/rankService.ts
@@ -1,5 +1,5 @@
 import { BatchPromotion, BatchPromotionMember } from "@app/shared/schemas/promotionSchema";
-import { PromotionSummary } from "@app/shared/types/rank"
+import { PromotionDetails, PromotionSummary } from "@app/shared/types/rank"
 import pool from "../db";
 import { PagedData } from "@app/shared/types/pagination";
 import { toDateTime } from "@app/shared/utils/time";
@@ -61,6 +61,7 @@ export async function getPromotionHistorySummary(page: number = 1, pageSize: num
                     DATE(start_date) AS entry_day
                 FROM
                     members_ranks
+                WHERE reason = 'Rank Change'
                 GROUP BY
                     entry_day
                 ORDER BY
@@ -75,6 +76,7 @@ export async function getPromotionHistorySummary(page: number = 1, pageSize: num
                                                 (
                                                     SELECT DISTINCT DATE(start_date)
                                                     FROM members_ranks
+                                                    WHERE reason = 'Rank Change'
                                                 ) AS grouped_days;`))[0]);
 
     console.log(loaCount);
@@ -84,28 +86,23 @@ export async function getPromotionHistorySummary(page: number = 1, pageSize: num
     return output;
 }
 
-export async function getPromotionsOnDay(day: Date): Promise<BatchPromotion[]> {
+export async function getPromotionsOnDay(day: Date): Promise<PromotionDetails[]> {
 
-    // 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];
+    const dayString = toDateTime(day);
 
     // 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;
+        SELECT 
+        mr.member_id,
+            mr.created_by_id,
+            r.short_name
+        FROM members_ranks AS mr
+            LEFT JOIN ranks AS r ON r.id = mr.rank_id
+        WHERE DATE(mr.start_date) = ? && mr.reason = 'Rank Change'
+        ORDER BY mr.start_date ASC;
     `;
 
-
-    let batchPromotion = await pool.query(sql, [dayString]) as BatchPromotion[];
+    let batchPromotion = await pool.query(sql, [dayString]) as PromotionDetails[];
 
     return batchPromotion;
 }
\ No newline at end of file
diff --git a/shared/types/rank.ts b/shared/types/rank.ts
index f08ef68..6ec4f3a 100644
--- a/shared/types/rank.ts
+++ b/shared/types/rank.ts
@@ -8,4 +8,10 @@ export type Rank = {
 
 export interface PromotionSummary {
   entry_day: Date;
+}
+
+export interface PromotionDetails {
+  member_id: number;
+  short_name: string;
+  created_by_id: number;
 }
\ No newline at end of file
diff --git a/ui/src/api/rank.ts b/ui/src/api/rank.ts
index 1c86d9e..e391a83 100644
--- a/ui/src/api/rank.ts
+++ b/ui/src/api/rank.ts
@@ -1,6 +1,6 @@
 import { BatchPromotion, BatchPromotionMember } from '@shared/schemas/promotionSchema';
 import { PagedData } from '@shared/types/pagination';
-import { PromotionSummary, Rank } from '@shared/types/rank'
+import { PromotionDetails, PromotionSummary, Rank } from '@shared/types/rank'
 
 //  @ts-ignore
 const addr = import.meta.env.VITE_APIHOST;
@@ -60,8 +60,9 @@ export async function getPromoHistory(page?: number, pageSize?: number): Promise
     });
 }
 
-export async function getPromotionsOnDay(day: Date): Promise<BatchPromotionMember[]> {
-    const res = await fetch(`${addr}/memberRanks/${day}`, {
+export async function getPromotionsOnDay(day: Date): Promise<PromotionDetails[]> {
+    console.log(day.toISOString());
+    const res = await fetch(`${addr}/memberRanks/${day.toISOString()}`, {
         credentials: 'include',
     })
 
diff --git a/ui/src/components/promotions/promotionList.vue b/ui/src/components/promotions/promotionList.vue
index 2112718..66b05dd 100644
--- a/ui/src/components/promotions/promotionList.vue
+++ b/ui/src/components/promotions/promotionList.vue
@@ -71,8 +71,11 @@ function formatDate(date: Date): string {
 }
 </script>
 <template>
-    <div>
-        <div class="max-w-7xl w-full mx-auto">
+    <div class="flex flex-col max-w-7xl w-full">
+        <p class="scroll-m-20 text-2xl font-semibold tracking-tight mb-3">
+            Promotion History
+        </p>
+        <div class="w-full mx-auto">
             <Table>
                 <TableHeader>
                     <TableRow>
diff --git a/ui/src/components/promotions/promotionListDay.vue b/ui/src/components/promotions/promotionListDay.vue
index bd3d8c8..3e4dc36 100644
--- a/ui/src/components/promotions/promotionListDay.vue
+++ b/ui/src/components/promotions/promotionListDay.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import { getPromotionsOnDay } from '@/api/rank';
-import { BatchPromotionMember } from '@shared/schemas/promotionSchema';
 import { onMounted, ref } from 'vue';
 import MemberCard from '../members/MemberCard.vue';
 import Spinner from '../ui/spinner/Spinner.vue';
+import { PromotionDetails } from '@shared/types/rank';
 
 
 const props = defineProps<{
     date: Date
 }>()
 
-const promoList = ref<BatchPromotionMember[]>();
+const promoList = ref<PromotionDetails[]>();
 const loading = ref(true);
 
 onMounted(async () => {
@@ -33,14 +33,14 @@ onMounted(async () => {
 
             <tbody>
                 <tr v-for="p in promoList" :key="p.member_id" class="border-b transition-colors">
-                    <td class="px-4 py-4">
+                    <td class="px-2 py-2">
                         <MemberCard :member-id="p.member_id" />
                     </td>
-                    <td class="px-4 py-4 text-sm">
-                        {{ p.rank_id }}
+                    <td class="px-4 py-2 text-sm">
+                        {{ p.short_name }}
                     </td>
-                    <td class="px-4 py-4 text-sm text-right">
-                        guy1
+                    <td class="px-2 py-2 text-sm text-right">
+                        <MemberCard :member-id="p.created_by_id" />
                     </td>
                 </tr>
             </tbody>