diff --git a/frontend/src/container/SideNav/index.tsx b/frontend/src/container/SideNav/index.tsx
index e322fcb7e21a..fd39653cd6d4 100644
--- a/frontend/src/container/SideNav/index.tsx
+++ b/frontend/src/container/SideNav/index.tsx
@@ -15,6 +15,7 @@ import AppReducer from 'types/reducer/app';
 import menus from './menuItems';
 import Slack from './Slack';
 import {
+	Name,
 	RedDot,
 	Sider,
 	SlackButton,
@@ -103,8 +104,8 @@ function SideNav(): JSX.Element {
 						icon={<Icon />}
 						onClick={(): void => onClickHandler(to)}
 					>
-						<Space style={{ position: 'relative' }}>
-							<Typography>{name}</Typography>
+						<Space>
+							<Name ellipsis>{name}</Name>
 							{tags &&
 								tags.map((e) => (
 									<Tags style={{ lineHeight: '1rem' }} color="#177DDC" key={e}>
diff --git a/frontend/src/container/SideNav/styles.ts b/frontend/src/container/SideNav/styles.ts
index 688356cf7d2e..b7aea2fdc1e8 100644
--- a/frontend/src/container/SideNav/styles.ts
+++ b/frontend/src/container/SideNav/styles.ts
@@ -83,3 +83,9 @@ export const Tags = styled(Tag)`
 		border-radius: 0.5rem;
 	}
 `;
+
+export const Name = styled(Typography.Paragraph)`
+	&&& {
+		margin: 0;
+	}
+`;