diff --git a/README.md b/README.md
index da8cc14..604304d 100644
--- a/README.md
+++ b/README.md
@@ -2,8 +2,8 @@
 
 Weirdbeard is a web application featuring search for beard styles, best products for beard care, finding nearest beard barber and discussion board for the registered customers.
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.3.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.6.
 
 ## prerequisites
 
-Angular, Typescript, Nodejs, Bootstrap.
\ No newline at end of file
+Angular, Typescript, Nodejs, Angular-Material.
\ No newline at end of file
diff --git a/package.json b/package.json
index b5911d7..60a6a81 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@angular/common": "^4.0.0",
     "@angular/compiler": "^4.0.0",
     "@angular/core": "^4.0.0",
+    "@angular/flex-layout": "^2.0.0-beta.8",
     "@angular/forms": "^4.0.0",
     "@angular/http": "^4.0.0",
     "@angular/material": "^2.0.0-beta.5",
@@ -28,7 +29,7 @@
     "zone.js": "^0.8.4"
   },
   "devDependencies": {
-    "@angular/cli": "1.0.3",
+    "@angular/cli": "^1.0.6",
     "@angular/compiler-cli": "^4.0.0",
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.38",
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 5b7d25b..656b3fa 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,11 +1,12 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { HomeComponent } from 'app/home/home.component';
+import { PageNotFoundComponent } from 'app/pagenotfound/pagenotfound.component';
 
 const routes: Routes = [
-  {
-    path: '',
-    children: []
-  }
+  { path: 'home', component: HomeComponent },
+  { path: '', redirectTo: 'home', pathMatch: 'full' },
+  { path: '**', component: PageNotFoundComponent }
 ];
 
 @NgModule({
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 6ea12be..cf8163c 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,4 +1,4 @@
-<h1>
+<!--<h1>
   {{title}}
-</h1>
+</h1>-->
 <router-outlet></router-outlet>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 0020dc1..4747129 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -6,10 +6,14 @@ import { HttpModule } from '@angular/http';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { MaterialdesignModule } from 'app/materialdesign/materialdesign.module';
+import { HomeComponent } from './home/home.component';
+import { PageNotFoundComponent } from './pagenotfound/pagenotfound.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    HomeComponent,
+    PageNotFoundComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
new file mode 100644
index 0000000..7544857
--- /dev/null
+++ b/src/app/home/home.component.html
@@ -0,0 +1 @@
+<h2>home page</h2>
diff --git a/src/app/home/home.component.spec.ts b/src/app/home/home.component.spec.ts
new file mode 100644
index 0000000..86774ae
--- /dev/null
+++ b/src/app/home/home.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HomeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
new file mode 100644
index 0000000..cc6fdd3
--- /dev/null
+++ b/src/app/home/home.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'wb-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.css']
+})
+export class HomeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/materialdesign/materialdesign.module.ts b/src/app/materialdesign/materialdesign.module.ts
index ed602a9..4763a7f 100644
--- a/src/app/materialdesign/materialdesign.module.ts
+++ b/src/app/materialdesign/materialdesign.module.ts
@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MaterialModule } from '@angular/material';
+import { FlexLayoutModule } from '@angular/flex-layout';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import 'hammerjs';
 
@@ -8,10 +9,12 @@ import 'hammerjs';
   imports: [
     CommonModule,
     MaterialModule,
+    FlexLayoutModule,
     BrowserAnimationsModule
   ],
   exports: [
     MaterialModule,
+    FlexLayoutModule,
     BrowserAnimationsModule
   ],
   declarations: []
diff --git a/src/app/pagenotfound/pagenotfound.component.ts b/src/app/pagenotfound/pagenotfound.component.ts
new file mode 100644
index 0000000..c577153
--- /dev/null
+++ b/src/app/pagenotfound/pagenotfound.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'wb-pagenotfound',
+  template: `
+    <p>
+     <md-icon class="warning">warning</md-icon><span class="spacer">Page not found!</span>
+    </p>
+  `,
+  styles: [`    
+    .warning { font-size: 30px;}
+    .spacer { margin-left: 10px;}
+  `
+  ]
+})
+export class PageNotFoundComponent { }