diff --git a/src/pages/employee/EmployeeList.jsx b/src/pages/employee/EmployeeList.jsx
index 9587c3bf..c0b75275 100644
--- a/src/pages/employee/EmployeeList.jsx
+++ b/src/pages/employee/EmployeeList.jsx
@@ -43,10 +43,10 @@ const EmployeeList = () => {
   const [searchText, setSearchText] = useState("");
   const [filteredData, setFilteredData] = useState([]);
   const [showModal, setShowModal] = useState(false);
-  const [ selectedEmployeeId, setSelecedEmployeeId ] = useState();
-  const [ IsDeleteModalOpen, setIsDeleteModalOpen ] = useState( false )
-  const [ selectedEmpFordelete, setSelectedEmpFordelete ] = useState( null )
-  const[employeeLodaing,setemployeeLodaing] = useState(false)
+  const [selectedEmployeeId, setSelecedEmployeeId] = useState();
+  const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [selectedEmpFordelete, setSelectedEmpFordelete] = useState(null);
+  const [employeeLodaing, setemployeeLodaing] = useState(false);
 
   const navigate = useNavigate();
 
@@ -70,8 +70,12 @@ const EmployeeList = () => {
     if (!loading && Array.isArray(employees)) {
       // Sort by full name (firstName + lastName)
       const sorted = [...employees].sort((a, b) => {
-        const nameA = `${a.firstName || ""}${a.lastName || ""}`.toLowerCase();
-        const nameB = `${b.firstName || ""}${b.lastName || ""}`.toLowerCase();
+        const nameA = `${a.firstName || ""}${a.middleName || ""}${
+          a.lastName || ""
+        }`.toLowerCase();
+        const nameB = `${b.firstName || ""}${b.middleName || ""}${
+          b.lastName || ""
+        }`.toLowerCase();
         return nameA.localeCompare(nameB);
       });
 
@@ -112,7 +116,7 @@ const EmployeeList = () => {
   const handleClose = () => setShowModal(false);
 
   const suspendEmployee = (id) => {
-    setemployeeLodaing(true)
+    setemployeeLodaing(true);
     EmployeeRepository.deleteEmployee(id)
       .then((response) => {
         showToast("Employee deleted successfully.", "success");
@@ -121,18 +125,18 @@ const EmployeeList = () => {
         clearCacheKey("allInactiveEmployeeList");
         clearCacheKey("employeeProfile");
         setEmployeeList([]);
-        recallEmployeeData( showInactive );
-        setemployeeLodaing( false )
-        setIsDeleteModalOpen(false)
+        recallEmployeeData(showInactive);
+        setemployeeLodaing(false);
+        setIsDeleteModalOpen(false);
       })
       .catch((error) => {
         const message =
           error.response?.data?.message ||
           error.message ||
           "An unexpected error occurred";
-         showToast( message, "error" );
-        setemployeeLodaing( false )
-        setIsDeleteModalOpen(false)
+        showToast(message, "error");
+        setemployeeLodaing(false);
+        setIsDeleteModalOpen(false);
       });
   };
 
@@ -178,13 +182,11 @@ const EmployeeList = () => {
     setShowModal(true);
   };
 
-  const handleOpenDelete = (employee) =>
-  {
-    console.log(employee)
-    setSelectedEmpFordelete( employee )
-    setIsDeleteModalOpen( true );
-  }
- 
+  const handleOpenDelete = (employee) => {
+    console.log(employee);
+    setSelectedEmpFordelete(employee);
+    setIsDeleteModalOpen(true);
+  };
 
   return (
     <>
@@ -198,11 +200,11 @@ const EmployeeList = () => {
         style={{ display: showModal ? "block" : "none" }}
         aria-hidden={!showModal}
       >
-        <div
-          className="modal-dialog modal-xl modal-dialog-centered "
-        >
-          <div className="modal-content overflow-y-auto overflow-x-hidden"
-          style={{ maxHeight: "90vh" }}>
+        <div className="modal-dialog modal-xl modal-dialog-centered ">
+          <div
+            className="modal-content overflow-y-auto overflow-x-hidden"
+            style={{ maxHeight: "90vh" }}
+          >
             <ManageEmployee
               employeeId={selectedEmployeeId}
               onClosed={closeModal}
@@ -211,25 +213,25 @@ const EmployeeList = () => {
         </div>
       </div>
 
-   
-       {IsDeleteModalOpen && (
+      {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",
+            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)}
+            onClose={() => setIsDeleteModalOpen(false)}
             loading={employeeLodaing}
             paramData={selectedEmpFordelete}
           />
@@ -416,7 +418,7 @@ const EmployeeList = () => {
                         aria-label="User: activate to sort column ascending"
                         aria-sort="descending"
                       >
-                       <div className="text-start ms-6">Name</div>
+                        <div className="text-start ms-6">Name</div>
                       </th>
                       <th
                         className="sorting sorting_desc d-none d-sm-table-cell"
@@ -619,7 +621,9 @@ const EmployeeList = () => {
                                     <>
                                       <button
                                         className="dropdown-item py-1"
-                                        onClick={()=>handleOpenDelete(item.id)}
+                                        onClick={() =>
+                                          handleOpenDelete(item.id)
+                                        }
                                       >
                                         <i className="bx bx-task-x bx-sm"></i>{" "}
                                         Suspend