diff --git a/src/components/Layout/Header.js b/src/components/Layout/Header.js
index 027ee1a57..77162e3df 100644
--- a/src/components/Layout/Header.js
+++ b/src/components/Layout/Header.js
@@ -46,13 +46,18 @@ const MdNotificationsActiveWithBadge = withBadge({
 })(MdNotificationsActive);
 
 class Header extends React.Component {
-  state = {
-    isOpenNotificationPopover: false,
-    isNotificationConfirmed: false,
-    isOpenUserCardPopover: false,
-  };
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isOpenNotificationPopover: false,
+      isNotificationConfirmed: false,
+      isOpenUserCardPopover: false,
+    };
+  }
 
   toggleNotificationPopover = () => {
+    this.props.handleContentClickStateChange(true);
     this.setState({
       isOpenNotificationPopover: !this.state.isOpenNotificationPopover,
     });
@@ -63,6 +68,10 @@ class Header extends React.Component {
   };
 
   toggleUserCardPopover = () => {
+    // set isContentClicked state in "MainLyout" component to true
+    // so that when click is outside of popover, isContentClicked will be set to false
+    // then the popover will be closed
+    this.props.handleContentClickStateChange(true);
     this.setState({
       isOpenUserCardPopover: !this.state.isOpenUserCardPopover,
     });
@@ -75,6 +84,19 @@ class Header extends React.Component {
     document.querySelector('.cr-sidebar').classList.toggle('cr-sidebar--open');
   };
 
+  componentDidUpdate() {
+    // need to close popover if click is outside of popover :
+    // check if popover is open and isContentClicked is false
+    // if so, close the popover
+    if (this.state.isOpenUserCardPopover && !this.props.isContentClicked) {
+      this.setState({ isOpenUserCardPopover: this.props.isContentClicked });
+    }
+
+    if (this.state.isOpenNotificationPopover && !this.props.isContentClicked) {
+      this.setState({ isOpenNotificationPopover: this.props.isContentClicked });
+    }
+  }
+
   render() {
     const { isNotificationConfirmed } = this.state;
 
diff --git a/src/components/Layout/MainLayout.js b/src/components/Layout/MainLayout.js
index f76f35be3..c263ea7c2 100644
--- a/src/components/Layout/MainLayout.js
+++ b/src/components/Layout/MainLayout.js
@@ -9,6 +9,17 @@ import NotificationSystem from 'react-notification-system';
 import { NOTIFICATION_SYSTEM_STYLE } from 'utils/constants';
 
 class MainLayout extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isContentClicked: false, // state to control if Content tag is clicked
+    };
+    // bind handleContentClickStateChange to the current component
+    // so that it can be use as props in Header component
+    this.handleContentClickStateChange =
+      this.handleContentClickStateChange.bind(this);
+  }
+
   static isSidebarOpen() {
     return document
       .querySelector('.cr-sidebar')
@@ -61,6 +72,15 @@ class MainLayout extends React.Component {
     ) {
       this.openSidebar('close');
     }
+    // this.handleContentClickStateChange(false);
+  };
+
+  handleContentClickStateChange(open) {
+    this.setState({ isContentClicked: open });
+  }
+
+  handleMainContentClick = () => {
+    this.handleContentClickStateChange(false);
   };
 
   checkBreakpoint(breakpoint) {
@@ -89,10 +109,13 @@ class MainLayout extends React.Component {
   render() {
     const { children } = this.props;
     return (
-      <main className="cr-app bg-light">
+      <main className="cr-app bg-light" onClick={this.handleMainContentClick}>
         <Sidebar />
         <Content fluid onClick={this.handleContentClick}>
-          <Header />
+          <Header
+            isContentClicked={this.state.isContentClicked}
+            handleContentClickStateChange={this.handleContentClickStateChange}
+          />
           {children}
           <Footer />
         </Content>