diff --git a/apps/OpenSign/package-lock.json b/apps/OpenSign/package-lock.json
index 04c9c5cb9..a60813823 100644
--- a/apps/OpenSign/package-lock.json
+++ b/apps/OpenSign/package-lock.json
@@ -58,6 +58,7 @@
         "@babel/runtime-corejs2": "^7.24.7",
         "autoprefixer": "^10.4.19",
         "commitizen": "^4.3.0",
+        "daisyui": "^4.12.2",
         "eslint": "^8.57.0",
         "eslint-plugin-prettier": "^4.2.1",
         "eslint-plugin-react": "^7.34.1",
@@ -9041,6 +9042,16 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "node_modules/css-selector-tokenizer": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
+      "integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "fastparse": "^1.1.2"
+      }
+    },
     "node_modules/css-to-react-native": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.2.tgz",
@@ -9264,6 +9275,15 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/culori": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz",
+      "integrity": "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==",
+      "dev": true,
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      }
+    },
     "node_modules/cz-conventional-changelog": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/cz-conventional-changelog/-/cz-conventional-changelog-3.3.0.tgz",
@@ -9284,6 +9304,25 @@
         "@commitlint/load": ">6.1.1"
       }
     },
+    "node_modules/daisyui": {
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.12.2.tgz",
+      "integrity": "sha512-ed3EFwPRLN+9+/MYPRB1pYjk6plRCBMobfBdSeB3voAS81KdL2pCKtbwJfUUpDdOnJ0F8T6oRdVX02P6UCD0Hg==",
+      "dev": true,
+      "dependencies": {
+        "css-selector-tokenizer": "^0.8",
+        "culori": "^3",
+        "picocolors": "^1",
+        "postcss-js": "^4"
+      },
+      "engines": {
+        "node": ">=16.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/daisyui"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -11119,6 +11158,12 @@
         "punycode": "^1.3.2"
       }
     },
+    "node_modules/fastparse": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
+      "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
+      "dev": true
+    },
     "node_modules/fastq": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
diff --git a/apps/OpenSign/package.json b/apps/OpenSign/package.json
index 247198c26..6fa83b501 100644
--- a/apps/OpenSign/package.json
+++ b/apps/OpenSign/package.json
@@ -88,6 +88,7 @@
     "@babel/runtime-corejs2": "^7.24.7",
     "autoprefixer": "^10.4.19",
     "commitizen": "^4.3.0",
+    "daisyui": "^4.12.2",
     "eslint": "^8.57.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.34.1",
diff --git a/apps/OpenSign/public/index.html b/apps/OpenSign/public/index.html
index 91204d310..61c83ee32 100644
--- a/apps/OpenSign/public/index.html
+++ b/apps/OpenSign/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="cupcake">
 
 <head>
   <meta charset="utf-8" />
@@ -50,4 +50,4 @@
     -->
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/apps/OpenSign/src/App.js b/apps/OpenSign/src/App.js
index d21fc6074..4ccd4fa77 100644
--- a/apps/OpenSign/src/App.js
+++ b/apps/OpenSign/src/App.js
@@ -75,7 +75,7 @@ function App() {
   };
 
   return (
-    <div className="bg-[#eef1f5]">
+    <div className="bg-base-200">
       {isloading ? (
         <Loader />
       ) : (
diff --git a/apps/OpenSign/src/components/AddSigner.js b/apps/OpenSign/src/components/AddSigner.js
index c99eff406..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("");
@@ -238,15 +237,15 @@ const AddSigner = (props) => {
       )}
       <div className="w-full mx-auto p-2">
         {isUserExist && (
-          <div className="mb-3">
+          <div className="mb-3 flex items-center">
             <input
               type="checkbox"
               id="addYourself"
               checked={addYourself}
               onChange={handleAddYourselfChange}
-              className="form-checkbox"
+              className="op-checkbox op-checkbox-sm"
             />
-            <label htmlFor="addYourself" className="ml-2 text-gray-700">
+            <label htmlFor="addYourself" className="ml-2 text-gray-700 mb-0">
               Add Yourself
             </label>
           </div>
@@ -267,7 +266,7 @@ const AddSigner = (props) => {
               onChange={(e) => setName(e.target.value)}
               required
               disabled={addYourself}
-              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
           <div className="mb-3">
@@ -285,7 +284,7 @@ const AddSigner = (props) => {
               onChange={(e) => setEmail(e.target.value?.toLowerCase())}
               required
               disabled={addYourself}
-              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs lowercase"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
           <div className="mb-3">
@@ -301,23 +300,18 @@ const AddSigner = (props) => {
               value={phone}
               onChange={(e) => setPhone(e.target.value)}
               disabled={addYourself}
-              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
 
-          <div className="mt-4 flex 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/AddUser.js b/apps/OpenSign/src/components/AddUser.js
index 8d40db895..1d80fd7bc 100644
--- a/apps/OpenSign/src/components/AddUser.js
+++ b/apps/OpenSign/src/components/AddUser.js
@@ -221,7 +221,7 @@ const AddUser = (props) => {
               value={name}
               onChange={(e) => setName(e.target.value)}
               required
-              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
           <div className="mb-3">
@@ -238,7 +238,7 @@ const AddUser = (props) => {
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               required
-              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
           <div className="mb-3">
@@ -255,7 +255,7 @@ const AddUser = (props) => {
               value={phone}
               onChange={(e) => setPhone(e.target.value)}
               required
-              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
 
diff --git a/apps/OpenSign/src/components/Footer.js b/apps/OpenSign/src/components/Footer.js
index 31753698c..008b1b33c 100644
--- a/apps/OpenSign/src/components/Footer.js
+++ b/apps/OpenSign/src/components/Footer.js
@@ -45,12 +45,16 @@ const Footer = () => {
   };
   return (
     <>
-      <div className="bg-[#222c3c] text-[#98a6ba] text-center text-[13px] py-3">
-        All Rights Reserved &copy; {new Date().getFullYear()} &nbsp;
-        <span onClick={openUrl} className="hover:underline cursor-pointer">
-          {appName} ( version: {version ? version : `${Package.version} `})
-        </span>
-      </div>
+      <footer className="op-footer op-footer-center py-3 bg-base-300 text-base-content text-center text-[13px]">
+        <aside>
+          <p>
+            All Rights Reserved &copy; {new Date().getFullYear()} &nbsp;
+            <span onClick={openUrl} className="hover:underline cursor-pointer">
+              {appName} ( version: {version ? version : `${Package.version} `})
+            </span>
+          </p>
+        </aside>
+      </footer>
       <button
         className={`${
           showButton ? "block" : "hidden"
diff --git a/apps/OpenSign/src/components/FullScreenButton.js b/apps/OpenSign/src/components/FullScreenButton.js
index 7560cc7c5..54e7ac3eb 100644
--- a/apps/OpenSign/src/components/FullScreenButton.js
+++ b/apps/OpenSign/src/components/FullScreenButton.js
@@ -67,7 +67,7 @@ const FullScreenButton = () => {
     <div className="flex items-center">
       <button
         onClick={toggleFullScreen}
-        className="text-black p-2 text-sm focus:outline-none"
+        className="text-base-content p-2 text-sm focus:outline-none"
       >
         {isFullScreen ? (
           <i className="fa-solid fa-compress"></i>
diff --git a/apps/OpenSign/src/components/Header.js b/apps/OpenSign/src/components/Header.js
index 90563aac5..9c4451787 100644
--- a/apps/OpenSign/src/components/Header.js
+++ b/apps/OpenSign/src/components/Header.js
@@ -89,14 +89,16 @@ const Header = ({ showSidebar }) => {
   }, [isOpen]);
 
   return (
-    <div className="flex flex-row justify-between items-center gap-x-3 md:gap-x-4 bg-white md:px-4 px-2 shadow h-[50px] md:w-full ">
-      <button
-        className="cursor-pointer focus:outline-none"
-        onClick={showSidebar}
-      >
-        <i className={`fa-solid fa-bars text-xl `}></i>
-      </button>
-      <div className="flex-1">
+    <div className="op-navbar bg-base-100 shadow">
+      <div className="flex-none">
+        <button
+          className="op-btn op-btn-square op-btn-ghost focus:outline-none"
+          onClick={showSidebar}
+        >
+          <i className="fa-solid fa-bars text-xl text-base-content"></i>
+        </button>
+      </div>
+      <div className="flex-1 ml-2">
         <div className="h-[25px] md:h-[40px] w-auto overflow-hidden">
           <img
             className="object-contain h-full w-auto"
@@ -105,10 +107,7 @@ const Header = ({ showSidebar }) => {
           />
         </div>
       </div>
-      <div
-        id="profile-menu"
-        className="flex justify-between items-center gap-x-3"
-      >
+      <div id="profile-menu" className="flex-none gap-2">
         {!isSubscribe && (
           <div>
             <button
@@ -120,7 +119,7 @@ const Header = ({ showSidebar }) => {
           </div>
         )}
         {isPro && (
-          <div className="w-[35px] h-[35px] rounded-full ring-[1px] ring-offset-2 ring-[#002862] text-[#002862] overflow-hidden font-semibold flex items-center justify-center">
+          <div className="w-[35px] h-[35px] bg-white rounded-full ring-[1px] ring-offset-2 ring-[#002862] text-[#002862] overflow-hidden font-semibold flex items-center justify-center">
             PRO
           </div>
         )}
@@ -140,60 +139,66 @@ const Header = ({ showSidebar }) => {
           </div>
         )}
         {width >= 768 && (
-          <div onClick={toggleDropdown} className="cursor-pointer text-sm">
+          <div
+            onClick={toggleDropdown}
+            className="cursor-pointer text-base-content text-sm"
+          >
             {username && username}
           </div>
         )}
-        <div className="relative">
-          <div className="cursor-pointer">
-            <i onClick={toggleDropdown} className="fa-solid fa-angle-down"></i>
+        <div className="op-dropdown op-dropdown-end" id="profile-menu">
+          <div tabIndex={0} role="button" className="op-btn op-btn-ghost">
+            <i
+              tabIndex={0}
+              role="button"
+              onClick={toggleDropdown}
+              className="fa-solid fa-angle-down text-base-content"
+            ></i>
           </div>
-          <div
-            className={`dropdown absolute text-sm text-gray-700 font-light right-0 mt-4 p-1 w-48 bg-white border rounded-lg shadow-lg z-10 ${
-              isOpen ? "block" : "hidden"
-            }`}
+          <ul
+            tabIndex={0}
+            className="mt-3 z-[1] p-2 shadow op-menu op-menu-sm op-dropdown-content text-base-content bg-base-100 rounded-box w-52"
           >
-            <ul>
-              <li
-                className="hover:bg-gray-100 rounded-t-lg py-1 px-2 cursor-pointer font-normal"
-                onClick={() => openInNewTab("https://docs.opensignlabs.com")}
-              >
+            <li onClick={() => openInNewTab("https://docs.opensignlabs.com")}>
+              <span>
                 <i className="fa-solid fa-book"></i> Docs
-              </li>
-              <li
-                className="hover:bg-gray-100 py-1 px-2 cursor-pointer font-normal"
-                onClick={() => {
-                  setIsOpen(false);
-                  navigate("/profile");
-                }}
-              >
+              </span>
+            </li>
+            <li
+              onClick={() => {
+                setIsOpen(false);
+                navigate("/profile");
+              }}
+            >
+              <span>
                 <i className="fa-regular fa-user"></i> Profile
-              </li>
-              <li
-                className="hover:bg-gray-100 py-1 px-2 cursor-pointer font-normal"
-                onClick={() => {
-                  setIsOpen(false);
-                  navigate("/changepassword");
-                }}
-              >
+              </span>
+            </li>
+            <li
+              onClick={() => {
+                setIsOpen(false);
+                navigate("/changepassword");
+              }}
+            >
+              <span>
                 <i className="fa-solid fa-lock"></i> Change Password
-              </li>
-              <li
-                className="hover:bg-gray-100 py-1 px-2 cursor-pointer font-normal"
-                onClick={() => {
-                  window.open("https://console.opensignlabs.com/");
-                }}
-              >
+              </span>
+            </li>
+            <li
+              onClick={() => {
+                window.open("https://console.opensignlabs.com/");
+              }}
+            >
+              <span>
                 <i className="fa-regular fa-id-card"></i> Console
-              </li>
-              <li
-                className="hover:bg-gray-100 rounded-b-lg py-1 px-2 cursor-pointer font-normal"
-                onClick={closeDropdown}
-              >
+              </span>
+            </li>
+            <li onClick={closeDropdown}>
+              <span>
                 <i className="fa-solid fa-arrow-right-from-bracket"></i> Log Out
-              </li>
-            </ul>
-          </div>
+              </span>
+            </li>
+          </ul>
         </div>
       </div>
     </div>
diff --git a/apps/OpenSign/src/components/LoginGoogle.js b/apps/OpenSign/src/components/LoginGoogle.js
index 7bb53017b..39a34f791 100644
--- a/apps/OpenSign/src/components/LoginGoogle.js
+++ b/apps/OpenSign/src/components/LoginGoogle.js
@@ -3,7 +3,6 @@ import Parse from "parse";
 import { jwtDecode } from "jwt-decode";
 import { useScript } from "../hook/useScript";
 import ModalUi from "../primitives/ModalUi";
-import { modalCancelBtnColor, modalSubmitBtnColor } from "../constant/const";
 
 /*
  * `GoogleSignInBtn`as it's name indicates it render google sign in button
@@ -207,45 +206,22 @@ const GoogleSignInBtn = ({
     localStorage.setItem("parseAppId", appid);
   };
   return (
-    <div style={{ position: "relative" }}>
+    <div className="relative">
       {thirdpartyLoader && (
-        <div
-          style={{
-            position: "fixed",
-            width: "100vw",
-            height: "100vh",
-            backgroundColor: "rgba(0,0,0,0.2)",
-            top: 0,
-            left: 0,
-            zIndex: 2
-          }}
-        >
-          <div
-            style={{
-              position: "fixed",
-              fontSize: "50px",
-              color: "#3ac9d6",
-              top: "50%",
-              left: "45%"
-            }}
-            className="loader-37"
-          ></div>
+        <div className="fixed w-[100vw] h-[100vh] bg-black bg-opacity-25 top-0 left-0 z-20 text-[50px] text-[#3ac9d6]">
+          <div className="fixed top-[50%] left-[45%] loader-37"></div>
         </div>
       )}
       <div ref={googleBtn} className="text-sm"></div>
       <ModalUi showClose={false} isOpen={isModal} title="Sign up form">
-        <form className="px-4 py-3">
+        <form className="px-4 py-3 text-base-content">
           <div className="mb-3">
-            <label
-              htmlFor="Phone"
-              style={{ display: "flex" }}
-              className="block text-xs text-gray-700 font-semibold"
-            >
-              Phone <span style={{ fontSize: 13, color: "red" }}>*</span>
+            <label htmlFor="Phone" className="block text-xs font-semibold">
+              Phone <span className="text-[13px] text-[red]">*</span>
             </label>
             <input
               type="tel"
-              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
               id="Phone"
               value={userDetails.Phone}
               onChange={(e) =>
@@ -258,16 +234,12 @@ const GoogleSignInBtn = ({
             />
           </div>
           <div className="mb-3">
-            <label
-              htmlFor="Company"
-              style={{ display: "flex" }}
-              className="block text-xs text-gray-700 font-semibold"
-            >
-              Company <span style={{ fontSize: 13, color: "red" }}>*</span>
+            <label htmlFor="Company" className="block text-xs font-semibold">
+              Company <span className="text-[13px] text-[red]">*</span>
             </label>
             <input
               type="text"
-              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
               id="Company"
               value={userDetails.Company}
               onChange={(e) =>
@@ -280,16 +252,12 @@ const GoogleSignInBtn = ({
             />
           </div>
           <div className="mb-3">
-            <label
-              htmlFor="JobTitle"
-              style={{ display: "flex" }}
-              className="block text-xs text-gray-700 font-semibold"
-            >
-              Job Title <span style={{ fontSize: 13, color: "red" }}>*</span>
+            <label htmlFor="JobTitle" className="block text-xs font-semibold">
+              Job Title <span className="text-[13px] text-[red]">*</span>
             </label>
             <input
               type="text"
-              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
               id="JobTitle"
               value={userDetails.Destination}
               onChange={(e) =>
@@ -301,20 +269,18 @@ const GoogleSignInBtn = ({
               required
             />
           </div>
-          <div>
+          <div className="flex flex-row gap-2">
             <button
               type="button"
-              className="px-3 py-1.5 text-white rounded shadow-md text-center focus:outline-none "
+              className="op-btn op-btn-primary"
               onClick={() => handleSubmitbtn()}
-              style={{ marginRight: 10, backgroundColor: modalSubmitBtnColor }}
             >
               Sign up
             </button>
             <button
               type="button"
-              className="p-1.5 text-black border-[1px] border-[#ccc] shadow-md rounded focus:outline-none"
+              className="op-btn op-btn-ghost"
               onClick={handleCloseModal}
-              style={{ width: 90, backgroundColor: modalCancelBtnColor }}
             >
               Cancel
             </button>
diff --git a/apps/OpenSign/src/components/dashboard/DashboardButton.js b/apps/OpenSign/src/components/dashboard/DashboardButton.js
index d1f37ea7e..53676563b 100644
--- a/apps/OpenSign/src/components/dashboard/DashboardButton.js
+++ b/apps/OpenSign/src/components/dashboard/DashboardButton.js
@@ -26,18 +26,18 @@ const DashboardButton = (props) => {
         props.Data && props.Data.Redirect_type
           ? "cursor-pointer"
           : "cursor-default"
-      } w-full px-3 py-2 flex text-white rounded-md shadow overflow-hidden`}
+      } w-full shadow-md px-3 py-2 op-card bg-base-100`}
     >
-      <div className="flex items-center justify-start gap-5">
-        <span className="rounded-full bg-black bg-opacity-20 w-[60px] h-[60px]  self-start flex justify-center items-center">
+      <div className="flex flex-row items-center">
+        <span className="rounded-full bg-base-content bg-opacity-20 w-[60px] h-[60px] self-start flex justify-center items-center">
           <i
             className={`${
               props.Icon ? props.Icon : "fa fa-solid fa-info"
             } text-[25px] lg:text-[30px]`}
           ></i>
         </span>
-        <div className="">
-          <div className="text-base lg:text-lg text-black"> {props.Label}</div>
+        <div className="op-card-title text-lg ml-3 text-base-content">
+          {props.Label}
         </div>
       </div>
     </div>
diff --git a/apps/OpenSign/src/components/dashboard/DashboardCard.js b/apps/OpenSign/src/components/dashboard/DashboardCard.js
index 4d18fd061..31bf47f2e 100644
--- a/apps/OpenSign/src/components/dashboard/DashboardCard.js
+++ b/apps/OpenSign/src/components/dashboard/DashboardCard.js
@@ -336,25 +336,29 @@ const DashboardCard = (props) => {
         props.Data && props.Data.Redirect_type
           ? "cursor-pointer"
           : "cursor-default"
-      } w-full h-[140px] px-3 pt-4 pb-10 text-white rounded-md shadow overflow-hidden relative`}
+      }`}
     >
-      <div className="flex items-center justify-start gap-5">
-        <span className="rounded-full bg-black bg-opacity-20 w-[60px] h-[60px]  self-start flex justify-center items-center">
+      <div className="flex items-center justify-start gap-5 text-white">
+        <span className="rounded-full bg-black bg-opacity-20 w-[60px] h-[60px] self-start flex justify-center items-center">
           <i
             className={`${
               props.Icon ? props.Icon : "fa fa-solid fa-info"
             } text-[25px] lg:text-[30px]`}
           ></i>
         </span>
-        <div className="">
+        <div className="font-medium">
           <div className="text-base lg:text-lg"> {props.Label}</div>
           <div className="text-2xl font-light">
             {loading ? <div className="loader-01"></div> : setFormat(response)}
           </div>
         </div>
       </div>
-      <div className="text-xs absolute top-2 right-1">
-        <Tooltip id={props.Label} iconColor={"white"} message={props?.Data?.tourMessage} />
+      <div className="text-xs absolute top-3 right-2">
+        <Tooltip
+          id={props.Label}
+          iconColor={"white"}
+          message={props?.Data?.tourMessage}
+        />
       </div>
     </div>
   );
diff --git a/apps/OpenSign/src/components/dashboard/DashboardReport.js b/apps/OpenSign/src/components/dashboard/DashboardReport.js
index 468347e68..787162114 100644
--- a/apps/OpenSign/src/components/dashboard/DashboardReport.js
+++ b/apps/OpenSign/src/components/dashboard/DashboardReport.js
@@ -121,21 +121,8 @@ function DashboardReport(props) {
   return (
     <>
       {isLoader ? (
-        <div
-          style={{
-            height: "100vh",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          }}
-        >
-          <div
-            style={{
-              fontSize: "45px",
-              color: "#3dd3e0"
-            }}
-            className="loader-37"
-          ></div>
+        <div className="h-[250px] text-[45px] text-[#3dd3e0] flex justify-center items-center">
+          <div className="loader-37"></div>
         </div>
       ) : (
         <>
diff --git a/apps/OpenSign/src/components/dashboard/GetDashboard.js b/apps/OpenSign/src/components/dashboard/GetDashboard.js
index c78abcb01..6b172969c 100644
--- a/apps/OpenSign/src/components/dashboard/GetDashboard.js
+++ b/apps/OpenSign/src/components/dashboard/GetDashboard.js
@@ -18,51 +18,33 @@ const buttonList = [
 ];
 const GetDashboard = (props) => {
   const Button = ({ label, redirectId, redirectType, icon }) => (
-    <div className={"bg-white rounded-md shadow  w-full"}>
-      <Suspense
-        fallback={
-          <div style={{ height: "300px" }}>
-            <div
-              style={{
-                marginLeft: "45%",
-                marginTop: "150px",
-                fontSize: "45px",
-                color: "#3dd3e0"
-              }}
-              className="loader-37"
-            ></div>
-          </div>
-        }
-      >
-        <DashboardButton
-          Icon={icon}
-          Label={label}
-          Data={{ Redirect_type: redirectType, Redirect_id: redirectId }}
-        />
-      </Suspense>
-    </div>
+    <Suspense
+      fallback={
+        <div className="h-[300px] text-[45px] text-[#3dd3e0] flex justify-center items-center">
+          <div className="loader-37"></div>
+        </div>
+      }
+    >
+      <DashboardButton
+        Icon={icon}
+        Label={label}
+        Data={{ Redirect_type: redirectType, Redirect_id: redirectId }}
+      />
+    </Suspense>
   );
   const renderSwitchWithTour = (col) => {
     switch (col.widget.type) {
       case "Card":
         return (
           <div
-            className={"bg-[#2ed8b6] rounded-md shadow mb-3 md:mb-0"}
+            className="op-card bg-[#2ed8b6] w-full h-[140px] px-3 pt-4 mb-3 shadow-md"
             data-tut={col.widget.data.tourSection}
             style={{ background: col.widget.bgColor }}
           >
             <Suspense
               fallback={
-                <div style={{ height: "300px" }}>
-                  <div
-                    style={{
-                      marginLeft: "45%",
-                      marginTop: "150px",
-                      fontSize: "45px",
-                      color: "#3dd3e0"
-                    }}
-                    className="loader-37"
-                  ></div>
+                <div className="h-[300px] text-[45px] text-[#3dd3e0] flex justify-center items-center">
+                  <div className="loader-37"></div>
                 </div>
               }
             >
@@ -72,7 +54,6 @@ const GetDashboard = (props) => {
                 Format={col.widget.format && col.widget.format}
                 Data={col.widget.data}
                 FilterData={col.widget.filter}
-                DefaultQuery={props.DefaultQuery}
               />
             </Suspense>
           </div>
@@ -89,7 +70,7 @@ const GetDashboard = (props) => {
         );
       }
       default:
-        return null;
+        return <></>;
     }
   };
   const renderSwitch = (col) => {
@@ -97,7 +78,7 @@ const GetDashboard = (props) => {
       case "Card":
         return (
           <div
-            className={"bg-[#2ed8b6] rounded-md shadow mb-3 md:mb-0"}
+            className="op-card bg-[#2ed8b6] w-full h-[140px] px-3 pt-4 mb-3 shadow-md"
             style={{ background: col.widget.bgColor }}
           >
             <Suspense fallback={<div>please wait</div>}>
@@ -107,7 +88,6 @@ const GetDashboard = (props) => {
                 Format={col.widget.format && col.widget.format}
                 Data={col.widget.data}
                 FilterData={col.widget.filter}
-                DefaultQuery={props.DefaultQuery}
               />
             </Suspense>
           </div>
@@ -122,7 +102,7 @@ const GetDashboard = (props) => {
         );
       }
       default:
-        return null;
+        return <></>;
     }
   };
   return (
@@ -130,7 +110,7 @@ const GetDashboard = (props) => {
       <div className="mb-3">
         <div
           data-tut={"tourbutton"}
-          className="flex flex-col md:flex-row gap-6 md:gap-8"
+          className="flex flex-col md:flex-row gap-4"
         >
           {buttonList.map((btn) => (
             <Button
@@ -143,21 +123,19 @@ const GetDashboard = (props) => {
           ))}
         </div>
       </div>
-      {props.dashboard.map((val, key) => (
-        <div key={"a" + key} className="row">
-          {val.columns.map((col, i) =>
-            col.widget.data && col.widget.data.tourSection ? (
-              <div key={i} className={props.classnameArray[key][i]}>
-                {renderSwitchWithTour(col)}
-              </div>
-            ) : (
-              <div key={i} className={props.classnameArray[key][i]}>
-                {renderSwitch(col)}
-              </div>
-            )
-          )}
-        </div>
-      ))}
+      <div className="grid grid-cols-12 w-full gap-x-4">
+        {props?.dashboard?.columns?.map((col, i) =>
+          col.widget.data && col.widget.data.tourSection ? (
+            <div key={i} className={col?.colsize}>
+              {renderSwitchWithTour(col)}
+            </div>
+          ) : (
+            <div key={i} className={col?.colsize}>
+              {renderSwitch(col)}
+            </div>
+          )
+        )}
+      </div>
     </div>
   );
 };
diff --git a/apps/OpenSign/src/components/opensigndrive/DriveBody.js b/apps/OpenSign/src/components/opensigndrive/DriveBody.js
index 1a40f878b..5e6ae978d 100644
--- a/apps/OpenSign/src/components/opensigndrive/DriveBody.js
+++ b/apps/OpenSign/src/components/opensigndrive/DriveBody.js
@@ -376,23 +376,15 @@ function DriveBody(props) {
         </tr>
       )
     ) : listType === "list" && data.Type === "Folder" ? (
-      <div key={ind} className="folderBox">
+      <div key={ind} className="icon-container">
         <ContextMenu.Root>
           <ContextMenu.Trigger className="ContextMenuTrigger">
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "column",
-                cursor: "pointer"
-              }}
-              data-tut={props.dataTutSeventh}
-            >
+            <div data-tut={props.dataTutSeventh}>
               <img
-                alt="no img"
+                alt="folder"
                 onClick={() => handleOnclikFolder(data)}
                 src={folder}
-                width={100}
-                height={103}
+                className="w-full h-full"
               />
               {rename === data.objectId ? (
                 <input
@@ -450,7 +442,7 @@ function DriveBody(props) {
                 <ContextMenu.Trigger className="ContextMenuTrigger">
                   <img
                     alt="PDF"
-                    className="pdf-icon"
+                    className="w-full h-full"
                     src={pdfLogo}
                     onClick={() => checkPdfStatus(data)}
                     data-tut={props.dataTutSixth}
@@ -587,13 +579,9 @@ function DriveBody(props) {
           </Table>
         </div>
       ) : (
-        <div className="pdfContainer">
+        <div className="flex flex-row flex-wrap items-center mt-1 pb-[20px] mx-[5px]">
           {props.pdfData.map((data, ind) => {
-            return (
-              <div className="box" key={ind}>
-                {handleFolderData(data, ind, "list")}
-              </div>
-            );
+            return <div key={ind}>{handleFolderData(data, ind, "list")}</div>;
           })}
         </div>
       )}
@@ -611,42 +599,22 @@ function DriveBody(props) {
         isOpen={isDeleteDoc}
         headerColor={themeColor}
         title={"Delete Document"}
-        handleClose={() => {
-          setIsDeleteDoc(false);
-        }}
+        handleClose={() => setIsDeleteDoc(false)}
       >
-        <div style={{ height: "100%", padding: 20 }}>
+        <div className="h-full p-[20px]">
           <p>Are you sure you want to delete this document?</p>
-
-          <div
-            style={{
-              height: "1px",
-              backgroundColor: "#9f9f9f",
-              width: "100%",
-              marginTop: "15px",
-              marginBottom: "15px"
-            }}
-          ></div>
-
+          <div className="h-[1px] w-full bg-[#9f9f9f] my-[15px]"></div>
           <button
-            onClick={() => {
-              handleDeleteDocument(selectDoc);
-            }}
-            style={{
-              background: themeColor,
-              color: "white"
-            }}
+            onClick={() => handleDeleteDocument(selectDoc)}
             type="button"
-            className="finishBtn"
+            className="op-btn op-btn-primary mr-2"
           >
             Yes
           </button>
           <button
-            onClick={() => {
-              setIsDeleteDoc(false);
-            }}
+            onClick={() => setIsDeleteDoc(false)}
             type="button"
-            className="finishBtn cancelBtn"
+            className="op-btn op-btn-neutral"
           >
             No
           </button>
diff --git a/apps/OpenSign/src/components/pdf/AddRoleModal.js b/apps/OpenSign/src/components/pdf/AddRoleModal.js
index 630a4bd61..d6e485015 100644
--- a/apps/OpenSign/src/components/pdf/AddRoleModal.js
+++ b/apps/OpenSign/src/components/pdf/AddRoleModal.js
@@ -21,7 +21,7 @@ const AddRoleModal = (props) => {
                 ? "User " + (props.signersdata.length + 1)
                 : "User 1"
             }
-            className="addUserInput"
+            className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs mt-1"
           />
           <p
             style={{
diff --git a/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js b/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js
index 3f95eaac4..1fd68b856 100644
--- a/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js
+++ b/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { isEnableSubscription, themeColor } from "../../constant/const";
+import { isEnableSubscription } from "../../constant/const";
 import ModalUi from "../../primitives/ModalUi";
 import { radioButtonWidget } from "../../constant/Utils";
 import PremiumAlertHeader from "../../primitives/PremiumAlertHeader";
@@ -147,7 +147,7 @@ function DropdownWidgetOption(props) {
 
   return (
     <ModalUi isOpen={props.showDropdown} title={props.title} showClose={false}>
-      <div className="h-full p-[15px]">
+      <div className="h-full p-[15px] text-base-content">
         <form
           onSubmit={(e) => {
             e.preventDefault();
@@ -155,38 +155,25 @@ function DropdownWidgetOption(props) {
           }}
         >
           <div>
-            <label style={{ fontSize: "13px", fontWeight: "600" }}>
-              Name<span style={{ color: "red", fontSize: 13 }}> *</span>
+            <label className="text-[13px] font-semibold">
+              Name<span className="text-[red] text-[13px]"> *</span>
             </label>
             <input
               required
               defaultValue={dropdownName}
               value={dropdownName}
               onChange={(e) => setDropdownName(e.target.value)}
-              className="drodown-input"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
 
-            <label
-              style={{ fontSize: "13px", fontWeight: "600", marginTop: "5px" }}
-            >
+            <label className="text-[13px] font-semibold mt-[5px]">
               Options
             </label>
-
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "column"
-              }}
-            >
+            <div className="flex flex-col">
               {dropdownOptionList.map((option, index) => (
                 <div
                   key={index}
-                  style={{
-                    display: "flex",
-                    flexDirection: "row",
-                    marginBottom: "5px",
-                    alignItems: "center"
-                  }}
+                  className="flex flex-row mb-[5px] items-center"
                 >
                   {props.type === "checkbox" && !props.isSignYourself && (
                     <input
@@ -206,51 +193,34 @@ function DropdownWidgetOption(props) {
                           setDefaultCheckbox(removeOption);
                         }
                       }}
-                      style={{
-                        width: "23px",
-                        height: "19px",
-                        marginRight: "5px"
-                      }}
+                      className="op-checkbox focus:outline-none hover:border-base-content mr-[5px]"
                     />
                   )}
                   <input
                     required
-                    className="drodown-input"
+                    className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                     type="text"
                     value={option}
                     onChange={(e) => handleInputChange(index, e.target.value)}
                   />
 
                   <i
-                    className="fa-solid fa-rectangle-xmark"
+                    className="fa-solid fa-rectangle-xmark text-[25px] ml-[10px] text-error"
                     onClick={() => handleDeleteInput(index)}
-                    style={{
-                      color: "red",
-                      fontSize: "25px",
-                      marginLeft: "10px"
-                    }}
                   ></i>
                 </div>
               ))}
               <i
                 onClick={handleAddInput}
-                style={{
-                  cursor: "pointer",
-                  color: themeColor,
-                  fontSize: "25px",
-                  marginLeft: "10px"
-                }}
-                className="fa-solid fa-square-plus"
+                className="fa-solid fa-square-plus text-[25px] ml-[10px] text-primary"
               ></i>
               <div>
                 {props.type === "checkbox" && !props.isSignYourself && (
                   <>
                     <label
-                      style={{
-                        fontSize: "13px",
-                        fontWeight: "600",
-                        color: !props.isSubscribe && "gray"
-                      }}
+                      className={`${
+                        !props.isSubscribe ? "text-[gray]" : ""
+                      } text-[13px] font-semibold`}
                     >
                       Minimun check
                     </label>
@@ -263,18 +233,16 @@ function DropdownWidgetOption(props) {
                         const count = handleSetMinMax(e);
                         setMinCount(count);
                       }}
-                      className={
+                      className={`${
                         props.isSubscribe || !isEnableSubscription
-                          ? "drodown-input"
-                          : "disabled drodown-input"
-                      }
+                          ? ""
+                          : "disabled "
+                      } op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs`}
                     />
                     <label
-                      style={{
-                        fontSize: "13px",
-                        fontWeight: "600",
-                        color: !props.isSubscribe && "gray"
-                      }}
+                      className={`${
+                        !props.isSubscribe ? "text-[gray]" : ""
+                      } text-[13px] font-semibold`}
                     >
                       Maximum check
                     </label>
@@ -286,11 +254,11 @@ function DropdownWidgetOption(props) {
                         const count = handleSetMinMax(e);
                         setMaxCount(count);
                       }}
-                      className={
+                      className={`${
                         props.isSubscribe || !isEnableSubscription
-                          ? "drodown-input"
-                          : "disabled drodown-input"
-                      }
+                          ? ""
+                          : "disabled "
+                      } op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs`}
                     />
                   </>
                 )}
@@ -298,32 +266,22 @@ function DropdownWidgetOption(props) {
             </div>
             {["dropdown", radioButtonWidget].includes(props.type) && (
               <>
-                <label
-                  style={{
-                    fontSize: "13px",
-                    fontWeight: "600",
-                    marginTop: "5px"
-                  }}
-                >
+                <label className="text-[13px] font-semibold mt-[5px]">
                   Default value
                 </label>
                 <select
                   onChange={(e) => setDefaultValue(e.target.value)}
-                  className="drodown-input"
+                  className="op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content w-full text-xs"
                   name="defaultvalue"
                   value={defaultValue}
                   placeholder="select default value"
                 >
-                  <option value="" disabled hidden style={{ fontSize: "13px" }}>
+                  <option value="" disabled hidden className="text-[13px]">
                     Select...
                   </option>
                   {dropdownOptionList.map((data, ind) => {
                     return (
-                      <option
-                        style={{ fontSize: "13px" }}
-                        key={ind}
-                        value={data}
-                      >
+                      <option className="text-[13px]" key={ind} value={data}>
                         {data}
                       </option>
                     );
@@ -333,35 +291,21 @@ function DropdownWidgetOption(props) {
             )}
             {props.type !== "checkbox" && props.type !== radioButtonWidget && (
               <>
-                <div
-                  style={{
-                    display: "flex",
-                    flexDirection: "row",
-                    gap: 10,
-                    marginTop: "0.5rem"
-                  }}
-                >
+                <div className="flex flex-row gap-[10px] mt-[0.5rem]">
                   {statusArr.map((data, ind) => {
                     return (
                       <div
                         key={ind}
-                        style={{
-                          display: "flex",
-                          flexDirection: "row",
-                          gap: 5,
-                          alignItems: "center"
-                        }}
+                        className="flex flex-row gap-[5px] items-center"
                       >
                         <input
-                          style={{ accentColor: "red" }}
+                          className="op-radio op-radio-xs my-1"
                           type="radio"
                           name="status"
                           onChange={() => setStatus(data.toLowerCase())}
                           checked={status.toLowerCase() === data.toLowerCase()}
                         />
-                        <div style={{ fontSize: "13px", fontWeight: "500" }}>
-                          {data}
-                        </div>
+                        <div className="text-[13px] font-500">{data}</div>
                       </div>
                     );
                   })}
@@ -369,33 +313,31 @@ function DropdownWidgetOption(props) {
               </>
             )}
             {["checkbox", radioButtonWidget].includes(props.type) && (
-              <div className="flex flex-row gap-5 mt-2 items-center text-center">
+              <div className="flex flex-row gap-5 my-2 items-center text-center">
                 {!props.isSignYourself && (
-                  <div>
+                  <div className="flex items-center">
                     <input
                       id="isreadonly"
                       type="checkbox"
                       checked={isReadOnly}
-                      onChange={(e) => {
-                        setIsReadOnly(e.target.checked);
-                      }}
+                      className="op-checkbox op-checkbox-sm"
+                      onChange={(e) => setIsReadOnly(e.target.checked)}
                     />
-                    <label className="ml-1" htmlFor="isreadonly">
+                    <label className="ml-1 mb-0" htmlFor="isreadonly">
                       Is read only
                     </label>
                   </div>
                 )}
-                <div>
+                <div className="flex items-center">
                   <input
                     id="ishidelabel"
                     type="checkbox"
                     checked={isHideLabel}
-                    onChange={(e) => {
-                      setIsHideLabel(e.target.checked);
-                    }}
+                    className="op-checkbox op-checkbox-sm"
+                    onChange={(e) => setIsHideLabel(e.target.checked)}
                   />
 
-                  <label className="ml-1" htmlFor="ishidelabel">
+                  <label className="ml-1 mb-0" htmlFor="ishidelabel">
                     Hide labels
                   </label>
                 </div>
@@ -421,19 +363,15 @@ function DropdownWidgetOption(props) {
 
           <button
             disabled={dropdownOptionList.length === 0 && true}
-            style={{
-              background: themeColor,
-              color: "white"
-            }}
             type="submit"
-            className={"finishBtn"}
+            className="op-btn op-btn-primary"
           >
             Save
           </button>
           {props.currWidgetsDetails?.options?.values?.length > 0 && (
             <button
               type="submit"
-              className="finishBtn cancelBtn"
+              className="op-btn op-btn-ghost ml-1"
               onClick={() => {
                 props.handleClose && props.handleClose();
                 resetState();
diff --git a/apps/OpenSign/src/components/pdf/EditTemplate.js b/apps/OpenSign/src/components/pdf/EditTemplate.js
index 59c573941..9bc91a957 100644
--- a/apps/OpenSign/src/components/pdf/EditTemplate.js
+++ b/apps/OpenSign/src/components/pdf/EditTemplate.js
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-import "../../styles/AddUser.css";
 import { checkIsSubscribed, getFileName } from "../../constant/Utils";
 import PremiumAlertHeader from "../../primitives/PremiumAlertHeader";
 import Upgrade from "../../primitives/Upgrade";
@@ -60,28 +59,20 @@ const EditTemplate = ({ template, onSuccess }) => {
   };
   return (
     <div className="max-h-[300px] md:max-h-[400px] overflow-y-scroll p-[10px]">
-      <div className="form-wrapper">
+      <div className="text-base-content">
         <form onSubmit={handleSubmit}>
           <div>
-            <label htmlFor="name" style={{ fontSize: 13 }}>
+            <label htmlFor="name" className="text-[13px]">
               File
             </label>
-            <div
-              style={{
-                padding: "0.5rem 0.75rem",
-                border: "1px solid #d1d5db",
-                borderRadius: "0.375rem",
-                fontSize: "0.75rem",
-                fontWeight: "700"
-              }}
-            >
+            <div className="op-input op-input-bordered op-input-sm focus:outline-none py-2 font-semibold w-full text-xs">
               {getFileName(template.URL)}
             </div>
           </div>
           <div className="form-section">
-            <label htmlFor="name" style={{ fontSize: 13 }}>
+            <label htmlFor="name" className="text-[13px]">
               Name
-              <span style={{ color: "red", fontSize: 13 }}> *</span>
+              <span className="text-[13px] text-[red]"> *</span>
             </label>
             <input
               type="text"
@@ -89,11 +80,11 @@ const EditTemplate = ({ template, onSuccess }) => {
               value={formData.Name}
               onChange={(e) => handleStrInput(e)}
               required
-              className="addUserInput"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
           <div className="form-section">
-            <label htmlFor="Note" style={{ fontSize: 13 }}>
+            <label htmlFor="Note" className="text-[13px]">
               Note
             </label>
             <input
@@ -102,11 +93,11 @@ const EditTemplate = ({ template, onSuccess }) => {
               id="Note"
               value={formData.Note}
               onChange={(e) => handleStrInput(e)}
-              className="addUserInput"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
           <div className="form-section">
-            <label htmlFor="Description" style={{ fontSize: 13 }}>
+            <label htmlFor="Description" className="text-[13px]">
               Description
             </label>
             <input
@@ -115,46 +106,32 @@ const EditTemplate = ({ template, onSuccess }) => {
               id="Description"
               value={formData.Description}
               onChange={(e) => handleStrInput(e)}
-              className="addUserInput"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
           <div className="form-section">
-            <label style={{ fontSize: 13 }}>Send In Order</label>
-            <div
-              style={{
-                display: "flex",
-                alignItems: "center",
-                gap: 8,
-                marginLeft: 8,
-                marginBottom: 5
-              }}
-            >
+            <label className="text-[13px]">Send In Order</label>
+            <div className="flex items-center gap-[8px] ml-[8px] mb-[5px]">
               <input
                 type="radio"
                 value={"true"}
+                className="op-radio op-radio-xs"
                 name="SendinOrder"
                 checked={formData.SendinOrder === "true"}
                 onChange={handleStrInput}
               />
-              <div style={{ fontSize: 12 }}>Yes</div>
+              <div className="text-[12px]">Yes</div>
             </div>
-            <div
-              style={{
-                display: "flex",
-                alignItems: "center",
-                gap: 8,
-                marginLeft: 8,
-                marginBottom: 5
-              }}
-            >
+            <div className="flex items-center gap-[8px] ml-[8px] mb-[5px]">
               <input
                 type="radio"
                 value={"false"}
                 name="SendinOrder"
+                className="op-radio op-radio-xs"
                 checked={formData.SendinOrder === "false"}
                 onChange={handleStrInput}
               />
-              <div style={{ fontSize: 12 }}>No</div>
+              <div className="text-[12px]">No</div>
             </div>
           </div>
           <div className="text-xs mt-2">
@@ -186,10 +163,8 @@ const EditTemplate = ({ template, onSuccess }) => {
                 checked={formData.AutomaticReminders}
                 onChange={handleAutoReminder}
                 type="checkbox"
-                value=""
-                className="sr-only peer"
+                className="op-toggle transition-all checked:[--tglbg:#3368ff] checked:bg-white mt-2"
               />
-              <div className="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-1 peer-focus:ring-black rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-black peer-checked:bg-blue-600 mt-2"></div>
             </label>
           </div>
           {isSubscribe && formData?.AutomaticReminders === true && (
@@ -202,15 +177,14 @@ const EditTemplate = ({ template, onSuccess }) => {
                 type="number"
                 value={formData.RemindOnceInEvery}
                 name="RemindOnceInEvery"
-                className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                 onChange={handleStrInput}
                 required
               />
             </div>
           )}
-          {/* <SelectFolder onSuccess={handleFolder} folderCls={"contracts_Template"} /> */}
-          <div className="buttoncontainer">
-            <button type="submit" className="submitbutton">
+          <div className="mt-[1rem] flex justify-start">
+            <button type="submit" className="op-btn op-btn-primary">
               Submit
             </button>
           </div>
diff --git a/apps/OpenSign/src/components/pdf/EmailBody.js b/apps/OpenSign/src/components/pdf/EmailBody.js
index ce0f8442b..d4639e098 100644
--- a/apps/OpenSign/src/components/pdf/EmailBody.js
+++ b/apps/OpenSign/src/components/pdf/EmailBody.js
@@ -1,52 +1,42 @@
 import React from "react";
 import Tooltip from "../../primitives/Tooltip";
-
 import ReactQuill from "react-quill";
 import "react-quill/dist/quill.snow.css";
 import EditorToolbar, { module1, formats } from "./EditorToolbar";
 
 export function EmailBody(props) {
   return (
-    <React.Fragment>
-      <div className={`flex justify-center  py-1 p-2`}>
-        <div className=" flex flex-col">
-          <form>
-            <div className="text-lg font-normal text-black">
-              <div className=" m-2 md:m-10 p-3 md:p-10 shadow-md hover:shadow-lg border-[1px] border-indigo-800 rounded-md">
-                <label className="text-sm ml-2">
-                  Subject <Tooltip message={"email subject"} />
-                </label>
-                <input
-                  required
-                  value={props.requestSubject}
-                  onChange={(e) => props.setRequestSubject(e.target.value)}
-                  placeholder='${senderName} has requested you to sign "${documentName}"'
-                  className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
-                />
-                <label className="text-sm ml-2 mt-3">
-                  Body <Tooltip message={"email body"} />
-                </label>
-
-                <div className="px-3 py-2 w-full focus:outline-none text-xs">
-                  <EditorToolbar containerId="toolbar1" />
-                  <ReactQuill
-                    theme="snow"
-                    value={props.requestBody}
-                    // value={typedText}
-                    placeholder="add body of email "
-                    // readOnly={loading}
-                    // onChangeSelection={handleTextSelection} // Listen for text selection
-                    ref={props.editorRef}
-                    modules={module1}
-                    formats={formats}
-                    onChange={props.handleOnchangeRequest}
-                  />
-                </div>
-              </div>
-            </div>
-          </form>
+    <form className="flex flex-col text-base-content text-lg font-normal">
+      <div className="m-2 md:m-10 p-3 md:p-10 shadow-md hover:shadow-lg border-[1px] border-indigo-800 rounded-md">
+        <label className="text-sm ml-2">
+          Subject <Tooltip message={"email subject"} />
+        </label>
+        <input
+          required
+          value={props.requestSubject}
+          onChange={(e) => props.setRequestSubject(e.target.value)}
+          placeholder='${senderName} has requested you to sign "${documentName}"'
+          className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+        />
+        <label className="text-sm ml-2 mt-3">
+          Body <Tooltip message={"email body"} />
+        </label>
+        <div className="px-3 py-2 w-full focus:outline-none text-xs">
+          <EditorToolbar containerId="toolbar1" />
+          <ReactQuill
+            theme="snow"
+            value={props.requestBody}
+            // value={typedText}
+            placeholder="add body of email "
+            // readOnly={loading}
+            // onChangeSelection={handleTextSelection} // Listen for text selection
+            ref={props.editorRef}
+            modules={module1}
+            formats={formats}
+            onChange={props.handleOnchangeRequest}
+          />
         </div>
       </div>
-    </React.Fragment>
+    </form>
   );
 }
diff --git a/apps/OpenSign/src/components/shared/fields/SelectFolder.js b/apps/OpenSign/src/components/shared/fields/SelectFolder.js
index e9d0000b9..b6c353515 100644
--- a/apps/OpenSign/src/components/shared/fields/SelectFolder.js
+++ b/apps/OpenSign/src/components/shared/fields/SelectFolder.js
@@ -174,7 +174,7 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
       <div className="relative max-w-sm">
         <div
           onClick={() => SetIsOpen(true)}
-          className=" cursor-pointer rounded px-[20px] py-[20px] bg-white border border-gray-200 shadow flex max-w-sm gap-8 items-center"
+          className=" cursor-pointer rounded px-[20px] py-[20px] bg-base-100 border-[1px] border-base-200 shadow flex max-w-sm gap-8 items-center"
         >
           <div>
             <i
diff --git a/apps/OpenSign/src/components/shared/fields/SelectSigners.js b/apps/OpenSign/src/components/shared/fields/SelectSigners.js
index f6ec88c82..21426aa9b 100644
--- a/apps/OpenSign/src/components/shared/fields/SelectSigners.js
+++ b/apps/OpenSign/src/components/shared/fields/SelectSigners.js
@@ -3,16 +3,6 @@ import Parse from "parse";
 import "../../../styles/AddUser.css";
 import AsyncSelect from "react-select/async";
 
-const customStyles = {
-  control: (provided) => ({
-    ...provided,
-    fontSize: "13px" // Font size for the control
-  }),
-  option: (provided) => ({
-    ...provided,
-    fontSize: "13px" // Font size for the options
-  })
-};
 const SelectSigners = (props) => {
   const [userList, setUserList] = useState([]);
   const [selected, setSelected] = useState();
@@ -79,10 +69,10 @@ const SelectSigners = (props) => {
   };
 
   return (
-    <div className="addusercontainer">
-      <div className="form-wrapper">
-        <div className="form-section" style={{ marginBottom: 0 }}>
-          <label style={{ fontSize: 14, fontWeight: "700" }}>Choose User</label>
+    <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 from contacts</label>
           <AsyncSelect
             cacheOptions
             defaultOptions
@@ -91,20 +81,24 @@ 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>
-        {isError ? (
-          <p style={{ color: "red", fontSize: "12px", margin: "5px" }}>
-            Please select signer
-          </p>
-        ) : (
-          <p style={{ color: "transparent", fontSize: "12px", margin: "5px" }}>
-            .
-          </p>
-        )}
+        <p
+          className={`${
+            isError ? "text-[red]" : "text-transparent"
+          } text-[12px] m-[5px]`}
+        >
+          Please select signer
+        </p>
         <div>
-          <button className="submitbutton" onClick={() => handleAdd()}>
+          <button className="op-btn op-btn-primary" onClick={() => handleAdd()}>
             Submit
           </button>
         </div>
diff --git a/apps/OpenSign/src/components/shared/fields/SignersInput.js b/apps/OpenSign/src/components/shared/fields/SignersInput.js
index 97d77e3fa..39e039d99 100644
--- a/apps/OpenSign/src/components/shared/fields/SignersInput.js
+++ b/apps/OpenSign/src/components/shared/fields/SignersInput.js
@@ -108,15 +108,17 @@ const SignersInput = (props) => {
       <label className="block relative">
         Signers
         {props.required && <span className="text-red-500 text-[13px]">*</span>}
-        <span className="absolute ml-1 text-xs z-50">
+        <span className="absolute ml-1 text-xs z-30">
           <Tooltip
             id={"signer-tooltip"}
-            message={"Begin typing a contact's name to see suggested signers from your saved contacts or add new ones. Arrange the signing order by adding signers in the desired sequence. Use the '+' button to include signers and the 'x' to remove them. Each signer will receive an email prompt to sign the document in the order listed."}
+            message={
+              "Begin typing a contact's name to see suggested signers from your saved contacts or add new ones. Arrange the signing order by adding signers in the desired sequence. Use the '+' button to include signers and the 'x' to remove them. Each signer will receive an email prompt to sign the document in the order listed."
+            }
           />
         </span>
       </label>
-      <div style={{ display: "flex", gap: 5 }}>
-        <div style={{ flexWrap: "wrap", width: "100%" }}>
+      <div className="flex gap-x-[5px]">
+        <div className="w-full">
           <Select
             onSortEnd={onSortEnd}
             distance={4}
@@ -126,6 +128,13 @@ const SignersInput = (props) => {
             onChange={onChange}
             closeMenuOnSelect={false}
             required={props.required}
+            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>
         <div
@@ -133,16 +142,7 @@ const SignersInput = (props) => {
             setIsModel(true);
             openModal();
           }}
-          style={{
-            cursor: "pointer",
-            borderRadius: 4,
-            border: "1px solid #ccc",
-            minHeight: 38,
-            minWidth: 48,
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center"
-          }}
+          className="cursor-pointer border-[1px] op-inut op-input-bordered min-h-[38px] min-w-[48px] flex justify-center items-center"
         >
           <i className="fas fa-plus"></i>
         </div>
diff --git a/apps/OpenSign/src/components/sidebar/Menu.js b/apps/OpenSign/src/components/sidebar/Menu.js
index 0e42c542f..c43326da1 100644
--- a/apps/OpenSign/src/components/sidebar/Menu.js
+++ b/apps/OpenSign/src/components/sidebar/Menu.js
@@ -3,7 +3,7 @@ import { NavLink } from "react-router-dom";
 
 const Menu = ({ item, isOpen, closeSidebar }) => {
   return (
-    <li key={item.title} role="none">
+    <li key={item.title} role="none" className="my-0.5">
       <NavLink
         to={
           item.pageType
@@ -12,8 +12,8 @@ const Menu = ({ item, isOpen, closeSidebar }) => {
         }
         className={({ isActive }) =>
           `${
-            isActive ? "text-[#0056b3] bg-[#eef1f5]" : ""
-          } mx-auto flex items-center hover:bg-[#eef1f5] p-3 lg:p-4 cursor-pointer`
+            isActive ? " bg-base-300 text-base-content" : ""
+          } flex items-center text-left p-3 lg:p-4 text-base-content hover:text-base-content focus:bg-base-300 hover:bg-base-300 hover:no-underline focus:outline-none`
         }
         onClick={closeSidebar}
         tabIndex={isOpen ? 0 : -1}
diff --git a/apps/OpenSign/src/components/sidebar/Sidebar.js b/apps/OpenSign/src/components/sidebar/Sidebar.js
index 766ed00dc..92c8778b6 100644
--- a/apps/OpenSign/src/components/sidebar/Sidebar.js
+++ b/apps/OpenSign/src/components/sidebar/Sidebar.js
@@ -9,6 +9,7 @@ import dp from "../../assets/images/dp.png";
 
 const Sidebar = ({ isOpen, closeSidebar }) => {
   const [menuList, setmenuList] = useState([]);
+  const [submenuOpen, setSubmenuOpen] = useState(false);
   let username = localStorage.getItem("username");
   const image = localStorage.getItem("profileImg") || dp;
   const tenantname = localStorage.getItem("TenantName");
@@ -33,10 +34,18 @@ const Sidebar = ({ isOpen, closeSidebar }) => {
     }
   };
 
+  const toggleSubmenu = (title) => {
+    setSubmenuOpen({ [title]: !submenuOpen[title] });
+  };
+
+  const handleMenuItem = () => {
+    closeSidebar();
+    setSubmenuOpen({});
+  };
   return (
     <aside
-      className={`bg-white text-[#444] h-screen w-full md:w-[300px] overflow-y-auto transform transition-transform z-40 md:translate-x-0
-      ${isOpen ? "translate-x-0 block" : "-translate-x-full hidden"}`}
+      className={`absolute md:relative bg-base-100 h-screen overflow-y-auto transition-all z-40 hide-scrollbar
+     ${isOpen ? "w-full md:w-[300px]" : "w-0"}`}
     >
       <div className="flex px-2 py-3 gap-2 items-center shadow-md">
         <div className="w-[75px] h-[75px] rounded-full ring-[2px] ring-offset-2 ring-gray-400 overflow-hidden">
@@ -47,13 +56,20 @@ const Sidebar = ({ isOpen, closeSidebar }) => {
           />
         </div>
         <div>
-          <p className="text-[14px] font-bold">{username}</p>
-          <p className={`text-[12px] ${tenantname ? "mt-2" : ""}`}>
+          <p className="text-[14px] font-bold text-base-content">{username}</p>
+          <p
+            className={`text-[12px] text-base-content ${
+              tenantname ? "mt-2" : ""
+            }`}
+          >
             {tenantname}
           </p>
         </div>
       </div>
-      <nav aria-label="OpenSign Sidebar Navigation">
+      <nav
+        className="op-menu op-menu-sm"
+        aria-label="OpenSign Sidebar Navigation"
+      >
         <ul
           className="text-sm"
           role="menubar"
@@ -65,19 +81,21 @@ const Sidebar = ({ isOpen, closeSidebar }) => {
                 key={item.title}
                 item={item}
                 isOpen={isOpen}
-                closeSidebar={closeSidebar}
+                closeSidebar={handleMenuItem}
               />
             ) : (
               <Submenu
                 key={item.title}
                 item={item}
                 closeSidebar={closeSidebar}
+                toggleSubmenu={toggleSubmenu}
+                submenuOpen={submenuOpen}
               />
             )
           )}
         </ul>
       </nav>
-      <footer className="mt-4 flex justify-center items-center text-[25px] text-black gap-3">
+      <footer className="mt-4 flex justify-center items-center text-[25px] text-base-content gap-3">
         <SocialMedia />
       </footer>
     </aside>
diff --git a/apps/OpenSign/src/components/sidebar/SubMenu.js b/apps/OpenSign/src/components/sidebar/SubMenu.js
index d77745437..f8b89270b 100644
--- a/apps/OpenSign/src/components/sidebar/SubMenu.js
+++ b/apps/OpenSign/src/components/sidebar/SubMenu.js
@@ -1,19 +1,13 @@
-import React, { useState } from "react";
+import React from "react";
 import { NavLink } from "react-router-dom";
 
-const Submenu = ({ item, closeSidebar }) => {
-  const [submenuOpen, setSubmenuOpen] = useState(false);
+const Submenu = ({ item, closeSidebar, toggleSubmenu, submenuOpen }) => {
   const { title, icon, children } = item;
-
-  const toggleSubmenu = () => {
-    setSubmenuOpen(!submenuOpen);
-  };
-
   return (
-    <li role="none">
+    <li role="none" className="my-0.5">
       <button
-        onClick={toggleSubmenu}
-        className="w-full flex items-center text-left text-[#444] p-3 lg:p-4 hover:bg-[#eef1f5] focus:outline-none focus:text-[#0056b3] focus:bg-[#eef1f5]"
+        onClick={() => toggleSubmenu(item.title)}
+        className="flex items-center text-left p-3 lg:p-4 text-base-content hover:text-base-content focus:bg-base-300 hover:bg-base-300 hover:no-underline focus:outline-none "
         aria-expanded={submenuOpen}
         aria-haspopup="true"
         aria-controls={`submenu-${title}`}
@@ -23,23 +17,29 @@ const Submenu = ({ item, closeSidebar }) => {
           <span className="ml-3 lg:ml-4">{title}</span>
           <i
             className={`${
-              submenuOpen ? "fa-solid fa-angle-down" : "fa-solid fa-angle-right"
+              submenuOpen[item.title]
+                ? "fa-solid fa-angle-down"
+                : "fa-solid fa-angle-right"
             }`}
             aria-hidden="true"
           ></i>
         </div>
       </button>
-      {submenuOpen && (
+      {submenuOpen[item.title] && (
         <ul id={`submenu-${title}`} role="menu" aria-label={`${title} submenu`}>
           {children.map((childItem) => (
-            <li key={childItem.title} role="none">
+            <li key={childItem.title} role="none" className="my-0.5">
               <NavLink
                 to={
                   childItem.pageType
                     ? `/${childItem.pageType}/${childItem.objectId}`
                     : `/${childItem.objectId}`
                 }
-                className="block pl-6 md:pl-8 py-2 text-sm text-gray-700 hover:bg-blue-500 hover:text-white focus:text-[#0056b3] focus:bg-[#eef1f5] cursor-pointer"
+                className={({ isActive }) =>
+                  `${
+                    isActive ? "bg-base-300 text-base-content" : ""
+                  } flex items-center text-left pl-6 md:pl-8 py-2 text-sm cursor-pointer text-base-content hover:text-base-content focus:bg-base-300 hover:bg-base-300 hover:no-underline focus:outline-none`
+                }
                 onClick={closeSidebar}
                 role="menuitem"
                 tabIndex={submenuOpen ? 0 : -1}
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/index.css b/apps/OpenSign/src/index.css
index 3dbcaa369..adb44bf45 100644
--- a/apps/OpenSign/src/index.css
+++ b/apps/OpenSign/src/index.css
@@ -2,17 +2,16 @@
 @tailwind components;
 @tailwind utilities;
 
-body{
-    background-color: white;
+body {
+  background-color: white;
 }
 
 /* Custom CSS to hide scrollbar */
 .hide-scrollbar::-webkit-scrollbar {
-    display: none;
-  }
-  
-.hide-scrollbar {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
+  display: none;
+}
+
+.hide-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 }
-  
\ No newline at end of file
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/json/dashboardJson.js b/apps/OpenSign/src/json/dashboardJson.js
new file mode 100644
index 000000000..deea5021f
--- /dev/null
+++ b/apps/OpenSign/src/json/dashboardJson.js
@@ -0,0 +1,90 @@
+const dashboardJson = [
+  {
+    id: "35KBoSgoAK",
+    columns: [
+      {
+        colsize: "col-span-12 md:col-span-6 lg:col-span-6",
+        widget: {
+          type: "Card",
+          icon: "fas fa-signature",
+          bgColor: "#f0058e",
+          label: "Need your Signature",
+          description: null,
+          data: {
+            id: "e04ee9dc-932d-6b80-0202-703fd154eb74",
+            queryType: "",
+            class: "contracts_Document",
+            query:
+              'where={"$and":[{"AuditTrail.UserPtr":{"$ne":{"__type":"Pointer","className": "contracts_Users","objectId":"#objectId#"}}},{"AuditTrail.Activity":{"$ne":"Signed"}}],"Signers":{"$in":[{"__type":"Pointer","className":"contracts_Users","objectId":"#objectId#"}]},"IsDeclined":{"$ne":true},"IsCompleted":{"$ne":true},"Type":{"$ne":"Folder"},"Placeholders":{"$ne":null},"ExpiryDate":{"#*gt":{"__type":"#Date#","iso":"#today#"}}}&count=1',
+            key: "count",
+            Redirect_type: "Report",
+            Redirect_id: "4Hhwbp482K",
+            tourSection: "tourcard1",
+            tourMessage:
+              "Clicking on this card will take you to the list of documents awaiting your review."
+          }
+        }
+      },
+      {
+        colsize: "col-span-12 md:col-span-6 lg:col-span-6",
+        widget: {
+          type: "Card",
+          icon: "fas fa-sign-out-alt",
+          bgColor: "#g0058e",
+          label: "Out for signatures",
+          description: null,
+          data: {
+            id: "c1935cc0-28d4-3d73-b72a-8c1e3d18a17f",
+            queryType: "",
+            class: "contracts_Document",
+            query:
+              'where={"Type":{"#*ne":"Folder"},"Signers":{"#*exists":true,"#*ne":[]},"Placeholders":{"#*ne":null},"IsCompleted":{"#*ne":true},"IsDeclined":{"#*ne":true},"IsArchive":{"#*ne":true},"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"#UserId.objectId#"},"ExpiryDate":{"#*gt":{"__type":"#Date#","iso":"#today#"}}}&count=1',
+            key: "count",
+            Redirect_type: "Report",
+            Redirect_id: "1MwEuxLEkF",
+            tourSection: "tourcard2",
+            tourMessage:
+              "Clicking on this card will take you to a list of documents awaiting signature."
+          }
+        }
+      },
+      {
+        colsize: "col-span-12 md:col-span-6 lg:col-span-6",
+        widget: {
+          type: "report",
+          reportId: "5Go51Q7T8r",
+          data: {
+            tourSection: "tourreport1",
+            tourMessage:
+              "This is a list of documents that are waiting for your signature."
+          }
+        }
+      },
+      {
+        colsize: "col-span-12 md:col-span-6 lg:col-span-6",
+        widget: {
+          type: "report",
+          reportId: "d9k3UfYHBc",
+          data: {
+            tourSection: "tourreport2",
+            tourMessage:
+              "This is a list of documents you've sent to other parties for signature."
+          }
+        }
+      },
+      {
+        colsize: "col-span-12 md:col-span-12 lg:col-span-12",
+        widget: {
+          type: "report",
+          reportId: "kC5mfynCi4",
+          data: {
+            tourSection: "tourreport3",
+            tourMessage:
+              "This are documents you have started but have not finalized for sending."
+          }
+        }
+      }
+    ]
+  }
+];
+export default dashboardJson;
diff --git a/apps/OpenSign/src/layout/HomeLayout.js b/apps/OpenSign/src/layout/HomeLayout.js
index 6198b4e40..5427af365 100644
--- a/apps/OpenSign/src/layout/HomeLayout.js
+++ b/apps/OpenSign/src/layout/HomeLayout.js
@@ -253,21 +253,8 @@ const HomeLayout = () => {
       {isUserValid ? (
         <>
           {isLoader ? (
-            <div
-              style={{
-                height: "100vh",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center"
-              }}
-            >
-              <div
-                style={{
-                  fontSize: "45px",
-                  color: "#3dd3e0"
-                }}
-                className="loader-37"
-              ></div>
+            <div className="flex h-[100vh] justify-center items-center text-[45px] text-[#3dd3e0]">
+              <div className="loader-37"></div>
             </div>
           ) : (
             <>
@@ -277,7 +264,7 @@ const HomeLayout = () => {
                   id="renderList"
                   className="relative h-screen flex flex-col justify-between w-full overflow-y-auto"
                 >
-                  <div className="bg-[#eef1f5] p-3">{<Outlet />}</div>
+                  <div className="bg-base-200 p-3">{<Outlet />}</div>
                   <div className="z-30">
                     <Footer />
                   </div>
diff --git a/apps/OpenSign/src/pages/ChangePassword.js b/apps/OpenSign/src/pages/ChangePassword.js
index c815558da..13b9977a7 100644
--- a/apps/OpenSign/src/pages/ChangePassword.js
+++ b/apps/OpenSign/src/pages/ChangePassword.js
@@ -49,13 +49,13 @@ function ChangePassword() {
     return <Navigate to="/" />;
   }
   return (
-    <div className="w-full bg-white shadow rounded p-2">
+    <div className="w-full bg-base-100 text-base-content shadow rounded p-2">
       <Title title={"Change Password"} />
       <div className="text-xl font-bold border-b-[1px] border-gray-300">
         Change Password
       </div>
       <div className="m-2">
-        <form onSubmit={handleSubmit}>
+        <form onSubmit={handleSubmit} className=" flex flex-col gap-y-2">
           <div>
             <label htmlFor="currentpassword" className="block text-xs ml-1">
               Current Password
@@ -65,7 +65,7 @@ function ChangePassword() {
               name="currentpassword"
               value={currentpassword}
               onChange={(e) => setCurrentPassword(e.target.value)}
-              className="px-3 py-2 mb-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+              className="op-input op-input-bordered op-input-sm text-xs w-full"
               placeholder="Current Password"
               required
             />
@@ -79,7 +79,7 @@ function ChangePassword() {
               name="newpassword"
               value={newpassword}
               onChange={(e) => setnewpassword(e.target.value)}
-              className="px-3 py-2 mb-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+              className="op-input op-input-bordered op-input-sm text-xs w-full"
               placeholder="New Password"
               required
             />
@@ -91,17 +91,14 @@ function ChangePassword() {
             <input
               type="password"
               name="confirmpassword"
-              className="px-3 py-2 mb-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+              className="op-input op-input-bordered op-input-sm text-xs w-full"
               value={confirmpassword}
               onChange={(e) => setconfirmpassword(e.target.value)}
               placeholder="Confirm Password"
               required
             />
           </div>
-          <button
-            type="submit"
-            className="bg-[#188ae2] m-2 px-4 py-3 rounded-sm shadow-md text-white text-xs font-semibold uppercase"
-          >
+          <button type="submit" className="op-btn op-btn-primary shadow-md m-2">
             Change Password
           </button>
         </form>
diff --git a/apps/OpenSign/src/pages/Dashboard.js b/apps/OpenSign/src/pages/Dashboard.js
index 7b82b2638..20b03527e 100644
--- a/apps/OpenSign/src/pages/Dashboard.js
+++ b/apps/OpenSign/src/pages/Dashboard.js
@@ -1,20 +1,18 @@
 import React, { useState, useEffect } from "react";
-import Parse from "parse";
 import "../styles/loader.css";
 import GetDashboard from "../components/dashboard/GetDashboard";
 import { useNavigate, useParams } from "react-router-dom";
 import Title from "../components/Title";
 import { useDispatch } from "react-redux";
 import { saveTourSteps } from "../redux/reducers/TourStepsReducer";
+import dashboardJson from "../json/dashboardJson";
 
 const Dashboard = () => {
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const { id } = useParams();
-  const [dashboard, setdashboard] = useState([]);
-  const [classnameArray, setclassnameArray] = useState([]);
-  const [loading, setloading] = useState(false);
-  const [defaultQuery, setDefaultQuery] = useState("");
+  const [dashboard, setdashboard] = useState({});
+  const [loading, setloading] = useState(true);
 
   useEffect(() => {
     if (localStorage.getItem("accesstoken")) {
@@ -30,53 +28,10 @@ const Dashboard = () => {
   }, [id]);
 
   const getDashboard = async (id) => {
-    setloading(true);
     try {
-      var forms = Parse.Object.extend("w_dashboard");
-      var query = new Parse.Query(forms);
-      query.equalTo("objectId", id);
-      const results = await query.first();
-      const resultjson = results.toJSON();
-      let classArray = [];
-      let DefaultQuery = "";
-      resultjson.rows.forEach((x) => {
-        let col_lg = "",
-          col_md = "",
-          col_xs = "",
-          col_sm = "",
-          col_ = "",
-          obj = {};
-        let subItem = [];
-        let item = "";
-        x.columns.forEach((y) => {
-          if (y.widget.type === "customeHtml") {
-            DefaultQuery = y.widget.data[0].default;
-          }
-          if (Number(y["collg"]) > 0) {
-            col_lg = "col-lg-" + y["collg"];
-          }
-          if (Number(y["colmd"]) > 0) {
-            col_md = "col-md-" + y["colmd"];
-          }
-          if (Number(y["colxs"]) > 0) {
-            col_xs = "col-xs-" + y["colxs"];
-          }
-          if (Number(y["colsm"]) > 0) {
-            col_sm = "col-sm-" + y["colsm"];
-          }
-          if (Number(y["col"]) > 0) {
-            col_ = "col-" + y["col"];
-          }
-          item =
-            col_lg + " " + col_md + " " + col_xs + " " + col_sm + " " + col_;
-          subItem.push(item);
-        });
-        obj = subItem;
-        classArray.push(obj);
-      });
-      setdashboard(resultjson.rows);
-      // console.log("resultjson.rows ", resultjson.rows);
-      const arr = resultjson.rows[0].columns
+      const dashboard = dashboardJson.find((x) => x.id === id);
+      setdashboard(dashboard);
+      const dashboardTour = dashboard.columns
         .filter((col) => {
           if (col.widget.data && col.widget.data.tourSection) {
             return col;
@@ -90,14 +45,7 @@ const Dashboard = () => {
             // style: { backgroundColor: "#abd4d2" },
           };
         });
-      dispatch(saveTourSteps(arr));
-      // console.log("arr ", arr);
-      setclassnameArray(classArray);
-      if (localStorage.getItem("DashboardDefaultFilter")) {
-        setDefaultQuery(localStorage.getItem("DashboardDefaultFilter"));
-      } else {
-        setDefaultQuery(DefaultQuery);
-      }
+      dispatch(saveTourSteps(dashboardTour));
       setloading(false);
     } catch (e) {
       console.error("Problem", e);
@@ -105,32 +53,16 @@ const Dashboard = () => {
     }
   };
 
-  let _dash = (
-    <GetDashboard
-      dashboard={dashboard}
-      classnameArray={classnameArray}
-      DefaultQuery={defaultQuery}
-    />
-  );
-  if (loading) {
-    _dash = (
-      <div style={{ height: "300px", backgroundColor: "white" }}>
-        <div
-          style={{
-            marginLeft: "45%",
-            marginTop: "150px",
-            fontSize: "45px",
-            color: "#3dd3e0"
-          }}
-          className="loader-37"
-        ></div>
-      </div>
-    );
-  }
   return (
     <React.Fragment>
       <Title title="Dashboard" />
-      {_dash}
+      {loading ? (
+        <div className="h-[300px] text-[45px] text-[#3dd3e0] w-full bg-white flex justify-center items-center rounded-md">
+          <div className="loader-37"></div>
+        </div>
+      ) : (
+        <GetDashboard dashboard={dashboard} />
+      )}
     </React.Fragment>
   );
 };
diff --git a/apps/OpenSign/src/pages/ForgetPassword.js b/apps/OpenSign/src/pages/ForgetPassword.js
index 53e048387..810c4d6a6 100644
--- a/apps/OpenSign/src/pages/ForgetPassword.js
+++ b/apps/OpenSign/src/pages/ForgetPassword.js
@@ -1,21 +1,26 @@
 import React, { useEffect, useState } from "react";
 import Title from "../components/Title";
-import { NavLink } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import login_img from "../assets/images/login_img.svg";
 import Parse from "parse";
 import Alert from "../primitives/Alert";
 import { appInfo } from "../constant/appinfo";
 import { useDispatch } from "react-redux";
 import { fetchAppInfo } from "../redux/reducers/infoReducer";
+import { isEnableSubscription } from "../constant/const";
+import { getAppLogo } from "../constant/Utils";
 
 function ForgotPassword() {
   const dispatch = useDispatch();
+  const navigate = useNavigate();
   const [state, setState] = useState({
     email: "",
     password: "",
     hideNav: ""
   });
   const [sentStatus, setSentStatus] = useState("");
+  const [image, setImage] = useState();
+
   const handleChange = (event) => {
     const { name, value } = event.target;
     setState({ ...state, [name]: value });
@@ -51,15 +56,26 @@ function ForgotPassword() {
 
   useEffect(() => {
     dispatch(fetchAppInfo());
+    saveLogo();
     resize();
     window.addEventListener("resize", resize);
     return () => window.removeEventListener("resize", resize);
     // eslint-disable-next-line
   }, []);
-
-  let image = appInfo.applogo;
+  const saveLogo = async () => {
+    if (isEnableSubscription) {
+      const logo = await getAppLogo();
+      if (logo) {
+        setImage(logo);
+      } else {
+        setImage(appInfo?.applogo || undefined);
+      }
+    } else {
+      setImage(appInfo?.applogo || undefined);
+    }
+  };
   return (
-    <div className="bg-white">
+    <div>
       <Title title="Forgot password page" />
       {sentStatus === "success" && (
         <Alert type="success">
@@ -69,29 +85,31 @@ function ForgotPassword() {
       {sentStatus === "failed" && (
         <Alert type={"danger"}>Please setup email adapter </Alert>
       )}
-      <div>
-        <div className="md:m-10 lg:m-16 md:p-4 lg:p-10 p-5 bg-[#ffffff] md:border-[1px] md:border-gray-400 ">
-          <div className="w-[250px] h-[66px] inline-block">
-            {state.hideNav ? (
-              <img src={image} width="100%" alt="" />
-            ) : (
-              <img src={image} width="100%" alt="" />
+      <div className="md:p-10 lg:p-16">
+        <div className="md:p-4 lg:p-10 p-4 bg-base-100 text-base-content op-card">
+          <div className="w-[250px] h-[66px] inline-block overflow-hidden">
+            {image && (
+              <img
+                src={image}
+                className="object-contain h-full"
+                alt="applogo"
+              />
             )}
           </div>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-x-2">
-            <div className="">
+            <div>
               <form onSubmit={handleSubmit}>
                 <h2 className="text-[30px] mt-6">Welcome Back !</h2>
                 <span className="text-[12px] text-[#878787]">
                   Reset Your Password
                 </span>
-                <div className="shadow-md rounded my-4">
+                <div className="w-full my-4 op-card bg-base-100 shadow-md outline outline-1 outline-slate-300/50">
                   <div className="px-6 py-4">
                     <label className="block text-xs">Email</label>
                     <input
-                      type="text"
-                      className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                      type="email"
                       name="email"
+                      className="op-input op-input-bordered op-input-sm w-full"
                       value={state.email}
                       onChange={handleChange}
                       required
@@ -99,19 +117,16 @@ function ForgotPassword() {
                     <hr className="my-2 border-none" />
                   </div>
                 </div>
-                <div className="flex justify-between items-center px-4">
-                  <button
-                    type="submit"
-                    className="rounded-sm bg-[#3ac9d6] text-white px-4 py-3 text-xs font-semibold shadow uppercase"
-                  >
+                <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>
-                  <NavLink
-                    to="/"
-                    className="rounded-sm bg-white border-[1px] border-[#15b4e9] text-[#15b4e9] px-4 py-3 text-xs font-semibold shadow uppercase cursor-pointer"
+                  <button
+                    onClick={() => navigate("/", { replace: true })}
+                    className="op-btn op-btn-secondary"
                   >
                     Login
-                  </NavLink>
+                  </button>
                 </div>
               </form>
             </div>
diff --git a/apps/OpenSign/src/pages/Form.js b/apps/OpenSign/src/pages/Form.js
index 9765d7432..1ec79f513 100644
--- a/apps/OpenSign/src/pages/Form.js
+++ b/apps/OpenSign/src/pages/Form.js
@@ -484,6 +484,9 @@ const Forms = (props) => {
     setpercentage(0);
     setTimeout(() => setIsReset(false), 50);
   };
+  const handleCancel = () => {
+    navigate("/dashboard/35KBoSgoAK");
+  };
   const handlePasswordSubmit = async (e) => {
     e.preventDefault();
     setIsPassword(false);
@@ -561,7 +564,7 @@ const Forms = (props) => {
     setFormData((prev) => ({ ...prev, autoreminder: !formData.autoreminder }));
   };
   return (
-    <div className="shadow-md rounded my-2 p-3 bg-[#ffffff] md:border-[1px] md:border-gray-600/50">
+    <div className="shadow-md rounded my-2 p-3 bg-base-100 text-base-content md:border-[1px] md:border-gray-600/50">
       <Title title={props?.title} />
       {isAlert && (
         <Alert type={isErr ? "danger" : "success"}>
@@ -571,16 +574,8 @@ const Forms = (props) => {
         </Alert>
       )}
       {isSubmit ? (
-        <div style={{ height: "300px" }}>
-          <div
-            style={{
-              marginLeft: "45%",
-              marginTop: "150px",
-              fontSize: "45px",
-              color: "#3dd3e0"
-            }}
-            className="loader-37"
-          ></div>
+        <div className="h-[300px] text-[45px] text-[#3dd3e0] flex justify-center items-center">
+          <div className="loader-37"></div>
         </div>
       ) : (
         <>
@@ -629,12 +624,12 @@ const Forms = (props) => {
                     style={{ width: `${percentage}%` }}
                   ></div>
                 </div>
-                <span className="text-black text-sm">{percentage}%</span>
+                <span className="text-base-content text-sm">{percentage}%</span>
               </div>
             )}
             {isDecrypting && (
               <div className="flex items-center gap-x-2">
-                <span className="text-black text-sm">
+                <span className="text-base-content text-sm">
                   Decrypting pdf please wait...
                 </span>
               </div>
@@ -648,13 +643,13 @@ const Forms = (props) => {
               </label>
               {fileupload.length > 0 ? (
                 <div className="flex gap-2 justify-center items-center">
-                  <div className="flex justify-between items-center px-2 py-2 w-full font-bold rounded border-[1px] border-[#ccc] text-gray-500 bg-white text-[13px]">
+                  <div className="flex justify-between items-center op-input op-input-bordered op-input-sm w-full text-x text-[13px]">
                     <div className="break-all">
                       file selected : {getFileName(fileupload)}
                     </div>
                     <div
                       onClick={() => setFileUpload("")}
-                      className="cursor-pointer px-[10px] text-[20px] font-bold bg-white text-red-500"
+                      className="cursor-pointer px-[10px] text-[20px] font-bold text-red-500"
                     >
                       <i className="fa-solid fa-xmark"></i>
                     </div>
@@ -667,10 +662,10 @@ const Forms = (props) => {
                   )}
                 </div>
               ) : (
-                <div className="flex gap-2 justify-center items-center">
+                <div className="flex gap-2 justify-center items-center ">
                   <input
                     type="file"
-                    className="bg-white px-2 py-1.5 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                    className="op-file-input op-file-input-bordered op-file-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                     onChange={(e) => handleFileInput(e)}
                     ref={inputFileRef}
                     accept={
@@ -698,7 +693,7 @@ const Forms = (props) => {
               </label>
               <input
                 name="Name"
-                className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                 value={formData.Name}
                 onChange={(e) => handleStrInput(e)}
                 required
@@ -708,7 +703,7 @@ const Forms = (props) => {
               <label className="block">Description</label>
               <input
                 name="Description"
-                className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                 value={formData.Description}
                 onChange={(e) => handleStrInput(e)}
               />
@@ -726,7 +721,7 @@ const Forms = (props) => {
               </label>
               <input
                 name="Note"
-                className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                 value={formData.Note}
                 onChange={(e) => handleStrInput(e)}
                 required
@@ -748,7 +743,7 @@ const Forms = (props) => {
                 <input
                   type="number"
                   name="TimeToCompleteDays"
-                  className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                  className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                   value={formData.TimeToCompleteDays}
                   onChange={(e) => handleStrInput(e)}
                   required
@@ -786,7 +781,6 @@ const Forms = (props) => {
                             <li>
                               <span className="font-bold">Yes:</span>
                               <span>
-                                {" "}
                                 Selecting this option will send the signing
                                 request to the first signer initially. Once the
                                 first signer completes their part, the next
@@ -822,6 +816,7 @@ const Forms = (props) => {
                     <input
                       type="radio"
                       value={"true"}
+                      className="op-radio op-radio-xs"
                       name="SendinOrder"
                       checked={formData.SendinOrder === "true"}
                       onChange={handleStrInput}
@@ -833,6 +828,7 @@ const Forms = (props) => {
                       type="radio"
                       value={"false"}
                       name="SendinOrder"
+                      className="op-radio op-radio-xs"
                       checked={formData.SendinOrder === "false"}
                       onChange={handleStrInput}
                     />
@@ -865,13 +861,11 @@ const Forms = (props) => {
                     } relative block items-center mb-0`}
                   >
                     <input
+                      type="checkbox"
+                      className="op-toggle transition-all checked:[--tglbg:#3368ff] checked:bg-white"
                       checked={formData.autoreminder}
                       onChange={handleAutoReminder}
-                      type="checkbox"
-                      value=""
-                      className="sr-only peer"
                     />
-                    <div className="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-1 peer-focus:ring-black rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-black peer-checked:bg-blue-600 mt-2"></div>
                   </label>
                 </div>
                 {formData?.autoreminder === true && (
@@ -884,7 +878,7 @@ const Forms = (props) => {
                       type="number"
                       value={formData.remindOnceInEvery}
                       name="remindOnceInEvery"
-                      className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                      className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                       onChange={handleStrInput}
                       required
                     />
@@ -892,21 +886,21 @@ const Forms = (props) => {
                 )}
               </>
             )}
-            <div className="flex items-center mt-3 gap-2 text-white">
+            <div className="flex items-center mt-3 gap-2">
               <button
                 className={`${
-                  isSubmit && "cursor-progress"
-                } bg-[#1ab6ce] rounded-sm shadow-md text-[13px] font-semibold uppercase text-white py-1.5 px-2.5 focus:outline-none`}
+                  isSubmit ? "cursor-progress" : ""
+                } op-btn op-btn-primary`}
                 type="submit"
                 disabled={isSubmit}
               >
                 Next
               </button>
               <div
-                className="cursor-pointer bg-[#188ae2] rounded-sm shadow-md text-[13px] font-semibold uppercase text-white py-1.5 px-2.5 text-center ml-[2px] focus:outline-none"
-                onClick={() => handleReset()}
+                className="op-btn op-btn-ghost"
+                onClick={() => handleCancel()}
               >
-                Reset
+                Cancel
               </div>
             </div>
           </form>
diff --git a/apps/OpenSign/src/pages/GenerateToken.js b/apps/OpenSign/src/pages/GenerateToken.js
index 47251abe6..54a140495 100644
--- a/apps/OpenSign/src/pages/GenerateToken.js
+++ b/apps/OpenSign/src/pages/GenerateToken.js
@@ -126,7 +126,7 @@ function GenerateToken() {
           ></div>
         </div>
       ) : (
-        <div className="bg-white flex flex-col justify-center shadow rounded">
+        <div className="bg-base-100 text-base-content flex flex-col justify-center shadow rounded">
           {!isEnableSubscription && <PremiumAlertHeader />}
           <h1 className={"ml-4 mt-3 mb-2 font-semibold"}>
             OpenSign™ API{" "}
@@ -155,7 +155,7 @@ function GenerateToken() {
                     {apiToken ? apiToken : "_____"}
                   </span>
                   <button
-                    className="rounded hover:bg-[#15b4e9] border-[1px] border-[#15b4e9] text-[#15b4e9] hover:text-white px-2.5 py-2 focus:outline-none ml-2"
+                    className="op-btn op-btn-primary op-btn-sm ml-2"
                     onClick={() => copytoclipboard(apiToken)}
                   >
                     <i className="fa-solid fa-copy"></i>
@@ -164,7 +164,7 @@ function GenerateToken() {
               </div>
               <button
                 onClick={apiToken ? handleModal : handleSubmit}
-                className="rounded hover:bg-[#15b4e9] border-[1px] border-[#15b4e9] text-[#15b4e9] hover:text-white text-xs md:text-sm lg:text-base px-2 py-2 focus:outline-none"
+                className="op-btn op-btn-primary"
               >
                 {apiToken ? "Regenerate Token" : "Generate Token"}
               </button>
@@ -178,7 +178,7 @@ function GenerateToken() {
                   "https://docs.opensignlabs.com/docs/API-docs/opensign-api-v-1"
                 )
               }
-              className="rounded hover:bg-[#15b4e9] border-[1px] my-2 border-[#15b4e9] text-[#15b4e9] hover:text-white px-11 py-2 text-xs md:text-base focus:outline-none"
+              className="op-btn op-btn-primary my-2"
             >
               View Docs
             </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 382bf79b5..0cb15546b 100644
--- a/apps/OpenSign/src/pages/Login.js
+++ b/apps/OpenSign/src/pages/Login.js
@@ -10,11 +10,7 @@ import { NavLink, useNavigate, useLocation } from "react-router-dom";
 import login_img from "../assets/images/login_img.svg";
 import { useWindowSize } from "../hook/useWindowSize";
 import ModalUi from "../primitives/ModalUi";
-import {
-  isEnableSubscription,
-  modalCancelBtnColor,
-  modalSubmitBtnColor
-} from "../constant/const";
+import { isEnableSubscription } from "../constant/const";
 import Alert from "../primitives/Alert";
 import { appInfo } from "../constant/appinfo";
 import { fetchAppInfo } from "../redux/reducers/infoReducer";
@@ -1063,47 +1059,32 @@ function Login() {
     }
   };
   return (
-    <div className="bg-white">
+    <div>
       <Title title={"Login Page"} />
       {state.loading && (
         <div
           aria-live="assertive"
-          style={{
-            position: "fixed",
-            width: "100vw",
-            height: "100vh",
-            backgroundColor: "rgba(0,0,0,0.2)",
-            top: 0,
-            left: 0,
-            zIndex: 2
-          }}
+          className="fixed w-full h-full flex justify-center items-center bg-black bg-opacity-30 z-20 text-[50px] text-[#3ac9d6]"
         >
-          <div
-            role="status"
-            style={{
-              position: "fixed",
-              fontSize: "50px",
-              color: "#3ac9d6",
-              top: "50%",
-              left: "50%",
-              transform: "translate(-50%, -50%)"
-            }}
-            className="loader-37"
-          >
+          <div role="status" className="loader-37">
             <span className="sr-only">Loading...</span>
           </div>
         </div>
       )}
       {appInfo && appInfo.appId ? (
         <>
-          <div aria-labelledby="loginHeading" role="region">
-            <div className="md:m-10 lg:m-16 md:p-4 lg:p-10 p-4 bg-[#ffffff] md:border-[1px] md:border-gray-400 ">
+          <div
+            aria-labelledby="loginHeading"
+            role="region"
+            className="md:p-10 lg:p-16"
+          >
+            <div className="md:p-4 lg:p-10 p-4 bg-base-100 text-base-content op-card">
               <div className="w-[250px] h-[66px] inline-block overflow-hidden">
                 {image && (
                   <img
                     src={image}
                     className="object-contain h-full"
-                    alt="The image displays the OpenSign logo with a stylized blue square with an open corner, accompanied by the tagline Seal the Deal, Openly."
+                    alt="applogo"
                   />
                 )}
               </div>
@@ -1115,20 +1096,20 @@ function Login() {
                       <legend className="text-[12px] text-[#878787]">
                         Login to your account
                       </legend>
-                      <div className="px-6 py-4 outline outline-1 outline-slate-300/50 my-2 rounded shadow-md">
+                      <div className="w-full px-6 py-3 my-1 op-card bg-base-100 shadow-md outline outline-1 outline-slate-300/50">
                         <label className="block text-xs" htmlFor="email">
                           Email
                         </label>
                         <input
                           id="email"
-                          type="text"
-                          className="px-3 py-2 w-full border-[1px] border-gray-300 rounded text-xs"
+                          type="email"
+                          className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                           name="email"
                           value={state.email}
                           onChange={handleChange}
                           required
                         />
-                        <hr className="my-2 border-none" />
+                        <hr className="my-1 border-none" />
                         {!isLoginSSO && (
                           <>
                             <label className="block text-xs" htmlFor="password">
@@ -1140,18 +1121,14 @@ function Login() {
                                 type={
                                   state.passwordVisible ? "text" : "password"
                                 }
-                                className="px-3 py-2 w-full border-[1px] border-gray-300 rounded text-xs"
+                                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                                 name="password"
                                 value={state.password}
                                 onChange={handleChange}
                                 required
                               />
                               <span
-                                className={`absolute top-[50%] right-[10px] -translate-y-[50%] cursor-pointer ${
-                                  state.passwordVisible
-                                    ? "text-[#007bff]"
-                                    : "text-black"
-                                }`}
+                                className="absolute cursor-pointer top-[50%] right-[10px] -translate-y-[50%] text-base-content"
                                 onClick={togglePasswordVisibility}
                               >
                                 {state.passwordVisible ? (
@@ -1166,23 +1143,23 @@ function Login() {
                         <div className="relative mt-1">
                           <NavLink
                             to="/forgetpassword"
-                            className="text-[13px] text-[#002864] hover:underline underline-offset-1 focus:outline-none cursor-pointer ml-1"
+                            className="text-[13px] op-link op-link-primary underline-offset-1 focus:outline-none ml-1"
                           >
                             Forgot Password?
                           </NavLink>
                         </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
@@ -1194,17 +1171,9 @@ function Login() {
                       </NavLink>
                     </div>
                   </form>
-                  <br />
-                  {appInfo.googleClietId && (
-                    <div className="text-sm flex justify-center items-center">
-                      <hr className="border-[1px] border-gray-300 w-full" />
-                      <span className="px-2 text-gray-500 cursor-default">
-                        OR
-                      </span>
-                      <hr className="border-[1px] border-gray-300 w-full" />
-                    </div>
+                  {(appInfo.googleClietId || isEnableSubscription) && (
+                    <div className="op-divider my-4 text-sm">OR</div>
                   )}
-                  <br />
                   <div className="flex flex-col justify-center items-center gap-y-3">
                     {/* {appInfo?.fbAppId && (
                       <LoginFacebook
@@ -1248,7 +1217,7 @@ function Login() {
             <Alert type={state.alertType}>{state.alertMsg}</Alert>
           </div>
           <ModalUi isOpen={isModal} title="Additional Info" showClose={false}>
-            <form className="px-4 py-3">
+            <form className="px-4 py-3 text-base-content">
               <div className="mb-3">
                 <label
                   htmlFor="Company"
@@ -1259,7 +1228,7 @@ function Login() {
                 </label>
                 <input
                   type="text"
-                  className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                  className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                   id="Company"
                   value={userDetails.Company}
                   onChange={(e) =>
@@ -1282,7 +1251,7 @@ function Login() {
                 </label>
                 <input
                   type="text"
-                  className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                  className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                   id="JobTitle"
                   value={userDetails.Destination}
                   onChange={(e) =>
@@ -1294,23 +1263,18 @@ function Login() {
                   required
                 />
               </div>
-              <div className="mt-4">
+              <div className="mt-4 gap-2 flex flex-row">
                 <button
                   type="button"
-                  className="px-3 py-1.5 text-white rounded shadow-md text-center focus:outline-none "
+                  className="op-btn op-btn-primary"
                   onClick={(e) => handleSubmitbtn(e)}
-                  style={{
-                    marginRight: 10,
-                    backgroundColor: modalSubmitBtnColor
-                  }}
                 >
                   Login
                 </button>
                 <button
                   type="button"
-                  className="py-1.5 text-black border-[1px] border-[#ccc] shadow-md rounded focus:outline-none"
+                  className="op-btn op-btn-ghost"
                   onClick={handleCloseModal}
-                  style={{ width: 75, backgroundColor: modalCancelBtnColor }}
                 >
                   Cancel
                 </button>
@@ -1320,14 +1284,8 @@ function Login() {
         </>
       ) : (
         <div
-          style={{
-            position: "fixed",
-            fontSize: "50px",
-            color: "#3ac9d6",
-            top: "50%",
-            left: "45%"
-          }}
-          className="loader-37"
+          className="loader-37 fixed top-[50%] left-[45%] text-[50px] text-[#3ac9d6]"
+          style={{ color: "#3ac9d6" }}
         ></div>
       )}
     </div>
diff --git a/apps/OpenSign/src/pages/Managesign.js b/apps/OpenSign/src/pages/Managesign.js
index 7c4acd5a3..d648861e3 100644
--- a/apps/OpenSign/src/pages/Managesign.js
+++ b/apps/OpenSign/src/pages/Managesign.js
@@ -6,6 +6,7 @@ import { toDataUrl } from "../constant/Utils";
 import Parse from "parse";
 import { appInfo } from "../constant/appinfo";
 import { SaveFileSize } from "../constant/saveFileSize";
+import Alert from "../primitives/Alert";
 const ManageSign = () => {
   const appName = appInfo.appname;
   const [penColor, setPenColor] = useState("blue");
@@ -17,7 +18,7 @@ const ManageSign = () => {
   const [isvalue, setIsValue] = useState(false);
   const allColor = ["blue", "red", "black"];
   const [isLoader, setIsLoader] = useState(true);
-  const [isSuccess, setIsSuccess] = useState(false);
+  const [isAlert, setIsAlert] = useState({ type: "success", message: "" });
   const [Initials, setInitials] = useState("");
   const [isInitials, setIsInitials] = useState(false);
   const [id, setId] = useState("");
@@ -185,12 +186,20 @@ const ManageSign = () => {
         updateSign.set("UserId", userId);
         const res = await updateSign.save();
         setIsLoader(false);
-        setIsSuccess(true);
+        setIsAlert({
+          type: "success",
+          message: "Signature saved successfully."
+        });
+        setTimeout(() => setIsAlert({}), 2000);
         return res;
       } catch (err) {
         console.log(err);
         setIsLoader(false);
-        alert(`${err.message}`);
+        setIsAlert({
+          type: "danger",
+          message: `${err.message}`
+        });
+        setTimeout(() => setIsAlert({}), 2000);
       }
     } else {
       try {
@@ -201,12 +210,20 @@ const ManageSign = () => {
         updateSign.set("UserId", userId);
         const res = await updateSign.save();
         setIsLoader(false);
-        setIsSuccess(true);
+        setIsAlert({
+          type: "success",
+          message: "Signature saved successfully."
+        });
+        setTimeout(() => setIsAlert({}), 2000);
         return res;
       } catch (err) {
         console.log(err);
         setIsLoader(false);
-        alert(`${err.message}`);
+        setIsAlert({
+          type: "success",
+          message: `${err.message}`
+        });
+        setTimeout(() => setIsAlert({}), 2000);
       }
     }
   };
@@ -224,24 +241,13 @@ const ManageSign = () => {
     setIsValue(true);
   };
   return (
-    <div className="relative h-full bg-white flex shadow rounded overflow-auto">
+    <div className="relative h-full bg-base-100 text-base-content flex shadow rounded overflow-auto">
       {isLoader && (
-        <div className="absolute bg-black bg-opacity-75 z-50 w-full h-full flex justify-center items-center">
-          <div
-            style={{ color: "#3dd3e0" }}
-            className="loader-37 text-[45px]"
-          ></div>
-        </div>
-      )}
-      {isSuccess && (
-        <div
-          className="alert alert-success successBox"
-          role="alert"
-          onAnimationEnd={() => setIsSuccess(false)}
-        >
-          Signature saved successfully!
+        <div className="absolute bg-black text-[45px] text-[#3dd3e0] bg-opacity-75 z-50 w-full h-full flex justify-center items-center">
+          <div className="loader-37 "></div>
         </div>
       )}
+      {isAlert?.message && <Alert type={isAlert.type}>{isAlert.message}</Alert>}
       <div
         className="mainDiv"
         style={{
@@ -249,39 +255,13 @@ const ManageSign = () => {
           paddingRight: "10px"
         }}
       >
-        <div style={{ margin: 20 }}>
-          <div
-            style={{
-              fontWeight: "700",
-              fontSize: 15,
-              color: "#000",
-              paddingBottom: 8
-            }}
-          >
-            My Signature
-          </div>
+        <div className="m-[20px]">
+          <div className="font-[700] text-[15px] pb-[8px]">My Signature</div>
           <div className="signBlock mt-4">
             <div>
-              <div style={{ position: "relative" }}>
-                <div
-                  style={{
-                    display: "flex",
-                    flexDirection: "row",
-                    justifyContent: "space-between",
-                    width: "50%",
-                    paddingLeft: 10
-                  }}
-                >
-                  <div
-                    style={{
-                      display: "flex",
-                      flexDirection: "row",
-                      justifyContent: "space-around",
-                      alignItems: "center",
-                      gap: 10,
-                      marginBottom: 10
-                    }}
-                  >
+              <div className="relative">
+                <div className="flex flex-row justify-between w-1/2 pl-[10px]">
+                  <div className="flex flex-row justify-around items-center gap-[10px] mb-[10px]">
                     <>
                       <span
                         onClick={() => handleSignatureBtn()}
@@ -307,24 +287,14 @@ const ManageSign = () => {
                     />
                   </div>
                 </div>
-                <div style={{ position: "relative" }}>
+                <div className="relative">
                   <div>
                     {image ? (
-                      <div
-                        style={{
-                          position: "relative",
-                          border: "2px solid #888"
-                        }}
-                        className="signatureCanvas"
-                      >
+                      <div className="signatureCanvas relative border-[2px] border-[#888]">
                         <img
                           alt="preview image"
                           src={image}
-                          style={{
-                            width: "100%",
-                            height: "100%",
-                            objectFit: "contain"
-                          }}
+                          className="w-full h-full object-contain"
                         />
                       </div>
                     ) : (
@@ -366,10 +336,10 @@ const ManageSign = () => {
                                       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={() => {
                                     if (key === 0) {
@@ -474,10 +444,10 @@ const ManageSign = () => {
                                   key === 0 && initialPen === "blue"
                                     ? "2px solid blue"
                                     : key === 1 && initialPen === "red"
-                                    ? "2px solid red"
-                                    : key === 2 && initialPen === "black"
-                                    ? "2px solid black"
-                                    : "2px solid white"
+                                      ? "2px solid red"
+                                      : key === 2 && initialPen === "black"
+                                        ? "2px solid black"
+                                        : "2px solid white"
                               }}
                               onClick={() => {
                                 if (key === 0) {
@@ -509,20 +479,11 @@ const ManageSign = () => {
                   </div>
                 </div>
               </div>
-              {/* {!warning && (
-                <div className="warning signWarning" style={{ fontSize: 12 }}>
-                  <i
-                    className="fas fa-exclamation-circle"
-                    style={{ color: "#fab005", fontSize: 15 }}
-                  ></i>{" "}
-                  Please upload signature/Image
-                </div>
-              )} */}
             </div>
           </div>
           <div style={{ paddingTop: 10 }}>
             <button
-              className="customBtn successBtn"
+              className="op-btn op-btn-primary"
               onClick={(e) => handleSubmit(e)}
             >
               save
diff --git a/apps/OpenSign/src/pages/Opensigndrive.js b/apps/OpenSign/src/pages/Opensigndrive.js
index a1678fcd9..0637e6526 100644
--- a/apps/OpenSign/src/pages/Opensigndrive.js
+++ b/apps/OpenSign/src/pages/Opensigndrive.js
@@ -11,8 +11,8 @@ import TourContentWithBtn from "../primitives/TourContentWithBtn";
 import Tour from "reactour";
 import axios from "axios";
 
-const DriveBody = React.lazy(() =>
-  import("../components/opensigndrive/DriveBody")
+const DriveBody = React.lazy(
+  () => import("../components/opensigndrive/DriveBody")
 );
 const Loader = () => {
   return (
@@ -279,7 +279,8 @@ function Opensigndrive() {
     setNewFolderName(value);
   };
   //function for create folder
-  const handleAddFolder = async () => {
+  const handleAddFolder = async (e) => {
+    e.preventDefault();
     if (newFolderName) {
       setIsFolderLoader(true);
       const getParentObjId = folderName[folderName.length - 1];
@@ -545,411 +546,331 @@ function Opensigndrive() {
     }
   }
   return (
-    <div style={{ backgroundColor: "white" }} className="folderComponent">
+    <div className="bg-base-100 text-base-content rounded-xl w-full">
       <Title title={"OpenSign™ Drive"} drive={true} />
-
-      <div>
-        <ModalUi
-          headerColor={"#dc3545"}
-          isOpen={isAlert.isShow}
-          title={"Alert"}
-          handleClose={() => {
-            setIsAlert({
-              isShow: false,
-              alertMessage: ""
-            });
-          }}
-        >
-          <div style={{ height: "100%", padding: 20 }}>
-            <p>{isAlert.alertMessage}</p>
-
-            <div
-              style={{
-                height: "1px",
-                backgroundColor: "#9f9f9f",
-                width: "100%",
-                marginTop: "15px",
-                marginBottom: "15px"
-              }}
-            ></div>
-            <button
-              onClick={() =>
-                setIsAlert({
-                  isShow: false,
-                  alertMessage: ""
-                })
-              }
-              type="button"
-              className="finishBtn cancelBtn"
+      <ModalUi
+        headerColor={"#dc3545"}
+        isOpen={isAlert.isShow}
+        title={"Alert"}
+        handleClose={() => {
+          setIsAlert({
+            isShow: false,
+            alertMessage: ""
+          });
+        }}
+      >
+        <div className="h-full p-[20px] pb-[15px]">
+          <p>{isAlert.alertMessage}</p>
+          <div className="h-[1px] bg-[#9f9f9f] w-full my-[15px]"></div>
+          <button
+            onClick={() =>
+              setIsAlert({
+                isShow: false,
+                alertMessage: ""
+              })
+            }
+            type="button"
+            className="op-btn op-btn-neutral op-btn-sm"
+          >
+            Close
+          </button>
+        </div>
+      </ModalUi>
+      <ModalUi
+        isOpen={isFolder}
+        title={"Add New Folder"}
+        handleClose={oncloseFolder}
+      >
+        <div className="h-full p-[20px] pt-[10px] pb-[15px]">
+          {folderLoader ? (
+            <div className="h-[200px] flex flex-col justify-center items-center">
+              <img alt="loader" src={loader} className="w-[50px] h-[50px]" />
+              <span className="text-[13px] text-[gray]">Loading...</span>
+            </div>
+          ) : (
+            <form
+              onSubmit={handleAddFolder}
+              className="flex flex-col text-base-content"
             >
-              Close
-            </button>
-          </div>
-        </ModalUi>
-        <ModalUi
-          isOpen={isFolder}
-          title={"Add New Folder"}
-          handleClose={oncloseFolder}
-        >
-          <div style={{ height: "100%", padding: 20 }}>
-            {folderLoader ? (
+              <label className="py-[8px] text-[15px] font-[400] mb-0">
+                Name
+                <span className="text-[red]">*</span>
+              </label>
+              <input
+                required
+                className="op-input op-input-bordered op-input-sm"
+                type="text"
+                value={newFolderName}
+                onChange={(e) => handleFolderName(e)}
+              />
+              <span className="text-[red] text-[12px] mt-[6px]">{error}</span>
               <div
                 style={{
-                  height: "200px",
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: "center",
-                  alignItems: "center"
+                  height: "1px",
+                  backgroundColor: "#9f9f9f",
+                  width: "100%",
+                  marginTop: "15px",
+                  marginBottom: "15px"
                 }}
-              >
-                <img
-                  alt="loader img"
-                  src={loader}
-                  style={{ width: "50px", height: "50px" }}
-                />
-                <span style={{ fontSize: "13px", color: "gray" }}>
-                  Loading...
-                </span>
+              ></div>
+              <div style={{ display: "flex", flexDirection: "row" }}>
+                <button
+                  style={{ background: themeColor }}
+                  type="submit"
+                  className="finishBtn"
+                >
+                  Add
+                </button>
+                <button
+                  type="button"
+                  className="finishBtn cancelBtn"
+                  onClick={oncloseFolder}
+                >
+                  Close
+                </button>
               </div>
-            ) : (
-              <form
-                onSubmit={(e) => {
-                  e.preventDefault();
-                  handleAddFolder();
-                }}
-                style={{ display: "flex", flexDirection: "column" }}
-              >
-                <label
-                  style={{
-                    margin: "10px 0px 10px 0px",
-                    fontSize: "15px",
-                    fontWeight: "400"
-                  }}
-                >
-                  Name
-                  <span style={{ color: "red" }}>*</span>
-                </label>
-
-                <input
-                  required
-                  className="form-control inputStyle"
-                  type="text"
-                  value={newFolderName}
-                  onChange={(e) => handleFolderName(e)}
-                  // className="addFolderInput"
-                />
-                <span
-                  style={{ color: "red", fontSize: "12px", marginTop: "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"
-                  >
-                    Add
-                  </button>
-                  <button
-                    type="button"
-                    className="finishBtn cancelBtn"
-                    onClick={oncloseFolder}
-                  >
-                    Close
-                  </button>
-                </div>
-              </form>
+            </form>
+          )}
+        </div>
+      </ModalUi>
+      {isLoading.isLoad ? (
+        <div className="flex flex-col justify-center items-center h-[100vh] w-full">
+          <img alt="loader" src={loader} className="w-[80px] h-[80px]" />
+          <span className="text-[13px] text-[gray]">{isLoading.message}</span>
+        </div>
+      ) : handleError ? (
+        <div className="flex justify-center items-center h-[100vh] w-full">
+          <span className="text-[20px] text-[gray]">{handleError}</span>
+        </div>
+      ) : (
+        <>
+          <div className="flex flex-row justify-between items-center px-[25px] pt-[20px]">
+            {tourData && (
+              <Tour
+                onRequestClose={closeTour}
+                steps={tourData}
+                isOpen={isTour}
+                closeWithMask={false}
+                scrollOffset={-100}
+                rounded={5}
+              />
             )}
-          </div>
-        </ModalUi>
-
-        {isLoading.isLoad ? (
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              height: "100vh",
-              width: "100%",
-              flexDirection: "column"
-            }}
-          >
-            <img
-              alt="loader img"
-              src={loader}
-              style={{ width: "80px", height: "80px" }}
-            />
-            <span style={{ fontSize: "13px", color: "gray" }}>
-              {isLoading.message}
-            </span>
-          </div>
-        ) : handleError ? (
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              height: "100vh",
-              width: "100%"
-            }}
-          >
-            <span style={{ fontSize: "20px", color: "gray" }}>
-              {handleError}
-            </span>
-          </div>
-        ) : (
-          <>
-            <div className="folderContainer">
-              {tourData && (
-                <Tour
-                  onRequestClose={closeTour}
-                  steps={tourData}
-                  isOpen={isTour}
-                  closeWithMask={false}
-                  scrollOffset={-100}
-                  rounded={5}
-                />
-              )}
-
+            <div
+              data-tut="reactourFirst"
+              onMouseEnter={(e) => handleMouseEnter(e)}
+              ref={scrollRef}
+              className="w-full whitespace-nowrap cursor-pointer select-none overflow-x-auto"
+            >
+              {handleFolderTab(folderName)}
+            </div>
+            <div className="dropMenuBD">
               <div
-                data-tut="reactourFirst"
-                onMouseEnter={(e) => handleMouseEnter(e)}
-                ref={scrollRef}
-                style={{
-                  width: "100%"
-                }}
-                className="folderPath"
+                id="folder-menu"
+                className={
+                  isNewFol ? "dropdown show dropDownStyle" : "dropdown"
+                }
+                onClick={() => setIsNewFol(!isNewFol)}
               >
-                {handleFolderTab(folderName)}
-              </div>
-              <div className="dropMenuBD">
-                <div
-                  id="folder-menu"
-                  className={
-                    isNewFol ? "dropdown show dropDownStyle" : "dropdown"
-                  }
-                  onClick={() => setIsNewFol(!isNewFol)}
-                >
-                  <div className="sort" data-tut="reactourSecond">
-                    <i
-                      className="fa fa-plus-square"
-                      aria-hidden="true"
-                      style={{ fontSize: "25px", color: `${iconColor}` }}
-                    ></i>
-                  </div>
-                  <div
-                    className={
-                      isNewFol ? "dropdown-menu show" : "dropdown-menu"
-                    }
-                    aria-labelledby="dropdownMenuButton"
-                    aria-expanded={isNewFol ? "true" : "false"}
-                  >
-                    {" "}
-                    <div
-                      style={{
-                        display: "flex",
-                        flexDirection: "column"
-                      }}
-                    >
-                      <span
-                        className="dropdown-item itemColor"
-                        onClick={() => setIsFolder(true)}
-                      >
-                        <i
-                          style={{ marginRight: "5px" }}
-                          className="fa fa-plus"
-                          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>
-                        Sign Yourself
-                      </span>
-                      <span
-                        className="dropdown-item itemColor"
-                        onClick={() => navigate("/form/8mZzFxbG1z")}
-                      >
-                        {" "}
-                        <i
-                          style={{ marginRight: "5px" }}
-                          className="fa fa-file-signature"
-                        ></i>
-                        Request Signatures{" "}
-                      </span>
-                    </div>
-                  </div>
+                <div className="sort" data-tut="reactourSecond">
+                  <i
+                    className="fa fa-plus-square"
+                    aria-hidden="true"
+                    style={{ fontSize: "25px", color: `${iconColor}` }}
+                  ></i>
                 </div>
                 <div
-                  id="menu-container"
-                  className={isShowSort ? "dropdown show" : "dropdown"}
-                  onClick={() => setIsShowSort(!isShowSort)}
+                  className={isNewFol ? "dropdown-menu show" : "dropdown-menu"}
+                  aria-labelledby="dropdownMenuButton"
+                  aria-expanded={isNewFol ? "true" : "false"}
                 >
-                  <div
-                    data-tut="reactourThird"
-                    className=" sort  "
-                    data-toggle="dropdown"
-                  >
-                    <i
-                      className="fa fa-sort-amount-asc"
-                      aria-hidden="true"
-                      style={{
-                        marginRight: "5px",
-                        fontSize: "14px",
-                        color: `${iconColor}`
-                      }}
-                    ></i>
+                  <div className="flex flex-col">
                     <span
-                      style={{
-                        fontSize: "15px",
-                        color: `${iconColor}`
-                      }}
+                      className="dropdown-item itemColor"
+                      onClick={() => setIsFolder(true)}
                     >
-                      {selectedSort}
+                      <i
+                        style={{ marginRight: "5px" }}
+                        className="fa fa-plus"
+                        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>
+                      Sign Yourself
+                    </span>
+                    <span
+                      className="dropdown-item itemColor"
+                      onClick={() => navigate("/form/8mZzFxbG1z")}
+                    >
+                      <i
+                        style={{ marginRight: "5px" }}
+                        className="fa fa-file-signature"
+                      ></i>
+                      Request Signatures{" "}
                     </span>
                   </div>
-                  <div
-                    className={
-                      isShowSort ? "dropdown-menu show" : "dropdown-menu"
-                    }
-                    aria-labelledby="dropdownMenuButton"
-                    aria-expanded={isShowSort ? "true" : "false"}
+                </div>
+              </div>
+              <div
+                id="menu-container"
+                className={isShowSort ? "dropdown show" : "dropdown"}
+                onClick={() => setIsShowSort(!isShowSort)}
+              >
+                <div
+                  data-tut="reactourThird"
+                  className=" sort  "
+                  data-toggle="dropdown"
+                >
+                  <i
+                    className="fa fa-sort-amount-asc"
+                    aria-hidden="true"
+                    style={{
+                      marginRight: "5px",
+                      fontSize: "14px",
+                      color: `${iconColor}`
+                    }}
+                  ></i>
+                  <span
+                    style={{
+                      fontSize: "15px",
+                      color: `${iconColor}`
+                    }}
                   >
-                    {sortingValue.map((value, ind) => {
-                      return (
-                        <span
-                          key={ind}
-                          onClick={() => {
-                            setSelectedSort(value);
-                            sortingData(value, null, pdfData);
-                          }}
-                          className="dropdown-item itemColor"
-                          style={{
-                            paddingLeft: selectedSort !== value && "33px"
-                          }}
-                        >
-                          {selectedSort === value && (
-                            <i
-                              className="fa fa-check"
-                              aria-hidden="true"
-                              style={{ marginRight: "5px" }}
-                            ></i>
-                          )}
-                          {value}
-                        </span>
-                      );
-                    })}
-
-                    <hr className="hrStyle" />
-                    {sortOrder.map((order, ind) => {
-                      return (
-                        <span
-                          key={ind}
-                          onClick={() => {
-                            setSortingOrder(order);
-                            sortingData(null, order, pdfData);
-                          }}
-                          className="dropdown-item itemColor"
-                          style={{
-                            paddingLeft: sortingOrder !== order && "33px"
-                          }}
-                        >
-                          {sortingOrder === order && (
-                            <i
-                              className="fa fa-check"
-                              aria-hidden="true"
-                              style={{ marginRight: "5px" }}
-                            ></i>
-                          )}
-                          {order}
-                        </span>
-                      );
-                    })}
-                  </div>
+                    {selectedSort}
+                  </span>
                 </div>
+                <div
+                  className={
+                    isShowSort ? "dropdown-menu show" : "dropdown-menu"
+                  }
+                  aria-labelledby="dropdownMenuButton"
+                  aria-expanded={isShowSort ? "true" : "false"}
+                >
+                  {sortingValue.map((value, ind) => {
+                    return (
+                      <span
+                        key={ind}
+                        onClick={() => {
+                          setSelectedSort(value);
+                          sortingData(value, null, pdfData);
+                        }}
+                        className="dropdown-item itemColor"
+                        style={{
+                          paddingLeft: selectedSort !== value && "33px"
+                        }}
+                      >
+                        {selectedSort === value && (
+                          <i
+                            className="fa fa-check"
+                            aria-hidden="true"
+                            style={{ marginRight: "5px" }}
+                          ></i>
+                        )}
+                        {value}
+                      </span>
+                    );
+                  })}
 
-                <div>
-                  {isList ? (
-                    <div className="sort" onClick={() => setIsList(!isList)}>
-                      <i
-                        onClick={() => setIsList(!isList)}
-                        className="fa fa-th-large"
-                        style={{ fontSize: "24px", color: `${iconColor}` }}
-                        aria-hidden="true"
-                      ></i>
-                    </div>
-                  ) : (
-                    <div
-                      data-tut="reactourForth"
-                      className="sort"
+                  <hr className="hrStyle" />
+                  {sortOrder.map((order, ind) => {
+                    return (
+                      <span
+                        key={ind}
+                        onClick={() => {
+                          setSortingOrder(order);
+                          sortingData(null, order, pdfData);
+                        }}
+                        className="dropdown-item itemColor"
+                        style={{
+                          paddingLeft: sortingOrder !== order && "33px"
+                        }}
+                      >
+                        {sortingOrder === order && (
+                          <i
+                            className="fa fa-check"
+                            aria-hidden="true"
+                            style={{ marginRight: "5px" }}
+                          ></i>
+                        )}
+                        {order}
+                      </span>
+                    );
+                  })}
+                </div>
+              </div>
+
+              <div>
+                {isList ? (
+                  <div className="sort" onClick={() => setIsList(!isList)}>
+                    <i
                       onClick={() => setIsList(!isList)}
-                    >
-                      <i
-                        className="fa fa-list"
-                        aria-hidden="true"
-                        style={{ fontSize: "23px", color: `${iconColor}` }}
-                      ></i>
-                    </div>
-                  )}
-                </div>
+                      className="fa fa-th-large"
+                      style={{ fontSize: "24px", color: `${iconColor}` }}
+                      aria-hidden="true"
+                    ></i>
+                  </div>
+                ) : (
+                  <div
+                    data-tut="reactourForth"
+                    className="sort"
+                    onClick={() => setIsList(!isList)}
+                  >
+                    <i
+                      className="fa fa-list"
+                      aria-hidden="true"
+                      style={{ fontSize: "23px", color: `${iconColor}` }}
+                    ></i>
+                  </div>
+                )}
               </div>
             </div>
+          </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>
-            ) : (
-              <div data-tut="reactourFifth">
-                <React.Suspense fallback={<Loader />}>
-                  <DriveBody
-                    dataTutSixth="reactourSixth"
-                    dataTutSeventh="reactourSeventh"
-                    pdfData={pdfData}
-                    setFolderName={setFolderName}
-                    setIsLoading={setIsLoading}
-                    setDocId={setDocId}
-                    getPdfDocumentList={getPdfDocumentList}
-                    isDocId={docId}
-                    setPdfData={setPdfData}
-                    isList={isList}
-                    setIsAlert={setIsAlert}
-                    setSkip={setSkip}
-                    sortingData={sortingData}
-                  />
-                  {loading && (
-                    <div style={{ textAlign: "center" }}>Loading...</div>
-                  )}
-                </React.Suspense>
-              </div>
-            )}
-          </>
-        )}
-      </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>
+          ) : (
+            <div data-tut="reactourFifth">
+              <React.Suspense fallback={<Loader />}>
+                <DriveBody
+                  dataTutSixth="reactourSixth"
+                  dataTutSeventh="reactourSeventh"
+                  pdfData={pdfData}
+                  setFolderName={setFolderName}
+                  setIsLoading={setIsLoading}
+                  setDocId={setDocId}
+                  getPdfDocumentList={getPdfDocumentList}
+                  isDocId={docId}
+                  setPdfData={setPdfData}
+                  isList={isList}
+                  setIsAlert={setIsAlert}
+                  setSkip={setSkip}
+                  sortingData={sortingData}
+                />
+                {loading && (
+                  <div className="text-center pb-[20px]">Loading...</div>
+                )}
+              </React.Suspense>
+            </div>
+          )}
+        </>
+      )}
     </div>
   );
 }
diff --git a/apps/OpenSign/src/pages/PageNotFound.js b/apps/OpenSign/src/pages/PageNotFound.js
index 825cb98fb..8be661de5 100644
--- a/apps/OpenSign/src/pages/PageNotFound.js
+++ b/apps/OpenSign/src/pages/PageNotFound.js
@@ -4,13 +4,11 @@ import Title from "../components/Title";
 
 const PageNotFound = ({ prefix }) => {
   return (
-    <div className="flex items-center justify-center h-screen w-full bg-white rounded">
+    <div className="flex items-center justify-center h-screen w-full bg-base-100 text-base-content rounded">
       <Title title={"Page Not Found"} />
       <div className="text-center">
-        <h1 className="text-[60px] lg:text-[120px] font-semibold text-black">
-          404
-        </h1>
-        <p className="text-[30px] lg:text-[50px] text-black">
+        <h1 className="text-[60px] lg:text-[120px] font-semibold">404</h1>
+        <p className="text-[30px] lg:text-[50px]">
           {prefix ? prefix : "Page"} Not Found
         </p>
       </div>
diff --git a/apps/OpenSign/src/pages/Report.js b/apps/OpenSign/src/pages/Report.js
index 9efd54329..809a6a2aa 100644
--- a/apps/OpenSign/src/pages/Report.js
+++ b/apps/OpenSign/src/pages/Report.js
@@ -173,21 +173,8 @@ const Report = () => {
     <>
       <Title title={reportName} />
       {isLoader ? (
-        <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>
       ) : (
         <>
diff --git a/apps/OpenSign/src/pages/SSOVerify.js b/apps/OpenSign/src/pages/SSOVerify.js
index 85dbb70bd..e7afdc9d6 100644
--- a/apps/OpenSign/src/pages/SSOVerify.js
+++ b/apps/OpenSign/src/pages/SSOVerify.js
@@ -3,11 +3,7 @@ import { useLocation, useNavigate } from "react-router-dom";
 import Parse from "parse";
 import axios from "axios";
 import { appInfo } from "../constant/appinfo";
-import {
-  isEnableSubscription,
-  modalCancelBtnColor,
-  modalSubmitBtnColor
-} from "../constant/const";
+import { isEnableSubscription } from "../constant/const";
 import { fetchSubscription } from "../constant/Utils";
 import { useDispatch } from "react-redux";
 import { showTenant } from "../redux/reducers/ShowTenant";
@@ -294,33 +290,26 @@ const SSOVerify = () => {
         {message === "Verifying SSO..." && (
           <img alt="loader" src={loader} className="w-[80px] h-[80px]" />
         )}
-        <div className="text-[gray]">{message}</div>
+        <div className="text-base-content">{message}</div>
       </div>
       <ModalUi isOpen={isModal} title="Additional Info" showClose={false}>
         <div className="relative">
           {isLoader && (
-            <div className="absolute w-full h-full bg-black bg-opacity-25 flex justify-center items-center">
-              <div
-                style={{
-                  fontSize: "45px",
-                  color: "#3dd3e0"
-                }}
-                className="loader-37"
-              ></div>
+            <div className="absolute w-full h-full bg-black bg-opacity-25 flex justify-center items-center text-[45px] text-[#3dd3e0]">
+              <div className="loader-37"></div>
             </div>
           )}
-          <form className="px-4 py-3" onSubmit={handleSubmitbtn}>
+          <form
+            className="px-4 py-3 text-base-content"
+            onSubmit={handleSubmitbtn}
+          >
             <div className="mb-3">
-              <label
-                htmlFor="Company"
-                style={{ display: "flex" }}
-                className="block text-xs text-gray-700 font-semibold"
-              >
-                Phone <span style={{ fontSize: 13, color: "red" }}>*</span>
+              <label htmlFor="Company" className="block text-xs font-semibold">
+                Phone <span className="text-[13px] text-[red]">*</span>
               </label>
               <input
                 type="tel"
-                className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                 id="Phone"
                 value={userDetails.phone}
                 onChange={(e) =>
@@ -337,16 +326,12 @@ const SSOVerify = () => {
               </p>
             </div>
             <div className="mb-3">
-              <label
-                htmlFor="Company"
-                style={{ display: "flex" }}
-                className="block text-xs text-gray-700 font-semibold"
-              >
-                Company <span style={{ fontSize: 13, color: "red" }}>*</span>
+              <label htmlFor="Company" className="block text-xs font-semibold">
+                Company <span className="text-[13px] text-[red]">*</span>
               </label>
               <input
                 type="text"
-                className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                 id="Company"
                 value={userDetails.Company}
                 onChange={(e) =>
@@ -360,17 +345,13 @@ const SSOVerify = () => {
               />
             </div>
             <div className="mb-3">
-              <label
-                htmlFor="JobTitle"
-                style={{ display: "flex" }}
-                className="block text-xs text-gray-700 font-semibold"
-              >
+              <label htmlFor="JobTitle" className="block text-xs font-semibold">
                 Job Title
-                <span style={{ fontSize: 13, color: "red" }}>*</span>
+                <span className="text-[13px] text-[red]">*</span>
               </label>
               <input
                 type="text"
-                className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                 id="JobTitle"
                 value={userDetails.Destination}
                 onChange={(e) =>
@@ -384,21 +365,13 @@ const SSOVerify = () => {
               />
             </div>
             <div className="mt-4">
-              <button
-                type="submit"
-                className="px-3 py-1.5 text-white rounded shadow-md text-center focus:outline-none "
-                style={{
-                  marginRight: 10,
-                  backgroundColor: modalSubmitBtnColor
-                }}
-              >
+              <button type="submit" className="op-btn op-btn-primary">
                 Login
               </button>
               <button
                 type="button"
-                className="py-1.5 text-black border-[1px] border-[#ccc] shadow-md rounded focus:outline-none"
+                className="op-btn op-btn-ghost ml-2"
                 onClick={handleCloseModal}
-                style={{ width: 75, backgroundColor: modalCancelBtnColor }}
               >
                 Cancel
               </button>
diff --git a/apps/OpenSign/src/pages/Signup.js b/apps/OpenSign/src/pages/Signup.js
index 24b437d47..5e27cc1cb 100644
--- a/apps/OpenSign/src/pages/Signup.js
+++ b/apps/OpenSign/src/pages/Signup.js
@@ -501,47 +501,26 @@ const Signup = () => {
     setSpecialCharValid(/[!@#$%^&*()\-_=+{};:,<.>]/.test(newPassword));
   };
   return (
-    <div className="bg-white">
+    <div className="">
       {state.loading && (
-        <div
-          style={{
-            position: "fixed",
-            width: "100vw",
-            height: "100vh",
-            backgroundColor: "rgba(0,0,0,0.2)",
-            top: 0,
-            left: 0,
-            zIndex: 2
-          }}
-        >
-          <div
-            style={{
-              position: "fixed",
-              fontSize: "50px",
-              color: "#3ac9d6",
-              top: "50%",
-              left: "45%"
-            }}
-            className="loader-37"
-          ></div>
+        <div className="fixed w-[100vw] h-[100vh] flex justify-center items-center z-20 bg-black bg-opacity-25 text-[#3ac9d6] text-[50px]">
+          <div className="loader-37 "></div>
         </div>
       )}
-
       <Title title={"Signup page"} />
-
       {appInfo && appInfo.applogo ? (
-        <div>
-          <div className="md:m-10 lg:m-16 md:p-4 lg:p-10 p-5 bg-[#ffffff] md:border-[1px] md:border-gray-400 ">
+        <div className="md:p-10 lg:p-16">
+          <div className="md:p-4 lg:p-10 p-4 bg-base-100 text-base-content op-card">
             <div className="w-[250px] h-[66px] inline-block overflow-hidden">
               {image && (
                 <img src={image} className="object-contain h-full" alt="logo" />
               )}
             </div>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-x-2">
-              <div className="">
+              <div>
                 <form onSubmit={handleSubmit}>
                   <h2 className="text-[30px] mt-6">Create Account !</h2>
-                  <div className="outline outline-1 outline-slate-300/50 shadow-md rounded my-4">
+                  <div className="w-full my-4 op-card bg-base-100 shadow-md outline outline-1 outline-slate-300/50">
                     <div className="px-6 py-4 text-xs">
                       <label className="block ">
                         Name{" "}
@@ -549,7 +528,7 @@ const Signup = () => {
                       </label>
                       <input
                         type="text"
-                        className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                        className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                         value={name}
                         onChange={(e) => setName(e.target.value)}
                         required
@@ -561,8 +540,8 @@ const Signup = () => {
                       </label>
                       <input
                         id="email"
-                        type="text"
-                        className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs lowercase"
+                        type="email"
+                        className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                         value={email}
                         onChange={(e) =>
                           setEmail(e.target.value?.toLowerCase())
@@ -576,7 +555,7 @@ const Signup = () => {
                       </label>
                       <input
                         type="tel"
-                        className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                        className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                         value={phone}
                         onChange={(e) => setPhone(e.target.value)}
                         required
@@ -588,7 +567,7 @@ const Signup = () => {
                       </label>
                       <input
                         type="text"
-                        className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                        className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                         value={company}
                         onChange={(e) => setCompany(e.target.value)}
                         required
@@ -600,7 +579,7 @@ const Signup = () => {
                       </label>
                       <input
                         type="text"
-                        className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                        className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                         value={jobTitle}
                         onChange={(e) => setJobTitle(e.target.value)}
                         required
@@ -613,16 +592,14 @@ const Signup = () => {
                       <div className="relative">
                         <input
                           type={showPassword ? "text" : "password"}
-                          className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                          className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                           name="password"
                           value={password}
                           onChange={(e) => handlePasswordChange(e)}
                           required
                         />
                         <span
-                          className={`absolute top-[50%] right-[10px] -translate-y-[50%] cursor-pointer ${
-                            showPassword ? "text-[#007bff]" : "text-black"
-                          }`}
+                          className={`absolute top-[50%] right-[10px] -translate-y-[50%] cursor-pointer text-base-content`}
                           onClick={togglePasswordVisibility}
                         >
                           {showPassword ? (
@@ -690,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/pages/UserProfile.js b/apps/OpenSign/src/pages/UserProfile.js
index a7599666e..6bf4869de 100644
--- a/apps/OpenSign/src/pages/UserProfile.js
+++ b/apps/OpenSign/src/pages/UserProfile.js
@@ -296,37 +296,25 @@ function UserProfile() {
     // setPublicUserName(extendUser && extendUser?.[0]?.UserName);
     setCompany(extendUser && extendUser?.[0]?.Company);
     setJobTitle(extendUser?.[0]?.JobTitle);
+    setIsDisableDocId(extendUser?.[0]?.HeaderDocId);
   };
   return (
     <React.Fragment>
       <Title title={"Profile"} />
       {isLoader ? (
-        <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>
       ) : (
         <div className="flex justify-center items-center w-full relative">
           {/* {userNameError && (
             <div
-              className={`z-[1000] fixed top-[50%]  transform border-[1px] text-sm border-[#f0a8a8] bg-[#f4bebe] text-[#c42121] rounded py-[.75rem] px-[1.25rem]`}
+              className={`z-[1000] fixed top-[50%] transform border-[1px] text-sm border-[#f0a8a8] bg-[#f4bebe] text-[#c42121] rounded py-[.75rem] px-[1.25rem]`}
             >
               {userNameError}
             </div>
           )} */}
-          <div className="bg-white flex flex-col justify-center shadow rounded w-[450px]">
+          <div className="bg-base-100 text-base-content flex flex-col justify-center shadow rounded-xl w-[450px]">
             <div className="flex flex-col justify-center items-center my-4">
               <div className="w-[200px] h-[200px] overflow-hidden rounded-full">
                 <img
@@ -338,7 +326,7 @@ function UserProfile() {
               {editmode && (
                 <input
                   type="file"
-                  className="max-w-[270px] text-sm py-1 px-2 mt-4 border-[1px] border-[#15b4e9] text-black rounded"
+                  className="op-file-input op-file-input-bordered op-file-input-sm max-w-[270px] mt-4 text-sm"
                   accept="image/png, image/gif, image/jpeg"
                   onChange={(e) => {
                     let files = e.target.files;
@@ -364,7 +352,7 @@ function UserProfile() {
             <ul className="w-full flex flex-col p-2 text-sm">
               <li
                 className={`flex justify-between items-center border-t-[1px] border-gray-300 break-all ${
-                  editmode ? "py-1" : "py-2"
+                  editmode ? "py-1.5" : "py-2"
                 }`}
               >
                 <span className="font-semibold">Name:</span>{" "}
@@ -372,7 +360,7 @@ function UserProfile() {
                   <input
                     type="text"
                     value={name}
-                    className="py-1 px-2 text-sm border-[1px] border-[#15b4e9] text-black rounded"
+                    className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-sm"
                     onChange={(e) => SetName(e.target.value)}
                   />
                 ) : (
@@ -381,14 +369,14 @@ function UserProfile() {
               </li>
               <li
                 className={`flex justify-between items-center border-t-[1px] border-gray-300 break-all ${
-                  editmode ? "py-1" : "py-2"
+                  editmode ? "py-1.5" : "py-2"
                 }`}
               >
                 <span className="font-semibold">Phone:</span>{" "}
                 {editmode ? (
                   <input
                     type="text"
-                    className="py-1 px-2 text-sm border-[1px] border-[#15b4e9] text-black rounded"
+                    className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-sm"
                     onChange={(e) => SetPhone(e.target.value)}
                     value={Phone}
                   />
@@ -402,7 +390,7 @@ function UserProfile() {
               </li>
               <li
                 className={`flex justify-between items-center border-t-[1px] border-gray-300 break-all ${
-                  editmode ? "py-1" : "py-2"
+                  editmode ? "py-1.5" : "py-2"
                 }`}
               >
                 <span className="font-semibold">Company:</span>{" "}
@@ -410,7 +398,7 @@ function UserProfile() {
                   <input
                     type="text"
                     value={company}
-                    className="py-1 px-2 text-sm border-[1px] border-[#15b4e9] text-black rounded"
+                    className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-sm"
                     onChange={(e) => setCompany(e.target.value)}
                   />
                 ) : (
@@ -419,7 +407,7 @@ function UserProfile() {
               </li>
               <li
                 className={`flex justify-between items-center border-t-[1px] border-gray-300 break-all ${
-                  editmode ? "py-1" : "py-2"
+                  editmode ? "py-1.5" : "py-2"
                 }`}
               >
                 <span className="font-semibold">Job title:</span>{" "}
@@ -427,7 +415,7 @@ function UserProfile() {
                   <input
                     type="text"
                     value={jobTitle}
-                    className="py-1 px-2 text-sm border-[1px] border-[#15b4e9] text-black rounded"
+                    className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-sm"
                     onChange={(e) => setJobTitle(e.target.value)}
                   />
                 ) : (
@@ -463,7 +451,7 @@ function UserProfile() {
                    all your publicly set templates.`}
                     />
                   </span>
-                  <div className="flex items-center">
+                  <div className="flex text-xs items-center">
                     <span>opensign-me.vercel.app/</span>
                     {editmode ? (
                       <input
@@ -471,14 +459,14 @@ function UserProfile() {
                         value={publicUserName}
                         disabled={!editmode}
                         placeholder="enter user name"
-                        className="border-[1px] border-gray-200 rounded-[3px]"
+                        className="op-input op-input-bordered focus:outline-none hover:border-base-content op-input-xs"
                       />
                     ) : (
                       <input
                         value={extendUser?.[0]?.UserName}
                         disabled
                         placeholder="enter user name"
-                        className="border-[1px] border-gray-200 rounded-[3px]"
+                        className="op-input op-input-bordered op-input-xs"
                       />
                     )}
                   </div>
@@ -498,27 +486,23 @@ function UserProfile() {
                       url={
                         "https://docs.opensignlabs.com/docs/help/Settings/disabledocumentid"
                       }
-                    />{" "}
+                    />
                     {!isSubscribe && isEnableSubscription && <Upgrade />}
-                  </span>{" "}
+                  </span>
                   <label
-                    className={
+                    className={`${
                       isSubscribe || !isEnableSubscription
-                        ? `${
-                            editmode ? "cursor-pointer" : ""
-                          } relative inline-flex items-center mb-0`
-                        : "relative inline-flex items-center mb-0 pointer-events-none opacity-50"
-                    }
+                        ? `${editmode ? "cursor-pointer" : ""}`
+                        : "pointer-events-none opacity-50"
+                    } relative block items-center mb-0`}
                   >
                     <input
                       disabled={editmode ? false : true}
+                      type="checkbox"
+                      className="op-toggle transition-all checked:[--tglbg:#3368ff] checked:bg-white"
                       checked={isDisableDocId}
                       onChange={handleDisableDocId}
-                      type="checkbox"
-                      value=""
-                      className="sr-only peer"
                     />
-                    <div className="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-1 peer-focus:ring-black rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-black peer-checked:bg-blue-600"></div>
                   </label>
                 </div>
                 {!isEnableSubscription && (
@@ -530,44 +514,29 @@ function UserProfile() {
                 )}
               </li>
             </ul>
-            <div className="flex justify-center pt-2 pb-3 md:pt-3 md:pb-4">
-              {editmode ? (
-                <button
-                  type="button"
-                  onClick={handleSubmit}
-                  className="rounded shadow focus:outline-none border-[2px] border-[#15b4e9] bg-white text-[#15b4e9] px-4 py-2 mr-4"
-                >
-                  Save
-                </button>
-              ) : (
-                <button
-                  type="button"
-                  onClick={() => {
-                    setEditMode(true);
-                  }}
-                  className="rounded shadow focus:outline-none text-white bg-[#e7505a] px-4 py-2 mr-4"
-                >
-                  Edit
-                </button>
-              )}
+            <div className="flex justify-center gap-2 pt-2 pb-3 md:pt-3 md:pb-4">
               <button
                 type="button"
-                onClick={() => {
-                  if (editmode) {
-                    handleCancel();
-                  } else {
-                    navigate("/changepassword");
-                  }
-                }}
-                className={`rounded shadow focus:outline-none text-white bg-[#3598dc]  ${
-                  editmode ? "px-4 py-2 " : "p-2"
+                onClick={(e) =>
+                  editmode ? handleSubmit(e) : setEditMode(true)
+                }
+                className="op-btn op-btn-primary"
+              >
+                {editmode ? "Save" : "Edit"}
+              </button>
+              <button
+                type="button"
+                onClick={() =>
+                  editmode ? handleCancel() : navigate("/changepassword")
+                }
+                className={`op-btn ${
+                  editmode ? "op-btn-ghost" : "op-btn-secondary"
                 }`}
               >
                 {editmode ? "Cancel" : "Change Password"}
               </button>
             </div>
           </div>
-
           {isVerifyModal && (
             <ModalUi
               isOpen
@@ -575,21 +544,8 @@ function UserProfile() {
               handleClose={handleCloseVerifyModal}
             >
               {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 justify-center items-center text-[45px] text-[#3dd3e0]">
+                  <div className="loader-37"></div>
                 </div>
               ) : (
                 <form onSubmit={(e) => handleVerifyEmail(e)}>
diff --git a/apps/OpenSign/src/pages/Webhook.js b/apps/OpenSign/src/pages/Webhook.js
index c32e5b9d7..9f6c065b5 100644
--- a/apps/OpenSign/src/pages/Webhook.js
+++ b/apps/OpenSign/src/pages/Webhook.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, openInNewTab } from "../constant/Utils";
 import Parse from "parse";
 import PremiumAlertHeader from "../primitives/PremiumAlertHeader";
@@ -97,28 +97,15 @@ function Webhook() {
   return (
     <React.Fragment>
       <Title title={"Webhook"} />
-      {isGenerate && <Alert type="success">Webhook added successfully!</Alert>}
-      {isErr && <Alert type="danger">Something went wrong!</Alert>}
+      {isGenerate && <Alert type="success">Webhook added successfully.</Alert>}
+      {isErr && <Alert type="danger">Something went wrong.</Alert>}
 
       {isLoader ? (
-        <div
-          style={{
-            height: "100vh",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          }}
-        >
-          <div
-            style={{
-              fontSize: "45px",
-              color: "#3dd3e0"
-            }}
-            className="loader-37"
-          ></div>
+        <div className="h-[100vh] flex justify-center items-center text-[45px] text-[#3dd3e0]">
+          <div className="loader-37"></div>
         </div>
       ) : (
-        <div className="bg-white flex flex-col justify-center shadow rounded">
+        <div className="bg-base-100 text-base-content flex flex-col justify-center shadow rounded">
           {!isEnableSubscription && <PremiumAlertHeader />}
           <h1 className={"ml-4 mt-3 mb-2 font-semibold"}>
             OpenSign™ Webhook{" "}
@@ -146,14 +133,14 @@ function Webhook() {
               <button
                 type="button"
                 onClick={handleModal}
-                className="rounded hover:bg-[#15b4e9] border-[1px] border-[#15b4e9] text-[#15b4e9] hover:text-white px-4 py-2 text-xs md:text-base focus:outline-none"
+                className="op-btn op-btn-primary "
               >
                 {webhook ? "Update Webhook" : "Add Webhook"}
               </button>
             </li>
           </ul>
 
-          <div className="flex   items-center justify-center ">
+          <div className="flex items-center justify-center ">
             <button
               type="button"
               onClick={() =>
@@ -161,7 +148,7 @@ function Webhook() {
                   "https://docs.opensignlabs.com/docs/API-docs/save-update-webhook"
                 )
               }
-              className="rounded hover:bg-[#15b4e9] border-[1px] my-2 border-[#15b4e9] text-[#15b4e9] hover:text-white px-11 py-2 text-xs md:text-base focus:outline-none"
+              className="op-btn op-btn-primary my-2"
             >
               View Docs
             </button>
@@ -203,24 +190,27 @@ function Webhook() {
           >
             {error && <Alert type="danger">{error}</Alert>}
             <div className="m-[20px]">
-              <div className="text-lg font-normal text-black">
+              <div className="text-lg font-normal text-base-content">
                 <label className="text-sm ml-2">Webhook</label>
                 <input
                   value={webhook}
                   onChange={(e) => setWebhook(e.target.value)}
                   placeholder="Enter webhook url"
-                  className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                  className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                 />
               </div>
-              <hr className="bg-[#ccc] mt-4 " />
-              <div className="flex items-center mt-3 gap-2 text-white">
+              <hr className="bg-[#ccc] mt-3" />
+              <div className="flex items-center mt-3 gap-2">
                 <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/primitives/AddContact.js b/apps/OpenSign/src/primitives/AddContact.js
index a7abdbab3..6b261e9c8 100644
--- a/apps/OpenSign/src/primitives/AddContact.js
+++ b/apps/OpenSign/src/primitives/AddContact.js
@@ -195,23 +195,16 @@ const AddContact = (props) => {
   };
 
   return (
-    <div className="addusercontainer">
+    <div className="h-full px-[20px] py-[10px]">
       {isLoader && (
-        <div className="loaderdiv">
-          <div
-            style={{
-              fontSize: "45px",
-              color: "#3dd3e0"
-            }}
-            className="loader-37"
-          ></div>
+        <div className="fixed top-0 left-0 right-0 bottom-0 flex justify-center items-center bg-black bg-opacity-30 text-[45px] text-[#3dd3e0]">
+          <div className="loader-37"></div>
         </div>
       )}
-      <div className="form-wrapper">
-        <div style={{ fontSize: 14, fontWeight: "700" }}>Add User</div>
-
+      <div className="w-full mx-auto p-[8px]">
+        <div className="text-[14px] font-[700]">Add User</div>
         {isUserExist && (
-          <div className="form-section">
+          <div className="mb-[0.75rem]">
             <input
               type="checkbox"
               id="addYourself"
@@ -224,11 +217,11 @@ const AddContact = (props) => {
             </label>
           </div>
         )}
-        <form onSubmit={handleSubmit}>
-          <div className="form-section">
-            <label htmlFor="name" style={{ fontSize: 13 }}>
+        <form className="text-base-content" onSubmit={handleSubmit}>
+          <div className="mb-[0.75rem]">
+            <label htmlFor="name" className="text-[13px]">
               Name
-              <span style={{ color: "red", fontSize: 13 }}> *</span>
+              <span className="text-[13px] text-[red]"> *</span>
             </label>
             <input
               type="text"
@@ -237,13 +230,13 @@ const AddContact = (props) => {
               onChange={(e) => setName(e.target.value)}
               required
               disabled={addYourself}
-              className="addUserInput"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
-          <div className="form-section">
-            <label htmlFor="email" style={{ fontSize: 13 }}>
+          <div className="mb-[0.75rem]">
+            <label htmlFor="email" className="text-[13px]">
               Email
-              <span style={{ color: "red", fontSize: 13 }}> *</span>
+              <span className="text-[13px] text-[red]"> *</span>
             </label>
             <input
               type="email"
@@ -252,11 +245,11 @@ const AddContact = (props) => {
               onChange={(e) => setEmail(e.target.value?.toLowerCase())}
               required
               disabled={addYourself}
-              className="addUserInput lowercase"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs lowercase"
             />
           </div>
-          <div className="form-section">
-            <label htmlFor="phone" style={{ fontSize: 13 }}>
+          <div className="mb-[0.75rem]">
+            <label htmlFor="phone" className="text-[13px]">
               Phone
             </label>
             <input
@@ -265,18 +258,18 @@ const AddContact = (props) => {
               value={phone}
               onChange={(e) => setPhone(e.target.value)}
               disabled={addYourself}
-              className="addUserInput"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
 
-          <div className="buttoncontainer">
-            <button type="submit" className="submitbutton">
+          <div className="mt-[1rem] flex justify-start gap-2">
+            <button type="submit" className="op-btn op-btn-primary">
               Submit
             </button>
             <button
               type="button"
               onClick={() => handleReset()}
-              className="resetbutton"
+              className="op-btn op-btn-secondary"
             >
               Reset
             </button>
diff --git a/apps/OpenSign/src/primitives/Alert.js b/apps/OpenSign/src/primitives/Alert.js
index 41932a49d..0f53ebd41 100644
--- a/apps/OpenSign/src/primitives/Alert.js
+++ b/apps/OpenSign/src/primitives/Alert.js
@@ -5,25 +5,25 @@ const Alert = ({ children, type }) => {
   function theme(color) {
     switch (color) {
       case "success":
-        return "border-[#c3e6cb] bg-[#d4edda] text-[#155724]";
+        return "op-alert-success";
       case "info":
-        return "border-[#adcdeb] bg-[#c1daf0] text-[#153756]";
+        return "op-alert-info";
       case "danger":
-        return "border-[#f0a8a8] bg-[#f4bebe] text-[#c42121]";
+        return "op-alert-error";
+      case "warning":
+        return "op-alert-warning";
       default:
-        return "border-[#d6d6d6] bg-[#d9d9d9] text-[#575757]";
+        return "";
     }
   }
   return (
-    <>
-      {children && (
-        <div
-          className={`z-[1000] fixed top-20 left-1/2 transform -translate-x-1/2 border-[1px] text-sm ${textcolor} rounded py-[.75rem] px-[1.25rem] z-50`}
-        >
-          {children}
+    children && (
+      <div className="z-[1000] fixed top-20 left-1/2 transform -translate-x-1/2 text-sm">
+        <div className={`op-alert ${textcolor}`}>
+          <span>{children}</span>
         </div>
-      )}
-    </>
+      </div>
+    )
   );
 };
 
diff --git a/apps/OpenSign/src/primitives/GetReportDisplay.js b/apps/OpenSign/src/primitives/GetReportDisplay.js
index 8d599aaac..73bbecd64 100644
--- a/apps/OpenSign/src/primitives/GetReportDisplay.js
+++ b/apps/OpenSign/src/primitives/GetReportDisplay.js
@@ -1,14 +1,10 @@
-import React, { useState, useEffect, useMemo } from "react";
+import React, { useState, useEffect } from "react";
 import pad from "../assets/images/pad.svg";
 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";
@@ -63,13 +59,65 @@ const ReportTable = (props) => {
   const { isMoreDocs, setIsNextRecord } = props;
   // For loop is used to calculate page numbers visible below table
   // Initialize pageNumbers using useMemo to avoid unnecessary re-creation
-  const pageNumbers = useMemo(() => {
-    const calculatedPageNumbers = [];
-    for (let i = 1; i <= Math.ceil(props.List.length / props.docPerPage); i++) {
-      calculatedPageNumbers.push(i);
+  // const pageNumbers = useMemo(() => {
+  //   const calculatedPageNumbers = [];
+  //   for (let i = 1; i <= Math.ceil(props.List.length / props.docPerPage); i++) {
+  //     calculatedPageNumbers.push(i);
+  //   }
+  //   return calculatedPageNumbers;
+  // }, [props.List, props.docPerPage]);
+  const getPaginationRange = () => {
+    const totalPageNumbers = 7; // Adjust this value to show more/less page numbers
+    const pages = [];
+    const totalPages = Math.ceil(props.List.length / props.docPerPage);
+    if (totalPages <= totalPageNumbers) {
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      const leftSiblingIndex = Math.max(currentPage - 1, 1);
+      const rightSiblingIndex = Math.min(currentPage + 1, totalPages);
+
+      const showLeftDots = leftSiblingIndex > 2;
+      const showRightDots = rightSiblingIndex < totalPages - 2;
+
+      const firstPageIndex = 1;
+      const lastPageIndex = totalPages;
+
+      if (!showLeftDots && showRightDots) {
+        let leftItemCount = 3;
+        let leftRange = Array.from({ length: leftItemCount }, (_, i) => i + 1);
+
+        pages.push(...leftRange);
+        pages.push("...");
+        pages.push(totalPages);
+      } else if (showLeftDots && !showRightDots) {
+        let rightItemCount = 3;
+        let rightRange = Array.from(
+          { length: rightItemCount },
+          (_, i) => totalPages - rightItemCount + i + 1
+        );
+
+        pages.push(firstPageIndex);
+        pages.push("...");
+        pages.push(...rightRange);
+      } else if (showLeftDots && showRightDots) {
+        let middleRange = Array.from(
+          { length: 3 },
+          (_, i) => leftSiblingIndex + i
+        );
+
+        pages.push(firstPageIndex);
+        pages.push("...");
+        pages.push(...middleRange);
+        pages.push("...");
+        pages.push(lastPageIndex);
+      }
     }
-    return calculatedPageNumbers;
-  }, [props.List, props.docPerPage]);
+
+    return pages;
+  };
+  const pageNumbers = getPaginationRange();
   //  below useEffect reset currenpage to 1 if user change route
   useEffect(() => {
     checkTourStatus();
@@ -329,11 +377,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) => {
@@ -861,16 +911,13 @@ const ReportTable = (props) => {
   return (
     <div className="relative">
       {Object.keys(actLoader)?.length > 0 && (
-        <div className="absolute w-full h-full rounded-md flex justify-center items-center bg-black bg-opacity-30 z-30">
-          <div
-            style={{ fontSize: "45px", color: "#3dd3e0" }}
-            className="loader-37"
-          ></div>
+        <div className="absolute w-full h-full text-[45px] text-[#3dd3e0] rounded-md flex justify-center items-center bg-black bg-opacity-30 z-30">
+          <div className="loader-37"></div>
         </div>
       )}
-      <div className="p-2 overflow-x-scroll w-full bg-white rounded-md">
+      <div className="p-2 overflow-x-scroll w-full bg-base-100 text-base-content rounded-xl">
         {/* {isCelebration && (
-          <div style={{ position: "relative", zIndex: "1000" }}>
+          <div className="relative z-[1000]">
             <Confetti width={window.innerWidth} height={window.innerHeight} />
           </div>
         )} */}
@@ -909,19 +956,19 @@ const ReportTable = (props) => {
             </div>
           )}
         </div>
-        <table className="table-auto w-full border-collapse">
+        <table className="op-table op-table-zebra border-collapse">
           <thead className="text-[14px]">
             <tr className="border-y-[1px]">
               {props.heading?.map((item, index) => (
                 <React.Fragment key={index}>
-                  <th className="px-4 py-2 font-thin">{item}</th>
+                  <th className="px-4 py-2">{item}</th>
                 </React.Fragment>
               ))}
-              {props.actions?.length > 0 && (
-                <th className="px-4 py-2 font-thin">Action</th>
-              )}
               {/* {props.ReportName === "Templates" && isEnableSubscription && (
-                <th className="px-4 py-2 font-thin">Public</th>
+                <th className="px-4 py-2">Public</th>
+              )} */}
+              {/* {props.actions?.length > 0 && (
+                <th className="px-4 py-2">Action</th>
               )} */}
             </tr>
           </thead>
@@ -932,7 +979,7 @@ const ReportTable = (props) => {
                   props.ReportName === "Contactbook" ? (
                     <tr className="border-y-[1px]" key={index}>
                       {props.heading.includes("Sr.No") && (
-                        <td className="px-4 py-2">{startIndex + index + 1}</td>
+                        <th className="px-4 py-2">{startIndex + index + 1}</th>
                       )}
                       <td className="px-4 py-2 font-semibold">{item?.Name} </td>
                       <td className="px-4 py-2">{item?.Email || "-"}</td>
@@ -943,14 +990,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>
@@ -969,19 +1012,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>
@@ -994,7 +1031,7 @@ const ReportTable = (props) => {
                   ) : (
                     <tr className="border-y-[1px]" key={index}>
                       {props.heading.includes("Sr.No") && (
-                        <td className="px-4 py-2">{startIndex + index + 1}</td>
+                        <th className="px-4 py-2">{startIndex + index + 1}</th>
                       )}
                       <td className="px-4 py-2 font-semibold w-56">
                         {item?.Name}{" "}
@@ -1020,7 +1057,6 @@ const ReportTable = (props) => {
                         {formatRow(item?.ExtUserPtr)}
                       </td>
                       <td className="px-4 py-2">
-                        {/* {item?.Signers ? formatRow(item?.Signers) : "-"} */}
                         {item?.Placeholders ? (
                           <button
                             onClick={() => handleViewSigners(item)}
@@ -1032,58 +1068,214 @@ const ReportTable = (props) => {
                           "-"
                         )}
                       </td>
-                      <td className="px-2 py-2 text-white flex flex-row gap-x-2 gap-y-1 justify-center items-center">
-                        {props.actions?.length > 0 &&
-                          props.actions.map((act, index) => (
-                            <button
-                              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 items-center justify-center focus:outline-none`}
-                              title={act.hoverLabel}
-                              style={{
-                                backgroundColor: act.btnColor
-                                  ? act.btnColor
-                                  : "#3ac9d6",
-                                color: act?.textColor ? act?.textColor : "white"
-                              }}
-                            >
-                              <i className={act.btnIcon}></i>
-                              {act.btnLabel && (
-                                <span className="ml-[4px] uppercase font-medium">
-                                  {act.btnLabel}
-                                </span>
-                              )}
-                              {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">
-                                    {act.subaction?.map((subact) => (
-                                      <div
-                                        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>
+                      {/* {props.ReportName === "Templates" &&
+                        isEnableSubscription && (
+                          <td className=" pl-[20px] py-2">
+                            {props.ReportName === "Templates" && (
+                              <div className="flex flex-row">
+                                <label
+                                  className={
+                                    "cursor-pointer relative inline-flex items-center mb-0"
+                                  }
+                                >
+                                  <input
+                                    checked={isPublic?.[item.objectId]}
+                                    onChange={(e) =>
+                                      handlePublicChange(e, item)
+                                    }
+                                    type="checkbox"
+                                    value=""
+                                    className="sr-only peer"
+                                  />
+                                  <div className="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-1 peer-focus:ring-black rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-black peer-checked:bg-blue-600"></div>
+                                </label>
+                              </div>
+                            )}
+                            {isMakePublic[item.objectId] && (
+                              <ModalUi
+                                isOpen
+                                title={
+                                  isPublic[item.objectId]
+                                    ? "Make template public"
+                                    : "Make template private"
+                                }
+                                handleClose={() => {
+                                  setIsMakePublic({});
+                                  setSelectedPublicRole("");
+                                  setIsPublic((prevStates) => ({
+                                    ...prevStates,
+                                    [item.objectId]: !prevStates[item.objectId]
+                                  }));
+                                }}
+                              >
+                                <div className="m-[20px]">
+                                  <div className="font-normal text-black">
+                                    <p className="text-lg">
+                                      {isPublic[item.objectId]
+                                        ? `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">
+                                        <p className="text-[15px]">
+                                          Public role :{" "}
+                                        </p>
+                                        {item?.Placeholders?.length > 1 ? (
+                                          <select
+                                            className="w-[60%] md:w-[70%] border-[1px] border-gray-200 rounded-sm p-[2px]"
+                                            name="textvalidate"
+                                            value={selectedPublicRole}
+                                            onChange={(e) =>
+                                              setSelectedPublicRole(
+                                                e.target.value
+                                              )
+                                            }
+                                          >
+                                            <option
+                                              disabled
+                                              style={{ fontSize: "13px" }}
+                                              value=""
+                                            >
+                                              Select...
+                                            </option>
+                                            {item?.Placeholders.map(
+                                              (data, ind) => {
+                                                return (
+                                                  <option
+                                                    style={{ fontSize: "13px" }}
+                                                    key={ind}
+                                                    value={data?.Role}
+                                                  >
+                                                    {data?.Role}
+                                                  </option>
+                                                );
+                                              }
+                                            )}
+                                          </select>
+                                        ) : (
+                                          <div className="w-[60%] md:w-[70%] border-[1px] border-gray-200 rounded-sm p-[2px]">
+                                            {item?.Placeholders[0]?.Role}
+                                          </div>
                                         )}
                                       </div>
-                                    ))}
+                                    )}
                                   </div>
+                                  <hr className="bg-[#ccc] mt-2 " />
+                                  <div className="flex items-center mt-3 gap-2 text-white">
+                                    <button
+                                      onClick={() => handlePublicTemplate(item)}
+                                      className="op-btn op-btn-primary"
+                                    >
+                                      Submit
+                                    </button>
+                                    <button
+                                      onClick={() => handleClose(item)}
+                                      className="op-btn op-btn-secondary"
+                                    >
+                                      No
+                                    </button>
+                                  </div>
+                                </div>
+                              </ModalUi>
+                            )}
+                            {isPublicProfile[item.objectId] && (
+                              <ModalUi
+                                isOpen
+                                title={"Public URL"}
+                                handleClose={() => {
+                                  setIsPublicProfile({});
+                                }}
+                                reduceWidth={
+                                  "md:min-w-[440px] md:max-w-[400px]"
+                                }
+                              >
+                                <div className="m-[20px]">
+                                  {publicUserName ? (
+                                    <div className="font-normal text-black">
+                                      <p>
+                                        Here’s your public URL. Copy or share it
+                                        with the signer, and you will be able to
+                                        see all your publicly set templates.
+                                      </p>
+                                      <div className=" flex items-center gap-5 mt-2  p-[2px] w-[75%]">
+                                        <span className="font-bold">
+                                          Public URL :{" "}
+                                        </span>
+                                        <span
+                                          onClick={() => copytoProfileLink()}
+                                          className="underline underline-offset-2 cursor-pointer"
+                                        >{`https://opensign.me/${publicUserName}`}</span>
+                                      </div>
+                                    </div>
+                                  ) : (
+                                    <div className="font-normal text-black">
+                                      <p>
+                                        Please add your public URL, and you will
+                                        be able to make a public template.
+                                      </p>
+                                      <button
+                                        className="mt-3 op-btn op-btn-primary"
+                                        onClick={() => navigate("/profile")}
+                                      >
+                                        Add
+                                      </button>
+                                    </div>
+                                  )}
+                                </div>
+                              </ModalUi>
+                            )}
+                          </td>
+                        )} */}
+                      <td className="px-2 py-2">
+                        <div className="text-white flex flex-row gap-x-2 gap-y-1 justify-start items-center">
+                          {props.actions?.length > 0 &&
+                            props.actions.map((act, index) => (
+                              <button
+                                data-tut={act?.selector}
+                                key={index}
+                                onClick={() => handleActionBtn(act, item)}
+                                title={act.hoverLabel}
+                                className={
+                                  act.action !== "option"
+                                    ? `${
+                                        act?.btnColor ? act.btnColor : ""
+                                      } op-btn op-btn-sm`
+                                    : "text-base-content focus:outline-none text-lg mr-2 relative"
+                                }
+                              >
+                                <i className={act.btnIcon}></i>
+                                {act.btnLabel && (
+                                  <span className="uppercase font-medium">
+                                    {act.btnLabel}
+                                  </span>
                                 )}
-                            </button>
-                          ))}
+                                {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">
+                                      {act.subaction?.map((subact) => (
+                                        <div
+                                          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>
+                                      ))}
+                                    </div>
+                                  )}
+                              </button>
+                            ))}
+                        </div>
                         {isViewShare[item.objectId] && (
                           <div className="fixed z-[999] inset-0 w-full h-full bg-black bg-opacity-[75%]">
                             <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-sm bg-white rounded shadow-md max-h-90 min-w-[90%] md:min-w-[400px] overflow-y-auto max-h-[340px] md:max-h-[400px] hide-scrollbar">
@@ -1140,19 +1332,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>
@@ -1167,11 +1353,8 @@ const ReportTable = (props) => {
                             handleClose={() => setIsBulkSend({})}
                           >
                             {isLoader[item.objectId] ? (
-                              <div className="w-full h-[100px] md:h-[100px] rounded-b-md flex justify-center items-center bg-black bg-opacity-30 z-30">
-                                <div
-                                  style={{ fontSize: "45px", color: "#3dd3e0" }}
-                                  className="loader-37"
-                                ></div>
+                              <div className="w-full h-[100px] text-[45px] text-[#3dd3e0] rounded-b-md flex justify-center items-center bg-black bg-opacity-30 z-30">
+                                <div className="loader-37"></div>
                               </div>
                             ) : (
                               <BulkSendUi
@@ -1234,23 +1417,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>
@@ -1274,22 +1451,15 @@ const ReportTable = (props) => {
                                   {isNextStep[user.Id] && (
                                     <div className="relative ">
                                       {actLoader[user.Id] && (
-                                        <div className="absolute w-full h-full flex justify-center items-center bg-black bg-opacity-30 z-30">
-                                          <div
-                                            style={{
-                                              fontSize: "45px",
-                                              color: "#3dd3e0"
-                                            }}
-                                            className="loader-37"
-                                          ></div>
+                                        <div className="absolute text-[45px] text-[#3dd3e0] w-full h-full flex justify-center items-center bg-black bg-opacity-30 z-30">
+                                          <div className="loader-37"></div>
                                         </div>
                                       )}
-
                                       <form
                                         onSubmit={(e) =>
                                           handleResendMail(e, item, user)
                                         }
-                                        className="w-full flex flex-col gap-2 p-3 text-black relative"
+                                        className="w-full flex flex-col gap-2 p-3 text-base-content relative"
                                       >
                                         <div className="absolute right-5 text-xs z-40">
                                           <Tooltip
@@ -1308,7 +1478,7 @@ const ReportTable = (props) => {
                                           </label>
                                           <input
                                             id="mailsubject"
-                                            className="w-full py-1.5 px-2 border-[1px] border-gray-300 rounded"
+                                            className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                                             value={mail.subject}
                                             onChange={(e) =>
                                               handleSubjectChange(
@@ -1341,7 +1511,7 @@ const ReportTable = (props) => {
                                         </div>
                                         <button
                                           type="submit"
-                                          className="bg-[#32a3ac] w-[70px] font-semibold text-white py-2 rounded"
+                                          className="op-btn op-btn-primary"
                                         >
                                           Resend
                                         </button>
@@ -1367,170 +1537,6 @@ const ReportTable = (props) => {
                           </ModalUi>
                         )}
                       </td>
-                      {/* {isEnableSubscription && (
-                        <td className=" pl-[20px] py-2    ">
-                          {props.ReportName === "Templates" && (
-                            <div className="  flex flex-row-">
-                              <label
-                                className={
-                                  "cursor-pointer relative inline-flex items-center mb-0"
-                                }
-                              >
-                                <input
-                                  checked={isPublic?.[item.objectId]}
-                                  onChange={(e) => handlePublicChange(e, item)}
-                                  type="checkbox"
-                                  value=""
-                                  className="sr-only peer"
-                                />
-                                <div className="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-1 peer-focus:ring-black rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-black peer-checked:bg-blue-600"></div>
-                              </label>
-                            </div>
-                          )}
-                          {isMakePublic[item.objectId] && (
-                            <ModalUi
-                              isOpen
-                              title={
-                                isPublic[item.objectId]
-                                  ? "Make template public"
-                                  : "Make template private"
-                              }
-                              handleClose={() => {
-                                setIsMakePublic({});
-                                setSelectedPublicRole("");
-                                setIsPublic((prevStates) => ({
-                                  ...prevStates,
-                                  [item.objectId]: !prevStates[item.objectId]
-                                }));
-                              }}
-                            >
-                              <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 ?`}
-                                  </p>
-                                  {isPublic[item.objectId] && (
-                                    <div className="flex mt-2 gap-2 md:items-center">
-                                      <p className="text-[15px]">
-                                        Public role :{" "}
-                                      </p>
-                                      {item?.Placeholders?.length > 1 ? (
-                                        <select
-                                          className="w-[60%] md:w-[70%] border-[1px] border-gray-200 rounded-sm p-[2px]"
-                                          name="textvalidate"
-                                          value={selectedPublicRole}
-                                          onChange={(e) =>
-                                            setSelectedPublicRole(
-                                              e.target.value
-                                            )
-                                          }
-                                        >
-                                          <option
-                                            disabled
-                                            style={{ fontSize: "13px" }}
-                                            value=""
-                                          >
-                                            Select...
-                                          </option>
-                                          {item?.Placeholders.map(
-                                            (data, ind) => {
-                                              return (
-                                                <option
-                                                  style={{ fontSize: "13px" }}
-                                                  key={ind}
-                                                  value={data?.Role}
-                                                >
-                                                  {data?.Role}
-                                                </option>
-                                              );
-                                            }
-                                          )}
-                                        </select>
-                                      ) : (
-                                        <div className="w-[60%] md:w-[70%] border-[1px] border-gray-200 rounded-sm p-[2px]">
-                                          {item?.Placeholders[0]?.Role}
-                                        </div>
-                                      )}
-                                    </div>
-                                  )}
-                                </div>
-
-                                <hr className="bg-[#ccc] mt-2 " />
-                                <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
-                                    }}
-                                  >
-                                    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
-                                    }}
-                                  >
-                                    No
-                                  </button>
-                                </div>
-                              </div>
-                            </ModalUi>
-                          )}
-                          {isPublicProfile[item.objectId] && (
-                            <ModalUi
-                              isOpen
-                              title={"Public URL"}
-                              handleClose={() => {
-                                setIsPublicProfile({});
-                              }}
-                              reduceWidth={"md:min-w-[440px] md:max-w-[400px]"}
-                            >
-                              <div className="m-[20px]">
-                                {publicUserName ? (
-                                  <div className="font-normal text-black">
-                                    <p>
-                                      Here’s your public URL. Copy or share it
-                                      with the signer, and you will be able to
-                                      see all your publicly set templates.
-                                    </p>
-                                    <div className=" flex items-center gap-5 mt-2  p-[2px] w-[75%]">
-                                      <span className="font-bold">
-                                        Public URL :{" "}
-                                      </span>
-                                      <span
-                                        onClick={() => copytoProfileLink()}
-                                        className="underline underline-offset-2 cursor-pointer"
-                                      >{`https://opensign.me/${publicUserName}`}</span>
-                                    </div>
-                                  </div>
-                                ) : (
-                                  <div className="font-normal text-black">
-                                    <p>
-                                      Please add your public URL, and you will
-                                      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
-                                      }}
-                                      onClick={() => navigate("/profile")}
-                                    >
-                                      Add
-                                    </button>
-                                  </div>
-                                )}
-                              </div>
-                            </ModalUi>
-                          )}
-                        </td>
-                      )} */}
                     </tr>
                   )
                 )}
@@ -1538,46 +1544,38 @@ const ReportTable = (props) => {
             )}
           </tbody>
         </table>
-        <div className="flex flex-wrap items-center gap-2 p-2 ">
+        <div className="op-join flex flex-wrap items-center p-2 ">
           {props.List.length > props.docPerPage && (
-            <>
-              {currentPage > 1 && (
-                <button
-                  onClick={() => paginateBack()}
-                  className="bg-blue-400 text-white rounded px-3 py-2 focus:outline-none"
-                >
-                  Prev
-                </button>
-              )}
-            </>
-          )}
-          {pageNumbers.map((x) => (
             <button
-              key={x}
+              onClick={() => paginateBack()}
+              className="op-join-item op-btn "
+            >
+              Prev
+            </button>
+          )}
+          {pageNumbers.map((x, i) => (
+            <button
+              key={i}
               onClick={() => setCurrentPage(x)}
-              className=" bg-sky-400 text-white rounded px-3 py-2 focus:outline-none"
+              disabled={x === "..."}
+              className={`${
+                x === currentPage ? "op-btn-active" : ""
+              } op-join-item op-btn`}
             >
               {x}
             </button>
           ))}
-          {isMoreDocs && (
-            <button className="text-black rounded px-1 py-2">...</button>
-          )}
           {props.List.length > props.docPerPage && (
-            <>
-              {pageNumbers.includes(currentPage + 1) && (
-                <button
-                  onClick={() => paginateFront()}
-                  className="bg-blue-400 text-white rounded px-3 py-2 focus:outline-none"
-                >
-                  Next
-                </button>
-              )}
-            </>
+            <button
+              onClick={() => paginateFront()}
+              className="op-join-item op-btn"
+            >
+              Next
+            </button>
           )}
         </div>
         {props.List?.length <= 0 && (
-          <div className="flex flex-col items-center justify-center w-full bg-white rounded py-4">
+          <div className="flex flex-col items-center justify-center w-full bg-base-100 text-base-content rounded-xl py-4">
             <div className="w-[60px] h-[60px] overflow-hidden">
               <img
                 className="w-full h-full object-contain"
diff --git a/apps/OpenSign/src/primitives/LinkUserModal.js b/apps/OpenSign/src/primitives/LinkUserModal.js
index 4af32dad4..552582697 100644
--- a/apps/OpenSign/src/primitives/LinkUserModal.js
+++ b/apps/OpenSign/src/primitives/LinkUserModal.js
@@ -18,31 +18,7 @@ const LinkUserModal = (props) => {
         closePopup={props.closePopup}
         signersData={props?.signersData}
       />
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          gap: 5,
-          margin: "0 30%",
-          color: "#808080"
-        }}
-      >
-        <span
-          style={{
-            height: 1,
-            width: "100%",
-            backgroundColor: "#ccc"
-          }}
-        ></span>
-        <span>or</span>
-        <span
-          style={{
-            height: 1,
-            width: "100%",
-            backgroundColor: "#ccc"
-          }}
-        ></span>
-      </div>
+      <div className="op-divider text-base-content mx-[25%] my-1">or</div>
       <AddContact details={props.handleAddUser} closePopup={props.closePopup} />
     </ModalUi>
   );
diff --git a/apps/OpenSign/src/primitives/ModalUi.js b/apps/OpenSign/src/primitives/ModalUi.js
index b0413b430..24028cd0c 100644
--- a/apps/OpenSign/src/primitives/ModalUi.js
+++ b/apps/OpenSign/src/primitives/ModalUi.js
@@ -20,7 +20,7 @@ const ModalUi = ({
           <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-white rounded shadow-md max-h-90 min-w-[90%]  overflow-y-auto hide-scrollbar `}
+            } 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 `}
           >
             {showHeader && (
               <div
diff --git a/apps/OpenSign/src/styles/opensigndrive.css b/apps/OpenSign/src/styles/opensigndrive.css
index 76b414cce..9e9f5d8ee 100644
--- a/apps/OpenSign/src/styles/opensigndrive.css
+++ b/apps/OpenSign/src/styles/opensigndrive.css
@@ -208,7 +208,6 @@
   height: 100px;
   margin: 10px;
   display: inline-block;
-
   cursor: pointer;
 }
 
diff --git a/apps/OpenSign/tailwind.config.js b/apps/OpenSign/tailwind.config.js
index 9c95ec50b..1cefffd4c 100644
--- a/apps/OpenSign/tailwind.config.js
+++ b/apps/OpenSign/tailwind.config.js
@@ -4,5 +4,9 @@ module.exports = {
   theme: {
     extend: {}
   },
-  plugins: []
+  plugins: [require("daisyui")],
+  daisyui: {
+    themes: true,
+    prefix: "op-"
+  }
 };