diff --git a/addons/mail/static/src/components/chat_window_header/chat_window_header.scss b/addons/mail/static/src/components/chat_window_header/chat_window_header.scss
index 80178cf8c4d..43d4fbadc29 100644
--- a/addons/mail/static/src/components/chat_window_header/chat_window_header.scss
+++ b/addons/mail/static/src/components/chat_window_header/chat_window_header.scss
@@ -3,8 +3,6 @@
 // ------------------------------------------------------------------
 
 .o_ChatWindowHeader {
-    display: flex;
-    align-items: center;
     height: $o-mail-chat-window-header-height;
 
     &.o-mobile {
@@ -13,85 +11,21 @@
 }
 
 .o_ChatWindowHeader_command {
-    padding: map-get($spacers, 0) map-get($spacers, 3);
-    display: flex;
-    height: map-get($sizes, 100);
-    align-items: center;
-
     &:hover {
         background-color: rgba($black, 0.1);
     }
 }
 
-.o_ChatWindowHeader_commandBack {
-    margin-right: map-get($spacers, 2);
-}
-
-.o_ChatWindowHeader_item {
-    margin: map-get($spacers, 0) map-get($spacers, 1);
-
-    &.o_ChatWindowHeader_rightArea {
-        margin-right: map-get($spacers, 0);
-    }
-
-    &:first-child {
-        margin-left: map-get($spacers, 3);
-
-        &.o_ChatWindowHeader_command {
-            margin-left: map-get($spacers, 0); // no margin for commands
-        }
-    }
-
-    &.o_ChatWindowHeader_rightArea:last-child .o_ChatWindowHeader_command {
-        margin-right: map-get($spacers, 0); // no margin for commands
-    }
-}
-
-.o_ChatWindowHeader_name {
-    max-height: map-get($sizes, 100);
-}
-
-.o_ChatWindowHeader_rightArea {
-    display: flex;
-    height: map-get($sizes, 100);
-    align-items: center;
-}
-
 // ------------------------------------------------------------------
 // Style
 // ------------------------------------------------------------------
 
 .o_ChatWindowHeader {
     background-color: $o-brand-odoo;
-    color: $white;
-
-    &:not(.o-mobile) {
-        cursor: pointer;
-    }
-
-    &:not(.o-mobile) {
-
-        &:hover .o_ChatWindowHeader_command {
-            opacity: 0.7;
-
-            &:hover {
-                opacity: 1;
-            }
-        }
-
-        &:not(:hover) .o_ChatWindowHeader_command {
-            opacity: 0.5;
-        }
-    }
-
 }
 
-.o_ChatWindowHeader_command {
-    cursor: pointer;
-
-    &.o-mobile {
-        font-size: 1.3rem;
-    }
+.o_ChatWindowHeader_command.o-mobile {
+    font-size: 1.3rem;
 }
 
 .o_ChatWindowHeader_name {
diff --git a/addons/mail/static/src/components/chat_window_header/chat_window_header.xml b/addons/mail/static/src/components/chat_window_header/chat_window_header.xml
index 97fd5ea0217..baa1d9d759e 100644
--- a/addons/mail/static/src/components/chat_window_header/chat_window_header.xml
+++ b/addons/mail/static/src/components/chat_window_header/chat_window_header.xml
@@ -3,77 +3,77 @@
 
     <t t-name="mail.ChatWindowHeader" owl="1">
         <t t-if="chatWindowHeaderView and chatWindow">
-            <div class="o_ChatWindowHeader" t-att-class="{ 'o-mobile': messaging.device.isSmall }" t-attf-class="{{ className }}" t-on-click="_onClick" t-ref="root">
+            <div class="o_ChatWindowHeader d-flex align-items-center text-white" t-att-class="{ 'o-mobile': messaging.device.isSmall, 'o_cursor_pointer': !messaging.device.isSmall }" t-attf-class="{{ className }}" t-on-click="_onClick" t-ref="root">
                 <t t-if="chatWindow.hasCloseAsBackButton">
-                    <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandBack o_ChatWindowHeader_commandClose" t-att-class="{ 'o-mobile': messaging.device.isSmall }" t-on-click="chatWindow.onClickClose" title="Close conversation">
+                    <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandBack o_ChatWindowHeader_commandClose o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 mr-2" t-att-class="{ 'o-mobile': messaging.device.isSmall }" t-on-click="chatWindow.onClickClose" title="Close conversation">
                         <i class="fa fa-arrow-left"/>
                     </div>
                 </t>
                 <t t-if="chatWindow.thread and chatWindow.thread.model === 'mail.channel'">
                     <ThreadIcon
-                        className="'o_ChatWindowHeader_icon o_ChatWindowHeader_item'"
+                        className="'o_ChatWindowHeader_icon o_ChatWindowHeader_item ms-3 me-1 my-0'"
                         threadLocalId="chatWindow.thread.localId"
                     />
                 </t>
-                <div class="o_ChatWindowHeader_item o_ChatWindowHeader_name text-truncate" t-att-title="chatWindow.name">
+                <div class="o_ChatWindowHeader_item o_ChatWindowHeader_name mh-100 mx-1 my-0 text-truncate" t-att-class="{'ms-3':!chatWindow.thread or chatWindow.thread.model !== 'mail.channel'}" t-att-title="chatWindow.name">
                     <t t-esc="chatWindow.name"/>
                 </div>
                 <t t-if="chatWindow.thread and chatWindow.thread.localMessageUnreadCounter > 0">
-                    <div class="o_ChatWindowHeader_counter o_ChatWindowHeader_item">
+                    <div class="o_ChatWindowHeader_counter o_ChatWindowHeader_item mx-1 my-0">
                         (<t t-esc="chatWindow.thread.localMessageUnreadCounter"/>)
                     </div>
                 </t>
                 <div class="o-autogrow"/>
-                <div class="o_ChatWindowHeader_item o_ChatWindowHeader_rightArea">
+                <div class="o_ChatWindowHeader_item o_ChatWindowHeader_rightArea d-flex align-items-center h-100 ms-1 me-0 my-0" t-att-class="{'opacity-75 opacity-100-hover': !messaging.device.isSmall }">
                     <t t-if="chatWindow.hasCallButtons">
-                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandCamera" t-att-class="{ 'o-mobile': messaging.device.isSmall }" t-att-disabled="chatWindow.thread.hasPendingRtcRequest" t-on-click="chatWindow.onClickCamera" title="Start a Video Call">
+                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandCamera o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'o-mobile': messaging.device.isSmall, 'opacity-50 opacity-100-hover': !messaging.device.isSmall }" t-att-disabled="chatWindow.thread.hasPendingRtcRequest" t-on-click="chatWindow.onClickCamera" title="Start a Video Call">
                             <i class="fa fa-video-camera"/>
                         </div>
-                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandPhone" t-att-class="{ 'o-mobile': messaging.device.isSmall }" t-att-disabled="chatWindow.thread.hasPendingRtcRequest" t-on-click="chatWindow.onClickPhone" title="Start a Call">
+                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandPhone o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'o-mobile': messaging.device.isSmall, 'opacity-50 opacity-100-hover': !messaging.device.isSmall }" t-att-disabled="chatWindow.thread.hasPendingRtcRequest" t-on-click="chatWindow.onClickPhone" title="Start a Call">
                             <i class="fa fa-phone"/>
                         </div>
                     </t>
                     <t t-if="chatWindow.hasInviteFeature">
                         <t t-if="!chatWindow.channelInvitationForm">
-                            <div class="o_ChatWindowHeader_command" title="Add users" t-on-click="chatWindow.onClickShowInviteForm">
+                            <div class="o_ChatWindowHeader_command o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'opacity-50 opacity-100-hover': !messaging.device.isSmall }" title="Add users" t-on-click="chatWindow.onClickShowInviteForm">
                                 <i class="fa fa-lg fa-user-plus"/>
                             </div>
                         </t>
                         <t t-if="chatWindow.channelInvitationForm">
-                            <div class="o_ChatWindowHeader_command" title="Stop adding users" t-on-click="chatWindow.onClickHideInviteForm">
+                            <div class="o_ChatWindowHeader_command o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'opacity-50 opacity-100-hover': !messaging.device.isSmall }" title="Stop adding users" t-on-click="chatWindow.onClickHideInviteForm">
                                 <i class="fa fa-lg fa-user-plus"/>
                             </div>
                         </t>
                     </t>
                     <t t-if="chatWindow.thread and chatWindow.thread.hasMemberListFeature and !chatWindow.isMemberListOpened">
-                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandShowMemberList" t-att-class="{ 'o-mobile': messaging.device.isSmall }"  title="Show Member List" t-on-click="chatWindow.onClickShowMemberList">
+                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandShowMemberList o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'o-mobile': messaging.device.isSmall, 'opacity-50 opacity-100-hover': !messaging.device.isSmall}"  title="Show Member List" t-on-click="chatWindow.onClickShowMemberList">
                             <i class="fa fa-users"/>
                         </div>
                     </t>
                     <t t-if="chatWindow.thread and chatWindow.thread.hasMemberListFeature and chatWindow.isMemberListOpened">
-                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandHideMemberList" t-att-class="{ 'o-mobile': messaging.device.isSmall }" title="Hide Member List" t-on-click="chatWindow.onClickHideMemberList">
+                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandHideMemberList o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'o-mobile': messaging.device.isSmall, 'opacity-50 opacity-100-hover': !messaging.device.isSmall }" title="Hide Member List" t-on-click="chatWindow.onClickHideMemberList">
                             <i class="fa fa-users"/>
                         </div>
                     </t>
                     <t t-if="chatWindow.hasShiftPrev">
-                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandShiftPrev" t-att-class="{ 'o-mobile': messaging.device.isSmall }" t-on-click="chatWindow.onClickShiftPrev" t-att-title="chatWindow.shiftPrevText">
+                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandShiftPrev o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'o-mobile': messaging.device.isSmall, 'opacity-50 opacity-100-hover': !messaging.device.isSmall }" t-on-click="chatWindow.onClickShiftPrev" t-att-title="chatWindow.shiftPrevText">
                             <!-- this is reversed automatically when language is rtl -->
                             <i class="fa fa-angle-left"/>
                         </div>
                     </t>
                     <t t-if="chatWindow.hasShiftNext">
-                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandShiftNext" t-att-class="{ 'o-mobile': messaging.device.isSmall }" t-on-click="chatWindow.onClickShiftNext" t-att-title="chatWindow.shiftNextText">
+                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandShiftNext o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'o-mobile': messaging.device.isSmall, 'opacity-50 opacity-100-hover': !messaging.device.isSmall}" t-on-click="chatWindow.onClickShiftNext" t-att-title="chatWindow.shiftNextText">
                             <!-- this is reversed automatically when language is rtl -->
                             <i class="fa fa-angle-right"/>
                         </div>
                     </t>
                     <t t-if="chatWindow.isExpandable">
-                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandExpand" t-att-class="{ 'o-mobile': messaging.device.isSmall }" t-on-click="chatWindow.onClickExpand" title="Open in Discuss">
+                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandExpand o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'o-mobile': messaging.device.isSmall, 'opacity-50 opacity-100-hover': !messaging.device.isSmall }" t-on-click="chatWindow.onClickExpand" title="Open in Discuss">
                             <i class="fa fa-expand"/>
                         </div>
                     </t>
                     <t t-if="!chatWindow.hasCloseAsBackButton">
-                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandClose" t-att-class="{ 'o-mobile': messaging.device.isSmall }" t-on-click="chatWindow.onClickClose" title="Close chat window">
+                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandClose o_cursor_pointer d-flex align-items-center h-100 px-3 py-0 m-0" t-att-class="{ 'o-mobile': messaging.device.isSmall, 'opacity-50 opacity-100-hover': !messaging.device.isSmall }" t-on-click="chatWindow.onClickClose" title="Close chat window">
                             <i class="fa fa-close"/>
                         </div>
                     </t>