diff --git a/src/pages/05_quotation/preview/ViewForm.vue b/src/pages/05_quotation/preview/ViewForm.vue
index 6a78f69d..ed897742 100644
--- a/src/pages/05_quotation/preview/ViewForm.vue
+++ b/src/pages/05_quotation/preview/ViewForm.vue
@@ -113,8 +113,23 @@ function getHeight(el: HTMLElement) {
 }
 
 const details = ref<Details>();
+enum View {
+  Quotation,
+  Invoice,
+  Payment,
+  Receipt,
+}
+const view = ref<View>(View.Quotation);
 
 onMounted(async () => {
+  const currentDocumentType = new URL(window.location.href).searchParams.get(
+    'type',
+  );
+
+  if (currentDocumentType === 'invoice') view.value = View.Invoice;
+  if (currentDocumentType === 'payment') view.value = View.Payment;
+  if (currentDocumentType === 'receipt') view.value = View.Receipt;
+
   let str =
     localStorage.getItem('quotation-preview') ||
     sessionStorage.getItem('quotation-preview');
@@ -234,7 +249,14 @@ function print() {
   <div class="toolbar">
     <PrintButton solid @click="print" />
   </div>
-  <div class="row justify-between container color-quotation">
+  <div
+    class="row justify-between container color-quotation"
+    :class="{
+      'color-quotation': view === View.Quotation,
+      'color-invoice': view === View.Invoice,
+      'color-receipt': view === View.Receipt,
+    }"
+  >
     <section class="content" v-for="chunk in chunks">
       <ViewHeader
         v-if="!!branch && !!customer && !!details"
@@ -468,6 +490,16 @@ function print() {
   --main-hsl: var(--orange-6-hsl);
 }
 
+.color-invoice {
+  --main: var(--purple-9);
+  --main-hsl: var(--purple-9-hsl);
+}
+
+.color-receipt {
+  --main: var(--green-6);
+  --main-hsl: var(--green-6-hsl);
+}
+
 .toolbar {
   width: 100%;
   position: sticky;