diff --git a/src/modules/13_salary/components/SalaryChart/DialogFormMain.vue b/src/modules/13_salary/components/SalaryChart/DialogFormMain.vue
index 46dba945d..3ea058bd8 100644
--- a/src/modules/13_salary/components/SalaryChart/DialogFormMain.vue
+++ b/src/modules/13_salary/components/SalaryChart/DialogFormMain.vue
@@ -371,8 +371,8 @@ async function downloadFile(url: string, type: string, fileName: string) {
       <q-separator />
 
       <q-card-section class="q-pt-none">
-        <div class="row q-gutter-sm q-pa-md">
-          <div class="row col-xs-12 col-md-9 q-col-gutter-sm">
+        <div class="row col-12 q-gutter-sm q-pa-md">
+          <div class="row col-sm-12 col-md-9 q-col-gutter-sm">
             <div class="col-xs-12 col-md-3">
               <q-select
                 ref="salaryTypeRef"
@@ -586,7 +586,8 @@ async function downloadFile(url: string, type: string, fileName: string) {
               />
             </div>
           </div>
-          <div class="col-xs-12 col-md-3">
+
+          <div class="col-sm-12 col-md-3">
             <q-card
               bordered
               class="row col-12"
diff --git a/src/modules/13_salary/components/SalaryChart/DialogFormRate.vue b/src/modules/13_salary/components/SalaryChart/DialogFormRate.vue
index 596c5c798..71d3fbc40 100644
--- a/src/modules/13_salary/components/SalaryChart/DialogFormRate.vue
+++ b/src/modules/13_salary/components/SalaryChart/DialogFormRate.vue
@@ -23,6 +23,7 @@ const {
 } = useCounterMixin();
 
 const salaryId = ref<string>(route.params.id.toString());
+const salaryRateId = ref<string>("");
 
 const modal = defineModel<boolean>("modal", { required: true });
 const props = defineProps({
@@ -34,6 +35,10 @@ const props = defineProps({
     type: Object,
     defult: [],
   },
+  fetchData: {
+    type: Function,
+    defult: () => {},
+  },
 });
 
 const formData = reactive<any>({
@@ -102,15 +107,40 @@ function createSalaryRate() {
   dialogConfirm($q, async () => {
     showLoader();
     const body: any = {
-      salary: Number(formData.salary.replace(/,/g, "")), //*เงินเดือนฐาน
-      salaryHalf: Number(formData.salaryHalf.replace(/,/g, "")), //0.5 ขั้น
-      salaryHalfSpecial: Number(formData.salaryHalfSpecial.replace(/,/g, "")), //0.5 ขั้น(เงินพิเศษ)
-      salaryFull: Number(formData.salaryFull.replace(/,/g, "")), //1 ขั้น
-      salaryFullSpecial: Number(formData.salaryFullSpecial.replace(/,/g, "")), //1 ขั้น(เงินพิเศษ)
-      salaryFullHalf: Number(formData.salaryFullHalf.replace(/,/g, "")), //1.formData5 ขั้น
-      salaryFullHalfSpecial: Number(
-        formData.salaryFullHalfSpecial.replace(/,/g, "")
-      ), //1.5 ขั้น(เงินพิเศษ)
+      salary:
+        typeof formData.salary === "number"
+          ? formData.salary
+          : Number(formData.salary.replace(/,/g, "")), //*เงินเดือนฐาน
+
+      salaryHalf:
+        typeof formData.salaryHalf === "number"
+          ? formData.salaryHalf
+          : Number(formData.salaryHalf.replace(/,/g, "")), //0.5 ขั้น
+
+      salaryHalfSpecial:
+        typeof formData.salaryHalfSpecial === "number"
+          ? formData.salaryHalfSpecial
+          : Number(formData.salaryHalfSpecial.replace(/,/g, "")), //0.5 ขั้น(เงินพิเศษ)
+
+      salaryFull:
+        typeof formData.salaryFull === "number"
+          ? formData.salaryFull
+          : Number(formData.salaryFull.replace(/,/g, "")), //1 ขั้น
+
+      salaryFullSpecial:
+        typeof formData.salaryFullSpecial === "number"
+          ? formData.salaryFullSpecial
+          : Number(formData.salaryFullSpecial.replace(/,/g, "")), //1 ขั้น(เงินพิเศษ)
+
+      salaryFullHalf:
+        typeof formData.salaryFullHalf === "number"
+          ? formData.salaryFullHalf
+          : Number(formData.salaryFullHalf.replace(/,/g, "")), //1.formData5 ขั้น
+
+      salaryFullHalfSpecial:
+        typeof formData.salaryFullHalfSpecial === "number"
+          ? formData.salaryFullHalfSpecial
+          : Number(formData.salaryFullHalfSpecial.replace(/,/g, "")), //1.5 ขั้น(เงินพิเศษ)
       isNext: formData.isNext, //*ทะลุขั้น
     };
     if (props.typeAction === "add") {
@@ -120,10 +150,10 @@ function createSalaryRate() {
       const url =
         props.typeAction === "add"
           ? config.API.salaryRateList
-          : config.API.salaryRateListByid(salaryId.value);
+          : config.API.salaryRateListByid(formData.salaryId);
       await http[props.typeAction === "add" ? "post" : "put"](url, body);
       success($q, "บันทีกข้อมูลสำเร็จ");
-      // props.fetchData?.();
+      props.fetchData?.();
     } catch (err) {
       messageError($q, err);
     } finally {
@@ -136,12 +166,10 @@ function createSalaryRate() {
 watch(
   () => modal.value,
   () => {
-    console.log(salaryId.value);
     if (modal.value && props.typeAction === "edit") {
       if (props.data) {
         const data = props.data;
-
-        // formData.salaryId = data.id;
+        formData.salaryId = data.id;
         formData.salary = data.salary;
         formData.salaryHalf = data.salaryHalf;
         formData.salaryHalfSpecial = data.salaryHalfSpecial;
diff --git a/src/modules/13_salary/views/salaryRate.vue b/src/modules/13_salary/views/salaryRate.vue
index 806f2e96b..17d1c9655 100644
--- a/src/modules/13_salary/views/salaryRate.vue
+++ b/src/modules/13_salary/views/salaryRate.vue
@@ -107,7 +107,7 @@ const itemMenu = ref<ItemsMenu[]>([
 /** queryString*/
 const formQuery = reactive<FormQuerySalary>({
   page: 1, //*หน้า
-  pageSize: 100, //*จำนวนแถวต่อหน้า
+  pageSize: 10, //*จำนวนแถวต่อหน้า
   keyword: "", //keyword ค้นหา
 });
 const totalRow = ref<number>(1);
@@ -124,6 +124,7 @@ async function fetchListSalalyRate() {
     )
     .then((res) => {
       console.log(res);
+      rows.value = res.data.result.data;
     })
     .catch((err) => {
       // messageError($q, err);
@@ -175,8 +176,8 @@ async function fetchListSalalyRate() {
  * @param newPagination ข้อมูล Pagination ใหม่
  */
 function updatePagination(newPagination: NewPagination) {
-  // formQuery.page = 1;
-  // formQuery.pageSize = newPagination.rowsPerPage;
+  formQuery.page = 1;
+  formQuery.pageSize = newPagination.rowsPerPage;
 }
 
 const typeAction = ref<string>("");
@@ -189,9 +190,20 @@ function onClickSalaryRate(type: string, data: SalaryRate | null) {
   }
 }
 
-function onClickDelete() {
-  dialogRemove($q, () => {
-    success($q, "ลบข้อมูลสำเร็จ");
+function onClickDelete(id: string) {
+  dialogRemove($q, async () => {
+    await http
+      .delete(config.API.salaryRateListByid(id))
+      .then(() => {
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        fetchListSalalyRate();
+        hideLoader();
+      });
   });
 }
 
@@ -275,29 +287,35 @@ watch([() => formQuery.page, () => formQuery.pageSize], async () => {
                 <div v-else-if="col.name === 'salaryHalf'">
                   {{
                     props.row.salaryHalfSpecial
-                      ? col.value + " " + `(${props.row.salaryHalfSpecial})`
-                      : col.value
+                      ? col.value.toLocaleString() +
+                        " " +
+                        `(${props.row.salaryHalfSpecial.toLocaleString()})`
+                      : col.value.toLocaleString()
                   }}
                 </div>
 
                 <div v-else-if="col.name === 'salaryFull'">
                   {{
                     props.row.salaryFullSpecial
-                      ? col.value + " " + `(${props.row.salaryFullSpecial})`
-                      : col.value
+                      ? col.value.toLocaleString() +
+                        " " +
+                        `(${props.row.salaryFullSpecial.toLocaleString()})`
+                      : col.value.toLocaleString()
                   }}
                 </div>
 
                 <div v-else-if="col.name === 'salaryFullHalf'">
                   {{
                     props.row.salaryFullHalfSpecial
-                      ? col.value + " " + `(${props.row.salaryFullHalfSpecial})`
-                      : col.value
+                      ? col.value.toLocaleString() +
+                        " " +
+                        `(${props.row.salaryFullHalfSpecial.toLocaleString()})`
+                      : col.value.toLocaleString()
                   }}
                 </div>
 
                 <div v-else>
-                  {{ col.value ? col.value : "-" }}
+                  {{ col.value ? col.value.toLocaleString() : "-" }}
                 </div>
               </q-td>
               <q-td>
@@ -320,7 +338,7 @@ watch([() => formQuery.page, () => formQuery.pageSize], async () => {
                           item.type === 'edit'
                             ? onClickSalaryRate('edit', props.row)
                             : item.type === 'delete'
-                            ? onClickDelete()
+                            ? onClickDelete(props.row.id)
                             : null
                         "
                       >
@@ -361,6 +379,7 @@ watch([() => formQuery.page, () => formQuery.pageSize], async () => {
     v-model:modal="modalDialogFormRate"
     :typeAction="typeAction"
     :data="dataRow"
+    :fetchData="fetchListSalalyRate"
   />
 </template>