diff --git a/addons/mail/static/src/components/message/message.scss b/addons/mail/static/src/components/message/message.scss
index 6b42fe90aa0..98f4c1a63c3 100644
--- a/addons/mail/static/src/components/message/message.scss
+++ b/addons/mail/static/src/components/message/message.scss
@@ -5,9 +5,13 @@
 .o_Message {
     display: flex;
     flex: 0 0 auto;
+}
 
-    &:not(:first-child) {
-        margin-top: map-get($spacers, 1);
+.o_Message_actionListContainer {
+    @include o-position-absolute($top: - map-get($spacers, 3), $right: 0);
+
+    &.o-squashed {
+        @include o-position-absolute($top: - map-get($spacers, 4), $right: 0);
     }
 }
 
@@ -54,8 +58,6 @@
 
 .o_Message_core {
     min-width: 0; // allows this flex child to shrink more than its content
-    margin-top: map-get($spacers, 1);
-    margin-bottom: map-get($spacers, 1);
     margin-inline-end: map-get($spacers, 4);
 }
 
@@ -92,7 +94,7 @@
 
 .o_Message_prettyBody {
 
-    > p:last-of-type {
+    > p {
         margin-bottom: 0;
     }
 
@@ -110,7 +112,6 @@
     flex: 0 0 $o-mail-message-sidebar-width;
     max-width: $o-mail-message-sidebar-width;
     display: flex;
-    margin-top: map-get($spacers, 2);
     justify-content: center;
 }
 
@@ -147,6 +148,10 @@
     &.o-not-discussion {
         background-color: gray('100');
 
+        &.o_Message_active {
+            background-color: mix(gray('100'), gray('200'));
+        }
+
         .o_Message_partnerImStatusIcon {
             color: gray('100'); // same color as background of parent
         }
@@ -171,6 +176,10 @@
     &.o-highlighted {
         background-color: rgba($o-brand-primary, .1);
     }
+
+    &.o_Message_active {
+        background-color: gray('100');
+    }
 }
 
 .o_Message_authorName {
@@ -191,6 +200,7 @@
 }
 
 .o_Message_date {
+    font-size: 0.8em;
     color: gray('500');
 
     &.o-message-selected {
@@ -198,16 +208,6 @@
     }
 }
 
-.o_Message_contentWrapper {
-    // transparent border to avoid layout moving around when it becomes active
-    border: $border-width solid transparent;
-    border-radius: $o-mail-rounded-rectangle-border-radius-sm;
-
-    &.o_Message_contentWrapper_active {
-        border: $border-width solid $border-color;
-    }
-}
-
 .o_Message_highlightIndicator.o-active {
     background-color: $o-brand-primary;
 }
diff --git a/addons/mail/static/src/components/message/message.xml b/addons/mail/static/src/components/message/message.xml
index ee1f09eed7f..263c0452e10 100644
--- a/addons/mail/static/src/components/message/message.xml
+++ b/addons/mail/static/src/components/message/message.xml
@@ -2,8 +2,9 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.Message" owl="1">
-        <div class="o_Message"
+        <div class="o_Message position-relative pt-1"
             t-att-class="{
+                'o_Message_active': isActive,
                 'o-clicked': state.isClicked,
                 'o-discussion': message and (message.is_discussion or message.is_notification),
                 'o-has-message-selection': threadView and threadView.threadViewer and threadView.threadViewer.selectedMessage,
@@ -14,9 +15,13 @@
                 'o-selected': isSelected,
                 'o-squashed': props.isSquashed,
                 'o-starred': message and message.isStarred,
+                'mt-3': !props.isSquashed,
             }" t-on-click="_onClick" t-on-mouseenter="state.isHovered = true" t-on-mouseleave="state.isHovered = false" t-att-data-message-local-id="message and message.localId"
         >
             <t t-if="message" name="rootCondition">
+                <div t-if="(isActive or message.actionList.showDeleteConfirm) and props.showActions"  class="o_Message_actionListContainer pl-5 pr-3" t-att-class="{ 'o-squashed': props.isSquashed }">
+                    <MessageActionList actionListLocalId="message.actionList.localId" hasReplyIcon="props.hasReplyIcon" hasMarkAsReadIcon="props.hasMarkAsReadIcon"/>
+                </div>
                 <div class="o_Message_highlightIndicator" t-att-class="{ 'o-active': message.isHighlighted }"/>
                 <div class="o_Message_sidebar" t-att-class="{ 'o-message-squashed align-items-start': props.isSquashed }">
                     <t t-if="!props.isSquashed">
@@ -37,7 +42,7 @@
                     </t>
                     <t t-else="">
                         <t t-if="isActive and message.date">
-                            <div class="o_Message_date o_Message_sidebarItem d-flex" t-att-class="{ 'o-message-selected': isSelected }">
+                            <div class="o_Message_date o_Message_sidebarItem mt-1" t-att-class="{ 'o-message-selected': isSelected }">
                                 <t t-esc="shortTime"/>
                             </div>
                         </t>
@@ -108,55 +113,47 @@
                             </t>
                         </div>
                     </t>
-                    <div class="o_Message_contentWrapper position-relative" t-att-class="{ 'o_Message_contentWrapper_active': isActive and props.showActions }">
-                        <MessageActionList
-                            t-if="(isActive or message.actionList.showDeleteConfirm) and props.showActions"
-                            actionListLocalId="message.actionList.localId"
-                            hasReplyIcon="props.hasReplyIcon"
-                            hasMarkAsReadIcon="props.hasMarkAsReadIcon"
-                        />
-                        <div class="o_Message_content m-2" t-ref="content">
-                            <div class="o_Message_prettyBody" t-ref="prettyBody"/><!-- message.prettyBody is inserted here from _update() -->
-                            <t t-if="message.subtype_description and !message.isBodyEqualSubtypeDescription">
-                                <p t-esc="message.subtype_description"/>
-                            </t>
-                            <t t-if="trackingValues.length > 0">
-                                <ul class="o_Message_trackingValues">
-                                    <t t-foreach="trackingValues" t-as="value" t-key="value.id">
-                                        <li>
-                                            <div class="o_Message_trackingValue">
-                                                <div class="o_Message_trackingValueFieldName o_Message_trackingValueItem" t-esc="value.changed_field"/>
-                                                <t t-if="value.old_value">
-                                                    <div class="o_Message_trackingValueOldValue o_Message_trackingValueItem" t-esc="value.old_value"/>
-                                                </t>
-                                                <div class="o_Message_trackingValueSeparator o_Message_trackingValueItem fa fa-long-arrow-right" title="Changed" role="img"/>
-                                                <t t-if="value.new_value">
-                                                    <div class="o_Message_trackingValueNewValue o_Message_trackingValueItem" t-esc="value.new_value"/>
-                                                </t>
-                                            </div>
-                                        </li>
-                                    </t>
-                                </ul>
-                            </t>
-                        </div>
-                        <div class="d-flex flex-wrap ml-2">
-                            <t t-foreach="message.messageReactionGroups" t-as="messageReactionGroup" t-key="messageReactionGroup.localId">
-                                <MessageReactionGroup messageReactionGroupLocalId="messageReactionGroup.localId"/>
-                            </t>
-                        </div>
-                        <t t-if="message.subject and !message.isSubjectSimilarToOriginThreadName">
-                            <p class="o_Message_subject m-2 mt-0">Subject: <t t-esc="message.subject"/></p>
+                    <t t-if="message.subject and !message.isSubjectSimilarToOriginThreadName">
+                        <p class="o_Message_subject mx-2 mb-1">Subject: <t t-esc="message.subject"/></p>
+                    </t>
+                    <div class="o_Message_content mx-2" t-ref="content">
+                        <div class="o_Message_prettyBody" t-ref="prettyBody"/><!-- message.prettyBody is inserted here from _update() -->
+                        <t t-if="message.subtype_description and !message.isBodyEqualSubtypeDescription">
+                            <p t-esc="message.subtype_description"/>
                         </t>
-                        <t t-if="message.attachments and message.attachments.length > 0">
-                            <div class="o_Message_footer">
-                                <AttachmentList
-                                    class="o_Message_attachmentList"
-                                    areAttachmentsDownloadable="true"
-                                    areAttachmentsEditable="message.author === messaging.currentPartner"
-                                    attachmentLocalIds="message.attachments.map(attachment => attachment.localId)"
-                                    attachmentsDetailsMode="props.attachmentsDetailsMode"
-                                />
-                            </div>
+                        <t t-if="trackingValues.length > 0">
+                            <ul class="o_Message_trackingValues">
+                                <t t-foreach="trackingValues" t-as="value" t-key="value.id">
+                                    <li>
+                                        <div class="o_Message_trackingValue">
+                                            <div class="o_Message_trackingValueFieldName o_Message_trackingValueItem" t-esc="value.changed_field"/>
+                                            <t t-if="value.old_value">
+                                                <div class="o_Message_trackingValueOldValue o_Message_trackingValueItem" t-esc="value.old_value"/>
+                                            </t>
+                                            <div class="o_Message_trackingValueSeparator o_Message_trackingValueItem fa fa-long-arrow-right" title="Changed" role="img"/>
+                                            <t t-if="value.new_value">
+                                                <div class="o_Message_trackingValueNewValue o_Message_trackingValueItem" t-esc="value.new_value"/>
+                                            </t>
+                                        </div>
+                                    </li>
+                                </t>
+                            </ul>
+                        </t>
+                    </div>
+                    <t t-if="message.attachments and message.attachments.length > 0">
+                        <div class="o_Message_footer">
+                            <AttachmentList
+                                class="o_Message_attachmentList"
+                                areAttachmentsDownloadable="true"
+                                areAttachmentsEditable="message.author === messaging.currentPartner"
+                                attachmentLocalIds="message.attachments.map(attachment => attachment.localId)"
+                                attachmentsDetailsMode="props.attachmentsDetailsMode"
+                            />
+                        </div>
+                    </t>
+                    <div t-if="message.messageReactionGroups.length > 0" class="d-flex flex-wrap ml-2">
+                        <t t-foreach="message.messageReactionGroups" t-as="messageReactionGroup" t-key="messageReactionGroup.localId">
+                            <MessageReactionGroup class="mr-1 mb-1" messageReactionGroupLocalId="messageReactionGroup.localId"/>
                         </t>
                     </div>
                 </div>
diff --git a/addons/mail/static/src/components/message_action_list/message_action_list.scss b/addons/mail/static/src/components/message_action_list/message_action_list.scss
index e6986491667..f60dae9fa9e 100644
--- a/addons/mail/static/src/components/message_action_list/message_action_list.scss
+++ b/addons/mail/static/src/components/message_action_list/message_action_list.scss
@@ -1,5 +1,4 @@
 .o_MessageActionList {
-    @include o-position-absolute($top: - map-get($spacers, 3), $right: map-get($spacers, 2));
     background-color: $white;
     border: $border-width solid $border-color;
     border-radius: $o-mail-rounded-rectangle-border-radius-sm;
diff --git a/addons/mail/static/src/components/message_list/message_list.scss b/addons/mail/static/src/components/message_list/message_list.scss
index e559859d17e..22452de273b 100644
--- a/addons/mail/static/src/components/message_list/message_list.scss
+++ b/addons/mail/static/src/components/message_list/message_list.scss
@@ -49,10 +49,6 @@
     flex: 0 0 auto;
 }
 
-.o_MessageList_separatorDate {
-    padding: map-get($spacers, 4) map-get($spacers, 0);
-}
-
 .o_MessageList_separatorLine {
     flex: 1 1 auto;
     width: auto;
diff --git a/addons/mail/static/src/components/message_list/message_list.xml b/addons/mail/static/src/components/message_list/message_list.xml
index 804635c237c..40da45b75b8 100644
--- a/addons/mail/static/src/components/message_list/message_list.xml
+++ b/addons/mail/static/src/components/message_list/message_list.xml
@@ -44,6 +44,7 @@
                 <t t-elif="props.order === 'asc' and orderedMessages.length > 0">
                     <t t-call="mail.MessageList.loadMore"/>
                 </t>
+                <div t-if="props.order === 'asc' and threadView.nonEmptyMessages.length !== 0" class="flex-grow-1"/>
                 <!-- MESSAGES -->
                 <t t-set="current_day" t-value="0"/>
                 <t t-set="prev_message" t-value="0"/>
@@ -56,7 +57,7 @@
                     <t t-if="!message.isEmpty">
                         <t t-set="message_day" t-value="getDateDay(message)"/>
                         <t t-if="current_day !== message_day">
-                            <div class="o_MessageList_separator o_MessageList_separatorDate o_MessageList_item">
+                            <div class="o_MessageList_separator o_MessageList_separatorDate o_MessageList_item pt-4">
                                 <hr class="o_MessageList_separatorLine"/><span class="o_MessageList_separatorLabel o_MessageList_separatorLabelDate"><t t-esc="message_day"/></span><hr class="o_MessageList_separatorLine"/>
                                 <t t-set="current_day" t-value="message_day"/>
                                 <t t-set="isMessageSquashed" t-value="false"/>
diff --git a/addons/mail/static/src/components/message_reaction_group/message_reaction_group.xml b/addons/mail/static/src/components/message_reaction_group/message_reaction_group.xml
index 92f42358268..dde158e6b4b 100644
--- a/addons/mail/static/src/components/message_reaction_group/message_reaction_group.xml
+++ b/addons/mail/static/src/components/message_reaction_group/message_reaction_group.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.MessageReactionGroup" owl="1">
-        <div class="o_MessageReactionGroup d-flex mr-1 mb-2" t-att-class="{'o-hasUserReacted': messageReactionGroup and messageReactionGroup.hasUserReacted}" t-att-title="messageReactionGroup and messageReactionGroup.summary" t-on-click="messageReactionGroup and messageReactionGroup.onClick">
+        <div class="o_MessageReactionGroup d-flex" t-att-class="{'o-hasUserReacted': messageReactionGroup and messageReactionGroup.hasUserReacted}" t-att-title="messageReactionGroup and messageReactionGroup.summary" t-on-click="messageReactionGroup and messageReactionGroup.onClick">
             <t t-if="messageReactionGroup">
                 <span class="o_MessageReactionGroup_content mx-1">
                     <t t-esc="messageReactionGroup.content"/>
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 3a9d566e399..b51ed9cf0f8 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
@@ -9,6 +9,8 @@
 }
 
 .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);