diff --git a/app/controllers/employee.controller.js b/app/controllers/employee.controller.js
index aeaaedd..827fc5e 100644
--- a/app/controllers/employee.controller.js
+++ b/app/controllers/employee.controller.js
@@ -454,16 +454,22 @@ exports.saveExternalUserPermission = async (req, res) => {
       external_user_id: externalUserId,
       allow_site: allowSite
     });
+    const normalizedTitle = `${title || ""}`.trim();
     const payload = {
       external_user_id: externalUserId,
       allow_site: allowSite,
       username,
       name,
-      title,
       email,
       permissions,
       edit_by: editorId
     };
+    if (normalizedTitle) {
+      payload.title = normalizedTitle;
+    } else if (existing?.title) {
+      // Keep existing title when client does not provide one.
+      payload.title = existing.title;
+    }
     if (!existing) {
       payload.create_by = editorId;
     }
diff --git a/client/src/components/employees/ExternalEmployeesImport.js b/client/src/components/employees/ExternalEmployeesImport.js
index 4601bfa..f607c6c 100644
--- a/client/src/components/employees/ExternalEmployeesImport.js
+++ b/client/src/components/employees/ExternalEmployeesImport.js
@@ -18,6 +18,7 @@ const ExternalEmployeesImport = () => {
   const [selectedEmployee, setSelectedEmployee] = useState(undefined);
   const [selectedPermissions, setSelectedPermissions] = useState([SYSTEM_ACCESS_PERMISSION]);
   const [selectedAllowSite, setSelectedAllowSite] = useState(currentSite);
+  const [existingPermissionMap, setExistingPermissionMap] = useState({});
 
   useEffect(() => {
     if (!AuthService.canAddOrEditEmployees()) {
@@ -27,8 +28,26 @@ const ExternalEmployeesImport = () => {
       return;
     }
     loadExternalEmployees();
+    loadExistingPermissions();
   }, []);
 
+  const loadExistingPermissions = () => {
+    EmployeeService.getExternalUserPermissionsList(currentSite)
+      .then((response) => {
+        const records = Array.isArray(response?.data) ? response.data : [];
+        const nextMap = {};
+        records.forEach((item) => {
+          const key = item?.external_user_id;
+          if (!key) return;
+          nextMap[key] = item;
+        });
+        setExistingPermissionMap(nextMap);
+      })
+      .catch(() => {
+        setExistingPermissionMap({});
+      });
+  };
+
   const loadExternalEmployees = () => {
     setLoading(true);
     EmployeeService.getExternalEmployeesList()
@@ -128,6 +147,7 @@ const ExternalEmployeesImport = () => {
       permissions: selectedPermissions
     })
       .then(() => {
+        loadExistingPermissions();
         closePermissionModal();
       })
       .catch((error) => {
@@ -202,12 +222,17 @@ const ExternalEmployeesImport = () => {
                     <td>{item?.title}</td>
                     <td>{item?.site}</td>
                     <td>
+                      {(() => {
+                        const hasExistingPermission = !!existingPermissionMap?.[item?.employee_id];
+                        return (
                       <button
                         className="btn btn-primary btn-sm"
                         onClick={() => openPermissionModal(item)}
                       >
-                        Add
+                            {hasExistingPermission ? "Edit" : "Add"}
                       </button>
+                        );
+                      })()}
                     </td>
                   </tr>
                 ))}