diff --git a/src/lib/components/SearchBar/QueryBuildHelper.js b/src/lib/components/SearchBar/QueryBuildHelper.js
index 302ecd9b9..35a947cad 100644
--- a/src/lib/components/SearchBar/QueryBuildHelper.js
+++ b/src/lib/components/SearchBar/QueryBuildHelper.js
@@ -1,18 +1,23 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { List, Grid } from 'semantic-ui-react';
+import { withState } from 'react-searchkit';
 
-export class QueryBuildHelper extends Component {
+class _QueryBuildHelper extends Component {
   addToQuery = field => {
-    const { currentQueryString, updateQueryString } = this.props;
+    const { currentQueryState, updateQueryState } = this.props;
+    const { queryString } = currentQueryState;
+
     const defaultVal = field.defaultValue ? field.defaultValue : '*';
     const newCriteriaString = `${field.field}:${defaultVal}`;
-    const previousQueryString = currentQueryString;
+    const previousQueryString = queryString;
 
     if (previousQueryString === '') {
-      updateQueryString(newCriteriaString);
+      updateQueryState({ queryString: newCriteriaString });
     } else {
-      updateQueryString(`${previousQueryString} AND ${newCriteriaString}`);
+      updateQueryState({
+        queryString: `${previousQueryString} AND ${newCriteriaString}`,
+      });
     }
   };
 
@@ -46,6 +51,7 @@ export class QueryBuildHelper extends Component {
 
   render() {
     const { fields } = this.props;
+
     return (
       <Grid>
         <Grid.Row columns={1}>
@@ -58,10 +64,10 @@ export class QueryBuildHelper extends Component {
   }
 }
 
-QueryBuildHelper.propTypes = {
+_QueryBuildHelper.propTypes = {
   fields: PropTypes.array.isRequired,
-  currentQueryString: PropTypes.string.isRequired,
-  updateQueryString: PropTypes.func.isRequired,
+  updateQueryState: PropTypes.func.isRequired,
+  currentQueryState: PropTypes.object.isRequired,
 };
 
-QueryBuildHelper.defaultProps = {};
+export const QueryBuildHelper = withState(_QueryBuildHelper);
diff --git a/src/lib/components/SearchBar/SearchBar.js b/src/lib/components/SearchBar/SearchBar.js
deleted file mode 100644
index d501dfa1e..000000000
--- a/src/lib/components/SearchBar/SearchBar.js
+++ /dev/null
@@ -1,116 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { Input } from 'semantic-ui-react';
-import { QueryBuildHelper } from './QueryBuildHelper';
-
-class SearchBar extends Component {
-  constructor(props) {
-    super(props);
-    const { queryString } = this.props;
-    this.state = {
-      currentValue: queryString || '',
-    };
-  }
-
-  componentDidMount() {
-    if (this.searchInput) {
-      this.searchInput.focus();
-    }
-  }
-
-  onInputChange = queryString => {
-    const { updateQueryOnChange, updateQueryString } = this.props;
-    if (updateQueryOnChange) {
-      updateQueryString(queryString);
-    }
-    this.setState({
-      currentValue: queryString,
-    });
-  };
-
-  onKeyPressHandler = event => {
-    if (event.key === 'Enter') {
-      this.executeSearch();
-    }
-  };
-
-  executeSearch = () => {
-    const { updateQueryString } = this.props;
-    const { currentValue } = this.state;
-    updateQueryString(currentValue);
-  };
-
-  render() {
-    const {
-      buttonColor,
-      currentQueryString,
-      executeSearch: parentSearch,
-      onKeyPressHandler,
-      placeholder,
-      queryHelperFields,
-      queryString,
-      updateQueryOnChange,
-      updateQueryString,
-      ...otherProps
-    } = this.props;
-    const { currentValue } = this.state;
-    return (
-      <>
-        <Input
-          action={{
-            color: buttonColor,
-            icon: 'search',
-            onClick: parentSearch || this.executeSearch,
-          }}
-          size="big"
-          fluid
-          placeholder={placeholder}
-          onChange={(e, { value }) => this.onInputChange(value)}
-          value={currentValue}
-          onKeyPress={event =>
-            onKeyPressHandler
-              ? onKeyPressHandler(event)
-              : this.onKeyPressHandler(event)
-          }
-          ref={input => {
-            this.searchInput = input;
-          }}
-          {...otherProps}
-          className={`${otherProps.className} ils-searchbar`}
-        />
-        {queryHelperFields.length > 0 && (
-          <QueryBuildHelper
-            fields={queryHelperFields}
-            currentQueryString={currentQueryString || queryString}
-            updateQueryString={this.onInputChange}
-          />
-        )}
-      </>
-    );
-  }
-}
-
-SearchBar.propTypes = {
-  buttonColor: PropTypes.string,
-  executeSearch: PropTypes.func,
-  currentQueryString: PropTypes.string,
-  onKeyPressHandler: PropTypes.func,
-  placeholder: PropTypes.string,
-  queryHelperFields: PropTypes.array,
-  queryString: PropTypes.string,
-  updateQueryOnChange: PropTypes.bool,
-  updateQueryString: PropTypes.func.isRequired,
-};
-
-SearchBar.defaultProps = {
-  buttonColor: null,
-  currentQueryString: null,
-  executeSearch: null,
-  onKeyPressHandler: null,
-  placeholder: 'Search for books, series, articles, publications...',
-  queryHelperFields: [],
-  queryString: '',
-  updateQueryOnChange: false,
-};
-
-export default SearchBar;
diff --git a/src/lib/components/SearchBar/SearchBar.test.js b/src/lib/components/SearchBar/SearchBar.test.js
deleted file mode 100644
index c2d33e845..000000000
--- a/src/lib/components/SearchBar/SearchBar.test.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import SearchBar from './SearchBar';
-
-describe('LoansSearch SearchBar tests', () => {
-  let component;
-  afterEach(() => {
-    component.unmount();
-  });
-
-  const currentQueryString = 'The Gulf: The Making of An American Sea';
-
-  it('should render the current query string', () => {
-    component = mount(
-      <SearchBar
-        queryString={currentQueryString}
-        updateQueryString={() => {}}
-        placeholder="Search"
-      />
-    );
-    expect(component).toMatchSnapshot();
-  });
-
-  it('should call executeSearch on key `enter` pressed only', () => {
-    const mockedExecuteSearch = jest.fn();
-    component = mount(
-      <SearchBar
-        queryString={currentQueryString}
-        updateQueryString={mockedExecuteSearch}
-        placeholder="Search"
-      />
-    );
-
-    const input = component.find('Input').find('input');
-    input.simulate('keypress', { key: 'Enter' });
-    expect(mockedExecuteSearch).toHaveBeenCalled();
-
-    mockedExecuteSearch.mockClear();
-
-    input.simulate('keypress', { key: 'Backspace' });
-    expect(mockedExecuteSearch).not.toHaveBeenCalled();
-  });
-
-  it('should call executeSearch on button click', () => {
-    const mockedExecuteSearch = jest.fn();
-    component = mount(
-      <SearchBar
-        queryString={currentQueryString}
-        updateQueryString={mockedExecuteSearch}
-        placeholder="Search"
-      />
-    );
-    const input = component
-      .find('Input')
-      .find('Icon')
-      .find('i');
-    input.simulate('click');
-    expect(mockedExecuteSearch).toHaveBeenCalled();
-  });
-
-  it('should render search bar with query helper', () => {
-    const helperFields = [
-      {
-        name: 'author',
-        field: 'authors.full_name',
-        defaultValue: 'Doe, John',
-      },
-      {
-        name: 'created',
-        field: '_created',
-      },
-    ];
-    const mockedExecuteSearch = jest.fn();
-    component = mount(
-      <SearchBar
-        queryString=""
-        updateQueryString={mockedExecuteSearch}
-        placeholder="Search"
-        queryHelperFields={helperFields}
-      />
-    );
-
-    expect(component).toMatchSnapshot();
-
-    const listItem = component.find('ListItem');
-    expect(listItem).toHaveLength(2);
-
-    expect(
-      component
-        .find('ListItem')
-        .at(0)
-        .text()
-    ).toEqual('author');
-  });
-});
diff --git a/src/lib/components/SearchBar/SearchBarILS.js b/src/lib/components/SearchBar/SearchBarILS.js
new file mode 100644
index 000000000..378b1a45e
--- /dev/null
+++ b/src/lib/components/SearchBar/SearchBarILS.js
@@ -0,0 +1,77 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { Input } from 'semantic-ui-react';
+
+export class SearchBarILS extends Component {
+  state = { currentValue: '' };
+
+  componentDidMount() {
+    if (this.focusInput) {
+      this.focusInput.focus();
+    }
+  }
+
+  onKeyPressHandler = (event, input) => {
+    const { onSearchHandler } = this.props;
+    if (event.key === 'Enter') {
+      const { currentValue } = this.state;
+      onSearchHandler(currentValue);
+    }
+  };
+
+  onPasteHandler = event => {
+    const { onSearchHandler } = this.props;
+    const queryString = (event.clipboardData || window.clipboardData).getData(
+      'text'
+    );
+    onSearchHandler(queryString);
+  };
+
+  render() {
+    const {
+      className: parentClass,
+      onKeyPressHandler: parentKeyPressHandler,
+      onSearchHandler,
+      onPasteHandler,
+      placeholder,
+      ...rest
+    } = this.props;
+    const { currentValue } = this.state;
+    return (
+      <Input
+        action={{
+          icon: 'search',
+          onClick: () => onSearchHandler(currentValue),
+        }}
+        onChange={(event, { value }) => {
+          this.setState({ currentValue: value });
+        }}
+        onKeyPress={parentKeyPressHandler || this.onKeyPressHandler}
+        onPaste={onPasteHandler || this.onPasteHandler}
+        fluid
+        size="big"
+        placeholder={placeholder}
+        className={`${parentClass} ils-searchbar`}
+        ref={input => {
+          this.focusInput = input;
+        }}
+        {...rest}
+      />
+    );
+  }
+}
+
+SearchBarILS.propTypes = {
+  onKeyPressHandler: PropTypes.func,
+  onPasteHandler: PropTypes.func,
+  onSearchHandler: PropTypes.func.isRequired,
+  placeholder: PropTypes.string,
+  className: PropTypes.string,
+};
+
+SearchBarILS.defaultProps = {
+  onKeyPressHandler: null,
+  onPasteHandler: null,
+  placeholder: '',
+  className: '',
+};
diff --git a/src/lib/components/SearchBar/SearchBarILS.test.js b/src/lib/components/SearchBar/SearchBarILS.test.js
new file mode 100644
index 000000000..f9b733065
--- /dev/null
+++ b/src/lib/components/SearchBar/SearchBarILS.test.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { SearchBarILS as SearchBar } from './SearchBarILS';
+
+const mockedOnSearchHandler = jest.fn();
+
+describe('SearchBar tests', () => {
+  let component;
+  afterEach(() => {
+    mockedOnSearchHandler.mockClear();
+    component.unmount();
+  });
+
+  it('should match snapshot', () => {
+    component = mount(
+      <SearchBar onSearchHandler={() => {}} placeholder="Search" />
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('should call onSearchHandler only on `enter` key press', () => {
+    component = mount(
+      <SearchBar placeholder="Search" onSearchHandler={mockedOnSearchHandler} />
+    );
+
+    const input = component.find('Input').find('input');
+    input.simulate('keypress', { key: 'Enter' });
+    expect(mockedOnSearchHandler).toHaveBeenCalled();
+
+    mockedOnSearchHandler.mockClear();
+
+    input.simulate('keypress', { key: 'Backspace' });
+    expect(mockedOnSearchHandler).not.toHaveBeenCalled();
+  });
+
+  it('should call executeSearch on button click', () => {
+    component = mount(
+      <SearchBar onSearchHandler={mockedOnSearchHandler} placeholder="Search" />
+    );
+    const input = component
+      .find('Input')
+      .find('Icon')
+      .find('i');
+    input.simulate('click');
+    expect(mockedOnSearchHandler).toHaveBeenCalled();
+  });
+});
diff --git a/src/lib/components/SearchBar/__snapshots__/SearchBar.test.js.snap b/src/lib/components/SearchBar/__snapshots__/SearchBar.test.js.snap
deleted file mode 100644
index 3e6e411d6..000000000
--- a/src/lib/components/SearchBar/__snapshots__/SearchBar.test.js.snap
+++ /dev/null
@@ -1,282 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`LoansSearch SearchBar tests should render search bar with query helper 1`] = `
-<SearchBar
-  buttonColor={null}
-  currentQueryString={null}
-  executeSearch={null}
-  onKeyPressHandler={null}
-  placeholder="Search"
-  queryHelperFields={
-    Array [
-      Object {
-        "defaultValue": "Doe, John",
-        "field": "authors.full_name",
-        "name": "author",
-      },
-      Object {
-        "field": "_created",
-        "name": "created",
-      },
-    ]
-  }
-  queryString=""
-  updateQueryOnChange={false}
-  updateQueryString={[MockFunction]}
->
-  <Input
-    action={
-      Object {
-        "color": null,
-        "icon": "search",
-        "onClick": [Function],
-      }
-    }
-    className="undefined ils-searchbar"
-    fluid={true}
-    onChange={[Function]}
-    onKeyPress={[Function]}
-    placeholder="Search"
-    size="big"
-    type="text"
-    value=""
-  >
-    <div
-      className="ui big fluid action input undefined ils-searchbar"
-    >
-      <input
-        onChange={[Function]}
-        onKeyPress={[Function]}
-        placeholder="Search"
-        type="text"
-        value=""
-      />
-      <Button
-        as="button"
-        color={null}
-        icon="search"
-        onClick={[Function]}
-      >
-        <Ref
-          innerRef={
-            Object {
-              "current": <button
-                class="ui icon button"
-              >
-                <i
-                  aria-hidden="true"
-                  class="search icon"
-                />
-              </button>,
-            }
-          }
-        >
-          <RefFindNode
-            innerRef={
-              Object {
-                "current": <button
-                  class="ui icon button"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="search icon"
-                  />
-                </button>,
-              }
-            }
-          >
-            <button
-              className="ui icon button"
-              onClick={[Function]}
-            >
-              <Icon
-                as="i"
-                name="search"
-              >
-                <i
-                  aria-hidden="true"
-                  className="search icon"
-                  onClick={[Function]}
-                />
-              </Icon>
-            </button>
-          </RefFindNode>
-        </Ref>
-      </Button>
-    </div>
-  </Input>
-  <QueryBuildHelper
-    currentQueryString=""
-    fields={
-      Array [
-        Object {
-          "defaultValue": "Doe, John",
-          "field": "authors.full_name",
-          "name": "author",
-        },
-        Object {
-          "field": "_created",
-          "name": "created",
-        },
-      ]
-    }
-    updateQueryString={[Function]}
-  >
-    <Grid>
-      <div
-        className="ui grid"
-      >
-        <GridRow
-          columns={1}
-        >
-          <div
-            className="one column row"
-          >
-            <GridColumn
-              width={16}
-            >
-              <div
-                className="sixteen wide column"
-              >
-                Search by: 
-                <List
-                  bulleted={true}
-                  horizontal={true}
-                >
-                  <div
-                    className="ui bulleted horizontal list"
-                    role="list"
-                  >
-                    <ListItem
-                      as="a"
-                      key="authors.full_name"
-                      onClick={[Function]}
-                    >
-                      <a
-                        className="item"
-                        onClick={[Function]}
-                        role="listitem"
-                      >
-                        author
-                      </a>
-                    </ListItem>
-                    <ListItem
-                      as="a"
-                      key="_created"
-                      onClick={[Function]}
-                    >
-                      <a
-                        className="item"
-                        onClick={[Function]}
-                        role="listitem"
-                      >
-                        created
-                      </a>
-                    </ListItem>
-                  </div>
-                </List>
-              </div>
-            </GridColumn>
-          </div>
-        </GridRow>
-      </div>
-    </Grid>
-  </QueryBuildHelper>
-</SearchBar>
-`;
-
-exports[`LoansSearch SearchBar tests should render the current query string 1`] = `
-<SearchBar
-  buttonColor={null}
-  currentQueryString={null}
-  executeSearch={null}
-  onKeyPressHandler={null}
-  placeholder="Search"
-  queryHelperFields={Array []}
-  queryString="The Gulf: The Making of An American Sea"
-  updateQueryOnChange={false}
-  updateQueryString={[Function]}
->
-  <Input
-    action={
-      Object {
-        "color": null,
-        "icon": "search",
-        "onClick": [Function],
-      }
-    }
-    className="undefined ils-searchbar"
-    fluid={true}
-    onChange={[Function]}
-    onKeyPress={[Function]}
-    placeholder="Search"
-    size="big"
-    type="text"
-    value="The Gulf: The Making of An American Sea"
-  >
-    <div
-      className="ui big fluid action input undefined ils-searchbar"
-    >
-      <input
-        onChange={[Function]}
-        onKeyPress={[Function]}
-        placeholder="Search"
-        type="text"
-        value="The Gulf: The Making of An American Sea"
-      />
-      <Button
-        as="button"
-        color={null}
-        icon="search"
-        onClick={[Function]}
-      >
-        <Ref
-          innerRef={
-            Object {
-              "current": <button
-                class="ui icon button"
-              >
-                <i
-                  aria-hidden="true"
-                  class="search icon"
-                />
-              </button>,
-            }
-          }
-        >
-          <RefFindNode
-            innerRef={
-              Object {
-                "current": <button
-                  class="ui icon button"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="search icon"
-                  />
-                </button>,
-              }
-            }
-          >
-            <button
-              className="ui icon button"
-              onClick={[Function]}
-            >
-              <Icon
-                as="i"
-                name="search"
-              >
-                <i
-                  aria-hidden="true"
-                  className="search icon"
-                  onClick={[Function]}
-                />
-              </Icon>
-            </button>
-          </RefFindNode>
-        </Ref>
-      </Button>
-    </div>
-  </Input>
-</SearchBar>
-`;
diff --git a/src/lib/components/SearchBar/__snapshots__/SearchBarILS.test.js.snap b/src/lib/components/SearchBar/__snapshots__/SearchBarILS.test.js.snap
new file mode 100644
index 000000000..a12d94089
--- /dev/null
+++ b/src/lib/components/SearchBar/__snapshots__/SearchBarILS.test.js.snap
@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SearchBar tests should match snapshot 1`] = `
+<SearchBarILS
+  className=""
+  onKeyPressHandler={null}
+  onPasteHandler={null}
+  onSearchHandler={[Function]}
+  placeholder="Search"
+>
+  <Input
+    action={
+      Object {
+        "icon": "search",
+        "onClick": [Function],
+      }
+    }
+    className=" ils-searchbar"
+    fluid={true}
+    onChange={[Function]}
+    onKeyPress={[Function]}
+    onPaste={[Function]}
+    placeholder="Search"
+    size="big"
+    type="text"
+  >
+    <div
+      className="ui big fluid action input  ils-searchbar"
+      onPaste={[Function]}
+    >
+      <input
+        onChange={[Function]}
+        onKeyPress={[Function]}
+        placeholder="Search"
+        type="text"
+      />
+      <Button
+        as="button"
+        icon="search"
+        onClick={[Function]}
+      >
+        <Ref
+          innerRef={
+            Object {
+              "current": <button
+                class="ui icon button"
+              >
+                <i
+                  aria-hidden="true"
+                  class="search icon"
+                />
+              </button>,
+            }
+          }
+        >
+          <RefFindNode
+            innerRef={
+              Object {
+                "current": <button
+                  class="ui icon button"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="search icon"
+                  />
+                </button>,
+              }
+            }
+          >
+            <button
+              className="ui icon button"
+              onClick={[Function]}
+            >
+              <Icon
+                as="i"
+                name="search"
+              >
+                <i
+                  aria-hidden="true"
+                  className="search icon"
+                  onClick={[Function]}
+                />
+              </Icon>
+            </button>
+          </RefFindNode>
+        </Ref>
+      </Button>
+    </div>
+  </Input>
+</SearchBarILS>
+`;
diff --git a/src/lib/components/SearchBar/index.js b/src/lib/components/SearchBar/index.js
index 8580b56b7..56ee985b6 100644
--- a/src/lib/components/SearchBar/index.js
+++ b/src/lib/components/SearchBar/index.js
@@ -1 +1 @@
-export { default as SearchBar } from './SearchBar';
+export { SearchBarILS } from './SearchBarILS';
diff --git a/src/lib/config/common.js b/src/lib/config/common.js
index a6a791458..aad3b33a9 100644
--- a/src/lib/config/common.js
+++ b/src/lib/config/common.js
@@ -40,8 +40,12 @@ export const DOCUMENT_RELATIONS = [
 ];
 
 export const DOCUMENT_TYPES = [
-  { value: 'BOOK', text: 'Book' },
-  { value: 'PROCEEDING', text: 'Proceeding' },
-  { value: 'STANDARD', text: 'Standard' },
-  { value: 'PERIODICAL_ISSUE', text: 'Periodical issue' },
+  { value: 'BOOK', text: 'Book', label: 'Book' },
+  { value: 'PROCEEDING', text: 'Proceeding', label: 'Proceeding' },
+  { value: 'STANDARD', text: 'Standard', label: 'Standard' },
+  {
+    value: 'PERIODICAL_ISSUE',
+    text: 'Periodical issue',
+    label: 'Periodical issue',
+  },
 ];
diff --git a/src/lib/config/defaultConfig.js b/src/lib/config/defaultConfig.js
index 51bd8c9db..d87c6557e 100644
--- a/src/lib/config/defaultConfig.js
+++ b/src/lib/config/defaultConfig.js
@@ -65,6 +65,15 @@ export const APP_CONFIG = {
       },
     },
   ],
+  searchBarRSKProps: {
+    autofocus: true,
+    actionProps: { icon: 'search', content: null },
+    uiProps: {
+      className: 'ils-searchbar',
+      fluid: true,
+      size: 'big',
+    },
+  },
 };
 
 export const RECORDS_CONFIG = {
diff --git a/src/lib/modules/Identifiers/Identifiers.js b/src/lib/modules/Identifiers/Identifiers.js
index 64aebdf43..0c9577f1c 100644
--- a/src/lib/modules/Identifiers/Identifiers.js
+++ b/src/lib/modules/Identifiers/Identifiers.js
@@ -24,7 +24,11 @@ export const Identifiers = ({ identifiers }) => {
 };
 
 Identifiers.propTypes = {
-  identifiers: PropTypes.array.isRequired,
+  identifiers: PropTypes.array,
+};
+
+Identifiers.defaultProps = {
+  identifiers: [],
 };
 
 export const IdentifierRows = ({ includeSchemes, identifiers }) => {
diff --git a/src/lib/modules/SearchControls/ClearButton.js b/src/lib/modules/SearchControls/ClearButton.js
index d42fcf269..54cec4350 100644
--- a/src/lib/modules/SearchControls/ClearButton.js
+++ b/src/lib/modules/SearchControls/ClearButton.js
@@ -15,7 +15,7 @@ export default class ClearButton extends Component {
         labelPosition="left"
         onClick={clickHandler}
       >
-        <Icon name="undo" />
+        <Icon name="close" />
         {text}
       </Button>
     );
@@ -30,7 +30,7 @@ ClearButton.propTypes = {
 };
 
 ClearButton.defaultProps = {
-  text: 'Clear query',
+  text: 'Clear search',
   fluid: false,
   disabled: false,
 };
diff --git a/src/lib/modules/SearchControls/SearchControlsOverrides.js b/src/lib/modules/SearchControls/SearchControlsOverrides.js
index 48782fe8f..ecfe533c1 100644
--- a/src/lib/modules/SearchControls/SearchControlsOverrides.js
+++ b/src/lib/modules/SearchControls/SearchControlsOverrides.js
@@ -1,5 +1,4 @@
 import { Pagination } from '@components/Pagination';
-import SearchBar from '@components/SearchBar/SearchBar';
 import { MenuBucketAggregationValueElementOverrides } from '@modules/SearchControls/overridden/MenuBucketAggregationElement';
 import { AvailableLoanBucketAggregationValues } from './overridden/AvailableLoanBucketAggregationValues';
 import { AvailableLoanBucketAggregationElement } from './overridden/AvailableLoanBucketAggregationElement';
@@ -15,7 +14,6 @@ export const SearchControlsOverridesMap = {
   'BucketAggregation.element.menu': MenuBucketAggregationValueElementOverrides,
   'BucketAggregation.element.available-for-loan': AvailableLoanBucketAggregationElement,
   'BucketAggregationValues.element.available-for-loan': AvailableLoanBucketAggregationValues,
-  SearchBar: SearchBar,
   'Pagination.element': Pagination,
   'EmptyResults.element': SearchEmptyResults,
   'Error.element': SearchError,
diff --git a/src/lib/modules/SearchControls/SearchEmptyResults.js b/src/lib/modules/SearchControls/SearchEmptyResults.js
index 9b0d1e403..0c32384a6 100644
--- a/src/lib/modules/SearchControls/SearchEmptyResults.js
+++ b/src/lib/modules/SearchControls/SearchEmptyResults.js
@@ -1,22 +1,20 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { Segment } from 'semantic-ui-react';
+import { Header, Segment } from 'semantic-ui-react';
 import ClearButton from '@modules/SearchControls/ClearButton';
 import { SearchMessage } from '@modules/SearchControls/SearchMessage';
 
 export default class SearchEmptyResults extends Component {
   render() {
     const { queryString, resetQuery, extraContent } = this.props;
-    const currentSearch = `Current search "${queryString}"`;
     return (
-      <SearchMessage title="No results found!" icon="search">
+      <SearchMessage title="No results found searching for" icon="search">
         {queryString && (
-          <>
-            <div className="empty-results-current">{currentSearch}</div>
-            <Segment.Inline>
-              <ClearButton clickHandler={resetQuery} /> {extraContent}
-            </Segment.Inline>
-          </>
+          <Segment.Inline>
+            <Header as="h1">"{queryString}"</Header>
+            <ClearButton clickHandler={resetQuery} />
+            {extraContent}
+          </Segment.Inline>
         )}
       </SearchMessage>
     );
@@ -25,11 +23,12 @@ export default class SearchEmptyResults extends Component {
 
 SearchEmptyResults.propTypes = {
   queryString: PropTypes.string,
-  resetQuery: PropTypes.func.isRequired,
+  resetQuery: PropTypes.func,
   extraContent: PropTypes.node,
 };
 
 SearchEmptyResults.defaultProps = {
   queryString: '',
+  resetQuery: null,
   extraContent: null,
 };
diff --git a/src/lib/modules/SearchControls/SearchError.js b/src/lib/modules/SearchControls/SearchError.js
index 59be8c99f..251e05c62 100644
--- a/src/lib/modules/SearchControls/SearchError.js
+++ b/src/lib/modules/SearchControls/SearchError.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import _get from 'lodash/get';
+import { Header } from 'semantic-ui-react';
 import { EmailLink } from '@components/EmailLink';
 import { invenioConfig } from '@config';
 import { SearchMessage } from '@modules/SearchControls/SearchMessage';
@@ -18,11 +19,13 @@ export const SearchError = ({ error }) => {
         title="Something went wrong while fetching results."
         icon="warning"
       >
-        Please try again later. If the problem persists,{' '}
-        <EmailLink email={invenioConfig.APP.supportEmail}>
-          contact the technical support
-        </EmailLink>
-        .
+        <Header.Subheader>
+          Please try again later. If the problem persists,{' '}
+          <EmailLink email={invenioConfig.APP.supportEmail}>
+            contact the technical support
+          </EmailLink>
+          .
+        </Header.Subheader>
       </SearchMessage>
     );
   }
diff --git a/src/lib/modules/SearchControls/SearchMessage.js b/src/lib/modules/SearchControls/SearchMessage.js
index f9869024b..4e750f6b1 100644
--- a/src/lib/modules/SearchControls/SearchMessage.js
+++ b/src/lib/modules/SearchControls/SearchMessage.js
@@ -8,17 +8,17 @@ export const SearchMessage = ({ title, icon, children }) => (
       {icon && <Icon name={icon} />}
       {title}
     </Header>
-    {children && <Header.Subheader>{children}</Header.Subheader>}
+    {children}
   </Segment>
 );
 
 SearchMessage.propTypes = {
-  title: PropTypes.string.isRequired,
   children: PropTypes.node,
   icon: PropTypes.string,
+  title: PropTypes.string.isRequired,
 };
 
 SearchMessage.defaultProps = {
-  icon: null,
   children: null,
+  icon: null,
 };
diff --git a/src/lib/modules/Series/SeriesLiteratureSearch/SeriesLiteratureSearch.js b/src/lib/modules/Series/SeriesLiteratureSearch/SeriesLiteratureSearch.js
index fed25f7c0..fe2776c00 100644
--- a/src/lib/modules/Series/SeriesLiteratureSearch/SeriesLiteratureSearch.js
+++ b/src/lib/modules/Series/SeriesLiteratureSearch/SeriesLiteratureSearch.js
@@ -20,7 +20,7 @@ import {
 import { Container, Divider, Loader, Responsive } from 'semantic-ui-react';
 import { qsBuilderForSeries } from './RequestSerializer';
 import { SeriesLiteratureSearchMobile } from './SeriesLiteratureSearchMobile';
-import { setReactSearchKitInitialQueryState } from '@config';
+import { invenioConfig, setReactSearchKitInitialQueryState } from '@config';
 
 export class SeriesLiteratureSearch extends React.Component {
   renderLoader = () => {
@@ -62,7 +62,10 @@ export class SeriesLiteratureSearch extends React.Component {
           >
             <>
               <Container className="series-details-search-container">
-                <SearchBar placeholder="Search for volumes or issues..." />
+                <SearchBar
+                  placeholder="Search for volumes or issues..."
+                  {...invenioConfig.APP.searchBarRSKProps}
+                />
               </Container>
               <Responsive minWidth={Responsive.onlyTablet.minWidth}>
                 <ResultsLoader renderElement={this.renderLoader}>
diff --git a/src/lib/modules/Series/SeriesLiteratureSearch/SeriesLiteratureSearchMobile.js b/src/lib/modules/Series/SeriesLiteratureSearch/SeriesLiteratureSearchMobile.js
index f6ca5cd33..9528d88dc 100644
--- a/src/lib/modules/Series/SeriesLiteratureSearch/SeriesLiteratureSearchMobile.js
+++ b/src/lib/modules/Series/SeriesLiteratureSearch/SeriesLiteratureSearchMobile.js
@@ -1,10 +1,14 @@
 import { Error as IlsError } from '@components/Error';
 import { SearchControlsMobile } from '@modules/SearchControls/SearchControlsMobile';
-import SearchEmptyResults from '@modules/SearchControls/SearchEmptyResults';
 import SearchFooter from '@modules/SearchControls/SearchFooter';
 import SearchPagination from '@modules/SearchControls/SearchPagination';
 import React from 'react';
-import { Error, ResultsGrid, ResultsLoader } from 'react-searchkit';
+import {
+  Error,
+  ResultsGrid,
+  ResultsLoader,
+  EmptyResults,
+} from 'react-searchkit';
 import { Container, Ref, Sticky } from 'semantic-ui-react';
 
 export class SeriesLiteratureSearchMobile extends React.Component {
@@ -18,7 +22,7 @@ export class SeriesLiteratureSearchMobile extends React.Component {
     return (
       <Container fluid className="grid-documents-search">
         <ResultsLoader>
-          <SearchEmptyResults />
+          <EmptyResults />
           <Error renderElement={this.renderError} />
           <Ref innerRef={this.stickyRef}>
             <Container fluid>
diff --git a/src/lib/modules/Series/SeriesLiteratureSearch/__snapshots__/SeriesLiteratureSearch.test.js.snap b/src/lib/modules/Series/SeriesLiteratureSearch/__snapshots__/SeriesLiteratureSearch.test.js.snap
index a97955955..6f5160be7 100644
--- a/src/lib/modules/Series/SeriesLiteratureSearch/__snapshots__/SeriesLiteratureSearch.test.js.snap
+++ b/src/lib/modules/Series/SeriesLiteratureSearch/__snapshots__/SeriesLiteratureSearch.test.js.snap
@@ -20,7 +20,6 @@ exports[`SeriesLiteratureSearch tests should load the SeriesLiteratureSearch com
         "Pagination.element": [Function],
         "ResultsGrid": [Function],
         "ResultsList": [Function],
-        "SearchBar": [Function],
         "SortBy.element.desktop": [Function],
         "SortBy.element.mobile": [Function],
       }
@@ -86,7 +85,21 @@ exports[`SeriesLiteratureSearch tests should load the SeriesLiteratureSearch com
         className="series-details-search-container"
       >
         <Connect(Overridable(SearchBarUncontrolled))
+          actionProps={
+            Object {
+              "content": null,
+              "icon": "search",
+            }
+          }
+          autofocus={true}
           placeholder="Search for volumes or issues..."
+          uiProps={
+            Object {
+              "className": "ils-searchbar",
+              "fluid": true,
+              "size": "big",
+            }
+          }
         />
       </Container>
       <Responsive
diff --git a/src/lib/pages/backoffice/Acquisition/Order/OrderSearch/OrderSearch.js b/src/lib/pages/backoffice/Acquisition/Order/OrderSearch/OrderSearch.js
index 566fe6084..ff69db682 100644
--- a/src/lib/pages/backoffice/Acquisition/Order/OrderSearch/OrderSearch.js
+++ b/src/lib/pages/backoffice/Acquisition/Order/OrderSearch/OrderSearch.js
@@ -4,6 +4,7 @@ import { ExportReactSearchKitResults } from '@components/backoffice/ExportSearch
 import history from '@history';
 import SearchAggregationsCards from '@modules/SearchControls/SearchAggregationsCards';
 import { SearchControls } from '@modules/SearchControls/SearchControls';
+import { QueryBuildHelper } from '@components/SearchBar/QueryBuildHelper';
 import { SearchControlsOverridesMap } from '@modules/SearchControls/SearchControlsOverrides';
 import SearchFooter from '@modules/SearchControls/SearchFooter';
 import { AcquisitionRoutes } from '@routes/urls';
@@ -20,7 +21,7 @@ import {
   SearchBar,
 } from 'react-searchkit';
 import { Container, Grid, Header } from 'semantic-ui-react';
-import { setReactSearchKitInitialQueryState } from '@config';
+import { invenioConfig, setReactSearchKitInitialQueryState } from '@config';
 
 class OrderResponseSerializer {
   serialize(results) {
@@ -84,8 +85,9 @@ export class OrderSearch extends Component {
               <Container fluid className="spaced">
                 <SearchBar
                   placeholder="Search for orders..."
-                  queryHelperFields={helperFields}
+                  {...invenioConfig.APP.searchBarRSKProps}
                 />
+                <QueryBuildHelper fields={helperFields} />
               </Container>
               <Container fluid className="bo-search-body">
                 <Grid>
diff --git a/src/lib/pages/backoffice/Acquisition/Vendor/VendorSearch/VendorSearch.js b/src/lib/pages/backoffice/Acquisition/Vendor/VendorSearch/VendorSearch.js
index 493571420..858944054 100644
--- a/src/lib/pages/backoffice/Acquisition/Vendor/VendorSearch/VendorSearch.js
+++ b/src/lib/pages/backoffice/Acquisition/Vendor/VendorSearch/VendorSearch.js
@@ -3,6 +3,7 @@ import { NewButton } from '@components/backoffice/buttons/NewButton';
 import { ExportReactSearchKitResults } from '@components/backoffice/ExportSearchResults';
 import history from '@history';
 import { SearchControls } from '@modules/SearchControls/SearchControls';
+import { QueryBuildHelper } from '@components/SearchBar/QueryBuildHelper';
 import { SearchControlsOverridesMap } from '@modules/SearchControls/SearchControlsOverrides';
 import SearchFooter from '@modules/SearchControls/SearchFooter';
 import { AcquisitionRoutes } from '@routes/urls';
@@ -20,6 +21,7 @@ import {
 } from 'react-searchkit';
 import { setReactSearchKitInitialQueryState } from '@config';
 import { Container, Grid, Header } from 'semantic-ui-react';
+import { invenioConfig } from '@config';
 
 export class VendorSearch extends Component {
   searchApi = new InvenioSearchApi({
@@ -34,7 +36,7 @@ export class VendorSearch extends Component {
       {
         name: 'name',
         field: 'name',
-        defaultValue: '"Test vendor"',
+        defaultValue: '"Vendor Name"',
       },
       {
         name: 'email',
@@ -44,7 +46,7 @@ export class VendorSearch extends Component {
       {
         name: 'address',
         field: 'address',
-        defaultValue: '"Geneva"',
+        defaultValue: '"Vendor Address"',
       },
     ];
 
@@ -67,8 +69,9 @@ export class VendorSearch extends Component {
               <Container fluid className="spaced">
                 <SearchBar
                   placeholder="Search for vendors..."
-                  queryHelperFields={helperFields}
+                  {...invenioConfig.APP.searchBarRSKProps}
                 />
+                <QueryBuildHelper fields={helperFields} />
               </Container>
               <Container fluid className="bo-search-body">
                 <Grid>
diff --git a/src/lib/pages/backoffice/Actions/CheckIn/ItemsSearch/ItemsSearch.js b/src/lib/pages/backoffice/Actions/CheckIn/ItemsSearch/ItemsSearch.js
index 58aa297c0..ec76387a6 100644
--- a/src/lib/pages/backoffice/Actions/CheckIn/ItemsSearch/ItemsSearch.js
+++ b/src/lib/pages/backoffice/Actions/CheckIn/ItemsSearch/ItemsSearch.js
@@ -1,4 +1,4 @@
-import { SearchBar } from '@components/SearchBar';
+import { SearchBarILS } from '@components/SearchBar';
 import { LoanListEntry } from '@modules/Loan/backoffice/LoanList/LoanListEntry';
 import SearchResultsList from '@modules/SearchControls/SearchResultsList';
 import PropTypes from 'prop-types';
@@ -7,55 +7,19 @@ import _isEmpty from 'lodash/isEmpty';
 import { Header } from 'semantic-ui-react';
 
 export default class ItemsSearch extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { queryString: '' };
-  }
-
-  onInputChange = queryString => {
-    this.setState({
-      queryString: queryString,
-    });
-  };
-
   executeCheckinAndClearInput = async queryString => {
     const { checkin } = this.props;
     if (queryString.trim() === '') return;
     await checkin(queryString);
-    this.setState({ queryString: '' });
-  };
-
-  onPasteHandler = event => {
-    const queryString = (event.clipboardData || window.clipboardData).getData(
-      'text'
-    );
-    this.executeCheckinAndClearInput(queryString);
-  };
-
-  onKeyPressHandler = event => {
-    const { queryString } = this.state;
-    if (event.key === 'Enter') {
-      this.executeCheckinAndClearInput(queryString);
-    }
   };
 
   render() {
     const { loans } = this.props;
-    const { queryString } = this.state;
     return (
       <>
-        <SearchBar
-          action={{
-            icon: 'search',
-            onClick: () => this.executeCheckinAndClearInput(queryString),
-          }}
-          queryString={queryString}
-          updateQueryString={this.executeCheckinAndClearInput}
+        <SearchBarILS
+          onSearchHandler={this.executeCheckinAndClearInput}
           placeholder="Scan physical copy barcode to check-in..."
-          onPaste={this.onPasteHandler}
-          onChange={(e, { value }) => this.onInputChange(value)}
-          value={queryString}
-          onKeyPress={event => this.onKeyPressHandler(event)}
         />
 
         {!_isEmpty(loans) ? (
diff --git a/src/lib/pages/backoffice/Actions/CheckOut/CheckOutSearch/CheckOutSearch.js b/src/lib/pages/backoffice/Actions/CheckOut/CheckOutSearch/CheckOutSearch.js
index 31298400a..51d588c33 100644
--- a/src/lib/pages/backoffice/Actions/CheckOut/CheckOutSearch/CheckOutSearch.js
+++ b/src/lib/pages/backoffice/Actions/CheckOut/CheckOutSearch/CheckOutSearch.js
@@ -1,55 +1,19 @@
-import { SearchBar } from '@components/SearchBar';
+import { SearchBarILS } from '@components/SearchBar';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 export default class CheckOutSearch extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { queryString: '' };
-  }
-
-  onInputChange = queryString => {
-    this.setState({
-      queryString: queryString,
-    });
-  };
-
   executeCheckoutAndClearInput = async query => {
     const { checkOutSearch } = this.props;
     if (query.trim() === '') return;
     await checkOutSearch(query);
-    this.setState({ queryString: '' });
-  };
-
-  onPasteHandler = async event => {
-    const queryString = (event.clipboardData || window.clipboardData).getData(
-      'text'
-    );
-    this.executeCheckoutAndClearInput(queryString);
-  };
-
-  onKeyPressHandler = event => {
-    const { queryString } = this.state;
-    if (event.key === 'Enter') {
-      this.executeCheckoutAndClearInput(queryString);
-    }
   };
 
   render() {
-    const { queryString } = this.state;
     return (
-      <SearchBar
-        action={{
-          icon: 'search',
-          onClick: () => this.executeCheckoutAndClearInput(queryString),
-        }}
-        queryString={queryString}
-        onChange={(e, { value }) => this.onInputChange(value)}
-        updateQueryString={this.executeCheckoutAndClearInput}
+      <SearchBarILS
+        onSearchHandler={this.executeCheckoutAndClearInput}
         placeholder="Insert patron id/email or physical copy barcode to start check-out..."
-        onPaste={this.onPasteHandler}
-        value={queryString}
-        onKeyPress={event => this.onKeyPressHandler(event)}
       />
     );
   }
diff --git a/src/lib/pages/backoffice/Document/DocumentSearch/DocumentSearch.js b/src/lib/pages/backoffice/Document/DocumentSearch/DocumentSearch.js
index e0b199e90..91f2f9c88 100644
--- a/src/lib/pages/backoffice/Document/DocumentSearch/DocumentSearch.js
+++ b/src/lib/pages/backoffice/Document/DocumentSearch/DocumentSearch.js
@@ -20,6 +20,8 @@ import { NewButton } from '@components/backoffice/buttons/NewButton';
 import SearchAggregationsCards from '@modules/SearchControls/SearchAggregationsCards';
 import SearchFooter from '@modules/SearchControls/SearchFooter';
 import { SearchControls } from '@modules/SearchControls/SearchControls';
+import { QueryBuildHelper } from '@components/SearchBar/QueryBuildHelper';
+import { invenioConfig } from '@config';
 import history from '@history';
 
 export class DocumentSearch extends Component {
@@ -65,9 +67,10 @@ export class DocumentSearch extends Component {
             <>
               <Container fluid className="spaced">
                 <SearchBar
-                  queryHelperFields={helperFields}
                   placeholder="Search for documents..."
+                  {...invenioConfig.APP.searchBarRSKProps}
                 />
+                <QueryBuildHelper fields={helperFields} />
               </Container>
               <Container fluid className="bo-search-body">
                 <Grid>
diff --git a/src/lib/pages/backoffice/DocumentRequest/DocumentRequestSearch/DocumentRequestSearch.js b/src/lib/pages/backoffice/DocumentRequest/DocumentRequestSearch/DocumentRequestSearch.js
index 7fce10d4c..fe8e829f7 100644
--- a/src/lib/pages/backoffice/DocumentRequest/DocumentRequestSearch/DocumentRequestSearch.js
+++ b/src/lib/pages/backoffice/DocumentRequest/DocumentRequestSearch/DocumentRequestSearch.js
@@ -2,6 +2,7 @@ import SearchAggregationsCards from '@modules/SearchControls/SearchAggregationsC
 import { SearchControls } from '@modules/SearchControls/SearchControls';
 import { SearchControlsOverridesMap } from '@modules/SearchControls/SearchControlsOverrides';
 import SearchFooter from '@modules/SearchControls/SearchFooter';
+import { QueryBuildHelper } from '@components/SearchBar/QueryBuildHelper';
 import { DocumentRequestListEntry } from './DocumentRequestListEntry';
 import { OverridableContext } from 'react-overridable';
 import React, { Component } from 'react';
@@ -16,7 +17,7 @@ import {
   EmptyResults,
 } from 'react-searchkit';
 import { documentRequestApi } from '@api/documentRequests';
-import { setReactSearchKitInitialQueryState } from '@config';
+import { invenioConfig, setReactSearchKitInitialQueryState } from '@config';
 import { ExportReactSearchKitResults } from '@components/backoffice/ExportSearchResults';
 import history from '@history';
 import { responseRejectInterceptor } from '@api/base';
@@ -67,8 +68,9 @@ export class DocumentRequestSearch extends Component {
               <Container fluid className="spaced">
                 <SearchBar
                   placeholder="Search for document requests"
-                  queryHelperFields={helperFields}
+                  {...invenioConfig.APP.searchBarRSKProps}
                 />
+                <QueryBuildHelper fields={helperFields} />
               </Container>
               <Grid>
                 <Grid.Row columns={2}>
diff --git a/src/lib/pages/backoffice/EItem/EItemSearch/EItemSearch.js b/src/lib/pages/backoffice/EItem/EItemSearch/EItemSearch.js
index 889141722..78d3ceeb9 100644
--- a/src/lib/pages/backoffice/EItem/EItemSearch/EItemSearch.js
+++ b/src/lib/pages/backoffice/EItem/EItemSearch/EItemSearch.js
@@ -1,6 +1,7 @@
 import SearchAggregationsCards from '@modules/SearchControls/SearchAggregationsCards';
 import { SearchControls } from '@modules/SearchControls/SearchControls';
 import { SearchControlsOverridesMap } from '@modules/SearchControls/SearchControlsOverrides';
+import { QueryBuildHelper } from '@components/SearchBar/QueryBuildHelper';
 import SearchFooter from '@modules/SearchControls/SearchFooter';
 import EItemListEntry from './EItemListEntry';
 import { OverridableContext } from 'react-overridable';
@@ -16,7 +17,7 @@ import {
   Error,
   InvenioSearchApi,
 } from 'react-searchkit';
-import { setReactSearchKitInitialQueryState } from '@config';
+import { invenioConfig, setReactSearchKitInitialQueryState } from '@config';
 import { eItemApi } from '@api/eitems';
 import { responseRejectInterceptor } from '@api/base';
 import { ExportReactSearchKitResults } from '@components/backoffice/ExportSearchResults';
@@ -83,8 +84,9 @@ export class EItemSearch extends Component {
               <Container fluid className="spaced">
                 <SearchBar
                   placeholder="Search for eitems..."
-                  queryHelperFields={helperFields}
+                  {...invenioConfig.APP.searchBarRSKProps}
                 />
+                <QueryBuildHelper fields={helperFields} />
               </Container>
               <Grid>
                 <Grid.Row columns={2}>
diff --git a/src/lib/pages/backoffice/ILL/BorrowingRequest/BorrowingRequestSearch/BorrowingRequestSearch.js b/src/lib/pages/backoffice/ILL/BorrowingRequest/BorrowingRequestSearch/BorrowingRequestSearch.js
index db32399ac..ccc4b15a2 100644
--- a/src/lib/pages/backoffice/ILL/BorrowingRequest/BorrowingRequestSearch/BorrowingRequestSearch.js
+++ b/src/lib/pages/backoffice/ILL/BorrowingRequest/BorrowingRequestSearch/BorrowingRequestSearch.js
@@ -5,6 +5,7 @@ import history from '@history';
 import SearchAggregationsCards from '@modules/SearchControls/SearchAggregationsCards';
 import { SearchControls } from '@modules/SearchControls/SearchControls';
 import { SearchControlsOverridesMap } from '@modules/SearchControls/SearchControlsOverrides';
+import { QueryBuildHelper } from '@components/SearchBar/QueryBuildHelper';
 import SearchFooter from '@modules/SearchControls/SearchFooter';
 import { ILLRoutes } from '@routes/urls';
 import BorrowingRequestListEntry from './BorrowingRequestList/BorrowingRequestListEntry';
@@ -20,7 +21,7 @@ import {
   SearchBar,
 } from 'react-searchkit';
 import { Container, Grid, Header } from 'semantic-ui-react';
-import { setReactSearchKitInitialQueryState } from '@config';
+import { invenioConfig, setReactSearchKitInitialQueryState } from '@config';
 
 export class BorrowingRequestSearch extends Component {
   searchApi = new InvenioSearchApi({
@@ -70,8 +71,9 @@ export class BorrowingRequestSearch extends Component {
               <Container fluid className="spaced">
                 <SearchBar
                   placeholder="Search for borrowing requests..."
-                  queryHelperFields={helperFields}
+                  {...invenioConfig.APP.searchBarRSKProps}
                 />
+                <QueryBuildHelper fields={helperFields} />
               </Container>
               <Container fluid className="bo-search-body">
                 <Grid>
diff --git a/src/lib/pages/backoffice/ILL/Library/LibrarySearch/LibrarySearch.js b/src/lib/pages/backoffice/ILL/Library/LibrarySearch/LibrarySearch.js
index 9dde98ed4..56bb52640 100644
--- a/src/lib/pages/backoffice/ILL/Library/LibrarySearch/LibrarySearch.js
+++ b/src/lib/pages/backoffice/ILL/Library/LibrarySearch/LibrarySearch.js
@@ -4,6 +4,7 @@ import { ExportReactSearchKitResults } from '@components/backoffice/ExportSearch
 import history from '@history';
 import { SearchControls } from '@modules/SearchControls/SearchControls';
 import { SearchControlsOverridesMap } from '@modules/SearchControls/SearchControlsOverrides';
+import { QueryBuildHelper } from '@components/SearchBar/QueryBuildHelper';
 import SearchFooter from '@modules/SearchControls/SearchFooter';
 import { ILLRoutes } from '@routes/urls';
 import { LibraryListEntry } from './LibraryList';
@@ -19,7 +20,7 @@ import {
   SearchBar,
 } from 'react-searchkit';
 import { Container, Grid, Header } from 'semantic-ui-react';
-import { setReactSearchKitInitialQueryState } from '@config';
+import { invenioConfig, setReactSearchKitInitialQueryState } from '@config';
 
 export class LibrarySearch extends Component {
   searchApi = new InvenioSearchApi({
@@ -47,7 +48,6 @@ export class LibrarySearch extends Component {
         defaultValue: '"Geneva"',
       },
     ];
-
     const initialState = setReactSearchKitInitialQueryState('ILL_LIBRARIES');
 
     return (
@@ -66,9 +66,10 @@ export class LibrarySearch extends Component {
             <>
               <Container fluid className="spaced">
                 <SearchBar
-                  queryHelperFields={helperFields}
                   placeholder="Search for libaries..."
+                  {...invenioConfig.APP.searchBarRSKProps}
                 />
+                <QueryBuildHelper fields={helperFields} />
               </Container>
               <Container fluid className="bo-search-body">
                 <Grid>
diff --git a/src/lib/pages/backoffice/Item/ItemSearch/ItemSearch.js b/src/lib/pages/backoffice/Item/ItemSearch/ItemSearch.js
index 739e3fae9..c51e3c35f 100644
--- a/src/lib/pages/backoffice/Item/ItemSearch/ItemSearch.js
+++ b/src/lib/pages/backoffice/Item/ItemSearch/ItemSearch.js
@@ -12,7 +12,7 @@ import {
   InvenioSearchApi,
   EmptyResults,
 } from 'react-searchkit';
-import { setReactSearchKitInitialQueryState } from '@config';
+import { invenioConfig, setReactSearchKitInitialQueryState } from '@config';
 import { Error as IlsError } from '@components/Error';
 import { itemApi } from '@api/items';
 import { ExportReactSearchKitResults } from '@components/backoffice/ExportSearchResults';
@@ -23,6 +23,7 @@ import { responseRejectInterceptor } from '@api/base';
 import SearchAggregationsCards from '@modules/SearchControls/SearchAggregationsCards';
 import SearchFooter from '@modules/SearchControls/SearchFooter';
 import { SearchControls } from '@modules/SearchControls/SearchControls';
+import { QueryBuildHelper } from '@components/SearchBar/QueryBuildHelper';
 
 export class ItemSearch extends Component {
   searchApi = new InvenioSearchApi({
@@ -81,8 +82,9 @@ export class ItemSearch extends Component {
               <Container fluid className="spaced">
                 <SearchBar
                   placeholder="Search for physical copies..."
-                  queryHelperFields={helperFields}
+                  {...invenioConfig.APP.searchBarRSKProps}
                 />
+                <QueryBuildHelper fields={helperFields} />
               </Container>
 
               <Container fluid className="bo-search-body">
diff --git a/src/lib/pages/backoffice/Loan/LoanDetails/AvailableItems/AvailableItems.js b/src/lib/pages/backoffice/Loan/LoanDetails/AvailableItems/AvailableItems.js
index a812527a4..00b14ac00 100644
--- a/src/lib/pages/backoffice/Loan/LoanDetails/AvailableItems/AvailableItems.js
+++ b/src/lib/pages/backoffice/Loan/LoanDetails/AvailableItems/AvailableItems.js
@@ -5,7 +5,7 @@ import { InfoMessage } from '@components/backoffice/InfoMessage';
 import { Error } from '@components/Error';
 import { Loader } from '@components/Loader';
 import { ResultsTable } from '@components/ResultsTable/ResultsTable';
-import { SearchBar } from '@components/SearchBar';
+import { SearchBarILS } from '@components/SearchBar';
 import { invenioConfig } from '@config';
 import { BackOfficeRoutes } from '@routes/urls';
 import _isEmpty from 'lodash/isEmpty';
@@ -190,11 +190,12 @@ export default class AvailableItems extends Component {
 
   renderSearchBar() {
     const { query } = this.state;
+    // NOTE: this one has to be revised with the latest requirements
     return (
-      <SearchBar
+      <SearchBarILS
         currentQueryString={query}
-        onInputChange={this.updateSearchQuery}
-        executeSearch={this.onSearchExecute}
+        onInputChange={this.onSearchExecute}
+        onSearchHandler={this.onSearchExecute}
         placeholder="Insert barcode..."
       />
     );
diff --git a/src/lib/pages/backoffice/Loan/LoanSearch/LoanSearch.js b/src/lib/pages/backoffice/Loan/LoanSearch/LoanSearch.js
index e73710bc7..0d601fddd 100644
--- a/src/lib/pages/backoffice/Loan/LoanSearch/LoanSearch.js
+++ b/src/lib/pages/backoffice/Loan/LoanSearch/LoanSearch.js
@@ -22,6 +22,8 @@ import SearchFooter from '@modules/SearchControls/SearchFooter';
 import SearchAggregationsCards from '@modules/SearchControls/SearchAggregationsCards';
 import { setReactSearchKitInitialQueryState } from '@config';
 import { SearchDateRange } from './SearchDateRange';
+import { QueryBuildHelper } from '@components/SearchBar/QueryBuildHelper';
+import { invenioConfig } from '@config';
 
 export class LoanSearch extends Component {
   searchApi = new InvenioSearchApi({
@@ -64,8 +66,9 @@ export class LoanSearch extends Component {
               <Container fluid className="spaced">
                 <SearchBar
                   placeholder="Search for loans"
-                  queryHelperFields={helperFields}
+                  {...invenioConfig.APP.searchBarRSKProps}
                 />
+                <QueryBuildHelper fields={helperFields} />
               </Container>
               <Grid>
                 <Grid.Row columns={2}>
diff --git a/src/lib/pages/backoffice/Patron/PatronDetails/ItemsSearch/ItemsSearch.js b/src/lib/pages/backoffice/Patron/PatronDetails/ItemsSearch/ItemsSearch.js
index 216ea51ca..e5a8d0c25 100644
--- a/src/lib/pages/backoffice/Patron/PatronDetails/ItemsSearch/ItemsSearch.js
+++ b/src/lib/pages/backoffice/Patron/PatronDetails/ItemsSearch/ItemsSearch.js
@@ -1,7 +1,7 @@
 import { recordToPidType } from '@api/utils';
 import { Error } from '@components/Error';
 import { Loader } from '@components/Loader';
-import { SearchBar } from '@components/SearchBar';
+import { SearchBarILS } from '@components/SearchBar';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { Container, Grid } from 'semantic-ui-react';
@@ -62,16 +62,6 @@ export default class ItemsSearch extends Component {
     }
   };
 
-  onKeyPressHandler = e => {
-    const { queryString } = this.props;
-    this.setState({ executedSearch: false });
-    if (e.key === 'Enter' && queryString) {
-      this.executeSearch();
-    }
-  };
-
-  onSearchClickHandler = event => this.executeSearch();
-
   renderResultsList = results => {
     const { patronDetails, clearResults, isLoadingSearch } = this.props;
     const { executedSearch } = this.state;
@@ -82,42 +72,19 @@ export default class ItemsSearch extends Component {
         results={results}
         isLoading={isLoadingSearch}
         executedSearch={executedSearch}
-        clearSearchQuery={this.clearSearchQuery}
       />
     );
   };
 
-  clearSearchQuery = () => {
-    const { clearResults } = this.props;
-
-    // eslint-disable-next-line react/no-unused-state
-    this.setState({ prevSearchQuery: '' });
-    clearResults();
-  };
-
   render() {
-    const {
-      items,
-      isLoading,
-      error,
-      queryString,
-      updateQueryString,
-    } = this.props;
+    const { items, isLoading, error, queryString } = this.props;
     return (
       <>
         <Container className="spaced">
-          <SearchBar
-            action={{
-              icon: 'search',
-              onClick: this.onSearchClickHandler,
-            }}
-            currentQueryString={queryString}
-            updateQueryOnChange
-            executeSearch={this.executeSearch}
-            onKeyPressHandler={this.onKeyPressHandler}
-            updateQueryString={updateQueryString}
+          <SearchBarILS
+            onSearchHandler={this.executeSearch}
             placeholder="Type or paste to search for physical copies..."
-            onPaste={e => this.onPasteHandler(e)}
+            onPasteHandler={this.onPasteHandler}
           />
         </Container>
         <Grid columns={1} stackable relaxed>
@@ -146,7 +113,6 @@ ItemsSearch.propTypes = {
   items: PropTypes.object,
   patronDetails: PropTypes.object.isRequired,
   queryString: PropTypes.string.isRequired,
-  updateQueryString: PropTypes.func.isRequired,
 };
 
 ItemsSearch.defaultProps = {
diff --git a/src/lib/pages/backoffice/Patron/PatronSearch/PatronResultsList.js b/src/lib/pages/backoffice/Patron/PatronSearch/PatronResultsList.js
index 3ce774e96..89b971a32 100644
--- a/src/lib/pages/backoffice/Patron/PatronSearch/PatronResultsList.js
+++ b/src/lib/pages/backoffice/Patron/PatronSearch/PatronResultsList.js
@@ -37,16 +37,28 @@ MailTo.propTypes = {
   row: PropTypes.object.isRequired,
 };
 
-export const PatronResultsList = ({ results }) => {
+export const PatronResultsList = ({ results, renderEmptyResultsElement }) => {
   const columns = [
     { title: 'Name', field: 'metadata.name', formatter: ViewDetails },
     { title: 'E-mail', field: 'metadata.email', formatter: MailTo },
     { title: '#ID', field: 'metadata.id' },
   ];
 
-  return <ResultsTable data={results} columns={columns} title="" />;
+  return (
+    <ResultsTable
+      data={results}
+      columns={columns}
+      renderEmptyResultsElement={renderEmptyResultsElement}
+      title=""
+    />
+  );
 };
 
 PatronResultsList.propTypes = {
   results: PropTypes.array.isRequired,
+  renderEmptyResultsElement: PropTypes.func,
+};
+
+PatronResultsList.defaultProps = {
+  renderEmptyResultsElement: null,
 };
diff --git a/src/lib/pages/backoffice/Patron/PatronSearch/PatronSearch.js b/src/lib/pages/backoffice/Patron/PatronSearch/PatronSearch.js
index 2bb83d884..f5d735384 100644
--- a/src/lib/pages/backoffice/Patron/PatronSearch/PatronSearch.js
+++ b/src/lib/pages/backoffice/Patron/PatronSearch/PatronSearch.js
@@ -1,6 +1,7 @@
 import SearchAggregationsCards from '@modules/SearchControls/SearchAggregationsCards';
 import { SearchControls } from '@modules/SearchControls/SearchControls';
 import { SearchControlsOverridesMap } from '@modules/SearchControls/SearchControlsOverrides';
+import { QueryBuildHelper } from '@components/SearchBar/QueryBuildHelper';
 import SearchFooter from '@modules/SearchControls/SearchFooter';
 import { PatronResultsList } from './PatronResultsList';
 import React, { Component } from 'react';
@@ -17,7 +18,7 @@ import {
 } from 'react-searchkit';
 import { patronApi } from '@api/patrons';
 import { responseRejectInterceptor } from '@api/base';
-import { setReactSearchKitInitialQueryState } from '@config';
+import { invenioConfig, setReactSearchKitInitialQueryState } from '@config';
 import { ExportReactSearchKitResults } from '@components/backoffice/ExportSearchResults';
 
 export class PatronSearch extends Component {
@@ -63,8 +64,9 @@ export class PatronSearch extends Component {
               <Container fluid className="spaced">
                 <SearchBar
                   placeholder="Search for patrons"
-                  queryHelperFields={helperFields}
+                  {...invenioConfig.APP.searchBarRSKProps}
                 />
+                <QueryBuildHelper fields={helperFields} />
               </Container>
               <Grid>
                 <Grid.Row columns={2}>
@@ -81,13 +83,14 @@ export class PatronSearch extends Component {
                           />
                         </Grid.Column>
                         <Grid.Column>
-                          <EmptyResults />
                           <Error />
                           <SearchControls
                             modelName="PATRONS"
                             withLayoutSwitcher={false}
                           />
-                          <ResultsList />
+                          <ResultsList
+                            renderEmptyResultsElement={() => <EmptyResults />}
+                          />
                           <SearchFooter />
                         </Grid.Column>
                       </Grid>
diff --git a/src/lib/pages/backoffice/Series/SeriesSearch/SeriesSearch.js b/src/lib/pages/backoffice/Series/SeriesSearch/SeriesSearch.js
index 6394af7f1..2854887f7 100644
--- a/src/lib/pages/backoffice/Series/SeriesSearch/SeriesSearch.js
+++ b/src/lib/pages/backoffice/Series/SeriesSearch/SeriesSearch.js
@@ -1,6 +1,7 @@
 import SearchAggregationsCards from '@modules/SearchControls/SearchAggregationsCards';
 import { SearchControls } from '@modules/SearchControls/SearchControls';
 import { SearchControlsOverridesMap } from '@modules/SearchControls/SearchControlsOverrides';
+import { QueryBuildHelper } from '@components/SearchBar/QueryBuildHelper';
 import SearchFooter from '@modules/SearchControls/SearchFooter';
 import { SeriesListEntry } from './SeriesListEntry';
 import { OverridableContext } from 'react-overridable';
@@ -18,7 +19,7 @@ import {
 } from 'react-searchkit';
 import { seriesApi } from '@api/series/series';
 import { responseRejectInterceptor } from '@api/base';
-import { setReactSearchKitInitialQueryState } from '@config';
+import { invenioConfig, setReactSearchKitInitialQueryState } from '@config';
 import { ExportReactSearchKitResults } from '@components/backoffice/ExportSearchResults';
 import { NewButton } from '@components/backoffice/buttons/NewButton';
 import { BackOfficeRoutes } from '@routes/urls';
@@ -79,8 +80,9 @@ export class SeriesSearch extends Component {
               <Container fluid className="spaced">
                 <SearchBar
                   placeholder="Search for series"
-                  queryHelperFields={helperFields}
+                  {...invenioConfig.APP.searchBarRSKProps}
                 />
+                <QueryBuildHelper fields={helperFields} />
               </Container>
               <Grid>
                 <Grid.Row columns={2}>
diff --git a/src/lib/pages/frontsite/Documents/DocumentDetails/DocumentDetails.js b/src/lib/pages/frontsite/Documents/DocumentDetails/DocumentDetails.js
index 1f88bd7de..b795010f7 100644
--- a/src/lib/pages/frontsite/Documents/DocumentDetails/DocumentDetails.js
+++ b/src/lib/pages/frontsite/Documents/DocumentDetails/DocumentDetails.js
@@ -3,7 +3,7 @@ import { AuthenticationGuard } from '@authentication/components/AuthenticationGu
 import { Breadcrumbs } from '@components/Breadcrumbs';
 import { Error } from '@components/Error';
 import { ILSParagraphPlaceholder } from '@components/ILSPlaceholder';
-import { SearchBar } from '@components/SearchBar';
+import { SearchBarILS } from '@components/SearchBar';
 import { goTo } from '@history';
 import { DocumentStats } from '@modules/Document/DocumentStats';
 import LiteratureTags from '@modules/Literature/LiteratureTags';
@@ -173,7 +173,7 @@ class DocumentDetails extends Component {
         >
           <Container fluid className="literature-search-container">
             <Container>
-              <SearchBar updateQueryString={this.onSearchClick} />
+              <SearchBarILS onSearchHandler={this.onSearchClick} />
             </Container>
           </Container>
         </Overridable>
diff --git a/src/lib/pages/frontsite/Home/Headline/HomeSearchBar.js b/src/lib/pages/frontsite/Home/Headline/HomeSearchBar.js
index f88ddc1f1..a7b689a88 100644
--- a/src/lib/pages/frontsite/Home/Headline/HomeSearchBar.js
+++ b/src/lib/pages/frontsite/Home/Headline/HomeSearchBar.js
@@ -1,4 +1,4 @@
-import { SearchBar } from '@components/SearchBar';
+import { SearchBarILS } from '@components/SearchBar';
 import { goTo } from '@history';
 import { FrontSiteRoutes } from '@routes/urls';
 import React, { Component } from 'react';
@@ -11,8 +11,8 @@ export class HomeSearchBar extends Component {
 
   render() {
     return (
-      <SearchBar
-        updateQueryString={this.onSearchExecute}
+      <SearchBarILS
+        onSearchHandler={this.onSearchExecute}
         placeholder="Search for books, e-books, series, articles, publications..."
         className="fs-headline"
       />
diff --git a/src/lib/pages/frontsite/Literature/LiteratureSearch/LiteratureSearch.js b/src/lib/pages/frontsite/Literature/LiteratureSearch/LiteratureSearch.js
index de43c6a37..3705e0c9c 100644
--- a/src/lib/pages/frontsite/Literature/LiteratureSearch/LiteratureSearch.js
+++ b/src/lib/pages/frontsite/Literature/LiteratureSearch/LiteratureSearch.js
@@ -20,7 +20,7 @@ import {
 import { Container, Grid, Header, Loader, Responsive } from 'semantic-ui-react';
 import LiteratureSearchMobile from './LiteratureSearchMobile';
 import SearchMessage from './SearchMessage/SearchMessage';
-import { setReactSearchKitInitialQueryState } from '@config';
+import { invenioConfig, setReactSearchKitInitialQueryState } from '@config';
 
 class LiteratureSearch extends Component {
   searchApi = new InvenioSearchApi({
@@ -59,7 +59,10 @@ class LiteratureSearch extends Component {
             <>
               <Container fluid className="literature-search-container">
                 <Container>
-                  <SearchBar placeholder="Search for books, series, articles, publications..." />
+                  <SearchBar
+                    placeholder="Search for books, series, articles, publications..."
+                    {...invenioConfig.APP.searchBarRSKProps}
+                  />
                 </Container>
               </Container>
               <Responsive minWidth={Responsive.onlyComputer.minWidth}>
diff --git a/src/lib/pages/frontsite/Series/SeriesDetails/SeriesDetails.js b/src/lib/pages/frontsite/Series/SeriesDetails/SeriesDetails.js
index 832c45e12..eb9a0d8cb 100644
--- a/src/lib/pages/frontsite/Series/SeriesDetails/SeriesDetails.js
+++ b/src/lib/pages/frontsite/Series/SeriesDetails/SeriesDetails.js
@@ -2,7 +2,7 @@ import { AuthenticationGuard } from '@authentication/components/AuthenticationGu
 import { Breadcrumbs } from '@components/Breadcrumbs';
 import { Error } from '@components/Error';
 import { ILSParagraphPlaceholder } from '@components/ILSPlaceholder';
-import { SearchBar } from '@components/SearchBar';
+import { SearchBarILS } from '@components/SearchBar';
 import { goTo } from '@history';
 import { SeriesLiteratureSearch } from '@modules/Series/SeriesLiteratureSearch';
 import { BackOfficeRoutes, FrontSiteRoutes } from '@routes/urls';
@@ -150,7 +150,7 @@ class SeriesDetails extends React.Component {
             executeSearch={this.onSearchClick}
           >
             <Container>
-              <SearchBar updateQueryString={this.onSearchClick} />
+              <SearchBarILS onSearchHandler={this.onSearchClick} />
             </Container>
           </Overridable>
         </Container>