diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlan.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlan.tsx
index 64bea62bde..c21c780d14 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlan.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlan.tsx
@@ -1,5 +1,6 @@
 import Delete from '@mui/icons-material/Delete';
-import { styled } from '@mui/material';
+import Add from '@mui/icons-material/Add';
+import { styled, IconButton, Button } from '@mui/material';
 import { DELETE_FEATURE_STRATEGY } from '@server/types/permissions';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
 import { useReleasePlansApi } from 'hooks/api/actions/useReleasePlansApi/useReleasePlansApi';
@@ -22,6 +23,7 @@ import { RemoveReleasePlanChangeRequestDialog } from './ChangeRequest/RemoveRele
 import { StartMilestoneChangeRequestDialog } from './ChangeRequest/StartMilestoneChangeRequestDialog.tsx';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { Truncator } from 'component/common/Truncator/Truncator';
+import { useUiFlag } from 'hooks/useUiFlag';
 
 const StyledContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(2),
@@ -69,12 +71,47 @@ const StyledBody = styled('div')(({ theme }) => ({
 }));
 
 const StyledConnection = styled('div')(({ theme }) => ({
+    width: 4,
+    height: theme.spacing(6),
+    backgroundColor: theme.palette.divider,
+    marginLeft: theme.spacing(3.25),
+}));
+
+const StyledConnectionSimple = styled('div')(({ theme }) => ({
     width: 4,
     height: theme.spacing(2),
     backgroundColor: theme.palette.divider,
     marginLeft: theme.spacing(3.25),
 }));
 
+const StyledConnectionContainer = styled('div')(({ theme }) => ({
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+}));
+
+const StyledAddAutomationIconButton = styled(IconButton)(({ theme }) => ({
+    position: 'absolute',
+    left: theme.spacing(2),
+    top: '12px',
+    width: 24,
+    height: 24,
+    border: `1px solid ${theme.palette.primary.main}`,
+    backgroundColor: theme.palette.background.elevation2,
+    zIndex: 1,
+    '& svg': {
+        fontSize: 16,
+    },
+}));
+
+const StyledAddAutomationButton = styled(Button)(({ theme }) => ({
+    marginLeft: theme.spacing(3),
+    textTransform: 'none',
+    fontWeight: theme.typography.fontWeightBold,
+    padding: 0,
+    minWidth: 'auto',
+}));
+
 interface IReleasePlanProps {
     plan: IReleasePlan;
     environmentIsDisabled?: boolean;
@@ -118,6 +155,7 @@ export const ReleasePlan = ({
     const { addChange } = useChangeRequestApi();
     const { refetch: refetchChangeRequests } =
         usePendingChangeRequests(projectId);
+    const milestoneProgressionsEnabled = useUiFlag('milestoneProgression');
 
     const onAddRemovePlanChangesConfirm = async () => {
         await addChange(projectId, environment, {
@@ -276,7 +314,23 @@ export const ReleasePlan = ({
                         />
                         }
+                            show={
+                                
+                                            
+                                            
+                                                
+                                            
+                                            
+                                                Add automation
+                                            
+                                        
+                                    }
+                                    elseShow={}
+                                />
+                            }
                         />
                     
                 ))}