diff --git a/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx b/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx
index d908984777..22349c178e 100644
--- a/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx
+++ b/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx
@@ -8,6 +8,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 import type { PlaygroundStrategySchema } from 'openapi';
 import { Badge } from '../Badge/Badge';
 import { Link } from 'react-router-dom';
+import { Truncator } from '../Truncator/Truncator';
 
 type StrategyItemContainerProps = {
     strategyHeaderLevel?: 1 | 2 | 3 | 4 | 5 | 6;
@@ -46,11 +47,12 @@ const StyledCustomTitle = styled('div')(({ theme }) => ({
 }));
 const StyledHeaderContainer = styled('hgroup')(({ theme }) => ({
     display: 'flex',
-    flexFlow: 'row',
+    flexFlow: 'row nowrap',
     columnGap: '1ch',
     fontSize: theme.typography.body1.fontSize,
     '.strategy-name': {
         fontWeight: 'bold',
+        whiteSpace: 'nowrap',
     },
 }));
 
@@ -58,6 +60,12 @@ const StyledContainer = styled('article')({
     background: 'inherit',
 });
 
+const StyledTruncator = styled(Truncator)(({ theme }) => ({
+    fontSize: theme.typography.body1.fontSize,
+    fontWeight: 'normal',
+    margin: 0,
+}));
+
 const NewStyledHeader = styled('div', {
     shouldForwardProp: (prop) => prop !== 'draggable' && prop !== 'disabled',
 })<{ draggable: boolean; disabled: boolean }>(
@@ -124,11 +132,11 @@ export const StrategyItemContainer: FC<StrategyItemContainerProps> = ({
                                         )}
                                         :
                                     </p>
-                                    <Typography
+                                    <StyledTruncator
                                         component={`h${strategyHeaderLevel}`}
                                     >
                                         {strategy.title}
-                                    </Typography>
+                                    </StyledTruncator>
                                 </>
                             ) : (
                                 <Typography