diff --git a/README.md b/README.md
index 6bd9001654..12696d169a 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_form.png" >
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/form.png?theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/form.png"
+    />
+    <img
+      src="https://tanstack.com/api/readme/form.png"
+      alt="TanStack Form"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/media/header_form.png b/media/header_form.png
deleted file mode 100644
index 82a4503c97..0000000000
Binary files a/media/header_form.png and /dev/null differ
diff --git a/packages/angular-form/README.md b/packages/angular-form/README.md
index 946e70fbbf..23eb7f167f 100644
--- a/packages/angular-form/README.md
+++ b/packages/angular-form/README.md
@@ -1,6 +1,20 @@
 <img src="https://static.scarf.sh/a.png?x-pxid=be2d8a11-9712-4c1d-9963-580b2d4fb133" />
 
-![TanStack Form Header](https://github.com/TanStack/form/raw/main/media/repo-header.png)
+<picture>
+  <source
+    media="(prefers-color-scheme: dark)"
+    srcset="https://tanstack.com/api/readme/form.png?framework=angular&theme=dark"
+  />
+  <source
+    media="(prefers-color-scheme: light)"
+    srcset="https://tanstack.com/api/readme/form.png?framework=angular"
+  />
+  <img
+    src="https://tanstack.com/api/readme/form.png?framework=angular"
+    alt="TanStack Angular Form"
+    width="900"
+  />
+</picture>
 
 Directives for managing form state in Angular
 
diff --git a/packages/form-devtools/README.md b/packages/form-devtools/README.md
index 76befe0607..4ff18fa061 100644
--- a/packages/form-devtools/README.md
+++ b/packages/form-devtools/README.md
@@ -1,6 +1,20 @@
 <img src="https://static.scarf.sh/a.png?x-pxid=be2d8a11-9712-4c1d-9963-580b2d4fb133" />
 
-![TanStack Form Header](https://github.com/TanStack/form/raw/main/media/repo-header.png)
+<picture>
+  <source
+    media="(prefers-color-scheme: dark)"
+    srcset="https://tanstack.com/api/readme/form.png?theme=dark"
+  />
+  <source
+    media="(prefers-color-scheme: light)"
+    srcset="https://tanstack.com/api/readme/form.png"
+  />
+  <img
+    src="https://tanstack.com/api/readme/form.png"
+    alt="TanStack Form"
+    width="900"
+  />
+</picture>
 
 Devtools for the TanStack form library.
 
diff --git a/packages/lit-form/README.md b/packages/lit-form/README.md
index ca75c21c78..cbe9688a28 100644
--- a/packages/lit-form/README.md
+++ b/packages/lit-form/README.md
@@ -1,6 +1,20 @@
 <img src="https://static.scarf.sh/a.png?x-pxid=be2d8a11-9712-4c1d-9963-580b2d4fb133" />
 
-![TanStack Form Header](https://github.com/TanStack/form/raw/main/media/repo-header.png)
+<picture>
+  <source
+    media="(prefers-color-scheme: dark)"
+    srcset="https://tanstack.com/api/readme/form.png?framework=lit&theme=dark"
+  />
+  <source
+    media="(prefers-color-scheme: light)"
+    srcset="https://tanstack.com/api/readme/form.png?framework=lit"
+  />
+  <img
+    src="https://tanstack.com/api/readme/form.png?framework=lit"
+    alt="TanStack Lit Form"
+    width="900"
+  />
+</picture>
 
 Controllers for managing form state in Lit
 
diff --git a/packages/preact-form/README.md b/packages/preact-form/README.md
index b20213713b..6fa21737c4 100644
--- a/packages/preact-form/README.md
+++ b/packages/preact-form/README.md
@@ -1,6 +1,20 @@
 <img src="https://static.scarf.sh/a.png?x-pxid=be2d8a11-9712-4c1d-9963-580b2d4fb133" />
 
-![TanStack Form Header](https://github.com/TanStack/form/raw/main/media/repo-header.png)
+<picture>
+  <source
+    media="(prefers-color-scheme: dark)"
+    srcset="https://tanstack.com/api/readme/form.png?framework=preact&theme=dark"
+  />
+  <source
+    media="(prefers-color-scheme: light)"
+    srcset="https://tanstack.com/api/readme/form.png?framework=preact"
+  />
+  <img
+    src="https://tanstack.com/api/readme/form.png?framework=preact"
+    alt="TanStack Preact Form"
+    width="900"
+  />
+</picture>
 
 Hooks for managing form state in Preact
 
diff --git a/packages/react-form-devtools/README.md b/packages/react-form-devtools/README.md
index 1866876e9e..ee06f30af1 100644
--- a/packages/react-form-devtools/README.md
+++ b/packages/react-form-devtools/README.md
@@ -1,6 +1,20 @@
 <img src="https://static.scarf.sh/a.png?x-pxid=be2d8a11-9712-4c1d-9963-580b2d4fb133" />
 
-![TanStack Form Header](https://github.com/TanStack/form/raw/main/media/repo-header.png)
+<picture>
+  <source
+    media="(prefers-color-scheme: dark)"
+    srcset="https://tanstack.com/api/readme/form.png?framework=react&theme=dark"
+  />
+  <source
+    media="(prefers-color-scheme: light)"
+    srcset="https://tanstack.com/api/readme/form.png?framework=react"
+  />
+  <img
+    src="https://tanstack.com/api/readme/form.png?framework=react"
+    alt="TanStack React Form"
+    width="900"
+  />
+</picture>
 
 Hooks for managing form state in React
 
diff --git a/packages/react-form-nextjs/README.md b/packages/react-form-nextjs/README.md
index 1866876e9e..ee06f30af1 100644
--- a/packages/react-form-nextjs/README.md
+++ b/packages/react-form-nextjs/README.md
@@ -1,6 +1,20 @@
 <img src="https://static.scarf.sh/a.png?x-pxid=be2d8a11-9712-4c1d-9963-580b2d4fb133" />
 
-![TanStack Form Header](https://github.com/TanStack/form/raw/main/media/repo-header.png)
+<picture>
+  <source
+    media="(prefers-color-scheme: dark)"
+    srcset="https://tanstack.com/api/readme/form.png?framework=react&theme=dark"
+  />
+  <source
+    media="(prefers-color-scheme: light)"
+    srcset="https://tanstack.com/api/readme/form.png?framework=react"
+  />
+  <img
+    src="https://tanstack.com/api/readme/form.png?framework=react"
+    alt="TanStack React Form"
+    width="900"
+  />
+</picture>
 
 Hooks for managing form state in React
 
diff --git a/packages/react-form-remix/README.md b/packages/react-form-remix/README.md
index 1866876e9e..ee06f30af1 100644
--- a/packages/react-form-remix/README.md
+++ b/packages/react-form-remix/README.md
@@ -1,6 +1,20 @@
 <img src="https://static.scarf.sh/a.png?x-pxid=be2d8a11-9712-4c1d-9963-580b2d4fb133" />
 
-![TanStack Form Header](https://github.com/TanStack/form/raw/main/media/repo-header.png)
+<picture>
+  <source
+    media="(prefers-color-scheme: dark)"
+    srcset="https://tanstack.com/api/readme/form.png?framework=react&theme=dark"
+  />
+  <source
+    media="(prefers-color-scheme: light)"
+    srcset="https://tanstack.com/api/readme/form.png?framework=react"
+  />
+  <img
+    src="https://tanstack.com/api/readme/form.png?framework=react"
+    alt="TanStack React Form"
+    width="900"
+  />
+</picture>
 
 Hooks for managing form state in React
 
diff --git a/packages/react-form-start/README.md b/packages/react-form-start/README.md
index 1866876e9e..ee06f30af1 100644
--- a/packages/react-form-start/README.md
+++ b/packages/react-form-start/README.md
@@ -1,6 +1,20 @@
 <img src="https://static.scarf.sh/a.png?x-pxid=be2d8a11-9712-4c1d-9963-580b2d4fb133" />
 
-![TanStack Form Header](https://github.com/TanStack/form/raw/main/media/repo-header.png)
+<picture>
+  <source
+    media="(prefers-color-scheme: dark)"
+    srcset="https://tanstack.com/api/readme/form.png?framework=react&theme=dark"
+  />
+  <source
+    media="(prefers-color-scheme: light)"
+    srcset="https://tanstack.com/api/readme/form.png?framework=react"
+  />
+  <img
+    src="https://tanstack.com/api/readme/form.png?framework=react"
+    alt="TanStack React Form"
+    width="900"
+  />
+</picture>
 
 Hooks for managing form state in React
 
diff --git a/packages/react-form/README.md b/packages/react-form/README.md
index 1866876e9e..ee06f30af1 100644
--- a/packages/react-form/README.md
+++ b/packages/react-form/README.md
@@ -1,6 +1,20 @@
 <img src="https://static.scarf.sh/a.png?x-pxid=be2d8a11-9712-4c1d-9963-580b2d4fb133" />
 
-![TanStack Form Header](https://github.com/TanStack/form/raw/main/media/repo-header.png)
+<picture>
+  <source
+    media="(prefers-color-scheme: dark)"
+    srcset="https://tanstack.com/api/readme/form.png?framework=react&theme=dark"
+  />
+  <source
+    media="(prefers-color-scheme: light)"
+    srcset="https://tanstack.com/api/readme/form.png?framework=react"
+  />
+  <img
+    src="https://tanstack.com/api/readme/form.png?framework=react"
+    alt="TanStack React Form"
+    width="900"
+  />
+</picture>
 
 Hooks for managing form state in React
 
diff --git a/packages/solid-form/README.md b/packages/solid-form/README.md
index 5db77cbe66..f531c9070a 100644
--- a/packages/solid-form/README.md
+++ b/packages/solid-form/README.md
@@ -1,6 +1,20 @@
 <img src="https://static.scarf.sh/a.png?x-pxid=be2d8a11-9712-4c1d-9963-580b2d4fb133" />
 
-![TanStack Form Header](https://github.com/TanStack/form/raw/main/media/repo-header.png)
+<picture>
+  <source
+    media="(prefers-color-scheme: dark)"
+    srcset="https://tanstack.com/api/readme/form.png?framework=solid&theme=dark"
+  />
+  <source
+    media="(prefers-color-scheme: light)"
+    srcset="https://tanstack.com/api/readme/form.png?framework=solid"
+  />
+  <img
+    src="https://tanstack.com/api/readme/form.png?framework=solid"
+    alt="TanStack Solid Form"
+    width="900"
+  />
+</picture>
 
 Signals for managing form state in Solid
 
diff --git a/packages/vue-form/README.md b/packages/vue-form/README.md
index a09cdedcac..cd945eebf2 100644
--- a/packages/vue-form/README.md
+++ b/packages/vue-form/README.md
@@ -1,6 +1,20 @@
 <img src="https://static.scarf.sh/a.png?x-pxid=be2d8a11-9712-4c1d-9963-580b2d4fb133" />
 
-![TanStack Form Header](https://github.com/TanStack/form/raw/main/media/repo-header.png)
+<picture>
+  <source
+    media="(prefers-color-scheme: dark)"
+    srcset="https://tanstack.com/api/readme/form.png?framework=vue&theme=dark"
+  />
+  <source
+    media="(prefers-color-scheme: light)"
+    srcset="https://tanstack.com/api/readme/form.png?framework=vue"
+  />
+  <img
+    src="https://tanstack.com/api/readme/form.png?framework=vue"
+    alt="TanStack Vue Form"
+    width="900"
+  />
+</picture>
 
 Compositions for managing form state in Vue