diff --git a/src/app/assets/svg/icons/close.svg b/src/app/assets/svg/icons/close.svg
new file mode 100644
index 00000000..fa7ebb9d
--- /dev/null
+++ b/src/app/assets/svg/icons/close.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 212.982 212.982" style="enable-background:new 0 0 212.982 212.982;" xml:space="preserve">
+<g id="Close">
+	<path style="fill-rule:evenodd;clip-rule:evenodd;" d="M131.804,106.491l75.936-75.936c6.99-6.99,6.99-18.323,0-25.312
+		c-6.99-6.99-18.322-6.99-25.312,0l-75.937,75.937L30.554,5.242c-6.99-6.99-18.322-6.99-25.312,0c-6.989,6.99-6.989,18.323,0,25.312
+		l75.937,75.936L5.242,182.427c-6.989,6.99-6.989,18.323,0,25.312c6.99,6.99,18.322,6.99,25.312,0l75.937-75.937l75.937,75.937
+		c6.989,6.99,18.322,6.99,25.312,0c6.99-6.99,6.99-18.322,0-25.312L131.804,106.491z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/src/app/components/shared/Sidebar/Sidebar.js b/src/app/components/shared/Sidebar/Sidebar.js
index 7b20b1d4..096fc369 100644
--- a/src/app/components/shared/Sidebar/Sidebar.js
+++ b/src/app/components/shared/Sidebar/Sidebar.js
@@ -1,8 +1,9 @@
 // @flow strict
-import React, { Fragment } from 'react';
+import React, { Fragment, useEffect } from 'react';
 import type { Node } from 'react';
 
 import Icon from '@/components/base/Icon/Icon';
+import { KEYBOARD } from '@/constants';
 
 import './Sidebar.scss';
 
@@ -20,42 +21,54 @@ const Sidebar = ({
   onClose = () => {},
   title = 'sidebar',
   children,
-}: PropsType) => (
-  <Fragment>
-    { isOpen ? (
-      <div
-        onKeyPress={() => {}}
-        role="presentation"
-        onClick={onClose}
-        className="sidebar__overlay"
-      />) : null }
-    <aside
-      className="sidebar"
-      style={{
-        [side]: isOpen ? 0 : '-300px',
-      }}
-    >
-      <header className="sidebar__header">
-        <h3 className="sidebar__title">{ title }</h3>
-        <span
-          className="sidebar__close"
-          tabIndex="-1"
-          role="button"
+}: PropsType) => {
+  useEffect(() => {
+    const handle = (evt: KeyboardEvent): void => {
+      if (isOpen && evt.keyCode === KEYBOARD.ESCAPE_KEY) {
+        onClose();
+      }
+    };
+
+    document.addEventListener('keydown', handle);
+
+    return () => {
+      document.removeEventListener('keydown', handle);
+    };
+  });
+
+  return isOpen
+    ? (
+      <Fragment>
+        <div
           onKeyPress={() => {}}
+          role="presentation"
           onClick={onClose}
+          className="sidebar__overlay"
+        />
+        <aside
+          className="sidebar"
+          style={{
+            [side]: isOpen ? 0 : '-300px',
+          }}
         >
-          <Icon path="icons/close" />
-        </span>
-      </header>
-      <div className="sidebar__content">
-        {children}
-      </div>
-    </aside>
-  </Fragment>
-);
-
-// Sidebar.defaultProps = {
-//   side: 'left',
-// };
+          <header className="sidebar__header">
+            <h3 className="sidebar__title">{ title }</h3>
+            <span
+              className="sidebar__close"
+              tabIndex="-1"
+              role="button"
+              onKeyPress={() => {}}
+              onClick={onClose}
+            >
+              <Icon path="icons/close" />
+            </span>
+          </header>
+          <div className="sidebar__content">
+            {children}
+          </div>
+        </aside>
+      </Fragment>
+    ) : null;
+};
 
 export default Sidebar;