diff --git a/README.es-419.md b/README.es-419.md
index 4bc906d36f..9e08b7f8ad 100644
--- a/README.es-419.md
+++ b/README.es-419.md
@@ -1,4 +1,4 @@
-<!-- source: README.md sha256:ddc9cd7b5aea -->
+<!-- source: README.md sha256:ed346d675bdf -->
 # Codewhale
 
 Un agente de código para tu terminal. Funciona con cualquier modelo; los
diff --git a/README.ja-JP.md b/README.ja-JP.md
index c132a45cf0..74f7ae6191 100644
--- a/README.ja-JP.md
+++ b/README.ja-JP.md
@@ -1,4 +1,4 @@
-<!-- source: README.md sha256:ddc9cd7b5aea -->
+<!-- source: README.md sha256:ed346d675bdf -->
 # Codewhale
 
 ターミナルで動くコーディングエージェント。あらゆるモデルで動作し、オープンモデルを最優先します。
diff --git a/README.ko-KR.md b/README.ko-KR.md
index a083941144..cfc8b59ca3 100644
--- a/README.ko-KR.md
+++ b/README.ko-KR.md
@@ -1,4 +1,4 @@
-<!-- source: README.md sha256:ddc9cd7b5aea -->
+<!-- source: README.md sha256:ed346d675bdf -->
 # Codewhale
 
 터미널에서 쓰는 코딩 에이전트입니다. 어떤 모델과도 동작하며, 오픈 모델을
diff --git a/README.md b/README.md
index 41aa53d175..cbf38068b4 100644
--- a/README.md
+++ b/README.md
@@ -17,7 +17,7 @@ the same runtime and tools.
 [![crates.io](https://img.shields.io/crates/v/codewhale-cli?label=crates.io)](https://crates.io/crates/codewhale-cli)
 [![npm](https://img.shields.io/npm/v/codewhale?label=npm)](https://www.npmjs.com/package/codewhale)
 
-![Codewhale running in a terminal](assets/screenshot.png)
+![Codewhale TUI idle screen with GLM-5.2 selected through Z.ai](assets/screenshot.png)
 
 ## Install
 
diff --git a/README.pt-BR.md b/README.pt-BR.md
index ba17d4ebf6..a0ff971f31 100644
--- a/README.pt-BR.md
+++ b/README.pt-BR.md
@@ -1,4 +1,4 @@
-<!-- source: README.md sha256:ddc9cd7b5aea -->
+<!-- source: README.md sha256:ed346d675bdf -->
 # Codewhale
 
 Um agente de código para o seu terminal. Funciona com qualquer modelo; modelos
diff --git a/README.vi.md b/README.vi.md
index ff9f1e3cd4..dc1512efe9 100644
--- a/README.vi.md
+++ b/README.vi.md
@@ -1,4 +1,4 @@
-<!-- source: README.md sha256:ddc9cd7b5aea -->
+<!-- source: README.md sha256:ed346d675bdf -->
 # Codewhale
 
 Một coding agent cho terminal của bạn. Hoạt động với mọi model; ưu tiên model mở.
diff --git a/README.zh-CN.md b/README.zh-CN.md
index f67ab1a671..6906bd1230 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -1,4 +1,4 @@
-<!-- source: README.md sha256:ddc9cd7b5aea -->
+<!-- source: README.md sha256:ed346d675bdf -->
 # Codewhale
 
 一个运行在终端里的编程智能体。适配任意模型；开放模型优先。
diff --git a/assets/screenshot.png b/assets/screenshot.png
index c72d148175..371d40a75e 100644
Binary files a/assets/screenshot.png and b/assets/screenshot.png differ
diff --git a/web/app/[locale]/page.tsx b/web/app/[locale]/page.tsx
index 8be38aa36c..aee34a4ca7 100644
--- a/web/app/[locale]/page.tsx
+++ b/web/app/[locale]/page.tsx
@@ -1,3 +1,4 @@
+import Image from "next/image";
 import Link from "next/link";
 import { InstallCodeBlock } from "@/components/install-code-block";
 import { Whale } from "@/components/whale";
@@ -113,6 +114,17 @@ export default async function HomePage({ params }: { params: Promise<{ locale: s
             </Link>
           </aside>
         </div>
+
+        <figure className="portal-container portal-product-shot">
+          <Image
+            src="/codewhale-tui.png"
+            alt="Codewhale TUI idle screen with GLM-5.2 selected through Z.ai"
+            width={852}
+            height={453}
+            sizes="(max-width: 760px) calc(100vw - 2rem), (max-width: 852px) calc(100vw - 2.5rem), 852px"
+            priority
+          />
+        </figure>
       </section>
 
       <section className="portal-section">
diff --git a/web/app/globals.css b/web/app/globals.css
index 8eb3333803..6387da3898 100644
--- a/web/app/globals.css
+++ b/web/app/globals.css
@@ -547,6 +547,22 @@ a.body-link:hover { background-size: 100% 6px; color: var(--ink); }
   padding-block: clamp(3.25rem, 6vw, 4.75rem);
 }
 
+.portal-product-shot {
+  position: relative;
+  width: min(100% - 2.5rem, 53.25rem);
+  margin-top: clamp(-1rem, -2vw, -0.5rem);
+  margin-bottom: clamp(2.5rem, 6vw, 4.75rem);
+}
+
+.portal-product-shot img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border: 1px solid rgba(209, 235, 244, 0.26);
+  border-radius: 8px;
+  box-shadow: 0 1.5rem 3.75rem rgba(5, 12, 24, 0.2);
+}
+
 .portal-hero-copy {
   max-width: 42rem;
 }
diff --git a/web/lib/public-copy.test.ts b/web/lib/public-copy.test.ts
index 16800bba6d..65ab5c0b43 100644
--- a/web/lib/public-copy.test.ts
+++ b/web/lib/public-copy.test.ts
@@ -8,6 +8,21 @@ function pageSource(path: string): string {
 }
 
 describe("public website copy contracts", () => {
+  it("keeps the README and website product screenshot synchronized and accessible", () => {
+    const home = pageSource("page.tsx");
+    const readme = readFileSync(new URL("../../README.md", import.meta.url), "utf8");
+    const readmeShot = readFileSync(new URL("../../assets/screenshot.png", import.meta.url));
+    const websiteShot = readFileSync(
+      new URL("../public/codewhale-tui.png", import.meta.url),
+    );
+    const alt = "Codewhale TUI idle screen with GLM-5.2 selected through Z.ai";
+
+    expect(readme).toContain(`![${alt}](assets/screenshot.png)`);
+    expect(home).toContain(`src="/codewhale-tui.png"`);
+    expect(home).toContain(`alt="${alt}"`);
+    expect(websiteShot.equals(readmeShot)).toBe(true);
+  });
+
   it("keeps the docs hub on the compact ocean portal instead of the old almanac treatment", () => {
     const layout = pageSource("docs/layout.tsx");
     const search = readFileSync(new URL("../components/docs-search.tsx", import.meta.url), "utf8");
diff --git a/web/public/codewhale-tui.png b/web/public/codewhale-tui.png
new file mode 100644
index 0000000000..371d40a75e
Binary files /dev/null and b/web/public/codewhale-tui.png differ