diff --git a/src/app.component.ts b/src/app.component.ts
index 7f5165d..12fde8e 100644
--- a/src/app.component.ts
+++ b/src/app.component.ts
@@ -6,14 +6,22 @@ import { Component } from '@angular/core';
   selector: 'accountant',
   styles: [ require('./main.scss').toString() ],
   template: `
+<md-sidenav-container>
+  <div>
     <md-toolbar class="mat-elevation-z6" color="primary">
-      <a md-button style="text-transform: uppercase"
-        routerLink="/accounts">
-        Accountant
-      </a>
+      <div class="acc-toolbar">
+        <a md-button style="text-transform: uppercase"
+          routerLink="/accounts">
+          Accountant
+        </a>
+      </div>
     </md-toolbar>
 
-    <router-outlet></router-outlet>
+    <div class="acc-content">
+      <router-outlet></router-outlet>
+    </div>
+  </div>
+</md-sidenav-container>
   `
 })
 export class AppComponent { }
diff --git a/src/app.module.ts b/src/app.module.ts
index f9009bc..930ec85 100644
--- a/src/app.module.ts
+++ b/src/app.module.ts
@@ -3,7 +3,11 @@ import 'zone.js';
 import 'reflect-metadata';
 
 import { NgModule } from '@angular/core';
-import { MdButtonModule, MdToolbarModule } from '@angular/material';
+import {
+  MdButtonModule,
+  MdToolbarModule,
+  MdSidenavModule
+} from '@angular/material';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -39,6 +43,7 @@ import { ApiBaseURL, LogLevel } from './app.config';
     FlexLayoutModule,
     MdButtonModule,
     MdToolbarModule,
+    MdSidenavModule,
     LoginModule,
     NgLoggerModule.forRoot(LogLevel),
     ToastrModule.forRoot(),