diff --git a/docs-site/public/hero-kolibri.png b/docs-site/public/hero-kolibri.png
new file mode 100644
index 0000000..f42fa3d
Binary files /dev/null and b/docs-site/public/hero-kolibri.png differ
diff --git a/docs-site/src/content/docs/index.mdx b/docs-site/src/content/docs/index.mdx
index e79bfbe..d693570 100644
--- a/docs-site/src/content/docs/index.mdx
+++ b/docs-site/src/content/docs/index.mdx
@@ -4,6 +4,26 @@ description: An MCP server for QEMU. Launch and drive virtual machines, run disp
 template: splash
 hero:
   tagline: Give an agent a hypervisor. Launch VMs, watch their screens, type into them, snapshot them mid-flight, and throw them away.
+  image:
+    html: |
+      <figure class="vm-frame">
+        <div class="vm-frame__bar">
+          <span class="vm-frame__dots" aria-hidden="true"><i></i><i></i><i></i></span>
+          <span class="vm-frame__name">kolibri</span>
+          <span class="vm-frame__badge">running</span>
+        </div>
+        <img
+          src="/hero-kolibri.png"
+          width="1024"
+          height="768"
+          alt="The KolibriOS desktop running in a virtual machine, with a game of Tetris in progress, captured from the guest framebuffer."
+          loading="eager"
+          decoding="async"
+        />
+        <figcaption class="vm-frame__caption">
+          vm_screenshot(name="kolibri") &rarr; PNG
+        </figcaption>
+      </figure>
   actions:
     - text: Start the tutorial
       link: /tutorial/first-sandbox/
diff --git a/docs-site/src/styles/theme.css b/docs-site/src/styles/theme.css
index 33069b1..78ca492 100644
--- a/docs-site/src/styles/theme.css
+++ b/docs-site/src/styles/theme.css
@@ -39,6 +39,72 @@
   --sl-color-black: #ffffff;
 }
 
+/* The hero image is a real capture from a running guest, so it is framed as
+ * a screen rather than floated as artwork. The caption names the call that
+ * produced it, which is the whole point of the picture. */
+.vm-frame {
+  margin: 0;
+  border: 1px solid var(--sl-color-gray-5);
+  border-radius: 0.6rem;
+  overflow: hidden;
+  background: var(--sl-color-black);
+  box-shadow: 0 1rem 3rem -1rem rgb(0 0 0 / 0.65);
+}
+
+.vm-frame__bar {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--sl-color-gray-6);
+  border-bottom: 1px solid var(--sl-color-gray-5);
+  font-family: var(--sl-font-mono);
+  font-size: 0.8rem;
+}
+
+.vm-frame__dots {
+  display: inline-flex;
+  gap: 0.3rem;
+}
+
+.vm-frame__dots i {
+  width: 0.55rem;
+  height: 0.55rem;
+  border-radius: 50%;
+  background: var(--sl-color-gray-4);
+}
+
+.vm-frame__dots i:first-child {
+  background: var(--sl-color-accent);
+}
+
+.vm-frame__name {
+  color: var(--sl-color-gray-2);
+}
+
+.vm-frame__badge {
+  margin-inline-start: auto;
+  color: var(--sl-color-accent-high);
+  font-size: 0.7rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.vm-frame img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.vm-frame__caption {
+  padding: 0.5rem 0.75rem;
+  background: var(--sl-color-gray-6);
+  border-top: 1px solid var(--sl-color-gray-5);
+  color: var(--sl-color-gray-3);
+  font-family: var(--sl-font-mono);
+  font-size: 0.75rem;
+}
+
 /* Starlight's staggered CardGrid rotates card icon backgrounds through a
  * built-in palette that includes purple and magenta. Hold the whole grid on
  * the accent so the page reads as one thing. */