diff --git a/apps/OpenSign/src/components/AddSigner.js b/apps/OpenSign/src/components/AddSigner.js
index eb6fbbb6a..aa7801085 100644
--- a/apps/OpenSign/src/components/AddSigner.js
+++ b/apps/OpenSign/src/components/AddSigner.js
@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from "react";
 import Parse from "parse";
 import axios from "axios";
-import { modalCancelBtnColor, modalSubmitBtnColor } from "../constant/const";
 
 const AddSigner = (props) => {
   const [name, setName] = useState("");
@@ -305,19 +304,14 @@ const AddSigner = (props) => {
             />
           </div>
 
-          <div className="mt-4 flex justify-start">
-            <button
-              type="submit"
-              style={{ backgroundColor: modalSubmitBtnColor }}
-              className="mr-2 px-[20px] py-1.5 text-white rounded shadow-md text-center focus:outline-none "
-            >
+          <div className="mt-4 flex gap-x-2 justify-start">
+            <button type="submit" className="op-btn op-btn-primary">
               Submit
             </button>
             <button
               type="button"
               onClick={() => handleReset()}
-              style={{ backgroundColor: modalCancelBtnColor }}
-              className="px-4 py-1.5 text-black border-[1px] border-[#ccc] shadow-md rounded focus:outline-none"
+              className="op-btn op-btn-secondary"
             >
               Reset
             </button>
diff --git a/apps/OpenSign/src/components/shared/fields/SelectSigners.js b/apps/OpenSign/src/components/shared/fields/SelectSigners.js
index 2874fc1ca..21426aa9b 100644
--- a/apps/OpenSign/src/components/shared/fields/SelectSigners.js
+++ b/apps/OpenSign/src/components/shared/fields/SelectSigners.js
@@ -3,18 +3,6 @@ import Parse from "parse";
 import "../../../styles/AddUser.css";
 import AsyncSelect from "react-select/async";
 
-const customStyles = {
-  control: (baseStyles) => ({
-    ...baseStyles,
-    backgroundColor: "inherit",
-    borderRadius: 10,
-    borderColor: "current"
-  }),
-  option: (baseStyles) => ({
-    ...baseStyles,
-    backgroundColor: "inherit"
-  })
-};
 const SelectSigners = (props) => {
   const [userList, setUserList] = useState([]);
   const [selected, setSelected] = useState();
@@ -84,7 +72,7 @@ const SelectSigners = (props) => {
     <div className="h-full px-[20px] py-[10px] text-base-content">
       <div className="w-full mx-auto p-[8px]">
         <div className="mb-0">
-          <label className="text-[14px] font-bold">Choose User</label>
+          <label className="text-[14px] font-bold">Choose from contacts</label>
           <AsyncSelect
             cacheOptions
             defaultOptions
@@ -93,7 +81,13 @@ const SelectSigners = (props) => {
             noOptionsMessage={() => "User not Found"}
             loadOptions={loadOptions}
             onChange={handleOptions}
-            styles={customStyles}
+            unstyled
+            classNames={{
+              control: () =>
+                "op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs",
+              option: () =>
+                "bg-base-200 text-base-content hover:bg-base-300 p-2 shadow-md"
+            }}
           />
         </div>
         <p
diff --git a/apps/OpenSign/src/components/shared/fields/SignersInput.js b/apps/OpenSign/src/components/shared/fields/SignersInput.js
index 9b100ef86..39e039d99 100644
--- a/apps/OpenSign/src/components/shared/fields/SignersInput.js
+++ b/apps/OpenSign/src/components/shared/fields/SignersInput.js
@@ -128,17 +128,12 @@ const SignersInput = (props) => {
             onChange={onChange}
             closeMenuOnSelect={false}
             required={props.required}
-            styles={{
-              control: (baseStyles) => ({
-                ...baseStyles,
-                backgroundColor: "inherit",
-                borderRadius: 10,
-                borderColor: "current"
-              }),
-              option: (baseStyles) => ({
-                ...baseStyles,
-                backgroundColor: "inherit"
-              })
+            unstyled
+            classNames={{
+              control: () =>
+                "op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs",
+              option: () =>
+                "bg-base-200 text-base-content hover:bg-base-300 p-2 shadow-md"
             }}
           />
         </div>
diff --git a/apps/OpenSign/src/constant/const.js b/apps/OpenSign/src/constant/const.js
index a046b4ae1..7dd32bcff 100644
--- a/apps/OpenSign/src/constant/const.js
+++ b/apps/OpenSign/src/constant/const.js
@@ -5,8 +5,6 @@ export const rejectBtn =
   "bg-[#ffffff] rounded-sm shadow-md text-[12px] font-semibold uppercase text-black py-1.5 px-4 focus:outline-none text-center border-[1px] border-[#b4b4b4]";
 export const submitBtn =
   "bg-[#32a3ac] rounded-sm shadow-md text-[12px] font-semibold uppercase text-white py-1.5 px-4 focus:outline-none text-center";
-export const modalSubmitBtnColor = "#17a2b8";
-export const modalCancelBtnColor = "white";
 export const themeColor = "#47a3ad";
 export const iconColor = "#686968";
 export const isEnableSubscription = process.env.REACT_APP_ENABLE_SUBSCRIPTION;
diff --git a/apps/OpenSign/src/json/ReportJson.js b/apps/OpenSign/src/json/ReportJson.js
index 705ce8fb9..0cc17f488 100644
--- a/apps/OpenSign/src/json/ReportJson.js
+++ b/apps/OpenSign/src/json/ReportJson.js
@@ -14,8 +14,7 @@ export default function reportJson(id) {
           {
             btnId: "1231",
             hoverLabel: "Edit",
-            btnColor: "#4bd396",
-            textColor: "white",
+            btnColor: "op-btn-primary",
             btnIcon: "fa-solid fa-pen",
             redirectUrl: "draftDocument",
             action: "redirect"
@@ -23,8 +22,7 @@ export default function reportJson(id) {
           {
             btnId: "2142",
             hoverLabel: "Delete",
-            btnColor: "#ff4848",
-            textColor: "white",
+            btnColor: "op-btn-secondary",
             btnIcon: "fa fa-trash",
             redirectUrl: "",
             action: "delete"
@@ -43,8 +41,7 @@ export default function reportJson(id) {
             btnId: "4536",
             btnLabel: "sign",
             hoverLabel: "Sign",
-            btnColor: "#3ac9d6",
-            textColor: "white",
+            btnColor: "op-btn-primary",
             btnIcon: "fa-solid fa-signature",
             redirectUrl: "pdfRequestFiles",
             action: "redirect"
@@ -62,8 +59,7 @@ export default function reportJson(id) {
           {
             btnId: "8901",
             hoverLabel: "Share",
-            btnColor: "#4bd396",
-            textColor: "white",
+            btnColor: "op-btn-primary",
             btnIcon: "fa-solid fa-share",
             redirectUrl: "",
             action: "share"
@@ -71,8 +67,7 @@ export default function reportJson(id) {
           {
             btnId: "1588",
             hoverLabel: "View",
-            btnColor: "#3ac9d6",
-            textColor: "white",
+            btnColor: "op-btn-secondary",
             btnIcon: "fa fa-eye",
             redirectUrl: "pdfRequestFiles",
             action: "redirect"
@@ -80,7 +75,7 @@ export default function reportJson(id) {
           {
             btnId: "2234",
             hoverLabel: "option",
-            btnColor: "transparent",
+            btnColor: "",
             textColor: "black",
             btnIcon: "fa-solid fa-ellipsis-vertical fa-lg",
             action: "option",
@@ -124,8 +119,7 @@ export default function reportJson(id) {
           {
             btnId: "1378",
             hoverLabel: "Edit",
-            btnColor: "#4bd396",
-            textColor: "white",
+            btnColor: "op-btn-primary",
             btnIcon: "fa fa-eye",
             redirectUrl: "draftDocument",
             action: "redirect"
@@ -133,8 +127,7 @@ export default function reportJson(id) {
           {
             btnId: "1278",
             hoverLabel: "Delete",
-            btnColor: "#ff4848",
-            textColor: "white",
+            btnColor: "op-btn-secondary",
             btnIcon: "fa fa-trash",
             redirectUrl: "",
             action: "delete"
@@ -152,8 +145,7 @@ export default function reportJson(id) {
           {
             btnId: "1458",
             hoverLabel: "View",
-            btnColor: "#4bd396",
-            textColor: "white",
+            btnColor: "op-btn-primary",
             btnIcon: "fa fa-eye",
             redirectUrl: "draftDocument",
             action: "redirect"
@@ -161,8 +153,7 @@ export default function reportJson(id) {
           {
             btnId: "1358",
             hoverLabel: "Delete",
-            btnColor: "#ff4848",
-            textColor: "white",
+            btnColor: "op-btn-secondary",
             btnIcon: "fa fa-trash",
             redirectUrl: "",
             action: "delete"
@@ -180,8 +171,7 @@ export default function reportJson(id) {
           {
             btnId: "1898",
             hoverLabel: "View",
-            btnColor: "#4bd396",
-            textColor: "white",
+            btnColor: "op-btn-primary",
             btnIcon: "fa fa-eye",
             redirectUrl: "draftDocument",
             action: "redirect"
@@ -189,8 +179,7 @@ export default function reportJson(id) {
           {
             btnId: "1998",
             hoverLabel: "Delete",
-            btnColor: "#ff4848",
-            textColor: "white",
+            btnColor: "op-btn-secondary",
             btnIcon: "fa fa-trash",
             redirectUrl: "",
             action: "delete"
@@ -208,8 +197,7 @@ export default function reportJson(id) {
           {
             btnId: "1999",
             hoverLabel: "Share",
-            btnColor: "#4bd396",
-            textColor: "white",
+            btnColor: "op-btn-primary",
             btnIcon: "fa-solid fa-share",
             redirectUrl: "",
             action: "share"
@@ -217,8 +205,7 @@ export default function reportJson(id) {
           {
             btnId: "1999",
             hoverLabel: "View",
-            btnColor: "#3ac9d6",
-            textColor: "white",
+            btnColor: "op-btn-secondary",
             btnIcon: "fa fa-eye",
             redirectUrl: "pdfRequestFiles",
             action: "redirect"
@@ -226,7 +213,7 @@ export default function reportJson(id) {
           {
             btnId: "2234",
             hoverLabel: "option",
-            btnColor: "transparent",
+            btnColor: "",
             textColor: "black",
             btnIcon: "fa-solid fa-ellipsis-vertical fa-lg",
             action: "option",
@@ -269,8 +256,7 @@ export default function reportJson(id) {
             btnId: "2001",
             btnLabel: "sign",
             hoverLabel: "Sign",
-            btnColor: "#3ac9d6",
-            textColor: "white",
+            btnColor: "op-btn-primary",
             btnIcon: "fa-solid fa-signature",
             redirectUrl: "pdfRequestFiles",
             action: "redirect"
@@ -286,8 +272,7 @@ export default function reportJson(id) {
           {
             btnId: "2003",
             hoverLabel: "Edit",
-            btnColor: "#4bd396",
-            textColor: "white",
+            btnColor: "op-btn-primary",
             btnIcon: "fa-solid fa-pen",
             redirectUrl: "draftDocument",
             action: "redirect"
@@ -295,8 +280,7 @@ export default function reportJson(id) {
           {
             btnId: "2004",
             hoverLabel: "Delete",
-            btnColor: "#ff4848",
-            textColor: "white",
+            btnColor: "op-btn-secondary",
             btnIcon: "fa fa-trash",
             redirectUrl: "",
             action: "delete"
@@ -312,8 +296,7 @@ export default function reportJson(id) {
           {
             btnId: "2204",
             hoverLabel: "Delete",
-            btnColor: "#f55a42",
-            textColor: "white",
+            btnColor: "op-btn-outline op-btn-error",
             btnIcon: "fa-solid fa-trash",
             action: "delete"
           }
@@ -332,8 +315,7 @@ export default function reportJson(id) {
             btnId: "2234",
             btnLabel: "Use",
             hoverLabel: "Use",
-            btnColor: "#4bd396",
-            textColor: "white",
+            btnColor: "op-btn-primary",
             btnIcon: "fa fa-plus",
             redirectUrl: "placeHolderSign",
             action: "redirect",
@@ -345,6 +327,7 @@ export default function reportJson(id) {
             btnId: "1631",
             btnLabel: "Quick send",
             hoverLabel: "Quick send",
+            btnColor: "op-btn-secondary",
             btnIcon: "fa-solid fa-envelope",
             redirectUrl: "",
             action: "bulksend",
@@ -355,7 +338,7 @@ export default function reportJson(id) {
           {
             btnId: "2234",
             hoverLabel: "option",
-            btnColor: "transparent",
+            btnColor: "",
             textColor: "black",
             btnIcon: "fa-solid fa-ellipsis-vertical fa-lg",
             action: "option",
diff --git a/apps/OpenSign/src/pages/ForgetPassword.js b/apps/OpenSign/src/pages/ForgetPassword.js
index cd798464c..810c4d6a6 100644
--- a/apps/OpenSign/src/pages/ForgetPassword.js
+++ b/apps/OpenSign/src/pages/ForgetPassword.js
@@ -117,7 +117,7 @@ function ForgotPassword() {
                     <hr className="my-2 border-none" />
                   </div>
                 </div>
-                <div className="flex justify-between items-center px-4">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-center text-xs font-bold">
                   <button type="submit" className="op-btn op-btn-primary">
                     Submit
                   </button>
diff --git a/apps/OpenSign/src/pages/GuestLogin.js b/apps/OpenSign/src/pages/GuestLogin.js
index aad55b42a..a691e50ea 100644
--- a/apps/OpenSign/src/pages/GuestLogin.js
+++ b/apps/OpenSign/src/pages/GuestLogin.js
@@ -2,11 +2,7 @@ import React, { useState, useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import loader from "../assets/images/loader2.gif";
 import axios from "axios";
-import {
-  isEnableSubscription,
-  modalSubmitBtnColor,
-  themeColor
-} from "../constant/const";
+import { isEnableSubscription, themeColor } from "../constant/const";
 import { contractUsers, getAppLogo } from "../constant/Utils";
 import logo from "../assets/images/logo.png";
 import { appInfo } from "../constant/appinfo";
@@ -322,8 +318,7 @@ function GuestLogin() {
                 <div className="mt-4 flex justify-start">
                   <button
                     type="submit"
-                    style={{ backgroundColor: modalSubmitBtnColor }}
-                    className="mr-2 px-[20px] py-1.5 text-white rounded shadow-md text-center focus:outline-none "
+                    className="op-btn op-btn-primary"
                     disabled={loading}
                   >
                     {loading ? "Loading..." : "Next"}
diff --git a/apps/OpenSign/src/pages/Login.js b/apps/OpenSign/src/pages/Login.js
index 309c08b03..0cb15546b 100644
--- a/apps/OpenSign/src/pages/Login.js
+++ b/apps/OpenSign/src/pages/Login.js
@@ -1150,16 +1150,16 @@ function Login() {
                         </div>
                       </div>
                     </fieldset>
-                    <div className="flex flex-col md:flex-row justify-between items-stretch gap-8 text-center text-xs font-bold mt-2">
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-center text-xs font-bold mt-2">
                       <button
                         type="submit"
-                        className="rounded-sm bg-[#3ac9d6] text-white w-full py-3 shadow outline-none uppercase focus:ring-2 focus:ring-blue-600"
+                        className="op-btn op-btn-primary"
                         disabled={state.loading}
                       >
                         {state.loading ? "Loading..." : "Login"}
                       </button>
                       <NavLink
-                        className="rounded-sm cursor-pointer bg-white border-[1px] border-[#15b4e9] text-[#15b4e9] w-full py-3 shadow uppercase"
+                        className="op-btn op-btn-secondary hover:no-underline hover:text-base-content"
                         to={
                           location.search
                             ? "/signup" + location.search
diff --git a/apps/OpenSign/src/pages/Signup.js b/apps/OpenSign/src/pages/Signup.js
index af58c9c55..5e27cc1cb 100644
--- a/apps/OpenSign/src/pages/Signup.js
+++ b/apps/OpenSign/src/pages/Signup.js
@@ -667,18 +667,17 @@ const Signup = () => {
                       </div>
                     </div>
                   </div>
-                  <div className="flex flex-col md:flex-row justify-between items-stretch gap-8 text-center text-xs font-bold mt-2">
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-center text-xs font-bold mt-2">
                     <button
                       type="submit"
-                      className="rounded-sm bg-[#3ac9d6] text-white w-full py-3 shadow uppercase"
+                      className="op-btn op-btn-primary"
                       disabled={state.loading}
                     >
                       {state.loading ? "Loading..." : "Register"}
                     </button>
                     <NavLink
-                      className="rounded-sm cursor-pointer bg-white border-[1px] border-[#15b4e9] text-[#15b4e9] w-full py-3 shadow uppercase"
+                      className={`op-btn op-btn-secondary hover:no-underline hover:text-base-content`}
                       to={location.search ? "/" + location.search : "/"}
-                      style={width < 768 ? { textAlign: "center" } : {}}
                     >
                       Login
                     </NavLink>
diff --git a/apps/OpenSign/src/primitives/GetReportDisplay.js b/apps/OpenSign/src/primitives/GetReportDisplay.js
index 581757234..1cc073943 100644
--- a/apps/OpenSign/src/primitives/GetReportDisplay.js
+++ b/apps/OpenSign/src/primitives/GetReportDisplay.js
@@ -4,11 +4,7 @@ import { useNavigate } from "react-router-dom";
 import axios from "axios";
 import ModalUi from "./ModalUi";
 import AddSigner from "../components/AddSigner";
-import {
-  modalSubmitBtnColor,
-  modalCancelBtnColor,
-  isEnableSubscription
-} from "../constant/const";
+import { isEnableSubscription } from "../constant/const";
 import Alert from "./Alert";
 import Tooltip from "./Tooltip";
 import { RWebShare } from "react-web-share";
@@ -377,11 +373,13 @@ const ReportTable = (props) => {
     setIsDeleteModal({});
     setIsMakePublic({});
     setSelectedPublicRole("");
-    setIsPublic((prevStates) => ({
-      ...prevStates,
-      [item.objectId]: !prevStates[item.objectId]
-    }));
     setIsPublicProfile({});
+    if (item?.objectId) {
+      setIsPublic((prevStates) => ({
+        ...prevStates,
+        [item.objectId]: !prevStates[item.objectId]
+      }));
+    }
   };
 
   const handleShare = (item) => {
@@ -940,9 +938,9 @@ const ReportTable = (props) => {
               {props.ReportName === "Templates" && isEnableSubscription && (
                 <th className="px-4 py-2">Public</th>
               )}
-              {props.actions?.length > 0 && (
+              {/* {props.actions?.length > 0 && (
                 <th className="px-4 py-2">Action</th>
-              )}
+              )} */}
             </tr>
           </thead>
           <tbody className="text-[12px]">
@@ -963,14 +961,10 @@ const ReportTable = (props) => {
                             <button
                               key={index}
                               onClick={() => handleActionBtn(act, item)}
-                              className={`mb-1 flex justify-center items-center gap-1 px-2 py-1 rounded shadow`}
                               title={act.hoverLabel}
-                              style={{
-                                backgroundColor: act.btnColor
-                                  ? act.btnColor
-                                  : "#3ac9d6",
-                                color: act?.textColor ? act?.textColor : "white"
-                              }}
+                              className={`${
+                                act?.btnColor ? act.btnColor : ""
+                              } op-btn op-btn-sm`}
                             >
                               <i className={act.btnIcon}></i>
                             </button>
@@ -989,19 +983,13 @@ const ReportTable = (props) => {
                               <div className="flex items-center mt-3 gap-2 text-white">
                                 <button
                                   onClick={() => handleDelete(item)}
-                                  className="px-4 py-1.5 text-white rounded shadow-md text-center focus:outline-none "
-                                  style={{
-                                    backgroundColor: modalSubmitBtnColor
-                                  }}
+                                  className="op-btn op-btn-primary"
                                 >
                                   Yes
                                 </button>
                                 <button
                                   onClick={handleClose}
-                                  className="px-4 py-1.5 text-black border-[1px] border-[#ccc] shadow-md rounded focus:outline-none"
-                                  style={{
-                                    backgroundColor: modalCancelBtnColor
-                                  }}
+                                  className="op-btn op-btn-secondary"
                                 >
                                   No
                                 </button>
@@ -1094,10 +1082,9 @@ const ReportTable = (props) => {
                                 <div className="m-[20px]">
                                   <div className="font-normal text-black">
                                     <p className="text-lg">
-                                      {" "}
                                       {isPublic[item.objectId]
-                                        ? `Are you sure you want tof make this templat public ?`
-                                        : `Are you sure you want to make this template private? This will remove it from your public profile ?`}
+                                        ? `Are you sure you want to make this template public ?`
+                                        : `Are you sure you want to make this template private ? This will remove it from your public profile ?`}
                                     </p>
                                     {isPublic[item.objectId] && (
                                       <div className="flex mt-2 gap-2 md:items-center">
@@ -1148,19 +1135,13 @@ const ReportTable = (props) => {
                                   <div className="flex items-center mt-3 gap-2 text-white">
                                     <button
                                       onClick={() => handlePublicTemplate(item)}
-                                      className="px-4 py-1.5 text-white rounded shadow-md text-center focus:outline-none "
-                                      style={{
-                                        backgroundColor: modalSubmitBtnColor
-                                      }}
+                                      className="op-btn op-btn-primary"
                                     >
                                       Submit
                                     </button>
                                     <button
                                       onClick={() => handleClose(item)}
-                                      className="px-4 py-1.5 text-black border-[1px] border-[#ccc] shadow-md rounded focus:outline-none"
-                                      style={{
-                                        backgroundColor: modalCancelBtnColor
-                                      }}
+                                      className="op-btn op-btn-secondary"
                                     >
                                       No
                                     </button>
@@ -1204,10 +1185,7 @@ const ReportTable = (props) => {
                                         be able to make a public template.
                                       </p>
                                       <button
-                                        className="px-4 py-1.5 mt-3 text-white rounded shadow-md text-center focus:outline-none "
-                                        style={{
-                                          backgroundColor: modalSubmitBtnColor
-                                        }}
+                                        className="mt-3 op-btn op-btn-primary"
                                         onClick={() => navigate("/profile")}
                                       >
                                         Add
@@ -1227,28 +1205,18 @@ const ReportTable = (props) => {
                                 data-tut={act?.selector}
                                 key={index}
                                 onClick={() => handleActionBtn(act, item)}
-                                className={`${
-                                  act.action === "option"
-                                    ? ""
-                                    : "rounded shadow"
-                                } ${
-                                  act.btnLabel
-                                    ? "py-[3px] px-1.5"
-                                    : "py-1.5 px-2"
-                                } relative text-center flex text-nowrap items-center justify-center focus:outline-none`}
                                 title={act.hoverLabel}
-                                style={{
-                                  backgroundColor: act.btnColor
-                                    ? act.btnColor
-                                    : "#3ac9d6",
-                                  color: act?.textColor
-                                    ? act?.textColor
-                                    : "white"
-                                }}
+                                className={
+                                  act.action !== "option"
+                                    ? `${
+                                        act?.btnColor ? act.btnColor : ""
+                                      } op-btn op-btn-sm`
+                                    : "text-base-content text-lg mr-2 relative"
+                                }
                               >
                                 <i className={act.btnIcon}></i>
                                 {act.btnLabel && (
-                                  <span className="ml-[4px] uppercase font-medium">
+                                  <span className="uppercase font-medium">
                                     {act.btnLabel}
                                   </span>
                                 )}
@@ -1335,19 +1303,13 @@ const ReportTable = (props) => {
                               <div className="flex items-center mt-3 gap-2 text-white">
                                 <button
                                   onClick={() => handleDelete(item)}
-                                  className="px-4 py-1.5 text-white rounded shadow-md text-center focus:outline-none "
-                                  style={{
-                                    backgroundColor: modalSubmitBtnColor
-                                  }}
+                                  className="op-btn op-btn-primary"
                                 >
                                   Yes
                                 </button>
                                 <button
                                   onClick={handleClose}
-                                  className="px-4 py-1.5 text-black border-[1px] border-[#ccc] shadow-md rounded focus:outline-none"
-                                  style={{
-                                    backgroundColor: modalCancelBtnColor
-                                  }}
+                                  className="op-btn op-btn-secondary"
                                 >
                                   No
                                 </button>
@@ -1426,23 +1388,17 @@ const ReportTable = (props) => {
                               <div className="text-lg font-normal text-black">
                                 Are you sure you want to revoke this document?
                               </div>
-                              <hr className="bg-[#ccc] mt-4 " />
-                              <div className="flex items-center mt-3 gap-2 text-white">
+                              <hr className="bg-[#ccc] mt-4" />
+                              <div className="flex items-center mt-3 gap-2">
                                 <button
                                   onClick={() => handleRevoke(item)}
-                                  className="px-4 py-1.5 text-white rounded shadow-md text-center focus:outline-none "
-                                  style={{
-                                    backgroundColor: modalSubmitBtnColor
-                                  }}
+                                  className="op-btn op-btn-primary"
                                 >
                                   Yes
                                 </button>
                                 <button
                                   onClick={handleClose}
-                                  className="px-4 py-1.5 text-black border-[1px] border-[#ccc] shadow-md rounded focus:outline-none"
-                                  style={{
-                                    backgroundColor: modalCancelBtnColor
-                                  }}
+                                  className="op-btn op-btn-secondary"
                                 >
                                   No
                                 </button>