diff --git a/package.json b/package.json
index 812080f..ad2f50b 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,6 @@
     "react-i18next": "^16.5.4",
     "react-router-dom": "^7.13.0",
     "react-toastify": "^11.0.5",
-    "react-toggle": "^4.1.3",
     "runtime-env-cra": "^0.2.4",
     "sass": "^1.97.3",
     "web-vitals": "^5.1.0"
diff --git a/src/components/common/ToggleSlider.tsx b/src/components/common/ToggleSlider.tsx
index 75e8494..15e1705 100644
--- a/src/components/common/ToggleSlider.tsx
+++ b/src/components/common/ToggleSlider.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import Toggle, { ToggleProps } from "react-toggle";
+import Toggle, { ToggleProps } from "./Toggle";
 
 export interface ToggleSliderProps extends ToggleProps {
   name: string;
@@ -20,7 +20,13 @@ export default function ToggleSlider({
   return (
     <div className="form-group">
       <label htmlFor={name}>{label}</label>
-      <Toggle {...rest} id={name} name={name} defaultChecked={defaultChecked} />
+      <Toggle
+        {...rest}
+        id={name}
+        name={name}
+        defaultChecked={defaultChecked}
+        disabled={readOnly}
+      />
       {error && <div className="alert alert-danger">{error}</div>}
     </div>
   );