diff --git a/addons/mail/static/src/components/message_list/message_list.scss b/addons/mail/static/src/components/message_list/message_list.scss
index 27a38fd878b..07bfb12f462 100644
--- a/addons/mail/static/src/components/message_list/message_list.scss
+++ b/addons/mail/static/src/components/message_list/message_list.scss
@@ -1,121 +1,13 @@
-// ------------------------------------------------------------------
-// Layout
-// ------------------------------------------------------------------
-
-.o_MessageList {
-    display: flex;
-    flex-flow: column;
-    overflow: auto;
-
-    &.o-empty {
-        align-items: center;
-        justify-content: center;
-    }
-
-    &:not(.o-empty) {
-        padding-bottom: map-get($spacers, 4);
-    }
-}
-
-.o_MessageList_empty {
-    flex: 1 1 auto;
-    height: map-get($sizes, 100);
-    width: map-get($sizes, 100);
-    align-self: center;
-    display: flex;
-    flex-flow: column;
-    align-items: center;
-    justify-content: center;
-    padding: map-get($spacers, 4);
-    line-height: 2.5rem;
-}
-
-.o_MessageList_isLoadingMore {
-    align-self: center;
-}
-
-.o_MessageList_isLoadingMoreIcon {
-    margin-right: map-get($spacers, 1);
-}
-
-.o_MessageList_loadMore {
-    align-self: center;
-}
-
-.o_MessageList_separator {
-    display: flex;
-    align-items: center;
-    padding: map-get($spacers, 0) map-get($spacers, 0);
-    flex: 0 0 auto;
-}
-
-.o_MessageList_separatorLine {
-    flex: 1 1 auto;
-    width: auto;
-}
-
-.o_MessageList_separatorNewMessages {
-    // bug with safari: container does not auto-grow from child size
-    padding: map-get($spacers, 0) map-get($spacers, 0);
-    margin-right: map-get($spacers, 4);
-}
-
-.o_MessageList_separatorLabel {
-    padding: map-get($spacers, 0) map-get($spacers, 3);
-}
-
 // ------------------------------------------------------------------
 // Style
 // ------------------------------------------------------------------
 
-.o_MessageList {
-    background-color: $white;
-}
-
-.o_MessageList_empty {
-    text-align: center;
-    font-style: italic;
-    color: $text-muted;
-}
-
-.o_MessageList_emptyTitle {
-    font-weight: bold;
-    font-size: 1.3rem;
-
-    &.o-neutral-face-icon:before {
-        @extend %o-nocontent-init-image;
-        @include size(120px, 140px);
-        background: transparent url(/web/static/img/neutral_face.svg) no-repeat center;
-    }
-}
-
-.o_MessageList_loadMore {
-    cursor: pointer;
-}
-
-.o_MessageList_message.o-has-message-selection:not(.o-selected) {
-    opacity: 0.5;
-}
-
-.o_MessageList_separator {
-    font-weight: bold;
-}
-
-.o_MessageList_separatorLine {
-    border-color: $border-color;
-}
-
 .o_MessageList_separatorLineNewMessages {
     border-color: lighten($o-brand-odoo, 15%);
 }
 
 .o_MessageList_separatorNewMessages {
     color: lighten($o-brand-odoo, 15%);
-
-}
-
-.o_MessageList_separatorLabel {
-    background-color: $white;
 }
 
 // ------------------------------------------------------------------
@@ -124,7 +16,4 @@
 
 .o_MessageList_separatorNewMessages:not(.o-disable-animation) {
     transition: opacity 0.5s;
-    &.o-fade-leave {
-        opacity: 0;
-    }
 }
diff --git a/addons/mail/static/src/components/message_list/message_list.xml b/addons/mail/static/src/components/message_list/message_list.xml
index 9a0a7fdfe3c..4028552a0f7 100644
--- a/addons/mail/static/src/components/message_list/message_list.xml
+++ b/addons/mail/static/src/components/message_list/message_list.xml
@@ -3,26 +3,27 @@
 
     <t t-name="mail.MessageList" owl="1">
         <t t-if="messageListView">
-            <div class="o_MessageList" t-att-class="{ 'o-empty': messageListView.threadViewOwner.messages.length === 0 }" t-attf-class="{{ className }}" t-on-scroll="onScroll" t-ref="root">
+            <div class="o_MessageList d-flex flex-column bg-white overflow-auto" t-att-class="{ 'o-empty align-items-center justify-content-center': messageListView.threadViewOwner.messages.length === 0, 'pb-4': messageListView.threadViewOwner.messages.length !== 0 }" t-attf-class="{{ className }}" t-on-scroll="onScroll" t-ref="root">
                 <!-- No result messages -->
                 <t t-if="messageListView.threadViewOwner.threadCache.orderedNonEmptyMessages.length === 0">
-                    <div class="o_MessageList_empty o_MessageList_item">
+                    <div class="o_MessageList_empty o_MessageList_item d-flex flex-grow-1 flex-column align-items-center justify-content-center align-self-center w-100 h-100 p-4 text-center text-muted font-italic">
                         <t t-if="messageListView.threadViewOwner.thread === messaging.inbox">
-                            <div class="o_MessageList_emptyTitle">
+                            <h4 class="o_MessageList_emptyTitle mb-3 font-weight-bolder">
                                 Congratulations, your inbox is empty
-                            </div>
+                            </h4>
                             New messages appear here.
                         </t>
                         <t t-elif="messageListView.threadViewOwner.thread === messaging.starred">
-                            <div class="o_MessageList_emptyTitle">
+                            <h4 class="o_MessageList_emptyTitle mb-3 font-weight-bolder">
                                 No starred messages
-                            </div>
+                            </h4>
                             You can mark any message as 'starred', and it shows up in this mailbox.
                         </t>
                         <t t-elif="messageListView.threadViewOwner.thread === messaging.history">
-                            <div class="o_MessageList_emptyTitle o-neutral-face-icon">
+                            <img src="/web/static/img/neutral_face.svg" alt="History"/>
+                            <h4 class="o_MessageList_emptyTitle mb-3 font-weight-bolder">
                                 No history messages
-                            </div>
+                            </h4>
                             Messages marked as read will appear in the history.
                         </t>
                         <t t-else="">
@@ -49,15 +50,15 @@
                 <t t-set="current_day" t-value="0"/>
                 <t t-foreach="messageListView.threadViewOwner.messageViews" t-as="messageView" t-key="messageView.localId">
                     <Transition visible="messageView.message === messageListView.threadViewOwner.thread.messageAfterNewMessageSeparator" name="'o-fade'" t-slot-scope="transition">
-                        <div class="o_MessageList_separator o_MessageList_separatorNewMessages o_MessageList_item" t-att-class="{ 'o-disable-animation': messaging.disableAnimation }" t-attf-class="{{transition.className}}">
-                            <hr class="o_MessageList_separatorLine o_MessageList_separatorLineNewMessages"/><span class="o_MessageList_separatorLabel o_MessageList_separatorLabelNewMessages">New messages</span>
+                        <div class="o_MessageList_separator o_MessageList_separatorNewMessages o_MessageList_item d-flex flex-shrink-0 align-items-center mr-4 p-0 font-weight-bolder" t-att-class="{ 'o-disable-animation': messaging.disableAnimation, 'opacity-0': transition.className.includes('o-fade-leave') }" t-attf-class="{{transition.className}}">
+                            <hr class="o_MessageList_separatorLine o_MessageList_separatorLineNewMessages flex-grow-1 w-auto"/><span class="o_MessageList_separatorLabel o_MessageList_separatorLabelNewMessages px-3">New messages</span>
                         </div>
                     </Transition>
                     <t t-if="!messageView.message.isEmpty">
                         <t t-set="message_day" t-value="messageView.message.dateDay"/>
                         <t t-if="current_day !== message_day">
-                            <div class="o_MessageList_separator o_MessageList_separatorDate o_MessageList_item pt-4">
-                                <hr class="o_MessageList_separatorLine"/><span class="o_MessageList_separatorLabel o_MessageList_separatorLabelDate"><t t-esc="message_day"/></span><hr class="o_MessageList_separatorLine"/>
+                            <div class="o_MessageList_separator o_MessageList_separatorDate o_MessageList_item d-flex flex-shrink-0 align-items-center pt-4 pb-0 px-0 font-weight-bolder">
+                                <hr class="o_MessageList_separatorLine flex-grow-1 w-auto border-top"/><span class="o_MessageList_separatorLabel o_MessageList_separatorLabelDate px-3"><t t-esc="message_day"/></span><hr class="o_MessageList_separatorLine flex-grow-1 w-auto border-top"/>
                                 <t t-set="current_day" t-value="message_day"/>
                             </div>
                         </t>
@@ -74,13 +75,13 @@
 
     <t t-name="mail.MessageList.loadMore" owl="1">
         <t t-if="messageListView.threadViewOwner.threadCache.isLoadingMore">
-            <div class="o_MessageList_item o_MessageList_isLoadingMore">
-                <i class="o_MessageList_isLoadingMoreIcon fa fa-spin fa-circle-o-notch"/>
+            <div class="o_MessageList_item o_MessageList_isLoadingMore align-self-center">
+                <i class="o_MessageList_isLoadingMoreIcon fa fa-spin fa-circle-o-notch me-1"/>
                 Loading...
             </div>
         </t>
         <t t-elif="!messageListView.threadViewOwner.threadCache.isAllHistoryLoaded and !messageListView.threadViewOwner.thread.isTemporary">
-            <a class="o_MessageList_item o_MessageList_loadMore" href="#" t-on-click="_onClickLoadMore" t-ref="loadMore">
+            <a class="o_MessageList_item o_MessageList_loadMore align-self-center" href="#" t-on-click="_onClickLoadMore" t-ref="loadMore">
                 Load more
             </a>
         </t>