diff --git a/src/components/05_quotation/QuotationCard.vue b/src/components/05_quotation/QuotationCard.vue
index 47153e5e..e0e068f1 100644
--- a/src/components/05_quotation/QuotationCard.vue
+++ b/src/components/05_quotation/QuotationCard.vue
@@ -28,6 +28,7 @@ defineEmits<{
   (e: 'delete'): void;
   (e: 'changeStatus'): void;
   (e: 'example'): void;
+  (e: 'preview'): void;
 }>();
 </script>
 <template>
@@ -121,6 +122,7 @@ defineEmits<{
         outline
         color="primary"
         class="rounded q-ml-auto"
+        @click="$emit('preview')"
         padding="2px 8px"
       >
         <q-icon name="mdi-play-box-outline" size="xs" class="q-mr-xs" />
diff --git a/src/pages/05_quotation/MainPage.vue b/src/pages/05_quotation/MainPage.vue
index 651d9abd..514c25c5 100644
--- a/src/pages/05_quotation/MainPage.vue
+++ b/src/pages/05_quotation/MainPage.vue
@@ -275,6 +275,17 @@ async function fetchQuotationList() {
 }
 
 watch(() => pageState.currentTab, fetchQuotationList);
+
+async function storeDataLocal(id: string) {
+  await quotationFormStore.assignFormData(id, 'assign');
+
+  localStorage.setItem(
+    'quotation-preview',
+    JSON.stringify(quotationFormData.value),
+  );
+
+  window.open('/quotation/document-view', '_blank');
+}
 </script>
 
 <template>
@@ -538,6 +549,7 @@ watch(() => pageState.currentTab, fetchQuotationList);
                     : v.createdBy.firstName + ' ' + v.createdBy.lastName
                 "
                 :total-price="v.finalPrice"
+                @preview="storeDataLocal(v.id)"
                 @view="
                   () => {
                     triggerQuotationDialog({
diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index 54007776..fa3b701f 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -621,7 +621,7 @@ function storeDataLocal() {
     JSON.stringify(quotationFormData.value),
   );
 
-  window.open('/view', '_blank');
+  window.open('/quotation/document-view', '_blank');
 }
 </script>
 
diff --git a/src/pages/05_quotation/form.ts b/src/pages/05_quotation/form.ts
index 550de8df..5ef852fa 100644
--- a/src/pages/05_quotation/form.ts
+++ b/src/pages/05_quotation/form.ts
@@ -94,7 +94,10 @@ export const useQuotationForm = defineStore('form-quotation', () => {
     currentFormData.value = structuredClone(resetFormData);
   }
 
-  async function assignFormData(id: string, mode: 'info' | 'edit' = 'info') {
+  async function assignFormData(
+    id: string,
+    mode: 'info' | 'edit' | 'assign' = 'info',
+  ) {
     const data = await quotationStore.getQuotation(id);
 
     if (!data) return; // NOTE: Error should be handled globally by axios instance
@@ -127,6 +130,9 @@ export const useQuotationForm = defineStore('form-quotation', () => {
       locale === 'eng'
         ? data.createdBy.firstNameEN + ' ' + data.createdBy.lastNameEN
         : data.createdBy.firstName + ' ' + data.createdBy.lastName;
+
+    if (mode === 'assign') return;
+
     currentFormState.value.mode = mode;
   }
 
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 23a93d45..4a48f06e 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -93,8 +93,8 @@ const routes: RouteRecordRaw[] = [
     component: () => import('pages/05_quotation/QuotationForm.vue'),
   },
   {
-    path: '/view',
-    name: 'view',
+    path: '/quotation/document-view',
+    name: 'QuotationDocumentView',
     component: () => import('pages/05_quotation/peview/ViewForm.vue'),
   },