diff --git a/src/components/ViewPDF.vue b/src/components/ViewPDF.vue
index 3b4c60000..26f1b456b 100644
--- a/src/components/ViewPDF.vue
+++ b/src/components/ViewPDF.vue
@@ -3,6 +3,7 @@ import { ref, watch, computed, onUnmounted } 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 { useCounterMixin } from "@/stores/mixin";
@@ -28,6 +29,9 @@ const currentObjectUrl = ref<string | null>(null);
 // Computed properties for navigation
 const canGoPrevious = computed(() => page.value > 1);
 const canGoNext = computed(() => page.value < numOfPages.value);
+const pageInfo = computed(
+  () => `หน้าที่ ${page.value} จาก ${numOfPages.value}`
+);
 
 /**
  * Navigate to previous page
@@ -160,57 +164,102 @@ onUnmounted(() => {
     transition-show="slide-up"
     transition-hide="slide-down"
   >
-    <q-card class="column full-height bg-grey-2">
-      <DialogHeader :tittle="title" :close="onClose" class="bg-white" />
+    <q-card>
+      <DialogHeader :tittle="`${title}`" :close="onClose" />
+
       <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>
-
+      <!-- PDF Content -->
       <q-card-section
         v-if="isLoadPDF"
-        class="col scroll q-pa-md flex flex-center"
+        bordered
+        :class="
+          $q.screen.gt.xs
+            ? ['q-ma-xl', 'q-pa-xl', 'scroll']
+            : ['q-ma-xs', 'q-pa-xs', 'scroll']
+        "
       >
-        <div class="pdf-viewer-wrapper shadow-5">
-          <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
+        <!-- Top Navigation -->
+        <div class="pagination-controls">
+          <q-btn
+            class="nav-button"
+            flat
+            dense
+            :disable="!canGoPrevious"
+            @click="goToPreviousPage"
+          >
+            <q-icon name="mdi-chevron-left" />
+          </q-btn>
+
+          <span class="page-info">{{ pageInfo }}</span>
+
+          <q-btn
+            class="nav-button"
+            flat
+            dense
+            :disable="!canGoNext"
+            @click="goToNextPage"
+          >
+            <q-icon name="mdi-chevron-right" />
+          </q-btn>
+        </div>
+
+        <!-- PDF Viewer -->
+        <div class="pdf-container">
+          <VuePDF
+            ref="vuePDFRef"
+            :pdf="pdfSrc"
+            :page="page"
+            fit-parent
+            :scale="0.1"
+          />
+        </div>
+
+        <!-- Bottom Navigation -->
+        <div class="pagination-controls">
+          <q-btn
+            class="nav-button"
+            flat
+            dense
+            :disable="!canGoPrevious"
+            @click="goToPreviousPage"
+          >
+            <q-icon name="mdi-chevron-left" />
+          </q-btn>
+
+          <span class="page-info">{{ pageInfo }}</span>
+
+          <q-btn
+            class="nav-button"
+            flat
+            dense
+            :disable="!canGoNext"
+            @click="goToNextPage"
+          >
+            <q-icon name="mdi-chevron-right" />
+          </q-btn>
         </div>
       </q-card-section>
 
-      <q-card-section v-else class="col flex flex-center">
-        <div class="text-center">
-          <q-spinner color="primary" size="4em" :thickness="10" />
+      <!-- Loading State -->
+      <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>
         </div>
       </q-card-section>
-
       <q-page-sticky position="bottom-right" :offset="[20, 20]">
         <q-btn
           fab
@@ -228,23 +277,45 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
-/* สไตล์เพื่อให้ PDF ดูเหมือนวางบนโต๊ะ */
-.pdf-viewer-wrapper {
-  background-color: white;
-  width: 100%;
-  max-width: 900px; /* จำกัดความกว้างเพื่อความสวยงามบนจอใหญ่ */
-  transition: all 0.3s ease;
+.pagination-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
 }
 
-/* ปรับแต่ง Scrollbar ให้ดูสะอาดตา */
-.scroll::-webkit-scrollbar {
-  width: 8px;
+.nav-button {
+  color: #424242;
+  background-color: #f5f5f5;
 }
-.scroll::-webkit-scrollbar-thumb {
-  background: #bdbdbd;
-  border-radius: 4px;
+
+.nav-button:hover {
+  background-color: #eeeeee;
 }
-.scroll::-webkit-scrollbar-thumb:hover {
-  background: #9e9e9e;
+
+.page-info {
+  font-size: 14px;
+  color: #424242;
+  font-weight: 500;
+}
+
+.pdf-container {
+  width: 100%;
+  margin: 16px 0;
+}
+
+.loading-container {
+  height: 60vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #9e9e9e;
+}
+
+.loading-text {
+  color: #757575;
+  font-size: 16px;
+  margin: 0;
 }
 </style>