diff --git a/addons/portal/static/src/scss/portal.scss b/addons/portal/static/src/scss/portal.scss
index 108cb1adb06..7f4945639f6 100644
--- a/addons/portal/static/src/scss/portal.scss
+++ b/addons/portal/static/src/scss/portal.scss
@@ -3,8 +3,14 @@
 /// rules.
 ///
 
+// ======  Variables =========
 $-navbar-height: $nav-link-height !default;
 
+// Portal toolbar (filters, search bar)
+$o-portal-mobile-toolbar: true; // Enable/Disable custom design
+$o-portal-mobile-toolbar-border: $border-color;
+$o-portal-mobile-toolbar-bg: $gray-200;
+
 // Resize and vertically align navbar’s items relative to navbar
 @mixin o-w-fill-navbar($ratio: 1) {
     height: round($-navbar-height * $ratio * 100) / 100;
@@ -299,12 +305,11 @@ img.o_we_custom_image {
 // Portal specific
 .o_portal {
     .breadcrumb {
-        background-color: rgba(0, 0, 0, 0);
-        margin-bottom: 0px;
-    }
+        background-color: transparent;
 
-    .record_pager {
-        padding: 8px 0px;
+        .breadcrumb-item {
+            display: inline-flex;
+        }
     }
 
     > tbody.o_portal_report_tbody {
@@ -357,68 +362,13 @@ img.o_we_custom_image {
         margin-top: 0.5em;
     }
 
-    .o_portal_navbar {
-        .navbar-brand {
-            margin: 0;
-
-            @include media-breakpoint-up(md) {
-                padding: $navbar-padding-y $navbar-padding-x 0 0;
-            }
-        }
-
-        // ===== Default portal navbar design =====
-        &.o_portal_navbar_default {
-            margin-bottom: 8px;
-
-            .navbar-brand {
-                padding: $navbar-padding-y $navbar-padding-x 0 0;
-            }
-
-            .navbar-header .dropdown-menu {
-                right: 0;
-                left: auto;
-            }
-
-            .navbar-toggle {
-                margin-right: 0;
-                margin-bottom: 0;
-                background-color: $table-active-bg;
-                padding: 6px 10px $navbar-padding-y;
-                border-width: 1px 1px 0 1px;
-                border-bottom-left-radius: 0;
-                border-bottom-right-radius: 0;
-                z-index: 1;
-
-                &.collapsed {
-                    padding:6px 10px;
-                    border-width: 1px;
-                    border-radius: $btn-border-radius;
-                    background-color: transparent;
-                }
-            }
-
-            @include media-breakpoint-down(sm) {
-                .navbar-collapse {
-                    z-index: 0;
-                    background-color: $table-active-bg;
-                    border-radius: $btn-border-radius;
-                    border-top-right-radius: 0;
-                    transform: translateY(-2px);
-
-                    &.in {
-                        overflow: visible;
-                    }
-                }
-            }
-
-            @include media-breakpoint-up(md) {
-                > .container-fluid {
-                    padding: 0;
-
-                    .navbar-form {
-                        padding-right: 0;
-                    }
-                }
+    @if ($o-portal-mobile-toolbar) {
+        #o_portal_navbar_content {
+            @include media-breakpoint-down(md) {
+                margin: $navbar-padding-y (-$navbar-padding-x) 0;
+                padding: $navbar-padding-y $navbar-padding-x ;
+                border-top: $border-width solid $o-portal-mobile-toolbar-border;
+                background-color: $o-portal-mobile-toolbar-bg;
             }
         }
     }
diff --git a/addons/portal/views/portal_templates.xml b/addons/portal/views/portal_templates.xml
index 670e08d5d28..24eb02631ff 100644
--- a/addons/portal/views/portal_templates.xml
+++ b/addons/portal/views/portal_templates.xml
@@ -68,16 +68,16 @@
 
     <template id="portal_layout" name="Portal Layout">
         <t t-call="portal.frontend_layout">
-            <div class="container mt16 mb16 o_portal">
-                <div class="oe_structure">
-                    <div t-if="not no_breadcrumbs" class="row">
-                        <div t-attf-class="col-md-12">
-                            <t t-call='portal.record_pager'/>
-                            <ol t-if="page_name != 'home'" class="breadcrumb o_portal_submenu">
-                                <li class="breadcrumb-item"><a href="/my/home" aria-label="Home" title="Home"><i class="fa fa-home"/></a></li>
-                                <li t-if="page_name == 'my_details'" class="breadcrumb-item">Your Details</li>
-                            </ol>
-                        </div>
+            <div t-if="not no_breadcrumbs and not my_details" class="o_portal container mt-3">
+                <div class="row align-items-center bg-white no-gutters border rounded-top">
+                    <div class="col">
+                        <ol t-if="page_name != 'home'" class="o_portal_submenu breadcrumb mb-0 py-2 flex-grow-1">
+                            <li class="breadcrumb-item"><a href="/my/home" aria-label="Home" title="Home"><i class="fa fa-home"/></a></li>
+                            <li t-if="page_name == 'my_details'" class="breadcrumb-item">Your Details</li>
+                        </ol>
+                    </div>
+                    <div t-if="prev_record or next_record" class="col flex-grow-0">
+                        <t t-call='portal.record_pager'/>
                     </div>
                 </div>
             </div>
@@ -151,27 +151,28 @@
         :param string filterby : name of the filter criteria
         :param default_url : the base url of the pages (like '/my/orders')
         :param boolean o_portal_search_panel : set to True to active the input search
-        :param html $0 : content of the t-call, <li class="float-left">Link</li>
+        :param html $0 : content of the t-call
         :param title : bavbar title
         :param classes : navbar classes
     -->
     <template id="portal_searchbar" name="Portal Search Bar">
-        <nav t-attf-class="navbar o_portal_navbar {{classes if classes else 'o_portal_navbar_default'}}">
-            <div class="container-fluid">
-                <!--  Navbar title only -->
-                <div class="navbar-header float-left">
-                    <t t-set="no_title">No title</t>
-                    <h3 class="navbar-brand"><t t-esc="title or no_title"/></h3>
-                </div>
+        <nav t-attf-class="navbar navbar-light navbar-expand-lg border border-top-0 mb-2 py-0 o_portal_navbar {{classes if classes else ''}}">
+            <!--  Navbar title  -->
+            <span class="navbar-brand navbar-brand mb-0 h1 mr-auto" t-esc="title or 'No title'"/>
 
-                <!-- Non-collapsing menu item(s) -->
-                <div class="navbar-header navbar-right float-right">
-                    <ul class="nav float-left">
-                        <t t-raw="0"/>
-                        <li t-if="searchbar_sortings" class="dropdown float-left ml16">
-                            <button id="portal_searchbar_sortby" data-toggle="dropdown" class="btn btn-secondary dropdown-toggle navbar-btn">
-                                <span class="fa fa-sort"/>
-                                <span class="d-none d-lg-inline"><t t-esc="searchbar_sortings[sortby].get('label', 'Newest')"/></span>
+            <!--  Collapse button -->
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#o_portal_navbar_content" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle filters">
+                <span class="navbar-toggler-icon small"/>
+            </button>
+
+            <!--  Collapsable content  -->
+            <div class="collapse navbar-collapse" id="o_portal_navbar_content">
+                <div class="nav flex-column flex-lg-row ml-auto p-0 mb-3 mb-lg-0 mt-1 mt-lg-0">
+                    <div t-if="searchbar_sortings" class="form-inline">
+                        <span class="small mr-1 navbar-text">Sort By:</span>
+                        <div class="btn-group">
+                            <button id="portal_searchbar_sortby" data-toggle="dropdown" class="btn btn-secondary btn-sm dropdown-toggle">
+                                <t t-esc="searchbar_sortings[sortby].get('label', 'Newest')"/>
                             </button>
                             <div class="dropdown-menu" aria-labelledby="portal_searchbar_sortby">
                                 <t t-foreach="searchbar_sortings" t-as="option">
@@ -181,11 +182,13 @@
                                     </a>
                                 </t>
                             </div>
-                        </li>
-                        <li t-if="searchbar_filters" class="dropdown float-left ml4">
-                            <button id="portal_searchbar_filters" data-toggle="dropdown" class="btn btn-secondary dropdown-toggle navbar-btn">
-                                <span class="fa fa-filter"/>
-                                <span class="d-none d-lg-inline"><t t-esc="searchbar_filters[filterby].get('label', 'All')"/></span>
+                        </div>
+                    </div>
+                    <div t-if="searchbar_filters" class="form-inline ml-lg-2">
+                        <span class="small mr-1 navbar-text">Filter By:</span>
+                        <div class="btn-group">
+                            <button id="portal_searchbar_filters" data-toggle="dropdown" class="btn btn-secondary btn-sm dropdown-toggle">
+                                <t t-esc="searchbar_filters[filterby].get('label', 'All')"/>
                             </button>
                             <div class="dropdown-menu" aria-labelledby="portal_searchbar_filters">
                                 <t t-foreach="searchbar_filters" t-as="option">
@@ -195,11 +198,13 @@
                                     </a>
                                 </t>
                             </div>
-                        </li>
-                        <li t-if="searchbar_groupby" class="dropdown float-left ml4">
-                            <button id="portal_searchbar_groupby" data-toggle="dropdown" class="btn btn-secondary dropdown-toggle navbar-btn">
-                                <span class="fa fa-object-group"/>
-                                <span class="d-none d-lg-inline"><t t-esc="searchbar_groupby[groupby].get('label', 'None')"/></span>
+                        </div>
+                    </div>
+                    <div t-if="searchbar_groupby" class="form-inline ml-lg-2">
+                        <span class="small mr-1 navbar-text">Group By:</span>
+                        <div class="btn-group">
+                            <button id="portal_searchbar_groupby" data-toggle="dropdown" class="btn btn-secondary btn-sm dropdown-toggle">
+                                <t t-esc="searchbar_groupby[groupby].get('label', 'None')"/>
                             </button>
                             <div class="dropdown-menu" aria-labelledby="portal_searchbar_groupby">
                                 <t t-foreach="searchbar_groupby" t-as="option">
@@ -209,37 +214,32 @@
                                     </a>
                                 </t>
                             </div>
-                        </li>
-                    </ul>
-                    <button t-if='searchbar_inputs' type="button" class="navbar-toggle collapsed btn ml16" data-toggle="collapse" data-target="#o_portal_searchbar_collapse"><span class="fa fa-search"/></button>
-                </div>
-                <div t-if='searchbar_inputs' class="d-block d-md-none clearfix"/>
-
-                <!-- Collapsing content (searchbar_inputs) -->
-                <div t-if='searchbar_inputs' class="collapse navbar-collapse text-right" id="o_portal_searchbar_collapse">
-                    <div class="navbar-form o_portal_search_panel">
-                         <div class="input-group">
-                            <div class="input-group-prepend">
-                                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
-                                    <span id="search_label" class="d-none d-md-inline mr4">Search</span>
-                                </button>
-                                <div class="dropdown-menu" role="menu">
-                                    <t t-foreach='searchbar_inputs' t-as='input'>
-                                        <a t-att-href="'#' + searchbar_inputs[input]['input']"
-                                           t-attf-class="dropdown-item#{search_in == searchbar_inputs[input]['input'] and ' active' or ''}">
-                                           <span t-raw="searchbar_inputs[input]['label']"/>
-                                        </a>
-                                    </t>
-                                </div>
-                            </div>
-                            <input type="text" class="form-control" t-att-value='search' name="search"/>
-                            <span class="input-group-append">
-                                <button class="btn btn-secondary search-submit" type="button"><span class="fa fa-search d-none d-md-inline-block"/><span class="fa fa-arrow-right d-inline-block d-md-none"/></button>
-                            </span>
                         </div>
                     </div>
+                    <t t-raw="0"/>
                 </div>
-            </div> <!-- /.container-fluid -->
+                <form t-if="searchbar_inputs" class="form-inline o_portal_search_panel ml-lg-4">
+                    <div class="input-group input-group-sm w-100">
+                        <div class="input-group-prepend">
+                            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"/>
+                            <div class="dropdown-menu" role="menu">
+                                <t t-foreach='searchbar_inputs' t-as='input'>
+                                    <a t-att-href="'#' + searchbar_inputs[input]['input']"
+                                        t-attf-class="dropdown-item#{search_in == searchbar_inputs[input]['input'] and ' active' or ''}">
+                                        <span t-raw="searchbar_inputs[input]['label']"/>
+                                    </a>
+                                </t>
+                            </div>
+                        </div>
+                        <input type="text" class="form-control form-control-sm" placeholder="Search" t-att-value='search' name="search"/>
+                        <span class="input-group-append">
+                            <button class="btn btn-secondary search-submit" type="button">
+                                <span class="fa fa-search"/>
+                            </button>
+                        </span>
+                    </div>
+                </form>
+            </div>
         </nav>
     </template>
 
@@ -358,10 +358,10 @@
 
     <template id="record_pager" name="Portal Record Pager">
         <t t-if='prev_record or next_record'>
-          <div class="ml8 record_pager btn-group btn-group-xs float-md-right" role="group">
-            <a role="button" t-att-class="'btn btn-secondary %s' % ('disabled' if not prev_record else '')" t-att-href="prev_record or '#'" ><i class="fa fa-arrow-left" role="img" aria-label="Previous" title="Previous"></i></a>
-            <a role="button" t-att-class="'btn btn-secondary %s' % ('disabled' if not next_record else '')" t-att-href="next_record or '#'" ><i class="fa fa-arrow-right" role="img" aria-label="Next" title="Previous"></i></a>
-          </div>
+            <div class="record_pager btn-group" role="group">
+                <a role="button" t-att-class="'btn btn-link %s' % ('disabled' if not prev_record else '')" t-att-href="prev_record or '#'" ><i class="fa fa-chevron-left" role="img" aria-label="Previous" title="Previous"></i></a>
+                <a role="button" t-att-class="'btn btn-link %s' % ('disabled' if not next_record else '')" t-att-href="next_record or '#'" ><i class="fa fa-chevron-right" role="img" aria-label="Next" title="Previous"></i></a>
+            </div>
         </t>
     </template>