diff --git a/ui/src/pages/TrainingReport.vue b/ui/src/pages/TrainingReport.vue
index a273e01..00480b7 100644
--- a/ui/src/pages/TrainingReport.vue
+++ b/ui/src/pages/TrainingReport.vue
@@ -23,11 +23,15 @@ const loaded = ref(false);
 const focusedTrainingReport = ref<CourseEventDetails | null>(null);
 const focusedTrainingTrainees = computed<CourseAttendee[] | null>(() => {
     if (focusedTrainingReport == null) return null;
-    return focusedTrainingReport.value.attendees.filter((attendee) => attendee.attendee_role_id == 2);
+    return focusedTrainingReport.value.attendees.filter((attendee) => attendee.role.name == 'Trainee');
+})
+const focusedNoShows = computed<CourseAttendee[] | null>(() => {
+    if (focusedTrainingReport == null) return null;
+    return focusedTrainingReport.value.attendees.filter((attendee) => attendee.role.name == 'No-Show');
 })
 const focusedTrainingTrainers = computed<CourseAttendee[] | null>(() => {
     if (focusedTrainingReport == null) return null;
-    return focusedTrainingReport.value.attendees.filter((attendee) => attendee.attendee_role_id != 2);
+    return focusedTrainingReport.value.attendees.filter((attendee) => attendee.role.name != 'Trainee' && attendee.role.name != 'No-Show');
 })
 async function viewTrainingReport(id: number) {
     focusedTrainingReport.value = await getTrainingReport(id);
@@ -61,7 +65,9 @@ onMounted(async () => {
         <div class="px-4 my-3" :class="sidePanel == sidePanelState.closed ? 'w-full' : 'w-2/5'">
             <div class="flex justify-between">
                 <p class="scroll-m-20 text-2xl font-semibold tracking-tight">Training Reports</p>
-                <Button @click="createTrainingReport"><Plus></Plus> New Training Report</Button>
+                <Button @click="createTrainingReport">
+                    <Plus></Plus> New Training Report
+                </Button>
             </div>
             <div class="overflow-y-auto max-h-[70vh] mt-5 scrollbar-themed">
                 <Table>
@@ -72,7 +78,7 @@ onMounted(async () => {
                             </TableHead>
                             <TableHead>Date</TableHead>
                             <TableHead class="text-right">
-                                Posted By   
+                                Posted By
                             </TableHead>
                         </TableRow>
                     </TableHeader>
@@ -83,52 +89,94 @@ onMounted(async () => {
                             <TableCell>{{ report.date }}</TableCell>
                             <TableCell class="text-right">{{ report.created_by_name === null ? "Unknown User" :
                                 report.created_by_name
-                                }}</TableCell>
+                            }}</TableCell>
                         </TableRow>
                     </TableBody>
                 </Table>
             </div>
         </div>
         <!-- view training report section -->
-        <div v-if="sidePanel == sidePanelState.view" class="px-4 my-3 border-l w-3/5">
-            <div class="flex justify-between my-3">
-                <div class="flex gap-5">
-                    <p>{{ focusedTrainingReport.course_name }}</p>
-                    <p class="text-muted-foreground">{{ focusedTrainingReport.event_date }}</p>
-                    <p class="">Created by {{ focusedTrainingReport.created_by_name === null ? "Unknown User" :
-                        focusedTrainingReport.created_by_name
-                        }}</p>
-                </div>
+        <div v-if="sidePanel == sidePanelState.view" class="pl-9 my-3 border-l w-3/5">
+            <div class="flex justify-between">
+                <p class="scroll-m-20 text-2xl font-semibold tracking-tight">Training Report Details</p>
                 <button @click="closeTrainingReport" class="cursor-pointer">
                     <X></X>
                 </button>
             </div>
-            <div class="flex flex-col gap-5">
-                <!-- {{ focusedTrainingReport }} -->
+            <div class="flex flex-col mb-5 border rounded-lg bg-muted/70 p-2 my-5 py-3 px-4">
+                <p class="scroll-m-20 text-xl font-semibold tracking-tight">{{ focusedTrainingReport.course_name }}</p>
+                <div class="flex gap-10">
+                    <p class="text-muted-foreground">{{ focusedTrainingReport.event_date }}</p>
+                    <p class="">Created by {{ focusedTrainingReport.created_by_name === null ? "Unknown User" :
+                        focusedTrainingReport.created_by_name
+                    }}
+                    </p>
+                </div>
+            </div>
+            <div class="flex flex-col gap-8">
+                <!-- Trainers -->
                 <div>
                     <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">
+                    <div class="grid grid-cols-4 py-2 text-sm font-medium text-muted-foreground border-b">
+                        <span>Name</span>
+                        <span class="">Role</span>
+                        <span class="text-right col-span-2">Remarks</span>
+                    </div>
+
+                    <div v-for="person in focusedTrainingTrainers"
+                        class="grid grid-cols-4 py-2 items-center border-b last:border-none">
                         <p>{{ person.attendee_name }}</p>
-                        <p class="text-right px-5">{{ person.role.name }}</p>
-                        <p class="bg-muted p-2 rounded-lg min-h-10 col-span-2 text-right">{{ person.remarks }}</p>
+                        <p class="">{{ person.role.name }}</p>
+                        <p class="col-span-2 text-right px-2" :class="person.remarks == '' ? 'text-muted-foreground' : ''">{{ person.remarks == "" ? '--' : person.remarks }}</p>
                     </div>
                 </div>
+                <!-- trainees -->
                 <div>
-                    <div class="grid grid-cols-5"><label
-                            class="scroll-m-20 text-xl font-semibold tracking-tight">Trainees</label></div>
-                    <div v-for="person in focusedTrainingTrainees" class="grid grid-cols-5 my-2 items-center">
+                    <div class="flex flex-col">
+                        <label class="scroll-m-20 text-xl font-semibold tracking-tight">Trainees</label>
+                        <div class="grid grid-cols-5 py-2 text-sm font-medium text-muted-foreground border-b">
+                            <span>Name</span>
+                            <span class="">Bookwork</span>
+                            <span class="">Qual</span>
+                            <span class="text-right col-span-2">Remarks</span>
+                        </div>
+                    </div>
+                    <div v-for="person in focusedTrainingTrainees" class="grid grid-cols-5 py-2 items-center border-b last:border-none">
                         <p>{{ person.attendee_name }}</p>
-                        <!-- <p class="text-right px-5">{{ person.passed ? "Passed" : "Failed" }}</p> -->
-                        <Checkbox v-if="focusedTrainingReport.course.hasBookwork" :default-value="person.passed_bookwork ? true : false" class="pointer-events-none">
+                        <Checkbox :disabled="!focusedTrainingReport.course.hasQual" :default-value="person.passed_bookwork ? true : false" class="pointer-events-none ml-5">
                         </Checkbox>
-                        <Checkbox v-if="focusedTrainingReport.course.hasQual" :default-value="person.passed_qual ? true : false" class="pointer-events-none">
+                        <Checkbox :disabled="!focusedTrainingReport.course.hasQual" :default-value="person.passed_qual ? true : false" class="pointer-events-none ml-1">
                         </Checkbox>
-                        <p class="bg-muted p-2 rounded-lg min-h-10 col-span-2 text-right">{{ person.remarks }}</p>
+                        <p class="col-span-2 text-right px-2" :class="person.remarks == '' ? 'text-muted-foreground' : ''">{{ person.remarks == "" ? '--' : person.remarks }}</p>
+                    </div>
+                </div>
+                <!-- No Shows -->
+                <div v-if="focusedNoShows.length != 0">
+                    <div class="flex flex-col">
+                        <label class="scroll-m-20 text-xl font-semibold tracking-tight">No Shows</label>
+                        <div class="grid grid-cols-5 py-2 text-sm font-medium text-muted-foreground border-b">
+                            <span>Name</span>
+                            <!-- <span class="">Role</span>
+                            <span class="">Role</span> -->
+                            <div></div>
+                            <div></div>
+                            <span class="text-right col-span-2">Remarks</span>
+                        </div>
+                    </div>
+                    <div v-for="person in focusedNoShows" class="grid grid-cols-5 py-2 items-center border-b last:border-none">
+                        <p>{{ person.attendee_name }}</p>
+                        <!-- <Checkbox :default-value="person.passed_bookwork ? true : false" class="pointer-events-none">
+                        </Checkbox>
+                        <Checkbox :default-value="person.passed_qual ? true : false" class="pointer-events-none">
+                        </Checkbox> -->
+                        <div></div>
+                        <div></div>
+                        <p class="col-span-2 text-right px-2" :class="person.remarks == '' ? 'text-muted-foreground' : ''">{{ person.remarks == "" ? '--' : person.remarks }}</p>
                     </div>
                 </div>
                 <div>
                     <label class="scroll-m-20 text-xl font-semibold tracking-tight">Remarks</label>
-                    <p class="bg-muted p-2 rounded-lg min-h-24 my-2"> {{ focusedTrainingReport.remarks }}</p>
+                    <p class="border bg-muted/50 px-3 py-2 rounded-lg min-h-24 my-2" :class="focusedTrainingReport.remarks == '' ? 'text-muted-foreground' : ''"> {{ focusedTrainingReport.remarks == "" ? 'None' : focusedTrainingReport.remarks }}</p>
                 </div>
             </div>
         </div>