diff --git a/frontend/public/ASPA Title.png b/frontend/public/ASPA Title.png
new file mode 100644
index 0000000..e16f59b
Binary files /dev/null and b/frontend/public/ASPA Title.png differ
diff --git a/frontend/src/app/home/page.tsx b/frontend/src/app/home/page.tsx
index 39e272d..03e4be6 100644
--- a/frontend/src/app/home/page.tsx
+++ b/frontend/src/app/home/page.tsx
@@ -1,8 +1,12 @@
 import PastEvents from "@/ui/PastEvents";
+import Description from "@/ui/home/Description";
 
 export default function Home() {
   return (
     <div>
+      <section id="description">
+        <Description/>
+      </section>
       <section id="past-events">
         <PastEvents/>
       </section>
diff --git a/frontend/src/ui/home/Description.module.css b/frontend/src/ui/home/Description.module.css
new file mode 100644
index 0000000..5b48eaa
--- /dev/null
+++ b/frontend/src/ui/home/Description.module.css
@@ -0,0 +1,84 @@
+.container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 30px; 
+    color: #FBF5F0;
+    width: 75%;
+    margin: 0 auto;
+    margin-top: 90px;
+  }
+  
+  .leftColumn {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+  
+  .rightColumn {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .title {
+    font-size: 60px;
+    margin-bottom: 15px;
+    font-weight: bold;
+    line-height: 1.1;
+    overflow: hidden;
+  }
+  
+  .image {
+    width: 100%;
+    height: auto;
+    margin-bottom: 16px;
+    
+  }
+  
+  .buttonContainer {
+    display: flex;
+    justify-content: space-between;
+    width: 75%;
+    font-size: 20px;
+  }
+  
+.eventsButton {
+    padding: 8px 16px;
+    cursor: pointer;
+    border-radius: 20px;
+    background-color: #DD995B;
+    font-weight: 600;
+    margin: 15px 0;
+    color: #FBF5F0;
+  }
+
+  .horizontalAligned {
+    display: flex;
+    gap: 20px;
+    align-items: center;
+    color: #DD995B;
+  }
+
+  .regButton {
+    padding: 8px 16px;
+    cursor: pointer;
+    border-radius: 20px;
+    background-color: #87562A;
+    margin: 15px 0;
+    color: #FBF5F0;
+    width: 150px;
+    border-width: 2PX;
+
+  }
+
+  .logButton {
+    padding: 8px 16px;
+    cursor: pointer;
+    border-radius: 20px;
+    background-color: #DD995B;
+    margin: 15px 0;
+    color: #FBF5F0;
+    width: 150px;
+    border-width: 2PX;
+  }
+  
\ No newline at end of file
diff --git a/frontend/src/ui/home/Description.tsx b/frontend/src/ui/home/Description.tsx
new file mode 100644
index 0000000..56cc4e5
--- /dev/null
+++ b/frontend/src/ui/home/Description.tsx
@@ -0,0 +1,25 @@
+import styles from "./Description.module.css";
+
+export default function Description() {
+    return (
+        <div className={styles.container}>
+          <div className={styles.leftColumn}>
+            <h1 className={styles.title}>Welcome to Auckland Student Pool Association!</h1>
+            <p>
+              Leque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, Leque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, Leque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur,
+            </p>
+            <div className={styles.horizontalAligned}>
+              <button className={styles.eventsButton}>Current Events</button>
+              <p>dolor sit amet, consectetur,</p>
+            </div>
+          </div>
+          <div className={styles.rightColumn}>
+            <img src="/ASPA Title.png" alt="Association Image" className={styles.image}/>
+            <div className={styles.buttonContainer}>
+              <button className={styles.regButton}>REGISTER</button>
+              <button className={styles.logButton}>LOGIN</button>
+            </div>
+          </div>
+        </div>
+      );
+}