diff --git a/src/menu/menu-item.component.js b/src/menu/menu-item.component.js
index b01c7ef..ed0679b 100644
--- a/src/menu/menu-item.component.js
+++ b/src/menu/menu-item.component.js
@@ -1,11 +1,22 @@
 import React from 'react';
 
+import { styled } from '@mui/material/styles';
+
 import { MenuItem as MuiMenuItem } from '@mui/material';
-import { makeStyles } from '@mui/styles';
+const PREFIX = 'menu-item';
+
+const classes = {
+  root: `${PREFIX}-root`,
+};
 
-const menuItemStyles = makeStyles(theme => ({
-  root: {
-    padding: theme.spacing(0.5),
+const StyledMuiMenuItem = styled(MuiMenuItem)(({ theme }) => ({
+  [`&.${classes.root}`]: {
+    padding: '0.2rem 0.5rem',
+    margin: '0.1rem 0.15rem',
+    backgroundColor: '#5d666e',
+    ':hover' : {
+      backgroundColor: 'rgb(71, 82, 90)',
+    },
     '& + &': {
       borderTop: `1px solid ${theme.palette.divider}`,
     },
@@ -26,8 +37,7 @@ const menuItemStyles = makeStyles(theme => ({
  */
 
 const MenuItem = (props, ref) => {
-  const menuItemClasses = menuItemStyles(props);
-  return <MuiMenuItem classes={menuItemClasses} {...props} ref={ref} />;
+  return <StyledMuiMenuItem className={classes.root} {...props} ref={ref} />;
 };
 
 export default React.forwardRef(MenuItem);
diff --git a/src/menu/menu.component.js b/src/menu/menu.component.js
index 309ca00..1f5eafd 100644
--- a/src/menu/menu.component.js
+++ b/src/menu/menu.component.js
@@ -4,16 +4,18 @@ import { styled } from '@mui/material/styles';
 
 import { Menu as MuiMenu } from '@mui/material';
 
-const PREFIX = 'MarkMenu';
+const PREFIX = 'Menu';
 
 const classes = {
   list: `${PREFIX}-list`,
 };
 
 const StyledMuiMenu = styled(MuiMenu)(({ theme }) => ({
-  [`&.${classes.list}`]: {
-    marginLeft: theme.spacing(1),
-    marginRight: theme.spacing(1),
+  [`& .${classes.list}`]: {
+    backgroundColor: '#5d666e',
+    marginLeft: theme.spacing(-0.25),
+    marginRight: theme.spacing(-0.5),
+    marginTop: '-10px',
     padding: '5rem',
   },
 }));
@@ -25,7 +27,6 @@ const StyledMuiMenu = styled(MuiMenu)(({ theme }) => ({
 
 const Menu = (props, ref) => {
   return <StyledMuiMenu className={classes.list} {...props} ref={ref} />;
-  // return <StyledMuiMenu classes={classes} {...props} ref={ref} />;
 };
 
 export default React.forwardRef(Menu);
diff --git a/src/themes/dark.js b/src/themes/dark.js
index c617cbd..53b8c02 100644
--- a/src/themes/dark.js
+++ b/src/themes/dark.js
@@ -103,11 +103,20 @@ const dark = {
     //     },
     //   },
     // },
+    MuiMenu: {
+      styleOverrides: {
+        list: {
+          backgroundColor: '#5d666e',
+        },
+      },
+    },
     MuiMenuItem: {
       styleOverrides: {
         root: {
+          backgroundColor: '#5d666e',
           '&:hover': {
-            backgroundColor: lighten(coreTheme.palette.background.default, 0.1),
+            // backgroundColor: lighten(coreTheme.palette.background.default, 0.1),
+            backgroundColor: 'rgb(71, 82, 90)',
           },
         },
       },