diff --git a/src/pages/Doctors.tsx b/src/pages/Doctors.tsx
new file mode 100644
index 0000000..24b5e2d
--- /dev/null
+++ b/src/pages/Doctors.tsx
@@ -0,0 +1,76 @@
+import { useState } from "react";
+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 { Star, Globe } from "lucide-react";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+
+const filters = ["All", "Cardiology", "Neurology", "Orthopedics", "Pediatrics"];
+
+const doctors = [
+  { id: "chen", name: "Dr. Sarah Chen", specialty: "Cardiology", credentials: "MD, FACC", exp: "15+ years experience", langs: "English, Mandarin", gradient: "from-sky-400 to-teal-400", filter: "Cardiology" },
+  { id: "okafor", name: "Dr. James Okafor", specialty: "Neurology", credentials: "MD, PhD, FAAN", exp: "20+ years experience", langs: "English, French", gradient: "from-teal-400 to-emerald-400", filter: "Neurology" },
+  { id: "rivera", name: "Dr. Emily Rivera", specialty: "Orthopedics", credentials: "MD, FAAOS", exp: "12+ years experience", langs: "English, Spanish", gradient: "from-indigo-400 to-sky-400", filter: "Orthopedics" },
+  { id: "patel", name: "Dr. Michael Patel", specialty: "Pediatrics", credentials: "MD, FAAP", exp: "18+ years experience", langs: "English, Hindi, Gujarati", gradient: "from-violet-400 to-indigo-400", filter: "Pediatrics" },
+  { id: "kimura", name: "Dr. Yuki Kimura", specialty: "Cardiology", credentials: "MD, FACC, FHRS", exp: "10+ years experience", langs: "English, Japanese", gradient: "from-rose-400 to-pink-400", filter: "Cardiology" },
+  { id: "thompson", name: "Dr. Robert Thompson", specialty: "Neurology", credentials: "MD, FAAN", exp: "22+ years experience", langs: "English", gradient: "from-amber-400 to-orange-400", filter: "Neurology" },
+];
+
+export default function DoctorsPage() {
+  const [active, setActive] = useState("All");
+  const filtered = active === "All" ? doctors : doctors.filter(d => d.filter === active);
+
+  return (
+    <div className="min-h-screen bg-background text-foreground antialiased">
+      <Header />
+
+      {/* ── HERO ── */}
+      <section className="pt-32 pb-16 bg-gradient-to-b from-sky-950 via-slate-900 to-background">
+        <div className="mx-auto max-w-4xl px-6 text-center animate-fade-up">
+          <Badge variant="secondary" className="mb-4 bg-sky-900/40 text-sky-300 border-sky-700/30 backdrop-blur">Our Team</Badge>
+          <h1 className="text-4xl sm:text-5xl font-bold text-white tracking-tight">Our Medical Team</h1>
+          <p className="mt-4 text-slate-300 max-w-2xl mx-auto">Board-certified specialists committed to providing exceptional, patient-centered care.</p>
+        </div>
+      </section>
+
+      {/* ── FILTERS & GRID ── */}
+      <section className="py-20">
+        <div className="mx-auto max-w-6xl px-6">
+          <div className="flex flex-wrap justify-center gap-3 mb-12 animate-fade-up">
+            {filters.map((f) => (
+              <Button key={f} variant={active === f ? "default" : "outline"} size="sm" className={`rounded-full px-6 transition-all \${active === f ? "bg-sky-500 hover:bg-sky-600 text-white" : "hover:border-sky-400 hover:text-sky-500"}`} onClick={() => setActive(f)}>
+                {f}
+              </Button>
+            ))}
+          </div>
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 stagger">
+            {filtered.map((d, i) => (
+              <Card key={d.id} className="group bg-white/60 dark:bg-slate-900/60 backdrop-blur-sm border-slate-200/60 dark:border-slate-800/60 hover:shadow-xl hover:-translate-y-1 transition-all duration-300 text-center">
+                <CardContent className="p-8">
+                  <div className={`mx-auto w-24 h-24 rounded-full bg-gradient-to-br \${d.gradient} flex items-center justify-center text-white text-2xl font-bold mb-5 group-hover:ring-4 group-hover:ring-sky-300/30 transition-all duration-300`}>
+                    {d.name.split(" ").filter(n => n.startsWith("D") || !n.startsWith("D")).slice(-2).map(n => n[0]).join("")}
+                  </div>
+                  <h3 className="text-lg font-semibold">{d.name}</h3>
+                  <Badge className="mt-2 bg-sky-100 text-sky-700 dark:bg-sky-900/40 dark:text-sky-300 border-0">{d.specialty}</Badge>
+                  <p className="text-xs text-muted-foreground mt-2 font-medium">{d.credentials}</p>
+                  <p className="text-xs text-muted-foreground mt-1">{d.exp}</p>
+                  <div className="flex items-center justify-center gap-1.5 mt-3 text-xs text-muted-foreground">
+                    <Globe className="h-3 w-3" />
+                    <span>{d.langs}</span>
+                  </div>
+                  <Button asChild size="sm" variant="outline" className="mt-5 rounded-full border-sky-300 text-sky-600 hover:bg-sky-50 dark:border-sky-700 dark:text-sky-400 dark:hover:bg-sky-950 active:scale-[0.97] transition-all">
+                    <Link to={`/doctor/\${d.id}`}>View Profile</Link>
+                  </Button>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+}
\ No newline at end of file