diff --git a/addons/mail/static/src/components/activity_box/activity_box.scss b/addons/mail/static/src/components/activity_box/activity_box.scss
index 64e9934766f..be4ed44a19c 100644
--- a/addons/mail/static/src/components/activity_box/activity_box.scss
+++ b/addons/mail/static/src/components/activity_box/activity_box.scss
@@ -1,45 +1,7 @@
-// ------------------------------------------------------------------
-// Layout
-// ------------------------------------------------------------------
-
-.o_ActivityBox_title {
-    display: flex;
-    align-items: center;
-    flex: 0 0 auto;
-    margin-top: map-get($spacers, 4);
-    margin-bottom: map-get($spacers, 4);
-}
-
-.o_ActivityBox_titleBadge {
-    padding: map-get($spacers, 0) map-get($spacers, 2);
-}
-
-.o_ActivityBox_titleBadges {
-    margin-inline-end: map-get($spacers, 3);
-}
-
-.o_ActivityBox_titleLine {
-    flex: 1 1 auto;
-    width: auto;
-}
-
-.o_ActivityBox_titleText {
-    margin: map-get($spacers, 0) map-get($spacers, 3);
-}
-
 // ------------------------------------------------------------------
 // Style
 // ------------------------------------------------------------------
 
-.o_ActivityBox_title {
-    font-weight: bold;
-}
-
-.o_ActivityBox_titleBadge {
-    font-size: 11px;
-}
-
 .o_ActivityBox_titleLine {
-    border-color: gray('400');
-    border-style: dashed;
+    border-top: $border-width $border-color dashed;
 }
diff --git a/addons/mail/static/src/components/activity_box/activity_box.xml b/addons/mail/static/src/components/activity_box/activity_box.xml
index 7c6364f745d..e7a254b6898 100644
--- a/addons/mail/static/src/components/activity_box/activity_box.xml
+++ b/addons/mail/static/src/components/activity_box/activity_box.xml
@@ -4,32 +4,32 @@
     <t t-name="mail.ActivityBox" owl="1">
         <div class="o_ActivityBox" t-attf-class="{{ className }}" t-ref="root">
             <t t-if="activityBoxView">
-                <a role="button" class="o_ActivityBox_title btn" t-on-click="activityBoxView.onClickActivityBoxTitle">
-                    <hr class="o_ActivityBox_titleLine" />
+                <a role="button" class="o_ActivityBox_title btn d-flex align-items-center mt-4 p-0 w-100 font-weight-bold" t-on-click="activityBoxView.onClickActivityBoxTitle">
+                    <hr class="o_ActivityBox_titleLine w-auto flex-grow-1 me-3" />
                     <span class="o_ActivityBox_titleText">
                         <i class="fa fa-fw" t-att-class="activityBoxView.isActivityListVisible ? 'fa-caret-down' : 'fa-caret-right'"/>
                         Planned activities
                     </span>
                     <t t-if="!activityBoxView.isActivityListVisible">
-                        <span class="o_ActivityBox_titleBadges">
+                        <span class="o_ActivityBox_titleBadges ms-2">
                             <t t-if="activityBoxView.chatter.thread.overdueActivities.length > 0">
-                                <span class="o_ActivityBox_titleBadge badge rounded-circle badge-danger">
+                                <span class="o_ActivityBox_titleBadge me-1 badge border-0 badge-danger">
                                     <t t-esc="activityBoxView.chatter.thread.overdueActivities.length"/>
                                 </span>
                             </t>
                             <t t-if="activityBoxView.chatter.thread.todayActivities.length > 0">
-                                <span class="o_ActivityBox_titleBadge badge rounded-circle badge-warning">
+                                <span class="o_ActivityBox_titleBadge me-1 badge border-0 badge-warning">
                                     <t t-esc="activityBoxView.chatter.thread.todayActivities.length"/>
                                 </span>
                             </t>
                             <t t-if="activityBoxView.chatter.thread.futureActivities.length > 0">
-                                <span class="o_ActivityBox_titleBadge badge rounded-circle badge-success">
+                                <span class="o_ActivityBox_titleBadge me-1 badge border-0 badge-success">
                                     <t t-esc="activityBoxView.chatter.thread.futureActivities.length"/>
                                 </span>
                             </t>
                         </span>
                     </t>
-                    <hr class="o_ActivityBox_titleLine" />
+                    <hr class="o_ActivityBox_titleLine w-auto flex-grow-1 ms-3"/>
                 </a>
                 <t t-if="activityBoxView.isActivityListVisible">
                     <div class="o_ActivityBox_activityList">