diff --git a/src/pages/Destinations.tsx b/src/pages/Destinations.tsx
new file mode 100644
index 0000000..5ee9cc2
--- /dev/null
+++ b/src/pages/Destinations.tsx
@@ -0,0 +1,122 @@
+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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Slider } from "@/components/ui/slider";
+import { MapPin, Star, ArrowRight, Filter } from "lucide-react";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+
+const allDestinations = [
+  { name: "Bali", country: "Indonesia", region: "Asia", type: "Beach", rating: "4.9", price: "\$899", gradient: "from-blue-600/60 to-cyan-500/40" },
+  { name: "Santorini", country: "Greece", region: "Europe", type: "City", rating: "4.8", price: "\$1,299", gradient: "from-amber-600/60 to-orange-400/40" },
+  { name: "Machu Picchu", country: "Peru", region: "Americas", type: "Mountain", rating: "4.9", price: "\$1,499", gradient: "from-emerald-600/60 to-teal-400/40" },
+  { name: "Kyoto", country: "Japan", region: "Asia", type: "City", rating: "4.7", price: "\$1,199", gradient: "from-purple-600/60 to-violet-400/40" },
+  { name: "Marrakech", country: "Morocco", region: "Africa", type: "Adventure", rating: "4.8", price: "\$799", gradient: "from-rose-600/60 to-pink-400/40" },
+  { name: "Queenstown", country: "New Zealand", region: "Oceania", type: "Adventure", rating: "4.9", price: "\$1,599", gradient: "from-sky-600/60 to-indigo-400/40" },
+];
+
+export default function DestinationsPage() {
+  const [region, setRegion] = useState("all");
+  const [type, setType] = useState("all");
+
+  const filtered = allDestinations.filter((d) => {
+    if (region !== "all" && d.region !== region) return false;
+    if (type !== "all" && d.type !== type) return false;
+    return true;
+  });
+
+  return (
+    <div className="min-h-screen bg-background text-foreground antialiased">
+      <Header />
+
+      {/* ── HERO ── */}
+      <section className="pt-32 pb-16 bg-gradient-to-b from-slate-950 via-blue-950/30 to-slate-900">
+        <div className="mx-auto max-w-7xl px-6 text-center">
+          <Badge variant="secondary" className="mb-4 px-3 py-1 text-xs tracking-widest uppercase bg-blue-900/30 text-cyan-300 border-blue-700/30">Explore</Badge>
+          <h1 className="text-4xl md:text-5xl font-bold text-white animate-fade-up">Our Destinations</h1>
+          <p className="mt-3 text-slate-400 max-w-xl mx-auto">Discover breathtaking locations across every continent.</p>
+        </div>
+      </section>
+
+      {/* ── FILTERS ── */}
+      <section className="py-8 bg-slate-900 border-b border-slate-800">
+        <div className="mx-auto max-w-7xl px-6">
+          <div className="flex flex-wrap items-center gap-4">
+            <Filter className="h-4 w-4 text-slate-400" />
+            <Select value={region} onValueChange={setRegion}>
+              <SelectTrigger className="w-44 bg-slate-800 border-slate-700 text-white rounded-lg">
+                <SelectValue placeholder="Region" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Regions</SelectItem>
+                <SelectItem value="Asia">Asia</SelectItem>
+                <SelectItem value="Europe">Europe</SelectItem>
+                <SelectItem value="Americas">Americas</SelectItem>
+                <SelectItem value="Africa">Africa</SelectItem>
+                <SelectItem value="Oceania">Oceania</SelectItem>
+              </SelectContent>
+            </Select>
+            <Select value={type} onValueChange={setType}>
+              <SelectTrigger className="w-44 bg-slate-800 border-slate-700 text-white rounded-lg">
+                <SelectValue placeholder="Type" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Types</SelectItem>
+                <SelectItem value="Beach">Beach</SelectItem>
+                <SelectItem value="Mountain">Mountain</SelectItem>
+                <SelectItem value="City">City</SelectItem>
+                <SelectItem value="Adventure">Adventure</SelectItem>
+              </SelectContent>
+            </Select>
+            <span className="text-sm text-slate-500">{filtered.length} destinations found</span>
+          </div>
+        </div>
+      </section>
+
+      {/* ── GRID ── */}
+      <section className="py-16 bg-slate-900">
+        <div className="mx-auto max-w-7xl px-6">
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 stagger">
+            {filtered.map((d, i) => (
+              <Card key={i} className="group overflow-hidden border-slate-800 bg-slate-950/50 hover:border-blue-700/50 hover:-translate-y-1 hover:shadow-lg transition-all duration-300">
+                <div className={`relative h-56 bg-gradient-to-br \${d.gradient} flex items-end p-5`}>
+                  <div className="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors" />
+                  <div className="relative z-10">
+                    <div className="flex items-center gap-2 mb-2">
+                      <Badge className="bg-white/20 text-white border-0 backdrop-blur text-xs">{d.country}</Badge>
+                      <Badge className="bg-blue-600/30 text-blue-200 border-0 backdrop-blur text-xs">{d.type}</Badge>
+                    </div>
+                    <h3 className="text-xl font-bold text-white">{d.name}</h3>
+                  </div>
+                </div>
+                <CardContent className="p-5">
+                  <div className="flex items-center justify-between mb-4">
+                    <div className="flex items-center gap-1 text-amber-400">
+                      <Star className="h-4 w-4 fill-current" />
+                      <span className="text-sm font-medium text-white">{d.rating}</span>
+                    </div>
+                    <div className="text-sm text-slate-400">from <span className="text-lg font-bold text-white">{d.price}</span></div>
+                  </div>
+                  <Button asChild className="w-full bg-blue-600 hover:bg-blue-500 text-white rounded-full active:scale-[0.98]">
+                    <Link to="/destination/detail">View Details <ArrowRight className="ml-2 h-4 w-4" /></Link>
+                  </Button>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+          {filtered.length === 0 && (
+            <div className="text-center py-16">
+              <MapPin className="mx-auto h-12 w-12 text-slate-700 mb-4" />
+              <p className="text-slate-400">No destinations match your filters. Try adjusting your criteria.</p>
+            </div>
+          )}
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+}
\ No newline at end of file