diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/Change.styles.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/Change.styles.tsx
index 127cce47b4..0fdc1e5518 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/Change.styles.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/Change.styles.tsx
@@ -33,12 +33,13 @@ export const ChangeItemInfo = styled(
         </Typography>
     ),
 )(({ theme }) => ({
-    // display: 'flex',
-    // justifyItems: 'flex-start',
-    // flexFlow: 'row',
-    // alignItems: 'center',
-    // flex: 'auto',
-    // gap: `1ch`,
+    display: 'flex',
+    justifyItems: 'flex-start',
+    flexFlow: 'row wrap',
+    alignItems: 'center',
+    flex: 'auto',
+    columnGap: `1ch`,
+    rowGap: theme.spacing(1),
 }));
 
 export const ChangeItemWrapper = styled('div')(({ theme }) => ({
diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ReleasePlanChange.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ReleasePlanChange.tsx
index 340d4dea87..97a511aa0a 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ReleasePlanChange.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ReleasePlanChange.tsx
@@ -14,13 +14,7 @@ import { ReleasePlan } from 'component/feature/FeatureView/FeatureOverview/Relea
 import { ReleasePlanMilestone } from 'component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestone';
 import type { IReleasePlan } from 'interfaces/releasePlans';
 import { Tab, TabList, TabPanel, Tabs } from './ChangeTabComponents.tsx';
-import { ChangeItemInfo } from './Change.styles.tsx';
-
-export const ChangeItemWrapper = styled(Box)({
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-});
+import { ChangeItemInfo, ChangeItemWrapper } from './Change.styles.tsx';
 
 const ChangeItemCreateEditDeleteWrapper = styled(Box)(({ theme }) => ({
     display: 'grid',
@@ -47,7 +41,7 @@ const DeleteReleasePlan: FC<{
 
     return (
         <>
-            <ChangeItemCreateEditDeleteWrapper>
+            <ChangeItemWrapper>
                 <ChangeItemInfo>
                     <Typography
                         sx={(theme) => ({
@@ -59,7 +53,7 @@ const DeleteReleasePlan: FC<{
                     <Typography>{releasePlan.name}</Typography>
                 </ChangeItemInfo>
                 <div>{actions}</div>
-            </ChangeItemCreateEditDeleteWrapper>
+            </ChangeItemWrapper>
             <ReleasePlan plan={releasePlan} readonly />
         </>
     );
@@ -90,7 +84,7 @@ const StartMilestone: FC<{
 
     return (
         <Tabs>
-            <ChangeItemCreateEditDeleteWrapper>
+            <ChangeItemWrapper>
                 <ChangeItemInfo>
                     <Typography color='success.dark'>
                         + Start milestone
@@ -104,7 +98,7 @@ const StartMilestone: FC<{
                     </TabList>
                     {actions}
                 </div>
-            </ChangeItemCreateEditDeleteWrapper>
+            </ChangeItemWrapper>
             <TabPanel>
                 <ReleasePlanMilestone readonly milestone={newMilestone} />
             </TabPanel>
@@ -162,7 +156,7 @@ const AddReleasePlan: FC<{
     if (!currentReleasePlan) {
         return (
             <>
-                <ChangeItemCreateEditDeleteWrapper>
+                <ChangeItemWrapper>
                     <ChangeItemInfo>
                         <Typography color='success.dark'>
                             + Adding release plan
@@ -170,7 +164,7 @@ const AddReleasePlan: FC<{
                         <Typography>{planPreview.name}</Typography>
                     </ChangeItemInfo>
                     <div>{actions}</div>
-                </ChangeItemCreateEditDeleteWrapper>
+                </ChangeItemWrapper>
                 <ReleasePlan plan={planPreview} readonly />
             </>
         );
@@ -178,7 +172,7 @@ const AddReleasePlan: FC<{
 
     return (
         <Tabs>
-            <ChangeItemCreateEditDeleteWrapper>
+            <ChangeItemWrapper>
                 <ChangeItemInfo>
                     <Typography>
                         Replacing{' '}
@@ -218,7 +212,7 @@ const AddReleasePlan: FC<{
                     </TabList>
                     {actions}
                 </div>
-            </ChangeItemCreateEditDeleteWrapper>
+            </ChangeItemWrapper>
             <TabPanel>
                 <ReleasePlan plan={planPreview} readonly />
             </TabPanel>
diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx
index 8b14c1a269..5386fec308 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx
@@ -22,12 +22,6 @@ import { ChangeStrategyName } from './ChangeStrategyName.tsx';
 import { StrategyDiff } from './StrategyDiff.tsx';
 import { ChangeItemInfo } from './Change.styles.tsx';
 
-export const ChangeItemWrapper = styled(Box)({
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-});
-
 const ChangeItemCreateEditDeleteWrapper = styled(Box)(({ theme }) => ({
     display: 'flex',
     justifyContent: 'space-between',
@@ -266,9 +260,10 @@ const AddStrategy: FC<{
                             ? 'text.secondary'
                             : 'success.dark'
                     }
+                    component='span'
                 >
                     + Adding strategy
-                </Typography>
+                </Typography>{' '}
                 <ChangeStrategyName
                     name={change.payload.name}
                     title={change.payload.title}