diff --git a/src/pages/About.tsx b/src/pages/About.tsx
new file mode 100644
index 0000000..f3b44b5
--- /dev/null
+++ b/src/pages/About.tsx
@@ -0,0 +1,148 @@
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { ArrowRight, Star, Award, Leaf, Heart } from "lucide-react";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+
+const milestones = [
+  { year: "1987", title: "The Beginning", desc: "Chef Bellini opens Aurum with just 20 seats in Mayfair." },
+  { year: "1995", title: "First Michelin Star", desc: "Aurum earns its first Michelin star, cementing its place among London’s finest." },
+  { year: "2008", title: "Second Star & Expansion", desc: "A second star and a major renovation doubles capacity with private dining rooms." },
+  { year: "2024", title: "World’s 50 Best", desc: "Named #32 on the World’s 50 Best Restaurants list for the third time." },
+];
+
+const values = [
+  { icon: Leaf, title: "Ingredients", desc: "We source the finest seasonal ingredients from trusted local farms and sustainable producers worldwide." },
+  { icon: Star, title: "Technique", desc: "Classical training meets modern innovation. Every dish reflects decades of accumulated mastery and creativity." },
+  { icon: Heart, title: "Hospitality", desc: "Every guest is family. Our service team ensures each visit is warm, personal, and truly memorable." },
+];
+
+const awards = [
+  { name: "2 Michelin Stars", year: "2008–Present" },
+  { name: "World’s 50 Best Restaurants", year: "2022, 2023, 2024" },
+  { name: "Best Fine Dining London", year: "2024" },
+  { name: "Sustainability Award", year: "2023" },
+];
+
+export default function AboutPage() {
+  return (
+    <div className="min-h-screen bg-background text-foreground antialiased">
+      <Header />
+
+      <section className="relative pt-32 pb-16 bg-gradient-to-b from-stone-950 to-background">
+        <div className="relative z-10 mx-auto max-w-4xl px-6 text-center">
+          <div className="flex items-center justify-center gap-3 mb-4 text-amber-600/60 text-sm tracking-[0.3em]">
+            <span>—</span><Star className="h-4 w-4" /><span>—</span>
+          </div>
+          <h1 className="text-4xl sm:text-5xl font-serif tracking-wide text-white animate-fade-up">Our Story</h1>
+        </div>
+      </section>
+
+      {/* ── STORY ── */}
+      <section className="py-24">
+        <div className="mx-auto max-w-7xl px-6 grid lg:grid-cols-2 gap-16 items-center">
+          <div>
+            <h2 className="text-3xl font-serif tracking-wide mb-6 animate-fade-up">A Legacy of Excellence</h2>
+            <p className="text-muted-foreground leading-relaxed mb-4">For over three decades, Aurum has been a sanctuary for those who appreciate the art of fine dining. Founded by Chef Marcus Bellini in 1987, our kitchen has always been guided by one philosophy: let exceptional ingredients speak for themselves.</p>
+            <p className="text-muted-foreground leading-relaxed">Every morning, our team sources the freshest produce from local farms, the finest seafood from sustainable fisheries, and rare ingredients from trusted purveyors around the world.</p>
+          </div>
+          <div className="relative">
+            <div className="aspect-[4/5] rounded-sm bg-gradient-to-br from-amber-800/30 via-stone-700/30 to-amber-900/30 relative overflow-hidden">
+              <div className="absolute inset-0 opacity-[0.04]" style={{ backgroundImage: "radial-gradient(circle, currentColor 1px, transparent 1px)", backgroundSize: "16px 16px" }} />
+              <div className="absolute -top-10 -left-10 w-40 h-40 rounded-full bg-amber-500/15 blur-3xl" />
+              <div className="absolute -bottom-10 -right-10 w-36 h-36 rounded-full bg-amber-700/20 blur-2xl" />
+            </div>
+            <div className="absolute inset-0 translate-x-4 translate-y-4 -z-10 border-2 border-amber-700/30 rounded-sm" />
+          </div>
+        </div>
+      </section>
+
+      {/* ── CHEF ── */}
+      <section className="py-24 bg-stone-50 dark:bg-stone-950">
+        <div className="mx-auto max-w-7xl px-6 grid lg:grid-cols-2 gap-16 items-center">
+          <div className="order-2 lg:order-1">
+            <div className="aspect-[3/4] rounded-sm bg-gradient-to-br from-stone-700/30 to-amber-800/30 relative overflow-hidden">
+              <div className="absolute inset-0 opacity-[0.04]" style={{ backgroundImage: "radial-gradient(circle, currentColor 1px, transparent 1px)", backgroundSize: "16px 16px" }} />
+              <div className="absolute -top-8 -right-8 w-32 h-32 rounded-full bg-amber-600/15 blur-2xl" />
+              <div className="absolute -bottom-8 -left-8 w-28 h-28 rounded-full bg-amber-500/20 blur-2xl" />
+            </div>
+          </div>
+          <div className="order-1 lg:order-2">
+            <Badge variant="secondary" className="mb-4 text-xs bg-amber-900/20 text-amber-700 dark:text-amber-400 border-0">Executive Chef</Badge>
+            <h2 className="text-3xl font-serif tracking-wide mb-2">Chef Marcus Bellini</h2>
+            <p className="text-muted-foreground leading-relaxed mb-4">Born in Turin and trained in the kitchens of Paris, Chef Bellini brings over 40 years of culinary mastery to every dish. His style blends classic French technique with Italian soul.</p>
+            <p className="text-muted-foreground leading-relaxed">Under his leadership, Aurum has earned two Michelin stars and been named among the World’s 50 Best Restaurants three times.</p>
+            <blockquote className="text-lg font-serif italic text-muted-foreground border-l-2 border-amber-700/30 pl-4 my-6">"The finest ingredients deserve the simplest preparation. Let quality speak for itself."</blockquote>
+          </div>
+        </div>
+      </section>
+
+      {/* ── TIMELINE ── */}
+      <section className="py-24">
+        <div className="mx-auto max-w-4xl px-6">
+          <h2 className="text-3xl font-serif tracking-wide text-center mb-16 animate-fade-up">Our Journey</h2>
+          <div className="space-y-0 stagger">
+            {milestones.map((m, i) => (
+              <div key={i} className="relative pl-8 pb-12 last:pb-0 border-l-2 border-amber-700/30">
+                <div className="absolute -left-[9px] top-0 w-4 h-4 rounded-full bg-amber-700 border-4 border-background ring-4 ring-amber-700/20" />
+                <Badge variant="secondary" className="mb-2 text-xs bg-amber-900/20 text-amber-700 dark:text-amber-400 border-0">{m.year}</Badge>
+                <h3 className="font-serif font-medium text-lg mb-1">{m.title}</h3>
+                <p className="text-sm text-muted-foreground">{m.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── PHILOSOPHY ── */}
+      <section className="py-24 bg-stone-50 dark:bg-stone-950">
+        <div className="mx-auto max-w-6xl px-6">
+          <h2 className="text-3xl font-serif tracking-wide text-center mb-16 animate-fade-up">Our Philosophy</h2>
+          <div className="grid md:grid-cols-3 gap-8 stagger">
+            {values.map((v, i) => (
+              <div key={i} className="text-center backdrop-blur-sm bg-stone-900/80 border border-stone-700/50 rounded-sm p-6">
+                <div className="mx-auto w-14 h-14 rounded-full bg-amber-700/10 flex items-center justify-center mb-4">
+                  <v.icon className="h-6 w-6 text-amber-700 dark:text-amber-400" />
+                </div>
+                <h3 className="font-serif font-medium text-lg mb-2">{v.title}</h3>
+                <p className="text-sm text-muted-foreground leading-relaxed">{v.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── AWARDS ── */}
+      <section className="py-24">
+        <div className="mx-auto max-w-4xl px-6">
+          <h2 className="text-3xl font-serif tracking-wide text-center mb-12 flex items-center justify-center gap-3 animate-fade-up">
+            <Award className="h-7 w-7 text-amber-600" /> Awards & Recognition
+          </h2>
+          <div className="grid sm:grid-cols-2 gap-4 stagger">
+            {awards.map((a, i) => (
+              <div key={i} className="flex items-center justify-between py-4 px-6 border border-stone-200 dark:border-stone-800 rounded-sm">
+                <span className="font-serif">{a.name}</span>
+                <Badge variant="secondary" className="text-xs bg-amber-900/20 text-amber-700 dark:text-amber-400 border-0">{a.year}</Badge>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── CTA ── */}
+      <section className="py-24 bg-gradient-to-b from-stone-950 to-amber-950/30">
+        <div className="mx-auto max-w-3xl px-6 text-center">
+          <h2 className="text-3xl font-serif tracking-wide text-white mb-4">Experience Aurum</h2>
+          <p className="text-stone-400 mb-8">We look forward to welcoming you</p>
+          <Button asChild size="lg" className="rounded-none px-10 text-sm tracking-widest uppercase bg-amber-700 hover:bg-amber-600 text-white active:scale-[0.98]">
+            <Link to="/reservations">Book a Table <ArrowRight className="ml-2 h-4 w-4" /></Link>
+          </Button>
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+}
\ No newline at end of file