diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 97a1a1d..d11f459 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -9,19 +9,19 @@ jobs:
   build:
     permissions:
       id-token: write # This is required for requesting the JWT
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04-arm
 
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
 
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1
+      # - name: Set up Docker Buildx
+      #  uses: docker/setup-buildx-action@v1
 
       - name: configure aws credentials
         uses: aws-actions/configure-aws-credentials@v4
         with:
-          role-to-assume: arn:aws:iam::654654236858:role/GithubActions
+          role-to-assume: ${{ secrets.ACTIONS_ROLE_ARN }}
           role-session-name: GitHub_to_AWS_via_FederatedOIDC
           aws-region: us-east-2
 
@@ -31,10 +31,10 @@ jobs:
 
       - name: Build and Push Docker image
         env:
-          ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry}}
-          REPOSITORY: abide-connect
-          IMAGE_TAG: ${{ github.sha}}
-          DATABASE_URL: "file:./prisma/dev.db"
+          ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
+          REPOSITORY: ${{ vars.REPOSITORY }}
+          IMAGE_TAG: ${{ github.sha }}
+          DATABASE_URL: 'file:./dev.db'
         run: |
-          docker buildx build --output type=image,push=true --platform linux/arm64 -t $ECR_REGISTRY/$REPOSITORY:$IMAGE_TAG .
-          docker buildx build --output type=image,push=true --platform linux/arm64 -t $ECR_REGISTRY/$REPOSITORY:prod .
+          docker build --output type=image,push=true --platform linux/arm64 -t $ECR_REGISTRY/$REPOSITORY:$IMAGE_TAG .
+          docker build --output type=image,push=true --platform linux/arm64 -t $ECR_REGISTRY/$REPOSITORY:prod .
diff --git a/app/app.config.ts b/app/app.config.ts
index 62d3d39..5dfc651 100644
--- a/app/app.config.ts
+++ b/app/app.config.ts
@@ -1 +1 @@
-export default defineAppConfig({});
\ No newline at end of file
+export default defineAppConfig({})
diff --git a/app/app.vue b/app/app.vue
index 2bc0562..5acf3c1 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -4,4 +4,4 @@
       <NuxtPage />
     </NuxtLayout>
   </UApp>
-</template>
\ No newline at end of file
+</template>
diff --git a/app/components/event/Editor.vue b/app/components/event/Editor.vue
index 3b9daf5..e47ee29 100644
--- a/app/components/event/Editor.vue
+++ b/app/components/event/Editor.vue
@@ -1,20 +1,20 @@
 <script setup>
-import { ref, watch } from "vue"
+import { ref, watch } from 'vue'
 
 const props = defineProps({
   event: {
     type: Object,
-    default: null
-  }
+    default: null,
+  },
 })
 
-const emit = defineEmits(["save", "delete"])
+const emit = defineEmits(['save', 'delete'])
 
 const editedEvent = ref({
-  name: "",
-  date: "",
-  location: "",
-  image: ""
+  name: '',
+  date: '',
+  location: '',
+  image: '',
 })
 
 // Watch for changes to the event prop and update the form
@@ -25,24 +25,29 @@ watch(() => props.event, (newEvent) => {
 }, { immediate: true })
 
 function saveEvent() {
-  emit("save", { ...editedEvent.value })
+  emit('save', { ...editedEvent.value })
 }
 
 function deleteEvent() {
-  emit("delete", editedEvent.value.id)
+  emit('delete', editedEvent.value.id)
 }
 </script>
 
 <template>
   <div class="space-y-4">
-    <h3 class="text-xl font-semibold">Edit Event</h3>
+    <h3 class="text-xl font-semibold">
+      Edit Event
+    </h3>
 
     <UFormField label="Event Name">
       <UInput v-model="editedEvent.name" />
     </UFormField>
 
     <UFormField label="Date">
-      <UInput v-model="editedEvent.date" type="date" />
+      <UInput
+        v-model="editedEvent.date"
+        type="date"
+      />
     </UFormField>
 
     <UFormField label="Location">
@@ -54,19 +59,35 @@ function deleteEvent() {
     </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" 
+    <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'"
       >
     </div>
 
     <div class="flex justify-between pt-2">
-      <UButton color="red" variant="soft" @click="deleteEvent">Delete Event</UButton>
-      <UButton color="primary" @click="saveEvent">Save Changes</UButton>
+      <UButton
+        color="red"
+        variant="soft"
+        @click="deleteEvent"
+      >
+        Delete Event
+      </UButton>
+      <UButton
+        color="primary"
+        @click="saveEvent"
+      >
+        Save Changes
+      </UButton>
     </div>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/app/components/event/Modal.vue b/app/components/event/Modal.vue
index 0cd88d2..b658734 100644
--- a/app/components/event/Modal.vue
+++ b/app/components/event/Modal.vue
@@ -1,57 +1,40 @@
 <script setup>
-import { ref } from "vue"
-import FileUpload from 'primevue/fileupload'
+import { ref, watch } from 'vue'
 
-const emit = defineEmits(["save", "close"])
+const emit = defineEmits(['save', 'close'])
 
 const newEvent = ref({
-  title: "",
-  shortDesc: "",
-  description: "",
-  location: "",
-  startTime: "",
-  endTime: "",
+  title: '',
+  shortDesc: '',
+  description: '',
+  location: '',
+  startTime: '',
+  endTime: '',
   allowVolunteers: false,
   allowAttendees: false,
   mobileClinicId: null,
-  eventAssets: []
+  eventAssets: [],
 })
 
-const uploadedFiles = ref([])
 const isSaving = ref(false)
 
 // Store actual File objects for upload
 const filesToUpload = ref([])
 
-function handleFileChange(event) {
-  const files = event.target?.files || event
-  
-  if (!files || files.length === 0) return
-  
-  // Store actual File objects for later upload
-  filesToUpload.value = [...filesToUpload.value, ...Array.from(files)]
-  
-  // Convert files to base64 for preview only
-  const imagePromises = Array.from(files).map(file => {
-    return new Promise((resolve) => {
+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.onload = e => resolve({ imageUrl: e.target.result, fileName: file.name })
       reader.readAsDataURL(file)
-    })
-  })
-  
-  Promise.all(imagePromises).then(images => {
-    newEvent.value.eventAssets = [...newEvent.value.eventAssets, ...images]
-  })
-}
-
-function removeImage(index) {
-  newEvent.value.eventAssets.splice(index, 1)
-  filesToUpload.value.splice(index, 1)
-}
+    })),
+  )
+  newEvent.value.eventAssets = previews
+})
 
 async function saveEvent() {
   // Validate required fields
@@ -75,8 +58,8 @@ async function saveEvent() {
         endTime: new Date(newEvent.value.endTime).toISOString(),
         allowVolunteers: newEvent.value.allowVolunteers,
         allowAttendees: newEvent.value.allowAttendees,
-        mobileClinicId: newEvent.value.mobileClinicId
-      }
+        mobileClinicId: newEvent.value.mobileClinicId,
+      },
     })
 
     console.log('✅ Event created:', response)
@@ -84,18 +67,19 @@ async function saveEvent() {
     // Step 2: Upload images if event was created successfully
     if (response.id && filesToUpload.value.length > 0) {
       console.log(`📤 Uploading ${filesToUpload.value.length} images...`)
-      
+
       for (const file of filesToUpload.value) {
         const formData = new FormData()
         formData.append('file', file)
-        
+
         try {
           await $fetch(`/api/events/${response.id}/images/upload`, {
             method: 'POST',
-            body: formData
+            body: formData,
           })
           console.log(`✅ Uploaded: ${file.name}`)
-        } catch (uploadError) {
+        }
+        catch (uploadError) {
           console.error(`❌ Failed to upload ${file.name}:`, uploadError)
         }
       }
@@ -103,73 +87,89 @@ async function saveEvent() {
 
     // Step 3: Fetch the complete event with images from the server
     const completeEvent = await $fetch(`/api/events/${response.id}`)
-    
+
     console.log('✅ Complete event fetched:', completeEvent)
 
     // Step 4: Emit the complete event to parent
-    emit("save", completeEvent)
-    
+    emit('save', completeEvent)
+
     // Step 5: Reset form
     newEvent.value = {
-      title: "",
-      shortDesc: "",
-      description: "",
-      location: "",
-      startTime: "",
-      endTime: "",
+      title: '',
+      shortDesc: '',
+      description: '',
+      location: '',
+      startTime: '',
+      endTime: '',
       allowVolunteers: false,
       allowAttendees: false,
       mobileClinicId: null,
-      eventAssets: []
+      eventAssets: [],
     }
-    uploadedFiles.value = []
     filesToUpload.value = []
-    
+
     console.log('✅ Event saved successfully and form reset')
-  } catch (error) {
+  }
+  catch (error) {
     console.error('❌ Error creating event:', error)
     alert(`Error creating event: ${error.message || 'Please try again.'}`)
-  } finally {
+  }
+  finally {
     isSaving.value = false
   }
 }
 
 function cancel() {
-  emit("close")
+  emit('close')
 }
 </script>
 
 <template>
   <div class="space-y-4 p-6 max-h-[80vh] overflow-y-auto">
-    <h3 class="text-xl font-semibold mb-4">Add New Event</h3>
+    <h3 class="text-xl font-semibold mb-4">
+      Add New Event
+    </h3>
 
     <div>
       <label class="block text-sm font-medium text-gray-700 mb-1">
         Event Title <span class="text-red-500">*</span>
       </label>
       <UFormField>
-        <UInput v-model="newEvent.title" placeholder="Enter event title" />
+        <UInput
+          v-model="newEvent.title"
+          placeholder="Enter event title"
+        />
       </UFormField>
     </div>
 
     <div>
       <label class="block text-sm font-medium text-gray-700 mb-1">Short Description</label>
       <UFormField>
-        <UInput v-model="newEvent.shortDesc" placeholder="Brief description" />
+        <UInput
+          v-model="newEvent.shortDesc"
+          placeholder="Brief description"
+        />
       </UFormField>
     </div>
 
     <div>
       <label class="block text-sm font-medium text-gray-700 mb-1">Full Description</label>
       <UFormField>
-        <UTextarea v-model="newEvent.description" placeholder="Detailed description" :rows="4" />
+        <UTextarea
+          v-model="newEvent.description"
+          placeholder="Detailed description"
+          :rows="4"
+        />
       </UFormField>
     </div>
 
     <div>
       <label class="block text-sm font-medium text-gray-700 mb-1">Location</label>
       <UFormField>
-        <UInput v-model="newEvent.location" placeholder="Enter location address" />
+        <UInput
+          v-model="newEvent.location"
+          placeholder="Enter location address"
+        />
       </UFormField>
     </div>
 
@@ -179,7 +179,10 @@ function cancel() {
           Start Date & Time <span class="text-red-500">*</span>
         </label>
         <UFormField>
-          <UInput v-model="newEvent.startTime" type="datetime-local" />
+          <UInput
+            v-model="newEvent.startTime"
+            type="datetime-local"
+          />
         </UFormField>
       </div>
 
@@ -188,11 +191,14 @@ function cancel() {
           End Date & Time <span class="text-red-500">*</span>
         </label>
         <UFormField>
-          <UInput v-model="newEvent.endTime" type="datetime-local" />
+          <UInput
+            v-model="newEvent.endTime"
+            type="datetime-local"
+          />
         </UFormField>
       </div>
     </div>
-    
+
     <div class="space-y-2">
       <label class="flex items-center gap-2 cursor-pointer">
         <UCheckbox v-model="newEvent.allowVolunteers" />
@@ -207,27 +213,31 @@ function cancel() {
 
     <div>
       <UFormField label="Event Images">
-        <FileUpload 
-        mode = "advanced"
-        :multiple = "true"
-        accept = "image/*"
-        :auto = "false"
-        :customUpload = "true"
-        @select = "handleFileChange($event.files)"
-        @remove = "removeImage($event.index)"
-        >
-          <template #empty>
-            <span>Drag and drop files to here to upload.</span>
-          </template>
-        </FileUpload>
+        <UFileUpload
+          v-model="filesToUpload"
+          multiple
+          accept="image/*"
+          placeholder="Upload images"
+        />
       </UFormField>
     </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">
+      <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>
-</template>
\ No newline at end of file
+</template>
diff --git a/app/components/event/Tile.vue b/app/components/event/Tile.vue
index 576600e..33b365f 100644
--- a/app/components/event/Tile.vue
+++ b/app/components/event/Tile.vue
@@ -5,22 +5,23 @@ defineProps<{
   subtitle?: string
 }>()
 </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"
   >
     <!-- Square avatar -->
-    <div class="h-12 w-12 rounded-2xl bg-gray-300/70 dark:bg-gray-600/60 border border-gray-800/60"/>
+    <div class="h-12 w-12 rounded-2xl bg-gray-300/70 dark:bg-gray-600/60 border border-gray-800/60" />
 
     <!-- Text lines -->
     <div class="flex-1">
       <p class="text-sm font-medium text-gray-900 dark:text-gray-100">
-      {{ title }}
+        {{ title }}
       </p>
 
       <p class="text-xs text-gray-500 dark:text-gray-400">
-      {{ subtitle }}
+        {{ subtitle }}
       </p>
     </div>
 
@@ -30,7 +31,10 @@ defineProps<{
              hover:bg-gray-100/70 dark:hover:bg-gray-800/70 transition"
       @click="$emit('add')"
     >
-      <UIcon name="i-heroicons-plus" class="w-5 h-5" />
+      <UIcon
+        name="i-heroicons-plus"
+        class="w-5 h-5"
+      />
     </button>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/app/components/map/Interactive.client.vue b/app/components/map/Interactive.client.vue
index 7b1dbca..f2ae87d 100644
--- a/app/components/map/Interactive.client.vue
+++ b/app/components/map/Interactive.client.vue
@@ -4,19 +4,19 @@
     :center="center"
     :zoom="zoom"
     :attribution-control="false"
-    >
-    <!--<MglNavigationControl />-->
+  >
+    <!-- <MglNavigationControl /> -->
     <MglMarker
       :coordinates="[center[0], center[1]]"
       color="#FF0000"
-      />
+    />
   </MglMap>
 </template>
 
 <script lang="ts" setup>
 defineProps<{
-  style: string;
-  center: number[];
-  zoom: number;
-}>();
+  style: string
+  center: number[]
+  zoom: number
+}>()
 </script>
diff --git a/app/components/nav/Bottom.vue b/app/components/nav/Bottom.vue
index e4dab35..9cb1226 100644
--- a/app/components/nav/Bottom.vue
+++ b/app/components/nav/Bottom.vue
@@ -1,41 +1,42 @@
 <script setup lang="ts">
 const nav = ref([
-    {
-        id: 1,
-        icon: "i-lucide-house",
-        to: "/",
-    },
-    {
-        id: 2,
-        icon: "i-lucide-calendar-days",
-        to: "/events",
-    },
-    {
-        id: 3,
-        icon: "i-lucide-hospital",
-        to: "/mobileClinic",
-    },
-    {
-        id: 4,
-        icon: "i-lucide-square-user-round",
-        to: "/volunteer",
-    },
-]);
+  {
+    id: 1,
+    icon: 'i-lucide-house',
+    to: '/',
+  },
+  {
+    id: 2,
+    icon: 'i-lucide-calendar-days',
+    to: '/events',
+  },
+  {
+    id: 3,
+    icon: 'i-lucide-hospital',
+    to: '/mobileClinic',
+  },
+  {
+    id: 4,
+    icon: 'i-lucide-square-user-round',
+    to: '/volunteer',
+  },
+])
 </script>
+
 <template>
-    <UFooter
-        class="fixed bottom-0 left-0 right-0 z-60 flex justify-between items-center px-4 h-12 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900"
-    >
-        <template #default>
-            <UButton
-                v-for="navItem in nav"
-                :key="navItem.id"
-                :icon="navItem.icon"
-                :to="navItem.to"
-                color="neutral"
-                variant="ghost"
-                class="**flex-1** **min-w-0** h-full mx-auto lg:mx-25"
-            />
-        </template>
-    </UFooter>
+  <UFooter
+    class="fixed bottom-0 left-0 right-0 z-60 flex justify-between items-center px-4 h-12 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900"
+  >
+    <template #default>
+      <UButton
+        v-for="navItem in nav"
+        :key="navItem.id"
+        :icon="navItem.icon"
+        :to="navItem.to"
+        color="neutral"
+        variant="ghost"
+        class="**flex-1** **min-w-0** h-full mx-auto lg:mx-25"
+      />
+    </template>
+  </UFooter>
 </template>
diff --git a/app/components/nav/SecondaryTop.vue b/app/components/nav/SecondaryTop.vue
index f36e207..fd60c29 100644
--- a/app/components/nav/SecondaryTop.vue
+++ b/app/components/nav/SecondaryTop.vue
@@ -3,21 +3,26 @@ const router = useRouter()
 </script>
 
 <template>
-    <UHeader 
-        :ui="{ toggle: 'hidden' }" 
-        class="fixed top-0 z-50 h-12 w-full bg-white ">
-        <!-- Left back button  -->
-        <template #left>
-            <div class="">
-                <UButton
-                    color="neutral"
-                    variant="ghost"
-                    aria-label="Settings"
-                    @click="router.back()">
-                    <UIcon name="i-heroicons-arrow-left" class="w-7 h-7 text-teal-900" />
-                </UButton>
-            </div>
-        </template>
-        <template #toggle />
-    </UHeader>
-</template>
\ No newline at end of file
+  <UHeader
+    :ui="{ toggle: 'hidden' }"
+    class="fixed top-0 z-50 h-12 w-full bg-white "
+  >
+    <!-- Left back button  -->
+    <template #left>
+      <div class="">
+        <UButton
+          color="neutral"
+          variant="ghost"
+          aria-label="Settings"
+          @click="router.back()"
+        >
+          <UIcon
+            name="i-heroicons-arrow-left"
+            class="w-7 h-7 text-teal-900"
+          />
+        </UButton>
+      </div>
+    </template>
+    <template #toggle />
+  </UHeader>
+</template>
diff --git a/app/components/nav/Top.vue b/app/components/nav/Top.vue
index 5e0bcfc..bd5b7c5 100644
--- a/app/components/nav/Top.vue
+++ b/app/components/nav/Top.vue
@@ -4,7 +4,7 @@ import { authClient } from '~~/server/utils/auth-client'
 const colorMode = useColorMode()
 
 const onInboxClick = async (_e?: MouseEvent) => {
-  await navigateTo('/inbox') 
+  await navigateTo('/inbox')
 }
 const onSettingsClick = async (_e?: MouseEvent) => {
   await navigateTo('/settings')
@@ -19,17 +19,22 @@ const toggleDarkMode = () => {
 </script>
 
 <template>
-  <UHeader 
-    :ui="{ toggle: 'hidden' }" 
-    class="fixed top-0 z-50 h-12 w-full bg-white dark:bg-gray-900">
+  <UHeader
+    :ui="{ toggle: 'hidden' }"
+    class="fixed top-0 z-50 h-12 w-full bg-white dark:bg-gray-900"
+  >
     <template #left>
       <div class="">
         <UButton
           color="neutral"
           variant="ghost"
           aria-label="Settings"
-          @click="onSettingsClick">
-          <UIcon name="i-lucide-settings" class="w-7 h-7 text-teal-900 dark:text-teal-400" />
+          @click="onSettingsClick"
+        >
+          <UIcon
+            name="i-lucide-settings"
+            class="w-7 h-7 text-teal-900 dark:text-teal-400"
+          />
         </UButton>
       </div>
     </template>
@@ -40,9 +45,13 @@ const toggleDarkMode = () => {
           <UButton
             color="neutral"
             variant="ghost"
-            aria-label="Inbox" 
-            @click="onInboxClick">
-            <UIcon name="i-lucide-bell" class="w-7 h-7 text-teal-900 dark:text-teal-400" />
+            aria-label="Inbox"
+            @click="onInboxClick"
+          >
+            <UIcon
+              name="i-lucide-bell"
+              class="w-7 h-7 text-teal-900 dark:text-teal-400"
+            />
           </UButton>
         </slot>
 
@@ -51,21 +60,27 @@ const toggleDarkMode = () => {
           color="neutral"
           variant="ghost"
           aria-label="Toggle dark mode"
-          @click="toggleDarkMode">
-          <UIcon 
-            :name="colorMode.value === 'dark' ? 'i-lucide-sun' : 'i-lucide-moon'" 
-            class="w-7 h-7 text-teal-900 dark:text-teal-400" />
+          @click="toggleDarkMode"
+        >
+          <UIcon
+            :name="colorMode.value === 'dark' ? 'i-lucide-sun' : 'i-lucide-moon'"
+            class="w-7 h-7 text-teal-900 dark:text-teal-400"
+          />
         </UButton>
 
         <UButton
           color="neutral"
           variant="ghost"
           aria-label="Logout"
-          @click="onLogout">
-          <UIcon name="i-lucide-log-out" class="w-7 h-7 text-teal-900 dark:text-teal-400" />
+          @click="onLogout"
+        >
+          <UIcon
+            name="i-lucide-log-out"
+            class="w-7 h-7 text-teal-900 dark:text-teal-400"
+          />
         </UButton>
       </div>
     </template>
     <template #toggle />
   </UHeader>
-</template>
\ No newline at end of file
+</template>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 3e9af13..d3f49d0 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -2,9 +2,9 @@
 </script>
 
 <template>
-    <div class="w-screen h-screen items-center">
-        <NavTop />
-            <slot />
-        <NavBottom />
-    </div>
+  <div class="w-screen h-screen items-center">
+    <NavTop />
+    <slot />
+    <NavBottom />
+  </div>
 </template>
diff --git a/app/layouts/secondary.vue b/app/layouts/secondary.vue
index 62c390b..eae5c8c 100644
--- a/app/layouts/secondary.vue
+++ b/app/layouts/secondary.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="w-screen h-full items-center bg-white dark:bg-gray-900">
-        <NavSecondaryTop />
-        <slot />
-        <NavBottom />
-    </div>
-</template>
\ No newline at end of file
+  <div class="w-screen h-full items-center bg-white dark:bg-gray-900">
+    <NavSecondaryTop />
+    <slot />
+    <NavBottom />
+  </div>
+</template>
diff --git a/app/lib/relativeFetch.ts b/app/lib/relativeFetch.ts
index b6e556b..6eb5dfb 100644
--- a/app/lib/relativeFetch.ts
+++ b/app/lib/relativeFetch.ts
@@ -4,8 +4,9 @@ import { useFetch } from '#app'
 export const relativeFetch = ((url: string, opts?: any) => {
   try {
     if (url.startsWith('http')) url = new URL(url).pathname
-  } catch {
+  }
+  catch {
     // ignore invalid URLs
   }
   return useFetch(url, opts)
-}) as any
\ No newline at end of file
+}) as any
diff --git a/app/middleware/auth.ts b/app/middleware/auth.ts
index 2997b5d..4aff9c2 100644
--- a/app/middleware/auth.ts
+++ b/app/middleware/auth.ts
@@ -4,16 +4,17 @@ export default defineNuxtRouteMiddleware(async (to) => {
 
   try {
     const data = await $fetch('/api/auth/get-session', {
-      cache: 'no-store',  // ← forces fresh request every time
+      cache: 'no-store', // ← forces fresh request every time
       headers: {
-        'Cache-Control': 'no-cache'
-      }
+        'Cache-Control': 'no-cache',
+      },
     })
-    
+
     if (!data?.session) {
       return navigateTo('/auth/login')
     }
-  } catch {
+  }
+  catch {
     return navigateTo('/auth/login')
   }
-})
\ No newline at end of file
+})
diff --git a/app/pages/admin/donations.vue b/app/pages/admin/donations.vue
index 4a85211..fac075c 100644
--- a/app/pages/admin/donations.vue
+++ b/app/pages/admin/donations.vue
@@ -5,7 +5,7 @@ definePageMeta({
   layout: 'secondary',
 })
 
-//Backend
+// Backend
 interface DonationFund {
   id: string
   name: string
@@ -17,30 +17,30 @@ interface DonationFund {
 }
 const { data: fundsData, refresh } = await useAsyncData(
   'donations',
-  () => $fetch<DonationFund[]>('/api/admin/donations')
+  () => $fetch<DonationFund[]>('/api/admin/donations'),
 )
 const funds = computed(() => fundsData.value ?? [])
 
-//Make dates pretty
+// Make dates pretty
 function formatShort(dateStr: string) {
   if (!dateStr) return ''
   const d = new Date(dateStr)
   if (isNaN(d.getTime())) return dateStr
   const mm = String(d.getMonth() + 1).padStart(2, '0')
-  const dd = String(d.getDate()+1).padStart(2, '0')
+  const dd = String(d.getDate() + 1).padStart(2, '0')
   const yy = String(d.getFullYear()).slice(-2)
   return `${mm}/${dd}/${yy}`
 }
 
-//New Fund Modal States
+// New Fund Modal States
 const open = ref(false)
 const fundName = ref('')
 const startDate = ref('')
-const endDate = ref('') 
+const endDate = ref('')
 const image = ref<File | null>(null)
 const link = ref('')
 
-//Editing Fund Modal States
+// Editing Fund Modal States
 const editOpen = ref(false)
 const editFundName = ref('')
 const editStartDate = ref('')
@@ -50,39 +50,37 @@ const editLink = ref('')
 const editingFund = ref<typeof funds.value[0] | null>(null)
 const editImagePrevies = ref('')
 
-
-//New Fund Save
+// New Fund Save
 async function saveFund(close: () => void) {
-  //create the new fund on the backend
+  // create the new fund on the backend
   const newDonation = await $fetch<{ id: string }>('/api/admin/donations', {
-  method: 'POST',
-  body: {
-    name: fundName.value,
-    link: link.value,
-    startDate: startDate.value,
-    endDate: endDate.value,
-  },
-})
-  //add the image if it has one
-    if (image.value) {
-        const formData = new FormData()
-        formData.append('file', image.value)
-        await $fetch(`/api/admin/donations/${newDonation.id}/image`, {
-        method: 'POST',
-        body: formData,
-        })
-    }
-    await refresh()
-    fundName.value = ''
-    startDate.value = ''
-    endDate.value = ''
-    image.value = null
-    link.value = ''
-    close()
+    method: 'POST',
+    body: {
+      name: fundName.value,
+      link: link.value,
+      startDate: startDate.value,
+      endDate: endDate.value,
+    },
+  })
+  // add the image if it has one
+  if (image.value) {
+    const formData = new FormData()
+    formData.append('file', image.value)
+    await $fetch(`/api/admin/donations/${newDonation.id}/image`, {
+      method: 'POST',
+      body: formData,
+    })
+  }
+  await refresh()
+  fundName.value = ''
+  startDate.value = ''
+  endDate.value = ''
+  image.value = null
+  link.value = ''
+  close()
 }
 
-
-//Editing Fund Modal
+// Editing Fund Modal
 async function openEdit(fund: DonationFund) {
   editingFund.value = fund
   editFundName.value = fund.name
@@ -92,9 +90,8 @@ async function openEdit(fund: DonationFund) {
   editImagePrevies.value = fund.imageUrl ?? ''
   editImage.value = null
   editOpen.value = true
- 
 }
-//Editing Fund Save
+// Editing Fund Save
 async function saveEdit(close: () => void) {
   if (!editingFund.value) return
   await $fetch(`/api/admin/donations/${editingFund.value.id}`, {
@@ -107,7 +104,7 @@ async function saveEdit(close: () => void) {
       imageUrl: editingFund.value?.imageUrl,
     },
   })
-  //add the image if it has one
+  // add the image if it has one
   if (editImage.value) {
     const formData = new FormData()
     formData.append('file', editImage.value)
@@ -122,7 +119,7 @@ async function saveEdit(close: () => void) {
   close()
 }
 
-//delete Fund
+// delete Fund
 async function deleteFund(id: string) {
   await $fetch(`/api/admin/donations/${id}`, {
     method: 'DELETE',
@@ -130,117 +127,218 @@ async function deleteFund(id: string) {
   await refresh()
   editOpen.value = false
 }
-
-
 </script>
+
 <template>
-    <div class="flex flex-col w-screen min-h-screen bg-slate-50 items-stretch pb-20">
-        <!-- Header -->
-        <div class="px-6 mt-20">
-            <h1 class="text-3xl font-bold text-[#313131]">Donation Funds</h1>
-        </div>
+  <div class="flex flex-col w-screen min-h-screen bg-slate-50 items-stretch pb-20">
+    <!-- Header -->
+    <div class="px-6 mt-20">
+      <h1 class="text-3xl font-bold text-[#313131]">
+        Donation Funds
+      </h1>
+    </div>
 
-        <!--New Button-->
-        <div class="px-6 mt-4 justify-end">
-            <UModal v-model:open="open" title="New Fund" :ui="{footer: 'justify-end'}">
-                <UButton
-                color="brand4"
-                class="grid place-items-center rounded-xl h-9 w-9 
+    <!-- New Button -->
+    <div class="px-6 mt-4 justify-end">
+      <UModal
+        v-model:open="open"
+        title="New Fund"
+        :ui="{ footer: 'justify-end' }"
+      >
+        <UButton
+          color="brand4"
+          class="grid place-items-center rounded-xl h-9 w-9
                 border border-gray-800/70
-                hover:bg-gray-100/70 
+                hover:bg-gray-100/70
                 transition duration-200"
-                :ui="{ base: 'flex items-center justify-center' }"
-                >
-                <UIcon name="i-heroicons-plus" class="w-5 h-5" />
-                </UButton>
-                <!--New Modal-->
-                <template #body>
-                    <div class="space-y-4">
-                        <UFormField label="Fund Name">
-                            <UInput v-model="fundName" placeholder = "Name" color="brand4"/>
-                        </UFormField>
-                        <UFormField label="Link">
-                            <UInput v-model="link" placeholder="Link" color="brand4" class="w-full"/>
-                        </UFormField>  
-                        <UFormField label="Start Date">
-                            <UInput v-model="startDate" placeholder="Start Date" type="date" color="brand4"/>
-                        </UFormField> 
-                        <UFormField label="End Date">
-                            <UInput v-model="endDate" placeholder="End Date" type="date" color="brand4"/>
-                        </UFormField> 
-                        <UFormField label="Image">
-                            <UFileUpload v-model="image" accept="image/*" placeholder="Upload image" color="brand4"/>
-                        </UFormField>
-                    </div>
-                </template>
-
-                <template #footer="{ close }">
-                    <UButton label="Save" color="brand4" @click="saveFund(close)" />
-                </template>
-            </UModal>
-        </div>
+          :ui="{ base: 'flex items-center justify-center' }"
+        >
+          <UIcon
+            name="i-heroicons-plus"
+            class="w-5 h-5"
+          />
+        </UButton>
+        <!-- New Modal -->
+        <template #body>
+          <div class="space-y-4">
+            <UFormField label="Fund Name">
+              <UInput
+                v-model="fundName"
+                placeholder="Name"
+                color="brand4"
+              />
+            </UFormField>
+            <UFormField label="Link">
+              <UInput
+                v-model="link"
+                placeholder="Link"
+                color="brand4"
+                class="w-full"
+              />
+            </UFormField>
+            <UFormField label="Start Date">
+              <UInput
+                v-model="startDate"
+                placeholder="Start Date"
+                type="date"
+                color="brand4"
+              />
+            </UFormField>
+            <UFormField label="End Date">
+              <UInput
+                v-model="endDate"
+                placeholder="End Date"
+                type="date"
+                color="brand4"
+              />
+            </UFormField>
+            <UFormField label="Image">
+              <UFileUpload
+                v-model="image"
+                accept="image/*"
+                placeholder="Upload image"
+                color="brand4"
+              />
+            </UFormField>
+          </div>
+        </template>
 
-        <!--Funds Layout-->
-        <div class="px-6 mt-8">
-            <div class="grid grid-cols-2 gap-6">
-                <div
-                    v-for="fund in funds"
-                    :key="fund.id"
-                    class="rounded-xl shadow-lg overflow-hidden hover:scale-95 transition-all duration-300 cursor-pointer"
-                    @click="openEdit(fund)">
+        <template #footer="{ close }">
+          <UButton
+            label="Save"
+            color="brand4"
+            @click="saveFund(close)"
+          />
+        </template>
+      </UModal>
+    </div>
 
-                    <!-- Fund Image -->
-                    <div class="h-35 relative overflow-hidden">
-                        <img
-                        :src="fund.imageUrl ? `/api/admin/donations/${fund.id}/image?t=${new Date(fund.updatedAt).getTime()}` : ''"
-                        :alt="fund.name"
-                        class="w-full h-full object-cover"
-                        >
-                    </div>
-                    <!-- Fund  Content -->
-                    <div class="p-2">
-                        <h4 class="text-sm font_semibold text-brand4 mb-1.5"> {{ fund.name }}</h4>
-                        <div class="space-y-2">
-                        <!--Date Range-->
-                            <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>{{ formatShort(fund.startDate) }} - {{ formatShort(fund.endDate) }}</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+    <!-- Funds Layout -->
+    <div class="px-6 mt-8">
+      <div class="grid grid-cols-2 gap-6">
+        <div
+          v-for="fund in funds"
+          :key="fund.id"
+          class="rounded-xl shadow-lg overflow-hidden hover:scale-95 transition-all duration-300 cursor-pointer"
+          @click="openEdit(fund)"
+        >
+          <!-- Fund Image -->
+          <div class="h-35 relative overflow-hidden">
+            <img
+              :src="fund.imageUrl ? `/api/admin/donations/${fund.id}/image?t=${new Date(fund.updatedAt).getTime()}` : ''"
+              :alt="fund.name"
+              class="w-full h-full object-cover"
+            >
+          </div>
+          <!-- Fund  Content -->
+          <div class="p-2">
+            <h4 class="text-sm font_semibold text-brand4 mb-1.5">
+              {{ fund.name }}
+            </h4>
+            <div class="space-y-2">
+              <!-- Date Range -->
+              <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>{{ formatShort(fund.startDate) }} - {{ formatShort(fund.endDate) }}</span>
+              </div>
             </div>
+          </div>
         </div>
-        <!--Edit Modal-->
-        <UModal v-model:open="editOpen" title="Edit Fund" :ui="{footer: 'justify-end'}">
-            <template #body>
-                <div class="space-y-4">
-                    <UFormField label="Fund Name">
-                        <UInput v-model="editFundName" placeholder = "Name" color="brand4"/>
-                    </UFormField>
-                    <UFormField label="Link">
-                        <UInput v-model="editLink" placeholder="Link" color="brand4" class="w-full"/>
-                    </UFormField>  
-                    <UFormField label="Start Date">
-                        <UInput v-model="editStartDate" placeholder="Start Date" type="date" color="brand4"/>
-                    </UFormField> 
-                    <UFormField label="End Date">
-                        <UInput v-model="editEndDate" placeholder="End Date" type="date" color="brand4"/>
-                    </UFormField> 
-                    <UFormField label="Image">
-                        <UFileUpload v-model="editImage" accept="image/*" placeholder="Upload image" color="brand4"/>
-                    </UFormField>
-                </div>
-            </template>
-            <template #footer="{ close }">
-                <UButton label="Delete" color="brand7" @click="editingFund && deleteFund(editingFund.id)" />
-                <UButton label="Save" color="brand4" @click="saveEdit(close)" />
-            </template>
-        </UModal>
+      </div>
     </div>
-</template>
\ No newline at end of file
+    <!-- Edit Modal -->
+    <UModal
+      v-model:open="editOpen"
+      title="Edit Fund"
+      :ui="{ footer: 'justify-end' }"
+    >
+      <template #body>
+        <div class="space-y-4">
+          <UFormField label="Fund Name">
+            <UInput
+              v-model="editFundName"
+              placeholder="Name"
+              color="brand4"
+            />
+          </UFormField>
+          <UFormField label="Link">
+            <UInput
+              v-model="editLink"
+              placeholder="Link"
+              color="brand4"
+              class="w-full"
+            />
+          </UFormField>
+          <UFormField label="Start Date">
+            <UInput
+              v-model="editStartDate"
+              placeholder="Start Date"
+              type="date"
+              color="brand4"
+            />
+          </UFormField>
+          <UFormField label="End Date">
+            <UInput
+              v-model="editEndDate"
+              placeholder="End Date"
+              type="date"
+              color="brand4"
+            />
+          </UFormField>
+          <UFormField label="Image">
+            <UFileUpload
+              v-model="editImage"
+              accept="image/*"
+              placeholder="Upload image"
+              color="brand4"
+            />
+          </UFormField>
+        </div>
+      </template>
+      <template #footer="{ close }">
+        <UButton
+          label="Delete"
+          color="brand7"
+          @click="editingFund && deleteFund(editingFund.id)"
+        />
+        <UButton
+          label="Save"
+          color="brand4"
+          @click="saveEdit(close)"
+        />
+      </template>
+    </UModal>
+  </div>
+</template>
diff --git a/app/pages/admin/index.vue b/app/pages/admin/index.vue
index df65126..5c63229 100644
--- a/app/pages/admin/index.vue
+++ b/app/pages/admin/index.vue
@@ -1,130 +1,143 @@
 <script setup lang="ts">
-import type { AdminFeature } from "~/types/admin/admin-dash.type"
+import type { AdminFeature } from '~/types/admin/admin-dash.type'
 
 const features: AdminFeature[] = [
-    {
-        id: 'events',
-        label: 'Events Management',
-        description: 'Create and manage event',
-        icon: 'i-heroicons-calendar',
-        iconBg: 'bg-[#3a696e]',
-        bg: 'bg-gradient-to-br from-[#d3e2e4] to-white'
+  {
+    id: 'events',
+    label: 'Events Management',
+    description: 'Create and manage event',
+    icon: 'i-heroicons-calendar',
+    iconBg: 'bg-[#3a696e]',
+    bg: 'bg-gradient-to-br from-[#d3e2e4] to-white',
 
-    },
-    {
-        id: 'training',
-        label: 'Training Certificates',
-        description: "Approve pending volunteer certificates",
-        icon: 'i-heroicons-trophy',
-        iconBg: 'bg-[#a26b60]',
-        bg: 'bg-gradient-to-br from-[#F4E8E7] to-white'
-    },
-    {
-        id: 'donations',
-        label: 'Donations',
-        description: 'Track and manage donations',
-        icon: 'i-heroicons-currency-dollar',
-        iconBg: 'bg-[#6b5745]',
-        bg: 'bg-gradient-to-br from-[#e6d6c3] to-white'
-    },
-    {
-        id: 'time-log',
-        label: 'Volunteer Time Log',
-        description: 'Approve and manage volunteer time log',
-        icon: 'i-heroicons-clock',
-        iconBg: 'bg-[#a4123f]',
-        bg: 'bg-gradient-to-br from-[#f4d3e0] to-white'
-    }
+  },
+  {
+    id: 'training',
+    label: 'Training Certificates',
+    description: 'Approve pending volunteer certificates',
+    icon: 'i-heroicons-trophy',
+    iconBg: 'bg-[#a26b60]',
+    bg: 'bg-gradient-to-br from-[#F4E8E7] to-white',
+  },
+  {
+    id: 'donations',
+    label: 'Donations',
+    description: 'Track and manage donations',
+    icon: 'i-heroicons-currency-dollar',
+    iconBg: 'bg-[#6b5745]',
+    bg: 'bg-gradient-to-br from-[#e6d6c3] to-white',
+  },
+  {
+    id: 'time-log',
+    label: 'Volunteer Time Log',
+    description: 'Approve and manage volunteer time log',
+    icon: 'i-heroicons-clock',
+    iconBg: 'bg-[#a4123f]',
+    bg: 'bg-gradient-to-br from-[#f4d3e0] to-white',
+  },
 ]
 
-//KPI data for top cards
+// KPI data for top cards
 const kpis = [
-    { 
-        id: 'total-volunteers',
-        label: 'Total Volunteers',
-        value: '248',
-        icon: 'i-heroicons-user-group'
-    },
-    {
-        id: 'pending-certificates',
-        label: 'Pending Certificates',
-        value: '5',
-        icon: 'i-heroicons-document-text'
-    },
-    {
-        id: 'total-donations',
-        label: 'Total Donations',
-        value: '$10,000',
-        icon: 'i-heroicons-currency-dollar'
-    },
-    {
-        id: 'pending-timelog',
-        label: 'Pending Time Log',
-        value: '3',
-        icon: 'i-heroicons-clock'
-    }
+  {
+    id: 'total-volunteers',
+    label: 'Total Volunteers',
+    value: '248',
+    icon: 'i-heroicons-user-group',
+  },
+  {
+    id: 'pending-certificates',
+    label: 'Pending Certificates',
+    value: '5',
+    icon: 'i-heroicons-document-text',
+  },
+  {
+    id: 'total-donations',
+    label: 'Total Donations',
+    value: '$10,000',
+    icon: 'i-heroicons-currency-dollar',
+  },
+  {
+    id: 'pending-timelog',
+    label: 'Pending Time Log',
+    value: '3',
+    icon: 'i-heroicons-clock',
+  },
 ]
-
 </script>
 
 <template>
-    <div class="flex flex-col w-screen min-h-screen bg-slate-50 items-stretch pb-20">
-        <!-- Header for KPI -->
-        <div class="px-6 mt-20">
-            <h1 class="text-3xl font-bold text-[#313131]">Welcome back, Admin!</h1>
+  <div class="flex flex-col w-screen min-h-screen bg-slate-50 items-stretch pb-20">
+    <!-- Header for KPI -->
+    <div class="px-6 mt-20">
+      <h1 class="text-3xl font-bold text-[#313131]">
+        Welcome back, Admin!
+      </h1>
+    </div>
+    <!-- KPI section -->
+    <section class="px-6 mt-7 grid grid-cols-1 md:grid-cols-2 gap-6">
+      <div
+        v-for="kpi in kpis"
+        :key="kpi.id"
+        class="bg-white rounded-2xl border-2 border-slate-200 p-6 shadow-sm hover:shadow-md transition-shadow duration-300"
+      >
+        <div class="flex items-start justify-between mb-4">
+          <div
+            class="flex rounded-xl h-12 w-12 p-2 shadow-md"
+          >
+            <UIcon
+              :name="kpi.icon"
+              class="w-8 h-8 text-black"
+            />
+          </div>
         </div>
-        <!-- KPI section -->
-        <section class="px-6 mt-7 grid grid-cols-1 md:grid-cols-2 gap-6">
-            <div
-                v-for="kpi in kpis"
-                :key="kpi.id"
-                class="bg-white rounded-2xl border-2 border-slate-200 p-6 shadow-sm hover:shadow-md transition-shadow duration-300"
-            >
-                <div class="flex items-start justify-between mb-4">
-                    <div 
-                        class="flex rounded-xl h-12 w-12 p-2 shadow-md">
-                        <UIcon :name="kpi.icon" class="w-8 h-8 text-black" />
-                    </div>
-                </div>
-                
-                <div class="space-y-1">
-                    <p class="text-sm font-medium text-slate-600">{{ kpi.label }}</p>
-                    <h3 class="text-3xl font-bold text-[#313131]">{{ kpi.value }}</h3>
-                    <div class="flex items-center gap-2 text-sm"/>
-                </div>
-            </div>
-        </section>
-        <USeparator class="mt-10"/>
-        <!-- Features section -->
-        <section class="px-6 mt-10 grid grid-cols-1 md:grid-cols-2 gap-6">
-            <UButton
-            v-for="feature in features"
-            :key="feature.id"
-            color="brand6"
-            class="group flex h-40 bg-slate-50 flex-col p-4 items-start justify-between rounded-3xl border-2 border-slate-200 text-left shadow-xs
-                    transition-all duration-300 hover:shadow-xl hover:border-slate-250 hover:bg-slate-50" 
-            >
-                <div 
-                    :class="feature.iconBg"
-                    class="flex rounded-xl h-10 w-10 p-1.5 shadow-lg transition-transform duration-300 group-hover:scale-105">
-                <UIcon :name="feature.icon" class="w-7 h-7 text-white" />
-                </div>
-                <span class="text-lg font-bold tracking-wide text-[#313131]">
-                    {{ feature.label }}
-                </span>
 
-                <span 
-                    v-if="feature.description"
-                    class=" text-[11px] leading-tight text-slate-700">
-                    {{ feature.description }}
-                </span>
-                <div class="flex text-[#3a696e] font-medium text-sm">
-                    <span class="transition-transform duration-300 group-hover:translate-x-1">
-                        Manage →
-                    </span>
-                </div>
-            </UButton>
-        
-        </section>
-    </div>
-</template>
\ No newline at end of file
+        <div class="space-y-1">
+          <p class="text-sm font-medium text-slate-600">
+            {{ kpi.label }}
+          </p>
+          <h3 class="text-3xl font-bold text-[#313131]">
+            {{ kpi.value }}
+          </h3>
+          <div class="flex items-center gap-2 text-sm" />
+        </div>
+      </div>
+    </section>
+    <USeparator class="mt-10" />
+    <!-- Features section -->
+    <section class="px-6 mt-10 grid grid-cols-1 md:grid-cols-2 gap-6">
+      <UButton
+        v-for="feature in features"
+        :key="feature.id"
+        color="brand6"
+        class="group flex h-40 bg-slate-50 flex-col p-4 items-start justify-between rounded-3xl border-2 border-slate-200 text-left shadow-xs
+                    transition-all duration-300 hover:shadow-xl hover:border-slate-250 hover:bg-slate-50"
+      >
+        <div
+          :class="feature.iconBg"
+          class="flex rounded-xl h-10 w-10 p-1.5 shadow-lg transition-transform duration-300 group-hover:scale-105"
+        >
+          <UIcon
+            :name="feature.icon"
+            class="w-7 h-7 text-white"
+          />
+        </div>
+        <span class="text-lg font-bold tracking-wide text-[#313131]">
+          {{ feature.label }}
+        </span>
+
+        <span
+          v-if="feature.description"
+          class=" text-[11px] leading-tight text-slate-700"
+        >
+          {{ feature.description }}
+        </span>
+        <div class="flex text-[#3a696e] font-medium text-sm">
+          <span class="transition-transform duration-300 group-hover:translate-x-1">
+            Manage →
+          </span>
+        </div>
+      </UButton>
+    </section>
+  </div>
+</template>
diff --git a/app/pages/admin/volunteer-logs/index.vue b/app/pages/admin/volunteer-logs/index.vue
index 6b64035..16a1587 100644
--- a/app/pages/admin/volunteer-logs/index.vue
+++ b/app/pages/admin/volunteer-logs/index.vue
@@ -1,74 +1,72 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
 const activeTab = ref('PENDING')
 
-
 const tabs = [
-    { id: 'PENDING', label: 'Pending' },
-    { id: 'APPROVED', label: 'Approved' },
-    { id: 'REJECTED', label: 'Rejected' }
+  { id: 'PENDING', label: 'Pending' },
+  { id: 'APPROVED', label: 'Approved' },
+  { id: 'REJECTED', label: 'Rejected' },
 ]
 
-
 type LogStatus = 'PENDING' | 'APPROVED' | 'REJECTED'
 type ActionType = 'approve' | 'reject'
 
 interface VolunteerLog {
-    id: string
-    name: string
-    event: string
-    date: string
-    hours: number
-    status: LogStatus
-    comment?: string
+  id: string
+  name: string
+  event: string
+  date: string
+  hours: number
+  status: LogStatus
+  comment?: string
 }
 
-// fetch from database 
+// fetch from database
 const logs = ref<VolunteerLog[]>([])
 const loading = ref(false)
 const error = ref<string | null>(null)
 
 const fetchlogs = async () => {
-    loading.value = true
-    error.value = null
-    try {
-        const data = await $fetch<{ logs: VolunteerLog[] }>('/api/volunteer-logs')
-        console.log('API response:', data)
-        logs.value = data?.logs ?? []
-    } catch (err) {
-        console.error('Failed to fetch logs:', err)
-        error.value = 'Failed to load volunteer logs'
-    } finally {
-        loading.value = false 
-    }
+  loading.value = true
+  error.value = null
+  try {
+    const data = await $fetch<{ logs: VolunteerLog[] }>(
+      '/api/volunteer-logs',
+    )
+    console.log('API response:', data)
+    logs.value = data?.logs ?? []
+  }
+  catch (err) {
+    console.error('Failed to fetch logs:', err)
+    error.value = 'Failed to load volunteer logs'
+  }
+  finally {
+    loading.value = false
+  }
 }
 
 await fetchlogs()
 
-
 function setStatus(id: string, status: LogStatus) {
-  const log = logs.value.find((l) => l.id === id)
+  const log = logs.value.find(l => l.id === id)
   if (log) log.status = status
 }
 
-const filteredLogs = computed(() => 
-    logs.value.filter(log => log.status === activeTab.value)
+const filteredLogs = computed(() =>
+  logs.value.filter(log => log.status === activeTab.value),
 )
 
 const accordionItems = computed(() =>
-  filteredLogs.value.map((log) => ({
+  filteredLogs.value.map(log => ({
     id: log.id,
     label: log.name,
     event: log.event,
     date: log.date,
     hours: log.hours,
     status: log.status,
-    comment: log.comment ?? ''
-  }))
+    comment: log.comment ?? '',
+  })),
 )
 
-
-
 // local UI state for inline reject
 // unified action state
 const actioningId = ref<string | null>(null)
@@ -98,7 +96,8 @@ function confirmAction(id: string) {
     const reason = (commentDraft.value[id] ?? '').trim()
     if (!reason) return
     log.comment = reason
-  } else {
+  }
+  else {
     log.comment = (commentDraft.value[id] ?? '').trim() || undefined
   }
 
@@ -106,152 +105,236 @@ function confirmAction(id: string) {
   actioningId.value = null
   actionType.value = null
 }
-
 </script>
 
-
 <template>
-    <div class="flex flex-col w-screen min-h-screen bg-slate-50 items-stretch pb-20">
-
-        <!-- page content -->
-         <div class="px-6 pt-20">
-            <h1 class="text-3xl font-bold">
-                Volunteer Log <span class="text-teal-600">Approvals</span>
-            </h1>
-
-            <!-- tabs-->
-             <div class="flex gap-3 mt-6">
-                <button
-                    v-for="tab in tabs"
-                    :key="tab.id"
-                    class="px-4 py-2 rounded-full border"
-                    :class="activeTab === tab.id
-                        ? 'bg-teal-600 text-white border-teal-600'
-                        : 'bg-white text-gray-600 border-gray-300 hover:bg-gray-100'"
-                    @click="activeTab =tab.id"
-                        >
-                    {{  tab.label }}
-                </button>
-             </div>
-            <USeparator class="mt-8"/>
-            <!-- Loading -->
-            <div v-if="loading" class="flex justify-center items-center h-40">
-                <UIcon name="i-heroicons-arrow-path" class="w-6 h-6 animate-spin text-teal-600" />
+  <div
+    class="flex flex-col w-screen min-h-screen bg-slate-50 items-stretch pb-20"
+  >
+    <!-- page content -->
+    <div class="px-6 pt-20">
+      <h1 class="text-3xl font-bold">
+        Volunteer Log <span class="text-teal-600">Approvals</span>
+      </h1>
+
+      <!-- tabs -->
+      <div class="flex gap-3 mt-6">
+        <button
+          v-for="tab in tabs"
+          :key="tab.id"
+          class="px-4 py-2 rounded-full border"
+          :class="
+            activeTab === tab.id
+              ? 'bg-teal-600 text-white border-teal-600'
+              : 'bg-white text-gray-600 border-gray-300 hover:bg-gray-100'
+          "
+          @click="activeTab = tab.id"
+        >
+          {{ tab.label }}
+        </button>
+      </div>
+      <USeparator class="mt-8" />
+      <!-- Loading -->
+      <div
+        v-if="loading"
+        class="flex justify-center items-center h-40"
+      >
+        <UIcon
+          name="i-heroicons-arrow-path"
+          class="w-6 h-6 animate-spin text-teal-600"
+        />
+      </div>
+
+      <!-- Error -->
+      <div
+        v-else-if="error"
+        class="mt-8 text-red-500 text-sm"
+      >
+        {{ error }}
+      </div>
+
+      <!-- Empty -->
+      <div
+        v-else-if="accordionItems.length === 0"
+        class="mt-8 text-gray-400 text-sm text-center"
+      >
+        No {{ activeTab.toLowerCase() }} logs found.
+      </div>
+      <!-- logs -->
+      <div
+        v-else
+        class="mt-8"
+      >
+        <UAccordion
+          type="multiple"
+          class="bg-slate-50 w-full"
+          :items="accordionItems"
+          :ui="{
+            item: 'border-none mt-4',
+            header: 'px-0',
+            trigger: 'block w-full text-left p-0',
+            trailingIcon: 'hidden pointer-events-none',
+          }"
+        >
+          <!-- Header (matches inbox pattern) -->
+          <template #default="{ item, open }">
+            <div class="bg-white rounded-xl p-5">
+              <div
+                class="grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-x-4 w-full"
+              >
+                <div class="min-w-0">
+                  <h2 class="text-lg font-semibold truncate">
+                    {{ item.label }}
+                  </h2>
+                  <p class="text-sm text-gray-500 flex gap-3">
+                    <span class="truncate">{{
+                      item.event
+                    }}</span>
+                    <span class="whitespace-nowrap">{{
+                      item.date
+                    }}</span>
+                  </p>
+                </div>
+
+                <p
+                  class="text-xl font-bold text-teal-600 whitespace-nowrap"
+                >
+                  {{ item.hours }} hrs
+                </p>
+
+                <span
+                  class="text-gray-400 transition-transform duration-200"
+                  :class="open ? 'rotate-180' : ''"
+                >
+                  ▾
+                </span>
+              </div>
             </div>
-
-            <!-- Error -->
-            <div v-else-if="error" class="mt-8 text-red-500 text-sm">
-                {{ error }}
-            </div>
-
-            <!-- Empty -->
-            <div v-else-if="accordionItems.length === 0" class="mt-8 text-gray-400 text-sm text-center">
-                No {{ activeTab.toLowerCase() }} logs found.
-            </div>
-             <!-- logs -->
-             <div v-else class="mt-8">
-                <UAccordion
-                    type="multiple"
-                    class="bg-slate-50 w-full"
-                    :items="accordionItems"
-                    :ui="{
-                        item: 'border-none mt-4',
-                        header: 'px-0',
-                        trigger: 'block w-full text-left p-0',
-                        trailingIcon: 'hidden pointer-events-none'
-                    }"
+          </template>
+          <!-- Expanded content -->
+          <template #content="{ item }">
+            <div
+              class="bg-white rounded-xl shadow-sm px-5 pb-5 mt-1"
+            >
+              <div
+                class="rounded-lg bg-white p-4 text-sm text-gray-700 space-y-2"
+              >
+                <p>
+                  <span class="font-medium">Event:</span>
+                  {{ item.event }}
+                </p>
+                <p>
+                  <span class="font-medium">Date:</span>
+                  {{ item.date }}
+                </p>
+                <p>
+                  <span class="font-medium">Hours:</span>
+                  {{ item.hours }}
+                </p>
+                <p>
+                  <span class="font-medium">Status:</span>
+                  {{ item.status }}
+                </p>
+                <p v-if="item.comment">
+                  <span class="font-medium">Comment:</span>
+                  {{ item.comment }}
+                </p>
+              </div>
+
+              <div
+                v-if="item.status === 'PENDING'"
+                class="space-y-3"
+              >
+                <!-- Normal buttons -->
+                <div
+                  v-if="actioningId !== item.id"
+                  class="flex gap-2"
+                >
+                  <button
+                    class="px-4 py-2 rounded-full bg-teal-600 text-white hover:bg-teal-700"
+                    @click.stop="
+                      startAction(item.id, 'approve')
+                    "
+                  >
+                    Approve
+                  </button>
+
+                  <button
+                    class="px-4 py-2 rounded-full bg-rose-600 text-white hover:bg-rose-700"
+                    @click.stop="
+                      startAction(item.id, 'reject')
+                    "
+                  >
+                    Reject
+                  </button>
+                </div>
+                <!-- Inline reject reason (only for this log) -->
+                <div
+                  v-else
+                  class="mt-3 space-y-2"
+                >
+                  <label
+                    class="text-sm font-medium text-gray-700"
+                  >
+                    {{
+                      actionType === "reject"
+                        ? "Rejection reason"
+                        : "Comment (optional)"
+                    }}
+                    <span
+                      v-if="actionType === 'reject'"
+                      class="text-rose-600"
+                    >*</span>
+                  </label>
+
+                  <textarea
+                    v-model="commentDraft[item.id]"
+                    rows="3"
+                    class="w-full rounded-lg border border-gray-300 p-3 text-sm focus:outline-none focus:ring-2 focus:ring-rose-300"
+                    :class="
+                      actionType === 'reject'
+                        ? 'focus:ring-rose-300'
+                        : 'focus:ring-teal-300'
+                    "
+                    @click.stop
+                  />
+
+                  <div class="flex gap-2">
+                    <button
+                      class="px-4 py-2 rounded-lg border"
+                      @click.stop="cancelAction"
                     >
-                    <!-- Header (matches inbox pattern) -->
-                    <template #default="{ item, open }">
-                        <div class="bg-white rounded-xl p-5">
-                            <div class="grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-x-4 w-full">
-                                <div class="min-w-0">
-                                <h2 class="text-lg font-semibold truncate">{{ item.label }}</h2>
-                                <p class="text-sm text-gray-500 flex gap-3">
-                                    <span class="truncate">{{ item.event }}</span>
-                                    <span class="whitespace-nowrap">{{ item.date }}</span>
-                                </p>
-                                </div>
-
-                                <p class="text-xl font-bold text-teal-600 whitespace-nowrap">
-                                {{ item.hours }} hrs
-                                </p>
-
-                                <span
-                                class="text-gray-400 transition-transform duration-200"
-                                :class="open ? 'rotate-180' : ''"
-                                >
-                                ▾
-                                </span>
-                            </div>
-                        </div>
-                        </template>
-                            <!-- Expanded content -->
-                            <template #content="{ item }">
-                                <div class="bg-white rounded-xl shadow-sm px-5 pb-5 mt-1 ">
-                                <div class="rounded-lg bg-white p-4 text-sm text-gray-700 space-y-2">
-                                    <p><span class="font-medium">Event:</span> {{ item.event }}</p>
-                                    <p><span class="font-medium">Date:</span> {{ item.date }}</p>
-                                    <p><span class="font-medium">Hours:</span> {{ item.hours }}</p>
-                                    <p><span class="font-medium">Status:</span> {{ item.status }}</p>
-                                    <p v-if="item.comment"><span class="font-medium">Comment:</span> {{ item.comment }}</p>
-                                </div>
-
-                                <div v-if="item.status === 'PENDING'" class="space-y-3">
-                                    <!-- Normal buttons -->
-                                    <div v-if="actioningId !== item.id" class="flex gap-2">
-                                        <button
-                                        class="px-4 py-2 rounded-full bg-teal-600 text-white hover:bg-teal-700"
-                                        @click.stop="startAction(item.id, 'approve')"
-                                        >
-                                        Approve
-                                        </button>
-
-                                        <button
-                                        class="px-4 py-2 rounded-full bg-rose-600 text-white hover:bg-rose-700"
-                                        @click.stop="startAction(item.id, 'reject')"
-                                        >
-                                        Reject
-                                        </button>
-                                    </div>
-                                    <!-- Inline reject reason (only for this log) -->
-                                    <div v-else class="mt-3 space-y-2">
-                                        <label class="text-sm font-medium text-gray-700">
-                                        {{ actionType === 'reject' ? 'Rejection reason' : 'Comment (optional)' }}
-                                        <span v-if="actionType === 'reject'" class="text-rose-600">*</span>
-                                        </label>
-
-                                        <textarea
-                                        v-model="commentDraft[item.id]"
-                                        rows="3"
-                                        class="w-full rounded-lg border border-gray-300 p-3 text-sm focus:outline-none focus:ring-2 focus:ring-rose-300"
-                                        :class="actionType === 'reject' ? 'focus:ring-rose-300' : 'focus:ring-teal-300'"
-                                        @click.stop
-                                        />
-
-                                        <div class="flex gap-2">
-                                        <button
-                                            class="px-4 py-2 rounded-lg border"
-                                            @click.stop="cancelAction"
-                                        >
-                                            Cancel
-                                        </button>
-
-                                        <button
-                                            class="px-4 py-2 rounded-lg bg-rose-600 text-white disabled:opacity-50"
-                                            :class="actionType === 'reject' ? 'bg-rose-600' : 'bg-teal-600'"
-                                            :disabled="actionType === 'reject' && !(commentDraft[item.id] || '').trim()"
-                                            @click.stop="confirmAction(item.id)"
-                                        >
-                                            {{ actionType === 'reject' ? 'Confirm Reject' : 'Confirm Approve' }}
-                                        </button>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </template>
-                </UAccordion>
+                      Cancel
+                    </button>
+
+                    <button
+                      class="px-4 py-2 rounded-lg bg-rose-600 text-white disabled:opacity-50"
+                      :class="
+                        actionType === 'reject'
+                          ? 'bg-rose-600'
+                          : 'bg-teal-600'
+                      "
+                      :disabled="
+                        actionType === 'reject'
+                          && !(
+                            commentDraft[item.id] || ''
+                          ).trim()
+                      "
+                      @click.stop="confirmAction(item.id)"
+                    >
+                      {{
+                        actionType === "reject"
+                          ? "Confirm Reject"
+                          : "Confirm Approve"
+                      }}
+                    </button>
+                  </div>
+                </div>
+              </div>
             </div>
-         </div>
+          </template>
+        </UAccordion>
+      </div>
     </div>
-</template>
\ No newline at end of file
+  </div>
+</template>
diff --git a/app/pages/auth/login.vue b/app/pages/auth/login.vue
index 466c52f..03edc3f 100644
--- a/app/pages/auth/login.vue
+++ b/app/pages/auth/login.vue
@@ -1,75 +1,81 @@
 <script setup lang="ts">
-import type { FormSubmitEvent } from "@nuxt/ui";
-import type { LoginSchema } from "~/types/auth/login.type";
-import { loginFields, loginSchema } from "~/types/auth/login.type";
-import { authProviders } from "~/types/auth/providers.type";
+import type { FormSubmitEvent } from '@nuxt/ui'
+import type { LoginSchema } from '~/types/auth/login.type'
+import { loginFields, loginSchema } from '~/types/auth/login.type'
+import { authProviders } from '~/types/auth/providers.type'
 
-const isLoading = ref(false);
-const errorMessage = ref<string | null>(null);
+const isLoading = ref(false)
+const errorMessage = ref<string | null>(null)
 
 async function onSubmit(event: FormSubmitEvent<LoginSchema>) {
-    isLoading.value = true;
-    try {
-        await $fetch("/api/auth/login", {
-            method: "POST",
-            body: {
-                email: event.data.email,
-                password: event.data.password,
-            },
-        });
-        
-        // Wait for the next tick to ensure cookies are set
-        await nextTick();  
-        await navigateTo("/volunteer/");
-    } catch (error: unknown) {
-        console.log(error);
-        errorMessage.value = (error as { message: string }).message;
-    } finally {
-        isLoading.value = false;
-    }
+  isLoading.value = true
+  try {
+    await $fetch('/api/auth/login', {
+      method: 'POST',
+      body: {
+        email: event.data.email,
+        password: event.data.password,
+      },
+    })
+
+    // Wait for the next tick to ensure cookies are set
+    await nextTick()
+    await navigateTo('/volunteer/')
+  }
+  catch (error: unknown) {
+    console.log(error)
+    errorMessage.value = (error as { message: string }).message
+  }
+  finally {
+    isLoading.value = false
+  }
 }
 </script>
 
 <template>
-    <div class="flex flex-col items-center justify-center p-8 min-h-screen">
-        <UAuthForm
-            class="w-full max-w-md"
-            :schema="loginSchema"
-            :fields="loginFields"
-            :providers="authProviders"
-            title="Welcome back!"
-            icon="i-lucide-lock"
-            :separator="{
-                icon: 'i-lucide-user',
-            }"
-            :submit="{ label: 'Sign in', block: true, color: 'neutral' }"
-            @submit="onSubmit"
-        >
-            <template #description>
-                Don't have an account?
-                <ULink to="/auth/sign-up" class="text-primary font-medium"
-                    >Sign up</ULink
-                >.
-            </template>
-            <template #password-hint>
-                <ULink to="#" class="text-primary font-medium" tabindex="-1"
-                    >Forgot password?</ULink
-                >
-            </template>
-            <template #validation>
-                <UAlert
-                    v-if="errorMessage"
-                    color="error"
-                    icon="i-lucide-info"
-                    :title="errorMessage"
-                />
-            </template>
-            <template #footer>
-                By signing in, you agree to our
-                <ULink to="#" class="text-primary font-medium"
-                    >Terms of Service</ULink
-                >.
-            </template>
-        </UAuthForm>
-    </div>
+  <div class="flex flex-col items-center justify-center p-8 min-h-screen">
+    <UAuthForm
+      class="w-full max-w-md"
+      :schema="loginSchema"
+      :fields="loginFields"
+      :providers="authProviders"
+      title="Welcome back!"
+      icon="i-lucide-lock"
+      :separator="{
+        icon: 'i-lucide-user',
+      }"
+      :submit="{ label: 'Sign in', block: true, color: 'neutral' }"
+      @submit="onSubmit"
+    >
+      <template #description>
+        Don't have an account?
+        <ULink
+          to="/auth/sign-up"
+          class="text-primary font-medium"
+        >Sign up</ULink>.
+      </template>
+      <template #password-hint>
+        <ULink
+          to="#"
+          class="text-primary font-medium"
+          tabindex="-1"
+        >Forgot password?</ULink>
+      </template>
+      <template #validation>
+        <UAlert
+          v-if="errorMessage"
+          color="error"
+          icon="i-lucide-info"
+          :title="errorMessage"
+        />
+      </template>
+      <template #footer>
+        By signing in, you agree to our
+        <ULink
+          to="#"
+          class="text-primary font-medium"
+        >Terms of Service</ULink>.
+      </template>
+    </UAuthForm>
+  </div>
 </template>
diff --git a/app/pages/auth/sign-up.vue b/app/pages/auth/sign-up.vue
index ec42c46..b268867 100644
--- a/app/pages/auth/sign-up.vue
+++ b/app/pages/auth/sign-up.vue
@@ -1,71 +1,86 @@
 <script setup lang="ts">
-import type { FormSubmitEvent } from "@nuxt/ui";
-import type { SignUpSchema } from "~/types/auth/sign-up.type";
-import { signUpFields, signUpSchema } from "~/types/auth/sign-up.type";
-import { authProviders } from "~/types/auth/providers.type";
+import type { FormSubmitEvent } from '@nuxt/ui'
+import type { SignUpSchema } from '~/types/auth/sign-up.type'
+import { signUpFields, signUpSchema } from '~/types/auth/sign-up.type'
+import { authProviders } from '~/types/auth/providers.type'
 
+const errorMessage = ref<string | null>(null)
 
-
-const errorMessage = ref<string | null>(null);
-
-const isLoading = ref(false);
+const isLoading = ref(false)
 
 async function onSubmit(payload: FormSubmitEvent<SignUpSchema>) {
-    isLoading.value = true;
-    console.log(payload.data);
-    try {
-        await $fetch("/api/auth/sign-up", {
-            method: "POST",
-            body: {
-                name: payload.data.name,
-                email: payload.data.email,
-                password: payload.data.password,
-                phone: payload.data.phone,
-                languages: payload.data.languages,
-                gender: payload.data.gender,
-                ethinicity: payload.data.ethinicity,
-                availability: payload.data.availability,
-            },
-        });
-        await nextTick();
-        await navigateTo("/volunteer/");
-    } catch (error: unknown) {
-        console.log(error);
-        errorMessage.value = (error as { message: string }).message;
-    } finally {
-        isLoading.value = false;
-    }
+  isLoading.value = true
+  console.log(payload.data)
+  try {
+    await $fetch('/api/auth/sign-up', {
+      method: 'POST',
+      body: {
+        name: payload.data.name,
+        email: payload.data.email,
+        password: payload.data.password,
+        phone: payload.data.phone,
+        languages: payload.data.languages,
+        gender: payload.data.gender,
+        ethinicity: payload.data.ethinicity,
+        availability: payload.data.availability,
+      },
+    })
+    await nextTick()
+    await navigateTo('/volunteer/')
+  }
+  catch (error: unknown) {
+    console.log(error)
+    errorMessage.value = (error as { message: string }).message
+  }
+  finally {
+    isLoading.value = false
+  }
 }
 </script>
 
 <template>
-    <div class="flex flex-col items-center justify-center p-8 my-8 ">
-        <UAuthForm
-class="w-full max-w-md"
-            :schema="signUpSchema"
-            :fields="signUpFields"
-            :providers="authProviders"
-            title="Let's get you started to be a Volunteer!"
-            icon="i-lucide-user"
-            :separator="{
-                icon: 'i-lucide-mail'
-            }"  
-            :submit="{ label: 'Sign up', block: true, color: 'neutral' }"
+  <div class="flex flex-col items-center justify-center p-8 my-8 ">
+    <UAuthForm
+      class="w-full max-w-md"
+      :schema="signUpSchema"
+      :fields="signUpFields"
+      :providers="authProviders"
+      title="Let's get you started to be a Volunteer!"
+      icon="i-lucide-user"
+      :separator="{
+        icon: 'i-lucide-mail',
+      }"
+      :submit="{ label: 'Sign up', block: true, color: 'neutral' }"
 
-            @submit="onSubmit"
-        >
-        <template #description>
-          Already a Volunteer? <ULink to="/auth/login" class="text-primary font-medium">Log In</ULink>.
-        </template>
-        <template #password-hint>
-          <ULink to="#" class="text-primary font-medium" tabindex="-1">Forgot password?</ULink>
-        </template>
-        <template #validation>
-          <UAlert v-if="errorMessage" color="error" icon="i-lucide-info" :title="errorMessage" />
-        </template>
-        <template #footer>
-          By signing in, you agree to our <ULink to="#" class="text-primary font-medium">Terms of Service</ULink>.
-        </template>
-        </UAuthForm>
-    </div>
+      @submit="onSubmit"
+    >
+      <template #description>
+        Already a Volunteer? <ULink
+          to="/auth/login"
+          class="text-primary font-medium"
+        >Log In</ULink>.
+      </template>
+      <template #password-hint>
+        <ULink
+          to="#"
+          class="text-primary font-medium"
+          tabindex="-1"
+        >Forgot password?</ULink>
+      </template>
+      <template #validation>
+        <UAlert
+          v-if="errorMessage"
+          color="error"
+          icon="i-lucide-info"
+          :title="errorMessage"
+        />
+      </template>
+      <template #footer>
+        By signing in, you agree to our <ULink
+          to="#"
+          class="text-primary font-medium"
+        >Terms of Service</ULink>.
+      </template>
+    </UAuthForm>
+  </div>
 </template>
diff --git a/app/pages/events/[id].vue b/app/pages/events/[id].vue
index 2a2d7e7..7907c11 100644
--- a/app/pages/events/[id].vue
+++ b/app/pages/events/[id].vue
@@ -1,12 +1,13 @@
 <script setup>
-import 'maplibre-gl/dist/maplibre-gl.css';
-import { ref, computed, onMounted } from "vue"
+import 'maplibre-gl/dist/maplibre-gl.css'
+import { ref, computed, onMounted } from 'vue'
 
 const route = useRoute()
+const router1 = useRouter()
 
 // Get the ID from the route params
 const eventId = route.params.id
-const { data: event} = await useFetch(`/api/events/${route.params.id}`)
+const { data: event } = await useFetch(`/api/events/${route.params.id}`)
 
 const loading = ref(true)
 const notFound = ref(false)
@@ -14,24 +15,23 @@ const notFound = ref(false)
 const isEditMode = ref(false)
 const editForm = ref({})
 
-//placeholder until we implement auth
-const admin = true;
-
+// placeholder until we implement auth
+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 }
-    
+
     console.log('✅ Event loaded:', event.value)
     loading.value = false
-    
-  } catch (error) {
+  }
+  catch (error) {
     console.error('❌ Error fetching event:', error)
     loading.value = false
     notFound.value = true
@@ -40,32 +40,35 @@ onMounted(async () => {
 
 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 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 startTime = start.toLocaleTimeString('en-US', {
+    hour: 'numeric',
+    minute: '2-digit',
   })
-  
-  const endTime = end.toLocaleTimeString('en-US', { 
-    hour: 'numeric', 
-    minute: '2-digit' 
+
+  const endTime = end.toLocaleTimeString('en-US', {
+    hour: 'numeric',
+    minute: '2-digit',
   })
-  
+
   return `${dateStr} • ${startTime} - ${endTime}`
 })
 
 const style = '/mapstyles.json'
-const center = computed(() => [event.value.location.longitude, event.value.location.latitude])
+const center = computed(() => [
+  event.value.location.longitude,
+  event.value.location.latitude,
+])
 const zoom = 15
 
 function toggleEditMode() {
@@ -76,11 +79,10 @@ function toggleEditMode() {
   isEditMode.value = !isEditMode.value
 }
 
-
 async function saveChanges() {
   try {
     console.log('💾 Saving changes...')
-    
+
     // Update event via API
     await $fetch(`/api/events/${event.value.id}`, {
       method: 'PATCH',
@@ -92,24 +94,30 @@ async function saveChanges() {
         startTime: new Date(editForm.value.startTime).toISOString(),
         endTime: new Date(editForm.value.endTime).toISOString(),
         allowVolunteers: editForm.value.allowVolunteers,
-        allowAttendees: editForm.value.allowAttendees
-      }
+        allowAttendees: editForm.value.allowAttendees,
+      },
     })
-    
+
     // Update local event data
     event.value = { ...editForm.value }
 
-    //update map center if location changed
+    // 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]
+      center.value = [
+        editForm.value.location.longitude,
+        editForm.value.location.latitude,
+      ]
     }
-    
+
     isEditMode.value = false
-    
+
     console.log('✅ Event updated successfully')
-  } catch (error) {
-    if(error.status === 500){
-      alert('Failed to geocode the provided location. Please check the address and try again.')
+  }
+  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)
@@ -123,60 +131,65 @@ const placeholders = [
   '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'
+  '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 => {
+  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.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]
+
+  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
+        body: formData,
       })
       console.log(`✅ Uploaded: ${file.name}`)
-    } catch (uploadError) {
+    }
+    catch (uploadError) {
       console.error(`❌ Failed to upload ${file.name}:`, uploadError)
     }
   }
-  
+
   // 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
@@ -185,11 +198,10 @@ async function uploadNewImages() {
 
 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)
-
 }
 
 // Helper to get proper image URL
@@ -201,32 +213,51 @@ function getImageUrl(asset) {
   return `/api/events/${event.value.id}/images/${asset.imageUrl.split('/').pop()}`
 }
 
-const fetchedItems = event.value?.eventAssets.map((asset) => "/api/events/" + asset.imageUrl)
+const fetchedItems = event.value?.eventAssets.map(
+  asset => '/api/events/' + asset.imageUrl,
+)
 
 const items = (fetchedItems?.length || 0) > 0 ? fetchedItems : placeholders
 
-const backNavigate = computed(() => {
-  return admin ? '/events/manage' : '/events'
-})
+// const backNavigate = computed(() => {
+//     return admin ? "/events/manage" : "/events";
+// });
 </script>
 
 <template>
   <div class="min-h-screen bg-gray-50 pb-24">
     <!-- Loading State -->
-    <div v-if="loading" class="flex items-center justify-center min-h-screen">
+    <div
+      v-if="loading"
+      class="flex items-center justify-center min-h-screen"
+    >
       <div class="text-center">
-        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto mb-4"/>
-        <p class="text-gray-600">Loading event...</p>
+        <div
+          class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto mb-4"
+        />
+        <p class="text-gray-600">
+          Loading event...
+        </p>
       </div>
     </div>
 
     <!-- Not Found State -->
-    <div v-else-if="notFound" class="flex items-center justify-center min-h-screen">
+    <div
+      v-else-if="notFound"
+      class="flex items-center justify-center min-h-screen"
+    >
       <div class="text-center">
-        <UIcon name="i-lucide-calendar-x" class="w-16 h-16 text-gray-400 mx-auto mb-4" />
-        <h2 class="text-2xl font-bold text-gray-900 mb-2">Event Not Found</h2>
-        <p class="text-gray-600 mb-4">The event you're looking for doesn't exist.</p>
-        <UButton 
+        <UIcon
+          name="i-lucide-calendar-x"
+          class="w-16 h-16 text-gray-400 mx-auto mb-4"
+        />
+        <h2 class="text-2xl font-bold text-gray-900 mb-2">
+          Event Not Found
+        </h2>
+        <p class="text-gray-600 mb-4">
+          The event you're looking for doesn't exist.
+        </p>
+        <UButton
           icon="i-lucide-arrow-left"
           @click="navigateTo('/eventManagement')"
         >
@@ -239,15 +270,20 @@ const backNavigate = computed(() => {
     <div v-else>
       <!-- Header with Edit Button -->
       <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">
+        <div
+          class="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between"
+        >
           <UButton
             icon="i-lucide-arrow-left"
             variant="ghost"
             class="text-brand4"
-            @click="navigateTo(backNavigate)"
+            @click="router1.back()"
           />
-          
-          <div v-if="admin" class="flex gap-2">
+
+          <div
+            v-if="admin"
+            class="flex gap-2"
+          >
             <UButton
               v-if="!isEditMode"
               icon="i-lucide-pencil"
@@ -257,7 +293,7 @@ const backNavigate = computed(() => {
             >
               Edit Event
             </UButton>
-            
+
             <template v-else>
               <UButton
                 variant="ghost"
@@ -269,7 +305,12 @@ const backNavigate = computed(() => {
               <UButton
                 icon="i-lucide-check"
                 color="brand4"
-                @click="async () => { await saveChanges(); await uploadNewImages(); }"
+                @click="
+                  async () => {
+                    await saveChanges();
+                    await uploadNewImages();
+                  }
+                "
               >
                 Save Changes
               </UButton>
@@ -279,11 +320,14 @@ const backNavigate = computed(() => {
       </div>
 
       <div class="max-w-4xl mx-auto px-4 py-8">
-        
-        
         <!-- Event Title -->
         <div class="mb-6">
-          <h1  v-if="!isEditMode"  class="text-3xl font-hornbill font-bold mb-2 text-brand4 text-center">{{ event.title }}</h1>
+          <h1
+            v-if="!isEditMode"
+            class="text-3xl font-hornbill font-bold mb-2 text-brand4 text-center"
+          >
+            {{ event.title }}
+          </h1>
 
           <UInput
             v-else
@@ -291,13 +335,18 @@ const backNavigate = computed(() => {
             size="xl"
             placeholder="Event Title"
             class="text-4xl font-bold"
-            
           />
         </div>
 
         <!-- Short Description -->
-        <div v-if="event.shortDesc || isEditMode" class="bg-brand6 rounded-2xl p-3 mb-6">
-          <p v-if="!isEditMode" class="text-md text-gray-700 italic">
+        <div
+          v-if="event.shortDesc || isEditMode"
+          class="bg-brand6 rounded-2xl p-3 mb-6"
+        >
+          <p
+            v-if="!isEditMode"
+            class="text-md text-gray-700 italic"
+          >
             {{ event.shortDesc }}
           </p>
           <UInput
@@ -311,20 +360,38 @@ const backNavigate = computed(() => {
 
         <!-- Event Images Carousel -->
         <div class="mb-8">
-          <UCarousel v-if="!isEditMode" v-slot="{ item }" dots :items="items" class="h-80 max-w-xs mx-auto">
-          <img :src="item" class="h-80 w-auto rounded-lg mx-auto">
+          <UCarousel
+            v-if="!isEditMode"
+            v-slot="{ item }"
+            dots
+            :items="items"
+            class="h-80 max-w-xs mx-auto"
+          >
+            <img
+              :src="item"
+              class="h-80 w-auto rounded-lg mx-auto"
+            >
           </UCarousel>
-          
+
           <!-- 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 
+          <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)" 
+                <img
+                  :src="getImageUrl(asset)"
                   alt="Event image"
                   class="w-full h-full object-cover"
                 >
@@ -333,66 +400,89 @@ const backNavigate = computed(() => {
                   type="button"
                   @click="removeImage(index)"
                 >
-                  <UIcon name="i-lucide-x" class="w-4 h-4" />
+                  <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">
+              <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"
+                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>
         </div>
-        
 
         <!-- Date & Location Card -->
         <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">
-              <UIcon name="i-lucide-calendar" class="w-6 h-6 text-brand4" />
+              <UIcon
+                name="i-lucide-calendar"
+                class="w-6 h-6 text-brand4"
+              />
             </div>
             <div class="flex-1">
-              <p class="text-sm text-gray-500 mb-1">Date & Time</p>
-              <p v-if="!isEditMode" class="text-gray-900 font-medium">
+              <p class="text-sm text-gray-500 mb-1">
+                Date & Time
+              </p>
+              <p
+                v-if="!isEditMode"
+                class="text-gray-900 font-medium"
+              >
                 {{ formattedDate }}
               </p>
-              <div v-else class="grid grid-rows-2 gap-2">
+              <div
+                v-else
+                class="grid grid-rows-2 gap-2"
+              >
                 <div>
-                  <label class="text-xs text-gray-500">Start </label>
-                  <UInput v-model="editForm.startTime" type="datetime-local" />
+                  <label class="text-xs text-gray-500">Start
+                  </label>
+                  <UInput
+                    v-model="editForm.startTime"
+                    type="datetime-local"
+                  />
                 </div>
                 <div>
-                  <label class="text-xs text-gray-500">End </label>
-                  <UInput v-model="editForm.endTime" type="datetime-local" />
+                  <label class="text-xs text-gray-500">End
+                  </label>
+                  <UInput
+                    v-model="editForm.endTime"
+                    type="datetime-local"
+                  />
                 </div>
               </div>
             </div>
           </div>
 
-          
-
           <div class="flex items-start gap-4">
             <div class="bg-brand6 p-3 rounded-xl">
-              <UIcon name="i-lucide-map-pin" class="w-6 h-6 text-brand4" />
+              <UIcon
+                name="i-lucide-map-pin"
+                class="w-6 h-6 text-brand4"
+              />
             </div>
             <div class="flex-1">
-              <p class="text-sm text-gray-500 mb-1">Location</p>
-              <p v-if="!isEditMode" class="text-gray-900 font-medium">
+              <p class="text-sm text-gray-500 mb-1">
+                Location
+              </p>
+              <p
+                v-if="!isEditMode"
+                class="text-gray-900 font-medium"
+              >
                 {{ event.location.address }}
               </p>
               <UInput
@@ -403,15 +493,28 @@ const backNavigate = computed(() => {
             </div>
           </div>
         </div>
-        
-        <div v-if="!isEditMode" id="map" class="h-60 relative overflow-hidden justify-center items-center mb-6">
-          <MapInteractive :style="style" :center="center" :zoom="zoom" />
+
+        <div
+          v-if="!isEditMode"
+          id="map"
+          class="h-60 relative overflow-hidden justify-center items-center mb-6"
+        >
+          <MapInteractive
+            :style="style"
+            :center="center"
+            :zoom="zoom"
+          />
         </div>
 
         <!-- Full Description -->
         <div class="bg-white rounded-2xl shadow-sm p-6 mb-6">
-          <h2 class="text-2xl font-semibold mb-4">About This Event</h2>
-          <p v-if="!isEditMode" class="text-gray-700 leading-relaxed whitespace-pre-line">
+          <h2 class="text-2xl font-semibold mb-4">
+            About This Event
+          </h2>
+          <p
+            v-if="!isEditMode"
+            class="text-gray-700 leading-relaxed whitespace-pre-line"
+          >
             {{ event.description }}
           </p>
           <UTextarea
@@ -423,50 +526,98 @@ const backNavigate = computed(() => {
           />
         </div>
 
-        <div v-if="event.mobileClinicId" class="mt-4 mb-4">
+        <div
+          v-if="event.mobileClinicId"
+          class="mt-4 mb-4"
+        >
           <p class="text-gray-600 font-poppins">
-            This event is part of our Mobile Clinic program. Please visit the clinic for health services and support.
-          </p>  
+            This event is part of our Mobile Clinic program. Please
+            visit the clinic for health services and support.
+          </p>
         </div>
 
         <!-- Event Options -->
-        <div v-if="admin && isEditMode" class="bg-white rounded-2xl shadow-sm p-6 mb-6">
-          <h2 class="text-2xl font-semibold mb-4">Event Settings</h2>
-          
+        <div
+          v-if="admin && isEditMode"
+          class="bg-white rounded-2xl shadow-sm p-6 mb-6"
+        >
+          <h2 class="text-2xl font-semibold mb-4">
+            Event Settings
+          </h2>
+
           <div class="space-y-4">
-            <div class="flex items-center justify-between p-4 bg-gray-50 rounded-xl">
+            <div
+              class="flex items-center justify-between p-4 bg-gray-50 rounded-xl"
+            >
               <div class="flex items-center gap-3">
-                <UIcon name="i-lucide-users" class="w-5 h-5 text-brand4" />
+                <UIcon
+                  name="i-lucide-users"
+                  class="w-5 h-5 text-brand4"
+                />
                 <div>
-                  <p class="font-medium text-gray-900">Volunteer Sign-ups</p>
-                  <p class="text-sm text-gray-500">Allow people to volunteer for this event</p>
+                  <p class="font-medium text-gray-900">
+                    Volunteer Sign-ups
+                  </p>
+                  <p class="text-sm text-gray-500">
+                    Allow people to volunteer for this event
+                  </p>
                 </div>
               </div>
-              <label class="flex items-center gap-2 cursor-pointer">
-                <UCheckbox v-model="editForm.allowVolunteers" color="brand4" />
+              <label
+                class="flex items-center gap-2 cursor-pointer"
+              >
+                <UCheckbox
+                  v-model="editForm.allowVolunteers"
+                  color="brand4"
+                />
               </label>
             </div>
 
-            <div class="flex items-center justify-between p-4 bg-gray-50 rounded-xl">
+            <div
+              class="flex items-center justify-between p-4 bg-gray-50 rounded-xl"
+            >
               <div class="flex items-center gap-3">
-                <UIcon name="i-lucide-ticket" class="w-5 h-5 text-brand4" />
+                <UIcon
+                  name="i-lucide-ticket"
+                  class="w-5 h-5 text-brand4"
+                />
                 <div>
-                  <p class="font-medium text-gray-900">Attendee Registration</p>
-                  <p class="text-sm text-gray-500">Allow people to register as attendees</p>
+                  <p class="font-medium text-gray-900">
+                    Attendee Registration
+                  </p>
+                  <p class="text-sm text-gray-500">
+                    Allow people to register as attendees
+                  </p>
                 </div>
               </div>
-              <label v-if="isEditMode" class="flex items-center gap-2 cursor-pointer">
-                <UCheckbox v-model="editForm.allowAttendees" color="brand4" />
+              <label
+                v-if="isEditMode"
+                class="flex items-center gap-2 cursor-pointer"
+              >
+                <UCheckbox
+                  v-model="editForm.allowAttendees"
+                  color="brand4"
+                />
               </label>
-              <label v-else class="flex items-center gap-2">
-                <UCheckbox :model-value="event.allowAttendees" color="brand4" disabled />
+              <label
+                v-else
+                class="flex items-center gap-2"
+              >
+                <UCheckbox
+                  :model-value="event.allowAttendees"
+                  color="brand4"
+                  disabled
+                />
               </label>
             </div>
           </div>
         </div>
 
         <!-- Action Buttons for Attendees/Volunteers -->
-        <div v-if="!isEditMode" class="flex gap-4">
+        <div
+          v-if="!isEditMode"
+          class="flex gap-4"
+        >
           <UButton
             v-if="event.allowVolunteers"
             color="brand4"
@@ -476,7 +627,7 @@ const backNavigate = computed(() => {
           >
             Sign Up as Volunteer
           </UButton>
-          
+
           <UButton
             v-if="event.allowAttendees"
             color="brand4"
@@ -488,8 +639,7 @@ const backNavigate = computed(() => {
             Register to Attend
           </UButton>
         </div>
-
       </div>
     </div>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/app/pages/events/index.vue b/app/pages/events/index.vue
index 7f1df5f..42debbd 100644
--- a/app/pages/events/index.vue
+++ b/app/pages/events/index.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import type { DateValue } from '@internationalized/date'
 import { CalendarDate, getLocalTimeZone } from '@internationalized/date'
 
@@ -7,10 +6,58 @@ const tz = getLocalTimeZone()
 
 const value = ref<DateValue>(new CalendarDate(2022, 2, 3))
 
-const eventClick = () => {
-  navigateTo('/events/event1')
+async function navigateToEvent(eventId) {
+  console.log('Navigating to event:', eventId)
+  await navigateTo(`/events/${eventId}`)
 }
 
+type Event = {
+  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 imageAPI = (url: string | 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',
+    })),
+)
+
 const isDateDisabled = (d: DateValue) =>
   d.toDate(tz) < new Date(new Date().setHours(0, 0, 0, 0))
 </script>
@@ -18,33 +65,118 @@ const isDateDisabled = (d: DateValue) =>
 <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">Events</h2>
-        
-
-        <UCard class="max-w-4xl mx-auto mb-4">
-          <UCalendar
-            :v-model="value"
-            color="brand7"
-            :is-date-disabled="isDateDisabled"
-            locale="en-US"
-            weekday-format="short"
-            :first-day-of-week="0"
-            class="rounded-2xl"
-          />
-
-          </UCard>
-        <h3 class="text-lg font-semibold text-brand4 mb-4">
-          Upcoming Events
+      <h2
+        class="text-center text-2xl font-bold text-brand4 dark:text-teal-400"
+      >
+        Events
+      </h2>
+
+      <UCard class="max-w-4xl mx-auto mb-4">
+        <UCalendar
+          :v-model="value"
+          color="brand7"
+          :is-date-disabled="isDateDisabled"
+          locale="en-US"
+          weekday-format="short"
+          :first-day-of-week="0"
+          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>
 
-        <div class="space-y-4">
-          <EventTile :onclick="eventClick"/>
-          <EventTile />
-          <EventTile />
-          <EventTile />
+            <!-- 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>
+      </div>
     </div>
   </div>
 </template>
-
diff --git a/app/pages/events/manage.vue b/app/pages/events/manage.vue
index 13cfce6..bef1c54 100644
--- a/app/pages/events/manage.vue
+++ b/app/pages/events/manage.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from "vue"
+import { ref, onMounted } from 'vue'
 
 const showAddModal = ref(false)
 
@@ -16,23 +16,23 @@ async function loadEvents() {
   try {
     const allEvents = await $fetch('/api/events')
     console.log('✅ Loaded events from API:', allEvents)
-    
+
     const now = new Date()
-    
-    pastEvents.value = allEvents.filter(event => {
+
+    pastEvents.value = allEvents.filter((event) => {
       const endTime = new Date(event.endTime)
       return endTime < now
     })
-    
-    upcomingEvents.value = allEvents.filter(event => {
+
+    upcomingEvents.value = allEvents.filter((event) => {
       const endTime = new Date(event.endTime)
       return endTime >= now
     })
-    
+
     console.log('📅 Past events:', pastEvents.value.length)
     console.log('📅 Upcoming events:', upcomingEvents.value.length)
-    
-  } catch (error) {
+  }
+  catch (error) {
     console.error('❌ Error loading events:', error)
   }
 }
@@ -64,29 +64,35 @@ function getEventDate(event) {
   return new Date(event.startTime).toLocaleDateString('en-US', {
     month: 'short',
     day: 'numeric',
-    year: 'numeric'
+    year: 'numeric',
   })
 }
 </script>
 
 <template>
   <div class="flex flex-col relative">
-    
     <div class="flex-1 mt-12 mb-8 w-full overflow-y-auto">
-
       <h1 class="text-center text-2xl font-bold tracking-wide pb-3">
         EVENTS MANAGEMENT
       </h1>
 
       <!-- PAST EVENTS -->
       <div class="px-5">
-        <h2 class="text-xl font-semibold mb-3">PAST EVENTS</h2>
-
-        <div v-if="pastEvents.length === 0" class="text-gray-500 text-center py-4">
+        <h2 class="text-xl font-semibold mb-3">
+          PAST EVENTS
+        </h2>
+
+        <div
+          v-if="pastEvents.length === 0"
+          class="text-gray-500 text-center py-4"
+        >
           No past events
         </div>
 
-        <div v-else class="flex gap-3 overflow-x-auto pb-2">
+        <div
+          v-else
+          class="flex gap-3 overflow-x-auto pb-2"
+        >
           <button
             v-for="event in pastEvents"
             :key="event.id"
@@ -94,14 +100,24 @@ function getEventDate(event) {
             type="button"
             @click.stop="navigateToEvent(event.id)"
           >
-            <div 
+            <div
               class="flex justify-center items-center flex-1 text-4xl text-gray-700 rounded-t-2xl overflow-hidden pointer-events-none"
-              :style="getEventImage(event) ? `background-image: url(${getEventImage(event)}); background-size: cover; background-position: center;` : ''"
+              :style="
+                getEventImage(event)
+                  ? `background-image: url(${getEventImage(event)}); background-size: cover; background-position: center;`
+                  : ''
+              "
             >
               <span v-if="!getEventImage(event)">📅</span>
             </div>
-            <div class="h-[40px] bg-gray-200 rounded-b-2xl flex items-center justify-center px-2 pointer-events-none">
-              <p class="text-xs font-medium text-gray-700 truncate">{{ event.title }}</p>
+            <div
+              class="h-[40px] bg-gray-200 rounded-b-2xl flex items-center justify-center px-2 pointer-events-none"
+            >
+              <p
+                class="text-xs font-medium text-gray-700 truncate"
+              >
+                {{ event.title }}
+              </p>
             </div>
           </button>
         </div>
@@ -110,7 +126,9 @@ function getEventDate(event) {
       <!-- UPCOMING EVENTS -->
       <div class="px-5 mt-6">
         <div class="flex items-center justify-between">
-          <h2 class="text-xl font-semibold">UPCOMING EVENTS</h2>
+          <h2 class="text-xl font-semibold">
+            UPCOMING EVENTS
+          </h2>
 
           <UButton
             icon="i-lucide-plus"
@@ -123,11 +141,17 @@ function getEventDate(event) {
           />
         </div>
 
-        <div v-if="upcomingEvents.length === 0" class="text-gray-500 text-center py-8">
+        <div
+          v-if="upcomingEvents.length === 0"
+          class="text-gray-500 text-center py-8"
+        >
           No upcoming events. Click "Add" to create one!
         </div>
 
-        <div v-else class="mt-4 flex flex-col gap-4">
+        <div
+          v-else
+          class="mt-4 flex flex-col gap-4"
+        >
           <button
             v-for="event in upcomingEvents"
             :key="event.id"
@@ -135,17 +159,32 @@ function getEventDate(event) {
             type="button"
             @click.stop="navigateToEvent(event.id)"
           >
-            <div 
+            <div
               class="w-14 h-14 rounded-xl bg-[#9c1a33] flex-shrink-0 overflow-hidden pointer-events-none"
-              :style="getEventImage(event) ? `background-image: url(${getEventImage(event)}); background-size: cover; background-position: center;` : ''"
+              :style="
+                getEventImage(event)
+                  ? `background-image: url(${getEventImage(event)}); background-size: cover; background-position: center;`
+                  : ''
+              "
             >
-              <span v-if="!getEventImage(event)" class="flex items-center justify-center h-full text-white text-2xl">📅</span>
+              <span
+                v-if="!getEventImage(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">
-              <p class="text-gray-800 font-semibold">{{ event.title }}</p>
-              <p class="text-gray-500 text-sm">{{ event.location }}</p>
-              <p class="text-gray-400 text-xs">{{ getEventDate(event) }}</p>
+            <div
+              class="flex flex-col text-left pointer-events-none"
+            >
+              <p class="text-gray-800 font-semibold">
+                {{ event.title }}
+              </p>
+              <p class="text-gray-500 text-sm">
+                {{ event.location.address }}
+              </p>
+              <p class="text-gray-400 text-xs">
+                {{ getEventDate(event) }}
+              </p>
             </div>
           </button>
         </div>
@@ -154,16 +193,20 @@ function getEventDate(event) {
 
     <!-- Manual Modal with Teleport -->
     <Teleport to="body">
-      <div 
+      <div
         v-if="showAddModal"
         class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 p-4"
         @click.self="closeModal"
       >
-        <div class="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-auto">
-          <EventModal @save="addEventToList" @close="closeModal" />
+        <div
+          class="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-auto"
+        >
+          <EventModal
+            @save="addEventToList"
+            @close="closeModal"
+          />
         </div>
       </div>
     </Teleport>
-
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/app/pages/inbox.vue b/app/pages/inbox.vue
index 0e9c8c7..2a04961 100644
--- a/app/pages/inbox.vue
+++ b/app/pages/inbox.vue
@@ -1,68 +1,74 @@
 <script setup lang="ts">
-
-import { ref, computed } from 'vue'
-
 definePageMeta({
   middleware: 'auth',
   layout: 'secondary',
 })
 
-
-
-// type for API 
+// type for API
 type Notification = {
-  id: string   
+  id: string
   title: string
   content: string
   createdAt: string
   isRead: boolean
 }
 
-// notifications
-const notifications = ref<Notification[]>([
-  {
-    id: '1',
-    title: 'Notification 1',
-    content: 'Thank you for choosing Abide Women’s Health. This message contains several important reminders and helpful instructions to ensure your upcoming visit goes as smoothly as possible. Please plan to arrive 10–15 minutes early to allow time for check-in and any necessary paperwork. If you have recently experienced changes in your medical history, medications, or insurance coverage, bring any updated documents with you so our team can review them before your appointment begins.',
-    createdAt: '2025-10-27T10:30:00Z',
-    isRead: false
-  },
-  {
-    id: '2',
-    title: 'Notification 2',
-    content: 'Message 2',
-    createdAt: '2025-10-26T14:15:00Z',
-    isRead:false
-  },
-  {
-    id: '3',
-    title: 'Notification 3',
-    content: 'Message 3',
-    createdAt: '2025-10-25T09:00:00Z',
-    isRead: false
+const { data: sessionData } = await useFetch('/api/auth/get-session')
+const userId = computed(() => sessionData.value?.user?.id ?? 'null')
+
+const notifications = ref<Notification[]>([])
+const loading = ref(false)
+const error = ref<string | null>(null)
+
+const fetchNotification = async () => {
+  if (!userId.value) return
+  loading.value = true
+  error.value = null
+
+  try {
+    const data = await $fetch<{ notifications: Notification[] }>(
+      `/api/notification/${userId.value}`,
+    )
+    notifications.value = data.notifications
+  }
+  catch (err) {
+    console.error('Failed to fetch notifications', err)
+    error.value = 'Failed to load notifications'
   }
-])
+  finally {
+    loading.value = false
+  }
+}
+watch(
+  userId,
+  (id) => {
+    if (id) fetchNotification()
+  },
+  { immediate: true },
+)
 
+// console.log('sessionData:', sessionData.value)
+// console.log('userId:', userId.value)
 
 // map to uaccordion items
-const accordionItems = computed(() => 
+const accordionItems = computed(() =>
   notifications.value.map(n => ({
     id: n.id,
     label: n.title,
     content: n.content,
+    // icon: "i-heroicons-bell",
     time: formatTime(n.createdAt),
     isRead: n.isRead,
-  }))
+  })),
 )
 
 const markAsRead = (id: string) => {
-    const notification = notifications.value.find(n => n.id == id) 
-    if (notification && !notification.isRead) {
-        notification.isRead = true
-    }
+  const notification = notifications.value.find(n => n.id == id)
+  if (notification && !notification.isRead) {
+    notification.isRead = true
+  }
 }
 
-
 const formatTime = (timestamp: string) => {
   const date = new Date(timestamp)
   const now = new Date()
@@ -75,73 +81,87 @@ const formatTime = (timestamp: string) => {
   if (diffMins < 60) return `${diffMins}m ago`
   if (diffHours < 24) return `${diffHours}h ago`
   if (diffDays < 7) return `${diffDays}d ago`
-  
+
   return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
 }
-
 </script>
 
 <template>
-    <div class="min-h-screen flex flex-col bg-white dark:bg-gray-900">
-             <!-- Notifications accordion -->
-             <div class="flex-1 w-full mx-auto mt-15">
-                <UAccordion
-                    type="multiple"
-                    class="bg-white w-full px-5 mb-10"
-                    :items="accordionItems"
-                    :ui="{
-                        item: 'border-none pr-2 mt-5',
-                        header: 'pr-5',
-                        trigger: 'block w-full text-left p-0',
-                        trailingIcon: 'hidden pointer-events-none'
-                    }"
-                    >
-
-                    <!-- Header -->
-                    <template #default="{ item, open }">
-                        <div 
-                        class="w-full"
-                        @click="markAsRead(item.id)">
-                            <div class="grid grid-cols-[auto_minmax(0,1fr)_auto_auto] items-center gap-x-3 w-full">
-                              <UIcon name="i-heroicons-bell" class="w-5 h-5 text-[#3a696e]" />
-                                <h3
-class="min-w-0 line-clamp-1 truncate leading-tight"
-                                :class="!item.isRead ? 'text-[20px] font-extrabold text-[#3a696e]' : 'text-[20px] font-semibold text-[#3a696e]' ">                               
-                                {{ item.label }}
-                                </h3>
-                                
-                                <span class="whitespace-nowrap text-[13px] text-brand7 leading-tight" >
-                                    {{ item.time }}
-                                </span>
-                                <UIcon
-                                  name="i-heroicons-chevron-down-20-solid"
-                                  class="w-5 h-5 transition-transform duration-200"
-                                  :class="open ? 'rotate-180' : ''"
-                                />
-                            </div>
-                            <p 
-                                v-show="!open"
-                                class="pl-7 mt-5"
-                                :class="!item.isRead ? 'font-bold text-[13px] text-gray-600 leading-relaxed line-clamp-1' : 'font-semibold text-[13px] text-gray-600 leading-relaxed line-clamp-1'">
-                                {{ item.content }}
-                            </p>
-                        </div>
-                    </template>
-                    <!-- body message-->
-                     <template #content="{ item, open }">
-                        <div 
-                          class="mt-5 pl-7"
-                          :class="open ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'" >
-                            <div class="overflow-hidden"> 
-                              <div 
-                              class="font-semibold text-[13px] text-gray-600 leading-relaxed ">
-                                  {{ item.content }}
-                              </div>
-                            </div>
-                        </div> 
-                     </template>
-                </UAccordion>
-             </div>
-        </div>
+  <div class="min-h-screen flex flex-col bg-white dark:bg-gray-900">
+    <!-- Notifications accordion -->
+    <div class="flex-1 w-full mx-auto mt-15">
+      <UAccordion
+        type="multiple"
+        class="bg-white w-full px-5 mb-10"
+        :items="accordionItems"
+        :ui="{
+          item: 'border-none pr-2 mt-5',
+          header: true
+            ? 'text-[20px] font-extrabold text-[#3a696e]'
+            : 'text-[20px] font-semibold text-[#3a696e]',
+          trigger: 'block w-full text-left p-0',
+          trailingIcon: 'hidden pointer-events-none',
+        }"
+      >
+        <!-- Header -->
+        <template #default="{ item, open }">
+          <div
+            class="w-full"
+            @click="markAsRead(item.id)"
+          >
+            <div
+              class="grid grid-cols-[auto_minmax(0,1fr)_auto_auto] items-center gap-x-3 w-full"
+            >
+              <UIcon
+                name="i-heroicons-bell"
+                class="w-5 h-5 text-[#3a696e]"
+              />
+              <h3
+                class="min-w-0 line-clamp-1 truncate leading-tight"
+                :class="
+                  !item.isRead
+                    ? 'text-[20px] font-extrabold text-[#3a696e]'
+                    : 'text-[20px] font-semibold text-[#3a696e]'
+                "
+              >
+                {{ item.label }}
+              </h3>
+
+              <span
+                class="whitespace-nowrap text-[13px] text-brand7 leading-tight"
+              >
+                {{ item.time }}
+              </span>
+              <UIcon
+                name="i-heroicons-chevron-down-20-solid"
+                class="w-5 h-5 transition-transform duration-200"
+                :class="open ? 'rotate-180' : ''"
+              />
+            </div>
+            <p
+              v-show="!open"
+              class="pl-7 mt-5"
+              :class="
+                !item.isRead
+                  ? 'font-bold text-[13px] text-gray-600 leading-relaxed line-clamp-1'
+                  : 'font-semibold text-[13px] text-gray-600 leading-relaxed line-clamp-1'
+              "
+            >
+              {{ item.content }}
+            </p>
+          </div>
+        </template>
+        <!-- body message -->
+        <template #content="{ item }">
+          <div class="overflow-hidden">
+            <p
+              class="font-semibold text-[13px] text-gray-600 leading-relaxed"
+            >
+              {{ item.content }}
+            </p>
+          </div>
+        </template>
+      </UAccordion>
+    </div>
+  </div>
 </template>
-
diff --git a/app/pages/index.vue b/app/pages/index.vue
index ef441cd..fb3ae86 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,18 +1,21 @@
 <script setup lang="ts">
-
-
 import 'vue3-carousel/dist/carousel.css'
 import { Carousel, Slide, Pagination } from 'vue3-carousel'
 
-const { data: donations, pending: donationsPending, error: donationsError } = await useFetch<{
-  id: string
-  name: string
-  link: string
-  startDate: string
-  endDate: string
-  imageUrl: string
-}[]>('/api/admin/donations')
-
+const {
+  data: donations,
+  pending: donationsPending,
+  error: donationsError,
+} = await useFetch<
+  {
+    id: string
+    name: string
+    link: string
+    startDate: string
+    endDate: string
+    imageUrl: string
+  }[]
+>('/api/admin/donations')
 
 const carouselConfig = {
   itemsToShow: 1,
@@ -21,83 +24,107 @@ const carouselConfig = {
   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
+  }[]
+}
+
+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' },
 ])
-const events = ref([
-  {
-    id: 1,
-    name: "Event 1",
-    date: "October 07, 2025",
-    location: "Location 1",
-    image: "/images/image1.jpeg"
-  },
-  {
-    id: 2,
-    name: "Event 2",
-    date: "October 15, 2025",
-    location: "Location 2",
-    image: "/images/image1.jpeg"
-  },
-  {
-    id: 3,
-    name: "Event 3",
-    date: "November 03, 2025",
-    location: "Location 3",
-    image: "/images/image1.jpeg"
-  },
-  {
-    id: 4,
-    name: "Event 4",
-    date: "November 20, 2025",
-    location: "Location 4",
-    image: "/images/image1.jpeg"
-  },
-])
 
 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"
+    name: 'Prenatal Care',
+    image: '/images/image1.jpeg',
+    href: 'https://www.abidewomen.org/prenatalcare',
   },
   {
     id: 2,
-    name: "Postpatrun Care",
-    image: "/images/image1.jpeg",
-    href: "https://www.abidewomen.org/postpartumcare"
+    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"
+    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"
+    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
+}
+
+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',
+    })),
+)
 </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">
+      <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"
@@ -106,7 +133,7 @@ const services = ref([
           </Slide>
 
           <template #addons>
-            <!--<Navigation />-->
+            <!-- <Navigation /> -->
             <Pagination />
           </template>
         </Carousel>
@@ -114,44 +141,92 @@ const services = ref([
 
       <!-- 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>
+        <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">
+          <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"
+          >
+            <!-- Event Image Placeholder -->
+            <div class="h-35 relative overflow-hidden">
+              <img
+                :src="event.image"
+                class="w-full h-full object-cover"
+              >
+            </div>
 
-              <!-- Event Image Placeholder-->
-              <div class="h-35 relative overflow-hidden">
-                <img
-                  :src="event.image"
-                  :alt="event.name"
-                  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.name }}</h4>
+            <!-- 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"/>
+                <!-- 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"/>
+
+                <!-- 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 }}</span>
+                  <span class="leading-tight">
+                    {{ event.location.address }}</span>
                 </div>
               </div>
             </div>
@@ -159,49 +234,69 @@ const services = ref([
         </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>
+      <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 
+        <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 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 
+            <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"/>
+            >
+              <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>
+        <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" 
+          <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">
+            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
+                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>
@@ -209,32 +304,52 @@ const services = ref([
       </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">
+        <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">
+            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
+                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>
       </div>
     </div>
-
   </div>
-
 </template>
diff --git a/app/pages/mobileClinic.vue b/app/pages/mobileClinic.vue
index 73b9818..fbd4e0f 100644
--- a/app/pages/mobileClinic.vue
+++ b/app/pages/mobileClinic.vue
@@ -1,54 +1,62 @@
 <template>
-    <!-- Map Section -->
-    <div id="mapbox" class="pt-12 pb-12 h-full w-full">
-      <div id="map" class="h-full w-full relative overflow-hidden">
-        <MapInteractive :style="style" :center="center" :zoom="zoom" />
-        <UDrawer
-          class="absolute bottom-4 w-11/12 left-1/2 -translate-x-1/2"
-          :default-open="true"
-          :handle-only="true"
-          :dismissible="false"
-          :overlay="false"
-          :swipe-to-close="true"
-          :close-on-escape="false"
-          :close-on-click-outside="false"
-          :modal="false"
-          portal="#map"
-          :snap-points="snapPoints"
-            >
-          <template #content>
-            <EventTile
-v-if ="pastEvents.length === 0"
-              class="w-11/12 mx-auto my-4 cursor-pointer"
-              title="No past events"
-              subtitle="Check back later for updates!"
-              
-            />
-            <EventTile
-v-for="event in pastEvents"
-              v-else
-              :key="event.id"
-              class="w-11/12 mx-auto my-4 cursor-pointer"
-              :title="event.title"
-              :subtitle="new Date(event.startTime).toLocaleString()"
-              @click="() => mapAdjust(event)"
-            />
-          </template>
-        </UDrawer>
-      </div>
+  <!-- Map Section -->
+  <div
+    id="mapbox"
+    class="pt-12 pb-12 h-full w-full"
+  >
+    <div
+      id="map"
+      class="h-full w-full relative overflow-hidden"
+    >
+      <MapInteractive
+        :style="style"
+        :center="center"
+        :zoom="zoom"
+      />
+      <UDrawer
+        class="absolute bottom-4 w-11/12 left-1/2 -translate-x-1/2"
+        :default-open="true"
+        :handle-only="true"
+        :dismissible="false"
+        :overlay="false"
+        :swipe-to-close="true"
+        :close-on-escape="false"
+        :close-on-click-outside="false"
+        :modal="false"
+        portal="#map"
+        :snap-points="snapPoints"
+      >
+        <template #content>
+          <EventTile
+            v-if="pastEvents.length === 0"
+            class="w-11/12 mx-auto my-4 cursor-pointer"
+            title="No past events"
+            subtitle="Check back later for updates!"
+          />
+          <EventTile
+            v-for="event in pastEvents"
+            v-else
+            :key="event.id"
+            class="w-11/12 mx-auto my-4 cursor-pointer"
+            :title="event.title"
+            :subtitle="new Date(event.startTime).toLocaleString()"
+            @click="() => mapAdjust(event)"
+          />
+        </template>
+      </UDrawer>
     </div>
+  </div>
 </template>
 
 <script setup>
-
-import 'maplibre-gl/dist/maplibre-gl.css';
+import 'maplibre-gl/dist/maplibre-gl.css'
 
 const style = '/mapstyles.json'
 const center = ref([-96.77049780046936, 32.772891246510596])
 const zoom = ref(15)
 
 // Pixel values
-const snapPoints = ["230", "340", "450"]
+const snapPoints = ['230', '340', '450']
 
 const pastEvents = ref([])
 const upcomingEvents = ref([])
@@ -63,35 +71,32 @@ async function loadEvents() {
   try {
     const allEvents = await $fetch('/api/events')
     console.log('✅ Loaded events from API:', allEvents)
-    
+
     const now = new Date()
-    
-    pastEvents.value = allEvents.filter(event => {
+
+    pastEvents.value = allEvents.filter((event) => {
       const endTime = new Date(event.endTime)
       return endTime < now
     })
-    
-    upcomingEvents.value = allEvents.filter(event => {
+
+    upcomingEvents.value = allEvents.filter((event) => {
       const endTime = new Date(event.endTime)
       return endTime >= now
     })
-    
+
     console.log('📅 Past events:', pastEvents.value.length)
     console.log('📅 Upcoming events:', upcomingEvents.value.length)
-    
-  } catch (error) {
+  }
+  catch (error) {
     console.error('❌ Error loading events:', error)
   }
 }
 
-
 async function mapAdjust() {
-
   const lng = -96.749788
   const lat = 32.985141
-  
+
   center.value = [lng, lat]
   zoom.value = 17
 }
-
-</script>
\ No newline at end of file
+</script>
diff --git a/app/pages/settings.vue b/app/pages/settings.vue
index da07150..4cdb4d7 100644
--- a/app/pages/settings.vue
+++ b/app/pages/settings.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
-
 definePageMeta({
   layout: 'secondary',
-}) 
-
-
+})
 
 // type for the select
 type NotificationType = 'General Events' | 'Volunteer Events' | 'Both'
@@ -12,48 +9,45 @@ type NotificationType = 'General Events' | 'Volunteer Events' | 'Both'
 const notificationEnabled = ref(true)
 const notificationType = ref<NotificationType>('General Events')
 
-
 const notificationOptions = [
-    { label: 'General Events', value: 'general' },
-    { label: 'Volunteer Events', value: 'volunteer' },
-    { label: 'Both', value: 'both'},
+  { label: 'General Events', value: 'general' },
+  { label: 'Volunteer Events', value: 'volunteer' },
+  { label: 'Both', value: 'both' },
 ]
 </script>
 
 <template>
-    <div class="min-h-screen flex flex-col bg-white dark:bg-gray-900">
-         <!-- top nav bar with back button -->
-        <main class="flex-1 px-5 pt-20 pb-24">
-            <h2 class="text-xl font-semibold mb-6 text-brand7">
-                Event Notifications 
-            </h2>
- 
-            <section class="space-y-5">
-
-                <div class="w-full rounded-3xl border border-gray-2-400 bg-slate-100 px-4 py-4 flex items-center justify-between">
-                    <span class="text-sm font-semibold text-">Enable Notifications</span>
-
-                    <USwitch 
-                        v-model="notificationEnabled" 
-                        color="brand7"
-                    />
-                </div>
-                <!-- notification type -->
-                <div 
-                    v-if="notificationEnabled"
-                    class="w-full rounded-3xl border border-gray-2-400 bg-white px-4 py-3 flex items-center justify-between">
-                    <span class="text-sm font-semibold text-brand4">Notification Type</span>
-                    <USelect 
-                        v-model="notificationType"
-                        :items="notificationOptions"
-                        size="sm"
-                        class="w-40"
-                        color="brand6"
-                    />
-                </div>
-
-                
-            </section>
-        </main>
-    </div>
-</template>
\ No newline at end of file
+  <div class="min-h-screen flex flex-col bg-white dark:bg-gray-900">
+    <!-- top nav bar with back button -->
+    <main class="flex-1 px-5 pt-20 pb-24">
+      <h2 class="text-xl font-semibold mb-6 text-brand7">
+        Event Notifications
+      </h2>
+
+      <section class="space-y-5">
+        <div class="w-full rounded-3xl border border-gray-2-400 bg-slate-100 px-4 py-4 flex items-center justify-between">
+          <span class="text-sm font-semibold text-">Enable Notifications</span>
+
+          <USwitch
+            v-model="notificationEnabled"
+            color="brand7"
+          />
+        </div>
+        <!-- notification type -->
+        <div
+          v-if="notificationEnabled"
+          class="w-full rounded-3xl border border-gray-2-400 bg-white px-4 py-3 flex items-center justify-between"
+        >
+          <span class="text-sm font-semibold text-brand4">Notification Type</span>
+          <USelect
+            v-model="notificationType"
+            :items="notificationOptions"
+            size="sm"
+            class="w-40"
+            color="brand6"
+          />
+        </div>
+      </section>
+    </main>
+  </div>
+</template>
diff --git a/app/pages/volunteer/index.vue b/app/pages/volunteer/index.vue
index dd98af9..eb52a10 100644
--- a/app/pages/volunteer/index.vue
+++ b/app/pages/volunteer/index.vue
@@ -1,52 +1,50 @@
 <script setup lang="ts">
-
-import type { DateValue } from "@internationalized/date";
-import { getLocalTimeZone, today } from "@internationalized/date";
-
+import type { DateValue } from '@internationalized/date'
+import { getLocalTimeZone, today } from '@internationalized/date'
 
 definePageMeta({
-  middleware: 'auth'
+  middleware: 'auth',
 })
 
-const tz = getLocalTimeZone();
+const tz = getLocalTimeZone()
 
-const value = ref<DateValue>(today(tz));
-const volunteer = await $fetch("/api/volunteer/me");
+const value = ref<DateValue>(today(tz))
+const volunteer = await $fetch('/api/volunteer/me')
 const isDateDisabled = (d: DateValue) =>
-  d.toDate(tz) < new Date(new Date().setHours(0, 0, 0, 0));
+  d.toDate(tz) < new Date(new Date().setHours(0, 0, 0, 0))
 
 // Upcoming events they signed up for
 const upcomingEvents = ref([
-  { id: 1, title: "Community Cleanup", date: "Apr 15, 2024", hours: 3 },
-  { id: 2, title: "Food Bank Volunteer", date: "Apr 18, 2024", hours: 4 },
-  { id: 3, title: "Youth Mentoring", date: "Apr 22, 2024", hours: 2 },
-]);
+  { id: 1, title: 'Community Cleanup', date: 'Apr 15, 2024', hours: 3 },
+  { id: 2, title: 'Food Bank Volunteer', date: 'Apr 18, 2024', hours: 4 },
+  { id: 3, title: 'Youth Mentoring', date: 'Apr 22, 2024', hours: 2 },
+])
 
 // Hour logs
 const approvedLogs = ref([
-  { id: 1, event: "Park Cleanup", hours: 3, date: "Mar 10, 2024" },
-  { id: 2, event: "Library Support", hours: 2, date: "Mar 5, 2024" },
-]);
+  { id: 1, event: 'Park Cleanup', hours: 3, date: 'Mar 10, 2024' },
+  { id: 2, event: 'Library Support', hours: 2, date: 'Mar 5, 2024' },
+])
 
 const deniedLogs = ref([
   {
     id: 1,
-    event: "Street Fair",
+    event: 'Street Fair',
     hours: 5,
-    date: "Mar 1, 2024",
-    reason: "Incorrect documentation",
+    date: 'Mar 1, 2024',
+    reason: 'Incorrect documentation',
   },
-]);
+])
 
 const pendingLogs = ref([
-  { id: 1, event: "Beach Cleanup", hours: 4, date: "Mar 20, 2024" },
-  { id: 2, event: "Animal Shelter", hours: 3, date: "Mar 22, 2024" },
-]);
+  { id: 1, event: 'Beach Cleanup', hours: 4, date: 'Mar 20, 2024' },
+  { id: 2, event: 'Animal Shelter', hours: 3, date: 'Mar 22, 2024' },
+])
 
 // Toggle states for accordions
-const showApproved = ref(false);
-const showDenied = ref(false);
-const showPending = ref(false);
+const showApproved = ref(false)
+const showDenied = ref(false)
+const showPending = ref(false)
 </script>
 
 <template>
@@ -59,8 +57,14 @@ const showPending = ref(false);
         <!-- Calendar Card -->
         <UCard>
           <UCalendar
-:v-model="value" color="brand4" :is-date-disabled="isDateDisabled" locale="en-US"
-            weekday-format="short" :first-day-of-week="0" class="rounded-2xl" />
+            :v-model="value"
+            color="brand4"
+            :is-date-disabled="isDateDisabled"
+            locale="en-US"
+            weekday-format="short"
+            :first-day-of-week="0"
+            class="rounded-2xl"
+          />
         </UCard>
 
         <!-- Upcoming Events (Signed Up) -->
@@ -69,16 +73,21 @@ const showPending = ref(false);
         </h3>
         <div class="space-y-4">
           <div
-v-for="event in upcomingEvents" :key="event.id"
-            class="flex items-center justify-between p-3 rounded-lg border border-gray-200">
+            v-for="event in upcomingEvents"
+            :key="event.id"
+            class="flex items-center justify-between p-3 rounded-lg border border-gray-200"
+          >
             <div>
-              <p class="font-medium text-sm">{{ event.title }}</p>
+              <p class="font-medium text-sm">
+                {{ event.title }}
+              </p>
               <p class="text-xs text-gray-500 dark:text-gray-400">
                 {{ event.date }}
               </p>
             </div>
             <span
-              class="text-xs px-2 py-1 rounded-full bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400">
+              class="text-xs px-2 py-1 rounded-full bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400"
+            >
               {{ event.hours }}h
             </span>
           </div>
@@ -86,36 +95,51 @@ v-for="event in upcomingEvents" :key="event.id"
 
         <!-- Hour Logs -->
         <div class="flex items-center justify-between">
-          <h3 class="text-lg font-semibold text-brand4">Hour Logs</h3>
-          <UButton icon="i-lucide-plus" size="sm" color="brand4" label="Log Your Hours" />
+          <h3 class="text-lg font-semibold text-brand4">
+            Hour Logs
+          </h3>
+          <UButton
+            icon="i-lucide-plus"
+            size="sm"
+            color="brand4"
+            label="Log Your Hours"
+          />
         </div>
 
         <div class="space-y-3">
-
           <!-- In Review -->
           <div class="border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden">
             <button
-class="w-full flex items-center justify-between p-4 bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
-              @click="showPending = !showPending">
+              class="w-full flex items-center justify-between p-4 bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+              @click="showPending = !showPending"
+            >
               <div class="flex items-center gap-3">
-                <div class="w-2 h-2 rounded-full bg-amber-500"/>
+                <div class="w-2 h-2 rounded-full bg-amber-500" />
                 <span class="font-medium">In Review</span>
                 <span
-                  class="text-xs px-2 py-0.5 rounded-full bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400">
+                  class="text-xs px-2 py-0.5 rounded-full bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400"
+                >
                   {{ pendingLogs.length }}
                 </span>
               </div>
               <UIcon
-:name="showPending
+                :name="showPending
                   ? 'i-heroicons-chevron-up'
                   : 'i-heroicons-chevron-down'
-                " class="w-5 h-5 text-gray-400" />
+                "
+                class="w-5 h-5 text-gray-400"
+              />
             </button>
 
-            <div v-if="showPending" class="p-4 pt-0 space-y-2 bg-gray-50 dark:bg-gray-900/50">
+            <div
+              v-if="showPending"
+              class="p-4 pt-0 space-y-2 bg-gray-50 dark:bg-gray-900/50"
+            >
               <div
-v-for="log in pendingLogs" :key="log.id"
-                class="p-3 bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800">
+                v-for="log in pendingLogs"
+                :key="log.id"
+                class="p-3 bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800"
+              >
                 <div class="flex items-start justify-between">
                   <div>
                     <p class="font-medium text-sm">
@@ -135,27 +159,36 @@ v-for="log in pendingLogs" :key="log.id"
           <!-- Approved -->
           <div class="border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden">
             <button
-class="w-full flex items-center justify-between p-4 bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
-              @click="showApproved = !showApproved">
+              class="w-full flex items-center justify-between p-4 bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+              @click="showApproved = !showApproved"
+            >
               <div class="flex items-center gap-3">
-                <div class="w-2 h-2 rounded-full bg-emerald-500"/>
+                <div class="w-2 h-2 rounded-full bg-emerald-500" />
                 <span class="font-medium">Approved</span>
                 <span
-                  class="text-xs px-2 py-0.5 rounded-full bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400">
+                  class="text-xs px-2 py-0.5 rounded-full bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400"
+                >
                   {{ approvedLogs.length }}
                 </span>
               </div>
               <UIcon
-:name="showApproved
+                :name="showApproved
                   ? 'i-heroicons-chevron-up'
                   : 'i-heroicons-chevron-down'
-                " class="w-5 h-5 text-gray-400" />
+                "
+                class="w-5 h-5 text-gray-400"
+              />
             </button>
 
-            <div v-if="showApproved" class="p-4 pt-0 space-y-2 bg-gray-50 dark:bg-gray-900/50">
+            <div
+              v-if="showApproved"
+              class="p-4 pt-0 space-y-2 bg-gray-50 dark:bg-gray-900/50"
+            >
               <div
-v-for="log in approvedLogs" :key="log.id"
-                class="p-3 bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800">
+                v-for="log in approvedLogs"
+                :key="log.id"
+                class="p-3 bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800"
+              >
                 <div class="flex items-start justify-between">
                   <div>
                     <p class="font-medium text-sm">
@@ -176,27 +209,36 @@ v-for="log in approvedLogs" :key="log.id"
           <!-- Denied -->
           <div class="border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden">
             <button
-class="w-full flex items-center justify-between p-4 bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
-              @click="showDenied = !showDenied">
+              class="w-full flex items-center justify-between p-4 bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+              @click="showDenied = !showDenied"
+            >
               <div class="flex items-center gap-3">
-                <div class="w-2 h-2 rounded-full bg-red-500"/>
+                <div class="w-2 h-2 rounded-full bg-red-500" />
                 <span class="font-medium">Denied</span>
                 <span
-                  class="text-xs px-2 py-0.5 rounded-full bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400">
+                  class="text-xs px-2 py-0.5 rounded-full bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400"
+                >
                   {{ deniedLogs.length }}
                 </span>
               </div>
               <UIcon
-:name="showDenied
+                :name="showDenied
                   ? 'i-heroicons-chevron-up'
                   : 'i-heroicons-chevron-down'
-                " class="w-5 h-5 text-gray-400" />
+                "
+                class="w-5 h-5 text-gray-400"
+              />
             </button>
 
-            <div v-if="showDenied" class="p-4 pt-0 space-y-2 bg-gray-50 dark:bg-gray-900/50">
+            <div
+              v-if="showDenied"
+              class="p-4 pt-0 space-y-2 bg-gray-50 dark:bg-gray-900/50"
+            >
               <div
-v-for="log in deniedLogs" :key="log.id"
-                class="p-3 bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800">
+                v-for="log in deniedLogs"
+                :key="log.id"
+                class="p-3 bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800"
+              >
                 <div class="flex items-start justify-between mb-2">
                   <div>
                     <p class="font-medium text-sm">
@@ -216,10 +258,7 @@ v-for="log in deniedLogs" :key="log.id"
               </div>
             </div>
           </div>
-
-
         </div>
-
       </div>
     </main>
   </div>
diff --git a/app/types/admin/admin-dash.type.ts b/app/types/admin/admin-dash.type.ts
index af5cab7..114646d 100644
--- a/app/types/admin/admin-dash.type.ts
+++ b/app/types/admin/admin-dash.type.ts
@@ -1,8 +1,8 @@
 export type AdminFeature = {
-    id: string
-    label: string
-    description?: string
-    icon: string
-    iconBg: string
-    bg: string
-}
\ No newline at end of file
+  id: string
+  label: string
+  description?: string
+  icon: string
+  iconBg: string
+  bg: string
+}
diff --git a/app/types/auth/login.type.ts b/app/types/auth/login.type.ts
index 1cc854e..5df224d 100644
--- a/app/types/auth/login.type.ts
+++ b/app/types/auth/login.type.ts
@@ -1,27 +1,27 @@
-import * as z from "zod"
-import type { AuthFormField } from "@nuxt/ui"
+import * as z from 'zod'
+import type { AuthFormField } from '@nuxt/ui'
 
 export const loginSchema = z.object({
-    email: z.email('Invalid email'),
-    password: z.string().min(8, "Must be at least 8 characters")
+  email: z.email('Invalid email'),
+  password: z.string().min(8, 'Must be at least 8 characters'),
 })
 
 export type LoginSchema = z.output<typeof loginSchema>
 
 export const loginFields: AuthFormField[] = [{
-    name: 'email',
-    type: 'email',
-    label: 'Email',
-    placeholder: 'Enter your email',
-    required: true
-  }, {
-    name: 'password',
-    label: 'Password',
-    type: 'password',
-    placeholder: 'Enter your password',
-    required: true
-  }, {
-    name: 'remember',
-    label: 'Remember me',
-    type: 'checkbox'
-  }]
\ No newline at end of file
+  name: 'email',
+  type: 'email',
+  label: 'Email',
+  placeholder: 'Enter your email',
+  required: true,
+}, {
+  name: 'password',
+  label: 'Password',
+  type: 'password',
+  placeholder: 'Enter your password',
+  required: true,
+}, {
+  name: 'remember',
+  label: 'Remember me',
+  type: 'checkbox',
+}]
diff --git a/app/types/auth/providers.type.ts b/app/types/auth/providers.type.ts
index 00d5786..b9dbef7 100644
--- a/app/types/auth/providers.type.ts
+++ b/app/types/auth/providers.type.ts
@@ -1,10 +1,9 @@
 export const authProviders = [{
-    label: 'Google',
-    icon: 'i-simple-icons-google',
-    onClick: () => {}
-  }, {
-    label: 'Apple',
-    icon: 'i-simple-icons-apple',
-    onClick: () => {}
-  }]
-  
\ No newline at end of file
+  label: 'Google',
+  icon: 'i-simple-icons-google',
+  onClick: () => {},
+}, {
+  label: 'Apple',
+  icon: 'i-simple-icons-apple',
+  onClick: () => {},
+}]
diff --git a/app/types/auth/sign-up.type.ts b/app/types/auth/sign-up.type.ts
index 8157224..2604d51 100644
--- a/app/types/auth/sign-up.type.ts
+++ b/app/types/auth/sign-up.type.ts
@@ -1,46 +1,46 @@
-import * as z from "zod"
+import * as z from 'zod'
 import { Gender, Availability, Ethinicity, Language } from '~~/server/utils/generated/prisma/enums'
-import type { InputMenuItem, AuthFormField } from "@nuxt/ui"
+import type { InputMenuItem, AuthFormField } from '@nuxt/ui'
 
 export const signUpSchema = z.object({
-    name: z.string().optional(),
-    email: z.email('Invalid email'),
-    password: z.string().min(8, "Must be at least 8 characters"),
-    phone: z.e164('Invalid phone number').optional().nullable(),
-    languages: z.array(z.enum(Language)).nullable(),
-    gender: z.enum(Gender).nullable(),
-    ethinicity: z.enum(Ethinicity).nullable(),
-    availability: z.enum(Availability).array().nullable()
+  name: z.string().optional(),
+  email: z.email('Invalid email'),
+  password: z.string().min(8, 'Must be at least 8 characters'),
+  phone: z.e164('Invalid phone number').optional().nullable(),
+  languages: z.array(z.enum(Language)).nullable(),
+  gender: z.enum(Gender).nullable(),
+  ethinicity: z.enum(Ethinicity).nullable(),
+  availability: z.enum(Availability).array().nullable(),
 })
 
 export type SignUpSchema = z.output<typeof signUpSchema>
 
 function formatEnumLabel(value: string): string {
-  const minorWords = new Set(["and", "or", "of", "the", "a", "an", "to", "in", "on"])
+  const minorWords = new Set(['and', 'or', 'of', 'the', 'a', 'an', 'to', 'in', 'on'])
   const words = value
     .toString()
     .toLowerCase()
-    .split("_")
+    .split('_')
     .map((word, index) => {
       if (index !== 0 && minorWords.has(word)) return word
       return word.charAt(0).toUpperCase() + word.slice(1)
     })
-  return words.join(" ")
+  return words.join(' ')
 }
 
-const languageItems: InputMenuItem[] = Object.values(Language).map((language) => ({
+const languageItems: InputMenuItem[] = Object.values(Language).map(language => ({
   id: language,
   label: formatEnumLabel(language),
 }))
-const genderItems: InputMenuItem[] = Object.values(Gender).map((gender) => ({
+const genderItems: InputMenuItem[] = Object.values(Gender).map(gender => ({
   id: gender,
   label: formatEnumLabel(gender),
 }))
-const ethinicityItems: InputMenuItem[] = Object.values(Ethinicity).map((ethinicity) => ({
+const ethinicityItems: InputMenuItem[] = Object.values(Ethinicity).map(ethinicity => ({
   id: ethinicity,
   label: formatEnumLabel(ethinicity),
 }))
-const availabilityItems: InputMenuItem[] = Object.values(Availability).map((availability) => ({
+const availabilityItems: InputMenuItem[] = Object.values(Availability).map(availability => ({
   id: availability,
   label: formatEnumLabel(availability),
 }))
@@ -50,26 +50,26 @@ export const signUpFields: AuthFormField[] = ([{
   type: 'text',
   label: 'Name',
   placeholder: 'Enter your full name',
-  required: false
-},{
+  required: false,
+}, {
   name: 'email',
   type: 'email',
   label: 'Email',
   placeholder: 'Enter your email',
-  required: true
+  required: true,
 }, {
   name: 'password',
   label: 'Password',
   type: 'password',
   placeholder: 'Enter your password',
-  required: true
-},{
+  required: true,
+}, {
   name: 'phone',
   label: 'Phone',
   type: 'text',
   placeholder: 'Enter your US phone number',
-  required: false
-},{
+  required: false,
+}, {
   name: 'languages',
   label: 'Languages',
   type: 'select',
@@ -77,33 +77,30 @@ export const signUpFields: AuthFormField[] = ([{
   required: true,
   valueKey: 'id',
   items: languageItems,
-  multiple: true        
+  multiple: true,
 }, {
-  name: "gender",
+  name: 'gender',
   label: 'Gender',
   type: 'select',
-  placeholder: "What is your gender?",
+  placeholder: 'What is your gender?',
   valueKey: 'id',
   items: genderItems,
-  required: true
-},{
-  name: "ethinicity",
+  required: true,
+}, {
+  name: 'ethinicity',
   label: 'Ethinicity',
   type: 'select',
-  placeholder: "What is your ethinicity?",
+  placeholder: 'What is your ethinicity?',
   valueKey: 'id',
   items: ethinicityItems,
-  required: true
-},{
-  name: "availability",
+  required: true,
+}, {
+  name: 'availability',
   label: 'Availability',
   type: 'select',
-  placeholder: "What is your availability?",
+  placeholder: 'What is your availability?',
   valueKey: 'id',
   items: availabilityItems,
   required: true,
-  multiple: true
-},] as unknown) as AuthFormField[]
-
-
-
+  multiple: true,
+}] as unknown) as AuthFormField[]
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 5d0b652..d4d9225 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,3 +1,3 @@
 import withNuxt from './.nuxt/eslint.config.mjs'
 
-export default withNuxt()
\ No newline at end of file
+export default withNuxt()
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 7a6907b..4dbafbe 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,21 +1,8 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  compatibilityDate: '2025-07-15',
+  modules: ['@nuxt/ui', '@nuxt/eslint', 'nuxt-maplibre'],
   devtools: { enabled: true },
-  modules: [
-    '@nuxt/ui',
-    '@nuxt/eslint',
-    'nuxt-maplibre'
-  ],
   css: ['~/assets/css/main.css'],
-  eslint: {
-    // additional options here
-  },
-  vite: {
-    optimizeDeps: {
-      include: ["maplibre-gl"],
-    },
-  },
   // css: ['assets/css/main.css']
   ui: {
     theme: {
@@ -33,8 +20,20 @@ export default defineNuxtConfig({
         'brand4',
         'brand5',
         'brand6',
-        'brand7'
-      ]
-    }
-  }
-})
\ No newline at end of file
+        'brand7',
+      ],
+    },
+  },
+  compatibilityDate: '2025-07-15',
+  vite: {
+    optimizeDeps: {
+      include: ['maplibre-gl'],
+    },
+  },
+  eslint: {
+    checker: true,
+    config: {
+      stylistic: true,
+    },
+  },
+})
diff --git a/package.json b/package.json
index 054f68a..719a8f1 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@iconify-json/heroicons": "^1.2.3",
-    "@nuxt/eslint": "^1.9.0",
+    "@nuxt/eslint": "^1.15.0",
     "@types/node": "^24.3.1",
     "@types/parse-path": "^7.1.0",
     "autoprefixer": "^10.4.21",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 86358a5..e6634f9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -58,8 +58,8 @@ importers:
         specifier: ^1.2.3
         version: 1.2.3
       '@nuxt/eslint':
-        specifier: ^1.9.0
-        version: 1.10.0(@typescript-eslint/utils@8.57.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(@vue/compiler-sfc@3.5.30)(eslint@9.39.4(jiti@2.6.1))(magicast@0.5.2)(typescript@5.9.3)(vite@7.2.2(@types/node@24.12.0)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
+        specifier: ^1.15.0
+        version: 1.15.2(@typescript-eslint/utils@8.57.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(@vue/compiler-sfc@3.5.30)(eslint@9.39.4(jiti@2.6.1))(magicast@0.5.2)(typescript@5.9.3)(vite@7.2.2(@types/node@24.12.0)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
       '@types/node':
         specifier: ^24.3.1
         version: 24.12.0
@@ -346,15 +346,9 @@ packages:
   '@chevrotain/utils@10.5.0':
     resolution: {integrity: sha512-hBzuU5+JjB2cqNZyszkDHZgOSrUUT8V3dhgRl8Q9Gp6dAj/H5+KILGjbhDpc3Iy9qmqlm/akuOI2ut9VUtzJxQ==}
 
-  '@clack/core@0.5.0':
-    resolution: {integrity: sha512-p3y0FIOwaYRUPRcMO7+dlmLh8PSRcrjuTndsiA0WAFbWES0mLZlrjVoBRZ9DzkPFJZG6KGkJmoEAY0ZcVWTkow==}
-
   '@clack/core@1.1.0':
     resolution: {integrity: sha512-SVcm4Dqm2ukn64/8Gub2wnlA5nS2iWJyCkdNHcvNHPIeBTGojpdJ+9cZKwLfmqy7irD4N5qLteSilJlE0WLAtA==}
 
-  '@clack/prompts@0.11.0':
-    resolution: {integrity: sha512-pMN5FcrEw9hUkZA4f+zLlzivQSeQf5dRGJjSUbvVYDLvpKCdQx5OaknvKzgbtXOizhP+SJJJjqEbOe55uKKfAw==}
-
   '@clack/prompts@1.1.0':
     resolution: {integrity: sha512-pkqbPGtohJAvm4Dphs2M8xE29ggupihHdy1x84HNojZuMtFsHiUlRvqD24tM2+XmI+61LlfNceM3Wr7U5QES5g==}
 
@@ -391,9 +385,9 @@ packages:
   '@emnapi/wasi-threads@1.2.0':
     resolution: {integrity: sha512-N10dEJNSsUx41Z6pZsXU8FjPjpBEplgH24sfkmITrBED1/U2Esum9F3lfLrMjKHHjmi557zQn7kR9R+XWXu5Rg==}
 
-  '@es-joy/jsdoccomment@0.78.0':
-    resolution: {integrity: sha512-rQkU5u8hNAq2NVRzHnIUUvR6arbO0b6AOlvpTNS48CkiKSn/xtNfOzBK23JE4SiW89DgvU7GtxLVgV4Vn2HBAw==}
-    engines: {node: '>=20.11.0'}
+  '@es-joy/jsdoccomment@0.86.0':
+    resolution: {integrity: sha512-ukZmRQ81WiTpDWO6D/cTBM7XbrNtutHKvAVnZN/8pldAwLoJArGOvkNyxPTBGsPjsoaQBJxlH+tE2TNA/92Qgw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
 
   '@es-joy/resolve.exports@1.2.0':
     resolution: {integrity: sha512-Q9hjxWI5xBM+qW2enxfe8wDKdFWMfd0Z29k5ZJnuBqD/CasY5Zryj09aCA6owbGATWz+39p5uIdaHXpopOcG8g==}
@@ -744,6 +738,10 @@ packages:
     resolution: {integrity: sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@eslint/config-helpers@0.5.5':
+    resolution: {integrity: sha512-eIJYKTCECbP/nsKaaruF6LW967mtbQbsw4JTtSVkUQc9MneSkbrgPJAbKl9nWr0ZeowV8BfsarBmPpBzGelA2w==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
   '@eslint/config-inspector@1.5.0':
     resolution: {integrity: sha512-YK/VdQ+pibx5pcCI2GPZVO6vFemf/pkB662HuFtc5AA4WLQ9upb3fAoZSjOAYoDJx58qGTDp6xq9ldd/vluNxQ==}
     hasBin: true
@@ -758,6 +756,10 @@ packages:
     resolution: {integrity: sha512-QUPblTtE51/7/Zhfv8BDwO0qkkzQL7P/aWWbqcf4xWLEYn1oKjdO0gglQBB4GAsu7u6wjijbCmzsUTy6mnk6oQ==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
 
+  '@eslint/core@1.2.1':
+    resolution: {integrity: sha512-MwcE1P+AZ4C6DWlpin/OmOA54mmIZ/+xZuJiQd4SyB29oAJjN30UW9wkKNptW2ctp4cEsvhlLY/CsQ1uoHDloQ==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
   '@eslint/eslintrc@3.3.5':
     resolution: {integrity: sha512-4IlJx0X0qftVsN5E+/vGujTRIFtwuLbNsVUe7TO6zYPDR1O6nFwvwhIKEKSrl6dZchmYBITazxKoUYOjdtjlRg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -985,6 +987,11 @@ packages:
     peerDependencies:
       vite: '>=6.0'
 
+  '@nuxt/devtools-kit@3.2.4':
+    resolution: {integrity: sha512-Yxy2Xgmq5hf3dQy983V0xh0OJV2mYwRZz9eVIGc3EaribdFGPDNGMMbYqX9qCty3Pbxn/bCF3J0UyPaNlHVayQ==}
+    peerDependencies:
+      vite: '>=6.0'
+
   '@nuxt/devtools-wizard@3.1.0':
     resolution: {integrity: sha512-XYYWnG6SAvALCdXbM+xklqv7sEiVZbKgGparv8jFE5Tt6l8sg80Eb+vM40+Xpdu2KE3VlFKj4F4oFwDXMvAkgA==}
     hasBin: true
@@ -999,24 +1006,24 @@ packages:
       '@vitejs/devtools':
         optional: true
 
-  '@nuxt/eslint-config@1.10.0':
-    resolution: {integrity: sha512-6Ry+sV5FaTBg3a0l+4gcxuz0IsQG5dSF6OxHNDlDx2yTygMOxeCn6vdc2Cz/e4LtYGvwZIlhH9wVlnWnD3+G+Q==}
+  '@nuxt/eslint-config@1.15.2':
+    resolution: {integrity: sha512-vS6mWB87tYjB8h3TxG/QziaZ6CGJpEOBd7N/j+64/tjNipUJzNgKwDzyGoOifNqyDDnlvgi6T3m9XpeYm4qRaA==}
     peerDependencies:
-      eslint: ^9.0.0
+      eslint: ^9.0.0 || ^10.0.0
       eslint-plugin-format: '*'
     peerDependenciesMeta:
       eslint-plugin-format:
         optional: true
 
-  '@nuxt/eslint-plugin@1.10.0':
-    resolution: {integrity: sha512-KL8eCdYGuEIVlts/B+MLgL7FCpaPt2HU6m3XBsUdl+LXPI7/eCMSLlFDmDmfz+PuMx0PCGo7ayyDN6cid12Rlw==}
+  '@nuxt/eslint-plugin@1.15.2':
+    resolution: {integrity: sha512-LZ4gEcPP5GjzAkb6Kk04a4v0vvkTLOpmnEvdDatnkSlxtQLUSwX8v11vcDGXL92ZQ98dFoC1Q1IA6Tz3jdFIig==}
     peerDependencies:
-      eslint: ^9.0.0
+      eslint: ^9.0.0 || ^10.0.0
 
-  '@nuxt/eslint@1.10.0':
-    resolution: {integrity: sha512-cuq7jRdhVtnqrU5vcy+jW8u/2A7BHwczPkrr/5XIRB10WOA1NLC9Jo+ts4NlWbCdLy/+9jCHcOV0U94pn9SQUw==}
+  '@nuxt/eslint@1.15.2':
+    resolution: {integrity: sha512-LwDavQoLl+y0sIDqWEYbOnM6FOmXVIYSEjuvkO1hgAqhb0CvG3hgTnfE1qkf1jOAZp3CZGP+6rxRAJ0dxhueIQ==}
     peerDependencies:
-      eslint: ^9.0.0
+      eslint: ^9.0.0 || ^10.0.0
       eslint-webpack-plugin: ^4.1.0
       vite-plugin-eslint2: ^5.0.0
     peerDependenciesMeta:
@@ -2104,6 +2111,10 @@ packages:
     resolution: {integrity: sha512-dTLI8PEXhjUC7B9Kre+u0XznO696BhXcTlOn0/6kf1fHaQW8+VjJAVHJ3eTI14ZapTxdkOmc80HblPQLaEeJdg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@typescript-eslint/types@8.59.2':
+    resolution: {integrity: sha512-e82GVOE8Ps3E++Egvb6Y3Dw0S10u8NkQ9KXmtRhCWJJ8kDhOJTvtMAWnFL16kB1583goCWXsr0NieKCZMs2/0Q==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@typescript-eslint/typescript-estree@8.57.0':
     resolution: {integrity: sha512-m7faHcyVg0BT3VdYTlX8GdJEM7COexXxS6KqGopxdtkQRvBanK377QDHr4W/vIPAR+ah9+B/RclSW5ldVniO1Q==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2826,14 +2837,14 @@ packages:
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
-  comment-parser@1.4.1:
-    resolution: {integrity: sha512-buhp5kePrmda3vhc5B9t7pUQXAb2Tnd0qgpkIhPhkHXxJpiPJ11H0ZEU0oBpJ2QztSbzG/ZxMj/CHsYJqRHmyg==}
-    engines: {node: '>= 12.0.0'}
-
   comment-parser@1.4.5:
     resolution: {integrity: sha512-aRDkn3uyIlCFfk5NUA+VdwMmMsh8JGhc4hapfV4yxymHGQ3BVskMQfoXGpCo5IoBuQ9tS5iiVKhCpTcB4pW4qw==}
     engines: {node: '>= 12.0.0'}
 
+  comment-parser@1.4.6:
+    resolution: {integrity: sha512-ObxuY6vnbWTN6Od72xfwN9DbzC7Y2vv8u1Soi9ahRKL37gb6y1qk6/dgjs+3JWuXJHWvsg3BXIwzd/rkmAwavg==}
+    engines: {node: '>= 12.0.0'}
+
   commondir@1.0.1:
     resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
 
@@ -3203,8 +3214,8 @@ packages:
     peerDependencies:
       eslint: ^9.5.0 || ^10.0.0
 
-  eslint-flat-config-utils@2.1.4:
-    resolution: {integrity: sha512-bEnmU5gqzS+4O+id9vrbP43vByjF+8KOs+QuuV4OlqAuXmnRW2zfI/Rza1fQvdihQ5h4DUo0NqFAiViD4mSrzQ==}
+  eslint-flat-config-utils@3.2.0:
+    resolution: {integrity: sha512-PHgo1X5uqIorJONLVD9BIaOSdoYFD3z/AeJljdqDPlWVRpeCYkDbK9k0AXoYVqqNJr6FEYIEr5Rm2TSktLQcHw==}
 
   eslint-import-context@0.1.9:
     resolution: {integrity: sha512-K9Hb+yRaGAGUbwjhFNHvSmmkZs9+zbuoe3kFQ4V1wYjrepUFYM2dZAfNtjbbj3qsPfUfsA68Bx/ICWQMi+C8Eg==}
@@ -3220,15 +3231,11 @@ packages:
     peerDependencies:
       eslint: '*'
 
-  eslint-plugin-import-lite@0.3.1:
-    resolution: {integrity: sha512-9+EByHZatvWFn/lRsUja5pwah0U5lhOA6SXqTI/iIzoIJHMgmsHUHEaTlLzKU/ukyCRwKEU5E92aUURPgVWq0A==}
+  eslint-plugin-import-lite@0.5.2:
+    resolution: {integrity: sha512-XvfdWOC5dSLEI9krIPRlNmKSI2ViIE9pVylzfV9fCq0ZpDaNeUk6o0wZv0OzN83QdadgXp1NsY0qjLINxwYCsw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: '>=9.0.0'
-      typescript: '>=4.5'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
 
   eslint-plugin-import-x@4.16.2:
     resolution: {integrity: sha512-rM9K8UBHcWKpzQzStn1YRN2T5NvdeIfSVoKu/lKF41znQXHAUcBbYXe5wd6GNjZjTrP7viQ49n1D83x/2gYgIw==}
@@ -3243,20 +3250,20 @@ packages:
       eslint-import-resolver-node:
         optional: true
 
-  eslint-plugin-jsdoc@61.7.1:
-    resolution: {integrity: sha512-36DpldF95MlTX//n3/naULFVt8d1cV4jmSkx7ZKrE9ikkKHAgMLesuWp1SmwpVwAs5ndIM6abKd6PeOYZUgdWg==}
-    engines: {node: '>=20.11.0'}
+  eslint-plugin-jsdoc@62.9.0:
+    resolution: {integrity: sha512-PY7/X4jrVgoIDncUmITlUqK546Ltmx/Pd4Hdsu4CvSjryQZJI2mEV4vrdMufyTetMiZ5taNSqvK//BTgVUlNkA==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
     peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0 || ^9.0.0
+      eslint: ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0
 
-  eslint-plugin-regexp@2.10.0:
-    resolution: {integrity: sha512-ovzQT8ESVn5oOe5a7gIDPD5v9bCSjIFJu57sVPDqgPRXicQzOnYfFN21WoQBQF18vrhT5o7UMKFwJQVVjyJ0ng==}
-    engines: {node: ^18 || >=20}
+  eslint-plugin-regexp@3.1.0:
+    resolution: {integrity: sha512-qGXIC3DIKZHcK1H9A9+Byz9gmndY6TTSRkSMTZpNXdyCw2ObSehRgccJv35n9AdUakEjQp5VFNLas6BMXizCZg==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
     peerDependencies:
-      eslint: '>=8.44.0'
+      eslint: '>=9.38.0'
 
-  eslint-plugin-unicorn@62.0.0:
-    resolution: {integrity: sha512-HIlIkGLkvf29YEiS/ImuDZQbP12gWyx5i3C6XrRxMvVdqMroCI9qoVYCoIl17ChN+U89pn9sVwLxhIWj5nEc7g==}
+  eslint-plugin-unicorn@63.0.0:
+    resolution: {integrity: sha512-Iqecl9118uQEXYh7adylgEmGfkn5es3/mlQTLLkd4pXkIk9CTGrAbeUux+YljSa2ohXCBmQQ0+Ej1kZaFgcfkA==}
     engines: {node: ^20.10.0 || >=21.0.0}
     peerDependencies:
       eslint: '>=9.38.0'
@@ -3557,6 +3564,10 @@ packages:
     resolution: {integrity: sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ==}
     engines: {node: '>=18'}
 
+  globals@17.6.0:
+    resolution: {integrity: sha512-sepffkT8stwnIYbsMBpoCHJuJM5l98FUF2AnE07hfvE0m/qp3R586hw4jF4uadbhvg1ooIdzuu7CsfD2jzCaNA==}
+    engines: {node: '>=18'}
+
   globby@15.0.0:
     resolution: {integrity: sha512-oB4vkQGqlMl682wL1IlWd02tXCbquGWM4voPEI85QmNKCaw8zGTm1f1rubFgkg3Eli2PtKlFgrnmUqasbQWlkw==}
     engines: {node: '>=20'}
@@ -3779,14 +3790,14 @@ packages:
     resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
     hasBin: true
 
-  jsdoc-type-pratt-parser@4.8.0:
-    resolution: {integrity: sha512-iZ8Bdb84lWRuGHamRXFyML07r21pcwBrLkHEuHgEY5UbCouBwv7ECknDRKzsQIXMiqpPymqtIf8TC/shYKB5rw==}
-    engines: {node: '>=12.0.0'}
-
   jsdoc-type-pratt-parser@7.0.0:
     resolution: {integrity: sha512-c7YbokssPOSHmqTbSAmTtnVgAVa/7lumWNYqomgd5KOMyPrRve2anx6lonfOsXEQacqF9FKVUj7bLg4vRSvdYA==}
     engines: {node: '>=20.0.0'}
 
+  jsdoc-type-pratt-parser@7.2.0:
+    resolution: {integrity: sha512-dh140MMgjyg3JhJZY/+iEzW+NO5xR2gpbDFKHqotCmexElVntw7GjWjt511+C/Ef02RU5TKYrJo/Xlzk+OLaTw==}
+    engines: {node: '>=20.0.0'}
+
   jsesc@3.1.0:
     resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
     engines: {node: '>=6'}
@@ -6021,21 +6032,10 @@ snapshots:
 
   '@chevrotain/utils@10.5.0': {}
 
-  '@clack/core@0.5.0':
-    dependencies:
-      picocolors: 1.1.1
-      sisteransi: 1.0.5
-
   '@clack/core@1.1.0':
     dependencies:
       sisteransi: 1.0.5
 
-  '@clack/prompts@0.11.0':
-    dependencies:
-      '@clack/core': 0.5.0
-      picocolors: 1.1.1
-      sisteransi: 1.0.5
-
   '@clack/prompts@1.1.0':
     dependencies:
       '@clack/core': 1.1.0
@@ -6081,13 +6081,13 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@es-joy/jsdoccomment@0.78.0':
+  '@es-joy/jsdoccomment@0.86.0':
     dependencies:
       '@types/estree': 1.0.8
-      '@typescript-eslint/types': 8.57.0
-      comment-parser: 1.4.1
+      '@typescript-eslint/types': 8.59.2
+      comment-parser: 1.4.6
       esquery: 1.7.0
-      jsdoc-type-pratt-parser: 7.0.0
+      jsdoc-type-pratt-parser: 7.2.0
 
   '@es-joy/resolve.exports@1.2.0': {}
 
@@ -6277,6 +6277,10 @@ snapshots:
     dependencies:
       '@eslint/core': 0.17.0
 
+  '@eslint/config-helpers@0.5.5':
+    dependencies:
+      '@eslint/core': 1.2.1
+
   '@eslint/config-inspector@1.5.0(eslint@9.39.4(jiti@2.6.1))':
     dependencies:
       ansis: 4.2.0
@@ -6300,6 +6304,10 @@ snapshots:
     dependencies:
       '@types/json-schema': 7.0.15
 
+  '@eslint/core@1.2.1':
+    dependencies:
+      '@types/json-schema': 7.0.15
+
   '@eslint/eslintrc@3.3.5':
     dependencies:
       ajv: 6.14.0
@@ -6613,6 +6621,14 @@ snapshots:
     transitivePeerDependencies:
       - magicast
 
+  '@nuxt/devtools-kit@3.2.4(magicast@0.5.2)(vite@7.2.2(@types/node@24.12.0)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))':
+    dependencies:
+      '@nuxt/kit': 4.4.2(magicast@0.5.2)
+      execa: 8.0.1
+      vite: 7.2.2(@types/node@24.12.0)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
+    transitivePeerDependencies:
+      - magicast
+
   '@nuxt/devtools-wizard@3.1.0':
     dependencies:
       consola: 3.4.2
@@ -6665,27 +6681,27 @@ snapshots:
       - utf-8-validate
       - vue
 
-  '@nuxt/eslint-config@1.10.0(@typescript-eslint/utils@8.57.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(@vue/compiler-sfc@3.5.30)(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)':
+  '@nuxt/eslint-config@1.15.2(@typescript-eslint/utils@8.57.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(@vue/compiler-sfc@3.5.30)(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@antfu/install-pkg': 1.1.0
-      '@clack/prompts': 0.11.0
+      '@clack/prompts': 1.1.0
       '@eslint/js': 9.39.4
-      '@nuxt/eslint-plugin': 1.10.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
+      '@nuxt/eslint-plugin': 1.15.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
       '@stylistic/eslint-plugin': 5.10.0(eslint@9.39.4(jiti@2.6.1))
       '@typescript-eslint/eslint-plugin': 8.57.0(@typescript-eslint/parser@8.57.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
       '@typescript-eslint/parser': 8.57.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
       eslint: 9.39.4(jiti@2.6.1)
       eslint-config-flat-gitignore: 2.2.1(eslint@9.39.4(jiti@2.6.1))
-      eslint-flat-config-utils: 2.1.4
+      eslint-flat-config-utils: 3.2.0
       eslint-merge-processors: 2.0.0(eslint@9.39.4(jiti@2.6.1))
-      eslint-plugin-import-lite: 0.3.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
+      eslint-plugin-import-lite: 0.5.2(eslint@9.39.4(jiti@2.6.1))
       eslint-plugin-import-x: 4.16.2(@typescript-eslint/utils@8.57.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.4(jiti@2.6.1))
-      eslint-plugin-jsdoc: 61.7.1(eslint@9.39.4(jiti@2.6.1))
-      eslint-plugin-regexp: 2.10.0(eslint@9.39.4(jiti@2.6.1))
-      eslint-plugin-unicorn: 62.0.0(eslint@9.39.4(jiti@2.6.1))
+      eslint-plugin-jsdoc: 62.9.0(eslint@9.39.4(jiti@2.6.1))
+      eslint-plugin-regexp: 3.1.0(eslint@9.39.4(jiti@2.6.1))
+      eslint-plugin-unicorn: 63.0.0(eslint@9.39.4(jiti@2.6.1))
       eslint-plugin-vue: 10.8.0(@stylistic/eslint-plugin@5.10.0(eslint@9.39.4(jiti@2.6.1)))(@typescript-eslint/parser@8.57.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.4(jiti@2.6.1))(vue-eslint-parser@10.4.0(eslint@9.39.4(jiti@2.6.1)))
       eslint-processor-vue-blocks: 2.0.0(@vue/compiler-sfc@3.5.30)(eslint@9.39.4(jiti@2.6.1))
-      globals: 16.5.0
+      globals: 17.6.0
       local-pkg: 1.1.2
       pathe: 2.0.3
       vue-eslint-parser: 10.4.0(eslint@9.39.4(jiti@2.6.1))
@@ -6696,7 +6712,7 @@ snapshots:
       - supports-color
       - typescript
 
-  '@nuxt/eslint-plugin@1.10.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)':
+  '@nuxt/eslint-plugin@1.15.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 8.57.0
       '@typescript-eslint/utils': 8.57.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
@@ -6705,16 +6721,16 @@ snapshots:
       - supports-color
       - typescript
 
-  '@nuxt/eslint@1.10.0(@typescript-eslint/utils@8.57.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(@vue/compiler-sfc@3.5.30)(eslint@9.39.4(jiti@2.6.1))(magicast@0.5.2)(typescript@5.9.3)(vite@7.2.2(@types/node@24.12.0)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))':
+  '@nuxt/eslint@1.15.2(@typescript-eslint/utils@8.57.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(@vue/compiler-sfc@3.5.30)(eslint@9.39.4(jiti@2.6.1))(magicast@0.5.2)(typescript@5.9.3)(vite@7.2.2(@types/node@24.12.0)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@eslint/config-inspector': 1.5.0(eslint@9.39.4(jiti@2.6.1))
-      '@nuxt/devtools-kit': 3.1.0(magicast@0.5.2)(vite@7.2.2(@types/node@24.12.0)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
-      '@nuxt/eslint-config': 1.10.0(@typescript-eslint/utils@8.57.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(@vue/compiler-sfc@3.5.30)(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
-      '@nuxt/eslint-plugin': 1.10.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
+      '@nuxt/devtools-kit': 3.2.4(magicast@0.5.2)(vite@7.2.2(@types/node@24.12.0)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
+      '@nuxt/eslint-config': 1.15.2(@typescript-eslint/utils@8.57.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(@vue/compiler-sfc@3.5.30)(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
+      '@nuxt/eslint-plugin': 1.15.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
       '@nuxt/kit': 4.4.2(magicast@0.5.2)
-      chokidar: 4.0.3
+      chokidar: 5.0.0
       eslint: 9.39.4(jiti@2.6.1)
-      eslint-flat-config-utils: 2.1.4
+      eslint-flat-config-utils: 3.2.0
       eslint-typegen: 2.3.1(eslint@9.39.4(jiti@2.6.1))
       find-up: 8.0.0
       get-port-please: 3.2.0
@@ -7309,7 +7325,7 @@ snapshots:
   '@parcel/watcher-wasm@2.5.6':
     dependencies:
       is-glob: 4.0.3
-      picomatch: 4.0.3
+      picomatch: 4.0.4
 
   '@parcel/watcher-win32-arm64@2.5.6':
     optional: true
@@ -7325,7 +7341,7 @@ snapshots:
       detect-libc: 2.1.2
       is-glob: 4.0.3
       node-addon-api: 7.1.1
-      picomatch: 4.0.3
+      picomatch: 4.0.4
     optionalDependencies:
       '@parcel/watcher-android-arm64': 2.5.6
       '@parcel/watcher-darwin-arm64': 2.5.6
@@ -7455,10 +7471,10 @@ snapshots:
       '@rollup/pluginutils': 5.3.0(rollup@4.59.0)
       commondir: 1.0.1
       estree-walker: 2.0.2
-      fdir: 6.5.0(picomatch@4.0.3)
+      fdir: 6.5.0(picomatch@4.0.4)
       is-reference: 1.2.1
       magic-string: 0.30.21
-      picomatch: 4.0.3
+      picomatch: 4.0.4
     optionalDependencies:
       rollup: 4.59.0
 
@@ -7505,7 +7521,7 @@ snapshots:
     dependencies:
       '@types/estree': 1.0.8
       estree-walker: 2.0.2
-      picomatch: 4.0.3
+      picomatch: 4.0.4
     optionalDependencies:
       rollup: 4.59.0
 
@@ -7602,7 +7618,7 @@ snapshots:
       eslint-visitor-keys: 4.2.1
       espree: 10.4.0
       estraverse: 5.3.0
-      picomatch: 4.0.3
+      picomatch: 4.0.4
 
   '@swc/helpers@0.5.19':
     dependencies:
@@ -7864,6 +7880,8 @@ snapshots:
 
   '@typescript-eslint/types@8.57.0': {}
 
+  '@typescript-eslint/types@8.59.2': {}
+
   '@typescript-eslint/typescript-estree@8.57.0(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/project-service': 8.57.0(typescript@5.9.3)
@@ -7964,15 +7982,15 @@ snapshots:
     dependencies:
       '@mapbox/node-pre-gyp': 2.0.3
       '@rollup/pluginutils': 5.3.0(rollup@4.59.0)
-      acorn: 8.15.0
-      acorn-import-attributes: 1.9.5(acorn@8.15.0)
+      acorn: 8.16.0
+      acorn-import-attributes: 1.9.5(acorn@8.16.0)
       async-sema: 3.1.1
       bindings: 1.5.0
       estree-walker: 2.0.2
       glob: 10.5.0
       graceful-fs: 4.2.11
       node-gyp-build: 4.8.4
-      picomatch: 4.0.3
+      picomatch: 4.0.4
       resolve-from: 5.0.0
     transitivePeerDependencies:
       - encoding
@@ -8195,9 +8213,9 @@ snapshots:
     dependencies:
       event-target-shim: 5.0.1
 
-  acorn-import-attributes@1.9.5(acorn@8.15.0):
+  acorn-import-attributes@1.9.5(acorn@8.16.0):
     dependencies:
-      acorn: 8.15.0
+      acorn: 8.16.0
 
   acorn-jsx@5.3.2(acorn@8.15.0):
     dependencies:
@@ -8583,10 +8601,10 @@ snapshots:
 
   commander@2.20.3: {}
 
-  comment-parser@1.4.1: {}
-
   comment-parser@1.4.5: {}
 
+  comment-parser@1.4.6: {}
+
   commondir@1.0.1: {}
 
   compatx@0.2.0: {}
@@ -8949,8 +8967,9 @@ snapshots:
       '@eslint/compat': 2.0.3(eslint@9.39.4(jiti@2.6.1))
       eslint: 9.39.4(jiti@2.6.1)
 
-  eslint-flat-config-utils@2.1.4:
+  eslint-flat-config-utils@3.2.0:
     dependencies:
+      '@eslint/config-helpers': 0.5.5
       pathe: 2.0.3
 
   eslint-import-context@0.1.9(unrs-resolver@1.11.1):
@@ -8964,11 +8983,9 @@ snapshots:
     dependencies:
       eslint: 9.39.4(jiti@2.6.1)
 
-  eslint-plugin-import-lite@0.3.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3):
+  eslint-plugin-import-lite@0.5.2(eslint@9.39.4(jiti@2.6.1)):
     dependencies:
       eslint: 9.39.4(jiti@2.6.1)
-    optionalDependencies:
-      typescript: 5.9.3
 
   eslint-plugin-import-x@4.16.2(@typescript-eslint/utils@8.57.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.4(jiti@2.6.1)):
     dependencies:
@@ -8988,12 +9005,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-jsdoc@61.7.1(eslint@9.39.4(jiti@2.6.1)):
+  eslint-plugin-jsdoc@62.9.0(eslint@9.39.4(jiti@2.6.1)):
     dependencies:
-      '@es-joy/jsdoccomment': 0.78.0
+      '@es-joy/jsdoccomment': 0.86.0
       '@es-joy/resolve.exports': 1.2.0
       are-docs-informative: 0.0.2
-      comment-parser: 1.4.1
+      comment-parser: 1.4.6
       debug: 4.4.3
       escape-string-regexp: 4.0.0
       eslint: 9.39.4(jiti@2.6.1)
@@ -9008,28 +9025,26 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-regexp@2.10.0(eslint@9.39.4(jiti@2.6.1)):
+  eslint-plugin-regexp@3.1.0(eslint@9.39.4(jiti@2.6.1)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.4(jiti@2.6.1))
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.4(jiti@2.6.1))
       '@eslint-community/regexpp': 4.12.2
       comment-parser: 1.4.5
       eslint: 9.39.4(jiti@2.6.1)
-      jsdoc-type-pratt-parser: 4.8.0
+      jsdoc-type-pratt-parser: 7.0.0
       refa: 0.12.1
       regexp-ast-analysis: 0.7.1
       scslre: 0.3.0
 
-  eslint-plugin-unicorn@62.0.0(eslint@9.39.4(jiti@2.6.1)):
+  eslint-plugin-unicorn@63.0.0(eslint@9.39.4(jiti@2.6.1)):
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.4(jiti@2.6.1))
-      '@eslint/plugin-kit': 0.4.1
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.4(jiti@2.6.1))
       change-case: 5.4.4
       ci-info: 4.4.0
       clean-regexp: 1.0.0
       core-js-compat: 3.48.0
       eslint: 9.39.4(jiti@2.6.1)
-      esquery: 1.7.0
       find-up-simple: 1.0.1
       globals: 16.5.0
       indent-string: 5.0.0
@@ -9043,7 +9058,7 @@ snapshots:
 
   eslint-plugin-vue@10.8.0(@stylistic/eslint-plugin@5.10.0(eslint@9.39.4(jiti@2.6.1)))(@typescript-eslint/parser@8.57.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.4(jiti@2.6.1))(vue-eslint-parser@10.4.0(eslint@9.39.4(jiti@2.6.1))):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.4(jiti@2.6.1))
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.4(jiti@2.6.1))
       eslint: 9.39.4(jiti@2.6.1)
       natural-compare: 1.4.0
       nth-check: 2.1.1
@@ -9215,6 +9230,10 @@ snapshots:
     optionalDependencies:
       picomatch: 4.0.3
 
+  fdir@6.5.0(picomatch@4.0.4):
+    optionalDependencies:
+      picomatch: 4.0.4
+
   file-entry-cache@8.0.0:
     dependencies:
       flat-cache: 4.0.1
@@ -9358,6 +9377,8 @@ snapshots:
 
   globals@16.5.0: {}
 
+  globals@17.6.0: {}
+
   globby@15.0.0:
     dependencies:
       '@sindresorhus/merge-streams': 4.0.0
@@ -9560,10 +9581,10 @@ snapshots:
     dependencies:
       argparse: 2.0.1
 
-  jsdoc-type-pratt-parser@4.8.0: {}
-
   jsdoc-type-pratt-parser@7.0.0: {}
 
+  jsdoc-type-pratt-parser@7.2.0: {}
+
   jsesc@3.1.0: {}
 
   json-buffer@3.0.1: {}
@@ -10829,7 +10850,7 @@ snapshots:
   rollup-plugin-visualizer@6.0.11(rollup@4.59.0):
     dependencies:
       open: 8.4.2
-      picomatch: 4.0.3
+      picomatch: 4.0.4
       source-map: 0.7.6
       yargs: 17.7.2
     optionalDependencies:
@@ -11162,7 +11183,7 @@ snapshots:
   terser@5.46.0:
     dependencies:
       '@jridgewell/source-map': 0.3.11
-      acorn: 8.15.0
+      acorn: 8.16.0
       commander: 2.20.3
       source-map-support: 0.5.21
 
@@ -11284,7 +11305,7 @@ snapshots:
       magic-string: 0.30.21
       mlly: 1.8.1
       pathe: 2.0.3
-      picomatch: 4.0.3
+      picomatch: 4.0.4
       pkg-types: 2.3.0
       scule: 1.3.0
       strip-literal: 3.1.0
@@ -11307,7 +11328,7 @@ snapshots:
   unplugin-utils@0.3.1:
     dependencies:
       pathe: 2.0.3
-      picomatch: 4.0.3
+      picomatch: 4.0.4
 
   unplugin-vue-components@30.0.0(@babel/parser@7.29.0)(@nuxt/kit@4.4.2(magicast@0.5.2))(vue@3.5.30(typescript@5.9.3)):
     dependencies:
@@ -11361,7 +11382,7 @@ snapshots:
   unplugin@3.0.0:
     dependencies:
       '@jridgewell/remapping': 2.3.5
-      picomatch: 4.0.3
+      picomatch: 4.0.4
       webpack-virtual-modules: 0.6.2
 
   unrs-resolver@1.11.1:
@@ -11488,7 +11509,7 @@ snapshots:
       chokidar: 4.0.3
       npm-run-path: 6.0.0
       picocolors: 1.1.1
-      picomatch: 4.0.3
+      picomatch: 4.0.4
       tiny-invariant: 1.3.3
       tinyglobby: 0.2.15
       vite: 7.2.2(@types/node@24.12.0)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
@@ -11528,8 +11549,8 @@ snapshots:
   vite@7.2.2(@types/node@24.12.0)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2):
     dependencies:
       esbuild: 0.25.12
-      fdir: 6.5.0(picomatch@4.0.3)
-      picomatch: 4.0.3
+      fdir: 6.5.0(picomatch@4.0.4)
+      picomatch: 4.0.4
       postcss: 8.5.8
       rollup: 4.59.0
       tinyglobby: 0.2.15
diff --git a/prisma.config.ts b/prisma.config.ts
index 7679ad0..7f8554c 100644
--- a/prisma.config.ts
+++ b/prisma.config.ts
@@ -1,17 +1,16 @@
-import path from "node:path";
-import type { PrismaConfig } from "prisma";
-import dotenv from "dotenv";
+import path from 'node:path'
+import type { PrismaConfig } from 'prisma'
+import dotenv from 'dotenv'
 
-
-dotenv.config();
+dotenv.config()
 
 export default {
-	schema: path.join("prisma", "schema"),
-	migrations: {
-		path: path.join("prisma", "migrations"),
-		seed: "tsx ./server/utils/seed.ts",
-	},
-	datasource: {
-		url: process.env.DATABASE_URL || "file:./prisma/dev.db"
-	}
-} satisfies PrismaConfig;
+  schema: path.join('prisma', 'schema'),
+  migrations: {
+    path: path.join('prisma', 'migrations'),
+    seed: 'tsx ./server/utils/seed.ts',
+  },
+  datasource: {
+    url: process.env.DATABASE_URL || 'file:./prisma/dev.db',
+  },
+} satisfies PrismaConfig
diff --git a/prisma/schema/user.prisma b/prisma/schema/user.prisma
index ce38990..775228b 100644
--- a/prisma/schema/user.prisma
+++ b/prisma/schema/user.prisma
@@ -17,6 +17,8 @@ model User_Notification {
   notification   Notification @relation(fields: [notificationId], references: [id])
   notificationId String
 
+  isRead        Boolean       @default(false)
+
   @@id([userId, notificationId])
   @@map("user_notifications")
 }
diff --git a/prisma/seed/events.json b/prisma/seed/events.json
index ea4a9f6..675b687 100644
--- a/prisma/seed/events.json
+++ b/prisma/seed/events.json
@@ -4,8 +4,8 @@
       "title": "Childcare Conference",
       "shortDesc": "A conference on childcare best practices",
       "description": "A conference bringing together childcare professionals.",
-      "startTime": "2025-12-15T09:00:00.000Z",
-      "endTime": "2025-12-15T17:00:00.000Z",
+      "startTime": "2027-12-15T09:00:00.000Z",
+      "endTime": "2027-12-15T17:00:00.000Z",
       "location": {
         "longitude": 9.896875,
         "latitude": 32.77659,
@@ -20,8 +20,8 @@
       "title": "Health and Wellness Fair",
       "shortDesc": "A fair promoting health and wellness in the community",
       "description": "An event focused on health screenings and wellness education.",
-      "startTime": "2025-12-20T10:00:00.000Z",
-      "endTime": "2025-12-20T15:00:00.000Z",
+      "startTime": "2027-12-20T10:00:00.000Z",
+      "endTime": "2027-12-20T15:00:00.000Z",
       "location": {
         "longitude": 9.896875,
         "latitude": 32.77659,
@@ -36,8 +36,8 @@
       "title": "Maternity Awareness",
       "shortDesc": "Maternity problems and their solutions",
       "description": "A presentation increasing awareness of maternity problems and their solutions",
-      "startTime": "2025-12-21T10:00:00.000Z",
-      "endTime": "2025-12-21T15:00:00.000Z",
+      "startTime": "2027-12-21T10:00:00.000Z",
+      "endTime": "2027-12-21T15:00:00.000Z",
       "location": {
         "longitude": 9.896875,
         "latitude": 32.77659,
diff --git a/prisma/seed/notifications.json b/prisma/seed/notifications.json
index 9b0dc28..0f27671 100644
--- a/prisma/seed/notifications.json
+++ b/prisma/seed/notifications.json
@@ -1,9 +1,7 @@
 [
     {
-        "id": 1,
-        "message": "Welcome to our service!",
-        "userId": 1,
-        "isRead": false,
-        "createdAt": "2024-01-01T10:00:00Z"
+        "id": "notif-1",
+        "title": "Welcome message",
+        "content": "Welcome to our service!"
     }
 ]
\ No newline at end of file
diff --git a/server/api/admin/donations/[id]/image.get.ts b/server/api/admin/donations/[id]/image.get.ts
index adc25d7..61b551d 100644
--- a/server/api/admin/donations/[id]/image.get.ts
+++ b/server/api/admin/donations/[id]/image.get.ts
@@ -14,24 +14,29 @@ export default defineEventHandler(async (event) => {
     process.env.IMAGE_STORAGE_PATH || 'public/images',
     'donations',
     id,
-    donation.imageUrl
+    donation.imageUrl,
   )
-console.log('looking for:', filePath)
-console.log('exists:', fs.existsSync(filePath))
+  console.log('looking for:', filePath)
+  console.log('exists:', fs.existsSync(filePath))
 
   if (!fs.existsSync(filePath)) {
     throw createError({ statusCode: 404, statusMessage: 'File not found' })
   }
 
   const ext = path.extname(filePath).toLowerCase()
-  const mime =
-    ext === '.png' ? 'image/png' :
-    ext === '.jpg' || ext === '.jpeg' ? 'image/jpeg' :
-    ext === '.gif' ? 'image/gif' :
-    ext === '.webp' ? 'image/webp' :
-    ext === '.avif' ? 'image/avif' :
-    'application/octet-stream'
+  const mime
+    = ext === '.png'
+      ? 'image/png'
+      : ext === '.jpg' || ext === '.jpeg'
+        ? 'image/jpeg'
+        : ext === '.gif'
+          ? 'image/gif'
+          : ext === '.webp'
+            ? 'image/webp'
+            : ext === '.avif'
+              ? 'image/avif'
+              : 'application/octet-stream'
 
   setHeader(event, 'Content-Type', mime)
   return sendStream(event, fs.createReadStream(filePath))
-})
\ No newline at end of file
+})
diff --git a/server/api/admin/donations/[id]/image.post.ts b/server/api/admin/donations/[id]/image.post.ts
index 3222c17..076c42a 100644
--- a/server/api/admin/donations/[id]/image.post.ts
+++ b/server/api/admin/donations/[id]/image.post.ts
@@ -39,10 +39,10 @@ export default defineEventHandler(async (event) => {
   const uniqueFilename = `${randomUUID()}${ext}`
   const filePath = path.join(dirPath, uniqueFilename)
 
-console.log('filename:', file.filename)
-console.log('ext:', ext)
-console.log('uniqueFilename:', uniqueFilename)
-console.log('saving to:', filePath)
+  console.log('filename:', file.filename)
+  console.log('ext:', ext)
+  console.log('uniqueFilename:', uniqueFilename)
+  console.log('saving to:', filePath)
 
   fs.writeFileSync(filePath, file.data)
 
@@ -55,4 +55,4 @@ console.log('saving to:', filePath)
 
   setResponseStatus(event, 201)
   return { message: 'Image uploaded.', imageUrl }
-})
\ No newline at end of file
+})
diff --git a/server/api/admin/donations/[id]/index.delete.ts b/server/api/admin/donations/[id]/index.delete.ts
index d040ed7..0538b7f 100644
--- a/server/api/admin/donations/[id]/index.delete.ts
+++ b/server/api/admin/donations/[id]/index.delete.ts
@@ -13,4 +13,4 @@ export default defineEventHandler(async (event) => {
   return prisma.donation.delete({
     where: { id },
   })
-})
\ No newline at end of file
+})
diff --git a/server/api/admin/donations/[id]/index.put.ts b/server/api/admin/donations/[id]/index.put.ts
index 2d5d4ed..f2a01cd 100644
--- a/server/api/admin/donations/[id]/index.put.ts
+++ b/server/api/admin/donations/[id]/index.put.ts
@@ -22,4 +22,4 @@ export default defineEventHandler(async (event) => {
       imageUrl: body.imageUrl,
     },
   })
-})
\ No newline at end of file
+})
diff --git a/server/api/admin/donations/index.get.ts b/server/api/admin/donations/index.get.ts
index 8d62a34..e3fb72a 100644
--- a/server/api/admin/donations/index.get.ts
+++ b/server/api/admin/donations/index.get.ts
@@ -2,4 +2,4 @@ import prisma from '~~/server/utils/prisma'
 
 export default defineEventHandler(async () => {
   return prisma.donation.findMany({ orderBy: { createdAt: 'desc' } })
-})
\ No newline at end of file
+})
diff --git a/server/api/admin/donations/index.post.ts b/server/api/admin/donations/index.post.ts
index 595e11d..eab4514 100644
--- a/server/api/admin/donations/index.post.ts
+++ b/server/api/admin/donations/index.post.ts
@@ -12,4 +12,4 @@ export default defineEventHandler(async (event) => {
       imageUrl: '',
     },
   })
-})
\ No newline at end of file
+})
diff --git a/server/api/auth/get-session.get.ts b/server/api/auth/get-session.get.ts
index 473d135..9cc4b51 100644
--- a/server/api/auth/get-session.get.ts
+++ b/server/api/auth/get-session.get.ts
@@ -1,6 +1,6 @@
-import { auth } from "~~/server/utils/auth";
+import { auth } from '~~/server/utils/auth'
 
 export default defineEventHandler(async (event) => {
-    const session = await auth.api.getSession({ headers: event.headers });
-    return session;
-});
\ No newline at end of file
+  const session = await auth.api.getSession({ headers: event.headers })
+  return session
+})
diff --git a/server/api/auth/login.post.ts b/server/api/auth/login.post.ts
index 7aff3a1..0d89f66 100644
--- a/server/api/auth/login.post.ts
+++ b/server/api/auth/login.post.ts
@@ -1,37 +1,39 @@
-import { auth } from "~~/server/utils/auth";
-import type { H3Event } from "h3";
-import { appendHeader, setHeader } from "h3";
+import { auth } from '~~/server/utils/auth'
+import type { H3Event } from 'h3'
+import { appendHeader, setHeader } from 'h3'
 
 const forwardAuthHeaders = (event: H3Event, headers?: Headers) => {
   if (!headers) {
-    return;
+    return
   }
   headers.forEach((value, key) => {
-    if (key.toLowerCase() === "set-cookie") {
-      appendHeader(event, "set-cookie", value);
-    } else {
-      setHeader(event, key, value);
+    if (key.toLowerCase() === 'set-cookie') {
+      appendHeader(event, 'set-cookie', value)
     }
-  });
-};
+    else {
+      setHeader(event, key, value)
+    }
+  })
+}
 
 export default defineEventHandler(async (event) => {
-    try {
-        const { email, password } = await readBody(event);
+  try {
+    const { email, password } = await readBody(event)
 
-        const { response, headers } = await auth.api.signInEmail({
-            body: { email, password },
-            headers: event.headers,
-            returnHeaders: true,
-        });
-        forwardAuthHeaders(event, headers);
+    const { response, headers } = await auth.api.signInEmail({
+      body: { email, password },
+      headers: event.headers,
+      returnHeaders: true,
+    })
+    forwardAuthHeaders(event, headers)
 
-        return { success: true, ...response };
-    } catch (error: unknown) {
-        console.log(error);
-        throw createError({
-            statusCode: (error as { statusCode: number }).statusCode,
-            statusMessage: (error as { body: { message: string} }).body?.message || "An unexpected error occurred",
-        });
-    }
-});
+    return { success: true, ...response }
+  }
+  catch (error: unknown) {
+    console.log(error)
+    throw createError({
+      statusCode: (error as { statusCode: number }).statusCode,
+      statusMessage: (error as { body: { message: string } }).body?.message || 'An unexpected error occurred',
+    })
+  }
+})
diff --git a/server/api/auth/sign-up.post.ts b/server/api/auth/sign-up.post.ts
index 5c5cff7..96b2b09 100644
--- a/server/api/auth/sign-up.post.ts
+++ b/server/api/auth/sign-up.post.ts
@@ -1,82 +1,84 @@
-import { auth } from "~~/server/utils/auth";
-import prisma from "~~/server/utils/prisma";
-import type { Language, Availability } from "~~/server/utils/generated/prisma/client";
-import type { H3Event } from "h3";
-import { appendHeader, setHeader } from "h3";
+import { auth } from '~~/server/utils/auth'
+import prisma from '~~/server/utils/prisma'
+import type { Language, Availability } from '~~/server/utils/generated/prisma/client'
+import type { H3Event } from 'h3'
+import { appendHeader, setHeader } from 'h3'
 
 const forwardAuthHeaders = (event: H3Event, headers?: Headers) => {
-    if (!headers) {
-        return;
+  if (!headers) {
+    return
+  }
+  headers.forEach((value, key) => {
+    if (key.toLowerCase() === 'set-cookie') {
+      appendHeader(event, 'set-cookie', value)
     }
-    headers.forEach((value, key) => {
-        if (key.toLowerCase() === "set-cookie") {
-            appendHeader(event, "set-cookie", value);
-        } else {
-            setHeader(event, key, value);
-        }
-    });
-};
+    else {
+      setHeader(event, key, value)
+    }
+  })
+}
 
 export default defineEventHandler(async (event) => {
-    try {
-        const {
-            name,
-            email,
-            password,
-            phone,
-            languages = [],
-            gender,
-            ethinicity,
-            availability = [],
-        } = await readBody(event);
-        const selectedLanguages = languages as Language[];
-        const selectedAvailability = availability as Availability[];
-        // Sign up user with better-auth
-        const { response, headers } = await auth.api.signUpEmail({
-            body: { name, email, password },
-            headers: event.headers,
-            returnHeaders: true,
-        });
-        forwardAuthHeaders(event, headers);
+  try {
+    const {
+      name,
+      email,
+      password,
+      phone,
+      languages = [],
+      gender,
+      ethinicity,
+      availability = [],
+    } = await readBody(event)
+    const selectedLanguages = languages as Language[]
+    const selectedAvailability = availability as Availability[]
+    // Sign up user with better-auth
+    const { response, headers } = await auth.api.signUpEmail({
+      body: { name, email, password },
+      headers: event.headers,
+      returnHeaders: true,
+    })
+    forwardAuthHeaders(event, headers)
 
-        // Create user and volunteer records in transaction
-        await prisma.$transaction(async (tx) => {
-            const createdUser = await tx.user.create({
-                data: {
-                    name: name as string | undefined,
-                    contactEmail: email as string,
-                    phone: phone as string | undefined,
-                },
-            });
+    // Create user and volunteer records in transaction
+    await prisma.$transaction(async (tx) => {
+      const createdUser = await tx.user.create({
+        data: {
+          name: name as string | undefined,
+          contactEmail: email as string,
+          phone: phone as string | undefined,
+        },
+      })
 
-            await tx.volunteer.update({
-                where: { id: response.user.id },
-                data: {
-                    name: name as string | undefined,
-                    phone: phone as string | undefined,
-                    userId: createdUser.id,
-                    languages: {
-                        create: selectedLanguages.map((language) => ({
-                            language,
-                        })),
-                    },
-                    availabilities: {
-                        create: selectedAvailability.map((time) => ({
-                            availability: time,
-                        })),
-                    },
-                    gender: gender.id,
-                    ethinicity: ethinicity.id,
-                },
-            });
-        });
+      await tx.volunteer.update({
+        where: { id: response.user.id },
+        data: {
+          name: name as string | undefined,
+          phone: phone as string | undefined,
+          userId: createdUser.id,
+          languages: {
+            create: selectedLanguages.map(language => ({
+              language,
+            })),
+          },
+          availabilities: {
+            create: selectedAvailability.map(time => ({
+              availability: time,
+            })),
+          },
+          gender: gender.id,
+          ethinicity: ethinicity.id,
+        },
+      })
+    })
 
-        return { success: true, user: response.user };
-    } catch (error: unknown) {
-        console.log(error);
-        throw createError({
-            statusCode: (error as { statusCode: number }).statusCode,
-            statusMessage: (error as { body: { message: string} }).body?.message || "An unexpected error occurred",
-        });
-    }
-});
+    return { success: true, user: response.user }
+  }
+  catch (error: unknown) {
+    console.log(error)
+    throw createError({
+      statusCode: (error as { statusCode: number }).statusCode,
+      statusMessage: (error as { body: { message: string } }).body?.message || 'An unexpected error occurred',
+    })
+  }
+})
diff --git a/server/api/events/[id]/images/[name].get.ts b/server/api/events/[id]/images/[name].get.ts
index af6d949..f82bb86 100644
--- a/server/api/events/[id]/images/[name].get.ts
+++ b/server/api/events/[id]/images/[name].get.ts
@@ -6,22 +6,22 @@ export default defineEventHandler(async (event) => {
   const eventID = getRouterParam(event, 'id')
 
   if (!fileName) {
-    throw createError({ statusCode: 400, statusMessage: "Missing fileName" })
+    throw createError({ statusCode: 400, statusMessage: 'Missing fileName' })
   }
 
-  if(!eventID) {
-    throw createError({ statusCode: 400, statusMessage: "Missing eventID" })
+  if (!eventID) {
+    throw createError({ statusCode: 400, statusMessage: 'Missing eventID' })
   }
 
   // Get file path relative to project root
   const filePath = path.join(
-    process.env.IMAGE_STORAGE_PATH || "public/images", 
-    eventID, 
-    fileName
+    process.env.IMAGE_STORAGE_PATH || 'public/images',
+    eventID,
+    fileName,
   )
 
   if (!fs.existsSync(filePath)) {
-    throw createError({ statusCode: 404, statusMessage: "File not found" })
+    throw createError({ statusCode: 404, statusMessage: 'File not found' })
   }
 
   const fileStream = fs.createReadStream(filePath)
@@ -29,14 +29,18 @@ export default defineEventHandler(async (event) => {
   // Set content type based on file extension
   const ext = path.extname(filePath).toLowerCase()
 
-  const mime =
-    ext === ".png" ? "image/png" :
-    ext === ".jpg" || ext === ".jpeg" ? "image/jpeg" :
-    ext === ".gif" ? "image/gif" :
-    ext === ".webp" ? "image/webp" :
-    "application/octet-stream"
+  const mime
+    = ext === '.png'
+      ? 'image/png'
+      : ext === '.jpg' || ext === '.jpeg'
+        ? 'image/jpeg'
+        : ext === '.gif'
+          ? 'image/gif'
+          : ext === '.webp'
+            ? 'image/webp'
+            : 'application/octet-stream'
 
-  setHeader(event, "Content-Type", mime)
+  setHeader(event, 'Content-Type', mime)
 
   return sendStream(event, fileStream)
-})
\ No newline at end of file
+})
diff --git a/server/api/events/[id]/images/upload.post.ts b/server/api/events/[id]/images/upload.post.ts
index f110577..a2af9f8 100644
--- a/server/api/events/[id]/images/upload.post.ts
+++ b/server/api/events/[id]/images/upload.post.ts
@@ -5,20 +5,19 @@ import prisma from '~~/server/utils/prisma'
 export default defineEventHandler(async (event) => {
   const id = getRouterParam(event, 'id')
   const form = await readMultipartFormData(event)
-  
 
   if (!id) {
     throw createError({ statusCode: 400, message: 'Missing event ID' })
   }
 
   if (!form) {
-    throw createError({ statusCode: 400, statusMessage: "No form data" })
+    throw createError({ statusCode: 400, statusMessage: 'No form data' })
   }
 
-  const file = form.find(i => i.name === "file")
+  const file = form.find(i => i.name === 'file')
 
   if (!file || !file.data) {
-    throw createError({ statusCode: 400, statusMessage: "File missing" })
+    throw createError({ statusCode: 400, statusMessage: 'File missing' })
   }
 
   const foundEvent = await prisma.event.findUnique({
@@ -31,13 +30,19 @@ export default defineEventHandler(async (event) => {
   }
 
   // Save file to public/images
-  const dirPath = path.join(process.env.IMAGE_STORAGE_PATH || "public/images", id)
+  const dirPath = path.join(
+    process.env.IMAGE_STORAGE_PATH || 'public/images',
+    id,
+  )
 
   if (!fs.existsSync(dirPath)) {
     fs.mkdirSync(dirPath, { recursive: true })
   }
 
-  const filePath = path.join(dirPath, decodeURIComponent(file.filename || "failed.png"))
+  const filePath = path.join(
+    dirPath,
+    decodeURIComponent(file.filename || 'failed.png'),
+  )
 
   if (fs.existsSync(filePath)) {
     throw createError({ statusCode: 400, message: 'Image already exists.' })
@@ -51,20 +56,20 @@ export default defineEventHandler(async (event) => {
     },
     data: {
       eventAssets: {
-        create: [{
-          imageUrl: path.join(id, file.filename || "failed.png")
-        }]
-      }
-    }
+        create: [
+          {
+            imageUrl: path.join(id, 'images', file.filename || 'failed.png'),
+          },
+        ],
+      },
+    },
   })
 
   console.log(addedImage)
-  
 
-  setResponseStatus(event, 201);
+  setResponseStatus(event, 201)
 
   return {
-    message: "Added file to event."
+    message: 'Added file to event.',
   }
-
 })
diff --git a/server/api/events/[id]/index.get.ts b/server/api/events/[id]/index.get.ts
index 96a5c51..f492d15 100644
--- a/server/api/events/[id]/index.get.ts
+++ b/server/api/events/[id]/index.get.ts
@@ -9,7 +9,7 @@ export default defineEventHandler(async (event) => {
 
   const foundEvent = await prisma.event.findUnique({
     where: { id },
-    include: { 
+    include: {
       eventAssets: true,
       location: true,
     },
diff --git a/server/api/events/[id]/index.patch.ts b/server/api/events/[id]/index.patch.ts
index 071a259..f23b652 100644
--- a/server/api/events/[id]/index.patch.ts
+++ b/server/api/events/[id]/index.patch.ts
@@ -1,4 +1,4 @@
-import prisma from "~~/server/utils/prisma";
+import prisma from '~~/server/utils/prisma'
 
 // Geocode location using Nominatim
 async function geocodeLocation(location: string) {
@@ -7,47 +7,48 @@ async function geocodeLocation(location: string) {
       `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(location)}`,
       {
         headers: {
-          "User-Agent": "Abide-Connect/1.0",
+          'User-Agent': 'Abide-Connect/1.0',
         },
       },
-    );
+    )
 
     if (!response.ok) {
-      console.warn(`Nominatim API error: ${response.status}`);
-      return null;
+      console.warn(`Nominatim API error: ${response.status}`)
+      return null
     }
 
-    const results = await response.json();
+    const results = await response.json()
 
     if (results.length === 0) {
-      console.warn(`No geocoding results found for: ${location}`);
-      return null;
+      console.warn(`No geocoding results found for: ${location}`)
+      return null
     }
 
-    const topResult = results[0];
+    const topResult = results[0]
 
     return {
       latitude: parseFloat(topResult.lat),
       longitude: parseFloat(topResult.lon),
       address: location,
-    };
-  } catch (error) {
-    console.error("❌ Geocoding error:", error);
-    return null;
+    }
+  }
+  catch (error) {
+    console.error('❌ Geocoding error:', error)
+    return null
   }
 }
 
 export default defineEventHandler(async (event) => {
-  const id = getRouterParam(event, "id");
-  const body = await readBody(event);
+  const id = getRouterParam(event, 'id')
+  const body = await readBody(event)
 
   if (!id) {
-    throw createError({ statusCode: 400, message: "Missing event ID" });
+    throw createError({ statusCode: 400, message: 'Missing event ID' })
   }
 
-  //check if location has already been fetched
-  const locationData =
-    (await prisma.location.findUnique({
+  // check if location has already been fetched
+  const locationData
+    = (await prisma.location.findUnique({
       where: {
         address: body.location.address || null,
       },
@@ -56,32 +57,32 @@ export default defineEventHandler(async (event) => {
         longitude: true,
         address: true,
       },
-    })) || (await geocodeLocation(body.location.address));
+    })) || (await geocodeLocation(body.location.address))
 
   if (!locationData) {
     throw createError({
       statusCode: 500,
-      message: "Failed to retrieve or create location data",
-    });
+      message: 'Failed to retrieve or create location data',
+    })
   }
 
-  console.log("📍 Location data from DB:", locationData);
+  console.log('📍 Location data from DB:', locationData)
 
   if (!locationData) {
     throw createError({
       statusCode: 400,
-      message: "Invalid location provided and geocoding failed",
-    });
+      message: 'Invalid location provided and geocoding failed',
+    })
   }
 
   try {
     // Check if event exists
     const foundEvent = await prisma.event.findUnique({
       where: { id },
-    });
+    })
 
     if (!foundEvent) {
-      throw createError({ statusCode: 404, message: "Event not found" });
+      throw createError({ statusCode: 404, message: 'Event not found' })
     }
 
     // Update the event
@@ -101,15 +102,16 @@ export default defineEventHandler(async (event) => {
       include: {
         eventAssets: true,
       },
-    });
+    })
 
-    console.log("✅ Event updated:", updatedEvent);
-    return updatedEvent;
-  } catch (error) {
-    console.error("❌ Error updating event:", error);
+    console.log('✅ Event updated:', updatedEvent)
+    return updatedEvent
+  }
+  catch (error) {
+    console.error('❌ Error updating event:', error)
     throw createError({
       statusCode: 500,
-      message: "Failed to update event",
-    });
+      message: 'Failed to update event',
+    })
   }
-});
+})
diff --git a/server/api/events/index.get.ts b/server/api/events/index.get.ts
index 444c4ae..bb36201 100644
--- a/server/api/events/index.get.ts
+++ b/server/api/events/index.get.ts
@@ -1,25 +1,27 @@
-import prisma from "~~/server/utils/prisma";
+import prisma from '~~/server/utils/prisma'
 
 export default defineEventHandler(async (_event) => {
   try {
     const allEvents = await prisma.event.findMany({
       include: {
+        location: true,
         eventAssets: true,
         volunteerHours: true,
         participants: true,
       },
       orderBy: {
-        startTime: "asc",
+        startTime: 'asc',
       },
-    });
+    })
 
-    console.log(`Fetched ${allEvents.length} events`);
-    return allEvents;
-  } catch (e) {
-    console.error(e);
+    console.log(`Fetched ${allEvents.length} events`)
+    return allEvents
+  }
+  catch (error) {
+    console.error('Error fetching events:', error)
     throw createError({
       statusCode: 500,
-      message: "Failed to fetch events",
-    });
+      message: 'Failed to fetch events',
+    })
   }
-});
+})
diff --git a/server/api/events/index.post.ts b/server/api/events/index.post.ts
index d0d3d15..b789df4 100644
--- a/server/api/events/index.post.ts
+++ b/server/api/events/index.post.ts
@@ -7,33 +7,32 @@ async function geocodeLocation(location: string) {
       `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(location)}`,
       {
         headers: {
-          'User-Agent': 'Abide-Connect/1.0'
-        }
-      }
+          'User-Agent': 'Abide-Connect/1.0',
+        },
+      },
     )
-    
+
     if (!response.ok) {
       console.warn(`Nominatim API error: ${response.status}`)
       return null
     }
 
     const results = await response.json()
-    
+
     if (results.length === 0) {
       console.warn(`No geocoding results found for: ${location}`)
       return null
     }
 
     const topResult = results[0]
-    console.log("latitude:", parseFloat(topResult.lat), "longitude:", parseFloat(topResult.lon))
+    console.log('latitude:', parseFloat(topResult.lat), 'longitude:', parseFloat(topResult.lon))
     return {
       latitude: parseFloat(topResult.lat),
       longitude: parseFloat(topResult.lon),
-      address: location
+      address: location,
     }
-    
-      
-  } catch (error) {
+  }
+  catch (error) {
     console.error('❌ Geocoding error:', error)
     return null
   }
@@ -44,31 +43,30 @@ export default defineEventHandler(async (event) => {
 
   // Validate required fields
   if (!body.title || !body.startTime || !body.endTime) {
-    throw createError({ 
-      statusCode: 400, 
-      message: 'Missing required fields: title, startTime, endTime' 
+    throw createError({
+      statusCode: 400,
+      message: 'Missing required fields: title, startTime, endTime',
     })
   }
 
-  //check if location has already been fetched
+  // check if location has already been fetched
   const locationData = await prisma.location.findUnique({
     where: {
-      address: body.location || null
+      address: body.location || null,
     },
     select: {
       latitude: true,
       longitude: true,
-      address: true
-    }
+      address: true,
+    },
   }) || await geocodeLocation(body.location)
 
   console.log('📍 Location data from DB:', locationData)
 
-
   if (!locationData) {
-    throw createError({ 
-      statusCode: 400, 
-      message: 'Invalid location provided and geocoding failed' 
+    throw createError({
+      statusCode: 400,
+      message: 'Invalid location provided and geocoding failed',
     })
   }
 
@@ -82,10 +80,10 @@ export default defineEventHandler(async (event) => {
         location: {
           connectOrCreate: {
             where: {
-              address: body.location || null
+              address: body.location || null,
             },
-            create: locationData!
-          }
+            create: locationData!,
+          },
         },
         startTime: new Date(body.startTime),
         endTime: new Date(body.endTime),
@@ -93,20 +91,20 @@ export default defineEventHandler(async (event) => {
         allowAttendees: body.allowAttendees || false,
       },
       include: {
-        eventAssets: true
-      }
+        eventAssets: true,
+      },
     })
 
     console.log('✅ Event created:', newEvent)
 
     setResponseStatus(event, 201)
     return newEvent
-    
-  } catch (error) {
+  }
+  catch (error) {
     console.error('❌ Error creating event:', error)
-    throw createError({ 
-      statusCode: 500, 
-      message: 'Failed to create event' 
+    throw createError({
+      statusCode: 500,
+      message: 'Failed to create event',
     })
   }
-})
\ No newline at end of file
+})
diff --git a/server/api/notification/[id].get.ts b/server/api/notification/[id].get.ts
new file mode 100644
index 0000000..4636cda
--- /dev/null
+++ b/server/api/notification/[id].get.ts
@@ -0,0 +1,61 @@
+import prisma from '~~/server/utils/prisma'
+
+export default eventHandler(async (event) => {
+  try {
+    const session = await auth.api.getSession({ headers: event.headers })
+    if (!session) {
+      throw createError({
+        statusCode: 401,
+        statusMessage: 'Unauthorized',
+      })
+    }
+    const volunteerId = session.user.id
+    const user = await prisma.volunteer.findUnique({
+      where: {
+        id: volunteerId,
+      },
+      select: {
+        userId: true,
+      },
+    })
+    const notifications = await prisma.notification.findMany({
+      where: {
+        users: {
+          some: {
+            userId: user?.userId ?? 'default',
+          },
+        },
+      },
+      include: {
+        users: {
+          where: {
+            userId: user?.userId ?? 'default',
+          },
+          select: {
+            isRead: true,
+          },
+        },
+      },
+      orderBy: {
+        createdAt: 'desc',
+      },
+    })
+    console.log(notifications)
+
+    // format the response
+    const formattedNotifications = notifications.map(notification => ({
+      id: notification.id,
+      title: notification.title,
+      content: notification.content,
+      createdAt: notification.createdAt,
+      isRead: notification.users[0]?.isRead || false,
+    }))
+    return {
+      success: true,
+      notifications: formattedNotifications,
+    }
+  }
+  catch (error) {
+    console.error('Error fetching notifications:', error)
+  }
+})
diff --git a/server/api/volunteer-logs/[id].patch.ts b/server/api/volunteer-logs/[id].patch.ts
index ce6765f..7d0eba2 100644
--- a/server/api/volunteer-logs/[id].patch.ts
+++ b/server/api/volunteer-logs/[id].patch.ts
@@ -1,4 +1,4 @@
-import prisma from "~~/server/utils/prisma";
+import prisma from '~~/server/utils/prisma'
 
 export default eventHandler(async (event) => {
   try {
@@ -9,7 +9,7 @@ export default eventHandler(async (event) => {
     if (!id || !status) {
       throw createError({
         statusCode: 400,
-        statusMessage: "Log ID and status are required"
+        statusMessage: 'Log ID and status are required',
       })
     }
 
@@ -17,19 +17,20 @@ export default eventHandler(async (event) => {
       where: { id: Number(id) },
       data: {
         approvalStatus: status,
-        comment: comment ?? null
-      }
+        comment: comment ?? null,
+      },
     })
 
     return {
       success: true,
-      log: updated
+      log: updated,
     }
-  } catch (error) {
+  }
+  catch (error) {
     throw createError({
       statusCode: 500,
-      statusMessage: "Failed to update volunteer log",
-      cause: error
+      statusMessage: 'Failed to update volunteer log',
+      cause: error,
     })
   }
-})
\ No newline at end of file
+})
diff --git a/server/api/volunteer-logs/index.get.ts b/server/api/volunteer-logs/index.get.ts
index 60b8965..343937a 100644
--- a/server/api/volunteer-logs/index.get.ts
+++ b/server/api/volunteer-logs/index.get.ts
@@ -1,40 +1,48 @@
-import prisma from "~~/server/utils/prisma";
+import prisma from '~~/server/utils/prisma'
 
-export default eventHandler(async (event) => {
+export default eventHandler(async () => {
   try {
     const logs = await prisma.volunteer_Hour_Log.findMany({
       include: {
         volunteer: {
           include: {
-            user: true
-          }
+            user: true,
+          },
         },
-        event: true
+        event: true,
       },
       orderBy: {
-        createdAt: "desc"
-      }
+        createdAt: 'desc',
+      },
     })
 
     const formattedLogs = logs.map(log => ({
       id: String(log.id),
-      name: log.volunteer.user?.name ?? log.volunteer.user?.contactEmail ?? 'Unknown',
+      name:
+        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
+      logs: formattedLogs,
     }
-  } catch (error) {
+  }
+  catch (error) {
     throw createError({
       statusCode: 500,
-      statusMessage: "Failed to fetch volunteer logs",
-      cause: error
+      statusMessage: 'Failed to fetch volunteer logs',
+      cause: error,
     })
   }
-})
\ No newline at end of file
+})
diff --git a/server/api/volunteer/me.get.ts b/server/api/volunteer/me.get.ts
index ea2045d..bce153a 100644
--- a/server/api/volunteer/me.get.ts
+++ b/server/api/volunteer/me.get.ts
@@ -1,7 +1,7 @@
 export default defineEventHandler(async (event) => {
-    const session = await auth.api.getSession({ headers: event.headers })
-    const volunteer = await prisma.volunteer.findUnique({
-        where: { id: session?.user.id }
-    })
-    return volunteer
-})
\ No newline at end of file
+  const session = await auth.api.getSession({ headers: event.headers })
+  const volunteer = await prisma.volunteer.findUnique({
+    where: { id: session?.user.id },
+  })
+  return volunteer
+})
diff --git a/server/middleware/authenticated.ts b/server/middleware/authenticated.ts
index cfc3802..b2c9eac 100644
--- a/server/middleware/authenticated.ts
+++ b/server/middleware/authenticated.ts
@@ -1,13 +1,13 @@
-import { auth } from "~~/server/utils/auth";
+import { auth } from '~~/server/utils/auth'
 
 export default defineEventHandler(async (event) => {
   const session = await auth.api.getSession({
     headers: event.headers,
-  });
-  event.context.session = session;
-  if (event.path.startsWith("/volunteer") || event.path.startsWith("/api/volunteer")) {
+  })
+  event.context.session = session
+  if (event.path.startsWith('/volunteer') || event.path.startsWith('/api/volunteer')) {
     if (!session?.session) {
-      return sendRedirect(event, "/auth/login", 302);
+      return sendRedirect(event, '/auth/login', 302)
     }
   }
-});
\ No newline at end of file
+})
diff --git a/server/utils/auth-client.ts b/server/utils/auth-client.ts
index 1e650ad..4fbbbc9 100644
--- a/server/utils/auth-client.ts
+++ b/server/utils/auth-client.ts
@@ -1,5 +1,3 @@
-import { createAuthClient } from "better-auth/vue"
-export const authClient = createAuthClient()
-
-
+import { createAuthClient } from 'better-auth/vue'
 
+export const authClient = createAuthClient()
diff --git a/server/utils/auth.ts b/server/utils/auth.ts
index 942055d..ebb11b3 100644
--- a/server/utils/auth.ts
+++ b/server/utils/auth.ts
@@ -1,29 +1,29 @@
-import { betterAuth } from "better-auth";
-import { prismaAdapter } from "better-auth/adapters/prisma";
-import prisma from "./prisma";
-import { createAuthMiddleware } from "better-auth/api";
+import { betterAuth } from 'better-auth'
+import { prismaAdapter } from 'better-auth/adapters/prisma'
+import prisma from './prisma'
+import { createAuthMiddleware } from 'better-auth/api'
 
 export const auth = betterAuth({
-  hooks:{
+  hooks: {
     after: createAuthMiddleware(async (ctx) => {
-      if (ctx.path === "/get-session") {
+      if (ctx.path === '/get-session') {
         if (!ctx.context.session) {
           return ctx.json({
             session: null,
             user: null,
-          });
+          })
         }
-        return ctx.json(ctx.context.session);
+        return ctx.json(ctx.context.session)
       }
     }),
   },
   database: prismaAdapter(prisma, {
-    provider: "sqlite",
+    provider: 'sqlite',
   }),
   emailAndPassword: {
-    enabled: true, 
+    enabled: true,
   },
-  user:{
-    modelName: "Volunteer"
-  }
-});
\ No newline at end of file
+  user: {
+    modelName: 'Volunteer',
+  },
+})
diff --git a/server/utils/prisma.ts b/server/utils/prisma.ts
index 8b10f84..024df43 100644
--- a/server/utils/prisma.ts
+++ b/server/utils/prisma.ts
@@ -1,16 +1,16 @@
 import { PrismaClient } from './generated/prisma/client'
-import { PrismaBetterSqlite3 } from '@prisma/adapter-better-sqlite3';
+import { PrismaBetterSqlite3 } from '@prisma/adapter-better-sqlite3'
 
 const prismaClientSingleton = () => {
   const adapter = new PrismaBetterSqlite3({
-    url: process.env.DATABASE_URL
+    url: process.env.DATABASE_URL,
   })
   return new PrismaClient({ adapter })
 }
 
 declare const globalThis: {
-  prismaGlobal: ReturnType<typeof prismaClientSingleton>;
-} & typeof global;
+  prismaGlobal: ReturnType<typeof prismaClientSingleton>
+} & typeof global
 
 const prisma = globalThis.prismaGlobal ?? prismaClientSingleton()
 
diff --git a/server/utils/seed.ts b/server/utils/seed.ts
index 6bfd6f4..ad44d86 100644
--- a/server/utils/seed.ts
+++ b/server/utils/seed.ts
@@ -1,77 +1,81 @@
-import fs  from 'fs';
-import type { Language, Gender, Availability, Ethinicity, ApprovalStatus } from "./generated/prisma/client.ts";
-import { PrismaClient } from './generated/prisma/client.ts';
-import { PrismaBetterSqlite3 } from '@prisma/adapter-better-sqlite3';
+import fs from 'fs'
+import type {
+  Language,
+  Gender,
+  Availability,
+  Ethinicity,
+  ApprovalStatus,
+} from './generated/prisma/client.ts'
+import { PrismaClient } from './generated/prisma/client.ts'
+import { PrismaBetterSqlite3 } from '@prisma/adapter-better-sqlite3'
 
 const adapter = new PrismaBetterSqlite3({
-    url: process.env.DATABASE_URL
-  })
-  const prisma = new PrismaClient({ adapter })
+  url: process.env.DATABASE_URL,
+})
+const prisma = new PrismaClient({ adapter })
 
 type RawEvent = {
-  id: string,
-  title: string,
-  shortDesc: string,
-  description: string,
-  startTime: string,
-  endTime: string,
+  id: string
+  title: string
+  shortDesc: string
+  description: string
+  startTime: string
+  endTime: string
   location: {
-    longitude: number,
-    latitude: number,
+    longitude: number
+    latitude: number
     address: string
-  },
-  allowVolunteers: boolean,
-  allowAttendees: boolean,
+  }
+  allowVolunteers: boolean
+  allowAttendees: boolean
   eventAssets: string[]
 }
 
 type RawUser = {
-  name: string,
-  contactEmail: string,
-  phone: string,
+  name: string
+  contactEmail: string
+  phone: string
   RSVPs: {
-    isVolunteer?: boolean,
+    isVolunteer?: boolean
     id: string
   }[]
 }
 
 type RawVolunteer = {
-  id: string,
+  id: string
   user: {
-    contactEmail: string,
-  },
-  email: string,
-  languages: string[],
-  gender: string,
-  ethinicity: string,
-  profileURL: string,
-  availabilities: string[],
-  certifications: string[],
+    contactEmail: string
+  }
+  email: string
+  languages: string[]
+  gender: string
+  ethinicity: string
+  profileURL: string
+  availabilities: string[]
+  certifications: string[]
   hourLogs: {
     event: {
       id: string
-    },
-    date: string,
-    hours: number,
-    approvalStatus: string,
+    }
+    date: string
+    hours: number
+    approvalStatus: string
     comment?: string
   }[]
 }
 
-// type RawNotification = {
-//   id: string,
-//   title: string,
-//   content: string,
-//   isRead: boolean,
-//   user: {
-//     email: string
-//   }[]
-// }
+type RawNotification = {
+  id: string
+  title: string
+  content: string
+}
 
 async function main() {
   // Seed 5 events (3 future, 2 past) + images
-  console.log("Seeding events...")
-  const rawEvents: RawEvent[] = JSON.parse(fs.readFileSync('prisma/seed/events.json').toString());
+  console.log('Seeding events...')
+  const rawEvents: RawEvent[] = JSON.parse(
+    fs.readFileSync('prisma/seed/events.json').toString(),
+  )
   // Convert each event into an upsertable format
   const events = rawEvents.map((event) => {
     return {
@@ -81,67 +85,72 @@ async function main() {
       eventAssets: {
         create: event.eventAssets.map((imageUrl) => {
           return {
-            imageUrl: imageUrl
+            imageUrl: imageUrl,
           }
-        })
+        }),
       },
       location: {
-        connectOrCreate:{
+        connectOrCreate: {
           where: {
-            address: event.location.address
+            address: event.location.address,
           },
           create: {
             longitude: event.location.longitude,
             latitude: event.location.latitude,
-            address: event.location.address
-          }
-        }
-      }
-    };
+            address: event.location.address,
+          },
+        },
+      },
+    }
   })
   // Upsert each event
-  for(const event of events) {
+  for (const event of events) {
     const eventResult = await prisma.event.upsert({
       where: { id: event.id },
       update: {},
-      create: event
+      create: event,
     })
     console.log(eventResult)
   }
 
   // Seed two users + attended events + languages
-  console.log("Seeding users...")
-  const rawUsers: RawUser[] = JSON.parse(fs.readFileSync('prisma/seed/users.json').toString());
+  console.log('Seeding users...')
+  const rawUsers: RawUser[] = JSON.parse(
+    fs.readFileSync('prisma/seed/users.json').toString(),
+  )
   // Convert each user into an upsertable format
   const users = rawUsers.map((user) => {
     return {
       ...user,
       RSVPs: {
         create: user.RSVPs.map((event) => {
-        return {
+          return {
             isVolunteer: event.isVolunteer || false,
             event: {
               connect: {
-                id: event.id
-              }
-            }
-        }})
-      }
+                id: event.id,
+              },
+            },
+          }
+        }),
+      },
     }
   })
   // Upsert each user
-  for(const user of users) {
+  for (const user of users) {
     const userResult = await prisma.user.upsert({
       where: { contactEmail: user.contactEmail },
       update: {},
-      create: user
+      create: user,
     })
     console.log(userResult)
   }
 
   // Seed one volunteer (ENSURE that each volunteer is linked to an existing user by email)
-  console.log("Seeding volunteers...")
-  const rawVolunteers: RawVolunteer[] = JSON.parse(fs.readFileSync('prisma/seed/volunteers.json').toString());
+  console.log('Seeding volunteers...')
+  const rawVolunteers: RawVolunteer[] = JSON.parse(
+    fs.readFileSync('prisma/seed/volunteers.json').toString(),
+  )
   // Convert each volunteer into an upsertable format
   const volunteers = rawVolunteers.map((volunteer) => {
     return {
@@ -150,17 +159,17 @@ async function main() {
       ethinicity: volunteer.ethinicity as Ethinicity,
       languages: {
         create: volunteer.languages.map((lang) => {
-            return {
-            language: lang as Language
+          return {
+            language: lang as Language,
           }
-        })
+        }),
       },
       availabilities: {
         create: volunteer.availabilities.map((avail) => {
           return {
-            availability: avail as Availability
+            availability: avail as Availability,
           }
-        })
+        }),
       },
       hourLogs: {
         create: volunteer.hourLogs.map((log) => {
@@ -172,60 +181,70 @@ async function main() {
             comment: log.comment,
             event: {
               connect: {
-                id: log.event.id
-              }
-            }
+                id: log.event.id,
+              },
+            },
           }
-        })
+        }),
       },
       certifications: {
         create: volunteer.certifications.map((cert) => {
           return {
-            certification: cert
+            certification: cert,
           }
-        })
+        }),
       },
       user: {
         connect: {
-          contactEmail: volunteer.user.contactEmail
-        }
+          contactEmail: volunteer.user.contactEmail,
+        },
       },
     }
-  });
+  })
   // Upsert each volunteer
-  for(const volunteer of volunteers) {
+  for (const volunteer of volunteers) {
     const volunteerResult = await prisma.volunteer.upsert({
       where: { id: volunteer.id },
       update: {},
-      create: volunteer
+      create: volunteer,
     })
     console.log(volunteerResult)
   }
 
   // Seed six notifications - UNFINISHED
-  // const rawNotifications: RawNotification[] = JSON.parse(fs.readFileSync('prisma/seed/notifications.json').toString());
-  // // Convert each notification into an upsertable format
-  // const notifications = rawNotifications.map((notification) => {
-  //   return {
-  //     ...notification,
-  //     user: {
-  //       connect: notification.user.map((notificationUser) => {
-  //         return {
-  //           email: notificationUser.email
-  //         }
-  //       }),
-  //     }
-  //   }
-  // })
-  // // Upsert each notification
-  // for(const notification of notifications) {
-  //   const notificationResult = await prisma.notification.upsert({
-  //     where: { id: notification.id },
-  //     update: {},
-  //     create: notification
-  //   })
-  //   console.log(notificationResult)
-  // }
+  console.log('Seeding notifications...')
+  const rawNotifications: RawNotification[] = JSON.parse(
+    fs.readFileSync('prisma/seed/notifications.json').toString(),
+  )
+  const allUsers = await prisma.user.findMany()
+  for (const notification of rawNotifications) {
+    const notificationResult = await prisma.notification.upsert({
+      where: { id: notification.id },
+      update: {},
+      create: {
+        id: notification.id,
+        title: notification.title,
+        content: notification.content,
+      },
+    })
+    // Link to all users
+    for (const user of allUsers) {
+      await prisma.user_Notification.upsert({
+        where: {
+          userId_notificationId: {
+            userId: user.id,
+            notificationId: notificationResult.id,
+          },
+        },
+        update: {},
+        create: {
+          userId: user.id,
+          notificationId: notificationResult.id,
+        },
+      })
+    }
+    console.log(notificationResult)
+  }
 }
 
 main()
@@ -236,4 +255,4 @@ main()
     console.error(e)
     await prisma.$disconnect()
     process.exit(1)
-  })
\ No newline at end of file
+  })
diff --git a/tailwind.config.js b/tailwind.config.js
index 6816f9b..59fce4e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,11 +5,10 @@ export default {
     './layouts/**/*.vue',
     './pages/**/*.vue',
     './plugins/**/*.{js,ts}',
-    './app.vue'
+    './app.vue',
   ],
   theme: {
     extend: {},
   },
   plugins: [],
 }
-