diff --git a/src/components/03_customer-management/AboutComponent.vue b/src/components/03_customer-management/AboutComponent.vue
index eacccf6a..e257f4aa 100644
--- a/src/components/03_customer-management/AboutComponent.vue
+++ b/src/components/03_customer-management/AboutComponent.vue
@@ -19,14 +19,14 @@ const customerName = defineModel<string>('customerName');
 const customerEnglishName = defineModel<string>('customerEnglishName');
 const authorizedCapital = defineModel<string>('authorizedCapital');
 const registerName = defineModel<string>('registerName');
-const registerDate = defineModel<Date | null>('registerDate');
+const registerDate = defineModel<Date | null | string>('registerDate');
 const branchNo = defineModel<number>('branchNo');
 </script>
 
 <template>
   <div class="row">
-    <div class="col-3 app-text-muted">• {{ $t(`about`) }}</div>
-    <div class="col-9 row q-col-gutter-md">
+    <div class="col-md-3 col-12 app-text-muted">• {{ $t(`about`) }}</div>
+    <div class="col-md-9 col-12 row q-col-gutter-md">
       <q-input
         :for="`${prefixId}-input-branch-code`"
         :id="`${prefixId}-input-branch-code`"
@@ -35,7 +35,7 @@ const branchNo = defineModel<number>('branchNo');
         outlined
         :readonly="true"
         hide-bottom-space
-        class="col-3"
+        class="col-md-3 col-6"
         :label="$t('branchCode')"
         v-model="branchCode"
       />
@@ -47,7 +47,7 @@ const branchNo = defineModel<number>('branchNo');
         outlined
         :readonly="!!branchCode"
         hide-bottom-space
-        class="col-3"
+        class="col-md-3 col-6"
         label="ลำดับที่"
         v-model="branchNo"
       />
@@ -60,7 +60,7 @@ const branchNo = defineModel<number>('branchNo');
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col"
+        class="col-md col-12"
         :label="$t('customerName')"
         v-model="customerName"
       />
@@ -87,7 +87,7 @@ const branchNo = defineModel<number>('branchNo');
           outlined
           :readonly="true"
           hide-bottom-space
-          class="col-3"
+          class="col-md-3 col-6"
           :label="$t('branchCode')"
           v-model="branchCode"
         />
@@ -99,7 +99,7 @@ const branchNo = defineModel<number>('branchNo');
           outlined
           :readonly="true"
           hide-bottom-space
-          class="col-3"
+          class="col-md-3 col-6"
           :label="$t('legalEntityCode')"
           v-model="legalEntityCode"
         />
@@ -112,7 +112,7 @@ const branchNo = defineModel<number>('branchNo');
           outlined
           :readonly="readonly"
           hide-bottom-space
-          class="col-3"
+          class="col-md-3 col-12"
           :label="$t('customerEnglishName')"
           v-model="customerEnglishName"
         />
@@ -125,7 +125,7 @@ const branchNo = defineModel<number>('branchNo');
           outlined
           :readonly="readonly"
           hide-bottom-space
-          class="col-3"
+          class="col-md-3 col-12"
           :label="$t('customerName')"
           v-model="customerName"
         />
@@ -139,7 +139,7 @@ const branchNo = defineModel<number>('branchNo');
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-6"
+        class="col-md-6 col-12"
         :label="$t('taxNo')"
         v-model="taxNo"
         :rules="[
@@ -168,7 +168,7 @@ const branchNo = defineModel<number>('branchNo');
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-3"
+        class="col-md-3 col-6"
         :label="$t('authorizedCapital')"
         v-model="authorizedCapital"
       />
@@ -183,7 +183,7 @@ const branchNo = defineModel<number>('branchNo');
         :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
         :enableTimePicker="false"
         :disabled="readonly"
-        class="col-3"
+        class="col-md-3 col-12"
       >
         <template #year="{ value }">
           {{ $i18n.locale === 'th-th' ? value + 543 : value }}
@@ -202,9 +202,11 @@ const branchNo = defineModel<number>('branchNo');
             placeholder="DD/MM/YYYY"
             :mask="readonly ? '' : '##/##/####'"
             :model-value="
-              registerDate && readonly
-                ? dateFormat(registerDate)
-                : dateFormat(registerDate, false, false, true)
+              registerDate
+                ? readonly
+                  ? dateFormat(registerDate)
+                  : dateFormat(registerDate, false, false, true)
+                : ''
             "
             @update:model-value="
               (v) => {
@@ -225,9 +227,9 @@ const branchNo = defineModel<number>('branchNo');
             <template v-slot:append>
               <q-icon
                 v-if="registerDate && !readonly"
-                name="mdi-close"
-                class="cursor-pointer"
-                size="xs"
+                name="mdi-close-circle"
+                class="cursor-pointer app-text-muted"
+                size="sm"
                 @click="registerDate = undefined"
               />
             </template>
diff --git a/src/components/03_customer-management/BasicInformation.vue b/src/components/03_customer-management/BasicInformation.vue
index df1f1be5..25ef6ab6 100644
--- a/src/components/03_customer-management/BasicInformation.vue
+++ b/src/components/03_customer-management/BasicInformation.vue
@@ -82,7 +82,7 @@ defineEmits<{
       outlined
       :readonly="readonly"
       hide-bottom-space
-      class="col-6"
+      class="col-md-6 col-12"
       :label="$t('formDialogCustomerName')"
       v-model="personName"
     />
@@ -94,7 +94,7 @@ defineEmits<{
       outlined
       :readonly="readonly"
       hide-bottom-space
-      class="col-6"
+      class="col-md-6 col-12"
       :label="$t('taxNo')"
       v-model="taxNo"
       :rules="[
@@ -111,7 +111,7 @@ defineEmits<{
       outlined
       :readonly="readonly"
       hide-bottom-space
-      class="col-6"
+      class="col-md-6 col-12"
       :label="
         $t(typeCustomer === 'PERS' ? 'corporationThai' : 'corporationThaiName')
       "
@@ -124,7 +124,7 @@ defineEmits<{
       outlined
       :readonly="readonly"
       hide-bottom-space
-      class="col-6"
+      class="col-md-6 col-12"
       :label="
         $t(
           typeCustomer === 'PERS'
@@ -142,7 +142,7 @@ defineEmits<{
       outlined
       :readonly="readonly"
       hide-bottom-space
-      class="col-6"
+      class="col-md-6 col-12"
       :label="$t('companyOwnerName')"
       v-model="personName"
     />
diff --git a/src/components/03_customer-management/ContactInformation.vue b/src/components/03_customer-management/ContactInformation.vue
index 75a72859..ca66d322 100644
--- a/src/components/03_customer-management/ContactInformation.vue
+++ b/src/components/03_customer-management/ContactInformation.vue
@@ -14,8 +14,10 @@ const telephone = defineModel<string>('telephone');
 
 <template>
   <div class="row">
-    <div class="col-3 app-text-muted">• {{ $t(`formDialogTitleContact`) }}</div>
-    <div class="col-9 row q-col-gutter-md">
+    <div class="col-md-3 col-12 app-text-muted">
+      • {{ $t(`formDialogTitleContact`) }}
+    </div>
+    <div class="col-md-9 col-12 row q-col-gutter-md">
       <q-input
         :for="`${prefixId}-input-mail`"
         :id="`${prefixId}-input-mail`"
@@ -23,7 +25,7 @@ const telephone = defineModel<string>('telephone');
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-6"
+        class="col-md-6 col-12"
         :label="$t('formDialogInputEmail')"
         v-model="mail"
       />
@@ -34,7 +36,7 @@ const telephone = defineModel<string>('telephone');
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-6"
+        class="col-md-6 col-12"
         :label="$t('formDialogInputTelephone')"
         v-model="telephone"
       />
diff --git a/src/components/03_customer-management/FormBusiness.vue b/src/components/03_customer-management/FormBusiness.vue
index 9439f8d6..91a951cf 100644
--- a/src/components/03_customer-management/FormBusiness.vue
+++ b/src/components/03_customer-management/FormBusiness.vue
@@ -14,7 +14,7 @@ const jobPositionEN = defineModel<string>('jobPositionEn');
 
 const jobDescription = defineModel<string>('jobDescription');
 
-const payDate = defineModel<Date | null>('payDate');
+const payDate = defineModel<Date | null | string>('payDate');
 const wageRate = defineModel<number>('wageRate');
 
 const saleEmployee = defineModel<string>('saleEmployee');
@@ -49,8 +49,10 @@ onMounted(async () => {
 </script>
 <template>
   <div class="col-12 row q-col-gutter-y-md">
-    <div class="col-3 app-text-muted">• {{ $t('businessInformation') }}</div>
-    <div class="col-9 row q-col-gutter-md">
+    <div class="col-md-3 col-12 app-text-muted">
+      • {{ $t('businessInformation') }}
+    </div>
+    <div class="col-md-9 col-12 row q-col-gutter-md">
       <q-input
         :for="`${prefixId}-input-employment-office`"
         :id="`${prefixId}-input-employment-office`"
@@ -75,7 +77,7 @@ onMounted(async () => {
         v-model="bussinessType"
         :options="typeBusinessOptions"
         :label="$t('businessType')"
-        class="col-6"
+        class="col-md-6 col-12"
       />
 
       <q-input
@@ -85,7 +87,7 @@ onMounted(async () => {
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-6"
+        class="col-md-6 col-12"
         :label="$t('businessTypeEN')"
         v-model="bussinessTypeEN"
       />
@@ -103,7 +105,7 @@ onMounted(async () => {
         v-model="jobPosition"
         :options="jobPositionOptions"
         :label="$t('jobPosition')"
-        class="col-6"
+        class="col-md-6 col-12"
       />
 
       <q-input
@@ -113,7 +115,7 @@ onMounted(async () => {
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-6"
+        class="col-md-6 col-12"
         :label="$t('jobPositionEN')"
         v-model="jobPositionEN"
       />
@@ -125,7 +127,7 @@ onMounted(async () => {
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-6"
+        class="col-md-6 col-12"
         :label="$t('jobDescription')"
         v-model="jobDescription"
       />
@@ -140,7 +142,7 @@ onMounted(async () => {
         :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
         :enableTimePicker="false"
         :disabled="readonly"
-        class="col-3"
+        class="col-md-3 col-12"
       >
         <template #year="{ value }">
           {{ $i18n.locale === 'th-th' ? value + 543 : value }}
@@ -159,9 +161,11 @@ onMounted(async () => {
             placeholder="DD/MM/YYYY"
             :mask="readonly ? '' : '##/##/####'"
             :model-value="
-              payDate && readonly
-                ? dateFormat(payDate)
-                : dateFormat(payDate, false, false, true)
+              payDate
+                ? readonly
+                  ? dateFormat(payDate)
+                  : dateFormat(payDate, false, false, true)
+                : ''
             "
             @update:model-value="
               (v) => {
@@ -182,9 +186,9 @@ onMounted(async () => {
             <template v-slot:append>
               <q-icon
                 v-if="payDate && !readonly"
-                name="mdi-close"
-                class="cursor-pointer"
-                size="xs"
+                name="mdi-close-circle"
+                class="cursor-pointer app-text-muted"
+                size="sm"
                 @click="payDate = undefined"
               />
             </template>
@@ -199,7 +203,7 @@ onMounted(async () => {
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-3"
+        class="col-md-3 col-6"
         :label="$t('payRate')"
         v-model="wageRate"
       />
diff --git a/src/components/03_customer-management/OtherInformation.vue b/src/components/03_customer-management/OtherInformation.vue
index 1e3b1773..9d223436 100644
--- a/src/components/03_customer-management/OtherInformation.vue
+++ b/src/components/03_customer-management/OtherInformation.vue
@@ -14,8 +14,10 @@ const fileEmployerDocument = defineModel<File | null>('fileEmployerDocument');
 
 <template>
   <div class="row">
-    <div class="col-3 app-text-muted">• {{ $t(`otherDocument`) }}</div>
-    <div class="col-9 row q-col-gutter-md">
+    <div class="col-md-3 col-12 app-text-muted">
+      • {{ $t(`otherDocument`) }}
+    </div>
+    <div class="col-md-9 col-12 row q-col-gutter-md">
       <q-file
         :id="`${prefixId}-input-attchment`"
         :dense="dense"
@@ -24,7 +26,7 @@ const fileEmployerDocument = defineModel<File | null>('fileEmployerDocument');
         multiple
         append
         :label="$t('additionalEmployerDocument')"
-        class="col-6"
+        class="col-md-6 col-12"
         v-model="fileEmployerDocument"
       >
         <template v-slot:prepend>