diff --git a/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.scss b/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.scss
index 1409623bf03..a656fc39be9 100644
--- a/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.scss
+++ b/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.scss
@@ -3,80 +3,25 @@
 // ------------------------------------------------------------------
 
 .o_ChatWindowHiddenMenu {
-    position: fixed;
-    bottom: 0;
-    display: flex;
     width: 50px;
     height: 28px;
-    align-items: stretch;
 }
 
 .o_ChatWindowHiddenMenu_chatWindowHeader {
     max-width: 200px;
 }
 
-.o_ChatWindowHiddenMenu_dropdownToggle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex: 1 1 auto;
-    max-width: map-get($sizes, 100);
-}
-
-.o_ChatWindowHiddenMenu_dropdownToggleItem {
-    margin: map-get($spacers, 0) map-get($spacers, 1);
-}
-
-.o_ChatWindowHiddenMenu_list {
-    overflow: auto;
-    margin: map-get($spacers, 0);
-    padding: map-get($spacers, 0);
-}
-
-.o_ChatWindowHiddenMenu_listItem {
-
-    &:not(:last-child) {
-        border-bottom: $border-width solid $border-color;
-    }
-}
-
 .o_ChatWindowHiddenMenu_unreadCounter {
-    position: absolute;
-    right: 0;
-    top: 0;
     transform: translate(50%, -50%);
-    z-index: 1001; // on top of bootstrap dropup menu
-}
-
-.o_ChatWindowHiddenMenu_windowCounter {
-    margin-left: map-get($spacers, 1);
+    z-index: $zindex-tooltip; // on top of bootstrap dropup menu
 }
 
 // ------------------------------------------------------------------
 // Style
 // ------------------------------------------------------------------
 
-.o_ChatWindowHiddenMenu {
-    background-color: gray('900');
-    border-radius: 6px 6px 0 0;
-    color: $white;
-    cursor: pointer;
-}
-
 .o_ChatWindowHiddenMenu_chatWindowHeader {
     opacity: 0.95;
-
-    &:hover {
-        opacity: 1;
-    }
-}
-
-.o_ChatWindowHiddenMenu_dropdownToggle.show {
-    opacity: 0.5;
-}
-
-.o_ChatWindowHiddenMenu_unreadCounter {
-    background-color: $o-brand-primary;
 }
 
 .o_ChatWindowHiddenMenu_windowCounter {
diff --git a/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.xml b/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.xml
index 44dfc7a1345..f401f6855ff 100644
--- a/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.xml
+++ b/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.xml
@@ -2,18 +2,18 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.ChatWindowHiddenMenu" owl="1">
-        <div class="dropup o_ChatWindowHiddenMenu" t-attf-class="{{ className }}" t-ref="root">
-            <div class="dropdown-toggle o_ChatWindowHiddenMenu_dropdownToggle" t-att-class="{ show: messaging.chatWindowManager.isHiddenMenuOpen }" t-on-click="_onClickToggle">
-                <div class="fa fa-comments-o o_ChatWindowHiddenMenu_dropdownToggleIcon o_ChatWindowHiddenMenu_dropdownToggleItem"/>
-                <div class="o_ChatWindowHiddenMenu_dropdownToggleItem o_ChatWindowHiddenMenu_windowCounter text-truncate">
+        <div class="o_ChatWindowHiddenMenu dropup position-fixed bottom-0 align-items-stretch d-flex rounded-lg-top bg-900 o_cursor_pointer" t-attf-class="{{ className }}" t-ref="root">
+            <div class="o_ChatWindowHiddenMenu_dropdownToggle dropdown-toggle justify-content-center align-items-center flex-grow-1 d-flex mw-100" t-att-class="{ 'show opacity-50': messaging.chatWindowManager.isHiddenMenuOpen }" t-on-click="_onClickToggle">
+                <div class="o_ChatWindowHiddenMenu_dropdownToggleIcon o_ChatWindowHiddenMenu_dropdownToggleItem mx-1 fa fa-comments-o"/>
+                <div class="o_ChatWindowHiddenMenu_dropdownToggleItem o_ChatWindowHiddenMenu_windowCounter mx-1 text-truncate">
                     <t t-esc="messaging.chatWindowManager.allOrderedHidden.length"/>
                 </div>
             </div>
-            <ul class="dropdown-menu dropdown-menu-right o_ChatWindowHiddenMenu_list" t-att-class="{ show: messaging.chatWindowManager.isHiddenMenuOpen }" role="menu" t-ref="list">
+            <ul class="o_ChatWindowHiddenMenu_list dropdown-menu dropdown-menu-right m-0 p-0 overflow-auto" t-att-class="{ show: messaging.chatWindowManager.isHiddenMenuOpen }" role="menu" t-ref="list">
                 <t t-foreach="messaging.chatWindowManager.allOrderedHidden" t-as="chatWindow" t-key="chatWindow.localId">
-                    <li class="o_ChatWindowHiddenMenu_listItem" role="menuitem">
+                    <li class="o_ChatWindowHiddenMenu_listItem" t-att-class="{ 'border-bottom' : !chatWindow_last }" role="menuitem">
                         <ChatWindowHeader
-                            className="'o_ChatWindowHiddenMenu_chatWindowHeader'"
+                            className="'o_ChatWindowHiddenMenu_chatWindowHeader opacity-100-hover'"
                             chatWindowLocalId="chatWindow.localId"
                             onClicked="_onClickedChatWindow"
                         />
@@ -21,7 +21,7 @@
                 </t>
             </ul>
             <t t-if="messaging.chatWindowManager.unreadHiddenConversationAmount > 0">
-                <div class="badge badge-pill o_ChatWindowHiddenMenu_unreadCounter">
+                <div class="o_ChatWindowHiddenMenu_unreadCounter position-absolute end-0 top-0 badge badge-pill badge-primary">
                     <t t-esc="messaging.chatWindowManager.unreadHiddenConversationAmount"/>
                 </div>
             </t>