diff --git a/src/App.js b/src/App.js
index a9ffc32..a3d8d6a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -47,7 +47,10 @@ function App() {
         <Routes>
           <Route exact path="/" element={<Homepage />} />
           <Route exact path="/login" element={<Login />} />
-          <Route path="/signup" element={<SignupPage />} />
+          <Route
+            path="/signup/:isUpgrade?/:currentPlan?"
+            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..a942c32 100644
--- a/src/Components/Case/CaseDetailsPage.js
+++ b/src/Components/Case/CaseDetailsPage.js
@@ -77,8 +77,11 @@ const CaseDetailsPage = () => {
   };
 
   const handleConfirmUpgrade = () => {
-    console.log("handle confirm upgrade");
+    const isUpgrade = true;
+    const currentPlan = group?.subscriptionPlan;
+    navigate(`/signup/${isUpgrade}/${currentPlan}`);
   };
+
   const handleSuccess = () => {
     setIsLoading(true);
     setShowUploadModal(false);
diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index 30a4ca6..ead6b0f 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, currentPlan } = 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);
@@ -201,6 +204,7 @@ const SignupPage = (props) => {
       email,
       customerId: customerId,
       subscriptionId: subscriptionId,
+      subscriptionPlan: plan,
     };
 
     try {
@@ -379,97 +383,101 @@ const SignupPage = (props) => {
     selectedPlan[0].value === "seniorPartner" ||
     selectedPlan[0].value === "partner";
 
+  const signupForm = (
+    <div className="signup-sub-container">
+      <div className="signup-header">
+        <h1 className="signup-header-text">Create a Novodraft account</h1>
+      </div>
+      <Form className="signup-form">
+        {splitEvery(
+          Object.keys(signupFields).slice(0, -2),
+          fieldsChunkSize
+        ).map((names, j) => (
+          <Row key={`row${j}`}>
+            {names.map((name, i) => (
+              <Col key={`${name}${i + fieldsChunkSize * j}`} className="mb-3">
+                <TextInput
+                  name={name}
+                  value={data[name].value}
+                  onChange={(e) => handleChangeInput(e, name)}
+                  error={data[name].error}
+                  message={data[name].message}
+                  label={
+                    data[name].value.length === 0
+                      ? signupFields[name].label
+                      : ""
+                  }
+                  type={signupFields[name].type}
+                  values={signupFields[name].values}
+                  disabled={isBusy}
+                />
+              </Col>
+            ))}
+          </Row>
+        ))}
+        <Row>
+          <Col className="mb-3">
+            <TextInput
+              id="signupPassword"
+              type="password"
+              label={
+                data.password.value.length === 0
+                  ? signupFields.password.label
+                  : ""
+              }
+              value={data.password.value}
+              error={data.password.error}
+              message={data.password.message}
+              onChange={(e) => handleChangeInput(e, "password")}
+              disabled={isBusy}
+            />
+          </Col>
+        </Row>
+        <Row>
+          <Col className="mb-3">
+            <TextInput
+              id="confirmPassword"
+              type="password"
+              label={
+                data.confirmPassword.value.length === 0
+                  ? signupFields.confirmPassword.label
+                  : ""
+              }
+              value={data.confirmPassword.value}
+              error={data.confirmPassword.error}
+              message={data.confirmPassword.message}
+              onChange={(e) => handleChangeInput(e, "confirmPassword")}
+              disabled={isBusy}
+            />
+          </Col>
+        </Row>
+      </Form>
+      <div className="signup-button-box">
+        <Button
+          className="primary-button signup-proceed"
+          type="button"
+          size="lg"
+          onClick={handleOpenSelectPlan}
+          disabled={isBusy}
+          labelText="Select A Plan"
+        />
+      </div>
+      {showNoticeOnPage ? (
+        <>
+          <br></br>
+          <div className="alert alert-danger" role="alert">
+            {notice}
+          </div>
+        </>
+      ) : (
+        <></>
+      )}
+    </div>
+  );
+  const magicIndex = currentPlan === "associate" ? 1 : 2;
   return (
     <div className="signup-super-container">
-      <div className="signup-sub-container">
-        <div className="signup-header">
-          <h1 className="signup-header-text">Create a Novodraft account</h1>
-        </div>
-        <Form className="signup-form">
-          {splitEvery(
-            Object.keys(signupFields).slice(0, -2),
-            fieldsChunkSize
-          ).map((names, j) => (
-            <Row key={`row${j}`}>
-              {names.map((name, i) => (
-                <Col key={`${name}${i + fieldsChunkSize * j}`} className="mb-3">
-                  <TextInput
-                    name={name}
-                    value={data[name].value}
-                    onChange={(e) => handleChangeInput(e, name)}
-                    error={data[name].error}
-                    message={data[name].message}
-                    label={
-                      data[name].value.length === 0
-                        ? signupFields[name].label
-                        : ""
-                    }
-                    type={signupFields[name].type}
-                    values={signupFields[name].values}
-                    disabled={isBusy}
-                  />
-                </Col>
-              ))}
-            </Row>
-          ))}
-          <Row>
-            <Col className="mb-3">
-              <TextInput
-                id="signupPassword"
-                type="password"
-                label={
-                  data.password.value.length === 0
-                    ? signupFields.password.label
-                    : ""
-                }
-                value={data.password.value}
-                error={data.password.error}
-                message={data.password.message}
-                onChange={(e) => handleChangeInput(e, "password")}
-                disabled={isBusy}
-              />
-            </Col>
-          </Row>
-          <Row>
-            <Col className="mb-3">
-              <TextInput
-                id="confirmPassword"
-                type="password"
-                label={
-                  data.confirmPassword.value.length === 0
-                    ? signupFields.confirmPassword.label
-                    : ""
-                }
-                value={data.confirmPassword.value}
-                error={data.confirmPassword.error}
-                message={data.confirmPassword.message}
-                onChange={(e) => handleChangeInput(e, "confirmPassword")}
-                disabled={isBusy}
-              />
-            </Col>
-          </Row>
-        </Form>
-        <div className="signup-button-box">
-          <Button
-            className="primary-button signup-proceed"
-            type="button"
-            size="lg"
-            onClick={handleOpenSelectPlan}
-            disabled={isBusy}
-            labelText="Select A Plan"
-          />
-        </div>
-        {showNoticeOnPage ? (
-          <>
-            <br></br>
-            <div className="alert alert-danger" role="alert">
-              {notice}
-            </div>
-          </>
-        ) : (
-          <></>
-        )}
-      </div>
+      {!isUpgrade ? signupForm : <></>}
       {showSelectPlan ? (
         <div className="select-plan-container">
           <div className="select-sub-left">
@@ -488,7 +496,7 @@ const SignupPage = (props) => {
               </div>
             </div>
             <div className="radio-group-box">
-              {signupRadioFields?.map((option, i) => (
+              {signupRadioFields?.map((option, index) => (
                 <div className="signup-radio-container">
                   <Radio
                     onClick={handleChangeRadioInput}
@@ -499,6 +507,9 @@ const SignupPage = (props) => {
                     activeRadioOption={activeRadioOption}
                     price={option.pricing}
                     isAnnual={isAnnual}
+                    isUpgrade={index < magicIndex ? true : false}
+                    disabled={index < magicIndex ? true : false}
+                    currentPlan={currentPlan}
                   />
                 </div>
               ))}
diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js
index 687b0dc..6898216 100644
--- a/src/pageElements/Radio.js
+++ b/src/pageElements/Radio.js
@@ -13,22 +13,26 @@ const Radio = (props) => {
     activeRadioOption,
     details,
     isAnnual,
+    isUpgrade,
+    currentPlan,
   } = props;
 
   const classCheckbox = "checkbox";
   const classOption = "option";
   const index = isAnnual === 1 ? Number("1") : Number("0");
 
+  const upgradeClass = isUpgrade ? "upgrade" : "not-upgrade";
+
   return (
     <div className="radio-container">
       <div className="radio-option-container" key={name}>
         <>
-          <div className="radio-circle-container">
+          <div className={`radio-circle-container ${upgradeClass}`}>
             <div
               className="radio-circle-top"
               onClick={() => !disabled && onClick && onClick(value)}
             >
-              {value == activeRadioOption ? (
+              {value == activeRadioOption && !isUpgrade ? (
                 <div className="radio-circle-box">
                   <CircleFill color="#1a76c7" size="20px" />
                 </div>
@@ -48,7 +52,7 @@ const Radio = (props) => {
               <div className="radio-description-box">
                 {description.map((item, i) => {
                   const el =
-                    item == "First month free!" ? (
+                    item == "First month free!" && !isUpgrade ? (
                       <div className="offer-div">
                         <p className="signup-feat-item-bold">{item}</p>
                       </div>
diff --git a/src/styles/radio.scss b/src/styles/radio.scss
index 75b9076..ae5039b 100644
--- a/src/styles/radio.scss
+++ b/src/styles/radio.scss
@@ -1,7 +1,12 @@
 .radio-circle-container {
   display: flex;
   flex-direction: column;
-  background-color: #fff;
+  &.upgrade {
+    background-color: rgb(149, 149, 149);
+  }
+  &.not-upgrade {
+    background-color: #fff;
+  }
   height: 290px;
   margin: 10px 8px 0px 8px;
   border-radius: 5px;