diff --git a/src/new-frontend/src/components/Sidebar.tsx b/src/new-frontend/src/components/Sidebar.tsx
index d2f2e83334..a67623076f 100644
--- a/src/new-frontend/src/components/Sidebar.tsx
+++ b/src/new-frontend/src/components/Sidebar.tsx
@@ -23,7 +23,7 @@ const Sidebar: React.FC = () => {
                         <Flex flexDir="column" justify="space-between" h="100%">
                             <Box>
                                 <Image src={Logo} alt="Logo" />
-                                <SidebarItems />
+                                <SidebarItems onClose={onClose} />
                             </Box>
                             <UserInfo />
                         </Flex>
diff --git a/src/new-frontend/src/components/SidebarItems.tsx b/src/new-frontend/src/components/SidebarItems.tsx
index 8970410d8c..7790111f80 100644
--- a/src/new-frontend/src/components/SidebarItems.tsx
+++ b/src/new-frontend/src/components/SidebarItems.tsx
@@ -12,12 +12,16 @@ const items = [
     { icon: FiLogOut, title: 'Log out' }
 ];
 
-const SidebarItems: React.FC = () => {
+interface SidebarItemsProps {
+    onClose?: () => void;
+}
+
+const SidebarItems: React.FC<SidebarItemsProps> = ({ onClose }) => {
     const listItems = items.map((item) => (
         <Flex w="100%" p={2} key={item.title} _hover={{
             background: "gray.200",
             borderRadius: "12px",
-        }}>
+        }} onClick={onClose}>
             <Link to={item.path || "/"}>
                 <Flex color="teal.500" gap={4}>
                     <Icon as={item.icon} alignSelf="center" />