diff --git a/addons/mail/static/src/components/attachment_card/attachment_card.scss b/addons/mail/static/src/components/attachment_card/attachment_card.scss
index 98477967983..d5909f621e6 100644
--- a/addons/mail/static/src/components/attachment_card/attachment_card.scss
+++ b/addons/mail/static/src/components/attachment_card/attachment_card.scss
@@ -20,87 +20,20 @@
     }
 }
 
-.o_AttachmentCard_asideItem {
-    width: 100%;
-    height: 100%;
-}
-
 .o_AttachmentCard_asideItemUnlink.o-pretty {
-    top: 0;
     transform: translateX(100%);
 }
 
 .o_AttachmentCard_details {
-    flex-flow: column;
     min-width: 0; /* This allows the text ellipsis in the flex element */
-    /* prevent hover delete button & attachment image to be too close to the text */
-    padding-left : map-get($spacers, 1);
-    padding-right : map-get($spacers, 1);
-}
-
-.o_AttachmentCard_filename {
-    text-overflow: ellipsis;
-}
-
-.o_AttachmentCard_image {
-    flex-shrink: 0;
-    margin: 3px;
 }
 
 // ------------------------------------------------------------------
 // Style
 // ------------------------------------------------------------------
 
-.o_AttachmentCard.o-has-card-details {
-    background-color: gray('300');
-    border-radius: 5px;
-}
-
-.o_AttachmentCard_aside {
-    border-radius: 0 5px 5px 0;
-}
-
-.o_AttachmentCard_asideItemDownload {
-    cursor: pointer;
-
-    &:hover {
-        background-color: gray('400');
-    }
-}
-
-.o_AttachmentCard_asideItemUnlink {
-    cursor: pointer;
-
-    &:not(.o-pretty):hover {
-        background-color: gray('400');
-    }
-
-    &.o-pretty {
-        color: white;
-        background-color: $o-brand-primary;
-
-        &:hover {
-            background-color: darken($o-brand-primary, 10%);
-        }
-    }
-
-}
-
-.o_AttachmentCard_asideItemUploaded {
-    color: $o-brand-primary;
-}
-
-.o_AttachmentCard_extension {
-    font-size: 80%;
-    font-weight: 400;
-}
-
 .o_AttachmentCard_image.o-attachment-viewable {
     cursor: zoom-in;
-
-    &:not(.o-details-overlay):hover {
-        opacity: 0.7;
-    }
 }
 
 // ------------------------------------------------------------------
diff --git a/addons/mail/static/src/components/attachment_card/attachment_card.xml b/addons/mail/static/src/components/attachment_card/attachment_card.xml
index dfaa2dac9d5..bd562982b68 100644
--- a/addons/mail/static/src/components/attachment_card/attachment_card.xml
+++ b/addons/mail/static/src/components/attachment_card/attachment_card.xml
@@ -3,7 +3,7 @@
     <t t-name="mail.AttachmentCard" owl="1">
         <div t-attf-class="{{ className }}" t-ref="root">
             <t t-if="attachmentCard">
-                <div class="o_AttachmentCard d-flex o-has-card-details"
+                <div class="o_AttachmentCard o-has-card-details d-flex rounded bg-300"
                      t-att-class="{
                             'o-downloadable': !attachmentCard.attachmentList.composerViewOwner,
                             'o-isUploading': attachmentCard.attachment.isUploading,
@@ -12,47 +12,47 @@
                 >
                     <!-- Image style-->
                     <!-- o_image from mimetype.scss -->
-                    <div class="o_AttachmentCard_image o_image" t-on-click="attachmentCard.onClickImage" t-att-class="{'o-attachment-viewable': attachmentCard.attachment.isViewable,}" t-att-data-mimetype="attachmentCard.attachment.mimetype">
+                    <div class="o_AttachmentCard_image o_image flex-shrink-0 m-1" t-on-click="attachmentCard.onClickImage" t-att-class="{'o-attachment-viewable opacity-75-hover': attachmentCard.attachment.isViewable,}" t-att-data-mimetype="attachmentCard.attachment.mimetype">
                     </div>
                     <!-- Attachment details -->
-                    <div class="o_AttachmentCard_details d-flex justify-content-center">
+                    <div class="o_AttachmentCard_details d-flex justify-content-center flex-column px-1">
                         <t t-if="attachmentCard.attachment.displayName">
-                            <div class="o_AttachmentCard_filename overflow-hidden text-nowrap">
+                            <div class="o_AttachmentCard_filename text-truncate">
                                 <t t-esc="attachmentCard.attachment.displayName"/>
                             </div>
                         </t>
                         <t t-if="attachmentCard.attachment.extension">
-                            <div class="o_AttachmentCard_extension text-uppercase">
+                            <small class="o_AttachmentCard_extension text-uppercase">
                                 <t t-esc="attachmentCard.attachment.extension"/>
-                            </div>
+                            </small>
                         </t>
                     </div>
                     <!-- Attachment aside -->
                     <t t-if="(!attachmentCard.attachmentList.composerViewOwner or attachmentCard.attachment.isEditable)">
-                        <div class="o_AttachmentCard_aside position-relative overflow-hidden" t-att-class="{ 'o-has-multiple-action d-flex flex-column': !attachmentCard.attachmentList.composerViewOwner and attachmentCard.attachment.isEditable }">
+                        <div class="o_AttachmentCard_aside position-relative rounded-right overflow-hidden" t-att-class="{ 'o-has-multiple-action d-flex flex-column': !attachmentCard.attachmentList.composerViewOwner and attachmentCard.attachment.isEditable }">
                             <!-- Uploading icon -->
                             <t t-if="attachmentCard.attachment.isUploading and attachmentCard.attachmentList.composerViewOwner">
-                                <div class="o_AttachmentCard_asideItem o_AttachmentCard_asideItemUploading d-flex justify-content-center align-items-center" title="Uploading">
+                                <div class="o_AttachmentCard_asideItem o_AttachmentCard_asideItemUploading d-flex justify-content-center align-items-center w-100 h-100" title="Uploading">
                                     <i class="fa fa-spin fa-spinner"/>
                                 </div>
                             </t>
                             <!-- Uploaded icon -->
                             <t t-if="!attachmentCard.attachment.isUploading and attachmentCard.attachmentList.composerViewOwner">
-                                <div class="o_AttachmentCard_asideItem o_AttachmentCard_asideItemUploaded d-flex justify-content-center align-items-center" title="Uploaded">
+                                <div class="o_AttachmentCard_asideItem o_AttachmentCard_asideItemUploaded d-flex justify-content-center align-items-center w-100 h-100 text-primary" title="Uploaded">
                                     <i class="fa fa-check"/>
                                 </div>
                             </t>
                             <!-- Remove button -->
                             <t t-if="attachmentCard.attachment.isEditable">
-                                <div class="o_AttachmentCard_asideItem o_AttachmentCard_asideItemUnlink d-flex justify-content-center align-items-center" t-att-class="{ 'o-pretty position-absolute': attachmentCard.attachmentList.composerViewOwner }" t-on-click="attachmentCard.onClickUnlink" title="Remove">
+                                <button class="o_AttachmentCard_asideItem o_AttachmentCard_asideItemUnlink btn top-0 justify-content-center align-items-center d-flex w-100 h-100 rounded-0" t-attf-class="{{ attachmentCard.attachmentList.composerViewOwner ? 'o-pretty position-absolute btn-primary' : 'bg-300' }}" t-on-click="attachmentCard.onClickUnlink" title="Remove">
                                     <i class="fa fa-trash"/>
-                                </div>
+                                </button>
                             </t>
                             <!-- Download button -->
                             <t t-if="!attachmentCard.attachmentList.composerViewOwner and !attachmentCard.attachment.isUploading">
-                                <div class="o_AttachmentCard_asideItem o_AttachmentCard_asideItemDownload d-flex justify-content-center align-items-center" t-on-click="attachmentCard.attachment.onClickDownload" title="Download">
+                                <button class="o_AttachmentCard_asideItem o_AttachmentCard_asideItemDownload btn d-flex justify-content-center align-items-center w-100 h-100 rounded-0 bg-300" t-on-click="attachmentCard.attachment.onClickDownload" title="Download">
                                     <i class="fa fa-download"/>
-                                </div>
+                                </button>
                             </t>
                         </div>
                     </t>