diff --git a/fe-admin/src/pages/hrm/EmployeesListPage.tsx b/fe-admin/src/pages/hrm/EmployeesListPage.tsx
index 74bb43e..074fdaa 100644
--- a/fe-admin/src/pages/hrm/EmployeesListPage.tsx
+++ b/fe-admin/src/pages/hrm/EmployeesListPage.tsx
@@ -650,14 +650,18 @@ function EmployeeDetailTabs({ detail, onDelete }: { detail: EmployeeDetail; onDe
               {initials(detail.fullName)}
             </span>
             <div className="min-w-0">
-              <h2 className="truncate text-lg font-bold leading-tight text-white">{detail.fullName ?? '—'}</h2>
-              <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-white/85">
-                <span className="font-mono">{detail.employeeCode}</span>
-                {detail.departmentName && (<><span className="opacity-50">•</span><span className="truncate">{detail.departmentName}</span></>)}
-                {detail.workLocation && (<><span className="opacity-50">•</span><span className="truncate">{detail.workLocation}</span></>)}
+              <h2 className="truncate text-xl font-extrabold leading-tight text-white drop-shadow-sm">{detail.fullName ?? '—'}</h2>
+              <div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-[13px] font-medium text-white">
+                <span className="font-mono font-semibold tracking-tight">{detail.employeeCode}</span>
+                {detail.departmentName && (<><span className="text-white/55">•</span><span className="truncate">{detail.departmentName}</span></>)}
+                {detail.workLocation && (<><span className="text-white/55">•</span><span className="truncate">{detail.workLocation}</span></>)}
               </div>
               <div className="mt-2">
-                <span className="inline-flex items-center rounded-full bg-white/20 px-2 py-0.5 text-[11px] font-medium text-white ring-1 ring-white/25">
+                <span className={cn(
+                  'inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-bold shadow-sm ring-1 ring-black/5',
+                  EmployeeStatusColor[detail.employeeStatus],
+                )}>
+                  <span className="h-1.5 w-1.5 rounded-full bg-current opacity-70" />
                   {EmployeeStatusLabel[detail.employeeStatus]}
                 </span>
               </div>
diff --git a/fe-user/src/pages/hrm/EmployeesListPage.tsx b/fe-user/src/pages/hrm/EmployeesListPage.tsx
index 74bb43e..074fdaa 100644
--- a/fe-user/src/pages/hrm/EmployeesListPage.tsx
+++ b/fe-user/src/pages/hrm/EmployeesListPage.tsx
@@ -650,14 +650,18 @@ function EmployeeDetailTabs({ detail, onDelete }: { detail: EmployeeDetail; onDe
               {initials(detail.fullName)}
             </span>
             <div className="min-w-0">
-              <h2 className="truncate text-lg font-bold leading-tight text-white">{detail.fullName ?? '—'}</h2>
-              <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-white/85">
-                <span className="font-mono">{detail.employeeCode}</span>
-                {detail.departmentName && (<><span className="opacity-50">•</span><span className="truncate">{detail.departmentName}</span></>)}
-                {detail.workLocation && (<><span className="opacity-50">•</span><span className="truncate">{detail.workLocation}</span></>)}
+              <h2 className="truncate text-xl font-extrabold leading-tight text-white drop-shadow-sm">{detail.fullName ?? '—'}</h2>
+              <div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-[13px] font-medium text-white">
+                <span className="font-mono font-semibold tracking-tight">{detail.employeeCode}</span>
+                {detail.departmentName && (<><span className="text-white/55">•</span><span className="truncate">{detail.departmentName}</span></>)}
+                {detail.workLocation && (<><span className="text-white/55">•</span><span className="truncate">{detail.workLocation}</span></>)}
               </div>
               <div className="mt-2">
-                <span className="inline-flex items-center rounded-full bg-white/20 px-2 py-0.5 text-[11px] font-medium text-white ring-1 ring-white/25">
+                <span className={cn(
+                  'inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-bold shadow-sm ring-1 ring-black/5',
+                  EmployeeStatusColor[detail.employeeStatus],
+                )}>
+                  <span className="h-1.5 w-1.5 rounded-full bg-current opacity-70" />
                   {EmployeeStatusLabel[detail.employeeStatus]}
                 </span>
               </div>