diff --git a/rero_ils/bundles.py b/rero_ils/bundles.py
index 677266d2dc..fd5cdee522 100644
--- a/rero_ils/bundles.py
+++ b/rero_ils/bundles.py
@@ -77,7 +77,7 @@ def catalog(domain):
     'node_modules/@rero/rero-ils-ui/dist/admin/main.*.js',
     output='gen/rero_ils_admin_ui.%(version)s.js',
     npm={
-        '@rero/rero-ils-ui': '~0.0.2'
+        '@rero/rero-ils-ui': '~0.0.3'
     }
 )
 
@@ -89,6 +89,15 @@ def catalog(domain):
     'node_modules/@rero/rero-ils-ui/dist/public-search/main.*.js',
     output='gen/rero_ils_public-search_ui.%(version)s.js',
     npm={
-        '@rero/rero-ils-ui': '~0.0.2'
+        '@rero/rero-ils-ui': '~0.0.3'
+    }
+)
+
+search_bar_ui_js = NpmBundle(
+    'node_modules/@rero/rero-ils-ui/dist/search-bar/polyfills.*.js',
+    'node_modules/@rero/rero-ils-ui/dist/search-bar/main.*.js',
+    output='gen/rero_ils_search-bar_ui.%(version)s.js',
+    npm={
+        '@rero/rero-ils-ui': '~0.0.3'
     }
 )
diff --git a/rero_ils/templates/rero_ils/frontpage.html b/rero_ils/templates/rero_ils/frontpage.html
index 13999fe5cc..5714a689c9 100644
--- a/rero_ils/templates/rero_ils/frontpage.html
+++ b/rero_ils/templates/rero_ils/frontpage.html
@@ -31,25 +31,15 @@
       <h1>{{ _('Get into your library') }}</h1>
       <h2>{{ _('A wealth of knowledge just a click away') }}</h2>
     </header>
-    <!-- <div class="container d-none d-md-block">
-    <search-autocomplete placeholder="{{ _('What\'s on your mind?') }}" action="/{{ viewcode }}{{config.RERO_ILS_THEME_SEARCH_ENDPOINT}}" size="large" viewcode="{{ viewcode }}"></search-autocomplete>
+
+    <div class="container d-none d-md-block">
+      <main-search-bar placeholder="{{ _('What\'s on your mind?') }}" size="large" viewcode="{{ viewcode or config.RERO_ILS_SEARCH_GLOBAL_VIEW_CODE }}"></main-search-bar>
     </div>
+
     <div class="container d-block d-md-none">
-      <search-autocomplete placeholder="{{ _('What\'s on your mind?') }}" action="/{{ viewcode }}{{config.RERO_ILS_THEME_SEARCH_ENDPOINT}}" viewcode="{{ viewcode }}"></search-autocomplete>
-    </div> -->
-    <!-- remove this once we have the autocomplete working -->
-    <div class="container">
-      <form action="/{{ viewcode|default(config.RERO_ILS_SEARCH_GLOBAL_VIEW_CODE) }}{{config.RERO_ILS_THEME_SEARCH_ENDPOINT}}" class="form-inline">
-        <div class="input-group input-group-lg w-100">
-          <input class="form-control" type="search" name="q" placeholder="{{_('Search')}}" aria-label="Search" aria-describedby="button-search">
-          <div class="input-group-append">
-            <button class="btn btn-light" type="submit" id="button-search"><i class="fa fa-search"></i></button>
-          </div>
-        </div>
-      </form>
+      <main-search-bar placeholder="{{ _('What\'s on your mind?') }}" viewcode="{{ viewcode or config.RERO_ILS_SEARCH_GLOBAL_VIEW_CODE }}"></main-search-bar>
     </div>
 
-    <!-- <app-root></app-root> -->
     <footer class="text-center bg-danger text-white">
       <p class="py-2 mb-0">
         {{ _('Software under development') }}
diff --git a/rero_ils/templates/rero_ils/header.html b/rero_ils/templates/rero_ils/header.html
index 767b8e8c84..c324757bce 100644
--- a/rero_ils/templates/rero_ils/header.html
+++ b/rero_ils/templates/rero_ils/header.html
@@ -32,20 +32,13 @@
             </div>
           {%- endif %}
         {%- endblock navbar_brand %}
+
         {%- block navbar_search %}
-          {%- if config.THEME_SEARCHBAR %}
-            <div class="align-self-center pr-2 flex-grow-1">
-              <form action="/{{ viewcode|default(config.RERO_ILS_SEARCH_GLOBAL_VIEW_CODE) }}{{config.RERO_ILS_THEME_SEARCH_ENDPOINT}}" class="form-inline">
-                <div class="input-group input-group-sm w-100">
-                  <input class="form-control" type="search" name="q" placeholder="{{_('Search')}}" aria-label="Search" aria-describedby="button-search">
-                  <div class="input-group-append">
-                    <button class="btn btn-light" type="submit" id="button-search"><i class="fa fa-search"></i></button>
-                  </div>
-                </div>
-              </form>
-            </div>
-          {%- endif %}
+          <div class="align-self-center pr-2 flex-grow-1">
+            <main-search-bar placeholder="{{ _('Search') }}" viewcode="{{ viewcode or config.RERO_ILS_SEARCH_GLOBAL_VIEW_CODE }}"></main-search-bar>
+          </div>
         {%- endblock navbar_search %}
+
         {%- block navbar_menus %}
           <div class="align-self-center">
             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
diff --git a/rero_ils/templates/rero_ils/javascript.html b/rero_ils/templates/rero_ils/javascript.html
index 88206acbb0..9247e35f6c 100644
--- a/rero_ils/templates/rero_ils/javascript.html
+++ b/rero_ils/templates/rero_ils/javascript.html
@@ -17,5 +17,12 @@
 
 #}
 {%- block javascript %}
-{% assets "rero_ils_main_js" %}<script src="{{ ASSET_URL }}"></script>{% endassets %}
+{% assets "rero_ils_main_js" %}
+  <script src="{{ ASSET_URL }}"></script>
+{% endassets %}
+
+{% assets "rero_ils_search_bar_ui_js" %}
+  <script src="{{ ASSET_URL }}"></script>
+{% endassets %}
+
 {%- endblock javascript %}
diff --git a/rero_ils/templates/rero_ils/professional.html b/rero_ils/templates/rero_ils/professional.html
index 377c896a4e..5c26124d03 100644
--- a/rero_ils/templates/rero_ils/professional.html
+++ b/rero_ils/templates/rero_ils/professional.html
@@ -30,7 +30,7 @@
 
 <body>
     <admin-root></admin-root>
-    {% assets "rero_ils_ui_js" %}
+    {% assets "rero_ils_admin_ui_js" %}
         <script src="{{ ASSET_URL }}"></script>
     {% endassets %}
 </body>
diff --git a/rero_ils/templates/rero_ils/search.html b/rero_ils/templates/rero_ils/search.html
index 6666168219..cf7604ab9a 100644
--- a/rero_ils/templates/rero_ils/search.html
+++ b/rero_ils/templates/rero_ils/search.html
@@ -18,9 +18,6 @@
 #}
 
 {% extends 'rero_ils/page.html' %}
-{%- block page_header %}
-  {% include 'rero_ils/search_header.html' %}
-{%- endblock page_header %}
 
 {%- block page_body %}
 <div class="container ">
diff --git a/rero_ils/templates/rero_ils/search_header.html b/rero_ils/templates/rero_ils/search_header.html
deleted file mode 100644
index 4da3e9cf1b..0000000000
--- a/rero_ils/templates/rero_ils/search_header.html
+++ /dev/null
@@ -1,32 +0,0 @@
-{# -*- coding: utf-8 -*-
-
-  RERO ILS
-  Copyright (C) 2019 RERO
-  Copyright (C) 2015-2018 CERN
-
-  This program is free software: you can redistribute it and/or modify
-  it under the terms of the GNU Affero General Public License as published by
-  the Free Software Foundation, version 3 of the License.
-
-  This program is distributed in the hope that it will be useful,
-  but WITHOUT ANY WARRANTY; without even the implied warranty of
-  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-  GNU Affero General Public License for more details.
-
-  You should have received a copy of the GNU Affero General Public License
-  along with this program. If not, see <http://www.gnu.org/licenses/>.
-
-#}
-{% extends 'rero_ils/header.html' %}
-{%- block navbar_search %}
-  <div class="align-self-center pr-2 flex-grow-1">
-    <div class="align-self-center pr-2 flex-grow-1">
-      <search-autocomplete
-        placeholder="{{ _('Search') }}"
-        action="/{{viewcode}}{{config.RERO_ILS_THEME_SEARCH_ENDPOINT}}"
-        size="small"
-        viewcode="{{viewcode}}">
-      </search-autocomplete>
-    </div>
-  </div>
-{%- endblock navbar_search %}
diff --git a/rero_ils/views.py b/rero_ils/views.py
index 99533088ca..e578a1bbc6 100644
--- a/rero_ils/views.py
+++ b/rero_ils/views.py
@@ -263,7 +263,7 @@ def set_language():
 @check_organisation_viewcode
 def search(viewcode, recordType):
     """Search page ui."""
-    return render_template(current_app.config.get('SEARCH_UI_SEARCH_TEMPLATE'))
+    return render_template(current_app.config.get('SEARCH_UI_SEARCH_TEMPLATE'), viewcode=viewcode)
 
 
 @blueprint.app_template_filter()
diff --git a/setup.py b/setup.py
index 35af3a47b8..d37bb7bf5c 100644
--- a/setup.py
+++ b/setup.py
@@ -117,7 +117,8 @@ def run(self):
             'rero_ils_main_js = rero_ils.bundles:js',
             'rero_ils_documents_detailed_js = \
                 rero_ils.modules.documents.bundles:detailed_js',
-            'rero_ils_ui_js = rero_ils.bundles:admin_ui_js',
+            'rero_ils_admin_ui_js = rero_ils.bundles:admin_ui_js',
+            'rero_ils_search_bar_ui_js = rero_ils.bundles:search_bar_ui_js',
             'rero_ils_public_search_ui_js = rero_ils.bundles:public_search_ui_js',
         ],
         'dojson.cli': [