diff --git a/README.md b/README.md
index 72d481b..76e9c39 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,20 @@
 # Headplane
 > An advanced UI for [juanfont/headscale](https://github.com/juanfont/headscale)
 
-![Preview](/assets/main-preview.png)
+<picture>
+    <source
+        media="(prefers-color-scheme: dark)"
+        srcset="./assets/preview-dark.png"
+    >
+    <source
+        media="(prefers-color-scheme: light)"
+        srcset="./assets/preview-light.png"
+    >
+    <img
+        alt="Preview"
+        src="./assets/preview-dark.png"
+    >
+</picture>
 
 Headscale is a self-hosted version of the Tailscale control server, however, it currently lacks a first-party web UI.
 Headplane aims to solve this issue by providing a GUI that can deeply integrate with the Headscale server.
diff --git a/assets/acl-preview.png b/assets/acl-preview.png
deleted file mode 100644
index 96750b7..0000000
Binary files a/assets/acl-preview.png and /dev/null differ
diff --git a/assets/acls-dark.png b/assets/acls-dark.png
new file mode 100644
index 0000000..ce5c742
Binary files /dev/null and b/assets/acls-dark.png differ
diff --git a/assets/acls-light.png b/assets/acls-light.png
new file mode 100644
index 0000000..5275231
Binary files /dev/null and b/assets/acls-light.png differ
diff --git a/assets/advanced-preview.png b/assets/advanced-preview.png
deleted file mode 100644
index 6419af9..0000000
Binary files a/assets/advanced-preview.png and /dev/null differ
diff --git a/assets/integration-dark.png b/assets/integration-dark.png
new file mode 100644
index 0000000..c5c388f
Binary files /dev/null and b/assets/integration-dark.png differ
diff --git a/assets/integration-light.png b/assets/integration-light.png
new file mode 100644
index 0000000..22a34c3
Binary files /dev/null and b/assets/integration-light.png differ
diff --git a/assets/main-preview.png b/assets/main-preview.png
deleted file mode 100644
index 879cb41..0000000
Binary files a/assets/main-preview.png and /dev/null differ
diff --git a/assets/preview-dark.png b/assets/preview-dark.png
new file mode 100644
index 0000000..0037a89
Binary files /dev/null and b/assets/preview-dark.png differ
diff --git a/assets/preview-light.png b/assets/preview-light.png
new file mode 100644
index 0000000..eff1411
Binary files /dev/null and b/assets/preview-light.png differ
diff --git a/docs/Advanced-Integration.md b/docs/Advanced-Integration.md
index c7538c3..09a110a 100644
--- a/docs/Advanced-Integration.md
+++ b/docs/Advanced-Integration.md
@@ -1,6 +1,19 @@
 # Advanced Integration
 
-![Integration Preview](/assets/advanced-preview.png)
+<picture>
+    <source
+        media="(prefers-color-scheme: dark)"
+        srcset="../assets/integration-dark.png"
+    >
+    <source
+        media="(prefers-color-scheme: light)"
+        srcset="../assets/integration-light.png"
+    >
+    <img
+        alt="Integration Preview"
+        src="../assets/integration-dark.png"
+    >
+</picture>
 
 With the advanced integration it's possible to control Access Control Lists (ACLs) and the Headscale configuration via the Headplane UI.
 Every single aspect of this integration is optional, meaning you can only use what you want.
@@ -18,7 +31,20 @@ By default this is set to `/etc/headscale/config.yaml`.
 
 ## Access Control Lists (ACLs)
 
-![ACL Preview](/assets/acl-preview.png)
+<picture>
+    <source
+        media="(prefers-color-scheme: dark)"
+        srcset="../assets/acls-dark.png"
+    >
+    <source
+        media="(prefers-color-scheme: light)"
+        srcset="../assets/acls-light.png"
+    >
+    <img
+        alt="ACL Preview"
+        src="../assets/acls-dark.png"
+    >
+</picture>
 
 Headplane will enable the `Access Controls` tab if it is able to read an ACL file from Headscale.<br>
 The ACL file path is read from the following sources in order of priority: