diff --git a/apps/OpenSign/package-lock.json b/apps/OpenSign/package-lock.json
index a60813823..6db5b56cf 100644
--- a/apps/OpenSign/package-lock.json
+++ b/apps/OpenSign/package-lock.json
@@ -34,7 +34,6 @@
         "react-gtm-module": "^2.0.11",
         "react-helmet": "^6.1.0",
         "react-konva": "^18.2.10",
-        "react-modal": "^3.16.1",
         "react-pdf": "^9.0.0",
         "react-quill": "^2.0.0",
         "react-redux": "^9.1.2",
@@ -10967,11 +10966,6 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
-    "node_modules/exenv": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
-      "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
-    },
     "node_modules/exit": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -20171,24 +20165,6 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
-    "node_modules/react-modal": {
-      "version": "3.16.1",
-      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
-      "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
-      "dependencies": {
-        "exenv": "^1.2.0",
-        "prop-types": "^15.7.2",
-        "react-lifecycles-compat": "^3.0.0",
-        "warning": "^4.0.3"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "peerDependencies": {
-        "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18",
-        "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"
-      }
-    },
     "node_modules/react-native-crypto-js": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/react-native-crypto-js/-/react-native-crypto-js-1.0.0.tgz",
diff --git a/apps/OpenSign/package.json b/apps/OpenSign/package.json
index 6fa83b501..c8ab8f436 100644
--- a/apps/OpenSign/package.json
+++ b/apps/OpenSign/package.json
@@ -29,7 +29,6 @@
     "react-gtm-module": "^2.0.11",
     "react-helmet": "^6.1.0",
     "react-konva": "^18.2.10",
-    "react-modal": "^3.16.1",
     "react-pdf": "^9.0.0",
     "react-quill": "^2.0.0",
     "react-redux": "^9.1.2",
diff --git a/apps/OpenSign/public/version.txt b/apps/OpenSign/public/version.txt
index 652405d34..f07060562 100644
Binary files a/apps/OpenSign/public/version.txt and b/apps/OpenSign/public/version.txt differ
diff --git a/apps/OpenSign/src/App.js b/apps/OpenSign/src/App.js
index 5115d329f..fb244a436 100644
--- a/apps/OpenSign/src/App.js
+++ b/apps/OpenSign/src/App.js
@@ -17,6 +17,7 @@ import PdfRequestFiles from "./pages/PdfRequestFiles";
 import LazyPage from "./primitives/LazyPage";
 import { isEnableSubscription } from "./constant/const";
 import SSOVerify from "./pages/SSOVerify";
+import Loader from "./primitives/Loader";
 const DebugPdf = lazy(() => import("./pages/DebugPdf"));
 const ForgetPassword = lazy(() => import("./pages/ForgetPassword"));
 const GuestLogin = lazy(() => import("./pages/GuestLogin"));
@@ -30,10 +31,10 @@ const ManageSign = lazy(() => import("./pages/Managesign"));
 const GenerateToken = lazy(() => import("./pages/GenerateToken"));
 const Webhook = lazy(() => import("./pages/Webhook"));
 pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.mjs`;
-const Loader = () => {
+const AppLoader = () => {
   return (
-    <div className="flex justify-center items-center h-[100vh] text-[45px] text-[#3dd3e0]">
-      <div className="loader-37"></div>
+    <div className="flex justify-center items-center h-[100vh]">
+      <Loader />
     </div>
   );
 };
@@ -64,7 +65,7 @@ function App() {
   return (
     <div className="bg-base-200">
       {isloading ? (
-        <Loader />
+        <AppLoader />
       ) : (
         <BrowserRouter>
           <Routes>
diff --git a/apps/OpenSign/src/assets/images/loader2.gif b/apps/OpenSign/src/assets/images/loader2.gif
deleted file mode 100644
index a32521144..000000000
Binary files a/apps/OpenSign/src/assets/images/loader2.gif and /dev/null differ
diff --git a/apps/OpenSign/src/components/AddSigner.js b/apps/OpenSign/src/components/AddSigner.js
index 8aa93b8ea..f5143eb93 100644
--- a/apps/OpenSign/src/components/AddSigner.js
+++ b/apps/OpenSign/src/components/AddSigner.js
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import Parse from "parse";
 import axios from "axios";
+import Loader from "../primitives/Loader";
 
 const AddSigner = (props) => {
   const [name, setName] = useState("");
@@ -225,11 +226,11 @@ const AddSigner = (props) => {
   return (
     <div className="h-full p-[20px]">
       {isLoader && (
-        <div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-30 text-[45px] text-[#3dd3e0]">
-          <div className="loader-37"></div>
+        <div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-30">
+          <Loader />
         </div>
       )}
-      <div className="w-full mx-auto p-2">
+      <div className="w-full mx-auto p-2 text-base-content">
         {isUserExist && (
           <div className="mb-3 flex items-center">
             <input
@@ -239,17 +240,14 @@ const AddSigner = (props) => {
               onChange={handleAddYourselfChange}
               className="op-checkbox op-checkbox-sm"
             />
-            <label htmlFor="addYourself" className="ml-2 text-gray-700 mb-0">
+            <label htmlFor="addYourself" className="ml-2 mb-0">
               Add Yourself
             </label>
           </div>
         )}
         <form onSubmit={handleSubmit}>
           <div className="mb-3">
-            <label
-              htmlFor="name"
-              className="block text-xs text-gray-700 font-semibold"
-            >
+            <label htmlFor="name" className="block text-xs font-semibold">
               Name
               <span className="text-[red] text-[13px]"> *</span>
             </label>
@@ -264,10 +262,7 @@ const AddSigner = (props) => {
             />
           </div>
           <div className="mb-3">
-            <label
-              htmlFor="email"
-              className="block text-xs text-gray-700 font-semibold"
-            >
+            <label htmlFor="email" className="block text-xs font-semibold">
               Email
               <span className="text-[red] text-[13px]"> *</span>
             </label>
@@ -282,10 +277,7 @@ const AddSigner = (props) => {
             />
           </div>
           <div className="mb-3">
-            <label
-              htmlFor="phone"
-              className="block text-xs text-gray-700 font-semibold"
-            >
+            <label htmlFor="phone" className="block text-xs font-semibold">
               Phone
             </label>
             <input
@@ -297,7 +289,6 @@ const AddSigner = (props) => {
               className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
-
           <div className="mt-4 flex gap-x-2 justify-start">
             <button type="submit" className="op-btn op-btn-primary">
               Submit
diff --git a/apps/OpenSign/src/components/AddUser.js b/apps/OpenSign/src/components/AddUser.js
index 3e8f06c13..088e9e786 100644
--- a/apps/OpenSign/src/components/AddUser.js
+++ b/apps/OpenSign/src/components/AddUser.js
@@ -3,6 +3,7 @@ import Parse from "parse";
 import axios from "axios";
 import Title from "./Title";
 import Alert from "../primitives/Alert";
+import Loader from "../primitives/Loader";
 
 const AddUser = (props) => {
   const [name, setName] = useState("");
@@ -194,8 +195,8 @@ const AddUser = (props) => {
       <Title title={"Add User"} />
       {isUserExist && <Alert type="danger">User already exists!</Alert>}
       {isLoader && (
-        <div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-30 z-50 text-[45px] text-[#3dd3e0]">
-          <div className="loader-37"></div>
+        <div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-30 z-50">
+          <Loader />
         </div>
       )}
       <div className="w-full mx-auto">
diff --git a/apps/OpenSign/src/components/BulkSendUi.js b/apps/OpenSign/src/components/BulkSendUi.js
index 212f110e6..020ab54fb 100644
--- a/apps/OpenSign/src/components/BulkSendUi.js
+++ b/apps/OpenSign/src/components/BulkSendUi.js
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from "react";
 import axios from "axios";
 import SuggestionInput from "./shared/fields/SuggestionInput";
+import Loader from "../primitives/Loader";
 
 const BulkSendUi = (props) => {
   const [forms, setForms] = useState([]);
@@ -170,8 +171,8 @@ const BulkSendUi = (props) => {
   return (
     <>
       {isSubmit && (
-        <div className="absolute z-[999] h-full w-full flex justify-center items-center bg-black bg-opacity-40 text-[45px] text-[#3dd3e0]">
-          <div className="loader-37"></div>
+        <div className="absolute z-[999] h-full w-full flex justify-center items-center bg-black bg-opacity-30">
+          <Loader />
         </div>
       )}
       {props.Placeholders?.length > 0 ? (
@@ -183,7 +184,7 @@ const BulkSendUi = (props) => {
                   {forms?.map((form, index) => (
                     <div
                       key={form.Id}
-                      className="p-3 op-card border-[1px] border-gray-400 m-4 bg-base-200 text-base-content grid grid-cols-1 md:grid-cols-2 gap-2 relative"
+                      className="p-3 op-card border-[1px] border-gray-400 mt-3 mx-4 mb-4 bg-base-200 text-base-content grid grid-cols-1 md:grid-cols-2 gap-2 relative"
                     >
                       {form?.fields?.map((field, fieldIndex) => (
                         <div className="flex flex-col" key={field.fieldId}>
@@ -202,7 +203,7 @@ const BulkSendUi = (props) => {
                       {forms?.length > 1 && (
                         <button
                           onClick={() => handleRemoveForm(index)}
-                          className="absolute right-3 top-1 border border-gray-300 rounded-lg px-2 py-1"
+                          className="absolute right-3 top-1 text-[red] border-[1px] border-[red] rounded-lg w-[1.7rem] h-[1.7rem]"
                         >
                           <i className="fa-solid fa-trash"></i>
                         </button>
diff --git a/apps/OpenSign/src/components/LoginFacebook.js b/apps/OpenSign/src/components/LoginFacebook.js
index 4b9278654..7b3e2aa92 100644
--- a/apps/OpenSign/src/components/LoginFacebook.js
+++ b/apps/OpenSign/src/components/LoginFacebook.js
@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import Parse from "parse";
+import Loader from "../primitives/Loader";
 // import FacebookLogin from "react-facebook-login";
 
 const LoginFacebook = ({
@@ -114,8 +115,8 @@ const LoginFacebook = ({
   return (
     <div className="relative">
       {thirdpartyLoader && (
-        <div className="fixed w-[100vw] h-[100vh] bg-black bg-opacity-30 left-0 top-0 z-[20] text-[50px] text-[#3ac9d6]">
-          <div className="loader-37 fixed top-[45%] left-[45%]"></div>
+        <div className="fixed flex justify-center items-center inset-0 bg-black bg-opacity-25 z-20 ">
+          <Loader />
         </div>
       )}
       {/* <FacebookLogin
diff --git a/apps/OpenSign/src/components/LoginGoogle.js b/apps/OpenSign/src/components/LoginGoogle.js
index 39a34f791..69180540d 100644
--- a/apps/OpenSign/src/components/LoginGoogle.js
+++ b/apps/OpenSign/src/components/LoginGoogle.js
@@ -3,6 +3,7 @@ import Parse from "parse";
 import { jwtDecode } from "jwt-decode";
 import { useScript } from "../hook/useScript";
 import ModalUi from "../primitives/ModalUi";
+import Loader from "../primitives/Loader";
 
 /*
  * `GoogleSignInBtn`as it's name indicates it render google sign in button
@@ -208,8 +209,8 @@ const GoogleSignInBtn = ({
   return (
     <div className="relative">
       {thirdpartyLoader && (
-        <div className="fixed w-[100vw] h-[100vh] bg-black bg-opacity-25 top-0 left-0 z-20 text-[50px] text-[#3ac9d6]">
-          <div className="fixed top-[50%] left-[45%] loader-37"></div>
+        <div className="fixed flex justify-center items-center inset-0 bg-black bg-opacity-25 z-20 ">
+          <Loader />
         </div>
       )}
       <div ref={googleBtn} className="text-sm"></div>
diff --git a/apps/OpenSign/src/components/dashboard/DashboardReport.js b/apps/OpenSign/src/components/dashboard/DashboardReport.js
index 787162114..cee34f96b 100644
--- a/apps/OpenSign/src/components/dashboard/DashboardReport.js
+++ b/apps/OpenSign/src/components/dashboard/DashboardReport.js
@@ -3,6 +3,7 @@ import Parse from "parse";
 import ReportTable from "../../primitives/GetReportDisplay";
 import reportJson from "../../json/ReportJson";
 import axios from "axios";
+import Loader from "../../primitives/Loader";
 function DashboardReport(props) {
   // console.log("props ", props)
   const [List, setList] = useState([]);
@@ -121,8 +122,8 @@ function DashboardReport(props) {
   return (
     <>
       {isLoader ? (
-        <div className="h-[250px] text-[45px] text-[#3dd3e0] flex justify-center items-center">
-          <div className="loader-37"></div>
+        <div className="h-[250px] flex justify-center items-center">
+          <Loader />
         </div>
       ) : (
         <>
diff --git a/apps/OpenSign/src/components/dashboard/GetDashboard.js b/apps/OpenSign/src/components/dashboard/GetDashboard.js
index 14948fac9..bfbad4d8a 100644
--- a/apps/OpenSign/src/components/dashboard/GetDashboard.js
+++ b/apps/OpenSign/src/components/dashboard/GetDashboard.js
@@ -1,4 +1,5 @@
 import React, { Suspense, lazy } from "react";
+import Loader from "../../primitives/Loader";
 const DashboardButton = lazy(() => import("./DashboardButton"));
 const DashboardCard = lazy(() => import("./DashboardCard"));
 const DashboardReport = lazy(() => import("./DashboardReport"));
@@ -20,8 +21,8 @@ const GetDashboard = (props) => {
   const Button = ({ label, redirectId, redirectType, icon }) => (
     <Suspense
       fallback={
-        <div className="h-[300px] text-[45px] text-[#3dd3e0] flex justify-center items-center">
-          <div className="loader-37"></div>
+        <div className="h-[300px] w-full flex justify-center items-center">
+          <Loader />
         </div>
       }
     >
@@ -44,8 +45,8 @@ const GetDashboard = (props) => {
           >
             <Suspense
               fallback={
-                <div className="h-[300px] text-[45px] text-[#3dd3e0] flex justify-center items-center">
-                  <div className="loader-37"></div>
+                <div className="h-[300px] w-full flex justify-center items-center">
+                  <Loader />
                 </div>
               }
             >
diff --git a/apps/OpenSign/src/components/pdf/DefaultSignature.js b/apps/OpenSign/src/components/pdf/DefaultSignature.js
index 0c8a92e36..4e4e0780a 100644
--- a/apps/OpenSign/src/components/pdf/DefaultSignature.js
+++ b/apps/OpenSign/src/components/pdf/DefaultSignature.js
@@ -17,7 +17,7 @@ function DefaultSignature({ defaultSignImg, xyPostion, setDefaultSignAlert }) {
 
   return (
     <div data-tut="reactourThird">
-      <div className="text-base-content font-semibold px-3 py-2 text-[15px] border-b-[1px] border-base-content">
+      <div className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300">
         Signature
       </div>
       <div className="flex flex-col items-center mt-[10px] font-semibold">
diff --git a/apps/OpenSign/src/components/pdf/EmailComponent.js b/apps/OpenSign/src/components/pdf/EmailComponent.js
index ef8a9a2ab..d3cdc06ae 100644
--- a/apps/OpenSign/src/components/pdf/EmailComponent.js
+++ b/apps/OpenSign/src/components/pdf/EmailComponent.js
@@ -5,7 +5,7 @@ import axios from "axios";
 import { getBase64FromUrl } from "../../constant/Utils";
 import { themeColor } from "../../constant/const";
 import printModule from "print-js";
-import loader from "../../assets/images/loader2.gif";
+import Loader from "../../primitives/Loader";
 
 function EmailComponent({
   isEmail,
@@ -174,7 +174,7 @@ function EmailComponent({
           <div className="modalcontainer">
             {isLoading && (
               <div className="absolute w-full h-full flex flex-col justify-center items-center z-[20] bg-[#e6f2f2] bg-opacity-80">
-                <img alt="loader" src={loader} className="w-[70px] h-[70px]" />
+                <Loader />
                 <span className="text-[12px] font-bold">
                   This might take some time
                 </span>
diff --git a/apps/OpenSign/src/components/pdf/PdfHeader.js b/apps/OpenSign/src/components/pdf/PdfHeader.js
index 3b98f5645..67346698c 100644
--- a/apps/OpenSign/src/components/pdf/PdfHeader.js
+++ b/apps/OpenSign/src/components/pdf/PdfHeader.js
@@ -10,6 +10,7 @@ import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { useNavigate } from "react-router-dom";
 import { themeColor } from "../../constant/const";
 import ModalUi from "../../primitives/ModalUi";
+import Loader from "../../primitives/Loader";
 
 function Header({
   isPdfRequestFiles,
@@ -468,8 +469,8 @@ function Header({
         </div>
       )}
       {isDownloading === "pdf" && (
-        <div className="fixed z-[200] inset-0 flex justify-center items-center bg-black bg-opacity-30 text-[45px] text-[#3dd3e0]">
-          <div className="loader-37"></div>
+        <div className="fixed z-[200] inset-0 flex justify-center items-center bg-black bg-opacity-30">
+          <Loader />
         </div>
       )}
       <ModalUi
diff --git a/apps/OpenSign/src/components/pdf/PlaceholderCopy.js b/apps/OpenSign/src/components/pdf/PlaceholderCopy.js
index cd6958efc..6063e1fe5 100644
--- a/apps/OpenSign/src/components/pdf/PlaceholderCopy.js
+++ b/apps/OpenSign/src/components/pdf/PlaceholderCopy.js
@@ -201,7 +201,7 @@ function PlaceholderCopy(props) {
             <div key={key} className="flex flex-col">
               <label className="text-[16px] font-medium">
                 <input
-                  className="mr-[10px] accent-[red]"
+                  className="mr-[8px] op-radio op-radio-xs"
                   type="radio"
                   value={data}
                   onChange={() => setSelectCopyType(data)}
diff --git a/apps/OpenSign/src/components/pdf/PlaceholderType.js b/apps/OpenSign/src/components/pdf/PlaceholderType.js
index 3b78febf6..65d0ff273 100644
--- a/apps/OpenSign/src/components/pdf/PlaceholderType.js
+++ b/apps/OpenSign/src/components/pdf/PlaceholderType.js
@@ -352,12 +352,9 @@ function PlaceholderType(props) {
             return (
               <div key={ind} className="flex items-center text-center gap-0.5">
                 <input
-                  style={{
-                    // width: props.pos.Width,
-                    display: "flex",
-                    justifyContent: "center",
-                    marginTop: ind === 0 ? 0 : "5px"
-                  }}
+                  className={`${
+                    ind === 0 ? "mt-0" : "mt-[5px]"
+                  } flex justify-center op-checkbox op-checkbox-xs rounded-[0.350rem]`}
                   onBlur={handleInputBlur}
                   disabled={
                     props.isNeedSign &&
@@ -748,12 +745,11 @@ function PlaceholderType(props) {
             return (
               <div key={ind} className="flex items-center text-center gap-0.5">
                 <input
-                  style={{
-                    width: props.pos.Width,
-                    display: "flex",
-                    justifyContent: "center",
-                    marginTop: ind === 0 ? 0 : "5px"
-                  }}
+                  className={`${ind === 0 ? "mt-0" : "mt-[5px]"} ${
+                    props?.pos?.Width
+                      ? `w-[${props?.pos?.Width}px] h-[${props?.pos?.Width}px]`
+                      : "w-[15px] h-[15px]"
+                  } flex justify-center op-radio`}
                   type="radio"
                   disabled={
                     props.isNeedSign &&
diff --git a/apps/OpenSign/src/components/pdf/PrevNext.js b/apps/OpenSign/src/components/pdf/PrevNext.js
index a236648ea..bf9786296 100644
--- a/apps/OpenSign/src/components/pdf/PrevNext.js
+++ b/apps/OpenSign/src/components/pdf/PrevNext.js
@@ -13,12 +13,12 @@ function PrevNext({ pageNumber, allPages, changePage }) {
   return (
     <div className="flex items-center">
       <button
-        className="op-btn op-btn-primary op-btn-xs md:op-btn-sm font-semibold text-xs"
+        className="op-btn op-btn-secondary op-btn-xs md:op-btn-sm font-semibold text-xs"
         disabled={pageNumber <= 1}
         onClick={previousPage}
       >
         <span className="block lg:hidden">
-          <i className="fa fa-backward cursor-pointer" aria-hidden="true"></i>
+          <i className="fa fa-backward" aria-hidden="true"></i>
         </span>
         <span className="lg:block hidden">Prev</span>
       </button>
@@ -26,12 +26,12 @@ function PrevNext({ pageNumber, allPages, changePage }) {
         {pageNumber || (allPages ? 1 : "--")} of {allPages || "--"}
       </span>
       <button
-        className="op-btn op-btn-primary op-btn-xs md:op-btn-sm font-semibold text-xs"
+        className="op-btn op-btn-secondary op-btn-xs md:op-btn-sm font-semibold text-xs"
         disabled={pageNumber >= allPages}
         onClick={nextPage}
       >
         <span className="block lg:hidden">
-          <i className="fa fa-forward cursor-pointer" aria-hidden="true"></i>
+          <i className="fa fa-forward" aria-hidden="true"></i>
         </span>
         <span className="lg:block hidden">Next</span>
       </button>
diff --git a/apps/OpenSign/src/components/pdf/RecipientList.js b/apps/OpenSign/src/components/pdf/RecipientList.js
index e10927cce..df912759a 100644
--- a/apps/OpenSign/src/components/pdf/RecipientList.js
+++ b/apps/OpenSign/src/components/pdf/RecipientList.js
@@ -100,7 +100,7 @@ const RecipientList = (props) => {
                     ? "pointer-events-none bg-opacity-80"
                     : `text-[12px] font-bold ${cursor}`
                   : props.isMailSend && "pointer-events-none bg-opacity-80"
-              } flex flex-row rounded-xl px-2 py-[10px] mt-[2px] mx-1 items-center`}
+              } flex flex-row rounded-xl px-2 py-[10px] mt-1 mx-1 items-center last:mb-0.5`}
               style={{
                 background:
                   (!isMobile && isHover === ind) || props.isSelectListId === ind
diff --git a/apps/OpenSign/src/components/pdf/RenderAllPdfPage.js b/apps/OpenSign/src/components/pdf/RenderAllPdfPage.js
index 02152573e..660f8c7e7 100644
--- a/apps/OpenSign/src/components/pdf/RenderAllPdfPage.js
+++ b/apps/OpenSign/src/components/pdf/RenderAllPdfPage.js
@@ -52,7 +52,7 @@ function RenderAllPdfPage({
     <div>
       <div className=" hidden md:flex flex-row bg-base-100 h-full">
         <div className="w-[140px]">
-          <div className="px-3 pt-2 pb-1 text-[15px] text-base-content font-semibold ">
+          <div className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300">
             Pages
           </div>
 
diff --git a/apps/OpenSign/src/components/pdf/Signedby.js b/apps/OpenSign/src/components/pdf/Signedby.js
index 1bcaa3116..b5213b200 100644
--- a/apps/OpenSign/src/components/pdf/Signedby.js
+++ b/apps/OpenSign/src/components/pdf/Signedby.js
@@ -8,7 +8,7 @@ function Signedby({ pdfDetails }) {
 
   return (
     <div className="hidden md:block w-[180px] h-full bg-base-100">
-      <div className="px-3 pt-2 pb-1 text-[15px] text-base-content font-semibold">
+      <div className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300">
         Signed By
       </div>
       <div className="mt-[2px] bg-base-100">
diff --git a/apps/OpenSign/src/components/pdf/SignerListPlace.js b/apps/OpenSign/src/components/pdf/SignerListPlace.js
index aad88dbb0..5b384d3e6 100644
--- a/apps/OpenSign/src/components/pdf/SignerListPlace.js
+++ b/apps/OpenSign/src/components/pdf/SignerListPlace.js
@@ -5,7 +5,7 @@ import { Tooltip } from "react-tooltip";
 function SignerListPlace(props) {
   return (
     <div>
-      <div className="pt-2 pb-1 px-3 font-semibold text-base-content">
+      <div className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300">
         <span>
           {props.title ? props.title : "Recipients"}
           <span className="text-xs mt-1 ml-0.5">
@@ -61,7 +61,7 @@ function SignerListPlace(props) {
           <div
             role="button"
             data-tut="reactourAddbtn"
-            className="op-btn op-btn-primary op-btn-outline w-full my-[2px]"
+            className="op-btn op-btn-accent op-btn-outline w-full my-[2px]"
             disabled={props?.isMailSend ? true : false}
             onClick={() => props.handleAddSigner()}
           >
@@ -71,7 +71,7 @@ function SignerListPlace(props) {
           <div
             role="button"
             data-tut="reactourAddbtn"
-            className="op-btn op-btn-primary op-btn-outline w-full my-[2px]"
+            className="op-btn op-btn-accent op-btn-outline w-full my-[2px]"
             disabled={props?.isMailSend ? true : false}
             onClick={() => props.setIsAddSigner(true)}
           >
diff --git a/apps/OpenSign/src/components/pdf/VerifyEmail.js b/apps/OpenSign/src/components/pdf/VerifyEmail.js
index a6ede816c..59607f844 100644
--- a/apps/OpenSign/src/components/pdf/VerifyEmail.js
+++ b/apps/OpenSign/src/components/pdf/VerifyEmail.js
@@ -1,4 +1,5 @@
 import React from "react";
+import Loader from "../../primitives/Loader";
 
 function VerifyEmail(props) {
   return (
@@ -39,8 +40,8 @@ function VerifyEmail(props) {
             </div>
           </form>
         ) : props.otpLoader ? (
-          <div className="h-[150px] flex items-center justify-center text-[45px] text-[#3dd3e0]">
-            <div className="loader-37"></div>
+          <div className="h-[150px] flex items-center justify-center">
+            <Loader />
           </div>
         ) : (
           <div className="px-6 py-3 text-base-content">
diff --git a/apps/OpenSign/src/components/pdf/WidgetComponent.js b/apps/OpenSign/src/components/pdf/WidgetComponent.js
index 370ce4ae3..af6cbddc9 100644
--- a/apps/OpenSign/src/components/pdf/WidgetComponent.js
+++ b/apps/OpenSign/src/components/pdf/WidgetComponent.js
@@ -255,76 +255,80 @@ function WidgetComponent({
             className="stickyfooter"
             style={{ width: window.innerWidth + "px" }}
           >
-            {isSigners && (
-              <div
-                data-tut={dataTut}
-                className="py-[10px] flex justify-center items-center op-card"
-                style={{
-                  background: blockColor
-                    ? blockColor
-                    : isSelectListId
-                      ? color[isSelectListId % color.length]
-                      : color[0]
-                }}
-                onClick={() => handleModal()}
-              >
-                <span className="text-[13px] font-bold flex items-center">
-                  {title ? title : "Recipient"}
-                  {signersdata[isSelectListId]?.Role && (
-                    <div>
-                      {signersdata[isSelectListId]?.Name ? (
-                        <>
-                          :{" "}
-                          {signersdata[isSelectListId]?.Name?.length > 12
-                            ? `${signersdata[isSelectListId].Name.slice(
-                                0,
-                                12
-                              )}...`
-                            : signersdata[isSelectListId]?.Name}
-                        </>
-                      ) : (
-                        <>
-                          :{" "}
-                          {signersdata[isSelectListId]?.Role?.length > 12
-                            ? `${signersdata[isSelectListId].Role.slice(
-                                0,
-                                12
-                              )}...`
-                            : signersdata[isSelectListId]?.Role}
-                        </>
-                      )}
+            <div className="mx-1">
+              {isSigners && (
+                <div
+                  data-tut={dataTut}
+                  className="py-[10px] flex justify-center items-center op-card"
+                  style={{
+                    background: blockColor
+                      ? blockColor
+                      : isSelectListId
+                        ? color[isSelectListId % color.length]
+                        : color[0]
+                  }}
+                  onClick={() => handleModal()}
+                >
+                  <span className="text-[13px] font-bold flex items-center">
+                    {title ? title : "Recipient"}
+                    {signersdata[isSelectListId]?.Role && (
+                      <div>
+                        {signersdata[isSelectListId]?.Name ? (
+                          <>
+                            :{" "}
+                            {signersdata[isSelectListId]?.Name?.length > 12
+                              ? `${signersdata[isSelectListId].Name.slice(
+                                  0,
+                                  12
+                                )}...`
+                              : signersdata[isSelectListId]?.Name}
+                          </>
+                        ) : (
+                          <>
+                            :{" "}
+                            {signersdata[isSelectListId]?.Role?.length > 12
+                              ? `${signersdata[isSelectListId].Role.slice(
+                                  0,
+                                  12
+                                )}...`
+                              : signersdata[isSelectListId]?.Role}
+                          </>
+                        )}
+                      </div>
+                    )}
+                    <div className="ml-[6px] text-[16px]">
+                      <i className="fa-solid fa-angle-down"></i>
                     </div>
-                  )}
-                  <div className="ml-[6px] text-[16px]">
-                    <i className="fa-solid fa-angle-down"></i>
-                  </div>
-                </span>
-              </div>
-            )}
-            {handleAddSigner ? (
-              <div
-                data-tut="reactourAddbtn"
-                className="op-btn op-btn-primary w-full my-[2px]"
-                onClick={() => handleAddSigner()}
-              >
-                <i className="fa-solid fa-plus"></i>
-                <span>Add role</span>
-              </div>
-            ) : (
-              setIsAddSigner && (
+                  </span>
+                </div>
+              )}
+            </div>
+            <div className="mx-1">
+              {handleAddSigner ? (
                 <div
                   data-tut="reactourAddbtn"
-                  className="op-btn op-btn-primary w-full my-[2px]"
-                  onClick={() => setIsAddSigner(true)}
+                  className="op-btn op-btn-accent w-full my-[2px]"
+                  onClick={() => handleAddSigner()}
                 >
                   <i className="fa-solid fa-plus"></i>
-                  <span>Add recipients</span>
+                  <span>Add role</span>
                 </div>
-              )
-            )}
+              ) : (
+                setIsAddSigner && (
+                  <div
+                    data-tut="reactourAddbtn"
+                    className="op-btn op-btn-accent w-full my-[2px]"
+                    onClick={() => setIsAddSigner(true)}
+                  >
+                    <i className="fa-solid fa-plus"></i>
+                    <span>Add recipients</span>
+                  </div>
+                )
+              )}
+            </div>
             <div
               ref={scrollContainerRef}
-              className="bg-white border-[2px] border-t-primary"
+              className="bg-base-100 border-[2px] border-t-primary"
             >
               <div className="flex whitespace-nowrap overflow-x-scroll pt-[10px] pb-[5px] pr-[5px]">
                 <WidgetList
@@ -347,7 +351,7 @@ function WidgetComponent({
             isMailSend ? "bg-opacity-50 pointer-events-none" : ""
           } hidden md:block w-[180px] h-full bg-base-100`}
         >
-          <div className="text-base-content px-3 py-2 text-[15px] border-b-[1px] border-base-content">
+          <div className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300">
             <span>Fields</span>
           </div>
           <div className="flex flex-col items-center my-3">
diff --git a/apps/OpenSign/src/components/pdf/WidgetNameModal.js b/apps/OpenSign/src/components/pdf/WidgetNameModal.js
index 4bcc477e2..205a350c9 100644
--- a/apps/OpenSign/src/components/pdf/WidgetNameModal.js
+++ b/apps/OpenSign/src/components/pdf/WidgetNameModal.js
@@ -236,7 +236,7 @@ const WidgetNameModal = (props) => {
               return (
                 <div key={ind} className="flex flex-row gap-[5px] items-center">
                   <input
-                    className="mr-[3px] accent-[red]"
+                    className="mr-[2px] op-radio op-radio-xs"
                     type="radio"
                     name="status"
                     onChange={() =>
diff --git a/apps/OpenSign/src/components/shared/fields/CreateFolder.js b/apps/OpenSign/src/components/shared/fields/CreateFolder.js
index 37de11dfe..db41ce925 100644
--- a/apps/OpenSign/src/components/shared/fields/CreateFolder.js
+++ b/apps/OpenSign/src/components/shared/fields/CreateFolder.js
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import Parse from "parse";
 import Alert from "../../../primitives/Alert";
+import Loader from "../../../primitives/Loader";
 
 const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
   const folderPtr = {
@@ -113,11 +114,8 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
       {isAlert && <Alert type={alert.type}>{alert.message}</Alert>}
       <div id="createFolder" className="relative">
         {isLoader && (
-          <div className="absolute h-full w-full flex justify-center items-center ">
-            <div
-              style={{ fontSize: "45px", color: "#3dd3e0" }}
-              className="loader-37"
-            ></div>
+          <div className="absolute h-full w-full flex justify-center items-center">
+            <Loader />
           </div>
         )}
         <h1 className="text-base font-semibold">Create Folder</h1>
diff --git a/apps/OpenSign/src/components/shared/fields/SelectSigners.js b/apps/OpenSign/src/components/shared/fields/SelectSigners.js
index 21426aa9b..1ea271c4b 100644
--- a/apps/OpenSign/src/components/shared/fields/SelectSigners.js
+++ b/apps/OpenSign/src/components/shared/fields/SelectSigners.js
@@ -78,15 +78,23 @@ const SelectSigners = (props) => {
             defaultOptions
             value={selected}
             loadingMessage={() => "Loading..."}
-            noOptionsMessage={() => "User not Found"}
+            noOptionsMessage={() => "Contact not found"}
             loadOptions={loadOptions}
             onChange={handleOptions}
             unstyled
             classNames={{
               control: () =>
-                "op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs",
+                "op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full h-full text-[11px]",
+              valueContainer: () =>
+                "flex flex-row gap-x-[2px] gap-y-[2px] md:gap-y-0 w-full my-[2px]",
+              multiValue: () => "op-badge op-badge-primary h-full text-[11px]",
+              multiValueLabel: () => "mb-[2px]",
+              menu: () =>
+                "mt-1 shadow-md rounded-lg bg-base-200 text-base-content",
+              menuList: () => "shadow-md rounded-lg overflow-hidden",
               option: () =>
-                "bg-base-200 text-base-content hover:bg-base-300 p-2 shadow-md"
+                "bg-base-200 text-base-content rounded-lg m-1 hover:bg-base-300 p-2",
+              noOptionsMessage: () => "p-2 bg-base-200 rounded-lg m-1 p-2"
             }}
           />
         </div>
diff --git a/apps/OpenSign/src/components/shared/fields/SignersInput.js b/apps/OpenSign/src/components/shared/fields/SignersInput.js
index 39e039d99..4bd821a43 100644
--- a/apps/OpenSign/src/components/shared/fields/SignersInput.js
+++ b/apps/OpenSign/src/components/shared/fields/SignersInput.js
@@ -1,15 +1,30 @@
 import React, { useState, useEffect } from "react";
 import Select from "react-select";
 import AddSigner from "../../AddSigner";
-import Modal from "react-modal";
 import Parse from "parse";
 import Tooltip from "../../../primitives/Tooltip";
+import { createPortal } from "react-dom";
 function arrayMove(array, from, to) {
   array = array.slice();
   array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]);
   return array;
 }
 
+const AddSignerModal = ({ isOpen, children }) => {
+  if (!isOpen) {
+    return null;
+  }
+
+  return createPortal(
+    <div className="op-modal op-modal-open">
+      <div className="op-modal-box p-0 min-w-[90%] md:min-w-[500px] max-h-90 overflow-y-auto hide-scrollbar text-sm">
+        {children}
+      </div>
+    </div>,
+    document.body
+  );
+};
+
 /**
  * react-sortable-hoc is depcreated not usable from react 18.x.x
  *  need to replace it with @dnd-kit
@@ -17,7 +32,6 @@ function arrayMove(array, from, to) {
  */
 
 const SignersInput = (props) => {
-  Modal.setAppElement("body");
   const [state, setState] = useState(undefined);
   // const [editFormData, setEditFormData] = useState([]);
   const [selected, setSelected] = useState([]);
@@ -128,12 +142,21 @@ const SignersInput = (props) => {
             onChange={onChange}
             closeMenuOnSelect={false}
             required={props.required}
+            noOptionsMessage={() => "Contact not found"}
             unstyled
             classNames={{
               control: () =>
-                "op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs",
+                "op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full h-full text-[11px]",
+              valueContainer: () =>
+                "flex flex-row gap-x-[2px] gap-y-[2px] md:gap-y-0 w-full my-[2px]",
+              multiValue: () => "op-badge op-badge-primary h-full text-[11px]",
+              multiValueLabel: () => "mb-[2px]",
+              menu: () =>
+                "mt-1 shadow-md rounded-lg bg-base-200 text-base-content",
+              menuList: () => "shadow-md rounded-lg overflow-hidden",
               option: () =>
-                "bg-base-200 text-base-content hover:bg-base-300 p-2 shadow-md"
+                "bg-base-200 text-base-content rounded-lg m-1 hover:bg-base-300 p-2",
+              noOptionsMessage: () => "p-2 bg-base-200 rounded-lg m-1 p-2"
             }}
           />
         </div>
@@ -142,57 +165,29 @@ const SignersInput = (props) => {
             setIsModel(true);
             openModal();
           }}
-          className="cursor-pointer border-[1px] op-inut op-input-bordered min-h-[38px] min-w-[48px] flex justify-center items-center"
+          className="cursor-pointer op-input op-input-bordered focus:outline-none hover:border-base-content max-h-[38px] min-w-[48px] flex justify-center items-center"
         >
           <i className="fas fa-plus"></i>
         </div>
-        <Modal
-          isOpen={modalIsOpen}
-          onRequestClose={handleModalCloseClick}
-          shouldCloseOnOverlayClick={false}
-          id="modal1"
-          contentLabel="Modal"
-          style={{
-            content: {
-              top: "50%",
-              left: "50%",
-              right: "auto",
-              bottom: "auto",
-              transform: "translate(-50%, -50%)",
-              border: "1px transparent",
-              padding: 0
-            },
-            overlay: {
-              width: "100%",
-              backgroundColor: "rgba(0, 0, 0, 0.75)",
-              zIndex: 50
-            }
-          }}
-        >
-          <div className="min-w-full md:min-w-[500px]">
-            <div
-              className="flex justify-between rounded-t items-center py-[10px] px-[20px] text-white"
-              style={{ background: "#32a3ac" }}
-            >
-              <div className="text-[1.2rem] font-normal">Add Signer</div>
-              <button
-                onClick={handleModalCloseClick}
-                className="text-[1.5rem] cursor-pointer focus:outline-none"
-              >
-                &times;
-              </button>
-            </div>
-
-            {isModal && (
-              <AddSigner
-                valueKey={"objectId"}
-                displayKey={"Name"}
-                details={handleNewDetails}
-                closePopup={handleModalCloseClick}
-              />
-            )}
-          </div>
-        </Modal>
+        <AddSignerModal isOpen={modalIsOpen}>
+          <h3 className="text-base-content font-bold text-lg pt-[15px] px-[20px]">
+            Add Signer
+          </h3>
+          <button
+            onClick={handleModalCloseClick}
+            className="op-btn op-btn-sm op-btn-circle op-btn-ghost text-base-content absolute right-2 top-2"
+          >
+            ✕
+          </button>
+          {isModal && (
+            <AddSigner
+              valueKey={"objectId"}
+              displayKey={"Name"}
+              details={handleNewDetails}
+              closePopup={handleModalCloseClick}
+            />
+          )}
+        </AddSignerModal>
       </div>
     </div>
   );
diff --git a/apps/OpenSign/src/layout/HomeLayout.js b/apps/OpenSign/src/layout/HomeLayout.js
index 592f74c56..e4159c4d8 100644
--- a/apps/OpenSign/src/layout/HomeLayout.js
+++ b/apps/OpenSign/src/layout/HomeLayout.js
@@ -12,6 +12,7 @@ import { useNavigate, useLocation, Outlet } from "react-router-dom";
 import { isEnableSubscription } from "../constant/const";
 import { useCookies } from "react-cookie";
 import { fetchSubscription } from "../constant/Utils";
+import Loader from "../primitives/Loader";
 
 const HomeLayout = () => {
   const navigate = useNavigate();
@@ -253,8 +254,8 @@ const HomeLayout = () => {
       {isUserValid ? (
         <>
           {isLoader ? (
-            <div className="flex h-[100vh] justify-center items-center text-[45px] text-[#3dd3e0]">
-              <div className="loader-37"></div>
+            <div className="flex h-[100vh] justify-center items-center">
+              <Loader />
             </div>
           ) : (
             <>
diff --git a/apps/OpenSign/src/pages/Dashboard.js b/apps/OpenSign/src/pages/Dashboard.js
index 20b03527e..37efc5da5 100644
--- a/apps/OpenSign/src/pages/Dashboard.js
+++ b/apps/OpenSign/src/pages/Dashboard.js
@@ -6,6 +6,7 @@ import Title from "../components/Title";
 import { useDispatch } from "react-redux";
 import { saveTourSteps } from "../redux/reducers/TourStepsReducer";
 import dashboardJson from "../json/dashboardJson";
+import Loader from "../primitives/Loader";
 
 const Dashboard = () => {
   const navigate = useNavigate();
@@ -57,8 +58,8 @@ const Dashboard = () => {
     <React.Fragment>
       <Title title="Dashboard" />
       {loading ? (
-        <div className="h-[300px] text-[45px] text-[#3dd3e0] w-full bg-white flex justify-center items-center rounded-md">
-          <div className="loader-37"></div>
+        <div className="h-[300px] w-full bg-white flex justify-center items-center rounded-md">
+          <Loader />
         </div>
       ) : (
         <GetDashboard dashboard={dashboard} />
diff --git a/apps/OpenSign/src/pages/Form.js b/apps/OpenSign/src/pages/Form.js
index a8831c564..13449f78a 100644
--- a/apps/OpenSign/src/pages/Form.js
+++ b/apps/OpenSign/src/pages/Form.js
@@ -19,6 +19,7 @@ import ModalUi from "../primitives/ModalUi";
 import { Tooltip } from "react-tooltip";
 import Upgrade from "../primitives/Upgrade";
 import PremiumAlertHeader from "../primitives/PremiumAlertHeader";
+import Loader from "../primitives/Loader";
 
 // `Form` render all type of Form on this basis of their provided in path
 function Form() {
@@ -574,8 +575,8 @@ const Forms = (props) => {
         </Alert>
       )}
       {isSubmit ? (
-        <div className="h-[300px] text-[45px] text-[#3dd3e0] flex justify-center items-center">
-          <div className="loader-37"></div>
+        <div className="h-[300px] flex justify-center items-center">
+          <Loader />
         </div>
       ) : (
         <>
diff --git a/apps/OpenSign/src/pages/GenerateToken.js b/apps/OpenSign/src/pages/GenerateToken.js
index c2ed62a98..8b331d897 100644
--- a/apps/OpenSign/src/pages/GenerateToken.js
+++ b/apps/OpenSign/src/pages/GenerateToken.js
@@ -8,6 +8,7 @@ import { isEnableSubscription } from "../constant/const";
 import { checkIsSubscribed, copytoData, openInNewTab } from "../constant/Utils";
 import PremiumAlertHeader from "../primitives/PremiumAlertHeader";
 import Tooltip from "../primitives/Tooltip";
+import Loader from "../primitives/Loader";
 
 function GenerateToken() {
   const navigation = useNavigate();
@@ -109,21 +110,8 @@ function GenerateToken() {
       {copied && <Alert type="success">Copied</Alert>}
       {isErr && <Alert type="danger">Something went wrong!</Alert>}
       {isLoader ? (
-        <div
-          style={{
-            height: "100vh",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          }}
-        >
-          <div
-            style={{
-              fontSize: "45px",
-              color: "#3dd3e0"
-            }}
-            className="loader-37"
-          ></div>
+        <div className="flex justify-center items-center h-screen">
+          <Loader />
         </div>
       ) : (
         <div className="bg-base-100 text-base-content flex flex-col justify-center shadow rounded">
@@ -155,7 +143,7 @@ function GenerateToken() {
                     {apiToken ? apiToken : "_____"}
                   </span>
                   <button
-                    className="op-btn op-btn-primary op-btn-sm ml-2"
+                    className="op-btn op-btn-accent op-btn-sm ml-2"
                     onClick={() => copytoclipboard(apiToken)}
                   >
                     <i className="fa-solid fa-copy"></i>
@@ -178,7 +166,7 @@ function GenerateToken() {
                   "https://docs.opensignlabs.com/docs/API-docs/opensign-api-v-1"
                 )
               }
-              className="op-btn op-btn-primary my-2"
+              className="op-btn op-btn-secondary my-2"
             >
               View Docs
             </button>
diff --git a/apps/OpenSign/src/pages/GuestLogin.js b/apps/OpenSign/src/pages/GuestLogin.js
index eea52d304..c12ee03e7 100644
--- a/apps/OpenSign/src/pages/GuestLogin.js
+++ b/apps/OpenSign/src/pages/GuestLogin.js
@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import loader from "../assets/images/loader2.gif";
 import axios from "axios";
 import { isEnableSubscription } from "../constant/const";
 import { contractUsers, getAppLogo } from "../constant/Utils";
 import logo from "../assets/images/logo.png";
 import { appInfo } from "../constant/appinfo";
 import Parse from "parse";
+import Loader from "../primitives/Loader";
 
 function GuestLogin() {
   const { id, userMail, contactBookId, base64url } = useParams();
@@ -184,7 +184,7 @@ function GuestLogin() {
     <div className="p-[2rem]">
       {isLoading ? (
         <div className="flex flex-col justify-center items-center h-[100vh]">
-          <img className="w-[80px] h-[80px]" alt="loader" src={loader} />
+          <Loader />
           <span className="text-[13px] text-[gray]">{isLoading.message}</span>
         </div>
       ) : (
diff --git a/apps/OpenSign/src/pages/Login.js b/apps/OpenSign/src/pages/Login.js
index 4a4109c74..14d660232 100644
--- a/apps/OpenSign/src/pages/Login.js
+++ b/apps/OpenSign/src/pages/Login.js
@@ -16,6 +16,7 @@ import { appInfo } from "../constant/appinfo";
 import { fetchAppInfo } from "../redux/reducers/infoReducer";
 import { showTenant } from "../redux/reducers/ShowTenant";
 import { fetchSubscription, getAppLogo, openInNewTab } from "../constant/Utils";
+import Loader from "../primitives/Loader";
 function Login() {
   const navigate = useNavigate();
   const location = useLocation();
@@ -1064,11 +1065,9 @@ function Login() {
       {state.loading && (
         <div
           aria-live="assertive"
-          className="fixed w-full h-full flex justify-center items-center bg-black bg-opacity-30 z-20 text-[50px] text-[#3ac9d6]"
+          className="fixed w-full h-full flex justify-center items-center bg-black bg-opacity-30 z-50"
         >
-          <div role="status" className="loader-37">
-            <span className="sr-only">Loading...</span>
-          </div>
+          <Loader />
         </div>
       )}
       {appInfo && appInfo.appId ? (
@@ -1160,7 +1159,7 @@ function Login() {
                       </button>
                       <button
                         type="button"
-                        className="op-btn op-btn-secondary"
+                        className="op-btn op-btn-accent"
                         disabled={state.loading}
                         onClick={() =>
                           navigate(
@@ -1287,9 +1286,11 @@ function Login() {
         </>
       ) : (
         <div
-          className="loader-37 fixed top-[50%] left-[45%] text-[50px] text-[#3ac9d6]"
-          style={{ color: "#3ac9d6" }}
-        ></div>
+          aria-live="assertive"
+          className="fixed w-full h-full flex justify-center items-center z-50"
+        >
+          <Loader />
+        </div>
       )}
     </div>
   );
diff --git a/apps/OpenSign/src/pages/Managesign.js b/apps/OpenSign/src/pages/Managesign.js
index d648861e3..5875a0a2f 100644
--- a/apps/OpenSign/src/pages/Managesign.js
+++ b/apps/OpenSign/src/pages/Managesign.js
@@ -7,6 +7,7 @@ import Parse from "parse";
 import { appInfo } from "../constant/appinfo";
 import { SaveFileSize } from "../constant/saveFileSize";
 import Alert from "../primitives/Alert";
+import Loader from "../primitives/Loader";
 const ManageSign = () => {
   const appName = appInfo.appname;
   const [penColor, setPenColor] = useState("blue");
@@ -243,8 +244,8 @@ const ManageSign = () => {
   return (
     <div className="relative h-full bg-base-100 text-base-content flex shadow rounded overflow-auto">
       {isLoader && (
-        <div className="absolute bg-black text-[45px] text-[#3dd3e0] bg-opacity-75 z-50 w-full h-full flex justify-center items-center">
-          <div className="loader-37 "></div>
+        <div className="absolute bg-black bg-opacity-30 z-50 w-full h-full flex justify-center items-center">
+          <Loader />
         </div>
       )}
       {isAlert?.message && <Alert type={isAlert.type}>{isAlert.message}</Alert>}
diff --git a/apps/OpenSign/src/pages/Opensigndrive.js b/apps/OpenSign/src/pages/Opensigndrive.js
index 1cfc22cd0..ae95de95c 100644
--- a/apps/OpenSign/src/pages/Opensigndrive.js
+++ b/apps/OpenSign/src/pages/Opensigndrive.js
@@ -1,6 +1,5 @@
 import React, { useEffect, useState, useRef } from "react";
 import "../styles/opensigndrive.css";
-import loader from "../assets/images/loader2.gif";
 import { iconColor } from "../constant/const";
 import { getDrive } from "../constant/Utils";
 import { useNavigate } from "react-router-dom";
@@ -10,14 +9,15 @@ import ModalUi from "../primitives/ModalUi";
 import TourContentWithBtn from "../primitives/TourContentWithBtn";
 import Tour from "reactour";
 import axios from "axios";
+import Loader from "../primitives/Loader";
 
 const DriveBody = React.lazy(
   () => import("../components/opensigndrive/DriveBody")
 );
-const Loader = () => {
+const AppLoader = () => {
   return (
-    <div className="h-[100vh] flex justify-center items-center text-[45px] text-[#3dd3e0] ">
-      <div className="loader-37"></div>
+    <div className="h-[100vh] flex justify-center items-center">
+      <Loader />
     </div>
   );
 };
@@ -558,9 +558,8 @@ function Opensigndrive() {
       >
         <div className="h-full p-[20px] pt-[10px] pb-[15px]">
           {folderLoader ? (
-            <div className="h-[200px] flex flex-col justify-center items-center">
-              <img alt="loader" src={loader} className="w-[50px] h-[50px]" />
-              <span className="text-[13px] text-[gray]">Loading...</span>
+            <div className="h-[200px] flex justify-center items-center">
+              <Loader />
             </div>
           ) : (
             <form
@@ -598,7 +597,7 @@ function Opensigndrive() {
       </ModalUi>
       {isLoading.isLoad ? (
         <div className="flex flex-col justify-center items-center h-[100vh] w-full">
-          <img alt="loader" src={loader} className="w-[80px] h-[80px]" />
+          <Loader />
           <span className="text-[13px] text-[gray]">{isLoading.message}</span>
         </div>
       ) : handleError ? (
@@ -783,7 +782,7 @@ function Opensigndrive() {
             </div>
           ) : (
             <div data-tut="reactourFifth">
-              <React.Suspense fallback={<Loader />}>
+              <React.Suspense fallback={<AppLoader />}>
                 <DriveBody
                   dataTutSixth="reactourSixth"
                   dataTutSeventh="reactourSeventh"
diff --git a/apps/OpenSign/src/pages/PdfRequestFiles.js b/apps/OpenSign/src/pages/PdfRequestFiles.js
index 97d0d9d50..2e8ef6f6b 100644
--- a/apps/OpenSign/src/pages/PdfRequestFiles.js
+++ b/apps/OpenSign/src/pages/PdfRequestFiles.js
@@ -4,7 +4,6 @@ import { PDFDocument } from "pdf-lib";
 import "../styles/signature.css";
 import Parse from "parse";
 import axios from "axios";
-import loader from "../assets/images/loader2.gif";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
@@ -35,7 +34,7 @@ import {
   handleDownloadCertificate,
   darkenColor
 } from "../constant/Utils";
-import Loader from "../primitives/LoaderWithMsg";
+import LoaderWithMsg from "../primitives/LoaderWithMsg";
 import HandleError from "../primitives/HandleError";
 import Header from "../components/pdf/PdfHeader";
 import RenderPdf from "../components/pdf/RenderPdf";
@@ -46,6 +45,7 @@ import ModalUi from "../primitives/ModalUi";
 import VerifyEmail from "../components/pdf/VerifyEmail";
 import TourContentWithBtn from "../primitives/TourContentWithBtn";
 import { appInfo } from "../constant/appinfo";
+import Loader from "../primitives/Loader";
 function useQuery() {
   return new URLSearchParams(useLocation().search);
 }
@@ -1388,18 +1388,14 @@ function PdfRequestFiles() {
       ) : (
         <>
           {isLoading.isLoad ? (
-            <Loader isLoading={isLoading} />
+            <LoaderWithMsg isLoading={isLoading} />
           ) : handleError ? (
             <HandleError handleError={handleError} />
           ) : (
             <div>
               {isUiLoading && (
                 <div className="absolute h-[100vh] w-full flex flex-col justify-center items-center z-[999] bg-[#e6f2f2] bg-opacity-80">
-                  <img
-                    alt="loader"
-                    src={loader}
-                    className="w-[100px] h-[100px]"
-                  />
+                  <Loader />
                   <span className="text-[13px] font-bold">
                     This might take some time
                   </span>
@@ -1635,8 +1631,8 @@ function PdfRequestFiles() {
                     </div>
                   </ModalUi>
                   {isDownloading === "pdf" && (
-                    <div className="fixed z-[1000] inset-0 flex justify-center items-center bg-black bg-opacity-30 text-[45px] text-[#3dd3e0]">
-                      <div className="loader-37"></div>
+                    <div className="fixed z-[1000] inset-0 flex justify-center items-center bg-black bg-opacity-30">
+                      <Loader />
                     </div>
                   )}
                   <ModalUi
@@ -1739,14 +1735,14 @@ function PdfRequestFiles() {
                     >
                       {signedSigners.length > 0 && (
                         <div data-tut="reactourSecond">
-                          <div className="px-3 pt-2 pb-1 text-[15px] text-base-content font-semibold">
+                          <div className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300">
                             Signed by
                           </div>
                           <div className="mt-[2px]">
                             {signedSigners.map((obj, ind) => {
                               return (
                                 <div
-                                  className="rounded-xl mx-1 flex flex-row items-center py-[10px]"
+                                  className="rounded-xl mx-1 flex flex-row items-center py-[10px] mt-1"
                                   style={{
                                     background: checkSignerBackColor(obj)
                                   }}
@@ -1779,20 +1775,14 @@ function PdfRequestFiles() {
 
                       {unsignedSigners.length > 0 && (
                         <div data-tut="reactourFirst">
-                          <div
-                            className={`${
-                              signedSigners?.length > 0
-                                ? "border-b-[1px] border-base-content"
-                                : ""
-                            } px-3 pt-2 pb-1 text-[15px] text-base-content font-semibold`}
-                          >
+                          <div className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300">
                             Yet to sign
                           </div>
                           <div className="mt-[5px]">
                             {unsignedSigners.map((obj, ind) => {
                               return (
                                 <div
-                                  className="rounded-xl mx-1 flex flex-row items-center py-[10px]"
+                                  className="rounded-xl mx-1 flex flex-row items-center py-[10px] mt-1"
                                   style={{
                                     background: checkSignerBackColor(obj)
                                   }}
diff --git a/apps/OpenSign/src/pages/Pgsignup.js b/apps/OpenSign/src/pages/Pgsignup.js
index 3570e25b5..6be61a83d 100644
--- a/apps/OpenSign/src/pages/Pgsignup.js
+++ b/apps/OpenSign/src/pages/Pgsignup.js
@@ -8,6 +8,7 @@ import { useNavigate, useLocation } from "react-router-dom";
 import { appInfo } from "../constant/appinfo";
 import { showTenant } from "../redux/reducers/ShowTenant";
 import { fetchAppInfo } from "../redux/reducers/infoReducer";
+import Loader from "../primitives/Loader";
 
 const PgSignUp = () => {
   const navigate = useNavigate();
@@ -411,21 +412,8 @@ const PgSignUp = () => {
     <div className="bg-white">
       <Title title={"Pgsignup page"} />
       {isLoader ? (
-        <div
-          style={{
-            height: "100vh",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          }}
-        >
-          <div
-            style={{
-              fontSize: "45px",
-              color: "#3dd3e0"
-            }}
-            className="loader-37"
-          ></div>
+        <div className="flex justify-center items-center h-[100vh]">
+          <Loader />
         </div>
       ) : (
         <form id="signup" className="pgsignup-content" onSubmit={handleSubmit}>
diff --git a/apps/OpenSign/src/pages/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js
index c22933a4f..bf947653a 100644
--- a/apps/OpenSign/src/pages/PlaceHolderSign.js
+++ b/apps/OpenSign/src/pages/PlaceHolderSign.js
@@ -10,7 +10,6 @@ import { useDrag, useDrop } from "react-dnd";
 import RenderAllPdfPage from "../components/pdf/RenderAllPdfPage";
 import WidgetComponent from "../components/pdf/WidgetComponent";
 import Tour from "reactour";
-import loader from "../assets/images/loader2.gif";
 import { useLocation, useParams } from "react-router-dom";
 import Loader from "../primitives/LoaderWithMsg";
 import HandleError from "../primitives/HandleError";
@@ -1643,11 +1642,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">
-                <img
-                  alt="loader"
-                  src={loader}
-                  className="w-[100px] h-[100px]"
-                />
+                <Loader />
                 <span className="text-[13px] font-bold">
                   This might take some time
                 </span>
diff --git a/apps/OpenSign/src/pages/PlanSubscriptions.js b/apps/OpenSign/src/pages/PlanSubscriptions.js
index 0b8097c7e..70e5e138a 100644
--- a/apps/OpenSign/src/pages/PlanSubscriptions.js
+++ b/apps/OpenSign/src/pages/PlanSubscriptions.js
@@ -5,6 +5,7 @@ import plansArr from "../json/plansArr";
 import Title from "../components/Title";
 import Parse from "parse";
 import { openInNewTab } from "../constant/Utils";
+import Loader from "../primitives/Loader";
 const listItemStyle = {
   paddingLeft: "20px", // Add padding to create space for the image
   backgroundImage: `url(${checkmark})`, // Set your image as the list style image
@@ -85,8 +86,8 @@ const PlanSubscriptions = () => {
     <>
       <Title title={"Subscriptions"} />
       {isLoader ? (
-        <div className="flex items-center justify-center h-[full] text-[45px] text-[#3dd3e0]">
-          <div className="loader-37"></div>
+        <div className="flex items-center justify-center h-screen">
+          <Loader />
         </div>
       ) : (
         <div className="overflow-y-auto max-h-full">
diff --git a/apps/OpenSign/src/pages/Report.js b/apps/OpenSign/src/pages/Report.js
index 809a6a2aa..f66f5d62a 100644
--- a/apps/OpenSign/src/pages/Report.js
+++ b/apps/OpenSign/src/pages/Report.js
@@ -7,6 +7,7 @@ import { useParams } from "react-router-dom";
 import Title from "../components/Title";
 import PageNotFound from "./PageNotFound";
 import TourContentWithBtn from "../primitives/TourContentWithBtn";
+import Loader from "../primitives/Loader";
 
 const Report = () => {
   const { id } = useParams();
@@ -173,8 +174,8 @@ const Report = () => {
     <>
       <Title title={reportName} />
       {isLoader ? (
-        <div className="h-[100vh] flex justify-center items-center text-[45px] text-[#3dd3e0]">
-          <div className="loader-37"></div>
+        <div className="h-[100vh] flex justify-center items-center">
+          <Loader />
         </div>
       ) : (
         <>
diff --git a/apps/OpenSign/src/pages/SSOVerify.js b/apps/OpenSign/src/pages/SSOVerify.js
index e7afdc9d6..e974a74d6 100644
--- a/apps/OpenSign/src/pages/SSOVerify.js
+++ b/apps/OpenSign/src/pages/SSOVerify.js
@@ -8,7 +8,7 @@ import { fetchSubscription } from "../constant/Utils";
 import { useDispatch } from "react-redux";
 import { showTenant } from "../redux/reducers/ShowTenant";
 import ModalUi from "../primitives/ModalUi";
-import loader from "../assets/images/loader2.gif";
+import Loader from "../primitives/Loader";
 
 const SSOVerify = () => {
   const location = useLocation();
@@ -287,16 +287,14 @@ const SSOVerify = () => {
   return (
     <div>
       <div className="w-full h-screen flex flex-col justify-center items-center text-sm md:text-xl ">
-        {message === "Verifying SSO..." && (
-          <img alt="loader" src={loader} className="w-[80px] h-[80px]" />
-        )}
+        {message === "Verifying SSO..." && <Loader />}
         <div className="text-base-content">{message}</div>
       </div>
       <ModalUi isOpen={isModal} title="Additional Info" showClose={false}>
         <div className="relative">
           {isLoader && (
-            <div className="absolute w-full h-full bg-black bg-opacity-25 flex justify-center items-center text-[45px] text-[#3dd3e0]">
-              <div className="loader-37"></div>
+            <div className="absolute w-full h-full bg-black bg-opacity-25 flex justify-center items-center">
+              <Loader />
             </div>
           )}
           <form
diff --git a/apps/OpenSign/src/pages/Signup.js b/apps/OpenSign/src/pages/Signup.js
index 2fdabe254..7bdb33eae 100644
--- a/apps/OpenSign/src/pages/Signup.js
+++ b/apps/OpenSign/src/pages/Signup.js
@@ -12,6 +12,7 @@ import { fetchAppInfo } from "../redux/reducers/infoReducer";
 import { showTenant } from "../redux/reducers/ShowTenant";
 import { isEnableSubscription } from "../constant/const";
 import { getAppLogo, openInNewTab } from "../constant/Utils";
+import Loader from "../primitives/Loader";
 const Signup = () => {
   const { width } = useWindowSize();
   const navigate = useNavigate();
@@ -503,8 +504,8 @@ const Signup = () => {
   return (
     <div className="">
       {state.loading && (
-        <div className="fixed w-[100vw] h-[100vh] flex justify-center items-center z-20 bg-black bg-opacity-25 text-[#3ac9d6] text-[50px]">
-          <div className="loader-37 "></div>
+        <div className="fixed w-full h-full flex justify-center items-center bg-black bg-opacity-30 z-50">
+          <Loader />
         </div>
       )}
       <Title title={"Signup page"} />
@@ -668,7 +669,7 @@ const Signup = () => {
                   <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-center text-xs font-bold mt-2">
                     <button
                       type="submit"
-                      className="op-btn op-btn-accent"
+                      className="op-btn op-btn-primary"
                       disabled={state.loading}
                     >
                       {state.loading ? "Loading..." : "Register"}
@@ -698,10 +699,9 @@ const Signup = () => {
           <Alert type={state.alertType}>{state.alertMsg}</Alert>
         </div>
       ) : (
-        <div
-          className="loader-37 fixed text-[50px] top-[50%] left-[45%]"
-          style={{ color: "#3ac9d6" }}
-        ></div>
+        <div className="fixed w-full h-full flex justify-center items-center z-50">
+          <Loader />
+        </div>
       )}
     </div>
   );
diff --git a/apps/OpenSign/src/pages/SignyourselfPdf.js b/apps/OpenSign/src/pages/SignyourselfPdf.js
index b4971322a..e6aae86a2 100644
--- a/apps/OpenSign/src/pages/SignyourselfPdf.js
+++ b/apps/OpenSign/src/pages/SignyourselfPdf.js
@@ -6,7 +6,6 @@ import { isEnableSubscription } from "../constant/const";
 import Confetti from "react-confetti";
 import axios from "axios";
 import Loader from "../primitives/LoaderWithMsg";
-import loader from "../assets/images/loader2.gif";
 import RenderAllPdfPage from "../components/pdf/RenderAllPdfPage";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
@@ -1100,7 +1099,7 @@ function SignYourSelf() {
         <div>
           {isUiLoading && (
             <div className="absolute h-[100vh] w-full z-[999] flex flex-col justify-center items-start bg-[#e6f2f2] bg-opacity-80">
-              <img alt="loader" src={loader} className="w-[100px] h-[100px]" />
+              <Loader />
               <span className="font-bold text-[13px]">
                 This might take some time
               </span>
diff --git a/apps/OpenSign/src/pages/UserProfile.js b/apps/OpenSign/src/pages/UserProfile.js
index 3690bd551..09d8b796d 100644
--- a/apps/OpenSign/src/pages/UserProfile.js
+++ b/apps/OpenSign/src/pages/UserProfile.js
@@ -16,6 +16,7 @@ import { isEnableSubscription } from "../constant/const";
 import { checkIsSubscribed, handleSendOTP } from "../constant/Utils";
 import Upgrade from "../primitives/Upgrade";
 import ModalUi from "../primitives/ModalUi";
+import Loader from "../primitives/Loader";
 
 function UserProfile() {
   const navigate = useNavigate();
@@ -302,8 +303,8 @@ function UserProfile() {
     <React.Fragment>
       <Title title={"Profile"} />
       {isLoader ? (
-        <div className="h-[100vh] flex justify-center items-center text-[45px] text-[#3dd3e0]">
-          <div className="loader-37"></div>
+        <div className="h-[100vh] flex justify-center items-center">
+          <Loader />
         </div>
       ) : (
         <div className="flex justify-center items-center w-full relative">
@@ -544,8 +545,8 @@ function UserProfile() {
               handleClose={handleCloseVerifyModal}
             >
               {otpLoader ? (
-                <div className="h-[150px] flex justify-center items-center text-[45px] text-[#3dd3e0]">
-                  <div className="loader-37"></div>
+                <div className="h-[150px] flex justify-center items-center">
+                  <Loader />
                 </div>
               ) : (
                 <form onSubmit={(e) => handleVerifyEmail(e)}>
diff --git a/apps/OpenSign/src/pages/Webhook.js b/apps/OpenSign/src/pages/Webhook.js
index 9f6c065b5..87c871b8f 100644
--- a/apps/OpenSign/src/pages/Webhook.js
+++ b/apps/OpenSign/src/pages/Webhook.js
@@ -9,6 +9,7 @@ import { checkIsSubscribed, openInNewTab } from "../constant/Utils";
 import Parse from "parse";
 import PremiumAlertHeader from "../primitives/PremiumAlertHeader";
 import Tooltip from "../primitives/Tooltip";
+import Loader from "../primitives/Loader";
 
 function Webhook() {
   const navigation = useNavigate();
@@ -101,8 +102,8 @@ function Webhook() {
       {isErr && <Alert type="danger">Something went wrong.</Alert>}
 
       {isLoader ? (
-        <div className="h-[100vh] flex justify-center items-center text-[45px] text-[#3dd3e0]">
-          <div className="loader-37"></div>
+        <div className="h-[100vh] flex justify-center items-center">
+          <Loader />
         </div>
       ) : (
         <div className="bg-base-100 text-base-content flex flex-col justify-center shadow rounded">
@@ -148,7 +149,7 @@ function Webhook() {
                   "https://docs.opensignlabs.com/docs/API-docs/save-update-webhook"
                 )
               }
-              className="op-btn op-btn-primary my-2"
+              className="op-btn op-btn-secondary my-2"
             >
               View Docs
             </button>
diff --git a/apps/OpenSign/src/primitives/AddContact.js b/apps/OpenSign/src/primitives/AddContact.js
index 6b261e9c8..d65fa1e21 100644
--- a/apps/OpenSign/src/primitives/AddContact.js
+++ b/apps/OpenSign/src/primitives/AddContact.js
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import Parse from "parse";
 import axios from "axios";
 import "../styles/AddUser.css";
+import Loader from "./Loader";
 const AddContact = (props) => {
   const [name, setName] = useState("");
   const [phone, setPhone] = useState("");
@@ -197,22 +198,25 @@ const AddContact = (props) => {
   return (
     <div className="h-full px-[20px] py-[10px]">
       {isLoader && (
-        <div className="fixed top-0 left-0 right-0 bottom-0 flex justify-center items-center bg-black bg-opacity-30 text-[45px] text-[#3dd3e0]">
-          <div className="loader-37"></div>
+        <div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-30">
+          <Loader />
         </div>
       )}
       <div className="w-full mx-auto p-[8px]">
         <div className="text-[14px] font-[700]">Add User</div>
         {isUserExist && (
-          <div className="mb-[0.75rem]">
+          <div className="mb-[0.75rem] flex items-center mt-1">
             <input
               type="checkbox"
               id="addYourself"
               checked={addYourself}
               onChange={handleAddYourselfChange}
-              className="form-checkbox"
+              className="op-checkbox op-checkbox-sm"
             />
-            <label htmlFor="addYourself" className="checkbox-label ">
+            <label
+              htmlFor="addYourself"
+              className="ml-[0.5rem] text-base-content mb-0"
+            >
               Add Yourself
             </label>
           </div>
diff --git a/apps/OpenSign/src/primitives/GetReportDisplay.js b/apps/OpenSign/src/primitives/GetReportDisplay.js
index f5f1e0972..c51704848 100644
--- a/apps/OpenSign/src/primitives/GetReportDisplay.js
+++ b/apps/OpenSign/src/primitives/GetReportDisplay.js
@@ -23,6 +23,7 @@ import EditorToolbar, {
 import ReactQuill from "react-quill";
 import "react-quill/dist/quill.snow.css";
 import BulkSendUi from "../components/BulkSendUi";
+import Loader from "./Loader";
 
 const ReportTable = (props) => {
   const navigate = useNavigate();
@@ -914,11 +915,11 @@ const ReportTable = (props) => {
   return (
     <div className="relative">
       {Object.keys(actLoader)?.length > 0 && (
-        <div className="absolute w-full h-full text-[45px] text-[#3dd3e0] rounded-md flex justify-center items-center bg-black bg-opacity-30 z-30">
-          <div className="loader-37"></div>
+        <div className="absolute w-full h-full flex justify-center items-center bg-black bg-opacity-30 z-30">
+          <Loader />
         </div>
       )}
-      <div className="p-2 overflow-x-scroll w-full bg-base-100 text-base-content op-card shadow-lg">
+      <div className="p-2 w-full bg-base-100 text-base-content op-card shadow-lg">
         {/* {isCelebration && (
           <div className="relative z-[1000]">
             <Confetti width={window.innerWidth} height={window.innerHeight} />
@@ -959,125 +960,132 @@ const ReportTable = (props) => {
             </div>
           )}
         </div>
-        <table className="op-table op-table-zebra border-collapse h-[317px]">
-          <thead className="text-[14px]">
-            <tr className="border-y-[1px]">
-              {props.heading?.map((item, index) => (
-                <React.Fragment key={index}>
-                  <th className="px-4 py-2">{item}</th>
-                </React.Fragment>
-              ))}
-              {/* {props.ReportName === "Templates" && isEnableSubscription && (
+        <div className="overflow-x-auto w-full">
+          <table className="op-table border-collapse h-[317px] w-full">
+            <thead className="text-[14px]">
+              <tr className="border-y-[1px]">
+                {props.heading?.map((item, index) => (
+                  <React.Fragment key={index}>
+                    <th className="px-4 py-2">{item}</th>
+                  </React.Fragment>
+                ))}
+                {/* {props.ReportName === "Templates" && isEnableSubscription && (
                 <th className="px-4 py-2">Public</th>
               )} */}
-              {props.actions?.length > 0 && (
-                <th className="px-4 py-2 text-transparent pointer-events-none">
-                  Action
-                </th>
-              )}
-            </tr>
-          </thead>
-          <tbody className="text-[12px]">
-            {props.List?.length > 0 && (
-              <>
-                {currentList.map((item, index) =>
-                  props.ReportName === "Contactbook" ? (
-                    <tr className="border-y-[1px]" key={index}>
-                      {props.heading.includes("Sr.No") && (
-                        <th className="px-4 py-2">{startIndex + index + 1}</th>
-                      )}
-                      <td className="px-4 py-2 font-semibold">{item?.Name} </td>
-                      <td className="px-4 py-2">{item?.Email || "-"}</td>
-                      <td className="px-4 py-2">{item?.Phone || "-"}</td>
-                      <td className="px-3 py-2 text-white grid grid-cols-2">
-                        {props.actions?.length > 0 &&
-                          props.actions.map((act, index) => (
-                            <button
-                              key={index}
-                              onClick={() => handleActionBtn(act, item)}
-                              title={act.hoverLabel}
-                              className={`${
-                                act?.btnColor ? act.btnColor : ""
-                              } op-btn op-btn-sm`}
+                {props.actions?.length > 0 && (
+                  <th className="px-4 py-2 text-transparent pointer-events-none">
+                    Action
+                  </th>
+                )}
+              </tr>
+            </thead>
+            <tbody className="text-[12px]">
+              {props.List?.length > 0 && (
+                <>
+                  {currentList.map((item, index) =>
+                    props.ReportName === "Contactbook" ? (
+                      <tr className="border-y-[1px]" key={index}>
+                        {props.heading.includes("Sr.No") && (
+                          <th className="px-4 py-2">
+                            {startIndex + index + 1}
+                          </th>
+                        )}
+                        <td className="px-4 py-2 font-semibold">
+                          {item?.Name}{" "}
+                        </td>
+                        <td className="px-4 py-2">{item?.Email || "-"}</td>
+                        <td className="px-4 py-2">{item?.Phone || "-"}</td>
+                        <td className="px-3 py-2 text-white grid grid-cols-2">
+                          {props.actions?.length > 0 &&
+                            props.actions.map((act, index) => (
+                              <button
+                                key={index}
+                                onClick={() => handleActionBtn(act, item)}
+                                title={act.hoverLabel}
+                                className={`${
+                                  act?.btnColor ? act.btnColor : ""
+                                } op-btn op-btn-sm`}
+                              >
+                                <i className={act.btnIcon}></i>
+                              </button>
+                            ))}
+                          {isDeleteModal[item.objectId] && (
+                            <ModalUi
+                              isOpen
+                              title={"Delete Contact"}
+                              handleClose={handleClose}
                             >
-                              <i className={act.btnIcon}></i>
-                            </button>
-                          ))}
-                        {isDeleteModal[item.objectId] && (
-                          <ModalUi
-                            isOpen
-                            title={"Delete Contact"}
-                            handleClose={handleClose}
-                          >
-                            <div className="m-[20px]">
-                              <div className="text-lg font-normal text-black">
-                                Are you sure you want to delete this contact?
+                              <div className="m-[20px]">
+                                <div className="text-lg font-normal text-black">
+                                  Are you sure you want to delete this contact?
+                                </div>
+                                <hr className="bg-[#ccc] mt-4 " />
+                                <div className="flex items-center mt-3 gap-2 text-white">
+                                  <button
+                                    onClick={() => handleDelete(item)}
+                                    className="op-btn op-btn-primary"
+                                  >
+                                    Yes
+                                  </button>
+                                  <button
+                                    onClick={handleClose}
+                                    className="op-btn op-btn-secondary"
+                                  >
+                                    No
+                                  </button>
+                                </div>
                               </div>
-                              <hr className="bg-[#ccc] mt-4 " />
-                              <div className="flex items-center mt-3 gap-2 text-white">
-                                <button
-                                  onClick={() => handleDelete(item)}
-                                  className="op-btn op-btn-primary"
-                                >
-                                  Yes
-                                </button>
-                                <button
-                                  onClick={handleClose}
-                                  className="op-btn op-btn-secondary"
-                                >
-                                  No
-                                </button>
-                              </div>
-                            </div>
-                          </ModalUi>
+                            </ModalUi>
+                          )}
+                        </td>
+                      </tr>
+                    ) : (
+                      <tr className="border-y-[1px]" key={index}>
+                        {props.heading.includes("Sr.No") && (
+                          <th className="px-4 py-2">
+                            {startIndex + index + 1}
+                          </th>
                         )}
-                      </td>
-                    </tr>
-                  ) : (
-                    <tr className="border-y-[1px]" key={index}>
-                      {props.heading.includes("Sr.No") && (
-                        <th className="px-4 py-2">{startIndex + index + 1}</th>
-                      )}
-                      <td className="px-4 py-2 font-semibold min-w-56">
-                        {item?.Name}{" "}
-                      </td>
-                      {props.heading.includes("Note") && (
-                        <td className="px-4 py-2">
-                          {item?.Note?.length > 25
-                            ? item?.Note?.slice(0, 25) + "..."
-                            : item?.Note || "-"}
+                        <td className="px-4 py-2 font-semibold min-w-56">
+                          {item?.Name}{" "}
                         </td>
-                      )}
-                      {props.heading.includes("Folder") && (
+                        {props.heading.includes("Note") && (
+                          <td className="px-4 py-2">
+                            {item?.Note?.length > 25
+                              ? item?.Note?.slice(0, 25) + "..."
+                              : item?.Note || "-"}
+                          </td>
+                        )}
+                        {props.heading.includes("Folder") && (
+                          <td className="px-4 py-2">
+                            {item?.Folder?.Name || "OpenSign™ Drive"}
+                          </td>
+                        )}
                         <td className="px-4 py-2">
-                          {item?.Folder?.Name || "OpenSign™ Drive"}
-                        </td>
-                      )}
-                      <td className="px-4 py-2">
-                        <button
-                          onClick={() => handleDownload(item)}
-                          className="op-link op-link-primary"
-                          title={"Download"}
-                        >
-                          {item?.URL ? "Download" : "-"}
-                        </button>
-                      </td>
-                      <td className="px-4 py-2">
-                        {formatRow(item?.ExtUserPtr)}
-                      </td>
-                      <td className="px-4 py-2">
-                        {item?.Placeholders ? (
                           <button
-                            onClick={() => handleViewSigners(item)}
+                            onClick={() => handleDownload(item)}
                             className="op-link op-link-primary"
+                            title={"Download"}
                           >
-                            View
+                            {item?.URL ? "Download" : "-"}
                           </button>
-                        ) : (
-                          "-"
-                        )}
-                      </td>
-                      {/* {props.ReportName === "Templates" &&
+                        </td>
+                        <td className="px-4 py-2">
+                          {formatRow(item?.ExtUserPtr)}
+                        </td>
+                        <td className="px-4 py-2">
+                          {item?.Placeholders ? (
+                            <button
+                              onClick={() => handleViewSigners(item)}
+                              className="op-link op-link-primary"
+                            >
+                              View
+                            </button>
+                          ) : (
+                            "-"
+                          )}
+                        </td>
+                        {/* {props.ReportName === "Templates" &&
                         isEnableSubscription && (
                           <td className=" pl-[20px] py-2">
                             {props.ReportName === "Templates" && (
@@ -1235,326 +1243,329 @@ const ReportTable = (props) => {
                             )}
                           </td>
                         )} */}
-                      <td className="px-2 py-2">
-                        <div className="text-base-content flex flex-row gap-x-2 gap-y-1 justify-start items-center">
-                          {props.actions?.length > 0 &&
-                            props.actions.map((act, index) => (
-                              <div
-                                role="button"
-                                data-tut={act?.selector}
-                                key={index}
-                                onClick={() => handleActionBtn(act, item)}
-                                title={act.hoverLabel}
-                                className={
-                                  act.action !== "option"
-                                    ? `${
-                                        act?.btnColor ? act.btnColor : ""
-                                      } op-btn op-btn-sm mr-1`
-                                    : "text-base-content focus:outline-none text-lg mr-2 relative"
-                                }
-                              >
-                                <i className={act.btnIcon}></i>
-                                {act.btnLabel && (
-                                  <span className="uppercase font-medium">
-                                    {act.btnLabel}
-                                  </span>
-                                )}
-                                {isOption[item.objectId] &&
-                                  act.action === "option" && (
-                                    <ul className="absolute -right-2 top-6 z-[20] op-dropdown-content op-menu shadow bg-base-100 text-base-content rounded-box ">
-                                      {act.subaction?.map((subact) => (
-                                        <li
-                                          key={subact.btnId}
-                                          onClick={() =>
-                                            handleActionBtn(subact, item)
-                                          }
-                                          title={subact.hoverLabel}
-                                        >
-                                          <span>
-                                            <i
-                                              className={`${subact.btnIcon} mr-1.5`}
-                                            ></i>
-                                            {subact.btnLabel && (
-                                              <span className="text-[13px] capitalize font-medium">
-                                                {subact.btnLabel}
-                                              </span>
-                                            )}
-                                          </span>
-                                        </li>
-                                      ))}
-                                    </ul>
-                                  )}
-                              </div>
-                            ))}
-                        </div>
-                        {isViewShare[item.objectId] && (
-                          <div className="fixed z-[999] inset-0 w-full h-full bg-black bg-opacity-[75%]">
-                            <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-sm bg-white rounded shadow-md max-h-90 min-w-[90%] md:min-w-[400px] overflow-y-auto max-h-[340px] md:max-h-[400px] hide-scrollbar">
-                              <div
-                                className="cursor-pointer absolute text-white text-[22px] font-medium rounded-full z-50 top-1 right-3"
-                                onClick={() => setIsViewShare({})}
-                              >
-                                &times;
-                              </div>
-
-                              <table className="table-auto w-full">
-                                <thead className="text-white h-[38px] sticky top-0 bg-[#32a3ac]">
-                                  <tr>
-                                    {props.ReportName === "Templates" && (
-                                      <th className="p-2 pl-3">Roles</th>
-                                    )}
-                                    <th className="p-2">Signers</th>
-                                  </tr>
-                                </thead>
-                                <tbody>
-                                  {item.Placeholders.map((x, i) => (
-                                    <tr
-                                      key={i}
-                                      className="text-sm font-normal text-black odd:bg-white even:bg-gray-200"
-                                    >
-                                      {props.ReportName === "Templates" && (
-                                        <td className="text-[12px] p-2 pl-3">
-                                          {x.Role && x.Role}
-                                        </td>
-                                      )}
-                                      <td className="text-[12px] p-2 break-all">
-                                        {x.email
-                                          ? x.email
-                                          : x?.signerPtr?.Email || "-"}
-                                      </td>
-                                    </tr>
-                                  ))}
-                                </tbody>
-                              </table>
-                            </div>
-                          </div>
-                        )}
-                        {isDeleteModal[item.objectId] && (
-                          <ModalUi
-                            isOpen
-                            title={"Delete Document"}
-                            handleClose={handleClose}
-                          >
-                            <div className="m-[20px]">
-                              <div className="text-lg font-normal text-black">
-                                Are you sure you want to delete this document?
-                              </div>
-                              <hr className="bg-[#ccc] mt-4" />
-                              <div className="flex items-center mt-3 gap-2 text-white">
-                                <button
-                                  onClick={() => handleDelete(item)}
-                                  className="op-btn op-btn-primary"
-                                >
-                                  Yes
-                                </button>
-                                <button
-                                  onClick={handleClose}
-                                  className="op-btn op-btn-secondary"
-                                >
-                                  No
-                                </button>
-                              </div>
-                            </div>
-                          </ModalUi>
-                        )}
-                        {isBulkSend[item.objectId] && (
-                          <ModalUi
-                            isOpen
-                            title={"Quick send"}
-                            handleClose={() => setIsBulkSend({})}
-                          >
-                            {isLoader[item.objectId] ? (
-                              <div className="w-full h-[100px] text-[45px] text-[#3dd3e0] rounded-b-md flex justify-center items-center bg-black bg-opacity-30 z-30">
-                                <div className="loader-37"></div>
-                              </div>
-                            ) : (
-                              <BulkSendUi
-                                Placeholders={placeholders}
-                                item={templateDeatils}
-                                handleClose={handleQuickSendClose}
-                              />
-                            )}
-                          </ModalUi>
-                        )}
-                        {isShare[item.objectId] && (
-                          <ModalUi
-                            isOpen
-                            title={"Copy link"}
-                            handleClose={() => {
-                              setIsShare({});
-                              setActLoader({});
-                            }}
-                          >
-                            <div className="m-[20px]">
-                              {shareUrls.map((share, i) => (
+                        <td className="px-2 py-2">
+                          <div className="text-base-content flex flex-row gap-x-2 gap-y-1 justify-start items-center">
+                            {props.actions?.length > 0 &&
+                              props.actions.map((act, index) => (
                                 <div
-                                  key={i}
-                                  className="text-sm font-normal text-black flex my-2 justify-between items-center"
+                                  role="button"
+                                  data-tut={act?.selector}
+                                  key={index}
+                                  onClick={() => handleActionBtn(act, item)}
+                                  title={act.hoverLabel}
+                                  className={
+                                    act.action !== "option"
+                                      ? `${
+                                          act?.btnColor ? act.btnColor : ""
+                                        } op-btn op-btn-sm mr-1`
+                                      : "text-base-content focus:outline-none text-lg mr-2 relative"
+                                  }
                                 >
-                                  <span className="text-sm font-semibold">
-                                    {share.email}
-                                  </span>
-                                  <div>
-                                    <RWebShare
-                                      data={{
-                                        url: share.url,
-                                        title: "Sign url"
-                                      }}
-                                    >
-                                      <button className="bg-[#002864] text-white rounded w-[32px] h-[30px] focus:outline-none">
-                                        <i className="fa-solid fa-share-from-square"></i>{" "}
-                                      </button>
-                                    </RWebShare>
-                                    <button
-                                      className="ml-2 bg-[#002864] text-white rounded w-[100px] h-[30px] focus:outline-none"
-                                      onClick={() => copytoclipboard(share)}
-                                    >
-                                      <i className="fa-solid fa-link"></i>{" "}
-                                      {copied[share.email] ? "Copied" : "Copy"}
-                                    </button>
-                                  </div>
+                                  <i className={act.btnIcon}></i>
+                                  {act.btnLabel && (
+                                    <span className="uppercase font-medium">
+                                      {act.btnLabel}
+                                    </span>
+                                  )}
+                                  {isOption[item.objectId] &&
+                                    act.action === "option" && (
+                                      <ul className="absolute -right-2 top-6 z-[20] op-dropdown-content op-menu shadow bg-base-100 text-base-content rounded-box ">
+                                        {act.subaction?.map((subact) => (
+                                          <li
+                                            key={subact.btnId}
+                                            onClick={() =>
+                                              handleActionBtn(subact, item)
+                                            }
+                                            title={subact.hoverLabel}
+                                          >
+                                            <span>
+                                              <i
+                                                className={`${subact.btnIcon} mr-1.5`}
+                                              ></i>
+                                              {subact.btnLabel && (
+                                                <span className="text-[13px] capitalize font-medium">
+                                                  {subact.btnLabel}
+                                                </span>
+                                              )}
+                                            </span>
+                                          </li>
+                                        ))}
+                                      </ul>
+                                    )}
                                 </div>
                               ))}
-                            </div>
-                          </ModalUi>
-                        )}
-                        {isRevoke[item.objectId] && (
-                          <ModalUi
-                            isOpen
-                            title={"Revoke document"}
-                            handleClose={handleClose}
-                          >
-                            <div className="m-[20px]">
-                              <div className="text-lg font-normal text-black">
-                                Are you sure you want to revoke this document?
-                              </div>
-                              <hr className="bg-[#ccc] mt-4" />
-                              <div className="flex items-center mt-3 gap-2">
-                                <button
-                                  onClick={() => handleRevoke(item)}
-                                  className="op-btn op-btn-primary"
+                          </div>
+                          {isViewShare[item.objectId] && (
+                            <div className="fixed z-[999] inset-0 w-full h-full bg-black bg-opacity-[75%]">
+                              <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-sm bg-white rounded shadow-md max-h-90 min-w-[90%] md:min-w-[400px] overflow-y-auto max-h-[340px] md:max-h-[400px] hide-scrollbar">
+                                <div
+                                  className="cursor-pointer absolute text-white text-[22px] font-medium rounded-full z-50 top-1 right-3"
+                                  onClick={() => setIsViewShare({})}
                                 >
-                                  Yes
-                                </button>
-                                <button
-                                  onClick={handleClose}
-                                  className="op-btn op-btn-secondary"
-                                >
-                                  No
-                                </button>
-                              </div>
-                            </div>
-                          </ModalUi>
-                        )}
-                        {isResendMail[item.objectId] && (
-                          <ModalUi
-                            isOpen
-                            title={"Resend Mail"}
-                            handleClose={() => {
-                              setIsResendMail({});
-                              setIsNextStep({});
-                              setUserDetails({});
-                            }}
-                          >
-                            <div className=" overflow-y-auto max-h-[340px] md:max-h-[400px]">
-                              {item?.Placeholders?.map((user) => (
-                                <React.Fragment key={user.Id}>
-                                  {isNextStep[user.Id] && (
-                                    <div className="relative ">
-                                      {actLoader[user.Id] && (
-                                        <div className="absolute text-[45px] text-[#3dd3e0] w-full h-full flex justify-center items-center bg-black bg-opacity-30 z-30">
-                                          <div className="loader-37"></div>
-                                        </div>
+                                  &times;
+                                </div>
+
+                                <table className="table-auto w-full">
+                                  <thead className="text-white h-[38px] sticky top-0 bg-[#32a3ac]">
+                                    <tr>
+                                      {props.ReportName === "Templates" && (
+                                        <th className="p-2 pl-3">Roles</th>
                                       )}
-                                      <form
-                                        onSubmit={(e) =>
-                                          handleResendMail(e, item, user)
-                                        }
-                                        className="w-full flex flex-col gap-2 p-3 text-base-content relative"
+                                      <th className="p-2">Signers</th>
+                                    </tr>
+                                  </thead>
+                                  <tbody>
+                                    {item.Placeholders.map((x, i) => (
+                                      <tr
+                                        key={i}
+                                        className="text-sm font-normal text-black odd:bg-white even:bg-gray-200"
                                       >
-                                        <div className="absolute right-5 text-xs z-40">
-                                          <Tooltip
-                                            id={`${user.Id}_help`}
-                                            message={
-                                              "You can use following variables which will get replaced with their actual values:- {{document_title}}, {{sender_name}}, {{sender_mail}}, {{sender_phone}}, {{receiver_name}}, {{receiver_email}}, {{receiver_phone}}, {{expiry_date}}, {{company_name}}, {{signing_url}}."
-                                            }
-                                          />
-                                        </div>
-                                        <div>
-                                          <label
-                                            className="text-xs ml-1"
-                                            htmlFor="mailsubject"
-                                          >
-                                            Subject{" "}
-                                          </label>
-                                          <input
-                                            id="mailsubject"
-                                            className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-                                            value={mail.subject}
-                                            onChange={(e) =>
-                                              handleSubjectChange(
-                                                e.target.value,
-                                                item
-                                              )
-                                            }
-                                            required
-                                          />
-                                        </div>
-                                        <div>
-                                          <label
-                                            className="text-xs ml-1"
-                                            htmlFor="mailbody"
-                                          >
-                                            Body{" "}
-                                          </label>
-                                          <EditorToolbar containerId="toolbar1" />
-                                          <ReactQuill
-                                            id="mailbody"
-                                            theme="snow"
-                                            value={mail.body || ""}
-                                            placeholder="add body of email "
-                                            modules={module1}
-                                            formats={formats}
-                                            onChange={(value) =>
-                                              handlebodyChange(value, item)
-                                            }
-                                          />
-                                        </div>
-                                        <button
-                                          type="submit"
-                                          className="op-btn op-btn-primary"
-                                        >
-                                          Resend
-                                        </button>
-                                      </form>
-                                    </div>
-                                  )}
-                                  {Object?.keys(isNextStep) <= 0 && (
-                                    <div className="flex justify-between items-center gap-2 my-2 px-3">
-                                      <div className="text-black">
-                                        {user?.signerPtr?.Name || "-"}{" "}
-                                        {`<${
-                                          user?.email
-                                            ? user.email
-                                            : user.signerPtr.Email
-                                        }>`}
-                                      </div>
-                                      <>{fetchUserStatus(user, item)}</>
-                                    </div>
-                                  )}
-                                </React.Fragment>
-                              ))}
+                                        {props.ReportName === "Templates" && (
+                                          <td className="text-[12px] p-2 pl-3">
+                                            {x.Role && x.Role}
+                                          </td>
+                                        )}
+                                        <td className="text-[12px] p-2 break-all">
+                                          {x.email
+                                            ? x.email
+                                            : x?.signerPtr?.Email || "-"}
+                                        </td>
+                                      </tr>
+                                    ))}
+                                  </tbody>
+                                </table>
+                              </div>
                             </div>
-                          </ModalUi>
-                        )}
-                      </td>
-                    </tr>
-                  )
-                )}
-              </>
-            )}
-          </tbody>
-        </table>
+                          )}
+                          {isDeleteModal[item.objectId] && (
+                            <ModalUi
+                              isOpen
+                              title={"Delete Document"}
+                              handleClose={handleClose}
+                            >
+                              <div className="m-[20px]">
+                                <div className="text-lg font-normal text-black">
+                                  Are you sure you want to delete this document?
+                                </div>
+                                <hr className="bg-[#ccc] mt-4" />
+                                <div className="flex items-center mt-3 gap-2 text-white">
+                                  <button
+                                    onClick={() => handleDelete(item)}
+                                    className="op-btn op-btn-primary"
+                                  >
+                                    Yes
+                                  </button>
+                                  <button
+                                    onClick={handleClose}
+                                    className="op-btn op-btn-secondary"
+                                  >
+                                    No
+                                  </button>
+                                </div>
+                              </div>
+                            </ModalUi>
+                          )}
+                          {isBulkSend[item.objectId] && (
+                            <ModalUi
+                              isOpen
+                              title={"Quick send"}
+                              handleClose={() => setIsBulkSend({})}
+                            >
+                              {isLoader[item.objectId] ? (
+                                <div className="w-full h-[100px] flex justify-center items-center bg-opacity-30 z-30">
+                                  <Loader />
+                                </div>
+                              ) : (
+                                <BulkSendUi
+                                  Placeholders={placeholders}
+                                  item={templateDeatils}
+                                  handleClose={handleQuickSendClose}
+                                />
+                              )}
+                            </ModalUi>
+                          )}
+                          {isShare[item.objectId] && (
+                            <ModalUi
+                              isOpen
+                              title={"Copy link"}
+                              handleClose={() => {
+                                setIsShare({});
+                                setActLoader({});
+                              }}
+                            >
+                              <div className="m-[20px]">
+                                {shareUrls.map((share, i) => (
+                                  <div
+                                    key={i}
+                                    className="text-sm font-normal text-black flex my-2 justify-between items-center"
+                                  >
+                                    <span className="text-sm font-semibold">
+                                      {share.email}
+                                    </span>
+                                    <div>
+                                      <RWebShare
+                                        data={{
+                                          url: share.url,
+                                          title: "Sign url"
+                                        }}
+                                      >
+                                        <button className="bg-[#002864] text-white rounded w-[32px] h-[30px] focus:outline-none">
+                                          <i className="fa-solid fa-share-from-square"></i>{" "}
+                                        </button>
+                                      </RWebShare>
+                                      <button
+                                        className="ml-2 bg-[#002864] text-white rounded w-[100px] h-[30px] focus:outline-none"
+                                        onClick={() => copytoclipboard(share)}
+                                      >
+                                        <i className="fa-solid fa-link"></i>{" "}
+                                        {copied[share.email]
+                                          ? "Copied"
+                                          : "Copy"}
+                                      </button>
+                                    </div>
+                                  </div>
+                                ))}
+                              </div>
+                            </ModalUi>
+                          )}
+                          {isRevoke[item.objectId] && (
+                            <ModalUi
+                              isOpen
+                              title={"Revoke document"}
+                              handleClose={handleClose}
+                            >
+                              <div className="m-[20px]">
+                                <div className="text-lg font-normal text-black">
+                                  Are you sure you want to revoke this document?
+                                </div>
+                                <hr className="bg-[#ccc] mt-4" />
+                                <div className="flex items-center mt-3 gap-2">
+                                  <button
+                                    onClick={() => handleRevoke(item)}
+                                    className="op-btn op-btn-primary"
+                                  >
+                                    Yes
+                                  </button>
+                                  <button
+                                    onClick={handleClose}
+                                    className="op-btn op-btn-secondary"
+                                  >
+                                    No
+                                  </button>
+                                </div>
+                              </div>
+                            </ModalUi>
+                          )}
+                          {isResendMail[item.objectId] && (
+                            <ModalUi
+                              isOpen
+                              title={"Resend Mail"}
+                              handleClose={() => {
+                                setIsResendMail({});
+                                setIsNextStep({});
+                                setUserDetails({});
+                              }}
+                            >
+                              <div className=" overflow-y-auto max-h-[340px] md:max-h-[400px]">
+                                {item?.Placeholders?.map((user) => (
+                                  <React.Fragment key={user.Id}>
+                                    {isNextStep[user.Id] && (
+                                      <div className="relative ">
+                                        {actLoader[user.Id] && (
+                                          <div className="absolute w-full h-full flex justify-center items-center bg-black bg-opacity-30 z-30">
+                                            <Loader />
+                                          </div>
+                                        )}
+                                        <form
+                                          onSubmit={(e) =>
+                                            handleResendMail(e, item, user)
+                                          }
+                                          className="w-full flex flex-col gap-2 p-3 text-base-content relative"
+                                        >
+                                          <div className="absolute right-5 text-xs z-40">
+                                            <Tooltip
+                                              id={`${user.Id}_help`}
+                                              message={
+                                                "You can use following variables which will get replaced with their actual values:- {{document_title}}, {{sender_name}}, {{sender_mail}}, {{sender_phone}}, {{receiver_name}}, {{receiver_email}}, {{receiver_phone}}, {{expiry_date}}, {{company_name}}, {{signing_url}}."
+                                              }
+                                            />
+                                          </div>
+                                          <div>
+                                            <label
+                                              className="text-xs ml-1"
+                                              htmlFor="mailsubject"
+                                            >
+                                              Subject{" "}
+                                            </label>
+                                            <input
+                                              id="mailsubject"
+                                              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                                              value={mail.subject}
+                                              onChange={(e) =>
+                                                handleSubjectChange(
+                                                  e.target.value,
+                                                  item
+                                                )
+                                              }
+                                              required
+                                            />
+                                          </div>
+                                          <div>
+                                            <label
+                                              className="text-xs ml-1"
+                                              htmlFor="mailbody"
+                                            >
+                                              Body{" "}
+                                            </label>
+                                            <EditorToolbar containerId="toolbar1" />
+                                            <ReactQuill
+                                              id="mailbody"
+                                              theme="snow"
+                                              value={mail.body || ""}
+                                              placeholder="add body of email "
+                                              modules={module1}
+                                              formats={formats}
+                                              onChange={(value) =>
+                                                handlebodyChange(value, item)
+                                              }
+                                            />
+                                          </div>
+                                          <button
+                                            type="submit"
+                                            className="op-btn op-btn-primary"
+                                          >
+                                            Resend
+                                          </button>
+                                        </form>
+                                      </div>
+                                    )}
+                                    {Object?.keys(isNextStep) <= 0 && (
+                                      <div className="flex justify-between items-center gap-2 my-2 px-3">
+                                        <div className="text-black">
+                                          {user?.signerPtr?.Name || "-"}{" "}
+                                          {`<${
+                                            user?.email
+                                              ? user.email
+                                              : user.signerPtr.Email
+                                          }>`}
+                                        </div>
+                                        <>{fetchUserStatus(user, item)}</>
+                                      </div>
+                                    )}
+                                  </React.Fragment>
+                                ))}
+                              </div>
+                            </ModalUi>
+                          )}
+                        </td>
+                      </tr>
+                    )
+                  )}
+                </>
+              )}
+            </tbody>
+          </table>
+        </div>
         <div className="op-join flex flex-wrap items-center p-2 ">
           {props.List.length > props.docPerPage && (
             <button
diff --git a/apps/OpenSign/src/primitives/LazyPage.js b/apps/OpenSign/src/primitives/LazyPage.js
index 5d44911e2..689ec3a2e 100644
--- a/apps/OpenSign/src/primitives/LazyPage.js
+++ b/apps/OpenSign/src/primitives/LazyPage.js
@@ -1,11 +1,12 @@
 import React, { Suspense } from "react";
+import Loader from "./Loader";
 
 const LazyPage = ({ Page }) => {
   return (
     <Suspense
       fallback={
-        <div className="flex justify-center items-center h-[100vh] text-[45px] text-[#3dd3e0]">
-          <div className="loader-37"></div>
+        <div className="flex justify-center items-center h-[100vh]">
+          <Loader />
         </div>
       }
     >
diff --git a/apps/OpenSign/src/primitives/Loader.js b/apps/OpenSign/src/primitives/Loader.js
new file mode 100644
index 000000000..dd7070b29
--- /dev/null
+++ b/apps/OpenSign/src/primitives/Loader.js
@@ -0,0 +1,9 @@
+import React from "react";
+
+const Loader = () => {
+  return (
+    <div className="op-loading op-loading-infinity w-[5rem] text-accent"></div>
+  );
+};
+
+export default Loader;
diff --git a/apps/OpenSign/src/primitives/LoaderWithMsg.js b/apps/OpenSign/src/primitives/LoaderWithMsg.js
index d639f651f..77dc971b0 100644
--- a/apps/OpenSign/src/primitives/LoaderWithMsg.js
+++ b/apps/OpenSign/src/primitives/LoaderWithMsg.js
@@ -1,13 +1,14 @@
 import React from "react";
-import loader from "../assets/images/loader2.gif";
+import Loader from "./Loader";
 
-function Loader({ isLoading }) {
+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]" />
+      {/* <img alt="loader" src={loader} className="w-[80px] h-[80px]" /> */}
+      <Loader />
       <span className="text-[13px] text-base-cotent">{isLoading.message}</span>
     </div>
   );
 }
 
-export default Loader;
+export default LoaderWithMsg;
diff --git a/apps/OpenSign/src/primitives/TourContentWithBtn.js b/apps/OpenSign/src/primitives/TourContentWithBtn.js
index f83a9e308..3abfb4f09 100644
--- a/apps/OpenSign/src/primitives/TourContentWithBtn.js
+++ b/apps/OpenSign/src/primitives/TourContentWithBtn.js
@@ -12,22 +12,14 @@ export default function TourContentWithBtn({ message, isChecked }) {
   return (
     <div>
       <p>{message}</p>
-      <label
-        style={{
-          textAlign: "center",
-          display: "flex",
-          justifyContent: "center"
-        }}
-      >
+      <label className="flex items-center justify-center mb-0">
         <input
           type="checkbox"
-          style={{ marginRight: 3 }}
+          className="op-checkbox op-checkbox-xs mr-1"
           checked={isCheck}
           onChange={handleCheck}
-        />{" "}
-        <span style={{ color: "#787878", fontSize: 12 }}>
-          Don&apos;t show this again
-        </span>
+        />
+        <span className="#787878 text-[12px]">Don&apos;t show this again</span>
       </label>
     </div>
   );