diff --git a/client/src/components/employees/EmployeeList.js b/client/src/components/employees/EmployeeList.js
index 259a6b8..6752987 100644
--- a/client/src/components/employees/EmployeeList.js
+++ b/client/src/components/employees/EmployeeList.js
@@ -12,11 +12,11 @@ const EmployeeList = () => {
   const [employees, setEmployees] = useState([]);
   const [keyword, setKeyword] = useState('');
   const [showInactive, setShowInactive] = useState(false);
-  const [hrUsers, setHrUsers] = useState([]);
   const [isHrLoading, setIsHrLoading] = useState(false);
   const [isSavingHrPermission, setIsSavingHrPermission] = useState(false);
   const [hrKeyword, setHrKeyword] = useState('');
   const [hrPermissionMap, setHrPermissionMap] = useState({});
+  const [hrPermissionRecords, setHrPermissionRecords] = useState([]);
   const [editingHrUser, setEditingHrUser] = useState(undefined);
   const [showHrPermissionModal, setShowHrPermissionModal] = useState(false);
   const [selectedHrPermissions, setSelectedHrPermissions] = useState([SYSTEM_ACCESS_PERMISSION]);
@@ -30,37 +30,29 @@ const EmployeeList = () => {
     EmployeeService.getAllEmployees().then((data) =>
       setEmployees(data.data)
     );
-    loadHrUsers();
     loadHrPermissionsBySite(currentSite);
   }, []);
 
-  const loadHrUsers = () => {
-    setIsHrLoading(true);
-    EmployeeService.getExternalEmployeesList()
-      .then((response) => {
-        setHrUsers(Array.isArray(response?.data) ? response.data : []);
-      })
-      .catch((error) => {
-        window.alert(error?.response?.data?.message || 'Failed to load HR users.');
-      })
-      .finally(() => {
-        setIsHrLoading(false);
-      });
-  };
-
   const loadHrPermissionsBySite = (site) => {
+    setIsHrLoading(true);
     EmployeeService.getExternalUserPermissionsList(site)
       .then((response) => {
+        const records = Array.isArray(response?.data) ? response.data : [];
         const nextMap = {};
-        (Array.isArray(response?.data) ? response.data : []).forEach((item) => {
+        records.forEach((item) => {
           const key = item?.external_user_id;
           if (!key) return;
           nextMap[key] = Array.isArray(item?.permissions) ? item.permissions : [];
         });
         setHrPermissionMap(nextMap);
+        setHrPermissionRecords(records);
       })
       .catch(() => {
         setHrPermissionMap({});
+        setHrPermissionRecords([]);
+      })
+      .finally(() => {
+        setIsHrLoading(false);
       });
   };
 
@@ -85,27 +77,25 @@ const EmployeeList = () => {
     navigate(`/employees/external-import`);
   }
 
+  const getExternalUserId = (item) => item?.external_user_id || item?.employee_id || '';
+
   const filteredHrUsers = useMemo(() => {
-    return (hrUsers || [])
-      .filter((item) => Number(item?.site) === Number(currentSite))
-      .filter((item) => {
-        const configuredPermissions = hrPermissionMap?.[item?.employee_id] || [];
-        return configuredPermissions.length > 0;
-      })
+    return (hrPermissionRecords || [])
+      .filter((item) => Number(item?.allow_site) === Number(currentSite))
       .filter((item) => {
         if (!hrKeyword) return true;
         const key = hrKeyword.toLowerCase();
         return (
           (item?.username || '').toLowerCase().includes(key) ||
-          (item?.name || '').toLowerCase().includes(key) ||
-          (item?.title || '').toLowerCase().includes(key)
+          (item?.name || '').toLowerCase().includes(key)
         );
       });
-  }, [hrUsers, hrKeyword, hrPermissionMap, currentSite]);
+  }, [hrPermissionRecords, hrKeyword, currentSite]);
 
   const openHrPermissionModal = (hrUser) => {
     setEditingHrUser(hrUser);
-    const existingPermissions = hrPermissionMap?.[hrUser?.employee_id] || [];
+    const externalUserId = getExternalUserId(hrUser);
+    const existingPermissions = hrPermissionMap?.[externalUserId] || [];
     setSelectedHrPermissions(Array.from(new Set([SYSTEM_ACCESS_PERMISSION, ...existingPermissions])));
     setShowHrPermissionModal(true);
   };
@@ -151,10 +141,11 @@ const EmployeeList = () => {
   };
 
   const saveHrPermissions = () => {
-    if (!editingHrUser?.employee_id) return;
+    const externalUserId = getExternalUserId(editingHrUser);
+    if (!externalUserId) return;
     setIsSavingHrPermission(true);
     EmployeeService.saveExternalUserPermission({
-      external_user_id: editingHrUser.employee_id,
+      external_user_id: externalUserId,
       username: editingHrUser.username || '',
       name: editingHrUser.name || '',
       email: editingHrUser.email || '',
@@ -164,8 +155,9 @@ const EmployeeList = () => {
       .then(() => {
         setHrPermissionMap((prev) => ({
           ...prev,
-          [editingHrUser.employee_id]: Array.from(new Set([SYSTEM_ACCESS_PERMISSION, ...selectedHrPermissions]))
+          [externalUserId]: Array.from(new Set([SYSTEM_ACCESS_PERMISSION, ...selectedHrPermissions]))
         }));
+        loadHrPermissionsBySite(currentSite);
         closeHrPermissionModal();
       })
       .catch((error) => {
@@ -177,17 +169,19 @@ const EmployeeList = () => {
   };
 
   const revokeHrPermissions = (hrUser) => {
-    if (!hrUser?.employee_id) return;
+    const externalUserId = getExternalUserId(hrUser);
+    if (!externalUserId) return;
     if (!window.confirm(`Revoke all permissions for ${hrUser?.username || 'this HR user'} on Site ${currentSite}?`)) {
       return;
     }
-    EmployeeService.revokeExternalUserPermission(hrUser.employee_id, Number(currentSite))
+    EmployeeService.revokeExternalUserPermission(externalUserId, Number(currentSite))
       .then(() => {
         setHrPermissionMap((prev) => {
           const next = { ...prev };
-          delete next[hrUser.employee_id];
+          delete next[externalUserId];
           return next;
         });
+        loadHrPermissionsBySite(currentSite);
       })
       .catch((error) => {
         window.alert(error?.response?.data?.message || 'Failed to revoke HR user permissions.');
@@ -225,7 +219,7 @@ const EmployeeList = () => {
               Filter:
               <input className="ms-2" type="text" value={hrKeyword} onChange={(e) => setHrKeyword(e.currentTarget.value)} />
             </label>
-            <button className="btn btn-primary btn-sm" onClick={() => {loadHrUsers(); loadHrPermissionsBySite(currentSite);}} disabled={isHrLoading}>
+            <button className="btn btn-primary btn-sm" onClick={() => loadHrPermissionsBySite(currentSite)} disabled={isHrLoading}>
               {isHrLoading ? 'Loading...' : 'Refresh HR Users'}
             </button>
           </div>
@@ -247,13 +241,14 @@ const EmployeeList = () => {
                 </tr>
               )}
               {!isHrLoading && filteredHrUsers.map((hrUser) => {
-                const configuredPermissions = hrPermissionMap?.[hrUser?.employee_id] || [];
+                const externalUserId = getExternalUserId(hrUser);
+                const configuredPermissions = hrPermissionMap?.[externalUserId] || hrUser?.permissions || [];
                 return (
-                  <tr key={`${hrUser?.employee_id}-${hrUser?.site}`}>
+                  <tr key={`${externalUserId}-${hrUser?.allow_site}`}>
                     <td>{hrUser?.username}</td>
                     <td>{hrUser?.name}</td>
-                    <td>{hrUser?.title}</td>
-                    <td>{hrUser?.site}</td>
+                    <td>{hrUser?.title || '-'}</td>
+                    <td>{hrUser?.allow_site || currentSite}</td>
                     <td>{configuredPermissions.length > 0 ? configuredPermissions.join(', ') : '-'}</td>
                     <td>
                       <button className="btn btn-primary btn-sm me-2" onClick={() => openHrPermissionModal(hrUser)}>Edit</button>