diff --git a/ui/src/pages/TrainingReport.vue b/ui/src/pages/TrainingReport.vue
index 9143345..1f82826 100644
--- a/ui/src/pages/TrainingReport.vue
+++ b/ui/src/pages/TrainingReport.vue
@@ -118,92 +118,93 @@ onMounted(async () => {
                     <X></X>
                 </button>
             </div>
-            <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 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="">{{ 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 class="max-h-[70vh] overflow-auto scrollbar-themed my-5">
+                <div class="flex flex-col mb-5 border rounded-lg bg-muted/70 p-2 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>
-                <!-- trainees -->
-                <div>
-                    <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">
+                <div class="flex flex-col gap-8 ">
+                    <!-- Trainers -->
+                    <div>
+                        <label class="scroll-m-20 text-xl font-semibold tracking-tight">Trainers</label>
+                        <div class="grid grid-cols-4 py-2 text-sm font-medium text-muted-foreground border-b">
                             <span>Name</span>
-                            <span class="">Bookwork</span>
-                            <span class="">Qual</span>
+                            <span class="">Role</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>
-                        <Checkbox :disabled="!focusedTrainingReport.course.hasQual"
-                            :model-value="person.passed_bookwork" class="pointer-events-none ml-5">
-                        </Checkbox>
-                        <Checkbox :disabled="!focusedTrainingReport.course.hasQual"
-                            :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 == "" ? '--'
-                                : 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 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="">{{ 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>
-                    <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>
+                    <!-- trainees -->
+                    <div>
+                        <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>
+                            <Checkbox :disabled="!focusedTrainingReport.course.hasQual"
+                                :model-value="person.passed_bookwork" class="pointer-events-none ml-5">
+                            </Checkbox>
+                            <Checkbox :disabled="!focusedTrainingReport.course.hasQual"
+                                :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 == "" ? '--'
+                                    : 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="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>
-                    <label class="scroll-m-20 text-xl font-semibold tracking-tight">Remarks</label>
-                    <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>