diff --git a/src/runtime/app.config.ts b/src/runtime/app.config.ts
index 6e88c395..3c8b1314 100644
--- a/src/runtime/app.config.ts
+++ b/src/runtime/app.config.ts
@@ -357,9 +357,10 @@ const selectMenu = {
     padding: 'px-2 py-1.5',
     size: 'text-sm',
     color: 'text-gray-900 dark:text-white',
-    container: 'flex items-center gap-2',
+    container: 'flex items-center gap-2 min-w-0',
     active: 'bg-gray-100 dark:bg-gray-900',
     inactive: '',
+    selected: 'pr-7',
     disabled: 'cursor-not-allowed opacity-50',
     empty: 'text-sm text-gray-400 dark:text-gray-500 px-2 py-1.5',
     icon: {
@@ -367,17 +368,17 @@ const selectMenu = {
       active: 'text-gray-900 dark:text-white',
       inactive: 'text-gray-400 dark:text-gray-500'
     },
+    selectedIcon: {
+      wrapper: 'absolute inset-y-0 right-0 flex items-center',
+      padding: 'pr-2',
+      base: 'h-4 w-4 text-gray-900 dark:text-white flex-shrink-0'
+    },
     avatar: {
       base: 'flex-shrink-0',
       size: '3xs'
     },
     chip: {
       base: 'flex-shrink-0 w-2 h-2 mx-1 rounded-full'
-    },
-    selected: {
-      wrapper: 'absolute inset-y-0 right-0 flex items-center',
-      padding: 'pr-2',
-      icon: 'h-4 w-4 text-gray-900 dark:text-white flex-shrink-0'
     }
   },
   transition: {
@@ -389,7 +390,8 @@ const selectMenu = {
     placement: 'bottom-end'
   },
   default: {
-    selectedIcon: 'i-heroicons-check-20-solid'
+    selectedIcon: 'i-heroicons-check-20-solid',
+    trailingIcon: 'i-heroicons-chevron-down-20-solid'
   }
 }
 
diff --git a/src/runtime/components/forms/SelectMenu.vue b/src/runtime/components/forms/SelectMenu.vue
index bda95041..a1dbf926 100644
--- a/src/runtime/components/forms/SelectMenu.vue
+++ b/src/runtime/components/forms/SelectMenu.vue
@@ -31,8 +31,8 @@
             <span v-else class="block truncate text-gray-400 dark:text-gray-500">{{ placeholder || '&nbsp;' }}</span>
           </slot>
 
-          <span :class="trailingIconClass">
-            <UIcon name="i-heroicons-chevron-down-20-solid" :class="iconClass" aria-hidden="true" />
+          <span v-if="trailingIcon" :class="trailingIconClass">
+            <UIcon :name="trailingIcon" :class="iconClass" aria-hidden="true" />
           </span>
         </button>
       </slot>
@@ -61,7 +61,7 @@
             :value="option"
             :disabled="option.disabled"
           >
-            <li :class="[ui.option.base, ui.option.rounded, ui.option.padding, ui.option.size, ui.option.color, active ? ui.option.active : ui.option.inactive, optionDisabled && ui.option.disabled]">
+            <li :class="[ui.option.base, ui.option.rounded, ui.option.padding, ui.option.size, ui.option.color, active ? ui.option.active : ui.option.inactive, selected && ui.option.selected, optionDisabled && ui.option.disabled]">
               <div :class="ui.option.container">
                 <slot name="option" :option="option" :active="active" :selected="selected">
                   <UIcon v-if="option.icon" :name="option.icon" :class="[ui.option.icon.base, active ? ui.option.icon.active : ui.option.icon.inactive, option.iconClass]" aria-hidden="true" />
@@ -77,8 +77,8 @@
                 </slot>
               </div>
 
-              <span v-if="selected" :class="[ui.option.selected.wrapper, ui.option.selected.padding]">
-                <UIcon :name="selectedIcon" :class="ui.option.selected.icon" aria-hidden="true" />
+              <span v-if="selected" :class="[ui.option.selectedIcon.wrapper, ui.option.selectedIcon.padding]">
+                <UIcon :name="selectedIcon" :class="ui.option.selectedIcon.base" aria-hidden="true" />
               </span>
             </li>
           </component>
@@ -159,6 +159,10 @@ export default defineComponent({
       type: String,
       default: null
     },
+    trailingIcon: {
+      type: String,
+      default: () => appConfig.ui.selectMenu.default.trailingIcon
+    },
     selectedIcon: {
       type: String,
       default: () => appConfig.ui.selectMenu.default.selectedIcon