diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx
new file mode 100644
index 0000000..dc16539
--- /dev/null
+++ b/src/pages/Contact.tsx
@@ -0,0 +1,113 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { MapPin, Phone, Mail, Clock, Send } from "lucide-react";
+import { toast } from "sonner";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+
+export default function Contact() {
+  const [form, setForm] = useState({ name: "", email: "", phone: "", message: "" });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!form.name || !form.email || !form.message) {
+      toast.error("Please fill in all required fields.");
+      return;
+    }
+    toast.success("Message sent! We will get back to you within 24 hours.");
+    setForm({ name: "", email: "", phone: "", message: "" });
+  };
+
+  return (
+    <div className="min-h-screen bg-slate-950 text-white">
+      <Header />
+
+      {/* ── Hero ── */}
+      <section className="pt-32 pb-16 bg-gradient-to-b from-slate-900 to-slate-950">
+        <div className="mx-auto max-w-7xl px-6 text-center">
+          <Badge className="mb-4 bg-orange-500/10 text-orange-400 border-orange-500/30 uppercase text-xs tracking-wider">Contact</Badge>
+          <h1 className="text-4xl md:text-5xl font-black uppercase text-white animate-fade-up">GET IN TOUCH</h1>
+          <p className="mt-4 text-slate-400 max-w-xl mx-auto">Drop by, call, or send us a message. We would love to hear from you.</p>
+        </div>
+      </section>
+
+      <section className="py-16">
+        <div className="mx-auto max-w-6xl px-6 grid lg:grid-cols-2 gap-12">
+          {/* ── Info + Map ── */}
+          <div className="space-y-8">
+            <Card className="bg-slate-900/80 backdrop-blur border border-slate-800">
+              <CardContent className="p-8 space-y-5">
+                <div className="flex items-start gap-4">
+                  <MapPin className="h-5 w-5 text-orange-400 mt-0.5 shrink-0" />
+                  <div><div className="font-semibold text-white">Address</div><div className="text-sm text-slate-400">750 Iron Avenue, Los Angeles, CA 90015</div></div>
+                </div>
+                <div className="flex items-start gap-4">
+                  <Phone className="h-5 w-5 text-orange-400 mt-0.5 shrink-0" />
+                  <div><div className="font-semibold text-white">Phone</div><div className="text-sm text-slate-400">(213) 555-0247</div></div>
+                </div>
+                <div className="flex items-start gap-4">
+                  <Mail className="h-5 w-5 text-orange-400 mt-0.5 shrink-0" />
+                  <div><div className="font-semibold text-white">Email</div><div className="text-sm text-slate-400">hello@apexfitness.com</div></div>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Map placeholder */}
+            <div className="w-full h-64 rounded-2xl bg-slate-900 border border-slate-800 flex items-center justify-center">
+              <div className="text-center text-slate-500">
+                <MapPin className="h-10 w-10 mx-auto mb-2 text-orange-500/30" />
+                <p className="text-sm">Interactive map loads here</p>
+              </div>
+            </div>
+
+            {/* Hours */}
+            <Card className="bg-slate-900/80 backdrop-blur border border-slate-800">
+              <CardContent className="p-8">
+                <h3 className="font-bold text-white mb-4 flex items-center gap-2"><Clock className="h-5 w-5 text-orange-400" /> Hours</h3>
+                <div className="space-y-2 text-sm">
+                  <div className="flex justify-between text-slate-300"><span>Monday – Friday</span><span className="text-white font-medium">5:00 AM – 11:00 PM</span></div>
+                  <div className="flex justify-between text-slate-300"><span>Saturday</span><span className="text-white font-medium">6:00 AM – 10:00 PM</span></div>
+                  <div className="flex justify-between text-slate-300"><span>Sunday</span><span className="text-white font-medium">7:00 AM – 8:00 PM</span></div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* ── Form ── */}
+          <Card className="bg-slate-900/80 backdrop-blur border border-slate-800 h-fit">
+            <CardContent className="p-8">
+              <h2 className="text-2xl font-bold text-white mb-6">Send a Message</h2>
+              <form onSubmit={handleSubmit} className="space-y-5">
+                <div>
+                  <label className="text-sm font-medium text-slate-300 mb-1.5 block">Name *</label>
+                  <Input value={form.name} onChange={(e) => setForm({...form, name: e.target.value})} placeholder="Your full name" className="bg-slate-800/50 border-slate-700 text-white placeholder:text-slate-500" />
+                </div>
+                <div>
+                  <label className="text-sm font-medium text-slate-300 mb-1.5 block">Email *</label>
+                  <Input value={form.email} onChange={(e) => setForm({...form, email: e.target.value})} type="email" placeholder="your@email.com" className="bg-slate-800/50 border-slate-700 text-white placeholder:text-slate-500" />
+                </div>
+                <div>
+                  <label className="text-sm font-medium text-slate-300 mb-1.5 block">Phone</label>
+                  <Input value={form.phone} onChange={(e) => setForm({...form, phone: e.target.value})} placeholder="(555) 000-0000" className="bg-slate-800/50 border-slate-700 text-white placeholder:text-slate-500" />
+                </div>
+                <div>
+                  <label className="text-sm font-medium text-slate-300 mb-1.5 block">Message *</label>
+                  <Textarea value={form.message} onChange={(e) => setForm({...form, message: e.target.value})} placeholder="How can we help?" rows={5} className="bg-slate-800/50 border-slate-700 text-white placeholder:text-slate-500 resize-none" />
+                </div>
+                <Button type="submit" className="w-full bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-600 hover:to-red-600 text-white font-bold uppercase tracking-wide rounded-full shadow-lg shadow-orange-500/25 active:scale-[0.97] transition-all">
+                  Send Message <Send className="ml-2 h-4 w-4" />
+                </Button>
+              </form>
+            </CardContent>
+          </Card>
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+}
\ No newline at end of file