diff --git a/src/pages/Portfolio.tsx b/src/pages/Portfolio.tsx
new file mode 100644
index 0000000..5af2de1
--- /dev/null
+++ b/src/pages/Portfolio.tsx
@@ -0,0 +1,87 @@
+import { useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useSaas } from "@/hooks/use-tygarun";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+
+const categories = ["All", "Wedding", "Portrait", "Commercial", "Fashion", "Nature"];
+
+const photos = [
+  { title: "First Dance", category: "Wedding", img: "https://images.unsplash.com/photo-1519741497674-611481863552?w=800&h=600&fit=crop", tall: true },
+  { title: "Quiet Confidence", category: "Portrait", img: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=600&h=600&fit=crop", tall: false },
+  { title: "Brand Essence", category: "Commercial", img: "https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=600&h=400&fit=crop", tall: false },
+  { title: "Avant Garde", category: "Fashion", img: "https://images.unsplash.com/photo-1469334031218-e382a71b716b?w=600&h=800&fit=crop", tall: true },
+  { title: "Morning Mist", category: "Nature", img: "https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=800&h=600&fit=crop", tall: false },
+  { title: "The Vow", category: "Wedding", img: "https://images.unsplash.com/photo-1511285560929-80b456fea0bc?w=600&h=600&fit=crop", tall: false },
+  { title: "Inner Light", category: "Portrait", img: "https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=600&h=800&fit=crop", tall: true },
+  { title: "Studio Session", category: "Commercial", img: "https://images.unsplash.com/photo-1556761175-5973dc0f32e7?w=600&h=400&fit=crop", tall: false },
+  { title: "Editorial Gaze", category: "Fashion", img: "https://images.unsplash.com/photo-1509631179647-0177331693ae?w=600&h=600&fit=crop", tall: false },
+  { title: "Wilderness", category: "Nature", img: "https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=800&h=600&fit=crop", tall: true },
+  { title: "Sunset Ceremony", category: "Wedding", img: "https://images.unsplash.com/photo-1606216794074-735e91aa2c92?w=600&h=400&fit=crop", tall: false },
+  { title: "Timeless", category: "Portrait", img: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&h=600&fit=crop", tall: false },
+];
+
+export default function PortfolioPage() {
+  const [active, setActive] = useState("All");
+
+  // Gallery is media-backed via tyga.run file-management (seed images until the library is live)
+  const { data: media } = useSaas("file-management", "/list");
+  const livePhotos = Array.isArray(media) && media.length
+    ? media.map((m: any) => ({
+        title: m.title || m.name || "Untitled",
+        category: m.category || "All",
+        img: m.url || m.src || m.signedUrl,
+        tall: !!m.tall,
+      }))
+    : photos;
+
+  const filtered = active === "All" ? livePhotos : livePhotos.filter((p) => p.category === active);
+
+  return (
+    <div className="min-h-screen bg-zinc-950 text-white antialiased">
+      <Header />
+
+      <section className="pt-32 pb-12 px-6">
+        <div className="mx-auto max-w-7xl">
+          <h1 className="text-4xl md:text-6xl font-serif font-light tracking-tight mb-4 animate-fade-up">Portfolio</h1>
+          <p className="text-zinc-500 max-w-xl mb-10">Each image is a story. Browse by category or explore the full collection.</p>
+
+          <Tabs value={active} onValueChange={setActive}>
+            <TabsList className="bg-zinc-900 border border-zinc-800">
+              {categories.map((cat) => (
+                <TabsTrigger key={cat} value={cat} className="text-xs tracking-wider data-[state=active]:bg-white data-[state=active]:text-zinc-900">
+                  {cat}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          </Tabs>
+        </div>
+      </section>
+
+      <section className="pb-24 px-6">
+        <div className="mx-auto max-w-7xl columns-1 sm:columns-2 lg:columns-3 gap-4 space-y-4 stagger">
+          {filtered.map((photo, i) => (
+            <Dialog key={i}>
+              <DialogTrigger asChild>
+                <div className={`group relative overflow-hidden cursor-pointer break-inside-avoid \${photo.tall ? "aspect-[3/4]" : "aspect-square"}`}>
+                  <img src={photo.img} alt={photo.title} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
+                  <div className="absolute inset-0 bg-black/0 group-hover:bg-black/50 transition-all duration-500 flex flex-col items-center justify-center opacity-0 group-hover:opacity-100">
+                    <p className="text-white font-light text-lg tracking-wide mb-2">{photo.title}</p>
+                    <Badge variant="secondary" className="bg-white/20 text-white border-0 backdrop-blur-sm text-xs">{photo.category}</Badge>
+                  </div>
+                </div>
+              </DialogTrigger>
+              <DialogContent className="max-w-4xl p-0 bg-transparent border-0">
+                <img src={photo.img} alt={photo.title} className="w-full rounded-lg" />
+              </DialogContent>
+            </Dialog>
+          ))}
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+}
\ No newline at end of file