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/RenderDebugPdf.js b/apps/OpenSign/src/components/RenderDebugPdf.js
index c204b207a..f33935e4a 100644
--- a/apps/OpenSign/src/components/RenderDebugPdf.js
+++ b/apps/OpenSign/src/components/RenderDebugPdf.js
@@ -13,11 +13,7 @@ const RenderDebugPdf = (props) => {
       >
         <Document
           onLoadError={() => {
-            const load = {
-              status: false,
-              type: "failed"
-            };
-            props.setPdfLoadFail(load);
+            props.setPdfLoadFail(false);
           }}
           loading={"Loading Document.."}
           onLoadSuccess={props.pageDetails}
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..e5029b11e 100644
--- a/apps/OpenSign/src/components/pdf/Placeholder.js
+++ b/apps/OpenSign/src/components/pdf/Placeholder.js
@@ -91,6 +91,7 @@ function Placeholder(props) {
   const [placeholderBorder, setPlaceholderBorder] = useState({ w: 0, h: 0 });
   const [isDraggingEnabled, setDraggingEnabled] = useState(true);
   const [isShowDateFormat, setIsShowDateFormat] = useState(false);
+  const [containerScale, setContainerScale] = useState();
   const [selectDate, setSelectDate] = useState({
     date:
       props.pos.type === "date"
@@ -120,7 +121,14 @@ function Placeholder(props) {
     width: null,
     height: null
   });
-  const containerScale = props.containerWH.width / props.pdfOriginalWH.width;
+
+  useEffect(() => {
+    const getPdfPageWidth = props.pdfOriginalWH.find(
+      (data) => data.pageNumber === props.pageNumber
+    );
+    setContainerScale(props.containerWH.width / getPdfPageWidth.width);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.containerWH.width, props.pdfOriginalWH]);
   const dateFormatArr = [
     "L",
     "DD-MM-YYYY",
@@ -410,7 +418,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 +439,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 +452,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 +476,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 +495,7 @@ function Placeholder(props) {
               }}
             >
               <i
-                className="fa-light fa-gear settingIcon"
+                className="fa-light fa-gear icon"
                 style={{
                   color: "#188ae2",
                   fontSize: "14px"
@@ -519,8 +523,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 +533,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();
 
@@ -563,7 +566,10 @@ function Placeholder(props) {
     );
   };
   const xPos = (pos, signYourself) => {
-    const containerScale = props.containerWH.width / props.pdfOriginalWH.width;
+    const getPdfPageWidth = props.pdfOriginalWH.find(
+      (data) => data.pageNumber === props.pageNumber
+    );
+    const containerScale = props.containerWH.width / getPdfPageWidth?.width;
     const resizePos = pos.xPosition;
     if (signYourself) {
       return resizePos * containerScale * props.scale;
@@ -585,7 +591,10 @@ function Placeholder(props) {
     }
   };
   const yPos = (pos, signYourself) => {
-    const containerScale = props.containerWH.width / props.pdfOriginalWH.width;
+    const getPdfPageWidth = props.pdfOriginalWH.find(
+      (data) => data.pageNumber === props.pageNumber
+    );
+    const containerScale = props.containerWH.width / getPdfPageWidth.width;
     const resizePos = pos.yPosition;
 
     if (signYourself) {
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/RenderPdf.js b/apps/OpenSign/src/components/pdf/RenderPdf.js
index de2edbfd7..6c89d4969 100644
--- a/apps/OpenSign/src/components/pdf/RenderPdf.js
+++ b/apps/OpenSign/src/components/pdf/RenderPdf.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import RSC from "react-scrollbars-custom";
 import { Document, Page } from "react-pdf";
 import {
@@ -28,7 +28,8 @@ function RenderPdf({
   pdfRequest,
   signerObjectId,
   signedSigners,
-  setPdfLoadFail,
+  pdfLoad,
+  setPdfLoad,
   placeholder,
   setSignerPos,
   setXyPostion,
@@ -55,19 +56,19 @@ function RenderPdf({
   handleTextSettingModal,
   setTempSignerId,
   uniqueId,
-  setPdfRenderHeight,
   pdfOriginalWH,
   scale
 }) {
-  const [isLoadPdf, setIsLoadPdf] = useState(false);
-
   const isMobile = window.innerWidth < 767;
   //check isGuestSigner is present in local if yes than handle login flow header in mobile view
   const isGuestSigner = localStorage.getItem("isGuestSigner");
 
   // handle signature block width and height according to screen
   const posWidth = (pos, signYourself) => {
-    const containerScale = containerWH.width / pdfOriginalWH.width;
+    const getPdfPageWidth = pdfOriginalWH.find(
+      (data) => data.pageNumber === pageNumber
+    );
+    const containerScale = containerWH.width / getPdfPageWidth.width || 1;
     const defaultWidth = defaultWidthHeight(pos.type).width;
     const posWidth = pos.Width ? pos.Width : defaultWidth;
     if (signYourself) {
@@ -93,7 +94,10 @@ function RenderPdf({
     }
   };
   const posHeight = (pos, signYourself) => {
-    const containerScale = containerWH.width / pdfOriginalWH.width;
+    const getPdfPageWidth = pdfOriginalWH.find(
+      (data) => data.pageNumber === pageNumber
+    );
+    const containerScale = containerWH.width / getPdfPageWidth?.width || 1;
 
     const posHeight = pos.Height || defaultWidthHeight(pos.type).height;
     if (signYourself) {
@@ -189,6 +193,7 @@ function RenderPdf({
                         scale={scale}
                         containerWH={containerWH}
                         pdfOriginalWH={pdfOriginalWH}
+                        pageNumber={pageNumber}
                       />
                     </React.Fragment>
                   )
@@ -248,9 +253,8 @@ function RenderPdf({
           ref={drop}
           id="container"
         >
-          {isLoadPdf &&
-            containerWH?.width &&
-            pdfOriginalWH?.width &&
+          {containerWH?.width &&
+            pdfOriginalWH.length > 0 &&
             (pdfRequest
               ? signerPos.map((data, key) => {
                   return (
@@ -315,6 +319,7 @@ function RenderPdf({
                                         scale={scale}
                                         containerWH={containerWH}
                                         pdfOriginalWH={pdfOriginalWH}
+                                        pageNumber={pageNumber}
                                       />
                                     </React.Fragment>
                                   );
@@ -367,6 +372,7 @@ function RenderPdf({
                                   }
                                   scale={scale}
                                   pdfOriginalWH={pdfOriginalWH}
+                                  pageNumber={pageNumber}
                                 />
                               )
                             );
@@ -379,7 +385,7 @@ function RenderPdf({
           <div className="flex items-center justify-center">
             <Document
               onLoadError={() => {
-                setPdfLoadFail(true);
+                setPdfLoad(false);
               }}
               loading={"Loading Document.."}
               onLoadSuccess={pageDetails}
@@ -398,10 +404,6 @@ function RenderPdf({
               }
             >
               <Page
-                onLoadSuccess={({ height }) => {
-                  setPdfRenderHeight && setPdfRenderHeight(height);
-                  setIsLoadPdf(true);
-                }}
                 key={index}
                 pageNumber={pageNumber}
                 width={containerWH.width}
@@ -432,9 +434,9 @@ function RenderPdf({
             ref={drop}
             id="container"
           >
-            {isLoadPdf &&
+            {pdfLoad &&
               containerWH?.width &&
-              pdfOriginalWH?.width &&
+              pdfOriginalWH.length > 0 &&
               (pdfRequest //pdf request sign flow
                 ? signerPos?.map((data, key) => {
                     return (
@@ -499,6 +501,7 @@ function RenderPdf({
                                           scale={scale}
                                           containerWH={containerWH}
                                           pdfOriginalWH={pdfOriginalWH}
+                                          pageNumber={pageNumber}
                                         />
                                       </React.Fragment>
                                     );
@@ -556,6 +559,7 @@ function RenderPdf({
                                     scale={scale}
                                     containerWH={containerWH}
                                     pdfOriginalWH={pdfOriginalWH}
+                                    pageNumber={pageNumber}
                                   />
                                 </React.Fragment>
                               );
@@ -567,11 +571,7 @@ function RenderPdf({
             {/* this component for render pdf document is in middle of the component */}
             <Document
               onLoadError={() => {
-                const load = {
-                  status: false,
-                  type: "failed"
-                };
-                setPdfLoadFail(load);
+                pdfLoad(false);
               }}
               loading={"Loading Document.."}
               onLoadSuccess={pageDetails}
@@ -590,10 +590,6 @@ function RenderPdf({
               }
             >
               <Page
-                onLoadSuccess={({ height }) => {
-                  setPdfRenderHeight && setPdfRenderHeight(height);
-                  setIsLoadPdf(true);
-                }}
                 key={index}
                 width={containerWH.width}
                 scale={scale || 1}
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/components/shared/fields/CreateFolder.js b/apps/OpenSign/src/components/shared/fields/CreateFolder.js
index 55d18ef82..f9ffcc9b1 100644
--- a/apps/OpenSign/src/components/shared/fields/CreateFolder.js
+++ b/apps/OpenSign/src/components/shared/fields/CreateFolder.js
@@ -27,10 +27,12 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
         FolderQuery.equalTo("Folder", folderPtr);
         FolderQuery.equalTo("Type", "Folder");
         FolderQuery.notEqualTo("IsArchive", true);
+        FolderQuery.equalTo("CreatedBy", Parse.User.current());
       } else {
         FolderQuery.doesNotExist("Folder");
         FolderQuery.equalTo("Type", "Folder");
         FolderQuery.notEqualTo("IsArchive", true);
+        FolderQuery.equalTo("CreatedBy", Parse.User.current());
       }
 
       const res = await FolderQuery.find();
diff --git a/apps/OpenSign/src/components/shared/fields/FolderModal.js b/apps/OpenSign/src/components/shared/fields/FolderModal.js
index 857e59951..a318ab96b 100644
--- a/apps/OpenSign/src/components/shared/fields/FolderModal.js
+++ b/apps/OpenSign/src/components/shared/fields/FolderModal.js
@@ -26,10 +26,12 @@ const FolderModal = (props) => {
         FolderQuery.equalTo("Folder", folderPtr);
         FolderQuery.descending("Type");
         FolderQuery.notEqualTo("IsArchive", true);
+        FolderQuery.equalTo("CreatedBy", Parse.User.current());
       } else {
         FolderQuery.doesNotExist("Folder");
         FolderQuery.descending("Type");
         FolderQuery.notEqualTo("IsArchive", true);
+        FolderQuery.equalTo("CreatedBy", Parse.User.current());
       }
 
       const res = await FolderQuery.find();
diff --git a/apps/OpenSign/src/components/shared/fields/SelectFolder.js b/apps/OpenSign/src/components/shared/fields/SelectFolder.js
index d98f44012..91ec14426 100644
--- a/apps/OpenSign/src/components/shared/fields/SelectFolder.js
+++ b/apps/OpenSign/src/components/shared/fields/SelectFolder.js
@@ -46,10 +46,12 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
         FolderQuery.equalTo("Folder", folderPtr);
         FolderQuery.notEqualTo("IsArchive", true);
         FolderQuery.descending("Type");
+        FolderQuery.equalTo("CreatedBy", Parse.User.current());
       } else {
         FolderQuery.doesNotExist("Folder");
         FolderQuery.notEqualTo("IsArchive", true);
         FolderQuery.descending("Type");
+        FolderQuery.equalTo("CreatedBy", Parse.User.current());
       }
 
       const res = await FolderQuery.find();
diff --git a/apps/OpenSign/src/constant/Utils.js b/apps/OpenSign/src/constant/Utils.js
index d6a244cd1..58e6941ee 100644
--- a/apps/OpenSign/src/constant/Utils.js
+++ b/apps/OpenSign/src/constant/Utils.js
@@ -1226,7 +1226,6 @@ export const changeImageWH = async (base64Image) => {
 export const multiSignEmbed = async (
   xyPositionArray,
   pdfDoc,
-  pdfOriginalWH,
   signyourself,
   scale
 ) => {
@@ -1287,20 +1286,8 @@ export const multiSignEmbed = async (
         }
       }
       let widgetWidth, widgetHeight;
-      widgetWidth = placeholderWidth(
-        position,
-        scale,
-        signyourself,
-        pdfOriginalWH,
-        scale
-      );
-      widgetHeight = placeholderHeight(
-        position,
-        scale,
-        signyourself,
-        pdfOriginalWH.height,
-        scale
-      );
+      widgetWidth = placeholderWidth(position);
+      widgetHeight = placeholderHeight(position);
       const xPos = (position) => {
         const resizePos = position.xPosition;
         //first two condition handle to old data already saved from mobile view which scale point diffrent
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..7c995954c 100644
--- a/apps/OpenSign/src/pages/Managesign.js
+++ b/apps/OpenSign/src/pages/Managesign.js
@@ -228,12 +228,7 @@ const ManageSign = () => {
       }
     }
   };
-  const handleSignatureBtn = () => {
-    if (imageRef.current) {
-      imageRef.current.value = "";
-    }
-    setImage("");
-  };
+
   const handleUploadBtn = () => {
     imageRef.current.click();
   };
@@ -249,35 +244,15 @@ 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="text-[20px] font-semibold mb-3">My Signature</div>
+          <div className="flex flex-col md:flex-row gap-0 md:gap-[12px]">
             <div>
               <div className="relative">
                 <div className="flex flex-row justify-between w-1/2 pl-[10px]">
                   <div className="flex flex-row justify-around items-center gap-[10px] mb-[10px]">
-                    <>
-                      <span
-                        onClick={() => handleSignatureBtn()}
-                        className="signature"
-                      >
-                        Signature
-                      </span>
-                    </>
-
-                    <span
-                      onClick={() => handleUploadBtn()}
-                      className="imgupload"
-                    >
-                      Upload Image
-                    </span>
+                    <span className="font-medium select-none">Signature</span>
                     <input
                       type="file"
                       onChange={onImageChange}
@@ -314,19 +289,10 @@ const ManageSign = () => {
                         dotSize={1}
                       />
                     )}
-                    <div
-                      style={{
-                        display: "flex",
-                        flexDirection: "row",
-                        justifyContent: "space-between"
-                      }}
-                      className="penContainerDefault"
-                    >
+                    <div className="penContainerDefault flex flex-row justify-between">
                       <div>
                         {!image && (
-                          <div
-                            style={{ display: "flex", flexDirection: "row" }}
-                          >
+                          <div className="flex flex-row">
                             {allColor.map((data, key) => {
                               return (
                                 <i
@@ -361,10 +327,17 @@ const ManageSign = () => {
                           </div>
                         )}
                       </div>
-                      <div>
+                      <div className="flex flex-row gap-2">
                         <div
                           type="button"
-                          className="clearbtn cursor-pointer"
+                          className="op-link"
+                          onClick={() => handleUploadBtn()}
+                        >
+                          Upload image
+                        </div>
+                        <div
+                          type="button"
+                          className="op-link"
                           onClick={() => handleClear()}
                         >
                           Clear
@@ -373,33 +346,21 @@ const ManageSign = () => {
                     </div>
                   </div>
                   {warning && (
-                    <div
-                      className="warning signWarning"
-                      style={{ fontSize: 12 }}
-                    >
-                      <i
-                        className="fa-light fa-exclamation-circle"
-                        style={{ color: "#fab005", fontSize: 15 }}
-                      ></i>{" "}
+                    <div className="warning signWarning text-[12px]">
+                      <i className="fa-light fa-exclamation-circle text-[#fab005] text-[15px] mr-[4px]"></i>
                       Please upload signature/Image
                     </div>
                   )}
                 </div>
               </div>
             </div>
-            <div style={{ position: "relative" }}>
-              <div style={{ margin: "6px 5px 18px" }}>
-                <span className="signature">Initials</span>
+            <div className="relative">
+              <div className="mb-[10px]">
+                <span className="font-medium select-none">Initials</span>
               </div>
               <div>
                 {isInitials ? (
-                  <div
-                    style={{
-                      position: "relative",
-                      border: "2px solid #888"
-                    }}
-                    className="intialSignature"
-                  >
+                  <div className="intialSignature relative border-[1px] border-[#888]">
                     <img
                       alt="inititals"
                       src={Initials}
@@ -465,7 +426,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..ea9617b29 100644
--- a/apps/OpenSign/src/pages/PdfRequestFiles.js
+++ b/apps/OpenSign/src/pages/PdfRequestFiles.js
@@ -86,7 +86,7 @@ function PdfRequestFiles() {
   const [defaultSignImg, setDefaultSignImg] = useState();
   const [isDocId, setIsDocId] = useState(false);
   const [pdfNewWidth, setPdfNewWidth] = useState();
-  const [pdfOriginalWH, setPdfOriginalWH] = useState();
+  const [pdfOriginalWH, setPdfOriginalWH] = useState([]);
   const [signerPos, setSignerPos] = useState([]);
   const [signerObjectId, setSignerObjectId] = useState();
   const [isUiLoading, setIsUiLoading] = useState(false);
@@ -110,10 +110,7 @@ function PdfRequestFiles() {
   });
   const [myInitial, setMyInitial] = useState("");
   const [isInitial, setIsInitial] = useState(false);
-  const [pdfLoadFail, setPdfLoadFail] = useState({
-    status: false,
-    type: "load"
-  });
+  const [pdfLoad, setPdfLoad] = useState(false);
   const [isSigned, setIsSigned] = useState(false);
   const [isExpired, setIsExpired] = useState(false);
   const [alreadySign, setAlreadySign] = useState(false);
@@ -129,7 +126,6 @@ function PdfRequestFiles() {
   const [isVerifyModal, setIsVerifyModal] = useState(false);
   const [otp, setOtp] = useState("");
   const [contractName, setContractName] = useState("");
-  const [pdfRenderHeight, setPdfRenderHeight] = useState();
   const [zoomPercent, setZoomPercent] = useState(0);
   const [totalZoomPercent, setTotalZoomPercent] = useState();
   const [scale, setScale] = useState(1);
@@ -785,7 +781,6 @@ function PdfRequestFiles() {
             const pdfBytes = await multiSignEmbed(
               pngUrl,
               pdfDoc,
-              pdfOriginalWH,
               isSignYourSelfFlow,
               scale
             );
@@ -1020,14 +1015,16 @@ function PdfRequestFiles() {
   ];
   //function for get pdf page details
   const pageDetails = async (pdf) => {
-    const firstPage = await pdf.getPage(1);
-    const scale = 1;
-    const { width, height } = firstPage.getViewport({ scale });
-    // console.log("width height", width, height);
-    setPdfOriginalWH({ width: width, height: height });
-    setPdfLoadFail({
-      status: true
-    });
+    let pdfWHObj = [];
+    const totalPages = pdf.numPages; // Get the total number of pages
+    for (let index = 0; index < totalPages; index++) {
+      const getPage = await pdf.getPage(index + 1);
+      const scale = 1;
+      const { width, height } = getPage.getViewport({ scale });
+      pdfWHObj.push({ pageNumber: index + 1, width, height });
+    }
+    setPdfOriginalWH(pdfWHObj);
+    setPdfLoad(true);
   };
   //function for change page
   function changePage(offset) {
@@ -1388,7 +1385,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,11 +1548,10 @@ 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}
-                    pdfOriginalWH={pdfOriginalWH}
                     containerWH={containerWH}
                     setZoomPercent={setZoomPercent}
                     zoomPercent={zoomPercent}
@@ -1732,8 +1728,8 @@ function PdfRequestFiles() {
                           pdfRequest={true}
                           signerObjectId={signerObjectId}
                           signedSigners={signedSigners}
-                          setPdfLoadFail={setPdfLoadFail}
-                          pdfLoadFail={pdfLoadFail}
+                          setPdfLoad={setPdfLoad}
+                          pdfLoad={pdfLoad}
                           setSignerPos={setSignerPos}
                           containerWH={containerWH}
                           setIsInitial={setIsInitial}
@@ -1743,8 +1739,6 @@ function PdfRequestFiles() {
                           selectWidgetId={selectWidgetId}
                           setCurrWidgetsDetails={setCurrWidgetsDetails}
                           divRef={divRef}
-                          setPdfRenderHeight={setPdfRenderHeight}
-                          pdfRenderHeight={pdfRenderHeight}
                           setIsResize={setIsResize}
                           isResize={isResize}
                           setTotalZoomPercent={setTotalZoomPercent}
diff --git a/apps/OpenSign/src/pages/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js
index 10290a538..f417b8717 100644
--- a/apps/OpenSign/src/pages/PlaceHolderSign.js
+++ b/apps/OpenSign/src/pages/PlaceHolderSign.js
@@ -87,7 +87,7 @@ function PlaceHolderSign() {
   const [checkTourStatus, setCheckTourStatus] = useState(false);
   const [tourStatus, setTourStatus] = useState([]);
   const [signerUserId, setSignerUserId] = useState();
-  const [pdfOriginalWH, setPdfOriginalWH] = useState();
+  const [pdfOriginalWH, setPdfOriginalWH] = useState([]);
   const [contractName, setContractName] = useState("");
   const [containerWH, setContainerWH] = useState();
   const { docId } = useParams();
@@ -104,10 +104,7 @@ function PlaceHolderSign() {
   const [defaultBody, setDefaultBody] = useState("");
   const [defaultSubject, setDefaultSubject] = useState("");
   const [isTextSetting, setIsTextSetting] = useState(false);
-  const [pdfLoadFail, setPdfLoadFail] = useState({
-    status: false,
-    type: "load"
-  });
+  const [pdfLoad, setPdfLoad] = useState(false);
   const [isPageCopy, setIsPageCopy] = useState(false);
   const [uniqueId, setUniqueId] = useState("");
   const [roleName, setRoleName] = useState("");
@@ -131,7 +128,6 @@ function PlaceHolderSign() {
   const [requestBody, setRequestBody] = useState("");
   const [pdfArrayBuffer, setPdfArrayBuffer] = useState("");
   const isHeader = useSelector((state) => state.showHeader);
-  const [pdfRenderHeight, setPdfRenderHeight] = useState();
   const [activeMailAdapter, setActiveMailAdapter] = useState("");
   const [isAlreadyPlace, setIsAlreadyPlace] = useState({
     status: false,
@@ -467,7 +463,10 @@ function PlaceHolderSign() {
       setZIndex(posZIndex);
       const signer = signersdata.find((x) => x.Id === uniqueId);
       const key = randomId();
-      const containerScale = containerWH?.width / pdfOriginalWH?.width || 1;
+      const getPdfPageWidth = pdfOriginalWH.find(
+        (data) => data.pageNumber === pageNumber
+      );
+      const containerScale = containerWH?.width / getPdfPageWidth?.width || 1;
       let dropData = [];
       let placeHolder;
       const dragTypeValue = item?.text ? item.text : monitor.type;
@@ -660,14 +659,16 @@ function PlaceHolderSign() {
 
   //function for get pdf page details
   const pageDetails = async (pdf) => {
-    const firstPage = await pdf.getPage(1);
-    const scale = 1;
-    const { width, height } = firstPage.getViewport({ scale });
-    // console.log("width height", width, height);
-    setPdfOriginalWH({ width: width, height: height });
-    setPdfLoadFail({
-      status: true
-    });
+    let pdfWHObj = [];
+    const totalPages = pdf?.numPages;
+    for (let index = 0; index < totalPages; index++) {
+      const getPage = await pdf.getPage(index + 1);
+      const scale = 1;
+      const { width, height } = getPage.getViewport({ scale });
+      pdfWHObj.push({ pageNumber: index + 1, width, height });
+    }
+    setPdfOriginalWH(pdfWHObj);
+    setPdfLoad(true);
   };
 
   //function for save x and y position and show signature  tab on that position
@@ -684,7 +685,10 @@ function PlaceHolderSign() {
       updateSignPos.splice(0, updateSignPos.length, ...dataNewPlace);
       const signId = signerId ? signerId : uniqueId; //? signerId : signerObjId;
       const keyValue = key ? key : dragKey;
-      const containerScale = containerWH.width / pdfOriginalWH.width;
+      const getPdfPageWidth = pdfOriginalWH.find(
+        (data) => data.pageNumber === pageNumber
+      );
+      const containerScale = containerWH.width / getPdfPageWidth?.width;
 
       if (keyValue >= 0) {
         let filterSignerPos;
@@ -863,7 +867,6 @@ function PlaceHolderSign() {
         const pdfBytes = await multiSignEmbed(
           placeholder,
           pdfDoc,
-          pdfOriginalWH,
           isSignYourSelfFlow,
           containerWH
         );
@@ -1742,7 +1745,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,11 +1782,10 @@ 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}
-                  pdfOriginalWH={pdfOriginalWH}
                   containerWH={containerWH}
                   setZoomPercent={setZoomPercent}
                   zoomPercent={zoomPercent}
@@ -2068,8 +2070,8 @@ function PlaceHolderSign() {
                         handleDeleteSign={handleDeleteSign}
                         handleTabDrag={handleTabDrag}
                         handleStop={handleStop}
-                        setPdfLoadFail={setPdfLoadFail}
-                        pdfLoadFail={pdfLoadFail}
+                        setPdfLoad={setPdfLoad}
+                        pdfLoad={pdfLoad}
                         setSignerPos={setSignerPos}
                         containerWH={containerWH}
                         setIsResize={setIsResize}
@@ -2091,8 +2093,6 @@ function PlaceHolderSign() {
                         handleNameModal={setIsNameModal}
                         setTempSignerId={setTempSignerId}
                         uniqueId={uniqueId}
-                        setPdfRenderHeight={setPdfRenderHeight}
-                        pdfRenderHeight={pdfRenderHeight}
                         handleTextSettingModal={handleTextSettingModal}
                         pdfOriginalWH={pdfOriginalWH}
                         setScale={setScale}
diff --git a/apps/OpenSign/src/pages/SignyourselfPdf.js b/apps/OpenSign/src/pages/SignyourselfPdf.js
index 6c59d3839..00740a7c3 100644
--- a/apps/OpenSign/src/pages/SignyourselfPdf.js
+++ b/apps/OpenSign/src/pages/SignyourselfPdf.js
@@ -76,7 +76,7 @@ function SignYourSelf() {
   const [signKey, setSignKey] = useState();
   const [imgWH, setImgWH] = useState({});
   const [pdfNewWidth, setPdfNewWidth] = useState();
-  const [pdfOriginalWH, setPdfOriginalWH] = useState();
+  const [pdfOriginalWH, setPdfOriginalWH] = useState([]);
   const [successEmail, setSuccessEmail] = useState(false);
   const imageRef = useRef(null);
   const [myInitial, setMyInitial] = useState("");
@@ -106,10 +106,7 @@ function SignYourSelf() {
   const [currWidgetsDetails, setCurrWidgetsDetails] = useState({});
   const [isCheckbox, setIsCheckbox] = useState(false);
   const [widgetType, setWidgetType] = useState("");
-  const [pdfLoadFail, setPdfLoadFail] = useState({
-    status: false,
-    type: "load"
-  });
+  const [pdfLoad, setPdfLoad] = useState(false);
   const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" });
   const [isDontShow, setIsDontShow] = useState(false);
   const [extUserId, setExtUserId] = useState("");
@@ -120,7 +117,6 @@ function SignYourSelf() {
   const [isEmailVerified, setIsEmailVerified] = useState(true);
   const [isVerifyModal, setIsVerifyModal] = useState(false);
   const [otp, setOtp] = useState("");
-  const [pdfRenderHeight, setPdfRenderHeight] = useState();
   const [zoomPercent, setZoomPercent] = useState(0);
   const isHeader = useSelector((state) => state.showHeader);
   const [scale, setScale] = useState(1);
@@ -458,7 +454,10 @@ function SignYourSelf() {
     const widgetTypeExist = ["name", "company", "job title", "email"].includes(
       dragTypeValue
     );
-    const containerScale = containerWH?.width / pdfOriginalWH?.width || 1;
+    const getPdfPageWidth = pdfOriginalWH.find(
+      (data) => data.pageNumber === pageNumber
+    );
+    const containerScale = containerWH?.width / getPdfPageWidth?.width || 1;
     //adding and updating drop position in array when user drop signature button in div
     if (item === "onclick") {
       const getWidth = widgetTypeExist
@@ -695,7 +694,6 @@ function SignYourSelf() {
             const pdfBytes = await multiSignEmbed(
               xyPostion,
               pdfDoc,
-              pdfOriginalWH,
               isSignYourSelfFlow,
               scale
             );
@@ -809,13 +807,14 @@ function SignYourSelf() {
     setDragKey(key);
     setIsDragging(true);
   };
-
-  // console.log("xy", pdfOriginalWH);
   //function for set and update x and y postion after drag and drop signature tab
   const handleStop = (event, dragElement) => {
     if (isDragging && dragElement) {
       event.preventDefault();
-      const containerScale = containerWH.width / pdfOriginalWH.width;
+      const getPdfPageWidth = pdfOriginalWH.find(
+        (data) => data.pageNumber === pageNumber
+      );
+      const containerScale = containerWH.width / getPdfPageWidth?.width || 1;
       if (dragKey >= 0) {
         const filterDropPos = xyPostion.filter(
           (data) => data.pageNumber === pageNumber
@@ -848,16 +847,18 @@ function SignYourSelf() {
       setIsDragging(false);
     }, 200);
   };
-
   //function for get pdf page details
   const pageDetails = async (pdf) => {
-    const firstPage = await pdf.getPage(1);
-    const scale = 1;
-    const { width, height } = firstPage.getViewport({ scale });
-    setPdfOriginalWH({ width: width, height: height });
-    setPdfLoadFail({
-      status: true
-    });
+    let pdfWHObj = [];
+    const totalPages = pdf?.numPages;
+    for (let index = 0; index < totalPages; index++) {
+      const getPage = await pdf.getPage(index + 1);
+      const scale = 1;
+      const { width, height } = getPage.getViewport({ scale });
+      pdfWHObj.push({ pageNumber: index + 1, width, height });
+    }
+    setPdfOriginalWH(pdfWHObj);
+    setPdfLoad(true);
   };
   //function for change page numver of pdf
   function changePage(offset) {
@@ -1191,7 +1192,7 @@ function SignYourSelf() {
               />
             )}
             {/* this component used for UI interaction and show their functionality */}
-            {pdfLoadFail && !checkTourStatus && (
+            {pdfLoad && !checkTourStatus && (
               <Tour
                 onRequestClose={closeTour}
                 steps={tourConfig}
@@ -1214,11 +1215,10 @@ 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}
-                pdfOriginalWH={pdfOriginalWH}
                 containerWH={containerWH}
                 setZoomPercent={setZoomPercent}
                 zoomPercent={zoomPercent}
@@ -1356,8 +1356,8 @@ function SignYourSelf() {
                       pdfUrl={pdfUrl}
                       numPages={numPages}
                       pageDetails={pageDetails}
-                      setPdfLoadFail={setPdfLoadFail}
-                      pdfLoadFail={pdfLoadFail}
+                      pdfLoad={pdfLoad}
+                      setPdfLoad={setPdfLoad}
                       setXyPostion={setXyPostion}
                       index={index}
                       containerWH={containerWH}
@@ -1370,8 +1370,6 @@ function SignYourSelf() {
                       setCurrWidgetsDetails={setCurrWidgetsDetails}
                       setValidateAlert={setValidateAlert}
                       handleTextSettingModal={handleTextSettingModal}
-                      pdfRenderHeight={pdfRenderHeight}
-                      setPdfRenderHeight={setPdfRenderHeight}
                       setScale={setScale}
                       scale={scale}
                     />
diff --git a/apps/OpenSign/src/pages/TemplatePlaceholder.js b/apps/OpenSign/src/pages/TemplatePlaceholder.js
index 43f36f73c..d5aee2e9d 100644
--- a/apps/OpenSign/src/pages/TemplatePlaceholder.js
+++ b/apps/OpenSign/src/pages/TemplatePlaceholder.js
@@ -70,7 +70,7 @@ const TemplatePlaceholder = () => {
   const [checkTourStatus, setCheckTourStatus] = useState(false);
   const [tourStatus, setTourStatus] = useState([]);
   const [signerUserId, setSignerUserId] = useState();
-  const [pdfOriginalWH, setPdfOriginalWH] = useState();
+  const [pdfOriginalWH, setPdfOriginalWH] = useState([]);
   const [contractName, setContractName] = useState("");
   const [containerWH, setContainerWH] = useState();
   const signRef = useRef(null);
@@ -87,12 +87,8 @@ const TemplatePlaceholder = () => {
   const [blockColor, setBlockColor] = useState("");
   const [selectWidgetId, setSelectWidgetId] = useState("");
   const [isNameModal, setIsNameModal] = useState(false);
-  const [pdfRenderHeight, setPdfRenderHeight] = useState();
   const [isTextSetting, setIsTextSetting] = useState(false);
-  const [pdfLoadFail, setPdfLoadFail] = useState({
-    status: false,
-    type: "load"
-  });
+  const [pdfLoad, setPdfLoad] = useState(false);
   const color = [
     "#93a3db",
     "#e6c3db",
@@ -369,7 +365,10 @@ const TemplatePlaceholder = () => {
       if (signer) {
         const posZIndex = zIndex + 1;
         setZIndex(posZIndex);
-        const containerScale = containerWH.width / pdfOriginalWH.width;
+        const getPdfPageWidth = pdfOriginalWH.find(
+          (data) => data.pageNumber === pageNumber
+        );
+        const containerScale = containerWH.width / getPdfPageWidth?.width || 1;
         const key = randomId();
         let filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
         const dragTypeValue = item?.text ? item.text : monitor.type;
@@ -423,6 +422,7 @@ const TemplatePlaceholder = () => {
               (dragTypeValue === "stamp" || dragTypeValue === "image") && true,
             key: key,
             scale: containerScale,
+            // isMobile: isMobile,
             zIndex: posZIndex,
             type: item.text,
             options: addWidgetOptions(dragTypeValue),
@@ -536,14 +536,16 @@ const TemplatePlaceholder = () => {
 
   //function for get pdf page details
   const pageDetails = async (pdf) => {
-    const firstPage = await pdf.getPage(1);
-    const scale = 1;
-    const { width, height } = firstPage.getViewport({ scale });
-    // console.log("width height", width, height);
-    setPdfOriginalWH({ width: width, height: height });
-    setPdfLoadFail({
-      status: true
-    });
+    let pdfWHObj = [];
+    const totalPages = pdf?.numPages;
+    for (let index = 0; index < totalPages; index++) {
+      const getPage = await pdf.getPage(index + 1);
+      const scale = 1;
+      const { width, height } = getPage.getViewport({ scale });
+      pdfWHObj.push({ pageNumber: index + 1, width, height });
+    }
+    setPdfOriginalWH(pdfWHObj);
+    setPdfLoad(true);
   };
   //function for save x and y position and show signature  tab on that position
   const handleTabDrag = (key) => {
@@ -559,7 +561,10 @@ const TemplatePlaceholder = () => {
       updateSignPos.splice(0, updateSignPos.length, ...dataNewPlace);
       const signId = signerId; //? signerId : signerObjId;
       const keyValue = key ? key : dragKey;
-      const containerScale = containerWH.width / pdfOriginalWH.width;
+      const getPdfPageWidth = pdfOriginalWH.find(
+        (data) => data.pageNumber === pageNumber
+      );
+      const containerScale = containerWH.width / getPdfPageWidth?.width || 1;
       if (keyValue >= 0) {
         const filterSignerPos = updateSignPos.filter(
           (data) => data.Id === signId
@@ -1338,11 +1343,10 @@ 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}
-                  pdfOriginalWH={pdfOriginalWH}
                   containerWH={containerWH}
                   setZoomPercent={setZoomPercent}
                   zoomPercent={zoomPercent}
@@ -1507,8 +1511,8 @@ const TemplatePlaceholder = () => {
                         handleDeleteSign={handleDeleteSign}
                         handleTabDrag={handleTabDrag}
                         handleStop={handleStop}
-                        setPdfLoadFail={setPdfLoadFail}
-                        pdfLoadFail={pdfLoadFail}
+                        setPdfLoad={setPdfLoad}
+                        pdfLoad={pdfLoad}
                         setSignerPos={setSignerPos}
                         containerWH={containerWH}
                         setIsResize={setIsResize}
@@ -1528,8 +1532,6 @@ const TemplatePlaceholder = () => {
                         selectWidgetId={selectWidgetId}
                         setIsCheckbox={setIsCheckbox}
                         handleNameModal={setIsNameModal}
-                        setPdfRenderHeight={setPdfRenderHeight}
-                        pdfRenderHeight={pdfRenderHeight}
                         handleTextSettingModal={handleTextSettingModal}
                         pdfOriginalWH={pdfOriginalWH}
                         setScale={setScale}
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