diff --git a/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawer.js b/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawer.js
index 85831e844..da0e8d55c 100644
--- a/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawer.js
+++ b/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawer.js
@@ -1,7 +1,6 @@
 import React, { lazy } from 'react';
 import { Drawer, DrawerSuspense } from 'components';
 import withDrawers from 'containers/Drawer/withDrawers';
-import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 import { compose } from 'utils';
 
@@ -15,15 +14,9 @@ function EstimateDrawer({
   //#withDrawer
   isOpen,
   payload: { estimateId },
-
-  closeDrawer,
 }) {
-  // handle close Drawer
-  const handleDrawerClose = () => {
-    closeDrawer(name);
-  };
   return (
-    <Drawer isOpen={isOpen} isClose={handleDrawerClose}>
+    <Drawer isOpen={isOpen} name={name}>
       <DrawerSuspense>
         <EstimateDrawerContent estimateId={estimateId} />
       </DrawerSuspense>
@@ -31,4 +24,4 @@ function EstimateDrawer({
   );
 }
 
-export default compose(withDrawers(), withDrawerActions)(EstimateDrawer);
+export default compose(withDrawers())(EstimateDrawer);
diff --git a/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawerProvider.js b/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawerProvider.js
index d5bc59e07..c9ea5ce68 100644
--- a/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawerProvider.js
+++ b/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawerProvider.js
@@ -1,6 +1,6 @@
 import React, { createContext } from 'react';
 import { useEstimate } from 'hooks/query';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import { DrawerHeaderContent, DashboardInsider } from 'components';
 
 const EstimateDrawerContext = createContext();
 
@@ -24,6 +24,7 @@ function EstimateDrawerProvider({ estimateId, ...props }) {
 
   return (
     <DashboardInsider loading={isEstimateLoading}>
+      <DrawerHeaderContent name={'estimate-drawer'} />
       <EstimateDrawerContext.Provider value={provider} {...props} />
     </DashboardInsider>
   );
diff --git a/client/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawer.js b/client/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawer.js
index a33d32379..aa452299c 100644
--- a/client/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawer.js
+++ b/client/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawer.js
@@ -1,6 +1,5 @@
 import React, { lazy } from 'react';
 import withDrawers from 'containers/Drawer/withDrawers';
-import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 import { Drawer, DrawerSuspense } from 'components';
 import { compose } from 'utils';
@@ -16,15 +15,10 @@ function InvoiceDrawer({
   isOpen,
   payload: { invoiceId },
 
-  closeDrawer,
 }) {
-  // handle close Drawer
-  const handleDrawerClose = () => {
-    closeDrawer(name);
-  };
-
+  
   return (
-    <Drawer isOpen={isOpen} isClose={handleDrawerClose}>
+    <Drawer isOpen={isOpen} name={name}>
       <DrawerSuspense>
         <InvoicesDrawerContent invoiceId={invoiceId} />
       </DrawerSuspense>
@@ -32,4 +26,4 @@ function InvoiceDrawer({
   );
 }
 
-export default compose(withDrawers(), withDrawerActions)(InvoiceDrawer);
+export default compose(withDrawers())(InvoiceDrawer);
diff --git a/client/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawerProvider.js b/client/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawerProvider.js
index 4ae1b4fad..9ba6c8a11 100644
--- a/client/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawerProvider.js
+++ b/client/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawerProvider.js
@@ -1,6 +1,6 @@
 import React, { createContext, useContext } from 'react';
 import { useInvoice } from 'hooks/query';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import { DrawerHeaderContent, DashboardInsider } from 'components';
 
 const InvoiceDrawerContext = createContext();
 
@@ -26,6 +26,7 @@ function InvoiceDrawerProvider({ invoiceId, ...props }) {
 
   return (
     <DashboardInsider loading={isInvoiceLoading}>
+      <DrawerHeaderContent name={'invoice-drawer'} />
       <InvoiceDrawerContext.Provider value={provider} {...props} />
     </DashboardInsider>
   );
diff --git a/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawer.js b/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawer.js
index 623445283..bafecdcc1 100644
--- a/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawer.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawer.js
@@ -1,6 +1,5 @@
 import React, { lazy } from 'react';
 import withDrawers from 'containers/Drawer/withDrawers';
-import withDrawerActions from 'containers/Drawer/withDrawerActions';
 import { Drawer, DrawerSuspense } from 'components';
 
 import { compose } from 'utils';
@@ -18,15 +17,10 @@ function PaymentReceiveDrawer({
   isOpen,
   payload: { paymentReceiveId },
 
-  closeDrawer,
 }) {
-  // handle close Drawer
-  const handleDrawerClose = () => {
-    closeDrawer(name);
-  };
-
+  
   return (
-    <Drawer isOpen={isOpen} isClose={handleDrawerClose}>
+    <Drawer isOpen={isOpen} name={name}>
       <DrawerSuspense>
         <PaymentReceiveDrawerContent paymentReceiveId={paymentReceiveId} />
       </DrawerSuspense>
@@ -34,4 +28,4 @@ function PaymentReceiveDrawer({
   );
 }
 
-export default compose(withDrawers(), withDrawerActions)(PaymentReceiveDrawer);
+export default compose(withDrawers())(PaymentReceiveDrawer);
diff --git a/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawerProvider.js b/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawerProvider.js
index 6e6b34b82..55511d15b 100644
--- a/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawerProvider.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawerProvider.js
@@ -1,6 +1,6 @@
 import React, { createContext, useContext } from 'react';
 import { usePaymentReceive } from 'hooks/query';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import { DrawerHeaderContent, DashboardInsider } from 'components';
 
 const PaymentReceiveDrawerContext = createContext();
 
@@ -20,6 +20,7 @@ function PaymentReceiveDrawerProvider({ paymentReceiveId, ...props }) {
 
   return (
     <DashboardInsider loading={isPaymentReceiveLoading}>
+      <DrawerHeaderContent name={'payment-receive-drawer'} />
       <PaymentReceiveDrawerContext.Provider value={provider} {...props} />
     </DashboardInsider>
   );
diff --git a/client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptDrawer.js b/client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptDrawer.js
index d23e5773f..95cf80f29 100644
--- a/client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptDrawer.js
+++ b/client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptDrawer.js
@@ -1,6 +1,5 @@
 import React, { lazy } from 'react';
 import withDrawers from 'containers/Drawer/withDrawers';
-import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 import { Drawer, DrawerSuspense } from 'components';
 import { compose } from 'utils';
@@ -15,17 +14,10 @@ const ReceiptDrawer = ({
   //#withDrawer
   isOpen,
   payload: { receiptId },
-
-  closeDrawer,
 }) => {
-  // handle close Drawer
-  const handleDrawerClose = () => {
-    closeDrawer(name);
-  };
-
   return (
     <div>
-      <Drawer isOpen={isOpen} isClose={handleDrawerClose}>
+      <Drawer isOpen={isOpen} name={name}>
         <DrawerSuspense>
           <ReceiptDrawerContent receiptId={receiptId} />
         </DrawerSuspense>
@@ -34,4 +26,4 @@ const ReceiptDrawer = ({
   );
 };
 
-export default compose(withDrawers(), withDrawerActions)(ReceiptDrawer);
+export default compose(withDrawers())(ReceiptDrawer);
diff --git a/client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptDrawerProvider.js b/client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptDrawerProvider.js
index 9139170cd..492be6513 100644
--- a/client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptDrawerProvider.js
+++ b/client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptDrawerProvider.js
@@ -1,6 +1,6 @@
 import React, { createContext, useContext } from 'react';
 import { useReceipt } from 'hooks/query';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import { DrawerHeaderContent, DashboardInsider } from 'components';
 
 const ReceiptDrawerContext = createContext();
 
@@ -23,6 +23,7 @@ function ReceiptDrawerProvider({ receiptId, ...props }) {
 
   return (
     <DashboardInsider loading={isReceiptLoading}>
+      <DrawerHeaderContent name={'receipt-drawer'} />
       <ReceiptDrawerContext.Provider value={provider} {...props} />
     </DashboardInsider>
   );