diff --git a/README.md b/README.md
index 5e460f451..28439afa2 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_virtual.png" alt="Tanstack Virtual">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/virtual.png?theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/virtual.png"
+    />
+    <img
+      src="https://tanstack.com/api/readme/virtual.png"
+      alt="TanStack Virtual"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/media/header_virtual.png b/media/header_virtual.png
deleted file mode 100644
index ae7c31746..000000000
Binary files a/media/header_virtual.png and /dev/null differ
diff --git a/packages/angular-virtual/README.md b/packages/angular-virtual/README.md
index a479bced6..2b4119a16 100644
--- a/packages/angular-virtual/README.md
+++ b/packages/angular-virtual/README.md
@@ -1,3 +1,20 @@
+<div align="center">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/virtual.png?framework=angular&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/virtual.png?framework=angular"
+    />
+    <img
+      src="https://tanstack.com/api/readme/virtual.png?framework=angular"
+      alt="TanStack Angular Virtual"
+      width="900"
+    />
+  </picture>
+</div>
 # Angular Virtual
 
 Efficiently virtualize only the visible DOM nodes within massive scrollable elements using Angular, while maintaining complete control over markup and styles.
diff --git a/packages/lit-virtual/README.md b/packages/lit-virtual/README.md
index 6420f306f..a16ac0e79 100644
--- a/packages/lit-virtual/README.md
+++ b/packages/lit-virtual/README.md
@@ -1,3 +1,20 @@
+<div align="center">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/virtual.png?framework=lit&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/virtual.png?framework=lit"
+    />
+    <img
+      src="https://tanstack.com/api/readme/virtual.png?framework=lit"
+      alt="TanStack Lit Virtual"
+      width="900"
+    />
+  </picture>
+</div>
 # @tanstack/lit-virtual
 
 Efficiently virtualize only the visible DOM nodes within massive scrollable elements using Lit, while maintaining complete control over markup and styles.
diff --git a/packages/marko-virtual/README.md b/packages/marko-virtual/README.md
index d9ff0808d..c77353f1a 100644
--- a/packages/marko-virtual/README.md
+++ b/packages/marko-virtual/README.md
@@ -1,3 +1,20 @@
+<div align="center">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/virtual.png?framework=marko&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/virtual.png?framework=marko"
+    />
+    <img
+      src="https://tanstack.com/api/readme/virtual.png?framework=marko"
+      alt="TanStack Marko Virtual"
+      width="900"
+    />
+  </picture>
+</div>
 # @tanstack/marko-virtual
 
 Headless UI for virtualizing scrollable elements in [Marko 6](https://markojs.com), built on top of [`@tanstack/virtual-core`](https://tanstack.com/virtual).