diff --git a/docs-site/index.html b/docs-site/index.html
index 2e70438..da3b0cf 100644
--- a/docs-site/index.html
+++ b/docs-site/index.html
@@ -267,6 +267,27 @@ footer a{margin:0 8px}
   </div>
 </section>
 
+<section id="screenshots">
+  <div class="wrap">
+    <h2>See it in action</h2>
+    <p class="muted" style="margin-bottom:18px">Connect to your server, chat with the agent, review every diff before it lands — all from your phone.</p>
+    <div style="display:flex;gap:16px;flex-wrap:wrap;justify-content:center">
+      <figure style="margin:0;flex:1 1 240px;max-width:300px">
+        <img src="screenshots/01.png" alt="OpenCode Mobile connection screen: add a server URL or connect via Cloudflare Tunnel or ngrok" width="1080" height="2400" loading="lazy" style="width:100%;height:auto;border-radius:14px;border:1px solid rgba(255,255,255,.08)" />
+        <figcaption class="muted" style="text-align:center;font-size:.9rem;margin-top:8px">Connect to your own server</figcaption>
+      </figure>
+      <figure style="margin:0;flex:1 1 240px;max-width:300px">
+        <img src="screenshots/02.png" alt="OpenCode Mobile streaming chat with the AI agent and an inline approve/reject tool-call prompt" width="1080" height="2400" loading="lazy" style="width:100%;height:auto;border-radius:14px;border:1px solid rgba(255,255,255,.08)" />
+        <figcaption class="muted" style="text-align:center;font-size:.9rem;margin-top:8px">Stream replies, approve tool calls</figcaption>
+      </figure>
+      <figure style="margin:0;flex:1 1 240px;max-width:300px">
+        <img src="screenshots/03.png" alt="OpenCode Mobile diff viewer showing added and removed lines for a file the agent changed" width="1080" height="2400" loading="lazy" style="width:100%;height:auto;border-radius:14px;border:1px solid rgba(255,255,255,.08)" />
+        <figcaption class="muted" style="text-align:center;font-size:.9rem;margin-top:8px">Review every diff before it lands</figcaption>
+      </figure>
+    </div>
+  </div>
+</section>
+
 <section id="features">
   <div class="wrap">
     <h2>Key features</h2>
diff --git a/docs-site/screenshots/01.png b/docs-site/screenshots/01.png
new file mode 100644
index 0000000..5888bd1
Binary files /dev/null and b/docs-site/screenshots/01.png differ
diff --git a/docs-site/screenshots/02.png b/docs-site/screenshots/02.png
new file mode 100644
index 0000000..4579cff
Binary files /dev/null and b/docs-site/screenshots/02.png differ
diff --git a/docs-site/screenshots/03.png b/docs-site/screenshots/03.png
new file mode 100644
index 0000000..da74685
Binary files /dev/null and b/docs-site/screenshots/03.png differ