diff --git a/src/pages/employee/EmployeeList.jsx b/src/pages/employee/EmployeeList.jsx
index 0e0f87a6..301e61a7 100644
--- a/src/pages/employee/EmployeeList.jsx
+++ b/src/pages/employee/EmployeeList.jsx
@@ -10,6 +10,7 @@ import { useProfile } from "../../hooks/useProfile";
 import { hasUserPermission } from "../../utils/authUtils";
 import { MANAGE_EMPLOYEES } from "../../utils/constants";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+import SuspendEmp from "../../components/Employee/SuspendEmp";
 
 const EmployeeList = () =>
 {
@@ -26,10 +27,11 @@ const EmployeeList = () =>
   const [employeeList, setEmployeeList] = useState([]);
   const [modelConfig, setModelConfig] = useState();
   const [currentPage, setCurrentPage] = useState(1);
-  const [itemsPerPage] = useState(5);
+  const [itemsPerPage] = useState(10);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   const [searchText, setSearchText] = useState("");
-  const [filteredData, setFilteredData] = useState([]);
+  const [ filteredData, setFilteredData ] = useState( [] );
+  const [showModal, setShowModal] = useState(false);
   const navigate = useNavigate();
 
   const handleSearch = (e) => {
@@ -74,7 +76,6 @@ const EmployeeList = () =>
 
   const closeModal = () => {
     setIsCreateModalOpen(false);
-
     const modalElement = document.getElementById("managerole-modal");
     if (modalElement) {
       modalElement.classList.remove("show");
@@ -83,7 +84,9 @@ const EmployeeList = () =>
       document.querySelector(".modal-backdrop").remove();
     }
   };
-
+  const handleShow = () => setShowModal(true);
+  const handleClose = () => setShowModal( false );
+  
   const handleConfigData = (config) => {
     setModelConfig(config);
   };
@@ -99,6 +102,17 @@ const EmployeeList = () =>
       {isCreateModalOpen && (
         <ManageEmp employeeId={modelConfig} onClosed={closeModal} />
       )}
+    
+    <div
+        className={`modal fade ${showModal ? 'show' : ''}`}
+        tabIndex="-1"
+        role="dialog"
+        style={{ display: showModal ? 'block' : 'none' }}
+        aria-hidden={!showModal}
+      >
+         <SuspendEmp onClose={handleClose}/>
+      </div>
+
       <div className="container-xxl flex-grow-1 container-p-y">
         <Breadcrumb
           data={[
@@ -184,35 +198,8 @@ const EmployeeList = () =>
                                 className="dropdown-item"
                                 href="#"
                               >
-                                <i className="bx bx-printer me-1"></i>
-                                Print
-                              </a>
-                            </li>
-                            <li>
-                              <a
-                                aria-label="dropdown item another action"
-                                className="dropdown-item"
-                                href="#"
-                              >
-                                <i className="bx bx-file me-1"></i>
-                                Csv
-                              </a>
-                            </li>
-                            <li>
-                              <a
-                                aria-label="dropdown item something else here"
-                                className="dropdown-item"
-                                href="#"
-                              >
-                                <i className="bx bxs-file-export me-1"></i>
-                                Excel
-                              </a>
-                            </li>
-
-                            <li>
-                              <a className="dropdown-item" href="#">
-                                <i className="bx bxs-file-pdf me-1"></i>
-                                Pdf
+                                {/* <i className="bx bx-printer me-1"></i> */}
+                                Coming Soon
                               </a>
                             </li>
                           </ul>
@@ -442,7 +429,7 @@ const EmployeeList = () =>
                                     >
                                       Edit
                                     </Link>
-                                    <button className="dropdown-item">
+                                    <button className="dropdown-item" onClick={handleShow}>
                                       Suspend
                                     </button>
                                     <button