diff --git a/next/app/HomepageContent.ts b/next/app/HomepageContent.ts
index c37c4540..96ac85e9 100644
--- a/next/app/HomepageContent.ts
+++ b/next/app/HomepageContent.ts
@@ -1,3 +1,8 @@
+import { Event } from "./events/event";
+
+const defaultDescription = `This is a description of the event. Lorem ipsum dolor sit amet,
+                            consectetur adipiscing elit. Integer ullamcorper.`
+
 interface HomepageContent {
     description: string;
     weeklyMeetingCallout: string;
@@ -16,4 +21,28 @@ export default {
     instagramLink: "https://www.instagram.com/rit_sse/",
     tiktokLink: "https://www.tiktok.com/@rit_sse",
     twitchLink: "https://www.twitch.tv/rit_sse",
-} satisfies HomepageContent;
\ No newline at end of file
+} satisfies HomepageContent;
+
+export const UpcomingEvents = [
+    {
+        title: "Spring Fling",
+        date: "April 13th 5:00pm",
+        location: "GOL-1400",
+        imageSrc: "spring-fling-2.png",
+        description: defaultDescription
+    },
+    {
+        title: "SSE Mentoring Review Session",
+        date: "April 22nd 6:00pm",
+        location: "GOL-1670",
+        imageSrc: "mentoring-review-session-1.png",
+        description: defaultDescription
+    },
+    {
+        title: "Micro Talks 2.0",
+        date: "April 24th 4:00pm",
+        location: "GOL-1670",
+        imageSrc: "talks-1.jpg",
+        description: defaultDescription
+    },
+] satisfies Event[];
\ No newline at end of file
diff --git a/next/app/events/EventCard.tsx b/next/app/events/EventCard.tsx
new file mode 100644
index 00000000..3aa39786
--- /dev/null
+++ b/next/app/events/EventCard.tsx
@@ -0,0 +1,23 @@
+'use client'
+import { Event } from "./event";
+import { clsx } from "clsx"; // you will need to do 'npm install' if you haven't already, as I have added this for light and dark mode color switching
+import { useTheme } from "next-themes";
+import { Theme } from '@/types/theme';
+
+export const EventCard: React.FC<Event> = (event: Event) => {
+    const { theme } = useTheme();
+
+    return (
+        <div className={clsx("flex flex-col shadow-md rounded-3xl overflow-hidden",
+            { "bg-white": theme === Theme.Light, "bg-[#172630]": theme === Theme.Dark, },
+        )}>
+            <img src={event.imageSrc} className="w-full h-1/3" alt="" />
+            <div className="p-4">
+                <h4 className="text-primary">{event.title.slice(0, 1).toUpperCase() + event.title.slice(1)}</h4> {/* Make sure the title is captialized, but otherwise, this is just the title of the card */}
+                <h5>{event.date}</h5>
+                <h5>{event.location}</h5>
+                <p>{event.description}</p>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/next/app/events/event.ts b/next/app/events/event.ts
new file mode 100644
index 00000000..0e0f471c
--- /dev/null
+++ b/next/app/events/event.ts
@@ -0,0 +1,7 @@
+export interface Event {
+    title: string,
+    date: string,
+    location: string,
+    imageSrc: string,
+    description: string
+}
\ No newline at end of file
diff --git a/next/app/page.tsx b/next/app/page.tsx
index d3603ac0..54ee9bb6 100644
--- a/next/app/page.tsx
+++ b/next/app/page.tsx
@@ -4,71 +4,48 @@
 import Image from 'next/image'
 import { CTAButton } from '@/components/common/CTAButton';
 import HomepageContent from './HomepageContent';
-import { DiscordIcon, InstagramIcon, SlackIcon, TikTokIcon, TwitchIcon } from '@/components/common/Icons';
-import Link from 'next/link';
+import { UpcomingEvents } from './HomepageContent';
+import { EventCard } from './events/EventCard';
 
 export default function Home() {
-  const placeholder_w = 800;
-  const placeholder_h = 800;
+    return (
+        <div className='space-y-24'>
+            {/* Hero section */}
+            <div className='h-auto md:h-[55vh] my-auto flex flex-col md:flex-row items-center md:justify-evenly mt-24'>
+                <div className="flex flex-col justify-center w-auto md:w-2/5">
+                    <h1 className='text-center md:text-left'>
+                        Society of
+                        <span className="block lg:inline"> Software Engineers </span>
+                    </h1>
 
-  const placeholder_img = (
-    <Image
-      src={`https://dummyimage.com/${placeholder_w}x${placeholder_h}`}
-      alt="Placeholder"
-      width={placeholder_w}
-      height={placeholder_h}
-      className="w-full h-auto rounded-[60px]"
-    />
-  )
+                    <p className="mx-auto mt-4 sm:text-xl/relaxed text-center md:text-left">
+                        {HomepageContent.description}
+                    </p>
+                    <p className='mt-4 font-bold text-center md:text-left'>
+                        {HomepageContent.weeklyMeetingCallout}
+                    </p>
 
-  return (
-    <>
-      {/* Hero section */}
-      <div className='my-auto flex flex-col md:flex-row items-center md:justify-evenly'>
-        <div className="flex flex-col justify-center w-auto md:w-2/5">
-          <h1 className='text-center md:text-left'>
-            Society of
-            <span className="block lg:inline"> Software Engineers </span>
-          </h1>
+                    <div className="mt-8 flex flex-row flex-wrap gap-4 min-[460px]:flex-row justify-center md:justify-start">
+                        <CTAButton href={HomepageContent.slackLink} text="Join Slack" />
+                        <CTAButton href="/about/get-involved" text="Get Involved" />
+                    </div>
+                </div>
+                <div className='flex mt-12 md:mt-0 w-11/12 sm:w-[45%] sm:h-full justify-center'>
+                    <img src="student-involvement-1.jpg" alt="Tech committee meeting" className="w-full h-auto rounded-[60px]" />
+                </div>
+            </div>
 
-          <p className="mx-auto mt-4 sm:text-xl/relaxed text-center md:text-left">
-            {HomepageContent.description}
-          </p>
-          <p className='mt-4 font-bold text-center md:text-left'>
-            {HomepageContent.weeklyMeetingCallout}
-          </p>
-
-          <div className="mt-8 flex flex-row flex-wrap gap-4 min-[460px]:flex-row justify-center md:justify-start">
-            <CTAButton href={HomepageContent.slackLink} text="Join Slack" />
-            <CTAButton href="/about/get-involved" text="Get Involved" />
-          </div>
-        </div>
-        <div className='flex mt-12 md:mt-0 w-11/12 sm:w-2/5 justify-center'>
-          {placeholder_img}
-        </div>
-      </div>
-      {/* About Us Section */}
-      {/* <div className='flex flex-col md:flex-row items-center md:justify-evenly md:mt-28'>
-        <div className='flex mt-12 md:mt-0 w-11/12 sm:w-2/5 justify-center'>
-          {placeholder_img}
-        </div>
-        <div className="flex flex-col justify-center w-auto md:w-2/5">
-          <h1 className='text-center md:text-left mt-8 md:mt-0'>
-            About Us
-          </h1>
-
-          <p className="mx-auto mt-4 text-lg/relaxed text-center md:text-left">
-            Tess is Tech Head. Tess is Tech Head. Tess is Tech Head. Tess is Tech Head.
-            Tess is Tech Head. Tess is Tech Head. Tess is Tech Head. Tess is Tech Head.
-            Tess is Tech Head. Tess is Tech Head. Tess is Tech Head. Tess is Tech Head.
-            Tess is Tech Head. Tess is Tech Head. Tess is Tech Head. Tess is Tech Head.
-            Tess is Tech Head. Tess is Tech Head. Tess is Tech Head. Tess is Tech Head.
-            Tess is Tech Head. Tess is Tech Head. Tess is Tech Head. Tess is Tech Head.
-            Tess is Tech Head. Tess is Tech Head. Tess is Tech Head. Tess is Tech Head.
-            Tess is Tech Head. Tess is Tech Head. Tess is Tech Head. Tess is Tech Head.
-          </p>
+            {/* Upcoming Events */}
+            <div>
+              <h1 className='mt-5'>Upcoming Events</h1>
+              <div className='flex flex-row justify-center items-center'>
+                <div className='mt-8 grid gap-8 grid-cols-3 w-10/12'>
+                    {UpcomingEvents.map((event, idx) => (
+                        <EventCard key={idx} {...event} />
+                    ))}
+                </div>
+              </div>
+            </div>
         </div>
-      </div> */}
-    </>
-  );
+    );
 }
\ No newline at end of file
diff --git a/next/package.json b/next/package.json
index 5236eee7..db621995 100644
--- a/next/package.json
+++ b/next/package.json
@@ -18,6 +18,7 @@
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.15",
+    "clsx": "^2.1.0",
     "eslint": "8.48.0",
     "eslint-config-next": "13.4.19",
     "next": "^13.5.6",
diff --git a/next/public/codfather.jpg b/next/public/codfather.jpg
new file mode 100644
index 00000000..46e0b83f
Binary files /dev/null and b/next/public/codfather.jpg differ
diff --git a/next/public/mentoring-review-session-1.png b/next/public/mentoring-review-session-1.png
new file mode 100644
index 00000000..0a5fc4e0
Binary files /dev/null and b/next/public/mentoring-review-session-1.png differ
diff --git a/next/public/spring-fling-2.png b/next/public/spring-fling-2.png
new file mode 100644
index 00000000..2c501e90
Binary files /dev/null and b/next/public/spring-fling-2.png differ
diff --git a/next/public/student-involvement-1.jpg b/next/public/student-involvement-1.jpg
new file mode 100644
index 00000000..6fc73351
Binary files /dev/null and b/next/public/student-involvement-1.jpg differ
diff --git a/next/public/talks-1.jpg b/next/public/talks-1.jpg
new file mode 100644
index 00000000..15395cc8
Binary files /dev/null and b/next/public/talks-1.jpg differ
diff --git a/next/public/talks-2.jpg b/next/public/talks-2.jpg
new file mode 100644
index 00000000..610e9581
Binary files /dev/null and b/next/public/talks-2.jpg differ