diff --git a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js
index f6b022649..20a4d3b5e 100644
--- a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js
+++ b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js
@@ -7,6 +7,7 @@ import Modal from "react-bootstrap/Modal";
 import ModalHeader from "react-bootstrap/esm/ModalHeader";
 import { themeColor, iconColor } from "../../utils/ThemeColor/backColor";
 import { getDrive } from "../../utils/Utils";
+import AlertComponent from "../component/alertComponent";
 
 function PdfFile() {
   const scrollRef = useRef(null);
@@ -26,6 +27,7 @@ function PdfFile() {
   const [docId, setDocId] = useState();
   const [handleError, setHandleError] = useState();
   const [folderName, setFolderName] = useState([]);
+  const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" });
   const currentUser =
     localStorage.getItem(
       `Parse/${localStorage.getItem("parseAppId")}/currentUser`
@@ -219,8 +221,10 @@ function PdfFile() {
           }
         })
         .catch((err) => {
-          console.log("axois err ", err);
-          alert("something went wrong");
+          setIsAlert({
+            isShow: true,
+            alertMessage: "something went wrong"
+          });
         });
     } else {
       setError("Please fill out this field");
@@ -324,6 +328,11 @@ function PdfFile() {
   return (
     <div className="folderComponent ">
       <div>
+        <AlertComponent
+          isShow={isAlert.isShow}
+          alertMessage={isAlert.alertMessage}
+          setIsAlert={setIsAlert}
+        />
         <Modal show={isFolder}>
           <ModalHeader style={{ background: themeColor() }}>
             <span style={{ color: "white" }}>Add New Folder</span>
diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
index 71f2dc1b3..4bd54bbf9 100644
--- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
+++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
@@ -20,7 +20,9 @@ import {
   multiSignEmbed,
   embedDocId,
   pdfNewWidthFun,
-  signPdfFun
+  signPdfFun,
+  calculateImgAspectRatio,
+  onImageSelect
 } from "../utils/Utils";
 import Loader from "./component/loader";
 import HandleError from "./component/HandleError";
@@ -28,6 +30,7 @@ import Nodata from "./component/Nodata";
 import Header from "./component/header";
 import RenderPdf from "./component/renderPdf";
 import CustomModal from "./component/CustomModal";
+import AlertComponent from "./component/alertComponent";
 
 function PdfRequestFiles() {
   const { docId } = useParams();
@@ -61,7 +64,7 @@ function PdfRequestFiles() {
   const [isUiLoading, setIsUiLoading] = useState(false);
   const [isDecline, setIsDecline] = useState({ isDeclined: false });
   const [currentSigner, setCurrentSigner] = useState(false);
-
+  const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" });
   const [isCompleted, setIsCompleted] = useState({
     isCertificate: false,
     isModal: false
@@ -290,26 +293,23 @@ function PdfRequestFiles() {
       );
       for (let i = 0; i < checkSign.length; i++) {
         const posData = checkSign[i].pos.filter((pos) => !pos.SignUrl);
-
         if (posData && posData.length > 0) {
           checkSignUrl.push(posData);
         }
       }
 
       if (checkSignUrl && checkSignUrl.length > 0) {
-        alert("Please complete your signature!");
+        setIsAlert({
+          isShow: true,
+          alertMessage: "Please complete your signature!"
+        });
       } else {
         setIsUiLoading(true);
-
-        const url = pdfUrl;
-
         const pngUrl = checkUser[0].placeHolder;
-
         // Load a PDFDocument from the existing PDF bytes
-        const existingPdfBytes = await fetch(url).then((res) =>
+        const existingPdfBytes = await fetch(pdfUrl).then((res) =>
           res.arrayBuffer()
         );
-
         const pdfDoc = await PDFDocument.load(existingPdfBytes, {
           ignoreEncryption: true
         });
@@ -318,22 +318,33 @@ function PdfRequestFiles() {
         //checking if signature is only one then send image url in jpeg formate to server
         if (pngUrl.length === 1 && pngUrl[0].pos.length === 1) {
           if (isDocId) {
-            pdfBase64 = await getBase64FromUrl(url);
+            try {
+              pdfBase64 = await getBase64FromUrl(pdfUrl);
+            } catch (err) {
+              console.log(err);
+            }
           } else {
             //embed document's object id to all pages in pdf document
-            await embedDocId(pdfDoc, documentId, allPages);
-            pdfBase64 = await pdfDoc.saveAsBase64({
-              useObjectStreams: false
-            });
+            try {
+              await embedDocId(pdfDoc, documentId, allPages);
+            } catch (err) {
+              console.log(err);
+            }
+            try {
+              pdfBase64 = await pdfDoc.saveAsBase64({
+                useObjectStreams: false
+              });
+            } catch (err) {
+              console.log(err);
+            }
           }
-          for (let i = 0; i < pngUrl.length; i++) {
-            const imgUrlList = pngUrl[i].pos;
-            const pageNo = pngUrl[i].pageNumber;
+          for (let pngData of pngUrl) {
+            const imgUrlList = pngData.pos;
+            const pageNo = pngData.pageNumber;
             imgUrlList.map(async (data) => {
               //cheking signUrl is defau;t signature url of custom url
               let ImgUrl = data.SignUrl;
               const checkUrl = urlValidator(ImgUrl);
-
               //if default signature url then convert it in base 64
               if (checkUrl) {
                 ImgUrl = await getBase64FromIMG(ImgUrl + "?get");
@@ -348,17 +359,17 @@ function PdfRequestFiles() {
                   );
 
                   //function for call to embed signature in pdf and get digital signature pdf
-
                   signPdfFun(
                     newImgUrl,
                     documentId,
                     signerObjectId,
                     pdfOriginalWidth,
                     pngUrl,
+                    containerWH,
+                    setIsAlert,
                     data,
                     pdfBase64,
-                    pageNo,
-                    containerWH
+                    pageNo
                   )
                     .then((res) => {
                       if (res && res.status === "success") {
@@ -368,11 +379,17 @@ function PdfRequestFiles() {
                         setUnSignedSigners([]);
                         getDocumentDetails();
                       } else {
-                        alert("something went wrong");
+                        setIsAlert({
+                          isShow: true,
+                          alertMessage: "something went wrong"
+                        });
                       }
                     })
                     .catch((err) => {
-                      alert("something went wrong");
+                      setIsAlert({
+                        isShow: true,
+                        alertMessage: "something went wrong"
+                      });
                     });
                 })
                 .catch((error) => {
@@ -383,6 +400,7 @@ function PdfRequestFiles() {
         }
         //else if signature is more than one then embed all sign with the use of pdf-lib
         else if (pngUrl.length > 0 && pngUrl[0].pos.length > 0) {
+          const flag = false;
           //embed document's object id to all pages in pdf document
           await embedDocId(pdfDoc, documentId, allPages);
           //embed multi signature in pdf
@@ -390,39 +408,48 @@ function PdfRequestFiles() {
             pngUrl,
             pdfDoc,
             pdfOriginalWidth,
-            false
+            flag,
+            containerWH
           );
 
           //function for call to embed signature in pdf and get digital signature pdf
-          signPdfFun(
-            pdfBytes,
-            documentId,
-            signerObjectId,
-            pdfOriginalWidth,
-            pngUrl,
-            containerWH
-          )
-            .then((res) => {
-              if (res && res.status === "success") {
-                setPdfUrl(res.data);
-                setIsSigned(true);
-                setSignedSigners([]);
-                setUnSignedSigners([]);
-                getDocumentDetails();
-              } else {
-                alert("something went wrong");
-              }
-            })
-            .catch((err) => {
-              alert("something went wrong");
+          try {
+            const res = await signPdfFun(
+              pdfBytes,
+              documentId,
+              signerObjectId,
+              pdfOriginalWidth,
+              pngUrl,
+              containerWH,
+              setIsAlert
+            );
+            if (res && res.status === "success") {
+              setPdfUrl(res.data);
+              setIsSigned(true);
+              setSignedSigners([]);
+              setUnSignedSigners([]);
+              getDocumentDetails();
+            } else {
+              setIsAlert({
+                isShow: true,
+                alertMessage: "something went wrong"
+              });
+            }
+          } catch (err) {
+            setIsAlert({
+              isShow: true,
+              alertMessage: "something went wrong"
             });
+          }
         }
 
         setIsSignPad(false);
       }
     } else {
-      console.log("something went wrong!");
-      alert("something went wrong!");
+      setIsAlert({
+        isShow: true,
+        alertMessage: "something went wrong"
+      });
     }
   }
 
@@ -451,35 +478,7 @@ function PdfRequestFiles() {
   //function for image upload or update
   const onImageChange = (event) => {
     if (event.target.files && event.target.files[0]) {
-      const imageType = event.target.files[0].type;
-      const reader = new FileReader();
-      reader.readAsDataURL(event.target.files[0]);
-      reader.onloadend = function (e) {
-        let width, height;
-        const image = new Image();
-        image.src = e.target.result;
-        image.onload = function () {
-          width = image.width;
-          height = image.height;
-          const aspectRatio = 460 / 184;
-          const imgR = width / height;
-
-          if (imgR > aspectRatio) {
-            width = 460;
-            height = 460 / imgR;
-          } else {
-            width = 184 * imgR;
-            height = 184;
-          }
-          setImgWH({ width: width, height: height });
-          imageRef.current.style.width = `${width}px`;
-          imageRef.current.style.height = `${height}px`;
-        };
-
-        image.src = reader.result;
-
-        setImage({ src: image.src, imgType: imageType });
-      };
+      onImageSelect(event, setImgWH, setImage);
     }
   };
   //function for upload stamp image
@@ -487,7 +486,6 @@ function PdfRequestFiles() {
     const currentSigner = signerPos.filter(
       (data) => data.signerObjId === signerObjectId
     );
-
     const i = currentSigner[0].placeHolder.findIndex((object) => {
       return object.pageNumber === pageNumber;
     });
@@ -495,34 +493,16 @@ function PdfRequestFiles() {
       (data) =>
         data.key === signKey && data.Width && data.Height && data.SignUrl
     );
-
+    let getIMGWH = calculateImgAspectRatio(imgWH);
     if (updateFilter.length > 0) {
-      let newWidth, nweHeight;
-      const aspectRatio = imgWH.width / imgWH.height;
       const getXYdata = currentSigner[0].placeHolder[i].pos;
-      if (aspectRatio === 1) {
-        newWidth = aspectRatio * 100;
-        nweHeight = aspectRatio * 100;
-      } else if (aspectRatio < 2) {
-        newWidth = aspectRatio * 100;
-        nweHeight = 100;
-      } else if (aspectRatio > 2 && aspectRatio < 4) {
-        newWidth = aspectRatio * 70;
-        nweHeight = 70;
-      } else if (aspectRatio > 4) {
-        newWidth = aspectRatio * 40;
-        nweHeight = 40;
-      } else if (aspectRatio > 5) {
-        newWidth = aspectRatio * 10;
-        nweHeight = 10;
-      }
       const getPosData = getXYdata;
       const addSign = getPosData.map((url, ind) => {
         if (url.key === signKey) {
           return {
             ...url,
-            Width: newWidth,
-            Height: nweHeight,
+            Width: getIMGWH.newWidth,
+            Height: getIMGWH.newHeight,
             SignUrl: image.src,
             ImageType: image.imgType
           };
@@ -546,32 +526,12 @@ function PdfRequestFiles() {
 
       const getPosData = getXYdata;
 
-      const aspectRatio = imgWH.width / imgWH.height;
-
-      let newWidth, nweHeight;
-      if (aspectRatio === 1) {
-        newWidth = aspectRatio * 100;
-        nweHeight = aspectRatio * 100;
-      } else if (aspectRatio < 2) {
-        newWidth = aspectRatio * 100;
-        nweHeight = 100;
-      } else if (aspectRatio > 2 && aspectRatio < 4) {
-        newWidth = aspectRatio * 70;
-        nweHeight = 70;
-      } else if (aspectRatio > 4) {
-        newWidth = aspectRatio * 40;
-        nweHeight = 40;
-      } else if (aspectRatio > 5) {
-        newWidth = aspectRatio * 10;
-        nweHeight = 10;
-      }
-
       const addSign = getPosData.map((url, ind) => {
         if (url.key === signKey) {
           return {
             ...url,
-            Width: newWidth,
-            Height: nweHeight,
+            Width: getIMGWH.newWidth,
+            Height: getIMGWH.newHeight,
             SignUrl: image.src,
             ImageType: image.imgType
           };
@@ -597,10 +557,22 @@ function PdfRequestFiles() {
   //function for save button to save signature or image url
   const onSaveSign = (isDefaultSign) => {
     const signatureImg = isDefaultSign ? defaultSignImg : signature;
+    const isSign = true;
+    let getIMGWH;
     setIsSignPad(false);
     setIsImageSelect(false);
     setImage();
-
+    if (isDefaultSign) {
+      const img = new Image();
+      img.src = defaultSignImg;
+      if (img.complete) {
+        let imgWH = {
+          width: img.width,
+          height: img.height
+        };
+        getIMGWH = calculateImgAspectRatio(imgWH);
+      }
+    }
     const currentSigner = signerPos.filter(
       (data) => data.signerObjId === signerObjectId
     );
@@ -614,15 +586,36 @@ function PdfRequestFiles() {
     updateFilter = currentSigner[0].placeHolder[i].pos.filter(
       (data) => data.key === signKey && data.SignUrl
     );
-
+    const getXYdata = currentSigner[0].placeHolder[i].pos;
+    const getPosData = getXYdata;
+    const posWidth = isDefaultSign
+      ? getIMGWH.newWidth
+      : isSign && getPosData[0].ImageType
+        ? 150
+        : getPosData[0].Width
+          ? getPosData[0].Width
+          : 150;
+    const posHidth = isDefaultSign
+      ? getIMGWH.newHeight
+      : isSign && getPosData[0].ImageType
+        ? 60
+        : getPosData[0].Height
+          ? getPosData[0].Height
+          : 60;
     if (updateFilter.length > 0) {
       updateFilter[0].SignUrl = signatureImg;
+      updateFilter[0].Width = posWidth;
+      updateFilter[0].Height = posHidth;
     } else {
-      const getXYdata = currentSigner[0].placeHolder[i].pos;
-      const getPosData = getXYdata;
       const addSign = getPosData.map((url, ind) => {
         if (url.key === signKey) {
-          return { ...url, SignUrl: signatureImg };
+          return {
+            ...url,
+            SignUrl: signatureImg,
+            Width: posWidth,
+            Height: posHidth,
+            ImageType: "sign"
+          };
         }
         return url;
       });
@@ -729,6 +722,11 @@ function PdfRequestFiles() {
           )}
 
           <div className="signatureContainer" ref={divRef}>
+            <AlertComponent
+              isShow={isAlert.isShow}
+              alertMessage={isAlert.alertMessage}
+              setIsAlert={setIsAlert}
+            />
             {/* this modal is used to show decline alert */}
             <CustomModal
               containerWH={containerWH}
diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
index f955a6fd3..e1fad20b6 100644
--- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
+++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
@@ -21,7 +21,9 @@ import {
   getBase64FromIMG,
   embedDocId,
   multiSignEmbed,
-  pdfNewWidthFun
+  pdfNewWidthFun,
+  addDefaultSignatureImg,
+  onImageSelect
 } from "../utils/Utils";
 import { useParams } from "react-router-dom";
 import Tour from "reactour";
@@ -33,6 +35,7 @@ import Header from "./component/header";
 import RenderPdf from "./component/renderPdf";
 import { contractUsers, contactBook, urlValidator } from "../utils/Utils";
 import { modalAlign } from "../utils/Utils";
+import AlertComponent from "./component/alertComponent";
 
 //For signYourself inProgress section signer can add sign and complete doc sign.
 function SignYourSelf() {
@@ -83,6 +86,7 @@ function SignYourSelf() {
     status: false,
     type: "load"
   });
+  const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" });
   const divRef = useRef(null);
   const nodeRef = useRef(null);
   const [{ isOver }, drop] = useDrop({
@@ -401,14 +405,22 @@ function SignYourSelf() {
 
     for (let i = 0; i < xyPostion.length; i++) {
       const posData = xyPostion[i].pos.filter((pos) => !pos.SignUrl);
-
       if (posData && posData.length > 0) {
         checkSignUrl.push(posData);
       }
     }
-
-    if (checkSignUrl && checkSignUrl.length > 0) {
-      alert("Please complete your signature!");
+    if (xyPostion.length === 0) {
+      setIsAlert({
+        isShow: true,
+        alertMessage: "Please complete your signature!"
+      });
+      return;
+    } else if (xyPostion.length > 0 && checkSignUrl.length > 0) {
+      setIsAlert({
+        isShow: true,
+        alertMessage: "Please complete your signature!"
+      });
+      return;
     } else {
       setIsCeleb(true);
       setTimeout(() => {
@@ -429,7 +441,7 @@ function SignYourSelf() {
       const pdfDoc = await PDFDocument.load(existingPdfBytes, {
         ignoreEncryption: true
       });
-      const pngUrl = xyPostion;
+
       //checking if signature is only one then send image url in jpeg formate to server
       if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) {
         //embed document's object id to all pages in pdf document
@@ -437,15 +449,14 @@ function SignYourSelf() {
         const pdfBase64 = await pdfDoc.saveAsBase64({
           useObjectStreams: false
         });
-        for (let i = 0; i < xyPostion.length; i++) {
-          const imgUrlList = xyPostion[i].pos;
-          const pageNo = xyPostion[i].pageNumber;
 
+        for (let xyData of xyPostion) {
+          const imgUrlList = xyData.pos;
+          const pageNo = xyData.pageNumber;
           imgUrlList.map(async (data) => {
             let ImgUrl = data.SignUrl;
             //cheking signUrl is defau;t signature url of custom url
             const checkUrl = urlValidator(ImgUrl);
-
             //if default signature url then convert it in base 64
             if (checkUrl) {
               ImgUrl = await getBase64FromIMG(ImgUrl + "?get");
@@ -469,17 +480,20 @@ function SignYourSelf() {
       }
       //else if signature is more than one then embed all sign with the use of pdf-lib
       else if (xyPostion.length > 0 && xyPostion[0].pos.length > 0) {
+        const flag = true;
         //embed document's object id to all pages in pdf document
         await embedDocId(pdfDoc, documentId, allPages);
+
         //embed multi signature in pdf
         const pdfBytes = await multiSignEmbed(
-          pngUrl,
+          xyPostion,
           pdfDoc,
           pdfOriginalWidth,
-          true,
+          flag,
           containerWH
         );
 
+        //function for call to embed signature in pdf and get digital signature pdf
         signPdfFun(pdfBytes, documentId);
       }
       setIsSignPad(false);
@@ -500,7 +514,7 @@ function SignYourSelf() {
     let singleSign;
     const newWidth = containerWH.width;
     const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
-    const imgWidth = xyPosData ? xyPosData.Width : 150;
+
     if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) {
       const height = xyPosData.Height ? xyPosData.Height : 60;
       const bottomY = xyPosData.isDrag
@@ -623,54 +637,43 @@ function SignYourSelf() {
   //function for image upload or update
   const onImageChange = (event) => {
     if (event.target.files && event.target.files[0]) {
-      const imageType = event.target.files[0].type;
-
-      const reader = new FileReader();
-      reader.readAsDataURL(event.target.files[0]);
-
-      reader.onloadend = function (e) {
-        let width, height;
-        const image = new Image();
-
-        image.src = e.target.result;
-        image.onload = function () {
-          width = image.width;
-          height = image.height;
-          const aspectRatio = 460 / 184;
-          const imgR = width / height;
-
-          if (imgR > aspectRatio) {
-            width = 460;
-            height = 460 / imgR;
-          } else {
-            width = 184 * imgR;
-            height = 184;
-          }
-          setImgWH({ width: width, height: height });
-          imageRef.current.style.width = `${width}px`;
-          imageRef.current.style.height = `${height}px`;
-        };
-
-        image.src = reader.result;
-
-        setImage({ src: image.src, imgType: imageType });
-      };
+      onImageSelect(event, setImgWH, setImage);
     }
   };
 
+  //function for upload stamp or image
+  const saveImage = () => {
+    const getImage = onSaveImage(xyPostion, index, signKey, imgWH, image);
+    setXyPostion(getImage);
+  };
+
   //function for save button to save signature or image url
   const saveSign = (isDefaultSign) => {
     const signatureImg = isDefaultSign ? defaultSignImg : signature;
+    const signFlag = true;
+    let imgWH = { width: "", height: "" };
     setIsSignPad(false);
-
     setIsImageSelect(false);
-
     setImage();
+
+    if (isDefaultSign) {
+      const img = new Image();
+      img.src = defaultSignImg;
+      if (img.complete) {
+        imgWH = {
+          width: img.width,
+          height: img.height
+        };
+      }
+    }
     const getUpdatePosition = onSaveSign(
       xyPostion,
       index,
       signKey,
-      signatureImg
+      signatureImg,
+      imgWH,
+      isDefaultSign,
+      signFlag
     );
 
     setXyPostion(getUpdatePosition);
@@ -729,35 +732,11 @@ function SignYourSelf() {
     }
   };
 
-  //function for upload stamp or image
-  const saveImage = () => {
-    const getImage = onSaveImage(xyPostion, index, signKey, imgWH, image);
-    setXyPostion(getImage);
-  };
-
   //function for add default signature url in local array
   const addDefaultSignature = () => {
-    let xyDefaultPos = [];
-    for (let i = 0; i < xyPostion.length; i++) {
-      const getXYdata = xyPostion[i].pos;
-      const getPageNo = xyPostion[i].pageNumber;
-      const getPosData = getXYdata;
-
-      const addSign = getPosData.map((url, ind) => {
-        if (url) {
-          return { ...url, SignUrl: defaultSignImg };
-        }
-        return url;
-      });
+    const getXyData = addDefaultSignatureImg(xyPostion, defaultSignImg);
 
-      const newXypos = {
-        pageNumber: getPageNo,
-        pos: addSign
-      };
-      xyDefaultPos.push(newXypos);
-    }
-
-    setXyPostion(xyDefaultPos);
+    setXyPostion(getXyData);
     setShowAlreadySignDoc({ status: false });
   };
   const tourConfig = [
@@ -856,8 +835,12 @@ function SignYourSelf() {
               marginRight: !isMobile && pdfOriginalWidth > 500 && "20px"
             }}
           >
+            <AlertComponent
+              isShow={isAlert.isShow}
+              alertMessage={isAlert.alertMessage}
+              setIsAlert={setIsAlert}
+            />
             {/* this modal is used show this document is already sign */}
-
             <Modal
               show={showAlreadySignDoc.status}
               onShow={() => modalAlign()}
@@ -921,9 +904,9 @@ function SignYourSelf() {
               isCeleb={isCeleb}
               setIsEmail={setIsEmail}
               pdfName={pdfDetails[0] && pdfDetails[0].Name}
-              signObjId={documentId}
               setSuccessEmail={setSuccessEmail}
               sender={jsonSender}
+              setIsAlert={setIsAlert}
             />
             {/* pdf header which contain funish back button */}
             <Header
diff --git a/microfrontends/SignDocuments/src/Component/component/alertComponent.js b/microfrontends/SignDocuments/src/Component/component/alertComponent.js
new file mode 100644
index 000000000..f242e87a2
--- /dev/null
+++ b/microfrontends/SignDocuments/src/Component/component/alertComponent.js
@@ -0,0 +1,79 @@
+import React from "react";
+import Modal from "react-bootstrap/Modal";
+import ModalHeader from "react-bootstrap/esm/ModalHeader";
+import { themeColor } from "../../utils/ThemeColor/backColor";
+
+function AlertComponent({
+  isShow,
+  alertMessage,
+  setIsAlert,
+  isdefaultSign,
+  addDefaultSignature,
+  headBG
+}) {
+  return (
+    <Modal show={isShow}>
+      <ModalHeader
+        style={{
+          color: "white",
+          background: headBG ? themeColor() : "#dc3545"
+        }}
+      >
+        <span>Alert</span>
+      </ModalHeader>
+
+      <Modal.Body>
+        <span>{alertMessage}</span>
+      </Modal.Body>
+      <Modal.Footer>
+        {isdefaultSign ? (
+          <>
+            <button
+              onClick={() => addDefaultSignature()}
+              style={{
+                background: themeColor()
+              }}
+              type="button"
+              className="finishBtn"
+            >
+              Yes
+            </button>
+            <button
+              onClick={() => {
+                setIsAlert({
+                  isShow: false,
+                  alertMessage: ""
+                });
+              }}
+              style={{
+                color: "black"
+              }}
+              type="button"
+              className="finishBtn"
+            >
+              Close
+            </button>
+          </>
+        ) : (
+          <button
+            onClick={() => {
+              setIsAlert({
+                isShow: false,
+                alertMessage: ""
+              });
+            }}
+            style={{
+              color: "black"
+            }}
+            type="button"
+            className="finishBtn"
+          >
+            Ok
+          </button>
+        )}
+      </Modal.Footer>
+    </Modal>
+  );
+}
+
+export default AlertComponent;
diff --git a/microfrontends/SignDocuments/src/Component/component/defaultSignature.js b/microfrontends/SignDocuments/src/Component/component/defaultSignature.js
index 5bc7fedd9..c79d0f8d6 100644
--- a/microfrontends/SignDocuments/src/Component/component/defaultSignature.js
+++ b/microfrontends/SignDocuments/src/Component/component/defaultSignature.js
@@ -1,20 +1,17 @@
 import React from "react";
- 
 
 function DefaultSignature({
   themeColor,
   defaultSignImg,
-  setShowAlreadySignDoc,
-  xyPostion
+  xyPostion,
+  setIsAlert
 }) {
   const confirmToaddDefaultSign = () => {
     if (xyPostion.length > 0) {
-      const alreadySign = {
-        status: true,
-        mssg: "Are you sure you want to sign at requested locations?",
-        sure: true
-      };
-      setShowAlreadySignDoc(alreadySign);
+      setIsAlert({
+        isShow: true,
+        alertMessage: "Are you sure you want to sign at requested locations?"
+      });
     } else {
       alert("please select position!");
     }
diff --git a/microfrontends/SignDocuments/src/Component/component/emailComponent.js b/microfrontends/SignDocuments/src/Component/component/emailComponent.js
index 5854c8749..5d7691e68 100644
--- a/microfrontends/SignDocuments/src/Component/component/emailComponent.js
+++ b/microfrontends/SignDocuments/src/Component/component/emailComponent.js
@@ -16,9 +16,9 @@ function EmailComponent({
   isCeleb,
   setIsEmail,
   setSuccessEmail,
-  signObjId,
   pdfName,
-  sender
+  sender,
+  setIsAlert
 }) {
   const [emailList, setEmailList] = useState([]);
   const [emailValue, setEmailValue] = useState();
@@ -62,11 +62,15 @@ function EmailComponent({
       } catch (error) {
         console.log("error", error);
         setIsLoading(false);
-        alert("Something went wrong!");
+        setIsEmail(false);
+        setIsAlert({
+          isShow: true,
+          alertMessage: "something went wrong"
+        });
       }
     }
 
-    if (sendMail.data.result.status === "success") {
+    if (sendMail && sendMail.data.result.status === "success") {
       setSuccessEmail(true);
       setTimeout(() => {
         setSuccessEmail(false);
@@ -76,12 +80,20 @@ function EmailComponent({
       }, 1500);
 
       setIsLoading(false);
-    } else if (sendMail.data.result.status === "error") {
+    } else if (sendMail && sendMail.data.result.status === "error") {
       setIsLoading(false);
-      alert("Something went wrong!");
+      setIsEmail(false);
+      setIsAlert({
+        isShow: true,
+        alertMessage: "something went wrong"
+      });
     } else {
       setIsLoading(false);
-      alert("Something went wrong!");
+      setIsEmail(false);
+      setIsAlert({
+        isShow: true,
+        alertMessage: "something went wrong"
+      });
     }
   };
 
diff --git a/microfrontends/SignDocuments/src/Component/component/modalComponent.js b/microfrontends/SignDocuments/src/Component/component/modalComponent.js
index 589c5a2ba..8ab872e35 100644
--- a/microfrontends/SignDocuments/src/Component/component/modalComponent.js
+++ b/microfrontends/SignDocuments/src/Component/component/modalComponent.js
@@ -1,13 +1,16 @@
 import React from "react";
 import Modal from "react-bootstrap/Modal";
 import ModalHeader from "react-bootstrap/esm/ModalHeader";
-
+import { useNavigate } from "react-router-dom";
 function ModalComponent({ isShow, type, setIsShowEmail }) {
+  const navigate = useNavigate();
   return (
     <Modal show={isShow}>
       <ModalHeader className="bg-danger" style={{ color: "white" }}>
         {type === "signersAlert" ? (
           <span>Select signers</span>
+        ) : type === "alreadyPlace" ? (
+          <span>Already Placed!</span>
         ) : (
           <span>Document Expired!</span>
         )}
@@ -16,24 +19,42 @@ function ModalComponent({ isShow, type, setIsShowEmail }) {
       <Modal.Body>
         {type === "signersAlert" ? (
           <p>Please select signer for add placeholder!</p>
+        ) : type === "alreadyPlace" ? (
+          <p>Already set placeHolder for this document.</p>
         ) : (
           <p>This Document is no longer available.</p>
         )}
       </Modal.Body>
       <Modal.Footer>
-      {type === "signersAlert" &&(
-        <button
-          onClick={() => {
-            setIsShowEmail(false);
-          }}
-          style={{
-            color: "black"
-          }}
-          type="button"
-          className="finishBtn"
-        >
-          Ok
-        </button>)}
+        {type === "signersAlert" ? (
+          <button
+            onClick={() => {
+              setIsShowEmail(false);
+            }}
+            style={{
+              color: "black"
+            }}
+            type="button"
+            className="finishBtn"
+          >
+            Ok
+          </button>
+        ) : (
+          type === "alreadyPlace" && (
+            <button
+              onClick={() => {
+                navigate(-1);
+              }}
+              style={{
+                color: "black"
+              }}
+              type="button"
+              className="finishBtn"
+            >
+              Ok
+            </button>
+          )
+        )}
       </Modal.Footer>
     </Modal>
   );
diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js
index 8e7626d8b..a3990fe61 100644
--- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js
+++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js
@@ -59,30 +59,60 @@ function RenderPdf({
     let width;
     if (isMobile) {
       if (!pos.isMobile) {
-        width = pos.Width / scale ? pos.Width / scale : 150 / scale;
-        return width;
+        if (pos.IsResize) {
+          width = pos.Width ? pos.Width : 150;
+          return width;
+        } else {
+          width = (pos.Width || 150) / scale;
+          return width;
+        }
       } else {
         width = pos.Width ? pos.Width : 150;
         return width;
       }
     } else {
-      width = pos.Width ? pos.Width : 150;
-      return width;
+      if (pos.isMobile) {
+        if (pos.IsResize) {
+          width = pos.Width ? pos.Width : 150;
+          return width;
+        } else {
+          width = (pos.Width || 150) * pos.scale;
+          return width;
+        }
+      } else {
+        width = pos.Width ? pos.Width : 150;
+        return width;
+      }
     }
   };
   const posHeight = (pos) => {
-    let width;
+    let height;
     if (isMobile) {
       if (!pos.isMobile) {
-        width = pos.Height / scale ? pos.Height / scale : 60 / scale;
-        return width;
+        if (pos.IsResize) {
+          height = pos.Height ? pos.Height : 60;
+          return height;
+        } else {
+          height = (pos.Height || 60) / scale;
+          return height;
+        }
       } else {
-        width = pos.Height ? pos.Height : 60;
-        return width;
+        height = pos.Height ? pos.Height : 60;
+        return height;
       }
     } else {
-      width = pos.Height ? pos.Height : 60;
-      return width;
+      if (pos.isMobile) {
+        if (pos.IsResize) {
+          height = pos.Height ? pos.Height : 60;
+          return height;
+        } else {
+          height = (pos.Height || 60) * pos.scale;
+          return height;
+        }
+      } else {
+        height = pos.Height ? pos.Height : 60;
+        return height;
+      }
     }
   };
 
@@ -99,7 +129,7 @@ function RenderPdf({
       if (isMobile) {
         //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
         if (!pos.isMobile) {
-          return pos.xPosition / scale - 32;
+          return pos.xPosition / scale;
         }
         //pos.isMobile true -- placeholder save from mobile view(small device)  handle position in mobile view(small screen) view divided by scale
         else {
@@ -169,7 +199,8 @@ function RenderPdf({
                             data.signerObjId === signerObjectId
                               ? "pointer"
                               : "not-allowed",
-                          borderColor: themeColor()
+                          borderColor: themeColor(),
+                          background: data.blockColor
                         }}
                         className="placeholderBlock"
                         size={{
@@ -186,10 +217,13 @@ function RenderPdf({
                             pageNumber,
                             setSignerPos,
                             pdfOriginalWidth,
-                            containerWH
+                            containerWH,
+                            true
                           );
                         }}
-                        lockAspectRatio={pos.Width && 2.5}
+                        lockAspectRatio={
+                          pos.Width ? pos.Width / pos.Height : 2.5
+                        }
                         default={{
                           x: xPos(pos),
                           y: yPos(pos)
@@ -413,7 +447,8 @@ function RenderPdf({
                                         bounds="parent"
                                         style={{
                                           cursor: "all-scroll",
-                                          borderColor: themeColor()
+                                          borderColor: themeColor(),
+                                          background: data.blockColor
                                         }}
                                         className="placeholderBlock"
                                         onDrag={() =>
@@ -464,6 +499,7 @@ function RenderPdf({
                                             setSignerPos,
                                             pdfOriginalWidth,
                                             containerWH,
+                                            false,
                                             setIsResize
                                           );
                                         }}
@@ -739,10 +775,12 @@ function RenderPdf({
                                   }}
                                   className="placeholderBlock"
                                   size={{
-                                    width: pos.Width ? pos.Width : 150,
-                                    height: pos.Height ? pos.Height : 60
+                                    width: posWidth(pos),
+                                    height: posHeight(pos)
                                   }}
-                                  lockAspectRatio={pos.Width && 2.5}
+                                  lockAspectRatio={
+                                    pos.Width ? pos.Width / pos.Height : 2.5
+                                  }
                                   //if pos.isMobile false -- placeholder saved from mobile view then handle position in desktop view to multiply by scale
 
                                   default={{
@@ -828,6 +866,7 @@ function RenderPdf({
                                           bounds="parent"
                                           style={{
                                             cursor: "all-scroll",
+                                            background: data.blockColor,
                                             borderColor: themeColor()
                                           }}
                                           className="placeholderBlock"
@@ -878,6 +917,7 @@ function RenderPdf({
                                               setSignerPos,
                                               pdfOriginalWidth,
                                               containerWH,
+                                              false,
                                               setIsResize
                                             );
                                           }}
diff --git a/microfrontends/SignDocuments/src/Component/component/signPad.js b/microfrontends/SignDocuments/src/Component/component/signPad.js
index ddbe292a3..d077547bd 100644
--- a/microfrontends/SignDocuments/src/Component/component/signPad.js
+++ b/microfrontends/SignDocuments/src/Component/component/signPad.js
@@ -18,11 +18,10 @@ function SignPad({
   isImageSelect,
   imageRef,
   onImageChange,
-
   onSaveImage,
   image,
   defaultSign,
-  setSignature,
+  setSignature
 }) {
   const [penColor, setPenColor] = useState("blue");
   const allColor = [bluePen, redPen, blackPen];
@@ -47,14 +46,12 @@ function SignPad({
 
   //save button component
   const SaveBtn = () => {
-    // console.log("isSign",isSignImg,image)
-
     return (
       <div>
         {!isStamp && !isImageSelect && (
           <button
             style={{
-              color: "black",
+              color: "black"
             }}
             type="button"
             className="finishBtn saveBtn"
@@ -89,7 +86,7 @@ function SignPad({
           }}
           style={{
             background: themeColor(),
-            color: "white",
+            color: "white"
           }}
           disabled={isSignImg || image || isDefaultSign ? false : true}
           type="button"
@@ -109,6 +106,7 @@ function SignPad({
       canvasRef.current.fromDataURL(isSignImg);
     }
   }, [isTab]);
+
   return (
     <div>
       {/*isSignPad  */}
@@ -120,7 +118,7 @@ function SignPad({
             justifyContent: "space-between",
             background: "white",
             borderBottom: "1.6px solid #ebe6e6",
-            marginTop: "15px",
+            marginTop: "15px"
           }}
         >
           <div
@@ -129,7 +127,7 @@ function SignPad({
               flexDirection: "row",
               justifyContent: "space-around",
               alignItems: "end",
-              gap: 10,
+              gap: 10
 
               // background: themeColor(),
             }}
@@ -150,8 +148,7 @@ function SignPad({
                     }}
                     style={{
                       color: isTab === "signature" ? themeColor() : "#515252",
-
-                      marginLeft: "2px",
+                      marginLeft: "2px"
                     }}
                     className="signTab"
                   >
@@ -163,7 +160,7 @@ function SignPad({
                       border:
                         isTab === "signature"
                           ? "1.5px solid #108783"
-                          : "1.5px solid #ffffff",
+                          : "1.5px solid #ffffff"
                     }}
                   ></div>
                 </div>
@@ -175,7 +172,7 @@ function SignPad({
                       setIsTab("uploadImage");
                     }}
                     style={{
-                      color: isTab === "uploadImage" ? themeColor() : "#515252",
+                      color: isTab === "uploadImage" ? themeColor() : "#515252"
                     }}
                     className="signTab"
                   >
@@ -186,7 +183,7 @@ function SignPad({
                       border:
                         isTab === "uploadImage"
                           ? "1.5px solid #108783"
-                          : "1.5px solid #ffffff",
+                          : "1.5px solid #ffffff"
                     }}
                   ></div>
                 </div>
@@ -202,7 +199,7 @@ function SignPad({
                       }}
                       style={{
                         color:
-                          isTab === "mysignature" ? themeColor() : "#515252",
+                          isTab === "mysignature" ? themeColor() : "#515252"
                       }}
                       className="signTab"
                     >
@@ -213,7 +210,7 @@ function SignPad({
                         border:
                           isTab === "mysignature"
                             ? "1.5px solid #108783"
-                            : "1.5px solid #ffffff",
+                            : "1.5px solid #ffffff"
                       }}
                     ></div>
                   </div>
@@ -228,7 +225,7 @@ function SignPad({
               background: "none",
               paddingLeft: "7px",
               paddingRight: "7px",
-              marginRight: "5px",
+              marginRight: "5px"
             }}
             onClick={() => {
               setPenColor("blue");
@@ -251,14 +248,12 @@ function SignPad({
               <div
                 style={{
                   border: "1px solid black",
-
                   display: "flex",
                   flexDirection: "column",
                   justifyContent: "center",
                   alignItems: "center",
                   marginBottom: 6,
-                  cursor: "pointer",
-                  //  background:'rgb(255, 255, 255)'
+                  cursor: "pointer"
                 }}
                 className="signatureCanvas"
               >
@@ -267,8 +262,7 @@ function SignPad({
                   style={{
                     width: "100%",
                     height: "100%",
-                    background: "rgb(255, 255, 255)",
-                    objectFit: "contain",
+                    objectFit: "contain"
                   }}
                   src={defaultSign}
                 />
@@ -282,13 +276,12 @@ function SignPad({
               <div
                 style={{
                   border: "1px solid black",
-
                   display: "flex",
                   flexDirection: "column",
                   justifyContent: "center",
                   alignItems: "center",
                   marginBottom: 6,
-                  cursor: "pointer",
+                  cursor: "pointer"
                 }}
                 className="signatureCanvas"
                 onClick={() => imageRef.current.click()}
@@ -300,7 +293,6 @@ function SignPad({
                   accept="image/*"
                   ref={imageRef}
                   hidden
-                  // style={{ display: "none" }}
                 />
                 <i className="fas fa-cloud-upload-alt uploadImgLogo"></i>
                 <div className="uploadImg">Upload</div>
@@ -309,24 +301,25 @@ function SignPad({
               <>
                 <div
                   style={{
-                    // position: "relative",
-
                     border: "1px solid black",
+                    display: "flex",
+                    flexDirection: "column",
+                    justifyContent: "center",
+                    alignItems: "center",
                     marginBottom: 6,
-                    // justifyContent:"center"
-                    overflow: "hidden",
+                    cursor: "pointer"
                   }}
                   className="signatureCanvas"
                 >
                   <img
-                    alt="print img"
-                    ref={imageRef}
-                    // alt="preview image"
-                    src={image.src}
+                    alt="stamp img"
                     style={{
-                      //overflow:"hidden",
-                      objectFit: "contain",
+                      width: "100%",
+                      height: "100%",
+                      objectFit: "contain"
                     }}
+                    ref={imageRef}
+                    src={image.src}
                   />
                 </div>
                 <div style={{ display: "flex", justifyContent: "flex-end" }}>
@@ -336,36 +329,11 @@ function SignPad({
             )
           ) : (
             <>
-              {/* {isSignImg ? (
-                <div
-                  style={{
-                    position: "relative",
-
-                    border: "2px solid #888",
-                    marginBottom: 6,
-                  }}
-                  className="signatureCanvas"
-                >
-                  <img
-                    alt="preview image"
-                    src={isSignImg}
-                    style={{
-                      width: "100%",
-                      height: "100%",
-                      objectFit: "contain",
-                    }}
-                  />
-                </div>
-              ) : ( */}
               <SignatureCanvas
                 ref={canvasRef}
                 penColor={penColor}
                 canvasProps={{
-                  // width: "460px",
-                  // height: "184px",
-                  // width:"280px",
-                  // height:"112px",
-                  className: "signatureCanvas",
+                  className: "signatureCanvas"
                 }}
                 backgroundColor="rgb(255, 255, 255)"
                 onEnd={() =>
@@ -373,17 +341,16 @@ function SignPad({
                 }
                 dotSize={1}
               />
-              {/* )} */}
 
               <div
                 style={{
                   display: "flex",
                   flexDirection: "row",
                   justifyContent: "space-between",
-                  marginTop:"4px"
+                  marginTop: "4px"
                 }}
               >
-                <div style={{display:"flex",flexDirection:"row"}}>
+                <div style={{ display: "flex", flexDirection: "row" }}>
                   {allColor.map((data, key) => {
                     return (
                       <img
@@ -396,10 +363,10 @@ function SignPad({
                             key === 0 && penColor === "blue"
                               ? "2px solid blue"
                               : key === 1 && penColor === "red"
-                              ? "2px solid red"
-                              : key === 2 && penColor === "black"
-                              ? "2px solid black"
-                              : "2px solid white",
+                                ? "2px solid red"
+                                : key === 2 && penColor === "black"
+                                  ? "2px solid black"
+                                  : "2px solid white"
                         }}
                         onClick={() => {
                           if (key === 0) {
@@ -414,60 +381,14 @@ function SignPad({
                         width={20}
                         height={20}
                       />
-                      // </button>
                     );
                   })}
                 </div>
-
                 <SaveBtn />
               </div>
             </>
           )}
         </Modal.Body>
-
-        {/* <Modal.Footer>
-          {!isStamp && !isImageSelect && (
-            <button
-              style={{
-                color: "black",
-              }}
-              type="button"
-              className="finishBtn"
-              onClick={() => handleClear()}
-            >
-              Clear
-            </button>
-          )}
-
-          <button
-            onClick={() => {
-              if (!image) {
-                if (isDefaultSign) {
-                  onSaveSign(isDefaultSign);
-                } else {
-                  onSaveSign();
-                }
-
-                setPenColor("blue");
-              } else {
-                onSaveImage();
-              }
-              setIsSignPad(false);
-
-              setIsImageSelect(false);
-              setIsDefaultSign(false);
-              setImage();
-            }}
-            style={{
-              background: themeColor(),
-              color: "white",
-            }}
-            type="button"
-            className="finishBtn"
-          >
-            Save
-          </button>
-        </Modal.Footer> */}
       </Modal>
     </div>
   );
diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js
index 6d0a95b65..8d1eb8a54 100644
--- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js
+++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js
@@ -65,6 +65,7 @@ function PlaceHolderSign() {
   const [isShowEmail, setIsShowEmail] = useState(false);
   const [selectedEmail, setSelectedEmail] = useState(false);
   const [isResize, setIsResize] = useState(false);
+  const [isAlreadyPlace, setIsAlreadyPlace] = useState(false);
   const [pdfLoadFail, setPdfLoadFail] = useState({
     status: false,
     type: "load"
@@ -181,8 +182,12 @@ function PlaceHolderSign() {
     //getting document details
     const documentData = await contractDocument(documentId);
     if (documentData && documentData.length > 0) {
+      const alreadyPlaceholder =
+        documentData[0].Placeholders && documentData[0].Placeholders;
+      if (alreadyPlaceholder && alreadyPlaceholder.length > 0) {
+        setIsAlreadyPlace(true);
+      }
       setPdfDetails(documentData);
-
       const currEmail = documentData[0].ExtUserPtr.Email;
       const filterCurrEmail = documentData[0].Signers.filter(
         (data) => data.Email === currEmail
@@ -916,6 +921,7 @@ function PlaceHolderSign() {
                 )}
               </Modal.Footer>
             </Modal>
+            <ModalComponent isShow={isAlreadyPlace} type={"alreadyPlace"} />
             <ModalComponent
               isShow={isShowEmail}
               type={"signersAlert"}
diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js
index 58a94b89d..6421e8a8b 100644
--- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js
+++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js
@@ -22,7 +22,9 @@ import {
   urlValidator,
   multiSignEmbed,
   embedDocId,
-  signPdfFun
+  signPdfFun,
+  addDefaultSignatureImg,
+  onImageSelect
 } from "../utils/Utils";
 import Tour from "reactour";
 import Signedby from "./component/signedby";
@@ -34,6 +36,7 @@ import Header from "./component/header";
 import RenderPdf from "./component/renderPdf";
 import CustomModal from "./component/CustomModal";
 import { modalAlign } from "../utils/Utils";
+import AlertComponent from "./component/alertComponent";
 function EmbedPdfImage() {
   const { id, contactBookId } = useParams();
   const [isSignPad, setIsSignPad] = useState(false);
@@ -65,18 +68,22 @@ function EmbedPdfImage() {
   const [checkTourStatus, setCheckTourStatus] = useState(false);
   const [signerUserId, setSignerUserId] = useState();
   const [tourStatus, setTourStatus] = useState([]);
-  const [completePdfData, setCompletePdfData] = useState([]);
   const [isExpired, setIsExpired] = useState(false);
   const [noData, setNoData] = useState(false);
   const [contractName, setContractName] = useState("");
   const [isDecline, setIsDecline] = useState({
     isDeclined: false
   });
+  const [addDefaultSign, setAddDefaultSign] = useState({
+    isShow: false,
+    alertMessage: ""
+  });
   const [pdfLoadFail, setPdfLoadFail] = useState({
     status: false,
     type: "load"
   });
   const [containerWH, setContainerWH] = useState({});
+  const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" });
   const docId = id && id;
   const isMobile = window.innerWidth < 767;
   const index = xyPostion.findIndex((object) => {
@@ -92,8 +99,7 @@ function EmbedPdfImage() {
     : `${localStorage.getItem("UserInformation")}` &&
       `${localStorage.getItem("UserInformation")}`;
   const jsonSender = JSON.parse(senderUser);
-  //check isGuestSigner is present in local if yes than handle login flow header in mobile view
-  const isGuestSigner = localStorage.getItem("isGuestSigner");
+
   useEffect(() => {
     getDocumentDetails();
   }, []);
@@ -202,7 +208,6 @@ function EmbedPdfImage() {
         setIsAlreadySign(alreadySign);
         setPdfUrl(documentData[0].SignedUrl);
         setSignedPdfData(documentData);
-        setCompletePdfData(documentData);
       } else if (declined) {
         const currentDecline = {
           currnt: "another",
@@ -397,7 +402,10 @@ function EmbedPdfImage() {
     }
 
     if (checkSignUrl && checkSignUrl.length > 0) {
-      alert("Please complete your signature!");
+      setIsAlert({
+        isShow: true,
+        alertMessage: "Please complete your signature!"
+      });
     } else {
       const loadObj = {
         isLoad: true,
@@ -428,9 +436,10 @@ function EmbedPdfImage() {
           await embedDocId(pdfDoc, docId, allPages);
           pdfBase64 = await pdfDoc.saveAsBase64({ useObjectStreams: false });
         }
-        for (let i = 0; i < xyPostion.length; i++) {
-          const imgUrlList = pngUrl[i].pos;
-          const pageNo = pngUrl[i].pageNumber;
+
+        for (let xyData of xyPostion) {
+          const imgUrlList = xyData.pos;
+          const pageNo = xyData.pageNumber;
           imgUrlList.map(async (data) => {
             //cheking signUrl is defau;t signature url of custom url
             let ImgUrl = data.SignUrl;
@@ -456,30 +465,41 @@ function EmbedPdfImage() {
                   signerUserId,
                   pdfOriginalWidth,
                   xyPostion,
+                  containerWH,
+                  setIsAlert,
                   data,
                   pdfBase64,
-                  pageNo,
-                  containerWH
+                  pageNo
                 )
                   .then((res) => {
                     if (res && res.status === "success") {
                       getDocumentDetails();
                     } else {
-                      alert("something went wrong");
+                      setIsAlert({
+                        isShow: true,
+                        alertMessage: "something went wrong"
+                      });
                     }
                   })
                   .catch((err) => {
-                    alert("something went wrong!");
+                    setIsAlert({
+                      isShow: true,
+                      alertMessage: "something went wrong"
+                    });
                   });
               })
               .catch((error) => {
-                console.error("Error:", error);
+                setIsAlert({
+                  isShow: true,
+                  alertMessage: "something went wrong"
+                });
               });
           });
         }
       }
       //else if signature is more than one then embed all sign with the use of pdf-lib
       else if (xyPostion.length > 0 && xyPostion[0].pos.length > 0) {
+        const flag = false;
         //embed document's object id to all pages in pdf document
         await embedDocId(pdfDoc, docId, allPages);
         //embed multi signature in pdf
@@ -487,29 +507,35 @@ function EmbedPdfImage() {
           pngUrl,
           pdfDoc,
           pdfOriginalWidth,
-          false,
+          flag,
           containerWH
         );
 
         //function for embed signature in pdf and get digital signature pdf
-        signPdfFun(
-          pdfBytes,
-          docId,
-          signerUserId,
-          pdfOriginalWidth,
-          xyPostion,
-          containerWH
-        )
-          .then((res) => {
-            if (res && res.status === "success") {
-              getDocumentDetails();
-            } else {
-              alert("something went wrong!");
-            }
-          })
-          .catch((err) => {
-            alert("something went wrong in query");
+        try {
+          const res = await signPdfFun(
+            pdfBytes,
+            docId,
+            signerUserId,
+            pdfOriginalWidth,
+            xyPostion,
+            containerWH,
+            setIsAlert
+          );
+          if (res && res.status === "success") {
+            getDocumentDetails();
+          } else {
+            setIsAlert({
+              isShow: true,
+              alertMessage: "something went wrong"
+            });
+          }
+        } catch (err) {
+          setIsAlert({
+            isShow: true,
+            alertMessage: "something went wrong"
           });
+        }
       }
       setIsSignPad(false);
       setXyPostion([]);
@@ -524,60 +550,43 @@ function EmbedPdfImage() {
   //function for image upload or update
   const onImageChange = (event) => {
     if (event.target.files && event.target.files[0]) {
-      const imageType = event.target.files[0].type;
-
-      const reader = new FileReader();
-      reader.readAsDataURL(event.target.files[0]);
-
-      reader.onloadend = function (e) {
-        let width, height;
-        const image = new Image();
-
-        image.src = e.target.result;
-        image.onload = function () {
-          width = image.width;
-          height = image.height;
-          const aspectRatio = 460 / 184;
-          const imgR = width / height;
-
-          if (imgR > aspectRatio) {
-            width = 460;
-            height = 460 / imgR;
-          } else {
-            width = 184 * imgR;
-            height = 184;
-          }
-          setImgWH({ width: width, height: height });
-          imageRef.current.style.width = `${width}px`;
-          imageRef.current.style.height = `${height}px`;
-        };
-
-        image.src = reader.result;
-
-        setImage({ src: image.src, imgType: imageType });
-      };
+      onImageSelect(event, setImgWH, setImage);
     }
   };
 
   //function for save button to save signature or image url
   const saveSign = (isDefaultSign) => {
     const signatureImg = isDefaultSign ? defaultSignImg : signature;
+    const signFlag = true;
+    let imgWH = { width: "", height: "" };
     setIsSignPad(false);
     setIsImageSelect(false);
     setImage();
 
+    if (isDefaultSign) {
+      const img = new Image();
+      img.src = defaultSignImg;
+      if (img.complete) {
+        imgWH = {
+          width: img.width,
+          height: img.height
+        };
+      }
+    }
     const getUpdatePosition = onSaveSign(
       xyPostion,
       index,
       signKey,
-      signatureImg
+      signatureImg,
+      imgWH,
+      isDefaultSign,
+      signFlag
     );
 
     if (getUpdatePosition) {
       setXyPostion(getUpdatePosition);
     }
   };
-
   //function for upload stamp image
   const saveImage = () => {
     const getImage = onSaveImage(xyPostion, index, signKey, imgWH, image);
@@ -615,33 +624,21 @@ function EmbedPdfImage() {
         }
       })
       .catch((err) => {
-        console.log("error updating field is decline ", err);
+        setIsAlert({
+          isShow: true,
+          alertMessage: "something went wrong"
+        });
       });
   };
 
   const addDefaultSignature = () => {
-    let xyDefaultPos = [];
-    for (let i = 0; i < xyPostion.length; i++) {
-      const getXYdata = xyPostion[i].pos;
-      const getPageNo = xyPostion[i].pageNumber;
-      const getPosData = getXYdata;
-
-      const addSign = getPosData.map((url, ind) => {
-        if (url) {
-          return { ...url, SignUrl: defaultSignImg };
-        }
-        return url;
-      });
-
-      const newXypos = {
-        pageNumber: getPageNo,
-        pos: addSign
-      };
-      xyDefaultPos.push(newXypos);
-    }
+    const getXyData = addDefaultSignatureImg(xyPostion, defaultSignImg);
 
-    setXyPostion(xyDefaultPos);
-    setIsAlreadySign({ status: false });
+    setXyPostion(getXyData);
+    setAddDefaultSign({
+      isShow: false,
+      alertMessage: ""
+    });
   };
 
   //function for update TourStatus
@@ -763,6 +760,20 @@ function EmbedPdfImage() {
             declineDoc={declineDoc}
             setIsDecline={setIsDecline}
           />
+          <AlertComponent
+            isShow={isAlert.isShow}
+            alertMessage={isAlert.alertMessage}
+            setIsAlert={setIsAlert}
+          />
+          <AlertComponent
+            isShow={addDefaultSign.isShow}
+            alertMessage={addDefaultSign.alertMessage}
+            setIsAlert={setAddDefaultSign}
+            isdefaultSign={true}
+            addDefaultSignature={addDefaultSignature}
+            headBG={themeColor()}
+          />
+
           {/* this modal is used for show expired alert */}
           <CustomModal
             containerWH={containerWH}
@@ -820,18 +831,6 @@ function EmbedPdfImage() {
                 >
                   Close
                 </button>
-                {isAlreadySign.sure && (
-                  <button
-                    onClick={() => addDefaultSignature()}
-                    style={{
-                      background: themeColor()
-                    }}
-                    type="button"
-                    className="finishBtn"
-                  >
-                    Yes
-                  </button>
-                )}
               </Modal.Footer>
             </Modal>
             {/* this is modal of signature pad */}
@@ -905,6 +904,7 @@ function EmbedPdfImage() {
                 xyPostion={xyPostion}
                 setXyPostion={setXyPostion}
                 setShowAlreadySignDoc={setIsAlreadySign}
+                setIsAlert={setAddDefaultSign}
               />
             </div>
           ) : (
diff --git a/microfrontends/SignDocuments/src/css/signature.css b/microfrontends/SignDocuments/src/css/signature.css
index 477159b03..34ed5ea08 100644
--- a/microfrontends/SignDocuments/src/css/signature.css
+++ b/microfrontends/SignDocuments/src/css/signature.css
@@ -8,6 +8,7 @@
 .penContainer {
   width: 460px;
 }
+
 .borderResize {
   position: absolute;
   display: inline-block;
@@ -15,17 +16,20 @@
   height: 14px;
 
 }
-.mailBtn{
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
-    padding: 3px 15px !important;
-    background-color: rgb(79 190 241);
-    border: none !important;
-    color: white !important;
+
+.mailBtn {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
+  padding: 3px 15px !important;
+  background-color: rgb(79 190 241);
+  border: none !important;
+  color: white !important;
 }
+
 .mailBtn:hover {
   box-shadow: 0 2px 4px rgba(154, 36, 36, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
 }
-.emailToast{
+
+.emailToast {
   position: absolute;
   z-index: 10;
   background: #aeedae;
@@ -34,7 +38,7 @@
   border-radius: 2px;
 }
 
- 
+
 .signatureBtn {
   border: 1.5px solid #47a3ad;
   margin-bottom: 10px;
@@ -162,14 +166,15 @@
 
 .placeholdCloseBtn {
   position: absolute;
-  right: -9px;
-  top: -15px;
+  right: -5px;
+  top: -5px;
   border-radius: 100%;
   font-size: 10px;
   cursor: pointer;
-  padding: 0px 5px;
+  padding: 0px 5.1px 1px 5px;
 }
-.placeholderBlock{
+
+.placeholderBlock {
   padding: 0px;
   z-index: 1;
   position: absolute;
@@ -179,7 +184,8 @@
   background: #daebe0;
   text-align: center;
   justify-content: center;
-  border-width: 0.2px
+  border-width: 0.2px;
+  
 }
 
 .finishBtn {
diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js
index b12cf2fc1..a1aca4c2e 100644
--- a/microfrontends/SignDocuments/src/utils/Utils.js
+++ b/microfrontends/SignDocuments/src/utils/Utils.js
@@ -1,6 +1,9 @@
 import axios from "axios";
 import { $ } from "select-dom";
 import { rgb } from "pdf-lib";
+
+const isMobile = window.innerWidth < 767;
+
 export async function getBase64FromUrl(url) {
   const data = await fetch(url);
   const blob = await data.blob();
@@ -74,46 +77,49 @@ export function getHostUrl() {
   }
 }
 
+export const calculateImgAspectRatio = (imgWH) => {
+  let newWidth, newHeight;
+  const aspectRatio = imgWH.width / imgWH.height;
+  if (aspectRatio === "2.533333333333333") {
+    newWidth = 150;
+    newHeight = 60;
+  } else if (aspectRatio === 1) {
+    newWidth = aspectRatio * 100;
+    newHeight = aspectRatio * 100;
+  } else if (aspectRatio < 1) {
+    newWidth = aspectRatio * 70;
+    newHeight = 70;
+  } else if (aspectRatio < 2) {
+    newWidth = aspectRatio * 100;
+    newHeight = 100;
+  } else if (aspectRatio > 2 && aspectRatio < 4) {
+    newWidth = aspectRatio * 70;
+    newHeight = 70;
+  } else if (aspectRatio > 4) {
+    newWidth = aspectRatio * 40;
+    newHeight = 40;
+  } else if (aspectRatio > 5) {
+    newWidth = aspectRatio * 10;
+    newHeight = 10;
+  }
+  return { newHeight, newWidth };
+};
+
 //function for upload stamp or image
 export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
   const updateFilter = xyPostion[index].pos.filter(
     (data, ind) =>
       data.key === signKey && data.Width && data.Height && data.SignUrl
   );
-
+  let getIMGWH = calculateImgAspectRatio(imgWH);
+  const getXYdata = xyPostion[index].pos;
   if (updateFilter.length > 0) {
-    let newWidth, newHeight;
-    const aspectRatio = imgWH.width / imgWH.height;
-
-    const getXYdata = xyPostion[index].pos;
-
-    if (aspectRatio === 1) {
-      newWidth = aspectRatio * 100;
-      newHeight = aspectRatio * 100;
-    } else if (aspectRatio < 2) {
-      newWidth = aspectRatio * 100;
-      newHeight = 100;
-    } else if (aspectRatio > 2 && aspectRatio < 4) {
-      newWidth = aspectRatio * 70;
-      newHeight = 70;
-    } else if (aspectRatio > 4) {
-      newWidth = aspectRatio * 40;
-      newHeight = 40;
-    } else if (aspectRatio > 5) {
-      newWidth = aspectRatio * 10;
-      newHeight = 10;
-    }
-
-    let getPosData = xyPostion[index].pos.filter(
-      (data) => data.key === signKey
-    );
-
     const addSign = getXYdata.map((url, ind) => {
       if (url.key === signKey) {
         return {
           ...url,
-          Width: getPosData[0].Width ? getPosData[0].Width : newWidth,
-          Height: getPosData[0].Height ? getPosData[0].Height : newHeight,
+          Width: getIMGWH.newWidth,
+          Height: getIMGWH.newHeight,
           SignUrl: image.src,
           ImageType: image.imgType
         };
@@ -128,39 +134,19 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
       return obj;
     });
     return newUpdateUrl;
-    // setXyPostion(newUpdateUrl);
   } else {
     const getXYdata = xyPostion[index].pos;
 
     let getPosData = xyPostion[index].pos.filter(
       (data) => data.key === signKey
     );
-    const aspectRatio = imgWH.width / imgWH.height;
-
-    let newWidth, newHeight;
-    if (aspectRatio === 1) {
-      newWidth = aspectRatio * 100;
-      newHeight = aspectRatio * 100;
-    } else if (aspectRatio < 2) {
-      newWidth = aspectRatio * 100;
-      newHeight = 100;
-    } else if (aspectRatio > 2 && aspectRatio < 4) {
-      newWidth = aspectRatio * 70;
-      newHeight = 70;
-    } else if (aspectRatio > 4) {
-      newWidth = aspectRatio * 40;
-      newHeight = 40;
-    } else if (aspectRatio > 5) {
-      newWidth = aspectRatio * 10;
-      newHeight = 10;
-    }
 
     const addSign = getXYdata.map((url, ind) => {
       if (url.key === signKey) {
         return {
           ...url,
-          Width: getPosData[0].Width ? getPosData[0].Width : newWidth,
-          Height: getPosData[0].Height ? getPosData[0].Height : newHeight,
+          Width: getIMGWH.newWidth,
+          Height: getIMGWH.newHeight,
           SignUrl: image.src,
           ImageType: image.imgType
         };
@@ -179,17 +165,46 @@ 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) {
+export function onSaveSign(
+  xyPostion,
+  index,
+  signKey,
+  signatureImg,
+  imgWH,
+  isDefaultSign,
+  isSign
+) {
   let getXYdata = xyPostion[index].pos;
   let getPosData = xyPostion[index].pos.filter((data) => data.key === signKey);
 
+  let getIMGWH;
+  if (isDefaultSign) {
+    getIMGWH = calculateImgAspectRatio(imgWH);
+  }
+
+  const posWidth = isDefaultSign
+    ? getIMGWH.newWidth
+    : isSign && getPosData[0].ImageType
+      ? 150
+      : getPosData[0].Width
+        ? getPosData[0].Width
+        : 150;
+  const posHidth = isDefaultSign
+    ? getIMGWH.newHeight
+    : isSign && getPosData[0].ImageType
+      ? 60
+      : getPosData[0].Height
+        ? getPosData[0].Height
+        : 60;
+
   const addSign = getXYdata.map((url, ind) => {
     if (url.key === signKey) {
       return {
         ...url,
-        Width: getPosData[0].Width ? getPosData[0].Width : 150,
-        Height: getPosData[0].Height ? getPosData[0].Height : 60,
-        SignUrl: signatureImg
+        Width: posWidth,
+        Height: posHidth,
+        SignUrl: signatureImg,
+        ImageType: "sign"
       };
     }
     return url;
@@ -204,6 +219,78 @@ export function onSaveSign(xyPostion, index, signKey, signatureImg) {
   return newUpdateUrl;
 }
 
+//function for add default signature or image for all requested location
+export const addDefaultSignatureImg = (xyPostion, defaultSignImg) => {
+  let imgWH = { width: "", height: "" };
+  const img = new Image();
+  img.src = defaultSignImg;
+  if (img.complete) {
+    imgWH = {
+      width: img.width,
+      height: img.height
+    };
+  }
+  const getIMGWH = calculateImgAspectRatio(imgWH);
+  let xyDefaultPos = [];
+  for (let i = 0; i < xyPostion.length; i++) {
+    const getXYdata = xyPostion[i].pos;
+    const getPageNo = xyPostion[i].pageNumber;
+    const getPosData = getXYdata;
+
+    const addSign = getPosData.map((url, ind) => {
+      if (url) {
+        return {
+          ...url,
+          SignUrl: defaultSignImg,
+          Width: getIMGWH.newWidth,
+          Height: getIMGWH.newHeight,
+          ImageType: "default"
+        };
+      }
+      return url;
+    });
+
+    const newXypos = {
+      pageNumber: getPageNo,
+      pos: addSign
+    };
+    xyDefaultPos.push(newXypos);
+  }
+  return xyDefaultPos;
+};
+
+//function for select image and upload image
+export const onImageSelect = (event, setImgWH, setImage) => {
+  const imageType = event.target.files[0].type;
+  const reader = new FileReader();
+  reader.readAsDataURL(event.target.files[0]);
+
+  reader.onloadend = function (e) {
+    let width, height;
+    const image = new Image();
+
+    image.src = e.target.result;
+    image.onload = function () {
+      width = image.width;
+      height = image.height;
+      const aspectRatio = 460 / 184;
+      const imgR = width / height;
+
+      if (imgR > aspectRatio) {
+        width = 460;
+        height = 460 / imgR;
+      } else {
+        width = 184 * imgR;
+        height = 184;
+      }
+      setImgWH({ width: width, height: height });
+    };
+
+    image.src = reader.result;
+
+    setImage({ src: image.src, imgType: imageType });
+  };
+};
 //function for getting document details from contract_Documents class
 export const contractDocument = async (documentId) => {
   const data = {
@@ -342,7 +429,83 @@ export function modalAlign() {
     modal.style.top = window.innerHeight / 3 + "px";
   }
 }
+export const containerWidth = (pos, scale, signyourself) => {
+  let width;
+  if (signyourself) {
+    if (isMobile) {
+      return pos.Width * scale;
+    } else {
+      return pos.Width;
+    }
+  } else {
+    if (isMobile) {
+      if (pos.isMobile) {
+        width = pos.Width ? pos.Width * scale : 150 * scale;
+        return width;
+      } else {
+        if (pos.IsResize) {
+          width = pos.Width ? pos.Width * scale : 150 * scale;
+          return width;
+        } else {
+          width = pos.Width ? pos.Width : 150;
+          return width;
+        }
+      }
+    } else {
+      if (pos.isMobile) {
+        if (pos.IsResize) {
+          width = pos.Width ? pos.Width : 150;
+          return width;
+        } else {
+          width = pos.Width ? pos.Width * pos.scale : 150 * pos.scale;
 
+          return width;
+        }
+      } else {
+        width = pos.Width ? pos.Width : 150;
+        return width;
+      }
+    }
+  }
+};
+export const containerHeight = (pos, scale, signyourself) => {
+  let height;
+  if (signyourself) {
+    if (isMobile) {
+      return pos.Height * scale;
+    } else {
+      return pos.Height;
+    }
+  } else {
+    if (isMobile) {
+      if (pos.isMobile) {
+        height = pos.Height ? pos.Height * scale : 60 * scale;
+        return height;
+      } else {
+        if (pos.IsResize) {
+          height = pos.Height ? pos.Height * scale : 60 * scale;
+          return height;
+        } else {
+          height = pos.Height ? pos.Height : 60;
+          return height;
+        }
+      }
+    } else {
+      if (pos.isMobile) {
+        if (pos.IsResize) {
+          height = pos.Height ? pos.Height : 60;
+          return height;
+        } else {
+          height = pos.Height ? pos.Height * pos.scale : 60 * pos.scale;
+          return height;
+        }
+      } else {
+        height = pos.Height ? pos.Height : 60;
+        return height;
+      }
+    }
+  }
+};
 //function for embed multiple signature using pdf-lib
 export const multiSignEmbed = async (
   pngUrl,
@@ -351,9 +514,11 @@ export const multiSignEmbed = async (
   signyourself,
   containerWH
 ) => {
-  for (let i = 0; i < pngUrl.length; i++) {
-    const pageNo = pngUrl[i].pageNumber;
-    const imgUrlList = pngUrl[i].pos;
+  for (let item of pngUrl) {
+    const newWidth = containerWH.width;
+    const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
+    const pageNo = item.pageNumber;
+    const imgUrlList = item.pos;
     const pages = pdfDoc.getPages();
     const page = pages[pageNo - 1];
     const images = await Promise.all(
@@ -384,10 +549,9 @@ export const multiSignEmbed = async (
         img = await pdfDoc.embedPng(imgData);
       }
       const imgHeight = imgUrlList[id].Height ? imgUrlList[id].Height : 60;
-      const imgWidth = imgUrlList[id].Width ? imgUrlList[id].Width : 150;
-      const isMobile = window.innerWidth < 767;
-      const newWidth = containerWH.width;
-      const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
+      const scaleWidth = containerWidth(imgUrlList[id], scale, signyourself);
+      const scaleHeight = containerHeight(imgUrlList[id], scale, signyourself);
+
       const xPos = (pos) => {
         if (signyourself) {
           if (isMobile) {
@@ -438,13 +602,22 @@ export const multiSignEmbed = async (
               const y = pos.yPosition * (pos.scale / scale);
               return page.getHeight() - y * scale - imgHeight * scale;
             } else {
-              return page.getHeight() - y * scale - imgHeight * scale;
+              if (pos.IsResize) {
+                return page.getHeight() - y * scale - imgHeight * scale;
+              } else {
+                return page.getHeight() - y * scale - imgHeight;
+              }
             }
           } else {
             //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
             if (pos.isMobile) {
-              const y = pos.yPosition * pos.scale;
-              return page.getHeight() - y - imgHeight;
+              if (pos.IsResize) {
+                const y = pos.yPosition * pos.scale;
+                return page.getHeight() - y - imgHeight;
+              } else {
+                const y = pos.yPosition * pos.scale;
+                return page.getHeight() - y - imgHeight * pos.scale;
+              }
             } else {
               return page.getHeight() - pos.yPosition - imgHeight;
             }
@@ -455,12 +628,14 @@ export const multiSignEmbed = async (
       page.drawImage(img, {
         x: xPos(imgUrlList[id]),
         y: yPos(imgUrlList[id]),
-        width: imgWidth * scale,
-        height: imgHeight * scale
+        width: scaleWidth,
+        height: scaleHeight
       });
     });
   }
+
   const pdfBytes = await pdfDoc.saveAsBase64({ useObjectStreams: false });
+
   return pdfBytes;
 };
 //function for embed document id
@@ -499,14 +674,13 @@ export const handleImageResize = (
   setSignerPos,
   pdfOriginalWidth,
   containerWH,
+  showResize,
   setIsResize
 ) => {
   const filterSignerPos = signerPos.filter(
     (data) => data.signerObjId === signerId
   );
-  const isMobile = window.innerWidth < 767;
-  const newWidth = containerWH;
-  const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
+
   if (filterSignerPos.length > 0) {
     const getPlaceHolder = filterSignerPos[0].placeHolder;
     const getPageNumer = getPlaceHolder.filter(
@@ -523,11 +697,9 @@ export const handleImageResize = (
           if (url.key === key) {
             return {
               ...url,
-              Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth,
-              Height: !url.isMobile
-                ? ref.offsetHeight * scale
-                : ref.offsetHeight
-              // xPosition: position.x
+              Width: ref.offsetWidth,
+              Height: ref.offsetHeight,
+              IsResize: showResize ? true : false
             };
           }
           return url;
@@ -550,17 +722,14 @@ export const handleImageResize = (
         setSignerPos(newUpdateSigner);
       } else {
         const getXYdata = getPageNumer[0].pos;
-
         const getPosData = getXYdata;
-
         const addSignPos = getPosData.map((url, ind) => {
           if (url.key === key) {
             return {
               ...url,
-              Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth,
-              Height: !url.isMobile
-                ? ref.offsetHeight * scale
-                : ref.offsetHeight
+              Width: ref.offsetWidth,
+              Height: ref.offsetHeight,
+              IsResize: showResize ? true : false
             };
           }
           return url;
@@ -602,9 +771,6 @@ export const handleSignYourselfImageResize = (
   const updateFilter = xyPostion[index].pos.filter(
     (data) => data.key === key && data.Width && data.Height
   );
-  const isMobile = window.innerWidth < 767;
-  const newWidth = containerWH;
-  const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
 
   if (updateFilter.length > 0) {
     const getXYdata = xyPostion[index].pos;
@@ -613,11 +779,9 @@ export const handleSignYourselfImageResize = (
       if (url.key === key) {
         return {
           ...url,
-          // Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth,
-          // Height: !url.isMobile ? ref.offsetHeight * scale : ref.offsetHeight,
           Width: ref.offsetWidth,
-          Height: ref.offsetHeight
-          //  xPosition: position.xpos
+          Height: ref.offsetHeight,
+          IsResize: true
         };
       }
       return url;
@@ -640,10 +804,9 @@ export const handleSignYourselfImageResize = (
       if (url.key === key) {
         return {
           ...url,
-          // Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth,
-          // Height: !url.isMobile ? ref.offsetHeight * scale : ref.offsetHeight
           Width: ref.offsetWidth,
-          Height: ref.offsetHeight
+          Height: ref.offsetHeight,
+          IsResize: true
         };
       }
       return url;
@@ -666,13 +829,14 @@ export const signPdfFun = async (
   signerObjectId,
   pdfOriginalWidth,
   signerData,
+  containerWH,
+  setIsAlert,
   xyPosData,
   pdfBase64Url,
-  pageNo,
-  containerWH
+  pageNo
 ) => {
-  let signgleSign;
-  const isMobile = window.innerWidth < 767;
+  let singleSign;
+
   const newWidth = containerWH.width;
   const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
   if (signerData && signerData.length === 1 && signerData[0].pos.length === 1) {
@@ -715,24 +879,41 @@ export const signPdfFun = async (
           return yPosition;
         } else {
           const y = pos.yBottom / scale;
-
-          yPosition = pos.isDrag
-            ? y * scale - height
-            : pos.firstYPos
-              ? y * scale - height + pos.firstYPos
-              : y * scale - height;
-          return yPosition;
+          if (pos.IsResize) {
+            yPosition = pos.isDrag
+              ? y * scale - height * scale
+              : pos.firstYPos
+                ? y * scale - height * scale + pos.firstYPos
+                : y * scale - height * scale;
+            return yPosition;
+          } else {
+            yPosition = pos.isDrag
+              ? y * scale - height
+              : pos.firstYPos
+                ? y * scale - height + pos.firstYPos
+                : y * scale - height;
+            return yPosition;
+          }
         }
       } else {
         //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
         if (pos.isMobile) {
           const y = pos.yBottom * pos.scale;
-          yPosition = pos.isDrag
-            ? y - height
-            : pos.firstYPos
-              ? y - height + pos.firstYPos
-              : y - height;
-          return yPosition;
+          if (pos.IsResize) {
+            yPosition = pos.isDrag
+              ? y - height
+              : pos.firstYPos
+                ? y - height + pos.firstYPos
+                : y - height;
+            return yPosition;
+          } else {
+            yPosition = pos.isDrag
+              ? y - height * pos.scale
+              : pos.firstYPos
+                ? y - height * pos.scale + pos.firstYPos
+                : y - height * pos.scale;
+            return yPosition;
+          }
         } else {
           yPosition = pos.isDrag
             ? pos.yBottom - height
@@ -743,10 +924,9 @@ export const signPdfFun = async (
         }
       }
     };
-    const imgWidth = xyPosData.Width ? xyPosData.Width * scale : 150 * scale;
-    const imgHeight = height * scale;
+
     const bottomY = yBottom(xyPosData);
-    signgleSign = {
+    singleSign = {
       pdfFile: pdfBase64Url,
       docId: documentId,
       userId: signerObjectId,
@@ -754,8 +934,8 @@ export const signPdfFun = async (
         Base64: base64Url,
         Left: xPos(xyPosData),
         Bottom: bottomY,
-        Width: imgWidth,
-        Height: imgHeight,
+        Width: containerWidth(xyPosData, scale),
+        Height: containerHeight(xyPosData, scale),
         Page: pageNo
       }
     };
@@ -764,7 +944,7 @@ export const signPdfFun = async (
     signerData.length > 0 &&
     signerData[0].pos.length > 0
   ) {
-    signgleSign = {
+    singleSign = {
       pdfFile: base64Url,
       docId: documentId,
       userId: signerObjectId
@@ -772,7 +952,7 @@ export const signPdfFun = async (
   }
 
   const response = await axios
-    .post(`${localStorage.getItem("baseUrl")}functions/signPdf`, signgleSign, {
+    .post(`${localStorage.getItem("baseUrl")}functions/signPdf`, singleSign, {
       headers: {
         "Content-Type": "application/json",
         "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
@@ -782,12 +962,13 @@ export const signPdfFun = async (
     .then((Listdata) => {
       const json = Listdata.data;
       const res = json.result;
-      // console.log("res", res);
       return res;
     })
     .catch((err) => {
-      console.log("axois err ", err);
-      alert("something went wrong");
+      setIsAlert({
+        isShow: true,
+        alertMessage: "something went wrong"
+      });
     });
 
   return response;