diff --git a/src/components/Employee/ManageRole.jsx b/src/components/Employee/ManageRole.jsx
index bbb95e40..578c7d24 100644
--- a/src/components/Employee/ManageRole.jsx
+++ b/src/components/Employee/ManageRole.jsx
@@ -70,38 +70,54 @@ const ManageRole = ( {employeeId, onClosed} ) =>
     }
   }, [initialRoles, reset]);
 
-  const onSubmit = ( formdata ) =>
-  {
+  const onSubmit = (formdata) => {
     setIsLoading(true);
     const result = [];
-    for ( const [ roleId, isEnabled ] of Object.entries( formdata.selectedRole ) )
-    {
-      if ( isEnabled )
-      {
-        const existingRole = employeeRoles?.find((role) => role.roleId === roleId);
-        result.push( {
-          id: existingRole?.id || null,
-          employeeId: employeeId,
+  
+    const selectedRoles = formdata.selectedRole;
+  
+    for (const [roleId, isChecked] of Object.entries(selectedRoles)) {
+      const existingRole = employeeRoles?.find((role) => role.roleId === roleId);
+      const wasChecked = !!existingRole?.isEnabled;
+  
+      if (isChecked) {
+        result.push({
+          id: existingRole?.id || "00000000-0000-0000-0000-000000000000",
+          employeeId,
+          roleId,
           isEnabled: true,
-          roleId: roleId,
+        });
+      } else if (wasChecked && !isChecked) {
+        result.push({
+          id: existingRole?.id,
+          employeeId,
+          roleId,
+          isEnabled: false,
         });
       }
     }
+  
+    if (result.length === 0) {
+      showToast("No changes made", "info");
+      setIsLoading(false);
+      return;
+    }
+    console.log(result)
+  
     RolesRepository.createEmployeeRoles(result)
-      .then((resp) => {
-        showToast("Role assigned successfully", "success");
-        setIsLoading( false );
-        reset()
+      .then(() => {
+        showToast("Roles updated successfully", "success");
+        setIsLoading(false);
+        reset();
         onClosed();
       })
       .catch((err) => {
-        console.log(err);
-        setIsLoading(false);
-
+        console.error(err);
         showToast(err.message, "error");
+        setIsLoading(false);
       });
-    setIsLoading(false);
   };
+  
 
   return (
     <div
@@ -128,7 +144,8 @@ const ManageRole = ( {employeeId, onClosed} ) =>
                 className="d-flex flex-wrap justify-content-between align-items-center pb-5 "
                 style={{ maxHeight: "70vh", overflowY: "scroll" }}
               >
-                {(loading || roleLoading) && <p>Loading...</p>}
+                {roleLoading && <p>Loading...</p>}
+                {loading && <p>Loading...</p>}
                 {data &&
                   data.map((item) => (
                     <div className="col-md-6 col-lg-4 mb-4" key={item.id}>
@@ -176,4 +193,4 @@ const ManageRole = ( {employeeId, onClosed} ) =>
   );
 };
 
-export default ManageRole;
+export default ManageRole;
\ No newline at end of file