diff --git a/src/App.js b/src/App.js
index a9ffc32..da0683b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -47,7 +47,7 @@ function App() {
         <Routes>
           <Route exact path="/" element={<Homepage />} />
           <Route exact path="/login" element={<Login />} />
-          <Route path="/signup" element={<SignupPage />} />
+          <Route path="/signup/:isUpgrade?" element={<SignupPage />} />
           <Route path="/requestpage/:supReq" element={<DemoRequestPage />} />
           <Route
             exact
diff --git a/src/Components/Case/CaseDetailsPage.js b/src/Components/Case/CaseDetailsPage.js
index 709466c..592804c 100644
--- a/src/Components/Case/CaseDetailsPage.js
+++ b/src/Components/Case/CaseDetailsPage.js
@@ -77,8 +77,10 @@ const CaseDetailsPage = () => {
   };
 
   const handleConfirmUpgrade = () => {
-    console.log("handle confirm upgrade");
+    const isUpgrade = true;
+    navigate(`/signup/${isUpgrade}`);
   };
+
   const handleSuccess = () => {
     setIsLoading(true);
     setShowUploadModal(false);
diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index 30a4ca6..eb23c4a 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -3,6 +3,7 @@ import Col from "react-bootstrap/Col";
 import Form from "react-bootstrap/Form";
 import Row from "react-bootstrap/Row";
 import Button from "../../pageElements/Button";
+import { useParams } from "react-router-dom";
 import { db, auth } from "../../firebase";
 import { createUserWithEmailAndPassword } from "firebase/auth";
 import { useNavigate } from "react-router-dom";
@@ -30,8 +31,8 @@ import "../../styles/signup.scss";
 import Stripe from "stripe";
 import { stripeApiKey } from "../../secrets";
 
-const SignupPage = (props) => {
-  const { isUpgrade } = props;
+const SignupPage = () => {
+  const { isUpgrade } = useParams();
   const navigate = useNavigate();
   const [notice, setNotice] = useState("");
   const fieldsChunkSize = 2;
@@ -41,7 +42,9 @@ const SignupPage = (props) => {
     getFormDataDefaults(paymentfields)
   );
   const [showPaymentModal, setShowPaymentModal] = useState(false);
-  const [showSelectPlan, setShowSelectPlan] = useState(false);
+  const [showSelectPlan, setShowSelectPlan] = useState(
+    isUpgrade ? true : false
+  );
   const [activeRadioOption, setActiveRadioOption] = useState("partner");
   const [selectedPlan, setSelectedPlan] = useState([signupRadioFields[1]]);
   const [isAnnual, setIsAnnual] = useState(1);