diff --git a/pages/index.mdx b/pages/index.mdx
deleted file mode 100644
index 7a6200c7..00000000
--- a/pages/index.mdx
+++ /dev/null
@@ -1 +0,0 @@
-Visit the [playground](/playground)
diff --git a/pages/index.module.css b/pages/index.module.css
new file mode 100644
index 00000000..5f6d99c5
--- /dev/null
+++ b/pages/index.module.css
@@ -0,0 +1,20 @@
+.intro {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.cards {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.connect {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
diff --git a/pages/index.tsx b/pages/index.tsx
new file mode 100644
index 00000000..13b6e5eb
--- /dev/null
+++ b/pages/index.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import styles from "./index.module.css";
+
+export default function Home() {
+  return (
+    <>
+      <div className={styles.intro}>
+        <h1>Computer Science Club</h1>
+        <p>University of Waterloo&apos;s student computing community</p>
+      </div>
+      <div className={styles.cards}>
+        <div className={styles.events}>
+          <h3>Upcoming Events</h3>
+          <p>See past events here</p>
+          <p>event cards</p>
+        </div>
+        <div className={styles.news}>
+          <h3>News</h3>
+          <p>Updates from our execs! See past news here</p>
+          <p>news card</p>
+        </div>
+      </div>
+      <div className={styles.connect}>
+        <p>socials</p>
+      </div>
+    </>
+  );
+}