diff --git a/package.json b/package.json
index 56e1527..dbeebe7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@internxt/ui",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Library of Internxt components",
   "repository": {
     "type": "git",
diff --git a/src/components/breadcrumbs/__test__/__snapshots__/Breadcrumbs.test.tsx.snap b/src/components/breadcrumbs/__test__/__snapshots__/Breadcrumbs.test.tsx.snap
index 70a05c7..230e08d 100644
--- a/src/components/breadcrumbs/__test__/__snapshots__/Breadcrumbs.test.tsx.snap
+++ b/src/components/breadcrumbs/__test__/__snapshots__/Breadcrumbs.test.tsx.snap
@@ -81,10 +81,10 @@ exports[`Breadcrumbs Component > should match snapshot 1`] = `
                   >
                     <div
                       class="flex cursor-pointer flex-row whitespace-nowrap px-4 py-1.5 text-base
-                    
-                    
-                    
-                    
+                    undefined
+                    undefined
+                    false
+                    undefined
                   "
                     >
                       <div
@@ -102,9 +102,6 @@ exports[`Breadcrumbs Component > should match snapshot 1`] = `
                           </span>
                         </div>
                       </div>
-                      <span
-                        class="ml-5 flex grow items-center justify-end text-sm text-gray-40"
-                      />
                     </div>
                   </div>
                 </div>
@@ -248,10 +245,10 @@ exports[`Breadcrumbs Component > should match snapshot 1`] = `
                 >
                   <div
                     class="flex cursor-pointer flex-row whitespace-nowrap px-4 py-1.5 text-base
-                    
-                    
-                    
-                    
+                    undefined
+                    undefined
+                    false
+                    undefined
                   "
                   >
                     <div
@@ -269,9 +266,6 @@ exports[`Breadcrumbs Component > should match snapshot 1`] = `
                         </span>
                       </div>
                     </div>
-                    <span
-                      class="ml-5 flex grow items-center justify-end text-sm text-gray-40"
-                    />
                   </div>
                 </div>
               </div>
diff --git a/src/components/contextMenu/__test__/__snapshots__/ContextMenu.test.tsx.snap b/src/components/contextMenu/__test__/__snapshots__/ContextMenu.test.tsx.snap
index d081fe8..400affe 100644
--- a/src/components/contextMenu/__test__/__snapshots__/ContextMenu.test.tsx.snap
+++ b/src/components/contextMenu/__test__/__snapshots__/ContextMenu.test.tsx.snap
@@ -18,9 +18,9 @@ exports[`ContextMenu Component > should match snapshot 1`] = `
             >
               <div
                 class="flex cursor-pointer flex-row whitespace-nowrap px-4 py-1.5 text-base
-                    
-                    
-                    
+                    undefined
+                    undefined
+                    false
                     text-gray-80
                   "
               >
@@ -31,9 +31,6 @@ exports[`ContextMenu Component > should match snapshot 1`] = `
                     Option 1
                   </span>
                 </div>
-                <span
-                  class="ml-5 flex grow items-center justify-end text-sm text-gray-40"
-                />
               </div>
             </div>
           </div>
@@ -43,9 +40,9 @@ exports[`ContextMenu Component > should match snapshot 1`] = `
             >
               <div
                 class="flex cursor-pointer flex-row whitespace-nowrap px-4 py-1.5 text-base
-                    
-                    
-                    
+                    false
+                    undefined
+                    false
                     text-gray-80
                   "
               >
@@ -56,9 +53,6 @@ exports[`ContextMenu Component > should match snapshot 1`] = `
                     Option 2
                   </span>
                 </div>
-                <span
-                  class="ml-5 flex grow items-center justify-end text-sm text-gray-40"
-                />
               </div>
             </div>
           </div>
@@ -77,9 +71,9 @@ exports[`ContextMenu Component > should match snapshot 1`] = `
             >
               <div
                 class="flex cursor-pointer flex-row whitespace-nowrap px-4 py-1.5 text-base
-                    
-                    
-                    
+                    undefined
+                    undefined
+                    false
                     text-gray-80
                   "
               >
@@ -90,9 +84,6 @@ exports[`ContextMenu Component > should match snapshot 1`] = `
                     Option 3
                   </span>
                 </div>
-                <span
-                  class="ml-5 flex grow items-center justify-end text-sm text-gray-40"
-                />
               </div>
             </div>
           </div>
@@ -114,9 +105,9 @@ exports[`ContextMenu Component > should match snapshot 1`] = `
           >
             <div
               class="flex cursor-pointer flex-row whitespace-nowrap px-4 py-1.5 text-base
-                    
-                    
-                    
+                    undefined
+                    undefined
+                    false
                     text-gray-80
                   "
             >
@@ -127,9 +118,6 @@ exports[`ContextMenu Component > should match snapshot 1`] = `
                   Option 1
                 </span>
               </div>
-              <span
-                class="ml-5 flex grow items-center justify-end text-sm text-gray-40"
-              />
             </div>
           </div>
         </div>
@@ -139,9 +127,9 @@ exports[`ContextMenu Component > should match snapshot 1`] = `
           >
             <div
               class="flex cursor-pointer flex-row whitespace-nowrap px-4 py-1.5 text-base
-                    
-                    
-                    
+                    false
+                    undefined
+                    false
                     text-gray-80
                   "
             >
@@ -152,9 +140,6 @@ exports[`ContextMenu Component > should match snapshot 1`] = `
                   Option 2
                 </span>
               </div>
-              <span
-                class="ml-5 flex grow items-center justify-end text-sm text-gray-40"
-              />
             </div>
           </div>
         </div>
@@ -173,9 +158,9 @@ exports[`ContextMenu Component > should match snapshot 1`] = `
           >
             <div
               class="flex cursor-pointer flex-row whitespace-nowrap px-4 py-1.5 text-base
-                    
-                    
-                    
+                    undefined
+                    undefined
+                    false
                     text-gray-80
                   "
             >
@@ -186,9 +171,6 @@ exports[`ContextMenu Component > should match snapshot 1`] = `
                   Option 3
                 </span>
               </div>
-              <span
-                class="ml-5 flex grow items-center justify-end text-sm text-gray-40"
-              />
             </div>
           </div>
         </div>
diff --git a/src/components/dropdown/Dropdown.tsx b/src/components/dropdown/Dropdown.tsx
index 1d4be7b..cc81c65 100644
--- a/src/components/dropdown/Dropdown.tsx
+++ b/src/components/dropdown/Dropdown.tsx
@@ -44,6 +44,16 @@ export type DropdownProps<T> = {
  * allowing customization of the dropdown's logic.
  */
 
+const extractPaddingValues = (className: string) => {
+  const pxMatch = className.match(/px-(\d+(\.\d+)?)/);
+  const pyMatch = className.match(/py-(\d+(\.\d+)?)/);
+
+  const px = pxMatch ? pxMatch[1] : undefined;
+  const py = pyMatch ? pyMatch[1] : undefined;
+
+  return { px, py };
+};
+
 const Dropdown = <T,>({
   children,
   options,
@@ -94,6 +104,8 @@ const Dropdown = <T,>({
   const toggleMenu = () => setIsOpen((prev) => !prev);
   const closeMenu = () => setIsOpen(false);
 
+  const { px, py } = extractPaddingValues(classMenuItems);
+
   return (
     <div className="relative outline-none" ref={containerRef}>
       <button
@@ -113,7 +125,7 @@ const Dropdown = <T,>({
         data-testid="menu-dropdown"
       >
         <div className={`absolute ${classMenuItems}`}>
-          <Menu item={item} isOpen={isOpen} handleMenuClose={closeMenu} menu={allItems} />
+          <Menu item={item} isOpen={isOpen} handleMenuClose={closeMenu} menu={allItems} paddingX={px} paddingY={py} />
         </div>
       </div>
     </div>
diff --git a/src/components/dropdown/__test__/__snapshots__/Dropdown.test.tsx.snap b/src/components/dropdown/__test__/__snapshots__/Dropdown.test.tsx.snap
index f2eb38e..bbfe1b6 100644
--- a/src/components/dropdown/__test__/__snapshots__/Dropdown.test.tsx.snap
+++ b/src/components/dropdown/__test__/__snapshots__/Dropdown.test.tsx.snap
@@ -29,9 +29,9 @@ exports[`Dropdown component > should match snapshot 1`] = `
             >
               <div
                 class="flex cursor-pointer flex-row whitespace-nowrap px-4 py-1.5 text-base
-                    
-                    
-                    
+                    undefined
+                    undefined
+                    false
                     text-gray-80
                   "
               >
@@ -42,9 +42,6 @@ exports[`Dropdown component > should match snapshot 1`] = `
                     Option 1
                   </span>
                 </div>
-                <span
-                  class="ml-5 flex grow items-center justify-end text-sm text-gray-40"
-                />
               </div>
             </div>
           </div>
@@ -54,9 +51,9 @@ exports[`Dropdown component > should match snapshot 1`] = `
             >
               <div
                 class="flex cursor-pointer flex-row whitespace-nowrap px-4 py-1.5 text-base
-                    
-                    
-                    
+                    undefined
+                    undefined
+                    false
                     text-gray-80
                   "
               >
@@ -67,9 +64,6 @@ exports[`Dropdown component > should match snapshot 1`] = `
                     Option 2
                   </span>
                 </div>
-                <span
-                  class="ml-5 flex grow items-center justify-end text-sm text-gray-40"
-                />
               </div>
             </div>
           </div>
@@ -79,9 +73,9 @@ exports[`Dropdown component > should match snapshot 1`] = `
             >
               <div
                 class="flex cursor-pointer flex-row whitespace-nowrap px-4 py-1.5 text-base
-                    
-                    
-                    
+                    undefined
+                    undefined
+                    false
                     text-gray-80
                   "
               >
@@ -92,9 +86,6 @@ exports[`Dropdown component > should match snapshot 1`] = `
                     Action 1
                   </span>
                 </div>
-                <span
-                  class="ml-5 flex grow items-center justify-end text-sm text-gray-40"
-                />
               </div>
             </div>
           </div>
diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index 81f693d..b886b7d 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -27,6 +27,8 @@ export interface MenuProps<T> {
   menu?: MenuItemsType<T>;
   handleMenuClose: () => void;
   genericEnterKey?: () => void;
+  paddingX?: string;
+  paddingY?: string;
 }
 
 /**
@@ -50,6 +52,12 @@ export interface MenuProps<T> {
  * @property {() => void} [genericEnterKey]
  * - Optional callback for when the Enter key is pressed without selecting a menu item.
  *
+ * @property {string} [paddingX='px-4']
+ * - Optional padding for the X axis (horizontal) of each menu item. Defaults to `px-4`.
+ *
+ * @property {string} [paddingY='py-1.5']
+ * - Optional padding for the Y axis (vertical) of each menu item. Defaults to `py-1.5`.
+ *
  * @returns {JSX.Element}
  * - The rendered Menu component.
  *
@@ -62,7 +70,15 @@ export interface MenuProps<T> {
  * It features a dynamic index for item selection, with keyboard and mouse-based navigation.
  */
 
-const Menu = <T,>({ item, menu, isOpen, genericEnterKey, handleMenuClose }: MenuProps<T>): JSX.Element => {
+const Menu = <T,>({
+  item,
+  menu,
+  isOpen,
+  genericEnterKey,
+  handleMenuClose,
+  paddingX = 'px-4',
+  paddingY = 'py-1.5',
+}: MenuProps<T>): JSX.Element => {
   const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
   const [enterPressed, setEnterPressed] = useState<boolean>(false);
   const handleMouseEnter = (index: number) => {
@@ -150,7 +166,9 @@ const Menu = <T,>({ item, menu, isOpen, genericEnterKey, handleMenuClose }: Menu
   );
 
   return (
-    <div className="z-20 mt-0 flex flex-col rounded-lg bg-surface py-1.5 shadow-subtle-hard outline-none dark:bg-gray-5">
+    <div
+      className={`z-20 mt-0 flex flex-col rounded-lg bg-surface ${paddingY} shadow-subtle-hard outline-none dark:bg-gray-5`}
+    >
       {menu?.map((option, i) => (
         <div key={i}>
           {option && option.separator ? (
@@ -172,11 +190,11 @@ const Menu = <T,>({ item, menu, isOpen, genericEnterKey, handleMenuClose }: Menu
                 onMouseEnter={() => handleMouseEnter(i)}
               >
                 <div
-                  className={`flex cursor-pointer flex-row whitespace-nowrap px-4 py-1.5 text-base
-                    ${item && option.disabled?.(item) ? 'font-medium text-gray-50' : ''}
-                    ${item && option.isTitle?.(item) && !option.disabled?.(item) ? 'font-medium text-gray-100' : ''}
-                    ${selectedIndex === i && item && !option.disabled?.(item) ? 'bg-gray-5 text-gray-100 dark:bg-gray-10' : ''}
-                    ${item && !option.disabled?.(item) && !option.isTitle?.(item) && selectedIndex !== i ? 'text-gray-80' : ''}
+                  className={`flex cursor-pointer flex-row whitespace-nowrap ${paddingX} ${paddingY} text-base
+                    ${item && option.disabled?.(item) && 'font-medium text-gray-50'}
+                    ${item && option.isTitle?.(item) && !option.disabled?.(item) && 'font-medium text-gray-100'}
+                    ${selectedIndex === i && item && !option.disabled?.(item) && 'bg-gray-5 text-gray-100 dark:bg-gray-10'}
+                    ${item && !option.disabled?.(item) && !option.isTitle?.(item) && selectedIndex !== i && 'text-gray-80'}
                   `}
                 >
                   {option.node ? (
@@ -187,12 +205,14 @@ const Menu = <T,>({ item, menu, isOpen, genericEnterKey, handleMenuClose }: Menu
                       <span>{option.name}</span>
                     </div>
                   )}
-                  <span className="ml-5 flex grow items-center justify-end text-sm text-gray-40">
-                    {option.keyboardShortcutOptions?.keyboardShortcutIcon && (
-                      <option.keyboardShortcutOptions.keyboardShortcutIcon size={14} />
-                    )}
-                    {option.keyboardShortcutOptions?.keyboardShortcutText ?? ''}
-                  </span>
+                  {option.keyboardShortcutOptions && (
+                    <span className="ml-5 flex grow items-center justify-end text-sm text-gray-40">
+                      {option.keyboardShortcutOptions?.keyboardShortcutIcon && (
+                        <option.keyboardShortcutOptions.keyboardShortcutIcon size={14} />
+                      )}
+                      {option.keyboardShortcutOptions?.keyboardShortcutText ?? ''}
+                    </span>
+                  )}
                 </div>
               </div>
             )
diff --git a/src/components/menu/__test__/__snapshots__/Menu.test.tsx.snap b/src/components/menu/__test__/__snapshots__/Menu.test.tsx.snap
index 3a60ec0..0d5990e 100644
--- a/src/components/menu/__test__/__snapshots__/Menu.test.tsx.snap
+++ b/src/components/menu/__test__/__snapshots__/Menu.test.tsx.snap
@@ -11,9 +11,9 @@ exports[`Menu Component > should match snapshot 1`] = `
       >
         <div
           class="flex cursor-pointer flex-row whitespace-nowrap px-4 py-1.5 text-base
-                    
-                    
-                    
+                    undefined
+                    undefined
+                    false
                     text-gray-80
                   "
         >
@@ -24,9 +24,6 @@ exports[`Menu Component > should match snapshot 1`] = `
               Option 1
             </span>
           </div>
-          <span
-            class="ml-5 flex grow items-center justify-end text-sm text-gray-40"
-          />
         </div>
       </div>
     </div>
@@ -46,9 +43,9 @@ exports[`Menu Component > should match snapshot 1`] = `
         <div
           class="flex cursor-pointer flex-row whitespace-nowrap px-4 py-1.5 text-base
                     font-medium text-gray-50
-                    
-                    
-                    
+                    undefined
+                    false
+                    false
                   "
         >
           <div
@@ -58,9 +55,6 @@ exports[`Menu Component > should match snapshot 1`] = `
               Option 2
             </span>
           </div>
-          <span
-            class="ml-5 flex grow items-center justify-end text-sm text-gray-40"
-          />
         </div>
       </div>
     </div>
@@ -70,10 +64,10 @@ exports[`Menu Component > should match snapshot 1`] = `
       >
         <div
           class="flex cursor-pointer flex-row whitespace-nowrap px-4 py-1.5 text-base
-                    
+                    undefined
                     font-medium text-gray-100
-                    
-                    
+                    false
+                    false
                   "
         >
           <div
@@ -83,9 +77,6 @@ exports[`Menu Component > should match snapshot 1`] = `
               Option 3
             </span>
           </div>
-          <span
-            class="ml-5 flex grow items-center justify-end text-sm text-gray-40"
-          />
         </div>
       </div>
     </div>
@@ -95,9 +86,9 @@ exports[`Menu Component > should match snapshot 1`] = `
       >
         <div
           class="flex cursor-pointer flex-row whitespace-nowrap px-4 py-1.5 text-base
-                    
-                    
-                    
+                    undefined
+                    undefined
+                    false
                     text-gray-80
                   "
         >