diff --git a/ui/src/common/useMenuTooltipStyles.js b/ui/src/common/useMenuTooltipStyles.js
index 46b89ba68..222f729f9 100644
--- a/ui/src/common/useMenuTooltipStyles.js
+++ b/ui/src/common/useMenuTooltipStyles.js
@@ -1,20 +1,23 @@
 import { makeStyles } from '@material-ui/core/styles'
 
-const useMenuTooltipStyles = makeStyles((theme) => {
-  const paperRoot = theme.overrides?.MuiPaper?.root || {}
-
-  return {
+const useMenuTooltipStyles = makeStyles(
+  (theme) => ({
     tooltip: {
       backgroundColor:
-        paperRoot.backgroundColor || theme.palette.background.paper,
-      color: paperRoot.color || theme.palette.text.primary,
-      boxShadow: theme.shadows[8],
+        theme.palette.type === 'dark'
+          ? 'rgba(97, 97, 97, 0.92)'
+          : 'rgba(224, 224, 224, 0.92)',
+      color:
+        theme.palette.type === 'dark'
+          ? theme.palette.common.white
+          : theme.palette.common.black,
       borderRadius: theme.shape.borderRadius,
-      ...theme.typography.body1,
-      padding: theme.spacing(1, 2),
-      maxWidth: '30vw',
+      ...theme.typography.body2,
+      padding: theme.spacing(0.5, 1),
+      maxWidth: 300,
     },
-  }
-})
+  }),
+  { name: 'NDOverflowTooltip' },
+)
 
 export default useMenuTooltipStyles