diff --git a/src/pages/Changelog.tsx b/src/pages/Changelog.tsx
new file mode 100644
index 0000000..438c3a5
--- /dev/null
+++ b/src/pages/Changelog.tsx
@@ -0,0 +1,192 @@
+import { useState } from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Rocket, CheckCircle2, Bug, Sparkles, Zap, Mail, ArrowRight
+} from "lucide-react";
+import { toast } from "sonner";
+import Sidebar from "@/components/Sidebar";
+import Header from "@/components/Header";
+
+interface ReleaseFeature {
+  text: string;
+  type: string;
+  typeColor: string;
+}
+
+interface Release {
+  id: number;
+  version: string;
+  date: string;
+  title: string;
+  description: string;
+  features: ReleaseFeature[];
+}
+
+const releases: Release[] = [
+  {
+    id: 1,
+    version: "v2.4.0",
+    date: "April 10, 2026",
+    title: "Roadmap & Analytics",
+    description: "Major update introducing our new visual roadmap board, enhanced feedback analytics, and improved team collaboration features.",
+    features: [
+      { text: "Visual roadmap board with drag-and-drop columns", type: "New", typeColor: "bg-blue-100 text-blue-700" },
+      { text: "Real-time collaboration with cursor presence", type: "New", typeColor: "bg-blue-100 text-blue-700" },
+      { text: "Feedback sentiment analysis powered by AI", type: "New", typeColor: "bg-blue-100 text-blue-700" },
+      { text: "Fixed PDF export cutting off long descriptions", type: "Fix", typeColor: "bg-red-100 text-red-700" },
+      { text: "Improved dashboard widget loading performance", type: "Improved", typeColor: "bg-amber-100 text-amber-700" },
+    ],
+  },
+  {
+    id: 2,
+    version: "v2.3.0",
+    date: "March 25, 2026",
+    title: "Integration Hub",
+    description: "Seamless integrations with your favorite tools. Connect Slack, Jira, and Linear to keep your team in sync.",
+    features: [
+      { text: "Slack integration for feature notifications", type: "New", typeColor: "bg-blue-100 text-blue-700" },
+      { text: "Jira two-way sync for feature tracking", type: "New", typeColor: "bg-blue-100 text-blue-700" },
+      { text: "Linear import for existing roadmap data", type: "New", typeColor: "bg-blue-100 text-blue-700" },
+      { text: "Webhook support for custom integrations", type: "New", typeColor: "bg-blue-100 text-blue-700" },
+    ],
+  },
+  {
+    id: 3,
+    version: "v2.2.0",
+    date: "March 10, 2026",
+    title: "Priority Framework",
+    description: "A new weighted scoring model to help you make data-driven prioritization decisions.",
+    features: [
+      { text: "Customizable priority scoring with weighted criteria", type: "New", typeColor: "bg-blue-100 text-blue-700" },
+      { text: "RICE and ICE scoring frameworks built-in", type: "New", typeColor: "bg-blue-100 text-blue-700" },
+      { text: "Fixed incorrect vote counts on filtered views", type: "Fix", typeColor: "bg-red-100 text-red-700" },
+      { text: "Improved search performance for large feature lists", type: "Improved", typeColor: "bg-amber-100 text-amber-700" },
+    ],
+  },
+  {
+    id: 4,
+    version: "v2.1.0",
+    date: "February 20, 2026",
+    title: "Team Workspaces",
+    description: "Collaborate better with dedicated team workspaces, role-based permissions, and activity audit logs.",
+    features: [
+      { text: "Team workspaces with member management", type: "New", typeColor: "bg-blue-100 text-blue-700" },
+      { text: "Role-based access control (Admin, Editor, Viewer)", type: "New", typeColor: "bg-blue-100 text-blue-700" },
+      { text: "Activity audit log for compliance tracking", type: "New", typeColor: "bg-blue-100 text-blue-700" },
+      { text: "Fixed notification emails missing context details", type: "Fix", typeColor: "bg-red-100 text-red-700" },
+      { text: "Improved onboarding flow with interactive tutorial", type: "Improved", typeColor: "bg-amber-100 text-amber-700" },
+    ],
+  },
+];
+
+const typeIcons: Record<string, React.ElementType> = {
+  New: Sparkles,
+  Fix: Bug,
+  Improved: Zap,
+};
+
+export default function ChangelogPage() {
+  const [email, setEmail] = useState("");
+
+  const handleSubscribe = () => {
+    if (!email.includes("@")) {
+      toast.error("Please enter a valid email address");
+      return;
+    }
+    toast("Subscribed to changelog updates!");
+    setEmail("");
+  };
+
+  return (
+    <div className="flex min-h-screen bg-slate-50">
+      <Sidebar activePath="/changelog" />
+      <div className="flex-1 lg:ml-64">
+        <Header />
+        <main className="p-6 space-y-8">
+          {/* ── Page Header ── */}
+          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+            <div>
+              <h1 className="text-2xl font-bold text-slate-900 animate-fade-up">Changelog</h1>
+              <p className="text-slate-500 mt-1">Stay up to date with the latest improvements</p>
+            </div>
+          </div>
+
+          {/* ── Subscribe Banner ── */}
+          <Card className="border-0 shadow-sm bg-gradient-to-r from-blue-600 to-sky-500">
+            <CardContent className="p-6">
+              <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+                <div className="text-white">
+                  <div className="flex items-center gap-2 mb-1">
+                    <Mail className="h-5 w-5" />
+                    <h3 className="font-semibold">Subscribe to updates</h3>
+                  </div>
+                  <p className="text-blue-100 text-sm">Get notified when we ship new features and improvements</p>
+                </div>
+                <div className="flex items-center gap-2 w-full sm:w-auto">
+                  <Input
+                    placeholder="your@email.com"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    className="bg-white/20 border-white/30 text-white placeholder:text-blue-200 h-10 min-w-[220px]"
+                  />
+                  <Button onClick={handleSubscribe} className="bg-white text-blue-600 hover:bg-blue-50 h-10 shrink-0">
+                    Subscribe <ArrowRight className="ml-1 h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* ── Release Timeline ── */}
+          <div className="relative">
+            {/* Timeline Line */}
+            <div className="absolute left-6 top-0 bottom-0 w-px bg-slate-200 hidden md:block" />
+
+            <div className="space-y-8 stagger">
+              {releases.map((release, index) => (
+                <div key={release.id} className="relative flex gap-6">
+                  {/* Timeline Dot */}
+                  <div className="hidden md:flex items-start pt-1">
+                    <div className={`h-12 w-12 rounded-full flex items-center justify-center shrink-0 z-10 \${index === 0 ? "bg-blue-600 text-white" : "bg-white border-2 border-slate-200 text-slate-400"}`}>
+                      <Rocket className="h-5 w-5" />
+                    </div>
+                  </div>
+
+                  {/* Release Card */}
+                  <Card className={`border-0 shadow-sm flex-1 \${index === 0 ? "ring-2 ring-blue-100" : ""}`}>
+                    <CardContent className="p-6">
+                      <div className="flex flex-wrap items-center gap-3 mb-3">
+                        <Badge className="bg-blue-100 text-blue-700 font-mono text-xs border-0">{release.version}</Badge>
+                        <span className="text-sm text-slate-400">{release.date}</span>
+                        {index === 0 && <Badge className="bg-emerald-100 text-emerald-700 text-xs border-0">Latest</Badge>}
+                      </div>
+                      <h3 className="text-lg font-bold text-slate-900 mb-2">{release.title}</h3>
+                      <p className="text-sm text-slate-500 mb-4 leading-relaxed">{release.description}</p>
+                      <div className="space-y-2">
+                        {release.features.map((feature, fi) => {
+                          const FeatureIcon = typeIcons[feature.type] || CheckCircle2;
+                          return (
+                            <div key={fi} className="flex items-start gap-3 py-1.5">
+                              <Badge className={`\${feature.typeColor} text-[10px] font-semibold border-0 px-2 py-0.5 shrink-0 flex items-center gap-1`}>
+                                <FeatureIcon className="h-3 w-3" />
+                                {feature.type}
+                              </Badge>
+                              <span className="text-sm text-slate-600">{feature.text}</span>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    </CardContent>
+                  </Card>
+                </div>
+              ))}
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}