diff --git a/src/api/15_development/api.development.ts b/src/api/15_development/api.development.ts
index da7c97e9e..619a66198 100644
--- a/src/api/15_development/api.development.ts
+++ b/src/api/15_development/api.development.ts
@@ -2,5 +2,6 @@ import env from "../index";
 const development = `${env.API_URI}/development`;
 
 export default {
-  development,
+  /** รายการโครงการ*/
+  developmentMain: `${development}/main`,
 };
diff --git a/src/modules/15_development/interface/index/Main.ts b/src/modules/15_development/interface/index/Main.ts
index 9eb2758ed..b94f36dfa 100644
--- a/src/modules/15_development/interface/index/Main.ts
+++ b/src/modules/15_development/interface/index/Main.ts
@@ -8,4 +8,18 @@ interface DataOptionCheckBox {
   value: string;
 }
 
-export type { DataOption, DataOptionCheckBox };
+interface ItemsMenu {
+  label: string;
+  value: string;
+  icon: string;
+  color: string;
+}
+
+interface NewPagination {
+  descending: boolean;
+  page: number;
+  rowsPerPage: number;
+  sortBy: string;
+}
+
+export type { DataOption, DataOptionCheckBox, ItemsMenu, NewPagination };
diff --git a/src/modules/15_development/interface/request/Main.ts b/src/modules/15_development/interface/request/Main.ts
index fcc87379e..f2b500b0b 100644
--- a/src/modules/15_development/interface/request/Main.ts
+++ b/src/modules/15_development/interface/request/Main.ts
@@ -1,5 +1,7 @@
-interface FormQueryProject {
+interface FormQueryListProject {
   year: number;
+  page: number;
+  pageSize: number;
   keyword: string;
 }
 
@@ -45,47 +47,47 @@ interface FormFollowOther {
   address: string;
   province: string;
   budget: string;
-  accept: number|null;
-  receive: number|null;
-  approved: number|null;
-  budgetPay: number|null;
-  issues:string
-  chance:string
-  effects:string
-  riskLevel:string
-  riskManagement:string
-  benefits:string
-  topicsIssues:string
-  trainingStudy:string
+  accept: number | null;
+  receive: number | null;
+  approved: number | null;
+  budgetPay: number | null;
+  issues: string;
+  chance: string;
+  effects: string;
+  riskLevel: string;
+  riskManagement: string;
+  benefits: string;
+  topicsIssues: string;
+  trainingStudy: string;
 }
 
-interface FormAddHistory{
-  citizenId:string
-  name:string
-  position:string
-  type:string
-  level:string
-  positionSide:string
-  oc:string
+interface FormAddHistory {
+  citizenId: string;
+  name: string;
+  position: string;
+  type: string;
+  level: string;
+  positionSide: string;
+  oc: string;
   [key: string]: any;
 }
 
-interface FormAddHistoryProject{
-  project:string
-  year:string
-  trainingStart:string
-  trainingEnd:string
-  totalTraining:string
-  location:string
-  topic:string
-  studyStart:string
-  studyEnd:string
-  organizingTraining:string
+interface FormAddHistoryProject {
+  project: string;
+  year: string;
+  trainingStart: string;
+  trainingEnd: string;
+  totalTraining: string;
+  location: string;
+  topic: string;
+  studyStart: string;
+  studyEnd: string;
+  organizingTraining: string;
   [key: string]: any;
 }
 
 export type {
-  FormQueryProject,
+  FormQueryListProject,
   FormBasicinfo,
   FormGroupTarget,
   FormGroupRelate,
diff --git a/src/modules/15_development/interface/response/Main.ts b/src/modules/15_development/interface/response/Main.ts
index 34f0c3237..192501bd1 100644
--- a/src/modules/15_development/interface/response/Main.ts
+++ b/src/modules/15_development/interface/response/Main.ts
@@ -14,4 +14,10 @@ interface ResLevel {
   posLevelAuthority: string;
 }
 
-export type { ResGroup, ResLevel };
+interface ResListProject {
+  id: string;
+  projectName: string;
+  year: number;
+}
+
+export type { ResGroup, ResLevel, ResListProject };
diff --git a/src/modules/15_development/store/developmentStore.ts b/src/modules/15_development/store/developmentStore.ts
index 3b025bc05..406547c37 100644
--- a/src/modules/15_development/store/developmentStore.ts
+++ b/src/modules/15_development/store/developmentStore.ts
@@ -1,23 +1,16 @@
 import { defineStore } from "pinia";
-import { reactive } from "vue";
-import { ref } from 'vue'
-import type { FormQueryProject } from "@/modules/15_development/interface/request/Main";
+import { ref } from "vue";
+
 import type { QTableProps } from "quasar";
 
 // store
 export const useDevelopmentDataStore = defineStore(
   "developmentDataStore",
   () => {
-    const formFilter = reactive<FormQueryProject>({
-      year: new Date().getFullYear(),
-      keyword: "",
-    });
-
     const visibleColumns = ref<string[]>([]);
     const columns = ref<QTableProps["columns"]>([]);
-    const rows = ref<any[]>([])
+    const rows = ref<any[]>([]);
     return {
-      formFilter,
       visibleColumns,
       columns,
       rows,
diff --git a/src/modules/15_development/views/MainPage.vue b/src/modules/15_development/views/MainPage.vue
index b5daab52a..202f43027 100644
--- a/src/modules/15_development/views/MainPage.vue
+++ b/src/modules/15_development/views/MainPage.vue
@@ -1,20 +1,27 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, reactive, watch } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
 import { useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/**importType*/
+import type {
+  ItemsMenu,
+  NewPagination,
+} from "@/modules/15_development/interface/index/Main";
+import type { FormQueryListProject } from "@/modules/15_development/interface/request/Main";
+import type { ResListProject } from "@/modules/15_development/interface/response/Main";
 
 /** importStore*/
-import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 import { useCounterMixin } from "@/stores/mixin";
 
 /** use*/
-const store = useDevelopmentDataStore();
 const $q = useQuasar();
 const router = useRouter();
-const { showLoader, hideLoader } = useCounterMixin();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
 
 /** หัวตาราง */
-const rows = ref<any>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "year",
@@ -23,16 +30,17 @@ const columns = ref<QTableProps["columns"]>([
     sortable: true,
     field: "year",
     headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
+    style: "font-size: 14px ;width: 10%",
+    format: (val) => val + 543,
   },
   {
-    name: "name",
+    name: "projectName",
     align: "left",
     label: "ชื่อโครงการ/กิจกรรม/หลักสูตร",
     sortable: true,
-    field: "name",
+    field: "projectName",
     headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
+    style: "font-size: 14px;width: 45%",
   },
 
   {
@@ -42,12 +50,13 @@ const columns = ref<QTableProps["columns"]>([
     sortable: true,
     field: "org",
     headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
+    style: "font-size: 14px ;width: 45%",
   },
 ]);
-const visibleColumns = ref<string[]>(["year", "name", "org"]);
+const visibleColumns = ref<string[]>(["year", "projectName", "org"]);
 
-const itemDownload = ref<any>([
+/** เมนูดาวน์โหลด*/
+const itemDownload = ref<ItemsMenu[]>([
   {
     label: "ดาวน์โหลด 1",
     value: "",
@@ -68,32 +77,63 @@ const itemDownload = ref<any>([
   },
 ]);
 
+/** formQuery*/
+const formQuery = reactive<FormQueryListProject>({
+  year: new Date().getFullYear(),
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+});
+const totalList = ref<number>(1); //จำนวนข้อมูลรายการ
+const rows = ref<ResListProject[]>([]); // ข้อมูลรายการ
+
+/** funciton  fetch รายการโครงการ*/
 function fetchListProject() {
   showLoader();
-  const data = [
-    {
-      id: "1",
-      year: 2567,
-      name: "โครงการฝึกอบรมสำนักงานข้าราชการ",
-      org: "สำนักงานข้าราชการ/กองบริหารทั่วไป/กลุ่มงานช่วยนักบริหาร",
-    },
-    {
-      id: "2",
-      year: 2567,
-      name: "โครงการฝึกอบรม",
-      org: "สำนักงานข้าราชการ/กองบริหารทั่วไป/กลุ่มงานช่วยนักบริหาร",
-    },
-  ];
-  rows.value = data;
-  setTimeout(() => {
-    hideLoader();
-  }, 500);
+  http
+    .get(
+      config.API.developmentMain +
+        `?page=${formQuery.page}&pageSize=${formQuery.pageSize}&keyword=${formQuery.keyword}&year=${formQuery.year}`
+    )
+    .then((res) => {
+      const data = res.data.result.data;
+      totalList.value = Math.ceil(res.data.result.total / formQuery.pageSize);
+      rows.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
+/**
+ *  funciotn redirect to page เพิ่มหริอแก้ไข รายการโครงการ
+ * @param status สถานะแก่ไข
+ * @param id รายการโครงการ
+ */
 function onClickAddOrView(status: boolean = false, id: string = "") {
   status ? router.push(`development/${id}`) : router.push("development/add");
 }
 
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: NewPagination) {
+  formQuery.page = 1;
+  formQuery.pageSize = newPagination.rowsPerPage;
+}
+
+/** callbackFunction ทำเมื่อมีการอัปเดท pageSize*/
+watch(
+  () => formQuery.pageSize,
+  () => {
+    fetchListProject();
+  }
+);
+
 onMounted(() => {
   fetchListProject();
 });
@@ -107,11 +147,12 @@ onMounted(() => {
     <q-toolbar style="padding: 0px">
       <datepicker
         menu-class-name="modalfix"
-        v-model="store.formFilter.year"
+        v-model="formQuery.year"
         :locale="'th'"
         autoApply
         year-picker
         :enableTimePicker="false"
+        @update:model-value="fetchListProject"
       >
         <template #year="{ year }">{{ year + 543 }}</template>
         <template #year-overlay-value="{ value }">{{
@@ -122,7 +163,7 @@ onMounted(() => {
             dense
             lazy-rules
             outlined
-            :model-value="Number(store.formFilter.year) + 543"
+            :model-value="Number(formQuery.year) + 543"
             :label="`${'ปีงบประมาณ'}`"
           >
             <template v-slot:prepend>
@@ -172,19 +213,19 @@ onMounted(() => {
         <q-input
           standout
           dense
-          v-model="store.formFilter.keyword"
+          v-model="formQuery.keyword"
           ref="filterRef"
           outlined
-          debounce="300"
           placeholder="ค้นหา"
+          @keyup.enter="fetchListProject"
         >
           <template v-slot:append>
-            <q-icon v-if="store.formFilter.keyword == ''" name="search" />
+            <q-icon v-if="formQuery.keyword == ''" name="search" />
             <q-icon
-              v-if="store.formFilter.keyword !== ''"
+              v-if="formQuery.keyword !== ''"
               name="clear"
               class="cursor-pointer"
-              @click="store.formFilter.keyword = ''"
+              @click="(formQuery.keyword = ''), fetchListProject()"
             />
           </template>
         </q-input>
@@ -212,12 +253,14 @@ onMounted(() => {
         ref="table"
         :columns="columns"
         :rows="rows"
-        row-key="subject"
+        row-key="id"
         flat
         bordered
         dense
         class="custom-header-table"
+        :rows-per-page-options="[10, 25, 50, 100]"
         :visible-columns="visibleColumns"
+        @update:pagination="updatePagination"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -240,6 +283,19 @@ onMounted(() => {
             </q-td>
           </q-tr>
         </template>
+        <template v-slot:pagination="scope">
+          <q-pagination
+            v-model="formQuery.page"
+            active-color="primary"
+            color="dark"
+            :max="Number(totalList)"
+            size="sm"
+            boundary-links
+            direction-links
+            :max-pages="5"
+            @update:model-value="fetchListProject"
+          ></q-pagination>
+        </template>
       </d-table>
     </div>
   </q-card>