diff --git a/src/components/02_personnel-management/FormPerson.vue b/src/components/02_personnel-management/FormPerson.vue
index b2ff925b..cfc6dff8 100644
--- a/src/components/02_personnel-management/FormPerson.vue
+++ b/src/components/02_personnel-management/FormPerson.vue
@@ -406,7 +406,7 @@ watch(
         outlined
         readonly
         :label="$t('personnel.age')"
-        class="col-md-2 col-12"
+        class="col-md-2 col-6"
         :model-value="
           birthDate?.toString() === 'Invalid Date' ||
           birthDate?.toString() === undefined
@@ -470,7 +470,7 @@ watch(
         input-debounce="0"
         option-label="label"
         option-value="value"
-        class="col-2"
+        class="col-md-2 col-6"
         :dense="dense"
         v-model="gender"
         :readonly="readonly"
@@ -504,7 +504,7 @@ watch(
         option-label="label"
         option-value="value"
         v-model="nationality"
-        class="col-2"
+        class="col-md-2 col-6"
         :dense="dense"
         :readonly="readonly"
         :options="nationalityOptions"
diff --git a/src/components/03_customer-management/FormEmployeeHealthCheck.vue b/src/components/03_customer-management/FormEmployeeHealthCheck.vue
index b07fd5da..b08e7a70 100644
--- a/src/components/03_customer-management/FormEmployeeHealthCheck.vue
+++ b/src/components/03_customer-management/FormEmployeeHealthCheck.vue
@@ -266,7 +266,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         :for="`${prefixId}-input-hospital`"
       />
 
-      <div class="col">
+      <div class="col-md col-6">
         <DatePicker
           v-model="checkup.coverageStartDate"
           :id="`${prefixId}-input-coverage-start-date`"
@@ -301,7 +301,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         map-options
         hide-selected
         hide-bottom-space
-        class="col-6"
+        class="col-md-6 col-12"
         input-debounce="0"
         option-value="value"
         option-label="label"
diff --git a/src/components/03_customer-management/FormEmployeeOther.vue b/src/components/03_customer-management/FormEmployeeOther.vue
index 4823d597..3e9a4a89 100644
--- a/src/components/03_customer-management/FormEmployeeOther.vue
+++ b/src/components/03_customer-management/FormEmployeeOther.vue
@@ -79,7 +79,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           :readonly="readonly || employeeOther.statusSave"
           hide-bottom-space
           :label="$t('customerEmployee.formFamily.citizenId')"
-          class="col-4"
+          class="col-md-4 col-12"
           v-model="employeeOther.citizenId"
         />
 
@@ -90,7 +90,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           :readonly="readonly || employeeOther.statusSave"
           hide-bottom-space
           :label="$t('customerEmployee.formFamily.telephoneNo')"
-          class="col-3"
+          class="col-md-3 col-12"
           v-model="employeeOther.telephoneNo"
         />
       </div>
diff --git a/src/components/03_customer-management/FormEmployeePassport.vue b/src/components/03_customer-management/FormEmployeePassport.vue
index 80ea8775..1eb9096d 100644
--- a/src/components/03_customer-management/FormEmployeePassport.vue
+++ b/src/components/03_customer-management/FormEmployeePassport.vue
@@ -220,7 +220,7 @@ watch(
       </div>
     </div>
 
-    <div class="row q-col-gutter-sm">
+    <div class="q-col-gutter-sm" :class="{ row: $q.screen.gt.sm }">
       <div
         class="col row justify-center q-col-gutter-sml"
         style="max-height: 50%"
@@ -252,7 +252,7 @@ watch(
           input-debounce="0"
           option-value="value"
           option-label="label"
-          class="col-6"
+          class="col-md-6 col-12"
           :dense="dense"
           :readonly="readonly"
           :options="workerStatusOptions"
@@ -283,7 +283,7 @@ watch(
           outlined
           :readonly="readonly"
           hide-bottom-space
-          class="col-6"
+          class="col-md-6 col-12"
           :label="$t('customerEmployee.form.previousPassportNumber')"
           v-model="previousPassportRef"
           :rules="[
@@ -306,7 +306,7 @@ watch(
           option-label="label"
           option-value="value"
           hide-dropdown-icon
-          class="col-2"
+          class="col-md-2 col-6"
           :dense="dense"
           :readonly="readonly"
           :options="prefixNameOptions"
@@ -334,7 +334,7 @@ watch(
           outlined
           :readonly="readonly"
           hide-bottom-space
-          class="col"
+          class="col-md col-6"
           :label="$t('form.firstName')"
           :model-value="readonly ? firstName || '-' : firstName"
           @update:model-value="
@@ -388,7 +388,7 @@ watch(
           outlined
           :readonly="readonly"
           hide-bottom-space
-          class="col-4"
+          class="col-md-4 col-6"
           :label="$t('form.firstNameEN')"
           :model-value="readonly ? firstNameEN || '-' : firstNameEN"
           @update:model-value="
@@ -405,7 +405,7 @@ watch(
           outlined
           :readonly="readonly"
           hide-bottom-space
-          class="col-4"
+          class="col-md-4 col-6"
           :label="$t('form.middleNameEN')"
           :model-value="readonly ? middleNameEN || '-' : middleNameEN"
           @update:model-value="
@@ -419,7 +419,7 @@ watch(
           outlined
           :readonly="readonly"
           hide-bottom-space
-          class="col-4"
+          class="col-md-4 col-6"
           :label="$t('form.lastNameEN')"
           :model-value="readonly ? lastNameEN || '-' : lastNameEN"
           @update:model-value="
@@ -453,7 +453,7 @@ watch(
           input-debounce="0"
           option-label="label"
           option-value="value"
-          class="col-2"
+          class="col-md-2 col-4"
           dense
           :readonly="readonly"
           :options="genderOptions"
@@ -482,7 +482,7 @@ watch(
           outlined
           :readonly="readonly"
           hide-bottom-space
-          class="col-6 col-md-3"
+          class="col-8 col-md-3"
           :label="$t('customerEmployee.form.passportNo')"
           v-model="passportNumber"
           :rules="[
@@ -494,7 +494,7 @@ watch(
 
         <DatePicker
           v-model="birthDate"
-          class="col-2"
+          class="col-md-2 col-6"
           :id="`${prefixId}-input-birth-date`"
           :readonly="readonly"
           :label="$t('form.birthDate')"
@@ -513,7 +513,7 @@ watch(
           outlined
           readonly
           :label="$t('personnel.age')"
-          class="col-2"
+          class="col-md-2 col-6"
           :model-value="
             birthDate?.toString() === 'Invalid Date' ||
             birthDate?.toString() === undefined
@@ -534,7 +534,7 @@ watch(
           input-debounce="0"
           option-value="value"
           option-label="label"
-          class="col"
+          class="col-md col-6"
           :dense="dense"
           :readonly="readonly"
           :options="nationalityOptions"
@@ -567,7 +567,7 @@ watch(
           outlined
           :readonly="readonly"
           hide-bottom-space
-          class="col-4"
+          class="col-md-4 col-6"
           :label="$t('customerEmployee.form.placeOfBirth')"
           :model-value="optionStore.mapOption(birthCountry || '')"
           @update:model-value="
@@ -621,7 +621,7 @@ watch(
           outlined
           :readonly="readonly"
           hide-bottom-space
-          class="col-4"
+          class="col-md-4 col-6"
           :label="$t('customerEmployee.form.passportPlace')"
           :model-value="
             readonly
diff --git a/src/components/03_customer-management/FormEmployeeVisa.vue b/src/components/03_customer-management/FormEmployeeVisa.vue
index 4bb8ec8c..a441ae65 100644
--- a/src/components/03_customer-management/FormEmployeeVisa.vue
+++ b/src/components/03_customer-management/FormEmployeeVisa.vue
@@ -147,8 +147,13 @@ watch(
         <slot name="button"></slot>
       </div>
     </div>
-    <div class="row">
-      <div v-if="!ocr" class="col row justify-center" style="max-height: 50%">
+    <div :class="{ row: $q.screen.gt.sm }">
+      <div
+        v-if="!ocr"
+        class="col row justify-center"
+        :class="{ 'q-mb-md': $q.screen.lt.md }"
+        style="max-height: 50%"
+      >
         <q-avatar
           style="border: 1px dashed; border-color: black"
           square
@@ -175,7 +180,7 @@ watch(
           input-debounce="0"
           option-value="value"
           option-label="label"
-          :class="{ 'col-4': !ocr, 'col-6': ocr }"
+          :class="{ 'col-md-4 col-6': !ocr, 'col-6': ocr }"
           :dense="dense"
           :readonly="readonly"
           :options="workerTypeOptions"
@@ -207,7 +212,7 @@ watch(
           outlined
           :readonly="readonly"
           hide-bottom-space
-          :class="{ 'col-4': !ocr, 'col-6': ocr }"
+          :class="{ 'col-md-4 col-6': !ocr, 'col-6': ocr }"
           :label="$t('customerEmployee.form.visaNo')"
           :model-value="readonly ? number || '-' : number"
           @update:model-value="
@@ -221,7 +226,7 @@ watch(
           outlined
           :readonly="readonly"
           hide-bottom-space
-          :class="{ 'col-4': !ocr, 'col-6': ocr }"
+          :class="{ 'col-md-4 col-12': !ocr, 'col-6': ocr }"
           :label="$t('customerEmployee.form.visaPlace')"
           :model-value="readonly ? issuePlace || '-' : issuePlace"
           @update:model-value="
@@ -280,7 +285,7 @@ watch(
             input-debounce="0"
             option-value="value"
             option-label="label"
-            :class="{ 'col-4': !ocr, 'col-6': ocr }"
+            :class="{ 'col-md-4 col-6': !ocr, 'col-6': ocr }"
             :dense="dense"
             :readonly="readonly"
             :options="visaTypeOptions"
@@ -303,7 +308,7 @@ watch(
             </template>
           </q-select>
 
-          <div class="col">
+          <div class="col-md col-6">
             <DatePicker
               :id="`${prefixId}-date-picker-visa-issuance`"
               :readonly="readonly"
@@ -362,7 +367,7 @@ watch(
           outlined
           :readonly="readonly"
           hide-bottom-space
-          class="col-4"
+          class="col-md-4 col-12"
           :label="$t('customerEmployee.form.arrivalCardNo')"
           :model-value="readonly ? arrivalTMNo || '-' : arrivalTMNo"
           @update:model-value="
@@ -374,7 +379,7 @@ watch(
         />
 
         <DatePicker
-          class="col-4"
+          class="col-md-4 col-12"
           :id="`${prefixId}-date-picker-visa-enter`"
           :readonly="readonly"
           :label="$t('customerEmployee.form.visaEnter')"
@@ -391,7 +396,7 @@ watch(
           outlined
           :readonly="readonly"
           hide-bottom-space
-          class="col-4"
+          class="col-md-4 col-12"
           :label="$t('customerEmployee.form.visaCheckpoint')"
           :model-value="readonly ? arrivalAt || '-' : arrivalAt"
           @update:model-value="
@@ -414,7 +419,7 @@ watch(
           input-debounce="0"
           option-value="value"
           option-label="label"
-          class="col-4"
+          class="col-md-4 col-6"
           :dense="dense"
           :readonly="readonly"
           :options="visaTypeOptions"
@@ -446,7 +451,7 @@ watch(
           outlined
           :readonly="readonly"
           hide-bottom-space
-          class="col-4"
+          class="col-md-4 col-6"
           :label="$t('customerEmployee.form.entryCount')"
           v-model="entryCount"
           type="number"
diff --git a/src/components/03_customer-management/FormEmployeeWorkHistory.vue b/src/components/03_customer-management/FormEmployeeWorkHistory.vue
index 7e6fbefc..5a86b103 100644
--- a/src/components/03_customer-management/FormEmployeeWorkHistory.vue
+++ b/src/components/03_customer-management/FormEmployeeWorkHistory.vue
@@ -237,7 +237,7 @@ const workplaceFilter = selectFilterOptionRefMod(
         outlined
         :readonly="readonly || work.statusSave"
         hide-bottom-space
-        class="col-4"
+        class="col-md-4 col-12"
         :label="$t('customerEmployee.formWorkHistory.identityNo')"
         v-model="work.identityNo"
         mask="#############"
@@ -256,7 +256,7 @@ const workplaceFilter = selectFilterOptionRefMod(
         outlined
         :readonly="readonly || work.statusSave"
         hide-bottom-space
-        class="col-4"
+        class="col-md-4 col-6"
         :label="$t('customerEmployee.formWorkHistory.permitNo')"
         v-model="work.workPermitNo"
       />
@@ -266,7 +266,7 @@ const workplaceFilter = selectFilterOptionRefMod(
         outlined
         :readonly="readonly || work.statusSave"
         hide-bottom-space
-        class="col-4"
+        class="col-md-4 col-6"
         :label="$t('customerEmployee.formWorkHistory.permitIssuedAt')"
         v-model="work.workPermitIssueAt"
       />
@@ -274,7 +274,7 @@ const workplaceFilter = selectFilterOptionRefMod(
       <DatePicker
         :label="$t('customerEmployee.formWorkHistory.permitIssueDate')"
         v-model="work.workPermitIssueDate"
-        class="col-3"
+        class="col-md-3 col-6"
         :id="`${prefixId}-date-picker-work-permit-issue-date`"
         :readonly="readonly || work.statusSave"
         clearable
@@ -282,7 +282,7 @@ const workplaceFilter = selectFilterOptionRefMod(
       <DatePicker
         :label="$t('customerEmployee.formWorkHistory.permitExpireDate')"
         v-model="work.workPermitExpireDate"
-        class="col-3"
+        class="col-md-3 col-6"
         :id="`${prefixId}-date-picker-work-permit-expire-date`"
         :readonly="readonly || work.statusSave"
         :disabled-dates="
diff --git a/src/components/03_customer-management/employee/BasicInformation.vue b/src/components/03_customer-management/employee/BasicInformation.vue
index c4d06438..98b42a12 100644
--- a/src/components/03_customer-management/employee/BasicInformation.vue
+++ b/src/components/03_customer-management/employee/BasicInformation.vue
@@ -289,7 +289,7 @@ defineEmits<{
         hide-bottom-space
         :readonly="readonly"
         :disable="!readonly"
-        class="col-3"
+        class="col-md-3 col-12"
         :label="$t('customerEmployee.form.employeeCode')"
         v-model="code"
       />
@@ -301,7 +301,7 @@ defineEmits<{
         outlined
         hide-bottom-space
         :readonly="readonly"
-        class="col-6"
+        class="col-md-6 col-12"
         :label="$t('customerEmployee.form.nrcNo')"
         :model-value="nrcNo"
         @update:model-value="(v) => (typeof v === 'string' ? (nrcNo = v) : '')"
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index ff0cecf4..4a1dea6e 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -86,6 +86,7 @@ import { nextTick } from 'vue';
 import FormEmployeeVisa from 'components/03_customer-management/FormEmployeeVisa.vue';
 import { group } from 'node:console';
 import PaginationPageSize from 'src/components/PaginationPageSize.vue';
+import { AddButton } from 'components/button';
 
 const { t, locale } = useI18n();
 const $q = useQuasar();
@@ -2720,7 +2721,7 @@ const emptyCreateDialog = ref(false);
           class="col-12 col-md-10"
           :class="{
             'q-py-md q-pr-md ': $q.screen.gt.sm,
-            'q-py-md q-px-lg': !$q.screen.gt.sm,
+            'q-pa-sm': !$q.screen.gt.sm,
           }"
           id="employee-form-content"
           style="height: 100%; max-height: 100; overflow-y: auto"
@@ -3205,7 +3206,9 @@ const emptyCreateDialog = ref(false);
 
           <template v-if="employeeFormState.currentTab === 'passport'">
             <div class="q-gutter-sm">
-              <div class="col-12 q-pb-sm text-weight-bold text-body1">
+              <div
+                class="col-12 q-pb-sm text-weight-bold text-body1 row items-center"
+              >
                 <q-icon
                   flat
                   size="xs"
@@ -3215,6 +3218,24 @@ const emptyCreateDialog = ref(false);
                   style="background-color: var(--surface-3)"
                 />
                 {{ $t('customerEmployee.form.group.passport') }}
+                <AddButton
+                  v-if="$q.screen.lt.md"
+                  id="btn-add-work"
+                  icon-only
+                  class="q-ml-sm"
+                  :disabled="
+                    currentFromDataEmployee.employeePassport?.filter((item) => {
+                      if (item.id === undefined) {
+                        return false;
+                      }
+                      return true;
+                    }).length === 0 &&
+                    employeeFormState.currentIndexPassport === -1
+                      ? false
+                      : true
+                  "
+                  @click.stop="employeeFormStore.addPassport()"
+                />
               </div>
 
               <FormEmployeePassport
@@ -3345,7 +3366,9 @@ const emptyCreateDialog = ref(false);
 
           <template v-if="employeeFormState.currentTab === 'visa'">
             <div class="q-gutter-sm">
-              <div class="col-12 q-pb-sm text-weight-bold text-body1">
+              <div
+                class="col-12 q-pb-sm text-weight-bold text-body1 row items-center"
+              >
                 <q-icon
                   flat
                   size="xs"
@@ -3355,6 +3378,23 @@ const emptyCreateDialog = ref(false);
                   style="background-color: var(--surface-3)"
                 />
                 {{ $t('customerEmployee.form.group.visa') }}
+                <AddButton
+                  v-if="$q.screen.lt.md"
+                  id="btn-add-work"
+                  icon-only
+                  class="q-ml-sm"
+                  :disabled="
+                    currentFromDataEmployee.employeeVisa?.filter((item) => {
+                      if (item.id === undefined) {
+                        return false;
+                      }
+                      return true;
+                    }).length === 0 && employeeFormState.currentIndexVisa === -1
+                      ? false
+                      : true
+                  "
+                  @click.stop="employeeFormStore.addVisa()"
+                />
               </div>
 
               <FormEmployeeVisa
@@ -3488,6 +3528,24 @@ const emptyCreateDialog = ref(false);
                 />
 
                 {{ $t(`customerEmployee.formHealthCheck.title`) }}
+                <AddButton
+                  v-if="$q.screen.lt.md"
+                  id="btn-add-work"
+                  icon-only
+                  class="q-ml-sm"
+                  :disabled="
+                    currentFromDataEmployee.employeeCheckup?.filter((item) => {
+                      if (item.id === undefined) {
+                        return false;
+                      }
+                      return true;
+                    }).length === 0 &&
+                    employeeFormState.currentIndexCheckup === -1
+                      ? false
+                      : true
+                  "
+                  @click.stop="employeeFormStore.addCheckup()"
+                />
               </div>
               <FormEmployeeHealthCheck
                 v-if="employeeFormState.currentTab === 'healthCheck'"
@@ -3565,6 +3623,24 @@ const emptyCreateDialog = ref(false);
                   style="background-color: var(--surface-3)"
                 />
                 {{ $t(`customerEmployee.form.group.workHistory`) }}
+                <AddButton
+                  v-if="$q.screen.lt.md"
+                  id="btn-add-work"
+                  icon-only
+                  class="q-ml-sm"
+                  :disabled="
+                    currentFromDataEmployee.employeeWork?.filter((item) => {
+                      if (item.id === undefined) {
+                        return false;
+                      }
+                      return true;
+                    }).length === 0 &&
+                    employeeFormState.currentIndexWorkHistory === -1
+                      ? false
+                      : true
+                  "
+                  @click.stop="employeeFormStore.addWorkHistory()"
+                />
               </div>
               <FormEmployeeWorkHistory
                 v-if="employeeFormState.currentTab === 'workHistory'"
@@ -4397,7 +4473,7 @@ const emptyCreateDialog = ref(false);
         }"
       >
         <div
-          class="col bg-red surface-1 rounded bordered row"
+          class="col full-width surface-1 rounded bordered row"
           :key="String(!employeeFormState.isEmployeeEdit)"
         >
           <div class="col full-height scroll" v-if="$q.screen.gt.sm">
@@ -4597,7 +4673,7 @@ const emptyCreateDialog = ref(false);
             class="col-12 col-md-10 row"
             :class="{
               'q-py-md q-pr-md ': $q.screen.gt.sm,
-              'q-py-md q-px-lg': !$q.screen.gt.sm,
+              'q-pa-sm': !$q.screen.gt.sm,
             }"
             id="drawer-employee-form-content"
             style="height: 100%; overflow-y: auto"
@@ -5097,7 +5173,9 @@ const emptyCreateDialog = ref(false);
 
             <template v-if="employeeFormState.currentTab === 'passport'">
               <div class="q-gutter-sm full-width column no-wrap">
-                <div class="q-pb-sm text-weight-bold text-body1">
+                <div
+                  class="q-pb-sm text-weight-bold text-body1 row items-center"
+                >
                   <q-icon
                     flat
                     size="xs"
@@ -5107,6 +5185,26 @@ const emptyCreateDialog = ref(false);
                     style="background-color: var(--surface-3)"
                   />
                   {{ $t('customerEmployee.form.group.passport') }}
+                  <AddButton
+                    v-if="$q.screen.lt.md"
+                    id="btn-add-work"
+                    icon-only
+                    class="q-ml-sm"
+                    :disabled="
+                      currentFromDataEmployee.employeePassport?.filter(
+                        (item) => {
+                          if (item.id === undefined) {
+                            return false;
+                          }
+                          return true;
+                        },
+                      ).length === 0 &&
+                      employeeFormState.currentIndexPassport === -1
+                        ? false
+                        : true
+                    "
+                    @click.stop="employeeFormStore.addPassport()"
+                  />
                 </div>
 
                 <div class="col self-center">
@@ -5278,7 +5376,9 @@ const emptyCreateDialog = ref(false);
 
             <template v-if="employeeFormState.currentTab === 'visa'">
               <div class="q-gutter-sm full-width column no-wrap">
-                <div class="q-pb-sm text-weight-bold text-body1">
+                <div
+                  class="q-pb-sm text-weight-bold text-body1 row items-center"
+                >
                   <q-icon
                     flat
                     size="xs"
@@ -5288,6 +5388,24 @@ const emptyCreateDialog = ref(false);
                     style="background-color: var(--surface-3)"
                   />
                   {{ $t('customerEmployee.form.group.visa') }}
+                  <AddButton
+                    v-if="$q.screen.lt.md"
+                    id="btn-add-work"
+                    icon-only
+                    class="q-ml-sm"
+                    :disabled="
+                      currentFromDataEmployee.employeeVisa?.filter((item) => {
+                        if (item.id === undefined) {
+                          return false;
+                        }
+                        return true;
+                      }).length === 0 &&
+                      employeeFormState.currentIndexVisa === -1
+                        ? false
+                        : true
+                    "
+                    @click.stop="employeeFormStore.addVisa()"
+                  />
                 </div>
                 <div class="col self-center">
                   <div
@@ -5423,7 +5541,7 @@ const emptyCreateDialog = ref(false);
             <template v-if="employeeFormState.currentTab === 'healthCheck'">
               <div class="q-gutter-sm full-width column">
                 <div
-                  class="q-pb-sm text-weight-bold text-body1 row items-center"
+                  class="q-pb-sm text-weight-bold text-body1 row items-center row items-center"
                 >
                   <q-icon
                     flat
@@ -5435,6 +5553,26 @@ const emptyCreateDialog = ref(false);
                   />
 
                   {{ $t(`customerEmployee.formHealthCheck.title`) }}
+                  <AddButton
+                    v-if="$q.screen.lt.md"
+                    id="btn-add-work"
+                    icon-only
+                    class="q-ml-sm"
+                    :disabled="
+                      currentFromDataEmployee.employeeCheckup?.filter(
+                        (item) => {
+                          if (item.id === undefined) {
+                            return false;
+                          }
+                          return true;
+                        },
+                      ).length === 0 &&
+                      employeeFormState.currentIndexCheckup === -1
+                        ? false
+                        : true
+                    "
+                    @click.stop="employeeFormStore.addCheckup()"
+                  />
                 </div>
 
                 <div class="col self-center">
@@ -5526,6 +5664,24 @@ const emptyCreateDialog = ref(false);
                     style="background-color: var(--surface-3)"
                   />
                   {{ $t(`customerEmployee.form.group.workHistory`) }}
+                  <AddButton
+                    v-if="$q.screen.lt.md"
+                    id="btn-add-work"
+                    icon-only
+                    class="q-ml-sm"
+                    :disabled="
+                      currentFromDataEmployee.employeeWork?.filter((item) => {
+                        if (item.id === undefined) {
+                          return false;
+                        }
+                        return true;
+                      }).length === 0 &&
+                      employeeFormState.currentIndexWorkHistory === -1
+                        ? false
+                        : true
+                    "
+                    @click.stop="employeeFormStore.addWorkHistory()"
+                  />
                 </div>
 
                 <div class="col self-center">