diff --git a/addons/mail/static/src/core/web/messaging_menu.xml b/addons/mail/static/src/core/web/messaging_menu.xml
index 5a845282a09..1b4c36550d1 100644
--- a/addons/mail/static/src/core/web/messaging_menu.xml
+++ b/addons/mail/static/src/core/web/messaging_menu.xml
@@ -80,7 +80,7 @@
                     displayName="thread.displayName"
                     iconSrc="thread.imgUrl"
                     hasMarkAsReadButton="thread.isUnread"
-                    muted="thread.muteUntilDateTime"
+                    muted="thread.muteUntilDateTime ? 2 : !thread.isUnread ? 1 : 0"
                     onClick="(isMarkAsRead) => this.onClickThread(isMarkAsRead, thread)"
                     onSwipeRight="hasTouch() and thread.isUnread ? { action: () => this.markAsRead(thread), icon: 'fa-check-circle', bgColor: 'bg-success' } : undefined"
                     onSwipeLeft="hasTouch() and threadService.canUnpin(thread) ? { action: () => this.threadService.unpin(thread), icon: 'fa-times-circle', bgColor: 'bg-danger' } : undefined"
diff --git a/addons/mail/static/src/core/web/notification_item.js b/addons/mail/static/src/core/web/notification_item.js
index 8e8a777881c..0894f9e9e99 100644
--- a/addons/mail/static/src/core/web/notification_item.js
+++ b/addons/mail/static/src/core/web/notification_item.js
@@ -26,6 +26,7 @@ export class NotificationItem extends Component {
     static defaultProps = {
         counter: 0,
         displayName: "",
+        muted: 0,
     };
     static template = "mail.NotificationItem";
 
diff --git a/addons/mail/static/src/core/web/notification_item.xml b/addons/mail/static/src/core/web/notification_item.xml
index 1dab4cfba9e..382701f9da4 100644
--- a/addons/mail/static/src/core/web/notification_item.xml
+++ b/addons/mail/static/src/core/web/notification_item.xml
@@ -3,16 +3,16 @@
 
 <t t-name="mail.NotificationItem">
     <ActionSwiper onLeftSwipe="props.onSwipeLeft ? props.onSwipeLeft : undefined" onRightSwipe="props.onSwipeRight ? props.onSwipeRight : undefined">
-        <button class="o-mail-NotificationItem list-group-item list-group-item-action d-flex cursor-pointer align-items-center p-1" t-att-class="{ 'text-muted': !props.hasMarkAsReadButton, 'opacity-50': props.muted }" t-on-click="onClick" t-ref="root">
+        <button class="o-mail-NotificationItem list-group-item list-group-item-action d-flex cursor-pointer align-items-center p-1" t-att-class="{ 'text-muted': props.muted === 1, 'opacity-50': props.muted === 2 }" t-on-click="onClick" t-ref="root">
             <div class="position-relative o-bg-inherit m-1 flex-shrink-0" style="width:40px;height:40px;">
                 <img class="o_avatar w-100 h-100 rounded" alt="Notification Item Image" t-att-src="props.iconSrc"/>
                 <t t-slot="icon"/>
             </div>
             <div class="d-flex flex-column flex-grow-1 align-self-start m-2 overflow-auto">
                 <div class="d-flex text-nowrap">
-                    <span class="o-mail-NotificationItem-name text-truncate" t-att-class="props.hasMarkAsReadButton and !props.muted ? 'fw-bolder' : 'fw-bold'" t-esc="props.displayName"/>
+                    <span class="o-mail-NotificationItem-name text-truncate" t-att-class="props.muted === 1 ? 'fw-bolder' : 'fw-bold'" t-esc="props.displayName"/>
                     <span class="flex-grow-1"/>
-                    <small t-if="props.datetime" class="o-mail-NotificationItem-date ms-2" t-att-class="{ 'opacity-75 fw-bold': props.counter > 0 and !props.muted, 'opacity-50 text-muted': props.counter === 0 || props.muted }">
+                    <small t-if="props.datetime" class="o-mail-NotificationItem-date ms-2" t-att-class="{ 'opacity-75 fw-bold': !props.muted, 'opacity-50 text-muted': props.muted }">
                         <RelativeTime datetime="props.datetime"/>
                     </small>
                 </div>
@@ -23,7 +23,7 @@
                     </div>
                     <div class="flex-grow-1"/>
                     <div class="d-flex align-items-center">
-                        <span t-if="props.counter > 0 and !rootHover.isHover" t-attf-class="o-mail-NotificationItem-badge o-discuss-badge {{props.muted ? 'o-muted' : ''}} d-flex align-items-center justify-content-center m-0 badge rounded-pill fw-bold o-mail-NotificationItem-counter"><t t-esc="props.counter"/></span>
+                        <span t-if="props.counter > 0 and !rootHover.isHover" t-attf-class="o-mail-NotificationItem-badge o-discuss-badge {{props.muted === 2 ? 'o-muted' : ''}} d-flex align-items-center justify-content-center m-0 badge rounded-pill fw-bold o-mail-NotificationItem-counter"><t t-esc="props.counter"/></span>
                         <span t-if="props.hasMarkAsReadButton and rootHover.isHover" class="o-mail-NotificationItem-badge o-discuss-badgeShape text-success d-flex align-items-center justify-content-center m-0 badge rounded-pill fw-bold o-mail-NotificationItem-markAsRead fa fa-check text-600 opacity-50 opacity-100-hover cursor-pointer" title="Mark As Read" t-ref="markAsRead"/>
                     </div>
                 </div>