diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 3cc6bc9..197d9f3 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -4,6 +4,7 @@ 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';
+import { DummyComponent } from './dummy/dummy.component';
 
 const routes: Routes = [
   {
@@ -14,6 +15,10 @@ const routes: Routes = [
       { path: '2', component: ModalTwoComponent },
     ]
   },
+  {
+    path: 'dummy',
+    component: DummyComponent
+  },
   { path: '', redirectTo: '/wizard', pathMatch: 'full' },
 ];
 
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 5fe38d7..aa95126 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -9,13 +9,16 @@ 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';
+import { SharedServiceService } from './services/shared-service.service';
+import { DummyComponent } from './dummy/dummy.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     WizardBaseComponent,
     ModalOneComponent,
-    ModalTwoComponent
+    ModalTwoComponent,
+    DummyComponent
   ],
   imports: [
     BrowserModule,
@@ -23,7 +26,7 @@ import { ModalTwoComponent } from './wizard-base/modal-two/modal-two.component';
     HttpModule,
     AppRoutingModule
   ],
-  providers: [],
+  providers: [ SharedServiceService ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }
diff --git a/src/app/dummy/dummy.component.css b/src/app/dummy/dummy.component.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/app/dummy/dummy.component.css
diff --git a/src/app/dummy/dummy.component.html b/src/app/dummy/dummy.component.html
new file mode 100644
index 0000000..5d7c59c
--- /dev/null
+++ b/src/app/dummy/dummy.component.html
@@ -0,0 +1,3 @@
+<p>
+  dummy works!
+</p>
diff --git a/src/app/dummy/dummy.component.spec.ts b/src/app/dummy/dummy.component.spec.ts
new file mode 100644
index 0000000..52111f8
--- /dev/null
+++ b/src/app/dummy/dummy.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DummyComponent } from './dummy.component';
+
+describe('DummyComponent', () => {
+  let component: DummyComponent;
+  let fixture: ComponentFixture<DummyComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DummyComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DummyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/dummy/dummy.component.ts b/src/app/dummy/dummy.component.ts
new file mode 100644
index 0000000..beaff66
--- /dev/null
+++ b/src/app/dummy/dummy.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-dummy',
+  templateUrl: './dummy.component.html',
+  styleUrls: ['./dummy.component.css']
+})
+export class DummyComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+    console.log('dummy loaded');
+  }
+
+}
diff --git a/src/app/services/shared-service.service.spec.ts b/src/app/services/shared-service.service.spec.ts
new file mode 100644
index 0000000..b1b7611
--- /dev/null
+++ b/src/app/services/shared-service.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { SharedServiceService } from './shared-service.service';
+
+describe('SharedServiceService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [SharedServiceService]
+    });
+  });
+
+  it('should ...', inject([SharedServiceService], (service: SharedServiceService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/src/app/services/shared-service.service.ts b/src/app/services/shared-service.service.ts
new file mode 100644
index 0000000..ddab7ef
--- /dev/null
+++ b/src/app/services/shared-service.service.ts
@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+
+@Injectable()
+export class SharedServiceService {
+
+  // title = new Subject<string>();
+  title = new BehaviorSubject<string>('default');
+  title$ = this.title.asObservable();
+
+  constructor() {
+  }
+
+  changedTitle(newTitle: string) {
+    this.title.next(newTitle);
+  }
+
+
+}
diff --git a/src/app/wizard-base/modal-one/modal-one.component.html b/src/app/wizard-base/modal-one/modal-one.component.html
index dfd3c0f..7e1462c 100644
--- a/src/app/wizard-base/modal-one/modal-one.component.html
+++ b/src/app/wizard-base/modal-one/modal-one.component.html
@@ -3,16 +3,17 @@
   <!-- Modal content -->
   <div class="modal-content">
     <div class="modal-header">
-      <span class="close">&times;</span>
-      <h2>Modal Header One</h2>
+      <span class="close" (click)="btnClose()">&times;</span>
+      <h2>Modal Header One: {{title}}</h2>
     </div>
     <div class="modal-body">
       <p>Some text in the Modal Body</p>
       <p>Some other text...</p>
+      <button (click)="btnChange()">Change</button>
     </div>
     <div class="modal-footer">
       <h3>Modal Footer</h3>
-      <button [routerLink]="['/wizard', 2]">Next</button>
+      <button (click)="btnNext()">Next</button>
     </div>
   </div>
 
diff --git a/src/app/wizard-base/modal-one/modal-one.component.ts b/src/app/wizard-base/modal-one/modal-one.component.ts
index 5176479..fbe60ee 100644
--- a/src/app/wizard-base/modal-one/modal-one.component.ts
+++ b/src/app/wizard-base/modal-one/modal-one.component.ts
@@ -1,15 +1,41 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { SharedServiceService } from '../../services/shared-service.service';
+import { Router } from '@angular/router';
+import { Subscription } from 'rxjs/Subscription';
 
 @Component({
   selector: 'app-modal-one',
   templateUrl: './modal-one.component.html',
   styleUrls: ['./modal-one.component.css']
 })
-export class ModalOneComponent implements OnInit {
+export class ModalOneComponent implements OnInit, OnDestroy {
 
-  constructor() { }
+  title: string;
+  subscription: Subscription;
+
+  constructor(private shared: SharedServiceService, private router: Router) {
+    this.subscription = shared.title$.subscribe(title => {
+      this.title = title;
+    });
+  }
 
   ngOnInit() {
+
+  }
+
+  btnChange() {
+    this.shared.changedTitle('modal-one');
   }
 
+  btnNext() {
+    this.router.navigate(['/wizard', 2]);
+  }
+
+  btnClose() {
+    this.router.navigate(['/wizard']);
+  }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
+  }
 }
diff --git a/src/app/wizard-base/modal-two/modal-two.component.html b/src/app/wizard-base/modal-two/modal-two.component.html
index f454255..1dab041 100644
--- a/src/app/wizard-base/modal-two/modal-two.component.html
+++ b/src/app/wizard-base/modal-two/modal-two.component.html
@@ -3,16 +3,17 @@
   <!-- Modal content -->
   <div class="modal-content">
     <div class="modal-header">
-      <span class="close">&times;</span>
-      <h2>Modal Header Two</h2>
+      <span class="close" (click)="btnClose()">&times;</span>
+      <h2>Modal Header Two: {{title}}</h2>
     </div>
     <div class="modal-body">
       <p>Some text in the Modal Body</p>
       <p>Some other text...</p>
+      <button (click)="btnChange()">Change</button>
     </div>
     <div class="modal-footer">
       <h3>Modal Footer</h3>
-      <button [routerLink]="['/wizard', 1]">Prev</button>
+      <button (click)="btnPrev()">Prev</button>
     </div>
   </div>
 
diff --git a/src/app/wizard-base/modal-two/modal-two.component.ts b/src/app/wizard-base/modal-two/modal-two.component.ts
index b615ee3..bae9634 100644
--- a/src/app/wizard-base/modal-two/modal-two.component.ts
+++ b/src/app/wizard-base/modal-two/modal-two.component.ts
@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { SharedServiceService } from '../../services/shared-service.service';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-modal-two',
@@ -7,9 +9,30 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ModalTwoComponent implements OnInit {
 
-  constructor() { }
+  title: string;
+
+  constructor(private shared: SharedServiceService, private router: Router) {
+    shared.title$.subscribe(title => {
+      this.title = title;
+    });
+  }
 
   ngOnInit() {
+
+  }
+
+  btnChange() {
+    this.shared.changedTitle('modal-two');
+  }
+
+  btnPrev() {
+    this.router.navigate(['/wizard', 1]);
   }
 
+  btnClose() {
+    this.router.navigateByUrl('/dummy').then(() => {
+      this.router.navigateByUrl('/wizard');
+    });
+    // this.shared.changedTitle('wizard');
+  }
 }
diff --git a/src/app/wizard-base/wizard-base.component.html b/src/app/wizard-base/wizard-base.component.html
index f272460..eec5f35 100644
--- a/src/app/wizard-base/wizard-base.component.html
+++ b/src/app/wizard-base/wizard-base.component.html
@@ -1,4 +1,6 @@
+<h1>{{title}}</h1>
 <p>
   wizard-base works!
 </p>
+<button (click)="openModal()">Modal</button>
 <router-outlet></router-outlet>
diff --git a/src/app/wizard-base/wizard-base.component.ts b/src/app/wizard-base/wizard-base.component.ts
index 380ede4..6c7f5d5 100644
--- a/src/app/wizard-base/wizard-base.component.ts
+++ b/src/app/wizard-base/wizard-base.component.ts
@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { SharedServiceService } from '../services/shared-service.service';
+import { ActivatedRoute, Router } from '@angular/router';
+
 
 @Component({
   selector: 'app-wizard-base',
@@ -6,10 +9,22 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./wizard-base.component.css']
 })
 export class WizardBaseComponent implements OnInit {
+  title: string;
 
-  constructor() { }
+  constructor(private shared: SharedServiceService, private router: Router, private route: ActivatedRoute) {
+    shared.title$.subscribe(title => {
+      this.title = title;
+    });
+    shared.changedTitle('wizard');
+  }
 
   ngOnInit() {
+    this.route.params.subscribe(params => {
+      console.log('wizard loaded');
+    });
   }
 
+  openModal() {
+    this.router.navigate(['/wizard', 1]);
+  }
 }
diff --git a/src/index.html b/src/index.html
index b557683..cb479d1 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,7 +7,6 @@
 
   <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>
--
libgit2 0.21.2