diff --git a/src/app/(main)/events/[eventID]/page.tsx b/src/app/(main)/events/[eventID]/page.tsx
index ce39d19..f47493a 100644
--- a/src/app/(main)/events/[eventID]/page.tsx
+++ b/src/app/(main)/events/[eventID]/page.tsx
@@ -51,9 +51,6 @@ export default function ShowEvent() {
     );
   }
 
-  const event = eventData.data.event;
-  const organiserName = userData?.data.user?.name || 'Unknown User';
-
   // Format dates & times for display
   const formatDate = (isoString?: string) => {
     if (!isoString) return '-';
@@ -81,7 +78,7 @@ export default function ShowEvent() {
                 </div>
                 <div className='items-center ml-auto mr-auto max-sm:mb-6 max-sm:w-full max-sm:flex max-sm:justify-center'>
                   <h1 className='text-center'>
-                    {event.title || 'Untitled Event'}
+                    {eventData.data.event.title || 'Untitled Event'}
                   </h1>
                 </div>
                 <div className='w-0 sm:w-[100px]'></div>
@@ -92,8 +89,8 @@ export default function ShowEvent() {
                     start Time
                   </Label>
                   <Label size='large'>
-                    {event.start_time
-                      ? `${formatDate(event.start_time)} ${formatTime(event.start_time)}`
+                    {eventData.data.event.start_time
+                      ? `${formatDate(eventData.data.event.start_time)} ${formatTime(eventData.data.event.start_time)}`
                       : '-'}
                   </Label>
                 </div>
@@ -102,8 +99,8 @@ export default function ShowEvent() {
                     end Time
                   </Label>
                   <Label size='large'>
-                    {event.end_time
-                      ? `${formatDate(event.end_time)} ${formatTime(event.end_time)}`
+                    {eventData.data.event.end_time
+                      ? `${formatDate(eventData.data.event.end_time)} ${formatTime(eventData.data.event.end_time)}`
                       : '-'}
                   </Label>
                 </div>
@@ -111,7 +108,7 @@ export default function ShowEvent() {
                   <Label className='text-[var(--color-neutral-300)] mb-2'>
                     Location
                   </Label>
-                  <Label size='large'>{event.location || '-'}</Label>
+                  <Label size='large'>{eventData.data.event.location || '-'}</Label>
                 </div>
                 <div className='flex flex-col gap-4'>
                   <div className='flex flex-row gap-2'>
@@ -119,7 +116,7 @@ export default function ShowEvent() {
                       created:
                     </Label>
                     <Label>
-                      {event.created_at ? formatDate(event.created_at) : '-'}
+                      {eventData.data.event.created_at ? formatDate(eventData.data.event.created_at) : '-'}
                     </Label>
                   </div>
                   <div className='flex flex-row gap-2'>
@@ -127,7 +124,7 @@ export default function ShowEvent() {
                       updated:
                     </Label>
                     <Label>
-                      {event.updated_at ? formatDate(event.updated_at) : '-'}
+                      {eventData.data.event.updated_at ? formatDate(eventData.data.event.updated_at) : '-'}
                     </Label>
                   </div>
                 </div>
@@ -139,14 +136,14 @@ export default function ShowEvent() {
                       <Label className='text-[var(--color-neutral-300)]'>
                         Organiser:
                       </Label>
-                      <Label size='large'>{organiserName}</Label>
+                      <Label size='large'>{userData?.data.user?.name || 'Unknown User'}</Label>
                     </div>
                   </div>
                   <div className='h-full w-full'>
                     <Label className='text-[var(--color-neutral-300)] mb-2'>
                       Description
                     </Label>
-                    <Label size='large'>{event.description || '-'}</Label>
+                    <Label size='large'>{eventData.data.event.description || '-'}</Label>
                   </div>
                 </div>
                 <div className='h-full w-full mt-2'>
@@ -154,11 +151,11 @@ export default function ShowEvent() {
                     Participants
                   </Label>{' '}
                   <div className='grid grid-cols-1 mt-3 sm:max-h-60 sm:grid-cols-2  sm:overflow-y-auto sm:mb-0'>
-                    {event.participants?.map((user) => (
+                    {eventData.data.event.participants?.map((user) => (
                       <ParticipantListEntry
                         key={user.user.id}
                         {...user}
-                        eventID={event.id}
+                        eventID={eventData.data.event.id}
                       />
                     ))}
                   </div>
@@ -167,7 +164,7 @@ export default function ShowEvent() {
 
               <div className='flex flex-row gap-2 justify-end mt-4 mb-6'>
                 <div className='w-[20%] grid max-sm:w-full'>
-                  {session.data?.user?.id === event.organizer.id ? (
+                  {session.data?.user?.id === eventData.data.event.organizer.id ? (
                     <Dialog
                       open={deleteDialogOpen}
                       onOpenChange={setDeleteDialogOpen}
@@ -182,7 +179,7 @@ export default function ShowEvent() {
                           <DialogTitle>Delete Event</DialogTitle>
                           <DialogDescription>
                             Are you sure you want to delete the event &ldquo;
-                            {event.title}&rdquo;? This action cannot be undone.
+                            {eventData.data.event.title}&rdquo;? This action cannot be undone.
                           </DialogDescription>
                         </DialogHeader>
                         <DialogFooter>
@@ -196,7 +193,7 @@ export default function ShowEvent() {
                             variant='muted'
                             onClick={() => {
                               deleteEvent.mutate(
-                                { eventID: event.id },
+                                { eventID: eventData.data.event.id },
                                 {
                                   onSuccess: () => {
                                     router.push('/home');
@@ -204,7 +201,7 @@ export default function ShowEvent() {
                                       <ToastInner
                                         toastId={t}
                                         title='Event deleted'
-                                        description={event?.title}
+                                        description={eventData.data.event.title}
                                         variant='success'
                                       />
                                     ));
@@ -222,7 +219,7 @@ export default function ShowEvent() {
                   ) : null}
                 </div>
                 <div className='w-[20%] grid max-sm:w-full'>
-                  {session.data?.user?.id === event.organizer.id ? (
+                  {session.data?.user?.id === eventData.data.event.organizer.id ? (
                     <RedirectButton
                       redirectUrl={`/events/edit/${eventID}`}
                       buttonText='edit'
diff --git a/src/components/custom-ui/labeled-input.tsx b/src/components/custom-ui/labeled-input.tsx
index 5505e14..4900e66 100644
--- a/src/components/custom-ui/labeled-input.tsx
+++ b/src/components/custom-ui/labeled-input.tsx
@@ -36,6 +36,12 @@ export default function LabeledInput({
     value || defaultValue || '',
   );
 
+  React.useEffect(() => {
+    if (value !== undefined) {
+      setInputValue(value);
+    }
+  }, [value]);
+
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(e.target.value);
     if (rest.onChange) {
diff --git a/src/components/forms/event-form.tsx b/src/components/forms/event-form.tsx
index 11bf820..17a4cb4 100644
--- a/src/components/forms/event-form.tsx
+++ b/src/components/forms/event-form.tsx
@@ -58,14 +58,14 @@ const EventForm: React.FC<EventFormProps> = (props) => {
     error,
   } = usePostApiEvent();
   const { data, isLoading, error: fetchError } = useGetApiUserMe();
-  const { data: eventData } = useGetApiEventEventID(props.eventId!, {
-    query: { enabled: props.type === 'edit' },
-  });
+  const { data: eventData } = useGetApiEventEventID(
+    props.eventId!,
+    {
+      query: { enabled: props.type === 'edit' },
+    },
+  );
   const patchEvent = usePatchApiEventEventID();
-  const router = useRouter();
-
-  // Extract event fields for form defaults
-  const event = eventData?.data?.event;
+  const router = useRouter();;
 
   // State for date and time fields
   const [startDate, setStartDate] = React.useState<Date | undefined>(undefined);
@@ -87,22 +87,22 @@ const EventForm: React.FC<EventFormProps> = (props) => {
 
   // Update state when event data loads
   React.useEffect(() => {
-    if (props.type === 'edit' && event) {
-      setTitle(event.title || '');
+    if (props.type === 'edit' && eventData?.data?.event) {
+      setTitle(eventData?.data?.event.title || '');
       // Parse start_time and end_time
-      if (event.start_time) {
-        const start = new Date(event.start_time);
+      if (eventData?.data?.event.start_time) {
+        const start = new Date(eventData?.data?.event.start_time);
         setStartDate(start);
         setStartTime(start.toTimeString().slice(0, 5)); // "HH:mm"
       }
-      if (event.end_time) {
-        const end = new Date(event.end_time);
+      if (eventData?.data?.event.end_time) {
+        const end = new Date(eventData?.data?.event.end_time);
         setEndDate(end);
         setEndTime(end.toTimeString().slice(0, 5)); // "HH:mm"
       }
-      setLocation(event.location || '');
-      setDescription(event.description || '');
-      setSelectedParticipants(event.participants?.map((u) => u.user) || []);
+      setLocation(eventData?.data?.event.location || '');
+      setDescription(eventData?.data?.event.description || '');
+      setSelectedParticipants(eventData?.data?.event.participants?.map((u) => u.user) || []);
     } else if (props.type === 'create' && startFromUrl && endFromUrl) {
       // If creating a new event with URL params, set title and dates
       setTitle('');
@@ -113,7 +113,7 @@ const EventForm: React.FC<EventFormProps> = (props) => {
       setEndDate(end);
       setEndTime(end.toTimeString().slice(0, 5)); // "HH:mm"
     }
-  }, [event, props.type, startFromUrl, endFromUrl]);
+  }, [eventData?.data?.event, props.type, startFromUrl, endFromUrl]);
 
   async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
@@ -181,7 +181,7 @@ const EventForm: React.FC<EventFormProps> = (props) => {
       <ToastInner
         toastId={t}
         title='Event saved'
-        description={event?.title}
+        description={eventData?.data?.event.title}
         onAction={() => router.push(`/events/${eventID}`)}
         variant='success'
         buttonText='show'
@@ -198,12 +198,12 @@ const EventForm: React.FC<EventFormProps> = (props) => {
 
   // Use DB values for created_at/updated_at in edit mode
   const createdAtValue =
-    props.type === 'edit' && event?.created_at
-      ? event.created_at
+    props.type === 'edit' && eventData?.data?.event?.created_at
+      ? eventData.data.event.created_at
       : new Date().toISOString();
   const updatedAtValue =
-    props.type === 'edit' && event?.updated_at
-      ? event.updated_at
+    props.type === 'edit' && eventData?.data?.event?.updated_at
+      ? eventData.data.event.updated_at
       : new Date().toISOString();
 
   // Format date for display