diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index eb9b5c1e..b8bd1740 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,7 +8,7 @@
       "name": "frontend",
       "version": "0.1.0",
       "dependencies": {
-        "@emotion/react": "^11.13.0",
+        "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",
         "@mui/icons-material": "^5.15.19",
         "@mui/material": "^5.16.5",
@@ -2826,7 +2826,6 @@
       "version": "11.13.3",
       "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.13.3.tgz",
       "integrity": "sha512-lIsdU6JNrmYfJ5EbUCf4xW1ovy5wKQ2CkPRM4xogziOxH1nXxBSjpC9YqbFAP7circxMfYp+6x676BqWcEiixg==",
-      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@emotion/babel-plugin": "^11.12.0",
@@ -2869,7 +2868,6 @@
       "version": "11.13.0",
       "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.13.0.tgz",
       "integrity": "sha512-tkzkY7nQhW/zC4hztlwucpT8QEZ6eUzpXDRhww/Eej4tFfO0FxQYWRyg/c5CCXa4d/f174kqeXYjuQRnhzf6dA==",
-      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@emotion/babel-plugin": "^11.12.0",
diff --git a/frontend/package.json b/frontend/package.json
index 88dbe001..b8ecd4e5 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@emotion/react": "^11.13.0",
+    "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@mui/icons-material": "^5.15.19",
     "@mui/material": "^5.16.5",
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 7d587c32..f3efc5ca 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -30,7 +30,7 @@ function App() {
           element={isLoggedIn ? <Private Component={Home} /> : <LoginPage />}
         />
         {/* <Route path="/home" element={<Private Component={Home} />} /> */}
-        {/* <Route path="/" element={isLoggedIn ? <Home/> : <LoginPage />} />         */}
+        {/* <Route path="/" element={<Home/>} />         */}
         <Route path="/login" element={<LoginPage />} />
         <Route path="/signup" element={<CreateAccountPage />} />
         <Route path="/forgot-password" element={<ForgotPasswordPage />} />
@@ -38,7 +38,7 @@ function App() {
         <Route path="/check-email" element={<CheckYourEmailPage />} />
         <Route path="/set-new-password" element={<SetNewPasswordPage />} />
         <Route path="/progress-steps" element={<ProgressStepsMain />} />
-        <Route path="/banner/create" element={<Private Component={BannerPage} />} />
+        <Route path="/banner/create" element={<BannerPage />} />
         <Route path="/popup/create" element={<Private Component={CreatePopupPage} />} />
         <Route path="/banner" element={<Private Component={BannerDefaultPage} />} />
         <Route path="/popup" element={<Private Component={PopupDefaultPage }/>} />
@@ -52,4 +52,4 @@ function App() {
   );
 }
 
-export default App;
\ No newline at end of file
+export default App;
diff --git a/frontend/src/components/BannerPageComponents/BannerLeftContent/BannerLeftContent.jsx b/frontend/src/components/BannerPageComponents/BannerLeftContent/BannerLeftContent.jsx
index cfede506..d203211c 100644
--- a/frontend/src/components/BannerPageComponents/BannerLeftContent/BannerLeftContent.jsx
+++ b/frontend/src/components/BannerPageComponents/BannerLeftContent/BannerLeftContent.jsx
@@ -1,38 +1,52 @@
-import { React } from 'react';
+import React, { useState } from 'react';
 import styles from './BannerLeftContent.module.scss';
 import DropdownList from '../../DropdownList/DropdownList';
-import { Radio } from "@mui/material";
 import CustomTextField from '../../TextFieldComponents/CustomTextField/CustomTextField';
+import RadioButton from '../../RadioButton/RadioButton';
+
+const BannerLeftContent = ({ setIsTopPosition, url, setUrl, setButtonAction, isTopPosition }) => {
 
-const BannerLeftContent = ({ setIsTopPosition, url, setUrl, setButtonAction }) => {
     const handleSetUrl = (event) => {
         setUrl(event.target.value);
-      };
-      const handleActionChange = (newAction) => {
+    };
+
+    const handleActionChange = (newAction) => {
         setButtonAction(newAction);
-      };
+    };
+
+    const handlePositionChange = (newPosition) => {
+        setIsTopPosition(newPosition);
+    };
 
     return (
         <div className={styles.container}>
             <h2>Action</h2>
-            <DropdownList 
-                actions={['No action', 'Open URL', 'Open URL in a new tab']} 
+            <DropdownList
+                actions={['No action', 'Open URL', 'Open URL in a new tab']}
                 onActionChange={handleActionChange}
             />
             <h2>Position</h2>
             <div className={styles.radioContent}>
-                <Radio onClick={() => setIsTopPosition(true)} />
-                <h3>Top (centered)</h3>
+                <RadioButton
+                    label="Top (centered)"
+                    checked={isTopPosition}
+                    onChange={() => handlePositionChange(true)}
+                />
             </div>
             <div className={styles.radioContent}>
-                <Radio onClick={() => setIsTopPosition(false)} />
-                <h3>Bottom (centered)</h3>
+                <RadioButton
+                    label="Bottom (centered)"
+                    checked={!isTopPosition}
+                    onChange={() => handlePositionChange(false)}
+                />
             </div>
-            <h2 style={{ marginBottom: 0 }}>URL</h2>
+
+            <h2 style={{ marginBottom: 0, marginTop:'1.2rem'}}>URL</h2>
             <CustomTextField
-                TextFieldWidth='241px'
+                TextFieldWidth="241px"
                 value={url}
-                onChange={handleSetUrl} />
+                onChange={handleSetUrl}
+            />
         </div>
     );
 };
diff --git a/frontend/src/components/BannerPageComponents/BannerLeftContent/BannerLeftContent.module.scss b/frontend/src/components/BannerPageComponents/BannerLeftContent/BannerLeftContent.module.scss
index fc21ec74..d9034350 100644
--- a/frontend/src/components/BannerPageComponents/BannerLeftContent/BannerLeftContent.module.scss
+++ b/frontend/src/components/BannerPageComponents/BannerLeftContent/BannerLeftContent.module.scss
@@ -15,5 +15,4 @@
     .radioContent{
         display: flex;
     }
-
 }
\ No newline at end of file
diff --git a/frontend/src/components/CheckIcon/CheckIcon.stories.js b/frontend/src/components/CheckIcon/CheckIcon.stories.js
index c0ff700c..301811b4 100644
--- a/frontend/src/components/CheckIcon/CheckIcon.stories.js
+++ b/frontend/src/components/CheckIcon/CheckIcon.stories.js
@@ -1,74 +1,74 @@
-import CheckIcon from './CheckIcon';
-
-//Storybook display settings
-export default {
-    title: 'Visuals/CheckIcon',
-    component: CheckIcon,
-    argTypes: {
-        type: {
-            options: ['outline', 'solid'],
-            control: { type: 'radio' }
-        },
-        size: {
-            options: ['small', 'medium', 'large'],
-            control: { type: 'radio' }
-        },
-        color: {
-            options: ['purple', 'black', 'green'],
-            control: { type: 'radio' }
-        }
-    },
-    parameters: {
-        layout: "centered"
-    },
-    tags: ["autodocs"]
-};
-
-//Stories for each Check circle type
-export const PurpleOutline = {
-    args: {
-        type: 'outline',
-        size: 'medium',
-        color: 'purple'
-    }
-};
-
-export const BlackOutline = {
-    args: {
-        type: 'outline',
-        size: 'medium',
-        color: 'black'
-    }
-};
-
-export const GreenOutline = {
-    args: {
-        type: 'outline',
-        size: 'medium',
-        color: 'green'
-    }
-};
-
-export const PurpleSolid = {
-    args: {
-        type: 'solid',
-        size: 'medium',
-        color: 'purple'
-    }
-};
-
-export const BlackSolid = {
-    args: {
-        type: 'solid',
-        size: 'medium',
-        color: 'black'
-    }
-};
-
-export const GreenSolid = {
-    args: {
-        type: 'solid',
-        size: 'medium',
-        color: 'green'
-    }
-};
\ No newline at end of file
+import CheckIcon from './CheckIcon';
+
+//Storybook display settings
+export default {
+  title: "Visuals/CheckIcon",
+  component: CheckIcon,
+  argTypes: {
+    type: {
+      options: ["outline", "solid"],
+      control: { type: "radio" },
+    },
+    size: {
+      options: ["small", "medium", "large"],
+      control: { type: "radio" },
+    },
+    color: {
+      options: ["purple", "black", "green"],
+      control: { type: "radio" },
+    },
+  },
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+//Stories for each Check circle type
+export const PurpleOutline = {
+  args: {
+    type: "outline",
+    size: "medium",
+    color: "purple",
+  },
+};
+
+export const BlackOutline = {
+  args: {
+    type: "outline",
+    size: "medium",
+    color: "black",
+  },
+};
+
+export const GreenOutline = {
+  args: {
+    type: "outline",
+    size: "medium",
+    color: "green",
+  },
+};
+
+export const PurpleSolid = {
+  args: {
+    type: "solid",
+    size: "medium",
+    color: "purple",
+  },
+};
+
+export const BlackSolid = {
+  args: {
+    type: "solid",
+    size: "medium",
+    color: "black",
+  },
+};
+
+export const GreenSolid = {
+  args: {
+    type: "solid",
+    size: "medium",
+    color: "green",
+  },
+};
diff --git a/frontend/src/components/RadioButton/RadioButton.jsx b/frontend/src/components/RadioButton/RadioButton.jsx
new file mode 100644
index 00000000..2d51a526
--- /dev/null
+++ b/frontend/src/components/RadioButton/RadioButton.jsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Radio } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import './RadioButtonStyles.css';
+
+const CustomRadioIcon = styled('span')({
+    borderRadius: '50%',
+    width: 16,
+    height: 16,
+    boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
+  });
+
+const CustomRadioCheckedIcon = styled('span')({
+    borderRadius: '50%',
+    backgroundColor: 'var(--main-purple)',
+  '&::before': {
+    display: 'block',
+    width: 16,
+    height: 16,
+    backgroundImage: 'radial-gradient(#fff, #fff 28%, transparent 32%)',
+    content: '""',
+  },
+});
+
+function RadioButton({ 
+    id, 
+    name, 
+    value, 
+    label, 
+    onChange, 
+    onClick, 
+    size = 'small', 
+    checked = false, 
+    enabled = true 
+}) {
+
+  const handleChange = (event) => {
+    if (checked) {
+      onChange({ target: { name, value: '' } });
+    } else {
+      onChange(event);
+    }
+  };
+
+  return (
+    <div className={`radio-button`}>
+      <Radio
+        id={id}
+        name={name}
+        value={value}
+        disabled={!enabled}
+        onChange={handleChange}
+        size={size}
+        checkedIcon={<CustomRadioCheckedIcon />}
+        icon={<CustomRadioIcon />}
+        checked={checked}
+        onClick={onClick}
+        sx={{padding:'0'}}
+      />
+      {label && <label htmlFor={id}>{label}</label>}
+    </div>
+  );
+}
+
+RadioButton.propTypes = {
+  id: PropTypes.string,
+  name: PropTypes.string,
+  value: PropTypes.string,
+  label: PropTypes.string,
+  enabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  color: PropTypes.string,
+  checked: PropTypes.bool,
+};
+
+export default RadioButton;
diff --git a/frontend/src/components/RadioButton/RadioButtonStyles.css b/frontend/src/components/RadioButton/RadioButtonStyles.css
new file mode 100644
index 00000000..196fb23a
--- /dev/null
+++ b/frontend/src/components/RadioButton/RadioButtonStyles.css
@@ -0,0 +1,30 @@
+.radio-button {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    white-space: nowrap;
+    margin-bottom: 13px;
+}
+
+input {
+    accent-color: var(--main-purple);
+}
+
+input:active {
+    outline: 5px solid var(--light-border-color);
+    border-radius: 5px;
+}
+
+.radio-primary input {
+    accent-color: var(--main-purple);
+}
+
+.radio-secondary input {
+    accent-color: var(--light-gray);
+}
+
+label {
+    color: var(--main-text-color);
+    margin-left: 8px;
+    white-space: nowrap; 
+}
diff --git a/frontend/src/scenes/bannerPage/BannerPage.jsx b/frontend/src/scenes/bannerPage/BannerPage.jsx
index 949260a2..ff8b4b01 100644
--- a/frontend/src/scenes/bannerPage/BannerPage.jsx
+++ b/frontend/src/scenes/bannerPage/BannerPage.jsx
@@ -93,6 +93,7 @@ const BannerPage = () => {
                     leftContent={() =>
                         <BannerLeftContent
                             setIsTopPosition={setIsTopPosition}
+                            isTopPosition={isTopPosition}
                             url={url}
                             setUrl={setUrl}
                             setButtonAction={setButtonAction}