diff --git a/web/src/components/ui/dropdown/Dropdown.stories.tsx b/web/src/components/ui/dropdown/Dropdown.stories.tsx
index b7578b4cb..9047698e5 100644
--- a/web/src/components/ui/dropdown/Dropdown.stories.tsx
+++ b/web/src/components/ui/dropdown/Dropdown.stories.tsx
@@ -12,6 +12,11 @@ const meta: Meta<typeof Dropdown> = {
     closeOnSelect: {
       control: 'boolean',
       defaultValue: true
+    },
+    align: {
+      control: 'select',
+      options: ['start', 'center', 'end'],
+      defaultValue: 'start'
     }
   },
   tags: ['autodocs']
diff --git a/web/src/components/ui/dropdown/Dropdown.tsx b/web/src/components/ui/dropdown/Dropdown.tsx
index d853e5dea..1599073cc 100644
--- a/web/src/components/ui/dropdown/Dropdown.tsx
+++ b/web/src/components/ui/dropdown/Dropdown.tsx
@@ -18,6 +18,7 @@ import {
 } from './DropdownBase';
 import { CircleSpinnerLoader } from '../loaders/CircleSpinnerLoader';
 import { useMemoizedFn } from 'ahooks';
+import { cn } from '@/lib/classMerge';
 
 export interface DropdownItem {
   label: React.ReactNode;
@@ -27,7 +28,6 @@ export interface DropdownItem {
   onClick?: () => void;
   icon?: React.ReactNode;
   disabled?: boolean;
-  link?: string;
   loading?: boolean;
   selected?: boolean;
   items?: (DropdownItem | DropdownDivider)[];
@@ -47,6 +47,9 @@ export interface DropdownProps extends DropdownMenuProps {
   maxWidth?: number;
   closeOnSelect?: boolean;
   onSelect?: (itemId: string) => void;
+  align?: 'start' | 'center' | 'end';
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  contentClassName?: string;
 }
 
 const dropdownItemKey = (item: DropdownItem | DropdownDivider, index: number) => {
@@ -59,17 +62,20 @@ export const Dropdown: React.FC<DropdownProps> = React.memo(
     items = [],
     selectType = 'default',
     menuLabel,
-    minWidth = 200,
+    minWidth = 240,
     maxWidth,
     closeOnSelect = true,
     onSelect,
     children,
+    align = 'center',
+    side = 'bottom',
+    contentClassName,
     ...props
   }) => {
     return (
       <DropdownMenu>
         <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
-        <DropdownMenuContent className="w-56">
+        <DropdownMenuContent className={cn('w-56', contentClassName)} align={align} side={side}>
           {menuLabel && (
             <>
               <DropdownMenuLabel>{menuLabel}</DropdownMenuLabel>
@@ -129,7 +135,6 @@ const DropdownItem = ({
   onClick,
   icon,
   disabled,
-  link,
   loading,
   selected,
   index,
diff --git a/web/src/components/ui/dropdown/DropdownBase.tsx b/web/src/components/ui/dropdown/DropdownBase.tsx
index 378dc2b4a..45e88ade1 100644
--- a/web/src/components/ui/dropdown/DropdownBase.tsx
+++ b/web/src/components/ui/dropdown/DropdownBase.tsx
@@ -83,7 +83,7 @@ const DropdownMenuItem = React.forwardRef<
     closeOnSelect?: boolean;
     selectType?: string;
   }
->(({ className, onClick, closeOnSelect, inset, selectType, ...props }, ref) => (
+>(({ className, closeOnSelect = true, onClick, inset, selectType, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
@@ -92,7 +92,7 @@ const DropdownMenuItem = React.forwardRef<
       className
     )}
     onClick={(e) => {
-      if (closeOnSelect) {
+      if (!closeOnSelect) {
         e.stopPropagation();
         e.preventDefault();
       }
@@ -109,7 +109,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     closeOnSelect?: boolean;
     selectType?: string;
   }
->(({ className, children, onClick, checked, closeOnSelect, selectType, ...props }, ref) => (
+>(({ className, children, onClick, checked, closeOnSelect = true, selectType, ...props }, ref) => (
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(