diff --git a/src/modules/02_organizationalNew/components/StructureDetail.vue b/src/modules/02_organizationalNew/components/StructureDetail.vue
index 2068ed372..bf30060de 100644
--- a/src/modules/02_organizationalNew/components/StructureDetail.vue
+++ b/src/modules/02_organizationalNew/components/StructureDetail.vue
@@ -1,31 +1,60 @@
 <script setup lang="ts">
 import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 import type { HistoryType } from "@/modules/02_organizationalNew/interface/index/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-const modal = defineModel<boolean>("structureDetail", { required: true });
+import { useCounterMixin } from "@/stores/mixin";
+import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
+const store = useOrganizational();
 const { showLoader, hideLoader, messageError, date2Thai } = mixin;
 
+const modal = defineModel<boolean>("structureDetail", { required: true });
+const treeId = defineModel<string>("treeId", { required: true });
+const orgLevel = defineModel<number>("orgLevel", { required: true });
+
 const formData = reactive<any>({
-  orgName: "สำนักงาน ก.ก.",
-  agencyName: "กลุ่มงานสารสนเทศฯศูนย์สารสนเทศ", //*ส่วนราชการ
-  orgType: "ส่วนราชการ", //*ประเภท
-  orgLevel: "กลุ่มงาน", //*ระดับ
-  status: "ปกติ", //*สถานะ
-  orgPhoneEx: "0111111111", //หมายเลขโทรศัพท์ที่ติดต่อจากภายนอก
-  orgPhoneIn: "0333333333", //หมายเลขโทรศัพท์ที่ติดต่อจากภายใน
-  orgFax: "023123456", //หมายเลขโทรสาร
+  orgName: "",
+  agencyName: "", //*ส่วนราชการ
+  orgType: "", //*ประเภท
+  orgLevel: "", //*ระดับ
+  status: "", //*สถานะ
+  orgPhoneEx: "", //หมายเลขโทรศัพท์ที่ติดต่อจากภายนอก
+  orgPhoneIn: "", //หมายเลขโทรศัพท์ที่ติดต่อจากภายใน
+  orgFax: "", //หมายเลขโทรสาร
+  orgShortName: "",
 });
 
+async function fetchDetailTree(id: string, type: string) {
+  await http
+    .get(config.API.orgLevelByid(type.toLocaleLowerCase(), id))
+    .then((res) => {
+      const data = res.data.result;
+      formData.orgName = data[`org${type}Name`];
+      formData.agencyName = data[`org${type}Name`];
+      formData.orgType = data[`org${type}Name`];
+      formData.orgLevel = data[`org${type}Rank`];
+      formData.status = data[`org${type}Name`];
+      formData.orgPhoneEx = data[`org${type}PhoneEx`];
+      formData.orgPhoneIn = data[`org${type}PhoneIn`];
+      formData.orgFax = data[`org${type}Fax`];
+      formData.orgShortName = data[`org${type}ShortName`];
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 function close() {
   modal.value = false;
 }
@@ -34,6 +63,8 @@ watch(
   () => modal.value,
   () => {
     if (modal.value == true) {
+      const type = store.checkLevel(orgLevel.value);
+      fetchDetailTree(treeId.value, type);
     }
   }
 );
@@ -53,7 +84,7 @@ watch(
                 </div>
               </div>
               <div class="col-8 text-grey-8">
-                <p>{{ formData.orgName }}</p>
+                <p>{{ formData.orgName }} ({{ formData.orgShortName }})</p>
               </div>
             </div>
             <div class="row q-col-gutter-sm q-mb-xs">
@@ -103,13 +134,21 @@ watch(
                 </div>
               </div>
               <div class="col-8 text-grey-8">
-                <p class="q-ma-none">{{ formData.orgPhoneEx ? `ภายนอก ${formData.orgPhoneEx}`:'' }}</p>
+                <p class="q-ma-none">
+                  {{
+                    formData.orgPhoneEx ? `ภายนอก ${formData.orgPhoneEx}` : ""
+                  }}
+                </p>
               </div>
             </div>
 
             <div class="row q-col-gutter-sm">
               <div class="offset-4 col-8 text-grey-8">
-                <p>{{ formData.orgPhoneIn ? `ภายใน ${formData.orgPhoneIn}`:'' }}</p>
+                <p>
+                  {{
+                    formData.orgPhoneIn ? `ภายใน ${formData.orgPhoneIn}` : ""
+                  }}
+                </p>
               </div>
             </div>
 
diff --git a/src/modules/02_organizationalNew/components/mainTree.vue b/src/modules/02_organizationalNew/components/mainTree.vue
index ef6ba15de..7a0a100d0 100644
--- a/src/modules/02_organizationalNew/components/mainTree.vue
+++ b/src/modules/02_organizationalNew/components/mainTree.vue
@@ -242,6 +242,8 @@ function searchAndReplace(
 const dialogAgency = ref<boolean>(false);
 const actionType = ref<string>("");
 const dataNode = ref<any>();
+const treeId = ref<string>("");
+
 function onClickAgency(level: number, node: any) {
   dialogAgency.value = !dialogAgency.value;
   orgLevel.value = level;
@@ -250,9 +252,10 @@ function onClickAgency(level: number, node: any) {
 }
 
 const dialogDetail = ref<boolean>(false);
-function onClickDetail() {
-  console.log(dialogDetail.value);
+function onClickDetail(id: string, level: number) {
+  treeId.value = id;
   dialogDetail.value = !dialogDetail.value;
+  orgLevel.value = level;
 }
 
 async function onClickEdit(node: any) {
@@ -403,7 +406,7 @@ onMounted(async () => {
                         : item.type === 'ADD'
                         ? onClickAgency(prop.node.orgLevel + 1, prop.node)
                         : item.type === 'DETAIL'
-                        ? onClickDetail()
+                        ? onClickDetail(prop.node.orgTreeId, prop.node.orgLevel)
                         : item.type === 'DEL'
                         ? onClickDel(prop.node.orgLevel, prop.node.orgTreeId)
                         : null
@@ -478,7 +481,11 @@ onMounted(async () => {
   />
 
   <!-- รายละเอียดโครงสร้าง -->
-  <DialogStructureDetail v-model:structure-detail="dialogDetail" />
+  <DialogStructureDetail
+    v-model:structure-detail="dialogDetail"
+    v-model:treeId="treeId"
+    v-model:orgLevel="orgLevel"
+  />
 </template>
 
 <style scoped></style>