diff --git a/apps/web/src/components/navbar/navbar.tsx b/apps/web/src/components/navbar/navbar.tsx
index c8554d0642a13cc091fe35e9ce93f677a310757a..d6c6923a71a7b5e705e98abf9efeb90f3385f882 100644
--- a/apps/web/src/components/navbar/navbar.tsx
+++ b/apps/web/src/components/navbar/navbar.tsx
@@ -13,7 +13,7 @@ import logo_white from './gp-logo-white.svg';
 import logo from './gp-logo.svg';
 import { useAuthorizationCache, useAuth } from '@graphpolaris/shared/lib/data-access';
 import DatabaseSelector from './DatabaseManagement/dbConnectionSelector';
-import { DropdownItem } from '@graphpolaris/shared/lib/components/dropdowns';
+import { DropdownItem, DropdownItemContainer } from '@graphpolaris/shared/lib/components/dropdowns';
 import GpLogo from './gp-logo';
 import { Popover, PopoverContent, PopoverTrigger } from '@graphpolaris/shared/lib/components/layout/Popover';
 
diff --git a/libs/shared/lib/components/dropdowns/index.tsx b/libs/shared/lib/components/dropdowns/index.tsx
index cc2171f8450ce533bac7d0d9fbc5a953ecaf7322..7a56352d39aff1b3a8d870826a0100c827b4b518 100644
--- a/libs/shared/lib/components/dropdowns/index.tsx
+++ b/libs/shared/lib/components/dropdowns/index.tsx
@@ -12,11 +12,10 @@ type DropdownTriggerProps = {
   disabled?: boolean;
   variant?: 'primary' | 'ghost' | 'outline';
   className?: string;
-  popover?: boolean;
   onClick?: () => void;
 };
 
-export function DropdownTrigger({ title, size, disabled, variant, className, onClick, popover = true }: DropdownTriggerProps) {
+export function DropdownTrigger({ title, size, disabled, variant, className, onClick }: DropdownTriggerProps) {
   const paddingClass = size === 'xs' ? 'py-0' : size === 'sm' ? 'px-1 py-1' : size === 'md' ? 'px-2 py-1' : 'px-4 py-2';
   const textSizeClass = size === 'xs' ? 'text-xs' : size === 'sm' ? 'text-sm' : size === 'md' ? 'text-base' : 'text-lg';
 
@@ -26,25 +25,16 @@ export function DropdownTrigger({ title, size, disabled, variant, className, onC
       : variant === 'ghost'
         ? 'bg-transparent shadow-none'
         : 'border rounded bg-transparent';
-
-  const inner = (
-    <div
-      className={`inline-flex w-full truncate justify-between items-center gap-x-1.5 ${variantClass} ${textSizeClass} ${paddingClass} text-secondary-900 shadow-sm hover:bg-secondary-50 disabled:bg-secondary-100 disabled:cursor-not-allowed disabled:text-secondary-400 pl-1 truncate${className ? ` ${className}` : ''}`}
-    >
-      <span className={`text-${size}`}>{title}</span>
-      <Icon component={<ArrowDropDown />} size={16} />
-    </div>
+  return (
+    <PopoverTrigger onClick={onClick}>
+      <div
+        className={`inline-flex w-full truncate justify-between items-center gap-x-1.5 ${variantClass} ${textSizeClass} ${paddingClass} text-secondary-900 shadow-sm hover:bg-secondary-50 disabled:bg-secondary-100 disabled:cursor-not-allowed disabled:text-secondary-400 pl-1 truncate${className ? ` ${className}` : ''}`}
+      >
+        <span className={`text-${size}`}>{title}</span>
+        <Icon component={<ArrowDropDown />} size={16} />
+      </div>
+    </PopoverTrigger>
   );
-
-  if (popover) {
-    return <PopoverTrigger onClick={onClick}>{inner}</PopoverTrigger>;
-  } else
-    return (
-      <button className="w-full" onClick={onClick}>
-        {' '}
-        {inner}
-      </button>
-    );
 }
 
 type DropdownItemContainerProps = {
diff --git a/libs/shared/lib/querybuilder/panel/querysidepanel/queryMLDialog.tsx b/libs/shared/lib/querybuilder/panel/querysidepanel/queryMLDialog.tsx
index 8fd52cdd709f141e32f733945e1656ea1317d488..213807e6b3ef233141a41e3cff883573b363b606 100644
--- a/libs/shared/lib/querybuilder/panel/querysidepanel/queryMLDialog.tsx
+++ b/libs/shared/lib/querybuilder/panel/querysidepanel/queryMLDialog.tsx
@@ -8,6 +8,7 @@ import {
 } from '@graphpolaris/shared/lib/data-access/store/mlSlice';
 import { FormDiv, FormCard, FormBody, FormTitle, FormHBar } from '@graphpolaris/shared/lib/components/forms';
 import { Input } from '@graphpolaris/shared/lib/components/inputs';
+import { PopoverTrigger } from '@graphpolaris/shared/lib/components/layout/Popover';
 
 export const QueryMLDialog = () => {
   const dispatch = useAppDispatch();
diff --git a/libs/shared/lib/querybuilder/pills/customFlowPills/logicpill/QueryLogicPill.tsx b/libs/shared/lib/querybuilder/pills/customFlowPills/logicpill/QueryLogicPill.tsx
index 79cdea0e8d14676be4d70022a1785ff88acffe73..09a9e534b0130cb7208c9133abf6dc4ccaea5682 100644
--- a/libs/shared/lib/querybuilder/pills/customFlowPills/logicpill/QueryLogicPill.tsx
+++ b/libs/shared/lib/querybuilder/pills/customFlowPills/logicpill/QueryLogicPill.tsx
@@ -74,7 +74,6 @@ export function QueryLogicPill(node: SchemaReactflowLogicNode) {
       <div className={`py-1 h-fit border-[1px] border-secondary-200 ${data.selected ? 'bg-secondary-400' : 'bg-secondary-100'}`}>
         {/* <div className="m-1 mx-2 text-left">{output.name}</div> */}
         <DropdownTrigger
-          popover={false}
           title={output.name}
           variant="ghost"
           size="xs"
diff --git a/libs/shared/lib/vis/components/bar.tsx b/libs/shared/lib/vis/components/bar.tsx
index fa1c79de7feffe4de0d11e4240460b5996ad0edb..fe25a8bc0cf2894e87249bb35c749858fadaa405 100644
--- a/libs/shared/lib/vis/components/bar.tsx
+++ b/libs/shared/lib/vis/components/bar.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, DropdownItem } from '../../components';
+import { Button, DropdownTrigger, DropdownItemContainer, DropdownItem, Icon, DropdownContainer } from '../../components';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../components/tooltip';
 import { Add, Close, Fullscreen } from '@mui/icons-material';
 import { ControlContainer } from '../../components/controls';