diff --git a/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.scss b/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.scss
index b51ed9cf0f8..7539a378ec6 100644
--- a/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.scss
+++ b/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.scss
@@ -2,40 +2,12 @@
 // Layout
 // ------------------------------------------------------------------
 
-.o_MessageSeenIndicator {
-    display: flex;
-    position: relative;
-    flex-wrap: nowrap;
-}
-
 .o_MessageSeenIndicator_icon {
     // fa icons have a line height of 1 by default which breaks alignment
     line-height: 1.5;
 
-    &.o-first {
-        padding-left: map-get($spacers, 1);
-    }
-
     &.o-second {
-        position: absolute;
         top: -1px;
         left: -1px;
     }
 }
-
-// ------------------------------------------------------------------
-// Style
-// ------------------------------------------------------------------
-
-.o_MessageSeenIndicator {
-    opacity: 0.6;
-
-    &.o-all-seen {
-        color: $o-brand-odoo;
-    }
-
-    &:hover {
-        cursor: pointer;
-        opacity: 0.8;
-    }
-}
diff --git a/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.xml b/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.xml
index 23da1743866..6cd75360806 100644
--- a/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.xml
+++ b/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.xml
@@ -3,13 +3,13 @@
 
     <t t-name="mail.MessageSeenIndicator" owl="1">
         <t t-if="messageSeenIndicatorView">
-            <span class="o_MessageSeenIndicator" t-att-class="{ 'o-all-seen': messageSeenIndicatorView.messageSeenIndicator.hasEveryoneSeen }" t-attf-class="{{ className }}" t-att-title="messageSeenIndicatorView.messageSeenIndicator.text" t-ref="root">
+            <span class="o_MessageSeenIndicator position-relative d-flex opacity-75-hover opacity-50" t-att-class="{ 'o-all-seen text-odoo': messageSeenIndicatorView.messageSeenIndicator.hasEveryoneSeen }" t-attf-class="{{ className }}" t-att-title="messageSeenIndicatorView.messageSeenIndicator.text" t-ref="root">
                 <t t-if="!messageSeenIndicatorView.messageSeenIndicator.isMessagePreviousToLastCurrentPartnerMessageSeenByEveryone">
                     <t t-if="messageSeenIndicatorView.messageSeenIndicator.hasSomeoneFetched or messageSeenIndicatorView.messageSeenIndicator.hasSomeoneSeen">
-                        <i class="o_MessageSeenIndicator_icon o-first fa fa-check"/>
+                        <i class="o_MessageSeenIndicator_icon o-first fa fa-check pl-1"/>
                     </t>
                     <t t-if="messageSeenIndicatorView.messageSeenIndicator.hasSomeoneSeen">
-                        <i class="o_MessageSeenIndicator_icon o-second fa fa-check"/>
+                        <i class="o_MessageSeenIndicator_icon o-second fa fa-check position-absolute"/>
                     </t>
                 </t>
             </span>