diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
index 1890ab5ca..fb6cc4f3d 100644
--- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
+++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
@@ -111,10 +111,6 @@ function SignYourSelf() {
       text: "signature"
     },
     canDrag: isdraggingEnable,
-    // options: {
-    //   // Set the delay for touch dragging
-    //   delay: { touch: 500 }, // Set the delay in milliseconds
-    // },
 
     collect: (monitor) => ({
       isDragSign: !!monitor.isDragging()
@@ -363,11 +359,13 @@ function SignYourSelf() {
                 : dragTypeValue === "date"
                   ? getDate()
                   : "";
+    const widgetWidth = defaultWidthHeight(dragTypeValue).width;
+    const widgetHeight = defaultWidthHeight(dragTypeValue).height;
 
     if (item === "onclick") {
       dropObj = {
-        xPosition: window.innerWidth / 2 - 100,
-        yPosition: window.innerHeight / 2 - 60,
+        xPosition: containerWH.width / 2 - widgetWidth / 2,
+        yPosition: containerWH.height / 2 - widgetHeight / 2,
         isDrag: false,
         isStamp:
           (dragTypeValue === "stamp" || dragTypeValue === "image") && true,
@@ -379,8 +377,7 @@ function SignYourSelf() {
           dragTypeValue === "name" ||
           dragTypeValue === "company" ||
           dragTypeValue === "job title" ||
-          dragTypeValue === "email" ||
-          dragTypeValue === "initials"
+          dragTypeValue === "email"
             ? calculateInitialWidthHeight(dragTypeValue, widgetValue).getWidth
             : dragTypeValue === "initials"
               ? defaultWidthHeight(dragTypeValue).width
@@ -389,8 +386,7 @@ function SignYourSelf() {
           dragTypeValue === "company" ||
           dragTypeValue === "name" ||
           dragTypeValue === "job title" ||
-          dragTypeValue === "email" ||
-          dragTypeValue === "initials"
+          dragTypeValue === "email"
             ? calculateInitialWidthHeight(dragTypeValue, widgetValue).getHeight
             : dragTypeValue === "initials"
               ? defaultWidthHeight(dragTypeValue).height
diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/allWidgets.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/allWidgets.js
index 7b73414e9..b4ae8cf59 100644
--- a/microfrontends/SignDocuments/src/Component/WidgetComponent/allWidgets.js
+++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/allWidgets.js
@@ -2,83 +2,6 @@ import React, { useRef, useState } from "react";
 import { getWidgetType } from "../../utils/Utils";
 
 function AllWidgets(props) {
-  const [backgroundColor, setBackgroundColor] = useState("");
-  const timeoutRef = useRef(null);
-  const touchStartTimestamp = useRef(0);
-  const [selectWidgetType, setSelectWidgetType] = useState("");
-
-  const touchTimeoutRef = useRef(null);
-  const [isTouchHold, setIsTouchHold] = useState(false);
-
-  const handleTouchStart = (type) => {
-    // Set a timeout for the long press event
-    touchStartTimestamp.current = Date.now();
-
-    // Set a timeout for the long press event
-    timeoutRef.current = setTimeout(() => {
-      // Check if the touch is still ongoing after the long press duration
-      if (Date.now() - touchStartTimestamp.current >= 1000) {
-        setTimeout(() => {
-          props.setIsDraggingEnable(true);
-        }, 1000);
-        setBackgroundColor("lightblue"); // Change the color after the long press
-        setSelectWidgetType(type);
-        props.setIsDraggingEnable(true);
-        if ("vibrate" in navigator) {
-          // Vibrate for 200 milliseconds
-          navigator.vibrate(200);
-        }
-      }
-    }, 1000); // Adjust the duration as needed
-  };
-
-  const handleTouchMove = () => {
-    // If the touch moves (indicating a drag), cancel the long press effect
-    // clearTimeout(timeoutRef.current);
-  };
-
-  const handleTouchEnd = () => {
-    // Clear the timeout when the touch ends before the long press duration
-    setTimeout(() => {
-      props.setIsDraggingEnable(false);
-      setBackgroundColor(""); // Change the color after the long press
-      setSelectWidgetType("");
-    }, 1000);
-
-    clearTimeout(timeoutRef.current);
-  };
-
-  // const handleTouchStart = () => {
-  //   touchTimeoutRef.current = setTimeout(() => {
-  //     setIsTouchHold(true);
-  //     setBackgroundColor("lightblue"); // Change the color after the long press
-  //           // setSelectWidgetType(type);
-  //           props.setIsDraggingEnable(true);
-  //           if ("vibrate" in navigator) {
-  //             // Vibrate for 200 milliseconds
-  //             navigator.vibrate(200);
-  //           }
-  //     // Start drag operation when touch-and-hold is detected
-  //     // props.dragSignature();
-  //     // props.dragSignatureSS();
-
-  //     console.log('go here');
-  //   }, 1000); // Adjust the duration for touch-and-hold
-  // };
-
-  // const handleTouchEnd = () => {
-  //   clearTimeout(touchTimeoutRef.current);
-  //   setIsTouchHold(false);
-  //    props.setIsDraggingEnable(false);
-  //     setBackgroundColor(""); // Change the color after the long press
-  //     setSelectWidgetType("");
-  // };
-  // const handleTouchMove = () => {
-  //   if (touchTimeoutRef.current) {
-  //     clearTimeout(touchTimeoutRef.current);
-  //     touchTimeoutRef.current = null;
-  //   }
-  // };
   return props.updateWidgets.map((item, ind) => {
     return (
       <div key={ind} style={{ marginBottom: "10px" }}>
@@ -89,36 +12,21 @@ function AllWidgets(props) {
               props.addPositionOfSignature("onclick", item);
           }}
           ref={(element) => {
-            // if (!props.isMobile) {
-            item.ref(element);
-            if (element) {
-              if (props?.signRef) {
-                props.signRef.current = element;
+            if (!props.isMobile) {
+              item.ref(element);
+              if (element) {
+                if (props?.signRef) {
+                  props.signRef.current = element;
+                }
               }
             }
-            // }
-            // props.dragSignature(element);
-            // props.dragSignatureSS(element)
-            // element && element.addEventListener("touchstart", handleTouchStart);
-            // element && element.addEventListener("touchend", handleTouchEnd);
           }}
-          // handleTouchMove={handleTouchMove}
           onMouseMove={props?.handleDivClick}
           onMouseDown={() => {
             props?.handleMouseLeave();
           }}
         >
-          {item.ref && props.isMobile
-            ? getWidgetType(
-                item,
-                props?.marginLeft,
-                handleTouchStart,
-                handleTouchEnd,
-                handleTouchMove,
-                backgroundColor,
-                selectWidgetType
-              )
-            : getWidgetType(item)}
+          {item.ref && getWidgetType(item, props?.marginLeft)}
         </div>
       </div>
     );
diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js
index 587a78838..044964f39 100644
--- a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js
+++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js
@@ -172,29 +172,37 @@ function Placeholder(props) {
                 props.pos.type === "email" ||
                 props.pos.type === "name" ||
                 props.pos.type === "company" ||
-                props.pos.type === "job title") && (
+                props.pos.type === "job title" ||
+                props.pos.type === "radio") && (
                 <i
                   onClick={(e) => {
                     e.stopPropagation();
                     if (props.pos.type === "checkbox") {
                       props.setIsCheckboxRequired(true);
+                    } else if (props.pos.type === "radio") {
+                      props.setIsRadio(true);
                     } else {
                       props.setIsValidate(true);
                     }
 
                     props.setSignKey(props.pos.key);
                     props.setUniqueId(props.data.Id);
+                    props.setWidgetType(props.pos.type);
                   }}
                   onTouchEnd={(e) => {
                     e.stopPropagation();
                     if (props.pos.type === "checkbox") {
                       props.setIsCheckboxRequired(true);
+                    }
+                    if (props.pos.type === "radio") {
+                      props.setIsRadio(true);
                     } else {
                       props.setIsValidate(true);
                     }
 
                     props.setSignKey(props.pos.key);
                     props.setUniqueId(props.data.Id);
+                    props.setWidgetType(props.pos.type);
                   }}
                   class="fa-solid fa-gear settingIcon"
                   style={{
@@ -409,7 +417,8 @@ function Placeholder(props) {
         topRight: false,
         bottomRight:
           props.data && props.isNeedSign
-            ? props.data?.signerObjId === props.signerObjId
+            ? props.data?.signerObjId === props.signerObjId &&
+              props.pos.type !== "radio"
               ? true
               : false
             : true,
@@ -504,7 +513,8 @@ function Placeholder(props) {
           }
         />
       ) : props.data && props.isNeedSign ? (
-        props.data?.signerObjId === props.signerObjId ? (
+        props.data?.signerObjId === props.signerObjId &&
+        props.pos.type !== "radio" ? (
           <BorderResize />
         ) : (
           <></>
diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js
index a32e05bd1..4da2d8605 100644
--- a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js
+++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js
@@ -11,6 +11,7 @@ function PlaceholderType(props) {
   const [validatePlaceholder, setValidatePlaceholder] = useState("");
   const inputRef = useRef(null);
   const [inputValue, setInputValue] = useState("");
+  const [isCheckedRadio, setIsCheckedRadio] = useState(false);
 
   const validateExpression = (regexValidation) => {
     let isValidate = regexValidation.test(inputValue);
@@ -66,6 +67,18 @@ function PlaceholderType(props) {
       setStartDate(updateDate);
     }
   }, []);
+
+  useEffect(() => {
+    onChangeInput(
+      isCheckedRadio,
+      props.pos.key,
+      props.xyPostion,
+      props.index,
+      props.setXyPostion,
+      props.data && props.data.signerObjId,
+      false
+    );
+  }, [isCheckedRadio]);
   useEffect(() => {
     if (props.selectDate) {
       const updateDate = new Date(props.saveDateFormat);
@@ -533,8 +546,10 @@ function PlaceholderType(props) {
         >
           <input
             type="radio"
-            // checked={checked}
-            // onChange={onChange}
+            checked={isCheckedRadio}
+            onClick={() => {
+              setIsCheckedRadio(!isCheckedRadio);
+            }}
           />
         </label>
       );
diff --git a/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js b/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js
index 04c29fdd9..cb2c73c3a 100644
--- a/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js
+++ b/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js
@@ -164,18 +164,18 @@ function FieldsComponent({
       isDragEmail: !!monitor.isDragging()
     })
   });
-  // const [, radio] = useDrag({
-  //   type: "BOX",
+  const [, radio] = useDrag({
+    type: "BOX",
 
-  //   item: {
-  //     type: "BOX",
-  //     id: 14,
-  //     text: "radio"
-  //   },
-  //   collect: (monitor) => ({
-  //     isDragRadio: !!monitor.isDragging()
-  //   })
-  // });
+    item: {
+      type: "BOX",
+      id: 14,
+      text: "radio"
+    },
+    collect: (monitor) => ({
+      isDragRadio: !!monitor.isDragging()
+    })
+  });
   const isMobile = window.innerWidth < 767;
   const scrollContainerRef = useRef(null);
   const [widget, setWidget] = useState([]);
@@ -211,8 +211,8 @@ function FieldsComponent({
       jobTitle,
       date,
       image,
-      email
-      // radio
+      email,
+      radio
     ];
     const getWidgetArray = widgets;
     const newUpdateSigner = getWidgetArray.map((obj, ind) => {
@@ -223,8 +223,7 @@ function FieldsComponent({
   }, []);
 
   const filterWidgets = widget.filter(
-    (data) => data.type !== "dropdown"
-    // && data.type !== "radio"
+    (data) => data.type !== "dropdown" && data.type !== "radio"
   );
   const updateWidgets = isSignYourself ? filterWidgets : widget;
 
@@ -327,43 +326,24 @@ function FieldsComponent({
                 borderTop: `2px solid ${themeColor()}`
               }}
             >
-              <Scrollbar
-                style={{ height: "50px", width: "100%" }}
-                // onScroll={handleScrollStart}
-                // onScrollStop={handleScrollEnd}
-                // onTouchEnd={handleScrollStart}
-                noScrollY={true}
+              <div
+                style={{
+                  display: "flex",
+                  overflowX: "scroll",
+                  whiteSpace: "nowrap",
+                  padding: "10px"
+                }}
               >
-                <div
-                  style={{
-                    display: "flex",
-                    // overflowX: "scroll",
-                    // whiteSpace: "nowrap",
-                    padding: "10px"
-                  }}
-                  //  onScroll={handleScroll}
-                  // onTouchStart={handleScrollStart}
-                  // onTouchMove={handleTouchMove}
-                  // onTouchEnd={handleTouchEnd}
-                >
-                  {/* {temp.map((data,ind) => {
-                    return <div style={{border:"1px solid red",padding:"20px"}} key={ind}>{data}</div>;
-                  })} */}
-                  <AllWidgets
-                    updateWidgets={updateWidgets}
-                    handleDivClick={handleDivClick}
-                    handleMouseLeave={handleMouseLeave}
-                    signRef={signRef}
-                    marginLeft={5}
-                    addPositionOfSignature={addPositionOfSignature}
-                    setIsDraggingEnable={setIsDraggingEnable}
-                    isMobile={isMobile}
-                    isdraggingEnable={isdraggingEnable}
-                    dragSignature={dragSignature}
-                    dragSignatureSS={dragSignatureSS}
-                  />
-                </div>
-              </Scrollbar>
+                <AllWidgets
+                  updateWidgets={updateWidgets}
+                  handleDivClick={handleDivClick}
+                  handleMouseLeave={handleMouseLeave}
+                  signRef={signRef}
+                  marginLeft={5}
+                  addPositionOfSignature={addPositionOfSignature}
+                  isMobile={isMobile}
+                />
+              </div>
             </div>
           </div>
         )
diff --git a/microfrontends/SignDocuments/src/Component/component/placeholderBorder.js b/microfrontends/SignDocuments/src/Component/component/placeholderBorder.js
deleted file mode 100644
index b387d929d..000000000
--- a/microfrontends/SignDocuments/src/Component/component/placeholderBorder.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from "react";
-import { themeColor } from "../../utils/ThemeColor/backColor";
-import { resizeBorderExtraWidth } from "../../utils/Utils";
-function PlaceholderBorder(props) {
-  const getResizeBorderExtraWidth = resizeBorderExtraWidth();
-
-  return (
-    <div
-      className="borderResize"
-      style={{
-        borderColor: themeColor(),
-        borderStyle: "dashed",
-        // width: props.pos.Width
-        //   ? props.pos.Width + getResizeBorderExtraWidth
-        //   : 150 + getResizeBorderExtraWidth,
-        // height: props.pos.Height
-        //   ? props.pos.Height + getResizeBorderExtraWidth
-        //   : 60 + getResizeBorderExtraWidth,
-        width:
-          props?.posWidth(props.pos, props?.isSignYourself) +
-          getResizeBorderExtraWidth,
-        height:
-          props?.posHeight(props.pos, props?.isSignYourself) +
-          getResizeBorderExtraWidth,
-        borderWidth: "0.2px",
-        overflow: "hidden"
-      }}
-    ></div>
-  );
-}
-
-export default PlaceholderBorder;
diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js
index 5ccfb177b..5a7f55012 100644
--- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js
+++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js
@@ -9,7 +9,7 @@ import {
   handleSignYourselfImageResize
 } from "../../utils/Utils";
 import EmailToast from "./emailToast";
-import PlaceholderBorder from "./placeholderBorder";
+// import PlaceholderBorder from "./placeholderBorder";
 import Placeholder from "../WidgetComponent/placeholder";
 
 pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
@@ -58,7 +58,8 @@ function RenderPdf({
   setIsCheckboxRequired,
   setIsValidate,
   setWidgetType,
-  setValidateAlert
+  setValidateAlert,
+  setIsRadio
 }) {
   const isMobile = window.innerWidth < 767;
   const newWidth = containerWH.width;
@@ -410,141 +411,6 @@ function RenderPdf({
         >
           <EmailToast isShow={successEmail} />
           {pdfLoadFail.status &&
-            // recipient
-            //   ? !pdfUrl &&
-            //     !isAlreadySign.mssg &&
-            //     xyPostion.length > 0 &&
-            //     xyPostion.map((data, ind) => {
-            //       return (
-            //         <React.Fragment key={ind}>
-            //           {data.pageNumber === pageNumber &&
-            //             data.pos.map((pos) => {
-            //               return (
-            //                 pos && (
-            //                   // <Rnd
-            //                   //   data-tut="reactourSecond"
-            //                   //   disableDragging={true}
-            //                   //   enableResizing={{
-            //                   //     top: false,
-            //                   //     right: false,
-            //                   //     bottom: false,
-            //                   //     left: false,
-            //                   //     topRight: false,
-            //                   //     bottomRight: true,
-            //                   //     bottomLeft: false,
-            //                   //     topLeft: false
-            //                   //   }}
-            //                   //   key={pos.key}
-            //                   //   bounds="parent"
-            //                   //   style={{
-            //                   //     cursor: "all-scroll",
-            //                   //     borderColor: themeColor(),
-            //                   //     borderStyle: "dashed",
-            //                   //     borderWidth: "0.1px",
-            //                   //     zIndex: "1",
-            //                   //     background: data.blockColor
-            //                   //       ? data.blockColor
-            //                   //       : "#daebe0"
-            //                   //   }}
-            //                   //   className="signYourselfBlock"
-            //                   //   onResize={(
-            //                   //     e,
-            //                   //     direction,
-            //                   //     ref,
-            //                   //     delta,
-            //                   //     position
-            //                   //   ) => {
-            //                   //     handleSignYourselfImageResize(
-            //                   //       ref,
-            //                   //       pos.key,
-            //                   //       xyPostion,
-            //                   //       index,
-            //                   //       setXyPostion
-            //                   //     );
-            //                   //   }}
-            //                   //   size={{
-            //                   //     width: posWidth(pos),
-            //                   //     height: posHeight(pos)
-            //                   //   }}
-            //                   //   lockAspectRatio={
-            //                   //     pos.Width ? pos.Width / pos.Height : 2.5
-            //                   //   }
-            //                   //   //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divide by scale
-            //                   //   //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
-            //                   //   default={{
-            //                   //     x: xPos(pos),
-            //                   //     y: yPos(pos)
-            //                   //   }}
-            //                   //   onClick={() => {
-            //                   //     setIsSignPad(true);
-            //                   //     setSignKey(pos.key);
-            //                   //     setIsStamp(
-            //                   //       pos?.isStamp ? pos.isStamp : false
-            //                   //     );
-            //                   //   }}
-            //                   // >
-            //                   //   <BorderResize />
-            //                   //   {pos.SignUrl ? (
-            //                   //     <img
-            //                   //       alt="no img"
-            //                   //       onClick={() => {
-            //                   //         setIsSignPad(true);
-            //                   //         setSignKey(pos.key);
-            //                   //       }}
-            //                   //       src={pos.SignUrl}
-            //                   //       style={{
-            //                   //         width: "100%",
-            //                   //         height: "100%",
-            //                   //         objectFit: "contain"
-            //                   //       }}
-            //                   //     />
-            //                   //   ) : (
-            //                   //     <div
-            //                   //       style={{
-            //                   //         fontSize: "10px",
-            //                   //         color: "black",
-
-            //                   //         justifyContent: "center",
-            //                   //         marginTop: "0px"
-            //                   //       }}
-            //                   //     >
-            //                   //       <div>{pos.type}</div>
-
-            //                   //       {handleUserName(
-            //                   //         data.signerObjId,
-            //                   //         data.Role
-            //                   //       )}
-            //                   //     </div>
-            //                   //   )}
-            //                   // </Rnd>
-            //                   <Placeholder
-            //                     pos={pos}
-            //                     setSignKey={setSignKey}
-            //                     setIsStamp={setIsStamp}
-            //                     handleSignYourselfImageResize={
-            //                       handleSignYourselfImageResize
-            //                     }
-            //                     index={index}
-            //                     xyPostion={xyPostion}
-            //                     setXyPostion={setXyPostion}
-            //                     pdfOriginalWidth={pdfOriginalWidth}
-            //                     containerWH={containerWH}
-            //                     setIsSignPad={setIsSignPad}
-            //                     isShowDropdown={true}
-            //                     isRecipient={true}
-            //                     isSignYourself={false}
-            //                     xPos={xPos}
-            //                     yPos={yPos}
-            //                     posWidth={posWidth}
-            //                     posHeight={posHeight}
-            //                   />
-            //                 )
-            //               );
-            //             })}
-            //         </React.Fragment>
-            //       );
-            //     })
-            //   :
             (pdfRequest
               ? signerPos.map((data, key) => {
                   return (
@@ -778,6 +644,7 @@ function RenderPdf({
                                         }
                                         setIsValidate={setIsValidate}
                                         setWidgetType={setWidgetType}
+                                        setIsRadio={setIsRadio}
                                       />
                                     </React.Fragment>
                                   );
@@ -975,7 +842,7 @@ function RenderPdf({
               }}
               loading={"Loading Document.."}
               onLoadSuccess={pageDetails}
-              ref={pdfRef}
+              // ref={pdfRef}
               file={
                 pdfUrl
                   ? pdfUrl
@@ -1238,6 +1105,7 @@ function RenderPdf({
                                           }
                                           setIsValidate={setIsValidate}
                                           setWidgetType={setWidgetType}
+                                          setIsRadio={setIsRadio}
                                         />
                                       </React.Fragment>
                                     );
@@ -1370,7 +1238,7 @@ function RenderPdf({
               }}
               loading={"Loading Document.."}
               onLoadSuccess={pageDetails}
-              ref={pdfRef}
+              // ref={pdfRef}
               file={
                 pdfUrl
                   ? pdfUrl
diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js
index 3804ac92a..a559749e7 100644
--- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js
+++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js
@@ -95,7 +95,10 @@ function PlaceHolderSign() {
   const [widgetType, setWidgetType] = useState("");
   const [isUiLoading, setIsUiLoading] = useState(false);
   const [isRadio, setIsRadio] = useState(false);
-  const [radioFieldName, setRadioFieldName] = useState({});
+  const [radioData, setRadioData] = useState({
+    data: "",
+    label: ""
+  });
   const color = [
     "#93a3db",
     "#e6c3db",
@@ -361,24 +364,28 @@ function PlaceHolderSign() {
         let filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
         let dropData = [];
         let placeHolder;
+        const dragTypeValue = item?.text ? item.text : monitor.type;
+        // const widgetWidth = defaultWidthHeight(dragTypeValue).width;
+        // const widgetHeight = defaultWidthHeight(dragTypeValue).height;
+
         if (item === "onclick") {
           const dropObj = {
             //onclick put placeholder center on pdf
-            xPosition: window.innerWidth / 2 - 100,
+            xPosition: window.innerWidth / 2 - 150,
             yPosition: window.innerHeight / 2 - 60,
             isStamp:
-              (monitor.type === "stamp" || monitor.type === "image") && true,
+              (dragTypeValue === "stamp" || dragTypeValue === "image") && true,
             key: key,
             isDrag: false,
             scale: scale,
             isMobile: isMobile,
             yBottom: window.innerHeight / 2 - 60,
             zIndex: posZIndex,
-            type: monitor.type,
+            type: dragTypeValue,
             widgetValue:
-              monitor.type === "checkbox"
+              dragTypeValue === "checkbox"
                 ? false
-                : monitor.type === "date"
+                : dragTypeValue === "date"
                   ? getDate()
                   : ""
           };
@@ -387,7 +394,7 @@ function PlaceHolderSign() {
             pageNumber: pageNumber,
             pos: dropData
           };
-        } else if (item.type === "BOX") {
+        } else {
           const offset = monitor.getClientOffset();
           //adding and updating drop position in array when user drop signature button in div
           const containerRect = document
@@ -400,7 +407,8 @@ function PlaceHolderSign() {
           const dropObj = {
             xPosition: signBtnPosition[0] ? x - signBtnPosition[0].xPos : x,
             yPosition: signBtnPosition[0] ? y - signBtnPosition[0].yPos : y,
-            isStamp: (item.text === "stamp" || item.text === "image") && true,
+            isStamp:
+              (dragTypeValue === "stamp" || dragTypeValue === "image") && true,
             key: key,
             isDrag: false,
             firstXPos: signBtnPosition[0] && signBtnPosition[0].xPos,
@@ -411,9 +419,9 @@ function PlaceHolderSign() {
             zIndex: posZIndex,
             type: item.text,
             widgetValue:
-              item.text === "checkbox"
+              dragTypeValue === "checkbox"
                 ? false
-                : monitor.type === "date"
+                : dragTypeValue === "date"
                   ? getDate()
                   : ""
           };
@@ -484,13 +492,15 @@ function PlaceHolderSign() {
           }
           setSignerPos((prev) => [...prev, placeHolderPos]);
         }
-        if (item.text === "dropdown" || monitor.type === "dropdown") {
+        if (dragTypeValue === "dropdown") {
           setShowDropdown(true);
-          setSignKey(key);
-        } else if (item.text === "checkbox" || monitor.type === "checkbox") {
+        } else if (dragTypeValue === "checkbox") {
           setIsCheckboxRequired(true);
-          setSignKey(key);
+        } else if (dragTypeValue === "radio") {
+          setIsRadio(true);
         }
+        setWidgetType(dragTypeValue);
+        setSignKey(key);
         if (isMobile) {
           setIsDraggingEnable(false);
         }
@@ -1060,12 +1070,11 @@ function PlaceHolderSign() {
               }
             } else if (widgetType === "radio") {
               return {
-                ...position
-                // widgetName: dropdownName,
-                // widgetOption: dropdownOptions
+                ...position,
+                widgetName: radioData.label,
+                widgetOption: [radioData.data]
               };
-            }
-            {
+            } else {
               return {
                 ...position,
                 validation: regularExpression
@@ -1090,6 +1099,8 @@ function PlaceHolderSign() {
 
         setSignerPos(newUpdateSigner);
         setIsCheckboxRequired(false);
+        setIsRadio(false);
+        setRadioData({});
         setSelectRequiredType("Optional");
       }
     }
@@ -1110,6 +1121,16 @@ function PlaceHolderSign() {
       }, 1500);
     }
   };
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+
+    // Update the state with the new value for the corresponding input
+    setRadioData((prevValues) => ({
+      ...prevValues,
+      [name]: value
+    }));
+  };
+
   return (
     <>
       <Title title={state?.title ? state.title : "New Document"} />
@@ -1442,66 +1463,79 @@ function PlaceHolderSign() {
               </ModalUi>
               <ModalUi
                 //isValidate
-                isOpen={false}
+                isOpen={isRadio}
                 title={"Radio group"}
               >
                 <div style={{ height: "100%", padding: 20 }}>
-                  <div className="radioGroup">
-                    <label
-                      style={{
-                        marginRight: "5px",
-                        fontSize: "14px",
-                        fontWeight: "500"
-                      }}
-                    >
-                      Field name:
-                    </label>
-
-                    <input
-                      placeholder="Enter field name"
-                      className="drodown-input radioGroupInput"
-                      // onChange={(e) => setTextValidate(e.target.value)}
-                    />
-
-                    <label
-                      style={{
-                        marginRight: "5px",
-                        fontSize: "14px",
-                        fontWeight: "500"
-                      }}
-                    >
-                      Data label:
-                    </label>
-
-                    <input
-                      placeholder="Enter data"
-                      className="drodown-input radioGroupInput"
-                      // onChange={(e) => setTextValidate(e.target.value)}
-                    />
-                  </div>
-
-                  <div
-                    style={{
-                      height: "1px",
-                      backgroundColor: "#9f9f9f",
-                      width: "100%",
-                      marginTop: "15px",
-                      marginBottom: "15px"
+                  <form
+                    onSubmit={(e) => {
+                      e.preventDefault();
+                      handleApplyWidgetsStatus();
                     }}
-                  ></div>
-                  <button
-                    onClick={() => {
-                      handleValidateInput();
-                    }}
-                    style={{
-                      background: themeColor()
-                    }}
-                    type="button"
-                    // disabled={!selectCopyType}
-                    className="finishBtn"
                   >
-                    Apply
-                  </button>
+                    <div className="radioGroup">
+                      <label
+                        style={{
+                          marginRight: "5px",
+                          fontSize: "14px",
+                          fontWeight: "500"
+                        }}
+                      >
+                        Field name:
+                      </label>
+
+                      <input
+                        required
+                        placeholder="Enter field name"
+                        className="drodown-input radioGroupInput"
+                        // onChange={(e) => setTextValidate(e.target.value)}
+                        id="label"
+                        name="label"
+                        value={radioData.label}
+                        onChange={handleInputChange}
+                      />
+
+                      <label
+                        style={{
+                          marginRight: "5px",
+                          fontSize: "14px",
+                          fontWeight: "500"
+                        }}
+                      >
+                        Data label:
+                      </label>
+
+                      <input
+                        required
+                        placeholder="Enter data"
+                        className="drodown-input radioGroupInput"
+                        id="data"
+                        name="data"
+                        value={radioData.data}
+                        onChange={handleInputChange}
+                      />
+                    </div>
+
+                    <div
+                      style={{
+                        height: "1px",
+                        backgroundColor: "#9f9f9f",
+                        width: "100%",
+                        marginTop: "15px",
+                        marginBottom: "15px"
+                      }}
+                    ></div>
+                    <button
+                      style={{
+                        background: themeColor()
+                      }}
+                      type="submit"
+                      // disabled={!selectCopyType}
+                      className="finishBtn"
+                    >
+                      Apply
+                    </button>
+                  </form>
                 </div>
               </ModalUi>
               <PlaceholderCopy
@@ -1568,6 +1602,7 @@ function PlaceHolderSign() {
                     setIsCheckboxRequired={setIsCheckboxRequired}
                     setIsValidate={setIsValidate}
                     setWidgetType={setWidgetType}
+                    setIsRadio={setIsRadio}
                   />
                 )}
               </div>
diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js
index bb9b53c53..ab8692e21 100644
--- a/microfrontends/SignDocuments/src/utils/Utils.js
+++ b/microfrontends/SignDocuments/src/utils/Utils.js
@@ -231,36 +231,23 @@ export const widgets = [
     type: "email",
     icon: "fa-solid fa-envelope",
     iconSize: "20px"
+  },
+  {
+    type: "radio",
+    icon: "fa-regular fa-circle-dot",
+    iconSize: "20px"
   }
-  // {
-  //   type: "radio",
-  //   icon: "fa-regular fa-circle-dot",
-  //   iconSize: "20px"
-  // }
 ];
 
-export const getWidgetType = (
-  item,
-  marginLeft,
-  handleTouchStart,
-  handleTouchEnd,
-  handleTouchMove,
-  backgroundColor,
-  selectWidgetType
-) => {
+export const getWidgetType = (item, marginLeft) => {
   return (
     <>
       <div
-        onTouchStart={() => handleTouchStart && handleTouchStart(item.type)}
-        onTouchEnd={handleTouchEnd && handleTouchEnd}
-        onTouchMove={handleTouchMove && handleTouchMove}
         className="signatureBtn widgets"
         style={{
           boxShadow:
             "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)",
-          marginLeft: marginLeft && `${marginLeft}px`,
-          background:
-            selectWidgetType === item.type && backgroundColor && backgroundColor
+          marginLeft: marginLeft && `${marginLeft}px`
         }}
       >
         <div
@@ -380,12 +367,12 @@ export const defaultWidthHeight = (type) => {
         width: 50,
         height: 20
       };
-    // case "radio":
-    //   obj = {
-    //     width: 15,
-    //     height: 15
-    //   };
-    //   return obj;
+    case "radio":
+      obj = {
+        width: 15,
+        height: 15
+      };
+      return obj;
     default:
       obj = {
         width: 150,
@@ -1023,9 +1010,9 @@ export const multiSignEmbed = async (
           }
         }
       };
-      const checkboxId = "checkbox_" + imgData.key;
+      const randomboxId = "randombox_" + imgData.key;
       if (imgData.type === "checkbox") {
-        const checkBox = form.createCheckBox(checkboxId);
+        const checkBox = form.createCheckBox(randomboxId);
 
         checkBox.addToPage(page, {
           x: xPos(imgData),
@@ -1059,7 +1046,7 @@ export const multiSignEmbed = async (
           color: rgb(0, 0, 0)
         });
       } else if (imgData.type === "dropdown") {
-        const dropdown = form.createDropdown(checkboxId);
+        const dropdown = form.createDropdown(randomboxId);
         dropdown.addOptions(imgData.widgetOption);
         dropdown.select(imgData.widgetValue);
         dropdown.addToPage(page, {
@@ -1069,6 +1056,16 @@ export const multiSignEmbed = async (
           height: scaleHeight
         });
         dropdown.enableReadOnly();
+      } else if (imgData.type === "radio") {
+        const rocketField = form.createRadioGroup(randomboxId);
+        rocketField.addOptionToPage(imgData.widgetOption[0], page, {
+          x: xPos(imgData),
+          y: yPos(imgData),
+          width: scaleWidth,
+          height: scaleHeight
+        });
+        rocketField.select(imgData.widgetOption[0]);
+        rocketField.enableReadOnly();
       } else {
         page.drawImage(img, {
           x: xPos(imgData),
@@ -1219,38 +1216,8 @@ export const handleSignYourselfImageResize = (
   setXyPostion,
   index
 ) => {
-  // const updateFilter = xyPostion[index].pos.filter(
-  //   (data) => data.key === key && data.Width && data.Height
-  // );
-
-  // if (updateFilter.length > 0) {
-  //   const getXYdata = xyPostion[index].pos;
-  //   const getPosData = getXYdata;
-  //   const addSign = getPosData.map((url, ind) => {
-  //     if (url.key === key) {
-  //       return {
-  //         ...url,
-  //         Width: ref.offsetWidth,
-  //         Height: ref.offsetHeight,
-  //         IsResize: true
-  //       };
-  //     }
-  //     return url;
-  //   });
-
-  //   const newUpdateUrl = xyPostion.map((obj, ind) => {
-  //     if (ind === index) {
-  //       return { ...obj, pos: addSign };
-  //     }
-  //     return obj;
-  //   });
-
-  //   setXyPostion(newUpdateUrl);
-  // } else {
   const getXYdata = xyPostion[index].pos;
-
   const getPosData = getXYdata;
-
   const addSign = getPosData.map((url, ind) => {
     if (url.key === key) {
       return {
@@ -1270,7 +1237,6 @@ export const handleSignYourselfImageResize = (
     return obj;
   });
   setXyPostion(newUpdateUrl);
-  // }
 };
 
 //function for call cloud function signPdf and generate digital signature