diff --git a/src/pages/05_quotation/peview/ViewForm.vue b/src/pages/05_quotation/peview/ViewForm.vue
index ac3fa982..d4ff98da 100644
--- a/src/pages/05_quotation/peview/ViewForm.vue
+++ b/src/pages/05_quotation/peview/ViewForm.vue
@@ -1,22 +1,29 @@
 <script lang="ts" setup>
+import { storeToRefs } from 'pinia';
 import { onMounted, nextTick, ref, watch } from 'vue';
+import { precisionRound } from 'src/utils/arithmetic';
 import ThaiBahtText from 'thai-baht-text';
 
 // NOTE: Import stores
 import useOptionStore from 'stores/options';
 import { formatNumberDecimal } from 'stores/utils';
+import { useQuotationForm } from 'pages/05_quotation/form';
 import { commaInput } from 'stores/utils';
+import { useConfigStore } from 'stores/config';
 
 // NOTE  Import Types
 import { BankBook } from 'stores/branch/types';
+import { QuotationPayload } from 'src/stores/quotations/types';
 
 // NOTE: Import Components
 import ViewHeader from './ViewHeader.vue';
 import BankComponents from './BankComponents.vue';
-import { readonly } from 'vue';
 
+const quotationForm = useQuotationForm();
 const optionStore = useOptionStore();
-let count = 50;
+const configStore = useConfigStore();
+
+const { data: config } = storeToRefs(configStore);
 
 type Product = {
   id: string;
@@ -37,14 +44,6 @@ type SummaryPrice = {
   finalPrice: number;
 };
 
-const summaryPrice = ref<SummaryPrice>({
-  totalPrice: 0,
-  totalDiscount: 0,
-  vat: 0,
-  vatExcluded: 0,
-  finalPrice: 15525,
-});
-
 const note = ref<string>('asdasd\d    \n อะไรครับdasdasd');
 const productList = ref<Product[]>([
   {
@@ -83,6 +82,15 @@ const productList = ref<Product[]>([
 
 const elements = ref<HTMLElement[]>([]);
 const chunks = ref<Product[][]>([[]]);
+const data = ref<QuotationPayload>();
+
+const summaryPrice = ref<SummaryPrice>({
+  totalPrice: 0,
+  totalDiscount: 0,
+  vat: 0,
+  vatExcluded: 0,
+  finalPrice: 0,
+});
 
 const bankList = ref<BankBook[]>([
   {
@@ -137,7 +145,62 @@ function getHeight(el: HTMLElement) {
 }
 
 onMounted(async () => {
+  let str =
+    localStorage.getItem('quotation-preview') ||
+    sessionStorage.getItem('quotation-preview');
+
+  if (!str) return;
+
+  const obj: QuotationPayload = JSON.parse(str);
+
+  if (obj) sessionStorage.setItem('quotation-preview', JSON.stringify(obj));
+
+  delete localStorage['quotation-preview'];
+
+  data.value = JSON.parse(sessionStorage.getItem('quotation-preview') || '{}');
+
+  productList.value = data.value?.productServiceList.map((v) => ({
+    id: v.product.id,
+    code: v.product.code,
+    detail: v.product.detail,
+    amount: v.amount,
+    priceUnit: v.pricePerUnit,
+    discount: v.discount,
+    vat: v.vat,
+    value: 0,
+  }));
+
+  summaryPrice.value = obj.productServiceList.reduce(
+    (a, c) => {
+      const price = precisionRound((c.pricePerUnit || 0) * c.amount);
+      const vat = precisionRound(
+        ((c.pricePerUnit || 0) * c.amount - (c.discount || 0)) *
+          (config.value?.vat || 0.07),
+      );
+
+      a.totalPrice = precisionRound(a.totalPrice + price);
+      a.totalDiscount = precisionRound(a.totalDiscount + Number(c.discount));
+      a.vat = c.product.calcVat ? precisionRound(a.vat + vat) : a.vat;
+      a.vatExcluded = c.product.calcVat
+        ? a.vatExcluded
+        : precisionRound(a.vat + vat);
+      a.finalPrice = precisionRound(
+        a.totalPrice - a.totalDiscount + a.vat - Number(obj.discount || 0),
+      );
+
+      return a;
+    },
+    {
+      totalPrice: 0,
+      totalDiscount: 0,
+      vat: 0,
+      vatExcluded: 0,
+      finalPrice: 0,
+    },
+  );
+
   await optionStore.fetchOption();
+
   assignData();
 });