diff --git a/aio/src/app/app.component.html b/aio/src/app/app.component.html
new file mode 100644
index 0000000000..6f2d0cad06
--- /dev/null
+++ b/aio/src/app/app.component.html
@@ -0,0 +1,26 @@
+<md-toolbar color="primary" class="app-toolbar">
+  <button *ngIf="isHamburgerVisible" class="hamburger" md-button (click)="sidenav.toggle()"><md-icon>menu</md-icon></button>
+  <aio-top-menu *ngIf="isSideBySide" [nodes]="(navigationViews | async)?.TopBar"></aio-top-menu>
+  <md-input-container >
+    <input mdInput placeholder="Search" (keyup)="onSearch($event.target.value)">
+  </md-input-container>
+  <span class="fill-remaining-space"></span>
+</md-toolbar>
+
+<md-sidenav-container class="sidenav-container" (window:resize)="onResize($event.target.innerWidth)">
+
+  <md-sidenav #sidenav class="sidenav" [opened]="isSideBySide" [mode] = "isSideBySide ? 'side' : 'over'">
+    <aio-top-menu *ngIf="!isSideBySide" class="small" [nodes]="(navigationViews | async)?.TopBar"></aio-top-menu>
+    <aio-nav-menu [nodes]="(navigationViews | async)?.SideNav" [selectedNodes]="selectedNodes | async"></aio-nav-menu>
+  </md-sidenav>
+
+  <section class="sidenav-content">
+    <div class="search-results">
+      <div *ngFor="let result of (searchResults | async)?.results">
+        <a href="{{ result.path }}">{{ result.title }}</a>
+      </div>
+    </div>
+    <aio-doc-viewer [doc]="currentDocument | async"></aio-doc-viewer>
+  </section>
+
+</md-sidenav-container>
\ No newline at end of file
diff --git a/aio/src/app/app.component.scss b/aio/src/app/app.component.scss
new file mode 100644
index 0000000000..a8cff9ab3d
--- /dev/null
+++ b/aio/src/app/app.component.scss
@@ -0,0 +1,50 @@
+.fill-remaining-space {
+  flex: 1 1 auto;
+}
+
+md-input-container {
+  margin-left: 10px;
+  input {
+    min-width:200px;
+  }
+}
+
+
+.md-input-element {
+  font-size: 70%;
+  font-style: italic;
+}
+
+@media (max-width: 600px) {
+  aio-menu {
+    display: none;
+  }
+}
+
+.sidenav-container {
+  width: 100%;
+  height: 100vh;
+}
+
+.sidenav-content {
+  height: 100%;
+  width: 100%;
+  margin: auto;
+  padding: 1rem;
+}
+
+.sidenav-content button {
+  min-width: 50px;
+}
+
+.sidenav {
+  padding: 0;
+}
+
+// md-toolbar {
+//   display: none;
+//   padding-left: 10px !important;
+// }
+// md-toolbar.active {
+//   display: block;
+// }
\ No newline at end of file
diff --git a/aio/src/app/app.component.ts b/aio/src/app/app.component.ts
index b362593540..b5003d5996 100644
--- a/aio/src/app/app.component.ts
+++ b/aio/src/app/app.component.ts
@@ -6,84 +6,8 @@ import { SearchService, QueryResults } from 'app/search/search.service';
 
 @Component({
   selector: 'aio-shell',
-  template: `
-    <md-toolbar color="primary" class="app-toolbar">
-      <button *ngIf="isHamburgerVisible" class="hamburger" md-button (click)="sidenav.toggle()"><md-icon>menu</md-icon></button>
-      <aio-top-menu [nodes]="(navigationViews | async)?.TopBar"></aio-top-menu>
-      <md-input-container >
-        <input mdInput placeholder="Search" (keyup)="onSearch($event.target.value)">
-      </md-input-container>
-      <span class="fill-remaining-space"></span>
-    </md-toolbar>
-
-    <md-sidenav-container class="sidenav-container" (window:resize)="onResize($event.target.innerWidth)">
-
-      <md-sidenav #sidenav class="sidenav" [opened]="isSideBySide" [mode] = "this.isSideBySide ? 'side' : 'over'">
-        <aio-nav-menu [nodes]="(navigationViews | async)?.SideNav" [selectedNodes]="selectedNodes | async"></aio-nav-menu>
-      </md-sidenav>
-
-      <section class="sidenav-content">
-        <div class="search-results">
-          <div *ngFor="let result of (searchResults | async)?.results">
-            <a href="{{ result.path }}">{{ result.title }}</a>
-          </div>
-        </div>
-        <aio-doc-viewer [doc]="currentDocument | async"></aio-doc-viewer>
-      </section>
-
-    </md-sidenav-container>`,
-  styles:  [
-    `.fill-remaining-space {
-        flex: 1 1 auto;
-      }
-
-      md-input-container {
-        margin-left: 10px;
-        input {
-          min-width:200px;
-        }
-      }
-
-
-      .md-input-element {
-        font-size: 70%;
-        font-style: italic;
-      }
-
-      @media (max-width: 600px) {
-        aio-menu {
-          display: none;
-        }
-      }
-
-      .sidenav-container {
-        width: 100%;
-        height: 100vh;
-      }
-
-      .sidenav-content {
-        height: 100%;
-        width: 100%;
-        margin: auto;
-        padding: 1rem;
-      }
-
-      .sidenav-content button {
-        min-width: 50px;
-      }
-
-      .sidenav {
-        padding: 0;
-      }
-
-      // md-toolbar {
-      //   display: none;
-      //   padding-left: 10px !important;
-      // }
-      // md-toolbar.active {
-      //   display: block;
-      // }`
-  ]
+  templateUrl: './app.component.html',
+  styleUrls:  ['./app.component.scss'],
 })
 export class AppComponent implements OnInit {
   readonly sideBySideWidth = 600;