diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerFooter.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerFooter.js
index de8d78e73..143abcfd5 100644
--- a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerFooter.js
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerFooter.js
@@ -18,12 +18,12 @@ export default function CreditNoteDetailDrawerFooter() {
       <TotalLines className={clsx(CreditNoteDetailCls.total_lines)}>
         <TotalLine
           title={<T id={'credit_note.drawer.label_subtotal'} />}
-          value={<FormatNumber value={creditNote.amount} />}
+          value={<FormatNumber value={creditNote.formatted_amount} />}
           className={CreditNoteDetailCls.total_line_subtotal}
         />
         <TotalLine
           title={<T id={'credit_note.drawer.label_total'} />}
-          value={creditNote.amount}
+          value={creditNote.formatted_amount}
           className={CreditNoteDetailCls.total_line_total}
         />
       </TotalLines>
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.js
index d12ef104a..0ec121f61 100644
--- a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.js
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.js
@@ -18,7 +18,7 @@ export default function CreditNoteDetailHeader() {
     <div className={clsx(CreditNoteDetailCls.detail_panel_header)}>
       <DetailsMenu>
         <DetailItem label={intl.get('amount')}>
-          <span class="big-number">{creditNote.amount}</span>
+          <span class="big-number">{creditNote.formatted_amount}</span>
         </DetailItem>
         <DetailItem
           label={intl.get('credit_note.drawer.label_credit_note_no')}
@@ -30,7 +30,9 @@ export default function CreditNoteDetailHeader() {
         />
         <DetailItem
           label={intl.get('credit_note.drawer.label_credit_note_date')}
-          children={<FormatDate value={creditNote.credit_note_date} />}
+          children={
+            <FormatDate value={creditNote.formatted_credit_note_date} />
+          }
         />
       </DetailsMenu>
 
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerFooter.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerFooter.js
index e8d8b05d5..6e0579c0b 100644
--- a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerFooter.js
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerFooter.js
@@ -11,7 +11,6 @@ import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCredi
  * Vendor Credit detail panel footer.
  */
 export default function VendorCreditDetailDrawerFooter() {
-
   const { vendorCredit } = useVendorCreditDetailDrawerContext();
 
   return (
@@ -19,16 +18,15 @@ export default function VendorCreditDetailDrawerFooter() {
       <TotalLines className={clsx(VendorCreditDetailCls.total_lines)}>
         <TotalLine
           title={<T id={'vendor_credit.drawer.label_subtotal'} />}
-          value={<FormatNumber value={vendorCredit.amount} />}
+          value={<FormatNumber value={vendorCredit.formatted_amount} />}
           className={VendorCreditDetailCls.total_line_subtotal}
         />
         <TotalLine
           title={<T id={'vendor_credit.drawer.label_total'} />}
-          value={vendorCredit.amount}
+          value={vendorCredit.formatted_amount}
           className={VendorCreditDetailCls.total_line_total}
         />
       </TotalLines>
-      
     </div>
-  )
+  );
 }
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.js
index 84f2286de..3ecfd6afb 100644
--- a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.js
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.js
@@ -17,7 +17,7 @@ export default function VendorCreditDetailHeader() {
     <div className={clsx(VendorCreditDetailCls.detail_panel_header)}>
       <DetailsMenu>
         <DetailItem label={intl.get('amount')}>
-          <span class="big-number">{vendorCredit.amount}</span>
+          <span class="big-number">{vendorCredit.formatted_amount}</span>
         </DetailItem>
         <DetailItem
           label={intl.get('vendor_credit.drawer.label_vendor_credit_no')}
@@ -29,7 +29,9 @@ export default function VendorCreditDetailHeader() {
         />
         <DetailItem
           label={intl.get('vendor_credit.drawer.label_vendor_credit_date')}
-          children={<FormatDate value={vendorCredit.vendor_credit_date} />}
+          children={
+            <FormatDate value={vendorCredit.formatted_vendor_credit_date} />
+          }
         />
       </DetailsMenu>