diff --git a/frontend/src/component/feature/variant/AddVariant/AddVariant.jsx b/frontend/src/component/feature/variant/AddVariant/AddVariant.jsx
index a83fec6a09..301565744f 100644
--- a/frontend/src/component/feature/variant/AddVariant/AddVariant.jsx
+++ b/frontend/src/component/feature/variant/AddVariant/AddVariant.jsx
@@ -16,6 +16,7 @@ import { modalStyles, trim } from '../../../common/util';
 import { weightTypes } from '../enums';
 import OverrideConfig from './OverrideConfig/OverrideConfig';
 import { useCommonStyles } from '../../../../common.styles';
+import ConditionallyRender from '../../../common/ConditionallyRender';
 
 const payloadOptions = [
     { key: 'string', label: 'string' },
@@ -137,6 +138,7 @@ const AddVariant = ({
                 if (i === index) {
                     o[e.target.name] = e.target.value;
                 }
+
                 return o;
             })
         );
@@ -264,16 +266,18 @@ const AddVariant = ({
                         />
                     </Grid>
                 </Grid>
-                {overrides.length > 0 && (
-                    <p style={{ marginBottom: '.5rem' }}>
-                        <strong>Overrides </strong>
-                        <Icon
-                            name="info"
-                            title="Here you can specify which users that should get this variant."
-                        />
-                    </p>
-                )}
-
+                <ConditionallyRender
+                    condition={overrides.length > 0}
+                    show={
+                        <p style={{ marginBottom: '.5rem' }}>
+                            <strong>Overrides </strong>
+                            <Icon
+                                name="info"
+                                title="Here you can specify which users should get this variant."
+                            />
+                        </p>
+                    }
+                />
                 <OverrideConfig
                     overrides={overrides}
                     removeOverride={removeOverride}
@@ -281,7 +285,7 @@ const AddVariant = ({
                     updateOverrideValues={updateOverrideValues}
                     updateValues={updateOverrideValues}
                 />
-                <Button onClick={onAddOverride}>Add override</Button>
+                <Button onClick={onAddOverride}>Add override</Button>{' '}
             </form>
         </Dialog>
     );
@@ -294,6 +298,7 @@ AddVariant.propTypes = {
     validateName: PropTypes.func.isRequired,
     editVariant: PropTypes.object,
     title: PropTypes.string,
+    uiConfig: PropTypes.object,
 };
 
 export default AddVariant;
diff --git a/frontend/src/component/feature/variant/AddVariant/OverrideConfig/OverrideConfig.jsx b/frontend/src/component/feature/variant/AddVariant/OverrideConfig/OverrideConfig.jsx
index 5aa035f5e1..ab79ae4f37 100644
--- a/frontend/src/component/feature/variant/AddVariant/OverrideConfig/OverrideConfig.jsx
+++ b/frontend/src/component/feature/variant/AddVariant/OverrideConfig/OverrideConfig.jsx
@@ -2,13 +2,13 @@ import { connect } from 'react-redux';
 import classnames from 'classnames';
 
 import PropTypes from 'prop-types';
-import { Grid, IconButton, Icon } from '@material-ui/core';
+import { Grid, IconButton, Icon, TextField } from '@material-ui/core';
 import MySelect from '../../../../common/select';
 import InputListField from '../../../../common/input-list-field';
-import { selectStyles } from '../../../../common';
 import ConditionallyRender from '../../../../common/ConditionallyRender/ConditionallyRender';
 import { useCommonStyles } from '../../../../../common.styles';
 import { useStyles } from './OverrideConfig.styles.js';
+import { Autocomplete } from '@material-ui/lab';
 
 const OverrideConfig = ({
     overrides,
@@ -28,18 +28,14 @@ const OverrideConfig = ({
         updateOverrideValues(i, values);
     };
 
-    const updateSelectValues = i => values => {
-        updateOverrideValues(i, values ? values.map(v => v.value) : undefined);
+    const updateSelectValues = i => (e, options) => {
+        updateOverrideValues(i, options ? options : []);
     };
 
-    const mapSelectValues = (values = []) =>
-        values.map(v => ({ label: v, value: v }));
-
     return overrides.map((o, i) => {
         const legalValues =
             contextDefinitions.find(c => c.name === o.contextName)
                 .legalValues || [];
-        const options = legalValues.map(v => ({ value: v, label: v, key: v }));
 
         return (
             <Grid container key={`override=${i}`} alignItems="center">
@@ -59,16 +55,27 @@ const OverrideConfig = ({
                     <ConditionallyRender
                         condition={legalValues && legalValues.length > 0}
                         show={
-                            <div style={{ paddingTop: '12px' }}>
-                                <MySelect
-                                    key={`override-select=${i}`}
-                                    className={selectStyles}
-                                    classes={{ root: commonStyles.fullWidth }}
-                                    value={mapSelectValues(o.values)}
-                                    options={options}
-                                    onChange={updateSelectValues(i)}
-                                />
-                            </div>
+                            <Autocomplete
+                                multiple
+                                id={`override-select-${i}`}
+                                getOptionSelected={(option, value) => {
+                                    return option === value;
+                                }}
+                                options={legalValues}
+                                onChange={updateSelectValues(i)}
+                                getOptionLabel={option => option}
+                                defaultValue={o.values}
+                                value={o.values}
+                                filterSelectedOptions
+                                size="small"
+                                renderInput={params => (
+                                    <TextField
+                                        {...params}
+                                        variant="outlined"
+                                        label="Legal values"
+                                    />
+                                )}
+                            />
                         }
                         elseShow={
                             <InputListField
diff --git a/frontend/src/component/feature/variant/__tests__/__snapshots__/update-variant-component-test.jsx.snap b/frontend/src/component/feature/variant/__tests__/__snapshots__/update-variant-component-test.jsx.snap
index adf5ecb1ab..d181ae49b1 100644
--- a/frontend/src/component/feature/variant/__tests__/__snapshots__/update-variant-component-test.jsx.snap
+++ b/frontend/src/component/feature/variant/__tests__/__snapshots__/update-variant-component-test.jsx.snap
@@ -568,7 +568,7 @@ exports[`renders correctly with without variants 1`] = `
 </section>
 `;
 
-exports[`renders correctly with without variants and no permissions 1`] = `
+exports[`renders correctly without variants and no permissions 1`] = `
 <section
   style={
     Object {
diff --git a/frontend/src/component/feature/variant/__tests__/update-variant-component-test.jsx b/frontend/src/component/feature/variant/__tests__/update-variant-component-test.jsx
index 78977b9d48..c6a4aefdcd 100644
--- a/frontend/src/component/feature/variant/__tests__/update-variant-component-test.jsx
+++ b/frontend/src/component/feature/variant/__tests__/update-variant-component-test.jsx
@@ -5,49 +5,67 @@ import UpdateVariant from './../update-variant-component';
 import renderer from 'react-test-renderer';
 import { weightTypes } from '../enums';
 import theme from '../../../../themes/main-theme';
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
 
 jest.mock(
     '../AddVariant/OverrideConfig/OverrideConfig.jsx',
     () => 'OverrideConfig'
 );
 
+const mockStore = {
+    uiConfig: {
+        toJS: () => ({
+            flags: {
+                P: true,
+            },
+        }),
+    },
+};
+
+const mockReducer = state => state;
+
 test('renders correctly with without variants', () => {
     const tree = renderer.create(
-        <ThemeProvider theme={theme}>
-            <MemoryRouter>
-                <UpdateVariant
-                    key={0}
-                    variants={[]}
-                    addVariant={jest.fn()}
-                    removeVariant={jest.fn()}
-                    updateVariant={jest.fn()}
-                    stickinessOptions={['default']}
-                    updateStickiness={jest.fn()}
-                    editable
-                />
-            </MemoryRouter>
-        </ThemeProvider>
+        <Provider store={createStore(mockReducer, mockStore)}>
+            <ThemeProvider theme={theme}>
+                <MemoryRouter>
+                    <UpdateVariant
+                        key={0}
+                        variants={[]}
+                        addVariant={jest.fn()}
+                        removeVariant={jest.fn()}
+                        updateVariant={jest.fn()}
+                        stickinessOptions={['default']}
+                        updateStickiness={jest.fn()}
+                        editable
+                    />
+                </MemoryRouter>
+            </ThemeProvider>
+        </Provider>
     );
 
     expect(tree).toMatchSnapshot();
 });
 
-test('renders correctly with without variants and no permissions', () => {
+test('renders correctly without variants and no permissions', () => {
     const tree = renderer.create(
-        <ThemeProvider theme={theme}>
-            <MemoryRouter>
-                <UpdateVariant
-                    key={0}
-                    variants={[]}
-                    addVariant={jest.fn()}
-                    removeVariant={jest.fn()}
-                    updateVariant={jest.fn()}
-                    stickinessOptions={['default']}
-                    updateStickiness={jest.fn()}
-                    editable
-                />
-            </MemoryRouter>
-        </ThemeProvider>
+        <Provider store={createStore(mockReducer, mockStore)}>
+            <ThemeProvider theme={theme}>
+                <MemoryRouter>
+                    <UpdateVariant
+                        key={0}
+                        variants={[]}
+                        addVariant={jest.fn()}
+                        removeVariant={jest.fn()}
+                        updateVariant={jest.fn()}
+                        stickinessOptions={['default']}
+                        updateStickiness={jest.fn()}
+                        editable
+                    />
+                </MemoryRouter>
+            </ThemeProvider>
+        </Provider>
     );
 
     expect(tree).toMatchSnapshot();
@@ -94,20 +112,22 @@ test('renders correctly with with variants', () => {
         createdAt: '2018-02-04T20:27:52.127Z',
     };
     const tree = renderer.create(
-        <ThemeProvider theme={theme}>
-            <MemoryRouter>
-                <UpdateVariant
-                    key={0}
-                    variants={featureToggle.variants}
-                    addVariant={jest.fn()}
-                    removeVariant={jest.fn()}
-                    updateVariant={jest.fn()}
-                    stickinessOptions={['default']}
-                    updateStickiness={jest.fn()}
-                    editable
-                />
-            </MemoryRouter>
-        </ThemeProvider>
+        <Provider store={createStore(mockReducer, mockStore)}>
+            <ThemeProvider theme={theme}>
+                <MemoryRouter>
+                    <UpdateVariant
+                        key={0}
+                        variants={featureToggle.variants}
+                        addVariant={jest.fn()}
+                        removeVariant={jest.fn()}
+                        updateVariant={jest.fn()}
+                        stickinessOptions={['default']}
+                        updateStickiness={jest.fn()}
+                        editable
+                    />
+                </MemoryRouter>
+            </ThemeProvider>
+        </Provider>
     );
 
     expect(tree).toMatchSnapshot();