diff --git a/api/src/routes/course.ts b/api/src/routes/course.ts
index f04ea08..7b10bdd 100644
--- a/api/src/routes/course.ts
+++ b/api/src/routes/course.ts
@@ -33,23 +33,26 @@ cr.get('/roles', async (req, res) => {
 })
 
 er.get('/', async (req: Request, res: Response) => {
-    const allowedSorts = new Map([
-        ["ascending", "ASC"],
-        ["descending", "DESC"]
-    ]);
-
-    const sort = String(req.query.sort || "").toLowerCase();
-    const search = String(req.query.search || "").toLowerCase();
-    if (!allowedSorts.has(sort)) {
-        return res.status(400).json({
-            message: `Invalid sort direction '${req.query.sort}'. Allowed values are 'ascending' or 'descending'.`
-        });
-    }
-
-    const sortDir = allowedSorts.get(sort);
-
     try {
-        let events = await getCourseEvents(sortDir, search);
+        const allowedSorts = new Map([
+            ["ascending", "ASC"],
+            ["descending", "DESC"]
+        ]);
+
+        const page = Number(req.query.page) || undefined;
+        const pageSize = Number(req.query.pageSize) || undefined;
+
+        const sort = String(req.query.sort || "").toLowerCase();
+        const search = String(req.query.search || "").toLowerCase();
+        if (!allowedSorts.has(sort)) {
+            return res.status(400).json({
+                message: `Invalid sort direction '${req.query.sort}'. Allowed values are 'ascending' or 'descending'.`
+            });
+        }
+
+        const sortDir = allowedSorts.get(sort);
+
+        let events = await getCourseEvents(sortDir, search, page, pageSize);
         res.status(200).json(events);
     } catch (error) {
         console.error('failed to fetch reports', error);
diff --git a/api/src/routes/members.ts b/api/src/routes/members.ts
index 3e574aa..026424d 100644
--- a/api/src/routes/members.ts
+++ b/api/src/routes/members.ts
@@ -5,7 +5,7 @@ import { Request, Response } from 'express';
 import pool from '../db';
 import { requireLogin, requireMemberState, requireRole } from '../middleware/auth';
 import { getUserActiveLOA } from '../services/loaService';
-import { getMemberSettings, getMembersFull, getMembersLite, getUserData, setUserSettings } from '../services/memberService';
+import { getAllMembersLite, getMemberSettings, getMembersFull, getMembersLite, getUserData, setUserSettings } from '../services/memberService';
 import { getUserRoles } from '../services/rolesService';
 import { memberSettings, MemberState } from '@app/shared/types/member';
 
@@ -75,6 +75,16 @@ router.put('/settings', [requireLogin], async (req: Request, res: Response) => {
     }
 })
 
+router.get('/lite', [requireLogin], async (req: Request, res: Response) => {
+    try {
+        let out = await getAllMembersLite();
+        res.status(200).json(out);
+    } catch (error) {
+        console.error(error);
+        res.status(500).json(error);
+    }
+})
+
 router.post('/lite/bulk', async (req: Request, res: Response) => {
     try {
         let ids = req.body.ids;
@@ -86,6 +96,7 @@ router.post('/lite/bulk', async (req: Request, res: Response) => {
     }
 })
 
+
 router.post('/full/bulk', async (req: Request, res: Response) => {
     try {
         let ids = req.body.ids;
diff --git a/api/src/services/CourseSerivce.ts b/api/src/services/CourseSerivce.ts
index f365da6..8b2f61df 100644
--- a/api/src/services/CourseSerivce.ts
+++ b/api/src/services/CourseSerivce.ts
@@ -1,5 +1,6 @@
 import pool from "../db"
 import { Course, CourseAttendee, CourseAttendeeRole, CourseEventDetails, CourseEventSummary, RawAttendeeRow } from "@app/shared/types/course"
+import { PagedData } from "@app/shared/types/pagination";
 import { toDateTime } from "@app/shared/utils/time";
 export async function getAllCourses(): Promise<Course[]> {
     const sql = "SELECT * FROM courses WHERE deleted = false ORDER BY name ASC;"
@@ -107,7 +108,8 @@ export async function insertCourseEvent(event: CourseEventDetails): Promise<numb
     }
 }
 
-export async function getCourseEvents(sortDir: string, search: string = ""): Promise<CourseEventSummary[]> {
+export async function getCourseEvents(sortDir: string, search: string = "", page = 1, pageSize = 10): Promise<PagedData<CourseEventSummary>> {
+    const offset = (page - 1) * pageSize;
 
     let params = [];
     let searchString = "";
@@ -133,11 +135,23 @@ export async function getCourseEvents(sortDir: string, search: string = ""): Pro
                 LEFT JOIN members AS M
                     ON E.created_by = M.id
                 ${searchString}
-                ORDER BY E.event_date ${sortDir};`;
-    console.log(sql)
-    console.log(params)
-    let events: CourseEventSummary[] = await pool.query(sql, params);
-    return events;
+                ORDER BY E.event_date ${sortDir}         
+                LIMIT ? OFFSET ?;`;
+
+    let countSQL = `SELECT COUNT(*) AS count
+                    FROM course_events AS E
+                    LEFT JOIN courses AS C
+                    ON E.course_id = C.id
+                    LEFT JOIN members AS M
+                    ON E.created_by = M.id ${searchString};`
+    let recordCount = Number((await pool.query(countSQL, [...params]))[0].count);
+    let pageCount = recordCount / pageSize;
+
+    let events: CourseEventSummary[] = await pool.query(sql, [...params, pageSize, offset]);
+
+    let output: PagedData<CourseEventSummary> = { data: events, pagination: { page: page, pageSize: pageSize, total: recordCount, totalPages: pageCount } }
+
+    return output;
 }
 
 export async function getCourseEventRoles(): Promise<CourseAttendeeRole[]> {
diff --git a/api/src/services/memberService.ts b/api/src/services/memberService.ts
index 6381ad1..b639b21 100644
--- a/api/src/services/memberService.ts
+++ b/api/src/services/memberService.ts
@@ -49,6 +49,18 @@ export async function getMembersLite(ids: number[]): Promise<MemberLight[]> {
   return res;
 }
 
+export async function getAllMembersLite(): Promise<MemberLight[]> {
+  const sql = `SELECT m.member_id AS id,
+                  m.member_name AS username,
+                  m.displayName,
+                  u.color
+              FROM view_member_rank_unit_status_latest m
+                  LEFT JOIN units u ON u.name = m.unit;`;
+
+  const res: MemberLight[] = await pool.query(sql);
+  return res;
+}
+
 export async function getMembersFull(ids: number[]): Promise<Member[]> {
   const sql = `SELECT * FROM view_member_rank_unit_status_latest WHERE member_id IN (?);`;
   const res: Member[] = await pool.query(sql, [ids]);
diff --git a/ui/src/api/member.ts b/ui/src/api/member.ts
index 9fe2935..327a5ce 100644
--- a/ui/src/api/member.ts
+++ b/ui/src/api/member.ts
@@ -38,6 +38,20 @@ export async function setMemberSettings(settings: memberSettings) {
     return;
 }
 
+export async function getAllLightMembers(): Promise<MemberLight[]> {
+    const response = await fetch(`${addr}/members/lite`, {
+        credentials: 'include',
+        headers: {
+            "Content-Type": "application/json",
+        }
+    });
+
+    if (!response.ok) {
+        throw new Error("Failed to fetch light members");
+    }
+    return response.json();
+}
+
 export async function getLightMembers(ids: number[]): Promise<MemberLight[]> {
 
     if (ids.length === 0) return [];
diff --git a/ui/src/api/trainingReport.ts b/ui/src/api/trainingReport.ts
index c1b8adc..a261b7b 100644
--- a/ui/src/api/trainingReport.ts
+++ b/ui/src/api/trainingReport.ts
@@ -1,15 +1,34 @@
 import { Course, CourseAttendeeRole, CourseEventDetails, CourseEventSummary } from '@shared/types/course'
+import { PagedData } from '@shared/types/pagination';
 
 //@ts-ignore
 const addr = import.meta.env.VITE_APIHOST;
 
-export async function getTrainingReports(sortMode: string, search: string): Promise<CourseEventSummary[]> {
-    const res = await fetch(`${addr}/courseEvent?sort=${sortMode}&search=${search}`, {
+export async function getTrainingReports(sortMode?: string, search?: string, page?: number, pageSize?: number): Promise<PagedData<CourseEventSummary>> {
+    const params = new URLSearchParams();
+
+    if (page !== undefined) {
+        params.set("page", page.toString());
+    }
+
+    if (pageSize !== undefined) {
+        params.set("pageSize", pageSize.toString());
+    }
+
+    if (sortMode !== undefined) {
+        params.set("sort", sortMode.toString());
+    }
+
+    if (search !== undefined || search !== "") {
+        params.set("search", search.toString());
+    }
+
+    const res = await fetch(`${addr}/courseEvent?${params}`, {
         credentials: 'include',
     });
 
     if (res.ok) {
-        return await res.json() as Promise<CourseEventSummary[]>;
+        return await res.json() as Promise<PagedData<CourseEventSummary>>;
     } else {
         console.error("Something went wrong");
         throw new Error("Failed to load training reports");
@@ -31,7 +50,7 @@ export async function getTrainingReport(id: number): Promise<CourseEventDetails>
 
 export async function getAllTrainings(): Promise<Course[]> {
     const res = await fetch(`${addr}/course`, {
-            credentials: 'include',
+        credentials: 'include',
     });
 
     if (res.ok) {
diff --git a/ui/src/components/trainingReport/trainingReportForm.vue b/ui/src/components/trainingReport/trainingReportForm.vue
index 26ef3c1..b68aeb0 100644
--- a/ui/src/components/trainingReport/trainingReportForm.vue
+++ b/ui/src/components/trainingReport/trainingReportForm.vue
@@ -3,9 +3,10 @@ import { trainingReportSchema, courseEventAttendeeSchema } from '@shared/schemas
 import { Course, CourseAttendee, CourseAttendeeRole, CourseEventDetails } from '@shared/types/course'
 import { useForm, useFieldArray, FieldArray as VeeFieldArray, ErrorMessage, Field as VeeField } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
 import { getAllAttendeeRoles, getAllTrainings, postTrainingReport } from '@/api/trainingReport'
-import { getMembers, Member } from '@/api/member'
+import { getAllLightMembers, getLightMembers, getMembers } from '@/api/member'
+import { Member, MemberLight } from '@shared/types/member'
 
 import FieldGroup from '../ui/field/FieldGroup.vue'
 import Field from '../ui/field/Field.vue'
@@ -13,12 +14,17 @@ import FieldLabel from '../ui/field/FieldLabel.vue'
 import FieldError from '../ui/field/FieldError.vue'
 import Button from '../ui/button/Button.vue'
 import Textarea from '../ui/textarea/Textarea.vue'
-import { Plus, X } from 'lucide-vue-next';
+import { Check, Plus, X } from 'lucide-vue-next';
 import FieldSet from '../ui/field/FieldSet.vue'
 import FieldLegend from '../ui/field/FieldLegend.vue'
 import FieldDescription from '../ui/field/FieldDescription.vue'
 import Checkbox from '../ui/checkbox/Checkbox.vue'
 import { configure } from 'vee-validate'
+import { ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList } from "@/components/ui/combobox"
+import Popover from "@/components/ui/popover/Popover.vue";
+import PopoverTrigger from "@/components/ui/popover/PopoverTrigger.vue";
+import PopoverContent from "@/components/ui/popover/PopoverContent.vue";
+import Combobox from '../ui/combobox/Combobox.vue'
 
 
 const { handleSubmit, resetForm, errors, values, setFieldValue } = useForm({
@@ -79,16 +85,44 @@ const { remove, push, fields } = useFieldArray('attendees');
 const selectedCourse = computed<Course | undefined>(() => { return trainings.value?.find(c => c.id == values.course_id) })
 
 const trainings = ref<Course[] | null>(null);
-const members = ref<Member[] | null>(null);
+const members = ref<MemberLight[] | null>(null);
 const eventRoles = ref<CourseAttendeeRole[] | null>(null);
 
 const emit = defineEmits(['submit'])
 
 onMounted(async () => {
     trainings.value = await getAllTrainings();
-    members.value = await getMembers();
+    members.value = await getAllLightMembers();
     eventRoles.value = await getAllAttendeeRoles();
 })
+
+const selectCourse = ref(false);
+const openMap = reactive<Record<string, boolean>>({})
+
+const memberMap = computed(() =>
+    Object.fromEntries(
+        members.value?.map(m => [m.id, m.displayName || m.username]) ?? []
+    )
+)
+
+const memberSearch = ref('')
+
+const MAX_RESULTS = 50
+
+const filteredMembers = computed(() => {
+    const q = memberSearch?.value?.toLowerCase() ?? ""
+    const results: MemberLight[] = []
+
+    for (const m of members.value ?? []) {
+        if (!q || (m.displayName || m.username).toLowerCase().includes(q)) {
+            results.push(m)
+            if (results.length >= MAX_RESULTS) break
+        }
+    }
+
+    return results
+})
+
 </script>
 <template>
     <form id="trainingForm" @submit.prevent="submitForm" class="flex flex-col gap-5">
@@ -99,13 +133,37 @@ onMounted(async () => {
                     <VeeField v-slot="{ field, errors }" name="course_id">
                         <Field :data-invalid="!!errors.length">
                             <FieldLabel class="scroll-m-20 text-lg tracking-tight">Training Course</FieldLabel>
-                            <select v-bind="field"
-                                class="h-9 border rounded p-2 w-auto focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] bg-background outline-none">
-                                <option value="" disabled>Select a course</option>
-                                <option v-for="course in trainings" :key="course.id" :value="course.id">
-                                    {{ course.name }}
-                                </option>
-                            </select>
+                            <Combobox :model-value="field.value" @update:open="selectCourse = $event"
+                                :open="selectCourse" @update:model-value="(v) => {
+                                    field.onChange(v);
+                                    selectCourse = false
+                                }" class="w-full">
+                                <ComboboxAnchor class="w-full">
+                                    <ComboboxInput @focus="selectCourse = true" placeholder="Search courses..."
+                                        class="w-full pl-3" :display-value="(id) => {
+                                            const c = trainings?.find(t => t.id === id)
+                                            return c ? c.name : '';
+                                        }" />
+                                </ComboboxAnchor>
+
+                                <ComboboxList class="w-full">
+                                    <ComboboxEmpty class="text-muted-foreground w-full">No results</ComboboxEmpty>
+                                    <ComboboxGroup>
+                                        <div class="max-h-80 overflow-y-scroll scrollbar-themed min-w-md">
+                                            <template v-for="course in trainings" :key="course.id">
+                                                <ComboboxItem :value="course.id"
+                                                    class="data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative cursor-pointer select-none px-2 py-1.5 w-full">
+                                                    {{ course.name }}
+                                                    <ComboboxItemIndicator
+                                                        class="absolute left-2 inline-flex items-center">
+                                                        <Check class="h-4 w-4" />
+                                                    </ComboboxItemIndicator>
+                                                </ComboboxItem>
+                                            </template>
+                                        </div>
+                                    </ComboboxGroup>
+                                </ComboboxList>
+                            </Combobox>
                             <div class="h-4">
                                 <FieldError v-if="errors.length" :errors="errors" />
                             </div>
@@ -113,6 +171,7 @@ onMounted(async () => {
                     </VeeField>
                 </FieldGroup>
             </div>
+
             <div class="w-[150px]">
                 <FieldGroup>
                     <VeeField v-slot="{ field, errors }" name="event_date">
@@ -180,13 +239,38 @@ onMounted(async () => {
                             <!-- Member Select -->
                             <VeeField :name="`attendees[${index}].attendee_id`" v-slot="{ field: f, errors: e }">
                                 <div>
-                                    <select v-bind="f"
-                                        class="border rounded p-2 w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] bg-background outline-none">
-                                        <option value="">Select member...</option>
-                                        <option v-for="m in members" :key="m.member_id" :value="m.member_id">
-                                            {{ m.member_name }}
-                                        </option>
-                                    </select>
+                                    <Combobox :model-value="f.value"
+                                        @update:open="openMap['member-' + field.key] = $event"
+                                        :open="openMap['member-' + field.key]" @update:model-value="(v) => {
+                                            f.onChange(v);
+                                            openMap['member-' + field.key] = false
+                                        }" class="w-full">
+                                        <ComboboxAnchor class="w-full">
+                                            <ComboboxInput
+                                                @focus="() => { openMap['member-' + field.key] = true; memberSearch = memberMap[f.value] }"
+                                                placeholder="Search members..." class="w-full pl-3"
+                                                :display-value="(id) => memberMap[id] || ''"
+                                                @input="memberSearch = $event.target.value" />
+                                        </ComboboxAnchor>
+                                        <ComboboxList class="w-full">
+                                            <ComboboxEmpty class="text-muted-foreground w-full">No results
+                                            </ComboboxEmpty>
+                                            <ComboboxGroup>
+                                                <div class="max-h-80 overflow-y-scroll scrollbar-themed min-w-3xs">
+                                                    <template v-for="m in filteredMembers" :key="m.id">
+                                                        <ComboboxItem :value="m.id"
+                                                            class="data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative cursor-pointer select-none px-2 py-1.5 w-full">
+                                                            {{ m.displayName || m.username }}
+                                                            <ComboboxItemIndicator
+                                                                class="absolute left-2 inline-flex items-center">
+                                                                <Check class="h-4 w-4" />
+                                                            </ComboboxItemIndicator>
+                                                        </ComboboxItem>
+                                                    </template>
+                                                </div>
+                                            </ComboboxGroup>
+                                        </ComboboxList>
+                                    </Combobox>
                                     <div class="h-4">
                                         <FieldError v-if="e.length" :errors="e" />
                                     </div>
@@ -196,13 +280,42 @@ onMounted(async () => {
                             <!-- Role Select -->
                             <VeeField :name="`attendees[${index}].attendee_role_id`" v-slot="{ field: f, errors: e }">
                                 <div>
-                                    <select v-bind="f"
-                                        class="border rounded p-2 w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] bg-background outline-none">
-                                        <option value="">Select role...</option>
-                                        <option v-for="r in eventRoles" :key="r.id" :value="r.id">
-                                            {{ r.name }}
-                                        </option>
-                                    </select>
+                                    <Combobox :model-value="f.value"
+                                        @update:open="openMap['role-' + field.key] = $event"
+                                        :open="openMap['role-' + field.key]" @update:model-value="(v) => {
+                                            f.onChange(v);
+                                            openMap['role-' + field.key] = false
+                                        }" class="w-full">
+                                        <ComboboxAnchor class="w-full">
+                                            <ComboboxInput @focus="openMap['role-' + field.key] = true"
+                                                placeholder="Search roles..." class="w-full pl-3" :display-value="(id) => {
+                                                    const er = eventRoles?.find(t => t.id === id)
+                                                    return er?.name;
+                                                }" />
+                                        </ComboboxAnchor>
+                                        <ComboboxList class="w-full">
+                                            <ComboboxEmpty class="text-muted-foreground w-full">No results
+                                            </ComboboxEmpty>
+                                            <ComboboxGroup>
+                                                <div class="max-h-80 overflow-y-scroll scrollbar-themed min-w-3xs">
+                                                    <template v-for="r in eventRoles" :key="r.id">
+                                                        <ComboboxItem :value="r.id"
+                                                            class="data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative cursor-pointer select-none px-2 py-1.5 w-full">
+                                                            <div class="flex justify-between w-full gap-8">
+                                                                <p>{{ r.name }}</p>
+                                                                <p class="text-muted-foreground">{{ r.description }}</p>
+                                                            </div>
+                                                            <ComboboxItemIndicator
+                                                                class="absolute left-2 inline-flex items-center">
+                                                                <Check class="h-4 w-4" />
+                                                            </ComboboxItemIndicator>
+                                                        </ComboboxItem>
+                                                    </template>
+                                                </div>
+                                            </ComboboxGroup>
+                                        </ComboboxList>
+                                    </Combobox>
+
                                     <div class="h-4">
                                         <FieldError v-if="e.length" :errors="e" />
                                     </div>
diff --git a/ui/src/pages/TrainingReport.vue b/ui/src/pages/TrainingReport.vue
index 4131ace..d321ef3 100644
--- a/ui/src/pages/TrainingReport.vue
+++ b/ui/src/pages/TrainingReport.vue
@@ -23,6 +23,15 @@ import SelectItem from '@/components/ui/select/SelectItem.vue';
 import Input from '@/components/ui/input/Input.vue';
 import MemberCard from '@/components/members/MemberCard.vue';
 import Spinner from '@/components/ui/spinner/Spinner.vue';
+import { pagination } from '@shared/types/pagination';
+import {
+    Pagination,
+    PaginationContent,
+    PaginationEllipsis,
+    PaginationItem,
+    PaginationNext,
+    PaginationPrevious,
+} from '@/components/ui/pagination'
 
 enum sidePanelState { view, create, closed };
 
@@ -87,17 +96,36 @@ watch(() => sortMode.value, async (newSortMode) => {
 })
 
 async function loadTrainingReports() {
-    trainingReports.value = await getTrainingReports(sortMode.value, searchString.value);
+    let data = await getTrainingReports(sortMode.value, searchString.value, pageNum.value, pageSize.value);
+    trainingReports.value = data.data;
+    pageData.value = data.pagination;
 }
 
 onMounted(async () => {
-    loadTrainingReports();
+    await loadTrainingReports();
     if (route.params.id)
         viewTrainingReport(Number(route.params.id))
     loaded.value = true;
 })
 
 const TRLoaded = ref(false);
+
+const pageNum = ref<number>(1);
+const pageData = ref<pagination>();
+
+const pageSize = ref<number>(15)
+const pageSizeOptions = [10, 15, 30]
+
+function setPageSize(size: number) {
+    pageSize.value = size
+    pageNum.value = 1;
+    loadTrainingReports();
+}
+
+function setPage(pagenum: number) {
+    pageNum.value = pagenum;
+    loadTrainingReports();
+}
 </script>
 
 <template>
@@ -118,7 +146,7 @@ const TRLoaded = ref(false);
                 <div class="flex flex-row gap-5">
                     <div>
                         <label class="text-muted-foreground">Search</label>
-                        <Input v-model="searchString"></Input>
+                        <Input v-model="searchString" placeholder="Search..."></Input>
                     </div>
                     <div class="flex flex-col">
                         <label class="text-muted-foreground">Sort By</label>
@@ -169,14 +197,44 @@ const TRLoaded = ref(false);
                     </TableBody>
                 </Table>
             </div>
+            <div class="mt-5 flex justify-between" :class="sidePanel !== sidePanelState.closed ? 'flex-col items-center' : 'items-center justify-between'"
+>
+                <div></div>
+                <Pagination v-slot="{ page }" :items-per-page="pageData?.pageSize || 10" :total="pageData?.total || 10"
+                    :default-page="2" :page="pageNum" @update:page="setPage">
+                    <PaginationContent v-slot="{ items }">
+                        <PaginationPrevious />
+                        <template v-for="(item, index) in items" :key="index">
+                            <PaginationItem v-if="item.type === 'page'" :value="item.value"
+                                :is-active="item.value === page">
+                                {{ item.value }}
+                            </PaginationItem>
+                        </template>
+                        <PaginationEllipsis :index="4" />
+                        <PaginationNext />
+                    </PaginationContent>
+                </Pagination>
+                <div class="flex items-center gap-3 text-sm" :class="sidePanel !== sidePanelState.closed ? 'mt-3' : ''" >
+                    <p class="text-muted-foreground text-nowrap">Per page:</p>
+
+                    <button v-for="size in pageSizeOptions" :key="size" @click="setPageSize(size)"
+                        class="px-2 py-1 rounded transition-colors" :class="{
+                            'bg-muted font-semibold': pageSize === size,
+                            'hover:bg-muted/50': pageSize !== size
+                        }">
+                        {{ size }}
+                    </button>
+                </div>
+            </div>
+
         </div>
         <!-- view training report section -->
         <div v-if="focusedTrainingReport != null && sidePanel == sidePanelState.view" class="pl-9 my-3 border-l w-3/5">
-            <div class="flex justify-between">
+            <div class="flex justify-between items-center">
                 <p class="scroll-m-20 text-2xl font-semibold tracking-tight">Training Report Details</p>
-                <button @click="closeTrainingReport" class="cursor-pointer">
-                    <X></X>
-                </button>
+                <Button @click="closeTrainingReport" class="cursor-pointer" variant="ghost" size="icon">
+                    <X class="size-6"></X>
+                </Button>
             </div>
             <div v-if="TRLoaded" 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">
@@ -189,7 +247,7 @@ const TRLoaded = ref(false);
                                 :member-id="focusedTrainingReport.created_by" />
                         <p v-else>{{ focusedTrainingReport.created_by_name === null ? "Unknown User" :
                             focusedTrainingReport.created_by_name
-                            }}</p>
+                        }}</p>
                         </p>
                     </div>
                 </div>
@@ -294,13 +352,13 @@ const TRLoaded = ref(false);
             </div>
         </div>
         <div v-if="sidePanel == sidePanelState.create" class="pl-7 border-l w-3/5 max-w-5xl">
-            <div class="flex justify-between my-3">
+            <div class="flex justify-between items-center my-3">
                 <div class="flex pl-2 gap-5">
                     <p class="scroll-m-20 text-2xl font-semibold tracking-tight">New Training Report</p>
                 </div>
-                <button @click="closeTrainingReport" class="cursor-pointer">
-                    <X></X>
-                </button>
+                <Button @click="closeTrainingReport" class="cursor-pointer" variant="ghost" size="icon">
+                    <X class="size-6"></X>
+                </Button>
             </div>
             <div class="overflow-y-auto max-h-[70vh] mt-5 scrollbar-themed">
                 <TrainingReportForm class="w-full pl-2"