diff --git a/src/pages/Services.tsx b/src/pages/Services.tsx
new file mode 100644
index 0000000..026081c
--- /dev/null
+++ b/src/pages/Services.tsx
@@ -0,0 +1,70 @@
+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 {
+  Heart, Brain, Bone, Eye, Stethoscope, Baby, Activity, Pill, Check
+} from "lucide-react";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+
+const services = [
+  { icon: Heart, title: "Cardiology", desc: "Complete heart and cardiovascular care including diagnostics, interventional procedures, and ongoing management.", features: ["ECG & Echocardiography", "Cardiac Catheterization", "Heart Failure Management"], gradient: "from-rose-500/20 to-pink-500/20" },
+  { icon: Brain, title: "Neurology", desc: "Expert diagnosis and treatment of neurological conditions including stroke, epilepsy, and neurodegenerative diseases.", features: ["EEG & Brain Mapping", "Stroke Prevention", "Migraine Treatment"], gradient: "from-purple-500/20 to-indigo-500/20" },
+  { icon: Bone, title: "Orthopedics", desc: "Advanced musculoskeletal care from sports injuries to joint replacement with cutting-edge surgical techniques.", features: ["Joint Replacement Surgery", "Sports Medicine", "Physical Rehabilitation"], gradient: "from-amber-500/20 to-orange-500/20" },
+  { icon: Eye, title: "Ophthalmology", desc: "Comprehensive eye care from routine vision exams to complex surgical procedures using advanced laser technology.", features: ["LASIK & Refractive Surgery", "Cataract Treatment", "Glaucoma Management"], gradient: "from-sky-500/20 to-cyan-500/20" },
+  { icon: Stethoscope, title: "Primary Care", desc: "Your healthcare home for preventive care, chronic disease management, and general wellness needs.", features: ["Annual Wellness Exams", "Chronic Disease Management", "Vaccinations & Screenings"], gradient: "from-teal-500/20 to-emerald-500/20" },
+  { icon: Baby, title: "Pediatrics", desc: "Compassionate, specialized care for children from newborn through adolescence in a family-friendly setting.", features: ["Well-Child Visits", "Developmental Assessments", "Childhood Immunizations"], gradient: "from-pink-500/20 to-rose-500/20" },
+  { icon: Activity, title: "Diagnostic Imaging", desc: "State-of-the-art imaging services including MRI, CT, X-ray, and ultrasound with rapid results.", features: ["MRI & CT Scans", "Digital X-Ray", "Ultrasound Imaging"], gradient: "from-emerald-500/20 to-teal-500/20" },
+  { icon: Pill, title: "Pharmacy Services", desc: "On-site pharmacy with personalized medication management and convenient prescription services.", features: ["Medication Consultation", "Prescription Management", "Home Delivery Available"], gradient: "from-indigo-500/20 to-violet-500/20" },
+];
+
+export default function ServicesPage() {
+  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">Medical Services</Badge>
+          <h1 className="text-4xl sm:text-5xl font-bold text-white tracking-tight">Our Medical Services</h1>
+          <p className="mt-4 text-slate-300 max-w-2xl mx-auto">We provide comprehensive healthcare services using the latest medical technology and evidence-based practices.</p>
+        </div>
+      </section>
+
+      {/* ── SERVICES GRID ── */}
+      <section className="py-20">
+        <div className="mx-auto max-w-6xl px-6">
+          <div className="grid md:grid-cols-2 gap-6 stagger">
+            {services.map((s, i) => (
+              <Card key={i} className="group relative 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 overflow-hidden">
+                <div className="absolute top-4 right-4 text-5xl font-bold text-slate-100 dark:text-slate-800/50 select-none">{String(i + 1).padStart(2, "0")}</div>
+                <CardContent className="p-6 relative">
+                  <div className={`inline-flex p-3 rounded-xl bg-gradient-to-br \${s.gradient} mb-4`}>
+                    <s.icon className="h-6 w-6 text-slate-900 dark:text-white" />
+                  </div>
+                  <h3 className="text-xl font-semibold mb-2">{s.title}</h3>
+                  <p className="text-sm text-muted-foreground mb-4">{s.desc}</p>
+                  <div className="space-y-2 mb-6">
+                    {s.features.map((f, fi) => (
+                      <div key={fi} className="flex items-center gap-2 text-sm">
+                        <Check className="h-4 w-4 text-teal-500 flex-shrink-0" />
+                        <span>{f}</span>
+                      </div>
+                    ))}
+                  </div>
+                  <Button asChild size="sm" className="bg-sky-500 hover:bg-sky-600 text-white rounded-full active:scale-[0.97] transition-all">
+                    <Link to="/contact">Book Consultation</Link>
+                  </Button>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+}
\ No newline at end of file