diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 765a5a2..4e1b5ce 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -8,7 +8,7 @@ import DashboardPage from "./pages/DashboardPage";
 import ExplorePage from "./pages/ExplorePage";
 import CodeforcesPage from "./pages/CodeforcesPage";
 import PracticePage from "./pages/PracticePage";
-
+import AboutCodeLensPage from "./pages/AboutCodeLensPage";
 import ApexAIPage from "./pages/ApexAIPage";
 import ApexWorkspacePage from "./pages/ApexWorkspacePage";
 import AlgoVersePage from "./pages/AlgoVersePage";
@@ -115,6 +115,7 @@ export default function App() {
             <Route path="/bug-reports" element={<BugReportsPage />} />
             <Route path="/faq" element={<FAQPage />} />
             <Route path="/contact" element={<Contact />} />
+            <Route path="/about" element={<AboutCodeLensPage />} />
             <Route path="*" element={<NotFoundPage />} />
           </Routes>
         </MainLayout>
diff --git a/frontend/src/components/about/AboutCarousel.jsx b/frontend/src/components/about/AboutCarousel.jsx
new file mode 100644
index 0000000..89cb4e0
--- /dev/null
+++ b/frontend/src/components/about/AboutCarousel.jsx
@@ -0,0 +1,119 @@
+import { useEffect, useState } from "react";
+
+const slides = [
+  {
+    title: "Competitive Programming",
+    description:
+      "Practice curated problems and strengthen problem-solving skills through structured learning.",
+    stat: "500+",
+  },
+  {
+    title: "AlgoVerse",
+    description:
+      "Visualize algorithms and data structures with interactive learning experiences.",
+    stat: "DSA",
+  },
+  {
+    title: "GitHub Intelligence",
+    description:
+      "Analyze repositories and gain deeper insights into development activity.",
+    stat: "GitHub",
+  },
+  {
+    title: "APEX AI",
+    description:
+      "Leverage AI-powered tools to improve productivity and learning outcomes.",
+    stat: "AI",
+  },
+  {
+    title: "Community Driven",
+    description:
+      "Built with community feedback and contributions to help learners grow together.",
+    stat: "Open",
+  },
+];
+
+export default function AboutCarousel() {
+  const [current, setCurrent] = useState(0);
+  const [paused, setPaused] = useState(false);
+
+  useEffect(() => {
+    if (paused) return;
+
+    const timer = setInterval(() => {
+      setCurrent((prev) => (prev + 1) % slides.length);
+    }, 4500);
+
+    return () => clearInterval(timer);
+  }, [paused]);
+
+  return (
+    <div
+      className="max-w-6xl mx-auto"
+      onMouseEnter={() => setPaused(true)}
+      onMouseLeave={() => setPaused(false)}
+      onFocus={() => setPaused(true)}
+      onBlur={() => setPaused(false)}
+      tabIndex={0}
+      aria-roledescription="carousel"
+      aria-label="Platform highlights"
+      onKeyDown={(e) => {
+        if (e.key === "ArrowRight") {
+          setCurrent((prev) => (prev + 1) % slides.length);
+        }
+
+        if (e.key === "ArrowLeft") {
+          setCurrent(
+            (prev) => (prev - 1 + slides.length) % slides.length
+          );
+        }
+      }}
+    >
+      <div className="relative bg-black text-white  p-10 md:p-14 overflow-hidden min-h-[320px]">
+
+        <div
+          aria-hidden="true"
+          className="absolute top-4 right-6 text-[90px] md:text-[140px] font-black text-zinc-800 select-none"
+        >
+          {slides[current].stat}
+        </div>
+
+        <div
+          className="relative z-10 max-w-2xl"
+          aria-live="polite"
+          aria-atomic="true"
+        >
+          <p className="uppercase tracking-[0.25em] text-xs text-zinc-400 mb-4">
+            Platform Highlight
+          </p>
+
+          <h3 className="text-4xl md:text-5xl font-black mb-6">
+            {slides[current].title}
+          </h3>
+
+          <p className="text-zinc-300 text-lg leading-8">
+            {slides[current].description}
+          </p>
+        </div>
+      </div>
+
+      <div className="flex justify-center gap-3 mt-8">
+        {slides.map((slide, index) => (
+          <button
+            key={index}
+            onClick={() => setCurrent(index)}
+            aria-label={`Go to slide ${index + 1}: ${slide.title}`}
+            aria-current={
+              current === index ? "true" : undefined
+            }
+            className={`transition-all duration-300 rounded-full ${
+              current === index
+                ? "w-10 h-3 bg-black"
+                : "w-3 h-3 bg-zinc-300"
+            }`}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/shared/Navbar.jsx b/frontend/src/components/shared/Navbar.jsx
index 9ee9622..7237a20 100644
--- a/frontend/src/components/shared/Navbar.jsx
+++ b/frontend/src/components/shared/Navbar.jsx
@@ -402,6 +402,10 @@ export default function Navbar() {
           <Link to="/faq" className={navLinkCls("/faq")}>
             FAQ
           </Link>
+          
+          <Link to="/about" className={navLinkCls("/about")}>
+            About
+          </Link>
 
           {isAuthenticated && (
             <Link to="/codeforces" className={navLinkCls("/codeforces")}>
@@ -591,6 +595,9 @@ export default function Navbar() {
             <Link to="/faq" onClick={closeMenu} className={mobileLinkCls}>
               FAQ <span className="text-zinc-300 text-sm">→</span>
             </Link>
+            <Link to="/about" onClick={closeMenu} className={mobileLinkCls}>
+              About <span className="text-zinc-300 text-sm">→</span>
+            </Link>
             <Link to="/contact" onClick={closeMenu} className={mobileLinkCls}>
               Contact Us <span className="text-zinc-300 text-sm">→</span>
             </Link>
diff --git a/frontend/src/pages/AboutCodeLensPage.jsx b/frontend/src/pages/AboutCodeLensPage.jsx
new file mode 100644
index 0000000..98d8fca
--- /dev/null
+++ b/frontend/src/pages/AboutCodeLensPage.jsx
@@ -0,0 +1,378 @@
+import AboutCarousel from "../components/about/AboutCarousel";
+import { Link } from "react-router-dom";
+
+const problems = [
+    {
+      title: "Learning Inconsistency",
+      desc: "Learners often struggle to maintain a consistent learning routine.",
+    },
+    {
+      title: "Lack of Structured Growth",
+      desc: "Without clear roadmaps, progress becomes difficult to measure.",
+    },
+    {
+      title: "Progress Tracking",
+      desc: "Tracking growth across multiple platforms is challenging.",
+    },
+    {
+      title: "Fragmented Resources",
+      desc: "Learning materials are scattered across countless websites.",
+    },
+  ];
+
+  const values = [
+    "Consistency",
+    "Growth",
+    "Simplicity",
+    "Accessibility",
+    "Community",
+  ];
+
+  
+  const features = [
+  {
+    title: "Learning Analytics",
+    desc: "Track your learning journey, monitor progress, and gain meaningful insights into your growth. CodeLens helps learners understand their strengths and identify areas that need improvement.",
+  },
+  {
+    title: "Structured Roadmaps",
+    desc: "Follow clear learning pathways designed to help you build skills step by step. Structured guidance makes it easier to stay focused and achieve long-term goals.",
+  },
+  {
+    title: "GitHub Intelligence",
+    desc: "Analyze repositories, contribution activity, and development patterns. GitHub Intelligence helps users better understand their coding habits and project growth.",
+  },
+  {
+    title: "Competitive Programming",
+    desc: "Track coding progress, participate in contests, and strengthen problem-solving skills through structured practice. CodeLens helps learners stay consistent while monitoring their competitive programming journey.",
+  },
+  {
+    title: "AI Assistance",
+    desc: "Leverage intelligent tools that provide guidance, learning support, and productivity enhancements throughout your journey. APEX AI is designed to help learners overcome obstacles and accelerate skill development.",
+  },
+  {
+    title: "Community Driven",
+    desc: "CodeLens evolves through collaboration, feedback, and contributions from learners and developers worldwide. By fostering an active community, the platform continuously improves and grows alongside its users.",
+  },
+];
+export default function AboutCodeLensPage() {
+  return (
+    <div className="w-full overflow-hidden">
+
+      {/* HERO */}
+      <section className="bg-black text-white py-20 px-6">
+        <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center">
+
+          <div>
+            <p className="uppercase tracking-[0.4em] text-zinc-400 text-sm mb-4">
+              About CodeLens
+            </p>
+
+            <h1 className="text-6xl md:text-7xl lg:text-7xl font-black leading-tight mb-8">
+              Empowering
+              <br />
+              Consistent Learning
+              <br />
+              & Growth
+            </h1>
+
+            <p className="text-zinc-300 text-lg leading-8 max-w-xl">
+              CodeLens helps learners stay consistent, track progress,
+              build meaningful skills, and discover opportunities through
+              a structured ecosystem designed for long-term growth.
+            </p>
+          </div>
+
+          <div className="bg-zinc-900 rounded-none p-10 border border-zinc-800 shadow-2xl">
+            <div className="font-mono text-sm space-y-4">
+              <p>{">"} Learn consistently</p>
+              <p>{">"} Build real skills</p>
+              <p>{">"} Measure growth</p>
+              <p>{">"} Discover opportunities</p>
+              <p>{">"} Join a thriving community</p>
+            </div>
+          </div>
+
+        </div>
+      </section>
+
+      {/* STATS */}
+      <section className="py-16 px-6 border-b border-zinc-200">
+        <div className="max-w-6xl mx-auto grid md:grid-cols-4 gap-8 text-center">
+
+          <div>
+            <h3 className="text-4xl font-black">All-in-One</h3>
+            <p className="text-zinc-500 mt-2">Learning Platform</p>
+          </div>
+
+          <div>
+            <h3 className="text-4xl font-black">Growth</h3>
+            <p className="text-zinc-500 mt-2">Focused Ecosystem</p>
+          </div>
+
+          <div>
+            <h3 className="text-4xl font-black">Community</h3>
+            <p className="text-zinc-500 mt-2">Driven Development</p>
+          </div>
+
+          <div>
+            <h3 className="text-4xl font-black">Future</h3>
+            <p className="text-zinc-500 mt-2">Ready Learning</p>
+          </div>
+
+        </div>
+      </section>
+
+      {/* STORY */}
+      <section className="py-16 px-6">
+        <div className="max-w-6xl mx-auto">
+          <p className="uppercase tracking-[0.3em] text-xs text-zinc-500 mb-3">
+            01 /
+          </p>
+          <h2 className="text-6xl font-black mb-14">
+            Our Story
+          </h2>
+
+          <div className="grid lg:grid-cols-2 gap-10">
+
+            <div className="bg-zinc-50 rounded-none p-10 border">
+              <span className="text-6xl font-black text-zinc-300">
+                01
+              </span>
+
+              <h3 className="text-2xl font-bold mt-6 mb-4">
+                The Challenge
+              </h3>
+
+              <p className="text-zinc-600 leading-8">
+                Learning often feels fragmented. Resources are scattered,
+                progress is difficult to track, and consistency becomes
+                challenging.
+              </p>
+            </div>
+
+            <div className="bg-black text-white rounded-none p-10">
+              <span className="text-6xl font-black text-zinc-700">
+                02
+              </span>
+
+              <h3 className="text-2xl font-bold mt-6 mb-4">
+                The Solution
+              </h3>
+
+              <p className="text-zinc-300 leading-8">
+                CodeLens brings learning, practice, analytics, and
+                opportunities into one unified experience.
+              </p>
+            </div>
+
+          </div>
+
+        </div>
+      </section>
+
+      {/* PROBLEMS */}
+      <section className="bg-zinc-50 py-16 px-6">
+        <div className="max-w-7xl mx-auto">
+          <p className="uppercase tracking-[0.3em] text-xs text-zinc-500 text-center mb-3">
+            02 /
+          </p>
+          <h2 className="text-6xl font-black text-center mb-16">
+            Problems We Solve
+          </h2>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+
+            {problems.map((item) => (
+              <div
+                key={item.title}
+                className="bg-white rounded-none border p-8 hover:shadow-xl transition"
+              >
+                <h3 className="font-bold text-xl mb-4">
+                  {item.title}
+                </h3>
+
+                <p className="text-zinc-600">
+                  {item.desc}
+                </p>
+              </div>
+            ))}
+
+          </div>
+        </div>
+      </section>
+
+      {/* MISSION VISION */}
+      <section className="py-16 px-6">
+  <div className="max-w-7xl mx-auto">
+
+    <p className="uppercase tracking-[0.3em] text-xs text-zinc-500 mb-3">
+      03 /
+    </p>
+
+    <div className="grid lg:grid-cols-2 gap-10">
+
+      <div className="border rounded-none p-10">
+        <h2 className="text-6xl font-black mb-6">
+          Our Mission
+        </h2>
+
+        <p className="text-zinc-600 leading-8">
+          To create an accessible, structured, and engaging learning
+          environment that enables learners to achieve consistent growth.
+        </p>
+      </div>
+
+      <div className="bg-black text-white rounded-none p-10">
+        <h2 className="text-6xl font-black mb-6">
+          Our Vision
+        </h2>
+
+        <p className="text-zinc-300 leading-8">
+          To build a global ecosystem where every learner can track
+          progress, unlock opportunities, and achieve their potential.
+        </p>
+      </div>
+
+    </div>
+
+  </div>
+</section>
+
+      {/* FEATURES */}
+      <section className="bg-zinc-50 py-16 px-6">
+        <div className="max-w-7xl mx-auto">
+          <p className="uppercase tracking-[0.3em] text-xs text-zinc-500 text-center mb-3">
+            04 /
+          </p>
+
+          <h2 className="text-6xl font-black text-center mb-16">
+            Platform Highlights
+          </h2>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+
+            {features.map((feature) => (
+              <div
+                key={feature.title}
+                className="bg-white border rounded-none p-8 hover:-translate-y-1 transition"
+              >
+                <div className="h-1 w-16 bg-black mb-6"></div>
+
+                <h3 className="text-xl font-bold mb-4">
+                  {feature.title}
+                </h3>
+
+                <p className="text-zinc-600">
+                  {feature.desc}
+                </p>
+              </div>
+            ))}
+
+          </div>
+
+        </div>
+      </section>
+
+      {/* CAROUSEL */}
+      <section className="py-16 px-6">
+        <div className="max-w-6xl mx-auto">
+          <p className="uppercase tracking-[0.3em] text-xs text-zinc-500 text-center mb-3">
+            05 /
+          </p>
+          <h2 className="text-6xl font-black text-center mb-12">
+            Explore CodeLens
+          </h2>
+
+          <AboutCarousel />
+
+        </div>
+      </section>
+
+      {/* VALUES */}
+      <section className="bg-zinc-50 py-16 px-6">
+        <div className="max-w-7xl mx-auto">
+          <p className="uppercase tracking-[0.3em] text-xs text-zinc-500 text-center mb-3">
+            06 /
+          </p>
+          <h2 className="text-6xl font-black text-center mb-16">
+            Core Values
+          </h2>
+
+          <div className="grid md:grid-cols-3 lg:grid-cols-5 gap-6">
+
+            {values.map((value) => (
+              <div
+                key={value}
+                className="bg-white border rounded-none p-8 text-center font-bold hover:bg-black hover:text-white transition"
+              >
+                {value}
+              </div>
+            ))}
+
+          </div>
+
+        </div>
+      </section>
+
+      {/* COMMUNITY */}
+      <section className="bg-black text-white py-20 px-6">
+
+        <div className="max-w-6xl mx-auto text-center">
+          <p className="uppercase tracking-[0.3em] text-xs text-zinc-500 mb-3">
+            07 /
+          </p>
+          <h2 className="text-6xl font-black mb-8">
+            Community Driven Development
+          </h2>
+
+          <p className="text-zinc-300 text-lg leading-8 max-w-3xl mx-auto mb-16">
+            CodeLens evolves through feedback, collaboration, and
+            contributions from learners and developers around the world.
+          </p>
+
+          <div className="grid md:grid-cols-3 gap-6">
+
+            <div className="border border-zinc-700 rounded-none p-8">
+              Open Source
+            </div>
+
+            <div className="border border-zinc-700 rounded-none p-8">
+              Collaboration
+            </div>
+
+            <div className="border border-zinc-700 rounded-none p-8">
+              Innovation
+            </div>
+
+          </div>
+
+        </div>
+
+      </section>
+
+      {/* CTA */}
+      <section className="py-20 px-6 text-center">
+        <p className="uppercase tracking-[0.3em] text-xs text-zinc-500 mb-3">
+          08 /
+        </p>
+        <h2 className="text-6xl font-black mb-6">
+          Start Your Learning Journey
+        </h2>
+
+        <p className="text-zinc-600 text-lg mb-10">
+          Explore CodeLens and unlock consistent growth.
+        </p>
+
+        <Link
+          to="/explore"
+          className="inline-block px-10 py-4 bg-black text-white rounded-none font-semibold hover:opacity-90"
+        >
+          Explore Platform
+        </Link>
+
+      </section>
+
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..4eb3ea5
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "CodeLens",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}