diff --git a/src/app/app-nav.component.html b/src/app/app-nav.component.html
index 273bf218f76214dec691075adee0d79ae67fa1bb..2c9af03a913230215ed424958ea323b3236f59c4 100644
--- a/src/app/app-nav.component.html
+++ b/src/app/app-nav.component.html
@@ -9,7 +9,8 @@
   </li>
   <li class="file"
       *ngFor="let line of files"
-      (click)="action(line.fileName)">
+      [routerLink]="path + '/' + line.fileName"
+      [class.active]="isActivePage(path + '/' + line.fileName)">
     {{line.name}}
   </li>
 </ul>
\ No newline at end of file
diff --git a/src/app/app-nav.component.scss b/src/app/app-nav.component.scss
index da96726d26d4e48352e600c2eb11e36536e0c601..dba9cc0c32846793107575ef2547568a1fa44600 100644
--- a/src/app/app-nav.component.scss
+++ b/src/app/app-nav.component.scss
@@ -11,4 +11,8 @@ ul {
 .file:hover {
     background-color: antiquewhite;
     cursor: pointer;
+}
+
+.active {
+    color :red;
 }
\ No newline at end of file
diff --git a/src/app/app-nav.component.ts b/src/app/app-nav.component.ts
index db2c85952d2731019e914f187238ab0e02bad747..cd88f131836767090f4bcdbe9bdda2c7fce31392 100644
--- a/src/app/app-nav.component.ts
+++ b/src/app/app-nav.component.ts
@@ -1,5 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { DataValue, AppService } from './app.service';
+import { Router } from '@angular/router';
 
 @Component({
     selector: 'app-nav',
@@ -39,10 +40,9 @@ export class AppNavComponent {
         return list;
     }
 
-    constructor(private appService: AppService) { }
+    constructor(private router: Router) { }
 
-    action(path: string) {
-        this.appService.show(this.path + '/' + path);
+    isActivePage(page: any): boolean {
+        return page === this.router.url;
     }
-
 }
diff --git a/src/app/app-page.component.html b/src/app/app-page.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..9341b49dfefcd28743b6944c251f11fae99359be
--- /dev/null
+++ b/src/app/app-page.component.html
@@ -0,0 +1,19 @@
+<h1 *ngIf="page">
+  <span>{{page.fileName}}</span>
+</h1>
+<div *ngIf="page">
+  <div class="arine">
+    <span *ngFor="let nom of page.path">{{nom}}</span>
+  </div>
+  <div>
+    <browser-line></browser-line>
+    <element-line *ngIf="page.data.__compat"
+                  [element]="page.data.__compat"
+                  [name]="page.fileName"></element-line>
+    <ng-container *ngFor="let data of (page.data | ngForObject)">
+      <element-line *ngIf="data.key !== '__compat'"
+                    [element]="data.value.__compat"
+                    [name]="data.key"></element-line>
+    </ng-container>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/app-page.component.scss b/src/app/app-page.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c0d902226a4036e574c284be1eeb5108eb25b5f3
--- /dev/null
+++ b/src/app/app-page.component.scss
@@ -0,0 +1,14 @@
+
+h1 {
+    grid-area: title;
+    margin: 0;
+    padding: 10px 0;
+}
+
+div {
+    grid-area: page;
+}
+
+.arine span:not(:last-child)::after {
+    content: " » ";
+}
diff --git a/src/app/app-page.component.ts b/src/app/app-page.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9faaa303e00182b88b59fa2a326143d6dfeaf3b4
--- /dev/null
+++ b/src/app/app-page.component.ts
@@ -0,0 +1,34 @@
+import { Component, Input } from '@angular/core';
+import { DataValue, AppService, ChangePage } from './app.service';
+import { ActivatedRoute, UrlSegment } from '@angular/router';
+
+@Component({
+    selector: 'app-page',
+    templateUrl: './app-page.component.html',
+    styleUrls: ['./app-page.component.scss']
+})
+export class AppPageComponent {
+
+    page: ChangePage;
+
+    get data(): { [key: string]: DataValue } {
+        return this.appService.data;
+    }
+
+    isInit = false;
+
+    constructor(
+        private appService: AppService,
+        private route: ActivatedRoute
+    ) {
+        appService.onData.subscribe(() => {
+            this.isInit = true;
+        });
+        appService.onChangePage.subscribe((page: ChangePage) => {
+            this.page = page;
+        });
+        this.route.url.subscribe((segment: UrlSegment[]) => {
+            this.appService.show(segment.join('/'));
+        });
+    }
+}
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index d425c6f56b578db1e8d7f8fa2d6c90693ba5d4fb..c7c31f7e5997e2365c4c4cc629b67a07ed1766a2 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,8 +1,13 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { AppPageComponent } from './app-page.component';
 
-const routes: Routes = [];
-
+const routes: Routes = [
+  {
+    path: '**',
+    component: AppPageComponent
+  }
+];
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 36231a0a932230e36adf6f582f2e1fbd8acc8a4e..72912bc31208622a71996896bc320f62ef26a935 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,25 +1,6 @@
 <ng-container *ngIf="isInit">
   <nav>
-    <app-nav [data]="data">
-    </app-nav>
+    <app-nav [data]="data"></app-nav>
   </nav>
-  <h1 *ngIf="page">
-    <span>{{page.fileName}}</span>
-  </h1>
-  <div *ngIf="page">
-    <div class="arine">
-      <span *ngFor="let nom of page.path">{{nom}}</span>
-    </div>
-    <div>
-      <browser-line></browser-line>
-      <element-line *ngIf="page.data.__compat"
-                    [element]="page.data.__compat"
-                    [name]="page.fileName"></element-line>
-      <ng-container *ngFor="let data of (page.data | ngForObject)">
-        <element-line *ngIf="data.key !== '__compat'"
-                      [element]="data.value.__compat"
-                      [name]="data.key"></element-line>
-      </ng-container>
-    </div>
-  </div>
+  <router-outlet></router-outlet>
 </ng-container>
\ No newline at end of file
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 63dbc32211d1bca352afe8b3c2eab0ca47aebf55..7c28ad00684214a75980f7ab3e6a76f701cd0e28 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -17,17 +17,3 @@ nav {
     grid-area: nav;
     overflow: auto;
 }
-
-h1 {
-    grid-area: title;
-    margin: 0;
-    padding: 10px 0;
-}
-
-div {
-    grid-area: page;
-}
-
-.arine span:not(:last-child)::after {
-    content: " » ";
-}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 6fc534c9ce6d37ab6ee14a3eefcf065068223d4e..3cef1942668f24afc38773f56e777f0760ddf2c3 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,5 +1,6 @@
 import { Component, ViewEncapsulation } from '@angular/core';
-import { AppService, DataValue, ChangePage } from './app.service';
+import { ActivatedRoute, UrlSegment } from '@angular/router';
+import { AppService, DataValue } from './app.service';
 
 @Component({
   selector: 'app-root',
@@ -11,21 +12,17 @@ export class AppComponent {
   version = '0.1.0';
   title = 'web-table';
 
-  page: ChangePage;
-
   get data(): { [key: string]: DataValue } {
     return this.appService.data;
   }
 
   isInit = false;
 
-  constructor(private appService: AppService) {
+  constructor(
+    private appService: AppService
+  ) {
     appService.onData.subscribe(() => {
       this.isInit = true;
     });
-    appService.onChangePage.subscribe((page: ChangePage) => {
-      this.page = page;
-      console.log(page);
-    });
   }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 96137934fa1d3fbc99c2a0b94050a57325d93331..a779c8e2cec2e9bb0a1f9199c8a594c849a68593 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -4,6 +4,7 @@ import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppNavComponent } from './app-nav.component';
+import { AppPageComponent } from './app-page.component';
 import { AppComponent } from './app.component';
 import { BrowserLineComponent } from './browser-line.component';
 import { ElementLineComponent } from './element-line.component';
@@ -15,6 +16,7 @@ import { NgForObjectPipe } from './ngfor-object';
     AppNavComponent,
     ElementLineComponent,
     BrowserLineComponent,
+    AppPageComponent,
     NgForObjectPipe
   ],
   imports: [
diff --git a/src/app/app.service.ts b/src/app/app.service.ts
index 3b59b0c9cf7e0dd1b30eb9b41de76fbaa01c6839..60383a322d9bfb9f48171d46cf76df075f9998b3 100644
--- a/src/app/app.service.ts
+++ b/src/app/app.service.ts
@@ -49,8 +49,6 @@ export class AppService {
 
   parselist(data: string) {
     const list = data.split('\n');
-    // list.sort();
-
     // browser infos
     for (const line of list) {
       if (line) {
@@ -98,7 +96,6 @@ export class AppService {
             browsers[b.id] = b;
           });
           this.browsers = browsers;
-          console.log(browsers);
         }
       );
   }
@@ -108,11 +105,10 @@ export class AppService {
       this.onChangePage.next(this.pages[path]);
     } else {
       this.http
-        .get('./assets/browser-compat-data' + path, { responseType: 'json' })
+        .get('./assets/browser-compat-data/' + path, { responseType: 'json' })
         .subscribe(
           (data: BcdData) => {
             const frag = path.split('/');
-            frag.shift();
             const fileName = frag.pop().replace(/\.json/g, '');
             let part: any = data;
             for (let i = 0; i < frag.length; i++) {
diff --git a/src/app/browser-line.component.ts b/src/app/browser-line.component.ts
index 2d15cb07a3bd31114a4e9f20a175daa539f010c4..6bb761e6fafc3bea23ce51f82ec55a7176331cb6 100644
--- a/src/app/browser-line.component.ts
+++ b/src/app/browser-line.component.ts
@@ -9,17 +9,10 @@ import { BcdSupportDesc } from './browser-compat-data';
 })
 export class BrowserLineComponent {
 
-
-
     get browsers() {
-
-        console.log("browsers >", this.appService.browsers);
-
         return this.appService.browsers;
     }
 
     constructor(private appService: AppService) { }
 
-
-
 }
diff --git a/src/app/element-line.component.scss b/src/app/element-line.component.scss
index 6117b0a377bb13aa6a22622cb9bac6b27be95084..09542870068ee5f7071948d69e455e5f9845c742 100644
--- a/src/app/element-line.component.scss
+++ b/src/app/element-line.component.scss
@@ -9,6 +9,12 @@
     border: 1px solid #DDD;
     border-right: 0;
     padding: 5px 0;
+
+    & /deep/ code {
+        background-color: #ececec;
+        border-radius: 3px;
+        padding: 2px 4px;
+    }
 }
 
 .status span {
@@ -23,10 +29,6 @@
     display: inline-block;
     cursor: default;
 
-    &.deprecated {
-
-    }
-
     &.experimental {
         background-color: #cfa631;
     }