diff --git a/src/components/CommercialDoc/index.js b/src/components/CommercialDoc/index.js
index c8e2c593b..d1480c3f5 100644
--- a/src/components/CommercialDoc/index.js
+++ b/src/components/CommercialDoc/index.js
@@ -21,5 +21,5 @@ export const CommercialDocEntriesTable = styled(DataTable)`
 `;
 
 export const CommercialDocFooter = styled.div`
-  margin-top: 25px;
+  margin-top: 28px;
 `;
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailFooter.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailFooter.js
index 24a1cc598..cf19eab7d 100644
--- a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailFooter.js
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailFooter.js
@@ -15,9 +15,14 @@ import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvid
  */
 export default function CreditNoteDetailFooter() {
   const { creditNote } = useCreditNoteDetailDrawerContext();
+
   return (
     <CommercialDocFooter>
       <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+        <If condition={creditNote.terms_conditions}>
+          <DetailItem label={<T id={'note'} />} children={creditNote.note} />
+        </If>
+
         <If condition={creditNote.terms_conditions}>
           <DetailItem label={<T id={'terms_conditions'} />}>
             {creditNote.terms_conditions}
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.js
index ead8b8243..d4d145704 100644
--- a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.js
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.js
@@ -42,6 +42,12 @@ export default function CreditNoteDetailHeader() {
       <Row>
         <Col xs={6}>
           <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem
+              label={intl.get('credit_note.drawer.label_credit_note_date')}
+            >
+              <FormatDate value={creditNote.formatted_credit_note_date} />
+            </DetailItem>
+
             <DetailItem
               label={intl.get('credit_note.drawer.label_credit_note_no')}
             >
@@ -53,12 +59,6 @@ export default function CreditNoteDetailHeader() {
                 {creditNote.customer?.display_name}
               </CustomerDrawerLink>
             </DetailItem>
-
-            <DetailItem
-              label={intl.get('credit_note.drawer.label_credit_note_date')}
-            >
-              <FormatDate value={creditNote.formatted_credit_note_date} />
-            </DetailItem>
           </DetailsMenu>
         </Col>
 
@@ -77,11 +77,6 @@ export default function CreditNoteDetailHeader() {
               label={intl.get('reference')}
               children={defaultTo(creditNote.reference_no, '-')}
             />
-            <DetailItem
-              label={intl.get('note')}
-              children={defaultTo(creditNote.note, '-')}
-            />
-
             <DetailItem
               label={<T id={'credit_note.drawer.label_created_at'} />}
               children={<FormatDate value={creditNote.created_at} />}
diff --git a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailFooter.js b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailFooter.js
index 5ba3e99ff..61ab7800f 100644
--- a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailFooter.js
+++ b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailFooter.js
@@ -1,42 +1,29 @@
 import React from 'react';
-import styled from 'styled-components';
 
 import {
   T,
-  TotalLines,
-  TotalLine,
-  TotalLineBorderStyle,
-  TotalLineTextStyle,
+  CommercialDocFooter,
+  DetailsMenu,
+  If,
+  DetailItem,
 } from 'components';
 import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
 
 /**
  * Payment made - Details panel - Footer.
  */
-export default function PaymentMadeDetailFooter() {
+export function PaymentMadeDetailFooter() {
   const { paymentMade } = usePaymentMadeDetailContext();
 
   return (
-    <PaymentMadeFooterRoot>
-      <PaymentMadeTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
-        <TotalLine
-          title={<T id={'payment_made.details.subtotal'} />}
-          value={paymentMade.amount}
-          borderStyle={TotalLineBorderStyle.SingleDark}
-        />
-        <TotalLine
-          title={<T id={'payment_made.details.total'} />}
-          value={paymentMade.formatted_amount}
-          borderStyle={TotalLineBorderStyle.DoubleDark}
-          textStyle={TotalLineTextStyle.Bold}
-        />
-      </PaymentMadeTotalLines>
-    </PaymentMadeFooterRoot>
+    <CommercialDocFooter>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+        <If condition={paymentMade.statement}>
+          <DetailItem label={<T id={'payment_made.details.statement'} />}>
+            {paymentMade.statement}
+          </DetailItem>
+        </If>
+      </DetailsMenu>
+    </CommercialDocFooter>
   );
 }
-
-export const PaymentMadeFooterRoot = styled.div``;
-
-export const PaymentMadeTotalLines = styled(TotalLines)`
-  margin-left: auto;
-`;
diff --git a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js
index 6e36411f5..5ad9f68b5 100644
--- a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js
+++ b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js
@@ -34,6 +34,10 @@ export default function PaymentMadeDetailHeader() {
       <Row>
         <Col xs={6}>
           <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem
+              label={intl.get('payment_date')}
+              children={<FormatDate value={paymentMade.payment_date} />}
+            />
             <DetailItem
               label={intl.get('payment_made.details.payment_number')}
               children={defaultTo(paymentMade.payment_number, '-')}
@@ -47,11 +51,6 @@ export default function PaymentMadeDetailHeader() {
               label={intl.get('payment_account')}
               children={paymentMade.payment_account?.name}
             />
-
-            <DetailItem
-              label={intl.get('payment_date')}
-              children={<FormatDate value={paymentMade.payment_date} />}
-            />
           </DetailsMenu>
         </Col>
         <Col xs={6}>
@@ -61,8 +60,8 @@ export default function PaymentMadeDetailHeader() {
             minLabelSize={'180px'}
           >
             <DetailItem
-              label={intl.get('description')}
-              children={defaultTo(paymentMade.statement, '-')}
+              label={intl.get('reference')}
+              children={defaultTo(paymentMade.reference, '-')}
             />
             <DetailItem
               label={intl.get('created_at')}
diff --git a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js
index 6cccd96c0..be9aeb73e 100644
--- a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js
+++ b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js
@@ -20,8 +20,7 @@ function PaymentMadeDetailProvider({ paymentMadeId, ...props }) {
       enabled: !!paymentMadeId,
     },
   );
-
-  //provider.
+  // Provider state.
   const provider = {
     paymentMadeId,
     paymentMade,
diff --git a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTab.js b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTab.js
index 292639a13..90918ca01 100644
--- a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTab.js
+++ b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTab.js
@@ -4,7 +4,8 @@ import { CommercialDocBox } from 'components';
 
 import PaymentMadeDetailHeader from './PaymentMadeDetailHeader';
 import PaymentMadeDetailTable from './PaymentMadeDetailTable';
-import PaymentMadeDetailFooter from './PaymentMadeDetailFooter';
+import PaymentMadeDetailTableFooter from './PaymentMadeDetailTableFooter';
+import { PaymentMadeDetailFooter } from './PaymentMadeDetailFooter';
 
 /**
  * Payment made detail tab.
@@ -15,6 +16,7 @@ export default function PaymentMadeDetailTab() {
     <CommercialDocBox>
       <PaymentMadeDetailHeader />
       <PaymentMadeDetailTable />
+      <PaymentMadeDetailTableFooter />
       <PaymentMadeDetailFooter />
     </CommercialDocBox>
   );
diff --git a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTableFooter.js b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTableFooter.js
new file mode 100644
index 000000000..9342529d7
--- /dev/null
+++ b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTableFooter.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+  T,
+  TotalLines,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+} from 'components';
+import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
+
+/**
+ * Payment made - Details panel - Footer.
+ */
+export default function PaymentMadeDetailTableFooter() {
+  const { paymentMade } = usePaymentMadeDetailContext();
+
+  return (
+    <PaymentMadeFooterRoot>
+      <PaymentMadeTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+        <TotalLine
+          title={<T id={'payment_made.details.subtotal'} />}
+          value={paymentMade.amount}
+          borderStyle={TotalLineBorderStyle.SingleDark}
+        />
+        <TotalLine
+          title={<T id={'payment_made.details.total'} />}
+          value={paymentMade.formatted_amount}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
+        />
+      </PaymentMadeTotalLines>
+    </PaymentMadeFooterRoot>
+  );
+}
+
+export const PaymentMadeFooterRoot = styled.div``;
+
+export const PaymentMadeTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;
diff --git a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js
index 182f9d7dd..b99756e72 100644
--- a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js
+++ b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js
@@ -10,7 +10,6 @@ import {
   DetailItem,
   CommercialDocHeader,
   CommercialDocTopHeader,
-  ButtonLink,
   CustomerDrawerLink,
 } from 'components';
 import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
@@ -34,6 +33,10 @@ export default function PaymentReceiveDetailHeader() {
       <Row>
         <Col xs={6}>
           <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem
+              label={intl.get('payment_date')}
+              children={<FormatDate value={paymentReceive.payment_date} />}
+            />
             <DetailItem
               label={intl.get('payment_receive.details.payment_number')}
               children={defaultTo(paymentReceive.payment_receive_no, '-')}
@@ -48,10 +51,6 @@ export default function PaymentReceiveDetailHeader() {
               label={intl.get('deposit_account')}
               children={paymentReceive.deposit_account?.name}
             />
-            <DetailItem
-              label={intl.get('payment_date')}
-              children={<FormatDate value={paymentReceive.payment_date} />}
-            />
           </DetailsMenu>
         </Col>
 
@@ -62,8 +61,8 @@ export default function PaymentReceiveDetailHeader() {
             minLabelSize={'180px'}
           >
             <DetailItem
-              label={intl.get('description')}
-              children={defaultTo(paymentReceive.statement, '—')}
+              label={intl.get('reference')}
+              children={defaultTo(paymentReceive.reference_no, '-')}
             />
             <DetailItem
               label={intl.get('created_at')}
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailFooter.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailFooter.js
new file mode 100644
index 000000000..5e9800c27
--- /dev/null
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailFooter.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import {
+  CommercialDocFooter,
+  T,
+  If,
+  DetailsMenu,
+  DetailItem,
+} from '../../../components';
+import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
+
+export function VendorCreditDetailFooter() {
+  const { vendorCredit } = useVendorCreditDetailDrawerContext();
+
+  return (
+    <CommercialDocFooter>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'150px'}>
+        <If condition={vendorCredit.note}>
+          <DetailItem label={<T id={'note'} />} children={vendorCredit.note} />
+        </If>
+      </DetailsMenu>
+    </CommercialDocFooter>
+  );
+}
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.js
index c24d95041..7c987b336 100644
--- a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.js
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.js
@@ -38,6 +38,11 @@ export default function VendorCreditDetailHeader() {
       <Row>
         <Col xs={6}>
           <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem
+              label={intl.get('vendor_credit.drawer.label_vendor_credit_date')}
+            >
+              <FormatDate value={vendorCredit.formatted_vendor_credit_date} />
+            </DetailItem>
             <DetailItem
               label={intl.get('vendor_credit.drawer.label_vendor_credit_no')}
             >
@@ -49,12 +54,6 @@ export default function VendorCreditDetailHeader() {
                 {vendorCredit.vendor?.display_name}
               </VendorDrawerLink>
             </DetailItem>
-
-            <DetailItem
-              label={intl.get('vendor_credit.drawer.label_vendor_credit_date')}
-            >
-              <FormatDate value={vendorCredit.formatted_vendor_credit_date} />
-            </DetailItem>
           </DetailsMenu>
         </Col>
         <Col xs={6}>
@@ -72,10 +71,6 @@ export default function VendorCreditDetailHeader() {
               label={intl.get('reference')}
               children={defaultTo(vendorCredit.reference_no, '-')}
             />
-            <DetailItem
-              label={intl.get('note')}
-              children={defaultTo(vendorCredit.note, '-')}
-            />
             <DetailItem
               label={<T id={'vendor_credit.drawer.label_created_at'} />}
               children={<FormatDate value={vendorCredit.created_at} />}
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailPanel.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailPanel.js
index f158d0fff..00d7e19ec 100644
--- a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailPanel.js
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailPanel.js
@@ -5,6 +5,7 @@ import { CommercialDocBox } from 'components';
 import VendorCreditDetailHeader from './VendorCreditDetailHeader';
 import VendorCreditDetailTable from './VendorCreditDetailTable';
 import VendorCreditDetailDrawerFooter from './VendorCreditDetailDrawerFooter';
+import { VendorCreditDetailFooter } from './VendorCreditDetailFooter';
 
 /**
  * Vendor credit details panel.
@@ -16,6 +17,7 @@ export default function VendorCreditDetailPanel() {
       <VendorCreditDetailHeader />
       <VendorCreditDetailTable />
       <VendorCreditDetailDrawerFooter />
+      <VendorCreditDetailFooter />
     </CommercialDocBox>
   );
 }
diff --git a/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawer.js b/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawer.js
index aa452299c..18705f345 100644
--- a/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawer.js
+++ b/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawer.js
@@ -11,12 +11,11 @@ const InvoicesDrawerContent = lazy(() => import('./InvoiceDrawerContent'));
  */
 function InvoiceDrawer({
   name,
+
   //#withDrawer
   isOpen,
   payload: { invoiceId },
-
 }) {
-  
   return (
     <Drawer isOpen={isOpen} name={name}>
       <DrawerSuspense>
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index 7e4151972..d5678c528 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1193,6 +1193,7 @@
   "payment_made.details.payment_number": "Payment #",
   "payment_made.details.subtotal": "Subtotal",
   "payment_made.details.total": "TOTAL",
+  "payment_made.details.statement": "Statement",
   "payment_receive.details.payment_number": "Payment #",
   "payment_receive.details.total": "TOTAL",
   "payment_receive.details.subtotal": "Subtotal",