diff --git a/frontend/src/container/SideNav/SideNav.styles.scss b/frontend/src/container/SideNav/SideNav.styles.scss
index 2cc32e12f3..b796c9727c 100644
--- a/frontend/src/container/SideNav/SideNav.styles.scss
+++ b/frontend/src/container/SideNav/SideNav.styles.scss
@@ -78,36 +78,65 @@
 			box-shadow: none !important;
 		}
 	}
+	.nav-wrapper {
+		height: calc(100% - 52px);
 
-	.secondary-nav-items {
-		border-top: 1px solid var(--bg-slate-400);
-		padding: 8px 0;
-		max-width: 100%;
-		position: fixed;
-		bottom: 0;
-		left: 0;
-		width: 240px;
+		.primary-nav-items {
+			max-height: 65%;
+			overflow-y: auto;
+			overflow-x: hidden;
 
-		transition: all 0.3s, background 0s, border 0s;
-
-		// position: relative;
-
-		.collapse-expand-handlers {
-			position: absolute;
-
-			top: -9px;
-			right: -9px;
-			cursor: pointer;
-
-			display: none;
-
-			transition: display 0.3s;
-
-			svg {
-				fill: var(--bg-vanilla-400);
-				color: var(--bg-slate-300);
+			&::-webkit-scrollbar {
+				width: 0.1rem;
 			}
 		}
+		.secondary-nav-items {
+			max-height: 35%;
+			overflow-y: auto;
+			overflow-x: hidden;
+			border-top: 1px solid var(--bg-slate-400);
+			padding: 8px 0;
+			max-width: 100%;
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			width: 240px;
+
+			transition: all 0.3s, background 0s, border 0s;
+
+			&::-webkit-scrollbar {
+				width: 0.1rem;
+			}
+
+			.collapse-expand-handlers {
+				position: absolute;
+
+				top: -9px;
+				right: -9px;
+				cursor: pointer;
+
+				display: none;
+
+				transition: display 0.3s;
+
+				svg {
+					fill: var(--bg-vanilla-400);
+					color: var(--bg-slate-300);
+				}
+			}
+		}
+	}
+
+	.nav-wrapper-cloud {
+		height: calc(100% - 88px);
+
+		.secondary-nav-items {
+			max-height: 30%;
+		}
+
+		.primary-nav-items {
+			max-height: 70%;
+		}
 	}
 
 	&.collapsed {
@@ -157,13 +186,15 @@
 			}
 		}
 
-		.secondary-nav-items {
-			border-top: 1px solid var(--bg-vanilla-400);
+		.nav-wrapper {
+			.secondary-nav-items {
+				border-top: 1px solid var(--bg-vanilla-400);
 
-			.collapse-expand-handlers {
-				svg {
-					color: var(--bg-slate-300);
-					fill: var(--bg-vanilla-400);
+				.collapse-expand-handlers {
+					svg {
+						color: var(--bg-slate-300);
+						fill: var(--bg-vanilla-400);
+					}
 				}
 			}
 		}
diff --git a/frontend/src/container/SideNav/SideNav.tsx b/frontend/src/container/SideNav/SideNav.tsx
index 6b11ae140c..8ff08ca85e 100644
--- a/frontend/src/container/SideNav/SideNav.tsx
+++ b/frontend/src/container/SideNav/SideNav.tsx
@@ -375,90 +375,92 @@ function SideNav({
 				</div>
 			)}
 
-			<div className="primary-nav-items">
-				{menuItems.map((item, index) => (
-					<NavItem
-						isCollapsed={collapsed}
-						key={item.key || index}
-						item={item}
-						isActive={activeMenuKey === item.key}
-						onClick={(event): void => {
-							handleMenuItemClick(event, item);
-						}}
-					/>
-				))}
-			</div>
-
-			<div className="secondary-nav-items">
-				<NavItem
-					isCollapsed={collapsed}
-					key="keyboardShortcuts"
-					item={shortcutMenuItem}
-					isActive={false}
-					onClick={onClickShortcuts}
-				/>
-
-				{licenseData && !isLicenseActive && (
-					<NavItem
-						isCollapsed={collapsed}
-						key="trySignozCloud"
-						item={trySignozCloudMenuItem}
-						isActive={false}
-						onClick={onClickSignozCloud}
-					/>
-				)}
-
-				{userManagementMenuItems.map(
-					(item, index): JSX.Element => (
+			<div className={cx(`nav-wrapper`, isCloudUserVal && 'nav-wrapper-cloud')}>
+				<div className="primary-nav-items">
+					{menuItems.map((item, index) => (
 						<NavItem
 							isCollapsed={collapsed}
-							key={item?.key || index}
+							key={item.key || index}
 							item={item}
-							isActive={activeMenuKey === item?.key}
-							onClick={(event: MouseEvent): void => {
-								handleUserManagentMenuItemClick(item?.key as string, event);
+							isActive={activeMenuKey === item.key}
+							onClick={(event): void => {
+								handleMenuItemClick(event, item);
 							}}
 						/>
-					),
-				)}
+					))}
+				</div>
 
-				{inviteMembers && (
+				<div className="secondary-nav-items">
 					<NavItem
 						isCollapsed={collapsed}
-						key={inviteMemberMenuItem.key}
-						item={inviteMemberMenuItem}
-						isActive={activeMenuKey === inviteMemberMenuItem?.key}
-						onClick={(event: React.MouseEvent): void => {
-							if (isCtrlMetaKey(event)) {
-								openInNewTab(`${inviteMemberMenuItem.key}`);
-							} else {
-								history.push(`${inviteMemberMenuItem.key}`);
-							}
-						}}
+						key="keyboardShortcuts"
+						item={shortcutMenuItem}
+						isActive={false}
+						onClick={onClickShortcuts}
 					/>
-				)}
 
-				{user && (
-					<NavItem
-						isCollapsed={collapsed}
-						key={ROUTES.MY_SETTINGS}
-						item={userSettingsMenuItem}
-						isActive={activeMenuKey === userSettingsMenuItem?.key}
-						onClick={(event: MouseEvent): void => {
-							handleUserManagentMenuItemClick(
-								userSettingsMenuItem?.key as string,
-								event,
-							);
-						}}
-					/>
-				)}
-
-				<div className="collapse-expand-handlers" onClick={onCollapse}>
-					{collapsed ? (
-						<ChevronRightCircle size={18} />
-					) : (
-						<ChevronLeftCircle size={18} />
+					{licenseData && !isLicenseActive && (
+						<NavItem
+							isCollapsed={collapsed}
+							key="trySignozCloud"
+							item={trySignozCloudMenuItem}
+							isActive={false}
+							onClick={onClickSignozCloud}
+						/>
 					)}
+
+					{userManagementMenuItems.map(
+						(item, index): JSX.Element => (
+							<NavItem
+								isCollapsed={collapsed}
+								key={item?.key || index}
+								item={item}
+								isActive={activeMenuKey === item?.key}
+								onClick={(event: MouseEvent): void => {
+									handleUserManagentMenuItemClick(item?.key as string, event);
+								}}
+							/>
+						),
+					)}
+
+					{inviteMembers && (
+						<NavItem
+							isCollapsed={collapsed}
+							key={inviteMemberMenuItem.key}
+							item={inviteMemberMenuItem}
+							isActive={activeMenuKey === inviteMemberMenuItem?.key}
+							onClick={(event: React.MouseEvent): void => {
+								if (isCtrlMetaKey(event)) {
+									openInNewTab(`${inviteMemberMenuItem.key}`);
+								} else {
+									history.push(`${inviteMemberMenuItem.key}`);
+								}
+							}}
+						/>
+					)}
+
+					{user && (
+						<NavItem
+							isCollapsed={collapsed}
+							key={ROUTES.MY_SETTINGS}
+							item={userSettingsMenuItem}
+							isActive={activeMenuKey === userSettingsMenuItem?.key}
+							onClick={(event: MouseEvent): void => {
+								handleUserManagentMenuItemClick(
+									userSettingsMenuItem?.key as string,
+									event,
+								);
+							}}
+						/>
+					)}
+
+					<div className="collapse-expand-handlers" onClick={onCollapse}>
+						{collapsed ? (
+							<ChevronRightCircle size={18} />
+						) : (
+							<ChevronLeftCircle size={18} />
+						)}
+					</div>
 				</div>
 			</div>
 		</div>