diff --git a/src/pages/03_customer-management/components/employer/EmployerFormAbout.vue b/src/pages/03_customer-management/components/employer/EmployerFormAbout.vue
index fcd31af3..0134a8e8 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormAbout.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormAbout.vue
@@ -233,7 +233,10 @@ watch(
           class="col-6 col-md-3"
           :label="$t('customer.form.headQuarters.telephoneNo')"
           for="input-first-name-en"
-          v-model="telephoneNo"
+          :model-value="readonly ? telephoneNo || '-' : telephoneNo"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (telephoneNo = v) : '')
+          "
         >
           <template #prepend>
             <q-icon
diff --git a/src/pages/03_customer-management/components/employer/EmployerFormAuthorized.vue b/src/pages/03_customer-management/components/employer/EmployerFormAuthorized.vue
index 75a33a9c..bc2f33b8 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormAuthorized.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormAuthorized.vue
@@ -18,7 +18,10 @@ const authorizedNameEN = defineModel<string>('authorizedNameEN');
       hide-bottom-space
       class="col-md-6 col-12"
       :label="$t('customerBranch.tab.authorized')"
-      v-model="authorizedName"
+      :model-value="readonly ? authorizedName || '-' : authorizedName"
+      @update:model-value="
+        (v) => (typeof v === 'string' ? (authorizedName = v) : '')
+      "
     />
     <q-input
       :for="`${prefixId}-input-contact-name`"
@@ -29,7 +32,10 @@ const authorizedNameEN = defineModel<string>('authorizedNameEN');
       hide-bottom-space
       class="col-md-6 col-12"
       :label="`${$t('customerBranch.tab.authorized')} (EN)`"
-      v-model="authorizedNameEN"
+      :model-value="readonly ? authorizedNameEN || '-' : authorizedNameEN"
+      @update:model-value="
+        (v) => (typeof v === 'string' ? (authorizedNameEN = v) : '')
+      "
     />
   </div>
 </template>
diff --git a/src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue b/src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue
index 33884574..ad1ec789 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue
@@ -82,10 +82,7 @@ watch(
 
 <template>
   <div class="row q-col-gutter-sm">
-    <div
-      v-if="!hideAction"
-      class="col-12 text-weight-bold text-body1 row items-center"
-    >
+    <div class="col-12 text-weight-bold text-body1 row items-center">
       <q-icon
         flat
         size="xs"
@@ -193,7 +190,7 @@ watch(
           outlined
           :readonly="readonly"
           hide-bottom-space
-          class="col-12 col-md-6"
+          class="col-12 col-md-5"
           :label="$t('customer.form.customerName')"
           for="input-first-name"
           v-model="registerName"
diff --git a/src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue b/src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue
index d8e8d7f5..32b0e394 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue
@@ -239,7 +239,10 @@ let jobPositionENFilter = selectFilterOptionRefMod(
       hide-bottom-space
       class="col-md-6 col-12"
       :label="$t('customer.form.jobDescription')"
-      v-model="jobDescription"
+      :model-value="readonly ? jobDescription || '-' : jobDescription"
+      @update:model-value="
+        (v) => (typeof v === 'string' ? (jobDescription = v) : '')
+      "
     />
 
     <q-input
@@ -251,7 +254,8 @@ let jobPositionENFilter = selectFilterOptionRefMod(
       hide-bottom-space
       class="col-md-3 col-6"
       :label="$t('customer.form.payDay')"
-      v-model="payDate"
+      :model-value="readonly ? payDate || '-' : payDate"
+      @update:model-value="(v) => (typeof v === 'string' ? (payDate = v) : '')"
     />
 
     <q-input
@@ -263,7 +267,10 @@ let jobPositionENFilter = selectFilterOptionRefMod(
       hide-bottom-space
       class="col-md-3 col-6"
       label="Pay day"
-      v-model="payDateEN"
+      :model-value="readonly ? payDateEN || '-' : payDateEN"
+      @update:model-value="
+        (v) => (typeof v === 'string' ? (payDateEN = v) : '')
+      "
     />
 
     <q-input
@@ -287,7 +294,10 @@ let jobPositionENFilter = selectFilterOptionRefMod(
       hide-bottom-space
       class="col-md-3 col-6"
       :label="`${$t('customer.form.payRate')} (Text)`"
-      v-model="wageRateText"
+      :model-value="readonly ? wageRateText || '-' : wageRateText"
+      @update:model-value="
+        (v) => (typeof v === 'string' ? (wageRateText = v) : '')
+      "
     />
   </div>
 </template>
diff --git a/src/pages/03_customer-management/components/employer/EmployerFormContact.vue b/src/pages/03_customer-management/components/employer/EmployerFormContact.vue
index 093571d1..c761966f 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormContact.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormContact.vue
@@ -21,7 +21,10 @@ const agent = defineModel<string>('agent');
       hide-bottom-space
       class="col-md-6 col-12"
       :label="$t('customer.table.contactName')"
-      v-model="contactName"
+      :model-value="readonly ? contactName || '-' : contactName"
+      @update:model-value="
+        (v) => (typeof v === 'string' ? (contactName = v) : '')
+      "
     />
 
     <q-input
@@ -43,7 +46,8 @@ const agent = defineModel<string>('agent');
                 $t('form.error.invalid'),
             ]
       "
-      v-model="email"
+      :model-value="readonly ? email || '-' : email"
+      @update:model-value="(v) => (typeof v === 'string' ? (email = v) : '')"
     >
       <template #prepend>
         <q-icon
@@ -63,7 +67,10 @@ const agent = defineModel<string>('agent');
       hide-bottom-space
       class="col-md-6 col-12"
       :label="$t('form.telephone')"
-      v-model="contactTel"
+      :model-value="readonly ? contactTel || '-' : contactTel"
+      @update:model-value="
+        (v) => (typeof v === 'string' ? (contactTel = v) : '')
+      "
     >
       <template #prepend>
         <q-icon
@@ -84,7 +91,10 @@ const agent = defineModel<string>('agent');
       hide-bottom-space
       class="col-md-6 col-12"
       :label="$t('customer.form.headQuarters.telephoneNo')"
-      v-model="officeTel"
+      :model-value="readonly ? officeTel || '-' : officeTel"
+      @update:model-value="
+        (v) => (typeof v === 'string' ? (officeTel = v) : '')
+      "
     >
       <template #prepend>
         <q-icon
@@ -105,7 +115,8 @@ const agent = defineModel<string>('agent');
       hide-bottom-space
       class="col-md-6 col-12"
       :label="$t('customer.form.agent')"
-      v-model="agent"
+      :model-value="readonly ? agent || '-' : agent"
+      @update:model-value="(v) => (typeof v === 'string' ? (agent = v) : '')"
     />
   </div>
 </template>