diff --git a/@salix/app/src/components.js b/@salix/app/src/components.js
index 454d0573f5..562f76c328 100644
--- a/@salix/app/src/components.js
+++ b/@salix/app/src/components.js
@@ -2,4 +2,5 @@ export {NAME as VN_MAINMENU, COMPONENT as VN_MAINMENU_COMPONENT} from './compone
 export {NAME as ACTIONS, COMPONENT as ACTIONS_COMPONENT} from './components/left-menu/actions';
 export {NAME as LEFT_MENU, COMPONENT as LEFTMENU_COMPONENT} from './components/left-menu/left-menu';
 export {NAME as MENU_ITEM, COMPONENT as MENU_ITEM_COMPONENT} from './components/left-menu/menu-item';
-export {NAME as CLIENT_TOPBAR, COMPONENT as CLIENT_TOPBAR_COMPONENT} from './components/topbar/topbar';
+export {NAME as TOPBAR, COMPONENT as TOPBAR_COMPONENT} from './components/topbar/topbar';
+export {NAME as SEARCHBAR, COMPONENT as SEARCHBAR_COMPONENT} from './components/searchbar/searchbar';
diff --git a/@salix/app/src/components/main-menu/main-menu.html b/@salix/app/src/components/main-menu/main-menu.html
index de64dde63b..a6c095acdf 100644
--- a/@salix/app/src/components/main-menu/main-menu.html
+++ b/@salix/app/src/components/main-menu/main-menu.html
@@ -1,6 +1,9 @@
 <div style="position: fixed; top: 0; right: 0; padding: 1em 1.5em; color: white; z-index: 10;">
     <i class="material-icons" title="Logout" ng-click="$ctrl.onLogoutClick()">exit_to_app</i>
-    <i class="material-icons" title="Applications">apps</i>
+    <i class="material-icons" id="apps" style="cursor: pointer;">apps</i>
     <i class="material-icons" title="Notifications">notifications</i>
     <i class="material-icons" title="Profile" style="font-size: 35px;">account_circle</i>
+    <ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right user-menu" pad-medium for="apps" >
+         <a ui-sref="clients"><i class="material-icons" id="clients">person</i></a>
+    </ul>
 </div>
\ No newline at end of file
diff --git a/@salix/app/src/components/searchbar/searchbar.html b/@salix/app/src/components/searchbar/searchbar.html
new file mode 100644
index 0000000000..4f376c4007
--- /dev/null
+++ b/@salix/app/src/components/searchbar/searchbar.html
@@ -0,0 +1,6 @@
+<vn-horizontal>
+     <vn-textfield vn-one label="search"></vn-textfield>
+     <i class="material-icons" id="down_menu">keyboard_arrow_down</i>
+     <vn-icon-button icon="search"></vn-icon-button>
+</vn-horizontal>
+    
\ No newline at end of file
diff --git a/@salix/app/src/components/searchbar/searchbar.js b/@salix/app/src/components/searchbar/searchbar.js
new file mode 100644
index 0000000000..0d9e5efc2f
--- /dev/null
+++ b/@salix/app/src/components/searchbar/searchbar.js
@@ -0,0 +1,11 @@
+import template from './searchbar.html';
+import {module} from '../../module';
+
+export const NAME = 'vnSearchbar'
+export const COMPONENT = {
+    template: template,
+    controller: function(){
+        
+    }
+};
+module.component(NAME, COMPONENT);
diff --git a/@salix/app/src/components/topbar/topbar.html b/@salix/app/src/components/topbar/topbar.html
index e9238e0f26..fd4ce57ec4 100644
--- a/@salix/app/src/components/topbar/topbar.html
+++ b/@salix/app/src/components/topbar/topbar.html
@@ -1,8 +1,2 @@
-<vn-horizontal style="color: white; height: 100%;" class="bg-dark-bar">
-    <vn-one>
-        <h3 style="float: left;" class="pad-large-left">Client</h3>
-    </vn-one>
-    <vn-two>
-           <vn-searchbar ></vn-searchbar>
-    </vn-two>
-</vn-horizontal>
\ No newline at end of file
+<header class="mdl-layout__header mdl-layout__header--scroll bg-dark-bar">
+</header>
\ No newline at end of file
diff --git a/@salix/core/src/core.js b/@salix/core/src/core.js
index 12ff9e4128..5949f15c2e 100644
--- a/@salix/core/src/core.js
+++ b/@salix/core/src/core.js
@@ -23,9 +23,6 @@ export {NAME as TEXTFIELD_BT, factory as textfieldBt} from './textfield/textfiel
 export {NAME as LABEL, directive as LabelDirective} from './label/label'
 export {NAME as LABEL_MDL, factory as labelMdl} from './label/label.mdl'
 export {NAME as LABEL_BT, factory as labelBt} from './label/label.bt'
-export {NAME as SEARCHBAR, directive as searchbar} from './searchbar/searchbar'
-export {NAME as SEARCHBAR_MDL, factory as searchbarMdl} from './searchbar/searchbar.mdl'
-export {NAME as SEARCHBAR_BT, factory as searchbarBt} from './searchbar/searchbar.bt'
 export {NAME as ICON_BUTTON, directive as IconButtonDirective} from './icon-button/icon-button'
 export {NAME as ICON_BUTTON_MDL, factory as iconButtonMdl} from './icon-button/icon-button.mdl'
 export {NAME as PASSWORD, directive as PasswordDirective} from './password/password'
diff --git a/@salix/core/src/searchbar/searchbar.bt.html b/@salix/core/src/searchbar/searchbar.bt.html
deleted file mode 100644
index 6f11ff1d29..0000000000
--- a/@salix/core/src/searchbar/searchbar.bt.html
+++ /dev/null
@@ -1 +0,0 @@
-<!-- por definir -->
diff --git a/@salix/core/src/searchbar/searchbar.bt.js b/@salix/core/src/searchbar/searchbar.bt.js
deleted file mode 100644
index 6c466b3f2c..0000000000
--- a/@salix/core/src/searchbar/searchbar.bt.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import {module as _module} from '../module';
-import * as util from '../util';
-import * as constant from '../constants';
-import template from './searchbar.bt.html';
-
-const _NAME = 'searchbar';
-const DEFAULT_TEXT = 'Search';
-
-export const NAME = util.getFactoryName(_NAME + constant.BOOTSTRAP_FRAMEWORK);
-
-export function factory() {
-    return {
-        template: template,
-        default: {
-            text: DEFAULT_TEXT
-        }
-    };
-}
-
-_module.factory(NAME, factory);
diff --git a/@salix/core/src/searchbar/searchbar.js b/@salix/core/src/searchbar/searchbar.js
deleted file mode 100644
index 04c351fd8b..0000000000
--- a/@salix/core/src/searchbar/searchbar.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import {module as _module} from '../module';
-import * as resolveFactory from '../resolveDefaultComponents';
-import * as util from '../util';
-
-const _NAME = 'searchbar';
-export const NAME = util.getName(_NAME);
-
-directive.$inject = [resolveFactory.NAME];
-export function directive(resolve) {
-    return {
-        require: 'E',
-        template: function(_, attr) {
-            return resolve.getTemplate(_NAME, attr);
-        }
-    };
-}
-
-_module.directive(NAME, directive);
diff --git a/@salix/core/src/searchbar/searchbar.mdl.html b/@salix/core/src/searchbar/searchbar.mdl.html
deleted file mode 100644
index bf432de77a..0000000000
--- a/@salix/core/src/searchbar/searchbar.mdl.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<form action="#">
-  <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
-    <label class="mdl-button mdl-js-button mdl-button--icon" for="text-search">
-      <i class="material-icons">search</i>
-    </label>
-    <div class="mdl-textfield__expandable-holder">
-      <input class="mdl-textfield__input" type="text" style="color:black;" id="text-search" bg-panel>
-      <label class="mdl-textfield__label" for="sample-expandable">*[text]*</label>
-    </div>
-  </div>
-</form>
\ No newline at end of file
diff --git a/@salix/core/src/searchbar/searchbar.mdl.js b/@salix/core/src/searchbar/searchbar.mdl.js
deleted file mode 100644
index 8648745dc4..0000000000
--- a/@salix/core/src/searchbar/searchbar.mdl.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import {module as _module} from '../module';
-import * as util from '../util';
-import * as constant from '../constants';
-import template from './searchbar.mdl.html';
-
-const _NAME = 'searchbar';
-const DEFAULT_TEXT = 'Search';
-
-export const NAME = util.getFactoryName(_NAME + constant.MATERIAL_DESIGN_FRAMEWORK);
-
-export function factory() {
-    return {
-        template: template,
-        default: {
-            text: DEFAULT_TEXT
-        }
-    };
-}
-
-_module.factory(NAME, factory);
diff --git a/@salix/core/src/textfield/textfield.mdl.js b/@salix/core/src/textfield/textfield.mdl.js
index c2ab4fdee4..2820dcd96c 100644
--- a/@salix/core/src/textfield/textfield.mdl.js
+++ b/@salix/core/src/textfield/textfield.mdl.js
@@ -18,7 +18,8 @@ export function factory() {
             name: 'textfield',
             enabled: 'enabled',
             className: DEFAULT_CLASS,
-            type: DEFAULT_TYPE
+            type: DEFAULT_TYPE,
+            model: '$ctrl.model'
         }
     }
 }
diff --git a/@salix/crud/src/client/basic-data/index.html b/@salix/crud/src/client/basic-data/index.html
index 7cea913ebc..0e3c26d7aa 100644
--- a/@salix/crud/src/client/basic-data/index.html
+++ b/@salix/crud/src/client/basic-data/index.html
@@ -21,7 +21,7 @@
     </vn-horizontal>
     <vn-horizontal>
         <vn-one>
-            <vn-submit text="Guardar"></vn-submit>
+            <vn-submit text="Guardar" id="save"></vn-submit>
         </vn-one>
     </vn-horizontal>
 </form>
\ No newline at end of file
diff --git a/@salix/crud/src/client/client.js b/@salix/crud/src/client/client.js
index 101abcdea1..fd51e90f52 100644
--- a/@salix/crud/src/client/client.js
+++ b/@salix/crud/src/client/client.js
@@ -14,3 +14,5 @@ export {NAME as CLIENT_DESCRIPTOR,
 	COMPONENT as CLIENT_DESCRIPTOR_COMPONENT} from './descriptor/descriptor';
 export {NAME as CLIENT_NOTES,
 	COMPONENT as CLIENT_NOTES_COMPONENT} from './notes/index';
+export {NAME as CLIENT_SEARCH_PANEL,
+	COMPONENT as CLIENT_SEARCH_PANEL_COMPONENT} from './search-panel/search-panel';
diff --git a/@salix/crud/src/client/fiscal-data/index.js b/@salix/crud/src/client/fiscal-data/index.js
index d46d8d7cc6..09840c98cb 100644
--- a/@salix/crud/src/client/fiscal-data/index.js
+++ b/@salix/crud/src/client/fiscal-data/index.js
@@ -14,3 +14,4 @@ export const COMPONENT = {
     }
 };
 module.component(NAME, COMPONENT);
+
diff --git a/@salix/crud/src/client/index/index.html b/@salix/crud/src/client/index/index.html
index 8e33b1ef43..38996d8541 100644
--- a/@salix/crud/src/client/index/index.html
+++ b/@salix/crud/src/client/index/index.html
@@ -1,26 +1,11 @@
 <form ng-submit="$ctrl.submit()">
 <vn-vertical class="full-height">
     <vn-topbar></vn-topbar>
-    <vn-vertical pad-large>
-        <vn-horizontal>
-            <vn-textfield vn-one label="Id Cliente" name="id" model="$ctrl.model"></vn-textfield>
-            <vn-textfield vn-one label="NIF/CIF" name="fi" model="$ctrl.model"></vn-textfield>
-        </vn-horizontal>
-        <vn-horizontal>
-            <vn-textfield vn-one label="Alias" name="alias" model="$ctrl.model"></vn-textfield>
-        </vn-horizontal>
-        <vn-horizontal>
-            <vn-textfield vn-two label="Razon Social" name="name" model="$ctrl.model"></vn-textfield>
-        </vn-horizontal>
-        <vn-horizontal>
-            <vn-textfield vn-one label="Población" name="city" model="$ctrl.model"></vn-textfield>
-            <vn-textfield vn-one label="Código Postal" name="postcode" model="$ctrl.model"></vn-textfield>
-        </vn-horizontal>
-        <vn-horizontal>
-            <vn-textfield vn-one label="Email" name="email" model="$ctrl.model"></vn-textfield>
-            <vn-textfield vn-one label="Teléfono" name="phone" model="$ctrl.model"></vn-textfield>
-        </vn-horizontal>
-        <vn-submit text="Buscar"></vn-submit>
-    </vn-vertical>
+    <vn-horizontal>
+        <vn-four></vn-four>
+        <vn-searchbar vn-four id="searchbar"></vn-searchbar>
+        <vn-search-panel ></vn-search-panel>
+        <vn-four></vn-four>    
+    </vn-horizontal> 
 </vn-vertical>
 </form>
\ No newline at end of file
diff --git a/@salix/crud/src/client/search-panel/search-panel.html b/@salix/crud/src/client/search-panel/search-panel.html
new file mode 100644
index 0000000000..57d39588cd
--- /dev/null
+++ b/@salix/crud/src/client/search-panel/search-panel.html
@@ -0,0 +1,26 @@
+<div class="mdl-menu mdl-js-menu mdl-menu--bottom-left user-menu" pad-medium for="searchbar" style="width:600px">
+<form ng-submit="$ctrl.submit()" pad-large>
+    <vn-horizontal>
+        <vn-textfield vn-one label="Id Cliente" name="id" model="$ctrl.model"></vn-textfield>
+        <vn-textfield vn-one label="NIF/CIF" name="fi" model="$ctrl.model"></vn-textfield>
+    </vn-horizontal>
+    <vn-horizontal>
+        <vn-textfield vn-one label="Alias" name="alias" model="$ctrl.model"></vn-textfield>
+    </vn-horizontal>
+    <vn-horizontal>
+        <vn-textfield vn-two label="Razon Social" name="name" model="$ctrl.model"></vn-textfield>
+    </vn-horizontal>
+    <vn-horizontal>
+        <vn-textfield vn-one label="Población" name="city" model="$ctrl.model"></vn-textfield>
+        <vn-textfield vn-one label="Código Postal" name="postcode" model="$ctrl.model"></vn-textfield>
+    </vn-horizontal>
+    <vn-horizontal>
+        <vn-textfield vn-one label="Email" name="email" model="$ctrl.model"></vn-textfield>
+        <vn-textfield vn-one label="Teléfono" name="phone" model="$ctrl.model"></vn-textfield>
+    </vn-horizontal>
+    <vn-submit label="">
+        <i class="material-icons">add_shopping_cart</i>Add to shopping cart
+    </vn-submit>
+</form>
+</div>
+
diff --git a/@salix/crud/src/client/search-panel/search-panel.js b/@salix/crud/src/client/search-panel/search-panel.js
new file mode 100644
index 0000000000..559a95a275
--- /dev/null
+++ b/@salix/crud/src/client/search-panel/search-panel.js
@@ -0,0 +1,8 @@
+import template from './search-panel.html';
+import {module} from '../../module';
+
+export const NAME = "vnSearchPanel";
+export const COMPONENT = {
+    template: template
+};
+module.component(NAME, COMPONENT);
diff --git a/services/client/server/datasources.json b/services/client/server/datasources.json
index d6caf56d44..8adff1558e 100644
--- a/services/client/server/datasources.json
+++ b/services/client/server/datasources.json
@@ -1,6 +1,7 @@
 {
   "db": {
     "name": "db",
-    "connector": "memory"
+    "connector": "memory",
+    "file": "db.json"
   }
 }