diff --git a/api/src/services/CourseSerivce.ts b/api/src/services/CourseSerivce.ts
index 059dcfd..bc8d283 100644
--- a/api/src/services/CourseSerivce.ts
+++ b/api/src/services/CourseSerivce.ts
@@ -18,7 +18,7 @@ function buildAttendee(row: RawAttendeeRow): CourseAttendee {
         updated_at: row.updated_at,
         remarks: row.remarks,
         attendee_role_id: row.attendee_role_id,
-
+        attendee_name: row.attendee_name,
         role: row.role_id
             ? {
                 id: row.role_id,
@@ -35,6 +35,7 @@ function buildAttendee(row: RawAttendeeRow): CourseAttendee {
 export async function getCourseEventAttendees(id: number): Promise<CourseAttendee[]> {
     const sql = `SELECT
                 ca.*,
+                mem.name AS attendee_name,
                 ar.id AS role_id,
                 ar.name AS role_name,
                 ar.description AS role_description,
@@ -43,6 +44,7 @@ export async function getCourseEventAttendees(id: number): Promise<CourseAttende
                 ar.updated_at AS role_updated_at
                 FROM course_attendees ca
                 LEFT JOIN course_attendee_roles ar ON ar.id = ca.attendee_role_id
+                LEFT JOIN members mem ON ca.attendee_id = mem.id
                 WHERE ca.course_event_id = ?;`;
 
     const res: RawAttendeeRow[] = await pool.query(sql, [id]);
diff --git a/shared/types/course.ts b/shared/types/course.ts
index e871c18..50c7315 100644
--- a/shared/types/course.ts
+++ b/shared/types/course.ts
@@ -42,6 +42,8 @@ export interface CourseAttendee {
   created_at: string;             // datetime → ISO string
   updated_at: string;             // datetime → ISO string
   remarks: string | null;
+
+  attendee_name: string | null;
 }
 
 export interface CourseAttendeeRole {
@@ -68,6 +70,8 @@ export interface RawAttendeeRow {
   role_deleted: number | null;
   role_created_at: string | null;
   role_updated_at: string | null;
+
+  attendee_name: string | null;
 }
 
 export interface CourseEventSummary {
diff --git a/ui/src/pages/TrainingReport.vue b/ui/src/pages/TrainingReport.vue
index 15abf3f..3372fb6 100644
--- a/ui/src/pages/TrainingReport.vue
+++ b/ui/src/pages/TrainingReport.vue
@@ -44,9 +44,12 @@ onMounted(async () => {
 </script>
 
 <template>
-    <div class="max-w-7xl mx-auto flex">
+    <div class="max-w-7xl mx-auto flex mt-5">
         <!-- training report list -->
         <div class="px-4" :class="focusedTrainingReport == null ? 'w-full' : 'w-1/2'">
+            <div>
+                <p class="scroll-m-20 text-2xl font-semibold tracking-tight">Training Reports</p>
+            </div>
             <Table>
                 <TableHeader>
                     <TableRow>
@@ -84,23 +87,23 @@ onMounted(async () => {
             <div class="flex flex-col gap-5">
                 <!-- {{ focusedTrainingReport }} -->
                 <div>
-                    <label>Trainers</label>
-                    <div v-for="person in focusedTrainingTrainers" class="grid grid-cols-4 my-2">
-                        <p>{{ person.attendee_id }}</p>
+                    <label class="scroll-m-20 text-xl font-semibold tracking-tight">Trainers</label>
+                    <div v-for="person in focusedTrainingTrainers" class="grid grid-cols-4 my-2 items-center">
+                        <p>{{ person.attendee_name }}</p>
                         <p class="text-right px-5">{{ person.passed }}</p>
-                        <p class="bg-muted p-2 rounded-lg min-h-[1lh] col-span-2 text-right">{{ person.remarks }}</p>
+                        <p class="bg-muted p-2 rounded-lg min-h-10 col-span-2 text-right">{{ person.remarks }}</p>
                     </div>
                 </div>
                 <div>
-                    <label>Trainees</label>
-                    <div v-for="person in focusedTrainingTrainees" class="grid grid-cols-4 my-2">
-                        <p>{{ person.attendee_id }}</p>
-                        <p class="text-right px-5">{{ person.passed }}</p>
-                        <p class="bg-muted p-2 rounded-lg min-h-[1lh] col-span-2 text-right">{{ person.remarks }}</p>
+                    <label class="scroll-m-20 text-xl font-semibold tracking-tight">Trainees</label>
+                    <div v-for="person in focusedTrainingTrainees" class="grid grid-cols-4 my-2 items-center">
+                        <p>{{ person.attendee_name }}</p>
+                        <p class="text-right px-5">{{ person.passed ? "Passed" : "Failed" }}</p>
+                        <p class="bg-muted p-2 rounded-lg min-h-10 col-span-2 text-right">{{ person.remarks }}</p>
                     </div>
                 </div>
                 <div>
-                    <label>Remarks</label>
+                    <label class="scroll-m-20 text-xl font-semibold tracking-tight">Remarks</label>
                     <p class="bg-muted p-2 rounded-lg min-h-24"> {{ focusedTrainingReport.remarks }}</p>
                 </div>
             </div>