diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step3.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step3.vue
index f061ad143..e078fb23a 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step3.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step3.vue
@@ -94,7 +94,7 @@ async function getPDF(url: string, type: string) {
       store.urlDownloadFile = url;
       const blob = new Blob([res.data]);
       const objectUrl = URL.createObjectURL(blob);
-
+      store.currentObjectUrl = objectUrl;
       const pdfData = await usePDF(`${objectUrl}`);
       setTimeout(() => {
         store.log = 1;
diff --git a/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewPDF.vue b/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewPDF.vue
index c4110d1d2..421385123 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewPDF.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewPDF.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, onMounted } from "vue";
+import { ref, watch, onMounted, computed } from "vue";
 import { VuePDF } from "@tato30/vue-pdf";
 
 /** importStore*/
@@ -14,6 +14,8 @@ const props = defineProps({
   },
 });
 
+const isPopup = computed(() => props.type === "popup");
+
 const splitterModel = ref(14);
 const numOfPages = ref<number>(0);
 const page = ref<number>(1);
@@ -33,6 +35,17 @@ function backPage() {
   }
 }
 
+function onDownloadFile() {
+  if (store.currentObjectUrl) {
+    const link = document.createElement("a");
+    link.href = store.currentObjectUrl;
+    link.download = `เอกสาร.pdf`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+}
+
 watch(
   () => store.log,
   () => {
@@ -51,7 +64,57 @@ onMounted(() => {
 </script>
 
 <template>
+  <div
+    v-if="isPopup"
+    class="bg-white q-py-xs q-px-md row justify-center items-center q-gutter-sm shadow-1"
+  >
+    <q-btn
+      flat
+      round
+      icon="mdi-chevron-left"
+      :disable="page == 1"
+      @click="backPage"
+      color="primary"
+    />
+
+    <q-chip
+      outline
+      color="primary"
+      label-color="grey-9"
+      class="q-px-lg text-weight-bold"
+    >
+      หน้า {{ page }} / {{ numOfPages || "-" }}
+    </q-chip>
+
+    <q-btn
+      flat
+      round
+      icon="mdi-chevron-right"
+      :disable="page === numOfPages"
+      @click="nextPage"
+      color="primary"
+    />
+  </div>
+  <q-card-section v-if="isPopup" class="col scroll q-pa-md flex flex-center">
+    <div class="pdf-viewer-wrapper shadow-5">
+      <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
+    </div>
+  </q-card-section>
+
+  <q-page-sticky v-if="isPopup" position="bottom-right" :offset="[20, 20]">
+    <q-btn
+      fab
+      size="xl"
+      icon="mdi-download"
+      color="primary"
+      @click="onDownloadFile"
+    >
+      <q-tooltip>ดาวน์โหลดไฟล์ PDF</q-tooltip>
+    </q-btn>
+  </q-page-sticky>
+
   <q-splitter
+    v-if="!isPopup"
     v-model="splitterModel"
     horizontal
     class="bg-grey-1 q-px-sm"
@@ -144,4 +207,12 @@ onMounted(() => {
   </q-splitter>
 </template>
 
-<style scoped></style>
+<style scoped>
+/* สไตล์เพื่อให้ PDF ดูเหมือนวางบนโต๊ะ */
+.pdf-viewer-wrapper {
+  background-color: white;
+  width: 100%;
+  max-width: 900px; /* จำกัดความกว้างเพื่อความสวยงามบนจอใหญ่ */
+  transition: all 0.3s ease;
+}
+</style>
diff --git a/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep3.vue b/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep3.vue
index 2afa8c014..5a35b2677 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep3.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep3.vue
@@ -10,7 +10,7 @@ import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/Eval
 
 /** use*/
 const store = useEvaluateDetailStore();
-const modalPerview = ref<boolean>(false);  //แสดง Popup เอกสาร
+const modalPerview = ref<boolean>(false); //แสดง Popup เอกสาร
 </script>
 
 <template>
@@ -68,21 +68,35 @@ const modalPerview = ref<boolean>(false);  //แสดง Popup เอกสา
     </q-tab-panels>
   </q-card>
 
-  <q-dialog v-model="modalPerview" full-width fullHeight persistent>
-    <q-card>
-      <q-card-section>
-        <DialogHeader :close="() => (modalPerview = false)" />
-      </q-card-section>
+  <q-dialog
+    v-model="modalPerview"
+    persistent
+    :maximized="true"
+    transition-show="slide-up"
+    transition-hide="slide-down"
+  >
+    <q-card class="column full-height bg-grey-2">
+      <DialogHeader :close="() => (modalPerview = false)" class="bg-white" />
 
-      <q-card-section class="q-pt-none">
-        <ViewPDF :type="'popup'" />
-      </q-card-section>
+      <ViewPDF :type="'popup'" />
     </q-card>
   </q-dialog>
 </template>
 
-<style>
+<style scoped>
 .q-tab-panel {
   padding: 0px;
 }
+
+/* ปรับแต่ง Scrollbar ให้ดูสะอาดตา */
+.scroll::-webkit-scrollbar {
+  width: 8px;
+}
+.scroll::-webkit-scrollbar-thumb {
+  background: #bdbdbd;
+  border-radius: 4px;
+}
+.scroll::-webkit-scrollbar-thumb:hover {
+  background: #9e9e9e;
+}
 </style>
diff --git a/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep7.vue b/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep7.vue
index 7f5e1a28f..28ff29b41 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep7.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep7.vue
@@ -42,17 +42,31 @@ const modalPerview = ref<boolean>(false);
     <div class="col-12"><ViewPDF class="col-12" /></div>
   </q-card>
 
-  <q-dialog v-model="modalPerview" full-width fullHeight persistent>
-    <q-card>
-      <q-card-section>
-        <DialogHeader :close="() => (modalPerview = false)" />
-      </q-card-section>
+  <q-dialog
+    v-model="modalPerview"
+    persistent
+    :maximized="true"
+    transition-show="slide-up"
+    transition-hide="slide-down"
+  >
+    <q-card class="column full-height bg-grey-2">
+      <DialogHeader :close="() => (modalPerview = false)" class="bg-white" />
 
-      <q-card-section class="q-pt-none">
-        <ViewPDF :type="'popup'" />
-      </q-card-section>
+      <ViewPDF :type="'popup'" />
     </q-card>
   </q-dialog>
 </template>
 
-<style scoped></style>
+<style scoped>
+/* ปรับแต่ง Scrollbar ให้ดูสะอาดตา */
+.scroll::-webkit-scrollbar {
+  width: 8px;
+}
+.scroll::-webkit-scrollbar-thumb {
+  background: #bdbdbd;
+  border-radius: 4px;
+}
+.scroll::-webkit-scrollbar-thumb:hover {
+  background: #9e9e9e;
+}
+</style>
diff --git a/src/modules/12_evaluatePersonal/store/EvaluateDetail.ts b/src/modules/12_evaluatePersonal/store/EvaluateDetail.ts
index 2a55289aa..ddd12f85c 100644
--- a/src/modules/12_evaluatePersonal/store/EvaluateDetail.ts
+++ b/src/modules/12_evaluatePersonal/store/EvaluateDetail.ts
@@ -30,6 +30,7 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
   const urlDownloadFile = ref<string>("");
   const pdfSrcStore = ref<any>();
   const numOfPagesStore = ref<any>();
+  const currentObjectUrl = ref<string | null>(null);
 
   /** คอลัมน์ ใบอนุญาตประกอบวิชาชีพ*/
   const columnsCertificates = ref<QTableProps["columns"]>([
@@ -423,6 +424,7 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
     columnExperience,
 
     pdfSrcStore,
+    currentObjectUrl,
     urlDownloadFile,
     numOfPagesStore,
     log,
diff --git a/src/modules/18_command/components/DialogPreviewCommand.vue b/src/modules/18_command/components/DialogPreviewCommand.vue
index 836abb6bd..64e10f9bb 100644
--- a/src/modules/18_command/components/DialogPreviewCommand.vue
+++ b/src/modules/18_command/components/DialogPreviewCommand.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, reactive } from "vue";
+import { ref, watch, reactive, computed } from "vue";
 import { useQuasar } from "quasar";
 import axios from "axios";
 import { VuePDF, usePDF } from "@tato30/vue-pdf";
@@ -20,18 +20,22 @@ const modal = defineModel<boolean>("modal", { required: true });
 const command = defineModel<string>("command", { required: true });
 const commandId = defineModel<string>("commandId", { required: true });
 const citizenId = defineModel<string>("citizenId", { required: true });
-const promises = ref<any>([]);
 
+// Computed properties for navigation
+const canGoPrevious = computed(() => page.value > 1);
+const canGoNext = computed(() => page.value < numOfPages.value);
+
+const promises = ref<any>([]);
 const tab = ref<string>("main"); //tab
 const page = ref<number>(1);
 const numOfPages = ref<number>(0); //จำนวนหน้า pdf
 const pdfSrc = ref<PDFDocumentLoadingTask | undefined>(); // ตัวแปรเก็บ เเสดง pdf
 
-const dialog = ref<boolean>(false); // เปิด dialog
 const isLoadView = ref<boolean>(false);
 const isUploadAttachment = ref<boolean>(false);
 const dataCover = ref<DataFile>(); //ข้อมูลไฟล์คำสั่ง
 const dataAttachment = ref<DataFile>(); //ข้อมูลไฟล์แบนท้าย
+const currentObjectUrl = ref<string | null>(null);
 
 /** ปิด popup */
 function closeDialog() {
@@ -77,10 +81,24 @@ async function checkAttachment() {
  * @param type pdf/docx
  */
 async function downloadCover(type: string) {
-  if (tab.value === "main") {
-    window.open(dataCover.value?.downloadUrl, "_blank");
-  } else {
-    window.open(dataAttachment.value?.downloadUrl, "_blank");
+  // if (tab.value === "main") {
+  //   window.open(dataCover.value?.downloadUrl, "_blank");
+  // } else {
+  //   window.open(dataAttachment.value?.downloadUrl, "_blank");
+  // }
+
+  const fileName =
+    tab.value === "main"
+      ? dataCover.value?.fileName
+      : dataAttachment.value?.fileName;
+
+  if (currentObjectUrl.value) {
+    const link = document.createElement("a");
+    link.href = currentObjectUrl.value;
+    link.download = `${fileName}.pdf`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
   }
 }
 
@@ -117,8 +135,24 @@ async function fetchDataCommand(type: string) {
         dataAttachment.value = data;
       }
     })
-    .catch((e) => {
-      messageError($q, e);
+    .catch(async (e) => {
+      if (type !== "cover") {
+        try {
+          const res = await http.get(
+            config.API.fileByFile(
+              "ระบบออกคำสั่ง",
+              newType,
+              commandId.value,
+              newType
+            )
+          );
+          dataAttachment.value = res.data;
+        } catch (error) {
+          messageError($q, e);
+        }
+      } else {
+        messageError($q, e);
+      }
     })
     .finally(() => {
       hideLoader();
@@ -142,6 +176,7 @@ async function fetchPDF(data: any, type: string = "docx?folder=command") {
     .then(async (res) => {
       const blob = new Blob([res.data]);
       const objectUrl = URL.createObjectURL(blob);
+      currentObjectUrl.value = objectUrl;
       const pdfData = usePDF(`${objectUrl}`);
       setTimeout(() => {
         pdfSrc.value = pdfData.pdf.value;
@@ -155,6 +190,27 @@ async function fetchPDF(data: any, type: string = "docx?folder=command") {
     });
 }
 
+/** Navigate to previous page*/
+function goToPreviousPage() {
+  if (canGoPrevious.value) {
+    page.value--;
+  }
+}
+
+/** Navigate to next page*/
+function goToNextPage() {
+  if (canGoNext.value) {
+    page.value++;
+  }
+}
+
+function cleanupObjectUrl() {
+  if (currentObjectUrl.value) {
+    URL.revokeObjectURL(currentObjectUrl.value);
+    currentObjectUrl.value = null;
+  }
+}
+
 watch(
   () => modal.value,
   async () => {
@@ -169,6 +225,7 @@ watch(
           hideLoader();
         });
     } else {
+      cleanupObjectUrl();
       tab.value = "main";
       pdfSrc.value = undefined;
       page.value = 1;
@@ -190,204 +247,93 @@ watch(
 );
 </script>
 <template>
-  <q-dialog v-model="modal" persistent>
-    <q-card class="col-12" style="width: 80%">
+  <q-dialog
+    v-model="modal"
+    persistent
+    :maximized="true"
+    transition-show="slide-up"
+    transition-hide="slide-down"
+  >
+    <q-card class="column full-height bg-grey-2">
       <DialogHeader :tittle="`คำสั่ง ${command}`" :close="closeDialog" />
       <q-separator />
 
-      <q-card-section class="scroll" style="max-height: 90vh">
-        <div class="space">
-          <div @click="setTab('main')" :class="getClass(tab == 'main')">
-            <div class="q-pr-sm">คำสั่ง</div>
-          </div>
+      <div
+        class="bg-white q-py-xs q-px-md row justify-center items-center q-gutter-sm shadow-1"
+      >
+        <div class="col-12 row items-center">
+          <div class="space">
+            <div @click="setTab('main')" :class="getClass(tab == 'main')">
+              <div class="q-pr-sm">คำสั่ง</div>
+            </div>
 
-          <div
-            v-if="isUploadAttachment"
-            @click="setTab('second')"
-            :class="getClass(tab == 'second')"
-          >
-            <div class="q-pr-sm">เอกสารแนบท้าย</div>
+            <div
+              v-if="isUploadAttachment"
+              @click="setTab('second')"
+              :class="getClass(tab == 'second')"
+            >
+              <div class="q-pr-sm">เอกสารแนบท้าย</div>
+            </div>
+            <q-space />
           </div>
-          <q-space />
+        </div>
+        <div v-if="isLoadView">
           <q-btn
-            class="text-dark"
             flat
-            dense
-            icon="mdi-fullscreen"
+            round
+            icon="mdi-chevron-left"
+            :disable="!canGoPrevious"
+            @click="goToPreviousPage"
+            color="primary"
+          />
+
+          <q-chip
+            outline
+            color="primary"
+            label-color="grey-9"
+            class="q-px-lg text-weight-bold"
+          >
+            หน้า {{ page }} / {{ numOfPages || "-" }}
+          </q-chip>
+
+          <q-btn
+            flat
+            round
+            icon="mdi-chevron-right"
+            :disable="!canGoNext"
+            @click="goToNextPage"
             color="primary"
-            @click="dialog = true"
           />
         </div>
-        <q-separator style="margin-top: -1px; z-index: 1" />
-        <div class="q-pa-sm">
-          <div class="q-pa-sm row q-gutter-sm">
-            <q-btn
-              outline
-              color="red"
-              icon="mdi-file-pdf"
-              label="ดาวน์โหลดไฟล์ PDF"
-              @click="downloadCover('pdf')"
-              class="q-px-sm"
-              :loading="!isLoadView"
-            >
-            </q-btn>
+      </div>
 
-            <!-- <q-btn
-              v-if="tab === 'main'"
-              outline
-              class="q-px-sm"
-              color="blue"
-              icon="mdi-file-word"
-              label="ดาวน์โหลดไฟล์ docx"
-              @click="downloadCover('docx')"
-            />
-
-            <q-btn
-              v-else
-              outline
-              class="q-px-sm"
-              color="green"
-              icon="mdi-file-excel"
-              label="ดาวน์โหลดไฟล์ xlsx"
-              @click="downloadCover('xlsx')"
-            /> -->
-          </div>
-          <q-card bordered class="card-pdf q-mx-sm q-pa-md">
-            <div class="justify-between items-center align-center q-pb-sm row">
-              <q-btn
-                class="text-dark bg-grey-4"
-                flat
-                dense
-                @click="page = page > 1 ? page - 1 : page"
-              >
-                <q-icon name="mdi-chevron-left" />
-              </q-btn>
-
-              <span class="body-2 grey--text">
-                หน้าที่ {{ page }} จาก {{ numOfPages }}
-              </span>
-
-              <q-btn
-                class="text-dark bg-grey-4"
-                flat
-                dense
-                @click="page = page < numOfPages ? page + 1 : page"
-              >
-                <q-icon name="mdi-chevron-right" />
-              </q-btn>
-            </div>
-            <div class="pdfWidth" v-if="isLoadView">
-              <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
-            </div>
-            <div
-              class="full-width row flex-center text-accent q-gutter-sm"
-              v-else
-            >
-              <span
-                ><div
-                  style="
-                    height: 60vh;
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: center;
-                    align-items: center;
-                  "
-                  class="text-grey-5"
-                >
-                  <q-spinner color="primary" size="3em" :thickness="10" />
-                </div>
-              </span>
-            </div>
-          </q-card>
+      <q-card-section
+        v-if="isLoadView"
+        class="col scroll q-pa-md flex flex-center"
+      >
+        <div class="pdf-viewer-wrapper shadow-5">
+          <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
         </div>
-
-        <q-dialog
-          v-model="dialog"
-          persistent
-          :maximized="true"
-          transition-show="slide-up"
-          transition-hide="slide-down"
-        >
-          <q-card class="bg-white text-white">
-            <div
-              class="flex justify-end items-center align-center q-mr-md q-mt-sm"
-            >
-              <q-btn
-                icon="close"
-                unelevated
-                round
-                dense
-                style="color: #ff8080; background-color: #ffdede"
-                size="12px"
-                v-close-popup
-              />
-            </div>
-            <q-card-section bordered class="card-pdf q-ma-md q-pa-md">
-              <div
-                class="justify-between items-center align-center q-pb-sm row"
-              >
-                <q-btn
-                  class="text-dark bg-grey-4"
-                  flat
-                  dense
-                  @click="page = page > 1 ? page - 1 : page"
-                >
-                  <q-icon name="mdi-chevron-left" />
-                </q-btn>
-
-                <span class="body-2 grey--text text-black">
-                  หน้าที่ {{ page }} จาก {{ numOfPages }}
-                </span>
-
-                <q-btn
-                  class="text-dark bg-grey-4"
-                  flat
-                  dense
-                  @click="page = page < numOfPages ? page + 1 : page"
-                >
-                  <q-icon name="mdi-chevron-right" />
-                </q-btn>
-              </div>
-              <div class="pdfWidth">
-                <VuePDF
-                  ref="vuePDFRef"
-                  :pdf="pdfSrc"
-                  :page="page"
-                  fit-parent
-                  :scale="0.1"
-                />
-                <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
-              </div>
-              <div
-                class="justify-between items-center align-center q-pt-sm row"
-              >
-                <q-btn
-                  class="text-dark bg-grey-4"
-                  flat
-                  dense
-                  @click="page = page > 1 ? page - 1 : page"
-                >
-                  <q-icon name="mdi-chevron-left" />
-                </q-btn>
-
-                <span class="body-2 grey--text text-black">
-                  หน้าที่ {{ page }} จาก {{ numOfPages }}
-                </span>
-
-                <q-btn
-                  class="text-dark bg-grey-4"
-                  flat
-                  dense
-                  @click="page = page < numOfPages ? page + 1 : page"
-                >
-                  <q-icon name="mdi-chevron-right" />
-                </q-btn>
-              </div>
-            </q-card-section>
-          </q-card>
-        </q-dialog>
       </q-card-section>
-      <q-separator />
+
+      <q-card-section v-else class="col flex flex-center">
+        <div class="text-center">
+          <q-spinner color="primary" size="4em" :thickness="10" />
+        </div>
+      </q-card-section>
+
+      <q-page-sticky position="bottom-right" :offset="[20, 20]">
+        <q-btn
+          fab
+          size="xl"
+          icon="mdi-download"
+          color="primary"
+          @click="downloadCover('pdf')"
+          :loading="!isLoadView"
+        >
+          <q-tooltip>ดาวน์โหลดไฟล์ PDF</q-tooltip>
+        </q-btn>
+      </q-page-sticky>
     </q-card>
   </q-dialog>
 </template>
@@ -431,4 +377,24 @@ watch(
   border: 1px solid #e9eaec;
   background-color: #e9eaec61;
 }
+
+/* สไตล์เพื่อให้ PDF ดูเหมือนวางบนโต๊ะ */
+.pdf-viewer-wrapper {
+  background-color: white;
+  width: 100%;
+  max-width: 900px; /* จำกัดความกว้างเพื่อความสวยงามบนจอใหญ่ */
+  transition: all 0.3s ease;
+}
+
+/* ปรับแต่ง Scrollbar ให้ดูสะอาดตา */
+.scroll::-webkit-scrollbar {
+  width: 8px;
+}
+.scroll::-webkit-scrollbar-thumb {
+  background: #bdbdbd;
+  border-radius: 4px;
+}
+.scroll::-webkit-scrollbar-thumb:hover {
+  background: #9e9e9e;
+}
 </style>
diff --git a/src/modules/18_command/components/Step/1_Detail.vue b/src/modules/18_command/components/Step/1_Detail.vue
index 7123edad6..ddab5c0ef 100644
--- a/src/modules/18_command/components/Step/1_Detail.vue
+++ b/src/modules/18_command/components/Step/1_Detail.vue
@@ -11,7 +11,6 @@ import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
 import type { FormDataDetail } from "@/modules/18_command/interface/request/Main";
 import type { DataOperators } from "@/modules/18_command/interface/response/Main";
 
-import DialogPerview from "@/modules/18_command/components/Step/Dialog1_Perview.vue";
 import Dialog1_AddOperator from "@/modules/18_command/components/Step/Dialog1_AddOperetor.vue";
 
 const $q = useQuasar();
@@ -55,7 +54,6 @@ let formData = reactive<FormDataDetail>({
 });
 const commandVolume = ref<string>(""); //เล่มที่
 const commandChapter = ref<string>(""); //ตอนที่
-const modalPreview = ref<boolean>(false); //แสดงตัวอย่าง
 const isIdofficer = ref<boolean>(false); //เช็ค สกจ.
 
 const rows = ref<Array<DataOperators>>([]);
@@ -632,11 +630,6 @@ onMounted(async () => {
     </div>
   </div>
 
-  <DialogPerview
-    v-model:modal="modalPreview"
-    v-model:data-template-detail="formData"
-  />
-
   <Dialog1_AddOperator
     v-model:modal="modalAddOperator"
     :command-id="commandId"
diff --git a/src/modules/18_command/components/Step/4_Attached.vue b/src/modules/18_command/components/Step/4_Attached.vue
index 2236b6fea..8ac33c9a0 100644
--- a/src/modules/18_command/components/Step/4_Attached.vue
+++ b/src/modules/18_command/components/Step/4_Attached.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref, watch, computed } from "vue";
 import { VuePDF, usePDF } from "@tato30/vue-pdf";
 import { useQuasar } from "quasar";
 import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
@@ -15,6 +15,8 @@ import type { DataFileOrder } from "@/modules/18_command/interface/response/Main
 
 import { useCounterMixin } from "@/stores/mixin";
 
+import DialogHeader from "@/components/DialogHeader.vue";
+
 const $q = useQuasar();
 const route = useRoute();
 const mixin = useCounterMixin();
@@ -140,6 +142,21 @@ watch(tab, () => {
   }
 });
 
+const canGoPrevious = computed(() => page.value > 1);
+const canGoNext = computed(() => page.value < numOfPages.value);
+
+function goToPreviousPage() {
+  if (canGoPrevious.value) {
+    page.value -= 1;
+  }
+}
+
+function goToNextPage() {
+  if (canGoNext.value) {
+    page.value += 1;
+  }
+}
+
 /** hook */
 onMounted(async () => {
   showLoader();
@@ -262,76 +279,77 @@ onMounted(async () => {
     transition-show="slide-up"
     transition-hide="slide-down"
   >
-    <q-card class="bg-white text-white">
-      <div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
+    <q-card class="column full-height bg-grey-2">
+      <DialogHeader
+        :tittle="tab === 'main' ? 'คำสั่ง' : 'เอกสารแนบท้าย'"
+        :close="() => (dialog = false)"
+        class="bg-white"
+      />
+      <q-separator />
+      <div
+        class="bg-white q-py-xs q-px-md row justify-center items-center q-gutter-sm shadow-1"
+      >
         <q-btn
-          icon="close"
-          unelevated
+          flat
           round
-          dense
-          style="color: #ff8080; background-color: #ffdede"
-          size="12px"
-          v-close-popup
+          icon="mdi-chevron-left"
+          :disable="!canGoPrevious"
+          @click="goToPreviousPage"
+          color="primary"
+        />
+
+        <q-chip
+          outline
+          color="primary"
+          label-color="grey-9"
+          class="q-px-lg text-weight-bold"
+        >
+          หน้า {{ page }} / {{ numOfPages || "-" }}
+        </q-chip>
+
+        <q-btn
+          flat
+          round
+          icon="mdi-chevron-right"
+          :disable="!canGoNext"
+          @click="goToNextPage"
+          color="primary"
         />
       </div>
-      <q-card-section bordered class="card-pdf q-ma-md q-pa-md">
-        <div class="justify-between items-center align-center q-pb-sm row">
-          <q-btn
-            class="text-dark bg-grey-4"
-            flat
-            dense
-            @click="page = page > 1 ? page - 1 : page"
-          >
-            <q-icon name="mdi-chevron-left" />
-          </q-btn>
 
-          <span class="body-2 grey--text text-black">
-            หน้าที่ {{ page }} จาก {{ numOfPages }}
-          </span>
-
-          <q-btn
-            class="text-dark bg-grey-4"
-            flat
-            dense
-            @click="page = page < numOfPages ? page + 1 : page"
-          >
-            <q-icon name="mdi-chevron-right" />
-          </q-btn>
-        </div>
-        <div class="pdfWidth">
-          <VuePDF
-            ref="vuePDFRef"
-            :pdf="pdfSrc"
-            :page="page"
-            fit-parent
-            :scale="0.1"
-          />
-          <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
-        </div>
-        <div class="justify-between items-center align-center q-pt-sm row">
-          <q-btn
-            class="text-dark bg-grey-4"
-            flat
-            dense
-            @click="page = page > 1 ? page - 1 : page"
-          >
-            <q-icon name="mdi-chevron-left" />
-          </q-btn>
-
-          <span class="body-2 grey--text text-black">
-            หน้าที่ {{ page }} จาก {{ numOfPages }}
-          </span>
-
-          <q-btn
-            class="text-dark bg-grey-4"
-            flat
-            dense
-            @click="page = page < numOfPages ? page + 1 : page"
-          >
-            <q-icon name="mdi-chevron-right" />
-          </q-btn>
+      <q-card-section class="col scroll q-pa-md flex flex-center">
+        <div class="pdf-viewer-wrapper shadow-5">
+          <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
         </div>
       </q-card-section>
+
+      <q-page-sticky position="bottom-right" :offset="[20, 20]">
+        <q-fab color="primary" icon="download" direction="up">
+          <q-fab-action
+            color="red"
+            @click="downloadCover('pdf')"
+            icon="mdi-file-pdf"
+          >
+            <q-tooltip>ดาวน์โหลดไฟล์ PDF</q-tooltip>
+          </q-fab-action>
+          <q-fab-action
+            v-if="tab === 'main'"
+            color="blue"
+            @click="downloadCover('docx')"
+            icon="mdi-file-word"
+          >
+            <q-tooltip>ดาวน์โหลดไฟล์ DOCX</q-tooltip>
+          </q-fab-action>
+          <q-fab-action
+            v-else
+            color="green"
+            @click="downloadCover('xlsx')"
+            icon="mdi-file-excel"
+          >
+            <q-tooltip>ดาวน์โหลดไฟล์ XLSX</q-tooltip>
+          </q-fab-action>
+        </q-fab>
+      </q-page-sticky>
     </q-card>
   </q-dialog>
 </template>
@@ -376,4 +394,28 @@ onMounted(async () => {
   border: 1px solid #e9eaec;
   background-color: #e9eaec61;
 }
+
+/* สไตล์เพื่อให้ PDF ดูเหมือนวางบนโต๊ะ */
+.pdf-viewer-wrapper {
+  background-color: white;
+  width: 100%;
+  max-width: 900px; /* จำกัดความกว้างเพื่อความสวยงามบนจอใหญ่ */
+  transition: all 0.3s ease;
+}
+
+/* ปรับแต่ง Scrollbar ให้ดูสะอาดตา */
+.scroll::-webkit-scrollbar {
+  width: 8px;
+}
+.scroll::-webkit-scrollbar-thumb {
+  background: #bdbdbd;
+  border-radius: 4px;
+}
+.scroll::-webkit-scrollbar-thumb:hover {
+  background: #9e9e9e;
+}
+
+:deep(.q-btn-dropdown__arrow) {
+  display: none !important;
+}
 </style>
diff --git a/src/modules/18_command/components/Step/Dialog1_Perview.vue b/src/modules/18_command/components/Step/Dialog1_Perview.vue
deleted file mode 100644
index 144e77eac..000000000
--- a/src/modules/18_command/components/Step/Dialog1_Perview.vue
+++ /dev/null
@@ -1,156 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
-import { useQuasar } from "quasar";
-import { VuePDF, usePDF } from "@tato30/vue-pdf";
-import axios from "axios";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
-
-import DialogHeader from "@/components/DialogHeader.vue";
-
-import { useCounterMixin } from "@/stores/mixin";
-
-const $q = useQuasar();
-const { showLoader, hideLoader, messageError } = useCounterMixin();
-
-const modal = defineModel<boolean>("modal", { required: true });
-const dataTemplateDetail = defineModel<any>("dataTemplateDetail", {
-  required: true,
-});
-
-const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
-const numOfPages = ref<number>(0);
-const page = ref<number>(1);
-const vuePDFRef = ref<any>(null);
-
-async function fetchPDF(type: string = "docx") {
-  showLoader();
-  await axios
-    .post(
-      config.API.reportTemplate + `/${type}`,
-      {
-        template: "command_test",
-        reportName: "docx-report",
-        data: {
-          commandNo: dataTemplateDetail.value.commandNo, //
-          commandYear: dataTemplateDetail.value.commandYear, //
-          commandTitle: "นาย",
-          detailHeader: dataTemplateDetail.value.detailHeader, //
-          detailBody: dataTemplateDetail.value.detailBody, //
-          detailFooter: dataTemplateDetail.value.detailFooter, //
-          commandDate: "",
-          name: "Chief Technology Officer",
-          position: "Chief Technology Officer",
-          issue: dataTemplateDetail.value.issue, //
-        },
-      },
-      {
-        headers: {
-          accept: "application/pdf",
-          "content-Type": "application/json",
-        },
-        responseType: "blob",
-      }
-    )
-    .then(async (res) => {
-      const blob = new Blob([res.data]);
-      const objectUrl = URL.createObjectURL(blob);
-      const pdfData = usePDF(`${objectUrl}`);
-      setTimeout(() => {
-        pdfSrc.value = pdfData.pdf.value;
-        numOfPages.value = pdfData.pages.value;
-        hideLoader();
-      }, 1500);
-    })
-    .catch((e) => {
-      messageError($q, e);
-      hideLoader();
-    });
-}
-
-function onClose() {
-  modal.value = false;
-  pdfSrc.value = undefined;
-  page.value = 1
-}
-
-watch(modal, () => {
-  modal.value && fetchPDF();
-});
-</script>
-
-<template>
-  <q-dialog v-model="modal" persistent full-height full-width>
-    <q-card>
-      <DialogHeader :tittle="'ตัวอย่างคำสั่ง'" :close="onClose" />
-      <q-separator />
-
-      <q-card-section
-        bordered
-        class="scroll q-ma-md q-pa-md"
-        style="height: 90%"
-      >
-        <div class="justify-between items-center align-center q-pb-sm row">
-          <q-btn
-            class="text-dark bg-grey-4"
-            flat
-            dense
-            @click="page = page > 1 ? page - 1 : page"
-          >
-            <q-icon name="mdi-chevron-left" />
-          </q-btn>
-
-          <span class="body-2 grey--text text-black">
-            หน้าที่ {{ page }} จาก {{ numOfPages }}
-          </span>
-
-          <q-btn
-            class="text-dark bg-grey-4"
-            flat
-            dense
-            @click="page = page < numOfPages ? page + 1 : page"
-          >
-            <q-icon name="mdi-chevron-right" />
-          </q-btn>
-        </div>
-        <div class="pdfWidth">
-          <VuePDF
-            ref="vuePDFRef"
-            :pdf="pdfSrc"
-            :page="page"
-            fit-parent
-            :scale="0.1"
-          />
-        </div>
-        <div class="justify-between items-center align-center q-pt-sm row">
-          <q-btn
-            class="text-dark bg-grey-4"
-            flat
-            dense
-            @click="page = page > 1 ? page - 1 : page"
-          >
-            <q-icon name="mdi-chevron-left" />
-          </q-btn>
-
-          <span class="body-2 grey--text text-black">
-            หน้าที่ {{ page }} จาก {{ numOfPages }}
-          </span>
-
-          <q-btn
-            class="text-dark bg-grey-4"
-            flat
-            dense
-            @click="page = page < numOfPages ? page + 1 : page"
-          >
-            <q-icon name="mdi-chevron-right" />
-          </q-btn>
-        </div>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
-</template>
-
-<style scoped></style>
diff --git a/src/modules/18_command/components/Step/PerviewPDF.vue b/src/modules/18_command/components/Step/PerviewPDF.vue
index 4f4b64e27..b242237f8 100644
--- a/src/modules/18_command/components/Step/PerviewPDF.vue
+++ b/src/modules/18_command/components/Step/PerviewPDF.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 import { useQuasar } from "quasar";
 import { VuePDF, usePDF } from "@tato30/vue-pdf";
 import axios from "axios";
@@ -18,11 +18,16 @@ const dataFile = defineModel<DataFileDownload | undefined>("dataFile", {
   required: false,
 });
 
+// Computed properties for navigation
+const canGoPrevious = computed(() => page.value > 1);
+const canGoNext = computed(() => page.value < numOfPages.value);
+
 const pdfSrc = ref<any | undefined>();
 const numOfPages = ref<number>(0);
 const page = ref<number>(1);
-const vuePDFRef = ref<any>(null);
 const isLoadPDF = ref<boolean>(false);
+const currentObjectUrl = ref<string | null>(null);
+const title = ref<string>("");
 
 /**
  * function loafFile PDF
@@ -43,6 +48,7 @@ async function fetchPDF(url: string, type: string) {
     .then(async (res) => {
       const blob = new Blob([res.data]);
       const objectUrl = URL.createObjectURL(blob);
+      currentObjectUrl.value = objectUrl;
       const pdfData = usePDF(`${objectUrl}`);
       setTimeout(() => {
         pdfSrc.value = pdfData.pdf.value;
@@ -59,9 +65,36 @@ function onClose() {
   modal.value = false;
 }
 
+/** Navigate to previous page*/
+function goToPreviousPage() {
+  if (canGoPrevious.value) {
+    page.value--;
+  }
+}
+
+/** Navigate to next page*/
+function goToNextPage() {
+  if (canGoNext.value) {
+    page.value++;
+  }
+}
+
+function onDownloadFile() {
+  if (currentObjectUrl.value) {
+    const fileName = dataFile.value ? dataFile.value.fileName : "";
+    const link = document.createElement("a");
+    link.href = currentObjectUrl.value;
+    link.download = `${fileName}.pdf`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+}
+
 watch(modal, (val) => {
   if (val && dataFile.value) {
     fetchPDF(dataFile.value.downloadUrl, dataFile.value.fileType);
+    title.value = dataFile.value.fileName;
   } else {
     pdfSrc.value = undefined;
     page.value = 1;
@@ -78,91 +111,92 @@ watch(modal, (val) => {
     transition-show="slide-up"
     transition-hide="slide-down"
   >
-    <q-card>
-      <DialogHeader :close="onClose" />
+    <q-card class="column full-height bg-grey-2">
+      <DialogHeader :tittle="title" :close="onClose" class="bg-white" />
+
+      <q-separator />
+
+      <div
+        v-if="isLoadPDF"
+        class="bg-white q-py-xs q-px-md row justify-center items-center q-gutter-sm shadow-1"
+      >
+        <q-btn
+          flat
+          round
+          icon="mdi-chevron-left"
+          :disable="!canGoPrevious"
+          @click="goToPreviousPage"
+          color="primary"
+        />
+
+        <q-chip
+          outline
+          color="primary"
+          label-color="grey-9"
+          class="q-px-lg text-weight-bold"
+        >
+          หน้า {{ page }} / {{ numOfPages || "-" }}
+        </q-chip>
+
+        <q-btn
+          flat
+          round
+          icon="mdi-chevron-right"
+          :disable="!canGoNext"
+          @click="goToNextPage"
+          color="primary"
+        />
+      </div>
+
       <q-card-section
         v-if="isLoadPDF"
-        bordered
-        class="card-pdf q-ma-md q-pa-md scroll"
-        style="max-height: 90vh"
+        class="col scroll q-pa-md flex flex-center"
       >
-        <div class="justify-between items-center align-center q-pb-sm row">
-          <q-btn
-            class="text-dark bg-grey-4"
-            flat
-            dense
-            @click="page = page > 1 ? page - 1 : page"
-          >
-            <q-icon name="mdi-chevron-left" />
-          </q-btn>
-
-          <span class="body-2 grey--text text-black">
-            หน้าที่ {{ page }} จาก {{ numOfPages }}
-          </span>
-
-          <q-btn
-            class="text-dark bg-grey-4"
-            flat
-            dense
-            @click="page = page < numOfPages ? page + 1 : page"
-          >
-            <q-icon name="mdi-chevron-right" />
-          </q-btn>
-        </div>
-        <div class="pdfWidth">
-          <VuePDF
-            ref="vuePDFRef"
-            :pdf="pdfSrc"
-            :page="page"
-            fit-parent
-            :scale="0.1"
-          />
-        </div>
-        <div class="justify-between items-center align-center q-pt-sm row">
-          <q-btn
-            class="text-dark bg-grey-4"
-            flat
-            dense
-            @click="page = page > 1 ? page - 1 : page"
-          >
-            <q-icon name="mdi-chevron-left" />
-          </q-btn>
-
-          <span class="body-2 grey--text text-black">
-            หน้าที่ {{ page }} จาก {{ numOfPages }}
-          </span>
-
-          <q-btn
-            class="text-dark bg-grey-4"
-            flat
-            dense
-            @click="page = page < numOfPages ? page + 1 : page"
-          >
-            <q-icon name="mdi-chevron-right" />
-          </q-btn>
+        <div class="pdf-viewer-wrapper shadow-5">
+          <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
         </div>
       </q-card-section>
 
-      <q-card-section v-else>
-        <div class="full-width row flex-center text-accent q-gutter-sm">
-          <span
-            ><div
-              style="
-                height: 60vh;
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
-              "
-              class="text-grey-5"
-            >
-              <q-spinner color="primary" size="3em" :thickness="10" />
-            </div>
-          </span>
+      <q-card-section v-else class="col flex flex-center">
+        <div class="text-center">
+          <q-spinner color="primary" size="4em" :thickness="10" />
         </div>
       </q-card-section>
+
+      <q-page-sticky position="bottom-right" :offset="[20, 20]">
+        <q-btn
+          fab
+          size="xl"
+          icon="mdi-download"
+          color="primary"
+          @click="onDownloadFile"
+          :loading="!isLoadPDF"
+        >
+          <q-tooltip>ดาวน์โหลดไฟล์ PDF</q-tooltip>
+        </q-btn>
+      </q-page-sticky>
     </q-card>
   </q-dialog>
 </template>
 
-<style scoped></style>
+<style scoped>
+/* สไตล์เพื่อให้ PDF ดูเหมือนวางบนโต๊ะ */
+.pdf-viewer-wrapper {
+  background-color: white;
+  width: 100%;
+  max-width: 900px; /* จำกัดความกว้างเพื่อความสวยงามบนจอใหญ่ */
+  transition: all 0.3s ease;
+}
+
+/* ปรับแต่ง Scrollbar ให้ดูสะอาดตา */
+.scroll::-webkit-scrollbar {
+  width: 8px;
+}
+.scroll::-webkit-scrollbar-thumb {
+  background: #bdbdbd;
+  border-radius: 4px;
+}
+.scroll::-webkit-scrollbar-thumb:hover {
+  background: #9e9e9e;
+}
+</style>