diff --git a/app/app.component.ts b/app/app.component.ts
index 7fb173cd0..105390586 100644
--- a/app/app.component.ts
+++ b/app/app.component.ts
@@ -1,7 +1,92 @@
 import { Component } from '@angular/core';
+import { Hero } from './hero';
+import { HeroDetailComponent } from './hero-detail.component';
+
+
+const HEROES: Hero[] = [
+  { id: 11, name: 'Batman' },
+  { id: 12, name: 'Hulk Smash' },
+  { id: 13, name: 'Alex The Great' },
+  { id: 14, name: 'Daniel The Great' },
+  { id: 15, name: 'Mommy and Layla Together' },
+  { id: 16, name: 'Papa the mad scientist' },
+];
+
 
 @Component({
-  selector: 'my-app',
-  template: `<h1>Hello {{name}}</h1>`,
+ 	selector: 'my-app',
+
+  template: `
+		<h1>{{title}}</h1>
+    <h2>My Heroes</h2>
+    <ul class="heroes" >
+      <li *ngFor="let hero of heroes" (click)="onSelect(hero)">
+        <span class="badge">{{hero.id}}</span> {{hero.name}}
+      </li>
+    </ul>
+
+    <my-hero-detail [hero]="selectedHero"></my-hero-detail>
+		`,
+
+  styles: [`
+		  .selected {
+			background-color: #CFD8DC !important;
+			color: white;
+		  }
+		  .heroes {
+			margin: 0 0 2em 0;
+			list-style-type: none;
+			padding: 0;
+			width: 15em;
+		  }
+		  .heroes li {
+			cursor: pointer;
+			position: relative;
+			left: 0;
+			background-color: #EEE;
+			margin: .5em;
+			padding: .3em 0;
+			height: 1.6em;
+			border-radius: 4px;
+		  }
+		  .heroes li.selected:hover {
+			background-color: #BBD8DC !important;
+			color: white;
+		  }
+		  .heroes li:hover {
+			color: #607D8B;
+			background-color: #DDD;
+			left: .1em;
+		  }
+		  .heroes .text {
+			position: relative;
+			top: -3px;
+		  }
+		  .heroes .badge {
+			display: inline-block;
+			font-size: small;
+			color: white;
+			padding: 0.8em 0.7em 0 0.7em;
+			background-color: #607D8B;
+			line-height: 1em;
+			position: relative;
+			left: -1px;
+			top: -4px;
+			height: 1.8em;
+			margin-right: .8em;
+			border-radius: 4px 0 0 4px;
+		  }
+		`]
 })
-export class AppComponent  { name = 'Angular'; }
+
+
+export class AppComponent {
+  title = 'Tour of Heroes';
+  
+  heroes = HEROES;
+  selectedHero: Hero;
+
+  onSelect(hero: Hero): void {
+    this.selectedHero = hero;
+  }
+}
diff --git a/app/app.module.ts b/app/app.module.ts
index 357b003a5..ae73f66b9 100644
--- a/app/app.module.ts
+++ b/app/app.module.ts
@@ -1,11 +1,19 @@
-import { NgModule }      from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } 		from '@angular/core';
+import { BrowserModule } 	from '@angular/platform-browser';
+import { FormsModule }		from '@angular/forms';
 
 import { AppComponent }  from './app.component';
+import { HeroDetailComponent } from './hero-detail.component';
 
 @NgModule({
-  imports:      [ BrowserModule ],
-  declarations: [ AppComponent ],
-  bootstrap:    [ AppComponent ]
+  imports: [
+    BrowserModule,
+    FormsModule
+  ],
+  declarations: [
+    AppComponent,
+    HeroDetailComponent
+  ],
+  bootstrap: [ AppComponent ]
 })
 export class AppModule { }
diff --git a/app/hero-detail.component.ts b/app/hero-detail.component.ts
new file mode 100644
index 000000000..cd44f6ff9
--- /dev/null
+++ b/app/hero-detail.component.ts
@@ -0,0 +1,21 @@
+import { Component, Input } from '@angular/core';
+import { Hero } from './hero';
+
+@Component({
+  selector: 'my-hero-detail',
+  template: `
+    <div *ngIf="hero">
+      <h2>{{hero.name}} details!</h2>
+      <div><label>id: </label>{{hero.id}}</div>
+      <div>
+        <label>name: </label>
+        <input [(ngModel)]="hero.name" placeholder="name"/>
+      </div>
+    </div>
+  `
+})
+
+export class HeroDetailComponent {
+  @Input()
+  hero: Hero;
+}
diff --git a/app/hero.ts b/app/hero.ts
new file mode 100644
index 000000000..e3eac516d
--- /dev/null
+++ b/app/hero.ts
@@ -0,0 +1,4 @@
+export class Hero {
+  id: number;
+  name: string;
+}
diff --git a/package.json b/package.json
index b806db2c9..1cc39c1b8 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
     "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
     "test-once": "tsc && karma start karma.conf.js --single-run",
     "tsc": "tsc",
-    "tsc:w": "tsc -w"
+    "tsc:w": "tsc -w",
+    "stop": "killall node"
   },
   "keywords": [],
   "author": "",