diff --git a/src/components/03_customer-management/FormEmployeePassport.vue b/src/components/03_customer-management/FormEmployeePassport.vue
index 735e6624..0afe325d 100644
--- a/src/components/03_customer-management/FormEmployeePassport.vue
+++ b/src/components/03_customer-management/FormEmployeePassport.vue
@@ -4,7 +4,11 @@ import { selectFilterOptionRefMod } from 'src/stores/utils';
 import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import useOptionStore from 'src/stores/options';
+import { watch } from 'vue';
+import { onMounted } from 'vue';
 
+const optionStore = useOptionStore();
 const { locale } = useI18n();
 
 const passportType = defineModel<string>('passportType');
@@ -20,13 +24,6 @@ const passportIssuingPlace = defineModel<string>('passportIssuingPlace');
 const previousPassportReference = defineModel<string>(
   'previousPassportReference',
 );
-const passportTypeOption = defineModel<{ label: string; value: string }[]>(
-  'passportTypeOption',
-  { required: true },
-);
-const passportIssuingCountryOption = defineModel<
-  { label: string; value: string }[]
->('passportIssuingCountryOption', { required: true });
 
 defineProps<{
   title?: string;
@@ -34,263 +31,297 @@ defineProps<{
   outlined?: boolean;
   readonly?: boolean;
   separator?: boolean;
+
   prefixId: string;
 }>();
 
 const passportTypeOptions = ref<Record<string, unknown>[]>([]);
-const passportTypeFilter = selectFilterOptionRefMod(
-  passportTypeOption,
-  passportTypeOptions,
-  'label',
-);
+let passportTypeFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
 
 const passportIssuingCountryOptions = ref<Record<string, unknown>[]>([]);
-const passportIssuingCountryFilter = selectFilterOptionRefMod(
-  passportIssuingCountryOption,
-  passportIssuingCountryOptions,
-  'label',
+let passportIssuingCountryFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
+onMounted(() => {
+  passportTypeFilter = selectFilterOptionRefMod(
+    ref(optionStore.globalOption.nationality),
+    passportTypeOptions,
+    'label',
+  );
+  passportIssuingCountryFilter = selectFilterOptionRefMod(
+    ref(optionStore.globalOption.nationality),
+    passportIssuingCountryOptions,
+    'label',
+  );
+});
+
+watch(
+  () => optionStore.globalOption,
+  () => {
+    passportTypeFilter = selectFilterOptionRefMod(
+      ref(optionStore.globalOption.nationality),
+      passportTypeOptions,
+      'label',
+    );
+    passportIssuingCountryFilter = selectFilterOptionRefMod(
+      ref(optionStore.globalOption.nationality),
+      passportIssuingCountryOptions,
+      'label',
+    );
+  },
 );
 </script>
 
 <template>
-  <div class="col-md-3 col-12 app-text-muted">
-    • {{ $t(`formDialogTitlePassport`) }}
-  </div>
-  <div class="col-md-9 col-12 row q-col-gutter-md">
-    <q-select
-      outlined
-      clearable
-      use-input
-      fill-input
-      emit-value
-      map-options
-      hide-selected
-      hide-bottom-space
-      input-debounce="0"
-      option-value="value"
-      option-label="label"
-      lazy-rules="ondemand"
-      v-model="passportType"
-      class="col-md-3 col-12"
-      :dense="dense"
-      :readonly="readonly"
-      :hide-dropdown-icon="readonly"
-      :options="passportTypeOptions"
-      :for="`${prefixId}-select-passport-type`"
-      :label="$t('formDialogInputPassportType')"
-      :rules="[
-        (val: string) =>
-          !!val || $t('selectValidate') + $t('formDialogInputPassportType'),
-      ]"
-      @filter="passportTypeFilter"
-    >
-      <template v-slot:no-option>
-        <q-item>
-          <q-item-section class="text-grey">
-            {{ $t('noResults') }}
-          </q-item-section>
-        </q-item>
-      </template>
-    </q-select>
-    <q-input
-      lazy-rules="ondemand"
-      :for="`${prefixId}-input-passport-no`"
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      class="col-md-3 col-6"
-      :label="$t('formDialogInputPassportNo')"
-      v-model="passportNumber"
-      :rules="[
-        (val: string) =>
-          !!val || $t('inputValidate') + $t('formDialogInputPassportNo'),
-      ]"
-    />
-    <q-input
-      lazy-rules="ondemand"
-      :for="`${prefixId}-input-passport-ref`"
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      class="col-6"
-      :label="$t('formDialogInputPassportRef')"
-      v-model="previousPassportReference"
-    />
-    <q-input
-      lazy-rules="ondemand"
-      :for="`${prefixId}-input-passport-place`"
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      class="col-md-3 col-6"
-      :label="$t('formDialogInputWPassportPlace')"
-      v-model="passportIssuingPlace"
-      :rules="[
-        (val: string) =>
-          !!val || $t('inputValidate') + $t('formDialogInputWPassportPlace'),
-      ]"
-    />
-    <q-select
-      outlined
-      clearable
-      use-input
-      fill-input
-      emit-value
-      map-options
-      hide-selected
-      hide-bottom-space
-      input-debounce="0"
-      option-value="value"
-      option-label="label"
-      lazy-rules="ondemand"
-      class="col-md-3 col-6"
-      v-model="passportIssuingCountry"
-      :dense="dense"
-      :readonly="readonly"
-      :hide-dropdown-icon="readonly"
-      :options="passportIssuingCountryOptions"
-      :for="`${prefixId}-select-passport-country`"
-      :label="$t('formDialogInputPassportCountry')"
-      :rules="[
-        (val: string) =>
-          !!val || $t('selectValidate') + $t('formDialogInputPassportCountry'),
-      ]"
-      @filter="passportIssuingCountryFilter"
-    >
-      <template v-slot:no-option>
-        <q-item>
-          <q-item-section class="text-grey">
-            {{ $t('noResults') }}
-          </q-item-section>
-        </q-item>
-      </template>
-    </q-select>
-    <VueDatePicker
-      :id="`${prefixId}-date-picker-passport-issueance`"
-      utc
-      autoApply
-      v-model="passportIssueDate"
-      :teleport="true"
-      :dark="$q.dark.isActive"
-      :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
-      :enableTimePicker="false"
-      :disabled="readonly"
-      class="col-md-3 col-6"
-    >
-      <template #year="{ value }">
-        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-      </template>
-      <template #year-overlay-value="{ value }">
-        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-      </template>
-      <template #trigger>
-        <q-input
-          lazy-rules="ondemand"
-          :id="`${prefixId}-input-birth-date`"
-          hide-bottom-space
-          :label="$t('formDialogInputPassportIssuance')"
-          :dense="dense"
-          outlined
-          :readonly="readonly"
-          :rules="[
-            (val: string) =>
-              !!val ||
-              $t('selectValidate') + $t('formDialogInputPassportIssuance'),
-          ]"
-          placeholder="DD/MM/YYYY"
-          :mask="readonly ? '' : '##/##/####'"
-          :model-value="
-            passportIssueDate && readonly
-              ? dateFormat(passportIssueDate)
-              : dateFormat(passportIssueDate, false, false, true)
-          "
-          @update:model-value="
-            (v) => {
-              if (v && v.toString().length === 10) {
-                passportIssueDate = parseAndFormatDate(v, locale);
-              }
-            }
-          "
-        >
-          <template v-slot:prepend>
-            <q-icon
-              size="xs"
-              name="mdi-calendar-blank-outline"
-              class="cursor-pointer"
-              color="positive"
-            />
-          </template>
-        </q-input>
-      </template>
-    </VueDatePicker>
-    <VueDatePicker
-      :id="`${prefixId}-date-picker-passport-expire`"
-      utc
-      autoApply
-      v-model="passportExpiryDate"
-      :teleport="true"
-      :dark="$q.dark.isActive"
-      :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
-      :enableTimePicker="false"
-      :disabled="readonly"
-      class="col-md-3 col-6"
-    >
-      <template #year="{ value }">
-        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-      </template>
-      <template #year-overlay-value="{ value }">
-        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-      </template>
-      <template #trigger>
-        <q-input
-          lazy-rules="ondemand"
-          :id="`${prefixId}-input-birth-date`"
-          hide-bottom-space
-          :label="$t('formDialogInputPassportExpire')"
-          :dense="dense"
-          outlined
-          :readonly="readonly"
-          :rules="[
-            (val: string) =>
-              !!val ||
-              $t('selectValidate') + $t('formDialogInputPassportExpire'),
-          ]"
-          placeholder="DD/MM/YYYY"
-          :mask="readonly ? '' : '##/##/####'"
-          :model-value="
-            passportExpiryDate && readonly
-              ? dateFormat(passportExpiryDate)
-              : dateFormat(passportExpiryDate, false, false, true)
-          "
-          @update:model-value="
-            (v) => {
-              if (v && v.toString().length === 10) {
-                passportExpiryDate = parseAndFormatDate(v, locale);
-              }
-            }
-          "
-        >
-          <template v-slot:prepend>
-            <q-icon
-              size="xs"
-              name="mdi-calendar-blank-outline"
-              class="cursor-pointer"
-              color="positive"
-            />
-          </template>
-        </q-input>
-      </template>
-    </VueDatePicker>
-  </div>
+  <div class="row col-12">
+    <div class="col-12 q-pb-sm text-weight-bold text-body1">
+      <q-icon
+        flat
+        size="xs"
+        class="q-pa-sm rounded q-mr-xs"
+        color="info"
+        name="mdi-passport"
+        style="background-color: var(--surface-3)"
+      />
+      {{ $t(`${title}`) }}
+    </div>
 
-  <q-separator
-    v-if="separator"
-    class="col-12 q-mb-md"
-    style="padding-block: 0.5px; margin-top: 32px"
-  />
+    <div class="col-12 row q-col-gutter-sm">
+      <q-select
+        outlined
+        clearable
+        use-input
+        fill-input
+        emit-value
+        map-options
+        hide-selected
+        hide-bottom-space
+        input-debounce="0"
+        option-value="value"
+        option-label="label"
+        lazy-rules="ondemand"
+        v-model="passportType"
+        class="col-md-3 col-12"
+        :dense="dense"
+        :readonly="readonly"
+        :hide-dropdown-icon="readonly"
+        :options="passportTypeOptions"
+        :for="`${prefixId}-select-passport-type`"
+        :label="$t('formDialogInputPassportType')"
+        :rules="[
+          (val: string) =>
+            !!val || $t('selectValidate') + $t('formDialogInputPassportType'),
+        ]"
+        @filter="passportTypeFilter"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ $t('noResults') }}
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+      <q-input
+        lazy-rules="ondemand"
+        :for="`${prefixId}-input-passport-no`"
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-md-3 col-6"
+        :label="$t('formDialogInputPassportNo')"
+        v-model="passportNumber"
+        :rules="[
+          (val: string) =>
+            !!val || $t('inputValidate') + $t('formDialogInputPassportNo'),
+        ]"
+      />
+      <q-input
+        lazy-rules="ondemand"
+        :for="`${prefixId}-input-passport-ref`"
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-6"
+        :label="$t('formDialogInputPassportRef')"
+        v-model="previousPassportReference"
+      />
+      <q-input
+        lazy-rules="ondemand"
+        :for="`${prefixId}-input-passport-place`"
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-md-3 col-6"
+        :label="$t('formDialogInputWPassportPlace')"
+        v-model="passportIssuingPlace"
+        :rules="[
+          (val: string) =>
+            !!val || $t('inputValidate') + $t('formDialogInputWPassportPlace'),
+        ]"
+      />
+      <q-select
+        outlined
+        clearable
+        use-input
+        fill-input
+        emit-value
+        map-options
+        hide-selected
+        hide-bottom-space
+        input-debounce="0"
+        option-value="value"
+        option-label="label"
+        lazy-rules="ondemand"
+        class="col-md-3 col-6"
+        v-model="passportIssuingCountry"
+        :dense="dense"
+        :readonly="readonly"
+        :hide-dropdown-icon="readonly"
+        :options="passportIssuingCountryOptions"
+        :for="`${prefixId}-select-passport-country`"
+        :label="$t('formDialogInputPassportCountry')"
+        :rules="[
+          (val: string) =>
+            !!val ||
+            $t('selectValidate') + $t('formDialogInputPassportCountry'),
+        ]"
+        @filter="passportIssuingCountryFilter"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ $t('noResults') }}
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+      <VueDatePicker
+        :id="`${prefixId}-date-picker-passport-issueance`"
+        utc
+        autoApply
+        v-model="passportIssueDate"
+        :teleport="true"
+        :dark="$q.dark.isActive"
+        :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
+        :enableTimePicker="false"
+        :disabled="readonly"
+        class="col-md-3 col-6"
+      >
+        <template #year="{ value }">
+          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+        </template>
+        <template #year-overlay-value="{ value }">
+          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+        </template>
+        <template #trigger>
+          <q-input
+            lazy-rules="ondemand"
+            :id="`${prefixId}-input-birth-date`"
+            hide-bottom-space
+            :label="$t('formDialogInputPassportIssuance')"
+            :dense="dense"
+            outlined
+            :readonly="readonly"
+            :rules="[
+              (val: string) =>
+                !!val ||
+                $t('selectValidate') + $t('formDialogInputPassportIssuance'),
+            ]"
+            placeholder="DD/MM/YYYY"
+            :mask="readonly ? '' : '##/##/####'"
+            :model-value="
+              passportIssueDate && readonly
+                ? dateFormat(passportIssueDate)
+                : dateFormat(passportIssueDate, false, false, true)
+            "
+            @update:model-value="
+              (v) => {
+                if (v && v.toString().length === 10) {
+                  passportIssueDate = parseAndFormatDate(v, locale);
+                }
+              }
+            "
+          >
+            <template v-slot:prepend>
+              <q-icon
+                size="xs"
+                name="mdi-calendar-blank-outline"
+                class="cursor-pointer"
+                color="primary"
+              />
+            </template>
+          </q-input>
+        </template>
+      </VueDatePicker>
+      <VueDatePicker
+        :id="`${prefixId}-date-picker-passport-expire`"
+        utc
+        autoApply
+        v-model="passportExpiryDate"
+        :teleport="true"
+        :dark="$q.dark.isActive"
+        :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
+        :enableTimePicker="false"
+        :disabled="readonly"
+        class="col-md-3 col-6"
+      >
+        <template #year="{ value }">
+          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+        </template>
+        <template #year-overlay-value="{ value }">
+          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+        </template>
+        <template #trigger>
+          <q-input
+            lazy-rules="ondemand"
+            :id="`${prefixId}-input-birth-date`"
+            hide-bottom-space
+            :label="$t('formDialogInputPassportExpire')"
+            :dense="dense"
+            outlined
+            :readonly="readonly"
+            :rules="[
+              (val: string) =>
+                !!val ||
+                $t('selectValidate') + $t('formDialogInputPassportExpire'),
+            ]"
+            placeholder="DD/MM/YYYY"
+            :mask="readonly ? '' : '##/##/####'"
+            :model-value="
+              passportExpiryDate && readonly
+                ? dateFormat(passportExpiryDate)
+                : dateFormat(passportExpiryDate, false, false, true)
+            "
+            @update:model-value="
+              (v) => {
+                if (v && v.toString().length === 10) {
+                  passportExpiryDate = parseAndFormatDate(v, locale);
+                }
+              }
+            "
+          >
+            <template v-slot:prepend>
+              <q-icon
+                size="xs"
+                name="mdi-calendar-blank-outline"
+                class="cursor-pointer"
+                color="primary"
+              />
+            </template>
+          </q-input>
+        </template>
+      </VueDatePicker>
+    </div>
+  </div>
 </template>
 
 <style scoped></style>
diff --git a/src/components/03_customer-management/FormEmployeeVisa.vue b/src/components/03_customer-management/FormEmployeeVisa.vue
index 79452163..525c3db9 100644
--- a/src/components/03_customer-management/FormEmployeeVisa.vue
+++ b/src/components/03_customer-management/FormEmployeeVisa.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { QSelect } from 'quasar';
 import { onMounted, reactive, ref } from 'vue';
 import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
 import useAddressStore, {
@@ -8,7 +9,10 @@ import useAddressStore, {
 } from 'src/stores/address';
 import { useI18n } from 'vue-i18n';
 import { selectFilterOptionRefMod } from 'src/stores/utils';
+import useOptionStore from 'src/stores/options';
+import { watch } from 'vue';
 
+const optionStore = useOptionStore();
 const { locale } = useI18n();
 const adrressStore = useAddressStore();
 
@@ -33,11 +37,6 @@ const visaStayUntilDate = defineModel<Date | null | string>(
 const tm6Number = defineModel<string>('tm6Number');
 const entryDate = defineModel<Date | null | string>('entryDate');
 
-const visaTypeOption = defineModel<{ label: string; value: string }[]>(
-  'visaTypeOption',
-  { required: true },
-);
-
 withDefaults(
   defineProps<{
     title?: string;
@@ -65,390 +64,414 @@ onMounted(async () => {
 });
 
 const visaTypeOptions = ref<Record<string, unknown>[]>([]);
-const visaTypeFilter = selectFilterOptionRefMod(
-  visaTypeOption,
-  visaTypeOptions,
-  'label',
+let visaTypeFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
+onMounted(() => {
+  visaTypeFilter = selectFilterOptionRefMod(
+    optionStore.globalOption?.nationality,
+    visaTypeOptions,
+    'label',
+  );
+});
+
+watch(
+  () => optionStore.globalOption,
+  () => {
+    visaTypeFilter = selectFilterOptionRefMod(
+      optionStore.globalOption.nationality,
+      visaTypeOptions,
+      'label',
+    );
+  },
 );
 </script>
 
 <template>
-  <div class="col-md-3 col-12 app-text-muted">
-    • {{ $t(`formDialogTitleVisa`) }}
-  </div>
-  <div class="col-md-9 col-12 row q-col-gutter-md">
-    <q-select
-      outlined
-      clearable
-      use-input
-      fill-input
-      emit-value
-      map-options
-      hide-selected
-      hide-bottom-space
-      input-debounce="0"
-      v-model="visaType"
-      option-value="value"
-      option-label="label"
-      lazy-rules="ondemand"
-      class="col-md-3 col-6"
-      :dense="dense"
-      :readonly="readonly"
-      :options="visaTypeOptions"
-      :hide-dropdown-icon="readonly"
-      :for="`${prefixId}-select-visa-type`"
-      :label="$t('formDialogInputVisaType')"
-      @filter="visaTypeFilter"
-    >
-      <template v-slot:no-option>
-        <q-item>
-          <q-item-section class="text-grey">
-            {{ $t('noResults') }}
-          </q-item-section>
-        </q-item>
-      </template>
-    </q-select>
-    <!-- :rules="[
+  <div class="row">
+    <div class="col-12 q-pb-sm text-weight-bold text-body1">
+      <q-icon
+        flat
+        size="xs"
+        class="q-pa-sm rounded q-mr-xs"
+        color="info"
+        name="mdi-notebook"
+        style="background-color: var(--surface-3)"
+      />
+      {{ $t(`${title}`) }}
+    </div>
+    <div class="col-12 row q-col-gutter-md">
+      <q-select
+        outlined
+        clearable
+        use-input
+        fill-input
+        emit-value
+        map-options
+        hide-selected
+        hide-bottom-space
+        input-debounce="0"
+        v-model="visaType"
+        option-value="value"
+        option-label="label"
+        lazy-rules="ondemand"
+        class="col-4"
+        :dense="dense"
+        :readonly="readonly"
+        :options="visaTypeOptions"
+        :hide-dropdown-icon="readonly"
+        :for="`${prefixId}-select-visa-type`"
+        :label="$t('formDialogInputVisaType')"
+        @filter="visaTypeFilter"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ $t('noResults') }}
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+      <!-- :rules="[
         (val: string) =>
           !!val || $t('selectValidate') + $t('formDialogInputVisaType'),
       ]" -->
-    <q-input
-      lazy-rules="ondemand"
-      :for="`${prefixId}-input-visa-no`"
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      class="col-md-3 col-6"
-      :label="$t('formDialogInputVisaNo')"
-      v-model="visaNumber"
-    />
-    <!-- :rules="[
+      <q-input
+        lazy-rules="ondemand"
+        :for="`${prefixId}-input-visa-no`"
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-4"
+        :label="$t('formDialogInputVisaNo')"
+        v-model="visaNumber"
+      />
+      <!-- :rules="[
         (val: string) =>
           !!val || $t('inputValidate') + $t('formDialogInputVisaNo'),
       ]" -->
-    <VueDatePicker
-      :id="`${prefixId}-date-picker-visa-issuance`"
-      utc
-      autoApply
-      v-model="visaIssueDate"
-      :teleport="true"
-      :dark="$q.dark.isActive"
-      :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
-      :enableTimePicker="false"
-      :disabled="readonly"
-      class="col-md-3 col-6"
-    >
-      <template #year="{ value }">
-        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-      </template>
-      <template #year-overlay-value="{ value }">
-        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-      </template>
-      <template #trigger>
-        <q-input
-          lazy-rules="ondemand"
-          :id="`${prefixId}-input-birth-date`"
-          hide-bottom-space
-          :label="$t('formDialogInputVisaIssuance')"
-          :dense="dense"
-          outlined
-          :readonly="readonly"
-          placeholder="DD/MM/YYYY"
-          :mask="readonly ? '' : '##/##/####'"
-          :model-value="
-            visaIssueDate
-              ? readonly
-                ? dateFormat(visaIssueDate)
-                : dateFormat(visaIssueDate, false, false, true)
-              : undefined
-          "
-          @update:model-value="
-            (v) => {
-              if (v && v.toString().length === 10) {
-                visaIssueDate = parseAndFormatDate(v, locale);
+      <VueDatePicker
+        :id="`${prefixId}-date-picker-visa-issuance`"
+        utc
+        autoApply
+        v-model="visaIssueDate"
+        :teleport="true"
+        :dark="$q.dark.isActive"
+        :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
+        :enableTimePicker="false"
+        :disabled="readonly"
+        class="col-2"
+      >
+        <template #year="{ value }">
+          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+        </template>
+        <template #year-overlay-value="{ value }">
+          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+        </template>
+        <template #trigger>
+          <q-input
+            lazy-rules="ondemand"
+            :id="`${prefixId}-input-birth-date`"
+            hide-bottom-space
+            :label="$t('formDialogInputVisaIssuance')"
+            :dense="dense"
+            outlined
+            :readonly="readonly"
+            placeholder="DD/MM/YYYY"
+            :mask="readonly ? '' : '##/##/####'"
+            :model-value="
+              visaIssueDate
+                ? readonly
+                  ? dateFormat(visaIssueDate)
+                  : dateFormat(visaIssueDate, false, false, true)
+                : undefined
+            "
+            @update:model-value="
+              (v) => {
+                if (v && v.toString().length === 10) {
+                  visaIssueDate = parseAndFormatDate(v, locale);
+                }
               }
-            }
-          "
-        >
-          <!-- :rules="[
+            "
+          >
+            <!-- :rules="[
             (val: string) =>
               !!val || $t('selectValidate') + $t('formDialogInputVisaIssuance'),
           ]" -->
-          <template v-slot:prepend>
-            <q-icon
-              size="xs"
-              name="mdi-calendar-blank-outline"
-              class="cursor-pointer"
-              color="positive"
-            />
-          </template>
-          <template v-slot:append>
-            <q-icon
-              v-if="visaIssueDate && !readonly"
-              name="mdi-close-circle"
-              class="cursor-pointer app-text-muted"
-              size="sm"
-              @click="visaIssueDate = undefined"
-            />
-          </template>
-        </q-input>
-      </template>
-    </VueDatePicker>
-    <VueDatePicker
-      :id="`${prefixId}-date-picker-visa-expire`"
-      utc
-      autoApply
-      v-model="visaExpiryDate"
-      :teleport="true"
-      :dark="$q.dark.isActive"
-      :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
-      :enableTimePicker="false"
-      :disabled="readonly"
-      class="col-md-3 col-6"
-    >
-      <template #year="{ value }">
-        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-      </template>
-      <template #year-overlay-value="{ value }">
-        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-      </template>
-      <template #trigger>
-        <q-input
-          lazy-rules="ondemand"
-          :id="`${prefixId}-input-birth-date`"
-          hide-bottom-space
-          :label="$t('formDialogInputVisaExpire')"
-          :dense="dense"
-          outlined
-          :readonly="readonly"
-          placeholder="DD/MM/YYYY"
-          :mask="readonly ? '' : '##/##/####'"
-          :model-value="
-            visaExpiryDate
-              ? readonly
-                ? dateFormat(visaExpiryDate)
-                : dateFormat(visaExpiryDate, false, false, true)
-              : undefined
-          "
-          @update:model-value="
-            (v) => {
-              if (v && v.toString().length === 10) {
-                visaExpiryDate = parseAndFormatDate(v, locale);
+            <template v-slot:prepend>
+              <q-icon
+                size="xs"
+                name="mdi-calendar-blank-outline"
+                class="cursor-pointer"
+                color="primary"
+              />
+            </template>
+            <template v-slot:append>
+              <q-icon
+                v-if="visaIssueDate && !readonly"
+                name="mdi-close-circle"
+                class="cursor-pointer app-text-muted"
+                size="sm"
+                @click="visaIssueDate = undefined"
+              />
+            </template>
+          </q-input>
+        </template>
+      </VueDatePicker>
+      <VueDatePicker
+        :id="`${prefixId}-date-picker-visa-expire`"
+        utc
+        autoApply
+        v-model="visaExpiryDate"
+        :teleport="true"
+        :dark="$q.dark.isActive"
+        :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
+        :enableTimePicker="false"
+        :disabled="readonly"
+        class="col-2"
+      >
+        <template #year="{ value }">
+          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+        </template>
+        <template #year-overlay-value="{ value }">
+          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+        </template>
+        <template #trigger>
+          <q-input
+            lazy-rules="ondemand"
+            :id="`${prefixId}-input-birth-date`"
+            hide-bottom-space
+            :label="$t('formDialogInputVisaExpire')"
+            :dense="dense"
+            outlined
+            :readonly="readonly"
+            placeholder="DD/MM/YYYY"
+            :mask="readonly ? '' : '##/##/####'"
+            :model-value="
+              visaExpiryDate
+                ? readonly
+                  ? dateFormat(visaExpiryDate)
+                  : dateFormat(visaExpiryDate, false, false, true)
+                : undefined
+            "
+            @update:model-value="
+              (v) => {
+                if (v && v.toString().length === 10) {
+                  visaExpiryDate = parseAndFormatDate(v, locale);
+                }
               }
-            }
-          "
-        >
-          <!-- :rules="[
+            "
+          >
+            <!-- :rules="[
             (val: string) =>
               !!val || $t('selectValidate') + $t('formDialogInputVisaExpire'),
           ]" -->
-          <template v-slot:prepend>
-            <q-icon
-              size="xs"
-              name="mdi-calendar-blank-outline"
-              class="cursor-pointer"
-              color="positive"
-            />
-          </template>
-          <template v-slot:append>
-            <q-icon
-              v-if="visaExpiryDate && !readonly"
-              name="mdi-close-circle"
-              class="cursor-pointer app-text-muted"
-              size="sm"
-              @click="visaExpiryDate = undefined"
-            />
-          </template>
-        </q-input>
-      </template>
-    </VueDatePicker>
-    <q-input
-      lazy-rules="ondemand"
-      :for="`${prefixId}-input-visa-place`"
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      class="col-6"
-      :label="$t('formDialogInputVisaPlace')"
-      v-model="visaIssuingPlace"
-    />
-    <!-- :rules="[
+            <template v-slot:prepend>
+              <q-icon
+                size="xs"
+                name="mdi-calendar-blank-outline"
+                class="cursor-pointer"
+                color="primary"
+              />
+            </template>
+            <template v-slot:append>
+              <q-icon
+                v-if="visaExpiryDate && !readonly"
+                name="mdi-close-circle"
+                class="cursor-pointer app-text-muted"
+                size="sm"
+                @click="visaExpiryDate = undefined"
+              />
+            </template>
+          </q-input>
+        </template>
+      </VueDatePicker>
+
+      <q-input
+        lazy-rules="ondemand"
+        :for="`${prefixId}-input-visa-place`"
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-5"
+        :label="$t('formDialogInputVisaPlace')"
+        v-model="visaIssuingPlace"
+      />
+      <!-- :rules="[
         (val: string) =>
           !!val || $t('selectValidate') + $t('formDialogInputVisaPlace'),
       ]" -->
-    <VueDatePicker
-      :id="`${prefixId}-date-picker-visa-until`"
-      utc
-      autoApply
-      v-model="visaStayUntilDate"
-      :teleport="true"
-      :dark="$q.dark.isActive"
-      :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
-      :enableTimePicker="false"
-      :disabled="readonly"
-      class="col-6"
-    >
-      <template #year="{ value }">
-        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-      </template>
-      <template #year-overlay-value="{ value }">
-        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-      </template>
-      <template #trigger>
-        <q-input
-          lazy-rules="ondemand"
-          :id="`${prefixId}-input-birth-date`"
-          hide-bottom-space
-          :label="$t('formDialogInputVisaStayUntil')"
-          :dense="dense"
-          outlined
-          :readonly="readonly"
-          placeholder="DD/MM/YYYY"
-          :mask="readonly ? '' : '##/##/####'"
-          :model-value="
-            visaStayUntilDate
-              ? readonly
-                ? dateFormat(visaStayUntilDate)
-                : dateFormat(visaStayUntilDate, false, false, true)
-              : undefined
-          "
-          @update:model-value="
-            (v) => {
-              if (v && v.toString().length === 10) {
-                visaStayUntilDate = parseAndFormatDate(v, locale);
+      <VueDatePicker
+        :id="`${prefixId}-date-picker-visa-until`"
+        utc
+        autoApply
+        v-model="visaStayUntilDate"
+        :teleport="true"
+        :dark="$q.dark.isActive"
+        :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
+        :enableTimePicker="false"
+        :disabled="readonly"
+        class="col-4"
+      >
+        <template #year="{ value }">
+          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+        </template>
+        <template #year-overlay-value="{ value }">
+          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+        </template>
+        <template #trigger>
+          <q-input
+            lazy-rules="ondemand"
+            :id="`${prefixId}-input-birth-date`"
+            hide-bottom-space
+            :label="$t('formDialogInputVisaStayUntil')"
+            :dense="dense"
+            outlined
+            :readonly="readonly"
+            placeholder="DD/MM/YYYY"
+            :mask="readonly ? '' : '##/##/####'"
+            :model-value="
+              visaStayUntilDate
+                ? readonly
+                  ? dateFormat(visaStayUntilDate)
+                  : dateFormat(visaStayUntilDate, false, false, true)
+                : undefined
+            "
+            @update:model-value="
+              (v) => {
+                if (v && v.toString().length === 10) {
+                  visaStayUntilDate = parseAndFormatDate(v, locale);
+                }
               }
-            }
-          "
-        >
-          <!-- :rules="[
+            "
+          >
+            <!-- :rules="[
             (val: string) =>
               !!val ||
               $t('selectValidate') + $t('formDialogInputVisaStayUntil'),
           ]" -->
-          <template v-slot:prepend>
-            <q-icon
-              size="xs"
-              name="mdi-calendar-blank-outline"
-              class="cursor-pointer"
-              color="positive"
-            />
-          </template>
-          <template v-slot:append>
-            <q-icon
-              v-if="visaStayUntilDate && !readonly"
-              name="mdi-close-circle"
-              class="cursor-pointer app-text-muted"
-              size="sm"
-              @click="visaStayUntilDate = undefined"
-            />
-          </template>
-        </q-input>
-      </template>
-    </VueDatePicker>
-    <q-input
-      lazy-rules="ondemand"
-      :for="`${prefixId}-input-tm6`"
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      class="col-6"
-      :label="$t('formDialogInputVisaTM6')"
-      v-model="tm6Number"
-    />
-    <!-- :rules="[
+            <template v-slot:prepend>
+              <q-icon
+                size="xs"
+                name="mdi-calendar-blank-outline"
+                class="cursor-pointer"
+                color="primary"
+              />
+            </template>
+            <template v-slot:append>
+              <q-icon
+                v-if="visaStayUntilDate && !readonly"
+                name="mdi-close-circle"
+                class="cursor-pointer app-text-muted"
+                size="sm"
+                @click="visaStayUntilDate = undefined"
+              />
+            </template>
+          </q-input>
+        </template>
+      </VueDatePicker>
+
+      <q-input
+        lazy-rules="ondemand"
+        :for="`${prefixId}-input-tm6`"
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-5"
+        :label="$t('formDialogInputVisaTM6')"
+        v-model="tm6Number"
+      />
+      <!-- :rules="[
         (val: string) =>
           !!val || $t('inputValidate') + $t('formDialogInputVisaTM6'),
       ]" -->
-    <VueDatePicker
-      :id="`${prefixId}-date-picker-visa-enter`"
-      utc
-      autoApply
-      v-model="entryDate"
-      :teleport="true"
-      :dark="$q.dark.isActive"
-      :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
-      :enableTimePicker="false"
-      :disabled="readonly"
-      class="col-6"
-    >
-      <template #year="{ value }">
-        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-      </template>
-      <template #year-overlay-value="{ value }">
-        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-      </template>
-      <template #trigger>
-        <q-input
-          lazy-rules="ondemand"
-          :id="`${prefixId}-input-birth-date`"
-          :label="$t('formDialogInputVisaEnter')"
-          :dense="dense"
-          outlined
-          :readonly="readonly"
-          placeholder="DD/MM/YYYY"
-          :mask="readonly ? '' : '##/##/####'"
-          :model-value="
-            entryDate
-              ? readonly
-                ? dateFormat(entryDate)
-                : dateFormat(entryDate, false, false, true)
-              : undefined
-          "
-          @update:model-value="
-            (v) => {
-              if (v && v.toString().length === 10) {
-                entryDate = parseAndFormatDate(v, locale);
+      <VueDatePicker
+        :id="`${prefixId}-date-picker-visa-enter`"
+        utc
+        autoApply
+        v-model="entryDate"
+        :teleport="true"
+        :dark="$q.dark.isActive"
+        :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
+        :enableTimePicker="false"
+        :disabled="readonly"
+        class="col-4"
+      >
+        <template #year="{ value }">
+          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+        </template>
+        <template #year-overlay-value="{ value }">
+          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+        </template>
+        <template #trigger>
+          <q-input
+            lazy-rules="ondemand"
+            :id="`${prefixId}-input-birth-date`"
+            :label="$t('formDialogInputVisaEnter')"
+            :dense="dense"
+            outlined
+            :readonly="readonly"
+            placeholder="DD/MM/YYYY"
+            :mask="readonly ? '' : '##/##/####'"
+            :model-value="
+              entryDate
+                ? readonly
+                  ? dateFormat(entryDate)
+                  : dateFormat(entryDate, false, false, true)
+                : undefined
+            "
+            @update:model-value="
+              (v) => {
+                if (v && v.toString().length === 10) {
+                  entryDate = parseAndFormatDate(v, locale);
+                }
               }
-            }
-          "
-        >
-          <!-- :rules="[
+            "
+          >
+            <!-- :rules="[
             (val: string) =>
               !!val || $t('selectValidate') + $t('formDialogInputVisaEnter'),
           ]" -->
-          <template v-slot:prepend>
-            <q-icon
-              size="xs"
-              name="mdi-calendar-blank-outline"
-              class="cursor-pointer"
-              color="positive"
-            />
-          </template>
-          <template v-slot:append>
-            <q-icon
-              v-if="entryDate && !readonly"
-              name="mdi-close-circle"
-              class="cursor-pointer app-text-muted"
-              size="sm"
-              @click.stop="entryDate = undefined"
-            />
-          </template>
-        </q-input>
-      </template>
-    </VueDatePicker>
+            <template v-slot:prepend>
+              <q-icon
+                size="xs"
+                name="mdi-calendar-blank-outline"
+                class="cursor-pointer"
+                color="primary"
+              />
+            </template>
+            <template v-slot:append>
+              <q-icon
+                v-if="entryDate && !readonly"
+                name="mdi-close-circle"
+                class="cursor-pointer app-text-muted"
+                size="sm"
+                @click.stop="entryDate = undefined"
+              />
+            </template>
+          </q-input>
+        </template>
+      </VueDatePicker>
 
-    <div class="col-12 row justify-end" style="min-height: 50px">
-      <q-btn
-        v-if="!readonly && showBtnSave"
-        dense
-        unelevated
-        id="save-basic-info"
-        color="primary"
-        class="q-px-md"
-        :label="$t('save')"
-        @click="$emit('save')"
-      />
+      <div class="col-12 row justify-end" style="min-height: 50px">
+        <q-btn
+          v-if="!readonly && showBtnSave"
+          dense
+          unelevated
+          id="save-basic-info"
+          color="primary"
+          class="q-px-md"
+          :label="$t('save')"
+          @click="$emit('save')"
+        />
+      </div>
     </div>
   </div>
-
-  <q-separator
-    v-if="separator"
-    class="col-12 q-mt-xl q-mb-md"
-    style="padding-block: 0.5px"
-  />
 </template>
 
 <style scoped></style>