diff --git a/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/_custom.scss b/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/_custom.scss
index d4c685a60..7646e3a0e 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/_custom.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/_custom.scss
@@ -121,7 +121,7 @@ header {
       div.navbar-collapse {
          float: right;
       }
-      @media (max-width: 768px) {
+      @media (max-width: 767px) {
          & {
             position: relative; 
          }
@@ -190,6 +190,19 @@ div.banner {
    }
 }
 
+div.vertical-menu {
+   border-radius: 0;
+   margin-top: 0.5rem;
+   a.list-group-item { 
+      background-color: $info;
+      border: 0;
+      margin-bottom: 0.25rem;
+      &:hover {
+         background-color: shade-color($info, 5%)
+      }
+   }
+}
+
 footer.footer {
    background: $dark;
    padding-top: 10px;
diff --git a/src/Bundle/ChillMainBundle/Resources/views/layoutWithVerticalMenu.html.twig b/src/Bundle/ChillMainBundle/Resources/views/layoutWithVerticalMenu.html.twig
index fca3723aa..1a7b97e24 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/layoutWithVerticalMenu.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/layoutWithVerticalMenu.html.twig
@@ -54,7 +54,7 @@
                 {% block layout_wvm_content %}<!-- content of the layoutWithVerticalMenu is empty -->
                 {% endblock  %}
             </div>
-            <div class="col-3">
+            <div class="col-md-3">
                 {% block vertical_menu_content %}<!-- vertical menu of the layoutWithVerticalMenu is empty -->
                 {% endblock %}
             </div>
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/banner.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/banner.html.twig
index 95a246a8c..2aca13376 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/banner.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/banner.html.twig
@@ -1,30 +1,35 @@
 <div class="banner banner-accompanying-course">
-    <div class="grid-12 parent" id="header-accompanying_course-name" >
-        <div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent">
+    <div id="header-accompanying_course-name" class="header-name">
+        <div class="container-xxl">
+            <div class="row">
+
+                <div class="col-sm-5">
+                    <h1>
+                        <i class="fa fa-random fa-fw"></i>
+                        {{ 'Accompanying Course'|trans }}
+                        <span class="id-number">{{ accompanyingCourse.id }}</span>
+                    </h1>
+                </div>
+
+                {# vue teleport fragment here #}
+                <div class="col-sm-3" id="banner-flags"></div>
+
+                {# vue teleport fragment here #}
+                <div class="col-sm-3" id="banner-status"></div>
 
-            <div class="grid-6">
-                <h1>
-                    <i class="fa fa-random fa-fw"></i>
-                    {{ 'Accompanying Course'|trans }}
-                    <span class="id-number">{{ accompanyingCourse.id }}</span>
-                </h1>
             </div>
+        </div>
+        
+    </div>
+    <div id="header-accompanying_course-details" class="header-details">
+        <div class="container-xxl">
+            <div class="row justify-content-md-right">
 
-            {# vue teleport fragment here #}
-            <div class="grid-3" id="banner-flags"></div>
-
-            {# vue teleport fragment here #}
-            <div class="grid-3" id="banner-status"></div>
-
-        </div>
-    </div>
-    <div class="grid-12 parent" id="header-accompanying_course-details" >
-        <div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent">
-
-            {# vue teleport fragment here #}
-            <div id="banner-social-issues"></div>
+                {# vue teleport fragment here #}
+                <div class="col-sm-10" id="banner-social-issues"></div>
 
+            </div>
         </div>
     </div>
+    <a name="banner-accompanying-course"></a>
 </div>
-<span id="banner-accompanying-course"></span>
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/menu.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/menu.html.twig
index a60abe7eb..74fe150c6 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/menu.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/menu.html.twig
@@ -1,7 +1,9 @@
-<ul class="tab-nav">
+<div class="list-group vertical-menu menu-accompanying-course">
     {% for menu in menus %}
-        <li class="">
-            <a href="{{ menu.uri }}" >{{ menu.label|upper }}</a>
-        </li>
+        <a class="list-group-item list-group-item-action"
+            href="{{ menu.uri }}">
+            {{ menu.label|upper }}
+        </a>
     {% endfor %}
-</ul>
+</div>
+    
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Household/banner.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Household/banner.html.twig
index b327c7757..ae288893b 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Household/banner.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Household/banner.html.twig
@@ -1,64 +1,68 @@
 <div class="banner banner-household">
-    <div class="grid-12 parent" id="header-household-name" >
-        <div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent">
+    <div id="header-household-name" class="header-name">
+        <div class="container-xxl">
+            <div class="row">
+            
+                <div class="col-sm-5">
+                    <h1>
+                        <i class="fa fa-home"></i>
+                        {{ 'household.Household'|trans }}
+                        <span class="id-number">{{ household.id }}</span>
+                    </h1>
+                </div>
 
-            <div class="grid-7">
-                <h1>
-                    <i class="fa fa-home"></i>
-                    {{ 'household.Household'|trans }}
-                    <span class="id-number">{{ household.id }}</span>
-                </h1>
+                <div class="col-sm">
+                    <ul class="list-content fa-ul">
+                        <li>
+                            {% set address = household.currentAddress %}
+                            <i class="fa fa-li fa-map-marker"></i>
+                            {% if address is empty %}
+                            <p class="chill-no-data-statement">{{ 'household.Household does not have any address currently'|trans }}</p>
+                            {% else %}
+                                {{ address|chill_entity_render_box({'multiline': false, 'with_valid_from': false}) }}
+                            {% endif %}
+                        </li>
+                    </ul>
+                </div>
+    
             </div>
-
-            <div class="grid-5">
-                <ul class="list-content fa-ul">
-                    <li>
-                        {% set address = household.currentAddress %}
-                        <i class="fa fa-li fa-map-marker"></i>
-                        {% if address is empty %}
-                        <p class="chill-no-data-statement">{{ 'household.Household does not have any address currently'|trans }}</p>
-                        {% else %}
-                            {{ address|chill_entity_render_box({'multiline': false, 'with_valid_from': false}) }}
-                        {% endif %}
-                    </li>
-                </ul>
-            </div>
-
         </div>
     </div>
-    <div class="grid-12 parent" id="header-household-details" >
-        <div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent">
-            
-            <div id="banner-misc" class="members">
-                {%- set members = household.getCurrentMembersOrdered() -%}
-                {%- if members|length > 0 -%}
-                    <span class="current-members-explain" style="display: none;">
-                        {{- 'household.Current household members'|trans }}
-                        <i class="fa fa-fw fa-users" title="{{- 'household.Current household members'|trans }}"></i>
-                    </span>
-                    
-                    {%- for m in members|slice(0, 5) -%}
-                        <span 
-                            class="badge-member{%- if m.holder %} holder{% endif -%}{%- if m.position.ordering >= 2 %} child{% endif -%}"
-                            title="{{ m.position.label.fr }}">
-                            {%- if m.holder %} 
-                            <span class="badge badge-secondary">
-                                {{ 'household.holder'|trans }}
+    <div id="header-household-details" class="header-details">
+        <div class="container-xxl">
+            <div class="row justify-content-md-right">
+                
+                <div class="col-sm-10 members" id="banner-misc">
+                    {%- set members = household.getCurrentMembersOrdered() -%}
+                    {%- if members|length > 0 -%}
+                        <span class="current-members-explain" style="display: none;">
+                            {{- 'household.Current household members'|trans }}
+                            <i class="fa fa-fw fa-users" title="{{- 'household.Current household members'|trans }}"></i>
+                        </span>
+                        
+                        {%- for m in members|slice(0, 5) -%}
+                            <span 
+                                class="badge-member{%- if m.holder %} holder{% endif -%}{%- if m.position.ordering >= 2 %} child{% endif -%}"
+                                title="{{ m.position.label.fr }}">
+                                {%- if m.holder %} 
+                                <span class="badge badge-secondary">
+                                    {{ 'household.holder'|trans }}
+                                </span>
+                                {% endif -%}
+                                {{- m.person|chill_entity_render_box({'addLink': false}) -}}
                             </span>
-                            {% endif -%}
-                            {{- m.person|chill_entity_render_box({'addLink': false}) -}}
-                        </span>
-                    {%- endfor -%}
-                    
-                    {% if members|length > 5 %}
-                        <span class="current-members-more">
-                            {{ 'household.and x other persons'|trans({'x': members|length-5}) }}
-                        </span>
-                    {% endif %} 
-                {%- endif -%}
+                        {%- endfor -%}
+                        
+                        {% if members|length > 5 %}
+                            <span class="current-members-more">
+                                {{ 'household.and x other persons'|trans({'x': members|length-5}) }}
+                            </span>
+                        {% endif %} 
+                    {%- endif -%}
+                </div>
+                
             </div>
-            
         </div>
     </div>
+    <a name="banner-household"></a>
 </div>
-<span id="banner-household"></span>
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Household/menu.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Household/menu.html.twig
index a60abe7eb..c28c150c6 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Household/menu.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Household/menu.html.twig
@@ -1,7 +1,8 @@
-<ul class="tab-nav">
+<div class="list-group vertical-menu menu-household">
     {% for menu in menus %}
-        <li class="">
-            <a href="{{ menu.uri }}" >{{ menu.label|upper }}</a>
-        </li>
+        <a class="list-group-item list-group-item-action" 
+            href="{{ menu.uri }}">
+            {{ menu.label|upper }}
+        </a>
     {% endfor %}
-</ul>
+</div>
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/menu.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/menu.html.twig
index 5e2f5466f..737c57db2 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/menu.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/menu.html.twig
@@ -15,24 +15,11 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 #}
 
-<div class="list-group rounded-0 mt-2">
+<div class="list-group vertical-menu menu-person">
     {% for menu in menus %}
-        <a class="list-group-item list-group-item-action bg-info border-0 mb-1 py-2" href="{{ menu.uri }}" >{{ menu.label|upper }}</a>
+        <a class="list-group-item list-group-item-action" 
+            href="{{ menu.uri }}">
+            {{ menu.label|upper }}
+        </a>
     {% endfor %}
 </div>
-
-{#
-<div class="mt-2">
-{% for menu in menus %}
-    <a class="btn btn-info btn-block text-left" href="{{ menu.uri }}" >{{ menu.label|upper }}</a>
-{% endfor %}
-</div>
-
-<ul class="list-group mt-3">
-    {% for menu in menus %}
-        <li class="list-group-item">
-            <a class="" href="{{ menu.uri }}" >{{ menu.label|upper }}</a>
-        </li>
-    {% endfor %}
-</ul>
-#}