diff --git a/src/modules/18_command/components/Step/Dialog1_Perview.vue b/src/modules/18_command/components/Step/Dialog1_Perview.vue
index 7d0520a57..5c3ec89d2 100644
--- a/src/modules/18_command/components/Step/Dialog1_Perview.vue
+++ b/src/modules/18_command/components/Step/Dialog1_Perview.vue
@@ -14,7 +14,7 @@ import DialogHeader from "@/components/DialogHeader.vue";
 import { useCounterMixin } from "@/stores/mixin";
 
 const $q = useQuasar();
-const { dialogConfirm } = useCounterMixin();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
 
 const modal = defineModel<boolean>("modal", { required: true });
 const dataTemplateDetail = defineModel<any>("dataTemplateDetail", {
@@ -27,6 +27,7 @@ const page = ref<number>(1);
 const vuePDFRef = ref<any>(null);
 
 async function fetchPDF(type: string = "docx") {
+  showLoader();
   await axios
     .post(
       config.API.reportTemplate + `/${type}`,
@@ -61,23 +62,27 @@ async function fetchPDF(type: string = "docx") {
       setTimeout(() => {
         pdfSrc.value = pdfData.pdf.value;
         numOfPages.value = pdfData.pages.value;
+        hideLoader();
       }, 1500);
     })
-    .catch(async (e) => {
-      //   messageError($q, e);
-      //   hideLoader();
+    .catch((e) => {
+      messageError($q, e);
+      hideLoader();
     });
 }
 
 function onClose() {
   modal.value = false;
+  pdfSrc.value = undefined;
 }
 
-onMounted(() => {
-  setTimeout(() => {
-    fetchPDF();
-  }, 1000);
+watch(modal, () => {
+  modal.value && fetchPDF();
 });
+
+// onMounted(() => {
+//   setTimeout(() => {}, 1000);
+// });
 </script>
 
 <template>
@@ -86,7 +91,7 @@ onMounted(() => {
       <DialogHeader :tittle="'ตัวอย่างคำสั่ง'" :close="onClose" />
       <q-separator />
 
-      <q-card-section bordered class="card-pdf q-ma-md q-pa-md">
+      <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"