diff --git a/demo-shell-ng2/app/app.component.html b/demo-shell-ng2/app/app.component.html
index 26a5d89061..98abb43bfc 100644
--- a/demo-shell-ng2/app/app.component.html
+++ b/demo-shell-ng2/app/app.component.html
@@ -1,3 +1,4 @@
+<!--
 <nav class="navbar navbar-default navbar-fixed-top">
     <div class="container-fluid">
         <div class="navbar-header">
@@ -42,5 +43,52 @@
         </div>
     </div>
 </nav>
-<!--<router-outlet></router-outlet>-->
 <auth-router-outlet></auth-router-outlet>
+-->
+
+<!-- Always shows a header, even in smaller screens. -->
+<div mdl class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
+    <header class="mdl-layout__header">
+        <div class="mdl-layout__header-row">
+            <!-- Title -->
+            <span class="mdl-layout-title">Alfresco</span>
+            <!-- Add spacer, to align navigation to the right -->
+            <div class="mdl-layout-spacer"></div>
+            <!-- Navigation. We hide it in small screens. -->
+            <nav class="mdl-navigation mdl-layout--large-screen-only">
+                <a class="mdl-navigation__link" href="" [routerLink]="['Home']">Home</a>
+                <a class="mdl-navigation__link" href="" [routerLink]="['Page1']">Uploader</a>
+                <a class="mdl-navigation__link" href="" [routerLink]="['Page2']">Page 2</a>
+            </nav>
+            <!-- Right aligned menu below button -->
+            <button id="demo-menu-lower-right"
+                    class="mdl-button mdl-js-button mdl-button--icon">
+                <i class="material-icons">more_vert</i>
+            </button>
+
+            <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
+                for="demo-menu-lower-right">
+                <li class="mdl-menu__item">Some Action</li>
+                <li class="mdl-menu__item">Another Action</li>
+                <li disabled class="mdl-menu__item">Disabled Action</li>
+                <li class="mdl-menu__item">Yet Another Action</li>
+                <li *ngIf="!isLoggedIn()" class="mdl-menu__item" [routerLink]="['Login']">Login</li>
+                <li *ngIf="isLoggedIn()" class="mdl-menu__item" (click)="onLogout($event)">Logout</li>
+            </ul>
+        </div>
+    </header>
+    <div class="mdl-layout__drawer">
+        <span class="mdl-layout-title">Alfresco</span>
+        <nav class="mdl-navigation">
+            <a class="mdl-navigation__link" href="" [routerLink]="['Home']" (click)="hideDrawer()">Home</a>
+            <a class="mdl-navigation__link" href="" [routerLink]="['Page1']" (click)="hideDrawer()">Uploader</a>
+            <a class="mdl-navigation__link" href="" [routerLink]="['Page2']" (click)="hideDrawer()">Page 2</a>
+        </nav>
+    </div>
+    <main class="mdl-layout__content">
+        <div class="page-content">
+            <!--<router-outlet></router-outlet>-->
+            <auth-router-outlet></auth-router-outlet>
+        </div>
+    </main>
+</div>
diff --git a/demo-shell-ng2/app/app.component.ts b/demo-shell-ng2/app/app.component.ts
index 6098fe70ed..404a273013 100644
--- a/demo-shell-ng2/app/app.component.ts
+++ b/demo-shell-ng2/app/app.component.ts
@@ -7,11 +7,14 @@ import {HomeView} from './components/home.view';
 import {Page1View} from './components/page1.view';
 import {Page2View} from './components/page2.view';
 import {AlfrescoService} from 'ng2-alfresco-documentlist/ng2-alfresco-documentlist';
+import {MDL} from './components/MaterialDesignLiteUpgradeElement';
+
+declare var document: any;
 
 @Component({
     selector: 'my-app',
     templateUrl: 'app/app.component.html',
-    directives: [ROUTER_DIRECTIVES, AuthRouterOutlet]
+    directives: [ROUTER_DIRECTIVES, AuthRouterOutlet, MDL]
 })
 @RouteConfig([
     {path: '/', name: 'Home', component: HomeView, useAsDefault: true},
@@ -42,4 +45,9 @@ export class AppComponent {
                 () => this.router.navigate(['Login'])
             );
     }
+
+    hideDrawer() {
+        // todo: workaround for drawer closing
+        document.querySelector('.mdl-layout').MaterialLayout.toggleDrawer();
+    }
 }
diff --git a/demo-shell-ng2/app/components/home.view.ts b/demo-shell-ng2/app/components/home.view.ts
index 88abd1c8b5..d3c59b02f0 100644
--- a/demo-shell-ng2/app/components/home.view.ts
+++ b/demo-shell-ng2/app/components/home.view.ts
@@ -1,5 +1,6 @@
 import {Component} from 'angular2/core';
 import {DocumentList} from 'ng2-alfresco-documentlist/ng2-alfresco-documentlist';
+import {MDL} from './MaterialDesignLiteUpgradeElement';
 
 @Component({
     selector: 'home-view',
@@ -8,10 +9,30 @@ import {DocumentList} from 'ng2-alfresco-documentlist/ng2-alfresco-documentlist'
             <div class="row">
                 <div class="col-md-2">
                     <ul class="list-unstyled">
-                        <li><label><input type="checkbox" [(ngModel)]="thumbnails"> Thumbnails</label></li>
-                        <li><label><input type="checkbox" [(ngModel)]="breadcrumb"> Breadcrumb</label></li>
-                        <li><label><input type="checkbox" [(ngModel)]="navigation"> Navigation</label></li>
-                        <li><label><input type="checkbox" [(ngModel)]="downloads"> Downloads</label></li>
+                        <li>
+                            <label mdl class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
+                                <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" [(ngModel)]="thumbnails">
+                                <span class="mdl-checkbox__label">Thumbnails</span>
+                            </label>
+                        </li>
+                        <li>
+                            <label mdl class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-2">
+                                <input type="checkbox" id="checkbox-2" class="mdl-checkbox__input" [(ngModel)]="breadcrumb">
+                                <span class="mdl-checkbox__label">Breadcrumb</span>
+                            </label>
+                        </li>
+                        <li>
+                            <label mdl class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-3">
+                                <input type="checkbox" id="checkbox-3" class="mdl-checkbox__input" [(ngModel)]="navigation">
+                                <span class="mdl-checkbox__label">Navigation</span>
+                            </label>
+                        </li>
+                        <li>
+                            <label mdl class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-4">
+                                <input type="checkbox" id="checkbox-4" class="mdl-checkbox__input" [(ngModel)]="downloads">
+                                <span class="mdl-checkbox__label">Downloads</span>
+                            </label>
+                        </li>
                     </ul>
                     <hr>
                     <ul class="list-unstyled" style="font-size: 10px">
@@ -32,7 +53,7 @@ import {DocumentList} from 'ng2-alfresco-documentlist/ng2-alfresco-documentlist'
             </div>
         </div>
     `,
-    directives: [DocumentList]
+    directives: [DocumentList, MDL]
 })
 export class HomeView {
     thumbnails: boolean = true;
diff --git a/demo-shell-ng2/app/css/app.css b/demo-shell-ng2/app/css/app.css
index f52219b4a0..242dd5936f 100644
--- a/demo-shell-ng2/app/css/app.css
+++ b/demo-shell-ng2/app/css/app.css
@@ -1,5 +1,3 @@
-body { padding-top: 70px; }
-
 /* Utils */
 
 .p-10 {