diff --git a/app/about/page.tsx b/app/about/page.tsx
index 24d5483..a6aca04 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -1,90 +1,151 @@
-import React from "react";
+"use client";
+
+import { useState } from "react";
 import PublicLayout from "@/components/layout/PublicLayout";
+import { leaders } from "../../data/leaders";
+
+const BLUE = "#38BFE8";
+const LIGHT_BLUE = "#C9F1FB";
+
+export default function AboutPage() {
+  const [activeTab, setActiveTab] = useState<"team" | "map">("team");
 
-export default function AboutUs() {
   return (
     <PublicLayout>
-      <div className="mx-auto max-w-4xl px-6 py-12">
-        <h1 className="text-4xl font-semibold tracking-tight">BIG STRATEGY LABS</h1>
-        <p className="text-gray-700 leading-relaxed mt-3">
-          Empowering the next generation of startups.
-        </p>
+      <main className="mx-auto max-w-6xl px-6 pb-16 pt-16">
+        {/* HERO */}
+        <section className="text-center">
+          <h1 className="mx-auto max-w-[620px] text-left text-[34px] font-bold leading-[1.18] tracking-tight md:text-[36px]">
+            An invite-only hub for innovation,
+            <br />
+            leadership, and strategic growth
+          </h1>
 
-        <section className="mt-10">
-          <h2 className="text-2xl font-semibold mb-3">Our Mission</h2>
-          <p className="text-gray-700 leading-relaxed mb-4">
-            We believe in the power of innovation and the entrepreneurs who drive it forward.
-            Our mission is to identify, support, and accelerate startups that are building the future.
-          </p>
-          <p className="text-gray-700 leading-relaxed">
-            Whether you're at the idea stage or scaling rapidly, we provide the resources,
-            mentorship, and network you need to succeed.
-          </p>
-        </section>
+          {/* TABS */}
+          <div className="relative mx-auto mt-8 flex w-fit items-center justify-center">
+            <div
+              className="absolute left-[14px] right-[14px] top-1/2 h-[12px] -translate-y-1/2 border-y-[3px]"
+              style={{
+                borderColor: BLUE,
+                backgroundColor: LIGHT_BLUE,
+              }}
+            />
 
-        <section className="mt-10">
-          <h2 className="text-2xl font-semibold mb-3">What We Offer</h2>
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-4">
-            {[
-              { title: "Funding", desc: "Competitive investment for promising startups" },
-              { title: "Mentorship", desc: "Guidance from industry experts and successful founders" },
-              { title: "Network", desc: "Access to investors, partners, and fellow entrepreneurs" },
-              { title: "Resources", desc: "Tools, workspace, and support to help you grow" },
-            ].map((item) => (
-              <div key={item.title} className="border border-black p-6">
-                <h3 className="text-lg font-semibold mb-1">{item.title}</h3>
-                <p className="text-gray-700 leading-relaxed text-sm">{item.desc}</p>
-              </div>
-            ))}
-          </div>
-        </section>
+            <button
+              type="button"
+              onClick={() => setActiveTab("map")}
+              className="relative z-10 h-[42px] rounded-[6px] border-[3px] bg-white px-7 text-[18px] font-normal tracking-wide"
+              style={{
+                borderColor: BLUE,
+                backgroundColor: activeTab === "map" ? LIGHT_BLUE : "white",
+              }}
+            >
+              MAPPING LEADERS
+            </button>
+
+            <div className="w-14" />
 
-        <section className="mt-10">
-          <h2 className="text-2xl font-semibold mb-3">How It Works</h2>
-          <div className="border-l-2 border-black pl-8 space-y-8">
-            {[
-              { step: "01", title: "Apply", desc: "Submit your startup application through our platform" },
-              { step: "02", title: "Review", desc: "Our team evaluates your application and potential" },
-              { step: "03", title: "Interview", desc: "Selected founders meet with our team to discuss their vision" },
-              { step: "04", title: "Launch", desc: "Accepted startups join our program and begin their journey" },
-            ].map((item) => (
-              <div key={item.step}>
-                <h3 className="text-lg font-semibold">{item.step} — {item.title}</h3>
-                <p className="text-gray-700 leading-relaxed text-sm mt-1">{item.desc}</p>
-              </div>
-            ))}
+            <button
+              type="button"
+              onClick={() => setActiveTab("team")}
+              className="relative z-10 h-[42px] rounded-[6px] border-[3px] px-7 text-[18px] font-normal tracking-wide"
+              style={{
+                borderColor: BLUE,
+                backgroundColor: activeTab === "team" ? LIGHT_BLUE : "white",
+              }}
+            >
+              MEET THE TEAM
+            </button>
           </div>
         </section>
 
-        <section className="mt-10 border-y-2 border-black py-12 text-center">
-          <h2 className="text-2xl font-semibold mb-3">Ready to Build the Future?</h2>
-          <p className="text-gray-700 leading-relaxed mb-6">
-            Join hundreds of successful startups in our program.
-          </p>
-          <a
-            href="/apply"
-            className="inline-block px-10 py-4 bg-black text-white font-semibold hover:bg-white hover:text-black border-2 border-black transition-colors"
-          >
-            Apply Now
-          </a>
-        </section>
+        {/* CONTENT */}
+        <section className="mt-24">
+          {activeTab === "team" && (
+            <div className="space-y-14">
+              {leaders.map((leader, index) => {
+                const isReversed = index % 2 !== 0;
 
-        <section className="mt-10 text-center">
-          <h2 className="text-2xl font-semibold mb-3">Get in Touch</h2>
-          <p className="text-gray-700 leading-relaxed mb-6">Have questions? We'd love to hear from you.</p>
-          <div className="flex flex-wrap justify-center gap-8 text-sm">
-            <a href="mailto:hello@yourcompany.com" className="text-black underline-offset-4 hover:underline">
-              hello@yourcompany.com
-            </a>
-            <a href="https://twitter.com/yourcompany" className="text-black underline-offset-4 hover:underline">
-              Twitter
-            </a>
-            <a href="https://linkedin.com/company/yourcompany" className="text-black underline-offset-4 hover:underline">
-              LinkedIn
-            </a>
-          </div>
+                return (
+                  <div
+                    key={leader.name}
+                    className={`mx-auto grid max-w-[980px] grid-cols-1 items-center gap-8 rounded-[18px] px-8 py-5 md:min-h-[310px] md:px-8 md:py-5 ${
+                      isReversed
+                        ? "md:grid-cols-[1fr_300px]"
+                        : "md:grid-cols-[300px_1fr]"
+                    }`}
+                    style={{ backgroundColor: LIGHT_BLUE }}
+                  >
+                    {/* IMAGE */}
+                    <div
+                      className={`h-[300px] w-full overflow-hidden rounded-[14px] bg-white md:w-[300px] ${
+                        isReversed ? "md:order-2 md:ml-auto" : "md:order-1"
+                      }`}
+                    >
+                      {leader.image ? (
+                        <img
+                          src={leader.image}
+                          alt={leader.name}
+                          className="h-full w-full object-cover"
+                        />
+                      ) : (
+                        <div
+                          className="flex h-full w-full items-center justify-center text-5xl font-bold"
+                          style={{ color: BLUE }}
+                        >
+                          {leader.name
+                            .split(" ")
+                            .map((word) => word[0])
+                            .join("")}
+                        </div>
+                      )}
+                    </div>
+
+                    {/* TEXT */}
+                    <div
+                      className={`flex w-full flex-col justify-center text-center md:text-left ${
+                        isReversed
+                          ? "md:order-1 md:pl-6 md:pr-8"
+                          : "md:order-2 md:pl-8 md:pr-6"
+                      }`}
+                    >
+                      <h3 className="text-[32px] font-semibold leading-none tracking-tight">
+                        {leader.name}
+                      </h3>
+
+                      <p className="mt-6 text-[25px] leading-none text-black">
+                        {leader.title}
+                      </p>
+
+                      <p className="mt-6 max-w-[560px] text-[22px] leading-[1.22] text-black">
+                        {leader.bio}
+                      </p>
+
+                      <a
+                        href={`mailto:${leader.email}`}
+                        className="mx-auto mt-9 inline-flex w-fit items-center justify-center rounded-full border-[3px] px-5 py-1 text-[16px] font-bold leading-none tracking-[0.12em] text-white md:mx-auto"
+                        style={{
+                          backgroundColor: BLUE,
+                          borderColor: "white",
+                          outline: `3px solid ${BLUE}`,
+                        }}
+                      >
+                        CONTACT
+                      </a>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+
+          {activeTab === "map" && (
+            <div className="text-center text-gray-500">
+              <p>Map coming soon.</p>
+            </div>
+          )}
         </section>
-      </div>
+      </main>
     </PublicLayout>
   );
 }
\ No newline at end of file
diff --git a/app/leaders/page.tsx b/app/leaders/page.tsx
index a9a039b..384a6da 100644
--- a/app/leaders/page.tsx
+++ b/app/leaders/page.tsx
@@ -1,151 +1,5 @@
-import React from 'react';
-import Link from 'next/link';
-import LeaderCard2 from '@/components/ui/LeaderCard2';
-import PublicLayout from '@/components/layout/PublicLayout';
-
-
-const team = [
-  {
-    name: "Sarah Johnson",
-    title: "Founder & CEO",
-    bio: "Former co-founder of TechVentures. Early investor at Google and Amazon.",
-    image: "woman.jpg",
-  },
-  {
-    name: "Michael Chen",
-    title: "Investment Director",
-    bio: "Lead investor at Sequoia Capital. Former partner at Y Combinator.",
-    image: "men.jpg",
-  },
-  {
-    name: "Emily Rodriguez",
-    title: "Head of Programs",
-    bio: "Built accelerator programs at Techstars. Former founder of EdTech startup.",
-    image: "woman.jpg",
-  },
-  {
-    name: "David Park",
-    title: "Technical Advisor",
-    bio: "Former CTO at Stripe. Led engineering at Facebook and Airbnb.",
-    image: "men.jpg",
-  },
-  {
-    name: "Alex Thompson",
-    title: "Operations Manager",
-    bio: "Scaled operations at Uber. Former consultant at McKinsey.",
-    image: "men.jpg",
-  },
-  {
-    name: "Maria Garcia",
-    title: "Venture Partner",
-    bio: "15 years in venture capital. Board member at multiple unicorns.",
-    image: "woman.jpg",
-  },
-  {
-    name: "Ryan Mitchell",
-    title: "Community Lead",
-    bio: "Built communities at Reddit. Former developer relations at GitHub.",
-    image: "men.jpg",
-  },
-  {
-    name: "Sharad Aggarwal",
-    title: "VC",
-    bio: "Global head of AI Strategy at Google Cloud.",
-    image: "men.jpg",
-  },
-];
+import { redirect } from "next/navigation";
 
 export default function LeadersPage() {
-  return (
-    <PublicLayout>
-      <div style={{
-        minHeight: '100vh',
-        backgroundColor: '#ffffff',
-        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
-        padding: '60px 20px',
-      }}>
-        <div style={{ maxWidth: '860px', margin: '0 auto' }}>
-
-        {/* Header */}
-        <header style={{ textAlign: 'center', marginBottom: '70px' }}>
-          <h1 style={{
-            fontSize: '42px',
-            fontWeight: '400',
-            margin: '0 0 16px 0',
-            letterSpacing: '-1px',
-            color: '#000',
-            lineHeight: '1.2',
-          }}>
-            We are the people who<br />make up BIG STRATEGY LABS
-          </h1>
-          <p style={{
-            fontSize: '17px',
-            color: '#444',
-            maxWidth: '560px',
-            margin: '0 auto',
-            lineHeight: '1.6',
-          }}>
-            Our philosophy is simple: hire great people and give them the resources and support to do their best work.
-          </p>
-        </header>
-
-        {/* Team Cards */}
-        <div className="mb-20 grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
-          {team.map((member, index) => (
-            <LeaderCard2
-              key={member.name}
-              name={member.name}
-              title={member.title}
-              bio={member.bio}
-              image={member.image}
-            />
-          ))}
-        </div>
-
-        {/* CTA Section */}
-        <section style={{
-          borderTop: '2px solid #000',
-          borderBottom: '2px solid #000',
-          padding: '50px 0',
-          textAlign: 'center',
-          marginBottom: '60px',
-        }}>
-          <h2 style={{ fontSize: '32px', fontWeight: '700', margin: '0 0 16px 0', letterSpacing: '-0.5px' }}>
-            Ready to Build the Future?
-          </h2>
-          <p style={{ fontSize: '18px', margin: '0 0 28px 0', color: '#444' }}>
-            Join hundreds of successful startups in our program
-          </p>
-          <Link
-  href="/apply/team"
-  className="inline-block px-12 py-4 bg-black text-white font-semibold border-2 border-black hover:bg-white hover:text-black transition-colors duration-200"
->
-  Apply Now
-</Link>
-        </section>
-
-        {/* Contact Section */}
-        <section style={{ textAlign: 'center' }}>
-          <h2 style={{ fontSize: '28px', fontWeight: '600', marginBottom: '16px' }}>Get in Touch</h2>
-          <p style={{ fontSize: '17px', marginBottom: '20px', color: '#444' }}>Have questions? We'd love to hear from you.</p>
-          <div style={{ display: 'flex', gap: '30px', flexWrap: 'wrap', justifyContent: 'center' }}>
-            {[
-              { label: 'hello@yourcompany.com', href: 'mailto:hello@yourcompany.com' },
-              { label: 'Twitter', href: 'https://twitter.com/yourcompany' },
-              { label: 'LinkedIn', href: 'https://linkedin.com/company/yourcompany' },
-            ].map((link) => (
-              <a
-  href={link.href}
-  className="text-black no-underline text-lg border-b-2 border-transparent hover:border-black transition-colors duration-200"
->
-  {link.label}
-</a>
-            ))}
-          </div>
-        </section>
-
-      </div>
-    </div>
-    </PublicLayout>
-  );
+  redirect("/about");
 }
\ No newline at end of file
diff --git a/data/leaders.ts b/data/leaders.ts
new file mode 100644
index 0000000..70627d4
--- /dev/null
+++ b/data/leaders.ts
@@ -0,0 +1,53 @@
+// Replace with real BSL leader data from Sharad.
+
+export const leaders = [
+    {
+      name: "Jane Doe",
+      title: "Executive",
+      bio: "Placeholder leader bio. Replace with real data.",
+      email: "jane@example.com",
+      image: "",
+    },
+    {
+      name: "John Smith",
+      title: "Operations Lead",
+      bio: "Placeholder leader bio. Replace with real data.",
+      email: "john@example.com",
+      image: "",
+    },
+    {
+      name: "Alex Chen",
+      title: "Strategy Lead",
+      bio: "Placeholder leader bio. Replace with real data.",
+      email: "alex@example.com",
+      image: "",
+    },
+    {
+      name: "Maya Patel",
+      title: "Program Lead",
+      bio: "Placeholder leader bio. Replace with real data.",
+      email: "maya@example.com",
+      image: "",
+    },
+    {
+      name: "Ryan Kim",
+      title: "Operations Lead",
+      bio: "Placeholder leader bio. Replace with real data.",
+      email: "ryan@example.com",
+      image: "",
+    },
+    {
+      name: "Sophia Lee",
+      title: "Community Lead",
+      bio: "Placeholder leader bio. Replace with real data.",
+      email: "sophia@example.com",
+      image: "",
+    },
+    {
+      name: "Sharad Aggarwal",
+      title: "Advisor",
+      bio: "Placeholder leader bio. Replace with real data.",
+      email: "sharad@example.com",
+      image: "",
+    },
+  ];
\ No newline at end of file