diff --git a/addons/mail/static/src/components/discuss_sidebar_category_item/discuss_sidebar_category_item.scss b/addons/mail/static/src/components/discuss_sidebar_category_item/discuss_sidebar_category_item.scss
index 55b14cd4e6e..fcc23fd5c95 100644
--- a/addons/mail/static/src/components/discuss_sidebar_category_item/discuss_sidebar_category_item.scss
+++ b/addons/mail/static/src/components/discuss_sidebar_category_item/discuss_sidebar_category_item.scss
@@ -1,114 +1,29 @@
-// ------------------------------------------------------------------
-// Layout
-// ------------------------------------------------------------------
-
 .o_DiscussSidebarCategoryItem {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    padding: map-get($spacers, 2) 0;
-
-    &:hover .o_DiscussSidebarCategoryItem_commands {
-        display: flex;
-    }
-}
-
-.o_DiscussSidebarCategoryItem_callIndicator {
-    margin-right: $o-mail-discuss-sidebar-scrollbar-width;
-
-    &.o-isCalling {
-        color: red;
-    }
-}
-
-.o_DiscussSidebarCategoryItem_command {
-    margin-left: $o-mail-discuss-sidebar-category-item-margin;
-    margin-right: $o-mail-discuss-sidebar-category-item-margin;
-
-    &:first-child {
-        margin-left: 0px;
+    &:hover {
+        .o_DiscussSidebarCategoryItem_commands {
+            display: flex;
+        }
     }
 
-    &:last-child {
-        margin-right: 0px;
+    .o_DiscussSidebarCategoryItem_image {
+        object-fit: cover;
     }
-}
-
-.o_DiscussSidebarCategoryItem_commands {
-    display: none;
-}
-
-.o_DiscussSidebarCategoryItem_image {
-    object-fit: cover;
-    width: map-get($sizes, 100);
-    height: map-get($sizes, 100);
-}
-
-
-.o_DiscussSidebarCategoryItem_imageContainer {
-    position: relative;
-    width: $o-mail-discuss-sidebar-category-item-avatar-size;
-    height: $o-mail-discuss-sidebar-category-item-avatar-size;
-}
-
-.o_DiscussSidebarCategoryItem_item {
-    margin-left: $o-mail-discuss-sidebar-category-item-margin;
-    margin-right: $o-mail-discuss-sidebar-category-item-margin;
-
-    &:first-child {
-        margin-left: $o-mail-discuss-sidebar-category-item-avatar-left-margin;
-    }
-
-    &:last-child {
-        margin-right: $o-mail-discuss-sidebar-scrollbar-width;
-    }
-}
-
-.o_DiscussSidebarCategoryItem_threadIcon {
-    @include o-position-absolute($bottom: 0, $right: 0);
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 13px;
-    height: 13px;
-}
-
-// ------------------------------------------------------------------
-// Style
-// ------------------------------------------------------------------
-
-.o_DiscussSidebarCategoryItem {
 
     .o_DiscussSidebarCategoryItem_threadIcon {
         font-size: xx-small;
-        background-color: gray('100');
-        border-radius: 50%;
     }
 
-    &.o-active {
-        background-color: gray('200');
+    .o_DiscussSidebarCategoryItem_commands {
+        display: none;
     }
 
-    &:hover {
-        background-color: gray('300');
-    }
-}
-
-.o_DiscussSidebarCategoryItem_command {
-
-    &:not(:hover) {
-        color: gray('600');
-    }
-}
-
-.o_DiscussSidebarCategoryItem_counter {
-    background-color: $o-brand-primary;
-    color: gray('300');
-}
-
-.o_DiscussSidebarCategoryItem_name {
-    &.o-item-unread {
-        font-weight: bold;
+    .o_DiscussSidebarCategoryItem_imageContainer {
+        width: $o-mail-discuss-sidebar-category-item-avatar-size;
+        height: $o-mail-discuss-sidebar-category-item-avatar-size;
+    }
+
+    .o_DiscussSidebarCategoryItem_threadIcon {
+        width: 13px;
+        height: 13px;
     }
 }
diff --git a/addons/mail/static/src/components/discuss_sidebar_category_item/discuss_sidebar_category_item.xml b/addons/mail/static/src/components/discuss_sidebar_category_item/discuss_sidebar_category_item.xml
index cab7436cd80..801c40cce01 100644
--- a/addons/mail/static/src/components/discuss_sidebar_category_item/discuss_sidebar_category_item.xml
+++ b/addons/mail/static/src/components/discuss_sidebar_category_item/discuss_sidebar_category_item.xml
@@ -2,45 +2,47 @@
 <templates xml:space="preserve">
     <t t-name="mail.DiscussSidebarCategoryItem" owl="1">
         <t t-if="categoryItem">
-            <div class="o_DiscussSidebarCategoryItem"
+            <t t-set="o_DiscussSidebarCategoryItem_hoverItem" t-value="'btn p-0 text-left text-700 opacity-100-hover opacity-75'"/>
+            <button class="o_DiscussSidebarCategoryItem btn d-flex align-items-center w-100 px-0 py-2 border-0 rounded-0 font-weight-normal text-reset"
                 t-att-class="{
-                    'o-active': categoryItem.isActive,
+                    'bg-100': !categoryItem.isActive,
+                    'o-active bg-200': categoryItem.isActive,
                     'o-unread': categoryItem.isUnread,
                 }" t-attf-class="{{ className }}" t-on-click="categoryItem.onClick" t-att-data-thread-local-id="categoryItem.channel.localId" t-att-data-thread-name="categoryItem.channel.displayName"
                 t-ref="root"
             >
-                <div class="o_DiscussSidebarCategoryItem_item o_DiscussSidebarCategoryItem_avatar">
-                    <div class="o_DiscussSidebarCategoryItem_imageContainer">
-                        <img class="o_DiscussSidebarCategoryItem_image rounded-circle" t-att-src="categoryItem.avatarUrl" alt="Thread Image"/>
+                <div class="o_DiscussSidebarCategoryItem_item o_DiscussSidebarCategoryItem_avatar ms-4">
+                    <div class="o_DiscussSidebarCategoryItem_imageContainer position-relative d-flex">
+                        <img class="o_DiscussSidebarCategoryItem_image w-100 h-100 rounded-circle" t-att-src="categoryItem.avatarUrl" alt="Thread Image"/>
                         <t t-if="categoryItem.hasThreadIcon">
-                            <ThreadIcon className="'o_DiscussSidebarCategoryItem_threadIcon'" thread="categoryItem.channel"/>
+                            <ThreadIcon className="'o_DiscussSidebarCategoryItem_threadIcon position-absolute bottom-0 end-0 d-flex align-items-center justify-content-center rounded-circle bg-100'" thread="categoryItem.channel"/>
                         </t>
                     </div>
                 </div>
-                <span class="o_DiscussSidebarCategoryItem_item o_DiscussSidebarCategoryItem_name ml-3 text-truncate" t-att-class="{ 'o-item-unread': categoryItem.isUnread }">
+                <span class="o_DiscussSidebarCategoryItem_item o_DiscussSidebarCategoryItem_name ms-3 me-2 text-truncate" t-att-class="{ 'o-item-unread font-weight-bolder': categoryItem.isUnread }">
                     <t t-esc="categoryItem.channel.displayName"/>
                 </span>
                 <div class="o-autogrow o_DiscussSidebarCategoryItem_item"/>
-                <div class="o_DiscussSidebarCategoryItem_item o_DiscussSidebarCategoryItem_commands">
+                <div t-attf-class="o_DiscussSidebarCategoryItem_item o_DiscussSidebarCategoryItem_commands ms-1 {{ categoryItem.channel and categoryItem.channel.rtcSessions.length ? 'me-1' : 'me-3' }}">
                     <t t-if="categoryItem.hasSettingsCommand">
-                        <div class="o_DiscussSidebarCategoryItem_command o_DiscussSidebarCategoryItem_commandSettings fa fa-cog" t-on-click="categoryItem.onClickCommandSettings" title="Channel settings" role="img"/>
+                        <div t-attf-class="o_DiscussSidebarCategoryItem_command o_DiscussSidebarCategoryItem_commandSettings fa fa-cog {{ o_DiscussSidebarCategoryItem_hoverItem }}" t-on-click="categoryItem.onClickCommandSettings" title="Channel settings" role="img"/>
                     </t>
                     <t t-if="categoryItem.hasLeaveCommand">
-                        <div class="o_DiscussSidebarCategoryItem_command o_DiscussSidebarCategoryItem_commandLeave fa fa-times" t-on-click="categoryItem.onClickCommandLeave" title="Leave this channel" role="img"/>
+                        <div t-attf-class="o_DiscussSidebarCategoryItem_command o_DiscussSidebarCategoryItem_commandLeave fa fa-times {{ o_DiscussSidebarCategoryItem_hoverItem }} ms-1" t-on-click="categoryItem.onClickCommandLeave" title="Leave this channel" role="img"/>
                     </t>
                     <t t-if="categoryItem.hasUnpinCommand">
-                        <div class="o_DiscussSidebarCategoryItem_command o_DiscussSidebarCategoryItem_commandUnpin fa fa-times" t-on-click="categoryItem.onClickCommandUnpin" title="Unpin Conversation" role="img"/>
+                        <div t-attf-class="o_DiscussSidebarCategoryItem_command o_DiscussSidebarCategoryItem_commandUnpin fa fa-times {{ o_DiscussSidebarCategoryItem_hoverItem }} ms-1" t-on-click="categoryItem.onClickCommandUnpin" title="Unpin Conversation" role="img"/>
                     </t>
                 </div>
                 <t t-if="categoryItem.channel and categoryItem.channel.rtcSessions.length">
-                    <div class="o_DiscussSidebarCategoryItem_item o_DiscussSidebarCategoryItem_callIndicator fa fa-volume-up" t-att-class="{ 'o-isCalling': categoryItem.channel.rtc }"/>
+                    <div class="o_DiscussSidebarCategoryItem_item o_DiscussSidebarCategoryItem_callIndicator fa fa-volume-up ms-1 me-3" t-att-class="{ 'o-isCalling text-danger': categoryItem.channel.rtc }"/>
                 </t>
                 <t t-if="categoryItem.counter > 0">
-                    <div class="o_DiscussSidebarCategoryItem_counter o_DiscussSidebarCategoryItem_item badge badge-pill">
+                    <div class="o_DiscussSidebarCategoryItem_counter o_DiscussSidebarCategoryItem_item badge badge-pill badge-primary ms-1 me-3">
                         <t t-esc="categoryItem.counter"/>
                     </div>
                 </t>
-            </div>
+            </button>
         </t>
     </t>
 </templates>