diff --git a/README.md b/README.md
index 8fc6118..b58c3e5 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,19 @@
-# angular2byexample
-Source code repository for the book "Angular2 by Example"
+# Angular2 By Example
+
+[![Angular2 By Example Front Cover](https://d1ldz4te4covpm.cloudfront.net/sites/default/files/imagecache/ppv4_main_book_cover/B05079_MockupCover_Normal.jpg)](https://www.packtpub.com/web-development/angular-2-example)
+
+Source code repository for the book [Angular2 by Example](https://www.packtpub.com/web-development/angular-2-example)
+
+**Releasing soon!!**
+
+To setup code for Guess The Number see the README.md in **guessthenumber** folder.
+
+To setup code for Personal Trainer see the README.md in **trainer** folder.
+
+## Note
+
+The **master** branch contains the final outcome for both the samples we build throughout the book.
+
+Chapter progress is tracked using individual branches. Each **chapter has checkpoints** and each checkpoint code is **available on a seperate branch**.
+
+For example, branches *base*, *checkpoint2.1*, *checkpoint2.2*, *checkpoint2.3* and *checkpoint2.4* contain code checkpoints for **Chapter 2**.
diff --git a/guessthenumber/app.ts b/guessthenumber/app.ts
deleted file mode 100644
index 4e02bbe..0000000
--- a/guessthenumber/app.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-//import 'zone.js';
-//import 'reflect-metadata';
-import {
-Component, View, bootstrap
-}from 'angular2/angular2';
-
-@Component({
-  selector: 'my-app'
-})
-@View({
-  template: `
-  <div class="container">
-  <h2>Guess the Number !</h2>
-  <p class="well lead">Guess the computer generated random number between 1 and 1000.</p>
-  <label>Your Guess: </label>
-  <input type="number" [value]="guess" (input)="guess = $event.target.value" />
-  <button (click)="verifyGuess()" class="btn btn-primary btn-sm">Verify</button>
-  <button (click)="initializeGame()" class="btn btn-warning btn-sm">Restart</button>
-  <p>
-    <p [hidden]="deviation>=0" class="alert alert-warning">Your guess is higher.</p>
-    <p [hidden]="deviation<=0" class="alert alert-warning">Your guess is lower.</p>
-    <p [hidden]="deviation!==0" class="alert alert-success">Yes! That"s it.</p>
-  </p>
-  <p class="text-info">No of guesses :
-    <span class="badge">{{noOfTries}}</span>
-  </p>
-</div>
-`
-})
-class GuessTheNumberComponent {
-  deviation: number;
-  noOfTries: number;
-  original: number;
-  guess: number;
-
-  constructor() {
-    this.initializeGame();
-  }
-  verifyGuess() {
-    this.deviation = this.original - this.guess;
-    this.noOfTries = this.noOfTries + 1;
-  }
-  initializeGame() {
-    this.noOfTries = 0;
-    this.original = Math.floor((Math.random() * 1000) + 1);
-    this.guess = null;
-    this.deviation = null;
-  }
-}
-
-bootstrap(GuessTheNumberComponent);
diff --git a/guessthenumber/app/app.module.ts b/guessthenumber/app/app.module.ts
new file mode 100644
index 0000000..710d89b
--- /dev/null
+++ b/guessthenumber/app/app.module.ts
@@ -0,0 +1,12 @@
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { GuessTheNumberComponent }   from './guess-the-number.component';
+
+@NgModule({
+    imports:      [ BrowserModule ],
+    declarations: [ GuessTheNumberComponent ],
+    bootstrap:    [ GuessTheNumberComponent ]
+})
+
+export class AppModule { }
diff --git a/guessthenumber/app/guess-the-number.component.ts b/guessthenumber/app/guess-the-number.component.ts
new file mode 100644
index 0000000..0992fb2
--- /dev/null
+++ b/guessthenumber/app/guess-the-number.component.ts
@@ -0,0 +1,43 @@
+import { Component }from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <div class="container">
+      <h2>Guess the Number !</h2>
+      <p class="well lead">Guess the computer generated random number between 1 and 1000.</p>
+      <label>Your Guess: </label>
+      <input type="number" [value]="guess" (input)="guess = $event.target.value" />
+      <button (click)="verifyGuess()" class="btn btn-primary btn-sm">Verify</button>
+      <button (click)="initializeGame()" class="btn btn-warning btn-sm">Restart</button>
+      <div>
+        <p *ngIf="deviation<0" class="alert alert-warning">Your guess is higher.</p>
+        <p *ngIf="deviation>0" class="alert alert-warning">Your guess is lower.</p>
+        <p *ngIf="deviation===0" class="alert alert-success">Yes! That's it.</p>
+      </div>
+      <p class="text-info">No of guesses :
+        <span class="badge">{{noOfTries}}</span>
+      </p>
+    </div>
+    `
+})
+export class GuessTheNumberComponent {
+  deviation: number;
+  noOfTries: number;
+  original: number;
+  guess: number;
+
+  constructor() {
+    this.initializeGame();
+  }
+  initializeGame() {
+    this.noOfTries = 0;
+    this.original = Math.floor((Math.random() * 1000) + 1);
+    this.guess = null;
+    this.deviation = null;
+  }
+  verifyGuess() {
+    this.deviation = this.original - this.guess;
+    this.noOfTries = this.noOfTries + 1;
+  }
+}
\ No newline at end of file
diff --git a/guessthenumber/app/main.ts b/guessthenumber/app/main.ts
new file mode 100644
index 0000000..44f34b2
--- /dev/null
+++ b/guessthenumber/app/main.ts
@@ -0,0 +1,6 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+const platform = platformBrowserDynamic();
+platform.bootstrapModule(AppModule);
diff --git a/guessthenumber/index.html b/guessthenumber/index.html
index 8f843f8..c351c05 100644
--- a/guessthenumber/index.html
+++ b/guessthenumber/index.html
@@ -1,25 +1,19 @@
 <!DOCTYPE html>
 <html>
-
-<head>
-  <title>Guess the Number!</title>
-  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
-  <script src="https://code.angularjs.org/tools/system.js"></script>
-  <script src="https://code.angularjs.org/tools/typescript.js"></script>
-  <script src="https://code.angularjs.org/2.0.0-alpha.44/angular2.dev.js"></script>
-  <script>
-    System.config({
-      transpiler: 'typescript',
-      typescriptOptions: {
-        emitDecoratorMetadata: true
-      }
-    });
-    System.import('./app.ts');
-  </script>
-</head>
-
-<body>
-  <my-app>Loading...</my-app>  
-</body>
-
+  <head>
+    <title>Guess the Number!</title>
+    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
+    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
+    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
+    <script src="https://unpkg.com/zone.js@0.6.23?main=browser"></script>
+    <script src="https://unpkg.com/typescript@2.0/lib/typescript.js"></script>
+    <script src="https://unpkg.com/systemjs@0.19.27/dist/system.js"></script>
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('app').catch(function(err){ console.error(err); });
+    </script>
+  </head>
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
 </html>
diff --git a/guessthenumber/systemjs.config.js b/guessthenumber/systemjs.config.js
new file mode 100644
index 0000000..c7fa815
--- /dev/null
+++ b/guessthenumber/systemjs.config.js
@@ -0,0 +1,24 @@
+System.config({
+    map : {
+        'app': 'app',
+        'rxjs': 'https://unpkg.com/rxjs@5.0.0-beta.12',
+        '@angular/common': 'https://unpkg.com/@angular/common@2.0.0',
+        '@angular/compiler': 'https://unpkg.com/@angular/compiler@2.0.0',
+        '@angular/core': 'https://unpkg.com/@angular/core@2.0.0',
+        '@angular/platform-browser': 'https://unpkg.com/@angular/platform-browser@2.0.0',
+        '@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/platform-browser-dynamic@2.0.0'
+    },
+    packages:{
+        'app':  { main: 'main.ts',  defaultExtension: 'ts' },
+        '@angular/common': { main: 'bundles/common.umd.js', defaultExtension: 'js' },
+        '@angular/compiler': { main: 'bundles/compiler.umd.js', defaultExtension: 'js' },
+        '@angular/core': { main: 'bundles/core.umd.js', defaultExtension: 'js' },
+        '@angular/platform-browser': { main: 'bundles/platform-browser.umd.js', defaultExtension: 'js' },
+        '@angular/platform-browser-dynamic': { main: 'bundles/platform-browser-dynamic.umd.js', defaultExtension: 'js' },
+    },
+    // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
+    transpiler: 'typescript',
+    typescriptOptions: {
+        emitDecoratorMetadata: true
+    }
+});
\ No newline at end of file
diff --git a/trainer/.gitignore b/trainer/.gitignore
index f06235c..c5ac28a 100644
--- a/trainer/.gitignore
+++ b/trainer/.gitignore
@@ -1,2 +1,3 @@
 node_modules
 dist
+typings/**
\ No newline at end of file
diff --git a/trainer/README.md b/trainer/README.md
index eb6a127..8a4b300 100644
--- a/trainer/README.md
+++ b/trainer/README.md
@@ -1,3 +1,24 @@
 # Personal Trainer
 
 Personal Trainer built using Angular2 and TypeScript
+
+## Install
+
+Clone this repo and execute in your favourite shell:
+
+* `npm i -g gulp` to install gulp globally (if you don't have it installed already)
+* `npm install` to install local npm dependencies
+
+## Play
+
+After completing installation type in your favourite shell:
+
+* `gulp play` to start the app in a new browser window. App files are observed and will be re-transpiled on each change.
+
+> ~~If you see a bunch of **TypeScript** compilation errors while running `gulp play`, the required **typings** did not get installed.  While `npm install` should also install the typings, at times this does not happen. 
+> To fix this, try to install typings again with command `npm run typings install`. 
+> If the typing installation throws error try to upgrade the typing global installation with command `npm install typings -g` and then run the command `npm run typings install` again.~~
+
+> The old approach of using the `typings` tool to install typings has been abandoned in favour of **npm** based typing supported by new versions of **TypeScript** compiler. Take latest of the code and upgrade to latest version of TypeScript compiler. `npm install` should now install all typings. 
+
+> **Note**: The book content still show use of `typings`, you can disregard it.
diff --git a/trainer/gulpfile.js b/trainer/gulpfile.js
index c5de7e8..d0e205d 100644
--- a/trainer/gulpfile.js
+++ b/trainer/gulpfile.js
@@ -1,45 +1,56 @@
 var gulp = require('gulp');
+var connect = require('gulp-connect');
 var PATHS = {
-    src: 'src/**/*.ts'
+  src: 'src/**/*.ts',
+  html: 'src/**/*.html',
+  css: 'src/**/*.css'
 };
 
-gulp.task('clean', function (done) {
-    var del = require('del');
-    del(['dist'], done);
+gulp.task('clean', function(done) {
+  var del = require('del');
+  del(['dist'], done);
 });
 
-gulp.task('ts2js', function () {
-    var typescript = require('gulp-typescript');
-    var sourcemaps = require('gulp-sourcemaps');
-
-    var tsResult = gulp.src(PATHS.src)
-        .pipe(sourcemaps.init())
-        .pipe(typescript({
-            noImplicitAny: true,
-            module: 'system',
-            target: 'ES5',
-            moduleResolution: 'node',
-            emitDecoratorMetadata: true,
-            experimentalDecorators: true
-        }));
-
-    return tsResult.js
-          .pipe(sourcemaps.write())
-          .pipe(gulp.dest('dist'));
+gulp.task('ts2js', function() {
+  var typescript = require('gulp-typescript');
+  var sourcemaps = require('gulp-sourcemaps');
+
+  var tsResult = gulp.src(PATHS.src)
+    .pipe(sourcemaps.init())
+    .pipe(typescript({
+      noImplicitAny: true,
+      module: 'system',
+      target: 'ES5',
+      moduleResolution: 'node',
+      emitDecoratorMetadata: true,
+      experimentalDecorators: true
+    }));
+
+  return tsResult.js
+    .pipe(sourcemaps.write())
+    .pipe(gulp.dest('dist'))
+    .pipe(connect.reload());
 });
 
-gulp.task('play', ['ts2js'], function () {
-    var http = require('http');
-    var connect = require('connect');
-    var serveStatic = require('serve-static');
-    var open = require('open');
+gulp.task('play', ['ts2js'], function() {
+  var http = require('http');
+  var open = require('open');
+  var watch = require('gulp-watch');
 
-    var port = 9000, app;
 
-    gulp.watch(PATHS.src, ['ts2js']);
 
-    app = connect().use(serveStatic(__dirname));
-    http.createServer(app).listen(port, function () {
-        open('http://localhost:' + port);
-    });
+  var port = 9000,
+    app;
+
+  connect.server({
+    root: __dirname,
+    port: port,
+    livereload: true,
+    fallback: 'index.html'
+  });
+  open('http://localhost:' + port + '/index.html');
+
+  gulp.watch(PATHS.src, ['ts2js']);
+  watch(PATHS.html).pipe(connect.reload());
+  watch(PATHS.css).pipe(connect.reload());
 });
diff --git a/trainer/index.html b/trainer/index.html
index 174563f..862f163 100644
--- a/trainer/index.html
+++ b/trainer/index.html
@@ -8,24 +8,26 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
     <link href="//fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700" rel="stylesheet" type="text/css">
-    <link rel="stylesheet" href="static/css/app.css" />
+    <link rel="stylesheet" href="/static/css/app.css" />
+    <base href="/">
 </head>
 
 <body>
-    <trainer-app>Loading...</trainer-app>
+  <trainer-app>Loading...</trainer-app>
 </body>
 
-<!-- ES6-related imports -->
-<script src="/node_modules/systemjs/dist/system.js"></script>
+<!-- Libraries imports -->
+<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>
+
+ <!-- Configure SystemJS -->
+<script src="systemjs.config.js"></script>
 
-<script>
-    //configure system loader
-    System.config({defaultJSExtensions: true});
-</script>
-<script src="/node_modules/angular2/bundles/angular2.dev.js"></script>
 <script>
     //bootstrap the Angular2 application
-    System.import('dist/bootstrap').catch(console.log.bind(console));
+    System.import('app').catch(console.log.bind(console));
 </script>
-
+<script src="http://localhost:35729/livereload.js"></script>
 </html>
diff --git a/trainer/package.json b/trainer/package.json
index 4ed0005..4045fa6 100644
--- a/trainer/package.json
+++ b/trainer/package.json
@@ -4,24 +4,37 @@
   "description": "Angular 2 implementation of Personal Trainer in TypeScript",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/chandermani/angularjsbyexample.git"
+    "url": "git+https://github.com/chandermani/angular2byexample.git"
   },
   "bugs": {
-    "url": "https://github.com/chandermani/angularjsbyexample/issues"
+    "url": "https://github.com/chandermani/angular2byexample/issues"
   },
-  "homepage": "https://github.com/chandermani/angularjsbyexample#readme",
+  "homepage": "https://github.com/chandermani/angular2byexample.git#readme",
   "devDependencies": {
-    "connect": "^3.4.0",
+    "@types/core-js": "0.9.36",
     "del": "^1.2.0",
     "gulp": "^3.9.0",
-    "gulp-typescript": "^2.8.0",
-    "gulp-sourcemaps": "^1.6.0"
+    "gulp-connect": "^3.1.0",
+    "gulp-sourcemaps": "^1.6.0",
+    "gulp-typescript": "^3.1.5",
+    "gulp-watch": "^4.3.5",
+    "gulp-webserver": "^0.9.1",
     "open": "0.0.5",
-    "serve-static": "^1.10.0",
+    "typescript": "^2.2.1"
   },
   "dependencies": {
-    "angular2": "2.0.0-alpha.44",
-    "es6-shim": "^0.33.6",
-    "systemjs": "0.18.4"
-  }
-}
+    "@angular/common": "2.0.0",
+    "@angular/compiler": "2.0.0",
+    "@angular/core": "2.0.0",
+    "@angular/forms": "2.0.0",
+    "@angular/http": "2.0.0",
+    "@angular/platform-browser": "2.0.0",
+    "@angular/platform-browser-dynamic": "2.0.0",
+    "core-js": "^2.4.1",
+    "reflect-metadata": "0.1.3",
+    "rxjs": "5.0.0-beta.12",
+    "systemjs": "0.19.27",
+    "zone.js": "^0.6.23"
+  },
+  "scripts": {}
+}
\ No newline at end of file
diff --git a/trainer/src/bootstrap.ts b/trainer/src/bootstrap.ts
index d56ec6d..0ec15a1 100644
--- a/trainer/src/bootstrap.ts
+++ b/trainer/src/bootstrap.ts
@@ -1,3 +1,3 @@
-import {bootstrap} from 'angular2/angular2';
-import {TrainerApp} from './components/app/app';
-bootstrap(TrainerApp);
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './components/app/app.module';
+platformBrowserDynamic().bootstrapModule(AppModule);
\ No newline at end of file
diff --git a/trainer/src/components/app/app.component.ts b/trainer/src/components/app/app.component.ts
new file mode 100644
index 0000000..509d2e1
--- /dev/null
+++ b/trainer/src/components/app/app.component.ts
@@ -0,0 +1,16 @@
+import {Component} from '@angular/core';
+@Component({
+    selector: 'trainer-app',
+    template: `<div class="navbar navbar-default navbar-fixed-top top-navbar">
+                <div class="container app-container">
+                  <div class="navbar-header">
+                    <h1>7 Minute Workout</h1>
+                  </div>
+                </div>
+              </div>
+              <div class="container body-content app-container">
+                <workout-runner></workout-runner>
+              </div>`
+})
+export class TrainerAppComponent {
+}
diff --git a/trainer/src/components/app/app.module.ts b/trainer/src/components/app/app.module.ts
new file mode 100644
index 0000000..ed20aba
--- /dev/null
+++ b/trainer/src/components/app/app.module.ts
@@ -0,0 +1,12 @@
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { TrainerAppComponent }  from './app.component';
+import {WorkoutRunnerComponent} from '../workout-runner/workout-runner.component';
+
+@NgModule({
+  imports: [BrowserModule],
+  declarations: [TrainerAppComponent, WorkoutRunnerComponent],
+  bootstrap: [TrainerAppComponent]
+})
+export class AppModule { }
\ No newline at end of file
diff --git a/trainer/src/components/app/app.ts b/trainer/src/components/app/app.ts
deleted file mode 100644
index 868abc0..0000000
--- a/trainer/src/components/app/app.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {Component} from 'angular2/angular2';
-import {WorkoutRunner} from '../workout-runner/workout-runner';
-@Component({
-    selector: 'trainer-app',
-    directives:[WorkoutRunner],
-    template: `<workout-runner></workout-runner>
-    `
-})
-export class TrainerApp {
-    name: string = 'World';
-}
diff --git a/trainer/src/components/workout-runner/model.ts b/trainer/src/components/workout-runner/model.ts
index 64d9614..d48a705 100644
--- a/trainer/src/components/workout-runner/model.ts
+++ b/trainer/src/components/workout-runner/model.ts
@@ -7,7 +7,7 @@ export class WorkoutPlan {
     public description?: string) {
   }
 
-  totalWorkoutDuration() {
+  totalWorkoutDuration(): number {
     if (!this.exercises) return 0;
 
     let total = this.exercises.map((e) => e.duration).reduce((previous, current) => previous + current);
@@ -30,11 +30,5 @@ export class Exercise {
     public image: string,
     public nameSound?: string,
     public procedure?: string,
-    public related?: ExerciseRelated) {
-  }
-}
-
-export class ExerciseRelated {
-  constructor(public videos: string[]) {
-  }
+    public videos?: Array<string>) { }
 }
diff --git a/trainer/src/components/workout-runner/workout-runner.ts b/trainer/src/components/workout-runner/workout-runner.component.ts
similarity index 80%
rename from trainer/src/components/workout-runner/workout-runner.ts
rename to trainer/src/components/workout-runner/workout-runner.component.ts
index c72e1af..285c1c3 100644
--- a/trainer/src/components/workout-runner/workout-runner.ts
+++ b/trainer/src/components/workout-runner/workout-runner.component.ts
@@ -1,33 +1,30 @@
-import {Component} from 'angular2/angular2';
-import {WorkoutPlan, ExercisePlan, Exercise, ExerciseRelated} from './model'
+import {Component,OnInit} from '@angular/core';
+import {WorkoutPlan, ExercisePlan, Exercise} from './model'
 
 @Component({
   selector: 'workout-runner',
-  template: `
-    <pre>Current Exercise: {{currentExercise | json}}</pre>
-    <pre>Time Left: {{currentExercise.duration-exerciseRunningDuration}}</pre>
-  `
+  templateUrl: '/src/components/workout-runner/workout-runner.html',
 })
-export class WorkoutRunner {
+export class WorkoutRunnerComponent implements OnInit {
   workoutPlan: WorkoutPlan;
   workoutTimeRemaining: number;
   restExercise: ExercisePlan;
   currentExerciseIndex: number;
   currentExercise: ExercisePlan;
-  exerciseRunningDuration: number
+  exerciseRunningDuration: number;
 
   constructor() {
     this.workoutPlan = this.buildWorkout();
-    this.restExercise = new ExercisePlan(new Exercise("rest", "Relax!", "Relax a bit", "img/rest.png"), this.workoutPlan.restBetweenExercise);
+    this.restExercise = new ExercisePlan(new Exercise("rest", "Relax!", "Relax a bit", "rest.png"), this.workoutPlan.restBetweenExercise);
   }
-  onInit() {
+  ngOnInit() {
     this.start();
   }
 
   start() {
     this.workoutTimeRemaining = this.workoutPlan.totalWorkoutDuration();
     this.currentExerciseIndex = 0;
-    this.startExercise(this.workoutPlan.exercises[0]);
+    this.startExercise(this.workoutPlan.exercises[this.currentExerciseIndex]);
   }
 
   startExercise(exercisePlan: ExercisePlan) {
@@ -38,6 +35,9 @@ export class WorkoutRunner {
         clearInterval(intervalId);
         let next: ExercisePlan = this.getNextExercise();
         if (next) {
+          if (next !== this.restExercise) {
+            this.currentExerciseIndex++;
+          }
           this.startExercise(next);
         }
         else {
@@ -47,14 +47,13 @@ export class WorkoutRunner {
       else {
         this.exerciseRunningDuration++;
       }
-    }, 1000, this.currentExercise.duration);
+    }, 1000);
   }
 
   getNextExercise(): ExercisePlan {
     let nextExercise: ExercisePlan = null;
     if (this.currentExercise === this.restExercise) {
-      this.currentExerciseIndex++;
-      nextExercise = this.workoutPlan.exercises[this.currentExerciseIndex];
+      nextExercise = this.workoutPlan.exercises[this.currentExerciseIndex + 1];
     }
     else if (this.currentExerciseIndex < this.workoutPlan.exercises.length - 1) {
       nextExercise = this.restExercise;
@@ -72,13 +71,13 @@ export class WorkoutRunner {
           "Jumping Jacks",
           "A jumping jack or star jump, also called side-straddle hop is a physical jumping exercise.",
           "JumpingJacks.png",
-          "",
+          "jumpingjacks.wav",
           `Assume an erect position, with feet together and arms at your side.
                             Slightly bend your knees, and propel yourself a few inches into the air.
                             While in air, bring your legs out to the side about shoulder width or slightly wider.
                             As you are moving your legs outward, you should raise your arms up over your head; arms should be slightly bent throughout the entire in-air movement.
                             Your feet should land shoulder width or wider as your hands meet above your head with arms slightly bent`,
-          new ExerciseRelated(["//www.youtube.com/embed/dmYwZH_BNd0", "//www.youtube.com/embed/BABOdJ-2Z6o", "//www.youtube.com/embed/c4DAnQ6DtF8"])),
+          ["dmYwZH_BNd0", "BABOdJ-2Z6o", "c4DAnQ6DtF8"]),
         30));
 
     workout.exercises.push(
@@ -88,10 +87,10 @@ export class WorkoutRunner {
           "Wall Sit",
           "A wall sit, also known as a Roman Chair, is an exercise done to strengthen the quadriceps muscles.",
           "wallsit.png",
-          "",
+          "wallsit.wav",
           `Place your back against a wall with your feet shoulder width apart and a little ways out from the wall.
           Then, keeping your back against the wall, lower your hips until your knees form right angles.`,
-          new ExerciseRelated(["//www.youtube.com/embed/y-wV4Venusw", "//www.youtube.com/embed/MMV3v4ap4ro"])),
+          ["y-wV4Venusw", "MMV3v4ap4ro"]),
         30));
 
     workout.exercises.push(
@@ -101,11 +100,11 @@ export class WorkoutRunner {
           "Push up",
           "A push-up is a common exercise performed in a prone position by raising and lowering the body using the arms",
           "pushup.png",
-          "",
+          "pushups.wav",
           `Lie prone on the ground with hands placed as wide or slightly wider than shoulder width.
           Keeping the body straight, lower body to the ground by bending arms at the elbows.
           Raise body up off the ground by extending the arms.`,
-          new ExerciseRelated(["//www.youtube.com/embed/Eh00_rniF8E", "//www.youtube.com/embed/ZWdBqFLNljc", "//www.youtube.com/embed/UwRLWMcOdwI", "//www.youtube.com/embed/ynPwl6qyUNM", "//www.youtube.com/embed/OicNTT2xzMI"])),
+          ["Eh00_rniF8E", "ZWdBqFLNljc", "UwRLWMcOdwI", "ynPwl6qyUNM", "OicNTT2xzMI"]),
         30));
 
     workout.exercises.push(
@@ -115,14 +114,14 @@ export class WorkoutRunner {
           "Abdominal Crunches",
           "The basic crunch is a abdominal exercise in a strength-training program.",
           "crunches.png",
-          "",
+          "crunches.wav",
           `Lie on your back with your knees bent and feet flat on the floor, hip-width apart.
           Place your hands behind your head so your thumbs are behind your ears.
           Hold your elbows out to the sides but rounded slightly in.
           Gently pull your abdominals inward.
           Curl up and forward so that your head, neck, and shoulder blades lift off the floor.
           Hold for a moment at the top of the movement and then lower slowly back down.`,
-          new ExerciseRelated(["//www.youtube.com/embed/Xyd_fa5zoEU", "//www.youtube.com/embed/MKmrqcoCZ-M"])),
+          ["Xyd_fa5zoEU", "MKmrqcoCZ-M"]),
         30));
 
     workout.exercises.push(
@@ -132,12 +131,12 @@ export class WorkoutRunner {
           "Step Up Onto Chair",
           "Step exercises are ideal for building muscle in your lower body.",
           "stepupontochair.png",
-          "",
+          "stepup.wav",
           `Position your chair in front of you.
           Stand with your feet about hip width apart, arms at your sides.
           Step up onto the seat with one foot, pressing down while bringing your other foot up next to it.
           Step back with the leading foot and bring the trailing foot down to finish one step-up.`,
-          new ExerciseRelated(["//www.youtube.com/embed/aajhW7DD1EA"])),
+          ["aajhW7DD1EA"]),
         30));
 
     workout.exercises.push(
@@ -147,13 +146,13 @@ export class WorkoutRunner {
           "Squat",
           "The squat is a compound, full body exercise that trains primarily the muscles of the thighs, hips, buttocks and quads.",
           "squat.png",
-          "",
+          "squats.wav",
           `Stand with your head facing forward and your chest held up and out.
               Place your feet shoulder-width apart or little wider. Extend your hands straight out in front of you.
               Sit back and down like you're sitting into a chair. Keep your head facing straight as your upper body bends forward a bit. Rather than allowing your back to round, let your lower back arch slightly as you go down.
               Lower down so your thighs are parallel to the floor, with your knees over your ankles. Press your weight back into your heels.
               Keep your body tight, and push through your heels to bring yourself back to the starting position.`,
-          new ExerciseRelated(["//www.youtube.com/embed/QKKZ9AGYTi4", "//www.youtube.com/embed/UXJrBgI2RxA"])),
+          ["QKKZ9AGYTi4", "UXJrBgI2RxA"]),
         30));
 
     workout.exercises.push(
@@ -163,12 +162,12 @@ export class WorkoutRunner {
           "Tricep Dips On Chair",
           "A body weight exercise that targets triceps.",
           "tricepdips.png",
-          "",
+          "tricepdips.wav",
           `Sit up on a chair. Your legs should be slightly extended, with your feet flat on the floor.
           Place your hands edges of the chair. Your palms should be down, fingertips pointing towards the floor.
           Without moving your legs, bring your glutes forward off the chair.
           Steadily lower yourself. When your elbows form 90 degrees angles, push yourself back up to starting position.`,
-          new ExerciseRelated(["//www.youtube.com/embed/tKjcgfu44sI", "//www.youtube.com/embed/jox1rb5krQI"])),
+          ["tKjcgfu44sI", "jox1rb5krQI"]),
         30));
 
     workout.exercises.push(
@@ -178,12 +177,12 @@ export class WorkoutRunner {
           "Plank",
           "The plank (also called a front hold, hover, or abdominal bridge) is an isometric core strength exercise that involves maintaining a difficult position for extended periods of time.",
           "Plank.png",
-          "",
+          "plank.wav",
           `Get into pushup position on the floor.
           Bend your elbows 90 degrees and rest your weight on your forearms.
           Your elbows should be directly beneath your shoulders, and your body should form a straight line from head to feet.
           Hold this position.`,
-          new ExerciseRelated(["//www.youtube.com/embed/pSHjTRCQxIw", "//www.youtube.com/embed/TvxNkmjdhMM"])),
+          ["pSHjTRCQxIw", "TvxNkmjdhMM"]),
         30));
 
     workout.exercises.push(
@@ -193,10 +192,10 @@ export class WorkoutRunner {
           "High Knees",
           "A form exercise that develops strength and endurance of the hip flexors and quads and stretches the hip extensors.",
           "highknees.png",
-          "",
+          "highknees.wav",
           `Start standing with feet hip-width apart.
           Do inplace jog with your knees lifting as much as possible towards your chest.`,
-          new ExerciseRelated(["//www.youtube.com/embed/OAJ_J3EZkdY", "//www.youtube.com/embed/8opcQdC-V-U"])),
+          ["OAJ_J3EZkdY", "8opcQdC-V-U"]),
         30));
 
     workout.exercises.push(
@@ -206,10 +205,10 @@ export class WorkoutRunner {
           "Lunges",
           "Lunges are a good exercise for strengthening, sculpting and building several muscles/muscle groups, including the quadriceps (or thighs), the gluteus maximus (or buttocks) as well as the hamstrings.",
           "lunges.png",
-          "",
+          "lunge.wav",
           `Start standing with feet hip-width apart.
               Do inplace jog with your knees lifting as much as possible towards your chest.`,
-          new ExerciseRelated(["//www.youtube.com/embed/Z2n58m2i4jg"])),
+          ["Z2n58m2i4jg"]),
         30));
 
     workout.exercises.push(
@@ -219,10 +218,10 @@ export class WorkoutRunner {
           "Pushup And Rotate",
           "A variation of pushup that requires you to rotate.",
           "pushupnrotate.png",
-          "",
+          "pushupandrotate.wav",
           `Assume the classic pushup position, but as you come up, rotate your body so your right arm lifts up and extends overhead.
           Return to the starting position, lower yourself, then push up and rotate till your left hand points toward the ceiling.`,
-          new ExerciseRelated(["//www.youtube.com/embed/qHQ_E-f5278"])),
+          ["qHQ_E-f5278"]),
         30));
 
     workout.exercises.push(
@@ -232,12 +231,12 @@ export class WorkoutRunner {
           "Side Plank",
           "A variation to Plank done using one hand only.",
           "sideplank.png",
-          "",
+          "sideplank.wav",
           `Lie on your side, in a straight line from head to feet, resting on your forearm.
           Your elbow should be directly under your shoulder.
           With your abdominals gently contracted, lift your hips off the floor, maintaining the line.
           Keep your hips square and your neck in line with your spine. Hold the position.`,
-          new ExerciseRelated(["//www.youtube.com/embed/wqzrb67Dwf8", "//www.youtube.com/embed/_rdfjFSFKMY"])),
+          ["wqzrb67Dwf8", "_rdfjFSFKMY"]),
         30));
 
     return workout;
diff --git a/trainer/src/components/workout-runner/workout-runner.html b/trainer/src/components/workout-runner/workout-runner.html
new file mode 100644
index 0000000..208ba0a
--- /dev/null
+++ b/trainer/src/components/workout-runner/workout-runner.html
@@ -0,0 +1,17 @@
+<div class="row">
+  <div id="exercise-pane" class="col-sm-8 col-sm-offset-2">
+    <div class="row workout-content">
+      <div class="workout-display-div">
+        <h1>{{currentExercise.exercise.title}}</h1>
+        <img class="img-responsive" [src]="'/static/images/' + currentExercise.exercise.image" />
+        <div class="progress time-progress">
+          <div class="progress-bar" role="progressbar"
+              [attr.aria-valuenow]="exerciseRunningDuration" aria-valuemin="0" [attr.aria-valuemax]="currentExercise.duration"
+              [ngStyle]="{'width':(exerciseRunningDuration/currentExercise.duration) * 100 + '%'}">
+          </div>
+        </div>
+        <h1>Time Remaining: {{currentExercise.duration-exerciseRunningDuration}}</h1>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/trainer/src/tsconfig.json b/trainer/src/tsconfig.json
index f98e7e4..b3f6106 100644
--- a/trainer/src/tsconfig.json
+++ b/trainer/src/tsconfig.json
@@ -20,9 +20,6 @@
         "!node_modules/**"
     ],
     "files": [
-        "bootstrap.ts",
-        "components/app/app.ts",
-        "components/workout-runner/model.ts",
-        "components/workout-runner/workout-runner.ts"
+        "bootstrap.ts"
     ]
 }
diff --git a/trainer/static/css/app.css b/trainer/static/css/app.css
index 3324018..d2a0954 100644
--- a/trainer/static/css/app.css
+++ b/trainer/static/css/app.css
@@ -81,6 +81,10 @@ input[type="checkbox"].input-validation-error {
 /*styles for left nav bar - end*/
 
 /*styles for container - start*/
+.container.app-container{
+    width:100%;
+    max-width:100%;
+}
 .workout-display-div {
     text-align: center;
     padding: 40px;
@@ -132,13 +136,13 @@ input[type="checkbox"].input-validation-error {
     width:100%;
     height:100%;
     opacity:0;      /*Comment this line to try our mouse event based pause and resume. */
-    z-index:10; 
- 
+    z-index:10;
+
 }
 
 /*Comment this style to try our mouse event based pause and resume. */
 #pause-overlay:hover {
-    opacity:.8;     
+    opacity:.8;
 }
 #pause-overlay .pause{
     font-size:120pt;
@@ -153,16 +157,16 @@ input[type="checkbox"].input-validation-error {
 }
 
 #play-video-overlay {
-    position:absolute;  
+    position:absolute;
     top:0px;
     width:100%;
     height:100%;
     opacity:0;
-    z-index:10; 
- 
+    z-index:10;
+
 }
 #play-video-overlay:hover {
-    opacity:.6;     
+    opacity:.6;
 }
 #play-video-overlay .video {
     font-size:80pt;
diff --git a/trainer/systemjs.config.js b/trainer/systemjs.config.js
new file mode 100644
index 0000000..96d2859
--- /dev/null
+++ b/trainer/systemjs.config.js
@@ -0,0 +1,53 @@
+(function (global) {
+
+  // map tells the System loader where to look for things
+  var map = {
+    'app': 'dist', // 'dist',
+    'rxjs': 'node_modules/rxjs',
+    '@angular': 'node_modules/@angular'
+  };
+
+  // packages tells the System loader how to load when no filename and/or no extension
+  var packages = {
+    'app': { main: 'bootstrap.js', defaultExtension: 'js' },
+    'rxjs': { defaultExtension: 'js' }
+  };
+
+  var ngPackageNames = [
+    'common',
+    'compiler',
+    'core',
+    'http',
+    'platform-browser',
+    'platform-browser-dynamic',
+    'testing'
+  ];
+
+  // Individual files (~300 requests):
+  function packIndex(pkgName) {
+    packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
+  }
+
+  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
+  // Bundled (~40 requests):
+  function packUmd(pkgName) {
+    packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
+  }
+
+  // Most environments should use UMD; some (Karma) need the individual index files
+  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
+
+  // Add package entries for angular packages
+  ngPackageNames.forEach(setPackageConfig);
+
+  var config = {
+    map: map,
+    packages: packages
+  }
+
+  // filterSystemConfig - index.html's chance to modify config before we register it.
+  if (global.filterSystemConfig) { global.filterSystemConfig(config); }
+
+  System.config(config);
+
+})(this);
\ No newline at end of file