diff --git a/src/api/15_development/api.development.ts b/src/api/15_development/api.development.ts
index 268f06a8d..15a2d7f03 100644
--- a/src/api/15_development/api.development.ts
+++ b/src/api/15_development/api.development.ts
@@ -3,6 +3,7 @@ const development = `${env.API_URI}/development`;
 const developmentOrg = `${env.API_URI}/org`;
 const devScholarship = `${env.API_URI}/development/scholarship`;
 const developmentReport = `${env.API_URI}/development/report`;
+const devStrategy = `${env.API_URI}/development/strategy`;
 export default {
   development,
   /** history */
@@ -32,13 +33,14 @@ export default {
     `${developmentReport}/history-employee`,
   developmentReportScholarship: () => `${developmentReport}/scholarship`,
 
-
-
   // ปิดโครงการ
   developmentMainFinish: (id: string) => `${development}/main/finish/${id}`,
   // ข้อมูล status ของโครงการ
   developmentMainStatus: (id: string) => `${development}/main/status/${id}`,
 
-    /** โครงการ tab ข้อมูลเบื้องต้น */
-    developmentBasicInfoById: (id:string) => `${development}/main/tab1/${id}`
+  /** โครงการ tab ข้อมูลเบื้องต้น */
+  developmentBasicInfoById: (id: string) => `${development}/main/tab1/${id}`,
+
+  /**API ยุทธศาสตร์*/
+  devStrategy,
 };
diff --git a/src/modules/15_development/views/Strategic.vue b/src/modules/15_development/views/Strategic.vue
index f2b84560f..67fe5507d 100644
--- a/src/modules/15_development/views/Strategic.vue
+++ b/src/modules/15_development/views/Strategic.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
-import { ref } from "vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
@@ -32,28 +34,28 @@ const ListMenu = ref<any>([
 ]);
 
 const nodes = ref<any>([
-  {
-    orgTreeName: " แผนพัฒนากรุงเทพมหานคร ระยะ 20 ปี ระยะที่ 3",
-    level: "0",
-    children: [
-      {
-        orgTreeName: "ยุทธศาสตร์ที่ 1",
-        level: "1",
-        children: [
-          {
-            orgTreeName: "ยุทธศาสตร์ที่ 2",
-            level: "2",
-            children: [
-              {
-                orgTreeName: "ยุทธศาสตร์ที่ 3",
-                level: "3",
-              },
-            ],
-          },
-        ],
-      },
-    ],
-  },
+  // {
+  //   orgTreeName: " แผนพัฒนากรุงเทพมหานคร ระยะ 20 ปี ระยะที่ 3",
+  //   level: "0",
+  //   children: [
+  //     {
+  //       orgTreeName: "ยุทธศาสตร์ที่ 1",
+  //       level: "1",
+  //       children: [
+  //         {
+  //           orgTreeName: "ยุทธศาสตร์ที่ 2",
+  //           level: "2",
+  //           children: [
+  //             {
+  //               orgTreeName: "ยุทธศาสตร์ที่ 3",
+  //               level: "3",
+  //             },
+  //           ],
+  //         },
+  //       ],
+  //     },
+  //   ],
+  // },
 ]);
 const filter = ref<string>("");
 const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
@@ -61,6 +63,20 @@ const noData = ref<string>("ไม่มีข้อมูล");
 const expanded = ref<Array<any>>([]);
 const nodeId = ref<string>("");
 
+function fetchDataTree() {
+  showLoader();
+  http
+    .get(config.API.devStrategy)
+    .then((res) => {
+      const data = res.data.result;
+      nodes.value = data;
+    })
+    .catch((err) => {})
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 function updateSelected(data: any) {
   nodeId.value = data.orgTreeName;
 }
@@ -145,6 +161,10 @@ function onSubmit() {
 function onDelete() {
   dialogRemove($q, () => {});
 }
+
+onMounted(() => {
+  fetchDataTree();
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">ยุทธศาสตร์</div>
@@ -179,8 +199,8 @@ function onDelete() {
       class="q-pa-sm q-gutter-sm"
       dense
       :nodes="nodes"
-      node-key="orgTreeName"
-      label-key="orgTreeName"
+      node-key="strategyChild1Name"
+      label-key="strategyChild1Name"
       :filter="filter"
       :no-results-label="notFound"
       :no-nodes-label="noData"
@@ -190,13 +210,13 @@ function onDelete() {
         <q-item
           clickable
           @click.stop
-          :active="nodeId == prop.node.orgTreeName"
+          :active="nodeId == prop.node.strategyChild1Name"
           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 }}
+              {{ prop.node.strategyChild1Name }}
             </div>
           </div>
           <q-btn