diff --git a/apps/OpenSign/src/assets/images/dragIcon.png b/apps/OpenSign/src/assets/images/dragIcon.png
new file mode 100644
index 000000000..fe6ec76e6
Binary files /dev/null and b/apps/OpenSign/src/assets/images/dragIcon.png differ
diff --git a/apps/OpenSign/src/components/pdf/RecipientList.js b/apps/OpenSign/src/components/pdf/RecipientList.js
index 0b413e09f..10efff360 100644
--- a/apps/OpenSign/src/components/pdf/RecipientList.js
+++ b/apps/OpenSign/src/components/pdf/RecipientList.js
@@ -1,36 +1,14 @@
 import React, { useRef, useState } from "react";
-import { darkenColor, getFirstLetter } from "../../constant/Utils";
+import {
+  color,
+  darkenColor,
+  getFirstLetter,
+  isMobile,
+  nameColor
+} from "../../constant/Utils";
+import dragIcon from "../../assets/images/dragIcon.png";
 
 const RecipientList = (props) => {
-  const color = [
-    "#93a3db",
-    "#e6c3db",
-    "#c0e3bc",
-    "#bce3db",
-    "#b8ccdb",
-    "#ceb8db",
-    "#ffccff",
-    "#99ffcc",
-    "#cc99ff",
-    "#ffcc99",
-    "#66ccff",
-    "#ffffcc"
-  ];
-
-  const nameColor = [
-    "#304fbf",
-    "#7d5270",
-    "#5f825b",
-    "#578077",
-    "#576e80",
-    "#6d527d",
-    "#cc00cc",
-    "#006666",
-    "#cc00ff",
-    "#ff9900",
-    "#336699",
-    "#cc9900"
-  ];
   const [isHover, setIsHover] = useState();
   const [isEdit, setIsEdit] = useState(false);
   //function for onhover signer name change background color
@@ -43,8 +21,7 @@ const RecipientList = (props) => {
       display: "flex",
       flexDirection: "row",
       borderBottom: "1px solid #e3e1e1",
-      alignItems: "center",
-      cursor: props.sendInOrder && "move"
+      alignItems: "center"
     };
     return style;
   };
@@ -56,8 +33,7 @@ const RecipientList = (props) => {
       display: "flex",
       flexDirection: "row",
       borderBottom: "1px solid #e3e1e1",
-      alignItems: "center",
-      cursor: props.sendInOrder && "move"
+      alignItems: "center"
     };
     return style;
   };
@@ -100,6 +76,7 @@ const RecipientList = (props) => {
     props.setContractName(remainingItems[index]?.className || "");
     props.setUniqueId(remainingItems[index]?.Id);
     props.setRoleName(remainingItems[index]?.Role);
+    props.setBlockColor(remainingItems[index]?.blockColor);
   };
   return (
     <>
@@ -117,6 +94,7 @@ const RecipientList = (props) => {
               data-tut="reactourFirst"
               onMouseEnter={() => setIsHover(ind)}
               onMouseLeave={() => setIsHover(null)}
+              className={props.sendInOrder && "dragCursor"}
               style={
                 isHover === ind || props.isSelectListId === ind
                   ? onHoverStyle(ind, obj?.blockColor)
@@ -128,6 +106,7 @@ const RecipientList = (props) => {
                 props.setContractName(obj?.className || "");
                 props.setUniqueId(obj.Id);
                 props.setRoleName(obj.Role);
+                props.setBlockColor(obj?.blockColor);
                 if (props.handleModal) {
                   props.handleModal();
                 }
@@ -142,7 +121,6 @@ const RecipientList = (props) => {
                 }}
               >
                 <div
-                  className="signerStyle"
                   style={{
                     background: obj?.blockColor
                       ? darkenColor(obj?.blockColor, 0.4)
@@ -153,18 +131,17 @@ const RecipientList = (props) => {
                     borderRadius: 30 / 2,
                     justifyContent: "center",
                     alignItems: "center",
-                    marginRight: "12px",
-                    cursor: props.sendInOrder && "move"
+                    marginRight: "12px"
                   }}
                 >
                   <span
+                    className={props.sendInOrder && "dragCursor"}
                     style={{
                       fontSize: "12px",
                       textAlign: "center",
                       fontWeight: "bold",
                       color: "white",
-                      textTransform: "uppercase",
-                      cursor: props.sendInOrder && "move"
+                      textTransform: "uppercase"
                     }}
                   >
                     {isWidgetExist(obj.Id) ? (
@@ -182,21 +159,16 @@ const RecipientList = (props) => {
                   style={{
                     display: "flex",
                     flexDirection: obj.Name ? "column" : "row",
-                    alignItems: "center",
-                    cursor: props.sendInOrder && "move"
+                    alignItems: "center"
                   }}
                 >
                   {obj.Name ? (
-                    <span
-                      className="userName"
-                      style={{ cursor: props.sendInOrder ? "move" : "default" }}
-                    >
-                      {obj.Name}
-                    </span>
+                    <span className={"userName"}>{obj.Name}</span>
                   ) : (
                     <>
                       <span
                         className="userName"
+                        style={{ cursor: "pointer" }}
                         onClick={() => {
                           setIsEdit({ [obj.Id]: true });
                           props.setRoleName(obj.Role);
@@ -207,7 +179,8 @@ const RecipientList = (props) => {
                             ref={inputRef}
                             style={{
                               backgroundColor: "transparent",
-                              width: "inherit"
+                              width: "inherit",
+                              padding: "3px"
                             }}
                             value={obj.Role}
                             onChange={(e) => props.handleRoleChange(e, obj.Id)}
@@ -228,32 +201,28 @@ const RecipientList = (props) => {
                       </span>
                     </>
                   )}
-                  {obj.Name && (
-                    <span
-                      className="useEmail"
-                      style={{ cursor: props.sendInOrder ? "move" : "default" }}
-                    >
-                      {obj.Role}
-                    </span>
-                  )}
+                  {obj.Name && <span className={"useEmail"}>{obj.Role}</span>}
                 </div>
               </div>
-              {props.handleDeleteUser ? (
+              {isMobile && props.sendInOrder && (
+                <div>
+                  <img
+                    alt="loader img"
+                    src={dragIcon}
+                    style={{ width: 20, height: 20 }}
+                  />
+                </div>
+              )}
+              {props.handleDeleteUser && (
                 <div
                   onClick={(e) => {
                     e.stopPropagation();
                     props.handleDeleteUser(obj.Id);
                   }}
-                  style={{ cursor: "pointer" }}
+                  style={{ cursor: "pointer", marginLeft: "5px" }}
                 >
                   <i className="fa-regular fa-trash-can"></i>
                 </div>
-              ) : (
-                props.sendInOrder && (
-                  <div style={{ cursor: "pointer" }}>
-                    <i className="fa-solid fa-ellipsis-vertical"></i>
-                  </div>
-                )
               )}
               <hr />
             </div>
diff --git a/apps/OpenSign/src/components/pdf/WidgetComponent.js b/apps/OpenSign/src/components/pdf/WidgetComponent.js
index f59ca7117..1e1f61fe0 100644
--- a/apps/OpenSign/src/components/pdf/WidgetComponent.js
+++ b/apps/OpenSign/src/components/pdf/WidgetComponent.js
@@ -34,8 +34,11 @@ function WidgetComponent({
   handleRoleChange,
   handleOnBlur,
   title,
-
-  isTemplateFlow
+  setSignersData,
+  sendInOrder,
+  isTemplateFlow,
+  setBlockColor,
+  blockColor
 }) {
   const [isSignersModal, setIsSignersModal] = useState(false);
 
@@ -239,8 +242,8 @@ function WidgetComponent({
   const updateWidgets = isSignYourself
     ? filterWidgets
     : isTemplateFlow
-    ? textWidgetData
-    : widget;
+      ? textWidgetData
+      : widget;
 
   return (
     <>
@@ -256,9 +259,11 @@ function WidgetComponent({
               <div
                 data-tut={dataTut}
                 style={{
-                  background: isSelectListId
-                    ? color[isSelectListId % color.length]
-                    : color[0],
+                  background: blockColor
+                    ? blockColor
+                    : isSelectListId
+                      ? color[isSelectListId % color.length]
+                      : color[0],
                   padding: "10px 20px",
                   display: "flex",
                   alignItems: "center",
@@ -386,20 +391,25 @@ function WidgetComponent({
           handleClose={handleModal}
         >
           {signersdata.length > 0 ? (
-            <RecipientList
-              signerPos={signerPos}
-              signersdata={signersdata}
-              isSelectListId={isSelectListId}
-              setSignerObjId={setSignerObjId}
-              setIsSelectId={setIsSelectId}
-              setContractName={setContractName}
-              setUniqueId={setUniqueId}
-              setRoleName={setRoleName}
-              handleDeleteUser={handleDeleteUser}
-              handleRoleChange={handleRoleChange}
-              handleOnBlur={handleOnBlur}
-              handleModal={handleModal}
-            />
+            <div style={{ maxHeight: "600px", overflow: "auto" }}>
+              <RecipientList
+                signerPos={signerPos}
+                signersdata={signersdata}
+                isSelectListId={isSelectListId}
+                setSignerObjId={setSignerObjId}
+                setIsSelectId={setIsSelectId}
+                setContractName={setContractName}
+                setUniqueId={setUniqueId}
+                setRoleName={setRoleName}
+                handleDeleteUser={handleDeleteUser}
+                handleRoleChange={handleRoleChange}
+                handleOnBlur={handleOnBlur}
+                handleModal={handleModal}
+                sendInOrder={sendInOrder}
+                setSignersData={setSignersData}
+                setBlockColor={setBlockColor}
+              />
+            </div>
           ) : (
             <div
               style={{
diff --git a/apps/OpenSign/src/constant/Utils.js b/apps/OpenSign/src/constant/Utils.js
index 5c986634f..883238dea 100644
--- a/apps/OpenSign/src/constant/Utils.js
+++ b/apps/OpenSign/src/constant/Utils.js
@@ -12,6 +12,35 @@ export const openInNewTab = (url) => {
   window.open(url, "_blank", "noopener,noreferrer");
 };
 
+export const color = [
+  "#93a3db",
+  "#e6c3db",
+  "#c0e3bc",
+  "#bce3db",
+  "#b8ccdb",
+  "#ceb8db",
+  "#ffccff",
+  "#99ffcc",
+  "#cc99ff",
+  "#ffcc99",
+  "#66ccff",
+  "#ffffcc"
+];
+
+export const nameColor = [
+  "#304fbf",
+  "#7d5270",
+  "#5f825b",
+  "#578077",
+  "#576e80",
+  "#6d527d",
+  "#cc00cc",
+  "#006666",
+  "#cc00ff",
+  "#ff9900",
+  "#336699",
+  "#cc9900"
+];
 export const toDataUrl = (file) => {
   return new Promise((resolve) => {
     const reader = new FileReader();
diff --git a/apps/OpenSign/src/pages/Form.js b/apps/OpenSign/src/pages/Form.js
index 924542ae6..1e2afcae9 100644
--- a/apps/OpenSign/src/pages/Form.js
+++ b/apps/OpenSign/src/pages/Form.js
@@ -167,7 +167,7 @@ const Forms = (props) => {
         );
       }
       if (props.title !== "Sign Yourself") {
-        const isChecked = formData.SendinOrder === "true" ? true : false;
+        const isChecked = formData.SendinOrder === "false" ? false : true;
         object.set("SendinOrder", isChecked);
       }
       object.set("URL", fileupload);
@@ -237,7 +237,7 @@ const Forms = (props) => {
       Description: "",
       Note: "Please review and sign this document",
       TimeToCompleteDays: 15,
-      SendinOrder: "false"
+      SendinOrder: "true"
     });
     setFileUpload([]);
     setpercentage(0);
diff --git a/apps/OpenSign/src/pages/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js
index 07c3d401e..56a8c641b 100644
--- a/apps/OpenSign/src/pages/PlaceHolderSign.js
+++ b/apps/OpenSign/src/pages/PlaceHolderSign.js
@@ -27,7 +27,8 @@ import {
   addWidgetOptions,
   textInputWidget,
   textWidget,
-  radioButtonWidget
+  radioButtonWidget,
+  color
 } from "../constant/Utils";
 import RenderPdf from "../components/pdf/RenderPdf";
 import { useNavigate } from "react-router-dom";
@@ -80,6 +81,7 @@ function PlaceHolderSign() {
   const [zIndex, setZIndex] = useState(1);
   const [signKey, setSignKey] = useState();
   const [tempSignerId, setTempSignerId] = useState("");
+  const [blockColor, setBlockColor] = useState("");
   const [pdfLoadFail, setPdfLoadFail] = useState({
     status: false,
     type: "load"
@@ -106,20 +108,6 @@ function PlaceHolderSign() {
     status: false,
     message: ""
   });
-  const color = [
-    "#93a3db",
-    "#e6c3db",
-    "#c0e3bc",
-    "#bce3db",
-    "#b8ccdb",
-    "#ceb8db",
-    "#ffccff",
-    "#99ffcc",
-    "#cc99ff",
-    "#ffcc99",
-    "#66ccff",
-    "#ffffcc"
-  ];
 
   const isMobile = window.innerWidth < 767;
   const [, drop] = useDrop({
@@ -276,14 +264,17 @@ function PlaceHolderSign() {
           });
           setSignersData(updatedSigners);
           setUniqueId(updatedSigners[0].Id);
+          setBlockColor(updatedSigners[0].blockColor);
         } else {
           const updatedSigners = documentData[0].Signers.map((x, index) => ({
             ...x,
             Id: randomId(),
-            Role: "User " + (index + 1)
+            Role: "User " + (index + 1),
+            blockColor: color[index % color.length]
           }));
           setSignersData(updatedSigners);
           setUniqueId(updatedSigners[0].Id);
+          setBlockColor(updatedSigners[0].blockColor);
         }
       } else {
         setRoleName("User 1");
@@ -303,6 +294,7 @@ function PlaceHolderSign() {
           setSignersData(updatedSigners);
           setIsSelectId(0);
           setUniqueId(updatedSigners[0].Id);
+          setBlockColor(updatedSigners[0].blockColor);
         }
       }
     } else if (
@@ -1716,6 +1708,10 @@ function PlaceHolderSign() {
                   setUniqueId={setUniqueId}
                   setRoleName={setRoleName}
                   initial={true}
+                  sendInOrder={pdfDetails[0].SendinOrder}
+                  setSignersData={setSignersData}
+                  blockColor={blockColor}
+                  setBlockColor={setBlockColor}
                 />
               </div>
             ) : (
@@ -1736,6 +1732,8 @@ function PlaceHolderSign() {
                       setRoleName={setRoleName}
                       sendInOrder={pdfDetails[0].SendinOrder}
                       setSignersData={setSignersData}
+                      blockColor={blockColor}
+                      setBlockColor={setBlockColor}
                       // handleAddSigner={handleAddSigner}
                     />
                     <div data-tut="reactourSecond">
diff --git a/apps/OpenSign/src/pages/TemplatePlaceholder.js b/apps/OpenSign/src/pages/TemplatePlaceholder.js
index bc21458a2..82fe4d40e 100644
--- a/apps/OpenSign/src/pages/TemplatePlaceholder.js
+++ b/apps/OpenSign/src/pages/TemplatePlaceholder.js
@@ -77,6 +77,7 @@ const TemplatePlaceholder = () => {
   const [showDropdown, setShowDropdown] = useState(false);
   const [widgetType, setWidgetType] = useState("");
   const [isRadio, setIsRadio] = useState(false);
+  const [blockColor, setBlockColor] = useState("");
   const [selectWidgetId, setSelectWidgetId] = useState("");
   const [isNameModal, setIsNameModal] = useState(false);
   const [pdfLoadFail, setPdfLoadFail] = useState({
@@ -223,6 +224,7 @@ const TemplatePlaceholder = () => {
             });
             setSignersData(updatedSigners);
             setUniqueId(updatedSigners[0].Id);
+            setBlockColor(updatedSigners[0].blockColor);
           } else {
             const updatedSigners = documentData[0].Signers.map((x, index) => ({
               ...x,
@@ -231,6 +233,7 @@ const TemplatePlaceholder = () => {
             }));
             setSignersData(updatedSigners);
             setUniqueId(updatedSigners[0].Id);
+            setBlockColor(updatedSigners[0].blockColor);
           }
         } else {
           setRoleName("User 1");
@@ -249,6 +252,7 @@ const TemplatePlaceholder = () => {
             setUniqueId(updatedSigners[0].Id);
             setSignersData(updatedSigners);
             setIsSelectId(0);
+            setBlockColor(updatedSigners[0].blockColor);
           }
         }
       } else if (
@@ -854,6 +858,7 @@ const TemplatePlaceholder = () => {
     setIsModalRole(false);
     setRoleName("");
     setUniqueId(Id);
+    setBlockColor(color[index]);
     setIsSelectId(index);
     setIsMailSend(false);
   };
@@ -870,9 +875,11 @@ const TemplatePlaceholder = () => {
     if (index === signersdata.length - 1) {
       setUniqueId(updateSigner[updateSigner.length - 1]?.Id || "");
       setIsSelectId(index - 1 || 0);
+      setBlockColor(color[index - 1 || 0]);
     } else {
       setUniqueId(updateSigner[index]?.Id || "");
       setIsSelectId(index);
+      setBlockColor(color[index]);
     }
 
     setSignerPos(updatePlaceholderUser);
@@ -1443,6 +1450,10 @@ const TemplatePlaceholder = () => {
                   title={"Roles"}
                   initial={true}
                   isTemplateFlow={true}
+                  sendInOrder={pdfDetails[0].SendinOrder}
+                  setSignersData={setSignersData}
+                  blockColor={blockColor}
+                  setBlockColor={setBlockColor}
                 />
               </div>
             ) : (
@@ -1468,6 +1479,8 @@ const TemplatePlaceholder = () => {
                       title={"Roles"}
                       sendInOrder={pdfDetails[0]?.SendinOrder}
                       setSignersData={setSignersData}
+                      blockColor={blockColor}
+                      setBlockColor={setBlockColor}
                     />
                     <div data-tut="reactourSecond">
                       <WidgetComponent
diff --git a/apps/OpenSign/src/styles/signature.css b/apps/OpenSign/src/styles/signature.css
index c50fa7d8e..dfc877cdb 100644
--- a/apps/OpenSign/src/styles/signature.css
+++ b/apps/OpenSign/src/styles/signature.css
@@ -14,6 +14,9 @@
   justify-content: center;
   border-width: 0.2px;
 }
+.dragCursor{
+      cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAX0lEQVR4nO3WMQrAIAxG4dzaUUfPVQ/2OtWhtFJoTJb/G10eSCAxk4+ABnRLiF56RjQmznM0Ji5ugIG/kRU+/L5G/kLDJbug4ZIMQFlsoJoRr1ujL/GY6O3ibPNBbO0E9P+irqa88kEAAAAASUVORK5CYII="),auto; 
+}
 
 .dropdownContainer {
   display: flex;
@@ -301,7 +304,7 @@
   z-index: 2;
   background: white;
 }
-
+ 
 .signCopy {
   position: absolute;