diff --git a/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js
index 676ecd5e4..339d61800 100644
--- a/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js
@@ -11,6 +11,7 @@ import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
 import withEstimatesActions from './withEstimatesActions';
 import withSettings from 'containers/Settings/withSettings';
 import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 import { useEstimatesListContext } from './EstimatesListProvider';
 import { ActionsMenu, useEstiamtesTableColumns } from './components';
@@ -24,6 +25,9 @@ function EstimatesDataTable({
 
   // #withAlertsActions
   openAlert,
+
+  // #withDrawerActions
+  openDrawer,
 }) {
   const history = useHistory();
 
@@ -62,6 +66,11 @@ function EstimatesDataTable({
   const handleRejectEstimate = ({ id }) => {
     openAlert('estimate-reject', { estimateId: id });
   };
+  
+  // Handle drawer estimate.
+  const handleDrawerEstimate = () => {
+    openDrawer('estimate-drawer', {});
+  };
 
   // Handles fetch data.
   const handleFetchData = useCallback(
@@ -104,6 +113,7 @@ function EstimatesDataTable({
         onReject: handleRejectEstimate,
         onDeliver: handleDeliverEstimate,
         onDelete: handleDeleteEstimate,
+        onDrawer: handleDrawerEstimate,
       }}
     />
   );
@@ -112,6 +122,7 @@ function EstimatesDataTable({
 export default compose(
   withEstimatesActions,
   withAlertsActions,
+  withDrawerActions,
   withSettings(({ organizationSettings }) => ({
     baseCurrency: organizationSettings?.baseCurrency,
   })),
diff --git a/client/src/containers/Sales/Estimates/EstimatesLanding/components.js b/client/src/containers/Sales/Estimates/EstimatesLanding/components.js
index ff5bec06f..8b066814e 100644
--- a/client/src/containers/Sales/Estimates/EstimatesLanding/components.js
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/components.js
@@ -49,7 +49,7 @@ export const statusAccessor = (row) => (
  */
 export function ActionsMenu({
   row: { original },
-  payload: { onEdit, onDeliver, onReject, onApprove, onDelete },
+  payload: { onEdit, onDeliver, onReject, onApprove, onDelete ,onDrawer },
 }) {
   const { formatMessage } = useIntl();
 
@@ -100,6 +100,10 @@ export function ActionsMenu({
           />
         </Choose.When>
       </Choose>
+      <MenuItem
+          text={formatMessage({ id: 'estimate_paper' })}
+          onClick={() => onDrawer()}
+        />
       <MenuItem
         text={formatMessage({ id: 'delete_estimate' })}
         intent={Intent.DANGER}
diff --git a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js
index 69205b52b..cc500013a 100644
--- a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js
@@ -9,10 +9,11 @@ import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import withInvoices from './withInvoices'; 
+import withInvoices from './withInvoices';
 import withInvoiceActions from './withInvoiceActions';
 import withSettings from 'containers/Settings/withSettings';
 import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 import { useInvoicesTableColumns, ActionsMenu } from './components';
 import { useInvoicesListContext } from './InvoicesListProvider';
@@ -32,6 +33,9 @@ function InvoicesDataTable({
 
   // #withAlertsActions
   openAlert,
+  
+  // #withDrawerActions
+  openDrawer,
 }) {
   const history = useHistory();
 
@@ -62,6 +66,11 @@ function InvoicesDataTable({
     history.push(`/invoices/${invoice.id}/edit`);
   };
 
+  // Handle drawer invoice.
+  const handleDrawerInvoice = () => {
+    openDrawer('invoice-drawer', {});
+  };
+
   // Handles fetch data once the table state change.
   const handleDataTableFetchData = useCallback(
     ({ pageSize, pageIndex, sortBy }) => {
@@ -104,6 +113,7 @@ function InvoicesDataTable({
         onDelete: handleDeleteInvoice,
         onDeliver: handleDeliverInvoice,
         onEdit: handleEditInvoice,
+        onDrawer: handleDrawerInvoice,
         baseCurrency,
       }}
     />
@@ -114,6 +124,7 @@ export default compose(
   withDashboardActions,
   withInvoiceActions,
   withAlertsActions,
+  withDrawerActions,
   withInvoices(({ invoicesTableState }) => ({ invoicesTableState })),
   withSettings(({ organizationSettings }) => ({
     baseCurrency: organizationSettings?.baseCurrency,
diff --git a/client/src/containers/Sales/Invoices/InvoicesLanding/components.js b/client/src/containers/Sales/Invoices/InvoicesLanding/components.js
index 043b673f9..10ac36416 100644
--- a/client/src/containers/Sales/Invoices/InvoicesLanding/components.js
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/components.js
@@ -8,7 +8,7 @@ import {
   ProgressBar,
   Popover,
   Position,
-  Button
+  Button,
 } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import moment from 'moment';
@@ -18,11 +18,9 @@ import { Money, AppToaster } from 'components';
 import { formatMessage } from 'services/intl';
 import { safeCallback } from 'utils';
 
-
 const calculateStatus = (paymentAmount, balanceAmount) => {
   return round(paymentAmount / balanceAmount, 2);
-}
-  
+};
 
 export const statusAccessor = (row) => {
   return (
@@ -95,7 +93,7 @@ export const handleDeleteErrors = (errors) => {
 };
 
 export function ActionsMenu({
-  payload: { onEdit, onDeliver, onDelete },
+  payload: { onEdit, onDeliver, onDelete, onDrawer },
   row: { original },
 }) {
   const { formatMessage } = useIntl();
@@ -119,6 +117,10 @@ export function ActionsMenu({
           onClick={safeCallback(onDeliver, original)}
         />
       </If>
+      <MenuItem
+        text={formatMessage({ id: 'invoice_paper' })}
+        onClick={() => onDrawer()}
+      />
       <MenuItem
         text={formatMessage({ id: 'delete_invoice' })}
         intent={Intent.DANGER}
diff --git a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js
index ec5d8e649..0ef260db0 100644
--- a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js
@@ -11,6 +11,7 @@ import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
 import withPaymentReceives from './withPaymentReceives';
 import withPaymentReceivesActions from './withPaymentReceivesActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
 import withSettings from 'containers/Settings/withSettings';
 import { usePaymentReceivesColumns, ActionsMenu } from './components';
 import { usePaymentReceivesListContext } from './PaymentReceiptsListProvider';
@@ -27,6 +28,9 @@ function PaymentReceivesDataTable({
 
   // #withAlertsActions
   openAlert,
+
+  // #withDrawerActions
+  openDrawer,
 }) {
   const history = useHistory();
 
@@ -53,6 +57,11 @@ function PaymentReceivesDataTable({
     openAlert('payment-receive-delete', { paymentReceiveId: id });
   };
 
+  // Handle drawer payment receive.
+  const handleDrawerPaymentReceive = () => {
+    openDrawer('payment-receive-drawer', {});
+  };
+
   // Handle datatable fetch once the table's state changing.
   const handleDataTableFetchData = useCallback(
     ({ pageIndex, pageSize, sortBy }) => {
@@ -93,6 +102,7 @@ function PaymentReceivesDataTable({
       payload={{
         onDelete: handleDeletePaymentReceive,
         onEdit: handleEditPaymentReceive,
+        onDrawer: handleDrawerPaymentReceive,
       }}
     />
   );
@@ -101,6 +111,7 @@ function PaymentReceivesDataTable({
 export default compose(
   withPaymentReceivesActions,
   withAlertsActions,
+  withDrawerActions,
   withPaymentReceives(({ paymentReceivesTableState }) => ({
     paymentReceivesTableState,
   })),
diff --git a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
index d97397766..6ca80c75d 100644
--- a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
@@ -18,7 +18,7 @@ import { safeCallback } from 'utils';
  */
 export function ActionsMenu({
   row: { original: paymentReceive },
-  payload: { onEdit, onDelete },
+  payload: { onEdit, onDelete, onDrawer },
 }) {
   const { formatMessage } = useIntl();
 
@@ -34,6 +34,10 @@ export function ActionsMenu({
         text={formatMessage({ id: 'edit_payment_receive' })}
         onClick={safeCallback(onEdit, paymentReceive)}
       />
+      <MenuItem
+        text={formatMessage({ id: 'payment_receive_paper' })}
+        onClick={() => onDrawer()}
+      />
       <MenuItem
         text={formatMessage({ id: 'delete_payment_receive' })}
         intent={Intent.DANGER}
diff --git a/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js
index 120814d1f..a63f8de1b 100644
--- a/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js
@@ -9,6 +9,7 @@ import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
 
 import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
 import withReceipts from './withReceipts';
 import withReceiptsActions from './withReceiptsActions';
 import withSettings from 'containers/Settings/withSettings';
@@ -31,6 +32,9 @@ function ReceiptsDataTable({
 
   // #withAlertsActions
   openAlert,
+
+  // #withDrawerActions
+  openDrawer,
 }) {
   const history = useHistory();
 
@@ -61,6 +65,11 @@ function ReceiptsDataTable({
     openAlert('receipt-close', { receiptId: receipt.id });
   };
 
+    // Handle drawer receipts.
+    const handleDrawerReceipt = () => {
+      openDrawer('receipt-drawer', {});
+    };
+
   // Handles the datable fetch data once the state changing.
   const handleDataTableFetchData = useCallback(
     ({ sortBy, pageIndex, pageSize }) => {
@@ -102,6 +111,7 @@ function ReceiptsDataTable({
         onEdit: handleEditReceipt,
         onDelete: handleDeleteReceipt,
         onClose: handleCloseReceipt,
+        onDrawer:handleDrawerReceipt,
         baseCurrency,
       }}
     />
@@ -111,6 +121,7 @@ function ReceiptsDataTable({
 export default compose(
   withAlertsActions,
   withReceiptsActions,
+  withDrawerActions,
   withReceipts(({ receiptTableState }) => ({
     receiptTableState,
   })),
diff --git a/client/src/containers/Sales/Receipts/ReceiptsLanding/components.js b/client/src/containers/Sales/Receipts/ReceiptsLanding/components.js
index 12ac79e9a..01f998b54 100644
--- a/client/src/containers/Sales/Receipts/ReceiptsLanding/components.js
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/components.js
@@ -15,7 +15,7 @@ import { Choose, Money, Icon, If } from 'components';
 import moment from 'moment';
 
 export function ActionsMenu({
-  payload: { onEdit, onDelete, onClose },
+  payload: { onEdit, onDelete, onClose ,onDrawer },
   row: { original: receipt },
 }) {
   const { formatMessage } = useIntl();
@@ -38,6 +38,10 @@ export function ActionsMenu({
           onClick={safeCallback(onClose, receipt)}
         />
       </If>
+      <MenuItem
+          text={formatMessage({ id: 'receipt_paper' })}
+          onClick={() => onDrawer()}
+        />
       <MenuItem
         text={formatMessage({ id: 'delete_receipt' })}
         intent={Intent.DANGER}