diff --git a/src/pages/Courses.tsx b/src/pages/Courses.tsx
new file mode 100644
index 0000000..f563dbc
--- /dev/null
+++ b/src/pages/Courses.tsx
@@ -0,0 +1,118 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Search, Star, Clock, BookOpen, Users } from "lucide-react";
+
+const courses = [
+  { id: 1, title: "Full-Stack Web Development Bootcamp", instructor: "Dr. Sarah Chen", category: "Web Dev", level: "Beginner", duration: "40h", lessons: 120, rating: 4.9, reviews: 1240, price: "$89", gradient: "from-indigo-500 to-purple-600" },
+  { id: 2, title: "Data Science & Machine Learning A-Z", instructor: "Prof. James Rivera", category: "Data Science", level: "Intermediate", duration: "35h", lessons: 95, rating: 4.8, reviews: 980, price: "$79", gradient: "from-amber-500 to-orange-600" },
+  { id: 3, title: "UI/UX Design Masterclass", instructor: "Maya Patel", category: "Design", level: "Beginner", duration: "25h", lessons: 68, rating: 4.9, reviews: 870, price: "$69", gradient: "from-emerald-500 to-teal-600" },
+  { id: 4, title: "AI & Deep Learning with Python", instructor: "Dr. Alex Kim", category: "AI/ML", level: "Advanced", duration: "50h", lessons: 140, rating: 4.7, reviews: 650, price: "$99", gradient: "from-rose-500 to-pink-600" },
+  { id: 5, title: "Digital Business Strategy", instructor: "Rachel Torres", category: "Business", level: "Intermediate", duration: "20h", lessons: 55, rating: 4.8, reviews: 720, price: "$59", gradient: "from-cyan-500 to-blue-600" },
+  { id: 6, title: "Growth Marketing & Analytics", instructor: "David Park", category: "Marketing", level: "Beginner", duration: "18h", lessons: 48, rating: 4.6, reviews: 540, price: "$69", gradient: "from-violet-500 to-fuchsia-600" },
+];
+
+export default function CoursesPage() {
+  const [search, setSearch] = useState("");
+  const [category, setCategory] = useState("all");
+  const [level, setLevel] = useState("all");
+
+  const filtered = courses.filter((c) => {
+    if (search && !c.title.toLowerCase().includes(search.toLowerCase())) return false;
+    if (category !== "all" && c.category !== category) return false;
+    if (level !== "all" && c.level !== level) return false;
+    return true;
+  });
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-slate-950">
+      <Header />
+
+      <section className="pt-32 pb-8">
+        <div className="mx-auto max-w-7xl px-6">
+          <h1 className="text-3xl sm:text-4xl font-bold mb-2 animate-fade-up">Explore Our Courses</h1>
+          <p className="text-muted-foreground mb-8 animate-fade-up" style={{ animationDelay: "0.05s" }}>Find the perfect course to advance your skills and career.</p>
+
+          <div className="flex flex-col md:flex-row gap-4 mb-8 animate-fade-up" style={{ animationDelay: "0.1s" }}>
+            <div className="relative flex-1">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <Input placeholder="Search courses..." value={search} onChange={(e) => setSearch(e.target.value)} className="pl-10 rounded-xl" />
+            </div>
+            <Select value={category} onValueChange={setCategory}>
+              <SelectTrigger className="w-full md:w-48 rounded-xl"><SelectValue placeholder="Category" /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Categories</SelectItem>
+                <SelectItem value="Web Dev">Web Dev</SelectItem>
+                <SelectItem value="Data Science">Data Science</SelectItem>
+                <SelectItem value="Design">Design</SelectItem>
+                <SelectItem value="AI/ML">AI/ML</SelectItem>
+                <SelectItem value="Business">Business</SelectItem>
+                <SelectItem value="Marketing">Marketing</SelectItem>
+              </SelectContent>
+            </Select>
+            <Select value={level} onValueChange={setLevel}>
+              <SelectTrigger className="w-full md:w-44 rounded-xl"><SelectValue placeholder="Level" /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Levels</SelectItem>
+                <SelectItem value="Beginner">Beginner</SelectItem>
+                <SelectItem value="Intermediate">Intermediate</SelectItem>
+                <SelectItem value="Advanced">Advanced</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </section>
+
+      <section className="pb-20">
+        <div className="mx-auto max-w-7xl px-6">
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            {filtered.map((c, i) => (
+              <Card key={c.id} className="group bg-white/70 dark:bg-slate-900/70 backdrop-blur border-slate-200/60 dark:border-slate-800/60 rounded-2xl overflow-hidden hover:-translate-y-1 hover:shadow-xl transition-all duration-300 animate-fade-up" style={{ animationDelay: `\${i * 0.08}s` }}>
+                <div className={`h-40 bg-gradient-to-br \${c.gradient} flex items-center justify-center`}>
+                  <BookOpen className="h-12 w-12 text-white/80" />
+                </div>
+                <CardContent className="p-5">
+                  <div className="flex gap-2 mb-2">
+                    <Badge variant="secondary" className="text-xs">{c.category}</Badge>
+                    <Badge variant="outline" className="text-xs">{c.level}</Badge>
+                  </div>
+                  <h3 className="font-semibold text-lg leading-snug mb-1">{c.title}</h3>
+                  <p className="text-sm text-muted-foreground mb-3">{c.instructor}</p>
+                  <div className="flex items-center gap-4 text-xs text-muted-foreground mb-3">
+                    <span className="flex items-center gap-1"><Clock className="h-3.5 w-3.5" />{c.duration}</span>
+                    <span className="flex items-center gap-1"><BookOpen className="h-3.5 w-3.5" />{c.lessons} lessons</span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-1">
+                      <Star className="h-4 w-4 fill-amber-400 text-amber-400" />
+                      <span className="text-sm font-medium">{c.rating}</span>
+                      <span className="text-xs text-muted-foreground">({c.reviews.toLocaleString()})</span>
+                    </div>
+                    <span className="text-lg font-bold text-indigo-600 dark:text-indigo-400">{c.price}</span>
+                  </div>
+                  <Button asChild className="w-full mt-4 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full active:scale-[0.97] transition-all">
+                    <Link to={`/course/\${c.id}`}>View Course</Link>
+                  </Button>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+          {filtered.length === 0 && (
+            <div className="text-center py-16 text-muted-foreground">
+              <BookOpen className="h-12 w-12 mx-auto mb-4 opacity-40" />
+              <p>No courses match your filters. Try adjusting your search.</p>
+            </div>
+          )}
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+}
\ No newline at end of file