diff --git a/src/pages/11_credit-note/FormPage.vue b/src/pages/11_credit-note/FormPage.vue
index 8e013234..fae332e6 100644
--- a/src/pages/11_credit-note/FormPage.vue
+++ b/src/pages/11_credit-note/FormPage.vue
@@ -96,7 +96,7 @@ const pageState = reactive({
   mode: 'view' as 'view' | 'edit' | 'info',
 });
 
-const defaultRemark = '#[quotation-labor]<br/><br/>#[quotation-payment]';
+const defaultRemark = '';
 
 const formData = ref<CreditNotePayload>({
   quotationId: '',
@@ -798,16 +798,7 @@ onMounted(async () => {
             :default-remark="defaultRemark"
             :items="[]"
             :readonly="pageState.mode === 'info'"
-          >
-            <template #hint>
-              {{ $t('general.hintRemark') }}
-              <code>#[quotation-labor]</code>
-              {{ $t('general.quotationLabor') }}
-              {{ $t('general.or') }}
-              <code>#[quotation-payment]</code>
-              {{ $t('general.quotationPayment') }}
-            </template>
-          </RemarkExpansion>
+          ></RemarkExpansion>
 
           <QuotationFormReceipt
             v-if="creditNoteData && view === CreditNoteStatus.Success"
diff --git a/src/pages/12_debit-note/FormPage.vue b/src/pages/12_debit-note/FormPage.vue
index 30ee9bb1..0b6b1870 100644
--- a/src/pages/12_debit-note/FormPage.vue
+++ b/src/pages/12_debit-note/FormPage.vue
@@ -386,7 +386,7 @@ async function assignFormData(id: string) {
   selectedProductGroup.value =
     data.productServiceList[0]?.product.productGroup?.id || '';
 
-  (previousValue = {
+  ((previousValue = {
     id: data.id || undefined,
     debitNoteQuotationId: data.debitNoteQuotationId || undefined,
     productServiceList: structuredClone(
@@ -412,7 +412,7 @@ async function assignFormData(id: string) {
     quotationId: data.debitNoteQuotationId,
     remark: data.remark || undefined,
   }),
-    (currentFormData.value = structuredClone(previousValue));
+    (currentFormData.value = structuredClone(previousValue)));
 
   assignProductServiceList();
   assignSelectedWorker();
@@ -1192,7 +1192,6 @@ async function submitAccepted() {
             "
           />
 
-          <!-- TODO: bind remark -->
           <RemarkExpansion
             v-if="
               view === QuotationStatus.Issued ||
@@ -1200,6 +1199,8 @@ async function submitAccepted() {
               view === QuotationStatus.PaymentPending
             "
             :readonly="readonly"
+            :final-price="summaryPrice.finalPrice"
+            :selected-worker
             v-model:remark="currentFormData.remark"
           />
 
diff --git a/src/pages/12_debit-note/document-view/MainPage.vue b/src/pages/12_debit-note/document-view/MainPage.vue
index 563b4d02..33faa935 100644
--- a/src/pages/12_debit-note/document-view/MainPage.vue
+++ b/src/pages/12_debit-note/document-view/MainPage.vue
@@ -492,9 +492,8 @@ function print() {
           v-html="
             convertTemplate(data?.remark || '', {
               'quotation-payment': {
-                paymentType: data?.payCondition || 'Full',
+                paymentType: 'Full',
                 amount: summaryPrice.finalPrice,
-                installments: data?.paySplit,
               },
               'quotation-labor': {
                 name:
diff --git a/src/pages/12_debit-note/expansion/RemarkExpansion.vue b/src/pages/12_debit-note/expansion/RemarkExpansion.vue
index d33fcf73..0ed7d568 100644
--- a/src/pages/12_debit-note/expansion/RemarkExpansion.vue
+++ b/src/pages/12_debit-note/expansion/RemarkExpansion.vue
@@ -1,9 +1,21 @@
 <script lang="ts" setup>
+import { ref } from 'vue';
+import { convertTemplate } from 'src/utils/string-template';
+import { RequestWork } from 'src/stores/request-list';
+import { Employee } from 'src/stores/employee/types';
+
 defineProps<{
   readonly?: boolean;
+  items?: {
+    product: RequestWork['productService']['product'];
+    list: RequestWork[];
+  }[];
+  finalPrice?: number;
+  selectedWorker?: Employee[];
 }>();
 
 const remark = defineModel<string>('remark', { default: '' });
+const remarkWrite = ref<boolean>(false);
 </script>
 <template>
   <q-expansion-item
@@ -24,7 +36,23 @@ const remark = defineModel<string>('remark', { default: '' });
       <q-editor
         dense
         :readonly="readonly"
-        :model-value="remark"
+        :model-value="
+          !remarkWrite || readonly
+            ? convertTemplate(remark || '', {
+                'quotation-payment': {
+                  paymentType: 'Full',
+                  amount: finalPrice,
+                },
+                'quotation-labor': {
+                  name: selectedWorker.map(
+                    (v, i) =>
+                      `${i + 1}. ` +
+                      `${v.employeePassport.length !== 0 ? v.employeePassport[0].number + '_' : ''}  ${v.namePrefix}.${v.firstNameEN ? `${v.firstNameEN} ${v.lastNameEN}` : `${v.firstName} ${v.lastName}`}  `.toUpperCase(),
+                  ),
+                },
+              })
+            : remark || ''
+        "
         min-height="5rem"
         class="full-width"
         toolbar-bg="input-border"
@@ -48,7 +76,36 @@ const remark = defineModel<string>('remark', { default: '' });
             remark = v;
           }
         "
-      />
+      >
+        <template v-if="!readonly" v-slot:toggle>
+          <div class="text-caption row no-wrap q-px-sm">
+            <MainButton
+              :solid="!remarkWrite"
+              icon="mdi-eye-outline"
+              color="0 0% 40%"
+              @click="remarkWrite = false"
+              style="padding: 0 var(--size-2); cursor: pointer"
+              :style="{
+                color: remarkWrite ? 'hsl(0 0% 40%)' : undefined,
+              }"
+            >
+              {{ $t('general.view', { msg: $t('general.example') }) }}
+            </MainButton>
+            <MainButton
+              :solid="remarkWrite"
+              icon="mdi-pencil-outline"
+              color="0 0% 40%"
+              @click="remarkWrite = true"
+              style="padding: 0 var(--size-2); cursor: pointer"
+              :style="{
+                color: !remarkWrite ? 'hsl(0 0% 40%)' : undefined,
+              }"
+            >
+              {{ $t('general.edit') }}
+            </MainButton>
+          </div>
+        </template>
+      </q-editor>
     </main>
   </q-expansion-item>
 </template>