diff --git a/website/package-lock.json b/website/package-lock.json
index b5bd544d1..b00671863 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -14333,6 +14333,14 @@
                 "use-latest": "^1.0.0"
             }
         },
+        "react-toggle": {
+            "version": "4.1.2",
+            "resolved": "https://registry.npmjs.org/react-toggle/-/react-toggle-4.1.2.tgz",
+            "integrity": "sha512-4Ohw31TuYQdhWfA6qlKafeXx3IOH7t4ZHhmRdwsm1fQREwOBGxJT+I22sgHqR/w8JRdk+AeMCJXPImEFSrNXow==",
+            "requires": {
+                "classnames": "^2.2.5"
+            }
+        },
         "readable-stream": {
             "version": "3.6.0",
             "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
diff --git a/website/package.json b/website/package.json
index 3a268e970..7cbe286c7 100644
--- a/website/package.json
+++ b/website/package.json
@@ -19,7 +19,8 @@
         "react": "^17.0.2",
         "react-before-after-slider": "^1.0.4",
         "react-dom": "^17.0.2",
-        "react-feather": "^2.0.9"
+        "react-feather": "^2.0.9",
+        "react-toggle": "^4.1.2"
     },
     "browserslist": {
         "production": [
diff --git a/website/src/pages/index.jsx b/website/src/pages/index.jsx
index 799c76521..90a1ab4ef 100644
--- a/website/src/pages/index.jsx
+++ b/website/src/pages/index.jsx
@@ -104,13 +104,15 @@ function Home() {
                             <div className="col col--5">
                                 <div>
                                     <BrowserOnly>
-                                        <BeforeAfterSlider
-                                            className={styles.featureImage}
-                                            before={useBaseUrl("img/screen_apps_light.jpg")}
-                                            after={useBaseUrl("img/screen_apps_dark.jpg")}
-                                            width={640}
-                                            height={480}
-                                        />
+                                        {() => {
+                                            return <BeforeAfterSlider
+                                                className={styles.featureImage}
+                                                before={useBaseUrl("img/screen_apps_light.jpg")}
+                                                after={useBaseUrl("img/screen_apps_dark.jpg")}
+                                                width={640}
+                                                height={480}
+                                            />
+                                        }}
                                     </BrowserOnly>
                                 </div>
                             </div>
@@ -143,13 +145,15 @@ function Home() {
                             <div className="col col--5">
                                 <div>
                                     <BrowserOnly>
-                                        <BeforeAfterSlider
-                                            className={styles.featureImage}
-                                            before={useBaseUrl("img/screen_admin_light.jpg")}
-                                            after={useBaseUrl("img/screen_admin_dark.jpg")}
-                                            width={640}
-                                            height={480}
-                                        />
+                                        {() => {
+                                            return <BeforeAfterSlider
+                                                className={styles.featureImage}
+                                                before={useBaseUrl("img/screen_admin_light.jpg")}
+                                                after={useBaseUrl("img/screen_admin_dark.jpg")}
+                                                width={640}
+                                                height={480}
+                                            />
+                                        }}
                                     </BrowserOnly>
                                 </div>
                             </div>