diff --git a/components/EventCalendar.vue b/components/EventCalendar.vue
index 6277bba..6f5925a 100644
--- a/components/EventCalendar.vue
+++ b/components/EventCalendar.vue
@@ -254,6 +254,14 @@ function handleEventMount(mountInfo: any) {
 
 // Transform event data for FullCalendar
 function transformEventForCalendar(event: Event): FullCalendarEvent {
+  console.log('[EventCalendar] Transforming event:', {
+    id: event.id,
+    title: event.title,
+    start_datetime: event.start_datetime,
+    end_datetime: event.end_datetime,
+    event_type: event.event_type
+  });
+  
   const eventTypeColors = {
     'meeting': { bg: '#2196f3', border: '#1976d2' },
     'social': { bg: '#4caf50', border: '#388e3c' },
@@ -265,15 +273,44 @@ function transformEventForCalendar(event: Event): FullCalendarEvent {
   const colors = eventTypeColors[event.event_type] || 
     { bg: '#757575', border: '#424242' };
 
-  return {
+  // Ensure dates are properly formatted for FullCalendar
+  let startDate: string | Date;
+  let endDate: string | Date;
+  
+  try {
+    // Convert to Date objects first to validate, then use ISO strings
+    const startDateObj = new Date(event.start_datetime);
+    const endDateObj = new Date(event.end_datetime);
+    
+    if (isNaN(startDateObj.getTime()) || isNaN(endDateObj.getTime())) {
+      console.error('[EventCalendar] Invalid date values for event:', event.id, {
+        start: event.start_datetime,
+        end: event.end_datetime
+      });
+      // Use fallback dates
+      startDate = new Date().toISOString();
+      endDate = new Date(Date.now() + 3600000).toISOString(); // +1 hour
+    } else {
+      startDate = startDateObj.toISOString();
+      endDate = endDateObj.toISOString();
+    }
+  } catch (error) {
+    console.error('[EventCalendar] Date parsing error for event:', event.id, error);
+    // Use fallback dates
+    startDate = new Date().toISOString();
+    endDate = new Date(Date.now() + 3600000).toISOString(); // +1 hour
+  }
+
+  const transformedEvent = {
     id: event.id,
     title: event.title,
-    start: event.start_datetime,
-    end: event.end_datetime,
+    start: startDate,
+    end: endDate,
     backgroundColor: colors.bg,
     borderColor: colors.border,
     textColor: '#ffffff',
     extendedProps: {
+      originalEvent: event, // Store original event for debugging
       description: event.description,
       location: event.location,
       event_type: event.event_type,
@@ -287,6 +324,16 @@ function transformEventForCalendar(event: Event): FullCalendarEvent {
       creator: event.creator
     }
   };
+  
+  console.log('[EventCalendar] Transformed event result:', {
+    id: transformedEvent.id,
+    title: transformedEvent.title,
+    start: transformedEvent.start,
+    end: transformedEvent.end,
+    backgroundColor: transformedEvent.backgroundColor
+  });
+  
+  return transformedEvent;
 }
 
 // Public methods
diff --git a/components/EventDetailsDialog.vue b/components/EventDetailsDialog.vue
index 1d90e28..44c594a 100644
--- a/components/EventDetailsDialog.vue
+++ b/components/EventDetailsDialog.vue
@@ -1,10 +1,10 @@
 <template>
   <v-dialog v-model="show" max-width="600" persistent>
     <v-card v-if="event">
-      <v-card-title class="d-flex justify-space-between align-center">
+    <v-card-title class="d-flex justify-space-between align-center">
         <div class="d-flex align-center">
           <v-icon class="me-2" :color="eventTypeColor">{{ eventTypeIcon }}</v-icon>
-          <span>{{ event.title }}</span>
+          <span>{{ event?.title || 'Event Details' }}</span>
         </div>
         <v-btn
           @click="close"
@@ -187,7 +187,7 @@
             RSVP to this Event
           </v-card-title>
           <v-card-text class="pt-0">
-            <v-form v-model="rsvpValid" @submit.prevent="submitRSVP">
+            <v-form v-model="rsvpValid">
               <v-textarea
                 v-model="rsvpNotes"
                 label="Notes (optional)"
@@ -196,12 +196,14 @@
                 class="mb-3"
               />
               
-              <div class="d-flex gap-2">
+              <div class="d-flex justify-space-between gap-4">
                 <v-btn
                   @click="submitRSVP('confirmed')"
                   color="success"
                   :loading="rsvpLoading"
                   :disabled="isEventFull && !isWaitlistAvailable"
+                  size="large"
+                  class="flex-grow-1"
                 >
                   <v-icon start>mdi-check</v-icon>
                   {{ isEventFull ? 'Join Waitlist' : 'Confirm Attendance' }}
@@ -212,6 +214,8 @@
                   color="error"
                   variant="outlined"
                   :loading="rsvpLoading"
+                  size="large"
+                  class="flex-grow-1"
                 >
                   <v-icon start>mdi-close</v-icon>
                   Decline
@@ -303,7 +307,9 @@ const isPastEvent = computed(() => {
 const isEventFull = computed(() => {
   if (!props.event?.max_attendees) return false;
   const maxAttendees = parseInt(props.event.max_attendees);
-  const currentAttendees = props.event.current_attendees || 0;
+  const currentAttendees = typeof props.event.current_attendees === 'string' 
+    ? parseInt(props.event.current_attendees) || 0
+    : props.event.current_attendees || 0;
   return currentAttendees >= maxAttendees;
 });
 
@@ -365,7 +371,9 @@ const formatEventTime = computed(() => {
 const capacityPercentage = computed(() => {
   if (!props.event?.max_attendees) return 0;
   const max = parseInt(props.event.max_attendees);
-  const current = props.event.current_attendees || 0;
+  const current = typeof props.event.current_attendees === 'string' 
+    ? parseInt(props.event.current_attendees) || 0
+    : props.event.current_attendees || 0;
   return (current / max) * 100;
 });