diff --git a/client/client/routes.json b/client/client/routes.json
index 153c1449b..42ac8e101 100644
--- a/client/client/routes.json
+++ b/client/client/routes.json
@@ -341,6 +341,15 @@
             "menu": {
                 "icon": "web"
             }
+        },
+        {
+            "url" : "/history",
+            "state": "client.card.history",
+            "component": "vn-client-history",
+            "description": "History",
+            "menu": {
+                "icon": "history"
+            }
         }
     ]
 }
diff --git a/client/client/src/client.js b/client/client/src/client.js
index f6e2eff9f..a6cc97716 100644
--- a/client/client/src/client.js
+++ b/client/client/src/client.js
@@ -32,3 +32,4 @@ import './contact';
 import './sample/index';
 import './sample/create';
 import './web-payment';
+import './history';
diff --git a/client/client/src/history/index.html b/client/client/src/history/index.html
new file mode 100644
index 000000000..0eb658fe8
--- /dev/null
+++ b/client/client/src/history/index.html
@@ -0,0 +1,65 @@
+<vn-crud-model
+    vn-id="model"
+    url="/client/api/ClientLogs"
+    filter="$ctrl.filter"
+    link="{originFk: $ctrl.$stateParams.id}"
+    limit="20"
+    data="logs" on-data-change="$ctrl.onDataChange()">
+</vn-crud-model>
+
+<vn-vertical>
+    <vn-card pad-large>
+        <vn-vertical>
+            <vn-title>History</vn-title>
+            <vn-table model="model">
+                <vn-thead>
+                    <vn-tr>
+                        <vn-th field="creationDate" default-order="DESC">Date</vn-th>
+                        <vn-th field="model">Model</vn-th>
+                        <vn-th field="action">Action</vn-th>
+                        <vn-th field="userFk">Changed by</vn-th>
+                        <vn-th field="before">Before</vn-th>
+                        <vn-th field="after">After</vn-th>
+                    </vn-tr>
+                </vn-thead>
+                <vn-tbody>
+                    <vn-tr ng-repeat="clientLog in logs"> 
+                        <vn-td>
+                            {{::clientLog.creationDate | date:'dd/MM/yyyy HH:mm'}}
+                        </vn-td>
+                        <vn-td>
+                            {{::clientLog.model}}
+                        </vn-td>
+                        <vn-td translate>
+                            {{::clientLog.action}}
+                        </vn-td>
+                        <vn-td>
+                            {{::clientLog.user.name}}
+                        </vn-td>
+                        <vn-td>
+                            <vn-one ng-repeat="old in clientLog.oldProperties">
+                                <vn-label-value label="{{old.key}}"
+                                    value="{{old.value}}">
+                                </vn-label-value>
+                            </vn-one>
+                        </vn-td>
+                        <vn-td>
+                            <vn-one ng-repeat="new in clientLog.newProperties">
+                                <vn-label-value label="{{new.key}}"
+                                    value="{{new.value}}">
+                                </vn-label-value>
+                            </vn-one>
+                        </vn-td>
+                    </vn-tr>
+                </vn-tbody>
+                <vn-empty-rows ng-if="model.data.length === 0" translate>
+                    No results
+                </vn-empty-rows>
+            </vn-table>
+        </vn-vertical>
+        <vn-pagination
+            model="model"
+            scroll-selector="ui-view">
+        </vn-pagination>
+    </vn-card>
+</vn-vertical>
diff --git a/client/client/src/history/index.js b/client/client/src/history/index.js
new file mode 100644
index 000000000..dbabcbfe0
--- /dev/null
+++ b/client/client/src/history/index.js
@@ -0,0 +1,42 @@
+import ngModule from '../module';
+
+class Controller {
+    constructor($scope, $stateParams) {
+        this.$scope = $scope;
+        this.$stateParams = $stateParams;
+        this.filter = {
+            include: [{
+                relation: "user",
+                scope: {
+                    fields: ["name"]
+                }
+            }]
+        };
+    }
+
+    onDataChange() {
+        let logs = this.$scope.model.data;
+
+        logs.forEach(log => {
+            log.oldProperties = this.getInstance(log.oldInstance);
+            log.newProperties = this.getInstance(log.newInstance);
+        });
+    }
+
+    getInstance(instance) {
+        let properties = [];
+
+        Object.keys(instance).forEach(property => {
+            properties.push({key: property, value: instance[property]});
+        });
+
+        return properties;
+    }
+}
+
+Controller.$inject = ['$scope', '$stateParams'];
+
+ngModule.component('vnClientHistory', {
+    template: require('./index.html'),
+    controller: Controller
+});
diff --git a/client/client/src/history/index.spec.js b/client/client/src/history/index.spec.js
new file mode 100644
index 000000000..1ffc51758
--- /dev/null
+++ b/client/client/src/history/index.spec.js
@@ -0,0 +1,39 @@
+import './index';
+
+fdescribe('Client', () => {
+    describe('Component vnClientHistory', () => {
+        let $componentController;
+        let $scope;
+        let controller;
+
+        beforeEach(() => {
+            angular.mock.module('client');
+        });
+
+        beforeEach(angular.mock.inject((_$componentController_, $rootScope) => {
+            $componentController = _$componentController_;
+            $scope = $rootScope.$new();
+            controller = $componentController('vnClientHistory', {$scope: $scope});
+            controller.$scope.model = {data: [{newInstance: {id: 1}, oldInstance: {id: 2}}]}
+        }));
+
+        describe('onDataChange()', () => {
+            it('should call the function getInstance() twice', () => {
+                spyOn(controller, 'getInstance').and.callFake(() => {});
+                controller.onDataChange();
+
+                expect(controller.getInstance.calls.count()).toBe(2);
+                expect(controller.getInstance).toHaveBeenCalledWith({id: 1});
+                expect(controller.getInstance).toHaveBeenCalledWith({id: 2});
+            });
+        });
+
+        describe('getInstance(instance)', () => {
+            it('should transform the object given in to an array', () => {
+                let newInstance = controller.getInstance(controller.$scope.model.data[0].newInstance);
+
+                expect(newInstance).toEqual([{key: 'id', value: 1}]);
+            });
+        });
+    });
+});
diff --git a/client/client/src/history/locale/es.yml b/client/client/src/history/locale/es.yml
new file mode 100644
index 000000000..cbdb947ea
--- /dev/null
+++ b/client/client/src/history/locale/es.yml
@@ -0,0 +1,8 @@
+Model: Modelo
+Action: Acción
+Changed by: Cambiado por
+Before: Antes
+After: Despues
+update: Actualizar
+Create: Crear
+History: Historial
\ No newline at end of file