diff --git a/apps/OpenSign/src/components/LoginGoogle.js b/apps/OpenSign/src/components/LoginGoogle.js
index 7bb53017b..23af8bc1c 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,25 @@ 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>
+              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 w-full"
               id="Phone"
               value={userDetails.Phone}
               onChange={(e) =>
@@ -260,14 +239,13 @@ const GoogleSignInBtn = ({
           <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>
+              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 w-full"
               id="Company"
               value={userDetails.Company}
               onChange={(e) =>
@@ -282,14 +260,13 @@ const GoogleSignInBtn = ({
           <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>
+              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 w-full"
               id="JobTitle"
               value={userDetails.Destination}
               onChange={(e) =>
@@ -301,20 +278,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-neutral"
               onClick={handleCloseModal}
-              style={{ width: 90, backgroundColor: modalCancelBtnColor }}
             >
               Cancel
             </button>
diff --git a/apps/OpenSign/src/components/opensigndrive/DriveBody.js b/apps/OpenSign/src/components/opensigndrive/DriveBody.js
index 7650a85ba..5e6ae978d 100644
--- a/apps/OpenSign/src/components/opensigndrive/DriveBody.js
+++ b/apps/OpenSign/src/components/opensigndrive/DriveBody.js
@@ -599,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/pages/ForgetPassword.js b/apps/OpenSign/src/pages/ForgetPassword.js
index 92e5a24f0..b87ccf90c 100644
--- a/apps/OpenSign/src/pages/ForgetPassword.js
+++ b/apps/OpenSign/src/pages/ForgetPassword.js
@@ -1,6 +1,6 @@
 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";
@@ -10,6 +10,7 @@ import { fetchAppInfo } from "../redux/reducers/infoReducer";
 
 function ForgotPassword() {
   const dispatch = useDispatch();
+  const navigate = useNavigate();
   const [state, setState] = useState({
     email: "",
     password: "",
@@ -79,7 +80,7 @@ function ForgotPassword() {
             )}
           </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]">
@@ -89,9 +90,9 @@ function ForgotPassword() {
                   <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
@@ -103,12 +104,12 @@ function ForgotPassword() {
                   <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/Login.js b/apps/OpenSign/src/pages/Login.js
index ff8de89ee..a3d57929b 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";
@@ -1099,7 +1095,7 @@ function Login() {
           <div
             aria-labelledby="loginHeading"
             role="region"
-            className="md:p-10 lg:p-16 "
+            className="md:p-10 lg:p-16"
           >
             <div className="md:p-4 lg:p-10 p-4 bg-base-100 text-base-content md:border-[1px] md:border-gray-400 ">
               <div className="w-[250px] h-[66px] inline-block overflow-hidden">
@@ -1125,8 +1121,8 @@ function Login() {
                         </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 w-full"
                           name="email"
                           value={state.email}
                           onChange={handleChange}
@@ -1144,18 +1140,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 w-full"
                                 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 ? (
@@ -1170,7 +1162,7 @@ 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>
@@ -1198,17 +1190,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>
+                    <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
@@ -1252,7 +1236,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"
@@ -1263,7 +1247,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 w-full"
                   id="Company"
                   value={userDetails.Company}
                   onChange={(e) =>
@@ -1286,7 +1270,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 w-full"
                   id="JobTitle"
                   value={userDetails.Destination}
                   onChange={(e) =>
@@ -1298,23 +1282,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-neutral"
                   onClick={handleCloseModal}
-                  style={{ width: 75, backgroundColor: modalCancelBtnColor }}
                 >
                   Cancel
                 </button>
@@ -1324,14 +1303,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 d481e4292..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);
       }
     }
   };
@@ -230,15 +247,7 @@ const ManageSign = () => {
           <div className="loader-37 "></div>
         </div>
       )}
-      {isSuccess && (
-        <div
-          className="alert alert-success successBox"
-          role="alert"
-          onAnimationEnd={() => setIsSuccess(false)}
-        >
-          Signature saved successfully!
-        </div>
-      )}
+      {isAlert?.message && <Alert type={isAlert.type}>{isAlert.message}</Alert>}
       <div
         className="mainDiv"
         style={{
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/Signup.js b/apps/OpenSign/src/pages/Signup.js
index 1064e6998..df7d63a19 100644
--- a/apps/OpenSign/src/pages/Signup.js
+++ b/apps/OpenSign/src/pages/Signup.js
@@ -529,7 +529,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 w-full"
                         value={name}
                         onChange={(e) => setName(e.target.value)}
                         required
@@ -541,8 +541,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 w-full"
                         value={email}
                         onChange={(e) =>
                           setEmail(e.target.value?.toLowerCase())
@@ -556,7 +556,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 w-full"
                         value={phone}
                         onChange={(e) => setPhone(e.target.value)}
                         required
@@ -568,7 +568,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 w-full"
                         value={company}
                         onChange={(e) => setCompany(e.target.value)}
                         required
@@ -580,7 +580,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 w-full"
                         value={jobTitle}
                         onChange={(e) => setJobTitle(e.target.value)}
                         required
@@ -593,16 +593,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 w-full"
                           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 ? (
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 34bb5365f..a856dcb57 100644
--- a/apps/OpenSign/src/primitives/GetReportDisplay.js
+++ b/apps/OpenSign/src/primitives/GetReportDisplay.js
@@ -888,7 +888,7 @@ const ReportTable = (props) => {
           <div className="loader-37"></div>
         </div>
       )}
-      <div className="p-2 overflow-x-scroll w-full bg-white rounded-xl">
+      <div className="p-2 overflow-x-scroll w-full bg-base-100 text-base-content rounded-xl">
         {isCelebration && (
           <div style={{ position: "relative", zIndex: "1000" }}>
             <Confetti width={window.innerWidth} height={window.innerHeight} />
@@ -929,8 +929,7 @@ const ReportTable = (props) => {
             </div>
           )}
         </div>
-        <table className="op-table op-table-zebra">
-          {/* <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) => (
@@ -1586,7 +1585,7 @@ const ReportTable = (props) => {
           )}
         </div>
         {props.List?.length <= 0 && (
-          <div className="flex flex-col items-center justify-center w-full bg-white rounded-xl 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/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