diff --git a/apps/OpenSign/src/components/fields/DropboxChoose.js b/apps/OpenSign/src/components/fields/DropboxChoose.js
index 9ed1bb3f8..a97e2e20f 100644
--- a/apps/OpenSign/src/components/fields/DropboxChoose.js
+++ b/apps/OpenSign/src/components/fields/DropboxChoose.js
@@ -41,7 +41,8 @@ export default function DropboxChooser({ children, onSuccess, onCancel }) {
     [onSuccess, onCancel]
   );
 
-  const handleChoose = useCallback(() => {
+  const handleChoose = useCallback((e) => {
+    e.preventDefault()
     if (window.Dropbox) {
       window.Dropbox.choose(options);
     }
diff --git a/apps/OpenSign/src/components/fields/FileUpload.js b/apps/OpenSign/src/components/fields/FileUpload.js
index ff1373bbc..e6c632a02 100644
--- a/apps/OpenSign/src/components/fields/FileUpload.js
+++ b/apps/OpenSign/src/components/fields/FileUpload.js
@@ -271,7 +271,7 @@ const FileUpload = (props) => {
                 <i className="fa-solid fa-xmark"></i>
               </div>
             </div>
-            {process.env.DROPBOX_APP_KEY && (
+            {process.env.REACT_APP_DROPBOX_API_KEY && (
               <DropboxChooser
                 onSuccess={dropboxSuccess}
                 onCancel={dropboxCancel}
@@ -296,7 +296,7 @@ const FileUpload = (props) => {
               accept="application/pdf,application/vnd.ms-excel"
               onChange={onChange}
             />
-            {process.env.DROPBOX_APP_KEY && (
+            {process.env.REACT_APP_DROPBOX_API_KEY && (
               <DropboxChooser
                 onSuccess={dropboxSuccess}
                 onCancel={dropboxCancel}
diff --git a/apps/OpenSign/src/json/ReportJson.js b/apps/OpenSign/src/json/ReportJson.js
index 093d23d7d..fbe0b6444 100644
--- a/apps/OpenSign/src/json/ReportJson.js
+++ b/apps/OpenSign/src/json/ReportJson.js
@@ -162,7 +162,7 @@ export default function reportJson(id) {
             btnIcon: "fa-solid fa-trash"
           }
         ],
-        form:"ContactBook"
+        form: "ContactBook"
       };
     // template report
     case "6TeaPr321t":
diff --git a/apps/OpenSign/src/primitives/TemplateForm.js b/apps/OpenSign/src/primitives/TemplateForm.js
index 1f2a8eb56..2e5ff13f8 100644
--- a/apps/OpenSign/src/primitives/TemplateForm.js
+++ b/apps/OpenSign/src/primitives/TemplateForm.js
@@ -240,7 +240,7 @@ const TemplateForm = () => {
                   <i className="fa-solid fa-xmark"></i>
                 </div>
               </div>
-              {process.env.DROPBOX_APP_KEY && (
+              {process.env.REACT_APP_DROPBOX_API_KEY && (
                 <DropboxChooser
                   onSuccess={dropboxSuccess}
                   onCancel={dropboxCancel}
@@ -256,7 +256,7 @@ const TemplateForm = () => {
                 accept="application/pdf,application/vnd.ms-excel"
                 required
               />
-              {process.env.DROPBOX_APP_KEY && (
+              {process.env.REACT_APP_DROPBOX_API_KEY && (
                 <DropboxChooser
                   onSuccess={dropboxSuccess}
                   onCancel={dropboxCancel}
diff --git a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js
index 8c6055a48..61792a0a4 100644
--- a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js
+++ b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js
@@ -102,7 +102,6 @@ const TemplatePlaceholder = () => {
   });
   const [{ isDragSign }, dragSignature] = useDrag({
     type: "BOX",
-
     item: {
       type: "BOX",
       id: 1,
@@ -127,7 +126,6 @@ const TemplatePlaceholder = () => {
 
   const [{ isDragSignatureSS }, dragSignatureSS] = useDrag({
     type: "BOX",
-
     item: {
       type: "BOX",
       id: 3,
@@ -140,7 +138,6 @@ const TemplatePlaceholder = () => {
 
   const [{ isDragStampSS }, dragStampSS] = useDrag({
     type: "BOX",
-
     item: {
       type: "BOX",
       id: 4,
@@ -405,15 +402,14 @@ const TemplatePlaceholder = () => {
 
       xyPosArr.push(xyPos);
     }
-
-    //add signers objId first inseretion
+    const { blockColor, Role } = signersdata.find((x) => x.Id === uniqueId);
+    //adding placholder in existing signer pos array (placaholder)
     if (filterSignerPos.length > 0) {
       // const colorIndex = signerPos
       //   .map((e) => e.signerObjId)
       //   .indexOf(signerObjId);
 
       const colorIndex = signerPos.map((e) => e.Id).indexOf(uniqueId);
-      const blockColor = signersdata.find((x) => x.Id === uniqueId)?.blockColor;
       const getPlaceHolder = filterSignerPos[0].placeHolder;
       const updatePlace = getPlaceHolder.filter(
         (data) => data.pageNumber !== pageNumber
@@ -442,7 +438,7 @@ const TemplatePlaceholder = () => {
               className: `${contractName}`,
               objectId: signerObjId
             },
-            Role: roleName,
+            Role: Role ? Role : roleName,
             Id: uniqueId
           };
         } else {
@@ -451,7 +447,7 @@ const TemplatePlaceholder = () => {
             signerObjId: "",
             placeHolder: updatePlace,
             signerPtr: {},
-            Role: roleName,
+            Role: Role ? Role : roleName,
             Id: uniqueId
           };
         }
@@ -476,7 +472,7 @@ const TemplatePlaceholder = () => {
               className: `${contractName}`,
               objectId: signerObjId
             },
-            Role: roleName,
+            Role: Role ? Role : roleName,
             Id: uniqueId
           };
         } else {
@@ -485,12 +481,11 @@ const TemplatePlaceholder = () => {
             signerObjId: "",
             placeHolder: newSignPoss,
             signerPtr: {},
-            Role: roleName,
+            Role: Role ? Role : roleName,
             Id: uniqueId
           };
         }
 
-        // signerPos.splice(colorIndex, 1, placeHolderPos);
         const newArry = [placeHolderPos];
         const newArray = [
           ...signerPos.slice(0, colorIndex),
@@ -501,7 +496,7 @@ const TemplatePlaceholder = () => {
         setSignerPos(newArray);
       }
     } else {
-      const blockColor = signersdata.find((x) => x.Id === uniqueId)?.blockColor;
+      //adding new placeholder for selected signer in pos array (placeholder)
       let placeHolderPos;
       if (contractName) {
         placeHolderPos = {
@@ -513,7 +508,7 @@ const TemplatePlaceholder = () => {
           signerObjId: signerObjId,
           blockColor: blockColor ? blockColor : color[isSelectListId],
           placeHolder: xyPosArr,
-          Role: roleName,
+          Role: Role ? Role : roleName,
           Id: uniqueId
         };
       } else {
@@ -522,7 +517,7 @@ const TemplatePlaceholder = () => {
           signerObjId: "",
           blockColor: blockColor ? blockColor : color[isSelectListId],
           placeHolder: xyPosArr,
-          Role: roleName,
+          Role: Role ? Role : roleName,
           Id: uniqueId
         };
       }
@@ -871,14 +866,17 @@ const TemplatePlaceholder = () => {
     e.preventDefault();
     const count = signersdata.length > 0 ? signersdata.length + 1 : 1;
     const Id = randomId();
+    const index = signersdata?.length || 0;
     const obj = {
       Role: roleName || "User " + count,
-      Id: Id
+      Id: Id,
+      blockColor: color[index]
     };
     setSignersData((prevArr) => [...prevArr, obj]);
     setIsModalRole(false);
     setRoleName("");
     setUniqueId(Id);
+    setIsSelectId(index);
     setIsMailSend(false);
   };
   // `handleDeleteUser` function is used to delete record and placeholder when user click on delete which is place next user name in recipients list