diff --git a/apps/OpenSign/src/components/opensigndrive/DriveBody.js b/apps/OpenSign/src/components/opensigndrive/DriveBody.js
index 978ed96d9..0fd22e577 100644
--- a/apps/OpenSign/src/components/opensigndrive/DriveBody.js
+++ b/apps/OpenSign/src/components/opensigndrive/DriveBody.js
@@ -9,7 +9,6 @@ import { useNavigate } from "react-router-dom";
 import Table from "react-bootstrap/Table";
 import * as HoverCard from "@radix-ui/react-hover-card";
 import ModalUi from "../../primitives/ModalUi";
-import { themeColor } from "../../constant/const";
 import FolderModal from "../shared/fields/FolderModal";
 
 function DriveBody(props) {
@@ -567,11 +566,10 @@ function DriveBody(props) {
       )}
       <ModalUi
         isOpen={isDeleteDoc}
-        headerColor={themeColor}
         title={"Delete Document"}
         handleClose={() => setIsDeleteDoc(false)}
       >
-        <div className="h-full p-[20px]">
+        <div className="h-full p-[20px] text-base-content">
           <p>Are you sure you want to delete this document?</p>
           <div className="h-[1px] w-full bg-[#9f9f9f] my-[15px]"></div>
           <button
diff --git a/apps/OpenSign/src/components/pdf/DefaultSignature.js b/apps/OpenSign/src/components/pdf/DefaultSignature.js
index ec2ff9248..0c8a92e36 100644
--- a/apps/OpenSign/src/components/pdf/DefaultSignature.js
+++ b/apps/OpenSign/src/components/pdf/DefaultSignature.js
@@ -1,5 +1,4 @@
 import React from "react";
-import { themeColor } from "../../constant/const";
 function DefaultSignature({ defaultSignImg, xyPostion, setDefaultSignAlert }) {
   const confirmToaddDefaultSign = () => {
     if (xyPostion.length > 0) {
@@ -18,12 +17,7 @@ function DefaultSignature({ defaultSignImg, xyPostion, setDefaultSignAlert }) {
 
   return (
     <div data-tut="reactourThird">
-      <div
-        className="text-white p-[5px] mt-[5px]"
-        style={{
-          background: themeColor
-        }}
-      >
+      <div className="text-base-content font-semibold px-3 py-2 text-[15px] border-b-[1px] border-base-content">
         Signature
       </div>
       <div className="flex flex-col items-center mt-[10px] font-semibold">
diff --git a/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js b/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js
index 1fd68b856..d4408d36a 100644
--- a/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js
+++ b/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js
@@ -236,7 +236,7 @@ function DropdownWidgetOption(props) {
                       className={`${
                         props.isSubscribe || !isEnableSubscription
                           ? ""
-                          : "disabled "
+                          : "pointer-events-none bg-opacity-50"
                       } op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs`}
                     />
                     <label
@@ -257,7 +257,7 @@ function DropdownWidgetOption(props) {
                       className={`${
                         props.isSubscribe || !isEnableSubscription
                           ? ""
-                          : "disabled "
+                          : "pointer-events-none bg-opacity-50"
                       } op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs`}
                     />
                   </>
diff --git a/apps/OpenSign/src/components/pdf/PlaceholderType.js b/apps/OpenSign/src/components/pdf/PlaceholderType.js
index db9da0259..3b78febf6 100644
--- a/apps/OpenSign/src/components/pdf/PlaceholderType.js
+++ b/apps/OpenSign/src/components/pdf/PlaceholderType.js
@@ -425,7 +425,7 @@ function PlaceholderType(props) {
               ? "labelTextArea labelWidthMobile"
               : "labelTextArea labelWidthDesktop"
           }
-          style={{ whiteSpace: "pre-wrap" }}
+          style={{ whiteSpace: "pre-wrap", color: "initial" }}
           cols="50"
         />
       ) : (
@@ -443,7 +443,7 @@ function PlaceholderType(props) {
         <select
           className="inputPlaceholder"
           id="myDropdown"
-          style={{ fontSize: "12px" }}
+          style={{ fontSize: "12px", color: "initial" }}
           value={selectOption}
           onChange={(e) => {
             setSelectOption(e.target.value);
@@ -528,7 +528,7 @@ function PlaceholderType(props) {
               ? "labelTextArea labelWidthMobile"
               : "labelTextArea labelWidthDesktop"
           }
-          style={{ whiteSpace: "pre-wrap" }}
+          style={{ whiteSpace: "pre-wrap", color: "initial" }}
           cols="50"
         />
       ) : (
@@ -567,7 +567,7 @@ function PlaceholderType(props) {
               ? "labelTextArea labelWidthMobile"
               : "labelTextArea labelWidthDesktop"
           }
-          style={{ whiteSpace: "pre-wrap" }}
+          style={{ whiteSpace: "pre-wrap", color: "initial" }}
           cols="50"
         />
       ) : (
@@ -606,7 +606,7 @@ function PlaceholderType(props) {
               ? "labelTextArea labelWidthMobile"
               : "labelTextArea labelWidthDesktop"
           }
-          style={{ whiteSpace: "pre-wrap" }}
+          style={{ whiteSpace: "pre-wrap", color: "initial" }}
           cols="50"
         />
       ) : (
@@ -728,7 +728,7 @@ function PlaceholderType(props) {
               ? "labelTextArea labelWidthMobile"
               : "labelTextArea labelWidthDesktop"
           }
-          style={{ whiteSpace: "pre-wrap" }}
+          style={{ whiteSpace: "pre-wrap", color: "initial" }}
           cols="50"
         />
       ) : (
@@ -800,7 +800,11 @@ function PlaceholderType(props) {
               ? "labelTextArea labelWidthMobile"
               : "labelTextArea labelWidthDesktop"
           }
-          style={{ whiteSpace: "pre-wrap", overflow: "hidden" }}
+          style={{
+            whiteSpace: "pre-wrap",
+            overflow: "hidden",
+            color: "initial"
+          }}
           cols="50"
         />
       );
diff --git a/apps/OpenSign/src/components/pdf/RecipientList.js b/apps/OpenSign/src/components/pdf/RecipientList.js
index 88fb4eb34..e10927cce 100644
--- a/apps/OpenSign/src/components/pdf/RecipientList.js
+++ b/apps/OpenSign/src/components/pdf/RecipientList.js
@@ -7,38 +7,15 @@ import {
   isMobile,
   nameColor
 } from "../../constant/Utils";
-
+const cursor =
+  "cursor-[url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAASElEQVR4nGNgwAMkJSUbpKSkOvCpIaT5PxSTbogUQjMYMwxeIIXmVFIxA8UGDDyQGg0DnIDi6JKUlCxHMqCeZAOghjSAMD5FAKfeaURdUFxCAAAAAElFTkSuQmCC'),_pointer]";
 const RecipientList = (props) => {
   const [animationParent] = useAutoAnimate();
   const [isHover, setIsHover] = useState();
   const [isEdit, setIsEdit] = useState(false);
   //function for onhover signer name change background color
   const inputRef = useRef(null);
-  const onHoverStyle = (ind, blockColor) => {
-    const style = {
-      background: blockColor ? blockColor : color[ind % color.length],
-      padding: "10px",
-      marginTop: "2px",
-      display: "flex",
-      flexDirection: "row",
-      borderRadius: 12,
-      borderBottom: "1px solid #e3e1e1",
-      alignItems: "center"
-    };
-    return style;
-  };
-  //function for onhover signer name remove background color
-  const nonHoverStyle = () => {
-    const style = {
-      padding: "10px",
-      marginTop: "2px",
-      display: "flex",
-      flexDirection: "row",
-      borderBottom: "1px solid #e3e1e1",
-      alignItems: "center"
-    };
-    return style;
-  };
+
   const isWidgetExist = (Id) => {
     return props.signerPos.some((x) => x.Id === Id);
   };
@@ -117,18 +94,21 @@ const RecipientList = (props) => {
               data-tut="reactourFirst"
               onMouseEnter={() => setIsHover(ind)}
               onMouseLeave={() => setIsHover(null)}
-              className={
+              className={`${
                 props.sendInOrder
                   ? props.isMailSend
-                    ? "disabled"
-                    : "dragCursor"
-                  : props.isMailSend && "disabled"
-              }
-              style={
-                (!isMobile && isHover === ind) || props.isSelectListId === ind
-                  ? onHoverStyle(ind, obj?.blockColor)
-                  : nonHoverStyle(ind)
-              }
+                    ? "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`}
+              style={{
+                background:
+                  (!isMobile && isHover === ind) || props.isSelectListId === ind
+                    ? obj?.blockColor
+                      ? obj?.blockColor
+                      : color[ind % color.length]
+                    : "transparent"
+              }}
               onClick={(e) => {
                 e.preventDefault();
                 props.setSignerObjId(obj?.objectId || "");
@@ -144,29 +124,14 @@ const RecipientList = (props) => {
             >
               <div className="flex flex-row items-center w-full">
                 <div
+                  className="flex w-[30px] h-[30px] rounded-full items-center justify-center mr-2"
                   style={{
                     background: obj?.blockColor
                       ? darkenColor(obj?.blockColor, 0.4)
-                      : nameColor[ind % nameColor.length],
-                    width: 30,
-                    height: 30,
-                    display: "flex",
-                    borderRadius: 30 / 2,
-                    justifyContent: "center",
-                    alignItems: "center",
-                    marginRight: "12px"
+                      : nameColor[ind % nameColor.length]
                   }}
                 >
-                  <span
-                    className={props.sendInOrder && "dragCursor"}
-                    style={{
-                      fontSize: "12px",
-                      textAlign: "center",
-                      fontWeight: "bold",
-                      color: "white",
-                      textTransform: "uppercase"
-                    }}
-                  >
+                  <span className="text-white uppercase font-bold text-center text-[12px]">
                     {isWidgetExist(obj.Id) ? (
                       <i className="fa-solid fa-check"></i>
                     ) : (
@@ -179,67 +144,72 @@ const RecipientList = (props) => {
                   </span>
                 </div>
                 <div
-                  style={{
-                    display: "flex",
-                    flexDirection: obj.Name ? "column" : "row",
-                    alignItems: "center"
-                  }}
+                  className={`${
+                    obj?.Name ? "flex-col" : "flex-row"
+                  } flex items-center`}
                 >
                   {obj.Name ? (
-                    <span className={"userName"}>{obj.Name}</span>
+                    <span
+                      className={`${
+                        (!isMobile && isHover === ind) ||
+                        props.isSelectListId === ind
+                          ? "text-[#424242]"
+                          : "text-base-content"
+                      } text-[12px] font-bold w-[100px] whitespace-nowrap overflow-hidden text-ellipsis`}
+                    >
+                      {obj.Name}
+                    </span>
                   ) : (
-                    <>
-                      <span
-                        className="userName"
-                        style={{ cursor: "pointer" }}
-                        onClick={() => {
-                          setIsEdit({ [obj.Id]: true });
-                          props.setRoleName(obj.Role);
-                        }}
-                      >
-                        {isEdit?.[obj.Id] && props.handleRoleChange ? (
-                          <input
-                            ref={inputRef}
-                            style={{
-                              backgroundColor: "transparent",
-                              width: "inherit",
-                              padding: "3px"
-                            }}
-                            value={obj.Role}
-                            onChange={(e) => props.handleRoleChange(e, obj.Id)}
-                            onBlur={() => {
-                              setIsEdit({});
-                              props.handleOnBlur(obj.Role, obj.Id);
-                            }}
-                            onKeyDown={(e) => {
-                              if (e.key === "Enter") {
-                                e.preventDefault();
-                                inputRef.current.blur();
-                              }
-                            }}
-                          />
-                        ) : (
-                          <span style={{ padding: "3px" }}>{obj.Role}</span>
-                        )}
-                      </span>
-                    </>
+                    <span
+                      className={`${
+                        (!isMobile && isHover === ind) ||
+                        props.isSelectListId === ind
+                          ? "text-[#424242]"
+                          : "text-base-content"
+                      } text-[12px] font-bold w-[100px] whitespace-nowrap overflow-hidden text-ellipsis cursor-pointer`}
+                      onClick={() => {
+                        setIsEdit({ [obj.Id]: true });
+                        props.setRoleName(obj.Role);
+                      }}
+                    >
+                      {isEdit?.[obj.Id] && props.handleRoleChange ? (
+                        <input
+                          ref={inputRef}
+                          className="bg-transparent p-[3px"
+                          value={obj.Role}
+                          onChange={(e) => props.handleRoleChange(e, obj.Id)}
+                          onBlur={() => {
+                            setIsEdit({});
+                            props.handleOnBlur(obj.Role, obj.Id);
+                          }}
+                          onKeyDown={(e) => {
+                            if (e.key === "Enter") {
+                              e.preventDefault();
+                              inputRef.current.blur();
+                            }
+                          }}
+                        />
+                      ) : (
+                        <span className="p-[3px]">{obj.Role}</span>
+                      )}
+                    </span>
                   )}
                   {obj.Name && (
-                    <span className={"useEmail"}>
+                    <span
+                      className={` ${
+                        (!isMobile && isHover === ind) ||
+                        props.isSelectListId === ind
+                          ? "text-[#424242]"
+                          : "text-base-content"
+                      } text-[10px] font-medium w-[100px] whitespace-nowrap overflow-hidden text-ellipsis`}
+                    >
                       {obj?.Role || obj?.Email}
                     </span>
                   )}
                 </div>
               </div>
               {isMobile && props.sendInOrder && (
-                <div
-                  style={{
-                    display: "flex",
-                    flexDirection: "row",
-                    alignItems: "center",
-                    gap: 5
-                  }}
-                >
+                <div className="flex flex-row items-center gap-[5px]">
                   <div
                     onClick={(e) => {
                       if (ind !== 0) {
@@ -247,7 +217,7 @@ const RecipientList = (props) => {
                         handleChangeSequence(e, ind, "up");
                       }
                     }}
-                    style={{ color: ind === 0 ? "gray" : "black" }}
+                    className={ind === 0 ? "text-[gray]" : "text-black"}
                   >
                     ▲
                   </div>
@@ -258,10 +228,11 @@ const RecipientList = (props) => {
                         handleChangeSequence(e, ind, null, "down");
                       }
                     }}
-                    style={{
-                      color:
-                        ind === props.signersdata.length - 1 ? "gray" : "black"
-                    }}
+                    className={
+                      ind === props.signersdata.length - 1
+                        ? "text-[gray]"
+                        : "text-black"
+                    }
                   >
                     ▼
                   </div>
@@ -273,7 +244,12 @@ const RecipientList = (props) => {
                     e.stopPropagation();
                     props.handleDeleteUser(obj.Id);
                   }}
-                  style={{ cursor: "pointer", marginLeft: "5px" }}
+                  className={`${
+                    (!isMobile && isHover === ind) ||
+                    props.isSelectListId === ind
+                      ? "text-[#424242]"
+                      : "text-base-content"
+                  } cursor-pointer ml-[5px]`}
                 >
                   <i className="fa-regular fa-trash-can"></i>
                 </div>
diff --git a/apps/OpenSign/src/components/pdf/RenderAllPdfPage.js b/apps/OpenSign/src/components/pdf/RenderAllPdfPage.js
index a55961f9d..02152573e 100644
--- a/apps/OpenSign/src/components/pdf/RenderAllPdfPage.js
+++ b/apps/OpenSign/src/components/pdf/RenderAllPdfPage.js
@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import RSC from "react-scrollbars-custom";
 import { Document, Page } from "react-pdf";
-// import { themeColor } from "../../constant/const";
 
 function RenderAllPdfPage({
   signPdfUrl,
@@ -51,25 +50,9 @@ function RenderAllPdfPage({
   };
   return (
     <div>
-      <div
-        className=" hidden md:flex flex-row bg-base-100 h-full"
-        // style={{
-        //   display: "flex",
-        //   flexDirection: "row",
-        //   boxShadow: "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px",
-        //   backgroundColor: "white",
-        //   height: "100%"
-        // }}
-      >
+      <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 "
-            // style={{
-            //   background: themeColor
-            //   //  color:"white"
-            // }}
-            // className="signedStyle"
-          >
+          <div className="px-3 pt-2 pb-1 text-[15px] text-base-content font-semibold ">
             Pages
           </div>
 
diff --git a/apps/OpenSign/src/components/pdf/SignPad.js b/apps/OpenSign/src/components/pdf/SignPad.js
index 3fd03328a..28db8e815 100644
--- a/apps/OpenSign/src/components/pdf/SignPad.js
+++ b/apps/OpenSign/src/components/pdf/SignPad.js
@@ -78,21 +78,16 @@ function SignPad({
   //save button component
   const SaveBtn = () => {
     return (
-      <div style={{ marginTop: "2px" }}>
+      <div>
         {(isTab === "draw" || isTab === "uploadImage") && (
           <button
-            style={{
-              color: "black",
-              border: "1px solid #ccc"
-            }}
             type="button"
-            className="finishBtn saveBtn"
+            className="op-btn op-btn-ghost mr-1 mt-[2px]"
             onClick={() => handleClear()}
           >
             Clear
           </button>
         )}
-
         <button
           onClick={() => {
             setCurrWidgetsDetails({});
@@ -127,19 +122,12 @@ function SignPad({
             setSignValue("");
             setIsStamp(false);
           }}
-          style={{
-            background: themeColor,
-            color: "white"
-          }}
-          disabled={
-            isSignImg || image || isDefaultSign || textWidth ? false : true
-          }
           type="button"
-          className={
+          className={`${
             isSignImg || image || isDefaultSign || textWidth
-              ? "finishBtn saveBtn"
-              : "disabledFinish saveBtn"
-          }
+              ? ""
+              : "pointer-events-none"
+          } op-btn op-btn-primary shadow-lg`}
         >
           Save
         </button>
@@ -214,8 +202,8 @@ function SignPad({
     const fontfamily = fontStyle
       ? fontStyle
       : fontSelect
-      ? fontSelect
-      : "Fasthand";
+        ? fontSelect
+        : "Fasthand";
 
     //creating span for getting text content width
     const span = document.createElement("span");
@@ -256,7 +244,7 @@ function SignPad({
 
   const PenColorComponent = (props) => {
     return (
-      <div style={{ display: "flex", flexDirection: "row" }}>
+      <div className="flex flex-row items-start">
         {allColor.map((data, key) => {
           return (
             <i
@@ -267,10 +255,10 @@ function SignPad({
                   key === 0 && penColor === "blue"
                     ? "2px solid blue"
                     : key === 1 && penColor === "red"
-                    ? "2px solid red"
-                    : key === 2 && penColor === "black"
-                    ? "2px solid black"
-                    : "2px solid white"
+                      ? "2px solid red"
+                      : key === 2 && penColor === "black"
+                        ? "2px solid black"
+                        : "2px solid white"
               }}
               onClick={() => {
                 props?.convertToImg &&
@@ -296,31 +284,12 @@ function SignPad({
   return (
     <div>
       {isSignPad && (
-        <div className="modaloverlay">
-          <div className="modalcontainer">
-            <div
-              className="modalheader"
-              style={{ padding: "0 13px", marginTop: "5px" }}
-            >
-              <div className="modaltitle">
-                <div
-                  style={{
-                    display: "flex",
-                    flexDirection: "row",
-                    justifyContent: "space-between",
-                    background: "white",
-                    marginTop: "3px"
-                  }}
-                >
-                  <div
-                    style={{
-                      display: "flex",
-                      flexDirection: "row",
-                      justifyContent: "space-around",
-                      alignItems: "end",
-                      gap: 10
-                    }}
-                  >
+        <div className="op-modal op-modal-open">
+          <div className="op-modal-box px-[13px] pt-2 pb-0">
+            <div className="flex justify-between text-base-content items-center">
+              <div className="text-[1.2rem]">
+                <div className="flex flex-row justify-between mt-[3px]">
+                  <div className="flex flex-row justify-between gap-[5px] md:gap-[8px] text-[11px] md:text-base">
                     {isStamp ? (
                       <span style={{ color: themeColor }} className="signTab">
                         {widgetType === "image"
@@ -347,12 +316,11 @@ function SignPad({
                           </span>
 
                           <div
-                            style={{
-                              border:
-                                isTab === "draw"
-                                  ? "1.5px solid #108783"
-                                  : "1.5px solid #ffffff"
-                            }}
+                            className={
+                              isTab === "draw"
+                                ? "border-[1.5px] border-[#108783]"
+                                : "border-[1.5px] border-[#ffffff]"
+                            }
                           ></div>
                         </div>
                         <div>
@@ -372,12 +340,11 @@ function SignPad({
                             Upload Image
                           </span>
                           <div
-                            style={{
-                              border:
-                                isTab === "uploadImage"
-                                  ? "1.5px solid #108783"
-                                  : "1.5px solid #ffffff"
-                            }}
+                            className={
+                              isTab === "uploadImage"
+                                ? "border-[1.5px] border-[#108783]"
+                                : "border-[1.5px] border-[#ffffff]"
+                            }
                           ></div>
                         </div>
                         <div>
@@ -399,12 +366,11 @@ function SignPad({
                           </span>
 
                           <div
-                            style={{
-                              border:
-                                isTab === "type"
-                                  ? "1.5px solid #108783"
-                                  : "1.5px solid #ffffff"
-                            }}
+                            className={
+                              isTab === "type"
+                                ? "border-[1.5px] border-[#108783]"
+                                : "border-[1.5px] border-[#ffffff]"
+                            }
                           ></div>
                         </div>
                         {!isInitial && defaultSign ? (
@@ -428,12 +394,11 @@ function SignPad({
                               My Signature
                             </span>
                             <div
-                              style={{
-                                border:
-                                  isTab === "mysignature"
-                                    ? "1.5px solid #108783"
-                                    : "1.5px solid #ffffff"
-                              }}
+                              className={
+                                isTab === "mysignature"
+                                  ? "border-[1.5px] border-[#108783]"
+                                  : "border-[1.5px] border-[#ffffff]"
+                              }
                             ></div>
                           </div>
                         ) : (
@@ -459,12 +424,11 @@ function SignPad({
                                 My Initials
                               </span>
                               <div
-                                style={{
-                                  border:
-                                    isTab === "mysignature"
-                                      ? "1.5px solid #108783"
-                                      : "1.5px solid #ffffff"
-                                }}
+                                className={
+                                  isTab === "mysignature"
+                                    ? "border-[1.5px] border-[#108783]"
+                                    : "border-[1.5px] border-[#ffffff]"
+                                }
                               ></div>
                             </div>
                           )
@@ -475,8 +439,7 @@ function SignPad({
                 </div>
               </div>
               <div
-                className="closebtn"
-                style={{ color: "black" }}
+                className="text-[1.5rem] cursor-pointer"
                 onClick={() => {
                   setPenColor("blue");
                   setIsSignPad(false);
@@ -493,10 +456,10 @@ function SignPad({
                 &times;
               </div>
             </div>
-            <div style={{ height: "100%", padding: 20 }}>
+            <div className="p-[20px] h-full">
               {isDefaultSign ? (
                 <>
-                  <div style={{ display: "flex", justifyContent: "center" }}>
+                  <div className="flex justify-center">
                     <div
                       style={{
                         border: "1.3px solid #007bff",
@@ -514,24 +477,19 @@ function SignPad({
                     >
                       <img
                         alt="stamp img"
-                        style={{
-                          width: "100%",
-                          height: "100%",
-                          background: "rgb(255, 255, 255)",
-                          objectFit: "contain"
-                        }}
+                        className="w-full h-full object-contain bg-white"
                         draggable="false"
                         src={isInitial ? myInitial : defaultSign}
                       />
                     </div>
                   </div>
-                  <div style={{ display: "flex", justifyContent: "flex-end" }}>
+                  <div className="flex justify-end">
                     <SaveBtn />
                   </div>
                 </>
               ) : isImageSelect || isStamp ? (
                 !image ? (
-                  <div style={{ display: "flex", justifyContent: "center" }}>
+                  <div className="flex justify-center">
                     <div
                       style={{
                         border: "1.3px solid #007bff",
@@ -562,7 +520,7 @@ function SignPad({
                   </div>
                 ) : (
                   <>
-                    <div style={{ display: "flex", justifyContent: "center" }}>
+                    <div className="flex justify-center">
                       <div
                         style={{
                           border: "1.3px solid #007bff",
@@ -581,39 +539,26 @@ function SignPad({
                           ref={imageRef}
                           src={image.src}
                           draggable="false"
-                          style={{
-                            objectFit: "contain",
-                            height: "100%",
-                            width: "100%"
-                          }}
+                          className=" object-contain h-full w-full"
                         />
                       </div>
                     </div>
-                    <div
-                      style={{ display: "flex", justifyContent: "flex-end" }}
-                    >
+                    <div className="flex justify-end">
                       <SaveBtn />
                     </div>
                   </>
                 )
               ) : isTab === "type" ? (
                 <div>
-                  <div
-                    style={{
-                      display: "flex",
-                      justifyContent: "space-between",
-                      alignItems: "center"
-                    }}
-                  >
+                  <div className="flex justify-between items-center">
                     <span className="signatureText">
                       {isInitial ? "Initials" : "Signature"}:
                     </span>
-
                     <input
                       maxLength={isInitial ? 3 : 30}
                       style={{ fontFamily: fontSelect, color: penColor }}
                       type="text"
-                      className="signatureInput"
+                      className="ml-1 op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-[20px]"
                       placeholder="Your signature"
                       value={signValue}
                       onChange={(e) => {
@@ -622,7 +567,6 @@ function SignPad({
                       }}
                     />
                   </div>
-
                   <div className="fontOptionContainer">
                     {fontOptions.map((font, ind) => {
                       return (
@@ -653,21 +597,14 @@ function SignPad({
                     })}
                   </div>
 
-                  <div
-                    style={{
-                      display: "flex",
-                      flexDirection: "row",
-                      justifyContent: "space-between",
-                      marginTop: "10px"
-                    }}
-                  >
+                  <div className="flex flex-row justify-between mt-[10px]">
                     <PenColorComponent convertToImg={convertToImg} />
                     <SaveBtn />
                   </div>
                 </div>
               ) : (
                 <>
-                  <div style={{ display: "flex", justifyContent: "center" }}>
+                  <div className="flex justify-center">
                     <SignatureCanvas
                       ref={canvasRef}
                       penColor={penColor}
@@ -687,14 +624,7 @@ function SignPad({
                       dotSize={1}
                     />
                   </div>
-                  <div
-                    style={{
-                      display: "flex",
-                      flexDirection: "row",
-                      justifyContent: "space-between",
-                      marginTop: "10px"
-                    }}
-                  >
+                  <div className="flex flex-row justify-between mt-[10px]">
                     <PenColorComponent />
                     <SaveBtn />
                   </div>
diff --git a/apps/OpenSign/src/components/pdf/Signedby.js b/apps/OpenSign/src/components/pdf/Signedby.js
index 4728e095b..1bcaa3116 100644
--- a/apps/OpenSign/src/components/pdf/Signedby.js
+++ b/apps/OpenSign/src/components/pdf/Signedby.js
@@ -1,5 +1,4 @@
 import React from "react";
-import { themeColor } from "../../constant/const";
 import "../../styles/signature.css";
 function Signedby({ pdfDetails }) {
   const getFirstLetter = (name) => {
@@ -8,50 +7,18 @@ function Signedby({ pdfDetails }) {
   };
 
   return (
-    <div className="signerComponent">
-      <div
-        style={{
-          background: themeColor,
-          color: "white"
-        }}
-        className="signedStyle"
-      >
+    <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">
         Signed By
       </div>
-      <div style={{ marginTop: "2px", background: "white" }}>
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "row",
-            padding: "10px",
-            background: "#93a3db"
-          }}
-        >
-          <div
-            className="signerStyle"
-            style={{
-              background: "#abd1d0",
-              width: 20,
-              height: 20,
-              display: "flex",
-              borderRadius: 30 / 2,
-              justifyContent: "center",
-              alignItems: "center",
-              marginRight: "20px",
-              marginTop: "5px"
-            }}
-          >
-            <span
-              style={{
-                fontSize: "8px",
-                textAlign: "center",
-                fontWeight: "bold"
-              }}
-            >
+      <div className="mt-[2px] bg-base-100">
+        <div className="bg-[#93a3db] rounded-xl mx-1 flex flex-row items-center py-[10px]">
+          <div className="bg-[#576081] flex w-[30px] h-[30px] rounded-full justify-center items-center mx-1">
+            <span className="text-[12px] text-center font-bold text-white uppercase">
               {getFirstLetter(pdfDetails.ExtUserPtr.Name)}
             </span>
           </div>
-          <div style={{ display: "flex", flexDirection: "column" }}>
+          <div className="flex flex-col">
             <span className="userName">{pdfDetails.ExtUserPtr.Name}</span>
             <span className="useEmail">{pdfDetails.ExtUserPtr.Email}</span>
           </div>
diff --git a/apps/OpenSign/src/components/pdf/SignerListPlace.js b/apps/OpenSign/src/components/pdf/SignerListPlace.js
index 6ec80773a..aad88dbb0 100644
--- a/apps/OpenSign/src/components/pdf/SignerListPlace.js
+++ b/apps/OpenSign/src/components/pdf/SignerListPlace.js
@@ -1,5 +1,4 @@
 import React from "react";
-// import { themeColor } from "../../constant/const";
 import RecipientList from "./RecipientList";
 import { Tooltip } from "react-tooltip";
 
@@ -57,27 +56,29 @@ function SignerListPlace(props) {
       <div className="overflow-auto hide-scrollbar max-h-[180px]">
         <RecipientList {...props} />
       </div>
-      {props.handleAddSigner ? (
-        <div
-          role="button"
-          data-tut="reactourAddbtn"
-          className="op-btn op-btn-primary op-btn-outline w-full my-[2px]"
-          disabled={props?.isMailSend ? true : false}
-          onClick={() => props.handleAddSigner()}
-        >
-          <i className="fa-solid fa-plus"></i> Add role
-        </div>
-      ) : (
-        <div
-          role="button"
-          data-tut="reactourAddbtn"
-          className="op-btn op-btn-primary op-btn-outline w-full my-[2px]"
-          disabled={props?.isMailSend ? true : false}
-          onClick={() => props.setIsAddSigner(true)}
-        >
-          <i className="fa-solid fa-plus"></i> Add recipients
-        </div>
-      )}
+      <div className="mx-1">
+        {props.handleAddSigner ? (
+          <div
+            role="button"
+            data-tut="reactourAddbtn"
+            className="op-btn op-btn-primary op-btn-outline w-full my-[2px]"
+            disabled={props?.isMailSend ? true : false}
+            onClick={() => props.handleAddSigner()}
+          >
+            <i className="fa-solid fa-plus"></i> Add role
+          </div>
+        ) : (
+          <div
+            role="button"
+            data-tut="reactourAddbtn"
+            className="op-btn op-btn-primary op-btn-outline w-full my-[2px]"
+            disabled={props?.isMailSend ? true : false}
+            onClick={() => props.setIsAddSigner(true)}
+          >
+            <i className="fa-solid fa-plus"></i> Add recipients
+          </div>
+        )}
+      </div>
     </div>
   );
 }
diff --git a/apps/OpenSign/src/components/pdf/WidgetComponent.js b/apps/OpenSign/src/components/pdf/WidgetComponent.js
index bd1814fc2..370ce4ae3 100644
--- a/apps/OpenSign/src/components/pdf/WidgetComponent.js
+++ b/apps/OpenSign/src/components/pdf/WidgetComponent.js
@@ -9,7 +9,6 @@ import {
   textWidget,
   widgets
 } from "../../constant/Utils";
-import { themeColor } from "../../constant/const";
 function WidgetComponent({
   dragSignature,
   signRef,
@@ -259,36 +258,18 @@ function WidgetComponent({
             {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],
-                  padding: "10px 20px",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center"
+                      : color[0]
                 }}
                 onClick={() => handleModal()}
               >
-                <span
-                  style={{
-                    fontSize: "13px",
-                    fontWeight: "700",
-                    textAlign: "center"
-                  }}
-                >
+                <span className="text-[13px] font-bold flex items-center">
                   {title ? title : "Recipient"}
-                </span>
-                <span
-                  style={{
-                    fontSize: "13px",
-                    fontWeight: "700",
-                    display: "flex",
-                    alignItems: "center"
-                  }}
-                >
                   {signersdata[isSelectListId]?.Role && (
                     <div>
                       {signersdata[isSelectListId]?.Name ? (
@@ -314,7 +295,7 @@ function WidgetComponent({
                       )}
                     </div>
                   )}
-                  <div style={{ marginLeft: 6, fontSize: 16 }}>
+                  <div className="ml-[6px] text-[16px]">
                     <i className="fa-solid fa-angle-down"></i>
                   </div>
                 </span>
@@ -333,25 +314,19 @@ function WidgetComponent({
               setIsAddSigner && (
                 <div
                   data-tut="reactourAddbtn"
-                  style={{
-                    margin: "5px 0 5px 0",
-                    backgroundColor: themeColor,
-                    color: "white"
-                  }}
-                  className="p-[10px] my-[2px] flex flex-row items-center justify-center border-[1px] border-[#47a3ad] hover:bg-[#47a3ad] text-[#47a3ad] hover:text-white cursor-pointer"
+                  className="op-btn op-btn-primary w-full my-[2px]"
                   onClick={() => setIsAddSigner(true)}
                 >
                   <i className="fa-solid fa-plus"></i>
-                  <span style={{ marginLeft: 2 }}>Add recipients</span>
+                  <span>Add recipients</span>
                 </div>
               )
             )}
-
             <div
               ref={scrollContainerRef}
               className="bg-white border-[2px] border-t-primary"
             >
-              <div className="flex whitespace-nowrap overflow-x-scroll py-[10px] pr-[5px]">
+              <div className="flex whitespace-nowrap overflow-x-scroll pt-[10px] pb-[5px] pr-[5px]">
                 <WidgetList
                   updateWidgets={updateWidgets}
                   handleDivClick={handleDivClick}
@@ -368,26 +343,13 @@ function WidgetComponent({
       ) : (
         <div
           data-tut={dataTut}
-          className={
-            isMailSend ? "disabled signerComponent " : "signerComponent"
-          }
-          // className="bg-base-100"
+          className={`${
+            isMailSend ? "bg-opacity-50 pointer-events-none" : ""
+          } hidden md:block w-[180px] h-full bg-base-100`}
         >
-          <div
-            // style={{
-            //   background: themeColor,
-            //   padding: "5px"
-            // }}
-            className="text-base-content px-3 py-2 text-[15px] border-y-[1px] border-base-content"
-          >
-            <span
-            // className="signedStyle"
-            >
-              Fields
-            </span>
+          <div className="text-base-content px-3 py-2 text-[15px] border-b-[1px] border-base-content">
+            <span>Fields</span>
           </div>
-
-          {/* <div className="flex flex-col w-full h-auto my-3 items-center"> */}
           <div className="flex flex-col items-center my-3">
             <WidgetList
               updateWidgets={updateWidgets}
@@ -405,7 +367,7 @@ function WidgetComponent({
           handleClose={handleModal}
         >
           {signersdata.length > 0 ? (
-            <div style={{ maxHeight: "600px", overflow: "auto" }}>
+            <div className="max-h-[600px] overflow-auto pb-1">
               <RecipientList
                 signerPos={signerPos}
                 signersdata={signersdata}
@@ -425,14 +387,7 @@ function WidgetComponent({
               />
             </div>
           ) : (
-            <div
-              style={{
-                padding: 20,
-                fontSize: 15,
-                fontWeight: "500",
-                textAlign: "center"
-              }}
-            >
+            <div className=" p-[20px] text-[15px] font-medium text-center">
               Please add a {title ? title : "recipients"}
             </div>
           )}
diff --git a/apps/OpenSign/src/pages/Login.js b/apps/OpenSign/src/pages/Login.js
index 86bd9369f..4a4109c74 100644
--- a/apps/OpenSign/src/pages/Login.js
+++ b/apps/OpenSign/src/pages/Login.js
@@ -1158,17 +1158,20 @@ function Login() {
                       >
                         {state.loading ? "Loading..." : "Login"}
                       </button>
-                      <NavLink
-                        className="op-btn op-btn-secondary hover:no-underline hover:text-base-content"
-                        to={
-                          location.search
-                            ? "/signup" + location.search
-                            : "/signup"
+                      <button
+                        type="button"
+                        className="op-btn op-btn-secondary"
+                        disabled={state.loading}
+                        onClick={() =>
+                          navigate(
+                            location.search
+                              ? "/signup" + location.search
+                              : "/signup"
+                          )
                         }
-                        style={width < 768 ? { textAlign: "center" } : {}}
                       >
                         Create Account
-                      </NavLink>
+                      </button>
                     </div>
                   </form>
                   {(appInfo.googleClietId || isEnableSubscription) && (
diff --git a/apps/OpenSign/src/pages/Opensigndrive.js b/apps/OpenSign/src/pages/Opensigndrive.js
index 0637e6526..1cfc22cd0 100644
--- a/apps/OpenSign/src/pages/Opensigndrive.js
+++ b/apps/OpenSign/src/pages/Opensigndrive.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef } from "react";
 import "../styles/opensigndrive.css";
 import loader from "../assets/images/loader2.gif";
-import { themeColor, iconColor } from "../constant/const";
+import { iconColor } from "../constant/const";
 import { getDrive } from "../constant/Utils";
 import { useNavigate } from "react-router-dom";
 import Title from "../components/Title";
@@ -16,21 +16,8 @@ const DriveBody = React.lazy(
 );
 const Loader = () => {
   return (
-    <div
-      style={{
-        height: "100vh",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center"
-      }}
-    >
-      <div
-        style={{
-          fontSize: "45px",
-          color: "#3dd3e0"
-        }}
-        className="loader-37"
-      ></div>
+    <div className="h-[100vh] flex justify-center items-center text-[45px] text-[#3dd3e0] ">
+      <div className="loader-37"></div>
     </div>
   );
 };
@@ -451,21 +438,10 @@ function Opensigndrive() {
         <React.Fragment key={id}>
           <span
             onClick={() => handleRoute(id, folderData)}
-            style={{
-              color: "#a64b4e",
-              fontWeight: "400",
-              cursor: "pointer"
-            }}
+            className="text-[#a64b4e] font-normal cursor-pointer"
           >
             {data.name}
-            <span
-              style={{
-                color: "#a64b4e",
-                fontWeight: "200",
-                cursor: "pointer",
-                margin: "0 4px"
-              }}
-            >
+            <span className="text-[#a64b4e] font-extralight cursor-pointer mx-[4px]">
               &gt;
             </span>
           </span>
@@ -549,7 +525,6 @@ function Opensigndrive() {
     <div className="bg-base-100 text-base-content rounded-xl w-full">
       <Title title={"OpenSign™ Drive"} drive={true} />
       <ModalUi
-        headerColor={"#dc3545"}
         isOpen={isAlert.isShow}
         title={"Alert"}
         handleClose={() => {
@@ -604,26 +579,14 @@ function Opensigndrive() {
                 onChange={(e) => handleFolderName(e)}
               />
               <span className="text-[red] text-[12px] mt-[6px]">{error}</span>
-              <div
-                style={{
-                  height: "1px",
-                  backgroundColor: "#9f9f9f",
-                  width: "100%",
-                  marginTop: "15px",
-                  marginBottom: "15px"
-                }}
-              ></div>
-              <div style={{ display: "flex", flexDirection: "row" }}>
-                <button
-                  style={{ background: themeColor }}
-                  type="submit"
-                  className="finishBtn"
-                >
+              <div className="w-full h-[1px] bg-[#9f9f9f] my-[15px]"></div>
+              <div className="flex flex-row">
+                <button type="submit" className="op-btn op-btn-primary">
                   Add
                 </button>
                 <button
                   type="button"
-                  className="finishBtn cancelBtn"
+                  className="op-btn op-btn-ghost ml-1"
                   onClick={oncloseFolder}
                 >
                   Close
@@ -688,32 +651,22 @@ function Opensigndrive() {
                       className="dropdown-item itemColor"
                       onClick={() => setIsFolder(true)}
                     >
-                      <i
-                        style={{ marginRight: "5px" }}
-                        className="fa fa-plus"
-                        aria-hidden="true"
-                      ></i>
+                      <i className="fa fa-plus mr-[5px]" aria-hidden="true"></i>
                       Create folder
                     </span>
                     <span
                       className="dropdown-item itemColor"
                       onClick={() => navigate("/form/sHAnZphf69")}
                     >
-                      <i
-                        style={{ marginRight: "5px" }}
-                        className="fas fa-pen-nib"
-                      ></i>
+                      <i className="fas fa-pen-nib mr-[5px"></i>
                       Sign Yourself
                     </span>
                     <span
                       className="dropdown-item itemColor"
                       onClick={() => navigate("/form/8mZzFxbG1z")}
                     >
-                      <i
-                        style={{ marginRight: "5px" }}
-                        className="fa fa-file-signature"
-                      ></i>
-                      Request Signatures{" "}
+                      <i className="fa fa-file-signature mr-[5px"></i>
+                      Request Signatures
                     </span>
                   </div>
                 </div>
@@ -725,24 +678,15 @@ function Opensigndrive() {
               >
                 <div
                   data-tut="reactourThird"
-                  className=" sort  "
+                  className="sort "
                   data-toggle="dropdown"
                 >
                   <i
-                    className="fa fa-sort-amount-asc"
+                    className="fa fa-sort-amount-asc mr-[5px] text-[14px]"
                     aria-hidden="true"
-                    style={{
-                      marginRight: "5px",
-                      fontSize: "14px",
-                      color: `${iconColor}`
-                    }}
+                    style={{ color: `${iconColor}` }}
                   ></i>
-                  <span
-                    style={{
-                      fontSize: "15px",
-                      color: `${iconColor}`
-                    }}
-                  >
+                  <span style={{ fontSize: "15px", color: `${iconColor}` }}>
                     {selectedSort}
                   </span>
                 </div>
@@ -768,9 +712,8 @@ function Opensigndrive() {
                       >
                         {selectedSort === value && (
                           <i
-                            className="fa fa-check"
+                            className="fa fa-check mr-[5px"
                             aria-hidden="true"
-                            style={{ marginRight: "5px" }}
                           ></i>
                         )}
                         {value}
@@ -794,9 +737,8 @@ function Opensigndrive() {
                       >
                         {sortingOrder === order && (
                           <i
-                            className="fa fa-check"
+                            className="fa fa-check mr-[5px"
                             aria-hidden="true"
-                            style={{ marginRight: "5px" }}
                           ></i>
                         )}
                         {order}
@@ -834,16 +776,10 @@ function Opensigndrive() {
           </div>
 
           {pdfData && pdfData.length === 0 ? (
-            <div
-              style={{
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                height: "50vh",
-                width: "100%"
-              }}
-            >
-              <span style={{ fontWeight: "bold" }}>No Data Found!</span>
+            <div className="flex justify-center items-center w-full h-[50vh]">
+              <span className="text-base-content font-bold">
+                No Data Found!
+              </span>
             </div>
           ) : (
             <div data-tut="reactourFifth">
diff --git a/apps/OpenSign/src/pages/PdfRequestFiles.js b/apps/OpenSign/src/pages/PdfRequestFiles.js
index 0573fc649..ba2fb66fd 100644
--- a/apps/OpenSign/src/pages/PdfRequestFiles.js
+++ b/apps/OpenSign/src/pages/PdfRequestFiles.js
@@ -1161,9 +1161,9 @@ function PdfRequestFiles() {
 
     await axios
       .put(
-        `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
-          "_appName"
-        )}_Document/${documentId}`,
+        `${localStorage.getItem(
+          "baseUrl"
+        )}classes/contracts_Document/${documentId}`,
         data,
         {
           headers: {
@@ -1394,32 +1394,19 @@ function PdfRequestFiles() {
           ) : (
             <div>
               {isUiLoading && (
-                <div
-                  style={{
-                    position: "absolute",
-                    height: "100vh",
-                    width: "100%",
-                    display: "flex",
-                    justifyContent: "center",
-                    flexDirection: "column",
-                    alignItems: "center",
-                    zIndex: "999",
-                    backgroundColor: "#e6f2f2",
-                    opacity: 0.8
-                  }}
-                >
+                <div className="absolute h-[100vh] w-full flex flex-col justify-center items-center z-[999] bg-[#e6f2f2] bg-opacity-80">
                   <img
-                    alt="no img"
+                    alt="loader"
                     src={loader}
-                    style={{ width: "100px", height: "100px" }}
+                    className="w-[100px] h-[100px]"
                   />
-                  <span style={{ fontSize: "13px", fontWeight: "bold" }}>
+                  <span className="text-[13px] font-bold">
                     This might take some time
                   </span>
                 </div>
               )}
               {isCelebration && (
-                <div style={{ position: "relative", zIndex: "1000" }}>
+                <div className="relative z-[1000]">
                   <Confetti
                     width={window.innerWidth}
                     height={window.innerHeight}
@@ -1428,7 +1415,7 @@ function PdfRequestFiles() {
               )}
 
               <div
-                className="relative flex flex-col md:flex-row justify-between bg-[#ebebeb]"
+                className="relative op-card overflow-hidden flex flex-col md:flex-row justify-between bg-base-300"
                 style={{
                   pointerEvents:
                     isExpired ||
@@ -1440,7 +1427,6 @@ function PdfRequestFiles() {
               >
                 {!requestSignTour && requestSignTourFunction()}
                 <ModalUi
-                  headerColor={"#dc3545"}
                   isOpen={isAlert.isShow}
                   title={"Alert message"}
                   handleClose={() => {
@@ -1450,28 +1436,15 @@ function PdfRequestFiles() {
                     });
                   }}
                 >
-                  <div style={{ height: "100%", padding: 20 }}>
+                  <div className="h-full p-[20px]">
                     <p>{isAlert.alertMessage}</p>
-
-                    <div
-                      style={{
-                        height: "1px",
-                        backgroundColor: "#9f9f9f",
-                        width: "100%",
-                        marginTop: "15px",
-                        marginBottom: "15px"
-                      }}
-                    ></div>
-
+                    <div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
                     <button
-                      onClick={() => {
-                        setIsAlert({
-                          isShow: false,
-                          alertMessage: ""
-                        });
-                      }}
+                      onClick={() =>
+                        setIsAlert({ isShow: false, alertMessage: "" })
+                      }
                       type="button"
-                      className="finishBtn cancelBtn"
+                      className="op-btn op-btn-primary"
                     >
                       Ok
                     </button>
@@ -1525,63 +1498,44 @@ function PdfRequestFiles() {
                 )}
 
                 <ModalUi
-                  headerColor={defaultSignImg ? themeColor : "#dc3545"}
                   isOpen={defaultSignAlert.isShow}
                   title={"Auto sign"}
-                  handleClose={() => {
-                    setDefaultSignAlert({
-                      isShow: false,
-                      alertMessage: ""
-                    });
-                  }}
+                  handleClose={() =>
+                    setDefaultSignAlert({ isShow: false, alertMessage: "" })
+                  }
                 >
-                  <div style={{ height: "100%", padding: 20 }}>
+                  <div className="h-full p-[20px]">
                     <p>{defaultSignAlert.alertMessage}</p>
-
-                    <div
-                      style={{
-                        height: "1px",
-                        backgroundColor: "#9f9f9f",
-                        width: "100%",
-                        marginTop: "15px",
-                        marginBottom: "15px"
-                      }}
-                    ></div>
+                    <div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
                     {defaultSignImg ? (
                       <>
                         <button
                           onClick={() => addDefaultSignature()}
-                          style={{
-                            background: themeColor
-                          }}
                           type="button"
-                          className="finishBtn"
+                          className="op-btn op-btn-primary"
                         >
                           Yes
                         </button>
                         <button
-                          onClick={() => {
+                          onClick={() =>
                             setDefaultSignAlert({
                               isShow: false,
                               alertMessage: ""
-                            });
-                          }}
+                            })
+                          }
                           type="button"
-                          className="finishBtn cancelBtn"
+                          className="op-btn op-btn-secondary"
                         >
                           Close
                         </button>
                       </>
                     ) : (
                       <button
-                        onClick={() => {
-                          setIsAlert({
-                            isShow: false,
-                            alertMessage: ""
-                          });
-                        }}
+                        onClick={() =>
+                          setIsAlert({ isShow: false, alertMessage: "" })
+                        }
                         type="button"
-                        className="finishBtn cancelBtn"
+                        className="op-btn op-btn-primary"
                       >
                         Ok
                       </button>
@@ -1621,7 +1575,7 @@ function PdfRequestFiles() {
                       "md:min-w-[440px] md:max-w-[400px]"
                     }
                   >
-                    <div style={{ height: "100%", padding: 20 }}>
+                    <div className="h-full p-[20px] text-base-content">
                       {isCompleted?.message ? (
                         <p>{isCompleted?.message}</p>
                       ) : (
@@ -1642,32 +1596,27 @@ function PdfRequestFiles() {
                                 setIsDownloading
                               )
                             }
-                            className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#08bc66]"
+                            className="font-[500] text-[13px] mr-[5px] op-btn op-btn-secondary"
                           >
                             <i
-                              className="fa-solid fa-award py-[3px]"
+                              className="fa-solid fa-award"
                               aria-hidden="true"
                             ></i>
-                            <span className="hidden lg:block ml-1">
-                              Certificate
-                            </span>
+                            <span className="hidden lg:block">Certificate</span>
                           </button>
                           <button
                             onClick={(e) =>
                               handleToPrint(e, pdfUrl, setIsDownloading)
                             }
                             type="button"
-                            className="flex flex-row items-center  shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#188ae2]"
+                            className="font-[500] text-[13px] mr-[5px] op-btn op-btn-neutral"
                           >
-                            <i
-                              className="fa fa-print py-[3px]"
-                              aria-hidden="true"
-                            ></i>
-                            <span className="hidden lg:block ml-1">Print</span>
+                            <i className="fa fa-print" aria-hidden="true"></i>
+                            <span className="hidden lg:block">Print</span>
                           </button>
                           <button
                             type="button"
-                            className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#f14343]"
+                            className="font-[500] text-[13px] mr-[5px] op-btn op-btn-primary"
                             onClick={() =>
                               handleDownloadPdf(
                                 pdfDetails,
@@ -1677,23 +1626,18 @@ function PdfRequestFiles() {
                             }
                           >
                             <i
-                              className="fa fa-download py-[3px]"
+                              className="fa fa-download"
                               aria-hidden="true"
                             ></i>
-                            <span className="hidden lg:block ml-1">
-                              Download
-                            </span>
+                            <span className="hidden lg:block">Download</span>
                           </button>
                         </div>
                       )}
                     </div>
                   </ModalUi>
                   {isDownloading === "pdf" && (
-                    <div className="fixed z-[1000] inset-0 flex justify-center items-center bg-black bg-opacity-30">
-                      <div
-                        style={{ fontSize: "45px", color: "#3dd3e0" }}
-                        className="loader-37"
-                      ></div>
+                    <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>
                   )}
                   <ModalUi
@@ -1789,63 +1733,37 @@ function PdfRequestFiles() {
                   )}
                 </div>
                 <div>
-                  <div className="signerComponent">
+                  <div className="hidden md:block w-[180px] h-full bg-base-100">
                     <div
                       style={{ maxHeight: window.innerHeight - 70 + "px" }}
-                      className="autoSignScroll"
+                      className="overflow-y-auto hide-scrollbar"
                     >
                       {signedSigners.length > 0 && (
                         <div data-tut="reactourSecond">
-                          <div
-                            style={{ background: themeColor }}
-                            className="signedStyle"
-                          >
+                          <div className="px-3 pt-2 pb-1 text-[15px] text-base-content font-semibold">
                             Signed by
                           </div>
-                          <div style={{ marginTop: "2px" }}>
+                          <div className="mt-[2px]">
                             {signedSigners.map((obj, ind) => {
                               return (
                                 <div
+                                  className="rounded-xl mx-1 flex flex-row items-center py-[10px]"
                                   style={{
-                                    display: "flex",
-                                    flexDirection: "row",
-                                    alignItems: "center",
-                                    padding: "10px 0",
                                     background: checkSignerBackColor(obj)
                                   }}
                                   key={ind}
                                 >
                                   <div
-                                    className="signerStyle"
+                                    className="flex w-[30px] h-[30px] rounded-full justify-center items-center mx-1"
                                     style={{
-                                      background: checkUserNameColor(obj),
-                                      width: 30,
-                                      height: 30,
-                                      display: "flex",
-                                      borderRadius: 30 / 2,
-                                      justifyContent: "center",
-                                      alignItems: "center",
-                                      margin: "0 10px 0 5px"
+                                      background: checkUserNameColor(obj)
                                     }}
                                   >
-                                    <span
-                                      style={{
-                                        fontSize: "12px",
-                                        textAlign: "center",
-                                        fontWeight: "bold",
-                                        color: "black",
-                                        textTransform: "uppercase"
-                                      }}
-                                    >
+                                    <span className="text-[12px] text-center font-bold text-white uppercase">
                                       {getFirstLetter(obj?.Name || obj?.Role)}
                                     </span>
                                   </div>
-                                  <div
-                                    style={{
-                                      display: "flex",
-                                      flexDirection: "column"
-                                    }}
-                                  >
+                                  <div className="flex flex-col">
                                     <span className="userName">
                                       {obj?.Name || obj?.Role}
                                     </span>
@@ -1863,60 +1781,35 @@ function PdfRequestFiles() {
                       {unsignedSigners.length > 0 && (
                         <div data-tut="reactourFirst">
                           <div
-                            style={{
-                              background: themeColor,
-                              color: "white",
-                              padding: "5px",
-                              fontFamily: "sans-serif",
-                              marginTop: signedSigners.length > 0 && "20px"
-                            }}
+                            className={`${
+                              signedSigners?.length > 0
+                                ? "border-b-[1px] border-base-content"
+                                : ""
+                            } px-3 pt-2 pb-1 text-[15px] text-base-content font-semibold`}
                           >
                             Yet to sign
                           </div>
-                          <div style={{ marginTop: "5px" }}>
+                          <div className="mt-[5px]">
                             {unsignedSigners.map((obj, ind) => {
                               return (
                                 <div
+                                  className="rounded-xl mx-1 flex flex-row items-center py-[10px]"
                                   style={{
-                                    display: "flex",
-                                    flexDirection: "row",
-                                    alignItems: "center",
-                                    padding: "10px 0",
                                     background: checkSignerBackColor(obj)
                                   }}
                                   key={ind}
                                 >
                                   <div
-                                    className="signerStyle"
+                                    className="flex w-[30px] h-[30px] rounded-full justify-center items-center mx-1"
                                     style={{
-                                      background: checkUserNameColor(obj),
-                                      width: 30,
-                                      height: 30,
-                                      display: "flex",
-                                      borderRadius: 30 / 2,
-                                      justifyContent: "center",
-                                      alignItems: "center",
-                                      margin: "0 10px 0 5px"
+                                      background: checkUserNameColor(obj)
                                     }}
                                   >
-                                    <span
-                                      style={{
-                                        fontSize: "12px",
-                                        textAlign: "center",
-                                        fontWeight: "bold",
-                                        color: "black",
-                                        textTransform: "uppercase"
-                                      }}
-                                    >
+                                    <span className="text-[12px] text-center font-bold text-black uppercase">
                                       {getFirstLetter(obj?.Name || obj?.email)}
                                     </span>
                                   </div>
-                                  <div
-                                    style={{
-                                      display: "flex",
-                                      flexDirection: "column"
-                                    }}
-                                  >
+                                  <div className="flex flex-col">
                                     <span className="userName">
                                       {obj?.Name || obj?.Role}
                                     </span>
@@ -1949,32 +1842,21 @@ function PdfRequestFiles() {
           )}
 
           <ModalUi
-            headerColor={"#dc3545"}
             isOpen={validateAlert}
             title={"Validation alert"}
-            handleClose={() => {
-              setValidateAlert(false);
-            }}
+            handleClose={() => setValidateAlert(false)}
           >
-            <div style={{ height: "100%", padding: 20 }}>
+            <div className="h-[100%] p-[20px]">
               <p>
                 The input does not meet the criteria set by the regular
                 expression.
               </p>
 
-              <div
-                style={{
-                  height: "1px",
-                  backgroundColor: "#9f9f9f",
-                  width: "100%",
-                  marginTop: "15px",
-                  marginBottom: "15px"
-                }}
-              ></div>
+              <div className="h-[1px] bg-[#9f9f9f] w-full my-[15px]"></div>
               <button
                 onClick={() => setValidateAlert(false)}
                 type="button"
-                className="finishBtn cancelBtn"
+                className="op-btn op-btn-ghost"
               >
                 Close
               </button>
diff --git a/apps/OpenSign/src/pages/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js
index 3176180a9..c22933a4f 100644
--- a/apps/OpenSign/src/pages/PlaceHolderSign.js
+++ b/apps/OpenSign/src/pages/PlaceHolderSign.js
@@ -1637,7 +1637,10 @@ function PlaceHolderSign() {
         ) : handleError ? (
           <HandleError handleError={handleError} />
         ) : (
-          <div className="signatureContainer" ref={divRef}>
+          <div
+            className="op-card overflow-hidden flex flex-row justify-between bg-base-300 relative"
+            ref={divRef}
+          >
             {isUiLoading && (
               <div className="absolute h-[100vh] w-full flex flex-col justify-center items-center z-[999] bg-[#e6f2f2] bg-opacity-80">
                 <img
@@ -1691,11 +1694,6 @@ function PlaceHolderSign() {
               {/* this modal is used show alert set placeholder for all signers before send mail */}
 
               <ModalUi
-                headerColor={
-                  isSendAlert.mssg === "sure" || isSendAlert.mssg === textWidget
-                    ? "#dc3545"
-                    : isSendAlert.mssg === "confirm" && themeColor
-                }
                 isOpen={isSendAlert.alert}
                 title={
                   isSendAlert.mssg === "sure" || isSendAlert.mssg === textWidget
@@ -1705,7 +1703,7 @@ function PlaceHolderSign() {
                 handleClose={() => setIsSendAlert({})}
                 showHeaderMessage={isSendAlert.mssg === "confirm"}
               >
-                <div className="max-h-96 overflow-y-scroll scroll-hide p-[20px]">
+                <div className="max-h-96 overflow-y-scroll scroll-hide p-[20px] text-base-content">
                   {isSendAlert.mssg === "sure" ? (
                     <span>
                       Please ensure there&apos;s at least one signature widget
@@ -1716,75 +1714,69 @@ function PlaceHolderSign() {
                   ) : (
                     isSendAlert.mssg === "confirm" && (
                       <>
-                        <>
-                          {!isCustomize && (
-                            <span>
-                              Are you sure you want to send out this document
-                              for signatures?
-                            </span>
-                          )}
-                          {isCustomize &&
-                            (!isEnableSubscription || isSubscribe) && (
-                              <>
-                                <EmailBody
-                                  editorRef={editorRef}
-                                  requestBody={requestBody}
-                                  requestSubject={requestSubject}
-                                  handleOnchangeRequest={handleOnchangeRequest}
-                                  setRequestSubject={setRequestSubject}
-                                />
-                                <div
-                                  className={
-                                    "flex justify-end items-center gap-1 mt-2 underline text-blue-700 focus:outline-none cursor-pointer "
-                                  }
-                                  onClick={() => {
-                                    setRequestBody(defaultBody);
-                                    setRequestSubject(defaultSubject);
-                                  }}
-                                >
-                                  <span>Reset to default</span>
-                                </div>
-                              </>
-                            )}
-                          <div
-                            className={
-                              "flex flex-row md:items-center gap-2 md:gap-6 mt-2"
-                            }
-                          >
-                            <div className="flex flex-row gap-2">
-                              <button
-                                onClick={() => sendEmailToSigners()}
-                                className="op-btn op-btn-primary font-[500] text-sm shadow"
+                        {!isCustomize && (
+                          <span>
+                            Are you sure you want to send out this document for
+                            signatures?
+                          </span>
+                        )}
+                        {isCustomize &&
+                          (!isEnableSubscription || isSubscribe) && (
+                            <>
+                              <EmailBody
+                                editorRef={editorRef}
+                                requestBody={requestBody}
+                                requestSubject={requestSubject}
+                                handleOnchangeRequest={handleOnchangeRequest}
+                                setRequestSubject={setRequestSubject}
+                              />
+                              <div
+                                className={
+                                  "flex justify-end items-center gap-1 mt-2 underline text-blue-700 focus:outline-none cursor-pointer "
+                                }
+                                onClick={() => {
+                                  setRequestBody(defaultBody);
+                                  setRequestSubject(defaultSubject);
+                                }}
                               >
-                                Send
-                              </button>
-                              {isCustomize && (
-                                <button
-                                  onClick={() => setIsCustomize(false)}
-                                  className="op-btn op-btn-ghost font-[500] text-sm"
-                                >
-                                  Close
-                                </button>
-                              )}
-                            </div>
-
-                            {!isCustomize &&
-                              (isSubscribe || !isEnableSubscription) && (
-                                <span
-                                  className="link link-primary text-sm"
-                                  onClick={() => setIsCustomize(!isCustomize)}
-                                >
-                                  Cutomize Email
-                                </span>
-                              )}
-
-                            {!isSubscribe && isEnableSubscription && (
-                              <div className="mt-2">
-                                <Upgrade message="Upgrade to customize Email" />
+                                <span>Reset to default</span>
                               </div>
+                            </>
+                          )}
+                        <div className="flex flex-row md:items-center gap-2 md:gap-6 mt-2">
+                          <div className="flex flex-row gap-2">
+                            <button
+                              onClick={() => sendEmailToSigners()}
+                              className="op-btn op-btn-primary font-[500] text-sm shadow"
+                            >
+                              Send
+                            </button>
+                            {isCustomize && (
+                              <button
+                                onClick={() => setIsCustomize(false)}
+                                className="op-btn op-btn-ghost font-[500] text-sm"
+                              >
+                                Close
+                              </button>
                             )}
                           </div>
-                        </>
+
+                          {!isCustomize &&
+                            (isSubscribe || !isEnableSubscription) && (
+                              <span
+                                className="link link-primary text-sm"
+                                onClick={() => setIsCustomize(!isCustomize)}
+                              >
+                                Cutomize Email
+                              </span>
+                            )}
+
+                          {!isSubscribe && isEnableSubscription && (
+                            <div className="mt-2">
+                              <Upgrade message="Upgrade to customize Email" />
+                            </div>
+                          )}
+                        </div>
                       </>
                     )
                   )}
@@ -1843,7 +1835,6 @@ function PlaceHolderSign() {
                 </div>
               </ModalUi>
               <ModalUi
-                headerColor={"#dc3545"}
                 isOpen={isShowEmail}
                 title={"signers alert"}
                 handleClose={() => {
@@ -2012,12 +2003,15 @@ function PlaceHolderSign() {
               </div>
             ) : (
               <div>
-                <div className="signerComponent" aria-disabled>
+                <div
+                  className="hidden md:block w-[180px] h-full bg-base-100"
+                  aria-disabled
+                >
                   <div
                     style={{
                       maxHeight: window.innerHeight - 70 + "px"
                     }}
-                    className="autoSignScroll"
+                    className="overflow-y-auto hide-scrollbar"
                   >
                     <SignerListPlace
                       signerPos={signerPos}
@@ -2063,7 +2057,6 @@ function PlaceHolderSign() {
       </DndProvider>
       <div>
         <ModalUi
-          headerColor={"#dc3545"}
           isOpen={isAlreadyPlace.status}
           title={"Document Alert"}
           showClose={false}
diff --git a/apps/OpenSign/src/pages/PlanSubscriptions.js b/apps/OpenSign/src/pages/PlanSubscriptions.js
index a8bfbd480..0b8097c7e 100644
--- a/apps/OpenSign/src/pages/PlanSubscriptions.js
+++ b/apps/OpenSign/src/pages/PlanSubscriptions.js
@@ -4,6 +4,7 @@ import checkmark from "../assets/images/checkmark.png";
 import plansArr from "../json/plansArr";
 import Title from "../components/Title";
 import Parse from "parse";
+import { openInNewTab } from "../constant/Utils";
 const listItemStyle = {
   paddingLeft: "20px", // Add padding to create space for the image
   backgroundImage: `url(${checkmark})`, // Set your image as the list style image
@@ -84,55 +85,33 @@ const PlanSubscriptions = () => {
     <>
       <Title title={"Subscriptions"} />
       {isLoader ? (
-        <div
-          style={{
-            height: "100vh",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          }}
-        >
-          <div
-            style={{
-              fontSize: "45px",
-              color: "#3dd3e0"
-            }}
-            className="loader-37"
-          ></div>
+        <div className="flex items-center justify-center h-[full] text-[45px] text-[#3dd3e0]">
+          <div className="loader-37"></div>
         </div>
       ) : (
-        <div
-          style={{
-            backgroundColor: "white",
-            overflowY: "auto",
-            maxHeight: "100%"
-          }}
-        >
+        <div className="overflow-y-auto max-h-full">
           <div className="block my-2">
             <div className="flex flex-col justify-center items-center w-full">
-              <div className="mb-6 mt-2 flex flex-row border-[1px] p-2 border-gray-300 rounded text-sm">
-                <span
+              <div
+                role="tablist"
+                className="op-tabs op-tabs-boxed bg-base-100 my-2 shadow-lg transition-all"
+              >
+                <a
                   onClick={() => setYearlyVisible(false)}
-                  className={`${
-                    !yearlyVisible
-                      ? "bg-[#002862] text-white"
-                      : "bg-white text-black"
-                  } px-4 py-1 rounded cursor-pointer`}
+                  role="tab"
+                  className={`${!yearlyVisible ? "op-tab-active" : ""} op-tab`}
                 >
                   Monthly
-                </span>
-                <span
+                </a>
+                <a
                   onClick={() => setYearlyVisible(true)}
-                  className={`${
-                    yearlyVisible
-                      ? "bg-[#002862] text-white"
-                      : "bg-white text-black"
-                  } px-4 py-1 rounded cursor-pointer`}
+                  role="tab"
+                  className={`${yearlyVisible ? "op-tab-active" : ""} op-tab`}
                 >
                   Yearly (10% off)
-                </span>
+                </a>
               </div>
-              <ul className="flex flex-col md:flex-row h-full bg-white justify-center">
+              <ul className="op-card flex flex-col md:flex-row h-full bg-base-100 justify-center shadow-lg">
                 {plansArr.map((item) => (
                   <li
                     className="flex flex-col text-center border-collapse border-[1px] border-gray-300 max-w-[250px]"
@@ -207,9 +186,7 @@ const PlanSubscriptions = () => {
                     <ul className="mx-1 p-3 text-left break-words text-sm list-none">
                       {item.benefits.map((subitem, index) => (
                         <li style={listItemStyle} key={index} className="m-1">
-                          <span style={{ position: "relative" }}>
-                            {subitem}
-                          </span>
+                          <span className="relative">{subitem}</span>
                         </li>
                       ))}
                     </ul>
@@ -217,22 +194,23 @@ const PlanSubscriptions = () => {
                 ))}
               </ul>
             </div>
-            <div className="text-sm flex justify-center items-center">
-              <hr className="border-[1px] border-gray-300 w-[20%]" />
-              <span className="px-2 text-gray-500 cursor-default">or</span>
-              <hr className="border-[1px] border-gray-300 w-[20%]" />
+            <div className="text-sm flex justify-center items-center mt-3 mb-2">
+              <hr className="border-[2px] border-gray-350 w-[20%]" />
+              <span className="px-2 text-base-content cursor-default">or</span>
+              <hr className="border-[2px] border-gray-350 w-[20%]" />
             </div>
-            <div className="flex flex-col justify-center w-full items-center">
+            <div className="flex flex-col justify-center items-center">
               <h3 className="text-[#002862] mt-1 mb-2">
                 Host it yourself for free
               </h3>
-              <NavLink
-                to={"https://github.com/OpenSignLabs/OpenSign"}
-                className="bg-[#002862] w-[200px] text-center text-white py-2 rounded uppercase hover:no-underline hover:text-white cursor-pointer"
-                target={"_blank"}
+              <div
+                className="op-btn op-btn-primary w-[200px]"
+                onClick={() =>
+                  openInNewTab("https://github.com/OpenSignLabs/OpenSign")
+                }
               >
                 Visit Github
-              </NavLink>
+              </div>
             </div>
           </div>
         </div>
diff --git a/apps/OpenSign/src/pages/Signup.js b/apps/OpenSign/src/pages/Signup.js
index f4aa4e71f..2fdabe254 100644
--- a/apps/OpenSign/src/pages/Signup.js
+++ b/apps/OpenSign/src/pages/Signup.js
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import Parse from "parse";
 import axios from "axios";
 import Title from "../components/Title";
-import { useNavigate, NavLink, useLocation } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import login_img from "../assets/images/login_img.svg";
 import { useWindowSize } from "../hook/useWindowSize";
 import Alert from "../primitives/Alert";
@@ -639,6 +639,7 @@ const Signup = () => {
                       <div className="mt-2.5 ml-1 flex flex-row items-center">
                         <input
                           type="checkbox"
+                          className="op-checkbox op-checkbox-sm"
                           id="termsandcondition"
                           checked={isAuthorize}
                           onChange={(e) => setIsAuthorize(e.target.checked)}
@@ -672,19 +673,23 @@ const Signup = () => {
                     >
                       {state.loading ? "Loading..." : "Register"}
                     </button>
-                    <NavLink
-                      className={`op-btn op-btn-secondary hover:no-underline hover:text-base-content`}
-                      to={location.search ? "/" + location.search : "/"}
+                    <button
+                      type="button"
+                      className="op-btn op-btn-secondary"
+                      disabled={state.loading}
+                      onClick={() =>
+                        navigate(location.search ? "/" + location.search : "/")
+                      }
                     >
                       Login
-                    </NavLink>
+                    </button>
                   </div>
                 </form>
               </div>
               {width >= 768 && (
                 <div className="self-center">
                   <div className="mx-auto md:w-[300px] lg:w-[400px] xl:w-[500px]">
-                    <img src={login_img} alt="bisec" width="100%" />
+                    <img src={login_img} alt="loader" width="100%" />
                   </div>
                 </div>
               )}
@@ -694,14 +699,8 @@ const Signup = () => {
         </div>
       ) : (
         <div
-          style={{
-            position: "fixed",
-            fontSize: "50px",
-            color: "#3ac9d6",
-            top: "50%",
-            left: "45%"
-          }}
-          className="loader-37"
+          className="loader-37 fixed text-[50px] top-[50%] left-[45%]"
+          style={{ color: "#3ac9d6" }}
         ></div>
       )}
     </div>
diff --git a/apps/OpenSign/src/pages/SignyourselfPdf.js b/apps/OpenSign/src/pages/SignyourselfPdf.js
index 811062040..b4971322a 100644
--- a/apps/OpenSign/src/pages/SignyourselfPdf.js
+++ b/apps/OpenSign/src/pages/SignyourselfPdf.js
@@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect } from "react";
 import { PDFDocument } from "pdf-lib";
 import "../styles/signature.css";
 import Parse from "parse";
-import { isEnableSubscription, themeColor } from "../constant/const";
+import { isEnableSubscription } from "../constant/const";
 import Confetti from "react-confetti";
 import axios from "axios";
 import Loader from "../primitives/LoaderWithMsg";
@@ -1112,7 +1112,10 @@ function SignYourSelf() {
             </div>
           )}
 
-          <div className="signatureContainer" ref={divRef}>
+          <div
+            className="relative op-card overflow-hidden flex flex-col md:flex-row justify-between bg-base-300"
+            ref={divRef}
+          >
             {!isEmailVerified && (
               <VerifyEmail
                 isVerifyModal={isVerifyModal}
@@ -1157,7 +1160,6 @@ function SignYourSelf() {
               }}
             >
               <ModalUi
-                headerColor={"#dc3545"}
                 isOpen={isAlert.isShow}
                 title={isAlert?.header || "Alert"}
                 handleClose={() => {
@@ -1310,7 +1312,7 @@ function SignYourSelf() {
                 maxHeight: window.innerHeight - 70 + "px",
                 backgroundColor: "white"
               }}
-              className="autoSignScroll"
+              className="overflow-y-auto hide-scrollbar"
             >
               {!isCompleted ? (
                 <div>
@@ -1322,7 +1324,6 @@ function SignYourSelf() {
                     handleDivClick={handleDivClick}
                     handleMouseLeave={handleMouseLeave}
                     isDragSign={isDragSign}
-                    themeColor={themeColor}
                     dragStamp={dragStamp}
                     dragRef={dragRef}
                     isDragStamp={isDragStamp}
@@ -1343,7 +1344,6 @@ function SignYourSelf() {
         </div>
       )}
       <ModalUi
-        headerColor={"#dc3545"}
         isOpen={validateAlert}
         title={"Validation alert"}
         handleClose={() => {
diff --git a/apps/OpenSign/src/pages/TemplatePlaceholder.js b/apps/OpenSign/src/pages/TemplatePlaceholder.js
index 5e38214f4..73e30ff90 100644
--- a/apps/OpenSign/src/pages/TemplatePlaceholder.js
+++ b/apps/OpenSign/src/pages/TemplatePlaceholder.js
@@ -1257,7 +1257,6 @@ const TemplatePlaceholder = () => {
             >
               {/* this modal is used show alert set placeholder for all signers before send mail */}
               <ModalUi
-                headerColor={"#dc3545"}
                 isOpen={isSendAlert}
                 title={"Fields required"}
                 handleClose={() => setIsSendAlert(false)}
@@ -1267,7 +1266,6 @@ const TemplatePlaceholder = () => {
                 </div>
               </ModalUi>
               <ModalUi
-                headerColor={"#dc3545"}
                 isOpen={!IsReceipent}
                 title={"Roles"}
                 handleClose={() => setIsReceipent(true)}
@@ -1312,7 +1310,6 @@ const TemplatePlaceholder = () => {
               </ModalUi>
               {isCreateDoc && <Loader isLoading={isLoading} />}
               <ModalUi
-                headerColor={"#dc3545"}
                 isOpen={isShowEmail}
                 title={"signers alert"}
                 handleClose={() => {
@@ -1323,11 +1320,9 @@ const TemplatePlaceholder = () => {
                   <p>Please select signer for add placeholder!</p>
                   <div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
                   <button
-                    onClick={() => {
-                      setIsShowEmail(false);
-                    }}
+                    onClick={() => setIsShowEmail(false)}
                     type="button"
-                    className="finishBtn cancelBtn"
+                    className="op-btn op-btn-primary"
                   >
                     Ok
                   </button>
@@ -1480,7 +1475,7 @@ const TemplatePlaceholder = () => {
               </div>
             ) : (
               <div>
-                <div className="w-[180px] h-full bg-base-100">
+                <div className="hidden md:block w-[180px] h-full bg-base-100">
                   <div
                     style={{ maxHeight: window.innerHeight - 70 + "px" }}
                     className="overflow-y-auto hide-scrollbar"
diff --git a/apps/OpenSign/src/primitives/ModalUi.js b/apps/OpenSign/src/primitives/ModalUi.js
index 348557c5f..18b184cc0 100644
--- a/apps/OpenSign/src/primitives/ModalUi.js
+++ b/apps/OpenSign/src/primitives/ModalUi.js
@@ -6,14 +6,12 @@ const ModalUi = ({
   children,
   title,
   isOpen,
-  headColor,
   handleClose,
   showHeader = true,
   showClose = true,
   reduceWidth,
   showHeaderMessage
 }) => {
-  const headerColor = headColor ? `text-${headColor}` : "text-base-content";
   return (
     <>
       {isOpen && (
@@ -25,14 +23,12 @@ const ModalUi = ({
           >
             {showHeader && (
               <>
-                <h3
-                  className={`${headerColor} font-bold text-lg pt-[15px] px-[20px]`}
-                >
+                <h3 className="text-base-content font-bold text-lg pt-[15px] px-[20px]">
                   {title}
                 </h3>
                 {showClose && (
                   <button
-                    className="op-btn op-btn-sm op-btn-circle op-btn-ghost absolute right-2 top-2"
+                    className="op-btn op-btn-sm op-btn-circle op-btn-ghost text-base-content absolute right-2 top-2"
                     onClick={() => handleClose && handleClose()}
                   >
                     ✕