diff --git a/src/api/13_salary/api.salary.ts b/src/api/13_salary/api.salary.ts
index ab445d5f8..160213440 100644
--- a/src/api/13_salary/api.salary.ts
+++ b/src/api/13_salary/api.salary.ts
@@ -79,6 +79,8 @@ export default {
     rootId: string
   ) => `${salaryPeriodEmp}/${type}/comment/${periodId}/${rootId}`,
 
+  salaryFile: (name: string, group: string, id: string, subId: string) =>
+    `${salary}/sub-file/${name}/${group}/${id}/${subId}`,
   salaryUploadFile: (name: string, group: string, id: string, subId: string) =>
-    `${salary}/file/${name}/${group}/${id}/${subId}`,
+    `${salary}/sub-file/${name}/${group}/${id}/${subId}`,
 };
diff --git a/src/api/file/api.file.ts b/src/api/file/api.file.ts
new file mode 100644
index 000000000..cbdbd1eaa
--- /dev/null
+++ b/src/api/file/api.file.ts
@@ -0,0 +1,20 @@
+import env from "../index";
+const url = `${env.API_URI}/salary`;
+
+export default {
+  subFile: (name: string, group: string, id: string, subId: string) =>
+    `${url}/sub-file/${name}/${group}/${id}/${subId}`,
+
+  subFileByFileName: (
+    name: string,
+    group: string,
+    id: string,
+    subId: string,
+    fileName: string
+  ) => `${url}/sub-file/${name}/${group}/${id}/${subId}/${fileName}`,
+
+  file: (name: string, group: string, id: string) =>
+    `${url}/sub/${name}/${group}/${id}`,
+  fileByFile: (name: string, group: string, id: string, fileName: string) =>
+    `${url}/sub/${name}/${group}/${id}/${fileName}`,
+};
diff --git a/src/app.config.ts b/src/app.config.ts
index 96cc78b06..be0aacba9 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -67,6 +67,8 @@ import KPI from "./api/14_KPI/api.KPI";
 /** API เงินเดือน/ค่าจ้าง*/
 import development from "./api/15_development/api.development";
 
+import file from "./api/file/api.file";
+
 // environment variables
 export const compettitivePanel = import.meta.env.VITE_COMPETITIVE_EXAM_PANEL;
 export const qualifyDisableExamPanel = import.meta.env
@@ -130,6 +132,9 @@ const API = {
   ...salary,
   ...KPI,
   ...development,
+
+  /*file*/
+  ...file,
 };
 
 export default {
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/ProcessStep.vue b/src/modules/13_salary/components/SalaryEmployeeLists/ProcessStep.vue
index 2e0cf21a7..d90083310 100644
--- a/src/modules/13_salary/components/SalaryEmployeeLists/ProcessStep.vue
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/ProcessStep.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
@@ -40,7 +40,7 @@ async function uploadFile(event: any) {
       formdata.append("Document", selectedFile);
       http
         .post(
-          config.API.salaryUploadFile(
+          config.API.subFile(
             "ระบบเงินเดือน",
             "เลื่อนค่าจ้าง",
             props.periodId ? props.periodId : "",
@@ -141,11 +141,30 @@ function sendAndRecommend(title: string, typeOrder: string) {
   titleRecommend.value = title;
   type.value = typeOrder;
 }
+
+function fetchListFile() {
+  http
+    .get(
+      config.API.subFile(
+        "ระบบเงินเดือน",
+        "เลื่อนค่าจ้าง",
+        props.periodId ? props.periodId : "",
+        props.rootId ? props.rootId : ""
+      )
+    )
+    .then(async () => {})
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+onMounted(() => {
+  fetchListFile();
+});
 </script>
 
 <template>
   <div class="row col-12 q-pa-md">
-    <q-toolbar>
+    <q-toolbar style="padding: 0px">
       <q-file
         v-if="sendStep == 1"
         bg-color="white"
@@ -153,7 +172,6 @@ function sendAndRecommend(title: string, typeOrder: string) {
         outlined
         dense
         v-model="fileUpload"
-        accept=".pdf"
         label="อัปโหลดไฟล์"
         multiple
       >
@@ -184,9 +202,7 @@ function sendAndRecommend(title: string, typeOrder: string) {
         >
       </div>
 
-      <q-toolbar-title>
-        <!-- Toolbar -->
-      </q-toolbar-title>
+      <q-space />
       <div>
         <!-- การเจ้าหน้าที่ของหน่วยงานส่งเอกสารให้ ผอ. หน่วยงานตรวจสอบ -->
         <q-btn
@@ -251,15 +267,51 @@ function sendAndRecommend(title: string, typeOrder: string) {
         />
       </div>
     </q-toolbar>
+    <div class="col-6">
+      <q-list bordered>
+        <q-item clickable v-ripple>
+          <q-item-section>Icon as avatar</q-item-section>
+          <q-item-section avatar>
+            <q-icon color="primary" name="bluetooth" />
+          </q-item-section>
+        </q-item>
 
-    <DialogPopupReason
-      v-model:modal="modalRecommend"
-      :title="titleRecommend"
-      label="คำแนะนำ"
-      :savaForm="saveReccommend"
-      textReport=""
-    />
+        <q-item clickable v-ripple>
+          <q-item-section>Avatar-type icon</q-item-section>
+          <q-item-section avatar>
+            <q-avatar color="teal" text-color="white" icon="bluetooth" />
+          </q-item-section>
+        </q-item>
+
+        <q-item clickable v-ripple>
+          <q-item-section>Rounded avatar-type icon</q-item-section>
+          <q-item-section avatar>
+            <q-avatar
+              rounded
+              color="purple"
+              text-color="white"
+              icon="bluetooth"
+            />
+          </q-item-section>
+        </q-item>
+
+        <q-item clickable v-ripple>
+          <q-item-section>Letter avatar-type</q-item-section>
+          <q-item-section avatar>
+            <q-avatar color="primary" text-color="white"> R </q-avatar>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </div>
   </div>
+
+  <DialogPopupReason
+    v-model:modal="modalRecommend"
+    :title="titleRecommend"
+    label="คำแนะนำ"
+    :savaForm="saveReccommend"
+    textReport=""
+  />
 </template>
 
 <style lang="scss" scoped></style>