diff --git a/apps/OpenSign/src/components/BulkSendUi.js b/apps/OpenSign/src/components/BulkSendUi.js
index 6e4aa5e76..212f110e6 100644
--- a/apps/OpenSign/src/components/BulkSendUi.js
+++ b/apps/OpenSign/src/components/BulkSendUi.js
@@ -170,14 +170,8 @@ const BulkSendUi = (props) => {
   return (
     <>
       {isSubmit && (
-        <div className="absolute z-[999] h-full w-full flex justify-center items-center bg-black bg-opacity-40">
-          <div
-            style={{
-              fontSize: "45px",
-              color: "#3dd3e0"
-            }}
-            className="loader-37 "
-          ></div>
+        <div className="absolute z-[999] h-full w-full flex justify-center items-center bg-black bg-opacity-40 text-[45px] text-[#3dd3e0]">
+          <div className="loader-37"></div>
         </div>
       )}
       {props.Placeholders?.length > 0 ? (
@@ -185,14 +179,14 @@ const BulkSendUi = (props) => {
           <>
             {props.Placeholders?.some((x) => !x.signerObjId) ? (
               <form onSubmit={handleSubmit}>
-                <div className=" min-h-max max-h-[250px] overflow-y-auto">
+                <div className="min-h-max max-h-[250px] overflow-y-auto">
                   {forms?.map((form, index) => (
                     <div
                       key={form.Id}
-                      className="p-3 rounded-xl border-[1px] border-gray-400 m-4 bg-white text-black grid grid-cols-1 md:grid-cols-2 gap-2 relative"
+                      className="p-3 op-card border-[1px] border-gray-400 m-4 bg-base-200 text-base-content grid grid-cols-1 md:grid-cols-2 gap-2 relative"
                     >
                       {form?.fields?.map((field, fieldIndex) => (
-                        <div className="flex flex-col " key={field.fieldId}>
+                        <div className="flex flex-col" key={field.fieldId}>
                           <label>{field.label}</label>
                           <SuggestionInput
                             required
@@ -220,13 +214,13 @@ const BulkSendUi = (props) => {
                 <div className="flex flex-col mx-4 mb-4 gap-3">
                   <button
                     onClick={handleAddForm}
-                    className="bg-[#32a3ac] p-2 text-white w-full rounded-full focus:outline-none"
+                    className="op-btn op-btn-primary focus:outline-none"
                   >
                     <i className="fa-solid fa-plus"></i> <span>Add new</span>
                   </button>
                   <button
                     type="submit"
-                    className="bg-[#32a3ac] p-2 text-white w-full rounded-full focus:outline-none"
+                    className="op-btn op-btn-secondary focus:outline-none"
                   >
                     <i className="fa-solid fa-paper-plane"></i>{" "}
                     <span>Send</span>
diff --git a/apps/OpenSign/src/components/pdf/VerifyEmail.js b/apps/OpenSign/src/components/pdf/VerifyEmail.js
index 1b40614a1..a6ede816c 100644
--- a/apps/OpenSign/src/components/pdf/VerifyEmail.js
+++ b/apps/OpenSign/src/components/pdf/VerifyEmail.js
@@ -1,16 +1,12 @@
 import React from "react";
-import { rejectBtn, submitBtn, themeColor } from "../../constant/const";
 
 function VerifyEmail(props) {
   return (
-    <div className="bg-black bg-opacity-[75%] absolute z-[999] flex flex-col items-center justify-center w-full h-full rounded">
-      <div className="bg-white rounded outline-none md:w-[40%] w-[80%]">
-        <div
-          style={{ backgroundColor: themeColor }}
-          className=" text-white p-[10px] rounded-t"
-        >
+    <dialog className="op-modal op-modal-open absolute z-[1999]">
+      <div className="md:w-[40%] w-[80%] op-modal-box p-0 overflow-y-auto hide-scrollbar text-sm">
+        <h3 className="font-bold text-lg pt-[15px] px-[20px] text-base-content">
           OTP verification
-        </div>
+        </h3>
         {props.isVerifyModal ? (
           <form
             onSubmit={(e) => {
@@ -18,25 +14,24 @@ function VerifyEmail(props) {
               props.handleVerifyEmail(e);
             }}
           >
-            <div className="px-6 py-3">
+            <div className="px-6 py-3 text-base-content">
               <label className="mb-2">Enter OTP</label>
               <input
                 required
                 type="tel"
                 pattern="[0-9]{4}"
-                className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                className="w-full op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-xs"
                 placeholder="Enter OTP received over email"
                 value={props.otp}
                 onChange={(e) => props.setOtp(e.target.value)}
               />
             </div>
-            <hr />
             <div className="px-6 my-3">
-              <button type="submit" className={submitBtn}>
+              <button type="submit" className="op-btn op-btn-primary">
                 Verify
               </button>
               <button
-                className={`${rejectBtn} ml-2`}
+                className="op-btn op-btn-secondary ml-2"
                 onClick={(e) => props.handleResend(e)}
               >
                 Resend
@@ -44,29 +39,15 @@ function VerifyEmail(props) {
             </div>
           </form>
         ) : props.otpLoader ? (
-          <div
-            style={{
-              height: "150px",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center"
-            }}
-          >
-            <div
-              style={{
-                fontSize: "45px",
-                color: "#3dd3e0"
-              }}
-              className="loader-37"
-            ></div>
+          <div className="h-[150px] flex items-center justify-center text-[45px] text-[#3dd3e0]">
+            <div className="loader-37"></div>
           </div>
         ) : (
-          <div className="px-6 py-3">
-            <p className="mb-2">Please verify your email !</p>
-            <hr />
+          <div className="px-6 py-3 text-base-content">
+            <p className="mb-2 text-sm">Please verify your email !</p>
             <div className="px-0 mt-3">
               <button
-                className={submitBtn}
+                className="op-btn op-btn-primary"
                 type="submit"
                 onClick={() => {
                   props.handleVerifyBtn();
@@ -78,7 +59,7 @@ function VerifyEmail(props) {
           </div>
         )}
       </div>
-    </div>
+    </dialog>
   );
 }
 
diff --git a/apps/OpenSign/src/components/shared/fields/SuggestionInput.js b/apps/OpenSign/src/components/shared/fields/SuggestionInput.js
index 62ccab508..5c27adc31 100644
--- a/apps/OpenSign/src/components/shared/fields/SuggestionInput.js
+++ b/apps/OpenSign/src/components/shared/fields/SuggestionInput.js
@@ -61,24 +61,24 @@ const SuggestionInput = (props) => {
     }
   };
   return (
-    <div className="flex flex-col items-center relative">
+    <div className="flex flex-col items-center relative text-base-content">
       <input
         type={props?.type || "text"}
         value={inputValue}
         onChange={handleInputChange}
         placeholder="Enter Email..."
-        className="w-full border-[1px] border-gray-400 p-2 text-black rounded lowercase"
+        className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs lowercase"
         required={props.required}
       />
       {showSuggestions && (
         <ul
           ref={ref}
-          className="absolute z-50 left-0 top-[2.55rem] w-full max-h-[100px] overflow-auto bg-white border border-gray-300 rounded shadow-md"
+          className="absolute z-50 left-0 top-[2.55rem] w-full max-h-[100px] overflow-auto bg-base-200 border border-gray-300 rounded shadow-md"
         >
           {suggestions.map((suggestion, index) => (
             <li
               key={index}
-              className="py-2 px-2 w-full text-sm cursor-pointer hover:bg-gray-100"
+              className="py-2 px-2 w-full text-sm cursor-pointer hover:bg-base-300"
               onClick={() => handleSuggestionClick(suggestion)}
             >
               {suggestion.Email}
diff --git a/apps/OpenSign/src/pages/GenerateToken.js b/apps/OpenSign/src/pages/GenerateToken.js
index 54a140495..c2ed62a98 100644
--- a/apps/OpenSign/src/pages/GenerateToken.js
+++ b/apps/OpenSign/src/pages/GenerateToken.js
@@ -4,7 +4,7 @@ import axios from "axios";
 import { useNavigate } from "react-router-dom";
 import Alert from "../primitives/Alert";
 import ModalUi from "../primitives/ModalUi";
-import { isEnableSubscription, rejectBtn, submitBtn } from "../constant/const";
+import { isEnableSubscription } from "../constant/const";
 import { checkIsSubscribed, copytoData, openInNewTab } from "../constant/Utils";
 import PremiumAlertHeader from "../primitives/PremiumAlertHeader";
 import Tooltip from "../primitives/Tooltip";
@@ -219,7 +219,7 @@ function GenerateToken() {
             handleClose={handleModal}
           >
             <div className="m-[20px]">
-              <div className="text-lg font-normal text-black">
+              <div className="text-lg font-normal text-base-content">
                 Are you sure you want to regenerate token it will expire old
                 token?
               </div>
@@ -227,11 +227,14 @@ function GenerateToken() {
               <div className="flex items-center mt-3 gap-2 text-white">
                 <button
                   onClick={handleSubmit}
-                  className={submitBtn + "ml-[2px]"}
+                  className="op-btn op-btn-primary ml-[2px]"
                 >
                   Yes
                 </button>
-                <button onClick={handleModal} className={rejectBtn}>
+                <button
+                  onClick={handleModal}
+                  className="op-btn op-btn-secondary"
+                >
                   No
                 </button>
               </div>
diff --git a/apps/OpenSign/src/pages/UserProfile.js b/apps/OpenSign/src/pages/UserProfile.js
index 6bf4869de..3690bd551 100644
--- a/apps/OpenSign/src/pages/UserProfile.js
+++ b/apps/OpenSign/src/pages/UserProfile.js
@@ -12,7 +12,7 @@ import sanitizeFileName from "../primitives/sanitizeFileName";
 import axios from "axios";
 import PremiumAlertHeader from "../primitives/PremiumAlertHeader";
 import Tooltip from "../primitives/Tooltip";
-import { isEnableSubscription, rejectBtn, submitBtn } from "../constant/const";
+import { isEnableSubscription } from "../constant/const";
 import { checkIsSubscribed, handleSendOTP } from "../constant/Utils";
 import Upgrade from "../primitives/Upgrade";
 import ModalUi from "../primitives/ModalUi";
@@ -549,25 +549,24 @@ function UserProfile() {
                 </div>
               ) : (
                 <form onSubmit={(e) => handleVerifyEmail(e)}>
-                  <div className="px-6 py-3">
+                  <div className="px-6 py-3 text-base-content">
                     <label className="mb-2">Enter OTP</label>
                     <input
                       required
                       type="tel"
                       pattern="[0-9]{4}"
-                      className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                      className="w-full op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-xs"
                       placeholder="Enter OTP received over email"
                       value={otp}
                       onChange={(e) => setOtp(e.target.value)}
                     />
                   </div>
-                  <hr />
-                  <div className="px-6 my-3">
-                    <button type="submit" className={submitBtn}>
+                  <div className="px-6 mb-3">
+                    <button type="submit" className="op-btn op-btn-primary">
                       Verify
                     </button>
                     <button
-                      className={`${rejectBtn} ml-2`}
+                      className="op-btn op-btn-secondary ml-2"
                       onClick={(e) => handleResend(e)}
                     >
                       Resend
diff --git a/apps/OpenSign/src/primitives/GetReportDisplay.js b/apps/OpenSign/src/primitives/GetReportDisplay.js
index b304cf608..e4dbea321 100644
--- a/apps/OpenSign/src/primitives/GetReportDisplay.js
+++ b/apps/OpenSign/src/primitives/GetReportDisplay.js
@@ -703,15 +703,17 @@ const ReportTable = (props) => {
 
     return (
       <div className="flex flex-row gap-2 justify-center items-center">
-        <div className="flex justify-center items-center bg-gray-200 text-xs text-black shadow rounded-full w-[65px] h-[23px] cursor-default">
+        <div className="flex justify-center items-center bg-base-300 text-base-content shadow-md op-card w-[65px] h-[32px] cursor-default">
           {audit?.Activity ? audit?.Activity : "Awaited"}
         </div>
 
         <button
           onClick={() => handleNextBtn(user, doc)}
-          className={`${
-            audit?.Activity !== "Signed" ? "bg-[#32a3ac] shadow-md" : ""
-          } flex justify-center items-center text-center text-white  rounded w-[60px] h-[30px]`}
+          className={
+            audit?.Activity !== "Signed"
+              ? "op-btn op-btn-primary op-btn-sm"
+              : " text-transparent cursor-default pointer-events-none"
+          }
           disabled={audit?.Activity === "Signed"}
         >
           {audit?.Activity !== "Signed" && "Resend"}
@@ -916,7 +918,7 @@ const ReportTable = (props) => {
           <div className="loader-37"></div>
         </div>
       )}
-      <div className="p-2 overflow-x-scroll w-full bg-base-100 text-base-content rounded-xl">
+      <div className="p-2 overflow-x-scroll w-full bg-base-100 text-base-content op-card shadow-lg">
         {/* {isCelebration && (
           <div className="relative z-[1000]">
             <Confetti width={window.innerWidth} height={window.innerHeight} />
@@ -945,7 +947,7 @@ const ReportTable = (props) => {
             <i
               data-tut="reactourFirst"
               onClick={() => navigate("/form/template")}
-              className="fa-solid fa-square-plus text-sky-400 text-[25px]"
+              className="fa-solid fa-square-plus text-accent text-[25px]"
             ></i>
           )}
           {props.form && (
@@ -953,7 +955,7 @@ const ReportTable = (props) => {
               className="cursor-pointer"
               onClick={() => handleContactFormModal()}
             >
-              <i className="fa-solid fa-square-plus text-sky-400 text-[25px]"></i>
+              <i className="fa-solid fa-square-plus text-accent text-[25px]"></i>
             </div>
           )}
         </div>
@@ -1048,7 +1050,7 @@ const ReportTable = (props) => {
                       <td className="px-4 py-2">
                         <button
                           onClick={() => handleDownload(item)}
-                          className="text-[blue] hover:text-[blue] hover:underline focus:outline-none"
+                          className="op-link op-link-primary"
                           title={"Download"}
                         >
                           {item?.URL ? "Download" : "-"}
@@ -1061,7 +1063,7 @@ const ReportTable = (props) => {
                         {item?.Placeholders ? (
                           <button
                             onClick={() => handleViewSigners(item)}
-                            className="text-[blue] hover:underline focus:outline-none"
+                            className="op-link op-link-primary"
                           >
                             View
                           </button>
@@ -1228,10 +1230,11 @@ const ReportTable = (props) => {
                           </td>
                         )} */}
                       <td className="px-2 py-2">
-                        <div className="text-white flex flex-row gap-x-2 gap-y-1 justify-start items-center">
+                        <div className="text-base-content flex flex-row gap-x-2 gap-y-1 justify-start items-center">
                           {props.actions?.length > 0 &&
                             props.actions.map((act, index) => (
-                              <button
+                              <div
+                                role="button"
                                 data-tut={act?.selector}
                                 key={index}
                                 onClick={() => handleActionBtn(act, item)}
@@ -1252,29 +1255,30 @@ const ReportTable = (props) => {
                                 )}
                                 {isOption[item.objectId] &&
                                   act.action === "option" && (
-                                    <div className="absolute -right-2 top-5 p-1.5 bg-white text-nowrap rounded shadow-md z-[20] overflow-hidden">
+                                    <ul className="absolute -right-2 top-6 z-[20] op-dropdown-content op-menu shadow bg-base-100 text-base-content rounded-box ">
                                       {act.subaction?.map((subact) => (
-                                        <div
+                                        <li
                                           key={subact.btnId}
-                                          className="hover:bg-gray-300 rounded cursor-pointer px-2 py-1.5 flex justify-start items-center text-black"
                                           onClick={() =>
                                             handleActionBtn(subact, item)
                                           }
                                           title={subact.hoverLabel}
                                         >
-                                          <i
-                                            className={`${subact.btnIcon} mr-1.5`}
-                                          ></i>
-                                          {subact.btnLabel && (
-                                            <span className="ml-[4px] text-[13px] capitalize font-medium">
-                                              {subact.btnLabel}
-                                            </span>
-                                          )}
-                                        </div>
+                                          <span>
+                                            <i
+                                              className={`${subact.btnIcon} mr-1.5`}
+                                            ></i>
+                                            {subact.btnLabel && (
+                                              <span className="text-[13px] capitalize font-medium">
+                                                {subact.btnLabel}
+                                              </span>
+                                            )}
+                                          </span>
+                                        </li>
                                       ))}
-                                    </div>
+                                    </ul>
                                   )}
-                              </button>
+                              </div>
                             ))}
                         </div>
                         {isViewShare[item.objectId] && (
diff --git a/apps/OpenSign/src/primitives/ModalUi.js b/apps/OpenSign/src/primitives/ModalUi.js
index 24028cd0c..348557c5f 100644
--- a/apps/OpenSign/src/primitives/ModalUi.js
+++ b/apps/OpenSign/src/primitives/ModalUi.js
@@ -13,30 +13,32 @@ const ModalUi = ({
   reduceWidth,
   showHeaderMessage
 }) => {
+  const headerColor = headColor ? `text-${headColor}` : "text-base-content";
   return (
     <>
       {isOpen && (
-        <div className="fixed z-[999] top-0 left-0 w-[100%] h-[100%] bg-black bg-opacity-[75%]">
+        <dialog className="op-modal op-modal-open">
           <div
             className={`${
               reduceWidth || "md:min-w-[500px]"
-            } fixed z-[1000] top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-sm bg-base-100 rounded-xl shadow-md max-h-90 min-w-[90%] overflow-y-auto hide-scrollbar `}
+            } op-modal-box p-0 max-h-90 min-w-[90%] overflow-y-auto hide-scrollbar text-sm`}
           >
             {showHeader && (
-              <div
-                className="flex justify-between rounded-t items-center py-[15px] px-[20px] text-white"
-                style={{ background: headColor ? headColor : "#32a3ac" }}
-              >
-                <div className="text-[1.2rem] font-normal">{title}</div>
+              <>
+                <h3
+                  className={`${headerColor} font-bold text-lg pt-[15px] px-[20px]`}
+                >
+                  {title}
+                </h3>
                 {showClose && (
-                  <div
-                    className="text-[1.5rem] cursor-pointer"
+                  <button
+                    className="op-btn op-btn-sm op-btn-circle op-btn-ghost absolute right-2 top-2"
                     onClick={() => handleClose && handleClose()}
                   >
-                    &times;
-                  </div>
+                    ✕
+                  </button>
                 )}
-              </div>
+              </>
             )}
             {!isEnableSubscription && showHeaderMessage && (
               <PremiumAlertHeader
@@ -47,7 +49,7 @@ const ModalUi = ({
             )}
             <div>{children}</div>
           </div>
-        </div>
+        </dialog>
       )}
     </>
   );
diff --git a/apps/OpenSign/src/primitives/PdfDeclineModal.js b/apps/OpenSign/src/primitives/PdfDeclineModal.js
index ee8507762..7030dc5f8 100644
--- a/apps/OpenSign/src/primitives/PdfDeclineModal.js
+++ b/apps/OpenSign/src/primitives/PdfDeclineModal.js
@@ -1,6 +1,5 @@
 import React from "react";
 import "../styles/signature.css";
-import { rejectBtn } from "../constant/const";
 
 function CustomModal({
   show,
@@ -12,12 +11,12 @@ function CustomModal({
 }) {
   return (
     show && (
-      <div className="bg-black bg-opacity-[75%] absolute z-[999] flex flex-col items-center justify-center w-full h-full rounded">
-        <div className="bg-white rounded outline-none md:w-[40%] w-[80%]">
-          <div className="bg-[#de4337] text-white p-[10px] rounded-t">
+      <dialog className="op-modal op-modal-open absolute z-[1999]">
+        <div className="w-[80%] md:w-[40%] op-modal-box p-0 overflow-y-auto hide-scrollbar text-sm">
+          <h3 className="text-[#de4337] font-bold text-lg pt-[15px] px-[20px]">
             {headMsg && headMsg}
-          </div>
-          <div className="p-[15px]">
+          </h3>
+          <div className="p-[10px] px-[20px]">
             <p className="text-[15px]">{bodyMssg && bodyMssg}</p>
           </div>
           {footerMessage && (
@@ -25,8 +24,7 @@ function CustomModal({
               <div className="h-[1px] bg-[#9f9f9f] w-full"></div>
               <div className="m-[15px] ">
                 <button
-                  className={`${rejectBtn} text-white mr-2`}
-                  style={{ background: "#de4337" }}
+                  className="op-btn op-btn-primary mr-2"
                   type="button"
                   onClick={() => declineDoc()}
                 >
@@ -34,7 +32,7 @@ function CustomModal({
                 </button>
                 <button
                   type="button"
-                  className={rejectBtn}
+                  className="op-btn op-btn-secondary"
                   onClick={() => setIsDecline({ isDeclined: false })}
                 >
                   Close
@@ -43,7 +41,7 @@ function CustomModal({
             </>
           )}
         </div>
-      </div>
+      </dialog>
     )
   );
 }