diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
new file mode 100644
index 0000000..3cc6bc9
--- /dev/null
+++ b/src/app/app-routing.module.ts
@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { WizardBaseComponent } from './wizard-base/wizard-base.component';
+import { ModalOneComponent } from './wizard-base/modal-one/modal-one.component';
+import { ModalTwoComponent } from './wizard-base/modal-two/modal-two.component';
+
+const routes: Routes = [
+  {
+    path: 'wizard',
+    component: WizardBaseComponent,
+    children: [
+      { path: '1', component: ModalOneComponent },
+      { path: '2', component: ModalTwoComponent },
+    ]
+  },
+  { path: '', redirectTo: '/wizard', pathMatch: 'full' },
+];
+
+@NgModule({
+  imports: [ RouterModule.forRoot(routes) ],
+  exports: [ RouterModule ]
+})
+export class AppRoutingModule {
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index b6931b5..0680b43 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,3 +1 @@
-<h1>
-  {{title}}
-</h1>
+<router-outlet></router-outlet>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 67ae491..5fe38d7 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -3,16 +3,25 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 
+import { AppRoutingModule } from './app-routing.module';
+
 import { AppComponent } from './app.component';
+import { WizardBaseComponent } from './wizard-base/wizard-base.component';
+import { ModalOneComponent } from './wizard-base/modal-one/modal-one.component';
+import { ModalTwoComponent } from './wizard-base/modal-two/modal-two.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    WizardBaseComponent,
+    ModalOneComponent,
+    ModalTwoComponent
   ],
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule
+    HttpModule,
+    AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/app/wizard-base/modal-one/modal-one.component.css b/src/app/wizard-base/modal-one/modal-one.component.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/app/wizard-base/modal-one/modal-one.component.css
diff --git a/src/app/wizard-base/modal-one/modal-one.component.html b/src/app/wizard-base/modal-one/modal-one.component.html
new file mode 100644
index 0000000..dfd3c0f
--- /dev/null
+++ b/src/app/wizard-base/modal-one/modal-one.component.html
@@ -0,0 +1,19 @@
+<div id="myModal" class="modal">
+
+  <!-- Modal content -->
+  <div class="modal-content">
+    <div class="modal-header">
+      <span class="close">&times;</span>
+      <h2>Modal Header One</h2>
+    </div>
+    <div class="modal-body">
+      <p>Some text in the Modal Body</p>
+      <p>Some other text...</p>
+    </div>
+    <div class="modal-footer">
+      <h3>Modal Footer</h3>
+      <button [routerLink]="['/wizard', 2]">Next</button>
+    </div>
+  </div>
+
+</div>
diff --git a/src/app/wizard-base/modal-one/modal-one.component.spec.ts b/src/app/wizard-base/modal-one/modal-one.component.spec.ts
new file mode 100644
index 0000000..a2264d3
--- /dev/null
+++ b/src/app/wizard-base/modal-one/modal-one.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModalOneComponent } from './modal-one.component';
+
+describe('ModalOneComponent', () => {
+  let component: ModalOneComponent;
+  let fixture: ComponentFixture<ModalOneComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ModalOneComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ModalOneComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/wizard-base/modal-one/modal-one.component.ts b/src/app/wizard-base/modal-one/modal-one.component.ts
new file mode 100644
index 0000000..5176479
--- /dev/null
+++ b/src/app/wizard-base/modal-one/modal-one.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-modal-one',
+  templateUrl: './modal-one.component.html',
+  styleUrls: ['./modal-one.component.css']
+})
+export class ModalOneComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/wizard-base/modal-two/modal-two.component.css b/src/app/wizard-base/modal-two/modal-two.component.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/app/wizard-base/modal-two/modal-two.component.css
diff --git a/src/app/wizard-base/modal-two/modal-two.component.html b/src/app/wizard-base/modal-two/modal-two.component.html
new file mode 100644
index 0000000..f454255
--- /dev/null
+++ b/src/app/wizard-base/modal-two/modal-two.component.html
@@ -0,0 +1,19 @@
+<div id="myModal" class="modal">
+
+  <!-- Modal content -->
+  <div class="modal-content">
+    <div class="modal-header">
+      <span class="close">&times;</span>
+      <h2>Modal Header Two</h2>
+    </div>
+    <div class="modal-body">
+      <p>Some text in the Modal Body</p>
+      <p>Some other text...</p>
+    </div>
+    <div class="modal-footer">
+      <h3>Modal Footer</h3>
+      <button [routerLink]="['/wizard', 1]">Prev</button>
+    </div>
+  </div>
+
+</div>
diff --git a/src/app/wizard-base/modal-two/modal-two.component.spec.ts b/src/app/wizard-base/modal-two/modal-two.component.spec.ts
new file mode 100644
index 0000000..0ac2741
--- /dev/null
+++ b/src/app/wizard-base/modal-two/modal-two.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModalTwoComponent } from './modal-two.component';
+
+describe('ModalTwoComponent', () => {
+  let component: ModalTwoComponent;
+  let fixture: ComponentFixture<ModalTwoComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ModalTwoComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ModalTwoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/wizard-base/modal-two/modal-two.component.ts b/src/app/wizard-base/modal-two/modal-two.component.ts
new file mode 100644
index 0000000..b615ee3
--- /dev/null
+++ b/src/app/wizard-base/modal-two/modal-two.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-modal-two',
+  templateUrl: './modal-two.component.html',
+  styleUrls: ['./modal-two.component.css']
+})
+export class ModalTwoComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/wizard-base/wizard-base.component.css b/src/app/wizard-base/wizard-base.component.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/app/wizard-base/wizard-base.component.css
diff --git a/src/app/wizard-base/wizard-base.component.html b/src/app/wizard-base/wizard-base.component.html
new file mode 100644
index 0000000..f272460
--- /dev/null
+++ b/src/app/wizard-base/wizard-base.component.html
@@ -0,0 +1,4 @@
+<p>
+  wizard-base works!
+</p>
+<router-outlet></router-outlet>
diff --git a/src/app/wizard-base/wizard-base.component.spec.ts b/src/app/wizard-base/wizard-base.component.spec.ts
new file mode 100644
index 0000000..a1a6eb3
--- /dev/null
+++ b/src/app/wizard-base/wizard-base.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WizardBaseComponent } from './wizard-base.component';
+
+describe('WizardBaseComponent', () => {
+  let component: WizardBaseComponent;
+  let fixture: ComponentFixture<WizardBaseComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WizardBaseComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WizardBaseComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/wizard-base/wizard-base.component.ts b/src/app/wizard-base/wizard-base.component.ts
new file mode 100644
index 0000000..380ede4
--- /dev/null
+++ b/src/app/wizard-base/wizard-base.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-wizard-base',
+  templateUrl: './wizard-base.component.html',
+  styleUrls: ['./wizard-base.component.css']
+})
+export class WizardBaseComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/index.html b/src/index.html
index cb479d1..b557683 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,6 +7,7 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="stylesheet" href="styles.css">
 </head>
 <body>
   <app-root>Loading...</app-root>
diff --git a/src/styles.css b/src/styles.css
index 90d4ee0..9b2135c 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1 +1,66 @@
 /* You can add global styles to this file, and also import other style files */
+/* The Modal (background) */
+.modal {
+
+  position: fixed; /* Stay in place */
+  z-index: 1; /* Sit on top */
+  padding-top: 100px; /* Location of the box */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgb(0,0,0); /* Fallback color */
+  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+}
+
+/* Modal Content */
+.modal-content {
+  position: relative;
+  background-color: #fefefe;
+  margin: auto;
+  padding: 0;
+  border: 1px solid #888;
+  width: 80%;
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+}
+
+/* Add Animation */
+@-webkit-keyframes animatetop {
+  from {top:-300px; opacity:0}
+  to {top:0; opacity:1}
+}
+
+@keyframes animatetop {
+  from {top:-300px; opacity:0}
+  to {top:0; opacity:1}
+}
+
+/* The Close Button */
+.close {
+  color: white;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: #000;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.modal-header {
+  padding: 2px 16px;
+  background-color: #5cb85c;
+  color: white;
+}
+
+.modal-body {padding: 2px 16px;}
+
+.modal-footer {
+  padding: 2px 16px;
+  background-color: #5cb85c;
+  color: white;
+}
--
libgit2 0.21.2