diff --git a/src/components/Navigation/EnvironmentBar/EnvironmentMenu/index.tsx b/src/components/Navigation/EnvironmentBar/EnvironmentMenu/index.tsx
index 97bf24b90..a9b2d5b13 100644
--- a/src/components/Navigation/EnvironmentBar/EnvironmentMenu/index.tsx
+++ b/src/components/Navigation/EnvironmentBar/EnvironmentMenu/index.tsx
@@ -1,3 +1,5 @@
+import { useEffect } from "react";
+import useDimensions from "react-cool-dimensions";
 import { useConfigSelector } from "../../../../store/config/useConfigSelector";
 import { Environment } from "../../../common/App/types";
 import { EnvironmentIcon } from "../../../common/EnvironmentIcon";
@@ -14,9 +16,11 @@ export const EnvironmentMenu = ({
   const handleMenuItemClick = (environment: Environment) => {
     onMenuItemClick(environment);
   };
+  const { observe, height } = useDimensions();
+  useEffect(() => observe(document.body), []);
 
   return (
-    <s.EnvironmentMenuPopup height={"140px"}>
+    <s.EnvironmentMenuPopup height={`${height * 0.55}px`}>
       <MenuList
         highlightSelected={true}
         showGroupNames={true}
diff --git a/src/components/Navigation/EnvironmentBar/mockData.ts b/src/components/Navigation/EnvironmentBar/mockData.ts
index e67c83121..5d65dbed9 100644
--- a/src/components/Navigation/EnvironmentBar/mockData.ts
+++ b/src/components/Navigation/EnvironmentBar/mockData.ts
@@ -1,6 +1,6 @@
 import { Environment } from "../../common/App/types";
 
-export const mockedEnvironments: Environment[] = new Array(5)
+export const mockedEnvironments: Environment[] = new Array(35)
   .fill(5)
   .map((_, i) => {
     const id = `ENV${i + 1}`;