diff --git a/src/components/Dialogs/PopupPersonal.vue b/src/components/Dialogs/PopupPersonal.vue
new file mode 100644
index 000000000..3877d1a69
--- /dev/null
+++ b/src/components/Dialogs/PopupPersonal.vue
@@ -0,0 +1,386 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importType*/
+import type { PersonalImformation } from "@/components/information/interface/response/Information";
+import type { Goverment } from "@/components/information/interface/response/Government";
+import type { Avatar } from "@/components/information/interface/response/avatar";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const mixin = useCounterMixin();
+const $q = useQuasar();
+
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+/** props*/
+const props = defineProps({
+  id: {
+    type: String,
+    requier: true,
+  },
+  modal: {
+    type: Boolean,
+    requier: true,
+  },
+});
+
+/** emit*/
+const emit = defineEmits(["update:modal"]);
+
+/** interface*/
+interface StatusLoad {
+  val: boolean;
+  val2: boolean;
+  val3: boolean;
+}
+
+/** ตัวแปร*/
+const modal = ref<boolean>(false);
+const statusLoad = ref<StatusLoad>({ val: false, val2: false, val3: false }); // เช็คสถานะการโหลด
+const avatar = reactive<Avatar>({
+  avatar: "",
+  fullname: "",
+  position: "",
+});
+const imformation = reactive<PersonalImformation>({
+  prefix: "",
+  citizenId: "",
+  firstName: "",
+  lastName: "",
+  birthDate: "",
+  age: "",
+  gender: "",
+});
+const goverment = reactive<Goverment>({
+  oc: "",
+  posNo: "",
+  position: "",
+  positionPathSide: "",
+  positionLine: "",
+  positionType: "",
+  positionLevel: "",
+  positionExecutive: "",
+  positionExecutiveSide: "",
+});
+
+/**
+ * function เรียกข้อมูลรูปภาพ
+ * @param id profileID
+ */
+async function fetchAvatar(id: string) {
+  showLoader();
+  await http
+    .get(config.API.profileAvatarId(id))
+    .then((res) => {
+      const data = res.data.result;
+      avatar.avatar = data.avatar;
+      avatar.fullname = data.fullname;
+      avatar.position = data.position ?? "-";
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      statusLoad.value.val = true;
+      loaderFunction();
+    });
+}
+
+/**
+ * function เรียกข้อมูลส่วนตัว
+ * @param id profileID
+ */
+async function fetchInformation(id: string) {
+  showLoader();
+  await http
+    .get(config.API.profileInforId(id))
+    .then((res) => {
+      const data = res.data.result;
+      imformation.prefix = data.prefix;
+      imformation.citizenId = data.citizenId;
+      imformation.firstName = data.firstName;
+      imformation.lastName = data.lastName;
+      imformation.birthDate = data.birthDate ? date2Thai(data.birthDate) : "";
+      imformation.age = data.age;
+      imformation.gender = data.gender;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      statusLoad.value.val2 = true;
+      loaderFunction();
+    });
+}
+
+/**
+ * function เรียกข้อมูลข้อมูลราชการ
+ * @param id profileID
+ */
+async function fetchProfileGov(id: string) {
+  showLoader();
+  await http
+    .get(config.API.profileGovId(id))
+    .then((res) => {
+      const data = res.data.result;
+      goverment.oc = data.oc ?? "-";
+      goverment.posNo = data.posNo ?? "-";
+      goverment.position = data.position ?? "-";
+      goverment.positionPathSide = data.positionPathSide ?? "-";
+      goverment.positionLine = data.positionLine ?? "-";
+      goverment.positionType = data.positionType ?? "-";
+      goverment.positionLevel = data.positionLevel ?? "-";
+      goverment.positionExecutive = data.positionExecutive ?? "-";
+      goverment.positionExecutiveSide = data.positionExecutiveSide ?? "-";
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      statusLoad.value.val3 = true;
+      loaderFunction();
+    });
+}
+
+/** functoion เช็คการโหลดของข้อมูล*/
+function loaderFunction() {
+  const allTrue = Object.values(statusLoad.value).every((val) => val);
+  allTrue && hideLoader();
+}
+
+function redirecToRegistry() {
+  window.open(`/registry/${props.id}`, "_blank");
+  modal.value = false;
+}
+
+watch(
+  () => props.modal,
+  async () => {
+    modal.value = props.modal ? props.modal : false;
+    modal.value &&
+      props.id &&
+      (await fetchAvatar(props.id),
+      await fetchInformation(props.id),
+      await fetchProfileGov(props.id));
+  }
+);
+
+watch(modal, (newValue) => {
+  if (!newValue) {
+    emit("update:modal", false);
+  }
+});
+</script>
+<template>
+  <q-dialog v-model="modal" position="right">
+    <q-card style="width: 420px">
+      <q-card-section>
+        <div class="text-h6 text-center">รายละเอียดแบบย่อย</div>
+      </q-card-section>
+
+      <q-card-section class="col q-pt-none bg-grey-12">
+        <div class="q-gutter-md">
+          <q-card bordered class="text-center bg-grey-12">
+            <div>
+              <q-avatar size="120px" color="grey-4">
+                <img
+                  v-if="avatar.avatar"
+                  :src="avatar.avatar"
+                  class="bg-grey-3"
+                  style="object-fit: cover"
+                />
+                <img
+                  v-else
+                  src="@/assets/avatar_user.jpg"
+                  class="bg-grey-3"
+                  style="object-fit: cover"
+                />
+              </q-avatar>
+            </div>
+            <div
+              class="q-mt-md text-weight-bolder text-center"
+              style="font-size: 18px"
+            >
+              {{ avatar.fullname }}
+            </div>
+            <div class="q-mb-xs text-center text-grey">
+              {{ avatar.position }}
+            </div>
+            <div class="q-mt-md">
+              <q-btn
+                class="bg-white"
+                outline
+                rounded
+                label="ดูรายละเอียดเพิ่มเติมทั้งหมด"
+                color="secondary"
+                @click.prevent="redirecToRegistry"
+              />
+            </div>
+          </q-card>
+
+          <q-scroll-area style="height: 500px; max-width: 100%">
+            <div class="q-gutter-md q-pa-sm">
+              <q-card bordered style="border: 1px solid #d6dee1">
+                <div class="q-pa-md">
+                  <div class="text-weight-bold row items-center">
+                    <q-icon name="mdi-account" color="grey-7" />
+                    <span class="q-ml-md">ข้อมูลส่วนตัว </span>
+                  </div>
+                  <div class="row q-pa-sm">
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="imformation.citizenId"
+                        label="เลขประจำตัวประชาชน"
+                      ></q-input>
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="imformation.prefix"
+                        label="ตำนำหน้าชื่่อ"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="imformation.firstName"
+                        label="ชื่่อ"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="imformation.lastName"
+                        label="นามสกุล"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-md-4">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="imformation.birthDate"
+                        label="วันเดือนปีเกิด"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-md-4">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="imformation.age"
+                        label="อายุ"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-md-4">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="imformation.gender"
+                        label="เพศ"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </q-card>
+
+              <q-card bordered style="border: 1px solid #d6dee1">
+                <div class="q-pa-md">
+                  <div class="text-weight-bold row items-center">
+                    <q-icon name="mdi-account-tie" color="grey-7" />
+                    <span class="q-ml-md">ข้อมูลราชการ </span>
+                  </div>
+                  <div class="row q-pa-sm">
+                    <div class="col-xs-12 col-md-12">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="goverment.oc === '' ? '-' : goverment.oc"
+                        label="สังกัด"
+                      ></q-input>
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="goverment.posNo"
+                        label="ตำแหน่งเลขที่"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="goverment.position"
+                        label="ตำแหน่ง"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="goverment.positionPathSide"
+                        label="ด้าน/สาขา"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="goverment.positionLine"
+                        label="สายงาน"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="goverment.positionType"
+                        label="ประเภท"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="goverment.positionLevel"
+                        label="ระดับ"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="goverment.positionExecutive"
+                        label="ตำแหน่งทางการบริหาร"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="goverment.positionExecutiveSide"
+                        label="ด้านตำแหน่งทางการบริหาร"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </q-card>
+            </div>
+          </q-scroll-area>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/components/information/interface/response/Government.ts b/src/components/information/interface/response/Government.ts
index 69a4ef3aa..82c7c9973 100644
--- a/src/components/information/interface/response/Government.ts
+++ b/src/components/information/interface/response/Government.ts
@@ -20,4 +20,16 @@ interface ResponseObject {
   reasonSameDate: string | null;
 }
 
-export type { ResponseObject };
+interface Goverment {
+  oc: string;
+  posNo: string;
+  position: string;
+  positionPathSide: string;
+  positionLine: string;
+  positionType: string;
+  positionLevel: string;
+  positionExecutive: string;
+  positionExecutiveSide: string;
+}
+
+export type { ResponseObject, Goverment };
diff --git a/src/components/information/interface/response/Information.ts b/src/components/information/interface/response/Information.ts
index cd0008734..53fda083a 100644
--- a/src/components/information/interface/response/Information.ts
+++ b/src/components/information/interface/response/Information.ts
@@ -21,4 +21,14 @@ interface ResponseObject {
   profileType: string | null;
 }
 
-export type { ResponseObject };
+interface PersonalImformation {
+  prefix: string;
+  citizenId: string;
+  firstName: string;
+  lastName: string;
+  birthDate: string | null;
+  age: string;
+  gender: string;
+}
+
+export type { ResponseObject, PersonalImformation };
diff --git a/src/components/information/interface/response/avatar.ts b/src/components/information/interface/response/avatar.ts
new file mode 100644
index 000000000..6c52650eb
--- /dev/null
+++ b/src/components/information/interface/response/avatar.ts
@@ -0,0 +1,7 @@
+interface Avatar {
+  avatar: string;
+  fullname: string;
+  position: string;
+}
+
+export type { Avatar };
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue b/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
index 453ee08e7..c626ed263 100644
--- a/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
+++ b/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
@@ -14,6 +14,8 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/main";
 
+import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
+
 const qualification = ref<string>("");
 const mainStore = useDisciplineMainStore();
 const searchRef = ref<any>(null);
@@ -308,13 +310,31 @@ function returnDetail(data: any) {
   formData.phone = data.phone;
   formData.email = data.email;
 }
+
+const modalPersonal = ref<boolean>(false);
+const personId = ref<string>("");
+/**
+ * function ดูประวัติแบบย่อย
+ * @param id  personId
+ */
+function onclickViewinfo(id: string) {
+  modalPersonal.value = true;
+  personId.value = id;
+}
+/**
+ * function อัปเดท modal
+ * @param modal ค่า modal
+ */
+function updatemodalPersonal(modal: boolean) {
+  modalPersonal.value = modal;
+}
 </script>
 <template>
   <form @submit.prevent.stop="onValidate">
     <q-card bordered>
       <div class="col-12 q-pa-md">
         <div class="row col-12 q-col-gutter-md">
-          <div class=" col-12 q-gutter-y-sm" v-if="data === null">
+          <div class="col-12 q-gutter-y-sm" v-if="data === null">
             <div class="row q-col-gutter-md items-start">
               <div class="col-12 col-sm-6 col-md-3">
                 <q-select
@@ -356,7 +376,6 @@ function returnDetail(data: any) {
               </div>
             </div>
 
-
             <div class="col-12">
               <d-table
                 ref="table"
@@ -394,13 +413,24 @@ function returnDetail(data: any) {
                         {{ props.rowIndex + 1 }}
                       </div>
                       <div v-else-if="col.name == 'info'">
-                        <router-link
+                        <!-- <router-link
                           target="_blank"
                           :to="`/registry/${props.row.personId}`"
-                          ><q-icon name="info" color="info" size="sm"
-                            ><q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip>
-                          </q-icon></router-link
+                          > -->
+                        <q-btn
+                          dense
+                          flat
+                          round
+                          color="info"
+                          icon="info"
+                          @click="onclickViewinfo(props.row.personId)"
                         >
+                          <q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip>
+                        </q-btn>
+                        <!-- <q-icon name="info" color="info" size="sm"
+                          ><q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip>
+                        </q-icon> -->
+                        <!-- </router-link> -->
                       </div>
 
                       <div v-else>
@@ -516,4 +546,10 @@ function returnDetail(data: any) {
       </div>
     </q-card>
   </form>
+
+  <PopupPersonal
+    :modal="modalPersonal"
+    :id="personId"
+    @update:modal="updatemodalPersonal"
+  />
 </template>