diff --git a/src/data.jsx b/src/data.jsx
index fa9a97d..cfb3250 100644
--- a/src/data.jsx
+++ b/src/data.jsx
@@ -83,6 +83,7 @@ const PORTFOLIO_DATA = {
       stack: ["SvelteKit", "Next.js", "React", "Tailwind", "PostgreSQL"],
       impact: { primary: "50k+", secondary: "daily users served" },
       color: "violet",
+      demo: "https://demo-autostudio-ecomercewebsite.vercel.app",
     },
     {
       id: "ai-agent-automation",
@@ -94,6 +95,7 @@ const PORTFOLIO_DATA = {
       stack: ["Anthropic Claude", "n8n", "LangGraph", "Node.js", "Hono"],
       impact: { primary: "1.2M+", secondary: "agent runs / month" },
       color: "cyan",
+      demo: "https://demo-agenticai-website.vercel.app",
     },
     {
       id: "web3-blockchain",
@@ -105,6 +107,7 @@ const PORTFOLIO_DATA = {
       stack: ["Solidity", "viem", "wagmi", "Cloudflare Workers"],
       impact: { primary: "12 chains", secondary: "EVM + Solana" },
       color: "green",
+      demo: "https://demo-cryptotradeanalysis-website.vercel.app",
     },
     {
       id: "mt5-ea-trading",
@@ -116,6 +119,7 @@ const PORTFOLIO_DATA = {
       stack: ["MQL5", "Go", "ClickHouse", "WebSockets", "React"],
       impact: { primary: "<80ms", secondary: "tick-to-render latency" },
       color: "amber",
+      demo: "https://ea-dashboard-blush.vercel.app",
     },
     {
       id: "scraping-data-pipeline",
@@ -127,6 +131,7 @@ const PORTFOLIO_DATA = {
       stack: ["Playwright", "Puppeteer", "Python", "Airflow", "PostgreSQL"],
       impact: { primary: "10M+", secondary: "records extracted / month" },
       color: "violet",
+      demo: "https://portfolio-website-tan-six-24.vercel.app",
     },
     {
       id: "infra-devops",
diff --git a/src/projects.jsx b/src/projects.jsx
index f94a87d..0e65e39 100644
--- a/src/projects.jsx
+++ b/src/projects.jsx
@@ -152,16 +152,20 @@ const ProjectCard = ({ p }) => {
               borderRadius: 8,
               color: "var(--text-dim)",
             }} title="GitHub"><Icons.Github size={14} /></button>
-            <button style={{
-              padding: "0 14px", height: 34,
-              display: "inline-flex", alignItems: "center", gap: 6,
-              background: "var(--text)",
-              color: "var(--bg)",
-              border: "none",
-              borderRadius: 8,
-              fontSize: 13,
-              fontWeight: 500,
-            }}>Demo <Icons.ArrowUpRight size={12} /></button>
+            {p.demo && (
+              <a href={p.demo} target="_blank" rel="noopener noreferrer" style={{
+                padding: "0 14px", height: 34,
+                display: "inline-flex", alignItems: "center", gap: 6,
+                background: "var(--text)",
+                color: "var(--bg)",
+                border: "none",
+                borderRadius: 8,
+                fontSize: 13,
+                fontWeight: 500,
+                textDecoration: "none",
+                cursor: "pointer",
+              }}>Demo <Icons.ArrowUpRight size={12} /></a>
+            )}
           </div>
         </div>
       </div>