diff --git a/rero_ils/modules/documents/templates/rero_ils/detailed_view_documents.html b/rero_ils/modules/documents/templates/rero_ils/detailed_view_documents.html
index 462ca2bdb0..abd79280a5 100644
--- a/rero_ils/modules/documents/templates/rero_ils/detailed_view_documents.html
+++ b/rero_ils/modules/documents/templates/rero_ils/detailed_view_documents.html
@@ -21,7 +21,7 @@
 
 {%- block body %}
 <header class="row py-2">
-    <a href="javascript:history.back()"><i class="fa fa-arrow-left"></i> {{ _('Back') }}</a>
+    <a href="javascript:history.back()" class="col-12"><i class="fa fa-arrow-left"></i> {{ _('Back') }}</a>
 </header>
 <div class="row">
   {%- set icon_name = record | document_main_type(false) %}
diff --git a/rero_ils/theme/assets/scss/rero_ils/header.scss b/rero_ils/theme/assets/scss/rero_ils/header.scss
index b25b868cf9..ca9084bf89 100644
--- a/rero_ils/theme/assets/scss/rero_ils/header.scss
+++ b/rero_ils/theme/assets/scss/rero_ils/header.scss
@@ -41,13 +41,6 @@ header {
   transform: rotate(-90deg);
 }
 
-
-#mobileHide {
-  @include media-breakpoint-up(md) {
-    position: fixed;
-    top: 0;
-    z-index: 1000;
-    width: 60%;
-    border: solid lightgray 1px;
-  }
+.rero-ils-second-menu:not(.d-none){
+  border-top: solid #F0F0F0 1px;
 }
diff --git a/rero_ils/theme/templates/rero_ils/footer.html b/rero_ils/theme/templates/rero_ils/footer.html
index e5f918566d..63fc31ac8a 100644
--- a/rero_ils/theme/templates/rero_ils/footer.html
+++ b/rero_ils/theme/templates/rero_ils/footer.html
@@ -16,12 +16,14 @@
   along with this program. If not, see <http://www.gnu.org/licenses/>.
 
 #}
-<footer class="rero-ils-footer container d-flex justify-content-center align-items-center border-top mt-4 py-4">
-  <p class="text-secondary mb-0">
-    {{ _('Developed by') }}
-    <a href="https://www.rero.ch" target="_blank">RERO</a>
-    {{ _('using') }}
-    <a href="https://github.com/rero/rero-ils" target="_blank">RERO ILS v{{version}}</a> &amp;
-    <a href="https://inveniosoftware.org" target="_blank">Invenio</a>
-  </p>
+<footer class="rero-ils-footer border-top mt-4 bg-light d-flex">
+  <div class="container d-flex justify-content-center align-items-center py-4">
+    <p class="text-secondary mb-0">
+      {{ _('Developed by') }}
+      <a href="https://www.rero.ch" target="_blank">RERO</a>
+      {{ _('using') }}
+      <a href="https://github.com/rero/rero-ils" target="_blank">RERO ILS v{{version}}</a> &amp;
+      <a href="https://inveniosoftware.org" target="_blank">Invenio</a>
+    </p>
+  </div>
 </footer>
diff --git a/rero_ils/theme/templates/rero_ils/header.html b/rero_ils/theme/templates/rero_ils/header.html
index 5cc6914f65..92b8608db9 100644
--- a/rero_ils/theme/templates/rero_ils/header.html
+++ b/rero_ils/theme/templates/rero_ils/header.html
@@ -17,126 +17,116 @@
 
 #}
 {%- from "rero_ils/macros/header_menus.html" import menu, submenu, mobile_menu -%}
-<header>
+<header class="sticky-top">
   {%- block navbar %}
+    <!-- SEARCH NAVBAR :: Brand / search / expand ========================= -->
     <nav class="navbar navbar-expand-lg navbar-dark bg-dark rero-ils-header">
-      <div class="container">
+      <div class="container d-flex align-self-center justify-content-between">
         {%- block navbar_brand %}
           {%- if config.THEME_LOGO %}
-            <div class="align-self-center d-flex justify-content-between">
-              <a href="/{% if viewcode != config.RERO_ILS_SEARCH_GLOBAL_VIEW_CODE %}{{ viewcode }}{% endif %}" class="navbar-brand pr-2" id="homepage-logo">
-                <img class="rero-ils-logo navbar-brand" src="{{ url_for('static', filename=config.THEME_LOGO)}}" alt="{{_(config.THEME_SITENAME)}} logo">
-                <div id="{{ viewcode }}-logo"></div>
-              </a>
+            <a href="/{% if viewcode != config.RERO_ILS_SEARCH_GLOBAL_VIEW_CODE %}{{ viewcode }}{% endif %}" class="navbar-brand pr-2" id="homepage-logo">
+              <img class="rero-ils-logo navbar-brand" src="{{ url_for('static', filename=config.THEME_LOGO)}}" alt="{{_(config.THEME_SITENAME)}} logo">
+              <div id="{{ viewcode }}-logo"></div>
+            </a>
           {%- else %}
-              <a href="/{% if viewcode != config.RERO_ILS_SEARCH_GLOBAL_VIEW_CODE %}{{ viewcode }}{% endif %}" class="navbar-brand">{{_(config.THEME_SITENAME)}}</a>
+            <a href="/{% if viewcode != config.RERO_ILS_SEARCH_GLOBAL_VIEW_CODE %}{{ viewcode }}{% endif %}" class="navbar-brand">{{_(config.THEME_SITENAME)}}</a>
           {%- endif %}
-            </div>
         {%- endblock navbar_brand %}
-
         {%- block navbar_search %}
-          <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 }}"
-              language="{{ current_i18n.locale.language[:2] }}"
-            ></main-search-bar>
-          </div>
+          <main-search-bar
+            class="flex-grow-1"
+            placeholder="{{ _('Search') }}"
+            viewcode="{{ viewcode or config.RERO_ILS_SEARCH_GLOBAL_VIEW_CODE }}"
+            language="{{ current_i18n.locale.language[:2] }}"
+          ></main-search-bar>
         {%- 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">
-              <span class="fa fa-bars"></span>
-            </button>
-          </div>
+          <button class="navbar-toggler ml-2" type="button"
+                  data-toggle="collapse" data-target="#mobileHide"
+                  aria-controls="mobileHide" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="fa fa-bars"></span>
+          </button>
         {%- endblock navbar_menus %}
       </div>
     </nav>
-    <!-- Main menus - visible only on large screens -->
-    <nav class="navbar navbar-expand-lg navbar-light bg-light rero-ils-first-menu py-0 d-none d-lg-block">
-      <div class="container">
-        <!-- User menus -->
-        <div class="collapse navbar-collapse justify-content-end">
-          <ul class="navbar-nav flex-wrap">
-            {%- for item in current_menu.submenu('main').children|sort(attribute='order') if item.visible %}
-            {%- if item.children %}
-            <li class="nav-item{{ ' active' if item.active else ''}}">
-              <a class="nav-link collapsed {{ item.cssClass }}" data-toggle="collapse" role="button"
-                 aria-controls="collapseExample" aria-expanded="false"
-                 href="#{{ item.name }}"
-                 {{ "id={}".format(item.id) if item.id }}
-              >
-               {{ item.text|safe }}
-              <i class="fa fa-caret-down" aria-hidden="true"></i>
-              </a>
-            </li>
-            {%- else %}
-            <li class="nav-item{{ ' active' if item.active else ''}}">
-              <a href="{{ item.url }}" {{ "id={}".format(item.id) if item.id }}>{{ item.text|safe }}</a>
-            </li>
-            {%- endif %}
-            {%- endfor %}
-          </ul>
-        </div>
-      </div>
+    <!-- MAIN NAVBAR :: Main menus (visible only on large screens) ======== -->
+    <nav class="navbar navbar-expand-lg navbar-light bg-light rero-ils-first-menu py-0 pr-0 d-none d-lg-block">
+      <!-- User menus -->
+      <ul class="navbar-nav container collapse justify-content-end">
+        {%- for item in current_menu.submenu('main').children|sort(attribute='order') if item.visible %}
+        {%- if item.children %}
+        <li class="nav-item{{ ' active' if item.active else ''}}">
+          <a class="nav-link collapsed {{ item.cssClass }}" data-toggle="collapse" role="button"
+             aria-controls="collapseExample" aria-expanded="false"
+             href="#{{ item.name }}"
+             {{ "id={}".format(item.id) if item.id }}
+          >
+           {{ item.text|safe }}
+          <i class="fa fa-caret-down" aria-hidden="true"></i>
+          </a>
+        </li>
+        {%- else %}
+        <li class="nav-item{{ ' active' if item.active else ''}}">
+          <a href="{{ item.url }}" {{ "id={}".format(item.id) if item.id }}>{{ item.text|safe }}</a>
+        </li>
+        {%- endif %}
+        {%- endfor %}
+      </ul>
     </nav>
-    <!-- Submenus -->
-    <nav class="navbar navbar-expand-lg navbar-light bg-white rero-ils-second-menu py-0 d-none d-lg-block">
+    <!-- SUBMENU NAVBAR =================================================== -->
+    <nav class="navbar navbar-expand-lg navbar-light bg-white rero-ils-second-menu py-0 pr-0 d-none d-lg-block border-bottom">
       <div class="container flex-column" id="navbarHide">
-        <!-- user submenus -->
-          {%- for item in current_menu.submenu('main').children|sort(attribute='order') if item.visible %}
-            {%- if item.children %}
-            <div class="collapse rero-ils-collapse-menu flex-grow-1 w-100" data-parent="#navbarHide" id="{{ item.name }}">
-              <ul class="navbar-nav justify-content-end">
+        {%- for item in current_menu.submenu('main').children|sort(attribute='order') if item.visible %}
+          {%- if item.children %}
+          <div class="collapse rero-ils-collapse-menu flex-grow-1 w-100" data-parent="#navbarHide" id="{{ item.name }}">
+            <ul class="navbar-nav justify-content-end">
+              {%- for child in item.children if child.visible %}
+                <li class="nav-item {{class_name if class_name}}">
+                  <a class="nav-link" href="{{ child.url }}" {{ "id={}".format(child.id) if child.id }}>{{ child.text|safe }}</a>
+                </li>
+              {%- endfor %}
+            </ul>
+          </div>
+          {% endif %}
+        {% endfor %}
+      </div>
+    </nav>
+    <!-- HIDDEN MENUS :: Only visible from medium to extra small screens == -->
+    <nav class="navbar-light bg-light d-lg-none d-xl-none border-bottom collapse" id="mobileHide">
+      <!-- User menus -->
+      <ul class="container navbar-nav navbar-collapse align-items-start list-group list-group-flush">
+        {%- for item in current_menu.submenu('main').children|sort(attribute='order') if item.visible %}
+          {%- if item.children %}
+            <li class="nav-item{{ ' active' if item.active else ''}} w-100 list-group-item bg-light">
+              <a class="nav-link collapsed" href="#{{ item.name }}" data-toggle="collapse" role="button" aria-controls="collapseExample" aria-expanded="false" {{ "id={}".format(item.id) if item.id }}>{{ item.text|safe }} <i class="fa fa-caret-down float-right" aria-hidden="true"></i></a>
+              <ul class="nav collapse pl-2" id="{{ item.name }}" data-parent="#mobileHide">
                 {%- for child in item.children if child.visible %}
-                  <li class="nav-item {{class_name if class_name}}">
+                  <li class="nav-item {{class_name if class_name}} w-100">
                     <a class="nav-link" href="{{ child.url }}" {{ "id={}".format(child.id) if child.id }}>{{ child.text|safe }}</a>
                   </li>
                 {%- endfor %}
               </ul>
-            </div>
-            {% endif %}
-          {% endfor %}
-      </div>
-    </nav>
-    <!-- Menus - visible from medium to extra small screens -->
-    <nav class="navbar-light bg-light d-lg-none d-xl-none navbarSupportedContent collapse border-bottom" id="mobileHide">
-      <div class="container">
-        <!-- User menus -->
-        <ul class="navbar-nav navbar-collapse align-items-start list-group list-group-flush">
-          {%- for item in current_menu.submenu('main').children|sort(attribute='order') if item.visible %}
-            {%- if item.children %}
-              <li class="nav-item{{ ' active' if item.active else ''}} w-100 list-group-item bg-light">
-                <a class="nav-link collapsed" href="#{{ item.name }}" data-toggle="collapse" role="button" aria-controls="collapseExample" aria-expanded="false" {{ "id={}".format(item.id) if item.id }}>{{ item.text|safe }} <i class="fa fa-caret-down float-right" aria-hidden="true"></i></a>
-                <ul class="nav collapse pl-2" id="{{ item.name }}" data-parent="#mobileHide">
-                  {%- for child in item.children if child.visible %}
-                    <li class="nav-item {{class_name if class_name}} w-100">
-                      <a class="nav-link" href="{{ child.url }}" {{ "id={}".format(child.id) if child.id }}>{{ child.text|safe }}</a>
-                    </li>
-                  {%- endfor %}
-                </ul>
-              </li>
-            {%- else %}
-              <li class="nav-item{{ ' active' if item.active else ''}}">
-                <a href="{{ item.url }}" class="nav-link" {{ "id={}".format(item.id) if item.id }}>{{ item.text|safe }}</a>
-              </li>
-            {%- endif %}
-          {%- endfor %}
-        </ul>
-      </div>
+            </li>
+          {%- else %}
+            <li class="nav-item{{ ' active' if item.active else ''}}">
+              <a href="{{ item.url }}" class="nav-link" {{ "id={}".format(item.id) if item.id }}>{{ item.text|safe }}</a>
+            </li>
+          {%- endif %}
+        {%- endfor %}
+      </ul>
     </nav>
   {%- endblock navbar %}
 </header>
+
 {%- block flashmessages %}
-{%- from "rero_ils/macros/messages.html" import flashed_messages with context -%}
-{{ flashed_messages() }}
+  {%- from "rero_ils/macros/messages.html" import flashed_messages with context -%}
+  {{ flashed_messages() }}
 {%- endblock flashmessages %}
 
 {% if False %}
 <div class="container">
   {%- block breadcrumbs %}
-  {%- include "rero_ils/breadcrumbs.html" %}
+    {%- include "rero_ils/breadcrumbs.html" %}
   {%- endblock breadcrumbs %}
 </div>
 {% endif %}
diff --git a/rero_ils/theme/templates/rero_ils/page.html b/rero_ils/theme/templates/rero_ils/page.html
index 4977cd96c3..4daeb2d6c6 100644
--- a/rero_ils/theme/templates/rero_ils/page.html
+++ b/rero_ils/theme/templates/rero_ils/page.html
@@ -85,36 +85,36 @@
     {{ rtl_direction|safe }}{% endif %}{% endif %} itemscope itemtype="http://schema.org/WebPage" data-spy="scroll"
     data-target=".scrollspy-target" {% if viewcode %}id="view-{{ viewcode }}" {% endif %}>
     {%- block outer_body %}
-    {%- block browserupgrade %}
-    <!--[if lt IE 8]>
-          <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your   browser</a> to improve your experience.</p>
+      {%- block browserupgrade %}
+        <!--[if lt IE 8]>
+            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
         <![endif]-->
-    {%- endblock browserupgrade %}
-    {%- block body_inner %}
-    {%- block page_header %}
-    {% include 'rero_ils/header.html' %}
-    {%- endblock page_header %}
+      {%- endblock browserupgrade %}
 
-    {%- block page_body %}
-    <div class="container flex-grow-1 mt-1">
+      {%- block body_inner %}
+        <!-- HEADER ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
+        {%- block page_header %}
+          {% include 'rero_ils/header.html' %}
+        {%- endblock page_header %}
+        <!-- BODY ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
+        {%- block page_body %}
+          <div class="container">
+            {%- block body %}
+            {%- endblock body %}
+          </div>
+        {%- endblock page_body %}
+        <!-- FOOTER ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
+        {%- block page_footer %}
+          {% include 'rero_ils/footer.html' %}
+        {%- endblock page_footer %}
+      {%- endblock body_inner %}
 
-      {%- block body %}
-      {%- endblock body %}
-    </div>
-    {%- endblock page_body %}
-
-    {%- block page_footer %}
-    {% include 'rero_ils/footer.html' %}
-    {%- endblock page_footer %}
-
-    {%- endblock body_inner %}
-
-    {%- block javascript %}
-    {% include 'rero_ils/javascript.html' %}
-    {%- endblock javascript %}
-    {%- block trackingcode %}
-    {% include 'rero_ils/trackingcode.html' %}
-    {%- endblock %}
+      {%- block javascript %}
+        {% include 'rero_ils/javascript.html' %}
+      {%- endblock javascript %}
+      {%- block trackingcode %}
+        {% include 'rero_ils/trackingcode.html' %}
+      {%- endblock %}
     {%- endblock outer_body %}
   </body>
 
diff --git a/rero_ils/theme/templates/rero_ils/search.html b/rero_ils/theme/templates/rero_ils/search.html
index 3f08d60f4a..5ccdd12506 100644
--- a/rero_ils/theme/templates/rero_ils/search.html
+++ b/rero_ils/theme/templates/rero_ils/search.html
@@ -20,10 +20,7 @@
 {% extends 'rero_ils/page.html' %}
 
 {%- block page_body %}
-<div class="container mt-4">
-    <public-search-root></public-search-root>
-</div>
-
+   <public-search-root class="container mt-4"></public-search-root>
 {%- endblock page_body -%}
 
 {%- block javascript %}