diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index b2dd566..e271cc6 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -72,9 +72,11 @@ const SignupPage = () => {
     const temp = value;
     setActiveRadioOption(temp);
   };
+
   signupRadioFields.map((option) => {
     console.log(option.value);
   });
+
   const validateData = () => {
     const newData = getValidatedFormData(data, signupFields);
     const hasErrors = isFormDataHasErrors(newData);
diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js
index aab2258..5135cd6 100644
--- a/src/pageElements/Radio.js
+++ b/src/pageElements/Radio.js
@@ -16,16 +16,18 @@ const Radio = (props) => {
       >
         {value == activeRadioOption ? (
           <div className="radio-circle-container">
-            <div>
+            <div className="radio-circle-box">
               <CircleFill />
             </div>
 
-            <div> {`checked: ${name}`} </div>
+            <div className="radio-name-box"> {`${name}`} </div>
           </div>
         ) : (
           <div className="radio-circle-container">
-            <Circle />
-            <div> {`unchecked: ${name}`} </div>
+            <div className="radio-circle-box">
+              <Circle />
+            </div>
+            <div className="radio-name-box">{`${name}`} </div>
           </div>
         )}
       </div>
diff --git a/src/styles/radio.scss b/src/styles/radio.scss
index 1abbbf8..5413454 100644
--- a/src/styles/radio.scss
+++ b/src/styles/radio.scss
@@ -1,5 +1,17 @@
 .radio-circle-container {
   display: flex;
   flex-direction: row;
-  margin: 8px;
+  background-color: #fff;
+  height: 160px;
+  margin: 10px 8px 0px 8px;
+  border-radius: 5px;
+  border: 1px solid #d4d4d4;
+}
+
+.radio-circle-box {
+  margin: 12px 8px;
+}
+
+.radio-name-box {
+  margin: 12px 8px;
 }