diff --git a/apps/OpenSign/src/components/Header.js b/apps/OpenSign/src/components/Header.js
index 7f788fc71..236120820 100644
--- a/apps/OpenSign/src/components/Header.js
+++ b/apps/OpenSign/src/components/Header.js
@@ -15,7 +15,7 @@ const Header = ({ showSidebar }) => {
   const image = localStorage.getItem("profileImg") || dp;
 
   const [isOpen, setIsOpen] = useState(false);
-  const [isSubscribe, setIsSubscribe] = useState(false);
+  const [isSubscribe, setIsSubscribe] = useState(true);
 
   const toggleDropdown = () => {
     setIsOpen(!isOpen);
diff --git a/apps/OpenSign/src/json/plansArr.json b/apps/OpenSign/src/json/plansArr.json
index f372d7493..e8047441d 100644
--- a/apps/OpenSign/src/json/plansArr.json
+++ b/apps/OpenSign/src/json/plansArr.json
@@ -1,63 +1,70 @@
 [
   {
-    "planName": "Free Plan",
+    "planName": "OPENSIGN™ FREE",
     "currency": "",
-    "price": "Free",
-    "subtitle": "Free for life.",
+    "monthlyPrice": "Free",
+    "yearlyPrice": "Free",
+    "subtitle": "Free Unlimited E-signatures, Forever.",
     "btnText": "Subscribe",
     "url": "",
     "target": "_blank",
     "benefits": [
-      "Sign Unlimited Documents",
-      "S3 Doc Storage",
-      "Unlimited Guest Signers",
-      "Unlimited completion certificates",
-      "Unique Code(OTP) verification for guest signers",
-      "Expiring docs & reject signature support",
-      "PDF Template Creation",
-      "Audit Trails",
-      "API support",
-      "Free for lifetime",
-      "Community support"
+      "Unlimited envelopes",
+      "Sign documents yourself",
+      "Request signatures from others",
+      "14 field types",
+      "Automatic e-signatures",
+      "Completion certificates",
+      "Send in order",
+      "Document templates",
+      "Import from Dropbox",
+      "Contact book",
+      "Document expiry support",
+      "Decline document support",
+      "Email notifications",
+      "Recipient authentication using OTP",
+      "And much more"
     ]
   },
   {
-    "planName": "THANKS PLAN",
+    "planName": "OPENSIGN™ PROFESSIONAL",
     "currency": "$",
-    "price": "29.99",
-    "subtitle": "Use code <span style='background-color: yellow;'>'FREEBETA'</span> to get this for free(First 1000 users)",
+    "monthlyPrice": "29.99",
+    "yearlyPrice": "329.99",
+    "subtitle": "Exclusive Access to advanced features.",
     "btnText": "Subscribe",
-    "url": "https://subscriptions.zoho.in/subscribe/ef798486e6a0a11ea65f2bae8f2af901dbadf3175d495584fd25b9af5d2f2b9e/thanks",
+    "url": "https://billing.opensignlabs.com/subscribe/ef798486e6a0a11ea65f2bae8f2af901d1a09dfa8085585cdd4ec4d7f32137f3/professional-monthly",
+    "yearlyUrl": "https://billing.opensignlabs.com/subscribe/ef798486e6a0a11ea65f2bae8f2af901d8ad1135190dff951330360e47585a71/professional-yearly",
     "target": "_self",
     "benefits": [
-      "Sign Unlimited Documents",
-      "Unlimited Secure Doc Storage with OpenSign™ Drive",
-      "Unlimited Guest Signers",
-      "Unlimited completion certificates",
-      "Unique Code(OTP) verification for guest signers",
-      "Expiring docs & reject signature support",
-      "PDF Template Creation(coming soon)",
-      "Audit Trails",
-      "API support",
-      "Add-ons support(coming soon)",
-      "Self hosted cloud infrastructure"
+      "Everything in OpenSign™ professional",
+      "Field validations",
+      "Regular expression validations",
+      "Organize docs in OpenSign™ Drive",
+      "Webhooks",
+      "Zapier integration",
+      "API Access",
+      "100 API signatures included",
+      "DocumentId removal from signed docs",
+      "Custom email templates(coming soon)"
     ]
   },
   {
-    "planName": "ENTERPRISE",
+    "planName": "OPENSIGN™ ENTERPRISE",
     "currency": "",
-    "price": "Request Price",
-    "subtitle": "Customization available Priority support.",
+    "monthlyPrice": "Request Price",
+    "yearlyPrice": "Request Price",
+    "subtitle": "Scalable Features with priority support.",
     "btnText": "Contact us",
     "url": "https://www.opensignlabs.com/contact-us",
     "target": "_blank",
     "benefits": [
       "All features",
       "Custom domain",
-      "Whitelabeling",
+      "Custom branding",
       "Uptime SLA",
       "SSO support",
-      "24/7 support"
+      "Priority support"
     ]
   }
 ]
diff --git a/apps/OpenSign/src/pages/PlanSubscriptions.js b/apps/OpenSign/src/pages/PlanSubscriptions.js
index 7c56f6e37..0570d8130 100644
--- a/apps/OpenSign/src/pages/PlanSubscriptions.js
+++ b/apps/OpenSign/src/pages/PlanSubscriptions.js
@@ -37,7 +37,6 @@ const PlanSubscriptions = () => {
   useEffect(() => {
     // if (localStorage.getItem("accesstoken")) {
     setIsLoader(false);
-    setYearlyVisible(false);
     // } else {
     //   navigate("/", { replace: true });
     // }
@@ -90,20 +89,37 @@ const PlanSubscriptions = () => {
           style={{
             backgroundColor: "white",
             overflowY: "auto",
-            maxHeight: "100%",
-            "--theme-color": "#7952b3",
-            "--plan-width": 30
+            maxHeight: "100%"
           }}
         >
-          <div
-            id="monthlyPlans"
-            className={`${yearlyVisible ? "none" : "block my-2"}`}
-          >
-            <div className="flex justify-center w-full my-2">
-              <ul className=" flex flex-col md:flex-row h-full bg-white justify-center border-collapse border-[1px] border-gray-300">
+          <div id="monthlyPlans" className="block my-2">
+            <div className="flex flex-col justify-center items-center w-full">
+              <div className="mb-6 mt-2 flex flex-row border-[1px] p-2 border-gray-300 rounded text-sm">
+                <span
+                  onClick={() => setYearlyVisible(false)}
+                  className={`${
+                    !yearlyVisible
+                      ? "bg-[#002862] text-white"
+                      : "bg-white text-black"
+                  } px-4 py-1 rounded cursor-pointer`}
+                >
+                  Monthly
+                </span>
+                <span
+                  onClick={() => setYearlyVisible(true)}
+                  className={`${
+                    yearlyVisible
+                      ? "bg-[#002862] text-white"
+                      : "bg-white text-black"
+                  } px-4 py-1 rounded cursor-pointer`}
+                >
+                  Yearly (10% off)
+                </span>
+              </div>
+              <ul className=" flex flex-col md:flex-row h-full bg-white justify-center">
                 {plansArr.map((item) => (
                   <li
-                    className="flex flex-col md:my-0 text-center border-[1px] border-gray-300 max-w-[260px]"
+                    className="flex flex-col md:my-0 text-center border-[1px] border-gray-300 w-[260px]"
                     key={item.planName}
                   >
                     <div className="p-2 flex flex-col justify-center items-center min-h-[320px]">
@@ -120,17 +136,23 @@ const PlanSubscriptions = () => {
                       <div className="">
                         <span className="text-3xl">
                           {item.currency && <small>{item.currency}</small>}
-                          {item.price}
+                          {yearlyVisible
+                            ? item?.yearlyPrice
+                            : item.monthlyPrice}
                         </span>
+                        <p className="font-semibold pt-2 text-sm">
+                          {yearlyVisible ? "Billed Yearly" : "Billed Monthly"}
+                        </p>
                         <div
                           className={`${
                             item.subtitle.length <= 32
-                              ? "w-[150px] text-center"
+                              ? "w-[150px] h-[40px] text-center"
                               : ""
                           } text-sm text-center my-2`}
                         >
                           <div
                             style={{
+                              textAlign: "center",
                               backgroundColor: item.subtitlecolor
                                 ? item.subtitlecolor
                                 : "white"
@@ -148,22 +170,23 @@ const PlanSubscriptions = () => {
                           </div>
                         </div>
                       </div>
-
                       {item.url ? (
                         <NavLink
                           to={
                             item.btnText === "Subscribe"
-                              ? item.url + details
+                              ? yearlyVisible
+                                ? item.yearlyUrl + details
+                                : item.url + details
                               : item.url
                           }
-                          className="bg-[#002862] w-full text-white py-2 rounded uppercase hover:no-underline hover:text-white cursor-pointer"
+                          className="bg-[#002862] w-full mt-1 text-white py-2 rounded uppercase hover:no-underline hover:text-white cursor-pointer"
                           target={item.target}
                         >
                           {item.btnText}
                         </NavLink>
                       ) : (
                         <button
-                          className="bg-[#002862] w-full text-white py-2 rounded uppercase hover:no-underline hover:text-white cursor-pointer"
+                          className="bg-[#002862] w-full mt-1 text-white py-2 rounded uppercase hover:no-underline hover:text-white cursor-pointer"
                           onClick={() => handleFreePlan()}
                         >
                           {item.btnText}
@@ -184,6 +207,38 @@ const PlanSubscriptions = () => {
                 ))}
               </ul>
             </div>
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+              }}
+              className="text-sm"
+            >
+              <hr
+                className={"border-[1px] border-gray-300 w-[20%]"}
+                style={{ color: "grey" }}
+              />
+              <span style={{ color: "grey" }} className="px-2 ">
+                or
+              </span>
+              <hr
+                className={"border-[1px] border-gray-300  w-[20%]"}
+                style={{ color: "grey" }}
+              />
+            </div>
+            <div className="flex flex-col justify-center w-full items-center">
+              <h3 className="text-[#002862] mt-1 mb-2">
+                Host it yourself for free
+              </h3>
+              <NavLink
+                to={"https://github.com/OpenSignLabs/OpenSign"}
+                className="bg-[#002862] w-[200px] text-center text-white py-2 rounded uppercase hover:no-underline hover:text-white cursor-pointer"
+                target={"_blank"}
+              >
+                Visit Github
+              </NavLink>
+            </div>
           </div>
         </div>
       )}