diff --git a/e2e/helpers/extensions.js b/e2e/helpers/extensions.js
index 2484728f46..93914d2ff7 100644
--- a/e2e/helpers/extensions.js
+++ b/e2e/helpers/extensions.js
@@ -228,6 +228,11 @@ let actions = {
         await this.waitForTextInField(selector, text);
     },
 
+    overwrite: async function(selector, text) {
+        await this.clearInput(selector);
+        await this.write(selector, text);
+    },
+
     waitToClick: async function(selector) {
         await this.waitForSelector(selector);
         await this.waitForFunction(checkVisibility, {}, selector);
diff --git a/e2e/helpers/selectors.js b/e2e/helpers/selectors.js
index 826f5b6ec8..9d6992be00 100644
--- a/e2e/helpers/selectors.js
+++ b/e2e/helpers/selectors.js
@@ -178,12 +178,11 @@ export default {
 
     },
     clientBalance: {
-        balanceButton: 'vn-left-menu a[ui-sref="client.card.balance.index"]',
         company: 'vn-client-balance-index vn-autocomplete[ng-model="$ctrl.companyId"]',
         newPaymentButton: `vn-float-button`,
         newPaymentBank: '.vn-dialog.shown vn-autocomplete[ng-model="$ctrl.receipt.bankFk"]',
         newPaymentAmount: '.vn-dialog.shown vn-input-number[ng-model="$ctrl.receipt.amountPaid"]',
-        saveButton: '.vn-dialog.shown vn-button[label="Save"]',
+        saveButton: '.vn-dialog.shown [response="accept"]',
         firstBalanceLine: 'vn-client-balance-index vn-tbody > vn-tr:nth-child(1) > vn-td:nth-child(8)'
 
     },
@@ -545,8 +544,8 @@ export default {
         firstPrice: 'vn-ticket-service vn-horizontal:nth-child(1) vn-input-number[ng-model="service.price"]',
         firstVatType: 'vn-ticket-service vn-autocomplete[label="Tax class"]',
         fistDeleteServiceButton: 'vn-ticket-service form vn-horizontal:nth-child(1) vn-icon-button[icon="delete"]',
-        newServiceTypeName: '.vn-dialog.shown vn-textfield[ng-model="$ctrl.newServiceType.name"]',
-        newServiceTypeExpense: '.vn-dialog.shown vn-autocomplete[ng-model="$ctrl.newServiceType.expenseFk"]',
+        newServiceTypeName: '.vn-dialog.shown vn-textfield[ng-model="newServiceType.name"]',
+        newServiceTypeExpense: '.vn-dialog.shown vn-autocomplete[ng-model="newServiceType.expenseFk"]',
         serviceLine: 'vn-ticket-service > form > vn-card > vn-one:nth-child(2) > vn-horizontal',
         saveServiceButton: 'button[type=submit]',
         saveServiceTypeButton: '.vn-dialog.shown tpl-buttons > button'
diff --git a/e2e/paths/02-client/14_balance.spec.js b/e2e/paths/02-client/14_balance.spec.js
index 87dc84a8ea..15486b72c0 100644
--- a/e2e/paths/02-client/14_balance.spec.js
+++ b/e2e/paths/02-client/14_balance.spec.js
@@ -67,9 +67,7 @@ describe('Client balance path', () => {
 
     it('should create a new payment that sets the balance to positive value', async() => {
         await page.waitToClick(selectors.clientBalance.newPaymentButton);
-        await page.waitFor(3000); // didn't manage to make this dynamic to allow clearInput to find the icon clear... :(
-        await page.clearInput(selectors.clientBalance.newPaymentAmount);
-        await page.write(selectors.clientBalance.newPaymentAmount, '100');
+        await page.overwrite(selectors.clientBalance.newPaymentAmount, '100');
         await page.waitToClick(selectors.clientBalance.saveButton);
         let result = await page.waitForLastSnackbar();
 
@@ -85,10 +83,7 @@ describe('Client balance path', () => {
 
     it('should create a new payment that sets the balance back to the original negative value', async() => {
         await page.waitToClick(selectors.clientBalance.newPaymentButton);
-        await page.waitFor(3000); // didn't manage to make this dynamic to allow clearInput to find the icon clear... :(
-        await page.waitForSelector('.vn-dialog.vn-popup.shown', {visible: true});
-        await page.clearInput(selectors.clientBalance.newPaymentAmount);
-        await page.write(selectors.clientBalance.newPaymentAmount, '-150');
+        await page.overwrite(selectors.clientBalance.newPaymentAmount, '-150');
         await page.waitToClick(selectors.clientBalance.saveButton);
         let result = await page.waitForLastSnackbar();
 
@@ -113,7 +108,6 @@ describe('Client balance path', () => {
 
     it('should now search for the user Petter Parker', async() => {
         await page.accessToSearchResult('Petter Parker');
-        await page.waitToClick(selectors.clientBalance.balanceButton);
         await page.waitForState('client.card.balance.index');
     });
 
diff --git a/e2e/paths/05-ticket/13_services.spec.js b/e2e/paths/05-ticket/13_services.spec.js
index 1a32ea9448..170841fda5 100644
--- a/e2e/paths/05-ticket/13_services.spec.js
+++ b/e2e/paths/05-ticket/13_services.spec.js
@@ -81,7 +81,6 @@ describe('Ticket services path', () => {
             await page.autocompleteSearch(selectors.ticketService.newServiceTypeExpense, 'Retencion');
             await page.waitToClick(selectors.ticketService.saveServiceTypeButton);
             await page.write(selectors.ticketService.firstPrice, '999');
-            await page.waitFor(1000); // time needed for the button to be clickable
             await page.waitToClick(selectors.ticketService.saveServiceButton);
             const result = await page.waitForLastSnackbar();
 
@@ -120,7 +119,6 @@ describe('Ticket services path', () => {
         it('should delete the service', async() => {
             await page.waitToClick(selectors.ticketService.fistDeleteServiceButton);
             await page.waitForNumberOfElements(selectors.ticketService.serviceLine, 0);
-            await page.waitFor(1000); // without this wait it fails to click the save button
             await page.waitToClick(selectors.ticketService.saveServiceButton);
             const result = await page.waitForLastSnackbar();
 
diff --git a/e2e/paths/09-invoice-out/02_descriptor.spec.js b/e2e/paths/09-invoice-out/02_descriptor.spec.js
index ceb2175e2d..5b0bee67e1 100644
--- a/e2e/paths/09-invoice-out/02_descriptor.spec.js
+++ b/e2e/paths/09-invoice-out/02_descriptor.spec.js
@@ -1,7 +1,7 @@
 import selectors from '../../helpers/selectors.js';
 import getBrowser from '../../helpers/puppeteer';
 
-describe('InvoiceOut descriptor path', () => {
+fdescribe('InvoiceOut descriptor path', () => {
     let browser;
     let page;
 
diff --git a/front/core/components/confirm/confirm.js b/front/core/components/confirm/confirm.js
index f187a3cb41..c0a1cc0c55 100644
--- a/front/core/components/confirm/confirm.js
+++ b/front/core/components/confirm/confirm.js
@@ -6,10 +6,7 @@ import './style.scss';
 export default class Confirm extends Dialog {
     constructor($element, $, $transclude) {
         super($element, $, $transclude);
-
-        let $template = angular.element(template);
-        this.fillSlot('body', $template.find('tpl-body'));
-        this.fillSlot('buttons', $template.find('tpl-buttons'));
+        this.fillSlots(template);
     }
 }
 
diff --git a/front/core/components/dialog/index.js b/front/core/components/dialog/index.js
index 7a7cb5f9fd..dfc1e5d3ad 100644
--- a/front/core/components/dialog/index.js
+++ b/front/core/components/dialog/index.js
@@ -21,6 +21,17 @@ export default class Dialog extends Popup {
         this.fillDefaultSlot(template);
     }
 
+    /**
+     * Fills the dialog slots, it is intended to be used by child classes.
+     *
+     * @param {String} template The HTML template string
+     */
+    fillSlots(template) {
+        let $template = angular.element(template);
+        this.fillSlot('body', $template.find('tpl-body'));
+        this.fillSlot('buttons', $template.find('tpl-buttons'));
+    }
+
     /**
      * Shows the dialog and optionally registers a handler for the response.
      *
@@ -68,7 +79,17 @@ export default class Dialog extends Popup {
     respond(response) {
         if (!this.shown)
             return this.$q.resolve();
+        return this.responseHandler(response);
+    }
 
+    /**
+     * The default response handler, it can be overriden by child classes to
+     * add custom logic.
+     *
+     * @param {String} response The response code
+     * @return {Boolean} The response handler return
+     */
+    responseHandler(response) {
         let handlerArgs = {
             $response: response,
             $data: this.data
diff --git a/front/salix/components/layout/style.scss b/front/salix/components/layout/style.scss
index 1a483ab961..b775ab4c03 100644
--- a/front/salix/components/layout/style.scss
+++ b/front/salix/components/layout/style.scss
@@ -79,6 +79,9 @@ vn-layout {
         & > .main-view {
             padding-right: $menu-width;
         }
+        [fixed-bottom-right] {
+            right: 4em + $menu-width;
+        }
     }
     & > .main-view {
         padding-top: $topbar-height;
@@ -89,6 +92,11 @@ vn-layout {
             padding: $spacing-md;
             box-sizing: border-box
         }
+        [fixed-bottom-right] {
+            position: fixed;
+            bottom: 2em;
+            right: 2em;
+        }
         &.ng-enter {
             vn-side-menu {
                 opacity: 0;
@@ -124,6 +132,9 @@ vn-layout {
             & > .main-view {
                 padding-right: 0;
             }
+            [fixed-bottom-right] {
+                right: 2em;
+            }
         }
         ui-view > * {
             padding-left: 0;
diff --git a/front/salix/styles/misc.scss b/front/salix/styles/misc.scss
index 1f2d799815..b2f28032e6 100644
--- a/front/salix/styles/misc.scss
+++ b/front/salix/styles/misc.scss
@@ -73,11 +73,6 @@ vn-bg-title {
     padding: $spacing-lg;
     max-width: 1000px;
 }
-html [fixed-bottom-right] {
-    position: fixed;
-    bottom: 2em;
-    right: 2em;
-}
 .list > vn-none {
     min-width: 60px;
 }
diff --git a/modules/client/front/balance/create/index.html b/modules/client/front/balance/create/index.html
index 36f45653fe..07c4de531b 100644
--- a/modules/client/front/balance/create/index.html
+++ b/modules/client/front/balance/create/index.html
@@ -1,11 +1,6 @@
-<vn-dialog
-    vn-id="dialog"
-    class="modal-form">
+<div>
     <tpl-body>
-        <mg-ajax path="receipts" options="vnPost"></mg-ajax>
-        <vn-horizontal class="header">
-            <h5><span translate>New payment</span></h5>
-        </vn-horizontal>
+        <h6 translate>New payment</h6>
         <div class="vn-pa-md">
             <vn-horizontal>
                 <vn-date-picker
@@ -13,7 +8,8 @@
                     label="Date" 
                     ng-model="$ctrl.receipt.payed">
                 </vn-date-picker>
-                <vn-autocomplete vn-one
+                <vn-autocomplete
+                    vn-one
                     url="Companies"
                     label="Company"
                     show-field="code"
@@ -22,7 +18,8 @@
                 </vn-autocomplete>
             </vn-horizontal>
             <vn-horizontal>
-                <vn-autocomplete vn-one 
+                <vn-autocomplete
+                    vn-one 
                     url="Banks"
                     label="Bank"
                     show-field="bank"
@@ -39,9 +36,9 @@
                 </vn-input-number>
             </vn-horizontal>
         </div>
-        <vn-horizontal class="vn-ma-md buttons-bar">
-            <vn-button vn-one label="Save" ng-click="$ctrl.save()"></vn-button>
-            <vn-button vn-one ng-click="$ctrl.hide()" label="Cancel"></vn-button>
-        </vn-horizontal>
     </tpl-body>
-</vn-dialog>
\ No newline at end of file
+    <tpl-buttons>
+        <input type="button" response="cancel" translate-attr="{value: 'Cancel'}"/>
+        <button response="accept" translate vn-focus>Accept</button>
+    </tpl-buttons>
+</div>
\ No newline at end of file
diff --git a/modules/client/front/balance/create/index.js b/modules/client/front/balance/create/index.js
index 1a7d8b97bb..c39536746e 100644
--- a/modules/client/front/balance/create/index.js
+++ b/modules/client/front/balance/create/index.js
@@ -1,10 +1,12 @@
 import ngModule from '../../module';
-import Section from 'salix/components/section';
-import './style.scss';
+import Dialog from 'core/components/dialog';
+import template from './index.html';
+
+class Controller extends Dialog {
+    constructor($element, $, $transclude) {
+        super($element, $, $transclude);
+        this.fillSlots(template);
 
-class Controller extends Section {
-    constructor($element, $) {
-        super($element, $);
         this.receipt = {
             payed: new Date(),
             clientFk: this.$params.id,
@@ -51,46 +53,35 @@ class Controller extends Section {
     }
 
     getAmountPaid() {
-        let filter = {
+        const filter = {
             where: {
                 clientFk: this.$params.id,
                 companyFk: this.receipt.companyFk
             }
         };
 
-        let query = `ClientRisks?filter=${JSON.stringify(filter)}`;
-        this.$http.get(query).then(res => {
+        this.$http.get(`ClientRisks`, {filter}).then(res => {
             this.receipt.amountPaid = (res.data.length && res.data[0].amount) || null;
         });
     }
 
-    show() {
-        this.$.dialog.show();
-    }
+    responseHandler(response) {
+        if (response !== 'accept')
+            return super.responseHandler(response);
 
-    hide() {
-        this.$.dialog.hide();
-    }
-
-    save() {
-        let query = `receipts`;
-        this.$http.post(query, this.receipt).then(() => {
-            this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
-            this.hide();
-            if (this.onResponse)
-                this.onResponse();
-        });
+        return this.$http.post(`Receipts`, this.receipt)
+            .then(() => this.vnApp.showSuccess(this.$t('Data saved!')))
+            .then(() => super.responseHandler(response));
     }
 }
 
-ngModule.component('vnClientBalanceCreate', {
-    template: require('./index.html'),
+ngModule.vnComponent('vnClientBalanceCreate', {
     controller: Controller,
+    transclude: true,
     bindings: {
         payed: '<?',
         bankFk: '<?',
         amountPaid: '<?',
-        onResponse: '&?',
         companyFk: '<?',
         description: '<?',
         clientFk: '<?'
diff --git a/modules/client/front/balance/create/style.scss b/modules/client/front/balance/create/style.scss
deleted file mode 100644
index 710de47b95..0000000000
--- a/modules/client/front/balance/create/style.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-vn-horizontal.buttons-bar{
-    text-align: center;
-}
\ No newline at end of file
diff --git a/modules/client/front/balance/index/index.html b/modules/client/front/balance/index/index.html
index 1e26607d12..dbd5889a22 100644
--- a/modules/client/front/balance/index/index.html
+++ b/modules/client/front/balance/index/index.html
@@ -10,35 +10,31 @@
     filter="$ctrl.filter"
     data="$ctrl.clientRisks">
 </vn-crud-model>
+<vn-side-menu side="right">
+    <div class="vn-pa-md">
+        <vn-autocomplete
+            vn-one
+            vn-id="company"
+            ng-model="$ctrl.companyId"
+            url="Companies"
+            show-field="code"
+            value-field="id"
+            label="Company">
+        </vn-autocomplete>
+        <div
+            class="totalBox"
+            style="text-align: center;"
+            ng-if="$ctrl.clientRisks.length">
+            <h6 translate>Total by company</h6>
+            <vn-label-value
+                ng-repeat="riskByCompany in $ctrl.clientRisks"
+                label="{{riskByCompany.company.code}}"
+                value="{{riskByCompany.amount | currency: 'EUR':2}}">
+            </vn-label-value>
+        </div>
+    </div>
+</vn-side-menu>
 <div class="vn-w-lg">
-    <vn-card class="vn-pa-md vn-mb-md">
-        <vn-horizontal
-            style="align-items: center;">
-            <vn-one></vn-one>
-            <vn-one>
-                <vn-autocomplete
-                    vn-id="company"
-                    class="dense"
-                    ng-model="$ctrl.companyId"
-                    url="Companies"
-                    show-field="code"
-                    value-field="id"
-                    label="Company">
-                </vn-autocomplete>
-            </vn-one>
-            <vn-one>
-                <div class="totalBox" ng-if="$ctrl.clientRisks.length">
-                    <h6 translate>Total by company</h6>
-                    <vn-auto ng-repeat="riskByCompany in $ctrl.clientRisks">   
-                        <vn-label-value
-                            label="{{riskByCompany.company.code}}"
-                            value="{{riskByCompany.amount | currency: 'EUR':2}}">
-                        </vn-label-value>
-                    </vn-auto> 
-                </div>
-            </vn-one>
-        </vn-horizontal>
-    </vn-card>
     <vn-data-viewer model="model">
         <vn-card>
         <vn-table model="model">
@@ -117,10 +113,12 @@
     vn-tooltip="New payment" 
     vn-bind="+"
     fixed-bottom-right
-    ng-click="$ctrl.openCreateDialog()">
+    ng-click="balanceCreate.show()">
 </vn-float-button>
 <vn-client-balance-create
-    vn-id="balanceCreateDialog">
+    vn-id="balance-create"
+    on-accept="$ctrl.getData()"
+    company-fk="$ctrl.companyId">
 </vn-client-balance-create>
 <vn-worker-descriptor-popover 
     vn-id="workerDescriptor"
diff --git a/modules/client/front/balance/index/index.js b/modules/client/front/balance/index/index.js
index 13840af92c..381800ad99 100644
--- a/modules/client/front/balance/index/index.js
+++ b/modules/client/front/balance/index/index.js
@@ -1,6 +1,5 @@
 import ngModule from '../../module';
 import Section from 'salix/components/section';
-import './style.scss';
 
 class Controller extends Section {
     constructor($element, $) {
@@ -74,12 +73,6 @@ class Controller extends Section {
         });
     }
 
-    openCreateDialog() {
-        this.$.balanceCreateDialog.companyFk = this.companyId;
-        this.$.balanceCreateDialog.onResponse = () => this.getData();
-        this.$.balanceCreateDialog.show();
-    }
-
     showWorkerDescriptor(event, workerFk) {
         if (event.defaultPrevented) return;
 
diff --git a/modules/client/front/balance/index/style.scss b/modules/client/front/balance/index/style.scss
deleted file mode 100644
index 74d3bc09b3..0000000000
--- a/modules/client/front/balance/index/style.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-
-@import "./variables";
-
-vn-client-balance-index {
-    .totalBox {
-        border: $border-thin-light;
-        text-align: left;
-        float: right
-    }
-}
\ No newline at end of file
diff --git a/modules/ticket/front/card/index.js b/modules/ticket/front/card/index.js
index 3872259a92..8dce23aa7b 100644
--- a/modules/ticket/front/card/index.js
+++ b/modules/ticket/front/card/index.js
@@ -57,13 +57,13 @@ class Controller extends ModuleCard {
             ],
         };
 
-        this.$http.get(`Tickets/${this.$params.id}`, {filter})
+        return this.$http.get(`Tickets/${this.$params.id}`, {filter})
             .then(res => this.onData(res.data));
     }
 
     onData(data) {
         this.ticket = data;
-        this.$http.get(`Clients/${data.client.id}/getDebt`)
+        return this.$http.get(`Clients/${data.client.id}/getDebt`)
             .then(res => this.ticket.client.debt = res.data.debt);
     }
 }
diff --git a/modules/ticket/front/descriptor/index.html b/modules/ticket/front/descriptor/index.html
index f47f3d6efa..2ea87839b8 100644
--- a/modules/ticket/front/descriptor/index.html
+++ b/modules/ticket/front/descriptor/index.html
@@ -153,20 +153,14 @@
 </vn-confirm>
 <vn-dialog
     vn-id="changeShippedDialog"
-    on-response="$ctrl.changeShipped($response)">
+    on-accept="$ctrl.changeShipped()">
     <tpl-body>
-        <div>
-            <h5 style="text-align: center">
-                <span translate>Change shipped hour</span>
-            </h5>
-            <vn-input-time
-                vn-id="newShipped"
-                vn-one
-                ng-model="$ctrl.newShipped"
-                label="Shipped hour"
-                vn-focus>
-            </vn-input-time>
-        </div>
+        <h6 translate>Change shipped hour</h6>
+        <vn-input-time
+            ng-model="$ctrl.newShipped"
+            label="Shipped hour"
+            vn-focus>
+        </vn-input-time>
     </tpl-body>
     <tpl-buttons>
         <input type="button" response="cancel" translate-attr="{value: 'Cancel'}"/>
diff --git a/modules/ticket/front/descriptor/index.js b/modules/ticket/front/descriptor/index.js
index d60e2ce670..28fdfe3a22 100644
--- a/modules/ticket/front/descriptor/index.js
+++ b/modules/ticket/front/descriptor/index.js
@@ -9,38 +9,45 @@ class Controller extends Component {
         this.moreOptions = [
             {
                 name: 'Add turn',
-                acl: 'buyer',
-                callback: this.showAddTurnDialog
-            },
-            {name: 'Show Delivery Note', callback: this.showDeliveryNote},
-            {name: 'Send Delivery Note', callback: this.confirmDeliveryNote},
-            {name: 'Delete ticket', callback: this.showDeleteTicketDialog},
-            {name: 'Change shipped hour', callback: this.showChangeShipped},
-            {name: 'SMS Pending payment', callback: this.sendPaymentSms},
-            {name: 'SMS Minimum import', callback: this.sendImportSms},
-            {
+                callback: this.showAddTurnDialog,
+                acl: 'buyer'
+            }, {
+                name: 'Show Delivery Note',
+                callback: this.showDeliveryNote
+            }, {
+                name: 'Send Delivery Note',
+                callback: this.confirmDeliveryNote
+            }, {
+                name: 'Delete ticket',
+                callback: this.showDeleteTicketDialog
+            }, {
+                name: 'Change shipped hour',
+                callback: this.showChangeShipped
+            }, {
+                name: 'SMS Pending payment',
+                callback: this.sendPaymentSms
+            }, {
+                name: 'SMS Minimum import',
+                callback: this.sendImportSms
+            }, {
                 name: 'Add stowaway',
                 callback: this.showAddStowaway,
                 show: () => this.canShowStowaway
-            },
-            {
+            }, {
                 name: 'Delete stowaway',
                 callback: this.showDeleteStowaway,
                 show: () => this.shouldShowDeleteStowaway()
-            },
-            {
+            }, {
                 name: 'Make invoice',
-                acl: 'invoicing',
                 callback: this.showMakeInvoiceDialog,
-                show: () => !this.hasInvoice()
-            },
-            {
+                show: () => !this.hasInvoice(),
+                acl: 'invoicing'
+            }, {
                 name: 'Regenerate invoice',
-                acl: 'invoicing',
                 callback: this.showRegenerateInvoiceDialog,
-                show: () => this.hasInvoice()
-            },
-            {
+                show: () => this.hasInvoice(),
+                acl: 'invoicing'
+            }, {
                 name: 'Recalculate components',
                 callback: this.comfirmRecalculateComponents,
                 show: () => this.isEditable
@@ -98,22 +105,20 @@ class Controller extends Component {
 
     showChangeShipped() {
         if (!this.isEditable) {
-            this.vnApp.showError(this.$translate.instant(`This ticket can't be modified`));
+            this.vnApp.showError(this.$t(`This ticket can't be modified`));
             return;
         }
+
         this.newShipped = this.ticket.shipped;
         this.$.changeShippedDialog.show();
     }
 
-    changeShipped(response) {
-        if (response === 'accept') {
-            let data = {shipped: this.newShipped};
-            let query = `Tickets/${this.ticket.id}/updateEditableTicket`;
-            this.$http.post(query, data).then(() => {
-                this.vnApp.showSuccess(this.$translate.instant('Shipped hour updated'));
-                this.cardReload();
-            });
-        }
+    changeShipped() {
+        let data = {shipped: this.newShipped};
+        let query = `Tickets/${this.ticket.id}/updateEditableTicket`;
+        this.$http.post(query, data)
+            .then(() => this.cardReload())
+            .then(() => this.vnApp.showSuccess(this.$t('Shipped hour updated')));
     }
 
     isTicketModule() {
@@ -161,13 +166,13 @@ class Controller extends Component {
         let params = {ticketFk: this.ticket.id, weekDay: day};
         this.$http.patch(`TicketWeeklies`, params).then(() => {
             this.$.addTurn.hide();
-            this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
+            this.vnApp.showSuccess(this.$t('Data saved!'));
         });
     }
 
     showDeleteTicketDialog() {
         if (!this.isEditable) {
-            this.vnApp.showError(this.$translate.instant('This ticket cant be deleted'));
+            this.vnApp.showError(this.$t('This ticket cant be deleted'));
             return;
         }
 
@@ -179,7 +184,7 @@ class Controller extends Component {
             const query = `Tickets/${this.ticket.id}/setDeleted`;
             this.$http.post(query).then(() => {
                 this.$state.go('ticket.index');
-                this.vnApp.showSuccess(this.$translate.instant('Ticket deleted'));
+                this.vnApp.showSuccess(this.$t('Ticket deleted'));
             });
         }
     }
@@ -213,7 +218,7 @@ class Controller extends Component {
     deleteStowaway() {
         const query = `Tickets/${this.ticket.id}/deleteStowaway`;
         this.$http.post(query).then(res => {
-            this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
+            this.vnApp.showSuccess(this.$t('Data saved!'));
             this.cardReload();
         });
     }
@@ -236,7 +241,7 @@ class Controller extends Component {
             ticketId: this.ticket.id
         };
         this.$http.get(`email/delivery-note`, {params}).then(
-            () => this.vnApp.showMessage(this.$translate.instant('Notification sent!'))
+            () => this.vnApp.showMessage(this.$t('Notification sent!'))
         );
     }
 
@@ -245,13 +250,13 @@ class Controller extends Component {
             ticketId: this.ticket.id,
             created: this.ticket.created
         };
-        const message = this.$params.message || this.$translate.instant('Minimum is needed', params);
+        const message = this.$params.message || this.$t('Minimum is needed', params);
         this.newSMS = {message};
         this.showSMSDialog();
     }
 
     sendPaymentSms() {
-        const message = this.$params.message || this.$translate.instant('Make a payment');
+        const message = this.$params.message || this.$t('Make a payment');
         this.newSMS = {message};
         this.showSMSDialog();
     }
@@ -284,7 +289,7 @@ class Controller extends Component {
         if (response === 'accept') {
             const query = `Tickets/${this.ticket.id}/makeInvoice`;
             this.$http.post(query).then(() => {
-                this.vnApp.showSuccess(this.$translate.instant('Ticket invoiced'));
+                this.vnApp.showSuccess(this.$t('Ticket invoiced'));
                 this.$state.reload();
             });
         }
@@ -308,7 +313,7 @@ class Controller extends Component {
             const invoiceId = this.ticket.invoiceOut.id;
             const query = `InvoiceOuts/${invoiceId}/regenerate`;
             this.$http.post(query).then(() => {
-                const snackbarMessage = this.$translate.instant(
+                const snackbarMessage = this.$t(
                     `Invoice sent for a regeneration, will be available in a few minutes`);
                 this.vnApp.showSuccess(snackbarMessage);
             });
@@ -341,7 +346,7 @@ class Controller extends Component {
     recalculateComponents() {
         const query = `Tickets/${this.ticket.id}/recalculateComponents`;
         this.$http.post(query).then(res => {
-            this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
+            this.vnApp.showSuccess(this.$t('Data saved!'));
         });
     }
 }
diff --git a/modules/ticket/front/descriptor/index.spec.js b/modules/ticket/front/descriptor/index.spec.js
index 3f4b876828..4f43ac0104 100644
--- a/modules/ticket/front/descriptor/index.spec.js
+++ b/modules/ticket/front/descriptor/index.spec.js
@@ -157,8 +157,7 @@ describe('Ticket Component vnTicketDescriptor', () => {
             jest.spyOn(controller.vnApp, 'showSuccess');
             jest.spyOn(controller, 'cardReload');
 
-            $httpBackend.when('POST', 'Tickets/12/updateEditableTicket').respond();
-            $httpBackend.expect('POST', 'Tickets/12/updateEditableTicket').respond();
+            $httpBackend.expectRoute('POST', 'Tickets/:id/updateEditableTicket').respond();
             controller.changeShipped('accept');
             $httpBackend.flush();
 
diff --git a/modules/ticket/front/services/index.html b/modules/ticket/front/services/index.html
index 419110eacb..57146661cc 100644
--- a/modules/ticket/front/services/index.html
+++ b/modules/ticket/front/services/index.html
@@ -22,7 +22,7 @@
                     <vn-icon-button
                         icon="add_circle"
                         vn-tooltip="New service type"
-                        ng-click="$ctrl.newServiceTypeDialog($index, $event)"
+                        ng-click="$ctrl.onNewServiceTypeClick(service, $event)"
                         vn-acl="administrative"
                         style="padding: 0;">
                     </vn-icon-button>
@@ -72,26 +72,28 @@
 
 <!-- Create service type dialog -->
 <vn-dialog class="edit" 
-    vn-id="createServiceTypeDialog"
-    on-open="$ctrl.onNewServiceTypeOpen()"
-    on-response="$ctrl.onNewServiceTypeResponse($response)">
+    vn-id="newServiceTypeDialog"
+    on-accept="$ctrl.onNewServiceTypeAccept($data)"
+    on-close="newServiceType = null">
     <tpl-body>
         <h5 class="vn-py-sm" translate>New service type</h5>
         <vn-horizontal>
             <vn-textfield
                 vn-one
                 label="Description"
-                ng-model="$ctrl.newServiceType.name"
+                ng-model="newServiceType.name"
                 vn-focus>
             </vn-textfield>
         </vn-horizontal>
         <vn-horizontal>
-            <vn-autocomplete vn-one vn-focus
+            <vn-autocomplete
+                vn-one
+                vn-focus
                 url="Expenses"
                 label="Expense"
                 show-field="name"
                 value-field="id"
-                ng-model="$ctrl.newServiceType.expenseFk">
+                ng-model="newServiceType.expenseFk">
             </vn-autocomplete>
         </vn-horizontal>
     </tpl-body>
diff --git a/modules/ticket/front/services/index.js b/modules/ticket/front/services/index.js
index 8627360c6b..efb62fe2e4 100644
--- a/modules/ticket/front/services/index.js
+++ b/modules/ticket/front/services/index.js
@@ -17,43 +17,33 @@ class Controller extends Section {
     }
 
     add() {
-        if (this.defaultTaxClass) {
-            this.$.model.insert({
-                taxClassFk: this.defaultTaxClass.id,
-                quantity: 1,
-                ticketFk: this.$params.id
-            });
-        }
+        this.$.model.insert({
+            taxClassFk: this.defaultTaxClass.id,
+            quantity: 1,
+            ticketFk: this.$params.id
+        });
     }
 
-    onNewServiceTypeOpen() {
-        this.newServiceType = {};
-    }
-
-    newServiceTypeDialog(elementIndex, event) {
+    onNewServiceTypeClick(service, event) {
         event.preventDefault();
-        this.$.createServiceTypeDialog.show();
-        this.currentServiceIndex = elementIndex;
+        this.$.newServiceType = {};
+        this.$.newServiceTypeDialog.show(service);
     }
 
-    onNewServiceTypeResponse(response) {
-        if (response == 'accept') {
-            if (!this.newServiceType.name)
-                throw new UserError(`Name can't be empty`);
+    onNewServiceTypeAccept(service) {
+        if (!this.$.newServiceType.name)
+            throw new UserError(`Name can't be empty`);
 
-            this.$http.post(`TicketServiceTypes`, this.newServiceType).then(response => {
-                this.services[this.currentServiceIndex].ticketServiceTypeFk = response.data.id;
-            });
-        }
+        return this.$http.post(`TicketServiceTypes`, this.$.newServiceType)
+            .then(res => service.ticketServiceTypeFk = res.data.id);
     }
 
     onSubmit() {
         this.$.watcher.check();
 
-        this.$.model.save().then(() => {
-            this.$.watcher.notifySaved();
-            this.$.model.refresh();
-        });
+        this.$.model.save()
+            .then(() => this.$.model.refresh())
+            .then(() => this.$.watcher.notifySaved());
     }
 }
 
diff --git a/modules/ticket/front/services/index.spec.js b/modules/ticket/front/services/index.spec.js
index 30bcd821a7..10e3ad47ed 100644
--- a/modules/ticket/front/services/index.spec.js
+++ b/modules/ticket/front/services/index.spec.js
@@ -3,17 +3,16 @@ import './index.js';
 describe('Ticket component vnTicketService', () => {
     let controller;
     let $httpBackend;
-    let $httpParamSerializer;
     let $scope;
     let $element;
 
     beforeEach(ngModule('ticket'));
 
-    beforeEach(angular.mock.inject(($componentController, _$httpBackend_, _$httpParamSerializer_, $rootScope) => {
-        $element = angular.element(`<div></div>`);
+    beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $rootScope) => {
         $httpBackend = _$httpBackend_;
-        $httpParamSerializer = _$httpParamSerializer_;
         $scope = $rootScope.$new();
+
+        $element = angular.element(`<div></div>`);
         controller = $componentController('vnTicketService', {$scope, $element});
     }));
 
@@ -32,13 +31,13 @@ describe('Ticket component vnTicketService', () => {
         });
     });
 
-    describe('onNewServiceTypeResponse', () => {
-        it(`should throw an error if the new service description is empty`, () => {
-            controller.newServiceType = {name: undefined};
+    describe('onNewServiceTypeAccept', () => {
+        it(`should throw an error if the new service type name is empty`, () => {
+            $scope.newServiceType = {};
 
             let error;
             try {
-                controller.onNewServiceTypeResponse('accept');
+                controller.onNewServiceTypeAccept({});
             } catch (e) {
                 error = e.message;
             }
@@ -47,18 +46,22 @@ describe('Ticket component vnTicketService', () => {
         });
 
         it('should set the description of the selected service upon service type creation', () => {
-            controller.services = [
-                {id: 1, description: 'not too great service'}
-            ];
+            const service = {
+                id: 1,
+                quantity: 10
+            };
+            $scope.newServiceType = {
+                name: 'Totally new stuff'
+            };
 
-            controller.newServiceType = {name: 'totally new stuff'};
-            controller.currentServiceIndex = 0;
-
-            $httpBackend.when('POST', 'TicketServiceTypes').respond({id: 4001, name: 'totally new stuff'});
-            controller.onNewServiceTypeResponse('accept');
+            $httpBackend.when('POST', 'TicketServiceTypes').respond({
+                id: 4001,
+                name: 'Totally new stuff'
+            });
+            controller.onNewServiceTypeAccept(service);
             $httpBackend.flush();
 
-            expect(controller.services[0].ticketServiceTypeFk).toEqual(4001);
+            expect(service.ticketServiceTypeFk).toEqual(4001);
         });
     });
 });