diff --git a/package-lock.json b/package-lock.json
index 7674a311..d1987598 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,15 +1,16 @@
 {
-  "name": "jobs-file",
+  "name": "jobs-worker-service",
   "version": "0.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "jobs-file",
+      "name": "jobs-worker-service",
       "version": "0.0.1",
       "dependencies": {
         "@quasar/extras": "^1.16.9",
         "@tato30/vue-pdf": "^1.9.5",
+        "@vuepic/vue-datepicker": "^8.4.0",
         "axios": "^1.6.8",
         "keycloak-js": "^24.0.2",
         "mime": "^4.0.1",
@@ -23,6 +24,7 @@
         "vue-router": "^4.3.0"
       },
       "devDependencies": {
+        "@iconify/vue": "^4.1.1",
         "@intlify/unplugin-vue-i18n": "^4.0.0",
         "@quasar/app-vite": "2.0.0-beta.2",
         "@types/node": "^20.11.30",
@@ -562,6 +564,27 @@
       "integrity": "sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==",
       "dev": true
     },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "dev": true
+    },
+    "node_modules/@iconify/vue": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-4.1.1.tgz",
+      "integrity": "sha512-RL85Bm/DAe8y6rT6pux7D2FJSiUEM/TPfyK7GrbAOfTSwrhvwJW+S5yijdGcmtXouA8MtuH9C7l4hiSE4mLMjg==",
+      "dev": true,
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "vue": ">=3"
+      }
+    },
     "node_modules/@intlify/bundle-utils": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/@intlify/bundle-utils/-/bundle-utils-8.0.0.tgz",
@@ -1582,6 +1605,20 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.21.tgz",
       "integrity": "sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g=="
     },
+    "node_modules/@vuepic/vue-datepicker": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-8.4.0.tgz",
+      "integrity": "sha512-Twgvqwd5GrQf3JT2DvAQ/Ku0+sM51zsH1OkQKoRwYqJyF+EugItS8I0CveYmcI3Gbu92RZ9C3DMutvkaiuDzAQ==",
+      "dependencies": {
+        "date-fns": "^3.6.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.0"
+      }
+    },
     "node_modules/abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -2555,6 +2592,15 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
diff --git a/package.json b/package.json
index 38bafc08..3bd51b33 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   "dependencies": {
     "@quasar/extras": "^1.16.9",
     "@tato30/vue-pdf": "^1.9.5",
+    "@vuepic/vue-datepicker": "^8.4.0",
     "axios": "^1.6.8",
     "keycloak-js": "^24.0.2",
     "mime": "^4.0.1",
diff --git a/src/boot/components.ts b/src/boot/components.ts
index fc7cdf98..9bd627c0 100644
--- a/src/boot/components.ts
+++ b/src/boot/components.ts
@@ -1,8 +1,11 @@
 import { boot } from 'quasar/wrappers';
+import VueDatePicker from '@vuepic/vue-datepicker';
+import '@vuepic/vue-datepicker/dist/main.css'
 import GlobalDialog from 'components/GlobalDialog.vue';
 import GlobalLoading from 'components/GlobalLoading.vue';
 
 export default boot(({ app }) => {
   app.component('global-dialog', GlobalDialog);
   app.component('global-loading', GlobalLoading);
+  app.component('VueDatePicker', VueDatePicker);
 });
diff --git a/src/components/01_branch-management/BtnAddComponent.vue b/src/components/01_branch-management/BtnAddComponent.vue
index 1a864b1b..d15dfc12 100644
--- a/src/components/01_branch-management/BtnAddComponent.vue
+++ b/src/components/01_branch-management/BtnAddComponent.vue
@@ -16,7 +16,7 @@ defineProps<{
         round
       />
     </div>
-    <div class="row q-mt-sm color-text">{{ label }}</div>
+    <div class="row q-mt-sm color-text" v-if="label">{{ $t(label) }}</div>
   </div>
 </template>
 
diff --git a/src/components/FormDialog.vue b/src/components/FormDialog.vue
index 6e69f4f3..a058a683 100644
--- a/src/components/FormDialog.vue
+++ b/src/components/FormDialog.vue
@@ -4,21 +4,19 @@ import AppBox from 'components/app/AppBox.vue';
 
 defineProps<{
   title: string;
-  addressLocaleTitle: string;
-  addressEngTitle: string;
+  addressTitle: string;
+  addressENTitle: string;
+  submit?: (...args: unknown[]) => void;
+  close?: (...args: unknown[]) => void;
 }>();
 
-interface Address {
-  address: string;
-  province: string;
-  district: string;
-  subDistrict: string;
-  zip: string;
-}
-
 const modal = defineModel('modal', { default: false });
-const addressL = defineModel<Address>('addressL');
-const addressEng = defineModel<Address>('addressEng');
+const address = defineModel('address', { default: '' });
+const addressEN = defineModel('addressEN', { default: '' });
+const provinceId = defineModel('provinceId');
+const districtId = defineModel('districtId');
+const subDistrictId = defineModel('subDistrictId');
+const zipCode = defineModel('zipCode', { default: '' });
 
 const addrOptions = ref({
   provinceOps: [
@@ -37,194 +35,207 @@ const addrOptions = ref({
 </script>
 <template>
   <q-dialog full-width v-model="modal">
-    <AppBox
-      v-if="addressL && addressEng"
-      style="padding: 0; border-radius: var(--radius-2)"
-    >
-      <!-- header -->
-      <q-card-section class="form-header">
-        <div class="row items-center justity-between">
-          <div
-            class="col text-subtitle1 text-weight-bold"
-            style="color: hsl(var(--info-bg))"
-          >
-            {{ title }}
-          </div>
-          <q-btn
-            round
-            flat
-            icon="mdi-close"
-            padding="xs"
-            class="close-btn"
-            :class="{ dark: $q.dark.isActive }"
-            v-close-popup
-          />
-        </div>
-      </q-card-section>
-
-      <!-- form-top -->
-      <div class="form-body-top" :class="{ dark: $q.dark.isActive }">
-        <q-card-section class="column col-12">
-          <div class="row q-col-gutter-x-md" style="row-gap: 16px">
-            <slot name="top"></slot>
-          </div>
-        </q-card-section>
-      </div>
-
-      <!-- form-mid -->
-      <div class="row" style="overflow-y: auto; max-height: 50vh">
-        <!-- prepend -->
-        <q-card-section
-          class="column col-4"
-          v-if="$slots.prepend && !$slots.append"
-        >
-          <slot name="prepend"></slot>
-        </q-card-section>
-        <!-- center -->
-        <q-card-section
-          class="column"
-          :class="`${$slots.prepend ? 'col-8' : $slots.append ? 'col-6' : 'col-12'}`"
-        >
-          <div
-            class="row inline col-12 q-col-gutter-x-md"
-            style="row-gap: 16px"
-          >
-            <slot name="midTop"></slot>
-            <div class="col-12">
-              {{ addressLocaleTitle }}
+    <AppBox style="padding: 0; border-radius: var(--radius-2)">
+      <q-form greedy @submit.prevent @validation-success="submit">
+        <!-- header -->
+        <q-card-section class="form-header">
+          <div class="row items-center justity-between">
+            <div
+              class="col text-subtitle1 text-weight-bold"
+              style="color: hsl(var(--info-bg))"
+            >
+              {{ title }}
             </div>
-            <q-input
-              dense
-              outlined
-              label="ที่อยู่"
-              class="col-12"
-              v-model="addressL.address"
+            <q-btn
+              round
+              flat
+              id="closeDialog"
+              icon="mdi-close"
+              padding="xs"
+              class="close-btn"
+              :class="{ dark: $q.dark.isActive }"
+              v-close-popup
+              @click="close"
             />
-            <q-select
-              dense
-              outlined
-              emit-value
-              map-options
-              v-model="addressL.province"
-              option-value="value"
-              option-label="label"
-              label="จังหวัด"
-              class="col-3"
-              :options="addrOptions.provinceOps"
-            />
-            <q-select
-              dense
-              outlined
-              emit-value
-              map-options
-              v-model="addressL.district"
-              option-value="value"
-              option-label="label"
-              label="อำเภอ"
-              class="col-3"
-              :options="addrOptions.districtOps"
-            />
-            <q-select
-              dense
-              outlined
-              emit-value
-              map-options
-              v-model="addressL.subDistrict"
-              option-value="value"
-              option-label="label"
-              label="ตำบล"
-              class="col-3"
-              :options="addrOptions.subDistrictOps"
-            />
-            <q-input
-              dense
-              readonly
-              outlined
-              label="รหัสไปรษณีย์"
-              class="col-3"
-              v-model="addressL.zip"
-            />
-            <span class="col-12">
-              {{ addressEngTitle }}
-            </span>
-            <q-input
-              dense
-              outlined
-              label="ที่อยู่"
-              class="col-12"
-              v-model="addressEng.address"
-            />
-            <q-select
-              dense
-              outlined
-              emit-value
-              map-options
-              v-model="addressEng.province"
-              option-value="value"
-              option-label="label"
-              label="จังหวัด"
-              class="col-3"
-              :options="addrOptions.provinceOps"
-            />
-            <q-select
-              dense
-              outlined
-              emit-value
-              map-options
-              v-model="addressEng.district"
-              option-value="value"
-              option-label="label"
-              label="อำเภอ"
-              class="col-3"
-              :options="addrOptions.districtOps"
-            />
-            <q-select
-              dense
-              outlined
-              emit-value
-              map-options
-              v-model="addressEng.subDistrict"
-              option-value="value"
-              option-label="label"
-              label="ตำบล"
-              class="col-3"
-              :options="addrOptions.subDistrictOps"
-            />
-            <q-input
-              dense
-              readonly
-              outlined
-              label="รหัสไปรษณีย์"
-              class="col-3"
-              v-model="addressEng.zip"
-            />
-            <div class="col-12" v-if="$slots.midBottom">
-              <q-separator size="1px" />
-            </div>
-            <slot name="midBottom"></slot>
           </div>
         </q-card-section>
-        <!-- append -->
-        <q-card-section
-          class="column col-6"
-          v-if="$slots.append && !$slots.prepend"
-        >
-          <slot name="append"></slot>
-        </q-card-section>
-      </div>
 
-      <!-- footer -->
-      <q-card-section class="form-footer">
-        <div class="text-right">
-          <q-btn
-            dense
-            unelevated
-            color="primary"
-            class="q-px-sm"
-            :label="$t('save')"
-          />
+        <!-- form-top -->
+        <div class="form-body-top" :class="{ dark: $q.dark.isActive }">
+          <q-card-section class="column col-12">
+            <div class="row q-col-gutter-x-md" style="row-gap: 16px">
+              <slot name="top"></slot>
+            </div>
+          </q-card-section>
         </div>
-      </q-card-section>
+
+        <!-- form-mid -->
+        <div class="row" style="overflow-y: auto; max-height: 50vh">
+          <!-- prepend -->
+          <q-card-section
+            class="column col-4"
+            v-if="$slots.prepend && !$slots.append"
+          >
+            <slot name="prepend"></slot>
+          </q-card-section>
+          <!-- center -->
+          <q-card-section
+            class="column"
+            :class="`${$slots.prepend ? 'col-8' : $slots.append ? 'col-6' : 'col-12'}`"
+          >
+            <div
+              class="row inline col-12 q-col-gutter-x-md"
+              style="row-gap: 16px"
+            >
+              <slot name="midTop"></slot>
+              <div class="col-12">
+                {{ addressTitle }}
+              </div>
+              <q-input
+                dense
+                outlined
+                id="AddrL"
+                label="ที่อยู่"
+                class="col-12"
+                v-model="address"
+              />
+              <q-select
+                dense
+                outlined
+                emit-value
+                map-options
+                id="selectProvinceL"
+                v-model="provinceId"
+                option-value="value"
+                option-label="label"
+                label="จังหวัด"
+                class="col-3"
+                :options="addrOptions.provinceOps"
+              />
+              <q-select
+                dense
+                outlined
+                emit-value
+                map-options
+                id="selectDistrictL"
+                v-model="districtId"
+                option-value="value"
+                option-label="label"
+                label="อำเภอ"
+                class="col-3"
+                :options="addrOptions.districtOps"
+              />
+              <q-select
+                dense
+                outlined
+                emit-value
+                map-
+                id="selectSubDistrictL"
+                v-model="subDistrictId"
+                option-value="value"
+                option-label="label"
+                label="ตำบล"
+                class="col-3"
+                :options="addrOptions.subDistrictOps"
+              />
+              <q-input
+                dense
+                readonly
+                outlined
+                id="zipL"
+                label="รหัสไปรษณีย์"
+                class="col-3"
+                v-model="zipCode"
+              />
+              <span class="col-12">
+                {{ addressENTitle }}
+              </span>
+              <q-input
+                dense
+                outlined
+                id="addressEN"
+                label="ที่อยู่"
+                class="col-12"
+                v-model="addressEN"
+              />
+              <q-select
+                dense
+                outlined
+                emit-value
+                map-options
+                id="selectProvinceEN"
+                v-model="provinceId"
+                option-value="value"
+                option-label="label"
+                label="จังหวัด"
+                class="col-3"
+                :options="addrOptions.provinceOps"
+              />
+              <q-select
+                dense
+                outlined
+                emit-value
+                map-options
+                id="selectDistrictEN"
+                v-model="districtId"
+                option-value="value"
+                option-label="label"
+                label="อำเภอ"
+                class="col-3"
+                :options="addrOptions.districtOps"
+              />
+              <q-select
+                dense
+                outlined
+                emit-value
+                map-options
+                id="SelectSubDistrictEN"
+                v-model="subDistrictId"
+                option-value="value"
+                option-label="label"
+                label="ตำบล"
+                class="col-3"
+                :options="addrOptions.subDistrictOps"
+              />
+              <q-input
+                dense
+                readonly
+                outlined
+                zip="zipEN"
+                label="รหัสไปรษณีย์"
+                class="col-3"
+                v-model="zipCode"
+              />
+              <div class="col-12" v-if="$slots.midBottom">
+                <q-separator size="1px" />
+              </div>
+              <slot name="midBottom"></slot>
+            </div>
+          </q-card-section>
+          <!-- append -->
+          <q-card-section
+            class="column col-6"
+            v-if="$slots.append && !$slots.prepend"
+          >
+            <slot name="append"></slot>
+          </q-card-section>
+        </div>
+
+        <!-- footer -->
+        <q-card-section class="form-footer">
+          <div class="text-right">
+            <q-btn
+              dense
+              unelevated
+              id="submitBtn"
+              type="submit"
+              color="primary"
+              class="q-px-sm"
+              :label="$t('save')"
+            />
+          </div>
+        </q-card-section>
+      </q-form>
     </AppBox>
   </q-dialog>
 </template>
diff --git a/src/components/home/PersonCard.vue b/src/components/home/PersonCard.vue
index 176c9548..ce416225 100644
--- a/src/components/home/PersonCard.vue
+++ b/src/components/home/PersonCard.vue
@@ -159,7 +159,7 @@ const status = ref(false);
           >
             {{ d.label }}
           </span>
-          <span>{{ d.value }}</span>
+          <span>{{ d.value || '-' }}</span>
         </div>
       </div>
     </AppBox>
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index 80f7ca60..c470780d 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -47,3 +47,7 @@ $separator-dark-color: var(--border-color);
 .q-dialog__backdrop {
   background-color: hsla(0 0% 60% / 0.4) !important;
 }
+
+.q-field--dense .q-field__label {
+  font-family: 'Noto Sans Thai', sans-serif;
+}