diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
index 012f4e347..a851baac3 100644
--- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
+++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
@@ -11,15 +11,13 @@ import { HTML5Backend } from "react-dnd-html5-backend";
 import { useParams } from "react-router-dom";
 import SignPad from "./component/signPad";
 import RenderAllPdfPage from "./component/renderAllPdfPage";
-import {
-  getBase64FromIMG,
-  getBase64FromUrl
-} from "../utils/Utils";
+import { getBase64FromIMG, getBase64FromUrl } from "../utils/Utils";
 import Loader from "./component/loader";
 import HandleError from "./component/HandleError";
 import Nodata from "./component/Nodata";
 import Header from "./component/header";
 import RenderPdf from "./component/renderPdf";
+import CustomModal from "./component/CustomModal";
 
 function PdfRequestFiles() {
   const { docId } = useParams();
@@ -191,7 +189,7 @@ function PdfRequestFiles() {
               //comparison auditTrail user details with signers user details
               for (let i = 0; i < signerRes.length; i++) {
                 const signerId = signerRes[i].objectId;
-               
+
                 let isSigned = false;
                 for (let j = 0; j < checkDocIdExist.length; j++) {
                   const signedExist =
@@ -912,6 +910,7 @@ function PdfRequestFiles() {
 
   //function for set decline true on press decline button
   const declineDoc = async () => {
+    setIsDecline({ isDeclined: false });
     const data = {
       IsDeclined: true
     };
@@ -984,6 +983,36 @@ function PdfRequestFiles() {
           )}
 
           <div className="signatureContainer">
+            {/* this modal is used to show decline alert */}
+            <CustomModal
+              show={isDecline.isDeclined}
+              headMsg="Document Declined Alert!"
+              bodyMssg={
+                isDecline.currnt === "Sure" ? (
+                  <p className="pTagBody">
+                    Are you sure want to decline this document ?
+                  </p>
+                ) : isDecline.currnt === "YouDeclined" ? (
+                  <p className="pTagBody">You have declined this document!</p>
+                ) : (
+                  isDecline.currnt === "another" && (
+                    <p className="pTagBody">
+                      You cannot sign this document as it has been declined by
+                      one or more person(s).
+                    </p>
+                  )
+                )
+              }
+              footerMessage={isDecline.currnt === "Sure"}
+              declineDoc={declineDoc}
+              setIsDecline={setIsDecline}
+            />
+            {/* this modal is used for show expired alert */}
+            <CustomModal
+              show={isExpired}
+              headMsg="Document Expired!"
+              bodyMssg="This Document is no longer available."
+            />
             {/* this component used to render all pdf pages in left side */}
             <RenderAllPdfPage
               signPdfUrl={pdfDetails[0].URL}
@@ -999,66 +1028,6 @@ function PdfRequestFiles() {
                 marginRight: pdfOriginalWidth > 500 && "20px"
               }}
             >
-              <Modal show={isExpired}>
-                <ModalHeader className="bg-danger">
-                  <span className="spanTagHead">Document Expired!</span>
-                </ModalHeader>
-
-                <Modal.Body>
-                  <p className="pTagBody">
-                    This Document is no longer available.
-                  </p>
-                </Modal.Body>
-              </Modal>
-              {/* this modal is used for show decline alert */}
-              <Modal show={isDecline.isDeclined}>
-                <ModalHeader className="bg-danger">
-                  <span className="spanTagHead">Document Declined Alert!</span>
-                </ModalHeader>
-
-                <Modal.Body>
-                  {isDecline.currnt === "Sure" ? (
-                    <p className="pTagBody">
-                      Are you sure want to decline this document ?
-                    </p>
-                  ) : isDecline.currnt === "YouDeclined" ? (
-                    <p className="pTagBody">You have declined this document!</p>
-                  ) : (
-                    isDecline.currnt === "another" && (
-                      <p className="pTagBody">
-                        You cannot sign this document as it has been declined by
-                        one or more person(s).
-                      </p>
-                    )
-                  )}
-                </Modal.Body>
-                <Modal.Footer>
-                  {isDecline.currnt === "Sure" && (
-                    <>
-                      <button
-                        style={{
-                          color: "black"
-                        }}
-                        type="button"
-                        className="finishBtn"
-                        onClick={() => setIsDecline({ isDeclined: false })}
-                      >
-                        Close
-                      </button>
-                      <button
-                        style={{
-                          background: "#de4337"
-                        }}
-                        type="button"
-                        className="finishBtn"
-                        onClick={() => declineDoc()}
-                      >
-                        Yes
-                      </button>
-                    </>
-                  )}
-                </Modal.Footer>
-              </Modal>
               {/* this modal is used show this document is already sign */}
 
               <Modal show={isCompleted.isModal}>
diff --git a/microfrontends/SignDocuments/src/Component/component/CustomModal.js b/microfrontends/SignDocuments/src/Component/component/CustomModal.js
new file mode 100644
index 000000000..dad3790b6
--- /dev/null
+++ b/microfrontends/SignDocuments/src/Component/component/CustomModal.js
@@ -0,0 +1,51 @@
+import React from "react";
+import "../../css/customModal.css";
+import "../../css/signature.css";
+
+function CustomModal({
+  show,
+  headMsg,
+  bodyMssg,
+  footerMessage,
+  declineDoc,
+  setIsDecline
+}) {
+  return (
+    show && (
+      <div className="parentDiv">
+        <div className="childDiv">
+          <div className="modalHeadDiv bg-danger">{headMsg && headMsg}</div>
+          <div className="modalBodyDIv">
+            <p className="pTagBody">{bodyMssg && bodyMssg}</p>
+          </div>
+          {footerMessage && (
+            <div className="modalFooterDiv">
+              <button
+                style={{
+                  color: "black"
+                }}
+                type="button"
+                className="finishBtn"
+                onClick={() => setIsDecline({ isDeclined: false })}
+              >
+                Close
+              </button>
+              <button
+                style={{
+                  background: "#de4337"
+                }}
+                type="button"
+                className="finishBtn"
+                onClick={() => declineDoc()}
+              >
+                Yes
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  );
+}
+
+export default CustomModal;
diff --git a/microfrontends/SignDocuments/src/Component/component/defaultSignature.js b/microfrontends/SignDocuments/src/Component/component/defaultSignature.js
index 782133bea..5bc7fedd9 100644
--- a/microfrontends/SignDocuments/src/Component/component/defaultSignature.js
+++ b/microfrontends/SignDocuments/src/Component/component/defaultSignature.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from "react";
-import axios from "axios";
+import React from "react";
+ 
 
 function DefaultSignature({
   themeColor,
diff --git a/microfrontends/SignDocuments/src/Component/component/emailComponent.js b/microfrontends/SignDocuments/src/Component/component/emailComponent.js
index af6ecf0e4..bdbb1eb52 100644
--- a/microfrontends/SignDocuments/src/Component/component/emailComponent.js
+++ b/microfrontends/SignDocuments/src/Component/component/emailComponent.js
@@ -26,7 +26,7 @@ function EmailComponent({
   //function for send email
   const sendEmail = async () => {
     setIsLoading(true);
-    let sendMail, recipent;
+    let sendMail;
     for (let i = 0; i < emailCount.length; i++) {
        
       try {
diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js
index a60627218..1acd56a64 100644
--- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js
+++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js
@@ -23,8 +23,8 @@ import Loader from "./component/loader";
 import HandleError from "./component/HandleError";
 import Nodata from "./component/Nodata";
 import Header from "./component/header";
-import ModalComponent from "./component/modalComponent";
 import RenderPdf from "./component/renderPdf";
+import CustomModal from "./component/CustomModal";
 function EmbedPdfImage() {
   const { id, contactBookId } = useParams();
   const [isSignPad, setIsSignPad] = useState(false);
@@ -953,6 +953,34 @@ function EmbedPdfImage() {
         <Nodata />
       ) : (
         <div className="signatureContainer">
+          {/* this modal is used to show decline alert */}
+          <CustomModal
+            show={isDecline.isDeclined}
+            headMsg="Document Declined Alert!"
+            bodyMssg={
+              isDecline.currnt === "Sure" ? (
+                <p>Are you sure want to decline this document ?</p>
+              ) : isDecline.currnt === "YouDeclined" ? (
+                <p>You have declined this document!</p>
+              ) : (
+                isDecline.currnt === "another" && (
+                  <p>
+                    You cannot sign this document as it has been declined by one
+                    or more person(s).
+                  </p>
+                )
+              )
+            }
+            footerMessage={isDecline.currnt === "Sure"}
+            declineDoc={declineDoc}
+            setIsDecline={setIsDecline}
+          />
+          {/* this modal is used for show expired alert */}
+          <CustomModal
+            show={isExpired}
+            headMsg="Document Expired!"
+            bodyMssg="This Document is no longer available."
+          />
           {/* this component used for UI interaction and show their functionality */}
           {pdfLoadFail.status &&
             !isExpired &&
@@ -975,57 +1003,6 @@ function EmbedPdfImage() {
               marginRight: pdfOriginalWidth > 500 && "20px"
             }}
           >
-            {/* this modal is used for show decline alert */}
-            <Modal show={isDecline.isDeclined}>
-              <ModalHeader className="bg-danger" style={{ color: "white" }}>
-                Document Declined Alert!
-              </ModalHeader>
-
-              <Modal.Body>
-                {isDecline.currnt === "Sure" ? (
-                  <p>Are you sure want to decline this document ?</p>
-                ) : isDecline.currnt === "YouDeclined" ? (
-                  <p>You have declined this document!</p>
-                ) : (
-                  isDecline.currnt === "another" && (
-                    <p>
-                      You cannot sign this document as it has been declined by
-                      one or more person(s).
-                    </p>
-                  )
-                )}
-              </Modal.Body>
-              <Modal.Footer>
-                {isDecline.currnt === "Sure" && (
-                  <>
-                    <button
-                      style={{
-                        color: "black"
-                      }}
-                      type="button"
-                      className="finishBtn"
-                      onClick={() => setIsDecline({ isDeclined: false })}
-                    >
-                      Close
-                    </button>
-                    <button
-                      style={{
-                        background: "#de4337"
-                      }}
-                      type="button"
-                      className="finishBtn"
-                      onClick={() => declineDoc()}
-                    >
-                      Yes
-                    </button>
-                  </>
-                )}
-              </Modal.Footer>
-            </Modal>
-
-            {/* this modal component is used for show expired document */}
-            <ModalComponent isShow={isExpired} type={"expire"} />
-
             {/* this modal is used show this document is already sign */}
             <Modal show={isAlreadySign.status}>
               <ModalHeader style={{ background: themeColor() }}>
diff --git a/microfrontends/SignDocuments/src/css/customModal.css b/microfrontends/SignDocuments/src/css/customModal.css
new file mode 100644
index 000000000..05d62e699
--- /dev/null
+++ b/microfrontends/SignDocuments/src/css/customModal.css
@@ -0,0 +1,61 @@
+.parentDiv {
+    width: 100%;
+    height: 100%;
+    background: gray;
+    position: absolute;
+    z-index: 100;
+    background-color: rgba(0, 0, 0, 0.75);
+    display: flex;
+    flex-direction: column;
+    /* justify-content: center; */
+    align-items: center;
+}
+
+.childDiv {
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-content: center;
+    background-color: #fff;
+    margin:30px 20px;
+    border: 0px 1px 1px 1px solid rgba(0, 0, 0, .2);
+    border-radius: 0.3rem;
+    outline: 0;
+}
+
+.modalHeadDiv {
+    padding: 10px;
+    color: #fff;
+    border-top-left-radius: 0.3rem;
+    border-top-right-radius: 0.3rem;
+    font-size: 17px;
+    font-weight: 500;
+}
+
+.modalBodyDIv {
+    padding: 20px;
+}
+
+.spanTagHead {
+    color: white !important;
+    font-size: 17px;
+    font-weight: 500;
+}
+
+.pTagBody {
+
+    font-size: 15px !important;
+}
+.modalFooterDiv{
+    margin: 10px;
+    display: flex;
+    justify-content: flex-end;
+}
+
+@media screen and (max-width:500px) {
+    .childDiv {
+        margin: 50px 7px;
+        width: 90%;
+    }
+}
\ No newline at end of file
diff --git a/microfrontends/SignDocuments/src/css/signature.css b/microfrontends/SignDocuments/src/css/signature.css
index d3e16258a..a8c724680 100644
--- a/microfrontends/SignDocuments/src/css/signature.css
+++ b/microfrontends/SignDocuments/src/css/signature.css
@@ -341,6 +341,7 @@
     flex-direction: row;
     justify-content: space-between;
     background-color: #ebebeb;
+    position:"relative"
     /* max-height: 800px; */
     /* overflow: auto; */
   }
diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js
index 138b22e62..0b915423d 100644
--- a/microfrontends/SignDocuments/src/utils/Utils.js
+++ b/microfrontends/SignDocuments/src/utils/Utils.js
@@ -57,37 +57,41 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
     (data, ind) =>
       data.key === signKey && data.Width && data.Height && data.SignUrl
   );
+   
 
   if (updateFilter.length > 0) {
-    let newWidth, nweHeight;
+    let newWidth, newHeight;
     const aspectRatio = imgWH.width / imgWH.height;
+
     const getXYdata = xyPostion[index].pos;
-   
+
     if (aspectRatio === 1) {
       newWidth = aspectRatio * 100;
-      nweHeight = aspectRatio * 100;
+      newHeight = aspectRatio * 100;
     } else if (aspectRatio < 2) {
       newWidth = aspectRatio * 100;
-      nweHeight = 100;
+      newHeight = 100;
     } else if (aspectRatio > 2 && aspectRatio < 4) {
       newWidth = aspectRatio * 70;
-      nweHeight = 70;
+      newHeight = 70;
     } else if (aspectRatio > 4) {
       newWidth = aspectRatio * 40;
-      nweHeight = 40;
+      newHeight = 40;
     } else if (aspectRatio > 5) {
       newWidth = aspectRatio * 10;
-      nweHeight = 10;
+      newHeight = 10;
     }
-   
-    let getPosData = xyPostion[index].pos.filter((data) => data.key === signKey);
-    
+
+    let getPosData = xyPostion[index].pos.filter(
+      (data) => data.key === signKey
+    );
+
     const addSign = getXYdata.map((url, ind) => {
       if (url.key === signKey) {
         return {
           ...url,
-          Width: getPosData[0].Width ? getPosData[0].Width : 150,
-          Height: getPosData[0].Height ? getPosData[0].Height : 60,
+          Width: getPosData[0].Width ? getPosData[0].Width : newWidth,
+          Height: getPosData[0].Height ? getPosData[0].Height : newHeight,
           SignUrl: image.src,
           ImageType: image.imgType
         };
@@ -106,7 +110,9 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
   } else {
     const getXYdata = xyPostion[index].pos;
 
-    let getPosData = xyPostion[index].pos.filter((data) => data.key === signKey);
+    let getPosData = xyPostion[index].pos.filter(
+      (data) => data.key === signKey
+    );
     const aspectRatio = imgWH.width / imgWH.height;
 
     let newWidth, newHeight;
@@ -131,9 +137,9 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
       if (url.key === signKey) {
         return {
           ...url,
-          Width: getPosData[0].Width ? getPosData[0].Width : 150,
-          Height: getPosData[0].Height ? getPosData[0].Height : 60,
-          SignUrl: image.src,
+          Width: getPosData[0].Width ? getPosData[0].Width : newWidth,
+          Height: getPosData[0].Height ? getPosData[0].Height : newHeight,
+         SignUrl: image.src,
           ImageType: image.imgType
         };
       }