diff --git a/src/modules/02_organizationalNew/components/listView.vue b/src/modules/02_organizationalNew/components/listView.vue
index c63f42118..01e1c4066 100644
--- a/src/modules/02_organizationalNew/components/listView.vue
+++ b/src/modules/02_organizationalNew/components/listView.vue
@@ -1,15 +1,39 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import TreeView from "@/modules/02_organizationalNew/components/mainTree.vue";
 import TableView from "@/modules/02_organizationalNew/components/tableTree.vue";
+
 const showData = ref<boolean>(false);
+const nodeTree = ref<any>();
+
+async function fetchDataTree() {
+  const data = [
+    {
+      organizationName: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
+      organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx01",
+      organizationLevel: 0,
+      lazy: true,
+    },
+    {
+      organizationName: "สำนักปลัดกรุงเทพมหานคร",
+      organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx02",
+      organizationLevel: 0,
+      lazy: true,
+    },
+  ];
+  nodeTree.value = data;
+}
+
+onMounted(() => {
+  fetchDataTree();
+});
 </script>
 <template>
   <div class="col-12">
     <q-card bordered class="col-12 row caedNone">
       <div class="col-xs-12 col-sm-3 row">
         <div class="col-12 row no-wrap bg-grey-1">
-          <TreeView />
+          <TreeView v-model:nodeTree="nodeTree" />
 
           <div class="col-12 row">
             <q-separator :vertical="!$q.screen.lt.md" />
diff --git a/src/modules/02_organizationalNew/components/mainTree.vue b/src/modules/02_organizationalNew/components/mainTree.vue
index 4b8db9e09..1ad991898 100644
--- a/src/modules/02_organizationalNew/components/mainTree.vue
+++ b/src/modules/02_organizationalNew/components/mainTree.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
 
+/** importComponents*/
+import DialogAgency from "@/modules/02_organizationalNew/components/DialogFormAgency.vue";
+
 /** importStore*/
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
 
 const stroe = useOrganizational();
 const $q = useQuasar();
 
-const showData = ref<boolean>(false);
 const listAdd = ref<any>([
   {
     label: "เพิ่มส่วนราชการ",
@@ -48,12 +50,13 @@ const listAdd = ref<any>([
   },
   {
     label: "แก้ไขสถานะ",
-    icon: "checklist_rtl",
+    icon: "rule",
     val: "STATUS",
     color: "yellow-9",
   },
 ]);
 
+const nodeTEST = defineModel<any>("nodeTree", { required: true });
 const filter = ref<string>("");
 const nodes = ref<Array<any>>([]);
 const lazy = ref(nodes);
@@ -136,21 +139,25 @@ const onLazyLoad = (details: { node: any; key: any; done: any; fail: any }) => {
         organizationName: "กองบริหารทั่วไป",
         organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx11",
         organizationLevel: 1,
+        organizationNo: "00011",
       },
       {
         organizationName: "กองสรรหาบุคคล",
         organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx12",
         organizationLevel: 1,
+        organizationNo: "00011",
       },
       {
         organizationName: "สถาบันพัฒนาทรัพยากรบุคคลกรุงเทพมหานคร",
         organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx13",
         organizationLevel: 1,
+        organizationNo: "00011",
         children: [
           {
             organizationName: "ฝ่ายบริหารงานทั่วไป",
             organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxx131",
             organizationLevel: 2,
+            organizationNo: "00011",
             children: [
               {
                 organizationName: "กลุ่มงานวิเคราะห์การพัฒนาทรัพยากรบุคคล",
@@ -217,30 +224,45 @@ function searchAndReplace(
   }
 }
 
+const dialogAgency = ref<boolean>(false);
+function onClickAgency() {
+  dialogAgency.value = !dialogAgency.value;
+}
+
+watch(
+  () => nodeTEST.value,
+  () => {
+    nodes.value = nodeTEST.value;
+  }
+);
+
 onMounted(async () => {
-  nodes.value = [
-    {
-      organizationName: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
-      organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx01",
-      organizationLevel: 0,
-      lazy: true,
-    },
-    {
-      organizationName: "สำนักปลัดกรุงเทพมหานคร",
-      organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx02",
-      organizationLevel: 0,
-      lazy: true,
-    },
-    // {
-    //   organizationName: "data empty",
-    //   lazy: true,
-    // },
-    // {
-    //   organizationName: "Node is not expandable",
-    //   expandable: false,
-    //   children: [{ organizationName: "Some node" }],
-    // },
-  ];
+  // setTimeout(() => {
+  //   console.log(nodessd.value);
+  // }, 200);
+  // nodes.value = [
+  //   {
+  //     organizationName: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
+  //     organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx01",
+  //     organizationLevel: 0,
+  //     lazy: true,
+  //   },
+  //   {
+  //     organizationName: "สำนักปลัดกรุงเทพมหานคร",
+  //     organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx02",
+  //     organizationLevel: 0,
+  //     lazy: true,
+  //   },
+  //   // {
+  //   //   organizationName: "data empty",
+  //   //   lazy: true,
+  //   // },
+  //   // {
+  //   //   organizationName: "Node is not expandable",
+  //   //   expandable: false,
+  //   //   children: [{ organizationName: "Some node" }],
+  //   // },
+  // ];
 });
 </script>
 
@@ -249,8 +271,15 @@ onMounted(async () => {
     <div class="q-gutter-md">
       <div class="row q-col-gutter-sm">
         <div class="col-2" v-if="stroe.typeOrganizational === 'draft'">
-          <q-btn dense flat round color="primary" icon="add">
-            <q-tooltip>เพิ่ม</q-tooltip>
+          <q-btn
+            dense
+            flat
+            round
+            color="primary"
+            icon="add"
+            @click="onClickAgency"
+          >
+            <q-tooltip>เพิ่มหน่วยงาน</q-tooltip>
           </q-btn>
         </div>
 
@@ -278,10 +307,10 @@ onMounted(async () => {
         "
       >
         <q-tree
-          class="q-pa-sm"
+          class="q-pa-md q-gutter-sm"
           dense
           default-expand-all
-          selected-color="blue-6"
+          selected-color="primary"
           :nodes="lazy"
           node-key="organizationId"
           label-key="organizationName"
@@ -299,15 +328,18 @@ onMounted(async () => {
 
             <q-btn
               flat
+              dense
               icon="mdi-dots-vertical"
               class="q-pa-none q-ml-xs"
               v-if="stroe.typeOrganizational === 'draft'"
+              color="grey-13"
             >
               <q-menu>
                 <q-list
-                  style="min-width: 100px"
+                  dense
                   v-for="(item, index) in listAdd"
                   :key="index"
+                  style="min-width: 100px"
                 >
                   <q-item
                     clickable
@@ -327,10 +359,18 @@ onMounted(async () => {
               </q-menu>
             </q-btn>
           </template>
+
+          <template v-slot:default-body="prop">
+            <div v-if="prop.node.organizationNo">
+              <span class="text-grey-13">{{ prop.node.organizationNo }}</span>
+            </div>
+          </template>
         </q-tree>
       </div>
     </div>
   </div>
+
+  <DialogAgency :modal="dialogAgency" :close="onClickAgency" />
 </template>
 
 <style scoped></style>
diff --git a/src/modules/02_organizationalNew/components/tableTree.vue b/src/modules/02_organizationalNew/components/tableTree.vue
index ca797b7ca..354ebcf5b 100644
--- a/src/modules/02_organizationalNew/components/tableTree.vue
+++ b/src/modules/02_organizationalNew/components/tableTree.vue
@@ -4,6 +4,9 @@ import { ref } from "vue";
 /** importType*/
 import type { QTableProps } from "quasar";
 
+/** importComponents*/
+import DialogFormPosotion from "@/modules/02_organizationalNew/components/DialogFormPosition.vue";
+
 /** importStore*/
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
 
@@ -81,23 +84,36 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 const rows = ref<any>([]);
+
+const dialogPosition = ref<boolean>(false);
+function onClickPosition() {
+  dialogPosition.value = !dialogPosition.value;
+}
 </script>
 <template>
   <!-- TOOLBAR -->
   <div class="col-12">
     <q-toolbar style="padding: 0">
       <div v-if="stroe.typeOrganizational === 'draft'">
-        <q-btn flat round dense color="primary" icon="add">
-          <q-tooltip>เพิ่ม</q-tooltip></q-btn
+        <q-btn
+          flat
+          round
+          dense
+          color="primary"
+          icon="add"
+          @click="onClickPosition"
+        >
+          <q-tooltip>เพิ่มตำแหน่ง</q-tooltip></q-btn
         >
         <q-btn flat round dense color="blue" icon="filter_list">
-          <q-tooltip>ค้นหา</q-tooltip>
+          <q-tooltip>จัดลำดับ</q-tooltip>
         </q-btn>
       </div>
 
       <q-btn flat round dense color="blue-10" icon="save_alt">
         <q-menu>
           <q-list
+            dense
             style="min-width: 100px"
             v-for="(item, index) in document"
             :key="index"
@@ -117,7 +133,11 @@ const rows = ref<any>([]);
             v-model="showData"
             label="แสดงตำแหน่งทั้งหมด"
             color="primary"
-          />
+          >
+            <q-tooltip
+              >แสดงตำแหน่งทั้งหมดภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
+            >
+          </q-checkbox>
         </div>
         <div><q-input outlined dense v-model="filter" label="ค้นหา" /></div>
       </div>
@@ -137,6 +157,7 @@ const rows = ref<any>([]);
       dense
       class="custom-header-table"
       :rows-per-page-options="[10, 25, 50, 100]"
+      :filter="filter"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -171,6 +192,8 @@ const rows = ref<any>([]);
     </template> -->
     </d-table>
   </div>
+
+  <DialogFormPosotion :modal="dialogPosition" :close="onClickPosition" />
 </template>
 
 <style scoped></style>
diff --git a/src/modules/02_organizationalNew/views/main.vue b/src/modules/02_organizationalNew/views/main.vue
index 9acb001f3..e950af507 100644
--- a/src/modules/02_organizationalNew/views/main.vue
+++ b/src/modules/02_organizationalNew/views/main.vue
@@ -5,6 +5,8 @@ import { ref } from "vue";
 import ListView from "@/modules/02_organizationalNew/components/listView.vue";
 import StructureView from "@/modules/02_organizationalNew/components/structureView.vue";
 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";
 
 /** importStore*/
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
@@ -12,8 +14,7 @@ import { useOrganizational } from "@/modules/02_organizationalNew/store/organiza
 const modalNewStructure = ref<boolean>(false);
 const stroe = useOrganizational();
 
-const isStatusData = ref<boolean>(true);
-
+const isStatusData = ref<boolean>(false);
 const itemStructure = ref<any>([
   {
     val: "NEW",
@@ -32,6 +33,16 @@ const itemStructure = ref<any>([
     name: "ทำสำเนาโครงสร้าง ตำแหน่งและคนครอง",
   },
 ]);
+
+const modalDateTime = ref<boolean>(false);
+function onClickDateTime() {
+  modalDateTime.value = !modalDateTime.value;
+}
+
+const modalHistory = ref<boolean>(false);
+function onClickHistory() {
+  modalHistory.value = !modalHistory.value;
+}
 </script>
 <template>
   <q-btn
@@ -45,7 +56,13 @@ const itemStructure = ref<any>([
     <q-space />
 
     <div class="toptitle row" v-if="stroe.typeOrganizational === 'draft'">
-      <q-btn color="indigo-9" icon="alarm" label="ตั้งเวลาเผยแพร่"> </q-btn>
+      <q-btn
+        color="indigo-9"
+        icon="alarm"
+        label="ตั้งเวลาเผยแพร่"
+        @click="onClickDateTime"
+      >
+      </q-btn>
     </div>
   </div>
 
@@ -108,6 +125,7 @@ const itemStructure = ref<any>([
             <q-btn-dropdown color="green" label="ปรับโครงสร้าง">
               <q-list>
                 <q-item
+                  dense
                   clickable
                   v-close-popup
                   v-for="(item, index) in itemStructure"
@@ -120,7 +138,13 @@ const itemStructure = ref<any>([
               </q-list>
             </q-btn-dropdown>
 
-            <q-btn flat round color="primary" icon="history">
+            <q-btn
+              flat
+              round
+              color="primary"
+              icon="history"
+              @click="onClickHistory"
+            >
               <q-tooltip>ประวัติโครงสร้าง</q-tooltip>
             </q-btn>
             <q-space />
@@ -134,7 +158,7 @@ const itemStructure = ref<any>([
             <q-btn
               flat
               round
-              icon="account_tree"
+              icon="mdi-sitemap"
               :color="stroe.statusView === 'tree' ? 'grey-7' : 'grey-4'"
               @click="stroe.statusView = 'tree'"
             />
@@ -150,6 +174,9 @@ const itemStructure = ref<any>([
   </q-card>
 
   <DialogFormNewStructure v-model:new-structure="modalNewStructure" />
+  <DialogDateTime :modal="modalDateTime" :close="onClickDateTime" />
+
+  <DialogHistory :modal="modalHistory" :close="onClickHistory" />
 </template>
 
 <style scoped></style>