diff --git a/README.md b/README.md
index 797e328..80dd5ca 100644
--- a/README.md
+++ b/README.md
@@ -337,7 +337,7 @@ Stable `TreeItem.id` — refresh no longer collapses the tree. Rich `MarkdownStr
 ## 📸 What it looks like
 
 <div align="center" markdown="1">
-<img src="media/hero.png" alt="Django ORM Lens sidebar showing an app's models with fields, relations, and Meta options" width="90%" loading="lazy" decoding="async"/>
+<img src="media/screenshot-vscode.png" alt="VS Code with Django ORM Lens: the model tree, ORM diagnostics in views.py and the live ER diagram" width="100%" loading="lazy" decoding="async"/>
 </div>
 
 **Live sample** — real `django-orm-lens er` output, rendered by GitHub right here:
diff --git a/docs/i18n/README.es.md b/docs/i18n/README.es.md
index 3c7338e..2b5fa36 100644
--- a/docs/i18n/README.es.md
+++ b/docs/i18n/README.es.md
@@ -304,7 +304,7 @@ Insignias de `FileDecorationProvider`: `!` roja en FK sin `on_delete`, `~` amari
 ## 📸 Cómo se ve
 
 <div align="center" markdown="1">
-<img src="../../media/hero.png" alt="Barra lateral de Django ORM Lens mostrando los modelos de una aplicación con campos, relaciones y opciones Meta" width="90%"/>
+<img src="../../media/screenshot-vscode.png" alt="VS Code con Django ORM Lens: árbol de modelos, diagnósticos del ORM en views.py y el diagrama ER en vivo" width="100%"/>
 </div>
 
 **Ejemplo en vivo** — salida real de `django-orm-lens er`, renderizada por GitHub aquí mismo:
diff --git a/docs/i18n/README.ru.md b/docs/i18n/README.ru.md
index a3ba743..aaa011a 100644
--- a/docs/i18n/README.ru.md
+++ b/docs/i18n/README.ru.md
@@ -304,7 +304,7 @@ docker run --rm -v "$PWD:/workspace" ghcr.io/frowningdev/django-orm-lens scan --
 ## 📸 Как это выглядит
 
 <div align="center" markdown="1">
-<img src="../../media/hero.png" alt="Django ORM Lens sidebar showing an app's models with fields, relations, and Meta options" width="90%"/>
+<img src="../../media/screenshot-vscode.png" alt="VS Code with Django ORM Lens: the model tree, ORM diagnostics in views.py and the live ER diagram" width="100%"/>
 </div>
 
 **Живой пример** — настоящий вывод `django-orm-lens er`, GitHub рендерит его прямо здесь:
diff --git a/docs/i18n/README.zh.md b/docs/i18n/README.zh.md
index 861ed3c..5872ce4 100644
--- a/docs/i18n/README.zh.md
+++ b/docs/i18n/README.zh.md
@@ -304,7 +304,7 @@ FK 上的 `.filter(field=?)` 自动追加 `.select_related(...)`，`.annotate(po
 ## 📸 界面预览
 
 <div align="center" markdown="1">
-<img src="../../media/hero.png" alt="Django ORM Lens sidebar showing an app's models with fields, relations, and Meta options" width="90%"/>
+<img src="../../media/screenshot-vscode.png" alt="VS Code with Django ORM Lens: the model tree, ORM diagnostics in views.py and the live ER diagram" width="100%"/>
 </div>
 
 **实时示例** — `django-orm-lens er` 的真实输出，GitHub 会直接在此渲染：
diff --git a/media/hero.png b/media/hero.png
index e46b131..caad3e4 100644
Binary files a/media/hero.png and b/media/hero.png differ
diff --git a/media/screenshot-vscode.png b/media/screenshot-vscode.png
new file mode 100644
index 0000000..4a50b00
Binary files /dev/null and b/media/screenshot-vscode.png differ