diff --git a/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentDrawer.js b/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawer.js
similarity index 82%
rename from client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentDrawer.js
rename to client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawer.js
index 747085e55..623445283 100644
--- a/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentDrawer.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawer.js
@@ -6,7 +6,7 @@ import { Drawer, DrawerSuspense } from 'components';
 import { compose } from 'utils';
 
 const PaymentReceiveDrawerContent = lazy(() =>
-  import('containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplate'),
+  import('./PaymentReceiveDrawerContent'),
 );
 
 /**
@@ -16,7 +16,7 @@ function PaymentReceiveDrawer({
   name,
   //#withDrawer
   isOpen,
-  payload,
+  payload: { paymentReceiveId },
 
   closeDrawer,
 }) {
@@ -28,7 +28,7 @@ function PaymentReceiveDrawer({
   return (
     <Drawer isOpen={isOpen} isClose={handleDrawerClose}>
       <DrawerSuspense>
-        <PaymentReceiveDrawerContent />
+        <PaymentReceiveDrawerContent paymentReceiveId={paymentReceiveId} />
       </DrawerSuspense>
     </Drawer>
   );
diff --git a/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawerContent.js b/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawerContent.js
new file mode 100644
index 000000000..2cbf9c34e
--- /dev/null
+++ b/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawerContent.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { PaymentReceiveDrawerProvider } from './PaymentReceiveDrawerProvider';
+import PaymentReceivePaper from './PaymentReceivePaper';
+/**
+ *  payment receive drawer content.
+ */
+export default function PaymentReceiveDrawerContent({
+  // #ownProp
+  paymentReceiveId,
+}) {
+  
+  return (
+    <PaymentReceiveDrawerProvider paymentReceiveId={paymentReceiveId}>
+      <PaymentReceivePaper />
+    </PaymentReceiveDrawerProvider>
+  );
+}
diff --git a/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawerProvider.js b/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawerProvider.js
new file mode 100644
index 000000000..6e6b34b82
--- /dev/null
+++ b/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawerProvider.js
@@ -0,0 +1,30 @@
+import React, { createContext, useContext } from 'react';
+import { usePaymentReceive } from 'hooks/query';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+
+const PaymentReceiveDrawerContext = createContext();
+
+function PaymentReceiveDrawerProvider({ paymentReceiveId, ...props }) {
+  const {
+    data: paymentReceive,
+    isFetching: isPaymentReceiveLoading,
+  } = usePaymentReceive(paymentReceiveId, {
+    enabled: !!paymentReceiveId,
+  });
+
+  // Provider payload.
+  const provider = {
+    paymentReceiveId,
+    paymentReceive,
+  };
+
+  return (
+    <DashboardInsider loading={isPaymentReceiveLoading}>
+      <PaymentReceiveDrawerContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+const usePaymentReceiveDrawerContext = () =>
+  useContext(PaymentReceiveDrawerContext);
+
+export { PaymentReceiveDrawerProvider, usePaymentReceiveDrawerContext };
diff --git a/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceivePaper.js b/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceivePaper.js
new file mode 100644
index 000000000..50cc17622
--- /dev/null
+++ b/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceivePaper.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import PaymentPaperTemplate from 'containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplate';
+import { usePaymentReceiveDrawerContext } from './PaymentReceiveDrawerProvider';
+
+export default function PaymentReceivePaper() {
+  const { paymentReceive } = usePaymentReceiveDrawerContext();
+
+  return <PaymentPaperTemplate paperData={paymentReceive.paymentReceive} />;
+}
diff --git a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js
index 0ef260db0..a3b7ac39b 100644
--- a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js
@@ -58,8 +58,8 @@ function PaymentReceivesDataTable({
   };
 
   // Handle drawer payment receive.
-  const handleDrawerPaymentReceive = () => {
-    openDrawer('payment-receive-drawer', {});
+  const handleDrawerPaymentReceive = ({ id }) => {
+    openDrawer('payment-receive-drawer', { paymentReceiveId: id });
   };
 
   // Handle datatable fetch once the table's state changing.
diff --git a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
index 38878355f..189fb3548 100644
--- a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
@@ -37,7 +37,7 @@ export function ActionsMenu({
       <MenuItem
         icon={<Icon icon={'receipt-24'} iconSize={16} />}
         text={formatMessage({ id: 'payment_receive_paper' })}
-        onClick={() => onDrawer()}
+        onClick={safeCallback(onDrawer, paymentReceive)}
       />
       <MenuItem
         text={formatMessage({ id: 'delete_payment_receive' })}
diff --git a/client/src/hooks/query/paymentReceives.js b/client/src/hooks/query/paymentReceives.js
index ee243fc4d..86eb71b67 100644
--- a/client/src/hooks/query/paymentReceives.js
+++ b/client/src/hooks/query/paymentReceives.js
@@ -33,7 +33,7 @@ export function usePaymentReceives(query, props) {
       },
       filterMeta: {},
     }),
-  }
+  };
 }
 
 /**
@@ -118,20 +118,15 @@ export function usePaymentReceive(id, props) {
     {
       select: (res) => ({
         paymentReceive: res.data.payment_receive,
-        receivableEntries: res.data.receivable_entries,
       }),
-      ...props
+      ...props,
     },
   );
 
   return {
     ...states,
-    data: defaultTo(states.data, {
-      paymentReceive: {},
-      receivableInvoices: {},
-      paymentInvoices: {}
-    }),
-  }
+    data: defaultTo(states.data, {}),
+  };
 }
 
 /**
@@ -158,6 +153,6 @@ export function usePaymentReceiveEditPage(id, props) {
     data: defaultTo(states.data, {
       paymentReceive: {},
       entries: [],
-    })
-  }
+    }),
+  };
 }
diff --git a/client/src/lang/en/index.js b/client/src/lang/en/index.js
index bdcfb955a..ba3a32915 100644
--- a/client/src/lang/en/index.js
+++ b/client/src/lang/en/index.js
@@ -996,4 +996,9 @@ export default {
   contact_type: 'Contact Type',
   duplicate_contact: 'Duplicate Contact',
   contact_type_: 'Contact type',
+  the_payment_amount_that_received:
+    'The payment amount that received from the customer is more than the due amount for this invoice.',
+  invoice_number: 'Invoice number',
+  invoice_date: 'Invoice date',
+  invoice_amount: 'Invoice amount',
 };
diff --git a/client/src/style/components/Drawer/DrawerTemplate.scss b/client/src/style/components/Drawer/DrawerTemplate.scss
index b04724d89..ae2a6d463 100644
--- a/client/src/style/components/Drawer/DrawerTemplate.scss
+++ b/client/src/style/components/Drawer/DrawerTemplate.scss
@@ -1,15 +1,13 @@
 #page-size {
   margin: 0 auto;
-  // background-color: #ffffff;
   background-color: transparent;
   width: 21cm;
-  height: 29.7cm;
+  // height: 29.7cm;
   padding-bottom: 20px;
 }
 
 .template {
   background-color: transparent;
-  // margin: 30px;
   margin: 20px;
 
   &__header {
@@ -31,7 +29,6 @@
     display: flex;
     flex-wrap: wrap;
     border-bottom: 2px solid #1155cc;
-    // padding-bottom: 40px;
     padding-bottom: 35px;
 
     &__info {
@@ -62,30 +59,28 @@
     flex-direction: column;
     padding: 0px 5px;
     margin: 5px 0px 20px 0px;
-    font-size: 16px;
 
-    &__rows {
-      display: flex;
-      margin-bottom: 15px;
-      color: #1155cc;
+    .bigcapital-datatable {
+      .table {
+        .thead .tr .th .resizer {
+          display: none;
+        }
 
-      &--cell {
-        flex: 0 20%;
+        .thead .th {
+          font-size: 16px;
+          font-weight: 400;
+          border-bottom: none;
+          background-color: transparent;
+          margin-bottom: 15px;
+          color: #1155cc;
+        }
+        .tbody .tr .td {
+          font-size: 15px;
+          padding: 10px;
+          margin-bottom: 15px;
+          border-bottom: 1px solid #cecbcb;
+        }
       }
-      &--cell-payment-receive {
-        flex: 1;
-      }
-
-      &--cell:first-child {
-        flex: 1 0 20%;
-        padding-left: 5px;
-      }
-    }
-
-    &__rows:not(:first-child) {
-      color: #000;
-      border-bottom: 1px solid #cecbcb;
-      padding-bottom: 15px;
     }
   }
 
@@ -96,9 +91,6 @@
       font-weight: 400;
       color: #666666;
       margin-bottom: 5px;
-
-      // font-size: 18px;
-      // font-weight: 500;
     }
 
     ul {