diff --git a/src/pages/12_debit-note/FormPage.vue b/src/pages/12_debit-note/FormPage.vue
index 973aa1a3..d6d96a65 100644
--- a/src/pages/12_debit-note/FormPage.vue
+++ b/src/pages/12_debit-note/FormPage.vue
@@ -44,7 +44,7 @@ import {
 import { RequestWork } from 'src/stores/request-list/types';
 import { storeToRefs } from 'pinia';
 import useOptionStore from 'src/stores/options';
-import { deleteItem, dialogWarningClose } from 'src/stores/utils';
+import { deleteItem, dialog, dialogWarningClose } from 'src/stores/utils';
 import { useI18n } from 'vue-i18n';
 import { Employee } from 'src/stores/employee/types';
 import QuotationFormWorkerSelect from '../05_quotation/QuotationFormWorkerSelect.vue';
@@ -101,7 +101,7 @@ const productGroup = ref<ProductGroup[]>([]);
 const agentPrice = ref(false);
 const debitNoteData = ref<DebitNote>();
 const quotationData = ref<DebitNote['debitNoteQuotation']>();
-const view = ref<QuotationStatus | null>(null);
+const view = ref<QuotationStatus>(QuotationStatus.Issued);
 const fileList = ref<FileList>();
 const receiptList = ref<Receipt[]>([]);
 
@@ -258,6 +258,7 @@ const selectedInstallmentNo = ref<number[]>([]);
 const installmentAmount = ref<number>(0);
 
 const QUOTATION_STATUS = [
+  'Accepted',
   'PaymentPending',
   'PaymentSuccess',
   'ProcessComplete',
@@ -419,16 +420,23 @@ async function initStatus() {
     {
       title: 'title',
       status: debitNoteData.value?.id !== undefined ? 'done' : 'doing',
-      active: () => view.value === null,
-      handler: () => {
-        view.value = null;
-      },
+      active: () => view.value === QuotationStatus.Issued,
+      handler: () => (view.value = QuotationStatus.Issued),
+    },
+    {
+      title: 'accepted',
+      status:
+        debitNoteData.value?.id !== undefined
+          ? getStatus(debitNoteData.value.quotationStatus, 1, -1)
+          : 'waiting',
+      active: () => view.value === QuotationStatus.Accepted,
+      handler: () => (view.value = QuotationStatus.Accepted),
     },
     {
       title: 'payment',
       status:
         debitNoteData.value?.id !== undefined
-          ? getStatus(debitNoteData.value.quotationStatus, 1, -1)
+          ? getStatus(debitNoteData.value.quotationStatus, 2, 1)
           : 'waiting',
       active: () => view.value === QuotationStatus.PaymentPending,
       handler: async () => {
@@ -438,7 +446,7 @@ async function initStatus() {
 
     {
       title: 'receipt',
-      status: getStatus(debitNoteData.value?.quotationStatus, 1, 1),
+      status: getStatus(debitNoteData.value?.quotationStatus, 2, 2),
       active: () => view.value === QuotationStatus.PaymentSuccess,
       handler: () => {
         view.value = QuotationStatus.PaymentSuccess;
@@ -447,7 +455,7 @@ async function initStatus() {
 
     {
       title: 'processComplete',
-      status: getStatus(debitNoteData.value?.quotationStatus, 2, 1),
+      status: getStatus(debitNoteData.value?.quotationStatus, 3, 2),
       active: () => view.value === QuotationStatus.ProcessComplete,
       handler: () => {
         view.value = QuotationStatus.ProcessComplete;
@@ -786,7 +794,6 @@ async function submit() {
     }
 
     pageState.mode = 'info';
-
     assignFormData(res.id);
 
     initStatus();
@@ -877,7 +884,8 @@ onMounted(async () => {
   }
 
   if (typeof route.query['mode'] === 'string') {
-    pageState.mode = route.query['mode'] as 'create' | 'edit' | 'info';
+    pageState.mode =
+      (route.query['mode'] as 'create' | 'edit' | 'info') || 'info';
   }
 
   if (typeof route.query['tab'] === 'string') {
@@ -885,11 +893,34 @@ onMounted(async () => {
       {
         payment: QuotationStatus.PaymentPending,
         receipt: QuotationStatus.PaymentSuccess,
-      }[route.query['tab']] || null;
+      }[route.query['tab']] || QuotationStatus.Issued;
   }
 
   await useConfigStore().getConfig();
 });
+
+async function submitAccepted() {
+  dialog({
+    color: 'info',
+    icon: 'mdi-account-check',
+    title: t('dialog.title.confirmDebitNoteAccept'),
+    actionText: t('general.confirm'),
+    persistent: true,
+    message: t('dialog.message.quotationAccept'),
+    action: async () => {
+      if (!currentFormData.value.id) return;
+
+      const res = await debitNote.action.acceptDebitNote(
+        currentFormData.value.id,
+      );
+
+      if (res && typeof route.params['id'] === 'string') {
+        await assignFormData(route.params['id']);
+      }
+    },
+    cancel: () => {},
+  });
+}
 </script>
 
 <template>
@@ -954,7 +985,10 @@ onMounted(async () => {
           <!-- #TODO  add goToQuotation as @goto-quotation-->
 
           <DocumentExpansion
-            v-if="view === null"
+            v-if="
+              view === QuotationStatus.Issued ||
+              view === QuotationStatus.Accepted
+            "
             :readonly
             :registered-branch-id="quotationData?.registeredBranchId"
             :customer-id="quotationData?.customerBranchId"
@@ -985,7 +1019,10 @@ onMounted(async () => {
           />
 
           <WorkerItemExpansion
-            v-if="view === null"
+            v-if="
+              view === QuotationStatus.Issued ||
+              view === QuotationStatus.Accepted
+            "
             :readonly
             :hide-btn-add-worker="
               !readonly &&
@@ -998,7 +1035,10 @@ onMounted(async () => {
 
           <!-- #TODO add  openProductDialog at @add-product-->
           <ProductExpansion
-            v-if="view === null"
+            v-if="
+              view === QuotationStatus.Issued ||
+              view === QuotationStatus.Accepted
+            "
             :readonly
             :installment-input="currentFormData.payCondition === 'SplitCustom'"
             :max-installment="currentFormData.paySplitCount"
@@ -1016,7 +1056,10 @@ onMounted(async () => {
           />
 
           <PaymentExpansion
-            v-if="view === null"
+            v-if="
+              view === QuotationStatus.Issued ||
+              view === QuotationStatus.Accepted
+            "
             readonly
             :total-price="summaryPrice.finalPrice"
             class="q-mb-md"
@@ -1030,7 +1073,11 @@ onMounted(async () => {
 
           <!-- TODO: bind additional file -->
           <AdditionalFileExpansion
-            v-if="view === null || view === QuotationStatus.PaymentPending"
+            v-if="
+              view === QuotationStatus.Issued ||
+              view === QuotationStatus.Accepted ||
+              view === QuotationStatus.PaymentPending
+            "
             :readonly
             v-model:file-data="attachmentData"
             :transform-url="
@@ -1075,7 +1122,11 @@ onMounted(async () => {
 
           <!-- TODO: bind remark -->
           <RemarkExpansion
-            v-if="view === null || view === QuotationStatus.PaymentPending"
+            v-if="
+              view === QuotationStatus.Issued ||
+              view === QuotationStatus.Accepted ||
+              view === QuotationStatus.PaymentPending
+            "
             :readonly="readonly"
             v-model:remark="currentFormData.remark"
           />
@@ -1150,7 +1201,7 @@ onMounted(async () => {
                     installmentAmount = v.invoice.amount;
                   }
 
-                  view = null;
+                  view = QuotationStatus.Issued;
                 }
               "
               @example="() => exampleReceipt(v.id)"
@@ -1175,36 +1226,34 @@ onMounted(async () => {
         </MainButton>
 
         <div class="row q-gutter-x-sm">
-          <UndoButton
-            outlined
-            @click="
-              () => {
-                pageState.mode = 'info';
-              }
-            "
-            v-if="false"
-          />
-
+          <UndoButton outlined @click="pageState.mode = 'info'" v-if="false" />
+          {{ pageState.mode }}
           <SaveButton
-            v-if="!readonly && pageState.mode === 'create'"
+            v-if="!readonly"
             :disabled="
               selectedWorkerItem.length === 0 && productService.length === 0
             "
             @click="submit"
-            :label="true ? $t('debitNote.label.submit') : $t('general.save')"
-            :icon="
-              true
-                ? 'mdi-account-multiple-check-outline'
-                : 'mdi-content-save-outline'
-            "
             solid
-          ></SaveButton>
+          />
+
+          <SaveButton
+            v-if="false"
+            @click="submit"
+            :label="$t('debitNote.label.submit')"
+            icon="mdi-account-multiple-check-outline"
+            solid
+          />
 
           <EditButton
-            v-if="false"
+            v-if="
+              readonly &&
+              pageState.mode === 'info' &&
+              QuotationStatus.Issued === view
+            "
             class="no-print"
-            @click="pageState.mode = 'edit'"
             solid
+            @click="pageState.mode = 'edit'"
           />
         </div>
       </nav>