diff --git a/index.html b/index.html
index 222e67a..d6d1bf3 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
 
 <head>
   <meta charset="UTF-8">
+  <base href="/">
   <title>Angular 2 - Countries and Capitals</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <!-- 1. Load libraries -->
@@ -15,6 +16,9 @@
   <script src="node_modules/systemjs/dist/system.src.js"></script>
   <script src="node_modules/rxjs/bundles/Rx.js"></script>
   <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
+  <script src="/node_modules/angular2/bundles/router.dev.js"></script>
+  <script src="node_modules/angular2/bundles/http.dev.js"></script>
+  
 
   <!-- 2. Configure SystemJS -->
   <script>
diff --git a/src/app/app-footer/app-footer.component.ts b/src/app/app-footer/app-footer.component.ts
new file mode 100644
index 0000000..4176435
--- /dev/null
+++ b/src/app/app-footer/app-footer.component.ts
@@ -0,0 +1,22 @@
+import { Component, OnInit } from 'angular2/core';
+import {ROUTER_DIRECTIVES,Router} from 'angular2/router';
+@Component({
+    moduleId: 'appFooterModule',
+    selector: 'app-footer',
+    templateUrl: 'src/app/app-footer/app-footer.view.html',
+    styleUrls:['src/app/app-footer/app-footer.styles.css'],
+    directives: [ROUTER_DIRECTIVES]
+})
+export class AppFooterComponent implements OnInit {
+    constructor(public router: Router) {
+        
+    }
+    ngOnInit() { }
+    
+    
+    // this function returns whether the current route is the route passed in the function
+    isActive(route: any[]): boolean {
+        return this.router.isRouteActive(this.router.generate(route));
+    }
+
+}
\ No newline at end of file
diff --git a/src/app/app-footer/app-footer.styles.css b/src/app/app-footer/app-footer.styles.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/app-footer/app-footer.view.html b/src/app/app-footer/app-footer.view.html
new file mode 100644
index 0000000..67af0cd
--- /dev/null
+++ b/src/app/app-footer/app-footer.view.html
@@ -0,0 +1,4 @@
+ <div class="text-center">
+    <a class="btn" [routerLink]="['Home']" *ngIf="!isActive(['Home'])">Home</a>
+    <a class="btn" [routerLink]="['Countries']" *ngIf="!isActive(['Countries'])">Browse Countries</a>
+</div>
\ No newline at end of file
diff --git a/src/app/app-header/app-header.component.ts b/src/app/app-header/app-header.component.ts
new file mode 100644
index 0000000..2fbe8b6
--- /dev/null
+++ b/src/app/app-header/app-header.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from 'angular2/core';
+import {ROUTER_DIRECTIVES} from 'angular2/router';
+@Component({
+    moduleId: 'appHeaderModule',
+    selector: 'app-header',
+    templateUrl: 'src/app/app-header/app-header.view.html',
+    styleUrls:['src/app/app-header/app-header.styles.css'],
+    directives: [ROUTER_DIRECTIVES]
+})
+export class AppHeaderComponent implements OnInit {
+    constructor() { }
+    ngOnInit() { }
+
+}
\ No newline at end of file
diff --git a/src/app/app-header/app-header.styles.css b/src/app/app-header/app-header.styles.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/app-header/app-header.view.html b/src/app/app-header/app-header.view.html
new file mode 100644
index 0000000..d853276
--- /dev/null
+++ b/src/app/app-header/app-header.view.html
@@ -0,0 +1,3 @@
+<div class="header">
+        <h1 class="text-content">Countries & Capitals</h1>    
+</div>
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
new file mode 100644
index 0000000..946909e
--- /dev/null
+++ b/src/app/app.component.ts
@@ -0,0 +1,48 @@
+import { Component, OnInit, ViewEncapsulation} from 'angular2/core';
+import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router';
+import {AppHeaderComponent} from './app-header/app-header.component';
+import {AppFooterComponent} from './app-footer/app-footer.component';
+import {MainComponent} from './main/main.component';
+import {HomeComponent} from './main/home/home.component';
+import {CountriesComponent} from './main/countries/countries.component';
+import {CountryComponent} from './main/country/country.component';
+
+@Component({
+    moduleId:'appModule',
+    selector: 'app',
+    templateUrl: 'src/app/app.view.html',
+    styleUrls: ['src/app/app.styles.css'],
+    directives: [ROUTER_DIRECTIVES,AppHeaderComponent,AppFooterComponent,MainComponent],
+    providers: [ROUTER_PROVIDERS],
+    encapsulation: ViewEncapsulation.None
+})
+
+// defining routes here
+@RouteConfig([
+  {
+    path: '/home',
+    name: 'Home',
+    component:HomeComponent,
+    useAsDefault: true
+  },
+   {
+    path: '/countries',
+    name: 'Countries',
+    component:CountriesComponent
+  },
+   {
+    path: '/country/:code',     // eg localhost:3000/country/US, localhost:3000/country/PK etc
+    name: 'Country',
+    component:CountryComponent
+  }
+])
+
+
+export class AppComponent implements OnInit {
+    constructor() { }
+    
+    ngOnInit() {
+        console.log("app initiated");
+    }
+
+}
\ No newline at end of file
diff --git a/src/app/app.styles.css b/src/app/app.styles.css
new file mode 100644
index 0000000..475f463
--- /dev/null
+++ b/src/app/app.styles.css
@@ -0,0 +1,36 @@
+/*GLOBAL STYLES*/
+
+.btn{
+    border:1px solid grey;
+    border-radius: 4px;
+    padding: 4px 10px;
+    color:black;
+    
+}
+
+.text-center{
+    text-align: center;
+}
+
+.lorem{
+    max-width: 400px;
+    margin: 40px auto;
+}
+
+.btn:hover{
+    color: white;
+    background: black;
+    -webkit-transition: 0.4s all ease;
+    -moz-transition: 0.4s all ease;
+    transition: 0.4s all ease;
+}
+a{
+    text-decoration: none;
+}
+
+/* APP COMPONENT STYLES*/
+
+.header {
+    text-align:center;
+    border-bottom:2px solid black;
+}
\ No newline at end of file
diff --git a/src/app/app.view.html b/src/app/app.view.html
new file mode 100644
index 0000000..f5ef630
--- /dev/null
+++ b/src/app/app.view.html
@@ -0,0 +1,5 @@
+<div class="main-view-container">
+    <app-header></app-header>
+    <main></main>
+    <app-footer></app-footer>
+</div>
\ No newline at end of file
diff --git a/src/app/countries.service.ts b/src/app/countries.service.ts
new file mode 100644
index 0000000..3eb4630
--- /dev/null
+++ b/src/app/countries.service.ts
@@ -0,0 +1,33 @@
+import {Injectable} from 'angular2/core';
+import {Http} from 'angular2/http';
+import 'rxjs/add/operator/map';
+import { Observable }     from 'rxjs/Observable';
+
+@Injectable()
+export class CountriesService {
+
+    constructor (private http: Http) {}
+        private countriesUrl = 'http://api.geonames.org/searchJSON?q=country&username=ahsan.ubitian';  // URL to web api
+        private neighboursUrl = "http://api.geonames.org/neighboursJSON?username=ahsan.ubitian&country=";
+        private countryUrl = "http://api.geonames.org/countryInfoJSON?formatted=true&lang=it&username=ahsan.ubitian&style=full&country=";
+        
+        getCountries (){
+            let url = this.countriesUrl;            //url to be used for call
+            return this.http.get(url)
+            .map(res => res.json())
+            .map((data) => { return data.geonames; });;
+        }
+        getCountry (countryCode){
+            let url = this.countryUrl + countryCode;        //url to be used for call (appending countryCode to make it like '&country=PK')
+            return this.http.get(url)
+            .map(res => res.json())
+            .map((data) => { return data.geonames[0]; }); //since we expect [0] will have our required country
+        }
+        
+        getNeighbours(countryCode){
+            let url = this.neighboursUrl + countryCode;     //url to be used for call (appending countryCode to make it like '&country=PK')
+            return this.http.get(url)
+            .map(res => res.json())
+            .map((data) => { return data.geonames; });
+        }
+}
\ No newline at end of file
diff --git a/src/app/main/countries/countries.component.ts b/src/app/main/countries/countries.component.ts
new file mode 100644
index 0000000..bc9ec78
--- /dev/null
+++ b/src/app/main/countries/countries.component.ts
@@ -0,0 +1,33 @@
+import { Component, OnInit } from 'angular2/core';
+import {ROUTER_DIRECTIVES, Router} from 'angular2/router';
+import {CountriesService} from '../../countries.service';
+import {SpinnerComponent} from '../../../shared/spinner/spinner.component';
+import { HTTP_PROVIDERS } from 'angular2/http';
+@Component({
+    moduleId: 'countriesModule',
+    selector: 'countries',
+    templateUrl: 'src/app/main/countries/countries.view.html',
+    styleUrls:['src/app/main/countries/countries.styles.css'],
+    directives: [ROUTER_DIRECTIVES,SpinnerComponent],
+    providers: [CountriesService,HTTP_PROVIDERS]
+})
+export class CountriesComponent implements OnInit {
+    private countries = [];
+    private isRequesting: boolean = true;
+    constructor(private countriesService: CountriesService, private router:Router) {
+        //injected countriesService to use it later
+    }
+    ngOnInit() { 
+        this.countriesService.getCountries()
+            .subscribe(countries => {
+                this.countries = countries;
+                this.isRequesting = false;      //hide loader
+            });
+    }
+    
+    onCountryClick(country){
+        console.log(country);
+        this.router.navigate(['Country', {code:country.countryCode}]);  //navigate to the desired router
+    }
+
+}
\ No newline at end of file
diff --git a/src/app/main/countries/countries.styles.css b/src/app/main/countries/countries.styles.css
new file mode 100644
index 0000000..a5e204e
--- /dev/null
+++ b/src/app/main/countries/countries.styles.css
@@ -0,0 +1,13 @@
+#countriesTableContainer{
+    max-height: 300px;
+    overflow: auto;
+}
+#countriesTable{
+}
+#countriesTable td{
+    text-align: center;
+}
+#countriesTable tr:hover{
+    background-color: #dcdcdc;
+    cursor: pointer; 
+}
\ No newline at end of file
diff --git a/src/app/main/countries/countries.view.html b/src/app/main/countries/countries.view.html
new file mode 100644
index 0000000..56bf121
--- /dev/null
+++ b/src/app/main/countries/countries.view.html
@@ -0,0 +1,17 @@
+<my-spinner [isRunning]="isRequesting" *ngIf="isRequesting"></my-spinner>
+<!--<div *ngIf="!dataLoaded">Loading Countries....</div>-->
+<div id="countriesTableContainer" *ngIf="!isRequesting">
+    <table style="width:100%" id="countriesTable">
+        <tr>
+            <th>Name</th>
+            <th>Country Code</th>
+            <th>Population</th>
+        </tr>
+        <tr *ngFor="let cnt of countries" (click)="onCountryClick(cnt)">
+            <td>{{cnt.name}}</td>
+            <td>{{cnt.countryCode}}</td>
+            <td>{{cnt.population}}</td>
+        </tr>
+        
+    </table>
+</div>
\ No newline at end of file
diff --git a/src/app/main/country/country.component.ts b/src/app/main/country/country.component.ts
new file mode 100644
index 0000000..9c6866d
--- /dev/null
+++ b/src/app/main/country/country.component.ts
@@ -0,0 +1,50 @@
+import { Component, OnInit, Pipe, PipeTransform } from 'angular2/core';
+import {ROUTER_DIRECTIVES, RouteParams} from 'angular2/router';
+import {CountriesService} from '../../countries.service';
+import {SpinnerComponent} from '../../../shared/spinner/spinner.component';
+import { HTTP_PROVIDERS } from 'angular2/http';
+
+// We use the @Pipe decorator to register the name of the pipe
+@Pipe({
+  name: 'customLimit'
+})
+// The work of the pipe is handled in the tranform method with our pipe's class
+class CustomLimitPipe implements PipeTransform {
+  transform(array: Array<any>, args: any[]) {
+    array = array.slice(0,3);
+    return array;
+  }
+}
+
+
+
+@Component({
+    moduleId: 'countryModule',
+    selector: 'country',
+    templateUrl: 'src/app/main/country/country.view.html',
+    styleUrls:['src/app/main/country/country.styles.css'],
+    directives: [ROUTER_DIRECTIVES,SpinnerComponent],
+    providers: [CountriesService,HTTP_PROVIDERS],
+    pipes:[CustomLimitPipe]
+})
+export class CountryComponent implements OnInit {
+    private country = {};
+    private neighbours = [];
+    private isRequesting: boolean = true;
+    constructor(countriesService: CountriesService,params: RouteParams) {
+        console.log(params);
+        console.log(params.get("code"));
+        // get country based on the country code (code) we have
+        countriesService.getCountry(params.get("code"))
+            .subscribe(country => {
+                this.country = country;
+                // get country neighbours
+                countriesService.getNeighbours(params.get("code"))
+                    .subscribe(neighbours => {
+                        this.neighbours = neighbours;
+                        this.isRequesting = false;      //hide the loader
+                    });
+            });
+    }
+    ngOnInit() { }
+}
\ No newline at end of file
diff --git a/src/app/main/country/country.styles.css b/src/app/main/country/country.styles.css
new file mode 100644
index 0000000..7e1b39e
--- /dev/null
+++ b/src/app/main/country/country.styles.css
@@ -0,0 +1,4 @@
+.country-container{
+    max-width: 300px;
+    margin: 0 auto;
+}
\ No newline at end of file
diff --git a/src/app/main/country/country.view.html b/src/app/main/country/country.view.html
new file mode 100644
index 0000000..1d8a0b2
--- /dev/null
+++ b/src/app/main/country/country.view.html
@@ -0,0 +1,21 @@
+<my-spinner [isRunning]="isRequesting" *ngIf="isRequesting"></my-spinner>
+<div class="country-container" *ngIf="!isRequesting">
+    <div class="country-name">
+        <h1>{{country.countryName}}</h1>
+    </div>
+    <div class="country-info">
+        <p>Population : {{country.population}}</p>
+        <p>Area : {{country.areaInSqKm}}</p>
+        <p>Capital : {{country.capital}}</p>
+        <p>Population : {{country.population}}</p>
+        
+        <p *ngIf="neighbours && neighbours.length>0">3 neighbours: 
+            <span *ngFor="let neigh of neighbours|customLimit:3 ; #i=index">
+                <a [routerLink]="['Country',{code:neigh.countryCode}]">
+                    {{neigh.countryName}}
+                </a>
+                <span *ngIf="i<2">,</span>
+            </span>
+        </p>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/main/home/home.component.ts b/src/app/main/home/home.component.ts
new file mode 100644
index 0000000..44dae1c
--- /dev/null
+++ b/src/app/main/home/home.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from 'angular2/core';
+import {ROUTER_DIRECTIVES} from 'angular2/router';
+@Component({
+    moduleId: 'homeModule',
+    selector: 'home',
+    templateUrl: 'src/app/main/home/home.view.html',
+    styleUrls:['src/app/main/home/home.styles.css'],
+    directives: [ROUTER_DIRECTIVES]
+})
+export class HomeComponent implements OnInit {
+    constructor() { }
+    ngOnInit() { }
+
+}
\ No newline at end of file
diff --git a/src/app/main/home/home.styles.css b/src/app/main/home/home.styles.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/main/home/home.view.html b/src/app/main/home/home.view.html
new file mode 100644
index 0000000..05ae1e0
--- /dev/null
+++ b/src/app/main/home/home.view.html
@@ -0,0 +1,7 @@
+<div class="home-container">
+    <div class="inner-container">
+        <div class="lorem">
+            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/main/main.component.ts b/src/app/main/main.component.ts
new file mode 100644
index 0000000..e4dc7e5
--- /dev/null
+++ b/src/app/main/main.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from 'angular2/core';
+import {ROUTER_DIRECTIVES} from 'angular2/router';
+@Component({
+    moduleId: 'mainModule',
+    selector: 'main',
+    templateUrl: 'src/app/main/main.view.html',
+    styleUrls:['src/app/main/main.styles.css'],
+    directives: [ROUTER_DIRECTIVES]
+})
+export class MainComponent implements OnInit {
+    constructor() { }
+    ngOnInit() { }
+
+}
\ No newline at end of file
diff --git a/src/app/main/main.styles.css b/src/app/main/main.styles.css
new file mode 100644
index 0000000..05654b7
--- /dev/null
+++ b/src/app/main/main.styles.css
@@ -0,0 +1,4 @@
+.main-view-container{
+    min-height: 150px;
+    margin: 40px 100px;
+}
\ No newline at end of file
diff --git a/src/app/main/main.view.html b/src/app/main/main.view.html
new file mode 100644
index 0000000..8d50fc2
--- /dev/null
+++ b/src/app/main/main.view.html
@@ -0,0 +1,5 @@
+<!--This is our main view where all the routing magic happens-->
+
+<div class="main-view-container">
+    <router-outlet></router-outlet>     
+</div>
diff --git a/src/bootstrap.ts b/src/bootstrap.ts
index 74df08e..9076168 100644
--- a/src/bootstrap.ts
+++ b/src/bootstrap.ts
@@ -1,15 +1,7 @@
 import {bootstrap} from 'angular2/platform/browser';
 import {Component} from 'angular2/core';
+import {AppComponent} from './app/app.component';
 
-
-@Component({
-  selector: 'app',
-  template: `
-  	<h1>Countries and Capitals</h1>
-  `,
-})
-export class App {}
-
-bootstrap(App)
+bootstrap(AppComponent)
   .then(success => console.log('Kicking off Countries and Capitals'))
   .catch(error => console.log(error));
diff --git a/src/shared/spinner/spinner.component.ts b/src/shared/spinner/spinner.component.ts
new file mode 100644
index 0000000..cdfa3a9
--- /dev/null
+++ b/src/shared/spinner/spinner.component.ts
@@ -0,0 +1,42 @@
+'use strict';
+
+import {Component, Input, OnDestroy} from 'angular2/core';
+
+@Component({
+    selector: 'my-spinner',
+    templateUrl: 'src/shared/spinner/spinner.view.html',
+    styleUrls:['src/shared/spinner/spinner.styles.css']
+})
+export class SpinnerComponent implements OnDestroy {  
+    private currentTimeout: number;
+    private isDelayedRunning: boolean = false;
+
+    @Input()
+    public delay: number = 300;
+
+    @Input()
+    public set isRunning(value: boolean) {
+        if (!value) {
+            this.cancelTimeout();
+            this.isDelayedRunning = false;
+        }
+
+        if (this.currentTimeout) {
+            return;
+        }
+
+        this.currentTimeout = setTimeout(() => {
+            this.isDelayedRunning = value;
+            this.cancelTimeout();
+        }, this.delay);
+    }
+
+    private cancelTimeout(): void {
+        clearTimeout(this.currentTimeout);
+        this.currentTimeout = undefined;
+    }
+
+    ngOnDestroy(): any {
+        this.cancelTimeout();
+    }
+}
\ No newline at end of file
diff --git a/src/shared/spinner/spinner.styles.css b/src/shared/spinner/spinner.styles.css
new file mode 100644
index 0000000..4e7848d
--- /dev/null
+++ b/src/shared/spinner/spinner.styles.css
@@ -0,0 +1,41 @@
+.spinner {
+  width: 40px;
+  height: 40px;
+  display: block;
+  position: relative;
+  margin: 100px auto;
+}
+
+.double-bounce1, .double-bounce2 {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: #333;
+  opacity: 0.6;
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
+  animation: sk-bounce 2.0s infinite ease-in-out;
+}
+
+.double-bounce2 {
+  -webkit-animation-delay: -1.0s;
+  animation-delay: -1.0s;
+}
+
+@-webkit-keyframes sk-bounce {
+  0%, 100% { -webkit-transform: scale(0.0) }
+  50% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes sk-bounce {
+  0%, 100% {
+    transform: scale(0.0);
+    -webkit-transform: scale(0.0);
+  } 50% {
+      transform: scale(1.0);
+      -webkit-transform: scale(1.0);
+    }
+}
\ No newline at end of file
diff --git a/src/shared/spinner/spinner.view.html b/src/shared/spinner/spinner.view.html
new file mode 100644
index 0000000..0083290
--- /dev/null
+++ b/src/shared/spinner/spinner.view.html
@@ -0,0 +1,4 @@
+<div [hidden]="!isDelayedRunning" class="spinner">  
+    <div class="double-bounce1"></div>
+    <div class="double-bounce2"></div>
+</div>  
\ No newline at end of file
