diff --git a/README.md b/README.md
index 0686895..859e5e7 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,18 @@
-![React Ranger Header](https://github.com/tanstack/ranger/raw/main/media/headerv1.png)
+<picture>
+  <source
+    media="(prefers-color-scheme: dark)"
+    srcset="https://tanstack.com/api/readme/ranger.png?theme=dark"
+  />
+  <source
+    media="(prefers-color-scheme: light)"
+    srcset="https://tanstack.com/api/readme/ranger.png"
+  />
+  <img
+    src="https://tanstack.com/api/readme/ranger.png"
+    alt="TanStack Ranger"
+    width="900"
+  />
+</picture>
 
 Headless UI for building ranger component in TS/JS and React
 
diff --git a/media/headerv1.png b/media/headerv1.png
deleted file mode 100644
index 9cc1d92..0000000
Binary files a/media/headerv1.png and /dev/null differ
diff --git a/packages/ranger/README.md b/packages/ranger/README.md
index c22ef30..969f4f2 100644
--- a/packages/ranger/README.md
+++ b/packages/ranger/README.md
@@ -1,4 +1,18 @@
-![React Ranger Header](https://github.com/tanstack/ranger/raw/main/media/headerv1.png)
+<picture>
+  <source
+    media="(prefers-color-scheme: dark)"
+    srcset="https://tanstack.com/api/readme/ranger.png?theme=dark"
+  />
+  <source
+    media="(prefers-color-scheme: light)"
+    srcset="https://tanstack.com/api/readme/ranger.png"
+  />
+  <img
+    src="https://tanstack.com/api/readme/ranger.png"
+    alt="TanStack Ranger"
+    width="900"
+  />
+</picture>
 
 Headless UI for building ranger component in TS/JS and React
 
diff --git a/packages/react-ranger/README.md b/packages/react-ranger/README.md
index c22ef30..40a694f 100644
--- a/packages/react-ranger/README.md
+++ b/packages/react-ranger/README.md
@@ -1,4 +1,18 @@
-![React Ranger Header](https://github.com/tanstack/ranger/raw/main/media/headerv1.png)
+<picture>
+  <source
+    media="(prefers-color-scheme: dark)"
+    srcset="https://tanstack.com/api/readme/ranger.png?framework=react&theme=dark"
+  />
+  <source
+    media="(prefers-color-scheme: light)"
+    srcset="https://tanstack.com/api/readme/ranger.png?framework=react"
+  />
+  <img
+    src="https://tanstack.com/api/readme/ranger.png?framework=react"
+    alt="TanStack React Ranger"
+    width="900"
+  />
+</picture>
 
 Headless UI for building ranger component in TS/JS and React