diff --git a/client/src/lib/api-types/event.ts b/client/src/lib/api-types/event.ts
index 7cc563e0..99ad1485 100644
--- a/client/src/lib/api-types/event.ts
+++ b/client/src/lib/api-types/event.ts
@@ -9,7 +9,12 @@ import * as z from 'zod';
 import { event } from './schemas';
 import type { SuccessResponse, ErrorResponse } from './index';
 
+// Success response for GetEvent API
 export interface GetEventSuccAPI
+  extends SuccessResponse<Array<z.infer<typeof event.eventSchema>>> {}
+
+// Success response for CreateEvent API
+export interface CreateEventSuccAPI
   extends SuccessResponse<z.infer<typeof event.eventSchema>> {}
 
 /**
@@ -22,3 +27,12 @@ export type GetEventFailAPI = ErrorResponse<
   | 'Unable to connect to the server. Please check your network connection'
   | 'Data inconsistency detected. Please refresh the page and try again'
 >;
+
+// Failure response for CreateEvent API
+export type CreateEventFailAPI = ErrorResponse<
+  | 'Invalid input data. Please check your form and try again'
+  | 'Event could not be created. Please try again later'
+  | 'There was a problem accessing the database. Please try again later'
+  | 'Too many requests. Please try again later'
+  | 'Unable to connect to the server. Please check your network connection'
+>;
diff --git a/client/src/pages/user/create-events.tsx b/client/src/pages/user/create-events.tsx
index 96b444b6..54632815 100644
--- a/client/src/pages/user/create-events.tsx
+++ b/client/src/pages/user/create-events.tsx
@@ -1,144 +1,223 @@
-// src/pages/user/createevents.tsx
-
-import React from 'react';
-import { useForm } from 'react-hook-form';
-import { z, ZodSchema } from 'zod';
-import { zodResolver } from '@hookform/resolvers/zod';
-
-// Define your form schema using zod
-const eventSchema: ZodSchema = z.object({
-  title: z.string().min(1, 'Title is required'),
-  date: z.string().min(1, 'Date is required'),
-  time: z.string().min(1, 'Time is required'),
-  location: z.string().min(1, 'Location is required'),
-  description: z.string().optional(),
-  file: z.instanceof(File).optional(),
-});
+import React, { useState } from 'react';
+import { useForm, useFormState } from 'react-hook-form';
+import httpClient from '@utils/http';
+import { Button } from '@components/ui/button';
+import { Input } from '@components/ui/input';
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+} from '@components/ui/form';
+import { cn } from '@utils/tailwind';
+import { CreateEventSuccAPI } from '@lib/api-types/event';
+import { AxiosError } from 'axios';
 
 // Define TypeScript type for form data
-type EventFormData = z.infer<typeof eventSchema>;
+type EventFormData = {
+  title: string;
+  date: string; // The date should be in YYYY-MM-DD format
+  time: string;
+  location: string;
+  description?: string;
+};
 
-const EventCreationPage: React.FC = () => {
-  const { register, handleSubmit, setValue } = useForm<EventFormData>({
-    resolver: zodResolver(eventSchema),
+const EventCreationPage: React.FC<{ className?: string }> = ({
+  className,
+  ...props
+}) => {
+  const [error, setError] = useState<string | null>(null);
+  const [successMessage, setSuccessMessage] = useState<string | null>(null);
+
+  const eventForm = useForm<EventFormData>({
     mode: 'onBlur',
   });
 
-  // Handle form submission
-  const onSubmit = (data: EventFormData) => {
-    console.log('Form Data:', data);
-
-    // Handle file upload here if needed
-  };
+  const { isSubmitting } = useFormState({
+    control: eventForm.control,
+  });
 
-  // Handle file input change
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (file) {
-      setValue('file', file);
+  const handleSave = async (data: EventFormData) => {
+    console.log('Form data:', data); // Log form data for debugging
+    try {
+      console.log('Sending request...');
+      const response = await httpClient.post<CreateEventSuccAPI, EventFormData>(
+        {
+          uri: '/event',
+          payload: data,
+          withCredentials: 'access',
+        },
+      );
+      console.log('Response received:', response);
+      setSuccessMessage('Event created successfully');
+      setError(null);
+      eventForm.reset();
+    } catch (err) {
+      console.error('Request failed:', err);
+      if (err instanceof AxiosError) {
+        if (err.response) {
+          setError(
+            `Server error: ${err.response?.data?.errors?.[0]?.message || 'An unexpected error occurred'}`,
+          );
+        } else if (err.request) {
+          setError(
+            'Network error: Please check your connection and try again.',
+          );
+        } else {
+          setError(
+            `Error creating event! ${err.message || 'An unexpected error occurred'}`,
+          );
+        }
+      } else {
+        setError(
+          `Error creating event! ${String(err) || 'An unexpected error occurred'}`,
+        );
+      }
+      setSuccessMessage(null);
     }
   };
 
   return (
-    <div className="mx-auto max-w-2xl rounded bg-white p-4 shadow-md">
-      <h1 className="mb-4 text-2xl font-bold">Create Event</h1>
-      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-        <div>
-          <label
-            htmlFor="title"
-            className="block text-sm font-medium text-gray-700"
-          >
-            Title
-          </label>
-          <input
-            id="title"
-            type="text"
-            {...register('title')}
-            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
-          />
-        </div>
+    <div {...props} className={cn(className, 'container mx-auto mt-16')}>
+      <h1 className="text-center text-2xl font-bold">Create Event</h1>
+      <Form {...eventForm}>
+        <form
+          onSubmit={eventForm.handleSubmit(handleSave)}
+          className="mt-8 w-[26.5rem] space-y-4"
+        >
+          {error && <p className="text-red-500">{error}</p>}
+          {successMessage && <p className="text-green-500">{successMessage}</p>}
 
-        <div>
-          <label
-            htmlFor="date"
-            className="block text-sm font-medium text-gray-700"
-          >
-            Date
-          </label>
-          <input
-            id="date"
-            type="date"
-            {...register('date')}
-            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
+          <FormField
+            control={eventForm.control}
+            name="title"
+            render={({ field, fieldState }) => (
+              <FormItem>
+                <FormLabel>Title</FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder="Event Title"
+                    className={fieldState.error ? 'border-red-700' : ''}
+                    {...field} // Ensure no duplicate `value` props
+                  />
+                </FormControl>
+                {fieldState.error ? (
+                  <FormMessage>{fieldState.error.message}</FormMessage>
+                ) : (
+                  <FormDescription>Enter the event title.</FormDescription>
+                )}
+              </FormItem>
+            )}
           />
-        </div>
 
-        <div>
-          <label
-            htmlFor="time"
-            className="block text-sm font-medium text-gray-700"
-          >
-            Time
-          </label>
-          <input
-            id="time"
-            type="time"
-            {...register('time')}
-            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
+          <FormField
+            control={eventForm.control}
+            name="date"
+            render={({ field, fieldState }) => (
+              <FormItem>
+                <FormLabel>Date</FormLabel>
+                <FormControl>
+                  <Input
+                    type="date"
+                    className={fieldState.error ? 'border-red-700' : ''}
+                    {...field} // Ensure no duplicate `value` props
+                  />
+                </FormControl>
+                {fieldState.error ? (
+                  <FormMessage>{fieldState.error.message}</FormMessage>
+                ) : (
+                  <FormDescription>Select the event date.</FormDescription>
+                )}
+              </FormItem>
+            )}
           />
-        </div>
 
-        <div>
-          <label
-            htmlFor="location"
-            className="block text-sm font-medium text-gray-700"
-          >
-            Location
-          </label>
-          <input
-            id="location"
-            type="text"
-            {...register('location')}
-            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
+          <FormField
+            control={eventForm.control}
+            name="time"
+            render={({ field, fieldState }) => (
+              <FormItem>
+                <FormLabel>Time</FormLabel>
+                <FormControl>
+                  <Input
+                    type="time"
+                    className={fieldState.error ? 'border-red-700' : ''}
+                    {...field} // Ensure no duplicate `value` props
+                  />
+                </FormControl>
+                {fieldState.error ? (
+                  <FormMessage>{fieldState.error.message}</FormMessage>
+                ) : (
+                  <FormDescription>Enter the event time.</FormDescription>
+                )}
+              </FormItem>
+            )}
           />
-        </div>
 
-        <div>
-          <label
-            htmlFor="description"
-            className="block text-sm font-medium text-gray-700"
-          >
-            Description
-          </label>
-          <textarea
-            id="description"
-            {...register('description')}
-            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
+          <FormField
+            control={eventForm.control}
+            name="location"
+            render={({ field, fieldState }) => (
+              <FormItem>
+                <FormLabel>Location</FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder="Event Location"
+                    className={fieldState.error ? 'border-red-700' : ''}
+                    {...field} // Ensure no duplicate `value` props
+                  />
+                </FormControl>
+                {fieldState.error ? (
+                  <FormMessage>{fieldState.error.message}</FormMessage>
+                ) : (
+                  <FormDescription>Enter the event location.</FormDescription>
+                )}
+              </FormItem>
+            )}
           />
-        </div>
 
-        <div>
-          <label
-            htmlFor="file"
-            className="block text-sm font-medium text-gray-700"
-          >
-            Upload File
-          </label>
-          <input
-            id="file"
-            type="file"
-            onChange={handleFileChange}
-            className="mt-1 block w-full"
+          <FormField
+            control={eventForm.control}
+            name="description"
+            render={({ field, fieldState }) => (
+              <FormItem>
+                <FormLabel>Description</FormLabel>
+                <FormControl>
+                  <textarea
+                    placeholder="Event Description"
+                    className={` ${fieldState.error ? 'border-red-700' : ''}`}
+                    {...field} // Ensure no duplicate `value` props
+                  />
+                </FormControl>
+                {fieldState.error ? (
+                  <FormMessage>{fieldState.error.message}</FormMessage>
+                ) : (
+                  <FormDescription>
+                    Provide a description for the event.
+                  </FormDescription>
+                )}
+              </FormItem>
+            )}
           />
-        </div>
 
-        <button
-          type="submit"
-          className="rounded-md bg-blue-500 px-4 py-2 text-white"
-        >
-          Create Event
-        </button>
-      </form>
+          <div className="flex justify-end space-x-2">
+            <Button
+              type="reset"
+              variant="ghost"
+              disabled={isSubmitting || !eventForm.formState.isDirty}
+              onClick={() => eventForm.reset()}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" variant="secondary" disabled={isSubmitting}>
+              {isSubmitting ? 'Creating...' : 'Create Event'}
+            </Button>
+          </div>
+        </form>
+      </Form>
     </div>
   );
 };
diff --git a/client/src/pages/user/event-list.tsx b/client/src/pages/user/event-list.tsx
index 5209ce80..483d23fa 100644
--- a/client/src/pages/user/event-list.tsx
+++ b/client/src/pages/user/event-list.tsx
@@ -1,72 +1,61 @@
-// src/pages/EventForm.tsx
+import React, { useEffect, useState } from 'react';
+import httpClient from '@utils/http';
 
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { eventSchema } from '@lib/api-types/schemas/event';
-import { PageComponent } from '@pages/route-map';
-
-interface EventFormInputs {
+interface Event {
+  id: number;
   title: string;
-  date: string;
+  date: Date; // Ensure this matches the format returned by the API
   time: string;
   location: string;
   description?: string;
 }
 
-const EventForm: PageComponent = () => {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<EventFormInputs>({
-    resolver: zodResolver(eventSchema),
-  });
-
-  const onSubmit = (data: EventFormInputs) => {
-    console.log(data);
-    // Handle form submission, e.g., send data to the server
-  };
+const EventList: React.FC = () => {
+  const [events, setEvents] = useState<Event[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchEvents = async () => {
+      try {
+        const response = await httpClient.get<{ data: Event[] }>({
+          uri: `/event`,
+          withCredentials: 'access', // Adjust if needed
+        });
+
+        // Ensure that response.data.data is an array of events
+        setEvents(response.data);
+      } catch (err) {
+        setError('Error fetching events! Please try again later.');
+        console.error('Fetch error:', err);
+      }
+    };
+
+    fetchEvents();
+  }, []);
 
   return (
-    <div className="mx-auto max-w-2xl rounded bg-white p-4 shadow-md">
-      <h1 className="mb-4 text-2xl font-bold">Event Form</h1>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <div className="mb-4">
-          <label htmlFor="title">Title</label>
-          <input id="title" type="text" {...register('title')} />
-          {errors.title && (
-            <p className="mt-2 text-red-600">{errors.title.message}</p>
-          )}
-        </div>
-
-        <div className="mb-4">
-          <label htmlFor="date">Date</label>
-          <input id="date" type="date" {...register('date')} />
-          {errors.date && <p>{errors.date.message}</p>}
-        </div>
-
-        <div className="mb-4">
-          <label htmlFor="time">Time</label>
-          <input id="time" type="time" {...register('time')} />
-          {errors.time && <p>{errors.time.message}</p>}
-        </div>
-
-        <div className="mb-4">
-          <label htmlFor="location">Location</label>
-          <input id="location" type="text" {...register('location')} />
-          {errors.location && <p>{errors.location.message}</p>}
-        </div>
-
-        <div className="mb-4">
-          <label htmlFor="description">Description</label>
-          <textarea id="description" {...register('description')} />
-          {errors.description && <p>{errors.description.message}</p>}
-        </div>
-
-        <button type="submit">Submit</button>
-      </form>
+    <div className="container mx-auto mt-16">
+      <h1 className="text-center text-2xl font-bold">Event List</h1>
+      {error && <p className="text-red-500">{error}</p>}
+      {events.length > 0 ? (
+        <ul>
+          {events.map((event) => (
+            <li
+              key={event.id}
+              className="mb-4 rounded border border-gray-300 p-4"
+            >
+              <h2 className="text-xl font-semibold">{event.title}</h2>
+              <p>{`${event.date} ${event.time}`}</p>
+              <p>{event.location}</p>
+              <p>{event.description || 'No description available'}</p>
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <p>No events found.</p>
+      )}
     </div>
   );
 };
 
-export default EventForm;
+export default EventList;
diff --git a/client/src/pages/user/route-map.tsx b/client/src/pages/user/route-map.tsx
index 0efeaa29..df02e6b6 100644
--- a/client/src/pages/user/route-map.tsx
+++ b/client/src/pages/user/route-map.tsx
@@ -16,7 +16,7 @@ const routeMaps: RouteMap = {
     description: 'Create Your Events Here',
     component: EventCreationPage as PageComponent,
   },
-  '/eventlist': {
+  '/event': {
     title: 'List Events',
     description: 'List Events Here',
     component: EventList as PageComponent,
diff --git a/server/src/lib/api-types/event.ts b/server/src/lib/api-types/event.ts
index 7cc563e0..99ad1485 100644
--- a/server/src/lib/api-types/event.ts
+++ b/server/src/lib/api-types/event.ts
@@ -9,7 +9,12 @@ import * as z from 'zod';
 import { event } from './schemas';
 import type { SuccessResponse, ErrorResponse } from './index';
 
+// Success response for GetEvent API
 export interface GetEventSuccAPI
+  extends SuccessResponse<Array<z.infer<typeof event.eventSchema>>> {}
+
+// Success response for CreateEvent API
+export interface CreateEventSuccAPI
   extends SuccessResponse<z.infer<typeof event.eventSchema>> {}
 
 /**
@@ -22,3 +27,12 @@ export type GetEventFailAPI = ErrorResponse<
   | 'Unable to connect to the server. Please check your network connection'
   | 'Data inconsistency detected. Please refresh the page and try again'
 >;
+
+// Failure response for CreateEvent API
+export type CreateEventFailAPI = ErrorResponse<
+  | 'Invalid input data. Please check your form and try again'
+  | 'Event could not be created. Please try again later'
+  | 'There was a problem accessing the database. Please try again later'
+  | 'Too many requests. Please try again later'
+  | 'Unable to connect to the server. Please check your network connection'
+>;
diff --git a/server/src/v1/event.ts b/server/src/v1/event.ts
index ae36f7ca..ff7c3dcd 100644
--- a/server/src/v1/event.ts
+++ b/server/src/v1/event.ts
@@ -1,55 +1,113 @@
-import { IBareRouteHandler } from '../route-map';
-import { GetEventSuccAPI } from '../lib/api-types/event';
-import { GetEventFailAPI } from '../lib/api-types/event';
+import { db } from '../db';
+import { eventTable } from '../db/schemas';
+import { IAuthedRouteHandler } from '../route-map';
+import {
+  GetEventSuccAPI,
+  GetEventFailAPI,
+  CreateEventSuccAPI,
+  CreateEventFailAPI,
+} from '../lib/api-types/event';
+import { eq } from 'drizzle-orm';
+import { eventSchema } from '../lib/api-types/schemas/event';
 
-export const getEvent: IBareRouteHandler = async (req, res) => {
-  // Extract event ID from the request params or query
-  const eventId = parseInt(req.params.id, 10); // Ensure eventId is a number
-
-  if (isNaN(eventId)) {
-    return res.status(400).json({
-      status: 400,
-      message: 'Invalid event ID',
-    });
+// API handler for fetching events
+export const getEvent: IAuthedRouteHandler = async (req, res) => {
+  // Validate user ID
+  if (!req.user || !req.user.id) {
+    return res.status(401).json({
+      status: 401,
+      errors: [{ message: 'Unauthorized: User ID missing!' }],
+    } satisfies GetEventFailAPI);
   }
 
-  // Fetch event data from a database or another source using eventId
-  const eventData = await fetchEventById(eventId);
+  const userId = req.user.id;
 
-  if (!eventData) {
+  // Fetch events for the authenticated user
+  const events = await db
+    .select()
+    .from(eventTable)
+    .where(eq(eventTable.userId, userId));
+
+  // Check if events were found
+  if (events.length === 0) {
     return res.status(404).json({
       status: 404,
+      errors: [{ message: 'No events found for this user!' }],
+    } satisfies GetEventFailAPI);
+  }
+
+  // Ensure that the date is a Date object
+  const formattedEvents = events.map((event) => ({
+    id: event.id,
+    title: event.title,
+    date: new Date(event.date), // Ensure date is a Date object
+    time: event.time,
+    location: event.location,
+    description: event.description || undefined, // Ensure description is optional
+  }));
+
+  // Construct the response object
+  const response: GetEventSuccAPI = {
+    status: 200,
+    data: formattedEvents,
+  };
+
+  // Send the response
+  return res.status(200).json(response);
+};
+
+// API handler for creating an event
+export const createEvent: IAuthedRouteHandler = async (req, res) => {
+  // Validate user ID
+  if (!req.user || !req.user.id) {
+    return res.status(401).json({
+      status: 401,
+      errors: [{ message: 'Unauthorized: User ID missing!' }],
+    } satisfies CreateEventFailAPI);
+  }
+
+  const userId = req.user.id;
+
+  // Validate the request body against the event schema
+  const result = eventSchema.safeParse(req.body);
+
+  if (!result.success) {
+    return res.status(400).json({
+      status: 400,
       errors: [
-        {
-          message: 'Event not found',
-        },
+        { message: 'Invalid input data. Please check your form and try again' },
       ],
-    } as GetEventFailAPI);
+    } satisfies CreateEventFailAPI);
   }
 
-  return res.status(200).json({
+  const { title, date, time, location, description } = result.data;
+
+  // Create a new event and return the created event including its ID
+  const [newEvent] = await db
+    .insert(eventTable)
+    .values({
+      userId,
+      title,
+      date: new Date(date), // Ensure date is a Date object
+      time,
+      location,
+      description: description ?? null, // Use null if description is optional
+    })
+    .returning(); // Ensure this returns the newly created event
+
+  // Construct the response object
+  const response: CreateEventSuccAPI = {
     status: 200,
     data: {
-      date: new Date(eventData.date), // Convert Date to string if necessary
-      id: eventData.id,
-      title: eventData.title,
-      time: new Date(eventData.time).toISOString(), // Convert Date to string if necessary
-      location: eventData.location,
-      description: eventData.description,
+      id: newEvent.id, // Ensure the ID is included in the response
+      title: newEvent.title,
+      date: new Date(newEvent.date), // Convert Date to ISO string
+      time: newEvent.time,
+      location: newEvent.location,
+      description: newEvent.description || undefined, // Ensure description is optional
     },
-  } satisfies GetEventSuccAPI);
-};
-
-// Example function to fetch event data by ID
-async function fetchEventById(id: number) {
-  // Replace with your actual implementation to fetch event data
-  // This is just an example; adapt it to your actual data source
-  return {
-    date: new Date(), // Example data
-    id,
-    title: 'Event Title',
-    time: new Date(),
-    location: 'Event Location',
-    description: 'Event Description',
   };
-}
+
+  // Send the response
+  return res.status(201).json(response);
+};
diff --git a/server/src/v1/route-map.ts b/server/src/v1/route-map.ts
index 2fd7d826..97829362 100644
--- a/server/src/v1/route-map.ts
+++ b/server/src/v1/route-map.ts
@@ -11,6 +11,7 @@ import authRoutes from './auth/route-map';
 import foodRoutes from './food/route-map';
 import { getUser } from './user';
 import { getEvent } from './event';
+import { createEvent } from './event';
 
 const routeMap: RoutingMap<`/v1/${string}`> = {
   ...authRoutes,
@@ -27,6 +28,10 @@ const routeMap: RoutingMap<`/v1/${string}`> = {
       handler: getEvent,
       accessLevel: 'authenticated',
     },
+    POST: {
+      handler: createEvent,
+      accessLevel: 'authenticated',
+    },
   },
 } as const;
 
diff --git a/shared/api-types/src/event.ts b/shared/api-types/src/event.ts
index 7cc563e0..99ad1485 100644
--- a/shared/api-types/src/event.ts
+++ b/shared/api-types/src/event.ts
@@ -9,7 +9,12 @@ import * as z from 'zod';
 import { event } from './schemas';
 import type { SuccessResponse, ErrorResponse } from './index';
 
+// Success response for GetEvent API
 export interface GetEventSuccAPI
+  extends SuccessResponse<Array<z.infer<typeof event.eventSchema>>> {}
+
+// Success response for CreateEvent API
+export interface CreateEventSuccAPI
   extends SuccessResponse<z.infer<typeof event.eventSchema>> {}
 
 /**
@@ -22,3 +27,12 @@ export type GetEventFailAPI = ErrorResponse<
   | 'Unable to connect to the server. Please check your network connection'
   | 'Data inconsistency detected. Please refresh the page and try again'
 >;
+
+// Failure response for CreateEvent API
+export type CreateEventFailAPI = ErrorResponse<
+  | 'Invalid input data. Please check your form and try again'
+  | 'Event could not be created. Please try again later'
+  | 'There was a problem accessing the database. Please try again later'
+  | 'Too many requests. Please try again later'
+  | 'Unable to connect to the server. Please check your network connection'
+>;