diff --git a/README.md b/README.md
index f717ce0ae..68c9467ac 100644
--- a/README.md
+++ b/README.md
@@ -25,7 +25,7 @@ Agent Orchestrator manages fleets of AI coding agents working in parallel on you
   <img src="docs/assets/demo-video-tweet.png" alt="Agent Orchestrator demo — AI agents building their own orchestrator" width="560">
 </a>
 
-<a href="https://x.com/agent_wrapper/status/2026329204405723180"><img src="https://img.shields.io/badge/%E2%96%B6%EF%B8%8F_Watch_the_demo_on_X-black?style=for-the-badge&logo=x&logoColor=white" alt="Watch the demo on X"></a>
+<a href="https://x.com/agent_wrapper/status/2026329204405723180"><img src="docs/assets/btn-watch-demo.png" alt="Watch the Demo on X" height="48"></a>
 
 </div>
 
@@ -35,7 +35,7 @@ Agent Orchestrator manages fleets of AI coding agents working in parallel on you
   <img src="docs/assets/article-tweet.png" alt="The Self-Improving AI System That Built Itself" width="560">
 </a>
 
-<a href="https://x.com/agent_wrapper/status/2025986105485733945"><img src="https://img.shields.io/badge/%F0%9F%93%96_Read_the_full_article_on_X-black?style=for-the-badge&logo=x&logoColor=white" alt="Read the full article on X"></a>
+<a href="https://x.com/agent_wrapper/status/2025986105485733945"><img src="docs/assets/btn-read-article.png" alt="Read the Full Article on X" height="48"></a>
 
 </div>
 
diff --git a/docs/assets/btn-read-article.png b/docs/assets/btn-read-article.png
new file mode 100644
index 000000000..05a687e74
Binary files /dev/null and b/docs/assets/btn-read-article.png differ
diff --git a/docs/assets/btn-read-article.svg b/docs/assets/btn-read-article.svg
new file mode 100644
index 000000000..a9b4723ee
--- /dev/null
+++ b/docs/assets/btn-read-article.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="296" height="48" viewBox="0 0 296 48">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#E8503A"/>
+      <stop offset="50%" stop-color="#D94530"/>
+      <stop offset="100%" stop-color="#C73A26"/>
+    </linearGradient>
+    <linearGradient id="shine" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.25"/>
+      <stop offset="50%" stop-color="#FFFFFF" stop-opacity="0.05"/>
+      <stop offset="100%" stop-color="#000000" stop-opacity="0.1"/>
+    </linearGradient>
+  </defs>
+  <rect width="296" height="48" rx="10" fill="url(#bg)"/>
+  <rect width="296" height="48" rx="10" fill="url(#shine)"/>
+  <rect x="0.5" y="0.5" width="295" height="47" rx="9.5" fill="none" stroke="none"/>
+  <!-- Book icon -->
+  <g transform="translate(22, 14)" fill="#FFFFFF">
+    <path d="M0,2 C0,0.9 0.9,0 2,0 L8,0 C9.1,0 10,0.5 10,1.5 L10,18 C10,17 9.1,16.5 8,16.5 L2,16.5 C0.9,16.5 0,17.4 0,18.5 Z"/>
+    <path d="M20,2 C20,0.9 19.1,0 18,0 L12,0 C10.9,0 10,0.5 10,1.5 L10,18 C10,17 10.9,16.5 12,16.5 L18,16.5 C19.1,16.5 20,17.4 20,18.5 Z"/>
+  </g>
+  <!-- Text -->
+  <text x="52" y="29" font-family="system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif" font-size="16" font-weight="700" fill="#FFFFFF" letter-spacing="0.5">Read the Full Article on X</text>
+</svg>
diff --git a/docs/assets/btn-watch-demo.png b/docs/assets/btn-watch-demo.png
new file mode 100644
index 000000000..9c62f1cbf
Binary files /dev/null and b/docs/assets/btn-watch-demo.png differ
diff --git a/docs/assets/btn-watch-demo.svg b/docs/assets/btn-watch-demo.svg
new file mode 100644
index 000000000..e475c00a8
--- /dev/null
+++ b/docs/assets/btn-watch-demo.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="280" height="48" viewBox="0 0 280 48">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#6C5CE7"/>
+      <stop offset="50%" stop-color="#5B4BD5"/>
+      <stop offset="100%" stop-color="#4A3AC3"/>
+    </linearGradient>
+    <linearGradient id="shine" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.25"/>
+      <stop offset="50%" stop-color="#FFFFFF" stop-opacity="0.05"/>
+      <stop offset="100%" stop-color="#000000" stop-opacity="0.1"/>
+    </linearGradient>
+  </defs>
+  <rect width="280" height="48" rx="10" fill="url(#bg)"/>
+  <rect width="280" height="48" rx="10" fill="url(#shine)"/>
+  <rect x="0.5" y="0.5" width="279" height="47" rx="9.5" fill="none" stroke="none"/>
+  <!-- Play icon -->
+  <polygon points="28,16 28,32 40,24" fill="#FFFFFF"/>
+  <!-- Text -->
+  <text x="52" y="29" font-family="system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif" font-size="16" font-weight="700" fill="#FFFFFF" letter-spacing="0.5">Watch the Demo on X</text>
+</svg>