diff --git a/README.md b/README.md
index f8717eefe..5fbe334f4 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_pacer.png" >
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/pacer.png?theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/pacer.png"
+    />
+    <img
+      src="https://tanstack.com/api/readme/pacer.png"
+      alt="TanStack Pacer"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/media/header_pacer.png b/media/header_pacer.png
deleted file mode 100644
index 5fdcff10f..000000000
Binary files a/media/header_pacer.png and /dev/null differ
diff --git a/packages/angular-pacer/README.md b/packages/angular-pacer/README.md
index f8717eefe..5fbe334f4 100644
--- a/packages/angular-pacer/README.md
+++ b/packages/angular-pacer/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_pacer.png" >
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/pacer.png?theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/pacer.png"
+    />
+    <img
+      src="https://tanstack.com/api/readme/pacer.png"
+      alt="TanStack Pacer"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/pacer-devtools/README.md b/packages/pacer-devtools/README.md
index f8717eefe..5fbe334f4 100644
--- a/packages/pacer-devtools/README.md
+++ b/packages/pacer-devtools/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_pacer.png" >
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/pacer.png?theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/pacer.png"
+    />
+    <img
+      src="https://tanstack.com/api/readme/pacer.png"
+      alt="TanStack Pacer"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/pacer-lite/README.md b/packages/pacer-lite/README.md
index f8717eefe..5fbe334f4 100644
--- a/packages/pacer-lite/README.md
+++ b/packages/pacer-lite/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_pacer.png" >
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/pacer.png?theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/pacer.png"
+    />
+    <img
+      src="https://tanstack.com/api/readme/pacer.png"
+      alt="TanStack Pacer"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/pacer/README.md b/packages/pacer/README.md
index f8717eefe..5fbe334f4 100644
--- a/packages/pacer/README.md
+++ b/packages/pacer/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_pacer.png" >
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/pacer.png?theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/pacer.png"
+    />
+    <img
+      src="https://tanstack.com/api/readme/pacer.png"
+      alt="TanStack Pacer"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/preact-pacer-devtools/README.md b/packages/preact-pacer-devtools/README.md
index f8717eefe..5fbe334f4 100644
--- a/packages/preact-pacer-devtools/README.md
+++ b/packages/preact-pacer-devtools/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_pacer.png" >
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/pacer.png?theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/pacer.png"
+    />
+    <img
+      src="https://tanstack.com/api/readme/pacer.png"
+      alt="TanStack Pacer"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/preact-pacer/README.md b/packages/preact-pacer/README.md
index 9ddf25484..8d46b1f9c 100644
--- a/packages/preact-pacer/README.md
+++ b/packages/preact-pacer/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_pacer.png" >
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/pacer.png?framework=preact&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/pacer.png?framework=preact"
+    />
+    <img
+      src="https://tanstack.com/api/readme/pacer.png?framework=preact"
+      alt="TanStack Preact Pacer"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/react-pacer-devtools/README.md b/packages/react-pacer-devtools/README.md
index f8717eefe..5fbe334f4 100644
--- a/packages/react-pacer-devtools/README.md
+++ b/packages/react-pacer-devtools/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_pacer.png" >
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/pacer.png?theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/pacer.png"
+    />
+    <img
+      src="https://tanstack.com/api/readme/pacer.png"
+      alt="TanStack Pacer"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/react-pacer/README.md b/packages/react-pacer/README.md
index f8717eefe..5fbe334f4 100644
--- a/packages/react-pacer/README.md
+++ b/packages/react-pacer/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_pacer.png" >
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/pacer.png?theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/pacer.png"
+    />
+    <img
+      src="https://tanstack.com/api/readme/pacer.png"
+      alt="TanStack Pacer"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/solid-pacer-devtools/README.md b/packages/solid-pacer-devtools/README.md
index f8717eefe..5fbe334f4 100644
--- a/packages/solid-pacer-devtools/README.md
+++ b/packages/solid-pacer-devtools/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_pacer.png" >
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/pacer.png?theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/pacer.png"
+    />
+    <img
+      src="https://tanstack.com/api/readme/pacer.png"
+      alt="TanStack Pacer"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/solid-pacer/README.md b/packages/solid-pacer/README.md
index f8717eefe..5fbe334f4 100644
--- a/packages/solid-pacer/README.md
+++ b/packages/solid-pacer/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_pacer.png" >
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/pacer.png?theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/pacer.png"
+    />
+    <img
+      src="https://tanstack.com/api/readme/pacer.png"
+      alt="TanStack Pacer"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />