diff --git a/docs/src/components/Homepage/hero.js b/docs/src/components/Homepage/hero.js
index 92da08ea9..f6cdf58e3 100644
--- a/docs/src/components/Homepage/hero.js
+++ b/docs/src/components/Homepage/hero.js
@@ -79,8 +79,8 @@ export default function HomepageHero() {
               src={
                 colorMode === "dark"
                   ? // TODO replace with darkmode image
-                    require("@site/static/img/desktop-llm-chat.png").default
-                  : require("@site/static/img/desktop-llm-chat.png").default
+                    require("@site/static/img/desktop-llm-chat-dark.png").default
+                  : require("@site/static/img/desktop-llm-chat-light.png").default
               }
               alt="App screenshot"
               width={2432}
diff --git a/docs/static/img/desktop-llm-chat-dark.png b/docs/static/img/desktop-llm-chat-dark.png
new file mode 100644
index 000000000..ae682ebc8
Binary files /dev/null and b/docs/static/img/desktop-llm-chat-dark.png differ
diff --git a/docs/static/img/desktop-llm-chat-light.png b/docs/static/img/desktop-llm-chat-light.png
new file mode 100644
index 000000000..8644cb369
Binary files /dev/null and b/docs/static/img/desktop-llm-chat-light.png differ