diff --git a/src/pages/05_quotation/MainPage.vue b/src/pages/05_quotation/MainPage.vue
index 340491b1..ab884a00 100644
--- a/src/pages/05_quotation/MainPage.vue
+++ b/src/pages/05_quotation/MainPage.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { pageTabs, fieldSelectedOption } from './constants';
-import { useQuotationForm } from './form';
 
 import { onMounted, reactive, ref } from 'vue';
 import { useRouter } from 'vue-router';
@@ -15,6 +14,7 @@ import useEmployeeStore from 'stores/employee';
 import useFlowStore from 'src/stores/flow';
 import useOcrStore from 'stores/ocr';
 import useMyBranch from 'stores/my-branch';
+import { useQuotationForm } from './form';
 
 // NOTE  Import Types
 import { CustomerBranchCreate } from 'stores/customer/types';
@@ -74,7 +74,7 @@ import {
 import QuotationView from './QuotationView.vue';
 import { watch } from 'vue';
 
-const quotationForm = useQuotationForm();
+const quotationFormStore = useQuotationForm();
 const customerFormStore = useCustomerForm();
 const employeeFormStore = useEmployeeForm();
 const employeeStore = useEmployeeStore();
@@ -83,7 +83,7 @@ const flowStore = useFlowStore();
 const userBranch = useMyBranch();
 const ocrStore = useOcrStore();
 
-const { currentFormData: quotationFormData } = storeToRefs(quotationForm);
+const { currentFormData: quotationFormData } = storeToRefs(quotationFormStore);
 const { state: customerFormState, currentFormData: customerFormData } =
   storeToRefs(customerFormStore);
 const { state: employeeFormState, currentFromDataEmployee } =
@@ -753,13 +753,13 @@ watch(() => pageState.currentTab, fetchQuotationList);
                 :date="new Date(v.createdAt).toLocaleString()"
                 :amount="v.workerCount"
                 :customer-name="
-                  v.customerBranch?.registerName ||
-                  `${v.customerBranch?.firstName || '-'} ${v.customerBranch?.lastName || ''}`
+                  v.customerBranch.registerName ||
+                  `${v.customerBranch.firstName || '-'} ${v.customerBranch.lastName || ''}`
                 "
                 :reporter="v.actorName"
                 :total-price="v.totalPrice"
-                @view="console.log('view')"
-                @edit="console.log('edit')"
+                @view="quotationFormStore.assignFormData(v.id)"
+                @edit="quotationFormStore.assignFormData(v.id, 'edit')"
                 @link="console.log('link')"
                 @upload="console.log('upload')"
                 @delete="console.log('delete')"
diff --git a/src/pages/05_quotation/form.ts b/src/pages/05_quotation/form.ts
index d0596547..d8e48be2 100644
--- a/src/pages/05_quotation/form.ts
+++ b/src/pages/05_quotation/form.ts
@@ -7,7 +7,7 @@ import { QuotationPayload, EmployeeWorker } from 'src/stores/quotations/types';
 // NOTE: Import stores
 import { useQuotationStore } from 'stores/quotations';
 
-const DEFAULT_DATA: QuotationPayload = {
+const DEFAULT_DATA: QuotationPayload & { id?: string } = {
   productServiceList: [],
   urgent: false,
   customerBranchId: '',
@@ -56,12 +56,24 @@ export const useQuotationForm = defineStore('form-quotation', () => {
     currentFormData.value = structuredClone(resetFormData);
   }
 
-  async function assignFormData(id: string) {
+  async function assignFormData(id: string, mode: 'info' | 'edit' = 'info') {
     const data = await quotationStore.getQuotation(id);
 
     if (!data) return; // NOTE: Error should be handled globally by axios instance
 
-    currentFormState.value.mode = 'edit';
+    resetFormData = Object.assign(data, {
+      dueDate: new Date(data.dueDate),
+      payBillDate: data.payBillDate ? new Date(data.payBillDate) : undefined,
+      worker: data.worker.map((v) =>
+        Object.assign(v.employee, {
+          dateOfBirth: new Date(v.employee.dateOfBirth),
+        }),
+      ),
+    });
+
+    currentFormData.value = structuredClone(resetFormData);
+
+    currentFormState.value.mode = mode;
   }
 
   function submiQuotationt() {
@@ -87,6 +99,7 @@ export const useQuotationForm = defineStore('form-quotation', () => {
 
   return {
     currentFormData,
+    currentFormState,
 
     injectNewEmployee,
     isFormDataDifferent,