diff --git a/website/docs/index.md b/website/docs/index.mdx
similarity index 69%
rename from website/docs/index.md
rename to website/docs/index.mdx
index ce8fd2434..8720ee40c 100755
--- a/website/docs/index.md
+++ b/website/docs/index.mdx
@@ -25,9 +25,41 @@ For more information about configuration, Beta versions, and additional installa
 
 ## Screenshots
 
-authentik can use Light or Dark mode for the Admin interface and the User interface.
+authentik can use Light or Dark mode for the Admin interface, User interface and the flow interface.
 
-| Light                            | Dark                            |
-| -------------------------------- | ------------------------------- |
-| ![](/img/screen_apps_light.jpg)  | ![](/img/screen_apps_dark.jpg)  |
-| ![](/img/screen_admin_light.jpg) | ![](/img/screen_admin_dark.jpg) |
+import "react-before-after-slider-component/dist/build.css";
+import ReactBeforeSliderComponent from "react-before-after-slider-component";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
+<ReactBeforeSliderComponent
+    firstImage={{
+        id: 1,
+        imageUrl: useBaseUrl("img/screen_flow_dark.jpg"),
+    }}
+    secondImage={{
+        id: 2,
+        imageUrl: useBaseUrl("img/screen_flow_light.jpg"),
+    }}
+/>
+
+<ReactBeforeSliderComponent
+    firstImage={{
+        id: 1,
+        imageUrl: useBaseUrl("img/screen_apps_dark.jpg"),
+    }}
+    secondImage={{
+        id: 2,
+        imageUrl: useBaseUrl("img/screen_apps_light.jpg"),
+    }}
+/>
+
+<ReactBeforeSliderComponent
+    firstImage={{
+        id: 1,
+        imageUrl: useBaseUrl("img/screen_admin_dark.jpg"),
+    }}
+    secondImage={{
+        id: 2,
+        imageUrl: useBaseUrl("img/screen_admin_light.jpg"),
+    }}
+/>
diff --git a/website/src/pages/index.jsx b/website/src/pages/index.jsx
index 4df5a6ae6..4ccf481df 100644
--- a/website/src/pages/index.jsx
+++ b/website/src/pages/index.jsx
@@ -114,13 +114,13 @@ function Home() {
                                                     firstImage={{
                                                         id: 1,
                                                         imageUrl: useBaseUrl(
-                                                            "img/screen_apps_light.jpg"
+                                                            "img/screen_apps_dark.jpg"
                                                         ),
                                                     }}
                                                     secondImage={{
                                                         id: 2,
                                                         imageUrl: useBaseUrl(
-                                                            "img/screen_apps_dark.jpg"
+                                                            "img/screen_apps_light.jpg"
                                                         ),
                                                     }}
                                                 />
@@ -166,13 +166,13 @@ function Home() {
                                                     firstImage={{
                                                         id: 1,
                                                         imageUrl: useBaseUrl(
-                                                            "img/screen_admin_light.jpg"
+                                                            "img/screen_admin_dark.jpg"
                                                         ),
                                                     }}
                                                     secondImage={{
                                                         id: 2,
                                                         imageUrl: useBaseUrl(
-                                                            "img/screen_admin_dark.jpg"
+                                                            "img/screen_admin_light.jpg"
                                                         ),
                                                     }}
                                                 />
diff --git a/website/static/img/screen_flow_dark.jpg b/website/static/img/screen_flow_dark.jpg
new file mode 100644
index 000000000..a5f6a2f4c
Binary files /dev/null and b/website/static/img/screen_flow_dark.jpg differ
diff --git a/website/static/img/screen_flow_light.jpg b/website/static/img/screen_flow_light.jpg
new file mode 100644
index 000000000..89061e973
Binary files /dev/null and b/website/static/img/screen_flow_light.jpg differ