diff --git a/apps/OpenSign/src/pages/UserProfile.js b/apps/OpenSign/src/pages/UserProfile.js
index 648c8eaae..7fd7163fb 100644
--- a/apps/OpenSign/src/pages/UserProfile.js
+++ b/apps/OpenSign/src/pages/UserProfile.js
@@ -292,11 +292,11 @@ function UserProfile() {
                   </span>{" "}
                   <label
                     className={
-                      !isSubscribe || isEnableSubscription
-                        ? "relative inline-flex items-center mb-0 pointer-events-none opacity-50"
-                        : `${
+                      isSubscribe || !isEnableSubscription
+                        ? `${
                             editmode ? "cursor-pointer" : ""
                           } relative inline-flex items-center mb-0`
+                        : "relative inline-flex items-center mb-0 pointer-events-none opacity-50"
                     }
                   >
                     <input
diff --git a/apps/OpenSign/src/primitives/Upgrade.js b/apps/OpenSign/src/primitives/Upgrade.js
index 9480752a6..b21d43270 100644
--- a/apps/OpenSign/src/primitives/Upgrade.js
+++ b/apps/OpenSign/src/primitives/Upgrade.js
@@ -1,16 +1,17 @@
 import React from "react";
+import { useNavigate } from "react-router-dom";
 
 function Upgrade() {
+  const navigation = useNavigate();
+
   return (
     <sup>
-      <a
-        href="https://www.opensignlabs.com/plans-pricing"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-blue-800 text-sm cursor-pointer "
+      <span
+        onClick={() => navigation("/subscription")}
+        className="text-blue-800 text-sm cursor-pointer hover:underline"
       >
         Upgrade now
-      </a>
+      </span>
     </sup>
   );
 }