diff --git a/oasp4js-sample/src/app/components/crud/view/Crud.component.html b/oasp4js-sample/src/app/components/crud/view/Crud.component.html
index f5b1024..07eb3d3 100644
--- a/oasp4js-sample/src/app/components/crud/view/Crud.component.html
+++ b/oasp4js-sample/src/app/components/crud/view/Crud.component.html
@@ -1,3 +1,4 @@
+<h2>Tables</h2>
 <div>
   <filter-panel (filterValues) = "searchFilters($event)">
     <label> Number </label>
diff --git a/oasp4js-sample/src/app/components/header/view/Header.component.html b/oasp4js-sample/src/app/components/header/view/Header.component.html
index cc45837..ae960b2 100644
--- a/oasp4js-sample/src/app/components/header/view/Header.component.html
+++ b/oasp4js-sample/src/app/components/header/view/Header.component.html
@@ -3,10 +3,10 @@
 
   <ul *ngIf="logged" class = "header-tabs">
     <li role = "presentation">
-      <a> Tables </a>
+      <a [routerLink]="['/Tables']"> Tables </a>
     </li>
     <li role = "presentation">
-      <a> Kitchen </a>
+      <a [routerLink]="['/Kitchen']"> Kitchen </a>
     </li>
   </ul>
 
diff --git a/oasp4js-sample/src/app/components/header/view/Header.component.ts b/oasp4js-sample/src/app/components/header/view/Header.component.ts
index 9772428..91d19ee 100644
--- a/oasp4js-sample/src/app/components/header/view/Header.component.ts
+++ b/oasp4js-sample/src/app/components/header/view/Header.component.ts
@@ -1,12 +1,14 @@
 import { Component } from '@angular/core';
 import { EventEmitter } from '@angular/core';
 import {languages} from '../../../resources/languages/Languages.resource'
+import {ROUTER_DIRECTIVES} from "@angular/router";
 
 @Component({
     selector: 'header',
     templateUrl: 'app/components/header/view/Header.component.html',
     inputs: ["logged", "username"],
-    outputs: ["logOffEvent"]
+    outputs: ["logOffEvent"],
+    directives: [ROUTER_DIRECTIVES]
 })
 
 export class HeaderComponent {
diff --git a/oasp4js-sample/src/app/components/kitchen/view/Kitchen.component.html b/oasp4js-sample/src/app/components/kitchen/view/Kitchen.component.html
new file mode 100644
index 0000000..335450b
--- /dev/null
+++ b/oasp4js-sample/src/app/components/kitchen/view/Kitchen.component.html
@@ -0,0 +1 @@
+<h1>KITCHEN</h1>
diff --git a/oasp4js-sample/src/app/components/kitchen/view/Kitchen.component.ts b/oasp4js-sample/src/app/components/kitchen/view/Kitchen.component.ts
new file mode 100644
index 0000000..34ad4df
--- /dev/null
+++ b/oasp4js-sample/src/app/components/kitchen/view/Kitchen.component.ts
@@ -0,0 +1,9 @@
+import {Component} from '@angular/core'
+
+@Component({
+  selector:'kitchen',
+  templateUrl:'app/components/kitchen/view/Kitchen.component.html'
+})
+
+export class KitchenComponent{
+}
diff --git a/oasp4js-sample/src/app/oasp/oasp-ui/grid-table/view/Grid-table.component.html b/oasp4js-sample/src/app/oasp/oasp-ui/grid-table/view/Grid-table.component.html
index 4e36eb2..0f604ad 100644
--- a/oasp4js-sample/src/app/oasp/oasp-ui/grid-table/view/Grid-table.component.html
+++ b/oasp4js-sample/src/app/oasp/oasp-ui/grid-table/view/Grid-table.component.html
@@ -7,7 +7,8 @@
           </th>
       </thead>
       <tbody>
-          <tr *ngFor="let obj of rowsData" #row (click)=clickedRow(obj)>
+          <tr *ngFor="let obj of rowsData"
+          (click)=clickedRow(obj)>
               <td *ngFor= "let attribute of attributeNames"
                   [class.selected]="selection === obj">
                   {{ obj[attribute] }}
diff --git a/oasp4js-sample/src/app/oasp/oasp-ui/grid-table/view/Grid-table.component.ts b/oasp4js-sample/src/app/oasp/oasp-ui/grid-table/view/Grid-table.component.ts
index 77bcdc5..cc1889a 100644
--- a/oasp4js-sample/src/app/oasp/oasp-ui/grid-table/view/Grid-table.component.ts
+++ b/oasp4js-sample/src/app/oasp/oasp-ui/grid-table/view/Grid-table.component.ts
@@ -11,48 +11,47 @@ import {GridtableService} from '../service/Grid-table.service'
 
 export class GridTableComponent implements OnChanges{
 
-  headers;
-  attributeNames;
-  dataInput;
-
-  public rowsData = [];
-  public attributesNames = [];
-  public tableHeaders = [];
-
-  public selection;
-  objSelected = new EventEmitter();
-
-  public sortIconStyle = ["glyphicon glyphicon-chevron-down","glyphicon glyphicon-chevron-down","glyphicon glyphicon-chevron-down"];
-
-  constructor(private gridtableService : GridtableService){
-  }
-
-  ngOnChanges(){
-    this.attributesNames = this.attributeNames;
-    this.tableHeaders = this.headers;
-    this.rowsData = this.dataInput;
-  }
-
-  sortColumn(column:number, name:string){
-
-    if(this.sortIconStyle[column] === "glyphicon glyphicon-chevron-up"){
-        this.sortIconStyle[column] = "glyphicon glyphicon-chevron-down";
-        this.rowsData = this.gridtableService.getTablesOrderBy(-1, name, this.rowsData);
-    } else {
-        this.sortIconStyle[0] = "glyphicon glyphicon-chevron-down";
-        this.sortIconStyle[1] = "glyphicon glyphicon-chevron-down";
-        this.sortIconStyle[2] = "glyphicon glyphicon-chevron-down";
-        this.sortIconStyle[column] = "glyphicon glyphicon-chevron-up";
-        this.rowsData = this.gridtableService.getTablesOrderBy(1, name, this.rowsData);
+    headers;
+    attributeNames;
+    dataInput;
+
+    public rowsData = [];
+    public attributesNames = [];
+    public tableHeaders = [];
+
+    public selection;
+    objSelected = new EventEmitter();
+
+    public sortIconStyle = ["glyphicon glyphicon-chevron-down","glyphicon glyphicon-chevron-down","glyphicon glyphicon-chevron-down"];
+
+    constructor(private gridtableService : GridtableService){
+    }
+
+    ngOnChanges(){
+      this.attributesNames = this.attributeNames;
+      this.tableHeaders = this.headers;
+      this.rowsData = this.dataInput;
+    }
+
+    sortColumn(column:number, name:string){
+      if(this.sortIconStyle[column] === "glyphicon glyphicon-chevron-up"){
+          this.sortIconStyle[column] = "glyphicon glyphicon-chevron-down";
+          this.rowsData = this.gridtableService.getTablesOrderBy(-1, name, this.rowsData);
+      } else {
+          this.sortIconStyle[0] = "glyphicon glyphicon-chevron-down";
+          this.sortIconStyle[1] = "glyphicon glyphicon-chevron-down";
+          this.sortIconStyle[2] = "glyphicon glyphicon-chevron-down";
+          this.sortIconStyle[column] = "glyphicon glyphicon-chevron-up";
+          this.rowsData = this.gridtableService.getTablesOrderBy(1, name, this.rowsData);
+      }
     }
-  }
 
-  clickedRow(valor){
-    if(this.selection === valor){
-      this.selection = undefined;
-    } else {
-      this.selection = valor;
+    clickedRow(valor){
+      if(this.selection === valor){
+          this.selection = undefined;
+      } else {
+          this.selection = valor;
+      }
+      this.objSelected.emit(this.selection);
     }
-    this.objSelected.emit(this.selection);
-  }
 }
diff --git a/oasp4js-sample/src/app/oasp/oasp-ui/table-pagination/Pagination.component.ts b/oasp4js-sample/src/app/oasp/oasp-ui/table-pagination/Pagination.component.ts
index 26c151c..33dfa3a 100644
--- a/oasp4js-sample/src/app/oasp/oasp-ui/table-pagination/Pagination.component.ts
+++ b/oasp4js-sample/src/app/oasp/oasp-ui/table-pagination/Pagination.component.ts
@@ -34,9 +34,11 @@ export class PaginationComponent{
         this.rowsPerPage = this.initRowsPerPage;
       }
 
+      // This should be server-side
       this.showList = this.list.slice(this.rowsPerPage * (this.currentPage - 1), this.rowsPerPage * (this.currentPage - 1) + this.rowsPerPage);
       this.numberPages = Math.ceil(this.list.length / this.rowsPerPage);
       this.paginationList.emit(this.showList);
+      // -------
 
       if(this.showList.length <= 0){
         this.changePage(this.currentPage - 1, 0);
@@ -61,6 +63,7 @@ export class PaginationComponent{
       this.pageView = view;
     }
 
+    // This should be server-side
     if(this.rowsPerPage * (this.currentPage - 1) < this.rowsPerPage){
       this.showList = this.list.slice(0, this.rowsPerPage);
     } else{
diff --git a/oasp4js-sample/src/app/oasp4js-sample.component.html b/oasp4js-sample/src/app/oasp4js-sample.component.html
index 11f02e3..2bc6eee 100644
--- a/oasp4js-sample/src/app/oasp4js-sample.component.html
+++ b/oasp4js-sample/src/app/oasp4js-sample.component.html
@@ -1,4 +1,4 @@
-<header [logged]="login" [username] ="usuario.username" (logOffEvent)="login = $event"></header>
+<header [logged]="login" [username] ="usuario.username" (logOffEvent)="login = logOut($event)"></header>
 
 <div class = "app-body">
   <!-- LOGIN -->
@@ -7,9 +7,8 @@
   </div>
 
   <!-- APPLICATION -->
-  <div *ngIf="login">
-    <h2>Tables</h2>
-    <crud></crud>
+  <div [hidden]="!login">
+    <router-outlet></router-outlet>
   </div>
 </div>
 
diff --git a/oasp4js-sample/src/app/oasp4js-sample.component.ts b/oasp4js-sample/src/app/oasp4js-sample.component.ts
index 71cd6ca..00ee87a 100644
--- a/oasp4js-sample/src/app/oasp4js-sample.component.ts
+++ b/oasp4js-sample/src/app/oasp4js-sample.component.ts
@@ -3,26 +3,41 @@ import { Component } from '@angular/core';
 import { HeaderComponent} from './components/header/view/Header.component';
 import { LoginComponent} from './components/login/view/Login.component';
 import { CrudComponent } from './components/crud/view/Crud.component'
+import { KitchenComponent } from './components/kitchen/view/Kitchen.component'
 
 import { User } from './models/user/User.model'
 
+import {ROUTER_DIRECTIVES, Router, Routes} from "@angular/router";
+
+@Routes([
+    { path: '', component: CrudComponent },
+    { path: '/Tables', component: CrudComponent },
+    { path: '/Kitchen', component: KitchenComponent }
+])
+
 @Component({
   moduleId: module.id,
   selector: 'oasp4js-sample-app',
   templateUrl: 'oasp4js-sample.component.html',
   styleUrls: ['oasp4js-sample.component.css'],
-  directives: [LoginComponent, HeaderComponent, CrudComponent]
+  directives: [LoginComponent, HeaderComponent, CrudComponent, ROUTER_DIRECTIVES]
 })
+
+
 export class Oasp4jsSampleAppComponent{
   title = "oasp4js-sample works!";
   public login:boolean;
   public usuario: User = new User(0,"","");
 
+  constructor(private router: Router){}
+
   enviar(value){
     setTimeout( ()=>{this.login = value;},1);
+    this.router.navigate(['/Tables']);
   }
 
   logOut(){
     this.login = false;
+    this.router.navigate(['']);
   }
 }
diff --git a/oasp4js-sample/src/main.ts b/oasp4js-sample/src/main.ts
index f76fde9..a4c5fb1 100644
--- a/oasp4js-sample/src/main.ts
+++ b/oasp4js-sample/src/main.ts
@@ -1,6 +1,7 @@
 import { bootstrap } from '@angular/platform-browser-dynamic';
 // import {bootstrap} from 'angular2/platform/browser'
 import { enableProdMode } from '@angular/core';
+import { ROUTER_PROVIDERS, ROUTER_DIRECTIVES } from '@angular/router';
 import { Oasp4jsSampleAppComponent, environment } from './app/';
 //import {disableDeprecatedForms, provideForms} from "@angular/forms";
 
@@ -8,7 +9,6 @@ if (environment.production) {
   enableProdMode();
 }
 
-bootstrap(Oasp4jsSampleAppComponent/*,[
-  disableDeprecatedForms(),
-  provideForms()
-]*/);
+
+bootstrap(Oasp4jsSampleAppComponent, [ROUTER_PROVIDERS, ROUTER_DIRECTIVES])
+  .catch(err => console.error(err));