diff --git a/frontend/src/component/common/DialogFormTemplate/ConfigButtons/ConfigButton.styles.tsx b/frontend/src/component/common/DialogFormTemplate/ConfigButtons/ConfigButton.styles.tsx
index 8e5b7df8c7..218e24e606 100644
--- a/frontend/src/component/common/DialogFormTemplate/ConfigButtons/ConfigButton.styles.tsx
+++ b/frontend/src/component/common/DialogFormTemplate/ConfigButtons/ConfigButton.styles.tsx
@@ -1,18 +1,4 @@
-import { Popover, styled } from '@mui/material';
-
-export const StyledDropdown = styled('div')(({ theme }) => ({
-    padding: theme.spacing(2),
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(1),
-    maxHeight: '70vh',
-}));
-
-export const StyledPopover = styled(Popover)(({ theme }) => ({
-    '& .MuiPaper-root': {
-        borderRadius: `${theme.shape.borderRadiusMedium}px`,
-    },
-}));
+import { styled } from '@mui/material';
 
 export const ButtonLabel = styled('span', {
     shouldForwardProp: (prop) => prop !== 'labelWidth',
diff --git a/frontend/src/component/common/DialogFormTemplate/ConfigButtons/ConfigButton.tsx b/frontend/src/component/common/DialogFormTemplate/ConfigButtons/ConfigButton.tsx
index bd0feafe6c..fdc803b729 100644
--- a/frontend/src/component/common/DialogFormTemplate/ConfigButtons/ConfigButton.tsx
+++ b/frontend/src/component/common/DialogFormTemplate/ConfigButtons/ConfigButton.tsx
@@ -1,14 +1,10 @@
 import { v4 as uuidv4 } from 'uuid';
 import { type FC, type ReactNode, useRef, type PropsWithChildren } from 'react';
 import { Box, Button } from '@mui/material';
-import {
-    StyledDropdown,
-    StyledPopover,
-    ButtonLabel,
-    StyledTooltipContent,
-} from './ConfigButton.styles';
+import { ButtonLabel, StyledTooltipContent } from './ConfigButton.styles';
 import { TooltipResolver } from 'component/common/TooltipResolver/TooltipResolver';
 import { ScreenReaderOnly } from 'component/common/ScreenReaderOnly/ScreenReaderOnly';
+import { StyledPopover } from './shared.styles';
 
 export type ConfigButtonProps = {
     button: {
@@ -94,13 +90,12 @@ export const ConfigButton: FC<PropsWithChildren<ConfigButtonProps>> = ({
                     vertical: 'top',
                     horizontal: 'left',
                 }}
+                aria-describedby={descriptionId}
             >
                 <ScreenReaderOnly>
                     <p id={descriptionId}>{description}</p>
                 </ScreenReaderOnly>
-                <StyledDropdown aria-describedby={descriptionId}>
-                    {children}
-                </StyledDropdown>
+                {children}
             </StyledPopover>
         </>
     );
diff --git a/frontend/src/component/common/DialogFormTemplate/ConfigButtons/DropdownList.styles.tsx b/frontend/src/component/common/DialogFormTemplate/ConfigButtons/DropdownList.styles.tsx
index ca73fd0151..fe6e95e0e0 100644
--- a/frontend/src/component/common/DialogFormTemplate/ConfigButtons/DropdownList.styles.tsx
+++ b/frontend/src/component/common/DialogFormTemplate/ConfigButtons/DropdownList.styles.tsx
@@ -1,8 +1,10 @@
 import { Checkbox, ListItem, styled } from '@mui/material';
 
 export const StyledListItem = styled(ListItem)(({ theme }) => ({
-    paddingLeft: theme.spacing(1),
+    paddingLeft: theme.spacing(2),
+    paddingBlock: theme.spacing(1),
     cursor: 'pointer',
+
     '&:hover, &:focus': {
         backgroundColor: theme.palette.action.hover,
         outline: 'none',
diff --git a/frontend/src/component/common/DialogFormTemplate/ConfigButtons/shared.styles.tsx b/frontend/src/component/common/DialogFormTemplate/ConfigButtons/shared.styles.tsx
index 9014ff2a49..9b28913c76 100644
--- a/frontend/src/component/common/DialogFormTemplate/ConfigButtons/shared.styles.tsx
+++ b/frontend/src/component/common/DialogFormTemplate/ConfigButtons/shared.styles.tsx
@@ -1,4 +1,4 @@
-import { TextField, styled } from '@mui/material';
+import { Popover, TextField, styled } from '@mui/material';
 
 const visuallyHiddenStyles = {
     border: 0,
@@ -12,11 +12,27 @@ const visuallyHiddenStyles = {
     whiteSpace: 'nowrap',
 };
 
+const dropdownPadding = 1.5;
+
+export const StyledPopover = styled(Popover)(({ theme }) => ({
+    '& .MuiPaper-root': {
+        borderRadius: `${theme.shape.borderRadiusMedium}px`,
+        paddingInline: 0,
+        paddingTop: theme.spacing(dropdownPadding),
+        display: 'flex',
+        flexDirection: 'column',
+
+        gap: theme.spacing(1),
+        maxHeight: '70vh',
+    },
+}));
+
 export const StyledDropdownSearch = styled(TextField, {
     shouldForwardProp: (prop) => prop !== 'hideLabel',
 })<{ hideLabel?: boolean }>(({ theme, hideLabel }) => ({
+    paddingInline: theme.spacing(dropdownPadding),
     '& .MuiInputBase-root': {
-        padding: theme.spacing(0, 1.5),
+        paddingInline: theme.spacing(1.5),
         borderRadius: `${theme.shape.borderRadiusMedium}px`,
     },
     '& .MuiInputBase-input': {
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/EnvironmentVisibilityMenu/EnvironmentVisibilityMenu.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/EnvironmentVisibilityMenu/EnvironmentVisibilityMenu.tsx
index 27f6a2d9bf..e166e330aa 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/EnvironmentVisibilityMenu/EnvironmentVisibilityMenu.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/EnvironmentVisibilityMenu/EnvironmentVisibilityMenu.tsx
@@ -1,8 +1,10 @@
-import { Button, Checkbox, Menu, MenuItem, styled } from '@mui/material';
+import { Button, styled } from '@mui/material';
 import { useState, type FC } from 'react';
 
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import { DropdownList } from 'component/common/DialogFormTemplate/ConfigButtons/DropdownList';
+import { StyledPopover } from 'component/common/DialogFormTemplate/ConfigButtons/shared.styles';
 
 type EnvironmentVisibilityMenuProps = {
     environments: Array<{ name: string }>;
@@ -33,6 +35,18 @@ export const EnvironmentVisibilityMenu: FC<EnvironmentVisibilityMenuProps> = ({
         setAnchorEl(null);
     };
 
+    const allEnvironments = environments.map((environment) => environment.name);
+
+    const selectedOptions = new Set(
+        allEnvironments.filter(
+            (environment) => !hiddenEnvironments.includes(environment),
+        ),
+    );
+
+    const handleToggle = (value: string) => {
+        onChange(value);
+    };
+
     return (
         <StyledContainer>
             <Button
@@ -40,30 +54,43 @@ export const EnvironmentVisibilityMenu: FC<EnvironmentVisibilityMenuProps> = ({
                 endIcon={isOpen ? <ExpandLessIcon /> : <ExpandMoreIcon />}
                 variant='outlined'
                 id={buttonId}
-                aria-controls={isOpen ? menuId : undefined}
+                aria-controls={menuId}
                 aria-haspopup='true'
                 aria-expanded={isOpen ? 'true' : undefined}
                 data-loading
             >
                 Hide/show environments
             </Button>
-            <Menu
+
+            <StyledPopover
                 id={menuId}
+                open={Boolean(anchorEl)}
                 anchorEl={anchorEl}
-                open={isOpen}
                 onClose={handleClose}
-                MenuListProps={{ 'aria-labelledby': buttonId }}
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'left',
+                }}
+                transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'left',
+                }}
             >
-                {environments.map(({ name }) => (
-                    <MenuItem key={name} onClick={() => onChange(name)}>
-                        <Checkbox
-                            onChange={() => onChange(name)}
-                            checked={!hiddenEnvironments?.includes(name)}
-                        />
-                        {name}
-                    </MenuItem>
-                ))}
-            </Menu>
+                <DropdownList
+                    multiselect={{
+                        selectedOptions,
+                    }}
+                    onChange={handleToggle}
+                    options={allEnvironments.map((env) => ({
+                        label: env,
+                        value: env,
+                    }))}
+                    search={{
+                        label: 'Filter environments',
+                        placeholder: 'Filter environments',
+                    }}
+                />
+            </StyledPopover>
         </StyledContainer>
     );
 };