diff --git a/src/pages/12_debit-note/FormPage.vue b/src/pages/12_debit-note/FormPage.vue
index d6d96a65..1d4c4ef7 100644
--- a/src/pages/12_debit-note/FormPage.vue
+++ b/src/pages/12_debit-note/FormPage.vue
@@ -49,7 +49,7 @@ import { useI18n } from 'vue-i18n';
 import { Employee } from 'src/stores/employee/types';
 import QuotationFormWorkerSelect from '../05_quotation/QuotationFormWorkerSelect.vue';
 import { watch } from 'vue';
-import { ProductTree } from '../05_quotation/utils';
+import { ProductTree, quotationProductTree } from '../05_quotation/utils';
 import TableRequest from '../05_quotation/TableRequest.vue';
 import { RequestData, RequestDataStatus } from 'src/stores/request-list/types';
 import { useRequestList } from 'src/stores/request-list';
@@ -111,7 +111,6 @@ const productServiceList = ref<
   Required<QuotationPayload['productServiceList'][number]>[]
 >([]);
 const productServiceNodes = ref<ProductTree>([]);
-
 const currentFormData = ref<DebitNotePayload>({
   productServiceList: [],
   debitNoteQuotationId: '',
@@ -264,6 +263,17 @@ const QUOTATION_STATUS = [
   'ProcessComplete',
 ];
 
+watch(
+  () => productServiceList.value,
+  () => {
+    productServiceNodes.value = quotationProductTree(
+      productServiceList.value,
+      agentPrice.value,
+      config.value?.vat,
+    );
+  },
+);
+
 function toggleDeleteProduct(index: number) {
   // product display
   productServiceList.value.splice(index, 1);