diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
index 6f36daef..fc0fd89c 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar.jsx
@@ -17,6 +17,7 @@ import {
   Timer,
   Sparkles,
   ArrowRight,
+  Info,
 } from "lucide-react";
 import { AuthContext } from "../context/AuthContext";
 import { ThemeContext } from "../context/ThemeContext";
@@ -256,6 +257,7 @@ const Navbar = () => {
     { name: "Tasks", path: "/tasks", icon: CheckSquare },
     { name: "Routine Builder", path: "/routine-builder", icon: Calendar },
     { name: "Analytics", path: "/analytics", icon: TrendingUp },
+    { name: "About", path: "/about", icon: Info },
     { name: "Profile", path: "/profile", icon: User },
   ];
 
@@ -381,6 +383,13 @@ const Navbar = () => {
 
               {!user ? (
                 <>
+                  <Link
+                    to="/about"
+                    className="group relative inline-flex items-center gap-2 overflow-hidden rounded-full border border-slate-900/8 bg-white/42 px-4 py-2.5 text-sm font-bold text-slate-700 shadow-[0_1px_0_rgba(255,255,255,0.8)_inset] transition-all duration-300 hover:-translate-y-0.5 hover:bg-white/80 hover:text-slate-950 hover:shadow-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-[#4eb7b3]/45 dark:border-white/10 dark:bg-white/[0.05] dark:text-slate-200 dark:hover:bg-white/[0.10] dark:hover:text-white"
+                  >
+                    <Info size={16} />
+                    About
+                  </Link>
                   <Link
                     to="/login"
                     className="group relative overflow-hidden rounded-full border border-slate-900/8 bg-white/42 px-4 py-2.5 text-sm font-bold text-slate-700 shadow-[0_1px_0_rgba(255,255,255,0.8)_inset] transition-all duration-300 hover:-translate-y-0.5 hover:bg-white/80 hover:text-slate-950 hover:shadow-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-[#4eb7b3]/45 dark:border-white/10 dark:bg-white/[0.05] dark:text-slate-200 dark:hover:bg-white/[0.10] dark:hover:text-white"
@@ -501,6 +510,14 @@ const Navbar = () => {
                 >
                   {!user ? (
                     <>
+                      <Link
+                        to="/about"
+                        onClick={() => setIsOpen(false)}
+                        className="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-2xl text-slate-700 dark:text-slate-200 font-bold hover:bg-white/70 dark:hover:bg-white/[0.08] dark:hover:text-white transition-colors"
+                      >
+                        <Info size={18} />
+                        About
+                      </Link>
                       <Link
                         to="/login"
                         onClick={() => setIsOpen(false)}
diff --git a/frontend/src/pages/About.jsx b/frontend/src/pages/About.jsx
index 4cfa9ccb..e0843c81 100644
--- a/frontend/src/pages/About.jsx
+++ b/frontend/src/pages/About.jsx
@@ -1,28 +1,99 @@
+import { Link } from "react-router-dom";
+import {
+  BarChart3,
+  CalendarCheck,
+  CheckCircle2,
+  Compass,
+  Layers3,
+  ListChecks,
+  Target,
+  Timer,
+} from "lucide-react";
+
+const features = [
+  {
+    title: "Task planning",
+    description:
+      "Create focused tasks with priorities, deadlines, and clear next steps for the day.",
+    icon: ListChecks,
+  },
+  {
+    title: "Routine building",
+    description:
+      "Design weekly routines that turn repeat work, habits, and goals into a visible plan.",
+    icon: CalendarCheck,
+  },
+  {
+    title: "Focus support",
+    description:
+      "Use dedicated focus tools to protect deep work time and reduce context switching.",
+    icon: Timer,
+  },
+  {
+    title: "Progress insights",
+    description:
+      "Review analytics, consistency, and completion patterns to understand what is working.",
+    icon: BarChart3,
+  },
+];
+
+const benefits = [
+  "Replace scattered notes with one organized productivity workspace.",
+  "Reduce daily planning friction by keeping tasks, routines, and progress together.",
+  "Build consistency through repeatable systems instead of relying on motivation alone.",
+  "Make better decisions with visible priorities, schedules, and productivity trends.",
+];
+
+const goals = [
+  "Help users plan days that feel realistic and intentional.",
+  "Make routine building approachable for students, creators, and professionals.",
+  "Keep productivity data useful, simple, and easy to act on.",
+];
+
 export default function About() {
   return (
-    <div className="min-h-screen w-full max-w-[1440px] mx-auto px-6 py-10 space-y-12">
+    <div className="w-full">
+      <section className="mx-auto flex w-full max-w-6xl flex-col items-center px-4 pb-12 pt-4 text-center sm:px-6 lg:px-8">
+        <div className="inline-flex items-center gap-2 rounded-full border border-[var(--border)] bg-white/60 px-4 py-2 text-sm font-semibold text-main shadow-sm dark:bg-white/[0.04]">
+          <Compass size={16} aria-hidden="true" />
+          Built for intentional daily momentum
+        </div>
 
-      {/* Heading */}
-      <div className="text-center max-w-3xl mx-auto">
-        <h1 className="text-4xl md:text-5xl font-bold text-main">
+        <h1 className="mt-7 max-w-4xl text-4xl font-black leading-tight text-main sm:text-5xl lg:text-6xl">
           About <span className="text-primary">DailyForge</span>
         </h1>
-        <p className="mt-4 text-muted text-lg">
-          A simple and focused planner that helps you organize your day, build routines and stay consistent without overthinking.
+        <p className="mt-5 max-w-3xl text-base leading-7 text-muted sm:text-lg">
+          DailyForge is a productivity platform for planning tasks, shaping
+          routines, tracking progress, and turning scattered intentions into a
+          practical rhythm for each day.
         </p>
-      </div>
 
-      {/* What is DailyForge? */}
-      <section className="max-w-5xl mx-auto card p-6">
-        <h2 className="text-xl font-semibold text-main mb-2">
-          What is DailyForge?
-        </h2>
-        <p className="text-muted leading-relaxed">
-          DailyForge is a productivity tool designed to help you plan your tasks in a clear and structured way.
-          Instead of juggling messy to-do lists, you can organize everything visually and manage your time better.
-        </p>
+        <div className="mt-8 flex flex-col gap-3 sm:flex-row">
+          <Link to="/signup" className="btn btn-primary px-6 py-3">
+            Start planning
+          </Link>
+          <Link
+            to="/login"
+            className="btn border border-[var(--border)] bg-white/70 px-6 py-3 text-main hover:bg-white dark:bg-white/[0.04] dark:hover:bg-white/[0.08]"
+          >
+            View dashboard
+          </Link>
+        </div>
       </section>
 
+      <section className="mx-auto grid w-full max-w-6xl gap-6 px-4 pb-12 sm:px-6 lg:grid-cols-[1.1fr_0.9fr] lg:px-8">
+        <div className="card">
+          <div className="mb-5 flex h-12 w-12 items-center justify-center rounded-xl bg-primary/15 text-primary">
+            <Target size={24} aria-hidden="true" />
+          </div>
+          <h2 className="text-2xl font-bold text-main">What DailyForge is</h2>
+          <p className="mt-4 leading-7 text-muted">
+            DailyForge brings task management, routine planning, focus time, and
+            productivity analytics into one calm workspace. It is designed for
+            people who want a simple way to decide what matters, schedule it,
+            and follow through with less mental clutter.
+          </p>
+        </div>
       {/* Features */}
 <section className="max-w-6xl mx-auto">
   <h2 className="text-2xl font-bold text-main text-center mb-10">
@@ -56,19 +127,130 @@ export default function About() {
       </div>
     ))}
 
-  </div>
-</section>
+        <div className="card">
+          <div className="mb-5 flex h-12 w-12 items-center justify-center rounded-xl bg-primary/15 text-primary">
+            <Layers3 size={24} aria-hidden="true" />
+          </div>
+          <h2 className="text-2xl font-bold text-main">Mission and purpose</h2>
+          <p className="mt-4 leading-7 text-muted">
+            The mission is to help users build sustainable systems for their
+            work and personal goals. DailyForge focuses on clarity,
+            consistency, and reflection so planning becomes a habit instead of
+            another source of pressure.
+          </p>
+        </div>
+      </section>
+
+      <section className="mx-auto w-full max-w-6xl px-4 pb-12 sm:px-6 lg:px-8">
+        <div className="mb-8 max-w-3xl">
+          <h2 className="text-3xl font-black text-main">Key platform features</h2>
+          <p className="mt-3 leading-7 text-muted">
+            DailyForge combines the core pieces users need to plan, execute,
+            and learn from their routines.
+          </p>
+        </div>
 
-      {/* Why it matters */}
-      <section className="text-center max-w-3xl mx-auto">
-        <p className="text-muted">
-          Productivity isn't about doing more — it's about doing what matters, consistently.
-        </p>
-        <h3 className="mt-2 text-xl font-semibold text-primary">
-          DailyForge helps you stay focused, not overwhelmed.
-        </h3>
+        <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
+          {features.map((feature) => {
+            const FeatureIcon = feature.icon;
+
+            return (
+              <article key={feature.title} className="card h-full">
+                <div className="mb-5 flex h-11 w-11 items-center justify-center rounded-xl bg-primary/15 text-primary">
+                  <FeatureIcon size={22} aria-hidden="true" />
+                </div>
+                <h3 className="text-lg font-bold text-main">{feature.title}</h3>
+                <p className="mt-3 text-sm leading-6 text-muted">
+                  {feature.description}
+                </p>
+              </article>
+            );
+          })}
+        </div>
       </section>
 
+      <section className="mx-auto grid w-full max-w-6xl gap-6 px-4 pb-12 sm:px-6 lg:grid-cols-2 lg:px-8">
+        <div className="card">
+          <h2 className="text-2xl font-bold text-main">Problems it solves</h2>
+          <p className="mt-4 leading-7 text-muted">
+            DailyForge is built for the everyday friction of productivity:
+            unclear priorities, fragmented planning tools, forgotten routines,
+            and progress that is hard to measure.
+          </p>
+        </div>
+
+        <div className="card">
+          <h2 className="text-2xl font-bold text-main">Benefits for users</h2>
+          <ul className="mt-5 space-y-4">
+            {benefits.map((benefit) => (
+              <li key={benefit} className="flex gap-3 text-muted">
+                <CheckCircle2
+                  size={20}
+                  className="mt-0.5 shrink-0 text-primary"
+                  aria-hidden="true"
+                />
+                <span className="leading-6">{benefit}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </section>
+
+      <section className="mx-auto w-full max-w-6xl px-4 pb-12 sm:px-6 lg:px-8">
+        <div className="grid gap-6 lg:grid-cols-[0.9fr_1.1fr]">
+          <div className="card">
+            <h2 className="text-2xl font-bold text-main">Mission and vision</h2>
+            <p className="mt-4 leading-7 text-muted">
+              The long-term vision for DailyForge is a friendly productivity
+              companion that helps people plan with confidence, protect time for
+              meaningful work, and improve through steady feedback.
+            </p>
+          </div>
+
+          <div className="card">
+            <h2 className="text-2xl font-bold text-main">Platform goals</h2>
+            <ul className="mt-5 grid gap-4 sm:grid-cols-3">
+              {goals.map((goal) => (
+                <li
+                  key={goal}
+                  className="rounded-lg border border-[var(--border)] bg-primary/10 p-4 text-sm leading-6 text-main"
+                >
+                  {goal}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </section>
+
+      <section className="mx-auto w-full max-w-6xl px-4 pb-16 sm:px-6 lg:px-8">
+        <div className="grid gap-6 lg:grid-cols-[1fr_0.85fr]">
+          <div className="card">
+            <h2 className="text-2xl font-bold text-main">Technology overview</h2>
+            <p className="mt-4 leading-7 text-muted">
+              DailyForge uses a modern web stack with React on the frontend and
+              a Node.js backend. The platform is organized around responsive UI,
+              authenticated user workflows, task and routine data, and analytics
+              that help users understand their productivity patterns.
+            </p>
+          </div>
+
+          <div className="card flex flex-col justify-between bg-primary/10">
+            <div>
+              <h2 className="text-2xl font-bold text-main">
+                Ready to forge a clearer day?
+              </h2>
+              <p className="mt-4 leading-7 text-muted">
+                Start with a few priorities, build a routine around them, and
+                let DailyForge help you keep momentum visible.
+              </p>
+            </div>
+            <Link to="/signup" className="btn btn-primary mt-6 w-full py-3 sm:w-fit">
+              Create your account
+            </Link>
+          </div>
+        </div>
+      </section>
     </div>
   );
-}
\ No newline at end of file
+}