diff --git a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss
index a6c091fab2f..689ae09abcf 100644
--- a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss
+++ b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss
@@ -3,134 +3,50 @@
 // ------------------------------------------------------------------
 
 .o_AttachmentViewer {
-    display: flex;
-    width: map-get($sizes, 100);
-    height: map-get($sizes, 100);
-    flex-flow: column;
-    align-items: center;
     z-index: -1;
 }
 
 .o_AttachmentViewer_buttonNavigation {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     width: 40px;
     height: 40px;
-    top: 50%;
-    transform: translateY(-50%);
 }
 
-.o_AttachmentViewer_buttonNavigationNext {
-    right: 15px;
-
-    > .fa {
-        margin: 1px 0 0 1px; // not correctly centered for some reasons
-    }
+.o_AttachmentViewer_buttonNavigationNextIcon {
+    margin: 1px 0 0 1px; // not correctly centered for some reasons
 }
 
-.o_AttachmentViewer_buttonNavigationPrevious {
-    left: 15px;
-
-    > .fa {
-        margin: 1px 1px 0 0; // not correctly centered for some reasons
-    }
+.o_AttachmentViewer_buttonNavigationPreviousIcon {
+    margin: 1px 1px 0 0; // not correctly centered for some reasons
 }
 
 .o_AttachmentViewer_header {
-    display: flex;
     height: $o-navbar-height;
-    width: 100%;
-}
-
-.o_AttachmentViewer_headerItem {
-    display: flex;
-    align-items: center;
-}
-
-.o_AttachmentViewer_headerItemButton {
-    padding: 0 map-get($spacers, 3);
-}
-
-.o_AttachmentViewer_headerItemButtonIcon.o-hasLabel {
-    margin-right: map-get($spacers, 2);
-}
-
-.o_AttachmentViewer_icon {
-    margin-inline-start: map-get($spacers, 4);
-    margin-inline-end: map-get($spacers, 2);
-}
-
-.o_AttachmentViewer_loading {
-    position: absolute;
 }
 
 .o_AttachmentViewer_main {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     z-index: -1;
-    padding: 45px 0;
-
-    &.o_with_img {
-        overflow: hidden;
-    }
+    padding: ($o-navbar-height * 1.125) 0;
 }
 
 .o_AttachmentViewer_name {
-    margin: 0 map-get($spacers, 2);
     min-width: 0;
 }
 
 .o_AttachmentViewer_toolbar {
-    position: absolute;
-    bottom: 45px;
+    bottom: $o-navbar-height * 1.125;
     transform: translateY(100%);
-    display: flex;
 }
 
 .o_AttachmentViewer_toolbarButton {
     padding: 8px;
 }
 
-.o_AttachmentViewer_viewImage {
-    max-height: 100%;
-    max-width: 100%;
-}
-
 .o_AttachmentViewer_viewIframe {
     width: 90%;
-    height: 100%;
-
-    &.o-isMobile {
-        width: map-get($sizes, 100);
-    }
-}
-
-.o_AttachmentViewer_viewVideo {
-    width: 75%;
-    height: 75%;
-
-    &.o-isMobile {
-        width: map-get($sizes, 100);
-        height: map-get($sizes, 100);
-    }
 }
 
 .o_AttachmentViewer_zoomer {
-    position: absolute;
-    padding: 45px 0;
-    height: 100%;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    padding: ($o-navbar-height * 1.125) 0;
 }
 
 // ------------------------------------------------------------------
@@ -144,8 +60,6 @@
 .o_AttachmentViewer_buttonNavigation {
     color: gray('400');
     background-color: lighten($black, 15%);
-    border-radius: 100%;
-    cursor: pointer;
 
     &:hover {
         color: lighten(gray('400'), 15%);
@@ -153,57 +67,30 @@
     }
 }
 
-.o_AttachmentViewer_header {
-    background-color: rgba($black, 0.7);
-    color: gray('400');
-}
-
-.o_AttachmentViewer_headerItemButton {
-    cursor: pointer;
-
-    &:hover {
-        background-color: rgba($white, 0.1);
-        color: lighten(gray('400'), 15%);
-    }
-}
-
-.o_AttachmentViewer_headerItemButtonClose {
-    cursor: pointer;
-    font-size: 1.3rem;
-}
-
-.o_AttachmentViewer_toolbar {
-    cursor: pointer;
+.o_AttachmentViewer_headerItemButton:hover {
+    background-color: rgba($white, 0.1);
+    color: lighten($gray-400, 15%);
 }
 
 .o_AttachmentViewer_toolbarButton {
     background-color: lighten($black, 15%);
 
     &.o_disabled {
-        cursor: not-allowed;
         filter: brightness(1.3);
     }
 
     &:not(.o_disabled) {
-        color: gray('400');
-        cursor: pointer;
+        @include o-hover-text-color($gray-400, lighten($gray-400, 15%));
 
         &:hover {
             background-color: $black;
-            color: lighten(gray('400'), 15%);
         }
     }
 }
 
 .o_AttachmentViewer_view {
-    background-color: $black;
     box-shadow: 0 0 40px $black;
     outline: none;
-    border: none;
-
-    &.o_text {
-        background-color: $white;
-    }
 }
 
 // ------------------------------------------------------------------
diff --git a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml
index 641d6bd64b0..52778243e1c 100644
--- a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml
+++ b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml
@@ -2,11 +2,11 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.AttachmentViewer" owl="1">
-        <div class="o_AttachmentViewer" t-attf-class="{{ className }}" t-on-click="_onClick" t-on-keydown="_onKeydown" tabindex="0" t-ref="root">
+        <div class="o_AttachmentViewer flex-column align-items-center d-flex w-100 h-100" t-attf-class="{{ className }}" t-on-click="_onClick" t-on-keydown="_onKeydown" tabindex="0" t-ref="root">
             <t t-if="attachmentViewer">
-                <div class="o_AttachmentViewer_header" t-on-click="_onClickHeader">
+                <div class="o_AttachmentViewer_header d-flex w-100 bg-black-75 text-400" t-on-click="_onClickHeader">
                     <t t-if="attachmentViewer.attachment.isViewable">
-                        <div class="o_AttachmentViewer_headerItem o_AttachmentViewer_icon">
+                        <div class="o_AttachmentViewer_headerItem o_AttachmentViewer_icon d-flex align-items-center ms-4 me-2">
                             <t t-if="attachmentViewer.attachment.isImage">
                                 <i class="fa fa-picture-o" role="img" title="Image"/>
                             </t>
@@ -21,73 +21,73 @@
                             </t>
                         </div>
                     </t>
-                    <div class="o_AttachmentViewer_headerItem o_AttachmentViewer_name">
+                    <div class="o_AttachmentViewer_headerItem o_AttachmentViewer_name d-flex align-items-center mx-2">
                         <span class="o_AttachmentViewer_nameText text-truncate" t-esc="attachmentViewer.attachment.displayName"/>
                     </div>
                     <div class="o-autogrow"/>
-                    <div class="o_AttachmentViewer_buttonDownload o_AttachmentViewer_headerItem o_AttachmentViewer_headerItemButton" t-on-click="_onClickDownload" role="button" title="Download">
-                        <i class="o_AttachmentViewer_headerItemButtonIcon fa fa-download fa-fw" t-att-class="{ 'o-hasLabel': messaging.device.sizeClass > env.device.SIZES.MD }" role="img"/>
+                    <div class="o_AttachmentViewer_buttonDownload o_AttachmentViewer_headerItem o_AttachmentViewer_headerItemButton d-flex align-items-center px-3 o_cursor_pointer" t-on-click="_onClickDownload" role="button" title="Download">
+                        <i class="o_AttachmentViewer_headerItemButtonIcon fa fa-download fa-fw" t-att-class="{ 'o-hasLabel me-2': messaging.device.sizeClass > env.device.SIZES.MD }" role="img"/>
                         <t t-if="messaging.device.sizeClass > env.device.SIZES.MD">
                             <span>Download</span>
                         </t>
                     </div>
-                    <div class="o_AttachmentViewer_headerItem o_AttachmentViewer_headerItemButton o_AttachmentViewer_headerItemButtonClose" t-on-click="_onClickClose" role="button" title="Close (Esc)" aria-label="Close">
+                    <div class="o_AttachmentViewer_headerItem o_AttachmentViewer_headerItemButton o_AttachmentViewer_headerItemButtonClose d-flex align-items-center mb-0 px-3 h4 text-reset o_cursor_pointer" t-on-click="_onClickClose" role="button" title="Close (Esc)" aria-label="Close">
                         <i class="fa fa-fw fa-times" role="img"/>
                     </div>
                 </div>
-                <div class="o_AttachmentViewer_main" t-att-class="{ o_with_img: attachmentViewer.attachment.isImage }" t-on-mousemove="_onMousemoveView">
+                <div class="o_AttachmentViewer_main position-absolute top-0 bottom-0 start-0 end-0 align-items-center justify-content-center d-flex" t-att-class="{ 'o_with_img overflow-hidden': attachmentViewer.attachment.isImage }" t-on-mousemove="_onMousemoveView">
                     <t t-if="attachmentViewer.attachment.isImage">
-                        <div class="o_AttachmentViewer_zoomer" t-ref="zoomer">
+                        <div class="o_AttachmentViewer_zoomer position-absolute align-items-center justify-content-center d-flex w-100 h-100" t-ref="zoomer">
                             <t t-if="attachmentViewer.isImageLoading">
-                                <div class="o_AttachmentViewer_loading">
-                                    <i class="fa fa-3x fa-circle-o-notch fa-fw fa-spin" role="img" title="Loading"/>
+                                <div class="o_AttachmentViewer_loading position-absolute">
+                                    <i class="fa fa-3x fa-circle-o-notch fa-fw fa-spin text-white" role="img" title="Loading"/>
                                 </div>
                             </t>
-                            <img class="o_AttachmentViewer_view o_AttachmentViewer_viewImage" t-on-click="_onClickImage" t-on-mousedown="_onMousedownImage" t-on-wheel="_onWheelImage" t-on-load="_onLoadImage" t-att-src="attachmentViewer.imageUrl" t-att-style="attachmentViewer.imageStyle" draggable="false" alt="Viewer" t-key="'image_' + attachmentViewer.attachment.id" t-ref="image_{{ attachmentViewer.attachment.id }}"/>
+                            <img class="o_AttachmentViewer_view o_AttachmentViewer_viewImage mw-100 mh-100 bg-black" t-on-click="_onClickImage" t-on-mousedown="_onMousedownImage" t-on-wheel="_onWheelImage" t-on-load="_onLoadImage" t-att-src="attachmentViewer.imageUrl" t-att-style="attachmentViewer.imageStyle" draggable="false" alt="Viewer" t-key="'image_' + attachmentViewer.attachment.id" t-ref="image_{{ attachmentViewer.attachment.id }}"/>
                         </div>
                     </t>
                     <t t-if="attachmentViewer.attachment.isPdf">
-                        <iframe class="o_AttachmentViewer_view o_AttachmentViewer_viewIframe o_AttachmentViewer_viewPdf" t-ref="iframeViewerPdf" t-att-class="{ 'o-isMobile': messaging.device.isMobile }" t-att-src="attachmentViewer.attachment.defaultSource"/>
+                        <iframe class="o_AttachmentViewer_view o_AttachmentViewer_viewIframe o_AttachmentViewer_viewPdf h-100 bg-black border-0" t-ref="iframeViewerPdf" t-att-class="{ 'o-isMobile w-100': messaging.device.isMobile }" t-att-src="attachmentViewer.attachment.defaultSource"/>
                     </t>
                     <t t-if="attachmentViewer.attachment.isText">
-                        <iframe class="o_AttachmentViewer_view o_AttachmentViewer_viewIframe o_text" t-att-src="attachmentViewer.attachment.defaultSource"/>
+                        <iframe class="o_AttachmentViewer_view o_AttachmentViewer_viewIframe o_text h-100 bg-white border-0" t-att-src="attachmentViewer.attachment.defaultSource"/>
                     </t>
                     <t t-if="attachmentViewer.attachment.isUrlYoutube">
-                        <iframe allow="autoplay; encrypted-media" class="o_AttachmentViewer_view o_AttachmentViewer_viewIframe o_AttachmentViewer_youtube" t-att-src="attachmentViewer.attachment.defaultSource" height="315" width="560"/>
+                        <iframe allow="autoplay; encrypted-media" class="o_AttachmentViewer_view o_AttachmentViewer_viewIframe o_AttachmentViewer_youtube h-100 bg-black border-0" t-att-src="attachmentViewer.attachment.defaultSource" height="315" width="560"/>
                     </t>
                     <t t-if="attachmentViewer.attachment.isVideo">
-                        <video class="o_AttachmentViewer_view o_AttachmentViewer_viewVideo" t-att-class="{ 'o-isMobile': messaging.device.isMobile }" t-on-click="_onClickVideo" controls="controls">
+                        <video class="o_AttachmentViewer_view o_AttachmentViewer_viewVideo w-75 h-75 bg-black" t-att-class="{ 'o-isMobile w-100 h-100': messaging.device.isMobile }" t-on-click="_onClickVideo" controls="controls">
                             <source t-att-data-type="attachmentViewer.attachment.mimetype" t-att-src="attachmentViewer.attachment.defaultSource"/>
                         </video>
                     </t>
                 </div>
                 <t t-if="attachmentViewer.attachment.isImage">
-                    <div class="o_AttachmentViewer_toolbar" role="toolbar">
-                        <div class="o_AttachmentViewer_toolbarButton" t-on-click="_onClickZoomIn" title="Zoom In (+)" role="button">
+                    <div class="o_AttachmentViewer_toolbar position-absolute d-flex" role="toolbar">
+                        <div class="o_AttachmentViewer_toolbarButton o_cursor_pointer" t-on-click="_onClickZoomIn" title="Zoom In (+)" role="button">
                             <i class="fa fa-fw fa-plus" role="img"/>
                         </div>
-                        <div class="o_AttachmentViewer_toolbarButton" t-att-class="{ o_disabled: attachmentViewer.scale === 1 }" t-on-click="_onClickZoomReset" role="button" title="Reset Zoom (0)">
+                        <div class="o_AttachmentViewer_toolbarButton o_cursor_pointer" t-att-class="{ o_disabled: attachmentViewer.scale === 1 }" t-on-click="_onClickZoomReset" role="button" title="Reset Zoom (0)">
                             <i class="fa fa-fw fa-search" role="img"/>
                         </div>
-                        <div class="o_AttachmentViewer_toolbarButton" t-att-class="{ o_disabled: attachmentViewer.scale === MIN_SCALE }" t-on-click="_onClickZoomOut" title="Zoom Out (-)" role="button">
+                        <div class="o_AttachmentViewer_toolbarButton o_cursor_pointer" t-att-class="{ o_disabled: attachmentViewer.scale === MIN_SCALE }" t-on-click="_onClickZoomOut" title="Zoom Out (-)" role="button">
                             <i class="fa fa-fw fa-minus" role="img"/>
                         </div>
-                        <div class="o_AttachmentViewer_toolbarButton" t-on-click="_onClickRotate" title="Rotate (r)" role="button">
+                        <div class="o_AttachmentViewer_toolbarButton o_cursor_pointer" t-on-click="_onClickRotate" title="Rotate (r)" role="button">
                             <i class="fa fa-fw fa-repeat" role="img"/>
                         </div>
-                        <div class="o_AttachmentViewer_toolbarButton" t-on-click="_onClickPrint" title="Print" role="button">
+                        <div class="o_AttachmentViewer_toolbarButton o_cursor_pointer" t-on-click="_onClickPrint" title="Print" role="button">
                             <i class="fa fa-fw fa-print" role="img"/>
                         </div>
-                        <div class="o_AttachmentViewer_buttonDownload o_AttachmentViewer_toolbarButton" t-on-click="_onClickDownload" title="Download" role="button">
+                        <div class="o_AttachmentViewer_buttonDownload o_AttachmentViewer_toolbarButton o_cursor_pointer" t-on-click="_onClickDownload" title="Download" role="button">
                             <i class="fa fa-download fa-fw" role="img"/>
                         </div>
                     </div>
                 </t>
                 <t t-if="attachmentViewer.attachments.length > 1">
-                    <div class="o_AttachmentViewer_buttonNavigation o_AttachmentViewer_buttonNavigationPrevious" t-on-click="_onClickPrevious" title="Previous (Left-Arrow)" role="button">
+                    <div class="o_AttachmentViewer_buttonNavigation o_AttachmentViewer_buttonNavigationPrevious o_AttachmentViewer_buttonNavigationPreviousIcon btn position-absolute top-0 bottom-0 start-0 align-items-center justify-content-center d-flex my-auto ms-3 rounded-circle text-400" t-on-click="_onClickPrevious" title="Previous (Left-Arrow)" role="button">
                         <span class="fa fa-chevron-left" role="img"/>
                     </div>
-                    <div class="o_AttachmentViewer_buttonNavigation o_AttachmentViewer_buttonNavigationNext" t-on-click="_onClickNext" title="Next (Right-Arrow)" role="button">
+                    <div class="o_AttachmentViewer_buttonNavigation o_AttachmentViewer_buttonNavigationNext o_AttachmentViewer_buttonNavigationNextIcon btn position-absolute top-0 bottom-0 end-0 align-items-center justify-content-center d-flex my-auto me-3 rounded-circle text-400" t-on-click="_onClickNext" title="Next (Right-Arrow)" role="button">
                         <span class="fa fa-chevron-right" role="img"/>
                     </div>
                 </t>