diff --git a/apps/OpenSign/src/components/sidebar/Sidebar.js b/apps/OpenSign/src/components/sidebar/Sidebar.js
index 008c8520b..b88094154 100644
--- a/apps/OpenSign/src/components/sidebar/Sidebar.js
+++ b/apps/OpenSign/src/components/sidebar/Sidebar.js
@@ -38,7 +38,7 @@ const Sidebar = ({ isOpen, closeSidebar }) => {
     <div
       className={`${
         isOpen ? "block" : "hidden"
-      } bg-white text-[#444] h-screen w-full md:w-[300px] overflow-y-auto transform transition-transform ${
+      } bg-white text-[#444] h-screen w-full md:w-[300px] overflow-y-auto transform transition-transform z-40 ${
         isOpen ? "translate-x-0" : "-translate-x-full"
       }`}
     >
diff --git a/apps/OpenSign/src/layout/HomeLayout.js b/apps/OpenSign/src/layout/HomeLayout.js
index 579d4924d..eaa479716 100644
--- a/apps/OpenSign/src/layout/HomeLayout.js
+++ b/apps/OpenSign/src/layout/HomeLayout.js
@@ -166,15 +166,15 @@ const HomeLayout = ({ children }) => {
   };
   return (
     <div>
-      <div className="sticky top-0 z-30">
+      <div className="sticky top-0 z-50">
         <Header showSidebar={showSidebar} />
       </div>
-      <div className="flex md:flex-row flex-col">
+      <div className="flex md:flex-row flex-col z-50">
         <Sidebar isOpen={isOpen} closeSidebar={closeSidebar} />
 
         <div className="relative h-screen flex flex-col justify-between w-full overflow-y-auto">
           <div className="bg-[#eef1f5] p-3">{children}</div>
-          <div>
+          <div className="z-30">
             <Footer />
           </div>
         </div>
diff --git a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js
index d27df51b0..cd004168a 100644
--- a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js
+++ b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js
@@ -535,7 +535,7 @@ function PdfFile() {
               <div className="dropMenuBD">
                 <div
                   id="menu-container"
-                  class={isShowSort ? "dropdown show" : "dropdown"}
+                  className={isShowSort ? "dropdown show" : "dropdown"}
                   onClick={() => setIsShowSort(!isShowSort)}
                 >
                   <div className=" sort  " data-toggle="dropdown">
diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
index f99299197..9a88fa42e 100644
--- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
+++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
@@ -25,7 +25,6 @@ import Header from "./component/header";
 import RenderPdf from "./component/renderPdf";
 
 function PdfRequestFiles() {
-
   const { docId } = useParams();
   const [pdfDetails, setPdfDetails] = useState([]);
   const [signedSigners, setSignedSigners] = useState([]);
diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
index 8a25152e8..4b761d7ff 100644
--- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
+++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from "react";
- 
+
 import { PDFDocument, rgb } from "pdf-lib";
 import "../css/./signature.css";
 import sign from "../assests/sign3.png";
@@ -1167,7 +1167,6 @@ function SignYourSelf() {
                 pdfOriginalWidth={pdfOriginalWidth}
                 pdfNewWidth={pdfNewWidth}
                 drop={drop}
-              
                 successEmail={successEmail}
                 nodeRef={nodeRef}
                 handleTabDrag={handleTabDrag}
@@ -1192,8 +1191,9 @@ function SignYourSelf() {
           {/*if document is not completed then render signature and stamp button in the right side */}
           {/*else document is  completed then render signed by signer name in the right side */}
           {!documentStatus.isCompleted ? (
-            <div data-tut="reactourFirst">
+            <div>
               <FieldsComponent
+                dataTut="reactourFirst"
                 pdfUrl={pdfUrl}
                 sign={sign}
                 stamp={stamp}
@@ -1213,6 +1213,7 @@ function SignYourSelf() {
                 xyPostion={xyPostion}
                 isSignYourself={true}
                 addPositionOfSignature={addPositionOfSignature}
+                isMailSend={false}
               />
             </div>
           ) : (
diff --git a/microfrontends/SignDocuments/src/Component/component/emailComponent.js b/microfrontends/SignDocuments/src/Component/component/emailComponent.js
index 7ae35f5cb..e866263e0 100644
--- a/microfrontends/SignDocuments/src/Component/component/emailComponent.js
+++ b/microfrontends/SignDocuments/src/Component/component/emailComponent.js
@@ -191,7 +191,7 @@ function EmailComponent({
               className="btn btn-primary btn-sm"
             >
               <i
-                class="fa fa-print"
+                className="fa fa-print"
                 style={{
                   fontSize: "15px",
                   marginRight: "3px",
@@ -332,7 +332,7 @@ function EmailComponent({
                 marginTop: "10px",
                 color: "white",
               }}
-              class="fa fa-plus"
+              className="fa fa-plus"
               aria-hidden="true"
             ></i>
           </span>
diff --git a/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js b/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js
index a7700de78..7fc4cd005 100644
--- a/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js
+++ b/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import * as Select from "@radix-ui/react-select";
 import classnames from "classnames";
+
 function FieldsComponent({
   pdfUrl,
   sign,
@@ -19,19 +20,24 @@ function FieldsComponent({
   isDragSignatureSS,
   isSignYourself,
   addPositionOfSignature,
-  signerPos,
+
   signersdata,
   isSelectListId,
   setSignerObjId,
   setIsSelectId,
   setContractName,
   isSigners,
+  dataTut,
+  dataTut2,
+  setIsShowEmail,
+  isMailSend,
+  selectedEmail,
+  setSelectedEmail,
 }) {
   const signStyle = pdfUrl ? "disableSign" : "signatureBtn";
 
   const isMobile = window.innerWidth < 712;
-  const [isShowSort, setIsShowSort] = useState(false);
-  const [selectedEmail, setSelectedEmail] = useState("");
+
   const SelectItem = React.forwardRef(
     ({ children, className, ...props }, forwardedRef) => {
       return (
@@ -46,266 +52,176 @@ function FieldsComponent({
       );
     }
   );
-console.log("sign",isSignYourself)
+
+  const color = [
+    "#93a3db",
+    "#e6c3db",
+    "#c0e3bc",
+    "#bce3db",
+    "#b8ccdb",
+    "#ceb8db",
+    "#ffccff",
+    "#99ffcc",
+    "#cc99ff",
+    "#ffcc99",
+    "#66ccff",
+    "#ffffcc",
+  ];
+
   return (
     <>
-      <div className="signerComponent">
-        <div
-          style={{
-            background: themeColor(),
-
-            padding: "5px",
-          }}
-        >
-          <span className="signedStyle">Fields</span>
-        </div>
-
-        <div className="signLayoutContainer1">
-          {pdfUrl ? (
-            <>
-              <button className={signStyle} disabled={true}>
-                <span
-                  style={{
-                    fontWeight: "400",
-                    fontSize: "15px",
-                    padding: "3px 20px 0px 20px",
-                    color: "#bfbfbf",
-                  }}
-                >
-                  Signature
-                </span>
-
-                <img
-                  alt="sign img"
-                  style={{
-                    width: "30px",
-                    height: "28px",
-                    background: "#d3edeb",
-                  }}
-                  src={sign}
-                />
-              </button>
-              <button className={signStyle} disabled={true}>
-                <span
-                  style={{
-                    fontWeight: "400",
-                    fontSize: "15px",
-                    padding: "3px 0px 0px 35px",
-                    color: "#bfbfbf",
-                  }}
-                >
-                  Stamp
-                </span>
-
-                <img
-                  alt="stamp img"
-                  style={{
-                    width: "25px",
-                    height: "28px",
-                    background: "#d3edeb",
-                  }}
-                  src={stamp}
-                />
-              </button>
-            </>
-          ) : (
-            <>
+      {isMobile && isSignYourself ? (
+        !isMailSend && (
+          <div
+            data-tut={dataTut}
+            id="navbar"
+            className="stickyfooter"
+            style={{ width: window.innerWidth + "px" }}
+          >
+            {isSigners && (
               <div
+                data-tut={dataTut}
+                style={{
+                  background: isSelectListId
+                    ? color[isSelectListId % color.length]
+                    : color[0],
+                  padding: "10px 20px",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <span style={{ fontSize: "18px", fontWeight: "500" }}>
+                  Signer :
+                </span>
+
+                <Select.Root
+                  onValueChange={(obj) => {
+                    const [selectedKey, selectedData] = obj.split("|");
+                    const parseData = JSON.parse(selectedData);
+
+                    setSignerObjId(parseData.objectId);
+                    setIsSelectId(selectedKey);
+                    setContractName(parseData.className);
+                    setSelectedEmail(true);
+                  }}
+                >
+                  <Select.Trigger
+                    className="SelectTrigger"
+                    style={{
+                      background: isSelectListId
+                        ? color[isSelectListId % color.length]
+                        : color[0],
+                    }}
+                    aria-label="Food"
+                  >
+                    <Select.Value placeholder="Select signer.." />
+                    <Select.Icon className="SelectIcon">
+                      <i
+                        style={{
+                          marginTop: "5px",
+                          marginLeft: "5px",
+                          color: "#3b15d1",
+                          fontSize: "20px",
+                        }}
+                        className="fa fa-angle-down"
+                        aria-hidden="true"
+                      ></i>
+                    </Select.Icon>
+                  </Select.Trigger>
+                  <Select.Portal>
+                    <Select.Content
+                      className="SelectContent"
+                      style={{ zIndex: "5000" }}
+                    >
+                      <Select.ScrollUpButton className="SelectScrollButton">
+                        <i
+                          style={{
+                            marginTop: "5px",
+                            marginLeft: "5px",
+                            color: "#3b15d1",
+                            fontSize: "20px",
+                          }}
+                          className="fa fa-angle-down"
+                          aria-hidden="true"
+                        ></i>
+                      </Select.ScrollUpButton>
+                      <Select.Viewport className="SelectViewport">
+                        <Select.Group>
+                          {signersdata.Signers.map((obj, ind) => {
+                            return (
+                              <SelectItem
+                                selected
+                                key={ind}
+                                value={`${ind}|${JSON.stringify(obj)}`}
+                                // value={(obj)}
+                              >
+                                {" "}
+                                {obj.Email}
+                              </SelectItem>
+                            );
+                          })}
+                          {/* <SelectItem value="orange">Orange</SelectItem>
+                        <SelectItem value="apple">Apple</SelectItem>
+                        <SelectItem value="grape"></SelectItem> */}
+                        </Select.Group>
+                      </Select.Viewport>
+                      <Select.ScrollDownButton className="SelectScrollButton">
+                        <i
+                          style={{
+                            marginTop: "5px",
+                            marginLeft: "5px",
+                            color: "#3b15d1",
+                            fontSize: "20px",
+                          }}
+                          className="fa fa-angle-down"
+                          aria-hidden="true"
+                        ></i>
+                      </Select.ScrollDownButton>
+                    </Select.Content>
+                  </Select.Portal>
+                </Select.Root>
+              </div>
+            )}
+            <div
+              data-tut={dataTut2}
+              className="signLayoutContainer2"
+              style={{ backgroundColor: themeColor() }}
+            >
+              <div
+                onClick={() => {
+                  if (isSigners) {
+                    if (selectedEmail) {
+                      addPositionOfSignature("onclick", false);
+                    } else {
+                      setIsShowEmail(true);
+                    }
+                  } else {
+                    addPositionOfSignature("onclick", false);
+                  }
+                }}
                 ref={(element) => {
-                  dragSignature(element);
+                  dragSignatureSS(element);
                   if (element) {
                     signRef.current = element;
                     // const height = signRef && signRef.current.offsetHeight;
                     // const width = signRef && signRef.current.offsetWidth;
                   }
                 }}
-                className={signStyle}
-                onMouseMove={handleDivClick}
-                onMouseDown={handleMouseLeave}
                 style={{
-                  opacity: isDragSign ? 0.5 : 1,
-                  boxShadow:
-                    "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)",
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  userSelect: "none",
+                  opacity: isDragSignatureSS ? 0.5 : 1,
+                  backgroundImage: `url(${sign})`,
+                  backgroundSize: "70% 70%",
+                  backgroundRepeat: "no-repeat",
+                  backgroundPosition: "center center",
+                  paddingBottom: "2.2rem",
                 }}
               >
-                <span
-                  style={{
-                    fontWeight: "400",
-                    fontSize: "15px",
-                    padding: "3px 20px 0px 20px",
-                    color: "black",
-                  }}
-                >
-                  Signature
-                </span>
-                <img
-                  alt="sign img"
-                  style={{
-                    width: "30px",
-                    height: "28px",
-                    background: themeColor(),
-                  }}
-                  src={sign}
-                />
-              </div>
-              <div
-                ref={(element) => {
-                  dragStamp(element);
-                  dragRef.current = element;
-                  if (isDragStamp) {
-                    // setIsStamp(true);
-                  }
-                }}
-                className={!pdfUrl ? signStyle : "disableSign"}
-                disabled={pdfUrl && true}
-                onMouseMove={handleDivClick}
-                onMouseDown={handleMouseLeave}
-                style={{
-                  opacity: isDragStamp ? 0.5 : 1,
-                  boxShadow:
-                    "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)",
-                }}
-              >
-                <span
-                  style={{
-                    fontWeight: "400",
-                    fontSize: "15px",
-                    padding: "3px 0px 0px 35px",
-                    color: !pdfUrl ? "black" : "#bfbfbf",
-                  }}
-                >
-                  Stamp
-                </span>
-
-                <img
-                  alt="stamp img"
-                  style={{
-                    width: "25px",
-                    height: "28px",
-                    background: themeColor(),
-                  }}
-                  src={stamp}
-                />
-              </div>
-            </>
-          )}
-        </div>
-      </div>
-      {isMobile && isSignYourself && (
-        <div
-          id="navbar"
-          className="stickyfooter"
-          style={{ width: window.innerWidth + "px" }}
-        >
-                {isSigners && (
-          <div
-            style={{
-              background: "#887abf",
-              padding: "10px 20px",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-            }}
-          >
-            <span style={{ fontSize: "18px", fontWeight: "500" }}>
-              Signer :
-            </span>
-       
-              <Select.Root onValueChange={(e) => console.log("value", e)}>
-                <Select.Trigger
-                  onValueChange={(e) => console.log("value", e)}
-                  className="SelectTrigger"
-                  aria-label="Food"
-                >
-                  <Select.Value placeholder="Select signer" />
-                  <Select.Icon className="SelectIcon">
-                    <i
-                      style={{
-                        marginTop: "5px",
-                        marginLeft: "5px",
-                        color: "#3b15d1",
-                        fontSize: "20px",
-                      }}
-                      class="fa fa-angle-down"
-                      aria-hidden="true"
-                    ></i>
-                  </Select.Icon>
-                </Select.Trigger>
-                <Select.Portal>
-                  <Select.Content
-                    className="SelectContent"
-                    style={{ zIndex: "5000" }}
-                  >
-                    <Select.ScrollUpButton className="SelectScrollButton">
-                      <i
-                        style={{
-                          marginTop: "5px",
-                          marginLeft: "5px",
-                          color: "#3b15d1",
-                          fontSize: "20px",
-                        }}
-                        class="fa fa-angle-down"
-                        aria-hidden="true"
-                      ></i>
-                    </Select.ScrollUpButton>
-                    <Select.Viewport className="SelectViewport">
-                      <Select.Group>
-                        {signersdata.Signers.map((obj, ind) => {
-                          return (
-                            <SelectItem key={ind} value={selectedEmail}>
-                              {" "}
-                              {obj.Email}
-                            </SelectItem>
-                          );
-                        })}
-                      </Select.Group>
-                    </Select.Viewport>
-                    <Select.ScrollDownButton className="SelectScrollButton">
-                      <i
-                        style={{
-                          marginTop: "5px",
-                          marginLeft: "5px",
-                          color: "#3b15d1",
-                          fontSize: "20px",
-                        }}
-                        class="fa fa-angle-down"
-                        aria-hidden="true"
-                      ></i>
-                    </Select.ScrollDownButton>
-                  </Select.Content>
-                </Select.Portal>
-              </Select.Root>
-            
-          </div>
-                )}
-          <div
-            className="signLayoutContainer2"
-            style={{ backgroundColor: themeColor() }}
-          >
-            <div
-              onClick={() => addPositionOfSignature("onclick", false)}
-              ref={(element) => {
-                dragSignatureSS(element);
-                if (element) {
-                  signRef.current = element;
-                  // const height = signRef && signRef.current.offsetHeight;
-                  // const width = signRef && signRef.current.offsetWidth;
-                }
-              }}
-              style={{
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                userSelect: "none",
-                opacity: isDragSignatureSS ? 0.5 : 1,
-                backgroundImage: `url(${sign})`,
-                backgroundSize: "70% 70%",
-                backgroundRepeat: "no-repeat",
-                backgroundPosition: "center center",
-                paddingBottom: "2.2rem",
-              }}
-            >
-              {/* <img
+                {/* <img
                 alt="sign img"
                 style={{
                   width: "30px",
@@ -314,49 +230,193 @@ console.log("sign",isSignYourself)
                 }}
                 src={sign}
               /> */}
-              <span
+                <span
+                  style={{
+                    color: "white",
+                    fontSize: "12px",
+                    position: "relative",
+                    top: "2.6rem",
+                  }}
+                >
+                  Signature
+                </span>
+              </div>
+              <div
+                onClick={() => addPositionOfSignature("onclick", true)}
+                ref={(element) => {
+                  dragStampSS(element);
+                  dragRef.current = element;
+                }}
+                onMouseMove={handleDivClick}
+                onMouseDown={handleMouseLeave}
                 style={{
-                  color: "white",
-                  fontSize: "12px",
-                  position: "relative",
-                  top: "2.6rem",
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  userSelect: "none",
+                  backgroundImage: `url(${stamp})`,
+                  backgroundSize: "32px 33px",
+                  backgroundRepeat: "no-repeat",
+                  backgroundPosition: "center center",
+                  paddingBottom: "2.2rem",
                 }}
               >
-                Signature
-              </span>
-            </div>
-            <div
-              onClick={() => addPositionOfSignature("onclick", true)}
-              ref={(element) => {
-                dragStampSS(element);
-                dragRef.current = element;
-              }}
-              onMouseMove={handleDivClick}
-              onMouseDown={handleMouseLeave}
-              style={{
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                userSelect: "none",
-                backgroundImage: `url(${stamp})`,
-                backgroundSize: "32px 33px",
-                backgroundRepeat: "no-repeat",
-                backgroundPosition: "center center",
-                paddingBottom: "2.2rem",
-              }}
-            >
-              <span
-                style={{
-                  color: "white",
-                  fontSize: "12px",
-                  position: "relative",
-                  top: "2.6rem",
-                }}
-              >
-                Stamp
-              </span>
+                <span
+                  style={{
+                    color: "white",
+                    fontSize: "12px",
+                    position: "relative",
+                    top: "2.6rem",
+                  }}
+                >
+                  Stamp
+                </span>
+              </div>
             </div>
           </div>
+        )
+      ) : (
+        <div data-tut={dataTut} className="signerComponent">
+          <div
+            style={{
+              background: themeColor(),
+
+              padding: "5px",
+            }}
+          >
+            <span className="signedStyle">Fields</span>
+          </div>
+
+          <div className="signLayoutContainer1">
+            {pdfUrl ? (
+              <>
+                <button className={signStyle} disabled={true}>
+                  <span
+                    style={{
+                      fontWeight: "400",
+                      fontSize: "15px",
+                      padding: "3px 20px 0px 20px",
+                      color: "#bfbfbf",
+                    }}
+                  >
+                    Signature
+                  </span>
+
+                  <img
+                    alt="sign img"
+                    style={{
+                      width: "30px",
+                      height: "28px",
+                      background: "#d3edeb",
+                    }}
+                    src={sign}
+                  />
+                </button>
+                <button className={signStyle} disabled={true}>
+                  <span
+                    style={{
+                      fontWeight: "400",
+                      fontSize: "15px",
+                      padding: "3px 0px 0px 35px",
+                      color: "#bfbfbf",
+                    }}
+                  >
+                    Stamp
+                  </span>
+
+                  <img
+                    alt="stamp img"
+                    style={{
+                      width: "25px",
+                      height: "28px",
+                      background: "#d3edeb",
+                    }}
+                    src={stamp}
+                  />
+                </button>
+              </>
+            ) : (
+              <>
+                <div
+                  ref={(element) => {
+                    dragSignature(element);
+                    if (element) {
+                      signRef.current = element;
+                      // const height = signRef && signRef.current.offsetHeight;
+                      // const width = signRef && signRef.current.offsetWidth;
+                    }
+                  }}
+                  className={signStyle}
+                  onMouseMove={handleDivClick}
+                  onMouseDown={handleMouseLeave}
+                  style={{
+                    opacity: isDragSign ? 0.5 : 1,
+                    boxShadow:
+                      "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)",
+                  }}
+                >
+                  <span
+                    style={{
+                      fontWeight: "400",
+                      fontSize: "15px",
+                      padding: "3px 20px 0px 20px",
+                      color: "black",
+                    }}
+                  >
+                    Signature
+                  </span>
+                  <img
+                    alt="sign img"
+                    style={{
+                      width: "30px",
+                      height: "28px",
+                      background: themeColor(),
+                    }}
+                    src={sign}
+                  />
+                </div>
+                <div
+                  ref={(element) => {
+                    dragStamp(element);
+                    dragRef.current = element;
+                    if (isDragStamp) {
+                      // setIsStamp(true);
+                    }
+                  }}
+                  className={!pdfUrl ? signStyle : "disableSign"}
+                  disabled={pdfUrl && true}
+                  onMouseMove={handleDivClick}
+                  onMouseDown={handleMouseLeave}
+                  style={{
+                    opacity: isDragStamp ? 0.5 : 1,
+                    boxShadow:
+                      "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)",
+                  }}
+                >
+                  <span
+                    style={{
+                      fontWeight: "400",
+                      fontSize: "15px",
+                      padding: "3px 0px 0px 35px",
+                      color: !pdfUrl ? "black" : "#bfbfbf",
+                    }}
+                  >
+                    Stamp
+                  </span>
+
+                  <img
+                    alt="stamp img"
+                    style={{
+                      width: "25px",
+                      height: "28px",
+                      background: themeColor(),
+                    }}
+                    src={stamp}
+                  />
+                </div>
+              </>
+            )}
+          </div>
         </div>
       )}
     </>
diff --git a/microfrontends/SignDocuments/src/Component/component/header.js b/microfrontends/SignDocuments/src/Component/component/header.js
index 640038b03..22cd2d671 100644
--- a/microfrontends/SignDocuments/src/Component/component/header.js
+++ b/microfrontends/SignDocuments/src/Component/component/header.js
@@ -32,6 +32,7 @@ function Header({
   isShowHeader,
   decline,
   currentSigner,
+  dataTut4,
 }) {
   const isMobile = window.innerWidth < 712;
   const navigate = useNavigate();
@@ -74,403 +75,7 @@ function Header({
       style={{ paddingBottom: "5px", paddingTop: "5px" }}
       className="mobileHead"
     >
-      <div className="signatureHeader headerBtn">
-        <PrevNext
-          pageNumber={pageNumber}
-          allPages={allPages}
-          changePage={changePage}
-        />
-
-        {recipient ? (
-          pdfUrl || isAlreadySign.mssg ? (
-            <div style={{ display: "flex", flexDirection: "row" }}>
-              {pdfDetails[0] && pdfDetails.length > 0 && (
-                //    <Certificate
-                //    pdfData={completePdfData}
-                // />
-                <PDFDownloadLink
-                  document={<Certificate pdfData={pdfDetails} />}
-                  fileName={`completion certificate-${
-                    pdfDetails[0] && pdfDetails[0].Name
-                  }.pdf`}
-                >
-                  {({ blob, url, loading, error }) =>
-                    loading ? (
-                      "Loading document..."
-                    ) : (
-                      <button
-                        type="button"
-                        className="defaultBtn certificateBtn"
-                        style={{
-                          display: "flex",
-                          flexDirection: "row",
-                          alignItems: "center",
-                        }}
-                      >
-                        <i
-                          class="fa fa-certificate"
-                          style={{
-                            color: "white",
-                            fontSize: "15px",
-                            marginRight: "3px",
-                          }}
-                          aria-hidden="true"
-                        ></i>
-                        Certificate
-                      </button>
-                    )
-                  }
-                </PDFDownloadLink>
-              )}
-              <button
-                onClick={handleToPrint}
-                style={{
-                  display: "flex",
-                  flexDirection: "row",
-                  alignItems: "center",
-                }}
-                className="defaultBtn printBtn"
-              >
-                <i
-                  class="fa fa-print"
-                  style={{
-                    fontSize: "15px",
-                    marginRight: "3px",
-                    color: "white",
-                  }}
-                  aria-hidden="true"
-                ></i>
-                Print
-              </button>
-
-              <button
-                type="button"
-                style={{
-                  display: "flex",
-                  flexDirection: "row",
-                  alignItems: "center",
-                }}
-                className="defaultBtn downloadBtn"
-                onClick={() => handleDownloadPdf()}
-              >
-                <i
-                  className="fa fa-download"
-                  style={{
-                    color: "white",
-                    fontSize: "15px",
-                    marginRight: "3px",
-                  }}
-                  aria-hidden="true"
-                ></i>
-                Download
-              </button>
-            </div>
-          ) : (
-            <div style={{ display: "flex", flexDirection: "row" }}>
-              <button
-                style={{
-                  background: "#de4337",
-                }}
-                className="finishBtn hoverCss"
-                onClick={() => {
-                  handleDeclinePdfAlert();
-                }}
-              >
-                Decline
-              </button>
-
-              <button
-                data-tut="reactourThird"
-                style={{
-                  background: !pdfUrl ? "#188ae2" : "#d3edeb",
-                }}
-                className="finishBtn sendHover"
-                onClick={() => {
-                  if (!pdfUrl) {
-                    embedImages();
-                  }
-                }}
-              >
-                Finish
-              </button>
-            </div>
-          )
-        ) : pdfUrl || (documentStatus && documentStatus.isCompleted) ? (
-          <div style={{ display: "flex", flexDirection: "row" }}>
-            <PDFDownloadLink
-              document={<Certificate pdfData={pdfDetails} />}
-              fileName={`completion certificate-${
-                pdfDetails[0] && pdfDetails[0].Name
-              }.pdf`}
-            >
-              {({ blob, url, loading, error }) =>
-                loading ? (
-                  "Loading document..."
-                ) : (
-                  <button
-                    type="button"
-                    style={{
-                      display: "flex",
-                      flexDirection: "row",
-                      alignItems: "center",
-                    }}
-                    className="defaultBtn certificateBtn"
-                  >
-                    <i
-                      class="fa fa-certificate"
-                      style={{
-                        color: "white",
-                        fontSize: "15px",
-                        marginRight: "3px",
-                      }}
-                      aria-hidden="true"
-                    ></i>
-                    Certificate
-                  </button>
-                )
-              }
-            </PDFDownloadLink>
-            <button
-              onClick={handleToPrint}
-              type="button"
-              style={{
-                display: "flex",
-                flexDirection: "row",
-                alignItems: "center",
-              }}
-              className="defaultBtn printBtn"
-            >
-              <i
-                class="fa fa-print"
-                style={{
-                  fontSize: "15px",
-                  marginRight: "3px",
-                  color: "white",
-                }}
-                aria-hidden="true"
-              ></i>
-              Print
-            </button>
-            <button
-              type="button"
-              className="defaultBtn downloadBtn"
-              style={{
-                display: "flex",
-                flexDirection: "row",
-                alignItems: "center",
-                marginLeft: "10px",
-              }}
-              onClick={() => handleDownloadPdf()}
-            >
-              <i
-                className="fa fa-download"
-                style={{
-                  color: "white",
-                  fontSize: "15px",
-                  marginRight: "3px",
-                }}
-                aria-hidden="true"
-              ></i>
-              Download
-            </button>
-          </div>
-        ) : isPlaceholder ? (
-          <>
-            {!isMailSend &&
-              signersdata.Signers &&
-              signersdata.Signers.length !== signerPos.length && (
-                <div>
-                  {signerPos.length === 0 ? (
-                    <span style={{ fontSize: "13px", color: "#f5405e" }}>
-                      Add all {signersdata.Signers.length - signerPos.length}{" "}
-                      recipients signature
-                    </span>
-                  ) : (
-                    <span style={{ fontSize: "13px", color: "#f5405e" }}>
-                      Add {signersdata.Signers.length - signerPos.length} more
-                      recipients signature
-                    </span>
-                  )}
-                </div>
-              )}
-
-            <div>
-              <button
-                onClick={() => {
-                  navigate(-1);
-                }}
-                type="button"
-                className="defaultBtn backBtn"
-              >
-                Back
-              </button>
-
-              <button
-                data-tut="reactourFour"
-                style={{
-                  background: !isMailSend ? "#188ae2" : "#d3edeb",
-                }}
-                onClick={() => {
-                  alertSendEmail();
-                }}
-                className="finishBtn sendHover"
-              >
-                Send
-              </button>
-            </div>
-          </>
-        ) : isPdfRequestFiles ? (
-          isSigned ? (
-            <div style={{ display: "flex", flexDirection: "row" }}>
-              {isCompleted.isCertificate && (
-                <PDFDownloadLink
-                  document={<Certificate pdfData={pdfDetails} />}
-                  fileName={`completion certificate-${
-                    pdfDetails[0] && pdfDetails[0].Name
-                  }.pdf`}
-                >
-                  {({ blob, url, loading, error }) =>
-                    loading ? (
-                      "Loading document..."
-                    ) : (
-                      <button
-                        type="button"
-                        className="defaultBtn certificateBtn"
-                        style={{
-                          display: "flex",
-                          flexDirection: "row",
-                          alignItems: "center",
-                        }}
-                      >
-                        <i
-                          class="fa fa-certificate"
-                          style={{
-                            color: "white",
-                            fontSize: "15px",
-                            marginRight: "3px",
-                          }}
-                          aria-hidden="true"
-                        ></i>
-                        Certificate
-                      </button>
-                    )
-                  }
-                </PDFDownloadLink>
-              )}
-              <button
-                onClick={handleToPrint}
-                type="button"
-                className="defaultBtn printBtn"
-                style={{
-                  display: "flex",
-                  flexDirection: "row",
-                  alignItems: "center",
-                }}
-              >
-                <i
-                  class="fa fa-print"
-                  style={{
-                    fontSize: "15px",
-                    marginRight: "3px",
-                    color: "white",
-                  }}
-                  aria-hidden="true"
-                ></i>
-                Print
-              </button>
-
-              <button
-                type="button"
-                className="defaultBtn downloadBtn"
-                style={{
-                  display: "flex",
-                  flexDirection: "row",
-                  alignItems: "center",
-                }}
-                onClick={() => handleDownloadPdf()}
-              >
-                <i
-                  className="fa fa-download"
-                  style={{
-                    color: "white",
-                    fontSize: "15px",
-                    marginRight: "3px",
-                  }}
-                  aria-hidden="true"
-                ></i>
-                Download
-              </button>
-            </div>
-          ) : (
-            <div>
-              <button
-                onClick={() => {
-                  navigate(-1);
-                }}
-                type="button"
-                className="defaultBtn backBtn"
-              >
-                Back
-              </button>
-              {currentSigner && (
-                <>
-                  <button
-                    style={{
-                      background: "#de4337",
-                    }}
-                    className="finishBtn hoverCss"
-                    onClick={() => {
-                      handleDeclinePdfAlert();
-                    }}
-                  >
-                    Decline
-                  </button>
-                  <button
-                    style={{
-                      background: "#188ae2",
-                    }}
-                    type="button"
-                    className="finishBtn sendHover"
-                    onClick={() => {
-                      embedImages();
-                    }}
-                  >
-                    Finish
-                  </button>
-                </>
-              )}
-            </div>
-          )
-        ) : (
-          <div>
-            <button
-              onClick={() => {
-                navigate(-1);
-              }}
-              type="button"
-              className="defaultBtn backBtn"
-            >
-              Back
-            </button>
-
-            <button
-              style={{
-                background: "#188ae2",
-              }}
-              type="button"
-              className="finishBtn sendHover"
-              onClick={() => {
-                if (!pdfUrl) {
-                  embedImages();
-                }
-              }}
-            >
-              Finish
-            </button>
-          </div>
-        )}
-      </div>
-      {isMobile && isShowHeader && (
+      {isMobile && isShowHeader ? (
         <div
           id="navbar"
           className="stickyHead"
@@ -530,7 +135,7 @@ function Header({
                       fontSize: "16px",
                     }}
                   >
-                    <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
+                    <i className="fa fa-ellipsis-v" aria-hidden="true"></i>
                   </div>
                 </DropdownMenu.Trigger>
 
@@ -549,7 +154,11 @@ function Header({
                           flexDirection: "row",
                         }}
                       >
-                        <i class="fa fa-arrow-down" aria-hidden="true" style={{marginRight:"2px"}}></i>
+                        <i
+                          className="fa fa-arrow-down"
+                          aria-hidden="true"
+                          style={{ marginRight: "2px" }}
+                        ></i>
                         Download
                       </div>
                     </DropdownMenu.Item>
@@ -560,32 +169,31 @@ function Header({
                           pdfDetails[0] && pdfDetails[0].Name
                         }.pdf`}
                       >
-                        {({ blob, url, loading, error }) =>
-                        <>
-                        {console.log("error",error)}
-                        {loading ? (
-                            "Loading document..."
-                          ) : (
-                            <div
-                              style={{
-                                display: "flex",
-                                flexDirection: "row",
-                              }}
-                            >
-                              <i
-                                class="fa fa-certificate"
+                        {({ blob, url, loading, error }) => (
+                          <>
+                            {console.log("error", error)}
+                            {loading ? (
+                              "Loading document..."
+                            ) : (
+                              <div
                                 style={{
-                                  fontSize: "15px",
-                                  marginRight: "3px",
+                                  display: "flex",
+                                  flexDirection: "row",
                                 }}
-                                aria-hidden="true"
-                              ></i>
-                              Certificate
-                            </div>
-                          )}
-                        </>
-                          
-                        }
+                              >
+                                <i
+                                  className="fa fa-certificate"
+                                  style={{
+                                    fontSize: "15px",
+                                    marginRight: "3px",
+                                  }}
+                                  aria-hidden="true"
+                                ></i>
+                                Certificate
+                              </div>
+                            )}
+                          </>
+                        )}
                       </PDFDownloadLink>
                     </DropdownMenu.Item>
                   </DropdownMenu.Content>
@@ -614,44 +222,445 @@ function Header({
                         Decline
                       </div>
                     )}
-                    {isPlaceholder ?(
+                    {isPlaceholder ? (
                       <div
-                      onClick={() => {
-                        alertSendEmail();
-                      }}
-                      style={{
-                        color: themeColor(),
-                        border: "none",
-                        fontWeight: "650",
-                        fontSize: "16px",
-                      }}
-                    >
-                     Send
-                    </div>
-                    ):(
+                        onClick={() => {
+                          if (!isMailSend) {
+                            alertSendEmail();
+                          }
+                        }}
+                        style={{
+                          color: isMailSend ? "gray" : themeColor(),
+                          border: "none",
+                          fontWeight: "650",
+                          fontSize: "16px",
+                        }}
+                        data-tut={dataTut4}
+                      >
+                        Send
+                      </div>
+                    ) : (
                       <div
-                      onClick={() => {
-                        if (!pdfUrl) {
-                          embedImages();
-                        }
-                      }}
-                      style={{
-                        color: themeColor(),
-                        border: "none",
-                        fontWeight: "650",
-                        fontSize: "16px",
-                      }}
-                    >
-                      Finish
-                    </div>
+                        onClick={() => {
+                          if (!pdfUrl) {
+                            embedImages();
+                          }
+                        }}
+                        style={{
+                          color: themeColor(),
+                          border: "none",
+                          fontWeight: "650",
+                          fontSize: "16px",
+                        }}
+                      >
+                        Finish
+                      </div>
                     )}
-                     
                   </>
                 )}
               </div>
             )}
           </div>
         </div>
+      ) : (
+        <div className="signatureHeader headerBtn">
+          <PrevNext
+            pageNumber={pageNumber}
+            allPages={allPages}
+            changePage={changePage}
+          />
+
+          {recipient ? (
+            pdfUrl || isAlreadySign.mssg ? (
+              <div style={{ display: "flex", flexDirection: "row" }}>
+                {pdfDetails[0] && pdfDetails.length > 0 && (
+                  //    <Certificate
+                  //    pdfData={completePdfData}
+                  // />
+                  <PDFDownloadLink
+                    document={<Certificate pdfData={pdfDetails} />}
+                    fileName={`completion certificate-${
+                      pdfDetails[0] && pdfDetails[0].Name
+                    }.pdf`}
+                  >
+                    {({ blob, url, loading, error }) =>
+                      loading ? (
+                        "Loading document..."
+                      ) : (
+                        <button
+                          type="button"
+                          className="defaultBtn certificateBtn"
+                          style={{
+                            display: "flex",
+                            flexDirection: "row",
+                            alignItems: "center",
+                          }}
+                        >
+                          <i
+                            className="fa fa-certificate"
+                            style={{
+                              color: "white",
+                              fontSize: "15px",
+                              marginRight: "3px",
+                            }}
+                            aria-hidden="true"
+                          ></i>
+                          Certificate
+                        </button>
+                      )
+                    }
+                  </PDFDownloadLink>
+                )}
+                <button
+                  onClick={handleToPrint}
+                  style={{
+                    display: "flex",
+                    flexDirection: "row",
+                    alignItems: "center",
+                  }}
+                  className="defaultBtn printBtn"
+                >
+                  <i
+                    className="fa fa-print"
+                    style={{
+                      fontSize: "15px",
+                      marginRight: "3px",
+                      color: "white",
+                    }}
+                    aria-hidden="true"
+                  ></i>
+                  Print
+                </button>
+
+                <button
+                  type="button"
+                  style={{
+                    display: "flex",
+                    flexDirection: "row",
+                    alignItems: "center",
+                  }}
+                  className="defaultBtn downloadBtn"
+                  onClick={() => handleDownloadPdf()}
+                >
+                  <i
+                    className="fa fa-download"
+                    style={{
+                      color: "white",
+                      fontSize: "15px",
+                      marginRight: "3px",
+                    }}
+                    aria-hidden="true"
+                  ></i>
+                  Download
+                </button>
+              </div>
+            ) : (
+              <div style={{ display: "flex", flexDirection: "row" }}>
+                <button
+                  style={{
+                    background: "#de4337",
+                  }}
+                  className="finishBtn hoverCss"
+                  onClick={() => {
+                    handleDeclinePdfAlert();
+                  }}
+                >
+                  Decline
+                </button>
+
+                <button
+                  data-tut="reactourThird"
+                  style={{
+                    background: !pdfUrl ? "#188ae2" : "#d3edeb",
+                  }}
+                  className="finishBtn sendHover"
+                  onClick={() => {
+                    if (!pdfUrl) {
+                      embedImages();
+                    }
+                  }}
+                >
+                  Finish
+                </button>
+              </div>
+            )
+          ) : pdfUrl || (documentStatus && documentStatus.isCompleted) ? (
+            <div style={{ display: "flex", flexDirection: "row" }}>
+              <PDFDownloadLink
+                document={<Certificate pdfData={pdfDetails} />}
+                fileName={`completion certificate-${
+                  pdfDetails[0] && pdfDetails[0].Name
+                }.pdf`}
+              >
+                {({ blob, url, loading, error }) =>
+                  loading ? (
+                    "Loading document..."
+                  ) : (
+                    <button
+                      type="button"
+                      style={{
+                        display: "flex",
+                        flexDirection: "row",
+                        alignItems: "center",
+                      }}
+                      className="defaultBtn certificateBtn"
+                    >
+                      <i
+                        className="fa fa-certificate"
+                        style={{
+                          color: "white",
+                          fontSize: "15px",
+                          marginRight: "3px",
+                        }}
+                        aria-hidden="true"
+                      ></i>
+                      Certificate
+                    </button>
+                  )
+                }
+              </PDFDownloadLink>
+              <button
+                onClick={handleToPrint}
+                type="button"
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  alignItems: "center",
+                }}
+                className="defaultBtn printBtn"
+              >
+                <i
+                  className="fa fa-print"
+                  style={{
+                    fontSize: "15px",
+                    marginRight: "3px",
+                    color: "white",
+                  }}
+                  aria-hidden="true"
+                ></i>
+                Print
+              </button>
+              <button
+                type="button"
+                className="defaultBtn downloadBtn"
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  alignItems: "center",
+                  marginLeft: "10px",
+                }}
+                onClick={() => handleDownloadPdf()}
+              >
+                <i
+                  className="fa fa-download"
+                  style={{
+                    color: "white",
+                    fontSize: "15px",
+                    marginRight: "3px",
+                  }}
+                  aria-hidden="true"
+                ></i>
+                Download
+              </button>
+            </div>
+          ) : isPlaceholder ? (
+            <>
+              {!isMailSend &&
+                signersdata.Signers &&
+                signersdata.Signers.length !== signerPos.length && (
+                  <div>
+                    {signerPos.length === 0 ? (
+                      <span style={{ fontSize: "13px", color: "#f5405e" }}>
+                        Add all {signersdata.Signers.length - signerPos.length}{" "}
+                        recipients signature
+                      </span>
+                    ) : (
+                      <span style={{ fontSize: "13px", color: "#f5405e" }}>
+                        Add {signersdata.Signers.length - signerPos.length} more
+                        recipients signature
+                      </span>
+                    )}
+                  </div>
+                )}
+
+              <div>
+                <button
+                  onClick={() => {
+                    navigate(-1);
+                  }}
+                  type="button"
+                  className="defaultBtn backBtn"
+                >
+                  Back
+                </button>
+
+                <button
+                  disabled={isMailSend && true}
+                  data-tut="reactourFour"
+                  style={{
+                    background: isMailSend ? "rgb(203, 203, 203)" : "#188ae2",
+                    color: isMailSend && "rgb(77, 75, 75)",
+                  }}
+                  onClick={() => {
+                    alertSendEmail();
+                  }}
+                  className={isMailSend ? "sendMail" : "sendMail sendHover"}
+                >
+                  Send
+                </button>
+              </div>
+            </>
+          ) : isPdfRequestFiles ? (
+            isSigned ? (
+              <div style={{ display: "flex", flexDirection: "row" }}>
+                {isCompleted.isCertificate && (
+                  <PDFDownloadLink
+                    document={<Certificate pdfData={pdfDetails} />}
+                    fileName={`completion certificate-${
+                      pdfDetails[0] && pdfDetails[0].Name
+                    }.pdf`}
+                  >
+                    {({ blob, url, loading, error }) =>
+                      loading ? (
+                        "Loading document..."
+                      ) : (
+                        <button
+                          type="button"
+                          className="defaultBtn certificateBtn"
+                          style={{
+                            display: "flex",
+                            flexDirection: "row",
+                            alignItems: "center",
+                          }}
+                        >
+                          <i
+                            className="fa fa-certificate"
+                            style={{
+                              color: "white",
+                              fontSize: "15px",
+                              marginRight: "3px",
+                            }}
+                            aria-hidden="true"
+                          ></i>
+                          Certificate
+                        </button>
+                      )
+                    }
+                  </PDFDownloadLink>
+                )}
+                <button
+                  onClick={handleToPrint}
+                  type="button"
+                  className="defaultBtn printBtn"
+                  style={{
+                    display: "flex",
+                    flexDirection: "row",
+                    alignItems: "center",
+                  }}
+                >
+                  <i
+                    className="fa fa-print"
+                    style={{
+                      fontSize: "15px",
+                      marginRight: "3px",
+                      color: "white",
+                    }}
+                    aria-hidden="true"
+                  ></i>
+                  Print
+                </button>
+
+                <button
+                  type="button"
+                  className="defaultBtn downloadBtn"
+                  style={{
+                    display: "flex",
+                    flexDirection: "row",
+                    alignItems: "center",
+                  }}
+                  onClick={() => handleDownloadPdf()}
+                >
+                  <i
+                    className="fa fa-download"
+                    style={{
+                      color: "white",
+                      fontSize: "15px",
+                      marginRight: "3px",
+                    }}
+                    aria-hidden="true"
+                  ></i>
+                  Download
+                </button>
+              </div>
+            ) : (
+              <div>
+                <button
+                  onClick={() => {
+                    navigate(-1);
+                  }}
+                  type="button"
+                  className="defaultBtn backBtn"
+                >
+                  Back
+                </button>
+                {currentSigner && (
+                  <>
+                    <button
+                      style={{
+                        background: "#de4337",
+                      }}
+                      className="finishBtn hoverCss"
+                      onClick={() => {
+                        handleDeclinePdfAlert();
+                      }}
+                    >
+                      Decline
+                    </button>
+                    <button
+                      style={{
+                        background: "#188ae2",
+                      }}
+                      type="button"
+                      className="finishBtn sendHover"
+                      onClick={() => {
+                        embedImages();
+                      }}
+                    >
+                      Finish
+                    </button>
+                  </>
+                )}
+              </div>
+            )
+          ) : (
+            <div>
+              <button
+                onClick={() => {
+                  navigate(-1);
+                }}
+                type="button"
+                className="defaultBtn backBtn"
+              >
+                Back
+              </button>
+
+              <button
+                style={{
+                  background: "#188ae2",
+                }}
+                type="button"
+                className="finishBtn sendHover"
+                onClick={() => {
+                  if (!pdfUrl) {
+                    embedImages();
+                  }
+                }}
+              >
+                Finish
+              </button>
+            </div>
+          )}
+        </div>
       )}
     </div>
   );
diff --git a/microfrontends/SignDocuments/src/Component/component/modalComponent.js b/microfrontends/SignDocuments/src/Component/component/modalComponent.js
index bf071624c..f7a293712 100644
--- a/microfrontends/SignDocuments/src/Component/component/modalComponent.js
+++ b/microfrontends/SignDocuments/src/Component/component/modalComponent.js
@@ -2,25 +2,42 @@ import React from "react";
 import Modal from "react-bootstrap/Modal";
 import ModalHeader from "react-bootstrap/esm/ModalHeader";
 
-function ModalComponent({ isShow, type }) {
+function ModalComponent({ isShow, type,setIsShowEmail }) {
   return (
     <Modal show={isShow}>
       <ModalHeader className="bg-danger" style={{ color: "white" }}>
         {type === "pdfFail" ? (
           <span>Failed to load pdf!</span>
+        ) : type === "signersAlert" ? (
+          <span>Select signers</span>
         ) : (
           <span>Document Expired!</span>
         )}
       </ModalHeader>
 
       <Modal.Body>
-      {type === "pdfFail" ? (
-         <p>Something went wrong failed to load pdf file!</p>
+        {type === "pdfFail" ? (
+          <p>Something went wrong failed to load pdf file!</p>
+        ) : type === "signersAlert" ? (
+          <p>Please select signer for add placeholder!</p>
         ) : (
           <p>This Document is no longer available.</p>
         )}
-       
       </Modal.Body>
+      <Modal.Footer>
+        <button
+          onClick={() => {
+            setIsShowEmail(false)
+          }}
+          style={{
+            color: "black",
+          }}
+          type="button"
+          className="finishBtn"
+        >
+         Ok
+        </button>
+      </Modal.Footer>
     </Modal>
   );
 }
diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js
index d5781b15a..03258c263 100644
--- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js
+++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js
@@ -38,11 +38,12 @@ function RenderPdf({
   signerObjectId,
   signedSigners,
   setPdfLoadFail,
-  setIsDragging,
   placeholder,
 }) {
   const isMobile = window.innerWidth < 712;
 
+  //function for render placeholder block over pdf document
+
   const checkSignedSignes = (data) => {
     // console.log("data",data)
     const checkSign = signedSigners.filter(
@@ -903,8 +904,12 @@ function RenderPdf({
                               }}
                               disableDragging={true}
                               default={{
-                                x: pos.xPosition,
-                                y: pos.yPosition,
+                                x: pos.scale
+                                  ? pos.xPosition * pos.scale
+                                  : pos.xPosition,
+                                y: pos.scale
+                                  ? pos.yPosition * pos.scale
+                                  : pos.yPosition,
                               }}
                               onClick={() => {
                                 setIsSignPad(true);
diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js
index fdcb058e2..7adb49a51 100644
--- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js
+++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js
@@ -22,6 +22,7 @@ import SignerListPlace from "./component/signerListPlace";
 import Header from "./component/header";
 import { contactBook, contractUsers } from "../utils/Utils";
 import RenderPdf from "./component/renderPdf";
+import ModalComponent from "./component/modalComponent";
 
 function PlaceHolderSign() {
   pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
@@ -58,6 +59,8 @@ function PlaceHolderSign() {
   const [pdfOriginalWidth, setPdfOriginalWidth] = useState();
   const [contractName, setContractName] = useState("");
   const { docId } = useParams();
+  const [isShowEmail, setIsShowEmail] = useState(false);
+  const [selectedEmail, setSelectedEmail] = useState(false);
 
   const color = [
     "#93a3db",
@@ -301,40 +304,80 @@ function PlaceHolderSign() {
     //     setIsLoading(loadObj);
     //   });
   };
+  console.log("signerpos", signerPos, isDragStampSS, isDragSignatureSS);
   //function for setting position after drop signature button over pdf
   const addPositionOfSignature = (item, monitor) => {
+    const isMobile = window.innerWidth < 712;
+
+    if (isMobile) {
+      if (selectedEmail) {
+        getSignerPos(item, monitor);
+      } else {
+        setIsShowEmail(true);
+      }
+    } else {
+      getSignerPos(item, monitor);
+    }
+  };
+
+  const getSignerPos = (item, monitor) => {
+    const isMobile = window.innerWidth < 712;
+    const newWidth = window.innerWidth;
+    const scale = pdfOriginalWidth / newWidth;
     const key = Math.floor(1000 + Math.random() * 9000);
-    const offset = monitor.getClientOffset();
-    //adding and updating drop position in array when user drop signature button in div
-    const containerRect = document
-      .getElementById("container")
-      .getBoundingClientRect();
-    const x = offset.x - containerRect.left;
-    const y = offset.y - containerRect.top;
-    const ybottom = containerRect.bottom - offset.y;
-
-    const dropData = [];
-    const xyPosArr = [];
-    const dropObj = {
-      xPosition: x - signBtnPosition[0].xPos,
-      yPosition: y - signBtnPosition[0].yPos,
-      isStamp: isDragStamp ? true : false,
-      key: key,
-      isDrag: false,
-      firstXPos: signBtnPosition[0].xPos,
-      firstYPos: signBtnPosition[0].yPos,
-      yBottom: ybottom,
-    };
-    dropData.push(dropObj);
-    const xyPos = {
-      pageNumber: pageNumber,
-      pos: dropData,
-    };
-
-    xyPosArr.push(xyPos);
-    const filterSignerPos = signerPos.filter(
+    let filterSignerPos = signerPos.filter(
       (data) => data.signerObjId === signerObjId
     );
+    let dropData = [];
+    let xyPosArr = [];
+    let xyPos = {};
+    if (item === "onclick") {
+      const dropObj = {
+        xPosition: window.innerWidth / 2 - 100,
+        yPosition: window.innerHeight / 2 - 60,
+        isStamp: monitor,
+        key: key,
+        isDrag: false,
+        scale: isMobile && scale,
+        yBottom: window.innerHeight / 2 - 60,
+      };
+      dropData.push(dropObj);
+      xyPos = {
+        pageNumber: pageNumber,
+        pos: dropData,
+      };
+
+      xyPosArr.push(xyPos);
+    } else if (item.type === "BOX") {
+      const offset = monitor.getClientOffset();
+      //adding and updating drop position in array when user drop signature button in div
+      const containerRect = document
+        .getElementById("container")
+        .getBoundingClientRect();
+      const x = offset.x - containerRect.left;
+      const y = offset.y - containerRect.top;
+      const ybottom = containerRect.bottom - offset.y;
+
+      const dropObj = {
+        xPosition: signBtnPosition[0] ? x - signBtnPosition[0].xPos : x,
+        yPosition: signBtnPosition[0] ? y - signBtnPosition[0].yPos : y,
+        isStamp: isDragStamp || isDragStampSS ? true : false,
+        key: key,
+        isDrag: false,
+        firstXPos: signBtnPosition[0] && signBtnPosition[0].xPos,
+        firstYPos: signBtnPosition[0] && signBtnPosition[0].yPos,
+        yBottom: ybottom,
+        scale: isMobile && scale,
+      };
+
+      dropData.push(dropObj);
+      xyPos = {
+        pageNumber: pageNumber,
+        pos: dropData,
+      };
+
+      xyPosArr.push(xyPos);
+    }
 
     //add signers objId first inseretion
     if (filterSignerPos.length > 0) {
@@ -739,6 +782,9 @@ function PlaceHolderSign() {
           Placeholders: signerPos,
           SignedUrl: pdfDetails[0].URL,
         };
+        const isMobile = window.innerWidth < 712;
+        const newWidth = window.innerWidth;
+        const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
 
         await axios
           .put(
@@ -822,7 +868,9 @@ function PlaceHolderSign() {
     }
     await axios
       .put(
-        `${localStorage.getItem("baseUrl")}classes/${extUserClass}/${signerUserId}`,
+        `${localStorage.getItem(
+          "baseUrl"
+        )}classes/${extUserClass}/${signerUserId}`,
         {
           TourStatus: updatedTourStatus,
         },
@@ -1009,6 +1057,11 @@ function PlaceHolderSign() {
                 )}
               </Modal.Footer>
             </Modal>
+            <ModalComponent
+              isShow={isShowEmail}
+              type={"signersAlert"}
+              setIsShowEmail={setIsShowEmail}
+            />
             {/* pdf header which contain funish back button */}
             <Header
               isPlaceholder={true}
@@ -1022,55 +1075,63 @@ function PlaceHolderSign() {
               alertSendEmail={alertSendEmail}
               isShowHeader={true}
               currentSigner={true}
+              dataTut4="reactourFour"
             />
-            <RenderPdf
-              pageNumber={pageNumber}
-              pdfOriginalWidth={pdfOriginalWidth}
-              pdfNewWidth={pdfNewWidth}
-              pdfDetails={pdfDetails}
-              signerPos={signerPos}
-              successEmail={false}
-              numPages={numPages}
-              pageDetails={pageDetails}
-              placeholder={true}
-              drop={drop}
-              handleDeleteSign={handleDeleteSign}
-              handleTabDrag={handleTabDrag}
-              handleStop={handleStop}
-              handleImageResize={handleImageResize}
-            />
+            <div data-tut="reactourThird">
+              <RenderPdf
+                pageNumber={pageNumber}
+                pdfOriginalWidth={pdfOriginalWidth}
+                pdfNewWidth={pdfNewWidth}
+                pdfDetails={pdfDetails}
+                signerPos={signerPos}
+                successEmail={false}
+                numPages={numPages}
+                pageDetails={pageDetails}
+                placeholder={true}
+                drop={drop}
+                handleDeleteSign={handleDeleteSign}
+                handleTabDrag={handleTabDrag}
+                handleStop={handleStop}
+                handleImageResize={handleImageResize}
+              />
+            </div>
           </div>
 
           {/* signature button */}
           {isMobile ? (
-           
-              <div data-tut="reactourSecond">
-                <FieldsComponent
-                  pdfUrl={isMailSend}
-                  sign={sign}
-                  stamp={stamp}
-                  dragSignature={dragSignature}
-                  signRef={signRef}
-                  handleDivClick={handleDivClick}
-                  handleMouseLeave={handleMouseLeave}
-                  isDragSign={isDragSign}
-                  themeColor={themeColor}
-                  dragStamp={dragStamp}
-                  dragRef={dragRef}
-                  isDragStamp={isDragStamp}
-                  // isSignYourself={true}
-                  isDragSignatureSS={isDragSignatureSS}
-                  dragSignatureSS={dragSignatureSS}
-                  dragStampSS={dragStampSS}
-                  addPositionOfSignature={addPositionOfSignature}
-                  signerPos={signerPos}
-                  signersdata={signersdata}
-                  isSelectListId={isSelectListId}
-                  setSignerObjId={setSignerObjId}
-                  setIsSelectId={setIsSelectId}
-                  setContractName={setContractName}
-                />
-             
+            <div>
+              <FieldsComponent
+                dataTut="reactourFirst"
+                dataTut2="reactourSecond"
+                pdfUrl={isMailSend}
+                sign={sign}
+                stamp={stamp}
+                dragSignature={dragSignature}
+                signRef={signRef}
+                handleDivClick={handleDivClick}
+                handleMouseLeave={handleMouseLeave}
+                isDragSign={isDragSign}
+                themeColor={themeColor}
+                dragStamp={dragStamp}
+                dragRef={dragRef}
+                isDragStamp={isDragStamp}
+                isSignYourself={true}
+                isDragSignatureSS={isDragSignatureSS}
+                dragSignatureSS={dragSignatureSS}
+                dragStampSS={dragStampSS}
+                addPositionOfSignature={addPositionOfSignature}
+                signerPos={signerPos}
+                signersdata={signersdata}
+                isSelectListId={isSelectListId}
+                setSignerObjId={setSignerObjId}
+                setIsSelectId={setIsSelectId}
+                setContractName={setContractName}
+                isSigners={true}
+                setIsShowEmail={setIsShowEmail}
+                isMailSend={isMailSend}
+                setSelectedEmail={setSelectedEmail}
+                selectedEmail={selectedEmail}
+              />
             </div>
           ) : (
             <div>
@@ -1098,9 +1159,6 @@ function PlaceHolderSign() {
                     dragRef={dragRef}
                     isDragStamp={isDragStamp}
                     isSignYourself={false}
-                    isDragSignatureSS={isDragSignatureSS}
-                    dragSignatureSS={dragSignatureSS}
-                    dragStampSS={dragStampSS}
                     // xyPostion={xyPostion}
                     //  isSigners={false}
                     addPositionOfSignature={addPositionOfSignature}
diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js
index 331eecfdd..a560a6b3a 100644
--- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js
+++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js
@@ -26,7 +26,6 @@ import Header from "./component/header";
 import ModalComponent from "./component/modalComponent";
 import RenderPdf from "./component/renderPdf";
 function EmbedPdfImage() {
-
   const { id, userPhone } = useParams();
 
   const [isSignPad, setIsSignPad] = useState(false);
@@ -618,10 +617,13 @@ function EmbedPdfImage() {
               ? imgUrlList[id].Height
               : 60;
             const imgWidth = imgUrlList[id].Width ? imgUrlList[id].Width : 150;
-
+            const isMobile = window.innerWidth < 712;
+            const newWidth = window.innerWidth;
+            const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
             page.drawImage(img, {
-              x: imgUrlList[id].xPosition,
-              y: page.getHeight() - imgUrlList[id].yPosition - imgHeight,
+              x: imgUrlList[id].xPosition * scale + 50,
+              y:
+                page.getHeight() - imgUrlList[id].yPosition * scale - imgHeight,
               width: imgWidth,
               height: imgHeight,
             });
@@ -647,17 +649,26 @@ function EmbedPdfImage() {
     pageNo
   ) => {
     let signgleSign;
+    const isMobile = window.innerWidth < 712;
+    const newWidth = window.innerWidth;
+    const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
     if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) {
       const height = xyPosData.Height ? xyPosData.Height : 60;
       const bottomY = xyPosData.isDrag
-        ? xyPosData.yBottom - height
-        : xyPosData.yBottom - height + xyPosData.firstYPos;
+        ? xyPosData.yBottom * scale - height
+        : xyPosData.firstYPos
+        ? xyPosData.yBottom * scale - height + xyPosData.firstYPos
+        : xyPosData.yBottom * scale - height;
       signgleSign = {
         pdfFile: pdfBase64Url,
         docId: docId,
         sign: {
           Base64: base64Url,
-          Left: xyPosData.resizeXPos
+          Left: isMobile
+            ? xyPosData.resizeXPos
+              ? xyPosData.resizeXPos * scale + 80
+              : xyPosData.xPosition * scale + 80
+            : xyPosData.resizeXPos
             ? xyPosData.resizeXPos
             : xyPosData.xPosition,
           Bottom: bottomY,
@@ -770,99 +781,6 @@ function EmbedPdfImage() {
   const saveImage = () => {
     const getImage = onSaveImage(xyPostion, index, signKey, imgWH, image);
     setXyPostion(getImage);
-    // const updateFilter = xyPostion[index].pos.filter(
-    //   (data) =>
-    //     data.key === signKey && data.Width && data.Height && data.SignUrl
-    // );
-
-    // if (updateFilter.length > 0) {
-    //   let newWidth, nweHeight;
-    //   const aspectRatio = imgWH.width / imgWH.height;
-    //   const getXYdata = xyPostion[index].pos;
-    //   if (aspectRatio === 1) {
-    //     newWidth = aspectRatio * 100;
-    //     nweHeight = aspectRatio * 100;
-    //   } else if (aspectRatio < 2) {
-    //     newWidth = aspectRatio * 100;
-    //     nweHeight = 100;
-    //   } else if (aspectRatio > 2 && aspectRatio < 4) {
-    //     newWidth = aspectRatio * 70;
-    //     nweHeight = 70;
-    //   } else if (aspectRatio > 4) {
-    //     newWidth = aspectRatio * 40;
-    //     nweHeight = 40;
-    //   } else if (aspectRatio > 5) {
-    //     newWidth = aspectRatio * 10;
-    //     nweHeight = 10;
-    //   }
-    //   const getPosData = getXYdata;
-    //   const addSign = getPosData.map((url, ind) => {
-    //     if (url.key === signKey) {
-    //       return {
-    //         ...url,
-    //         Width: newWidth,
-    //         Height: nweHeight,
-    //         SignUrl: image.src,
-    //         ImageType: image.imgType,
-    //       };
-    //     }
-    //     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 aspectRatio = imgWH.width / imgWH.height;
-
-    //   let newWidth, nweHeight;
-    //   if (aspectRatio === 1) {
-    //     newWidth = aspectRatio * 100;
-    //     nweHeight = aspectRatio * 100;
-    //   } else if (aspectRatio < 2) {
-    //     newWidth = aspectRatio * 100;
-    //     nweHeight = 100;
-    //   } else if (aspectRatio > 2 && aspectRatio < 4) {
-    //     newWidth = aspectRatio * 70;
-    //     nweHeight = 70;
-    //   } else if (aspectRatio > 4) {
-    //     newWidth = aspectRatio * 40;
-    //     nweHeight = 40;
-    //   } else if (aspectRatio > 5) {
-    //     newWidth = aspectRatio * 10;
-    //     nweHeight = 10;
-    //   }
-
-    //   const addSign = getPosData.map((url, ind) => {
-    //     if (url.key === signKey) {
-    //       return {
-    //         ...url,
-    //         Width: newWidth,
-    //         Height: nweHeight,
-    //         SignUrl: image.src,
-    //         ImageType: image.imgType,
-    //       };
-    //     }
-    //     return url;
-    //   });
-
-    //   const newUpdateUrl = xyPostion.map((obj, ind) => {
-    //     if (ind === index) {
-    //       return { ...obj, pos: addSign };
-    //     }
-    //     return obj;
-    //   });
-
-    //   setXyPostion(newUpdateUrl);
-    // }
   };
 
   //function for set decline true on press decline button
diff --git a/microfrontends/SignDocuments/src/css/signature.css b/microfrontends/SignDocuments/src/css/signature.css
index 4bade1c1d..dad6e2673 100644
--- a/microfrontends/SignDocuments/src/css/signature.css
+++ b/microfrontends/SignDocuments/src/css/signature.css
@@ -10,8 +10,9 @@
    width: 460px;
    height: 184px;
  }
- .penContainer{
-  width: 460px;
+
+ .penContainer {
+   width: 460px;
  }
 
  .signatureBtn {
@@ -37,18 +38,21 @@
   } */
 
  .disableSign {
-   border: none;
-   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
+   border: 1.5px solid #47a3ad;
    margin-bottom: 10px;
    border-radius: 3px;
    display: flex;
    padding: 0px;
    justify-content: space-between;
-   background: #d3edeb;
+   background: white;
    transition-duration: 0.4s;
-   cursor: pointer;
-   color: white;
-   font-weight: 600;
+   cursor: all-scroll;
+   width: 150px;
+   height: 30px;
+   color: black;
+   border: 1px solid rgb(203, 203, 203);
+   cursor: text;
+
  }
 
  .emailInput {
@@ -76,13 +80,14 @@
 
  .addEmail,
  .emailInput {
-   
+
+   outline: none;
+ }
+
+ .addEmailInput {
+   border: none;
    outline: none;
  }
- .addEmailInput{
-  border: none;
-  outline: none;
- } 
 
  .emailChip {
    background-color: #47a3ad;
@@ -115,12 +120,23 @@
    border: none;
    margin-left: 10px;
  }
-
+.sendMail{
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
+  padding: 3px 30px;
+  color: white;
+  font-weight: 500 !important;
+  font-size: 14px !important;
+  border: none;
+  margin-left: 10px;
+  /* color: rgb(77, 75, 75); */
+}
+ 
  .finishBtn:focus {
    border: none;
    outline: none;
  }
 
+
  .finishBtn:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
    color: white;
@@ -382,29 +398,33 @@
    background-color: #887abf;
    border: none;
    padding: 5px;
-  
+
    animation-duration: 400ms;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
    z-index: 30 !important;
  }
+
  .DropdownMenuContent[data-side='top'],
  .DropdownMenuSubContent[data-side='top'] {
    animation-name: slideDownAndFade;
  }
+
  .DropdownMenuContent[data-side='right'],
  .DropdownMenuSubContent[data-side='right'] {
    animation-name: slideLeftAndFade;
  }
+
  .DropdownMenuContent[data-side='bottom'],
  .DropdownMenuSubContent[data-side='bottom'] {
    animation-name: slideUpAndFade;
  }
+
  .DropdownMenuContent[data-side='left'],
  .DropdownMenuSubContent[data-side='left'] {
    animation-name: slideRightAndFade;
  }
- 
+
  .DropdownMenuItem {
    font-size: 13px;
    line-height: 1;
@@ -420,106 +440,112 @@
    outline: none;
    border: none;
  }
+
  .SelectTrigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  padding: 0 15px;
-  font-size: 13px;
-  line-height: 1;
-  height: 35px;
-  gap: 5px;
-  border: none;
-  background-color: #887abf;
-  color: black
-  
-}
-option{
-  overflow-y:scroll;
-}
-.SelectTrigger:hover {
-  border: none;
-  outline: none;
-}
-.SelectTrigger:focus {
-  /* box-shadow: 0 0 0 2px black; */
-  border: none;
-  outline: none;
-}
-.SelectTrigger[data-placeholder] {
-  color: black;
-}
+   display: inline-flex;
+   align-items: center;
+   justify-content: center;
+   border-radius: 4px;
+   padding: 0 15px;
+   font-size: 13px;
+   line-height: 1;
+   height: 35px;
+   gap: 5px;
+   border: none;
+   background-color: #887abf;
+   color: black
+ }
 
-.SelectIcon {
-  color: Var(--violet-11);
-}
+ option {
+   overflow-y: scroll;
+ }
 
-.SelectContent {
-  overflow: hidden;
-  background-color: white;
-  border-radius: 6px;
-  box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
-}
+ .SelectTrigger:hover {
+   border: none;
+   outline: none;
+ }
 
-.SelectViewport {
-  padding: 5px;
-}
+ .SelectTrigger:focus {
+   /* box-shadow: 0 0 0 2px black; */
+   border: none;
+   outline: none;
+ }
 
-.SelectItem {
-  font-size: 13px;
-  line-height: 1;
-  color: var(--violet-11);
-  border-radius: 3px;
-  display: flex;
-  align-items: center;
-  height: 25px;
-  padding: 0 35px 0 25px;
-  position: relative;
-  user-select: none;
-  z-index: 10 !important;
-}
-.SelectItem[data-disabled] {
-  color: var(--mauve-8);
-  pointer-events: none;
-}
-.SelectItem[data-highlighted] {
-  outline: none;
-  background-color: var(--violet-9);
-  color: var(--violet-1);
-}
+ .SelectTrigger[data-placeholder] {
+   color: black;
+ }
 
-.SelectLabel {
-  padding: 0 25px;
-  font-size: 12px;
-  line-height: 25px;
-  color: var(--mauve-11);
-}
+ .SelectIcon {
+   color: Var(--violet-11);
+ }
 
-.SelectSeparator {
-  height: 1px;
-  background-color: var(--violet-6);
-  margin: 5px;
-}
+ .SelectContent {
+   overflow: hidden;
+   background-color: white;
+   border-radius: 6px;
+   box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
+ }
 
-.SelectItemIndicator {
-  position: absolute;
-  left: 0;
-  width: 25px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
+ .SelectViewport {
+   padding: 5px;
+ }
 
-.SelectScrollButton {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 25px;
-  background-color: white;
-  color: var(--violet-11);
-  cursor: default;
-}
+ .SelectItem {
+   font-size: 13px;
+   line-height: 1;
+   color: var(--violet-11);
+   border-radius: 3px;
+   display: flex;
+   align-items: center;
+   height: 25px;
+   padding: 0 35px 0 25px;
+   position: relative;
+   user-select: none;
+   z-index: 10 !important;
+ }
+
+ .SelectItem[data-disabled] {
+   color: var(--mauve-8);
+   pointer-events: none;
+ }
+
+ .SelectItem[data-highlighted] {
+   outline: none;
+   background-color: var(--violet-9);
+   color: var(--violet-1);
+ }
+
+ .SelectLabel {
+   padding: 0 25px;
+   font-size: 12px;
+   line-height: 25px;
+   color: var(--mauve-11);
+ }
+
+ .SelectSeparator {
+   height: 1px;
+   background-color: var(--violet-6);
+   margin: 5px;
+ }
+
+ .SelectItemIndicator {
+   position: absolute;
+   left: 0;
+   width: 25px;
+   display: inline-flex;
+   align-items: center;
+   justify-content: center;
+ }
+
+ .SelectScrollButton {
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   height: 25px;
+   background-color: white;
+   color: var(--violet-11);
+   cursor: default;
+ }
 
 
 
@@ -637,9 +663,11 @@ option{
      width: 300px;
      height: 120px;
    }
-   .penContainer{
-    width: 300px;
+
+   .penContainer {
+     width: 300px;
    }
+
    .uploadImgLogo {
      font-size: 30px;
    }
@@ -660,9 +688,11 @@ option{
      width: 280px;
      height: 112px;
    }
-   .penContainer{
-    width: 280px;
+
+   .penContainer {
+     width: 280px;
    }
+
    .hidePdf {
      display: none;
    }
@@ -694,9 +724,11 @@ option{
      width: 230px;
      height: 92px;
    }
-   .penContainer{
-    width: 230px;
+
+   .penContainer {
+     width: 230px;
    }
+
    .hidePdf {
      display: none;
    }