diff --git a/client/modules/App/components/Overlay.jsx b/client/modules/App/components/Overlay.jsx
index 2b040449..a2a43c71 100644
--- a/client/modules/App/components/Overlay.jsx
+++ b/client/modules/App/components/Overlay.jsx
@@ -9,10 +9,43 @@ class Overlay extends React.Component {
   constructor(props) {
     super(props);
     this.close = this.close.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+    this.handleClickOutside = this.handleClickOutside.bind(this);
+    this.keyPressHandle = this.keyPressHandle.bind(this);
+  }
+
+  componentWillMount() {
+    document.addEventListener('mousedown', this.handleClick, false);
+    document.addEventListener('keydown', this.keyPressHandle);
   }
 
   componentDidMount() {
-    this.overlay.focus();
+    this.node.focus();
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.handleClick, false);
+    document.removeEventListener('keydown', this.keyPressHandle);
+  }
+
+  handleClick(e) {
+    if (this.node.contains(e.target)) {
+      return;
+    }
+
+    this.handleClickOutside();
+  }
+
+  handleClickOutside() {
+    this.close();
+  }
+
+  keyPressHandle(e) {
+    // escape key code = 27.
+    // So here we are checking if the key pressed was Escape key.
+    if (e.keyCode === 27) {
+      this.close();
+    }
   }
 
   close() {
@@ -36,12 +69,12 @@ class Overlay extends React.Component {
             tabIndex="0"
             role="main"
             aria-label={ariaLabel}
-            ref={(element) => { this.overlay = element; }}
+            ref={(node) => { this.node = node; }}
             className="overlay__body"
           >
             <header className="overlay__header">
               <h2 className="overlay__title">{title}</h2>
-              <button className="overlay__close-button" onClick={this.close}>
+              <button className="overlay__close-button" onClick={this.close} >
                 <InlineSVG src={exitUrl} alt="close overlay" />
               </button>
             </header>
diff --git a/client/styles/components/_overlay.scss b/client/styles/components/_overlay.scss
index 6932b4ae..2065a230 100644
--- a/client/styles/components/_overlay.scss
+++ b/client/styles/components/_overlay.scss
@@ -40,4 +40,4 @@
 .overlay__close-button {
   @include icon();
   padding: #{3 / $base-font-size}rem 0;
-}
\ No newline at end of file
+}