diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
index 3e136d8d4..761a2305c 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
@@ -1,6 +1,605 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useProfileDataStore } from "@/modules/04_registry/store";
+
+import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
+import type {
+  Information,
+  DataOption,
+} from "@/modules/04_registry/components/profileType";
+
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const profileStore = useProfileDataStore();
+const { showLoader, hideLoader, date2Thai, messageError } = mixin;
+
+const modal = ref<boolean>(false);
+const myForm = ref<any>();
+
+const Ops = ref<InformationOps>({
+  prefixOps: [],
+  prefixOldOps: [],
+  genderOps: [],
+  bloodOps: [],
+  statusOps: [],
+  religionOps: [],
+  employeeClassOps: [
+    { id: "perm", name: "ลูกจ้างประจำ" },
+    { id: "temp", name: "ลูกจ้างชั่วคราว" },
+  ],
+  employeeTypeOps: [
+    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
+    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+  ],
+});
+
+const OpsFilter = ref<InformationOps>({
+  prefixOps: [],
+  prefixOldOps: [],
+  genderOps: [],
+  bloodOps: [],
+  statusOps: [],
+  religionOps: [],
+  employeeClassOps: [
+    { id: "perm", name: "ลูกจ้างประจำ" },
+    { id: "temp", name: "ลูกจ้างชั่วคราว" },
+  ],
+  employeeTypeOps: [
+    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
+    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+  ],
+});
+
+// mock data
+const resultData = ref({
+  citizenId: "3101502080439",
+  prefixId: "71ed89df-8257-43e8-8fba-0b42fb2c55e0",
+  prefix: "นางสาว",
+  firstName: "อรัญญาสาร",
+  lastName: "พรไชยะสิทธฺ์",
+  birthDate: new Date("1968-11-24T00:00:00"),
+  age: "55 ปี 3 เดือน 16 วัน",
+  genderId: "e2693577-6633-499b-9f0a-fec0bff0be6b",
+  gender: "หญิง",
+  relationshipId: null,
+  bloodGroupId: null,
+  nationality: "ไทย",
+  race: "ไทย",
+  religionId: "ceaec498-71b4-4f82-b5a2-7d6ec988b753",
+  telephoneNumber: null,
+  profileType: "officer",
+  employeeType: null,
+  employeeClass: null,
+  changeName: true,
+  isVerified: true,
+  isSendVerified: false,
+});
+
+const dataLabel = {
+  citizenId: "เลขบัตรประจำตัวประชาชน",
+  name: "ชื่อ - สกุล",
+  birthDate: "วัน/เดือน/ปีเกิด",
+  age: "อายุ",
+  gender: "เพศ",
+  relationship: "สถานภาพ",
+  nationality: "สัญชาติ",
+  race: "เชื้อชาติ",
+  religion: "ศาสนา",
+  bloodGroup: "หมู่เลือด",
+  telephoneNumber: "เบอร์โทร",
+
+  prefix: "คำนำหน้าชื่อ",
+  firstName: "ชื่อ",
+  lastName: "นามสกุล",
+};
+
+// get person detail list
+const fetchPerson = async () => {
+  // showLoader();
+  await http
+    .get(config.API.person)
+    .then((res) => {
+      const data = res.data.result;
+      let optionbloodGroups: DataOption[] = [];
+      data.bloodGroups.map((r: any) => {
+        optionbloodGroups.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.bloodOps = optionbloodGroups;
+      OpsFilter.value.bloodOps = optionbloodGroups;
+
+      let optiongenders: DataOption[] = [];
+      data.genders.map((r: any) => {
+        optiongenders.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.genderOps = optiongenders;
+      OpsFilter.value.genderOps = optiongenders;
+
+      let optionprefixs: DataOption[] = [];
+      data.prefixs.map((r: any) => {
+        optionprefixs.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.prefixOps = optionprefixs;
+      OpsFilter.value.prefixOps = optionprefixs;
+
+      let optionrelationships: DataOption[] = [];
+      data.relationships.map((r: any) => {
+        optionrelationships.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.statusOps = optionrelationships;
+      OpsFilter.value.statusOps = optionrelationships;
+
+      let optionreligions: DataOption[] = [];
+      data.religions.map((r: any) => {
+        optionreligions.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.religionOps = optionreligions;
+      OpsFilter.value.religionOps = optionreligions;
+    })
+    .catch((e: any) => {})
+    .finally(() => {
+      // hideLoader();
+      profileStore.isLoad++;
+    });
+};
+
+const filterSelector = (val: any, update: Function, refData: string) => {
+  switch (refData) {
+    case "prefixOps":
+      update(() => {
+        Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "genderOps":
+      update(() => {
+        Ops.value.genderOps = OpsFilter.value.genderOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "bloodOps":
+      update(() => {
+        Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "statusOps":
+      update(() => {
+        Ops.value.statusOps = OpsFilter.value.statusOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "religionOps":
+      update(() => {
+        Ops.value.religionOps = OpsFilter.value.religionOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeeClassOps":
+      update(() => {
+        Ops.value.employeeClassOps = OpsFilter.value.employeeClassOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeeTypeOps":
+      update(() => {
+        Ops.value.employeeTypeOps = OpsFilter.value.employeeTypeOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+
+function onSubmit() {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      // await saveData();
+      console.log("Hello");
+      modal.value = false;
+    }
+  });
+}
+
+onMounted(async () => {
+  await fetchPerson();
+});
+</script>
 <template>
-  <div>1</div>
+  <div class="row q-pt-sm q-pb-lg justyfy-between items-center">
+    <span class="col text-subtitle1 text-weight-bold text-dark">
+      ประวัติส่วนตัว
+    </span>
+    <div class="col text-right">
+      <q-btn
+        flat
+        round
+        icon="mdi-pencil-outline"
+        color="primary"
+        @click="modal = true"
+      >
+        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn flat round icon="mdi-history" color="info">
+        <q-tooltip>ประวัติข้อมูลส่วนตัว</q-tooltip>
+      </q-btn>
+    </div>
+  </div>
+
+  <q-card bordered class="my-card bg-grey-1 q-pa-md">
+    <div :class="$q.screen.gt.xs ? 'row' : 'column'">
+      <div class="col-md-7 col-12 row">
+        <!-- column 1 -->
+        <div class="col-md-4 col-5 text-grey-6 text-weight-medium">
+          <div
+            v-for="label in Object.keys(dataLabel).slice(0, 6)"
+            class="q-py-xs"
+          >
+            {{ dataLabel[label as keyof typeof dataLabel] }}
+          </div>
+        </div>
+        <!-- data -->
+        <div class="col-md-8 col-7">
+          <div class="q-py-xs">
+            {{ resultData.citizenId }}
+          </div>
+          <div class="q-py-xs">
+            {{
+              `${resultData.prefix} ${resultData.firstName} ${resultData.lastName}`
+            }}
+          </div>
+          <div class="q-py-xs">
+            {{ date2Thai(resultData.birthDate) }}
+          </div>
+          <div class="q-py-xs">
+            {{ resultData.age ? resultData.age : "-" }}
+          </div>
+          <div class="q-py-xs">
+            {{ resultData.gender ? resultData.gender : "-" }}
+          </div>
+          <div class="q-py-xs">
+            {{
+              resultData.relationshipId
+                ? (
+                    Ops.statusOps.find(
+                      (r) => r.id === resultData.relationshipId
+                    ) || {}
+                  ).name
+                : "-"
+            }}
+          </div>
+        </div>
+      </div>
+      <!-- column 2 -->
+      <div class="col-md-5 col-12 row">
+        <div class="col-md-4 col-5 col text-grey-6 text-weight-medium">
+          <div
+            v-for="label in Object.keys(dataLabel).slice(6, 11)"
+            class="q-py-xs"
+          >
+            {{ dataLabel[label as keyof typeof dataLabel] }}
+          </div>
+        </div>
+        <!-- data -->
+        <div class="col-md-8 col-7">
+          <div class="q-py-xs">
+            {{ resultData.nationality ? resultData.nationality : "-" }}
+          </div>
+          <div class="q-py-xs">
+            {{ resultData.race ? resultData.race : "-" }}
+          </div>
+          <div class="q-py-xs">
+            {{
+              resultData.religionId
+                ? (
+                    Ops.religionOps.find(
+                      (r) => r.id === resultData.religionId
+                    ) || {}
+                  ).name
+                : "-"
+            }}
+          </div>
+          <div class="q-py-xs">
+            {{
+              resultData.bloodGroupId
+                ? (
+                    Ops.bloodOps.find(
+                      (b) => b.id === resultData.bloodGroupId
+                    ) || {}
+                  ).name
+                : "-"
+            }}
+          </div>
+          <div class="q-py-xs">
+            {{ resultData.telephoneNumber ? resultData.telephoneNumber : "-" }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <!-- Edit Dialog -->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm" @submit="onSubmit">
+        <DialogHeader tittle="แก้ไขประวัติส่วนตัว" :close="() => modal = false" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                maxlength="13"
+                mask="#############"
+                v-model="resultData.citizenId"
+                :label="dataLabel.citizenId"
+                :rules="[
+                (val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
+                (val: string) =>
+                  val.length >= 13 ||
+                  `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
+              ]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                dense
+                outlined
+                use-input
+                lazy-rules
+                emit-value
+                map-options
+                hide-bottom-space
+                option-value="id"
+                option-label="name"
+                input-debounce="0"
+                v-model="resultData.prefixId"
+                :options="Ops.prefixOps"
+                :label="dataLabel.prefix"
+                :rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
+                @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps'
+              )"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="resultData.firstName"
+                :label="dataLabel.firstName"
+                :rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="resultData.lastName"
+                :label="dataLabel.lastName"
+                :rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                autoApply
+                borderless
+                week-start="0"
+                menu-class-name="modalfix"
+                v-model="resultData.birthDate"
+                :locale="'th'"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    for="inputDatereceive"
+                    ref="dateReceivedRef"
+                    outlined
+                    dense
+                    hide-bottom-space
+                    :model-value="
+                      resultData.birthDate != null
+                        ? date2Thai(resultData.birthDate)
+                        : null
+                    "
+                    :label="dataLabel.birthDate"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`,
+                    ]"
+                  >
+                    <template v-slot:append>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                readonly
+                v-model="resultData.age"
+                :label="dataLabel.age"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                dense
+                outlined
+                use-input
+                lazy-rules
+                emit-value
+                map-options
+                hide-bottom-space
+                option-value="id"
+                option-label="name"
+                input-debounce="0"
+                v-model="resultData.genderId"
+                :options="Ops.genderOps"
+                :label="dataLabel.gender"
+                @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
+              )"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                dense
+                outlined
+                use-input
+                lazy-rules
+                emit-value
+                map-options
+                hide-bottom-space
+                option-value="id"
+                option-label="name"
+                input-debounce="0"
+                v-model="resultData.relationshipId"
+                :options="Ops.statusOps"
+                :label="dataLabel.relationship"
+                @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'statusOps'
+              )"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="resultData.nationality"
+                :label="dataLabel.nationality"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="resultData.race"
+                :label="dataLabel.race"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                dense
+                outlined
+                use-input
+                lazy-rules
+                emit-value
+                map-options
+                hide-bottom-space
+                option-value="id"
+                option-label="name"
+                input-debounce="0"
+                v-model="resultData.religionId"
+                :options="Ops.religionOps"
+                :label="dataLabel.religion"
+                @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
+              )"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                dense
+                outlined
+                use-input
+                lazy-rules
+                emit-value
+                map-options
+                hide-bottom-space
+                option-value="id"
+                option-label="name"
+                input-debounce="0"
+                v-model="resultData.bloodGroupId"
+                :options="Ops.bloodOps"
+                :label="dataLabel.bloodGroup"
+                @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'bloodOps'
+              )"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                mask="##########"
+                v-model="resultData.telephoneNumber"
+                :label="dataLabel.telephoneNumber"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <div class="text-right q-pa-sm">
+          <q-btn
+            flat
+            round
+            type="submit"
+            icon="mdi-pencil-outline"
+            color="primary"
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn>
+        </div>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped></style>