diff --git a/apps/web/src/components/menu/index.js b/apps/web/src/components/menu/index.js
index 400f6a1d8..f3f12d7cc 100644
--- a/apps/web/src/components/menu/index.js
+++ b/apps/web/src/components/menu/index.js
@@ -18,7 +18,7 @@ along with this program. If not, see .
*/
import React, { useCallback, useRef, useEffect, useState } from "react";
-import { Flex, Text } from "@theme-ui/components";
+import { Flex } from "@theme-ui/components";
import { getPosition } from "../../hooks/use-menu";
import { FlexScrollContainer } from "../scroll-container";
import MenuItem from "./menu-item";
@@ -228,23 +228,6 @@ function MenuContainer({ title, children }) {
flexDirection: "column"
}}
>
- {title && (
-
- {title}
-
- )}
{children}
);
diff --git a/apps/web/src/components/menu/menu-item.js b/apps/web/src/components/menu/menu-item.js
index e77f6df00..f4f669c6c 100644
--- a/apps/web/src/components/menu/menu-item.js
+++ b/apps/web/src/components/menu/menu-item.js
@@ -40,11 +40,10 @@ function MenuItem({ item, isFocused, onMouseEnter, onMouseLeave, onClick }) {
if (type === "separator")
return (
);
@@ -69,19 +68,24 @@ function MenuItem({ item, isFocused, onMouseEnter, onMouseLeave, onClick }) {
bg: isFocused ? "border" : "transparent",
alignItems: "center",
justifyContent: "space-between",
- display: "flex"
+ display: "flex",
+ py: "7px",
+ px: 2,
+ mx: 1,
+ borderRadius: "default"
}}
>
-
+
{Icon && (
-
+
)}
{title}