diff --git a/src/modules/moduleWrapper.tsx b/src/modules/moduleWrapper.tsx
index e3c4bbb8a..94cb1ffb4 100644
--- a/src/modules/moduleWrapper.tsx
+++ b/src/modules/moduleWrapper.tsx
@@ -181,6 +181,9 @@ export function ModuleWrapper(props: any) {
 export function ModuleMenu(props: any) {
   const { module, styles, hovered } = props;
   const items: JSX.Element[] = getItems(module);
+  if (!hovered) {
+    return null;
+  }
   return (
     <>
       {module.options && (
@@ -207,12 +210,7 @@ export function ModuleMenu(props: any) {
                 right: 12,
               }}
             >
-              <motion.div
-                animate={{
-                  //TODO: fix the hover problem
-                  opacity: hovered ? 1 : 1,
-                }}
-              >
+              <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
                 <ActionIcon>
                   <IconAdjustments />
                 </ActionIcon>