diff --git a/app/components/event/Editor.vue b/app/components/event/Editor.vue
index e47ee29..1058cdd 100644
--- a/app/components/event/Editor.vue
+++ b/app/components/event/Editor.vue
@@ -10,6 +10,10 @@ const props = defineProps({
 
 const emit = defineEmits(['save', 'delete'])
 
+const editedEvent = ref<any>({})
+const filesToUpload = ref<File[]>([])
+// Build asset list for the uploader from the real event assets
+const eventAssets = ref<{ imageUrl: string, isPreview?: boolean, fileName?: string }[]>([])
 const editedEvent = ref({
   name: '',
   date: '',
@@ -17,14 +21,42 @@ const editedEvent = ref({
   image: '',
 })
 
-// Watch for changes to the event prop and update the form
 watch(() => props.event, (newEvent) => {
   if (newEvent) {
     editedEvent.value = { ...newEvent }
+    // Map existing server assets to uploader format
+    // imageUrl in DB is just the fileName (after the upload fix)
+    eventAssets.value = (newEvent.eventAssets || []).map((a: any) => ({
+      imageUrl: `/api/events/${newEvent.id}/images/${a.imageUrl}`,
+      fileName: a.imageUrl,
+      isPreview: false,
+    }))
   }
 }, { immediate: true })
 
-function saveEvent() {
+function onFilesChanged(files: File[]) {
+  filesToUpload.value = files
+}
+
+async function saveEvent() {
+  // Upload any pending files first
+  if (filesToUpload.value.length > 0) {
+    for (const file of filesToUpload.value) {
+      const formData = new FormData()
+      formData.append('file', file)
+      try {
+        await $fetch(`/api/events/${editedEvent.value.id}/images/upload`, {
+          method: 'POST',
+          body: formData,
+        })
+      }
+      catch (err) {
+        console.error(`Failed to upload ${file.name}:`, err)
+      }
+    }
+    filesToUpload.value = []
+  }
+
   emit('save', { ...editedEvent.value })
 }
 
@@ -39,41 +71,69 @@ function deleteEvent() {
       Edit Event
     </h3>
 
-    <UFormField label="Event Name">
-      <UInput v-model="editedEvent.name" />
-    </UFormField>
+    <UFormGroup label="Event Title">
+      <UInput
+        v-model="editedEvent.title"
+        placeholder="Event title"
+      />
+    </UFormGroup>
 
-    <UFormField label="Date">
+    <UFormGroup label="Short Description">
       <UInput
-        v-model="editedEvent.date"
-        type="date"
+        v-model="editedEvent.shortDesc"
+        placeholder="Brief description"
       />
-    </UFormField>
-
-    <UFormField label="Location">
-      <UInput v-model="editedEvent.location" />
-    </UFormField>
-
-    <UFormField label="Image URL">
-      <UInput v-model="editedEvent.image" />
-    </UFormField>
-
-    <!-- Preview image if URL provided -->
-    <div
-      v-if="editedEvent.image"
-      class="mt-2"
-    >
-      <p class="text-sm text-gray-600 mb-2">
-        Image Preview:
-      </p>
-      <img
-        :src="editedEvent.image"
-        alt="Event preview"
-        class="w-full h-32 object-cover rounded-lg"
-        @error="$event.target.style.display = 'none'"
-      >
+    </UFormGroup>
+
+    <UFormGroup label="Full Description">
+      <UTextarea
+        v-model="editedEvent.description"
+        :rows="4"
+        placeholder="Full description"
+      />
+    </UFormGroup>
+
+    <UFormGroup label="Location">
+      <UInput
+        v-model="editedEvent.location.address"
+        placeholder="Location address"
+      />
+    </UFormGroup>
+
+    <div class="grid grid-cols-2 gap-4">
+      <UFormGroup label="Start Date & Time">
+        <UInput
+          v-model="editedEvent.startTime"
+          type="datetime-local"
+        />
+      </UFormGroup>
+      <UFormGroup label="End Date & Time">
+        <UInput
+          v-model="editedEvent.endTime"
+          type="datetime-local"
+        />
+      </UFormGroup>
     </div>
 
+    <div class="space-y-2">
+      <label class="flex items-center gap-2 cursor-pointer">
+        <UCheckbox v-model="editedEvent.allowVolunteers" />
+        <span class="text-sm font-medium text-gray-700">Allow Volunteers</span>
+      </label>
+      <label class="flex items-center gap-2 cursor-pointer">
+        <UCheckbox v-model="editedEvent.allowAttendees" />
+        <span class="text-sm font-medium text-gray-700">Allow Attendees</span>
+      </label>
+    </div>
+
+    <UFormGroup label="Event Images">
+      <EventImageUpload
+        :existing-assets="editedEvent.eventAssets"
+        :event-id="editedEvent.id"
+        @files-changed="onFilesChanged"
+      />
+    </UFormGroup>
+
     <div class="flex justify-between pt-2">
       <UButton
         color="red"
diff --git a/app/components/event/ImageUpload.vue b/app/components/event/ImageUpload.vue
new file mode 100644
index 0000000..05b1a73
--- /dev/null
+++ b/app/components/event/ImageUpload.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+/**
+ * EventImageUpload
+ *
+ * Wraps Nuxt UI's UFileUpload for use in event forms.
+ * - Handles multiple image selection with drag & drop
+ * - Shows existing server images alongside new uploads
+ * - Supports deleting existing images from the server
+ */
+
+interface ServerAsset {
+  imageUrl: string // just the fileName as stored in DB
+}
+
+const props = defineProps<{
+  // Existing saved assets from the server (pass event.eventAssets)
+  existingAssets?: ServerAsset[]
+  // The event ID, needed to build image URLs and delete from server
+  eventId?: string
+}>()
+
+const emit = defineEmits<{
+  // Emits the raw File[] whenever selection changes, for parent to upload on save
+  (e: 'filesChanged', files: File[]): void
+  // Emits when an existing server image is deleted
+  (e: 'assetDeleted', imageUrl: string): void
+}>()
+
+// Files selected by the user (not yet uploaded)
+const selectedFiles = ref<File[]>([])
+
+// Track which existing assets are still present
+const remainingAssets = ref<ServerAsset[]>([...(props.existingAssets || [])])
+
+watch(() => props.existingAssets, (assets) => {
+  remainingAssets.value = [...(assets || [])]
+}, { deep: true })
+
+function onFilesChanged(files: File[] | null | undefined) {
+  const safeFiles = files ?? []
+  selectedFiles.value = safeFiles
+  emit('filesChanged', safeFiles)
+}
+
+function getAssetUrl(asset: ServerAsset) {
+  return `/api/events/${asset.imageUrl}`
+}
+
+async function deleteExistingAsset(asset: ServerAsset) {
+  if (!props.eventId) return
+
+  try {
+    await $fetch(getAssetUrl(asset), {
+      method: 'DELETE',
+    })
+    remainingAssets.value = remainingAssets.value.filter(a => a.imageUrl !== asset.imageUrl)
+    emit('assetDeleted', asset.imageUrl)
+  }
+  catch (err) {
+    console.error('Failed to delete image:', err)
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- Existing server images -->
+    <div v-if="remainingAssets.length > 0">
+      <p class="text-sm text-gray-500 mb-2">
+        Current Images
+      </p>
+      <div class="grid grid-cols-3 gap-2">
+        <div
+          v-for="asset in remainingAssets"
+          :key="asset.imageUrl"
+          class="relative group aspect-square rounded-lg overflow-hidden bg-gray-100"
+        >
+          <img
+            :src="getAssetUrl(asset)"
+            :alt="asset.imageUrl"
+            class="w-full h-full object-cover"
+          >
+          <button
+            class="absolute top-1 right-1 bg-red-500 text-white p-1 rounded-full shadow"
+            type="button"
+            @click="deleteExistingAsset(asset)"
+          >
+            <UIcon
+              name="i-lucide-trash-2"
+              class="w-3 h-3"
+            />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- UFileUpload for new images -->
+    <UFileUpload
+      v-model="selectedFiles"
+      multiple
+      accept="image/*"
+      variant="area"
+      layout="list"
+      icon="i-lucide-image"
+      label="Drop images here or click to browse"
+      description="PNG, JPG, WEBP, GIF supported"
+      color="brand4"
+      class="w-full min-h-36"
+      @update:model-value="onFilesChanged"
+    />
+  </div>
+</template>
diff --git a/app/components/event/Modal.vue b/app/components/event/Modal.vue
index 415f2ff..5d66dab 100644
--- a/app/components/event/Modal.vue
+++ b/app/components/event/Modal.vue
@@ -1,6 +1,4 @@
-<script setup>
-import { ref, watch } from 'vue'
-
+<script setup lang="ts">
 const emit = defineEmits(['save', 'close'])
 
 const newEvent = ref({
@@ -19,29 +17,11 @@ const newEvent = ref({
 const isSaving = ref(false)
 
 // Store actual File objects for upload
-const filesToUpload = ref([])
+const filesToUpload = ref([] as File[])
 
-watch(filesToUpload, async (newFiles) => {
-  if (!newFiles || newFiles.length === 0) {
-    newEvent.value.eventAssets = []
-    return
-  }
-  const previews = await Promise.all(
-    Array.from(newFiles).map(
-      file =>
-        new Promise((resolve) => {
-          const reader = new FileReader()
-          reader.onload = e =>
-            resolve({
-              imageUrl: e.target.result,
-              fileName: file.name,
-            })
-          reader.readAsDataURL(file)
-        }),
-    ),
-  )
-  newEvent.value.eventAssets = previews
-})
+function onFilesChanged(files: File[]) {
+  filesToUpload.value = files
+}
 
 async function saveEvent() {
   // Validate required fields
@@ -59,7 +39,7 @@ async function saveEvent() {
   isSaving.value = true
 
   try {
-    // Step 1: Create the event in the database
+    // Step 1: Create the event
     const response = await $fetch('/api/events', {
       method: 'POST',
       body: {
@@ -75,9 +55,7 @@ async function saveEvent() {
       },
     })
 
-    console.log('✅ Event created:', response)
-
-    // Step 2: Upload images if event was created successfully
+    // Step 2: Upload images
     if (response.id && filesToUpload.value.length > 0) {
       console.log(`📤 Uploading ${filesToUpload.value.length} images...`)
 
@@ -101,7 +79,7 @@ async function saveEvent() {
       }
     }
 
-    // Step 3: Fetch the complete event with images from the server
+    // Step 3: Fetch complete event with images
     const completeEvent = await $fetch(`/api/events/${response.id}`)
 
     console.log('✅ Complete event fetched:', completeEvent)
@@ -201,7 +179,6 @@ function cancel() {
           />
         </UFormField>
       </div>
-
       <div>
         <label class="block text-sm font-medium text-gray-700 mb-1">
           End Date & Time <span class="text-red-500">*</span>
@@ -213,47 +190,42 @@ function cancel() {
           />
         </UFormField>
       </div>
-    </div>
 
-    <div class="space-y-2">
-      <label class="flex items-center gap-2 cursor-pointer">
-        <UCheckbox v-model="newEvent.allowVolunteers" />
-        <span class="text-sm font-medium text-gray-700">Allow Volunteers</span>
-      </label>
-
-      <label class="flex items-center gap-2 cursor-pointer">
-        <UCheckbox v-model="newEvent.allowAttendees" />
-        <span class="text-sm font-medium text-gray-700">Allow Attendees to Register</span>
-      </label>
-    </div>
+      <div class="space-y-2">
+        <label class="flex items-center gap-2 cursor-pointer">
+          <UCheckbox v-model="newEvent.allowVolunteers" />
+          <span class="text-sm font-medium text-gray-700">Allow Volunteers</span>
+        </label>
+        <label class="flex items-center gap-2 cursor-pointer">
+          <UCheckbox v-model="newEvent.allowAttendees" />
+          <span class="text-sm font-medium text-gray-700">Allow Attendees to Register</span>
+        </label>
+      </div>
 
-    <div>
-      <UFormField label="Event Images">
-        <UFileUpload
-          v-model="filesToUpload"
-          multiple
-          accept="image/*"
-          placeholder="Upload images"
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-2">Event Images</label>
+        <EventImageUpload
+          @files-changed="onFilesChanged"
         />
-      </UFormField>
-    </div>
+      </div>
 
-    <div class="flex justify-end gap-2 pt-4 border-t">
-      <UButton
-        variant="ghost"
-        color="brand4"
-        :disabled="isSaving"
-        @click="cancel"
-      >
-        Cancel
-      </UButton>
-      <UButton
-        color="brand4"
-        :loading="isSaving"
-        @click="saveEvent"
-      >
-        {{ isSaving ? "Creating..." : "Create Event" }}
-      </UButton>
+      <div class="flex justify-end gap-2 pt-4 border-t">
+        <UButton
+          variant="ghost"
+          color="brand4"
+          :disabled="isSaving"
+          @click="cancel"
+        >
+          Cancel
+        </UButton>
+        <UButton
+          color="brand4"
+          :loading="isSaving"
+          @click="saveEvent"
+        >
+          {{ isSaving ? "Creating..." : "Create Event" }}
+        </UButton>
+      </div>
     </div>
   </div>
 </template>
diff --git a/app/components/event/RSVPModal.vue b/app/components/event/RSVPModal.vue
new file mode 100644
index 0000000..002fe50
--- /dev/null
+++ b/app/components/event/RSVPModal.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+const props = defineProps<{
+  eventId: string
+  isVolunteer: boolean
+}>()
+
+const emit = defineEmits(['success', 'close'])
+
+const name = ref('')
+const email = ref('')
+const isSubmitting = ref(false)
+const error = ref('')
+
+async function submit() {
+  if (!name.value.trim() || !email.value.trim()) {
+    error.value = 'Please fill in all fields'
+    return
+  }
+
+  isSubmitting.value = true
+  error.value = ''
+
+  try {
+    // @ts-ignore
+    await $fetch(`/api/events/${props.eventId}/rsvp`, {
+      method: 'POST',
+      body: {
+        name: name.value,
+        email: email.value,
+        isVolunteer: props.isVolunteer,
+      },
+    })
+    emit('success')
+  }
+  catch (err: any) {
+    error.value = err?.data?.message || 'Something went wrong. Please try again.'
+  }
+  finally {
+    isSubmitting.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="p-6 space-y-4">
+    <h3 class="text-xl font-semibold text-brand4">
+      {{ isVolunteer ? 'Sign Up as Volunteer' : 'Register to Attend' }}
+    </h3>
+
+    <p class="text-sm text-gray-500">
+      {{ isVolunteer
+        ? 'Fill in your details to volunteer at this event.'
+        : 'Fill in your details to register as an attendee.' }}
+    </p>
+
+    <UFormField label="Full Name">
+      <UInput
+        v-model="name"
+        placeholder="Your name"
+      />
+    </UFormField>
+
+    <UFormField label="Email">
+      <UInput
+        v-model="email"
+        type="email"
+        placeholder="your@email.com"
+      />
+    </UFormField>
+
+    <p
+      v-if="error"
+      class="text-sm text-red-500"
+    >
+      {{ error }}
+    </p>
+
+    <div class="flex justify-end gap-2 pt-2 border-t">
+      <UButton
+        variant="ghost"
+        color="brand4"
+        :disabled="isSubmitting"
+        @click="$emit('close')"
+      >
+        Cancel
+      </UButton>
+      <UButton
+        color="brand4"
+        :loading="isSubmitting"
+        @click="submit"
+      >
+        {{ isVolunteer ? 'Sign Up' : 'Register' }}
+      </UButton>
+    </div>
+  </div>
+</template>
diff --git a/app/components/event/RSVPStats.vue b/app/components/event/RSVPStats.vue
new file mode 100644
index 0000000..0bbbbf8
--- /dev/null
+++ b/app/components/event/RSVPStats.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+interface GuestRSVP {
+  id: string
+  name: string
+  email: string
+  isVolunteer: boolean
+  createdAt: string
+}
+
+interface RSVPData {
+  volunteerCount: number
+  attendeeCount: number
+  volunteers: GuestRSVP[]
+  attendees: GuestRSVP[]
+}
+
+const props = defineProps<{
+  eventId: string
+  admin: boolean
+}>()
+
+const { data: rsvpData, refresh } = await useFetch<RSVPData>(`/api/events/${props.eventId}/rsvp`)
+
+const showVolunteers = ref(false)
+const showAttendees = ref(false)
+
+defineExpose({ refresh })
+</script>
+
+<template>
+  <div class="bg-white rounded-2xl shadow-sm p-6 mb-6">
+    <h2 class="text-xl font-semibold mb-4">
+      Registrations
+    </h2>
+
+    <div class="flex gap-4">
+      <!-- Volunteer count -->
+      <div class="flex-1">
+        <button
+          class="w-full flex items-center justify-between p-4 bg-brand6 rounded-xl"
+          :class="admin ? 'cursor-pointer hover:bg-brand6/80' : 'cursor-default'"
+          type="button"
+          @click="admin && (showVolunteers = !showVolunteers)"
+        >
+          <div class="flex items-center gap-3">
+            <UIcon
+              name="i-lucide-heart-handshake"
+              class="w-5 h-5 text-brand4"
+            />
+            <div class="text-left">
+              <p class="text-2xl font-bold text-brand4">
+                {{ rsvpData?.volunteerCount ?? 0 }}
+              </p>
+              <p class="text-xs text-gray-500">
+                Volunteers
+              </p>
+            </div>
+          </div>
+          <UIcon
+            v-if="admin"
+            :name="showVolunteers ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
+            class="w-4 h-4 text-gray-400"
+          />
+        </button>
+
+        <!-- Volunteer list -->
+        <div
+          v-if="admin && showVolunteers"
+          class="mt-2 border border-gray-200 rounded-xl overflow-hidden"
+        >
+          <div
+            v-if="rsvpData?.volunteers?.length === 0"
+            class="p-4 text-sm text-gray-500 text-center"
+          >
+            No volunteers yet
+          </div>
+          <div
+            v-for="volunteer in rsvpData?.volunteers"
+            :key="volunteer.id"
+            class="flex flex-col px-4 py-3 border-b border-gray-100 last:border-0"
+          >
+            <p class="text-sm font-medium text-gray-900">
+              {{ volunteer.name }}
+            </p>
+            <p class="text-xs text-gray-500">
+              {{ volunteer.email }}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Attendee count -->
+      <div class="flex-1">
+        <button
+          class="w-full flex items-center justify-between p-4 bg-brand6 rounded-xl"
+          :class="admin ? 'cursor-pointer hover:bg-brand6/80' : 'cursor-default'"
+          type="button"
+          @click="admin && (showAttendees = !showAttendees)"
+        >
+          <div class="flex items-center gap-3">
+            <UIcon
+              name="i-lucide-ticket"
+              class="w-5 h-5 text-brand4"
+            />
+            <div class="text-left">
+              <p class="text-2xl font-bold text-brand4">
+                {{ rsvpData?.attendeeCount ?? 0 }}
+              </p>
+              <p class="text-xs text-gray-500">
+                Attendees
+              </p>
+            </div>
+          </div>
+          <UIcon
+            v-if="admin"
+            :name="showAttendees ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
+            class="w-4 h-4 text-gray-400"
+          />
+        </button>
+
+        <!-- Attendee list -->
+        <div
+          v-if="admin && showAttendees"
+          class="mt-2 border border-gray-200 rounded-xl overflow-hidden"
+        >
+          <div
+            v-if="rsvpData?.attendees?.length === 0"
+            class="p-4 text-sm text-gray-500 text-center"
+          >
+            No attendees yet
+          </div>
+          <div
+            v-for="attendee in rsvpData?.attendees"
+            :key="attendee.id"
+            class="flex flex-col px-4 py-3 border-b border-gray-100 last:border-0"
+          >
+            <p class="text-sm font-medium text-gray-900">
+              {{ attendee.name }}
+            </p>
+            <p class="text-xs text-gray-500">
+              {{ attendee.email }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/components/event/Tile.vue b/app/components/event/Tile.vue
index f271ab4..eb0b8e7 100644
--- a/app/components/event/Tile.vue
+++ b/app/components/event/Tile.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-
-defineEmits(['add'])
+defineEmits(['add', 'click'])
 const props = defineProps<{
   title?: string
   subtitle?: string
   buttonType?: 'plus' | 'arrow'
   eventId?: string
+  imageUrl?: string
 }>()
 
 const iconName = computed(() =>
@@ -14,32 +13,49 @@ const iconName = computed(() =>
     ? 'i-heroicons-arrow-right-20-solid'
     : 'i-heroicons-plus',
 )
+
+function getAssetUrl(imageUrl: string) {
+  return `/api/events/${imageUrl}`
+}
 </script>
 
 <template>
   <div
-    class="flex items-center gap-4 rounded-[22px] border border-gray-800/70 dark:border-gray-700/60 bg-white/70 dark:bg-gray-900/60 backdrop-blur px-4 py-3 shadow-sm"
+    class="flex items-center gap-4 rounded-[22px] border border-gray-800/70 dark:border-gray-700/60
+           bg-white/70 dark:bg-gray-900/60 backdrop-blur px-4 py-3 shadow-sm cursor-pointer
+           hover:shadow-md transition-shadow"
+    @click="$emit('click')"
   >
-    <!-- Square avatar -->
-    <div
-      class="h-12 w-12 rounded-2xl bg-gray-300/70 dark:bg-gray-600/60 border border-gray-800/60"
-    />
+    <!-- Event image or placeholder -->
+    <div class="h-12 w-12 rounded-2xl bg-gray-300/70 dark:bg-gray-600/60 border border-gray-800/60 flex-shrink-0 overflow-hidden">
+      <img
+        v-if="imageUrl"
+        :src="imageUrl"
+        alt="Event image"
+        class="w-full h-full object-cover"
+      >
+      <span
+        v-else
+        class="flex items-center justify-center h-full text-xl"
+      >📅</span>
+    </div>
 
     <!-- Text lines -->
-    <div class="flex-1">
-      <p class="text-sm font-medium text-gray-900 dark:text-gray-100">
+    <div class="flex-1 min-w-0">
+      <p class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
         {{ title }}
       </p>
-
-      <p class="text-xs text-gray-500 dark:text-gray-400">
+      <p class="text-xs text-gray-500 dark:text-gray-400 truncate">
         {{ subtitle }}
       </p>
     </div>
 
     <!-- Action button -->
     <button
-      class="grid place-items-center rounded-xl h-9 w-9 border border-gray-800/70 dark:border-gray-700/60 hover:bg-gray-100/70 dark:hover:bg-gray-800/70 transition"
-      @click="$emit('add', props.eventId)"
+      class="grid place-items-center rounded-xl h-9 w-9 flex-shrink-0 border border-gray-800/70 dark:border-gray-700/60
+             hover:bg-gray-100/70 dark:hover:bg-gray-800/70 transition"
+      type="button"
+      @click.stop="$emit('add')"
     >
       <UIcon
         :name="iconName"
diff --git a/app/pages/events/[id].vue b/app/pages/events/[id].vue
index e8e2cdb..0eb02c5 100644
--- a/app/pages/events/[id].vue
+++ b/app/pages/events/[id].vue
@@ -1,233 +1,139 @@
-<script setup>
+<script setup lang="ts">
 import 'maplibre-gl/dist/maplibre-gl.css'
-import { ref, computed, onMounted } from 'vue'
 
 const route = useRoute()
+const eventId = route.params.id as string
 
-// Get the ID from the route params
-const eventId = route.params.id
-const { data: event } = await useFetch(`/api/events/${route.params.id}`)
+// Single fetch — no onMounted duplicate
+const { data: event, error, refresh } = await useFetch(`/api/events/${eventId}`)
 
-const loading = ref(true)
 const notFound = ref(false)
 
+if (error.value) {
+  console.error('Failed to load event:', error.value)
+  notFound.value = true
+}
+
 const isEditMode = ref(false)
-const editForm = ref({ mobileClinic: false })
+const editForm = ref<any>({})
 
-// placeholder until we implement auth
+// Placeholder until auth is implemented
 const admin = true
 
-// Fetch event data from API on mount
-onMounted(async () => {
-  try {
-    console.log('📡 Loading event with ID:', eventId)
-
-    // Fetch event from your backend API
-    event.value = await $fetch(`/api/events/${eventId}`)
-
-    editForm.value = {
-      ...event.value,
-      mobileClinic: Boolean(event.value?.mobileClinicId),
-    }
-
-    console.log('✅ Event loaded:', event.value)
-    loading.value = false
-  }
-  catch (error) {
-    console.error('❌ Error fetching event:', error)
-    loading.value = false
-    notFound.value = true
-  }
-})
-
-const formattedDate = computed(() => {
-  if (!event.value) return ''
+// RSVP modal state
+const showRsvpModal = ref(false)
+const rsvpIsVolunteer = ref(false)
+const rsvpStatsRef = ref<any>(null)
 
-  const start = new Date(event.value.startTime)
-  const end = new Date(event.value.endTime)
+function openRsvpModal(isVolunteer: boolean) {
+  rsvpIsVolunteer.value = isVolunteer
+  showRsvpModal.value = true
+}
 
-  const dateStr = start.toLocaleDateString('en-US', {
-    weekday: 'long',
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-  })
+async function onRsvpSuccess() {
+  showRsvpModal.value = false
+  await rsvpStatsRef.value?.refresh()
+}
 
-  const startTime = start.toLocaleTimeString('en-US', {
-    hour: 'numeric',
-    minute: '2-digit',
-  })
+// Assets shown in the edit uploader
+const filesToUpload = ref<File[]>([])
 
-  const endTime = end.toLocaleTimeString('en-US', {
-    hour: 'numeric',
-    minute: '2-digit',
-  })
+function enterEditMode() {
+  editForm.value = {
+    ...event.value,
+    startTime: event.value?.startTime ? formatForInput(event.value.startTime) : '',
+    endTime: event.value?.endTime ? formatForInput(event.value.endTime) : '',
+  }
+  isEditMode.value = true
+}
 
-  return `${dateStr} • ${startTime} - ${endTime}`
-})
+function cancelEdit() {
+  isEditMode.value = false
+  filesToUpload.value = []
+}
 
-const style = '/mapstyles.json'
-const center = computed(() => [
-  event.value.location.longitude,
-  event.value.location.latitude,
-])
-const zoom = 15
+function formatForInput(isoString: string) {
+  // Convert ISO date to datetime-local input format
+  return new Date(isoString).toISOString().slice(0, 16)
+}
 
-function toggleEditMode() {
-  if (isEditMode.value) {
-    // Cancel editing - reset form to original event data
-    editForm.value = {
-      ...event.value,
-      mobileClinic: Boolean(event.value?.mobileClinicId),
-    }
-  }
-  isEditMode.value = !isEditMode.value
+function onFilesChanged(files: File[]) {
+  filesToUpload.value = files
 }
 
 async function saveChanges() {
   try {
-    console.log('💾 Saving changes...')
-
-    // Update event via API
-    const _updatedEvent = await $fetch(`/api/events/${event.value.id}`, {
+    await $fetch(`/api/events/${eventId}`, {
       method: 'PATCH',
       body: {
         title: editForm.value.title,
         shortDesc: editForm.value.shortDesc,
         description: editForm.value.description,
-        location: editForm.value.location,
+        location: editForm.value.location?.address || editForm.value.location,
         startTime: new Date(editForm.value.startTime).toISOString(),
         endTime: new Date(editForm.value.endTime).toISOString(),
         allowVolunteers: editForm.value.allowVolunteers,
         allowAttendees: editForm.value.allowAttendees,
-        mobileClinic: editForm.value.mobileClinic,
       },
     })
 
-    // Update local event data
-    event.value = { ...editForm.value }
-
-    // update map center if location changed
-    if (editForm.value.location.address !== event.value.location.address) {
-      center.value = [
-        editForm.value.location.longitude,
-        editForm.value.location.latitude,
-      ]
+    // Upload any new images
+    for (const file of filesToUpload.value) {
+      const formData = new FormData()
+      formData.append('file', file)
+      try {
+        await $fetch(`/api/events/${eventId}/images/upload`, {
+          method: 'POST',
+          body: formData,
+        })
+      }
+      catch (err) {
+        console.error(`Failed to upload ${file.name}:`, err)
+      }
     }
 
+    filesToUpload.value = []
     isEditMode.value = false
 
-    console.log('✅ Event updated successfully')
+    // Refresh event data
+    await refresh()
   }
   catch (error) {
-    if (error.status === 500) {
-      alert(
-        'Failed to geocode the provided location. Please check the address and try again.',
-      )
-      return
-    }
-    console.error('❌ Error updating event:', error)
-    alert('Error updating event. Please try again.')
-  }
-}
-
-const placeholders = [
-  'https://picsum.photos/640/640?random=1',
-  'https://picsum.photos/640/640?random=2',
-  'https://picsum.photos/640/640?random=3',
-  'https://picsum.photos/640/640?random=4',
-  'https://picsum.photos/640/640?random=5',
-  'https://picsum.photos/640/640?random=6',
-]
-
-const filesToUpload = ref([])
-
-function handleImageUpload(event) {
-  const files = event.target?.files || event
-
-  if (!files || files.length === 0) return
-
-  // Store actual File objects for upload
-  filesToUpload.value = [...filesToUpload.value, ...Array.from(files)]
-
-  // Create preview URLs
-  const imagePromises = Array.from(files).map((file) => {
-    return new Promise((resolve) => {
-      const reader = new FileReader()
-      reader.onload = e =>
-        resolve({
-          imageUrl: e.target.result,
-          fileName: file.name,
-          isPreview: true,
-        })
-      reader.readAsDataURL(file)
-    })
-  })
-
-  Promise.all(imagePromises).then((images) => {
-    editForm.value.eventAssets = [
-      ...(editForm.value.eventAssets || []),
-      ...images,
-    ]
-  })
-}
-
-async function uploadNewImages() {
-  if (filesToUpload.value.length === 0) return
-
-  console.log(`📤 Uploading ${filesToUpload.value.length} new images...`)
-
-  for (const file of filesToUpload.value) {
-    const formData = new FormData()
-    formData.append('file', file)
-
-    try {
-      await $fetch(`/api/events/${event.value.id}/images/upload`, {
-        method: 'POST',
-        body: formData,
-      })
-      console.log(`✅ Uploaded: ${file.name}`)
-    }
-    catch (uploadError) {
-      console.error(`❌ Failed to upload ${file.name}:`, uploadError)
-    }
+    console.error('Error updating event:', error)
   }
-
-  // Clear the upload queue
-  filesToUpload.value = []
-
-  // Reload event to get updated image URLs
-  const updatedEvent = await $fetch(`/api/events/${event.value.id}`)
-  event.value = updatedEvent
-  editForm.value = { ...updatedEvent }
 }
 
-function removeImage(index) {
-  // const asset = editForm.value.eventAssets[index]
-
-  // If it's a preview (not yet uploaded), just remove from array
-  editForm.value.eventAssets.splice(index, 1)
-  filesToUpload.value.splice(index, 1)
-}
+const formattedDate = computed(() => {
+  if (!event.value) return ''
+  const start = new Date(event.value.startTime)
+  const end = new Date(event.value.endTime)
+  const dateStr = start.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })
+  const startTime = start.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })
+  const endTime = end.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })
+  return `${dateStr} • ${startTime} - ${endTime}`
+})
 
-// Helper to get proper image URL
-function getImageUrl(asset) {
-  if (asset.isPreview) {
-    return asset.imageUrl // Base64 preview
+// Build carousel items from real assets, fall back to placeholders
+const carouselItems = computed(() => {
+  const assets = event.value?.eventAssets || []
+  if (assets.length > 0) {
+    return assets.map((a: any) => `/api/events/${a.imageUrl}`)
   }
-  // Use your backend image endpoint
-  return `/api/events/${event.value.id}/images/${asset.imageUrl.split('/').pop()}`
-}
-
-const fetchedItems = event.value?.eventAssets.map(
-  asset => '/api/events/' + asset.imageUrl,
-)
-
-const items = (fetchedItems?.length || 0) > 0 ? fetchedItems : placeholders
+  return [
+    'https://picsum.photos/640/640?random=1',
+    'https://picsum.photos/640/640?random=2',
+    'https://picsum.photos/640/640?random=3',
+  ]
+})
 
-const backNavigate = computed(() => {
-  return admin ? '/events/manage' : '/events'
+const mapStyle = '/mapstyles.json'
+const center = computed(() => {
+  if (!event.value?.location) return [0, 0]
+  return [event.value.location.longitude, event.value.location.latitude]
 })
+const zoom = 15
+
+const backNavigate = computed(() => admin ? '/events/manage' : '/events')
 </script>
 
 <template>
@@ -273,8 +179,8 @@ const backNavigate = computed(() => {
     </div>
 
     <!-- Event Details -->
-    <div v-else>
-      <!-- Header with Edit Button -->
+    <div v-else-if="event">
+      <!-- Sticky Header -->
       <div class="bg-white shadow-sm sticky top-0 z-10 mt-16">
         <div
           class="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between"
@@ -295,7 +201,7 @@ const backNavigate = computed(() => {
               icon="i-lucide-pencil"
               color="brand4"
               variant="soft"
-              @click="toggleEditMode"
+              @click="enterEditMode"
             >
               Edit Event
             </UButton>
@@ -304,7 +210,7 @@ const backNavigate = computed(() => {
               <UButton
                 variant="ghost"
                 color="brand4"
-                @click="toggleEditMode"
+                @click="cancelEdit"
               >
                 Cancel
               </UButton>
@@ -314,7 +220,6 @@ const backNavigate = computed(() => {
                 @click="
                   async () => {
                     await saveChanges();
-                    await uploadNewImages();
                   }
                 "
               >
@@ -326,7 +231,7 @@ const backNavigate = computed(() => {
       </div>
 
       <div class="max-w-4xl mx-auto px-4 py-8">
-        <!-- Event Title -->
+        <!-- Title -->
         <div class="mb-6">
           <h1
             v-if="!isEditMode"
@@ -334,13 +239,11 @@ const backNavigate = computed(() => {
           >
             {{ event.title }}
           </h1>
-
           <UInput
             v-else
             v-model="editForm.title"
             size="xl"
             placeholder="Event Title"
-            class="text-4xl font-bold"
           />
         </div>
 
@@ -358,80 +261,43 @@ const backNavigate = computed(() => {
           <UInput
             v-else
             v-model="editForm.shortDesc"
-            class="w-full"
             placeholder="Short Description"
             size="lg"
           />
         </div>
 
-        <!-- Event Images Carousel -->
-        <div class="mb-8">
+        <!-- Carousel (view mode) -->
+        <div
+          v-if="!isEditMode"
+          class="mb-8"
+        >
           <UCarousel
-            v-if="!isEditMode"
             v-slot="{ item }"
             dots
-            :items="items"
+            :items="carouselItems"
             class="h-80 max-w-xs mx-auto"
           >
             <img
               :src="item"
-              class="h-80 w-auto rounded-lg mx-auto"
+              class="h-80 w-auto rounded-lg mx-auto object-cover"
             >
           </UCarousel>
+        </div>
 
-          <!-- Edit Mode Images -->
-          <div
-            v-else
-            class="space-y-4"
-          >
-            <div
-              v-if="
-                editForm.eventAssets
-                  && editForm.eventAssets.length > 0
-              "
-              class="grid grid-cols-2 gap-4"
-            >
-              <div
-                v-for="(asset, index) in editForm.eventAssets"
-                :key="index"
-                class="relative h-48 rounded-xl overflow-hidden group"
-              >
-                <img
-                  :src="getImageUrl(asset)"
-                  alt="Event image"
-                  class="w-full h-full object-cover"
-                >
-                <button
-                  class="absolute top-2 right-2 bg-red-500 text-white p-2 rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
-                  type="button"
-                  @click="removeImage(index)"
-                >
-                  <UIcon
-                    name="i-lucide-x"
-                    class="w-4 h-4"
-                  />
-                </button>
-              </div>
-            </div>
-
-            <div>
-              <label
-                class="block text-sm font-medium text-gray-700 mb-2"
-              >
-                Add Event Images
-              </label>
-              <input
-                type="file"
-                multiple
-                accept="image/*"
-                class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-brand4 hover:file:bg-primary-100 cursor-pointer"
-                @change="handleImageUpload"
-              >
-            </div>
-          </div>
+        <!-- Image management (edit mode) -->
+        <div
+          v-else
+          class="mb-8"
+        >
+          <label class="block text-sm font-medium text-gray-700 mb-2">Event Images</label>
+          <EventImageUpload
+            :existing-assets="event.eventAssets"
+            :event-id="eventId"
+            @files-changed="onFilesChanged"
+          />
         </div>
 
-        <!-- Date & Location Card -->
+        <!-- Date & Location -->
         <div class="bg-white rounded-2xl shadow-sm p-6 mb-6">
           <div class="flex items-start gap-4 mb-4">
             <div class="bg-brand6 p-3 rounded-xl">
@@ -506,13 +372,13 @@ const backNavigate = computed(() => {
           class="h-60 relative overflow-hidden justify-center items-center mb-6"
         >
           <MapInteractive
-            :style="style"
+            :style="mapStyle"
             :center="center"
             :zoom="zoom"
           />
         </div>
 
-        <!-- Full Description -->
+        <!-- Description -->
         <div class="bg-white rounded-2xl shadow-sm p-6 mb-6">
           <h2 class="text-2xl font-semibold mb-4">
             About This Event
@@ -526,7 +392,6 @@ const backNavigate = computed(() => {
           <UTextarea
             v-else
             v-model="editForm.description"
-            class="w-full"
             placeholder="Full event description"
             :rows="6"
           />
@@ -658,7 +523,15 @@ const backNavigate = computed(() => {
           </div>
         </div>
 
-        <!-- Action Buttons for Attendees/Volunteers -->
+        <!-- RSVP Stats (admin only, view mode) -->
+        <EventRSVPStats
+          v-if="admin && !isEditMode"
+          ref="rsvpStatsRef"
+          :event-id="eventId"
+          :admin="admin"
+        />
+
+        <!-- Action Buttons (view mode) -->
         <div
           v-if="!isEditMode"
           class="flex gap-4"
@@ -669,10 +542,10 @@ const backNavigate = computed(() => {
             size="xl"
             block
             icon="i-lucide-heart-handshake"
+            @click="openRsvpModal(true)"
           >
             Sign Up as Volunteer
           </UButton>
-
           <UButton
             v-if="event.allowAttendees"
             color="brand4"
@@ -680,10 +553,29 @@ const backNavigate = computed(() => {
             size="xl"
             block
             icon="i-lucide-ticket"
+            @click="openRsvpModal(false)"
           >
             Register to Attend
           </UButton>
         </div>
+
+        <!-- RSVP Modal -->
+        <Teleport to="body">
+          <div
+            v-if="showRsvpModal"
+            class="fixed inset-0 z-50 flex items-center justify-center p-4"
+            @click.self="showRsvpModal = false"
+          >
+            <div class="bg-white rounded-lg shadow-xl max-w-md w-full">
+              <EventRSVPModal
+                :event-id="eventId"
+                :is-volunteer="rsvpIsVolunteer"
+                @success="onRsvpSuccess"
+                @close="showRsvpModal = false"
+              />
+            </div>
+          </div>
+        </Teleport>
       </div>
     </div>
   </div>
diff --git a/app/pages/events/index.vue b/app/pages/events/index.vue
index 42debbd..759e85b 100644
--- a/app/pages/events/index.vue
+++ b/app/pages/events/index.vue
@@ -1,15 +1,42 @@
 <script setup lang="ts">
 import type { DateValue } from '@internationalized/date'
-import { CalendarDate, getLocalTimeZone } from '@internationalized/date'
+import { CalendarDate, getLocalTimeZone, today } from '@internationalized/date'
 
 const tz = getLocalTimeZone()
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const selectedDate = ref<any>(today(tz))
 
-const value = ref<DateValue>(new CalendarDate(2022, 2, 3))
+// Load all events from API
+const { data: allEvents } = await useFetch('/api/events')
 
-async function navigateToEvent(eventId) {
-  console.log('Navigating to event:', eventId)
-  await navigateTo(`/events/${eventId}`)
-}
+const upcomingEvents = computed(() => {
+  const now = new Date()
+  return (allEvents.value || []).filter(event => new Date(event.endTime) >= now)
+})
+
+// Dates that have events — used to highlight calendar
+const eventDates = computed(() => {
+  return (allEvents.value || []).map((event) => {
+    const d = new Date(event.startTime)
+    return new CalendarDate(d.getFullYear(), d.getMonth() + 1, d.getDate())
+  })
+})
+
+// Events on the selected calendar date
+const eventsOnSelectedDate = computed(() => {
+  if (!selectedDate.value) return upcomingEvents.value
+  return (allEvents.value || []).filter((event) => {
+    const d = new Date(event.startTime)
+    const cal = new CalendarDate(d.getFullYear(), d.getMonth() + 1, d.getDate())
+    return cal.compare(selectedDate.value) === 0
+  })
+})
+
+// Show date-filtered events if a date with events is selected, otherwise show all upcoming
+const displayedEvents = computed(() => {
+  if (eventsOnSelectedDate.value.length > 0) return eventsOnSelectedDate.value
+  return upcomingEvents.value
+})
 
 type Event = {
   id: string
@@ -60,20 +87,40 @@ const events = computed(() =>
 
 const isDateDisabled = (d: DateValue) =>
   d.toDate(tz) < new Date(new Date().setHours(0, 0, 0, 0))
+
+function getEventImage(event: any) {
+  if (event.eventAssets && event.eventAssets.length > 0) {
+    const imageUrl = event.eventAssets[0].imageUrl
+    return `/api/events/${imageUrl}`
+  }
+  return undefined
+}
+
+function getEventSubtitle(event: any) {
+  const date = new Date(event.startTime).toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  })
+  const location = event.location?.address || ''
+  return [date, location].filter(Boolean).join(' · ')
+}
+
+function goToEvent(id: string) {
+  navigateTo(`/events/${id}`)
+}
 </script>
 
 <template>
   <div class="min-h-screen flex flex-col bg-white dark:bg-gray-900">
     <div class="w-full h-full mt-12 mb-12 px-4 py-12 overflow-y-auto">
-      <h2
-        class="text-center text-2xl font-bold text-brand4 dark:text-teal-400"
-      >
+      <h2 class="text-center text-2xl font-bold text-brand4 dark:text-teal-400 mb-6">
         Events
       </h2>
 
-      <UCard class="max-w-4xl mx-auto mb-4">
+      <UCard class="max-w-4xl mx-auto mb-6">
         <UCalendar
-          :v-model="value"
+          v-model="selectedDate"
           color="brand7"
           :is-date-disabled="isDateDisabled"
           locale="en-US"
@@ -82,100 +129,31 @@ const isDateDisabled = (d: DateValue) =>
           class="rounded-2xl"
         />
       </UCard>
-      <!-- Upcoming Events -->
-      <div class="px-2 pb-4 pl-4 pt-4 w-full relative">
-        <h3 class="text-2xl font-semibold text-brand4 mb-4">
-          UPCOMING EVENTS
-        </h3>
-        <div class="flex gap-3 overflow-x-auto pb-2 scrollbar-hide">
-          <div
-            v-for="event in events"
-            :key="event.id"
-            class="shrink-0 w-40 rounded-xl shadow-lg overflow-hidden hover:scale-95 transition-all duration-300 cursor-pointer"
-            @click.stop="navigateToEvent(event.id)"
-          >
-            <!-- Event Image Placeholder -->
-            <div class="h-35 relative overflow-hidden">
-              <img
-                :src="event.image"
-                class="w-full h-full object-cover"
-              >
-            </div>
-
-            <!-- Event Content -->
-            <div class="p-2">
-              <h4
-                class="text-sm font_semibold text-brand4 mb-1.5"
-              >
-                {{ event.title }}
-              </h4>
-              <div class="space-y-2">
-                <!-- Date -->
-                <div
-                  class="flex items-center text-gray-600 text-[12px]"
-                >
-                  <svg
-                    class="w-4 h-4 mr-2 text-teal-600"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <rect
-                      x="3"
-                      y="4"
-                      width="18"
-                      height="18"
-                      rx="2"
-                      ry="2"
-                    />
-                    <line
-                      x1="16"
-                      y1="2"
-                      x2="16"
-                      y2="6"
-                    />
-                    <line
-                      x1="8"
-                      y1="2"
-                      x2="8"
-                      y2="6"
-                    />
-                    <line
-                      x1="3"
-                      y1="10"
-                      x2="21"
-                      y2="10"
-                    />
-                  </svg>
-                  <span>{{ event.date }}</span>
-                </div>
-
-                <!-- Location -->
-                <div
-                  class="flex items-start text-gray-600 text-[10px]"
-                >
-                  <svg
-                    class="w-3 h-3 mr-2 ml-0.5 mt-0.5 text-teal-600 shrink-0"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"
-                    />
-                    <circle
-                      cx="12"
-                      cy="10"
-                      r="3"
-                    />
-                  </svg>
-                  <span class="leading-tight">
-                    {{ event.location.address }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
+
+      <h3 class="text-lg font-semibold text-brand4 mb-4">
+        {{ eventsOnSelectedDate.length > 0 ? 'Events on this day' : 'Upcoming Events' }}
+      </h3>
+
+      <div
+        v-if="displayedEvents.length === 0"
+        class="text-center text-gray-500 py-8"
+      >
+        No upcoming events
+      </div>
+
+      <div
+        v-else
+        class="space-y-4"
+      >
+        <EventTile
+          v-for="event in displayedEvents"
+          :key="event.id"
+          :title="event.title"
+          :subtitle="getEventSubtitle(event)"
+          :image-url="getEventImage(event)"
+          @click="goToEvent(event.id)"
+          @add="goToEvent(event.id)"
+        />
       </div>
     </div>
   </div>
diff --git a/app/pages/events/manage.vue b/app/pages/events/manage.vue
index bef1c54..52a3f39 100644
--- a/app/pages/events/manage.vue
+++ b/app/pages/events/manage.vue
@@ -55,7 +55,7 @@ async function navigateToEvent(eventId) {
 function getEventImage(event) {
   if (event.eventAssets && event.eventAssets.length > 0) {
     const imageUrl = event.eventAssets[0].imageUrl
-    return `/api/events/${event.id}/images/${imageUrl.split('/').pop()}`
+    return `/api/events/${imageUrl}`
   }
   return null
 }
@@ -172,7 +172,6 @@ function getEventDate(event) {
                 class="flex items-center justify-center h-full text-white text-2xl"
               >📅</span>
             </div>
-
             <div
               class="flex flex-col text-left pointer-events-none"
             >
diff --git a/app/pages/index.vue b/app/pages/index.vue
index e79992a..a4a121c 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,336 +1,360 @@
 <script setup lang="ts">
-import "vue3-carousel/dist/carousel.css";
-import { Carousel, Slide, Pagination } from "vue3-carousel";
+import 'vue3-carousel/dist/carousel.css'
+import { Carousel, Slide, Pagination } from 'vue3-carousel'
 
 const {
-    data: donations,
-    pending: donationsPending,
-    error: donationsError,
+  data: donations,
+  pending: donationsPending,
+  error: donationsError,
 } = await useFetch<
-    {
-        id: string;
-        name: string;
-        link: string;
-        startDate: string;
-        endDate: string;
-        imageUrl: string;
-    }[]
->("/api/admin/donations");
+  {
+    id: string
+    name: string
+    link: string
+    startDate: string
+    endDate: string
+    imageUrl: string
+  }[]
+>('/api/admin/donations')
 
 const carouselConfig = {
-    itemsToShow: 1,
-    wrapAround: true,
-    mouseDrag: true,
-    touchDrag: true,
-    autoplay: 6000,
-};
+  itemsToShow: 1,
+  wrapAround: true,
+  mouseDrag: true,
+  touchDrag: true,
+  autoplay: 6000,
+}
 
 type Event = {
-    id: string;
-    title: string;
-    startTime: string;
-    location: {
-        id: string;
-        address: string;
-        latitude: number;
-        longitude: number;
-    };
-    eventAssets: {
-        id: string;
-        imageUrl: string;
-    }[];
-};
+  id: string
+  title: string
+  startTime: string
+  location: {
+    id: string
+    address: string
+    latitude: number
+    longitude: number
+  }
+  eventAssets: {
+    id: string
+    imageUrl: string
+  }[]
+}
 
-const { data: eventsData } = await useFetch<Event[]>("/api/events", {
-    default: () => [],
-});
+const { data: eventsData } = await useFetch<Event[]>('/api/events', {
+  default: () => [],
+})
 
 const slides = ref([
-    { id: 1, src: "/images/image1.jpeg", alt: "Slide 1" },
-    { id: 2, src: "/images/image1.jpeg", alt: "Slide 2" },
-    { id: 3, src: "/images/image1.jpeg", alt: "Slide 3" },
-    { id: 4, src: "/images/image1.jpeg", alt: "Slide 4" },
-]);
+  { id: 1, src: '/images/image1.jpeg', alt: 'Slide 1' },
+  { id: 2, src: '/images/image1.jpeg', alt: 'Slide 2' },
+  { id: 3, src: '/images/image1.jpeg', alt: 'Slide 3' },
+  { id: 4, src: '/images/image1.jpeg', alt: 'Slide 4' },
+])
 
 const handleSignUp = () => {
-    navigateTo("/auth/sign-up");
-};
+  navigateTo('/auth/sign-up')
+}
 
 const services = ref([
-    {
-        id: 1,
-        name: "Prenatal Care",
-        image: "/images/image1.jpeg",
-        href: "https://www.abidewomen.org/prenatalcare",
-    },
-    {
-        id: 2,
-        name: "Postpatrum Care",
-        image: "/images/image1.jpeg",
-        href: "https://www.abidewomen.org/postpartumcare",
-    },
-    {
-        id: 3,
-        name: "Childbirth Education",
-        image: "/images/image1.jpeg",
-        href: "https://www.abidewomen.org/childbirthed",
-    },
-    {
-        id: 4,
-        name: "Mobile Clinic",
-        image: "/images/image1.jpeg",
-        href: "https://www.abidewomen.org/mobile-clinic",
-    },
-]);
+  {
+    id: 1,
+    name: 'Prenatal Care',
+    image: '/images/image1.jpeg',
+    href: 'https://www.abidewomen.org/prenatalcare',
+  },
+  {
+    id: 2,
+    name: 'Postpatrum Care',
+    image: '/images/image1.jpeg',
+    href: 'https://www.abidewomen.org/postpartumcare',
+  },
+  {
+    id: 3,
+    name: 'Childbirth Education',
+    image: '/images/image1.jpeg',
+    href: 'https://www.abidewomen.org/childbirthed',
+  },
+  {
+    id: 4,
+    name: 'Mobile Clinic',
+    image: '/images/image1.jpeg',
+    href: 'https://www.abidewomen.org/mobile-clinic',
+  },
+])
 
 const imageAPI = (url: string | undefined) => {
-    return url ? `/api/events/${url}` : undefined;
-};
+  return url ? `/api/events/${url}` : undefined
+}
 
 const events = computed(() =>
-    (eventsData.value || [])
-        .filter((e) => new Date(e.startTime).getTime() >= Date.now())
-        .sort(
-            (a, b) =>
-                new Date(a.startTime).getTime() -
-                new Date(b.startTime).getTime(),
-        )
-        .slice(0, 6)
-        .map((e) => ({
-            id: e.id,
-            title: e.title,
-            date: new Date(e.startTime).toLocaleDateString("en-US", {
-                month: "short",
-                day: "2-digit",
-                year: "numeric",
-            }),
-            location: e.location,
-            image:
-                imageAPI(e.eventAssets?.[0]?.imageUrl) ?? "/images/image1.jpeg",
-        })),
-);
+  (eventsData.value || [])
+    .filter(e => new Date(e.startTime).getTime() >= Date.now())
+    .sort(
+      (a, b) =>
+        new Date(a.startTime).getTime()
+          - new Date(b.startTime).getTime(),
+    )
+    .slice(0, 6)
+    .map(e => ({
+      id: e.id,
+      title: e.title,
+      date: new Date(e.startTime).toLocaleDateString('en-US', {
+        month: 'short',
+        day: '2-digit',
+        year: 'numeric',
+      }),
+      location: e.location,
+      image:
+                imageAPI(e.eventAssets?.[0]?.imageUrl) ?? '/images/image1.jpeg',
+    })),
+)
 
 const handleEventClick = (event: Event) => {
-    navigateTo(`/events/${event.id}`);
-};
+  navigateTo(`/events/${event.id}`)
+}
 </script>
 
 <template>
-    <div class="min-h-screen flex flex-col bg-white dark:bg-gray-900">
-        <div class="flex-1 mt-12 mb-12 pt-4 w-full h-full overflow-y-auto">
-            <!-- Hero / Carousel Section -->
-            <div class="w-full max-h-[600px] overflow-y-auto">
-                <Carousel
-                    v-bind="carouselConfig"
-                    class="flex-1 max-h-full overflow-y-auto rounded-3xl"
-                >
-                    <Slide
-                        v-for="slide in slides"
-                        :key="slide.id"
-                        class="max-h-full px-4 overflow-y-hidden rounded-3xl"
-                    >
-                        <img
-                            :src="slide.src"
-                            :alt="slide.alt"
-                            class="max-h-full object-cover rounded-3xl px-1"
-                        />
-                    </Slide>
-
-                    <template #addons>
-                        <!-- <Navigation /> -->
-                        <Pagination />
-                    </template>
-                </Carousel>
-            </div>
+  <div class="min-h-screen flex flex-col bg-white dark:bg-gray-900">
+    <div class="flex-1 mt-12 mb-12 pt-4 w-full h-full overflow-y-auto">
+      <!-- Hero / Carousel Section -->
+      <div class="w-full max-h-[600px] overflow-y-auto">
+        <Carousel
+          v-bind="carouselConfig"
+          class="flex-1 max-h-full overflow-y-auto rounded-3xl"
+        >
+          <Slide
+            v-for="slide in slides"
+            :key="slide.id"
+            class="max-h-full px-4 overflow-y-hidden rounded-3xl"
+          >
+            <img
+              :src="slide.src"
+              :alt="slide.alt"
+              class="max-h-full object-cover rounded-3xl px-1"
+            >
+          </Slide>
 
-            <!-- Upcoming Events -->
-            <div class="px-2 pb-4 pl-4 pt-4 w-full relative">
-                <h3 class="text-2xl font-semibold text-brand4 mb-4">
-                    UPCOMING EVENTS
-                </h3>
-                <div class="flex gap-3 overflow-x-auto pb-2 scrollbar-hide">
-                    <div
-                        v-for="event in events"
-                        :key="event.id"
-                        @click="handleEventClick(event)"
-                        class="shrink-0 w-40 rounded-xl shadow-lg overflow-hidden hover:scale-95 transition-all duration-300 cursor-pointer"
-                    >
-                        <!-- Event Image Placeholder -->
-                        <div class="h-35 relative overflow-hidden">
-                            <img
-                                :src="event.image"
-                                class="w-full h-full object-cover"
-                            />
-                        </div>
+          <template #addons>
+            <!-- <Navigation /> -->
+            <Pagination />
+          </template>
+        </Carousel>
+      </div>
 
-                        <!-- Event Content -->
-                        <div class="p-2">
-                            <h4
-                                class="text-sm font_semibold text-brand4 mb-1.5"
-                            >
-                                {{ event.title }}
-                            </h4>
-                            <div class="space-y-2">
-                                <!-- Date -->
-                                <div
-                                    class="flex items-center text-gray-600 text-[12px]"
-                                >
-                                    <svg
-                                        class="w-4 h-4 mr-2 text-teal-600"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        viewBox="0 0 24 24"
-                                    >
-                                        <rect
-                                            x="3"
-                                            y="4"
-                                            width="18"
-                                            height="18"
-                                            rx="2"
-                                            ry="2"
-                                        />
-                                        <line x1="16" y1="2" x2="16" y2="6" />
-                                        <line x1="8" y1="2" x2="8" y2="6" />
-                                        <line x1="3" y1="10" x2="21" y2="10" />
-                                    </svg>
-                                    <span>{{ event.date }}</span>
-                                </div>
+      <!-- Upcoming Events -->
+      <div class="px-2 pb-4 pl-4 pt-4 w-full relative">
+        <h3 class="text-2xl font-semibold text-brand4 mb-4">
+          UPCOMING EVENTS
+        </h3>
+        <div class="flex gap-3 overflow-x-auto pb-2 scrollbar-hide">
+          <div
+            v-for="event in events"
+            :key="event.id"
+            class="shrink-0 w-40 rounded-xl shadow-lg overflow-hidden hover:scale-95 transition-all duration-300 cursor-pointer"
+            @click="handleEventClick(event)"
+          >
+            <!-- Event Image Placeholder -->
+            <div class="h-35 relative overflow-hidden">
+              <img
+                :src="event.image"
+                class="w-full h-full object-cover"
+              >
+            </div>
 
-                                <!-- Location -->
-                                <div
-                                    class="flex items-start text-gray-600 text-[10px]"
-                                >
-                                    <svg
-                                        class="w-3 h-3 mr-2 ml-0.5 mt-0.5 text-teal-600 shrink-0"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        viewBox="0 0 24 24"
-                                    >
-                                        <path
-                                            d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"
-                                        />
-                                        <circle cx="12" cy="10" r="3" />
-                                    </svg>
-                                    <span class="leading-tight">
-                                        {{ event.location.address }}</span
-                                    >
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+            <!-- Event Content -->
+            <div class="p-2">
+              <h4
+                class="text-sm font_semibold text-brand4 mb-1.5"
+              >
+                {{ event.title }}
+              </h4>
+              <div class="space-y-2">
+                <!-- Date -->
+                <div
+                  class="flex items-center text-gray-600 text-[12px]"
+                >
+                  <svg
+                    class="w-4 h-4 mr-2 text-teal-600"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <rect
+                      x="3"
+                      y="4"
+                      width="18"
+                      height="18"
+                      rx="2"
+                      ry="2"
+                    />
+                    <line
+                      x1="16"
+                      y1="2"
+                      x2="16"
+                      y2="6"
+                    />
+                    <line
+                      x1="8"
+                      y1="2"
+                      x2="8"
+                      y2="6"
+                    />
+                    <line
+                      x1="3"
+                      y1="10"
+                      x2="21"
+                      y2="10"
+                    />
+                  </svg>
+                  <span>{{ event.date }}</span>
                 </div>
-            </div>
-            <!-- Volunteer Sign Up -->
-            <div
-                class="bg-rose-800 text-center py-4 px-4 relative overflow-hidden items-center justify-center min-h-[100px]"
-            >
-                <p class="text-white font-bold text-lg mb-1">
-                    Become A Volunteer
-                </p>
-                <!-- Sign up Button -->
-                <button
-                    class="group relative bg-white text-rose-700 font-bold px-7 py-2 mb-1 rounded-full shadow-lg hover:shadow-2xl transition-transform hover:scale-105 active:scale-100 duration-300 overflow-hidden"
-                    @click="handleSignUp"
+
+                <!-- Location -->
+                <div
+                  class="flex items-start text-gray-600 text-[10px]"
                 >
-                    <span
-                        class="absolute inset-0 z-0 opacity-0 scale-95 rounded-full group-hover:opacity-100 group-hover:scale-100 transition-transform duration-300 bg-rose"
+                  <svg
+                    class="w-3 h-3 mr-2 ml-0.5 mt-0.5 text-teal-600 shrink-0"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"
                     />
-                    <span
-                        class="relative z-10 flex items-center justify-center gap-1 text-lg"
-                    >
-                        <span>Sign Up</span>
-                        <svg
-                            class="w-5 h-5 transform group-hover:translate-x-1 transition-transform duration-300"
-                            fill="none"
-                            stroke="currentColor"
-                            viewBox="0 0 24 24"
-                            stroke-width="3"
-                        >
-                            <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                d="M13 7l5 5m0 0l-5 5m5-5H5"
-                            />
-                        </svg>
-                    </span>
-                </button>
+                    <circle
+                      cx="12"
+                      cy="10"
+                      r="3"
+                    />
+                  </svg>
+                  <span class="leading-tight">
+                    {{ event.location.address }}</span>
+                </div>
+              </div>
             </div>
+          </div>
+        </div>
+      </div>
+      <!-- Volunteer Sign Up -->
+      <div
+        class="bg-rose-800 text-center py-4 px-4 relative overflow-hidden items-center justify-center min-h-[100px]"
+      >
+        <p class="text-white font-bold text-lg mb-1">
+          Become A Volunteer
+        </p>
+        <!-- Sign up Button -->
+        <button
+          class="group relative bg-white text-rose-700 font-bold px-7 py-2 mb-1 rounded-full shadow-lg hover:shadow-2xl transition-transform hover:scale-105 active:scale-100 duration-300 overflow-hidden"
+          @click="handleSignUp"
+        >
+          <span
+            class="absolute inset-0 z-0 opacity-0 scale-95 rounded-full group-hover:opacity-100 group-hover:scale-100 transition-transform duration-300 bg-rose"
+          />
+          <span
+            class="relative z-10 flex items-center justify-center gap-1 text-lg"
+          >
+            <span>Sign Up</span>
+            <svg
+              class="w-5 h-5 transform group-hover:translate-x-1 transition-transform duration-300"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              stroke-width="3"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M13 7l5 5m0 0l-5 5m5-5H5"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
 
-            <!-- Services -->
-            <div class="px-2 pb-4 pt-4 pl-4">
-                <h3 class="text-2xl font-semibold text-brand4 mb-4">
-                    SERVICES
-                </h3>
-                <div class="flex gap-3 overflow-x-auto pb-2 scrollbar-hide">
-                    <a
-                        v-for="service in services"
-                        :key="service.id"
-                        :href="service.href"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="shrink-0 w-[190px] rounded-xl shadow-lg overflow-hidden hover:scale-95 transition-all duration-300 cursor-pointer"
-                    >
-                        <div class="h-35 relative overflow-hidden">
-                            <img
-                                :src="service.image"
-                                :alt="service.name"
-                                class="w-full h-full object-cover transition-transform duration-300"
-                            />
-                            <div
-                                class="absolute inset-x-0 bottom-0 w-full bg-linear-to-t from-black/60 to-transparent p-2"
-                            >
-                                <p
-                                    class="text-white text-sm font-semibold truncate"
-                                >
-                                    {{ service.name }}
-                                </p>
-                            </div>
-                        </div>
-                    </a>
-                </div>
+      <!-- Services -->
+      <div class="px-2 pb-4 pt-4 pl-4">
+        <h3 class="text-2xl font-semibold text-brand4 mb-4">
+          SERVICES
+        </h3>
+        <div class="flex gap-3 overflow-x-auto pb-2 scrollbar-hide">
+          <a
+            v-for="service in services"
+            :key="service.id"
+            :href="service.href"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="shrink-0 w-[190px] rounded-xl shadow-lg overflow-hidden hover:scale-95 transition-all duration-300 cursor-pointer"
+          >
+            <div class="h-35 relative overflow-hidden">
+              <img
+                :src="service.image"
+                :alt="service.name"
+                class="w-full h-full object-cover transition-transform duration-300"
+              >
+              <div
+                class="absolute inset-x-0 bottom-0 w-full bg-linear-to-t from-black/60 to-transparent p-2"
+              >
+                <p
+                  class="text-white text-sm font-semibold truncate"
+                >
+                  {{ service.name }}
+                </p>
+              </div>
             </div>
-            <!-- Donations -->
-            <div class="px-2 pb-4 pt-4 pl-4">
-                <h3 class="text-2xl font-semibold text-brand4 mb-4">
-                    DONATIONS
-                </h3>
-                <div v-if="donationsPending" class="text-gray-400 text-sm">
-                    Loading...
-                </div>
-                <div v-else-if="donationsError" class="text-red-500 text-sm">
-                    Failed to load donations.
-                </div>
-                <div
-                    v-else
-                    class="flex gap-3 overflow-x-auto pb-2 scrollbar-hide"
+          </a>
+        </div>
+      </div>
+      <!-- Donations -->
+      <div class="px-2 pb-4 pt-4 pl-4">
+        <h3 class="text-2xl font-semibold text-brand4 mb-4">
+          DONATIONS
+        </h3>
+        <div
+          v-if="donationsPending"
+          class="text-gray-400 text-sm"
+        >
+          Loading...
+        </div>
+        <div
+          v-else-if="donationsError"
+          class="text-red-500 text-sm"
+        >
+          Failed to load donations.
+        </div>
+        <div
+          v-else
+          class="flex gap-3 overflow-x-auto pb-2 scrollbar-hide"
+        >
+          <a
+            v-for="donation in donations"
+            :key="donation.id"
+            :href="donation.link"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="shrink-0 w-[190px] rounded-xl shadow-lg overflow-hidden hover:scale-95 transition-all duration-300 cursor-pointer"
+          >
+            <div class="h-35 relative overflow-hidden">
+              <img
+                :src="`/api/admin/donations/${donation.id}/image`"
+                :alt="donation.name"
+                class="w-full h-full object-cover transition-transform duration-300"
+              >
+              <div
+                class="absolute inset-x-0 bottom-0 w-full bg-linear-to-t from-black/60 to-transparent p-2"
+              >
+                <p
+                  class="text-white text-sm font-semibold truncate"
                 >
-                    <a
-                        v-for="donation in donations"
-                        :key="donation.id"
-                        :href="donation.link"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="shrink-0 w-[190px] rounded-xl shadow-lg overflow-hidden hover:scale-95 transition-all duration-300 cursor-pointer"
-                    >
-                        <div class="h-35 relative overflow-hidden">
-                            <img
-                                :src="`/api/admin/donations/${donation.id}/image`"
-                                :alt="donation.name"
-                                class="w-full h-full object-cover transition-transform duration-300"
-                            />
-                            <div
-                                class="absolute inset-x-0 bottom-0 w-full bg-linear-to-t from-black/60 to-transparent p-2"
-                            >
-                                <p
-                                    class="text-white text-sm font-semibold truncate"
-                                >
-                                    {{ donation.name }}
-                                </p>
-                            </div>
-                        </div>
-                    </a>
-                </div>
+                  {{ donation.name }}
+                </p>
+              </div>
             </div>
+          </a>
         </div>
+      </div>
     </div>
+  </div>
 </template>
diff --git a/prisma/schema/event.prisma b/prisma/schema/event.prisma
index 018220d..47a47f9 100644
--- a/prisma/schema/event.prisma
+++ b/prisma/schema/event.prisma
@@ -17,6 +17,7 @@ model Event {
   eventAssets     Event_Asset[]
   participants    RSVP[]
   volunteerHours  Volunteer_Hour_Log[]
+  guestRSVPs      GuestRSVP[]
 
   createdAt DateTime @default(now())
   updatedAt DateTime @default(now()) @updatedAt
@@ -45,3 +46,15 @@ model RSVP {
   @@id([userId, eventId])
   @@map("rsvps")
 }
+
+model GuestRSVP {
+  id          String   @id @default(uuid())
+  eventId     String
+  event       Event    @relation(fields: [eventId], references: [id], onDelete: Cascade)
+  name        String
+  email       String
+  isVolunteer Boolean  @default(false)
+  createdAt   DateTime @default(now())
+
+  @@map("guest_rsvps")
+}
diff --git a/server/api/events/[id]/images/[name].delete.ts b/server/api/events/[id]/images/[name].delete.ts
new file mode 100644
index 0000000..144a736
--- /dev/null
+++ b/server/api/events/[id]/images/[name].delete.ts
@@ -0,0 +1,53 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import prisma from '~~/server/utils/prisma'
+
+export default defineEventHandler(async (event) => {
+  const fileName = getRouterParam(event, 'name')
+  const eventId = getRouterParam(event, 'id')
+
+  if (!fileName) {
+    throw createError({ statusCode: 400, statusMessage: 'Missing fileName' })
+  }
+
+  if (!eventId) {
+    throw createError({ statusCode: 400, statusMessage: 'Missing eventId' })
+  }
+
+  // imageUrl stored in DB is just the fileName
+  const imageUrl = path.join(eventId, 'images', fileName)
+
+  // Check the asset exists in DB
+  const asset = await prisma.event_Asset.findUnique({
+    where: {
+      eventId_imageUrl: {
+        eventId,
+        imageUrl,
+      },
+    },
+  })
+
+  if (!asset) {
+    throw createError({ statusCode: 404, statusMessage: 'Image not found' })
+  }
+
+  // Delete from DB
+  await prisma.event_Asset.delete({
+    where: {
+      eventId_imageUrl: {
+        eventId,
+        imageUrl,
+      },
+    },
+  })
+
+  // Delete file from disk
+  const storageRoot = path.resolve(process.cwd(), process.env.IMAGE_STORAGE_PATH || 'public/images')
+  const filePath = path.join(storageRoot, eventId, decodeURIComponent(fileName))
+
+  if (fs.existsSync(filePath)) {
+    fs.unlinkSync(filePath)
+  }
+
+  return { message: 'Image deleted successfully' }
+})
diff --git a/server/api/events/[id]/images/[name].get.ts b/server/api/events/[id]/images/[name].get.ts
index f82bb86..9736cf8 100644
--- a/server/api/events/[id]/images/[name].get.ts
+++ b/server/api/events/[id]/images/[name].get.ts
@@ -26,9 +26,7 @@ export default defineEventHandler(async (event) => {
 
   const fileStream = fs.createReadStream(filePath)
 
-  // Set content type based on file extension
   const ext = path.extname(filePath).toLowerCase()
-
   const mime
     = ext === '.png'
       ? 'image/png'
diff --git a/server/api/events/[id]/images/upload.post.ts b/server/api/events/[id]/images/upload.post.ts
index a2af9f8..57ecfdf 100644
--- a/server/api/events/[id]/images/upload.post.ts
+++ b/server/api/events/[id]/images/upload.post.ts
@@ -49,11 +49,10 @@ export default defineEventHandler(async (event) => {
   }
 
   fs.writeFileSync(filePath, file.data)
+  console.log('✅ File written:', filePath)
 
   const addedImage = await prisma.event.update({
-    where: {
-      id: id,
-    },
+    where: { id },
     data: {
       eventAssets: {
         create: [
diff --git a/server/api/events/[id]/index.patch.ts b/server/api/events/[id]/index.patch.ts
index 0f0cb53..fbc94f9 100644
--- a/server/api/events/[id]/index.patch.ts
+++ b/server/api/events/[id]/index.patch.ts
@@ -41,6 +41,7 @@ async function geocodeLocation(location: string) {
 export default defineEventHandler(async (event) => {
   const id = getRouterParam(event, 'id')
   const body = await readBody(event)
+  console.log(body)
 
   if (!id) {
     throw createError({ statusCode: 400, message: 'Missing event ID' })
@@ -50,14 +51,14 @@ export default defineEventHandler(async (event) => {
   const locationData
     = (await prisma.location.findUnique({
       where: {
-        address: body.location.address || null,
+        address: body.location || '',
       },
       select: {
         latitude: true,
         longitude: true,
         address: true,
       },
-    })) || (await geocodeLocation(body.location.address))
+    })) || (await geocodeLocation(body.location))
 
   if (!locationData) {
     throw createError({
@@ -113,7 +114,7 @@ export default defineEventHandler(async (event) => {
         location: {
           connectOrCreate: {
             where: {
-              address: body.location.address,
+              address: body.location || '',
             },
             create: locationData!,
           },
diff --git a/server/api/events/[id]/rsvp.delete.ts b/server/api/events/[id]/rsvp.delete.ts
new file mode 100644
index 0000000..125986b
--- /dev/null
+++ b/server/api/events/[id]/rsvp.delete.ts
@@ -0,0 +1,32 @@
+import prisma from '~~/server/utils/prisma'
+
+export default defineEventHandler(async (event) => {
+  const id = getRouterParam(event, 'id')
+  const body = await readBody(event)
+
+  if (!id) {
+    throw createError({ statusCode: 400, message: 'Missing event ID' })
+  }
+
+  if (!body.email) {
+    throw createError({ statusCode: 400, message: 'Email is required' })
+  }
+
+  const rsvp = await prisma.guestRSVP.findFirst({
+    where: {
+      eventId: id,
+      email: body.email.toLowerCase(),
+      isVolunteer: body.isVolunteer ?? false,
+    },
+  })
+
+  if (!rsvp) {
+    throw createError({ statusCode: 404, message: 'RSVP not found' })
+  }
+
+  await prisma.guestRSVP.delete({
+    where: { id: rsvp.id },
+  })
+
+  return { message: 'RSVP removed successfully' }
+})
diff --git a/server/api/events/[id]/rsvp.get.ts b/server/api/events/[id]/rsvp.get.ts
new file mode 100644
index 0000000..4d01d9c
--- /dev/null
+++ b/server/api/events/[id]/rsvp.get.ts
@@ -0,0 +1,32 @@
+import prisma from '~~/server/utils/prisma'
+
+export default defineEventHandler(async (event) => {
+  const id = getRouterParam(event, 'id')
+
+  if (!id) {
+    throw createError({ statusCode: 400, message: 'Missing event ID' })
+  }
+
+  const foundEvent = await prisma.event.findUnique({
+    where: { id },
+  })
+
+  if (!foundEvent) {
+    throw createError({ statusCode: 404, message: 'Event not found' })
+  }
+
+  const rsvps = await prisma.guestRSVP.findMany({
+    where: { eventId: id },
+    orderBy: { createdAt: 'asc' },
+  })
+
+  const volunteers = rsvps.filter(r => r.isVolunteer)
+  const attendees = rsvps.filter(r => !r.isVolunteer)
+
+  return {
+    volunteerCount: volunteers.length,
+    attendeeCount: attendees.length,
+    volunteers,
+    attendees,
+  }
+})
diff --git a/server/api/events/[id]/rsvp.post.ts b/server/api/events/[id]/rsvp.post.ts
new file mode 100644
index 0000000..5c3d934
--- /dev/null
+++ b/server/api/events/[id]/rsvp.post.ts
@@ -0,0 +1,46 @@
+import prisma from '~~/server/utils/prisma'
+
+export default defineEventHandler(async (event) => {
+  const id = getRouterParam(event, 'id')
+  const body = await readBody(event)
+
+  if (!id) {
+    throw createError({ statusCode: 400, message: 'Missing event ID' })
+  }
+
+  if (!body.name || !body.email) {
+    throw createError({ statusCode: 400, message: 'Name and email are required' })
+  }
+
+  const foundEvent = await prisma.event.findUnique({
+    where: { id },
+  })
+
+  if (!foundEvent) {
+    throw createError({ statusCode: 404, message: 'Event not found' })
+  }
+
+  const existing = await prisma.guestRSVP.findFirst({
+    where: {
+      eventId: id,
+      email: body.email.toLowerCase(),
+      isVolunteer: body.isVolunteer ?? false,
+    },
+  })
+
+  if (existing) {
+    throw createError({ statusCode: 409, message: 'You are already signed up for this event' })
+  }
+
+  const rsvp = await prisma.guestRSVP.create({
+    data: {
+      eventId: id,
+      name: body.name.trim(),
+      email: body.email.toLowerCase().trim(),
+      isVolunteer: body.isVolunteer ?? false,
+    },
+  })
+
+  setResponseStatus(event, 201)
+  return rsvp
+})
diff --git a/server/api/volunteer-logs/index.get.ts b/server/api/volunteer-logs/index.get.ts
index 343937a..6135a9d 100644
--- a/server/api/volunteer-logs/index.get.ts
+++ b/server/api/volunteer-logs/index.get.ts
@@ -1,4 +1,4 @@
-import prisma from '~~/server/utils/prisma'
+import prisma from "~~/server/utils/prisma";
 
 export default eventHandler(async () => {
   try {
@@ -12,37 +12,36 @@ export default eventHandler(async () => {
         event: true,
       },
       orderBy: {
-        createdAt: 'desc',
+        createdAt: "desc",
       },
-    })
+    });
 
-    const formattedLogs = logs.map(log => ({
+    const formattedLogs = logs.map((log) => ({
       id: String(log.id),
       name:
-        log.volunteer.user?.name
-        ?? log.volunteer.user?.contactEmail
-        ?? 'Unknown',
+        log.volunteer.user?.name ??
+        log.volunteer.user?.contactEmail ??
+        "Unknown",
       event: log.event.title,
-      date: log.date.toLocaleDateString('en-US', {
-        month: 'short',
-        day: 'numeric',
-        year: 'numeric',
+      date: log.date.toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
       }),
       hours: log.hours,
       status: log.approvalStatus,
-      comment: log.comment ?? '',
-    }))
+      comment: log.comment ?? "",
+    }));
 
     return {
       success: true,
       logs: formattedLogs,
-    }
-  }
-  catch (error) {
+    };
+  } catch (error) {
     throw createError({
       statusCode: 500,
-      statusMessage: 'Failed to fetch volunteer logs',
+      statusMessage: "Failed to fetch volunteer logs",
       cause: error,
-    })
+    });
   }
-})
+});