diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx
index f7d3b141ea..fb15f59cb5 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx
@@ -378,14 +378,15 @@ export const EditableConstraint: FC<Props> = ({
                             {localConstraint.caseInsensitive ? 'Aa' : 'A/a'}
                         </StyledButton>
                     ) : null}
+
+                    {!input.includes('LEGAL_VALUES') && (
+                        <ValueList
+                            values={localConstraint.values}
+                            removeValue={removeValue}
+                            setValues={setValuesWithRecord}
+                        />
+                    )}
                 </ConstraintDetails>
-                {!input.includes('LEGAL_VALUES') && (
-                    <ValueList
-                        values={localConstraint.values}
-                        removeValue={removeValue}
-                        setValues={setValuesWithRecord}
-                    />
-                )}
 
                 <HtmlTooltip title='Delete constraint' arrow>
                     <IconButton type='button' size='small' onClick={onDelete}>
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/ValueList.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/ValueList.tsx
index f7b953d9b6..410cb113af 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/ValueList.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/ValueList.tsx
@@ -88,18 +88,19 @@ const StyledPopover = styled(Popover)(({ theme }) => ({
         borderRadius: theme.shape.borderRadiusLarge,
         border: `1px solid ${theme.palette.divider}`,
         padding: theme.spacing(2),
-        width: '300px',
+        width: '250px',
     },
 }));
 
 const StyledTextField = styled(TextField)(({ theme }) => ({
-    width: '100%',
-    marginBottom: theme.spacing(1),
+    flexGrow: 1,
 }));
 
-const ButtonContainer = styled('div')(({ theme }) => ({
+const InputRow = styled('div')(({ theme }) => ({
     display: 'flex',
-    justifyContent: 'flex-end',
+    gap: theme.spacing(1),
+    alignItems: 'start',
+    width: '100%',
 }));
 
 const ErrorMessage = styled('div')(({ theme }) => ({
@@ -166,39 +167,38 @@ const AddValues = forwardRef<HTMLButtonElement, AddValuesProps>(
                     onClose={() => setOpen(false)}
                     anchorOrigin={{
                         vertical: 'bottom',
-                        horizontal: 'center',
+                        horizontal: 'left',
                     }}
                     transformOrigin={{
                         vertical: 'top',
-                        horizontal: 'center',
+                        horizontal: 'left',
                     }}
                 >
                     <div>
-                        <StyledTextField
-                            label='Values'
-                            placeholder='value1, value2, value3...'
-                            value={inputValues}
-                            onChange={(e) => {
-                                setInputValues(e.target.value);
-                                setError('');
-                            }}
-                            onKeyPress={handleKeyPress}
-                            error={Boolean(error)}
-                            helperText={error}
-                            size='small'
-                            fullWidth
-                            autoFocus
-                        />
-                        <ButtonContainer>
+                        {error && <ErrorMessage>{error}</ErrorMessage>}
+                        <InputRow>
+                            <StyledTextField
+                                placeholder='Enter value'
+                                value={inputValues}
+                                onChange={(e) => {
+                                    setInputValues(e.target.value);
+                                    setError('');
+                                }}
+                                onKeyPress={handleKeyPress}
+                                size='small'
+                                variant='standard'
+                                fullWidth
+                                autoFocus
+                            />
                             <Button
-                                variant='contained'
+                                variant='text'
                                 color='primary'
                                 onClick={handleAdd}
                                 disabled={!inputValues.trim()}
                             >
                                 Add
                             </Button>
-                        </ButtonContainer>
+                        </InputRow>
                     </div>
                 </StyledPopover>
             </>