diff --git a/README.md b/README.md
index 9d6ed25cd4..816029c851 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_table.png" alt="TanStack Table">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/table.png?theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/table.png"
+    />
+    <img
+      src="https://tanstack.com/api/readme/table.png"
+      alt="TanStack Table"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/alpine-table/README.md b/packages/alpine-table/README.md
index 9d6ed25cd4..9a1c7a324a 100644
--- a/packages/alpine-table/README.md
+++ b/packages/alpine-table/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_table.png" alt="TanStack Table">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/table.png?framework=alpine&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/table.png?framework=alpine"
+    />
+    <img
+      src="https://tanstack.com/api/readme/table.png?framework=alpine"
+      alt="TanStack Alpine Table"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/angular-table/README.md b/packages/angular-table/README.md
index 9d6ed25cd4..be4f90b583 100644
--- a/packages/angular-table/README.md
+++ b/packages/angular-table/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_table.png" alt="TanStack Table">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/table.png?framework=angular&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/table.png?framework=angular"
+    />
+    <img
+      src="https://tanstack.com/api/readme/table.png?framework=angular"
+      alt="TanStack Angular Table"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/ember-table/README.md b/packages/ember-table/README.md
index 9d6ed25cd4..6b682af6a3 100644
--- a/packages/ember-table/README.md
+++ b/packages/ember-table/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_table.png" alt="TanStack Table">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/table.png?framework=ember&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/table.png?framework=ember"
+    />
+    <img
+      src="https://tanstack.com/api/readme/table.png?framework=ember"
+      alt="TanStack Ember Table"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/lit-table/README.md b/packages/lit-table/README.md
index 9d6ed25cd4..509809b57e 100644
--- a/packages/lit-table/README.md
+++ b/packages/lit-table/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_table.png" alt="TanStack Table">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/table.png?framework=lit&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/table.png?framework=lit"
+    />
+    <img
+      src="https://tanstack.com/api/readme/table.png?framework=lit"
+      alt="TanStack Lit Table"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/match-sorter-utils/README.md b/packages/match-sorter-utils/README.md
index 9d6ed25cd4..816029c851 100644
--- a/packages/match-sorter-utils/README.md
+++ b/packages/match-sorter-utils/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_table.png" alt="TanStack Table">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/table.png?theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/table.png"
+    />
+    <img
+      src="https://tanstack.com/api/readme/table.png"
+      alt="TanStack Table"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/octane-table/README.md b/packages/octane-table/README.md
index 9d6ed25cd4..9fc2df9e66 100644
--- a/packages/octane-table/README.md
+++ b/packages/octane-table/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_table.png" alt="TanStack Table">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/table.png?framework=octane&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/table.png?framework=octane"
+    />
+    <img
+      src="https://tanstack.com/api/readme/table.png?framework=octane"
+      alt="TanStack Octane Table"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/preact-table-devtools/README.md b/packages/preact-table-devtools/README.md
index 9d6ed25cd4..ac9c58380c 100644
--- a/packages/preact-table-devtools/README.md
+++ b/packages/preact-table-devtools/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_table.png" alt="TanStack Table">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/table.png?framework=preact&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/table.png?framework=preact"
+    />
+    <img
+      src="https://tanstack.com/api/readme/table.png?framework=preact"
+      alt="TanStack Preact Table"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/preact-table/README.md b/packages/preact-table/README.md
index 9d6ed25cd4..ac9c58380c 100644
--- a/packages/preact-table/README.md
+++ b/packages/preact-table/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_table.png" alt="TanStack Table">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/table.png?framework=preact&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/table.png?framework=preact"
+    />
+    <img
+      src="https://tanstack.com/api/readme/table.png?framework=preact"
+      alt="TanStack Preact Table"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/react-table-devtools/README.md b/packages/react-table-devtools/README.md
index 9d6ed25cd4..9c83e97a89 100644
--- a/packages/react-table-devtools/README.md
+++ b/packages/react-table-devtools/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_table.png" alt="TanStack Table">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/table.png?framework=react&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/table.png?framework=react"
+    />
+    <img
+      src="https://tanstack.com/api/readme/table.png?framework=react"
+      alt="TanStack React Table"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/react-table/README.md b/packages/react-table/README.md
index 9d6ed25cd4..9c83e97a89 100644
--- a/packages/react-table/README.md
+++ b/packages/react-table/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_table.png" alt="TanStack Table">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/table.png?framework=react&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/table.png?framework=react"
+    />
+    <img
+      src="https://tanstack.com/api/readme/table.png?framework=react"
+      alt="TanStack React Table"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/solid-table-devtools/README.md b/packages/solid-table-devtools/README.md
index 9d6ed25cd4..6a89ca3bfc 100644
--- a/packages/solid-table-devtools/README.md
+++ b/packages/solid-table-devtools/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_table.png" alt="TanStack Table">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/table.png?framework=solid&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/table.png?framework=solid"
+    />
+    <img
+      src="https://tanstack.com/api/readme/table.png?framework=solid"
+      alt="TanStack Solid Table"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/solid-table/README.md b/packages/solid-table/README.md
index 9d6ed25cd4..6a89ca3bfc 100644
--- a/packages/solid-table/README.md
+++ b/packages/solid-table/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_table.png" alt="TanStack Table">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/table.png?framework=solid&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/table.png?framework=solid"
+    />
+    <img
+      src="https://tanstack.com/api/readme/table.png?framework=solid"
+      alt="TanStack Solid Table"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/svelte-table/README.md b/packages/svelte-table/README.md
index 9d6ed25cd4..53b046c941 100644
--- a/packages/svelte-table/README.md
+++ b/packages/svelte-table/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_table.png" alt="TanStack Table">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/table.png?framework=svelte&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/table.png?framework=svelte"
+    />
+    <img
+      src="https://tanstack.com/api/readme/table.png?framework=svelte"
+      alt="TanStack Svelte Table"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/table-core/README.md b/packages/table-core/README.md
index 9d6ed25cd4..816029c851 100644
--- a/packages/table-core/README.md
+++ b/packages/table-core/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_table.png" alt="TanStack Table">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/table.png?theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/table.png"
+    />
+    <img
+      src="https://tanstack.com/api/readme/table.png"
+      alt="TanStack Table"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/table-devtools/README.md b/packages/table-devtools/README.md
index 9d6ed25cd4..816029c851 100644
--- a/packages/table-devtools/README.md
+++ b/packages/table-devtools/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_table.png" alt="TanStack Table">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/table.png?theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/table.png"
+    />
+    <img
+      src="https://tanstack.com/api/readme/table.png"
+      alt="TanStack Table"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/vue-table-devtools/README.md b/packages/vue-table-devtools/README.md
index 9d6ed25cd4..f0e87cc123 100644
--- a/packages/vue-table-devtools/README.md
+++ b/packages/vue-table-devtools/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_table.png" alt="TanStack Table">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/table.png?framework=vue&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/table.png?framework=vue"
+    />
+    <img
+      src="https://tanstack.com/api/readme/table.png?framework=vue"
+      alt="TanStack Vue Table"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/packages/vue-table/README.md b/packages/vue-table/README.md
index 9d6ed25cd4..f0e87cc123 100644
--- a/packages/vue-table/README.md
+++ b/packages/vue-table/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_table.png" alt="TanStack Table">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/table.png?framework=vue&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/table.png?framework=vue"
+    />
+    <img
+      src="https://tanstack.com/api/readme/table.png?framework=vue"
+      alt="TanStack Vue Table"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />