diff --git a/ui/src/pages/TrainingReport.vue b/ui/src/pages/TrainingReport.vue
index d159afd..a76bb5e 100644
--- a/ui/src/pages/TrainingReport.vue
+++ b/ui/src/pages/TrainingReport.vue
@@ -79,16 +79,16 @@
 
     const focusedTrainingReport = ref<CourseEventDetails | null>(null);
     const focusedTrainingTrainees = computed<CourseAttendee[] | null>(() => {
-        if (focusedTrainingReport.value == null) return null;
-        return focusedTrainingReport.value.attendees.filter((attendee) => attendee.role.name == 'Trainee');
+        if (focusedTrainingReport.value == null) return null; //if no training report is focused
+        return focusedTrainingReport.value.attendees?.filter((attendee) => attendee.role?.name == 'Trainee') ?? null;
     })
     const focusedNoShows = computed<CourseAttendee[] | null>(() => {
-        if (focusedTrainingReport.value == null) return null;
-        return focusedTrainingReport.value.attendees.filter((attendee) => attendee.role.name == 'No-Show');
+        if (focusedTrainingReport.value == null) return null; //if no training report is focused
+        return focusedTrainingReport.value.attendees?.filter((attendee) => attendee.role?.name == 'No-Show') ?? null;
     })
     const focusedTrainingTrainers = computed<CourseAttendee[] | null>(() => {
-        if (focusedTrainingReport.value == null) return null;
-        return focusedTrainingReport.value.attendees.filter((attendee) => attendee.role.name != 'Trainee' && attendee.role.name != 'No-Show');
+        if (focusedTrainingReport.value == null) return null; //if no training report is focused
+        return focusedTrainingReport.value.attendees?.filter((attendee) => attendee.role?.name != 'Trainee' && attendee.role?.name != 'No-Show') ?? null;
     })
     async function viewTrainingReport(id: number) {
         focusedTrainingReport.value = await getTrainingReport(id);
@@ -223,7 +223,7 @@
         loadTrainingReports();
     }
 
-    const expanded = ref<number>(null);
+    const expanded = ref<number | null>(null);
 </script>
 
 <template>
@@ -410,7 +410,7 @@
                                 <div class="mt-3 grid grid-cols-1 gap-2 text-xs">
                                     <div class="rounded-lg bg-muted px-3 py-2">
                                         <p class="text-muted-foreground">Role</p>
-                                        <p class="font-medium text-foreground">{{ person.role.name }}</p>
+                                        <p class="font-medium text-foreground">{{ person.role?.name }}</p>
                                     </div>
                                     <div class="rounded-lg bg-muted px-3 py-2">
                                         <p class="text-muted-foreground">Remarks</p>
@@ -451,7 +451,7 @@
                                         <p v-else class="whitespace-nowrap overflow-hidden text-ellipsis">{{
                                             person.attendee_name }}</p>
                                     </div>
-                                    <p class="truncate">{{ person.role.name }}</p>
+                                    <p class="truncate">{{ person.role?.name }}</p>
                                     <p class="text-right px-2 truncate"
                                         :class="person.remarks == '' ? 'text-muted-foreground' : ''">
                                         {{ person.remarks == "" ?
@@ -514,14 +514,14 @@
                                         <div class="rounded-lg bg-muted px-3 py-2 text-center">
                                             <p class="text-muted-foreground">Bookwork</p>
                                             <p class="font-semibold text-foreground">{{
-                                                !focusedTrainingReport.course.hasBookwork ? 'N/A' :
+                                                !focusedTrainingReport.course?.hasBookwork ? 'N/A' :
                                                 (person.passed_bookwork ?
                                                 'Pass' : 'Fail') }}</p>
                                         </div>
                                         <div class="rounded-lg bg-muted px-3 py-2 text-center">
                                             <p class="text-muted-foreground">Qual</p>
                                             <p class="font-semibold text-foreground">{{
-                                                !focusedTrainingReport.course.hasQual ?
+                                                !focusedTrainingReport.course?.hasQual ?
                                                 'N/A' : (person.passed_qual ? 'Pass' : 'Fail') }}</p>
                                         </div>
                                         <div class="col-span-2 rounded-lg bg-muted px-3 py-2">
@@ -565,17 +565,17 @@
                                                 person.attendee_name }}</p>
                                         </div>
                                         <div class="flex justify-center">
-                                            <Tooltip :open="!focusedTrainingReport.course.hasBookwork"
+                                            <Tooltip :open="!focusedTrainingReport.course?.hasBookwork"
                                                 message="This course does not have bookwork">
-                                                <Checkbox :disabled="!focusedTrainingReport.course.hasBookwork"
+                                                <Checkbox :disabled="!focusedTrainingReport.course?.hasBookwork"
                                                     :model-value="person.passed_bookwork" class="pointer-events-none">
                                                 </Checkbox>
                                             </Tooltip>
                                         </div>
                                         <div class="flex justify-center">
-                                            <Tooltip :open="!focusedTrainingReport.course.hasQual"
+                                            <Tooltip :open="!focusedTrainingReport.course?.hasQual"
                                                 message="This course does not have a qualification">
-                                                <Checkbox :disabled="!focusedTrainingReport.course.hasQual"
+                                                <Checkbox :disabled="!focusedTrainingReport.course?.hasQual"
                                                     :model-value="person.passed_qual" class="pointer-events-none">
                                                 </Checkbox>
                                             </Tooltip>
@@ -615,7 +615,7 @@
                         </div>
                     </div>
                     <!-- No Shows -->
-                    <div v-if="focusedNoShows.length != 0">
+                    <div v-if="focusedNoShows?.length != 0">
                         <div class="flex flex-col">
                             <label class="scroll-m-20 text-xl font-semibold tracking-tight">
                                 No Shows