diff --git a/src/stories/components/ToggleSwitch.stories.tsx b/src/stories/components/ToggleSwitch.stories.tsx
index 4df05a19..dee5ba4a 100644
--- a/src/stories/components/ToggleSwitch.stories.tsx
+++ b/src/stories/components/ToggleSwitch.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import SwitchButton from '@views/components/common/SwitchButton';
+import SwitchButton from 'src/views/components/common/SwitchButton';
 
 const meta = {
     title: 'Components/Common/SwitchButton',
diff --git a/src/views/components/common/SwitchButton.tsx b/src/views/components/common/SwitchButton.tsx
index 52e61375..5252e092 100644
--- a/src/views/components/common/SwitchButton.tsx
+++ b/src/views/components/common/SwitchButton.tsx
@@ -1,22 +1,29 @@
 import { Switch } from '@headlessui/react';
-import React, { useEffect,useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 type ToggleSwitchProps = {
     isChecked?: boolean;
-    // onChange?: (checked: boolean) => void;
+    onChange?: (checked: boolean) => void;
 };
 
-const SwitchButton: React.FC<ToggleSwitchProps> = ({ isChecked = true }) => {
+const SwitchButton: React.FC<ToggleSwitchProps> = ({ isChecked = true, onChange }) => {
     const [enabled, setEnabled] = useState(isChecked);
 
     useEffect(() => {
         setEnabled(isChecked);
     }, [isChecked]);
 
+    const handleChange = (checked: boolean) => {
+        setEnabled(checked);
+        if (onChange) {
+            onChange;
+        }
+    };
+
     return (
         <Switch
             checked={enabled}
-            onChange={setEnabled}
+            onChange={handleChange}
             className={`${enabled ? 'bg-[#579D42]' : 'bg-gray-400'} 
           relative inline-flex items-center h-8 w-13 rounded-full transition-colors ease-in-out duration-200`}
         >