diff --git a/addons/mail/static/src/components/attachment_list/attachment_list.scss b/addons/mail/static/src/components/attachment_list/attachment_list.scss
deleted file mode 100644
index dfe281aed2d..00000000000
--- a/addons/mail/static/src/components/attachment_list/attachment_list.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-// ------------------------------------------------------------------
-// Layout
-// ------------------------------------------------------------------
-
-.o_AttachmentList {
-    display: flex;
-    flex-flow: column;
-    justify-content: flex-start;
-}
-
-/* Avoid overflow of long attachment text */
-.o_AttachmentList_attachment {
-    margin-bottom: map-get($spacers, 1);
-    margin-top: map-get($spacers, 1);
-    margin-inline-end: map-get($spacers, 1);
-    margin-inline-start: map-get($spacers, 0);
-    max-width: 100%;
-}
-
-.o_AttachmentList_partialList {
-    display: flex;
-    flex: 1;
-    flex-flow: wrap;
-}
-
-.o_AttachmentList_partialListNonImages {
-    margin: map-get($spacers, 1);
-    justify-content: flex-start;
-}
diff --git a/addons/mail/static/src/components/attachment_list/attachment_list.xml b/addons/mail/static/src/components/attachment_list/attachment_list.xml
index cf96b01b208..99683ba7269 100644
--- a/addons/mail/static/src/components/attachment_list/attachment_list.xml
+++ b/addons/mail/static/src/components/attachment_list/attachment_list.xml
@@ -2,16 +2,16 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.AttachmentList" owl="1">
-        <div class="o_AttachmentList" t-attf-class="{{ className }}" t-ref="root">
+        <div class="o_AttachmentList d-flex flex-column justify-content-start" t-attf-class="{{ className }}" t-ref="root">
             <t t-if="attachmentList">
-                <div class="o_AttachmentList_partialList o_AttachmentList_partialListImages">
+                <div class="o_AttachmentList_partialList o_AttachmentList_partialListImages d-flex flex-grow-1 flex-wrap">
                     <t t-foreach="attachmentList.attachmentImages" t-as="attachmentImage" t-key="attachmentImage.localId">
-                        <AttachmentImage className="'o_AttachmentList_attachment'" localId="attachmentImage.localId" onAttachmentRemoved="props.onAttachmentRemoved"/>
+                        <AttachmentImage className="'o_AttachmentList_attachment my-1 me-1 mw-100'" localId="attachmentImage.localId" onAttachmentRemoved="props.onAttachmentRemoved"/>
                     </t>
                 </div>
-                <div class="o_AttachmentList_partialList o_AttachmentList_partialListNonImages">
+                <div class="o_AttachmentList_partialList o_AttachmentList_partialListNonImages d-flex flex-grow-1 flex-wrap justify-content-start m-1">
                     <t t-foreach="attachmentList.attachmentCards" t-as="attachmentCard" t-key="attachmentCard.localId">
-                        <AttachmentCard className="'o_AttachmentList_attachment'" localId="attachmentCard.localId" onAttachmentRemoved="props.onAttachmentRemoved"/>
+                        <AttachmentCard className="'o_AttachmentList_attachment my-1 me-1 mw-100'" localId="attachmentCard.localId" onAttachmentRemoved="props.onAttachmentRemoved"/>
                     </t>
                 </div>
             </t>