diff --git a/src/components/EditStaff/GradeHistoryModal.tsx b/src/components/EditStaff/GradeHistoryModal.tsx
index 5322b39..7461708 100644
--- a/src/components/EditStaff/GradeHistoryModal.tsx
+++ b/src/components/EditStaff/GradeHistoryModal.tsx
@@ -9,6 +9,7 @@ import SaveIcon from '@mui/icons-material/Save';
 import DeleteIcon from '@mui/icons-material/Delete';
 import CancelIcon from '@mui/icons-material/Cancel';
 import EditIcon from '@mui/icons-material/Edit'; 
+import waitForCondition from "../utils/waitFor";
 
 interface Props {
   open: boolean;
@@ -48,7 +49,33 @@ const GradeHistoryModal: React.FC<Props> = async ({ open, onClose, columns }) =>
     const handleClose = () => {
       onClose();
       };
-
+  
+    const looping = async () => {
+      for (let i = 0; i < _rows.length; i++) {
+      const id = _rows[i].id
+      setRowModesModel((prevRowModesModel) => ({
+          ...prevRowModesModel,
+          [id]: { mode: GridRowModes.View }
+        }));
+      }
+      return true; 
+    }
+    const handleSaveAll = async () => {
+      // trigger save all
+      console.log(_rows)
+      await waitForCondition(async () => {
+        return looping()
+      })
+      console.log(rowModesModel)
+    };
+  
+    const bigTesting = async () => {
+      await looping()
+      setTimeout(() => {
+        onClose()
+      }, 800)
+    }
+    
       const handleRowEditStop: GridEventListener<"rowEditStop"> = (
         params,
         event,
@@ -195,7 +222,7 @@ const GradeHistoryModal: React.FC<Props> = async ({ open, onClose, columns }) =>
                 <Button variant="text" onClick={handleClose}>
                     {t('Cancel')}
                 </Button>
-                <Button variant="contained" onClick={handleClose}>
+                <Button variant="contained" onClick={bigTesting}>
                     {t("Save")}
                 </Button>
                 </Box>
diff --git a/src/components/EditStaff/PositionHistoryModal.tsx b/src/components/EditStaff/PositionHistoryModal.tsx
index afed708..659e5f3 100644
--- a/src/components/EditStaff/PositionHistoryModal.tsx
+++ b/src/components/EditStaff/PositionHistoryModal.tsx
@@ -9,6 +9,7 @@ import SaveIcon from '@mui/icons-material/Save';
 import DeleteIcon from '@mui/icons-material/Delete';
 import CancelIcon from '@mui/icons-material/Cancel';
 import EditIcon from '@mui/icons-material/Edit'; 
+import waitForCondition from "../utils/waitFor";
 
 interface Props {
   open: boolean;
@@ -48,7 +49,32 @@ const PositionHistoryModal: React.FC<Props> = async ({ open, onClose, columns })
     const handleClose = () => {
       onClose();
       };
-
+  
+    const looping = async () => {
+      for (let i = 0; i < _rows.length; i++) {
+      const id = _rows[i].id
+      setRowModesModel((prevRowModesModel) => ({
+          ...prevRowModesModel,
+          [id]: { mode: GridRowModes.View }
+        }));
+      }
+      return true; 
+    }
+    const handleSaveAll = async () => {
+      // trigger save all
+      console.log(_rows)
+      await waitForCondition(async () => {
+        return looping()
+      })
+      console.log(rowModesModel)
+    };
+  
+    const bigTesting = async () => {
+      await looping()
+      setTimeout(() => {
+        onClose()
+      }, 800)
+    }
       const handleRowEditStop: GridEventListener<"rowEditStop"> = (
         params,
         event,
@@ -195,7 +221,7 @@ const PositionHistoryModal: React.FC<Props> = async ({ open, onClose, columns })
                 <Button variant="text" onClick={handleClose}>
                     {t('Cancel')}
                 </Button>
-                <Button variant="contained" onClick={handleClose}>
+                <Button variant="contained" onClick={bigTesting}>
                     {t("Save")}
                 </Button>
                 </Box>
diff --git a/src/components/EditStaff/TeamHistoryModal.tsx b/src/components/EditStaff/TeamHistoryModal.tsx
index 30299e6..92e8888 100644
--- a/src/components/EditStaff/TeamHistoryModal.tsx
+++ b/src/components/EditStaff/TeamHistoryModal.tsx
@@ -9,6 +9,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import CancelIcon from '@mui/icons-material/Cancel';
 import EditIcon from '@mui/icons-material/Edit'; 
 import { useFormContext } from "react-hook-form";
+import waitForCondition from "../utils/waitFor";
 
 interface Props {
     open: boolean;
@@ -48,7 +49,32 @@ const TeamHistoryModal: React.FC<Props> = async ({ open, onClose, columns }) =>
     const handleClose = () => {
     onClose();
     };
-
+  
+    const looping = async () => {
+      for (let i = 0; i < _rows.length; i++) {
+      const id = _rows[i].id
+      setRowModesModel((prevRowModesModel) => ({
+          ...prevRowModesModel,
+          [id]: { mode: GridRowModes.View }
+        }));
+      }
+      return true; 
+    }
+    const handleSaveAll = async () => {
+      // trigger save all
+      console.log(_rows)
+      await waitForCondition(async () => {
+        return looping()
+      })
+      console.log(rowModesModel)
+    };
+  
+    const bigTesting = async () => {
+      await looping()
+      setTimeout(() => {
+        onClose()
+      }, 800)
+    }
     const handleRowEditStop: GridEventListener<"rowEditStop"> = (
         params,
         event,
@@ -196,7 +222,7 @@ const TeamHistoryModal: React.FC<Props> = async ({ open, onClose, columns }) =>
                 <Button variant="text" onClick={handleClose}>
                     {t('Cancel')}
                 </Button>
-                <Button variant="contained" onClick={handleClose}>
+                <Button variant="contained" onClick={bigTesting}>
                     {t("Save")}
                 </Button>
                 </Box>