diff --git a/frontend/src/container/SideNav/index.tsx b/frontend/src/container/SideNav/index.tsx
index a033854e86..24e888797c 100644
--- a/frontend/src/container/SideNav/index.tsx
+++ b/frontend/src/container/SideNav/index.tsx
@@ -98,7 +98,7 @@ function SideNav(): JSX.Element {
 	);
 
 	const items = [
-		...menus.map(({ to, Icon, name, tags }) => ({
+		...menus.map(({ to, Icon, name, tags, children }) => ({
 			key: to,
 			icon: <Icon />,
 			onClick: (): void => onClickHandler(to),
@@ -113,6 +113,7 @@ function SideNav(): JSX.Element {
 						))}
 				</Space>
 			),
+			children,
 		})),
 	];
 
@@ -129,7 +130,7 @@ function SideNav(): JSX.Element {
 				theme="dark"
 				defaultSelectedKeys={[ROUTES.APPLICATION]}
 				selectedKeys={currentMenu ? [currentMenu?.to] : []}
-				mode="inline"
+				mode="vertical"
 				style={styles}
 				items={items}
 			/>
diff --git a/frontend/src/container/SideNav/menuItems.ts b/frontend/src/container/SideNav/menuItems.ts
index a900e366eb..5be9c9b9a1 100644
--- a/frontend/src/container/SideNav/menuItems.ts
+++ b/frontend/src/container/SideNav/menuItems.ts
@@ -10,6 +10,7 @@ import {
 	MenuOutlined,
 	SettingOutlined,
 } from '@ant-design/icons';
+import type { MenuProps } from 'antd';
 import ROUTES from 'constants/routes';
 
 const menus: SidebarMenu[] = [
@@ -28,6 +29,12 @@ const menus: SidebarMenu[] = [
 		to: ROUTES.LOGS,
 		name: 'Logs',
 		// tags: ['Beta'],
+		children: [
+			{
+				key: ROUTES.LOGS,
+				label: 'Search',
+			},
+		],
 	},
 	{
 		Icon: DashboardFilled,
@@ -71,6 +78,7 @@ interface SidebarMenu {
 	name: string;
 	Icon: typeof ApiOutlined;
 	tags?: string[];
+	children?: Required<MenuProps>['items'][number][];
 }
 
 export default menus;