diff --git a/src/api/13_salary/api.salary.ts b/src/api/13_salary/api.salary.ts
index f835154f9..9af69c3c1 100644
--- a/src/api/13_salary/api.salary.ts
+++ b/src/api/13_salary/api.salary.ts
@@ -26,4 +26,6 @@ export default {
   salaryListPeriodQuota: (id: string) => `${salaryPeriod}/quota/${id}`,
   salaryListPeriodORG: (id: string) => `${salaryPeriod}/org/${id}`,
   salaryListPeriodProfileById: (id: string) => `${salaryPeriod}/profile/${id}`,
+  salaryListPerson: `${env.API_URI}/org/profile/salary/gen`,
+  salaryPeriodProfile: `${salary}/period/org/profile`,
 };
diff --git a/src/modules/13_salary/components/SalaryLists/DialogAddPerson.vue b/src/modules/13_salary/components/SalaryLists/DialogAddPerson.vue
new file mode 100644
index 000000000..5475beac9
--- /dev/null
+++ b/src/modules/13_salary/components/SalaryLists/DialogAddPerson.vue
@@ -0,0 +1,303 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
+import type { DataFilterPerson } from "@/modules/13_salary/interface/index/SalaryList";
+import type { DataPersonReq } from "@/modules/13_salary/interface/request/SalaryList";
+import type { DataPerson } from "@/modules/13_salary/interface/response/SalaryList";
+
+import Header from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
+
+const store = useSalaryListSDataStore();
+
+const $q = useQuasar();
+const {
+  date2Thai,
+  dialogRemove,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  success,
+} = useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+
+const props = defineProps({
+  fetchData: {
+    type: Function,
+  },
+});
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    field: "fullName",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posType",
+    align: "left",
+    label: "ประเภทตำเเหน่ง",
+    sortable: false,
+    field: "posType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevel",
+    align: "left",
+    label: "ระดับตำเเหน่ง",
+    sortable: false,
+    field: "posLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const rows = ref<DataPerson[]>([]);
+
+const formFilter = reactive<DataFilterPerson>({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+});
+const maxPage = ref<number>(1);
+
+function closeModal() {
+  modal.value = false;
+}
+
+async function fetchListPerson() {
+  showLoader();
+  await http
+    .post(config.API.salaryListPerson, formFilter)
+    .then((res) => {
+      const data = res.data.result.data;
+      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
+      rows.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+      closeModal();
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function onClickAddPerson(data: DataPerson) {
+  const body: DataPersonReq = {
+    id: store.groupId,
+    type: store.tabType,
+    ...data,
+  };
+
+  dialogConfirm(
+    $q,
+    async () => {
+      await http
+        .post(config.API.salaryPeriodProfile, body)
+        .then(() => {
+          props.fetchData?.();
+          success($q, "เพื่มรายชื่อสำเร็จ");
+          closeModal();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการเพิ่มรายชื่อ",
+    "ต้องการยืนยันการเพิ่มรายชื่อนี้ใช่หรือไม่?"
+  );
+}
+
+async function updatePagePagination() {
+  fetchListPerson();
+}
+
+function updatePageSizePagination(newPagination: NewPagination) {
+  console.log("teset");
+
+  formFilter.page = 1;
+  formFilter.pageSize = newPagination.rowsPerPage;
+}
+
+function searchData() {
+  formFilter.page = 1;
+  fetchListPerson();
+}
+
+watch(
+  () => modal.value,
+  async () => {
+    if (modal.value) {
+      await fetchListPerson();
+    }
+  }
+);
+
+watch(
+  () => formFilter.pageSize,
+  () => {
+    updatePagePagination();
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="max-width: 100vw">
+      <Header :tittle="'เพิ่มคนเลื่อนเงินเดือน'" :close="closeModal" />
+      <q-separator />
+
+      <q-card-section class="scroll" style="max-height: 70vh">
+        <div class="row q-col-gutter-sm">
+          <div class="col-12">
+            <q-input
+              borderless
+              dense
+              debounce="300"
+              outlined
+              placeholder="ค้นหา"
+              v-model="formFilter.keyword"
+              @keydown.enter.prevent="searchData"
+            >
+              <template v-slot:append>
+                <q-icon name="search" />
+              </template>
+            </q-input>
+          </div>
+          <div class="col-12">
+            <d-table
+              ref="table"
+              :columns="columns"
+              :rows="rows"
+              row-key="id"
+              flat
+              bordered
+              :paging="true"
+              dense
+              :rows-per-page-options="[10, 25, 50, 100]"
+              @update:pagination="updatePageSizePagination"
+            >
+              <template v-slot:header="props">
+                <q-tr :props="props">
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <span class="text-weight-medium">{{ col.label }}</span>
+                  </q-th>
+                  <q-th auto-width></q-th>
+                </q-tr>
+              </template>
+              <template v-slot:body="props">
+                <q-tr :props="props" class="cursor-pointer">
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <div v-if="col.name === 'no'">
+                      {{
+                        (formFilter.page - 1) * formFilter.pageSize +
+                        props.rowIndex +
+                        1
+                      }}
+                    </div>
+                    <div v-else-if="col.name === 'fullName'">
+                      {{
+                        `${props.row.prefix}${props.row.firstName}  ${props.row.lastName}`
+                      }}
+                    </div>
+                    <div v-else>
+                      {{ col.value ? col.value : "-" }}
+                    </div>
+                  </q-td>
+                  <q-td>
+                    <q-btn
+                      outline
+                      color="primary"
+                      label="เพิ่ม"
+                      @click="onClickAddPerson(props.row)"
+                    />
+                  </q-td>
+                </q-tr>
+              </template>
+              <template v-slot:pagination="scope">
+                <q-pagination
+                  v-model="formFilter.page"
+                  active-color="primary"
+                  color="dark"
+                  :max="Number(maxPage)"
+                  :max-pages="5"
+                  size="sm"
+                  boundary-links
+                  direction-links
+                  @update:model-value="updatePagePagination()"
+                ></q-pagination>
+              </template>
+            </d-table>
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          type="submit"
+          unelevated
+          dense
+          class="q-px-md items-center"
+          color="light-blue-10"
+          label="บันทึก"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/13_salary/components/SalaryLists/TabMain.vue b/src/modules/13_salary/components/SalaryLists/TabMain.vue
index d21ade94e..895bc4c80 100644
--- a/src/modules/13_salary/components/SalaryLists/TabMain.vue
+++ b/src/modules/13_salary/components/SalaryLists/TabMain.vue
@@ -136,7 +136,6 @@ async function fetchDataPeriod(id: string) {
     .then((res) => {
       rows.value = res.data.result.data;
       maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
-      // maxPage.value = 10;
     })
     .catch((err) => {
       messageError($q, err);
@@ -278,28 +277,28 @@ onMounted(async () => {
                   :rows="rows"
                   v-model:maxPage="maxPage"
                   v-model:formFilter="formFilter"
-                  :updatePagination="updatePagination"
+                  :fetchDataTable="updatePagination"
                 />
                 <TableTabType2
                   v-if="index + 1 === 2"
                   :rows="rows"
                   v-model:maxPage="maxPage"
                   v-model:formFilter="formFilter"
-                  :updatePagination="updatePagination"
+                  :fetchDataTable="updatePagination"
                 />
                 <TableTabType2
                   v-if="index + 1 === 3"
                   :rows="rows"
                   v-model:maxPage="maxPage"
                   v-model:formFilter="formFilter"
-                  :updatePagination="updatePagination"
+                  :fetchDataTable="updatePagination"
                 />
                 <TableTabType2
                   v-if="index + 1 === 4"
                   :rows="rows"
                   v-model:maxPage="maxPage"
                   v-model:formFilter="formFilter"
-                  :updatePagination="updatePagination"
+                  :fetchDataTable="updatePagination"
                 />
               </q-tab-panel>
             </q-tab-panels>
diff --git a/src/modules/13_salary/components/SalaryLists/TableTypeOther.vue b/src/modules/13_salary/components/SalaryLists/TableTypeOther.vue
index 7716dae31..f944d8da0 100644
--- a/src/modules/13_salary/components/SalaryLists/TableTypeOther.vue
+++ b/src/modules/13_salary/components/SalaryLists/TableTypeOther.vue
@@ -13,6 +13,7 @@ import type {
 import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
 
 /** importComponents*/
+import DialogAddPerson from "@/modules/13_salary/components/SalaryLists//DialogAddPerson.vue";
 import DialogFormEdit from "@/modules/13_salary/components/SalaryLists/DialogFormEdit.vue";
 import DialogMoveGroup from "@/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue";
 import DialogMoveLevel from "@/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue";
@@ -36,7 +37,7 @@ const formFilter = defineModel<DataFilter>("formFilter", { required: true });
 const maxPage = defineModel<Number>("maxPage", { required: true });
 const props = defineProps({
   rows: { type: Array },
-  updatePagination: {
+  fetchDataTable: {
     type: Function,
   },
 });
@@ -70,11 +71,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "posPath",
+    name: "position",
     align: "left",
     label: "ตำแหน่งในสายงาน",
     sortable: true,
-    field: "posPath",
+    field: "position",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -119,7 +120,7 @@ const visibleColumns = ref<string[]>([
   "no",
   "posNo",
   "fullName",
-  "posPath",
+  "position",
   "posLevel",
   "posExecutive",
   "amount",
@@ -127,10 +128,15 @@ const visibleColumns = ref<string[]>([
 ]);
 
 /** modal*/
+const modalDialogAddPerson = ref<boolean>(false);
 const modalDialogForm = ref<boolean>(false);
 const modalDialogMoveGroup = ref<boolean>(false);
 const modalDialogMoveLeve = ref<boolean>(false);
 
+function onClickAddPerson() {
+  modalDialogAddPerson.value = !modalDialogAddPerson.value;
+}
+
 const profileId = ref<string>("");
 const amount = ref<number>(0);
 function onClickEdit(id: string, amountSalary: number) {
@@ -156,7 +162,7 @@ function onClickDelete(id: string) {
       .delete(config.API.salaryListPeriodProfileById(id))
       .then(() => {
         success($q, "ลบข้อมูลสำเร็จ");
-        props.updatePagination?.();
+        props.fetchDataTable?.();
       })
       .catch((err) => {
         messageError($q, err);
@@ -168,7 +174,7 @@ function onClickDelete(id: string) {
 }
 
 function updatePagePagination() {
-  props.updatePagination?.();
+  props.fetchDataTable?.();
 }
 
 function updatePageSizePagination(newPagination: NewPagination) {
@@ -178,7 +184,7 @@ function updatePageSizePagination(newPagination: NewPagination) {
 
 function searchData() {
   formFilter.value.page = 1;
-  props.updatePagination?.();
+  props.fetchDataTable?.();
 }
 watch(
   () => formFilter.value.pageSize,
@@ -189,7 +195,7 @@ watch(
 </script>
 <template>
   <q-toolbar class="text-primary" style="padding: 0px">
-    <q-btn flat round dense icon="add">
+    <q-btn flat round dense icon="add" @click="onClickAddPerson">
       <q-tooltip>เพิ่ม </q-tooltip>
     </q-btn>
     <q-space />
@@ -249,7 +255,9 @@ watch(
       <q-tr :props="props" class="cursor-pointer">
         <q-td v-for="col in props.cols" :key="col.name" :props="props">
           <div v-if="col.name === 'no'">
-            {{ props.rowIndex + 1 }}
+            {{
+              (formFilter.page - 1) * formFilter.pageSize + props.rowIndex + 1
+            }}
           </div>
           <div v-else-if="col.name === 'posNo'">
             {{ `${props.row.orgShortName}${props.row.posMasterNo}` }}
@@ -328,22 +336,27 @@ watch(
     ></q-pagination>
   </d-table>
 
+  <DialogAddPerson
+    v-model:modal="modalDialogAddPerson"
+    :fetchData="props.fetchDataTable"
+  />
+
   <DialogFormEdit
     v-model:modal="modalDialogForm"
     v-model:profileId="profileId"
     v-model:amount="amount"
-    :fetchData="props.updatePagination"
+    :fetchData="props.fetchDataTable"
   />
   <DialogMoveGroup
     v-model:modal="modalDialogMoveGroup"
     v-model:profileId="profileId"
     :group="store.tabGroup === 'group1' ? 'กลุ่ม1' : 'กลุ่ม2'"
-    :fetchData="props.updatePagination"
+    :fetchData="props.fetchDataTable"
   />
   <DialogMoveLevel
     v-model:modal="modalDialogMoveLeve"
     v-model:profileId="profileId"
-    :fetchData="props.updatePagination"
+    :fetchData="props.fetchDataTable"
     :type="store.tabType"
   />
 </template>
diff --git a/src/modules/13_salary/components/SalaryLists/TableTypePending.vue b/src/modules/13_salary/components/SalaryLists/TableTypePending.vue
index 4081d582e..34832561c 100644
--- a/src/modules/13_salary/components/SalaryLists/TableTypePending.vue
+++ b/src/modules/13_salary/components/SalaryLists/TableTypePending.vue
@@ -8,6 +8,7 @@ import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
 import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
 
 /** importComponents*/
+import DialogAddPerson from "@/modules/13_salary/components/SalaryLists//DialogAddPerson.vue";
 import DialogFormEdit from "@/modules/13_salary/components/SalaryLists/DialogFormEdit.vue";
 import DialogMoveGroup from "@/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue";
 import DialogMoveLevel from "@/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue";
@@ -127,7 +128,7 @@ const formFilter = defineModel<DataFilter>("formFilter", { required: true });
 const maxPage = defineModel<Number>("maxPage", { required: true });
 const props = defineProps({
   rows: { type: Array },
-  updatePagination: {
+  fetchDataTable: {
     type: Function,
   },
   maxPage: {
@@ -136,6 +137,7 @@ const props = defineProps({
 });
 
 /** modal*/
+const modalDialogAddPerson = ref<boolean>(false);
 const modalDialogForm = ref<boolean>(false);
 const modalDialogMoveGroup = ref<boolean>(false);
 const modalDialogMoveLeve = ref<boolean>(false);
@@ -148,6 +150,9 @@ function onClickDelete() {
     success($q, "ลบข้อมูลสำเร็จ");
   });
 }
+function onClickAddPerson() {
+  modalDialogAddPerson.value = !modalDialogAddPerson.value;
+}
 
 function onClickEdit(id: string, amountSalary: number) {
   profileId.value = id;
@@ -166,7 +171,7 @@ function onClickMoveLevel(id: string) {
 }
 
 function updatePagePagination() {
-  props.updatePagination?.();
+  props.fetchDataTable?.();
 }
 
 function updatePageSizePagination(newPagination: NewPagination) {
@@ -176,7 +181,7 @@ function updatePageSizePagination(newPagination: NewPagination) {
 
 function searchData() {
   formFilter.value.page = 1;
-  props.updatePagination?.();
+  props.fetchDataTable?.();
 }
 watch(
   () => formFilter.value.pageSize,
@@ -187,7 +192,7 @@ watch(
 </script>
 <template>
   <q-toolbar class="text-primary" style="padding: 0px">
-    <q-btn flat round dense icon="add">
+    <q-btn flat round dense icon="add" @click="onClickAddPerson">
       <q-tooltip>เพิ่ม </q-tooltip>
     </q-btn>
     <q-space />
@@ -246,7 +251,9 @@ watch(
       <q-tr :props="props" class="cursor-pointer">
         <q-td v-for="col in props.cols" :key="col.name" :props="props">
           <div v-if="col.name === 'no'">
-            {{ props.rowIndex + 1 }}
+            {{
+              (formFilter.page - 1) * formFilter.pageSize + props.rowIndex + 1
+            }}
           </div>
           <div v-else-if="col.name === 'fullName'">
             {{
@@ -378,22 +385,27 @@ watch(
     </template>
   </d-table>
 
+  <DialogAddPerson
+    v-model:modal="modalDialogAddPerson"
+    :fetchData="props.fetchDataTable"
+  />
+
   <DialogFormEdit
     v-model:modal="modalDialogForm"
     v-model:profileId="profileId"
     v-model:amount="amount"
-    :fetchData="props.updatePagination"
+    :fetchData="props.fetchDataTable"
   />
   <DialogMoveGroup
     v-model:modal="modalDialogMoveGroup"
     v-model:profileId="profileId"
     :group="store.tabGroup === 'group1' ? 'กลุ่ม1' : 'กลุ่ม2'"
-    :fetchData="props.updatePagination"
+    :fetchData="props.fetchDataTable"
   />
   <DialogMoveLevel
     v-model:modal="modalDialogMoveLeve"
     v-model:profileId="profileId"
-    :fetchData="props.updatePagination"
+    :fetchData="props.fetchDataTable"
   />
 </template>
 
diff --git a/src/modules/13_salary/interface/index/SalaryList.ts b/src/modules/13_salary/interface/index/SalaryList.ts
index 0f8d7fa16..4a2767dfd 100644
--- a/src/modules/13_salary/interface/index/SalaryList.ts
+++ b/src/modules/13_salary/interface/index/SalaryList.ts
@@ -5,4 +5,10 @@ interface DataFilter {
   type: string;
 }
 
-export type { DataFilter };
+interface DataFilterPerson {
+  page: number;
+  pageSize: number;
+  keyword: string;
+}
+
+export type { DataFilter, DataFilterPerson };
diff --git a/src/modules/13_salary/interface/request/SalaryList.ts b/src/modules/13_salary/interface/request/SalaryList.ts
new file mode 100644
index 000000000..11938e9a5
--- /dev/null
+++ b/src/modules/13_salary/interface/request/SalaryList.ts
@@ -0,0 +1,33 @@
+interface DataPersonReq {
+  id: string;
+  type: string;
+  amount: number;
+  child1: string;
+  child1Id: string;
+  child2: string;
+  child2Id: string;
+  child3: string | null;
+  child3Id: string | null;
+  child4: string | null;
+  child4Id: string | null;
+  citizenId: string;
+  firstName: string;
+  isDuration: boolean;
+  isPunish: boolean;
+  isResult: boolean;
+  isRetired: boolean;
+  isRetired2: boolean;
+  lastName: string;
+  orgShortName: string;
+  posExecutive: string | null;
+  posLevel: string;
+  posMasterNo: number;
+  posMasterNoPrefix: string;
+  posMasterNoSuffix: string;
+  posType: string;
+  position: string;
+  prefix: string;
+  root: string;
+  rootId: string;
+}
+export type { DataPersonReq };
diff --git a/src/modules/13_salary/interface/response/SalaryList.ts b/src/modules/13_salary/interface/response/SalaryList.ts
index 4f9848b6f..a5c431246 100644
--- a/src/modules/13_salary/interface/response/SalaryList.ts
+++ b/src/modules/13_salary/interface/response/SalaryList.ts
@@ -11,4 +11,35 @@ interface DataPeriodQuota {
   chosen: number; //เลือกไปแล้ว
   remaining: number; //คงเหลือโควตาnumber
 }
-export type { DataPeriodLatest, DataPeriodQuota };
+
+interface DataPerson {
+  amount: number;
+  child1: string;
+  child1Id: string;
+  child2: string;
+  child2Id: string;
+  child3: string | null;
+  child3Id: string | null;
+  child4: string | null;
+  child4Id: string | null;
+  citizenId: string;
+  firstName: string;
+  isDuration: boolean;
+  isPunish: boolean;
+  isResult: boolean;
+  isRetired: boolean;
+  isRetired2: boolean;
+  lastName: string;
+  orgShortName: string;
+  posExecutive: string | null;
+  posLevel: string;
+  posMasterNo: number;
+  posMasterNoPrefix: string;
+  posMasterNoSuffix: string;
+  posType: string;
+  position: string;
+  prefix: string;
+  root: string;
+  rootId: string;
+}
+export type { DataPeriodLatest, DataPeriodQuota, DataPerson };