diff --git a/frontend/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.test.tsx b/frontend/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.test.tsx
new file mode 100644
index 0000000000..1f6535cd44
--- /dev/null
+++ b/frontend/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.test.tsx
@@ -0,0 +1,72 @@
+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 10b68bfead..3b8cbf4eb0 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.tsx
@@ -50,30 +50,43 @@ export const StrategyDiff: FC<{
 };
 
 export const StrategyName: FC<{
-    change:
-        | IChangeRequestAddStrategy
-        | IChangeRequestUpdateStrategy
-        | IChangeRequestDeleteStrategy;
+    newTitle: string | undefined;
     previousTitle: string | undefined;
-}> = ({ change, previousTitle }) => {
+}> = ({ newTitle, previousTitle }) => {
+    const titleHasChanged = Boolean(
+        previousTitle && previousTitle !== newTitle
+    );
+
+    const titleHasChangedOrBeenAdded = Boolean(
+        titleHasChanged || (!previousTitle && newTitle)
+    );
+
     return (
         <>
             <ConditionallyRender
-                condition={Boolean(
-                    previousTitle && previousTitle !== change.payload.title
-                )}
+                condition={titleHasChanged}
                 show={
                     <Truncated>
-                        <Typography component="span" color="text.secondary">
-                            {previousTitle ||
-                                formatStrategyName(change.payload.name)}
-                        </Typography>{' '}
+                        <Typography component="del" color="text.secondary">
+                            {previousTitle}
+                        </Typography>
+                    </Truncated>
+                }
+            />
+            <ConditionallyRender
+                condition={Boolean(newTitle)}
+                show={
+                    <Truncated>
+                        <Typography
+                            component={
+                                titleHasChangedOrBeenAdded ? 'ins' : 'span'
+                            }
+                        >
+                            {newTitle}
+                        </Typography>
                     </Truncated>
                 }
             />
-            <Truncated>
-                <Typography component="span">{change.payload.title}</Typography>
-            </Truncated>
         </>
     );
 };
@@ -118,7 +131,10 @@ export const StrategyTooltipLink: FC<IStrategyTooltipLinkProps> = ({
                     {formatStrategyName(change.payload.name)}
                 </Typography>
             </TooltipLink>
-            {<StrategyName change={change} previousTitle={previousTitle} />}
+            <StrategyName
+                newTitle={change.payload.title}
+                previousTitle={previousTitle}
+            />
         </Truncated>
     </StyledContainer>
 );