diff --git a/frontend/src/component/changeRequest/ChangeRequest/NameWithChangeInfo/NameWithChangeInfo.test.tsx b/frontend/src/component/changeRequest/ChangeRequest/NameWithChangeInfo/NameWithChangeInfo.test.tsx
new file mode 100644
index 0000000000..72e5d0e9ee
--- /dev/null
+++ b/frontend/src/component/changeRequest/ChangeRequest/NameWithChangeInfo/NameWithChangeInfo.test.tsx
@@ -0,0 +1,74 @@
+import { screen } from '@testing-library/react';
+import { render } from 'utils/testRenderer';
+import React from 'react';
+import { NameWithChangeInfo } from './NameWithChangeInfo';
+
+test.each(['', undefined])(
+    'Should render only the new name if the previous name was %s',
+    async previousName => {
+        const newName = 'new name';
+        render(
+            <NameWithChangeInfo newName={newName} previousName={previousName} />
+        );
+
+        // expect no del elements
+        expect(
+            screen.queryByText(previousName || '', { selector: 'del' })
+        ).toBeNull();
+
+        // expect ins element with new strategy name
+        await screen.findByText(newName, { selector: 'ins' });
+    }
+);
+
+test.each(['', undefined])(
+    'Should render the old name as deleted and no new name if there was a previous name and the new one is %s',
+    async newName => {
+        const previousName = 'previous name';
+        render(
+            <NameWithChangeInfo newName={newName} previousName={previousName} />
+        );
+
+        // expect no ins elements
+        expect(
+            screen.queryByText(newName || '', { selector: 'ins' })
+        ).toBeNull();
+
+        // expect del element with old strategy name
+        await screen.findByText(previousName, { selector: 'del' });
+    }
+);
+
+test('Should render the old name as deleted and the new name as inserted if the previous name was different', async () => {
+    const newName = 'new name';
+    const previousName = 'previous name';
+    render(
+        <NameWithChangeInfo newName={newName} previousName={previousName} />
+    );
+
+    // expect del element with old strategy name
+    await screen.findByText(previousName, { selector: 'del' });
+
+    // expect ins element with new strategy name
+    await screen.findByText(newName, { selector: 'ins' });
+});
+
+test('Should render the name in a span if it has not changed', async () => {
+    const name = 'name';
+    render(<NameWithChangeInfo newName={name} previousName={name} />);
+
+    // expect no del or ins elements
+    expect(screen.queryByText(name, { selector: 'ins' })).toBeNull();
+    expect(screen.queryByText(name, { selector: 'del' })).toBeNull();
+
+    // expect span element with the strategy name
+    await screen.findByText(name, { selector: 'span' });
+});
+
+test('Should render nothing if there was no name and there is still no name', async () => {
+    render(<NameWithChangeInfo newName={undefined} previousName={undefined} />);
+
+    expect(screen.queryByText('', { selector: 'ins' })).toBeNull();
+    expect(screen.queryByText('', { selector: 'del' })).toBeNull();
+    expect(screen.queryByText('', { selector: 'span' })).toBeNull();
+});
diff --git a/frontend/src/component/changeRequest/ChangeRequest/NameWithChangeInfo/NameWithChangeInfo.tsx b/frontend/src/component/changeRequest/ChangeRequest/NameWithChangeInfo/NameWithChangeInfo.tsx
new file mode 100644
index 0000000000..65ce62722d
--- /dev/null
+++ b/frontend/src/component/changeRequest/ChangeRequest/NameWithChangeInfo/NameWithChangeInfo.tsx
@@ -0,0 +1,49 @@
+import { FC } from 'react';
+import { Typography, styled } from '@mui/material';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { textTruncated } from 'themes/themeStyles';
+
+const Truncated = styled('div')(() => ({
+    ...textTruncated,
+    maxWidth: 500,
+}));
+
+export const NameWithChangeInfo: FC<{
+    newName: string | undefined;
+    previousName: string | undefined;
+}> = ({ newName, previousName }) => {
+    const titleHasChanged = Boolean(previousName && previousName !== newName);
+
+    const titleHasChangedOrBeenAdded = Boolean(
+        titleHasChanged || (!previousName && newName)
+    );
+
+    return (
+        <>
+            <ConditionallyRender
+                condition={titleHasChanged}
+                show={
+                    <Truncated>
+                        <Typography component="del" color="text.secondary">
+                            {previousName}
+                        </Typography>
+                    </Truncated>
+                }
+            />
+            <ConditionallyRender
+                condition={Boolean(newName)}
+                show={
+                    <Truncated>
+                        <Typography
+                            component={
+                                titleHasChangedOrBeenAdded ? 'ins' : 'span'
+                            }
+                        >
+                            {newName}
+                        </Typography>
+                    </Truncated>
+                }
+            />
+        </>
+    );
+};
diff --git a/frontend/src/component/changeRequest/ChangeRequest/SegmentTooltipLink.tsx b/frontend/src/component/changeRequest/ChangeRequest/SegmentTooltipLink.tsx
index f3997706a3..dab7c7a826 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/SegmentTooltipLink.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/SegmentTooltipLink.tsx
@@ -10,6 +10,7 @@ import { TooltipLink } from 'component/common/TooltipLink/TooltipLink';
 import { Typography, styled } from '@mui/material';
 import { textTruncated } from 'themes/themeStyles';
 import { ISegment } from 'interfaces/segment';
+import { NameWithChangeInfo } from './NameWithChangeInfo/NameWithChangeInfo';
 
 const StyledCodeSection = styled('div')(({ theme }) => ({
     overflowX: 'auto',
@@ -70,9 +71,10 @@ export const SegmentTooltipLink: FC<IStrategyTooltipLinkProps> = ({
                     maxHeight: 600,
                 }}
             >
-                <Typography component="span">
-                    {formatStrategyName(change.payload.name)}
-                </Typography>
+                <NameWithChangeInfo
+                    previousName={change.name}
+                    newName={change.payload.name}
+                />
             </TooltipLink>
         </Truncated>
     </StyledContainer>
diff --git a/frontend/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.test.tsx b/frontend/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.test.tsx
deleted file mode 100644
index 1f6535cd44..0000000000
--- a/frontend/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.test.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { screen } from '@testing-library/react';
-import { render } from 'utils/testRenderer';
-import React from 'react';
-import { StrategyName } from './StrategyTooltipLink';
-
-test.each(['', undefined])(
-    'Should render only the new title if the previous title was %s',
-    async previousTitle => {
-        const newTitle = 'new title';
-        render(
-            <StrategyName newTitle={newTitle} previousTitle={previousTitle} />
-        );
-
-        // expect no del elements
-        expect(
-            screen.queryByText(previousTitle || '', { selector: 'del' })
-        ).toBeNull();
-
-        // expect ins element with new strategy name
-        await screen.findByText(newTitle, { selector: 'ins' });
-    }
-);
-
-test.each(['', undefined])(
-    'Should render the old title as deleted and no new title if there was a previous title and the new one is %s',
-    async newTitle => {
-        const previousTitle = 'previous title';
-        render(
-            <StrategyName newTitle={newTitle} previousTitle={previousTitle} />
-        );
-
-        // expect no ins elements
-        expect(
-            screen.queryByText(newTitle || '', { selector: 'ins' })
-        ).toBeNull();
-
-        // expect del element with old strategy name
-        await screen.findByText(previousTitle, { selector: 'del' });
-    }
-);
-
-test('Should render the old title as deleted and the new title as inserted if the previous title was different', async () => {
-    const newTitle = 'new title';
-    const previousTitle = 'previous title';
-    render(<StrategyName newTitle={newTitle} previousTitle={previousTitle} />);
-
-    // expect del element with old strategy name
-    await screen.findByText(previousTitle, { selector: 'del' });
-
-    // expect ins element with new strategy name
-    await screen.findByText(newTitle, { selector: 'ins' });
-});
-
-test('Should render the title in a span if it has not changed', async () => {
-    const title = 'title';
-    render(<StrategyName newTitle={title} previousTitle={title} />);
-
-    // expect no del or ins elements
-    expect(screen.queryByText(title, { selector: 'ins' })).toBeNull();
-    expect(screen.queryByText(title, { selector: 'del' })).toBeNull();
-
-    // expect span element with the strategy name
-    await screen.findByText(title, { selector: 'span' });
-});
-
-test('Should render nothing if there was no title and there is still no title', async () => {
-    render(<StrategyName newTitle={undefined} previousTitle={undefined} />);
-
-    expect(screen.queryByText('', { selector: 'ins' })).toBeNull();
-    expect(screen.queryByText('', { selector: 'del' })).toBeNull();
-    expect(screen.queryByText('', { selector: 'span' })).toBeNull();
-});
diff --git a/frontend/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.tsx b/frontend/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.tsx
index 3b8cbf4eb0..26fa4df406 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.tsx
@@ -13,8 +13,8 @@ import omit from 'lodash.omit';
 import { TooltipLink } from 'component/common/TooltipLink/TooltipLink';
 import { Typography, styled } from '@mui/material';
 import { IFeatureStrategy } from 'interfaces/strategy';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { textTruncated } from 'themes/themeStyles';
+import { NameWithChangeInfo } from '../NameWithChangeInfo/NameWithChangeInfo';
 
 const StyledCodeSection = styled('div')(({ theme }) => ({
     overflowX: 'auto',
@@ -49,48 +49,6 @@ export const StrategyDiff: FC<{
     );
 };
 
-export const StrategyName: FC<{
-    newTitle: string | undefined;
-    previousTitle: string | undefined;
-}> = ({ newTitle, previousTitle }) => {
-    const titleHasChanged = Boolean(
-        previousTitle && previousTitle !== newTitle
-    );
-
-    const titleHasChangedOrBeenAdded = Boolean(
-        titleHasChanged || (!previousTitle && newTitle)
-    );
-
-    return (
-        <>
-            <ConditionallyRender
-                condition={titleHasChanged}
-                show={
-                    <Truncated>
-                        <Typography component="del" color="text.secondary">
-                            {previousTitle}
-                        </Typography>
-                    </Truncated>
-                }
-            />
-            <ConditionallyRender
-                condition={Boolean(newTitle)}
-                show={
-                    <Truncated>
-                        <Typography
-                            component={
-                                titleHasChangedOrBeenAdded ? 'ins' : 'span'
-                            }
-                        >
-                            {newTitle}
-                        </Typography>
-                    </Truncated>
-                }
-            />
-        </>
-    );
-};
-
 interface IStrategyTooltipLinkProps {
     change:
         | IChangeRequestAddStrategy
@@ -131,9 +89,9 @@ export const StrategyTooltipLink: FC<IStrategyTooltipLinkProps> = ({
                     {formatStrategyName(change.payload.name)}
                 </Typography>
             </TooltipLink>
-            <StrategyName
-                newTitle={change.payload.title}
-                previousTitle={previousTitle}
+            <NameWithChangeInfo
+                newName={change.payload.title}
+                previousName={previousTitle}
             />
         </Truncated>
     </StyledContainer>
diff --git a/frontend/src/component/changeRequest/changeRequest.types.ts b/frontend/src/component/changeRequest/changeRequest.types.ts
index c817f91dcf..87bf31c37b 100644
--- a/frontend/src/component/changeRequest/changeRequest.types.ts
+++ b/frontend/src/component/changeRequest/changeRequest.types.ts
@@ -112,6 +112,7 @@ export interface IChangeRequestReorderStrategy
 export interface IChangeRequestUpdateSegment {
     action: 'updateSegment';
     conflict?: string;
+    name: string;
     payload: {
         id: number;
         name: string;
@@ -124,6 +125,7 @@ export interface IChangeRequestUpdateSegment {
 export interface IChangeRequestDeleteSegment {
     action: 'deleteSegment';
     conflict?: string;
+    name: string;
     payload: {
         id: number;
         name: string;