diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index f998559b7..c40be23d4 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -743,6 +743,12 @@ const menuList = readonly<any[]>([
         path: "developmentScholarship",
         role: "development",
       },
+      {
+        key: 14.5,
+        label: "ยุทธศาสตร์",
+        path: "developmentStrategic",
+        role: "development",
+      },
     ],
   },
   // {
diff --git a/src/modules/15_development/router.ts b/src/modules/15_development/router.ts
index af63439cc..a3390bcbd 100644
--- a/src/modules/15_development/router.ts
+++ b/src/modules/15_development/router.ts
@@ -7,14 +7,20 @@ const employeeHistory = () =>
   import("@/modules/15_development/views/EmployeeHistory.vue");
 const Scholarship = () =>
   import("@/modules/15_development/views/Scholarship.vue");
-const historyAdd = () => import('@/modules/15_development/components/history/AddPage.vue')
-const historyEdit = () => import('@/modules/15_development/components/history/AddPage.vue')
-const historyEmployeeAdd = () => import('@/modules/15_development/components/historyEmployee/AddPage.vue')
-const historyEmployeeEdit = () => import('@/modules/15_development/components/historyEmployee/AddPage.vue')
+const historyAdd = () =>
+  import("@/modules/15_development/components/history/AddPage.vue");
+const historyEdit = () =>
+  import("@/modules/15_development/components/history/AddPage.vue");
+const historyEmployeeAdd = () =>
+  import("@/modules/15_development/components/historyEmployee/AddPage.vue");
+const historyEmployeeEdit = () =>
+  import("@/modules/15_development/components/historyEmployee/AddPage.vue");
 const ScholarshipDetail = () =>
   import("@/modules/15_development/components/scholarship/DetailView.vue");
 // const historyAdd = () =>
 //   import("@/modules/15_development/components/history/AddPage.vue");
+const StrategicView = () =>
+  import("@/modules/15_development/views/Strategic.vue");
 export default [
   {
     path: "/development",
@@ -136,4 +142,15 @@ export default [
       Role: "development",
     },
   },
+
+  {
+    path: "/development/strategic",
+    name: "developmentStrategic",
+    component: StrategicView,
+    meta: {
+      Auth: true,
+      Key: [1.6],
+      Role: "development",
+    },
+  },
 ];
diff --git a/src/modules/15_development/views/Strategic.vue b/src/modules/15_development/views/Strategic.vue
new file mode 100644
index 000000000..8b92734c9
--- /dev/null
+++ b/src/modules/15_development/views/Strategic.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+
+const nodes = ref<any>([
+  {
+    orgTreeName: " แผนพัฒนากรุงเทพมหานคร ระยะ 20 ปี ระยะที่ 3",
+    children: [
+      {
+        orgTreeName: "ยุทธศาสตร์ที่ 1",
+        children: [
+          {
+            orgTreeName: "ยุทธศาสตร์ที่ 2",
+            children: [
+              {
+                orgTreeName: "ยุทธศาสตร์ที่ 3",
+                children: [
+                  {
+                    orgTreeName: "ยุทธศาสตร์ที่ 4",
+                    children: [{ orgTreeName: "ยุทธศาสตร์ที่ 2" }],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        orgTreeName: "ยุทธศาสตร์ที่ 1",
+        children: [
+          {
+            orgTreeName: "ยุทธศาสตร์ที่ 2",
+            children: [
+              {
+                orgTreeName: "ยุทธศาสตร์ที่ 3",
+                children: [
+                  {
+                    orgTreeName: "ยุทธศาสตร์ที่ 4",
+                    children: [{ orgTreeName: "ยุทธศาสตร์ที่ 2" }],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    orgTreeName: " แผนพัฒนากรุงเทพมหานคร ระยะ 20 ปี ระยะที่ 2",
+    children: [
+      {
+        orgTreeName: "ยุทธศาสตร์ที่ 1",
+        children: [{ orgTreeName: "ยุทธศาสตร์ที่ 2" }],
+      },
+    ],
+  },
+]);
+const filter = ref<string>("");
+const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
+const noData = ref<string>("ไม่มีข้อมูล");
+const expanded = ref<Array<any>>([]);
+const nodeId = ref<string>("");
+
+function updateSelected(data: any) {
+  console.log(data);
+  nodeId.value = data.orgTreeName;
+}
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">ยุทธศาสตร์</div>
+  <q-card flat bordered class="q-pa-md">
+    <div class="row q-col-gutter-sm q-pl-sm">
+      <q-toolbar class="text-primary">
+        <q-btn dense flat round color="primary" icon="add">
+          <q-tooltip>เพิ่มยุทธศาสตร์</q-tooltip>
+        </q-btn>
+
+        <q-input dense outlined v-model="filter" label="ค้นหา">
+          <template v-slot:append>
+            <q-icon
+              v-if="filter !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="filter = ''"
+            />
+            <q-icon v-else name="search" color="grey-5" />
+          </template>
+        </q-input>
+      </q-toolbar>
+    </div>
+    <q-tree
+      class="q-pa-sm q-gutter-sm"
+      dense
+      :nodes="nodes"
+      node-key="orgTreeName"
+      label-key="orgTreeName"
+      :filter="filter"
+      :no-results-label="notFound"
+      :no-nodes-label="noData"
+      v-model:expanded="expanded"
+    >
+      <template v-slot:default-header="prop">
+        <q-item
+          clickable
+          :active="nodeId == prop.node.orgTreeName"
+          @click.stop="updateSelected(prop.node)"
+          active-class="my-list-link text-primary text-weight-medium"
+          class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+        >
+          <div>
+            <div class="text-weight-medium">
+              {{ prop.node.orgTreeName }}
+            </div>
+          </div>
+        </q-item>
+      </template>
+    </q-tree>
+  </q-card>
+</template>
+
+<style scoped></style>