diff --git a/invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/theme.js b/invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/theme.js
index 0191d6b..1ff4b72 100644
--- a/invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/theme.js
+++ b/invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/theme.js
@@ -1,5 +1,9 @@
 import $ from "jquery";
 import "semantic-ui-css";
+import { MultipleOptionsSearchBar } from "@js/invenio_search_ui/components";
+import { i18next } from "@translations/invenio_app_rdm/i18next";
+import ReactDOM from "react-dom";
+import React from "react";
 
 // called on document ready
 $(function () {
@@ -37,3 +41,14 @@ export function toggleVisibility(id) {
 }
 
 window.toggleVisibility = toggleVisibility;
+
+const headerSearchbar = document.getElementById("header-search-bar");
+const searchBarOptions = JSON.parse(headerSearchbar.dataset.options);
+
+ReactDOM.render(
+  <MultipleOptionsSearchBar
+    options={searchBarOptions}
+    placeholder={i18next.t("Search records...")}
+  />,
+  headerSearchbar
+);
diff --git a/invenio_theme_tugraz/templates/invenio_theme_tugraz/header.html b/invenio_theme_tugraz/templates/invenio_theme_tugraz/header.html
index 36922e5..51bb619 100644
--- a/invenio_theme_tugraz/templates/invenio_theme_tugraz/header.html
+++ b/invenio_theme_tugraz/templates/invenio_theme_tugraz/header.html
@@ -79,23 +79,4 @@
     {%- include "invenio_theme/breadcrumbs.html" %}
   {%- endblock breadcrumbs %}
   #}
-
-  <div style="display: none;">
-    {% include "invenio_app_rdm/searchbar.html" %}
-  </div>
-
-  <div class="ui container">
-    <div class="ui center aligned grid">
-      <div class="sixteen wide column">
-        <form action="{{config.THEME_SEARCH_ENDPOINT}}" class="ui form" role="search">
-          <div class="ui fluid big action icon input">
-            <input type="text" name="q" autofocus="autofocus" placeholder="{{ _("Type and press enter to search") }}">
-            <button type="submit" class="ui icon search button">
-              <i class="icon search"></i>
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  </div>
 </div>
diff --git a/invenio_theme_tugraz/templates/invenio_theme_tugraz/navbar.html b/invenio_theme_tugraz/templates/invenio_theme_tugraz/navbar.html
index 4248fa2..e4247f1 100644
--- a/invenio_theme_tugraz/templates/invenio_theme_tugraz/navbar.html
+++ b/invenio_theme_tugraz/templates/invenio_theme_tugraz/navbar.html
@@ -11,8 +11,11 @@
     <div class="short-menu-left">
       <div id="all-menu-top-left-item">
         <div class="short-menu-left-search">
-          {%- if config.I18N_LANGUAGES %}
-          <div class="short-menu-left-lang" style="margin-right:10px; font-size:18px;">
+          <div style="display: inline-block;">
+            {% include "invenio_app_rdm/searchbar.html" %}
+          </div>
+
+          <div class="short-menu-left-lang">
             {%- for l in current_i18n.get_locales() %}
             {%- if current_i18n.language != l.language %}
             <a
@@ -20,21 +23,6 @@
             {%- endif %}
             {%- endfor %}
           </div>
-          {%- endif %}
-          <div class="search-icon-header">
-            <a href="{{url_for('invenio_search_ui.search')}}" class="no-decoration">
-              <svg class="short-menu-icon" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-                xmlns="http://www.w3.org/2000/svg" height="26.015" width="26.015" version="1.1"
-                xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"
-                viewBox="0 0 26.01515 26.01515">
-                <g stroke-miterlimit="10" transform="translate(1,1)">
-                  <circle cy="8.5" cx="8.5" r="8" style="stroke-miterlimit:10;stroke-width:2"></circle>
-                  <path style="stroke-width:2;stroke-miterlimit:10;stroke-linecap:round" d="m14.156 14.156 9.344 9.344">
-                  </path>
-                </g>
-              </svg>
-            </a>
-          </div>
         </div>
       </div>
     </div>