diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index 14cfb13b..d4b5b5ff 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -22,7 +22,7 @@ import {
   dialog,
 } from 'src/stores/utils';
 
-import { useReceipt } from 'stores/payment';
+import { useInvoice, useReceipt } from 'stores/payment';
 import useCustomerStore from 'stores/customer';
 import useOptionStore from 'stores/options';
 import { useQuotationForm } from './form';
@@ -104,6 +104,7 @@ const employeeFormStore = useEmployeeForm();
 const customerStore = useCustomerStore();
 const quotationForm = useQuotationForm();
 const quotationStore = useQuotationStore();
+const invoiceStore = useInvoice();
 const optionStore = useOptionStore();
 const { t, locale } = useI18n();
 const ocrStore = useOcrStore();
@@ -291,13 +292,13 @@ async function fetchStatus() {
       title: 'Issued',
       status: getStatus(quotationFormData.value.quotationStatus, 0, -1),
       active: () => view.value === View.Quotation,
-      handler: () => (view.value = View.Quotation),
+      handler: () => ((view.value = View.Quotation), (code.value = '')),
     },
     {
       title: 'Accepted',
       status: getStatus(quotationFormData.value.quotationStatus, 1, 0),
       active: () => view.value === View.Accepted,
-      handler: () => (view.value = View.Accepted),
+      handler: () => ((view.value = View.Accepted), (code.value = '')),
     },
     {
       title: 'Invoice',
@@ -313,6 +314,13 @@ async function fetchStatus() {
           quotationFormData.value.payCondition === 'BillFull'
             ? View.Invoice
             : View.InvoicePre;
+
+        if (
+          quotationFormData.value.payCondition === 'Full' ||
+          quotationFormData.value.payCondition === 'BillFull'
+        ) {
+          getInvoiceCodeFullPay();
+        }
       },
     },
     {
@@ -335,6 +343,7 @@ async function fetchStatus() {
       handler: () => {
         fetchReceipt();
         view.value = View.Receipt;
+        code.value = '';
       },
     },
     {
@@ -1034,6 +1043,18 @@ enum View {
 }
 
 const view = ref<View>(View.Quotation);
+
+const code = ref<string>('');
+
+async function getInvoiceCode(invoiceId: string) {
+  const ret = await invoiceStore.getInvoice(invoiceId);
+  if (ret) code.value = ret.code;
+}
+
+async function getInvoiceCodeFullPay() {
+  const ret = await invoiceStore.getInvoiceList();
+  if (ret) code.value = ret.result.at(0)?.code || '';
+}
 </script>
 
 <template>
@@ -1050,12 +1071,8 @@ const view = ref<View>(View.Quotation);
           <q-img src="/icons/favicon-512x512.png" width="3rem" />
         </a>
         <span class="column text-h6 text-bold q-ml-md">
-
-          {{
-            $t(
-              `quotation.status.${view === View.InvoicePre || view === View.Invoice ? 'Invoice' : view === View.Payment ? 'PaymentInProcess' : view === View.Receipt ? 'Receipt' : 'Issued'}`,
-            )
-          }}
+          {{ $t('quotation.title') }}
+          {{ code || quotationFormState.source?.code || '' }}
           <span class="text-caption text-regular app-text-muted">
             {{
               $t('quotation.processOn', {
@@ -1578,9 +1595,11 @@ const view = ref<View>(View.Quotation);
                           :class="{ 'cursor-pointer': props.row.invoiceId }"
                           :props="props"
                           @click="
-                            () => {
+                            async () => {
                               if (props.row.invoiceId) {
                                 // TODO: get invoice code
+                                await getInvoiceCode(props.row.invoiceId);
+
                                 selectedInstallmentNo =
                                   quotationFormState.source?.paySplit
                                     .filter(
diff --git a/src/stores/payment/types.ts b/src/stores/payment/types.ts
index c5c68d7e..7ee3411e 100644
--- a/src/stores/payment/types.ts
+++ b/src/stores/payment/types.ts
@@ -4,6 +4,8 @@ import { CreatedBy } from '../types';
 export type Invoice = {
   id: string;
 
+  code: string;
+
   amount: number;
 
   installements: QuotationFull['paySplit'];
@@ -23,6 +25,7 @@ export type InvoicePayload = {
 };
 
 export type Payment = {
+  code?: string;
   paymentStatus: string;
   date: Date;
   amount: number;