diff --git a/angular.json b/angular.json
index ee7803d067e3bceac67618009007b64d2f175c5a..c93c95e31a91eefb47eb8da1ba28b59343bf0723 100644
--- a/angular.json
+++ b/angular.json
@@ -23,7 +23,8 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.css",
+              "./node_modules/bootstrap/dist/css/bootstrap.min.css"
             ],
             "scripts": []
           },
@@ -124,4 +125,4 @@
     }
   },
   "defaultProject": "angular-tour-of-heroes"
-}
\ No newline at end of file
+}
diff --git a/package-lock.json b/package-lock.json
index f860449b87a35c5dbcae711c6d69042ab646af5b..65d642db5ba728dbe0df8e417c5b3ae34ffcde50 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1409,6 +1409,11 @@
         "hoek": "2.16.3"
       }
     },
+    "bootstrap": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.1.2.tgz",
+      "integrity": "sha512-3bP609EdMc/8EwgGp8KgpN8HwnR4V4lZ9CTi5pImMrXNxpkw7dK1B05aMwQWpG1ZWmTLlBSN/uzkuz5GsmQNFA=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
diff --git a/package.json b/package.json
index d5d8c3638c40ee824b45cd9fddc99359cf6b328d..1a004943458beff181e96d390bbc4912faedd60c 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@angular/platform-browser": "^6.0.3",
     "@angular/platform-browser-dynamic": "^6.0.3",
     "@angular/router": "^6.0.3",
+    "bootstrap": "^4.1.2",
     "core-js": "^2.5.4",
     "rxjs": "^6.0.0",
     "zone.js": "^0.8.26"
diff --git a/src/app/app.component.html b/src/app/app.component.html
index fa2706a406ba65e05f8e23003ce6e9df291fa146..3269585b4c72c3b0d5a225a23dcb783a006d9a59 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,20 +1,4 @@
 <!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
+<h1>{{title}}</h1>
+<app-heroes></app-heroes>
 
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7b0f67283151427327b47fed20bcea1ea943cf2f..6338a63ee9e4ce23745fc241ba0731567fe70630 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'app';
+  title = 'Tour of Heros';
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index f65716351aa5930fea545e1e3f016e2980c1f483..36e7983a1e96d5b934fc0dcd4502b6f3b1c41300 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -2,13 +2,19 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
+import { HeroesComponent } from './heroes/heroes.component';
+import { FormsModule } from '@angular/forms';
+import { HeroDetailComponent } from './hero-detail/hero-detail.component'; // <-- NgModel lives here
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    HeroesComponent,
+    HeroDetailComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/app/hero-detail/hero-detail.component.css b/src/app/hero-detail/hero-detail.component.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/app/hero-detail/hero-detail.component.html b/src/app/hero-detail/hero-detail.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..72e76d048056f81def09a45d6dcc1d99fa93a662
--- /dev/null
+++ b/src/app/hero-detail/hero-detail.component.html
@@ -0,0 +1,13 @@
+
+<div *ngIf="hero" class="container-fluid">
+
+  <h2>{{hero.name | uppercase}} Details</h2>
+  <div><span>id: </span>{{hero.id}}</div>
+  <div>
+    <label>name:
+      <input [(ngModel)]="hero.name" placeholder="name">
+    </label>
+  </div>
+
+</div>
+
diff --git a/src/app/hero-detail/hero-detail.component.spec.ts b/src/app/hero-detail/hero-detail.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5e34497bec9c7af8555fcd253a91492875a0784c
--- /dev/null
+++ b/src/app/hero-detail/hero-detail.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeroDetailComponent } from './hero-detail.component';
+
+describe('HeroDetailComponent', () => {
+  let component: HeroDetailComponent;
+  let fixture: ComponentFixture<HeroDetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeroDetailComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeroDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/hero-detail/hero-detail.component.ts b/src/app/hero-detail/hero-detail.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..948cd11d5b3825def6820a918444585614dbbab1
--- /dev/null
+++ b/src/app/hero-detail/hero-detail.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Hero } from '../hero';
+
+@Component({
+  selector: 'app-hero-detail',
+  templateUrl: './hero-detail.component.html',
+  styleUrls: ['./hero-detail.component.css']
+})
+export class HeroDetailComponent implements OnInit {
+  @Input() hero: Hero;
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/hero.ts b/src/app/hero.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e3eac516daa5099425350994debadc545124922d
--- /dev/null
+++ b/src/app/hero.ts
@@ -0,0 +1,4 @@
+export class Hero {
+  id: number;
+  name: string;
+}
diff --git a/src/app/mock-heroes.ts b/src/app/mock-heroes.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e84c2fd2b095e220dd72de2b2a25953debef7dfd
--- /dev/null
+++ b/src/app/mock-heroes.ts
@@ -0,0 +1,14 @@
+import { Hero } from './hero';
+
+export const HEROES: Hero[] = [
+  { id: 11, name: 'Mr. Nice' },
+  { id: 12, name: 'Narco' },
+  { id: 13, name: 'Bombasto' },
+  { id: 14, name: 'Celeritas' },
+  { id: 15, name: 'Magneta' },
+  { id: 16, name: 'RubberMan' },
+  { id: 17, name: 'Dynama' },
+  { id: 18, name: 'Dr IQ' },
+  { id: 19, name: 'Magma' },
+  { id: 20, name: 'Tornado' }
+];
diff --git a/src/styles.css b/src/styles.css
index 90d4ee0072ce3fc41812f8af910219f9eea3c3de..c2be593623fb3565cc2e8e25462166116e7e7356 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1 +1,23 @@
 /* You can add global styles to this file, and also import other style files */
+/* Application-wide 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;
+}
+body, input[text], button {
+  color: #888;
+  font-family: Cambria, Georgia;
+}
+/* everywhere else */
+* {
+  font-family: Arial, Helvetica, sans-serif;
+}