diff --git a/modules/invoiceOut/front/card/index.html b/modules/invoiceOut/front/card/index.html
new file mode 100644
index 000000000..2c57ec4ad
--- /dev/null
+++ b/modules/invoiceOut/front/card/index.html
@@ -0,0 +1,7 @@
+<vn-main-block>
+    <vn-side-menu side="left">
+        <vn-invoice-out-descriptor invoice-out="$ctrl.invoiceOut"></vn-invoice-out-descriptor>
+        <vn-left-menu></vn-left-menu>
+    </vn-side-menu>
+    <div class="content-block" ui-view></div>
+</vn-main-block>
diff --git a/modules/invoiceOut/front/card/index.js b/modules/invoiceOut/front/card/index.js
new file mode 100644
index 000000000..78a2497c7
--- /dev/null
+++ b/modules/invoiceOut/front/card/index.js
@@ -0,0 +1,57 @@
+import ngModule from '../module';
+
+export default class Controller {
+    constructor($stateParams, $http) {
+        this.$http = $http;
+        this.$stateParams = $stateParams;
+        this.route = null;
+        this.filter = {
+            fields: [
+                'id',
+                'ref',
+                'issued',
+                'amount',
+                'clientFk',
+                'companyFk'
+            ],
+            where: {id: $stateParams.id},
+            include: [
+                {
+                    relation: 'company',
+                    scope: {
+                        fields: ['id', 'code']
+                    }
+                },
+                {
+                    relation: 'client',
+                    scope: {
+                        fields: ['id', 'socialName']
+                    }
+                }
+            ]
+        };
+    }
+
+    $onInit() {
+        this.getCard();
+    }
+
+    getCard() {
+        let json = encodeURIComponent(JSON.stringify(this.filter));
+        this.$http.get(`/client/api/InvoiceOuts?filter=${json}`).then(response => {
+            this.invoiceOut = response.data[0];
+            console.log(response.data[0]);
+        });
+    }
+
+    reload() {
+        this.getCard();
+    }
+}
+Controller.$inject = ['$stateParams', '$http'];
+
+ngModule.component('vnInvoiceOutCard', {
+    template: require('./index.html'),
+    controller: Controller
+});
+
diff --git a/modules/invoiceOut/front/descriptor/index.html b/modules/invoiceOut/front/descriptor/index.html
new file mode 100644
index 000000000..a37199635
--- /dev/null
+++ b/modules/invoiceOut/front/descriptor/index.html
@@ -0,0 +1,53 @@
+<div class="vn-descriptor">
+    <div class="header">
+        <a translate-attr="{title: 'Return to module index'}" ui-sref="invoiceOut.index">
+            <vn-icon icon="chevron_left"></vn-icon>
+        </a>
+        <a translate-attr="{title: 'Preview'}" ui-sref="invoiceOut.card.summary({id: $ctrl.invoiceOut.id})">
+            <vn-icon icon="desktop_windows"></vn-icon>
+        </a>
+    </div>
+    <div class="body">
+        <div class="attributes">
+            <h5>{{$ctrl.invoiceOut.ref}}</h5>
+            <vn-label-value label="Date" 
+                value="{{$ctrl.invoiceOut.issued | dateTime: 'dd/MM/yyyy'}}">
+            </vn-label-value>
+            <vn-label-value label="Agency" 
+                value="{{$ctrl.invoiceOut.amount}}">
+            </vn-label-value>
+            <vn-label-value label="Client" 
+                value="{{$ctrl.invoiceOut.clientFk}} - {{$ctrl.invoiceOut.client.socialName}}">
+            </vn-label-value>
+            <vn-label-value label="Company" 
+                value="{{$ctrl.invoiceOut.company.code}}">
+            </vn-label-value>
+        </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/invoiceOut/front/descriptor/index.js b/modules/invoiceOut/front/descriptor/index.js
new file mode 100644
index 000000000..777ab6bb1
--- /dev/null
+++ b/modules/invoiceOut/front/descriptor/index.js
@@ -0,0 +1,45 @@
+import ngModule from '../module';
+
+class Controller {
+    set invoiceOut(value) {
+        this._invoiceOut = value;
+
+        if (value) {
+            this._quicklinks = {
+                btnOne: {
+                    icon: 'icon-person',
+                    state: `client.card.summary({id: ${value.clientFk}})`,
+                    tooltip: 'Client card'
+                },
+                btnTwo: {
+                    icon: 'icon-ticket',
+                    state: `ticket.index({q: '{"refFk": "${value.ref}"}'})`,
+                    tooltip: 'Invoice ticket list'
+                }
+            };
+        }
+    }
+
+    get invoiceOut() {
+        return this._invoiceOut;
+    }
+
+    set quicklinks(value = {}) {
+        this._quicklinks = Object.assign(value, this._quicklinks);
+    }
+
+    get quicklinks() {
+        return this._quicklinks;
+    }
+}
+
+Controller.$inject = ['$http', '$state'];
+
+ngModule.component('vnInvoiceOutDescriptor', {
+    template: require('./index.html'),
+    bindings: {
+        invoiceOut: '<',
+        quicklinks: '<'
+    },
+    controller: Controller
+});
diff --git a/modules/invoiceOut/front/descriptor/locale/es.yml b/modules/invoiceOut/front/descriptor/locale/es.yml
new file mode 100644
index 000000000..63ea7b6b5
--- /dev/null
+++ b/modules/invoiceOut/front/descriptor/locale/es.yml
@@ -0,0 +1,4 @@
+Volume exceded: Volumen excedido
+Volume: Volumen
+Client card: Ficha del cliente
+Invoice ticket list: Listado de tickets de la factura
\ No newline at end of file
diff --git a/modules/invoiceOut/front/index.js b/modules/invoiceOut/front/index.js
index 6849e9df3..a4a6a0950 100644
--- a/modules/invoiceOut/front/index.js
+++ b/modules/invoiceOut/front/index.js
@@ -2,3 +2,5 @@ export * from './module';
 
 import './index/';
 import './search-panel';
+import './card';
+import './descriptor';
diff --git a/modules/invoiceOut/front/routes.json b/modules/invoiceOut/front/routes.json
index d8337ed26..f6ef89a7e 100644
--- a/modules/invoiceOut/front/routes.json
+++ b/modules/invoiceOut/front/routes.json
@@ -18,6 +18,12 @@
             "state": "invoiceOut.index",
             "component": "vn-invoice-out-index",
             "description": "Invoices out"
+        },
+        {
+            "url": "/:id",
+            "state": "invoiceOut.card",
+            "abstract": false,
+            "component": "vn-invoice-out-card"
         }
     ]
 }
\ No newline at end of file