diff --git a/demo-shell-ng2/app/app.component.css b/demo-shell-ng2/app/app.component.css
index 00e49cd0b7..637be069c4 100644
--- a/demo-shell-ng2/app/app.component.css
+++ b/demo-shell-ng2/app/app.component.css
@@ -1,35 +1,7 @@
-@media screen and (max-width: 1024px) {
-    .mdl-layout__header {
-        display: block;
-    }
-}
-
-@media screen and (max-width: 1024px) {
-    .mdl-layout__header {
-        display: block;
-    }
-}
-
-.mdl-layout-title {
-    font-size: 17px;
-}
-
 .user-profile {
     margin-right: 10px;
 }
 
-.mdl-button-padding {
-    padding-left: 20px;
-}
-
-.hide {
-    display: none !important;
-}
-
-.mdl-navigation__link {
-    cursor: pointer;
-}
-
-.mdl-navigation__link label {
-    cursor: pointer;
+.app-menu--spacer {
+    flex: 1 1 auto;
 }
diff --git a/demo-shell-ng2/app/app.component.html b/demo-shell-ng2/app/app.component.html
index b4a419dd94..d76169b1df 100644
--- a/demo-shell-ng2/app/app.component.html
+++ b/demo-shell-ng2/app/app.component.html
@@ -1,90 +1,74 @@
-<!-- Always shows a header, even in smaller screens. -->
-<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
-    <header class="mdl-layout__header main_header_adf" [ngClass]="{hide: isAPageWithHeaderBar()}">
-        <div class="mdl-button-padding mdl-layout__header-row">
+<md-toolbar color="primary" *ngIf="!isAPageWithHeaderBar()">
+    <ng2-alfresco-userinfo
+        class="user-profile"
+        [menuOpenType]="left">
+    </ng2-alfresco-userinfo>
 
-            <!-- User Info -->
-            <ng2-alfresco-userinfo class="user-profile" [menuOpenType]="left">
-            </ng2-alfresco-userinfo>
+    <span>ADF Demo Application</span>
 
-            <!-- Title -->
-            <span class="mdl-layout-title">Demo Application</span>
-            <!-- Add spacer, to align navigation to the right -->
-            <div class="mdl-layout-spacer"></div>
+    <div class="app-menu--spacer"></div>
 
-            <!-- Search bar -->
-            <search-bar (expand)="onToggleSearch($event)"></search-bar>
+    <search-bar (expand)="onToggleSearch($event)"></search-bar>
 
-            <!-- Navigation. We hide it in small screens. -->
-            <nav class="mdl-navigation mdl-layout--large-screen-only">
-                <a class="mdl-navigation__link" data-automation-id="home" href="" routerLink="/">Home</a>
-                <a class="mdl-navigation__link" data-automation-id="files" href="" routerLink="/files">DocumentList</a>
-                <a class="mdl-navigation__link" data-automation-id="activiti" href="" routerLink="/activiti">Process Services</a>
-                <a class="mdl-navigation__link" data-automation-id="login" href="" routerLink="/login">Login</a>
-            </nav>
+    <a md-button data-automation-id="home" href="" routerLink="/">Home</a>
+    <a md-button data-automation-id="files" href="" routerLink="/files">Content Services</a>
+    <a md-button data-automation-id="activiti" href="" routerLink="/activiti">Process Services</a>
+    <a md-button data-automation-id="login" href="" routerLink="/login">Login</a>
 
-            <button md-icon-button [mdMenuTriggerFor]="langMenu">
-                <md-icon>language</md-icon>
-            </button>
-            <md-menu #langMenu="mdMenu">
-                <button md-menu-item (click)="changeLanguage('en')">English</button>
-                <button md-menu-item (click)="changeLanguage('it')">Italian</button>
-                <button md-menu-item (click)="changeLanguage('ru')">Russian</button>
-            </md-menu>
+    <button md-icon-button [mdMenuTriggerFor]="langMenu">
+        <md-icon>language</md-icon>
+    </button>
+    <md-menu #langMenu="mdMenu">
+        <button md-menu-item (click)="changeLanguage('en')">English</button>
+        <button md-menu-item (click)="changeLanguage('it')">Italian</button>
+        <button md-menu-item (click)="changeLanguage('ru')">Russian</button>
+    </md-menu>
 
-            <button md-icon-button [mdMenuTriggerFor]="appMenu">
-                <md-icon>more_vert</md-icon>
-            </button>
-            <md-menu #appMenu="mdMenu">
-                <a md-menu-item href="" routerLink="/datatable">
-                    <md-icon>view_module</md-icon>
-                    <span>DataTable</span>
-                </a>
-                <a md-menu-item href="" routerLink="/form">
-                    <md-icon>poll</md-icon>
-                    <span>Form</span>
-                </a>
-                <a md-menu-item href="" routerLink="/form-list">
-                    <md-icon>library_books</md-icon>
-                    <span>Form List</span>
-                </a>
-                <a md-menu-item href="" routerLink="/uploader">
-                    <md-icon>file_upload</md-icon>
-                    <span>Uploader</span>
-                </a>
-                <a md-menu-item href="" routerLink="/webscript">
-                    <md-icon>extension</md-icon>
-                    <span>Webscript</span>
-                </a>
-                <a md-menu-item href="" routerLink="/tag">
-                    <md-icon>local_offer</md-icon>
-                    <span>Tag</span>
-                </a>
-                <a md-menu-item href="" routerLink="/social">
-                    <md-icon>thumb_up</md-icon>
-                    <span>Social</span>
-                </a>
-                <a md-menu-item href="" routerLink="/settings">
-                    <md-icon>settings</md-icon>
-                    <span>Settings</span>
-                </a>
-                <a md-menu-item href="" routerLink="/about">
-                    <md-icon>info_outline</md-icon>
-                    <span>About</span>
-                </a>
-                <button md-menu-item (click)="onLogout($event)">
-                    <md-icon>exit_to_app</md-icon>
-                    <span>Logout</span>
-                </button>
-            </md-menu>
-        </div>
+    <button md-icon-button [mdMenuTriggerFor]="appMenu">
+        <md-icon>more_vert</md-icon>
+    </button>
+    <md-menu #appMenu="mdMenu">
+        <a md-menu-item href="" routerLink="/datatable">
+            <md-icon>view_module</md-icon>
+            <span>DataTable</span>
+        </a>
+        <a md-menu-item href="" routerLink="/form">
+            <md-icon>poll</md-icon>
+            <span>Form</span>
+        </a>
+        <a md-menu-item href="" routerLink="/form-list">
+            <md-icon>library_books</md-icon>
+            <span>Form List</span>
+        </a>
+        <a md-menu-item href="" routerLink="/uploader">
+            <md-icon>file_upload</md-icon>
+            <span>Uploader</span>
+        </a>
+        <a md-menu-item href="" routerLink="/webscript">
+            <md-icon>extension</md-icon>
+            <span>Webscript</span>
+        </a>
+        <a md-menu-item href="" routerLink="/tag">
+            <md-icon>local_offer</md-icon>
+            <span>Tag</span>
+        </a>
+        <a md-menu-item href="" routerLink="/social">
+            <md-icon>thumb_up</md-icon>
+            <span>Social</span>
+        </a>
+        <a md-menu-item href="" routerLink="/settings">
+            <md-icon>settings</md-icon>
+            <span>Settings</span>
+        </a>
+        <a md-menu-item href="" routerLink="/about">
+            <md-icon>info_outline</md-icon>
+            <span>About</span>
+        </a>
+        <button md-menu-item (click)="onLogout($event)">
+            <md-icon>exit_to_app</md-icon>
+            <span>Logout</span>
+        </button>
+    </md-menu>
+</md-toolbar>
 
-    </header>
-
-    <main class="mdl-layout__content" (dragover)="onDragOverMainPage($event)"
-          (drop)="onDragOverMainPage($event)">
-        <div class="page-content">
-            <router-outlet></router-outlet>
-        </div>
-    </main>
-</div>
+<router-outlet></router-outlet>
diff --git a/demo-shell-ng2/app/app.component.ts b/demo-shell-ng2/app/app.component.ts
index e6985b4cfb..06015c8412 100644
--- a/demo-shell-ng2/app/app.component.ts
+++ b/demo-shell-ng2/app/app.component.ts
@@ -28,7 +28,7 @@ import {
 declare var document: any;
 
 @Component({
-    selector: 'alfresco-app',
+    selector: 'adf-app',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
 })
@@ -93,9 +93,4 @@ export class AppComponent {
             this.settingsService.setProviders(this.storage.getItem(`providers`));
         }
     }
-
-    onDragOverMainPage(event: any): boolean {
-        event.preventDefault();
-        return false;
-    }
 }
diff --git a/demo-shell-ng2/index.html b/demo-shell-ng2/index.html
index 7e93895ca9..2518de7a14 100644
--- a/demo-shell-ng2/index.html
+++ b/demo-shell-ng2/index.html
@@ -50,7 +50,7 @@
 </head>
 <!-- 3. Display the application -->
 <body>
-<alfresco-app>
+<adf-app>
     <div id="loader-container" class="loader-container">
         <div class="loader-item">
             <div id="loader-spin" class="mdl-progress mdl-js-progress mdl-progress__indeterminate is-upgraded"
@@ -62,7 +62,7 @@
             <div id="loader-text" class="loader-text">Loading Demo Shell..</div>
         </div>
     </div>
-</alfresco-app>
+</adf-app>
 </body>
 </html>