diff --git a/packages/server/src/services/Sales/PaymentReceives/PaymentReceiveTransformer.ts b/packages/server/src/services/Sales/PaymentReceives/PaymentReceiveTransformer.ts
index 531023ce3..5ca84db07 100644
--- a/packages/server/src/services/Sales/PaymentReceives/PaymentReceiveTransformer.ts
+++ b/packages/server/src/services/Sales/PaymentReceives/PaymentReceiveTransformer.ts
@@ -10,6 +10,7 @@ export class PaymentReceiveTransfromer extends Transformer {
    */
   public includeAttributes = (): string[] => {
     return [
+      'subtotalFormatted',
       'formattedPaymentDate',
       'formattedAmount',
       'formattedExchangeRate',
@@ -26,6 +27,18 @@ export class PaymentReceiveTransfromer extends Transformer {
     return this.formatDate(payment.paymentDate);
   };
 
+  /**
+   * Retrieve the formatted payment subtotal.
+   * @param {IPaymentReceive} payment 
+   * @returns {string}
+   */
+  protected subtotalFormatted = (payment: IPaymentReceive): string => {
+    return formatNumber(payment.amount, {
+      currencyCode: payment.currencyCode,
+      money: false,
+    });
+  };
+
   /**
    * Retrieve formatted payment amount.
    * @param {ISaleInvoice} invoice
diff --git a/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTableFooter.tsx b/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTableFooter.tsx
index eeee13ffe..868aecc0d 100644
--- a/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTableFooter.tsx
+++ b/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTableFooter.tsx
@@ -3,10 +3,9 @@ import React from 'react';
 import styled from 'styled-components';
 
 import {
-  FormatNumber,
+  T,
   TotalLineTextStyle,
   TotalLineBorderStyle,
-  T,
   TotalLine,
   TotalLines,
 } from '@/components';
@@ -27,7 +26,7 @@ export default function PaymentReceiveDetailTableFooter() {
       >
         <TotalLine
           title={<T id={'payment_receive.details.subtotal'} />}
-          value={<FormatNumber value={paymentReceive.amount} />}
+          value={paymentReceive.subtotal_formatted}
         />
         <TotalLine
           title={<T id={'payment_receive.details.total'} />}
diff --git a/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/utils.tsx b/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/utils.tsx
index 8971f3ec6..984eb5658 100644
--- a/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/utils.tsx
+++ b/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/utils.tsx
@@ -10,7 +10,7 @@ import {
   MenuItem,
   Menu,
 } from '@blueprintjs/core';
-import { Icon, FormatNumberCell } from '@/components';
+import { Icon } from '@/components';
 import { getColumnWidth } from '@/utils';
 import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
 
@@ -40,9 +40,8 @@ export const usePaymentReceiveEntriesColumns = () => {
       },
       {
         Header: intl.get('invoice_amount'),
-        accessor: 'invoice.balance',
-        Cell: FormatNumberCell,
-        width: getColumnWidth(entries, 'invoice.balance', {
+        accessor: 'invoice.total_formatted',
+        width: getColumnWidth(entries, 'invoice.total_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),
@@ -51,10 +50,9 @@ export const usePaymentReceiveEntriesColumns = () => {
       },
       {
         Header: intl.get('amount_due'),
-        accessor: 'invoice.due_amount',
-        Cell: FormatNumberCell,
+        accessor: 'invoice.due_amount_formatted',
         align: 'right',
-        width: getColumnWidth(entries, 'invoice.due_amount', {
+        width: getColumnWidth(entries, 'invoice.due_amount_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),