diff --git a/apps/OpenSign/src/assets/images/newCeleb.gif b/apps/OpenSign/src/assets/images/newCeleb.gif
deleted file mode 100644
index c0b0d9555..000000000
Binary files a/apps/OpenSign/src/assets/images/newCeleb.gif and /dev/null differ
diff --git a/apps/OpenSign/src/components/dashboard/DashboardCard.js b/apps/OpenSign/src/components/dashboard/DashboardCard.js
index 48a9f3bda..f8017ac91 100644
--- a/apps/OpenSign/src/components/dashboard/DashboardCard.js
+++ b/apps/OpenSign/src/components/dashboard/DashboardCard.js
@@ -261,21 +261,14 @@ const DashboardCard = (props) => {
               }
             }
             body = str;
-            await axios
-              .post(url, body, { headers: headers })
-              .then((response) => {
-                try {
-                  if (response.data.result.length > 0) {
-                    setresponse(response.data.result[0][props.FilterData.key]);
-                    setLoading(false);
-                  } else {
-                    setresponse("0");
-                    setLoading(false);
-                  }
-                } catch (error) {
-                  setLoading(false);
-                }
-              });
+            const response = await axios.post(url, body, { headers: headers });
+            if (response.data.result.length > 0) {
+              setresponse(response.data.result[0][props.FilterData.key]);
+              setLoading(false);
+            } else {
+              setresponse("0");
+              setLoading(false);
+            }
           } catch (error) {
             setLoading(false);
           }
@@ -338,7 +331,7 @@ 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-base-300 bg-opacity-20 w-[60px] h-[60px] self-start flex justify-center items-center">
           <i
             className={`${
               props.Icon ? props.Icon : "fa-light fa-info"
diff --git a/apps/OpenSign/src/components/opensigndrive/DriveBody.js b/apps/OpenSign/src/components/opensigndrive/DriveBody.js
index 9bbc030f6..216a35124 100644
--- a/apps/OpenSign/src/components/opensigndrive/DriveBody.js
+++ b/apps/OpenSign/src/components/opensigndrive/DriveBody.js
@@ -321,7 +321,7 @@ function DriveBody(props) {
     return listType === "table" ? (
       data.Type === "Folder" ? (
         <tr onClick={() => handleOnclikFolder(data)}>
-          <td className="cursor-pointer flex items-center">
+          <td className="cursor-pointer flex items-center gap-2">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 512 512"
@@ -338,7 +338,7 @@ function DriveBody(props) {
         </tr>
       ) : (
         <tr onClick={() => checkPdfStatus(data)}>
-          <td className="cursor-pointer flex items-center">
+          <td className="cursor-pointer flex items-center gap-2">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 384 512"
diff --git a/apps/OpenSign/src/components/pdf/BorderResize.js b/apps/OpenSign/src/components/pdf/BorderResize.js
index 505c68d30..55f122ac9 100644
--- a/apps/OpenSign/src/components/pdf/BorderResize.js
+++ b/apps/OpenSign/src/components/pdf/BorderResize.js
@@ -3,13 +3,9 @@ import React from "react";
 function BorderResize({ right, top }) {
   return (
     <div
-      className="borderResize"
-      style={{
-        right: right ? right + "px" : "-1px",
-        bottom: top ? top + "px" : "-1px",
-        borderRight: "3px solid  #188ae2",
-        borderBottom: "3px solid #188ae2"
-      }}
+      className={`${right ? `-right-[12px]` : "-right-[1px]"} ${
+        top ? `-bottom-[11px]` : "-bottom-[1px]"
+      } absolute inline-block w-[14px] h-[14px] hover:cursor-sw-resize border-r-[3px] border-b-[3px] border-[#188ae2]`}
     ></div>
   );
 }
diff --git a/apps/OpenSign/src/components/pdf/EmailComponent.js b/apps/OpenSign/src/components/pdf/EmailComponent.js
index 3cb72fc49..61e95b67d 100644
--- a/apps/OpenSign/src/components/pdf/EmailComponent.js
+++ b/apps/OpenSign/src/components/pdf/EmailComponent.js
@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import { saveAs } from "file-saver";
-import celebration from "../../assets/images/newCeleb.gif";
 import axios from "axios";
 import { getBase64FromUrl } from "../../constant/Utils";
 import { themeColor } from "../../constant/const";
@@ -22,7 +21,6 @@ function EmailComponent({
   const [emailList, setEmailList] = useState([]);
   const [emailValue, setEmailValue] = useState();
   const [isLoading, setIsLoading] = useState(false);
-  const [isEmailCelebration, setIsEmailCelebration] = useState(false);
   //function for send email
   const sendEmail = async () => {
     setIsLoading(true);
@@ -63,10 +61,6 @@ function EmailComponent({
             " target=_blank>here</a> </p></div></div></body></html>"
         };
         sendMail = await axios.post(url, params, { headers: headers });
-        setIsEmailCelebration(true);
-        setTimeout(() => {
-          setIsEmailCelebration(false);
-        }, 3000);
       } catch (error) {
         console.log("error", error);
         setIsLoading(false);
@@ -205,11 +199,6 @@ function EmailComponent({
             </div>
           </div>
           <div className="h-full p-[20px]">
-            {isEmailCelebration && (
-              <div className="absolute w-[100%] flex justify-center items-center">
-                <img alt="celeb" width={300} height={250} src={celebration} />
-              </div>
-            )}
             <p className="font-medium text-[15px] mb-[5px] text-base-content align-baseline">
               Recipients added here will get a copy of the signed document.
             </p>
@@ -293,7 +282,7 @@ function EmailComponent({
             <hr className="w-full my-[15px] bg-base-content" />
             <button
               type="button"
-              className="op-btn op-btn-primary"
+              className="op-btn op-btn-secondary"
               onClick={() => emailList.length > 0 && sendEmail()}
             >
               Send
diff --git a/apps/OpenSign/src/components/pdf/Placeholder.js b/apps/OpenSign/src/components/pdf/Placeholder.js
index e5029b11e..43d42da80 100644
--- a/apps/OpenSign/src/components/pdf/Placeholder.js
+++ b/apps/OpenSign/src/components/pdf/Placeholder.js
@@ -776,6 +776,7 @@ function Placeholder(props) {
       {isTabAndMobile ? (
         <div
           // className="sm:inline-block md:inline-block lg:hidden "
+          className="flex items-stretch"
           style={{
             left: xPos(props.pos, props.isSignYourself),
             top: yPos(props.pos, props.isSignYourself),
diff --git a/apps/OpenSign/src/components/pdf/PlaceholderBorder.js b/apps/OpenSign/src/components/pdf/PlaceholderBorder.js
index 095ae58f8..8941a5fe5 100644
--- a/apps/OpenSign/src/components/pdf/PlaceholderBorder.js
+++ b/apps/OpenSign/src/components/pdf/PlaceholderBorder.js
@@ -47,7 +47,7 @@ function PlaceholderBorder(props) {
       onTouchEnd={() =>
         props.pos.type === textWidget && props?.setDraggingEnabled(true)
       }
-      className="borderResize"
+      className="absolute inline-block w-[14px] h-[14px] hover:cursor-sw-resize"
       style={{
         borderColor: themeColor,
         borderStyle: "dashed",
diff --git a/apps/OpenSign/src/components/pdf/PlaceholderType.js b/apps/OpenSign/src/components/pdf/PlaceholderType.js
index 170b54dd9..7791497f7 100644
--- a/apps/OpenSign/src/components/pdf/PlaceholderType.js
+++ b/apps/OpenSign/src/components/pdf/PlaceholderType.js
@@ -14,7 +14,7 @@ import "react-datepicker/dist/react-datepicker.css";
 import "../../styles/signature.css";
 import RegexParser from "regex-parser";
 const textWidgetCls =
-  "w-full h-full md:min-w-full md:min-h-full z-[999] text-[12px] rounded-[2px] border-[1px] border-[#007bff] overflow-hidden resize-none outline-none text-base-content bg-base-100 whitespace-pre-wrap";
+  "w-full h-full md:min-w-full md:min-h-full z-[999] text-[12px] rounded-[2px] border-[1px] border-[#007bff] overflow-hidden resize-none outline-none text-base-content item-center bg-base-100 whitespace-pre-wrap";
 const selectWidgetCls =
   "w-full h-full absolute left-0 top-0 border-[1px] border-[#007bff] rounded-[2px] focus:outline-none bg-base-100 text-base-content";
 function PlaceholderType(props) {
@@ -309,10 +309,10 @@ function PlaceholderType(props) {
           alt="signature"
           draggable="false"
           src={props.pos.SignUrl}
-          className="w-full h-full object-contain"
+          className="w-full h-full "
         />
       ) : (
-        <div className="text-[11px] text-black justify-center">
+        <div className="text-[11px] w-full h-full text-black flex flex-col justify-center items-center">
           {props?.handleUserName &&
             props?.handleUserName(
               props?.data?.Id,
@@ -327,10 +327,10 @@ function PlaceholderType(props) {
           alt="stamp"
           draggable="false"
           src={props.pos.SignUrl}
-          className="w-full h-full object-contain"
+          className="w-full h-full"
         />
       ) : (
-        <div className="text-[11px] text-black justify-center">
+        <div className="text-[11px] w-full h-full text-black flex flex-col justify-center items-center">
           {props?.handleUserName &&
             props?.handleUserName(
               props?.data?.Id,
@@ -412,6 +412,12 @@ function PlaceholderType(props) {
             );
           }}
           className={textWidgetCls}
+          style={{
+            fontSize: props.pos.options?.fontSize
+              ? props.pos.options?.fontSize + "px"
+              : "12px",
+            color: props.pos.options?.fontColor || "black"
+          }}
           cols="50"
         />
       ) : (
@@ -470,10 +476,10 @@ function PlaceholderType(props) {
           alt="initials"
           draggable="false"
           src={props.pos.SignUrl}
-          className="w-full h-full object-contain"
+          className="w-full h-full"
         />
       ) : (
-        <div className="text-[11px] text-black justify-center">
+        <div className="text-[11px] w-full h-full text-black flex flex-col justify-center items-center">
           {props?.handleUserName &&
             props?.handleUserName(
               props?.data?.Id,
@@ -505,6 +511,12 @@ function PlaceholderType(props) {
             );
           }}
           className={textWidgetCls}
+          style={{
+            fontSize: props.pos.options?.fontSize
+              ? props.pos.options?.fontSize + "px"
+              : "12px",
+            color: props.pos.options?.fontColor || "black"
+          }}
           cols="50"
         />
       ) : (
@@ -539,6 +551,12 @@ function PlaceholderType(props) {
             );
           }}
           className={textWidgetCls}
+          style={{
+            fontSize: props.pos.options?.fontSize
+              ? props.pos.options?.fontSize + "px"
+              : "12px",
+            color: props.pos.options?.fontColor || "black"
+          }}
           cols="50"
         />
       ) : (
@@ -573,6 +591,12 @@ function PlaceholderType(props) {
             );
           }}
           className={textWidgetCls}
+          style={{
+            fontSize: props.pos.options?.fontSize
+              ? props.pos.options?.fontSize + "px"
+              : "12px",
+            color: props.pos.options?.fontColor || "black"
+          }}
           cols="50"
         />
       ) : (
@@ -650,10 +674,10 @@ function PlaceholderType(props) {
           alt="image"
           draggable="false"
           src={props.pos.SignUrl}
-          className="w-full h-full object-contain"
+          className="w-full h-full"
         />
       ) : (
-        <div className="text-[11px] text-black justify-center">
+        <div className="text-[11px] w-full h-full text-black flex flex-coljustify-center items-center">
           {props?.handleUserName &&
             props?.handleUserName(
               props?.data?.Id,
@@ -685,6 +709,12 @@ function PlaceholderType(props) {
             );
           }}
           className={textWidgetCls}
+          style={{
+            fontSize: props.pos.options?.fontSize
+              ? props.pos.options?.fontSize + "px"
+              : "12px",
+            color: props.pos.options?.fontColor || "black"
+          }}
           cols="50"
         />
       ) : (
@@ -749,6 +779,12 @@ function PlaceholderType(props) {
             );
           }}
           className={textWidgetCls}
+          style={{
+            fontSize: props.pos.options?.fontSize
+              ? props.pos.options?.fontSize + "px"
+              : "12px",
+            color: props.pos.options?.fontColor || "black"
+          }}
           cols="50"
         />
       );
@@ -759,17 +795,11 @@ function PlaceholderType(props) {
             alt="image"
             draggable="false"
             src={props.pos.SignUrl}
-            className="w-full h-full object-contain"
+            className="w-full h-full"
           />
         </div>
       ) : (
-        <div
-          style={{
-            fontSize: "10px",
-            color: "black",
-            justifyContent: "center"
-          }}
-        >
+        <div className="text-[11px] w-full h-full text-black flex flex-col justify-center items-center">
           {props.pos.isStamp ? <div>stamp</div> : <div>signature</div>}
           {props?.handleUserName &&
             props?.handleUserName(props?.data?.Id, props?.data?.Role)}
diff --git a/apps/OpenSign/src/components/pdf/RecipientList.js b/apps/OpenSign/src/components/pdf/RecipientList.js
index 2f6b55793..d3b1aee5f 100644
--- a/apps/OpenSign/src/components/pdf/RecipientList.js
+++ b/apps/OpenSign/src/components/pdf/RecipientList.js
@@ -209,7 +209,7 @@ const RecipientList = (props) => {
                 </div>
               </div>
               {isMobile && props.sendInOrder && (
-                <div className="flex flex-row items-center gap-[5px]">
+                <div className="flex flex-row items-center gap-[5px] mr-2">
                   <div
                     onClick={(e) => {
                       if (ind !== 0) {
diff --git a/apps/OpenSign/src/components/pdf/RenderAllPdfPage.js b/apps/OpenSign/src/components/pdf/RenderAllPdfPage.js
index 16c6a3637..2dc682e2a 100644
--- a/apps/OpenSign/src/components/pdf/RenderAllPdfPage.js
+++ b/apps/OpenSign/src/components/pdf/RenderAllPdfPage.js
@@ -65,10 +65,7 @@ function RenderAllPdfPage({
   };
 
   return (
-    <div
-      ref={pageContainer}
-      className="hidden min-h-screen w-[20%] bg-base-100 h-full md:block"
-    >
+    <div ref={pageContainer} className="hidden w-[20%] bg-base-100 md:block">
       <div className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300">
         Pages
       </div>
diff --git a/apps/OpenSign/src/components/pdf/RenderPdf.js b/apps/OpenSign/src/components/pdf/RenderPdf.js
index 6c89d4969..abc105da7 100644
--- a/apps/OpenSign/src/components/pdf/RenderPdf.js
+++ b/apps/OpenSign/src/components/pdf/RenderPdf.js
@@ -246,10 +246,9 @@ function RenderPdf({
       {isMobile ? (
         <div
           data-tut="reactourForth"
-          style={{
-            border: "0.1px solid #ebe8e8",
-            marginTop: isGuestSigner && "30px"
-          }}
+          className={`${
+            isGuestSigner ? "30px" : ""
+          } border-[0.1px] border-[#ebe8e8]`}
           ref={drop}
           id="container"
         >
diff --git a/apps/OpenSign/src/components/pdf/SignerListComponent.js b/apps/OpenSign/src/components/pdf/SignerListComponent.js
index 35bc5e424..f2076e8df 100644
--- a/apps/OpenSign/src/components/pdf/SignerListComponent.js
+++ b/apps/OpenSign/src/components/pdf/SignerListComponent.js
@@ -28,14 +28,10 @@ function SignerListComponent(props) {
   return (
     <div
       className="rounded-xl mx-1 flex flex-row items-center py-[10px] mt-1"
-      style={{
-        background: checkSignerBackColor(props.obj)
-      }}
+      style={{ background: checkSignerBackColor(props.obj) }}
     >
       <div
-        style={{
-          background: checkUserNameColor(props.obj)
-        }}
+        style={{ background: checkUserNameColor(props.obj) }}
         className="flex w-[30px] h-[30px] rounded-full justify-center items-center mx-1"
       >
         <span className="text-[12px] text-center font-bold text-black uppercase">
diff --git a/apps/OpenSign/src/components/pdf/WidgetComponent.js b/apps/OpenSign/src/components/pdf/WidgetComponent.js
index b9284b354..b9380774c 100644
--- a/apps/OpenSign/src/components/pdf/WidgetComponent.js
+++ b/apps/OpenSign/src/components/pdf/WidgetComponent.js
@@ -252,7 +252,7 @@ function WidgetComponent({
           <div
             data-tut={dataTut}
             id="navbar"
-            className="fixed z-[99] bottom-0 righit-0"
+            className="fixed z-[99] bottom-0 right-0"
             style={{ width: window.innerWidth + "px" }}
           >
             <div className="mx-1">
diff --git a/apps/OpenSign/src/components/shared/fields/SelectFolder.js b/apps/OpenSign/src/components/shared/fields/SelectFolder.js
index 91ec14426..b1293a87f 100644
--- a/apps/OpenSign/src/components/shared/fields/SelectFolder.js
+++ b/apps/OpenSign/src/components/shared/fields/SelectFolder.js
@@ -176,13 +176,13 @@ 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-base-100 border-[1px] border-base-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>
             <svg
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 512 512"
-              className="w-[40px] h-[40px] fill-current text-neutral"
+              className="w-[40px] h-[40px] fill-current op-text-secondary"
             >
               <path d="M64 480H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H288c-10.1 0-19.6-4.7-25.6-12.8L243.2 57.6C231.1 41.5 212.1 32 192 32H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64z" />
             </svg>
@@ -194,10 +194,7 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
                   ? selectFolder.Name
                   : "OpenSign™ Drive"}
               </p>
-              <div
-                className="text-black text-sm"
-                // onClick={() => SetIsOpen(true)}
-              >
+              <div className="text-black text-sm">
                 <i
                   className="fa-light fa-pencil cursor-pointer"
                   title="Select Folder"
diff --git a/apps/OpenSign/src/constant/Utils.js b/apps/OpenSign/src/constant/Utils.js
index 58e6941ee..720d39c36 100644
--- a/apps/OpenSign/src/constant/Utils.js
+++ b/apps/OpenSign/src/constant/Utils.js
@@ -379,7 +379,7 @@ export const getWidgetType = (item) => {
     <div className="op-btn w-fit md:w-[100%] op-btn-primary op-btn-outline op-btn-sm focus:outline-none outline outline-[1.5px] ml-[6px] md:ml-0 p-0 overflow-hidden">
       <div className="w-full h-full flex md:justify-between items-center">
         <div className="flex justify-start items-center text-[13px] ml-1">
-          {!isMobile && <i className="fa-sharp fa-solid fa-grip-vertical"></i>}
+          {!isMobile && <i className="fa-light fa-grip-vertical ml-[3px]"></i>}
           <span className="md:inline-block text-center text-[15px] ml-[5px] font-semibold pr-1 md:pr-0">
             {item.type}
           </span>
@@ -421,7 +421,7 @@ export const defaultWidthHeight = (type) => {
     case radioButtonWidget:
       return { width: 5, height: 10 };
     case textWidget:
-      return { width: 150, height: 17 };
+      return { width: 150, height: 25 };
     default:
       return { width: 150, height: 60 };
   }
diff --git a/apps/OpenSign/src/json/dashboardJson.js b/apps/OpenSign/src/json/dashboardJson.js
index b0e29eea8..1b07201ba 100644
--- a/apps/OpenSign/src/json/dashboardJson.js
+++ b/apps/OpenSign/src/json/dashboardJson.js
@@ -7,7 +7,7 @@ const dashboardJson = [
         widget: {
           type: "Card",
           icon: "fa-light fa-signature",
-          bgColor: "bg-[#f0058e]",
+          bgColor: "op-bg-primary",
           label: "Need your Signature",
           description: null,
           data: {
@@ -30,7 +30,7 @@ const dashboardJson = [
         widget: {
           type: "Card",
           icon: "fa-light fa-sign-out-alt",
-          bgColor: "bg-[#2ed8b6]",
+          bgColor: "op-bg-secondary",
           label: "Out for signatures",
           description: null,
           data: {
diff --git a/apps/OpenSign/src/pages/ChangePassword.js b/apps/OpenSign/src/pages/ChangePassword.js
index 13b9977a7..b618c479d 100644
--- a/apps/OpenSign/src/pages/ChangePassword.js
+++ b/apps/OpenSign/src/pages/ChangePassword.js
@@ -49,8 +49,8 @@ function ChangePassword() {
     return <Navigate to="/" />;
   }
   return (
-    <div className="w-full bg-base-100 text-base-content shadow rounded p-2">
-      <Title title={"Change Password"} />
+    <div className="w-full bg-base-100 text-base-content shadow rounded-box p-2">
+      <Title title="Change Password" />
       <div className="text-xl font-bold border-b-[1px] border-gray-300">
         Change Password
       </div>
@@ -98,7 +98,10 @@ function ChangePassword() {
               required
             />
           </div>
-          <button type="submit" className="op-btn op-btn-primary shadow-md m-2">
+          <button
+            type="submit"
+            className="op-btn op-btn-primary shadow-md mt-2"
+          >
             Change Password
           </button>
         </form>
diff --git a/apps/OpenSign/src/pages/Form.js b/apps/OpenSign/src/pages/Form.js
index 1ef77ff98..e844d58c1 100644
--- a/apps/OpenSign/src/pages/Form.js
+++ b/apps/OpenSign/src/pages/Form.js
@@ -445,7 +445,7 @@ const Forms = (props) => {
         setIsSubmit(false);
       }
     } else {
-      alert("Please wait until the PDF has been uploading.");
+      alert("Please wait while the document is being uploaded.");
     }
   };
 
@@ -565,7 +565,7 @@ const Forms = (props) => {
     setFormData((prev) => ({ ...prev, autoreminder: !formData.autoreminder }));
   };
   return (
-    <div className="shadow-md rounded my-2 p-3 bg-base-100 text-base-content md:border-[1px] md:border-gray-600/50">
+    <div className="shadow-md rounded-box my-[2px] p-3 bg-base-100 text-base-content">
       <Title title={props?.title} />
       {isAlert && (
         <Alert type={isErr ? "danger" : "success"}>
diff --git a/apps/OpenSign/src/pages/GenerateToken.js b/apps/OpenSign/src/pages/GenerateToken.js
index cd0365fc7..53b4a9efe 100644
--- a/apps/OpenSign/src/pages/GenerateToken.js
+++ b/apps/OpenSign/src/pages/GenerateToken.js
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react";
 import Title from "../components/Title";
 import axios from "axios";
-import { useNavigate } from "react-router-dom";
 import Alert from "../primitives/Alert";
 import ModalUi from "../primitives/ModalUi";
 import { isEnableSubscription } from "../constant/const";
@@ -9,19 +8,24 @@ import { checkIsSubscribed, copytoData, openInNewTab } from "../constant/Utils";
 import PremiumAlertHeader from "../primitives/PremiumAlertHeader";
 import Tooltip from "../primitives/Tooltip";
 import Loader from "../primitives/Loader";
+import SubscribeCard from "../primitives/SubscribeCard";
+import Tour from "reactour";
+const tourSteps = [
+  {
+    selector: '[data-tut="apisubscribe"]',
+    content: "Upgrade now to generate API token"
+  }
+];
 
 function GenerateToken() {
-  const navigation = useNavigate();
   const [parseBaseUrl] = useState(localStorage.getItem("baseUrl"));
   const [parseAppId] = useState(localStorage.getItem("parseAppId"));
   const [apiToken, SetApiToken] = useState("");
   const [isLoader, setIsLoader] = useState(true);
-  const [copied, setCopied] = useState(false);
-  const [isGenerate, setIsGenerate] = useState(false);
-  const [isErr, setIsErr] = useState(false);
   const [isModal, setIsModal] = useState(false);
   const [isSubscribe, setIsSubscribe] = useState(false);
-
+  const [isAlert, setIsAlert] = useState({ type: "success", msg: "" });
+  const [isTour, setIsTour] = useState(false);
   useEffect(() => {
     fetchToken();
     // eslint-disable-next-line
@@ -33,7 +37,6 @@ function GenerateToken() {
         const getIsSubscribe = await checkIsSubscribed();
         setIsSubscribe(getIsSubscribe);
       }
-
       const url = parseBaseUrl + "functions/getapitoken";
       const headers = {
         "Content-Type": "application/json",
@@ -44,7 +47,6 @@ function GenerateToken() {
       if (res) {
         SetApiToken(res.data.result.result);
       }
-
       setIsLoader(false);
     } catch (err) {
       SetApiToken();
@@ -54,49 +56,43 @@ function GenerateToken() {
   };
   const handleSubmit = async (e) => {
     e.preventDefault();
-    setIsLoader(true);
-    setIsModal(false);
-    try {
-      const url = parseBaseUrl + "functions/generateapitoken";
-      const headers = {
-        "Content-Type": "application/json",
-        "X-Parse-Application-Id": parseAppId,
-        sessiontoken: localStorage.getItem("accesstoken")
-      };
-      await axios.post(url, {}, { headers: headers }).then((res) => {
+    if (!isSubscribe && isEnableSubscription) {
+      setIsTour(true);
+    } else {
+      setIsLoader(true);
+      setIsModal(false);
+      try {
+        const url = parseBaseUrl + "functions/generateapitoken";
+        const headers = {
+          "Content-Type": "application/json",
+          "X-Parse-Application-Id": parseAppId,
+          sessiontoken: localStorage.getItem("accesstoken")
+        };
+        const res = await axios.post(url, {}, { headers: headers });
         if (res) {
           SetApiToken(res.data.result.token);
-          //   localStorage.setItem("apiToken", res.data.result.token);
-          setIsGenerate(true);
-          setTimeout(() => {
-            setIsGenerate(false);
-          }, 1500);
-          setIsLoader(false);
+          setIsAlert({ type: "success", msg: "Token generated successfully." });
         } else {
           console.error("Error while generating Token");
-          setIsLoader(false);
-          setIsErr(true);
-          setTimeout(() => {
-            setIsErr(false);
-          }, 1500);
+          setIsAlert({ type: "danger", msg: "Something went wrong." });
         }
-      });
-    } catch (error) {
-      setIsLoader(false);
-      setIsErr(true);
-      setTimeout(() => {
-        setIsErr(false);
-      }, 1500);
-
-      console.log("err", error);
+      } catch (error) {
+        setIsAlert({ type: "danger", msg: "Something went wrong." });
+        console.log("while generating Token", error);
+      } finally {
+        setIsLoader(false);
+        setTimeout(() => {
+          setIsAlert({ type: "success", msg: "" });
+        }, 1500);
+      }
     }
   };
 
   const copytoclipboard = (text) => {
     copytoData(text);
-    setCopied(true);
+    setIsAlert({ type: "success", msg: "Copied" });
     setTimeout(() => {
-      setCopied(false);
+      setIsAlert({ type: "success", msg: "" });
     }, 1500); // Reset copied state after 1.5 seconds
   };
   const handleModal = () => setIsModal(!isModal);
@@ -104,132 +100,124 @@ function GenerateToken() {
   return (
     <React.Fragment>
       <Title title={"API Token"} />
-      {isGenerate && (
-        <Alert type="success">Token generated successfully!</Alert>
+      {isAlert.msg && (
+        <Alert type={isAlert.type}>
+          <div className="ml-3">{isAlert.msg}</div>
+        </Alert>
       )}
-      {copied && <Alert type="success">Copied</Alert>}
-      {isErr && <Alert type="danger">Something went wrong!</Alert>}
       {isLoader ? (
         <div className="flex justify-center items-center h-screen">
           <Loader />
         </div>
       ) : (
-        <div className="bg-base-100 text-base-content flex flex-col justify-center shadow rounded">
-          {!isEnableSubscription && <PremiumAlertHeader />}
-          <h1 className={"ml-4 mt-3 mb-2 font-semibold"}>
-            OpenSign™ API{" "}
-            <Tooltip
-              url={
-                "https://docs.opensignlabs.com/docs/API-docs/opensign-api-v-1"
-              }
-              isSubscribe={true}
-            />
-          </h1>
-          <ul
-            className={
-              isSubscribe || !isEnableSubscription
-                ? "w-full flex flex-col p-2 text-sm "
-                : "w-full flex flex-col p-2 text-sm opacity-20 pointer-events-none select-none"
-            }
-          >
-            <li className="flex flex-col md:flex-row justify-between items-center border-y-[1px] border-gray-300 break-all py-2">
-              <div className="w-full md:w-[70%] flex-col md:flex-row text-xs md:text-[15px] flex items-center gap-x-5 ">
-                <span className="">Api Token:</span>{" "}
-                <span id="token" className="md:text-end py-2 md:py-0">
-                  <span
-                    className="cursor-pointer"
-                    onClick={() => copytoclipboard(apiToken)}
-                  >
-                    {apiToken ? apiToken : "_____"}
-                  </span>
-                  <button
-                    className="op-btn op-btn-accent op-btn-outline op-btn-sm ml-2"
-                    onClick={() => copytoclipboard(apiToken)}
-                  >
-                    <i className="fa-light fa-copy"></i>
-                  </button>
-                </span>
-              </div>
-              <button
-                onClick={apiToken ? handleModal : handleSubmit}
-                className="op-btn op-btn-primary"
-              >
-                {apiToken ? "Regenerate Token" : "Generate Token"}
-              </button>
-            </li>
-          </ul>
-          <div className="flex   items-center justify-center ">
-            <button
-              type="button"
-              onClick={() =>
-                openInNewTab(
+        <>
+          <div className="bg-base-100 text-base-content flex flex-col justify-center shadow-md rounded-box mb-3">
+            {!isEnableSubscription && <PremiumAlertHeader />}
+            <h1 className={"ml-4 mt-3 mb-2 font-semibold"}>
+              OpenSign™ API{" "}
+              <Tooltip
+                url={
                   "https://docs.opensignlabs.com/docs/API-docs/opensign-api-v-1"
-                )
-              }
-              className="op-btn op-btn-secondary my-2"
+                }
+                isSubscribe={true}
+              />
+            </h1>
+            <ul
+              className={"w-full flex flex-col p-2 text-sm"}
+              // isSubscribe || !isEnableSubscription
+              // ? "w-full flex flex-col p-2 text-sm "
+              // : "w-full flex flex-col p-2 text-sm opacity-20 pointer-events-none select-none"
             >
-              View Docs
-            </button>
-          </div>
-
-          {!isSubscribe && isEnableSubscription && (
-            <>
-              <h1 className={"ml-4 mt-3 mb-2 font-semibold"}>
-                Upgrade to PRO Plan
-              </h1>
-              <ul className={"w-full flex flex-col p-2 text-sm "}>
-                <li
-                  className={`flex flex-col md:flex-row justify-between items-center border-y-[1px] border-gray-300 break-all py-2`}
-                >
-                  <div className="w-[70%] flex-col md:flex-row flex items-center gap-3 ">
-                    <span className="">$29.99/month:</span>{" "}
-                    <span id="token" className=" md:text-end cursor-pointer">
-                      Sign 100 docs using API. Only 0.15/docs after that.
-                    </span>
-                  </div>
-                  {!isSubscribe && isEnableSubscription && (
-                    <button
-                      type="button"
-                      onClick={() => navigation("/subscription")}
-                      className="text-xs md:text-sm shadow op-btn op-btn-outline op-btn-accent"
+              <li className="flex flex-col md:flex-row justify-between items-center border-y-[1px] border-gray-300 break-all py-2">
+                <div className="w-full md:w-[70%] flex-col md:flex-row text-xs md:text-[15px] flex items-center gap-x-5">
+                  <span className="ml-1">API Token:</span>{" "}
+                  <span
+                    id="token"
+                    className={`${
+                      isSubscribe || !isEnableSubscription
+                        ? "bg-white/20 pointer-events-none select-none"
+                        : ""
+                    } md:text-end py-2 md:py-0`}
+                  >
+                    <span
+                      className="cursor-pointer"
+                      onClick={() => copytoclipboard(apiToken)}
                     >
-                      Upgrade Now
+                      {apiToken ? apiToken : "_____"}
+                    </span>
+                    <button
+                      className="op-btn op-btn-accent op-btn-outline op-btn-sm ml-2"
+                      onClick={() => copytoclipboard(apiToken)}
+                    >
+                      <i className="fa-light fa-copy"></i>
                     </button>
-                  )}
-                </li>
-              </ul>
-            </>
-          )}
-
-          <ModalUi
-            isOpen={isModal}
-            title={apiToken ? "Regenerate Token" : "Generate Token"}
-            handleClose={handleModal}
-          >
-            <div className="m-[20px]">
-              <div className="text-lg font-normal text-base-content">
-                Are you sure you want to regenerate token it will expire old
-                token?
-              </div>
-              <hr className="bg-[#ccc] mt-4 " />
-              <div className="flex items-center mt-3 gap-2 text-white">
+                  </span>
+                </div>
                 <button
-                  onClick={handleSubmit}
-                  className="op-btn op-btn-primary ml-[2px]"
+                  onClick={apiToken ? handleModal : handleSubmit}
+                  className="op-btn op-btn-primary"
                 >
-                  Yes
+                  {apiToken ? "Regenerate Token" : "Generate Token"}
                 </button>
-                <button
-                  onClick={handleModal}
-                  className="op-btn op-btn-secondary"
-                >
-                  No
-                </button>
-              </div>
+              </li>
+            </ul>
+            <div className="flex items-center justify-center">
+              <button
+                type="button"
+                onClick={() =>
+                  openInNewTab(
+                    "https://docs.opensignlabs.com/docs/API-docs/opensign-api-v-1"
+                  )
+                }
+                className="op-btn op-btn-secondary mt-2 mb-3 px-8"
+              >
+                View Docs
+              </button>
             </div>
-          </ModalUi>
-        </div>
+            <ModalUi
+              isOpen={isModal}
+              title={apiToken ? "Regenerate Token" : "Generate Token"}
+              handleClose={handleModal}
+            >
+              <div className="m-[20px]">
+                <div className="text-lg font-normal text-base-content">
+                  Are you sure you want to regenerate token it will expire old
+                  token?
+                </div>
+                <hr className="bg-[#ccc] mt-4" />
+                <div className="flex items-center mt-3 gap-2 text-white">
+                  <button
+                    onClick={handleSubmit}
+                    className="op-btn op-btn-primary ml-[2px]"
+                  >
+                    Yes
+                  </button>
+                  <button
+                    onClick={handleModal}
+                    className="op-btn op-btn-secondary"
+                  >
+                    No
+                  </button>
+                </div>
+              </div>
+            </ModalUi>
+          </div>
+          {!isSubscribe && isEnableSubscription && (
+            <div data-tut="apisubscribe">
+              <SubscribeCard />
+            </div>
+          )}
+        </>
       )}
+      <Tour
+        onRequestClose={() => setIsTour(false)}
+        steps={tourSteps}
+        isOpen={isTour}
+        closeWithMask={false}
+        disableKeyboardNavigation={["esc"]}
+        scrollOffset={-100}
+        rounded={5}
+      />
     </React.Fragment>
   );
 }
diff --git a/apps/OpenSign/src/pages/Managesign.js b/apps/OpenSign/src/pages/Managesign.js
index 7c995954c..644133bdf 100644
--- a/apps/OpenSign/src/pages/Managesign.js
+++ b/apps/OpenSign/src/pages/Managesign.js
@@ -237,127 +237,125 @@ const ManageSign = () => {
     setIsValue(true);
   };
   return (
-    <div className="relative h-full bg-base-100 text-base-content flex shadow rounded overflow-auto">
+    <div className="relative h-full bg-base-100 text-base-content flex shadow-md rounded-box overflow-auto">
       {isLoader && (
         <div className="absolute bg-black bg-opacity-30 z-50 w-full h-full flex justify-center items-center">
           <Loader />
         </div>
       )}
       {isAlert?.message && <Alert type={isAlert.type}>{isAlert.message}</Alert>}
-      <div className="relative w-full pr-[10px]">
-        <div className="m-[20px]">
-          <div className="text-[20px] font-semibold mb-3">My Signature</div>
+      <div className="relative w-full">
+        <div className="ml-[5px] my-[20px] md:m-[20px]">
+          <div className="text-[20px] font-semibold m-[10px] md:m-0 mb-2">
+            My Signature
+          </div>
           <div className="flex flex-col md:flex-row gap-0 md:gap-[12px]">
-            <div>
+            <div className="relative">
+              <span className="font-medium select-none flex mb-[10px] pl-[10px]">
+                Signature
+              </span>
+              <input
+                type="file"
+                onChange={onImageChange}
+                className="filetype"
+                accept="image/*"
+                ref={imageRef}
+                hidden
+              />
               <div className="relative">
-                <div className="flex flex-row justify-between w-1/2 pl-[10px]">
-                  <div className="flex flex-row justify-around items-center gap-[10px] mb-[10px]">
-                    <span className="font-medium select-none">Signature</span>
-                    <input
-                      type="file"
-                      onChange={onImageChange}
-                      className="filetype"
-                      accept="image/*"
-                      ref={imageRef}
-                      hidden
-                    />
-                  </div>
-                </div>
-                <div className="relative">
-                  <div>
-                    {image ? (
-                      <div className="signatureCanvas relative border-[2px] border-[#888]">
-                        <img
-                          alt="signature"
-                          src={image}
-                          className="w-full h-full object-contain"
-                        />
-                      </div>
-                    ) : (
-                      <SignatureCanvas
-                        ref={canvasRef}
-                        penColor={penColor}
-                        canvasProps={{
-                          width: "456px",
-                          height: "180px",
-                          className: "signatureCanvas"
-                        }}
-                        backgroundColor="rgb(255, 255, 255)"
-                        onEnd={() =>
-                          handleSignatureChange(canvasRef.current.toDataURL())
-                        }
-                        dotSize={1}
+                <div>
+                  {image ? (
+                    <div className="signatureCanvas relative border-[2px] border-[#888]">
+                      <img
+                        alt="signature"
+                        src={image}
+                        className="w-full h-full object-contain"
                       />
-                    )}
-                    <div className="penContainerDefault flex flex-row justify-between">
-                      <div>
-                        {!image && (
-                          <div className="flex flex-row">
-                            {allColor.map((data, key) => {
-                              return (
-                                <i
-                                  style={{
-                                    margin: "5px",
-                                    color: data,
-                                    borderBottom:
-                                      key === 0 && penColor === "blue"
-                                        ? "2px solid blue"
-                                        : key === 1 && penColor === "red"
-                                          ? "2px solid red"
-                                          : key === 2 && penColor === "black"
-                                            ? "2px solid black"
-                                            : "2px solid white"
-                                  }}
-                                  onClick={() => {
-                                    if (key === 0) {
-                                      setPenColor("blue");
-                                    } else if (key === 1) {
-                                      setPenColor("red");
-                                    } else if (key === 2) {
-                                      setPenColor("black");
-                                    }
-                                  }}
-                                  key={key}
-                                  className="fa-light fa-pen-nib"
-                                  width={20}
-                                  height={20}
-                                ></i>
-                              );
-                            })}
-                          </div>
-                        )}
+                    </div>
+                  ) : (
+                    <SignatureCanvas
+                      ref={canvasRef}
+                      penColor={penColor}
+                      canvasProps={{
+                        width: "456px",
+                        height: "180px",
+                        className: "signatureCanvas"
+                      }}
+                      backgroundColor="rgb(255, 255, 255)"
+                      onEnd={() =>
+                        handleSignatureChange(canvasRef.current.toDataURL())
+                      }
+                      dotSize={1}
+                    />
+                  )}
+                  <div className="penContainerDefault flex flex-row justify-between">
+                    <div>
+                      {!image && (
+                        <div className="flex flex-row">
+                          {allColor.map((data, key) => {
+                            return (
+                              <i
+                                style={{
+                                  margin: "5px",
+                                  color: data,
+                                  borderBottom:
+                                    key === 0 && penColor === "blue"
+                                      ? "2px solid blue"
+                                      : key === 1 && penColor === "red"
+                                        ? "2px solid red"
+                                        : key === 2 && penColor === "black"
+                                          ? "2px solid black"
+                                          : "2px solid white"
+                                }}
+                                onClick={() => {
+                                  if (key === 0) {
+                                    setPenColor("blue");
+                                  } else if (key === 1) {
+                                    setPenColor("red");
+                                  } else if (key === 2) {
+                                    setPenColor("black");
+                                  }
+                                }}
+                                key={key}
+                                className="fa-light fa-pen-nib"
+                                width={20}
+                                height={20}
+                              ></i>
+                            );
+                          })}
+                        </div>
+                      )}
+                    </div>
+                    <div className="flex flex-row gap-2">
+                      <div
+                        type="button"
+                        className="op-link"
+                        onClick={() => handleUploadBtn()}
+                      >
+                        Upload image
                       </div>
-                      <div className="flex flex-row gap-2">
-                        <div
-                          type="button"
-                          className="op-link"
-                          onClick={() => handleUploadBtn()}
-                        >
-                          Upload image
-                        </div>
-                        <div
-                          type="button"
-                          className="op-link"
-                          onClick={() => handleClear()}
-                        >
-                          Clear
-                        </div>
+                      <div
+                        type="button"
+                        className="op-link"
+                        onClick={() => handleClear()}
+                      >
+                        Clear
                       </div>
                     </div>
                   </div>
-                  {warning && (
-                    <div className="warning signWarning text-[12px]">
-                      <i className="fa-light fa-exclamation-circle text-[#fab005] text-[15px] mr-[4px]"></i>
-                      Please upload signature/Image
-                    </div>
-                  )}
                 </div>
+                {warning && (
+                  <span className="customwarning signWarning text-[12px] w-[220px] md:w-[300px]">
+                    <i className="fa-light fa-exclamation-circle text-[#fab005] text-[15px] mr-[4px]"></i>
+                    Please upload signature/Image
+                  </span>
+                )}
               </div>
             </div>
             <div className="relative">
-              <div className="mb-[10px]">
-                <span className="font-medium select-none">Initials</span>
-              </div>
+              <span className="font-medium select-none flex mb-[10px] pl-[10px]">
+                Initials
+              </span>
               <div>
                 {isInitials ? (
                   <div className="intialSignature relative border-[1px] border-[#888]">
@@ -436,7 +434,7 @@ const ManageSign = () => {
               </div>
             </div>
           </div>
-          <div style={{ paddingTop: 10 }}>
+          <div className="pt-3 ml-2 md:ml-0">
             <button
               className="op-btn op-btn-primary"
               onClick={(e) => handleSubmit(e)}
diff --git a/apps/OpenSign/src/pages/Opensigndrive.js b/apps/OpenSign/src/pages/Opensigndrive.js
index 0e96c3cc7..d4c2ce30d 100644
--- a/apps/OpenSign/src/pages/Opensigndrive.js
+++ b/apps/OpenSign/src/pages/Opensigndrive.js
@@ -522,7 +522,7 @@ function Opensigndrive() {
     }
   }
   return (
-    <div className="bg-base-100 text-base-content rounded-xl w-full">
+    <div className="bg-base-100 text-base-content rounded-box w-full shadow-md">
       <Title title={"OpenSign™ Drive"} drive={true} />
       <ModalUi
         isOpen={isAlert.isShow}
diff --git a/apps/OpenSign/src/pages/PageNotFound.js b/apps/OpenSign/src/pages/PageNotFound.js
index 8be661de5..1c439b27f 100644
--- a/apps/OpenSign/src/pages/PageNotFound.js
+++ b/apps/OpenSign/src/pages/PageNotFound.js
@@ -4,7 +4,7 @@ import Title from "../components/Title";
 
 const PageNotFound = ({ prefix }) => {
   return (
-    <div className="flex items-center justify-center h-screen w-full bg-base-100 text-base-content rounded">
+    <div className="flex items-center justify-center h-screen w-full bg-base-100 text-base-content rounded-box">
       <Title title={"Page Not Found"} />
       <div className="text-center">
         <h1 className="text-[60px] lg:text-[120px] font-semibold">404</h1>
diff --git a/apps/OpenSign/src/pages/PdfRequestFiles.js b/apps/OpenSign/src/pages/PdfRequestFiles.js
index ea9617b29..577609148 100644
--- a/apps/OpenSign/src/pages/PdfRequestFiles.js
+++ b/apps/OpenSign/src/pages/PdfRequestFiles.js
@@ -1593,7 +1593,7 @@ function PdfRequestFiles() {
                               className="font-[500] text-[13px] mr-[5px] op-btn op-btn-secondary"
                             >
                               <i
-                                className="fa-light fa-award"
+                                className="fa-light fa-award mx-[3px] lg:mx-0"
                                 aria-hidden="true"
                               ></i>
                               <span className="hidden lg:block">
diff --git a/apps/OpenSign/src/pages/SignyourselfPdf.js b/apps/OpenSign/src/pages/SignyourselfPdf.js
index 00740a7c3..32b89b5ec 100644
--- a/apps/OpenSign/src/pages/SignyourselfPdf.js
+++ b/apps/OpenSign/src/pages/SignyourselfPdf.js
@@ -226,11 +226,15 @@ function SignYourSelf() {
       }
       isCompleted = documentData[0].IsCompleted && documentData[0].IsCompleted;
       if (isCompleted) {
+        setIsCelebration(true);
+        setTimeout(() => {
+          setIsCelebration(false);
+        }, 5000);
         setIsCompleted(true);
         setPdfUrl(documentData[0].SignedUrl);
         const alreadySign = {
           status: true,
-          mssg: "You have successfully signed the document!"
+          mssg: "Congratulations! 🎉 This document has been successfully signed by you!"
         };
         if (showComplete) {
           setShowAlreadySignDoc(alreadySign);
@@ -238,12 +242,8 @@ function SignYourSelf() {
           setIsUiLoading(false);
           setIsSignPad(false);
           setIsEmail(true);
-          setIsCelebration(true);
           setXyPostion([]);
           setSignBtnPosition([]);
-          setTimeout(() => {
-            setIsCelebration(false);
-          }, 5000);
         }
       }
     } else if (
@@ -1173,11 +1173,11 @@ function SignYourSelf() {
             </div>
           )}
           {isCelebration && (
-            <div className="relative z-[999]">
+            <div className="relative z-[1000]">
               <Confetti width={window.innerWidth} height={window.innerHeight} />
             </div>
           )}
-          {/* <div className="min-h-screen relative op-card overflow-hidden flex flex-col md:flex-row justify-between bg-base-300"> */}
+
           <div className="relative op-card overflow-hidden flex flex-col md:flex-row justify-between bg-base-300">
             {!isEmailVerified && (
               <VerifyEmail
diff --git a/apps/OpenSign/src/pages/UserProfile.js b/apps/OpenSign/src/pages/UserProfile.js
index 09d8b796d..a4099b446 100644
--- a/apps/OpenSign/src/pages/UserProfile.js
+++ b/apps/OpenSign/src/pages/UserProfile.js
@@ -315,7 +315,7 @@ function UserProfile() {
               {userNameError}
             </div>
           )} */}
-          <div className="bg-base-100 text-base-content flex flex-col justify-center shadow rounded-xl w-[450px]">
+          <div className="bg-base-100 text-base-content flex flex-col justify-center shadow-md rounded-box w-[450px]">
             <div className="flex flex-col justify-center items-center my-4">
               <div className="w-[200px] h-[200px] overflow-hidden rounded-full">
                 <img
diff --git a/apps/OpenSign/src/pages/Webhook.js b/apps/OpenSign/src/pages/Webhook.js
index c414c23b3..f02c69035 100644
--- a/apps/OpenSign/src/pages/Webhook.js
+++ b/apps/OpenSign/src/pages/Webhook.js
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react";
 import Title from "../components/Title";
 import axios from "axios";
-import { useNavigate } from "react-router-dom";
 import Alert from "../primitives/Alert";
 import ModalUi from "../primitives/ModalUi";
 import { isEnableSubscription } from "../constant/const";
@@ -10,19 +9,24 @@ import Parse from "parse";
 import PremiumAlertHeader from "../primitives/PremiumAlertHeader";
 import Tooltip from "../primitives/Tooltip";
 import Loader from "../primitives/Loader";
-
+import SubscribeCard from "../primitives/SubscribeCard";
+import Tour from "reactour";
+const tourSteps = [
+  {
+    selector: '[data-tut="webhooksubscribe"]',
+    content: "Upgrade now to set webhook"
+  }
+];
 function Webhook() {
-  const navigation = useNavigate();
   const [parseBaseUrl] = useState(localStorage.getItem("baseUrl"));
   const [parseAppId] = useState(localStorage.getItem("parseAppId"));
   const [webhook, setWebhook] = useState();
   const [isLoader, setIsLoader] = useState(true);
-  const [isGenerate, setIsGenerate] = useState(false);
-  const [isErr, setIsErr] = useState(false);
   const [isModal, setIsModal] = useState(false);
   const [isSubscribe, setIsSubscribe] = useState(false);
   const [error, setError] = useState("");
-
+  const [isAlert, setIsAlert] = useState({ type: "success", msg: "" });
+  const [isTour, setIsTour] = useState(false);
   useEffect(() => {
     fetchWebhook();
     // eslint-disable-next-line
@@ -60,31 +64,22 @@ function Webhook() {
           "X-Parse-Application-Id": parseAppId,
           sessiontoken: localStorage.getItem("accesstoken")
         };
-        await axios.post(url, params, { headers: headers }).then((res) => {
-          if (res.data && res.data.result && res.data.result.Webhook) {
-            setWebhook(res.data.result.Webhook);
-            setIsGenerate(true);
-            setTimeout(() => {
-              setIsGenerate(false);
-            }, 1500);
-            setIsLoader(false);
-          } else {
-            console.error("Error while generating webhook");
-            setIsLoader(false);
-            setIsErr(true);
-            setTimeout(() => {
-              setIsErr(false);
-            }, 1500);
-          }
-        });
+        const res = await axios.post(url, params, { headers: headers });
+        if (res.data && res.data.result && res.data.result.Webhook) {
+          setWebhook(res.data.result.Webhook);
+          setIsAlert({ type: "success", msg: "Webhook added successfully." });
+        } else {
+          console.error("Error while generating webhook");
+          setIsAlert({ type: "danger", msg: "Something went wrong." });
+        }
       } catch (error) {
+        setIsAlert({ type: "danger", msg: "Something went wrong." });
+        console.log("err while generating webhook", error);
+      } finally {
         setIsLoader(false);
-        setIsErr(true);
         setTimeout(() => {
-          setIsErr(false);
+          setIsAlert({ type: "success", msg: "" });
         }, 1500);
-
-        console.log("err", error);
       }
     } else {
       setError("The webhook url should always start with https://");
@@ -94,131 +89,112 @@ function Webhook() {
     }
   };
 
-  const handleModal = () => setIsModal(!isModal);
+  const handleModal = () => {
+    if (!isSubscribe && isEnableSubscription) {
+      setIsTour(true);
+    } else {
+      setIsModal(!isModal);
+    }
+  };
   return (
     <React.Fragment>
       <Title title={"Webhook"} />
-      {isGenerate && <Alert type="success">Webhook added successfully.</Alert>}
-      {isErr && <Alert type="danger">Something went wrong.</Alert>}
-
+      {isAlert.msg && <Alert type={isAlert.type}>{isAlert.msg}</Alert>}
       {isLoader ? (
         <div className="h-[100vh] flex justify-center items-center">
           <Loader />
         </div>
       ) : (
-        <div className="bg-base-100 text-base-content flex flex-col justify-center shadow rounded">
-          {!isEnableSubscription && <PremiumAlertHeader />}
-          <h1 className={"ml-4 mt-3 mb-2 font-semibold"}>
-            OpenSign™ Webhook{" "}
-            <Tooltip
-              url={"https://docs.opensignlabs.com/docs/API-docs/get-webhook"}
-              isSubscribe={true}
-            />
-          </h1>
-          <ul
-            className={
-              isSubscribe || !isEnableSubscription
-                ? "w-full flex flex-col p-2 text-sm "
-                : "w-full flex flex-col p-2 text-sm opacity-20 pointer-events-none select-none"
-            }
-          >
-            <li
-              className={`flex flex-col md:flex-row  justify-between items-center border-y-[1px] border-gray-300 break-all py-2`}
-            >
-              <div className="w-[70%] flex-col md:flex-row flex items-center gap-5 ">
-                <span className="">Webhook:</span>{" "}
-                <span id="token" className=" md:text-end cursor-pointer">
-                  {webhook ? webhook : "_____"}
-                </span>
-              </div>
+        <>
+          <div className="bg-base-100 text-base-content flex flex-col justify-center shadow-md rounded-box mb-3">
+            {!isEnableSubscription && <PremiumAlertHeader />}
+            <h1 className={"ml-4 mt-3 mb-2 font-semibold"}>
+              OpenSign™ Webhook{" "}
+              <Tooltip
+                url={"https://docs.opensignlabs.com/docs/API-docs/get-webhook"}
+                isSubscribe={true}
+              />
+            </h1>
+            <ul className={"w-full flex flex-col p-2 text-sm"}>
+              <li className="flex flex-col md:flex-row justify-between items-center border-y-[1px] border-gray-300 break-all py-2">
+                <div className="w-[70%] flex-col md:flex-row flex items-center gap-5">
+                  <span className="">Webhook:</span>{" "}
+                  <span id="token" className=" md:text-end cursor-pointer">
+                    {webhook ? webhook : "_____"}
+                  </span>
+                </div>
+                <button
+                  type="button"
+                  onClick={handleModal}
+                  className="op-btn op-btn-primary"
+                >
+                  {webhook ? "Update Webhook" : "Add Webhook"}
+                </button>
+              </li>
+            </ul>
+            <div className="flex items-center justify-center">
               <button
                 type="button"
-                onClick={handleModal}
-                className="op-btn op-btn-primary "
+                onClick={() =>
+                  openInNewTab(
+                    "https://docs.opensignlabs.com/docs/API-docs/save-update-webhook"
+                  )
+                }
+                className="op-btn op-btn-secondary mt-2 mb-3 px-7"
               >
-                {webhook ? "Update Webhook" : "Add Webhook"}
+                View Docs
               </button>
-            </li>
-          </ul>
-
-          <div className="flex items-center justify-center ">
-            <button
-              type="button"
-              onClick={() =>
-                openInNewTab(
-                  "https://docs.opensignlabs.com/docs/API-docs/save-update-webhook"
-                )
-              }
-              className="op-btn op-btn-secondary my-2"
-            >
-              View Docs
-            </button>
-          </div>
-
-          {!isSubscribe && isEnableSubscription && (
-            <>
-              <h1 className={"ml-4 mt-3 mb-2 font-semibold"}>
-                Upgrade to PRO Plan
-              </h1>
-              <ul className={"w-full flex flex-col p-2 text-sm "}>
-                <li
-                  className={`flex flex-col md:flex-row justify-between items-center border-y-[1px] border-gray-300 break-all py-2`}
-                >
-                  <div className="w-[70%] flex-col md:flex-row flex items-center gap-3 ">
-                    <span className="">$29.99/month:</span>{" "}
-                    <span id="token" className=" md:text-end cursor-pointer">
-                      First 100 documents included, then just $0.15 per
-                      document.
-                    </span>
-                  </div>
-                  {!isSubscribe && isEnableSubscription && (
-                    <button
-                      type="button"
-                      onClick={() => navigation("/subscription")}
-                      className="text-xs md:text-sm shadow op-btn op-btn-outline op-btn-accent"
-                    >
-                      Upgrade Now
-                    </button>
-                  )}
-                </li>
-              </ul>
-            </>
-          )}
-          <ModalUi
-            isOpen={isModal}
-            title={"Regenerate Token"}
-            handleClose={handleModal}
-          >
-            {error && <Alert type="danger">{error}</Alert>}
-            <div className="m-[20px]">
-              <div className="text-lg font-normal text-base-content">
-                <label className="text-sm ml-2">Webhook</label>
-                <input
-                  value={webhook}
-                  onChange={(e) => setWebhook(e.target.value)}
-                  placeholder="Enter webhook url"
-                  className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-                />
-              </div>
-              <hr className="bg-[#ccc] mt-3" />
-              <div className="flex items-center mt-3 gap-2">
-                <button
-                  onClick={handleSubmit}
-                  className="op-btn op-btn-primary ml-[2px]"
-                >
-                  Yes
-                </button>
-                <button
-                  onClick={handleModal}
-                  className="op-btn op-btn-secondary"
-                >
-                  No
-                </button>
-              </div>
             </div>
-          </ModalUi>
-        </div>
+            <ModalUi
+              isOpen={isModal}
+              title={"Regenerate Token"}
+              handleClose={handleModal}
+            >
+              {error && <Alert type="danger">{error}</Alert>}
+              <div className="m-[20px]">
+                <div className="text-lg font-normal text-base-content">
+                  <label className="text-sm ml-2">Webhook</label>
+                  <input
+                    value={webhook}
+                    onChange={(e) => setWebhook(e.target.value)}
+                    placeholder="Enter webhook url"
+                    className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                  />
+                </div>
+                <hr className="bg-[#ccc] mt-3" />
+                <div className="flex items-center mt-3 gap-2">
+                  <button
+                    onClick={handleSubmit}
+                    className="op-btn op-btn-primary ml-[2px]"
+                  >
+                    Yes
+                  </button>
+                  <button
+                    onClick={handleModal}
+                    className="op-btn op-btn-secondary"
+                  >
+                    No
+                  </button>
+                </div>
+              </div>
+            </ModalUi>
+          </div>
+          {!isSubscribe && isEnableSubscription && (
+            <div data-tut="webhooksubscribe">
+              <SubscribeCard />
+            </div>
+          )}
+        </>
       )}
+      <Tour
+        onRequestClose={() => setIsTour(false)}
+        steps={tourSteps}
+        isOpen={isTour}
+        closeWithMask={false}
+        disableKeyboardNavigation={["esc"]}
+        scrollOffset={-100}
+        rounded={5}
+      />
     </React.Fragment>
   );
 }
diff --git a/apps/OpenSign/src/primitives/SubscribeCard.js b/apps/OpenSign/src/primitives/SubscribeCard.js
new file mode 100644
index 000000000..84fdcc163
--- /dev/null
+++ b/apps/OpenSign/src/primitives/SubscribeCard.js
@@ -0,0 +1,24 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+const SubscribeCard = () => {
+  const navigate = useNavigate();
+  return (
+    <div className="op-card op-bg-primary text-primary-content w-full shadow-lg">
+      <div className="op-card-body">
+        <h2 className="op-card-title">Upgrade to PRO Plan</h2>
+        <p>$29.99/month: Sign 100 docs using API. Only $0.15/doc after that.</p>
+        <div className="op-card-actions justify-end">
+          <button
+            onClick={() => navigate("/subscription")}
+            className="op-btn op-btn-accent"
+          >
+            Upgrade Now
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SubscribeCard;
diff --git a/apps/OpenSign/src/styles/managesign.css b/apps/OpenSign/src/styles/managesign.css
index a937f79b8..a32f9bb71 100644
--- a/apps/OpenSign/src/styles/managesign.css
+++ b/apps/OpenSign/src/styles/managesign.css
@@ -1,9 +1,8 @@
-.warning {
+.customwarning {
   position: absolute;
   padding: 8px;
   border: 1px solid black;
   background: white;
-  width: 300px;
   border-radius: 5px;
   animation: inAnimation 2s ease-in-out;
   z-index: 1;
@@ -35,24 +34,9 @@
     visibility: hidden;
   }
 
-  25% {
-    opacity: 1;
-    visibility: visible;
-  }
-
-  50% {
-    opacity: 1;
-    visibility: visible;
-  }
-
-  75% {
-    opacity: 1;
-    visibility: visible;
-  }
-
   100% {
-    opacity: 0;
-    visibility: hidden;
+    opacity: 1;
+    visibility: visible;
   }
 }
 
diff --git a/apps/OpenSign/src/styles/signature.css b/apps/OpenSign/src/styles/signature.css
index 7f56b9245..2c6e8facf 100644
--- a/apps/OpenSign/src/styles/signature.css
+++ b/apps/OpenSign/src/styles/signature.css
@@ -50,17 +50,6 @@
   width: 460px;
 }
 
-.borderResize {
-  position: absolute;
-  display: inline-block;
-  width: 14px;
-  height: 14px;
-}
-
-.borderResize :hover {
-  cursor: sw-resize;
-}
-
 .icon {
   position: absolute;
   font-size: 14px;