diff --git a/ui/src/pages/TrainingReport.vue b/ui/src/pages/TrainingReport.vue
index 0d8dd53..2abf2a7 100644
--- a/ui/src/pages/TrainingReport.vue
+++ b/ui/src/pages/TrainingReport.vue
@@ -58,28 +58,30 @@ onMounted(async () => {
                 <p class="scroll-m-20 text-2xl font-semibold tracking-tight">Training Reports</p>
                 <Button @click="createTrainingReport">New Training Report</Button>
             </div>
-            <Table>
-                <TableHeader>
-                    <TableRow>
-                        <TableHead class="w-[100px]">
-                            Training
-                        </TableHead>
-                        <TableHead>Date</TableHead>
-                        <TableHead class="text-right">
-                            Posted By
-                        </TableHead>
-                    </TableRow>
-                </TableHeader>
-                <TableBody v-if="loaded">
-                    <TableRow class="cursor-pointer" v-for="report in trainingReports" :key="report.event_id"
-                        @click="viewTrainingReport(report.event_id);">
-                        <TableCell class="font-medium">{{ report.course_name }}</TableCell>
-                        <TableCell>{{ report.date }}</TableCell>
-                        <TableCell class="text-right">{{ report.created_by === null ? "Unknown User" : report.created_by
-                        }}</TableCell>
-                    </TableRow>
-                </TableBody>
-            </Table>
+            <div class="overflow-y-auto max-h-[70vh] mt-5 scrollbar-themed">
+                <Table>
+                    <TableHeader>
+                        <TableRow>
+                            <TableHead class="w-[100px]">
+                                Training
+                            </TableHead>
+                            <TableHead>Date</TableHead>
+                            <TableHead class="text-right">
+                                Posted By
+                            </TableHead>
+                        </TableRow>
+                    </TableHeader>
+                    <TableBody v-if="loaded">
+                        <TableRow class="cursor-pointer" v-for="report in trainingReports" :key="report.event_id"
+                            @click="viewTrainingReport(report.event_id);">
+                            <TableCell class="font-medium">{{ report.course_name }}</TableCell>
+                            <TableCell>{{ report.date }}</TableCell>
+                            <TableCell class="text-right">{{ report.created_by === null ? "Unknown User" : report.created_by
+                            }}</TableCell>
+                        </TableRow>
+                    </TableBody>
+                </Table>
+            </div>
         </div>
         <!-- view training report section -->
         <div v-if="sidePanel == sidePanelState.view" class="px-4 border-l w-1/2">
@@ -129,3 +131,32 @@ onMounted(async () => {
         </div>
     </div>
 </template>
+
+<style scoped>
+/* Firefox */
+.scrollbar-themed {
+    scrollbar-width: thin;
+    scrollbar-color: #555 #1f1f1f;
+    padding-right: 6px;
+}
+
+/* Chrome, Edge, Safari */
+.scrollbar-themed::-webkit-scrollbar {
+    width: 10px; /* slightly wider to allow padding look */
+}
+
+.scrollbar-themed::-webkit-scrollbar-track {
+    background: #1f1f1f;
+    margin-left: 6px; /* ❗ adds space between content + scrollbar */
+}
+
+.scrollbar-themed::-webkit-scrollbar-thumb {
+    background: #555;
+    border-radius: 9999px;
+}
+
+.scrollbar-themed::-webkit-scrollbar-thumb:hover {
+    background: #777;
+}
+
+</style>
\ No newline at end of file