diff --git a/apps/OpenSign/src/components/pdf/RecipientList.js b/apps/OpenSign/src/components/pdf/RecipientList.js
index b31c907d4..b7c3b69d8 100644
--- a/apps/OpenSign/src/components/pdf/RecipientList.js
+++ b/apps/OpenSign/src/components/pdf/RecipientList.js
@@ -61,15 +61,27 @@ const RecipientList = (props) => {
     );
     //splice method is used to replace or add new value in array at specific index
     remainingItems.splice(index, 0, ...draggedItem);
-
     //set current draggable recipient details,objectId,index,contract_className ... after replace recipient list
-    props.setSignersData(remainingItems);
-    props.setSignerObjId(remainingItems[index]?.objectId || "");
-    props.setIsSelectId(index);
-    props.setContractName(remainingItems[index]?.className || "");
-    props.setUniqueId(remainingItems[index]?.Id);
-    props.setRoleName(remainingItems[index]?.Role);
-    props.setBlockColor(remainingItems[index]?.blockColor);
+    props?.setSignersData(remainingItems);
+    props?.setSignerObjId(remainingItems[index]?.objectId || "");
+    props?.setIsSelectId(index);
+    props?.setContractName(remainingItems[index]?.className || "");
+    props?.setUniqueId(remainingItems[index]?.Id);
+    props?.setRoleName(remainingItems[index]?.Role);
+    props?.setBlockColor(remainingItems[index]?.blockColor);
+
+    //change order of placeholder's list using sorting method
+    //`remainingItems` is correct order of signers after change order
+    const changeOrderSignerList = props?.signerPos.sort((a, b) => {
+      //`indexA` and `indexB` is to get element position using index in correct order array
+      const indexA = remainingItems.findIndex((item) => item.Id === a.Id);
+      const indexB = remainingItems.findIndex((item) => item.Id === b.Id);
+      //and then compare `indexA - indexB` value
+      //if positive it means indexB element comes before indexA then need to sorting
+      //if negative it means indexA element is on correct position do not need to sorting
+      return indexA - indexB;
+    });
+    props?.setSignerPos(changeOrderSignerList);
   };
   return (
     <>
diff --git a/apps/OpenSign/src/components/pdf/TextFontSetting.js b/apps/OpenSign/src/components/pdf/TextFontSetting.js
index 1687513b6..13d5cc5de 100644
--- a/apps/OpenSign/src/components/pdf/TextFontSetting.js
+++ b/apps/OpenSign/src/components/pdf/TextFontSetting.js
@@ -19,7 +19,9 @@ function TextFontSetting(props) {
           <select
             className="ml-[7px] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
             value={
-              props.fontSize || props.currWidgetsDetails?.options?.fontSize
+              props.fontSize ||
+              props.currWidgetsDetails?.options?.fontSize ||
+              "12"
             }
             onChange={(e) => props.setFontSize(e.target.value)}
           >
@@ -35,7 +37,9 @@ function TextFontSetting(props) {
             <span>color: </span>
             <select
               value={
-                props.fontColor || props.currWidgetsDetails?.options?.fontColor
+                props.fontColor ||
+                props.currWidgetsDetails?.options?.fontColor ||
+                "black"
               }
               onChange={(e) => props.setFontColor(e.target.value)}
               className="ml-[7px] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
diff --git a/apps/OpenSign/src/components/pdf/WidgetComponent.js b/apps/OpenSign/src/components/pdf/WidgetComponent.js
index 6b812bbcc..88f9f9818 100644
--- a/apps/OpenSign/src/components/pdf/WidgetComponent.js
+++ b/apps/OpenSign/src/components/pdf/WidgetComponent.js
@@ -37,11 +37,10 @@ function WidgetComponent({
   sendInOrder,
   isTemplateFlow,
   setBlockColor,
-  blockColor,
-  setIsAddSigner
+  setIsAddSigner,
+  blockColor
 }) {
   const [isSignersModal, setIsSignersModal] = useState(false);
-
   const [, dropdown] = useDrag({
     type: "BOX",
     item: {
@@ -187,7 +186,6 @@ function WidgetComponent({
   const isMobile = window.innerWidth < 767;
   const scrollContainerRef = useRef(null);
   const [widget, setWidget] = useState([]);
-
   const color = [
     "#93a3db",
     "#e6c3db",
@@ -245,86 +243,68 @@ function WidgetComponent({
       ? textWidgetData
       : widget;
 
+  const handleSelectRecipient = () => {
+    if (
+      signersdata[isSelectListId]?.Email ||
+      signersdata[isSelectListId]?.Role
+    ) {
+      const userData =
+        signersdata[isSelectListId]?.Name || signersdata[isSelectListId]?.Role;
+      const name =
+        userData?.length > 20 ? `${userData.slice(0, 20)}...` : userData;
+      return name;
+    }
+  };
+
   return (
     <>
       {isMobile ? (
         !isMailSend && (
-          <div
-            id="navbar"
-            className="fixed z-[99] bottom-0 right-0"
-            style={{ width: window.innerWidth + "px" }}
-          >
-            <div className="mx-1">
-              {isSigners && (
-                <div
-                  data-tut="recipientArea"
-                  className="py-[10px] flex justify-center items-center op-card"
-                  style={{
-                    background: blockColor
-                      ? blockColor
-                      : isSelectListId
-                        ? color[isSelectListId % color.length]
-                        : color[0]
-                  }}
-                  onClick={() => handleModal()}
-                >
-                  <span className="text-[13px] font-bold flex items-center">
-                    {title ? title : "Recipient"}
-                    {signersdata[isSelectListId]?.Role && (
-                      <div>
-                        {signersdata[isSelectListId]?.Name ? (
-                          <>
-                            :{" "}
-                            {signersdata[isSelectListId]?.Name?.length > 12
-                              ? `${signersdata[isSelectListId].Name.slice(
-                                  0,
-                                  12
-                                )}...`
-                              : signersdata[isSelectListId]?.Name}
-                          </>
-                        ) : (
-                          <>
-                            :{" "}
-                            {signersdata[isSelectListId]?.Role?.length > 12
-                              ? `${signersdata[isSelectListId].Role.slice(
-                                  0,
-                                  12
-                                )}...`
-                              : signersdata[isSelectListId]?.Role}
-                          </>
-                        )}
-                      </div>
-                    )}
-                    <div className="ml-[6px] text-[16px]">
-                      <i className="fa-light fa-angle-down"></i>
-                    </div>
-                  </span>
-                </div>
-              )}
-            </div>
-            <div className="mx-1">
-              {handleAddSigner ? (
-                <div
-                  data-tut="reactourAddbtn"
-                  className="op-btn op-btn-accent w-full my-[2px]"
-                  onClick={() => handleAddSigner()}
-                >
-                  <i className="fa-light fa-plus"></i>
-                  <span>Add role</span>
-                </div>
-              ) : (
-                setIsAddSigner && (
-                  <div
-                    data-tut="addRecipient"
-                    className="op-btn op-btn-accent w-full my-[2px]"
-                    onClick={() => setIsAddSigner(true)}
+          <div id="navbar" className="fixed z-[99] bottom-0 right-0 w-full">
+            {isSigners && (
+              <div className="w-full mb-[5px] flex justify-center items-center gap-1">
+                <div className="w-full ml-[5px]" onClick={() => handleModal()}>
+                  <select
+                    className="w-full op-select op-select-bordered  pointer-events-none"
+                    value={handleSelectRecipient()}
+                    style={{
+                      backgroundColor: blockColor
+                        ? blockColor
+                        : isSelectListId
+                          ? color[isSelectListId % color.length]
+                          : color[0]
+                    }}
                   >
-                    <i className="fa-light fa-plus"></i>
-                    <span>Add recipients</span>
-                  </div>
-                )
-              )}
-            </div>
+                    <option value={handleSelectRecipient()}>
+                      {handleSelectRecipient()}
+                    </option>
+                  </select>
+                </div>
+
+                <div className="w-[18%]">
+                  {handleAddSigner ? (
+                    <button
+                      data-tut="reactourAddbtn"
+                      onClick={() => handleAddSigner()}
+                      className="op-btn op-btn-accent"
+                    >
+                      <i className="fa-light fa-plus "></i>
+                    </button>
+                  ) : (
+                    setIsAddSigner && (
+                      <button
+                        data-tut="addRecipient"
+                        onClick={() => setIsAddSigner(true)}
+                        className="op-btn op-btn-accent"
+                      >
+                        <i className="fa-light fa-plus"></i>
+                      </button>
+                    )
+                  )}
+                </div>
+              </div>
+            )}
+
             <div
               data-tut="addWidgets"
               ref={scrollContainerRef}
diff --git a/apps/OpenSign/src/pages/ChangePassword.js b/apps/OpenSign/src/pages/ChangePassword.js
index b618c479d..41da9ed18 100644
--- a/apps/OpenSign/src/pages/ChangePassword.js
+++ b/apps/OpenSign/src/pages/ChangePassword.js
@@ -22,6 +22,10 @@ function ChangePassword() {
                 user
                   .save()
                   .then(() => {
+                    let _user = user.toJSON();
+                    if (_user) {
+                      localStorage.setItem("accesstoken", _user.sessionToken);
+                    }
                     alert("Password updated successfully.");
                   })
                   .catch((error) => {
@@ -32,7 +36,6 @@ function ChangePassword() {
             } else {
               alert("Your current password is missing or incorrect.");
             }
-            console.log("Logged in user", user);
           })
           .catch((error) => {
             alert("Your current password is missing or incorrect.");
diff --git a/apps/OpenSign/src/pages/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js
index e550a00de..8ebb2e0f2 100644
--- a/apps/OpenSign/src/pages/PlaceHolderSign.js
+++ b/apps/OpenSign/src/pages/PlaceHolderSign.js
@@ -454,7 +454,6 @@ function PlaceHolderSign() {
   const addPositionOfSignature = (item, monitor) => {
     getSignerPos(item, monitor);
   };
-  // console.log("signerpos", signerPos);
   const getSignerPos = (item, monitor) => {
     //  setSignerObjId("");
     // setContractName("");
@@ -634,6 +633,8 @@ function PlaceHolderSign() {
           setShowDropdown(true);
         } else if (dragTypeValue === "checkbox") {
           setIsCheckbox(true);
+        } else if (dragTypeValue === radioButtonWidget) {
+          setIsRadio(true);
         } else if (
           [
             textInputWidget,
@@ -646,8 +647,6 @@ function PlaceHolderSign() {
         ) {
           setFontSize(12);
           setFontColor("black");
-        } else if (dragTypeValue === radioButtonWidget) {
-          setIsRadio(true);
         }
         setWidgetType(dragTypeValue);
         setSignKey(key);
@@ -751,7 +750,6 @@ function PlaceHolderSign() {
       setIsDragging(false);
     }, 200);
   };
-
   //function for delete signature block
   const handleDeleteSign = (key, Id) => {
     const updateData = [];
@@ -1708,8 +1706,10 @@ function PlaceHolderSign() {
               ...position,
               options: {
                 ...position.options,
-                fontSize: fontSize,
-                fontColor: fontColor
+                fontSize:
+                  fontSize || currWidgetsDetails?.options?.fontSize || "12",
+                fontColor:
+                  fontColor || currWidgetsDetails?.options?.fontColor || "black"
               }
             };
           }
@@ -2151,6 +2151,7 @@ function PlaceHolderSign() {
                         aria-disabled
                       >
                         <SignerListPlace
+                          setSignerPos={setSignerPos}
                           signerPos={signerPos}
                           signersdata={signersdata}
                           isSelectListId={isSelectListId}
diff --git a/apps/OpenSign/src/pages/TemplatePlaceholder.js b/apps/OpenSign/src/pages/TemplatePlaceholder.js
index c120747b4..022462887 100644
--- a/apps/OpenSign/src/pages/TemplatePlaceholder.js
+++ b/apps/OpenSign/src/pages/TemplatePlaceholder.js
@@ -389,7 +389,6 @@ const TemplatePlaceholder = () => {
               (dragTypeValue === "stamp" || dragTypeValue === "image") && true,
             key: key,
             scale: containerScale,
-            // isMobile: isMobile,
             zIndex: posZIndex,
             type: dragTypeValue,
             options: addWidgetOptions(dragTypeValue),
@@ -501,6 +500,8 @@ const TemplatePlaceholder = () => {
           setShowDropdown(true);
         } else if (dragTypeValue === "checkbox") {
           setIsCheckbox(true);
+        } else if (dragTypeValue === radioButtonWidget) {
+          setIsRadio(true);
         } else if (
           [textInputWidget, "name", "company", "job title", "email"].includes(
             dragTypeValue
@@ -508,8 +509,6 @@ const TemplatePlaceholder = () => {
         ) {
           setFontSize(12);
           setFontColor("black");
-        } else if (dragTypeValue === radioButtonWidget) {
-          setIsRadio(true);
         }
         setCurrWidgetsDetails({});
         setWidgetType(dragTypeValue);
@@ -1248,7 +1247,6 @@ const TemplatePlaceholder = () => {
     setIsRadio(false);
     setIsCheckbox(false);
   };
-
   const handleSaveFontSize = () => {
     const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
     if (filterSignerPos.length > 0) {
@@ -1267,8 +1265,10 @@ const TemplatePlaceholder = () => {
               ...position,
               options: {
                 ...position.options,
-                fontSize: fontSize,
-                fontColor: fontColor
+                fontSize:
+                  fontSize || currWidgetsDetails?.options?.fontSize || "12",
+                fontColor:
+                  fontColor || currWidgetsDetails?.options?.fontColor || "black"
               }
             };
           }
@@ -1591,6 +1591,7 @@ const TemplatePlaceholder = () => {
                     <SignerListPlace
                       isMailSend={isMailSend}
                       signerPos={signerPos}
+                      setSignerPos={setSignerPos}
                       signersdata={signersdata}
                       isSelectListId={isSelectListId}
                       setSignerObjId={setSignerObjId}