diff --git a/src/runtime/app.config.ts b/src/runtime/app.config.ts
index 93d42fbd..652dd374 100644
--- a/src/runtime/app.config.ts
+++ b/src/runtime/app.config.ts
@@ -167,7 +167,10 @@ const dropdown = {
   divide: 'divide-y divide-gray-200 dark:divide-gray-700',
   spacing: 'p-1',
   item: {
-    base: 'group flex items-center gap-2 px-2 py-1.5 text-sm w-full rounded-md',
+    base: 'group flex items-center gap-2 w-full',
+    rounded: 'rounded-md',
+    spacing: 'px-2 py-1.5',
+    size: 'text-sm',
     active: 'bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-white',
     inactive: 'text-gray-700 dark:text-gray-200',
     disabled: 'cursor-not-allowed opacity-50',
diff --git a/src/runtime/components/elements/Dropdown.vue b/src/runtime/components/elements/Dropdown.vue
index eab4cdfa..f0fa3bdd 100644
--- a/src/runtime/components/elements/Dropdown.vue
+++ b/src/runtime/components/elements/Dropdown.vue
@@ -23,7 +23,7 @@
               <Component
                 v-bind="omit(item, ['click'])"
                 :is="(item.to && NuxtLink) || (item.click && 'button') || 'div'"
-                :class="[ui.item.base, active ? ui.item.active : ui.item.inactive, itemDisabled && ui.item.disabled]"
+                :class="[ui.item.base, ui.item.spacing, ui.item.size, ui.item.rounded, active ? ui.item.active : ui.item.inactive, itemDisabled && ui.item.disabled]"
                 @click="item.click"
               >
                 <slot :name="item.slot || 'item'" :item="item">