diff --git a/lib/components/common/StyledCard.tsx b/lib/components/common/StyledCard.tsx
index a9bc14f..6244fdb 100644
--- a/lib/components/common/StyledCard.tsx
+++ b/lib/components/common/StyledCard.tsx
@@ -4,9 +4,9 @@ import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import CardActionArea from '@mui/material/CardActionArea';
 import Typography from '@mui/material/Typography';
-import Radio from '@mui/material/Radio';
 import {useRadioGroup} from '@mui/material/RadioGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
+import StyledRadio from './StyledRadio';
 import {vars} from '../../theme/variables';
 
 const {baseWhite, primary50, primary600, primary800, gray100, gray300, gray500, gray700} = vars
@@ -70,7 +70,7 @@ const StyledCard: React.FC<StyledCardProps> = ({value, isSuggested, selectedValu
                             }
                         }}
                     >
-                        <FormControlLabel value={value} control={<Radio size="small" checked={selectedValue === value}
+                        <FormControlLabel value={value} control={<StyledRadio checked={selectedValue === value}
                                                                         onChange={handleRadioChange}/>} label={value}/>
                         {isSuggested && <Typography variant="caption" sx={{color: gray500}}>
                             Suggested
diff --git a/lib/components/common/StyledRadio.tsx b/lib/components/common/StyledRadio.tsx
new file mode 100644
index 0000000..94c6697
--- /dev/null
+++ b/lib/components/common/StyledRadio.tsx
@@ -0,0 +1,35 @@
+import { styled } from '@mui/material/styles';
+import { Radio, RadioProps } from '@mui/material';
+import { RadioSelected } from '../../icons';
+import { vars } from '../../theme/variables';
+
+const {baseWhite, primary100, primary600, gray100, gray300} = vars;
+
+const DefaultIcon = styled('span')(() => ({
+    borderRadius: '50%',
+    width: 16,
+    height: 16,
+    backgroundColor: baseWhite,
+    border: `1px solid ${gray300}`,
+    'input:hover ~ &': {
+        backgroundColor: primary100,
+        border: `1px solid ${primary600}`
+    },
+    'input:disabled ~ &': {
+        boxShadow: 'none',
+        border: `1px solid ${gray300}`,
+        background: gray100
+    },
+}));
+
+export default function StyledRadio(props: RadioProps) {
+    return (
+        <Radio
+            disableRipple
+            color="default"
+            checkedIcon={<RadioSelected />}
+            icon={<DefaultIcon />}
+            {...props}
+        />
+    );
+}
\ No newline at end of file
diff --git a/lib/components/steps/Suggestions/SuggestionDetailUI.tsx b/lib/components/steps/Suggestions/SuggestionDetailUI.tsx
index b2c2d8d..da08175 100644
--- a/lib/components/steps/Suggestions/SuggestionDetailUI.tsx
+++ b/lib/components/steps/Suggestions/SuggestionDetailUI.tsx
@@ -1,14 +1,16 @@
-import {Box, Checkbox, Typography} from '@mui/material';
-import {ArrowIcon, CheckboxDefault, CheckboxSelected, GlobeIcon} from '../../../icons';
+import {Box, Typography} from '@mui/material';
+import {ArrowIcon, GlobeIcon} from '../../../icons';
 import CdeDetails from '../../common/CdeDetails.tsx';
 import {vars} from '../../../theme/variables.ts';
 import {Entity} from "../../../models.ts";
 import {getCleanUrl} from "../../../helpers/functions.ts";
+import StyledRadio from '../../common/StyledRadio.tsx';
 
 const {
     gray900,
     gray200,
-    gray500
+    gray500,
+    gray300
 } = vars;
 
 type SuggestionDetailUIProps = {
@@ -42,8 +44,11 @@ function SuggestionDetailUI({entity}: SuggestionDetailUIProps) {
 
     return (
         <Box gap='1.5rem' display='flex' alignItems='start'>
-            <Box height='2.625rem' display='flex' alignItems='center'>
-                <Checkbox sx={{mt: '0rem'}} disableRipple icon={<CheckboxDefault/>} checkedIcon={<CheckboxSelected/>}/>
+            <Box height='2.625rem' display='flex' alignItems='center' sx={{"& .MuiRadio-root": {
+                                padding: 0,
+                                color: gray300
+                            },}}>
+                <StyledRadio/>
             </Box>
             <Box flex={1}>
                 <Box gap='1.5rem' display='flex' alignItems='center' mb='0.75rem'>
diff --git a/lib/icons/index.tsx b/lib/icons/index.tsx
index 2ed031f..a80f34e 100644
--- a/lib/icons/index.tsx
+++ b/lib/icons/index.tsx
@@ -213,4 +213,12 @@ export const PlusIcon = () => (
   <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
     <path d="M17.5 10C17.5 10.1658 17.4342 10.3247 17.3169 10.4419C17.1997 10.5592 17.0408 10.625 16.875 10.625H10.625V16.875C10.625 17.0408 10.5592 17.1997 10.4419 17.3169C10.3247 17.4342 10.1658 17.5 10 17.5C9.83424 17.5 9.67527 17.4342 9.55806 17.3169C9.44085 17.1997 9.375 17.0408 9.375 16.875V10.625H3.125C2.95924 10.625 2.80027 10.5592 2.68306 10.4419C2.56585 10.3247 2.5 10.1658 2.5 10C2.5 9.83424 2.56585 9.67527 2.68306 9.55806C2.80027 9.44085 2.95924 9.375 3.125 9.375H9.375V3.125C9.375 2.95924 9.44085 2.80027 9.55806 2.68306C9.67527 2.56585 9.83424 2.5 10 2.5C10.1658 2.5 10.3247 2.56585 10.4419 2.68306C10.5592 2.80027 10.625 2.95924 10.625 3.125V9.375H16.875C17.0408 9.375 17.1997 9.44085 17.3169 9.55806C17.4342 9.67527 17.5 9.83424 17.5 10Z" fill="#676C74"/>
   </svg>
+)
+
+export const RadioSelected = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <rect x="0.5" y="0.5" width="15" height="15" rx="7.5" fill="#EEF2FC"/>
+    <rect x="0.5" y="0.5" width="15" height="15" rx="7.5" stroke="#19418F"/>
+    <circle cx="8" cy="8" r="3" fill="#19418F"/>
+  </svg>
 )
\ No newline at end of file