diff --git a/frontend/src/component/menu/Header/Header.tsx b/frontend/src/component/menu/Header/Header.tsx
index a185609005..b5aeab14d1 100644
--- a/frontend/src/component/menu/Header/Header.tsx
+++ b/frontend/src/component/menu/Header/Header.tsx
@@ -16,7 +16,7 @@ import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { useCommonStyles } from 'themes/commonStyles';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
 import { IPermission } from 'interfaces/user';
-import NavigationMenu from './NavigationMenu/NavigationMenu';
+import { NavigationMenu } from './NavigationMenu/NavigationMenu';
 import { getRoutes } from 'component/menu/routes';
 import { KeyboardArrowDown } from '@material-ui/icons';
 import { filterByFlags } from 'component/common/util';
diff --git a/frontend/src/component/menu/Header/NavigationMenu/NavigationMenu.tsx b/frontend/src/component/menu/Header/NavigationMenu/NavigationMenu.tsx
index a76a155424..1abb7f867b 100644
--- a/frontend/src/component/menu/Header/NavigationMenu/NavigationMenu.tsx
+++ b/frontend/src/component/menu/Header/NavigationMenu/NavigationMenu.tsx
@@ -1,5 +1,6 @@
-import { Popover, List } from '@material-ui/core';
-import NavigationLink from '../NavigationLink/NavigationLink';
+import { Menu, MenuItem } from '@material-ui/core';
+import { Link } from 'react-router-dom';
+import { useStyles } from '../NavigationLink/NavigationLink.styles';
 
 interface INavigationMenuProps {
     options: any[];
@@ -9,36 +10,37 @@ interface INavigationMenuProps {
     style: Object;
 }
 
-const NavigationMenu = ({
+export const NavigationMenu = ({
     options,
     id,
     handleClose,
     anchorEl,
     style,
 }: INavigationMenuProps) => {
+    const styles = useStyles();
+
     return (
-        <Popover
+        <Menu
             id={id}
             onClose={handleClose}
             anchorEl={anchorEl}
             open={Boolean(anchorEl)}
-            onMouseLeave={handleClose}
             style={style}
         >
-            <List>
-                {options.map(option => {
-                    return (
-                        <NavigationLink
-                            key={option.path}
-                            handleClose={handleClose}
-                            path={option.path}
-                            text={option.title}
-                        />
-                    );
-                })}
-            </List>
-        </Popover>
+            {options.map(option => {
+                return (
+                    <MenuItem
+                        key={option.path}
+                        component={Link}
+                        to={option.path}
+                        onClick={handleClose}
+                        classes={{ root: styles.navMenuLink }}
+                    >
+                        <span className={styles.menuItemBox} />
+                        {option.title}
+                    </MenuItem>
+                );
+            })}
+        </Menu>
     );
 };
-
-export default NavigationMenu;