diff --git a/client/src/components/shop-employees/shop-employees-form.component.jsx b/client/src/components/shop-employees/shop-employees-form.component.jsx
index 447558ada..e9e87ec89 100644
--- a/client/src/components/shop-employees/shop-employees-form.component.jsx
+++ b/client/src/components/shop-employees/shop-employees-form.component.jsx
@@ -43,6 +43,9 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
   const { t } = useTranslation();
   const [form] = useForm();
   const employeeRates = Form.useWatch(["rates"], form) || [];
+  const employeeNumber = Form.useWatch("employee_number", form);
+  const firstName = Form.useWatch("first_name", form);
+  const lastName = Form.useWatch("last_name", form);
   const employeeOptionsColProps = {
     xs: 24,
     sm: 12,
@@ -61,6 +64,10 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
     nextFetchPolicy: "network-only"
   });
   const notification = useNotification();
+  const employeeTitleName = [firstName, lastName].filter(Boolean).join(" ").trim();
+  const employeeCardTitle =
+    [employeeNumber, employeeTitleName].filter(Boolean).join(" - ") ||
+    (search.employeeId === "new" ? t("employees.actions.new") : t("bodyshop.labels.employees"));
 
   const {
     treatments: { Enhanced_Payroll }
@@ -179,6 +186,7 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
 
   return (
     <Card
+      title={employeeCardTitle}
       extra={
         <Button type="primary" onClick={() => form.submit()}>
           {t("general.actions.save")}
@@ -379,9 +387,7 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
                         >
                           <Form.Item
                             label={t("employees.fields.cost_center")}
-                            key={`${index}`}
                             name={[field.name, "cost_center"]}
-                            valuePropName="value"
                             rules={[
                               {
                                 required: true
@@ -406,7 +412,6 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
                           </Form.Item>
                           <Form.Item
                             label={t("employees.fields.rate")}
-                            key={`${index}`}
                             name={[field.name, "rate"]}
                             rules={[
                               {
diff --git a/client/src/components/shop-teams/shop-employee-teams.form.component.jsx b/client/src/components/shop-teams/shop-employee-teams.form.component.jsx
index 4311dbfc3..674b0dc99 100644
--- a/client/src/components/shop-teams/shop-employee-teams.form.component.jsx
+++ b/client/src/components/shop-teams/shop-employee-teams.form.component.jsx
@@ -113,14 +113,23 @@ export function ShopEmployeeTeamsFormComponent({ bodyshop }) {
 
   useEffect(() => {
     if (!search.employeeTeamId || isNewTeam || loading) return;
+    let hydrationFrameId;
 
     if (data?.employee_teams_by_pk?.id === search.employeeTeamId) {
       form.setFieldsValue(normalizeEmployeeTeam(data.employee_teams_by_pk));
-      setHydratedTeamId(search.employeeTeamId);
+      hydrationFrameId = window.requestAnimationFrame(() => {
+        setHydratedTeamId(search.employeeTeamId);
+      });
     } else {
       form.resetFields();
-      setHydratedTeamId(search.employeeTeamId);
+      hydrationFrameId = window.requestAnimationFrame(() => {
+        setHydratedTeamId(search.employeeTeamId);
+      });
     }
+
+    return () => {
+      if (hydrationFrameId) window.cancelAnimationFrame(hydrationFrameId);
+    };
   }, [data, form, isNewTeam, loading, search.employeeTeamId]);
 
   const [updateEmployeeTeam] = useMutation(UPDATE_EMPLOYEE_TEAM);
@@ -243,7 +252,7 @@ export function ShopEmployeeTeamsFormComponent({ bodyshop }) {
 
   return (
     <Card
-      title={teamCardTitle}
+      title={isTeamHydrating ? undefined : teamCardTitle}
       extra={
         <Button type="primary" onClick={() => form.submit()} disabled={isTeamHydrating}>
           {t("general.actions.save")}
@@ -291,7 +300,7 @@ export function ShopEmployeeTeamsFormComponent({ bodyshop }) {
 
                       return (
                         <Form.Item key={field.key} style={{ padding: 0, margin: 2 }}>
-                          <Form.Item label={t("employees.fields.id")} key={`${index}`} name={[field.name, "id"]} hidden>
+                          <Form.Item name={[field.name, "id"]} hidden>
                             <Input type="hidden" />
                           </Form.Item>
                           <LayoutFormRow
@@ -320,7 +329,6 @@ export function ShopEmployeeTeamsFormComponent({ bodyshop }) {
                                 <Col {...TEAM_MEMBER_PRIMARY_FIELD_COLS.employee}>
                                   <Form.Item
                                     label={t("employee_teams.fields.employeeid")}
-                                    key={`${index}`}
                                     name={[field.name, "employeeid"]}
                                     rules={[
                                       {
@@ -334,7 +342,6 @@ export function ShopEmployeeTeamsFormComponent({ bodyshop }) {
                                 <Col {...TEAM_MEMBER_PRIMARY_FIELD_COLS.allocation}>
                                   <Form.Item
                                     label={t("employee_teams.fields.allocation_percentage")}
-                                    key={`${index}`}
                                     name={[field.name, "percentage"]}
                                     rules={[
                                       {