diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/AddValuesWidget.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/AddValuesWidget.tsx
index 8c8a4535c5..5ea4cc1682 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/AddValuesWidget.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/AddValuesWidget.tsx
@@ -9,8 +9,10 @@ import {
     useState,
 } from 'react';
 import { parseParameterStrings } from 'utils/parseParameter';
+import { baseChipStyles } from './ValueList';
 
 const AddValuesButton = styled('button')(({ theme }) => ({
+    ...baseChipStyles(theme),
     color: theme.palette.primary.main,
     svg: {
         fill: theme.palette.primary.main,
@@ -26,13 +28,7 @@ const AddValuesButton = styled('button')(({ theme }) => ({
     alignItems: 'center',
     padding: theme.spacing(0.5, 1.5, 0.5, 1.5),
     height: 'auto',
-    transition: 'all 0.3s ease',
-    outline: `1px solid #0000`,
-    background: theme.palette.background.elevation1,
-    ':hover, :focus-visible': {
-        background: theme.palette.background.elevation1,
-        outlineColor: theme.palette.secondary.dark,
-    },
+    cursor: 'pointer',
 }));
 
 const StyledPopover = styled(Popover)(({ theme }) => ({
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/ValueList.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/ValueList.tsx
index 10bb1c9d08..af696590c3 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/ValueList.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/ValueList.tsx
@@ -1,5 +1,5 @@
 import Clear from '@mui/icons-material/Clear';
-import { Chip, type ChipProps, styled } from '@mui/material';
+import { Chip, type ChipProps, styled, type Theme } from '@mui/material';
 import { type FC, forwardRef, type PropsWithChildren, useRef } from 'react';
 
 const ValueListWrapper = styled('div')(({ theme }) => ({
@@ -14,16 +14,26 @@ const StyledList = styled('ul')({
     display: 'contents',
 });
 
+export const baseChipStyles = (theme: Theme) => ({
+    ':hover': { background: theme.palette.secondary.light },
+    ':focus-visible': {
+        background: theme.palette.background.elevation1,
+        outlineColor: theme.palette.secondary.dark,
+    },
+    background: theme.palette.background.elevation1,
+    color: theme.palette.text.primary,
+    height: 'auto',
+    outline: `1px solid #0000`,
+    transition: 'all 0.3s ease',
+});
+
 const ValueChipBase = styled(
     forwardRef<HTMLDivElement, ChipProps>((props, ref) => (
         <Chip size='small' {...props} ref={ref} />
     )),
 )(({ theme }) => ({
-    transition: 'all 0.3s ease',
-    outline: `1px solid #0000`,
-    background: theme.palette.secondary.light,
-    color: theme.palette.secondary.dark,
-    border: `1px solid ${theme.palette.secondary.border}`,
+    ...baseChipStyles(theme),
+    color: theme.palette.text.primary,
     padding: 0,
     height: 'auto',
     '& .MuiChip-label': {
@@ -34,12 +44,6 @@ const ValueChipBase = styled(
     '& .MuiChip-deleteIcon': {
         marginRight: theme.spacing(1),
     },
-    ':hover, :focus-visible': {
-        background: theme.palette.secondary.light,
-    },
-    ':focus-visible': {
-        outlineColor: theme.palette.secondary.dark,
-    },
 }));
 
 const ValueChip = styled(ValueChipBase)(({ theme }) => ({