diff --git a/src/components/FormDialog.vue b/src/components/FormDialog.vue
new file mode 100644
index 00000000..51e99bf7
--- /dev/null
+++ b/src/components/FormDialog.vue
@@ -0,0 +1,259 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import AppBox from 'components/app/AppBox.vue';
+
+defineProps<{
+  title: string;
+  addressLocaleTitle: string;
+  addressEngTitle: string;
+}>();
+
+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 addrOptions = ref({
+  provinceOps: [
+    { label: 'เชียงใหม่', value: '1' },
+    { label: 'เชียงราย', value: '2' },
+  ],
+  districtOps: [
+    { label: 'อำเภอ1', value: '1' },
+    { label: 'อำเภอ2', value: '2' },
+  ],
+  subDistrictOps: [
+    { label: 'ตำบล1', value: '1' },
+    { label: 'ตำบล2', value: '2' },
+  ],
+});
+</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">
+            <slot name="top"></slot>
+          </div>
+        </q-card-section>
+      </div>
+
+      <!-- form-mid -->
+      <div class="row" style="overflow-y: auto; max-height: 60vh">
+        <!-- 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' : 'col-6'}`"
+        >
+          <div
+            class="row inline col-12 q-col-gutter-x-md"
+            style="row-gap: 16px"
+          >
+            <slot name="midTop"></slot>
+            <div class="col-12">
+              {{ addressLocaleTitle }}
+            </div>
+            <q-input
+              dense
+              outlined
+              label="ที่อยู่"
+              class="col-12"
+              v-model="addressL.address"
+            />
+            <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')"
+          />
+        </div>
+      </q-card-section>
+    </AppBox>
+  </q-dialog>
+</template>
+
+<style scoped lang="scss">
+.close-btn {
+  color: hsl(var(--negative));
+  background-color: hsla(var(--negative) / 0.1);
+
+  &.dark {
+    background-color: transparent;
+    border: 1px solid hsl(var(--negative));
+  }
+}
+
+.form-header {
+  border-bottom: 1px solid var(--border-color);
+}
+
+.form-body-top {
+  --_body-bg: var(--sand-0);
+  background-color: var(--_body-bg);
+
+  &.dark {
+    --_body-bg: var(--gray-10);
+  }
+}
+
+.form-footer {
+  border-top: 1px solid var(--border-color);
+}
+</style>
diff --git a/src/css/app.scss b/src/css/app.scss
index 00d298f2..806bbc41 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -17,7 +17,7 @@ html {
   --text-mute: var(--stone-4-hsl);
   --info-fg: 0 0% 100%;
   --info-bg: var(--blue-6-hsl);
-
+  --negative: var(--red-9-hsl);
   --gender-male: var(--blue-5-hsl);
   --gender-female: var(--pink-7-hsl);
 
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index 14f41bf0..c6933799 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -10,7 +10,7 @@ $dark: var(--gray-11);
 $dark-page: var(--gray-10);
 
 $positive: #00bd9d;
-$negative: #cc0004;
+$negative: var(--red-9-hsl);
 $info: #328bf3;
 $warning: #ffc224;
 
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 305f8411..73ed558b 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -9,6 +9,7 @@ import StatCardComponent from 'components/StatCardComponent.vue';
 import SelectorList from 'components/SelectorList.vue';
 import BtnAddComponent from 'components/01_branch-management/BtnAddComponent.vue';
 import TooltipComponent from 'components/TooltipComponent.vue';
+import FormDialog from 'src/components/FormDialog.vue';
 
 const userStore = useUserStore();
 const { data: userData } = storeToRefs(userStore);
@@ -24,12 +25,57 @@ const branchStat = ref([
 ]);
 
 const selectorLabel = ref('');
+const modal = ref(false);
+
+const hqId = ref('');
+const branchId = ref('');
+
+const genderOptions = ref([
+  { label: 'ชาย', value: '1' },
+  { label: 'หญิง', value: '2' },
+]);
+
+const hqOptions = ref([
+  { label: '0000000001', value: '1' },
+  { label: '0000000002', value: '2' },
+]);
+const branchOptions = ref([
+  { label: '0000000001-1', value: '1' },
+  { label: '0000000001-2', value: '2' },
+]);
+
+const formData = ref({
+  hqId: '',
+  branchId: '',
+  tel: '',
+  gender: '',
+  email: '',
+  addressL: {
+    address: '',
+    province: '',
+    district: '',
+    subDistrict: '',
+    zip: '',
+  },
+  addressEng: {
+    address: '',
+    province: '',
+    district: '',
+    subDistrict: '',
+    zip: '',
+  },
+});
+
 const selectorList = [
   { label: 'personnelSelector1', count: 0 },
   { label: 'personnelSelector2', count: 0 },
   { label: 'personnelSelector3', count: 0 },
   { label: 'personnelSelector4', count: 0 },
 ] satisfies InstanceType<typeof SelectorList>['$props']['list'];
+
+function openDialog() {
+  modal.value = true;
+}
 </script>
 
 <template>
@@ -48,9 +94,19 @@ const selectorList = [
 
       <!-- stat -->
       <AppBox bordered class="column full-width">
-        <span class="q-pb-lg text-weight-bold text-subtitle1">
-          {{ $t('personnelStatTitle') + $t(selectorLabel) }}
-        </span>
+        <div class="row q-pb-lg justify-between items-center">
+          <div class="text-weight-bold text-subtitle1">
+            {{ $t('personnelStatTitle') + $t(selectorLabel) }}
+          </div>
+          <q-btn
+            dense
+            unelevated
+            label="+ เพิ่มบุคลากร"
+            padding="4px 16px"
+            @click="openDialog"
+            style="background-color: var(--cyan-6); color: white"
+          />
+        </div>
         <div class="row col full-width" style="overflow-x: auto">
           <StatCardComponent :branch="branchStat" class="no-wrap" />
         </div>
@@ -93,10 +149,98 @@ const selectorList = [
           <BtnAddComponent
             :label="'personnelAdd'"
             :cyanOn="true"
-            @trigger="() => console.log('test')"
+            @trigger="openDialog"
           />
         </div>
       </div>
     </AppBox>
   </div>
+
+  <FormDialog
+    v-model:modal="modal"
+    v-model:addressL="formData.addressL"
+    v-model:addressEng="formData.addressEng"
+    title="เพิ่มบุคลากร"
+    addressLocaleTitle="ที่อยู่พนักงาน"
+    addressEngTitle="ที่อยู่พนักงาน ENG"
+  >
+    <template #top>
+      <q-select
+        dense
+        outlined
+        emit-value
+        map-options
+        v-model="hqId"
+        class="col-6"
+        option-value="value"
+        option-label="label"
+        label="รหัสสำนักงานใหญ่"
+        :options="hqOptions"
+        bg-color="white"
+      />
+      <q-select
+        dense
+        outlined
+        emit-value
+        map-options
+        v-model="branchId"
+        class="col-6"
+        option-value="value"
+        option-label="label"
+        label="รหัสสาขา"
+        :options="branchOptions"
+        bg-color="white"
+      />
+    </template>
+
+    <template #prepend>
+      <div>asd</div>
+    </template>
+
+    <template #midTop>
+      <!-- <q-input dense outlined label="รหัสไปรษณีย์" class="col-3" />
+      <q-input dense outlined label="รหัสไปรษณีย์" class="col-3" />
+      <q-input dense outlined label="รหัสไปรษณีย์" class="col-3" />
+      <q-input dense outlined label="รหัสไปรษณีย์" class="col-3" /> -->
+    </template>
+
+    <template #midBottom>
+      <q-input
+        dense
+        outlined
+        label="เบอร์โทร"
+        class="col-3"
+        v-model="formData.tel"
+      />
+      <q-select
+        dense
+        outlined
+        emit-value
+        map-options
+        v-model="formData.gender"
+        class="col-3"
+        option-value="value"
+        option-label="label"
+        label="เพศ"
+        :options="genderOptions"
+        bg-color="white"
+      />
+      <q-input
+        dense
+        outlined
+        label="อีเมล"
+        class="col-6"
+        v-model="formData.email"
+      />
+    </template>
+
+    <!-- <template #append>
+      <div style="background-color: blue">asd</div>
+    </template> -->
+  </FormDialog>
 </template>
+<style>
+.bg-white {
+  background-color: var(--surface-1) !important;
+}
+</style>