diff --git a/addons/mail/static/src/components/message/message.scss b/addons/mail/static/src/components/message/message.scss
index 77fa479967b..38af3664ccd 100644
--- a/addons/mail/static/src/components/message/message.scss
+++ b/addons/mail/static/src/components/message/message.scss
@@ -2,29 +2,15 @@
 // Layout
 // ------------------------------------------------------------------
 
-// TODO : When the migration to BS5 for the backend AND the frontend
-// will be done, we could use BS5 classes to handle the position values
-// (eg. position-absolute top-0 end-0 mt-n3)
 .o_Message_actionListContainer {
-    @include o-position-absolute($top: - map-get($spacers, 3), $right: 0);
     z-index: 10; // Place the element in front of the Composer when they overlap
 }
 
-.o_Message_authorAvatar {
-    object-fit: cover;
-}
-
 .o_Message_authorAvatarContainer {
     height: $o-mail-thread-avatar-size;
     width: $o-mail-thread-avatar-size;
 }
 
-.o_Message_authorName {
-    // Could be replaced by "me-2" after the migration to BS5
-    // for the backend AND the frontend
-    margin-inline-end: map-get($spacers, 2);
-}
-
 .o_Message_content {
     *:not(li):not(li div) {
         // Message content can contain arbitrary HTML that might overflow and break
@@ -45,47 +31,17 @@
 
 .o_Message_core {
     min-width: 0; // allows this flex child to shrink more than its content
-    // Could be replaced by "me-4" after the migration to BS5
-    // for the backend AND the frontend
-    margin-inline-end: map-get($spacers, 4);
-}
-
-.o_Message_headerDate {
-    // Could be replaced by "me-2" after the migration to BS5
-    // for the backend AND the frontend
-    margin-inline-end: map-get($spacers, 2);
 }
 
 .o_Message_highlightIndicator {
-    // Could be replaced by "position absolute top-0 start-0"
-    // after the migration to BS5 for the backend AND the frontend
-    @include o-position-absolute($top: 0, $left: 0);
     width: $o-mail-discuss-message-highlight-indicator-width;
     transition: background-color .5s ease-out;
 }
 
-.o_Message_originThread {
-    // Could be replaced by "me-2" after the migration to BS5
-    // for the backend AND the frontend
-    margin-inline-end: map-get($spacers, 2);
-}
-
-.o_Message_personaImStatusIcon {
-    // Could be replaced by "position absolute bottom-0 end-0"
-    // after the migration to BS5 for the backend AND the frontend
-    @include o-position-absolute($bottom: 0, $right: 0);
-}
-
 .o_Message_prettyBody > p {
     margin-bottom: 0;
 }
 
-.o_Message_seenIndicator {
-    // Could be replaced by "me-1" after the migration to BS5
-    // for the backend AND the frontend
-    margin-inline-end: map-get($spacers, 1);
-}
-
 .o_Message_sidebar {
     flex-basis: $o-mail-message-sidebar-width;
     max-width: $o-mail-message-sidebar-width;
@@ -111,10 +67,6 @@
     }
 }
 
-.o_Message_originThreadLink {
-    font-size: 1.25em; // original size
-}
-
 // Used to hide buttons on rating emails in chatter
 // FIXME: should use a better approach for not having such buttons
 // in chatter of such messages, but keep having them in emails.
diff --git a/addons/mail/static/src/components/message/message.xml b/addons/mail/static/src/components/message/message.xml
index a103cf15bc3..3622f66c3a3 100644
--- a/addons/mail/static/src/components/message/message.xml
+++ b/addons/mail/static/src/components/message/message.xml
@@ -26,18 +26,18 @@
                 t-ref="root"
             >
                 <MessageInReplyToView t-if="messageView.messageInReplyToView" record="messageView.messageInReplyToView"/>
-                <div t-if="messageView.isActive and messageView.messageActionList" class="o_Message_actionListContainer position-absolute px-3" t-att-class="{ 'o-squashed': messageView.isSquashed }">
+                <div t-if="messageView.isActive and messageView.messageActionList" class="o_Message_actionListContainer position-absolute top-0 end-0 mt-n3 px-3" t-att-class="{ 'o-squashed': messageView.isSquashed }">
                     <MessageActionList record="messageView.messageActionList"/>
                 </div>
                 <div class="d-flex flex-shrink-0">
-                    <div class="o_Message_highlightIndicator h-100" t-att-class="{ 'o-active bg-primary': messageView.message.isHighlighted or messageView.isHighlighted }"/>
+                    <div class="o_Message_highlightIndicator position-absolute top-0 start-0 h-100" t-att-class="{ 'o-active bg-primary': messageView.message.isHighlighted or messageView.isHighlighted }"/>
                     <div class="o_Message_sidebar d-flex justify-content-center flex-shrink-0" t-att-class="{ 'o-message-squashed align-items-start': messageView.isSquashed }">
                         <t t-if="!messageView.isSquashed">
                             <div class="o_Message_authorAvatarContainer o_Message_sidebarItem position-relative mx-1">
-                                <img class="o_Message_authorAvatar w-100 h-100 rounded-circle" t-att-class="{ 'o_cursor_pointer': messageView.hasAuthorOpenChat, o_redirect: messageView.hasAuthorOpenChat }" t-att-src="messageView.message.avatarUrl" t-att-role="messageView.hasAuthorOpenChat ? 'button' : ''" t-att-tabindex="messageView.hasAuthorOpenChat ? '0' : ''" t-on-click="messageView.onClickAuthorAvatar" t-att-title="messageView.authorTitleText" t-att-alt="messageView.authorTitleText"/>
+                                <img class="o_Message_authorAvatar w-100 h-100 rounded-circle o_object_fit_cover" t-att-class="{ 'o_cursor_pointer': messageView.hasAuthorOpenChat, o_redirect: messageView.hasAuthorOpenChat }" t-att-src="messageView.message.avatarUrl" t-att-role="messageView.hasAuthorOpenChat ? 'button' : ''" t-att-tabindex="messageView.hasAuthorOpenChat ? '0' : ''" t-on-click="messageView.onClickAuthorAvatar" t-att-title="messageView.authorTitleText" t-att-alt="messageView.authorTitleText"/>
                                 <t t-if="messageView.personaImStatusIconView">
                                     <PersonaImStatusIcon
-                                        className="'o_Message_personaImStatusIcon d-flex align-items-center justify-content-center'"
+                                        className="'o_Message_personaImStatusIcon position-absolute bottom-0 end-0 d-flex align-items-center justify-content-center'"
                                         classNameObj="{
                                             'o-message-selected text-400': messageView.isSelected,
                                             'o_Message_personaImStatusIcon-mobile': messaging.device.isSmall,
@@ -58,7 +58,7 @@
                                 </small>
                             </t>
                             <t t-if="!messageView.isActive and messageView.messageSeenIndicatorView">
-                                <MessageSeenIndicator className="'o_Message_seenIndicator'" record="messageView.messageSeenIndicatorView"/>
+                                <MessageSeenIndicator className="'o_Message_seenIndicator me-1'" record="messageView.messageSeenIndicatorView"/>
                             </t>
                         </t>
                     </div>
@@ -66,7 +66,7 @@
                         <t t-if="!messageView.isSquashed">
                             <div class="o_Message_header d-flex flex-wrap align-items-baseline ms-2">
                                 <t t-if="messageView.message.author">
-                                    <strong class="o_Message_authorName o_redirect text-truncate" t-att-class="{'o_cursor_pointer': messageView.hasAuthorOpenChat}" t-att-role="messageView.hasAuthorOpenChat ? 'button' : ''" t-att-tabindex="messageView.hasAuthorOpenChat ? '0' : ''" t-on-click="messageView.onClickAuthorName" t-att-title="messageView.authorTitleText">
+                                    <strong class="o_Message_authorName o_redirect me-2 text-truncate" t-att-class="{'o_cursor_pointer': messageView.hasAuthorOpenChat}" t-att-role="messageView.hasAuthorOpenChat ? 'button' : ''" t-att-tabindex="messageView.hasAuthorOpenChat ? '0' : ''" t-on-click="messageView.onClickAuthorName" t-att-title="messageView.authorTitleText">
                                         <t t-if="messageView.message.originThread">
                                             <t t-esc="messageView.message.originThread.getMemberName(messageView.message.author)"/>
                                         </t>
@@ -76,37 +76,37 @@
                                     </strong>
                                 </t>
                                 <t t-elif="messageView.message.guestAuthor">
-                                    <strong class="o_Message_authorName text-truncate">
+                                    <strong class="o_Message_authorName me-2 text-truncate">
                                         <t t-esc="messageView.message.guestAuthor.name"/>
                                     </strong>
                                 </t>
                                 <t t-elif="messageView.message.email_from">
-                                    <a class="o_Message_authorName text-truncate" t-attf-href="mailto:{{ messageView.message.email_from }}?subject=Re: {{ messageView.message.subject ? messageView.message.subject : '' }}">
+                                    <a class="o_Message_authorName me-2 text-truncate" t-attf-href="mailto:{{ messageView.message.email_from }}?subject=Re: {{ messageView.message.subject ? messageView.message.subject : '' }}">
                                         <strong>
                                             <t t-esc="messageView.message.email_from"/>
                                         </strong>
                                     </a>
                                 </t>
                                 <t t-else="">
-                                    <strong class="o_Message_authorName text-truncate">
+                                    <strong class="o_Message_authorName me-2 text-truncate">
                                         Anonymous
                                     </strong>
                                 </t>
                                 <t t-if="messageView.message.date">
-                                    <small class="o_Message_date o_Message_headerDate text-500" t-att-class="{ 'o-message-selected text-600': messageView.isSelected, 'text-500': !messageView.isSelected }" t-att-title="messageView.message.datetime">
+                                    <small class="o_Message_date o_Message_headerDate me-2 text-500" t-att-class="{ 'o-message-selected text-600': messageView.isSelected, 'text-500': !messageView.isSelected }" t-att-title="messageView.message.datetime">
                                         - <t t-esc="messageView.dateFromNow"/>
                                     </small>
                                 </t>
                                 <t t-if="messageView.messageSeenIndicatorView">
-                                    <MessageSeenIndicator className="'o_Message_seenIndicator'" record="messageView.messageSeenIndicatorView"/>
+                                    <MessageSeenIndicator className="'o_Message_seenIndicator me-1'" record="messageView.messageSeenIndicatorView"/>
                                 </t>
                                 <t t-if="messageView.messageListViewMessageViewItemOwner and messageView.message.originThread and messageView.message.originThread !== messageView.messageListViewMessageViewItemOwner.messageListViewOwner.threadViewOwner.thread">
-                                    <small class="o_Message_originThread" t-att-class="{ 'o-message-selected text-600': messageView.isSelected, 'text-500': !messageView.isSelected }">
+                                    <small class="o_Message_originThread me-2" t-att-class="{ 'o-message-selected text-600': messageView.isSelected, 'text-500': !messageView.isSelected }">
                                         <t t-if="messageView.message.originThread.model === 'mail.channel'">
-                                            (from <a class="o_Message_originThreadLink" t-att-href="messageView.message.originThread.url" t-on-click="messageView.onClickOriginThread"><t t-if="messageView.message.originThread.displayName">#<t t-esc="messageView.message.originThread.displayName"/></t><t t-else="">channel</t></a>)
+                                            (from <a class="o_Message_originThreadLink fs-6" t-att-href="messageView.message.originThread.url" t-on-click="messageView.onClickOriginThread"><t t-if="messageView.message.originThread.displayName">#<t t-esc="messageView.message.originThread.displayName"/></t><t t-else="">channel</t></a>)
                                         </t>
                                         <t t-else="">
-                                            on <a class="o_Message_originThreadLink" t-att-href="messageView.message.originThread.url" t-on-click="messageView.onClickOriginThread"><t t-if="messageView.message.originThread.displayName"><t t-esc="messageView.message.originThread.displayName"/></t><t t-else="">document</t></a>
+                                            on <a class="o_Message_originThreadLink fs-6" t-att-href="messageView.message.originThread.url" t-on-click="messageView.onClickOriginThread"><t t-if="messageView.message.originThread.displayName"><t t-esc="messageView.message.originThread.displayName"/></t><t t-else="">document</t></a>
                                         </t>
                                     </small>
                                 </t>