diff --git a/src/app/app.component.html b/src/app/app.component.html
index 16768ec..3cb6b43 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,9 +1,4 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div id="main-wrapper">
-    <h1 style="text-align:center">
-        Welcome to {{title}}!
-    </h1>
-
-    <posts></posts>
-
+<navbar></navbar>
+<div class="container">
+    <router-outlet></router-outlet>
 </div>
\ No newline at end of file
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index f12a77d..dbb996a 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,3 +1,4 @@
+import { GitHubService } from './services/github.service';
 import { ErrorHandler } from '@angular/core';
 import { AppErrorHandler } from './common/app-error-handler';
 import { PostService } from './services/post.service';
@@ -7,6 +8,7 @@ import { CoursesComponent } from './courses.component';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { HttpModule } from '@angular/http';
+import { RouterModule } from '@angular/router';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { AppComponent } from './app.component';
 import { CourseComponent } from './course/course.component';
@@ -17,6 +19,11 @@ import { ContactFormComponent } from './contact-form/contact-form.component';
 import { SignupFormComponent } from './signup-form/signup-form.component';
 import { ChangePasswordFormComponent } from "./assignments/change-password-form/change-password-form.component";
 import { PostsComponent } from './posts/posts.component';
+import { GithubFollowersComponent } from './assignments/github-followers/github-followers.component';
+import { HomeComponent } from './home/home.component';
+import { NotFoundComponent } from './not-found/not-found.component';
+import { GithubProfileComponent } from './github-profile/github-profile.component';
+import { NavbarComponent } from './navbar/navbar.component';
 
 
 @NgModule({
@@ -31,18 +38,31 @@ import { PostsComponent } from './posts/posts.component';
     ContactFormComponent,
     SignupFormComponent,
     ChangePasswordFormComponent,
-    PostsComponent
+    PostsComponent,
+    GithubFollowersComponent,
+    HomeComponent,
+    NotFoundComponent,
+    GithubProfileComponent,
+    NavbarComponent
   ],
   imports: [
     BrowserModule,
     FormsModule,
     ReactiveFormsModule,
-    HttpModule
+    HttpModule,
+    RouterModule.forRoot([
+      { path: '', component: HomeComponent },
+      { path: 'followers', component: GithubFollowersComponent },
+      { path: 'followers/:id/:username', component: GithubProfileComponent },
+      { path: 'posts', component: PostsComponent },
+      { path: '**', component: NotFoundComponent },
+    ])
   ],
   providers: [
     CoursesService,
     PostService,
     AppErrorHandler,
+    GitHubService,
     { provide: ErrorHandler, useClass: AppErrorHandler}
   ],
   bootstrap: [AppComponent]
diff --git a/src/app/assignments/github-followers/github-followers.component.css b/src/app/assignments/github-followers/github-followers.component.css
new file mode 100644
index 0000000..ee09431
--- /dev/null
+++ b/src/app/assignments/github-followers/github-followers.component.css
@@ -0,0 +1,5 @@
+.media-object {
+    width: 80px;
+    height: 80px;
+    border-radius: 100%;
+}
\ No newline at end of file
diff --git a/src/app/assignments/github-followers/github-followers.component.html b/src/app/assignments/github-followers/github-followers.component.html
new file mode 100644
index 0000000..e05c3c3
--- /dev/null
+++ b/src/app/assignments/github-followers/github-followers.component.html
@@ -0,0 +1,17 @@
+<h2>My followers</h2>
+<div *ngIf="isLoading">
+    <i class="fa fa-spin fa-spinner"></i> Loading...
+</div>
+<div class="media" *ngFor="let f of followers">
+    <div class="media-left">
+        <a [href]="f.html_url">
+            <img class="media-object" [src]="f.avatar_url">
+        </a>
+    </div>
+    <div class="media-body">
+        <a [routerLink]="['/followers', f.id, f.login]">
+            <h4 class="media-heading">{{f.login}}</h4>
+        </a>
+        <a [href]="f.html_url">{{f.html_url}}</a>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/assignments/github-followers/github-followers.component.spec.ts b/src/app/assignments/github-followers/github-followers.component.spec.ts
new file mode 100644
index 0000000..c65b2fa
--- /dev/null
+++ b/src/app/assignments/github-followers/github-followers.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GithubFollowersComponent } from './github-followers.component';
+
+describe('GithubFollowersComponent', () => {
+  let component: GithubFollowersComponent;
+  let fixture: ComponentFixture<GithubFollowersComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GithubFollowersComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GithubFollowersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/assignments/github-followers/github-followers.component.ts b/src/app/assignments/github-followers/github-followers.component.ts
new file mode 100644
index 0000000..1eba57a
--- /dev/null
+++ b/src/app/assignments/github-followers/github-followers.component.ts
@@ -0,0 +1,46 @@
+import { ActivatedRoute } from '@angular/router';
+import { GitHubService } from './../../services/github.service';
+import { Component, OnInit, Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/switchMap';
+import 'rxjs/add/observable/combineLatest';
+
+@Component({
+  selector: 'github-followers',
+  templateUrl: './github-followers.component.html',
+  styleUrls: ['./github-followers.component.css']
+})
+
+export class GithubFollowersComponent implements OnInit {
+
+  followers: any[];
+  isLoading = true;
+
+  constructor(private route: ActivatedRoute, private service: GitHubService) { }
+
+  ngOnInit() {
+    //Subscribing to Multiple Observables
+    //switchMap
+    
+    let obs = Observable.combineLatest([
+      this.route.paramMap,
+      this.route.queryParamMap
+    ])
+      .switchMap(combined => {
+        let id = combined[0].get('id');
+        let page = combined[1].get('page');
+
+        return this.service.getAll()
+      })
+      .subscribe(followers => {
+        this.followers = followers;
+        this.isLoading = false;
+      });
+
+
+
+
+  }
+
+}
diff --git a/src/app/github-profile/github-profile.component.css b/src/app/github-profile/github-profile.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/github-profile/github-profile.component.html b/src/app/github-profile/github-profile.component.html
new file mode 100644
index 0000000..2e6151a
--- /dev/null
+++ b/src/app/github-profile/github-profile.component.html
@@ -0,0 +1,4 @@
+<p>
+    github-profile works!
+</p>
+<button class="btn btn-primary" (click)="onSubmit()">Submit</button>
\ No newline at end of file
diff --git a/src/app/github-profile/github-profile.component.spec.ts b/src/app/github-profile/github-profile.component.spec.ts
new file mode 100644
index 0000000..0e35e39
--- /dev/null
+++ b/src/app/github-profile/github-profile.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GithubProfileComponent } from './github-profile.component';
+
+describe('GithubProfileComponent', () => {
+  let component: GithubProfileComponent;
+  let fixture: ComponentFixture<GithubProfileComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GithubProfileComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GithubProfileComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/github-profile/github-profile.component.ts b/src/app/github-profile/github-profile.component.ts
new file mode 100644
index 0000000..005b14f
--- /dev/null
+++ b/src/app/github-profile/github-profile.component.ts
@@ -0,0 +1,25 @@
+import { ActivatedRoute, Router } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-github-profile',
+  templateUrl: './github-profile.component.html',
+  styleUrls: ['./github-profile.component.css']
+})
+export class GithubProfileComponent implements OnInit {
+
+  constructor(private router:Router, private route: ActivatedRoute) { }
+  onSubmit(){
+    this.router.navigate(['/followers'], {
+      queryParams: {page: 1, order: 'newest'}
+    });
+  }
+  ngOnInit() {
+
+    this.route.paramMap.subscribe(params => {
+      let id = +params.get('id');
+      console.log(params, id);
+    });
+  }
+
+}
diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
new file mode 100644
index 0000000..afc16a3
--- /dev/null
+++ b/src/app/home/home.component.html
@@ -0,0 +1,3 @@
+<p>
+  home works!
+</p>
diff --git a/src/app/home/home.component.spec.ts b/src/app/home/home.component.spec.ts
new file mode 100644
index 0000000..86774ae
--- /dev/null
+++ b/src/app/home/home.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HomeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
new file mode 100644
index 0000000..33fd770
--- /dev/null
+++ b/src/app/home/home.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.css']
+})
+export class HomeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/navbar/navbar.component.css b/src/app/navbar/navbar.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
new file mode 100644
index 0000000..0d7a603
--- /dev/null
+++ b/src/app/navbar/navbar.component.html
@@ -0,0 +1,13 @@
+<nav class="navbar navbar-default">
+    <div class="container">
+        <div class="navbar-header">
+            <a class="navbar-brand" routerLink="/">Angular 2+</a>
+        </div>
+        <ul class="nav navbar-nav">
+            <li routerLinkActive="active current">
+                <a routerLink="/followers" [queryParams]="{ page:1 , order: 'newest'}">Followers</a>
+            </li>
+            <li routerLinkActive="active current"><a routerLink="/posts">Posts</a></li>
+        </ul>
+    </div>
+</nav>
\ No newline at end of file
diff --git a/src/app/navbar/navbar.component.spec.ts b/src/app/navbar/navbar.component.spec.ts
new file mode 100644
index 0000000..4e5f590
--- /dev/null
+++ b/src/app/navbar/navbar.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavbarComponent } from './navbar.component';
+
+describe('NavbarComponent', () => {
+  let component: NavbarComponent;
+  let fixture: ComponentFixture<NavbarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NavbarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavbarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/navbar/navbar.component.ts b/src/app/navbar/navbar.component.ts
new file mode 100644
index 0000000..9145594
--- /dev/null
+++ b/src/app/navbar/navbar.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'navbar',
+  templateUrl: './navbar.component.html',
+  styleUrls: ['./navbar.component.css']
+})
+export class NavbarComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/not-found/not-found.component.css b/src/app/not-found/not-found.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/not-found/not-found.component.html b/src/app/not-found/not-found.component.html
new file mode 100644
index 0000000..ff60493
--- /dev/null
+++ b/src/app/not-found/not-found.component.html
@@ -0,0 +1,3 @@
+<p>
+  not-found works!
+</p>
diff --git a/src/app/not-found/not-found.component.spec.ts b/src/app/not-found/not-found.component.spec.ts
new file mode 100644
index 0000000..ff5d8d9
--- /dev/null
+++ b/src/app/not-found/not-found.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotFoundComponent } from './not-found.component';
+
+describe('NotFoundComponent', () => {
+  let component: NotFoundComponent;
+  let fixture: ComponentFixture<NotFoundComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NotFoundComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NotFoundComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/not-found/not-found.component.ts b/src/app/not-found/not-found.component.ts
new file mode 100644
index 0000000..029bd54
--- /dev/null
+++ b/src/app/not-found/not-found.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-not-found',
+  templateUrl: './not-found.component.html',
+  styleUrls: ['./not-found.component.css']
+})
+export class NotFoundComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/services/github.service.ts b/src/app/services/github.service.ts
new file mode 100644
index 0000000..e316a93
--- /dev/null
+++ b/src/app/services/github.service.ts
@@ -0,0 +1,11 @@
+import { Injectable } from '@angular/core';
+import { Http } from '@angular/http';
+import { DataService } from './data.service';
+
+@Injectable()
+export class GitHubService extends DataService{
+    constructor(http: Http){
+        super('https://api.github.com/users/dvbtham/followers', http);
+
+    }
+}
\ No newline at end of file