diff --git a/src/api/registry/api.registry.ts b/src/api/registry/api.registry.ts
index 8647a7385..b3c917ffd 100644
--- a/src/api/registry/api.registry.ts
+++ b/src/api/registry/api.registry.ts
@@ -1,11 +1,26 @@
 import env from "../index";
 
 const registryNew = `${env.API_URI}/org/profile/`;
+const metadata = `${env.API_URI}/org/metadata/`;
 
 export default {
   registryNew,
   registryNewByProfileId: (profileId: string) => `${registryNew}${profileId}`,
 
+  // metadata
+  profileNewGender: `${metadata}gender`,
+  profileNewReligion: `${metadata}religion`,
+  profileNewRelationship: `${metadata}relationship`,
+  profileNewBloodGroup: `${metadata}bloodGroup`,
+
+  // ประวัติส่วนตัว
+  profileNewProfileByProfileId: (profileId: string) =>
+  `${registryNew}${profileId}`,
+  profileNewProfileById: (dataId: string) =>
+  `${registryNew}${dataId}`,
+  profileNewProfileHisById: (dataId: string) =>
+  `${registryNew}history/${dataId}`,
+
   // บันทึกวันที่ไม่ได้รับเงินเดือนฯ
   profileNewNoPaid: `${registryNew}nopaid`,
   profileNewNoPaidByProfileId: (profileId: string) =>
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 18a575e3d..659d5180a 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { onMounted, watch, ref } from "vue";
+import { onMounted, watch, ref, reactive } from "vue";
+import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 import type { QTableColumn, QForm } from "quasar";
 import http from "@/plugins/http";
@@ -9,18 +10,16 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useProfileDataStore } from "@/modules/04_registryNew/stores/profile";
 import HistoryTable from "@/components/TableHistory.vue";
 import DialogHeader from "@/components/DialogHeader.vue";
-import type {
-  InformationOps,
-  Information,
-  DataOption,
-} from "@/modules/04_registryNew/interface/index/Main";
-import { defaultInformation } from "@/modules/04_registryNew/interface/index/Main";
+import type { RequestObject } from "@/modules/04_registryNew/interface/request/Profile";
+import type { ResponseObject } from "@/modules/04_registryNew/interface/response/Profile";
 import type { RequestItemsHistoryObject } from "@/modules/04_registryNew/interface/request/Information";
 
 const $q = useQuasar();
+const route = useRoute();
 const mixin = useCounterMixin();
-const profileStore = useProfileDataStore();
+const store = useProfileDataStore();
 const {
+  success,
   showLoader,
   hideLoader,
   date2Thai,
@@ -28,73 +27,45 @@ const {
   convertDate,
   dateToISO,
 } = mixin;
-const { changeRetireText, changeBirth } = profileStore;
+const { calculateAge, getGender, getRelationship, getReligion, getBloodGroup } =
+  store;
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
 
-const informaData = ref<Information>(defaultInformation);
 const modal = ref<boolean>(false);
 const myForm = ref<any>();
+const informaData = ref<ResponseObject>();
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]);
 const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลส่วนตัว");
 const filterHistory = ref<string>("");
 const modalHistory = ref<boolean>(false);
 
-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",
+const id = ref<string>("");
+const age = ref<string>("");
+// หลังบ้านไม่มีข้อมูล สัญชาติ
+const nationality = ref<string>("")
+const formData = reactive<RequestObject>({
+  citizenId: "",
+  prefix: "",
+  firstName: "",
+  lastName: "",
+  birthDate: null,
+  genderId: "",
+  relationshipId: "",
+  // nationality: "",
+  ethnicity: "",
+  religionId: "",
+  bloodGroupId: "",
+  phone: "",
+  posTypeId: "",
+  posLevelId: "",
   telephoneNumber: null,
-  profileType: "officer",
-  employeeType: null,
-  employeeClass: null,
-  changeName: true,
-  isVerified: true,
-  isSendVerified: false,
+  dateRetire: null,
+  isProbation: false,
+  keycloak: "",
+  email: null,
+  position: "",
 });
 
 const dataLabel = {
@@ -105,10 +76,10 @@ const dataLabel = {
   gender: "เพศ",
   relationship: "สถานภาพ",
   nationality: "สัญชาติ",
-  race: "เชื้อชาติ",
+  ethnicity: "เชื้อชาติ",
   religion: "ศาสนา",
   bloodGroup: "หมู่เลือด",
-  telephoneNumber: "เบอร์โทร",
+  phone: "เบอร์โทร",
 
   prefix: "คำนำหน้าชื่อ",
   firstName: "ชื่อ",
@@ -238,11 +209,11 @@ const columnsHistory = ref<QTableColumn[]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "telephoneNumber",
+    name: "phone",
     align: "left",
     label: "เบอร์โทร",
     sortable: true,
-    field: "telephoneNumber",
+    field: "phone",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -306,253 +277,89 @@ const visibleColumnsHistory = ref<String[]>([
   "nationality",
   "race",
   "religion",
-  "telephoneNumber",
+  "phone",
   "employeeType",
   "employeeClass",
   "createdFullName",
   "createdAt",
 ]);
 
-async function fetchData() {
-  informaData.value.cardid = resultData.value.citizenId;
-  informaData.value.prefixId = resultData.value.prefixId;
-  informaData.value.prefix = resultData.value.prefix;
-  informaData.value.firstname = resultData.value.firstName;
-  informaData.value.lastname = resultData.value.lastName;
-  informaData.value.birthDate = resultData.value.birthDate;
-  informaData.value.age = resultData.value.age;
-  informaData.value.genderId = resultData.value.genderId;
-  informaData.value.bloodId = resultData.value.bloodGroupId;
-  informaData.value.nationality = resultData.value.nationality;
-  informaData.value.ethnicity = resultData.value.race;
-  informaData.value.statusId = resultData.value.relationshipId;
-  informaData.value.religionId = resultData.value.religionId;
-  informaData.value.tel = resultData.value.telephoneNumber;
-  informaData.value.employeeType = resultData.value.employeeType;
-  informaData.value.employeeClass = resultData.value.employeeClass;
-  informaData.value.profileType = resultData.value.profileType;
-}
-
-// get person detail list
-async function fetchPerson() {
-  // showLoader();
+async function getData() {
+  showLoader();
   await http
-    .get(config.API.person)
+    .get(config.API.profileNewProfileByProfileId(profileId.value))
     .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;
+      informaData.value = res.data.result;
+      if (informaData.value) {
+        age.value = calculateAge(informaData.value.birthDate);
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
     })
-    .catch((e: any) => {})
     .finally(() => {
-      // hideLoader();
+      hideLoader();
     });
 }
 
-function 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;
+function onClickOpenDialog() {
+  if (!informaData.value) return;
+  modal.value = true;
 
-    default:
-      break;
-  }
+  id.value = informaData.value.id;
+  age.value = calculateAge(informaData.value.birthDate);
+  formData.citizenId = informaData.value.citizenId;
+  formData.prefix = informaData.value.prefix;
+  formData.firstName = informaData.value.firstName;
+  formData.lastName = informaData.value.lastName;
+  formData.birthDate = informaData.value.birthDate;
+  formData.genderId = informaData.value.genderId;
+  formData.relationshipId = informaData.value.relationshipId;
+  // formData.nationality = informaData.value.nationality;
+  formData.ethnicity = informaData.value.ethnicity;
+  formData.religionId = informaData.value.religionId;
+  formData.bloodGroupId = informaData.value.bloodGroupId;
+  formData.phone = informaData.value.phone;
 }
 
-async function clickHistory() {
-  modalHistory.value = true;
-  // showLoader();
-  // await http
-  //   .get(config.API.profileInforHisId(route.params.id.toString()))
-  //   .then((res) => {
-  //     let data = res.data.result;
-  //     rowsHistory.value = [];
-  //     data.map((e: RequestItemsHistoryObject) => {
-  //       rowsHistory.value.push({
-  //         citizenId: e.citizenId,
-  //         prefix: e.prefix,
-  //         firstName: e.firstName,
-  //         lastName: e.lastName,
-  //         birthDate: new Date(e.birthDate),
-  //         gender: e.gender,
-  //         relationship: e.relationship,
-  //         bloodGroup: e.bloodGroup,
-  //         nationality: e.nationality,
-  //         race: e.race,
-  //         religion: e.religion,
-  //         telephoneNumber: e.telephoneNumber,
-  //         employeeType:
-  //           e.employeeType == "gov"
-  //             ? "งบประมาณเงินอุดหนุนรัฐบาล"
-  //             : e.employeeType == "bkk"
-  //             ? "งบประมาณกรุงเทพมหานคร"
-  //             : "-",
-  //         employeeClass:
-  //           e.employeeClass == "perm"
-  //             ? "ลูกจ้างประจำ"
-  //             : e.employeeClass == "temp"
-  //             ? "ลูกจ้างชั่วคราว"
-  //             : "-",
-  //         createdFullName: e.createdFullName,
-  //         createdAt: new Date(e.createdAt),
-  //       });
-  //     });
-  //   })
-  //   .catch((e) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(() => {
-  //     hideLoader();
-  //   });
-}
-
-async function calRetire(birth: Date) {
-  const body = {
-    birthDate: dateToISO(birth),
-  };
-  const dateBefore = ref<Date>(new Date());
-  if (dateToISO(dateBefore.value) != dateToISO(birth)) {
-    showLoader();
-    await http
-      .post(config.API.profileCalRetire, body)
-      .then((res: any) => {
-        const data = res.data.result;
-        informaData.value.age = data.age;
-        informaData.value.birthDate = birth;
-        changeRetireText(data.retireDate);
-        dateBefore.value = birth;
-      })
-      .catch((e: any) => {
-        messageError($q, e);
-        const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
-        informaData.value.birthDate = dateBefore.value;
-        // inputBirthDate.value = dateBefore.value;
-        changeRetireText(date2Thai(retire));
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  }
-}
-
-function onSubmit() {
-  myForm.value.validate().then(async (result: boolean) => {
-    if (result) {
-      // await saveData();
-      modal.value = false;
-    }
-  });
+async function editData() {
+  showLoader();
+  await http
+    .put(config.API.profileNewProfileById(id.value), {
+      ...formData,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      getData(), (modal.value = false);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 watch(
-  () => informaData.value.birthDate,
-  (value) => {
-    // const dateVal = convertDate(value);
-    if (value) {
-      calRetire(value);
-    } else {
-      informaData.value.age = "";
+  () => formData.birthDate,
+  (v) => {
+    if (v) {
+      age.value = calculateAge(v);
     }
   }
 );
 
+function onSubmit() {
+  editData();
+  modal.value = false;
+}
+
 onMounted(async () => {
-  await fetchPerson();
-  await fetchData();
+  await getData();
+  store.genderOp.length === 0 ? await getGender() : "";
+  store.relationshipOp.length === 0 ? await getRelationship() : "";
+  store.religionOp.length === 0 ? await getReligion() : "";
+  store.bloodGroupOp.length === 0 ? await getBloodGroup() : "";
 });
 </script>
 <template>
@@ -563,18 +370,18 @@ onMounted(async () => {
         round
         icon="mdi-pencil-outline"
         color="primary"
-        @click="modal = true"
+        @click="onClickOpenDialog"
       >
         <q-tooltip>แก้ไขข้อมูล</q-tooltip>
       </q-btn>
-      <q-btn flat round icon="mdi-history" color="info" @click="clickHistory">
+      <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 v-if="informaData" :class="$q.screen.gt.xs ? 'row' : 'column'">
       <!-- column 1 -->
       <div class="col-md-7 col-12 row">
         <div class="col-md-4 col-5 text-grey-6 text-weight-medium">
@@ -588,38 +395,24 @@ onMounted(async () => {
         <!-- data -->
         <div class="col-md-8 col-7">
           <div class="q-py-xs">
-            {{ informaData.cardid }}
+            {{ informaData.citizenId }}
           </div>
           <div class="q-py-xs">
             {{
-              `${informaData.prefix} ${informaData.firstname} ${informaData.lastname}`
+              `${informaData.prefix} ${informaData.firstName} ${informaData.lastName}`
             }}
           </div>
           <div class="q-py-xs">
             {{ date2Thai(informaData.birthDate) }}
           </div>
           <div class="q-py-xs">
-            {{ informaData.age ? informaData.age : "-" }}
+            {{ age ? age : "-" }}
           </div>
           <div class="q-py-xs">
-            {{
-              informaData.genderId
-                ? (
-                    Ops.genderOps.find((r) => r.id === informaData.genderId) ||
-                    {}
-                  ).name
-                : "-"
-            }}
+            {{ informaData.gender ? informaData.gender.name : "-" }}
           </div>
           <div class="q-py-xs">
-            {{
-              informaData.statusId
-                ? (
-                    Ops.statusOps.find((r) => r.id === informaData.statusId) ||
-                    {}
-                  ).name
-                : "-"
-            }}
+            {{ informaData.relationship ? informaData.relationship.name : "-" }}
           </div>
         </div>
       </div>
@@ -643,26 +436,13 @@ onMounted(async () => {
             {{ informaData.ethnicity ? informaData.ethnicity : "-" }}
           </div>
           <div class="q-py-xs">
-            {{
-              informaData.religionId
-                ? (
-                    Ops.religionOps.find(
-                      (r) => r.id === informaData.religionId
-                    ) || {}
-                  ).name
-                : "-"
-            }}
+            {{ informaData.religion ? informaData.religion.name : "-" }}
           </div>
           <div class="q-py-xs">
-            {{
-              informaData.bloodId
-                ? (Ops.bloodOps.find((b) => b.id === informaData.bloodId) || {})
-                    .name
-                : "-"
-            }}
+            {{ informaData.bloodGroup ? informaData.bloodGroup.name : "-" }}
           </div>
           <div class="q-py-xs">
-            {{ informaData.tel ? informaData.tel : "-" }}
+            {{ informaData.phone ? informaData.phone : "-" }}
           </div>
         </div>
       </div>
@@ -672,7 +452,7 @@ onMounted(async () => {
   <!-- Edit Dialog -->
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 600px">
-      <q-form ref="myForm" @submit="onSubmit">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader
           tittle="แก้ไขประวัติส่วนตัว"
           :close="() => (modal = false)"
@@ -688,7 +468,8 @@ onMounted(async () => {
                 hide-bottom-space
                 maxlength="13"
                 mask="#############"
-                v-model="informaData.cardid"
+                v-model="formData.citizenId"
+                class="inputgreen"
                 :label="dataLabel.citizenId"
                 :rules="[
                 (val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
@@ -702,20 +483,17 @@ onMounted(async () => {
               <q-select
                 dense
                 outlined
+                use-input
                 lazy-rules
                 emit-value
                 map-options
                 hide-bottom-space
-                option-value="id"
-                option-label="name"
                 input-debounce="0"
-                v-model="informaData.prefixId"
-                :options="Ops.prefixOps"
+                v-model="formData.prefix"
+                class="inputgreen"
+                :options="store.prefixOp"
                 :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">
@@ -724,7 +502,8 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                v-model="informaData.firstname"
+                v-model="formData.firstName"
+                class="inputgreen"
                 :label="dataLabel.firstName"
                 :rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
               />
@@ -735,7 +514,8 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                v-model="informaData.lastname"
+                v-model="formData.lastName"
+                class="inputgreen"
                 :label="dataLabel.lastName"
                 :rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
               />
@@ -746,7 +526,7 @@ onMounted(async () => {
                 borderless
                 week-start="0"
                 menu-class-name="modalfix"
-                v-model="informaData.birthDate"
+                v-model="formData.birthDate"
                 :locale="'th'"
               >
                 <template #year="{ year }">
@@ -762,9 +542,10 @@ onMounted(async () => {
                     outlined
                     dense
                     hide-bottom-space
+                    class="inputgreen"
                     :model-value="
-                      informaData.birthDate != null
-                        ? date2Thai(informaData.birthDate)
+                      formData.birthDate != null
+                        ? date2Thai(formData.birthDate)
                         : null
                     "
                     :label="dataLabel.birthDate"
@@ -791,7 +572,8 @@ onMounted(async () => {
                 lazy-rules
                 hide-bottom-space
                 readonly
-                v-model="informaData.age"
+                class="inputgreen"
+                v-model="age"
                 :label="dataLabel.age"
               />
             </div>
@@ -804,15 +586,13 @@ onMounted(async () => {
                 emit-value
                 map-options
                 hide-bottom-space
-                option-value="id"
-                option-label="name"
                 input-debounce="0"
-                v-model="informaData.genderId"
-                :options="Ops.genderOps"
+                option-label="name"
+                option-value="id"
+                v-model="formData.genderId"
+                class="inputgreen"
+                :options="store.genderOp"
                 :label="dataLabel.gender"
-                @filter="(inputValue: any,
-              doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
-              )"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
@@ -827,12 +607,10 @@ onMounted(async () => {
                 option-value="id"
                 option-label="name"
                 input-debounce="0"
-                v-model="informaData.statusId"
-                :options="Ops.statusOps"
+                class="inputgreen"
+                v-model="formData.relationshipId"
+                :options="store.relationshipOp"
                 :label="dataLabel.relationship"
-                @filter="(inputValue: any,
-              doneFn: Function) => filterSelector(inputValue, doneFn, 'statusOps'
-              )"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
@@ -841,7 +619,8 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                v-model="informaData.nationality"
+                class="inputgreen"
+                v-model="nationality"
                 :label="dataLabel.nationality"
               />
             </div>
@@ -851,8 +630,9 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                v-model="informaData.ethnicity"
-                :label="dataLabel.race"
+                class="inputgreen"
+                v-model="formData.ethnicity"
+                :label="dataLabel.ethnicity"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
@@ -867,12 +647,10 @@ onMounted(async () => {
                 option-value="id"
                 option-label="name"
                 input-debounce="0"
-                v-model="informaData.religionId"
-                :options="Ops.religionOps"
+                v-model="formData.religionId"
+                class="inputgreen"
+                :options="store.religionOp"
                 :label="dataLabel.religion"
-                @filter="(inputValue: any,
-              doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
-              )"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
@@ -887,12 +665,10 @@ onMounted(async () => {
                 option-value="id"
                 option-label="name"
                 input-debounce="0"
-                v-model="informaData.bloodId"
-                :options="Ops.bloodOps"
+                v-model="formData.bloodGroupId"
+                class="inputgreen"
+                :options="store.bloodGroupOp"
                 :label="dataLabel.bloodGroup"
-                @filter="(inputValue: any,
-              doneFn: Function) => filterSelector(inputValue, doneFn, 'bloodOps'
-              )"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
@@ -902,8 +678,9 @@ onMounted(async () => {
                 lazy-rules
                 hide-bottom-space
                 mask="##########"
-                v-model="informaData.tel"
-                :label="dataLabel.telephoneNumber"
+                class="inputgreen"
+                v-model="formData.phone"
+                :label="dataLabel.phone"
               />
             </div>
           </div>
diff --git a/src/modules/04_registryNew/interface/request/Profile.ts b/src/modules/04_registryNew/interface/request/Profile.ts
new file mode 100644
index 000000000..fa15a0cdb
--- /dev/null
+++ b/src/modules/04_registryNew/interface/request/Profile.ts
@@ -0,0 +1,24 @@
+interface RequestObject {
+  bloodGroupId: string | null;
+  relationshipId: string | null;
+  genderId: string | null;
+  posTypeId: string;
+  posLevelId: string;
+  religionId: string | null;
+  citizenId: string;
+  telephoneNumber: string | null;
+  // nationality: string | null;
+  ethnicity: string | null;
+  birthDate: Date | null;
+  dateRetire: Date | null;
+  isProbation: boolean;
+  keycloak: string;
+  phone: string | null;
+  email: string | null;
+  position: string;
+  lastName: string;
+  firstName: string;
+  prefix: string;
+}
+
+export type { RequestObject };
diff --git a/src/modules/04_registryNew/interface/response/Profile.ts b/src/modules/04_registryNew/interface/response/Profile.ts
new file mode 100644
index 000000000..61efa58d8
--- /dev/null
+++ b/src/modules/04_registryNew/interface/response/Profile.ts
@@ -0,0 +1,108 @@
+interface ResponseObject {
+  id: string;
+  createdAt: Date;
+  createdUserId: string;
+  lastUpdatedAt: Date;
+  lastUpdateUserId: string;
+  createdFullName: string;
+  lastUpdateFullName: string;
+  prefix: string;
+  firstName: string;
+  lastName: string;
+  citizenId: string;
+  position: string;
+  posLevelId: string | null;
+  posTypeId: string | null;
+  email: string | null;
+  phone: string | null;
+  keycloak: string | null;
+  isProbation: boolean;
+  dateRetire: Date | null;
+  birthDate: Date;
+  ethnicity: string | null;
+  religionId: string | null;
+  religion: Religion | null;
+  telephoneNumber: null | null;
+  genderId: string | null;
+  gender: Gender | null;
+  relationshipId: string | null;
+  relationship: Relationship | null;
+  bloodGroupId: string | null;
+  bloodGroup: BloodGroup | null;
+  posLevel: PosLevel | null;
+  posType: PosType | null;
+
+  nationality?: string;
+}
+
+interface Religion {
+  id: string;
+  createdAt: Date;
+  lastUpdatedAt: Date;
+  createdFullName: string;
+  lastUpdateFullName: string;
+  name: string;
+}
+
+interface Gender {
+  id: string;
+  createdAt: Date;
+  lastUpdatedAt: Date;
+  createdFullName: string;
+  lastUpdateFullName: string;
+  name: string;
+}
+
+interface Relationship {
+  id: string;
+  createdAt: Date;
+  lastUpdatedAt: Date;
+  createdFullName: string;
+  lastUpdateFullName: string;
+  name: string;
+}
+
+interface BloodGroup {
+  id: string;
+  createdAt: Date;
+  lastUpdatedAt: Date;
+  createdFullName: string;
+  lastUpdateFullName: string;
+  name: string;
+}
+
+interface PosLevel {
+  id: string;
+  createdAt: Date;
+  createdUserId: string;
+  lastUpdatedAt: Date;
+  lastUpdateUserId: string;
+  createdFullName: string;
+  lastUpdateFullName: string;
+  posLevelName: string;
+  posLevelRank: number;
+  posLevelAuthority: null;
+  posTypeId: string;
+}
+
+interface PosType {
+  id: string;
+  createdAt: Date;
+  createdUserId: string;
+  lastUpdatedAt: Date;
+  lastUpdateUserId: string;
+  createdFullName: string;
+  lastUpdateFullName: string;
+  posTypeName: string;
+  posTypeRank: number;
+}
+
+export type {
+  ResponseObject,
+  Religion,
+  Gender,
+  Relationship,
+  BloodGroup,
+  PosLevel,
+  PosType,
+};
diff --git a/src/modules/04_registryNew/stores/profile.ts b/src/modules/04_registryNew/stores/profile.ts
index 4296aba60..00b7d21e7 100644
--- a/src/modules/04_registryNew/stores/profile.ts
+++ b/src/modules/04_registryNew/stores/profile.ts
@@ -1,92 +1,123 @@
-import { ref, computed } from "vue";
+import { ref } from "vue";
 import { defineStore } from "pinia";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type {
+  Gender,
+  Religion,
+  Relationship,
+  BloodGroup,
+} from "@/modules/04_registryNew/interface/response/Profile";
 
 export const useProfileDataStore = defineStore("profile", () => {
-  const isVerified = ref<boolean>(false);
-  const isEdit = ref<boolean>(false);
-  const emplployeeClass = ref<string | null>("");
-  interface profile {
-    main: { columns: String[] };
-    education: { columns: String[] };
-    oldName: { columns: String[] };
-    certicate: { columns: String[] };
-    train: { columns: String[] };
-    insignia: { columns: String[] };
-    coined: { columns: String[] };
-    assessment: { columns: String[] };
-    salary: { columns: String[] };
-    discipline: { columns: String[] };
-    leave: { columns: String[] };
-    talent: { columns: String[] };
-    work: { columns: String[] };
-    record: { columns: String[] };
-    other: { columns: String[] };
-    document: { columns: String[] };
+  const $q = useQuasar();
+  const mixin = useCounterMixin();
+  const {
+    showLoader,
+    hideLoader,
+    date2Thai,
+    messageError,
+    convertDate,
+    dateToISO,
+  } = mixin;
+
+  const genderOp = ref<Gender[]>([]);
+  const religionOp = ref<Religion[]>([]);
+  const relationshipOp = ref<Relationship[]>([]);
+  const bloodGroupOp = ref<BloodGroup[]>([]);
+  const prefixOp = ref<string[]>(["นาย", "นาง", "นางสาว"]);
+
+  function calculateAge(birthDate: Date): string {
+    const birthDateTimeStamp = new Date(birthDate).getTime();
+    const now = new Date();
+    const diff = now.getTime() - birthDateTimeStamp;
+
+    const ageDate = new Date(diff);
+    const years = ageDate.getUTCFullYear() - 1970;
+    const months = ageDate.getUTCMonth();
+    const days = ageDate.getUTCDate() - 1;
+
+    if (years > 60) {
+      return "อายุเกิน 60 ปี";
+    }
+
+    return `${years} ปี ${months} เดือน ${days} วัน`;
   }
 
-  const birthDate = ref<Date>(new Date());
-  const retireText = ref<string | null>(null);
-  const changeRetireText = (val: string | null) => {
-    retireText.value = val;
-  };
-  const changeBirth = (val: Date) => {
-    birthDate.value = val;
-  };
-  const profileData = ref<profile>({
-    main: { columns: [] },
-    education: { columns: [] },
-    oldName: { columns: [] },
-    certicate: { columns: [] },
-    train: { columns: [] },
-    insignia: { columns: [] },
-    coined: { columns: [] },
-    assessment: { columns: [] },
-    salary: { columns: [] },
-    discipline: { columns: [] },
-    leave: { columns: [] },
-    talent: { columns: [] },
-    work: { columns: [] },
-    record: { columns: [] },
-    other: { columns: [] },
-    document: { columns: [] },
-  });
-
-  const changeProfileColumns = (system: String, val: String[]) => {
-    if (system == "main") profileData.value.main.columns = val;
-    if (system == "education") profileData.value.education.columns = val;
-    if (system == "oldName") profileData.value.oldName.columns = val;
-    if (system == "certicate") profileData.value.certicate.columns = val;
-    if (system == "train") profileData.value.train.columns = val;
-    if (system == "insignia") profileData.value.insignia.columns = val;
-    if (system == "coined") profileData.value.coined.columns = val;
-    if (system == "assessment") profileData.value.assessment.columns = val;
-    if (system == "salary") profileData.value.salary.columns = val;
-    if (system == "discipline") profileData.value.discipline.columns = val;
-    if (system == "leave") profileData.value.leave.columns = val;
-    if (system == "talent") profileData.value.talent.columns = val;
-    if (system == "work") profileData.value.work.columns = val;
-    if (system == "record") profileData.value.record.columns = val;
-    if (system == "other") profileData.value.other.columns = val;
-    if (system == "document") profileData.value.document.columns = val;
-    localStorage.setItem("profile", JSON.stringify(profileData.value));
-  };
-
-  if (localStorage.getItem("profile") !== null) {
-    profileData.value = JSON.parse(localStorage.getItem("profile") || "{}");
+  async function getGender() {
+    showLoader();
+    await http
+      .get(config.API.profileNewGender)
+      .then((res) => {
+        genderOp.value = res.data.result;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
   }
 
-  const isLoad = ref<number>(0);
+  async function getRelationship() {
+    showLoader();
+    await http
+      .get(config.API.profileNewRelationship)
+      .then((res) => {
+        relationshipOp.value = res.data.result;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+
+  async function getReligion() {
+    showLoader();
+    await http
+      .get(config.API.profileNewReligion)
+      .then((res) => {
+        religionOp.value = res.data.result;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+
+  async function getBloodGroup() {
+    showLoader();
+    await http
+      .get(config.API.profileNewBloodGroup)
+      .then((res) => {
+        bloodGroupOp.value = res.data.result;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
 
   return {
-    isLoad,
-    isVerified,
-    isEdit,
-    profileData,
-    changeProfileColumns,
-    birthDate,
-    changeBirth,
-    retireText,
-    changeRetireText,
-    emplployeeClass,
+    prefixOp,
+    genderOp,
+    religionOp,
+    relationshipOp,
+    bloodGroupOp,
+
+    calculateAge,
+    getGender,
+    getRelationship,
+    getReligion,
+    getBloodGroup,
   };
 });