diff --git a/src/components/dialogs/AvatarDialog/AvatarDialog.vue b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
index bae8e045..b0625009 100644
--- a/src/components/dialogs/AvatarDialog/AvatarDialog.vue
+++ b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
@@ -222,94 +222,105 @@
                                 style="margin-left: 5px"
                                 @click="selectAvatarWithoutConfirmation(avatarDialog.id)"></el-button>
                         </TooltipWrapper>
-                        <el-dropdown trigger="click" style="margin-left: 5px" @command="avatarDialogCommand">
-                            <el-button
-                                :type="avatarDialog.isBlocked ? 'danger' : 'default'"
-                                :icon="MoreFilled"
-                                size="large"
-                                circle></el-button>
-                            <template #dropdown>
-                                <el-dropdown-menu>
-                                    <el-dropdown-item :icon="Refresh" command="Refresh">{{
-                                        t('dialog.avatar.actions.refresh')
-                                    }}</el-dropdown-item>
-                                    <el-dropdown-item :icon="Share" command="Share">{{
-                                        t('dialog.avatar.actions.share')
-                                    }}</el-dropdown-item>
-                                    <el-dropdown-item
-                                        v-if="avatarDialog.isBlocked"
-                                        :icon="CircleCheck"
-                                        command="Unblock Avatar"
-                                        style="color: #f56c6c"
-                                        divided
-                                        >{{ t('dialog.avatar.actions.unblock') }}</el-dropdown-item
-                                    >
-                                    <el-dropdown-item v-else :icon="CircleClose" command="Block Avatar" divided>{{
-                                        t('dialog.avatar.actions.block')
-                                    }}</el-dropdown-item>
-                                    <el-dropdown-item
-                                        v-if="/quest/.test(avatarDialog.ref.tags)"
-                                        :icon="Check"
-                                        command="Select Fallback Avatar"
-                                        >{{ t('dialog.avatar.actions.select_fallback') }}</el-dropdown-item
-                                    >
-                                    <template v-if="avatarDialog.ref.authorId === currentUser.id">
-                                        <el-dropdown-item
-                                            v-if="avatarDialog.ref.releaseStatus === 'public'"
-                                            :icon="User"
-                                            command="Make Private"
-                                            divided
-                                            >{{ t('dialog.avatar.actions.make_private') }}</el-dropdown-item
-                                        >
-                                        <el-dropdown-item v-else :icon="User" command="Make Public" divided>{{
-                                            t('dialog.avatar.actions.make_public')
-                                        }}</el-dropdown-item>
-                                        <el-dropdown-item :icon="Edit" command="Rename">{{
-                                            t('dialog.avatar.actions.rename')
-                                        }}</el-dropdown-item>
-                                        <el-dropdown-item :icon="Edit" command="Change Description">{{
-                                            t('dialog.avatar.actions.change_description')
-                                        }}</el-dropdown-item>
-                                        <el-dropdown-item :icon="Edit" command="Change Content Tags">{{
-                                            t('dialog.avatar.actions.change_content_tags')
-                                        }}</el-dropdown-item>
-                                        <el-dropdown-item :icon="Edit" command="Change Styles and Author Tags">{{
-                                            t('dialog.avatar.actions.change_styles_author_tags')
-                                        }}</el-dropdown-item>
-                                        <el-dropdown-item :icon="Picture" command="Change Image">{{
-                                            t('dialog.avatar.actions.change_image')
-                                        }}</el-dropdown-item>
-                                        <el-dropdown-item
-                                            v-if="avatarDialog.ref.unityPackageUrl"
-                                            :icon="Download"
-                                            command="Download Unity Package"
-                                            >{{ t('dialog.avatar.actions.download_package') }}</el-dropdown-item
-                                        >
-                                        <el-dropdown-item
-                                            v-if="avatarDialog.hasImposter"
-                                            :icon="Refresh"
-                                            command="Regenerate Imposter"
-                                            style="color: #f56c6c"
-                                            divided
-                                            >{{ t('dialog.avatar.actions.regenerate_impostor') }}</el-dropdown-item
-                                        >
-                                        <el-dropdown-item
-                                            v-if="avatarDialog.hasImposter"
-                                            :icon="Delete"
-                                            command="Delete Imposter"
-                                            style="color: #f56c6c"
-                                            >{{ t('dialog.avatar.actions.delete_impostor') }}</el-dropdown-item
-                                        >
-                                        <el-dropdown-item v-else :icon="User" command="Create Imposter" divided>{{
-                                            t('dialog.avatar.actions.create_impostor')
-                                        }}</el-dropdown-item>
-                                        <el-dropdown-item :icon="Delete" command="Delete" style="color: #f56c6c">{{
-                                            t('dialog.avatar.actions.delete')
-                                        }}</el-dropdown-item>
-                                    </template>
-                                </el-dropdown-menu>
-                            </template>
-                        </el-dropdown>
+                        <DropdownMenu>
+                            <DropdownMenuTrigger as-child>
+                                <el-button
+                                    :type="avatarDialog.isBlocked ? 'danger' : 'default'"
+                                    :icon="MoreFilled"
+                                    size="large"
+                                    circle></el-button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent>
+                                <DropdownMenuItem @click="avatarDialogCommand('Refresh')">
+                                    <Refresh class="size-4" />
+                                    {{ t('dialog.avatar.actions.refresh') }}
+                                </DropdownMenuItem>
+                                <DropdownMenuItem @click="avatarDialogCommand('Share')">
+                                    <Share class="size-4" />
+                                    {{ t('dialog.avatar.actions.share') }}
+                                </DropdownMenuItem>
+                                <DropdownMenuSeparator />
+                                <DropdownMenuItem
+                                    v-if="avatarDialog.isBlocked"
+                                    variant="destructive"
+                                    @click="avatarDialogCommand('Unblock Avatar')">
+                                    <CircleCheck class="size-4" />
+                                    {{ t('dialog.avatar.actions.unblock') }}
+                                </DropdownMenuItem>
+                                <DropdownMenuItem v-else @click="avatarDialogCommand('Block Avatar')">
+                                    <CircleClose class="size-4" />
+                                    {{ t('dialog.avatar.actions.block') }}
+                                </DropdownMenuItem>
+                                <DropdownMenuItem
+                                    v-if="/quest/.test(avatarDialog.ref.tags)"
+                                    @click="avatarDialogCommand('Select Fallback Avatar')">
+                                    <Check class="size-4" />
+                                    {{ t('dialog.avatar.actions.select_fallback') }}
+                                </DropdownMenuItem>
+                                <template v-if="avatarDialog.ref.authorId === currentUser.id">
+                                    <DropdownMenuSeparator />
+                                    <DropdownMenuItem
+                                        v-if="avatarDialog.ref.releaseStatus === 'public'"
+                                        @click="avatarDialogCommand('Make Private')">
+                                        <User class="size-4" />
+                                        {{ t('dialog.avatar.actions.make_private') }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem v-else @click="avatarDialogCommand('Make Public')">
+                                        <User class="size-4" />
+                                        {{ t('dialog.avatar.actions.make_public') }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem @click="avatarDialogCommand('Rename')">
+                                        <Edit class="size-4" />
+                                        {{ t('dialog.avatar.actions.rename') }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem @click="avatarDialogCommand('Change Description')">
+                                        <Edit class="size-4" />
+                                        {{ t('dialog.avatar.actions.change_description') }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem @click="avatarDialogCommand('Change Content Tags')">
+                                        <Edit class="size-4" />
+                                        {{ t('dialog.avatar.actions.change_content_tags') }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem @click="avatarDialogCommand('Change Styles and Author Tags')">
+                                        <Edit class="size-4" />
+                                        {{ t('dialog.avatar.actions.change_styles_author_tags') }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem @click="avatarDialogCommand('Change Image')">
+                                        <Picture class="size-4" />
+                                        {{ t('dialog.avatar.actions.change_image') }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem
+                                        v-if="avatarDialog.ref.unityPackageUrl"
+                                        @click="avatarDialogCommand('Download Unity Package')">
+                                        <Download class="size-4" />
+                                        {{ t('dialog.avatar.actions.download_package') }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuSeparator />
+                                    <DropdownMenuItem
+                                        v-if="avatarDialog.hasImposter"
+                                        variant="destructive"
+                                        @click="avatarDialogCommand('Regenerate Imposter')">
+                                        <Refresh class="size-4" />
+                                        {{ t('dialog.avatar.actions.regenerate_impostor') }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem
+                                        v-if="avatarDialog.hasImposter"
+                                        variant="destructive"
+                                        @click="avatarDialogCommand('Delete Imposter')">
+                                        <Delete class="size-4" />
+                                        {{ t('dialog.avatar.actions.delete_impostor') }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem v-else @click="avatarDialogCommand('Create Imposter')">
+                                        <User class="size-4" />
+                                        {{ t('dialog.avatar.actions.create_impostor') }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem variant="destructive" @click="avatarDialogCommand('Delete')">
+                                        <Delete class="size-4" />
+                                        {{ t('dialog.avatar.actions.delete') }}
+                                    </DropdownMenuItem>
+                                </template>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
                     </div>
                 </div>
             </div>
@@ -428,24 +439,24 @@
                                 <span class="extra"
                                     >{{ avatarDialog.id
                                     }}<TooltipWrapper side="top" :content="t('dialog.avatar.info.id_tooltip')">
-                                        <el-dropdown trigger="click" size="small" style="margin-left: 5px">
-                                            <el-button
-                                                type="default"
-                                                :icon="CopyDocument"
-                                                size="small"
-                                                circle
-                                                @click.stop></el-button>
-                                            <template #dropdown>
-                                                <el-dropdown-menu>
-                                                    <el-dropdown-item @click="copyAvatarId(avatarDialog.id)">{{
-                                                        t('dialog.avatar.info.copy_id')
-                                                    }}</el-dropdown-item>
-                                                    <el-dropdown-item @click="copyAvatarUrl(avatarDialog.id)">{{
-                                                        t('dialog.avatar.info.copy_url')
-                                                    }}</el-dropdown-item>
-                                                </el-dropdown-menu>
-                                            </template>
-                                        </el-dropdown>
+                                        <DropdownMenu>
+                                            <DropdownMenuTrigger as-child>
+                                                <el-button
+                                                    type="default"
+                                                    :icon="CopyDocument"
+                                                    size="small"
+                                                    circle
+                                                    @click.stop></el-button>
+                                            </DropdownMenuTrigger>
+                                            <DropdownMenuContent>
+                                                <DropdownMenuItem @click="copyAvatarId(avatarDialog.id)">
+                                                    {{ t('dialog.avatar.info.copy_id') }}
+                                                </DropdownMenuItem>
+                                                <DropdownMenuItem @click="copyAvatarUrl(avatarDialog.id)">
+                                                    {{ t('dialog.avatar.info.copy_url') }}
+                                                </DropdownMenuItem>
+                                            </DropdownMenuContent>
+                                        </DropdownMenu>
                                     </TooltipWrapper></span
                                 >
                             </div>
@@ -566,7 +577,7 @@
         User,
         Warning
     } from '@element-plus/icons-vue';
-    import { computed, defineAsyncComponent, nextTick, reactive, ref, watch } from 'vue';
+    import { computed, defineAsyncComponent, nextTick, ref, watch } from 'vue';
     import { ElMessageBox } from 'element-plus';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
@@ -585,6 +596,13 @@
         replaceVrcPackageUrl,
         timeToText
     } from '../../../shared/utils';
+    import {
+        DropdownMenu,
+        DropdownMenuContent,
+        DropdownMenuItem,
+        DropdownMenuSeparator,
+        DropdownMenuTrigger
+    } from '../../ui/dropdown-menu';
     import { useAvatarStore, useFavoriteStore, useGalleryStore, useGameStore, useUserStore } from '../../../stores';
     import { avatarModerationRequest, avatarRequest, favoriteRequest, miscRequest } from '../../../api';
     import { AppDebug } from '../../../service/appConfig.js';
diff --git a/src/components/dialogs/GroupDialog/GroupDialog.vue b/src/components/dialogs/GroupDialog/GroupDialog.vue
index 14e3c83b..be71535b 100644
--- a/src/components/dialogs/GroupDialog/GroupDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialog.vue
@@ -231,102 +231,108 @@
                                     @click="joinGroup(groupDialog.id)"></el-button>
                             </TooltipWrapper>
                         </template>
-                        <el-dropdown trigger="click" style="margin-left: 5px" @command="groupDialogCommand">
-                            <el-button
-                                :type="groupDialog.ref.membershipStatus === 'userblocked' ? 'danger' : 'default'"
-                                :icon="MoreFilled"
-                                size="large"
-                                circle></el-button>
-                            <template #dropdown>
-                                <el-dropdown-menu>
-                                    <el-dropdown-item :icon="Refresh" command="Refresh">
-                                        {{ t('dialog.group.actions.refresh') }}
-                                    </el-dropdown-item>
-                                    <el-dropdown-item :icon="Share" command="Share">
-                                        {{ t('dialog.group.actions.share') }}
-                                    </el-dropdown-item>
-                                    <template v-if="groupDialog.inGroup">
-                                        <template v-if="groupDialog.ref.myMember">
-                                            <el-dropdown-item
-                                                v-if="groupDialog.ref.myMember.isSubscribedToAnnouncements"
-                                                :icon="MuteNotification"
-                                                command="Unsubscribe To Announcements"
-                                                divided>
-                                                {{ t('dialog.group.actions.unsubscribe') }}
-                                            </el-dropdown-item>
-                                            <el-dropdown-item
-                                                v-else
-                                                :icon="Bell"
-                                                command="Subscribe To Announcements"
-                                                divided>
-                                                {{ t('dialog.group.actions.subscribe') }}
-                                            </el-dropdown-item>
-                                            <el-dropdown-item
-                                                v-if="hasGroupPermission(groupDialog.ref, 'group-invites-manage')"
-                                                :icon="Message"
-                                                command="Invite To Group">
-                                                {{ t('dialog.group.actions.invite_to_group') }}
-                                            </el-dropdown-item>
-                                            <template
-                                                v-if="hasGroupPermission(groupDialog.ref, 'group-announcement-manage')">
-                                                <el-dropdown-item :icon="Tickets" command="Create Post">
-                                                    {{ t('dialog.group.actions.create_post') }}
-                                                </el-dropdown-item>
-                                            </template>
-                                            <el-dropdown-item
-                                                :disabled="!hasGroupModerationPermission(groupDialog.ref)"
-                                                :icon="Operation"
-                                                command="Moderation Tools">
-                                                {{ t('dialog.group.actions.moderation_tools') }}
-                                            </el-dropdown-item>
-                                            <template
-                                                v-if="
-                                                    groupDialog.ref.myMember && groupDialog.ref.privacy === 'default'
-                                                ">
-                                                <el-dropdown-item :icon="View" command="Visibility Everyone" divided>
-                                                    <el-icon v-if="groupDialog.ref.myMember.visibility === 'visible'"
-                                                        ><Check
-                                                    /></el-icon>
-                                                    {{ t('dialog.group.actions.visibility_everyone') }}
-                                                </el-dropdown-item>
-                                                <el-dropdown-item :icon="View" command="Visibility Friends">
-                                                    <el-icon v-if="groupDialog.ref.myMember.visibility === 'friends'"
-                                                        ><Check
-                                                    /></el-icon>
-                                                    {{ t('dialog.group.actions.visibility_friends') }}
-                                                </el-dropdown-item>
-                                                <el-dropdown-item :icon="View" command="Visibility Hidden">
-                                                    <el-icon v-if="groupDialog.ref.myMember.visibility === 'hidden'"
-                                                        ><Check
-                                                    /></el-icon>
-                                                    {{ t('dialog.group.actions.visibility_hidden') }}
-                                                </el-dropdown-item>
-                                            </template>
-                                            <el-dropdown-item
-                                                :icon="Delete"
-                                                command="Leave Group"
-                                                style="color: #f56c6c"
-                                                divided>
-                                                {{ t('dialog.group.actions.leave') }}
-                                            </el-dropdown-item>
+                        <DropdownMenu>
+                            <DropdownMenuTrigger as-child>
+                                <el-button
+                                    :type="groupDialog.ref.membershipStatus === 'userblocked' ? 'danger' : 'default'"
+                                    :icon="MoreFilled"
+                                    size="large"
+                                    class="ml-1.25"
+                                    circle></el-button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent>
+                                <DropdownMenuItem @click="groupDialogCommand('Refresh')">
+                                    <Refresh class="size-4" />
+                                    {{ t('dialog.group.actions.refresh') }}
+                                </DropdownMenuItem>
+                                <DropdownMenuItem @click="groupDialogCommand('Share')">
+                                    <Share class="size-4" />
+                                    {{ t('dialog.group.actions.share') }}
+                                </DropdownMenuItem>
+                                <template v-if="groupDialog.inGroup">
+                                    <template v-if="groupDialog.ref.myMember">
+                                        <DropdownMenuSeparator />
+                                        <DropdownMenuItem
+                                            v-if="groupDialog.ref.myMember.isSubscribedToAnnouncements"
+                                            @click="groupDialogCommand('Unsubscribe To Announcements')">
+                                            <MuteNotification class="size-4" />
+                                            {{ t('dialog.group.actions.unsubscribe') }}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem
+                                            v-else
+                                            @click="groupDialogCommand('Subscribe To Announcements')">
+                                            <Bell class="size-4" />
+                                            {{ t('dialog.group.actions.subscribe') }}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem
+                                            v-if="hasGroupPermission(groupDialog.ref, 'group-invites-manage')"
+                                            @click="groupDialogCommand('Invite To Group')">
+                                            <Message class="size-4" />
+                                            {{ t('dialog.group.actions.invite_to_group') }}
+                                        </DropdownMenuItem>
+                                        <template
+                                            v-if="hasGroupPermission(groupDialog.ref, 'group-announcement-manage')">
+                                            <DropdownMenuItem @click="groupDialogCommand('Create Post')">
+                                                <Tickets class="size-4" />
+                                                {{ t('dialog.group.actions.create_post') }}
+                                            </DropdownMenuItem>
                                         </template>
+                                        <DropdownMenuItem
+                                            :disabled="!hasGroupModerationPermission(groupDialog.ref)"
+                                            @click="groupDialogCommand('Moderation Tools')">
+                                            <Operation class="size-4" />
+                                            {{ t('dialog.group.actions.moderation_tools') }}
+                                        </DropdownMenuItem>
+                                        <template
+                                            v-if="groupDialog.ref.myMember && groupDialog.ref.privacy === 'default'">
+                                            <DropdownMenuSeparator />
+                                            <DropdownMenuItem @click="groupDialogCommand('Visibility Everyone')">
+                                                <View class="size-4" />
+                                                <Check
+                                                    v-if="groupDialog.ref.myMember.visibility === 'visible'"
+                                                    class="size-4" />
+                                                {{ t('dialog.group.actions.visibility_everyone') }}
+                                            </DropdownMenuItem>
+                                            <DropdownMenuItem @click="groupDialogCommand('Visibility Friends')">
+                                                <View class="size-4" />
+                                                <Check
+                                                    v-if="groupDialog.ref.myMember.visibility === 'friends'"
+                                                    class="size-4" />
+                                                {{ t('dialog.group.actions.visibility_friends') }}
+                                            </DropdownMenuItem>
+                                            <DropdownMenuItem @click="groupDialogCommand('Visibility Hidden')">
+                                                <View class="size-4" />
+                                                <Check
+                                                    v-if="groupDialog.ref.myMember.visibility === 'hidden'"
+                                                    class="size-4" />
+                                                {{ t('dialog.group.actions.visibility_hidden') }}
+                                            </DropdownMenuItem>
+                                        </template>
+                                        <DropdownMenuSeparator />
+                                        <DropdownMenuItem
+                                            variant="destructive"
+                                            @click="groupDialogCommand('Leave Group')">
+                                            <Delete class="size-4" />
+                                            {{ t('dialog.group.actions.leave') }}
+                                        </DropdownMenuItem>
                                     </template>
-                                    <template v-else>
-                                        <el-dropdown-item
-                                            v-if="groupDialog.ref.membershipStatus === 'userblocked'"
-                                            :icon="CircleCheck"
-                                            command="Unblock Group"
-                                            style="color: #f56c6c"
-                                            divided>
-                                            {{ t('dialog.group.actions.unblock') }}
-                                        </el-dropdown-item>
-                                        <el-dropdown-item v-else :icon="CircleClose" command="Block Group" divided>
-                                            {{ t('dialog.group.actions.block') }}
-                                        </el-dropdown-item>
-                                    </template>
-                                </el-dropdown-menu>
-                            </template>
-                        </el-dropdown>
+                                </template>
+                                <template v-else>
+                                    <DropdownMenuSeparator />
+                                    <DropdownMenuItem
+                                        v-if="groupDialog.ref.membershipStatus === 'userblocked'"
+                                        variant="destructive"
+                                        @click="groupDialogCommand('Unblock Group')">
+                                        <CircleCheck class="size-4" />
+                                        {{ t('dialog.group.actions.unblock') }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem v-else @click="groupDialogCommand('Block Group')">
+                                        <CircleClose class="size-4" />
+                                        {{ t('dialog.group.actions.block') }}
+                                    </DropdownMenuItem>
+                                </template>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
                     </div>
                 </div>
             </div>
@@ -852,55 +858,60 @@
                                 v-if="hasGroupPermission(groupDialog.ref, 'group-members-manage')"
                                 style="float: right">
                                 <span style="margin-right: 5px">{{ t('dialog.group.members.sort_by') }}</span>
-                                <el-dropdown
-                                    trigger="click"
-                                    size="small"
-                                    style="margin-right: 5px"
-                                    :disabled="isGroupMembersLoading || groupDialog.memberSearch.length > 0">
-                                    <el-button size="small" @click.stop>
-                                        <span
-                                            >{{ t(groupDialog.memberSortOrder.name) }}
-                                            <el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
-                                        </span>
-                                    </el-button>
-                                    <template #dropdown>
-                                        <el-dropdown-menu>
-                                            <el-dropdown-item
-                                                v-for="item in groupDialogSortingOptions"
-                                                :key="item.name"
-                                                @click="setGroupMemberSortOrder(item)"
-                                                v-text="t(item.name)" />
-                                        </el-dropdown-menu>
-                                    </template>
-                                </el-dropdown>
+                                <DropdownMenu>
+                                    <DropdownMenuTrigger
+                                        as-child
+                                        :disabled="isGroupMembersLoading || groupDialog.memberSearch.length > 0">
+                                        <el-button
+                                            size="small"
+                                            :disabled="isGroupMembersLoading || groupDialog.memberSearch.length > 0"
+                                            @click.stop>
+                                            <span>
+                                                {{ t(groupDialog.memberSortOrder.name) }}
+                                                <el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
+                                            </span>
+                                        </el-button>
+                                    </DropdownMenuTrigger>
+                                    <DropdownMenuContent>
+                                        <DropdownMenuItem
+                                            v-for="item in groupDialogSortingOptions"
+                                            :key="item.name"
+                                            @click="setGroupMemberSortOrder(item)">
+                                            {{ t(item.name) }}
+                                        </DropdownMenuItem>
+                                    </DropdownMenuContent>
+                                </DropdownMenu>
                                 <span style="margin-right: 5px">{{ t('dialog.group.members.filter') }}</span>
-                                <el-dropdown
-                                    trigger="click"
-                                    size="small"
-                                    style="margin-right: 5px"
-                                    :disabled="isGroupMembersLoading || groupDialog.memberSearch.length > 0">
-                                    <el-button size="small" @click.stop>
-                                        <span
-                                            >{{ t(groupDialog.memberFilter.name) }}
-                                            <el-icon style="margin-left: 5px"><ArrowDown /></el-icon
-                                        ></span>
-                                    </el-button>
-                                    <template #dropdown>
-                                        <el-dropdown-menu>
-                                            <el-dropdown-item
-                                                v-for="item in groupDialogFilterOptions"
-                                                :key="item.name"
-                                                @click="setGroupMemberFilter(item)"
-                                                v-text="t(item.name)" />
-                                            <template v-for="role in groupDialog.ref.roles" :key="role.name">
-                                                <el-dropdown-item
-                                                    v-if="!role.defaultRole"
-                                                    @click="setGroupMemberFilter(role)"
-                                                    v-text="role.name" />
-                                            </template>
-                                        </el-dropdown-menu>
-                                    </template>
-                                </el-dropdown>
+                                <DropdownMenu>
+                                    <DropdownMenuTrigger
+                                        as-child
+                                        :disabled="isGroupMembersLoading || groupDialog.memberSearch.length > 0">
+                                        <el-button
+                                            size="small"
+                                            :disabled="isGroupMembersLoading || groupDialog.memberSearch.length > 0"
+                                            @click.stop>
+                                            <span>
+                                                {{ t(groupDialog.memberFilter.name) }}
+                                                <el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
+                                            </span>
+                                        </el-button>
+                                    </DropdownMenuTrigger>
+                                    <DropdownMenuContent>
+                                        <DropdownMenuItem
+                                            v-for="item in groupDialogFilterOptions"
+                                            :key="item.name"
+                                            @click="setGroupMemberFilter(item)">
+                                            {{ t(item.name) }}
+                                        </DropdownMenuItem>
+                                        <template v-for="role in groupDialog.ref.roles" :key="role.name">
+                                            <DropdownMenuItem
+                                                v-if="!role.defaultRole"
+                                                @click="setGroupMemberFilter(role)">
+                                                {{ role.name }}
+                                            </DropdownMenuItem>
+                                        </template>
+                                    </DropdownMenuContent>
+                                </DropdownMenu>
                             </div>
                             <el-input
                                 v-model="groupDialog.memberSearch"
@@ -1176,6 +1187,13 @@
         userImage,
         userStatusClass
     } from '../../../shared/utils';
+    import {
+        DropdownMenu,
+        DropdownMenuContent,
+        DropdownMenuItem,
+        DropdownMenuSeparator,
+        DropdownMenuTrigger
+    } from '../../ui/dropdown-menu';
     import { useGalleryStore, useGroupStore, useLocationStore, useUserStore } from '../../../stores';
     import { groupDialogFilterOptions, groupDialogSortingOptions } from '../../../shared/constants';
     import { Badge } from '../../ui/badge';
diff --git a/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue b/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
index 75bd4fc8..cae34344 100644
--- a/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
@@ -24,69 +24,82 @@
                         </span>
                         <div style="float: right; margin-top: 5px">
                             <span style="margin-right: 5px">{{ t('dialog.group.members.sort_by') }}</span>
-                            <el-dropdown
-                                trigger="click"
-                                size="small"
-                                style="margin-right: 5px"
-                                :disabled="
-                                    Boolean(
-                                        isGroupMembersLoading ||
-                                        memberSearch.length ||
-                                        !hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')
-                                    )
-                                ">
-                                <el-button size="small" @click.stop>
-                                    <span
-                                        >{{ t(memberSortOrder.name) }}
-                                        <el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
-                                    </span>
-                                </el-button>
-                                <template #dropdown>
-                                    <el-dropdown-menu>
-                                        <el-dropdown-item
-                                            v-for="item in groupDialogSortingOptions"
-                                            :key="item.name"
-                                            @click="setGroupMemberSortOrder(item)">
-                                            {{ t(item.name) }}
-                                        </el-dropdown-item>
-                                    </el-dropdown-menu>
-                                </template>
-                            </el-dropdown>
+                            <DropdownMenu>
+                                <DropdownMenuTrigger
+                                    as-child
+                                    :disabled="
+                                        Boolean(
+                                            isGroupMembersLoading ||
+                                            memberSearch.length ||
+                                            !hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')
+                                        )
+                                    ">
+                                    <el-button
+                                        size="small"
+                                        :disabled="
+                                            Boolean(
+                                                isGroupMembersLoading ||
+                                                memberSearch.length ||
+                                                !hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')
+                                            )
+                                        "
+                                        @click.stop>
+                                        <span>
+                                            {{ t(memberSortOrder.name) }}
+                                            <el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
+                                        </span>
+                                    </el-button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent>
+                                    <DropdownMenuItem
+                                        v-for="item in groupDialogSortingOptions"
+                                        :key="item.name"
+                                        @click="setGroupMemberSortOrder(item)">
+                                        {{ t(item.name) }}
+                                    </DropdownMenuItem>
+                                </DropdownMenuContent>
+                            </DropdownMenu>
                             <span style="margin-right: 5px">{{ t('dialog.group.members.filter') }}</span>
-                            <el-dropdown
-                                trigger="click"
-                                size="small"
-                                style="margin-right: 5px"
-                                :disabled="
-                                    Boolean(
-                                        isGroupMembersLoading ||
-                                        memberSearch.length ||
-                                        !hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')
-                                    )
-                                ">
-                                <el-button size="small" @click.stop>
-                                    <span
-                                        >{{ t(memberFilter.name) }}
-                                        <el-icon style="margin-left: 5px"><ArrowDown /></el-icon
-                                    ></span>
-                                </el-button>
-                                <template #dropdown>
-                                    <el-dropdown-menu>
-                                        <el-dropdown-item
-                                            v-for="item in groupDialogFilterOptions"
-                                            :key="item.name"
-                                            @click="setGroupMemberFilter(item)"
-                                            v-text="t(item.name)"></el-dropdown-item>
-                                        <template v-for="role in groupMemberModeration.groupRef.roles" :key="role.name">
-                                            <el-dropdown-item
-                                                v-if="!role.defaultRole"
-                                                @click="setGroupMemberFilter(role)">
-                                                {{ t(role.name) }}
-                                            </el-dropdown-item>
-                                        </template>
-                                    </el-dropdown-menu>
-                                </template>
-                            </el-dropdown>
+                            <DropdownMenu>
+                                <DropdownMenuTrigger
+                                    as-child
+                                    :disabled="
+                                        Boolean(
+                                            isGroupMembersLoading ||
+                                            memberSearch.length ||
+                                            !hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')
+                                        )
+                                    ">
+                                    <el-button
+                                        size="small"
+                                        :disabled="
+                                            Boolean(
+                                                isGroupMembersLoading ||
+                                                memberSearch.length ||
+                                                !hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')
+                                            )
+                                        "
+                                        @click.stop>
+                                        <span>
+                                            {{ t(memberFilter.name) }}
+                                            <el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
+                                        </span>
+                                    </el-button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent>
+                                    <DropdownMenuItem
+                                        v-for="item in groupDialogFilterOptions"
+                                        :key="item.name"
+                                        @click="setGroupMemberFilter(item)">
+                                        {{ t(item.name) }}
+                                    </DropdownMenuItem>
+                                    <template v-for="role in groupMemberModeration.groupRef.roles" :key="role.name">
+                                        <DropdownMenuItem v-if="!role.defaultRole" @click="setGroupMemberFilter(role)">
+                                            {{ t(role.name) }}
+                                        </DropdownMenuItem>
+                                    </template>
+                                </DropdownMenuContent>
+                            </DropdownMenu>
                         </div>
                         <el-input
                             v-model="memberSearch"
@@ -869,6 +882,7 @@
     import { useI18n } from 'vue-i18n';
 
     import { debounce, formatDateFilter, hasGroupPermission, userImage, userImageFull } from '../../../shared/utils';
+    import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../../ui/dropdown-menu';
     import { useAppearanceSettingsStore, useGalleryStore, useGroupStore, useUserStore } from '../../../stores';
     import { groupDialogFilterOptions, groupDialogSortingOptions } from '../../../shared/constants';
     import { groupRequest, userRequest } from '../../../api';
diff --git a/src/components/dialogs/UserDialog/UserActionDropdown.vue b/src/components/dialogs/UserDialog/UserActionDropdown.vue
index acc59246..8a964dc4 100644
--- a/src/components/dialogs/UserDialog/UserActionDropdown.vue
+++ b/src/components/dialogs/UserDialog/UserActionDropdown.vue
@@ -21,186 +21,212 @@
                     @click="userDialogCommand('Add Favorite')"></el-button>
             </TooltipWrapper>
         </template>
-        <el-dropdown trigger="click" @command="onCommand">
-            <el-button
-                :type="
-                    userDialog.incomingRequest || userDialog.outgoingRequest
-                        ? 'success'
-                        : userDialog.isBlock || userDialog.isMute
-                          ? 'danger'
-                          : 'default'
-                "
-                :icon="MoreFilled"
-                size="large"
-                circle
-                style="margin-left: 5px"></el-button>
-            <template #dropdown>
-                <el-dropdown-menu>
-                    <el-dropdown-item :icon="Refresh" command="Refresh">{{
-                        t('dialog.user.actions.refresh')
-                    }}</el-dropdown-item>
-                    <el-dropdown-item :icon="Share" command="Share">{{
-                        t('dialog.user.actions.share')
-                    }}</el-dropdown-item>
-                    <template v-if="userDialog.ref.id === currentUser.id">
-                        <el-dropdown-item :icon="UserFilled" command="Show Avatar Author">{{
-                            t('dialog.user.actions.show_avatar_author')
-                        }}</el-dropdown-item>
-                        <el-dropdown-item :icon="UserFilled" command="Show Fallback Avatar Details">{{
-                            t('dialog.user.actions.show_fallback_avatar')
-                        }}</el-dropdown-item>
-                        <el-dropdown-item :icon="Edit" command="Edit Social Status" divided>{{
-                            t('dialog.user.actions.edit_status')
-                        }}</el-dropdown-item>
-                        <el-dropdown-item :icon="Edit" command="Edit Language">{{
-                            t('dialog.user.actions.edit_language')
-                        }}</el-dropdown-item>
-                        <el-dropdown-item :icon="Edit" command="Edit Bio">{{
-                            t('dialog.user.actions.edit_bio')
-                        }}</el-dropdown-item>
-                        <el-dropdown-item :icon="Edit" command="Edit Pronouns">{{
-                            t('dialog.user.actions.edit_pronouns')
-                        }}</el-dropdown-item>
-                        <el-dropdown-item :icon="SwitchButton" command="Logout" divided>{{
-                            t('dialog.user.actions.logout')
-                        }}</el-dropdown-item>
+        <DropdownMenu>
+            <DropdownMenuTrigger as-child>
+                <el-button
+                    :type="
+                        userDialog.incomingRequest || userDialog.outgoingRequest
+                            ? 'success'
+                            : userDialog.isBlock || userDialog.isMute
+                              ? 'danger'
+                              : 'default'
+                    "
+                    :icon="MoreFilled"
+                    size="large"
+                    circle
+                    style="margin-left: 5px"></el-button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+                <DropdownMenuItem @click="onCommand('Refresh')">
+                    <Refresh class="size-4" />
+                    {{ t('dialog.user.actions.refresh') }}
+                </DropdownMenuItem>
+                <DropdownMenuItem @click="onCommand('Share')">
+                    <Share class="size-4" />
+                    {{ t('dialog.user.actions.share') }}
+                </DropdownMenuItem>
+                <template v-if="userDialog.ref.id === currentUser.id">
+                    <DropdownMenuItem @click="onCommand('Show Avatar Author')">
+                        <UserFilled class="size-4" />
+                        {{ t('dialog.user.actions.show_avatar_author') }}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem @click="onCommand('Show Fallback Avatar Details')">
+                        <UserFilled class="size-4" />
+                        {{ t('dialog.user.actions.show_fallback_avatar') }}
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem @click="onCommand('Edit Social Status')">
+                        <Edit class="size-4" />
+                        {{ t('dialog.user.actions.edit_status') }}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem @click="onCommand('Edit Language')">
+                        <Edit class="size-4" />
+                        {{ t('dialog.user.actions.edit_language') }}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem @click="onCommand('Edit Bio')">
+                        <Edit class="size-4" />
+                        {{ t('dialog.user.actions.edit_bio') }}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem @click="onCommand('Edit Pronouns')">
+                        <Edit class="size-4" />
+                        {{ t('dialog.user.actions.edit_pronouns') }}
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem @click="onCommand('Logout')">
+                        <SwitchButton class="size-4" />
+                        {{ t('dialog.user.actions.logout') }}
+                    </DropdownMenuItem>
+                </template>
+                <template v-else>
+                    <template v-if="userDialog.isFriend">
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem @click="onCommand('Request Invite')">
+                            <Postcard class="size-4" />
+                            {{ t('dialog.user.actions.request_invite') }}
+                        </DropdownMenuItem>
+                        <DropdownMenuItem @click="onCommand('Request Invite Message')">
+                            <Postcard class="size-4" />
+                            {{ t('dialog.user.actions.request_invite_with_message') }}
+                        </DropdownMenuItem>
+                        <template v-if="isGameRunning">
+                            <DropdownMenuItem
+                                :disabled="!checkCanInvite(lastLocation.location)"
+                                @click="onCommand('Invite')">
+                                <Message class="size-4" />
+                                {{ t('dialog.user.actions.invite') }}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem
+                                :disabled="!checkCanInvite(lastLocation.location)"
+                                @click="onCommand('Invite Message')">
+                                <Message class="size-4" />
+                                {{ t('dialog.user.actions.invite_with_message') }}
+                            </DropdownMenuItem>
+                        </template>
+                        <DropdownMenuItem :disabled="!currentUser.isBoopingEnabled" @click="onCommand('Send Boop')">
+                            <Pointer class="size-4" />
+                            {{ t('dialog.user.actions.send_boop') }}
+                        </DropdownMenuItem>
                     </template>
-                    <template v-else>
-                        <template v-if="userDialog.isFriend">
-                            <el-dropdown-item :icon="Postcard" command="Request Invite" divided>{{
-                                t('dialog.user.actions.request_invite')
-                            }}</el-dropdown-item>
-                            <el-dropdown-item :icon="Postcard" command="Request Invite Message">{{
-                                t('dialog.user.actions.request_invite_with_message')
-                            }}</el-dropdown-item>
-                            <template v-if="isGameRunning">
-                                <el-dropdown-item
-                                    :disabled="!checkCanInvite(lastLocation.location)"
-                                    :icon="Message"
-                                    command="Invite"
-                                    >{{ t('dialog.user.actions.invite') }}</el-dropdown-item
-                                >
-                                <el-dropdown-item
-                                    :disabled="!checkCanInvite(lastLocation.location)"
-                                    :icon="Message"
-                                    command="Invite Message"
-                                    >{{ t('dialog.user.actions.invite_with_message') }}</el-dropdown-item
-                                >
-                            </template>
-                            <el-dropdown-item
-                                :disabled="!currentUser.isBoopingEnabled"
-                                :icon="Pointer"
-                                command="Send Boop"
-                                >{{ t('dialog.user.actions.send_boop') }}</el-dropdown-item
-                            >
-                        </template>
-                        <template v-else-if="userDialog.incomingRequest">
-                            <el-dropdown-item :icon="Check" command="Accept Friend Request">{{
-                                t('dialog.user.actions.accept_friend_request')
-                            }}</el-dropdown-item>
-                            <el-dropdown-item :icon="Close" command="Decline Friend Request">{{
-                                t('dialog.user.actions.decline_friend_request')
-                            }}</el-dropdown-item>
-                        </template>
-                        <el-dropdown-item
-                            v-else-if="userDialog.outgoingRequest"
-                            :icon="Close"
-                            command="Cancel Friend Request">
-                            {{ t('dialog.user.actions.cancel_friend_request') }}
-                        </el-dropdown-item>
-                        <el-dropdown-item v-else :icon="Plus" command="Send Friend Request">{{
-                            t('dialog.user.actions.send_friend_request')
-                        }}</el-dropdown-item>
-                        <el-dropdown-item :icon="Message" command="Invite To Group">{{
-                            t('dialog.user.actions.invite_to_group')
-                        }}</el-dropdown-item>
-                        <el-dropdown-item :icon="Operation" command="Group Moderation">{{
-                            t('dialog.user.actions.group_moderation')
-                        }}</el-dropdown-item>
-                        <el-dropdown-item :icon="Edit" command="Edit Note Memo"> Edit Note and Memo </el-dropdown-item>
-                        <el-dropdown-item :icon="UserFilled" command="Show Avatar Author" divided>{{
-                            t('dialog.user.actions.show_avatar_author')
-                        }}</el-dropdown-item>
-                        <el-dropdown-item :icon="UserFilled" command="Show Fallback Avatar Details">{{
-                            t('dialog.user.actions.show_fallback_avatar')
-                        }}</el-dropdown-item>
-                        <el-dropdown-item :icon="DataLine" command="Previous Instances">{{
-                            t('dialog.user.actions.show_previous_instances')
-                        }}</el-dropdown-item>
-                        <el-dropdown-item
-                            v-if="userDialog.isBlock"
-                            :icon="CircleCheck"
-                            command="Moderation Unblock"
-                            divided
-                            style="color: var(--el-color-danger)">
-                            {{ t('dialog.user.actions.moderation_unblock') }}
-                        </el-dropdown-item>
-                        <el-dropdown-item
-                            v-else
-                            :icon="CircleClose"
-                            command="Moderation Block"
-                            divided
-                            :disabled="userDialog.ref.$isModerator">
-                            {{ t('dialog.user.actions.moderation_block') }}
-                        </el-dropdown-item>
-                        <el-dropdown-item
-                            v-if="userDialog.isMute"
-                            :icon="Microphone"
-                            command="Moderation Unmute"
-                            style="color: var(--el-color-danger)">
-                            {{ t('dialog.user.actions.moderation_unmute') }}
-                        </el-dropdown-item>
-                        <el-dropdown-item
-                            v-else
-                            :icon="Mute"
-                            command="Moderation Mute"
-                            :disabled="userDialog.ref.$isModerator">
-                            {{ t('dialog.user.actions.moderation_mute') }}
-                        </el-dropdown-item>
-                        <el-dropdown-item
-                            v-if="userDialog.isMuteChat"
-                            :icon="ChatLineRound"
-                            command="Moderation Enable Chatbox"
-                            style="color: var(--el-color-danger)">
-                            {{ t('dialog.user.actions.moderation_enable_chatbox') }}
-                        </el-dropdown-item>
-                        <el-dropdown-item v-else :icon="ChatDotRound" command="Moderation Disable Chatbox">
-                            {{ t('dialog.user.actions.moderation_disable_chatbox') }}
-                        </el-dropdown-item>
-                        <el-dropdown-item :icon="User" command="Show Avatar">
-                            <el-icon v-if="userDialog.isShowAvatar" style="margin-right: 5px"><Check /></el-icon>
-                            <span>{{ t('dialog.user.actions.moderation_show_avatar') }}</span>
-                        </el-dropdown-item>
-                        <el-dropdown-item :icon="User" command="Hide Avatar">
-                            <el-icon v-if="userDialog.isHideAvatar" style="margin-right: 5px"><Check /></el-icon>
-                            <span>{{ t('dialog.user.actions.moderation_hide_avatar') }}</span>
-                        </el-dropdown-item>
-                        <el-dropdown-item
-                            v-if="userDialog.isInteractOff"
-                            :icon="Pointer"
-                            command="Moderation Enable Avatar Interaction"
-                            style="color: var(--el-color-danger)">
-                            {{ t('dialog.user.actions.moderation_enable_avatar_interaction') }}
-                        </el-dropdown-item>
-                        <el-dropdown-item v-else :icon="CircleClose" command="Moderation Disable Avatar Interaction">
-                            {{ t('dialog.user.actions.moderation_disable_avatar_interaction') }}
-                        </el-dropdown-item>
-                        <el-dropdown-item :icon="Flag" command="Report Hacking" :disabled="userDialog.ref.$isModerator">
-                            {{ t('dialog.user.actions.report_hacking') }}
-                        </el-dropdown-item>
-                        <template v-if="userDialog.isFriend">
-                            <el-dropdown-item
-                                :icon="Delete"
-                                command="Unfriend"
-                                divided
-                                style="color: var(--el-color-danger)">
-                                {{ t('dialog.user.actions.unfriend') }}
-                            </el-dropdown-item>
-                        </template>
+                    <template v-else-if="userDialog.incomingRequest">
+                        <DropdownMenuItem @click="onCommand('Accept Friend Request')">
+                            <Check class="size-4" />
+                            {{ t('dialog.user.actions.accept_friend_request') }}
+                        </DropdownMenuItem>
+                        <DropdownMenuItem @click="onCommand('Decline Friend Request')">
+                            <Close class="size-4" />
+                            {{ t('dialog.user.actions.decline_friend_request') }}
+                        </DropdownMenuItem>
                     </template>
-                </el-dropdown-menu>
-            </template>
-        </el-dropdown>
+                    <DropdownMenuItem
+                        v-else-if="userDialog.outgoingRequest"
+                        @click="onCommand('Cancel Friend Request')">
+                        <Close class="size-4" />
+                        {{ t('dialog.user.actions.cancel_friend_request') }}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem v-else @click="onCommand('Send Friend Request')">
+                        <Plus class="size-4" />
+                        {{ t('dialog.user.actions.send_friend_request') }}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem @click="onCommand('Invite To Group')">
+                        <Message class="size-4" />
+                        {{ t('dialog.user.actions.invite_to_group') }}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem @click="onCommand('Group Moderation')">
+                        <Operation class="size-4" />
+                        {{ t('dialog.user.actions.group_moderation') }}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem @click="onCommand('Edit Note Memo')">
+                        <Edit class="size-4" />
+                        Edit Note and Memo
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem @click="onCommand('Show Avatar Author')">
+                        <UserFilled class="size-4" />
+                        {{ t('dialog.user.actions.show_avatar_author') }}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem @click="onCommand('Show Fallback Avatar Details')">
+                        <UserFilled class="size-4" />
+                        {{ t('dialog.user.actions.show_fallback_avatar') }}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem @click="onCommand('Previous Instances')">
+                        <DataLine class="size-4" />
+                        {{ t('dialog.user.actions.show_previous_instances') }}
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem
+                        v-if="userDialog.isBlock"
+                        variant="destructive"
+                        @click="onCommand('Moderation Unblock')">
+                        <CircleCheck class="size-4" />
+                        {{ t('dialog.user.actions.moderation_unblock') }}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                        v-else
+                        :disabled="userDialog.ref.$isModerator"
+                        @click="onCommand('Moderation Block')">
+                        <CircleClose class="size-4" />
+                        {{ t('dialog.user.actions.moderation_block') }}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                        v-if="userDialog.isMute"
+                        variant="destructive"
+                        @click="onCommand('Moderation Unmute')">
+                        <Microphone class="size-4" />
+                        {{ t('dialog.user.actions.moderation_unmute') }}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                        v-else
+                        :disabled="userDialog.ref.$isModerator"
+                        @click="onCommand('Moderation Mute')">
+                        <Mute class="size-4" />
+                        {{ t('dialog.user.actions.moderation_mute') }}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                        v-if="userDialog.isMuteChat"
+                        variant="destructive"
+                        @click="onCommand('Moderation Enable Chatbox')">
+                        <ChatLineRound class="size-4" />
+                        {{ t('dialog.user.actions.moderation_enable_chatbox') }}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem v-else @click="onCommand('Moderation Disable Chatbox')">
+                        <ChatDotRound class="size-4" />
+                        {{ t('dialog.user.actions.moderation_disable_chatbox') }}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem @click="onCommand('Show Avatar')">
+                        <User class="size-4" />
+                        <Check v-if="userDialog.isShowAvatar" class="size-4" />
+                        <span>{{ t('dialog.user.actions.moderation_show_avatar') }}</span>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem @click="onCommand('Hide Avatar')">
+                        <User class="size-4" />
+                        <Check v-if="userDialog.isHideAvatar" class="size-4" />
+                        <span>{{ t('dialog.user.actions.moderation_hide_avatar') }}</span>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                        v-if="userDialog.isInteractOff"
+                        variant="destructive"
+                        @click="onCommand('Moderation Enable Avatar Interaction')">
+                        <Pointer class="size-4" />
+                        {{ t('dialog.user.actions.moderation_enable_avatar_interaction') }}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem v-else @click="onCommand('Moderation Disable Avatar Interaction')">
+                        <CircleClose class="size-4" />
+                        {{ t('dialog.user.actions.moderation_disable_avatar_interaction') }}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem :disabled="userDialog.ref.$isModerator" @click="onCommand('Report Hacking')">
+                        <Flag class="size-4" />
+                        {{ t('dialog.user.actions.report_hacking') }}
+                    </DropdownMenuItem>
+                    <template v-if="userDialog.isFriend">
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem variant="destructive" @click="onCommand('Unfriend')">
+                            <Delete class="size-4" />
+                            {{ t('dialog.user.actions.unfriend') }}
+                        </DropdownMenuItem>
+                    </template>
+                </template>
+            </DropdownMenuContent>
+        </DropdownMenu>
     </div>
 </template>
 
@@ -236,6 +262,13 @@
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
+    import {
+        DropdownMenu,
+        DropdownMenuContent,
+        DropdownMenuItem,
+        DropdownMenuSeparator,
+        DropdownMenuTrigger
+    } from '../../ui/dropdown-menu';
     import { useGameStore, useLocationStore, useUserStore } from '../../../stores';
     import { checkCanInvite } from '../../../shared/utils';
 
diff --git a/src/components/dialogs/UserDialog/UserDialog.vue b/src/components/dialogs/UserDialog/UserDialog.vue
index 045bc641..1a731dd9 100644
--- a/src/components/dialogs/UserDialog/UserDialog.vue
+++ b/src/components/dialogs/UserDialog/UserDialog.vue
@@ -512,27 +512,28 @@
                                 <span class="extra">
                                     {{ userDialog.id }}
                                     <TooltipWrapper side="top" :content="t('dialog.user.info.id_tooltip')">
-                                        <el-dropdown trigger="click" size="small" style="margin-left: 5px" @click.stop>
-                                            <el-button
-                                                type="default"
-                                                :icon="CopyDocument"
-                                                size="small"
-                                                circle></el-button>
-                                            <template #dropdown>
-                                                <el-dropdown-menu>
-                                                    <el-dropdown-item @click="copyUserId(userDialog.id)">{{
-                                                        t('dialog.user.info.copy_id')
-                                                    }}</el-dropdown-item>
-                                                    <el-dropdown-item @click="copyUserURL(userDialog.id)">{{
-                                                        t('dialog.user.info.copy_url')
-                                                    }}</el-dropdown-item>
-                                                    <el-dropdown-item
-                                                        @click="copyUserDisplayName(userDialog.ref.displayName)"
-                                                        >{{ t('dialog.user.info.copy_display_name') }}</el-dropdown-item
-                                                    >
-                                                </el-dropdown-menu>
-                                            </template>
-                                        </el-dropdown>
+                                        <DropdownMenu>
+                                            <DropdownMenuTrigger as-child>
+                                                <el-button
+                                                    type="default"
+                                                    :icon="CopyDocument"
+                                                    size="small"
+                                                    circle
+                                                    @click.stop></el-button>
+                                            </DropdownMenuTrigger>
+                                            <DropdownMenuContent>
+                                                <DropdownMenuItem @click="copyUserId(userDialog.id)">
+                                                    {{ t('dialog.user.info.copy_id') }}
+                                                </DropdownMenuItem>
+                                                <DropdownMenuItem @click="copyUserURL(userDialog.id)">
+                                                    {{ t('dialog.user.info.copy_url') }}
+                                                </DropdownMenuItem>
+                                                <DropdownMenuItem
+                                                    @click="copyUserDisplayName(userDialog.ref.displayName)">
+                                                    {{ t('dialog.user.info.copy_display_name') }}
+                                                </DropdownMenuItem>
+                                            </DropdownMenuContent>
+                                        </DropdownMenu>
                                     </TooltipWrapper>
                                 </span>
                             </div>
@@ -561,29 +562,24 @@
                         </div>
                         <div style="display: flex; align-items: center">
                             <span style="margin-right: 5px">{{ t('dialog.user.groups.sort_by') }}</span>
-                            <el-dropdown
-                                trigger="click"
-                                size="small"
-                                style="margin-right: 5px"
-                                :disabled="userDialog.isMutualFriendsLoading"
-                                @click.stop>
-                                <el-button size="small">
-                                    <span
-                                        >{{ t(userDialog.mutualFriendSorting.name) }}
-                                        <el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
-                                    </span>
-                                </el-button>
-                                <template #dropdown>
-                                    <el-dropdown-menu>
-                                        <el-dropdown-item
-                                            v-for="(item, key) in userDialogMutualFriendSortingOptions"
-                                            :key="key"
-                                            @click="setUserDialogMutualFriendSorting(item)"
-                                            >{{ t(item.name) }}
-                                        </el-dropdown-item>
-                                    </el-dropdown-menu>
-                                </template>
-                            </el-dropdown>
+                            <DropdownMenu>
+                                <DropdownMenuTrigger as-child :disabled="userDialog.isMutualFriendsLoading">
+                                    <el-button size="small" :disabled="userDialog.isMutualFriendsLoading" @click.stop>
+                                        <span>
+                                            {{ t(userDialog.mutualFriendSorting.name) }}
+                                            <el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
+                                        </span>
+                                    </el-button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent>
+                                    <DropdownMenuItem
+                                        v-for="(item, key) in userDialogMutualFriendSortingOptions"
+                                        :key="key"
+                                        @click="setUserDialogMutualFriendSorting(item)">
+                                        {{ t(item.name) }}
+                                    </DropdownMenuItem>
+                                </DropdownMenuContent>
+                            </DropdownMenu>
                         </div>
                     </div>
                     <div
@@ -645,33 +641,28 @@
                         <div style="display: flex; align-items: center">
                             <template v-if="!userDialogGroupEditMode">
                                 <span style="margin-right: 5px">{{ t('dialog.user.groups.sort_by') }}</span>
-                                <el-dropdown
-                                    trigger="click"
-                                    size="small"
-                                    style="margin-right: 5px"
-                                    :disabled="userDialog.isGroupsLoading"
-                                    @click.stop>
-                                    <el-button size="small">
-                                        <span
-                                            >{{ t(userDialog.groupSorting.name) }}
-                                            <el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
-                                        </span>
-                                    </el-button>
-                                    <template #dropdown>
-                                        <el-dropdown-menu>
-                                            <el-dropdown-item
-                                                v-for="(item, key) in userDialogGroupSortingOptions"
-                                                :key="key"
-                                                :disabled="
-                                                    item === userDialogGroupSortingOptions.inGame &&
-                                                    userDialog.id !== currentUser.id
-                                                "
-                                                @click="setUserDialogGroupSorting(item)"
-                                                >{{ t(item.name) }}
-                                            </el-dropdown-item>
-                                        </el-dropdown-menu>
-                                    </template>
-                                </el-dropdown>
+                                <DropdownMenu>
+                                    <DropdownMenuTrigger as-child :disabled="userDialog.isGroupsLoading">
+                                        <el-button size="small" :disabled="userDialog.isGroupsLoading" @click.stop>
+                                            <span>
+                                                {{ t(userDialog.groupSorting.name) }}
+                                                <el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
+                                            </span>
+                                        </el-button>
+                                    </DropdownMenuTrigger>
+                                    <DropdownMenuContent>
+                                        <DropdownMenuItem
+                                            v-for="(item, key) in userDialogGroupSortingOptions"
+                                            :key="key"
+                                            :disabled="
+                                                item === userDialogGroupSortingOptions.inGame &&
+                                                userDialog.id !== currentUser.id
+                                            "
+                                            @click="setUserDialogGroupSorting(item)">
+                                            {{ t(item.name) }}
+                                        </DropdownMenuItem>
+                                    </DropdownMenuContent>
+                                </DropdownMenu>
                             </template>
                             <el-button
                                 v-if="userDialogGroupEditMode"
@@ -695,32 +686,38 @@
                         <template v-if="userDialogGroupEditMode">
                             <div class="x-friend-list" style="margin-top: 10px; margin-bottom: 15px; max-height: unset">
                                 <!-- Bulk actions dropdown (shown only in edit mode) -->
-                                <el-dropdown trigger="click">
-                                    <el-button
-                                        size="small"
-                                        :icon="Setting"
-                                        style="margin-right: 5px; height: 29px; padding: 7px 15px; margin-bottom: 5px">
-                                        {{ t('dialog.group.actions.manage_selected') }}
-                                        <el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
-                                    </el-button>
-                                    <template #dropdown>
-                                        <el-dropdown-menu>
-                                            <el-dropdown-item @click="bulkSetVisibility('visible')">
-                                                {{ t('dialog.group.actions.visibility_everyone') }}
-                                            </el-dropdown-item>
-                                            <el-dropdown-item @click="bulkSetVisibility('friends')">
-                                                {{ t('dialog.group.actions.visibility_friends') }}
-                                            </el-dropdown-item>
-                                            <el-dropdown-item @click="bulkSetVisibility('hidden')">
-                                                {{ t('dialog.group.actions.visibility_hidden') }}
-                                            </el-dropdown-item>
-                                            <el-dropdown-item divided @click="bulkLeaveGroups">
-                                                <el-icon><Delete /></el-icon>
-                                                {{ t('dialog.user.groups.leave_group_tooltip') }}
-                                            </el-dropdown-item>
-                                        </el-dropdown-menu>
-                                    </template>
-                                </el-dropdown>
+                                <DropdownMenu>
+                                    <DropdownMenuTrigger as-child>
+                                        <el-button
+                                            size="small"
+                                            :icon="Setting"
+                                            style="
+                                                margin-right: 5px;
+                                                height: 29px;
+                                                padding: 7px 15px;
+                                                margin-bottom: 5px;
+                                            ">
+                                            {{ t('dialog.group.actions.manage_selected') }}
+                                            <el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
+                                        </el-button>
+                                    </DropdownMenuTrigger>
+                                    <DropdownMenuContent>
+                                        <DropdownMenuItem @click="bulkSetVisibility('visible')">
+                                            {{ t('dialog.group.actions.visibility_everyone') }}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem @click="bulkSetVisibility('friends')">
+                                            {{ t('dialog.group.actions.visibility_friends') }}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem @click="bulkSetVisibility('hidden')">
+                                            {{ t('dialog.group.actions.visibility_hidden') }}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuSeparator />
+                                        <DropdownMenuItem variant="destructive" @click="bulkLeaveGroups">
+                                            <Delete class="size-4" />
+                                            {{ t('dialog.user.groups.leave_group_tooltip') }}
+                                        </DropdownMenuItem>
+                                    </DropdownMenuContent>
+                                </DropdownMenu>
 
                                 <!-- Select All button -->
                                 <el-button
@@ -813,49 +810,37 @@
                                             <span>({{ group.memberCount }})</span>
                                         </span>
                                     </div>
-                                    <el-dropdown
-                                        v-if="group.myMember?.visibility"
-                                        trigger="click"
-                                        size="small"
-                                        style="margin-right: 5px">
-                                        <el-button :disabled="group.privacy !== 'default'" @click.stop size="small">
-                                            <span v-if="group.myMember.visibility === 'visible'">{{
-                                                t('dialog.group.tags.visible')
-                                            }}</span>
-                                            <span v-else-if="group.myMember.visibility === 'friends'">{{
-                                                t('dialog.group.tags.friends')
-                                            }}</span>
-                                            <span v-else-if="group.myMember.visibility === 'hidden'">{{
-                                                t('dialog.group.tags.hidden')
-                                            }}</span>
-                                            <span v-else>{{ group.myMember.visibility }}</span>
-                                            <el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
-                                        </el-button>
-                                        <template #dropdown>
-                                            <el-dropdown-menu>
-                                                <el-dropdown-item @click="setGroupVisibility(group.id, 'visible')">
-                                                    <el-icon v-if="group.myMember.visibility === 'visible'"
-                                                        ><Check
-                                                    /></el-icon>
-                                                    {{
-                                                        t('dialog.group.actions.visibility_everyone')
-                                                    }}</el-dropdown-item
-                                                >
-                                                <el-dropdown-item @click="setGroupVisibility(group.id, 'friends')">
-                                                    <el-icon v-if="group.myMember.visibility === 'friends'"
-                                                        ><Check
-                                                    /></el-icon>
-                                                    {{ t('dialog.group.actions.visibility_friends') }}</el-dropdown-item
-                                                >
-                                                <el-dropdown-item @click="setGroupVisibility(group.id, 'hidden')"
-                                                    ><el-icon v-if="group.myMember.visibility === 'hidden'"
-                                                        ><Check
-                                                    /></el-icon>
-                                                    {{ t('dialog.group.actions.visibility_hidden') }}</el-dropdown-item
-                                                >
-                                            </el-dropdown-menu>
-                                        </template>
-                                    </el-dropdown>
+                                    <DropdownMenu v-if="group.myMember?.visibility">
+                                        <DropdownMenuTrigger as-child :disabled="group.privacy !== 'default'">
+                                            <el-button :disabled="group.privacy !== 'default'" @click.stop size="small">
+                                                <span v-if="group.myMember.visibility === 'visible'">{{
+                                                    t('dialog.group.tags.visible')
+                                                }}</span>
+                                                <span v-else-if="group.myMember.visibility === 'friends'">{{
+                                                    t('dialog.group.tags.friends')
+                                                }}</span>
+                                                <span v-else-if="group.myMember.visibility === 'hidden'">{{
+                                                    t('dialog.group.tags.hidden')
+                                                }}</span>
+                                                <span v-else>{{ group.myMember.visibility }}</span>
+                                                <el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
+                                            </el-button>
+                                        </DropdownMenuTrigger>
+                                        <DropdownMenuContent>
+                                            <DropdownMenuItem @click="setGroupVisibility(group.id, 'visible')">
+                                                <Check v-if="group.myMember.visibility === 'visible'" class="size-4" />
+                                                {{ t('dialog.group.actions.visibility_everyone') }}
+                                            </DropdownMenuItem>
+                                            <DropdownMenuItem @click="setGroupVisibility(group.id, 'friends')">
+                                                <Check v-if="group.myMember.visibility === 'friends'" class="size-4" />
+                                                {{ t('dialog.group.actions.visibility_friends') }}
+                                            </DropdownMenuItem>
+                                            <DropdownMenuItem @click="setGroupVisibility(group.id, 'hidden')">
+                                                <Check v-if="group.myMember.visibility === 'hidden'" class="size-4" />
+                                                {{ t('dialog.group.actions.visibility_hidden') }}
+                                            </DropdownMenuItem>
+                                        </DropdownMenuContent>
+                                    </DropdownMenu>
                                     <!--//- JSON is missing isSubscribedToAnnouncements, can't be implemented-->
                                     <!-- <el-button
                                         @click.stop="
@@ -1052,53 +1037,43 @@
                         </div>
                         <div style="display: flex; align-items: center">
                             <span style="margin-right: 5px">{{ t('dialog.user.worlds.sort_by') }}</span>
-                            <el-dropdown
-                                trigger="click"
-                                size="small"
-                                style="margin-right: 5px"
-                                :disabled="userDialog.isWorldsLoading"
-                                @click.stop>
-                                <el-button size="small">
-                                    <span
-                                        >{{ t(userDialog.worldSorting.name) }}
-                                        <el-icon style="margin-left: 5px"><ArrowDown /></el-icon
-                                    ></span>
-                                </el-button>
-                                <template #dropdown>
-                                    <el-dropdown-menu>
-                                        <el-dropdown-item
-                                            v-for="(item, key) in userDialogWorldSortingOptions"
-                                            :key="key"
-                                            @click="setUserDialogWorldSorting(item)">
-                                            {{ t(item.name) }}
-                                        </el-dropdown-item>
-                                    </el-dropdown-menu>
-                                </template>
-                            </el-dropdown>
+                            <DropdownMenu>
+                                <DropdownMenuTrigger as-child :disabled="userDialog.isWorldsLoading">
+                                    <el-button size="small" :disabled="userDialog.isWorldsLoading" @click.stop>
+                                        <span>
+                                            {{ t(userDialog.worldSorting.name) }}
+                                            <el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
+                                        </span>
+                                    </el-button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent>
+                                    <DropdownMenuItem
+                                        v-for="(item, key) in userDialogWorldSortingOptions"
+                                        :key="key"
+                                        @click="setUserDialogWorldSorting(item)">
+                                        {{ t(item.name) }}
+                                    </DropdownMenuItem>
+                                </DropdownMenuContent>
+                            </DropdownMenu>
                             <span style="margin: 0 5px">{{ t('dialog.user.worlds.order_by') }}</span>
-                            <el-dropdown
-                                trigger="click"
-                                size="small"
-                                style="margin-right: 5px"
-                                :disabled="userDialog.isWorldsLoading"
-                                @click.stop>
-                                <el-button size="small">
-                                    <span
-                                        >{{ t(userDialog.worldOrder.name) }}
-                                        <el-icon style="margin-left: 5px"><ArrowDown /></el-icon
-                                    ></span>
-                                </el-button>
-                                <template #dropdown>
-                                    <el-dropdown-menu>
-                                        <el-dropdown-item
-                                            v-for="(item, key) in userDialogWorldOrderOptions"
-                                            :key="key"
-                                            @click="setUserDialogWorldOrder(item)">
-                                            {{ t(item.name) }}
-                                        </el-dropdown-item>
-                                    </el-dropdown-menu>
-                                </template>
-                            </el-dropdown>
+                            <DropdownMenu>
+                                <DropdownMenuTrigger as-child :disabled="userDialog.isWorldsLoading">
+                                    <el-button size="small" :disabled="userDialog.isWorldsLoading" @click.stop>
+                                        <span>
+                                            {{ t(userDialog.worldOrder.name) }}
+                                            <el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
+                                        </span>
+                                    </el-button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent>
+                                    <DropdownMenuItem
+                                        v-for="(item, key) in userDialogWorldOrderOptions"
+                                        :key="key"
+                                        @click="setUserDialogWorldOrder(item)">
+                                        {{ t(item.name) }}
+                                    </DropdownMenuItem>
+                                </DropdownMenuContent>
+                            </DropdownMenu>
                         </div>
                     </div>
                     <div
@@ -1214,58 +1189,48 @@
                         <div>
                             <template v-if="userDialog.ref.id === currentUser.id">
                                 <span style="margin-right: 5px">{{ t('dialog.user.avatars.sort_by') }}</span>
-                                <el-dropdown
-                                    trigger="click"
-                                    size="small"
-                                    style="margin-right: 5px"
-                                    :disabled="userDialog.isWorldsLoading"
-                                    @click.stop>
-                                    <el-button size="small">
-                                        <span
-                                            >{{ t(`dialog.user.avatars.sort_by_${userDialog.avatarSorting}`) }}
-                                            <el-icon style="margin-left: 5px"><ArrowDown /></el-icon
-                                        ></span>
-                                    </el-button>
-                                    <template #dropdown>
-                                        <el-dropdown-menu>
-                                            <el-dropdown-item @click="changeUserDialogAvatarSorting('name')">
-                                                {{ t('dialog.user.avatars.sort_by_name') }}
-                                            </el-dropdown-item>
-                                            <el-dropdown-item @click="changeUserDialogAvatarSorting('update')">
-                                                {{ t('dialog.user.avatars.sort_by_update') }}
-                                            </el-dropdown-item>
-                                        </el-dropdown-menu>
-                                    </template>
-                                </el-dropdown>
+                                <DropdownMenu>
+                                    <DropdownMenuTrigger as-child :disabled="userDialog.isWorldsLoading">
+                                        <el-button size="small" :disabled="userDialog.isWorldsLoading" @click.stop>
+                                            <span>
+                                                {{ t(`dialog.user.avatars.sort_by_${userDialog.avatarSorting}`) }}
+                                                <el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
+                                            </span>
+                                        </el-button>
+                                    </DropdownMenuTrigger>
+                                    <DropdownMenuContent>
+                                        <DropdownMenuItem @click="changeUserDialogAvatarSorting('name')">
+                                            {{ t('dialog.user.avatars.sort_by_name') }}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem @click="changeUserDialogAvatarSorting('update')">
+                                            {{ t('dialog.user.avatars.sort_by_update') }}
+                                        </DropdownMenuItem>
+                                    </DropdownMenuContent>
+                                </DropdownMenu>
                                 <span style="margin-right: 5px; margin-left: 10px">{{
                                     t('dialog.user.avatars.group_by')
                                 }}</span>
-                                <el-dropdown
-                                    trigger="click"
-                                    size="small"
-                                    style="margin-right: 5px"
-                                    :disabled="userDialog.isWorldsLoading"
-                                    @click.stop>
-                                    <el-button size="small">
-                                        <span
-                                            >{{ t(`dialog.user.avatars.${userDialog.avatarReleaseStatus}`) }}
-                                            <el-icon style="margin-left: 5px"><ArrowDown /></el-icon
-                                        ></span>
-                                    </el-button>
-                                    <template #dropdown>
-                                        <el-dropdown-menu>
-                                            <el-dropdown-item @click="userDialog.avatarReleaseStatus = 'all'">
-                                                {{ t('dialog.user.avatars.all') }}
-                                            </el-dropdown-item>
-                                            <el-dropdown-item @click="userDialog.avatarReleaseStatus = 'public'">
-                                                {{ t('dialog.user.avatars.public') }}
-                                            </el-dropdown-item>
-                                            <el-dropdown-item @click="userDialog.avatarReleaseStatus = 'private'">
-                                                {{ t('dialog.user.avatars.private') }}
-                                            </el-dropdown-item>
-                                        </el-dropdown-menu>
-                                    </template>
-                                </el-dropdown>
+                                <DropdownMenu>
+                                    <DropdownMenuTrigger as-child :disabled="userDialog.isWorldsLoading">
+                                        <el-button size="small" :disabled="userDialog.isWorldsLoading" @click.stop>
+                                            <span>
+                                                {{ t(`dialog.user.avatars.${userDialog.avatarReleaseStatus}`) }}
+                                                <el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
+                                            </span>
+                                        </el-button>
+                                    </DropdownMenuTrigger>
+                                    <DropdownMenuContent>
+                                        <DropdownMenuItem @click="userDialog.avatarReleaseStatus = 'all'">
+                                            {{ t('dialog.user.avatars.all') }}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem @click="userDialog.avatarReleaseStatus = 'public'">
+                                            {{ t('dialog.user.avatars.public') }}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem @click="userDialog.avatarReleaseStatus = 'private'">
+                                            {{ t('dialog.user.avatars.private') }}
+                                        </DropdownMenuItem>
+                                    </DropdownMenuContent>
+                                </DropdownMenu>
                             </template>
                         </div>
                     </div>
@@ -1412,6 +1377,13 @@
         userRequest,
         worldRequest
     } from '../../../api';
+    import {
+        DropdownMenu,
+        DropdownMenuContent,
+        DropdownMenuItem,
+        DropdownMenuSeparator,
+        DropdownMenuTrigger
+    } from '../../ui/dropdown-menu';
     import { processBulk, request } from '../../../service/request';
     import { userDialogGroupSortingOptions, userDialogMutualFriendSortingOptions } from '../../../shared/constants';
     import { userDialogWorldOrderOptions, userDialogWorldSortingOptions } from '../../../shared/constants/';
diff --git a/src/components/dialogs/WorldDialog/WorldDialog.vue b/src/components/dialogs/WorldDialog/WorldDialog.vue
index 5cbea865..efaca7c8 100644
--- a/src/components/dialogs/WorldDialog/WorldDialog.vue
+++ b/src/components/dialogs/WorldDialog/WorldDialog.vue
@@ -181,110 +181,124 @@
                                 style="margin-left: 5px"
                                 @click="worldDialogCommand('Add Favorite')" />
                         </TooltipWrapper>
-                        <el-dropdown trigger="click" style="margin-left: 5px" @command="worldDialogCommand">
-                            <el-button type="default" :icon="MoreFilled" size="large" circle />
-                            <template #dropdown>
-                                <el-dropdown-menu>
-                                    <el-dropdown-item :icon="Refresh" command="Refresh">
-                                        {{ t('dialog.world.actions.refresh') }}
-                                    </el-dropdown-item>
-                                    <el-dropdown-item :icon="Share" command="Share">
-                                        {{ t('dialog.world.actions.share') }}
-                                    </el-dropdown-item>
-                                    <el-dropdown-item :icon="Flag" command="New Instance" divided>
-                                        {{ t('dialog.world.actions.new_instance') }}
-                                    </el-dropdown-item>
-                                    <el-dropdown-item :icon="Message" command="New Instance and Self Invite">
-                                        {{
-                                            canOpenInstanceInGame
-                                                ? t('dialog.world.actions.new_instance_and_open_ingame')
-                                                : t('dialog.world.actions.new_instance_and_self_invite')
-                                        }}
-                                    </el-dropdown-item>
-                                    <el-dropdown-item
+                        <DropdownMenu>
+                            <DropdownMenuTrigger as-child>
+                                <el-button type="default" :icon="MoreFilled" size="large" circle />
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent>
+                                <DropdownMenuItem @click="worldDialogCommand('Refresh')">
+                                    <Refresh class="size-4" />
+                                    {{ t('dialog.world.actions.refresh') }}
+                                </DropdownMenuItem>
+                                <DropdownMenuItem @click="worldDialogCommand('Share')">
+                                    <Share class="size-4" />
+                                    {{ t('dialog.world.actions.share') }}
+                                </DropdownMenuItem>
+                                <DropdownMenuSeparator />
+                                <DropdownMenuItem @click="worldDialogCommand('New Instance')">
+                                    <Flag class="size-4" />
+                                    {{ t('dialog.world.actions.new_instance') }}
+                                </DropdownMenuItem>
+                                <DropdownMenuItem @click="worldDialogCommand('New Instance and Self Invite')">
+                                    <Message class="size-4" />
+                                    {{
+                                        canOpenInstanceInGame
+                                            ? t('dialog.world.actions.new_instance_and_open_ingame')
+                                            : t('dialog.world.actions.new_instance_and_self_invite')
+                                    }}
+                                </DropdownMenuItem>
+                                <DropdownMenuSeparator />
+                                <DropdownMenuItem
+                                    v-if="
+                                        currentUser.$homeLocation &&
+                                        currentUser.$homeLocation.worldId === worldDialog.id
+                                    "
+                                    @click="worldDialogCommand('Reset Home')">
+                                    <MagicStick class="size-4" />
+                                    {{ t('dialog.world.actions.reset_home') }}
+                                </DropdownMenuItem>
+                                <DropdownMenuItem v-else @click="worldDialogCommand('Make Home')">
+                                    <HomeFilled class="size-4" />
+                                    {{ t('dialog.world.actions.make_home') }}
+                                </DropdownMenuItem>
+                                <DropdownMenuItem @click="worldDialogCommand('Previous Instances')">
+                                    <DataLine class="size-4" />
+                                    {{ t('dialog.world.actions.show_previous_instances') }}
+                                </DropdownMenuItem>
+                                <template v-if="currentUser.id !== worldDialog.ref.authorId">
+                                    <DropdownMenuItem
+                                        :disabled="!worldDialog.hasPersistData"
+                                        @click="worldDialogCommand('Delete Persistent Data')">
+                                        <Upload class="size-4" />
+                                        {{ t('dialog.world.actions.delete_persistent_data') }}
+                                    </DropdownMenuItem>
+                                </template>
+                                <template v-else>
+                                    <DropdownMenuItem @click="worldDialogCommand('Rename')">
+                                        <Edit class="size-4" />
+                                        {{ t('dialog.world.actions.rename') }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem @click="worldDialogCommand('Change Description')">
+                                        <Edit class="size-4" />
+                                        {{ t('dialog.world.actions.change_description') }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem @click="worldDialogCommand('Change Capacity')">
+                                        <Edit class="size-4" />
+                                        {{ t('dialog.world.actions.change_capacity') }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem @click="worldDialogCommand('Change Recommended Capacity')">
+                                        <Edit class="size-4" />
+                                        {{ t('dialog.world.actions.change_recommended_capacity') }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem @click="worldDialogCommand('Change YouTube Preview')">
+                                        <Edit class="size-4" />
+                                        {{ t('dialog.world.actions.change_preview') }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem @click="worldDialogCommand('Change Tags')">
+                                        <Edit class="size-4" />
+                                        {{ t('dialog.world.actions.change_warnings_settings_tags') }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem @click="worldDialogCommand('Change Allowed Domains')">
+                                        <Edit class="size-4" />
+                                        {{ t('dialog.world.actions.change_allowed_video_player_domains') }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem v-if="isWindows" @click="worldDialogCommand('Change Image')">
+                                        <Picture class="size-4" />
+                                        {{ t('dialog.world.actions.change_image') }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem
+                                        v-if="worldDialog.ref.unityPackageUrl"
+                                        @click="worldDialogCommand('Download Unity Package')">
+                                        <Download class="size-4" />
+                                        {{ t('dialog.world.actions.download_package') }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuSeparator />
+                                    <DropdownMenuItem
                                         v-if="
-                                            currentUser.$homeLocation &&
-                                            currentUser.$homeLocation.worldId === worldDialog.id
+                                            worldDialog.ref?.tags?.includes('system_approved') ||
+                                            worldDialog.ref?.tags?.includes('system_labs')
                                         "
-                                        :icon="MagicStick"
-                                        command="Reset Home"
-                                        divided>
-                                        {{ t('dialog.world.actions.reset_home') }}
-                                    </el-dropdown-item>
-                                    <el-dropdown-item v-else :icon="HomeFilled" command="Make Home" divided>
-                                        {{ t('dialog.world.actions.make_home') }}
-                                    </el-dropdown-item>
-                                    <el-dropdown-item :icon="DataLine" command="Previous Instances">
-                                        {{ t('dialog.world.actions.show_previous_instances') }}
-                                    </el-dropdown-item>
-                                    <template v-if="currentUser.id !== worldDialog.ref.authorId">
-                                        <el-dropdown-item
-                                            :disabled="!worldDialog.hasPersistData"
-                                            :icon="Upload"
-                                            command="Delete Persistent Data">
-                                            {{ t('dialog.world.actions.delete_persistent_data') }}
-                                        </el-dropdown-item>
-                                    </template>
-                                    <template v-else>
-                                        <el-dropdown-item :icon="Edit" command="Rename">
-                                            {{ t('dialog.world.actions.rename') }}
-                                        </el-dropdown-item>
-                                        <el-dropdown-item :icon="Edit" command="Change Description">
-                                            {{ t('dialog.world.actions.change_description') }}
-                                        </el-dropdown-item>
-                                        <el-dropdown-item :icon="Edit" command="Change Capacity">
-                                            {{ t('dialog.world.actions.change_capacity') }}
-                                        </el-dropdown-item>
-                                        <el-dropdown-item :icon="Edit" command="Change Recommended Capacity">
-                                            {{ t('dialog.world.actions.change_recommended_capacity') }}
-                                        </el-dropdown-item>
-                                        <el-dropdown-item :icon="Edit" command="Change YouTube Preview">
-                                            {{ t('dialog.world.actions.change_preview') }}
-                                        </el-dropdown-item>
-                                        <el-dropdown-item :icon="Edit" command="Change Tags">
-                                            {{ t('dialog.world.actions.change_warnings_settings_tags') }}
-                                        </el-dropdown-item>
-                                        <el-dropdown-item :icon="Edit" command="Change Allowed Domains">
-                                            {{ t('dialog.world.actions.change_allowed_video_player_domains') }}
-                                        </el-dropdown-item>
-                                        <el-dropdown-item v-if="isWindows" :icon="Picture" command="Change Image">
-                                            {{ t('dialog.world.actions.change_image') }}
-                                        </el-dropdown-item>
-                                        <el-dropdown-item
-                                            v-if="worldDialog.ref.unityPackageUrl"
-                                            :icon="Download"
-                                            command="Download Unity Package">
-                                            {{ t('dialog.world.actions.download_package') }}
-                                        </el-dropdown-item>
-                                        <el-dropdown-item
-                                            v-if="
-                                                worldDialog.ref?.tags?.includes('system_approved') ||
-                                                worldDialog.ref?.tags?.includes('system_labs')
-                                            "
-                                            :icon="View"
-                                            command="Unpublish"
-                                            divided>
-                                            {{ t('dialog.world.actions.unpublish') }}
-                                        </el-dropdown-item>
-                                        <el-dropdown-item v-else :icon="View" command="Publish" divided>
-                                            {{ t('dialog.world.actions.publish_to_labs') }}
-                                        </el-dropdown-item>
-                                        <el-dropdown-item
-                                            :disabled="!worldDialog.hasPersistData"
-                                            :icon="Upload"
-                                            command="Delete Persistent Data">
-                                            {{ t('dialog.world.actions.delete_persistent_data') }}
-                                        </el-dropdown-item>
-                                        <el-dropdown-item
-                                            :icon="Delete"
-                                            command="Delete"
-                                            style="color: var(--el-color-danger)">
-                                            {{ t('dialog.world.actions.delete') }}
-                                        </el-dropdown-item>
-                                    </template>
-                                </el-dropdown-menu>
-                            </template>
-                        </el-dropdown>
+                                        @click="worldDialogCommand('Unpublish')">
+                                        <View class="size-4" />
+                                        {{ t('dialog.world.actions.unpublish') }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem v-else @click="worldDialogCommand('Publish')">
+                                        <View class="size-4" />
+                                        {{ t('dialog.world.actions.publish_to_labs') }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem
+                                        :disabled="!worldDialog.hasPersistData"
+                                        @click="worldDialogCommand('Delete Persistent Data')">
+                                        <Upload class="size-4" />
+                                        {{ t('dialog.world.actions.delete_persistent_data') }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem variant="destructive" @click="worldDialogCommand('Delete')">
+                                        <Delete class="size-4" />
+                                        {{ t('dialog.world.actions.delete') }}
+                                    </DropdownMenuItem>
+                                </template>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
                     </div>
                 </div>
             </div>
@@ -431,22 +445,27 @@
                                         {{ worldDialog.id }}
                                     </span>
                                     <TooltipWrapper side="top" :content="t('dialog.world.info.id_tooltip')">
-                                        <el-dropdown trigger="click" size="small" style="margin-left: 5px" @click.stop>
-                                            <el-button type="default" :icon="CopyDocument" size="small" circle />
-                                            <template #dropdown>
-                                                <el-dropdown-menu>
-                                                    <el-dropdown-item @click="copyWorldId()">
-                                                        {{ t('dialog.world.info.copy_id') }}
-                                                    </el-dropdown-item>
-                                                    <el-dropdown-item @click="copyWorldUrl()">
-                                                        {{ t('dialog.world.info.copy_url') }}
-                                                    </el-dropdown-item>
-                                                    <el-dropdown-item @click="copyWorldName()">
-                                                        {{ t('dialog.world.info.copy_name') }}
-                                                    </el-dropdown-item>
-                                                </el-dropdown-menu>
-                                            </template>
-                                        </el-dropdown>
+                                        <DropdownMenu>
+                                            <DropdownMenuTrigger as-child>
+                                                <el-button
+                                                    type="default"
+                                                    :icon="CopyDocument"
+                                                    size="small"
+                                                    circle
+                                                    @click.stop />
+                                            </DropdownMenuTrigger>
+                                            <DropdownMenuContent>
+                                                <DropdownMenuItem @click="copyWorldId()">
+                                                    {{ t('dialog.world.info.copy_id') }}
+                                                </DropdownMenuItem>
+                                                <DropdownMenuItem @click="copyWorldUrl()">
+                                                    {{ t('dialog.world.info.copy_url') }}
+                                                </DropdownMenuItem>
+                                                <DropdownMenuItem @click="copyWorldName()">
+                                                    {{ t('dialog.world.info.copy_name') }}
+                                                </DropdownMenuItem>
+                                            </DropdownMenuContent>
+                                        </DropdownMenu>
                                     </TooltipWrapper>
                                 </div>
                             </div>
@@ -780,6 +799,13 @@
         useUserStore,
         useWorldStore
     } from '../../../stores';
+    import {
+        DropdownMenu,
+        DropdownMenuContent,
+        DropdownMenuItem,
+        DropdownMenuSeparator,
+        DropdownMenuTrigger
+    } from '../../ui/dropdown-menu';
     import { favoriteRequest, miscRequest, userRequest, worldRequest } from '../../../api';
     import { Badge } from '../../ui/badge';
     import { database } from '../../../service/database.js';
diff --git a/src/components/ui/dropdown-menu/DropdownMenuContent.vue b/src/components/ui/dropdown-menu/DropdownMenuContent.vue
index ed283db9..92d713eb 100644
--- a/src/components/ui/dropdown-menu/DropdownMenuContent.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuContent.vue
@@ -51,7 +51,7 @@
             v-bind="{ ...$attrs, ...forwarded }"
             :class="
                 cn(
-                    'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+                    'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-10000 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
                     props.class
                 )
             ">
diff --git a/src/components/ui/dropdown-menu/DropdownMenuLabel.vue b/src/components/ui/dropdown-menu/DropdownMenuLabel.vue
index f38e8781..2c2a912e 100644
--- a/src/components/ui/dropdown-menu/DropdownMenuLabel.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuLabel.vue
@@ -19,7 +19,7 @@
         data-slot="dropdown-menu-label"
         :data-inset="inset ? '' : undefined"
         v-bind="forwardedProps"
-        :class="cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)">
+        :class="cn('px-2 py-1.5 text-sm font-medium data-inset:pl-8', props.class)">
         <slot />
     </DropdownMenuLabel>
 </template>
diff --git a/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue b/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
index bfe1e30b..82fc44fd 100644
--- a/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -26,7 +26,7 @@
         v-bind="forwarded"
         :class="
             cn(
-                'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+                'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
                 props.class
             )
         ">
diff --git a/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue b/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
index 7545a1f9..8610eced 100644
--- a/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -46,7 +46,7 @@
         v-bind="forwarded"
         :class="
             cn(
-                'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+                'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-10000 min-w-32 origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
                 props.class
             )
         ">
diff --git a/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
index 57129d09..fe1e2a2f 100644
--- a/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -23,7 +23,7 @@
         v-bind="forwardedProps"
         :class="
             cn(
-                'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
+                'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-inset:pl-8',
                 props.class
             )
         ">