diff --git a/src/app/events/Events.tsx b/src/app/events/Events.tsx
index c76e1bff..b054470e 100644
--- a/src/app/events/Events.tsx
+++ b/src/app/events/Events.tsx
@@ -3,13 +3,13 @@ import { EVENTS, type Event } from '@/data/events';
 import Image from 'next/image';
 import { FiClock, FiMapPin } from 'react-icons/fi';
 
-function Title() {
+function Title({ children }: { children: string }) {
     return (
         <div className="flex justify-center">
             <FancyRectangle colour="yellow" offset="8">
                 <div className="w-fit bg-yellow p-2">
                     <h2 className="text-center text-4xl font-bold text-grey md:text-6xl">
-                        Upcoming Events
+                        {children}
                     </h2>
                 </div>
             </FancyRectangle>
@@ -17,7 +17,15 @@ function Title() {
     );
 }
 
-function EventCard({ event, index }: { event: Event; index: number }) {
+function EventCard({
+    event,
+    index,
+    isPastEvent,
+}: {
+    event: Event;
+    index: number;
+    isPastEvent?: boolean;
+}) {
     return (
         <FancyRectangle colour="white" offset="8" rounded fullWidth>
             <div className="flex w-full flex-col gap-6 rounded-xl bg-white p-4 text-black md:flex-row">
@@ -26,7 +34,7 @@ function EventCard({ event, index }: { event: Event; index: number }) {
                     alt={`${event.title}`}
                     width={450}
                     height={450}
-                    className="w-full shrink-0 rounded-lg border-[3px] border-black bg-white object-contain md:w-[450px]"
+                    className={`w-full shrink-0 rounded-lg border-[3px] border-black bg-white object-contain md:w-[450px] ${isPastEvent ? 'grayscale' : ''}`}
                 />
                 <div className="grow space-y-2 md:space-y-4">
                     <div className="flex gap-6 font-bold">
@@ -44,7 +52,7 @@ function EventCard({ event, index }: { event: Event; index: number }) {
                             </div>
                         </div>
                         <div
-                            className={`h-fit rounded-md border-[3px] border-black px-4 py-2 ${['bg-orange', 'bg-yellow', 'bg-purple'][index % 3]}`}
+                            className={`h-fit rounded-md border-[3px] border-black px-4 py-2 ${['bg-orange', 'bg-yellow', 'bg-purple'][index % 3]} ${isPastEvent ? 'grayscale' : ''}`}
                         >
                             <div>{event.date.month}</div>
                             <div>{event.date.day}</div>
@@ -67,13 +75,34 @@ function EventCard({ event, index }: { event: Event; index: number }) {
     );
 }
 
+const getEventDate = (event: Event) => {
+    return new Date(
+        `${event.date.year} ${event.date.month} ${event.date.day} ${event.date.endTime}`
+    );
+};
+const CURRENT_DATE = new Date();
+const UPCOMING_EVENTS = EVENTS.filter((event) => getEventDate(event) >= CURRENT_DATE);
+const PAST_EVENTS = EVENTS.filter((event) => getEventDate(event) < CURRENT_DATE).reverse(); // Most recent event first
 export default function Events({ className }: { className?: string }) {
     return (
         <section className={`${className} space-y-8`}>
-            <Title />
-            {EVENTS.map((event, i) => (
-                <EventCard key={i} index={i} event={event} />
-            ))}
+            {UPCOMING_EVENTS.length > 0 && (
+                <>
+                    <Title>Upcoming Events</Title>
+                    {UPCOMING_EVENTS.map((event, i) => (
+                        <EventCard key={i} index={i} event={event} />
+                    ))}
+                </>
+            )}
+
+            {PAST_EVENTS.length > 0 && (
+                <>
+                    <Title>Past Events</Title>
+                    {PAST_EVENTS.map((event, i) => (
+                        <EventCard key={i} index={i} event={event} isPastEvent />
+                    ))}
+                </>
+            )}
         </section>
     );
 }
diff --git a/src/data/events.ts b/src/data/events.ts
index 5efb32f3..aa1a9d89 100644
--- a/src/data/events.ts
+++ b/src/data/events.ts
@@ -15,7 +15,7 @@ type Month =
     | 'DEC';
 export type Event = {
     title: string;
-    date: { month: Month; day: number };
+    date: { year: number; month: Month; day: number; endTime: string };
     time: string;
     location: string;
     details: string;
@@ -24,35 +24,35 @@ export type Event = {
 };
 
 export const EVENTS: Event[] = [
-    // {
-    //     title: 'Meet and Greet',
-    //     date: { month: 'MAR', day: 1 },
-    //     time: '5:00pm - 9:00pm',
-    //     location: 'Engineering and Maths EM105',
-    //     details:
-    //         "Come hang out and meet the Computer Science Club's committee and members in your first week of the new academic year!\nWe have board games in collaboration with the GAMES Club and our club owned Nintendo Switch.\nFood and drinks will also be provided.",
-    //     image: 'meet-and-greet.jpg',
-    // },
-    // {
-    //     title: 'Insight Into Industry',
-    //     date: { month: 'MAR', day: 6 },
-    //     time: '6:00pm - 9:00pm',
-    //     location: 'Ingkarni Wardli 715',
-    //     details:
-    //         'Unsure of what jobs are available in the tech industry? Or looking to find out more about where your expertise could take you? If so, come along and gain insights into what a career in the industry might look like.',
-    //     image: 'insight-into-industry.jpg',
-    // },
-    // {
-    //     title: 'Quiz Night',
-    //     date: { month: 'MAR', day: 8 },
-    //     time: '6:00pm - 9:00pm',
-    //     location: 'Ingkarni Wardli 218',
-    //     details: 'Join us for a night of quizzical encounters! Free food and prizes to come!',
-    //     image: 'quiz-night.jpg',
-    // },
+    {
+        title: 'Meet and Greet',
+        date: { year: 2024, month: 'MAR', day: 1, endTime: '21:00' },
+        time: '5:00pm - 9:00pm',
+        location: 'Engineering and Maths EM105',
+        details:
+            "Come hang out and meet the Computer Science Club's committee and members in your first week of the new academic year!\nWe have board games in collaboration with the GAMES Club and our club owned Nintendo Switch.\nFood and drinks will also be provided.",
+        image: 'meet-and-greet.jpg',
+    },
+    {
+        title: 'Insight Into Industry',
+        date: { year: 2024, month: 'MAR', day: 6, endTime: '21:00' },
+        time: '6:00pm - 9:00pm',
+        location: 'Ingkarni Wardli 715',
+        details:
+            'Unsure of what jobs are available in the tech industry? Or looking to find out more about where your expertise could take you? If so, come along and gain insights into what a career in the industry might look like.',
+        image: 'insight-into-industry.jpg',
+    },
+    {
+        title: 'Quiz Night',
+        date: { year: 2024, month: 'MAR', day: 8, endTime: '21:00' },
+        time: '6:00pm - 9:00pm',
+        location: 'Ingkarni Wardli 218',
+        details: 'Join us for a night of quizzical encounters! Free food and prizes to come!',
+        image: 'quiz-night.jpg',
+    },
     {
         title: 'Industry Night',
-        date: { month: 'APR', day: 2 },
+        date: { year: 2024, month: 'APR', day: 2, endTime: '21:00' },
         time: '6:00pm - 9:00pm',
         location: 'The National Wine Centre, Hickinbotham Hall',
         details: 'Connect with top companies and explore job opportunities in the tech industry!',