diff --git a/src/client/app/frameworks/sample/components/toolbar.component.css b/src/client/app/frameworks/sample/components/toolbar.component.css
index a8b28f447d5f555b10dba26a2e6057a849309a13..61f7a40600beb65a0373fca9d213f588ea3dc940 100644
--- a/src/client/app/frameworks/sample/components/toolbar.component.css
+++ b/src/client/app/frameworks/sample/components/toolbar.component.css
@@ -1,40 +1,7 @@
-:host {
-  background-color: #106cc8;
-  color: rgba(255, 255, 255, 0.87);
-  display: block;
-  height: 48px;
-  padding: 0 16px;
-  position: relative;
+.sd-toolbar-icon {
+  color: white;
 }
 
-h1 {
-  display: inline;
-  font-size: 20px;
-  font-weight: normal;
-  letter-spacing: 0.1px;
-  line-height: 48px;
-}
-
-:host lang-switcher,
-:host .more {
-  position: absolute;
-}
-
-:host lang-switcher {
-  top: 13px;
-  right: 52px;
-}
-
-.more {
-  background: url("./assets/svg/more.svg");
-  top: 12px;
-  right: 10px;
-  height: 24px;
-  width: 24px;
-  cursor: pointer;
-  opacity: 0.7;
-}
-
-.more:hover {
-  opacity: 1;
+.sd-toolbar-filler {
+  flex: 1 1 auto;
 }
diff --git a/src/client/app/frameworks/sample/components/toolbar.component.html b/src/client/app/frameworks/sample/components/toolbar.component.html
index 702c44621234088005945a2dcefb53cc5ccf682f..ee29468beb81a90b3d75827549196a26eb11b996 100644
--- a/src/client/app/frameworks/sample/components/toolbar.component.html
+++ b/src/client/app/frameworks/sample/components/toolbar.component.html
@@ -1,3 +1,9 @@
-<h1>Angular 2 Seed Advanced</h1>
-<lang-switcher></lang-switcher>
-<div class="more"></div>
+<md-toolbar color="primary">
+  <button md-icon-button color="primary">
+    <md-icon class="sd-toolbar-icon">menu</md-icon>
+  </button>
+  <span>Angular 2 Seed</span>
+  <span class="sd-toolbar-filler"></span>
+  <lang-switcher></lang-switcher>
+  <md-icon svgSrc="./assets/svg/more.svg" class="sd-toolbar-icon">code</md-icon>
+</md-toolbar>
diff --git a/src/client/app/shared/material.module.ts b/src/client/app/frameworks/sample/material.module.ts
similarity index 100%
rename from src/client/app/shared/material.module.ts
rename to src/client/app/frameworks/sample/material.module.ts
diff --git a/src/client/app/frameworks/sample/sample.module.ts b/src/client/app/frameworks/sample/sample.module.ts
index bcb07068aeb9e38f77f2c277e81339979988e481..a693a3ee97af0f30896663302a2cef7e9a081573 100644
--- a/src/client/app/frameworks/sample/sample.module.ts
+++ b/src/client/app/frameworks/sample/sample.module.ts
@@ -6,6 +6,9 @@ import { RouterModule } from '@angular/router';
 
 // libs
 import { StoreModule } from '@ngrx/store';
+import { MdButtonModule } from '@angular2-material/button';
+import { MdToolbarModule } from '@angular2-material/toolbar';
+import { MdIconModule } from '@angular2-material/icon';
 
 // app
 import { ToolbarComponent } from './components/toolbar.component';
@@ -13,6 +16,7 @@ import { NavbarComponent } from './components/navbar.component';
 import { nameListReducer, NameListService } from './services/name-list.service';
 import { MultilingualModule } from '../i18n/multilingual.module';
 import { multilingualReducer, MultilingualStateI } from '../i18n/services/multilingual.service';
+import { MaterialModule } from './material.module';
 
 // state
 export interface AppStoreI {
@@ -30,6 +34,10 @@ export interface AppStoreI {
     FormsModule,
     RouterModule,
     MultilingualModule,
+    MdButtonModule,
+    MdToolbarModule,
+    MdIconModule,
+    MaterialModule.forRoot(),
     StoreModule.provideStore({
       i18n: multilingualReducer,
       names: nameListReducer
@@ -44,7 +52,11 @@ export interface AppStoreI {
   ],
   exports: [
     ToolbarComponent,
-    NavbarComponent
+    NavbarComponent,
+    MaterialModule,
+    CommonModule,
+    FormsModule,
+    RouterModule
   ]
 })
 export class SampleModule {
diff --git a/src/client/app/frameworks/sample/services/name-list.service.ts b/src/client/app/frameworks/sample/services/name-list.service.ts
index 24d3660b339dad0ad23e46e6918a0a196f1215c4..29fb8da1a041372eca0a6cc18717e6e9fa194562 100644
--- a/src/client/app/frameworks/sample/services/name-list.service.ts
+++ b/src/client/app/frameworks/sample/services/name-list.service.ts
@@ -37,7 +37,7 @@ export const nameListReducer: ActionReducer<any> = (state: any = [], action: Act
 
 @Injectable()
 export class NameListService extends Analytics {
-  public names: Observable<any>;
+  public names: Observable<string[]>;
 
   constructor(public analytics: AnalyticsService, private store: Store<any>, private http: Http) {
     super(analytics);
@@ -61,4 +61,13 @@ export class NameListService extends Analytics {
     this.track(NAME_LIST_ACTIONS.NAME_ADDED, { label: name });
     this.store.dispatch({ type: NAME_LIST_ACTIONS.NAME_ADDED, payload: name });
   }
+
+  // TODO : Remove the get since names can be called directly
+  /**
+   * Returns an Observable for the HTTP GET request for the JSON resource.
+   * @return {string[]} The Observable for the HTTP request.
+   */
+  get(): Observable<string[]> {
+    return this.names;
+  }
 }
diff --git a/tools/config/project.config.ts b/tools/config/project.config.ts
index 1e83e9dca0f8869449e7dc9ce7b5dd8896a1bc97..d48efdf5c3645fe2e5882584dde579a6f46e41bf 100644
--- a/tools/config/project.config.ts
+++ b/tools/config/project.config.ts
@@ -55,7 +55,8 @@ export class ProjectConfig extends SeedAdvancedConfig {
       'button-toggle',
       'tabs',
       'toolbar',
-      'tooltip'
+      'tooltip',
+      'core'
     ];
 
     this.SYSTEM_CONFIG['packageConfigPaths'] = [