diff --git a/app/app-routing.module.ts b/app/app-routing.module.ts
new file mode 100644
index 0000000..32f1c28
--- /dev/null
+++ b/app/app-routing.module.ts
@@ -0,0 +1,27 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+
+import { DashboardComponent } from "./dashboard.component";
+import { DucksComponent } from "./ducks.component";
+
+const routes: Routes = [
+    {
+        path: '',
+        redirectTo: '/dashboard',
+        pathMatch: 'full'
+    },
+    {
+        path: 'dashboard',
+        component: DashboardComponent,
+    },
+    {
+        path: 'ducks',
+        component: DucksComponent
+    }
+]
+
+@NgModule({
+    imports: [ RouterModule.forRoot(routes) ],
+    exports: [ RouterModule ]
+})
+export class AppRoutingModule {}
diff --git a/app/app.component.ts b/app/app.component.ts
index c530bc2..8d3cecd 100644
--- a/app/app.component.ts
+++ b/app/app.component.ts
@@ -1,7 +1,10 @@
 import { Component } from "@angular/core";
 
 @Component({
-    selector: "duckbook-front",
-    templateUrl: "/app/app.component.html"
+    moduleId: module.id,
+    selector: "duckbook-front-app",
+    templateUrl: "app.component.html"
 })
-export class AppComponent {}
+export class AppComponent {
+    title = "Rubber Duck Booking Tool";
+}
diff --git a/app/app.module.ts b/app/app.module.ts
index ccbfb20..1e180b7 100644
--- a/app/app.module.ts
+++ b/app/app.module.ts
@@ -1,37 +1,32 @@
-import "./rxjs-extensions";
-
 import { NgModule } from "@angular/core";
 import { BrowserModule } from "@angular/platform-browser";
 import { FormsModule } from "@angular/forms";
 import { HttpModule } from "@angular/http";
 
-import { InMemoryWebApiModule } from "angular2-in-memory-web-api";
+import { AppRoutingModule } from "./app-routing.module";
+
+import { InMemoryWebApiModule } from "angular-in-memory-web-api";
 import { InMemoryDataService } from "./in-memory-data.service";
 
-import { routing } from "./app.routing";
-
 import { AppComponent } from "./app.component";
-import { DucksComponent } from "./ducks.component";
 import { DuckDetailComponent } from "./duck-detail.component";
 import { DashboardComponent } from "./dashboard.component";
-import { DuckSearchComponent } from "./duck-search.component";
+import { DucksComponent } from "./ducks.component";
 
 import { DuckService } from "./duck.service";
 
 @NgModule({
     imports: [
         BrowserModule,
-        FormsModule,
         HttpModule,
         InMemoryWebApiModule.forRoot(InMemoryDataService),
-        routing
+        AppRoutingModule
     ],
     declarations: [
         AppComponent,
-        DucksComponent,
+        DashboardComponent,
         DuckDetailComponent,
-        DuckSearchComponent,
-        DashboardComponent
+        DucksComponent
     ],
     providers: [ DuckService ],
     bootstrap: [ AppComponent ]
diff --git a/app/app.routing.ts b/app/app.routing.ts
deleted file mode 100644
index 2ccdf5c..0000000
--- a/app/app.routing.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { ModuleWithProviders } from "@angular/core";
-import { Routes, RouterModule } from "@angular/router";
-
-import { DucksComponent } from "./ducks.component";
-import { DuckDetailComponent } from "./duck-detail.component";
-import { DashboardComponent } from "./dashboard.component";
-
-const appRoutes: Routes = [
-    {
-        path: "",
-        redirectTo: "/dashboard",
-        pathMatch: "full"
-    },
-    {
-        path: "dashboard",
-        component: DashboardComponent
-    },
-    {
-        path: "ducks",
-        component: DucksComponent
-    },
-    {
-        path: "detail/:id",
-        component: DuckDetailComponent
-    }
-]
-
-export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
diff --git a/app/dashboard.component.css b/app/dashboard.component.css
new file mode 100644
index 0000000..753508d
--- /dev/null
+++ b/app/dashboard.component.css
@@ -0,0 +1,11 @@
+.duck-link .image {
+    background-color: black;
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    margin-right: 1em;
+}
+
+.duck-link .small {
+    margin-bottom: 0;
+}
diff --git a/app/dashboard.component.html b/app/dashboard.component.html
index 89ac14c..8202790 100644
--- a/app/dashboard.component.html
+++ b/app/dashboard.component.html
@@ -1,4 +1,10 @@
-<div *ngFor="let duck of ducks" (click)="gotoDetail(duck)">
-    {{ duck.color }}
+<h3>Duck Dashboard!</h3>
+<div class="list-group">
+    <a *ngFor="let duck of ducks"
+       class="list-group-item duck-link"
+       href="#">
+        <div class="image pull-left"></div>
+        {{ duck.name }}
+        <p class="clearfix small">Something.</p>
+    </a>
 </div>
-<duck-search></duck-search>
diff --git a/app/dashboard.component.ts b/app/dashboard.component.ts
index 4bb53fa..e9671ca 100644
--- a/app/dashboard.component.ts
+++ b/app/dashboard.component.ts
@@ -1,27 +1,19 @@
 import { Component, OnInit } from "@angular/core";
-import { Router } from "@angular/router";
 
 import { DuckService } from "./duck.service";
-import { Duck } from "./models";
 
 @Component({
     selector: "dashboard",
-    templateUrl: "/app/dashboard.component.html"
+    templateUrl :"app/dashboard.component.html",
+    styleUrls: ["app/dashboard.component.css"]
 })
 export class DashboardComponent implements OnInit {
     ducks: Duck[] = [];
 
-    constructor(private router: Router,
-                private duckService: DuckService)
-    {}
+    constructor(private duckService: DuckService) {}
 
     ngOnInit(): void {
         this.duckService.getDucks()
-            .then(ducks => this.ducks = ducks.slice(1, 5));
-    }
-
-    gotoDetail(duck: Duck): void {
-        let link = ['/detail', duck.id];
-        this.router.navigate(link);
+            .then(ducks => this.ducks = ducks);
     }
 }
diff --git a/app/duck-detail.component.html b/app/duck-detail.component.html
index 71b5d1e..b9b501c 100644
--- a/app/duck-detail.component.html
+++ b/app/duck-detail.component.html
@@ -1,12 +1,3 @@
 <div *ngIf="duck">
-    <div>
-        <label>id: </label>
-        {{ duck.id }}
-    </div>
-    <div>
-        <label>color: </label>
-        <input [(ngModel)]="duck.color" placeholder="Color" />
-    </div>
-    <button (click)="save()">Save</button>
-    <button (click)="goBack()">Back</button>
+    <h2>{{ duck.name }}</h2>
 </div>
diff --git a/app/duck-detail.component.ts b/app/duck-detail.component.ts
index b893a3b..6edd663 100644
--- a/app/duck-detail.component.ts
+++ b/app/duck-detail.component.ts
@@ -1,17 +1,22 @@
-import { Component, Input, OnInit } from "@angular/core";
+import { Component, OnInit} from "@angular/core";
 import { ActivatedRoute, Params } from "@angular/router";
-
-import { DuckService } from "./duck.service";
+import { Location } from "@angular/common";
 
 import { Duck } from "./models";
+import { DuckService } from "./duck.service";
 
 @Component({
+    moduleId: module.id,
     selector: "duck-detail",
-    templateUrl: "/app/duck-detail.component.html"
+    templateUrl: "duck-detail.component.html"
 })
-export class DuckDetailComponent implements OnInit {
-    constructor(private duckService: DuckService,
-                private route: ActivatedRoute)
+export class DuckDetailComponent {
+    duck: Duck;
+
+    constructor(
+        private duckService: DuckService,
+        private route: ActivatedRoute,
+        private location: Location)
     {}
 
     ngOnInit(): void {
@@ -19,18 +24,6 @@ export class DuckDetailComponent implements OnInit {
             let id = +params['id'];
             this.duckService.getDuck(id)
                 .then(duck => this.duck = duck);
-        });
+        })
     }
-
-    goBack(): void {
-        window.history.back();
-    }
-
-    save(): void {
-        this.duckService.update(this.duck)
-            .then(this.goBack);
-    }
-
-    @Input()
-    duck: Duck;
 }
diff --git a/app/duck-search.component.html b/app/duck-search.component.html
deleted file mode 100644
index dc408d7..0000000
--- a/app/duck-search.component.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<div id="search-component">
-    <h4>Duck search</h4>
-    <input #searchBox id="search-box" (keyup)="search(searchBox.value)">
-    <div>
-        <div *ngFor="let duck of ducks | async"
-             (click)="gotoDetail(duck)"
-             class="search-result">
-            {{ duck.color }}
-        </div>
-    </div>
-</div>
diff --git a/app/duck-search.component.ts b/app/duck-search.component.ts
deleted file mode 100644
index 6771cdb..0000000
--- a/app/duck-search.component.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Component, OnInit } from "@angular/core";
-import { Router } from "@angular/router";
-import { Observable } from "rxjs/Observable";
-import { Subject } from "rxjs/Subject";
-
-import { DuckSearchService } from "./duck-search.service";
-import { Duck } from "./models";
-
-@Component({
-    selector: "duck-search",
-    templateUrl: "/app/duck-search.component.html",
-    providers: [ DuckSearchService ]
-})
-export class DuckSearchComponent implements OnInit {
-    ducks: Observable<Duck[]>;
-    private searchTerm = new Subject<string>();
-
-    constructor(private duckSearchService: DuckSearchService,
-                private router: Router)
-    {}
-
-    search(term: string): void {
-        this.searchTerm.next(term);
-    }
-
-    ngOnInit(): void {
-        this.ducks = this.searchTerm
-            .debounceTime(300)       // wait for 300ms pause in events
-            .distinctUntilChanged()  // ignore if next search term is same as previous
-            .switchMap(term => term  // switch to new observable each time
-                ? this.duckSearchService.search(term)
-                : Observable.of<Duck[]>([]))
-            .catch(error => {
-                console.log(error);
-                return Observable.of<Duck[]>([]);
-            });
-    }
-
-    gotoDetail(duck: Duck): void {
-        let link = ['/detail', duck.id];
-        this.router.navigate(link);
-    }
-}
diff --git a/app/duck-search.service.ts b/app/duck-search.service.ts
deleted file mode 100644
index 736dcac..0000000
--- a/app/duck-search.service.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Injectable } from "@angular/core";
-import { Http, Response } from "@angular/http";
-import { Observable } from "rxjs";
-
-import { Duck } from "./models";
-
-@Injectable()
-export class DuckSearchService {
-    constructor (private http: Http) {}
-
-    search(term: string): Observable<Duck[]> {
-        return this.http.get(`app/ducks/?color=${term}`)
-                   .map((r: Response) => r.json().data as Duck[]);
-    }
-}
diff --git a/app/duck.service.ts b/app/duck.service.ts
index 4d25b08..79d7ddd 100644
--- a/app/duck.service.ts
+++ b/app/duck.service.ts
@@ -7,50 +7,33 @@ import { Duck } from "./models";
 
 @Injectable()
 export class DuckService {
-    private ducksUrl = 'app/ducks';
     private headers = new Headers({"Content-Type": "application/json"});
+    private ducksUrl = 'app/ducks';
 
     constructor(private http: Http) {}
 
+    getDucks(): Promise<Duck[]> {
+        return this.http.get(this.ducksUrl)
+            .toPromise()
+            .then(response => response.json().data as Duck[])
+            .catch(this.handleError);
+    }
+
+    getDuck(id: number): Promise<Duck> {
+        return this.getDucks()
+            .then(ducks => ducks.find(duck => duck.id === id));
+    }
+
+    create(name: string): Promise<Duck> {
+        return this.http.post(this.ducksUrl, JSON.stringify({name: name}), {headers: this.headers})
+            .toPromise()
+            .then(res => res.json().data)
+            .catch(this.handleError);
+    }
+
     private handleError(error: any): Promise<any> {
         console.error("An error occured", error);
 
         return Promise.reject(error.message || error);
     }
-
-    create(color: string): Promise<Duck> {
-        return this.http.post(this.ducksUrl, JSON.stringify({color: color}), {headers: this.headers})
-                   .toPromise()
-                   .then((res) => res.json().data)
-                   .catch(this.handleError);
-    }
-
-    update(duck: Duck): Promise<Duck> {
-        const url = `${this.ducksUrl}/${duck.id}`;
-
-        return this.http.put(url, JSON.stringify(duck), {headers: this.headers})
-                   .toPromise()
-                   .then(() => duck)
-                   .catch(this.handleError);
-    }
-
-    delete(id: number): Promise<void> {
-        let url = `${this.ducksUrl}/${id}`;
-
-        return this.http.delete(url, {headers: this.headers})
-                   .toPromise()
-                   .then(() => null)
-                   .catch(this.handleError);
-    }
-
-    getDucks(): Promise<Duck[]> {
-        return this.http.get(this.ducksUrl)
-                   .toPromise()
-                   .then(response => response.json().data as Duck[])
-                   .catch(this.handleError);
-    }
-
-    getDuck(id: number): Promise<Duck> {
-        return this.getDucks().then(ducks => ducks.find(duck => duck.id === id));
-    }
 }
diff --git a/app/ducks.component.html b/app/ducks.component.html
index 6ccf63f..bfe9fa2 100644
--- a/app/ducks.component.html
+++ b/app/ducks.component.html
@@ -1,17 +1,6 @@
-<h1>Hello!</h1>
-
 <ul>
-    <li *ngFor="let duck of ducks" (click)="onSelect(duck)">
-        {{ duck.color }}
-        <button (click)="delete(duck); $event.stopPropagation()">Delete</button>
+    <li *ngFor="let duck of ducks">
+        <span class="badge">{{ duck.id }}</span>
+        {{ duck.name }}
     </li>
 </ul>
-<div>
-    <label>Duck color:</label>
-    <input #duckColor>
-    <button (click)="add(duckColor.value); duckColor.value = ''">Add</button>
-</div>
-<div *ngIf="selectedDuck">
-    {{ selectedDuck.color }}
-    <button (click)="gotoDetail(selectedDuck)">Edit</button>
-</div>
diff --git a/app/ducks.component.ts b/app/ducks.component.ts
index fe19d18..2ee58f2 100644
--- a/app/ducks.component.ts
+++ b/app/ducks.component.ts
@@ -5,54 +5,42 @@ import { Duck } from "./models";
 import { DuckService } from "./duck.service";
 
 @Component({
+    moduleId: module.id,
     selector: "ducks",
-    templateUrl: "/app/ducks.component.html",
-    providers: [ DuckService ]
+    templateUrl: "ducks.component.html"
 })
-export class DucksComponent implements OnInit {
-    ducks = [];
+export class DucksComponent {
+    ducks: Duck[];
     selectedDuck: Duck;
 
-    constructor(private router: Router,
-                private duckService: DuckService)
+    constructor(private duckService: DuckService,
+                private router: Router)
     {}
 
-    ngOnInit(): void {
-        this.getDucks();
+    getDucks(): void
+    {
+        this.duckService
+            .getDucks()
+            .then(ducks => this.ducks = ducks);
     }
 
-    getDucks(): void {
-        this.duckService.getDucks().then(ducks => this.ducks = ducks);
-    }
+    add(name: string): void {
+        name = name.trim();
 
-    onSelect(duck: Duck): void {
-        this.selectedDuck = duck;
-    }
+        if (!name) { return; }
 
-    gotoDetail(duck: Duck): void {
-        this.router.navigate(['/detail', duck.id]);
-    }
-
-    add(color: string): void {
-        // Make sure the color is not empty
-        color = color.trim();
-        if (!color) { return; }
-
-        this.duckService.create(color)
+        this.duckService.create(name)
             .then(duck => {
                 this.ducks.push(duck);
                 this.selectedDuck = null;
             });
     }
 
-    delete(duck: Duck): void {
-        this.duckService.delete(duck.id)
-            .then(() => {
-                this.ducks = this.ducks.filter(d => d !== duck);
+    ngOnInit(): void {
+        this.getDucks();
+    }
 
-                if (this.selectedDuck === duck) {
-                    this.selectedDuck = null;
-                }
-            });
+    onSelect(duck: Duck): void {
+        this.selectedDuck = duck;
     }
 }
diff --git a/app/in-memory-data.service.ts b/app/in-memory-data.service.ts
index cfd7a14..870d8d1 100644
--- a/app/in-memory-data.service.ts
+++ b/app/in-memory-data.service.ts
@@ -1,11 +1,18 @@
-import { InMemoryDbService } from "angular2-in-memory-web-api";
+import { InMemoryDbService } from "angular-in-memory-web-api";
 
 export class InMemoryDataService implements InMemoryDbService {
     createDb() {
         let ducks = [
-            { id: 1, color: 'yellow' },
-            { id: 2, color: 'blue' },
-            { id: 3, color: 'pink' }
+            {
+                id: 1,
+                name: "Fastfingers",
+                color: "#ee6aa7"
+            },
+            {
+                id: 2,
+                name: "Lady Pickett",
+                color: "#8b8b00"
+            }
         ];
 
         return {ducks};
diff --git a/app/models.ts b/app/models.ts
index 269807c..5323ff5 100644
--- a/app/models.ts
+++ b/app/models.ts
@@ -1,4 +1,5 @@
 export class Duck {
     id: number;
+    name: string;
     color: string;
 }
diff --git a/app/rxjs-extensions.ts b/app/rxjs-extensions.ts
deleted file mode 100644
index 2bb03c8..0000000
--- a/app/rxjs-extensions.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// Observable class extensions
-import "rxjs/add/observable/of";
-import "rxjs/add/observable/throw";
-
-// Observable operators
-import "rxjs/add/operator/catch";
-import "rxjs/add/operator/debounceTime";
-import "rxjs/add/operator/distinctUntilChanged";
-import "rxjs/add/operator/do";
-import "rxjs/add/operator/filter";
-import "rxjs/add/operator/map";
-import "rxjs/add/operator/switchMap";
diff --git a/index.html b/index.html
index db56abf..4293f85 100644
--- a/index.html
+++ b/index.html
@@ -1,29 +1,27 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <title>Angular 2 QuickStart</title>
         <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <title>Rubber Duck Booking Tool</title>
 
         <base href="/">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
 
+        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
         <link rel="stylesheet" href="styles.css">
 
-        <!-- 1. Load libraries -->
-        <!-- Polyfill(s) for older browsers -->
         <script src="node_modules/core-js/client/shim.min.js"></script>
         <script src="node_modules/zone.js/dist/zone.js"></script>
         <script src="node_modules/reflect-metadata/Reflect.js"></script>
         <script src="node_modules/systemjs/dist/system.src.js"></script>
 
-        <!-- 2. Configure SystemJS -->
         <script src="systemjs.config.js"></script>
         <script>
             System.import('app').catch(function(err){ console.error(err); });
         </script>
     </head>
-    <!-- 3. Display the application -->
     <body>
-        <duckbook-front>Loading…</duckbook-front>
+        <duckbook-front-app>Loading…</duckbook-front-app>
     </body>
 </html>
diff --git a/package.json b/package.json
index cceb371..a1ea766 100644
--- a/package.json
+++ b/package.json
@@ -1,43 +1,48 @@
 {
-  "name": "duck-booking-front",
-  "description": "Front-end for the Rubber Duck Booking Tool",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/gergelypolonkai/duckbook-front"
-  },
-  "version": "1.0.0",
-  "scripts": {
-    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
-    "lite": "lite-server",
-    "postinstall": "typings install",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "typings": "typings"
-  },
-  "license": "ISC",
-  "dependencies": {
-    "@angular/common": "2.0.0-rc.6",
-    "@angular/compiler": "2.0.0-rc.6",
-    "@angular/compiler-cli": "0.6.0",
-    "@angular/core": "2.0.0-rc.6",
-    "@angular/forms": "2.0.0-rc.6",
-    "@angular/http": "2.0.0-rc.6",
-    "@angular/platform-browser": "2.0.0-rc.6",
-    "@angular/platform-browser-dynamic": "2.0.0-rc.6",
-    "@angular/router": "3.0.0-rc.2",
-    "@angular/upgrade": "2.0.0-rc.6",
-    "core-js": "^2.4.1",
-    "reflect-metadata": "^0.1.3",
-    "rxjs": "5.0.0-beta.11",
-    "systemjs": "0.19.27",
-    "zone.js": "^0.6.17",
-    "angular2-in-memory-web-api": "0.0.18",
-    "bootstrap": "^3.3.6"
-  },
-  "devDependencies": {
-    "concurrently": "^2.2.0",
-    "lite-server": "^2.2.2",
-    "typescript": "^1.8.10",
-    "typings": "^1.3.2"
-  }
+    "name": "duck-booking-front",
+    "description": "Front-end for the Rubber Duck Booking Tool",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/gergelypolonkai/duck-booking-tool-front"
+    },
+    "version": "1.0.0",
+    "scripts": {
+        "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
+        "lite": "lite-server",
+        "tsc": "tsc",
+        "tsc:w": "tsc -w"
+    },
+    "licenses": [
+        {
+            "type": "MIT",
+            "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
+        }
+    ],
+    "dependencies": {
+        "@angular/common": "~2.1.1",
+        "@angular/compiler": "~2.1.1",
+        "@angular/core": "~2.1.1",
+        "@angular/forms": "~2.1.1",
+        "@angular/http": "~2.1.1",
+        "@angular/platform-browser": "~2.1.1",
+        "@angular/platform-browser-dynamic": "~2.1.1",
+        "@angular/router": "~3.1.1",
+        "@angular/upgrade": "~2.1.1",
+
+        "angular-in-memory-web-api": "~0.1.13",
+        "bootstrap": "^3.3.7",
+        "core-js": "^2.4.1",
+        "ng2-bootstrap": "^1.1.16",
+        "reflect-metadata": "^0.1.8",
+        "rxjs": "5.0.0-beta.12",
+        "systemjs": "0.19.39",
+        "zone.js": "^0.6.25"
+    },
+    "devDependencies": {
+        "@types/core-js": "^0.9.34",
+        "@types/node": "^6.0.45",
+        "concurrently": "^3.0.0",
+        "lite-server": "^2.2.2",
+        "typescript": "^2.0.3"
+    }
 }
diff --git a/styles.css b/styles.css
index e69de29..2158e34 100644
--- a/styles.css
+++ b/styles.css
@@ -0,0 +1,14 @@
+/* Master Styles */
+h1 {
+    color: #369;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 250%;
+}
+h2, h3 {
+    color: #444;
+    font-family: Arial, Helvetica, sans-serif;
+    font-weight: lighter;
+}
+body {
+    margin: 2em;
+}
diff --git a/systemjs.config.js b/systemjs.config.js
index de199e6..7c5333f 100644
--- a/systemjs.config.js
+++ b/systemjs.config.js
@@ -1,43 +1,39 @@
 /**
- * System configuration for Angular 2 samples
- * Adjust as necessary for your application needs.
+ * System configuration for the Rubber Duck Booking Tool
  */
 (function (global) {
-  System.config({
-    paths: {
-      // paths serve as alias
-      'npm:': 'node_modules/'
-    },
-    // map tells the System loader where to look for things
-    map: {
-      // our app is within the app folder
-      app: 'app',
-      // angular bundles
-      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-      // other libraries
-      'rxjs':                       'npm:rxjs',
-      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
-    },
-    // packages tells the System loader how to load when no filename and/or no extension
-    packages: {
-      app: {
-        main: './main.js',
-        defaultExtension: 'js'
-      },
-      rxjs: {
-        defaultExtension: 'js'
-      },
-      'angular2-in-memory-web-api': {
-        main: './index.js',
-        defaultExtension: 'js'
-      }
-    }
-  });
+    System.config({
+        paths: {
+            // paths serve as alias
+            'npm:': 'node_modules/'
+        },
+        // map tells the System loader where to look for things
+        map: {
+            // our app is within the app folder
+            app: 'app',
+            // angular bundles
+            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
+            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
+            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
+            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
+            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
+            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
+            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
+            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+            // other libraries
+            'rxjs':                      'npm:rxjs',
+            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
+            'ng2-bootstrap/ng2-bootstrap': 'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.js"',
+        },
+        // packages tells the System loader how to load when no filename and/or no extension
+        packages: {
+            app: {
+                main: './main.js',
+                defaultExtension: 'js'
+            },
+            rxjs: {
+                defaultExtension: 'js'
+            }
+        }
+    });
 })(this);
diff --git a/tsconfig.json b/tsconfig.json
index e6a6eac..d4f0dbe 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,12 +1,12 @@
 {
-  "compilerOptions": {
-    "target": "es5",
-    "module": "commonjs",
-    "moduleResolution": "node",
-    "sourceMap": true,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "removeComments": false,
-    "noImplicitAny": false
-  }
+    "compilerOptions": {
+        "target": "es5",
+        "module": "commonjs",
+        "moduleResolution": "node",
+        "sourceMap": true,
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "removeComments": false,
+        "noImplicitAny": false
+    }
 }
diff --git a/typings.json b/typings.json
deleted file mode 100644
index 72db971..0000000
--- a/typings.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "globalDependencies": {
-    "core-js": "registry:dt/core-js#0.0.0+20160725163759",
-    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
-    "node": "registry:dt/node#6.0.0+20160831021119"
-  }
-}