diff --git a/lib/events.ts b/lib/events.ts
index 886b6954..1b9f4b4b 100644
--- a/lib/events.ts
+++ b/lib/events.ts
@@ -62,3 +62,49 @@ export async function getEventsByTerm(
     .filter((name) => name.endsWith(".md"))
     .map((name) => name.slice(0, -".md".length));
 }
+
+export async function getUpcomingEvents(): Promise<Event[]> {
+  const today = new Date();
+  const currentYear = today.getFullYear();
+  const currentTerm = Math.trunc(today.getMonth() / 4);
+  const nextYear = currentTerm < 2 ? currentYear : currentYear + 1;
+  const nextTerm = (currentTerm + 1) % 3;
+
+  let currentEvents: Event[] = [];
+  try {
+    currentEvents = await Promise.all(
+      (
+        await getEventsByTerm(currentYear.toString(), TERMS[currentTerm])
+      ).map(
+        async (slug) =>
+          await getEventBySlug(currentYear.toString(), TERMS[currentTerm], slug)
+      )
+    );
+  } catch (error) {
+    currentEvents = [];
+  }
+  let nextEvents: Event[] = [];
+  try {
+    nextEvents = await Promise.all(
+      (
+        await getEventsByTerm(nextYear.toString(), TERMS[nextTerm])
+      ).map(
+        async (slug) =>
+          await getEventBySlug(nextYear.toString(), TERMS[nextTerm], slug)
+      )
+    );
+  } catch (error) {
+    nextEvents = [];
+  }
+  return currentEvents
+    .concat(nextEvents)
+    .filter((ev) => {
+      return new Date(ev.metadata.date).getTime() > Date.now();
+    })
+    .sort((a, b) => {
+      return (
+        new Date(a.metadata.date).getTime() -
+        new Date(b.metadata.date).getTime()
+      );
+    });
+}
diff --git a/pages/index.module.css b/pages/index.module.css
index a68520e4..3d098dc4 100644
--- a/pages/index.module.css
+++ b/pages/index.module.css
@@ -119,6 +119,7 @@
   }
 
   .cards > section {
+    width: calc(540rem / 16);
     max-width: calc(540rem / 16);
   }
 }
@@ -171,13 +172,14 @@
   .cards {
     flex-direction: column;
     justify-content: flex-start;
-    align-items: center;
+    align-items: stretch;
     gap: calc(8rem / 16);
 
     padding: calc(36rem / 16) calc(20rem / 16) calc(20rem / 16);
   }
 
   .cards > section {
+    width: unset;
     max-width: unset;
   }
 
diff --git a/pages/index.tsx b/pages/index.tsx
index 9d31b9e3..edb4d65c 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,3 +1,6 @@
+import { ParsedUrlQuery } from "querystring";
+
+import { GetStaticProps } from "next";
 import React from "react";
 
 import { ConnectWithUs } from "@/components/ConnectWithUs";
@@ -7,27 +10,19 @@ import { EventDescriptionCard } from "@/components/EventDescriptionCard";
 import { Image } from "@/components/Image";
 import { NewsCard } from "@/components/NewsCard";
 import { SocialLinks } from "@/components/SocialLinks";
+import { Event, getUpcomingEvents } from "@/lib/events";
 
-import AltTab, {
-  metadata as altTabEventMetadata,
-} from "../content/playground/alt-tab.event.mdx";
-import OOTBReact, {
-  metadata as OOTBReactEventMetadata,
-} from "../content/playground/ootb-react.event.mdx";
 import UnavailableContent, {
   metadata as unavailableMetadata,
 } from "../content/playground/unavailable.news.mdx";
 
 import styles from "./index.module.css";
 
-// temporary event and news imports
-
-export default function Home() {
-  const events = [
-    { Content: OOTBReact, metadata: OOTBReactEventMetadata },
-    { Content: AltTab, metadata: altTabEventMetadata },
-  ];
+interface Props {
+  events: Event[];
+}
 
+export default function Home(props: Props) {
   return (
     <>
       <DefaultLayout>
@@ -54,18 +49,31 @@ export default function Home() {
       </DefaultLayout>
       <div className={styles.cardsBackground}>
         <div className={styles.cards}>
-          {/* TODO: add links to past events and past news */}
+          {/* TODO: add links to past/upcoming events and past news */}
           <section className={styles.events}>
             <h1 className={styles.cardsHeading}>Upcoming Events</h1>
             <p className={styles.cardsDescription}>See past events here</p>
             <hr className={styles.cardsDividingLine} />
             <div className={styles.eventCards}>
-              {events.map(({ metadata }) => (
-                <EventDescriptionCard
-                  {...metadata}
-                  key={metadata.name + metadata.date.toString()}
-                />
-              ))}
+              {props.events.length > 0 ? (
+                props.events
+                  .slice(0, 2)
+                  .map((event) => (
+                    <EventDescriptionCard
+                      {...event.metadata}
+                      date={new Date(event.metadata.date)}
+                      key={event.metadata.name + event.metadata.date.toString()}
+                    />
+                  ))
+              ) : (
+                <p>
+                  There are no upcoming events right now. Please check back
+                  later!
+                </p>
+              )}
+              {props.events.length > 2 ? (
+                <p>See more upcoming events here</p>
+              ) : null}
             </div>
           </section>
           <section className={styles.news}>
@@ -92,3 +100,10 @@ export default function Home() {
 Home.Layout = function HomeLayout(props: { children: React.ReactNode }) {
   return <div className={styles.page}>{props.children}</div>;
 };
+
+type Params = ParsedUrlQuery;
+
+export const getStaticProps: GetStaticProps<Props, Params> = async () => {
+  const events = await getUpcomingEvents();
+  return { props: { events } };
+};