diff --git a/addons/mail/static/src/components/discuss/discuss.scss b/addons/mail/static/src/components/discuss/discuss.scss
index 720c406a025..766b65959b4 100644
--- a/addons/mail/static/src/components/discuss/discuss.scss
+++ b/addons/mail/static/src/components/discuss/discuss.scss
@@ -1,87 +1,8 @@
-// ------------------------------------------------------------------
-// Layout
-// ------------------------------------------------------------------
-
 .o_Discuss {
-    display: flex;
-    height: map-get($sizes, 100);
     min-height: 0;
-
-    &.o-isDeviceSmall {
-        flex-flow: column;
-        align-items: center;
-    }
-}
-
-.o_Discuss_content {
-    height: map-get($sizes, 100);
-    overflow: auto;
-    flex: 1 1 auto;
-    display: flex;
-    flex-flow: column;
-}
-
-.o_Discuss_mobileAddItemHeader {
-    display: flex;
-    justify-content: center;
-    width: map-get($sizes, 100);
-    padding: map-get($spacers, 3);
-}
-
-.o_Discuss_mobileAddItemHeaderInput {
-    flex: 1 1 auto;
-    margin-bottom: map-get($spacers, 3);
-    padding: map-get($spacers, 2);
-}
-
-.o_Discuss_mobileMailboxSelection {
-    width: map-get($sizes, 100);
-}
-
-.o_Discuss_mobileNavbar {
-    width: map-get($sizes, 100);
-}
-
-.o_Discuss_noThread {
-    display: flex;
-    flex: 1 1 auto;
-    width: map-get($sizes, 100);
-    align-items: center;
-    justify-content: center;
-}
-
-.o_Discuss_sidebar {
-    height: map-get($sizes, 100);
-    overflow: auto;
-    padding-top: map-get($spacers, 3);
-    flex: 0 0 auto;
 }
 
 .o_Discuss_thread {
     flex: 1 1 0;
     min-width: 0;
-
-    &.o-isDeviceSmall {
-        width: map-get($sizes, 100);
-    }
-}
-
-.o_Discuss_notificationList {
-    width: map-get($sizes, 100);
-    flex: 1 1 0;
-}
-
-// ------------------------------------------------------------------
-// Style
-// ------------------------------------------------------------------
-
-.o_Discuss.o-isDeviceSmall {
-    background-color: $white;
-}
-
-.o_Discuss_mobileAddItemHeaderInput {
-    appearance: none;
-    border: $border-width solid gray('400');
-    border-radius: 5px;
-    outline: none;
 }
diff --git a/addons/mail/static/src/components/discuss/discuss.xml b/addons/mail/static/src/components/discuss/discuss.xml
index 902232186b1..68796d7aca2 100644
--- a/addons/mail/static/src/components/discuss/discuss.xml
+++ b/addons/mail/static/src/components/discuss/discuss.xml
@@ -3,16 +3,16 @@
 
     <t t-name="mail.Discuss" owl="1">
         <t t-if="discussView">
-            <div class="o_Discuss" t-attf-class="{{ className }}"
-                t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall }"
+            <div class="o_Discuss d-flex h-100" t-attf-class="{{ className }}"
+                t-att-class="{ 'o-isDeviceSmall flex-column align-items-center bg-white': messaging.device.isSmall }"
                 t-ref="root"
             >
                 <t t-if="!messaging.device.isSmall">
-                    <DiscussSidebar className="'o_Discuss_sidebar bg-light border-right'" record="discussView"/>
+                    <DiscussSidebar className="'o_Discuss_sidebar flex-shrink-0 h-100 pt-3 border-right bg-light'" record="discussView"/>
                 </t>
                 <t t-if="messaging.device.isSmall" t-call="mail.Discuss.content"/>
                 <t t-else="">
-                    <div class="o_Discuss_content">
+                    <div class="o_Discuss_content d-flex flex-column flex-grow-1 h-100 overflow-auto">
                         <t t-call="mail.Discuss.content"/>
                     </div>
                 </t>
@@ -22,12 +22,12 @@
 
     <t t-name="mail.Discuss.content" owl="1">
         <t t-if="messaging.device.isSmall and discussView.discuss.activeMobileNavbarTabId === 'mailbox'">
-            <DiscussMobileMailboxSelection className="'o_Discuss_mobileMailboxSelection border-bottom'" record="discussView"/>
+            <DiscussMobileMailboxSelection className="'o_Discuss_mobileMailboxSelection w-100 border-bottom'" record="discussView"/>
         </t>
         <t t-if="discussView.mobileAddItemHeaderAutocompleteInputView">
-            <div class="o_Discuss_mobileAddItemHeader border-bottom">
+            <div class="o_Discuss_mobileAddItemHeader d-flex justify-content-center w-100 p-3 border-bottom">
                 <AutocompleteInput
-                    className="'o_Discuss_mobileAddItemHeaderInput'"
+                    className="'o_Discuss_mobileAddItemHeaderInput flex-grow-1 mb-3 p-2 rounded border'"
                     record="discussView.mobileAddItemHeaderAutocompleteInputView"
                     select="discussView.onMobileAddItemHeaderInputSelect"
                     source="discussView.onMobileAddItemHeaderInputSource"
@@ -39,12 +39,12 @@
             <t name="beforeThread"/>
             <ThreadView
                 className="'o_Discuss_thread'"
-                classNameObj="{ 'o-isDeviceSmall': messaging.device.isSmall }"
+                classNameObj="{ 'o-isDeviceSmall w-100': messaging.device.isSmall }"
                 record="discussView.discuss.threadView"
             />
         </t>
         <t t-if="!discussView.discuss.thread and (!messaging.device.isSmall or discussView.discuss.activeMobileNavbarTabId === 'mailbox')">
-            <div class="o_Discuss_noThread">
+            <div class="o_Discuss_noThread d-flex flex-grow-1 align-items-center justify-content-center w-100">
                 No conversation selected.
             </div>
         </t>
@@ -61,11 +61,11 @@
             </t>
         </t>
         <t t-if="discussView.discuss.notificationListView">
-            <NotificationList className="'o_Discuss_notificationList'" record="discussView.discuss.notificationListView"/>
+            <NotificationList className="'o_Discuss_notificationList flex-grow-1 w-100'" record="discussView.discuss.notificationListView"/>
         </t>
         <t t-if="discussView.discuss.mobileMessagingNavbarView">
             <MobileMessagingNavbar
-                className="'o_Discuss_mobileNavbar'"
+                className="'o_Discuss_mobileNavbar w-100'"
                 record="discussView.discuss.mobileMessagingNavbarView"
             />
         </t>