diff --git a/package.json b/package.json
index 5c4c859..c5d7079 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,7 @@
     "file-loader": "^6.0.0",
     "html-webpack-plugin": "^3.2.0",
     "rimraf": "^2.6.3",
+    "speed-measure-webpack-plugin": "^1.3.3",
     "temp-dir": "^2.0.0",
     "ts-loader": "^6.2.2",
     "typescript": "^3.8.3",
diff --git a/src/doc.ts b/src/doc.ts
index 6aa3c7b..cb3ba5d 100644
--- a/src/doc.ts
+++ b/src/doc.ts
@@ -8,12 +8,20 @@ import { Router } from '@vaadin/router';
 export class Doc extends moduleConnect(LitElement) {
   @property({ attribute: false })
   docId!: string;
-
+  //
   @property({ attribute: false })
   defaultAuthority!: string;
 
+  @property({ attribute: false })
+  perspectiveId: string;
+
+  @property({ attribute: false })
+  pageId: string;
+
   async firstUpdated() {
-    this.docId = window.location.pathname.split('/')[2];
+    const pathElements = window.location.pathname.split('/');
+
+    this.docId = pathElements[2];
 
     const eveesHttpProvider = this.requestAll(
       EveesModule.bindings.EveesRemote
@@ -29,11 +37,27 @@ export class Doc extends moduleConnect(LitElement) {
     Router.go(`/home`);
   }
 
+  goToPerspective(e) {
+    const { detail: { rootPerspective, perspective } } = e;    
+    Router.go(`/space/${rootPerspective}/${(!perspective) ? 'official' : perspective}`);
+  }
+
+  goToPage(e) {
+    const { detail: { official, pageId, perspective, rootPerspective } } = e;    
+    Router.go(`/space/${rootPerspective}/${(official) ? 'official' : perspective}/${pageId}`);
+  }
+
   render() {
     if (this.docId === undefined) return '';
-    return html`
+
+    // If property `external-routing` is removed, the component will nagivate internarlly
+
+    return html`    
       <wiki-drawer
-        @back=${() => this.goHome()}
+        @back=${() => this.goHome()}  
+        @select-perspective=${(e) => this.goToPerspective(e)}   
+        @select-page=${(e) => this.goToPage(e)}           
+        external-routing=${true}
         ref=${this.docId}
         default-authority=${this.defaultAuthority}
         .editableAuthorities=${[this.defaultAuthority]}
diff --git a/src/home.ts b/src/home.ts
index ad74674..7c40ee7 100644
--- a/src/home.ts
+++ b/src/home.ts
@@ -193,8 +193,8 @@ export class Home extends moduleConnect(LitElement) {
     this.go(perspectiveId);
   }
 
-  go(perspectiveId: string) {
-    Router.go(`/doc/${perspectiveId}`);
+  go(perspectiveId: string) {        
+    Router.go(`/space/${perspectiveId}/official`);
   }
 
   renderSpaces() {
diff --git a/src/init.ts b/src/init.ts
index 4d5e62e..b7a6b04 100644
--- a/src/init.ts
+++ b/src/init.ts
@@ -20,6 +20,8 @@ export const EveesEthereumBinding = 'evees-ethereum';
 
 export const initUprtcl = async () => {
   const c1host = 'https://api.intercreativity.io/uprtcl/1';
+  //const c1host = 'http://localhost:3000/uprtcl/1';
+  // Suggestion: to create an .env file in order to handle ports and hosts
   const ethHost = '';
 
   const ipfsConfig = {
diff --git a/src/router.ts b/src/router.ts
index a6b42de..39968bd 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -13,8 +13,13 @@ export function setupRouter(outlet: HTMLElement) {
       component: 'app-home',
     },
     {
-      path: '/doc/:ref',
-      component: 'app-doc',
+      path: '/space/:rootPerspective',
+      children: [
+        { path: '/official', component: 'app-doc' },
+        { path: '/official/:pageId', component: 'app-doc' },
+        { path: '/:perspectiveId', component: 'app-doc' },
+        { path: '/:perspectiveId/:pageId', component: 'app-doc' },
+      ],
     },
   ]);
 
diff --git a/webpack.config.js b/webpack.config.js
index 1565465..7c94671 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,7 +1,10 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
 
-module.exports = {
+const smp = new SpeedMeasurePlugin();
+
+module.exports = smp.wrap({
   output: {
     filename: 'main.[hash].bundle.js',
     path: path.resolve(__dirname, 'dist-pages'),
@@ -19,9 +22,7 @@ module.exports = {
       '@authentic/mwc-notched-outline': path.resolve(
         './node_modules/@authentic/mwc-notched-outline'
       ),
-      '@authentic/mwc-card': path.resolve(
-        './node_modules/@authentic/mwc-card'
-      ),
+      '@authentic/mwc-card': path.resolve('./node_modules/@authentic/mwc-card'),
       '@authentic/mwc-tooltip': path.resolve(
         './node_modules/@authentic/mwc-tooltip'
       ),
@@ -103,16 +104,19 @@ module.exports = {
     rules: [
       {
         test: /\.js$/,
+        exclude: /(node_modules)/,
         use: {
           loader: 'babel-loader',
           options: {
             presets: [['@babel/preset-env', { targets: { ie: '11' } }]],
             plugins: ['@babel/plugin-syntax-dynamic-import'],
+            cacheDirectory: true,
           },
         },
       },
       {
         test: /\.ts$/,
+        exclude: /(node_modules)/,
         use: {
           loader: 'ts-loader',
         },
@@ -125,4 +129,4 @@ module.exports = {
       minify: true,
     }),
   ],
-};
+});