diff --git a/frontend/src/container/SideNav/index.tsx b/frontend/src/container/SideNav/index.tsx
index 64da5b5a44..472ee6f2ae 100644
--- a/frontend/src/container/SideNav/index.tsx
+++ b/frontend/src/container/SideNav/index.tsx
@@ -1,5 +1,10 @@
 import { Menu, Typography } from 'antd';
-import { MenuItem, SlackButton, ToggleButton } from './styles';
+import {
+	MenuItem,
+	SlackButton,
+	SlackMenuItemContainer,
+	ToggleButton,
+} from './styles';
 import ROUTES from 'constants/routes';
 import history from 'lib/history';
 import React, { useCallback, useState } from 'react';
@@ -91,9 +96,11 @@ const SideNav = ({ toggleDarkMode }: Props): JSX.Element => {
 					</Menu.Item>
 				))}
 
-				<MenuItem onClick={onClickSlackHandler} icon={<Slack />}>
-					<SlackButton>Slack</SlackButton>
-				</MenuItem>
+				<SlackMenuItemContainer collapsed={collapsed}>
+					<MenuItem onClick={onClickSlackHandler} icon={<Slack />}>
+						<SlackButton>Slack</SlackButton>
+					</MenuItem>
+				</SlackMenuItemContainer>
 			</Menu>
 		</Sider>
 	);
diff --git a/frontend/src/container/SideNav/styles.ts b/frontend/src/container/SideNav/styles.ts
index 47d452f55d..a4790e84a0 100644
--- a/frontend/src/container/SideNav/styles.ts
+++ b/frontend/src/container/SideNav/styles.ts
@@ -1,5 +1,5 @@
 import { Layout, Menu, Switch, Typography } from 'antd';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 const { Sider: SiderComponent } = Layout;
 
 export const ThemeSwitcherWrapper = styled.div`
@@ -51,3 +51,26 @@ export const MenuItem = styled(Menu.Item)`
 		background: #262626;
 	}
 `;
+
+export const SlackMenuItemContainer = styled.div<LogoProps>`
+	&&& {
+		li {
+			${({ collapsed }) =>
+				collapsed &&
+				css`
+					padding-left: 24px;
+				`}
+		}
+
+		svg {
+			margin-left: ${({ collapsed }) => (collapsed ? '0' : '24px')};
+
+			${({ collapsed }) =>
+				collapsed &&
+				css`
+					height: 100%;
+					margin: 0 auto;
+				`}
+		}
+	}
+`;