diff --git a/src/modules/06_retirement/interface/response/Main.ts b/src/modules/06_retirement/interface/response/Main.ts
index 4e7c72bb4..468906cc7 100644
--- a/src/modules/06_retirement/interface/response/Main.ts
+++ b/src/modules/06_retirement/interface/response/Main.ts
@@ -95,6 +95,13 @@ interface DataRecords {
   retireTypeID: string;
   retireTypeNameTH: string;
   retireYear: string;
+  officerDocument: OfficerDocument[];
+}
+
+interface OfficerDocument {
+  documentTypeID: string;
+  documentTypeName: string;
+  officerDocumentID: string;
 }
 
 export type {
@@ -108,4 +115,5 @@ export type {
   SeqTypeRow,
   RetirementOld,
   DataRecords,
+  OfficerDocument,
 };
diff --git a/src/modules/06_retirement/views/09_retirementOld.vue b/src/modules/06_retirement/views/09_retirementOld.vue
index 4cc07ed80..0520a3c35 100644
--- a/src/modules/06_retirement/views/09_retirementOld.vue
+++ b/src/modules/06_retirement/views/09_retirementOld.vue
@@ -13,8 +13,11 @@ import type { FilterRetirementOld } from "@/modules/06_retirement/interface/requ
 import type {
   RetirementOld,
   DataRecords,
+  OfficerDocument,
 } from "@/modules/06_retirement/interface/response/Main";
 
+import DialogHeader from "@/components/DialogHeader.vue";
+
 const $q = useQuasar();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 const { pagination, params, onRequest } = usePagination(
@@ -133,6 +136,9 @@ const columns = ref<QTableColumn[]>([
   },
 ]);
 
+const modalViewDocument = ref<boolean>(false);
+const documentData = ref<OfficerDocument[]>([]);
+
 /** ฟังก์ชันสำหรับดึงข้อมูลผู้พ้นราชการ */
 async function fetchDataRetirement() {
   showLoader();
@@ -191,6 +197,41 @@ function resetFilter() {
   rows.value = [];
 }
 
+function handlerViewDocument(row: DataRecords) {
+  modalViewDocument.value = true;
+  documentData.value = row.officerDocument || [];
+}
+
+async function downloadDocument(item: OfficerDocument) {
+  showLoader();
+  try {
+    const res = await http.get(
+      config.API.exRetirement + `/document/${item.officerDocumentID}`,
+      {
+        headers: {
+          "Content-Type": "application/pdf",
+          Accept: "application/pdf",
+        },
+        responseType: "blob",
+      }
+    );
+    const url = window.URL.createObjectURL(new Blob([res.data]));
+    const link = document.createElement("a");
+    link.href = url;
+    link.setAttribute("download", item.documentTypeName + ".pdf");
+    document.body.appendChild(link);
+    link.click();
+
+    // // ทำความสะอาด
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(url);
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+  }
+}
+
 onMounted(() => {
   pagination.value.rowsPerPage = 25;
 });
@@ -224,7 +265,6 @@ onMounted(() => {
                   use-input
                   hide-selected
                   fill-input
-                  readonly
                   @filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn)"
                   class="full-width"
                 >
@@ -361,6 +401,7 @@ onMounted(() => {
             >
               <span class="text-weight-medium">{{ col.label }}</span>
             </q-th>
+            <q-th auto-width />
           </q-tr>
         </template>
         <template v-slot:body="props">
@@ -374,11 +415,52 @@ onMounted(() => {
                 {{ col.value ?? "-" }}
               </div>
             </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                dense
+                flat
+                round
+                icon="mdi-file-eye-outline"
+                @click="handlerViewDocument(props.row)"
+              >
+                <q-tooltip>ไฟล์เอกสาร</q-tooltip>
+              </q-btn>
+            </q-td>
           </q-tr>
         </template>
       </p-table>
     </q-card-section>
   </q-card>
+
+  <q-dialog v-model="modalViewDocument" persistent max-width="600px">
+    <q-card style="min-width: 400px">
+      <DialogHeader
+        :tittle="'ไฟล์เอกสาร'"
+        :close="() => (modalViewDocument = false)"
+      />
+      <q-separator />
+      <q-card-section class="row items-center">
+        <q-list bordered separator class="full-width">
+          <q-item v-for="item in documentData" :key="item.documentTypeID">
+            <q-item-section> {{ item.documentTypeName }}</q-item-section>
+            <q-item-section avatar>
+              <q-btn
+                color="primary"
+                dense
+                flat
+                round
+                icon="mdi-file-eye-outline"
+                @click="downloadDocument(item)"
+              >
+                <q-tooltip>ไฟล์เอกสาร</q-tooltip>
+              </q-btn>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/09_leave/views/07_LeaveHistoryMain.vue b/src/modules/09_leave/views/07_LeaveHistoryMain.vue
index ffd20cb79..ccaaab601 100644
--- a/src/modules/09_leave/views/07_LeaveHistoryMain.vue
+++ b/src/modules/09_leave/views/07_LeaveHistoryMain.vue
@@ -296,7 +296,7 @@ onMounted(async () => {
           </div>
 
           <q-space />
-          <div class="row q-col-gutter-sm col-xs-12 col-sm-6 col-md-6">
+          <div class="row q-col-gutter-sm col-xs-12 col-sm-6 col-md-4">
             <div class="col-xs-12 col-sm-7 col-md-8">
               <q-input
                 standout