diff --git a/src/api/org/api.org.ts b/src/api/org/api.org.ts
index 8bf9a4a..45d915f 100644
--- a/src/api/org/api.org.ts
+++ b/src/api/org/api.org.ts
@@ -6,4 +6,5 @@ export default {
   profilePosition: () => `${org}/profile/keycloak/position`,
 
   searchCommander: `${org}/profile/search/commander`,
+  dataUserInformation: `${org}/profile/user`,
 };
diff --git a/src/modules/10_registry/router.ts b/src/modules/10_registry/router.ts
new file mode 100644
index 0000000..b59add7
--- /dev/null
+++ b/src/modules/10_registry/router.ts
@@ -0,0 +1,66 @@
+// registry
+const registryPage = () => import("@/modules/10_registry/views/main.vue");
+
+const registryInformation = () => import("@/modules/10_registry/tabs/01_information.vue");
+const registryGovernment = () => import("@/modules/10_registry/tabs/02_government.vue");
+const registrySalary = () => import("@/modules/10_registry/tabs/03_salary.vue");
+const registryInsignia = () => import("@/modules/10_registry/tabs/04_insignia.vue");
+const registryOther = () => import("@/modules/10_registry/tabs/05_other.vue");
+
+export default [
+  {
+    path: "/registry",
+    name: "registryMain",
+    component: registryPage,
+    meta: {
+      Auth: true,
+      Key: [10],
+    },
+  },
+
+  {
+    path: "/registry/information",
+    name: "registryInformation",
+    component: registryInformation,
+    meta: {
+      Auth: true,
+      Key: [10],
+    },
+  },
+  {
+    path: "/registry/government",
+    name: "registryGovernment",
+    component: registryGovernment,
+    meta: {
+      Auth: true,
+      Key: [10],
+    },
+  },
+  {
+    path: "/registry/salary",
+    name: "registrySalary",
+    component: registrySalary,
+    meta: {
+      Auth: true,
+      Key: [10],
+    },
+  },
+  {
+    path: "/registry/insignia",
+    name: "registryInsignia",
+    component: registryInsignia,
+    meta: {
+      Auth: true,
+      Key: [10],
+    },
+  },
+  {
+    path: "/registry/other",
+    name: "registryOther",
+    component: registryOther,
+    meta: {
+      Auth: true,
+      Key: [10],
+    },
+  },
+];
diff --git a/src/modules/10_registry/tabs/01_information.vue b/src/modules/10_registry/tabs/01_information.vue
new file mode 100644
index 0000000..f278a4b
--- /dev/null
+++ b/src/modules/10_registry/tabs/01_information.vue
@@ -0,0 +1,615 @@
+<script setup lang="ts">
+import { useQuasar, type QTableProps } from "quasar";
+import { ref, reactive, onMounted } from "vue";
+import { useRouter } from "vue-router";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError } = mixin;
+
+const router = useRouter();
+const rowsHistoryName = ref<any[]>([]);
+const filter = ref<string>("");
+
+const typeChangeName = (val: string) => {
+  switch (val) {
+    case "prefix":
+      return "เปลี่ยนคำนำหน้าชื่อ";
+    case "firstName":
+      return "เปลี่ยนชื่อ";
+    case "lastName":
+      return "เปลี่ยนนามสกุล";
+    case "all":
+      return "เปลี่ยนคำนำหน้าชื่อ, ชื่อ-นามสกุล";
+    case "firstNameLastName":
+      return "เปลี่ยนชื่อ-นามสกุล";
+    case "prefixAndlastName":
+      return "เปลี่ยนคำนำหน้าชื่อ และนามสกุล";
+    default:
+      return "-";
+  }
+};
+
+const formDataInformation = reactive<any>({
+  citizenId: "", //เลขบัตรประจำตัวประชาชน
+  name: "", //ชื่อ
+  birthDate: "", //วันเกิด
+  gender: "", //เพศ
+  relationship: "", //สถานภาพ
+
+  nationality: "", //สัญชาติ
+  ethnicity: "", //เชื้อชาติ
+  religion: "", //ศาสนา
+  bloodGroup: "", //หมู่เลือด
+  phone: "", //เบอร์โทร
+});
+
+const formDataAddress = reactive<any>({
+  registrationAddress: "", //ที่อยู่ตามทะเบียนบ้าน
+  registrationProvince: "", //จังหวัด
+  registrationDistrict: "", //เขต / อำเภอ
+  registrationSubDistrict: "", //แขวง / ตำบล
+  registrationZipCode: "", //รหัสไปรษณีย์
+
+  currentAddress: "", //ที่อยู่ปัจจุบัน
+  currentProvince: "", //จังหวัด
+  currentDistrict: "", //เขต / อำเภอ
+  currentSubDistrict: "", //แขวง / ตำบล
+  currentZipCode: "", //รหัสไปรษณีย์
+});
+
+const visibleColumnsHistoryName = ref<string[]>([
+  "no",
+  "prefix",
+  "firstName",
+  "lastName",
+  "status",
+]);
+
+const columnsHistoryName = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "prefix",
+    align: "left",
+    label: "คำนำหน้าชื่อ",
+    sortable: true,
+    field: "prefix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "firstName",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "firstName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastName",
+    align: "left",
+    label: "นามสกุล",
+    sortable: true,
+    field: "lastName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะการเปลี่ยนชื่อ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+function getData() {
+  showLoader()
+  http
+  .get(config.API.dataUserInformation)
+  .then((res)=>{
+    console.log(res.data)
+  }).catch((e)=>{
+    messageError($q,e)
+  }).finally(()=>{
+    hideLoader()
+  })
+}
+
+onMounted(() => {
+  getData()
+  formDataInformation.citizenId = "4016500103241";
+  formDataInformation.name = "นางกัณฐิมา กาฬสินธุ์";
+  formDataInformation.birthDate = "24 พ.ย. 2511";
+  formDataInformation.gender = "หญิง";
+  formDataInformation.relationship = "";
+
+  formDataInformation.nationality = "";
+  formDataInformation.ethnicity = "";
+  formDataInformation.religion = "";
+  formDataInformation.bloodGroup = "";
+  formDataInformation.phone = "";
+
+  rowsHistoryName.value = [
+    {
+      prefix: "นางสาว",
+      firstName: "อรัญญาวินัย",
+      lastName: "พรไชยะสาร",
+      status: "all",
+    },
+    {
+      prefix: "นางสาว1",
+      firstName: "อรัญญาวินัย1",
+      lastName: "พรไชยะสาร1",
+      status: "prefix",
+    },
+  ];
+});
+</script>
+<template>
+  <div v-if="!$q.screen.gt.xs" class="col-xs-12 col-sm-12 col-md-11">
+    <div class="toptitle text-white col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      <div>ข้อมูลส่วนตัว</div>
+    </div>
+  </div>
+
+  <div :class="`row q-my-sm ${$q.screen.gt.xs ? '' : 'mobileClass'}`">
+    <!-- ประวัติส่วนตัว -->
+    <div class="col-12">
+      <q-toolbar class="q-px-none">
+        <span class="text-blue-6 text-weight-bold text-body1"
+          >ประวัติส่วนตัว</span
+        >
+        <q-space />
+        <q-btn icon="mdi-history" color="info" flat dense round size="14px">
+          <q-tooltip>ประวัติแก้ไขข้อมูลส่วนตัว</q-tooltip>
+        </q-btn>
+      </q-toolbar>
+      <q-card bordered class="bg-grey-1 q-pa-md">
+        <div class="row">
+          <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
+            <div class="row">
+              <div class="col-5 text-grey-6 text-weight-medium">
+                เลขบัตรประจำตัวประชาชน
+              </div>
+              <div class="col-7">
+                {{
+                  formDataInformation.citizenId
+                    ? formDataInformation.citizenId
+                    : "-"
+                }}
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-5 text-grey-6 text-weight-medium">
+                ชื่อ - สกุล
+              </div>
+              <div class="col-7">
+                {{ formDataInformation.name ? formDataInformation.name : "-" }}
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-5 text-grey-6 text-weight-medium">
+                วัน/เดือน/ปีเกิด
+              </div>
+              <div class="col-7">
+                {{
+                  formDataInformation.birthDate
+                    ? formDataInformation.birthDate
+                    : "-"
+                }}
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-5 text-grey-6 text-weight-medium">เพศ</div>
+              <div class="col-7">
+                {{
+                  formDataInformation.gender ? formDataInformation.gender : "-"
+                }}
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-5 text-grey-6 text-weight-medium">สถานภาพ</div>
+              <div class="col-7">
+                {{
+                  formDataInformation.relationship
+                    ? formDataInformation.relationship
+                    : "-"
+                }}
+              </div>
+            </div>
+          </div>
+
+          <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
+            <div class="row">
+              <div class="col-5 text-grey-6 text-weight-medium">สัญชาติ</div>
+              <div class="col-7">
+                {{
+                  formDataInformation.nationality
+                    ? formDataInformation.nationality
+                    : "-"
+                }}
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-5 text-grey-6 text-weight-medium">เชื้อชาติ</div>
+              <div class="col-7">
+                {{
+                  formDataInformation.ethnicity
+                    ? formDataInformation.ethnicity
+                    : "-"
+                }}
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-5 text-grey-6 text-weight-medium">ศาสนา</div>
+              <div class="col-7">
+                {{
+                  formDataInformation.religion
+                    ? formDataInformation.religion
+                    : "-"
+                }}
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-5 text-grey-6 text-weight-medium">หมู่เลือด</div>
+              <div class="col-7">
+                {{
+                  formDataInformation.bloodGroup
+                    ? formDataInformation.bloodGroup
+                    : "-"
+                }}
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-5 text-grey-6 text-weight-medium">เบอร์โทร</div>
+              <div class="col-7">
+                {{
+                  formDataInformation.phone ? formDataInformation.phone : "-"
+                }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </q-card>
+    </div>
+
+    <!-- ประวัติการเปลี่ยนชื่อ-นามสกุล -->
+    <div v-if="$q.screen.gt.xs" class="col-12">
+      <q-toolbar class="q-px-none q-mt-md">
+        <span class="text-blue-6 text-weight-bold text-body1"
+          >ประวัติการเปลี่ยนชื่อ-นามสกุล</span
+        >
+        <q-space />
+        <q-input
+          v-if="$q.screen.gt.xs"
+          class="inputgreen"
+          outlined
+          dense
+          v-model="filter"
+          label="ค้นหา"
+          style="max-width: 200px"
+        >
+          <template v-slot:append>
+            <q-icon
+              v-if="filter !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="filter = ''"
+            />
+            <q-icon
+              v-else
+              name="search"
+              class="cursor-pointer"
+              @click="filter = ''"
+            />
+          </template>
+        </q-input>
+        <q-select
+          v-if="$q.screen.gt.xs"
+          class="q-ml-sm"
+          dense
+          multiple
+          outlined
+          emit-value
+          map-options
+          options-cover
+          options-dense
+          option-value="name"
+          style="min-width: 150px"
+          v-model="visibleColumnsHistoryName"
+          :options="columnsHistoryName"
+          :display-value="$q.lang.table.columns"
+        />
+      </q-toolbar>
+      <d-table
+        flat
+        dense
+        bordered
+        virtual-scroll
+        :rows="rowsHistoryName"
+        :columns="columnsHistoryName"
+        :filter="filter"
+        :rows-per-page-options="[10, 25, 50, 100]"
+        :visible-columns="visibleColumnsHistoryName"
+        :virtual-scroll-sticky-size-start="48"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
+
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="(col, index) in props.cols" :key="col.name">
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else-if="col.name == 'status'">
+                {{ props.row.status ? typeChangeName(props.row.status) : "-" }}
+              </div>
+              <div v-else>
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+              >
+                <q-tooltip>ดูประวัติการเปลี่ยนชื่อ-นามสกุล</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+
+    <div v-else class="col-12">
+      <q-toolbar class="q-px-none q-mt-md">
+        <span class="text-blue-6 text-weight-bold text-body1"
+          >ประวัติการเปลี่ยนชื่อ-นามสกุล</span
+        >
+      </q-toolbar>
+
+      <q-list bordered style="border-radius: 8px">
+        <div
+          v-for="(item, index) in rowsHistoryName"
+          :class="`${index % 2 !== 0 ? 'bg-grey-1' : ''}`"
+        >
+          <q-item class="q-pt-md relative-position" dense>
+            <q-btn
+              icon="mdi-history"
+              color="info"
+              flat
+              dense
+              round
+              size="14px"
+              class="absolute-top-right"
+            >
+              <q-tooltip>ประวัติแก้ไขข้อมูลส่วนตัว</q-tooltip>
+            </q-btn>
+            <q-item-section class="text-grey-6 text-weight-medium"
+              >คำนำหน้า</q-item-section
+            >
+            <q-item-section>{{
+              item.prefix ? item.prefix : "-"
+            }}</q-item-section>
+          </q-item>
+          <q-item class="q-py-none" dense>
+            <q-item-section class="text-grey-6 text-weight-medium"
+              >ชื่อ</q-item-section
+            >
+            <q-item-section>{{
+              item.firstName ? item.firstName : "-"
+            }}</q-item-section>
+          </q-item>
+          <q-item class="q-py-none" dense>
+            <q-item-section class="text-grey-6 text-weight-medium"
+              >นามสกุล</q-item-section
+            >
+            <q-item-section>{{
+              item.lastName ? item.lastName : "-"
+            }}</q-item-section>
+          </q-item>
+          <q-item class="q-py-none q-pb-sm" dense>
+            <q-item-section class="text-grey-6 text-weight-medium"
+              >สถานะ</q-item-section
+            >
+            <q-item-section>{{
+              item.status ? typeChangeName(item.status) : "-"
+            }}</q-item-section>
+          </q-item>
+          <q-separator v-if="index < rowsHistoryName.length - 1" />
+        </div>
+      </q-list>
+    </div>
+
+    <!-- ข้อมูลที่อยู่ -->
+    <div class="col-12">
+      <q-toolbar class="q-px-none">
+        <span class="text-blue-6 text-weight-bold text-body1"
+          >ข้อมูลที่อยู่</span
+        >
+        <q-space />
+        <q-btn icon="mdi-history" color="info" flat dense round size="14px">
+          <q-tooltip>ประวัติข้อมูลที่อยู่</q-tooltip>
+        </q-btn>
+      </q-toolbar>
+      <q-card bordered class="bg-grey-1 q-pa-md">
+        <div class="row">
+          <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
+            <div class="row">
+              <div class="col-5 text-grey-6 text-weight-medium">
+                เลขบัตรประจำตัวประชาชน
+              </div>
+              <div class="col-7">
+                {{
+                  formDataAddress.registrationAddress
+                    ? formDataAddress.registrationAddress
+                    : "-"
+                }}
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-5 text-grey-6 text-weight-medium">
+                ชื่อ - สกุล
+              </div>
+              <div class="col-7">
+                {{
+                  formDataAddress.registrationProvince
+                    ? formDataAddress.registrationProvince
+                    : "-"
+                }}
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-5 text-grey-6 text-weight-medium">
+                วัน/เดือน/ปีเกิด
+              </div>
+              <div class="col-7">
+                {{
+                  formDataAddress.registrationDistrict
+                    ? formDataAddress.registrationDistrict
+                    : "-"
+                }}
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-5 text-grey-6 text-weight-medium">เพศ</div>
+              <div class="col-7">
+                {{
+                  formDataAddress.registrationSubDistrict
+                    ? formDataAddress.registrationSubDistrict
+                    : "-"
+                }}
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-5 text-grey-6 text-weight-medium">สถานภาพ</div>
+              <div class="col-7">
+                {{
+                  formDataAddress.registrationZipCode
+                    ? formDataAddress.registrationZipCode
+                    : "-"
+                }}
+              </div>
+            </div>
+          </div>
+
+          <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
+            <div class="row">
+              <div class="col-5 text-grey-6 text-weight-medium">สัญชาติ</div>
+              <div class="col-7">
+                {{
+                  formDataAddress.currentAddress
+                    ? formDataAddress.currentAddress
+                    : "-"
+                }}
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-5 text-grey-6 text-weight-medium">เชื้อชาติ</div>
+              <div class="col-7">
+                {{
+                  formDataAddress.currentProvince
+                    ? formDataAddress.currentProvince
+                    : "-"
+                }}
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-5 text-grey-6 text-weight-medium">ศาสนา</div>
+              <div class="col-7">
+                {{
+                  formDataAddress.currentDistrict
+                    ? formDataAddress.currentDistrict
+                    : "-"
+                }}
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-5 text-grey-6 text-weight-medium">หมู่เลือด</div>
+              <div class="col-7">
+                {{
+                  formDataAddress.currentSubDistrict
+                    ? formDataAddress.currentSubDistrict
+                    : "-"
+                }}
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-5 text-grey-6 text-weight-medium">เบอร์โทร</div>
+              <div class="col-7">
+                {{
+                  formDataAddress.currentZipCode
+                    ? formDataAddress.currentZipCode
+                    : "-"
+                }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </q-card>
+    </div>
+  </div>
+</template>
+<style>
+.mobileClass {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 10px;
+}
+</style>
diff --git a/src/modules/10_registry/tabs/02_government.vue b/src/modules/10_registry/tabs/02_government.vue
new file mode 100644
index 0000000..88d63b9
--- /dev/null
+++ b/src/modules/10_registry/tabs/02_government.vue
@@ -0,0 +1,3 @@
+<template>
+    <div>government</div>
+</template>
\ No newline at end of file
diff --git a/src/modules/10_registry/tabs/03_salary.vue b/src/modules/10_registry/tabs/03_salary.vue
new file mode 100644
index 0000000..237aed7
--- /dev/null
+++ b/src/modules/10_registry/tabs/03_salary.vue
@@ -0,0 +1,3 @@
+<template>
+    <div>salary</div>
+</template>
\ No newline at end of file
diff --git a/src/modules/10_registry/tabs/04_insignia.vue b/src/modules/10_registry/tabs/04_insignia.vue
new file mode 100644
index 0000000..e3cfffa
--- /dev/null
+++ b/src/modules/10_registry/tabs/04_insignia.vue
@@ -0,0 +1,3 @@
+<template>
+    <div>insignia</div>
+</template>
\ No newline at end of file
diff --git a/src/modules/10_registry/tabs/05_other.vue b/src/modules/10_registry/tabs/05_other.vue
new file mode 100644
index 0000000..00f4b14
--- /dev/null
+++ b/src/modules/10_registry/tabs/05_other.vue
@@ -0,0 +1,3 @@
+<template>
+    <div>other</div>
+</template>
\ No newline at end of file
diff --git a/src/modules/10_registry/views/main.vue b/src/modules/10_registry/views/main.vue
new file mode 100644
index 0000000..c4b0bf4
--- /dev/null
+++ b/src/modules/10_registry/views/main.vue
@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import avatar from "@/assets/avatar_user.jpg";
+import { ref, reactive } from "vue";
+
+//หน้าเมนู
+import InformationPage from "@/modules/10_registry/tabs/01_information.vue";
+import GovernmentPage from "@/modules/10_registry/tabs/02_government.vue";
+import SalaryPage from "@/modules/10_registry/tabs/03_salary.vue";
+import InsigniaPage from "@/modules/10_registry/tabs/04_insignia.vue";
+import OtherPage from "@/modules/10_registry/tabs/05_other.vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const tab = ref<string>("information");
+const formData = reactive<any>({
+  prefix: "นาง",
+  firstName: "กัณฐิมา",
+  lastName: "กาฬสินธุ์",
+  position: "นักบริหาร",
+  posName: "หัวหน้าสำนักงาน",
+  posType: "บริหาร",
+  posLevel: "ชำนาญการพิเศษ",
+});
+const sizeImg = ref<string>("");
+function onResize(size: any) {
+  const width = size.width > 100 ? 100 : size.width;
+  sizeImg.value = `${width}px`;
+}
+
+function onMobile(type: string) {
+  console.log(1111);
+  router.push(`/registry/${type}`);
+}
+</script>
+<template>
+  <div class="row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        ข้อมูลทะเบียนประวัติ
+      </div>
+      <div v-if="$q.screen.gt.xs" class="row q-col-gutter-md">
+        <div class="col-3">
+          <q-card bordered>
+            <q-resize-observer @resize="onResize" />
+            <q-card-section>
+              <div class="text-center">
+                <q-avatar :size="sizeImg">
+                  <img
+                    :src="avatar"
+                    style="border-radius: 50%; object-fit: cover"
+                  />
+                </q-avatar>
+              </div>
+              <div class="column text-center q-mt-md q-mb-lg">
+                <span class="text-teal text-weight-medium">{{
+                  formData.firstName
+                    ? `${formData.prefix}${formData.firstName} ${formData.lastName}`
+                    : "-"
+                }}</span>
+                <span class="text-grey text-weight-medium">{{
+                  formData.position ? `${formData.position}` : "-"
+                }}</span>
+              </div>
+            </q-card-section>
+
+            <q-list separator class="q-mt-md">
+              <q-separator />
+              <q-item>
+                <q-item-section class="text-grey-6"
+                  >ตำแหน่งในสายงาน</q-item-section
+                >
+                <q-item-section>{{ formData.posName }}</q-item-section>
+              </q-item>
+              <q-item>
+                <q-item-section class="text-grey-6">ประเภท</q-item-section>
+                <q-item-section>{{ formData.posType }}</q-item-section>
+              </q-item>
+              <q-item>
+                <q-item-section class="text-grey-6"
+                  >ระดับชั้นงาน</q-item-section
+                >
+                <q-item-section>{{ formData.posLevel }}</q-item-section>
+              </q-item>
+            </q-list>
+
+            <q-card-section class="q-gutter-y-sm">
+              <q-btn class="full-width" unelevated color="blue-6"
+                ><q-icon left size="2em" name="mdi-file-download-outline" />
+                <div>ดาวน์โหลดประวัติแบบย่อ</div></q-btn
+              >
+              <q-btn class="full-width" unelevated color="primary"
+                ><q-icon left size="2em" name="mdi-folder-download-outline" />
+                <div>ดาวน์โหลด ก.พ.7/ก.ก. 1</div></q-btn
+              >
+            </q-card-section>
+          </q-card>
+        </div>
+        <div class="col-9">
+          <q-card bordered>
+            <q-tabs
+              v-model="tab"
+              inline-label
+              active-color="blue-6"
+              class="bg-grey-1 text-grey-6 shadow-2"
+              align="left"
+            >
+              <q-tab name="information" label="ข้อมูลส่วนตัว" class="bg-active"/>
+              <q-tab name="government" label="ข้อมูลราชการ" />
+              <q-tab name="salary" label="ข้อมูลเงินเดือน/ค่าจ้าง" />
+              <q-tab name="insignia" label="ข้อมูลเครื่องราชฯ" />
+              <q-tab name="other" label="ข้อมูลอื่นๆ" />
+            </q-tabs>
+
+            <q-separator />
+
+            <!-- รายการเเต่ละหน้า -->
+
+            <q-tab-panels v-model="tab" animated>
+              <q-tab-panel name="information">
+                <InformationPage />
+              </q-tab-panel>
+
+              <q-tab-panel name="government">
+                <GovernmentPage />
+              </q-tab-panel>
+
+              <q-tab-panel name="salary">
+                <SalaryPage />
+              </q-tab-panel>
+
+              <q-tab-panel name="insignia">
+                <InsigniaPage />
+              </q-tab-panel>
+
+              <q-tab-panel name="other">
+                <OtherPage />
+              </q-tab-panel>
+            </q-tab-panels>
+          </q-card>
+        </div>
+      </div>
+
+      <div v-else>
+        <q-card bordered>
+          <q-resize-observer @resize="onResize" />
+          <q-card-section>
+            <div class="text-center">
+              <q-avatar :size="sizeImg">
+                <img
+                  :src="avatar"
+                  style="border-radius: 50%; object-fit: cover"
+                />
+              </q-avatar>
+            </div>
+            <div class="column text-center q-mt-md q-mb-lg">
+              <span class="text-teal text-weight-medium">{{
+                formData.firstName
+                  ? `${formData.prefix}${formData.firstName} ${formData.lastName}`
+                  : "-"
+              }}</span>
+              <span class="text-grey text-weight-medium">{{
+                formData.position ? `${formData.position}` : "-"
+              }}</span>
+            </div>
+            <div class="row justify-center q-gutter-x-lg">
+              <q-btn
+                color="light-blue-1"
+                dense
+                round
+                unelevated
+                text-color="light-blue-5"
+                size="14px"
+                icon="mdi-file-download-outline"
+              ></q-btn>
+              <q-btn
+                color="teal-1"
+                text-color="primary"
+                dense
+                unelevated
+                round
+                size="14px"
+                icon="mdi-folder-download-outline"
+              ></q-btn>
+              <q-btn
+                color="red-1"
+                text-color="red-12"
+                unelevated
+                dense
+                round
+                size="14px"
+                icon="mdi-logout"
+              ></q-btn>
+            </div>
+          </q-card-section>
+
+          <q-list separator class="q-mt-md">
+            <q-item clickable v-ripple @click="onMobile('information')">
+              <q-item-section>ข้อมูลส่วนตัว</q-item-section>
+              <q-item-section avatar>
+                <q-avatar text-color="info" icon="mdi-chevron-right" />
+              </q-item-section>
+            </q-item>
+            <q-item clickable v-ripple @click="onMobile('government')">
+              <q-item-section>ข้อมูลราชการ</q-item-section>
+              <q-item-section avatar>
+                <q-avatar text-color="info" icon="mdi-chevron-right" />
+              </q-item-section>
+            </q-item>
+            <q-item clickable v-ripple @click="onMobile('salary')">
+              <q-item-section>ข้อมูลเงินเดือน/ค่าจ้าง</q-item-section>
+              <q-item-section avatar>
+                <q-avatar text-color="info" icon="mdi-chevron-right" />
+              </q-item-section>
+            </q-item>
+            <q-item clickable v-ripple @click="onMobile('insignia')">
+              <q-item-section>ข้อมูลผลงาน</q-item-section>
+              <q-item-section avatar>
+                <q-avatar text-color="info" icon="mdi-chevron-right" />
+              </q-item-section>
+            </q-item>
+            <q-item clickable v-ripple @click="onMobile('other')">
+              <q-item-section>ข้อมูลอื่นๆ</q-item-section>
+              <q-item-section avatar>
+                <q-avatar text-color="info" icon="mdi-chevron-right" />
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+      </div>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index c3b8dbb..200dd87 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -13,6 +13,7 @@ import ModuAppealComplain from "@/modules/07_appealComplain/router";
 import ModuleSupport from "@/modules/00_support/router";
 import ModuleKPI from "@/modules/08_KPI/router";
 import ModuleScholarship from "@/modules/09_scholarship/router";
+import Moduleregistry from "@/modules/10_registry/router";
 // TODO: ใช้หรือไม่?
 import keycloak from "@/plugins/keycloak";
 
@@ -51,6 +52,7 @@ const router = createRouter({
         ...ModuleSupport,
         ...ModuleKPI,
         ...ModuleScholarship,
+        ...Moduleregistry
       ],
     },
   ],
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 75db048..c058e0f 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -7,6 +7,7 @@ import { useQuasar } from "quasar";
 import keycloak from "@/plugins/keycloak";
 import { useCounterMixin } from "@/stores/mixin";
 
+
 const route = useRoute();
 const router = useRouter();
 
@@ -152,6 +153,10 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
   hour: "2-digit",
   minute: "2-digit",
 };
+
+function onInfo(){
+  router.push(`/registry`)
+}
 </script>
 <!-- โครงเว็บ -->
 <template>
@@ -358,6 +363,15 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
             </q-item>
           </template>
           <q-list>
+            <q-item clickable v-close-popup @click="onInfo">
+              <q-item-section avatar style="min-width: 30px" >
+                <q-icon color="info" size="18px" name="mdi-clipboard-account-outline" />
+              </q-item-section>
+              <q-item-section
+                ><q-item-label>ข้อมูลทะเบียนประวัติ</q-item-label></q-item-section
+              >
+            </q-item>
+
             <q-item clickable v-close-popup>
               <q-item-section avatar style="min-width: 30px">
                 <q-icon color="orange-9" size="18px" name="mdi-lock-outline" />
@@ -377,6 +391,7 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
             </q-item>
           </q-list>
         </q-btn-dropdown>
+
         <div v-else class="q-ml-sm" style="width: 30px">
           <q-btn round>
             <q-avatar>
@@ -389,10 +404,25 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
             </q-avatar>
             <q-menu>
               <q-list dense style="min-width: 200px">
+                
                 <q-item clickable v-close-popup>
                   <q-item-section>
                     <div class="row items-center">
                       <q-list>
+                        <q-item clickable v-close-popup @click="onInfo">
+                          <q-item-section avatar style="min-width: 30px">
+                            <q-icon
+                              color="info"
+                              size="18px"
+                              name="mdi-clipboard-account-outline"
+                            />
+                          </q-item-section>
+                          <q-item-section
+                            ><q-item-label
+                              >ข้อมูลทะเบียนประวัติ</q-item-label
+                            ></q-item-section
+                          >
+                        </q-item>
                         <q-item clickable v-close-popup>
                           <q-item-section avatar style="min-width: 30px">
                             <q-icon