diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
index 012f4e347..6d2d33061 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();
@@ -64,7 +62,8 @@ function PdfRequestFiles() {
   const [isSigned, setIsSigned] = useState(false);
   const [isExpired, setIsExpired] = useState(false);
   const [alreadySign, setAlreadySign] = useState(false);
-
+  const [containerWH, setContainerWH] = useState({});
+  const divRef = useRef(null);
   const rowLevel =
     localStorage.getItem("rowlevel") &&
     JSON.parse(localStorage.getItem("rowlevel"));
@@ -96,6 +95,14 @@ function PdfRequestFiles() {
       getDocumentDetails();
     }
   }, []);
+  useEffect(() => {
+    if (divRef.current) {
+      setContainerWH({
+        width: divRef.current.offsetWidth,
+        height: divRef.current.offsetHeight
+      });
+    }
+  }, [divRef.current]);
 
   //function for get document details for perticular signer with signer'object id
   const getDocumentDetails = async () => {
@@ -191,7 +198,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 +919,7 @@ function PdfRequestFiles() {
 
   //function for set decline true on press decline button
   const declineDoc = async () => {
+    setIsDecline({ isDeclined: false });
     const data = {
       IsDeclined: true
     };
@@ -983,7 +991,39 @@ function PdfRequestFiles() {
             </div>
           )}
 
-          <div className="signatureContainer">
+          <div className="signatureContainer" ref={divRef}>
+            {/* this modal is used to show decline alert */}
+            <CustomModal
+              containerWH={containerWH}
+              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
+              containerWH={containerWH}
+              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 +1039,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..bdf5fef6e
--- /dev/null
+++ b/microfrontends/SignDocuments/src/Component/component/CustomModal.js
@@ -0,0 +1,59 @@
+import React from "react";
+import "../../css/customModal.css";
+import "../../css/signature.css";
+
+function CustomModal({
+  show,
+  headMsg,
+  bodyMssg,
+  footerMessage,
+  declineDoc,
+  setIsDecline,
+  containerWH
+}) {
+  const isMobile = window.innerWidth < 767;
+  return (
+    show && (
+      <div
+        className="parentDiv"
+        style={{
+          width: containerWH && containerWH.width,
+          height: isMobile ? "100%" : containerWH && containerWH.height
+        }}
+      >
+        <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 b9bb36752..5892c8ef5 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..8d35da7fc 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);
@@ -67,12 +67,13 @@ function EmbedPdfImage() {
     status: false,
     type: "load"
   });
-
+  const [containerWH, setContainerWH] = useState({});
   const docId = id && id;
   const isMobile = window.innerWidth < 767;
   const index = xyPostion.findIndex((object) => {
     return object.pageNumber === pageNumber;
   });
+  const divRef = useRef(null);
 
   useEffect(() => {
     const clientWidth = window.innerWidth;
@@ -82,6 +83,14 @@ function EmbedPdfImage() {
     setPdfNewWidth(pdfWidth);
     getDocumentDetails();
   }, []);
+  useEffect(() => {
+    if (divRef.current) {
+      setContainerWH({
+        width: divRef.current.offsetWidth,
+        height: divRef.current.offsetHeight
+      });
+    }
+  }, [divRef.current]);
 
   //function for get document details for perticular signer with signer'object id
   const getDocumentDetails = async () => {
@@ -952,7 +961,37 @@ function EmbedPdfImage() {
       ) : noData ? (
         <Nodata />
       ) : (
-        <div className="signatureContainer">
+        <div className="signatureContainer" ref={divRef}>
+          {/* this modal is used to show decline alert */}
+          <CustomModal
+            containerWH={containerWH}
+            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
+            containerWH={containerWH}
+            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 +1014,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..5687ed9b0
--- /dev/null
+++ b/microfrontends/SignDocuments/src/css/customModal.css
@@ -0,0 +1,59 @@
+.parentDiv {
+    background: gray;
+    position: absolute;
+    z-index: 20;
+    background-color: rgba(0, 0, 0, 0.75);
+    display: flex;
+    flex-direction: column;
+     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..078253191 100644
--- a/microfrontends/SignDocuments/src/css/signature.css
+++ b/microfrontends/SignDocuments/src/css/signature.css
@@ -1,791 +1,778 @@
- /* html, body {margin: 0; height: 100%; overflow: hidden} */
- /* #04b565 */
- /* div {
-    margin: 0px;
-    font-family:system-ui;
-  } */
-  .signatureCanvas {
-    border: 2px solid #888;
-    background-color: rgb(255, 255, 255);
-    width: 460px;
-    height: 184px;
-  }
- 
-  .penContainer {
-    width: 460px;
-  }
- 
-  .signatureBtn {
-    border: 1.5px solid #47a3ad;
-    margin-bottom: 10px;
-    border-radius: 3px;
-    display: flex;
-    padding: 0px;
-    justify-content: space-between;
-    background: white;
-    transition-duration: 0.4s;
-    cursor: all-scroll;
-    width: 150px;
-    height: 30px;
-    color: black;
-    /* transform: translate(); */
- 
-  }
- 
-  /* .signatureBtn:hover {
-     background-color:#47a3ad;
-     color: white;
-   } */
- 
-  .disableSign {
-    border: 1.5px solid #47a3ad;
-    margin-bottom: 10px;
-    border-radius: 3px;
-    display: flex;
-    padding: 0px;
-    justify-content: space-between;
-    background: white;
-    transition-duration: 0.4s;
-    cursor: all-scroll;
-    width: 150px;
-    height: 30px;
-    color: black;
-    border: 1px solid rgb(203, 203, 203);
-    cursor: text;
- 
-  }
- 
-  .emailInput {
-    padding: 10px;
-    border: 1.5px solid gray;
-    border-radius: 4px;
-    width: 100%;
-    font-size: 15px;
-    padding-bottom: 20px;
-  }
- 
-  .emailInput:focus {
-    outline: none;
-    border: 1.5px solid #47a3ad;
-  }
- 
-  .addEmail {
-    padding: "0px";
-    border: 1.5px solid #47a3ad;
-    border-radius: 4px;
-    width: 100%;
-    font-size: 15px;
- 
-  }
- 
-  .addEmail,
-  .emailInput {
- 
-    outline: none;
-  }
- 
-  .addEmailInput {
-    border: none;
-    outline: none;
-  }
- 
-  .emailChip {
-    background-color: #47a3ad;
-    margin: 4px;
-    border-radius: 10px;
-    padding: 5px 10px;
-  }
- 
-  .addEmailInput {
-    padding: 10px;
- 
-    border-radius: 4px;
-    width: 100%;
-    font-size: 15px;
- 
- 
-  }
- 
-  .addEmailInput:focus {
-    outline: none;
-    border: none;
-  }
- 
-  .finishBtn {
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
-    padding: 3px 30px;
-    color: white;
-    font-weight: 500 !important;
-    font-size: 14px !important;
-    border: none;
-    margin-left: 10px;
-  }
- 
-  .sendMail {
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
-    padding: 3px 30px;
-    color: white;
-    font-weight: 500 !important;
-    font-size: 14px !important;
-    border: none;
-    margin-left: 10px;
-    /* color: rgb(77, 75, 75); */
-  }
- 
-  .finishBtn:focus {
-    border: none;
-    outline: none;
-  }
- 
- 
-  .finishBtn:hover {
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
-    color: white;
-  }
- 
-  .saveBtn {
-    padding: 3px 18px !important;
- 
-  }
- 
-  .disabledFinish {
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
-    padding: 3px 30px;
-    color: white;
-    font-weight: 600;
-    font-size: 14px;
-    border: none;
- 
-    margin-left: 10px;
-  }
- 
-  .sendHover:hover {
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
-    color: white;
-  }
- 
-  .defaultSignBox {
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
-    width: 180px;
-    height: 111px;
-    padding: 8px 20px;
-    color: white;
-    font-weight: 600;
-    font-size: 14px;
-    border: none;
-    border-radius: 2px;
-    margin-left: 10px;
-  }
- 
- 
-  .defaultBtn {
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
-    padding: 3px 26px;
- 
-    color: black;
-    font-weight: 500;
-    font-size: 14px;
-    border: 1px solid gray;
-    border-radius: 2px;
-    margin-left: 10px;
- 
-  }
- 
-  .backBtn {
-    background-color: white;
-  }
- 
-  .backBtn:hover {
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
- 
-  }
- 
-  .defaultBtn:focus {
-    border: none;
-    outline: none;
-  }
- 
-  .downloadBtn {
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
-    padding: 3px 15px !important;
-    background-color: rgb(241 79 79);
-    border: none !important;
-    color: white !important;
-  }
- 
-  .downloadBtn:hover {
-    box-shadow: 0 2px 4px rgba(154, 36, 36, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
- 
-  }
- 
-  .printBtn {
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
-    padding: 3px 15px !important;
-    background: #188ae2;
-    border: none !important;
-    color: white !important;
-  }
- 
-  .printBtn:hover {
-    box-shadow: 0 2px 4px rgba(23, 48, 137, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
- 
- 
-  }
- 
-  .certificateBtn {
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
-    padding: 3px 15px !important;
-    background: #08bc66;
-    border: none !important;
-    color: white !important;
-    text-decoration: none !important;
-  }
- 
-  .certificateBtn:hover {
-    box-shadow: 0 2px 4px rgba(15, 150, 87, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
- 
-  }
-  
- 
-  .signerList {
-    overflow-y: scroll;
-    max-height: 180px;
- 
-  }
- 
-  .signerList::-webkit-scrollbar {
-    display: none;
-    /* for Chrome, Safari, and Opera */
-  }
- 
-  .showScroll {
-    height: 100%;
-    overflow: scroll;
- 
-  }
- 
-  .showScroll::-webkit-scrollbar {
-    display: none;
-    /* for Chrome, Safari, and Opera */
-  }
- 
-  .hideScroll {
-    height: 100%;
-    overflow: scroll;
-  }
- 
-  .signedStyle {
-    color: white;
-    padding: 5px;
-    font-family: sans-serif;
-    font-size: 15px !important;
-  }
- 
-  .userName {
-    font-size: 12px !important;
-    font-weight: bold !important;
-    color: #424242 !important;
-    width: 100px;
-    white-space: nowrap;
-    overflow: hidden !important;
-    text-overflow: ellipsis;
-  }
- 
-  .useEmail {
-    font-size: 10px;
-    color: #424242;
-    font-weight: 500;
-    width: 100px;
-    white-space: nowrap;
-    overflow: hidden !important;
-    text-overflow: ellipsis;
-  }
- 
-  .spanTagHead {
-    color: white !important;
-    font-size: 17px;
-    font-weight: 500;
-  }
- 
-  .pTagBody {
- 
-    font-size: 15px !important;
-  }
- 
-  .signTab {
-    cursor: pointer !important;
-    font-weight: 400 !important;
-    margin-left: 10px !important;
-    font-size: 15px !important;
-  }
- 
-  .draggable-button {
-    padding: 10px 20px;
-    background: #3498db;
-    color: #fff;
-    border: none;
-    cursor: grab;
-    transition: transform 0.2s;
-  }
- 
-  .draggable-button.dragging {
-    opacity: 0.5;
-    /* Reduce opacity while dragging */
-    transform: scale(1.1);
-    /* Apply a scaling effect while dragging */
-  }
- 
- 
-  .signatureContainer {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    background-color: #ebebeb;
-    /* max-height: 800px; */
-    /* overflow: auto; */
-  }
- 
-  .signatureHeader {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 5px;
-  }
- 
-  .signerComponent {
-    /* box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; */
-    width: 180px;
-    background-color: white;
-    height: 100%;
-  }
- 
-  .modalBody {
-    padding: 1rem !important;
-    padding-top: 2rem !important;
-  }
- 
-  .signLayoutContainer1 {
-    padding: 30px;
-    display: flex;
-    flex-direction: column;
-    align-items: center
-  }
- 
-  .signLayoutContainer2 {
-    display: none;
-  }
- 
-  .preBtn1 {
-    display: flex;
-    align-items: center;
-  }
- 
-  .preBtn2 {
-    display: none;
-  }
- 
-  .headerBtn2 {
-    display: none;
-  }
- 
-  .uploadImgLogo {
-    font-size: 50px;
-  }
- 
- 
- 
-  .DropdownMenuContent,
-  .DropdownMenuSubContent {
-    min-width: 130px;
-    background-color: #887abf;
-    border: none;
-    padding: 5px;
- 
-    animation-duration: 400ms;
-    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-    will-change: transform, opacity;
-    z-index: 30 !important;
-  }
- 
-  .DropdownMenuContent[data-side='top'],
-  .DropdownMenuSubContent[data-side='top'] {
-    animation-name: slideDownAndFade;
-  }
- 
-  .DropdownMenuContent[data-side='right'],
-  .DropdownMenuSubContent[data-side='right'] {
-    animation-name: slideLeftAndFade;
-  }
- 
-  .DropdownMenuContent[data-side='bottom'],
-  .DropdownMenuSubContent[data-side='bottom'] {
-    animation-name: slideUpAndFade;
-  }
- 
-  .DropdownMenuContent[data-side='left'],
-  .DropdownMenuSubContent[data-side='left'] {
-    animation-name: slideRightAndFade;
-  }
- 
-  .DropdownMenuItem {
-    font-size: 13px;
-    line-height: 1;
-    color: black;
-    background-color: #887abf;
-    display: flex;
-    align-items: center;
-    height: 25px;
-    padding: 0 5px;
-    position: relative;
-    padding-left: 25px;
-    user-select: none;
-    outline: none;
-    border: none;
-  }
- 
-  .SelectTrigger {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 4px;
-    padding: 0 70px;
-    font-size: 13px;
-    line-height: 1;
-    height: 35px;
-    gap: 5px;
-    border: none;
-    background-color: #887abf;
- 
-    width: 100px;
-    white-space: nowrap;
-    overflow: hidden !important;
-    text-overflow: ellipsis;
-  }
- 
-  .selectEmail {
- 
-    align-items: center;
-    justify-content: center;
-    border-radius: 4px;
-    padding: 0 15px;
-    font-size: 13px;
-    line-height: 1;
-    height: 35px;
-    gap: 5px;
-    border: none;
-    background-color: #887abf;
- 
-    width: 200px;
-    white-space: nowrap;
-    overflow: hidden !important;
-    text-overflow: ellipsis;
-  }
- 
-  option {
-    overflow-y: scroll;
-  }
- 
-   .SelectTrigger:hover {
-    border: none;
-    outline: none;
-  }
-  .selectEmail:hover{
+ .signatureCanvas {
+   border: 2px solid #888;
+   background-color: rgb(255, 255, 255);
+   width: 460px;
+   height: 184px;
+ }
+
+ .penContainer {
+   width: 460px;
+ }
+
+ .signatureBtn {
+   border: 1.5px solid #47a3ad;
+   margin-bottom: 10px;
+   border-radius: 3px;
+   display: flex;
+   padding: 0px;
+   justify-content: space-between;
+   background: white;
+   transition-duration: 0.4s;
+   cursor: all-scroll;
+   width: 150px;
+   height: 30px;
+   color: black;
+ }
+
+ .disableSign {
+   border: 1.5px solid #47a3ad;
+   margin-bottom: 10px;
+   border-radius: 3px;
+   display: flex;
+   padding: 0px;
+   justify-content: space-between;
+   background: white;
+   transition-duration: 0.4s;
+   cursor: all-scroll;
+   width: 150px;
+   height: 30px;
+   color: black;
+   border: 1px solid rgb(203, 203, 203);
+   cursor: text;
+ }
+
+ .emailInput {
+   padding: 10px;
+   border: 1.5px solid gray;
+   border-radius: 4px;
+   width: 100%;
+   font-size: 15px;
+   padding-bottom: 20px;
+ }
+
+ .emailInput:focus {
+   outline: none;
+   border: 1.5px solid #47a3ad;
+ }
+
+ .addEmail {
+   padding: "0px";
+   border: 1.5px solid #47a3ad;
+   border-radius: 4px;
+   width: 100%;
+   font-size: 15px;
+ }
+
+ .addEmail,
+ .emailInput {
+   outline: none;
+ }
+
+ .addEmailInput {
    border: none;
    outline: none;
  }
- 
- 
-   .SelectTrigger:focus {
-    /* box-shadow: 0 0 0 2px black; */
-    border: none;
-    outline: none;
-  }
-  .selectEmail:focus {
+
+ .emailChip {
+   background-color: #47a3ad;
+   margin: 4px;
+   border-radius: 10px;
+   padding: 5px 10px;
+ }
+
+ .addEmailInput {
+   padding: 10px;
+   border-radius: 4px;
+   width: 100%;
+   font-size: 15px;
+ }
+
+ .addEmailInput:focus {
+   outline: none;
+   border: none;
+ }
+
+ .signatureInput {
+   padding: 10px;
+   width: 80%;
+   border-radius: 4px;
+   font-size: 0.75rem;
+   border: 1px solid #e2dddd;
+   color: black;
+   font-family: inherit;
+   font-feature-settings: inherit;
+   font-variation-settings: inherit;
+   font-weight: inherit;
+   overflow: visible;
+ }
+
+ .signatureInput:focus {
+   outline: none;
+ }
+
+ .finishBtn {
+   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
+   padding: 3px 30px;
+   color: white;
+   font-weight: 500 !important;
+   font-size: 14px !important;
+   border: none;
+   margin-left: 10px;
+ }
+
+ .sendMail {
+   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
+   padding: 3px 30px;
+   color: white;
+   font-weight: 500 !important;
+   font-size: 14px !important;
+   border: none;
+   margin-left: 10px;
+ }
+
+ .finishBtn:focus {
+   border: none;
+   outline: none;
+ }
+
+ .finishBtn:hover {
+   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
+   color: white;
+ }
+
+ .saveBtn {
+   padding: 3px 18px !important;
+ }
+
+ .disabledFinish {
+   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
+   padding: 3px 30px;
+   color: white;
+   font-weight: 600;
+   font-size: 14px;
+   border: none;
+   margin-left: 10px;
+ }
+
+ .sendHover:hover {
+   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
+   color: white;
+ }
+
+ .defaultSignBox {
+   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
+   width: 180px;
+   height: 111px;
+   padding: 8px 20px;
+   color: white;
+   font-weight: 600;
+   font-size: 14px;
+   border: none;
+   border-radius: 2px;
+   margin-left: 10px;
+ }
+
+ .defaultBtn {
+   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
+   padding: 3px 26px;
+   color: black;
+   font-weight: 500;
+   font-size: 14px;
+   border: 1px solid gray;
+   border-radius: 2px;
+   margin-left: 10px;
+ }
+
+ .backBtn {
+   background-color: white;
+ }
+
+ .backBtn:hover {
+   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
+ }
+
+ .defaultBtn:focus {
+   border: none;
+   outline: none;
+ }
+
+ .downloadBtn {
+   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
+   padding: 3px 15px !important;
+   background-color: rgb(241 79 79);
+   border: none !important;
+   color: white !important;
+ }
+
+ .downloadBtn:hover {
+   box-shadow: 0 2px 4px rgba(154, 36, 36, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
+ }
+
+ .printBtn {
+   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
+   padding: 3px 15px !important;
+   background: #188ae2;
+   border: none !important;
+   color: white !important;
+ }
+
+ .printBtn:hover {
+   box-shadow: 0 2px 4px rgba(23, 48, 137, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
+ }
+
+ .certificateBtn {
+   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
+   padding: 3px 15px !important;
+   background: #08bc66;
+   border: none !important;
+   color: white !important;
+   text-decoration: none !important;
+ }
+
+ .certificateBtn:hover {
+   box-shadow: 0 2px 4px rgba(15, 150, 87, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
+ }
+
+ .signerList {
+   overflow-y: scroll;
+   max-height: 180px;
+ }
+
+ .signerList::-webkit-scrollbar {
+   display: none;
+ }
+
+ .showScroll {
+   height: 100%;
+   overflow: scroll;
+
+ }
+
+ .showScroll::-webkit-scrollbar {
+   display: none;
+ }
+
+ .hideScroll {
+   height: 100%;
+   overflow: scroll;
+ }
+
+ .signedStyle {
+   color: white;
+   padding: 5px;
+   font-family: sans-serif;
+   font-size: 15px !important;
+ }
+
+ .userName {
+   font-size: 12px !important;
+   font-weight: bold !important;
+   color: #424242 !important;
+   width: 100px;
+   white-space: nowrap;
+   overflow: hidden !important;
+   text-overflow: ellipsis;
+ }
+
+ .useEmail {
+   font-size: 10px;
+   color: #424242;
+   font-weight: 500;
+   width: 100px;
+   white-space: nowrap;
+   overflow: hidden !important;
+   text-overflow: ellipsis;
+ }
+
+ .spanTagHead {
+   color: white !important;
+   font-size: 17px;
+   font-weight: 500;
+ }
+
+ .pTagBody {
+
+   font-size: 15px !important;
+ }
+
+ .signTab {
+   cursor: pointer !important;
+   font-weight: 400 !important;
+   margin-left: 10px !important;
+   font-size: 15px !important;
+ }
+
+ .draggable-button {
+   padding: 10px 20px;
+   background: #3498db;
+   color: #fff;
+   border: none;
+   cursor: grab;
+   transition: transform 0.2s;
+ }
+
+ .draggable-button.dragging {
+   opacity: 0.5;
+   /* Reduce opacity while dragging */
+   transform: scale(1.1);
+   /* Apply a scaling effect while dragging */
+ }
+
+ .signatureContainer {
+   display: flex;
+   flex-direction: row;
+   justify-content: space-between;
+   background-color: #ebebeb;
+   position: "relative"
+ }
+
+ .signatureHeader {
+   display: flex;
+   flex-direction: row;
+   justify-content: space-between;
+   align-items: center;
+   margin-top: 5px;
+ }
+
+ .signerComponent {
+   /* box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; */
+   width: 180px;
+   background-color: white;
+   height: 100%;
+ }
+
+ .modalBody {
+   padding: 1rem !important;
+   padding-top: 2rem !important;
+ }
+
+ .signLayoutContainer1 {
+   padding: 30px;
+   display: flex;
+   flex-direction: column;
+   align-items: center
+ }
+
+ .signLayoutContainer2 {
+   display: none;
+ }
+
+ .preBtn1 {
+   display: flex;
+   align-items: center;
+ }
+
+ .preBtn2 {
+   display: none;
+ }
+
+ .headerBtn2 {
+   display: none;
+ }
+
+ .uploadImgLogo {
+   font-size: 50px;
+ }
+
+
+
+ .DropdownMenuContent,
+ .DropdownMenuSubContent {
+   min-width: 130px;
+   background-color: #887abf;
+   border: none;
+   padding: 5px;
+
+   animation-duration: 400ms;
+   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+   will-change: transform, opacity;
+   z-index: 30 !important;
+ }
+
+ .DropdownMenuContent[data-side='top'],
+ .DropdownMenuSubContent[data-side='top'] {
+   animation-name: slideDownAndFade;
+ }
+
+ .DropdownMenuContent[data-side='right'],
+ .DropdownMenuSubContent[data-side='right'] {
+   animation-name: slideLeftAndFade;
+ }
+
+ .DropdownMenuContent[data-side='bottom'],
+ .DropdownMenuSubContent[data-side='bottom'] {
+   animation-name: slideUpAndFade;
+ }
+
+ .DropdownMenuContent[data-side='left'],
+ .DropdownMenuSubContent[data-side='left'] {
+   animation-name: slideRightAndFade;
+ }
+
+ .DropdownMenuItem {
+   font-size: 13px;
+   line-height: 1;
+   color: black;
+   background-color: #887abf;
+   display: flex;
+   align-items: center;
+   height: 25px;
+   padding: 0 5px;
+   position: relative;
+   padding-left: 25px;
+   user-select: none;
+   outline: none;
+   border: none;
+ }
+
+ .SelectTrigger {
+   display: inline-flex;
+   align-items: center;
+   justify-content: center;
+   border-radius: 4px;
+   padding: 0 70px;
+   font-size: 13px;
+   line-height: 1;
+   height: 35px;
+   gap: 5px;
+   border: none;
+   background-color: #887abf;
+
+   width: 100px;
+   white-space: nowrap;
+   overflow: hidden !important;
+   text-overflow: ellipsis;
+ }
+
+ .selectEmail {
+
+   align-items: center;
+   justify-content: center;
+   border-radius: 4px;
+   padding: 0 15px;
+   font-size: 13px;
+   line-height: 1;
+   height: 35px;
+   gap: 5px;
+   border: none;
+   background-color: #887abf;
+
+   width: 200px;
+   white-space: nowrap;
+   overflow: hidden !important;
+   text-overflow: ellipsis;
+ }
+
+ option {
+   overflow-y: scroll;
+ }
+
+ .SelectTrigger:hover {
+   border: none;
+   outline: none;
+ }
+
+ .selectEmail:hover {
+   border: none;
+   outline: none;
+ }
+
+
+ .SelectTrigger:focus {
    /* box-shadow: 0 0 0 2px black; */
    border: none;
    outline: none;
  }
+
+ .selectEmail:focus {
+   /* box-shadow: 0 0 0 2px black; */
+   border: none;
+   outline: none;
+ }
+
+ .SelectTrigger[data-placeholder] {
+   color: black;
+ }
+
+ .SelectIcon {
+   color: Var(--violet-11);
+ }
+
+ .SelectContent {
+   overflow: hidden;
+   background-color: white;
+   border-radius: 6px;
+   box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
+ }
+
+ .SelectViewport {
+   padding: 5px;
+ }
+
+ .SelectItem {
+   font-size: 13px;
+   line-height: 1;
+   color: var(--violet-11);
+   border-radius: 3px;
+   display: flex;
+   align-items: center;
+   height: 25px;
+   padding: 0 35px 0 25px;
+   position: relative;
+   user-select: none;
+   z-index: 10 !important;
+ }
+
+ .SelectItem[data-disabled] {
+   color: var(--mauve-8);
+   pointer-events: none;
+ }
+
+ .SelectItem[data-highlighted] {
+   outline: none;
+   background-color: var(--violet-9);
+   color: var(--violet-1);
+ }
+
+ .SelectLabel {
+   padding: 0 25px;
+   font-size: 12px;
+   line-height: 25px;
+   color: var(--mauve-11);
+ }
+
+ .SelectSeparator {
+   height: 1px;
+   background-color: var(--violet-6);
+   margin: 5px;
+ }
+
+ .SelectItemIndicator {
+   position: absolute;
+   left: 0;
+   width: 25px;
+   display: inline-flex;
+   align-items: center;
+   justify-content: center;
+ }
+
+ .SelectScrollButton {
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   height: 25px;
+   background-color: white;
+   color: var(--violet-11);
+   cursor: default;
+ }
+.fontOptionContainer{
+  border: 1px solid #d6d3d3;
+  margin: 10px 5px 5px 5px;
  
-  .SelectTrigger[data-placeholder] {
-    color: black;
-  }
- 
-  .SelectIcon {
-    color: Var(--violet-11);
-  }
- 
-  .SelectContent {
-    overflow: hidden;
-    background-color: white;
-    border-radius: 6px;
-    box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
-  }
- 
-  .SelectViewport {
-    padding: 5px;
-  }
- 
-  .SelectItem {
-    font-size: 13px;
-    line-height: 1;
-    color: var(--violet-11);
-    border-radius: 3px;
-    display: flex;
-    align-items: center;
-    height: 25px;
-    padding: 0 35px 0 25px;
-    position: relative;
-    user-select: none;
-    z-index: 10 !important;
-  }
- 
-  .SelectItem[data-disabled] {
-    color: var(--mauve-8);
-    pointer-events: none;
-  }
- 
-  .SelectItem[data-highlighted] {
-    outline: none;
-    background-color: var(--violet-9);
-    color: var(--violet-1);
-  }
- 
-  .SelectLabel {
-    padding: 0 25px;
-    font-size: 12px;
-    line-height: 25px;
-    color: var(--mauve-11);
-  }
- 
-  .SelectSeparator {
-    height: 1px;
-    background-color: var(--violet-6);
-    margin: 5px;
-  }
- 
-  .SelectItemIndicator {
-    position: absolute;
-    left: 0;
-    width: 25px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
- 
-  .SelectScrollButton {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 25px;
-    background-color: white;
-    color: var(--violet-11);
-    cursor: default;
-  }
- 
- 
- 
-  @media screen and (max-width:766px) {
- 
-    .showPages {
-      display: none;
-    }
- 
-    .signatureContainer {
-      display: flex;
-      flex-direction: column;
- 
-    }
- 
- 
-    .signerComponent {
-      display: none;
- 
-    }
- 
-    .preBtn1 {
-      display: none;
-    }
- 
-    .preBtn2 {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      background-color: #ebebeb;
-      padding: 5px 10px;
-    }
- 
-    #navbar {
-      overflow: hidden;
- 
-      z-index: 10;
-    }
- 
-    /* Navbar links */
-    #navbar a {
-      float: left;
-      display: block;
-      color: #f2f2f2;
-      text-align: center;
-      padding: 14px;
-      text-decoration: none;
-    }
- 
-    #navbar a.active {
-      background-color: #4caf50;
-      color: white;
-    }
- 
-    /* Page content */
-    .content {
-      padding: 16px;
-    }
- 
-    /* The sticky class is added to the navbar 
+}
+
+
+ @media screen and (max-width:766px) {
+
+   .showPages {
+     display: none;
+   }
+
+   .signatureContainer {
+     display: flex;
+     flex-direction: column;
+
+   }
+
+
+   .signerComponent {
+     display: none;
+
+   }
+
+   .preBtn1 {
+     display: none;
+   }
+
+   .preBtn2 {
+     display: flex;
+     align-items: center;
+     justify-content: space-between;
+     background-color: #ebebeb;
+     padding: 5px 10px;
+   }
+
+   #navbar {
+     overflow: hidden;
+
+     z-index: 10;
+   }
+
+   /* Navbar links */
+   #navbar a {
+     float: left;
+     display: block;
+     color: #f2f2f2;
+     text-align: center;
+     padding: 14px;
+     text-decoration: none;
+   }
+
+   #navbar a.active {
+     background-color: #4caf50;
+     color: white;
+   }
+
+   /* Page content */
+   .content {
+     padding: 16px;
+   }
+
+   /* The sticky class is added to the navbar 
    with JS when it reaches its scroll position */
-    .stickyHead {
-      position: fixed;
-      top: 50px;
-      left: 0.9rem;
- 
-    }
- 
-    .stickyfooter {
-      position: fixed;
-      bottom: 0px;
-      right: 0rem;
-    }
- 
-    /* Add some top padding to the page content 
+   .stickyHead {
+     position: fixed;
+     top: 50px;
+     left: 0.9rem;
+
+   }
+
+   .stickyfooter {
+     position: fixed;
+     bottom: 0px;
+     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 
    page (position:fixed and top:0) */
-    .stickyHead+.content {
-      padding-top: 60px;
-    }
- 
- 
-    .signLayoutContainer2 {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-around;
-      margin-top: 5px;
-      padding: 2px 5px 10px 5px;
-      position: sticky;
-      align-items: center;
- 
-    }
- 
-    .headerBtn {
-      display: none;
-    }
- 
-    .headerBtn2 {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
- 
-      margin-top: 5px;
-    }
- 
-    .mobileHead {
-      display: flex;
-    }
-  }
- 
-  @media screen and (max-width:487px) and (min-width:351px) {
-    .signatureCanvas {
- 
-      width: 300px;
-      height: 120px;
-    }
- 
-    .penContainer {
-      width: 300px;
-    }
- 
-    .uploadImgLogo {
-      font-size: 30px;
-    }
- 
-    .hidePdf {
-      display: none;
-    }
- 
-    .mobileHead {
-      display: flex;
-    }
- 
-  }
- 
-  @media screen and (max-width:350px) and (min-width:311px) {
-    .signatureCanvas {
- 
-      width: 280px;
-      height: 112px;
-    }
- 
-    .penContainer {
-      width: 280px;
-    }
- 
-    .hidePdf {
-      display: none;
-    }
- 
-    .signTab {
- 
-      font-weight: 500 !important;
- 
-      font-size: 10px !important;
-    }
- 
-    .uploadImgLogo {
-      font-size: 25px;
-    }
- 
-    .uploadImg {
- 
-      font-size: 10px !important;
-    }
- 
-    .mobileHead {
-      display: flex;
-    }
-  }
- 
-  @media screen and (max-width:310px) {
-    .signatureCanvas {
- 
-      width: 230px;
-      height: 92px;
-    }
- 
-    .penContainer {
-      width: 230px;
-    }
- 
-    .hidePdf {
-      display: none;
-    }
- 
-    .signTab {
- 
-      font-weight: 500 !important;
- 
-      font-size: 10px !important;
-    }
- 
-    .uploadImgLogo {
-      font-size: 20px;
-    }
- 
-    .uploadImg {
- 
-      font-size: 10px !important;
-    }
- 
-    .mobileHead {
-      display: flex;
-    }
-  }
\ No newline at end of file
+   .stickyHead+.content {
+     padding-top: 60px;
+   }
+
+
+   .signLayoutContainer2 {
+     display: flex;
+     flex-direction: row;
+     justify-content: space-around;
+     margin-top: 5px;
+     padding: 2px 5px 10px 5px;
+     position: sticky;
+     align-items: center;
+
+   }
+
+   .headerBtn {
+     display: none;
+   }
+
+   .headerBtn2 {
+     display: flex;
+     flex-direction: column;
+     justify-content: space-between;
+
+     margin-top: 5px;
+   }
+
+   .mobileHead {
+     display: flex;
+   }
+ }
+
+ @media screen and (max-width:487px) and (min-width:351px) {
+   .signatureCanvas {
+
+     width: 300px;
+     height: 120px;
+   }
+
+   .penContainer {
+     width: 300px;
+   }
+
+   .uploadImgLogo {
+     font-size: 30px;
+   }
+
+   .hidePdf {
+     display: none;
+   }
+
+   .mobileHead {
+     display: flex;
+   }
+
+ }
+
+ @media screen and (max-width:350px) and (min-width:311px) {
+   .signatureCanvas {
+
+     width: 280px;
+     height: 112px;
+   }
+
+   .penContainer {
+     width: 280px;
+   }
+
+   .hidePdf {
+     display: none;
+   }
+
+   .signTab {
+
+     font-weight: 500 !important;
+
+     font-size: 10px !important;
+   }
+
+   .uploadImgLogo {
+     font-size: 25px;
+   }
+
+   .uploadImg {
+
+     font-size: 10px !important;
+   }
+
+   .mobileHead {
+     display: flex;
+   }
+ }
+
+ @media screen and (max-width:310px) {
+   .signatureCanvas {
+
+     width: 230px;
+     height: 92px;
+   }
+
+   .penContainer {
+     width: 230px;
+   }
+
+   .hidePdf {
+     display: none;
+   }
+
+   .signTab {
+
+     font-weight: 500 !important;
+
+     font-size: 10px !important;
+   }
+
+   .uploadImgLogo {
+     font-size: 20px;
+   }
+
+   .uploadImg {
+
+     font-size: 10px !important;
+   }
+
+   .mobileHead {
+     display: flex;
+   }
+ }
\ No newline at end of file
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
         };
       }