diff --git a/apps/web/src/components/menu/index.js b/apps/web/src/components/menu/index.js
index 4e9962557..8efc0e9af 100644
--- a/apps/web/src/components/menu/index.js
+++ b/apps/web/src/components/menu/index.js
@@ -9,6 +9,19 @@ function useMenuFocus(items, onAction) {
   const [focusIndex, setFocusIndex] = useState(-1);
   const [isSubmenuOpen, setIsSubmenuOpen] = useState(false);
 
+  const moveItemIntoView = useCallback(
+    (index) => {
+      const item = items[index];
+      if (!item) return;
+      const element = document.getElementById(item.key);
+      if (!element) return;
+      element.scrollIntoView({
+        behavior: "auto",
+      });
+    },
+    [items]
+  );
+
   const onKeyDown = useCallback(
     (e) => {
       const isSeperator = (i) => items && items[i]?.type === "seperator";
@@ -51,11 +64,12 @@ function useMenuFocus(items, onAction) {
           default:
             break;
         }
+        if (nextIndex !== i) moveItemIntoView(nextIndex);
 
         return nextIndex;
       });
     },
-    [items, isSubmenuOpen, onAction]
+    [items, isSubmenuOpen, moveItemIntoView, onAction]
   );
 
   useEffect(() => {
@@ -88,14 +102,6 @@ function Menu({ items, data, title, closeMenu }) {
       if (item) onAction(e, item);
     });
 
-  useEffect(() => {
-    const item = items[focusIndex];
-    if (!item) return;
-    const element = document.getElementById(item.key);
-    if (!element) return;
-    element.scrollIntoView({ behavior: "auto" });
-  }, [focusIndex, items]);
-
   const subMenuRef = useRef();
   useEffect(() => {
     const item = items[focusIndex];