diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx
deleted file mode 100644
index e6d387c98d..0000000000
--- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { ConstraintIcon } from 'component/common/LegacyConstraintAccordion/ConstraintIcon';
-import type { IConstraint } from 'interfaces/strategy';
-import { ConstraintAccordionViewHeaderInfo } from './ConstraintAccordionViewHeaderInfo';
-import { ConstraintAccordionHeaderActions } from '../../ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions';
-import { styled } from '@mui/system';
-import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
-
-interface IConstraintAccordionViewHeaderProps {
-    constraint: IConstraint;
-    onDelete?: () => void;
-    onEdit?: () => void;
-    singleValue: boolean;
-    expanded: boolean;
-    allowExpand: (shouldExpand: boolean) => void;
-    compact?: boolean;
-    disabled?: boolean;
-}
-
-const StyledContainer = styled('div')(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    width: '100%',
-    [theme.breakpoints.down('sm')]: {
-        flexDirection: 'column',
-        alignItems: 'center',
-        position: 'relative',
-    },
-}));
-
-/**
- * @deprecated use NewConstraintAccordion components
- */
-export const ConstraintAccordionViewHeader = ({
-    constraint,
-    onEdit,
-    onDelete,
-    singleValue,
-    allowExpand,
-    expanded,
-    compact,
-    disabled,
-}: IConstraintAccordionViewHeaderProps) => {
-    const { context } = useUnleashContext();
-    const { contextName } = constraint;
-
-    const disableEdit = !context
-        .map((contextDefinition) => contextDefinition.name)
-        .includes(contextName);
-
-    return (
-        <StyledContainer>
-            <ConstraintIcon compact={compact} disabled={disabled} />
-            <ConstraintAccordionViewHeaderInfo
-                constraint={constraint}
-                singleValue={singleValue}
-                allowExpand={allowExpand}
-                expanded={expanded}
-                disabled={disabled}
-            />
-            <ConstraintAccordionHeaderActions
-                onEdit={onEdit}
-                onDelete={onDelete}
-                disableEdit={disableEdit}
-            />
-        </StyledContainer>
-    );
-};
diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo.tsx b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo.tsx
deleted file mode 100644
index e2eaaf71c0..0000000000
--- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { styled, Tooltip } from '@mui/material';
-import { ConstraintViewHeaderOperator } from './ConstraintViewHeaderOperator';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { ConstraintAccordionViewHeaderSingleValue } from './ConstraintAccordionViewHeaderSingleValue';
-import { ConstraintAccordionViewHeaderMultipleValues } from './ConstraintAccordionViewHeaderMultipleValues';
-import type { IConstraint } from 'interfaces/strategy';
-
-const StyledHeaderText = styled('span')(({ theme }) => ({
-    display: '-webkit-box',
-    WebkitLineClamp: 3,
-    WebkitBoxOrient: 'vertical',
-    overflow: 'hidden',
-    maxWidth: '100px',
-    minWidth: '100px',
-    marginRight: '10px',
-    marginTop: 'auto',
-    marginBottom: 'auto',
-    wordBreak: 'break-word',
-    fontSize: theme.fontSizes.smallBody,
-    [theme.breakpoints.down(710)]: {
-        textAlign: 'center',
-        padding: theme.spacing(1, 0),
-        marginRight: 'inherit',
-        maxWidth: 'inherit',
-    },
-}));
-
-const StyledHeaderWrapper = styled('div')(({ theme }) => ({
-    display: 'flex',
-    width: '100%',
-    justifyContent: 'space-between',
-    borderRadius: theme.spacing(1),
-}));
-
-const StyledHeaderMetaInfo = styled('div')(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'stretch',
-    marginLeft: theme.spacing(1),
-    [theme.breakpoints.down('sm')]: {
-        marginLeft: 0,
-        flexDirection: 'column',
-        alignItems: 'center',
-        width: '100%',
-    },
-}));
-
-interface ConstraintAccordionViewHeaderMetaInfoProps {
-    constraint: IConstraint;
-    singleValue: boolean;
-    expanded: boolean;
-    allowExpand: (shouldExpand: boolean) => void;
-    disabled?: boolean;
-    maxLength?: number;
-}
-
-/**
- * @deprecated use NewConstraintAccordion components
- */
-export const ConstraintAccordionViewHeaderInfo = ({
-    constraint,
-    singleValue,
-    allowExpand,
-    expanded,
-    disabled = false,
-    maxLength = 112, //The max number of characters in the values text for NOT allowing expansion
-}: ConstraintAccordionViewHeaderMetaInfoProps) => {
-    return (
-        <StyledHeaderWrapper>
-            <StyledHeaderMetaInfo>
-                <Tooltip title={constraint.contextName} arrow>
-                    <StyledHeaderText
-                        sx={(theme) => ({
-                            color: disabled
-                                ? theme.palette.text.secondary
-                                : 'inherit',
-                        })}
-                    >
-                        {constraint.contextName}
-                    </StyledHeaderText>
-                </Tooltip>
-                <ConstraintViewHeaderOperator
-                    constraint={constraint}
-                    disabled={disabled}
-                />
-                <ConditionallyRender
-                    condition={singleValue}
-                    show={
-                        <ConstraintAccordionViewHeaderSingleValue
-                            constraint={constraint}
-                            allowExpand={allowExpand}
-                            disabled={disabled}
-                        />
-                    }
-                    elseShow={
-                        <ConstraintAccordionViewHeaderMultipleValues
-                            constraint={constraint}
-                            expanded={expanded}
-                            allowExpand={allowExpand}
-                            maxLength={maxLength}
-                            disabled={disabled}
-                        />
-                    }
-                />
-            </StyledHeaderMetaInfo>
-        </StyledHeaderWrapper>
-    );
-};
diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderMultipleValues.tsx b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderMultipleValues.tsx
deleted file mode 100644
index 3c4d979e55..0000000000
--- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderMultipleValues.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { styled } from '@mui/material';
-import { useEffect, useMemo, useState } from 'react';
-import type { IConstraint } from 'interfaces/strategy';
-
-const StyledValuesSpan = styled('span')(({ theme }) => ({
-    display: '-webkit-box',
-    WebkitLineClamp: 2,
-    WebkitBoxOrient: 'vertical',
-    overflow: 'hidden',
-    wordBreak: 'break-word',
-    fontSize: theme.fontSizes.smallBody,
-    margin: 'auto 0',
-    [theme.breakpoints.down('sm')]: {
-        margin: theme.spacing(1, 0),
-        textAlign: 'center',
-    },
-}));
-
-interface ConstraintSingleValueProps {
-    constraint: IConstraint;
-    expanded: boolean;
-    maxLength: number;
-    allowExpand: (shouldExpand: boolean) => void;
-    disabled?: boolean;
-}
-
-const StyledHeaderValuesContainerWrapper = styled('div')(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'stretch',
-    margin: 'auto 0',
-}));
-
-const StyledHeaderValuesContainer = styled('div')(({ theme }) => ({
-    display: 'flex',
-    justifyContent: 'stretch',
-    margin: 'auto 0',
-    flexDirection: 'column',
-    marginLeft: theme.spacing(1),
-    [theme.breakpoints.down('sm')]: {
-        marginLeft: 0,
-    },
-}));
-
-const StyledHeaderValuesExpand = styled('p')(({ theme }) => ({
-    fontSize: theme.fontSizes.smallBody,
-    marginTop: theme.spacing(0.5),
-    color: theme.palette.links,
-    [theme.breakpoints.down('sm')]: {
-        textAlign: 'center',
-    },
-}));
-
-/**
- * @deprecated use NewConstraintAccordion components
- */
-export const ConstraintAccordionViewHeaderMultipleValues = ({
-    constraint,
-    expanded,
-    allowExpand,
-    maxLength,
-    disabled = false,
-}: ConstraintSingleValueProps) => {
-    const [expandable, setExpandable] = useState(false);
-
-    const text = useMemo(() => {
-        return constraint?.values?.map((value) => value).join(', ');
-    }, [constraint]);
-
-    useEffect(() => {
-        if (text) {
-            allowExpand((text?.length ?? 0) > maxLength);
-            setExpandable((text?.length ?? 0) > maxLength);
-        }
-    }, [text, maxLength, allowExpand, setExpandable]);
-
-    return (
-        <StyledHeaderValuesContainerWrapper>
-            <StyledHeaderValuesContainer>
-                <StyledValuesSpan
-                    sx={(theme) => ({
-                        color: disabled
-                            ? theme.palette.text.secondary
-                            : 'inherit',
-                    })}
-                >
-                    {text}
-                </StyledValuesSpan>
-                <ConditionallyRender
-                    condition={expandable}
-                    show={
-                        <StyledHeaderValuesExpand
-                            className={'valuesExpandLabel'}
-                        >
-                            {!expanded
-                                ? `View all (${constraint?.values?.length})`
-                                : 'View less'}
-                        </StyledHeaderValuesExpand>
-                    }
-                />
-            </StyledHeaderValuesContainer>
-        </StyledHeaderValuesContainerWrapper>
-    );
-};
diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderSingleValue.tsx b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderSingleValue.tsx
deleted file mode 100644
index 2d6faad753..0000000000
--- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderSingleValue.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { useEffect } from 'react';
-import { Chip, styled } from '@mui/material';
-import { formatConstraintValue } from 'utils/formatConstraintValue';
-import type { IConstraint } from 'interfaces/strategy';
-import { useLocationSettings } from 'hooks/useLocationSettings';
-
-const StyledSingleValueChip = styled(Chip)(({ theme }) => ({
-    margin: 'auto 0',
-    marginLeft: theme.spacing(1),
-    [theme.breakpoints.down('sm')]: {
-        margin: theme.spacing(1, 0),
-    },
-}));
-
-interface ConstraintSingleValueProps {
-    constraint: IConstraint;
-    allowExpand: (shouldExpand: boolean) => void;
-    disabled?: boolean;
-}
-
-const StyledHeaderValuesContainerWrapper = styled('div')(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'stretch',
-    margin: 'auto 0',
-}));
-
-/**
- * @deprecated use NewConstraintAccordion components
- */
-export const ConstraintAccordionViewHeaderSingleValue = ({
-    constraint,
-    allowExpand,
-    disabled = false,
-}: ConstraintSingleValueProps) => {
-    const { locationSettings } = useLocationSettings();
-
-    useEffect(() => {
-        allowExpand(false);
-    }, [allowExpand]);
-
-    return (
-        <StyledHeaderValuesContainerWrapper>
-            <StyledSingleValueChip
-                sx={(theme) => ({
-                    color: disabled ? theme.palette.text.secondary : 'inherit',
-                })}
-                label={formatConstraintValue(constraint, locationSettings)}
-            />
-        </StyledHeaderValuesContainerWrapper>
-    );
-};
diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator.tsx b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator.tsx
deleted file mode 100644
index c902f31386..0000000000
--- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import type { IConstraint } from 'interfaces/strategy';
-import { ConditionallyRender } from '../../../ConditionallyRender/ConditionallyRender';
-import { Tooltip, Box, styled } from '@mui/material';
-import { stringOperators } from 'constants/operators';
-import { ReactComponent as NegatedOnIcon } from 'assets/icons/not_operator_selected.svg';
-import { ConstraintOperator } from '../../ConstraintOperator/ConstraintOperator';
-import { StyledIconWrapper } from './StyledIconWrapper';
-import { ReactComponent as CaseSensitive } from 'assets/icons/24_Text format.svg';
-import { oneOf } from 'utils/oneOf';
-import { useTheme } from '@mui/material';
-
-interface ConstraintViewHeaderOperatorProps {
-    constraint: IConstraint;
-    disabled?: boolean;
-}
-
-const StyledHeaderValuesContainerWrapper = styled('div')(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'stretch',
-    margin: 'auto 0',
-}));
-
-const StyledHeaderConstraintContainer = styled('div')(({ theme }) => ({
-    minWidth: '152px',
-    position: 'relative',
-    [theme.breakpoints.down('sm')]: {
-        paddingRight: 0,
-    },
-}));
-
-/**
- * @deprecated use NewConstraintAccordion components
- */
-export const ConstraintViewHeaderOperator = ({
-    constraint,
-    disabled = false,
-}: ConstraintViewHeaderOperatorProps) => {
-    const theme = useTheme();
-    return (
-        <StyledHeaderValuesContainerWrapper>
-            <ConditionallyRender
-                condition={Boolean(constraint.inverted)}
-                show={
-                    <Tooltip title={'Operator is negated'} arrow>
-                        <Box sx={{ display: 'flex' }}>
-                            <StyledIconWrapper isPrefix>
-                                <NegatedOnIcon />
-                            </StyledIconWrapper>
-                        </Box>
-                    </Tooltip>
-                }
-            />
-            <StyledHeaderConstraintContainer>
-                <ConstraintOperator
-                    constraint={constraint}
-                    hasPrefix={Boolean(constraint.inverted)}
-                    disabled={disabled}
-                />
-            </StyledHeaderConstraintContainer>
-            <ConditionallyRender
-                condition={
-                    !constraint.caseInsensitive &&
-                    oneOf(stringOperators, constraint.operator)
-                }
-                show={
-                    <Tooltip title='Case sensitive is active' arrow>
-                        <StyledIconWrapper>
-                            <CaseSensitive />
-                        </StyledIconWrapper>
-                    </Tooltip>
-                }
-            />
-        </StyledHeaderValuesContainerWrapper>
-    );
-};
diff --git a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper.tsx b/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper.tsx
deleted file mode 100644
index bf761d353d..0000000000
--- a/frontend/src/component/common/LegacyConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { forwardRef, type ReactNode } from 'react';
-import { styled } from '@mui/material';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-
-export const StyledIconWrapperBase = styled('div')<{
-    prefix?: boolean;
-}>(({ theme }) => ({
-    backgroundColor: theme.palette.background.elevation2,
-    width: 24,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    alignSelf: 'stretch',
-    color: theme.palette.primary.main,
-    marginLeft: theme.spacing(1),
-    borderRadius: theme.shape.borderRadius,
-}));
-
-const StyledPrefixIconWrapper = styled(StyledIconWrapperBase)(({ theme }) => ({
-    width: 'auto',
-    paddingLeft: theme.spacing(1),
-    paddingRight: theme.spacing(1),
-    marginLeft: 0,
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0,
-}));
-
-/**
- * @deprecated use NewConstraintAccordion components
- */
-export const StyledIconWrapper = forwardRef<
-    HTMLDivElement,
-    { isPrefix?: boolean; children?: ReactNode }
->(({ isPrefix, ...props }, ref) => (
-    <ConditionallyRender
-        condition={Boolean(isPrefix)}
-        show={() => <StyledPrefixIconWrapper ref={ref} {...props} />}
-        elseShow={() => <StyledIconWrapperBase ref={ref} {...props} />}
-    />
-));