diff --git a/src/components/02_personnel-management/FormPerson.vue b/src/components/02_personnel-management/FormPerson.vue
index 6888171c..5cad99a2 100644
--- a/src/components/02_personnel-management/FormPerson.vue
+++ b/src/components/02_personnel-management/FormPerson.vue
@@ -118,7 +118,7 @@ watch(
       <q-input
         v-if="!employee"
         outlined
-        class="col-5"
+        class="col-md-5 col-12"
         hide-bottom-space
         v-model="citizenId"
         mask="#############"
diff --git a/src/components/form/AddressForm.vue b/src/components/form/AddressForm.vue
index 51425317..d4f104b7 100644
--- a/src/components/form/AddressForm.vue
+++ b/src/components/form/AddressForm.vue
@@ -303,7 +303,7 @@ watch(districtId, fetchSubDistrict);
         <q-input
           outlined
           hide-bottom-space
-          class="col-6"
+          class="col-md-5 col-8"
           v-model="address"
           :dense="dense"
           :label="$t('form.addressNo')"
@@ -318,7 +318,7 @@ watch(districtId, fetchSubDistrict);
         <q-input
           outlined
           hide-bottom-space
-          class="col-2"
+          class="col-md-1 col-4"
           v-model="moo"
           :dense="dense"
           :label="$t('form.moo')"
@@ -328,7 +328,7 @@ watch(districtId, fetchSubDistrict);
         <q-input
           outlined
           hide-bottom-space
-          class="col-2"
+          class="col-md-3 col-6"
           v-model="soi"
           :dense="dense"
           :label="$t('form.soi')"
@@ -338,7 +338,7 @@ watch(districtId, fetchSubDistrict);
         <q-input
           outlined
           hide-bottom-space
-          class="col-2"
+          class="col-md-3 col-6"
           v-model="street"
           :dense="dense"
           :label="$t('form.street')"
@@ -482,7 +482,7 @@ watch(districtId, fetchSubDistrict);
           :disable="!readonly && !sameWithEmployer"
           readonly
           :label="$t('form.zipCode')"
-          class="col-md-2 col-6"
+          class="col-md-3 col-6"
           :model-value="
             addrOptions.subDistrictOps
               ?.filter((x) => x.id === subDistrictId)
@@ -535,7 +535,7 @@ watch(districtId, fetchSubDistrict);
           outlined
           hide-bottom-space
           label="Address No."
-          class="col-6"
+          class="col-md-5 col-8"
           v-model="addressEN"
           :rules="
             disabledRule
@@ -546,7 +546,7 @@ watch(districtId, fetchSubDistrict);
         <q-input
           outlined
           hide-bottom-space
-          class="col-2"
+          class="col-md-1 col-4"
           v-model="mooEN"
           :dense="dense"
           label="Moo"
@@ -556,7 +556,7 @@ watch(districtId, fetchSubDistrict);
         <q-input
           outlined
           hide-bottom-space
-          class="col-2"
+          class="col-md-3 col-6"
           v-model="soiEN"
           :dense="dense"
           label="Soi"
@@ -566,7 +566,7 @@ watch(districtId, fetchSubDistrict);
         <q-input
           outlined
           hide-bottom-space
-          class="col-2"
+          class="col-md-3 col-6"
           v-model="streetEN"
           :dense="dense"
           label="Street"
@@ -711,7 +711,7 @@ watch(districtId, fetchSubDistrict);
           :disable="!readonly && !sameWithEmployer"
           zip="zip-en"
           label="Zip Code"
-          class="col-md-2 col-6"
+          class="col-md-3 col-6"
           :model-value="
             addrOptions.subDistrictOps
               ?.filter((x) => x.id === subDistrictId)