diff --git a/apps/OpenSign/src/components/Footer.js b/apps/OpenSign/src/components/Footer.js
index 56373cebd..008b1b33c 100644
--- a/apps/OpenSign/src/components/Footer.js
+++ b/apps/OpenSign/src/components/Footer.js
@@ -45,7 +45,7 @@ const Footer = () => {
   };
   return (
     <>
-      <footer className="opfooter opfooter-center py-3 bg-base-300 text-base-content text-center text-[13px]">
+      <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;
diff --git a/apps/OpenSign/src/components/Header.js b/apps/OpenSign/src/components/Header.js
index 17ccebe68..9c4451787 100644
--- a/apps/OpenSign/src/components/Header.js
+++ b/apps/OpenSign/src/components/Header.js
@@ -89,10 +89,10 @@ const Header = ({ showSidebar }) => {
   }, [isOpen]);
 
   return (
-    <div className="opnavbar bg-base-100 shadow">
+    <div className="op-navbar bg-base-100 shadow">
       <div className="flex-none">
         <button
-          className="opbtn opbtn-square opbtn-ghost focus:outline-none"
+          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>
@@ -107,7 +107,7 @@ const Header = ({ showSidebar }) => {
           />
         </div>
       </div>
-      <div className="flex-none gap-2">
+      <div id="profile-menu" className="flex-none gap-2">
         {!isSubscribe && (
           <div>
             <button
@@ -146,8 +146,8 @@ const Header = ({ showSidebar }) => {
             {username && username}
           </div>
         )}
-        <div className="opdropdown opdropdown-end" id="profile-menu">
-          <div tabIndex={0} role="button" className="opbtn opbtn-ghost">
+        <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"
@@ -157,7 +157,7 @@ const Header = ({ showSidebar }) => {
           </div>
           <ul
             tabIndex={0}
-            className="mt-3 z-[1] p-2 shadow opmenu opmenu-sm opdropdown-content text-base-content bg-base-100 rounded-box w-52"
+            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"
           >
             <li onClick={() => openInNewTab("https://docs.opensignlabs.com")}>
               <span>
diff --git a/apps/OpenSign/src/components/dashboard/DashboardButton.js b/apps/OpenSign/src/components/dashboard/DashboardButton.js
index 2c8fecd91..53676563b 100644
--- a/apps/OpenSign/src/components/dashboard/DashboardButton.js
+++ b/apps/OpenSign/src/components/dashboard/DashboardButton.js
@@ -26,7 +26,7 @@ const DashboardButton = (props) => {
         props.Data && props.Data.Redirect_type
           ? "cursor-pointer"
           : "cursor-default"
-      } w-full shadow-md px-3 py-2 opcard bg-base-100`}
+      } w-full shadow-md px-3 py-2 op-card bg-base-100`}
     >
       <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">
@@ -36,7 +36,7 @@ const DashboardButton = (props) => {
             } text-[25px] lg:text-[30px]`}
           ></i>
         </span>
-        <div className="opcard-title text-lg ml-3 text-base-content">
+        <div className="op-card-title text-lg ml-3 text-base-content">
           {props.Label}
         </div>
       </div>
diff --git a/apps/OpenSign/src/components/dashboard/DashboardCard.js b/apps/OpenSign/src/components/dashboard/DashboardCard.js
index c14547357..31bf47f2e 100644
--- a/apps/OpenSign/src/components/dashboard/DashboardCard.js
+++ b/apps/OpenSign/src/components/dashboard/DashboardCard.js
@@ -339,14 +339,14 @@ const DashboardCard = (props) => {
       }`}
     >
       <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">
+        <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=" font-medium">
+        <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)}
diff --git a/apps/OpenSign/src/components/dashboard/GetDashboard.js b/apps/OpenSign/src/components/dashboard/GetDashboard.js
index d85b254b7..6b172969c 100644
--- a/apps/OpenSign/src/components/dashboard/GetDashboard.js
+++ b/apps/OpenSign/src/components/dashboard/GetDashboard.js
@@ -18,28 +18,26 @@ const buttonList = [
 ];
 const GetDashboard = (props) => {
   const Button = ({ label, redirectId, redirectType, icon }) => (
-    <>
-      <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>
-    </>
+    <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="opcard bg-[#2ed8b6] w-full h-[140px] px-3 pt-4 mb-3 shadow-md"
+            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 }}
           >
@@ -80,7 +78,7 @@ const GetDashboard = (props) => {
       case "Card":
         return (
           <div
-            className="opcard bg-[#2ed8b6] w-full h-[140px] px-3 pt-4 mb-3 shadow-md"
+            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>}>
diff --git a/apps/OpenSign/src/components/shared/fields/SignersInput.js b/apps/OpenSign/src/components/shared/fields/SignersInput.js
index 9aa854b75..9b100ef86 100644
--- a/apps/OpenSign/src/components/shared/fields/SignersInput.js
+++ b/apps/OpenSign/src/components/shared/fields/SignersInput.js
@@ -147,7 +147,7 @@ const SignersInput = (props) => {
             setIsModel(true);
             openModal();
           }}
-          className="cursor-pointer  border-[1px] opinut opinput-bordered min-h-[38px] min-w-[48px] flex justify-center items-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/Sidebar.js b/apps/OpenSign/src/components/sidebar/Sidebar.js
index 14bfee5c9..92c8778b6 100644
--- a/apps/OpenSign/src/components/sidebar/Sidebar.js
+++ b/apps/OpenSign/src/components/sidebar/Sidebar.js
@@ -67,7 +67,7 @@ const Sidebar = ({ isOpen, closeSidebar }) => {
         </div>
       </div>
       <nav
-        className="opmenu opmenu-sm"
+        className="op-menu op-menu-sm"
         aria-label="OpenSign Sidebar Navigation"
       >
         <ul
diff --git a/apps/OpenSign/src/pages/Form.js b/apps/OpenSign/src/pages/Form.js
index a8fe78010..236c85c3c 100644
--- a/apps/OpenSign/src/pages/Form.js
+++ b/apps/OpenSign/src/pages/Form.js
@@ -571,16 +571,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>
       ) : (
         <>
@@ -648,7 +640,7 @@ const Forms = (props) => {
               </label>
               {fileupload.length > 0 ? (
                 <div className="flex gap-2 justify-center items-center">
-                  <div className="flex justify-between items-center opinput opinput-bordered w-full opinput-sm text-x 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>
@@ -670,7 +662,7 @@ const Forms = (props) => {
                 <div className="flex gap-2 justify-center items-center ">
                   <input
                     type="file"
-                    className="opfile-input opfile-input-bordered opfile-input-sm w-full text-xs"
+                    className="op-file-input op-file-input-bordered op-file-input-sm w-full text-xs"
                     onChange={(e) => handleFileInput(e)}
                     ref={inputFileRef}
                     accept={
@@ -698,7 +690,7 @@ const Forms = (props) => {
               </label>
               <input
                 name="Name"
-                className="opinput opinput-bordered w-full opinput-sm text-xs"
+                className="op-input op-input-bordered op-input-sm w-full text-xs"
                 value={formData.Name}
                 onChange={(e) => handleStrInput(e)}
                 required
@@ -708,7 +700,7 @@ const Forms = (props) => {
               <label className="block">Description</label>
               <input
                 name="Description"
-                className="opinput opinput-bordered w-full opinput-sm text-xs"
+                className="op-input op-input-bordered op-input-sm w-full text-xs"
                 value={formData.Description}
                 onChange={(e) => handleStrInput(e)}
               />
@@ -726,7 +718,7 @@ const Forms = (props) => {
               </label>
               <input
                 name="Note"
-                className="opinput opinput-bordered w-full opinput-sm text-xs"
+                className="op-input op-input-bordered op-input-sm w-full text-xs"
                 value={formData.Note}
                 onChange={(e) => handleStrInput(e)}
                 required
@@ -748,7 +740,7 @@ const Forms = (props) => {
                 <input
                   type="number"
                   name="TimeToCompleteDays"
-                  className="opinput opinput-bordered w-full opinput-sm text-xs"
+                  className="op-input op-input-bordered op-input-sm w-full text-xs"
                   value={formData.TimeToCompleteDays}
                   onChange={(e) => handleStrInput(e)}
                   required
@@ -821,7 +813,7 @@ const Forms = (props) => {
                     <input
                       type="radio"
                       value={"true"}
-                      className="opradio opradio-xs"
+                      className="op-radio op-radio-xs"
                       name="SendinOrder"
                       checked={formData.SendinOrder === "true"}
                       onChange={handleStrInput}
@@ -833,7 +825,7 @@ const Forms = (props) => {
                       type="radio"
                       value={"false"}
                       name="SendinOrder"
-                      className="opradio opradio-xs"
+                      className="op-radio op-radio-xs"
                       checked={formData.SendinOrder === "false"}
                       onChange={handleStrInput}
                     />
@@ -867,7 +859,7 @@ const Forms = (props) => {
                   >
                     <input
                       type="checkbox"
-                      className="optoggle transition-all checked:[--tglbg:#3368ff] checked:bg-white"
+                      className="op-toggle transition-all checked:[--tglbg:#3368ff] checked:bg-white"
                       checked={formData.autoreminder}
                       onChange={handleAutoReminder}
                     />
@@ -883,7 +875,7 @@ const Forms = (props) => {
                       type="number"
                       value={formData.remindOnceInEvery}
                       name="remindOnceInEvery"
-                      className="opinput opinput-bordered w-full opinput-sm text-xs"
+                      className="op-input op-input-bordered op-input-sm w-full text-xs"
                       onChange={handleStrInput}
                       required
                     />
@@ -895,14 +887,14 @@ const Forms = (props) => {
               <button
                 className={`${
                   isSubmit ? "cursor-progress" : ""
-                } opbtn opbtn-primary`}
+                } op-btn op-btn-primary`}
                 type="submit"
                 disabled={isSubmit}
               >
                 Next
               </button>
               <div
-                className="opbtn opbtn-neutral"
+                className="op-btn op-btn-neutral"
                 onClick={() => handleReset()}
               >
                 Reset
diff --git a/apps/OpenSign/src/pages/UserProfile.js b/apps/OpenSign/src/pages/UserProfile.js
index cbc0d2429..a603806e0 100644
--- a/apps/OpenSign/src/pages/UserProfile.js
+++ b/apps/OpenSign/src/pages/UserProfile.js
@@ -322,7 +322,7 @@ function UserProfile() {
               {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 w-[450px]">
             <div className="flex flex-col justify-center items-center my-4">
               <div className="w-[200px] h-[200px] overflow-hidden rounded-full">
                 <img
@@ -334,7 +334,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="max-w-[270px] text-sm py-1 px-2 mt-4 border-[1px] border-[#15b4e9] rounded"
                   accept="image/png, image/gif, image/jpeg"
                   onChange={(e) => {
                     let files = e.target.files;
@@ -368,7 +368,7 @@ function UserProfile() {
                   <input
                     type="text"
                     value={name}
-                    className="py-1 px-2 text-sm border-[1px] border-[#15b4e9] text-black rounded"
+                    className="py-1 px-2 text-sm border-[1px] border-[#15b4e9] rounded"
                     onChange={(e) => SetName(e.target.value)}
                   />
                 ) : (
@@ -384,7 +384,7 @@ function UserProfile() {
                 {editmode ? (
                   <input
                     type="text"
-                    className="py-1 px-2 text-sm border-[1px] border-[#15b4e9] text-black rounded"
+                    className="py-1 px-2 text-sm border-[1px] border-[#15b4e9] rounded"
                     onChange={(e) => SetPhone(e.target.value)}
                     value={Phone}
                   />
@@ -406,7 +406,7 @@ function UserProfile() {
                   <input
                     type="text"
                     value={company}
-                    className="py-1 px-2 text-sm border-[1px] border-[#15b4e9] text-black rounded"
+                    className="py-1 px-2 text-sm border-[1px] border-[#15b4e9] rounded"
                     onChange={(e) => setCompany(e.target.value)}
                   />
                 ) : (
@@ -423,7 +423,8 @@ function UserProfile() {
                   <input
                     type="text"
                     value={jobTitle}
-                    className="py-1 px-2 text-sm border-[1px] border-[#15b4e9] text-black rounded"
+                    className="py-1 px-2 text-sm op-input op-input-bordered rounded-xl"
+                    // className="py-1 px-2 text-sm border-[1px] border-[#15b4e9] text-black rounded"
                     onChange={(e) => setJobTitle(e.target.value)}
                   />
                 ) : (
diff --git a/apps/OpenSign/src/primitives/GetReportDisplay.js b/apps/OpenSign/src/primitives/GetReportDisplay.js
index 9f295595c..34bb5365f 100644
--- a/apps/OpenSign/src/primitives/GetReportDisplay.js
+++ b/apps/OpenSign/src/primitives/GetReportDisplay.js
@@ -929,7 +929,7 @@ const ReportTable = (props) => {
             </div>
           )}
         </div>
-        <table className="optable optable-zebra">
+        <table className="op-table op-table-zebra">
           {/* <table className="table-auto w-full border-collapse"> */}
           <thead className="text-[14px]">
             <tr className="border-y-[1px]">
@@ -1555,11 +1555,11 @@ const ReportTable = (props) => {
             )}
           </tbody>
         </table>
-        <div className="opjoin flex flex-wrap items-center p-2 ">
+        <div className="op-join flex flex-wrap items-center p-2 ">
           {props.List.length > props.docPerPage && (
             <button
               onClick={() => paginateBack()}
-              className="opjoin-item opbtn "
+              className="op-join-item op-btn "
             >
               Prev
             </button>
@@ -1570,8 +1570,8 @@ const ReportTable = (props) => {
               onClick={() => setCurrentPage(x)}
               disabled={x === "..."}
               className={`${
-                x === currentPage ? "opbtn-active" : ""
-              } opjoin-item opbtn`}
+                x === currentPage ? "op-btn-active" : ""
+              } op-join-item op-btn`}
             >
               {x}
             </button>
@@ -1579,7 +1579,7 @@ const ReportTable = (props) => {
           {props.List.length > props.docPerPage && (
             <button
               onClick={() => paginateFront()}
-              className="opjoin-item opbtn"
+              className="op-join-item op-btn"
             >
               Next
             </button>
diff --git a/apps/OpenSign/tailwind.config.js b/apps/OpenSign/tailwind.config.js
index 4f3abb972..721bb2f8d 100644
--- a/apps/OpenSign/tailwind.config.js
+++ b/apps/OpenSign/tailwind.config.js
@@ -7,6 +7,6 @@ module.exports = {
   plugins: [require("daisyui")],
   daisyui: {
     themes: ["emerald", "dark"],
-    prefix: "op"
+    prefix: "op-"
   }
 };