diff --git a/ui/src/App.vue b/ui/src/App.vue
index 1df0e07..7e208d0 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -29,12 +29,12 @@ const version = import.meta.env.VITE_APPLICATION_VERSION;
       background-position: center;">
     <div class="sticky top-0 bg-background z-50">
       <Navbar class="flex"></Navbar>
-      <Alert v-if="environment == 'dev'" class="m-2 mx-auto w-5xl" variant="info">
-        <AlertDescription class="flex flex-row items-center text-nowrap gap-5 mx-auto">
+      <Alert v-if="environment == 'dev'" class="m-2 mx-auto max-w-5xl" variant="info">
+        <AlertDescription class="flex flex-row items-center text-wrap gap-5 mx-auto">
           <p>Development environment (v{{ version }}). Features may be incomplete or unavailable.</p>
         </AlertDescription>
       </Alert>
-      <Alert v-if="userStore.user?.LOAs?.[0]" class="m-2 mx-auto w-5xl" variant="info">
+      <Alert v-if="userStore.user?.LOAs?.[0]" class="m-2 mx-auto max-w-5xl" variant="info">
         <AlertDescription class="flex flex-row items-center text-nowrap gap-5 mx-auto">
           <p>You are on LOA until <strong>{{ formatDate(userStore.user?.LOAs?.[0].extended_till ||
             userStore.user?.LOAs?.[0].end_date) }}</strong></p>
diff --git a/ui/src/components/calendar/ViewCalendarEvent.vue b/ui/src/components/calendar/ViewCalendarEvent.vue
index 3f2fb39..cb40420 100644
--- a/ui/src/components/calendar/ViewCalendarEvent.vue
+++ b/ui/src/components/calendar/ViewCalendarEvent.vue
@@ -31,9 +31,14 @@ watch(
     { immediate: true }
 );
 
+watch(loaded, (value) => {
+    if (value) emit('load');
+});
+
 const emit = defineEmits<{
     (e: 'close'): void
     (e: 'reload'): void
+    (e: 'load'): void
     (e: 'edit', event: CalendarEvent): void
 }>()
 
@@ -179,7 +184,7 @@ defineExpose({ forceReload })
 <template>
     <div v-if="loaded">
         <!-- Header -->
-        <div class="flex items-center justify-between gap-3 border-b px-4 py-3 ">
+        <div class="flex items-center justify-between gap-3 border-b border-border px-4 py-3 ">
             <h2 class="text-lg font-semibold break-after-all">
                 {{ activeEvent?.name || 'Event' }}
             </h2>
@@ -227,14 +232,14 @@ defineExpose({ forceReload })
                 </div>
             </section>
             <section v-if="isPast && userStore.state === 'member'" class="w-full">
-                <ButtonGroup class="flex w-full">
-                    <Button variant="outline"
+                <ButtonGroup class="flex w-full justify-center">
+                    <Button variant="outline" class="flex-1"
                         :class="myAttendance?.status === CalendarAttendance.Attending ? 'border-2 border-primary text-primary' : ''"
                         @click="setAttendance(CalendarAttendance.Attending)">Going</Button>
-                    <Button variant="outline"
+                    <Button variant="outline" class="flex-1"
                         :class="myAttendance?.status === CalendarAttendance.Maybe ? 'border-2 !border-l-2 border-primary text-primary' : ''"
                         @click="setAttendance(CalendarAttendance.Maybe)">Maybe</Button>
-                    <Button variant="outline"
+                    <Button variant="outline" class="flex-1"
                         :class="myAttendance?.status === CalendarAttendance.NotAttending ? 'border-2 !border-l-2 border-primary text-primary' : ''"
                         @click="setAttendance(CalendarAttendance.NotAttending)">Declined</Button>
                 </ButtonGroup>
@@ -259,7 +264,7 @@ defineExpose({ forceReload })
             <!-- Description -->
             <section class="space-y-2 w-full">
                 <p class="text-lg font-semibold">Description</p>
-                <p class="border bg-muted/50 px-3 py-2 rounded-lg min-h-24 my-2 whitespace-pre-line">
+                <p class="border border-border bg-muted/50 px-3 py-2 rounded-lg min-h-24 my-2 whitespace-pre-line">
                     {{ activeEvent.description }}
                 </p>
             </section>
@@ -273,8 +278,8 @@ defineExpose({ forceReload })
                         <p>Declined <span class="ml-1">{{ attendanceStatusSummary.notAttending }}</span></p>
                     </div> -->
                 </div>
-                <div class="flex flex-col border bg-muted/50 rounded-lg min-h-24 my-2">
-                    <div class="flex w-full pt-2 border-b *:w-full *:text-center *:pb-1 *:cursor-pointer">
+                <div class="flex flex-col border border-border bg-muted/50 rounded-lg min-h-24 my-2">
+                    <div class="flex w-full pt-2 border-b border-border *:w-full *:text-center *:pb-1 *:cursor-pointer">
                         <label :class="attendanceTab === 'Alpha' ? 'border-b-3 border-foreground' : 'mb-[2px]'"
                             @click="attendanceTab = 'Alpha'">Alpha {{ attendanceCountsByGroup.Alpha }}</label>
                         <label :class="attendanceTab === 'Echo' ? 'border-b-3 border-foreground' : 'mb-[2px]'"
@@ -283,14 +288,14 @@ defineExpose({ forceReload })
                             @click="attendanceTab = 'Other'">Other {{ attendanceCountsByGroup.Other }}</label>
                     </div>
                     <div class="pb-1 min-h-48">
-                        <div class="grid grid-cols-2 font-semibold text-muted-foreground border-b py-1 px-3 mb-2">
+                        <div class="grid grid-cols-2 font-semibold text-muted-foreground border-b border-border py-1 px-3 mb-2">
                             <p>Name</p>
                             <p class="text-right">Status</p>
                         </div>
 
                         <div v-for="person in attendanceList" :key="person.member_id"
-                            class="grid grid-cols-2 py-1 *:px-3 hover:bg-muted">
-                            <div>
+                            class="grid grid-cols-3 py-1 *:px-3 hover:bg-muted">
+                            <div class="col-span-2">
                                 <MemberCard :member-id="person.member_id"></MemberCard>
                             </div>
                             <p :class="statusColor(person.status)" class="text-right">
@@ -302,11 +307,14 @@ defineExpose({ forceReload })
             </section>
         </div>
     </div>
-    <div v-else class="flex justify-center h-full items-center">
-        <Button variant="ghost" size="icon" @click="emit('close')">
+    <div v-else class="relative flex justify-center items-center h-full">
+        <!-- Close button (top-right) -->
+        <Button variant="ghost" size="icon" class="absolute top-2 right-2" @click="emit('close')">
             <X class="size-5" />
         </Button>
 
-        <Spinner class="size-8"></Spinner>
+        <!-- Spinner (centered) -->
+        <Spinner class="size-8" />
     </div>
+
 </template>
\ No newline at end of file
diff --git a/ui/src/components/ui/button/index.js b/ui/src/components/ui/button/index.js
index 2650455..77b8884 100644
--- a/ui/src/components/ui/button/index.js
+++ b/ui/src/components/ui/button/index.js
@@ -16,7 +16,7 @@ export const buttonVariants = cva(
         secondary:
           "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
         ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+          "hover:bg-accent active:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         success:
           "bg-success text-success-foreground shadow-xs hover:bg-success/90",
         link: "text-primary underline-offset-4 hover:underline",
diff --git a/ui/src/pages/Calendar.vue b/ui/src/pages/Calendar.vue
index 954e316..efef877 100644
--- a/ui/src/pages/Calendar.vue
+++ b/ui/src/pages/Calendar.vue
@@ -155,7 +155,7 @@ onMounted(() => {
     <div>
         <CreateCalendarEvent ref="dialogRef" @reload="loadEvents(); eventViewRef.forceReload();"></CreateCalendarEvent>
         <div class="flex">
-            <div class="flex-1 min-h-0 mt-5">
+            <div class="flex-1 min-h-0 mt-5" :class="{ 'hidden md:block': panelOpen }">
                 <div class="h-[80vh] min-h-0">
                     <!-- calendar header -->
                     <div class="flex items-center justify-between mx-5">
@@ -208,10 +208,10 @@ onMounted(() => {
                 </div>
             </div>
             <aside v-if="panelOpen"
-                class="3xl:w-lg 2xl:w-md border-l bg-card text-foreground flex flex-col overflow-auto scrollbar-themed"
+                class="w-screen 3xl:w-lg 2xl:w-md lg:border-l bg-card text-foreground flex flex-col overflow-auto scrollbar-themed"
                 :style="{ height: 'calc(100vh - 61px)', position: 'sticky', top: '64px' }">
                 <ViewCalendarEvent ref="eventViewRef" :key="currentEventID" @close="() => { router.push('/calendar'); }"
-                    @reload="loadEvents()" @edit="(val) => { dialogRef.openDialog(null, 'edit', val) }">
+                    @reload="loadEvents()" @load="calendarRef.getApi().updateSize()" @edit="(val) => { dialogRef.openDialog(null, 'edit', val) }">
                 </ViewCalendarEvent>
             </aside>
         </div>