diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/MilestoneListRenderer.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/MilestoneListRenderer.tsx
index 91492e374e..b2167f3b71 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/MilestoneListRenderer.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/MilestoneListRenderer.tsx
@@ -11,7 +11,7 @@ const StyledConnection = styled('div')(({ theme }) => ({
     width: 2,
     height: theme.spacing(2),
     backgroundColor: theme.palette.divider,
-    marginLeft: theme.spacing(3.25),
+    marginLeft: theme.spacing(3.5),
 }));
 
 interface MilestoneListRendererCoreProps {
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/MilestoneAutomationSection.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/MilestoneAutomationSection.tsx
index 90f562fd81..8e87ad43fb 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/MilestoneAutomationSection.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/MilestoneAutomationSection.tsx
@@ -4,10 +4,11 @@ import type { MilestoneStatus } from './ReleasePlanMilestoneStatus.tsx';
 const StyledAutomationContainer = styled('div', {
     shouldForwardProp: (prop) => prop !== 'status',
 })<{ status?: MilestoneStatus }>(({ theme, status }) => ({
-    border: `${status === 'active' ? '1.25px' : '1px'} solid ${status === 'active' ? theme.palette.success.border : theme.palette.divider}`,
+    border: `${status === 'active' ? '1.5px' : '1px'} solid ${status === 'active' ? theme.palette.success.border : theme.palette.divider}`,
     borderTop: `1px solid ${theme.palette.divider}`,
     borderRadius: `0 0 ${theme.shape.borderRadiusLarge}px ${theme.shape.borderRadiusLarge}px`,
     padding: theme.spacing(1.5, 2),
+    paddingLeft: theme.spacing(2.25),
     backgroundColor:
         status === 'completed'
             ? theme.palette.background.default
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/MilestoneTransitionDisplay.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/MilestoneTransitionDisplay.tsx
index 235a8925a5..2afed24fdc 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/MilestoneTransitionDisplay.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/MilestoneTransitionDisplay.tsx
@@ -11,6 +11,26 @@ import type { ChangeMilestoneProgressionSchema } from 'openapi';
 import type { ReactNode } from 'react';
 import { useEffect } from 'react';
 
+const StyledFormWrapper = styled('div', {
+    shouldForwardProp: (prop) => prop !== 'hasChanged',
+})<{ hasChanged: boolean }>(({ theme, hasChanged }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(1.5),
+    width: '100%',
+    transition: theme.transitions.create(
+        ['background-color', 'padding', 'border-radius'],
+        {
+            duration: theme.transitions.duration.short,
+        },
+    ),
+    ...(hasChanged && {
+        backgroundColor: theme.palette.background.elevation1,
+        padding: theme.spacing(1.5, 2),
+        borderRadius: `${theme.shape.borderRadiusLarge}px`,
+    }),
+}));
+
 const StyledDisplayContainer = styled('div')(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
@@ -50,10 +70,24 @@ const StyledLabel = styled('span', {
     flexShrink: 0,
 }));
 
-const StyledButtonGroup = styled('div')(({ theme }) => ({
+const StyledButtonGroup = styled('div', {
+    shouldForwardProp: (prop) => prop !== 'hasChanged',
+})<{ hasChanged: boolean }>(({ theme, hasChanged }) => ({
     display: 'flex',
     gap: theme.spacing(1),
     alignItems: 'center',
+    justifyContent: 'flex-end',
+    transition: theme.transitions.create(
+        ['border-top', 'padding-top', 'margin-top'],
+        {
+            duration: theme.transitions.duration.short,
+        },
+    ),
+    ...(hasChanged && {
+        paddingTop: theme.spacing(1),
+        marginTop: theme.spacing(0.5),
+        borderTop: `1px solid ${theme.palette.divider}`,
+    }),
 }));
 
 interface IMilestoneTransitionDisplayProps {
@@ -130,21 +164,44 @@ export const MilestoneTransitionDisplay = ({
     };
 
     return (
-        <StyledDisplayContainer onKeyDown={handleKeyDown}>
-            <StyledContentGroup>
-                <StyledIcon status={status} />
-                <StyledLabel status={status}>
-                    Proceed to the next milestone after
-                </StyledLabel>
-                <MilestoneProgressionTimeInput
-                    timeValue={form.timeValue}
-                    timeUnit={form.timeUnit}
-                    onTimeValueChange={form.handleTimeValueChange}
-                    onTimeUnitChange={form.handleTimeUnitChange}
-                />
-            </StyledContentGroup>
-            <StyledButtonGroup>
-                {hasChanged && (
+        <StyledFormWrapper hasChanged={hasChanged} onKeyDown={handleKeyDown}>
+            <StyledDisplayContainer>
+                <StyledContentGroup>
+                    <StyledIcon status={status} />
+                    <StyledLabel status={status}>
+                        Proceed to the next milestone after
+                    </StyledLabel>
+                    <MilestoneProgressionTimeInput
+                        timeValue={form.timeValue}
+                        timeUnit={form.timeUnit}
+                        onTimeValueChange={form.handleTimeValueChange}
+                        onTimeUnitChange={form.handleTimeUnitChange}
+                    />
+                </StyledContentGroup>
+                {!hasChanged && (
+                    <StyledButtonGroup hasChanged={false}>
+                        {badge}
+                        <IconButton
+                            onClick={onDelete}
+                            size='small'
+                            aria-label={`Delete automation for ${milestoneName}`}
+                            sx={{ padding: 0.5 }}
+                        >
+                            <DeleteOutlineIcon fontSize='small' />
+                        </IconButton>
+                    </StyledButtonGroup>
+                )}
+            </StyledDisplayContainer>
+            {hasChanged && (
+                <StyledButtonGroup hasChanged={true}>
+                    <Button
+                        variant='outlined'
+                        color='primary'
+                        onClick={handleReset}
+                        size='small'
+                    >
+                        Cancel
+                    </Button>
                     <Button
                         variant='contained'
                         color='primary'
@@ -153,17 +210,8 @@ export const MilestoneTransitionDisplay = ({
                     >
                         Save
                     </Button>
-                )}
-                {badge}
-                <IconButton
-                    onClick={onDelete}
-                    size='small'
-                    aria-label={`Delete automation for ${milestoneName}`}
-                    sx={{ padding: 0.5 }}
-                >
-                    <DeleteOutlineIcon fontSize='small' />
-                </IconButton>
-            </StyledButtonGroup>
-        </StyledDisplayContainer>
+                </StyledButtonGroup>
+            )}
+        </StyledFormWrapper>
     );
 };
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestone.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestone.tsx
index 599aa85a2a..eafa04bd0c 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestone.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestone.tsx
@@ -23,10 +23,10 @@ const StyledAccordion = styled(Accordion, {
     shouldForwardProp: (prop) => prop !== 'status' && prop !== 'hasAutomation',
 })<{ status: MilestoneStatus; hasAutomation?: boolean }>(
     ({ theme, status, hasAutomation }) => ({
-        border: `${status === 'active' ? '1.25px' : '1px'} solid ${status === 'active' ? theme.palette.success.border : theme.palette.divider}`,
+        border: `${status === 'active' ? '1.5px' : '1px'} solid ${status === 'active' ? theme.palette.success.border : theme.palette.divider}`,
         borderBottom: hasAutomation
             ? 'none'
-            : `${status === 'active' ? '1.25px' : '1px'} solid ${status === 'active' ? theme.palette.success.border : theme.palette.divider}`,
+            : `${status === 'active' ? '1.5px' : '1px'} solid ${status === 'active' ? theme.palette.success.border : theme.palette.divider}`,
         overflow: 'hidden',
         boxShadow: 'none',
         margin: 0,
@@ -58,6 +58,11 @@ const StyledTitleContainer = styled('div')(({ theme }) => ({
     gap: theme.spacing(0.5),
 }));
 
+const StyledMilestoneLabel = styled('span')(({ theme }) => ({
+    fontSize: theme.typography.caption.fontSize,
+    color: theme.palette.text.secondary,
+}));
+
 const StyledTitle = styled('span', {
     shouldForwardProp: (prop) => prop !== 'status',
 })<{ status?: MilestoneStatus }>(({ theme, status }) => ({
@@ -121,6 +126,9 @@ export const ReleasePlanMilestone = ({
                 <StyledAccordion status={status} hasAutomation={hasAutomation}>
                     <StyledAccordionSummary>
                         <StyledTitleContainer>
+                            <StyledMilestoneLabel>
+                                Milestone
+                            </StyledMilestoneLabel>
                             <StyledTitle status={status}>
                                 {milestone.name}
                             </StyledTitle>
@@ -175,6 +183,7 @@ export const ReleasePlanMilestone = ({
             >
                 <StyledAccordionSummary expandIcon={<ExpandMore />}>
                     <StyledTitleContainer>
+                        <StyledMilestoneLabel>Milestone</StyledMilestoneLabel>
                         <StyledTitle status={status}>
                             {milestone.name}
                         </StyledTitle>
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestoneItem/ReleasePlanMilestoneItem.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestoneItem/ReleasePlanMilestoneItem.tsx
index 0da33c4873..eaff57ffdc 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestoneItem/ReleasePlanMilestoneItem.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestoneItem/ReleasePlanMilestoneItem.tsx
@@ -19,7 +19,7 @@ const StyledConnection = styled('div', {
     backgroundColor: isCompleted
         ? theme.palette.divider
         : theme.palette.primary.main,
-    marginLeft: theme.spacing(3.25),
+    marginLeft: theme.spacing(3.5),
 }));
 
 export interface PendingProgressionChange {
@@ -133,7 +133,7 @@ export const ReleasePlanMilestoneItem = ({
         getPendingProgressionData(milestone, getPendingProgressionChange);
 
     const shouldShowAutomation =
-        isNotLastMilestone && milestoneProgressionsEnabled;
+        isNotLastMilestone && milestoneProgressionsEnabled && !readonly;
 
     const automationSection = shouldShowAutomation ? (
         <MilestoneAutomation