diff --git a/website/package-lock.json b/website/package-lock.json
index 2ec8ed942..7e98ea66f 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -15,7 +15,7 @@
                 "postcss": "^8.3.5",
                 "rapidoc": "^9.0.0",
                 "react": "^17.0.2",
-                "react-before-after-slider": "^1.0.4",
+                "react-before-after-slider-component": "^0.7.4",
                 "react-dom": "^17.0.2",
                 "react-feather": "^2.0.9",
                 "react-toggle": "^4.1.2"
@@ -3963,9 +3963,9 @@
             }
         },
         "node_modules/classnames": {
-            "version": "2.2.6",
-            "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
-            "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+            "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
         },
         "node_modules/clean-css": {
             "version": "5.1.2",
@@ -10696,20 +10696,18 @@
                 "pure-color": "^1.2.0"
             }
         },
-        "node_modules/react-before-after-slider": {
-            "version": "1.0.4",
-            "resolved": "https://registry.npmjs.org/react-before-after-slider/-/react-before-after-slider-1.0.4.tgz",
-            "integrity": "sha512-zXuaiDqJkgkZ/9RaHKXS5Dh+zsOQW5b9nPgQbXt1fcI1bF4q+l/KCM50qhhH/EHKLhbtUYAb7nhqViowFbC3ZQ==",
+        "node_modules/react-before-after-slider-component": {
+            "version": "0.7.4",
+            "resolved": "https://registry.npmjs.org/react-before-after-slider-component/-/react-before-after-slider-component-0.7.4.tgz",
+            "integrity": "sha512-KkTBnun7TtNYhGwROqnBSc9yjY+RSk/Xm08u8Mci/KBrdNrKpa77c2nhw/GIbONXk9k4hR7Me7ogZLy3KN2LEg==",
             "dependencies": {
-                "classnames": "^2.2.5",
-                "react-block-image": "^1.0.0"
+                "classnames": "^2.3.1"
+            },
+            "peerDependencies": {
+                "react": "^17.0.2",
+                "react-dom": "^17.0.2"
             }
         },
-        "node_modules/react-block-image": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/react-block-image/-/react-block-image-1.0.0.tgz",
-            "integrity": "sha1-XEbXoRX6fvpw1HeiWA7AybIQYoM="
-        },
         "node_modules/react-dev-utils": {
             "version": "11.0.4",
             "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
@@ -18174,9 +18172,9 @@
             }
         },
         "classnames": {
-            "version": "2.2.6",
-            "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
-            "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+            "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
         },
         "clean-css": {
             "version": "5.1.2",
@@ -23170,20 +23168,14 @@
                 "pure-color": "^1.2.0"
             }
         },
-        "react-before-after-slider": {
-            "version": "1.0.4",
-            "resolved": "https://registry.npmjs.org/react-before-after-slider/-/react-before-after-slider-1.0.4.tgz",
-            "integrity": "sha512-zXuaiDqJkgkZ/9RaHKXS5Dh+zsOQW5b9nPgQbXt1fcI1bF4q+l/KCM50qhhH/EHKLhbtUYAb7nhqViowFbC3ZQ==",
+        "react-before-after-slider-component": {
+            "version": "0.7.4",
+            "resolved": "https://registry.npmjs.org/react-before-after-slider-component/-/react-before-after-slider-component-0.7.4.tgz",
+            "integrity": "sha512-KkTBnun7TtNYhGwROqnBSc9yjY+RSk/Xm08u8Mci/KBrdNrKpa77c2nhw/GIbONXk9k4hR7Me7ogZLy3KN2LEg==",
             "requires": {
-                "classnames": "^2.2.5",
-                "react-block-image": "^1.0.0"
+                "classnames": "^2.3.1"
             }
         },
-        "react-block-image": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/react-block-image/-/react-block-image-1.0.0.tgz",
-            "integrity": "sha1-XEbXoRX6fvpw1HeiWA7AybIQYoM="
-        },
         "react-dev-utils": {
             "version": "11.0.4",
             "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
diff --git a/website/package.json b/website/package.json
index f65f880ac..43f1e8990 100644
--- a/website/package.json
+++ b/website/package.json
@@ -19,7 +19,7 @@
         "postcss": "^8.3.5",
         "rapidoc": "^9.0.0",
         "react": "^17.0.2",
-        "react-before-after-slider": "^1.0.4",
+        "react-before-after-slider-component": "^0.7.4",
         "react-dom": "^17.0.2",
         "react-feather": "^2.0.9",
         "react-toggle": "^4.1.2"
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 265bc51fb..512e170a2 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -37,6 +37,10 @@
 }
 
 
+.before-after-slider img {
+    max-width: none;
+}
+
 table {
     display: table;
 }
diff --git a/website/src/pages/index.jsx b/website/src/pages/index.jsx
index aa583269f..1ab5ebef7 100644
--- a/website/src/pages/index.jsx
+++ b/website/src/pages/index.jsx
@@ -6,8 +6,8 @@ import BrowserOnly from "@docusaurus/core/lib/client/exports/BrowserOnly";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import styles from "./styles.module.css";
-import BeforeAfterSlider from 'react-before-after-slider'
 import Comparison from "../comparison";
+import 'react-before-after-slider-component/dist/build.css';
 
 const features = [
     {
@@ -105,12 +105,16 @@ function Home() {
                                 <div>
                                     <BrowserOnly>
                                         {() => {
-                                            return <BeforeAfterSlider
-                                                className={styles.featureImage}
-                                                before={useBaseUrl("img/screen_apps_light.jpg")}
-                                                after={useBaseUrl("img/screen_apps_dark.jpg")}
-                                                width={640}
-                                                height={480}
+                                            const ReactBeforeSliderComponent = require('react-before-after-slider-component').default;
+                                            return <ReactBeforeSliderComponent
+                                                firstImage={{
+                                                    id: 1,
+                                                    imageUrl: useBaseUrl("img/screen_apps_light.jpg"),
+                                                }}
+                                                secondImage={{
+                                                    id: 2,
+                                                    imageUrl: useBaseUrl("img/screen_apps_dark.jpg"),
+                                                }}
                                             />
                                         }}
                                     </BrowserOnly>
@@ -146,12 +150,16 @@ function Home() {
                                 <div>
                                     <BrowserOnly>
                                         {() => {
-                                            return <BeforeAfterSlider
-                                                className={styles.featureImage}
-                                                before={useBaseUrl("img/screen_admin_light.jpg")}
-                                                after={useBaseUrl("img/screen_admin_dark.jpg")}
-                                                width={640}
-                                                height={480}
+                                            const ReactBeforeSliderComponent = require('react-before-after-slider-component').default;
+                                            return <ReactBeforeSliderComponent
+                                                firstImage={{
+                                                    id: 1,
+                                                    imageUrl: useBaseUrl("img/screen_admin_light.jpg"),
+                                                }}
+                                                secondImage={{
+                                                    id: 2,
+                                                    imageUrl: useBaseUrl("img/screen_admin_dark.jpg"),
+                                                }}
                                             />
                                         }}
                                     </BrowserOnly>