diff --git a/src/app/Hero.ts b/src/app/Hero.ts
index cad50a7..b30c27c 100644
--- a/src/app/Hero.ts
+++ b/src/app/Hero.ts
@@ -1,4 +1,8 @@
-export class Hero{
-    id:number;
-    name:string;
+export class Hero {
+  constructor(
+    public id: number,
+    public name: string,
+    public power: string,
+    public alterEgo?: string
+  ) {  }
 }
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 43e81bb..ae210df 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -3,26 +3,6 @@ import { Hero } from './Hero'
 
 @Component({
   selector: 'my-app',
-  template: `<h1>{{title}}</h1>
-            <h2> My favorite hero is : {{myHero.name}} </h2>
-            <p>Heroes :</p>
-            <ul>
-              <li *ngFor="let hero of heroes">
-                  {{hero.name}}
-              </li>
-            </ul>
-            <p *ngIf="heroes.length > 3">There are many heroes!</p>
-            `
+  template: '<hero-form></hero-form>'
 })
-export class AppComponent  { 
-  title = 'Tour of Heroes';
-
-  heroes : Hero[] = [
-    { id:1, name:'Windstorm' },
-    { id:2, name:'Bombasto' },
-    { id:3, name:'Magneta' },
-    { id:4, name:'Tornado' }, 
-  ]
-
-  myHero: Hero = this.heroes[0];
-}
+export class AppComponent  { }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 6931d92..8a599d4 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,31 +1,19 @@
 import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule }   from '@angular/forms';
 
-//import { AppComponent }  from './app.component';
-import { ClickMeComponent } from './click-me.component';
-import { KeyUpComponent_V1, KeyUpComponent_V2, KeyUpComponent_V3, KeyUpComponent_V4 } from './keyup.component';
-import { LoopBackComponent } from './loop-back.component'
-import { LittleTourComponent } from "./little-tour.component"
+import { AppComponent }  from './app.component';
+import { HeroFormComponent } from './hero-form.component' 
 
 @NgModule({
-  imports:      [ BrowserModule ],
+  imports:      [ 
+    BrowserModule,
+    FormsModule
+     ],
   declarations: [ 
-      //AppComponent,
-      ClickMeComponent,
-      KeyUpComponent_V1,
-      KeyUpComponent_V2,
-      KeyUpComponent_V3,
-      KeyUpComponent_V4,
-      LoopBackComponent,
-      LittleTourComponent
+      AppComponent,
+      HeroFormComponent
      ],
-  bootstrap:    [ //AppComponent, 
-  ClickMeComponent,
-  KeyUpComponent_V1,
-  KeyUpComponent_V2,
-  KeyUpComponent_V3,
-  KeyUpComponent_V4,
-  LoopBackComponent, 
-  LittleTourComponent]
+  bootstrap:    [ AppComponent, ]
 })
 export class AppModule { }
diff --git a/src/app/click-me.component.ts b/src/app/click-me.component.ts
deleted file mode 100644
index 913f021..0000000
--- a/src/app/click-me.component.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector:"click-me",
-    template:`
-        <button (click)="onClickMe()">Click me</button>
-        {{clickMessage}}
-    `
-})
-export class ClickMeComponent{
-    clickMessage = '';
-
-    onClickMe(){
-
-        this.clickMessage = "You are my hero";
-    }
-}
\ No newline at end of file
diff --git a/src/app/hero-form.component.html b/src/app/hero-form.component.html
new file mode 100644
index 0000000..1c7fd43
--- /dev/null
+++ b/src/app/hero-form.component.html
@@ -0,0 +1,47 @@
+<div class="container" [hidden]="submitted">
+    <h1>Hero Form</h1>
+    <form #heroForm="ngForm" (ngSubmit)="onSubmit()">
+      <!--{{diagnostic}}-->
+      <div class="form-group">
+        <label for="name">Name</label>
+        <input type="text" class="form-control" id="name" required
+        [(ngModel)]="model.name" name="name" #name="ngModel">
+        <div [hidden]="name.valid || name.pristine"
+             class="alert alert-danger">
+          Name is required
+        </div>
+      </div>
+      <div class="form-group">
+        <label for="alterEgo">Alter Ego</label>
+        <input type="text" name ="alterEgo" class="form-control" id="alterEgo" [(ngModel)]="model.alterEgo">
+      </div>
+      <div class="form-group">
+        <label for="power">Hero Power</label>
+        <select class="form-control" id="power" required  [(ngModel)]="model.power" name="power">
+          <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
+        </select>
+      </div>
+
+      <button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">Submit</button>
+      <button type="button" class="btn btn-default" (click)="newHero();heroForm.reset()">New Hero</button>
+
+    </form>
+</div>
+
+<div [hidden]="!submitted">
+  <h2>You submitted the following:</h2>
+  <div class="row">
+    <div class="col-xs-3">Name</div>
+    <div class="col-xs-9  pull-left">{{ model.name }}</div>
+  </div>
+  <div class="row">
+    <div class="col-xs-3">Alter Ego</div>
+    <div class="col-xs-9 pull-left">{{ model.alterEgo }}</div>
+  </div>
+  <div class="row">
+    <div class="col-xs-3">Power</div>
+    <div class="col-xs-9 pull-left">{{ model.power }}</div>
+  </div>
+  <br>
+  <button class="btn btn-primary" (click)="submitted=false">Edit</button>
+</div>
diff --git a/src/app/hero-form.component.ts b/src/app/hero-form.component.ts
new file mode 100644
index 0000000..80557d1
--- /dev/null
+++ b/src/app/hero-form.component.ts
@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+
+import { Hero }    from './hero';
+
+@Component({
+  moduleId: module.id,
+  selector: 'hero-form',
+  templateUrl: './hero-form.component.html'
+})
+export class HeroFormComponent {
+
+  powers = ['Really Smart', 'Super Flexible',
+            'Super Hot', 'Weather Changer'];
+
+  model = new Hero(18, 'Dr IQ', this.powers[2], 'Chuck Overstreet');
+
+  submitted = false;
+
+  onSubmit() { this.submitted = true; }
+
+  // TODO: Remove this when we're done
+  get diagnostic() { return JSON.stringify(this.model); }
+
+  newHero() {
+  this.model = new Hero(42, '', '');
+    }
+
+}
diff --git a/src/app/keyup.component.ts b/src/app/keyup.component.ts
deleted file mode 100644
index 39928b3..0000000
--- a/src/app/keyup.component.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector:"keyup",
-    template:`
-        <input (keyup)="onKey($event)">
-        <p>{{values}}</p>
-    `
-})
-export class KeyUpComponent_V1{
-    values = '';
-
-    onKey(event: any){
-        this.values += event.target.value + ' |';
-    }
-}
-
-@Component({
-    selector:"key-up2",
-    template:`
-        <input #box (keyup)="onKey(box.value)">
-        <p>{{values}}</p>
-    `
-})
-export class KeyUpComponent_V2{
-    values = '';
-
-    onKey(value: string){
-        this.values += value + ' |';
-    }
-}
-
-@Component({
-    selector: "key-up3",
-    template:`
-        <input #box (keyup.enter)="onEnter(box.value)">
-        <p>{{values}}</p>
-    `
-})
-export class KeyUpComponent_V3{
-    values = '';
-
-    onEnter(value: string){
-        this.values = value;
-    } 
-}
-
-@Component({
-    selector:'key-up4',
-    template:`
-    <input #box 
-    (keyup.enter)="update(box.value)"
-    (blur)="update(box.value)">
-
-    <p>{{value}}</p>
-    `
-})
-export class KeyUpComponent_V4{
-    value='';
-    update(value:string){
-        this.value = value;
-    }
-}
\ No newline at end of file
diff --git a/src/app/little-tour.component.ts b/src/app/little-tour.component.ts
deleted file mode 100644
index 055af05..0000000
--- a/src/app/little-tour.component.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'little-tour',
-  template: `
-    <input #newHero
-      (keyup.enter)="addHero(newHero.value)"
-      (blur)="addHero(newHero.value); newHero.value='' ">
-
-    <button (click)="addHero(newHero.value)">Add</button>
-
-    <ul><li *ngFor="let hero of heroes">{{hero}}</li></ul>
-  `
-})
-export class LittleTourComponent {
-  heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
-  addHero(newHero: string) {
-    if (newHero) {
-      this.heroes.push(newHero);
-    }
-  }
-}
diff --git a/src/app/loop-back.component.ts b/src/app/loop-back.component.ts
deleted file mode 100644
index 66f7947..0000000
--- a/src/app/loop-back.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector:'loop-back',
-    template :`
-    <input #box (keyup)="0">
-    <p>{{box.value}}</p>
-    `
-})
-export class LoopBackComponent{}
\ No newline at end of file
diff --git a/src/forms.css b/src/forms.css
new file mode 100644
index 0000000..8ab55b1
--- /dev/null
+++ b/src/forms.css
@@ -0,0 +1,6 @@
+.ng-valid[required], .ng-valid.required  {
+  border-left: 5px solid #42A948; /* green */
+}
+.ng-invalid:not(form)  {
+  border-left: 5px solid #a94442; /* red */
+}
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 64061ea..3617bbd 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,6 +6,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <base href="/">
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="forms.css">
+    <link rel="stylesheet"
+      href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
 
     <!-- Polyfill(s) for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
@@ -20,27 +23,6 @@
   </head>
 
   <body>
-    <!--<my-app>Loading AppComponent content here ...</my-app>-->
-    <div>
-      Click Me : <click-me></click-me>
-    </div>
-    <div>
-     KeyUp V1 : <keyup></keyup>
-    </div>
-    <div>
-     loop-back : <loop-back></loop-back>
-    </div>
-    <div>
-     key-up2 : <key-up2></key-up2> 
-    </div>   
-    <div>
-      key-up3 :<key-up3></key-up3>
-    </div>
-    <div>
-      key-up4: <key-up4></key-up4>
-    </div>
-    <div>
-      <little-tour></little-tour>
-    </div>
+    <my-app>Loading AppComponent content here ...</my-app>
   </body>
 </html>