diff --git a/microfrontends/SignDocuments/src/Component/ManageSign.js b/microfrontends/SignDocuments/src/Component/ManageSign.js
index 050ecb021..3fbd113db 100644
--- a/microfrontends/SignDocuments/src/Component/ManageSign.js
+++ b/microfrontends/SignDocuments/src/Component/ManageSign.js
@@ -515,20 +515,20 @@ const ManageSign = () => {
                                     border: "none",
                                     margin: "5px",
                                     borderBottom:
-                                      key == 0 && penColor == "blue"
+                                      key === 0 && penColor === "blue"
                                         ? "2px solid blue"
-                                        : key == 1 && penColor == "red"
+                                        : key === 1 && penColor === "red"
                                         ? "2px solid red"
-                                        : key == 2 && penColor == "black"
+                                        : key === 2 && penColor === "black"
                                         ? "2px solid black"
                                         : "2px solid white",
                                   }}
                                   onClick={() => {
-                                    if (key == 0) {
+                                    if (key === 0) {
                                       setPenColor("blue");
-                                    } else if (key == 1) {
+                                    } else if (key === 1) {
                                       setPenColor("red");
-                                    } else if (key == 2) {
+                                    } else if (key === 2) {
                                       setPenColor("black");
                                     }
                                   }}
@@ -629,24 +629,25 @@ const ManageSign = () => {
                         {allColor.map((data, key) => {
                           return (
                             <img
+                            alt="pen"
                               style={{
                                 border: "none",
                                 margin: "5px",
                                 borderBottom:
-                                  key == 0 && initialPen == "blue"
+                                  key === 0 && initialPen === "blue"
                                     ? "2px solid blue"
-                                    : key == 1 && initialPen == "red"
+                                    : key === 1 && initialPen === "red"
                                     ? "2px solid red"
-                                    : key == 2 && initialPen == "black"
+                                    : key === 2 && initialPen === "black"
                                     ? "2px solid black"
                                     : "2px solid white",
                               }}
                               onClick={() => {
-                                if (key == 0) {
+                                if (key === 0) {
                                   setInitialPen("blue");
-                                } else if (key == 1) {
+                                } else if (key === 1) {
                                   setInitialPen("red");
-                                } else if (key == 2) {
+                                } else if (key === 2) {
                                   setInitialPen("black");
                                 }
                               }}
diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
index 9a88fa42e..f9ff8662e 100644
--- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
+++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
@@ -1,6 +1,5 @@
 import React, { useState, useRef, useEffect } from "react";
 import { themeColor } from "../utils/ThemeColor/backColor";
-
 import { PDFDocument, rgb } from "pdf-lib";
 import "../css/signature.css";
 import axios from "axios";
@@ -16,7 +15,7 @@ import {
   contactBook,
   contractUsers,
   getBase64FromIMG,
-  getBase64FromUrl,
+  getBase64FromUrl
 } from "../utils/Utils";
 import Loader from "./component/loader";
 import HandleError from "./component/HandleError";
@@ -44,7 +43,7 @@ function PdfRequestFiles() {
   const [handleError, setHandleError] = useState();
   const [isLoading, setIsLoading] = useState({
     isLoad: true,
-    message: "This might take some time",
+    message: "This might take some time"
   });
   const [defaultSignImg, setDefaultSignImg] = useState();
   const [isDocId, setIsDocId] = useState(false);
@@ -58,7 +57,11 @@ function PdfRequestFiles() {
   const [currentSigner, setCurrentSigner] = useState(false);
   const [isCompleted, setIsCompleted] = useState({
     isCertificate: false,
-    isModal: false,
+    isModal: false
+  });
+  const [pdfLoadFail, setPdfLoadFail] = useState({
+    status: false,
+    type: "load"
   });
   const [isSigned, setIsSigned] = useState(false);
   const [isExpired, setIsExpired] = useState(false);
@@ -104,7 +107,7 @@ function PdfRequestFiles() {
       setSignerObjectId(objId);
     } else if (contractUsersRes === "Error: Something went wrong!") {
       const loadObj = {
-        isLoad: false,
+        isLoad: false
       };
       setHandleError("Error: Something went wrong!");
       setIsLoading(loadObj);
@@ -126,8 +129,8 @@ function PdfRequestFiles() {
           headers: {
             "Content-Type": "application/json",
             "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-            "X-Parse-Session-Token": localStorage.getItem("accesstoken"),
-          },
+            "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+          }
         }
       )
       .then((Listdata) => {
@@ -149,13 +152,13 @@ function PdfRequestFiles() {
             setIsSigned(true);
             const data = {
               isCertificate: true,
-              isModal: true,
+              isModal: true
             };
             setIsCompleted(data);
           } else if (declined) {
             const currentDecline = {
               currnt: "another",
-              isDeclined: true,
+              isDeclined: true
             };
             setIsDecline(currentDecline);
           } else if (currDate > expireUpdateDate) {
@@ -226,7 +229,7 @@ function PdfRequestFiles() {
           // alert("No data found!");
           setNoData(true);
           const loadObj = {
-            isLoad: false,
+            isLoad: false
           };
           setIsLoading(loadObj);
           setIsUiLoading(false);
@@ -235,7 +238,7 @@ function PdfRequestFiles() {
       .catch((err) => {
         console.log("err", err);
         const loadObj = {
-          isLoad: false,
+          isLoad: false
         };
         setHandleError("Error: Something went wrong!");
         setIsLoading(loadObj);
@@ -251,8 +254,8 @@ function PdfRequestFiles() {
           headers: {
             "Content-Type": "application/json",
             "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-            "X-Parse-Session-Token": localStorage.getItem("accesstoken"),
-          },
+            "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+          }
         }
       )
       .then((Listdata) => {
@@ -263,13 +266,13 @@ function PdfRequestFiles() {
           setDefaultSignImg(res[0].ImageURL);
         }
         const loadObj = {
-          isLoad: false,
+          isLoad: false
         };
         setIsLoading(loadObj);
       })
       .catch((err) => {
         const loadObj = {
-          isLoad: false,
+          isLoad: false
         };
         setHandleError("Error: Something went wrong!");
         setIsLoading(loadObj);
@@ -311,7 +314,7 @@ function PdfRequestFiles() {
         );
 
         const pdfDoc = await PDFDocument.load(existingPdfBytes, {
-          ignoreEncryption: true,
+          ignoreEncryption: true
         });
         let pdfBase64;
 
@@ -336,11 +339,11 @@ function PdfRequestFiles() {
                 y: page.getHeight() - 10,
                 size: fontSize,
                 font,
-                color: rgb(0.5, 0.5, 0.5),
+                color: rgb(0.5, 0.5, 0.5)
               });
             }
             pdfBase64 = await pdfDoc.saveAsBase64({
-              useObjectStreams: false,
+              useObjectStreams: false
             });
           }
 
@@ -423,7 +426,7 @@ function PdfRequestFiles() {
               y: page.getHeight() - 10,
               size: fontSize,
               font,
-              color: rgb(0.5, 0.5, 0.5),
+              color: rgb(0.5, 0.5, 0.5)
             });
           }
 
@@ -474,12 +477,12 @@ function PdfRequestFiles() {
                 x: imgUrlList[id].xPosition,
                 y: page.getHeight() - imgUrlList[id].yPosition - imgHeight,
                 width: imgWidth,
-                height: imgHeight,
+                height: imgHeight
               });
             });
           }
           const pdfBytes = await pdfDoc.saveAsBase64({
-            useObjectStreams: false,
+            useObjectStreams: false
           });
 
           signPdfFun(pdfBytes, documentId, pngUrl);
@@ -524,8 +527,8 @@ function PdfRequestFiles() {
           Bottom: bottomY,
           Width: xyPosData.Width ? xyPosData.Width : 150,
           Height: height,
-          Page: pageNo,
-        },
+          Page: pageNo
+        }
       };
     } else if (
       xyPosData &&
@@ -534,7 +537,7 @@ function PdfRequestFiles() {
     ) {
       signgleSign = {
         pdfFile: base64Url,
-        docId: documentId,
+        docId: documentId
       };
     }
 
@@ -546,8 +549,8 @@ function PdfRequestFiles() {
           headers: {
             "Content-Type": "application/json",
             "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-            sessionToken: localStorage.getItem("accesstoken"),
-          },
+            sessionToken: localStorage.getItem("accesstoken")
+          }
         }
       )
       .then((Listdata) => {
@@ -569,6 +572,10 @@ function PdfRequestFiles() {
   };
   //function for get pdf page details
   const pageDetails = async (pdf) => {
+    const load = {
+      status: true
+    };
+    setPdfLoadFail(load);
     pdf.getPage(1).then((pdfPage) => {
       const pageWidth = pdfPage.view[2];
 
@@ -666,7 +673,7 @@ function PdfRequestFiles() {
             Width: newWidth,
             Height: nweHeight,
             SignUrl: image.src,
-            ImageType: image.imgType,
+            ImageType: image.imgType
           };
         }
         return url;
@@ -715,7 +722,7 @@ function PdfRequestFiles() {
             Width: newWidth,
             Height: nweHeight,
             SignUrl: image.src,
-            ImageType: image.imgType,
+            ImageType: image.imgType
           };
         }
         return url;
@@ -801,7 +808,7 @@ function PdfRequestFiles() {
   //function for set decline true on press decline button
   const declineDoc = async () => {
     const data = {
-      IsDeclined: true,
+      IsDeclined: true
     };
     setIsUiLoading(true);
 
@@ -815,8 +822,8 @@ function PdfRequestFiles() {
           headers: {
             "Content-Type": "application/json",
             "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-            "X-Parse-Session-Token": localStorage.getItem("accesstoken"),
-          },
+            "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+          }
         }
       )
       .then((result) => {
@@ -824,7 +831,7 @@ function PdfRequestFiles() {
         if (res) {
           const currentDecline = {
             currnt: "YouDeclined",
-            isDeclined: true,
+            isDeclined: true
           };
           setIsDecline(currentDecline);
           setIsUiLoading(false);
@@ -859,7 +866,7 @@ function PdfRequestFiles() {
                 alignItems: "center",
                 zIndex: "20",
                 backgroundColor: "#e6f2f2",
-                opacity: 0.8,
+                opacity: 0.8
               }}
             >
               <img
@@ -886,7 +893,7 @@ function PdfRequestFiles() {
             <div
               style={{
                 marginLeft: pdfOriginalWidth > 500 && "20px",
-                marginRight: pdfOriginalWidth > 500 && "20px",
+                marginRight: pdfOriginalWidth > 500 && "20px"
               }}
             >
               <Modal show={isExpired}>
@@ -927,7 +934,7 @@ function PdfRequestFiles() {
                     <>
                       <button
                         style={{
-                          color: "black",
+                          color: "black"
                         }}
                         type="button"
                         className="finishBtn"
@@ -937,7 +944,7 @@ function PdfRequestFiles() {
                       </button>
                       <button
                         style={{
-                          background: "#de4337",
+                          background: "#de4337"
                         }}
                         type="button"
                         className="finishBtn"
@@ -965,7 +972,7 @@ function PdfRequestFiles() {
                 <Modal.Footer>
                   <button
                     style={{
-                      color: "black",
+                      color: "black"
                     }}
                     type="button"
                     className="finishBtn"
@@ -1027,6 +1034,8 @@ function PdfRequestFiles() {
                 signerObjectId={signerObjectId}
                 signedSigners={signedSigners}
                 setCurrentSigner={setCurrentSigner}
+                setPdfLoadFail={setPdfLoadFail}
+                pdfLoadFail={pdfLoadFail}
               />
             </div>
             <div>
@@ -1035,7 +1044,7 @@ function PdfRequestFiles() {
                   <>
                     <div
                       style={{
-                        background: themeColor(),
+                        background: themeColor()
                         //  color:"white"
                       }}
                       className="signedStyle"
@@ -1051,7 +1060,7 @@ function PdfRequestFiles() {
                               flexDirection: "row",
                               padding: "10px",
 
-                              background: checkSignerBackColor(obj),
+                              background: checkSignerBackColor(obj)
                             }}
                             key={ind}
                           >
@@ -1065,14 +1074,14 @@ function PdfRequestFiles() {
                                 borderRadius: 30 / 2,
                                 justifyContent: "center",
                                 alignItems: "center",
-                                marginRight: "20px",
+                                marginRight: "20px"
                               }}
                             >
                               <span
                                 style={{
                                   fontSize: "10px",
                                   textAlign: "center",
-                                  fontWeight: "bold",
+                                  fontWeight: "bold"
                                 }}
                               >
                                 {" "}
@@ -1082,7 +1091,7 @@ function PdfRequestFiles() {
                             <div
                               style={{
                                 display: "flex",
-                                flexDirection: "column",
+                                flexDirection: "column"
                               }}
                             >
                               <span className="userName">{obj.Name}</span>
@@ -1103,7 +1112,7 @@ function PdfRequestFiles() {
                         color: "white",
                         padding: "5px",
                         fontFamily: "sans-serif",
-                        marginTop: signedSigners.length > 0 && "20px",
+                        marginTop: signedSigners.length > 0 && "20px"
                       }}
                     >
                       Yet To Sign
@@ -1116,7 +1125,7 @@ function PdfRequestFiles() {
                               display: "flex",
                               flexDirection: "row",
                               padding: "10px",
-                              background: checkSignerBackColor(obj),
+                              background: checkSignerBackColor(obj)
                             }}
                             key={ind}
                           >
@@ -1130,14 +1139,14 @@ function PdfRequestFiles() {
                                 borderRadius: 30 / 2,
                                 justifyContent: "center",
                                 alignItems: "center",
-                                marginRight: "20px",
+                                marginRight: "20px"
                               }}
                             >
                               <span
                                 style={{
                                   fontSize: "8px",
                                   textAlign: "center",
-                                  fontWeight: "bold",
+                                  fontWeight: "bold"
                                 }}
                               >
                                 {" "}
@@ -1147,7 +1156,7 @@ function PdfRequestFiles() {
                             <div
                               style={{
                                 display: "flex",
-                                flexDirection: "column",
+                                flexDirection: "column"
                               }}
                             >
                               <span className="userName">{obj.Name}</span>
diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
index 4b761d7ff..4e91eab20 100644
--- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
+++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
@@ -1,5 +1,4 @@
 import React, { useState, useRef, useEffect } from "react";
-
 import { PDFDocument, rgb } from "pdf-lib";
 import "../css/./signature.css";
 import sign from "../assests/sign3.png";
@@ -58,7 +57,7 @@ function SignYourSelf() {
   const [documentStatus, setDocumentStatus] = useState({ isCompleted: false });
   const [isLoading, setIsLoading] = useState({
     isLoad: true,
-    message: "This might take some time",
+    message: "This might take some time"
   });
   const [handleError, setHandleError] = useState();
   const [isDragging, setIsDragging] = useState(false);
@@ -70,7 +69,11 @@ function SignYourSelf() {
   const [noData, setNoData] = useState(false);
   const [contractName, setContractName] = useState("");
   const [showAlreadySignDoc, setShowAlreadySignDoc] = useState({
+    status: false
+  });
+  const [pdfLoadFail, setPdfLoadFail] = useState({
     status: false,
+    type: "load"
   });
 
   const nodeRef = useRef(null);
@@ -78,8 +81,8 @@ function SignYourSelf() {
     accept: "BOX",
     drop: (item, monitor) => addPositionOfSignature(item, monitor),
     collect: (monitor) => ({
-      isOver: !!monitor.isOver(),
-    }),
+      isOver: !!monitor.isOver()
+    })
   });
 
   const pdfRef = useRef();
@@ -90,11 +93,11 @@ function SignYourSelf() {
     item: {
       type: "BOX",
       id: 1,
-      text: "drag me",
+      text: "drag me"
     },
     collect: (monitor) => ({
-      isDragSign: !!monitor.isDragging(),
-    }),
+      isDragSign: !!monitor.isDragging()
+    })
   });
 
   const [{ isDragStamp }, dragStamp] = useDrag({
@@ -103,11 +106,11 @@ function SignYourSelf() {
     item: {
       type: "BOX",
       id: 2,
-      text: "drag me",
+      text: "drag me"
     },
     collect: (monitor) => ({
-      isDragStamp: !!monitor.isDragging(),
-    }),
+      isDragStamp: !!monitor.isDragging()
+    })
   });
   const [{ isDragSignatureSS }, dragSignatureSS] = useDrag({
     type: "BOX",
@@ -115,11 +118,11 @@ function SignYourSelf() {
     item: {
       type: "BOX",
       id: 3,
-      text: "drag me",
+      text: "drag me"
     },
     collect: (monitor) => ({
-      isDragSignatureSS: !!monitor.isDragging(),
-    }),
+      isDragSignatureSS: !!monitor.isDragging()
+    })
   });
 
   const [{ isDragStampSS }, dragStampSS] = useDrag({
@@ -128,11 +131,11 @@ function SignYourSelf() {
     item: {
       type: "BOX",
       id: 4,
-      text: "drag me",
+      text: "drag me"
     },
     collect: (monitor) => ({
-      isDragStampSS: !!monitor.isDragging(),
-    }),
+      isDragStampSS: !!monitor.isDragging()
+    })
   });
 
   const index = xyPostion.findIndex((object) => {
@@ -181,8 +184,8 @@ function SignYourSelf() {
           headers: {
             "Content-Type": "application/json",
             "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-            "X-Parse-Session-Token": localStorage.getItem("accesstoken"),
-          },
+            "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+          }
         }
       )
       .then((Listdata) => {
@@ -194,13 +197,13 @@ function SignYourSelf() {
           const isCompleted = res[0].IsCompleted && res[0].IsCompleted;
           if (isCompleted) {
             const docStatus = {
-              isCompleted: isCompleted,
+              isCompleted: isCompleted
             };
 
             setDocumentStatus(docStatus);
             const alreadySign = {
               status: true,
-              mssg: "You have successfully signed the document!",
+              mssg: "You have successfully signed the document!"
             };
             setShowAlreadySignDoc(alreadySign);
             setPdfUrl(res[0].SignedUrl);
@@ -209,14 +212,14 @@ function SignYourSelf() {
           setNoData(true);
 
           const loadObj = {
-            isLoad: false,
+            isLoad: false
           };
           setIsLoading(loadObj);
         }
       })
       .catch((err) => {
         const loadObj = {
-          isLoad: false,
+          isLoad: false
         };
         setHandleError("Error: Something went wrong!");
         setIsLoading(loadObj);
@@ -232,8 +235,8 @@ function SignYourSelf() {
           headers: {
             "Content-Type": "application/json",
             "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-            "X-Parse-Session-Token": localStorage.getItem("accesstoken"),
-          },
+            "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+          }
         }
       )
       .then((Listdata) => {
@@ -246,14 +249,18 @@ function SignYourSelf() {
       })
       .catch((err) => {
         const loadObj = {
-          isLoad: false,
+          isLoad: false
         };
         setHandleError("Error: Something went wrong!");
         setIsLoading(loadObj);
       });
     const contractUsersRes = await contractUsers(jsonSender.objectId);
 
-    if (contractUsersRes && contractUsersRes[0]) {
+    if (
+      contractUsersRes !== "Error: Something went wrong!" &&
+      contractUsersRes &&
+      contractUsersRes[0]
+    ) {
       setContractName("_Users");
       setSignerUserId(contractUsersRes[0].objectId);
       const tourstatuss =
@@ -269,12 +276,12 @@ function SignYourSelf() {
         }
       }
       const loadObj = {
-        isLoad: false,
+        isLoad: false
       };
       setIsLoading(loadObj);
     } else if (contractUsersRes === "Error: Something went wrong!") {
       const loadObj = {
-        isLoad: false,
+        isLoad: false
       };
       setHandleError("Error: Something went wrong!");
       setIsLoading(loadObj);
@@ -299,7 +306,7 @@ function SignYourSelf() {
         }
       }
       const loadObj = {
-        isLoad: false,
+        isLoad: false
       };
       setIsLoading(loadObj);
     }
@@ -366,7 +373,7 @@ function SignYourSelf() {
         key: key,
         isStamp: monitor,
 
-        yBottom: window.innerHeight / 2 - 60,
+        yBottom: window.innerHeight / 2 - 60
       };
 
       dropData.push(dropObj);
@@ -395,7 +402,7 @@ function SignYourSelf() {
         isStamp: isDragStamp || isDragStampSS ? true : false,
         firstXPos: signBtnPosition[0] && signBtnPosition[0].xPos,
         firstYPos: signBtnPosition[0] && signBtnPosition[0].yPos,
-        yBottom: ybottom,
+        yBottom: ybottom
       };
 
       dropData.push(dropObj);
@@ -416,7 +423,7 @@ function SignYourSelf() {
       const newSignPos = updateData.concat(dropData);
       let xyPos = {
         pageNumber: pageNumber,
-        pos: newSignPos,
+        pos: newSignPos
       };
       xyPostion.splice(index, 1, xyPos);
       setIsSignPad(true);
@@ -425,7 +432,7 @@ function SignYourSelf() {
     } else {
       const xyPos = {
         pageNumber: pageNumber,
-        pos: dropData,
+        pos: dropData
       };
       setXyPostion((prev) => [...prev, xyPos]);
       setIsSignPad(true);
@@ -456,7 +463,7 @@ function SignYourSelf() {
       }, 3000);
       const loadObj = {
         isLoad: true,
-        message: "This might take some time",
+        message: "This might take some time"
       };
       setIsLoading(loadObj);
       const url = pdfDetails[0] && pdfDetails[0].URL;
@@ -467,7 +474,7 @@ function SignYourSelf() {
 
       // Load a PDFDocument from the existing PDF bytes
       const pdfDoc = await PDFDocument.load(existingPdfBytes, {
-        ignoreEncryption: true,
+        ignoreEncryption: true
       });
       const pngUrl = xyPostion;
       //checking if signature is only one then send image url in jpeg formate to server
@@ -488,11 +495,11 @@ function SignYourSelf() {
             y: page.getHeight() - 10,
             size: fontSize,
             font,
-            color: rgb(0.5, 0.5, 0.5),
+            color: rgb(0.5, 0.5, 0.5)
           });
         }
         const pdfBase64 = await pdfDoc.saveAsBase64({
-          useObjectStreams: false,
+          useObjectStreams: false
         });
         for (let i = 0; i < xyPostion.length; i++) {
           const imgUrlList = xyPostion[i].pos;
@@ -568,7 +575,7 @@ function SignYourSelf() {
             y: page.getHeight() - 10,
             size: fontSize,
             font,
-            color: rgb(0.5, 0.5, 0.5),
+            color: rgb(0.5, 0.5, 0.5)
           });
         }
         for (let i = 0; i < pngUrl.length; i++) {
@@ -621,7 +628,7 @@ function SignYourSelf() {
               y:
                 page.getHeight() - imgUrlList[id].yPosition * scale - imgHeight,
               width: imgWidth,
-              height: imgHeight,
+              height: imgHeight
             });
           });
         }
@@ -668,13 +675,13 @@ function SignYourSelf() {
           Bottom: bottomY,
           Width: xyPosData.Width ? xyPosData.Width : 150,
           Height: height,
-          Page: pageNo,
-        },
+          Page: pageNo
+        }
       };
     } else if (xyPostion.length > 0 && xyPostion[0].pos.length > 0) {
       singleSign = {
         pdfFile: base64Url,
-        docId: documentId,
+        docId: documentId
       };
     }
     // console.log("data",singleSign)
@@ -683,9 +690,9 @@ function SignYourSelf() {
         headers: {
           "Content-Type": "application/json",
           "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-          sessionToken: localStorage.getItem("accesstoken"),
+          sessionToken: localStorage.getItem("accesstoken")
           // sessiontoken,
-        },
+        }
       })
       .then((Listdata) => {
         const json = Listdata.data;
@@ -693,12 +700,12 @@ function SignYourSelf() {
         setPdfUrl(json.result.data);
         if (json.result.data) {
           const docStatus = {
-            isCompleted: true,
+            isCompleted: true
           };
 
           setDocumentStatus(docStatus);
           const loadObj = {
-            isLoad: false,
+            isLoad: false
           };
           setIsLoading(loadObj);
         }
@@ -741,7 +748,7 @@ function SignYourSelf() {
                 xPosition: dragElement.x,
                 yPosition: dragElement.y,
                 isDrag: true,
-                yBottom: ybottom,
+                yBottom: ybottom
               };
             }
             return url;
@@ -764,6 +771,10 @@ function SignYourSelf() {
 
   //function for get pdf page details
   const pageDetails = async (pdf) => {
+    const load = {
+      status: true
+    };
+    setPdfLoadFail(load);
     pdf.getPage(1).then((pdfPage) => {
       const pageWidth = pdfPage.view[2];
 
@@ -848,7 +859,7 @@ function SignYourSelf() {
 
     const xyPosition = {
       xPos: mouseX,
-      yPos: mouseY,
+      yPos: mouseY
     };
 
     setXYSignature(xyPosition);
@@ -877,7 +888,7 @@ function SignYourSelf() {
             ...url,
             Width: ref.offsetWidth,
             Height: ref.offsetHeight,
-            xPosition: position.x,
+            xPosition: position.x
           };
         }
         return url;
@@ -901,7 +912,7 @@ function SignYourSelf() {
           return {
             ...url,
             Width: ref.offsetWidth,
-            Height: ref.offsetHeight,
+            Height: ref.offsetHeight
           };
         }
         return url;
@@ -975,7 +986,7 @@ function SignYourSelf() {
 
       const newXypos = {
         pageNumber: getPageNo,
-        pos: addSign,
+        pos: addSign
       };
       xyDefaultPos.push(newXypos);
     }
@@ -989,14 +1000,14 @@ function SignYourSelf() {
       selector: '[data-tut="reactourFirst"]',
       content: `Drag the signature or stamp placeholder onto the PDF to choose your desired signing location.`,
       position: "top",
-      style: { fontSize: "13px" },
+      style: { fontSize: "13px" }
     },
     {
       selector: '[data-tut="reactourSecond"]',
       content: `Drag and drop anywhere in this area. You can resize and move it later.`,
       position: "top",
-      style: { fontSize: "13px" },
-    },
+      style: { fontSize: "13px" }
+    }
   ];
 
   //function for update TourStatus
@@ -1023,14 +1034,14 @@ function SignYourSelf() {
           "_appName"
         )}${contractName}/${signerUserId}`,
         {
-          TourStatus: updatedTourStatus,
+          TourStatus: updatedTourStatus
         },
         {
           headers: {
             "Content-Type": "application/json",
             "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-            sessionToken: localStorage.getItem("accesstoken"),
-          },
+            sessionToken: localStorage.getItem("accesstoken")
+          }
         }
       )
       .then((Listdata) => {
@@ -1054,7 +1065,7 @@ function SignYourSelf() {
       ) : (
         <div className="signatureContainer">
           {/* this component used for UI interaction and show their functionality */}
-          {!checkTourStatus && (
+          {pdfLoadFail && !checkTourStatus && (
             <Tour
               onRequestClose={closeTour}
               steps={tourConfig}
@@ -1079,7 +1090,7 @@ function SignYourSelf() {
           <div
             style={{
               marginLeft: pdfOriginalWidth > 500 && "20px",
-              marginRight: pdfOriginalWidth > 500 && "20px",
+              marginRight: pdfOriginalWidth > 500 && "20px"
             }}
           >
             {/* this modal is used show this document is already sign */}
@@ -1099,7 +1110,7 @@ function SignYourSelf() {
                     borderRadius: "0px",
                     border: "1.5px solid #e3e2e1",
                     fontWeight: "600",
-                    color: "black",
+                    color: "black"
                   }}
                   className="btn"
                   onClick={() => setShowAlreadySignDoc({ status: false })}
@@ -1110,7 +1121,7 @@ function SignYourSelf() {
                   <button
                     onClick={() => addDefaultSignature()}
                     style={{
-                      background: themeColor(),
+                      background: themeColor()
                     }}
                     type="button"
                     className="finishBtn"
@@ -1184,6 +1195,8 @@ function SignYourSelf() {
                 pdfUrl={pdfUrl}
                 numPages={numPages}
                 pageDetails={pageDetails}
+                setPdfLoadFail={setPdfLoadFail}
+                pdfLoadFail={pdfLoadFail}
               />
             </div>
           </div>
diff --git a/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js b/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js
index 7fc4cd005..828266f2e 100644
--- a/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js
+++ b/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import * as Select from "@radix-ui/react-select";
 import classnames from "classnames";
 
diff --git a/microfrontends/SignDocuments/src/Component/component/header.js b/microfrontends/SignDocuments/src/Component/component/header.js
index a6c36f6bd..7b8858197 100644
--- a/microfrontends/SignDocuments/src/Component/component/header.js
+++ b/microfrontends/SignDocuments/src/Component/component/header.js
@@ -224,11 +224,13 @@ function Header({
                     )}
                     {isPlaceholder ? (
                       <div
+                     
                         onClick={() => {
                           if (!isMailSend) {
                             alertSendEmail();
                           }
                         }}
+                      
                         style={{
                           color: isMailSend ? "gray" : themeColor(),
                           border: "none",
@@ -241,6 +243,7 @@ function Header({
                       </div>
                     ) : (
                       <div
+                      data-tut="reactourThird"
                         onClick={() => {
                           if (!pdfUrl) {
                             embedImages();
diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js
index 03258c263..aaa10a785 100644
--- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js
+++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js
@@ -39,6 +39,7 @@ function RenderPdf({
   signedSigners,
   setPdfLoadFail,
   placeholder,
+  pdfLoadFail
 }) {
   const isMobile = window.innerWidth < 712;
 
@@ -72,7 +73,7 @@ function RenderPdf({
                         topRight: false,
                         bottomRight: false,
                         bottomLeft: false,
-                        topLeft: false,
+                        topLeft: false
                       }}
                       bounds="parent"
                       style={{
@@ -87,16 +88,18 @@ function RenderPdf({
                         background: "#daebe0",
                         textAlign: "center",
                         justifyContent: "center",
-                        borderWidth: "0.2px",
+                        borderWidth: "0.2px"
                       }}
                       size={{
                         width: pos.Width ? pos.Width : 150,
-                        height: pos.Height ? pos.Height : 60,
+                        height: pos.Height ? pos.Height : 60
                       }}
                       lockAspectRatio={pos.Width && 2.5}
                       default={{
-                        x: pos.xPosition,
-                        y: pos.yPosition,
+                        x: pos.scale
+                          ? pos.xPosition * pos.scale
+                          : pos.xPosition,
+                        y: pos.scale ? pos.yPosition * pos.scale : pos.yPosition
                       }}
                       onClick={() => {
                         setIsSignPad(true);
@@ -114,7 +117,7 @@ function RenderPdf({
                           style={{
                             width: "100%",
                             height: "100%",
-                            objectFit: "contain",
+                            objectFit: "contain"
                           }}
                         />
                       </div>
@@ -131,7 +134,7 @@ function RenderPdf({
                       topRight: false,
                       bottomRight: false,
                       bottomLeft: false,
-                      topLeft: false,
+                      topLeft: false
                     }}
                     key={pos.key}
                     bounds="parent"
@@ -154,15 +157,15 @@ function RenderPdf({
                       background: data.blockColor,
                       textAlign: "center",
                       justifyContent: "center",
-                      borderWidth: "0.2px",
+                      borderWidth: "0.2px"
                     }}
                     default={{
-                      x: pos.xPosition,
-                      y: pos.yPosition,
+                      x: pos.scale ? pos.xPosition * pos.scale : pos.xPosition,
+                      y: pos.scale ? pos.yPosition * pos.scale : pos.yPosition
                     }}
                     size={{
                       width: pos.Width ? pos.Width : 150,
-                      height: pos.Height ? pos.Height : 60,
+                      height: pos.Height ? pos.Height : 60
                     }}
                     lockAspectRatio={pos.Width ? pos.Width / pos.Height : 2.5}
                   >
@@ -172,7 +175,7 @@ function RenderPdf({
                         color: "black",
                         fontWeight: "600",
                         // justifyContent: "center",
-                        marginTop: "0px",
+                        marginTop: "0px"
                       }}
                     >
                       {pos.isStamp ? "stamp" : "signature"}
@@ -203,7 +206,7 @@ function RenderPdf({
         // >
         <div
           style={{
-            border: "0.1px solid #ebe8e8",
+            border: "0.1px solid #ebe8e8"
             // marginTop: "50px",
 
             //  height:window.innerHeight-100+'px',
@@ -226,582 +229,8 @@ function RenderPdf({
               </Toast.Body>
             </Toast>
           </div>
-          {recipient
-            ? !pdfUrl &&
-              !isAlreadySign.mssg &&
-              xyPostion.length > 0 &&
-              xyPostion.map((data, ind) => {
-                return (
-                  <React.Fragment key={ind}>
-                    {data.pageNumber === pageNumber &&
-                      data.pos.map((pos) => {
-                        return pos && pos.SignUrl ? (
-                          <Rnd
-                            disableDragging={true}
-                            enableResizing={{
-                              top: false,
-                              right: false,
-                              bottom: false,
-                              left: false,
-                              topRight: false,
-                              bottomRight: false,
-                              bottomLeft: false,
-                              topLeft: false,
-                            }}
-                            key={pos.key}
-                            bounds="parent"
-                            style={{
-                              padding: "0px",
-                              cursor: "all-scroll",
-                              zIndex: 1,
-                              position: "absolute",
-                              borderStyle: "dashed",
-                              width: "150px",
-                              height: "60px",
-                              borderColor: themeColor(),
-                              background: "#daebe0",
-                              textAlign: "center",
-                              justifyContent: "center",
-                              borderWidth: "0.2px",
-                            }}
-                            size={{
-                              width: pos.Width ? pos.Width : 150,
-                              height: pos.Height ? pos.Height : 60,
-                            }}
-                            lockAspectRatio={pos.Width && 2.5}
-                            default={{
-                              x: pos.xPosition,
-                              y: pos.yPosition,
-                            }}
-                            onClick={() => {
-                              setIsSignPad(true);
-                              setSignKey(pos.key);
-                            }}
-                          >
-                            <div style={{ pointerEvents: "none" }}>
-                              <img
-                                alt="no img"
-                                onClick={() => {
-                                  setIsSignPad(true);
-                                  setSignKey(pos.key);
-                                }}
-                                src={pos.SignUrl}
-                                style={{
-                                  width: "100%",
-                                  height: "100%",
-                                  objectFit: "contain",
-                                }}
-                              />
-                            </div>
-                          </Rnd>
-                        ) : (
-                          <Rnd
-                            data-tut="reactourSecond"
-                            enableResizing={{
-                              top: false,
-                              right: false,
-                              bottom: false,
-                              left: false,
-                              topRight: false,
-                              bottomRight: false,
-                              bottomLeft: false,
-                              topLeft: false,
-                            }}
-                            key={pos.key}
-                            bounds="parent"
-                            style={{
-                              padding: "0px",
-                              cursor: "all-scroll",
-                              zIndex: 1,
-                              position: "absolute",
-                              borderStyle: "dashed",
-                              width: "150px",
-                              height: "60px",
-                              borderColor: themeColor(),
-                              background: "#c1dee0",
-                              textAlign: "center",
-                              justifyContent: "center",
-                              borderWidth: "0.2px",
-                            }}
-                            size={{
-                              width: pos.Width ? pos.Width : 150,
-                              height: pos.Height ? pos.Height : 60,
-                            }}
-                            disableDragging={true}
-                            default={{
-                              x: pos.xPosition,
-                              y: pos.yPosition,
-                            }}
-                            onClick={() => {
-                              setIsSignPad(true);
-                              setSignKey(pos.key);
-                              setIsStamp(pos.isStamp);
-                            }}
-                          >
-                            <div
-                              style={{
-                                fontSize: "12px",
-                                color: "black",
-                                fontWeight: "600",
-                                justifyContent: "center",
-                                marginTop: "0px",
-                              }}
-                            >
-                              {pos.isStamp ? "stamp" : "signature"}
-                            </div>
-                          </Rnd>
-                        );
-                      })}
-                  </React.Fragment>
-                );
-              })
-            : pdfRequest
-            ? signerPos.map((data, key) => {
-                return (
-                  <React.Fragment key={key}>
-                    {checkSignedSignes(data)}
-                  </React.Fragment>
-                );
-              })
-            : placeholder
-            ? signerPos.map((data, ind) => {
-                return (
-                  <React.Fragment key={ind}>
-                    {data.placeHolder.map((placeData, index) => {
-                      return (
-                        <React.Fragment key={index}>
-                          {placeData.pageNumber === pageNumber &&
-                            placeData.pos.map((pos) => {
-                              return (
-                                <Rnd
-                                  key={pos.key}
-                                  bounds="parent"
-                                  style={{
-                                    padding: "0px",
-                                    cursor: "all-scroll",
-                                    zIndex: 1,
-                                    position: "absolute",
-                                    borderStyle: "dashed",
-                                    width: "200px",
-                                    height: "30px",
-                                    borderColor: themeColor(),
-                                    background: data.blockColor,
-                                    textAlign: "center",
-                                    justifyContent: "center",
-                                    borderWidth: "0.2px",
-                                  }}
-                                  onDrag={() =>
-                                    handleTabDrag(pos.key, data.signerObjId)
-                                  }
-                                  size={{
-                                    width: pos.Width ? pos.Width : 150,
-                                    height: pos.Height ? pos.Height : 60,
-                                  }}
-                                  lockAspectRatio={
-                                    pos.Width ? pos.Width / pos.Height : 2.5
-                                  }
-                                  resizeHandleStyles={{
-                                    bottom: { display: "none" },
-                                    right: { display: "none" },
-                                    bottomRight: { display: "block" },
-                                  }}
-                                  onDragStop={handleStop}
-                                  default={{
-                                    x: pos.xPosition,
-                                    y: pos.yPosition,
-                                  }}
-                                  onResize={(
-                                    e,
-                                    direction,
-                                    ref,
-                                    delta,
-                                    position
-                                  ) => {
-                                    handleImageResize(
-                                      ref,
-                                      pos.key,
-                                      data.signerObjId,
-                                      position
-                                    );
-                                  }}
-                                >
-                                  <div
-                                    onTouchStart={(e) => {
-                                      e.stopPropagation();
-                                      handleDeleteSign(
-                                        pos.key,
-                                        data.signerObjId
-                                      );
-                                    }}
-                                    // onClick={(e) => {
-                                    //   e.stopPropagation();
-                                    //   handleDeleteSign(
-                                    //     pos.key,
-                                    //     data.signerObjId
-                                    //   );
-                                    // }}
-                                    style={{
-                                      position: "absolute",
-                                      right: 0,
-                                      display: "inline-block",
-                                      background: themeColor(),
-                                      cursor: "pointer",
-                                      padding: "0px 10px",
-                                      zIndex: 10,
-                                    }}
-                                  >
-                                    x
-                                  </div>
-                                  <div
-                                    style={{
-                                      fontSize: "12px",
-                                      color: "black",
-                                      fontWeight: "600",
-                                      // justifyContent: "center",
-                                      marginTop: "0px",
-                                    }}
-                                  >
-                                    {pos.isStamp ? "stamp" : "signature"}
-                                  </div>
-                                </Rnd>
-                              );
-                            })}
-                        </React.Fragment>
-                      );
-                    })}
-                  </React.Fragment>
-                );
-              })
-            : xyPostion.map((data, ind) => {
-                return (
-                  <React.Fragment key={ind}>
-                    {data.pageNumber === pageNumber &&
-                      data.pos.map((pos) => {
-                        return pos && pos.SignUrl ? (
-                          <Rnd
-                            lockAspectRatio={
-                              pos.Width ? pos.Width / pos.Height : 2.5
-                            }
-                            bounds="parent"
-                            ref={nodeRef}
-                            key={pos.key}
-                            style={{
-                              padding: "0px",
-                              cursor: "all-scroll",
-                              zIndex: 1,
-                              position: "absolute",
-                              borderStyle: "dashed",
-                              width: "150px",
-                              height: "60px",
-                              borderColor: themeColor(),
-                              background: "#daebe0",
-                              textAlign: "center",
-                              justifyContent: "center",
-                              borderWidth: "0.2px",
-                              overflow: "hidden",
-                              userSelect: "none",
-                            }}
-                            size={{
-                              width: pos.Width ? pos.Width : 151,
-                              height: pos.Height ? pos.Height : 61,
-                            }}
-                            default={{
-                              x: pos.xPosition,
-                              y: pos.yPosition,
-                            }}
-                            onDrag={() => handleTabDrag(pos.key)}
-                            onDragStop={handleStop}
-                            onResize={(e, direction, ref, delta, position) => {
-                              handleImageResize(
-                                ref,
-                                pos.key,
-                                direction,
-                                position
-                              );
-                            }}
-                          >
-                            {" "}
-                            <div
-                              // className="dragElm"
-                              onTouchStart={(e) => {
-                                if (!isDragging) {
-                                  setTimeout(() => {
-                                    e.stopPropagation();
-                                    setIsSignPad(true);
-                                    setSignKey(pos.key);
-                                    setIsStamp(pos.isStamp);
-                                  }, 500);
-                                }
-                              }}
-                            >
-                              <div
-                                // className="dragElm"
-                                ref={nodeRef}
-                                onTouchStart={(e) => {
-                                  e.stopPropagation();
-                                  handleDeleteSign(pos.key);
-                                  setIsStamp(false);
-                                }}
-                                // onClick={(e) => {
-                                //   e.stopPropagation();
-                                //   handleDeleteSign(pos.key);
-                                //   setIsStamp(false);
-                                // }}
-                                style={{
-                                  position: "absolute",
-                                  right: 0,
-                                  display: "inline-block",
-                                  background: themeColor(),
-                                  cursor: "pointer",
-                                  padding: "0px 10px",
-                                }}
-                              >
-                                x
-                              </div>
-                              <div style={{ pointerEvents: "none" }}>
-                                <img
-                                  alt="signimg"
-                                  onClick={(e) => {
-                                    setSignKey(pos.key);
-                                    setIsSignPad(true);
-                                    setIsStamp(pos.isStamp);
-                                  }}
-                                  src={pos.SignUrl}
-                                  style={{
-                                    width: "100%",
-                                    height: "100%",
-                                    objectFit: "contain",
-                                  }}
-                                />
-                              </div>
-                            </div>
-                          </Rnd>
-                        ) : (
-                          <>
-                            <Rnd
-                              allowAnyClick
-                              // cancel=".dragElm"
-                              ref={nodeRef}
-                              key={pos.key}
-                              // lockAspectRatio={2.5}
-                              lockAspectRatio={
-                                pos.Width ? pos.Width / pos.Height : 2.5
-                              }
-                              bounds="parent"
-                              style={{
-                                padding: "0px",
-                                cursor: "all-scroll",
-                                zIndex: 10,
-                                position: "absolute",
-                                borderStyle: "dashed",
-                                width: "150px",
-                                height: "60px",
-                                borderColor: themeColor(),
-                                background: "#daebe0",
-                                textAlign: "center",
-                                justifyContent: "center",
-                                borderWidth: "0.2px",
-                                overflow: "hidden",
-                              }}
-                              onDrag={(e) => {
-                                handleTabDrag(pos.key, e);
-                              }}
-                              // onMouseUp={(e) => handleTabDrag(pos.key, e)}
-                              onDragStop={handleStop}
-                              size={{
-                                width: pos.Width ? pos.Width : 150,
-                                height: pos.Height ? pos.Height : 60,
-                              }}
-                              // onMouseDown={(e) => {
-
-                              //   if (!isDragging) {
-                              //     console.log("child m=event",isDragging);
-                              //     setTimeout(() => {
-                              //       if(isDeleted){
-                              //         setIsSignPad(true);
-                              //         // setIsSignPad(false)
-                              //         setSignKey(pos.key);
-                              //         setIsStamp(pos.isStamp);
-
-                              //       }else{
-                              //          setIsSignPad(true);
-                              //         // setIsSignPad(false)
-                              //         setSignKey(pos.key);
-                              //         setIsStamp(pos.isStamp);
-                              //       }
-
-                              //     }, 500);
-                              //   }
-                              // }}
-                              default={{
-                                x: pos.xPosition,
-                                y: pos.yPosition,
-                              }}
-
-                              // onClick={(e) => {
-                              //   if (!isDragging) {
-                              //     e.stopPropagation();
-                              //     setIsSignPad(true);
-                              //     setSignKey(pos.key);
-                              //     setIsStamp(pos.isStamp);
-                              //   }
-                              // }}
-                            >
-                              <div
-                                onTouchStart={(e) => {
-                                  if (!isDragging) {
-                                    setTimeout(() => {
-                                      setIsSignPad(true);
-                                      //setIsSignPad(false)
-                                      setSignKey(pos.key);
-                                      setIsStamp(pos.isStamp);
-                                    }, 500);
-                                  }
-                                }}
-                                className="dragElm"
-                                style={{
-                                  padding: "0px",
-                                  cursor: "all-scroll",
-                                  zIndex: 20,
-                                  position: "absolute",
-                                  borderStyle: "dashed",
-                                  width: "150px",
-                                  height: "60px",
-                                  borderColor: themeColor(),
-                                  background: "#daebe0",
-                                  textAlign: "center",
-                                  justifyContent: "center",
-                                  borderWidth: "0.2px",
-                                  overflow: "hidden",
-                                }}
-                              >
-                                <div
-                                  //  onMouseDown={(e) => {
-                                  //    console.log("child m=event")
-                                  //    e.preventDefault();
-                                  //    setIsDragging(true)
-
-                                  //    handleDeleteSign(pos.key);
-                                  //    setIsStamp(false);
-                                  //    setTimeout(()=>{
-                                  //      setIsDragging(false)
-                                  //    },2000)
-                                  //  }}
-                                  onTouchStart={(e) => {
-                                    e.stopPropagation();
-                                    e.preventDefault();
-                                    // setIsDragging(true);
-
-                                    handleDeleteSign(pos.key);
-                                    setIsStamp(false);
-                                  }}
-                                  onClick={(e) => {
-                                    e.stopPropagation(); // Prevent further event propagation
-                                  }}
-                                  style={{
-                                    position: "absolute",
-                                    right: 0,
-                                    display: "inline-block",
-                                    background: themeColor(),
-                                    cursor: "pointer",
-                                    padding: "0px 10px",
-                                  }}
-                                >
-                                  x
-                                </div>
-                                <div
-                                  cancel=".dragElm"
-                                  style={{
-                                    fontSize: "12px",
-                                    color: themeColor(),
-                                    justifyContent: "center",
-                                    marginTop: "20px",
-                                  }}
-                                >
-                                  {pos.isStamp ? "stamp" : "signature"}
-                                </div>
-                              </div>
-                            </Rnd>
-                          </>
-                        );
-                      })}
-                  </React.Fragment>
-                );
-              })}
-
-          {/* this component for render pdf document is in middle of the component */}
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-            }}
-          >
-            <Document
-              onLoadError={(e) => {
-                if (recipient) {
-                  setPdfLoadFail(true);
-                }
-              }}
-              onLoadSuccess={pageDetails}
-              ref={pdfRef}
-              file={pdfUrl ? pdfUrl : pdfDetails[0] && pdfDetails[0].URL}
-              //   file="https://qikinnovation.ams3.digitaloceanspaces.com/exported_file_2068_2023-08-30T05%3A04%3A26.334Z.pdf" //  "https://api.printnode.com/static/test/pdf/multipage.pdf" //  {pdfUrl ? pdfUrl : signPdfUrl}
-            >
-              {Array.from(new Array(numPages), (el, index) => (
-                <Page
-                  key={index}
-                  pageNumber={pageNumber}
-                  width={window.innerWidth}
-                  height={window.innerHeight}
-                  // scale={1}
-                  renderAnnotationLayer={false}
-                  renderTextLayer={false}
-                  onGetAnnotationsError={(error) => {
-                    console.log("annotation error", error);
-                  }}
-                />
-              ))}
-            </Document>
-          </div>
-        </div>
-      ) : (
-        // </RSC>
-        <RSC
-          style={{
-            position: "relative",
-            boxShadow: "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px",
-            width:
-              pdfOriginalWidth > pdfNewWidth ? pdfNewWidth : pdfOriginalWidth,
-            height: window.innerHeight - 110 + "px",
-          }}
-          noScrollY={false}
-          noScrollX={pdfNewWidth < pdfOriginalWidth ? false : true}
-        >
-          <div
-            style={{
-              border: "0.1px solid #ebe8e8",
-              width: pdfOriginalWidth,
-            }}
-            ref={drop}
-            id="container"
-          >
-            <div className="d-flex justify-content-center">
-              <Toast
-                show={successEmail}
-                delay={3000}
-                autohide
-                className="d-inline-block m-1"
-                bg="success"
-                style={{ background: "#348545" }}
-              >
-                <Toast.Body className={"text-white"}>
-                  Email sent successful!
-                </Toast.Body>
-              </Toast>
-            </div>
-
-            {recipient
+          {pdfLoadFail.status &&
+            (recipient
               ? !pdfUrl &&
                 !isAlreadySign.mssg &&
                 xyPostion.length > 0 &&
@@ -821,7 +250,7 @@ function RenderPdf({
                                 topRight: false,
                                 bottomRight: false,
                                 bottomLeft: false,
-                                topLeft: false,
+                                topLeft: false
                               }}
                               key={pos.key}
                               bounds="parent"
@@ -837,16 +266,16 @@ function RenderPdf({
                                 background: "#daebe0",
                                 textAlign: "center",
                                 justifyContent: "center",
-                                borderWidth: "0.2px",
+                                borderWidth: "0.2px"
                               }}
                               size={{
                                 width: pos.Width ? pos.Width : 150,
-                                height: pos.Height ? pos.Height : 60,
+                                height: pos.Height ? pos.Height : 60
                               }}
                               lockAspectRatio={pos.Width && 2.5}
                               default={{
                                 x: pos.xPosition,
-                                y: pos.yPosition,
+                                y: pos.yPosition
                               }}
                               onClick={() => {
                                 setIsSignPad(true);
@@ -864,7 +293,7 @@ function RenderPdf({
                                   style={{
                                     width: "100%",
                                     height: "100%",
-                                    objectFit: "contain",
+                                    objectFit: "contain"
                                   }}
                                 />
                               </div>
@@ -880,7 +309,7 @@ function RenderPdf({
                                 topRight: false,
                                 bottomRight: false,
                                 bottomLeft: false,
-                                topLeft: false,
+                                topLeft: false
                               }}
                               key={pos.key}
                               bounds="parent"
@@ -896,20 +325,16 @@ function RenderPdf({
                                 background: "#c1dee0",
                                 textAlign: "center",
                                 justifyContent: "center",
-                                borderWidth: "0.2px",
+                                borderWidth: "0.2px"
                               }}
                               size={{
                                 width: pos.Width ? pos.Width : 150,
-                                height: pos.Height ? pos.Height : 60,
+                                height: pos.Height ? pos.Height : 60
                               }}
                               disableDragging={true}
                               default={{
-                                x: pos.scale
-                                  ? pos.xPosition * pos.scale
-                                  : pos.xPosition,
-                                y: pos.scale
-                                  ? pos.yPosition * pos.scale
-                                  : pos.yPosition,
+                                x: pos.xPosition,
+                                y: pos.yPosition
                               }}
                               onClick={() => {
                                 setIsSignPad(true);
@@ -923,7 +348,7 @@ function RenderPdf({
                                   color: "black",
                                   fontWeight: "600",
                                   justifyContent: "center",
-                                  marginTop: "0px",
+                                  marginTop: "0px"
                                 }}
                               >
                                 {pos.isStamp ? "stamp" : "signature"}
@@ -967,14 +392,14 @@ function RenderPdf({
                                       background: data.blockColor,
                                       textAlign: "center",
                                       justifyContent: "center",
-                                      borderWidth: "0.2px",
+                                      borderWidth: "0.2px"
                                     }}
                                     onDrag={() =>
                                       handleTabDrag(pos.key, data.signerObjId)
                                     }
                                     size={{
                                       width: pos.Width ? pos.Width : 150,
-                                      height: pos.Height ? pos.Height : 60,
+                                      height: pos.Height ? pos.Height : 60
                                     }}
                                     lockAspectRatio={
                                       pos.Width ? pos.Width / pos.Height : 2.5
@@ -982,12 +407,12 @@ function RenderPdf({
                                     resizeHandleStyles={{
                                       bottom: { display: "none" },
                                       right: { display: "none" },
-                                      bottomRight: { display: "block" },
+                                      bottomRight: { display: "block" }
                                     }}
                                     onDragStop={handleStop}
                                     default={{
                                       x: pos.xPosition,
-                                      y: pos.yPosition,
+                                      y: pos.yPosition
                                     }}
                                     onResize={(
                                       e,
@@ -1005,13 +430,20 @@ function RenderPdf({
                                     }}
                                   >
                                     <div
-                                      onClick={(e) => {
+                                      onTouchStart={(e) => {
                                         e.stopPropagation();
                                         handleDeleteSign(
                                           pos.key,
                                           data.signerObjId
                                         );
                                       }}
+                                      // onClick={(e) => {
+                                      //   e.stopPropagation();
+                                      //   handleDeleteSign(
+                                      //     pos.key,
+                                      //     data.signerObjId
+                                      //   );
+                                      // }}
                                       style={{
                                         position: "absolute",
                                         right: 0,
@@ -1019,7 +451,7 @@ function RenderPdf({
                                         background: themeColor(),
                                         cursor: "pointer",
                                         padding: "0px 10px",
-                                        zIndex: 10,
+                                        zIndex: 10
                                       }}
                                     >
                                       x
@@ -1030,7 +462,7 @@ function RenderPdf({
                                         color: "black",
                                         fontWeight: "600",
                                         // justifyContent: "center",
-                                        marginTop: "0px",
+                                        marginTop: "0px"
                                       }}
                                     >
                                       {pos.isStamp ? "stamp" : "signature"}
@@ -1051,13 +483,12 @@ function RenderPdf({
                         data.pos.map((pos) => {
                           return pos && pos.SignUrl ? (
                             <Rnd
-                              ref={nodeRef}
-                              key={pos.key}
-                              // lockAspectRatio={2.5}
                               lockAspectRatio={
                                 pos.Width ? pos.Width / pos.Height : 2.5
                               }
                               bounds="parent"
+                              ref={nodeRef}
+                              key={pos.key}
                               style={{
                                 padding: "0px",
                                 cursor: "all-scroll",
@@ -1072,17 +503,18 @@ function RenderPdf({
                                 justifyContent: "center",
                                 borderWidth: "0.2px",
                                 overflow: "hidden",
+                                userSelect: "none"
                               }}
-                              onDrag={() => handleTabDrag(pos.key)}
                               size={{
-                                width: pos.Width ? pos.Width : 150,
-                                height: pos.Height ? pos.Height : 60,
+                                width: pos.Width ? pos.Width : 151,
+                                height: pos.Height ? pos.Height : 61
                               }}
-                              onDragStop={handleStop}
                               default={{
                                 x: pos.xPosition,
-                                y: pos.yPosition,
+                                y: pos.yPosition
                               }}
+                              onDrag={() => handleTabDrag(pos.key)}
+                              onDragStop={handleStop}
                               onResize={(
                                 e,
                                 direction,
@@ -1097,96 +529,77 @@ function RenderPdf({
                                   position
                                 );
                               }}
-                              onClick={() => {
-                                if (!isDragging) {
-                                  setIsSignPad(true);
-                                  setSignKey(pos.key);
-                                  setIsStamp(pos.isStamp);
-                                }
-                              }}
                             >
+                              {" "}
                               <div
-                                ref={nodeRef}
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  handleDeleteSign(pos.key);
-                                  setIsStamp(false);
-                                }}
-                                style={{
-                                  position: "absolute",
-                                  right: 0,
-                                  display: "inline-block",
-                                  background: themeColor(),
-                                  cursor: "pointer",
-                                  padding: "0px 10px",
+                                // className="dragElm"
+                                onTouchStart={(e) => {
+                                  if (!isDragging) {
+                                    setTimeout(() => {
+                                      e.stopPropagation();
+                                      setIsSignPad(true);
+                                      setSignKey(pos.key);
+                                      setIsStamp(pos.isStamp);
+                                    }, 500);
+                                  }
                                 }}
                               >
-                                x
-                              </div>
-                              <div style={{ pointerEvents: "none" }}>
-                                <img
-                                  alt="signimg"
-                                  onClick={(e) => {
-                                    setSignKey(pos.key);
-                                    setIsSignPad(true);
-                                    setIsStamp(pos.isStamp);
+                                <div
+                                  // className="dragElm"
+                                  ref={nodeRef}
+                                  onTouchStart={(e) => {
+                                    e.stopPropagation();
+                                    handleDeleteSign(pos.key);
+                                    setIsStamp(false);
                                   }}
-                                  src={pos.SignUrl}
+                                  // onClick={(e) => {
+                                  //   e.stopPropagation();
+                                  //   handleDeleteSign(pos.key);
+                                  //   setIsStamp(false);
+                                  // }}
                                   style={{
-                                    width: "100%",
-                                    height: "100%",
-                                    objectFit: "contain",
+                                    position: "absolute",
+                                    right: 0,
+                                    display: "inline-block",
+                                    background: themeColor(),
+                                    cursor: "pointer",
+                                    padding: "0px 10px"
                                   }}
-                                />
+                                >
+                                  x
+                                </div>
+                                <div style={{ pointerEvents: "none" }}>
+                                  <img
+                                    alt="signimg"
+                                    onClick={(e) => {
+                                      setSignKey(pos.key);
+                                      setIsSignPad(true);
+                                      setIsStamp(pos.isStamp);
+                                    }}
+                                    src={pos.SignUrl}
+                                    style={{
+                                      width: "100%",
+                                      height: "100%",
+                                      objectFit: "contain"
+                                    }}
+                                  />
+                                </div>
                               </div>
                             </Rnd>
                           ) : (
-                            <Rnd
-                              ref={nodeRef}
-                              key={pos.key}
-                              // lockAspectRatio={2.5}
-                              lockAspectRatio={
-                                pos.Width ? pos.Width / pos.Height : 2.5
-                              }
-                              bounds="parent"
-                              style={{
-                                padding: "0px",
-                                cursor: "all-scroll",
-                                zIndex: 1,
-                                position: "absolute",
-                                borderStyle: "dashed",
-                                width: "150px",
-                                height: "60px",
-                                borderColor: themeColor(),
-                                background: "#daebe0",
-                                textAlign: "center",
-                                justifyContent: "center",
-                                borderWidth: "0.2px",
-                                overflow: "hidden",
-                              }}
-                              onDrag={(e) => handleTabDrag(pos.key, e)}
-                              size={{
-                                width: pos.Width ? pos.Width : 150,
-                                height: pos.Height ? pos.Height : 60,
-                              }}
-                              onDragStop={handleStop}
-                              default={{
-                                x: pos.xPosition,
-                                y: pos.yPosition,
-                              }}
-                            >
-                              <div
-                                className="dragElm"
+                            <>
+                              <Rnd
+                                allowAnyClick
+                                // cancel=".dragElm"
                                 ref={nodeRef}
-                                onClick={(e) => {
-                                  if (!isDragging) {
-                                    e.stopPropagation();
-                                    setIsSignPad(true);
-                                    setSignKey(pos.key);
-                                    setIsStamp(pos.isStamp);
-                                  }
-                                }}
+                                key={pos.key}
+                                // lockAspectRatio={2.5}
+                                lockAspectRatio={
+                                  pos.Width ? pos.Width / pos.Height : 2.5
+                                }
+                                bounds="parent"
                                 style={{
+                                  padding: "0px",
                                   cursor: "all-scroll",
                                   zIndex: 10,
                                   position: "absolute",
@@ -1197,11 +610,517 @@ function RenderPdf({
                                   background: "#daebe0",
                                   textAlign: "center",
                                   justifyContent: "center",
-                                  alignItems: "center",
                                   borderWidth: "0.2px",
+                                  overflow: "hidden"
+                                }}
+                                onDrag={(e) => {
+                                  handleTabDrag(pos.key, e);
+                                }}
+                                // onMouseUp={(e) => handleTabDrag(pos.key, e)}
+                                onDragStop={handleStop}
+                                size={{
+                                  width: pos.Width ? pos.Width : 150,
+                                  height: pos.Height ? pos.Height : 60
+                                }}
+                                // onMouseDown={(e) => {
+
+                                //   if (!isDragging) {
+                                //     console.log("child m=event",isDragging);
+                                //     setTimeout(() => {
+                                //       if(isDeleted){
+                                //         setIsSignPad(true);
+                                //         // setIsSignPad(false)
+                                //         setSignKey(pos.key);
+                                //         setIsStamp(pos.isStamp);
+
+                                //       }else{
+                                //          setIsSignPad(true);
+                                //         // setIsSignPad(false)
+                                //         setSignKey(pos.key);
+                                //         setIsStamp(pos.isStamp);
+                                //       }
+
+                                //     }, 500);
+                                //   }
+                                // }}
+                                default={{
+                                  x: pos.xPosition,
+                                  y: pos.yPosition
+                                }}
+
+                                // onClick={(e) => {
+                                //   if (!isDragging) {
+                                //     e.stopPropagation();
+                                //     setIsSignPad(true);
+                                //     setSignKey(pos.key);
+                                //     setIsStamp(pos.isStamp);
+                                //   }
+                                // }}
+                              >
+                                <div
+                                  onTouchStart={(e) => {
+                                    if (!isDragging) {
+                                      setTimeout(() => {
+                                        setIsSignPad(true);
+                                        //setIsSignPad(false)
+                                        setSignKey(pos.key);
+                                        setIsStamp(pos.isStamp);
+                                      }, 500);
+                                    }
+                                  }}
+                                  className="dragElm"
+                                  style={{
+                                    padding: "0px",
+                                    cursor: "all-scroll",
+                                    zIndex: 20,
+                                    position: "absolute",
+                                    borderStyle: "dashed",
+                                    width: "150px",
+                                    height: "60px",
+                                    borderColor: themeColor(),
+                                    background: "#daebe0",
+                                    textAlign: "center",
+                                    justifyContent: "center",
+                                    borderWidth: "0.2px",
+                                    overflow: "hidden"
+                                  }}
+                                >
+                                  <div
+                                    //  onMouseDown={(e) => {
+                                    //    console.log("child m=event")
+                                    //    e.preventDefault();
+                                    //    setIsDragging(true)
+
+                                    //    handleDeleteSign(pos.key);
+                                    //    setIsStamp(false);
+                                    //    setTimeout(()=>{
+                                    //      setIsDragging(false)
+                                    //    },2000)
+                                    //  }}
+                                    onTouchStart={(e) => {
+                                      e.stopPropagation();
+                                      e.preventDefault();
+                                      // setIsDragging(true);
+
+                                      handleDeleteSign(pos.key);
+                                      setIsStamp(false);
+                                    }}
+                                    onClick={(e) => {
+                                      e.stopPropagation(); // Prevent further event propagation
+                                    }}
+                                    style={{
+                                      position: "absolute",
+                                      right: 0,
+                                      display: "inline-block",
+                                      background: themeColor(),
+                                      cursor: "pointer",
+                                      padding: "0px 10px"
+                                    }}
+                                  >
+                                    x
+                                  </div>
+                                  <div
+                                    cancel=".dragElm"
+                                    style={{
+                                      fontSize: "12px",
+                                      color: themeColor(),
+                                      justifyContent: "center",
+                                      marginTop: "20px"
+                                    }}
+                                  >
+                                    {pos.isStamp ? "stamp" : "signature"}
+                                  </div>
+                                </div>
+                              </Rnd>
+                            </>
+                          );
+                        })}
+                    </React.Fragment>
+                  );
+                }))}
+
+          {/* this component for render pdf document is in middle of the component */}
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center"
+            }}
+          >
+            <Document
+              onLoadError={(e) => {
+                if (recipient) {
+                  setPdfLoadFail(true);
+                }
+              }}
+              onLoadSuccess={pageDetails}
+              ref={pdfRef}
+              file={pdfUrl ? pdfUrl : pdfDetails[0] && pdfDetails[0].URL}
+              //   file="https://qikinnovation.ams3.digitaloceanspaces.com/exported_file_2068_2023-08-30T05%3A04%3A26.334Z.pdf" //  "https://api.printnode.com/static/test/pdf/multipage.pdf" //  {pdfUrl ? pdfUrl : signPdfUrl}
+            >
+              {Array.from(new Array(numPages), (el, index) => (
+                <Page
+                  key={index}
+                  pageNumber={pageNumber}
+                  width={window.innerWidth}
+                  height={window.innerHeight}
+                  // scale={1}
+                  renderAnnotationLayer={false}
+                  renderTextLayer={false}
+                  onGetAnnotationsError={(error) => {
+                    console.log("annotation error", error);
+                  }}
+                />
+              ))}
+            </Document>
+          </div>
+        </div>
+      ) : (
+        // </RSC>
+        <RSC
+          style={{
+            position: "relative",
+            boxShadow: "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px",
+            width:
+              pdfOriginalWidth > pdfNewWidth ? pdfNewWidth : pdfOriginalWidth,
+            height: window.innerHeight - 110 + "px"
+          }}
+          noScrollY={false}
+          noScrollX={pdfNewWidth < pdfOriginalWidth ? false : true}
+        >
+          <div
+            style={{
+              border: "0.1px solid #ebe8e8",
+              width: pdfOriginalWidth
+            }}
+            ref={drop}
+            id="container"
+          >
+            <div className="d-flex justify-content-center">
+              <Toast
+                show={successEmail}
+                delay={3000}
+                autohide
+                className="d-inline-block m-1"
+                bg="success"
+                style={{ background: "#348545" }}
+              >
+                <Toast.Body className={"text-white"}>
+                  Email sent successful!
+                </Toast.Body>
+              </Toast>
+            </div>
+            {pdfLoadFail.status &&
+              (recipient
+                ? !pdfUrl &&
+                  !isAlreadySign.mssg &&
+                  xyPostion.length > 0 &&
+                  xyPostion.map((data, ind) => {
+                    return (
+                      <React.Fragment key={ind}>
+                        {data.pageNumber === pageNumber &&
+                          data.pos.map((pos) => {
+                            return pos && pos.SignUrl ? (
+                              <Rnd
+                                disableDragging={true}
+                                enableResizing={{
+                                  top: false,
+                                  right: false,
+                                  bottom: false,
+                                  left: false,
+                                  topRight: false,
+                                  bottomRight: false,
+                                  bottomLeft: false,
+                                  topLeft: false
+                                }}
+                                key={pos.key}
+                                bounds="parent"
+                                style={{
+                                  padding: "0px",
+                                  cursor: "all-scroll",
+                                  zIndex: 1,
+                                  position: "absolute",
+                                  borderStyle: "dashed",
+                                  width: "150px",
+                                  height: "60px",
+                                  borderColor: themeColor(),
+                                  background: "#daebe0",
+                                  textAlign: "center",
+                                  justifyContent: "center",
+                                  borderWidth: "0.2px"
+                                }}
+                                size={{
+                                  width: pos.Width ? pos.Width : 150,
+                                  height: pos.Height ? pos.Height : 60
+                                }}
+                                lockAspectRatio={pos.Width && 2.5}
+                                default={{
+                                  x: pos.scale
+                                    ? pos.xPosition * pos.scale
+                                    : pos.xPosition,
+                                  y: pos.scale
+                                    ? pos.yPosition * pos.scale
+                                    : pos.yPosition
+                                }}
+                                onClick={() => {
+                                  setIsSignPad(true);
+                                  setSignKey(pos.key);
+                                }}
+                              >
+                                <div style={{ pointerEvents: "none" }}>
+                                  <img
+                                    alt="no img"
+                                    onClick={() => {
+                                      setIsSignPad(true);
+                                      setSignKey(pos.key);
+                                    }}
+                                    src={pos.SignUrl}
+                                    style={{
+                                      width: "100%",
+                                      height: "100%",
+                                      objectFit: "contain"
+                                    }}
+                                  />
+                                </div>
+                              </Rnd>
+                            ) : (
+                              <Rnd
+                                data-tut="reactourSecond"
+                                enableResizing={{
+                                  top: false,
+                                  right: false,
+                                  bottom: false,
+                                  left: false,
+                                  topRight: false,
+                                  bottomRight: false,
+                                  bottomLeft: false,
+                                  topLeft: false
+                                }}
+                                key={pos.key}
+                                bounds="parent"
+                                style={{
+                                  padding: "0px",
+                                  cursor: "all-scroll",
+                                  zIndex: 1,
+                                  position: "absolute",
+                                  borderStyle: "dashed",
+                                  width: "150px",
+                                  height: "60px",
+                                  borderColor: themeColor(),
+                                  background: "#c1dee0",
+                                  textAlign: "center",
+                                  justifyContent: "center",
+                                  borderWidth: "0.2px"
+                                }}
+                                size={{
+                                  width: pos.Width ? pos.Width : 150,
+                                  height: pos.Height ? pos.Height : 60
+                                }}
+                                disableDragging={true}
+                                default={{
+                                  x: pos.scale
+                                    ? pos.xPosition * pos.scale
+                                    : pos.xPosition,
+                                  y: pos.scale
+                                    ? pos.yPosition * pos.scale
+                                    : pos.yPosition
+                                }}
+                                onClick={() => {
+                                  setIsSignPad(true);
+                                  setSignKey(pos.key);
+                                  setIsStamp(pos.isStamp);
                                 }}
                               >
                                 <div
+                                  style={{
+                                    fontSize: "12px",
+                                    color: "black",
+                                    fontWeight: "600",
+                                    justifyContent: "center",
+                                    marginTop: "0px"
+                                  }}
+                                >
+                                  {pos.isStamp ? "stamp" : "signature"}
+                                </div>
+                              </Rnd>
+                            );
+                          })}
+                      </React.Fragment>
+                    );
+                  })
+                : pdfRequest
+                ? signerPos.map((data, key) => {
+                    return (
+                      <React.Fragment key={key}>
+                        {checkSignedSignes(data)}
+                      </React.Fragment>
+                    );
+                  })
+                : placeholder
+                ? signerPos.map((data, ind) => {
+                    return (
+                      <React.Fragment key={ind}>
+                        {data.placeHolder.map((placeData, index) => {
+                          return (
+                            <React.Fragment key={index}>
+                              {placeData.pageNumber === pageNumber &&
+                                placeData.pos.map((pos) => {
+                                  return (
+                                    <Rnd
+                                      key={pos.key}
+                                      bounds="parent"
+                                      style={{
+                                        padding: "0px",
+                                        cursor: "all-scroll",
+                                        zIndex: 1,
+                                        position: "absolute",
+                                        borderStyle: "dashed",
+                                        width: "200px",
+                                        height: "30px",
+                                        borderColor: themeColor(),
+                                        background: data.blockColor,
+                                        textAlign: "center",
+                                        justifyContent: "center",
+                                        borderWidth: "0.2px"
+                                      }}
+                                      onDrag={() =>
+                                        handleTabDrag(pos.key, data.signerObjId)
+                                      }
+                                      size={{
+                                        width: pos.Width ? pos.Width : 150,
+                                        height: pos.Height ? pos.Height : 60
+                                      }}
+                                      lockAspectRatio={
+                                        pos.Width ? pos.Width / pos.Height : 2.5
+                                      }
+                                      resizeHandleStyles={{
+                                        bottom: { display: "none" },
+                                        right: { display: "none" },
+                                        bottomRight: { display: "block" }
+                                      }}
+                                      onDragStop={handleStop}
+                                      default={{
+                                        x: pos.xPosition,
+                                        y: pos.yPosition
+                                      }}
+                                      onResize={(
+                                        e,
+                                        direction,
+                                        ref,
+                                        delta,
+                                        position
+                                      ) => {
+                                        handleImageResize(
+                                          ref,
+                                          pos.key,
+                                          data.signerObjId,
+                                          position
+                                        );
+                                      }}
+                                    >
+                                      <div
+                                        onClick={(e) => {
+                                          e.stopPropagation();
+                                          handleDeleteSign(
+                                            pos.key,
+                                            data.signerObjId
+                                          );
+                                        }}
+                                        style={{
+                                          position: "absolute",
+                                          right: 0,
+                                          display: "inline-block",
+                                          background: themeColor(),
+                                          cursor: "pointer",
+                                          padding: "0px 10px",
+                                          zIndex: 10
+                                        }}
+                                      >
+                                        x
+                                      </div>
+                                      <div
+                                        style={{
+                                          fontSize: "12px",
+                                          color: "black",
+                                          fontWeight: "600",
+                                          // justifyContent: "center",
+                                          marginTop: "0px"
+                                        }}
+                                      >
+                                        {pos.isStamp ? "stamp" : "signature"}
+                                      </div>
+                                    </Rnd>
+                                  );
+                                })}
+                            </React.Fragment>
+                          );
+                        })}
+                      </React.Fragment>
+                    );
+                  })
+                : xyPostion.map((data, ind) => {
+                    return (
+                      <React.Fragment key={ind}>
+                        {data.pageNumber === pageNumber &&
+                          data.pos.map((pos) => {
+                            return pos && pos.SignUrl ? (
+                              <Rnd
+                                ref={nodeRef}
+                                key={pos.key}
+                                // lockAspectRatio={2.5}
+                                lockAspectRatio={
+                                  pos.Width ? pos.Width / pos.Height : 2.5
+                                }
+                                bounds="parent"
+                                style={{
+                                  padding: "0px",
+                                  cursor: "all-scroll",
+                                  zIndex: 1,
+                                  position: "absolute",
+                                  borderStyle: "dashed",
+                                  width: "150px",
+                                  height: "60px",
+                                  borderColor: themeColor(),
+                                  background: "#daebe0",
+                                  textAlign: "center",
+                                  justifyContent: "center",
+                                  borderWidth: "0.2px",
+                                  overflow: "hidden"
+                                }}
+                                onDrag={() => handleTabDrag(pos.key)}
+                                size={{
+                                  width: pos.Width ? pos.Width : 150,
+                                  height: pos.Height ? pos.Height : 60
+                                }}
+                                onDragStop={handleStop}
+                                default={{
+                                  x: pos.xPosition,
+                                  y: pos.yPosition
+                                }}
+                                onResize={(
+                                  e,
+                                  direction,
+                                  ref,
+                                  delta,
+                                  position
+                                ) => {
+                                  handleImageResize(
+                                    ref,
+                                    pos.key,
+                                    direction,
+                                    position
+                                  );
+                                }}
+                                onClick={() => {
+                                  if (!isDragging) {
+                                    setIsSignPad(true);
+                                    setSignKey(pos.key);
+                                    setIsStamp(pos.isStamp);
+                                  }
+                                }}
+                              >
+                                <div
+                                  ref={nodeRef}
                                   onClick={(e) => {
                                     e.stopPropagation();
                                     handleDeleteSign(pos.key);
@@ -1213,35 +1132,133 @@ function RenderPdf({
                                     display: "inline-block",
                                     background: themeColor(),
                                     cursor: "pointer",
-                                    padding: "0px 10px",
+                                    padding: "0px 10px"
                                   }}
                                 >
                                   x
                                 </div>
+                                <div style={{ pointerEvents: "none" }}>
+                                  <img
+                                    alt="signimg"
+                                    onClick={(e) => {
+                                      setSignKey(pos.key);
+                                      setIsSignPad(true);
+                                      setIsStamp(pos.isStamp);
+                                    }}
+                                    src={pos.SignUrl}
+                                    style={{
+                                      width: "100%",
+                                      height: "100%",
+                                      objectFit: "contain"
+                                    }}
+                                  />
+                                </div>
+                              </Rnd>
+                            ) : (
+                              <Rnd
+                                ref={nodeRef}
+                                key={pos.key}
+                                // lockAspectRatio={2.5}
+                                lockAspectRatio={
+                                  pos.Width ? pos.Width / pos.Height : 2.5
+                                }
+                                bounds="parent"
+                                style={{
+                                  padding: "0px",
+                                  cursor: "all-scroll",
+                                  zIndex: 1,
+                                  position: "absolute",
+                                  borderStyle: "dashed",
+                                  width: "150px",
+                                  height: "60px",
+                                  borderColor: themeColor(),
+                                  background: "#daebe0",
+                                  textAlign: "center",
+                                  justifyContent: "center",
+                                  borderWidth: "0.2px",
+                                  overflow: "hidden"
+                                }}
+                                onDrag={(e) => handleTabDrag(pos.key, e)}
+                                size={{
+                                  width: pos.Width ? pos.Width : 150,
+                                  height: pos.Height ? pos.Height : 60
+                                }}
+                                onDragStop={handleStop}
+                                default={{
+                                  x: pos.xPosition,
+                                  y: pos.yPosition
+                                }}
+                              >
                                 <div
+                                  className="dragElm"
+                                  ref={nodeRef}
+                                  onClick={(e) => {
+                                    if (!isDragging) {
+                                      e.stopPropagation();
+                                      setIsSignPad(true);
+                                      setSignKey(pos.key);
+                                      setIsStamp(pos.isStamp);
+                                    }
+                                  }}
                                   style={{
-                                    fontSize: "12px",
-                                    color: themeColor(),
+                                    cursor: "all-scroll",
+                                    zIndex: 10,
+                                    position: "absolute",
+                                    borderStyle: "dashed",
+                                    width: "150px",
+                                    height: "60px",
+                                    borderColor: themeColor(),
+                                    background: "#daebe0",
+                                    textAlign: "center",
                                     justifyContent: "center",
-                                    marginTop: "20px",
+                                    alignItems: "center",
+                                    borderWidth: "0.2px"
                                   }}
                                 >
-                                  {pos.isStamp ? "stamp" : "signature"}
+                                  <div
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      handleDeleteSign(pos.key);
+                                      setIsStamp(false);
+                                    }}
+                                    style={{
+                                      position: "absolute",
+                                      right: 0,
+                                      display: "inline-block",
+                                      background: themeColor(),
+                                      cursor: "pointer",
+                                      padding: "0px 10px"
+                                    }}
+                                  >
+                                    x
+                                  </div>
+                                  <div
+                                    style={{
+                                      fontSize: "12px",
+                                      color: themeColor(),
+                                      justifyContent: "center",
+                                      marginTop: "20px"
+                                    }}
+                                  >
+                                    {pos.isStamp ? "stamp" : "signature"}
+                                  </div>
                                 </div>
-                              </div>
-                            </Rnd>
-                          );
-                        })}
-                    </React.Fragment>
-                  );
-                })}
-
+                              </Rnd>
+                            );
+                          })}
+                      </React.Fragment>
+                    );
+                  }))}
             {/* this component for render pdf document is in middle of the component */}
 
             <Document
               onLoadError={(e) => {
                 if (recipient) {
-                  setPdfLoadFail(true);
+                  const load = {
+                    status: false,
+                    type: "failed"
+                  };
+                  setPdfLoadFail(load);
                 }
               }}
               onLoadSuccess={pageDetails}
diff --git a/microfrontends/SignDocuments/src/Component/login.js b/microfrontends/SignDocuments/src/Component/login.js
index 5ec871738..ba2f9d99e 100644
--- a/microfrontends/SignDocuments/src/Component/login.js
+++ b/microfrontends/SignDocuments/src/Component/login.js
@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import signLogo from "../assests/mailLogo.png";
 import "../css/LoginPage.css";
 import loader from "../assests/loader2.gif";
 import axios from "axios";
@@ -9,7 +8,7 @@ import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 // import { useHistory } from "react-router-dom/cjs/react-router-dom.min";
 function Login() {
-  const { id, userMail, serverUrl,serverId } = useParams();
+  const { id, userMail, serverUrl } = useParams();
   let navigate = useNavigate();
   //   const history = useHistory();
 
diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js
index 7adb49a51..f596425d0 100644
--- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js
+++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js
@@ -1,5 +1,4 @@
 import React, { useState, useRef, useEffect } from "react";
-import { Document, Page, pdfjs } from "react-pdf";
 import axios from "axios";
 import "../css/./signature.css";
 import Modal from "react-bootstrap/Modal";
@@ -9,10 +8,8 @@ import { themeColor } from "../utils/ThemeColor/backColor";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { useDrag, useDrop } from "react-dnd";
-import { Rnd } from "react-rnd";
 import RenderAllPdfPage from "./component/renderAllPdfPage";
 import FieldsComponent from "./component/fieldsComponent";
-import RSC from "react-scrollbars-custom";
 import Tour from "reactour";
 import { useParams } from "react-router-dom";
 import Loader from "./component/loader";
@@ -25,8 +22,6 @@ import RenderPdf from "./component/renderPdf";
 import ModalComponent from "./component/modalComponent";
 
 function PlaceHolderSign() {
-  pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
-
   const [pdfDetails, setPdfDetails] = useState([]);
   const [isMailSend, setIsMailSend] = useState(false);
   const [allPages, setAllPages] = useState(null);
@@ -46,7 +41,7 @@ function PlaceHolderSign() {
   const [isSend, setIsSend] = useState(false);
   const [isLoading, setIsLoading] = useState({
     isLoad: true,
-    message: "This might take some time",
+    message: "This might take some time"
   });
   const [handleError, setHandleError] = useState();
   const [currentEmail, setCurrentEmail] = useState();
@@ -61,7 +56,10 @@ function PlaceHolderSign() {
   const { docId } = useParams();
   const [isShowEmail, setIsShowEmail] = useState(false);
   const [selectedEmail, setSelectedEmail] = useState(false);
-
+  const [pdfLoadFail, setPdfLoadFail] = useState({
+    status: false,
+    type: "load"
+  });
   const color = [
     "#93a3db",
     "#e6c3db",
@@ -74,15 +72,15 @@ function PlaceHolderSign() {
     "#cc99ff",
     "#ffcc99",
     "#66ccff",
-    "#ffffcc",
+    "#ffffcc"
   ];
 
   const [{ isOver }, drop] = useDrop({
     accept: "BOX",
     drop: (item, monitor) => addPositionOfSignature(item, monitor),
     collect: (monitor) => ({
-      isOver: !!monitor.isOver(),
-    }),
+      isOver: !!monitor.isOver()
+    })
   });
   const [{ isDragSign }, dragSignature] = useDrag({
     type: "BOX",
@@ -90,11 +88,11 @@ function PlaceHolderSign() {
     item: {
       type: "BOX",
       id: 1,
-      text: "drag me",
+      text: "drag me"
     },
     collect: (monitor) => ({
-      isDragSign: !!monitor.isDragging(),
-    }),
+      isDragSign: !!monitor.isDragging()
+    })
   });
   const [{ isDragStamp }, dragStamp] = useDrag({
     type: "BOX",
@@ -102,11 +100,11 @@ function PlaceHolderSign() {
     item: {
       type: "BOX",
       id: 2,
-      text: "drag me",
+      text: "drag me"
     },
     collect: (monitor) => ({
-      isDragStamp: !!monitor.isDragging(),
-    }),
+      isDragStamp: !!monitor.isDragging()
+    })
   });
 
   const [{ isDragSignatureSS }, dragSignatureSS] = useDrag({
@@ -115,11 +113,11 @@ function PlaceHolderSign() {
     item: {
       type: "BOX",
       id: 3,
-      text: "drag me",
+      text: "drag me"
     },
     collect: (monitor) => ({
-      isDragSignatureSS: !!monitor.isDragging(),
-    }),
+      isDragSignatureSS: !!monitor.isDragging()
+    })
   });
   const isMobile = window.innerWidth < 712;
   const [{ isDragStampSS }, dragStampSS] = useDrag({
@@ -128,11 +126,11 @@ function PlaceHolderSign() {
     item: {
       type: "BOX",
       id: 4,
-      text: "drag me",
+      text: "drag me"
     },
     collect: (monitor) => ({
-      isDragStampSS: !!monitor.isDragging(),
-    }),
+      isDragStampSS: !!monitor.isDragging()
+    })
   });
 
   const rowLevel =
@@ -176,8 +174,8 @@ function PlaceHolderSign() {
           headers: {
             "Content-Type": "application/json",
             "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-            "X-Parse-Session-Token": localStorage.getItem("accesstoken"),
-          },
+            "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+          }
         }
       )
       .then((Listdata) => {
@@ -201,7 +199,7 @@ function PlaceHolderSign() {
         } else {
           setNoData(true);
           const loadObj = {
-            isLoad: false,
+            isLoad: false
           };
           setIsLoading(loadObj);
         }
@@ -209,7 +207,7 @@ function PlaceHolderSign() {
       .catch((err) => {
         console.log("axois err ", err);
         const loadObj = {
-          isLoad: false,
+          isLoad: false
         };
         setHandleError("Error: Something went wrong!");
         setIsLoading(loadObj);
@@ -230,12 +228,12 @@ function PlaceHolderSign() {
         }
       }
       const loadObj = {
-        isLoad: false,
+        isLoad: false
       };
       setIsLoading(loadObj);
     } else if (res === "Error: Something went wrong!") {
       const loadObj = {
-        isLoad: false,
+        isLoad: false
       };
       setHandleError("Error: Something went wrong!");
       setIsLoading(loadObj);
@@ -254,7 +252,7 @@ function PlaceHolderSign() {
           }
         }
         const loadObj = {
-          isLoad: false,
+          isLoad: false
         };
         setIsLoading(loadObj);
       }
@@ -304,7 +302,7 @@ function PlaceHolderSign() {
     //     setIsLoading(loadObj);
     //   });
   };
-  console.log("signerpos", signerPos, isDragStampSS, isDragSignatureSS);
+
   //function for setting position after drop signature button over pdf
   const addPositionOfSignature = (item, monitor) => {
     const isMobile = window.innerWidth < 712;
@@ -339,12 +337,12 @@ function PlaceHolderSign() {
         key: key,
         isDrag: false,
         scale: isMobile && scale,
-        yBottom: window.innerHeight / 2 - 60,
+        yBottom: window.innerHeight / 2 - 60
       };
       dropData.push(dropObj);
       xyPos = {
         pageNumber: pageNumber,
-        pos: dropData,
+        pos: dropData
       };
 
       xyPosArr.push(xyPos);
@@ -367,13 +365,13 @@ function PlaceHolderSign() {
         firstXPos: signBtnPosition[0] && signBtnPosition[0].xPos,
         firstYPos: signBtnPosition[0] && signBtnPosition[0].yPos,
         yBottom: ybottom,
-        scale: isMobile && scale,
+        scale: isMobile && scale
       };
 
       dropData.push(dropObj);
       xyPos = {
         pageNumber: pageNumber,
-        pos: dropData,
+        pos: dropData
       };
 
       xyPosArr.push(xyPos);
@@ -402,7 +400,7 @@ function PlaceHolderSign() {
 
         let xyPos = {
           pageNumber: pageNumber,
-          pos: newSignPos,
+          pos: newSignPos
         };
         updatePlace.push(xyPos);
 
@@ -413,8 +411,8 @@ function PlaceHolderSign() {
           signerPtr: {
             __type: "Pointer",
             className: `${contractName}`,
-            objectId: signerObjId,
-          },
+            objectId: signerObjId
+          }
         };
 
         signerPos.splice(colorIndex, 1, placeHolderPos);
@@ -429,8 +427,8 @@ function PlaceHolderSign() {
           signerPtr: {
             __type: "Pointer",
             className: `${contractName}`,
-            objectId: signerObjId,
-          },
+            objectId: signerObjId
+          }
         };
 
         signerPos.splice(colorIndex, 1, placeHolderPos);
@@ -440,11 +438,11 @@ function PlaceHolderSign() {
         signerPtr: {
           __type: "Pointer",
           className: `${contractName}`,
-          objectId: signerObjId,
+          objectId: signerObjId
         },
         signerObjId: signerObjId,
         blockColor: color[isSelectListId],
-        placeHolder: xyPosArr,
+        placeHolder: xyPosArr
       };
 
       setSignerPos((prev) => [...prev, placeHolderPos]);
@@ -452,6 +450,10 @@ function PlaceHolderSign() {
   };
   //function for get pdf page details
   const pageDetails = async (pdf) => {
+    const load = {
+      status: true
+    };
+    setPdfLoadFail(load);
     pdf.getPage(1).then((pdfPage) => {
       const pageWidth = pdfPage.view[2];
 
@@ -494,7 +496,7 @@ function PlaceHolderSign() {
                 xPosition: dragElement.x,
                 yPosition: dragElement.y,
                 isDrag: true,
-                yBottom: ybottom,
+                yBottom: ybottom
               };
             }
             return url;
@@ -607,7 +609,7 @@ function PlaceHolderSign() {
                 ...url,
                 Width: ref.offsetWidth,
                 Height: ref.offsetHeight,
-                xPosition: position.x,
+                xPosition: position.x
               };
             }
             return url;
@@ -636,7 +638,7 @@ function PlaceHolderSign() {
               return {
                 ...url,
                 Width: ref.offsetWidth,
-                Height: ref.offsetHeight,
+                Height: ref.offsetHeight
               };
             }
             return url;
@@ -676,7 +678,7 @@ function PlaceHolderSign() {
 
     const xyPosition = {
       xPos: mouseX,
-      yPos: mouseY,
+      yPos: mouseY
     };
 
     setXYSignature(xyPosition);
@@ -691,13 +693,13 @@ function PlaceHolderSign() {
     if (signerPos.length === signersdata.Signers.length) {
       const alert = {
         mssg: "confirm",
-        alert: true,
+        alert: true
       };
       setIsSendAlert(alert);
     } else {
       const alert = {
         mssg: "sure",
-        alert: true,
+        alert: true
       };
 
       setIsSendAlert(alert);
@@ -706,7 +708,7 @@ function PlaceHolderSign() {
   const sendEmailToSigners = async () => {
     const loadObj = {
       isLoad: true,
-      message: "This might take some time",
+      message: "This might take some time"
     };
     setIsLoading(loadObj);
     setIsSendAlert({});
@@ -717,7 +719,7 @@ function PlaceHolderSign() {
     const localExpireDate = newDate.toLocaleDateString("en-US", {
       day: "numeric",
       month: "long",
-      year: "numeric",
+      year: "numeric"
     });
 
     let sender = signersdata.ExtUserPtr.Email;
@@ -734,7 +736,7 @@ function PlaceHolderSign() {
         const headers = {
           "Content-Type": "application/json",
           "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-          sessionToken: localStorage.getItem("accesstoken"),
+          sessionToken: localStorage.getItem("accesstoken")
         };
         const serverUrl = localStorage.getItem("baseUrl");
         const newServer = serverUrl.replaceAll("/", "%2F");
@@ -768,7 +770,7 @@ function PlaceHolderSign() {
             signPdf +
             ">  <button style='padding: 12px 20px 12px 20px;background-color: #d46b0f;color: white;  border: 0px;box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;font-weight:bold'>Sign here</button></a> </div> </td><td> </td></tr></table> </div><div style='display: flex; justify-content: center;margin-top: 10px;'> </div></div></div><div><p> This is an automated email from Open Sign. For any queries regarding this email, please contact the sender " +
             sender +
-            " directly.If you think this email is inappropriate or spam, you may file a complaint with Open Sign here.</p> </div></div></body> </html>",
+            " directly.If you think this email is inappropriate or spam, you may file a complaint with Open Sign here.</p> </div></div></body> </html>"
         };
         sendMail = await axios.post(url, params, { headers: headers });
       } catch (error) {
@@ -780,11 +782,8 @@ function PlaceHolderSign() {
       try {
         const data = {
           Placeholders: signerPos,
-          SignedUrl: pdfDetails[0].URL,
+          SignedUrl: pdfDetails[0].URL
         };
-        const isMobile = window.innerWidth < 712;
-        const newWidth = window.innerWidth;
-        const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
 
         await axios
           .put(
@@ -796,8 +795,8 @@ function PlaceHolderSign() {
               headers: {
                 "Content-Type": "application/json",
                 "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-                "X-Parse-Session-Token": localStorage.getItem("accesstoken"),
-              },
+                "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+              }
             }
           )
           .then((result) => {
@@ -805,7 +804,7 @@ function PlaceHolderSign() {
             setIsSend(true);
             setIsMailSend(true);
             const loadObj = {
-              isLoad: false,
+              isLoad: false
             };
             setIsLoading(loadObj);
             // console.log("save res", res);
@@ -826,26 +825,26 @@ function PlaceHolderSign() {
       content: `Select a recipient from this list to add a place-holder where he is supposed to sign.The placeholder will appear in the same colour as the recipient name once you drop it on the document.`,
       position: "top",
 
-      style: { fontSize: "13px" },
+      style: { fontSize: "13px" }
     },
     {
       selector: '[data-tut="reactourSecond"]',
       content: `Drag the signature or stamp placeholder onto the PDF to choose your desired signing location.`,
       position: "top",
-      style: { fontSize: "13px" },
+      style: { fontSize: "13px" }
     },
     {
       selector: '[data-tut="reactourThird"]',
       content: `Drag the placeholder for a recipient anywhere on the document.Remember, it will appear in the same colour as the name of the recipient for easy reference.`,
       position: "top",
-      style: { fontSize: "13px" },
+      style: { fontSize: "13px" }
     },
     {
       selector: '[data-tut="reactourFour"]',
       content: `Clicking "Send" button will share the document with all the recipients.It will also send out emails to everyone on the recipients list.`,
       position: "top",
-      style: { fontSize: "13px" },
-    },
+      style: { fontSize: "13px" }
+    }
   ];
 
   //function for update TourStatus
@@ -872,14 +871,14 @@ function PlaceHolderSign() {
           "baseUrl"
         )}classes/${extUserClass}/${signerUserId}`,
         {
-          TourStatus: updatedTourStatus,
+          TourStatus: updatedTourStatus
         },
         {
           headers: {
             "Content-Type": "application/json",
             "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-            sessionToken: localStorage.getItem("accesstoken"),
-          },
+            sessionToken: localStorage.getItem("accesstoken")
+          }
         }
       )
       .then((Listdata) => {
@@ -927,7 +926,7 @@ function PlaceHolderSign() {
           <div
             style={{
               marginLeft: pdfOriginalWidth > 500 && "20px",
-              marginRight: pdfOriginalWidth > 500 && "20px",
+              marginRight: pdfOriginalWidth > 500 && "20px"
             }}
           >
             {/* this modal is used show alert set placeholder for all signers before send mail */}
@@ -967,7 +966,7 @@ function PlaceHolderSign() {
                 <button
                   onClick={() => setIsSendAlert({})}
                   style={{
-                    color: "black",
+                    color: "black"
                   }}
                   type="button"
                   className="finishBtn"
@@ -978,7 +977,7 @@ function PlaceHolderSign() {
                   <button
                     onClick={() => sendEmailToSigners()}
                     style={{
-                      background: "#24b53a",
+                      background: "#24b53a"
                     }}
                     type="button"
                     className="finishBtn"
@@ -992,7 +991,7 @@ function PlaceHolderSign() {
             <Modal show={isSend}>
               <Modal.Header
                 style={{
-                  background: themeColor(),
+                  background: themeColor()
                 }}
                 // className="bg-danger"
               >
@@ -1016,7 +1015,7 @@ function PlaceHolderSign() {
                         setSignerPos([]);
                       }}
                       style={{
-                        color: "black",
+                        color: "black"
                       }}
                       type="button"
                       className="finishBtn"
@@ -1031,7 +1030,7 @@ function PlaceHolderSign() {
                       <button
                         style={{
                           background: themeColor(),
-                          color: "white",
+                          color: "white"
                         }}
                         type="button"
                         className="finishBtn"
@@ -1047,7 +1046,7 @@ function PlaceHolderSign() {
                       setSignerPos([]);
                     }}
                     style={{
-                      color: "black",
+                      color: "black"
                     }}
                     type="button"
                     className="finishBtn"
@@ -1093,6 +1092,8 @@ function PlaceHolderSign() {
                 handleTabDrag={handleTabDrag}
                 handleStop={handleStop}
                 handleImageResize={handleImageResize}
+                setPdfLoadFail={setPdfLoadFail}
+                pdfLoadFail={pdfLoadFail}
               />
             </div>
           </div>
diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js
index a560a6b3a..31d4c2dd9 100644
--- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js
+++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js
@@ -14,7 +14,7 @@ import DefaultSignature from "./component/defaultSignature";
 import {
   getBase64FromUrl,
   getBase64FromIMG,
-  contactBookName,
+  contactBookName
 } from "../utils/Utils";
 import Tour from "reactour";
 import Signedby from "./component/signedby";
@@ -46,7 +46,7 @@ function EmbedPdfImage() {
   const [handleError, setHandleError] = useState();
   const [isLoading, setIsLoading] = useState({
     isLoad: true,
-    message: "This might take some time",
+    message: "This might take some time"
   });
   const [defaultSignImg, setDefaultSignImg] = useState();
   const [userObjectID, setUserObjectID] = useState();
@@ -62,9 +62,12 @@ function EmbedPdfImage() {
   const [noData, setNoData] = useState(false);
   const [contractName, setContractName] = useState("");
   const [isDecline, setIsDecline] = useState({
-    isDeclined: false,
+    isDeclined: false
+  });
+  const [pdfLoadFail, setPdfLoadFail] = useState({
+    status: false,
+    type: "load"
   });
-  const [pdfLoadFail, setPdfLoadFail] = useState(false);
 
   const docId = id && id;
   //"F0hg0twSJH";
@@ -86,7 +89,8 @@ function EmbedPdfImage() {
     //aspfUo7wRl
     let currUserId, userObjectId;
     const json = await contactBookName(userPhone, "_Users");
-    if (json && json.results[0]) {
+
+    if (json !== "Error: Something went wrong!" && json && json.results[0]) {
       setContractName("_Users");
       if (json.results[0]) {
         userObjectId = json.results[0].UserId.objectId;
@@ -109,13 +113,13 @@ function EmbedPdfImage() {
       } else {
         setNoData(true);
         const loadObj = {
-          isLoad: false,
+          isLoad: false
         };
         setIsLoading(loadObj);
       }
     } else if (json === "Error: Something went wrong!") {
       const loadObj = {
-        isLoad: false,
+        isLoad: false
       };
       setHandleError("Error: Something went wrong!");
       setIsLoading(loadObj);
@@ -144,7 +148,7 @@ function EmbedPdfImage() {
         } else {
           setNoData(true);
           const loadObj = {
-            isLoad: false,
+            isLoad: false
           };
           setIsLoading(loadObj);
         }
@@ -210,8 +214,8 @@ function EmbedPdfImage() {
           headers: {
             "Content-Type": "application/json",
             "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-            "X-Parse-Session-Token": localStorage.getItem("accesstoken"),
-          },
+            "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+          }
         }
       )
       .then((Listdata) => {
@@ -230,27 +234,27 @@ function EmbedPdfImage() {
             //then show alert with completed message
             const alreadySign = {
               status: true,
-              mssg: "This document has already been signed!",
+              mssg: "This document has already been signed!"
             };
             setIsAlreadySign(alreadySign);
             setPdfUrl(res[0].SignedUrl);
             setSignedPdfData(json.results);
             setCompletePdfData(res);
             const loadObj = {
-              isLoad: false,
+              isLoad: false
             };
             setIsLoading(loadObj);
           } else if (declined) {
             const currentDecline = {
               currnt: "another",
-              isDeclined: true,
+              isDeclined: true
             };
             setIsDecline(currentDecline);
 
             setSignedPdfData(json.results);
 
             const loadObj = {
-              isLoad: false,
+              isLoad: false
             };
             setIsLoading(loadObj);
           } else if (currDate > expireUpdateDate) {
@@ -281,7 +285,7 @@ function EmbedPdfImage() {
               setSignKey(key);
 
               const loadObj = {
-                isLoad: false,
+                isLoad: false
               };
               setIsLoading(loadObj);
             }
@@ -301,13 +305,13 @@ function EmbedPdfImage() {
               setSignKey(key);
 
               const loadObj = {
-                isLoad: false,
+                isLoad: false
               };
               setIsLoading(loadObj);
             }
 
             const loadObj = {
-              isLoad: false,
+              isLoad: false
             };
             setIsLoading(loadObj);
           } else {
@@ -338,12 +342,12 @@ function EmbedPdfImage() {
               if (checkAlreadyBySigner && checkAlreadyBySigner.length > 0) {
                 const alreadySign = {
                   status: true,
-                  mssg: "You have successfully signed the document!",
+                  mssg: "You have successfully signed the document!"
                 };
                 setIsAlreadySign(alreadySign);
                 setPdfUrl(res[0].SignedUrl);
                 const loadObj = {
-                  isLoad: false,
+                  isLoad: false
                 };
                 setIsLoading(loadObj);
               }
@@ -363,7 +367,7 @@ function EmbedPdfImage() {
                 setSignKey(key);
 
                 const loadObj = {
-                  isLoad: false,
+                  isLoad: false
                 };
                 setIsLoading(loadObj);
               }
@@ -384,7 +388,7 @@ function EmbedPdfImage() {
               setSignKey(key);
 
               const loadObj = {
-                isLoad: false,
+                isLoad: false
               };
               setIsLoading(loadObj);
             }
@@ -392,14 +396,14 @@ function EmbedPdfImage() {
         } else {
           setNoData(true);
           const loadObj = {
-            isLoad: false,
+            isLoad: false
           };
           setIsLoading(loadObj);
         }
       })
       .catch((err) => {
         const loadObj = {
-          isLoad: false,
+          isLoad: false
         };
         setHandleError("Error: Something went wrong!");
         setIsLoading(loadObj);
@@ -414,8 +418,8 @@ function EmbedPdfImage() {
           headers: {
             "Content-Type": "application/json",
             "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-            "X-Parse-Session-Token": localStorage.getItem("accesstoken"),
-          },
+            "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+          }
         }
       )
       .then((Listdata) => {
@@ -426,7 +430,7 @@ function EmbedPdfImage() {
           setDefaultSignImg(res[0].ImageURL);
         }
         const loadObj = {
-          isLoad: false,
+          isLoad: false
         };
         setIsLoading(loadObj);
       })
@@ -438,6 +442,10 @@ function EmbedPdfImage() {
 
   //function for get pdf page details
   const pageDetails = async (pdf) => {
+    const load = {
+      status: true
+    };
+    setPdfLoadFail(load);
     pdf.getPage(1).then((pdfPage) => {
       const pageWidth = pdfPage.view[2];
 
@@ -462,7 +470,7 @@ function EmbedPdfImage() {
     } else {
       const loadObj = {
         isLoad: true,
-        message: "This might take some time",
+        message: "This might take some time"
       };
       setIsLoading(loadObj);
       const url = pdfUrl
@@ -474,7 +482,7 @@ function EmbedPdfImage() {
 
       // Load a PDFDocument from the existing PDF bytes
       const pdfDoc = await PDFDocument.load(existingPdfBytes, {
-        ignoreEncryption: true,
+        ignoreEncryption: true
       });
 
       const pngUrl = xyPostion;
@@ -499,7 +507,7 @@ function EmbedPdfImage() {
               y: page.getHeight() - 10,
               size: fontSize,
               font,
-              color: rgb(0.5, 0.5, 0.5),
+              color: rgb(0.5, 0.5, 0.5)
             });
           }
           pdfBase64 = await pdfDoc.saveAsBase64({ useObjectStreams: false });
@@ -575,7 +583,7 @@ function EmbedPdfImage() {
             y: page.getHeight() - 10,
             size: fontSize,
             font,
-            color: rgb(0.5, 0.5, 0.5),
+            color: rgb(0.5, 0.5, 0.5)
           });
         }
         for (let i = 0; i < pngUrl.length; i++) {
@@ -621,11 +629,14 @@ function EmbedPdfImage() {
             const newWidth = window.innerWidth;
             const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
             page.drawImage(img, {
-              x: imgUrlList[id].xPosition * scale + 50,
+              x: isMobile
+                ? imgUrlList[id].xPosition * scale + 50
+                : imgUrlList[id].xPosition,
+
               y:
                 page.getHeight() - imgUrlList[id].yPosition * scale - imgHeight,
               width: imgWidth,
-              height: imgHeight,
+              height: imgHeight
             });
           });
         }
@@ -674,13 +685,13 @@ function EmbedPdfImage() {
           Bottom: bottomY,
           Width: xyPosData.Width ? xyPosData.Width : 150,
           Height: height,
-          Page: pageNo,
-        },
+          Page: pageNo
+        }
       };
     } else if (xyPostion.length > 0 && xyPostion[0].pos.length > 0) {
       signgleSign = {
         pdfFile: base64Url,
-        docId: docId,
+        docId: docId
       };
     }
 
@@ -692,8 +703,8 @@ function EmbedPdfImage() {
           headers: {
             "Content-Type": "application/json",
             "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-            sessionToken: localStorage.getItem("accesstoken"),
-          },
+            sessionToken: localStorage.getItem("accesstoken")
+          }
         }
       )
       .then((Listdata) => {
@@ -786,7 +797,7 @@ function EmbedPdfImage() {
   //function for set decline true on press decline button
   const declineDoc = async () => {
     const data = {
-      IsDeclined: true,
+      IsDeclined: true
     };
 
     await axios
@@ -799,8 +810,8 @@ function EmbedPdfImage() {
           headers: {
             "Content-Type": "application/json",
             "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-            "X-Parse-Session-Token": localStorage.getItem("accesstoken"),
-          },
+            "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+          }
         }
       )
       .then((result) => {
@@ -808,7 +819,7 @@ function EmbedPdfImage() {
         if (res) {
           const currentDecline = {
             currnt: "YouDeclined",
-            isDeclined: true,
+            isDeclined: true
           };
           setIsDecline(currentDecline);
         }
@@ -834,7 +845,7 @@ function EmbedPdfImage() {
 
       const newXypos = {
         pageNumber: getPageNo,
-        pos: addSign,
+        pos: addSign
       };
       xyDefaultPos.push(newXypos);
     }
@@ -869,14 +880,14 @@ function EmbedPdfImage() {
           "_appName"
         )}${contractName}/${signerUserId}`,
         {
-          TourStatus: updatedTourStatus,
+          TourStatus: updatedTourStatus
         },
         {
           headers: {
             "Content-Type": "application/json",
             "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-            sessionToken: localStorage.getItem("accesstoken"),
-          },
+            "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+          }
         }
       )
       .then((Listdata) => {
@@ -896,20 +907,20 @@ function EmbedPdfImage() {
         selector: '[data-tut="reactourFirst"]',
         content: `You can click "Auto Sign All" to automatically sign at all the locations meant to be signed by you.Make sure that you review the document properly before you click this button.`,
         position: "top",
-        style: { fontSize: "13px" },
+        style: { fontSize: "13px" }
       },
       {
         selector: '[data-tut="reactourSecond"]',
         content: `Click any of such placeholders appearing on the document to sign.You will see the options to draw sign or upload an image once you click here.`,
         position: "top",
-        style: { fontSize: "13px" },
+        style: { fontSize: "13px" }
       },
       {
         selector: '[data-tut="reactourThird"]',
         content: `Click here to finish & download the signed document.You will also receive a copy on your email.`,
         position: "top",
-        style: { fontSize: "13px" },
-      },
+        style: { fontSize: "13px" }
+      }
     ];
 
     const stepsToShow =
@@ -928,6 +939,7 @@ function EmbedPdfImage() {
       />
     );
   };
+
   return (
     <DndProvider backend={HTML5Backend}>
       {isLoading.isLoad ? (
@@ -939,7 +951,10 @@ function EmbedPdfImage() {
       ) : (
         <div className="signatureContainer">
           {/* this component used for UI interaction and show their functionality */}
-          {!isExpired || (!pdfLoadFail && !checkTourStatus && tourFunction())}
+          {pdfLoadFail.status &&
+            !isExpired &&
+            !checkTourStatus &&
+            tourFunction()}
 
           {/* this component used to render all pdf pages in left side */}
           <RenderAllPdfPage
@@ -954,7 +969,7 @@ function EmbedPdfImage() {
           <div
             style={{
               marginLeft: pdfOriginalWidth > 500 && "20px",
-              marginRight: pdfOriginalWidth > 500 && "20px",
+              marginRight: pdfOriginalWidth > 500 && "20px"
             }}
           >
             {/* this modal is used for show decline alert */}
@@ -982,7 +997,7 @@ function EmbedPdfImage() {
                   <>
                     <button
                       style={{
-                        color: "black",
+                        color: "black"
                       }}
                       type="button"
                       className="finishBtn"
@@ -992,7 +1007,7 @@ function EmbedPdfImage() {
                     </button>
                     <button
                       style={{
-                        background: "#de4337",
+                        background: "#de4337"
                       }}
                       type="button"
                       className="finishBtn"
@@ -1004,8 +1019,7 @@ function EmbedPdfImage() {
                 )}
               </Modal.Footer>
             </Modal>
-            {/* this modal component is used for show failed document pdf files */}
-            <ModalComponent isShow={pdfLoadFail} type={"pdfFail"} />
+
             {/* this modal component is used for show expired document */}
             <ModalComponent isShow={isExpired} type={"expire"} />
 
@@ -1025,7 +1039,7 @@ function EmbedPdfImage() {
                     borderRadius: "0px",
                     border: "1.5px solid #e3e2e1",
                     fontWeight: "600",
-                    color: "black",
+                    color: "black"
                   }}
                   className="btn"
                   onClick={() => setIsAlreadySign({ status: false })}
@@ -1036,7 +1050,7 @@ function EmbedPdfImage() {
                   <button
                     onClick={() => addDefaultSignature()}
                     style={{
-                      background: themeColor(),
+                      background: themeColor()
                     }}
                     type="button"
                     className="finishBtn"
@@ -1063,7 +1077,7 @@ function EmbedPdfImage() {
               defaultSign={defaultSignImg}
             />
 
-            {/* pdf header which contain funish back button */}
+            {/* pdf header which contain finish back button */}
             <Header
               recipient={true}
               pdfDetails={completePdfData}
@@ -1095,6 +1109,7 @@ function EmbedPdfImage() {
               recipient={true}
               isAlreadySign={isAlreadySign}
               setPdfLoadFail={setPdfLoadFail}
+              pdfLoadFail={pdfLoadFail}
             />
           </div>
 
diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js
index 9bd6b5f73..2d3314dad 100644
--- a/microfrontends/SignDocuments/src/utils/Utils.js
+++ b/microfrontends/SignDocuments/src/utils/Utils.js
@@ -86,7 +86,7 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
           Width: newWidth,
           Height: nweHeight,
           SignUrl: image.src,
-          ImageType: image.imgType,
+          ImageType: image.imgType
         };
       }
       return url;
@@ -132,7 +132,7 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
           Width: newWidth,
           Height: newHeight,
           SignUrl: image.src,
-          ImageType: image.imgType,
+          ImageType: image.imgType
         };
       }
       return url;
@@ -151,54 +151,54 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
 
 //function for save button to save signature or image url
 export function onSaveSign(xyPostion, index, signKey, signatureImg) {
-  const updateFilter = xyPostion[index].pos.filter(
-    (data) => data.key === signKey && data.SignUrl
-  );
+  // const updateFilter = xyPostion[index].pos.filter(
+  //   (data) => data.key === signKey && data.SignUrl
+  // );
 
-  if (updateFilter.length > 0) {
-    const getXYdata = xyPostion[index].pos;
-    // updateFilter[0].SignUrl = signatureImg;
+  let getXYdata = xyPostion[index].pos;
+  let getPosData = getXYdata;
+  // if (updateFilter.length > 0) {
+  // updateFilter[0].SignUrl = signatureImg;
+  const addSign = getPosData.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,
+        SignUrl: signatureImg
+      };
+    }
+    return url;
+  });
 
-    const getPosData = getXYdata;
-    const addSign = getPosData.map((url, ind) => {
-      if (url.key === signKey) {
-        return {
-          ...url,
-          Width: 150,
-          Height: 60,
-          SignUrl: signatureImg,
-        };
-      }
-      return url;
-    });
+  const newUpdateUrl = xyPostion.map((obj, ind) => {
+    if (ind === index) {
+      return { ...obj, pos: addSign };
+    }
+    return obj;
+  });
+  return newUpdateUrl;
+  // } else {
+  //   const addSign = getPosData.map((url, ind) => {
+  //     if (url.key === signKey) {
+  //       return {
+  //         ...url,
+  //         SignUrl: signatureImg,
+  //         Width: getPosData[0].Width ? getPosData[0].Width : 150,
+  //         Height: getPosData[0].Height ? getPosData[0].Height : 60
+  //       };
+  //     }
+  //     return url;
+  //   });
 
-    const newUpdateUrl = xyPostion.map((obj, ind) => {
-      if (ind === index) {
-        return { ...obj, pos: addSign };
-      }
-      return obj;
-    });
-    return newUpdateUrl;
-  } else {
-    const getXYdata = xyPostion[index].pos;
-
-    const getPosData = getXYdata;
-
-    const addSign = getPosData.map((url, ind) => {
-      if (url.key === signKey) {
-        return { ...url, SignUrl: signatureImg, Width: 150, Height: 60 };
-      }
-      return url;
-    });
-
-    const newUpdateUrl = xyPostion.map((obj, ind) => {
-      if (ind === index) {
-        return { ...obj, pos: addSign };
-      }
-      return obj;
-    });
-    return newUpdateUrl;
-  }
+  //   const newUpdateUrl = xyPostion.map((obj, ind) => {
+  //     if (ind === index) {
+  //       return { ...obj, pos: addSign };
+  //     }
+  //     return obj;
+  //   });
+  //   return newUpdateUrl;
+  // }
 }
 
 //function for getting contract_User details
@@ -212,8 +212,8 @@ export const contractUsers = async (objectId) => {
         headers: {
           "Content-Type": "application/json",
           "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-          "X-Parse-Session-Token": localStorage.getItem("accesstoken"),
-        },
+          "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+        }
       }
     )
     .then((Listdata) => {
@@ -239,8 +239,8 @@ export const contactBook = async (objectId) => {
         headers: {
           "Content-Type": "application/json",
           "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-          "X-Parse-Session-Token": localStorage.getItem("accesstoken"),
-        },
+          "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+        }
       }
     )
     .then((Listdata) => {
@@ -265,8 +265,8 @@ export const contactBookName = async (userPhone, className) => {
         headers: {
           "Content-Type": "application/json",
           "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-          "X-Parse-Session-Token": localStorage.getItem("accesstoken"),
-        },
+          "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+        }
       }
     )
     .then((Listdata) => {
@@ -278,3 +278,5 @@ export const contactBookName = async (userPhone, className) => {
     });
   return result;
 };
+
+