diff --git a/src/pages/employee/EmployeeList.jsx b/src/pages/employee/EmployeeList.jsx
index a71abd40..25db4eb8 100644
--- a/src/pages/employee/EmployeeList.jsx
+++ b/src/pages/employee/EmployeeList.jsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef } from "react";
 import moment from "moment";
+import showToast from "../../services/toastService";
 import { Link, NavLink, useNavigate } from "react-router-dom";
 import Avatar from "../../components/common/Avatar";
 import Breadcrumb from "../../components/common/Breadcrumb";
@@ -9,6 +10,7 @@ import { useProjects } from "../../hooks/useProjects";
 import { useProfile } from "../../hooks/useProfile";
 import { hasUserPermission } from "../../utils/authUtils";
 import { MANAGE_EMPLOYEES } from "../../utils/constants";
+import { clearCacheKey } from "../../slices/apiDataManager";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import SuspendEmp from "../../components/Employee/SuspendEmp";
 import {
@@ -17,6 +19,7 @@ import {
   printTable,
   exportToPDF,
 } from "../../utils/tableExportUtils";
+import EmployeeRepository from "../../repositories/EmployeeRepository";
 
 const EmployeeList = () => {
   const { profile: loginUser } = useProfile();
@@ -24,7 +27,7 @@ const EmployeeList = () => {
   const { projects, loading: projectLoading } = useProjects();
   const ManageEmployee = useHasUserPermission(MANAGE_EMPLOYEES);
 
-  const { employees, loading, setLoading, error } =
+  const { employees, loading, setLoading, error,recallEmployeeData } =
     useEmployeesAllOrByProjectId(selectedProject);
   const [projectsList, setProjectsList] = useState(projects || []);
 
@@ -36,6 +39,7 @@ const EmployeeList = () => {
   const [searchText, setSearchText] = useState("");
   const [filteredData, setFilteredData] = useState([]);
   const [showModal, setShowModal] = useState(false);
+
   const navigate = useNavigate();
 
   const handleSearch = (e) => {
@@ -98,6 +102,22 @@ const EmployeeList = () => {
   const handleShow = () => setShowModal(true);
   const handleClose = () => setShowModal(false);
 
+  const suspendEmployee = (id) => {
+    // console.log(id);
+    EmployeeRepository.deleteEmployee(id)
+      .then((response) => {
+        showToast("Employee deleted successfully.", "success");
+        clearCacheKey("employeeListByProject");
+        clearCacheKey("allEmployeeList");
+        clearCacheKey("employeeProfile");
+        setEmployeeList([])
+        recallEmployeeData()
+      })
+      .catch((error) => {
+        showToast(error.message, "error");
+      });
+  };
+
   const handleConfigData = (config) => {
     setModelConfig(config);
   };
@@ -107,6 +127,7 @@ const EmployeeList = () => {
       openModal();
     }
   }, [modelConfig, isCreateModalOpen]);
+  
   const tableRef = useRef(null);
   const handleExport = (type) => {
     if (!currentItems || currentItems.length === 0) return;
@@ -428,8 +449,7 @@ const EmployeeList = () => {
                                   className="text-heading text-truncate cursor-pointer"
                                 >
                                   <span className="fw-normal">
-                                    {item.firstName} {item.middleName}
-                                    {item.lastName}
+                                    {item.firstName} {item.middleName} {item.lastName}
                                   </span>
                                 </a>
                               </div>
@@ -494,13 +514,13 @@ const EmployeeList = () => {
                                     to={`/employee/manage/${item.id}`}
                                     className="dropdown-item py-1"
                                   >
-                                    <i class="bx bx-edit bx-sm"></i> Edit
+                                    <i className="bx bx-edit bx-sm"></i> Edit
                                   </Link>
                                   <button
                                     className="dropdown-item py-1"
-                                    onClick={handleShow}
+                                    onClick={() => suspendEmployee(item.id)}
                                   >
-                                    <i class="bx bx-task-x bx-sm"></i> Suspend
+                                    <i className="bx bx-task-x bx-sm"></i> Suspend
                                   </button>
                                   <button
                                     className="dropdown-item py-1"
@@ -509,7 +529,7 @@ const EmployeeList = () => {
                                     data-bs-target="#managerole-modal"
                                     onClick={() => handleConfigData(item.id)}
                                   >
-                                    <i class="bx bx-cog bx-sm"></i> Manage Role
+                                    <i className="bx bx-cog bx-sm"></i> Manage Role
                                   </button>
                                 </div>
                               </div>
diff --git a/src/repositories/EmployeeRepository.jsx b/src/repositories/EmployeeRepository.jsx
index 8a2bf4be..de01948e 100644
--- a/src/repositories/EmployeeRepository.jsx
+++ b/src/repositories/EmployeeRepository.jsx
@@ -11,8 +11,9 @@ const EmployeeRepository = {
       "Content-Type": "multipart/form-data",
     }),
   updateEmployee: (id, data) => api.put(`/users/${id}`, data),
-  deleteEmployee: ( id ) => api.delete( `/users/${ id }` ),
-  getEmployeeProfile:(id)=>api.get(`/api/Employee/profile/get/${id}`)
+  // deleteEmployee: ( id ) => api.delete( `/users/${ id }` ),
+  getEmployeeProfile:(id)=>api.get(`/api/employee/profile/get/${id}`),
+  deleteEmployee:(id)=>api.delete(`/api/employee/${id}`)
 };
 
 export default EmployeeRepository;