diff --git a/@salix/app/src/styles/colors.scss b/@salix/app/src/styles/colors.scss
index dc752f510..4ed587fbd 100644
--- a/@salix/app/src/styles/colors.scss
+++ b/@salix/app/src/styles/colors.scss
@@ -2,6 +2,7 @@
 $color-green: rgb(139,195,74);
 $color-orange: rgb(255,171,64);
 $color-dark-grey: #424242;
-$color-light-grey: gray;
+$color-light-grey: #e6e6e6;
 $color-white: white;
 $color-black: black;
+
diff --git a/@salix/core/src/core.js b/@salix/core/src/core.js
index 41698b37b..44d400fc3 100644
--- a/@salix/core/src/core.js
+++ b/@salix/core/src/core.js
@@ -28,6 +28,7 @@ export {NAME as TEXTFIELDBT,factory as textfieldbt} from './textfield/textfield.
 export {NAME as LABEL,directive as LabelDirective} from './label/label'
 export {NAME as LABELMT,factory as labelmt} from './label/label.mt'
 export {NAME as LABELBT,factory as labelbt} from './label/label.bt'
+export {NAME as SEARCHBAR,factory as searchbar} from './searchbar/searchbar'
 export {NAME as SEARCHBARMT,factory as searchbarmt} from './searchbar/searchbar.mt'
 export {NAME as SEARCHBARBT,factory as searchbarbt} from './searchbar/searchbar.bt'
 
@@ -49,6 +50,8 @@ export {NAME as DESCRIPTOR,
 	COMPONENT as DESCRIPTOR_COMPONENT} from './leftmenu/descriptor';
 export {NAME as LEFTMENU,
 	COMPONENT as LEFTMENU_COMPONENT} from './leftmenu/leftmenu';
+export {NAME as ITEMMENU,
+	COMPONENT as ITEMMENU_COMPONENT} from './leftmenu/itemmenu';
 export {NAME as CLIENT_TOP_BAR,
 	COMPONENT as CLIENT_TOP_BAR_COMPONENT} from './topbar/topbar';
 
diff --git a/@salix/core/src/leftmenu/actions.html b/@salix/core/src/leftmenu/actions.html
index f37977a05..69605d24c 100644
--- a/@salix/core/src/leftmenu/actions.html
+++ b/@salix/core/src/leftmenu/actions.html
@@ -1,5 +1,5 @@
 <vn-horizontal>
     <ul>
-        <li ng-repeat="item in $ctrl.items">{{item}}</li>
+        <vn-itemmenu ng-repeat="item in $ctrl.items" item = "item"></vn-item>
     </ul>
 </vn-horizontal>
diff --git a/@salix/core/src/leftmenu/itemmenu.html b/@salix/core/src/leftmenu/itemmenu.html
new file mode 100644
index 000000000..3af1d9742
--- /dev/null
+++ b/@salix/core/src/leftmenu/itemmenu.html
@@ -0,0 +1,7 @@
+<div>
+    <span>
+      <i class="material-icons">{{$ctrl.item.image}}</i>
+      <span>{{$ctrl.item.text}}</span>
+    </span>
+    <i class="material-icons">keyboard_arrow_right</i>
+</div>
\ No newline at end of file
diff --git a/@salix/core/src/leftmenu/itemmenu.js b/@salix/core/src/leftmenu/itemmenu.js
new file mode 100644
index 000000000..dec0ba0ab
--- /dev/null
+++ b/@salix/core/src/leftmenu/itemmenu.js
@@ -0,0 +1,13 @@
+import template from './itemmenu.html';
+import {module} from '../module';
+import * as util from '../util';
+
+const _NAME = 'itemmenu';
+export const NAME = util.getName(_NAME);
+export const COMPONENT = {
+    template: template,
+    bindings: {
+        item: '<'
+    }
+};
+module.component(NAME, COMPONENT);
diff --git a/@salix/core/src/leftmenu/leftmenu.js b/@salix/core/src/leftmenu/leftmenu.js
index 807b21b4f..3f07362bc 100644
--- a/@salix/core/src/leftmenu/leftmenu.js
+++ b/@salix/core/src/leftmenu/leftmenu.js
@@ -7,7 +7,9 @@ export const NAME = util.getName(_NAME);
 export const COMPONENT = {
     template: template,
     controller: function(){
-        this.items = ["Datos fiscales y facturación", "Consignatarios", "Acceso web"]
+        this.items = [{text: "Datos fiscales y facturación", image: "person"}, 
+                        {text: "Acceso web", image: "language"},
+                        {text: "Consignatarios", image: "local_shipping"}]
     }
 };
 module.component(NAME, COMPONENT);
diff --git a/@salix/core/src/topbar/topbar.html b/@salix/core/src/topbar/topbar.html
index a18f9fae1..167a02c93 100644
--- a/@salix/core/src/topbar/topbar.html
+++ b/@salix/core/src/topbar/topbar.html
@@ -1,5 +1,5 @@
-<vn-horizonal>
-    <vn-one>
+<vn-horizonal >
+    <vn-one class="bg-dark-bar">
         <vn-label text="Client"></vn-label>
         <vn-searchbar></vn-searchbar>
     </vn-one>
diff --git a/@salix/crud/src/client/databasic/index.js b/@salix/crud/src/client/databasic/index.js
index 65925db6f..4f23a56f6 100644
--- a/@salix/crud/src/client/databasic/index.js
+++ b/@salix/crud/src/client/databasic/index.js
@@ -1,7 +1,10 @@
 import template from './index.html';
 import {module} from '../../module';
 
-export const NAME = 'customerDataBasic';
+export const _NAME = 'customerDataBasic';
+//export const NAME = module.getName(_NAME);
+export const NAME = "vnCustomerDataBasic";
+
 export const COMPONENT = {
     template: template
 };
diff --git a/@salix/crud/src/client/index/index.html b/@salix/crud/src/client/index/index.html
index e09afc88d..ffe2f2af1 100644
--- a/@salix/crud/src/client/index/index.html
+++ b/@salix/crud/src/client/index/index.html
@@ -1,4 +1,11 @@
-<vn-vertical>
-    <vn-leftmenu></vn-leftmenu>
-    <vn-databasic></vn-databasic>
-</vn-vertical>
\ No newline at end of file
+<vn-vertical class="full-height">
+    <vn-topbar></vn-topbar>
+    <vn-horizontal class="full-height">
+        <vn-empty class="bg-content" style="width: 15em">
+            <vn-leftmenu></vn-leftmenu>
+        </vn-empty>
+        <vn-auto>
+            <vn-customer-data-basic></vn-customer-data-basic>
+        </vn-auto>
+    </vn-horizontal>
+</vn-vertical>
diff --git a/@salix/crud/src/client/routes.js b/@salix/crud/src/client/routes.js
index 896de59f1..e25da9fb5 100644
--- a/@salix/crud/src/client/routes.js
+++ b/@salix/crud/src/client/routes.js
@@ -1,7 +1,7 @@
 [{
     url: '/client/client-index',
     state: 'client-index',
-    template: '<vn-client-index></vn-client-index>',
+    template: '<vn-client-index full-height></vn-client-index>',
     module: 'crud',
     description: '',
     image: '',