diff --git a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.tsx b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.tsx
index 142389eb3d..c3508fe349 100644
--- a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.tsx
+++ b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.tsx
@@ -24,6 +24,7 @@ export const LegalValueLabel = ({
             <FormControlLabel
                 value={legal.value}
                 control={control}
+                sx={{ width: '100%' }}
                 label={
                     <>
                         <StyledValue>
diff --git a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx
index e120d4c0ed..861aff745c 100644
--- a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx
+++ b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx
@@ -1,7 +1,7 @@
 import type React from 'react';
 import { useState } from 'react';
 import { ConstraintFormHeader } from '../ConstraintFormHeader/ConstraintFormHeader';
-import { FormControl, RadioGroup, Radio, Alert } from '@mui/material';
+import { FormControl, RadioGroup, Radio, Alert, styled } from '@mui/material';
 import { ConstraintValueSearch } from 'component/common/ConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { useThemeStyles } from 'themes/themeStyles';
@@ -26,6 +26,17 @@ interface ISingleLegalValueProps {
     constraintValue: string;
 }
 
+const StyledFieldsetContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: theme.spacing(1),
+    padding: theme.spacing(2),
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadiusMedium,
+    maxHeight: '378px',
+    overflow: 'auto',
+}));
+
 export const SingleLegalValue = ({
     setValue,
     value,
@@ -80,25 +91,28 @@ export const SingleLegalValue = ({
             <ConditionallyRender
                 condition={Boolean(legalValues.length)}
                 show={
-                    <FormControl component='fieldset'>
-                        <RadioGroup
-                            aria-label='selected-value'
-                            name='selected'
-                            value={value}
-                            onChange={(e) => {
-                                setError('');
-                                setValue(e.target.value);
-                            }}
-                        >
-                            {filteredValues.map((match) => (
-                                <LegalValueLabel
-                                    key={match.value}
-                                    legal={match}
-                                    control={<Radio />}
-                                />
-                            ))}
-                        </RadioGroup>
-                    </FormControl>
+                    <StyledFieldsetContainer>
+                        <FormControl component='fieldset'>
+                            <RadioGroup
+                                aria-label='selected-value'
+                                name='selected'
+                                value={value}
+                                sx={{ gap: (theme) => theme.spacing(0.5) }}
+                                onChange={(e) => {
+                                    setError('');
+                                    setValue(e.target.value);
+                                }}
+                            >
+                                {filteredValues.map((match) => (
+                                    <LegalValueLabel
+                                        key={match.value}
+                                        legal={match}
+                                        control={<Radio />}
+                                    />
+                                ))}
+                            </RadioGroup>
+                        </FormControl>
+                    </StyledFieldsetContainer>
                 }
                 elseShow={
                     <p>No valid legal values available for this operator.</p>