m,ore

src/Components/SignupPage/SignupPage.js

@@ -385,10 +385,11 @@ const SignupPage = () => {
                 </h5>
               </div>
               <div className="plan-header-left">
-                <div className="select-toggle-box"></div>
+                <div className="select-toggle-box">
-                <p>Billed annually</p>
+                  <p className="select-billing-text">Billed annually</p>
                   <Toggle />
-                <p>Billed montly</p>
+                  <p className="select-billing-text">Billed montly</p>
+                </div>
               </div>
             </div>
             <div className="radio-group-box">

src/pageElements/Radio.js

@@ -38,7 +38,7 @@ const Radio = (props) => {
               <div className="radio-circle-lower">
                 <div className="radio-description-box">
                   {description.map((item) => {
-                    return <li>{item}</li>;
+                    return <p>{item}</p>;
                   })}
                 </div>
                 <div className="radio-description-box">{`${details}`} </div>
@@ -60,7 +60,7 @@ const Radio = (props) => {
               <div className="radio-circle-lower">
                 <div className="radio-description-box">
                   {description.map((item) => {
-                    return <li>{item}</li>;
+                    return <p>{item}</p>;
                   })}
                 </div>
                 <div className="radio-description-box">{`${details}`} </div>

src/styles/signup.scss

@@ -106,6 +106,20 @@
   padding: 6px;
 }
 
+.select-toggle-box {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 2px;
+  width: 240px;
+  height: 20px;
+}
+
+.select-billing-text {
+  font-size: 0.85rem;
+}
+
 .signup-radio-wrapper {
   background-color: #fff;
   display: flex;