diff --git a/src/app/app.component.html b/src/app/app.component.html
index ebd0a49b07..b65659e870 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -10,42 +10,29 @@
        @fade
        class="backdrop"></div>
 
-  <mat-drawer-container>
-    <header class="header-wrapper"
-            [class.isNotScrolled]="!(layoutService.isScrolled$|async)">
-      <main-header></main-header>
-      <bookmark-bar></bookmark-bar>
-      <banner></banner>
-    </header>
-
-    <div [@warpRoute]="getPage(o)"
-         #routeWrapper
-         class="route-wrapper">
-      <router-outlet #o="outlet"></router-outlet>
-    </div>
-    <mat-drawer (closedStart)="layoutService.hideSideNav()"
-                [mode]="(layoutService.isNavOver$|async) ? 'over' : 'side'"
-                [opened]="(layoutService.isShowSideNav$|async)"
-                position="start">
+  <mat-sidenav-container>
+    <mat-sidenav (closedStart)="layoutService.hideSideNav()"
+                 [mode]="(layoutService.isNavOver$|async) ? 'over' : 'side'"
+                 [opened]="(layoutService.isShowSideNav$|async)"
+                 position="start">
       <side-nav></side-nav>
       <hr>
       <notes></notes>
+    </mat-sidenav>
 
-    </mat-drawer>
-    <!--    <mat-drawer (closedStart)="layoutService.hideNotes()"-->
-    <!--                [mode]="(layoutService.isNotesOver$|async) ? 'over' : 'side'"-->
-    <!--                [opened]="layoutService.isShowNotes$|async"-->
-    <!--                position="end">-->
-    <!--    </mat-drawer>-->
-<!--    <mat-drawer (closedStart)="taskService.setSelectedId(null)"-->
-<!--                [mode]="(layoutService.isNotesOver$|async) ? 'over' : 'side'"-->
-<!--                [opened]="taskService.selectedTask$|async"-->
-<!--                position="end">-->
-<!--      <div class="additional-info-panel">-->
-<!--        <task-additional-info *ngIf="taskService.selectedTask$|async"-->
-<!--                              [task]="taskService.selectedTask$|async"></task-additional-info>-->
-<!--      </div>-->
-<!--    </mat-drawer>-->
+    <mat-sidenav-content>
+      <header class="header-wrapper"
+              [class.isNotScrolled]="!(layoutService.isScrolled$|async)">
+        <main-header></main-header>
+        <bookmark-bar></bookmark-bar>
+        <banner></banner>
+      </header>
 
-  </mat-drawer-container>
+      <div [@warpRoute]="getPage(o)"
+           #routeWrapper
+           class="route-wrapper">
+        <router-outlet #o="outlet"></router-outlet>
+      </div>
+    </mat-sidenav-content>
+  </mat-sidenav-container>
 </ng-container>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 706149a01f..c94fc56702 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,12 +1,8 @@
 @import '../_variables.scss';
 
-mat-drawer-container {
-  background: transparent !important;
-}
-
-mat-drawer-container,
-mat-sidenav-container {
-  height: 100%;
+:host {
+  display: flex;
+  flex-direction: column;
 }
 
 .header-wrapper {
@@ -28,36 +24,6 @@ mat-sidenav-container {
   }
 }
 
-// sidebars
-mat-drawer ::ng-deep .mat-drawer-inner-container {
-  @include scrollYImportant();
-
-  @include lightTheme() {
-    background: $light-theme-bg-darker;
-  }
-
-  @include darkTheme {
-    background: $dark-theme-sidebar-bg;
-  }
-}
-
-mat-drawer {
-  z-index: 3;
-  //box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
-  //border-left: 0 !important;
-}
-
-:host {
-  display: flex;
-  flex-direction: column;
-}
-
-:host ::ng-deep .mat-drawer-content {
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
 .route-wrapper {
   flex-grow: 1;
   position: relative;
@@ -114,3 +80,40 @@ bookmark-bar {
     }
   }
 }
+
+
+// SIDENAV
+// -------
+:host ::ng-deep .mat-drawer-content {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+mat-sidenav-container {
+  background: transparent !important;
+}
+
+mat-sidenav,
+mat-sidenav-container {
+  height: 100%;
+}
+
+
+// sidebars
+mat-sidenav ::ng-deep .mat-drawer-inner-container {
+  @include scrollYImportant();
+
+  @include lightTheme() {
+    background: $light-theme-bg-darker;
+  }
+
+  @include darkTheme {
+    background: $dark-theme-sidebar-bg;
+  }
+}
+
+mat-sidenav {
+  z-index: 3;
+}
+