diff --git a/microfrontends/SignDocuments/src/Component/LegaDrive/FolderDrive/legaDriveComponent.js b/microfrontends/SignDocuments/src/Component/LegaDrive/FolderDrive/legaDriveComponent.js
index 760ce39af..a50857a01 100644
--- a/microfrontends/SignDocuments/src/Component/LegaDrive/FolderDrive/legaDriveComponent.js
+++ b/microfrontends/SignDocuments/src/Component/LegaDrive/FolderDrive/legaDriveComponent.js
@@ -20,7 +20,8 @@ function PdfFileComponent({
   setDocId,
   setIsLoading,
   setPdfData,
-  isList
+  isList,
+  setIsAlert
 }) {
   const [rename, setRename] = useState("");
   const [renameValue, setRenameValue] = useState("");
@@ -103,7 +104,10 @@ function PdfFileComponent({
           // console.log("res", res);
         })
         .catch((err) => {
-          console.log("error updating field is decline ", err);
+          setIsAlert({
+            isShow: true,
+            alertMessage: "something went wrong"
+          });
         });
     }
   };
@@ -191,7 +195,10 @@ function PdfFileComponent({
         setPdfData(updatedData);
       })
       .catch((err) => {
-        console.log("err", err);
+        setIsAlert({
+          isShow: true,
+          alertMessage: "something went wrong"
+        });
       });
   };
   const handleMoveDocument = async (docData) => {
diff --git a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js
index fef248eb6..e68045b8e 100644
--- a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js
+++ b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js
@@ -1,13 +1,9 @@
 import React, { useEffect, useState, useRef } from "react";
-import axios from "axios";
 import "./LegaDrive.css";
 import loader from "../../assests/loader2.gif";
 import PdfFileComponent from "./FolderDrive/legaDriveComponent";
-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";
 import { useNavigate } from "react-router-dom";
 import Title from "../component/Title";
 import Parse from "parse";
@@ -57,32 +53,38 @@ function PdfFile() {
       isLoad: true,
       message: "This might take some time"
     };
-
+    let driveDetails;
     setIsLoading(load);
-
-    const driveDetails = await getDrive();
-    if (driveDetails) {
-      if (driveDetails.length > 0) {
-        setPdfData(driveDetails);
-        sortApps(null, null, driveDetails);
-      }
-      const data = [
-        {
-          name: "OpenSign™ Drive",
-          objectId: ""
+    try {
+      driveDetails = await getDrive();
+      if (driveDetails) {
+        if (driveDetails.length > 0) {
+          setPdfData(driveDetails);
+          sortApps(null, null, driveDetails);
         }
-      ];
-      setFolderName(data);
-      const loadObj = {
-        isLoad: false
-      };
-      setIsLoading(loadObj);
-    } else if (driveDetails === "Error: Something went wrong!") {
-      const loadObj = {
-        isLoad: false
-      };
-      setHandleError("Error: Something went wrong!");
-      setIsLoading(loadObj);
+        const data = [
+          {
+            name: "OpenSign™ Drive",
+            objectId: ""
+          }
+        ];
+        setFolderName(data);
+        const loadObj = {
+          isLoad: false
+        };
+        setIsLoading(loadObj);
+      } else if (driveDetails === "Error: Something went wrong!") {
+        const loadObj = {
+          isLoad: false
+        };
+        setHandleError("Error: Something went wrong!");
+        setIsLoading(loadObj);
+      }
+    } catch (e) {
+      setIsAlert({
+        isShow: true,
+        alertMessage: "something went wrong"
+      });
     }
   };
   //function for get parent folder document list
@@ -92,24 +94,33 @@ function PdfFile() {
       message: "This might take some time"
     };
     setIsLoading(load);
-    const driveDetails = await getDrive(docId);
-    if (driveDetails) {
-      if (driveDetails.length > 0) {
-        setPdfData(driveDetails);
-        sortApps(null, null, driveDetails);
-      } else {
-        setPdfData([]);
+    let driveDetails;
+    try {
+      driveDetails = await getDrive(docId);
+
+      if (driveDetails) {
+        if (driveDetails.length > 0) {
+          setPdfData(driveDetails);
+          sortApps(null, null, driveDetails);
+        } else {
+          setPdfData([]);
+        }
+        const loadObj = {
+          isLoad: false
+        };
+        setIsLoading(loadObj);
+      } else if (driveDetails === "Error: Something went wrong!") {
+        const loadObj = {
+          isLoad: false
+        };
+        setHandleError("Error: Something went wrong!");
+        setIsLoading(loadObj);
       }
-      const loadObj = {
-        isLoad: false
-      };
-      setIsLoading(loadObj);
-    } else if (driveDetails === "Error: Something went wrong!") {
-      const loadObj = {
-        isLoad: false
-      };
-      setHandleError("Error: Something went wrong!");
-      setIsLoading(loadObj);
+    } catch (e) {
+      setIsAlert({
+        isShow: true,
+        alertMessage: "something went wrong!"
+      });
     }
   };
 
@@ -187,7 +198,7 @@ function PdfFile() {
       } catch (e) {
         setIsAlert({
           isShow: true,
-          alertMessage: "something went wrong"
+          alertMessage: "something went wrong!"
         });
       }
     } else {
@@ -328,11 +339,46 @@ function PdfFile() {
     <div className="folderComponent ">
       <Title title={"OpenSign™ Drive"} drive={true} />
       <div>
-        <AlertComponent
-          isShow={isAlert.isShow}
-          alertMessage={isAlert.alertMessage}
-          setIsAlert={setIsAlert}
-        />
+        <ModalUi
+          headerColor={"#dc3545"}
+          isOpen={isAlert.isShow}
+          title={"Alert"}
+          handleClose={() => {
+            setIsAlert({
+              isShow: false,
+              alertMessage: ""
+            });
+          }}
+        >
+          <div style={{ height: "100%", padding: 20 }}>
+            <p>{isAlert.alertMessage}</p>
+
+            <div
+              style={{
+                height: "1px",
+                backgroundColor: "#9f9f9f",
+                width: "100%",
+                marginTop: "15px",
+                marginBottom: "15px"
+              }}
+            ></div>
+            <button
+              onClick={() =>
+                setIsAlert({
+                  isShow: false,
+                  alertMessage: ""
+                })
+              }
+              style={{
+                color: "black"
+              }}
+              type="button"
+              className="finishBtn"
+            >
+              Close
+            </button>
+          </div>
+        </ModalUi>
         <ModalUi
           isOpen={isFolder}
           title={"Add New Folder"}
@@ -704,6 +750,7 @@ function PdfFile() {
                 isDocId={docId}
                 setPdfData={setPdfData}
                 isList={isList}
+                setIsAlert={setIsAlert}
               />
             )}
           </>
diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
index 471d2bf1f..8c384da3b 100644
--- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
+++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
@@ -851,19 +851,25 @@ function PdfRequestFiles() {
               }}
             >
               {/* this modal is used show this document is already sign */}
+              <ModalUi
+                isOpen={isCompleted.isModal}
+                title={"Sign Documents"}
+                handleClose={() => {
+                  setIsCompleted({ isModal: false, isCertificate: true });
+                }}
+              >
+                <div style={{ height: "100%", padding: 20 }}>
+                  <p>This document has been signed by all Signers.</p>
 
-              <Modal show={isCompleted.isModal}>
-                <ModalHeader style={{ background: themeColor() }}>
-                  <span className="spanTagHead"> Sign Documents</span>
-                </ModalHeader>
-
-                <Modal.Body>
-                  <p className="pTagBody">
-                    This document has been signed by all Signers.
-                  </p>
-                </Modal.Body>
-
-                <Modal.Footer>
+                  <div
+                    style={{
+                      height: "1px",
+                      backgroundColor: "#9f9f9f",
+                      width: "100%",
+                      marginTop: "15px",
+                      marginBottom: "15px"
+                    }}
+                  ></div>
                   <button
                     style={{
                       color: "black"
@@ -876,8 +882,9 @@ function PdfRequestFiles() {
                   >
                     Close
                   </button>
-                </Modal.Footer>
-              </Modal>
+                </div>
+              </ModalUi>
+
               {/* this component is used for signature pad modal */}
               <SignPad
                 isSignPad={isSignPad}
diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
index d34414077..b46cf719c 100644
--- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
+++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
@@ -16,9 +16,7 @@ import FieldsComponent from "./component/fieldsComponent";
 import Modal from "react-bootstrap/Modal";
 import ModalHeader from "react-bootstrap/esm/ModalHeader";
 import {
-  convertPNGtoJPEG,
   contractDocument,
-  getBase64FromIMG,
   embedDocId,
   multiSignEmbed,
   pdfNewWidthFun,
@@ -41,6 +39,7 @@ import AlertComponent from "./component/alertComponent";
 import PlaceholderCopy from "./component/PlaceholderCopy";
 import TourContentWithBtn from "../premitives/TourContentWithBtn";
 import Title from "./component/Title";
+import ModalUi from "../premitives/ModalUi";
 
 //For signYourself inProgress section signer can add sign and complete doc sign.
 function SignYourSelf() {
@@ -865,26 +864,67 @@ 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()}
-              backdropClassName="signature-backdrop"
+            <ModalUi
+              headerColor={"#dc3545"}
+              isOpen={isAlert.isShow}
+              title={"Alert"}
+              handleClose={() => {
+                setIsAlert({
+                  isShow: false,
+                  alertMessage: ""
+                });
+              }}
             >
-              <ModalHeader style={{ background: themeColor() }}>
-                <span style={{ color: "white" }}> Sign Documents</span>
-              </ModalHeader>
+              <div style={{ height: "100%", padding: 20 }}>
+                <p>{isAlert.alertMessage}</p>
 
-              <Modal.Body>
+                <div
+                  style={{
+                    height: "1px",
+                    backgroundColor: "#9f9f9f",
+                    width: "100%",
+                    marginTop: "15px",
+                    marginBottom: "15px"
+                  }}
+                ></div>
+                <button
+                  onClick={() => {
+                    setIsAlert({
+                      isShow: false,
+                      alertMessage: ""
+                    });
+                  }}
+                  style={{
+                    color: "black"
+                  }}
+                  type="button"
+                  className="finishBtn"
+                >
+                  Ok
+                </button>
+              </div>
+            </ModalUi>
+
+            {/* this modal is used show this document is already sign */}
+            <ModalUi
+              isOpen={showAlreadySignDoc.status}
+              title={"Sign Documents"}
+              handleClose={() => {
+                setShowAlreadySignDoc({ status: false });
+              }}
+            >
+              <div style={{ height: "100%", padding: 20 }}>
                 <p>{showAlreadySignDoc.mssg}</p>
-              </Modal.Body>
 
-              <Modal.Footer>
+                <div
+                  style={{
+                    height: "1px",
+                    backgroundColor: "#9f9f9f",
+                    width: "100%",
+                    marginTop: "15px",
+                    marginBottom: "15px"
+                  }}
+                ></div>
                 <button
                   style={{
                     borderRadius: "0px",
@@ -897,20 +937,9 @@ function SignYourSelf() {
                 >
                   Close
                 </button>
-                {showAlreadySignDoc.sure && (
-                  <button
-                    onClick={() => addDefaultSignature()}
-                    style={{
-                      background: themeColor()
-                    }}
-                    type="button"
-                    className="finishBtn"
-                  >
-                    Yes
-                  </button>
-                )}
-              </Modal.Footer>
-            </Modal>
+              </div>
+            </ModalUi>
+
             <PlaceholderCopy
               isPageCopy={isPageCopy}
               setIsPageCopy={setIsPageCopy}
diff --git a/microfrontends/SignDocuments/src/Component/component/PlaceholderCopy.js b/microfrontends/SignDocuments/src/Component/component/PlaceholderCopy.js
index c2a099463..5fc56ad20 100644
--- a/microfrontends/SignDocuments/src/Component/component/PlaceholderCopy.js
+++ b/microfrontends/SignDocuments/src/Component/component/PlaceholderCopy.js
@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import Modal from "react-bootstrap/Modal";
 import ModalHeader from "react-bootstrap/esm/ModalHeader";
 import { themeColor } from "../../utils/ThemeColor/backColor";
+import ModalUi from "../../premitives/ModalUi";
 
 function PlaceholderCopy(props) {
   const copyType = ["All pages", "All pages but last", "All pages but first"];
@@ -200,12 +201,14 @@ function PlaceholderCopy(props) {
   };
 
   return (
-    <Modal show={props.isPageCopy}>
-      <ModalHeader style={{ background: themeColor() }}>
-        <span style={{ color: "white" }}>Copy to all pages</span>
-      </ModalHeader>
-
-      <Modal.Body>
+    <ModalUi
+      isOpen={props.isPageCopy}
+      title={"Copy to all pages"}
+      handleClose={() => {
+        props.setIsPageCopy(false);
+      }}
+    >
+      <div style={{ height: "100%", padding: 20 }}>
         {copyType.map((data, key) => {
           return (
             <div key={key} style={{ display: "flex", flexDirection: "column" }}>
@@ -223,20 +226,16 @@ function PlaceholderCopy(props) {
             </div>
           );
         })}
-      </Modal.Body>
 
-      <Modal.Footer>
-        <button
+        <div
           style={{
-            color: "black"
+            height: "1px",
+            backgroundColor: "#9f9f9f",
+            width: "100%",
+            marginTop: "15px",
+            marginBottom: "15px"
           }}
-          type="button"
-          className="finishBtn"
-          onClick={() => props.setIsPageCopy(false)}
-        >
-          Cancel
-        </button>
-
+        ></div>
         <button
           onClick={() => {
             handleApplyCopy();
@@ -251,8 +250,18 @@ function PlaceholderCopy(props) {
         >
           Apply
         </button>
-      </Modal.Footer>
-    </Modal>
+        <button
+          style={{
+            color: "black"
+          }}
+          type="button"
+          className="finishBtn"
+          onClick={() => props.setIsPageCopy(false)}
+        >
+          Cancel
+        </button>
+      </div>
+    </ModalUi>
   );
 }
 
diff --git a/microfrontends/SignDocuments/src/Component/component/emailComponent.js b/microfrontends/SignDocuments/src/Component/component/emailComponent.js
index 0c9e3ffb7..b5f8b323c 100644
--- a/microfrontends/SignDocuments/src/Component/component/emailComponent.js
+++ b/microfrontends/SignDocuments/src/Component/component/emailComponent.js
@@ -1,8 +1,6 @@
 import React, { useState } from "react";
 import { saveAs } from "file-saver";
 import celebration from "../../assests/newCeleb.gif";
-import Modal from "react-bootstrap/Modal";
-import ModalHeader from "react-bootstrap/esm/ModalHeader";
 import axios from "axios";
 import { getBase64FromUrl } from "../../utils/Utils";
 import { themeColor } from "../../utils/ThemeColor/backColor";
@@ -159,251 +157,269 @@ function EmailComponent({
   return (
     <div>
       {/* isEmail */}
-      <Modal show={isEmail}>
-        {isLoading && (
-          <div
-            style={{
-              position: "absolute",
-              height: "100%",
-              width: "100%",
-              display: "flex",
-              justifyContent: "center",
-              flexDirection: "column",
-              alignItems: "center",
-              zIndex: "20",
-              backgroundColor: "#e6f2f2",
-              opacity: 0.8
-            }}
-          >
-            <img
-              alt="no img"
-              src={loader}
-              style={{ width: "70px", height: "70px" }}
-            />
-            <span style={{ fontSize: "12px", fontWeight: "bold" }}>
-              This might take some time
-            </span>
-          </div>
-        )}
-
-        <ModalHeader style={{ background: themeColor() }}>
-          <span style={{ color: "white" }}>Successfully signed!</span>
-
-          <div style={{ display: "flex", flexDirection: "row" }}>
-            <div></div>
-            {!isAndroid && (
-              <button
-                onClick={handleToPrint}
+      {isEmail && (
+        <div className="modaloverlay">
+          <div className="modalcontainer">
+            {isLoading && (
+              <div
                 style={{
+                  position: "absolute",
+                  height: "100%",
+                  width: "100%",
                   display: "flex",
-                  flexDirection: "row",
-                  alignItems: "center"
+                  justifyContent: "center",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  zIndex: "20",
+                  backgroundColor: "#e6f2f2",
+                  opacity: 0.8
                 }}
-                className="btn btn-primary btn-sm"
               >
-                <i
-                  className="fa fa-print"
-                  style={{
-                    fontSize: "15px",
-                    marginRight: "3px",
-                    color: "white"
-                  }}
-                  aria-hidden="true"
-                ></i>
-                Print
-              </button>
+                <img
+                  alt="no img"
+                  src={loader}
+                  style={{ width: "70px", height: "70px" }}
+                />
+                <span style={{ fontSize: "12px", fontWeight: "bold" }}>
+                  This might take some time
+                </span>
+              </div>
             )}
+            <div style={{ background: "#32a3ac" }} className="modalheader">
+              <span style={{ color: "white" }}>Successfully signed!</span>
 
-            <button
-              className="btn btn-danger btn-sm"
-              onClick={() => handleDownloadPdf()}
-              style={{
-                display: "flex",
-                flexDirection: "row",
-                alignItems: "center",
-                marginLeft: "10px"
-              }}
-            >
-              <i
-                className="fa fa-download"
-                style={{
-                  color: "white",
-                  fontSize: "15px",
-                  marginRight: "3px"
-                }}
-                aria-hidden="true"
-              ></i>
-              Download
-            </button>
-          </div>
-        </ModalHeader>
+              <div style={{ display: "flex", flexDirection: "row" }}>
+                <div></div>
+                {!isAndroid && (
+                  <button
+                    onClick={handleToPrint}
+                    style={{
+                      display: "flex",
+                      flexDirection: "row",
+                      alignItems: "center"
+                    }}
+                    className="btn btn-primary btn-sm"
+                  >
+                    <i
+                      className="fa fa-print"
+                      style={{
+                        fontSize: "15px",
+                        marginRight: "3px",
+                        color: "white"
+                      }}
+                      aria-hidden="true"
+                    ></i>
+                    Print
+                  </button>
+                )}
 
-        <Modal.Body>
-          {isCeleb && (
-            <div
-              style={{
-                position: "absolute",
-                marginLeft: "50px"
-              }}
-            >
-              <img
-                alt="print img"
-                width={300}
-                height={250}
-                // style={styles.gifCeleb}
-                src={celebration}
-              />
-            </div>
-          )}
-          <p
-            style={{
-              fontFamily: "system-ui",
-              verticalAlign: "baseline",
-              fontWeight: "500",
-              color: "#403f3e",
-              fontSize: "15px"
-            }}
-          >
-            Recipients added here will get a copy of the signed document.
-          </p>
-          {emailList.length > 0 ? (
-            <>
-              <div className="addEmail">
-                <div
+                <button
+                  className="btn btn-danger btn-sm"
+                  onClick={() => handleDownloadPdf()}
                   style={{
                     display: "flex",
                     flexDirection: "row",
-
-                    flexWrap: "wrap"
+                    alignItems: "center",
+                    marginLeft: "10px"
                   }}
                 >
-                  {emailList.map((data, ind) => {
-                    return (
-                      <div
-                        className="emailChip"
-                        style={{
-                          display: "flex",
-                          flexDirection: "row",
-                          alignItems: "center"
-                        }}
-                        key={ind}
-                      >
-                        <span
-                          style={{
-                            color: "white",
-                            fontSize: "13px"
-                          }}
-                        >
-                          {data}
-                        </span>
-                        <span
-                          style={{
-                            color: "white",
-                            fontSize: 13,
-                            fontWeight: 600,
-                            marginLeft: 7,
-                            cursor: "pointer"
-                          }}
-                          onClick={() => removeChip(ind)}
-                        >
-                          <i className="fa-solid fa-xmark"></i>
-                        </span>
-                      </div>
-                    );
-                  })}
+                  <i
+                    className="fa fa-download"
+                    style={{
+                      color: "white",
+                      fontSize: "15px",
+                      marginRight: "3px"
+                    }}
+                    aria-hidden="true"
+                  ></i>
+                  Download
+                </button>
+              </div>
+            </div>
+            <div style={{ height: "100%", padding: 20 }}>
+              {isCeleb && (
+                <div
+                  style={{
+                    position: "absolute",
+                    marginLeft: "50px"
+                  }}
+                >
+                  <img
+                    alt="print img"
+                    width={300}
+                    height={250}
+                    // style={styles.gifCeleb}
+                    src={celebration}
+                  />
                 </div>
-                {emailList.length <= 9 && (
+              )}
+              <p
+                style={{
+                  fontFamily: "system-ui",
+                  verticalAlign: "baseline",
+                  fontWeight: "500",
+                  color: "#403f3e",
+                  fontSize: "15px"
+                }}
+              >
+                Recipients added here will get a copy of the signed document.
+              </p>
+              {emailList.length > 0 ? (
+                <>
+                  <div className="addEmail">
+                    <div
+                      style={{
+                        display: "flex",
+                        flexDirection: "row",
+
+                        flexWrap: "wrap"
+                      }}
+                    >
+                      {emailList.map((data, ind) => {
+                        return (
+                          <div
+                            className="emailChip"
+                            style={{
+                              display: "flex",
+                              flexDirection: "row",
+                              alignItems: "center"
+                            }}
+                            key={ind}
+                          >
+                            <span
+                              style={{
+                                color: "white",
+                                fontSize: "13px"
+                              }}
+                            >
+                              {data}
+                            </span>
+                            <span
+                              style={{
+                                color: "white",
+                                fontSize: 13,
+                                fontWeight: 600,
+                                marginLeft: 7,
+                                cursor: "pointer"
+                              }}
+                              onClick={() => removeChip(ind)}
+                            >
+                              <i className="fa-solid fa-xmark"></i>
+                            </span>
+                          </div>
+                        );
+                      })}
+                    </div>
+                    {emailList.length <= 9 && (
+                      <input
+                        type="text"
+                        value={emailValue}
+                        className="addEmailInput"
+                        onChange={handleEmailValue}
+                        onKeyDown={handleEnterPress}
+                        onBlur={() => {
+                          if (emailValue) {
+                            handleEnterPress("add");
+                          }
+                        }}
+                        required
+                      />
+                    )}
+                  </div>
+                </>
+              ) : (
+                <div>
                   <input
                     type="text"
                     value={emailValue}
-                    className="addEmailInput"
+                    className="emailInput"
                     onChange={handleEmailValue}
                     onKeyDown={handleEnterPress}
+                    placeholder="Add the email addresses"
+                    onBlur={() => {
+                      if (emailValue) {
+                        handleEnterPress("add");
+                      }
+                    }}
                     required
                   />
-                )}
+                </div>
+              )}
+              <span
+                style={{
+                  cursor: emailValue && "pointer"
+                }}
+                onClick={() => {
+                  if (emailValue) {
+                    handleEnterPress("add");
+                  }
+                }}
+              >
+                <i
+                  style={{
+                    backgroundColor: themeColor(),
+                    padding: "2px 10px",
+                    marginTop: "10px",
+                    color: "white"
+                  }}
+                  className="fa fa-plus"
+                  aria-hidden="true"
+                ></i>
+              </span>
+
+              <div
+                style={{
+                  background: "#e3e2e1",
+                  marginTop: "30px",
+                  padding: "5px",
+                  borderRadius: "3px"
+                }}
+              >
+                <span style={{ fontWeight: "700" }}>Note:</span>
+                <span style={{ fontSize: "15px" }}>
+                  {" "}
+                  You can only send to ten recipients at a time.
+                </span>
               </div>
-            </>
-          ) : (
-            <div>
-              <input
-                type="text"
-                value={emailValue}
-                className="emailInput"
-                onChange={handleEmailValue}
-                onKeyDown={handleEnterPress}
-                placeholder="Add the email addresses"
-                required
-              />
+              <div
+                style={{
+                  height: "1px",
+                  backgroundColor: "#9f9f9f",
+                  width: "100%",
+                  marginTop: "15px",
+                  marginBottom: "15px"
+                }}
+              ></div>
+              <button
+                disabled={emailList.length === 0 && true}
+                style={{
+                  background: themeColor(),
+                  color: "white"
+                }}
+                type="button"
+                className={emailList.length === 0 ? "defaultBtn" : "finishBtn"}
+                onClick={() => sendEmail()}
+              >
+                Send
+              </button>
+              <button
+                style={{
+                  color: "black"
+                }}
+                type="button"
+                className="finishBtn"
+                onClick={() => {
+                  setIsEmail(false);
+                  setEmailValue("");
+                  setEmailList([]);
+                }}
+              >
+                Close
+              </button>
             </div>
-          )}
-          <span
-            style={{
-              cursor: emailValue && "pointer"
-            }}
-            onClick={() => {
-              if (emailValue) {
-                handleEnterPress("add");
-              }
-            }}
-          >
-            <i
-              style={{
-                backgroundColor: themeColor(),
-                padding: "2px 10px",
-                marginTop: "10px",
-                color: "white"
-              }}
-              className="fa fa-plus"
-              aria-hidden="true"
-            ></i>
-          </span>
-
-          <div
-            style={{
-              background: "#e3e2e1",
-              marginTop: "30px",
-              padding: "5px",
-              borderRadius: "3px"
-            }}
-          >
-            <span style={{ fontWeight: "700" }}>Note:</span>
-            <span style={{ fontSize: "15px" }}>
-              {" "}
-              You can only send to ten recipients at a time.
-            </span>
           </div>
-        </Modal.Body>
-
-        <Modal.Footer>
-          <button
-            style={{
-              color: "black"
-            }}
-            type="button"
-            className="finishBtn"
-            onClick={() => {
-              setIsEmail(false);
-              setEmailValue("");
-              setEmailList([]);
-            }}
-          >
-            Close
-          </button>
-          <button
-            disabled={emailList.length === 0 && true}
-            style={{
-              background: themeColor(),
-              color: "white"
-            }}
-            type="button"
-            className={emailList.length === 0 ? "defaultBtn" : "finishBtn"}
-            onClick={() => sendEmail()}
-          >
-            Send
-          </button>
-        </Modal.Footer>
-      </Modal>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js
index d87a2c9f2..002a3b1ca 100644
--- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js
+++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js
@@ -520,7 +520,14 @@ function RenderPdf({
                                         posHeight={posHeight}
                                       />
                                       <div
+                                        onClick={(e) => {
+                                          e.stopPropagation();
+                                          handleLinkUser(data.Id);
+                                          setUniqueId(data.Id);
+                                        }}
                                         onTouchEnd={() => {
+                                          handleLinkUser(data.Id);
+                                          setUniqueId(data.Id);
                                           const dataNewPlace = addZIndex(
                                             signerPos,
                                             pos.key,
@@ -777,6 +784,7 @@ function RenderPdf({
               onLoadError={(e) => {
                 setPdfLoadFail(true);
               }}
+              loading={"Loading Document.."}
               onLoadSuccess={pageDetails}
               ref={pdfRef}
               file={
@@ -845,6 +853,8 @@ function RenderPdf({
                                     return (
                                       <Rnd
                                         onClick={() => {
+                                          handleLinkUser(data.Id);
+                                          setUniqueId(data.Id);
                                           const dataNewPlace = addZIndex(
                                             signerPos,
                                             pos.key,
@@ -1096,6 +1106,7 @@ function RenderPdf({
                 };
                 setPdfLoadFail(load);
               }}
+              loading={"Loading Document.."}
               onLoadSuccess={pageDetails}
               ref={pdfRef}
               file={
diff --git a/microfrontends/SignDocuments/src/Component/component/signPad.js b/microfrontends/SignDocuments/src/Component/component/signPad.js
index f4d3d6c2d..576a45757 100644
--- a/microfrontends/SignDocuments/src/Component/component/signPad.js
+++ b/microfrontends/SignDocuments/src/Component/component/signPad.js
@@ -4,7 +4,6 @@ import SignatureCanvas from "react-signature-canvas";
 import redPen from "../../assests/redPen.png";
 import bluePen from "../../assests/bluePen.png";
 import blackPen from "../../assests/blackPen.png";
-import Modal from "react-bootstrap/Modal";
 import { themeColor } from "../../utils/ThemeColor/backColor";
 import { useEffect } from "react";
 
@@ -26,7 +25,6 @@ function SignPad({
   const [penColor, setPenColor] = useState("blue");
   const allColor = [bluePen, redPen, blackPen];
   const canvasRef = useRef(null);
-  const spanRef = useRef(null);
   const [isDefaultSign, setIsDefaultSign] = useState(false);
   const [isTab, setIsTab] = useState("draw");
   const [isSignImg, setIsSignImg] = useState("");
@@ -212,375 +210,376 @@ function SignPad({
 
   return (
     <div>
-      {/*isSignPad  */}
-      <Modal show={isSignPad}>
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "row",
-            justifyContent: "space-between",
-            background: "white",
-            borderBottom: "1.6px solid #ebe6e6",
-            marginTop: "15px"
-          }}
-        >
-          <div
-            style={{
-              display: "flex",
-              flexDirection: "row",
-              justifyContent: "space-around",
-              alignItems: "end",
-              gap: 10
-            }}
-          >
-            {isStamp ? (
-              <span style={{ color: themeColor() }} className="signTab">
-                Upload stamp image
-              </span>
-            ) : (
-              <>
-                <div>
-                  <span
-                    onClick={() => {
-                      setIsDefaultSign(false);
-                      setIsImageSelect(false);
-                      setIsTab("draw");
-                      setImage();
-                    }}
-                    style={{
-                      color: isTab === "draw" ? themeColor() : "#515252",
-
-                      marginLeft: "2px"
-                    }}
-                    className="signTab"
-                  >
-                    Draw
-                  </span>
-
-                  <div
-                    style={{
-                      border:
-                        isTab === "draw"
-                          ? "1.5px solid #108783"
-                          : "1.5px solid #ffffff"
-                    }}
-                  ></div>
-                </div>
-                <div>
-                  <span
-                    onClick={() => {
-                      setIsDefaultSign(false);
-                      setIsImageSelect(true);
-                      setIsTab("uploadImage");
-                    }}
-                    style={{
-                      color: isTab === "uploadImage" ? themeColor() : "#515252"
-                    }}
-                    className="signTab"
-                  >
-                    Upload Image
-                  </span>
-                  <div
-                    style={{
-                      border:
-                        isTab === "uploadImage"
-                          ? "1.5px solid #108783"
-                          : "1.5px solid #ffffff"
-                    }}
-                  ></div>
-                </div>
-                <div>
-                  <span
-                    onClick={() => {
-                      setIsDefaultSign(false);
-                      setIsImageSelect(false);
-                      setIsTab("type");
-                      setImage();
-                    }}
-                    style={{
-                      color: isTab === "type" ? themeColor() : "#515252",
-
-                      marginLeft: "2px"
-                    }}
-                    className="signTab"
-                  >
-                    Type
-                  </span>
-
-                  <div
-                    style={{
-                      border:
-                        isTab === "type"
-                          ? "1.5px solid #108783"
-                          : "1.5px solid #ffffff"
-                    }}
-                  ></div>
-                </div>
-                {defaultSign && (
-                  <div>
-                    <span
-                      onClick={() => {
-                        setIsDefaultSign(true);
-                        setIsImageSelect(true);
-                        setIsTab("mysignature");
-                        setImage();
-                      }}
-                      style={{
-                        color:
-                          isTab === "mysignature" ? themeColor() : "#515252"
-                      }}
-                      className="signTab"
-                    >
-                      My Signature
-                    </span>
-                    <div
-                      style={{
-                        border:
-                          isTab === "mysignature"
-                            ? "1.5px solid #108783"
-                            : "1.5px solid #ffffff"
-                      }}
-                    ></div>
-                  </div>
-                )}
-              </>
-            )}
-          </div>
-
-          <button
-            style={{
-              border: "0px",
-              background: "none",
-              paddingLeft: "7px",
-              paddingRight: "7px",
-              marginRight: "5px"
-            }}
-            onClick={() => {
-              setPenColor("blue");
-              setIsSignPad(false);
-
-              setIsImageSelect(false);
-              setIsDefaultSign(false);
-              setImage();
-              setIsTab("draw");
-            }}
-          >
-            X
-          </button>
-        </div>
-
-        {/* signature modal */}
-        <Modal.Body className="modalBody">
-          {isDefaultSign ? (
-            <>
-              <div
-                style={{
-                  border: "1px solid black",
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: "center",
-                  alignItems: "center",
-                  marginBottom: 6,
-                  cursor: "pointer"
-                  //  background:'rgb(255, 255, 255)'
-                }}
-                className="signatureCanvas"
-              >
-                <img
-                  alt="stamp img"
-                  style={{
-                    width: "100%",
-                    height: "100%",
-                    background: "rgb(255, 255, 255)",
-                    objectFit: "contain"
-                  }}
-                  src={defaultSign}
-                />
-              </div>
-              <div style={{ display: "flex", justifyContent: "flex-end" }}>
-                <SaveBtn />
-              </div>
-            </>
-          ) : isImageSelect || isStamp ? (
-            !image ? (
-              <div
-                style={{
-                  border: "1px solid black",
-
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: "center",
-                  alignItems: "center",
-                  marginBottom: 6,
-                  cursor: "pointer"
-                }}
-                className="signatureCanvas"
-                onClick={() => imageRef.current.click()}
-              >
-                <input
-                  type="file"
-                  onChange={onImageChange}
-                  className="filetype"
-                  accept="image/*"
-                  ref={imageRef}
-                  hidden
-                  // style={{ display: "none" }}
-                />
-                <i className="fas fa-cloud-upload-alt uploadImgLogo"></i>
-                <div className="uploadImg">Upload</div>
-              </div>
-            ) : (
-              <>
+      {isSignPad && (
+        <div className="modaloverlay">
+          <div className="modalcontainer">
+            <div className="modalheader" style={{ padding: "0 5px" }}>
+              <div className="modaltitle">
                 <div
                   style={{
-                    // position: "relative",
+                    display: "flex",
+                    flexDirection: "row",
+                    justifyContent: "space-between",
+                    background: "white",
 
-                    border: "1px solid black",
-                    marginBottom: 6,
-                    // justifyContent:"center"
-                    overflow: "hidden"
+                    marginTop: "15px"
                   }}
-                  className="signatureCanvas"
                 >
-                  <img
-                    alt="print img"
-                    ref={imageRef}
-                    // alt="preview image"
-                    src={image.src}
+                  <div
                     style={{
-                      //overflow:"hidden",
-                      objectFit: "contain"
+                      display: "flex",
+                      flexDirection: "row",
+                      justifyContent: "space-around",
+                      alignItems: "end",
+                      gap: 10
                     }}
-                  />
+                  >
+                    {isStamp ? (
+                      <span style={{ color: themeColor() }} className="signTab">
+                        Upload stamp image
+                      </span>
+                    ) : (
+                      <>
+                        <div>
+                          <span
+                            onClick={() => {
+                              setIsDefaultSign(false);
+                              setIsImageSelect(false);
+                              setIsTab("draw");
+                              setImage();
+                            }}
+                            style={{
+                              color:
+                                isTab === "draw" ? themeColor() : "#515252",
+
+                              marginLeft: "2px"
+                            }}
+                            className="signTab"
+                          >
+                            Draw
+                          </span>
+
+                          <div
+                            style={{
+                              border:
+                                isTab === "draw"
+                                  ? "1.5px solid #108783"
+                                  : "1.5px solid #ffffff"
+                            }}
+                          ></div>
+                        </div>
+                        <div>
+                          <span
+                            onClick={() => {
+                              setIsDefaultSign(false);
+                              setIsImageSelect(true);
+                              setIsTab("uploadImage");
+                            }}
+                            style={{
+                              color:
+                                isTab === "uploadImage"
+                                  ? themeColor()
+                                  : "#515252"
+                            }}
+                            className="signTab"
+                          >
+                            Upload Image
+                          </span>
+                          <div
+                            style={{
+                              border:
+                                isTab === "uploadImage"
+                                  ? "1.5px solid #108783"
+                                  : "1.5px solid #ffffff"
+                            }}
+                          ></div>
+                        </div>
+                        <div>
+                          <span
+                            onClick={() => {
+                              setIsDefaultSign(false);
+                              setIsImageSelect(false);
+                              setIsTab("type");
+                              setImage();
+                            }}
+                            style={{
+                              color:
+                                isTab === "type" ? themeColor() : "#515252",
+
+                              marginLeft: "2px"
+                            }}
+                            className="signTab"
+                          >
+                            Type
+                          </span>
+
+                          <div
+                            style={{
+                              border:
+                                isTab === "type"
+                                  ? "1.5px solid #108783"
+                                  : "1.5px solid #ffffff"
+                            }}
+                          ></div>
+                        </div>
+                        {defaultSign && (
+                          <div>
+                            <span
+                              onClick={() => {
+                                setIsDefaultSign(true);
+                                setIsImageSelect(true);
+                                setIsTab("mysignature");
+                                setImage();
+                              }}
+                              style={{
+                                color:
+                                  isTab === "mysignature"
+                                    ? themeColor()
+                                    : "#515252"
+                              }}
+                              className="signTab"
+                            >
+                              My Signature
+                            </span>
+                            <div
+                              style={{
+                                border:
+                                  isTab === "mysignature"
+                                    ? "1.5px solid #108783"
+                                    : "1.5px solid #ffffff"
+                              }}
+                            ></div>
+                          </div>
+                        )}
+                      </>
+                    )}
+                  </div>
                 </div>
-                <div style={{ display: "flex", justifyContent: "flex-end" }}>
-                  <SaveBtn />
-                </div>
-              </>
-            )
-          ) : isTab === "type" ? (
-            <div>
+              </div>
               <div
-                style={{
-                  display: "flex",
-                  justifyContent: "space-between",
-                  alignItems: "center"
+                className="closebtn"
+                style={{ color: "black" }}
+                onClick={() => {
+                  setPenColor("blue");
+                  setIsSignPad(false);
+
+                  setIsImageSelect(false);
+                  setIsDefaultSign(false);
+                  setImage();
+                  setIsTab("draw");
                 }}
               >
-                <span className="signatureText">Signature:</span>
-
-                <input
-                  maxLength={30}
-                  style={{ fontFamily: fontSelect }}
-                  type="text"
-                  className="signatureInput"
-                  placeholder="Your signature"
-                  value={signValue}
-                  onChange={(e) => {
-                    setSignValue(e.target.value);
-                    convertToImg(fontSelect, e.target.value);
-                  }}
-                />
-              </div>
-              {/* <div ref={spanRef}>nwbfmb</div> */}
-              <div className="fontOptionContainer">
-                {fontOptions.map((font, ind) => {
-                  return (
-                    <div
-                      key={ind}
-                      style={{
-                        cursor: "pointer",
-                        fontFamily: font.value,
-                        backgroundColor:
-                          fontSelect === font.value && "rgb(206 225 247)"
-                      }}
-                      onClick={() => {
-                        setFontSelect(font.value);
-                        convertToImg(font.value, signValue);
-                      }}
-                    >
-                      <div
-                        style={{
-                          padding: "5px 10px 5px 10px",
-                          fontSize: "20px"
-                        }}
-                      >
-                        {signValue ? signValue : "Your signature"}
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-
-              <div style={{ display: "flex", justifyContent: "flex-end" }}>
-                <SaveBtn />
+                &times;
               </div>
             </div>
-          ) : (
-            <>
-              <SignatureCanvas
-                ref={canvasRef}
-                penColor={penColor}
-                canvasProps={{
-                  className: "signatureCanvas"
-                }}
-                backgroundColor="rgb(255, 255, 255)"
-                onEnd={() =>
-                  handleSignatureChange(canvasRef.current.toDataURL())
-                }
-                dotSize={1}
-              />
+            <div style={{ height: "100%", padding: 20 }}>
+              {isDefaultSign ? (
+                <>
+                  <div
+                    style={{
+                      border: "1px solid black",
+                      display: "flex",
+                      flexDirection: "column",
+                      justifyContent: "center",
+                      alignItems: "center",
+                      marginBottom: 6,
+                      cursor: "pointer"
+                    }}
+                    className="signatureCanvas"
+                  >
+                    <img
+                      alt="stamp img"
+                      style={{
+                        width: "100%",
+                        height: "100%",
+                        background: "rgb(255, 255, 255)",
+                        objectFit: "contain"
+                      }}
+                      src={defaultSign}
+                    />
+                  </div>
+                  <div style={{ display: "flex", justifyContent: "flex-end" }}>
+                    <SaveBtn />
+                  </div>
+                </>
+              ) : isImageSelect || isStamp ? (
+                !image ? (
+                  <div
+                    style={{
+                      border: "1px solid black",
 
-              <div
-                style={{
-                  display: "flex",
-                  flexDirection: "row",
-                  justifyContent: "space-between",
-                  marginTop: "4px"
-                }}
-              >
-                <div style={{ display: "flex", flexDirection: "row" }}>
-                  {allColor.map((data, key) => {
-                    return (
+                      display: "flex",
+                      flexDirection: "column",
+                      justifyContent: "center",
+                      alignItems: "center",
+                      marginBottom: 6,
+                      cursor: "pointer"
+                    }}
+                    className="signatureCanvas"
+                    onClick={() => imageRef.current.click()}
+                  >
+                    <input
+                      type="file"
+                      onChange={onImageChange}
+                      className="filetype"
+                      accept="image/*"
+                      ref={imageRef}
+                      hidden
+                    />
+                    <i className="fas fa-cloud-upload-alt uploadImgLogo"></i>
+                    <div className="uploadImg">Upload</div>
+                  </div>
+                ) : (
+                  <>
+                    <div
+                      style={{
+                        border: "1px solid black",
+                        marginBottom: 6,
+
+                        overflow: "hidden"
+                      }}
+                      className="signatureCanvas"
+                    >
                       <img
-                        key={key}
-                        alt="pen img"
+                        alt="print img"
+                        ref={imageRef}
+                        src={image.src}
                         style={{
-                          border: "none",
-                          margin: "5px",
-                          borderBottom:
-                            key === 0 && penColor === "blue"
-                              ? "2px solid blue"
-                              : key === 1 && penColor === "red"
-                                ? "2px solid red"
-                                : key === 2 && penColor === "black"
-                                  ? "2px solid black"
-                                  : "2px solid white"
+                          objectFit: "contain"
                         }}
-                        onClick={() => {
-                          if (key === 0) {
-                            setPenColor("blue");
-                          } else if (key === 1) {
-                            setPenColor("red");
-                          } else if (key === 2) {
-                            setPenColor("black");
-                          }
-                        }}
-                        src={data}
-                        width={20}
-                        height={20}
                       />
-                      // </button>
-                    );
-                  })}
-                </div>
+                    </div>
+                    <div
+                      style={{ display: "flex", justifyContent: "flex-end" }}
+                    >
+                      <SaveBtn />
+                    </div>
+                  </>
+                )
+              ) : isTab === "type" ? (
+                <div>
+                  <div
+                    style={{
+                      display: "flex",
+                      justifyContent: "space-between",
+                      alignItems: "center"
+                    }}
+                  >
+                    <span className="signatureText">Signature:</span>
 
-                <SaveBtn />
-              </div>
-            </>
-          )}
-        </Modal.Body>
-      </Modal>
+                    <input
+                      maxLength={30}
+                      style={{ fontFamily: fontSelect }}
+                      type="text"
+                      className="signatureInput"
+                      placeholder="Your signature"
+                      value={signValue}
+                      onChange={(e) => {
+                        setSignValue(e.target.value);
+                        convertToImg(fontSelect, e.target.value);
+                      }}
+                    />
+                  </div>
+
+                  <div className="fontOptionContainer">
+                    {fontOptions.map((font, ind) => {
+                      return (
+                        <div
+                          key={ind}
+                          style={{
+                            cursor: "pointer",
+                            fontFamily: font.value,
+                            backgroundColor:
+                              fontSelect === font.value && "rgb(206 225 247)"
+                          }}
+                          onClick={() => {
+                            setFontSelect(font.value);
+                            convertToImg(font.value, signValue);
+                          }}
+                        >
+                          <div
+                            style={{
+                              padding: "5px 10px 5px 10px",
+                              fontSize: "20px"
+                            }}
+                          >
+                            {signValue ? signValue : "Your signature"}
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+
+                  <div style={{ display: "flex", justifyContent: "flex-end" }}>
+                    <SaveBtn />
+                  </div>
+                </div>
+              ) : (
+                <>
+                  <SignatureCanvas
+                    ref={canvasRef}
+                    penColor={penColor}
+                    canvasProps={{
+                      className: "signatureCanvas"
+                    }}
+                    backgroundColor="rgb(255, 255, 255)"
+                    onEnd={() =>
+                      handleSignatureChange(canvasRef.current.toDataURL())
+                    }
+                    dotSize={1}
+                  />
+
+                  <div
+                    style={{
+                      display: "flex",
+                      flexDirection: "row",
+                      justifyContent: "space-between",
+                      marginTop: "4px"
+                    }}
+                  >
+                    <div style={{ display: "flex", flexDirection: "row" }}>
+                      {allColor.map((data, key) => {
+                        return (
+                          <img
+                            key={key}
+                            alt="pen img"
+                            style={{
+                              border: "none",
+                              margin: "5px",
+                              borderBottom:
+                                key === 0 && penColor === "blue"
+                                  ? "2px solid blue"
+                                  : key === 1 && penColor === "red"
+                                    ? "2px solid red"
+                                    : key === 2 && penColor === "black"
+                                      ? "2px solid black"
+                                      : "2px solid white"
+                            }}
+                            onClick={() => {
+                              if (key === 0) {
+                                setPenColor("blue");
+                              } else if (key === 1) {
+                                setPenColor("red");
+                              } else if (key === 2) {
+                                setPenColor("black");
+                              }
+                            }}
+                            src={data}
+                            width={20}
+                            height={20}
+                          />
+                        );
+                      })}
+                    </div>
+
+                    <SaveBtn />
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js
index bd6cbcb65..953100091 100644
--- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js
+++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js
@@ -1,7 +1,6 @@
 import React, { useState, useRef, useEffect } from "react";
 import axios from "axios";
 import "../css/./signature.css";
-import Modal from "react-bootstrap/Modal";
 import sign from "../assests/sign3.png";
 import stamp from "../assests/stamp2.png";
 import { themeColor } from "../utils/ThemeColor/backColor";
@@ -26,7 +25,6 @@ import {
   randomId
 } from "../utils/Utils";
 import RenderPdf from "./component/renderPdf";
-import ModalComponent from "./component/modalComponent";
 import { useNavigate } from "react-router-dom";
 import PlaceholderCopy from "./component/PlaceholderCopy";
 import LinkUserModal from "./component/LinkUserModal";
@@ -680,6 +678,9 @@ function PlaceHolderSign() {
         const hostUrl = window.location.origin + "/loadmf/signmicroapp";
         let signPdf = `${hostUrl}/login/${pdfDetails?.[0].objectId}/${signerMail[i].Email}/${objectId}/${serverParams}`;
         const openSignUrl = "https://www.opensignlabs.com/contact-us";
+        const orgName = pdfDetails[0]?.ExtUserPtr.Company
+          ? pdfDetails[0].ExtUserPtr.Company
+          : "";
         const themeBGcolor = themeColor();
         let params = {
           recipient: signerMail[i].Email,
@@ -687,7 +688,7 @@ function PlaceHolderSign() {
           from: sender,
 
           html:
-            "<html><head><meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> </head>   <body> <div style='background-color: #f5f5f5; padding: 20px'> <div   style=' box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;background-color: white;padding-bottom: 20px;'> <div><img src=" +
+            "<html><head><meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> </head>   <body> <div style='background-color: #f5f5f5; padding: 20px'=> <div   style=' box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;background: white;padding-bottom: 20px;'> <div style='padding:10px 10px 0 10px'><img src=" +
             imgPng +
             " height='50' style='padding: 20px,width:170px,height:40px' /></div>  <div  style=' padding: 2px;font-family: system-ui;background-color:" +
             themeBGcolor +
@@ -697,11 +698,13 @@ function PlaceHolderSign() {
             pdfDetails?.[0].Name +
             "</strong>.</p><div style='padding: 5px 0px 5px 25px;display: flex;flex-direction: row;justify-content: space-around;'><table> <tr> <td style='font-weight:bold;font-family:sans-serif;font-size:15px'>Sender</td> <td> </td> <td  style='color:#626363;font-weight:bold'>" +
             sender +
-            "</td></tr><tr><td style='font-weight:bold;font-family:sans-serif;font-size:15px'>Organization Name</td> <td> </td><td style='color:#626363;font-weight:bold'>__</td></tr> <tr> <td style='font-weight:bold;font-family:sans-serif;font-size:15px'>Expire on</td><td> </td> <td style='color:#626363;font-weight:bold'>" +
+            "</td></tr><tr><td style='font-weight:bold;font-family:sans-serif;font-size:15px'>Organization</td> <td> </td><td style='color:#626363;font-weight:bold'> " +
+            orgName +
+            "</td></tr> <tr> <td style='font-weight:bold;font-family:sans-serif;font-size:15px'>Expire on</td><td> </td> <td style='color:#626363;font-weight:bold'>" +
             localExpireDate +
-            "</td></tr><tr> <td></td> <td> <div style='display: flex; justify-content: center;margin-top: 50px;'><a href=" +
+            "</td></tr><tr> <td></td> <td> </td></tr></table> </div> <div style='margin-left:70px'><a href=" +
             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 OpenSign™. For any queries regarding this email, please contact the sender " +
+            "> <button style='padding: 12px 12px 12px 12px;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;margin-top:30px'>Sign here</button></a> </div> <div style='display: flex; justify-content: center;margin-top: 10px;'> </div></div></div><div><p> This is an automated email from OpenSign™. 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 OpenSign™   <a href= " +
             openSignUrl +
@@ -1113,11 +1116,40 @@ function PlaceHolderSign() {
               </ModalUi>
 
               {/* <ModalComponent isShow={isAlreadyPlace} type={"alreadyPlace"} /> */}
-              <ModalComponent
-                isShow={isShowEmail}
-                type={"signersAlert"}
-                setIsShowEmail={setIsShowEmail}
-              />
+              <ModalUi
+                headerColor={"#dc3545"}
+                isOpen={isShowEmail}
+                title={"signersAlert"}
+                handleClose={() => {
+                  setIsShowEmail(false);
+                }}
+              >
+                <div style={{ height: "100%", padding: 20 }}>
+                  <p>Please select signer for add placeholder!</p>
+
+                  <div
+                    style={{
+                      height: "1px",
+                      backgroundColor: "#9f9f9f",
+                      width: "100%",
+                      marginTop: "15px",
+                      marginBottom: "15px"
+                    }}
+                  ></div>
+                  <button
+                    onClick={() => {
+                      setIsShowEmail(false);
+                    }}
+                    style={{
+                      color: "black"
+                    }}
+                    type="button"
+                    className="finishBtn"
+                  >
+                    Ok
+                  </button>
+                </div>
+              </ModalUi>
               <PlaceholderCopy
                 isPageCopy={isPageCopy}
                 setIsPageCopy={setIsPageCopy}
diff --git a/microfrontends/SignDocuments/src/css/signature.css b/microfrontends/SignDocuments/src/css/signature.css
index 53298e180..d0504407f 100644
--- a/microfrontends/SignDocuments/src/css/signature.css
+++ b/microfrontends/SignDocuments/src/css/signature.css
@@ -2,6 +2,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Delicious+Handrawn&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap');
+
 .signatureCanvas {
   border: 2px solid #888;
   background-color: rgb(255, 255, 255);
@@ -185,6 +186,7 @@
   z-index: 2;
   background: white;
 }
+
 .signCopy {
   position: absolute;
   right: 12px;
@@ -204,16 +206,19 @@
   z-index: 2;
   background: white;
 }
+
 .ScrollbarsCustom-Track {
   width: 4px !important;
 }
+
 .signYourselfBlock {
   padding: 0px;
- display: flex !important;
+  display: flex !important;
   text-align: center !important;
   justify-content: center !important;
   align-items: center !important;
 }
+
 .finishBtn {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
   padding: 3px 30px;
@@ -276,6 +281,14 @@
   margin-left: 10px;
 }
 
+.backBtn {
+  background-color: white;
+}
+
+.backBtn:hover {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
+}
+
 .defaultBtn {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
   padding: 3px 26px;
@@ -285,14 +298,7 @@
   border: 1px solid gray;
   border-radius: 2px;
   margin-left: 10px;
-}
-
-.backBtn {
-  background-color: white;
-}
-
-.backBtn:hover {
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
+  border: "none";
 }
 
 .defaultBtn:focus {
@@ -443,7 +449,7 @@
   width: 180px;
   background-color: white;
   height: 100%;
- 
+
 }
 
 .modalBody {
@@ -678,9 +684,11 @@ option {
 .dropDownStyle {
   width: auto;
 }
-.autoSignScroll{
+
+.autoSignScroll {
   overflow-y: auto;
 }
+
 .autoSignScroll::-webkit-scrollbar {
   display: none;
 }
@@ -797,7 +805,8 @@ option {
   .mobileHead {
     display: flex;
   }
-  .signatureText{
+
+  .signatureText {
     margin-right: 5px;
     font-size: 12px;
   }
@@ -825,6 +834,7 @@ option {
   .mobileHead {
     display: flex;
   }
+
   .signTab {
 
     font-weight: 500 !important;