diff --git a/apps/OpenSign/package-lock.json b/apps/OpenSign/package-lock.json
index 94f9c1c8c..b93585b6f 100644
--- a/apps/OpenSign/package-lock.json
+++ b/apps/OpenSign/package-lock.json
@@ -58,6 +58,7 @@
         "@babel/runtime-corejs2": "^7.24.6",
         "autoprefixer": "^10.4.19",
         "commitizen": "^4.3.0",
+        "daisyui": "^4.11.1",
         "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.11.1",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.11.1.tgz",
+      "integrity": "sha512-obT9CUbQdW6eoHwSeT5VwaRrWlwrM4OT5qlfdJ0oQlSIEYhwnEl2+L2fwu5PioLbitwuMdYC2X8I1cyy8Pf6LQ==",
+      "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 91ee1589d..dd8666c98 100644
--- a/apps/OpenSign/package.json
+++ b/apps/OpenSign/package.json
@@ -88,6 +88,7 @@
     "@babel/runtime-corejs2": "^7.24.6",
     "autoprefixer": "^10.4.19",
     "commitizen": "^4.3.0",
+    "daisyui": "^4.11.1",
     "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..59e427774 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="emerald">
 
 <head>
   <meta charset="utf-8" />
@@ -50,4 +50,4 @@
     -->
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/apps/OpenSign/src/components/Footer.js b/apps/OpenSign/src/components/Footer.js
index 31753698c..56373cebd 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="opfooter opfooter-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/Header.js b/apps/OpenSign/src/components/Header.js
index 90563aac5..0ac284f9b 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="opnavbar bg-base-100 shadow">
+      <div className="flex-none">
+        <button
+          className="opbtn opbtn-square opbtn-ghost focus:outline-none"
+          onClick={showSidebar}
+        >
+          <i className="fa-solid fa-bars text-xl text-black"></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 className="flex-none gap-2">
         {!isSubscribe && (
           <div>
             <button
@@ -144,56 +143,61 @@ const Header = ({ showSidebar }) => {
             {username && username}
           </div>
         )}
-        <div className="relative">
-          <div className="cursor-pointer">
-            <i onClick={toggleDropdown} className="fa-solid fa-angle-down"></i>
+        <div className="opdropdown opdropdown-end" id="profile-menu">
+          <div tabIndex={0} role="button" className="opbtn opbtn-ghost">
+            <div className="">
+              <i
+                tabIndex={0}
+                role="button"
+                onClick={toggleDropdown}
+                className="fa-solid fa-angle-down"
+              ></i>
+            </div>
           </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 opmenu opmenu-sm opdropdown-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/shared/fields/SignersInput.js b/apps/OpenSign/src/components/shared/fields/SignersInput.js
index 97d77e3fa..835a81db8 100644
--- a/apps/OpenSign/src/components/shared/fields/SignersInput.js
+++ b/apps/OpenSign/src/components/shared/fields/SignersInput.js
@@ -111,7 +111,9 @@ const SignersInput = (props) => {
         <span className="absolute ml-1 text-xs z-50">
           <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>
@@ -133,16 +135,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 rounded border-[1px] border-[#ccc] 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 766ed00dc..31b2a4124 100644
--- a/apps/OpenSign/src/components/sidebar/Sidebar.js
+++ b/apps/OpenSign/src/components/sidebar/Sidebar.js
@@ -35,8 +35,8 @@ const Sidebar = ({ isOpen, closeSidebar }) => {
 
   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-white text-[#444] 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">
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/pages/Form.js b/apps/OpenSign/src/pages/Form.js
index 9765d7432..45c6046ed 100644
--- a/apps/OpenSign/src/pages/Form.js
+++ b/apps/OpenSign/src/pages/Form.js
@@ -667,10 +667,11 @@ 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="opfile-input opfile-input-bordered opfile-input-sm w-full text-xs"
+                    // className="bg-white px-2 py-1.5 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
                     onChange={(e) => handleFileInput(e)}
                     ref={inputFileRef}
                     accept={
@@ -698,7 +699,8 @@ 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="opinput opinput-bordered w-full opinput-sm text-xs"
+                // className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
                 value={formData.Name}
                 onChange={(e) => handleStrInput(e)}
                 required
@@ -708,7 +710,8 @@ 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="opinput opinput-bordered w-full opinput-sm text-xs"
+                // className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
                 value={formData.Description}
                 onChange={(e) => handleStrInput(e)}
               />
@@ -726,7 +729,8 @@ 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="opinput opinput-bordered w-full opinput-sm text-xs"
+                // className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
                 value={formData.Note}
                 onChange={(e) => handleStrInput(e)}
                 required
@@ -748,7 +752,8 @@ 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="opinput opinput-bordered w-full opinput-sm text-xs"
+                  // className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
                   value={formData.TimeToCompleteDays}
                   onChange={(e) => handleStrInput(e)}
                   required
@@ -822,6 +827,7 @@ const Forms = (props) => {
                     <input
                       type="radio"
                       value={"true"}
+                      className="opradio opradio-xs"
                       name="SendinOrder"
                       checked={formData.SendinOrder === "true"}
                       onChange={handleStrInput}
@@ -833,6 +839,7 @@ const Forms = (props) => {
                       type="radio"
                       value={"false"}
                       name="SendinOrder"
+                      className="opradio opradio-xs"
                       checked={formData.SendinOrder === "false"}
                       onChange={handleStrInput}
                     />
@@ -857,7 +864,7 @@ const Forms = (props) => {
                     Auto reminder{"  "}
                     {!isSubscribe && isEnableSubscription && <Upgrade />}
                   </span>
-                  <label
+                  {/* <label
                     className={`${
                       isSubscribe || !isEnableSubscription
                         ? "cursor-pointer "
@@ -872,6 +879,20 @@ const Forms = (props) => {
                       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> */}
+                  <label
+                    className={`${
+                      isSubscribe || !isEnableSubscription
+                        ? "cursor-pointer "
+                        : "pointer-events-none opacity-50"
+                    } relative block items-center mb-0`}
+                  >
+                    <input
+                      type="checkbox"
+                      className="optoggle transition-all checked:[--tglbg:#3368ff] checked:bg-white"
+                      checked={formData.autoreminder}
+                      onChange={handleAutoReminder}
+                    />
                   </label>
                 </div>
                 {formData?.autoreminder === true && (
@@ -884,7 +905,8 @@ 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="opinput opinput-bordered w-full opinput-sm text-xs"
+                      // className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
                       onChange={handleStrInput}
                       required
                     />
@@ -895,15 +917,19 @@ const Forms = (props) => {
             <div className="flex items-center mt-3 gap-2 text-white">
               <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" : ""
+                } opbtn opbtn-primary`}
+                // 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`}
                 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"
+                className="opbtn opbtn-neutral"
+                // 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()}
               >
                 Reset
diff --git a/apps/OpenSign/src/primitives/GetReportDisplay.js b/apps/OpenSign/src/primitives/GetReportDisplay.js
index 0a04073bf..a0e5191ed 100644
--- a/apps/OpenSign/src/primitives/GetReportDisplay.js
+++ b/apps/OpenSign/src/primitives/GetReportDisplay.js
@@ -880,19 +880,20 @@ const ReportTable = (props) => {
             </div>
           )}
         </div>
-        <table className="table-auto w-full border-collapse">
+        <table className="optable optable-zebra">
+          {/* <table className="table-auto w-full 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>
@@ -903,7 +904,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>
@@ -965,7 +966,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}{" "}
@@ -1003,6 +1004,174 @@ const ReportTable = (props) => {
                           "-"
                         )}
                       </td>
+                      {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 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>
+                        )}
                       <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) => (
@@ -1333,170 +1502,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>
                   )
                 )}
diff --git a/apps/OpenSign/tailwind.config.js b/apps/OpenSign/tailwind.config.js
index 9c95ec50b..4f3abb972 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: ["emerald", "dark"],
+    prefix: "op"
+  }
 };