diff --git a/src/interface/Main.ts b/src/interface/Main.ts
new file mode 100644
index 0000000..d330ce4
--- /dev/null
+++ b/src/interface/Main.ts
@@ -0,0 +1,30 @@
+interface ProfileData {
+  rank?: string;
+  prefix: string;
+  firstName: string;
+  lastName: string;
+  position: string;
+  posExecutiveName?: string;
+  posTypeName: string;
+  posLevelName: string;
+  posNo: string;
+}
+
+interface InformationData {
+  rank?: string; //ยศ
+  citizenId: string; //เลขประจำตัวประชาชน
+  prefix: string;
+  firstName: string;
+  lastName: string;
+  birthDate: Date | null; //วันเกิด
+  gender: string; //เพศ
+  relationship: string; //สถานภาพ
+  nationality: string; //สัญชาติ
+  ethnicity: string; //เชื้อชาติ
+  religion: string; //ศาสนา
+  bloodGroup: string; //หมู่เลือด
+  phone: string; //เบอร์โทร
+  email: string;
+}
+
+export type { ProfileData, InformationData };
diff --git a/src/modules/10_registry/01_Information/01_Information.vue b/src/modules/10_registry/01_Information/01_Information.vue
index 76b3bad..00ad738 100644
--- a/src/modules/10_registry/01_Information/01_Information.vue
+++ b/src/modules/10_registry/01_Information/01_Information.vue
@@ -9,6 +9,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import type { InformationData } from "@/interface/Main";
 
 const link = ref<string>("");
 const $q = useQuasar();
@@ -31,12 +32,13 @@ const rowsHistory = ref<any[]>([]);
 const modalHistory = ref<boolean>(false);
 
 /** ตัวแปรข้อมูล */
-const formDataInformation = reactive<any>({
+const formDataInformation = reactive<InformationData>({
+  rank: "", //ยศ
   citizenId: "", //เลขประจำตัวประชาชน
   prefix: "",
   firstName: "",
   lastName: "",
-  birthDate: "", //วันเกิด
+  birthDate: null, //วันเกิด
   gender: "", //เพศ
   relationship: "", //สถานภาพ
   nationality: "", //สัญชาติ
@@ -247,6 +249,7 @@ async function getData() {
     .get(config.API.dataUserInformationByType(link.value))
     .then(async (res) => {
       const data = await res.data.result;
+      formDataInformation.rank = data.rank;
       formDataInformation.citizenId = data.citizenId;
       formDataInformation.prefix = data.prefix;
       formDataInformation.firstName = data.firstName;
@@ -395,7 +398,13 @@ onMounted(async () => {
             <div class="col-7">
               {{
                 formDataInformation.firstName
-                  ? `${formDataInformation.prefix}${formDataInformation.firstName} ${formDataInformation.lastName}`
+                  ? `${
+                      formDataInformation.rank
+                        ? formDataInformation.rank
+                        : formDataInformation.prefix
+                    }${formDataInformation.firstName} ${
+                      formDataInformation.lastName
+                    }`
                   : "-"
               }}
             </div>
diff --git a/src/modules/10_registry/views/main.vue b/src/modules/10_registry/views/main.vue
index dac383a..1ebb704 100644
--- a/src/modules/10_registry/views/main.vue
+++ b/src/modules/10_registry/views/main.vue
@@ -112,7 +112,6 @@ const clickBack = () => {
 function redirectToPagePetition() {
   router.push(`/registry/request-edit`);
 }
-
 </script>
 
 <template>
@@ -154,7 +153,13 @@ function redirectToPagePetition() {
               <div class="column text-center q-mt-md q-mb-sm">
                 <span class="text-teal text-weight-medium">{{
                   dataStore.formData.firstName
-                    ? `${dataStore.formData.prefix}${dataStore.formData.firstName} ${dataStore.formData.lastName}`
+                    ? `${
+                        dataStore.formData.rank
+                          ? dataStore.formData.rank
+                          : dataStore.formData.prefix
+                      }${dataStore.formData.firstName} ${
+                        dataStore.formData.lastName
+                      }`
                     : "-"
                 }}</span>
                 <span class="text-grey text-weight-medium">{{
@@ -165,7 +170,9 @@ function redirectToPagePetition() {
                     : "ลูกจ้างชั่วคราว"
                 }}</span>
                 <span class="text-grey text-weight-medium">{{
-                  dataStore.formData.position ? `${dataStore.formData.position}` : "-"
+                  dataStore.formData.position
+                    ? `${dataStore.formData.position}`
+                    : "-"
                 }}</span>
 
                 <div class="text-grey">{{ dataStore.formData.posNo }}</div>
@@ -182,10 +189,14 @@ function redirectToPagePetition() {
               </q-item> -->
               <q-item>
                 <q-item-section class="text-grey-6">{{
-                  dataStore.officerType == "OFFICER" ? "ตำแหน่งประเภท" : "กลุ่มงาน"
+                  dataStore.officerType == "OFFICER"
+                    ? "ตำแหน่งประเภท"
+                    : "กลุ่มงาน"
                 }}</q-item-section>
                 <q-item-section>{{
-                  dataStore.formData.posTypeName ? dataStore.formData.posTypeName : "-"
+                  dataStore.formData.posTypeName
+                    ? dataStore.formData.posTypeName
+                    : "-"
                 }}</q-item-section>
               </q-item>
               <q-item>
@@ -193,7 +204,9 @@ function redirectToPagePetition() {
                   dataStore.officerType == "OFFICER" ? "ระดับ" : "ระดับชั้นงาน"
                 }}</q-item-section>
                 <q-item-section>{{
-                  dataStore.formData.posLevelName ? dataStore.formData.posLevelName : "-"
+                  dataStore.formData.posLevelName
+                    ? dataStore.formData.posLevelName
+                    : "-"
                 }}</q-item-section>
               </q-item>
             </q-list>
@@ -291,7 +304,9 @@ function redirectToPagePetition() {
                   : "ลูกจ้างประจำกรุงเทพมหานคร"
               }}</span>
               <span class="text-grey text-weight-medium">{{
-                dataStore.formData.position ? `${dataStore.formData.position}` : "-"
+                dataStore.formData.position
+                  ? `${dataStore.formData.position}`
+                  : "-"
               }}</span>
               <div class="text-grey">{{ dataStore.formData.posNo }}</div>
             </div>
diff --git a/src/stores/data.ts b/src/stores/data.ts
index 271f7c0..67ce1db 100644
--- a/src/stores/data.ts
+++ b/src/stores/data.ts
@@ -6,6 +6,7 @@ import config from "@/app.config";
 import { useQuasar } from "quasar";
 import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
 import { useCounterMixin } from "./mixin";
+import type { ProfileData } from "@/interface/Main";
 
 export const useDataStore = defineStore("data", () => {
   const storeRegistry = useRegistryInFormationStore();
@@ -13,7 +14,8 @@ export const useDataStore = defineStore("data", () => {
   const mixin = useCounterMixin();
   const { messageError, showLoader, hideLoader } = mixin;
   // ref() คือการประกาศ state เหมือน vuex
-  const formData = reactive<any>({
+  const formData = reactive<ProfileData>({
+    rank: "",
     prefix: "",
     firstName: "",
     lastName: "",
@@ -92,6 +94,7 @@ export const useDataStore = defineStore("data", () => {
     const data = await dataPerson;
     isProbation.value = data.isProbation;
 
+    formData.rank = data.rank;
     formData.prefix = data.prefix;
     formData.firstName = data.firstName;
     formData.lastName = data.lastName;