diff --git a/ui/src/components/calendar/ViewCalendarEvent.vue b/ui/src/components/calendar/ViewCalendarEvent.vue
index c99e0dc..22217cc 100644
--- a/ui/src/components/calendar/ViewCalendarEvent.vue
+++ b/ui/src/components/calendar/ViewCalendarEvent.vue
@@ -12,6 +12,7 @@ import DropdownMenuTrigger from '../ui/dropdown-menu/DropdownMenuTrigger.vue';
 import DropdownMenuContent from '../ui/dropdown-menu/DropdownMenuContent.vue';
 import DropdownMenuItem from '../ui/dropdown-menu/DropdownMenuItem.vue';
 import { Calendar } from 'lucide-vue-next';
+import MemberCard from '../members/MemberCard.vue';
 
 const route = useRoute();
 
@@ -239,7 +240,7 @@ defineExpose({ forceReload })
                     <MapPin :size="20"></MapPin> {{ activeEvent.location || "Unknown" }}
                 </div>
                 <div class="text-foreground/80 flex gap-3 items-center">
-                    <User :size="20"></User> {{ activeEvent.creator_name || "Unknown User" }}
+                    <User :size="20"></User> <MemberCard :member-id="activeEvent.creator_id"></MemberCard>
                 </div>
             </section>
             <!-- Description -->
@@ -276,7 +277,9 @@ defineExpose({ forceReload })
 
                         <div v-for="person in attendanceList" :key="person.member_id"
                             class="grid grid-cols-2 py-1 *:px-3 hover:bg-muted">
-                            <p>{{ person.member_name }}</p>
+                            <div>
+                                <MemberCard :member-id="person.member_id"></MemberCard>
+                            </div>
                             <p :class="statusColor(person.status)" class="text-right">
                                 {{ displayStatus(person.status) }}
                             </p>