diff --git a/src/api/15_development/api.development.ts b/src/api/15_development/api.development.ts
index af9adb121..44567255a 100644
--- a/src/api/15_development/api.development.ts
+++ b/src/api/15_development/api.development.ts
@@ -9,4 +9,6 @@ export default {
   developmentHistoryList: (type:string) => `${development}/history/${type}/`,
   developmentHistoryAdd: (type:string) => `${development}/history/${type}`,
   developmentProjectSearch: () => `${development}/main/search`,
+  /** รายการโครงการ*/
+  developmentMain: `${development}/main`,
 };
diff --git a/src/modules/04_registry/components/TableProfile.vue b/src/modules/04_registry/components/TableProfile.vue
index 3b689d0b8..89485a106 100644
--- a/src/modules/04_registry/components/TableProfile.vue
+++ b/src/modules/04_registry/components/TableProfile.vue
@@ -14,8 +14,8 @@
     :pagination-label="paginationLabel"
     v-model:pagination="pagination"
   >
-  <template v-slot:pagination="scope">
-    ทั้งหมด {{ props.total }} รายการ
+    <template v-slot:pagination="scope">
+      ทั้งหมด {{ props.total }} รายการ
       <q-pagination
         v-model="currentPage"
         active-color="primary"
@@ -24,7 +24,8 @@
         size="sm"
         boundary-links
         direction-links
-        ></q-pagination>
+        :max-pages="5"
+      ></q-pagination>
     </template>
 
     <template v-slot:top="props">
@@ -450,7 +451,7 @@
   <PopupADdEmployee v-model:modal="modalEmployee" />
 </template>
 <script setup lang="ts">
-import { ref, useAttrs, reactive,watch } from "vue";
+import { ref, useAttrs, reactive, watch } from "vue";
 import type { Pagination } from "@/modules/04_registry/interface/index/Main";
 import type { DataOption } from "@/modules/04_registry/components/profileType";
 import PopupHistory from "./PopupHistory.vue";
@@ -461,7 +462,6 @@ const maxPage = ref<number>(1);
 const page = ref<number>(1);
 const rowsPerPage = ref<number>(50);
 
-
 const attrs = ref<any>(useAttrs());
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
@@ -470,7 +470,7 @@ const searchPanel = ref<boolean>(true);
 /**
  *pagination ของตาราง
  */
- const pagination = ref({
+const pagination = ref({
   descending: false,
   page: page.value,
   rowsPerPage: rowsPerPage.value,
@@ -681,11 +681,14 @@ watch(
   }
 );
 
-watch(()=>props.page,()=>{
-  if(props.page){
-    currentPage.value = props.page
+watch(
+  () => props.page,
+  () => {
+    if (props.page) {
+      currentPage.value = props.page;
+    }
   }
-})
+);
 </script>
 <style lang="scss">
 .icon-color {
diff --git a/src/modules/04_registryNew/components/TableView.vue b/src/modules/04_registryNew/components/TableView.vue
index e2383e665..e362344f2 100644
--- a/src/modules/04_registryNew/components/TableView.vue
+++ b/src/modules/04_registryNew/components/TableView.vue
@@ -22,6 +22,7 @@ const props = defineProps({
   rows: { type: Array },
   fetchData: { type: Function },
   fetchType: { type: Function },
+  total: { type: Number },
 });
 
 const columns = ref<QTableProps["columns"]>([
@@ -74,7 +75,7 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "สายงาน",
     sortable: true,
-    field: (v) => (v.posType ? v.posType.posTypeName : "-"),
+    field: "posType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -85,7 +86,7 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "ระดับตำแหน่ง",
     sortable: true,
-    field: (v) => (v.posLevel ? v.posLevel.posLevelName : "-"),
+    field: "posLevel",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -282,12 +283,8 @@ watch(
       </q-tr>
     </template>
     <template v-slot:body="props" v-if="store.mode === 'table'">
-      <q-tr :props="props" class="cursor-pointer">
-        <q-td
-          v-for="col in props.cols"
-          :key="col.id"
-          @click="onClickViewDetail(props.row.id)"
-        >
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.id">
           <div v-if="col.name === 'no'">
             {{
               (formFilter.page - 1) * formFilter.pageSize + props.rowIndex + 1
@@ -311,7 +308,11 @@ watch(
                   </q-avatar>
                 </q-item-section>
                 <q-item-section>
-                  <div class="text-weight-medium">
+                  <div
+                    class="text-weight-medium text-primary cursor-pointer"
+                    @click="onClickViewDetail(props.row.id)"
+                  >
+                    <q-tooltip>ดูทะเบียนประวัติ</q-tooltip>
                     {{
                       `${props.row.prefix}${props.row.firstName} ${props.row.lastName}`
                     }}
@@ -329,18 +330,13 @@ watch(
     </template>
     <template v-slot:item="props" v-else>
       <div class="col-xs-12 col-sm-4 col-md-3">
-        <q-card
-          flat
-          bordered
-          class="cardRO"
-          @click="onClickViewDetail(props.row.id)"
-        >
+        <q-card flat bordered class="">
           <q-card-section class="text-center q-pb-none">
             <q-avatar size="80px">
               <img src="@/assets/avatar_user.jpg" />
             </q-avatar>
 
-            <div class="text-weight-medium q-mt-md textName">
+            <div class="text-weight-medium q-mt-md">
               {{
                 `${props.row.prefix}${props.row.firstName} ${props.row.lastName}`
               }}
@@ -384,7 +380,7 @@ watch(
                   <q-item-section>
                     <q-item-label caption class="text-black">
                       {{
-                        props.row.posType ? props.row.posType.posTypeName : "-"
+                        props.row.posType ? props.row.posType : "-"
                       }}</q-item-label
                     >
                   </q-item-section>
@@ -397,9 +393,7 @@ watch(
                   <q-item-section>
                     <q-item-label caption class="text-black">
                       {{
-                        props.row.posLevel
-                          ? props.row.posLevel.posLevelName
-                          : "-"
+                        props.row.posLevel ? props.row.posLevel : "-"
                       }}</q-item-label
                     >
                   </q-item-section>
@@ -407,18 +401,19 @@ watch(
               </q-list>
             </q-card>
           </q-card-section>
-          <!-- <q-separator inset />
+          <q-separator inset />
           <q-btn
             flat
             color="black"
             label="ดูเพิ่มเติม"
             class="hover-button full-width q-pa-md"
             @click="onClickViewDetail(props.row.id)"
-          /> -->
+          />
         </q-card>
       </div>
     </template>
     <template v-slot:pagination="scope">
+      ทั้งหมด {{ props.total }} รายการ
       <q-pagination
         v-model="formFilter.page"
         active-color="primary"
diff --git a/src/modules/04_registryNew/views/list.vue b/src/modules/04_registryNew/views/list.vue
index b155cd921..02ba0a9f3 100644
--- a/src/modules/04_registryNew/views/list.vue
+++ b/src/modules/04_registryNew/views/list.vue
@@ -109,6 +109,7 @@ function fetchYearOption() {
   }
 }
 
+const total = ref<number>(0);
 async function fetchDataPerson(search: boolean = false) {
   showLoader();
 
@@ -150,6 +151,7 @@ async function fetchDataPerson(search: boolean = false) {
     .then((res) => {
       maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
       dataPersonMain.value = res.data.result.data;
+      total.value = res.data.result.total;
     })
     .catch((err) => {
       messageError($q, err);
@@ -603,6 +605,7 @@ onMounted(async () => {
         v-model:maxPage="maxPage"
         :fetchData="fetchDataPerson"
         :fetchType="fetchType"
+        :total="total"
       />
     </q-card-section>
   </q-card>
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/TableTypeOther.vue b/src/modules/13_salary/components/SalaryEmployeeLists/TableTypeOther.vue
index cd5d0de87..c8dac4995 100644
--- a/src/modules/13_salary/components/SalaryEmployeeLists/TableTypeOther.vue
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/TableTypeOther.vue
@@ -94,6 +94,27 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "group",
+    align: "left",
+    label: "ผังค่าจ้าง(เดิม)",
+    sortable: false,
+    field: "group",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return val ? "กลุ่ม" + val : "-";
+    },
+  },
+  {
+    name: "salaryLevel",
+    align: "left",
+    label: "ขั้น(เดิม)",
+    sortable: false,
+    field: "salaryLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
   {
     name: "amount",
     align: "left",
@@ -140,6 +161,8 @@ const visibleColumns = ref<string[]>([
   "position",
   "posType",
   "posLevel",
+  "group",
+  "salaryLevel",
   "amount",
   "amountUse",
   "positionSalaryAmount",
@@ -283,7 +306,7 @@ watch(
         store.roundMainCode === 'OCT'
           ? columns
           : columns
-          ? columns.slice(0, 10)
+          ? columns.slice(0, 11)
           : []
       "
       option-value="name"
@@ -299,7 +322,7 @@ watch(
       store.roundMainCode === 'OCT'
         ? columns
         : columns
-        ? columns.slice(0, 10)
+        ? columns.slice(0, 11)
         : []
     "
     :rows="props.rows"
@@ -382,16 +405,12 @@ watch(
             }}
           </div>
 
-          <div
-            v-else-if="
-              col.name === 'isRetired' && store.roundMainCode === 'OCT'
-            "
-          >
+          <div v-else-if="col.name === 'isRetired'">
             <q-icon
               name="check"
               color="primary"
               size="24px"
-              v-if="props.row.isRetired"
+              v-if="props.row.isRetired && store.roundMainCode === 'OCT'"
             />
           </div>
 
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/TableTypePending.vue b/src/modules/13_salary/components/SalaryEmployeeLists/TableTypePending.vue
index 3828cd401..fcc0ea9a9 100644
--- a/src/modules/13_salary/components/SalaryEmployeeLists/TableTypePending.vue
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/TableTypePending.vue
@@ -89,6 +89,27 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "group",
+    align: "left",
+    label: "ผังค่าจ้าง(เดิม)",
+    sortable: false,
+    field: "group",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return val ? "กลุ่ม" + val : "-";
+    },
+  },
+  {
+    name: "salaryLevel",
+    align: "left",
+    label: "ขั้น(เดิม)",
+    sortable: false,
+    field: "salaryLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
   {
     name: "amount",
     align: "left",
@@ -176,6 +197,8 @@ const visibleColumns = ref<string[]>([
   "isSuspension",
   "isAbsent",
   "isLeave",
+  "group",
+  "salaryLevel",
 ]);
 
 /** modalDialog*/
diff --git a/src/modules/13_salary/components/SalaryLists/TableTypeOther.vue b/src/modules/13_salary/components/SalaryLists/TableTypeOther.vue
index df1098e0a..63a23d1a9 100644
--- a/src/modules/13_salary/components/SalaryLists/TableTypeOther.vue
+++ b/src/modules/13_salary/components/SalaryLists/TableTypeOther.vue
@@ -392,16 +392,12 @@ watch(
             }}
           </div>
 
-          <div
-            v-else-if="
-              col.name === 'isRetired' && store.roundMainCode === 'OCT'
-            "
-          >
+          <div v-else-if="col.name === 'isRetired'">
             <q-icon
               name="check"
               color="primary"
               size="24px"
-              v-if="props.row.isRetired"
+              v-if="props.row.isRetired && store.roundMainCode === 'OCT'"
             />
           </div>
 
diff --git a/src/modules/15_development/interface/index/Main.ts b/src/modules/15_development/interface/index/Main.ts
index 74059f40b..6d7108e76 100644
--- a/src/modules/15_development/interface/index/Main.ts
+++ b/src/modules/15_development/interface/index/Main.ts
@@ -22,4 +22,18 @@ interface FormFilter {
   isProbation: boolean | null;
 }
 
-export type { DataOption, DataOptionCheckBox,FormFilter };
+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 ,FormFilter};
diff --git a/src/modules/15_development/interface/request/Main.ts b/src/modules/15_development/interface/request/Main.ts
index b8c73e96e..d2cb34abf 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;
 }
 
@@ -94,7 +96,7 @@ interface FormAddHistoryProject {
 }
 
 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>