diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.tsx b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.tsx
index de96b43f2..28d3215d4 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.tsx
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.tsx
@@ -154,14 +154,9 @@ const AlertMenu: FC<{
     const [isHidden, setIsHidden] = useState<boolean>(true);
 
     const toggle = useCallback(() => {
-      window.dispatchEvent(
-        new CustomEvent("gridMenuOpen", {
-          detail: { isOpen: isHidden, labelValue: grid.labelValue },
-        })
-      );
       setIsMenuOpen(isHidden);
       setIsHidden(!isHidden);
-    }, [grid.labelValue, isHidden, setIsMenuOpen]);
+    }, [isHidden, setIsMenuOpen]);
 
     const hide = useCallback(() => {
       setIsHidden(true);
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.tsx b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.tsx
index 3b44db623..3e75b5e1e 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.tsx
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.tsx
@@ -153,14 +153,9 @@ const GroupMenu: FC<{
   const [isHidden, setIsHidden] = useState<boolean>(true);
 
   const toggle = useCallback(() => {
-    window.dispatchEvent(
-      new CustomEvent("gridMenuOpen", {
-        detail: { isOpen: isHidden, labelValue: grid.labelValue },
-      })
-    );
     setIsMenuOpen(isHidden);
     setIsHidden(!isHidden);
-  }, [setIsMenuOpen, isHidden, grid.labelValue]);
+  }, [setIsMenuOpen, isHidden]);
 
   const hide = useCallback(() => {
     setIsHidden(true);
diff --git a/ui/src/Components/Grid/AlertGrid/Grid.tsx b/ui/src/Components/Grid/AlertGrid/Grid.tsx
index 92b09d209..90b37d02c 100644
--- a/ui/src/Components/Grid/AlertGrid/Grid.tsx
+++ b/ui/src/Components/Grid/AlertGrid/Grid.tsx
@@ -40,6 +40,7 @@ const Grid: FC<{
   grid: APIGridT;
   outerPadding: number;
   paddingTop: number;
+  zIndex: number;
 }> = ({
   alertStore,
   settingsStore,
@@ -49,6 +50,7 @@ const Grid: FC<{
   grid,
   outerPadding,
   paddingTop,
+  zIndex,
 }) => {
   const context = React.useContext(ThemeContext);
   const { ref, repack } = useGrid(gridSizesConfig);
@@ -109,27 +111,11 @@ const Grid: FC<{
     repack();
   });
 
-  const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
-  const onMenuOpen = useCallback(
-    (event) => {
-      if (event.detail.labelValue === grid.labelValue) {
-        setIsMenuOpen(event.detail.isOpen);
-      }
-    },
-    [grid.labelValue]
-  );
-  useEffect(() => {
-    window.addEventListener("gridMenuOpen", onMenuOpen);
-    return () => {
-      window.removeEventListener("gridMenuOpen", onMenuOpen);
-    };
-  }, [onMenuOpen]);
-
   return (
     <div
       style={{
-        position: isMenuOpen ? "relative" : undefined,
-        zIndex: isMenuOpen ? 102 : undefined,
+        position: "relative",
+        zIndex: zIndex,
       }}
     >
       <CSSTransition
diff --git a/ui/src/Components/Grid/AlertGrid/GridLabelSelect.test.tsx b/ui/src/Components/Grid/AlertGrid/GridLabelSelect.test.tsx
index 8e57b269f..d95f236c9 100644
--- a/ui/src/Components/Grid/AlertGrid/GridLabelSelect.test.tsx
+++ b/ui/src/Components/Grid/AlertGrid/GridLabelSelect.test.tsx
@@ -176,7 +176,7 @@ describe("<GridLabelSelect />", () => {
 
     tree.find("span.components-grid-label-select-dropdown").simulate("click");
     expect(tree.find("div.components-grid-label-select-menu")).toHaveLength(1);
-    expect(tree.find("div").at(1).props().style?.zIndex).toBe(102);
+    expect(tree.find("div").at(1).props().style?.zIndex).toBe(101);
 
     tree.find("span.components-grid-label-select-dropdown").simulate("click");
     act(() => {
@@ -184,82 +184,8 @@ describe("<GridLabelSelect />", () => {
     });
     tree.update();
     expect(tree.find("div.components-grid-label-select-menu")).toHaveLength(0);
-    expect(tree.find("div").at(1).props().style?.zIndex).toBeUndefined();
+    expect(tree.find("div").at(1).props().style?.zIndex).toBe(101);
 
     await act(() => promise);
   });
-
-  it("sending event from current grid sets z-index", () => {
-    alertStore.data.setGrids([
-      {
-        labelName: "foo",
-        labelValue: "baz",
-        alertGroups: [],
-        totalGroups: 0,
-        stateCount: {
-          unprocessed: 1,
-          suppressed: 2,
-          active: 3,
-        },
-      },
-    ]);
-    const tree = mount(
-      <AlertGrid
-        alertStore={alertStore}
-        settingsStore={settingsStore}
-        silenceFormStore={silenceFormStore}
-      />,
-      {
-        wrappingComponent: ThemeContext.Provider,
-        wrappingComponentProps: { value: MockThemeContextWithoutAnimations },
-      }
-    );
-
-    act(() => {
-      window.dispatchEvent(
-        new CustomEvent("gridMenuOpen", {
-          detail: { isOpen: true, labelValue: "baz" },
-        })
-      );
-    });
-    tree.update();
-    expect(tree.find("div").at(1).props().style?.zIndex).toBe(102);
-  });
-
-  it("sending event from a different grid is ignored", () => {
-    alertStore.data.setGrids([
-      {
-        labelName: "foo",
-        labelValue: "baz",
-        alertGroups: [],
-        totalGroups: 0,
-        stateCount: {
-          unprocessed: 1,
-          suppressed: 2,
-          active: 3,
-        },
-      },
-    ]);
-    const tree = mount(
-      <AlertGrid
-        alertStore={alertStore}
-        settingsStore={settingsStore}
-        silenceFormStore={silenceFormStore}
-      />,
-      {
-        wrappingComponent: ThemeContext.Provider,
-        wrappingComponentProps: { value: MockThemeContextWithoutAnimations },
-      }
-    );
-
-    act(() => {
-      window.dispatchEvent(
-        new CustomEvent("gridMenuOpen", {
-          detail: { isOpen: true, labelValue: "fake" },
-        })
-      );
-    });
-    tree.update();
-    expect(tree.find("div").at(1).props().style?.zIndex).toBeUndefined();
-  });
 });
diff --git a/ui/src/Components/Grid/AlertGrid/GridLabelSelect.tsx b/ui/src/Components/Grid/AlertGrid/GridLabelSelect.tsx
index 52e6a7fe3..067a1386b 100644
--- a/ui/src/Components/Grid/AlertGrid/GridLabelSelect.tsx
+++ b/ui/src/Components/Grid/AlertGrid/GridLabelSelect.tsx
@@ -135,21 +135,8 @@ const GridLabelSelect: FC<{
   const [isVisible, setIsVisible] = useState<boolean>(false);
   const hide = useCallback(() => setIsVisible(false), []);
   const toggle = useCallback(() => {
-    if (isVisible) {
-      window.dispatchEvent(
-        new CustomEvent("gridMenuOpen", {
-          detail: { isOpen: false, labelValue: grid.labelValue },
-        })
-      );
-    } else {
-      window.dispatchEvent(
-        new CustomEvent("gridMenuOpen", {
-          detail: { isOpen: true, labelValue: grid.labelValue },
-        })
-      );
-    }
     setIsVisible(!isVisible);
-  }, [isVisible, grid.labelValue]);
+  }, [isVisible]);
   const ref = useRef<HTMLDivElement | null>(null);
   useOnClickOutside(ref, hide, isVisible);
 
diff --git a/ui/src/Components/Grid/AlertGrid/index.test.tsx b/ui/src/Components/Grid/AlertGrid/index.test.tsx
index 75bdf0edf..44e065fce 100644
--- a/ui/src/Components/Grid/AlertGrid/index.test.tsx
+++ b/ui/src/Components/Grid/AlertGrid/index.test.tsx
@@ -115,6 +115,7 @@ const ShallowGrid = () => {
       grid={MockGrid()}
       outerPadding={0}
       paddingTop={0}
+      zIndex={101}
     />
   );
 };
@@ -130,6 +131,7 @@ const MountedGrid = (theme?: ThemeCtx) => {
       grid={MockGrid()}
       outerPadding={0}
       paddingTop={0}
+      zIndex={101}
     />,
     {
       wrappingComponent: ThemeContext.Provider,
@@ -237,6 +239,7 @@ describe("<Grid />", () => {
         grid={alertStore.data.grids[0]}
         outerPadding={0}
         paddingTop={0}
+        zIndex={101}
       />,
       {
         wrappingComponent: ThemeContext.Provider,
@@ -273,6 +276,7 @@ describe("<Grid />", () => {
         grid={alertStore.data.grids[0]}
         outerPadding={0}
         paddingTop={0}
+        zIndex={101}
       />,
       {
         wrappingComponent: ThemeContext.Provider,
diff --git a/ui/src/Components/Grid/AlertGrid/index.tsx b/ui/src/Components/Grid/AlertGrid/index.tsx
index da5e7967a..0c96b4e2b 100644
--- a/ui/src/Components/Grid/AlertGrid/index.tsx
+++ b/ui/src/Components/Grid/AlertGrid/index.tsx
@@ -76,7 +76,7 @@ const AlertGrid: FC<{
           ref.current = el as HTMLDivElement;
         }}
       />
-      {alertStore.data.grids.map((grid) => (
+      {alertStore.data.grids.map((grid, index) => (
         <Grid
           key={`${grid.labelName}/${grid.labelValue}`}
           alertStore={alertStore}
@@ -87,6 +87,7 @@ const AlertGrid: FC<{
           grid={grid}
           outerPadding={alertStore.data.gridPadding}
           paddingTop={paddingTop}
+          zIndex={100 + alertStore.data.grids.length - index}
         />
       ))}
     </>