diff --git a/backend/src/models/eventDetails.ts b/backend/src/models/eventDetails.ts
index 0a0be328..e6d47ac7 100644
--- a/backend/src/models/eventDetails.ts
+++ b/backend/src/models/eventDetails.ts
@@ -7,7 +7,6 @@ const eventDetailsSchema = new Schema({
   date: { type: String, required: true },
   location: { type: String, required: true },
   imageURI: { type: String, required: true },
-  volunteers: { type: [String], required: false, default: [] },
 });
 
 type EventDetails = InferSchemaType<typeof eventDetailsSchema>;
diff --git a/frontend/src/api/eventDetails.ts b/frontend/src/api/eventDetails.ts
index 8c47dd3e..d354d35c 100644
--- a/frontend/src/api/eventDetails.ts
+++ b/frontend/src/api/eventDetails.ts
@@ -10,7 +10,6 @@ export type EventDetails = {
   date: string;
   location: string;
   imageURI: string;
-  volunteers: string[];
 };
 
 export async function getEventDetails(id: string): Promise<APIResult<EventDetails>> {
@@ -40,7 +39,6 @@ type CreateEventDetailsRequest = {
   date: string;
   location: string;
   imageURI: string;
-  // volunteers: string[]; when creating an event, no volunteers are added
 };
 
 export async function createEventDetails(
@@ -63,7 +61,6 @@ type UpdateEventDetailsRequest = {
   date: string;
   location: string;
   imageURI: string;
-  volunteers: string[];
 };
 
 export async function updateEventDetails(
@@ -80,28 +77,3 @@ export async function updateEventDetails(
     return handleAPIError(error);
   }
 }
-
-// wrap updateEventDetails to push a volunteer ID to an event
-export async function addVolunteerToEvent(
-  eventId: string,
-  volunteerId: string,
-): Promise<APIResult<EventDetails>> {
-  try {
-    const result = await getEventDetails(eventId);
-    if (!result.success) {
-      // if result is not successful, return the result which is APIError
-      return result;
-    }
-    const oldEvent = result.data;
-    oldEvent.volunteers.push(volunteerId);
-    const response = await updateEventDetails(oldEvent);
-
-    if (!response.success) {
-      // if response is not successful, return the response which is APIError
-      return response;
-    }
-    return { success: true, data: response.data };
-  } catch (error) {
-    return handleAPIError(error);
-  }
-}
diff --git a/frontend/src/api/testimonial.ts b/frontend/src/api/testimonial.ts
index 6e3343fb..fef271b2 100644
--- a/frontend/src/api/testimonial.ts
+++ b/frontend/src/api/testimonial.ts
@@ -12,9 +12,7 @@ export type Testimonial = {
 export async function getAllTestimonials(): Promise<APIResult<Testimonial[]>> {
   try {
     const response = await get(`/api/testimonial/get`);
-    //console.log(response);
     const json = (await response.json()) as Testimonial[];
-    //console.log(json);
     return { success: true, data: json };
   } catch (error) {
     return handleAPIError(error);
diff --git a/frontend/src/app/(web app)/involved/page.tsx b/frontend/src/app/(web app)/involved/page.tsx
index 76dd5fa4..6223c968 100644
--- a/frontend/src/app/(web app)/involved/page.tsx	
+++ b/frontend/src/app/(web app)/involved/page.tsx	
@@ -37,7 +37,7 @@ export default function Involved() {
         <div className={styles.cards}>
           <WhiteCard
             imageUrl="/cal.svg"
-            buttonUrl="/events"
+            buttonUrl="/upcoming-events"
             buttonText="Learn More"
             title="Upcoming Events"
             description="Lorem ipsum dolor sit amet consectetur. Et vestibulum enim nunc ultrices. Donec blandit sollicitudin vitae integer mauris sed. Mattis duis id viverra suscipit morbi."
diff --git a/frontend/src/app/(web app)/page.tsx b/frontend/src/app/(web app)/page.tsx
index 4ab90ae6..9f531bca 100644
--- a/frontend/src/app/(web app)/page.tsx	
+++ b/frontend/src/app/(web app)/page.tsx	
@@ -47,7 +47,7 @@ export default function Home() {
       <div className={styles.whiteCardsContainer}>
         <WhiteCard
           imageUrl="/Donate.svg"
-          buttonUrl="/"
+          buttonUrl="/donations"
           buttonText="Donate"
           title="Help Our Cause"
           description="Your support and contributions will enable us to meet our goals and improve conditions. 
@@ -64,7 +64,7 @@ export default function Home() {
         </div>
 
         <div className={styles.buttonContainer}>
-          <Button text={see_more_text} link={"/events"} />
+          <Button text={see_more_text} link={"/upcoming-events"} />
         </div>
         <Description
           title="Our Community Sponsors"
diff --git a/frontend/src/app/(web app)/events/page.module.css b/frontend/src/app/(web app)/past-events/page.module.css
similarity index 100%
rename from frontend/src/app/(web app)/events/page.module.css
rename to frontend/src/app/(web app)/past-events/page.module.css
diff --git a/frontend/src/app/(web app)/past-events/page.tsx b/frontend/src/app/(web app)/past-events/page.tsx
new file mode 100644
index 00000000..5ee4a65e
--- /dev/null
+++ b/frontend/src/app/(web app)/past-events/page.tsx	
@@ -0,0 +1,47 @@
+"use client";
+import React, { useEffect, useState } from "react";
+
+import EventsList from "../../../components/EventsList";
+
+import styles from "./page.module.css";
+
+import { BackgroundImage, BackgroundImagePages, getBackgroundImages } from "@/api/images";
+import BackgroundHeader from "@/components/BackgroundHeader";
+
+export default function PastEvents() {
+  const [images, setImages] = useState<BackgroundImage[]>([]);
+
+  useEffect(() => {
+    getBackgroundImages(BackgroundImagePages.TEAM)
+      .then((result) => {
+        if (result.success) {
+          setImages(result.data);
+        }
+      })
+      .catch((error) => {
+        alert(error);
+      });
+  }, []);
+
+  return (
+    <div className="items-center justify-center">
+      <BackgroundHeader
+        backgroundImageURIs={images.map((image) => image.imageURI)}
+        header="GET INVOLVED"
+        title="Past Events"
+        description="Lorem ipsum dolor sit amet consectetur. Et vestibulum enim nunc ultrices. Donec blandit sollicitudin vitae integer mauris sed. Mattis duis id viverra suscipit morbi."
+      />
+      <div className={styles.body}>
+        <div className={styles.bodyTitle}>
+          <h1 style={{ font: "var(--font-title-l)" }}>Explore our Past Events</h1>
+          <p style={{ font: "var(--font-body-reg)" }}>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque necessitatibus
+            asperiores, optio quasi sit tempora in amet aut natus, similique enim explicabo id
+            expedita minima doloribus repellendus est? Quos, officia?
+          </p>
+        </div>
+        <EventsList page="past-events" />
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/app/(web app)/events/[eventId]/page.module.css b/frontend/src/app/(web app)/upcoming-events/[eventId]/page.module.css
similarity index 100%
rename from frontend/src/app/(web app)/events/[eventId]/page.module.css
rename to frontend/src/app/(web app)/upcoming-events/[eventId]/page.module.css
diff --git a/frontend/src/app/(web app)/events/[eventId]/page.tsx b/frontend/src/app/(web app)/upcoming-events/[eventId]/page.tsx
similarity index 100%
rename from frontend/src/app/(web app)/events/[eventId]/page.tsx
rename to frontend/src/app/(web app)/upcoming-events/[eventId]/page.tsx
diff --git a/frontend/src/app/(web app)/upcoming-events/page.module.css b/frontend/src/app/(web app)/upcoming-events/page.module.css
new file mode 100644
index 00000000..62332f3a
--- /dev/null
+++ b/frontend/src/app/(web app)/upcoming-events/page.module.css	
@@ -0,0 +1,19 @@
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&family=Roboto+Slab:wght@100..900&display=swap");
+
+.body {
+  max-width: 1440px;
+  margin: 0 auto;
+  height: auto;
+  padding: 0px 98px 136px;
+  background-color: #f9f9f9;
+  color: black;
+}
+.bodyTitle {
+  margin: 0;
+  padding: 64px 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: left;
+  gap: 24px;
+}
diff --git a/frontend/src/app/(web app)/events/page.tsx b/frontend/src/app/(web app)/upcoming-events/page.tsx
similarity index 97%
rename from frontend/src/app/(web app)/events/page.tsx
rename to frontend/src/app/(web app)/upcoming-events/page.tsx
index 8756c321..d69acf2f 100644
--- a/frontend/src/app/(web app)/events/page.tsx	
+++ b/frontend/src/app/(web app)/upcoming-events/page.tsx	
@@ -40,7 +40,7 @@ export default function UpcomingEvents() {
             expedita minima doloribus repellendus est? Quos, officia?
           </p>
         </div>
-        <EventsList page="events" />
+        <EventsList page="upcoming-events" />
       </div>
     </div>
   );
diff --git a/frontend/src/app/admin/dashboard/page.module.css b/frontend/src/app/admin/dashboard/page.module.css
index 11095c29..472a10cd 100644
--- a/frontend/src/app/admin/dashboard/page.module.css
+++ b/frontend/src/app/admin/dashboard/page.module.css
@@ -2,7 +2,7 @@
   display: flex;
   justify-content: flex-start;
   padding-left: 90px;
-  padding-top: 150px;
+  padding-top: 50px;
 }
 
 .gridContainer {
diff --git a/frontend/src/app/admin/dashboard/page.tsx b/frontend/src/app/admin/dashboard/page.tsx
index 97caaf3c..e497cabc 100644
--- a/frontend/src/app/admin/dashboard/page.tsx
+++ b/frontend/src/app/admin/dashboard/page.tsx
@@ -9,20 +9,20 @@ export default function Dashboard() {
       <div className={styles.gridContainer}>
         <DashboardCard
           imageURI="/dashboard_eventcreator.png"
-          url="/eventcreator"
+          url="/event-creator"
           title="Event Creator"
           last_updated="Month XX, XXXX, XX:XX"
         />
         <DashboardCard
           imageURI="/dashboard_pageeditor.png"
-          url="/pageeditor"
+          url="/page-editor"
           title="Page Editor"
           last_updated="Month XX, XXXX, XX:XX"
         />
 
         <DashboardCard
           imageURI="/dashboard_newsletter.png"
-          url="/newslettercreator"
+          url="/newsletter-creator"
           title="Newsletter"
           last_updated="Month XX, XXXX, XX:XX"
         />
diff --git a/frontend/src/app/admin/pageeditor/page.module.css b/frontend/src/app/admin/page-editor/page.module.css
similarity index 93%
rename from frontend/src/app/admin/pageeditor/page.module.css
rename to frontend/src/app/admin/page-editor/page.module.css
index bf5c9adb..c6131f68 100644
--- a/frontend/src/app/admin/pageeditor/page.module.css
+++ b/frontend/src/app/admin/page-editor/page.module.css
@@ -2,7 +2,7 @@
   display: flex;
   justify-content: center;
   padding-left: 30px;
-  padding-top: 140px;
+  padding-top: 50px;
 }
 
 .gridContainer {
diff --git a/frontend/src/app/admin/pageeditor/page.tsx b/frontend/src/app/admin/page-editor/page.tsx
similarity index 100%
rename from frontend/src/app/admin/pageeditor/page.tsx
rename to frontend/src/app/admin/page-editor/page.tsx
diff --git a/frontend/src/components/EventsCard.tsx b/frontend/src/components/EventsCard.tsx
index 644b34a5..2de65e3d 100644
--- a/frontend/src/components/EventsCard.tsx
+++ b/frontend/src/components/EventsCard.tsx
@@ -27,13 +27,13 @@ const EventsCard = ({ event, page }: CardProps) => {
             <div className={styles.cardTitle}>{event.name}</div>
             <div className={styles.homeCardDescription}>{event.description}</div>
           </div>
-          <Link href={`/events/${event._id}`}>
+          <Link href={`/upcoming-events/${event._id}`}>
             <button className={styles.homeCardButton}>Learn More</button>
           </Link>
         </div>
       </main>
     );
-  } else {
+  } else if (page === "upcoming-events") {
     return (
       <main className={styles.cardContainer} style={{ width: `578px`, height: `536px` }}>
         <div style={{ width: "578px", height: "270px", overflow: "hidden" }}>
@@ -45,12 +45,27 @@ const EventsCard = ({ event, page }: CardProps) => {
             <div className={styles.cardTitle}>{event.name}</div>
             <div className={styles.cardDescription}>{event.description}</div>
           </div>
-          <Link href={`/events/${event._id}`}>
+          <Link href={`/upcoming-events/${event._id}`}>
             <button className={styles.cardButton}>Learn More</button>
           </Link>
         </div>
       </main>
     );
+  } else if (page === "past-events") {
+    return (
+      <main className={styles.cardContainer} style={{ width: `578px`, height: `450px` }}>
+        <div style={{ width: "578px", height: "270px", overflow: "hidden" }}>
+          <Image src={event.imageURI} alt="image" width={578} height={270} />
+        </div>
+
+        <div className={styles.cardContent}>
+          <div className={styles.textContainer}>
+            <div className={styles.cardTitle}>{event.name}</div>
+            <div className={styles.cardDescription}>{event.description}</div>
+          </div>
+        </div>
+      </main>
+    );
   }
 };
 
diff --git a/frontend/src/components/EventsList.tsx b/frontend/src/components/EventsList.tsx
index 02f7464d..584187a9 100644
--- a/frontend/src/components/EventsList.tsx
+++ b/frontend/src/components/EventsList.tsx
@@ -10,14 +10,27 @@ type EventsListProps = {
 };
 
 export default function EventsList({ page }: EventsListProps) {
-  const [events, setEvents] = useState<EventDetails[]>([]);
+  const [pastEvents, setPastEvents] = useState<EventDetails[]>([]);
+  const [upcomingEvents, setUpcomingEvents] = useState<EventDetails[]>([]);
 
   // Fetch events
   useEffect(() => {
     getAllEventDetails()
       .then((response) => {
         if (response.success) {
-          setEvents(response.data);
+          const currentDate = new Date();
+
+          const filteredPastEvents = response.data.filter((item) => {
+            const eventDate = new Date(item.date);
+            return eventDate < currentDate;
+          });
+          setPastEvents(filteredPastEvents);
+
+          const filteredUpcomingEvents = response.data.filter((item) => {
+            const eventDate = new Date(item.date);
+            return eventDate >= currentDate;
+          });
+          setUpcomingEvents(filteredUpcomingEvents);
         } else {
           alert(response.error);
         }
@@ -33,25 +46,40 @@ export default function EventsList({ page }: EventsListProps) {
         style={{ display: "flex", flexWrap: "wrap", columnGap: "24px", rowGap: "50px" }}
         className="events"
       >
-        {events.length === 0 ? (
+        {upcomingEvents.length === 0 ? (
+          <p>Loading...</p>
+        ) : (
+          upcomingEvents.map((event: EventDetails) => (
+            <EventCard key={event._id} event={event} page={page} />
+          ))
+        )}
+      </div>
+    );
+  } else if (page === "upcoming-events") {
+    return (
+      <div
+        style={{ display: "flex", flexWrap: "wrap", columnGap: "85px", rowGap: "85px" }}
+        className="events"
+      >
+        {upcomingEvents.length === 0 ? (
           <p>Loading...</p>
         ) : (
-          events.map((event: EventDetails) => (
+          upcomingEvents.map((event: EventDetails) => (
             <EventCard key={event._id} event={event} page={page} />
           ))
         )}
       </div>
     );
-  } else {
+  } else if (page === "past-events") {
     return (
       <div
         style={{ display: "flex", flexWrap: "wrap", columnGap: "85px", rowGap: "85px" }}
         className="events"
       >
-        {events.length === 0 ? (
+        {pastEvents.length === 0 ? (
           <p>Loading...</p>
         ) : (
-          events.map((event: EventDetails) => (
+          pastEvents.map((event: EventDetails) => (
             <EventCard key={event._id} event={event} page={page} />
           ))
         )}
diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index b22c9a7e..3fa11b4e 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -27,7 +27,8 @@ const Footer = () => {
     getInvolved: "/involved",
     ourImpact: "/impact",
     ourMission: "/mission",
-    upcomingEvents: "/events",
+    upcomingEvents: "/upcoming-events",
+    pastEvents: "/past-events",
     testimonials: "/testimonials",
     ourTeam: "/team",
     contactUs: "/contact",
@@ -152,8 +153,8 @@ const Footer = () => {
             <Link className={`${styles.link} ${styles.normalLink}`} href={links.ourTeam}>
               Our Team
             </Link>
-            <Link className={`${styles.link} ${styles.normalLink}`} href={links.donate}>
-              Donate
+            <Link className={`${styles.link} ${styles.normalLink}`} href={links.pastEvents}>
+              Past Events
             </Link>
             <Link className={`${styles.link} ${styles.normalLink}`} href={links.newsletter}>
               Newsletter
@@ -164,6 +165,9 @@ const Footer = () => {
             <Link className={`${styles.link} ${styles.normalLink}`} href={links.contactUs}>
               Contact Us
             </Link>
+            <Link className={`${styles.link} ${styles.normalLink}`} href={links.donate}>
+              Donate
+            </Link>
           </div>
         </div>
 
diff --git a/frontend/src/components/HeaderBar.module.css b/frontend/src/components/HeaderBar.module.css
index eea5f22d..b93c24b6 100644
--- a/frontend/src/components/HeaderBar.module.css
+++ b/frontend/src/components/HeaderBar.module.css
@@ -131,7 +131,7 @@
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
   z-index: 1;
   width: 202px;
-  max-height: 104px;
+  max-height: 156px;
   overflow-y: auto;
 }
 
diff --git a/frontend/src/components/HeaderBar.tsx b/frontend/src/components/HeaderBar.tsx
index 6fd65157..fed5fa5b 100644
--- a/frontend/src/components/HeaderBar.tsx
+++ b/frontend/src/components/HeaderBar.tsx
@@ -43,7 +43,8 @@ const HeaderBar = () => {
           <div className={styles.getInvolved}>
             <Link href="/involved">Get Involved</Link>
             <div className={styles.getInvolvedDropdown}>
-              <Link href="/events">Upcoming Events</Link>
+              <Link href="/upcoming-events">Upcoming Events</Link>
+              <Link href="/past-events">Past Events</Link>
               <Link href="/donations">Donate</Link>
             </div>
           </div>
diff --git a/frontend/src/components/NavigationBar.tsx b/frontend/src/components/NavigationBar.tsx
index 67113771..ebb88097 100644
--- a/frontend/src/components/NavigationBar.tsx
+++ b/frontend/src/components/NavigationBar.tsx
@@ -17,11 +17,11 @@ const NavigationBar = () => {
       if (typeof window !== "undefined") {
         if (window.location.pathname === "/admin/dashboard") {
           return "Dashboard";
-        } else if (window.location.pathname === "/admin/eventcreator") {
+        } else if (window.location.pathname === "/admin/event-creator") {
           return "Event Creator";
-        } else if (window.location.pathname === "/admin/pageeditor") {
+        } else if (window.location.pathname === "/admin/page-editor") {
           return "Page Editor";
-        } else if (window.location.pathname === "/admin/newslettercreator") {
+        } else if (window.location.pathname === "/admin/newsletter-creator") {
           return "Newsletter Creator";
         } else if (window.location.pathname === "/admin/mailing-list") {
           return "Mailing List";
@@ -83,7 +83,7 @@ const NavigationBar = () => {
           <div className={activeMenu === "Event Creator" ? styles.menuActive : styles.menuDiv}>
             <Image width={18} height={18} src="/calendarIcon.svg" alt="Calendar Icon" />
             <Link
-              href="/admin/eventcreator"
+              href="/admin/event-creator"
               onClick={() => {
                 handleOnClick("Event Creator");
               }}
@@ -94,7 +94,7 @@ const NavigationBar = () => {
           <div className={activeMenu === "Page Editor" ? styles.menuActive : styles.menuDiv}>
             <Image width={18} height={18} src="/pageIcon.svg" alt="Page Icon" />
             <Link
-              href="/admin/pageeditor"
+              href="/admin/page-editor"
               onClick={() => {
                 handleOnClick("Page Editor");
               }}
@@ -105,7 +105,7 @@ const NavigationBar = () => {
           <div className={activeMenu === "Newsletter Creator" ? styles.menuActive : styles.menuDiv}>
             <Image width={18} height={18} src="/newsletterIcon.svg" alt="Newsletter Icon" />
             <Link
-              href="/admin/newslettercreator"
+              href="/admin/newsletter-creator"
               onClick={() => {
                 handleOnClick("Newsletter Creator");
               }}