diff --git a/apps/OpenSign/src/components/fields/CreateFolder.js b/apps/OpenSign/src/components/fields/CreateFolder.js
index 9b6f4beec..2aa0c2432 100644
--- a/apps/OpenSign/src/components/fields/CreateFolder.js
+++ b/apps/OpenSign/src/components/fields/CreateFolder.js
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from "react";
 import Parse from "parse";
-import { templateCls } from "../../constant/const";
 import Alert from "../../primitives/Alert";
 
 const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
@@ -45,7 +44,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
     event.preventDefault();
     if (name) {
       const currentUser = Parse.User.current();
-      const exsitQuery = new Parse.Query(templateCls);
+      const exsitQuery = new Parse.Query(folderCls);
       exsitQuery.equalTo("Name", name);
       exsitQuery.equalTo("Type", "Folder");
       if (parentFolderId) {
@@ -59,7 +58,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
           setIsAlert(false);
         }, 1000);
       } else {
-        const template = new Parse.Object(templateCls);
+        const template = new Parse.Object(folderCls);
         template.set("Name", name);
         template.set("Type", "Folder");
 
diff --git a/apps/OpenSign/src/components/fields/SelectFolder.js b/apps/OpenSign/src/components/fields/SelectFolder.js
index 434bbed7d..878bb269b 100644
--- a/apps/OpenSign/src/components/fields/SelectFolder.js
+++ b/apps/OpenSign/src/components/fields/SelectFolder.js
@@ -1,9 +1,8 @@
 import React, { useEffect, useState } from "react";
 import Parse from "parse";
 import CreateFolder from "./CreateFolder";
-import { templateCls } from "../../constant/const";
 
-const SelectFolder = ({ required, onSuccess }) => {
+const SelectFolder = ({ required, onSuccess, folderCls }) => {
   const [isOpen, SetIsOpen] = useState(false);
   const [clickFolder, setClickFolder] = useState("");
   const [selectFolder, setSelectedFolder] = useState({});
@@ -24,7 +23,7 @@ const SelectFolder = ({ required, onSuccess }) => {
   const fetchFolder = async (folderPtr) => {
     setIsLoader(true);
     try {
-      const fetchFolder = new Parse.Query(templateCls);
+      const fetchFolder = new Parse.Query(folderCls);
       if (folderPtr) {
         fetchFolder.equalTo("Folder", folderPtr);
         fetchFolder.equalTo("Type", "Folder");
@@ -55,7 +54,7 @@ const SelectFolder = ({ required, onSuccess }) => {
         setTabList((tabs) => [...tabs, item]);
         const folderPtr = {
           __type: "Pointer",
-          className: templateCls,
+          className: folderCls,
           objectId: item.objectId
         };
         fetchFolder(folderPtr);
@@ -64,7 +63,7 @@ const SelectFolder = ({ required, onSuccess }) => {
       setTabList((tabs) => [...tabs, item]);
       const folderPtr = {
         __type: "Pointer",
-        className: templateCls,
+        className: folderCls,
         objectId: item.objectId
       };
 
@@ -107,7 +106,7 @@ const SelectFolder = ({ required, onSuccess }) => {
         let _len = list.length - 1;
         folderPtr = {
           __type: "Pointer",
-          className: templateCls,
+          className: folderCls,
           objectId: list[_len].objectId
         };
         setTabList(list);
@@ -128,7 +127,7 @@ const SelectFolder = ({ required, onSuccess }) => {
     if (clickFolder && clickFolder.ObjectId) {
       fetchFolder({
         __type: "Pointer",
-        className: templateCls,
+        className: folderCls,
         objectId: clickFolder.ObjectId
       });
     } else {
@@ -230,7 +229,7 @@ const SelectFolder = ({ required, onSuccess }) => {
               {isAdd && (
                 <CreateFolder
                   parentFolderId={clickFolder && clickFolder.ObjectId}
-                  folderCls={templateCls}
+                  folderCls={folderCls}
                   onSuccess={handleAddFolder}
                 />
               )}
diff --git a/apps/OpenSign/src/constant/const.js b/apps/OpenSign/src/constant/const.js
index 2e5e40948..4f2ea585b 100644
--- a/apps/OpenSign/src/constant/const.js
+++ b/apps/OpenSign/src/constant/const.js
@@ -1,2 +1,2 @@
-export const contactCls = "contracts_Contactbook"
-export const templateCls = "contracts_Template"
+export const contactCls = "contracts_Contactbook";
+export const templateCls = "contracts_Template";
diff --git a/apps/OpenSign/src/json/ReportJson.js b/apps/OpenSign/src/json/ReportJson.js
index b538cd34f..d3d6148ba 100644
--- a/apps/OpenSign/src/json/ReportJson.js
+++ b/apps/OpenSign/src/json/ReportJson.js
@@ -163,6 +163,20 @@ export default function reportJson(id) {
           }
         ]
       };
+    // template report
+    case "23jk45slhj":
+      return {
+        reportName: "Templates",
+        heading: contactbook,
+        actions: [
+          {
+            btnLabel: "",
+            btnColor: "#f55a42",
+            textColor: "white",
+            btnIcon: "fa-solid fa-trash"
+          }
+        ]
+      };
     default:
       return null;
   }
diff --git a/apps/OpenSign/src/primitives/TemplateForm.js b/apps/OpenSign/src/primitives/TemplateForm.js
index 66c431bbb..fe433af24 100644
--- a/apps/OpenSign/src/primitives/TemplateForm.js
+++ b/apps/OpenSign/src/primitives/TemplateForm.js
@@ -6,7 +6,11 @@ import Alert from "./Alert";
 import SelectFolder from "../components/fields/SelectFolder";
 import SignersInput from "../components/fields/SignersInput";
 import Title from "../components/Title";
+import { useNavigate } from "react-router-dom";
+import { templateCls } from '../constant/const'
+ 
 const TemplateForm = () => {
+  const navigate = useNavigate()
   const [signers, setSigners] = useState([]);
   const [folder, setFolder] = useState({ ObjectId: "", Name: "" });
   const [formData, setFormData] = useState({
@@ -126,7 +130,7 @@ const TemplateForm = () => {
     e.preventDefault();
     try {
       const currentUser = Parse.User.current();
-      const template = new Parse.Object("contracts_Template");
+      const template = new Parse.Object(templateCls);
       Object.entries(formData).forEach((item) =>
         template.set(item[0], item[1])
       );
@@ -135,13 +139,20 @@ const TemplateForm = () => {
       if (folder && folder.ObjectId) {
         template.set("Folder", {
           __type: "Pointer",
-          className: "contracts_Template",
+          className: templateCls,
           objectId: folder.ObjectId
         });
       }
       if (signers && signers.length > 0) {
         template.set("Signers", signers);
       }
+      const ExtCls = JSON.parse(localStorage.getItem("Extand_Class"));
+      template.set("ExtUserPtr", {
+        __type: "Pointer",
+        className: "contracts_Users",
+        objectId: ExtCls[0].objectId
+      });
+
       const res = await template.save();
       if (res) {
         setIsAlert(true);
@@ -157,6 +168,7 @@ const TemplateForm = () => {
         });
         setFileUpload([]);
         setpercentage(0);
+        navigate('/asmf/remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/template/' +res.id)
       }
     } catch (err) {
       console.log("err ", err);
@@ -281,7 +293,7 @@ const TemplateForm = () => {
           />
         </div>
         <SignersInput onChange={handleSigners} />
-        <SelectFolder onSuccess={handleFolder} />
+        <SelectFolder onSuccess={handleFolder} folderCls={templateCls}/>
         <div className="flex items-center mt-3 gap-2 text-white">
           <button
             className="px-2 py-2 uppercase rounded shadow-md bg-sky-300 text-xs font-semibold"
diff --git a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js
new file mode 100644
index 000000000..3cbd0f15a
--- /dev/null
+++ b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js
@@ -0,0 +1,1146 @@
+import React, { useEffect, useState, useRef } from "react";
+import RenderAllPdfPage from "./component/renderAllPdfPage";
+import { useParams, useNavigate } from "react-router-dom";
+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";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { useDrag, useDrop } from "react-dnd";
+import FieldsComponent from "./component/fieldsComponent";
+import Tour from "reactour";
+import Loader from "./component/loader";
+import HandleError from "./component/HandleError";
+import Nodata from "./component/Nodata";
+import SignerListPlace from "./component/signerListPlace";
+import Header from "./component/header";
+import {
+  pdfNewWidthFun,
+  contractUsers,
+  getHostUrl,
+  randomId,
+  addZIndex
+} from "../utils/Utils";
+import RenderPdf from "./component/renderPdf";
+import ModalComponent from "./component/modalComponent";
+const TemplatePlaceholder = () => {
+  const navigate = useNavigate();
+  const { templateId } = useParams();
+  const [pdfDetails, setPdfDetails] = useState([]);
+  const [isMailSend, setIsMailSend] = useState(false);
+  const [allPages, setAllPages] = useState(null);
+  const numPages = 1;
+  const [pageNumber, setPageNumber] = useState(1);
+  const [signBtnPosition, setSignBtnPosition] = useState([]);
+  const [xySignature, setXYSignature] = useState({});
+  const [dragKey, setDragKey] = useState();
+  const [signersdata, setSignersData] = useState([]);
+  const [signerObjId, setSignerObjId] = useState();
+  const [signerPos, setSignerPos] = useState([]);
+  const [isSelectListId, setIsSelectId] = useState();
+  const [isSendAlert, setIsSendAlert] = useState(false);
+  const [isCreateDocModal, setIsCreateDocModal] = useState(false);
+  const [isLoading, setIsLoading] = useState({
+    isLoad: true,
+    message: "This might take some time"
+  });
+  const [handleError, setHandleError] = useState();
+  const [currentEmail, setCurrentEmail] = useState();
+  const [pdfNewWidth, setPdfNewWidth] = useState();
+  const [placeholderTour, setPlaceholderTour] = useState(true);
+  const [checkTourStatus, setCheckTourStatus] = useState(false);
+  const [tourStatus, setTourStatus] = useState([]);
+  const [signerUserId, setSignerUserId] = useState();
+  const [noData, setNoData] = useState(false);
+  const [pdfOriginalWidth, setPdfOriginalWidth] = useState();
+  const [pdfOriginalHeight, setPdfOriginalHeight] = useState();
+  const [contractName, setContractName] = useState("");
+  const [containerWH, setContainerWH] = useState();
+  const signRef = useRef(null);
+  const dragRef = useRef(null);
+  const divRef = useRef(null);
+  const [isShowEmail, setIsShowEmail] = useState(false);
+  const [selectedEmail, setSelectedEmail] = useState(false);
+  const [isResize, setIsResize] = useState(false);
+  const [isSigners, setIsSigners] = useState(false);
+  const [zIndex, setZIndex] = useState(1);
+  const [pdfLoadFail, setPdfLoadFail] = useState({
+    status: false,
+    type: "load"
+  });
+  const color = [
+    "#93a3db",
+    "#e6c3db",
+    "#c0e3bc",
+    "#bce3db",
+    "#b8ccdb",
+    "#ceb8db",
+    "#ffccff",
+    "#99ffcc",
+    "#cc99ff",
+    "#ffcc99",
+    "#66ccff",
+    "#ffffcc"
+  ];
+  const isMobile = window.innerWidth < 767;
+  const [{ isOver }, drop] = useDrop({
+    accept: "BOX",
+    drop: (item, monitor) => addPositionOfSignature(item, monitor),
+    collect: (monitor) => ({
+      isOver: !!monitor.isOver()
+    })
+  });
+  const [{ isDragSign }, dragSignature] = useDrag({
+    type: "BOX",
+
+    item: {
+      type: "BOX",
+      id: 1,
+      text: "drag me"
+    },
+    collect: (monitor) => ({
+      isDragSign: !!monitor.isDragging()
+    })
+  });
+  const [{ isDragStamp }, dragStamp] = useDrag({
+    type: "BOX",
+
+    item: {
+      type: "BOX",
+      id: 2,
+      text: "drag me"
+    },
+    collect: (monitor) => ({
+      isDragStamp: !!monitor.isDragging()
+    })
+  });
+
+  const [{ isDragSignatureSS }, dragSignatureSS] = useDrag({
+    type: "BOX",
+
+    item: {
+      type: "BOX",
+      id: 3,
+      text: "drag me"
+    },
+    collect: (monitor) => ({
+      isDragSignatureSS: !!monitor.isDragging()
+    })
+  });
+
+  const [{ isDragStampSS }, dragStampSS] = useDrag({
+    type: "BOX",
+
+    item: {
+      type: "BOX",
+      id: 4,
+      text: "drag me"
+    },
+    collect: (monitor) => ({
+      isDragStampSS: !!monitor.isDragging()
+    })
+  });
+
+  const [uniqueId, setUniqueId] = useState("");
+  const [isModalRole, setIsModalRole] = useState(false);
+  const [roleName, setRoleName] = useState("");
+  const senderUser =
+    localStorage.getItem(
+      `Parse/${localStorage.getItem("parseAppId")}/currentUser`
+    ) &&
+    localStorage.getItem(
+      `Parse/${localStorage.getItem("parseAppId")}/currentUser`
+    );
+  const jsonSender = JSON.parse(senderUser);
+
+  useEffect(() => {
+    fetchTemplate();
+  }, []);
+
+  useEffect(() => {
+    if (divRef.current) {
+      const pdfWidth = pdfNewWidthFun(divRef);
+      setPdfNewWidth(pdfWidth);
+      setContainerWH({
+        width: divRef.current.offsetWidth,
+        height: divRef.current.offsetHeight
+      });
+    }
+  }, [divRef.current]);
+  const fetchTemplate = async () => {
+    const templateDeatils = await axios.get(
+      `${localStorage.getItem("baseUrl")}classes/contracts_Template/` +
+        templateId,
+      {
+        headers: {
+          "Content-Type": "application/json",
+          "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
+          "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+        },
+        params: {
+          include: "ExtUserPtr,Signers,CreatedBy"
+        }
+      }
+    );
+
+    const documentData =
+      templateDeatils.data && templateDeatils.data
+        ? [templateDeatils.data]
+        : [];
+    // console.log("documentData ", documentData)
+    if (documentData && documentData.length > 0) {
+      setPdfDetails(documentData);
+      const currEmail = documentData[0].ExtUserPtr.Email;
+      if (documentData[0].Signers && documentData[0].Signers.length > 0) {
+        const updateSigners = documentData[0].Signers.map((x, index) => ({
+          ...x,
+          Id: randomId(),
+          Role: "User " + (index + 1)
+        }));
+        console.log("documentData[0] ", documentData[0]);
+        // console.log("updateSigners ", updateSigners);
+        // setSignersData(updateSigners);
+        setIsSigners(true);
+        setUniqueId(updateSigners[0].Id);
+        setSignerObjId(documentData[0].Signers[0].objectId);
+        setContractName(documentData[0].Signers[0].className);
+        setIsSelectId(0);
+        if (
+          documentData[0].Placeholders &&
+          documentData[0].Placeholders.length > 0
+        ) {
+          setSignerPos(documentData[0].Placeholders);
+
+          const arr = documentData[0].Placeholders.filter(
+            (x) => !x.signerObjId
+          );
+          console.log("arr ", arr);
+          let updateArr = [...updateSigners];
+          arr.forEach((x) => {
+            const obj = {
+              Role: x.Role,
+              Id: randomId()
+            };
+            updateArr.push(obj);
+          });
+          console.log("res ", updateArr);
+          setSignersData(updateArr);
+        } else {
+          setSignersData(updateSigners);
+        }
+      } else {
+        setRoleName("User 1");
+        if (
+          documentData[0].Placeholders &&
+          documentData[0].Placeholders.length > 0
+        ) {
+          const arr = documentData[0].Placeholders?.filter(
+            (x) => !x.signerObjId
+          );
+          console.log("arr ", arr);
+          let updateArr = [];
+          arr.forEach((x) => {
+            const obj = {
+              Role: x.Role,
+              Id: randomId()
+            };
+            updateArr.push(obj);
+          });
+          setSignerPos(documentData[0].Placeholders);
+          setSignersData(updateArr);
+          setIsSelectId(0);
+        }
+      }
+    } else if (
+      documentData === "Error: Something went wrong!" ||
+      (documentData.result && documentData.result.error)
+    ) {
+      const loadObj = {
+        isLoad: false
+      };
+      setHandleError("Error: Something went wrong!");
+      setIsLoading(loadObj);
+    } else {
+      setNoData(true);
+
+      const loadObj = {
+        isLoad: false
+      };
+      setIsLoading(loadObj);
+    }
+    const res = await contractUsers(jsonSender.email);
+    if (res[0] && res.length) {
+      console.log("res[0] ", res);
+      setSignerUserId(res[0].objectId);
+      setCurrentEmail(res[0].Email);
+      const tourstatus = res[0].TourStatus && res[0].TourStatus;
+      if (tourstatus && tourstatus.length > 0) {
+        setTourStatus(tourstatus);
+        const checkTourRecipients = tourstatus.filter(
+          (data) => data.placeholder
+        );
+        if (checkTourRecipients && checkTourRecipients.length > 0) {
+          setCheckTourStatus(checkTourRecipients[0].placeholder);
+        }
+      }
+      const loadObj = {
+        isLoad: false
+      };
+      setIsLoading(loadObj);
+    } else if (res === "Error: Something went wrong!") {
+      const loadObj = {
+        isLoad: false
+      };
+      setHandleError("Error: Something went wrong!");
+      setIsLoading(loadObj);
+    } else if (res.length === 0) {
+      setNoData(true);
+
+      const loadObj = {
+        isLoad: false
+      };
+      setIsLoading(loadObj);
+    }
+  };
+
+  //function for setting position after drop signature button over pdf
+  const addPositionOfSignature = (item, monitor) => {
+    if (isMobile) {
+      if (selectedEmail) {
+        getSignerPos(item, monitor);
+      } else {
+        setIsShowEmail(true);
+      }
+    } else {
+      getSignerPos(item, monitor);
+    }
+  };
+
+  const getSignerPos = (item, monitor) => {
+    console.log("item ", item);
+    const posZIndex = zIndex + 1;
+    setZIndex(posZIndex);
+    const newWidth = containerWH.width;
+    const scale = pdfOriginalWidth / newWidth;
+    const key = randomId();
+    // let filterSignerPos = signerPos.filter(
+    //   (data) => data.signerObjId === signerObjId
+    // );
+    let filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
+    let dropData = [];
+    let xyPosArr = [];
+    let xyPos = {};
+    if (item === "onclick") {
+      const dropObj = {
+        xPosition: window.innerWidth / 2 - 100,
+        yPosition: window.innerHeight / 2 - 60,
+        isStamp: monitor,
+        key: key,
+        isDrag: false,
+        scale: scale,
+        isMobile: isMobile,
+        yBottom: window.innerHeight / 2 - 60,
+        zIndex: posZIndex
+      };
+      dropData.push(dropObj);
+      xyPos = {
+        pageNumber: pageNumber,
+        pos: dropData
+      };
+
+      xyPosArr.push(xyPos);
+    } else if (item.type === "BOX") {
+      const offset = monitor.getClientOffset();
+      //adding and updating drop position in array when user drop signature button in div
+      const containerRect = document
+        .getElementById("container")
+        .getBoundingClientRect();
+      const x = offset.x - containerRect.left;
+      const y = offset.y - containerRect.top;
+      const ybottom = containerRect.bottom - offset.y;
+
+      const dropObj = {
+        xPosition: signBtnPosition[0] ? x - signBtnPosition[0].xPos : x,
+        yPosition: signBtnPosition[0] ? y - signBtnPosition[0].yPos : y,
+        isStamp: isDragStamp || isDragStampSS ? true : false,
+        key: key,
+        isDrag: false,
+        firstXPos: signBtnPosition[0] && signBtnPosition[0].xPos,
+        firstYPos: signBtnPosition[0] && signBtnPosition[0].yPos,
+        yBottom: ybottom,
+        scale: scale,
+        isMobile: isMobile,
+        zIndex: posZIndex
+      };
+
+      dropData.push(dropObj);
+      xyPos = {
+        pageNumber: pageNumber,
+        pos: dropData
+      };
+
+      xyPosArr.push(xyPos);
+    }
+
+    //add signers objId first inseretion
+    if (filterSignerPos.length > 0) {
+      // const colorIndex = signerPos
+      //   .map((e) => e.signerObjId)
+      //   .indexOf(signerObjId);
+
+      const colorIndex = signerPos.map((e) => e.Id).indexOf(uniqueId);
+
+      const getPlaceHolder = filterSignerPos[0].placeHolder;
+      const updatePlace = getPlaceHolder.filter(
+        (data) => data.pageNumber !== pageNumber
+      );
+      const getPageNumer = getPlaceHolder.filter(
+        (data) => data.pageNumber === pageNumber
+      );
+
+      //add entry of position for same signer on multiple page
+      if (getPageNumer.length > 0) {
+        const getPos = getPageNumer[0].pos;
+        const newSignPos = getPos.concat(dropData);
+        let xyPos = {
+          pageNumber: pageNumber,
+          pos: newSignPos
+        };
+        updatePlace.push(xyPos);
+        let placeHolderPos;
+        if (contractName) {
+          placeHolderPos = {
+            blockColor: color[isSelectListId],
+            signerObjId: signerObjId,
+            placeHolder: updatePlace,
+            signerPtr: {
+              __type: "Pointer",
+              className: `${contractName}`,
+              objectId: signerObjId
+            },
+            Role: roleName,
+            Id: uniqueId
+          };
+        } else {
+          placeHolderPos = {
+            blockColor: color[isSelectListId],
+            signerObjId: "",
+            placeHolder: updatePlace,
+            signerPtr: {},
+            Role: roleName,
+            Id: uniqueId
+          };
+        }
+        // signerPos.splice(colorIndex, 1, placeHolderPos);
+        const newArry = [placeHolderPos];
+        const newArray = [
+          ...signerPos.slice(0, colorIndex),
+          ...newArry,
+          ...signerPos.slice(colorIndex + 1)
+        ];
+        setSignerPos(newArray);
+      } else {
+        const newSignPoss = getPlaceHolder.concat(xyPosArr[0]);
+        let placeHolderPos;
+        if (contractName) {
+          placeHolderPos = {
+            blockColor: color[isSelectListId],
+            signerObjId: signerObjId,
+            placeHolder: newSignPoss,
+            signerPtr: {
+              __type: "Pointer",
+              className: `${contractName}`,
+              objectId: signerObjId
+            },
+            Role: roleName,
+            Id: uniqueId
+          };
+        } else {
+          placeHolderPos = {
+            blockColor: color[isSelectListId],
+            signerObjId: "",
+            placeHolder: newSignPoss,
+            signerPtr: {},
+            Role: roleName,
+            Id: uniqueId
+          };
+        }
+
+        // signerPos.splice(colorIndex, 1, placeHolderPos);
+        const newArry = [placeHolderPos];
+        const newArray = [
+          ...signerPos.slice(0, colorIndex),
+          ...newArry,
+          ...signerPos.slice(colorIndex + 1)
+        ];
+
+        setSignerPos(newArray);
+      }
+    } else {
+      let placeHolderPos;
+      if (contractName) {
+        placeHolderPos = {
+          signerPtr: {
+            __type: "Pointer",
+            className: `${contractName}`,
+            objectId: signerObjId
+          },
+          signerObjId: signerObjId,
+          blockColor: color[isSelectListId],
+          placeHolder: xyPosArr,
+          Role: roleName,
+          Id: uniqueId
+        };
+      } else {
+        placeHolderPos = {
+          signerPtr: {},
+          signerObjId: "",
+          blockColor: color[isSelectListId],
+          placeHolder: xyPosArr,
+          Role: roleName,
+          Id: uniqueId
+        };
+      }
+
+      setSignerPos((prev) => [...prev, placeHolderPos]);
+    }
+    setIsMailSend(false);
+  };
+  //function for get pdf page details
+  const pageDetails = async (pdf) => {
+    const load = {
+      status: true
+    };
+    setPdfLoadFail(load);
+    pdf.getPage(1).then((pdfPage) => {
+      const pageWidth = pdfPage.view[2];
+      const pageHeight = pdfPage.view[3];
+      setPdfOriginalWidth(pageWidth);
+      setPdfOriginalHeight(pageHeight);
+    });
+  };
+  //function for save x and y position and show signature  tab on that position
+  const handleTabDrag = (key) => {
+    setDragKey(key);
+  };
+
+  //function for set and update x and y postion after drag and drop signature tab
+  const handleStop = (event, dragElement, signerId, key) => {
+    if (!isResize) {
+      const dataNewPlace = addZIndex(signerPos, key, setZIndex);
+      let updateSignPos = [...signerPos];
+      updateSignPos.splice(0, updateSignPos.length, ...dataNewPlace);
+      // signerPos.splice(0, signerPos.length, ...dataNewPlace);
+      const containerRect = document
+        .getElementById("container")
+        .getBoundingClientRect();
+      const signId = signerId; //? signerId : signerObjId;
+      const keyValue = key ? key : dragKey;
+      const ybottom = containerRect.height - dragElement.y;
+
+      if (keyValue >= 0) {
+        const filterSignerPos = updateSignPos.filter(
+          (data) => data.Id === signId
+        );
+
+        if (filterSignerPos.length > 0) {
+          const getPlaceHolder = filterSignerPos[0].placeHolder;
+
+          const getPageNumer = getPlaceHolder.filter(
+            (data) => data.pageNumber === pageNumber
+          );
+
+          if (getPageNumer.length > 0) {
+            const getXYdata = getPageNumer[0].pos;
+
+            const getPosData = getXYdata;
+            const addSignPos = getPosData.map((url, ind) => {
+              if (url.key === keyValue) {
+                return {
+                  ...url,
+                  xPosition: dragElement.x,
+                  yPosition: dragElement.y,
+                  isDrag: true,
+                  yBottom: ybottom
+                };
+              }
+              return url;
+            });
+
+            const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
+              if (obj.pageNumber === pageNumber) {
+                return { ...obj, pos: addSignPos };
+              }
+              return obj;
+            });
+            const newUpdateSigner = updateSignPos.map((obj, ind) => {
+              if (obj.Id === signId) {
+                return { ...obj, placeHolder: newUpdateSignPos };
+              }
+              return obj;
+            });
+
+            setSignerPos(newUpdateSigner);
+          }
+        }
+      }
+    }
+    setIsMailSend(false);
+  };
+
+  //function for delete signature block
+  const handleDeleteSign = (key, Id) => {
+    const updateData = [];
+    // const filterSignerPos = signerPos.filter(
+    //   (data) => data.signerObjId === signerId
+    // );
+
+    const filterSignerPos = signerPos.filter((data) => data.Id === Id);
+
+    if (filterSignerPos.length > 0) {
+      const getPlaceHolder = filterSignerPos[0].placeHolder;
+
+      const getPageNumer = getPlaceHolder.filter(
+        (data) => data.pageNumber === pageNumber
+      );
+
+      if (getPageNumer.length > 0) {
+        const getXYdata = getPageNumer[0].pos.filter(
+          (data, ind) => data.key !== key
+        );
+
+        if (getXYdata.length > 0) {
+          updateData.push(getXYdata);
+          const newUpdatePos = getPlaceHolder.map((obj, ind) => {
+            if (obj.pageNumber === pageNumber) {
+              return { ...obj, pos: updateData[0] };
+            }
+            return obj;
+          });
+
+          const newUpdateSigner = signerPos.map((obj, ind) => {
+            if (obj.Id === Id) {
+              return { ...obj, placeHolder: newUpdatePos };
+            }
+            return obj;
+          });
+
+          setSignerPos(newUpdateSigner);
+        } else {
+          const updateFilter = signerPos.filter((data) => data.Id !== Id);
+          const getRemainPage = filterSignerPos[0].placeHolder.filter(
+            (data) => data.pageNumber !== pageNumber
+          );
+
+          if (getRemainPage && getRemainPage.length > 0) {
+            const newUpdatePos = filterSignerPos.map((obj, ind) => {
+              if (obj.Id === Id) {
+                return { ...obj, placeHolder: getRemainPage };
+              }
+              return obj;
+            });
+            let signerupdate = [];
+            signerupdate = signerPos.filter((data) => data.Id !== Id);
+            signerupdate.push(newUpdatePos[0]);
+
+            setSignerPos(signerupdate);
+          } else {
+            setSignerPos(updateFilter);
+          }
+        }
+      }
+    }
+  };
+
+  //function for change page
+  function changePage(offset) {
+    setSignBtnPosition([]);
+    setPageNumber((prevPageNumber) => prevPageNumber + offset);
+  }
+
+  //function for capture position on hover signature button
+  const handleDivClick = (e) => {
+    const divRect = e.currentTarget.getBoundingClientRect();
+    const mouseX = e.clientX - divRect.left;
+    const mouseY = e.clientY - divRect.top;
+
+    const xyPosition = {
+      xPos: mouseX,
+      yPos: mouseY
+    };
+
+    setXYSignature(xyPosition);
+  };
+
+  //function for capture position of x and y on hover signature button last position
+  const handleMouseLeave = (e) => {
+    setSignBtnPosition([xySignature]);
+  };
+
+  const alertSendEmail = async () => {
+    if (signerPos.length !== signersdata.length) {
+      setIsSendAlert(true);
+    } else {
+      handleSaveTemplate();
+    }
+  };
+  const handleSaveTemplate = async () => {
+    const loadObj = {
+      isLoad: true,
+      message: "This might take some time"
+    };
+    setIsLoading(loadObj);
+    setIsSendAlert(false);
+    console.log("signerPos ", signerPos);
+    try {
+      const data = {
+        Placeholders: signerPos,
+        SignedUrl: pdfDetails[0].URL
+      };
+
+      await axios
+        .put(
+          `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
+            "_appName"
+          )}_Template/${templateId}`,
+          data,
+          {
+            headers: {
+              "Content-Type": "application/json",
+              "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
+              "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+            }
+          }
+        )
+        .then((result) => {
+          setIsCreateDocModal(true);
+          setIsMailSend(true);
+          const loadObj = {
+            isLoad: false
+          };
+          setIsLoading(loadObj);
+        })
+        .catch((err) => {
+          console.log("axois err ", err);
+        });
+    } catch (e) {
+      console.log("error", e);
+    }
+  };
+  //here you can add your messages in content and selector is key of particular steps
+
+  const tourConfig = [
+    {
+      selector: '[data-tut="reactourFirst"]',
+      content: `Select a recipient from this list to add a place-holder where he is supposed to sign.The placeholder will appear in the same colour as the recipient name once you drop it on the document.`,
+      position: "top",
+
+      style: { fontSize: "13px" }
+    },
+    {
+      selector: '[data-tut="reactourSecond"]',
+      content: `Drag the signature or stamp placeholder onto the PDF to choose your desired signing location.`,
+      position: "top",
+      style: { fontSize: "13px" }
+    },
+    {
+      selector: '[data-tut="reactourThird"]',
+      content: `Drag the placeholder for a recipient anywhere on the document.Remember, it will appear in the same colour as the name of the recipient for easy reference.`,
+      position: "top",
+      style: { fontSize: "13px" }
+    },
+    {
+      selector: '[data-tut="reactourFour"]',
+      content: `Clicking "Send" button will share the document with all the recipients.It will also send out emails to everyone on the recipients list.`,
+      position: "top",
+      style: { fontSize: "13px" }
+    }
+  ];
+
+  //function for update TourStatus
+  const closeTour = async () => {
+    setPlaceholderTour(false);
+    const extUserClass = localStorage.getItem("extended_class");
+    let updatedTourStatus = [];
+    if (tourStatus.length > 0) {
+      updatedTourStatus = [...tourStatus];
+      const placeholderIndex = tourStatus.findIndex(
+        (obj) => obj["placeholder"] === false || obj["placeholder"] === true
+      );
+      if (placeholderIndex !== -1) {
+        updatedTourStatus[placeholderIndex] = { placeholder: true };
+      } else {
+        updatedTourStatus.push({ placeholder: true });
+      }
+    } else {
+      updatedTourStatus = [{ placeholder: true }];
+    }
+    await axios
+      .put(
+        `${localStorage.getItem(
+          "baseUrl"
+        )}classes/${extUserClass}/${signerUserId}`,
+        {
+          TourStatus: updatedTourStatus
+        },
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
+            sessionToken: localStorage.getItem("accesstoken")
+          }
+        }
+      )
+      .then((Listdata) => {
+        // const json = Listdata.data;
+        // const res = json.results;
+      })
+      .catch((err) => {
+        console.log("axois err ", err);
+      });
+  };
+  const handleCreateDocModal = () => {
+    const hostUrl = getHostUrl();
+    // handle create document
+    navigate(`${hostUrl}placeHolderSign/${templateId}`);
+  };
+
+  const handleAddSigner = () => {
+    setIsModalRole(true);
+    setRoleName("");
+  };
+  const handleAddRole = (e) => {
+    e.preventDefault();
+    console.log("signerArr", signersdata.length);
+    const count = signersdata.length > 0 ? signersdata.length + 1 : 1;
+    const Id = randomId();
+    const obj = {
+      Role: roleName || "User " + count,
+      Id: Id
+    };
+    setSignersData((prevArr) => [...prevArr, obj]);
+    // const newWidth = containerWH.width;
+    // const scale = pdfOriginalWidth / newWidth;
+    // const posZIndex = zIndex + 1;
+    // setZIndex(posZIndex);
+    // const key = randomId();
+    // let dropData = [];
+    // let xyPosArr = [];
+    // console.log("width ", pdfOriginalWidth);
+    // console.log("height ", pdfOriginalHeight);
+    // console.log("width ", pdfOriginalWidth / 2);
+    // console.log("height ", pdfOriginalHeight / 2);
+    // const dropObj = {
+    //   xPosition: pdfOriginalWidth / 2, // 213.453125, // newWidth / 2 ,
+    //   yPosition: pdfOriginalHeight / 2, //513.953125,//containerWH.height / 2 ,
+    //   isStamp: false,
+    //   key: key,
+    //   isDrag: false,
+    //   scale: scale,
+    //   isMobile: isMobile,
+    //   yBottom: pdfOriginalHeight / 2, //648.046875 // containerWH.height / 2
+    //   zIndex: posZIndex
+    // };
+    // dropData.push(dropObj);
+    // const xyPos = {
+    //   pageNumber: pageNumber,
+    //   pos: dropData
+    // };
+
+    // xyPosArr.push(xyPos);
+
+    // const placeHolderPos = {
+    //   signerPtr: {},
+    //   signerObjId: "",
+    //   blockColor: color[isSelectListId],
+    //   placeHolder: xyPosArr,
+    //   Role: roleName,
+    //   Id: Id
+    // };
+
+    // console.log("uniqueId ", uniqueId);
+
+    // setSignerPos((prev) => [...prev, placeHolderPos]);
+    setIsModalRole(false);
+    setRoleName("");
+  };
+  return (
+    <div>
+      <DndProvider backend={HTML5Backend}>
+        {isLoading.isLoad ? (
+          <Loader isLoading={isLoading} />
+        ) : handleError ? (
+          <HandleError handleError={handleError} />
+        ) : noData ? (
+          <Nodata />
+        ) : (
+          <div className="signatureContainer" ref={divRef}>
+            {/* this component used for UI interaction and show their functionality */}
+            {!checkTourStatus && (
+              //this tour component used in your html component where you want to put
+              //onRequestClose function to close tour
+              //steps is defined what will be your messages and style also
+              //isOpen is takes boolean value to open
+              <Tour
+                onRequestClose={closeTour}
+                steps={tourConfig}
+                isOpen={placeholderTour}
+                rounded={5}
+                closeWithMask={false}
+              />
+            )}
+            {/* this component used to render all pdf pages in left side */}
+            <RenderAllPdfPage
+              signPdfUrl={pdfDetails[0].URL}
+              allPages={allPages}
+              setAllPages={setAllPages}
+              setPageNumber={setPageNumber}
+              setSignBtnPosition={setSignBtnPosition}
+            />
+
+            {/* pdf render view */}
+            <div
+              style={{
+                marginLeft: !isMobile && pdfOriginalWidth > 500 && "20px",
+                marginRight: !isMobile && pdfOriginalWidth > 500 && "20px"
+              }}
+            >
+              {/* this modal is used show alert set placeholder for all signers before send mail */}
+
+              <Modal show={isSendAlert}>
+                <Modal.Header className="bg-danger">
+                  <span style={{ color: "white" }}>Fields required</span>
+                </Modal.Header>
+
+                {/* signature modal */}
+                <Modal.Body>
+                  <p>Please Add field for all recipients.</p>
+                </Modal.Body>
+
+                <Modal.Footer>
+                  <button
+                    onClick={() => setIsSendAlert(false)}
+                    style={{
+                      color: "black"
+                    }}
+                    type="button"
+                    className="finishBtn"
+                  >
+                    Close
+                  </button>
+                </Modal.Footer>
+              </Modal>
+              {/* this modal is used show send mail  message and after send mail success message */}
+              <Modal show={isCreateDocModal}>
+                {/* signature modal */}
+                <Modal.Body>
+                  <p>Do you want to create document right now ?</p>
+                </Modal.Body>
+                <Modal.Footer>
+                  {currentEmail.length > 0 && (
+                    <>
+                      <button
+                        onClick={() => {
+                          setIsCreateDocModal(false);
+                        }}
+                        style={{
+                          color: "black"
+                        }}
+                        type="button"
+                        className="finishBtn"
+                      >
+                        No
+                      </button>
+
+                      <button
+                        onClick={() => {
+                          handleCreateDocModal();
+                        }}
+                        style={{
+                          background: themeColor(),
+                          color: "white"
+                        }}
+                        type="button"
+                        className="finishBtn"
+                      >
+                        Yes
+                      </button>
+                    </>
+                  )}
+                </Modal.Footer>
+              </Modal>
+              <ModalComponent
+                isShow={isShowEmail}
+                type={"signersAlert"}
+                setIsShowEmail={setIsShowEmail}
+              />
+              {/* pdf header which contain funish back button */}
+              <Header
+                isPlaceholder={true}
+                pageNumber={pageNumber}
+                allPages={allPages}
+                changePage={changePage}
+                pdfDetails={pdfDetails}
+                signerPos={signerPos}
+                signersdata={signersdata}
+                isMailSend={isMailSend}
+                alertSendEmail={alertSendEmail}
+                isShowHeader={true}
+                currentSigner={true}
+                dataTut4="reactourFour"
+              />
+              <div data-tut="reactourThird">
+                {containerWH && (
+                  <RenderPdf
+                    pageNumber={pageNumber}
+                    pdfOriginalWidth={pdfOriginalWidth}
+                    pdfNewWidth={pdfNewWidth}
+                    pdfDetails={pdfDetails}
+                    signerPos={signerPos}
+                    successEmail={false}
+                    numPages={numPages}
+                    pageDetails={pageDetails}
+                    placeholder={true}
+                    drop={drop}
+                    handleDeleteSign={handleDeleteSign}
+                    handleTabDrag={handleTabDrag}
+                    handleStop={handleStop}
+                    setPdfLoadFail={setPdfLoadFail}
+                    pdfLoadFail={pdfLoadFail}
+                    setSignerPos={setSignerPos}
+                    containerWH={containerWH}
+                    setIsResize={setIsResize}
+                    setZIndex={setZIndex}
+                  />
+                )}
+              </div>
+            </div>
+
+            {/* signature button */}
+            {isMobile ? (
+              <div>
+                <FieldsComponent
+                  dataTut="reactourFirst"
+                  dataTut2="reactourSecond"
+                  pdfUrl={isMailSend}
+                  sign={sign}
+                  stamp={stamp}
+                  dragSignature={dragSignature}
+                  signRef={signRef}
+                  handleDivClick={handleDivClick}
+                  handleMouseLeave={handleMouseLeave}
+                  isDragSign={isDragSign}
+                  themeColor={themeColor}
+                  dragStamp={dragStamp}
+                  dragRef={dragRef}
+                  isDragStamp={isDragStamp}
+                  isSignYourself={true}
+                  isDragSignatureSS={isDragSignatureSS}
+                  dragSignatureSS={dragSignatureSS}
+                  dragStampSS={dragStampSS}
+                  addPositionOfSignature={addPositionOfSignature}
+                  signerPos={signerPos}
+                  signersdata={signersdata}
+                  isSelectListId={isSelectListId}
+                  setSignerObjId={setSignerObjId}
+                  setIsSelectId={setIsSelectId}
+                  setContractName={setContractName}
+                  isSigners={isSigners}
+                  setIsShowEmail={setIsShowEmail}
+                  isMailSend={isMailSend}
+                  setSelectedEmail={setSelectedEmail}
+                  selectedEmail={selectedEmail}
+                />
+              </div>
+            ) : (
+              <div>
+                <div className="signerComponent">
+                  <SignerListPlace
+                    signerPos={signerPos}
+                    signersdata={signersdata}
+                    isSelectListId={isSelectListId}
+                    setSignerObjId={setSignerObjId}
+                    setRoleName={setRoleName}
+                    setIsSelectId={setIsSelectId}
+                    setContractName={setContractName}
+                    handleAddSigner={handleAddSigner}
+                    setUniqueId={setUniqueId}
+                  />
+                  <div data-tut="reactourSecond">
+                    <FieldsComponent
+                      pdfUrl={isMailSend}
+                      sign={sign}
+                      stamp={stamp}
+                      dragSignature={dragSignature}
+                      signRef={signRef}
+                      handleDivClick={handleDivClick}
+                      handleMouseLeave={handleMouseLeave}
+                      isDragSign={isDragSign}
+                      themeColor={themeColor}
+                      dragStamp={dragStamp}
+                      dragRef={dragRef}
+                      isDragStamp={isDragStamp}
+                      isSignYourself={false}
+                      addPositionOfSignature={addPositionOfSignature}
+                    />
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </DndProvider>
+      <div>
+        <Modal show={isModalRole}>
+          <Modal.Header className={"bg-info"}>
+            <span style={{ color: "white" }}>Add Role</span>
+          </Modal.Header>
+          <Modal.Body>
+            <form
+              style={{ display: "flex", flexDirection: "column" }}
+              onSubmit={handleAddRole}
+            >
+              <input
+                value={roleName}
+                onChange={(e) => setRoleName(e.target.value)}
+                style={{ borderRadiu: 20 }}
+                placeholder={
+                  signersdata.length > 0
+                    ? "User " + (signersdata.length + 1)
+                    : "User 1"
+                }
+              />
+              <div>
+                <hr />
+                <button
+                  type="submit"
+                  style={{
+                    background: "#00a2b7"
+                  }}
+                  className="finishBtn"
+                >
+                  Add
+                </button>
+                <button
+                  onClick={() => setIsModalRole(false)}
+                  style={{
+                    color: "black"
+                  }}
+                  type="button"
+                  className="finishBtn"
+                >
+                  Close
+                </button>
+              </div>
+            </form>
+          </Modal.Body>
+        </Modal>
+      </div>
+    </div>
+  );
+};
+
+export default TemplatePlaceholder;
diff --git a/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js b/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js
index 71280710f..916e29005 100644
--- a/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js
+++ b/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js
@@ -32,12 +32,12 @@ function FieldsComponent({
   setIsShowEmail,
   isMailSend,
   selectedEmail,
-  setSelectedEmail,
+  setSelectedEmail
 }) {
   const signStyle = pdfUrl ? "disableSign" : "signatureBtn";
 
-  const isMobile = window.innerWidth <767;
-  
+  const isMobile = window.innerWidth < 767;
+
   const SelectItem = React.forwardRef(
     ({ children, className, ...props }, forwardedRef) => {
       return (
@@ -65,7 +65,7 @@ function FieldsComponent({
     "#cc99ff",
     "#ffcc99",
     "#66ccff",
-    "#ffffcc",
+    "#ffffcc"
   ];
 
   return (
@@ -88,7 +88,7 @@ function FieldsComponent({
                   padding: "10px 20px",
                   display: "flex",
                   alignItems: "center",
-                  justifyContent: "center",
+                  justifyContent: "center"
                 }}
               >
                 <span style={{ fontSize: "18px", fontWeight: "500" }}>
@@ -107,30 +107,29 @@ function FieldsComponent({
                   }}
                 >
                   <Select.Trigger
-                    className={selectedEmail ? "selectEmail": "SelectTrigger"}
+                    className={selectedEmail ? "selectEmail" : "SelectTrigger"}
                     style={{
                       background: isSelectListId
                         ? color[isSelectListId % color.length]
-                        : color[0],
+                        : color[0]
                     }}
                     aria-label="Food"
                   >
-                    <Select.Value
-                    
-                    placeholder="Select signer.." />
-                    {!selectedEmail && 
-                    <Select.Icon className="SelectIcon">
-                      <i
-                        style={{
-                          marginTop: "5px",
-                          marginLeft: "5px",
-                          color: "#3b15d1",
-                          fontSize: "20px",
-                        }}
-                        className="fa fa-angle-down"
-                        aria-hidden="true"
-                      ></i>
-                    </Select.Icon>}
+                    <Select.Value placeholder="Select signer.." />
+                    {!selectedEmail && (
+                      <Select.Icon className="SelectIcon">
+                        <i
+                          style={{
+                            marginTop: "5px",
+                            marginLeft: "5px",
+                            color: "#3b15d1",
+                            fontSize: "20px"
+                          }}
+                          className="fa fa-angle-down"
+                          aria-hidden="true"
+                        ></i>
+                      </Select.Icon>
+                    )}
                   </Select.Trigger>
                   <Select.Portal>
                     <Select.Content
@@ -143,7 +142,7 @@ function FieldsComponent({
                             marginTop: "5px",
                             marginLeft: "5px",
                             color: "#3b15d1",
-                            fontSize: "20px",
+                            fontSize: "20px"
                           }}
                           className="fa fa-angle-down"
                           aria-hidden="true"
@@ -151,7 +150,7 @@ function FieldsComponent({
                       </Select.ScrollUpButton>
                       <Select.Viewport className="SelectViewport">
                         <Select.Group>
-                          {signersdata.Signers.map((obj, ind) => {
+                          {signersdata.map((obj, ind) => {
                             return (
                               <SelectItem
                                 selected
@@ -175,7 +174,7 @@ function FieldsComponent({
                             marginTop: "5px",
                             marginLeft: "5px",
                             color: "#3b15d1",
-                            fontSize: "20px",
+                            fontSize: "20px"
                           }}
                           className="fa fa-angle-down"
                           aria-hidden="true"
@@ -221,7 +220,7 @@ function FieldsComponent({
                   backgroundSize: "70% 70%",
                   backgroundRepeat: "no-repeat",
                   backgroundPosition: "center center",
-                  paddingBottom: "2.2rem",
+                  paddingBottom: "2.2rem"
                 }}
               >
                 {/* <img
@@ -238,7 +237,7 @@ function FieldsComponent({
                     color: "white",
                     fontSize: "12px",
                     position: "relative",
-                    top: "2.6rem",
+                    top: "2.6rem"
                   }}
                 >
                   Signature
@@ -261,7 +260,7 @@ function FieldsComponent({
                   backgroundSize: "32px 33px",
                   backgroundRepeat: "no-repeat",
                   backgroundPosition: "center center",
-                  paddingBottom: "2.2rem",
+                  paddingBottom: "2.2rem"
                 }}
               >
                 <span
@@ -269,7 +268,7 @@ function FieldsComponent({
                     color: "white",
                     fontSize: "12px",
                     position: "relative",
-                    top: "2.6rem",
+                    top: "2.6rem"
                   }}
                 >
                   Stamp
@@ -283,8 +282,7 @@ function FieldsComponent({
           <div
             style={{
               background: themeColor(),
-
-              padding: "5px",
+              padding: "5px"
             }}
           >
             <span className="signedStyle">Fields</span>
@@ -299,7 +297,7 @@ function FieldsComponent({
                       fontWeight: "400",
                       fontSize: "15px",
                       padding: "3px 20px 0px 20px",
-                      color: "#bfbfbf",
+                      color: "#bfbfbf"
                     }}
                   >
                     Signature
@@ -310,7 +308,7 @@ function FieldsComponent({
                     style={{
                       width: "30px",
                       height: "28px",
-                      background: "#d3edeb",
+                      background: "#d3edeb"
                     }}
                     src={sign}
                   />
@@ -321,7 +319,7 @@ function FieldsComponent({
                       fontWeight: "400",
                       fontSize: "15px",
                       padding: "3px 0px 0px 35px",
-                      color: "#bfbfbf",
+                      color: "#bfbfbf"
                     }}
                   >
                     Stamp
@@ -332,7 +330,7 @@ function FieldsComponent({
                     style={{
                       width: "25px",
                       height: "28px",
-                      background: "#d3edeb",
+                      background: "#d3edeb"
                     }}
                     src={stamp}
                   />
@@ -355,7 +353,7 @@ function FieldsComponent({
                   style={{
                     opacity: isDragSign ? 0.5 : 1,
                     boxShadow:
-                      "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)",
+                      "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)"
                   }}
                 >
                   <span
@@ -363,7 +361,7 @@ function FieldsComponent({
                       fontWeight: "400",
                       fontSize: "15px",
                       padding: "3px 20px 0px 20px",
-                      color: "black",
+                      color: "black"
                     }}
                   >
                     Signature
@@ -373,7 +371,7 @@ function FieldsComponent({
                     style={{
                       width: "30px",
                       height: "28px",
-                      background: themeColor(),
+                      background: themeColor()
                     }}
                     src={sign}
                   />
@@ -393,7 +391,7 @@ function FieldsComponent({
                   style={{
                     opacity: isDragStamp ? 0.5 : 1,
                     boxShadow:
-                      "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)",
+                      "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)"
                   }}
                 >
                   <span
@@ -401,7 +399,7 @@ function FieldsComponent({
                       fontWeight: "400",
                       fontSize: "15px",
                       padding: "3px 0px 0px 35px",
-                      color: !pdfUrl ? "black" : "#bfbfbf",
+                      color: !pdfUrl ? "black" : "#bfbfbf"
                     }}
                   >
                     Stamp
@@ -412,7 +410,7 @@ function FieldsComponent({
                     style={{
                       width: "25px",
                       height: "28px",
-                      background: themeColor(),
+                      background: themeColor()
                     }}
                     src={stamp}
                   />
diff --git a/microfrontends/SignDocuments/src/Component/component/header.js b/microfrontends/SignDocuments/src/Component/component/header.js
index fe6b0cab0..6ee16f2e1 100644
--- a/microfrontends/SignDocuments/src/Component/component/header.js
+++ b/microfrontends/SignDocuments/src/Component/component/header.js
@@ -533,17 +533,17 @@ function Header({
           ) : isPlaceholder ? (
             <>
               {!isMailSend &&
-                signersdata.Signers &&
-                signersdata.Signers.length !== signerPos.length && (
+                signersdata.length > 0 &&
+                signersdata.length !== signerPos.length && (
                   <div>
                     {signerPos.length === 0 ? (
                       <span style={{ fontSize: "13px", color: "#f5405e" }}>
-                        Add all {signersdata.Signers.length - signerPos.length}{" "}
+                        Add all {signersdata.length - signerPos.length}{" "}
                         recipients signature
                       </span>
                     ) : (
                       <span style={{ fontSize: "13px", color: "#f5405e" }}>
-                        Add {signersdata.Signers.length - signerPos.length} more
+                        Add {signersdata.length - signerPos.length} more
                         recipients signature
                       </span>
                     )}
diff --git a/microfrontends/SignDocuments/src/Component/component/renderAllPdfPage.js b/microfrontends/SignDocuments/src/Component/component/renderAllPdfPage.js
index ffac41108..1872c0a4b 100644
--- a/microfrontends/SignDocuments/src/Component/component/renderAllPdfPage.js
+++ b/microfrontends/SignDocuments/src/Component/component/renderAllPdfPage.js
@@ -9,7 +9,7 @@ function RenderAllPdfPage({
   allPages,
   setAllPages,
   setPageNumber,
-  setSignBtnPosition,
+  setSignBtnPosition
 }) {
   pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
 
@@ -20,75 +20,77 @@ function RenderAllPdfPage({
 
   return (
     <div className="showPages">
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "row",
-        boxShadow: "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px",
-        backgroundColor: "white",
-        height:"100%"
-        
-      }}
-    >
-      <div style={{ width: "140px" }}>
-        <div
-          style={{
-            background: themeColor(),
-            //  color:"white"
-          }}
-          className="signedStyle"
-        >
-          Pages
-        </div>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          boxShadow: "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px",
+          backgroundColor: "white",
+          height: "100%"
+        }}
+      >
+        <div style={{ width: "140px" }}>
+          <div
+            style={{
+              background: themeColor()
+              //  color:"white"
+            }}
+            className="signedStyle"
+          >
+            Pages
+          </div>
 
-        
-        <div>
-          <RSC id="RSC-Example" style={{width:"135px",height:window.innerHeight-130+'px'}} >
-            <Document
-              onLoadSuccess={onDocumentLoad}
-              file={pdfUrl ? pdfUrl : signPdfUrl}
-              //   file="https://api.printnode.com/static/test/pdf/multipage.pdf"
+          <div>
+            <RSC
+              id="RSC-Example"
+              style={{
+                width: "135px",
+                height: window.innerHeight - 130 + "px"
+              }}
             >
-              {Array.from(new Array(allPages), (el, index) => (
-                <div
-                  key={index}
-                  style={{
-                    width: "100px",
-                    border: "2px solid #878787",
-                    // padding: "5px",
-                    margin: "10px",
+              <Document
+                onLoadSuccess={onDocumentLoad}
+                file={pdfUrl ? pdfUrl : signPdfUrl}
+                //   file="https://api.printnode.com/static/test/pdf/multipage.pdf"
+              >
+                {Array.from(new Array(allPages), (el, index) => (
+                  <div
+                    key={index}
+                    style={{
+                      width: "100px",
+                      border: "2px solid #878787",
+                      // padding: "5px",
+                      margin: "10px",
 
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    contain: "content",
-                  }}
-                  onClick={() => {
-                    setPageNumber(index + 1);
-                    if (setSignBtnPosition) {
-                      setSignBtnPosition([]);
-                    }
-                  }}
-                >
-                  <Page
-                    key={`page_${index + 1}`}
-                    pageNumber={index + 1}
-                    width={100}
-                    height={100}
-                    scale={1}
-                    renderAnnotationLayer={false}
-                    renderTextLayer={false}
-                  />
-                </div>
-              ))}
-            </Document>
-          </RSC>
+                      display: "flex",
+                      justifyContent: "center",
+                      alignItems: "center",
+                      contain: "content"
+                    }}
+                    onClick={() => {
+                      setPageNumber(index + 1);
+                      if (setSignBtnPosition) {
+                        setSignBtnPosition([]);
+                      }
+                    }}
+                  >
+                    <Page
+                      key={`page_${index + 1}`}
+                      pageNumber={index + 1}
+                      width={100}
+                      height={100}
+                      scale={1}
+                      renderAnnotationLayer={false}
+                      renderTextLayer={false}
+                    />
+                  </div>
+                ))}
+              </Document>
+            </RSC>
+          </div>
+          <hr />
         </div>
-        <hr />
       </div>
-
-      
-    </div>
     </div>
   );
 }
diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js
index 7469e6630..7a68b0362 100644
--- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js
+++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js
@@ -1,3 +1,4 @@
+
 import React from "react";
 import RSC from "react-scrollbars-custom";
 import { Rnd } from "react-rnd";
@@ -459,9 +460,13 @@ function RenderPdf({
                                         className="placeholderBlock"
                                         onDrag={() => handleTabDrag(pos.key)}
                                         size={{
-                                          width: pos.Width ? pos.Width : 150,
-                                          height: pos.Height ? pos.Height : 60
+                                          width: posWidth(pos),
+                                          height: posHeight(pos)
                                         }}
+                                        // size={{
+                                        //   width: pos.Width ? pos.Width : 150,
+                                        //   height: pos.Height ? pos.Height : 60
+                                        // }}
                                         lockAspectRatio={
                                           pos.Width
                                             ? pos.Width / pos.Height
@@ -471,14 +476,21 @@ function RenderPdf({
                                           handleStop(
                                             event,
                                             dragElement,
-                                            data.signerObjId,
+                                            data.Id,
                                             pos.key
                                           )
+                                          // data.signerObjId,
                                         }
                                         default={{
-                                          x: pos.xPosition,
-                                          y: pos.yPosition
+                                          x: xPos(pos),
+                                          y: !pos.isMobile
+                                            ? pos.yPosition / scale
+                                            : pos.yPosition * (pos.scale / scale)
                                         }}
+                                        // default={{
+                                        //   x: pos.xPosition,
+                                        //   y: pos.yPosition
+                                        // }}
                                         onResizeStart={() => {
                                           setIsResize(true);
                                         }}
@@ -492,6 +504,7 @@ function RenderPdf({
                                           delta,
                                           position
                                         ) => {
+                                          e.stopPropagation();
                                           handleImageResize(
                                             ref,
                                             pos.key,
@@ -541,8 +554,9 @@ function RenderPdf({
                                               e.stopPropagation();
                                               handleDeleteSign(
                                                 pos.key,
-                                                data.signerObjId
+                                                data.Id
                                               );
+                                              // data.signerObjId
                                             }}
                                             style={{
                                               background: themeColor()
@@ -920,7 +934,7 @@ function RenderPdf({
                                             cursor: "all-scroll",
                                             background: data.blockColor,
                                             borderColor: themeColor(),
-                                            zIndex: pos.zIndex
+                                            zIndex:  pos.zIndex ? pos.zIndex : "1"
                                           }}
                                           className="placeholderBlock"
                                           onDrag={() => handleTabDrag(pos.key)}
@@ -937,9 +951,10 @@ function RenderPdf({
                                             handleStop(
                                               event,
                                               dragElement,
-                                              data.signerObjId,
+                                              data.Id,
                                               pos.key
                                             )
+                                              // data.signerObjId,
                                           }
                                           default={{
                                             x: pos.xPosition,
@@ -978,8 +993,9 @@ function RenderPdf({
                                               e.stopPropagation();
                                               handleDeleteSign(
                                                 pos.key,
-                                                data.signerObjId
+                                                data.Id
                                               );
+                                              // data.signerObjId
                                             }}
                                             style={{
                                               background: themeColor()
diff --git a/microfrontends/SignDocuments/src/Component/component/signerListPlace.js b/microfrontends/SignDocuments/src/Component/component/signerListPlace.js
index 28a5231d7..4905da542 100644
--- a/microfrontends/SignDocuments/src/Component/component/signerListPlace.js
+++ b/microfrontends/SignDocuments/src/Component/component/signerListPlace.js
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import check from "../../assests/checkBox.png";
 import { themeColor } from "../../utils/ThemeColor/backColor";
+import "../../css/signerListPlace.css";
 
 function SignerListPlace({
   signerPos,
@@ -8,7 +9,10 @@ function SignerListPlace({
   isSelectListId,
   setSignerObjId,
   setIsSelectId,
-  setContractName
+  setContractName,
+  handleAddSigner,
+  setUniqueId,
+  setRoleName
 }) {
   const color = [
     "#93a3db",
@@ -22,7 +26,7 @@ function SignerListPlace({
     "#cc99ff",
     "#ffcc99",
     "#66ccff",
-    "#ffffcc",
+    "#ffffcc"
   ];
 
   const nameColor = [
@@ -37,10 +41,11 @@ function SignerListPlace({
     "#cc00ff",
     "#ff9900",
     "#336699",
-    "#cc9900",
+    "#cc9900"
   ];
   const [isHover, setIsHover] = useState();
 
+  console.log("signerPos", signerPos);
   //function for onhover signer name change background color
   const onHoverStyle = (ind) => {
     const style = {
@@ -49,7 +54,7 @@ function SignerListPlace({
       marginTop: "2px",
       display: "flex",
       flexDirection: "row",
-      borderBottom: "1px solid #e3e1e1",
+      borderBottom: "1px solid #e3e1e1"
     };
     return style;
   };
@@ -61,101 +66,128 @@ function SignerListPlace({
       marginTop: "2px",
       display: "flex",
       flexDirection: "row",
-
-      justifyContent: "space-between",
+      borderBottom: "1px solid #e3e1e1",
+      justifyContent: "space-between"
     };
     return style;
   };
 
   const getFirstLetter = (name) => {
-    const firstLetter = name.charAt(0);
+    const firstLetter = name?.charAt(0);
     return firstLetter;
   };
 
   return (
-    <div  >
+    <div>
       <div
         style={{
           background: themeColor(),
-
-          padding: "5px",
+          padding: "5px"
         }}
       >
         <span className="signedStyle">Reicipents</span>
       </div>
-       
+
       <div className="signerList">
-        {signersdata.Signers &&
-          signersdata.Signers.map((obj, ind) => {
-            return (
-              <div
-                data-tut="reactourFirst"
-                onMouseEnter={() => setIsHover(ind)}
-                onMouseLeave={() => setIsHover(null)}
-                key={ind}
-                style={
-                  isHover === ind || isSelectListId === ind
-                    ? onHoverStyle(ind)
-                    : nonHoverStyle(ind)
-                }
-                onClick={() => {
-                  setSignerObjId(obj.objectId);
-                  setIsSelectId(ind);
-                  setContractName(obj.className)
-                }}
-              >
+        <>
+          {signersdata.length > 0 &&
+            signersdata.map((obj, ind) => {
+              return (
                 <div
-                  style={{
-                    display: "flex",
-                    flexDirection: "row",
+                  data-tut="reactourFirst"
+                  onMouseEnter={() => setIsHover(ind)}
+                  onMouseLeave={() => setIsHover(null)}
+                  key={ind}
+                  style={
+                    isHover === ind || isSelectListId === ind
+                      ? onHoverStyle(ind)
+                      : nonHoverStyle(ind)
+                  }
+                  onClick={() => {
+                    setSignerObjId(obj?.objectId);
+                    setIsSelectId(ind);
+                    setContractName(obj?.className);
+                    setUniqueId(obj.Id);
+                    setRoleName(obj.Role)
                   }}
                 >
                   <div
-                    className="signerStyle"
                     style={{
-                      background: nameColor[ind % nameColor.length],
-                      width: 20,
-                      height: 20,
                       display: "flex",
-                      borderRadius: 30 / 2,
-                      justifyContent: "center",
-                      alignItems: "center",
-                      marginRight: "20px",
-                      marginTop: "5px",
+                      flexDirection: "row"
                     }}
                   >
-                    <span
+                    <div
+                      className="signerStyle"
                       style={{
-                        fontSize: "8px",
-                        textAlign: "center",
-                        fontWeight: "bold",
+                        background: nameColor[ind % nameColor.length],
+                        width: 20,
+                        height: 20,
+                        display: "flex",
+                        borderRadius: 30 / 2,
+                        justifyContent: "center",
+                        alignItems: "center",
+                        marginRight: "20px",
+                        marginTop: "5px"
                       }}
                     >
-                      {" "}
-                      {getFirstLetter(obj.Name)}
-                    </span>
-                  </div>
-                  <div style={{ display: "flex", flexDirection: "column" }}>
-                    <span className="userName">{obj.Name}</span>
-                    <span className="useEmail">{obj.Email}</span>
+                      <span
+                        style={{
+                          fontSize: "8px",
+                          textAlign: "center",
+                          fontWeight: "bold",
+                          color: "white",
+                          textTransform: "uppercase"
+                        }}
+                      >
+                        {obj.Name
+                          ? getFirstLetter(obj.Name)
+                          : getFirstLetter(obj.Role)}
+                      </span>
+                    </div>
+                    <div
+                      style={{
+                        display: "flex",
+                        flexDirection: obj.Name ? "column" : "row",
+                        alignItems: "center"
+                      }}
+                    >
+                      {obj.Name ? (
+                        <span className="userName">{obj.Name}</span>
+                      ) : (
+                        <span className="userName">{obj.Role}</span>
+                      )}
+                      {obj.Email && (
+                        <span className="useEmail">{obj.Email}</span>
+                      )}
+                    </div>
                   </div>
+                  {signerPos.map((data, key) => {
+                    return (
+                      data.Id === obj.Id && (
+                        <div key={key}>
+                          <img
+                            alt="no img"
+                            src={check}
+                            width={20}
+                            height={20}
+                          />
+                        </div>
+                      )
+                    );
+                  })}
+                  <hr />
                 </div>
-                {signerPos.map((data, key) => {
-                  return (
-                    data.signerObjId === obj.objectId && (
-                      <div key={key}>
-                        <img alt="no img" src={check} width={20} height={20} />
-                      </div>
-                    )
-                  );
-                })}
-
-                <hr />
-              </div>
-            );
-          })}
+              );
+            })}
+        </>
       </div>
-    
+        {handleAddSigner && (
+          <div className="addSignerBtn" onClick={() => handleAddSigner()}>
+            <i className="fa-solid fa-plus"></i>
+            <span style={{ marginLeft: 2 }}>Add</span>
+          </div>
+        )}
     </div>
   );
 }
diff --git a/microfrontends/SignDocuments/src/Routes.js b/microfrontends/SignDocuments/src/Routes.js
index 605212871..e9dd50915 100644
--- a/microfrontends/SignDocuments/src/Routes.js
+++ b/microfrontends/SignDocuments/src/Routes.js
@@ -9,6 +9,7 @@ import DraftDocument from "./Component/DraftDocument";
 import PdfRequestFiles from "./Component/PdfRequestFiles";
 import LegaDrive from "./Component/LegaDrive/LegaDrive";
 import PageNotFound from "./Component/PageNotFound";
+import TemplatePlaceHolder from "./Component/TemplatePlaceholder";
 
 // `AppRoutes` is used to define route path of app and
 // it expose to host app, check moduleFederation.config.js for more
@@ -47,6 +48,7 @@ function AppRoutes() {
         {/* lega drive route */}
         <Route path="/legadrive" element={<LegaDrive />} />
         {/* Page Not Found */}
+        <Route path="/template/:templateId" element={<TemplatePlaceHolder />} />
         <Route path="*" element={<PageNotFound />} />
       </Routes>
     </div>
diff --git a/microfrontends/SignDocuments/src/css/signerListPlace.css b/microfrontends/SignDocuments/src/css/signerListPlace.css
new file mode 100644
index 000000000..1df701b70
--- /dev/null
+++ b/microfrontends/SignDocuments/src/css/signerListPlace.css
@@ -0,0 +1,16 @@
+.addSignerBtn{
+    padding: 10px;
+    margin-top: 2px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid #47a3ad;
+    margin: 1px;
+    color: #47a3ad;
+    cursor: pointer
+}
+.addSignerBtn:hover{
+    background: #47a3ad;
+    color: #ffffff;
+}
diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js
index 292a9c2f4..e5cd69857 100644
--- a/microfrontends/SignDocuments/src/utils/Utils.js
+++ b/microfrontends/SignDocuments/src/utils/Utils.js
@@ -1001,3 +1001,5 @@ export const signPdfFun = async (
 
   return response;
 };
+
+export const randomId = () => Math.floor(1000 + Math.random() * 9000);
\ No newline at end of file