diff --git a/src/modules/02_organizationalNew/components/StructureDetail.vue b/src/modules/02_organizationalNew/components/StructureDetail.vue
index 3973c2e47..06b4be766 100644
--- a/src/modules/02_organizationalNew/components/StructureDetail.vue
+++ b/src/modules/02_organizationalNew/components/StructureDetail.vue
@@ -50,7 +50,11 @@ async function fetchDetailTree(id: string, type: string) {
       formData.orgType = range != "DEPARTMENT" ? "ส่วนราชการ" : "หน่วยงาน";
       formData.orgLevel = store.convertType(range);
       formData.status =
-        store.typeOrganizational === "current" ? "ปัจจุบัน" : "แบบร่าง";
+        store.typeOrganizational === "current"
+          ? "ปกติ"
+          : store.typeOrganizational === "draft"
+          ? "แบบร่าง"
+          : "ยุบเลิก";
       formData.orgPhoneEx = data[`org${type}PhoneEx`];
       formData.orgPhoneIn = data[`org${type}PhoneIn`];
       formData.orgFax = data[`org${type}Fax`];
diff --git a/src/modules/02_organizationalNew/components/listView.vue b/src/modules/02_organizationalNew/components/listView.vue
index a0d0916eb..eb2333ce5 100644
--- a/src/modules/02_organizationalNew/components/listView.vue
+++ b/src/modules/02_organizationalNew/components/listView.vue
@@ -19,38 +19,50 @@ const { showLoader, hideLoader, messageError } = useCounterMixin();
 
 const showData = ref<boolean>(false);
 const nodeTree = ref<OrgTree[]>();
+const historyId = defineModel<string>("historyId", { required: true });
+const count = defineModel<number>("count", { required: true });
 
 // defineProps<{ dataActive: DataActive }>();
 
-async function fetchDataTree() {
+async function fetchDataTree(id: string) {
   showLoader();
-  const id =
-    store.typeOrganizational === "current" ? store.activeId : store.draftId;
-  id &&
-    (await http
-      .get(config.API.orgByid(id.toString()))
-      .then((res) => {
-        const data = res.data.result;
-        nodeTree.value = data;
-        console.log(res);
-      })
-      .catch((err) => {
-        messageError($q, err);
-      })
-      .finally(() => {
-        hideLoader();
-      }));
+  // const id =
+  //   store.typeOrganizational === "current" ? store.activeId : store.draftId;
+  // id &&
+  await http
+    .get(config.API.orgByid(id.toString()))
+    .then((res) => {
+      const data = res.data.result;
+      nodeTree.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
   // console.log(nodeTree.value);
 }
 
 onMounted(async () => {
-  await fetchDataTree();
+  const id =
+    store.typeOrganizational === "current" ? store.activeId : store.draftId;
+  id && (await fetchDataTree(id));
 });
 
+watch(
+  () => count.value,
+  () => {
+    fetchDataTree(historyId.value);
+  }
+);
+
 watch(
   () => store.typeOrganizational,
   () => {
-    fetchDataTree();
+    const id =
+      store.typeOrganizational === "current" ? store.activeId : store.draftId;
+    id && store.typeOrganizational !== "old" && fetchDataTree(id);
   }
 );
 </script>
diff --git a/src/modules/02_organizationalNew/components/mainTree.vue b/src/modules/02_organizationalNew/components/mainTree.vue
index 2a0b97978..84afe164a 100644
--- a/src/modules/02_organizationalNew/components/mainTree.vue
+++ b/src/modules/02_organizationalNew/components/mainTree.vue
@@ -149,9 +149,6 @@ function deleteNode(treeNode: any, organizationId: any): boolean {
   // console.log("tttttttttttttt", treeNode.orgTreeId, organizationId);
 
   if (treeNode.orgTreeId === organizationId) {
-    console.log(treeNode);
-
-    // ลบ Node โดยการไม่ส่งผลลบ Node ทั้งหมดภายใต้
     treeNode.children = [];
 
     breakLoop.value = true;
@@ -283,7 +280,24 @@ onMounted(async () => {});
           @update:selected="updateSelected"
         >
           <template v-slot:default-header="prop">
-            {{ prop.node.orgTreeName }}
+            <!-- {{ prop.node.orgTreeName }} -->
+
+            <div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
+              <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
+              <div>
+                <div class="text-weight-medium">
+                  {{ prop.node.orgTreeName }}
+                </div>
+                <div class="text-weight-light">
+                  {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
+                  {{
+                    prop.node.orgTreeShortName == null
+                      ? null
+                      : prop.node.orgTreeShortName
+                  }}
+                </div>
+              </div>
+            </div>
 
             <q-btn
               v-if="store.typeOrganizational === 'draft'"
@@ -351,13 +365,54 @@ onMounted(async () => {});
                 </q-list>
               </q-menu>
             </q-btn>
+
+            <q-btn
+              v-else
+              flat
+              dense
+              icon="mdi-dots-vertical"
+              class="q-pa-none q-ml-xs"
+              color="grey-13"
+            >
+              <q-menu>
+                <q-list
+                  dense
+                  v-for="(item, index) in listAdd.slice(5, 6)"
+                  :key="index"
+                  style="min-width: 100px"
+                >
+                  <q-item
+                    clickable
+                    v-close-popup
+                    @click="
+                      item.type === 'EDIT'
+                        ? onClickEdit(prop.node)
+                        : item.type === 'ADD'
+                        ? onClickAgency(prop.node.orgLevel + 1, prop.node)
+                        : item.type === 'DETAIL'
+                        ? onClickDetail(prop.node.orgTreeId, prop.node.orgLevel)
+                        : item.type === 'DEL'
+                        ? onClickDel(prop.node.orgLevel, prop.node.orgTreeId)
+                        : null
+                    "
+                  >
+                    <q-item-section avatar>
+                      <q-icon :color="item.color" :name="item.icon" />
+                    </q-item-section>
+                    <q-item-section>{{ item.label }}</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
           </template>
 
-          <template v-slot:default-body="prop">
+          <!-- <template v-slot:default-body="prop">
             <div v-if="prop.node.orgCode">
-              <span class="text-grey-13">{{ prop.node.orgCode }}</span>
+              <span class="text-grey-13"
+                >{{ prop.node.orgCode }} {{ prop.node.orgTreeShortName }}</span
+              >
             </div>
-          </template>
+          </template> -->
         </q-tree>
 
         <!-- <div class="q-pa-md q-gutter-sm">
diff --git a/src/modules/02_organizationalNew/interface/response/organizational.ts b/src/modules/02_organizationalNew/interface/response/organizational.ts
index c1118507f..072d854e3 100644
--- a/src/modules/02_organizationalNew/interface/response/organizational.ts
+++ b/src/modules/02_organizationalNew/interface/response/organizational.ts
@@ -5,7 +5,7 @@ interface DataActive {
   draftName: string;
 }
 
-interface nodes {
+interface OrgTree {
   orgTreeId: string;
   orgRootId: string;
   orgLevel: number;
@@ -23,4 +23,12 @@ interface nodes {
   children: OrgTree[];
 }
 
-export type { DataActive, OrgTree };
+interface OrgRevision {
+  orgRevisionCreatedAt: string | null;
+  orgRevisionId: string;
+  orgRevisionIsCurrent: boolean;
+  orgRevisionIsDraft: boolean;
+  orgRevisionName: string;
+}
+
+export type { DataActive, OrgTree, OrgRevision };
diff --git a/src/modules/02_organizationalNew/views/main.vue b/src/modules/02_organizationalNew/views/main.vue
index 695f0774a..3c512a7ad 100644
--- a/src/modules/02_organizationalNew/views/main.vue
+++ b/src/modules/02_organizationalNew/views/main.vue
@@ -6,6 +6,7 @@ import config from "@/app.config";
 
 /** importType*/
 import type { DataOption } from "@/modules/02_organizationalNew/interface/index/Main";
+import type { OrgRevision } from "@/modules/02_organizationalNew/interface/response/organizational";
 
 /** importComponents*/
 import ListView from "@/modules/02_organizationalNew/components/listView.vue";
@@ -13,7 +14,6 @@ import StructureView from "@/modules/02_organizationalNew/components/structureVi
 import DialogFormNewStructure from "@/modules/02_organizationalNew/components/DialogNewStructure.vue";
 import DialogDateTime from "@/modules/02_organizationalNew/components/DialogFormDateTime.vue";
 import DialogHistory from "@/modules/02_organizationalNew/components/DialogHistory.vue";
-import DialogStructureDetail from "@/modules/02_organizationalNew/components/StructureDetail.vue";
 import DialogPositionDetail from "@/modules/02_organizationalNew/components/PositionDetail.vue";
 /** importStore*/
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
@@ -23,7 +23,6 @@ const $q = useQuasar();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 
 const modalNewStructure = ref<boolean>(false);
-const modalStructureDetail = ref<boolean>(false);
 const modalPositionDetail = ref<boolean>(false);
 
 const stroe = useOrganizational();
@@ -82,6 +81,32 @@ async function fetchOrganizationActive() {
     });
 }
 
+const itemHistory = ref<DataOption[]>([]);
+const historyId = ref<string>("");
+async function fetchHistory() {
+  // showLoader();
+  await http
+    .get(config.API.organizationHistoryNew)
+    .then((res) => {
+      console.log(res);
+      const data = res.data.result;
+      const filterData = data.filter(
+        (e: OrgRevision) => !e.orgRevisionIsDraft && !e.orgRevisionIsCurrent
+      );
+
+      itemHistory.value = filterData.map((e: OrgRevision) => ({
+        id: e.orgRevisionId,
+        name: e.orgRevisionName,
+      }));
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 const typeStructure = ref<string>("");
 function ocClickAddStructure(type: string) {
   modalNewStructure.value = !modalNewStructure.value;
@@ -94,12 +119,18 @@ function onClickDateTime() {
 }
 
 const modalHistory = ref<boolean>(false);
-function onClickHistory() {
-  modalHistory.value = !modalHistory.value;
+const count = ref<number>(0);
+const labelHistory = ref<string>("ประวัติโครงสร้าง");
+function onClickHistory(id: string, name: string) {
+  historyId.value = id;
+  labelHistory.value = name;
+  count.value++;
+  // modalHistory.value = !modalHistory.value;
 }
 
 onMounted(async () => {
   await fetchOrganizationActive();
+  await fetchHistory();
 });
 </script>
 <template>
@@ -164,19 +195,46 @@ onMounted(async () => {
                 :outline="stroe.typeOrganizational === 'current' ? false : true"
                 color="blue"
                 label="ปัจจุบัน"
-                @click="stroe.typeOrganizational = 'current'"
+                @click="
+                  (stroe.typeOrganizational = 'current'),
+                    (labelHistory = 'ประวัติโครงสร้าง')
+                "
                 :disable="ishasActive"
               />
               <q-btn
                 :outline="stroe.typeOrganizational === 'draft' ? false : true"
                 color="blue"
                 label="แบบร่าง"
-                @click="stroe.typeOrganizational = 'draft'"
+                @click="
+                  (stroe.typeOrganizational = 'draft'),
+                    (labelHistory = 'ประวัติโครงสร้าง')
+                "
                 :disable="ishasDraft"
               />
+              <q-btn-dropdown
+                color="blue"
+                :label="labelHistory"
+                @click="stroe.typeOrganizational = 'old'"
+                :outline="stroe.typeOrganizational === 'old' ? false : true"
+              >
+                <q-list>
+                  <q-item
+                    dense
+                    clickable
+                    v-close-popup
+                    v-for="(item, index) in itemHistory"
+                    :key="index"
+                    @click="onClickHistory(item.id, item.name)"
+                  >
+                    <q-item-section>
+                      <q-item-label>{{ item.name }}</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-btn-dropdown>
             </q-btn-group>
 
-            <q-btn-dropdown color="green" label="ปรับโครงสร้าง">
+            <q-btn-dropdown color="green" label="ประวัติโครงสร้าง">
               <q-list>
                 <q-item
                   dense
@@ -193,15 +251,9 @@ onMounted(async () => {
               </q-list>
             </q-btn-dropdown>
 
-            <q-btn
-              flat
-              round
-              color="primary"
-              icon="history"
-              @click="onClickHistory"
-            >
+            <!-- <q-btn flat round color="primary" icon="history">
               <q-tooltip>ประวัติโครงสร้าง</q-tooltip>
-            </q-btn>
+            </q-btn> -->
             <q-space />
             <q-btn
               flat
@@ -221,7 +273,11 @@ onMounted(async () => {
         </q-card-section>
         <q-separator />
         <q-card-section style="padding: 0px">
-          <ListView v-if="stroe.statusView === 'list'" />
+          <ListView
+            v-if="stroe.statusView === 'list'"
+            v-model:historyId="historyId"
+            v-model:count="count"
+          />
           <StructureView v-if="stroe.statusView === 'tree'" />
         </q-card-section>
       </q-card>
@@ -243,7 +299,7 @@ onMounted(async () => {
   <DialogHistory :modal="modalHistory" :close="onClickHistory" />
 
   <!-- รายละเอียดโครงสร้าง -->
-  <DialogStructureDetail v-model:structure-detail="modalStructureDetail" />
+  <!-- <DialogStructureDetail v-model:structure-detail="modalStructureDetail" /> -->
 
   <!-- รายละเอียดตำแหน่ง -->
   <DialogPositionDetail v-model:position-detail="modalPositionDetail" />