diff --git a/src/client/app/components/about/about.component.spec.ts b/src/client/app/components/about/about.component.spec.ts
index 7a078faa09f0a0cbac1c36e78a2f0c5a558a6611..ed97c6d89231fe95444fc4cb6e49dcdc9301237a 100644
--- a/src/client/app/components/about/about.component.spec.ts
+++ b/src/client/app/components/about/about.component.spec.ts
@@ -1,6 +1,7 @@
 // angular
 import { Component } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
+import { MdCardModule } from '@angular2-material/card';
 
 // app
 import {t} from '../../frameworks/test/index';
@@ -9,6 +10,9 @@ import {AboutComponent} from './about.component';
 // test module configuration for each test
 const testModuleConfig = () => {
   TestBed.configureTestingModule({
+    imports: [
+      MdCardModule
+    ],
     declarations: [AboutComponent, TestComponent]
   });
 };
diff --git a/src/client/app/components/app.component.spec.ts b/src/client/app/components/app.component.spec.ts
index 9e697135e19ef59f82d81fb487f8ad54c89ed8ef..7604fe69e445075ffb48177149ad3f3266c7b268 100644
--- a/src/client/app/components/app.component.spec.ts
+++ b/src/client/app/components/app.component.spec.ts
@@ -11,6 +11,11 @@ import {MultilingualModule} from '../frameworks/i18n/multilingual.module';
 import {AppComponent} from './app.component';
 import {HomeComponent} from './home/home.component';
 import {AboutComponent} from './about/about.component';
+import { MdListModule } from '@angular2-material/list';
+import { MdCardModule } from '@angular2-material/card';
+import { MdInputModule } from '@angular2-material/input';
+import { MdToolbarModule } from '@angular2-material/toolbar';
+import { MdIconModule, MdIconRegistry } from '@angular2-material/icon';
 
 const config:Route[] = [
   {path: '', component: HomeComponent},
@@ -20,7 +25,16 @@ const config:Route[] = [
 // test module configuration for each test
 const testModuleConfig = () => {
   TestBed.configureTestingModule({
-    imports: [FormsModule, MultilingualModule, RouterTestingModule.withRoutes(config)],
+    imports: [
+      FormsModule,
+      MultilingualModule,
+      RouterTestingModule.withRoutes(config),
+      MdCardModule,
+      MdListModule,
+      MdToolbarModule,
+      MdIconModule,
+      MdInputModule
+    ],
     declarations: [
       TestComponent, AppComponent,
       HomeComponent, AboutComponent,
@@ -29,7 +43,8 @@ const testModuleConfig = () => {
     providers: [
       TEST_CORE_PROVIDERS(),
       TEST_HTTP_PROVIDERS(),
-      NameListService
+      NameListService,
+      MdIconRegistry
     ]
   });
 };
diff --git a/src/client/app/components/home/home.component.e2e-spec.ts b/src/client/app/components/home/home.component.e2e-spec.ts
index 080f2acaade739ca39dffcf4ac361c976bf67984..0dc1f686abf26848b6492a8322c0c456ebd45cc4 100644
--- a/src/client/app/components/home/home.component.e2e-spec.ts
+++ b/src/client/app/components/home/home.component.e2e-spec.ts
@@ -9,29 +9,30 @@ t.describe('Home', function() {
   });
 
   t.it('should have correct h2', function() {
-      t.e(element(by.css('sd-app sd-home h2')).getText()).toEqual('I love technology!');
+      t.e(element(by.css('sd-home .home-title')).getText()).toEqual('I love technology!');
   });
- 
+
   t.it('should have an input', function() {
-    t.e(element(by.css('sd-app sd-home form input')).isPresent()).toEqual(true);
+    t.e(element(by.css('sd-home .home-form .home-input')).isPresent()).toEqual(true);
   });
 
   t.it('should have a list of computer scientists', function() {
-    t.e(element(by.css('sd-app sd-home ul')).getText())
-      .toEqual('Edsger Dijkstra\nDonald Knuth\nAlan Turing\nGrace Hopper');
+    t.e(element(By.css('md-list')).all(By.css('h3')).getText())
+      .toEqual(['Edsger Dijkstra', 'Donald Knuth', 'Alan Turing', 'Grace Hopper']);
   });
 
   t.it('should add a name to the list using the form', function() {
-    element(by.css('sd-app sd-home form input')).sendKeys('Tim Berners-Lee');
-    element(by.css('sd-app sd-home form button')).click();
-    t.e(element(by.css('sd-app sd-home ul')).getText())
-      .toEqual('Edsger Dijkstra\nDonald Knuth\nAlan Turing\nGrace Hopper\nTim Berners-Lee');
+    element(by.css('sd-home .home-form .home-input input')).sendKeys('Tim Berners-Lee');
+    element(by.css('sd-home .home-form .home-button')).click();
+
+    t.e(element(By.css('md-list')).all(By.css('h3')).getText())
+      .toEqual(['Edsger Dijkstra', 'Donald Knuth', 'Alan Turing', 'Grace Hopper', 'Tim Berners-Lee']);
   });
-  
+
   t.it('language switcher should change language', function() {
-    t.e(element(by.css('sd-app sd-home h2')).getText()).toEqual('I love technology!');
-    selectDropdownByValue('sd-app sd-toolbar lang-switcher select', 'fr', 500);
-    t.e(element(by.css('sd-app sd-home h2')).getText()).toEqual(`J'adore la technologie !`);
+    t.e(element(by.css('sd-home .home-title')).getText()).toEqual('I love technology!');
+    selectDropdownByValue('sd-toolbar lang-switcher select', 'fr', 500);
+    t.e(element(by.css('sd-home .home-title')).getText()).toEqual(`J'adore la technologie !`);
     t.e(element(by.css('sd-app sd-home')).all(by.tagName('p')).first().getText())
       .toEqual(`En récompense, voici une liste de géniaux informaticiens :`);
   });
diff --git a/src/client/app/components/home/home.component.html b/src/client/app/components/home/home.component.html
index cc948bebc6f998cdd742fe25579f152d529b5c5b..8646924e819d3b2bfaaeed2e347420d3668b86d8 100755
--- a/src/client/app/components/home/home.component.html
+++ b/src/client/app/components/home/home.component.html
@@ -1,6 +1,6 @@
 <div class="home-card-container">
   <md-card>
-    <md-card-title>{{ 'LOVE_TECH' | translate }}</md-card-title>
+    <md-card-title class="home-title">{{ 'LOVE_TECH' | translate }}</md-card-title>
     <md-card-content>
       <p>
         {{'ABOUT_REWARD' | translate}}
diff --git a/src/client/app/components/home/home.component.spec.ts b/src/client/app/components/home/home.component.spec.ts
index 3af7c89484aeeb537608f47d5a4ea013bc27a865..f49260f8ed4b306b3553af8d91822f118bddb3cb 100644
--- a/src/client/app/components/home/home.component.spec.ts
+++ b/src/client/app/components/home/home.component.spec.ts
@@ -8,6 +8,9 @@ import {
   Http
 } from '@angular/http';
 import { MockBackend } from '@angular/http/testing';
+import { MdCardModule } from '@angular2-material/card';
+import { MdInputModule } from '@angular2-material/input';
+import { MdListModule } from '@angular2-material/list';
 
 // libs
 import { StoreModule } from '@ngrx/store';
@@ -22,8 +25,16 @@ import { HomeComponent } from './home.component';
 // test module configuration for each test
 const testModuleConfig = () => {
   TestBed.configureTestingModule({
-    imports: [CoreModule, RouterTestingModule, AnalyticsModule,
-      MultilingualModule, StoreModule.provideStore({ names: nameListReducer })],
+    imports: [
+      CoreModule,
+      RouterTestingModule,
+      AnalyticsModule,
+      MultilingualModule,
+      StoreModule.provideStore({ names: nameListReducer }),
+      MdCardModule,
+      MdInputModule,
+      MdListModule
+    ],
     declarations: [HomeComponent, TestComponent],
     providers: [
       NameListService,
@@ -62,8 +73,8 @@ export function main() {
 
             fixture.detectChanges();
 
-            t.e(homeDOMEl.querySelectorAll('li').length).toEqual(1);
-            t.e(homeDOMEl.querySelectorAll('li')[0].textContent).toEqual('Minko');
+            t.e(homeDOMEl.querySelectorAll('md-list-item').length).toEqual(1);
+            t.e(homeDOMEl.querySelectorAll('md-list-item h3')[0].textContent).toEqual('Minko');
           });
       }));
   });
diff --git a/src/client/app/components/home/home.module.ts b/src/client/app/components/home/home.module.ts
index 972880cb6e4f31c6464705c39b0d1b140bec8ca9..eebca33d77bc3c9059864740d801db3af917a15e 100644
--- a/src/client/app/components/home/home.module.ts
+++ b/src/client/app/components/home/home.module.ts
@@ -2,11 +2,11 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { HomeComponent } from './home.component';
-import {NameListService} from "../../frameworks/sample/services/name-list.service";
-import {MdListModule} from '@angular2-material/list';
+import { NameListService } from '../../frameworks/sample/services/name-list.service';
+import { MdListModule } from '@angular2-material/list';
 import { MdCardModule } from '@angular2-material/card';
-import {MdInputModule} from '@angular2-material/input';
-import {MultilingualModule} from "../../frameworks/i18n/multilingual.module";
+import { MdInputModule } from '@angular2-material/input';
+import { MultilingualModule } from '../../frameworks/i18n/multilingual.module';
 
 @NgModule({
   imports: [
diff --git a/src/client/app/frameworks/sample/sample.module.ts b/src/client/app/frameworks/sample/sample.module.ts
index 0acf9ba1c7070f0ecda9cadb7501deaa78b12335..2c11fde0be9915249a58296aee0ff77d59e9e650 100644
--- a/src/client/app/frameworks/sample/sample.module.ts
+++ b/src/client/app/frameworks/sample/sample.module.ts
@@ -16,7 +16,6 @@ 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/material.module';
 
 // state
 export interface AppStoreI {
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 29fb8da1a041372eca0a6cc18717e6e9fa194562..1427ad289b063aefb7cef0ea3b2f7b4f432b9dc4 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<string[]>;
+  public names: Observable<any>;
 
   constructor(public analytics: AnalyticsService, private store: Store<any>, private http: Http) {
     super(analytics);
diff --git a/src/client/web.module.ts b/src/client/web.module.ts
index 0381d9334bb8fbbf077e696a77b250bdab0f7f67..ef76f645d3d3eb75a0b23e1cb13ea63a151bcd23 100644
--- a/src/client/web.module.ts
+++ b/src/client/web.module.ts
@@ -8,7 +8,7 @@ import { RouterModule } from '@angular/router';
 import { AppComponent } from './app/components/app.component';
 import { routes } from './app/components/app.routes';
 import { AboutModule } from './app/components/about/about.module';
-import { HomeModule } from "./app/components/home/home.module";
+import { HomeModule } from './app/components/home/home.module';
 
 // feature modules
 import { CoreModule } from './app/frameworks/core/core.module';