diff --git a/frontend/src/component/changeRequest/ChangeRequest/ChangeRequest.tsx b/frontend/src/component/changeRequest/ChangeRequest/ChangeRequest.tsx
index 5bf6b40fc3..6c09095281 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/ChangeRequest.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/ChangeRequest.tsx
@@ -1,5 +1,5 @@
 import { VFC } from 'react';
-import { Box } from '@mui/material';
+import { Alert, Box, styled } from '@mui/material';
 import { ChangeRequestFeatureToggleChange } from '../ChangeRequestOverview/ChangeRequestFeatureToggleChange/ChangeRequestFeatureToggleChange';
 import { objectId } from 'utils/objectId';
 import { ToggleStatusChange } from '../ChangeRequestOverview/ChangeRequestFeatureToggleChange/ToggleStatusChange';
@@ -17,6 +17,7 @@ import {
     GetFeatureStrategyIcon,
 } from 'utils/strategyNames';
 import { hasNameField } from '../changeRequest.types';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
 interface IChangeRequestProps {
     changeRequest: IChangeRequest;
@@ -24,6 +25,38 @@ interface IChangeRequestProps {
     onNavigate?: () => void;
 }
 
+const StyledSingleChangeBox = styled(Box)<{
+    hasConflict: boolean;
+    isAfterWarning: boolean;
+    isLast: boolean;
+    inInConflictFeature: boolean;
+}>(({ theme, hasConflict, inInConflictFeature, isAfterWarning, isLast }) => ({
+    borderLeft: '1px solid',
+    borderRight: '1px solid',
+    borderTop: '1px solid',
+    borderBottom: isLast ? '1px solid' : 'none',
+    borderRadius: isLast
+        ? `0 0
+                ${theme.shape.borderRadiusLarge}px ${theme.shape.borderRadiusLarge}px`
+        : 0,
+    borderColor:
+        hasConflict || inInConflictFeature
+            ? theme.palette.warning.border
+            : theme.palette.dividerAlternative,
+    borderTopColor:
+        (hasConflict || isAfterWarning) && !inInConflictFeature
+            ? theme.palette.warning.border
+            : theme.palette.dividerAlternative,
+}));
+
+const StyledAlert = styled(Alert)(({ theme }) => ({
+    borderRadius: 0,
+    padding: theme.spacing(0, 2),
+    '&.MuiAlert-standardWarning': {
+        borderStyle: 'none none solid none',
+    },
+}));
+
 export const ChangeRequest: VFC<IChangeRequestProps> = ({
     changeRequest,
     onRefetch,
@@ -56,63 +89,86 @@ export const ChangeRequest: VFC<IChangeRequestProps> = ({
                     featureName={featureToggleChange.name}
                     projectId={changeRequest.project}
                     onNavigate={onNavigate}
+                    conflict={featureToggleChange.conflict}
                 >
-                    {featureToggleChange.changes.map(change => (
-                        <Box
+                    {featureToggleChange.changes.map((change, index) => (
+                        <StyledSingleChangeBox
                             key={objectId(change)}
-                            sx={theme => ({
-                                padding: 2,
-                                borderTop: '1px solid',
-                                borderColor: theme =>
-                                    theme.palette.dividerAlternative,
-                            })}
+                            hasConflict={Boolean(change.conflict)}
+                            inInConflictFeature={Boolean(
+                                featureToggleChange.conflict
+                            )}
+                            isAfterWarning={Boolean(
+                                featureToggleChange.changes[index - 1]?.conflict
+                            )}
+                            isLast={
+                                index + 1 === featureToggleChange.changes.length
+                            }
                         >
-                            {change.action === 'updateEnabled' && (
-                                <ToggleStatusChange
-                                    enabled={change.payload.enabled}
-                                    onDiscard={onDiscard(change.id)}
-                                />
-                            )}
-                            {change.action === 'addStrategy' && (
-                                <StrategyAddedChange
-                                    onDiscard={onDiscard(change.id)}
-                                >
-                                    <GetFeatureStrategyIcon
-                                        strategyName={change.payload.name}
+                            <ConditionallyRender
+                                condition={
+                                    Boolean(change.conflict) &&
+                                    !featureToggleChange.conflict
+                                }
+                                show={
+                                    <StyledAlert severity="warning">
+                                        <strong>Conflict!</strong> This change
+                                        can’t be applied. {change.conflict}.
+                                    </StyledAlert>
+                                }
+                            />
+                            <Box sx={{ p: 2 }}>
+                                {change.action === 'updateEnabled' && (
+                                    <ToggleStatusChange
+                                        enabled={change.payload.enabled}
+                                        onDiscard={onDiscard(change.id)}
                                     />
+                                )}
+                                {change.action === 'addStrategy' && (
+                                    <StrategyAddedChange
+                                        onDiscard={onDiscard(change.id)}
+                                    >
+                                        <GetFeatureStrategyIcon
+                                            strategyName={change.payload.name}
+                                        />
 
-                                    {formatStrategyName(change.payload.name)}
-                                </StrategyAddedChange>
-                            )}
-                            {change.action === 'deleteStrategy' && (
-                                <StrategyDeletedChange
-                                    onDiscard={onDiscard(change.id)}
-                                >
-                                    {hasNameField(change.payload) && (
-                                        <>
-                                            <GetFeatureStrategyIcon
-                                                strategyName={
+                                        {formatStrategyName(
+                                            change.payload.name
+                                        )}
+                                    </StrategyAddedChange>
+                                )}
+                                {change.action === 'deleteStrategy' && (
+                                    <StrategyDeletedChange
+                                        onDiscard={onDiscard(change.id)}
+                                    >
+                                        {hasNameField(change.payload) && (
+                                            <>
+                                                <GetFeatureStrategyIcon
+                                                    strategyName={
+                                                        change.payload.name
+                                                    }
+                                                />
+                                                {formatStrategyName(
                                                     change.payload.name
-                                                }
-                                            />
-                                            {formatStrategyName(
-                                                change.payload.name
-                                            )}
-                                        </>
-                                    )}
-                                </StrategyDeletedChange>
-                            )}
-                            {change.action === 'updateStrategy' && (
-                                <StrategyEditedChange
-                                    onDiscard={onDiscard(change.id)}
-                                >
-                                    <GetFeatureStrategyIcon
-                                        strategyName={change.payload.name}
-                                    />
-                                    {formatStrategyName(change.payload.name)}
-                                </StrategyEditedChange>
-                            )}
-                        </Box>
+                                                )}
+                                            </>
+                                        )}
+                                    </StrategyDeletedChange>
+                                )}
+                                {change.action === 'updateStrategy' && (
+                                    <StrategyEditedChange
+                                        onDiscard={onDiscard(change.id)}
+                                    >
+                                        <GetFeatureStrategyIcon
+                                            strategyName={change.payload.name}
+                                        />
+                                        {formatStrategyName(
+                                            change.payload.name
+                                        )}
+                                    </StrategyEditedChange>
+                                )}
+                            </Box>
+                        </StyledSingleChangeBox>
                     ))}
                 </ChangeRequestFeatureToggleChange>
             ))}
diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestFeatureToggleChange/ChangeRequestFeatureToggleChange.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestFeatureToggleChange/ChangeRequestFeatureToggleChange.tsx
index 6d718a63a3..b90d64a052 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestFeatureToggleChange/ChangeRequestFeatureToggleChange.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestFeatureToggleChange/ChangeRequestFeatureToggleChange.tsx
@@ -1,48 +1,79 @@
 import { FC } from 'react';
 import { Link } from 'react-router-dom';
-import { Box, Card, Typography } from '@mui/material';
+import { Alert, Box, Card, Typography } from '@mui/material';
 import ToggleOnIcon from '@mui/icons-material/ToggleOn';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
 interface IChangeRequestToggleChange {
     featureName: string;
     projectId: string;
+    conflict?: string;
     onNavigate?: () => void;
 }
 
 export const ChangeRequestFeatureToggleChange: FC<
     IChangeRequestToggleChange
-> = ({ featureName, projectId, onNavigate, children }) => {
-    return (
-        <Card
-            elevation={0}
+> = ({ featureName, projectId, conflict, onNavigate, children }) => (
+    <Card
+        elevation={0}
+        sx={theme => ({
+            marginTop: theme.spacing(2),
+            overflow: 'hidden',
+        })}
+    >
+        <Box
             sx={theme => ({
-                marginTop: theme.spacing(2),
-                borderRadius: theme => `${theme.shape.borderRadiusLarge}px`,
-                overflow: 'hidden',
+                backgroundColor: Boolean(conflict)
+                    ? theme.palette.warning.light
+                    : theme.palette.tableHeaderBackground,
+                borderRadius: theme =>
+                    `${theme.shape.borderRadiusLarge}px ${theme.shape.borderRadiusLarge}px 0 0`,
                 border: '1px solid',
-                borderColor: theme => theme.palette.dividerAlternative,
+                borderColor: theme =>
+                    conflict
+                        ? theme.palette.warning.border
+                        : theme.palette.dividerAlternative,
+                borderBottom: 'none',
+                overflow: 'hidden',
             })}
         >
-            <Box
-                sx={theme => ({
-                    backgroundColor: theme.palette.tableHeaderBackground,
-                    padding: theme.spacing(3),
-                })}
-            >
-                <Box sx={{ display: 'flex', gap: 1 }}>
-                    <ToggleOnIcon color="disabled" />
-                    <Typography
-                        component={Link}
-                        to={`/projects/${projectId}/features/${featureName}`}
-                        color="primary"
-                        sx={{ textDecoration: 'none' }}
-                        onClick={onNavigate}
+            <ConditionallyRender
+                condition={Boolean(conflict)}
+                show={
+                    <Alert
+                        severity="warning"
+                        sx={{
+                            mx: 1,
+                            '&.MuiAlert-standardWarning': {
+                                borderStyle: 'none',
+                            },
+                        }}
                     >
-                        {featureName}
-                    </Typography>
-                </Box>
+                        <strong>Conflict!</strong> {conflict}.
+                    </Alert>
+                }
+            />
+            <Box
+                sx={{
+                    display: 'flex',
+                    gap: 1,
+                    pt: conflict ? 0 : 2,
+                    pb: 2,
+                    px: 3,
+                }}
+            >
+                <ToggleOnIcon color="disabled" />
+                <Typography
+                    component={Link}
+                    to={`/projects/${projectId}/features/${featureName}`}
+                    color="primary"
+                    sx={{ textDecoration: 'none' }}
+                    onClick={onNavigate}
+                >
+                    {featureName}
+                </Typography>
             </Box>
-            <Box>{children}</Box>
-        </Card>
-    );
-};
+        </Box>
+        <Box>{children}</Box>
+    </Card>
+);
diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx
index 0d6eab7467..bab9d3359d 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx
@@ -89,10 +89,10 @@ export const ChangeRequestOverview: FC = () => {
                 <StyledAsideBox>
                     <ChangeRequestTimeline state={changeRequest.state} />
                     <ConditionallyRender
-                        condition={changeRequest.approvals.length > 0}
+                        condition={changeRequest.approvals?.length > 0}
                         show={
                             <ChangeRequestReviewers>
-                                {changeRequest.approvals.map(approver => (
+                                {changeRequest.approvals?.map(approver => (
                                     <ChangeRequestReviewer
                                         name={
                                             approver.createdBy.username ||
diff --git a/frontend/src/component/changeRequest/changeRequest.types.ts b/frontend/src/component/changeRequest/changeRequest.types.ts
index 89765d9106..4b79378302 100644
--- a/frontend/src/component/changeRequest/changeRequest.types.ts
+++ b/frontend/src/component/changeRequest/changeRequest.types.ts
@@ -10,6 +10,7 @@ export interface IChangeRequest {
     createdAt: Date;
     features: IChangeRequestFeature[];
     approvals: IChangeRequestApproval[];
+    conflict?: string;
 }
 
 export interface IChangeRequestEnvironmentConfig {