diff --git a/apps/OpenSign/src/assets/images/file_lines.svg b/apps/OpenSign/src/assets/images/file_lines.svg
deleted file mode 100644
index cb66730aa..000000000
--- a/apps/OpenSign/src/assets/images/file_lines.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="currentColor"><!-- Font Awesome Pro 6.0.0-alpha2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M374.629 150.627L233.371 9.373C227.371 3.371 219.23 0 210.746 0H64C28.652 0 0 28.652 0 64V448C0 483.345 28.652 512 64 512H320C355.348 512 384 483.345 384 448V173.254C384 164.767 380.629 156.629 374.629 150.627ZM224 22.629L361.375 160H248C234.781 160 224 149.234 224 136V22.629ZM368 448C368 474.467 346.469 496 320 496H64C37.531 496 16 474.467 16 448V64C16 37.533 37.531 16 64 16H208V136C208 158.062 225.938 176 248 176H368V448ZM96 264C96 268.406 99.594 272 104 272H280C284.406 272 288 268.406 288 264S284.406 256 280 256H104C99.594 256 96 259.594 96 264ZM280 320H104C99.594 320 96 323.594 96 328S99.594 336 104 336H280C284.406 336 288 332.406 288 328S284.406 320 280 320ZM280 384H104C99.594 384 96 387.594 96 392S99.594 400 104 400H280C284.406 400 288 396.406 288 392S284.406 384 280 384Z"/></svg>
\ No newline at end of file
diff --git a/apps/OpenSign/src/assets/images/folder_solid.svg b/apps/OpenSign/src/assets/images/folder_solid.svg
deleted file mode 100644
index 3627a6dee..000000000
--- a/apps/OpenSign/src/assets/images/folder_solid.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 480H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H288c-10.1 0-19.6-4.7-25.6-12.8L243.2 57.6C231.1 41.5 212.1 32 192 32H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64z"/></svg>
\ No newline at end of file
diff --git a/apps/OpenSign/src/components/opensigndrive/DriveBody.js b/apps/OpenSign/src/components/opensigndrive/DriveBody.js
index add7fa6db..9bbc030f6 100644
--- a/apps/OpenSign/src/components/opensigndrive/DriveBody.js
+++ b/apps/OpenSign/src/components/opensigndrive/DriveBody.js
@@ -313,7 +313,9 @@ function DriveBody(props) {
       const signerName = getSignersName.join(", ");
 
       return (
-        <span className="statusSpan w-[90%] break-words">{signerName}</span>
+        <span className="text-[12px] font-medium w-[90%] break-words">
+          {signerName}
+        </span>
       );
     };
     return listType === "table" ? (
@@ -398,7 +400,7 @@ function DriveBody(props) {
                   className="w-[100px] border-[1.5px] border-black rounded-sm text-[10px]"
                 />
               ) : (
-                <span className="foldName">{data.Name}</span>
+                <span className="fileName">{data.Name}</span>
               )}
             </div>
           </ContextMenu.Trigger>
@@ -515,21 +517,17 @@ function DriveBody(props) {
         <HoverCard.Portal>
           <HoverCard.Content className="HoverCardContent" sideOffset={5}>
             <strong className="text-[13px]">Title: </strong>
-            <span className="statusSpan" style={{ marginBottom: "0px" }}>
-              {" "}
-              {data.Name}
-            </span>
+            <span className="text-[12px] font-medium mb-0"> {data.Name}</span>
             <br />
             <strong className="text-[13px]">Status: </strong>
-            <span className="statusSpan"> {status}</span>
+            <span className="text-[12px] font-medium"> {status}</span>
             <br />
             <strong className="text-[13px]">Created Date: </strong>
-            <span className="statusSpan">{createddate}</span>
+            <span className="text-[12px] font-medium">{createddate}</span>
             <br />
             {signerExist && (
               <>
                 <strong className="text-[13px]">Signers: </strong>
-                {/* <span className="statusSpan">kjefjjnejkfnkbjs bbfjkdsbjbfjkbjk kscbjkbjkb</span> */}
                 {signersName()}
               </>
             )}
diff --git a/apps/OpenSign/src/components/pdf/EmailComponent.js b/apps/OpenSign/src/components/pdf/EmailComponent.js
index 48e1052dd..3cb72fc49 100644
--- a/apps/OpenSign/src/components/pdf/EmailComponent.js
+++ b/apps/OpenSign/src/components/pdf/EmailComponent.js
@@ -175,7 +175,7 @@ function EmailComponent({
           {isLoading && (
             <div className="absolute w-full h-full flex flex-col justify-center items-center z-[20] bg-[#e6f2f2]/70">
               <Loader />
-              <span className="text-[12px] font-bold">
+              <span className="text-[12px] text-base-content">
                 This might take some time
               </span>
             </div>
diff --git a/apps/OpenSign/src/components/pdf/PdfHeader.js b/apps/OpenSign/src/components/pdf/PdfHeader.js
index f89082c13..75924a094 100644
--- a/apps/OpenSign/src/components/pdf/PdfHeader.js
+++ b/apps/OpenSign/src/components/pdf/PdfHeader.js
@@ -53,7 +53,7 @@ function Header({
   };
 
   return (
-    <div style={{ padding: "5px 0px 5px 0px" }} className="mobileHead">
+    <div className="flex py-[5px]">
       {isMobile && isShowHeader ? (
         <div
           id="navbar"
@@ -99,7 +99,7 @@ function Header({
                     >
                       <div className="flex flex-row">
                         <i
-                          className="fa-light fa-arrow-down mr-[2px]"
+                          className="fa-light fa-arrow-down mr-[3px]"
                           aria-hidden="true"
                         ></i>
                         Download
@@ -117,7 +117,7 @@ function Header({
                       >
                         <div className="border-none bg-[#fff]">
                           <i
-                            className="fa-light fa-award mr-[2px]"
+                            className="fa-light fa-award mr-[3px]"
                             aria-hidden="true"
                           ></i>
                           Certificate
@@ -131,7 +131,7 @@ function Header({
                       >
                         <div className="flex flex-row">
                           <i
-                            className="fa-light fa-envelope mr-[2px]"
+                            className="fa-light fa-envelope mr-[3px]"
                             aria-hidden="true"
                           ></i>
                           Mail
@@ -146,7 +146,7 @@ function Header({
                     >
                       <div className="flex flex-row">
                         <i
-                          className="fa-light fa-print mr-[2px]"
+                          className="fa-light fa-print mr-[3px]"
                           aria-hidden="true"
                         ></i>
                         Print
@@ -224,7 +224,7 @@ function Header({
                             }
                           >
                             <i
-                              className="fa-light fa-arrow-down mr-[5px]"
+                              className="fa-light fa-arrow-down mr-[3px]"
                               aria-hidden="true"
                             ></i>
                             <span className="font-[500]">Download</span>
@@ -239,7 +239,7 @@ function Header({
           </div>
         </div>
       ) : (
-        <div className="flex flex-wrap justify-between items-center mt-[5px]">
+        <div className="flex flex-wrap justify-between items-center w-full gap-y-1 ml-1">
           <PrevNext
             pageNumber={pageNumber}
             allPages={allPages}
@@ -270,7 +270,7 @@ function Header({
                 {setIsEditTemplate && (
                   <button
                     onClick={() => setIsEditTemplate(true)}
-                    className="outline-none border-none text-center mr-[5px]"
+                    className="outline-none border-none text-center mr-[3px]"
                   >
                     <i className="fa-light fa-gear fa-lg"></i>
                   </button>
@@ -278,14 +278,14 @@ function Header({
                 <button
                   onClick={() => navigate(-1)}
                   type="button"
-                  className="op-btn op-btn-ghost op-btn-sm mr-[5px]"
+                  className="op-btn op-btn-ghost op-btn-sm mr-[3px]"
                 >
                   Back
                 </button>
                 <button
                   disabled={isMailSend && true}
                   data-tut="reactourFour"
-                  className="op-btn op-btn-primary op-btn-sm mr-[5px]"
+                  className="op-btn op-btn-primary op-btn-sm mr-[3px]"
                   onClick={() => alertSendEmail()}
                 >
                   {completeBtnTitle
@@ -305,7 +305,7 @@ function Header({
                     onClick={() =>
                       handleDownloadCertificate(pdfDetails, setIsDownloading)
                     }
-                    className="op-btn op-btn-secondary op-btn-sm mr-[5px] shadow"
+                    className="op-btn op-btn-secondary op-btn-sm mr-[3px] shadow"
                   >
                     <i
                       className="fa-light fa-award py-[3px]"
@@ -318,7 +318,7 @@ function Header({
                 <button
                   onClick={(e) => handleToPrint(e, pdfUrl, setIsDownloading)}
                   type="button"
-                  className="op-btn op-btn-neutral op-btn-sm mr-[5px] shadow"
+                  className="op-btn op-btn-neutral op-btn-sm mr-[3px] shadow"
                 >
                   <i
                     className="fa-light fa-print py-[3px]"
@@ -329,7 +329,7 @@ function Header({
 
                 <button
                   type="button"
-                  className="op-btn op-btn-primary op-btn-sm mr-[5px] shadow"
+                  className="op-btn op-btn-primary op-btn-sm mr-[3px] shadow"
                   onClick={() =>
                     handleDownloadPdf(pdfDetails, pdfUrl, setIsDownloading)
                   }
@@ -346,21 +346,21 @@ function Header({
                 <button
                   onClick={() => navigate(-1)}
                   type="button"
-                  className="op-btn op-btn-ghost op-btn-sm mr-[5px]"
+                  className="op-btn op-btn-ghost op-btn-sm mr-[3px]"
                 >
                   Back
                 </button>
                 {currentSigner && (
                   <>
                     <button
-                      className="op-btn op-btn-secondary op-btn-sm mr-[5px] shadow"
+                      className="op-btn op-btn-secondary op-btn-sm mr-[3px] shadow"
                       onClick={() => handleDeclinePdfAlert()}
                     >
                       Decline
                     </button>
                     <button
                       type="button"
-                      className="op-btn op-btn-primary op-btn-sm mr-[5px] shadow"
+                      className="op-btn op-btn-primary op-btn-sm mr-[3px] shadow"
                       onClick={() => embedWidgetsData()}
                     >
                       Finish
@@ -411,37 +411,37 @@ function Header({
                   onClick={() =>
                     handleDownloadCertificate(pdfDetails, setIsDownloading)
                   }
-                  className="op-btn op-btn-secondary op-btn-sm font-medium text-[13px] mr-[5px] shadow"
+                  className="op-btn op-btn-secondary op-btn-sm gap-0 font-medium text-[12px] mr-[3px] shadow"
                 >
                   <i className="fa-light fa-award" aria-hidden="true"></i>
-                  <span className="hidden lg:block">Certificate</span>
+                  <span className="hidden lg:block ml-1">Certificate</span>
                 </button>
               )}
               <button
                 onClick={(e) => handleToPrint(e, pdfUrl, setIsDownloading)}
                 type="button"
-                className="op-btn op-btn-neutral op-btn-sm font-medium text-[13px] mr-[5px] shadow"
+                className="op-btn op-btn-neutral op-btn-sm gap-0 font-medium text-[12px] mr-[3px] shadow"
               >
                 <i className="fa-light fa-print" aria-hidden="true"></i>
-                <span className="hidden lg:block">Print</span>
+                <span className="hidden lg:block ml-1">Print</span>
               </button>
               <button
                 type="button"
-                className="op-btn op-btn-primary op-btn-sm font-medium text-[13px] mr-[5px] shadow"
+                className="op-btn op-btn-primary op-btn-sm gap-0 font-medium text-[12px] mr-[3px] shadow"
                 onClick={() =>
                   handleDownloadPdf(pdfDetails, pdfUrl, setIsDownloading)
                 }
               >
                 <i className="fa-light fa-download" aria-hidden="true"></i>
-                <span className="hidden lg:block">Download</span>
+                <span className="hidden lg:block ml-1">Download</span>
               </button>
               <button
                 type="button"
-                className="op-btn op-btn-info op-btn-sm font-medium text-[13px] mr-[5px] shadow"
+                className="op-btn op-btn-info op-btn-sm gap-0 font-medium text-[12px] mr-[3px] shadow"
                 onClick={() => setIsEmail(true)}
               >
                 <i className="fa-light fa-envelope" aria-hidden="true"></i>
-                <span className="hidden lg:block">Mail</span>
+                <span className="hidden lg:block ml-1">Mail</span>
               </button>
             </div>
           ) : (
@@ -449,13 +449,13 @@ function Header({
               <button
                 onClick={() => navigate(-1)}
                 type="button"
-                className="op-btn op-btn-ghost op-btn-sm mr-[5px]"
+                className="op-btn op-btn-ghost op-btn-sm mr-[3px]"
               >
                 Back
               </button>
               <button
                 type="button"
-                className="op-btn op-btn-primary op-btn-sm mr-[5px]"
+                className="op-btn op-btn-primary op-btn-sm mr-[3px]"
                 onClick={() => {
                   if (!pdfUrl) {
                     embedWidgetsData();
diff --git a/apps/OpenSign/src/components/pdf/PdfZoom.js b/apps/OpenSign/src/components/pdf/PdfZoom.js
index d60ee0a37..eaacbbf04 100644
--- a/apps/OpenSign/src/components/pdf/PdfZoom.js
+++ b/apps/OpenSign/src/components/pdf/PdfZoom.js
@@ -21,7 +21,7 @@ function PdfZoom(props) {
   };
   return (
     // md:mt-[41px] xl:mt-[63px]mt=[]
-    <span className=" hidden  md:flex flex-col gap-1 text-center md:w-[5%] mt-[50px] 2xl:mt-[63px]">
+    <span className="hidden md:flex flex-col gap-1 text-center md:w-[5%] mt-[50px] 2xl:mt-[63px]">
       <span
         className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px] cursor-pointer"
         onClick={onClickZoomIn}
@@ -30,11 +30,11 @@ function PdfZoom(props) {
         <i className="fa-light fa-magnifying-glass-plus text-gray-500 2xl:text-[30px]"></i>
       </span>
       <span
-        className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px] cursor-pointer "
+        className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px] cursor-pointer"
         onClick={handleReset}
         title="Reset"
       >
-        <i className="fa-light fa-arrows-rotate text-gray-500  2xl:text-[30px]"></i>
+        <i className="fa-light fa-magnifying-glass-arrows-rotate text-gray-500 2xl:text-[30px]"></i>
       </span>
       <span
         className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px]"
diff --git a/apps/OpenSign/src/components/pdf/Placeholder.js b/apps/OpenSign/src/components/pdf/Placeholder.js
index 831fb0ca0..fade9d933 100644
--- a/apps/OpenSign/src/components/pdf/Placeholder.js
+++ b/apps/OpenSign/src/components/pdf/Placeholder.js
@@ -410,7 +410,7 @@ function Placeholder(props) {
                     e.stopPropagation();
                     handleOnClickSettingIcon();
                   }}
-                  className="fa-light fa-gear settingIcon"
+                  className="fa-light fa-gear icon"
                   style={{
                     color: "#188ae2",
                     right: "29px",
@@ -431,7 +431,7 @@ function Placeholder(props) {
                       e.stopPropagation();
                       handleOnClickSettingIcon();
                     }}
-                    className="fa-light fa-gear settingIcon"
+                    className="fa-light fa-gear icon"
                     style={{
                       color: "#188ae2",
                       right: props?.pos?.type === textWidget ? "32px" : "47px",
@@ -444,7 +444,7 @@ function Placeholder(props) {
               {props.pos.type !== textWidget && !props.isSignYourself && (
                 <i
                   data-tut="assignSigner"
-                  className="fa-light fa-user signUserIcon"
+                  className="fa-light fa-user icon"
                   onClick={(e) => {
                     e.stopPropagation();
                     props.handleLinkUser(props.data.Id);
@@ -468,11 +468,7 @@ function Placeholder(props) {
                 top: "-19px",
                 right: props.isPlaceholder ? "60px" : "44px"
               }}
-              className={
-                isShowDateFormat
-                  ? "dropdown signUserIcon show"
-                  : "dropdown signUserIcon"
-              }
+              className={`${isShowDateFormat ? "show" : ""} dropdown icon`}
               onClick={(e) => {
                 setIsShowDateFormat(!isShowDateFormat);
                 e.stopPropagation();
@@ -491,7 +487,7 @@ function Placeholder(props) {
               }}
             >
               <i
-                className="fa-light fa-gear settingIcon"
+                className="fa-light fa-gear icon"
                 style={{
                   color: "#188ae2",
                   fontSize: "14px"
@@ -519,8 +515,7 @@ function Placeholder(props) {
                         setSelectDate(data);
                         handleSaveDate(data);
                       }}
-                      className="dropdown-item itemColor"
-                      style={{ fontSize: "12px" }}
+                      className="dropdown-item text-[13px]"
                     >
                       {data?.date ? data?.date : "nodata"}
                     </span>
@@ -530,13 +525,13 @@ function Placeholder(props) {
             </div>
           )}
           <i
-            className="fa-light fa-copy signCopy"
+            className="fa-light fa-copy icon"
             onClick={(e) => handleCopyPlaceholder(e)}
             onTouchEnd={(e) => handleCopyPlaceholder(e)}
             style={{ color: "#188ae2", right: "12px", top: "-18px" }}
           ></i>
           <i
-            className="fa-light fa-circle-xmark signCloseBtn"
+            className="fa-light fa-circle-xmark icon"
             onClick={(e) => {
               e.stopPropagation();
 
diff --git a/apps/OpenSign/src/components/pdf/RecipientList.js b/apps/OpenSign/src/components/pdf/RecipientList.js
index fdd5b866e..2f6b55793 100644
--- a/apps/OpenSign/src/components/pdf/RecipientList.js
+++ b/apps/OpenSign/src/components/pdf/RecipientList.js
@@ -249,7 +249,7 @@ const RecipientList = (props) => {
                     props.isSelectListId === ind
                       ? "text-[#424242]"
                       : "text-base-content"
-                  } cursor-pointer ml-[5px]`}
+                  } cursor-pointer`}
                 >
                   <i className="fa-light fa-trash-can 2xl:text-[30px]"></i>
                 </div>
diff --git a/apps/OpenSign/src/components/pdf/SignPad.js b/apps/OpenSign/src/components/pdf/SignPad.js
index 8bbd15ec6..aabca2c1e 100644
--- a/apps/OpenSign/src/components/pdf/SignPad.js
+++ b/apps/OpenSign/src/components/pdf/SignPad.js
@@ -473,7 +473,7 @@ function SignPad({
                         hidden
                       />
                       <i className="fa-light fa-cloud-upload-alt uploadImgLogo"></i>
-                      <div className="uploadImg">Upload</div>
+                      <div className="text-[10px]">Upload</div>
                     </div>
                   </div>
                 ) : (
@@ -509,7 +509,7 @@ function SignPad({
               ) : isTab === "type" ? (
                 <div>
                   <div className="flex justify-between items-center">
-                    <span className="signatureText">
+                    <span className="mr-[5px] text-[12px]">
                       {isInitial ? "Initials" : "Signature"}:
                     </span>
                     <input
@@ -525,7 +525,7 @@ function SignPad({
                       }}
                     />
                   </div>
-                  <div className="fontOptionContainer">
+                  <div className="border-[1px] border-[#d6d3d3] mt-[10px] ml-[5px]">
                     {fontOptions.map((font, ind) => {
                       return (
                         <div
diff --git a/apps/OpenSign/src/components/pdf/Signedby.js b/apps/OpenSign/src/components/pdf/Signedby.js
index 4e40c064c..cd424b519 100644
--- a/apps/OpenSign/src/components/pdf/Signedby.js
+++ b/apps/OpenSign/src/components/pdf/Signedby.js
@@ -19,8 +19,12 @@ function Signedby({ pdfDetails }) {
             </span>
           </div>
           <div className="flex flex-col">
-            <span className="userName">{pdfDetails.ExtUserPtr.Name}</span>
-            <span className="useEmail">{pdfDetails.ExtUserPtr.Email}</span>
+            <span className="text-[12px] font-bold text-[#424242] w-[100px] whitespace-nowrap overflow-hidden text-ellipsis">
+              {pdfDetails.ExtUserPtr.Name}
+            </span>
+            <span className="text-[10px] font-medium text-[#424242] w-[100px] whitespace-nowrap overflow-hidden text-ellipsis">
+              {pdfDetails.ExtUserPtr.Email}
+            </span>
           </div>
         </div>
       </div>
diff --git a/apps/OpenSign/src/components/pdf/SignerListComponent.js b/apps/OpenSign/src/components/pdf/SignerListComponent.js
index 8d324bf43..35bc5e424 100644
--- a/apps/OpenSign/src/components/pdf/SignerListComponent.js
+++ b/apps/OpenSign/src/components/pdf/SignerListComponent.js
@@ -43,9 +43,10 @@ function SignerListComponent(props) {
         </span>
       </div>
       <div className="flex flex-col">
-        <span className="userName">{props.obj?.Name || props?.obj?.Role}</span>
-        <span className="useEmail">
-          {" "}
+        <span className="text-[12px] font-bold text-[#424242] w-[100px] whitespace-nowrap overflow-hidden text-ellipsis">
+          {props.obj?.Name || props?.obj?.Role}
+        </span>
+        <span className="text-[10px] font-medium text-[#424242] w-[100px] whitespace-nowrap overflow-hidden text-ellipsis">
           {props.obj?.Email || props.obj?.email}
         </span>
       </div>
diff --git a/apps/OpenSign/src/components/pdf/SignerListPlace.js b/apps/OpenSign/src/components/pdf/SignerListPlace.js
index e8441e3cc..d3d2de108 100644
--- a/apps/OpenSign/src/components/pdf/SignerListPlace.js
+++ b/apps/OpenSign/src/components/pdf/SignerListPlace.js
@@ -6,14 +6,14 @@ function SignerListPlace(props) {
   return (
     <div>
       <div className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300">
-        <span>
+        <span className="relative">
           {props.title ? props.title : "Recipients"}
           <span className="absolute text-xs z-[30] mt-1 ml-0.5">
             {props?.title === "Roles" && (
               <>
                 <a data-tooltip-id="my-tooltip">
                   <sup>
-                    <i className="fa-light fa-question rounded-full border-[1.5px] border-base-content text-[11px] py-[1px] px-[3px]"></i>
+                    <i className="fa-light fa-question rounded-full border-[1px] border-base-content text-[11px] py-[1px] px-[3px]"></i>
                   </sup>
                 </a>
                 <Tooltip id="my-tooltip" className="z-[100]">
diff --git a/apps/OpenSign/src/components/pdf/WidgetComponent.js b/apps/OpenSign/src/components/pdf/WidgetComponent.js
index b898a03e5..b9284b354 100644
--- a/apps/OpenSign/src/components/pdf/WidgetComponent.js
+++ b/apps/OpenSign/src/components/pdf/WidgetComponent.js
@@ -252,7 +252,7 @@ function WidgetComponent({
           <div
             data-tut={dataTut}
             id="navbar"
-            className="stickyfooter"
+            className="fixed z-[99] bottom-0 righit-0"
             style={{ width: window.innerWidth + "px" }}
           >
             <div className="mx-1">
diff --git a/apps/OpenSign/src/pages/Form.js b/apps/OpenSign/src/pages/Form.js
index 12ad3f895..1ef77ff98 100644
--- a/apps/OpenSign/src/pages/Form.js
+++ b/apps/OpenSign/src/pages/Form.js
@@ -761,7 +761,7 @@ const Forms = (props) => {
                     Send In Order
                     <a data-tooltip-id="sendInOrder-tooltip" className="ml-1">
                       <sup>
-                        <i className="fa-light fa-question rounded-full border-[#33bbff] text-[#33bbff] text-[13px] border-[1.5px] py-[1.5px] px-[4px]"></i>
+                        <i className="fa-light fa-question rounded-full border-[#33bbff] text-[#33bbff] text-[13px] border-[1px] py-[1.5px] px-[4px]"></i>
                       </sup>
                     </a>
                     <Tooltip id="sendInOrder-tooltip" className="z-50">
diff --git a/apps/OpenSign/src/pages/Managesign.js b/apps/OpenSign/src/pages/Managesign.js
index 2c27feafc..3fb893b5f 100644
--- a/apps/OpenSign/src/pages/Managesign.js
+++ b/apps/OpenSign/src/pages/Managesign.js
@@ -249,16 +249,10 @@ const ManageSign = () => {
         </div>
       )}
       {isAlert?.message && <Alert type={isAlert.type}>{isAlert.message}</Alert>}
-      <div
-        className="mainDiv"
-        style={{
-          width: "100%",
-          paddingRight: "10px"
-        }}
-      >
+      <div className="relative w-full pr-[10px]">
         <div className="m-[20px]">
           <div className="font-[700] text-[15px] pb-[8px]">My Signature</div>
-          <div className="signBlock mt-4">
+          <div className=" flex flex-col md:flex-row gap-0 md:gap-[12px] mt-4">
             <div>
               <div className="relative">
                 <div className="flex flex-row justify-between w-1/2 pl-[10px]">
@@ -274,7 +268,7 @@ const ManageSign = () => {
 
                     <span
                       onClick={() => handleUploadBtn()}
-                      className="imgupload"
+                      className="signature min-w-[105px]"
                     >
                       Upload Image
                     </span>
@@ -364,7 +358,7 @@ const ManageSign = () => {
                       <div>
                         <div
                           type="button"
-                          className="clearbtn cursor-pointer"
+                          className="op-link"
                           onClick={() => handleClear()}
                         >
                           Clear
@@ -465,7 +459,7 @@ const ManageSign = () => {
                   <div>
                     <div
                       type="button"
-                      className="clearbtn cursor-pointer"
+                      className="op-link"
                       onClick={() => handleClearInitials()}
                     >
                       Clear
diff --git a/apps/OpenSign/src/pages/Opensigndrive.js b/apps/OpenSign/src/pages/Opensigndrive.js
index 70b92e1ba..0e96c3cc7 100644
--- a/apps/OpenSign/src/pages/Opensigndrive.js
+++ b/apps/OpenSign/src/pages/Opensigndrive.js
@@ -598,11 +598,13 @@ function Opensigndrive() {
       {isLoading.isLoad ? (
         <div className="flex flex-col justify-center items-center h-[100vh] w-full">
           <Loader />
-          <span className="text-[13px] text-[gray]">{isLoading.message}</span>
+          <span className="text-[13px] text-base-content">
+            {isLoading.message}
+          </span>
         </div>
       ) : handleError ? (
         <div className="flex justify-center items-center h-[100vh] w-full">
-          <span className="text-[20px] text-[gray]">{handleError}</span>
+          <span className="text-[20px] text-base-content">{handleError}</span>
         </div>
       ) : (
         <>
@@ -625,7 +627,7 @@ function Opensigndrive() {
             >
               {handleFolderTab(folderName)}
             </div>
-            <div className="dropMenuBD">
+            <div className="flex flex-row items-center">
               <div
                 id="folder-menu"
                 className={
@@ -647,7 +649,7 @@ function Opensigndrive() {
                 >
                   <div className="flex flex-col">
                     <span
-                      className="dropdown-item itemColor"
+                      className="dropdown-item text-[10px] md:text-[13px]"
                       onClick={() => setIsFolder(true)}
                     >
                       <i
@@ -657,14 +659,14 @@ function Opensigndrive() {
                       Create folder
                     </span>
                     <span
-                      className="dropdown-item itemColor"
+                      className="dropdown-item text-[10px] md:text-[13px]"
                       onClick={() => navigate("/form/sHAnZphf69")}
                     >
                       <i className="fa-light fa-pen-nib mr-[5px]"></i>
                       Sign Yourself
                     </span>
                     <span
-                      className="dropdown-item itemColor"
+                      className="dropdown-item text-[10px] md:text-[13px]"
                       onClick={() => navigate("/form/8mZzFxbG1z")}
                     >
                       <i className="fa-light fa-file-signature mr-[5px]"></i>
@@ -707,7 +709,7 @@ function Opensigndrive() {
                           setSelectedSort(value);
                           sortingData(value, null, pdfData);
                         }}
-                        className="dropdown-item itemColor"
+                        className="dropdown-item text-[10px] md:text-[13px]"
                         style={{
                           paddingLeft: selectedSort !== value && "31px"
                         }}
@@ -732,7 +734,7 @@ function Opensigndrive() {
                           setSortingOrder(order);
                           sortingData(null, order, pdfData);
                         }}
-                        className="dropdown-item itemColor"
+                        className="dropdown-item text-[10px] md:text-[13px]"
                         style={{
                           paddingLeft: sortingOrder !== order && "31px"
                         }}
diff --git a/apps/OpenSign/src/pages/PdfRequestFiles.js b/apps/OpenSign/src/pages/PdfRequestFiles.js
index 4b4075602..a8e824cd2 100644
--- a/apps/OpenSign/src/pages/PdfRequestFiles.js
+++ b/apps/OpenSign/src/pages/PdfRequestFiles.js
@@ -1388,7 +1388,7 @@ function PdfRequestFiles() {
               {isUiLoading && (
                 <div className="absolute h-[100vh] w-full flex flex-col justify-center items-center z-[999] bg-[#e6f2f2] bg-opacity-80">
                   <Loader />
-                  <span style={{ fontSize: "13px", fontWeight: "bold" }}>
+                  <span className="text-[13px] text-base-content">
                     This might take some time
                   </span>
                 </div>
@@ -1551,7 +1551,7 @@ function PdfRequestFiles() {
                   pageNumber={pageNumber}
                 />
                 {/* pdf render view */}
-                <div className=" w-full  md:w-[57%] flex mr-4">
+                <div className=" w-full md:w-[57%] flex mr-4">
                   <PdfZoom
                     setScale={setScale}
                     scale={scale}
diff --git a/apps/OpenSign/src/pages/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js
index 10290a538..a5d820ff3 100644
--- a/apps/OpenSign/src/pages/PlaceHolderSign.js
+++ b/apps/OpenSign/src/pages/PlaceHolderSign.js
@@ -514,6 +514,7 @@ function PlaceHolderSign() {
         const getYPosition = signBtnPosition[0]
           ? y - signBtnPosition[0].yPos
           : y;
+        console.log("getxyPos", getXPosition, getYPosition);
         const dropObj = {
           xPosition: getXPosition / (containerScale * scale),
           yPosition: getYPosition / (containerScale * scale),
@@ -1742,7 +1743,7 @@ function PlaceHolderSign() {
             {isUiLoading && (
               <div className="absolute h-[100vh] w-full flex flex-col justify-center items-center z-[999] bg-[#e6f2f2] bg-opacity-80">
                 <Loader />
-                <span className="text-[13px] font-bold">
+                <span className="text-[13px] text-base-content">
                   This might take some time
                 </span>
               </div>
@@ -1779,7 +1780,7 @@ function PlaceHolderSign() {
                 pageNumber={pageNumber}
               />
               {/* pdf render view */}
-              <div className=" w-full  md:w-[57%] flex mr-4">
+              <div className=" w-full md:w-[57%] flex mr-4">
                 <PdfZoom
                   setScale={setScale}
                   scale={scale}
diff --git a/apps/OpenSign/src/pages/SignyourselfPdf.js b/apps/OpenSign/src/pages/SignyourselfPdf.js
index 6c59d3839..4b7ea565e 100644
--- a/apps/OpenSign/src/pages/SignyourselfPdf.js
+++ b/apps/OpenSign/src/pages/SignyourselfPdf.js
@@ -1166,7 +1166,7 @@ function SignYourSelf() {
           {isUiLoading && (
             <div className="absolute h-[100vh] w-full z-[999] flex flex-col justify-center items-center bg-[#e6f2f2] bg-opacity-80">
               <Loader />
-              <span style={{ fontSize: "13px", fontWeight: "bold" }}>
+              <span className="text-[13px] text-base-content">
                 This might take some time
               </span>
             </div>
@@ -1214,7 +1214,7 @@ function SignYourSelf() {
               pageNumber={pageNumber}
               containerWH={containerWH}
             />
-            <div className=" w-full  md:w-[57%] flex mr-4">
+            <div className=" w-full md:w-[57%] flex mr-4">
               <PdfZoom
                 setScale={setScale}
                 scale={scale}
diff --git a/apps/OpenSign/src/pages/TemplatePlaceholder.js b/apps/OpenSign/src/pages/TemplatePlaceholder.js
index 43f36f73c..928c51f26 100644
--- a/apps/OpenSign/src/pages/TemplatePlaceholder.js
+++ b/apps/OpenSign/src/pages/TemplatePlaceholder.js
@@ -423,6 +423,7 @@ const TemplatePlaceholder = () => {
               (dragTypeValue === "stamp" || dragTypeValue === "image") && true,
             key: key,
             scale: containerScale,
+            // isMobile: isMobile,
             zIndex: posZIndex,
             type: item.text,
             options: addWidgetOptions(dragTypeValue),
@@ -1338,7 +1339,7 @@ const TemplatePlaceholder = () => {
               />
 
               {/* pdf render view */}
-              <div className=" w-full  md:w-[57%] flex mr-4">
+              <div className=" w-full md:w-[57%] flex mr-4">
                 <PdfZoom
                   setScale={setScale}
                   scale={scale}
diff --git a/apps/OpenSign/src/primitives/LoaderWithMsg.js b/apps/OpenSign/src/primitives/LoaderWithMsg.js
index 77dc971b0..37c1010e8 100644
--- a/apps/OpenSign/src/primitives/LoaderWithMsg.js
+++ b/apps/OpenSign/src/primitives/LoaderWithMsg.js
@@ -4,7 +4,6 @@ import Loader from "./Loader";
 function LoaderWithMsg({ isLoading }) {
   return (
     <div className="flex flex-col justify-center items-center h-[100vh]">
-      {/* <img alt="loader" src={loader} className="w-[80px] h-[80px]" /> */}
       <Loader />
       <span className="text-[13px] text-base-cotent">{isLoading.message}</span>
     </div>
diff --git a/apps/OpenSign/src/primitives/Tooltip.js b/apps/OpenSign/src/primitives/Tooltip.js
index 610fe7486..1658441b8 100644
--- a/apps/OpenSign/src/primitives/Tooltip.js
+++ b/apps/OpenSign/src/primitives/Tooltip.js
@@ -6,7 +6,7 @@ const Tooltip = ({ id, message, url, iconColor }) =>
     <button onClick={() => openInNewTab(url)} className={"text-center"}>
       <sup>
         <i
-          className="fa-light fa-question rounded-full border-[1.5px] py-[1.5px] px-[4px] text-[13px]"
+          className="fa-light fa-question rounded-full border-[1px] py-[1.5px] px-[4px] text-[13px]"
           style={{
             borderColor: iconColor ? iconColor : "#33bbff",
             color: iconColor ? iconColor : "#33bbff"
@@ -23,7 +23,7 @@ const Tooltip = ({ id, message, url, iconColor }) =>
       >
         <sup>
           <i
-            className="fa-light fa-question rounded-full border-[1.5px] py-[1.5px] px-[4px] text-[13px]"
+            className="fa-light fa-question rounded-full border-[1px] py-[1.5px] px-[4px] text-[13px]"
             style={{
               borderColor: iconColor ? iconColor : "#33bbff",
               color: iconColor ? iconColor : "#33bbff"
diff --git a/apps/OpenSign/src/styles/managesign.css b/apps/OpenSign/src/styles/managesign.css
index 94747ef51..a937f79b8 100644
--- a/apps/OpenSign/src/styles/managesign.css
+++ b/apps/OpenSign/src/styles/managesign.css
@@ -1,12 +1,3 @@
-.mainDiv {
-  position: relative;
-}
-
-.successBtn {
-  background: #3ac9d6;
-  border: 1px solid #3ac9d6;
-}
-
 .warning {
   position: absolute;
   padding: 8px;
@@ -38,16 +29,6 @@
   margin: 0 auto;
 }
 
-.successBox {
-  z-index: 1;
-  position: absolute;
-  top: 5%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 13px;
-  animation: inAnimation 2s ease-in-out;
-}
-
 @keyframes inAnimation {
   0% {
     opacity: 0;
@@ -83,117 +64,15 @@
   font-size: 12px;
   font-weight: 600;
   border-radius: 2px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.1),
+    0 1px 2px rgba(0, 0, 0, 0.18);
 }
 
 .signature:hover {
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
+  box-shadow:
+    0 2px 4px rgba(0, 0, 0, 0.1),
+    0 2px 4px rgba(0, 0, 0, 0.18);
   background: #13a8da;
   color: white;
 }
-
-.imgupload {
-  color: white;
-  cursor: pointer;
-  padding: 10px 14px 10px;
-  background: #15b4e9;
-  font-size: 12px;
-  font-weight: 600;
-  border-radius: 2px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
-  min-width: 105px;
-}
-
-.imgupload:hover {
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
-  background: #13a8da;
-  color: white;
-}
-
-.loaderContainer {
-  position: fixed;
-  inset: 0%;
-  width: 100%;
-  height: 100svh;
-  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.loader {
-  width: 70px;
-  height: 70px;
-  border-top: 4px solid #1b8ef4;
-  border-left: 4px solid #1b8ef4;
-  border-radius: 80%;
-  animation: spin 0.5s linear infinite;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.customBtn {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
-  padding: 10px 14px 10px;
-  color: white;
-  font-weight: 600;
-  font-size: 12px;
-  text-transform: uppercase;
-  border-radius: 2px;
-  margin-left: 10px;
-  width: 100px;
-}
-
-.clearbtn {
-  font-size: 15px;
-}
-
-.clearbtn:hover {
-  text-decoration: underline;
-  text-underline-offset: 2px;
-  color: blue;
-}
-
-.successBtn:hover {
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
-  background: #1ab6ce;
-  color: white;
-}
-
-.resetBtn {
-  background: #188ae2;
-  margin-left: 10;
-  border: 1px solid #188ae2;
-}
-
-.resetBtn:hover {
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
-  background: #177ecd;
-  color: white;
-}
-
-.signBlock {
-  display: flex;
-  flex-direction: row;
-  gap: 12px;
-}
-.signInputManage {
-  width: 50%;
-}
-@media (max-width: 815px) {
-  .signBlock {
-    display: flex;
-    flex-direction: column;
-  }
-  .signInputManage {
-    width: 100%;
-  }
-}
diff --git a/apps/OpenSign/src/styles/opensigndrive.css b/apps/OpenSign/src/styles/opensigndrive.css
index 9e9f5d8ee..6e35e391c 100644
--- a/apps/OpenSign/src/styles/opensigndrive.css
+++ b/apps/OpenSign/src/styles/opensigndrive.css
@@ -9,7 +9,8 @@
   border-radius: 6px;
   overflow: hidden;
   padding: 5px;
-  box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35),
+  box-shadow:
+    0px 10px 38px -10px rgba(22, 23, 24, 0.35),
     0px 10px 20px -15px rgba(22, 23, 24, 0.2);
   z-index: 99;
 }
@@ -106,110 +107,14 @@
   color: var(--violet-11);
 }
 
-.itemColor {
-  font-size: 13px !important;
-}
-
-.folderComponent {
-  padding: 30px;
-  height: 100%;
-  border-radius: 5px;
-}
-.inputStyle {
-  border: 1.6px solid #ccc !important;
-}
-.folderComponent::-webkit-scrollbar {
-  display: none;
-  /* for Chrome, Safari, and Opera */
-}
-
 .modal {
   margin-top: 50px;
 }
-
-.folderBox {
-  /* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
-      margin: 10px   ;
-      padding: 5px 0px 5px 40px; */
-  /* overflow: scroll;
-      display: flex;
-      justify-content: space-between;
-      width: 200px; */
-  margin: 10px;
-  /* box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; */
-}
-
-.folderContainer {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-}
-
-/* .folderBox:hover{
-      box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
-      font-weight: bold;
-  } */
 .pdfName {
   font-size: 10px;
   font-weight: 600;
 }
 
-.viewbotton {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
-  padding: 8px 20px;
-  color: white;
-  font-weight: 600;
-  font-size: 14px;
-  border: none;
-  border-radius: 2px;
-  margin-left: 10px;
-}
-
-.viewbotton:focus {
-  border: none;
-  outline: none;
-}
-
-.folderRender {
-  display: flex;
-  flex-direction: column;
-
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  position: relative;
-  width: 100px;
-  height: 100px;
-  margin: 20px;
-  display: inline-block;
-}
-
-.pdfContainer {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  margin-top: 20px;
-  align-items: center;
-
-  justify-content: space-around;
-}
-
-.pdfContainer .box:last-child {
-  margin-left: 0;
-  /* Override the margin on the last box */
-  margin-right: auto;
-  /* Align it to the start */
-}
-
-.icon-container {
-  position: relative;
-  width: 100px;
-  height: 100px;
-  margin: 10px;
-  display: inline-block;
-  cursor: pointer;
-}
 
 .hrStyle {
   margin-top: 0rem !important;
@@ -218,17 +123,11 @@
   border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-.pdf-icon {
-  width: 100%;
-  height: 100%;
-}
-
 .status-badge {
   position: absolute;
   top: 0;
   right: 0;
   background-color: #fff;
-
   width: 24px;
   height: 24px;
   display: flex;
@@ -268,14 +167,6 @@
   color: #fff;
 }
 
-.add {
-  background-color: #05bbdb;
-  color: #fff;
-  padding: 8px 15px;
-  text-align: center;
-  display: flex;
-  margin: 5px;
-}
 
 .sort {
   padding: 8px 15px;
@@ -292,56 +183,6 @@
   border-radius: 2px;
 }
 
-/* Hover effect */
-.info-box {
-  position: absolute;
-
-  bottom: 100%;
-  left: 0;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  padding: 5px;
-  width: 180px;
-  display: none;
-  z-index: 10;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  text-align: center;
-}
-
-.icon-container:hover .info-box {
-  display: block;
-}
-
-.folderRender:hover .info-box {
-  display: block;
-}
-
-.info-box:hover {
-  z-index: 999;
-}
-
-.addFolderInput {
-  padding: 10px;
-
-  border-radius: 4px;
-  /* width: 440px; */
-  font-size: 15px;
-
-  border: 0.5px solid rgb(198, 195, 195);
-}
-
-.tooltip-inner {
-  background-color: #fff;
-  border: 1px solid black;
-  font-weight: 600;
-  opacity: 1 !important;
-  color: rgb(0, 0, 0);
-  border-radius: 3px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  font-size: 12px;
-}
-
 .fileName {
   display: inline-block;
   width: 100px;
@@ -353,22 +194,6 @@
   font-weight: 480;
 }
 
-.foldName {
-  display: inline-block;
-  width: 100px;
-  white-space: nowrap;
-  overflow: hidden !important;
-  text-overflow: ellipsis;
-  font-size: 11px;
-  text-align: center;
-  font-weight: 480;
-}
-
-.statusSpan {
-  font-size: 12px;
-  font-weight: 500;
-}
-
 a {
   all: unset;
 }
@@ -378,7 +203,8 @@ a {
   padding: 5px 10px;
   width: 170px;
   background-color: white;
-  box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
+  box-shadow:
+    hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
     hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
   animation-duration: 400ms;
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
@@ -455,85 +281,14 @@ a {
   }
 }
 
-.dropMenuBD {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.dropMenuSS {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  display: none;
-}
-
-.folderPath {
-  overflow-x: auto;
-  white-space: nowrap;
-
-  cursor: pointer;
-  user-select: none;
-}
-
-.folderPath::-webkit-scrollbar {
-  display: none;
-  /* for Chrome, Safari, and Opera */
-}
-
-.docDeleteBtn {
-  /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); */
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  padding: 7px 17px;
-  color: white;
-  font-weight: 600 !important;
-  font-size: 12px !important;
-  border: none;
-  border-radius: 2px;
-}
-
-.docDeleteBtn:focus {
-  border: none;
-  outline: none;
-}
-
-.docDeleteBtn:hover {
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
-  color: white;
-}
-
-@media screen and (max-width: 766px) {
-  .itemColor {
-    font-size: 10px !important;
-  }
-}
-
 @media (min-width: 310px) and (max-width: 550px) {
-  .pdfContainer {
-    justify-content: space-around;
-  }
-
   .sort {
     padding: 2px;
   }
-
-  .folderComponent {
-    margin: 10px;
-  }
 }
 
 @media screen and (max-width: 309px) {
-  .pdfContainer {
-    justify-content: center;
-  }
-
   .sort {
     padding: 2px;
   }
-
-  .folderComponent {
-    margin: 10px;
-  }
 }
diff --git a/apps/OpenSign/src/styles/signature.css b/apps/OpenSign/src/styles/signature.css
index e685dc939..7f56b9245 100644
--- a/apps/OpenSign/src/styles/signature.css
+++ b/apps/OpenSign/src/styles/signature.css
@@ -3,18 +3,6 @@
 @import url("https://fonts.googleapis.com/css2?family=Delicious+Handrawn&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap");
 
-.placeholderBlock {
-  padding: 0px;
-  position: absolute;
-  border-style: dashed;
-  width: 150px;
-  height: 60px;
-  background: #daebe0;
-  text-align: center;
-  justify-content: center;
-  border-width: 0.2px;
-}
-
 .react-datepicker__input-container {
   position: initial !important;
 }
@@ -37,46 +25,6 @@
   border-radius: 50px;
 }
 
-.drodown-input {
-  padding: 5px;
-  width: 100%;
-  font-size: 0.75rem;
-  border: 1px solid #8ad5ce;
-  /* border: 1px solid #e2dddd; */
-  /* background-color: #e0e5f5; */
-  color: black;
-  font-family: inherit;
-  font-feature-settings: inherit;
-  font-variation-settings: inherit;
-  font-weight: inherit;
-  overflow: visible;
-}
-
-.drodown-input:focus {
-  outline: none;
-  border: 1px solid #099b8d;
-}
-
-.dropdownAdd {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
-  color: white;
-  font-weight: 600;
-  font-size: 13px;
-  border: none;
-  margin-left: 10px;
-}
-
-.dropdownAdd:focus {
-  outline: none;
-}
-
-.dropdownList {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  width: 50%;
-}
-
 .signatureCanvas {
   border: 2px solid #888;
   background-color: rgb(255, 255, 255);
@@ -102,10 +50,6 @@
   width: 460px;
 }
 
-.penContainerInitial {
-  width: 183px;
-}
-
 .borderResize {
   position: absolute;
   display: inline-block;
@@ -117,190 +61,14 @@
   cursor: sw-resize;
 }
 
-.dropdown-date-menu {
-  min-width: 7rem;
-}
-
-.mailBtn {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
-  padding: 3px 15px !important;
-  background-color: rgb(79 190 241);
-  border: none !important;
-  color: white !important;
-}
-
-.mailBtn:hover {
-  box-shadow: 0 2px 4px rgba(154, 36, 36, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
-}
-
-.signatureBtn {
-  border: 1.5px solid #47a3ad;
-  border-radius: 3px;
-  display: flex;
-  padding: 0px;
-  justify-content: space-between;
-  background: white;
-  transition-duration: 0.4s;
-  cursor: all-scroll;
-  width: 'auto';
-  height: 30px;
-  color: black;
-}
-
-.disableSign {
-  border: 1.5px solid #47a3ad;
-  margin-bottom: 10px;
-  border-radius: 3px;
-  display: flex;
-  padding: 0px;
-  justify-content: space-between;
-  background: white;
-  transition-duration: 0.4s;
-  cursor: all-scroll;
-  width: 150px;
-  height: 30px;
-  color: black;
-  border: 1px solid rgb(203, 203, 203);
-  cursor: text;
-}
-
-.emailInput {
-  padding: 10px;
-  border: 1.5px solid gray;
-  border-radius: 4px;
-  width: 100%;
-  font-size: 15px;
-  padding-bottom: 20px;
-}
-
-.emailInput:focus {
-  outline: none;
-  border: 1.5px solid #47a3ad;
-}
-
-.addEmail {
-  padding: "0px";
-  border: 1.5px solid #47a3ad;
-  border-radius: 4px;
-  width: 100%;
-  font-size: 15px;
-}
-
-.addEmail,
-.emailInput {
-  outline: none;
-}
-
-.addEmailInput {
-  border: none;
-  outline: none;
-}
-
-.emailChip {
-  background-color: #47a3ad;
-  margin: 4px;
-  border-radius: 10px;
-  padding: 5px 10px;
-}
-
-.addEmailInput {
-  padding: 10px;
-  border-radius: 4px;
-  width: 100%;
-  font-size: 15px;
-}
-
-.addEmailInput:focus {
-  outline: none;
-  border: none;
-}
-
-.signatureInput {
-  width: 80%;
-  border-radius: 4px;
-  font-size: 20px;
-  border: 1px solid #e2dddd;
-  color: black;
-  font-family: inherit;
-  font-feature-settings: inherit;
-  font-variation-settings: inherit;
-  font-weight: inherit;
-  overflow: visible;
-  height: 30px;
-}
-
-.signatureInput:focus {
-  outline: none;
-  border: 1px solid blue;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
-}
-
-.resizable-box-overlay {
+.icon {
   position: absolute;
-  border: 2px solid #ddd;
-  overflow: hidden;
-  background-color: white;
-}
-
-.box-content {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.close-button {
-  align-self: flex-end;
-  margin: 8px;
-  cursor: pointer;
-}
-
-.placeholdCloseBtn {
-  position: absolute;
-  right: -5px;
-  top: -5px;
-  border-radius: 100%;
-  font-size: 10px;
-  cursor: pointer;
-  padding: 0px 5.1px 1px 5px;
-}
-
-.signCloseBtn {
-  position: absolute;
-
   font-size: 14px;
   cursor: pointer;
   z-index: 2;
   background: white;
 }
 
-.signCopy {
-  position: absolute;
-
-  font-size: 13px;
-  cursor: pointer;
-  z-index: 2;
-  background: white;
-}
-
-.signUserIcon {
-  position: absolute;
-
-  font-size: 13px;
-  cursor: pointer;
-  z-index: 2;
-  background: white;
-}
-
-.settingIcon {
-  position: absolute;
-
-  font-size: 13px;
-  cursor: pointer;
-  z-index: 2;
-  background: white;
-}
-
 .ScrollbarsCustom-TrackY {
   width: 4px !important;
 }
@@ -315,19 +83,10 @@
   align-items: center !important;
 }
 
-.finishBtn {
-  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;
-  border-radius: 2px;
-}
-
 .sendMail {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
+  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;
@@ -336,105 +95,7 @@
   margin-left: 10px;
 }
 
-.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);
-}
-
-.saveBtn {
-  padding: 3px 18px !important;
-}
-
-.disabledFinish {
-  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: 600;
-  font-size: 14px;
-  border: none;
-  margin-left: 10px;
-}
-
-.sendHover:hover {
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
-  color: white;
-}
-
-.defaultSignBox {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
-  width: 90%;
-  height: 111px;
-  padding: 8px 20px;
-  color: white;
-  font-weight: 600;
-  font-size: 14px;
-  border: none;
-  border-radius: 2px;
-  margin-left: 10px;
-}
-
-.defaultBtn {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
-  padding: 3px 26px;
-  color: black;
-  font-weight: 500;
-  font-size: 14px;
-  border: 1px solid gray;
-  border-radius: 2px;
-  margin-left: 10px;
-  border: "none";
-}
-
-.defaultBtn:focus {
-  border: none;
-  outline: none;
-}
-
-
-.signerList {
-  overflow-y: scroll;
-  max-height: 180px;
-}
-
-.signerList::-webkit-scrollbar {
-  display: none;
-}
-
-.showScroll {
-  height: 100%;
-  overflow: scroll;
-}
-
-.showScroll::-webkit-scrollbar {
-  display: none;
-}
-
-.hideScroll {
-  height: 100%;
-  overflow: scroll;
-}
-
-.signedStyle {
-  color: white;
-  padding: 5px;
-  font-family: sans-serif;
-  font-size: 15px !important;
-}
-
-.userName {
-  font-size: 12px !important;
-  font-weight: bold !important;
-  color: #424242 !important;
-  width: 100px;
-  white-space: nowrap;
-  overflow: hidden !important;
-  text-overflow: ellipsis;
-}
-.user{
+.user {
   white-space: nowrap;
   overflow: hidden !important;
   text-overflow: ellipsis;
@@ -447,26 +108,6 @@
   /* background-color: #888; */
 }
 
-.useEmail {
-  font-size: 10px;
-  color: #424242;
-  font-weight: 500;
-  width: 100px;
-  white-space: nowrap;
-  overflow: hidden !important;
-  text-overflow: ellipsis;
-}
-
-.spanTagHead {
-  color: white !important;
-  font-size: 17px;
-  font-weight: 500;
-}
-
-.pTagBody {
-  font-size: 15px !important;
-}
-
 .signTab {
   cursor: pointer !important;
   font-weight: 400 !important;
@@ -474,71 +115,10 @@
   font-size: 15px !important;
 }
 
-.cancelBtn {
-  color: black;
-  border: 1px solid #ccc;
-}
-
-.draggable-button {
-  padding: 10px 20px;
-  background: #3498db;
-  color: #fff;
-  border: none;
-  cursor: grab;
-  transition: transform 0.2s;
-}
-
-.draggable-button.dragging {
-  opacity: 0.5;
-  /* Reduce opacity while dragging */
-  transform: scale(1.1);
-  /* Apply a scaling effect while dragging */
-}
-
-.signatureContainer {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  /* background-color: #ebebeb; */
-  position: "relative";
-}
-
-
 .signerComponent {
   /* box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; */
   /* width: 180px; */
   background-color: white;
- 
-}
-
-.modalBody {
-  padding: 1rem !important;
-  padding-top: 2rem !important;
-}
-
-.signLayoutContainer1 {
-  padding: 15px;
-  display: flex;
-  /* flex-direction: column; */
-  /* justify-content: start; */
-  align-items: center;
-}
-
-.signLayoutContainer2 {
-  display: none;
-}
-
-.preBtn1 {
-  display: flex;
-  align-items: center;
-}
-
-.preBtn2 {
-  display: none;
-}
-
-.headerBtn2 {
-  display: none;
 }
 
 .uploadImgLogo {
@@ -606,7 +186,6 @@
   gap: 5px;
   border: none;
   background-color: #887abf;
-
   width: 100px;
   white-space: nowrap;
   overflow: hidden !important;
@@ -668,7 +247,8 @@ option {
   overflow: hidden;
   background-color: white;
   border-radius: 6px;
-  box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35),
+  box-shadow:
+    0px 10px 38px -10px rgba(22, 23, 24, 0.35),
     0px 10px 20px -15px rgba(22, 23, 24, 0.2);
 }
 
@@ -733,11 +313,6 @@ option {
   cursor: default;
 }
 
-.fontOptionContainer {
-  border: 1px solid #d6d3d3;
-  margin: 10px 0px 5px 0px;
-}
-
 .dropDownStyle {
   width: auto;
 }
@@ -754,16 +329,6 @@ option {
   width: 76%;
 }
 
-.regxSelect {
-  border: 1px solid #8ad5ce;
-  width: 80%;
-}
-
-.regxSelect:focus {
-  outline: none;
-  border: 1px solid #8ad5ce;
-}
-
 .radioGroupInput {
   width: 100%;
 }
@@ -774,75 +339,15 @@ option {
   justify-content: flex-start;
 }
 
-.labelWidthDesktop {
-  min-width: 100%;
-  min-height: 100%;
-}
-
-.labelWidthMobile {
-  width: 100%;
-  height: 100%;
-}
-
-.labelTextArea {
-  font-size: 12px;
-  border: 1px solid #007bff;
-  outline: none;
-  z-index: 999;
-  border-radius: 2px;
-  resize: none;
-  overflow: hidden;
-}
-
-.labelTextArea:focus {
-  outline: none;
-  border: 1px solid #188ae2;
-}
-
 @media screen and (max-width: 766px) {
   .validateInputText {
     width: 93%;
   }
 
-  .regxSelect {
-    width: 100%;
-  }
-
-  .validateText {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-  }
-
-  .showPages {
-    display: none;
-  }
-
   .dropdown-menu {
     min-width: 0rem !important;
   }
 
-  .signatureContainer {
-    display: flex;
-    flex-direction: column;
-  }
-
-  /* .signerComponent {
-    display: none;
-  } */
-
-  .preBtn1 {
-    display: none;
-  }
-
-  .preBtn2 {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background-color: #ebebeb;
-    padding: 5px 10px;
-  }
-
   #navbar {
     overflow: hidden;
     z-index: 49;
@@ -879,51 +384,13 @@ option {
     position: fixed;
   }
 
-  .stickyfooter {
-    position: fixed;
-    z-index: 99 !important;
-    bottom: 0px;
-    right: 0rem;
-  }
-
   /* Add some top padding to the page content
   to prevent sudden quick movement (as the
   navigation bar gets a new position at the top of the
   page (position:fixed and top:0) */
-  .stickyHead+.content {
+  .stickyHead + .content {
     padding-top: 60px;
   }
-
-  .signLayoutContainer2 {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-around;
-    margin-top: 5px;
-    padding: 2px 5px 10px 5px;
-    position: sticky;
-    align-items: center;
-  }
-
-  .headerBtn {
-    display: none;
-  }
-
-  .headerBtn2 {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-
-    margin-top: 5px;
-  }
-
-  .mobileHead {
-    display: flex;
-  }
-
-  .signatureText {
-    margin-right: 5px;
-    font-size: 12px;
-  }
 }
 
 @media screen and (max-width: 487px) and (min-width: 351px) {
@@ -940,17 +407,8 @@ option {
     font-size: 30px;
   }
 
-  .hidePdf {
-    display: none;
-  }
-
-  .mobileHead {
-    display: flex;
-  }
-
   .signTab {
     font-weight: 500 !important;
-
     font-size: 12px !important;
   }
 }
@@ -968,10 +426,6 @@ option {
     width: 280px;
   }
 
-  .hidePdf {
-    display: none;
-  }
-
   .signTab {
     font-weight: 500 !important;
 
@@ -981,14 +435,6 @@ option {
   .uploadImgLogo {
     font-size: 25px;
   }
-
-  .uploadImg {
-    font-size: 10px !important;
-  }
-
-  .mobileHead {
-    display: flex;
-  }
 }
 
 @media screen and (max-width: 310px) {
@@ -1001,178 +447,12 @@ option {
     width: 230px;
   }
 
-  .hidePdf {
-    display: none;
-  }
-
   .signTab {
     font-weight: 500 !important;
-
     font-size: 8px !important;
   }
 
   .uploadImgLogo {
     font-size: 20px;
   }
-
-  .uploadImg {
-    font-size: 10px !important;
-  }
-
-  .mobileHead {
-    display: flex;
-  }
 }
-
-.signature-backdrop {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: #000;
-}
-
-.signature-backdrop.fade.in {
-  opacity: 0.5;
-}
-
-.modaloverlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.75);
-  justify-content: center;
-  align-items: center;
-  z-index: 900;
-}
-
-.modalcontainer {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: #fff;
-  border-radius: 5px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-  z-index: 901;
-  max-height: 80%;
-  min-width: 500px;
-  overflow-y: auto;
-  scrollbar-width: none;
-  /* Firefox */
-  -ms-overflow-style: none;
-  /* Internet Explorer and Edge */
-}
-
-.dropdownModal {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: #fff;
-  border-radius: 5px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-  z-index: 901;
-  max-height: 80%;
-  min-width: 40%;
-  overflow-y: auto;
-  scrollbar-width: none;
-  /* Firefox */
-  -ms-overflow-style: none;
-  /* Internet Explorer and Edge */
-}
-
-/* Hide scrollbar for Webkit browsers */
-.modalcontainer::-webkit-scrollbar {
-  display: none;
-}
-
-/* Hide scrollbar for Webkit browsers */
-.dropdownModal::-webkit-scrollbar {
-  display: none;
-}
-
-.modalheader {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px 20px;
-  border-bottom: 1px solid #ccc;
-  color: #ffffff;
-}
-
-/* Styling for the modal title */
-.modaltitle {
-  font-size: 1.2rem;
-  font-weight: normal;
-}
-
-/* Styling for the close button */
-.closebtn {
-  background: none;
-  border: none;
-  font-size: 1.5rem;
-  cursor: pointer;
-}
-
-.defaultOptions {
-  font-size: 12px;
-  margin-left: 5px;
-}
-
-.defaultOptions:focus {
-  outline: none;
-}
-
-@media (max-width: 767px) {
-  .modalcontainer {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background-color: #fff;
-    border-radius: 8px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-    z-index: 1000;
-    max-height: 80%;
-    min-width: 90%;
-    overflow-y: auto;
-  }
-
-  .signatureBtn {
-    width: max-content;
-  }
-
-  .dropdownModal {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background-color: #fff;
-    border-radius: 8px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-    z-index: 1000;
-    max-height: 80%;
-    min-width: 60%;
-    overflow-y: auto;
-  }
-}
-
-@media (max-width: 464px) {
-  .dropdownModal {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background-color: #fff;
-    border-radius: 8px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-    z-index: 1000;
-    max-height: 80%;
-    min-width: 78%;
-    overflow-y: auto;
-  }
-}
\ No newline at end of file