diff --git a/e2e/helpers/extensions.js b/e2e/helpers/extensions.js
index b6ea32a6cb..798d9f4ffc 100644
--- a/e2e/helpers/extensions.js
+++ b/e2e/helpers/extensions.js
@@ -625,6 +625,7 @@ let actions = {
 
         switch (tagName) {
         case 'vn-textfield':
+        case 'vn-account-number':
         case 'vn-datalist':
         case 'vn-input-number':
             await this.clearInput(selector);
@@ -667,6 +668,7 @@ let actions = {
 
         switch (tagName) {
         case 'vn-textfield':
+        case 'vn-account-number':
         case 'vn-autocomplete':
         case 'vn-worker-autocomplete':
         case 'vn-input-time':
diff --git a/e2e/paths/13-supplier/03_fiscal_data.spec.js b/e2e/paths/13-supplier/03_fiscal_data.spec.js
index 96977e7085..e5aa3e3b91 100644
--- a/e2e/paths/13-supplier/03_fiscal_data.spec.js
+++ b/e2e/paths/13-supplier/03_fiscal_data.spec.js
@@ -37,6 +37,7 @@ describe('Supplier fiscal data path', () => {
         const message = await page.sendForm(form, values);
 
         await page.reloadSection('supplier.card.fiscalData');
+
         const formValues = await page.fetchForm(form, Object.keys(values));
 
         expect(errorMessage.text).toContain('Invalid Tax number');
diff --git a/front/core/components/account-number/index.js b/front/core/components/account-number/index.js
new file mode 100644
index 0000000000..00ac5ac1df
--- /dev/null
+++ b/front/core/components/account-number/index.js
@@ -0,0 +1,22 @@
+import Textfield from '../textfield/textfield';
+import ngModule from '../../module';
+
+export default class AccountNumber extends Textfield {
+    constructor($element, $) {
+        super($element, $);
+        super.insertable = true;
+        super.maxLength = 10;
+        this.element.addEventListener('change', () => this.accountShortToStandard());
+    }
+
+    accountShortToStandard() {
+        this.field = this.field.replace('.', '0'.repeat(11 - this.field.length));
+        this.$.$emit('accountShortToStandard', this.field);
+    }
+}
+
+AccountNumber.$inject = ['$element', '$scope'];
+
+ngModule.vnComponent('vnAccountNumber', {
+    controller: AccountNumber,
+});
diff --git a/front/core/components/account-number/index.spec.js b/front/core/components/account-number/index.spec.js
new file mode 100644
index 0000000000..da9a98d6c5
--- /dev/null
+++ b/front/core/components/account-number/index.spec.js
@@ -0,0 +1,27 @@
+describe('Component vnAccountNumber', () => {
+    let controller;
+    let $element;
+
+    beforeEach(ngModule('vnCore'));
+
+    beforeEach(inject(($compile, $rootScope) => {
+        $element = $compile(`<vn-account-number></vn-account-number>`)($rootScope);
+        controller = $element.controller('vnAccountNumber');
+        controller.$ = {$emit: jest.fn()};
+    }));
+
+    afterEach(() => {
+        $element.remove();
+    });
+
+    describe('accountShortToStandard', () => {
+        it('should replace dots and emit event with account number', () => {
+            controller.field = '41.1';
+            const expectedAccountNumber = '4100000001';
+
+            controller.accountShortToStandard();
+
+            expect(controller.$.$emit).toHaveBeenCalledWith('accountShortToStandard', expectedAccountNumber);
+        });
+    });
+});
diff --git a/front/core/components/index.js b/front/core/components/index.js
index cfa46f0cbb..ae58057988 100644
--- a/front/core/components/index.js
+++ b/front/core/components/index.js
@@ -57,4 +57,5 @@ import './datalist';
 import './contextmenu';
 import './rating';
 import './smart-table';
+import './account-number';
 import './support-dialog';
diff --git a/modules/client/front/balance/create/index.html b/modules/client/front/balance/create/index.html
index 27b182c9ac..058cda4790 100644
--- a/modules/client/front/balance/create/index.html
+++ b/modules/client/front/balance/create/index.html
@@ -54,12 +54,12 @@
     </vn-horizontal>
     <vn-vertical ng-show="$ctrl.bankSelection.accountingType.code == 'compensation'">
         <h6 translate>Compensation</h6>
-        <vn-textfield
-            ng-model="$ctrl.receipt.compensationAccount"
-            vn-name="compensationAccount"
+        <vn-account-number
+            vn-one
             label="Compensation Account"
-            on-change="$ctrl.accountShortToStandard(value)">
-        </vn-textfield>
+            vn-name="compensationAccount"
+            ng-model="$ctrl.receipt.compensationAccount">
+        </vn-account-number>
     </vn-vertical>
     <vn-horizontal>
         <vn-textfield
diff --git a/modules/client/front/balance/create/index.js b/modules/client/front/balance/create/index.js
index 9113d76058..19a52bb6d0 100644
--- a/modules/client/front/balance/create/index.js
+++ b/modules/client/front/balance/create/index.js
@@ -127,9 +127,9 @@ class Controller extends Dialog {
         this.receipt.bankFk = value;
     }
 
-    accountShortToStandard(value) {
-        if (value) {
-            this.receipt.compensationAccount = value.replace('.', '0'.repeat(11 - value.length));
+    getClientOrSupplierReference(value) {
+        this.receipt.compensationAccount = value;
+        if (this.receipt.compensationAccount) {
             const params = {bankAccount: this.receipt.compensationAccount};
             this.$http.get(`Clients/getClientOrSupplierReference`, {params})
                 .then(res => {
diff --git a/modules/client/front/balance/create/index.spec.js b/modules/client/front/balance/create/index.spec.js
index fa6b48ea42..f9c11affc5 100644
--- a/modules/client/front/balance/create/index.spec.js
+++ b/modules/client/front/balance/create/index.spec.js
@@ -112,12 +112,34 @@ describe('Client', () => {
             });
         });
 
-        describe('accountShortToStandard()', () => {
-            it('should get de account in stardard format', () => {
-                const shortAccount = '4.3';
-                controller.accountShortToStandard(shortAccount);
+        describe('getClientOrSupplierReference', () => {
+            it('should update receipt description when compensation account is provided', async() => {
+                jest.spyOn(controller, '$t');
+                const mockValue = '4100000001';
+                const mockResponse = {
+                    clientId: '1',
+                    clientName: 'Client mocked'
+                };
 
-                expect(controller.receipt.compensationAccount).toEqual('4000000003');
+                $httpBackend
+                    .expectGET(`Clients/getClientOrSupplierReference?bankAccount=${mockValue}`)
+                    .respond(mockResponse);
+                controller.getClientOrSupplierReference(mockValue);
+                $httpBackend.flush();
+
+                expect(controller.receipt.compensationAccount).toBe(mockValue);
+                expect(controller.receipt.description).toBe('Client Compensation Reference');
+                expect(controller.$t).toHaveBeenCalledWith('Client Compensation Reference', {
+                    clientId: mockResponse.clientId,
+                    clientName: mockResponse.clientName
+                });
+            });
+
+            it('should update receipt description to empty string if compensation account is not provided', async() => {
+                controller.getClientOrSupplierReference('');
+
+                expect(controller.receipt.compensationAccount).toBe('');
+                expect(controller.receipt.description).toBe('');
             });
         });
 
diff --git a/modules/supplier/front/fiscal-data/index.html b/modules/supplier/front/fiscal-data/index.html
index 3fe67762fb..1a2d393342 100644
--- a/modules/supplier/front/fiscal-data/index.html
+++ b/modules/supplier/front/fiscal-data/index.html
@@ -58,15 +58,12 @@
             </vn-textfield>
         </vn-horizontal>
         <vn-horizontal>
-            <vn-textfield
+            <vn-account-number
                 vn-one
                 label="Account"
                 vn-name="account"
-                ng-model="$ctrl.supplier.account"
-                insertable="true"
-                max-length="10"
-                rule>
-            </vn-textfield>
+                ng-model="$ctrl.supplier.account">
+            </vn-account-number>
             <vn-autocomplete
                 vn-one
                 label="Sage tax type"