diff --git a/README.md b/README.md
index f21aeb51217..3e4b0598ad8 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,21 @@
 <img referrerpolicy="no-referrer-when-downgrade" src="https://static.scarf.sh/a.png?x-pxid=be2d8a11-9712-4c1d-9963-580b2d4fb133" />
 
 <div align="center">
-  <img src="./media/header_query.png" alt="TanStack Query" />
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/query.png?theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/query.png"
+    />
+    <img
+      src="https://tanstack.com/api/readme/query.png"
+      alt="TanStack Query"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/media/header_query.png b/media/header_query.png
deleted file mode 100644
index 96fe6e78fae..00000000000
Binary files a/media/header_query.png and /dev/null differ
diff --git a/packages/angular-query-experimental/README.md b/packages/angular-query-experimental/README.md
index 6ed2dfa05a8..53fea66deba 100644
--- a/packages/angular-query-experimental/README.md
+++ b/packages/angular-query-experimental/README.md
@@ -1,4 +1,18 @@
-![TanStack Query Header](https://github.com/TanStack/query/raw/main/media/repo-header.png)
+<picture>
+  <source
+    media="(prefers-color-scheme: dark)"
+    srcset="https://tanstack.com/api/readme/query.png?framework=angular&theme=dark"
+  />
+  <source
+    media="(prefers-color-scheme: light)"
+    srcset="https://tanstack.com/api/readme/query.png?framework=angular"
+  />
+  <img
+    src="https://tanstack.com/api/readme/query.png?framework=angular"
+    alt="TanStack Angular Query"
+    width="900"
+  />
+</picture>
 
 [![npm version](https://img.shields.io/npm/v/@tanstack/angular-query-experimental)](https://www.npmjs.com/package/@tanstack/angular-query-experimental)
 [![npm license](https://img.shields.io/npm/l/@tanstack/angular-query-experimental)](https://github.com/TanStack/query/blob/main/LICENSE)
diff --git a/packages/lit-query/README.md b/packages/lit-query/README.md
index c439074d806..49e903ab015 100644
--- a/packages/lit-query/README.md
+++ b/packages/lit-query/README.md
@@ -1,3 +1,20 @@
+<div align="center">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/query.png?framework=lit&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/query.png?framework=lit"
+    />
+    <img
+      src="https://tanstack.com/api/readme/query.png?framework=lit"
+      alt="TanStack Lit Query"
+      width="900"
+    />
+  </picture>
+</div>
 # @tanstack/lit-query
 
 Lit adapter for `@tanstack/query-core` using Lit reactive controllers.
diff --git a/packages/preact-query/README.md b/packages/preact-query/README.md
index e9deefa8582..8c105035a3a 100644
--- a/packages/preact-query/README.md
+++ b/packages/preact-query/README.md
@@ -1,6 +1,20 @@
 <img src="https://static.scarf.sh/a.png?x-pxid=be2d8a11-9712-4c1d-9963-580b2d4fb133" />
 
-![TanStack Query Header](https://github.com/TanStack/query/raw/main/media/repo-header.png)
+<picture>
+  <source
+    media="(prefers-color-scheme: dark)"
+    srcset="https://tanstack.com/api/readme/query.png?framework=preact&theme=dark"
+  />
+  <source
+    media="(prefers-color-scheme: light)"
+    srcset="https://tanstack.com/api/readme/query.png?framework=preact"
+  />
+  <img
+    src="https://tanstack.com/api/readme/query.png?framework=preact"
+    alt="TanStack Preact Query"
+    width="900"
+  />
+</picture>
 
 Hooks for fetching, caching and updating asynchronous data in Preact
 
diff --git a/packages/react-query/README.md b/packages/react-query/README.md
index 96bffea2f5d..fa10577496c 100644
--- a/packages/react-query/README.md
+++ b/packages/react-query/README.md
@@ -1,6 +1,20 @@
 <img src="https://static.scarf.sh/a.png?x-pxid=be2d8a11-9712-4c1d-9963-580b2d4fb133" />
 
-![TanStack Query Header](https://github.com/TanStack/query/raw/main/media/repo-header.png)
+<picture>
+  <source
+    media="(prefers-color-scheme: dark)"
+    srcset="https://tanstack.com/api/readme/query.png?framework=react&theme=dark"
+  />
+  <source
+    media="(prefers-color-scheme: light)"
+    srcset="https://tanstack.com/api/readme/query.png?framework=react"
+  />
+  <img
+    src="https://tanstack.com/api/readme/query.png?framework=react"
+    alt="TanStack React Query"
+    width="900"
+  />
+</picture>
 
 Hooks for fetching, caching and updating asynchronous data in React
 
diff --git a/packages/solid-query/README.md b/packages/solid-query/README.md
index 085229258f2..1f4e5d4f3fe 100644
--- a/packages/solid-query/README.md
+++ b/packages/solid-query/README.md
@@ -1,6 +1,20 @@
 <img src="https://static.scarf.sh/a.png?x-pxid=be2d8a11-9712-4c1d-9963-580b2d4fb133" />
 
-![TanStack Query Header](https://github.com/TanStack/query/raw/main/media/repo-header.png)
+<picture>
+  <source
+    media="(prefers-color-scheme: dark)"
+    srcset="https://tanstack.com/api/readme/query.png?framework=solid&theme=dark"
+  />
+  <source
+    media="(prefers-color-scheme: light)"
+    srcset="https://tanstack.com/api/readme/query.png?framework=solid"
+  />
+  <img
+    src="https://tanstack.com/api/readme/query.png?framework=solid"
+    alt="TanStack Solid Query"
+    width="900"
+  />
+</picture>
 
 Hooks for fetching, caching and updating asynchronous data in Solid
 
diff --git a/packages/vue-query/README.md b/packages/vue-query/README.md
index e2d06dbdb85..bc30409f820 100644
--- a/packages/vue-query/README.md
+++ b/packages/vue-query/README.md
@@ -1,3 +1,20 @@
+<div align="center">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/query.png?framework=vue&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/query.png?framework=vue"
+    />
+    <img
+      src="https://tanstack.com/api/readme/query.png?framework=vue"
+      alt="TanStack Vue Query"
+      width="900"
+    />
+  </picture>
+</div>
 [![Vue Query logo](https://raw.githubusercontent.com/TanStack/query/main/packages/vue-query/media/vue-query.png)](https://github.com/TanStack/query/tree/main/packages/vue-query)
 
 [![npm version](https://img.shields.io/npm/v/@tanstack/vue-query)](https://www.npmjs.com/package/@tanstack/vue-query)