diff --git a/addons/im_livechat/static/tests/qunit_suite_tests/components/messaging_menu_tests.js b/addons/im_livechat/static/tests/qunit_suite_tests/components/messaging_menu_tests.js
index cdd15e205e7..4b42a055f2b 100644
--- a/addons/im_livechat/static/tests/qunit_suite_tests/components/messaging_menu_tests.js
+++ b/addons/im_livechat/static/tests/qunit_suite_tests/components/messaging_menu_tests.js
@@ -34,16 +34,16 @@ QUnit.test('livechats should be in "chat" filter', async function (assert) {
     await afterNextRender(() => document.querySelector('.o_MessagingMenu_toggler').click());
     assert.containsOnce(
         document.body,
-        '.o_MessagingMenu_tabButton[data-tab-id="all"]',
+        '.o_MessagingMenuTab[data-tab-id="all"]',
         "should have a tab/filter 'all' in messaging menu"
     );
     assert.containsOnce(
         document.body,
-        '.o_MessagingMenu_tabButton[data-tab-id="chat"]',
+        '.o_MessagingMenuTab[data-tab-id="chat"]',
         "should have a tab/filter 'chat' in messaging menu"
     );
     assert.hasClass(
-        document.querySelector('.o_MessagingMenu_tabButton[data-tab-id="all"]'),
+        document.querySelector('.o_MessagingMenuTab[data-tab-id="all"]'),
         'o-active',
         "tab/filter 'all' of messaging menu should be active initially"
     );
@@ -59,10 +59,10 @@ QUnit.test('livechats should be in "chat" filter', async function (assert) {
     );
 
     await afterNextRender(() =>
-        document.querySelector('.o_MessagingMenu_tabButton[data-tab-id="chat"]').click()
+        document.querySelector('.o_MessagingMenuTab[data-tab-id="chat"]').click()
     );
     assert.hasClass(
-        document.querySelector('.o_MessagingMenu_tabButton[data-tab-id="chat"]'),
+        document.querySelector('.o_MessagingMenuTab[data-tab-id="chat"]'),
         'o-active',
         "tab/filter 'chat' of messaging menu should become active after click"
     );
diff --git a/addons/mail/static/src/components/activity/activity.js b/addons/mail/static/src/components/activity/activity.js
index 835363cf78d..f947f2af1fd 100644
--- a/addons/mail/static/src/components/activity/activity.js
+++ b/addons/mail/static/src/components/activity/activity.js
@@ -1,6 +1,7 @@
 /** @odoo-module **/
 
 import { useComponentToModel } from '@mail/component_hooks/use_component_to_model';
+import { useRefToModel } from '@mail/component_hooks/use_ref_to_model';
 import { registerMessagingComponent } from '@mail/utils/messaging_component';
 
 import Popover from "web.Popover";
@@ -14,6 +15,7 @@ export class Activity extends LegacyComponent {
      setup() {
         super.setup();
         useComponentToModel({ fieldName: 'component', modelName: 'ActivityView' });
+        useRefToModel({ fieldName: 'markDoneButtonRef', modelName: 'ActivityView', refName: 'markDoneButton', });
     }
 
     /**
diff --git a/addons/mail/static/src/components/activity/activity.xml b/addons/mail/static/src/components/activity/activity.xml
index 8b79205f02f..1b0a2b9d914 100644
--- a/addons/mail/static/src/components/activity/activity.xml
+++ b/addons/mail/static/src/components/activity/activity.xml
@@ -119,16 +119,10 @@
 
                     <t t-if="activityView.activity.canWrite">
                         <div name="tools" class="o_Activity_tools d-flex">
-                            <t t-if="!activityView.fileUploader">
-                                <Popover position="'right'" title="activityView.markDoneText">
-                                    <button class="o_Activity_toolButton o_Activity_markDoneButton btn btn-link btn-primary pt-0 pl-0" t-att-title="activityView.markDoneText">
-                                        <i class="fa fa-check"/> Mark Done
-                                    </button>
-                                    <t t-set-slot="opened">
-                                        <ActivityMarkDonePopover localId="activityView.activityMarkDonePopoverView.localId"/>
-                                    </t>
-                                </Popover>
-                            </t>
+                            <button class="o_Activity_toolButton o_Activity_markDoneButton btn btn-link btn-primary pt-0 pl-0" t-att-title="activityView.markDoneText" t-ref="markDoneButton" t-on-click="activityView.onClickMarkDoneButton">
+                                <i class="fa fa-check"/> Mark Done
+                            </button>
+                            <PopoverView t-if="activityView.markDonePopoverView" localId="activityView.markDonePopoverView.localId"/>
                             <t t-if="activityView.fileUploader">
                                 <button class="o_Activity_toolButton o_Activity_uploadButton btn btn-link btn-primary pt-0 pl-0" t-on-click="activityView.onClickUploadDocument">
                                     <i class="fa fa-upload"/> Upload Document
diff --git a/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.xml b/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.xml
deleted file mode 100644
index 43f03c97409..00000000000
--- a/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.xml
+++ /dev/null
@@ -1,25 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<templates xml:space="preserve">
-
-    <t t-name="mail.ActivityMarkDonePopover" owl="1">
-        <t t-if="activityMarkDonePopoverView">
-            <div class="o_ActivityMarkDonePopover" t-attf-class="{{ className }}" t-on-keydown="activityMarkDonePopoverView.onKeydown" t-ref="root">
-                <textarea class="form-control o_ActivityMarkDonePopover_feedback mb-2" rows="3" placeholder="Write Feedback" t-on-blur="activityMarkDonePopoverView.onBlur" t-ref="feedbackTextarea"/>
-                <div class="o_ActivityMarkDonePopover_buttons">
-                    <button type="button" class="o_ActivityMarkDonePopover_doneScheduleNextButton btn btn-sm btn-primary" t-on-click="activityMarkDonePopoverView.onClickDoneAndScheduleNext">
-                        Done &amp; Schedule Next
-                    </button>
-                    <t t-if="activityMarkDonePopoverView.activityViewOwner.activity.chaining_type === 'suggest'">
-                        <button type="button" class="o_ActivityMarkDonePopover_doneButton btn btn-sm btn-primary mx-2" t-on-click="activityMarkDonePopoverView.onClickDone">
-                            Done
-                        </button>
-                    </t>
-                    <button type="button" class="o_ActivityMarkDonePopover_discardButton btn btn-sm btn-link" t-on-click="activityMarkDonePopoverView.onClickDiscard">
-                        Discard
-                    </button>
-                </div>
-            </div>
-        </t>
-    </t>
-
-</templates>
diff --git a/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.js b/addons/mail/static/src/components/activity_mark_done_popover_content/activity_mark_done_popover_content.js
similarity index 62%
rename from addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.js
rename to addons/mail/static/src/components/activity_mark_done_popover_content/activity_mark_done_popover_content.js
index 744bd75b45a..e96661f2a68 100644
--- a/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.js
+++ b/addons/mail/static/src/components/activity_mark_done_popover_content/activity_mark_done_popover_content.js
@@ -7,15 +7,15 @@ import { LegacyComponent } from "@web/legacy/legacy_component";
 
 const { onMounted, useRef } = owl;
 
-export class ActivityMarkDonePopover extends LegacyComponent {
+export class ActivityMarkDonePopoverContent extends LegacyComponent {
 
     /**
      * @override
      */
     setup() {
         super.setup();
-        useComponentToModel({ fieldName: 'component', modelName: 'ActivityMarkDonePopoverView' });
-        useRefToModel({ fieldName: 'feedbackTextareaRef', modelName: 'ActivityMarkDonePopoverView', refName: 'feedbackTextarea' });
+        useComponentToModel({ fieldName: 'component', modelName: 'ActivityMarkDonePopoverContentView' });
+        useRefToModel({ fieldName: 'feedbackTextareaRef', modelName: 'ActivityMarkDonePopoverContentView', refName: 'feedbackTextarea' });
         this._feedbackTextareaRef = useRef('feedbackTextarea');
         onMounted(() => this._mounted());
     }
@@ -26,23 +26,23 @@ export class ActivityMarkDonePopover extends LegacyComponent {
 
     _mounted() {
         this._feedbackTextareaRef.el.focus();
-        if (this.activityMarkDonePopoverView.activityViewOwner.activity.feedbackBackup) {
-            this._feedbackTextareaRef.el.value = this.activityMarkDonePopoverView.activityViewOwner.activity.feedbackBackup;
+        if (this.activityMarkDonePopoverContentView.activityViewOwner.activity.feedbackBackup) {
+            this._feedbackTextareaRef.el.value = this.activityMarkDonePopoverContentView.activityViewOwner.activity.feedbackBackup;
         }
     }
 
     /**
-     * @returns {ActivityMarkDonePopoverView}
+     * @returns {ActivityMarkDonePopoverContentView}
      */
-    get activityMarkDonePopoverView() {
-        return this.messaging && this.messaging.models['ActivityMarkDonePopoverView'].get(this.props.localId);
+    get activityMarkDonePopoverContentView() {
+        return this.messaging && this.messaging.models['ActivityMarkDonePopoverContentView'].get(this.props.localId);
     }
 
 }
 
-Object.assign(ActivityMarkDonePopover, {
+Object.assign(ActivityMarkDonePopoverContent, {
     props: { localId: String },
-    template: 'mail.ActivityMarkDonePopover',
+    template: 'mail.ActivityMarkDonePopoverContent',
 });
 
-registerMessagingComponent(ActivityMarkDonePopover);
+registerMessagingComponent(ActivityMarkDonePopoverContent);
diff --git a/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.scss b/addons/mail/static/src/components/activity_mark_done_popover_content/activity_mark_done_popover_content.scss
similarity index 79%
rename from addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.scss
rename to addons/mail/static/src/components/activity_mark_done_popover_content/activity_mark_done_popover_content.scss
index f983fcff5e4..b9d52f5bb22 100644
--- a/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.scss
+++ b/addons/mail/static/src/components/activity_mark_done_popover_content/activity_mark_done_popover_content.scss
@@ -2,6 +2,6 @@
 // Layout
 // ------------------------------------------------------------------
 
-.o_ActivityMarkDonePopover_feedback {
+.o_ActivityMarkDonePopoverContent_feedback {
     min-height: 70px;
 }
diff --git a/addons/mail/static/src/components/activity_mark_done_popover_content/activity_mark_done_popover_content.xml b/addons/mail/static/src/components/activity_mark_done_popover_content/activity_mark_done_popover_content.xml
new file mode 100644
index 00000000000..cb41e1a2c74
--- /dev/null
+++ b/addons/mail/static/src/components/activity_mark_done_popover_content/activity_mark_done_popover_content.xml
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.ActivityMarkDonePopoverContent" owl="1">
+        <t t-if="activityMarkDonePopoverContentView">
+            <div class="o_ActivityMarkDonePopoverContent" t-attf-class="{{ className }}" t-on-keydown="activityMarkDonePopoverContentView.onKeydown" t-ref="root">
+                <h6 class="o_ActivityMarkDonePopoverContent_header p-2 font-weight-bolder bg-200 border-bottom" t-esc="activityMarkDonePopoverContentView.headerText"/>
+                <div class="o_ActivityMarkDonePopoverContent_content py-2 px-3">
+                    <textarea class="form-control o_ActivityMarkDonePopoverContent_feedback" rows="3" placeholder="Write Feedback" t-on-blur="activityMarkDonePopoverContentView.onBlur" t-ref="feedbackTextarea"/>
+                    <div class="o_ActivityMarkDonePopoverContent_buttons">
+                        <button type="button" class="o_ActivityMarkDonePopoverContent_doneScheduleNextButton btn btn-sm btn-primary" t-on-click="activityMarkDonePopoverContentView.onClickDoneAndScheduleNext">
+                            Done &amp; Schedule Next
+                        </button>
+                        <t t-if="activityMarkDonePopoverContentView.activityViewOwner.activity.chaining_type === 'suggest'">
+                            <button type="button" class="o_ActivityMarkDonePopoverContent_doneButton btn btn-sm btn-primary mx-2" t-on-click="activityMarkDonePopoverContentView.onClickDone">
+                                Done
+                            </button>
+                        </t>
+                        <button type="button" class="o_ActivityMarkDonePopoverContent_discardButton btn btn-sm btn-link" t-on-click="activityMarkDonePopoverContentView.onClickDiscard">
+                            Discard
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </t>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/messaging_menu/messaging_menu.scss b/addons/mail/static/src/components/messaging_menu/messaging_menu.scss
index 868c7464d6e..1f0b93725d7 100644
--- a/addons/mail/static/src/components/messaging_menu/messaging_menu.scss
+++ b/addons/mail/static/src/components/messaging_menu/messaging_menu.scss
@@ -115,18 +115,3 @@
     border-radius: 5px;
     outline: none;
 }
-
-.o_MessagingMenu_tabButton.o-desktop {
-
-    &.o-active {
-        font-weight: bold;
-    }
-
-    &:not(:hover) {
-
-        &:not(.o-active) {
-            color: gray('500');
-        }
-    }
-}
-
diff --git a/addons/mail/static/src/components/messaging_menu/messaging_menu.xml b/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
index 694da89c44b..8dece355832 100644
--- a/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
+++ b/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
@@ -23,13 +23,9 @@
                         <t t-else="">
                             <div class="o_MessagingMenu_dropdownMenuHeader border-bottom" t-att-class="{ 'o-mobile': messaging.device.isSmall }">
                                 <t t-if="!messaging.device.isSmall">
-                                    <t t-foreach="['all', 'chat', 'channel']" t-as="tabId" t-key="tabId">
-                                        <button class="o_MessagingMenu_tabButton o-desktop btn btn-link" t-att-class="{ 'o-active': messagingMenu.activeTabId === tabId, }" t-on-click="messagingMenu.onClickDesktopTabButton" type="button" role="tab" t-att-data-tab-id="tabId">
-                                            <t t-if="tabId === 'all'">All</t>
-                                            <t t-elif="tabId === 'chat'">Chat</t>
-                                            <t t-elif="tabId === 'channel'">Channels</t>
-                                        </button>
-                                    </t>
+                                    <MessagingMenuTab messagingMenuLocalId="messagingMenu.localId" tabId="'all'"/>
+                                    <MessagingMenuTab messagingMenuLocalId="messagingMenu.localId" tabId="'chat'"/>
+                                    <MessagingMenuTab messagingMenuLocalId="messagingMenu.localId" tabId="'channel'"/>
                                 </t>
                                 <t t-if="messaging.device.isSmall">
                                     <t t-call="mail.MessagingMenu.newMessageButton"/>
diff --git a/addons/mail/static/src/components/messaging_menu_tab/messaging_menu_tab.js b/addons/mail/static/src/components/messaging_menu_tab/messaging_menu_tab.js
new file mode 100644
index 00000000000..b3b93f63679
--- /dev/null
+++ b/addons/mail/static/src/components/messaging_menu_tab/messaging_menu_tab.js
@@ -0,0 +1,30 @@
+/** @odoo-module **/
+
+import { registerMessagingComponent } from '@mail/utils/messaging_component';
+
+const { Component } = owl;
+
+export class MessagingMenuTab extends Component {
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {MessagingMenu}
+     */
+    get messagingMenu() {
+        return this.messaging && this.messaging.models['MessagingMenu'].get(this.props.messagingMenuLocalId);
+    }
+
+}
+
+Object.assign(MessagingMenuTab, {
+    props: {
+        messagingMenuLocalId: String,
+        tabId: String,
+    },
+    template: 'mail.MessagingMenuTab',
+});
+
+registerMessagingComponent(MessagingMenuTab);
diff --git a/addons/mail/static/src/components/messaging_menu_tab/messaging_menu_tab.scss b/addons/mail/static/src/components/messaging_menu_tab/messaging_menu_tab.scss
new file mode 100644
index 00000000000..55c299448ba
--- /dev/null
+++ b/addons/mail/static/src/components/messaging_menu_tab/messaging_menu_tab.scss
@@ -0,0 +1,13 @@
+.o_MessagingMenuTab.o-desktop {
+
+    &.o-active {
+        font-weight: bold;
+    }
+
+    &:not(:hover) {
+
+        &:not(.o-active) {
+            color: gray('500');
+        }
+    }
+}
\ No newline at end of file
diff --git a/addons/mail/static/src/components/messaging_menu_tab/messaging_menu_tab.xml b/addons/mail/static/src/components/messaging_menu_tab/messaging_menu_tab.xml
new file mode 100644
index 00000000000..4921fa1ce15
--- /dev/null
+++ b/addons/mail/static/src/components/messaging_menu_tab/messaging_menu_tab.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.MessagingMenuTab" owl="1">
+        <button class="o_MessagingMenuTab o-desktop btn btn-link" t-att-class="{ 'o-active': messagingMenu.activeTabId === props.tabId, }" t-on-click="messagingMenu.onClickDesktopTabButton" type="button" role="tab" t-att-data-tab-id="props.tabId" t-attf-class="{{ className }}" t-ref="root">
+            <t t-if="props.tabId === 'all'">All</t>
+            <t t-elif="props.tabId === 'chat'">Chat</t>
+            <t t-elif="props.tabId === 'channel'">Channels</t>
+        </button>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.xml b/addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.xml
index 635e324a1dd..1cb07a12e4a 100644
--- a/addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.xml
+++ b/addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.xml
@@ -19,8 +19,8 @@
                      t-on-click="callParticipantCard.onClick"
                 >
                     <!-- card -->
-                    <t t-if="callParticipantCard.rtcSession and callParticipantCard.rtcSession.videoStream">
-                        <RtcVideo rtcSessionLocalId="callParticipantCard.rtcSession.localId"/>
+                    <t t-if="callParticipantCard.rtcVideoView">
+                        <RtcVideo localId="callParticipantCard.rtcVideoView.localId"/>
                     </t>
                     <t t-else="">
                         <div class="o_RtcCallParticipantCard_avatarFrame mh-100 mw-100 h-100 align-items-center justify-content-center" t-att-class="{ 'o-isMinimized': callParticipantCard.isMinimized }" draggable="false">
diff --git a/addons/mail/static/src/components/rtc_configuration_menu/rtc_configuration_menu.xml b/addons/mail/static/src/components/rtc_configuration_menu/rtc_configuration_menu.xml
index 49bb0037059..f858d8b138f 100644
--- a/addons/mail/static/src/components/rtc_configuration_menu/rtc_configuration_menu.xml
+++ b/addons/mail/static/src/components/rtc_configuration_menu/rtc_configuration_menu.xml
@@ -10,9 +10,7 @@
                         <select name="inputDevice" class="o_RtcConfigurationMenu_optionDeviceSelect" t-att-value="messaging.userSetting.audioInputDeviceId" t-on-change="rtcConfigurationMenu.onChangeSelectAudioInput">
                             <option value="">Browser default</option>
                             <t t-if="state.userDevices" t-foreach="state.userDevices" t-as="device" t-key="device_index">
-                                <t t-if="device.kind === 'audioinput'">
-                                    <option t-att-value="device.deviceId"><t t-esc="device.label"/></option>
-                                </t>
+                                <RtcConfigurationMenuDeviceComponent device="device"/>
                             </t>
                         </select>
                     </div>
diff --git a/addons/mail/static/src/components/rtc_configuration_menu_device/rtc_configuration_menu_device.js b/addons/mail/static/src/components/rtc_configuration_menu_device/rtc_configuration_menu_device.js
new file mode 100644
index 00000000000..4c05615e9f7
--- /dev/null
+++ b/addons/mail/static/src/components/rtc_configuration_menu_device/rtc_configuration_menu_device.js
@@ -0,0 +1,14 @@
+/** @odoo-module **/
+
+import { registerMessagingComponent } from '@mail/utils/messaging_component';
+
+const { Component } = owl;
+
+export class RtcConfigurationMenuDevice extends Component {}
+
+Object.assign(RtcConfigurationMenuDevice, {
+    props: { device: Object },
+    template: 'mail.RtcConfigurationMenuDevice',
+});
+
+registerMessagingComponent(RtcConfigurationMenuDevice);
diff --git a/addons/mail/static/src/components/rtc_configuration_menu_device/rtc_configuration_menu_device.xml b/addons/mail/static/src/components/rtc_configuration_menu_device/rtc_configuration_menu_device.xml
new file mode 100644
index 00000000000..31882171212
--- /dev/null
+++ b/addons/mail/static/src/components/rtc_configuration_menu_device/rtc_configuration_menu_device.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.RtcConfigurationMenuDeviceComponent" owl="1">
+        <t t-if="props.device.kind === 'audioinput'">
+            <option t-att-value="props.device.deviceId" t-attf-class="{{ className }}" t-ref="root"><t t-esc="props.device.label"/></option>
+        </t>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/rtc_video/rtc_video.js b/addons/mail/static/src/components/rtc_video/rtc_video.js
index e643db4cefe..f00d055dab3 100644
--- a/addons/mail/static/src/components/rtc_video/rtc_video.js
+++ b/addons/mail/static/src/components/rtc_video/rtc_video.js
@@ -20,12 +20,10 @@ export class RtcVideo extends Component {
     //--------------------------------------------------------------------------
 
     /**
-     * @returns {RtcSession|undefined}
+     * @returns {RtcVideoView}
      */
-    get rtcSession() {
-        return this.messaging.models['RtcSession'].get(
-            this.props.rtcSessionLocalId
-        );
+     get rtcVideoView() {
+        return this.messaging && this.messaging.models['RtcVideoView'].get(this.props.localId);
     }
 
     //--------------------------------------------------------------------------
@@ -46,10 +44,13 @@ export class RtcVideo extends Component {
         if (!this.root.el) {
             return;
         }
-        if (!this.rtcSession || !this.rtcSession.videoStream) {
+        if (!this.rtcVideoView) {
+            return;
+        }
+        if (!this.rtcVideoView.rtcSession || !this.rtcVideoView.rtcSession.videoStream) {
             this.root.el.srcObject = undefined;
         } else {
-            this.root.el.srcObject = this.rtcSession.videoStream;
+            this.root.el.srcObject = this.rtcVideoView.rtcSession.videoStream;
         }
         this.root.el.load();
     }
@@ -57,7 +58,7 @@ export class RtcVideo extends Component {
 }
 
 Object.assign(RtcVideo, {
-    props: { rtcSessionLocalId: String },
+    props: { localId: String },
     template: 'mail.RtcVideo',
 });
 
diff --git a/addons/mail/static/src/components/rtc_video/rtc_video.xml b/addons/mail/static/src/components/rtc_video/rtc_video.xml
index 1ac15810dd0..0daa977f86e 100644
--- a/addons/mail/static/src/components/rtc_video/rtc_video.xml
+++ b/addons/mail/static/src/components/rtc_video/rtc_video.xml
@@ -2,13 +2,13 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.RtcVideo" owl="1">
-        <t t-if="rtcSession">
+        <t t-if="rtcVideoView">
             <video class="o_RtcVideo"
                 t-attf-class="{{ className }}"
                 playsinline="true"
                 autoplay="true"
                 muted="true"
-                t-on-loadedmetadata="rtcSession.onVideoLoadedMetaData"
+                t-on-loadedmetadata="rtcVideoView.rtcSession.onVideoLoadedMetaData"
                 t-ref="root"
             />
         </t>
diff --git a/addons/mail/static/src/models/activity_mark_done_popover_view.js b/addons/mail/static/src/models/activity_mark_done_popover_content_view.js
similarity index 66%
rename from addons/mail/static/src/models/activity_mark_done_popover_view.js
rename to addons/mail/static/src/models/activity_mark_done_popover_content_view.js
index 47ea5e973e4..ad4d7a3fa00 100644
--- a/addons/mail/static/src/models/activity_mark_done_popover_view.js
+++ b/addons/mail/static/src/models/activity_mark_done_popover_content_view.js
@@ -2,10 +2,11 @@
 
 import { registerModel } from '@mail/model/model_core';
 import { attr, one } from '@mail/model/model_field';
+import { clear, replace } from '@mail/model/model_field_command';
 
 registerModel({
-    name: 'ActivityMarkDonePopoverView',
-    identifyingFields: ['activityViewOwner'],
+    name: 'ActivityMarkDonePopoverContentView',
+    identifyingFields: ['popoverViewOwner'],
     recordMethods: {
         /**
          * Handles blur on this feedback textarea.
@@ -69,16 +70,44 @@ registerModel({
          */
         _close() {
             this._backupFeedback();
-            this.component.trigger('o-popover-close');
+            this.activityViewOwner.update({ markDonePopoverView: clear() });
+        },
+        /**
+         * @private
+         * @returns {FieldCommand}
+         */
+        _computeActivityViewOwner() {
+            if (this.popoverViewOwner.activityViewOwnerAsMarkDone) {
+                return replace(this.popoverViewOwner.activityViewOwnerAsMarkDone);
+            }
+            return clear();
+        },
+        /**
+         * @private
+         * @returns {string|FieldCommand}
+         */
+        _computeHeaderText() {
+            if (this.activityViewOwner) {
+                return this.activityViewOwner.markDoneText;
+            }
+            return clear();
         },
     },
     fields: {
         activityViewOwner: one('ActivityView', {
-            inverse: 'activityMarkDonePopoverView',
+            compute: '_computeActivityViewOwner',
             readonly: true,
-            required: true,
         }),
         component: attr(),
         feedbackTextareaRef: attr(),
+        headerText: attr({
+            compute: '_computeHeaderText',
+            default: '',
+        }),
+        popoverViewOwner: one('PopoverView', {
+            inverse: 'activityMarkDonePopoverContentView',
+            readonly: true,
+            required: true,
+        }),
     },
 });
diff --git a/addons/mail/static/src/models/activity_view.js b/addons/mail/static/src/models/activity_view.js
index dc09a62eaea..ad50978c349 100644
--- a/addons/mail/static/src/models/activity_view.js
+++ b/addons/mail/static/src/models/activity_view.js
@@ -50,6 +50,9 @@ registerModel({
         onClickEdit() {
             this.activity.edit();
         },
+        onClickMarkDoneButton() {
+            this.update({ markDonePopoverView: this.markDonePopoverView ? clear() : insertAndReplace() });
+        },
         /**
          * Handles the click on the upload document button. This open the file
          * explorer for upload.
@@ -165,11 +168,6 @@ registerModel({
             readonly: true,
             required: true,
         }),
-        activityMarkDonePopoverView: one('ActivityMarkDonePopoverView', {
-            default: insertAndReplace(),
-            inverse: 'activityViewOwner',
-            isCausal: true,
-        }),
         /**
          * Determines whether the details are visible.
          */
@@ -223,6 +221,11 @@ registerModel({
             inverse: 'activityViewOwner',
             isCausal: true,
         }),
+        markDoneButtonRef: attr(),
+        markDonePopoverView: one('PopoverView', {
+            inverse: 'activityViewOwnerAsMarkDone',
+            isCausal: true,
+        }),
         /**
          * Label for mark as done. This is just for translations purpose.
          */
diff --git a/addons/mail/static/src/models/popover_view.js b/addons/mail/static/src/models/popover_view.js
index c8d6488b554..c360553926c 100644
--- a/addons/mail/static/src/models/popover_view.js
+++ b/addons/mail/static/src/models/popover_view.js
@@ -6,7 +6,7 @@ import { clear, insertAndReplace, replace } from '@mail/model/model_field_comman
 
 registerModel({
     name: 'PopoverView',
-    identifyingFields: [['composerViewOwnerAsEmoji', 'messageActionListOwnerAsReaction', 'threadViewTopbarOwnerAsInvite']],
+    identifyingFields: [['activityViewOwnerAsMarkDone', 'composerViewOwnerAsEmoji', 'messageActionListOwnerAsReaction', 'threadViewTopbarOwnerAsInvite']],
     lifecycleHooks: {
         _created() {
             document.addEventListener('click', this._onClickCaptureGlobal, true);
@@ -26,11 +26,24 @@ registerModel({
         contains(element) {
             return Boolean(this.component && this.component.root.el.contains(element));
         },
+        /**
+         * @private
+         * @returns {FieldCommand}
+         */
+        _computeActivityMarkDonePopoverContentView() {
+            if (this.activityViewOwnerAsMarkDone) {
+                return insertAndReplace();
+            }
+            return clear();
+        },
         /**
          * @private
          * @returns {Ref}
          */
         _computeAnchorRef() {
+            if (this.activityViewOwnerAsMarkDone) {
+                return this.activityViewOwnerAsMarkDone.markDoneButtonRef;
+            }
             if (this.threadViewTopbarOwnerAsInvite) {
                 return this.threadViewTopbarOwnerAsInvite.inviteButtonRef;
             }
@@ -57,6 +70,9 @@ registerModel({
          * @returns {FieldCommand}
          */
         _computeContent() {
+            if (this.activityMarkDonePopoverContentView) {
+                return replace(this.activityMarkDonePopoverContentView);
+            }
             if (this.channelInvitationForm) {
                 return replace(this.channelInvitationForm);
             }
@@ -83,6 +99,9 @@ registerModel({
          * @returns {string|FieldCommand}
          */
         _computeContentComponentName() {
+            if (this.activityMarkDonePopoverContentView) {
+                return 'ActivityMarkDonePopoverContent';
+            }
             if (this.channelInvitationForm) {
                 return 'ChannelInvitationForm';
             }
@@ -109,6 +128,9 @@ registerModel({
          * @returns {string}
          */
         _computePosition() {
+            if (this.activityViewOwnerAsMarkDone) {
+                return 'right';
+            }
             if (this.threadViewTopbarOwnerAsInvite) {
                 return 'bottom';
             }
@@ -140,6 +162,16 @@ registerModel({
         },
     },
     fields: {
+        activityMarkDonePopoverContentView: one('ActivityMarkDonePopoverContentView', {
+            compute: '_computeActivityMarkDonePopoverContentView',
+            inverse: 'popoverViewOwner',
+            isCausal: true,
+            readonly: true,
+        }),
+        activityViewOwnerAsMarkDone: one('ActivityView', {
+            inverse: 'markDonePopoverView',
+            readonly: true,
+        }),
         /**
          * HTML element that is used as anchor position for this popover view.
          */
diff --git a/addons/mail/static/src/models/rtc_call_participant_card.js b/addons/mail/static/src/models/rtc_call_participant_card.js
index ad6261b6fa7..9989c96d8f6 100644
--- a/addons/mail/static/src/models/rtc_call_participant_card.js
+++ b/addons/mail/static/src/models/rtc_call_participant_card.js
@@ -2,6 +2,7 @@
 
 import { registerModel } from '@mail/model/model_core';
 import { attr, one } from '@mail/model/model_field';
+import { clear, insertAndReplace } from '@mail/model/model_field_command';
 import { isEventHandled, markEventHandled } from '@mail/utils/utils';
 
 import { sprintf } from '@web/core/utils/strings';
@@ -158,6 +159,16 @@ registerModel({
                 },
             );
         },
+        /**
+         * @private
+         * @returns {FieldCommand}
+         */
+        _computeRtcVideoView() {
+            if (this.rtcSession && this.rtcSession.videoStream) {
+                return insertAndReplace();
+            }
+            return clear();
+        },
     },
     fields: {
         /**
@@ -249,6 +260,11 @@ registerModel({
          * If set, this card represents a rtcSession.
          */
         rtcSession: one('RtcSession'),
+        rtcVideoView: one('RtcVideoView', {
+            compute: '_computeRtcVideoView',
+            inverse: 'rtcCallParticipantCardOwner',
+            isCausal: true,
+        }),
         volumeMenuAnchorRef: attr(),
     },
 });
diff --git a/addons/mail/static/src/models/rtc_video_view.js b/addons/mail/static/src/models/rtc_video_view.js
new file mode 100644
index 00000000000..ad92c5c401b
--- /dev/null
+++ b/addons/mail/static/src/models/rtc_video_view.js
@@ -0,0 +1,33 @@
+/** @odoo-module **/
+
+import { registerModel } from '@mail/model/model_core';
+import { one } from '@mail/model/model_field';
+import { clear, replace } from '@mail/model/model_field_command';
+
+registerModel({
+    name: 'RtcVideoView',
+    identifyingFields: ['rtcCallParticipantCardOwner'],
+    recordMethods: {
+        /**
+         * @private
+         * @returns {FieldCommand}
+         */
+        _computeRtcSession() {
+            if (this.rtcCallParticipantCardOwner.rtcSession) {
+                return replace(this.rtcCallParticipantCardOwner.rtcSession);
+            }
+            return clear();
+        },
+    },
+    fields: {
+        rtcCallParticipantCardOwner: one('RtcCallParticipantCard', {
+            inverse: 'rtcVideoView',
+            readonly: true,
+            required: true,
+        }),
+        rtcSession: one('RtcSession', {
+            compute: '_computeRtcSession',
+            readonly: true,
+        }),
+    },
+});
diff --git a/addons/mail/static/tests/qunit_suite_tests/components/activity_mark_done_popover_tests.js b/addons/mail/static/tests/qunit_suite_tests/components/activity_mark_done_popover_tests.js
index 4cc2c3aadf4..439caa68327 100644
--- a/addons/mail/static/tests/qunit_suite_tests/components/activity_mark_done_popover_tests.js
+++ b/addons/mail/static/tests/qunit_suite_tests/components/activity_mark_done_popover_tests.js
@@ -28,32 +28,32 @@ QUnit.test('activity mark done popover simplest layout', async function (assert)
 
     assert.containsOnce(
         document.body,
-        '.o_ActivityMarkDonePopover',
+        '.o_ActivityMarkDonePopoverContent',
         "Popover component should be present"
     );
     assert.containsOnce(
         document.body,
-        '.o_ActivityMarkDonePopover_feedback',
+        '.o_ActivityMarkDonePopoverContent_feedback',
         "Popover component should contain the feedback textarea"
     );
     assert.containsOnce(
         document.body,
-        '.o_ActivityMarkDonePopover_buttons',
+        '.o_ActivityMarkDonePopoverContent_buttons',
         "Popover component should contain the action buttons"
     );
     assert.containsOnce(
         document.body,
-        '.o_ActivityMarkDonePopover_doneScheduleNextButton',
+        '.o_ActivityMarkDonePopoverContent_doneScheduleNextButton',
         "Popover component should contain the done & schedule next button"
     );
     assert.containsOnce(
         document.body,
-        '.o_ActivityMarkDonePopover_doneButton',
+        '.o_ActivityMarkDonePopoverContent_doneButton',
         "Popover component should contain the done button"
     );
     assert.containsOnce(
         document.body,
-        '.o_ActivityMarkDonePopover_discardButton',
+        '.o_ActivityMarkDonePopoverContent_discardButton',
         "Popover component should contain the discard button"
     );
 });
@@ -79,32 +79,32 @@ QUnit.test('activity with force next mark done popover simplest layout', async f
 
     assert.containsOnce(
         document.body,
-        '.o_ActivityMarkDonePopover',
+        '.o_ActivityMarkDonePopoverContent',
         "Popover component should be present"
     );
     assert.containsOnce(
         document.body,
-        '.o_ActivityMarkDonePopover_feedback',
+        '.o_ActivityMarkDonePopoverContent_feedback',
         "Popover component should contain the feedback textarea"
     );
     assert.containsOnce(
         document.body,
-        '.o_ActivityMarkDonePopover_buttons',
+        '.o_ActivityMarkDonePopoverContent_buttons',
         "Popover component should contain the action buttons"
     );
     assert.containsOnce(
         document.body,
-        '.o_ActivityMarkDonePopover_doneScheduleNextButton',
+        '.o_ActivityMarkDonePopoverContent_doneScheduleNextButton',
         "Popover component should contain the done & schedule next button"
     );
     assert.containsNone(
         document.body,
-        '.o_ActivityMarkDonePopover_doneButton',
+        '.o_ActivityMarkDonePopoverContent_doneButton',
         "Popover component should NOT contain the done button"
     );
     assert.containsOnce(
         document.body,
-        '.o_ActivityMarkDonePopover_discardButton',
+        '.o_ActivityMarkDonePopoverContent_discardButton',
         "Popover component should contain the discard button"
     );
 });
@@ -143,7 +143,7 @@ QUnit.test('activity mark done popover mark done without feedback', async functi
         threadModel: 'res.partner',
     });
     await click('.o_Activity_markDoneButton');
-    await click('.o_ActivityMarkDonePopover_doneButton');
+    await click('.o_ActivityMarkDonePopoverContent_doneButton');
     assert.verifySteps(
         ['action_feedback'],
         "Mark done and schedule next button should call the right rpc"
@@ -185,10 +185,10 @@ QUnit.test('activity mark done popover mark done with feedback', async function
     });
     await click('.o_Activity_markDoneButton');
 
-    let feedbackTextarea = document.querySelector('.o_ActivityMarkDonePopover_feedback');
+    let feedbackTextarea = document.querySelector('.o_ActivityMarkDonePopoverContent_feedback');
     feedbackTextarea.focus();
     document.execCommand('insertText', false, 'This task is done');
-    document.querySelector('.o_ActivityMarkDonePopover_doneButton').click();
+    document.querySelector('.o_ActivityMarkDonePopoverContent_doneButton').click();
     assert.verifySteps(
         ['action_feedback'],
         "Mark done and schedule next button should call the right rpc"
@@ -235,10 +235,10 @@ QUnit.test('activity mark done popover mark done and schedule next', async funct
     });
     await click('.o_Activity_markDoneButton');
 
-    let feedbackTextarea = document.querySelector('.o_ActivityMarkDonePopover_feedback');
+    let feedbackTextarea = document.querySelector('.o_ActivityMarkDonePopoverContent_feedback');
     feedbackTextarea.focus();
     document.execCommand('insertText', false, 'This task is done');
-    await click('.o_ActivityMarkDonePopover_doneScheduleNextButton');
+    await click('.o_ActivityMarkDonePopoverContent_doneScheduleNextButton');
     assert.verifySteps(
         ['action_feedback_schedule_next'],
         "Mark done and schedule next button should call the right rpc and not trigger an action"
@@ -280,7 +280,7 @@ QUnit.test('[technical] activity mark done & schedule next with new action', asy
     });
     await click('.o_Activity_markDoneButton');
 
-    await click('.o_ActivityMarkDonePopover_doneScheduleNextButton');
+    await click('.o_ActivityMarkDonePopoverContent_doneScheduleNextButton');
     assert.verifySteps(
         ['activity_action'],
         "The action returned by the route should be executed"
diff --git a/addons/mail/static/tests/qunit_suite_tests/components/activity_tests.js b/addons/mail/static/tests/qunit_suite_tests/components/activity_tests.js
index d2ee13967e8..794e749d542 100644
--- a/addons/mail/static/tests/qunit_suite_tests/components/activity_tests.js
+++ b/addons/mail/static/tests/qunit_suite_tests/components/activity_tests.js
@@ -771,14 +771,14 @@ QUnit.test('activity click on mark as done', async function (assert) {
 
     await click('.o_Activity_markDoneButton');
     assert.strictEqual(
-        document.querySelectorAll('.o_ActivityMarkDonePopover').length,
+        document.querySelectorAll('.o_ActivityMarkDonePopoverContent').length,
         1,
         "should have opened the mark done popover"
     );
 
     await click('.o_Activity_markDoneButton');
     assert.strictEqual(
-        document.querySelectorAll('.o_ActivityMarkDonePopover').length,
+        document.querySelectorAll('.o_ActivityMarkDonePopoverContent').length,
         0,
         "should have closed the mark done popover"
     );
@@ -815,7 +815,7 @@ QUnit.test('activity mark as done popover should focus feedback input on open [R
 
     await click('.o_Activity_markDoneButton');
     assert.strictEqual(
-        document.querySelector('.o_ActivityMarkDonePopover_feedback'),
+        document.querySelector('.o_ActivityMarkDonePopoverContent_feedback'),
         document.activeElement,
         "the popover textarea should have the focus"
     );
@@ -1051,17 +1051,17 @@ QUnit.test('activity mark done popover close on ESCAPE', async function (assert)
     await click('.o_Activity_markDoneButton');
     assert.containsOnce(
         document.body,
-        '.o_ActivityMarkDonePopover',
+        '.o_ActivityMarkDonePopoverContent',
         "Popover component should be present"
     );
 
     await afterNextRender(() => {
         const ev = new window.KeyboardEvent('keydown', { bubbles: true, key: "Escape" });
-        document.querySelector(`.o_ActivityMarkDonePopover`).dispatchEvent(ev);
+        document.querySelector(`.o_ActivityMarkDonePopoverContent`).dispatchEvent(ev);
     });
     assert.containsNone(
         document.body,
-        '.o_ActivityMarkDonePopover',
+        '.o_ActivityMarkDonePopoverContent',
         "ESCAPE pressed should have closed the mark done popover"
     );
 });
@@ -1090,18 +1090,18 @@ QUnit.test('activity mark done popover click on discard', async function (assert
     await click('.o_Activity_markDoneButton');
     assert.containsOnce(
         document.body,
-        '.o_ActivityMarkDonePopover',
+        '.o_ActivityMarkDonePopoverContent',
         "Popover component should be present"
     );
     assert.containsOnce(
         document.body,
-        '.o_ActivityMarkDonePopover_discardButton',
+        '.o_ActivityMarkDonePopoverContent_discardButton',
         "Popover component should contain the discard button"
     );
-    await click('.o_ActivityMarkDonePopover_discardButton');
+    await click('.o_ActivityMarkDonePopoverContent_discardButton');
     assert.containsNone(
         document.body,
-        '.o_ActivityMarkDonePopover',
+        '.o_ActivityMarkDonePopoverContent',
         "Discard button clicked should have closed the mark done popover"
     );
 });
diff --git a/addons/mail/static/tests/qunit_suite_tests/components/messaging_menu_tests.js b/addons/mail/static/tests/qunit_suite_tests/components/messaging_menu_tests.js
index 25781f8b59e..995438c96df 100644
--- a/addons/mail/static/tests/qunit_suite_tests/components/messaging_menu_tests.js
+++ b/addons/mail/static/tests/qunit_suite_tests/components/messaging_menu_tests.js
@@ -160,41 +160,41 @@ QUnit.test('basic rendering', async function (assert) {
     assert.strictEqual(
         document.querySelectorAll(`
             .o_MessagingMenu_dropdownMenuHeader
-            .o_MessagingMenu_tabButton
+            .o_MessagingMenuTab
         `).length,
         3,
         "should have 3 tab buttons to filter items in the header"
     );
     assert.strictEqual(
-        document.querySelectorAll(`.o_MessagingMenu_tabButton[data-tab-id="all"]`).length,
+        document.querySelectorAll(`.o_MessagingMenuTab[data-tab-id="all"]`).length,
         1,
         "1 tab button should be 'All'"
     );
     assert.strictEqual(
-        document.querySelectorAll(`.o_MessagingMenu_tabButton[data-tab-id="chat"]`).length,
+        document.querySelectorAll(`.o_MessagingMenuTab[data-tab-id="chat"]`).length,
         1,
         "1 tab button should be 'Chat'"
     );
     assert.strictEqual(
-        document.querySelectorAll(`.o_MessagingMenu_tabButton[data-tab-id="channel"]`).length,
+        document.querySelectorAll(`.o_MessagingMenuTab[data-tab-id="channel"]`).length,
         1,
         "1 tab button should be 'Channels'"
     );
     assert.ok(
         document.querySelector(`
-            .o_MessagingMenu_tabButton[data-tab-id="all"]
+            .o_MessagingMenuTab[data-tab-id="all"]
         `).classList.contains('o-active'),
         "'all' tab button should be active"
     );
     assert.notOk(
         document.querySelector(`
-            .o_MessagingMenu_tabButton[data-tab-id="chat"]
+            .o_MessagingMenuTab[data-tab-id="chat"]
         `).classList.contains('o-active'),
         "'chat' tab button should not be active"
     );
     assert.notOk(
         document.querySelector(`
-            .o_MessagingMenu_tabButton[data-tab-id="channel"]
+            .o_MessagingMenuTab[data-tab-id="channel"]
         `).classList.contains('o-active'),
         "'channel' tab button should not be active"
     );
@@ -268,95 +268,95 @@ QUnit.test('switch tab', async function (assert) {
 
     await click(`.o_MessagingMenu_toggler`);
     assert.strictEqual(
-        document.querySelectorAll(`.o_MessagingMenu_tabButton[data-tab-id="all"]`).length,
+        document.querySelectorAll(`.o_MessagingMenuTab[data-tab-id="all"]`).length,
         1,
         "1 tab button should be 'All'"
     );
     assert.strictEqual(
-        document.querySelectorAll(`.o_MessagingMenu_tabButton[data-tab-id="chat"]`).length,
+        document.querySelectorAll(`.o_MessagingMenuTab[data-tab-id="chat"]`).length,
         1,
         "1 tab button should be 'Chat'"
     );
     assert.strictEqual(
-        document.querySelectorAll(`.o_MessagingMenu_tabButton[data-tab-id="channel"]`).length,
+        document.querySelectorAll(`.o_MessagingMenuTab[data-tab-id="channel"]`).length,
         1,
         "1 tab button should be 'Channels'"
     );
     assert.ok(
         document.querySelector(`
-            .o_MessagingMenu_tabButton[data-tab-id="all"]
+            .o_MessagingMenuTab[data-tab-id="all"]
         `).classList.contains('o-active'),
         "'all' tab button should be active"
     );
     assert.notOk(
         document.querySelector(`
-            .o_MessagingMenu_tabButton[data-tab-id="chat"]
+            .o_MessagingMenuTab[data-tab-id="chat"]
         `).classList.contains('o-active'),
         "'chat' tab button should not be active"
     );
     assert.notOk(
         document.querySelector(`
-            .o_MessagingMenu_tabButton[data-tab-id="channel"]
+            .o_MessagingMenuTab[data-tab-id="channel"]
         `).classList.contains('o-active'),
         "'channel' tab button should not be active"
     );
 
-    await click(`.o_MessagingMenu_tabButton[data-tab-id="chat"]`);
+    await click(`.o_MessagingMenuTab[data-tab-id="chat"]`);
     assert.notOk(
         document.querySelector(`
-            .o_MessagingMenu_tabButton[data-tab-id="all"]
+            .o_MessagingMenuTab[data-tab-id="all"]
         `).classList.contains('o-active'),
         "'all' tab button should become inactive"
     );
     assert.ok(
         document.querySelector(`
-            .o_MessagingMenu_tabButton[data-tab-id="chat"]
+            .o_MessagingMenuTab[data-tab-id="chat"]
         `).classList.contains('o-active'),
         "'chat' tab button should not become active"
     );
     assert.notOk(
         document.querySelector(`
-            .o_MessagingMenu_tabButton[data-tab-id="channel"]
+            .o_MessagingMenuTab[data-tab-id="channel"]
         `).classList.contains('o-active'),
         "'channel' tab button should stay inactive"
     );
 
-    await click(`.o_MessagingMenu_tabButton[data-tab-id="channel"]`);
+    await click(`.o_MessagingMenuTab[data-tab-id="channel"]`);
     assert.notOk(
         document.querySelector(`
-            .o_MessagingMenu_tabButton[data-tab-id="all"]
+            .o_MessagingMenuTab[data-tab-id="all"]
         `).classList.contains('o-active'),
         "'all' tab button should stay active"
     );
     assert.notOk(
         document.querySelector(`
-            .o_MessagingMenu_tabButton[data-tab-id="chat"]
+            .o_MessagingMenuTab[data-tab-id="chat"]
         `).classList.contains('o-active'),
         "'chat' tab button should become inactive"
     );
     assert.ok(
         document.querySelector(`
-            .o_MessagingMenu_tabButton[data-tab-id="channel"]
+            .o_MessagingMenuTab[data-tab-id="channel"]
         `).classList.contains('o-active'),
         "'channel' tab button should become active"
     );
 
-    await click(`.o_MessagingMenu_tabButton[data-tab-id="all"]`);
+    await click(`.o_MessagingMenuTab[data-tab-id="all"]`);
     assert.ok(
         document.querySelector(`
-            .o_MessagingMenu_tabButton[data-tab-id="all"]
+            .o_MessagingMenuTab[data-tab-id="all"]
         `).classList.contains('o-active'),
         "'all' tab button should become active"
     );
     assert.notOk(
         document.querySelector(`
-            .o_MessagingMenu_tabButton[data-tab-id="chat"]
+            .o_MessagingMenuTab[data-tab-id="chat"]
         `).classList.contains('o-active'),
         "'chat' tab button should stay inactive"
     );
     assert.notOk(
         document.querySelector(`
-            .o_MessagingMenu_tabButton[data-tab-id="channel"]
+            .o_MessagingMenuTab[data-tab-id="channel"]
         `).classList.contains('o-active'),
         "'channel' tab button should become inactive"
     );
@@ -563,7 +563,7 @@ QUnit.test('filtered previews', async function (assert) {
         "should have preview of channel"
     );
 
-    await click('.o_MessagingMenu_tabButton[data-tab-id="chat"]');
+    await click('.o_MessagingMenuTab[data-tab-id="chat"]');
     assert.strictEqual(
         document.querySelectorAll(`.o_MessagingMenu_dropdownMenu .o_ThreadPreview`).length,
         1,
@@ -596,7 +596,7 @@ QUnit.test('filtered previews', async function (assert) {
         "should not have preview of channel"
     );
 
-    await click('.o_MessagingMenu_tabButton[data-tab-id="channel"]');
+    await click('.o_MessagingMenuTab[data-tab-id="channel"]');
     assert.strictEqual(
         document.querySelectorAll(`
             .o_MessagingMenu_dropdownMenu
@@ -632,7 +632,7 @@ QUnit.test('filtered previews', async function (assert) {
         "should have preview of channel"
     );
 
-    await click('.o_MessagingMenu_tabButton[data-tab-id="all"]');
+    await click('.o_MessagingMenuTab[data-tab-id="all"]');
     assert.strictEqual(
         document.querySelectorAll(`.o_MessagingMenu_dropdownMenu .o_ThreadPreview`).length,
         2,
@@ -954,7 +954,7 @@ QUnit.test('Group chat should be displayed inside the chat section of the messag
     await createMessagingMenuComponent();
 
     await click('.o_MessagingMenu_toggler');
-    await click(`.o_MessagingMenu_tabButton[data-tab-id="chat"]`);
+    await click(`.o_MessagingMenuTab[data-tab-id="chat"]`);
 
     assert.strictEqual(
         document.querySelectorAll(`