diff --git a/src/App.tsx b/src/App.tsx
index c9c6d8e..57debb8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,12 +3,14 @@ import Layout from './components/Layout';
 import HomePage from './pages/HomePage';
 
 import ProductsPage from "@/pages/ProductsPage";
+import AboutPage from "@/pages/AboutPage";
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<HomePage />} />
         <Route path="/products" element={<ProductsPage />} />
+        <Route path="/about" element={<AboutPage />} />
       </Route>
     </Routes>
   );
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 7c54d99..af58c97 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -29,6 +29,8 @@ export default function Layout() {
     "name": "Metrics",    "href": "#metrics"
   },
   { name: "Products", href: "/products" },
+  { name: "About", href: "/about" },
+
 
 ];
 
diff --git a/src/pages/AboutPage.tsx b/src/pages/AboutPage.tsx
new file mode 100644
index 0000000..5d30794
--- /dev/null
+++ b/src/pages/AboutPage.tsx
@@ -0,0 +1,137 @@
+import { routes } from "@/routes";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import TextAnimation from "@/components/ui/TextAnimation";
+import Card from "@/components/ui/Card";
+import GridOrCarousel from "@/components/ui/GridOrCarousel";
+import Button from "@/components/ui/Button";
+import NoiseBackground from "@/components/ui/NoiseBackground";
+
+export default function AboutPage() {
+  return (
+    <div className="min-h-svh bg-background text-foreground">
+      <NoiseBackground position="fixed" />
+
+      <main className="relative z-10">
+        {/* Community & Foundation */}
+        <section className="w-content-width mx-auto">
+          <ScrollReveal variant="fade-blur">
+            <div className="flex flex-col">
+              <div className="flex flex-col items-center text-center">
+                <TextAnimation text="Community" variant="slide-up" gradientText={false} tag="h2" className="text-4xl md:text-5xl font-bold mb-6" />
+                <p className="text-lg md:text-xl text-accent max-w-content-width leading-relaxed">
+                  We are deeply rooted in the communities we serve. Our commitment goes beyond banking; we actively participate in local initiatives, sponsor community events, and volunteer our time to make a positive impact where our members live and work.
+                </p>
+              </div>
+              <div className="flex flex-col items-center text-center">
+                <TextAnimation text="Foundation" variant="slide-up" gradientText={false} tag="h2" className="text-4xl md:text-5xl font-bold mb-6" />
+                <p className="text-lg md:text-xl text-accent max-w-content-width leading-relaxed">
+                  The Suncoast Foundation was established to support the educational, health, and emotional well-being of children in our communities. Through scholarships, grants, and partnerships, we strive to create a brighter future for the next generation.
+                </p>
+              </div>
+            </div>
+          </ScrollReveal>
+        </section>
+
+        {/* The Suncoast Difference & Membership Perks */}
+        <section className="bg-foreground/5">
+          <div className="w-content-width mx-auto flex flex-col">
+            <div className="flex flex-col">
+              <TextAnimation text="The Suncoast Difference" variant="slide-up" gradientText={false} tag="h2" className="text-4xl md:text-5xl font-bold text-center" />
+              <GridOrCarousel>
+                <Card className="p-8 card bg-card border-border text-foreground flex flex-col gap-4 rounded-xl">
+                  <h3 className="text-2xl font-semibold">Member-Owned</h3>
+                  <p className="text-accent leading-relaxed">As a not-for-profit cooperative, our earnings are returned to you in the form of lower rates on loans, higher yields on savings, and fewer fees.</p>
+                </Card>
+                <Card className="p-8 card bg-card border-border text-foreground flex flex-col gap-4 rounded-xl">
+                  <h3 className="text-2xl font-semibold">Local Decision Making</h3>
+                  <p className="text-accent leading-relaxed">Our decisions are made locally by people who understand the unique needs of our community, ensuring faster and more personalized service.</p>
+                </Card>
+                <Card className="p-8 card bg-card border-border text-foreground flex flex-col gap-4 rounded-xl">
+                  <h3 className="text-2xl font-semibold">Financial Education</h3>
+                  <p className="text-accent leading-relaxed">We empower our members with the knowledge and tools they need to make informed financial decisions and achieve their goals.</p>
+                </Card>
+              </GridOrCarousel>
+            </div>
+
+            <div className="flex flex-col">
+              <TextAnimation text="Membership Perks" variant="slide-up" gradientText={false} tag="h2" className="text-4xl md:text-5xl font-bold text-center" />
+              <GridOrCarousel>
+                <Card className="p-8 card bg-card border-border text-foreground flex flex-col gap-4 rounded-xl">
+                  <h3 className="text-2xl font-semibold">Exclusive Discounts</h3>
+                  <p className="text-accent leading-relaxed">Enjoy special discounts on entertainment, travel, and everyday purchases just for being a member.</p>
+                </Card>
+                <Card className="p-8 card bg-card border-border text-foreground flex flex-col gap-4 rounded-xl">
+                  <h3 className="text-2xl font-semibold">Free Financial Counseling</h3>
+                  <p className="text-accent leading-relaxed">Access complimentary, confidential financial counseling to help you budget, manage debt, and plan for the future.</p>
+                </Card>
+                <Card className="p-8 card bg-card border-border text-foreground flex flex-col gap-4 rounded-xl">
+                  <h3 className="text-2xl font-semibold">Nationwide Access</h3>
+                  <p className="text-accent leading-relaxed">Access your money anywhere with our extensive network of surcharge-free ATMs and shared branching locations.</p>
+                </Card>
+              </GridOrCarousel>
+            </div>
+          </div>
+        </section>
+
+        {/* Diversity, Equity and Inclusion & Green Sunco */}
+        <section className="w-content-width mx-auto flex flex-col">
+          <ScrollReveal variant="slide-up">
+            <div className="flex flex-col md:flex-row items-center">
+              <div className="flex-1 flex flex-col items-start gap-6">
+                <TextAnimation text="Diversity, Equity and Inclusion" variant="slide-up" gradientText={false} tag="h2" className="text-4xl md:text-5xl font-bold" />
+                <p className="text-lg text-accent leading-relaxed">
+                  We believe that our differences make us stronger. We are committed to fostering an inclusive environment where all members and employees feel valued, respected, and empowered to reach their full potential.
+                </p>
+                <Button text="Learn More" variant="secondary" />
+              </div>
+              <div className="flex-1 w-full aspect-video rounded-xl overflow-hidden card">
+                <img src="https://images.unsplash.com/photo-1573164713988-8665fc963095?auto=format&fit=crop&q=80" alt="Diverse team collaborating" className="w-full h-full object-cover" />
+              </div>
+            </div>
+          </ScrollReveal>
+
+          <ScrollReveal variant="slide-up">
+            <div className="flex flex-col md:flex-row-reverse items-center">
+              <div className="flex-1 flex flex-col items-start gap-6">
+                <TextAnimation text="Green Sunco" variant="slide-up" gradientText={false} tag="h2" className="text-4xl md:text-5xl font-bold" />
+                <p className="text-lg text-accent leading-relaxed">
+                  Protecting our environment is a core value. Through our Green Sunco initiatives, we implement sustainable practices in our operations, support eco-friendly community projects, and offer green loans to help our members reduce their carbon footprint.
+                </p>
+                <Button text="Our Green Initiatives" variant="secondary" />
+              </div>
+              <div className="flex-1 w-full aspect-video rounded-xl overflow-hidden card">
+                <img src="https://images.unsplash.com/photo-1497435334941-8c899ee9e8e9?auto=format&fit=crop&q=80" alt="Solar panels and green energy" className="w-full h-full object-cover" />
+              </div>
+            </div>
+          </ScrollReveal>
+        </section>
+
+        {/* Suncoast Leadership */}
+        <section className="bg-foreground/5">
+          <div className="w-content-width mx-auto flex flex-col">
+            <TextAnimation text="Suncoast Leadership" variant="slide-up" gradientText={false} tag="h2" className="text-4xl md:text-5xl font-bold text-center" />
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+              {[
+                { name: "Jane Doe", role: "Chief Executive Officer", img: "https://i.pravatar.cc/300?u=jane" },
+                { name: "John Smith", role: "Chief Financial Officer", img: "https://i.pravatar.cc/300?u=john" },
+                { name: "Alice Johnson", role: "Chief Operations Officer", img: "https://i.pravatar.cc/300?u=alice" },
+                { name: "Robert Davis", role: "Chief Information Officer", img: "https://i.pravatar.cc/300?u=robert" }
+              ].map((leader) => (
+                <Card key={leader.name} className="overflow-hidden card bg-card border-border text-foreground flex flex-col rounded-xl">
+                  <div className="aspect-square w-full">
+                    <img src={leader.img} alt={leader.name} className="w-full h-full object-cover" />
+                  </div>
+                  <div className="p-6 text-center flex flex-col gap-1">
+                    <h3 className="text-xl font-semibold">{leader.name}</h3>
+                    <p className="text-sm text-accent">{leader.role}</p>
+                  </div>
+                </Card>
+              ))}
+            </div>
+          </div>
+        </section>
+      </main>
+
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/routes.ts b/src/routes.ts
index 93d7fae..2a62f3d 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -7,4 +7,5 @@ export interface Route {
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
   { path: '/products', label: 'Products', pageFile: 'ProductsPage' },
+  { path: '/about', label: 'About', pageFile: 'AboutPage' },
 ];