diff --git a/client/src/containers/Drawers/PaperTemplate.js b/client/src/containers/Drawers/PaperTemplate.js
deleted file mode 100644
index 037ccd4d3..000000000
--- a/client/src/containers/Drawers/PaperTemplate.js
+++ /dev/null
@@ -1,123 +0,0 @@
-import React from 'react';
-import { Icon } from 'components';
-import 'style/components/Drawer/DrawerTemplate.scss';
-
-export default function PaperTemplate({ labels: propLabels }) {
-  const labels = {
-    name: 'Estimate',
-    billedTo: 'Billed to',
-    date: 'Estimate date',
-    refNo: 'Estimate No.',
-    billedFrom: 'Billed from',
-    amount: 'Estimate amount',
-    dueDate: 'Due date',
-    ...propLabels,
-  };
-
-  return (
-    <div id={'page-size'}>
-      <div className={'template'}>
-        <div className={'template__header'}>
-          <div className={'template__header--title'}>
-            <h1>{labels.name}</h1>
-            <p>info@bigcapital.ly </p>
-          </div>
-          <Icon icon="bigcapital" height={30} width={200} />
-        </div>
-
-        <div className="template__content">
-          <div className="template__content__info">
-            <span> {labels.billedTo} </span>
-            <p className={'info-paragraph'}>Joe Biden</p>
-          </div>
-          <div className="template__content__info">
-            <span> {labels.date} </span>
-
-            <p className={'info-paragraph'}>1/1/2022</p>
-          </div>
-          <div className="template__content__info">
-            <span> {labels.refNo} </span>
-            <p className={'info-paragraph'}>IN-2022</p>
-          </div>
-          <div className="template__content__info">
-            <span> {labels.amount} </span>
-            <p className={'info-paragraph-amount'}>6,000 LYD</p>
-          </div>
-          <div className="template__content__info">
-            <span> {labels.billedFrom} </span>
-            <p className={'info-paragraph'}>Donald Trump</p>
-          </div>
-          <div className="template__content__info">
-            <span> {labels.dueDate} </span>
-            <p className={'info-paragraph'}>25/03/2022</p>
-          </div>
-        </div>
-
-        <div className="template__table">
-          <div className="template__table__rows">
-            <span className="template__table__rows--cell ">Description</span>
-            <span className="template__table__rows--cell">Rate</span>
-            <span className="template__table__rows--cell">Qty</span>
-            <span className="template__table__rows--cell">Total</span>
-          </div>
-          <div className="template__table__rows">
-            <span className="template__table__rows--cell">
-              Nulla commodo magnanon dolor excepteur nisi aute laborum.
-            </span>
-            <span className="template__table__rows--cell">1</span>
-            <span className="template__table__rows--cell">1</span>
-            <span className="template__table__rows--cell">100 LYD</span>
-          </div>
-
-          <div className="template__table__rows">
-            <span className="template__table__rows--cell">
-              Nulla comm non dolor excepteur elit dolore eiusmod nisi aute
-              laborum.
-            </span>
-            <span className="template__table__rows--cell">1</span>
-            <span className="template__table__rows--cell">1</span>
-            <span className="template__table__rows--cell">100 LYD</span>
-          </div>
-          <div className="template__table__rows">
-            <span className="template__table__rows--cell">
-              Nulla comm non dolor excepteur elit dolore eiusmod nisi aute
-              laborum.
-            </span>
-            <span className="template__table__rows--cell">1</span>
-            <span className="template__table__rows--cell">1</span>
-            <span className="template__table__rows--cell">100 LYD</span>
-          </div>
-          <div className="template__table__rows">
-            <span className="template__table__rows--cell">
-              Nulla comm non dolor excepteur elit dolore eiusmod nisi aute
-              laborum.
-            </span>
-            <span className="template__table__rows--cell">1</span>
-            <span className="template__table__rows--cell">1</span>
-            <span className="template__table__rows--cell">100 LYD</span>
-          </div>
-          <div className="template__table__rows">
-            <span className="template__table__rows--cell">
-              Nulla comm non dolor excepteur elit dolore eiusmod nisi aute
-              laborum.
-            </span>
-            <span className="template__table__rows--cell">1</span>
-            <span className="template__table__rows--cell">1</span>
-            <span className="template__table__rows--cell">100 LYD</span>
-          </div>
-        </div>
-
-        <div className="template__terms">
-          <div className="template__terms__title">
-            <h4>Conditions and terms</h4>
-          </div>
-          <ul>
-            <li>Est excepteur laboris do sit dolore sit exercitation non.</li>
-            <li>Lorem duis aliqua minim elit cillum.</li>
-            <li>Dolor ad quis Lorem ut mollit consectetur.</li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/client/src/containers/Drawers/PaperTemplate/PaperTemplate.js b/client/src/containers/Drawers/PaperTemplate/PaperTemplate.js
new file mode 100644
index 000000000..f520dc9e1
--- /dev/null
+++ b/client/src/containers/Drawers/PaperTemplate/PaperTemplate.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import PaperTemplateHeader from './PaperTemplateHeader';
+import PaperTemplateTable from './PaperTemplateTable';
+import PaperTemplateFooter from './PaperTemplateFooter';
+import 'style/components/Drawer/DrawerTemplate.scss';
+
+export default function PaperTemplate({ labels: propLabels }) {
+  const labels = {
+    name: 'Estimate',
+    billedTo: 'Billed to',
+    date: 'Estimate date',
+    refNo: 'Estimate No.',
+    billedFrom: 'Billed from',
+    amount: 'Estimate amount',
+    dueDate: 'Due date',
+    ...propLabels,
+  };
+  return (
+    <div id={'page-size'}>
+      <div className={'template'}>
+        <PaperTemplateHeader defaultLabels={labels} />
+        <PaperTemplateTable />
+        <PaperTemplateFooter />
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/containers/Drawers/PaperTemplate/PaperTemplateFooter.js b/client/src/containers/Drawers/PaperTemplate/PaperTemplateFooter.js
new file mode 100644
index 000000000..b270005e2
--- /dev/null
+++ b/client/src/containers/Drawers/PaperTemplate/PaperTemplateFooter.js
@@ -0,0 +1,16 @@
+import React from 'react';
+
+export default function PaperTemplateFooter() {
+  return (
+    <div className="template__terms">
+      <div className="template__terms__title">
+        <h4>Conditions and terms</h4>
+      </div>
+      <ul>
+        <li>Est excepteur laboris do sit dolore sit exercitation non.</li>
+        <li>Lorem duis aliqua minim elit cillum.</li>
+        <li>Dolor ad quis Lorem ut mollit consectetur.</li>
+      </ul>
+    </div>
+  );
+}
diff --git a/client/src/containers/Drawers/PaperTemplate/PaperTemplateHeader.js b/client/src/containers/Drawers/PaperTemplate/PaperTemplateHeader.js
new file mode 100644
index 000000000..0413f5397
--- /dev/null
+++ b/client/src/containers/Drawers/PaperTemplate/PaperTemplateHeader.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Icon } from 'components';
+
+export default function PaperTemplateHeader({ defaultLabels }) {
+  return (
+    <>
+      <div className={'template__header'}>
+        <div className={'template__header--title'}>
+          <h1>{defaultLabels.name}</h1>
+          <p>info@bigcapital.ly </p>
+        </div>
+        <Icon icon="bigcapital" height={30} width={200} />
+      </div>
+
+      <div className="template__content">
+        <div className="template__content__info">
+          <span> {defaultLabels.billedTo} </span>
+          <p className={'info-paragraph'}>Joe Biden</p>
+        </div>
+        <div className="template__content__info">
+          <span> {defaultLabels.date} </span>
+
+          <p className={'info-paragraph'}>1/1/2022</p>
+        </div>
+        <div className="template__content__info">
+          <span> {defaultLabels.refNo} </span>
+          <p className={'info-paragraph'}>IN-2022</p>
+        </div>
+        <div className="template__content__info">
+          <span> {defaultLabels.amount} </span>
+          <p className={'info-paragraph-amount'}>6,000 LYD</p>
+        </div>
+        <div className="template__content__info">
+          <span> {defaultLabels.billedFrom} </span>
+          <p className={'info-paragraph'}>Donald Trump</p>
+        </div>
+        <div className="template__content__info">
+          <span> {defaultLabels.dueDate} </span>
+          <p className={'info-paragraph'}>25/03/2022</p>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/client/src/containers/Drawers/PaperTemplate/PaperTemplateTable.js b/client/src/containers/Drawers/PaperTemplate/PaperTemplateTable.js
new file mode 100644
index 000000000..e54454533
--- /dev/null
+++ b/client/src/containers/Drawers/PaperTemplate/PaperTemplateTable.js
@@ -0,0 +1,55 @@
+import React from 'react';
+
+export default function DrawerTemplateTable() {
+  return (
+    <div className="template__table">
+      <div className="template__table__rows">
+        <span className="template__table__rows--cell ">Description</span>
+        <span className="template__table__rows--cell">Rate</span>
+        <span className="template__table__rows--cell">Qty</span>
+        <span className="template__table__rows--cell">Total</span>
+      </div>
+      <div className="template__table__rows">
+        <span className="template__table__rows--cell">
+          Nulla commodo magnanon dolor excepteur nisi aute laborum.
+        </span>
+        <span className="template__table__rows--cell">1</span>
+        <span className="template__table__rows--cell">1</span>
+        <span className="template__table__rows--cell">100 LYD</span>
+      </div>
+
+      <div className="template__table__rows">
+        <span className="template__table__rows--cell">
+          Nulla comm non dolor excepteur elit dolore eiusmod nisi aute laborum.
+        </span>
+        <span className="template__table__rows--cell">1</span>
+        <span className="template__table__rows--cell">1</span>
+        <span className="template__table__rows--cell">100 LYD</span>
+      </div>
+      <div className="template__table__rows">
+        <span className="template__table__rows--cell">
+          Nulla comm non dolor excepteur elit dolore eiusmod nisi aute laborum.
+        </span>
+        <span className="template__table__rows--cell">1</span>
+        <span className="template__table__rows--cell">1</span>
+        <span className="template__table__rows--cell">100 LYD</span>
+      </div>
+      <div className="template__table__rows">
+        <span className="template__table__rows--cell">
+          Nulla comm non dolor excepteur elit dolore eiusmod nisi aute laborum.
+        </span>
+        <span className="template__table__rows--cell">1</span>
+        <span className="template__table__rows--cell">1</span>
+        <span className="template__table__rows--cell">100 LYD</span>
+      </div>
+      <div className="template__table__rows">
+        <span className="template__table__rows--cell">
+          Nulla comm non dolor excepteur elit dolore eiusmod nisi aute laborum.
+        </span>
+        <span className="template__table__rows--cell">1</span>
+        <span className="template__table__rows--cell">1</span>
+        <span className="template__table__rows--cell">100 LYD</span>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/containers/Drawers/PaymentPaperTemplate.js b/client/src/containers/Drawers/PaymentPaperTemplate.js
deleted file mode 100644
index c5eb4a3e5..000000000
--- a/client/src/containers/Drawers/PaymentPaperTemplate.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import React from 'react';
-import { Icon } from 'components';
-import 'style/components/Drawer/DrawerTemplate.scss';
-
-export default function PaymentPaperTemplate({ labels: propLabels }) {
-  const labels = {
-    title: 'Payment receive',
-    billedTo: 'Billed to',
-    paymentDate: 'Payment date',
-    paymentNo: 'Payment No.',
-    billedFrom: 'Billed from',
-    referenceNo: 'Reference No',
-    amountReceived: 'Amount received',
-    ...propLabels,
-  };
-
-  return (
-    <div id={'page-size'}>
-      <div className={'template'}>
-        <div className={'template__header'}>
-          <div className={'template__header--title'}>
-            <h1>{labels.title}</h1>
-            <p>info@bigcapital.ly </p>
-          </div>
-          <Icon icon="bigcapital" height={30} width={200} />
-        </div>
-
-        <div className="template__content">
-          <div className="template__content__info">
-            <span> {labels.billedTo} </span>
-            <p className={'info-paragraph'}>Step Currency</p>
-          </div>
-          <div className="template__content__info">
-            <span> {labels.paymentDate} </span>
-            <p className={'info-paragraph'}>1/1/2022</p>
-          </div>
-          <div className="template__content__info">
-            <span> {labels.paymentNo} </span>
-            <p className={'info-paragraph'}>IN-2022</p>
-          </div>
-          <div className="template__content__info">
-            <span> {labels.amountReceived} </span>
-            <p className={'info-paragraph-amount'}>60,000 USD</p>
-          </div>
-          <div className="template__content__info">
-            <span> {labels.billedFrom} </span>
-            <p className={'info-paragraph'}> Klay Thompson</p>
-          </div>
-          <div className="template__content__info">
-            <span> {labels.referenceNo} </span>
-            <p className={'info-paragraph'}></p>
-          </div>
-        </div>
-        <div className="template__table">
-          <div className="template__table__rows">
-            <span className="template__table__rows--cell-payment-receive ">
-              Invoice number
-            </span>
-            <span className="template__table__rows--cell-payment-receive ">
-              Invoice date
-            </span>
-            <span className="template__table__rows--cell-payment-receive ">
-              Invoice amount
-            </span>
-            <span className="template__table__rows--cell-payment-receive ">
-              Payment amount
-            </span>
-          </div>
-
-          <div className="template__table__rows">
-            <span className="template__table__rows--cell-payment-receive">
-              INV-1
-            </span>
-            <span className="template__table__rows--cell-payment-receive">
-              12 Jan 2021
-            </span>
-            <span className="template__table__rows--cell-payment-receive">
-              50,000 USD
-            </span>
-            <span className="template__table__rows--cell-payment-receive">
-              1000 USD
-            </span>
-          </div>
-          <div className="template__table__rows">
-            <span className="template__table__rows--cell-payment-receive">
-              INV-2{' '}
-            </span>
-            <span className="template__table__rows--cell-payment-receive">
-              12 Jan 2021
-            </span>
-            <span className="template__table__rows--cell-payment-receive">
-              50,000 USD
-            </span>
-            <span className="template__table__rows--cell-payment-receive">
-              1000 USD
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplate.js b/client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplate.js
new file mode 100644
index 000000000..9fdf6ba31
--- /dev/null
+++ b/client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplate.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import PaymentPaperTemplateHeader from './PaymentPaperTemplateHeader';
+import PaymentPaperTemplateTable from './PaymentPaperTemplateTable';
+import 'style/components/Drawer/DrawerTemplate.scss';
+
+export default function PaymentPaperTemplate({ labels: propLabels }) {
+  const labels = {
+    title: 'Payment receive',
+    billedTo: 'Billed to',
+    paymentDate: 'Payment date',
+    paymentNo: 'Payment No.',
+    billedFrom: 'Billed from',
+    referenceNo: 'Reference No',
+    amountReceived: 'Amount received',
+    ...propLabels,
+  };
+
+  return (
+    <div id={'page-size'}>
+      <div className={'template'}>
+        <PaymentPaperTemplateHeader defaultLabels={labels} />
+        <PaymentPaperTemplateTable />
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplateHeader.js b/client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplateHeader.js
new file mode 100644
index 000000000..7143158c2
--- /dev/null
+++ b/client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplateHeader.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Icon } from 'components';
+
+export default function PaymentPaperTemplateHeader({ defaultLabels }) {
+  return (
+    <>
+      <div className={'template__header'}>
+        <div className={'template__header--title'}>
+          <h1>{defaultLabels.title}</h1>
+          <p>info@bigcapital.ly </p>
+        </div>
+        <Icon icon="bigcapital" height={30} width={200} />
+      </div>
+
+      <div className="template__content">
+        <div className="template__content__info">
+          <span> {defaultLabels.billedTo} </span>
+          <p className={'info-paragraph'}>Step Currency</p>
+        </div>
+        <div className="template__content__info">
+          <span> {defaultLabels.paymentDate} </span>
+          <p className={'info-paragraph'}>1/1/2022</p>
+        </div>
+        <div className="template__content__info">
+          <span> {defaultLabels.paymentNo} </span>
+          <p className={'info-paragraph'}>IN-2022</p>
+        </div>
+        <div className="template__content__info">
+          <span> {defaultLabels.amountReceived} </span>
+          <p className={'info-paragraph-amount'}>60,000 USD</p>
+        </div>
+        <div className="template__content__info">
+          <span> {defaultLabels.billedFrom} </span>
+          <p className={'info-paragraph'}> Klay Thompson</p>
+        </div>
+        <div className="template__content__info">
+          <span> {defaultLabels.referenceNo} </span>
+          <p className={'info-paragraph'}></p>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplateTable.js b/client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplateTable.js
new file mode 100644
index 000000000..8e189ef22
--- /dev/null
+++ b/client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplateTable.js
@@ -0,0 +1,51 @@
+import React from 'react';
+
+export default function PaymentPaperTemplateTable() {
+  return (
+    <div className="template__table">
+      <div className="template__table__rows">
+        <span className="template__table__rows--cell-payment-receive ">
+          Invoice number
+        </span>
+        <span className="template__table__rows--cell-payment-receive ">
+          Invoice date
+        </span>
+        <span className="template__table__rows--cell-payment-receive ">
+          Invoice amount
+        </span>
+        <span className="template__table__rows--cell-payment-receive ">
+          Payment amount
+        </span>
+      </div>
+
+      <div className="template__table__rows">
+        <span className="template__table__rows--cell-payment-receive">
+          INV-1
+        </span>
+        <span className="template__table__rows--cell-payment-receive">
+          12 Jan 2021
+        </span>
+        <span className="template__table__rows--cell-payment-receive">
+          50,000 USD
+        </span>
+        <span className="template__table__rows--cell-payment-receive">
+          1000 USD
+        </span>
+      </div>
+      <div className="template__table__rows">
+        <span className="template__table__rows--cell-payment-receive">
+          INV-2
+        </span>
+        <span className="template__table__rows--cell-payment-receive">
+          12 Jan 2021
+        </span>
+        <span className="template__table__rows--cell-payment-receive">
+          50,000 USD
+        </span>
+        <span className="template__table__rows--cell-payment-receive">
+          1000 USD
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawer.js b/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawer.js
index 1b6c8b2cc..5ada55f73 100644
--- a/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawer.js
+++ b/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawer.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import DrawerTemplate from 'containers/Drawers/DrawerTemplate';
-import PaperTemplate from 'containers/Drawers/PaperTemplate';
+import PaperTemplate from 'containers/Drawers/PaperTemplate/PaperTemplate';
 import withDrawers from 'containers/Drawer/withDrawers';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
@@ -18,10 +18,11 @@ function EstimateDrawer({
   const handleDrawerClose = () => {
     closeDrawer(name);
   };
+  
 
   return (
     <DrawerTemplate isOpen={isOpen} isClose={handleDrawerClose}>
-      <PaperTemplate />
+      <PaperTemplate  />
     </DrawerTemplate>
   );
 }
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/InvoiceDetails/InvoiceDrawer.js b/client/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawer.js
index 58de80ad8..ffeadb9e3 100644
--- a/client/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawer.js
+++ b/client/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawer.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import DrawerTemplate from 'containers/Drawers/DrawerTemplate';
-import PaperTemplate from 'containers/Drawers/PaperTemplate';
+import PaperTemplate from 'containers/Drawers/PaperTemplate/PaperTemplate';
 import withDrawers from 'containers/Drawer/withDrawers';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
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/PaymentDetails/PaymentDrawer.js b/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentDrawer.js
index a2cf23a5d..974926d40 100644
--- a/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentDrawer.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentDrawer.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import DrawerTemplate from 'containers/Drawers/DrawerTemplate';
-import PaymentPaperTemplate from 'containers/Drawers/PaymentPaperTemplate';
+import PaymentPaperTemplate from 'containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplate';
 import withDrawers from 'containers/Drawer/withDrawers';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
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/ReceiptDetails/ReceiptDrawer.js b/client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptDrawer.js
index 9434e4a38..3c1d3079e 100644
--- a/client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptDrawer.js
+++ b/client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptDrawer.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import DrawerTemplate from 'containers/Drawers/DrawerTemplate';
-import PaperTemplate from 'containers/Drawers/PaperTemplate';
+import PaperTemplate from 'containers/Drawers/PaperTemplate/PaperTemplate';
 import withDrawers from 'containers/Drawer/withDrawers';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
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}