diff --git a/extension/chrome/elements/attachment.htm b/extension/chrome/elements/attachment.htm
index 4389a66a4f0..14607fc7aea 100644
--- a/extension/chrome/elements/attachment.htm
+++ b/extension/chrome/elements/attachment.htm
@@ -9,18 +9,19 @@
     <link rel="stylesheet" href="/css/sweetalert2.css" />
   </head>
 
-  <body class="attachment" title="PREVIEW" data-test="attachment-container">
-    <button id="download" data-test="download-attachment" title="DOWNLOAD">
-      <img src="/img/svgs/download-link.svg" alt="download attachment" width="16" />
-    </button>
-    <span class="file-format-holder">
-      <img id="file-format" src="/img/fileformat/generic.png" alt="png file" />
-    </span>
-    <div id="header" data-test="container-attachment-header">
-      <span></span>
+  <body title="PREVIEW">
+    <div id="attachment-container" data-test="attachment-container">
+      <button id="download" data-test="download-attachment" title="DOWNLOAD">
+        <img src="/img/svgs/download-link.svg" alt="download attachment" width="16" />
+      </button>
+      <span class="file-format-holder">
+        <img id="file-format" src="/img/fileformat/generic.png" alt="png file" />
+      </span>
+      <div id="header" data-test="container-attachment-header">
+        <span></span>
+      </div>
+      <div id="name" data-test="attachment-name"></div>
     </div>
-    <div id="name" data-test="attachment-name"></div>
-
     <script src="/lib/trusted-types.js"></script>
     <script src="/lib/purify.js"></script>
     <script src="/lib/jquery.min.js"></script>
diff --git a/extension/css/cryptup.css b/extension/css/cryptup.css
index cea22762c56..ebc59006703 100644
--- a/extension/css/cryptup.css
+++ b/extension/css/cryptup.css
@@ -3007,7 +3007,7 @@ table#compose #error_container_reply_message #error_text_reply_message {
   top: -2px;
 }
 
-body.attachment {
+#attachment-container {
   border: 1px solid #dadada;
   border-radius: 2px;
   text-align: center;
@@ -3019,11 +3019,11 @@ body.attachment {
   cursor: pointer;
 }
 
-body.attachment:hover {
+#attachment-container:hover {
   border-color: #eaeaea;
 }
 
-body.attachment.error-occured {
+#attachment-container.error-occured {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3034,7 +3034,7 @@ body.attachment.error-occured {
   cursor: default;
 }
 
-body.attachment #download {
+#attachment-container #download {
   display: flex;
   opacity: 0;
   position: absolute;
@@ -3051,17 +3051,17 @@ body.attachment #download {
   border: 0;
 }
 
-body.attachment:focus-within #download,
-body.attachment:hover #download {
+#attachment-container:focus-within #download,
+#attachment-container:hover #download {
   opacity: 1;
 }
 
-body.attachment #download:focus {
+#attachment-container #download:focus {
   box-shadow: 0 0 5px #31a217;
   outline: none;
 }
 
-body.attachment .download_progress {
+#attachment-container .download_progress {
   position: absolute;
   top: 50%;
   margin-top: -6px;
@@ -3069,7 +3069,7 @@ body.attachment .download_progress {
   line-height: 1;
 }
 
-body.attachment #header {
+#attachment-container #header {
   height: 90px;
   font-weight: 400;
   font-size: 14px;
@@ -3084,12 +3084,12 @@ body.attachment #header {
   justify-content: center;
 }
 
-body.attachment #type {
+#attachment-container #type {
   padding: 10px 0;
   color: #999;
 }
 
-body.attachment #name {
+#attachment-container #name {
   padding: 7px 12px;
   background: #f3f3f3;
   position: absolute;
@@ -3103,7 +3103,7 @@ body.attachment #name {
   height: 12px;
 }
 
-body.attachment .file-format-holder {
+#attachment-container .file-format-holder {
   display: inline-block;
   border-radius: 120px;
   position: absolute;
@@ -3112,7 +3112,7 @@ body.attachment .file-format-holder {
   margin-bottom: 5px;
 }
 
-body.attachment .file-format-holder img#file-format {
+#attachment-container .file-format-holder img#file-format {
   width: 45px;
   height: auto;
   margin-top: 12px;
