diff --git a/src/pages/employee/EmployeeList.jsx b/src/pages/employee/EmployeeList.jsx
index 62b6a48b..9587c3bf 100644
--- a/src/pages/employee/EmployeeList.jsx
+++ b/src/pages/employee/EmployeeList.jsx
@@ -21,6 +21,7 @@ import {
 } from "../../utils/tableExportUtils";
 import EmployeeRepository from "../../repositories/EmployeeRepository";
 import ManageEmployee from "../../components/Employee/ManageEmployee";
+import ConfirmModal from "../../components/common/ConfirmModal";
 
 const EmployeeList = () => {
   const { profile: loginUser } = useProfile();
@@ -42,7 +43,10 @@ const EmployeeList = () => {
   const [searchText, setSearchText] = useState("");
   const [filteredData, setFilteredData] = useState([]);
   const [showModal, setShowModal] = useState(false);
-  const [selectedEmployeeId, setSelecedEmployeeId] = useState();
+  const [ selectedEmployeeId, setSelecedEmployeeId ] = useState();
+  const [ IsDeleteModalOpen, setIsDeleteModalOpen ] = useState( false )
+  const [ selectedEmpFordelete, setSelectedEmpFordelete ] = useState( null )
+  const[employeeLodaing,setemployeeLodaing] = useState(false)
 
   const navigate = useNavigate();
 
@@ -108,7 +112,7 @@ const EmployeeList = () => {
   const handleClose = () => setShowModal(false);
 
   const suspendEmployee = (id) => {
-    // console.log(id);
+    setemployeeLodaing(true)
     EmployeeRepository.deleteEmployee(id)
       .then((response) => {
         showToast("Employee deleted successfully.", "success");
@@ -117,14 +121,18 @@ const EmployeeList = () => {
         clearCacheKey("allInactiveEmployeeList");
         clearCacheKey("employeeProfile");
         setEmployeeList([]);
-        recallEmployeeData(showInactive);
+        recallEmployeeData( showInactive );
+        setemployeeLodaing( false )
+        setIsDeleteModalOpen(false)
       })
       .catch((error) => {
         const message =
           error.response?.data?.message ||
           error.message ||
           "An unexpected error occurred";
-        showToast(message, "error");
+         showToast( message, "error" );
+        setemployeeLodaing( false )
+        setIsDeleteModalOpen(false)
       });
   };
 
@@ -170,6 +178,14 @@ const EmployeeList = () => {
     setShowModal(true);
   };
 
+  const handleOpenDelete = (employee) =>
+  {
+    console.log(employee)
+    setSelectedEmpFordelete( employee )
+    setIsDeleteModalOpen( true );
+  }
+ 
+
   return (
     <>
       {isCreateModalOpen && (
@@ -195,6 +211,31 @@ const EmployeeList = () => {
         </div>
       </div>
 
+   
+       {IsDeleteModalOpen && (
+        <div
+          className={`modal fade  ${IsDeleteModalOpen ? "show" : ""}`}
+          tabIndex="-1"
+          role="dialog"
+          style={{
+            display: IsDeleteModalOpen ? "block" : "none",
+            backgroundColor: IsDeleteModalOpen ? "rgba(0,0,0,0.5)" : "transparent",
+          }}
+          aria-hidden="false"
+        >
+ 
+          <ConfirmModal
+            type={"delete"}
+            header={"Suspend Employee"}
+            message={"Are you sure you want delete?"}
+            onSubmit={suspendEmployee}
+            onClose={()=>setIsDeleteModalOpen(false)}
+            loading={employeeLodaing}
+            paramData={selectedEmpFordelete}
+          />
+        </div>
+      )}
+
       <div className="container-xxl flex-grow-1 container-p-y">
         <Breadcrumb
           data={[
@@ -578,7 +619,7 @@ const EmployeeList = () => {
                                     <>
                                       <button
                                         className="dropdown-item py-1"
-                                        onClick={() => suspendEmployee(item.id)}
+                                        onClick={()=>handleOpenDelete(item.id)}
                                       >
                                         <i className="bx bx-task-x bx-sm"></i>{" "}
                                         Suspend