diff --git a/README.md b/README.md
index 3b549bd99..4c9c5c8e6 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="https://raw.githubusercontent.com/TanStack/ai/main/media/header_ai.png" alt="TanStack AI" />
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/ai.png?theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/ai.png"
+    />
+    <img
+      src="https://tanstack.com/api/readme/ai.png"
+      alt="TanStack AI"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/media/header_ai.png b/media/header_ai.png
deleted file mode 100644
index c8c5946c8..000000000
Binary files a/media/header_ai.png and /dev/null differ
diff --git a/packages/ai-angular/README.md b/packages/ai-angular/README.md
index 660467ff8..613697141 100644
--- a/packages/ai-angular/README.md
+++ b/packages/ai-angular/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="https://raw.githubusercontent.com/TanStack/ai/main/media/header_ai.png" alt="TanStack AI" />
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/ai.png?framework=angular&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/ai.png?framework=angular"
+    />
+    <img
+      src="https://tanstack.com/api/readme/ai.png?framework=angular"
+      alt="TanStack Angular AI"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/ai-client/README.md b/packages/ai-client/README.md
index 7b2ac19aa..a89696b18 100644
--- a/packages/ai-client/README.md
+++ b/packages/ai-client/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="https://raw.githubusercontent.com/TanStack/ai/main/media/header_ai.png" alt="TanStack AI" />
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/ai.png?theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/ai.png"
+    />
+    <img
+      src="https://tanstack.com/api/readme/ai.png"
+      alt="TanStack AI"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/ai-devtools/README.md b/packages/ai-devtools/README.md
index 7b2ac19aa..a89696b18 100644
--- a/packages/ai-devtools/README.md
+++ b/packages/ai-devtools/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="https://raw.githubusercontent.com/TanStack/ai/main/media/header_ai.png" alt="TanStack AI" />
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/ai.png?theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/ai.png"
+    />
+    <img
+      src="https://tanstack.com/api/readme/ai.png"
+      alt="TanStack AI"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/ai-gemini/README.md b/packages/ai-gemini/README.md
index 7b2ac19aa..a89696b18 100644
--- a/packages/ai-gemini/README.md
+++ b/packages/ai-gemini/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="https://raw.githubusercontent.com/TanStack/ai/main/media/header_ai.png" alt="TanStack AI" />
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/ai.png?theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/ai.png"
+    />
+    <img
+      src="https://tanstack.com/api/readme/ai.png"
+      alt="TanStack AI"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/ai-ollama/README.md b/packages/ai-ollama/README.md
index 7b2ac19aa..a89696b18 100644
--- a/packages/ai-ollama/README.md
+++ b/packages/ai-ollama/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="https://raw.githubusercontent.com/TanStack/ai/main/media/header_ai.png" alt="TanStack AI" />
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/ai.png?theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/ai.png"
+    />
+    <img
+      src="https://tanstack.com/api/readme/ai.png"
+      alt="TanStack AI"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/ai-openai/README.md b/packages/ai-openai/README.md
index 7b2ac19aa..a89696b18 100644
--- a/packages/ai-openai/README.md
+++ b/packages/ai-openai/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="https://raw.githubusercontent.com/TanStack/ai/main/media/header_ai.png" alt="TanStack AI" />
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/ai.png?theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/ai.png"
+    />
+    <img
+      src="https://tanstack.com/api/readme/ai.png"
+      alt="TanStack AI"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/ai-openrouter/README.md b/packages/ai-openrouter/README.md
index 7b2ac19aa..a89696b18 100644
--- a/packages/ai-openrouter/README.md
+++ b/packages/ai-openrouter/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="https://raw.githubusercontent.com/TanStack/ai/main/media/header_ai.png" alt="TanStack AI" />
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/ai.png?theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/ai.png"
+    />
+    <img
+      src="https://tanstack.com/api/readme/ai.png"
+      alt="TanStack AI"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/ai-preact/README.md b/packages/ai-preact/README.md
index 7b2ac19aa..cc5235a86 100644
--- a/packages/ai-preact/README.md
+++ b/packages/ai-preact/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="https://raw.githubusercontent.com/TanStack/ai/main/media/header_ai.png" alt="TanStack AI" />
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/ai.png?framework=preact&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/ai.png?framework=preact"
+    />
+    <img
+      src="https://tanstack.com/api/readme/ai.png?framework=preact"
+      alt="TanStack Preact AI"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/ai-react-ui/README.md b/packages/ai-react-ui/README.md
index 7b2ac19aa..b0e22bf76 100644
--- a/packages/ai-react-ui/README.md
+++ b/packages/ai-react-ui/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="https://raw.githubusercontent.com/TanStack/ai/main/media/header_ai.png" alt="TanStack AI" />
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/ai.png?framework=react&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/ai.png?framework=react"
+    />
+    <img
+      src="https://tanstack.com/api/readme/ai.png?framework=react"
+      alt="TanStack React AI"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/ai-react/README.md b/packages/ai-react/README.md
index 7b2ac19aa..b0e22bf76 100644
--- a/packages/ai-react/README.md
+++ b/packages/ai-react/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="https://raw.githubusercontent.com/TanStack/ai/main/media/header_ai.png" alt="TanStack AI" />
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/ai.png?framework=react&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/ai.png?framework=react"
+    />
+    <img
+      src="https://tanstack.com/api/readme/ai.png?framework=react"
+      alt="TanStack React AI"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/ai-solid-ui/README.md b/packages/ai-solid-ui/README.md
index 7b2ac19aa..6f4cdd890 100644
--- a/packages/ai-solid-ui/README.md
+++ b/packages/ai-solid-ui/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="https://raw.githubusercontent.com/TanStack/ai/main/media/header_ai.png" alt="TanStack AI" />
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/ai.png?framework=solid&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/ai.png?framework=solid"
+    />
+    <img
+      src="https://tanstack.com/api/readme/ai.png?framework=solid"
+      alt="TanStack Solid AI"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/ai-vue-ui/README.md b/packages/ai-vue-ui/README.md
index 7b2ac19aa..e6e825999 100644
--- a/packages/ai-vue-ui/README.md
+++ b/packages/ai-vue-ui/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="https://raw.githubusercontent.com/TanStack/ai/main/media/header_ai.png" alt="TanStack AI" />
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/ai.png?framework=vue&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/ai.png?framework=vue"
+    />
+    <img
+      src="https://tanstack.com/api/readme/ai.png?framework=vue"
+      alt="TanStack Vue AI"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/ai-vue/README.md b/packages/ai-vue/README.md
index 7b2ac19aa..e6e825999 100644
--- a/packages/ai-vue/README.md
+++ b/packages/ai-vue/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="https://raw.githubusercontent.com/TanStack/ai/main/media/header_ai.png" alt="TanStack AI" />
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/ai.png?framework=vue&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/ai.png?framework=vue"
+    />
+    <img
+      src="https://tanstack.com/api/readme/ai.png?framework=vue"
+      alt="TanStack Vue AI"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/ai/README.md b/packages/ai/README.md
index 7b2ac19aa..a89696b18 100644
--- a/packages/ai/README.md
+++ b/packages/ai/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="https://raw.githubusercontent.com/TanStack/ai/main/media/header_ai.png" alt="TanStack AI" />
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/ai.png?theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/ai.png"
+    />
+    <img
+      src="https://tanstack.com/api/readme/ai.png"
+      alt="TanStack AI"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/preact-ai-devtools/README.md b/packages/preact-ai-devtools/README.md
index 7b2ac19aa..cc5235a86 100644
--- a/packages/preact-ai-devtools/README.md
+++ b/packages/preact-ai-devtools/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="https://raw.githubusercontent.com/TanStack/ai/main/media/header_ai.png" alt="TanStack AI" />
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/ai.png?framework=preact&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/ai.png?framework=preact"
+    />
+    <img
+      src="https://tanstack.com/api/readme/ai.png?framework=preact"
+      alt="TanStack Preact AI"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/react-ai-devtools/README.md b/packages/react-ai-devtools/README.md
index 7b2ac19aa..b0e22bf76 100644
--- a/packages/react-ai-devtools/README.md
+++ b/packages/react-ai-devtools/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="https://raw.githubusercontent.com/TanStack/ai/main/media/header_ai.png" alt="TanStack AI" />
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/ai.png?framework=react&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/ai.png?framework=react"
+    />
+    <img
+      src="https://tanstack.com/api/readme/ai.png?framework=react"
+      alt="TanStack React AI"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/solid-ai-devtools/README.md b/packages/solid-ai-devtools/README.md
index 7b2ac19aa..6f4cdd890 100644
--- a/packages/solid-ai-devtools/README.md
+++ b/packages/solid-ai-devtools/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="https://raw.githubusercontent.com/TanStack/ai/main/media/header_ai.png" alt="TanStack AI" />
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/ai.png?framework=solid&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/ai.png?framework=solid"
+    />
+    <img
+      src="https://tanstack.com/api/readme/ai.png?framework=solid"
+      alt="TanStack Solid AI"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />