diff --git a/src/components/03_customer-management/AboutComponent.vue b/src/components/03_customer-management/AboutComponent.vue
index 874d6ec7..12fe8727 100644
--- a/src/components/03_customer-management/AboutComponent.vue
+++ b/src/components/03_customer-management/AboutComponent.vue
@@ -30,9 +30,8 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
         id="input-branchCode"
         v-if="typeCustomer === 'PERS'"
         :dense="dense"
-        :outlined="!readonly"
+        outlined
         :readonly="true"
-        :borderless="readonly"
         hide-bottom-space
         class="col-3"
         :label="$t('branchCode')"
@@ -44,9 +43,8 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
         id="input-customerName"
         v-if="typeCustomer === 'PERS'"
         :dense="dense"
-        :outlined="!readonly"
+        outlined
         :readonly="readonly"
-        :borderless="readonly"
         hide-bottom-space
         class="col"
         :label="$t('customerName')"
@@ -58,9 +56,8 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
         id="input-customerEnglishName"
         v-if="typeCustomer === 'PERS'"
         :dense="dense"
-        :outlined="!readonly"
+        outlined
         :readonly="readonly"
-        :borderless="readonly"
         hide-bottom-space
         class="col"
         :label="$t('customerEnglishName')"
@@ -73,9 +70,8 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
           id="input-branchCode"
           v-if="typeCustomer === 'CORP'"
           :dense="dense"
-          :outlined="!readonly"
+          outlined
           :readonly="true"
-          :borderless="readonly"
           hide-bottom-space
           class="col-3"
           :label="$t('branchCode')"
@@ -86,9 +82,8 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
           id="input-legalEntityCode"
           v-if="typeCustomer === 'CORP'"
           :dense="dense"
-          :outlined="!readonly"
+          outlined
           :readonly="true"
-          :borderless="readonly"
           hide-bottom-space
           class="col-3"
           :label="$t('legalEntityCode')"
@@ -100,9 +95,8 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
           id="input-customerEnglishName"
           v-if="typeCustomer === 'CORP'"
           :dense="dense"
-          :outlined="!readonly"
+          outlined
           :readonly="readonly"
-          :borderless="readonly"
           hide-bottom-space
           class="col-3"
           :label="$t('customerEnglishName')"
@@ -114,9 +108,8 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
           id="input-customerName"
           v-if="typeCustomer === 'CORP'"
           :dense="dense"
-          :outlined="!readonly"
+          outlined
           :readonly="readonly"
-          :borderless="readonly"
           hide-bottom-space
           class="col-3"
           :label="$t('customerName')"
@@ -129,9 +122,8 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
         id="input-taxNo"
         v-if="typeCustomer === 'CORP'"
         :dense="dense"
-        :outlined="!readonly"
+        outlined
         :readonly="readonly"
-        :borderless="readonly"
         hide-bottom-space
         class="col-6"
         :label="$t('taxNo')"
@@ -142,9 +134,8 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
         id="input-registerName"
         v-if="typeCustomer === 'CORP'"
         :dense="dense"
-        :outlined="!readonly"
+        outlined
         :readonly="readonly"
-        :borderless="readonly"
         hide-bottom-space
         class="col-6"
         :label="$t('registerName')"
@@ -155,9 +146,8 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
         id="input-authorizedCapital"
         v-if="typeCustomer === 'CORP'"
         :dense="dense"
-        :outlined="!readonly"
+        outlined
         :readonly="readonly"
-        :borderless="readonly"
         hide-bottom-space
         class="col-3"
         :label="$t('authorizedCapital')"
@@ -187,9 +177,8 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
             id="input-start-date"
             :label="$t('registerDate')"
             :dense="dense"
-            :outlined="readonly ? false : outlined"
+            outlined
             :readonly="readonly"
-            :borderless="readonly"
             :model-value="registerDate ? dateFormat(registerDate) : ''"
           >
             <template v-slot:prepend>
diff --git a/src/components/03_customer-management/BasicInformation.vue b/src/components/03_customer-management/BasicInformation.vue
index 91c75ee6..506c812b 100644
--- a/src/components/03_customer-management/BasicInformation.vue
+++ b/src/components/03_customer-management/BasicInformation.vue
@@ -50,9 +50,8 @@ onMounted(async () => {});
       id="input-employer-id"
       v-if="typeCustomer === 'PERS'"
       :dense="dense"
-      :outlined="!readonly"
+      outlined
       :readonly="readonly"
-      :borderless="readonly"
       hide-bottom-space
       class="col-6"
       :label="$t('formDialogCustomerName')"
@@ -63,9 +62,8 @@ onMounted(async () => {});
       id="input-tax-no"
       v-if="typeCustomer === 'PERS'"
       :dense="dense"
-      :outlined="!readonly"
+      outlined
       :readonly="readonly"
-      :borderless="readonly"
       hide-bottom-space
       class="col-6"
       :label="$t('taxNo')"
@@ -76,9 +74,8 @@ onMounted(async () => {});
       for="input-customer-name"
       id="input-customer-name"
       :dense="dense"
-      :outlined="!readonly"
+      outlined
       :readonly="readonly"
-      :borderless="readonly"
       hide-bottom-space
       class="col-6"
       :label="
@@ -90,9 +87,8 @@ onMounted(async () => {});
       for="input-customer-name-en"
       id="input-customer-name-en"
       :dense="dense"
-      :outlined="!readonly"
+      outlined
       :readonly="readonly"
-      :borderless="readonly"
       hide-bottom-space
       class="col-6"
       :label="
@@ -109,9 +105,8 @@ onMounted(async () => {});
       v-if="typeCustomer !== 'PERS'"
       for="input-owner-name"
       :dense="dense"
-      :outlined="!readonly"
+      outlined
       :readonly="readonly"
-      :borderless="readonly"
       hide-bottom-space
       class="col-6"
       :label="$t('companyOwnerName')"
@@ -126,9 +121,8 @@ onMounted(async () => {});
       input-debounce="0"
       :hide-dropdown-icon="readonly"
       :dense="dense"
-      :outlined="!readonly"
+      outlined
       :readonly="readonly || customerBranch !== undefined"
-      :borderless="readonly"
       hide-bottom-space
       class="col-12"
       :label="$t('formDialogEmployerBranchCode')"
@@ -326,9 +320,8 @@ onMounted(async () => {});
     <q-input
       for="input-employeeID"
       :dense="dense"
-      :outlined="!readonly"
+      outlined
       :readonly="true"
-      :borderless="readonly"
       hide-bottom-space
       class="col-6"
       :label="$t('formDialogEmployeeID')"
@@ -338,9 +331,8 @@ onMounted(async () => {});
       mask="## #### ###### #"
       for="input-nrcNo"
       :dense="dense"
-      :outlined="!readonly"
+      outlined
       :readonly="readonly"
-      :borderless="readonly"
       hide-bottom-space
       class="col-6"
       :label="$t('formDialogEmployeeNRCNo')"
diff --git a/src/components/03_customer-management/ContactInformation.vue b/src/components/03_customer-management/ContactInformation.vue
index e40de596..605acc64 100644
--- a/src/components/03_customer-management/ContactInformation.vue
+++ b/src/components/03_customer-management/ContactInformation.vue
@@ -19,9 +19,8 @@ const telephone = defineModel<string>('telephone');
         for="input-mail"
         id="input-mail"
         :dense="dense"
-        :outlined="!readonly"
+        outlined
         :readonly="readonly"
-        :borderless="readonly"
         hide-bottom-space
         class="col-6"
         :label="$t('formDialogInputEmail')"
@@ -31,9 +30,8 @@ const telephone = defineModel<string>('telephone');
         for="input-telephone"
         id="input-telephone"
         :dense="dense"
-        :outlined="!readonly"
+        outlined
         :readonly="readonly"
-        :borderless="readonly"
         hide-bottom-space
         class="col-6"
         :label="$t('formDialogInputTelephone')"
diff --git a/src/components/03_customer-management/FormBusiness.vue b/src/components/03_customer-management/FormBusiness.vue
index 9d46ffec..976d5316 100644
--- a/src/components/03_customer-management/FormBusiness.vue
+++ b/src/components/03_customer-management/FormBusiness.vue
@@ -64,9 +64,8 @@ defineProps<{
         for="input-employment-office"
         id="input-employment-office"
         :dense="dense"
-        :outlined="!readonly"
+        outlined
         :readonly="readonly"
-        :borderless="readonly"
         hide-bottom-space
         class="col-12"
         :label="$t('inputCustomerAddress')"
@@ -80,9 +79,8 @@ defineProps<{
         option-label="label"
         map-options
         :dense="dense"
-        :outlined="!readonly"
+        outlined
         :readonly="readonly"
-        :borderless="readonly"
         v-model="bussinessType"
         :options="typeBusinessOptions"
         :label="$t('businessType')"
@@ -93,9 +91,8 @@ defineProps<{
         for="input-bussiness-type-en"
         id="input-bussiness-type-en"
         :dense="dense"
-        :outlined="!readonly"
+        outlined
         :readonly="readonly"
-        :borderless="readonly"
         hide-bottom-space
         class="col-6"
         :label="$t('businessTypeEN')"
@@ -109,9 +106,8 @@ defineProps<{
         option-label="label"
         map-options
         :dense="dense"
-        :outlined="!readonly"
+        outlined
         :readonly="readonly"
-        :borderless="readonly"
         v-model="jobPosition"
         :options="jobPositionOptions"
         :label="$t('jobPosition')"
@@ -122,9 +118,8 @@ defineProps<{
         for="input-job-position-en"
         id="input-job-position-en"
         :dense="dense"
-        :outlined="!readonly"
+        outlined
         :readonly="readonly"
-        :borderless="readonly"
         hide-bottom-space
         class="col-6"
         :label="$t('jobPositionEN')"
@@ -135,9 +130,8 @@ defineProps<{
         for="input-job-description"
         id="input-job-description"
         :dense="dense"
-        :outlined="!readonly"
+        outlined
         :readonly="readonly"
-        :borderless="readonly"
         hide-bottom-space
         class="col-6"
         :label="$t('jobDescription')"
@@ -167,9 +161,8 @@ defineProps<{
             id="input-start-date"
             :label="$t('payDay')"
             :dense="dense"
-            :outlined="readonly ? false : outlined"
+            outlined
             :readonly="readonly"
-            :borderless="readonly"
             :model-value="payDate ? dateFormat(payDate) : ''"
           >
             <template v-slot:prepend>
@@ -197,9 +190,8 @@ defineProps<{
         for="input-pay-rate"
         id="input-pay-rate"
         :dense="dense"
-        :outlined="!readonly"
+        outlined
         :readonly="readonly"
-        :borderless="readonly"
         hide-bottom-space
         class="col-3"
         :label="$t('payRate')"
@@ -210,9 +202,8 @@ defineProps<{
         for="input-sales-person"
         id="input-sales-person"
         :dense="dense"
-        :outlined="!readonly"
+        outlined
         :readonly="readonly"
-        :borderless="readonly"
         hide-bottom-space
         class="col-6"
         :label="$t('salesPerson')"
diff --git a/src/components/03_customer-management/FormEmployeeHealthCheck.vue b/src/components/03_customer-management/FormEmployeeHealthCheck.vue
index 5b6fe1e8..65d1da17 100644
--- a/src/components/03_customer-management/FormEmployeeHealthCheck.vue
+++ b/src/components/03_customer-management/FormEmployeeHealthCheck.vue
@@ -143,9 +143,8 @@ onMounted(async () => {
         <div class="col-9 row q-col-gutter-md">
           <q-input
             :dense="dense"
-            :outlined="!readonly"
+            outlined
             :readonly="readonly"
-            :borderless="readonly"
             hide-bottom-space
             class="col-6"
             :label="$t('formDialogInputCheckupRes')"
@@ -155,9 +154,8 @@ onMounted(async () => {
             id="select-province"
             :dense="dense"
             :readonly="readonly"
-            :outlined="readonly ? false : outlined"
+            outlined
             :hide-dropdown-icon="readonly"
-            :borderless="readonly"
             hide-bottom-space
             emit-value
             map-options
@@ -173,9 +171,8 @@ onMounted(async () => {
             id="select-province"
             :dense="dense"
             :readonly="readonly"
-            :outlined="readonly ? false : outlined"
+            outlined
             :hide-dropdown-icon="readonly"
-            :borderless="readonly"
             hide-bottom-space
             emit-value
             map-options
@@ -189,9 +186,8 @@ onMounted(async () => {
           />
           <q-input
             :dense="dense"
-            :outlined="!readonly"
+            outlined
             :readonly="readonly"
-            :borderless="readonly"
             hide-bottom-space
             class="col-9"
             :label="$t('formDialogInputHospital')"
@@ -200,9 +196,8 @@ onMounted(async () => {
           <q-input
             :label="$t('formDialogInputRemark')"
             :dense="dense"
-            :outlined="!readonly"
+            outlined
             :readonly="readonly"
-            :borderless="readonly"
             hide-bottom-space
             class="col-12"
             v-model="checkup.remark"
@@ -212,9 +207,8 @@ onMounted(async () => {
             id="select-province"
             :dense="dense"
             :readonly="readonly"
-            :outlined="readonly ? false : outlined"
+            outlined
             :hide-dropdown-icon="readonly"
-            :borderless="readonly"
             hide-bottom-space
             emit-value
             map-options
@@ -230,9 +224,8 @@ onMounted(async () => {
             id="select-province"
             :dense="dense"
             :readonly="readonly"
-            :outlined="readonly ? false : outlined"
+            outlined
             :hide-dropdown-icon="readonly"
-            :borderless="readonly"
             hide-bottom-space
             emit-value
             map-options
@@ -265,9 +258,8 @@ onMounted(async () => {
                 id="input-birth-date"
                 :label="$t('formDialogInputCoverageStartDate')"
                 :dense="dense"
-                :outlined="readonly ? false : outlined"
+                outlined
                 :readonly="readonly"
-                :borderless="readonly"
                 :model-value="
                   checkup.coverageStartDate
                     ? dateFormat(checkup.coverageStartDate)
@@ -315,9 +307,8 @@ onMounted(async () => {
                 id="input-birth-date"
                 :label="$t('formDialogInputCoverageExpiretDate')"
                 :dense="dense"
-                :outlined="readonly ? false : outlined"
+                outlined
                 :readonly="readonly"
-                :borderless="readonly"
                 :model-value="
                   checkup.coverageExpireDate
                     ? dateFormat(checkup.coverageExpireDate)
diff --git a/src/components/03_customer-management/FormEmployeeOther.vue b/src/components/03_customer-management/FormEmployeeOther.vue
index 23ba5454..9f70d5ad 100644
--- a/src/components/03_customer-management/FormEmployeeOther.vue
+++ b/src/components/03_customer-management/FormEmployeeOther.vue
@@ -22,9 +22,8 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
         <q-input
           for="input-citizenId"
           :dense="dense"
-          :outlined="readonly ? false : outlined"
+          outlined
           :readonly="readonly"
-          :borderless="readonly"
           hide-bottom-space
           :label="$t('formDialogInputCitizenId')"
           class="col"
@@ -39,9 +38,8 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
         <q-input
           for="input-father-first-name"
           :dense="dense"
-          :outlined="readonly ? false : outlined"
+          outlined
           :readonly="readonly"
-          :borderless="readonly"
           hide-bottom-space
           class="col-3"
           :label="$t('formDialogInputFirstName')"
@@ -50,9 +48,8 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
         <q-input
           for="input-father-last-name"
           :dense="dense"
-          :outlined="readonly ? false : outlined"
+          outlined
           :readonly="readonly"
-          :borderless="readonly"
           hide-bottom-space
           class="col-3"
           :label="$t('formDialogInputLastName')"
@@ -61,9 +58,8 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
         <q-input
           for="input-father-first-name-en"
           :dense="dense"
-          :outlined="readonly ? false : outlined"
+          outlined
           :readonly="readonly"
-          :borderless="readonly"
           hide-bottom-space
           class="col-3"
           :label="$t('formDialogInputFirstNameEN')"
@@ -72,9 +68,8 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
         <q-input
           for="input-father-last-name-en"
           :dense="dense"
-          :outlined="readonly ? false : outlined"
+          outlined
           :readonly="readonly"
-          :borderless="readonly"
           hide-bottom-space
           class="col-3"
           :label="$t('formDialogInputLastNameEN')"
@@ -83,9 +78,8 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
         <q-input
           for="input-father-birthplace"
           :dense="dense"
-          :outlined="readonly ? false : outlined"
+          outlined
           :readonly="readonly"
-          :borderless="readonly"
           hide-bottom-space
           class="col-6"
           :label="$t('formDialogInputFamilyBirthPlace')"
@@ -100,9 +94,8 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
         <q-input
           for="input-mother-first-name"
           :dense="dense"
-          :outlined="readonly ? false : outlined"
+          outlined
           :readonly="readonly"
-          :borderless="readonly"
           hide-bottom-space
           class="col-3"
           :label="$t('formDialogInputFirstName')"
@@ -111,9 +104,8 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
         <q-input
           for="input-mother-last-name"
           :dense="dense"
-          :outlined="readonly ? false : outlined"
+          outlined
           :readonly="readonly"
-          :borderless="readonly"
           hide-bottom-space
           class="col-3"
           :label="$t('formDialogInputLastName')"
@@ -122,9 +114,8 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
         <q-input
           for="input-mother-first-name-en"
           :dense="dense"
-          :outlined="readonly ? false : outlined"
+          outlined
           :readonly="readonly"
-          :borderless="readonly"
           hide-bottom-space
           class="col-3"
           :label="$t('formDialogInputFirstNameEN')"
@@ -133,9 +124,8 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
         <q-input
           for="input-mother-last-name-en"
           :dense="dense"
-          :outlined="readonly ? false : outlined"
+          outlined
           :readonly="readonly"
-          :borderless="readonly"
           hide-bottom-space
           class="col-3"
           :label="$t('formDialogInputLastNameEN')"
@@ -144,9 +134,8 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
         <q-input
           for="input-mother-birthplace"
           :dense="dense"
-          :outlined="readonly ? false : outlined"
+          outlined
           :readonly="readonly"
-          :borderless="readonly"
           hide-bottom-space
           class="col-6"
           :label="$t('formDialogInputFamilyBirthPlace')"
diff --git a/src/components/03_customer-management/FormEmployeePassport.vue b/src/components/03_customer-management/FormEmployeePassport.vue
index 10b702b3..bde2f756 100644
--- a/src/components/03_customer-management/FormEmployeePassport.vue
+++ b/src/components/03_customer-management/FormEmployeePassport.vue
@@ -33,9 +33,8 @@ defineProps<{
       id="select-passport-type"
       :dense="dense"
       :readonly="readonly"
-      :outlined="readonly ? false : outlined"
+      outlined
       :hide-dropdown-icon="readonly"
-      :borderless="readonly"
       hide-bottom-space
       emit-value
       map-options
@@ -54,9 +53,8 @@ defineProps<{
     <q-input
       for="input-passport-no"
       :dense="dense"
-      :outlined="!readonly"
+      outlined
       :readonly="readonly"
-      :borderless="readonly"
       hide-bottom-space
       class="col-3"
       :label="$t('formDialogInputPassportNo')"
@@ -69,9 +67,8 @@ defineProps<{
     <q-input
       for="input-passport-ref"
       :dense="dense"
-      :outlined="!readonly"
+      outlined
       :readonly="readonly"
-      :borderless="readonly"
       hide-bottom-space
       class="col-6"
       :label="$t('formDialogInputPassportRef')"
@@ -84,9 +81,8 @@ defineProps<{
     <q-input
       for="input-passport-place"
       :dense="dense"
-      :outlined="!readonly"
+      outlined
       :readonly="readonly"
-      :borderless="readonly"
       hide-bottom-space
       class="col-3"
       :label="$t('formDialogInputWPassportPlace')"
@@ -100,9 +96,8 @@ defineProps<{
       id="select-passport-country"
       :dense="dense"
       :readonly="readonly"
-      :outlined="readonly ? false : outlined"
+      outlined
       :hide-dropdown-icon="readonly"
-      :borderless="readonly"
       hide-bottom-space
       emit-value
       map-options
@@ -141,9 +136,8 @@ defineProps<{
           hide-bottom-space
           :label="$t('formDialogInputPassportIssuance')"
           :dense="dense"
-          :outlined="readonly ? false : outlined"
+          outlined
           :readonly="readonly"
-          :borderless="readonly"
           :model-value="passportIssueDate ? dateFormat(passportIssueDate) : ''"
           :rules="[
             (val: string) =>
@@ -185,9 +179,8 @@ defineProps<{
           hide-bottom-space
           :label="$t('formDialogInputPassportExpire')"
           :dense="dense"
-          :outlined="readonly ? false : outlined"
+          outlined
           :readonly="readonly"
-          :borderless="readonly"
           :model-value="
             passportExpiryDate ? dateFormat(passportExpiryDate) : ''
           "
diff --git a/src/components/03_customer-management/FormEmployeeVisa.vue b/src/components/03_customer-management/FormEmployeeVisa.vue
index fe84efdf..63288ca7 100644
--- a/src/components/03_customer-management/FormEmployeeVisa.vue
+++ b/src/components/03_customer-management/FormEmployeeVisa.vue
@@ -58,9 +58,8 @@ onMounted(async () => {
       id="select-visa-type"
       :dense="dense"
       :readonly="readonly"
-      :outlined="readonly ? false : outlined"
+      outlined
       :hide-dropdown-icon="readonly"
-      :borderless="readonly"
       hide-bottom-space
       emit-value
       map-options
@@ -79,9 +78,8 @@ onMounted(async () => {
     <q-input
       for="input-visa-no"
       :dense="dense"
-      :outlined="!readonly"
+      outlined
       :readonly="readonly"
-      :borderless="readonly"
       hide-bottom-space
       class="col-3"
       :label="$t('formDialogInputVisaNo')"
@@ -114,9 +112,8 @@ onMounted(async () => {
           hide-bottom-space
           :label="$t('formDialogInputVisaIssuance')"
           :dense="dense"
-          :outlined="readonly ? false : outlined"
+          outlined
           :readonly="readonly"
-          :borderless="readonly"
           :model-value="visaIssueDate ? dateFormat(visaIssueDate) : ''"
         >
           <!-- :rules="[
@@ -166,9 +163,8 @@ onMounted(async () => {
           hide-bottom-space
           :label="$t('formDialogInputVisaExpire')"
           :dense="dense"
-          :outlined="readonly ? false : outlined"
+          outlined
           :readonly="readonly"
-          :borderless="readonly"
           :model-value="visaExpiryDate ? dateFormat(visaExpiryDate) : ''"
         >
           <!-- :rules="[
@@ -198,9 +194,8 @@ onMounted(async () => {
     <q-input
       for="input-visa-place"
       :dense="dense"
-      :outlined="!readonly"
+      outlined
       :readonly="readonly"
-      :borderless="readonly"
       hide-bottom-space
       class="col-6"
       :label="$t('formDialogInputVisaPlace')"
@@ -233,9 +228,8 @@ onMounted(async () => {
           hide-bottom-space
           :label="$t('formDialogInputVisaStayUntil')"
           :dense="dense"
-          :outlined="readonly ? false : outlined"
+          outlined
           :readonly="readonly"
-          :borderless="readonly"
           :model-value="visaStayUntilDate ? dateFormat(visaStayUntilDate) : ''"
         >
           <!-- :rules="[
@@ -266,9 +260,8 @@ onMounted(async () => {
     <q-input
       for="input-tm6"
       :dense="dense"
-      :outlined="!readonly"
+      outlined
       :readonly="readonly"
-      :borderless="readonly"
       hide-bottom-space
       class="col-6"
       :label="$t('formDialogInputVisaTM6')"
@@ -300,9 +293,8 @@ onMounted(async () => {
           id="input-birth-date"
           :label="$t('formDialogInputVisaEnter')"
           :dense="dense"
-          :outlined="readonly ? false : outlined"
+          outlined
           :readonly="readonly"
-          :borderless="readonly"
           :model-value="entryDate ? dateFormat(entryDate) : ''"
         >
           <!-- :rules="[
diff --git a/src/components/03_customer-management/FormEmployeeWorkHistory.vue b/src/components/03_customer-management/FormEmployeeWorkHistory.vue
index 2b138eab..f07349de 100644
--- a/src/components/03_customer-management/FormEmployeeWorkHistory.vue
+++ b/src/components/03_customer-management/FormEmployeeWorkHistory.vue
@@ -114,9 +114,8 @@ onMounted(async () => {
           <q-input
             for="input-ownerName"
             :dense="dense"
-            :outlined="!readonly"
+            outlined
             :readonly="readonly"
-            :borderless="readonly"
             hide-bottom-space
             class="col-6"
             :label="$t('formDialogInputOwnerName')"
@@ -126,9 +125,8 @@ onMounted(async () => {
             id="select-positionName"
             :dense="dense"
             :readonly="readonly"
-            :outlined="readonly ? false : outlined"
+            outlined
             :hide-dropdown-icon="readonly"
-            :borderless="readonly"
             hide-bottom-space
             emit-value
             map-options
@@ -144,9 +142,8 @@ onMounted(async () => {
             id="select-jobType"
             :dense="dense"
             :readonly="readonly"
-            :outlined="readonly ? false : outlined"
+            outlined
             :hide-dropdown-icon="readonly"
-            :borderless="readonly"
             hide-bottom-space
             emit-value
             map-options
@@ -162,9 +159,8 @@ onMounted(async () => {
             id="select-province"
             :dense="dense"
             :readonly="readonly"
-            :outlined="readonly ? false : outlined"
+            outlined
             :hide-dropdown-icon="readonly"
-            :borderless="readonly"
             hide-bottom-space
             emit-value
             map-options
@@ -180,9 +176,8 @@ onMounted(async () => {
             for="input-workEndDate"
             :label="$t('formDialogInputRemark')"
             :dense="dense"
-            :outlined="!readonly"
+            outlined
             :readonly="readonly"
-            :borderless="readonly"
             hide-bottom-space
             class="col-12"
             v-model="work.remark"
@@ -210,9 +205,8 @@ onMounted(async () => {
                 id="input-birth-date"
                 :label="$t('formDialogInputWorkUntil')"
                 :dense="dense"
-                :outlined="readonly ? false : outlined"
+                outlined
                 :readonly="readonly"
-                :borderless="readonly"
                 :model-value="
                   work.workEndDate ? dateFormat(work.workEndDate) : ''
                 "
@@ -240,9 +234,8 @@ onMounted(async () => {
           <q-input
             for="input-workPermitNo"
             :dense="dense"
-            :outlined="!readonly"
+            outlined
             :readonly="readonly"
-            :borderless="readonly"
             hide-bottom-space
             class="col-6"
             :label="$t('formDialogInputWorkPermitNo')"
@@ -270,9 +263,8 @@ onMounted(async () => {
                 id="input-birth-date"
                 :label="$t('formDialogInputWorkPermitIssueDate')"
                 :dense="dense"
-                :outlined="readonly ? false : outlined"
+                outlined
                 :readonly="readonly"
-                :borderless="readonly"
                 :model-value="
                   work.workPermitIssuDate
                     ? dateFormat(work.workPermitIssuDate)
@@ -321,9 +313,8 @@ onMounted(async () => {
                 id="input-birth-date"
                 :label="$t('formDialogInputWorkPermitExpireDate')"
                 :dense="dense"
-                :outlined="readonly ? false : outlined"
+                outlined
                 :readonly="readonly"
-                :borderless="readonly"
                 :model-value="
                   work.workPermitExpireDate
                     ? dateFormat(work.workPermitExpireDate)
diff --git a/src/components/03_customer-management/OtherInformation.vue b/src/components/03_customer-management/OtherInformation.vue
index 58ee32bd..6a1d78e3 100644
--- a/src/components/03_customer-management/OtherInformation.vue
+++ b/src/components/03_customer-management/OtherInformation.vue
@@ -18,9 +18,8 @@ const fileEmployerDocument = defineModel<File | null>('fileEmployerDocument');
       <q-file
         id="input-attchment"
         :dense="dense"
-        :outlined="readonly ? false : outlined"
+        outlined
         :readonly="readonly"
-        :borderless="readonly"
         multiple
         append
         :label="$t('additionalEmployerDocument')"