diff --git a/modules/route/front/card/index.html b/modules/route/front/card/index.html
new file mode 100644
index 000000000..08b6c9de6
--- /dev/null
+++ b/modules/route/front/card/index.html
@@ -0,0 +1,7 @@
+<vn-main-block>
+    <vn-side-menu side="left">
+        <vn-route-descriptor route="$ctrl.route"></vn-route-descriptor>
+        <vn-left-menu></vn-left-menu>
+    </vn-side-menu>
+    <div class="content-block" ui-view></div>
+</vn-main-block>
diff --git a/modules/route/front/card/index.js b/modules/route/front/card/index.js
new file mode 100644
index 000000000..99441584e
--- /dev/null
+++ b/modules/route/front/card/index.js
@@ -0,0 +1,49 @@
+import ngModule from '../module';
+
+export default class Controller {
+    constructor($stateParams, $http) {
+        this.$http = $http;
+        this.$stateParams = $stateParams;
+        this.route = null;
+        this.filter = {
+            fields: ['id', 'agencyModeFk', 'created', 'm3', 'warehouseFk', 'description', 'vehicleFk'],
+            where: {id: $stateParams.id},
+            include: [
+                {
+                    relation: 'agencyMode',
+                    scope: {
+                        fields: ['id', 'name']
+                    }
+                },
+                {
+                    relation: 'vehicle',
+                    scope: {
+                        fields: ['id', 'm3']
+                    }
+                }
+            ]
+        };
+    }
+
+    $onInit() {
+        this.getCard();
+    }
+
+    getCard() {
+        let json = encodeURIComponent(JSON.stringify(this.filter));
+        this.$http.get(`/client/api/Routes?filter=${json}`).then(response => {
+            this.route = response.data[0];
+        });
+    }
+
+    reload() {
+        this.getCard();
+    }
+}
+Controller.$inject = ['$stateParams', '$http'];
+
+ngModule.component('vnRouteCard', {
+    template: require('./index.html'),
+    controller: Controller
+});
+
diff --git a/modules/route/front/descriptor/index.html b/modules/route/front/descriptor/index.html
new file mode 100644
index 000000000..9ccd7444b
--- /dev/null
+++ b/modules/route/front/descriptor/index.html
@@ -0,0 +1,63 @@
+<div class="vn-descriptor">
+    <div class="header">
+        <a translate-attr="{title: 'Return to module index'}" ui-sref="route.index">
+            <vn-icon icon="chevron_left"></vn-icon>
+        </a>
+        <a translate-attr="{title: 'Preview'}" ui-sref="route.card.summary({id: $ctrl.route.id})">
+            <vn-icon icon="desktop_windows"></vn-icon>
+        </a>
+    </div>
+    <div class="body">
+        <div class="attributes">
+            <h5>{{$ctrl.route.name}}</h5>
+            <vn-label-value label="Id" 
+                value="{{$ctrl.route.id}}">
+            </vn-label-value>
+            <vn-label-value label="Date" 
+                value="{{$ctrl.route.created | dateTime: 'dd/MM/yyyy'}}">
+            </vn-label-value>
+            <vn-label-value label="Agency" 
+                value="{{$ctrl.route.agencyMode.name}}">
+            </vn-label-value>
+            <vn-label-value label="Volume" 
+                value="{{$ctrl.route.m3 | dashIfEmpty}} / {{$ctrl.route.vehicle.m3  | dashIfEmpty}} m³">
+            </vn-label-value>
+            <vn-label-value label="Description" 
+                value="{{$ctrl.route.description}}">
+            </vn-label-value>
+        </div>
+        <div class="icons">
+            <vn-icon
+                vn-tooltip="Volume exceded"
+                icon="icon-volume"
+                ng-class="{bright: $ctrl.route.m3 > $ctrl.route.vehicle.m3}">
+            </vn-icon>
+        </div>
+        <div class="quicklinks">
+            <a ng-if="$ctrl.quicklinks.btnOne"
+                vn-tooltip="{{::$ctrl.quicklinks.btnOne.tooltip}}"
+                ui-sref="{{::$ctrl.quicklinks.btnOne.state}}" target="_blank">
+                <vn-icon 
+                    class="mdl-button mdl-js-button mdl-button--colored" 
+                    icon="{{::$ctrl.quicklinks.btnOne.icon}}">
+                </vn-icon>
+            </a>
+            <a ng-if="$ctrl.quicklinks.btnTwo"
+                vn-tooltip="{{::$ctrl.quicklinks.btnTwo.tooltip}}"
+                ui-sref="{{::$ctrl.quicklinks.btnTwo.state}}" target="_blank">
+                <vn-icon 
+                    class="mdl-button mdl-js-button mdl-button--colored" 
+                    icon="{{::$ctrl.quicklinks.btnTwo.icon}}">
+                </vn-icon>
+            </a>
+            <a ng-if="$ctrl.quicklinks.btnThree"
+                vn-tooltip="{{::$ctrl.quicklinks.btnThree.tooltip}}"
+                ui-sref="{{::$ctrl.quicklinks.btnThree.state}}" target="_blank">
+                <vn-icon 
+                    class="mdl-button mdl-js-button mdl-button--colored" 
+                    icon="{{::$ctrl.quicklinks.btnThree.icon}}">
+                </vn-icon>
+            </a>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/modules/route/front/descriptor/index.js b/modules/route/front/descriptor/index.js
new file mode 100644
index 000000000..5c47c864f
--- /dev/null
+++ b/modules/route/front/descriptor/index.js
@@ -0,0 +1,22 @@
+import ngModule from '../module';
+
+class Controller {
+    set quicklinks(value = {}) {
+        this._quicklinks = Object.assign(value, this._quicklinks);
+    }
+
+    get quicklinks() {
+        return this._quicklinks;
+    }
+}
+
+Controller.$inject = ['$http', '$state'];
+
+ngModule.component('vnRouteDescriptor', {
+    template: require('./index.html'),
+    bindings: {
+        route: '<',
+        quicklinks: '<'
+    },
+    controller: Controller
+});
diff --git a/modules/route/front/descriptor/locale/es.yml b/modules/route/front/descriptor/locale/es.yml
new file mode 100644
index 000000000..3f7596ae0
--- /dev/null
+++ b/modules/route/front/descriptor/locale/es.yml
@@ -0,0 +1,2 @@
+Volume exceded: Volumen excedido
+Volume: Volumen
\ No newline at end of file
diff --git a/modules/route/front/index.js b/modules/route/front/index.js
index 6849e9df3..f2f13ce9a 100644
--- a/modules/route/front/index.js
+++ b/modules/route/front/index.js
@@ -2,3 +2,6 @@ export * from './module';
 
 import './index/';
 import './search-panel';
+import './descriptor';
+import './summary';
+import './card';
diff --git a/modules/route/front/routes.json b/modules/route/front/routes.json
index 2671d3e0d..4dcbac150 100644
--- a/modules/route/front/routes.json
+++ b/modules/route/front/routes.json
@@ -3,7 +3,7 @@
     "name": "Routes",
     "icon": "icon-delivery",
     "validations" : true,
-    "dependencies": ["client", "worker"],
+    "dependencies": ["client", "worker", "ticket"],
     "routes": [
         {
             "url": "/route",
@@ -18,6 +18,21 @@
             "state": "route.index",
             "component": "vn-route-index",
             "description": "Routes"
+        },
+        {
+            "url": "/:id",
+            "state": "route.card",
+            "abstract": true,
+            "component": "vn-route-card"
+        }, 
+        {
+            "url": "/summary",
+            "state": "route.card.summary",
+            "component": "vn-route-summary",
+            "description": "Summary",
+            "params": {
+                "route": "$ctrl.route"
+            }
         }
     ]
 }
\ No newline at end of file