diff --git a/src/components/02_personnel-management/FormAddress.vue b/src/components/02_personnel-management/FormAddress.vue
index 97e76040..487faf52 100644
--- a/src/components/02_personnel-management/FormAddress.vue
+++ b/src/components/02_personnel-management/FormAddress.vue
@@ -120,9 +120,8 @@ watch(districtId, fetchSubDistrict);
         <q-input
           :for="`${id !== undefined ? `input-address-${id}` : 'input-address'}`"
           :dense="dense"
-          :outlined="readonly ? false : outlined"
+          outlined
           :readonly="readonly || sameWithEmployer"
-          :borderless="readonly"
           hide-bottom-space
           :label="$t('address')"
           class="col-12"
@@ -142,9 +141,8 @@ watch(districtId, fetchSubDistrict);
           :id="`${id !== undefined ? `select-province-${id}` : 'select-province'}`"
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
-          :outlined="readonly ? false : outlined"
+          outlined
           :hide-dropdown-icon="readonly || sameWithEmployer"
-          :borderless="readonly"
           hide-bottom-space
           emit-value
           map-options
@@ -171,9 +169,8 @@ watch(districtId, fetchSubDistrict);
           :id="`${id !== undefined ? `select-district-${id}` : 'select-district'}`"
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
-          :outlined="readonly ? false : outlined"
+          outlined
           :hide-dropdown-icon="readonly || sameWithEmployer"
-          :borderless="readonly"
           hide-bottom-space
           emit-value
           map-options
@@ -199,9 +196,8 @@ watch(districtId, fetchSubDistrict);
           :id="`${id !== undefined ? `select-sub-district-${id}` : 'select-sub-district'}`"
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
-          :outlined="readonly ? false : outlined"
+          outlined
           :hide-dropdown-icon="readonly || sameWithEmployer"
-          :borderless="readonly"
           hide-bottom-space
           emit-value
           map-options
@@ -226,8 +222,7 @@ watch(districtId, fetchSubDistrict);
         <q-input
           :for="`${id !== undefined ? `input-zip-code-${id}` : 'input-zip-code'}`"
           :dense="dense"
-          :outlined="readonly ? false : outlined"
-          :borderless="readonly"
+          outlined
           readonly
           :label="$t('zipCode')"
           class="col-3"
@@ -242,8 +237,7 @@ watch(districtId, fetchSubDistrict);
           :for="`${id !== undefined ? `input-address-en-${id}` : 'input-address-en'}`"
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
-          :outlined="readonly ? false : outlined"
-          :borderless="readonly"
+          outlined
           hide-bottom-space
           :label="$t('address')"
           class="col-12"
@@ -264,8 +258,7 @@ watch(districtId, fetchSubDistrict);
           hide-bottom-space
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
-          :outlined="readonly ? false : outlined"
-          :borderless="readonly"
+          outlined
           :hide-dropdown-icon="readonly || sameWithEmployer"
           emit-value
           map-options
@@ -292,8 +285,7 @@ watch(districtId, fetchSubDistrict);
           hide-bottom-space
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
-          :outlined="readonly ? false : outlined"
-          :borderless="readonly"
+          outlined
           :hide-dropdown-icon="readonly || sameWithEmployer"
           emit-value
           map-options
@@ -320,8 +312,7 @@ watch(districtId, fetchSubDistrict);
           hide-bottom-space
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
-          :outlined="readonly ? false : outlined"
-          :borderless="readonly"
+          outlined
           :hide-dropdown-icon="readonly || sameWithEmployer"
           emit-value
           map-options
@@ -347,8 +338,7 @@ watch(districtId, fetchSubDistrict);
           hide-bottom-space
           :for="`${id !== undefined ? `input-zip-code-${id}` : 'input-zip-code'}`"
           :dense="dense"
-          :outlined="readonly ? false : outlined"
-          :borderless="readonly"
+          outlined
           readonly
           zip="zip-en"
           :label="$t('zipCode')"
diff --git a/src/components/02_personnel-management/FormByType.vue b/src/components/02_personnel-management/FormByType.vue
index 32e4c373..943cbddf 100644
--- a/src/components/02_personnel-management/FormByType.vue
+++ b/src/components/02_personnel-management/FormByType.vue
@@ -75,9 +75,8 @@ function deleteFile(name: string) {
       <q-input
         for="input-regis-no"
         :dense="dense"
-        :outlined="readonly ? false : outlined"
+        outlined
         :readonly="readonly"
-        :borderless="readonly"
         :label="$t('formDialogInputRegisNo')"
         class="col-12"
         v-model="registrationNo"
@@ -103,9 +102,8 @@ function deleteFile(name: string) {
             for="input-start-date"
             :label="$t('formDialogInputStartDate')"
             :dense="dense"
-            :outlined="readonly ? false : outlined"
+            outlined
             :readonly="readonly"
-            :borderless="readonly"
             :model-value="startDate ? dateFormat(startDate) : ''"
           >
             <template v-slot:prepend>
@@ -150,9 +148,8 @@ function deleteFile(name: string) {
             for="input-retire-date"
             :label="$t('formDialogInputRetireDate')"
             :dense="dense"
-            :outlined="readonly ? false : outlined"
+            outlined
             :readonly="readonly"
-            :borderless="readonly"
             :model-value="retireDate ? dateFormat(retireDate) : ''"
           >
             <template v-slot:prepend>
@@ -179,10 +176,9 @@ function deleteFile(name: string) {
         id="input-responsible-area"
         v-if="userType === 'MESSENGER'"
         :dense="dense"
-        :outlined="readonly ? false : outlined"
+        outlined
         :readonly="readonly"
         :hide-dropdown-icon="readonly"
-        :borderless="readonly"
         emit-value
         map-options
         options-dense
@@ -202,9 +198,8 @@ function deleteFile(name: string) {
       <q-input
         for="input-discount-condition"
         :dense="dense"
-        :outlined="readonly ? false : outlined"
+        outlined
         :readonly="readonly"
-        :borderless="readonly"
         :label="$t('formDialogInputDiscount')"
         class="col-12"
         v-model="discountCondition"
@@ -219,10 +214,9 @@ function deleteFile(name: string) {
       <q-select
         id="input-source-nationality"
         :dense="dense"
-        :outlined="readonly ? false : outlined"
+        outlined
         :readonly="readonly"
         :hide-dropdown-icon="readonly"
-        :borderless="readonly"
         emit-value
         map-options
         options-dense
@@ -236,9 +230,8 @@ function deleteFile(name: string) {
       <q-select
         id="input-import-nationality"
         :dense="dense"
-        :outlined="readonly ? false : outlined"
+        outlined
         :readonly="readonly"
-        :borderless="readonly"
         :hide-dropdown-icon="readonly"
         emit-value
         map-options
@@ -253,9 +246,8 @@ function deleteFile(name: string) {
       <q-select
         id="select-trainig-place"
         :dense="dense"
-        :outlined="readonly ? false : outlined"
+        outlined
         :readonly="readonly"
-        :borderless="readonly"
         :hide-dropdown-icon="readonly"
         emit-value
         map-options
@@ -270,9 +262,8 @@ function deleteFile(name: string) {
       <q-input
         for="input-checkpoint"
         :dense="dense"
-        :outlined="readonly ? false : outlined"
+        outlined
         :readonly="readonly"
-        :borderless="readonly"
         :label="$t('formDialogInputCheckpoint')"
         class="col-6"
         v-model="checkpoint"
@@ -280,9 +271,8 @@ function deleteFile(name: string) {
       <q-input
         for="input-checkpoint-en"
         :dense="dense"
-        :outlined="readonly ? false : outlined"
+        outlined
         :readonly="readonly"
-        :borderless="readonly"
         :label="$t('formDialogInputCheckpoint') + ' ENG'"
         class="col-6"
         v-model="checkpointEN"
@@ -290,9 +280,8 @@ function deleteFile(name: string) {
       <q-file
         for="input-attchment"
         :dense="dense"
-        :outlined="readonly ? false : outlined"
+        outlined
         :readonly="readonly"
-        :borderless="readonly"
         multiple
         append
         :label="$t('formDialogAttachment')"
diff --git a/src/components/02_personnel-management/FormInformation.vue b/src/components/02_personnel-management/FormInformation.vue
index 446f89b6..bebf598d 100644
--- a/src/components/02_personnel-management/FormInformation.vue
+++ b/src/components/02_personnel-management/FormInformation.vue
@@ -36,9 +36,8 @@ async function selectHq(id: string) {
     <q-select
       id="select-hq-id"
       :dense="dense"
-      :outlined="readonly ? false : outlined"
+      outlined
       :readonly="readonly"
-      :borderless="readonly"
       :hide-dropdown-icon="readonly"
       emit-value
       map-options
@@ -56,9 +55,8 @@ async function selectHq(id: string) {
     <q-select
       id="select-br-id"
       :dense="dense"
-      :outlined="readonly ? false : outlined"
+      outlined
       :readonly="readonly"
-      :borderless="readonly"
       :hide-dropdown-icon="readonly"
       emit-value
       map-options
@@ -75,8 +73,7 @@ async function selectHq(id: string) {
     <q-input
       for="input-username"
       :dense="dense"
-      :outlined="readonly ? false : outlined"
-      :borderless="readonly"
+      outlined
       :readonly="usernameReadonly"
       emit-value
       map-options
@@ -93,9 +90,8 @@ async function selectHq(id: string) {
     <q-select
       id="select-user-type"
       :dense="dense"
-      :outlined="readonly ? false : outlined"
+      outlined
       :readonly="readonly"
-      :borderless="readonly"
       :hide-dropdown-icon="readonly"
       emit-value
       map-options
@@ -112,9 +108,8 @@ async function selectHq(id: string) {
     <q-select
       id="select-user-role"
       :dense="dense"
-      :outlined="readonly ? false : outlined"
+      outlined
       :readonly="readonly"
-      :borderless="readonly"
       :hide-dropdown-icon="readonly"
       emit-value
       map-options
diff --git a/src/components/02_personnel-management/FormPerson.vue b/src/components/02_personnel-management/FormPerson.vue
index 627084a2..dac16532 100644
--- a/src/components/02_personnel-management/FormPerson.vue
+++ b/src/components/02_personnel-management/FormPerson.vue
@@ -33,9 +33,8 @@ defineProps<{
     <q-input
       for="input-first-name"
       :dense="dense"
-      :outlined="readonly ? false : outlined"
+      outlined
       :readonly="readonly"
-      :borderless="readonly"
       hide-bottom-space
       class="col-3"
       :label="$t('formDialogInputFirstName')"
@@ -47,9 +46,8 @@ defineProps<{
     <q-input
       for="input-last-name"
       :dense="dense"
-      :outlined="readonly ? false : outlined"
+      outlined
       :readonly="readonly"
-      :borderless="readonly"
       hide-bottom-space
       class="col-3"
       :label="$t('formDialogInputLastName')"
@@ -59,9 +57,8 @@ defineProps<{
     <q-input
       for="input-first-name-en"
       :dense="dense"
-      :outlined="readonly ? false : outlined"
+      outlined
       :readonly="readonly"
-      :borderless="readonly"
       hide-bottom-space
       class="col-3"
       :label="$t('formDialogInputFirstNameEN')"
@@ -73,9 +70,8 @@ defineProps<{
     <q-input
       for="input-last-name-en"
       :dense="dense"
-      :outlined="readonly ? false : outlined"
+      outlined
       :readonly="readonly"
-      :borderless="readonly"
       hide-bottom-space
       class="col-3"
       :label="$t('formDialogInputLastNameEN')"
@@ -88,9 +84,8 @@ defineProps<{
       v-if="!employee"
       for="input-telephone"
       :dense="dense"
-      :outlined="readonly ? false : outlined"
+      outlined
       :readonly="readonly"
-      :borderless="readonly"
       class="col-6"
       :label="$t('formDialogInputTelephone')"
       v-model="telephoneNo"
@@ -100,9 +95,8 @@ defineProps<{
       v-if="!employee"
       for="input-email"
       :dense="dense"
-      :outlined="readonly ? false : outlined"
+      outlined
       :readonly="readonly"
-      :borderless="readonly"
       :label="$t('formDialogInputEmail')"
       class="col-6"
       v-model="email"
@@ -111,10 +105,9 @@ defineProps<{
       v-if="!employee"
       id="select-gender"
       :dense="dense"
-      :outlined="readonly ? false : outlined"
+      outlined
       :readonly="readonly"
       :hide-dropdown-icon="readonly"
-      :borderless="readonly"
       emit-value
       map-options
       :label="$t('formDialogInputGender')"
@@ -148,9 +141,8 @@ defineProps<{
           hide-bottom-space
           :label="$t('formDialogInputBirthDate')"
           :dense="dense"
-          :outlined="readonly ? false : outlined"
+          outlined
           :readonly="readonly"
-          :borderless="readonly"
           :model-value="birthDate ? dateFormat(birthDate) : ''"
           :rules="[
             (val: string) =>
@@ -171,8 +163,7 @@ defineProps<{
     <q-input
       for="input-age"
       :dense="dense"
-      :outlined="readonly ? false : outlined"
-      :borderless="readonly"
+      outlined
       readonly
       :label="$t('formDialogInputAge')"
       class="col-3"
@@ -183,10 +174,9 @@ defineProps<{
       id="select-gender"
       hide-bottom-space
       :dense="dense"
-      :outlined="readonly ? false : outlined"
+      outlined
       :readonly="readonly"
       :hide-dropdown-icon="readonly"
-      :borderless="readonly"
       emit-value
       map-options
       :label="$t('formDialogInputGender')"
@@ -205,9 +195,8 @@ defineProps<{
       id="select-nationality"
       hide-bottom-space
       :dense="dense"
-      :outlined="readonly ? false : outlined"
+      outlined
       :readonly="readonly"
-      :borderless="readonly"
       :hide-dropdown-icon="readonly"
       emit-value
       map-options