diff --git a/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.scss b/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.scss
index f0529d1970f..782c521a146 100644
--- a/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.scss
+++ b/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.scss
@@ -3,41 +3,13 @@
 // ------------------------------------------------------------------
 
 .o_MobileMessagingNavbar {
-    display: flex;
-    flex: 0 0 auto;
     z-index: 1;
 }
 
 .o_MobileMessagingNavbar_tab {
-    display: flex;
-    flex-flow: column;
-    align-items: center;
-    flex: 1 1 0;
-    padding: map-get($spacers, 2);
+    flex-basis: 0;
 }
 
 .o_MobileMessagingNavbar_tabIcon {
     margin-bottom: 4%;
-    font-size: 1.3em;
-}
-
-.o_MobileMessagingNavbar_tabLabel {
-    font-size: 0.8em;
-}
-
-// ------------------------------------------------------------------
-// Style
-// ------------------------------------------------------------------
-
-.o_MobileMessagingNavbar {
-    background-color: $white;
-    box-shadow: 0 0 8px gray('400');
-}
-
-.o_MobileMessagingNavbar_tab {
-    box-shadow: 1px 0 0 gray('400');
-
-    &.o-active {
-        color: $o-brand-primary;
-    }
 }
diff --git a/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.xml b/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.xml
index bd3823a579c..cbc9398a129 100644
--- a/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.xml
+++ b/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.xml
@@ -3,13 +3,13 @@
 
     <t t-name="mail.MobileMessagingNavbar" owl="1">
         <t t-if="mobileMessagingNavbarView">
-            <div class="o_MobileMessagingNavbar" t-attf-class="{{ className }}" t-ref="root">
+            <div class="o_MobileMessagingNavbar d-flex flex-shrink-0 border-top bg-white shadow-lg" t-attf-class="{{ className }}" t-ref="root">
                 <t t-foreach="mobileMessagingNavbarView.tabs" t-as="tab" t-key="tab.id">
-                    <div class="o_MobileMessagingNavbar_tab" t-att-class="{ 'o-active': mobileMessagingNavbarView.activeTabId === tab.id }" t-on-click="ev => mobileMessagingNavbarView.onClick(tab.id, ev)" t-att-data-tab-id="tab.id">
+                    <div class="o_MobileMessagingNavbar_tab d-flex flex-column align-items-center flex-grow-1 p-2" t-att-class="{ 'o-active text-primary': mobileMessagingNavbarView.activeTabId === tab.id, 'border-left': tab_index !== 0 }" t-on-click="ev => mobileMessagingNavbarView.onClick(tab.id, ev)" t-att-data-tab-id="tab.id">
                         <t t-if="tab.icon">
-                            <span class="o_MobileMessagingNavbar_tabIcon" t-att-class="tab.icon"/>
+                            <span class="o_MobileMessagingNavbar_tabIcon fs-4" t-att-class="tab.icon"/>
                         </t>
-                        <span class="o_MobileMessagingNavbar_tabLabel"><t t-esc="tab.label"/></span>
+                        <span class="o_MobileMessagingNavbar_tabLabel small"><t t-esc="tab.label"/></span>
                     </div>
                 </t>
             </div>