diff --git a/README.md b/README.md
index 9e88f7d..03ae0fe 100644
--- a/README.md
+++ b/README.md
@@ -11,7 +11,7 @@
 
 <p align="center">
   <a href="https://www.sky-systems.net/shop/phone#live-demo">
-    <img alt="Try the interactive Sky Phone live demo" src="https://img.shields.io/badge/TRY_THE_LIVE_DEMO-OPEN_NOW-7c3aed?style=for-the-badge" height="156">
+    <img alt="Try the interactive Sky Phone live demo" src="readme-assets/live-demo-button.svg" width="780">
   </a>
 </p>
 
diff --git a/readme-assets/live-demo-button.svg b/readme-assets/live-demo-button.svg
new file mode 100644
index 0000000..1c805f4
--- /dev/null
+++ b/readme-assets/live-demo-button.svg
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="780" height="150" viewBox="0 0 780 150" role="img" aria-labelledby="title description">
+  <title id="title">Try the Sky Phone live demo</title>
+  <desc id="description">Open the complete interactive Sky Phone directly in your browser.</desc>
+  <defs>
+    <linearGradient id="background" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#6d28d9"/>
+      <stop offset="0.48" stop-color="#7c3aed"/>
+      <stop offset="1" stop-color="#2563eb"/>
+    </linearGradient>
+    <linearGradient id="shine" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0" stop-color="#ffffff" stop-opacity="0.22"/>
+      <stop offset="0.5" stop-color="#ffffff" stop-opacity="0"/>
+      <stop offset="1" stop-color="#ffffff" stop-opacity="0.14"/>
+    </linearGradient>
+    <filter id="shadow" x="-10%" y="-30%" width="120%" height="170%">
+      <feDropShadow dx="0" dy="8" stdDeviation="8" flood-color="#111827" flood-opacity="0.28"/>
+    </filter>
+  </defs>
+
+  <g filter="url(#shadow)">
+    <rect x="4" y="4" width="772" height="136" rx="30" fill="url(#background)"/>
+    <rect x="5" y="5" width="770" height="134" rx="29" fill="none" stroke="#c4b5fd" stroke-opacity="0.7" stroke-width="2"/>
+    <path d="M34 5H400L270 140H5V34A29 29 0 0 1 34 5Z" fill="url(#shine)"/>
+
+    <circle cx="72" cy="72" r="43" fill="#ffffff" fill-opacity="0.14"/>
+    <rect x="51" y="35" width="42" height="74" rx="10" fill="none" stroke="#ffffff" stroke-width="4"/>
+    <path d="M65 43h14M67 100h10" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>
+    <circle cx="86" cy="48" r="8" fill="#22d3ee"/>
+
+    <text x="132" y="66" fill="#ffffff" font-family="Segoe UI, Arial, sans-serif" font-size="32" font-weight="800" letter-spacing="0.8">TRY THE LIVE DEMO</text>
+    <text x="132" y="98" fill="#ede9fe" font-family="Segoe UI, Arial, sans-serif" font-size="17" font-weight="500">Experience the complete Sky Phone in your browser</text>
+
+    <rect x="590" y="48" width="156" height="50" rx="25" fill="#ffffff"/>
+    <text x="668" y="80" fill="#6d28d9" font-family="Segoe UI, Arial, sans-serif" font-size="16" font-weight="800" text-anchor="middle">OPEN NOW  →</text>
+  </g>
+</svg>
diff --git a/sky_phone/README.md b/sky_phone/README.md
index 566b4eb..ffc6843 100644
--- a/sky_phone/README.md
+++ b/sky_phone/README.md
@@ -11,7 +11,7 @@
 
 <p align="center">
   <a href="https://www.sky-systems.net/shop/phone#live-demo">
-    <img alt="Try the interactive Sky Phone live demo" src="https://img.shields.io/badge/TRY_THE_LIVE_DEMO-OPEN_NOW-7c3aed?style=for-the-badge" height="156">
+    <img alt="Try the interactive Sky Phone live demo" src="../readme-assets/live-demo-button.svg" width="780">
   </a>
 </p>