diff --git a/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js b/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js
index 19d616dc9..1d9b2f415 100644
--- a/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js
+++ b/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { themeColor } from "../../constant/const";
 import ModalUi from "../../primitives/ModalUi";
+import { radioButtonWidget } from "../../constant/Utils";
 function DropdownWidgetOption(props) {
   const [dropdownOptionList, setDropdownOptionList] = useState([
     "option-1",
@@ -143,7 +144,7 @@ function DropdownWidgetOption(props) {
       //   styleClass={"dropdownModal"}
       isOpen={props.showDropdown}
       title={props.title}
-      closeOff={true}
+      showClose={false}
     >
       <div style={{ height: "100%", padding: 20 }}>
         <form
@@ -153,7 +154,7 @@ function DropdownWidgetOption(props) {
           }}
         >
           <div className="dropdownContainer">
-            {["checkbox", "radio"].includes(props.type) &&
+            {["checkbox", radioButtonWidget].includes(props.type) &&
               !props.isSignYourself && (
                 <div>
                   <input
@@ -178,36 +179,6 @@ function DropdownWidgetOption(props) {
               className="drodown-input"
             />
 
-            {props.type === "checkbox" && !props.isSignYourself && (
-              <>
-                <label style={{ fontSize: "13px", fontWeight: "600" }}>
-                  Minimun check
-                </label>
-                <input
-                  required
-                  defaultValue={0}
-                  value={minCount}
-                  onChange={(e) => {
-                    const count = handleSetMinMax(e);
-                    setMinCount(count);
-                  }}
-                  className="drodown-input"
-                />
-                <label style={{ fontSize: "13px", fontWeight: "600" }}>
-                  Maximum check
-                </label>
-                <input
-                  required
-                  defaultValue={0}
-                  value={maxCount}
-                  onChange={(e) => {
-                    const count = handleSetMinMax(e);
-                    setMaxCount(count);
-                  }}
-                  className="drodown-input"
-                />
-              </>
-            )}
             <label
               style={{ fontSize: "13px", fontWeight: "600", marginTop: "5px" }}
             >
@@ -274,7 +245,6 @@ function DropdownWidgetOption(props) {
                   ></i>
                 </div>
               ))}
-
               <i
                 onClick={handleAddInput}
                 style={{
@@ -285,8 +255,38 @@ function DropdownWidgetOption(props) {
                 }}
                 className="fa-solid fa-square-plus"
               ></i>
+              {props.type === "checkbox" && !props.isSignYourself && (
+                <>
+                  <label style={{ fontSize: "13px", fontWeight: "600" }}>
+                    Minimun check
+                  </label>
+                  <input
+                    required
+                    defaultValue={0}
+                    value={minCount}
+                    onChange={(e) => {
+                      const count = handleSetMinMax(e);
+                      setMinCount(count);
+                    }}
+                    className="drodown-input"
+                  />
+                  <label style={{ fontSize: "13px", fontWeight: "600" }}>
+                    Maximum check
+                  </label>
+                  <input
+                    required
+                    defaultValue={0}
+                    value={maxCount}
+                    onChange={(e) => {
+                      const count = handleSetMinMax(e);
+                      setMaxCount(count);
+                    }}
+                    className="drodown-input"
+                  />
+                </>
+              )}
             </div>
-            {["dropdown", "radio"].includes(props.type) && (
+            {["dropdown", radioButtonWidget].includes(props.type) && (
               <>
                 <label
                   style={{
@@ -321,7 +321,7 @@ function DropdownWidgetOption(props) {
                 </select>
               </>
             )}
-            {props.type !== "checkbox" && props.type !== "radio" && (
+            {props.type !== "checkbox" && props.type !== radioButtonWidget && (
               <>
                 <div
                   style={{
diff --git a/apps/OpenSign/src/components/pdf/Placeholder.js b/apps/OpenSign/src/components/pdf/Placeholder.js
index f21cb988f..ff0f199e4 100644
--- a/apps/OpenSign/src/components/pdf/Placeholder.js
+++ b/apps/OpenSign/src/components/pdf/Placeholder.js
@@ -2,17 +2,118 @@ import React, { useState, useEffect } from "react";
 import BorderResize from "./BorderResize";
 import PlaceholderBorder from "./PlaceholderBorder";
 import { Rnd } from "react-rnd";
-import { defaultWidthHeight, isMobile } from "../../constant/Utils";
+import {
+  defaultWidthHeight,
+  isMobile,
+  onChangeInput,
+  radioButtonWidget,
+  textInputWidget,
+  textWidget
+} from "../../constant/Utils";
 import PlaceholderType from "./PlaceholderType";
 import moment from "moment";
 import "../../styles/opensigndrive.css";
 
+const selectFormat = (data) => {
+  switch (data) {
+    case "L":
+      return "MM/dd/yyyy";
+    case "DD-MM-YYYY":
+      return "dd-MM-yyyy";
+    case "DD/MM/YYYY":
+      return "dd/MM/yyyy";
+    case "LL":
+      return "MMMM dd, yyyy";
+    case "DD MMM, YYYY":
+      return "dd MMM, yyyy";
+    case "YYYY-MM-DD":
+      return "yyyy-MM-dd";
+    case "MM-DD-YYYY":
+      return "MM-dd-yyyy";
+    case "MM.DD.YYYY":
+      return "MM.dd.yyyy";
+    case "MMM DD, YYYY":
+      return "MMM dd, yyyy";
+    case "DD MMMM, YYYY":
+      return "dd MMMM, yyyy";
+    default:
+      return "MM/dd/yyyy";
+  }
+};
+
+const changeDateToMomentFormat = (format) => {
+  switch (format) {
+    case "MM/dd/yyyy":
+      return "L";
+    case "dd-MM-yyyy":
+      return "DD-MM-YYYY";
+    case "dd/MM/yyyy":
+      return "DD/MM/YYYY";
+    case "MMMM dd, yyyy":
+      return "LL";
+    case "dd MMM, yyyy":
+      return "DD MMM, YYYY";
+    case "yyyy-MM-dd":
+      return "YYYY-MM-DD";
+    case "MM-dd-yyyy":
+      return "MM-DD-YYYY";
+    case "MM.dd.yyyy":
+      return "MM.DD.YYYY";
+    case "MMM dd, yyyy":
+      return "MMM DD, YYYY";
+    case "dd MMMM, yyyy":
+      return "DD MMMM, YYYY";
+    default:
+      return "L";
+  }
+};
+
+//function to get default date
+const getDefaultdate = (selectedDate, format = "dd-MM-yyyy") => {
+  let date;
+  if (format && format === "dd-MM-yyyy") {
+    const newdate = selectedDate
+      ? selectedDate
+      : moment(new Date()).format(changeDateToMomentFormat(format));
+    const [day, month, year] = newdate.split("-");
+    date = new Date(`${year}-${month}-${day}`);
+  } else {
+    date = new Date(selectedDate);
+  }
+  const value = date;
+  return value;
+};
+//function to get default format
+const getDefaultFormat = (dateFormat) => dateFormat || "MM/dd/yyyy";
+
 function Placeholder(props) {
   const [isDraggingEnabled, setDraggingEnabled] = useState(true);
   const [isShowDateFormat, setIsShowDateFormat] = useState(false);
-  const [selectDate, setSelectDate] = useState();
+  const [selectDate, setSelectDate] = useState({
+    date:
+      props.pos.type === "date"
+        ? moment(
+            getDefaultdate(
+              props?.pos?.options?.response,
+              props.pos?.options?.validation?.format
+            ).getTime()
+          ).format(
+            changeDateToMomentFormat(props.pos?.options?.validation?.format)
+          )
+        : "",
+    format:
+      props.pos.type === "date"
+        ? getDefaultFormat(props.pos?.options?.validation?.format)
+        : ""
+  });
   const [dateFormat, setDateFormat] = useState([]);
-  const [saveDateFormat, setSaveDateFormat] = useState("");
+  const [startDate, setStartDate] = useState(
+    props.pos.type === "date" &&
+      getDefaultdate(
+        props?.pos?.options?.response,
+        props.pos?.options?.validation?.format
+      )
+  );
   const dateFormatArr = [
     "L",
     "DD-MM-YYYY",
@@ -25,70 +126,13 @@ function Placeholder(props) {
     "DD MMMM, YYYY"
   ];
 
-  const selectFormat = (data) => {
-    switch (data) {
-      case "L":
-        return "MM/dd/yyyy";
-      case "DD-MM-YYYY":
-        return "dd-MM-yyyy";
-      case "DD/MM/YYYY":
-        return "dd/MM/yyyy";
-      case "LL":
-        return "MMMM dd, yyyy";
-      case "DD MMM, YYYY":
-        return "dd MMM, YYYY";
-      case "YYYY-MM-DD":
-        return "YYYY-MM-dd";
-      case "MM-DD-YYYY":
-        return "MM-dd-YYYY";
-      case "MM.DD.YYYY":
-        return "MM.dd.YYYY";
-      case "MMM DD, YYYY":
-        return "MMM dd, YYYY";
-      case "DD MMMM, YYYY":
-        return "dd MMMM, YYYY";
-      default:
-        return "dd/MM/yyyy";
-    }
-  };
-
-  useEffect(() => {
-    //set default current date and default format MM/dd/yyyy
-    if (props.isSignYourself) {
-      const date = new Date();
-      const milliseconds = date.getTime();
-      const newDate = moment(milliseconds).format("MM/DD/YYYY");
-      const dateObj = {
-        date: newDate,
-        format: "MM/dd/YYYY"
-      };
-      setSelectDate(dateObj);
-    } else {
-      const defaultRes = props?.pos?.options?.response;
-      const defaultFormat = props.pos?.options?.validation?.format;
-      const updateDate = defaultRes
-        ? new Date(props?.pos?.options?.response)
-        : new Date();
-      const dateFormat = defaultFormat ? defaultFormat : "MM/DD/YYYY";
-      const milliseconds = updateDate.getTime();
-      const newDate = moment(milliseconds).format(dateFormat);
-      const dateObj = {
-        date: newDate,
-        format: props.pos?.options?.validation?.format
-          ? props.pos?.options?.validation?.format
-          : "MM/dd/YYYY"
-      };
-      setSelectDate(dateObj);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  //function for add selected date and format in selectFormat
+  useEffect(() => {}, []);
+  //function change format array list with selected date and format
   const changeDateFormat = () => {
     const updateDate = [];
     dateFormatArr.map((data) => {
       let date;
-      if (selectDate.format === "dd-MM-yyyy") {
+      if (selectDate && selectDate.format === "dd-MM-yyyy") {
         const [day, month, year] = selectDate.date.split("-");
         date = new Date(`${year}-${month}-${day}`);
       } else {
@@ -104,13 +148,15 @@ function Placeholder(props) {
     });
     setDateFormat(updateDate);
   };
+
   useEffect(() => {
     if (props.isPlaceholder || props.isSignYourself) {
       selectDate && changeDateFormat();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectDate]);
-  //handle to close drop down menu onclick screen
+
+  //it detect outside click of date dropdown menu
   useEffect(() => {
     const closeMenuOnOutsideClick = (e) => {
       if (isShowDateFormat && !e.target.closest("#menu-container")) {
@@ -131,7 +177,7 @@ function Placeholder(props) {
     }
 
     const widgetTypeExist = [
-      "text",
+      textInputWidget,
       "checkbox",
       "name",
       "company",
@@ -167,7 +213,7 @@ function Placeholder(props) {
     } else if (
       props.isPlaceholder &&
       !props.isDragging &&
-      props.pos.type !== "label"
+      props.pos.type !== textWidget
     ) {
       if (props.pos.key === props.selectWidgetId) {
         props.handleLinkUser(props.data.Id);
@@ -195,8 +241,9 @@ function Placeholder(props) {
     }
   };
 
+  //function to set state value of onclick on widget's setting icon
   const handleWidgetsOnclick = () => {
-    if (props.pos.type === "radio") {
+    if (props.pos.type === radioButtonWidget) {
       props.setIsRadio(true);
     } else if (props.pos.type === "dropdown") {
       props?.setShowDropdown(true);
@@ -206,13 +253,57 @@ function Placeholder(props) {
       props?.handleNameModal(true);
     }
 
-    if (props.isPlaceholder) {
+    if (props.isPlaceholder && props.type !== textWidget) {
       props.setUniqueId(props.data.Id);
     }
     props.setSignKey(props.pos.key);
     props.setWidgetType(props.pos.type);
     props.setCurrWidgetsDetails(props.pos);
   };
+  //function ro set state value of onclick on widget's copy icon
+  const handleCopyPlaceholder = (e) => {
+    if (props.data && props?.pos?.type !== textWidget) {
+      props.setSignerObjId(props?.data?.signerObjId);
+      props.setUniqueId(props?.data?.Id);
+    } else if (props.data && props.pos.type === textWidget) {
+      props.setTempSignerId(props.uniqueId);
+      props.setSignerObjId(props?.data?.signerObjId);
+      props.setUniqueId(props?.data?.Id);
+    }
+    e.stopPropagation();
+    props.setIsPageCopy(true);
+    props.setSignKey(props.pos.key);
+  };
+
+  //function to save date and format on local array onchange date and onclick format
+  const handleSaveDate = (data, isDateChange) => {
+    let updateDate = data.date;
+    //check if date change by user
+    if (isDateChange) {
+      //`changeDateToMomentFormat` is used to convert date as per required to moment package
+      updateDate = moment(data.date).format(
+        changeDateToMomentFormat(data.format)
+      );
+    }
+    //using moment package is used to change date as per the format provided in selectDate obj e.g. - MM/dd/yyyy -> 03/12/2024
+    //`getDefaultdate` is used to convert update date in new Date() format
+    const date = moment(
+      getDefaultdate(updateDate, data?.format).getTime()
+    ).format(changeDateToMomentFormat(data?.format));
+
+    //`onChangeInput` is used to save data related to date in a placeholder field
+    onChangeInput(
+      date,
+      props.pos.key,
+      props.xyPostion,
+      props.index,
+      props.setXyPostion,
+      props.data && props.data.Id,
+      false,
+      data?.format
+    );
+    setSelectDate({ date: date, format: data?.format });
+  };
   const PlaceholderIcon = () => {
     return (
       props.isShowBorder && (
@@ -237,10 +328,12 @@ function Placeholder(props) {
                   }}
                 ></i>
               ) : (
-                props.pos.type !== "date" &&
-                props.pos.type !== "label" &&
-                props.pos.type !== "signature" &&
-                !props.isSignYourself && (
+                ((!props?.pos?.type && props.pos.isStamp) ||
+                  (props?.pos?.type &&
+                    !["date", textWidget, "signature"].includes(
+                      props.pos.type
+                    ) &&
+                    !props.isSignYourself)) && (
                   <i
                     onClick={(e) => {
                       e.stopPropagation();
@@ -253,10 +346,14 @@ function Placeholder(props) {
                     className="fa-solid fa-gear settingIcon"
                     style={{
                       color: "#188ae2",
-                      right: ["checkbox", "radio"].includes(props.pos.type)
+                      right: ["checkbox", radioButtonWidget].includes(
+                        props.pos.type
+                      )
                         ? "24px"
                         : "47px",
-                      top: ["checkbox", "radio"].includes(props.pos.type)
+                      top: ["checkbox", radioButtonWidget].includes(
+                        props.pos.type
+                      )
                         ? "-28px"
                         : "-19px"
                     }}
@@ -264,7 +361,7 @@ function Placeholder(props) {
                 )
               )}
 
-              {props.pos.type !== "label" && !props.isSignYourself && (
+              {props.pos.type !== textWidget && !props.isSignYourself && (
                 <i
                   data-tut="reactourLinkUser"
                   className="fa-regular fa-user signUserIcon"
@@ -282,12 +379,12 @@ function Placeholder(props) {
                     color: "#188ae2",
                     right:
                       props.pos.type === "checkbox" ||
-                      props.pos.type === "radio"
+                      props.pos.type === radioButtonWidget
                         ? "8px"
                         : "32px",
                     top:
                       props.pos.type === "checkbox" ||
-                      props.pos.type === "radio"
+                      props.pos.type === radioButtonWidget
                         ? "-28px"
                         : "-18px"
                   }}
@@ -347,10 +444,12 @@ function Placeholder(props) {
                         e.stopPropagation();
                         setIsShowDateFormat(!isShowDateFormat);
                         setSelectDate(data);
+                        handleSaveDate(data);
                       }}
                       onClick={() => {
                         setIsShowDateFormat(!isShowDateFormat);
                         setSelectDate(data);
+                        handleSaveDate(data);
                       }}
                       className="dropdown-item itemColor"
                       style={{ fontSize: "12px" }}
@@ -365,31 +464,21 @@ function Placeholder(props) {
           <i
             className="fa-regular fa-copy signCopy"
             onClick={(e) => {
-              if (props.data) {
-                props.setSignerObjId(props.data.signerObjId);
-                props.setUniqueId(props.data.Id);
-              }
-              e.stopPropagation();
-              props.setIsPageCopy(true);
-              props.setSignKey(props.pos.key);
+              handleCopyPlaceholder(e);
             }}
             onTouchEnd={(e) => {
-              if (props.data) {
-                props.setSignerObjId(props.data.signerObjId);
-                props.setUniqueId(props.data.Id);
-              }
-              e.stopPropagation();
-              props.setIsPageCopy(true);
-              props.setSignKey(props.pos.key);
+              handleCopyPlaceholder(e);
             }}
             style={{
               color: "#188ae2",
               right:
-                props.pos.type === "checkbox" || props.pos.type === "radio"
+                props.pos.type === "checkbox" ||
+                props.pos.type === radioButtonWidget
                   ? "-9px"
                   : "12px",
               top:
-                props.pos.type === "checkbox" || props.pos.type === "radio"
+                props.pos.type === "checkbox" ||
+                props.pos.type === radioButtonWidget
                   ? "-28px"
                   : "-18px"
             }}
@@ -418,11 +507,13 @@ function Placeholder(props) {
             style={{
               color: "#188ae2",
               right:
-                props.pos.type === "checkbox" || props.pos.type === "radio"
+                props.pos.type === "checkbox" ||
+                props.pos.type === radioButtonWidget
                   ? "-27px"
                   : "-8px",
               top:
-                props.pos.type === "checkbox" || props.pos.type === "radio"
+                props.pos.type === "checkbox" ||
+                props.pos.type === radioButtonWidget
                   ? "-28px"
                   : "-18px"
             }}
@@ -438,7 +529,7 @@ function Placeholder(props) {
       //ref={nodeRef}
       key={props.pos.key}
       lockAspectRatio={
-        props.pos.type !== "label" &&
+        props.pos.type !== textWidget &&
         (props.pos.Width
           ? props.pos.Width / props.pos.Height
           : defaultWidthHeight(props.pos.type).width /
@@ -454,10 +545,10 @@ function Placeholder(props) {
           props.data && props.isNeedSign
             ? props.data?.signerObjId === props.signerObjId &&
               props.pos.type !== "checkbox" &&
-              props.pos.type !== "radio"
+              props.pos.type !== radioButtonWidget
               ? true
               : false
-            : props.pos.type !== "radio" &&
+            : props.pos.type !== radioButtonWidget &&
               props.pos.type !== "checkbox" &&
               props.pos.key === props.selectWidgetId &&
               true,
@@ -482,7 +573,9 @@ function Placeholder(props) {
             : "all-scroll",
         zIndex:
           props.pos.type === "date"
-            ? "99"
+            ? props.pos.key === props.selectWidgetId
+              ? 99 + 1
+              : 99
             : props?.pos?.zIndex
               ? props.pos.zIndex
               : "5",
@@ -542,31 +635,33 @@ function Placeholder(props) {
       }}
     >
       {props.isShowBorder &&
-      props.pos.type !== "radio" &&
+      props.pos.type !== radioButtonWidget &&
       props.pos.type !== "checkbox" &&
       props.pos.key === props.selectWidgetId ? (
         <BorderResize
           right={
-            props.pos.type === "checkbox" || props.pos.type === "radio"
+            props.pos.type === "checkbox" ||
+            props.pos.type === radioButtonWidget
               ? -21
               : -12
           }
           top={
-            props.pos.type === "checkbox" || props.pos.type === "radio"
+            props.pos.type === "checkbox" ||
+            props.pos.type === radioButtonWidget
               ? -21
               : -11
           }
         />
       ) : props.data && props.isNeedSign && props.pos.type !== "checkbox" ? (
         props.data?.signerObjId === props.signerObjId &&
-        props.pos.type !== "radio" &&
+        props.pos.type !== radioButtonWidget &&
         props.pos.type !== "checkbox" ? (
           <BorderResize />
         ) : (
           <></>
         )
       ) : (
-        props.pos.type !== "radio" &&
+        props.pos.type !== radioButtonWidget &&
         props.pos.type !== "checkbox" &&
         props.pos.key === props.selectWidgetId && <BorderResize />
       )}
@@ -615,9 +710,10 @@ function Placeholder(props) {
             isNeedSign={props.isNeedSign}
             setSelectDate={setSelectDate}
             selectDate={selectDate}
-            setSaveDateFormat={setSaveDateFormat}
-            saveDateFormat={saveDateFormat}
             setValidateAlert={props.setValidateAlert}
+            setStartDate={setStartDate}
+            startDate={startDate}
+            handleSaveDate={handleSaveDate}
           />
         </div>
       ) : (
@@ -640,9 +736,10 @@ function Placeholder(props) {
             isNeedSign={props.isNeedSign}
             setSelectDate={setSelectDate}
             selectDate={selectDate}
-            setSaveDateFormat={setSaveDateFormat}
-            saveDateFormat={saveDateFormat}
             setValidateAlert={props.setValidateAlert}
+            setStartDate={setStartDate}
+            startDate={startDate}
+            handleSaveDate={handleSaveDate}
           />
         </>
       )}
diff --git a/apps/OpenSign/src/components/pdf/PlaceholderBorder.js b/apps/OpenSign/src/components/pdf/PlaceholderBorder.js
index 543d17ac7..996d1332a 100644
--- a/apps/OpenSign/src/components/pdf/PlaceholderBorder.js
+++ b/apps/OpenSign/src/components/pdf/PlaceholderBorder.js
@@ -2,11 +2,12 @@ import React from "react";
 import { themeColor } from "../../constant/const";
 import {
   defaultWidthHeight,
+  radioButtonWidget,
   resizeBorderExtraWidth
 } from "../../constant/Utils";
 function PlaceholderBorder(props) {
   const getResizeBorderExtraWidth =
-    props.pos.type === "checkbox" || props.pos.type === "radio"
+    props.pos.type === "checkbox" || props.pos.type === radioButtonWidget
       ? 38
       : resizeBorderExtraWidth();
   const defaultWidth = defaultWidthHeight(props.pos.type).width;
diff --git a/apps/OpenSign/src/components/pdf/PlaceholderCopy.js b/apps/OpenSign/src/components/pdf/PlaceholderCopy.js
index 4ae92e18f..17d86206c 100644
--- a/apps/OpenSign/src/components/pdf/PlaceholderCopy.js
+++ b/apps/OpenSign/src/components/pdf/PlaceholderCopy.js
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { themeColor } from "../../constant/const";
 import ModalUi from "../../primitives/ModalUi";
-import { randomId } from "../../constant/Utils";
+import { randomId, textWidget } from "../../constant/Utils";
 
 function PlaceholderCopy(props) {
   const copyType = ["All pages", "All pages but last", "All pages but first"];
@@ -180,7 +180,13 @@ function PlaceholderCopy(props) {
       copyPlaceholder("first");
     }
   };
-
+  const handleUniqueId = () => {
+    if (props.widgetType === textWidget) {
+      props.setUniqueId(props?.tempSignerId);
+      props.setTempSignerId("");
+    }
+    props.setIsPageCopy(false);
+  };
   return (
     <ModalUi
       isOpen={props.isPageCopy}
@@ -220,7 +226,7 @@ function PlaceholderCopy(props) {
         <button
           onClick={() => {
             handleApplyCopy();
-            props.setIsPageCopy(false);
+            handleUniqueId();
           }}
           style={{ background: themeColor }}
           type="button"
@@ -232,7 +238,9 @@ function PlaceholderCopy(props) {
         <button
           type="button"
           className="finishBtn cancelBtn"
-          onClick={() => props.setIsPageCopy(false)}
+          onClick={() => {
+            handleUniqueId();
+          }}
         >
           Cancel
         </button>
diff --git a/apps/OpenSign/src/components/pdf/PlaceholderType.js b/apps/OpenSign/src/components/pdf/PlaceholderType.js
index 795d942bd..7d10c3ef4 100644
--- a/apps/OpenSign/src/components/pdf/PlaceholderType.js
+++ b/apps/OpenSign/src/components/pdf/PlaceholderType.js
@@ -1,5 +1,13 @@
 import React, { useEffect, useState, forwardRef, useRef } from "react";
-import { getMonth, getYear, onChangeInput, range } from "../../constant/Utils";
+import {
+  getMonth,
+  getYear,
+  onChangeInput,
+  radioButtonWidget,
+  range,
+  textInputWidget,
+  textWidget
+} from "../../constant/Utils";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import "../../styles/signature.css";
@@ -7,10 +15,7 @@ import RegexParser from "regex-parser";
 
 function PlaceholderType(props) {
   const type = props?.pos?.type;
-  const [selectOption, setSelectOption] = useState(
-    props.pos?.options?.defaultValue ? props.pos?.options?.defaultValue : ""
-  );
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectOption, setSelectOption] = useState("");
   const [validatePlaceholder, setValidatePlaceholder] = useState("");
   const inputRef = useRef(null);
   const [textValue, setTextValue] = useState();
@@ -80,7 +85,7 @@ function PlaceholderType(props) {
       case "number":
         setValidatePlaceholder("12345");
         break;
-      case "text":
+      case textInputWidget:
         setValidatePlaceholder("enter text");
         break;
       default:
@@ -89,10 +94,7 @@ function PlaceholderType(props) {
   }
 
   useEffect(() => {
-    if (props.isNeedSign && type === "date") {
-      const updateDate = new Date();
-      setStartDate(updateDate);
-    } else if (type && type === "checkbox" && props.isNeedSign) {
+    if (type && type === "checkbox" && props.isNeedSign) {
       const isDefaultValue = props.pos.options?.defaultValue;
       if (isDefaultValue) {
         setSelectedCheckbox(isDefaultValue);
@@ -103,7 +105,18 @@ function PlaceholderType(props) {
       checkRegularExpress(props.pos?.options?.validation?.type);
     }
     setTextValue(
-      props.pos?.options?.defaultValue ? props.pos?.options?.defaultValue : ""
+      props.pos?.options?.response
+        ? props.pos?.options?.response
+        : props.pos?.options?.defaultValue
+          ? props.pos?.options?.defaultValue
+          : ""
+    );
+    setSelectOption(
+      props.pos?.options?.response
+        ? props.pos?.options?.response
+        : props.pos?.options?.defaultValue
+          ? props.pos?.options?.defaultValue
+          : ""
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -120,52 +133,9 @@ function PlaceholderType(props) {
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.pos?.options?.defaultValue]);
-
-  useEffect(() => {
-    if (type && type === "date") {
-      if (props.selectDate) {
-        let updateDate;
-        if (props.selectDate.format === "dd-MM-yyyy") {
-          const [day, month, year] = props.saveDateFormat.split("-");
-          updateDate = new Date(`${year}-${month}-${day}`);
-        } else {
-          if (props?.saveDateFormat) {
-            updateDate = new Date(props.saveDateFormat);
-          }
-        }
-        // const updateDate = new Date(props.saveDateFormat);
-        setStartDate(updateDate);
-        const dateObj = {
-          date: props.saveDateFormat,
-          format: props.selectDate
-            ? props.selectDate?.format
-            : props.pos?.options?.validation?.format
-              ? props.pos?.options?.validation?.format
-              : "MM/dd/YYYY"
-        };
-        props.setSelectDate(dateObj);
-        onChangeInput(
-          props.saveDateFormat,
-          props.pos.key,
-          props.xyPostion,
-          props.index,
-          props.setXyPostion,
-          props.data && props.data.Id,
-          false,
-          props.selectDate?.format
-            ? props.selectDate.format
-            : props.pos?.options?.validation?.format
-              ? props.pos?.options?.validation?.format
-              : "MM/dd/YYYY"
-        );
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.saveDateFormat]);
+  }, [props.pos]);
 
   const dateValue = (value) => {
-    props.setSaveDateFormat(value);
     return <span>{value}</span>;
   };
   const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
@@ -308,6 +278,16 @@ function PlaceholderType(props) {
     );
   };
 
+  //function to set onchange date
+  const handleOnDateChange = (date) => {
+    props.setStartDate(date);
+    const isDateChange = true;
+    const dateObj = {
+      date: date,
+      format: props.selectDate.format
+    };
+    props.handleSaveDate(dateObj, isDateChange);
+  };
   switch (type) {
     case "signature":
       return props.pos.SignUrl ? (
@@ -400,7 +380,7 @@ function PlaceholderType(props) {
           })}
         </div>
       );
-    case "text":
+    case textInputWidget:
       return props.isSignYourself ||
         (props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
         <input
@@ -639,21 +619,21 @@ function PlaceholderType(props) {
               </div>
             )}
             disabled={
-              props.isNeedSign && props.data?.signerObjId !== props.signerObjId
+              props.isPlaceholder ||
+              (props.isNeedSign &&
+                props.data?.signerObjId !== props.signerObjId)
             }
             onBlur={handleInputBlur}
             closeOnScroll={true}
             className="inputPlaceholder"
             style={{ outlineColor: "#007bff" }}
             selected={
-              startDate
-                ? startDate
+              props?.startDate
+                ? props?.startDate
                 : props.pos.options?.response &&
                   new Date(props.pos.options.response)
             }
-            onChange={(date) => {
-              setStartDate(date);
-            }}
+            onChange={(date) => handleOnDateChange(date)}
             popperPlacement="top-end"
             customInput={<ExampleCustomInput />}
             dateFormat={
@@ -661,7 +641,7 @@ function PlaceholderType(props) {
                 ? props.selectDate?.format
                 : props.pos?.options?.validation?.format
                   ? props.pos?.options?.validation?.format
-                  : "MM/dd/YYYY"
+                  : "MM/dd/yyyy"
             }
           />
         </div>
@@ -721,7 +701,7 @@ function PlaceholderType(props) {
           <span>{type}</span>
         </div>
       );
-    case "radio":
+    case radioButtonWidget:
       return (
         <div>
           {props.pos.options?.values.map((data, ind) => {
@@ -752,12 +732,14 @@ function PlaceholderType(props) {
           })}
         </div>
       );
-    case "label":
+    case textWidget:
       return (
         <textarea
           placeholder="Enter label"
           rows={1}
+          value={textValue}
           onChange={(e) => {
+            setTextValue(e.target.value);
             onChangeInput(
               e.target.value,
               props.pos.key,
diff --git a/apps/OpenSign/src/components/pdf/RenderPdf.js b/apps/OpenSign/src/components/pdf/RenderPdf.js
index af72c3729..7e7cadef6 100644
--- a/apps/OpenSign/src/components/pdf/RenderPdf.js
+++ b/apps/OpenSign/src/components/pdf/RenderPdf.js
@@ -56,7 +56,9 @@ function RenderPdf({
   selectWidgetId,
   unSignedWidgetId,
   setIsCheckbox,
-  handleNameModal
+  handleNameModal,
+  setTempSignerId,
+  uniqueId
 }) {
   const isMobile = window.innerWidth < 767;
   const newWidth = containerWH.width;
@@ -268,6 +270,8 @@ function RenderPdf({
                         setIsInitial={setIsInitial}
                         setValidateAlert={setValidateAlert}
                         unSignedWidgetId={unSignedWidgetId}
+                        setSelectWidgetId={setSelectWidgetId}
+                        selectWidgetId={selectWidgetId}
                       />
                     </React.Fragment>
                   )
@@ -393,6 +397,8 @@ function RenderPdf({
                                         setSelectWidgetId={setSelectWidgetId}
                                         selectWidgetId={selectWidgetId}
                                         handleNameModal={handleNameModal}
+                                        setTempSignerId={setTempSignerId}
+                                        uniqueId={uniqueId}
                                       />
                                     </React.Fragment>
                                   );
@@ -574,6 +580,8 @@ function RenderPdf({
                                           setSelectWidgetId={setSelectWidgetId}
                                           selectWidgetId={selectWidgetId}
                                           handleNameModal={handleNameModal}
+                                          setTempSignerId={setTempSignerId}
+                                          uniqueId={uniqueId}
                                         />
                                       </React.Fragment>
                                     );
diff --git a/apps/OpenSign/src/components/pdf/WidgetComponent.js b/apps/OpenSign/src/components/pdf/WidgetComponent.js
index 943e9f30e..101095648 100644
--- a/apps/OpenSign/src/components/pdf/WidgetComponent.js
+++ b/apps/OpenSign/src/components/pdf/WidgetComponent.js
@@ -3,7 +3,12 @@ import ModalUi from "../../primitives/ModalUi";
 import RecipientList from "./RecipientList";
 import { useDrag } from "react-dnd";
 import WidgetList from "./WidgetList";
-import { widgets } from "../../constant/Utils";
+import {
+  radioButtonWidget,
+  textInputWidget,
+  textWidget,
+  widgets
+} from "../../constant/Utils";
 import { themeColor } from "../../constant/const";
 function WidgetComponent({
   dragSignature,
@@ -58,16 +63,15 @@ function WidgetComponent({
       isDragCheck: !!monitor.isDragging()
     })
   });
-  const [, text] = useDrag({
+  const [, textInput] = useDrag({
     type: "BOX",
     item: {
       type: "BOX",
       id: 7,
-      text: "text"
+      text: textInputWidget
     },
-
     collect: (monitor) => ({
-      isDragText: !!monitor.isDragging()
+      isDragTextInput: !!monitor.isDragging()
     })
   });
   const [, initials] = useDrag({
@@ -153,28 +157,28 @@ function WidgetComponent({
       isDragEmail: !!monitor.isDragging()
     })
   });
-  const [, radio] = useDrag({
+  const [, radioButton] = useDrag({
     type: "BOX",
 
     item: {
       type: "BOX",
       id: 15,
-      text: "radio"
+      text: radioButtonWidget
     },
     collect: (monitor) => ({
-      isDragRadio: !!monitor.isDragging()
+      isDragRadiotton: !!monitor.isDragging()
     })
   });
-  const [, label] = useDrag({
+  const [, text] = useDrag({
     type: "BOX",
 
     item: {
       type: "BOX",
       id: 16,
-      text: "label"
+      text: textWidget
     },
     collect: (monitor) => ({
-      isDragLabel: !!monitor.isDragging()
+      isDragText: !!monitor.isDragging()
     })
   });
   const isMobile = window.innerWidth < 767;
@@ -204,17 +208,17 @@ function WidgetComponent({
       dragSignature,
       dragStamp,
       initials,
-      label,
+      name,
+      jobTitle,
+      company,
+      date,
       text,
+      textInput,
       checkbox,
       dropdown,
-      radio,
+      radioButton,
       image,
-      date,
-      name,
-      email,
-      company,
-      jobTitle
+      email
     ];
     const getWidgetArray = widgets;
     const newUpdateSigner = getWidgetArray.map((obj, ind) => {
@@ -227,13 +231,15 @@ function WidgetComponent({
 
   const filterWidgets = widget.filter(
     (data) =>
-      data.type !== "dropdown" && data.type !== "radio" && data.type !== "label"
+      data.type !== "dropdown" &&
+      data.type !== radioButtonWidget &&
+      data.type !== textWidget
   );
-  const labelWidget = widget.filter((data) => data.type !== "label");
+  const textWidgetData = widget.filter((data) => data.type !== textWidget);
   const updateWidgets = isSignYourself
     ? filterWidgets
     : isTemplateFlow
-      ? labelWidget
+      ? textWidgetData
       : widget;
 
   return (
diff --git a/apps/OpenSign/src/components/pdf/WidgetNameModal.js b/apps/OpenSign/src/components/pdf/WidgetNameModal.js
index 3d0ae2f01..329dea3e6 100644
--- a/apps/OpenSign/src/components/pdf/WidgetNameModal.js
+++ b/apps/OpenSign/src/components/pdf/WidgetNameModal.js
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import ModalUi from "../../primitives/ModalUi";
 import "../../styles/AddUser.css";
 import RegexParser from "regex-parser";
+import { textInputWidget } from "../../constant/Utils";
 
 const WidgetNameModal = (props) => {
   const [formdata, setFormdata] = useState({
@@ -69,7 +70,7 @@ const WidgetNameModal = (props) => {
         return "/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/";
       case "number":
         return "/^\\d+$/";
-      case "text":
+      case textInputWidget:
         return "/^[a-zA-Zs]+$/";
       default:
         return type;
@@ -111,8 +112,8 @@ const WidgetNameModal = (props) => {
             required
           />
         </div>
-        {(props.defaultdata?.type === "text" ||
-          props.widgetName === "text") && (
+        {(props.defaultdata?.type === textInputWidget ||
+          props.widgetName === textInputWidget) && (
           <>
             <div className="form-section">
               <label htmlFor="textvalidate" style={{ fontSize: 13 }}>
@@ -243,8 +244,8 @@ const WidgetNameModal = (props) => {
             })}
           </div>
         </div>
-        {(props.defaultdata?.type === "text" ||
-          props?.widgetName === "text") && (
+        {(props.defaultdata?.type === textInputWidget ||
+          props?.widgetName === textInputWidget) && (
           <div className="form-section">
             <label htmlFor="hint" style={{ fontSize: 13 }}>
               Hint
diff --git a/apps/OpenSign/src/constant/Utils.js b/apps/OpenSign/src/constant/Utils.js
index ceb828315..7e26226c2 100644
--- a/apps/OpenSign/src/constant/Utils.js
+++ b/apps/OpenSign/src/constant/Utils.js
@@ -5,6 +5,9 @@ import React from "react";
 import { rgb } from "pdf-lib";
 
 export const isMobile = window.innerWidth < 767;
+export const textInputWidget = "text input";
+export const textWidget = "text";
+export const radioButtonWidget = "radio button";
 export const openInNewTab = (url) => {
   window.open(url, "_blank", "noopener,noreferrer");
 };
@@ -162,12 +165,32 @@ export const widgets = [
     iconSize: "15px"
   },
   {
-    type: "label",
+    type: "name",
+    icon: "fa-solid fa-user",
+    iconSize: "21px"
+  },
+  {
+    type: "job title",
+    icon: "fa-solid fa-address-card",
+    iconSize: "17px"
+  },
+  {
+    type: "company",
+    icon: "fa-solid fa-building",
+    iconSize: "25px"
+  },
+  {
+    type: "date",
+    icon: "fa-solid fa-calendar-days",
+    iconSize: "20px"
+  },
+  {
+    type: textWidget,
     icon: "fa-solid fa-text-width",
     iconSize: "20px"
   },
   {
-    type: "text",
+    type: textInputWidget,
     icon: "fa-solid fa-font",
     iconSize: "21px"
   },
@@ -182,7 +205,7 @@ export const widgets = [
     iconSize: "19px"
   },
   {
-    type: "radio",
+    type: radioButtonWidget,
     icon: "fa-regular fa-circle-dot",
     iconSize: "20px"
   },
@@ -191,40 +214,19 @@ export const widgets = [
     icon: "fa-solid fa-image",
     iconSize: "20px"
   },
-  {
-    type: "date",
-    icon: "fa-solid fa-calendar-days",
-    iconSize: "20px"
-  },
-  {
-    type: "name",
-    icon: "fa-solid fa-user",
-    iconSize: "21px"
-  },
   {
     type: "email",
     icon: "fa-solid fa-envelope",
     iconSize: "20px"
-  },
-  {
-    type: "company",
-    icon: "fa-solid fa-building",
-    iconSize: "25px"
-  },
-  {
-    type: "job title",
-    icon: "fa-solid fa-address-card",
-    iconSize: "17px"
   }
 ];
 
-const getDate = () => {
+export const getDate = () => {
   const date = new Date();
   const milliseconds = date.getTime();
   const newDate = moment(milliseconds).format("MM/DD/YYYY");
   return newDate;
 };
-
 export const addWidgetOptions = (type) => {
   const defaultOpt = {
     name: "",
@@ -237,7 +239,7 @@ export const addWidgetOptions = (type) => {
       return defaultOpt;
     case "checkbox":
       return defaultOpt;
-    case "text":
+    case textInputWidget:
       return { ...defaultOpt, validation: { type: "text", pattern: "" } };
     case "initials":
       return defaultOpt;
@@ -248,16 +250,20 @@ export const addWidgetOptions = (type) => {
     case "job title":
       return { ...defaultOpt, validation: { type: "text", pattern: "" } };
     case "date":
-      return { ...defaultOpt, response: getDate() };
+      return {
+        ...defaultOpt,
+        response: getDate(),
+        validation: { format: "MM/dd/yyyy", type: "date-format" }
+      };
     case "image":
       return defaultOpt;
     case "email":
       return { ...defaultOpt, validation: { type: "email", pattern: "" } };
     case "dropdown":
       return defaultOpt;
-    case "radio":
+    case radioButtonWidget:
       return { ...defaultOpt, values: [] };
-    case "label":
+    case textWidget:
       return defaultOpt;
     default:
       return {};
@@ -323,7 +329,7 @@ export const defaultWidthHeight = (type) => {
       return { width: 150, height: 60 };
     case "checkbox":
       return { width: 15, height: 15 };
-    case "text":
+    case textInputWidget:
       return { width: 150, height: 25 };
     case "dropdown":
       return { width: 120, height: 22 };
@@ -341,9 +347,9 @@ export const defaultWidthHeight = (type) => {
       return { width: 70, height: 70 };
     case "email":
       return { width: 150, height: 20 };
-    case "radio":
+    case radioButtonWidget:
       return { width: 15, height: 30 };
-    case "label":
+    case textWidget:
       return { width: 150, height: 17 };
     default:
       return { width: 150, height: 60 };
@@ -692,13 +698,27 @@ export const onChangeInput = (
 
     const updatePosition = getXYdata.map((positionData) => {
       if (positionData.key === signKey) {
-        return {
-          ...positionData,
-          options: {
-            ...positionData.options,
-            response: value
-          }
-        };
+        if (dateFormat) {
+          return {
+            ...positionData,
+            options: {
+              ...positionData.options,
+              response: value,
+              validation: {
+                type: "date-format",
+                format: dateFormat // This indicates the required date format explicitly.
+              }
+            }
+          };
+        } else {
+          return {
+            ...positionData,
+            options: {
+              ...positionData.options,
+              response: value
+            }
+          };
+        }
       }
       return positionData;
     });
@@ -970,7 +990,6 @@ export const multiSignEmbed = async (
     } else {
       updateItem = item.pos;
     }
-
     const newWidth = containerWH.width;
     const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
     const pageNo = item.pageNumber;
@@ -1060,7 +1079,7 @@ export const multiSignEmbed = async (
           ? labelDefaultHeight
           : scaleHeight;
         const widgetHeight =
-          position.type === "radio"
+          position.type === radioButtonWidget
             ? 10
             : position.type === "checkbox"
               ? 10
@@ -1125,7 +1144,7 @@ export const multiSignEmbed = async (
         }
       };
       const widgetTypeExist = [
-        "text",
+        textInputWidget,
         "name",
         "company",
         "job title",
@@ -1171,7 +1190,7 @@ export const multiSignEmbed = async (
             checkbox.enableReadOnly();
           });
         }
-      } else if (position.type === "label") {
+      } else if (position.type === textWidget) {
         const font = await pdfDoc.embedFont("Helvetica");
         const fontSize = 12;
         let textContent;
@@ -1254,7 +1273,7 @@ export const multiSignEmbed = async (
           height: scaleHeight
         });
         dropdown.enableReadOnly();
-      } else if (position.type === "radio") {
+      } else if (position.type === radioButtonWidget) {
         const radioRandomId = "radio" + randomId();
         const radioGroup = form.createRadioGroup(radioRandomId);
         let addYPosition = 18;
diff --git a/apps/OpenSign/src/pages/GuestLogin.js b/apps/OpenSign/src/pages/GuestLogin.js
index 5ddf29b65..6f048a64a 100644
--- a/apps/OpenSign/src/pages/GuestLogin.js
+++ b/apps/OpenSign/src/pages/GuestLogin.js
@@ -4,6 +4,7 @@ import "../styles/loginPage.css";
 import loader from "../assets/images/loader2.gif";
 import axios from "axios";
 import { themeColor } from "../constant/const";
+import { contractUsers } from "../constant/Utils";
 
 function GuestLogin() {
   const { id, userMail, contactBookId, serverUrl } = useParams();
@@ -103,11 +104,19 @@ function GuestLogin() {
         } else {
           let _user = user.data.result;
           const parseId = localStorage.getItem("parseAppId");
+          const contractUserDetails = await contractUsers(_user.email);
           localStorage.setItem("UserInformation", JSON.stringify(_user));
           localStorage.setItem(
             `Parse/${parseId}/currentUser`,
             JSON.stringify(_user)
           );
+          if (contractUserDetails) {
+            localStorage.setItem(
+              "Extand_Class",
+              JSON.stringify(contractUserDetails)
+            );
+          }
+
           localStorage.setItem("username", _user.name);
           localStorage.setItem("accesstoken", _user.sessionToken);
           //save isGuestSigner true in local to handle login flow header in mobile view
diff --git a/apps/OpenSign/src/pages/PdfRequestFiles.js b/apps/OpenSign/src/pages/PdfRequestFiles.js
index 2c8c7e241..1025bdfc1 100644
--- a/apps/OpenSign/src/pages/PdfRequestFiles.js
+++ b/apps/OpenSign/src/pages/PdfRequestFiles.js
@@ -19,7 +19,8 @@ import {
   onImageSelect,
   onSaveSign,
   onSaveImage,
-  addDefaultSignatureImg
+  addDefaultSignatureImg,
+  radioButtonWidget
 } from "../constant/Utils";
 import Loader from "../primitives/LoaderWithMsg";
 import HandleError from "../primitives/HandleError";
@@ -48,6 +49,7 @@ function PdfRequestFiles() {
   const [imgWH, setImgWH] = useState({});
   const imageRef = useRef(null);
   const [handleError, setHandleError] = useState();
+  const [selectWidgetId, setSelectWidgetId] = useState("");
   const [isLoading, setIsLoading] = useState({
     isLoad: true,
     message: "This might take some time"
@@ -385,7 +387,8 @@ function PdfRequestFiles() {
           for (let j = 0; j < checkUser[0].placeHolder[i].pos.length; j++) {
             checkboxExist =
               checkUser[0].placeHolder[i].pos[j].type === "checkbox";
-            radioExist = checkUser[0].placeHolder[i].pos[j].type === "radio";
+            radioExist =
+              checkUser[0].placeHolder[i].pos[j].type === radioButtonWidget;
             if (checkboxExist) {
               requiredCheckbox = checkUser[0].placeHolder[i].pos.filter(
                 (position) =>
@@ -434,7 +437,8 @@ function PdfRequestFiles() {
             } else if (radioExist) {
               requiredRadio = checkUser[0].placeHolder[i].pos.filter(
                 (position) =>
-                  !position.options?.isReadOnly && position.type === "radio"
+                  !position.options?.isReadOnly &&
+                  position.type === radioButtonWidget
               );
               if (requiredRadio && requiredRadio?.length > 0) {
                 let checkSigned;
@@ -457,7 +461,7 @@ function PdfRequestFiles() {
               const requiredWidgets = checkUser[0].placeHolder[i].pos.filter(
                 (position) =>
                   position.options?.status === "required" &&
-                  position.type !== "radio" &&
+                  position.type !== radioButtonWidget &&
                   position.type !== "checkbox"
               );
               if (requiredWidgets && requiredWidgets?.length > 0) {
@@ -643,6 +647,7 @@ function PdfRequestFiles() {
       });
     }
   }
+  console.log("signer", signerPos);
   //function for update TourStatus
   const closeTour = async () => {
     setWidgetsTour(false);
@@ -1173,6 +1178,8 @@ function PdfRequestFiles() {
                   setIsInitial={setIsInitial}
                   setValidateAlert={setValidateAlert}
                   unSignedWidgetId={unSignedWidgetId}
+                  setSelectWidgetId={setSelectWidgetId}
+                  selectWidgetId={selectWidgetId}
                 />
               )}
             </div>
diff --git a/apps/OpenSign/src/pages/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js
index 9b46961c8..7fe365374 100644
--- a/apps/OpenSign/src/pages/PlaceHolderSign.js
+++ b/apps/OpenSign/src/pages/PlaceHolderSign.js
@@ -24,7 +24,10 @@ import {
   randomId,
   defaultWidthHeight,
   multiSignEmbed,
-  addWidgetOptions
+  addWidgetOptions,
+  textInputWidget,
+  textWidget,
+  radioButtonWidget
 } from "../constant/Utils";
 import RenderPdf from "../components/pdf/RenderPdf";
 import { useNavigate } from "react-router-dom";
@@ -76,6 +79,7 @@ function PlaceHolderSign() {
   const [isResize, setIsResize] = useState(false);
   const [zIndex, setZIndex] = useState(1);
   const [signKey, setSignKey] = useState();
+  const [tempSignerId, setTempSignerId] = useState("");
   const [pdfLoadFail, setPdfLoadFail] = useState({
     status: false,
     type: "load"
@@ -380,18 +384,16 @@ function PlaceHolderSign() {
           pos: dropData
         };
       }
-
       setSelectWidgetId(key);
       if (signer) {
         let filterSignerPos;
-        if (dragTypeValue === "label") {
+        if (dragTypeValue === textWidget) {
           filterSignerPos = signerPos.filter((data) => data.Role === "prefill");
         } else {
           filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
         }
 
         const { blockColor, Role } = signer;
-
         //adding placholder in existing signer pos array (placaholder)
         if (filterSignerPos.length > 0) {
           const getPlaceHolder = filterSignerPos[0].placeHolder;
@@ -412,7 +414,7 @@ function PlaceHolderSign() {
             };
             updatePlace.push(xyPos);
             let updatesignerPos;
-            if (dragTypeValue === "label") {
+            if (dragTypeValue === textWidget) {
               updatesignerPos = signerPos.map((x) =>
                 x.Role === "prefill" ? { ...x, placeHolder: updatePlace } : x
               );
@@ -425,7 +427,7 @@ function PlaceHolderSign() {
             setSignerPos(updatesignerPos);
           } else {
             let updatesignerPos;
-            if (dragTypeValue === "label") {
+            if (dragTypeValue === textWidget) {
               updatesignerPos = signerPos.map((x) =>
                 x.Role === "prefill"
                   ? { ...x, placeHolder: [...x.placeHolder, placeHolder] }
@@ -442,9 +444,8 @@ function PlaceHolderSign() {
           }
         } else {
           //adding new placeholder for selected signer in pos array (placeholder)
-          // const signerData = signerPos;
           let placeHolderPos;
-          if (dragTypeValue === "label") {
+          if (dragTypeValue === textWidget) {
             placeHolderPos = {
               signerPtr: {},
               signerObjId: "",
@@ -484,9 +485,12 @@ function PlaceHolderSign() {
           setShowDropdown(true);
         } else if (dragTypeValue === "checkbox") {
           setIsCheckbox(true);
-        } else if (dragTypeValue === "radio") {
+        } else if (dragTypeValue === radioButtonWidget) {
           setIsRadio(true);
-        } else if (dragTypeValue !== "label" && dragTypeValue !== "signature") {
+        } else if (
+          dragTypeValue !== textWidget &&
+          dragTypeValue !== "signature"
+        ) {
           setIsNameModal(true);
         }
         setWidgetType(dragTypeValue);
@@ -736,7 +740,7 @@ function PlaceHolderSign() {
 
     if (getPrefill && isLabel) {
       const alert = {
-        mssg: "label",
+        mssg: textWidget,
         alert: true
       };
       setIsSendAlert(alert);
@@ -1067,7 +1071,7 @@ function PlaceHolderSign() {
         const getPosData = getXYdata;
         const addSignPos = getPosData.map((position) => {
           if (position.key === signKey) {
-            if (widgetType === "radio") {
+            if (widgetType === radioButtonWidget) {
               if (addOption) {
                 return {
                   ...position,
@@ -1186,7 +1190,7 @@ function PlaceHolderSign() {
         const getPosData = getXYdata;
         const addSignPos = getPosData.map((position) => {
           if (position.key === signKey) {
-            if (position.type === "text") {
+            if (position.type === textInputWidget) {
               return {
                 ...position,
                 options: {
@@ -1406,13 +1410,13 @@ function PlaceHolderSign() {
 
               <ModalUi
                 headerColor={
-                  isSendAlert.mssg === "sure" || isSendAlert.mssg === "label"
+                  isSendAlert.mssg === "sure" || isSendAlert.mssg === textWidget
                     ? "#dc3545"
                     : isSendAlert.mssg === "confirm" && themeColor
                 }
                 isOpen={isSendAlert.alert}
                 title={
-                  isSendAlert.mssg === "sure" || isSendAlert.mssg === "label"
+                  isSendAlert.mssg === "sure" || isSendAlert.mssg === textWidget
                     ? "Fields required"
                     : isSendAlert.mssg === "confirm" && "Send Mail"
                 }
@@ -1421,7 +1425,7 @@ function PlaceHolderSign() {
                 <div style={{ height: "100%", padding: 20 }}>
                   {isSendAlert.mssg === "sure" ? (
                     <p>Please add field for all recipients.</p>
-                  ) : isSendAlert.mssg === "label" ? (
+                  ) : isSendAlert.mssg === textWidget ? (
                     <p>Please confirm that you have filled label widget.</p>
                   ) : (
                     isSendAlert.mssg === "confirm" && (
@@ -1553,11 +1557,14 @@ function PlaceHolderSign() {
                 allPages={allPages}
                 pageNumber={pageNumber}
                 signKey={signKey}
-                // signerObjId={signerObjId}
                 Id={uniqueId}
+                widgetType={widgetType}
+                setUniqueId={setUniqueId}
+                tempSignerId={tempSignerId}
+                setTempSignerId={setTempSignerId}
               />
               <DropdownWidgetOption
-                type="radio"
+                type={radioButtonWidget}
                 title="Radio group"
                 showDropdown={isRadio}
                 setShowDropdown={setIsRadio}
@@ -1639,6 +1646,8 @@ function PlaceHolderSign() {
                     setSelectWidgetId={setSelectWidgetId}
                     selectWidgetId={selectWidgetId}
                     handleNameModal={setIsNameModal}
+                    setTempSignerId={setTempSignerId}
+                    uniqueId={uniqueId}
                   />
                 )}
               </div>
diff --git a/apps/OpenSign/src/pages/SignyourselfPdf.js b/apps/OpenSign/src/pages/SignyourselfPdf.js
index 4b7501c56..2dd3ec38b 100644
--- a/apps/OpenSign/src/pages/SignyourselfPdf.js
+++ b/apps/OpenSign/src/pages/SignyourselfPdf.js
@@ -3,7 +3,6 @@ import { PDFDocument } from "pdf-lib";
 import "../styles/signature.css";
 import { themeColor } from "../constant/const";
 import axios from "axios";
-import moment from "moment";
 import Loader from "../primitives/LoaderWithMsg";
 import loader from "../assets/images/loader2.gif";
 import RenderAllPdfPage from "../components/pdf/RenderAllPdfPage";
@@ -25,7 +24,9 @@ import {
   onSaveSign,
   contractUsers,
   contactBook,
-  randomId
+  randomId,
+  getDate,
+  textInputWidget
 } from "../constant/Utils";
 import { useParams } from "react-router-dom";
 import Tour from "reactour";
@@ -308,13 +309,6 @@ function SignYourSelf() {
       setIsLoading(loadObj);
     }
   };
-
-  const getDate = () => {
-    const date = new Date();
-    const milliseconds = date.getTime();
-    const newDate = moment(milliseconds).format("MM/DD/YYYY");
-    return newDate;
-  };
   const getWidgetValue = (type) => {
     switch (type) {
       case "name":
@@ -333,6 +327,7 @@ function SignYourSelf() {
         return "";
     }
   };
+
   const addWidgetOptions = (type) => {
     switch (type) {
       case "signature":
@@ -348,7 +343,7 @@ function SignYourSelf() {
           name: "checkbox"
         };
 
-      case "text":
+      case textInputWidget:
         return {
           name: "text"
         };
@@ -386,7 +381,8 @@ function SignYourSelf() {
       case "date":
         return {
           name: "date",
-          defaultValue: getDate()
+          response: getDate(),
+          validation: { format: "MM/dd/yyyy", type: "date-format" }
         };
       case "image":
         return {
@@ -596,7 +592,6 @@ function SignYourSelf() {
       await signPdfFun(pdfBytes, documentId);
     }
   }
-
   //function for get digital signature
   const signPdfFun = async (base64Url, documentId) => {
     let singleSign = {
diff --git a/apps/OpenSign/src/pages/TemplatePlaceholder.js b/apps/OpenSign/src/pages/TemplatePlaceholder.js
index 41b43ecbd..76b5ef7ac 100644
--- a/apps/OpenSign/src/pages/TemplatePlaceholder.js
+++ b/apps/OpenSign/src/pages/TemplatePlaceholder.js
@@ -21,7 +21,10 @@ import {
   addZIndex,
   createDocument,
   defaultWidthHeight,
-  addWidgetOptions
+  addWidgetOptions,
+  textInputWidget,
+  textWidget,
+  radioButtonWidget
 } from "../constant/Utils";
 import RenderPdf from "../components/pdf/RenderPdf";
 import "../styles/AddUser.css";
@@ -442,9 +445,12 @@ const TemplatePlaceholder = () => {
           setShowDropdown(true);
         } else if (dragTypeValue === "checkbox") {
           setIsCheckbox(true);
-        } else if (dragTypeValue === "radio") {
+        } else if (dragTypeValue === radioButtonWidget) {
           setIsRadio(true);
-        } else if (dragTypeValue !== "label" && dragTypeValue !== "signature") {
+        } else if (
+          dragTypeValue !== textWidget &&
+          dragTypeValue !== "signature"
+        ) {
           setIsNameModal(true);
         }
         setCurrWidgetsDetails({});
@@ -986,7 +992,7 @@ const TemplatePlaceholder = () => {
         const getPosData = getXYdata;
         const addSignPos = getPosData.map((position) => {
           if (position.key === signKey) {
-            if (widgetType === "radio") {
+            if (widgetType === radioButtonWidget) {
               if (addOption) {
                 return {
                   ...position,
@@ -1106,7 +1112,7 @@ const TemplatePlaceholder = () => {
         const getPosData = getXYdata;
         const addSignPos = getPosData.map((position) => {
           if (position.key === signKey) {
-            if (position.type === "text") {
+            if (position.type === textInputWidget) {
               return {
                 ...position,
                 options: {
@@ -1305,7 +1311,7 @@ const TemplatePlaceholder = () => {
                 </div>
               </ModalUi>
               <DropdownWidgetOption
-                type="radio"
+                type={radioButtonWidget}
                 title="Radio group"
                 showDropdown={isRadio}
                 setShowDropdown={setIsRadio}