diff --git a/client/src/components/Drawer/Drawer.js b/client/src/components/Drawer/Drawer.js
index 07832c16d..61c736375 100644
--- a/client/src/components/Drawer/Drawer.js
+++ b/client/src/components/Drawer/Drawer.js
@@ -1,27 +1,29 @@
 import React from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Position, Drawer } from '@blueprintjs/core';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+function DrawerComponent(props) {
+  const { name, children, onClose, closeDrawer } = props;
+
+  const handleClose = (event) => {
+    closeDrawer(name);
+    onClose && onClose(event);
+  };
 
-export default function ({
-  title = <T id={'view_paper'} />,
-  children,
-  isOpen,
-  isClose,
-  drawerProps,
-}) {
-  
   return (
     <Drawer
-      isOpen={isOpen}
-      title={title}
-      position={Position.RIGHT}
+      size={'700px'}
       canOutsideClickClose={true}
       canEscapeKeyClose={true}
-      size={'700px'}
-      onClose={isClose}
-      {...drawerProps}
+      position={Position.RIGHT}
+      onClose={handleClose}
+      {...props}
     >
       {children}
     </Drawer>
   );
 }
+
+export default compose(withDrawerActions)(DrawerComponent);
diff --git a/client/src/components/Drawer/DrawerHeaderContent.js b/client/src/components/Drawer/DrawerHeaderContent.js
new file mode 100644
index 000000000..648651222
--- /dev/null
+++ b/client/src/components/Drawer/DrawerHeaderContent.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import { FormattedMessage as T } from 'react-intl';
+import { Classes, Icon, H4, Button } from '@blueprintjs/core';
+
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+/**
+ * Drawer header content.
+ */
+function DrawerHeaderContent(props) {
+  const {
+    icon,
+    title = <T id={'view_paper'} />,
+    onClose,
+    name,
+    closeDrawer,
+  } = props;
+
+  if (title == null) {
+    return null;
+  }
+
+  const handleClose = (event) => {
+    closeDrawer(name);
+    onClose && onClose(event);
+  };
+
+  return (
+    <div className={Classes.DRAWER_HEADER}>
+      <Icon icon={icon} iconSize={Icon.SIZE_LARGE} />
+      <H4>{title}</H4>
+
+      <Button
+        aria-label="Close"
+        className={Classes.DIALOG_CLOSE_BUTTON}
+        icon={<Icon icon="small-cross" iconSize={Icon.SIZE_LARGE} />}
+        minimal={true}
+        onClick={handleClose}
+      />
+    </div>
+  );
+}
+
+export default compose(withDrawerActions)(DrawerHeaderContent);
diff --git a/client/src/components/index.js b/client/src/components/index.js
index 25d53d033..5b332d816 100644
--- a/client/src/components/index.js
+++ b/client/src/components/index.js
@@ -51,6 +51,7 @@ import DashboardPageContent from './Dashboard/DashboardPageContent';
 import DashboardInsider from './Dashboard/DashboardInsider';
 import Drawer from './Drawer/Drawer';
 import DrawerSuspense from './Drawer/DrawerSuspense';
+import DrawerHeaderContent from './Drawer/DrawerHeaderContent';
 import Postbox from './Postbox';
 import AccountsSuggestField from './AccountsSuggestField';
 import MaterialProgressBar from './MaterialProgressBar';
@@ -112,7 +113,8 @@ export {
   DashboardInsider,
   Drawer,
   DrawerSuspense,
+  DrawerHeaderContent,
   Postbox,
   AccountsSuggestField,
-  MaterialProgressBar
+  MaterialProgressBar,
 };