diff --git a/apps/OpenSign/package-lock.json b/apps/OpenSign/package-lock.json
index b93585b6f..8eb1f20df 100644
--- a/apps/OpenSign/package-lock.json
+++ b/apps/OpenSign/package-lock.json
@@ -58,7 +58,7 @@
         "@babel/runtime-corejs2": "^7.24.6",
         "autoprefixer": "^10.4.19",
         "commitizen": "^4.3.0",
-        "daisyui": "^4.11.1",
+        "daisyui": "^4.12.2",
         "eslint": "^8.57.0",
         "eslint-plugin-prettier": "^4.2.1",
         "eslint-plugin-react": "^7.34.1",
@@ -66,7 +66,7 @@
         "postcss": "^8.4.38",
         "prettier": "^2.8.8",
         "pretty-quick": "^3.3.1",
-        "tailwindcss": "^3.4.3"
+        "tailwindcss": "^3.4.4"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -9305,9 +9305,9 @@
       }
     },
     "node_modules/daisyui": {
-      "version": "4.11.1",
-      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.11.1.tgz",
-      "integrity": "sha512-obT9CUbQdW6eoHwSeT5VwaRrWlwrM4OT5qlfdJ0oQlSIEYhwnEl2+L2fwu5PioLbitwuMdYC2X8I1cyy8Pf6LQ==",
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.12.2.tgz",
+      "integrity": "sha512-ed3EFwPRLN+9+/MYPRB1pYjk6plRCBMobfBdSeB3voAS81KdL2pCKtbwJfUUpDdOnJ0F8T6oRdVX02P6UCD0Hg==",
       "dev": true,
       "dependencies": {
         "css-selector-tokenizer": "^0.8",
@@ -22745,9 +22745,9 @@
       "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.3.tgz",
-      "integrity": "sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==",
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz",
+      "integrity": "sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
diff --git a/apps/OpenSign/package.json b/apps/OpenSign/package.json
index dd8666c98..914f6c52e 100644
--- a/apps/OpenSign/package.json
+++ b/apps/OpenSign/package.json
@@ -88,7 +88,7 @@
     "@babel/runtime-corejs2": "^7.24.6",
     "autoprefixer": "^10.4.19",
     "commitizen": "^4.3.0",
-    "daisyui": "^4.11.1",
+    "daisyui": "^4.12.2",
     "eslint": "^8.57.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.34.1",
@@ -96,7 +96,7 @@
     "postcss": "^8.4.38",
     "prettier": "^2.8.8",
     "pretty-quick": "^3.3.1",
-    "tailwindcss": "^3.4.3"
+    "tailwindcss": "^3.4.4"
   },
   "overrides": {
     "nth-check": "$nth-check"
diff --git a/apps/OpenSign/src/App.js b/apps/OpenSign/src/App.js
index d21fc6074..4ccd4fa77 100644
--- a/apps/OpenSign/src/App.js
+++ b/apps/OpenSign/src/App.js
@@ -75,7 +75,7 @@ function App() {
   };
 
   return (
-    <div className="bg-[#eef1f5]">
+    <div className="bg-base-200">
       {isloading ? (
         <Loader />
       ) : (
diff --git a/apps/OpenSign/src/components/shared/fields/SelectFolder.js b/apps/OpenSign/src/components/shared/fields/SelectFolder.js
index e9d0000b9..b6c353515 100644
--- a/apps/OpenSign/src/components/shared/fields/SelectFolder.js
+++ b/apps/OpenSign/src/components/shared/fields/SelectFolder.js
@@ -174,7 +174,7 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
       <div className="relative max-w-sm">
         <div
           onClick={() => SetIsOpen(true)}
-          className=" cursor-pointer rounded px-[20px] py-[20px] bg-white border border-gray-200 shadow flex max-w-sm gap-8 items-center"
+          className=" cursor-pointer rounded px-[20px] py-[20px] bg-base-100 border-[1px] border-base-200 shadow flex max-w-sm gap-8 items-center"
         >
           <div>
             <i
diff --git a/apps/OpenSign/src/components/shared/fields/SignersInput.js b/apps/OpenSign/src/components/shared/fields/SignersInput.js
index bfb9c6ec4..9aa854b75 100644
--- a/apps/OpenSign/src/components/shared/fields/SignersInput.js
+++ b/apps/OpenSign/src/components/shared/fields/SignersInput.js
@@ -117,8 +117,8 @@ const SignersInput = (props) => {
           />
         </span>
       </label>
-      <div style={{ display: "flex", gap: 5 }}>
-        <div style={{ flexWrap: "wrap", width: "100%" }}>
+      <div className="flex gap-x-[5px]">
+        <div className="w-full">
           <Select
             onSortEnd={onSortEnd}
             distance={4}
@@ -128,6 +128,18 @@ const SignersInput = (props) => {
             onChange={onChange}
             closeMenuOnSelect={false}
             required={props.required}
+            styles={{
+              control: (baseStyles) => ({
+                ...baseStyles,
+                backgroundColor: "inherit",
+                borderRadius: 10,
+                borderColor: "current"
+              }),
+              option: (baseStyles) => ({
+                ...baseStyles,
+                backgroundColor: "inherit"
+              })
+            }}
           />
         </div>
         <div
@@ -135,7 +147,7 @@ const SignersInput = (props) => {
             setIsModel(true);
             openModal();
           }}
-          className="cursor-pointer rounded border-[1px] border-[#ccc] min-h-[38px] min-w-[48px] flex justify-center items-center"
+          className="cursor-pointer  border-[1px] opinut opinput-bordered min-h-[38px] min-w-[48px] flex justify-center items-center"
         >
           <i className="fas fa-plus"></i>
         </div>
diff --git a/apps/OpenSign/src/components/sidebar/Menu.js b/apps/OpenSign/src/components/sidebar/Menu.js
index 1b2a3b852..c43326da1 100644
--- a/apps/OpenSign/src/components/sidebar/Menu.js
+++ b/apps/OpenSign/src/components/sidebar/Menu.js
@@ -3,7 +3,7 @@ import { NavLink } from "react-router-dom";
 
 const Menu = ({ item, isOpen, closeSidebar }) => {
   return (
-    <li key={item.title} role="none">
+    <li key={item.title} role="none" className="my-0.5">
       <NavLink
         to={
           item.pageType
@@ -12,8 +12,8 @@ const Menu = ({ item, isOpen, closeSidebar }) => {
         }
         className={({ isActive }) =>
           `${
-            isActive ? " bg-base-300" : ""
-          } flex items-center text-left p-3 lg:p-4 hover:text-base-content hover:bg-base-300 hover:no-underline focus:outline-none`
+            isActive ? " bg-base-300 text-base-content" : ""
+          } flex items-center text-left p-3 lg:p-4 text-base-content hover:text-base-content focus:bg-base-300 hover:bg-base-300 hover:no-underline focus:outline-none`
         }
         onClick={closeSidebar}
         tabIndex={isOpen ? 0 : -1}
diff --git a/apps/OpenSign/src/components/sidebar/SubMenu.js b/apps/OpenSign/src/components/sidebar/SubMenu.js
index 3ee9f8640..f8b89270b 100644
--- a/apps/OpenSign/src/components/sidebar/SubMenu.js
+++ b/apps/OpenSign/src/components/sidebar/SubMenu.js
@@ -4,10 +4,10 @@ import { NavLink } from "react-router-dom";
 const Submenu = ({ item, closeSidebar, toggleSubmenu, submenuOpen }) => {
   const { title, icon, children } = item;
   return (
-    <li role="none">
+    <li role="none" className="my-0.5">
       <button
         onClick={() => toggleSubmenu(item.title)}
-        className="flex items-center text-left p-3 lg:p-4 focus:outline-none hover:text-base-content "
+        className="flex items-center text-left p-3 lg:p-4 text-base-content hover:text-base-content focus:bg-base-300 hover:bg-base-300 hover:no-underline focus:outline-none "
         aria-expanded={submenuOpen}
         aria-haspopup="true"
         aria-controls={`submenu-${title}`}
@@ -28,7 +28,7 @@ const Submenu = ({ item, closeSidebar, toggleSubmenu, submenuOpen }) => {
       {submenuOpen[item.title] && (
         <ul id={`submenu-${title}`} role="menu" aria-label={`${title} submenu`}>
           {children.map((childItem) => (
-            <li key={childItem.title} role="none">
+            <li key={childItem.title} role="none" className="my-0.5">
               <NavLink
                 to={
                   childItem.pageType
@@ -37,8 +37,8 @@ const Submenu = ({ item, closeSidebar, toggleSubmenu, submenuOpen }) => {
                 }
                 className={({ isActive }) =>
                   `${
-                    isActive ? "bg-base-300" : ""
-                  } flex items-center text-left pl-6 md:pl-8 py-2 text-sm cursor-pointer hover:text-base-content focus:outline-none hover:no-underline`
+                    isActive ? "bg-base-300 text-base-content" : ""
+                  } flex items-center text-left pl-6 md:pl-8 py-2 text-sm cursor-pointer text-base-content hover:text-base-content focus:bg-base-300 hover:bg-base-300 hover:no-underline focus:outline-none`
                 }
                 onClick={closeSidebar}
                 role="menuitem"
diff --git a/apps/OpenSign/src/layout/HomeLayout.js b/apps/OpenSign/src/layout/HomeLayout.js
index 6198b4e40..d604fbbac 100644
--- a/apps/OpenSign/src/layout/HomeLayout.js
+++ b/apps/OpenSign/src/layout/HomeLayout.js
@@ -277,7 +277,7 @@ const HomeLayout = () => {
                   id="renderList"
                   className="relative h-screen flex flex-col justify-between w-full overflow-y-auto"
                 >
-                  <div className="bg-[#eef1f5] p-3">{<Outlet />}</div>
+                  <div className="bg-base-200 p-3">{<Outlet />}</div>
                   <div className="z-30">
                     <Footer />
                   </div>
diff --git a/apps/OpenSign/src/pages/Form.js b/apps/OpenSign/src/pages/Form.js
index 8e889b8dc..a8fe78010 100644
--- a/apps/OpenSign/src/pages/Form.js
+++ b/apps/OpenSign/src/pages/Form.js
@@ -561,7 +561,7 @@ const Forms = (props) => {
     setFormData((prev) => ({ ...prev, autoreminder: !formData.autoreminder }));
   };
   return (
-    <div className="shadow-md rounded my-2 p-3 bg-[#ffffff] md:border-[1px] md:border-gray-600/50">
+    <div className="shadow-md rounded my-2 p-3 bg-base-100 text-base-content md:border-[1px] md:border-gray-600/50">
       <Title title={props?.title} />
       {isAlert && (
         <Alert type={isErr ? "danger" : "success"}>
@@ -629,12 +629,12 @@ const Forms = (props) => {
                     style={{ width: `${percentage}%` }}
                   ></div>
                 </div>
-                <span className="text-black text-sm">{percentage}%</span>
+                <span className="text-base-content text-sm">{percentage}%</span>
               </div>
             )}
             {isDecrypting && (
               <div className="flex items-center gap-x-2">
-                <span className="text-black text-sm">
+                <span className="text-base-content text-sm">
                   Decrypting pdf please wait...
                 </span>
               </div>
@@ -671,7 +671,6 @@ const Forms = (props) => {
                   <input
                     type="file"
                     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={
@@ -700,7 +699,6 @@ const Forms = (props) => {
               <input
                 name="Name"
                 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
@@ -711,7 +709,6 @@ const Forms = (props) => {
               <input
                 name="Description"
                 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)}
               />
@@ -730,7 +727,6 @@ const Forms = (props) => {
               <input
                 name="Note"
                 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
@@ -753,7 +749,6 @@ const Forms = (props) => {
                   type="number"
                   name="TimeToCompleteDays"
                   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
@@ -791,7 +786,6 @@ const Forms = (props) => {
                             <li>
                               <span className="font-bold">Yes:</span>
                               <span>
-                                {" "}
                                 Selecting this option will send the signing
                                 request to the first signer initially. Once the
                                 first signer completes their part, the next
@@ -864,22 +858,6 @@ const Forms = (props) => {
                     Auto reminder{"  "}
                     {!isSubscribe && isEnableSubscription && <Upgrade />}
                   </span>
-                  {/* <label
-                    className={`${
-                      isSubscribe || !isEnableSubscription
-                        ? "cursor-pointer "
-                        : "pointer-events-none opacity-50"
-                    } relative block items-center mb-0`}
-                  >
-                    <input
-                      checked={formData.autoreminder}
-                      onChange={handleAutoReminder}
-                      type="checkbox"
-                      value=""
-                      className="sr-only peer"
-                    />
-                    <div className="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-1 peer-focus:ring-black rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-black peer-checked:bg-blue-600 mt-2"></div>
-                  </label> */}
                   <label
                     className={`${
                       isSubscribe || !isEnableSubscription
@@ -906,7 +884,6 @@ const Forms = (props) => {
                       value={formData.remindOnceInEvery}
                       name="remindOnceInEvery"
                       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
                     />
@@ -919,9 +896,6 @@ const Forms = (props) => {
                 className={`${
                   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}
               >
@@ -929,7 +903,6 @@ const Forms = (props) => {
               </button>
               <div
                 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