diff --git a/frontend/src/component/common/ConstraintsList/ConstraintSeparator/ConstraintSeparator.tsx b/frontend/src/component/common/ConstraintsList/ConstraintSeparator/ConstraintSeparator.tsx
index 2c3ba89501..bfc3d981bb 100644
--- a/frontend/src/component/common/ConstraintsList/ConstraintSeparator/ConstraintSeparator.tsx
+++ b/frontend/src/component/common/ConstraintsList/ConstraintSeparator/ConstraintSeparator.tsx
@@ -14,7 +14,7 @@ export const ConstraintSeparator = styled(({ ...props }) => (
     fontSize: theme.fontSizes.smallerBody,
     color: theme.palette.text.primary,
     background: theme.palette.background.application,
-    borderRadius: theme.shape.borderRadiusLarge,
+    borderRadius: theme.shape.borderRadiusExtraLarge,
     zIndex: theme.zIndex.fab,
     textTransform: 'uppercase',
 }));
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
index 5d34e6d6f2..cd5a76c5f4 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
@@ -47,6 +47,7 @@ import { BuiltInStrategies, formatStrategyName } from 'utils/strategyNames';
 import { Badge } from 'component/common/Badge/Badge';
 import EnvironmentIcon from 'component/common/EnvironmentIcon/EnvironmentIcon';
 import { UpgradeChangeRequests } from '../../FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/UpgradeChangeRequests/UpgradeChangeRequests';
+import { ConstraintSeparator } from 'component/common/ConstraintsList/ConstraintSeparator/ConstraintSeparator';
 
 interface IFeatureStrategyFormProps {
     feature: IFeatureToggle;
@@ -71,19 +72,6 @@ interface IFeatureStrategyFormProps {
     disabled?: boolean;
 }
 
-const StyledDividerContent = styled(Box)(({ theme }) => ({
-    padding: theme.spacing(0.75, 1),
-    color: theme.palette.text.primary,
-    fontSize: theme.fontSizes.smallerBody,
-    backgroundColor: theme.palette.background.elevation2,
-    borderRadius: theme.shape.borderRadius,
-    width: '45px',
-    position: 'absolute',
-    top: '-10px',
-    left: 'calc(50% - 45px)',
-    lineHeight: 1,
-}));
-
 const StyledForm = styled('form')(({ theme }) => ({
     position: 'relative',
     display: 'flex',
@@ -191,6 +179,12 @@ const StyledBadge = styled(Badge)(({ theme }) => ({
     marginLeft: theme.spacing(1),
 }));
 
+const StyledConstraintSeparator = styled(ConstraintSeparator)(({ theme }) => ({
+    top: '-10px',
+    left: '0',
+    transform: 'translateY(0)',
+}));
+
 export const FeatureStrategyForm = ({
     projectId,
     feature,
@@ -517,7 +511,7 @@ export const FeatureStrategyForm = ({
 
                             <StyledBox>
                                 <StyledDivider />
-                                <StyledDividerContent>AND</StyledDividerContent>
+                                <StyledConstraintSeparator />
                             </StyledBox>
                             <FeatureStrategyConstraints
                                 projectId={feature.project}
diff --git a/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneStrategy/ReleasePlanTemplateAddStrategyForm.tsx b/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneStrategy/ReleasePlanTemplateAddStrategyForm.tsx
index 433d4ef4dd..79ae63290c 100644
--- a/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneStrategy/ReleasePlanTemplateAddStrategyForm.tsx
+++ b/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneStrategy/ReleasePlanTemplateAddStrategyForm.tsx
@@ -25,6 +25,7 @@ import { MilestoneStrategyTitle } from './MilestoneStrategyTitle';
 import { MilestoneStrategyConstraints } from './MilestoneStrategyConstraints';
 import { MilestoneStrategyVariants } from './MilestoneStrategyVariants';
 import { MilestoneStrategyType } from './MilestoneStrategyType';
+import { ConstraintSeparator } from 'component/common/ConstraintsList/ConstraintSeparator/ConstraintSeparator';
 import {
     featureStrategyDocsLink,
     featureStrategyDocsLinkLabel,
@@ -117,17 +118,10 @@ const StyledDivider = styled(Divider)(({ theme }) => ({
     width: '100%',
 }));
 
-const StyledDividerContent = styled(Box)(({ theme }) => ({
-    padding: theme.spacing(0.75, 1),
-    color: theme.palette.text.primary,
-    fontSize: theme.fontSizes.smallerBody,
-    backgroundColor: theme.palette.background.elevation2,
-    borderRadius: theme.shape.borderRadius,
-    width: '45px',
-    position: 'absolute',
+const StyledConstraintSeparator = styled(ConstraintSeparator)(({ theme }) => ({
     top: '-10px',
-    left: 'calc(50% - 45px)',
-    lineHeight: 1,
+    left: '0',
+    transform: 'translateY(0)',
 }));
 
 interface IReleasePlanTemplateAddStrategyFormProps {
@@ -332,7 +326,7 @@ export const ReleasePlanTemplateAddStrategyForm = ({
                             />
                             <StyledBox>
                                 <StyledDivider />
-                                <StyledDividerContent>AND</StyledDividerContent>
+                                <StyledConstraintSeparator />
                             </StyledBox>
                             <MilestoneStrategyConstraints
                                 strategy={currentStrategy}