diff --git a/website/index.html b/website/index.html
index c3540019..2fc10e10 100644
--- a/website/index.html
+++ b/website/index.html
@@ -61,7 +61,7 @@
                                     <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/>
                                     <path d="M9 18c-4.51 2-5-2-7-2"/>
                                 </svg>
-                                <span class="ml-1 hidden sm:inline">View Source</span>
+                                <span class="ml-1 hidden sm:inline">GitHub</span>
                             </a>
                         </li>
                         <li class="ml-1">
@@ -86,13 +86,13 @@
                     <div class="max-w-3xl mx-auto">
                         <div class="text-center pb-12 md:pb-16">
                             <h1 class="font-inter-tight text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-zinc-500 via-zinc-900 to-zinc-900 pb-4">
-                                Run on your servers<br>
-                                Cut cloud costs
+                                Stay simple<br>
+                                Ship more
                             </h1>
                             <p class="text-lg text-zinc-500 mb-8">
-                                Uncloud is a lightweight Docker clustering tool for running web apps on your own servers
+                                Uncloud is a lightweight Docker clustering tool for running and scaling web apps on your servers
                                 — from cloud VMs to bare metal.
-                                Replace Heroku and Render, no Kubernetes required.
+                                No Kubernetes required.
                             </p>
                             <div class="max-w-xs mx-auto sm:max-w-none sm:inline-flex sm:justify-center space-y-4 sm:space-y-0 sm:space-x-4">
                                 <div>
@@ -117,16 +117,31 @@
                 </div>
 
                 <div class="max-w-3xl mx-auto px-4 sm:px-6 flex justify-center pb-12 relative before:absolute before:-top-12 before:w-96 before:h-96 before:bg-zinc-900 before:opacity-[.15] before:rounded-full before:blur-3xl before:-z-10">
-                    <div class="w-full md:min-h-[420px]">
-                        <script src="https://fast.wistia.com/player.js" async></script>
-                        <script src="https://fast.wistia.com/embed/k47uwt9uau.js" async type="module"></script>
-                        <style>wistia-player[media-id='k47uwt9uau']:not(:defined) {
-                            background: center / contain no-repeat url('https://fast.wistia.com/embed/medias/k47uwt9uau/swatch');
-                            display: block;
-                            filter: blur(5px);
-                            padding-top: 58.33%;
-                        }</style>
-                        <wistia-player media-id="k47uwt9uau" aspect="1.7142857142857142"></wistia-player>
+                    <div class="coding w-full bg-zinc-800 rounded-lg border border-zinc-700/50 shadow-2xl">
+                        <!-- Title bar -->
+                        <div class="pl-4 pt-4 flex items-center">
+                            <div class="flex gap-2">
+                                <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
+                                <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
+                                <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
+                            </div>
+                        </div>
+                        <!-- Terminal content -->
+                        <div class="p-4 text-sm sm:p-6 sm:text-[0.9375rem] text-white overflow-x-auto">
+                            <pre class="text-zinc-500 select-none"># Start with any cloud VM or your own server</pre>
+                            <pre><span class="text-emerald-500 select-none">$ </span>uc machine init root@137.123.45.67</pre>
+
+                            <pre> </pre>
+                            <pre class="text-zinc-500 select-none"># Deploy your app with automatic HTTPS</pre>
+                            <pre><span class="text-emerald-500 select-none">$ </span>uc run --name my-app -p app.example.com:8000/https app-image:latest</pre>
+                            <pre class="text-zinc-200">✨ Your app is available at <span class="underline">https://app.example.com</span></pre>
+
+                            <pre> </pre>
+                            <pre class="text-zinc-500 select-none"># Achieve high availability by adding more machines and scaling the app</pre>
+                            <pre><span
+                                    class="text-emerald-500 select-none">$ </span>uc machine add ubuntu@65.21.45.67</pre>
+                            <pre><span class="text-emerald-500 select-none">$ </span>uc scale my-app 2</pre>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -141,7 +156,7 @@
                             Cloud-like experience you control
                         </h2>
                         <p class="text-lg text-zinc-500">
-                            Keep the Docker workflows you love while optimizing infrastructure costs
+                            Keep the Docker workflows you love while optimising infrastructure costs
                         </p>
                     </div>
 
@@ -362,7 +377,7 @@
                                     </div>
                                 </div>
 
-                                <!-- Fully decentralized -->
+                                <!-- Fully decentralised -->
                                 <div class="text-left flex items-center px-6 py-4 rounded border border-transparent">
                                     <svg class="shrink-0 fill-zinc-400 stroke-zinc-400 mr-3"
                                          xmlns="http://www.w3.org/2000/svg"
@@ -371,11 +386,11 @@
                                     </svg>
                                     <div>
                                         <div class="font-inter-tight text-lg font-semibold text-zinc-200 mb-1">
-                                            Fully decentralized
+                                            Fully decentralised
                                         </div>
                                         <div>
                                             Unlike traditional orchestrators, there's no central control plane to
-                                            maintain. Each machine maintains a synchronized copy of the cluster
+                                            maintain. Each machine maintains a synchronised copy of the cluster
                                             state
                                             through peer-to-peer communication, keeping cluster operations
                                             functional
@@ -502,7 +517,7 @@
                                 <h3 class="font-inter-tight font-semibold text-zinc-200">No vendor lock-in</h3>
                             </div>
                             <p class="text-sm">Mix cloud providers and your own hardware freely to
-                                optimize costs and performance, without changing how you deploy or manage apps.</p>
+                                optimise costs and performance, without changing how you deploy or manage apps.</p>
                         </div>
                     </div>
                 </div>
@@ -510,9 +525,37 @@
             </div>
         </section>
 
+        <!-- Demo Section -->
+        <section class="relative bg-white text-zinc-800">
+            <div class="py-12 md:py-20">
+                <div class="max-w-6xl mx-auto px-4 sm:px-6">
+                    <div class="max-w-3xl mx-auto text-center pb-12 md:pb-16">
+                        <h2 class="font-inter-tight text-3xl md:text-4xl font-bold text-zinc-900 mb-4">
+                            See in action
+                        </h2>
+                        <p class="text-lg text-zinc-500">
+                            Deploy a highly available web app with automatic HTTPS across multiple regions and on-premises in just a couple minutes.
+                        </p>
+                    </div>
+
+                    <div class="max-w-3xl mx-auto px-4 sm:px-6 flex justify-center pb-12 relative before:absolute before:-top-12 before:w-96 before:h-96 before:bg-zinc-900 before:opacity-[.15] before:rounded-full before:blur-3xl before:-z-10">
+                        <script src="https://fast.wistia.com/player.js" async></script>
+                        <script src="https://fast.wistia.com/embed/k47uwt9uau.js" async type="module"></script>
+                        <style>wistia-player[media-id='k47uwt9uau']:not(:defined) {
+                            background: center / contain no-repeat url('https://fast.wistia.com/embed/medias/k47uwt9uau/swatch');
+                            display: block;
+                            filter: blur(5px);
+                            padding-top: 58.33%;
+                        }</style>
+                        <wistia-player media-id="k47uwt9uau" aspect="1.7142857142857142" class="w-full rounded-xl shadow-lg"></wistia-player>
+                    </div>
+                </div>
+            </div>
+        </section>
+
         <!-- CTA -->
         <section id="subscribe">
-            <div class="py-12 md:py-20">
+            <div class="py-12 md:py-20 border-t border-zinc-200">
                 <div class="max-w-6xl mx-auto px-4 sm:px-6">
                     <div class="relative max-w-3xl mx-auto text-center">
                         <h2 class="font-inter-tight text-3xl md:text-4xl font-bold text-zinc-900 mb-4">
diff --git a/website/style.css b/website/style.css
index e9c8fb1d..32ea2fbb 100644
--- a/website/style.css
+++ b/website/style.css
@@ -1314,6 +1314,14 @@ input[type="search"]::-webkit-search-results-decoration {
   height: 3.5rem;
 }
 
+.h-2{
+  height: 0.5rem;
+}
+
+.h-2\.5{
+  height: 0.625rem;
+}
+
 .h-24{
   height: 6rem;
 }
@@ -1334,6 +1342,14 @@ input[type="search"]::-webkit-search-results-decoration {
   min-height: 100vh;
 }
 
+.w-2{
+  width: 0.5rem;
+}
+
+.w-2\.5{
+  width: 0.625rem;
+}
+
 .w-4{
   width: 1rem;
 }
@@ -1402,6 +1418,12 @@ input[type="search"]::-webkit-search-results-decoration {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.select-none{
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
 .grid-cols-1{
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
@@ -1446,6 +1468,10 @@ input[type="search"]::-webkit-search-results-decoration {
   justify-content: space-between;
 }
 
+.gap-2{
+  gap: 0.5rem;
+}
+
 .gap-3{
   gap: 0.75rem;
 }
@@ -1508,6 +1534,10 @@ input[type="search"]::-webkit-search-results-decoration {
   overflow: hidden;
 }
 
+.overflow-x-auto{
+  overflow-x: auto;
+}
+
 .rounded{
   border-radius: 0.25rem;
 }
@@ -1586,6 +1616,10 @@ input[type="search"]::-webkit-search-results-decoration {
   border-color: rgb(228 228 231 / var(--tw-border-opacity));
 }
 
+.border-zinc-700\/50{
+  border-color: rgb(63 63 70 / 0.5);
+}
+
 .bg-gray-100{
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1596,11 +1630,26 @@ input[type="search"]::-webkit-search-results-decoration {
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
+.bg-green-500{
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+}
+
+.bg-red-500{
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
+
 .bg-white{
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-yellow-500{
+  --tw-bg-opacity: 1;
+  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
+}
+
 .bg-zinc-50{
   --tw-bg-opacity: 1;
   background-color: rgb(250 250 250 / var(--tw-bg-opacity));
@@ -1652,6 +1701,10 @@ input[type="search"]::-webkit-search-results-decoration {
   stroke: #a1a1aa;
 }
 
+.p-4{
+  padding: 1rem;
+}
+
 .p-5{
   padding: 1.25rem;
 }
@@ -1719,10 +1772,18 @@ input[type="search"]::-webkit-search-results-decoration {
   padding-bottom: 1rem;
 }
 
+.pl-4{
+  padding-left: 1rem;
+}
+
 .pt-32{
   padding-top: 8rem;
 }
 
+.pt-4{
+  padding-top: 1rem;
+}
+
 .pt-6{
   padding-top: 1.5rem;
 }
@@ -1836,6 +1897,11 @@ input[type="search"]::-webkit-search-results-decoration {
   color: transparent;
 }
 
+.text-white{
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 .text-zinc-100{
   --tw-text-opacity: 1;
   color: rgb(244 244 245 / var(--tw-text-opacity));
@@ -1861,6 +1927,11 @@ input[type="search"]::-webkit-search-results-decoration {
   color: rgb(82 82 91 / var(--tw-text-opacity));
 }
 
+.text-zinc-800{
+  --tw-text-opacity: 1;
+  color: rgb(39 39 42 / var(--tw-text-opacity));
+}
+
 .text-zinc-900{
   --tw-text-opacity: 1;
   color: rgb(24 24 27 / var(--tw-text-opacity));
@@ -1887,6 +1958,12 @@ input[type="search"]::-webkit-search-results-decoration {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-lg{
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-sm{
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
@@ -2197,10 +2274,18 @@ input[type="search"]::-webkit-search-results-decoration {
     margin-bottom: calc(0px * var(--tw-space-y-reverse));
   }
 
+  .sm\:p-6{
+    padding: 1.5rem;
+  }
+
   .sm\:px-6{
     padding-left: 1.5rem;
     padding-right: 1.5rem;
   }
+
+  .sm\:text-\[0\.9375rem\]{
+    font-size: 0.9375rem;
+  }
 }
 
 @media (min-width: 768px){
@@ -2212,10 +2297,6 @@ input[type="search"]::-webkit-search-results-decoration {
     margin-bottom: 0px;
   }
 
-  .md\:min-h-\[420px\]{
-    min-height: 420px;
-  }
-
   .md\:max-w-4xl{
     max-width: 56rem;
   }