diff --git a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu-item.tsx b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu-item.tsx
index 0b757b54b..3df69a4d6 100644
--- a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu-item.tsx
+++ b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu-item.tsx
@@ -105,7 +105,7 @@ const DropdownMenuItem = ({ index, item, onClick, autoFocus }: IDropdownMenuItem
         target={item.target}
         title={item.text}
         className={
-          clsx('flex cursor-pointer items-center px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-800 focus:bg-gray-100 focus:text-gray-800 focus:outline-none black:hover:bg-gray-900 black:focus:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-200 dark:focus:bg-gray-800 dark:focus:text-gray-200', {
+          clsx('mx-2 my-1 flex cursor-pointer items-center rounded-md px-2 py-1.5 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-800 focus:bg-gray-100 focus:text-gray-800 focus:outline-none black:hover:bg-gray-900 black:focus:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-200 dark:focus:bg-gray-800 dark:focus:text-gray-200', {
             'text-danger-600 dark:text-danger-400': item.destructive,
           })
         }
diff --git a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx
index d03f334da..229f62fcc 100644
--- a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx
@@ -258,23 +258,24 @@ const DropdownMenu = (props: IDropdownMenu) => {
   const autoFocus = items && !items.some((item) => item?.active);
 
   const getClassName = () => {
-    const className = clsx('z-[1001] bg-white py-1 shadow-lg ease-in-out focus:outline-none black:bg-black no-reduce-motion:transition-all dark:bg-gray-900 dark:ring-2 dark:ring-primary-700', touching ? clsx({
-      'overflow-auto fixed left-0 right-0 mx-auto w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-1rem)] rounded-t-xl duration-200': true,
-      'bottom-0 opacity-100': isDisplayed && isOpen,
-      '-bottom-32 opacity-0': !(isDisplayed && isOpen),
-    }) : clsx({
-      'rounded-md min-w-56 max-w-sm duration-100': true,
-      'scale-0': !(isDisplayed && isOpen),
-      'scale-100': isDisplayed && isOpen,
-      'origin-bottom': placement === 'top',
-      'origin-left': placement === 'right',
-      'origin-top': placement === 'bottom',
-      'origin-right': placement === 'left',
-      'origin-bottom-left': placement === 'top-start',
-      'origin-bottom-right': placement === 'top-end',
-      'origin-top-left': placement === 'bottom-start',
-      'origin-top-right': placement === 'bottom-end',
-    }));
+    const className = clsx('z-[1001] bg-white py-1 shadow-lg ease-in-out focus:outline-none black:bg-black no-reduce-motion:transition-all dark:bg-gray-900 dark:ring-2 dark:ring-primary-700',
+      touching ? clsx({
+        'overflow-auto fixed left-0 right-0 mx-auto w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-1rem)] rounded-t-xl duration-200': true,
+        'bottom-0 opacity-100': isDisplayed && isOpen,
+        '-bottom-32 opacity-0': !(isDisplayed && isOpen),
+      }) : clsx({
+        'rounded-md min-w-56 max-w-sm duration-100': true,
+        'scale-0': !(isDisplayed && isOpen),
+        'scale-100': isDisplayed && isOpen,
+        'origin-bottom': placement === 'top',
+        'origin-left': placement === 'right',
+        'origin-top': placement === 'bottom',
+        'origin-right': placement === 'left',
+        'origin-bottom-left': placement === 'top-start',
+        'origin-bottom-right': placement === 'top-end',
+        'origin-top-left': placement === 'bottom-start',
+        'origin-top-right': placement === 'bottom-end',
+      }));
 
     return className;
   };