diff --git a/src/pages/Blog.tsx b/src/pages/Blog.tsx
new file mode 100644
index 0000000..2e86008
--- /dev/null
+++ b/src/pages/Blog.tsx
@@ -0,0 +1,142 @@
+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 { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+
+const categories = ["All", "Product", "Engineering", "Company", "Guides"];
+
+const articles = [
+  {
+    title: "How AI is Reshaping Project Management in 2025",
+    excerpt: "Discover how machine learning is automating the mundane and freeing teams to focus on creative work.",
+    category: "Product",
+    author: "Alex Kim",
+    initials: "AK",
+    date: "Mar 15, 2025",
+    gradient: "from-indigo-500 to-purple-600",
+  },
+  {
+    title: "Building a Culture of Asynchronous Collaboration",
+    excerpt: "Why the best distributed teams invest in async-first workflows and how you can too.",
+    category: "Guides",
+    author: "Sophia Patel",
+    initials: "SP",
+    date: "Mar 8, 2025",
+    gradient: "from-cyan-500 to-blue-600",
+  },
+  {
+    title: "Our Journey to SOC 2 Type II Compliance",
+    excerpt: "A behind-the-scenes look at how we achieved enterprise-grade security certification.",
+    category: "Engineering",
+    author: "James Moreno",
+    initials: "JM",
+    date: "Feb 28, 2025",
+    gradient: "from-emerald-500 to-teal-600",
+  },
+  {
+    title: "Introducing Custom Workflow Automations",
+    excerpt: "Build powerful no-code automations that save your team hours every week.",
+    category: "Product",
+    author: "Lena Chen",
+    initials: "LC",
+    date: "Feb 20, 2025",
+    gradient: "from-amber-500 to-orange-600",
+  },
+  {
+    title: "Scaling from 10 to 10,000 Teams: Lessons Learned",
+    excerpt: "The architectural decisions and trade-offs we made during our hyper-growth phase.",
+    category: "Engineering",
+    author: "Sophia Patel",
+    initials: "SP",
+    date: "Feb 12, 2025",
+    gradient: "from-rose-500 to-pink-600",
+  },
+  {
+    title: "The Future of Work is Hybrid: Our Playbook",
+    excerpt: "How we keep our own team productive across 12 time zones and 4 continents.",
+    category: "Company",
+    author: "Alex Kim",
+    initials: "AK",
+    date: "Feb 5, 2025",
+    gradient: "from-violet-500 to-indigo-600",
+  },
+];
+
+export default function BlogPage() {
+  const [activeCategory, setActiveCategory] = useState("All");
+
+  const filtered = activeCategory === "All" ? articles : articles.filter((a) => a.category === activeCategory);
+
+  return (
+    <div className="min-h-screen bg-white text-slate-900 antialiased">
+      <Header />
+
+      {/* ── HERO ── */}
+      <section className="pt-32 pb-16 bg-gradient-to-b from-slate-50 to-white">
+        <div className="mx-auto max-w-7xl px-6 text-center">
+          <Badge className="mb-4 bg-indigo-50 text-indigo-600 border-0">Blog</Badge>
+          <h1 className="animate-fade-up text-4xl font-bold tracking-tight sm:text-5xl">Insights & Updates</h1>
+          <p className="mt-4 text-lg text-slate-500 max-w-2xl mx-auto">
+            Product news, engineering deep-dives, and guides from the Nexus team.
+          </p>
+        </div>
+      </section>
+
+      {/* ── CONTENT ── */}
+      <section className="py-24">
+        <div className="mx-auto max-w-7xl px-6">
+          <div className="flex flex-wrap gap-2 mb-12 justify-center">
+            {categories.map((cat) => (
+              <Button
+                key={cat}
+                variant={activeCategory === cat ? "default" : "outline"}
+                size="sm"
+                className={`rounded-full \${activeCategory === cat ? "bg-indigo-600 hover:bg-indigo-500" : ""}`}
+                onClick={() => setActiveCategory(cat)}
+              >
+                {cat}
+              </Button>
+            ))}
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 stagger">
+            {filtered.map((article) => (
+              <Card key={article.title} className="overflow-hidden border-slate-200 hover:-translate-y-1 hover:shadow-xl hover:border-indigo-200 transition-all duration-300 group cursor-pointer">
+                <div className={`aspect-[16/9] bg-gradient-to-br \${article.gradient} flex items-center justify-center relative overflow-hidden`}>
+                  <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wMyI+PGNpcmNsZSBjeD0iMSIgY3k9IjEiIHI9IjEiLz48L2c+PC9nPjwvc3ZnPg==')] opacity-60" />
+                  <div className="absolute -top-8 -right-8 w-32 h-32 rounded-full bg-white/10 blur-3xl" />
+                  <div className="absolute -bottom-8 -left-8 w-24 h-24 rounded-full bg-white/10 blur-3xl" />
+                  <span className="relative text-white/40 text-sm">Article Image</span>
+                </div>
+                <CardContent className="p-6">
+                  <Badge className="mb-3 bg-slate-100 text-slate-600 border-0 text-xs">{article.category}</Badge>
+                  <h3 className="font-semibold text-lg leading-tight group-hover:text-indigo-600 transition-colors">{article.title}</h3>
+                  <p className="mt-2 text-sm text-slate-500 line-clamp-2">{article.excerpt}</p>
+                  <div className="mt-4 flex items-center gap-3">
+                    <Avatar className="h-8 w-8">
+                      <AvatarFallback className="bg-gradient-to-br from-indigo-400 to-cyan-400 text-white text-xs">{article.initials}</AvatarFallback>
+                    </Avatar>
+                    <div>
+                      <div className="text-sm font-medium">{article.author}</div>
+                      <div className="text-xs text-slate-400">{article.date}</div>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+
+          <div className="mt-12 text-center">
+            <Button variant="outline" className="active:scale-[0.98] rounded-full px-8">Load More Articles</Button>
+          </div>
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+}