diff --git a/src/pages/05_quotation/preview/ViewHeader.vue b/src/pages/05_quotation/preview/ViewHeader.vue
index 2ddd58bf..8b43edf8 100644
--- a/src/pages/05_quotation/preview/ViewHeader.vue
+++ b/src/pages/05_quotation/preview/ViewHeader.vue
@@ -8,11 +8,36 @@ import { Branch } from 'src/stores/branch/types';
 import { CustomerBranchRelation, Details } from 'src/stores/quotations/types';
 // NOTE: Import Components
 
+enum View {
+  Quotation,
+  Invoice,
+  Payment,
+  Receipt,
+}
+
 defineProps<{
   branch: Branch;
   customer: CustomerBranchRelation;
   details: Details;
+  view: View;
 }>();
+
+function titleMode(mode: View): string {
+  if (mode === View.Quotation) {
+    return 'preview.title.quotation';
+  }
+  if (mode === View.Invoice) {
+    return 'preview.title.invoice';
+  }
+  if (mode === View.Payment) {
+    return 'preview.title.payment';
+  }
+  if (mode === View.Receipt) {
+    return 'preview.title.receipt';
+  }
+
+  return '';
+}
 </script>
 
 <template>
@@ -24,7 +49,7 @@ defineProps<{
       class="column"
       style="text-align: center; width: 50%; font-weight: 800; font-size: 24px"
     >
-      ใบเสนอราคา
+      {{ $t(titleMode(view)) }}
     </div>
   </div>
 
@@ -57,7 +82,7 @@ defineProps<{
     </section>
     <section class="detail-quotation-info">
       <div>
-        <div>เลขที่ใบเสนอราคา</div>
+        <div>{{ $t('general.itemNo', { msg: `${$t(titleMode(view))}` }) }}</div>
         <div>{{ details.code }}</div>
       </div>
       <div>