diff --git a/apps/OpenSign/public/locales/de/translation.json b/apps/OpenSign/public/locales/de/translation.json
index aa051eb6d..6239ac2fc 100644
--- a/apps/OpenSign/public/locales/de/translation.json
+++ b/apps/OpenSign/public/locales/de/translation.json
@@ -833,5 +833,6 @@
   "variables-use": "Zu verwendende Variablen",
   "send-to-sign": "hat Sie gebeten zu unterschreiben",
   "use-template": "Vorlage verwenden",
-  "contact-already-exists": "Der Kontakt existiert bereits."
+  "contact-already-exists": "Der Kontakt existiert bereits.",
+  "agreement-note": "Hinweis: Durch Ihre Zustimmung unterzeichnen Sie das Dokument nicht sofort. Sie können das Dokument nur elektronisch einsehen. Sie haben die Möglichkeit, es vollständig zu lesen und anschließend zu entscheiden, ob Sie es unterzeichnen möchten."
 }
diff --git a/apps/OpenSign/public/locales/en/translation.json b/apps/OpenSign/public/locales/en/translation.json
index af5cf83c1..f134ba812 100644
--- a/apps/OpenSign/public/locales/en/translation.json
+++ b/apps/OpenSign/public/locales/en/translation.json
@@ -834,5 +834,6 @@
   "variables-use": "Variables to use",
   "send-to-sign": "has requested you to sign",
   "use-template": "Use Template",
-  "contact-already-exists": "contact already exists."
+  "contact-already-exists": "contact already exists.",
+  "agreement-note": "Note:  Agreeing to this does not mean you are signing the document immediately. This only allows you to review the document electronically. You will have the opportunity to read it in full and decide whether to sign it afterward."
 }
diff --git a/apps/OpenSign/public/locales/es/translation.json b/apps/OpenSign/public/locales/es/translation.json
index 6a5618946..c5a99c95e 100644
--- a/apps/OpenSign/public/locales/es/translation.json
+++ b/apps/OpenSign/public/locales/es/translation.json
@@ -834,5 +834,6 @@
   "variables-use": "Variables para usar",
   "send-to-sign": "le ha solicitado que firme",
   "use-template": "Usar plantilla",
-  "contact-already-exists": "El contacto ya existe."
+  "contact-already-exists": "El contacto ya existe.",
+  "agreement-note": "Nota: Aceptar esto no significa que esté firmando el documento de inmediato. Esto solo le permite revisar el documento electrónicamente. Tendrá la oportunidad de leerlo en su totalidad y decidir si desea firmarlo después."
 }
diff --git a/apps/OpenSign/public/locales/fr/translation.json b/apps/OpenSign/public/locales/fr/translation.json
index cc8789a2a..a2b26b899 100644
--- a/apps/OpenSign/public/locales/fr/translation.json
+++ b/apps/OpenSign/public/locales/fr/translation.json
@@ -833,5 +833,7 @@
   "variables-use": "Variables à utiliser",
   "send-to-sign": "vous a demandé de signer",
   "use-template": "Utiliser le modèle",
-  "contact-already-exists": "Le contact existe déjà."
+  "contact-already-exists": "Le contact existe déjà.",
+  "agreement-note": "Remarque : Accepter cela ne signifie pas que vous signez immédiatement le document. Cela vous permet uniquement de consulter le document électroniquement. Vous aurez l'opportunité de le lire entièrement et de décider ensuite si vous souhaitez le signer."
+
 }
diff --git a/apps/OpenSign/public/locales/it/translation.json b/apps/OpenSign/public/locales/it/translation.json
index 5ce99f02a..5a54adb38 100644
--- a/apps/OpenSign/public/locales/it/translation.json
+++ b/apps/OpenSign/public/locales/it/translation.json
@@ -833,5 +833,6 @@
   "variables-use": "Variabili da utilizzare",
   "send-to-sign": "ha richiesto la tua firma",
   "use-template": "Usa modello",
-  "contact-already-exists": "Il contatto esiste già."
+  "contact-already-exists": "Il contatto esiste già.",
+  "agreement-note": "Nota: Accettare questo non significa che stai firmando immediatamente il documento. Questo ti consente solo di esaminare il documento elettronicamente. Avrai l'opportunità di leggerlo per intero e decidere successivamente se firmarlo."
 }
diff --git a/apps/OpenSign/src/components/pdf/AgreementSign.js b/apps/OpenSign/src/components/pdf/AgreementSign.js
index 36f9715c9..31e70c0fa 100644
--- a/apps/OpenSign/src/components/pdf/AgreementSign.js
+++ b/apps/OpenSign/src/components/pdf/AgreementSign.js
@@ -54,6 +54,9 @@ function AgreementSign(props) {
               {t("agrre-button")}
             </button>
           </div>
+          <div className="mt-2">
+            <span className="text-[11px]">{t("agreement-note")}</span>
+          </div>
         </div>
       </div>
       {isShowAgreeTerms && (
diff --git a/apps/OpenSign/src/components/pdf/Placeholder.js b/apps/OpenSign/src/components/pdf/Placeholder.js
index 5e800a330..5c532cd15 100644
--- a/apps/OpenSign/src/components/pdf/Placeholder.js
+++ b/apps/OpenSign/src/components/pdf/Placeholder.js
@@ -125,10 +125,7 @@ function Placeholder(props) {
   const [clickonWidget, setClickonWidget] = useState({});
   const [startDate, setStartDate] = useState(
     props.pos.type === "date" &&
-      getDefaultdate(
-        props?.pos?.options?.response,
-        props.pos?.options?.validation?.format
-      )
+      getDefaultdate(new Date(), props.pos?.options?.validation?.format)
   );
   const [getCheckboxRenderWidth, setGetCheckboxRenderWidth] = useState({
     width: null,
@@ -808,8 +805,10 @@ function Placeholder(props) {
     else if (props.isPlaceholder && ![textWidget].includes(props.pos.type)) {
       return false;
     } //dragging depend on 'isDraggingEnabled' variable in self sign and signyourself flow
-    else {
+    else if (isTouchDevice) {
       return !isDraggingEnabled;
+    } else {
+      return false;
     }
   };
   //function to handle widget background color
@@ -868,183 +867,93 @@ function Placeholder(props) {
       }
     }, 1000); // Hold for 1 second before vibrating
   };
+  const fontSize = calculateFont(props.pos.options?.fontSize);
+  const fontColor = props.pos.options?.fontColor || "black";
   return (
     <>
-      <Rnd
-        id={props.pos.key}
-        data-tut={props.pos.key === props.unSignedWidgetId ? "IsSigned" : ""}
-        key={props.pos.key}
-        lockAspectRatio={
-          !props.isFreeResize &&
-          ![
-            textWidget,
-            "email",
-            "name",
-            "company",
-            "job title",
-            textInputWidget
-          ].includes(props.pos.type) &&
-          (props.pos.Width
-            ? props.pos.Width / props.pos.Height
-            : defaultWidthHeight(props.pos.type).width /
-              defaultWidthHeight(props.pos.type).height)
-        }
-        enableResizing={{
-          top: false,
-          right: false,
-          bottom: false,
-          left: false,
-          topRight: false,
-          bottomRight:
-            props.data && props.isNeedSign
-              ? props.data?.signerObjId === props.signerObjId &&
-                props.pos.type !== "checkbox" &&
-                props.pos.type !== radioButtonWidget
-                ? true
-                : false
-              : props.pos.type !== radioButtonWidget &&
-                props.pos.type !== "checkbox" &&
-                props.pos.key === props.selectWidgetId &&
-                true,
-          bottomLeft: false,
-          topLeft: false
-        }}
-        bounds="parent"
-        className="signYourselfBlock"
-        style={{
-          border: "1px solid #007bff",
-          borderRadius: "2px",
-          cursor: getCursor(),
-          zIndex:
-            props.pos.type === "date"
-              ? props.pos.key === props.selectWidgetId
-                ? 99 + 1
-                : 99
-              : props?.pos?.zIndex
-                ? props.pos.zIndex
-                : "5",
-          opacity:
-            props.isNeedSign && props.data?.Id !== props?.uniqueId && "0.4",
-          background: handleBackground()
-        }}
-        onDrag={() => {
-          setDraggingEnabled(true);
-          props.handleTabDrag && props.handleTabDrag(props.pos.key);
-        }}
-        size={{
-          width:
-            props.pos.type === radioButtonWidget ||
-            props.pos.type === "checkbox"
-              ? "auto"
-              : props.posWidth(props.pos, props.isSignYourself),
-          height:
-            props.pos.type === radioButtonWidget ||
-            props.pos.type === "checkbox"
-              ? "auto"
-              : props.posHeight(props.pos, props.isSignYourself)
-        }}
-        minHeight={calculateFont(props.pos.options?.fontSize, true)}
-        maxHeight="auto"
-        onResizeStart={() => {
-          setDraggingEnabled(true);
-          props.setIsResize && props.setIsResize(true);
-        }}
-        onResizeStop={(e, direction, ref) => {
-          setTimeout(() => {
-            props.setIsResize && props.setIsResize(false);
-          }, 50);
-          props.handleSignYourselfImageResize &&
-            props.handleSignYourselfImageResize(
-              ref,
-              props.pos.key,
-              props.xyPosition,
-              props.setXyPosition,
-              props.index,
-              containerScale,
-              props.scale,
-              props.data && props.data.Id,
-              props.isResize
-            );
-        }}
-        disableDragging={handleDragging()}
-        onDragStop={(event, dragElement) => {
-          setIsDisableDragging(true);
-          props.handleStop &&
-            props.handleStop(
-              event,
-              dragElement,
-              props.data?.Id,
-              props.pos?.key
-            );
-        }}
-        position={{
-          x: xPos(props.pos, props.isSignYourself),
-          y: yPos(props.pos, props.isSignYourself)
-        }}
-        onResize={(e, direction, ref) => {
-          setPlaceholderBorder({
-            w: ref.offsetWidth / (props.scale * containerScale),
-            h: ref.offsetHeight / (props.scale * containerScale)
-          });
-        }}
-        // onClick={() =>
-        //   !props.isResize && !isMobile && handleOnClickPlaceholder()
-        // }
-      >
-        {props.pos.key === props.selectWidgetId &&
-        ((props.isShowBorder &&
-          ![radioButtonWidget, "checkbox"].includes(props.pos.type)) ||
-          (props?.isAlllowModify &&
-            !props?.assignedWidgetId.includes(props.pos.key))) ? (
-          <BorderResize
-            right={-12}
-            top={-11}
-            pos={props.pos}
-            posHeight={props.posHeight}
-            isSignYourself={props.isSignYourself || props.isSelfSign}
-          />
-        ) : props.data && props.isNeedSign && props.pos.type !== "checkbox" ? (
-          props.data?.signerObjId === props.signerObjId &&
-          ![radioButtonWidget, "checkbox"].includes(props.pos.type) ? (
-            <BorderResize
-              posHeight={props.posHeight}
-              isSignYourself={props.isSignYourself || props.isSelfSign}
-              pos={props.pos}
-            />
-          ) : (
-            <></>
-          )
-        ) : (
-          ![radioButtonWidget, "checkbox"].includes(props.pos.type) &&
-          props.pos.key === props.selectWidgetId && <BorderResize />
-        )}
-
-        {/* 1- Show a border if props.pos.key === props.selectWidgetId, indicating the current user's selected widget.
-            2- If props.isShowBorder is true, display borders for all widgets. 
-            3- Use the combination of props?.isAlllowModify and !props?.assignedWidgetId.includes(props.pos.key) to determine when to show borders:
-               1- When isAlllowModify is true, show borders.
-               2- Do not display border for widgets already assigned (props.assignedWidgetId.includes(props.pos.key) is true).
-    */}
-        {props.pos.key === props.selectWidgetId &&
-          (props.isShowBorder ||
-            !isDisableDragging ||
-            (props?.isAlllowModify &&
-              !props?.assignedWidgetId.includes(props.pos.key))) && (
-            <PlaceholderBorder
-              setDraggingEnabled={setDraggingEnabled}
-              pos={props.pos}
-              isPlaceholder={props.isPlaceholder}
-              getCheckboxRenderWidth={getCheckboxRenderWidth}
-              scale={props.scale}
-              containerScale={containerScale}
-              placeholderBorder={placeholderBorder}
-            />
-          )}
-        <div
-          className="flex items-stretch justify-center"
+      {/*  Check if a text widget (prefill type) exists. Once the user enters a value and clicks outside or the widget becomes non-selectable, it should appear as plain text (just like embedded text in a document). When the user clicks on the text again, it should become editable. */}
+      {props.pos?.options?.response &&
+      props.pos.key !== props.selectWidgetId &&
+      props.pos.type === textWidget ? (
+        <span
+          onClick={() => {
+            props.setSelectWidgetId && props.setSelectWidgetId(props.pos.key);
+          }}
           style={{
+            fontFamily: "Arial, sans-serif",
+            position: "absolute",
             left: xPos(props.pos, props.isSignYourself),
             top: yPos(props.pos, props.isSignYourself),
+            fontSize: fontSize,
+            color: fontColor,
+            zIndex: 99
+          }}
+        >
+          {props.pos?.options?.response}
+        </span>
+      ) : (
+        <Rnd
+          id={props.pos.key}
+          data-tut={props.pos.key === props.unSignedWidgetId ? "IsSigned" : ""}
+          key={props.pos.key}
+          lockAspectRatio={
+            !props.isFreeResize &&
+            ![
+              textWidget,
+              "email",
+              "name",
+              "company",
+              "job title",
+              textInputWidget
+            ].includes(props.pos.type) &&
+            (props.pos.Width
+              ? props.pos.Width / props.pos.Height
+              : defaultWidthHeight(props.pos.type).width /
+                defaultWidthHeight(props.pos.type).height)
+          }
+          enableResizing={{
+            top: false,
+            right: false,
+            bottom: false,
+            left: false,
+            topRight: false,
+            bottomRight:
+              props.data && props.isNeedSign
+                ? props.data?.signerObjId === props.signerObjId &&
+                  props.pos.type !== "checkbox" &&
+                  props.pos.type !== radioButtonWidget
+                  ? true
+                  : false
+                : props.pos.type !== radioButtonWidget &&
+                  props.pos.type !== "checkbox" &&
+                  props.pos.key === props.selectWidgetId &&
+                  true,
+            bottomLeft: false,
+            topLeft: false
+          }}
+          bounds="parent"
+          className="signYourselfBlock"
+          style={{
+            border: "1px solid #007bff",
+            borderRadius: "2px",
+            cursor: getCursor(),
+            zIndex:
+              props.pos.type === "date"
+                ? props.pos.key === props.selectWidgetId
+                  ? 99 + 1
+                  : 99
+                : props?.pos?.zIndex
+                  ? props.pos.zIndex
+                  : "5",
+            opacity:
+              props.isNeedSign && props.data?.Id !== props?.uniqueId && "0.4",
+            background: handleBackground()
+          }}
+          onDrag={() => {
+            setDraggingEnabled(true);
+            props.handleTabDrag && props.handleTabDrag(props.pos.key);
+          }}
+          size={{
             width:
               props.pos.type === radioButtonWidget ||
               props.pos.type === "checkbox"
@@ -1054,40 +963,157 @@ function Placeholder(props) {
               props.pos.type === radioButtonWidget ||
               props.pos.type === "checkbox"
                 ? "auto"
-                : props.posHeight(props.pos, props.isSignYourself),
-            zIndex: "10"
+                : props.posHeight(props.pos, props.isSignYourself)
           }}
-          onTouchEnd={() => handleTouchEnd()}
-          onClick={() => handleOnClickPlaceholder()}
-          onTouchStart={() => handleTouchStart()}
+          minHeight={calculateFont(props.pos.options?.fontSize, true)}
+          maxHeight="auto"
+          onResizeStart={() => {
+            setDraggingEnabled(true);
+            props.setIsResize && props.setIsResize(true);
+          }}
+          onResizeStop={(e, direction, ref) => {
+            setTimeout(() => {
+              props.setIsResize && props.setIsResize(false);
+            }, 50);
+            props.handleSignYourselfImageResize &&
+              props.handleSignYourselfImageResize(
+                ref,
+                props.pos.key,
+                props.xyPosition,
+                props.setXyPosition,
+                props.index,
+                containerScale,
+                props.scale,
+                props.data && props.data.Id,
+                props.isResize
+              );
+          }}
+          disableDragging={handleDragging()}
+          onDragStop={(event, dragElement) => {
+            setIsDisableDragging(true);
+            props.handleStop &&
+              props.handleStop(
+                event,
+                dragElement,
+                props.data?.Id,
+                props.pos?.key
+              );
+          }}
+          position={{
+            x: xPos(props.pos, props.isSignYourself),
+            y: yPos(props.pos, props.isSignYourself)
+          }}
+          onResize={(e, direction, ref) => {
+            setPlaceholderBorder({
+              w: ref.offsetWidth / (props.scale * containerScale),
+              h: ref.offsetHeight / (props.scale * containerScale)
+            });
+          }}
+          // onClick={() =>
+          //   !props.isResize && !isMobile && handleOnClickPlaceholder()
+          // }
         >
-          {props.pos.key === props.selectWidgetId && <PlaceholderIcon />}
-          <PlaceholderType
-            pos={props.pos}
-            xyPosition={props.xyPosition}
-            index={props.index}
-            setXyPosition={props.setXyPosition}
-            data={props.data}
-            setSignKey={props.setSignKey}
-            isShowDropdown={props?.isShowDropdown}
-            isPlaceholder={props.isPlaceholder}
-            isSignYourself={props.isSignYourself}
-            isSelfSign={props.isSelfSign}
-            signerObjId={props.signerObjId}
-            handleUserName={props.handleUserName}
-            pdfDetails={props?.pdfDetails && props?.pdfDetails[0]}
-            isNeedSign={props.isNeedSign}
-            setSelectDate={setSelectDate}
-            selectDate={selectDate}
-            setValidateAlert={props.setValidateAlert}
-            setStartDate={setStartDate}
-            startDate={startDate}
-            handleSaveDate={handleSaveDate}
-            xPos={props.xPos}
-            calculateFont={calculateFont}
-          />
-        </div>
-      </Rnd>
+          {props.pos.key === props.selectWidgetId &&
+          ((props.isShowBorder &&
+            ![radioButtonWidget, "checkbox"].includes(props.pos.type)) ||
+            (props?.isAlllowModify &&
+              !props?.assignedWidgetId.includes(props.pos.key))) ? (
+            <BorderResize
+              right={-12}
+              top={-11}
+              pos={props.pos}
+              posHeight={props.posHeight}
+              isSignYourself={props.isSignYourself || props.isSelfSign}
+            />
+          ) : props.data &&
+            props.isNeedSign &&
+            props.pos.type !== "checkbox" ? (
+            props.data?.signerObjId === props.signerObjId &&
+            ![radioButtonWidget, "checkbox"].includes(props.pos.type) ? (
+              <BorderResize
+                posHeight={props.posHeight}
+                isSignYourself={props.isSignYourself || props.isSelfSign}
+                pos={props.pos}
+              />
+            ) : (
+              <></>
+            )
+          ) : (
+            ![radioButtonWidget, "checkbox"].includes(props.pos.type) &&
+            props.pos.key === props.selectWidgetId && <BorderResize />
+          )}
+
+          {/* 1- Show a border if props.pos.key === props.selectWidgetId, indicating the current user's selected widget.
+            2- If props.isShowBorder is true, display borders for all widgets. 
+            3- Use the combination of props?.isAlllowModify and !props?.assignedWidgetId.includes(props.pos.key) to determine when to show borders:
+               1- When isAlllowModify is true, show borders.
+               2- Do not display border for widgets already assigned (props.assignedWidgetId.includes(props.pos.key) is true).
+    */}
+          {props.pos.key === props.selectWidgetId &&
+            (props.isShowBorder ||
+              !isDisableDragging ||
+              (props?.isAlllowModify &&
+                !props?.assignedWidgetId.includes(props.pos.key))) && (
+              <PlaceholderBorder
+                setDraggingEnabled={setDraggingEnabled}
+                pos={props.pos}
+                isPlaceholder={props.isPlaceholder}
+                getCheckboxRenderWidth={getCheckboxRenderWidth}
+                scale={props.scale}
+                containerScale={containerScale}
+                placeholderBorder={placeholderBorder}
+              />
+            )}
+          <div
+            className="flex items-stretch justify-center"
+            style={{
+              left: xPos(props.pos, props.isSignYourself),
+              top: yPos(props.pos, props.isSignYourself),
+              width:
+                props.pos.type === radioButtonWidget ||
+                props.pos.type === "checkbox"
+                  ? "auto"
+                  : props.posWidth(props.pos, props.isSignYourself),
+              height:
+                props.pos.type === radioButtonWidget ||
+                props.pos.type === "checkbox"
+                  ? "auto"
+                  : props.posHeight(props.pos, props.isSignYourself),
+              zIndex: "10"
+            }}
+            onTouchEnd={() => handleTouchEnd()}
+            onClick={() => handleOnClickPlaceholder()}
+            onTouchStart={() => handleTouchStart()}
+          >
+            {props.pos.key === props.selectWidgetId && <PlaceholderIcon />}
+            <PlaceholderType
+              pos={props.pos}
+              xyPosition={props.xyPosition}
+              index={props.index}
+              setXyPosition={props.setXyPosition}
+              data={props.data}
+              setSignKey={props.setSignKey}
+              isShowDropdown={props?.isShowDropdown}
+              isPlaceholder={props.isPlaceholder}
+              isSignYourself={props.isSignYourself}
+              isSelfSign={props.isSelfSign}
+              signerObjId={props.signerObjId}
+              handleUserName={props.handleUserName}
+              pdfDetails={props?.pdfDetails && props?.pdfDetails[0]}
+              isNeedSign={props.isNeedSign}
+              setSelectDate={setSelectDate}
+              selectDate={selectDate}
+              setValidateAlert={props.setValidateAlert}
+              setStartDate={setStartDate}
+              startDate={startDate}
+              handleSaveDate={handleSaveDate}
+              xPos={props.xPos}
+              calculateFont={calculateFont}
+            />
+          </div>
+        </Rnd>
+      )}
+
       <ModalUi isOpen={isDateModal} title={t("widget-info")} showClose={false}>
         <div className="h-[100%] p-[20px]">
           <div className="flex flex-row items-center">
diff --git a/apps/OpenSign/src/components/pdf/PlaceholderType.js b/apps/OpenSign/src/components/pdf/PlaceholderType.js
index cacec7a61..788c17d52 100644
--- a/apps/OpenSign/src/components/pdf/PlaceholderType.js
+++ b/apps/OpenSign/src/components/pdf/PlaceholderType.js
@@ -513,10 +513,14 @@ function PlaceholderType(props) {
           })}
         </select>
       ) : (
-        <div style={textWidgetStyle} className="select-none-cls">
+        <div
+          style={textWidgetStyle}
+          className="select-none-cls flex justify-between items-center"
+        >
           {props.pos?.options?.name
             ? props.pos.options.name
             : widgetTypeTraslation}
+          <i className="fa-light fa-circle-chevron-down mr-1 "></i>
         </div>
       );
     case "initials":
@@ -672,12 +676,7 @@ function PlaceholderType(props) {
           onBlur={handleInputBlur}
           closeOnScroll={true}
           className={`${selectWidgetCls} outline-[#007bff]`}
-          selected={
-            props?.startDate
-              ? props?.startDate
-              : props.pos.options?.response &&
-                new Date(props.pos.options.response)
-          }
+          selected={props?.startDate}
           onChange={(date) => handleOnDateChange(date)}
           popperPlacement="top-end"
           customInput={<ExampleCustomInput />}
diff --git a/apps/OpenSign/src/components/pdf/TextFontSetting.js b/apps/OpenSign/src/components/pdf/TextFontSetting.js
index 23ed8dc64..d13a95c23 100644
--- a/apps/OpenSign/src/components/pdf/TextFontSetting.js
+++ b/apps/OpenSign/src/components/pdf/TextFontSetting.js
@@ -14,53 +14,53 @@ function TextFontSetting(props) {
       handleClose={() => props.setIsTextSetting(false)}
     >
       <div className="h-full p-[20px]">
-        <div className="flex items-center">
-          <span>{t("font-size")} :</span>
-          <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 ||
-              12
-            }
-            onChange={(e) => {
-              props.setFontSize(parseInt(e.target.value));
-            }}
-          >
-            {fontsizeArr.map((size, ind) => {
-              return (
-                <option className="text-[13px]" value={size} key={ind}>
+        <div className="flex flex-col md:flex-row md:items-center gap-3">
+          {/* Font Size Selector */}
+          <div className="flex items-center gap-2">
+            <span className="whitespace-nowrap">{t("font-size")}:</span>
+            <select
+              className="ml-[7px] w-[60%] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
+              value={
+                props.fontSize ||
+                props.currWidgetsDetails?.options?.fontSize ||
+                12
+              }
+              onChange={(e) => props.setFontSize(parseInt(e.target.value))}
+            >
+              {fontsizeArr.map((size, ind) => (
+                <option key={ind} className="text-[13px]" value={size}>
                   {size}
                 </option>
-              );
-            })}
-          </select>
-          <div className="flex flex-row gap-1 items-center ml-4">
-            <span>{t("color")}: </span>
+              ))}
+            </select>
+          </div>
+          {/* Font Color Selector */}
+          <div className="flex items-center">
+            <span className="whitespace-nowrap">{t("color")}:</span>
             <select
+              className="ml-[33px] md:ml-4 w-[65%] md:w-[full] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
               value={
                 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"
             >
-              {fontColorArr.map((color, ind) => {
-                return (
-                  <option value={color} key={ind}>
-                    {t(`color-type.${color}`)}
-                  </option>
-                );
-              })}
+              {fontColorArr.map((color, ind) => (
+                <option key={ind} value={color}>
+                  {t(`color-type.${color}`)}
+                </option>
+              ))}
             </select>
+            {/* Color Preview Box */}
             <span
+              className="w-5 h-5 ml-2 rounded border border-gray-300"
               style={{
-                background:
+                backgroundColor:
                   props.fontColor ||
-                  props.currWidgetsDetails?.options?.fontColor
+                  props.currWidgetsDetails?.options?.fontColor ||
+                  "black"
               }}
-              className="w-5 h-[19px] ml-1"
             ></span>
           </div>
         </div>
diff --git a/apps/OpenSign/src/components/pdf/WidgetNameModal.js b/apps/OpenSign/src/components/pdf/WidgetNameModal.js
index 96bdf0dda..eed114125 100644
--- a/apps/OpenSign/src/components/pdf/WidgetNameModal.js
+++ b/apps/OpenSign/src/components/pdf/WidgetNameModal.js
@@ -293,24 +293,26 @@ const WidgetNameModal = (props) => {
           "job title",
           "email"
         ].includes(props.defaultdata?.type) && (
-          <div className="flex items-center mb-[0.75rem]">
-            <span>{t("font-size")}:</span>
-            <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.defaultdata?.options?.fontSize || 12
-              }
-              onChange={(e) => props.setFontSize(parseInt(e.target.value))}
-            >
-              {fontsizeArr.map((size, ind) => {
-                return (
-                  <option className="text-[13px]" value={size} key={ind}>
-                    {size}
-                  </option>
-                );
-              })}
-            </select>
-            <div className="flex flex-row gap-1 items-center ml-4">
+          <div className="flex flex-col md:flex-row md:items-center gap-3 mb-3">
+            <div className="flex items-center gap-2 ">
+              <span>{t("font-size")}:</span>
+              <select
+                className="ml-[7px] w-[60%] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
+                value={
+                  props.fontSize || props.defaultdata?.options?.fontSize || 12
+                }
+                onChange={(e) => props.setFontSize(parseInt(e.target.value))}
+              >
+                {fontsizeArr.map((size, ind) => {
+                  return (
+                    <option className="text-[13px]" value={size} key={ind}>
+                      {size}
+                    </option>
+                  );
+                })}
+              </select>
+            </div>
+            <div className="flex items-center">
               <span>{t("color")}: </span>
               <select
                 value={
@@ -319,7 +321,7 @@ const WidgetNameModal = (props) => {
                   "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"
+                className="ml-[33px] md:ml-4 w-[65%] md:w-[full] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
               >
                 {fontColorArr.map((color, ind) => {
                   return (
diff --git a/apps/OpenSign/src/pages/Form.js b/apps/OpenSign/src/pages/Form.js
index fcc296d9d..dfde2bb21 100644
--- a/apps/OpenSign/src/pages/Form.js
+++ b/apps/OpenSign/src/pages/Form.js
@@ -448,11 +448,6 @@ const Forms = (props) => {
           });
           setFileUpload("");
           setpercentage(0);
-          setIsAlert((obj) => ({
-            ...obj,
-            type: "success",
-            message: `${props.msgVar} created successfully!`
-          }));
           navigate(`/${props?.redirectRoute}/${res.id}`);
         }
       } catch (err) {
diff --git a/apps/OpenSign/src/pages/PdfRequestFiles.js b/apps/OpenSign/src/pages/PdfRequestFiles.js
index 6b432c93c..652ef7b0b 100644
--- a/apps/OpenSign/src/pages/PdfRequestFiles.js
+++ b/apps/OpenSign/src/pages/PdfRequestFiles.js
@@ -453,35 +453,9 @@ function PdfRequestFiles(
           setRequestSignTour(true);
         } else {
           const isEnableOTP = documentData?.[0]?.IsEnableOTP || false;
-          if (!isEnableOTP) {
-            try {
-              const resContact = await axios.post(
-                `${localStorage.getItem("baseUrl")}functions/getcontact`,
-                { contactId: currUserId },
-                {
-                  headers: {
-                    "Content-Type": "application/json",
-                    "X-Parse-Application-Id": localStorage.getItem("parseAppId")
-                  }
-                }
-              );
-              const contact = resContact?.data?.result;
-              setContractName("_Contactbook");
-              setSignerUserId(contact?.objectId);
-              const tourData = contact?.TourStatus && contact?.TourStatus;
-              if (tourData && tourData.length > 0) {
-                const checkTourRequest =
-                  tourData?.some((data) => data?.requestSign) || false;
-                setTourStatus(tourData);
-                setRequestSignTour(checkTourRequest);
-              } else {
-                setRequestSignTour(false);
-              }
-            } catch (err) {
-              console.log("err while getting tourstatus", err);
-            }
-          } else {
-            //else condition to check current user exist in contracts_Users class and check tour message status
+          const sessionToken = localStorage.getItem("accesstoken");
+          if (sessionToken) {
+            //condition to check current user exist in contracts_Users class and check tour message status
             //if not then check user exist in contracts_Contactbook class and check tour message status
             const res = await contractUsers();
             if (res === "Error: Something went wrong!") {
@@ -538,6 +512,33 @@ function PdfRequestFiles(
                 setHandleError(t("user-not-exist"));
               }
             }
+          } else if (!isEnableOTP) {
+            try {
+              const resContact = await axios.post(
+                `${localStorage.getItem("baseUrl")}functions/getcontact`,
+                { contactId: currUserId },
+                {
+                  headers: {
+                    "Content-Type": "application/json",
+                    "X-Parse-Application-Id": localStorage.getItem("parseAppId")
+                  }
+                }
+              );
+              const contact = resContact?.data?.result;
+              setContractName("_Contactbook");
+              setSignerUserId(contact?.objectId);
+              const tourData = contact?.TourStatus && contact?.TourStatus;
+              if (tourData && tourData.length > 0) {
+                const checkTourRequest =
+                  tourData?.some((data) => data?.requestSign) || false;
+                setTourStatus(tourData);
+                setRequestSignTour(checkTourRequest);
+              } else {
+                setRequestSignTour(false);
+              }
+            } catch (err) {
+              console.log("err while getting tourstatus", err);
+            }
           }
         }
         setIsUiLoading(false);
diff --git a/apps/OpenSign/src/pages/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js
index 98d45071e..6d70ce351 100644
--- a/apps/OpenSign/src/pages/PlaceHolderSign.js
+++ b/apps/OpenSign/src/pages/PlaceHolderSign.js
@@ -246,12 +246,15 @@ function PlaceHolderSign() {
     if (documentData && documentData.length > 0) {
       if (documentData[0]?.Placeholders?.length > 0) {
         const signerNotExist = documentData[0]?.Placeholders.some(
-          (data) => !data.signerObjId
+          (data) => !data.signerObjId && data.Role !== "prefill"
         );
         //condition to check any role does not attach signer
         if (signerNotExist) {
+          const filterPrefill = documentData[0]?.Placeholders?.filter(
+            (x) => x.Role !== "prefill"
+          );
           let users = [];
-          documentData[0]?.Placeholders?.forEach((element) => {
+          filterPrefill?.forEach((element) => {
             let label = "";
             const signerData = documentData[0]?.Signers.find(
               (x) => element.signerObjId && element.signerObjId === x.objectId
@@ -272,6 +275,7 @@ function PlaceHolderSign() {
           setForms(users);
         }
       }
+
       const url = documentData[0] && documentData[0]?.URL;
       //convert document url in array buffer format to use embed widgets in pdf using pdf-lib
       const arrayBuffer = await convertPdfArrayBuffer(url);
@@ -1927,7 +1931,9 @@ function PlaceHolderSign() {
     }
   };
   const handleDisable = () => {
-    const isAllSigner = signerPos.some((x) => !x.signerObjId);
+    const isAllSigner = signerPos.some(
+      (x) => !x.signerObjId && x.Role !== "prefill"
+    );
     return isAllSigner;
   };
   const handleCloseAttachSigner = () => {
@@ -2126,7 +2132,7 @@ function PlaceHolderSign() {
                           {pdfDetails[0].SendinOrder ? (
                             <p>
                               {t("placeholder-mail-alert", {
-                                name: pdfDetails[0]?.Signers[0]?.Name
+                                name: signersdata[0]?.Name
                               })}
                             </p>
                           ) : (
@@ -2210,7 +2216,7 @@ function PlaceHolderSign() {
                         <>
                           {/* grid grid-cols-1 md:grid-cols-2 */}
                           <div className="min-h-max max-h-[250px] overflow-y-auto">
-                            <div className="p-3 op-card border-[1px] border-gray-400 mt-3 mx-4 mb-4 bg-base-200 text-base-content flex flex-col gap-2 relative">
+                            <div className="py-3 px-[10px] op-card border-[1px] border-gray-400 mt-3 md:mx-3  mb-4 bg-base-200 text-base-content flex flex-col gap-2 relative">
                               {forms?.map((field, id) => {
                                 return (
                                   <div
@@ -2218,7 +2224,7 @@ function PlaceHolderSign() {
                                     key={field?.value}
                                   >
                                     <label>{field?.role}</label>
-                                    <div className="flex justify-between items-center gap-2">
+                                    <div className="flex justify-between items-center gap-1">
                                       <div className="flex-1">
                                         <AsyncSelect
                                           cacheOptions
diff --git a/apps/OpenSign/src/pages/TemplatePlaceholder.js b/apps/OpenSign/src/pages/TemplatePlaceholder.js
index edef1c43c..d9cf3bea8 100644
--- a/apps/OpenSign/src/pages/TemplatePlaceholder.js
+++ b/apps/OpenSign/src/pages/TemplatePlaceholder.js
@@ -11,6 +11,8 @@ import Tour from "reactour";
 import SignerListPlace from "../components/pdf/SignerListPlace";
 import Header from "../components/pdf/PdfHeader";
 import WidgetNameModal from "../components/pdf/WidgetNameModal";
+import { PDFDocument } from "pdf-lib";
+import { SaveFileSize } from "../constant/saveFileSize";
 import {
   pdfNewWidthFun,
   contractUsers,
@@ -34,7 +36,9 @@ import {
   handleSignatureType,
   getBase64FromUrl,
   convertPdfArrayBuffer,
-  generatePdfName
+  generatePdfName,
+  textWidget,
+  multiSignEmbed
 } from "../constant/Utils";
 import RenderPdf from "../components/pdf/RenderPdf";
 import "../styles/AddUser.css";
@@ -132,6 +136,9 @@ const TemplatePlaceholder = () => {
   const [scale, setScale] = useState(1);
   const [signatureType, setSignatureType] = useState([]);
   const [pdfArrayBuffer, setPdfArrayBuffer] = useState("");
+  const [updatedPdfUrl, setUpdatedPdfUrl] = useState("");
+  const [tempSignerId, setTempSignerId] = useState("");
+  const [unSignedWidgetId, setUnSignedWidgetId] = useState("");
   useEffect(() => {
     fetchTemplate();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -238,9 +245,22 @@ const TemplatePlaceholder = () => {
             documentData[0].Placeholders &&
             documentData[0].Placeholders.length > 0
           ) {
-            setSignerPos(documentData[0].Placeholders);
+            const placeholder = documentData[0]?.Placeholders.filter(
+              (data) => data.Role !== "prefill"
+            );
+            setSignerPos(placeholder);
+            signersdata.forEach((x) => {
+              if (x.objectId) {
+                const obj = {
+                  __type: "Pointer",
+                  className: "contracts_Contactbook",
+                  objectId: x.objectId
+                };
+                signers.push(obj);
+              }
+            });
             let signers = [...documentData[0].Signers];
-            let updatedSigners = documentData[0].Placeholders.map((x) => {
+            let updatedSigners = placeholder.map((x) => {
               let matchingSigner = signers.find(
                 (y) => x.signerObjId && x.signerObjId === y.objectId
               );
@@ -275,10 +295,13 @@ const TemplatePlaceholder = () => {
             documentData[0].Placeholders &&
             documentData[0].Placeholders.length > 0
           ) {
-            let updatedSigners = documentData[0].Placeholders.map((x) => {
+            const placeholder = documentData[0]?.Placeholders.filter(
+              (data) => data.Role !== "prefill"
+            );
+            let updatedSigners = placeholder.map((x) => {
               return { Role: x.Role, Id: x.Id, blockColor: x.blockColor };
             });
-            setSignerPos(documentData[0].Placeholders);
+            setSignerPos(placeholder);
             setUniqueId(updatedSigners[0].Id);
             setSignersData(updatedSigners);
             setIsSelectId(0);
@@ -353,7 +376,8 @@ const TemplatePlaceholder = () => {
         const widgetHeight =
           defaultWidthHeight(dragTypeValue).height * containerScale;
         let dropData = [],
-          currentPagePosition;
+          currentPagePosition,
+          filterSignerPos;
         let placeHolder;
         if (item === "onclick") {
           // `getBoundingClientRect()` is used to get accurate measurement height of the div
@@ -406,7 +430,11 @@ const TemplatePlaceholder = () => {
           dropData.push(dropObj);
           placeHolder = { pageNumber: pageNumber, pos: dropData };
         }
-        let filterSignerPos = signerPos.find((data) => data.Id === uniqueId);
+        if (dragTypeValue === textWidget) {
+          filterSignerPos = signerPos.find((data) => data.Role === "prefill");
+        } else {
+          filterSignerPos = signerPos.find((data) => data.Id === uniqueId);
+        }
         const getPlaceHolder = filterSignerPos?.placeHolder;
         if (getPlaceHolder) {
           //checking exist placeholder on same page
@@ -423,20 +451,53 @@ const TemplatePlaceholder = () => {
           const newSignPos = getPos.concat(dropData);
           let xyPos = { pageNumber: pageNumber, pos: newSignPos };
           updatePlace.push(xyPos);
-          const updatesignerPos = signerPos.map((x) =>
-            x.Id === uniqueId ? { ...x, placeHolder: updatePlace } : x
-          );
+          let updatesignerPos;
+          if (dragTypeValue === textWidget) {
+            updatesignerPos = signerPos.map((x) =>
+              x.Role === "prefill" ? { ...x, placeHolder: updatePlace } : x
+            );
+          } else {
+            updatesignerPos = signerPos.map((x) =>
+              x.Id === uniqueId ? { ...x, placeHolder: updatePlace } : x
+            );
+          }
           setSignerPos(updatesignerPos);
         } else {
-          //else condition to add placeholder widgets on multiple page first time
-          const updatesignerPos = signerPos.map((x) =>
-            x.Id === uniqueId && x?.placeHolder
-              ? { ...x, placeHolder: [...x.placeHolder, placeHolder] }
-              : x.Id === uniqueId
-                ? { ...x, placeHolder: [placeHolder] }
-                : x
-          );
-          setSignerPos(updatesignerPos);
+          //if condition when widget type is prefill label text widget
+          if (dragTypeValue === textWidget) {
+            //check text widgets data (prefill) already exist then and want to add text widget on new page
+            //create new page entry with old data and update placeholder
+            if (filterSignerPos) {
+              const addPrefillData =
+                filterSignerPos && filterSignerPos?.placeHolder;
+              addPrefillData.push(placeHolder);
+              const updatePrefillPos = signerPos.map((x) =>
+                x.Role === "prefill" ? { ...x, placeHolder: addPrefillData } : x
+              );
+              setSignerPos(updatePrefillPos);
+            } //else condition if user do not have any text widget data
+            else {
+              const prefillTextWidget = {
+                signerPtr: {},
+                signerObjId: "",
+                blockColor: "#f58f8c",
+                placeHolder: [placeHolder],
+                Role: "prefill",
+                Id: key
+              };
+              setSignerPos((prev) => [...prev, prefillTextWidget]);
+            }
+          } else {
+            //else condition to add placeholder widgets on multiple page first time
+            const updatesignerPos = signerPos.map((x) =>
+              x.Id === uniqueId && x?.placeHolder
+                ? { ...x, placeHolder: [...x.placeHolder, placeHolder] }
+                : x.Id === uniqueId
+                  ? { ...x, placeHolder: [placeHolder] }
+                  : x
+            );
+            setSignerPos(updatesignerPos);
+          }
         }
 
         if (dragTypeValue === "dropdown") {
@@ -446,9 +507,14 @@ const TemplatePlaceholder = () => {
         } else if (dragTypeValue === radioButtonWidget) {
           setIsRadio(true);
         } else if (
-          [textInputWidget, "name", "company", "job title", "email"].includes(
-            dragTypeValue
-          )
+          [
+            textInputWidget,
+            textWidget,
+            "name",
+            "company",
+            "job title",
+            "email"
+          ].includes(dragTypeValue)
         ) {
           setFontSize(12);
           setFontColor("black");
@@ -509,20 +575,22 @@ const TemplatePlaceholder = () => {
         containerWH
       );
       if (keyValue >= 0) {
-        const filterSignerPos = updateSignPos.filter(
-          (data) => data.Id === signId
-        );
+        let filterSignerPos;
+        if (signId) {
+          filterSignerPos = updateSignPos.filter((data) => data.Id === signId);
+        } else {
+          filterSignerPos = updateSignPos.filter(
+            (data) => data.Role === "prefill"
+          );
+        }
 
         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) => {
               if (url.key === keyValue) {
@@ -542,12 +610,17 @@ const TemplatePlaceholder = () => {
               return obj;
             });
             const newUpdateSigner = updateSignPos.map((obj) => {
-              if (obj.Id === signId) {
-                return { ...obj, placeHolder: newUpdateSignPos };
+              if (signId) {
+                if (obj.Id === signId) {
+                  return { ...obj, placeHolder: newUpdateSignPos };
+                }
+              } else {
+                if (obj.Role === "prefill") {
+                  return { ...obj, placeHolder: newUpdateSignPos };
+                }
               }
               return obj;
             });
-
             setSignerPos(newUpdateSigner);
           }
         }
@@ -654,10 +727,34 @@ const TemplatePlaceholder = () => {
   };
   const alertSendEmail = async () => {
     const isPlaceholderExist = signerPos.every((data) => data.placeHolder);
-    if (isPlaceholderExist) {
+    const getPrefill = signerPos?.find((data) => data.Role === "prefill");
+    const prefillPlaceholder = getPrefill?.placeHolder;
+    let isLabel = false;
+    let unfilledTextWidgetId = "";
+    //condition is used to check text widget data is empty or have response
+    if (getPrefill) {
+      if (prefillPlaceholder) {
+        prefillPlaceholder.map((data) => {
+          if (!isLabel) {
+            const unfilledTextWidgets = data.pos.find(
+              (position) => !position.options.response
+            );
+            if (unfilledTextWidgets) {
+              isLabel = true;
+              unfilledTextWidgetId = unfilledTextWidgets.key;
+            }
+          }
+        });
+      }
+    }
+    if (getPrefill && isLabel) {
+      setUnSignedWidgetId(unfilledTextWidgetId);
+    } else if (isPlaceholderExist) {
       handleSaveTemplate();
     } else {
-      const signerList = signerPos.filter((data) => !data.placeHolder);
+      const signerList = signerPos.filter(
+        (data) => !data.placeHolder && data.Role !== "prefill"
+      );
       const getSigner = signerList.map((x) => {
         return signersdata.find((y) => y.Id === x.Id).Role;
       });
@@ -673,7 +770,7 @@ const TemplatePlaceholder = () => {
     }, 2000);
     return () => clearTimeout(timer);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [signerPos, signatureType, pdfBase64Url]);
+  }, [signerPos, signersdata, signatureType, pdfBase64Url]);
 
   // `autosavedetails` is used to save template details after every 2 sec when changes are happern in placeholder like drag-drop widgets, remove signers
   const autosavedetails = async () => {
@@ -703,7 +800,10 @@ const TemplatePlaceholder = () => {
       const templateCls = new Parse.Object("contracts_Template");
       templateCls.id = templateId;
       if (signerPos?.length > 0) {
-        templateCls.set("Placeholders", signerPos);
+        const removePrefill = signerPos.filter((x) => x.Role !== "prefill");
+        if (removePrefill.length > 0) {
+          templateCls.set("Placeholders", removePrefill);
+        }
       }
       templateCls.set("Signers", signers);
       templateCls.set("SignatureType", signatureType);
@@ -731,11 +831,60 @@ const TemplatePlaceholder = () => {
     }
   };
 
+  //embed prefill label widget data
+  const embedPrefilllData = async () => {
+    const prefillExist = signerPos.filter((data) => data.Role === "prefill");
+    if (prefillExist && prefillExist.length > 0) {
+      const placeholder = prefillExist[0].placeHolder;
+      const existingPdfBytes = pdfArrayBuffer;
+      const pdfDoc = await PDFDocument.load(existingPdfBytes, {
+        ignoreEncryption: true
+      });
+      const isSignYourSelfFlow = false;
+      try {
+        const pdfBase64 = await multiSignEmbed(
+          placeholder,
+          pdfDoc,
+          isSignYourSelfFlow,
+          scale
+        );
+        const pdfName = generatePdfName(16);
+        const pdfUrl = await convertBase64ToFile(
+          pdfName,
+          pdfBase64,
+          "",
+        );
+        const tenantId = localStorage.getItem("TenantId");
+        const buffer = atob(pdfBase64);
+        SaveFileSize(buffer.length, pdfUrl, tenantId);
+        return pdfUrl;
+      } catch (err) {
+        console.log("error to convertBase64ToFile in placeholder flow", err);
+        alert(err?.message);
+      }
+    } else if (pdfBase64Url) {
+      try {
+        const pdfName = generatePdfName(16);
+        const pdfUrl = await convertBase64ToFile(
+          pdfName,
+          pdfBase64Url,
+          "",
+        );
+        return pdfUrl;
+      } catch (err) {
+        console.log("error to convertBase64ToFile in placeholder flow", err);
+        alert(err?.message);
+      }
+    } else {
+      return pdfDetails[0].URL;
+    }
+  };
   const handleSaveTemplate = async () => {
     if (signersdata?.length) {
       setIsLoading({ isLoad: true, message: t("loading-mssg") });
       setIsSendAlert(false);
-      let signers = [];
+      let signers = [],
+        pdfUrl;
       if (signersdata?.length > 0) {
         signersdata.forEach((x) => {
           if (x.objectId) {
@@ -748,15 +897,10 @@ const TemplatePlaceholder = () => {
           }
         });
       }
-      let pdfUrl = pdfDetails[0]?.URL;
       if (pdfBase64Url) {
         try {
-          const pdfName = generatePdfName(16);
-          pdfUrl = await convertBase64ToFile(
-            pdfName,
-            pdfBase64Url,
-            "",
-          );
+          pdfUrl = await embedPrefilllData();
+          setUpdatedPdfUrl(pdfUrl);
         } catch (e) {
           console.log("error to convertBase64ToFile in placeholder flow", e);
         }
@@ -774,8 +918,9 @@ const TemplatePlaceholder = () => {
         const RedirectUrl = pdfDetails[0]?.RedirectUrl
           ? { RedirectUrl: pdfDetails[0]?.RedirectUrl }
           : {};
+        const removePrefill = signerPos.filter((x) => x?.Role !== "prefill");
         const data = {
-          Placeholders: signerPos,
+          Placeholders: removePrefill,
           Signers: signers,
           Name: pdfDetails[0]?.Name || "",
           Note: pdfDetails[0]?.Note || "",
@@ -927,25 +1072,13 @@ const TemplatePlaceholder = () => {
   const handleCreateDocModal = async () => {
     setIsCreateDocModal(false);
     setIsCreateDoc(true);
-    let pdfUrl = pdfDetails[0]?.URL;
-    if (pdfBase64Url) {
-      try {
-        const pdfName = generatePdfName(16);
-        pdfUrl = await convertBase64ToFile(
-          pdfName,
-          pdfBase64Url,
-          "",
-        );
-      } catch (e) {
-        console.log("error to convertBase64ToFile in placeholder flow", e);
-      }
-    }
+    const removePrefill = signerPos.filter((x) => x.Role !== "prefill");
     // handle create document
     const res = await createDocument(
       pdfDetails,
-      signerPos,
+      removePrefill,
       signersdata,
-      pdfUrl
+      updatedPdfUrl
     );
     if (res.status === "success") {
       navigate(`/placeHolderSign/${res.id}`, {
@@ -1386,6 +1519,13 @@ const TemplatePlaceholder = () => {
     setShowDropdown(false);
     setIsRadio(false);
     setIsCheckbox(false);
+    //condition for text widget type after set all values for text widget
+    //change setUniqueId which is set in tempsignerId
+    //because textwidget do not have signer user so for selected signers we have to do
+    if (currWidgetsDetails.type === textWidget) {
+      setUniqueId(tempSignerId);
+      setTempSignerId("");
+    }
   };
 
   const clickOnZoomIn = () => {
@@ -1433,7 +1573,14 @@ const TemplatePlaceholder = () => {
       style: { fontSize: "13px" }
     }
   ];
-
+  const textFieldTour = [
+    {
+      selector: '[data-tut="IsSigned"]',
+      content: t("text-field-tour"),
+      position: "top",
+      style: { fontSize: "13px" }
+    }
+  ];
   return (
     <>
       <Title title={"Template"} />
@@ -1468,13 +1615,25 @@ const TemplatePlaceholder = () => {
                   closeWithMask={false}
                 />
               )}
-              <Tour
-                onRequestClose={() => setIsSendAlert(false)}
-                steps={signatureWidgetTour}
-                isOpen={isSendAlert}
-                rounded={5}
-                closeWithMask={false}
-              />
+              {isSendAlert && (
+                <Tour
+                  onRequestClose={() => setIsSendAlert(false)}
+                  steps={signatureWidgetTour}
+                  isOpen={true}
+                  rounded={5}
+                  closeWithMask={false}
+                /> // this is the tour for add signature widget for all role
+              )}
+              {unSignedWidgetId && (
+                <Tour
+                  onRequestClose={() => setUnSignedWidgetId("")}
+                  steps={textFieldTour}
+                  isOpen={true}
+                  rounded={5}
+                  closeWithMask={false}
+                />
+              )}
+
               {/* this component used to render all pdf pages in left side */}
               <RenderAllPdfPage
                 allPages={allPages}
@@ -1614,6 +1773,10 @@ const TemplatePlaceholder = () => {
                     pageNumber={pageNumber}
                     signKey={signKey}
                     Id={uniqueId}
+                    widgetType={widgetType}
+                    setUniqueId={setUniqueId}
+                    tempSignerId={tempSignerId}
+                    setTempSignerId={setTempSignerId}
                   />
                   {/* pdf header which contain funish back button */}
                   <Header
@@ -1691,6 +1854,9 @@ const TemplatePlaceholder = () => {
                         setFontColor={setFontColor}
                         isResize={isResize}
                         divRef={divRef}
+                        setTempSignerId={setTempSignerId}
+                        uniqueId={uniqueId}
+                        unSignedWidgetId={unSignedWidgetId}
                       />
                     )}
                   </div>
@@ -1721,7 +1887,6 @@ const TemplatePlaceholder = () => {
                     handleOnBlur={handleOnBlur}
                     title={t("roles")}
                     initial={true}
-                    isTemplateFlow={true}
                     sendInOrder={pdfDetails[0].SendinOrder}
                     setSignersData={setSignersData}
                     blockColor={blockColor}
@@ -1729,6 +1894,7 @@ const TemplatePlaceholder = () => {
                     setSignerPos={setSignerPos}
                     uniqueId={uniqueId}
                     setSelectWidgetId={setSelectWidgetId}
+                    isTemplateFlow={true}
                   />
                 </div>
               ) : (