diff --git a/src/components/common/Avatar.jsx b/src/components/common/Avatar.jsx
index 537af159..81e16e9c 100644
--- a/src/components/common/Avatar.jsx
+++ b/src/components/common/Avatar.jsx
@@ -1,22 +1,21 @@
 import React, { useState, useEffect } from "react";
 
-// A simple hash function to generate a deterministic value from the name
-function hashString(str) {
-  let hash = 0;
-  for (let i = 0; i < str.length; i++) {
-    const char = str.charCodeAt(i);
-    hash = (hash << 5) - hash + char;
-  }
-  return hash;
-}
-
-const Avatar = ({ firstName, lastName, size='sm' }) => {
+const Avatar = ({ firstName, lastName }) => {
   // Combine firstName and lastName to create a unique string for hashing
   const fullName = `${firstName} ${lastName}`;
 
   const [bgClass, setBgClass] = useState("");
 
-  // Function to generate the avatar text
+  // A simple hash function to generate a deterministic value from the name
+  function hashString(str) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+      const char = str.charCodeAt(i);
+      hash = (hash << 5) - hash + char;
+    }
+    return hash;
+  }
+
   function generateAvatarText(firstName, lastName) {
     if (!firstName) return "";
     if (!lastName || lastName.trim() === "") {
@@ -50,15 +49,15 @@ const Avatar = ({ firstName, lastName, size='sm' }) => {
   }, [fullName]); // Re-run if the fullName changes
 
   return (
-    <div className="avatar-wrapper p-1">
-      <div className={`avatar avatar-${size} me-2`}>
-        <span
-          className={`avatar-initial rounded-circle ${bgClass}`}
-        >
-          {generateAvatarText(firstName, lastName)}
-        </span>
+    <>
+      <div className="avatar-wrapper p-1">
+        <div className={`avatar avatar-${size} me-2`}>
+          <span className={`avatar-initial rounded-circle ${bgClass}`}>
+            {generateAvatarText(firstName, lastName)}
+          </span>
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 
diff --git a/src/pages/employee/EmployeeList.jsx b/src/pages/employee/EmployeeList.jsx
index 301e61a7..3b4babb4 100644
--- a/src/pages/employee/EmployeeList.jsx
+++ b/src/pages/employee/EmployeeList.jsx
@@ -53,8 +53,15 @@ const EmployeeList = () =>
     setCurrentPage(1);
 
     if (!loading && Array.isArray(employees)) {
-      setEmployeeList(employees);
-      setFilteredData(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();
+        return nameA.localeCompare(nameB);
+      });
+  
+      setEmployeeList(sorted);
+      setFilteredData(sorted);
     }
   }, [loading, employees, selectedProject]);
 
@@ -343,7 +350,6 @@ const EmployeeList = () =>
                     {currentItems &&
                       !loading &&
                       currentItems
-                        .sort((a, b) => b.id - a.id)
                         .map((item) => (
                           <tr className="odd" key={item.id}>
                             <td className="sorting_1" colSpan={2}>