diff --git a/app/page.tsx b/app/page.tsx
index 3428c6c..c1e934a 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,3 +1,5 @@
+import AboutSection from "@/components/AboutSection";
+
 export default function Home() {
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24 text-text-primary max-w-7xl w-full mx-auto">
@@ -9,8 +11,10 @@ export default function Home() {
 
       {/* START OF THE ABOUT SECTION */}
       <section id="about" className="min-h-screen w-full flex flex-col items-center">
-        {/* About code goes here */}
-        <h2>About</h2>
+        <h2 className="text-4xl font-bold p-16 m-16 h-16 gap-16">
+          About Us
+        </h2>
+        <AboutSection />
       </section>
 
       {/* START OF THE CHALLENGES SECTION */}
diff --git a/components/AboutSection.tsx b/components/AboutSection.tsx
new file mode 100644
index 0000000..b3ebcbd
--- /dev/null
+++ b/components/AboutSection.tsx
@@ -0,0 +1,56 @@
+export default function AboutSection() {
+  return (
+    <section className="grid grid-cols-2 gap-8">
+      <AboutContent />
+      <AboutCarousel />
+    </section>
+  )
+}
+
+function AboutContent() {
+  return (
+    <section className="flex flex-col gap-8">
+      <div className="flex flex-col gap-4">
+        <p>
+          Graphics Programming Knights (GPK) is a{" "}
+          <a
+            href="https://knightconnect.campuslabs.com/engage/organization/graphicsprogrammingknights"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-accent-light hover:text-accent font-semibold underline underline-offset-4 transition-colors"
+          >
+            UCF Registered Student Organization
+          </a>{" "}
+          dedicated to bringing together students passionate about graphics programming, shaders, game development, and real-time rendering.
+        </p>
+        <p>
+          We host hands-on workshops, exciting monthly coding challenges, inspiring speaker events from industry professionals, and fun socials that bring our community together.
+        </p>
+      </div>
+
+      {/* Buttons Section */}
+      <div className="grid grid-cols-2 gap-4">
+        <button className="px-4 py-3 bg-accent border-2 border-accent-light text-primary rounded-md hover:bg-accent-light hover:text-page-background hover:border-accent transition-all active:scale-[0.98] cursor-pointer">
+          Workshops
+        </button>
+        <button className="px-4 py-3 bg-accent border-2 border-accent-light text-primary rounded-md hover:bg-accent-light hover:text-page-background hover:border-accent transition-all active:scale-[0.98] cursor-pointer">
+          Monthly Challenges
+        </button>
+        <button className="px-4 py-3 bg-accent border-2 border-accent-light text-primary rounded-md hover:bg-accent-light hover:text-page-background hover:border-accent transition-all active:scale-[0.98] cursor-pointer">
+          Speaker Events
+        </button>
+        <button className="px-4 py-3 bg-accent border-2 border-accent-light text-primary rounded-md hover:bg-accent-light hover:text-page-background hover:border-accent transition-all active:scale-[0.98] cursor-pointer">
+          Socials
+        </button>
+      </div>
+    </section>
+  );
+}
+
+function AboutCarousel() {
+  return (
+    <section className="text-center">
+      Carousel goes here
+    </section>
+  );
+}