diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx
index c11b4a99035828f07e70548f5b17e619ddfaea85..f100fd5ccbc921197cbc5cc33d1055f114c7ea51 100644
--- a/frontend/src/components/App.tsx
+++ b/frontend/src/components/App.tsx
@@ -21,7 +21,7 @@ class App extends React.Component<{}, MyState> {
     this.state = { isToggled: false };
   }
 
-  handleIconClick(e: React.MouseEvent<HTMLImageElement>) {
+  toggleLeftBar(e: React.MouseEvent<HTMLElement>) {
     e.preventDefault();
     this.setState((state) => ({
       isToggled: !state.isToggled,
@@ -40,12 +40,13 @@ class App extends React.Component<{}, MyState> {
       <>
         <TopBar
           pages={horizontalBarPages}
-          onIconClick={(e) => this.handleIconClick(e)}
+          onIconClick={(e) => this.toggleLeftBar(e)}
         />
 
         <StandardView
           pages={horizontalBarPages}
-          isToggled={this.state.isToggled}
+					isToggled={this.state.isToggled}
+					onOverlayClick={(e) => this.toggleLeftBar(e)}
         />
 
         <BottomBar pages={horizontalBarPages} />
diff --git a/frontend/src/components/organisms/LeftBar/style.module.scss b/frontend/src/components/organisms/LeftBar/style.module.scss
index f62757b0e605400cba4c2570b01c3239edb547d0..142018d6de1687bc4493ccbdd5c8acab9a1769a1 100644
--- a/frontend/src/components/organisms/LeftBar/style.module.scss
+++ b/frontend/src/components/organisms/LeftBar/style.module.scss
@@ -14,11 +14,12 @@
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
-  transition: all 0.5s ease;
+	transition: all 0.5s ease;
+	z-index: 5000;
 }
 
 :global(#wrapper.toggled) #sidebarWrapper {
-  width: 250px;
+	width: 250px;
 }
 
 
diff --git a/frontend/src/components/pages/StandardView/index.tsx b/frontend/src/components/pages/StandardView/index.tsx
index 1722d2d5bb981d234e22f84d37634abec593d0bc..a5109333570d08a65fccb284d42fe1ed7297d546 100644
--- a/frontend/src/components/pages/StandardView/index.tsx
+++ b/frontend/src/components/pages/StandardView/index.tsx
@@ -9,12 +9,14 @@ interface StandardViewProps {
     name: string;
     path: string;
   }[];
-  isToggled: boolean;
+	isToggled: boolean;
+  onOverlayClick: (event: React.MouseEvent<HTMLElement>) => void;
 }
 
 const StandardView: React.FC<StandardViewProps> = ({
   pages,
-  isToggled,
+	isToggled,
+	onOverlayClick,
 }: StandardViewProps) => {
   const topBarRoutes = pages.map(({ name, path }) => (
     <Route path={path} key={name}>
@@ -25,6 +27,7 @@ const StandardView: React.FC<StandardViewProps> = ({
   return (
     <div id="wrapper" className={isToggled ? "toggled" : ""}>
       <LeftBar />
+			<div id="sidenav-overlay" onClick={e => onOverlayClick(e)}></div>
       <Switch>
         <Route exact path="/" render={() => <Redirect to="/modules" />} />
         {topBarRoutes}
diff --git a/frontend/src/components/pages/StandardView/style.scss b/frontend/src/components/pages/StandardView/style.scss
index e819702e5bf5459cdcda71e31034dffb3894934c..79caf07f9b275a5341f9e9a6263516e3ee8e24ff 100644
--- a/frontend/src/components/pages/StandardView/style.scss
+++ b/frontend/src/components/pages/StandardView/style.scss
@@ -6,12 +6,35 @@
   transition: all 0.5s ease;
 }
 
+#sidenav-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1;
+  display: none;
+
+  -webkit-transition: all 0.5s ease;
+  -moz-transition: all 0.5s ease;
+  -o-transition: all 0.5s ease;
+  transition: all 0.5s ease;
+}
+
 @media (min-width: 992px) {
   #wrapper {
     padding-left: 250px;
-	}
-	
+  }
+
   #wrapper.toggled {
     padding-left: 0;
   }
-}
\ No newline at end of file
+}
+
+@media (max-width: 992px) {
+  #wrapper.toggled #sidenav-overlay {
+    display: block;
+  }
+}