diff --git a/app/page.tsx b/app/page.tsx
index 37313f6..da36ffd 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,5 +1,6 @@
 import AboutSection from "@/components/AboutSection";
 import Footer from "@/components/Footer";
+import HeroSection from "@/components/HeroSection";
 import TeamSection from "@/components/TeamSection";
 
 export default function Home() {
@@ -8,8 +9,7 @@ export default function Home() {
       <main className="flex min-h-screen flex-col items-center justify-between px-24 pb-24 text-text-primary max-w-7xl w-full mx-auto">
         {/* START OF THE HOME SECTION */}
         <section id="home" className="min-h-screen w-full flex flex-col items-center">
-          {/* Home code goes here */}
-          <h2>Home</h2>
+          <HeroSection />
         </section>
 
         {/* START OF THE ABOUT SECTION */}
diff --git a/components/HeroSection.tsx b/components/HeroSection.tsx
new file mode 100644
index 0000000..47cfff1
--- /dev/null
+++ b/components/HeroSection.tsx
@@ -0,0 +1,56 @@
+import { FaInstagram, FaLinkedin, FaDiscord } from "react-icons/fa";
+
+export default function HeroSection() {
+  return (
+    <section className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-36 items-center py-8 md:py-16 pr-8 md:pr-16 bg-page-background text-text-primary w-full flex-1">
+      {/* Left Column: Heading, Subheading, Button, and Icons */}
+      <div className="flex flex-col gap-8 max-w-3xl -ml-24 md:-ml-36">
+        <h1 className="text-6xl md:text-8xl font-extrabold tracking-tight">
+          Graphics Programming Knights
+        </h1>
+        <p className="text-2xl md:text-3xl text-text-secondary">
+          University of Central Florida&apos;s Computer Graphics RSO
+        </p>
+
+        {/* Button and Icons Row */}
+        <div className="flex flex-row items-center gap-6 mt-2">
+          <a
+            href="https://discord.gg/XwDHkT3fRa"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-2 bg-accent hover:bg-accent-light px-10 py-5 rounded-full text-text-primary text-xl font-medium transition-colors"
+          >
+            Join Us
+            <FaDiscord size={28} />
+          </a>
+
+          {/* Icons Row */}
+          <div className="flex flex-row items-center gap-5 text-text-secondary">
+            <a
+              href="https://www.instagram.com/gpknights_"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hover:text-text-primary transition-colors"
+            >
+              <FaInstagram className="w-10 h-10" />
+            </a>
+            <a
+              href="https://www.linkedin.com/company/graphics-programming-knights/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hover:text-text-primary transition-colors"
+            >
+              <FaLinkedin className="w-10 h-10" />
+            </a>
+          </div>
+        </div>
+      </div>
+
+      {/* Right Column: Placeholder for ASCII render */}
+      <div className="flex justify-center items-center w-full h-full">
+        {/* ASCII render goes here -- see T6 */}
+        <span className="text-text-secondary italic text-2xl translate-x-8 md:translate-x-16">[ASCII Render Placeholder]</span>
+      </div>
+    </section>
+  );
+}
diff --git a/package-lock.json b/package-lock.json
index 15b8b73..e5e884e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "next": "^16.1.6",
         "react": "19.2.3",
         "react-dom": "19.2.3",
+        "react-icons": "^5.7.0",
         "three": "^0.184.0"
       },
       "devDependencies": {
@@ -5856,6 +5857,15 @@
         "react": "^19.2.3"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.7.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.7.0.tgz",
+      "integrity": "sha512-LBLy340Rzqy6+/yVhZKT3B/QpP1BZaesGqasf09HPOBzRarcDIFH0WwXlXQfE7q7ipxK4MSiC5DIBWURCny6fw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index c803790..61b4e0a 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "next": "^16.1.6",
     "react": "19.2.3",
     "react-dom": "19.2.3",
+    "react-icons": "^5.7.0",
     "three": "^0.184.0"
   },
   "devDependencies": {