diff --git a/ui/src/pages/TrainingReport.vue b/ui/src/pages/TrainingReport.vue
index a3f2e01..9143345 100644
--- a/ui/src/pages/TrainingReport.vue
+++ b/ui/src/pages/TrainingReport.vue
@@ -40,15 +40,15 @@ watch(() => route.params.id, async (newID) => {
 
 const focusedTrainingReport = ref<CourseEventDetails | null>(null);
 const focusedTrainingTrainees = computed<CourseAttendee[] | null>(() => {
-    if (focusedTrainingReport == null) return null;
+    if (focusedTrainingReport.value == null) return null;
     return focusedTrainingReport.value.attendees.filter((attendee) => attendee.role.name == 'Trainee');
 })
 const focusedNoShows = computed<CourseAttendee[] | null>(() => {
-    if (focusedTrainingReport == null) return null;
+    if (focusedTrainingReport.value == null) return null;
     return focusedTrainingReport.value.attendees.filter((attendee) => attendee.role.name == 'No-Show');
 })
 const focusedTrainingTrainers = computed<CourseAttendee[] | null>(() => {
-    if (focusedTrainingReport == null) return null;
+    if (focusedTrainingReport.value == null) return null;
     return focusedTrainingReport.value.attendees.filter((attendee) => attendee.role.name != 'Trainee' && attendee.role.name != 'No-Show');
 })
 async function viewTrainingReport(id: number) {
@@ -69,6 +69,7 @@ onMounted(async () => {
     if (route.params.id)
         viewTrainingReport(Number(route.params.id))
     loaded.value = true;
+    console.log("load")
 })
 </script>
 
@@ -110,7 +111,7 @@ onMounted(async () => {
             </div>
         </div>
         <!-- view training report section -->
-        <div v-if="sidePanel == sidePanelState.view" class="pl-9 my-3 border-l w-3/5">
+        <div v-if="focusedTrainingReport != null && 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">
@@ -161,10 +162,10 @@ onMounted(async () => {
                         class="grid grid-cols-5 py-2 items-center border-b last:border-none">
                         <p>{{ person.attendee_name }}</p>
                         <Checkbox :disabled="!focusedTrainingReport.course.hasQual"
-                            :default-value="person.passed_bookwork ? true : false" class="pointer-events-none ml-5">
+                            :model-value="person.passed_bookwork" class="pointer-events-none ml-5">
                         </Checkbox>
                         <Checkbox :disabled="!focusedTrainingReport.course.hasQual"
-                            :default-value="person.passed_qual ? true : false" class="pointer-events-none ml-1">
+                            :model-value="person.passed_qual" class="pointer-events-none ml-1">
                         </Checkbox>
                         <p class="col-span-2 text-right px-2"
                             :class="person.remarks == '' ? 'text-muted-foreground' : ''">{{ person.remarks == "" ? '--'