diff --git a/index.mdx b/index.mdx
index 4769ead..3471b60 100644
--- a/index.mdx
+++ b/index.mdx
@@ -42,7 +42,8 @@ import { CopyPromptButton } from '/snippets/copy-prompt-button.jsx';
   <h3 style={{ margin: 0, fontSize: '1.5rem', fontWeight: 600 }}>fast setup</h3>
   <div className="tinker-box-row">
     <div style={{ flexShrink: 0 }}>
-      <img src="/images/tinker-bot.svg" alt="" style={{ width: '146px', height: 'auto' }} />
+      <img src="/images/tinker-bot.svg" alt="" className="block dark:hidden" style={{ width: '146px', height: 'auto' }} />
+      <img src="/images/tinker-bot-dark.svg" alt="" className="hidden dark:block" style={{ width: '146px', height: 'auto' }} />
     </div>
     <div className="tinker-box-content">
       <p style={{ margin: 0, fontSize: '0.9375rem', lineHeight: 1.6, opacity: 0.8 }}>
diff --git a/style.css b/style.css
index 0c5e88f..6df2f67 100644
--- a/style.css
+++ b/style.css
@@ -216,9 +216,6 @@ html.dark {
   --btn-border: #EDEEF0;
 }
 
-/* hero bot dark recolor */
-html.dark img[src*="/images/tinker-bot.svg"] { content: url("/images/tinker-bot-dark.svg"); }
-
 /* warning callout — selector depends on mintlify's yellow-* classes; renames silently break this */
 html.dark .callout[class*="yellow"] {
   background-color: rgba(237, 238, 240, 0.03) !important;