diff --git a/src/modules/01_metadataNew/components/calendar/CalendarList.vue b/src/modules/01_metadataNew/components/calendar/CalendarList.vue
index 5281695b6..a78838f20 100644
--- a/src/modules/01_metadataNew/components/calendar/CalendarList.vue
+++ b/src/modules/01_metadataNew/components/calendar/CalendarList.vue
@@ -523,7 +523,7 @@ const dayThaiRange = (val: [Date, Date]) => {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scope>
 .custom-header-table {
   max-height: 64vh;
 
diff --git a/src/modules/01_metadataNew/components/calendar/calendarMain.vue b/src/modules/01_metadataNew/components/calendar/calendarMain.vue
index efb8f6521..3133fd6bf 100644
--- a/src/modules/01_metadataNew/components/calendar/calendarMain.vue
+++ b/src/modules/01_metadataNew/components/calendar/calendarMain.vue
@@ -552,7 +552,7 @@ const dateThaiRange = (val: [Date, Date] | []) => {
 };
 </script>
 
-<style>
+<style scoped>
 .my-menu-link {
   color: black;
   background: #d0d0d0;
diff --git a/src/modules/02_organizationalNew/components/listView.vue b/src/modules/02_organizationalNew/components/listView.vue
new file mode 100644
index 000000000..cf9e5cb00
--- /dev/null
+++ b/src/modules/02_organizationalNew/components/listView.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import TreeView from "@/modules/02_organizationalNew/components/mainTree.vue";
+import TableView from "@/modules/02_organizationalNew/components/tableTree.vue";
+</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 />
+
+          <div class="col-12 row">
+            <q-separator :vertical="!$q.screen.lt.md" />
+          </div>
+        </div>
+      </div>
+
+      <div class="col-xs-12 col-sm-9 q-pa-md">
+        <div class="col-12 row items-center"><TableView /></div>
+      </div>
+    </q-card>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/02_organizationalNew/components/mainTree.vue b/src/modules/02_organizationalNew/components/mainTree.vue
new file mode 100644
index 000000000..1c7e2ff6e
--- /dev/null
+++ b/src/modules/02_organizationalNew/components/mainTree.vue
@@ -0,0 +1,344 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+
+/** 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: "เพิ่มส่วนราชการ",
+    icon: "add",
+    val: "ADD",
+    color: "primary",
+  },
+  {
+    label: "แก้ไขหน่วยงาน",
+    icon: "edit",
+    val: "EDIT",
+    color: "info",
+  },
+  {
+    label: "ลบหน่วยงาน",
+    icon: "mdi-trash-can-outline",
+    val: "DEL",
+    color: "red",
+  },
+  {
+    label: "สำเนาหน่วยงาน",
+    icon: "content_copy",
+    val: "COPY",
+    color: "blue",
+  },
+  {
+    label: "ดูประวัติหน่วยงาน",
+    icon: "history",
+    val: "HISTORY",
+    color: "purple",
+  },
+  {
+    label: "จัดลำดับ",
+    icon: "filter_list",
+    val: "SORT",
+    color: "green-7",
+  },
+  {
+    label: "แก้ไขสถานะ",
+    icon: "checklist_rtl",
+    val: "STATUS",
+    color: "yellow-9",
+  },
+]);
+
+const filter = ref<string>("");
+const nodes = ref<Array<any>>([]);
+const lazy = ref(nodes);
+const expanded = ref<Array<any>>([]);
+const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
+const noData = ref<string>("ไม่มีข้อมูล");
+const selected = ref("");
+
+const filterData = (node: any, filter: string) => {
+  // ให้ทาง API ค้นหาให้
+  nodes.value = [
+    {
+      organizationName: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
+      organizationId: "3b86d275-8259-427c-8da7-12813fe482eb",
+      organizationLevel: 0,
+      lazy: true,
+      children: [
+        {
+          organizationName: "กองบริหารทั่วไป",
+          organizationId: "3486d275-8159-427c-8da7-12813fe482eb",
+          organizationLevel: 1,
+        },
+        {
+          organizationName: "กองสรรหาบุคคล",
+          organizationId: "3486d275-8259-427c-8da7-12813fe400eb",
+          organizationLevel: 1,
+        },
+        {
+          organizationName: "สถาบันพัฒนาทรัพยากรบุคคลกรุงเทพมหานคร",
+          organizationId: "3486d275-8259-437c-8da7-12813fe482eb",
+          organizationLevel: 1,
+          children: [
+            {
+              organizationName: "ฝ่ายบริหารงานทั่วไป",
+              organizationId: "3486d275-8259-427c-8da7-12813ff482eb",
+              organizationLevel: 2,
+            },
+            {
+              organizationName: "ส่วนส่งเสริมการพัฒนาทรัพยากรบุคคล",
+              organizationId: "3486d275-8259-427c-8da7-12833fe482eb",
+              organizationLevel: 2,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      organizationName: "สำนักปลัดกรุงเทพมหานคร",
+      organizationId: "3b86d275-8259-427c-8da7-12813fe482ec",
+      organizationLevel: 0,
+    },
+  ];
+
+  // expanded จาก id ได้
+  expanded.value = [
+    "3b86d275-8259-427c-8da7-12813fe482eb",
+    "3486d275-8259-437c-8da7-12813fe482eb",
+  ];
+
+  return node.organizationName && node.organizationName.indexOf(filter) > -1;
+};
+
+const updateSelected = (target: any) => {
+  console.log("updateSelected===>", target);
+};
+
+const onLazyLoad = (details: { node: any; key: any; done: any; fail: any }) => {
+  // call fail() if any error occurs
+
+  // setTimeout(() => {
+  // simulate loading and setting an empty node
+  // if (details.key.indexOf("data empty") > -1) {
+  //   details.done([]);
+  //   return;
+  // }
+
+  if (details.node.organizationId == "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx01") {
+    details.done([
+      {
+        organizationName: "กองบริหารทั่วไป",
+        organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx11",
+        organizationLevel: 1,
+      },
+      {
+        organizationName: "กองสรรหาบุคคล",
+        organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx12",
+        organizationLevel: 1,
+      },
+      {
+        organizationName: "สถาบันพัฒนาทรัพยากรบุคคลกรุงเทพมหานคร",
+        organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx13",
+        organizationLevel: 1,
+        children: [
+          {
+            organizationName: "ฝ่ายบริหารงานทั่วไป",
+            organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxx131",
+            organizationLevel: 2,
+            children: [
+              {
+                organizationName: "กลุ่มงานวิเคราะห์การพัฒนาทรัพยากรบุคคล",
+                organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx1311",
+                organizationLevel: 3,
+              },
+            ],
+          },
+          {
+            organizationName: "ส่วนส่งเสริมการพัฒนาทรัพยากรบุคคล",
+            organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx14",
+            organizationLevel: 2,
+          },
+        ],
+      },
+    ]);
+  } else if (
+    details.node.organizationId == "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx02"
+  ) {
+    details.done([
+      {
+        organizationName: "สำนักงานการเจ้าหน้าที่",
+        organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx21",
+        organizationLevel: 1,
+      },
+    ]);
+  }
+  // }, 500);
+};
+
+const breakLoop = ref<boolean>(false);
+async function edit(selected: string) {
+  console.log("edit node tree id: " + selected);
+  breakLoop.value = false;
+
+  // Usage
+  const targetNodeId = selected;
+  const replacementNode = {
+    organizationName: `ชื่อใหม่ ${selected}`,
+    organizationId: selected,
+  };
+
+  for (let index = 0; index < nodes.value.length; index++) {
+    const element = nodes.value[index];
+    searchAndReplace(element, targetNodeId, replacementNode);
+    console.log("index===>", index);
+    console.log("breakLoop===>", breakLoop.value);
+    if (breakLoop.value) break;
+  }
+}
+
+function searchAndReplace(
+  treeNode: any,
+  organizationId: any,
+  replacementObject: any
+) {
+  if (treeNode.organizationId === organizationId) {
+    Object.assign(treeNode, replacementObject);
+    breakLoop.value = true;
+  } else if (treeNode.children) {
+    for (const child of treeNode.children) {
+      searchAndReplace(child, organizationId, replacementObject);
+    }
+  }
+}
+
+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" }],
+    // },
+  ];
+});
+</script>
+
+<template>
+  <div class="col-12 q-py-md q-px-lg">
+    <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>
+        </div>
+
+        <div
+          :class="stroe.typeOrganizational === 'draft' ? 'col-10' : 'col-12'"
+        >
+          <q-input dense outlined v-model="filter" label="ค้นหา">
+            <template v-slot:append>
+              <q-icon
+                v-if="filter !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="filter = ''"
+              />
+            </template>
+          </q-input>
+        </div>
+      </div>
+      <div
+        class="bg-white"
+        style="
+          height: 60vh;
+          border: 1px solid rgb(210, 210, 210);
+          border-radius: 10px;
+        "
+      >
+        <q-tree
+          class="q-pa-sm"
+          dense
+          default-expand-all
+          selected-color="blue-6"
+          :nodes="lazy"
+          node-key="organizationId"
+          label-key="organizationName"
+          :filter="filter"
+          :no-results-label="notFound"
+          :no-nodes-label="noData"
+          :filter-method="filterData"
+          v-model:expanded="expanded"
+          v-model:selected="selected"
+          @update:selected="updateSelected"
+          @lazy-load="onLazyLoad"
+        >
+          <template v-slot:default-header="prop">
+            {{ prop.node.organizationName }}
+
+            <q-btn
+              flat
+              icon="mdi-dots-vertical"
+              class="q-pa-none q-ml-xs"
+              v-if="stroe.typeOrganizational === 'draft'"
+            >
+              <q-menu>
+                <q-list
+                  style="min-width: 100px"
+                  v-for="(item, index) in listAdd"
+                  :key="index"
+                >
+                  <q-item
+                    clickable
+                    v-close-popup
+                    @click="
+                      item.val === 'EDIT'
+                        ? edit(prop.node.organizationId)
+                        : 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>
+        </q-tree>
+      </div>
+      <div>
+        <q-checkbox
+          keep-color
+          v-model="showData"
+          label="แสดงโครงสร้างทั้งหมด"
+          color="primary"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/02_organizationalNew/components/structureView.vue b/src/modules/02_organizationalNew/components/structureView.vue
new file mode 100644
index 000000000..3c5b3b848
--- /dev/null
+++ b/src/modules/02_organizationalNew/components/structureView.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts"></script>
+<template>
+  <div>Structure View</div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/02_organizationalNew/components/tableTree.vue b/src/modules/02_organizationalNew/components/tableTree.vue
new file mode 100644
index 000000000..dd81b9095
--- /dev/null
+++ b/src/modules/02_organizationalNew/components/tableTree.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+/** importStore*/
+import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
+
+const stroe = useOrganizational();
+const filter = ref<string>("");
+const document = ref<any>([
+  {
+    name: "บัญชี 1",
+    val: "1",
+  },
+  {
+    name: "บัญชี 2",
+    val: "2",
+  },
+  {
+    name: "บัญชี 3",
+    val: "3",
+  },
+]);
+</script>
+<template>
+  <q-toolbar class="text" 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="blue" icon="filter_list">
+        <q-tooltip>ค้นหา</q-tooltip>
+      </q-btn>
+    </div>
+
+    <q-btn flat round dense color="blue-10" icon="save_alt">
+      <q-menu>
+        <q-list
+          style="min-width: 100px"
+          v-for="(item, index) in document"
+          :key="index"
+        >
+          <q-item clickable v-close-popup>
+            <q-item-section>{{ item.name }}</q-item-section>
+          </q-item>
+        </q-list>
+      </q-menu>
+      <q-tooltip>ดาวน์โหลด</q-tooltip>
+    </q-btn>
+    <q-space />
+    <q-input outlined dense v-model="filter" label="ค้นหา" />
+  </q-toolbar>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/02_organizationalNew/store/organizational.ts b/src/modules/02_organizationalNew/store/organizational.ts
new file mode 100644
index 000000000..303455ecb
--- /dev/null
+++ b/src/modules/02_organizationalNew/store/organizational.ts
@@ -0,0 +1,12 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useOrganizational = defineStore("organizationalStore", () => {
+  const typeOrganizational = ref<string>("current");
+  const statusView = ref<string>("list");
+
+  return {
+    typeOrganizational,
+    statusView,
+  };
+});
diff --git a/src/modules/02_organizationalNew/views/main.vue b/src/modules/02_organizationalNew/views/main.vue
index 2a55fa61c..e4ecbaa38 100644
--- a/src/modules/02_organizationalNew/views/main.vue
+++ b/src/modules/02_organizationalNew/views/main.vue
@@ -1,7 +1,144 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+/** importComponents*/
+import ListView from "@/modules/02_organizationalNew/components/listView.vue";
+import StructureView from "@/modules/02_organizationalNew/components/structureView.vue";
+
+/** importStore*/
+import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
+
+const stroe = useOrganizational();
+
+const isStatusData = ref<boolean>(true);
+
+const itemStructure = ref<any>([
+  {
+    val: "NEW",
+    name: "สร้างใหม่",
+  },
+  {
+    val: "STRUCTURE",
+    name: "ทำสำเนาเฉพาะโครงสร้าง",
+  },
+  {
+    val: "STRUCTUREANDPOSITION",
+    name: "ทำสำเนาโครงสร้างและตำแหน่ง",
+  },
+  {
+    val: "STRUCTUREANDPOSITION",
+    name: "ทำสำเนาโครงสร้าง ตำแหน่งและคนครอง",
+  },
+]);
+</script>
 <template>
-  โครงสร้างอัตรากำลัง (ใหม่)
+  <div class="row">
+    <div class="toptitle text-dark row items-center">โครงสร้างอัตรากำลัง</div>
+    <q-space />
+    <div class="toptitle row" v-if="stroe.typeOrganizational === 'draft'">
+      <q-btn color="indigo-9" icon="alarm" label="ตั้งเวลาเผยแพร่"> </q-btn>
+    </div>
+  </div>
+
+  <q-card flat bordered>
+    <div class="q-pa-xl" v-if="!isStatusData">
+      <q-card
+        flat
+        bordered
+        style="
+          height: 70vh;
+          border: 1px solid rgb(210, 210, 210);
+          border-radius: 5px;
+        "
+      >
+        <div
+          class="text-center row"
+          style="
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+          "
+        >
+          <div>
+            <q-btn
+              flat
+              style="background-color: #d8f5f2"
+              round
+              color="primary"
+              size="lg"
+              icon="add"
+              @click="isStatusData = true"
+            >
+              <q-tooltip>เพิ่มโครงสร้าง </q-tooltip>
+            </q-btn>
+            <div class="q-mt-sm">เพิ่มโครงสร้าง</div>
+          </div>
+        </div>
+      </q-card>
+    </div>
+    <div v-else>
+      <q-card class="my-card">
+        <q-card-section>
+          <q-toolbar class="q-gutter-md" style="padding: 0px">
+            <q-btn-group outline>
+              <q-btn
+                :outline="stroe.typeOrganizational === 'current' ? false : true"
+                color="blue"
+                label="ปัจจุบัน"
+                @click="stroe.typeOrganizational = 'current'"
+              />
+              <q-btn
+                :outline="stroe.typeOrganizational === 'draft' ? false : true"
+                color="blue"
+                label="แบบร่าง"
+                @click="stroe.typeOrganizational = 'draft'"
+              />
+            </q-btn-group>
+
+            <q-btn-dropdown color="green" label="ปรับโครงสร้าง">
+              <q-list>
+                <q-item
+                  clickable
+                  v-close-popup
+                  v-for="(item, index) in itemStructure"
+                  :key="index"
+                >
+                  <q-item-section>
+                    <q-item-label>{{ item.name }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
+
+            <q-btn flat round color="primary" icon="history">
+              <q-tooltip>ประวัติโครงสร้าง</q-tooltip>
+            </q-btn>
+            <q-space />
+            <q-btn
+              flat
+              round
+              :color="stroe.statusView === 'list' ? 'grey-7' : 'grey-4'"
+              icon="list"
+              @click="stroe.statusView = 'list'"
+            />
+            <q-btn
+              flat
+              round
+              icon="account_tree"
+              :color="stroe.statusView === 'tree' ? 'grey-7' : 'grey-4'"
+              @click="stroe.statusView = 'tree'"
+            />
+          </q-toolbar>
+        </q-card-section>
+        <q-separator />
+        <q-card-section style="padding: 0px">
+          <ListView v-if="stroe.statusView === 'list'" />
+          <StructureView v-if="stroe.statusView === 'tree'" />
+        </q-card-section>
+      </q-card>
+    </div>
+  </q-card>
 </template>
 
-<script setup lang="ts"></script>
-
 <style scoped></style>