diff --git a/src/components/PageSection.jsx b/src/components/PageSection.jsx
new file mode 100644
index 0000000..ec3a6f9
--- /dev/null
+++ b/src/components/PageSection.jsx
@@ -0,0 +1,32 @@
+export default function PageSection({ heading, colorVariant, children }) {
+  // split heading text so that yellow can be applied to last word only
+  var headingWithoutLastWord;
+  var headingLastWord;
+  if (heading) {
+    headingWithoutLastWord =
+      heading.length > 1
+        ? heading.trim().split(/\s+/).slice(0, -1).join(" ")
+        : null;
+    headingLastWord =
+      heading.length > 1 ? heading.trim().split(/\s+/).pop() : heading;
+  }
+
+  const bgColorClasses = {
+    A: "",
+    B: "backdrop-brightness-90",
+  };
+
+  return (
+    <section className={`py-24 px-4 ${bgColorClasses[colorVariant]}`}>
+      <div className="max-w-7xl mx-auto">
+        {heading && (
+          <h2 className="text-4xl md:text-5xl lg:text-6xl text-center mb-20 text-gray-200">
+            {headingWithoutLastWord}{" "}
+            <span className="text-yellow-400">{headingLastWord}</span>{" "}
+          </h2>
+        )}
+        {children}
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/SponsorTicker.jsx b/src/components/SponsorTicker.jsx
index abd21fc..757ef42 100644
--- a/src/components/SponsorTicker.jsx
+++ b/src/components/SponsorTicker.jsx
@@ -100,100 +100,93 @@ const SponsorTicker = () => {
   const duplicatedLogos = [...logos, ...logos, ...logos, ...logos];
 
   return (
-    <section className="pt-24 px-4 bg-gradient-to-br from-gray-800 to-gray-900">
-      <div className="max-w-6xl mx-auto">
-        <h2 className="text-4xl md:text-5xl lg:text-6xl text-center mb-20 text-gray-200">
-          OUR <span className="text-accent">SPONSORS</span>
-        </h2>
-      </div>
-      <div
-        className="project-ticker-wrapper"
-        style={{
-          pointerEvents: "auto",
-          position: "relative",
-          // zIndex: 10,
-          marginBottom: 0,
-        }}
-      >
-        <div className="project-ticker-container">
-          <div
-            className="project-ticker-track"
-            style={{ animationDuration: "90s" }}
-          >
-            {duplicatedLogos.map((logo, index) => {
-              // Custom scaling and rectangle size for specific logos
-              let customImgStyle = {
-                maxHeight: 40,
-                maxWidth: 120,
-                width: "auto",
-                height: "auto",
-                objectFit: "contain",
-                background: "#fff",
-                borderRadius: "999px",
-                padding: 2,
-                margin: "0 auto",
-                display: "block",
-              };
-              if (logo.name === "14 & Elm") {
-                customImgStyle.maxHeight = 60;
-                customImgStyle.maxWidth = 140;
-              }
-              if (logo.name === "L3 Harris") {
-                customImgStyle.maxHeight = 90;
-                customImgStyle.maxWidth = 220;
-              }
-              if (logo.name === "Williams Energy Partners") {
-                customImgStyle.maxHeight = 90;
-                customImgStyle.maxWidth = 220;
-              }
-              if (logo.name === "TAMU Mechanical Engineering") {
-                customImgStyle.maxHeight = 60;
-                customImgStyle.maxWidth = 220;
-              }
-              if (logo.name === "TAMU SEC") {
-                customImgStyle.maxHeight = 60;
-                customImgStyle.maxWidth = 220;
-              }
-              return (
-                <a
-                  key={`${logo.id}-${index}`}
-                  className="project-ticker-block glass-effect flex items-center justify-center"
-                  style={{
-                    width: 120,
-                    height: 60,
-                    background: "#fff",
-                    borderRadius: "999px",
-                    padding: 0,
-                    boxShadow: "0 8px 32px 0 rgba(31, 38, 135, 0.10)",
-                    border: "1.5px solid #e5e7eb",
-                    margin: "0 0.25rem",
-                    transition:
-                      "transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s cubic-bezier(0.4,0,0.2,1)",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    backgroundClip: "padding-box",
-                    overflow: "hidden",
-                  }}
-                  href={logo.link}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  tabIndex={0}
-                  aria-label={`Visit ${logo.name} website`}
-                >
-                  <img
-                    src={logo.url}
-                    alt={logo.alt}
-                    style={customImgStyle}
-                    className="sponsor-logo"
-                  />
-                </a>
-              );
-            })}
-          </div>
+    <div
+      className="project-ticker-wrapper"
+      style={{
+        pointerEvents: "auto",
+        position: "relative",
+        // zIndex: 10,
+        marginBottom: 0,
+      }}
+    >
+      <div className="project-ticker-container">
+        <div
+          className="project-ticker-track"
+          style={{ animationDuration: "90s" }}
+        >
+          {duplicatedLogos.map((logo, index) => {
+            // Custom scaling and rectangle size for specific logos
+            let customImgStyle = {
+              maxHeight: 40,
+              maxWidth: 120,
+              width: "auto",
+              height: "auto",
+              objectFit: "contain",
+              background: "#fff",
+              borderRadius: "999px",
+              padding: 2,
+              margin: "0 auto",
+              display: "block",
+            };
+            if (logo.name === "14 & Elm") {
+              customImgStyle.maxHeight = 60;
+              customImgStyle.maxWidth = 140;
+            }
+            if (logo.name === "L3 Harris") {
+              customImgStyle.maxHeight = 90;
+              customImgStyle.maxWidth = 220;
+            }
+            if (logo.name === "Williams Energy Partners") {
+              customImgStyle.maxHeight = 90;
+              customImgStyle.maxWidth = 220;
+            }
+            if (logo.name === "TAMU Mechanical Engineering") {
+              customImgStyle.maxHeight = 60;
+              customImgStyle.maxWidth = 220;
+            }
+            if (logo.name === "TAMU SEC") {
+              customImgStyle.maxHeight = 60;
+              customImgStyle.maxWidth = 220;
+            }
+            return (
+              <a
+                key={`${logo.id}-${index}`}
+                className="project-ticker-block glass-effect flex items-center justify-center"
+                style={{
+                  width: 120,
+                  height: 60,
+                  background: "#fff",
+                  borderRadius: "999px",
+                  padding: 0,
+                  boxShadow: "0 8px 32px 0 rgba(31, 38, 135, 0.10)",
+                  border: "1.5px solid #e5e7eb",
+                  margin: "0 0.25rem",
+                  transition:
+                    "transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s cubic-bezier(0.4,0,0.2,1)",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  backgroundClip: "padding-box",
+                  overflow: "hidden",
+                }}
+                href={logo.link}
+                target="_blank"
+                rel="noopener noreferrer"
+                tabIndex={0}
+                aria-label={`Visit ${logo.name} website`}
+              >
+                <img
+                  src={logo.url}
+                  alt={logo.alt}
+                  style={customImgStyle}
+                  className="sponsor-logo"
+                />
+              </a>
+            );
+          })}
         </div>
       </div>
-    </section>
+    </div>
   );
 };
 
diff --git a/src/pages/About.jsx b/src/pages/About.jsx
index 0ae3e1e..e10ffea 100644
--- a/src/pages/About.jsx
+++ b/src/pages/About.jsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import StatisticsCard from "../components/StatisticsCard";
 import TextLink from "../components/TextLink";
 import Hero from "../components/Hero";
+import PageSection from "../components/PageSection";
 
 const About = () => {
   const statistics = [
@@ -151,124 +152,113 @@ const About = () => {
       ></Hero>
 
       {/* Statistics Section */}
-      <section className="py-24 px-4 bg-gradient-to-br from-gray-800 to-gray-900">
-        <div className="max-w-7xl mx-auto">
-          <h2 className="text-4xl md:text-5xl lg:text-6xl text-center mb-20 text-gray-200">
-            OUR <span className="text-yellow-400">IMPACT</span>
-          </h2>
-          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
-            {statistics.map((stat, index) => (
-              <StatisticsCard key={index} {...stat} />
-            ))}
-          </div>
+      <PageSection heading="OUR IMPACT" colorVariant="B">
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+          {statistics.map((stat, index) => (
+            <StatisticsCard key={index} {...stat} />
+          ))}
         </div>
-      </section>
+      </PageSection>
 
       {/* Leadership Section */}
-      <section className="py-24 px-4 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900">
-        <div className="max-w-7xl mx-auto">
-          <h2 className="text-4xl md:text-5xl lg:text-6xl text-center mb-20 text-gray-200">
-            OUR <span className="text-yellow-400">TEAM</span>
-          </h2>
-
-          {/* Executive Roles Accordion */}
-          <div className="mb-12">
-            <button
-              onClick={() => toggleSection("executive")}
-              className="w-full text-left font-light text-xl text-gray-200 mb-4"
-            >
-              Executive Roles {openSection.executive ? "▲" : "▼"}
-            </button>
-            {openSection.executive && (
-              <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-                {renderLeadership([
-                  "President",
-                  "Internal VP",
-                  "External VP",
-                  "Project VP",
-                  "Development VP",
-                ])}
-              </div>
-            )}
-          </div>
+      <PageSection heading="OUR TEAM" colorVariant="A">
+        {/* Executive Roles Accordion */}
+        <div className="mb-12">
+          <button
+            onClick={() => toggleSection("executive")}
+            className="w-full text-left font-light text-xl text-gray-200 mb-4"
+          >
+            Executive Roles {openSection.executive ? "▲" : "▼"}
+          </button>
+          {openSection.executive && (
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+              {renderLeadership([
+                "President",
+                "Internal VP",
+                "External VP",
+                "Project VP",
+                "Development VP",
+              ])}
+            </div>
+          )}
+        </div>
 
-          {/* Internal Branch Accordion */}
-          <div className="mb-12">
-            <button
-              onClick={() => toggleSection("internal")}
-              className="w-full text-left font-light text-xl text-gray-200 mb-4"
-            >
-              Internal Branch {openSection.internal ? "▲" : "▼"}
-            </button>
-            {openSection.internal && (
-              <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-                {renderLeadership([
-                  "Internal VP",
-                  "Finance",
-                  "Logistics",
-                  "Lab Quality Chair",
-                  "Documentation",
-                ])}
-              </div>
-            )}
-          </div>
+        {/* Internal Branch Accordion */}
+        <div className="mb-12">
+          <button
+            onClick={() => toggleSection("internal")}
+            className="w-full text-left font-light text-xl text-gray-200 mb-4"
+          >
+            Internal Branch {openSection.internal ? "▲" : "▼"}
+          </button>
+          {openSection.internal && (
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+              {renderLeadership([
+                "Internal VP",
+                "Finance",
+                "Logistics",
+                "Lab Quality Chair",
+                "Documentation",
+              ])}
+            </div>
+          )}
+        </div>
 
-          {/* External Branch Accordion */}
-          <div className="mb-12">
-            <button
-              onClick={() => toggleSection("external")}
-              className="w-full text-left font-light text-xl text-gray-200 mb-4"
-            >
-              External Branch {openSection.external ? "▲" : "▼"}
-            </button>
-            {openSection.external && (
-              <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-                {renderLeadership([
-                  "External VP",
-                  "Public Relations",
-                  "Webmaster",
-                  "Corporate Relations",
-                  "Events",
-                ])}
-              </div>
-            )}
-          </div>
+        {/* External Branch Accordion */}
+        <div className="mb-12">
+          <button
+            onClick={() => toggleSection("external")}
+            className="w-full text-left font-light text-xl text-gray-200 mb-4"
+          >
+            External Branch {openSection.external ? "▲" : "▼"}
+          </button>
+          {openSection.external && (
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+              {renderLeadership([
+                "External VP",
+                "Public Relations",
+                "Webmaster",
+                "Corporate Relations",
+                "Events",
+              ])}
+            </div>
+          )}
+        </div>
 
-          {/* Projects Branch Accordion */}
-          <div className="mb-12">
-            <button
-              onClick={() => toggleSection("projects")}
-              className="w-full text-left font-light text-xl text-gray-200 mb-4"
-            >
-              Projects Branch {openSection.projects ? "▲" : "▼"}
-            </button>
-            {openSection.projects && (
-              <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-                {renderLeadership(["Project VP", "Design Review Chair"])}
-              </div>
-            )}
-          </div>
+        {/* Projects Branch Accordion */}
+        <div className="mb-12">
+          <button
+            onClick={() => toggleSection("projects")}
+            className="w-full text-left font-light text-xl text-gray-200 mb-4"
+          >
+            Projects Branch {openSection.projects ? "▲" : "▼"}
+          </button>
+          {openSection.projects && (
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+              {renderLeadership(["Project VP", "Design Review Chair"])}
+            </div>
+          )}
+        </div>
 
-          {/* Development Branch Accordion */}
-          <div className="mb-12">
-            <button
-              onClick={() => toggleSection("development")}
-              className="w-full text-left font-light text-xl text-gray-200 mb-4"
-            >
-              Development Branch {openSection.development ? "▲" : "▼"}
-            </button>
-            {openSection.development && (
-              <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-                {renderLeadership([
-                  "Development VP",
-                  "Workshops",
-                  "Hatchling Director",
-                ])}
-              </div>
-            )}
-          </div>
+        {/* Development Branch Accordion */}
+        <div className="mb-12">
+          <button
+            onClick={() => toggleSection("development")}
+            className="w-full text-left font-light text-xl text-gray-200 mb-4"
+          >
+            Development Branch {openSection.development ? "▲" : "▼"}
+          </button>
+          {openSection.development && (
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+              {renderLeadership([
+                "Development VP",
+                "Workshops",
+                "Hatchling Director",
+              ])}
+            </div>
+          )}
         </div>
-      </section>
+      </PageSection>
     </div>
   );
 };
diff --git a/src/pages/Apply.jsx b/src/pages/Apply.jsx
index 6d84149..eca2cbf 100644
--- a/src/pages/Apply.jsx
+++ b/src/pages/Apply.jsx
@@ -1,6 +1,6 @@
-import { Link } from "react-router-dom";
 import ButtonLink from "../components/ButtonLink";
 import Hero from "../components/Hero";
+import PageSection from "../components/PageSection";
 
 const Apply = () => {
   // ✅ Toggle this to open/close applications
@@ -20,162 +20,131 @@ const Apply = () => {
       >
         {applicationsOpen && (
           <ButtonLink sizeVariant="xl" to="https://forms.gle/59pUiPUCpDrgBCqn7">
-            APPLY NOW
+            Apply Now
           </ButtonLink>
         )}
       </Hero>
 
       {/* Application Process */}
-      <section className="py-24 px-4">
-        <div className="max-w-6xl mx-auto">
-          <h2 className="text-4xl md:text-5xl lg:text-6xl text-center mb-20 text-gray-200">
-            JOIN TURTLE
-          </h2>
-
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
-            <div className="glass-card p-10 rounded-2xl text-center transition-all duration-300">
-              <div className="text-5xl mb-6">📝</div>
-              <h3 className="text-xl font-light mb-4 text-gray-200">
-                Submit Application
-              </h3>
-              <p className="text-gray-400 font-light leading-relaxed">
-                Complete our online application form to join Hatchlings or
-                Advanced Project teams.
-              </p>
-            </div>
-            <div className="glass-card p-10 rounded-2xl text-center transition-all duration-300">
-              <div className="text-5xl mb-6">🤝</div>
-              <h3 className="text-xl font-light mb-4 text-gray-200">
-                Open House
-              </h3>
-              <p className="text-gray-400 font-light leading-relaxed">
-                Meet with our team leaders to discuss your goals and project
-                preferences.
-              </p>
-            </div>
-            <div className="glass-card p-10 rounded-2xl text-center transition-all duration-300">
-              <div className="text-5xl mb-6">🚀</div>
-              <h3 className="text-xl font-light mb-4 text-gray-200">
-                Start Contributing
-              </h3>
-              <p className="text-gray-400 font-light leading-relaxed">
-                Begin working on exciting robotics projects with TURTLE.
-              </p>
-            </div>
+      <PageSection heading="JOIN TURTLE" colorVariant="B">
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
+          <div className="glass-card p-10 rounded-2xl text-center transition-all duration-300">
+            <div className="text-5xl mb-6">📝</div>
+            <h3 className="text-xl font-light mb-4 text-gray-200">
+              Submit Application
+            </h3>
+            <p className="text-gray-400 font-light leading-relaxed">
+              Complete our online application form to join Hatchlings or
+              Advanced Project teams.
+            </p>
           </div>
-        </div>
-      </section>
-
-      {/* Contact Section (current) */}
-      <section className="py-24 px-4">
-        <div className="max-w-4xl mx-auto text-center">
-          <h2 className="text-4xl md:text-5xl lg:text-6xl mb-12 text-white drop-shadow-2xl">
-            CONTACT <span className="text-yellow-300">TURTLE</span>
-          </h2>
-          <p className="text-xl text-gray-300 mb-8">
-            For any questions, email us at
-            <a
-              href="mailto:turtlerobotics@gmaill.com"
-              className="text-accent underline ml-2"
-            >
-              turtlerobotics@gmaill.com
-            </a>
-          </p>
-        </div>
-      </section>
-
-      {/* What We Look For Section */}
-      <section className="py-24 px-4 bg-gradient-to-br from-gray-800 to-gray-900">
-        <div className="max-w-6xl mx-auto">
-          {/* Main Heading */}
-          <h2 className="text-4xl md:text-5xl lg:text-6xl text-center mb-16 text-gray-200">
-            WHAT WE <span className="text-accent">LOOK FOR</span>
-          </h2>
-
-          {/* Hatchling Subsection */}
-          <div className="mb-20 text-center max-w-4xl mx-auto">
-            <h3 className="text-2xl md:text-3xl font-light text-gray-200 mb-6">
-              Hatchling
+          <div className="glass-card p-10 rounded-2xl text-center transition-all duration-300">
+            <div className="text-5xl mb-6">🤝</div>
+            <h3 className="text-xl font-light mb-4 text-gray-200">
+              Open House
             </h3>
-            <p className="text-lg font-light text-gray-400 leading-relaxed">
-              No skills or prior experience required. The Hatchling Program is
-              designed for students of all backgrounds who are eager to learn,
-              explore robotics, and grow alongside a supportive team.
+            <p className="text-gray-400 font-light leading-relaxed">
+              Meet with our team leaders to discuss your goals and project
+              preferences.
             </p>
           </div>
-
-          {/* Advanced Projects Subsection */}
-          <div>
-            <h3 className="text-2xl md:text-3xl font-light text-gray-200 mb-12 text-center">
-              Advanced Projects
+          <div className="glass-card p-10 rounded-2xl text-center transition-all duration-300">
+            <div className="text-5xl mb-6">🚀</div>
+            <h3 className="text-xl font-light mb-4 text-gray-200">
+              Start Contributing
             </h3>
-            <div className="grid md:grid-cols-2 gap-12">
-              <div>
-                <h4 className="text-xl font-light text-gray-200 mb-6">
-                  Technical Skills
-                </h4>
-                <ul className="space-y-4">
-                  <li className="flex items-start">
-                    <span className="text-accent mr-3">•</span>
-                    <span className="text-gray-400 font-light">
-                      Programming experience (Python, C++, ROS)
-                    </span>
-                  </li>
-                  <li className="flex items-start">
-                    <span className="text-accent mr-3">•</span>
-                    <span className="text-gray-400 font-light">
-                      Understanding of robotics fundamentals
-                    </span>
-                  </li>
-                  <li className="flex items-start">
-                    <span className="text-accent mr-3">•</span>
-                    <span className="text-gray-400 font-light">
-                      Experience with hardware and electronics
-                    </span>
-                  </li>
-                  <li className="flex items-start">
-                    <span className="text-accent mr-3">•</span>
-                    <span className="text-gray-400 font-light">
-                      Knowledge of control systems and algorithms
-                    </span>
-                  </li>
-                </ul>
-              </div>
-              <div>
-                <h4 className="text-xl font-light text-gray-200 mb-6">
-                  Personal Qualities
-                </h4>
-                <ul className="space-y-4">
-                  <li className="flex items-start">
-                    <span className="text-accent mr-3">•</span>
-                    <span className="text-gray-400 font-light">
-                      Strong problem-solving abilities
-                    </span>
-                  </li>
-                  <li className="flex items-start">
-                    <span className="text-accent mr-3">•</span>
-                    <span className="text-gray-400 font-light">
-                      Excellent teamwork and communication
-                    </span>
-                  </li>
-                  <li className="flex items-start">
-                    <span className="text-accent mr-3">•</span>
-                    <span className="text-gray-400 font-light">
-                      Passion for robotics and innovation
-                    </span>
-                  </li>
-                  <li className="flex items-start">
-                    <span className="text-accent mr-3">•</span>
-                    <span className="text-gray-400 font-light">
-                      Commitment to learning and growth
-                    </span>
-                  </li>
-                </ul>
-              </div>
+            <p className="text-gray-400 font-light leading-relaxed">
+              Begin working on exciting robotics projects with TURTLE.
+            </p>
+          </div>
+        </div>
+      </PageSection>
+
+      {/* What We Look For Section */}
+      <PageSection heading="WHAT WE LOOK FOR" colorVariant="A">
+        {" "}
+        {/* Hatchling Subsection */}
+        <div className="mb-20 text-center max-w-4xl mx-auto">
+          <h3 className="text-2xl md:text-3xl font-light text-gray-200 mb-6">
+            Hatchling
+          </h3>
+          <p className="text-lg font-light text-gray-400 leading-relaxed">
+            No skills or prior experience required. The Hatchling Program is
+            designed for students of all backgrounds who are eager to learn,
+            explore robotics, and grow alongside a supportive team.
+          </p>
+        </div>
+        {/* Advanced Projects Subsection */}
+        <div>
+          <h3 className="text-2xl md:text-3xl font-light text-gray-200 mb-12 text-center">
+            Advanced Projects
+          </h3>
+          <div className="grid md:grid-cols-2 gap-12">
+            <div>
+              <h4 className="text-xl font-light text-gray-200 mb-6">
+                Technical Skills
+              </h4>
+              <ul className="space-y-4">
+                <li className="flex items-start">
+                  <span className="text-accent mr-3">•</span>
+                  <span className="text-gray-400 font-light">
+                    Programming experience (Python, C++, ROS)
+                  </span>
+                </li>
+                <li className="flex items-start">
+                  <span className="text-accent mr-3">•</span>
+                  <span className="text-gray-400 font-light">
+                    Understanding of robotics fundamentals
+                  </span>
+                </li>
+                <li className="flex items-start">
+                  <span className="text-accent mr-3">•</span>
+                  <span className="text-gray-400 font-light">
+                    Experience with hardware and electronics
+                  </span>
+                </li>
+                <li className="flex items-start">
+                  <span className="text-accent mr-3">•</span>
+                  <span className="text-gray-400 font-light">
+                    Knowledge of control systems and algorithms
+                  </span>
+                </li>
+              </ul>
+            </div>
+            <div>
+              <h4 className="text-xl font-light text-gray-200 mb-6">
+                Personal Qualities
+              </h4>
+              <ul className="space-y-4">
+                <li className="flex items-start">
+                  <span className="text-accent mr-3">•</span>
+                  <span className="text-gray-400 font-light">
+                    Strong problem-solving abilities
+                  </span>
+                </li>
+                <li className="flex items-start">
+                  <span className="text-accent mr-3">•</span>
+                  <span className="text-gray-400 font-light">
+                    Excellent teamwork and communication
+                  </span>
+                </li>
+                <li className="flex items-start">
+                  <span className="text-accent mr-3">•</span>
+                  <span className="text-gray-400 font-light">
+                    Passion for robotics and innovation
+                  </span>
+                </li>
+                <li className="flex items-start">
+                  <span className="text-accent mr-3">•</span>
+                  <span className="text-gray-400 font-light">
+                    Commitment to learning and growth
+                  </span>
+                </li>
+              </ul>
             </div>
           </div>
         </div>
-      </section>
+      </PageSection>
     </div>
   );
 };
diff --git a/src/pages/DevelopmentPrograms.jsx b/src/pages/DevelopmentPrograms.jsx
index c81a3bc..dedcf1c 100644
--- a/src/pages/DevelopmentPrograms.jsx
+++ b/src/pages/DevelopmentPrograms.jsx
@@ -1,6 +1,7 @@
 import { useNavigate } from "react-router-dom";
 import ButtonLink from "../components/ButtonLink";
 import Hero from "../components/Hero";
+import PageSection from "../components/PageSection";
 
 const DevelopmentPrograms = () => {
   const navigate = useNavigate();
@@ -79,199 +80,180 @@ const DevelopmentPrograms = () => {
 
       {/* Program Sections */}
       {programs.map((program, index) => (
-        <section
+        <PageSection
           key={program.id}
-          className="py-24 px-4 bg-gradient-to-br from-gray-800 to-gray-900"
+          colorVariant={index % 2 === 0 ? "B" : "A"}
         >
-          <div className="max-w-7xl mx-auto">
-            {/* Section Title */}
-            <h2 className="text-4xl md:text-5xl lg:text-6xl text-center mb-12 text-gray-200">
-              {/* {program.title.toUpperCase()} */}
-            </h2>
+          {/* Large Glass Card */}
+          <div className="relative h-[600px] rounded-3xl overflow-hidden shadow-2xl">
+            {/* Background Image */}
+            <div
+              className="absolute inset-0 bg-cover bg-center"
+              style={{ backgroundImage: `url(${program.image})` }}
+            />
 
-            {/* Large Glass Card */}
-            <div className="relative h-[600px] rounded-3xl overflow-hidden shadow-2xl">
-              {/* Background Image */}
-              <div
-                className="absolute inset-0 bg-cover bg-center"
-                style={{ backgroundImage: `url(${program.image})` }}
-              />
+            {/* Glass Overlay Content */}
+            <div className="absolute inset-0 flex items-end p-8 md:p-12">
+              <div className="backdrop-blur-xl bg-gray-900/30 border border-gray-700/50 rounded-2xl p-8 md:p-10 w-full max-w-2xl">
+                <p className="text-xs font-light tracking-widest text-yellow-400 mb-3 uppercase">
+                  {program.year}
+                </p>
 
-              {/* Glass Overlay Content */}
-              <div className="absolute inset-0 flex items-end p-8 md:p-12">
-                <div className="backdrop-blur-xl bg-gray-900/30 border border-gray-700/50 rounded-2xl p-8 md:p-10 w-full max-w-2xl">
-                  <p className="text-xs font-light tracking-widest text-yellow-400 mb-3 uppercase">
-                    {program.year}
-                  </p>
+                <h3 className="text-4xl md:text-5xl text-white mb-3">
+                  {/* {program.tagline} */}
+                  {program.title.toUpperCase()}
+                </h3>
 
-                  <h3 className="text-4xl md:text-5xl text-white mb-3">
-                    {/* {program.tagline} */}
-                    {program.title.toUpperCase()}
-                  </h3>
+                <p className="text-base md:text-lg font-light text-white/90 mb-6">
+                  {program.description}
+                </p>
 
-                  <p className="text-base md:text-lg font-light text-white/90 mb-6">
-                    {program.description}
-                  </p>
-
-                  {!program.disabled && (
-                    <ButtonLink to={program.link}>Learn More</ButtonLink>
-                  )}
-                </div>
+                {!program.disabled && (
+                  <ButtonLink to={program.link}>Learn More</ButtonLink>
+                )}
               </div>
             </div>
           </div>
-        </section>
+        </PageSection>
       ))}
 
       {/* Stats, Impact, and Accolades Section */}
-      <section className="py-24 px-4 bg-gradient-to-br from-gray-800 to-gray-900">
-        <div className="max-w-6xl mx-auto">
-          <h2 className="text-4xl md:text-5xl lg:text-6xl text-center mb-20 text-gray-200">
-            STATS & <span className="text-accent">IMPACT</span>
-          </h2>
-
-          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
-            <div className="glass-card p-8 rounded-2xl text-center transition-all duration-300">
-              <div className="text-4xl font-light text-accent mb-2">75%</div>
-              <div className="text-lg font-light text-gray-200 mb-2">
-                Weekly Attendance
-              </div>
-              <div className="text-sm text-gray-400">
-                Through 8 weeks of lecture
-              </div>
+      <PageSection heading="STATS & IMPACT" colorVariant="B">
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
+          <div className="glass-card p-8 rounded-2xl text-center transition-all duration-300">
+            <div className="text-4xl font-light text-accent mb-2">75%</div>
+            <div className="text-lg font-light text-gray-200 mb-2">
+              Weekly Attendance
             </div>
-
-            <div className="glass-card p-8 rounded-2xl text-center transition-all duration-300">
-              <div className="text-4xl font-light text-accent mb-2">70%</div>
-              <div className="text-lg font-light text-gray-200 mb-2">
-                New Engineers
-              </div>
-              <div className="text-sm text-gray-400">
-                70% of members enter without prior robotics experience
-              </div>
+            <div className="text-sm text-gray-400">
+              Through 8 weeks of lecture
             </div>
+          </div>
 
-            <div className="glass-card p-8 rounded-2xl text-center transition-all duration-300">
-              <div className="text-4xl font-light text-accent mb-2">95%</div>
-              <div className="text-lg font-light text-gray-200 mb-2">
-                Recommendation Rate
-              </div>
-              <div className="text-sm text-gray-400">
-                Would recommend to others
-              </div>
+          <div className="glass-card p-8 rounded-2xl text-center transition-all duration-300">
+            <div className="text-4xl font-light text-accent mb-2">70%</div>
+            <div className="text-lg font-light text-gray-200 mb-2">
+              New Engineers
             </div>
-
-            <div className="glass-card p-8 rounded-2xl text-center transition-all duration-300">
-              <div className="text-4xl font-light text-accent mb-2">782</div>
-              <div className="text-lg font-light text-gray-200 mb-2">
-                Social Connection
-              </div>
-              <div className="text-sm text-gray-400">All time Members</div>
+            <div className="text-sm text-gray-400">
+              70% of members enter without prior robotics experience
             </div>
           </div>
 
-          {/* Impact Stories */}
-          <div className="grid md:grid-cols-2 gap-8 mb-16">
-            <div className="glass-card p-8 rounded-2xl">
-              <h3 className="text-2xl font-light text-gray-200 mb-6">
-                Professional Development
-              </h3>
-              <ul className="space-y-3 text-gray-400 font-light">
-                <li className="flex items-start">
-                  <span className="text-accent mr-3 mt-1">•</span>
-                  <span>Internships and Research Positions</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-accent mr-3 mt-1">•</span>
-                  <span>SolidWorks certifications (CSWA and CSWP)</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-accent mr-3 mt-1">•</span>
-                  <span>Project Leads and Sub-Team Leads</span>
-                </li>
-              </ul>
+          <div className="glass-card p-8 rounded-2xl text-center transition-all duration-300">
+            <div className="text-4xl font-light text-accent mb-2">95%</div>
+            <div className="text-lg font-light text-gray-200 mb-2">
+              Recommendation Rate
+            </div>
+            <div className="text-sm text-gray-400">
+              Would recommend to others
             </div>
+          </div>
 
-            <div className="glass-card p-8 rounded-2xl">
-              <h3 className="text-2xl font-light text-gray-200 mb-6">
-                Leadership & Growth
-              </h3>
-              <ul className="space-y-3 text-gray-400 font-light">
-                <li className="flex items-start">
-                  <span className="text-accent mr-3 mt-1">•</span>
-                  <span>Student Organization Presidents & Officers</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-accent mr-3 mt-1">•</span>
-                  <span>Hatchling Directors</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-accent mr-3 mt-1">•</span>
-                  <span>Social connection with peers</span>
-                </li>
-              </ul>
+          <div className="glass-card p-8 rounded-2xl text-center transition-all duration-300">
+            <div className="text-4xl font-light text-accent mb-2">782</div>
+            <div className="text-lg font-light text-gray-200 mb-2">
+              Social Connection
             </div>
+            <div className="text-sm text-gray-400">All time Members</div>
           </div>
+        </div>
 
-          {/* More Info Section with Embedded PDF */}
-          <div className="text-center">
-            <h3 className="text-3xl font-light text-gray-200 mb-8">
-              More Info
+        {/* Impact Stories */}
+        <div className="grid md:grid-cols-2 gap-8 mb-16">
+          <div className="glass-card p-8 rounded-2xl">
+            <h3 className="text-2xl font-light text-gray-200 mb-6">
+              Professional Development
             </h3>
-            <div className="glass-card p-8 rounded-2xl max-w-4xl mx-auto">
-              <div className="text-5xl mb-6">📊</div>
-              <h4 className="text-xl font-light text-gray-200 mb-4">
-                Detailed Program Impact Report
-              </h4>
-              <p className="text-gray-400 font-light mb-6">
-                View our comprehensive impact report with detailed statistics,
-                success stories, and program outcomes.
-              </p>
+            <ul className="space-y-3 text-gray-400 font-light">
+              <li className="flex items-start">
+                <span className="text-accent mr-3 mt-1">•</span>
+                <span>Internships and Research Positions</span>
+              </li>
+              <li className="flex items-start">
+                <span className="text-accent mr-3 mt-1">•</span>
+                <span>SolidWorks certifications (CSWA and CSWP)</span>
+              </li>
+              <li className="flex items-start">
+                <span className="text-accent mr-3 mt-1">•</span>
+                <span>Project Leads and Sub-Team Leads</span>
+              </li>
+            </ul>
+          </div>
 
-              {/* Embedded PDF Viewer */}
+          <div className="glass-card p-8 rounded-2xl">
+            <h3 className="text-2xl font-light text-gray-200 mb-6">
+              Leadership & Growth
+            </h3>
+            <ul className="space-y-3 text-gray-400 font-light">
+              <li className="flex items-start">
+                <span className="text-accent mr-3 mt-1">•</span>
+                <span>Student Organization Presidents & Officers</span>
+              </li>
+              <li className="flex items-start">
+                <span className="text-accent mr-3 mt-1">•</span>
+                <span>Hatchling Directors</span>
+              </li>
+              <li className="flex items-start">
+                <span className="text-accent mr-3 mt-1">•</span>
+                <span>Social connection with peers</span>
+              </li>
+            </ul>
+          </div>
+        </div>
 
-              <div className="w-full h-96 rounded-xl overflow-hidden border border-gray-700 custom-scrollbar">
-                <iframe
-                  src="/pdfs/Fall 2025 (10th year) Hatchling Impact Report.pptx.pdf#toolbar=0&navpanes=0&scrollbar=1"
-                  className="w-full h-full custom-scrollbar"
-                  title="Hatchling Impact Report"
-                  frameBorder="0"
-                >
-                  <p className="p-4 text-gray-400">
-                    Your browser does not support PDF embedding.
-                    <a
-                      href="/pdfs/hatchling-impact-report.pdf"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-accent hover:underline ml-2"
-                    >
-                      Click here to view the PDF
-                    </a>
-                  </p>
-                </iframe>
-              </div>
+        {/* More Info Section with Embedded PDF */}
+        <div className="text-center">
+          <h3 className="text-3xl font-light text-gray-200 mb-8">More Info</h3>
+          <div className="glass-card p-8 rounded-2xl max-w-4xl mx-auto">
+            <div className="text-5xl mb-6">📊</div>
+            <h4 className="text-xl font-light text-gray-200 mb-4">
+              Detailed Program Impact Report
+            </h4>
+            <p className="text-gray-400 font-light mb-6">
+              View our comprehensive impact report with detailed statistics,
+              success stories, and program outcomes.
+            </p>
 
-              <div className="mt-4">
-                <a
-                  href="/pdfs/hatchling-impact-report.pdf"
-                  download
-                  className="inline-block bg-yellow-500 text-black px-6 py-3 rounded-lg text-sm font-light  hover:scale-105 transition-all duration-300"
-                >
-                  Download Full Report
-                </a>
-              </div>
+            {/* Embedded PDF Viewer */}
+
+            <div className="w-full h-96 rounded-xl overflow-hidden border border-gray-700 custom-scrollbar">
+              <iframe
+                src="/pdfs/Fall 2025 (10th year) Hatchling Impact Report.pptx.pdf#toolbar=0&navpanes=0&scrollbar=1"
+                className="w-full h-full custom-scrollbar"
+                title="Hatchling Impact Report"
+                frameBorder="0"
+              >
+                <p className="p-4 text-gray-400">
+                  Your browser does not support PDF embedding.
+                  <a
+                    href="/pdfs/hatchling-impact-report.pdf"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-accent hover:underline ml-2"
+                  >
+                    Click here to view the PDF
+                  </a>
+                </p>
+              </iframe>
+            </div>
+
+            <div className="mt-4">
+              <a
+                href="/pdfs/hatchling-impact-report.pdf"
+                download
+                className="inline-block bg-yellow-500 text-black px-6 py-3 rounded-lg text-sm font-light  hover:scale-105 transition-all duration-300"
+              >
+                Download Full Report
+              </a>
             </div>
           </div>
         </div>
-      </section>
+      </PageSection>
 
       {/* Call to Action Section */}
-      <section className="py-24 px-4 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900">
-        <div className="max-w-4xl mx-auto text-center">
-          <h2 className="text-5xl md:text-7xl text-gray-200 mb-6">
-            Ready to Start Your{" "}
-            <span className="text-yellow-400">Journey?</span>
-          </h2>
+      <PageSection heading="READY TO START YOUR JOURNEY?" colorVariant="A">
+        <div className="text-center">
           <p className="text-xl font-light text-gray-400 mb-12 max-w-2xl mx-auto">
             Join TURTLE and gain the skills needed to excel in robotics
           </p>
@@ -279,7 +261,7 @@ const DevelopmentPrograms = () => {
             Apply Now
           </ButtonLink>
         </div>
-      </section>
+      </PageSection>
     </div>
   );
 };
diff --git a/src/pages/Hatchling.jsx b/src/pages/Hatchling.jsx
index 6453c82..059d637 100644
--- a/src/pages/Hatchling.jsx
+++ b/src/pages/Hatchling.jsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import ImageCarousel from "../components/ImageCarousel";
 import ButtonLink from "../components/ButtonLink";
 import Hero from "../components/Hero";
+import PageSection from "../components/PageSection";
 
 const Hatchling = () => {
   // Check localStorage for slides visibility
@@ -170,433 +171,391 @@ const Hatchling = () => {
       ></Hero>
 
       {/* Mission Statement Section */}
-      <section className="py-24 px-4">
-        <div className="max-w-6xl mx-auto">
-          <h2 className="text-4xl md:text-5xl lg:text-6xl text-center mb-20 text-gray-200">
-            OUR <span className="text-accent">MISSION</span>
-          </h2>
-
-          <div className="glass-card p-12 rounded-2xl text-center">
-            <p className="text-xl md:text-2xl font-light text-gray-400 leading-relaxed max-w-4xl mx-auto">
-              Founded in the fall of 2015, Hatchling is our premier development
-              program that introduces foundational technical, soft, and
-              engineering skills
-            </p>
-          </div>
+      <PageSection heading="OUR MISSION" colorVariant="B">
+        <div className="glass-card p-12 rounded-2xl text-center">
+          <p className="text-xl md:text-2xl font-light text-gray-400 leading-relaxed max-w-4xl mx-auto">
+            Founded in the fall of 2015, Hatchling is our premier development
+            program that introduces foundational technical, soft, and
+            engineering skills
+          </p>
         </div>
-      </section>
+      </PageSection>
 
       {/* Trusted Organizations Section */}
-      <section className="py-24 px-4 bg-gradient-to-br from-gray-800 to-gray-900">
-        <div className="max-w-6xl mx-auto">
-          <h2 className="text-4xl md:text-5xl lg:text-6xl text-center mb-20 text-gray-200">
-            CURRENTLY <span className="text-accent">TRUSTED AT</span>
-          </h2>
-
-          <div className="flex flex-col md:flex-row items-center justify-center gap-4 mb-8">
-            <div className="glass-card p-8 rounded-2xl text-center transition-all duration-300">
-              <div className="text-5xl mb-4">🏢</div>
-              <h3 className="text-3xl font-light text-gray-200 mb-2">3</h3>
-              <p className="text-lg font-light text-gray-400">Organizations</p>
-            </div>
+      <PageSection heading="CURRENTLY TRUSTED AT" colorVariant="A">
+        <div className="flex flex-col md:flex-row items-center justify-center gap-4 mb-8">
+          <div className="glass-card p-8 rounded-2xl text-center transition-all duration-300">
+            <div className="text-5xl mb-4">🏢</div>
+            <h3 className="text-3xl font-light text-gray-200 mb-2">3</h3>
+            <p className="text-lg font-light text-gray-400">Organizations</p>
+          </div>
 
-            <div className="text-2xl font-light text-gray-400">across</div>
+          <div className="text-2xl font-light text-gray-400">across</div>
 
-            <div className="glass-card p-8 rounded-2xl text-center transition-all duration-300">
-              <div className="text-5xl mb-4">🎓</div>
-              <h3 className="text-3xl font-light text-gray-200 mb-2">2</h3>
-              <p className="text-lg font-light text-gray-400">Universities</p>
-            </div>
+          <div className="glass-card p-8 rounded-2xl text-center transition-all duration-300">
+            <div className="text-5xl mb-4">🎓</div>
+            <h3 className="text-3xl font-light text-gray-200 mb-2">2</h3>
+            <p className="text-lg font-light text-gray-400">Universities</p>
           </div>
+        </div>
 
-          <div className="text-center">
-            <p className="text-lg font-light text-gray-400 max-w-3xl mx-auto mb-12"></p>
+        <div className="text-center">
+          <p className="text-lg font-light text-gray-400 max-w-3xl mx-auto mb-12"></p>
 
-            {/* Bring Hatchling to Your Organization */}
-            <div className="glass-card p-8 rounded-2xl max-w-2xl mx-auto">
-              <h3 className="text-2xl font-light text-gray-200 mb-4">
-                Bring the Hatchling Mission to Your Student Organization
-              </h3>
-              <p className="text-gray-400 font-light mb-6">
-                Interested in expanding robotics education at your university?
-                Let's discuss how we can bring the Hatchling program to your
-                campus.
-              </p>
-              <a
-                href="mailto:turtlerobotics@gmail.com?subject=Hatchling%20Program%20Inquiry&body=Hello,%20I'm%20interested%20in%20bringing%20the%20Hatchling%20program%20to%20my%20student%20organization.%20Please%20provide%20more%20information%20about%20partnership%20opportunities."
-                className="inline-block bg-yellow-500 text-black px-8 py-3 rounded-xl text-lg font-light tracking-wide hover:scale-105 transition-all duration-300 shadow-lg"
-              >
-                Inquire Now
-              </a>
-            </div>
+          {/* Bring Hatchling to Your Organization */}
+          <div className="glass-card p-8 rounded-2xl max-w-2xl mx-auto">
+            <h3 className="text-2xl font-light text-gray-200 mb-4">
+              Bring the Hatchling Mission to Your Student Organization
+            </h3>
+            <p className="text-gray-400 font-light mb-6">
+              Interested in expanding robotics education at your university?
+              Let's discuss how we can bring the Hatchling program to your
+              campus.
+            </p>
+            <a
+              href="mailto:turtlerobotics@gmail.com?subject=Hatchling%20Program%20Inquiry&body=Hello,%20I'm%20interested%20in%20bringing%20the%20Hatchling%20program%20to%20my%20student%20organization.%20Please%20provide%20more%20information%20about%20partnership%20opportunities."
+              className="inline-block bg-yellow-500 text-black px-8 py-3 rounded-xl text-lg font-light tracking-wide hover:scale-105 transition-all duration-300 shadow-lg"
+            >
+              Inquire Now
+            </a>
           </div>
         </div>
-      </section>
+      </PageSection>
 
       {/* Scrolling Pictures Section */}
-      <section className="py-24 px-4">
-        <div className="max-w-6xl mx-auto">
-          <h2 className="text-4xl md:text-5xl lg:text-6xl text-center mb-20 text-gray-200">
-            HATCHLING <span className="text-accent">GALLERY</span>
-          </h2>
-
-          <div className="rounded-2xl overflow-hidden border border-gray-700/50 glass-card w-full max-w-7xl mx-auto">
-            <ImageCarousel
-              images={[
-                "/assets/20250427_202459_BFD66E.JPEG",
-                "/assets/20250426_155351.jpg",
-                "/assets/image_2025-09-30_002708253.png",
-                "/assets/image_2025-09-30_002910095.png",
-                "/assets/image_2025-09-30_002458601.png",
-              ]}
-              autoPlay={false}
-              intervalMs={4000}
-              aspectRatio="4/3"
-              maxHeight="98vh"
-            />
-          </div>
+      <PageSection heading="HATCHLING GALLERY" colorVariant="B">
+        <div className="rounded-2xl overflow-hidden border border-gray-700/50 glass-card w-full max-w-7xl mx-auto">
+          <ImageCarousel
+            images={[
+              "/assets/20250427_202459_BFD66E.JPEG",
+              "/assets/20250426_155351.jpg",
+              "/assets/image_2025-09-30_002708253.png",
+              "/assets/image_2025-09-30_002910095.png",
+              "/assets/image_2025-09-30_002458601.png",
+            ]}
+            autoPlay={false}
+            intervalMs={4000}
+            aspectRatio="4/3"
+            maxHeight="98vh"
+          />
         </div>
-      </section>
+      </PageSection>
 
       {/* Learning Objectives and Schedule Section */}
-      <section className="py-24 px-4 bg-gradient-to-br from-gray-800 to-gray-900">
-        <div className="max-w-6xl mx-auto">
-          <h2 className="text-4xl md:text-5xl lg:text-6xl text-center mb-20 text-gray-200">
-            LEARNING <span className="text-accent">OBJECTIVES</span> & SCHEDULE
-          </h2>
+      <PageSection heading="LEARNING OBJECTIVES & SCHEDULE" colorVariant="A">
+        {/* Learning Objectives - Full Width on Top */}
+        <div className="mb-16">
+          <h3 className="text-3xl font-light text-gray-200 mb-8 text-center">
+            Core Learning Objectives
+          </h3>
+          <p className="text-lg text-gray-400 text-center mb-8 max-w-4xl mx-auto">
+            Hatchlings graduate from the program with a community, passion for
+            engineering, and the following skills:
+          </p>
 
-          {/* Learning Objectives - Full Width on Top */}
-          <div className="mb-16">
-            <h3 className="text-3xl font-light text-gray-200 mb-8 text-center">
-              Core Learning Objectives
-            </h3>
-            <p className="text-lg text-gray-400 text-center mb-8 max-w-4xl mx-auto">
-              Hatchlings graduate from the program with a community, passion for
-              engineering, and the following skills:
-            </p>
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {learningObjectiveGroups.map((group) => (
+              <div className="glass-card p-8 rounded-xl">
+                <h4 className="text-xl font-light text-accent mb-4">
+                  {group.groupName}
+                </h4>
+                <ul className="space-y-3 text-gray-400 font-light">
+                  {group.objectives.map((objective) => (
+                    <li className="flex items-start" key={objective}>
+                      <span className="text-accent mr-3 mt-1">•</span>
+                      <span>{objective}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
 
-            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-              {learningObjectiveGroups.map((group) => (
-                <div className="glass-card p-8 rounded-xl">
-                  <h4 className="text-xl font-light text-accent mb-4">
-                    {group.groupName}
+        {/* Program Schedule - Horizontal Scrollable Timeline */}
+        <div>
+          <h3 className="text-3xl font-light text-gray-200 mb-8 text-center">
+            10-Week Program Schedule
+          </h3>
+          <div className="relative">
+            {/* Scrollable Timeline Container */}
+            <div className="flex gap-4 overflow-x-auto pb-6 custom-scrollbar">
+              {programScheduleItems.map((item) => (
+                <div className="glass-card p-6 rounded-xl min-w-[280px] flex-shrink-0">
+                  <div className="text-2xl font-light text-accent mb-3">
+                    {item.heading}
+                  </div>
+                  <h4 className="text-lg font-light text-gray-200 mb-3">
+                    {item.subheading}
                   </h4>
-                  <ul className="space-y-3 text-gray-400 font-light">
-                    {group.objectives.map((objective) => (
-                      <li className="flex items-start" key={objective}>
-                        <span className="text-accent mr-3 mt-1">•</span>
-                        <span>{objective}</span>
-                      </li>
+                  <ul className="space-y-2 text-sm text-gray-400 font-light">
+                    {item.objectives.map((objective) => (
+                      <li>• {objective}</li>
                     ))}
+                    {item.milestone ? (
+                      <li className="text-accent font-medium">
+                        • Project Milestone: {item.milestone}
+                      </li>
+                    ) : null}
                   </ul>
                 </div>
               ))}
             </div>
-          </div>
-
-          {/* Program Schedule - Horizontal Scrollable Timeline */}
-          <div>
-            <h3 className="text-3xl font-light text-gray-200 mb-8 text-center">
-              10-Week Program Schedule
-            </h3>
-            <div className="relative">
-              {/* Scrollable Timeline Container */}
-              <div className="flex gap-4 overflow-x-auto pb-6 custom-scrollbar">
-                {programScheduleItems.map((item) => (
-                  <div className="glass-card p-6 rounded-xl min-w-[280px] flex-shrink-0">
-                    <div className="text-2xl font-light text-accent mb-3">
-                      {item.heading}
-                    </div>
-                    <h4 className="text-lg font-light text-gray-200 mb-3">
-                      {item.subheading}
-                    </h4>
-                    <ul className="space-y-2 text-sm text-gray-400 font-light">
-                      {item.objectives.map((objective) => (
-                        <li>• {objective}</li>
-                      ))}
-                      {item.milestone ? (
-                        <li className="text-accent font-medium">
-                          • Project Milestone: {item.milestone}
-                        </li>
-                      ) : null}
-                    </ul>
-                  </div>
-                ))}
-              </div>
 
-              {/* Scroll Indicator */}
-              <div className="text-center mt-4">
-                <p className="text-sm text-gray-400">
-                  ← Scroll to see all 10 weeks →
-                </p>
-              </div>
+            {/* Scroll Indicator */}
+            <div className="text-center mt-4">
+              <p className="text-sm text-gray-400">
+                ← Scroll to see all 10 weeks →
+              </p>
             </div>
           </div>
         </div>
-      </section>
+      </PageSection>
 
       {/* Published Materials Section */}
-      <section className="py-24 px-4">
-        <div className="max-w-6xl mx-auto">
-          <h2 className="text-4xl md:text-5xl lg:text-6xl text-center mb-20 text-gray-200">
-            PUBLISHED <span className="text-accent">MATERIALS</span>
-          </h2>
-
-          {/* Weekly Content PDFs (toggleable) */}
-          {slidesVisible && (
-            <div className="mb-16">
-              <div className="glass-card p-8 rounded-2xl max-w-2xl mx-auto">
-                <div className="text-center mb-6">
-                  <div className="text-5xl mb-4">📚</div>
-                  <h4 className="text-xl font-light text-gray-200 mb-2">
-                    Slides
-                  </h4>
-                </div>
-
-                {(() => {
-                  const pdfMap = {
-                    1: "/pdfs/Hatchling Week 1 - Introduction.pptx.pdf",
-                    2: "/pdfs/Hatchling Week 2 - SolidWorks (CAD) Foundation.pptx.pdf",
-                    3: "/pdfs/Hatchling Week 3 - SolidWorks 3D.pptx.pdf",
-                    4: "/pdfs/Hatchling Week 4 - Tools, Project, and Process.pptx.pdf",
-                    5: "/pdfs/Hatchling Week 5 - Design Review and Cpp.pptx.pdf",
-                    6: "/pdfs/Hatchling Week 6 - SolidWorks Assembly.pptx.pdf",
-                    7: "/pdfs/Hatchling Week 7 - Programming and Git GitHub.pptx.pdf",
-                    8: "/pdfs/Hatchling Week 8 - Electronics and Soldering.pptx.pdf",
-                  };
-
-                  return (
-                    <div className="flex flex-col sm:flex-row gap-4 items-center justify-center mb-6">
-                      <select
-                        id="weekSelector"
-                        className="glass-card border border-gray-700 px-4 py-3 rounded-lg text-gray-200 bg-gray-800 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-transparent"
-                        onChange={(e) => {
-                          const selectedWeek = e.target.value;
-                          const downloadBtn =
-                            document.getElementById("downloadBtn");
-                          if (selectedWeek && downloadBtn) {
-                            const filePath = pdfMap[selectedWeek];
-                            downloadBtn.href = encodeURI(filePath); // 👈 Encodes spaces and '+'
-                            downloadBtn.style.display = "inline-block";
-                          }
-                        }}
-                      >
-                        <option value="">Select a week...</option>
-                        <option value="1">Week 1: Introductions</option>
-                        <option value="2">Week 2: SolidWorks Foundation</option>
-                        <option value="3">Week 3: SolidWorks 3D</option>
-                        <option value="4">
-                          Week 4: Tools, Project, and Process
-                        </option>
-                        <option value="5">Week 5: Design Review and C++</option>
-                        <option value="6">Week 6: SolidWorks Assembly</option>
-                        <option value="7">
-                          Week 7: Programming and Git GitHub
-                        </option>
-                        <option value="8">
-                          Week 8: Electronics and Soldering
-                        </option>
-                      </select>
-
-                      <a
-                        id="downloadBtn"
-                        href="#"
-                        download
-                        className="bg-yellow-500 text-black px-6 py-3 rounded-lg text-sm font-light transition-all duration-300 hidden"
-                      >
-                        Download PDF
-                      </a>
-                    </div>
-                  );
-                })()}
+      <PageSection heading="PUBLISHED MATERIALS" colorVariant="B">
+        {/* Weekly Content PDFs (toggleable) */}
+        {slidesVisible && (
+          <div className="mb-16">
+            <div className="glass-card p-8 rounded-2xl max-w-2xl mx-auto">
+              <div className="text-center mb-6">
+                <div className="text-5xl mb-4">📚</div>
+                <h4 className="text-xl font-light text-gray-200 mb-2">
+                  Slides
+                </h4>
               </div>
-            </div>
-          )}
 
-          {/* Additional Materials */}
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-            <div className="glass-card p-8 rounded-2xl text-center transition-all duration-300">
-              <div className="text-5xl mb-6">📝</div>
-              <h3 className="text-xl font-light text-gray-200 mb-6">
-                Hatchling Syllabus
-              </h3>
-              <ButtonLink to="/pdfs/Hatchling_Syllabus.pdf" reloadDocument>
-                Download Syllabus
-              </ButtonLink>
-            </div>
+              {(() => {
+                const pdfMap = {
+                  1: "/pdfs/Hatchling Week 1 - Introduction.pptx.pdf",
+                  2: "/pdfs/Hatchling Week 2 - SolidWorks (CAD) Foundation.pptx.pdf",
+                  3: "/pdfs/Hatchling Week 3 - SolidWorks 3D.pptx.pdf",
+                  4: "/pdfs/Hatchling Week 4 - Tools, Project, and Process.pptx.pdf",
+                  5: "/pdfs/Hatchling Week 5 - Design Review and Cpp.pptx.pdf",
+                  6: "/pdfs/Hatchling Week 6 - SolidWorks Assembly.pptx.pdf",
+                  7: "/pdfs/Hatchling Week 7 - Programming and Git GitHub.pptx.pdf",
+                  8: "/pdfs/Hatchling Week 8 - Electronics and Soldering.pptx.pdf",
+                };
+
+                return (
+                  <div className="flex flex-col sm:flex-row gap-4 items-center justify-center mb-6">
+                    <select
+                      id="weekSelector"
+                      className="glass-card border border-gray-700 px-4 py-3 rounded-lg text-gray-200 bg-gray-800 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-transparent"
+                      onChange={(e) => {
+                        const selectedWeek = e.target.value;
+                        const downloadBtn =
+                          document.getElementById("downloadBtn");
+                        if (selectedWeek && downloadBtn) {
+                          const filePath = pdfMap[selectedWeek];
+                          downloadBtn.href = encodeURI(filePath); // 👈 Encodes spaces and '+'
+                          downloadBtn.style.display = "inline-block";
+                        }
+                      }}
+                    >
+                      <option value="">Select a week...</option>
+                      <option value="1">Week 1: Introductions</option>
+                      <option value="2">Week 2: SolidWorks Foundation</option>
+                      <option value="3">Week 3: SolidWorks 3D</option>
+                      <option value="4">
+                        Week 4: Tools, Project, and Process
+                      </option>
+                      <option value="5">Week 5: Design Review and C++</option>
+                      <option value="6">Week 6: SolidWorks Assembly</option>
+                      <option value="7">
+                        Week 7: Programming and Git GitHub
+                      </option>
+                      <option value="8">
+                        Week 8: Electronics and Soldering
+                      </option>
+                    </select>
 
-            <div className="glass-card p-8 rounded-2xl text-center transition-all duration-300">
-              <div className="text-5xl mb-6">🎨</div>
-              <h3 className="text-xl font-light text-gray-200 mb-6">
-                CAD Examples
-              </h3>
-              <ButtonLink to="https://drive.google.com/drive/u/0/folders/1vNfWDbjknwccCOt5aOBdxUWnFxSLPm2S">
-                Download Examples
-              </ButtonLink>
+                    <a
+                      id="downloadBtn"
+                      href="#"
+                      download
+                      className="bg-yellow-500 text-black px-6 py-3 rounded-lg text-sm font-light transition-all duration-300 hidden"
+                    >
+                      Download PDF
+                    </a>
+                  </div>
+                );
+              })()}
             </div>
+          </div>
+        )}
+
+        {/* Additional Materials */}
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+          <div className="glass-card p-8 rounded-2xl text-center transition-all duration-300">
+            <div className="text-5xl mb-6">📝</div>
+            <h3 className="text-xl font-light text-gray-200 mb-6">
+              Hatchling Syllabus
+            </h3>
+            <ButtonLink to="/pdfs/Hatchling_Syllabus.pdf" reloadDocument>
+              Download Syllabus
+            </ButtonLink>
+          </div>
 
-            <div className="glass-card p-8 rounded-2xl text-center transition-all duration-300">
-              <div className="text-5xl mb-6">⚡</div>
-              <h3 className="text-xl font-light text-gray-200 mb-6">
-                Project Tips & Controller Resources
-              </h3>
-              <ButtonLink to="https://drive.google.com/drive/u/0/folders/1Rw4qrWXRxz9cDLFNZvCBoV22xy_KlB8y">
-                Download Guide
-              </ButtonLink>
-            </div>
+          <div className="glass-card p-8 rounded-2xl text-center transition-all duration-300">
+            <div className="text-5xl mb-6">🎨</div>
+            <h3 className="text-xl font-light text-gray-200 mb-6">
+              CAD Examples
+            </h3>
+            <ButtonLink to="https://drive.google.com/drive/u/0/folders/1vNfWDbjknwccCOt5aOBdxUWnFxSLPm2S">
+              Download Examples
+            </ButtonLink>
+          </div>
+
+          <div className="glass-card p-8 rounded-2xl text-center transition-all duration-300">
+            <div className="text-5xl mb-6">⚡</div>
+            <h3 className="text-xl font-light text-gray-200 mb-6">
+              Project Tips & Controller Resources
+            </h3>
+            <ButtonLink to="https://drive.google.com/drive/u/0/folders/1Rw4qrWXRxz9cDLFNZvCBoV22xy_KlB8y">
+              Download Guide
+            </ButtonLink>
           </div>
         </div>
-      </section>
+      </PageSection>
 
       {/* Stats, Impact, and Accolades Section */}
-      <section className="py-24 px-4 bg-gradient-to-br from-gray-800 to-gray-900">
-        <div className="max-w-6xl mx-auto">
-          <h2 className="text-4xl md:text-5xl lg:text-6xl text-center mb-20 text-gray-200">
-            STATS & <span className="text-accent">IMPACT</span>
-          </h2>
-
-          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
-            <div className="glass-card p-8 rounded-2xl text-center transition-all duration-300">
-              <div className="text-4xl font-light text-accent mb-2">75%</div>
-              <div className="text-lg font-light text-gray-200 mb-2">
-                Weekly Attendance
-              </div>
-              <div className="text-sm text-gray-400">
-                Through 8 weeks of lecture
-              </div>
+      <PageSection heading="STATS & IMPACT" colorVariant="A">
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
+          <div className="glass-card p-8 rounded-2xl text-center transition-all duration-300">
+            <div className="text-4xl font-light text-accent mb-2">75%</div>
+            <div className="text-lg font-light text-gray-200 mb-2">
+              Weekly Attendance
             </div>
-
-            <div className="glass-card p-8 rounded-2xl text-center transition-all duration-300">
-              <div className="text-4xl font-light text-accent mb-2">70%</div>
-              <div className="text-lg font-light text-gray-200 mb-2">
-                New Engineers
-              </div>
-              <div className="text-sm text-gray-400">
-                70% of members enter without prior robotics experience
-              </div>
+            <div className="text-sm text-gray-400">
+              Through 8 weeks of lecture
             </div>
+          </div>
 
-            <div className="glass-card p-8 rounded-2xl text-center transition-all duration-300">
-              <div className="text-4xl font-light text-accent mb-2">95%</div>
-              <div className="text-lg font-light text-gray-200 mb-2">
-                Recommendation Rate
-              </div>
-              <div className="text-sm text-gray-400">
-                Would recommend to others
-              </div>
+          <div className="glass-card p-8 rounded-2xl text-center transition-all duration-300">
+            <div className="text-4xl font-light text-accent mb-2">70%</div>
+            <div className="text-lg font-light text-gray-200 mb-2">
+              New Engineers
             </div>
-
-            <div className="glass-card p-8 rounded-2xl text-center transition-all duration-300">
-              <div className="text-4xl font-light text-accent mb-2">782</div>
-              <div className="text-lg font-light text-gray-200 mb-2">
-                Social Connection
-              </div>
-              <div className="text-sm text-gray-400">All time Members</div>
+            <div className="text-sm text-gray-400">
+              70% of members enter without prior robotics experience
             </div>
           </div>
 
-          {/* Impact Stories */}
-          <div className="grid md:grid-cols-2 gap-8 mb-16">
-            <div className="glass-card p-8 rounded-2xl">
-              <h3 className="text-2xl font-light text-gray-200 mb-6">
-                Professional Development
-              </h3>
-              <ul className="space-y-3 text-gray-400 font-light">
-                <li className="flex items-start">
-                  <span className="text-accent mr-3 mt-1">•</span>
-                  <span>Internships and Research Positions</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-accent mr-3 mt-1">•</span>
-                  <span>SolidWorks certifications (CSWA and CSWP)</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-accent mr-3 mt-1">•</span>
-                  <span>Project Leads and Sub-Team Leads</span>
-                </li>
-              </ul>
+          <div className="glass-card p-8 rounded-2xl text-center transition-all duration-300">
+            <div className="text-4xl font-light text-accent mb-2">95%</div>
+            <div className="text-lg font-light text-gray-200 mb-2">
+              Recommendation Rate
+            </div>
+            <div className="text-sm text-gray-400">
+              Would recommend to others
             </div>
+          </div>
 
-            <div className="glass-card p-8 rounded-2xl">
-              <h3 className="text-2xl font-light text-gray-200 mb-6">
-                Leadership & Growth
-              </h3>
-              <ul className="space-y-3 text-gray-400 font-light">
-                <li className="flex items-start">
-                  <span className="text-accent mr-3 mt-1">•</span>
-                  <span>Student Organization Presidents & Officers</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-accent mr-3 mt-1">•</span>
-                  <span>Hatchling Directors</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-accent mr-3 mt-1">•</span>
-                  <span>Social connection with peers</span>
-                </li>
-              </ul>
+          <div className="glass-card p-8 rounded-2xl text-center transition-all duration-300">
+            <div className="text-4xl font-light text-accent mb-2">782</div>
+            <div className="text-lg font-light text-gray-200 mb-2">
+              Social Connection
             </div>
+            <div className="text-sm text-gray-400">All time Members</div>
           </div>
+        </div>
 
-          {/* More Info Section with Embedded PDF */}
-          <div className="text-center">
-            <h3 className="text-3xl font-light text-gray-200 mb-8">
-              More Info
+        {/* Impact Stories */}
+        <div className="grid md:grid-cols-2 gap-8 mb-16">
+          <div className="glass-card p-8 rounded-2xl">
+            <h3 className="text-2xl font-light text-gray-200 mb-6">
+              Professional Development
             </h3>
-            <div className="glass-card p-8 rounded-2xl max-w-4xl mx-auto">
-              <div className="text-5xl mb-6">📊</div>
-              <h4 className="text-xl font-light text-gray-200 mb-4">
-                Detailed Program Impact Report
-              </h4>
-              <p className="text-gray-400 font-light mb-6">
-                View our comprehensive impact report with detailed statistics,
-                success stories, and program outcomes.
-              </p>
+            <ul className="space-y-3 text-gray-400 font-light">
+              <li className="flex items-start">
+                <span className="text-accent mr-3 mt-1">•</span>
+                <span>Internships and Research Positions</span>
+              </li>
+              <li className="flex items-start">
+                <span className="text-accent mr-3 mt-1">•</span>
+                <span>SolidWorks certifications (CSWA and CSWP)</span>
+              </li>
+              <li className="flex items-start">
+                <span className="text-accent mr-3 mt-1">•</span>
+                <span>Project Leads and Sub-Team Leads</span>
+              </li>
+            </ul>
+          </div>
 
-              {/* Embedded PDF Viewer */}
-
-              <div className="w-full h-96 rounded-xl overflow-hidden border border-gray-700 custom-scrollbar">
-                <iframe
-                  src="/pdfs/Fall 2025 (10th year) Hatchling Impact Report.pptx.pdf#toolbar=0&navpanes=0&scrollbar=1"
-                  className="w-full h-full custom-scrollbar"
-                  title="Hatchling Impact Report"
-                  frameBorder="0"
-                >
-                  <p className="p-4 text-gray-400">
-                    Your browser does not support PDF embedding.
-                    <a
-                      href="/pdfs/hatchling-impact-report.pdf"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-accent hover:underline ml-2"
-                    >
-                      Click here to view the PDF
-                    </a>
-                  </p>
-                </iframe>
-              </div>
+          <div className="glass-card p-8 rounded-2xl">
+            <h3 className="text-2xl font-light text-gray-200 mb-6">
+              Leadership & Growth
+            </h3>
+            <ul className="space-y-3 text-gray-400 font-light">
+              <li className="flex items-start">
+                <span className="text-accent mr-3 mt-1">•</span>
+                <span>Student Organization Presidents & Officers</span>
+              </li>
+              <li className="flex items-start">
+                <span className="text-accent mr-3 mt-1">•</span>
+                <span>Hatchling Directors</span>
+              </li>
+              <li className="flex items-start">
+                <span className="text-accent mr-3 mt-1">•</span>
+                <span>Social connection with peers</span>
+              </li>
+            </ul>
+          </div>
+        </div>
 
-              <div className="mt-4">
-                <a
-                  href="/pdfs/hatchling-impact-report.pdf"
-                  download
-                  className="inline-block bg-yellow-500 text-black px-6 py-3 rounded-lg text-sm font-light  hover:scale-105 transition-all duration-300"
-                >
-                  Download Full Report
-                </a>
-              </div>
+        {/* More Info Section with Embedded PDF */}
+        <div className="text-center">
+          <h3 className="text-3xl font-light text-gray-200 mb-8">More Info</h3>
+          <div className="glass-card p-8 rounded-2xl max-w-4xl mx-auto">
+            <div className="text-5xl mb-6">📊</div>
+            <h4 className="text-xl font-light text-gray-200 mb-4">
+              Detailed Program Impact Report
+            </h4>
+            <p className="text-gray-400 font-light mb-6">
+              View our comprehensive impact report with detailed statistics,
+              success stories, and program outcomes.
+            </p>
+
+            {/* Embedded PDF Viewer */}
+
+            <div className="w-full h-96 rounded-xl overflow-hidden border border-gray-700 custom-scrollbar">
+              <iframe
+                src="/pdfs/Fall 2025 (10th year) Hatchling Impact Report.pptx.pdf#toolbar=0&navpanes=0&scrollbar=1"
+                className="w-full h-full custom-scrollbar"
+                title="Hatchling Impact Report"
+                frameBorder="0"
+              >
+                <p className="p-4 text-gray-400">
+                  Your browser does not support PDF embedding.
+                  <a
+                    href="/pdfs/hatchling-impact-report.pdf"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-accent hover:underline ml-2"
+                  >
+                    Click here to view the PDF
+                  </a>
+                </p>
+              </iframe>
+            </div>
+
+            <div className="mt-4">
+              <a
+                href="/pdfs/hatchling-impact-report.pdf"
+                download
+                className="inline-block bg-yellow-500 text-black px-6 py-3 rounded-lg text-sm font-light  hover:scale-105 transition-all duration-300"
+              >
+                Download Full Report
+              </a>
             </div>
           </div>
         </div>
-      </section>
+      </PageSection>
 
       {/* Call to Action */}
-      <section className="py-24 px-4">
+      <PageSection heading="READY TO JOIN" colorVariant="B">
         <div className="max-w-4xl mx-auto text-center">
-          <h2 className="text-4xl md:text-5xl lg:text-6xl mb-12 text-gray-200">
-            READY TO <span className="text-accent">JOIN</span>?
-          </h2>
-
           <p className="text-xl font-light text-gray-400 mb-12 max-w-2xl mx-auto leading-relaxed">
             Become part of the next generation of robotics innovators. Apply now
             to join the Hatchling Program and accelerate your robotics journey.
@@ -604,14 +563,14 @@ const Hatchling = () => {
 
           <div className="flex flex-col sm:flex-row gap-6 justify-center items-center">
             <ButtonLink to="/apply" style="primary" sizeVariant="large">
-              APPLY NOW
+              Apply Now
             </ButtonLink>
             <ButtonLink to="/about" style="primary" sizeVariant="large">
-              LEARN MORE
+              Learn More
             </ButtonLink>
           </div>
         </div>
-      </section>
+      </PageSection>
     </div>
   );
 };
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 1082007..4acd9d3 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 import SponsorTicker from "../components/SponsorTicker";
 import ButtonLink from "../components/ButtonLink";
 import Hero from "../components/Hero";
+import PageSection from "../components/PageSection";
 
 const ENABLE_SHOWCASE_POPUPS = true;
 
@@ -24,7 +25,7 @@ const Home = () => {
               sizeVariant="large"
               style="primary"
             >
-              EXPLORE PROJECTS
+              Explore Projects
             </ButtonLink>
             <ButtonLink
               className="hero-button"
@@ -32,51 +33,45 @@ const Home = () => {
               sizeVariant="large"
               style="primary-outline"
             >
-              LEARN MORE
+              Learn More
             </ButtonLink>
           </div>
         </Hero>
-
-        {/* About Section */}
-        <section className="py-24 px-4">
-          <div className="max-w-6xl mx-auto">
-            <h2 className="text-4xl md:text-5xl lg:text-6xl text-center mb-20 text-gray-200">
-              ABOUT <span className="text-yellow-400">TURTLE</span>
-            </h2>
-            <div className="grid md:grid-cols-3 gap-8 mb-16">
-              <div className="glass-card p-10 rounded-2xl text-center transition-all duration-300">
-                <div className="text-5xl mb-6">🎓</div>
-                <h3 className="text-xl font-light mb-4 text-gray-200">
-                  Student Leadership
-                </h3>
-                <p className="text-gray-400 font-light leading-relaxed">
-                  Developing the next generation of robotics leaders through
-                  hands-on experience and mentorship.
-                </p>
-              </div>
-              <div className="glass-card p-10 rounded-2xl text-center transition-all duration-300">
-                <div className="text-5xl mb-6">🔬</div>
-                <h3 className="text-xl font-light mb-4 text-gray-200">
-                  Research Excellence
-                </h3>
-                <p className="text-gray-400 font-light leading-relaxed">
-                  Cutting-edge robotics research across multiple domains and
-                  applications.
-                </p>
-              </div>
-              <div className="glass-card p-10 rounded-2xl text-center transition-all duration-300">
-                <div className="text-5xl mb-6">⚙️</div>
-                <h3 className="text-xl font-light mb-4 text-gray-200">
-                  Engineering Development
-                </h3>
-                <p className="text-gray-400 font-light leading-relaxed">
-                  Hands-on engineering experience through real-world robotics
-                  projects, technical workshops, and collaborative problem
-                  solving.
-                </p>
-              </div>
+        <PageSection heading="ABOUT TURTLE" colorVariant="B">
+          <div className="grid md:grid-cols-3 gap-8 mb-16">
+            <div className="glass-card p-10 rounded-2xl text-center transition-all duration-300">
+              <div className="text-5xl mb-6">🎓</div>
+              <h3 className="text-xl font-light mb-4 text-gray-200">
+                Student Leadership
+              </h3>
+              <p className="text-gray-400 font-light leading-relaxed">
+                Developing the next generation of robotics leaders through
+                hands-on experience and mentorship.
+              </p>
+            </div>
+            <div className="glass-card p-10 rounded-2xl text-center transition-all duration-300">
+              <div className="text-5xl mb-6">🔬</div>
+              <h3 className="text-xl font-light mb-4 text-gray-200">
+                Research Excellence
+              </h3>
+              <p className="text-gray-400 font-light leading-relaxed">
+                Cutting-edge robotics research across multiple domains and
+                applications.
+              </p>
+            </div>
+            <div className="glass-card p-10 rounded-2xl text-center transition-all duration-300">
+              <div className="text-5xl mb-6">⚙️</div>
+              <h3 className="text-xl font-light mb-4 text-gray-200">
+                Engineering Development
+              </h3>
+              <p className="text-gray-400 font-light leading-relaxed">
+                Hands-on engineering experience through real-world robotics
+                projects, technical workshops, and collaborative problem
+                solving.
+              </p>
             </div>
           </div>
+
           {/* Competition Accolades - Large Rectangle */}
           <div className="glass-card p-10 rounded-2xl text-center transition-all duration-300 mt-8 max-w-3xl mx-auto">
             <div className="text-5xl mb-6">🏆</div>
@@ -104,24 +99,18 @@ const Home = () => {
               </li>
             </ul>
           </div>
-        </section>
-
-        {/* Contact Section */}
-        <section className="py-24 px-4 bg-gradient-to-br from-gray-800 to-gray-900">
-          <div className="max-w-4xl mx-auto text-center">
-            <h2 className="text-4xl md:text-5xl lg:text-6xl mb-12 text-gray-200">
-              READY TO <span className="text-yellow-400">JOIN US</span>
-            </h2>
+        </PageSection>
+        <PageSection heading="READY TO JOIN US" colorVariant="A">
+          <div className="mx-auto text-center">
             <ButtonLink
               sizeVariant="xl"
               style="primary"
               to="https://forms.gle/59pUiPUCpDrgBCqn7"
             >
-              APPLY NOW
+              Apply Now
             </ButtonLink>
           </div>
-        </section>
-
+        </PageSection>
         {/* Kung Fu Tea Profit Share Popup - Mobile */}
         {/*         
         {ENABLE_SHOWCASE_POPUPS && showMobilePopup && (
@@ -168,7 +157,6 @@ const Home = () => {
             </div>
           </div>
         )} */}
-
         {/* Kung Fu Tea Profit Share Popup - Desktop */}
         {/*         
         {ENABLE_SHOWCASE_POPUPS && (
@@ -199,42 +187,38 @@ const Home = () => {
             </div>
           </a>
         )} */}
-
-        {/* Calendar Section */}
-        <section className="py-24 px-4">
-          <div className="max-w-6xl mx-auto">
-            <h2 className="text-4xl md:text-5xl lg:text-6xl text-center mb-10 text-gray-200">
-              Calendar
-            </h2>
-            <div className="flex justify-center">
-              <div className="rounded-2xl border-4 border-gray-700 shadow-xl bg-gray-900/60 p-4 w-full max-w-[1300px]">
-                <div
-                  className="relative w-full"
-                  style={{ paddingBottom: "120%", height: 0 }}
-                >
-                  <iframe
-                    src="https://calendar.google.com/calendar/embed?src=turtlerobotics%40gmail.com&ctz=America%2FChicago"
-                    style={{
-                      border: 0,
-                      borderRadius: "1rem",
-                      background: "transparent",
-                      position: "absolute",
-                      top: 0,
-                      left: 0,
-                      width: "100%",
-                      height: "100%",
-                    }}
-                    frameBorder="0"
-                    scrolling="no"
-                    title="TURTLE Google Calendar"
-                    allowFullScreen
-                  ></iframe>
-                </div>
+        <PageSection heading="CALENDAR" colorVariant="B">
+          <div className="flex justify-center">
+            <div className="rounded-2xl border-4 border-gray-700 shadow-xl bg-gray-900/60 p-4 w-full max-w-[1300px]">
+              <div
+                className="relative w-full"
+                style={{ paddingBottom: "120%", height: 0 }}
+              >
+                <iframe
+                  src="https://calendar.google.com/calendar/embed?src=turtlerobotics%40gmail.com&ctz=America%2FChicago"
+                  style={{
+                    border: 0,
+                    borderRadius: "1rem",
+                    background: "transparent",
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                    height: "100%",
+                  }}
+                  frameBorder="0"
+                  scrolling="no"
+                  title="TURTLE Google Calendar"
+                  allowFullScreen
+                ></iframe>
               </div>
             </div>
           </div>
-        </section>
-        <SponsorTicker />
+        </PageSection>
+
+        <PageSection heading="OUR SPONSORS" colorVariant="A">
+          <SponsorTicker />
+        </PageSection>
       </div>
     </>
   );
diff --git a/src/pages/MechanicalIncubator.jsx b/src/pages/MechanicalIncubator.jsx
index 726ead1..3b4c57a 100644
--- a/src/pages/MechanicalIncubator.jsx
+++ b/src/pages/MechanicalIncubator.jsx
@@ -1,7 +1,7 @@
-import ImageCarousel from "../components/ImageCarousel";
 import ButtonLink from "../components/ButtonLink";
 import TextLink from "../components/TextLink";
 import Hero from "../components/Hero";
+import PageSection from "../components/PageSection";
 
 const MechanicalIncubator = () => {
   const learningObjectiveGroups = [
@@ -150,110 +150,93 @@ const MechanicalIncubator = () => {
       ></Hero>
 
       {/* Mission Statement Section */}
-      <section className="py-24 px-4">
-        <div className="max-w-6xl mx-auto">
-          <h2 className="text-4xl md:text-5xl lg:text-6xl text-center mb-20 text-gray-200">
-            PREVIEW <span className="text-accent">WORKSHOP</span>
-          </h2>
-
-          <div className="glass-card p-12 rounded-2xl text-center">
-            <p className="text-xl md:text-2xl font-light text-gray-400 leading-relaxed max-w-4xl mx-auto">
-              TURTLE is thrilled to announce the launch of our Mechanical and
-              Software Incubator. Building upon the success of the Hatchling
-              Development Program, Incubator will provide hands-on opportunities
-              to learn new technical and leadership skills. Join us at our
-              upcoming preview workshops and RSVP for free{" "}
-              <TextLink to="https://forms.gle/7VkJndrzrwp1askw7">here</TextLink>
-              .
-            </p>
-          </div>
+      <PageSection heading="PREVIEW WORKSHOP" colorVariant="B">
+        <div className="glass-card p-12 rounded-2xl text-center">
+          <p className="text-xl md:text-2xl font-light text-gray-400 leading-relaxed max-w-4xl mx-auto">
+            TURTLE is thrilled to announce the launch of our Mechanical and
+            Software Incubator. Building upon the success of the Hatchling
+            Development Program, Incubator will provide hands-on opportunities
+            to learn new technical and leadership skills. Join us at our
+            upcoming preview workshops and RSVP for free{" "}
+            <TextLink to="https://forms.gle/7VkJndrzrwp1askw7">here</TextLink>.
+          </p>
         </div>
-      </section>
+      </PageSection>
 
       {/* Learning Objectives and Schedule Section */}
-      <section className="py-24 px-4 bg-gradient-to-br from-gray-800 to-gray-900">
-        <div className="max-w-6xl mx-auto">
-          <h2 className="text-4xl md:text-5xl lg:text-6xl text-center mb-20 text-gray-200">
-            LEARNING <span className="text-accent">OBJECTIVES</span> & SCHEDULE
-          </h2>
+      <PageSection heading="LEARNING OBJECTIVES & SCHEDULE" colorVariant="A">
+        {/* Learning Objectives - Full Width on Top */}
+        <div className="mb-16">
+          <h3 className="text-3xl font-light text-gray-200 mb-8 text-center">
+            Core Learning Objectives
+          </h3>
+          <p className="text-lg text-gray-400 text-center mb-8 max-w-4xl mx-auto">
+            Mechanical Incubator Members graduate from the program with a
+            community, passion for engineering, and the following skills:
+          </p>
 
-          {/* Learning Objectives - Full Width on Top */}
-          <div className="mb-16">
-            <h3 className="text-3xl font-light text-gray-200 mb-8 text-center">
-              Core Learning Objectives
-            </h3>
-            <p className="text-lg text-gray-400 text-center mb-8 max-w-4xl mx-auto">
-              Mechanical Incubator Members graduate from the program with a
-              community, passion for engineering, and the following skills:
-            </p>
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {learningObjectiveGroups.map((group) => (
+              <div className="glass-card p-8 rounded-xl">
+                <h4 className="text-xl font-light text-accent mb-4">
+                  {group.groupName}
+                </h4>
+                <ul className="space-y-3 text-gray-400 font-light">
+                  {group.objectives.map((objective) => (
+                    <li className="flex items-start" key={objective}>
+                      <span className="text-accent mr-3 mt-1">•</span>
+                      <span>{objective}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
 
-            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-              {learningObjectiveGroups.map((group) => (
-                <div className="glass-card p-8 rounded-xl">
-                  <h4 className="text-xl font-light text-accent mb-4">
-                    {group.groupName}
+        {/* Program Schedule - Horizontal Scrollable Timeline */}
+        <div>
+          <h3 className="text-3xl font-light text-gray-200 mb-8 text-center">
+            10-Week Program Schedule
+          </h3>
+          <div className="relative">
+            {/* Scrollable Timeline Container */}
+            <div className="flex gap-4 overflow-x-auto pb-6 custom-scrollbar">
+              {programScheduleItems.map((item) => (
+                <div className="glass-card p-6 rounded-xl min-w-[280px] flex-shrink-0">
+                  <div className="text-2xl font-light text-accent mb-3">
+                    {item.heading}
+                  </div>
+                  <h4 className="text-lg font-light text-gray-200 mb-3">
+                    {item.subheading}
                   </h4>
-                  <ul className="space-y-3 text-gray-400 font-light">
-                    {group.objectives.map((objective) => (
-                      <li className="flex items-start" key={objective}>
-                        <span className="text-accent mr-3 mt-1">•</span>
-                        <span>{objective}</span>
-                      </li>
+                  <ul className="space-y-2 text-sm text-gray-400 font-light">
+                    {item.objectives.map((objective) => (
+                      <li>• {objective}</li>
                     ))}
+                    {item.milestone ? (
+                      <li className="text-accent font-medium">
+                        • Project Milestone: {item.milestone}
+                      </li>
+                    ) : null}
                   </ul>
                 </div>
               ))}
             </div>
-          </div>
-
-          {/* Program Schedule - Horizontal Scrollable Timeline */}
-          <div>
-            <h3 className="text-3xl font-light text-gray-200 mb-8 text-center">
-              10-Week Program Schedule
-            </h3>
-            <div className="relative">
-              {/* Scrollable Timeline Container */}
-              <div className="flex gap-4 overflow-x-auto pb-6 custom-scrollbar">
-                {programScheduleItems.map((item) => (
-                  <div className="glass-card p-6 rounded-xl min-w-[280px] flex-shrink-0">
-                    <div className="text-2xl font-light text-accent mb-3">
-                      {item.heading}
-                    </div>
-                    <h4 className="text-lg font-light text-gray-200 mb-3">
-                      {item.subheading}
-                    </h4>
-                    <ul className="space-y-2 text-sm text-gray-400 font-light">
-                      {item.objectives.map((objective) => (
-                        <li>• {objective}</li>
-                      ))}
-                      {item.milestone ? (
-                        <li className="text-accent font-medium">
-                          • Project Milestone: {item.milestone}
-                        </li>
-                      ) : null}
-                    </ul>
-                  </div>
-                ))}
-              </div>
 
-              {/* Scroll Indicator */}
-              <div className="text-center mt-4">
-                <p className="text-sm text-gray-400">
-                  ← Scroll to see all 10 weeks →
-                </p>
-              </div>
+            {/* Scroll Indicator */}
+            <div className="text-center mt-4">
+              <p className="text-sm text-gray-400">
+                ← Scroll to see all 10 weeks →
+              </p>
             </div>
           </div>
         </div>
-      </section>
+      </PageSection>
 
       {/* Call to Action */}
-      <section className="py-24 px-4">
+      <PageSection heading="READY TO JOIN" colorVariant="B">
         <div className="max-w-4xl mx-auto text-center">
-          <h2 className="text-4xl md:text-5xl lg:text-6xl mb-12 text-gray-200">
-            READY TO <span className="text-accent">JOIN</span>?
-          </h2>
-
           <p className="text-xl font-light text-gray-400 mb-12 max-w-2xl mx-auto leading-relaxed">
             Become part of the next generation of robotics innovators. Apply now
             to join the Mechanical Incubator Program and accelerate your
@@ -262,14 +245,14 @@ const MechanicalIncubator = () => {
 
           <div className="flex flex-col sm:flex-row gap-6 justify-center items-center">
             <ButtonLink to="/apply" style="primary" sizeVariant="large">
-              APPLY NOW
+              Apply Now
             </ButtonLink>
             <ButtonLink to="/about" style="primary" sizeVariant="large">
-              LEARN MORE
+              Learn More
             </ButtonLink>
           </div>
         </div>
-      </section>
+      </PageSection>
     </div>
   );
 };
diff --git a/src/pages/NotFound.jsx b/src/pages/NotFound.jsx
index a60b87b..1045817 100644
--- a/src/pages/NotFound.jsx
+++ b/src/pages/NotFound.jsx
@@ -1,18 +1,15 @@
-import React from "react";
-import { Link } from "react-router-dom";
 import ButtonLink from "../components/ButtonLink";
+import Hero from "../components/Hero";
 
 const NotFound = () => (
-  <div className="min-h-screen flex flex-col items-center justify-center bg-gray-900">
-    <h1 className="text-7xl font-bold text-yellow-500 mb-6">404</h1>
-    <h2 className="text-3xl font-light text-gray-200 mb-4">Page Not Found</h2>
-    <p className="text-lg text-gray-400 mb-8">
-      Sorry, the page you are looking for does not exist.
-    </p>
+  <Hero
+    heading="404"
+    subheading="Sorry, the page you are looking for does not exist."
+  >
     <ButtonLink to="/" style="primary" sizeVariant="default">
       Go Home
     </ButtonLink>
-  </div>
+  </Hero>
 );
 
 export default NotFound;
diff --git a/src/pages/ProjectDetail.jsx b/src/pages/ProjectDetail.jsx
index c0787b1..aafd16c 100644
--- a/src/pages/ProjectDetail.jsx
+++ b/src/pages/ProjectDetail.jsx
@@ -28,7 +28,7 @@ const ProjectDetail = () => {
   }, [project]);
 
   return (
-    <div className="min-h-screen bg-gray-900">
+    <div className="min-h-screen">
       <div className="max-w-6xl mx-auto px-4 py-10">
         {/* Back Button */}
         <Link
@@ -60,7 +60,7 @@ const ProjectDetail = () => {
             {project.subtitle}
           </p>
           <div className="flex flex-wrap items-center justify-center gap-3">
-            <span className="text-xs font-light text-white bg-yellow-500 px-3 py-1 rounded-full">
+            <span className="text-xs font-light text-black bg-yellow-500 px-3 py-1 rounded-full">
               {project.category}
             </span>
             {project.tags?.slice(0, 4).map((tag, i) => (
diff --git a/src/pages/Projects.jsx b/src/pages/Projects.jsx
index 1cbdb75..3df411a 100644
--- a/src/pages/Projects.jsx
+++ b/src/pages/Projects.jsx
@@ -3,6 +3,7 @@ import { useState, useMemo } from "react";
 import { projects } from "../data/projects";
 import ButtonLink from "../components/ButtonLink";
 import Hero from "../components/Hero";
+import PageSection from "../components/PageSection";
 
 const Projects = () => {
   const [searchTerm, setSearchTerm] = useState("");
@@ -32,130 +33,126 @@ const Projects = () => {
       ></Hero>
 
       {/* Projects Grid */}
-      <section className="py-12 px-4 bg-gradient-to-br from-gray-800 to-gray-900">
-        <div className="max-w-7xl mx-auto">
-          <div className="flex flex-col items-center gap-4 mb-8">
-            <div className="flex-1 max-w-md">
-              <div className="relative">
-                <input
-                  type="text"
-                  placeholder="Search projects..."
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
-                  className="w-full px-4 py-3 pl-12 border border-gray-600 rounded-xl bg-gray-800 text-gray-100 focus:ring-2 focus:ring-accent focus:border-transparent transition-all duration-200"
+      <PageSection colorVariant="B">
+        <div className="flex flex-col items-center gap-4 mb-8">
+          <div className="flex-1 max-w-md">
+            <div className="relative">
+              <input
+                type="text"
+                placeholder="Search projects..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="w-full px-4 py-3 pl-12 border border-gray-600 rounded-xl bg-gray-800 text-gray-100 focus:ring-2 focus:ring-accent focus:border-transparent transition-all duration-200"
+              />
+              <svg
+                className="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                 />
-                <svg
-                  className="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-                  />
-                </svg>
-              </div>
+              </svg>
             </div>
           </div>
-          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
-            {filteredProjects.map((project, index) => (
-              <Link
-                key={index}
-                className="group glass-card pop-card rounded-2xl overflow-hidden hover:scale-[1.02] transition-all duration-500 shadow-soft cursor-pointer transform hover:rotate-[0.5deg] hover:shadow-xl"
-                to={"/projects/" + project.id}
-              >
-                {/* Image */}
-                <div className="relative h-56 overflow-hidden">
-                  <img
-                    src={project.image}
-                    alt={project.title}
-                    className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-125"
-                  />
-                  <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
-                  <div className="absolute bottom-4 left-4 flex flex-wrap gap-2">
-                    <span className="text-xs font-light text-white bg-yellow-500/90 px-3 py-1 rounded-full">
-                      {project.category}
-                    </span>
-                    {project.tags?.slice(0, 2).map((tag, tagIndex) => (
-                      <span
-                        key={tagIndex}
-                        className="text-xs font-light text-white bg-gray-500/80 px-2 py-1 rounded-full"
-                      >
-                        {tag}
-                      </span>
-                    ))}
-                  </div>
-                  <div className="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-                    <span className="text-xs font-light text-white bg-black/70 px-3 py-1 rounded-full">
-                      Click to expand
+        </div>
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+          {filteredProjects.map((project, index) => (
+            <Link
+              key={index}
+              className="group glass-card pop-card rounded-2xl overflow-hidden hover:scale-[1.02] transition-all duration-500 shadow-soft cursor-pointer transform hover:rotate-[0.5deg] hover:shadow-xl"
+              to={"/projects/" + project.id}
+            >
+              {/* Image */}
+              <div className="relative h-56 overflow-hidden">
+                <img
+                  src={project.image}
+                  alt={project.title}
+                  className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-125"
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
+                <div className="absolute bottom-4 left-4 flex flex-wrap gap-2">
+                  <span className="text-xs font-light text-black bg-yellow-500/90 px-3 py-1 rounded-full">
+                    {project.category}
+                  </span>
+                  {project.tags?.slice(0, 2).map((tag, tagIndex) => (
+                    <span
+                      key={tagIndex}
+                      className="text-xs font-light text-white bg-gray-500/80 px-2 py-1 rounded-full"
+                    >
+                      {tag}
                     </span>
-                  </div>
+                  ))}
+                </div>
+                <div className="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                  <span className="text-xs font-light text-white bg-black/70 px-3 py-1 rounded-full">
+                    Click to expand
+                  </span>
                 </div>
+              </div>
 
-                {/* Content */}
-                <div className="p-6">
-                  <h3 className="text-xl font-light text-gray-200 mb-2 group-hover:text-accent transition-colors duration-300">
-                    {project.title}
-                  </h3>
-                  <p className="text-sm font-light text-yellow-400 mb-3">
-                    {project.subtitle}
-                  </p>
-                  <p className="text-sm font-light text-gray-400 leading-relaxed mb-4 line-clamp-3">
-                    {project.description}
-                  </p>
+              {/* Content */}
+              <div className="p-6">
+                <h3 className="text-xl font-light text-gray-200 mb-2 group-hover:text-accent transition-colors duration-300">
+                  {project.title}
+                </h3>
+                <p className="text-sm font-light text-yellow-400 mb-3">
+                  {project.subtitle}
+                </p>
+                <p className="text-sm font-light text-gray-400 leading-relaxed mb-4 line-clamp-3">
+                  {project.description}
+                </p>
 
-                  {/* Project Lead */}
-                  <p className="text-xs font-light text-gray-400 mb-3">
-                    Lead: {project.lead}
-                  </p>
+                {/* Project Lead */}
+                <p className="text-xs font-light text-gray-400 mb-3">
+                  Lead: {project.lead}
+                </p>
 
-                  {/* Status and Duration */}
-                  <div className="flex justify-between items-center mb-4">
-                    <span
-                      className={`text-xs font-light px-2 py-1 rounded-full ${
-                        project.status === "Active"
-                          ? "bg-green-900/20 text-green-300"
-                          : "bg-yellow-900/20 text-yellow-300"
-                      }`}
-                    >
-                      {project.status}
-                    </span>
-                    <span className="text-xs font-light text-gray-400">
-                      {project.duration}
-                    </span>
-                  </div>
+                {/* Status and Duration */}
+                <div className="flex justify-between items-center mb-4">
+                  <span
+                    className={`text-xs font-light px-2 py-1 rounded-full ${
+                      project.status === "Active"
+                        ? "bg-green-900/20 text-green-300"
+                        : "bg-yellow-900/20 text-yellow-300"
+                    }`}
+                  >
+                    {project.status}
+                  </span>
+                  <span className="text-xs font-light text-gray-400">
+                    {project.duration}
+                  </span>
+                </div>
 
-                  {/* View Details Button */}
-                  <div className="flex gap-1">
+                {/* View Details Button */}
+                <div className="flex gap-1">
+                  <ButtonLink
+                    className="flex-none"
+                    style="primary-outline"
+                    sizeVariant="small"
+                    to={"/projects/" + project.id}
+                  >
+                    View Details →
+                  </ButtonLink>
+                  {project.status !== "Archived" && (
                     <ButtonLink
                       className="flex-none"
-                      style="primary-outline"
                       sizeVariant="small"
-                      to={"/projects/" + project.id}
+                      to="/apply"
                     >
-                      View Details →
+                      Apply
                     </ButtonLink>
-                    {project.status !== "Archived" && (
-                      <ButtonLink
-                        className="flex-none"
-                        sizeVariant="small"
-                        to="/apply"
-                      >
-                        Apply
-                      </ButtonLink>
-                    )}
-                  </div>
+                  )}
                 </div>
-              </Link>
-            ))}
-          </div>
+              </div>
+            </Link>
+          ))}
         </div>
-      </section>
-
-      {/* Removed modal: clicking a card navigates to /projects/:id */}
+      </PageSection>
     </div>
   );
 };
diff --git a/src/pages/Showcase.jsx b/src/pages/Showcase.jsx
index 5c6c501..272385f 100644
--- a/src/pages/Showcase.jsx
+++ b/src/pages/Showcase.jsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import PageSection from "../components/PageSection";
 import TextLink from "../components/TextLink";
 
 const ENABLE_SHOWCASE_COUNTDOWN = true;
@@ -103,7 +104,7 @@ function Showcase() {
         >
           {/* Title with text shadow for better readability */}
           <h1 className="text-6xl sm:text-7xl md:text-8xl lg:text-9xl tracking-tight mb-6 text-white drop-shadow-[0_4px_12px_rgba(0,0,0,0.8)]">
-            TURTLE Showcase
+            TURTLE <span className="block text-yellow-400">SHOWCASE</span>
           </h1>
 
           {ENABLE_SHOWCASE_COUNTDOWN ? (
@@ -182,12 +183,8 @@ function Showcase() {
       </div>
 
       {/* FAQ SECTION */}
-      <section className="py-10 px-4 bg-gray-800">
+      <PageSection heading="FREQUENTLY ASKED QUESTIONS" colorVariant="B">
         <div className="max-w-4xl mx-auto">
-          <h2 className="text-4xl md:text-5xl text-center mb-10 text-gray-200">
-            Frequently Asked <span className="text-yellow-400">Questions</span>
-          </h2>
-
           <div className="space-y-4">
             <details className="group bg-gradient-to-br from-gray-700 to-gray-600 rounded-2xl p-6 cursor-pointer">
               <summary className="flex justify-between items-center font-light text-xl text-gray-200 list-none">
@@ -272,14 +269,11 @@ function Showcase() {
             )}
           </div>
         </div>
-      </section>
+      </PageSection>
 
       {/* SHOWCASE PROJECT INTEREST FORM SECTION (deprecated Jan 2026, replaced with email link) */}
-      <section className="py-16 px-4 bg-gray-800">
+      <PageSection heading="SHOWCASE PROJECT INTEREST" colorVariant="A">
         <div className="max-w-3xl mx-auto text-center">
-          <h2 className="text-4xl md:text-5xl text-gray-200 mb-4">
-            Showcase Project Interest
-          </h2>
           <p className="text-xl font-light text-gray-400 mb-6">
             To express your interest in a project, please email us directly at:
           </p>
@@ -287,7 +281,7 @@ function Showcase() {
             turtlerobotics@gmail.com
           </TextLink>
         </div>
-      </section>
+      </PageSection>
 
       <style jsx>{`
         @keyframes confetti-fall {
diff --git a/src/pages/SoftwareIncubator.jsx b/src/pages/SoftwareIncubator.jsx
index c3605a4..d6b9de5 100644
--- a/src/pages/SoftwareIncubator.jsx
+++ b/src/pages/SoftwareIncubator.jsx
@@ -1,7 +1,7 @@
-import ImageCarousel from "../components/ImageCarousel";
 import ButtonLink from "../components/ButtonLink";
 import TextLink from "../components/TextLink";
 import Hero from "../components/Hero";
+import PageSection from "../components/PageSection";
 
 const SoftwareIncubator = () => {
   const learningObjectiveGroups = [
@@ -127,110 +127,93 @@ const SoftwareIncubator = () => {
       ></Hero>
 
       {/* Mission Statement Section */}
-      <section className="py-24 px-4">
-        <div className="max-w-6xl mx-auto">
-          <h2 className="text-4xl md:text-5xl lg:text-6xl text-center mb-20 text-gray-200">
-            PREVIEW <span className="text-accent">WORKSHOP</span>
-          </h2>
-
-          <div className="glass-card p-12 rounded-2xl text-center">
-            <p className="text-xl md:text-2xl font-light text-gray-400 leading-relaxed max-w-4xl mx-auto">
-              TURTLE is thrilled to announce the launch of our Mechanical and
-              Software Incubator. Building upon the success of the Hatchling
-              Development Program, Incubator will provide hands-on opportunities
-              to learn new technical and leadership skills. Join us at our
-              upcoming preview workshops and RSVP for free{" "}
-              <TextLink to="https://forms.gle/7VkJndrzrwp1askw7">here</TextLink>
-              .
-            </p>
-          </div>
+      <PageSection heading="PREVIEW WORKSHOP" colorVariant="B">
+        <div className="glass-card p-12 rounded-2xl text-center">
+          <p className="text-xl md:text-2xl font-light text-gray-400 leading-relaxed max-w-4xl mx-auto">
+            TURTLE is thrilled to announce the launch of our Mechanical and
+            Software Incubator. Building upon the success of the Hatchling
+            Development Program, Incubator will provide hands-on opportunities
+            to learn new technical and leadership skills. Join us at our
+            upcoming preview workshops and RSVP for free{" "}
+            <TextLink to="https://forms.gle/7VkJndrzrwp1askw7">here</TextLink>.
+          </p>
         </div>
-      </section>
+      </PageSection>
 
       {/* Learning Objectives and Schedule Section */}
-      <section className="py-24 px-4 bg-gradient-to-br from-gray-800 to-gray-900">
-        <div className="max-w-6xl mx-auto">
-          <h2 className="text-4xl md:text-5xl lg:text-6xl text-center mb-20 text-gray-200">
-            LEARNING <span className="text-accent">OBJECTIVES</span> & SCHEDULE
-          </h2>
+      <PageSection heading="LEARNING OBJECTIVES & SCHEDULE" colorVariant="A">
+        {/* Learning Objectives - Full Width on Top */}
+        <div className="mb-16">
+          <h3 className="text-3xl font-light text-gray-200 mb-8 text-center">
+            Core Learning Objectives
+          </h3>
+          <p className="text-lg text-gray-400 text-center mb-8 max-w-4xl mx-auto">
+            Software Incubator Members graduate from the program with a
+            community, passion for engineering, and the following skills:
+          </p>
 
-          {/* Learning Objectives - Full Width on Top */}
-          <div className="mb-16">
-            <h3 className="text-3xl font-light text-gray-200 mb-8 text-center">
-              Core Learning Objectives
-            </h3>
-            <p className="text-lg text-gray-400 text-center mb-8 max-w-4xl mx-auto">
-              Software Incubator Members graduate from the program with a
-              community, passion for engineering, and the following skills:
-            </p>
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {learningObjectiveGroups.map((group) => (
+              <div className="glass-card p-8 rounded-xl">
+                <h4 className="text-xl font-light text-accent mb-4">
+                  {group.groupName}
+                </h4>
+                <ul className="space-y-3 text-gray-400 font-light">
+                  {group.objectives.map((objective) => (
+                    <li className="flex items-start" key={objective}>
+                      <span className="text-accent mr-3 mt-1">•</span>
+                      <span>{objective}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
 
-            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-              {learningObjectiveGroups.map((group) => (
-                <div className="glass-card p-8 rounded-xl">
-                  <h4 className="text-xl font-light text-accent mb-4">
-                    {group.groupName}
+        {/* Program Schedule - Horizontal Scrollable Timeline */}
+        <div>
+          <h3 className="text-3xl font-light text-gray-200 mb-8 text-center">
+            10-Week Program Schedule
+          </h3>
+          <div className="relative">
+            {/* Scrollable Timeline Container */}
+            <div className="flex gap-4 overflow-x-auto pb-6 custom-scrollbar">
+              {programScheduleItems.map((item) => (
+                <div className="glass-card p-6 rounded-xl min-w-[280px] flex-shrink-0">
+                  <div className="text-2xl font-light text-accent mb-3">
+                    {item.heading}
+                  </div>
+                  <h4 className="text-lg font-light text-gray-200 mb-3">
+                    {item.subheading}
                   </h4>
-                  <ul className="space-y-3 text-gray-400 font-light">
-                    {group.objectives.map((objective) => (
-                      <li className="flex items-start" key={objective}>
-                        <span className="text-accent mr-3 mt-1">•</span>
-                        <span>{objective}</span>
-                      </li>
+                  <ul className="space-y-2 text-sm text-gray-400 font-light">
+                    {item.objectives.map((objective) => (
+                      <li>• {objective}</li>
                     ))}
+                    {item.milestone ? (
+                      <li className="text-accent font-medium">
+                        • Project Milestone: {item.milestone}
+                      </li>
+                    ) : null}
                   </ul>
                 </div>
               ))}
             </div>
-          </div>
-
-          {/* Program Schedule - Horizontal Scrollable Timeline */}
-          <div>
-            <h3 className="text-3xl font-light text-gray-200 mb-8 text-center">
-              10-Week Program Schedule
-            </h3>
-            <div className="relative">
-              {/* Scrollable Timeline Container */}
-              <div className="flex gap-4 overflow-x-auto pb-6 custom-scrollbar">
-                {programScheduleItems.map((item) => (
-                  <div className="glass-card p-6 rounded-xl min-w-[280px] flex-shrink-0">
-                    <div className="text-2xl font-light text-accent mb-3">
-                      {item.heading}
-                    </div>
-                    <h4 className="text-lg font-light text-gray-200 mb-3">
-                      {item.subheading}
-                    </h4>
-                    <ul className="space-y-2 text-sm text-gray-400 font-light">
-                      {item.objectives.map((objective) => (
-                        <li>• {objective}</li>
-                      ))}
-                      {item.milestone ? (
-                        <li className="text-accent font-medium">
-                          • Project Milestone: {item.milestone}
-                        </li>
-                      ) : null}
-                    </ul>
-                  </div>
-                ))}
-              </div>
 
-              {/* Scroll Indicator */}
-              <div className="text-center mt-4">
-                <p className="text-sm text-gray-400">
-                  ← Scroll to see all 10 weeks →
-                </p>
-              </div>
+            {/* Scroll Indicator */}
+            <div className="text-center mt-4">
+              <p className="text-sm text-gray-400">
+                ← Scroll to see all 10 weeks →
+              </p>
             </div>
           </div>
         </div>
-      </section>
+      </PageSection>
 
       {/* Call to Action */}
-      <section className="py-24 px-4">
+      <PageSection heading="READY TO JOIN" colorVariant="B">
         <div className="max-w-4xl mx-auto text-center">
-          <h2 className="text-4xl md:text-5xl lg:text-6xl mb-12 text-gray-200">
-            READY TO <span className="text-accent">JOIN</span>?
-          </h2>
-
           <p className="text-xl font-light text-gray-400 mb-12 max-w-2xl mx-auto leading-relaxed">
             Become part of the next generation of robotics innovators. Apply now
             to join the Software Incubator Program and accelerate your robotics
@@ -239,14 +222,14 @@ const SoftwareIncubator = () => {
 
           <div className="flex flex-col sm:flex-row gap-6 justify-center items-center">
             <ButtonLink to="/apply" style="primary" sizeVariant="large">
-              APPLY NOW
+              Apply Now
             </ButtonLink>
             <ButtonLink to="/about" style="primary" sizeVariant="large">
-              LEARN MORE
+              Learn More
             </ButtonLink>
           </div>
         </div>
-      </section>
+      </PageSection>
     </div>
   );
 };
diff --git a/src/pages/Sponsorship.jsx b/src/pages/Sponsorship.jsx
index f7e6981..d3cb6ea 100644
--- a/src/pages/Sponsorship.jsx
+++ b/src/pages/Sponsorship.jsx
@@ -1,5 +1,7 @@
 import { useState } from "react";
+import PageSection from "../components/PageSection";
 import SponsorTicker from "../components/SponsorTicker";
+import Hero from "../components/Hero";
 
 const Sponsorship = () => {
   const [showEmailPopup, setShowEmailPopup] = useState(false);
@@ -64,202 +66,175 @@ const Sponsorship = () => {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900">
-      {/* Hero Section */}
-      <section className="relative min-h-screen flex items-center justify-center px-4">
-        <div className="absolute inset-0 bg-gradient-to-br from-gray-900/50 via-gray-800/50 to-gray-900/50"></div>
-        <div className="relative text-center max-w-6xl mx-auto z-10">
-          <h1 className="text-6xl md:text-8xl lg:text-9xl tracking-tight text-gray-200 mb-8">
-            <span className="block">SPONSOR</span>
-            <span className="block text-yellow-400">TURTLE</span>
-          </h1>
-
-          <p className="hero-subtitle text-xl md:text-2xl font-light tracking-wide text-gray-400 mb-12 max-w-3xl mx-auto">
-            Partner with the next generation of robotics innovators. Support
-            cutting-edge research and shape the future of TURTLE.
-          </p>
-
-          <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <button
-              type="button"
-              className="shadow-lg bg-yellow-500 text-black px-10 py-5 rounded-xl font-medium hover:scale-105 transition-all duration-300"
-              onClick={() => {
-                const section = document.getElementById("sponsorship-tiers");
-                if (section) section.scrollIntoView({ behavior: "smooth" });
-              }}
-            >
-              View Sponsorship Tiers
-            </button>
-            <button
-              type="button"
-              className="border-2 border-yellow-500 text-yellow-600 px-10 py-5 rounded-xl font-medium hover:scale-105 transition-all duration-300"
-              onClick={() => {
-                const section = document.getElementById("contact-section");
-                if (section) section.scrollIntoView({ behavior: "smooth" });
-                setShowEmailPopup(true);
-              }}
-            >
-              Contact Us
-            </button>
-          </div>
+    <div className="min-h-screen">
+      <Hero
+        heading="SPONSOR TURTLE"
+        subheading="Partner with the next generation of robotics innovators. Support cutting-edge research and shape the future of TURTLE."
+      >
+        <div className="flex flex-col sm:flex-row gap-4 justify-center">
+          <button
+            type="button"
+            className="shadow-lg bg-yellow-500 text-black px-10 py-5 rounded-xl font-medium hover:scale-105 transition-all duration-300"
+            onClick={() => {
+              const section = document.getElementById("sponsorship-tiers");
+              if (section) section.scrollIntoView({ behavior: "smooth" });
+            }}
+          >
+            View Sponsorship Tiers
+          </button>
+          <button
+            type="button"
+            className="border-2 border-yellow-500 text-yellow-600 px-10 py-5 rounded-xl font-medium hover:scale-105 transition-all duration-300"
+            onClick={() => {
+              const section = document.getElementById("contact-section");
+              if (section) section.scrollIntoView({ behavior: "smooth" });
+              setShowEmailPopup(true);
+            }}
+          >
+            Contact Us
+          </button>
         </div>
-      </section>
+      </Hero>
 
       {/* Impact Stats */}
-      <section className="py-16 px-4">
-        <div className="max-w-6xl mx-auto">
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
-            {impactStats.map((stat, index) => (
-              <div key={index} className="text-center">
-                <div className="text-4xl md:text-5xl font-bold text-yellow-400 mb-2">
-                  {stat.number}
-                </div>
-                <div className="text-sm font-light text-gray-400">
-                  {stat.label}
-                </div>
+      <PageSection colorVariant="B">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
+          {impactStats.map((stat, index) => (
+            <div key={index} className="text-center">
+              <div className="text-4xl md:text-5xl font-bold text-yellow-400 mb-2">
+                {stat.number}
               </div>
-            ))}
-          </div>
+              <div className="text-sm font-light text-gray-400">
+                {stat.label}
+              </div>
+            </div>
+          ))}
         </div>
-      </section>
+      </PageSection>
 
       {/* Why Sponsor Section */}
-      <section className="py-16 px-4 bg-gray-800">
-        <div className="max-w-6xl mx-auto">
-          <div className="text-center mb-16">
-            <h2 className="text-4xl md:text-5xl text-gray-200 mb-8">
-              Why Sponsor <span className="text-yellow-400">TURTLE</span>?
-            </h2>
-            <p className="text-xl font-light text-gray-400 max-w-3xl mx-auto">
-              Join us in advancing robotics technology while gaining access to
-              top engineering talent and innovative research opportunities.
-            </p>
-          </div>
+      <PageSection heading="WHY SPONSOR TURTLE" colorVariant="A">
+        <div className="text-center mb-16">
+          <p className="text-xl font-light text-gray-400 max-w-3xl mx-auto">
+            Join us in advancing robotics technology while gaining access to top
+            engineering talent and innovative research opportunities.
+          </p>
+        </div>
 
-          <div className="grid md:grid-cols-3 gap-8">
-            <div className="sponsor-section text-center p-8 rounded-2xl bg-gradient-to-br from-gray-700 to-gray-600">
-              <div className="w-16 h-16 bg-gradient-to-r from-yellow-500 to-amber-500 rounded-full flex items-center justify-center mx-auto mb-6">
-                <svg
-                  className="w-8 h-8 text-white"
-                  fill="none"
-                  stroke="black"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
-                  />
-                </svg>
-              </div>
-              <h3 className="text-2xl font-light text-gray-200 mb-4">
-                Innovation Access
-              </h3>
-              <p className="text-gray-400">
-                Gain early insight into the latest in robotics development as
-                our diverse and talented teams work to innovate and change the
-                world.
-              </p>
+        <div className="grid md:grid-cols-3 gap-8">
+          <div className="sponsor-section text-center p-8 rounded-2xl bg-gradient-to-br from-gray-700 to-gray-600">
+            <div className="w-16 h-16 bg-gradient-to-r from-yellow-500 to-amber-500 rounded-full flex items-center justify-center mx-auto mb-6">
+              <svg
+                className="w-8 h-8 text-white"
+                fill="none"
+                stroke="black"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
+                />
+              </svg>
             </div>
+            <h3 className="text-2xl font-light text-gray-200 mb-4">
+              Innovation Access
+            </h3>
+            <p className="text-gray-400">
+              Gain early insight into the latest in robotics development as our
+              diverse and talented teams work to innovate and change the world.
+            </p>
+          </div>
 
-            <div className="sponsor-section text-center p-8 rounded-2xl bg-gradient-to-br from-gray-700 to-gray-600">
-              <div className="w-16 h-16 bg-gradient-to-r from-yellow-500 to-amber-500 rounded-full flex items-center justify-center mx-auto mb-6">
-                <svg
-                  className="w-8 h-8 text-white"
-                  fill="none"
-                  stroke="black"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
-                  />
-                </svg>
-              </div>
-              <h3 className="text-2xl font-light text-gray-200 mb-4">
-                Talent Pipeline
-              </h3>
-              <p className="text-gray-400">
-                As one of the largest student-led robotics organizations in
-                Texas, we provide a unique opportunity to connect with future
-                engineers and recruit students for internships and co-ops from
-                our vast catalogue of projects.
-              </p>
+          <div className="sponsor-section text-center p-8 rounded-2xl bg-gradient-to-br from-gray-700 to-gray-600">
+            <div className="w-16 h-16 bg-gradient-to-r from-yellow-500 to-amber-500 rounded-full flex items-center justify-center mx-auto mb-6">
+              <svg
+                className="w-8 h-8 text-white"
+                fill="none"
+                stroke="black"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+                />
+              </svg>
             </div>
+            <h3 className="text-2xl font-light text-gray-200 mb-4">
+              Talent Pipeline
+            </h3>
+            <p className="text-gray-400">
+              As one of the largest student-led robotics organizations in Texas,
+              we provide a unique opportunity to connect with future engineers
+              and recruit students for internships and co-ops from our vast
+              catalogue of projects.
+            </p>
+          </div>
 
-            <div className="sponsor-section text-center p-8 rounded-2xl bg-gradient-to-br from-gray-700 to-gray-600">
-              <div className="w-16 h-16 bg-gradient-to-r from-yellow-500 to-amber-500 rounded-full flex items-center justify-center mx-auto mb-6">
-                <svg
-                  className="w-8 h-8 text-white"
-                  fill="none"
-                  stroke="black"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M13 10V3L4 14h7v7l9-11h-7z"
-                  />
-                </svg>
-              </div>
-              <h3 className="text-2xl font-light text-gray-200 mb-4">
-                Brand Recognition
-              </h3>
-              <p className="text-gray-400">
-                With a platinum level sponsorship, your products and logo can be
-                featured directly on our projects, reaching tens of thousands of
-                students and engineers across Texas and beyond.
-              </p>
+          <div className="sponsor-section text-center p-8 rounded-2xl bg-gradient-to-br from-gray-700 to-gray-600">
+            <div className="w-16 h-16 bg-gradient-to-r from-yellow-500 to-amber-500 rounded-full flex items-center justify-center mx-auto mb-6">
+              <svg
+                className="w-8 h-8 text-white"
+                fill="none"
+                stroke="black"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M13 10V3L4 14h7v7l9-11h-7z"
+                />
+              </svg>
             </div>
+            <h3 className="text-2xl font-light text-gray-200 mb-4">
+              Brand Recognition
+            </h3>
+            <p className="text-gray-400">
+              With a platinum level sponsorship, your products and logo can be
+              featured directly on our projects, reaching tens of thousands of
+              students and engineers across Texas and beyond.
+            </p>
           </div>
         </div>
-      </section>
+      </PageSection>
 
       {/* Sponsorship Tiers */}
-      <section id="sponsorship-tiers" className="py-16 px-4">
-        <div className="max-w-6xl mx-auto">
-          <div className="text-center mb-16">
-            <h2 className="text-4xl md:text-5xl text-gray-200 mb-8">
-              Sponsorship <span className="text-yellow-400">Tiers</span>
-            </h2>
-            <p className="text-xl font-light text-gray-400 max-w-3xl mx-auto">
-              Choose the sponsorship level that best fits your organization's
-              goals and budget.
-            </p>
-          </div>
+      <PageSection heading="SPONSORSHIP TIERS" colorVariant="B">
+        <div id="sponsorship-tiers" className="text-center mb-16">
+          <p className="text-xl font-light text-gray-400 max-w-3xl mx-auto">
+            Choose the sponsorship level that best fits your organization's
+            goals and budget.
+          </p>
+        </div>
 
-          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
-            {sponsorshipTiers.map((tier, index) => (
-              <div key={index} className="sponsor-section group">
-                <div
-                  className={`${tier.color} p-8 rounded-2xl text-black shadow-lg`}
-                >
-                  <h3 className="text-2xl font-light mb-2">{tier.name}</h3>
-                  <div className="text-3xl font-bold mb-6">{tier.amount}</div>
-                  <ul className="space-y-3 list-disc list-outside pl-5">
-                    {tier.benefits.map((benefit, benefitIndex) => (
-                      <li key={benefitIndex} className="text-sm">
-                        {benefit}
-                      </li>
-                    ))}
-                  </ul>
-                </div>
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+          {sponsorshipTiers.map((tier, index) => (
+            <div key={index} className="sponsor-section group">
+              <div
+                className={`${tier.color} p-8 rounded-2xl text-black shadow-lg`}
+              >
+                <h3 className="text-2xl font-light mb-2">{tier.name}</h3>
+                <div className="text-3xl font-bold mb-6">{tier.amount}</div>
+                <ul className="space-y-3 list-disc list-outside pl-5">
+                  {tier.benefits.map((benefit, benefitIndex) => (
+                    <li key={benefitIndex} className="text-sm">
+                      {benefit}
+                    </li>
+                  ))}
+                </ul>
               </div>
-            ))}
-          </div>
+            </div>
+          ))}
         </div>
-      </section>
+      </PageSection>
 
       {/* Contact Section */}
-      <section id="contact-section" className="py-16 px-4 bg-gray-800">
-        <div className="max-w-4xl mx-auto text-center">
-          <h2 className="text-4xl md:text-5xl text-gray-200 mb-8">
-            Ready to <span className="text-yellow-400">Partner</span>?
-          </h2>
+      <PageSection heading="READY TO PARTNER" colorVariant="A">
+        <div id="contact-section" className="max-w-4xl mx-auto text-center">
           <p className="text-xl font-light text-gray-400 mb-8 max-w-2xl mx-auto">
             Let's discuss how your organization can support the future of
             robotics innovation while gaining valuable benefits.
@@ -274,8 +249,11 @@ const Sponsorship = () => {
             </button>
           </div>
         </div>
-      </section>
-      <SponsorTicker />
+      </PageSection>
+
+      <PageSection heading="OUR SPONSORS" colorVariant="B">
+        <SponsorTicker />
+      </PageSection>
 
       {showEmailPopup && (
         <div