diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
index ec1ce695b..202af7702 100644
--- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
+++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
@@ -1048,9 +1048,10 @@ function SignYourSelf() {
           >
             {/* this modal is used show this document is already sign */}
 
-            <Modal 
+            <Modal
               show={showAlreadySignDoc.status}
               onShow={() => modalAlign()}
+              backdropClassName="signature-backdrop"
             >
               <ModalHeader style={{ background: themeColor() }}>
                 <span style={{ color: "white" }}> Sign Documents</span>
diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js
index 5c03b98b1..48c0e97c9 100644
--- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js
+++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js
@@ -1028,9 +1028,10 @@ function EmbedPdfImage() {
             }}
           >
             {/* this modal is used show this document is already sign */}
-            <Modal 
+            <Modal
               show={isAlreadySign.status}
               onShow={() => modalAlign()}
+              backdropClassName="signature-backdrop"
             >
               <ModalHeader style={{ background: themeColor() }}>
                 <span style={{ color: "white" }}> Sign Documents</span>
@@ -1143,7 +1144,7 @@ function EmbedPdfImage() {
           )}
         </div>
       )}
-   
+
     </DndProvider>
   );
 }
diff --git a/microfrontends/SignDocuments/src/css/signature.css b/microfrontends/SignDocuments/src/css/signature.css
index 273b6990e..e47a21f08 100644
--- a/microfrontends/SignDocuments/src/css/signature.css
+++ b/microfrontends/SignDocuments/src/css/signature.css
@@ -626,7 +626,7 @@ option {
     padding: 16px;
   }
 
-  /* The sticky class is added to the navbar 
+  /* The sticky class is added to the navbar
   with JS when it reaches its scroll position */
   .stickyHead {
     position: fixed;
@@ -644,9 +644,9 @@ option {
     right: 0rem;
   }
 
-  /* Add some top padding to the page content 
-  to prevent sudden quick movement (as the 
-  navigation bar gets a new position at the top of the 
+  /* Add some top padding to the page content
+  to prevent sudden quick movement (as the
+  navigation bar gets a new position at the top of the
   page (position:fixed and top:0) */
   .stickyHead+.content {
     padding-top: 60px;
@@ -776,4 +776,14 @@ option {
   .mobileHead {
     display: flex;
   }
+}
+
+.signature-backdrop {
+  position: fixed;
+  top: 0; bottom: 0; left: 0; right: 0;
+  background-color: #000;
+}
+
+.signature-backdrop.fade.in {
+  opacity: 0.5;
 }
\ No newline at end of file