diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index 90f2dd9..2ac879f 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -507,6 +507,8 @@ const SignupPage = () => {
                     activeRadioOption={activeRadioOption}
                     price={option.pricing}
                     isAnnual={isAnnual}
+                    isUpgrade={isUpgrade}
+                    currentPlan={currentPlan}
                   />
                 </div>
               ))}
diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js
index 687b0dc..5b84825 100644
--- a/src/pageElements/Radio.js
+++ b/src/pageElements/Radio.js
@@ -13,17 +13,20 @@ 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)}
diff --git a/src/styles/radio.scss b/src/styles/radio.scss
index 75b9076..4d82241 100644
--- a/src/styles/radio.scss
+++ b/src/styles/radio.scss
@@ -1,7 +1,6 @@
 .radio-circle-container {
   display: flex;
   flex-direction: column;
-  background-color: #fff;
   height: 290px;
   margin: 10px 8px 0px 8px;
   border-radius: 5px;