diff --git a/src/components/dialogs/AvatarDialog/AvatarDialog.vue b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
index acd90936..66de6231 100644
--- a/src/components/dialogs/AvatarDialog/AvatarDialog.vue
+++ b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
@@ -1,523 +1,533 @@
 <template>
-    <el-dialog
-        :z-index="avatarDialogIndex"
-        class="x-dialog x-avatar-dialog"
-        v-model="avatarDialog.visible"
-        :show-close="false"
-        top="10vh"
-        width="940px">
-        <div v-loading="avatarDialog.loading">
-            <div style="display: flex">
-                <img
-                    :src="avatarDialog.ref.thumbnailImageUrl"
-                    class="x-link"
-                    @click="showFullscreenImageDialog(avatarDialog.ref.imageUrl)"
-                    style="flex: none; width: 160px; height: 120px; border-radius: 12px"
-                    loading="lazy" />
-                <div style="flex: 1; display: flex; align-items: center; margin-left: 15px">
-                    <div style="flex: 1">
-                        <div>
-                            <span
-                                class="dialog-title"
-                                style="margin-right: 5px; cursor: pointer"
-                                v-text="avatarDialog.ref.name"
-                                @click="copyToClipboard(avatarDialog.ref.name)"></span>
-                        </div>
-                        <div style="margin-top: 5px">
-                            <span
-                                class="x-link x-grey"
-                                style="font-family: monospace"
-                                @click="showUserDialog(avatarDialog.ref.authorId)"
-                                v-text="avatarDialog.ref.authorName"></span>
-                        </div>
-                        <div>
-                            <Badge
-                                v-if="avatarDialog.ref.releaseStatus === 'public'"
-                                variant="outline"
-                                style="margin-right: 5px; margin-top: 5px">
-                                {{ t('dialog.avatar.tags.public') }}
-                            </Badge>
-                            <Badge v-else variant="outline" style="margin-right: 5px; margin-top: 5px">
-                                {{ t('dialog.avatar.tags.private') }}
-                            </Badge>
-                            <TooltipWrapper v-if="avatarDialog.isPC" side="top" content="PC">
-                                <Badge
-                                    class="x-tag-platform-pc"
-                                    variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px"
-                                    ><Monitor class="h-4 w-4 x-tag-platform-pc" />
-                                    <span
-                                        v-if="avatarDialog.platformInfo.pc"
-                                        :class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']"
-                                        >{{ avatarDialog.platformInfo.pc.performanceRating }}</span
-                                    >
-                                    <span
-                                        v-if="avatarDialog.bundleSizes['standalonewindows']"
-                                        :class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']"
-                                        >{{ avatarDialog.bundleSizes['standalonewindows'].fileSize }}</span
-                                    >
-                                </Badge>
-                            </TooltipWrapper>
-                            <TooltipWrapper v-if="avatarDialog.isQuest" side="top" content="Android">
-                                <Badge
-                                    class="x-tag-platform-quest"
-                                    variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px"
-                                    ><Smartphone class="h-4 w-4 x-tag-platform-quest" />
-                                    <span
-                                        v-if="avatarDialog.platformInfo.android"
-                                        :class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']"
-                                        >{{ avatarDialog.platformInfo.android.performanceRating }}</span
-                                    >
-                                    <span
-                                        v-if="avatarDialog.bundleSizes['android']"
-                                        :class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']"
-                                        >{{ avatarDialog.bundleSizes['android'].fileSize }}</span
-                                    >
-                                </Badge>
-                            </TooltipWrapper>
-                            <TooltipWrapper v-if="avatarDialog.isIos" side="top" content="iOS">
-                                <Badge
-                                    class="x-tag-platform-ios"
-                                    variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px"
-                                    ><Apple class="h-4 w-4 x-tag-platform-ios" />
-                                    <span
-                                        v-if="avatarDialog.platformInfo.ios"
-                                        :class="['x-grey', 'x-tag-platform-ios', 'x-tag-border-left']"
-                                        >{{ avatarDialog.platformInfo.ios.performanceRating }}</span
-                                    >
-                                    <span
-                                        v-if="avatarDialog.bundleSizes['ios']"
-                                        :class="['x-grey', 'x-tag-platform-ios', 'x-tag-border-left']"
-                                        >{{ avatarDialog.bundleSizes['ios'].fileSize }}</span
-                                    >
-                                </Badge>
-                            </TooltipWrapper>
-                            <Badge
-                                v-if="avatarDialog.inCache"
-                                variant="outline"
-                                class="x-link"
-                                style="margin-right: 5px; margin-top: 5px"
-                                @click="openFolderGeneric(avatarDialog.cachePath)">
-                                <span v-text="avatarDialog.cacheSize"></span>
-                                &nbsp;{{ t('dialog.avatar.tags.cache') }}
-                            </Badge>
-                            <Badge
-                                v-if="avatarDialog.ref.styles?.primary || avatarDialog.ref.styles?.secondary"
-                                variant="outline"
-                                style="margin-right: 5px; margin-top: 5px"
-                                >Styles
-                                <span v-if="avatarDialog.ref.styles.primary" :class="['x-grey', 'x-tag-border-left']">{{
-                                    avatarDialog.ref.styles.primary
-                                }}</span>
-                                <span
-                                    v-if="avatarDialog.ref.styles.secondary"
-                                    :class="['x-grey', 'x-tag-border-left']"
-                                    >{{ avatarDialog.ref.styles.secondary }}</span
-                                >
-                            </Badge>
-                            <Badge
-                                v-if="avatarDialog.isQuestFallback"
-                                variant="outline"
-                                style="margin-right: 5px; margin-top: 5px">
-                                {{ t('dialog.avatar.tags.fallback') }}
-                            </Badge>
-                            <Badge
-                                v-if="avatarDialog.hasImposter"
-                                variant="outline"
-                                style="margin-right: 5px; margin-top: 5px"
-                                >{{ t('dialog.avatar.tags.impostor') }}
-                                <span v-if="avatarDialog.imposterVersion" :class="['x-grey', 'x-tag-border-left']"
-                                    >v{{ avatarDialog.imposterVersion }}</span
-                                >
-                            </Badge>
-                            <Badge
-                                v-if="avatarDialog.ref.unityPackageUrl"
-                                variant="outline"
-                                style="margin-right: 5px; margin-top: 5px">
-                                {{ t('dialog.avatar.tags.future_proofing') }}
-                            </Badge>
+    <Dialog v-model:open="avatarDialog.visible">
+        <DialogContent
+            class="x-dialog x-avatar-dialog sm:max-w-235 translate-y-0"
+            style="top: 10vh"
+            :show-close-button="false">
+            <div v-loading="avatarDialog.loading">
+                <div style="display: flex">
+                    <img
+                        :src="avatarDialog.ref.thumbnailImageUrl"
+                        class="x-link"
+                        @click="showFullscreenImageDialog(avatarDialog.ref.imageUrl)"
+                        style="flex: none; width: 160px; height: 120px; border-radius: 12px"
+                        loading="lazy" />
+                    <div style="flex: 1; display: flex; align-items: center; margin-left: 15px">
+                        <div style="flex: 1">
                             <div>
-                                <template v-for="tag in avatarDialog.ref.tags" :key="tag">
+                                <span
+                                    class="dialog-title"
+                                    style="margin-right: 5px; cursor: pointer"
+                                    v-text="avatarDialog.ref.name"
+                                    @click="copyToClipboard(avatarDialog.ref.name)"></span>
+                            </div>
+                            <div style="margin-top: 5px">
+                                <span
+                                    class="x-link x-grey"
+                                    style="font-family: monospace"
+                                    @click="showUserDialog(avatarDialog.ref.authorId)"
+                                    v-text="avatarDialog.ref.authorName"></span>
+                            </div>
+                            <div>
+                                <Badge
+                                    v-if="avatarDialog.ref.releaseStatus === 'public'"
+                                    variant="outline"
+                                    style="margin-right: 5px; margin-top: 5px">
+                                    {{ t('dialog.avatar.tags.public') }}
+                                </Badge>
+                                <Badge v-else variant="outline" style="margin-right: 5px; margin-top: 5px">
+                                    {{ t('dialog.avatar.tags.private') }}
+                                </Badge>
+                                <TooltipWrapper v-if="avatarDialog.isPC" side="top" content="PC">
                                     <Badge
-                                        v-if="tag.startsWith('content_')"
+                                        class="x-tag-platform-pc"
                                         variant="outline"
-                                        style="margin-right: 5px; margin-top: 5px">
-                                        <span v-if="tag === 'content_horror'">{{
-                                            t('dialog.avatar.tags.content_horror')
-                                        }}</span>
-                                        <span v-else-if="tag === 'content_gore'">{{
-                                            t('dialog.avatar.tags.content_gore')
-                                        }}</span>
-                                        <span v-else-if="tag === 'content_violence'">{{
-                                            t('dialog.avatar.tags.content_violence')
-                                        }}</span>
-                                        <span v-else-if="tag === 'content_adult'">{{
-                                            t('dialog.avatar.tags.content_adult')
-                                        }}</span>
-                                        <span v-else-if="tag === 'content_sex'">{{
-                                            t('dialog.avatar.tags.content_sex')
-                                        }}</span>
-                                        <span v-else>{{ tag.replace('content_', '') }}</span>
+                                        style="margin-right: 5px; margin-top: 5px"
+                                        ><Monitor class="h-4 w-4 x-tag-platform-pc" />
+                                        <span
+                                            v-if="avatarDialog.platformInfo.pc"
+                                            :class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']"
+                                            >{{ avatarDialog.platformInfo.pc.performanceRating }}</span
+                                        >
+                                        <span
+                                            v-if="avatarDialog.bundleSizes['standalonewindows']"
+                                            :class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']"
+                                            >{{ avatarDialog.bundleSizes['standalonewindows'].fileSize }}</span
+                                        >
                                     </Badge>
+                                </TooltipWrapper>
+                                <TooltipWrapper v-if="avatarDialog.isQuest" side="top" content="Android">
                                     <Badge
-                                        v-if="tag.startsWith('author_tag_')"
+                                        class="x-tag-platform-quest"
                                         variant="outline"
-                                        style="margin-right: 5px; margin-top: 5px">
-                                        <span>
-                                            {{ tag.replace('author_tag_', '') }}
-                                        </span>
+                                        style="margin-right: 5px; margin-top: 5px"
+                                        ><Smartphone class="h-4 w-4 x-tag-platform-quest" />
+                                        <span
+                                            v-if="avatarDialog.platformInfo.android"
+                                            :class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']"
+                                            >{{ avatarDialog.platformInfo.android.performanceRating }}</span
+                                        >
+                                        <span
+                                            v-if="avatarDialog.bundleSizes['android']"
+                                            :class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']"
+                                            >{{ avatarDialog.bundleSizes['android'].fileSize }}</span
+                                        >
                                     </Badge>
-                                </template>
+                                </TooltipWrapper>
+                                <TooltipWrapper v-if="avatarDialog.isIos" side="top" content="iOS">
+                                    <Badge
+                                        class="x-tag-platform-ios"
+                                        variant="outline"
+                                        style="margin-right: 5px; margin-top: 5px"
+                                        ><Apple class="h-4 w-4 x-tag-platform-ios" />
+                                        <span
+                                            v-if="avatarDialog.platformInfo.ios"
+                                            :class="['x-grey', 'x-tag-platform-ios', 'x-tag-border-left']"
+                                            >{{ avatarDialog.platformInfo.ios.performanceRating }}</span
+                                        >
+                                        <span
+                                            v-if="avatarDialog.bundleSizes['ios']"
+                                            :class="['x-grey', 'x-tag-platform-ios', 'x-tag-border-left']"
+                                            >{{ avatarDialog.bundleSizes['ios'].fileSize }}</span
+                                        >
+                                    </Badge>
+                                </TooltipWrapper>
+                                <Badge
+                                    v-if="avatarDialog.inCache"
+                                    variant="outline"
+                                    class="x-link"
+                                    style="margin-right: 5px; margin-top: 5px"
+                                    @click="openFolderGeneric(avatarDialog.cachePath)">
+                                    <span v-text="avatarDialog.cacheSize"></span>
+                                    &nbsp;{{ t('dialog.avatar.tags.cache') }}
+                                </Badge>
+                                <Badge
+                                    v-if="avatarDialog.ref.styles?.primary || avatarDialog.ref.styles?.secondary"
+                                    variant="outline"
+                                    style="margin-right: 5px; margin-top: 5px"
+                                    >Styles
+                                    <span
+                                        v-if="avatarDialog.ref.styles.primary"
+                                        :class="['x-grey', 'x-tag-border-left']"
+                                        >{{ avatarDialog.ref.styles.primary }}</span
+                                    >
+                                    <span
+                                        v-if="avatarDialog.ref.styles.secondary"
+                                        :class="['x-grey', 'x-tag-border-left']"
+                                        >{{ avatarDialog.ref.styles.secondary }}</span
+                                    >
+                                </Badge>
+                                <Badge
+                                    v-if="avatarDialog.isQuestFallback"
+                                    variant="outline"
+                                    style="margin-right: 5px; margin-top: 5px">
+                                    {{ t('dialog.avatar.tags.fallback') }}
+                                </Badge>
+                                <Badge
+                                    v-if="avatarDialog.hasImposter"
+                                    variant="outline"
+                                    style="margin-right: 5px; margin-top: 5px"
+                                    >{{ t('dialog.avatar.tags.impostor') }}
+                                    <span v-if="avatarDialog.imposterVersion" :class="['x-grey', 'x-tag-border-left']"
+                                        >v{{ avatarDialog.imposterVersion }}</span
+                                    >
+                                </Badge>
+                                <Badge
+                                    v-if="avatarDialog.ref.unityPackageUrl"
+                                    variant="outline"
+                                    style="margin-right: 5px; margin-top: 5px">
+                                    {{ t('dialog.avatar.tags.future_proofing') }}
+                                </Badge>
+                                <div>
+                                    <template v-for="tag in avatarDialog.ref.tags" :key="tag">
+                                        <Badge
+                                            v-if="tag.startsWith('content_')"
+                                            variant="outline"
+                                            style="margin-right: 5px; margin-top: 5px">
+                                            <span v-if="tag === 'content_horror'">{{
+                                                t('dialog.avatar.tags.content_horror')
+                                            }}</span>
+                                            <span v-else-if="tag === 'content_gore'">{{
+                                                t('dialog.avatar.tags.content_gore')
+                                            }}</span>
+                                            <span v-else-if="tag === 'content_violence'">{{
+                                                t('dialog.avatar.tags.content_violence')
+                                            }}</span>
+                                            <span v-else-if="tag === 'content_adult'">{{
+                                                t('dialog.avatar.tags.content_adult')
+                                            }}</span>
+                                            <span v-else-if="tag === 'content_sex'">{{
+                                                t('dialog.avatar.tags.content_sex')
+                                            }}</span>
+                                            <span v-else>{{ tag.replace('content_', '') }}</span>
+                                        </Badge>
+                                        <Badge
+                                            v-if="tag.startsWith('author_tag_')"
+                                            variant="outline"
+                                            style="margin-right: 5px; margin-top: 5px">
+                                            <span>
+                                                {{ tag.replace('author_tag_', '') }}
+                                            </span>
+                                        </Badge>
+                                    </template>
+                                </div>
+                            </div>
+                            <div style="margin-top: 5px">
+                                <span
+                                    v-show="avatarDialog.ref.name !== avatarDialog.ref.description"
+                                    style="font-size: 12px"
+                                    v-text="avatarDialog.ref.description"></span>
                             </div>
                         </div>
-                        <div style="margin-top: 5px">
-                            <span
-                                v-show="avatarDialog.ref.name !== avatarDialog.ref.description"
-                                style="font-size: 12px"
-                                v-text="avatarDialog.ref.description"></span>
-                        </div>
-                    </div>
-                    <div class="flex items-center">
-                        <TooltipWrapper
-                            v-if="avatarDialog.inCache"
-                            side="top"
-                            :content="t('dialog.avatar.actions.delete_cache_tooltip')">
-                            <Button
-                                class="rounded-full mr-2"
-                                size="icon-lg"
-                                variant="outline"
-                                :disabled="isGameRunning && avatarDialog.cacheLocked"
-                                @click="deleteVRChatCache(avatarDialog.ref)"
-                                ><Trash2
-                            /></Button>
-                        </TooltipWrapper>
+                        <div class="flex items-center">
+                            <TooltipWrapper
+                                v-if="avatarDialog.inCache"
+                                side="top"
+                                :content="t('dialog.avatar.actions.delete_cache_tooltip')">
+                                <Button
+                                    class="rounded-full mr-2"
+                                    size="icon-lg"
+                                    variant="outline"
+                                    :disabled="isGameRunning && avatarDialog.cacheLocked"
+                                    @click="deleteVRChatCache(avatarDialog.ref)"
+                                    ><Trash2
+                                /></Button>
+                            </TooltipWrapper>
 
-                        <TooltipWrapper
-                            v-if="avatarDialog.isFavorite"
-                            side="top"
-                            :content="t('dialog.avatar.actions.favorite_tooltip')">
-                            <Button class="rounded-full" size="icon-lg" @click="avatarDialogCommand('Add Favorite')"
-                                ><Star
-                            /></Button>
-                        </TooltipWrapper>
-                        <TooltipWrapper v-else side="top" :content="t('dialog.avatar.actions.favorite_tooltip')">
-                            <Button
-                                class="rounded-full"
-                                size="icon-lg"
-                                variant="outline"
-                                @click="avatarDialogCommand('Add Favorite')"
-                                ><Star
-                            /></Button>
-                        </TooltipWrapper>
+                            <TooltipWrapper
+                                v-if="avatarDialog.isFavorite"
+                                side="top"
+                                :content="t('dialog.avatar.actions.favorite_tooltip')">
+                                <Button class="rounded-full" size="icon-lg" @click="avatarDialogCommand('Add Favorite')"
+                                    ><Star
+                                /></Button>
+                            </TooltipWrapper>
+                            <TooltipWrapper v-else side="top" :content="t('dialog.avatar.actions.favorite_tooltip')">
+                                <Button
+                                    class="rounded-full"
+                                    size="icon-lg"
+                                    variant="outline"
+                                    @click="avatarDialogCommand('Add Favorite')"
+                                    ><Star
+                                /></Button>
+                            </TooltipWrapper>
 
-                        <TooltipWrapper side="top" :content="t('dialog.avatar.actions.select')">
-                            <Button
-                                class="rounded-full ml-2"
-                                size="icon-lg"
-                                variant="outline"
-                                :disabled="currentUser.currentAvatar === avatarDialog.id"
-                                @click="selectAvatarWithoutConfirmation(avatarDialog.id)">
-                                <CheckCircle
-                            /></Button>
-                        </TooltipWrapper>
-                        <DropdownMenu>
-                            <DropdownMenuTrigger as-child>
+                            <TooltipWrapper side="top" :content="t('dialog.avatar.actions.select')">
                                 <Button
                                     class="rounded-full ml-2"
-                                    :variant="avatarDialog.isBlocked ? 'destructive' : 'outline'"
-                                    size="icon-lg">
-                                    <Ellipsis />
-                                </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent>
-                                <DropdownMenuItem @click="avatarDialogCommand('RefreshCw')">
-                                    <RefreshCw class="size-4" />
-                                    {{ t('dialog.avatar.actions.refresh') }}
-                                </DropdownMenuItem>
-                                <DropdownMenuItem @click="avatarDialogCommand('Share2')">
-                                    <Share2 class="size-4" />
-                                    {{ t('dialog.avatar.actions.share') }}
-                                </DropdownMenuItem>
-                                <DropdownMenuSeparator />
-                                <DropdownMenuItem
-                                    v-if="avatarDialog.isBlocked"
-                                    variant="destructive"
-                                    @click="avatarDialogCommand('Unblock Avatar')">
-                                    <CheckCircle class="size-4" />
-                                    {{ t('dialog.avatar.actions.unblock') }}
-                                </DropdownMenuItem>
-                                <DropdownMenuItem v-else @click="avatarDialogCommand('Block Avatar')">
-                                    <XCircle 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')">
-                                        <Pencil class="size-4" />
-                                        {{ t('dialog.avatar.actions.rename') }}
-                                    </DropdownMenuItem>
-                                    <DropdownMenuItem @click="avatarDialogCommand('Change Description')">
-                                        <Pencil class="size-4" />
-                                        {{ t('dialog.avatar.actions.change_description') }}
-                                    </DropdownMenuItem>
-                                    <DropdownMenuItem @click="avatarDialogCommand('Change Content Tags')">
-                                        <Pencil class="size-4" />
-                                        {{ t('dialog.avatar.actions.change_content_tags') }}
-                                    </DropdownMenuItem>
-                                    <DropdownMenuItem @click="avatarDialogCommand('Change Styles and Author Tags')">
-                                        <Pencil class="size-4" />
-                                        {{ t('dialog.avatar.actions.change_styles_author_tags') }}
-                                    </DropdownMenuItem>
-                                    <DropdownMenuItem @click="avatarDialogCommand('Change Image')">
-                                        <Image 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')">
+                                    size="icon-lg"
+                                    variant="outline"
+                                    :disabled="currentUser.currentAvatar === avatarDialog.id"
+                                    @click="selectAvatarWithoutConfirmation(avatarDialog.id)">
+                                    <CheckCircle
+                                /></Button>
+                            </TooltipWrapper>
+                            <DropdownMenu>
+                                <DropdownMenuTrigger as-child>
+                                    <Button
+                                        class="rounded-full ml-2"
+                                        :variant="avatarDialog.isBlocked ? 'destructive' : 'outline'"
+                                        size="icon-lg">
+                                        <Ellipsis />
+                                    </Button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent>
+                                    <DropdownMenuItem @click="avatarDialogCommand('RefreshCw')">
                                         <RefreshCw class="size-4" />
-                                        {{ t('dialog.avatar.actions.regenerate_impostor') }}
+                                        {{ t('dialog.avatar.actions.refresh') }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem @click="avatarDialogCommand('Share2')">
+                                        <Share2 class="size-4" />
+                                        {{ t('dialog.avatar.actions.share') }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuSeparator />
+                                    <DropdownMenuItem
+                                        v-if="avatarDialog.isBlocked"
+                                        variant="destructive"
+                                        @click="avatarDialogCommand('Unblock Avatar')">
+                                        <CheckCircle class="size-4" />
+                                        {{ t('dialog.avatar.actions.unblock') }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem v-else @click="avatarDialogCommand('Block Avatar')">
+                                        <XCircle class="size-4" />
+                                        {{ t('dialog.avatar.actions.block') }}
                                     </DropdownMenuItem>
                                     <DropdownMenuItem
-                                        v-if="avatarDialog.hasImposter"
-                                        variant="destructive"
-                                        @click="avatarDialogCommand('Trash2 Imposter')">
-                                        <Trash2 class="size-4" />
-                                        {{ t('dialog.avatar.actions.delete_impostor') }}
+                                        v-if="/quest/.test(avatarDialog.ref.tags)"
+                                        @click="avatarDialogCommand('Select Fallback Avatar')">
+                                        <Check class="size-4" />
+                                        {{ t('dialog.avatar.actions.select_fallback') }}
                                     </DropdownMenuItem>
-                                    <DropdownMenuItem v-else @click="avatarDialogCommand('Create Imposter')">
-                                        <User class="size-4" />
-                                        {{ t('dialog.avatar.actions.create_impostor') }}
-                                    </DropdownMenuItem>
-                                    <DropdownMenuItem variant="destructive" @click="avatarDialogCommand('Trash2')">
-                                        <Trash2 class="size-4" />
-                                        {{ t('dialog.avatar.actions.delete') }}
-                                    </DropdownMenuItem>
-                                </template>
-                            </DropdownMenuContent>
-                        </DropdownMenu>
+                                    <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')">
+                                            <Pencil class="size-4" />
+                                            {{ t('dialog.avatar.actions.rename') }}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem @click="avatarDialogCommand('Change Description')">
+                                            <Pencil class="size-4" />
+                                            {{ t('dialog.avatar.actions.change_description') }}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem @click="avatarDialogCommand('Change Content Tags')">
+                                            <Pencil class="size-4" />
+                                            {{ t('dialog.avatar.actions.change_content_tags') }}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem @click="avatarDialogCommand('Change Styles and Author Tags')">
+                                            <Pencil class="size-4" />
+                                            {{ t('dialog.avatar.actions.change_styles_author_tags') }}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem @click="avatarDialogCommand('Change Image')">
+                                            <Image 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')">
+                                            <RefreshCw class="size-4" />
+                                            {{ t('dialog.avatar.actions.regenerate_impostor') }}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem
+                                            v-if="avatarDialog.hasImposter"
+                                            variant="destructive"
+                                            @click="avatarDialogCommand('Trash2 Imposter')">
+                                            <Trash2 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('Trash2')">
+                                            <Trash2 class="size-4" />
+                                            {{ t('dialog.avatar.actions.delete') }}
+                                        </DropdownMenuItem>
+                                    </template>
+                                </DropdownMenuContent>
+                            </DropdownMenu>
+                        </div>
                     </div>
                 </div>
-            </div>
-            <TabsUnderline
-                v-model="avatarDialogLastActiveTab"
-                :items="avatarDialogTabs"
-                :unmount-on-hide="false"
-                @update:modelValue="avatarDialogTabClick">
-                <template #Info>
-                    <div class="x-friend-list" style="max-height: unset">
-                        <div
-                            v-if="avatarDialog.galleryImages.length || avatarDialog.ref.authorId === currentUser.id"
-                            style="width: 100%">
-                            <span class="name">{{ t('dialog.avatar.info.gallery') }}</span>
-                            <input
-                                id="AvatarGalleryUploadButton"
-                                type="file"
-                                accept="image/*"
-                                style="display: none"
-                                @change="onFileChangeAvatarGallery" />
-                            <Button
-                                v-if="avatarDialog.ref.authorId === currentUser.id"
-                                variant="outline"
-                                size="sm"
-                                :disabled="avatarDialog.galleryLoading"
-                                class="ml-1"
-                                @click="displayAvatarGalleryUpload">
-                                <Upload />
-                                {{ t('dialog.screenshot_metadata.upload') }}
-                            </Button>
-                            <div class="mt-2 w-[80%] ml-20">
-                                <Carousel v-if="avatarDialog.galleryImages.length" class="w-full">
-                                    <CarouselContent class="h-50">
-                                        <CarouselItem v-for="imageUrl in avatarDialog.galleryImages" :key="imageUrl">
-                                            <div class="relative h-50 w-full">
-                                                <img
-                                                    :src="imageUrl"
-                                                    style="width: 100%; height: 100%; object-fit: contain"
-                                                    @click="showFullscreenImageDialog(imageUrl)"
-                                                    loading="lazy" />
-                                            </div>
-                                        </CarouselItem>
-                                    </CarouselContent>
-                                    <CarouselPrevious />
-                                    <CarouselNext />
-                                </Carousel>
-                            </div>
-                        </div>
-                        <div v-if="avatarDialog.ref.publishedListings?.length">
-                            <span class="name">{{ t('dialog.avatar.info.listings') }}</span>
+                <TabsUnderline
+                    v-model="avatarDialogLastActiveTab"
+                    :items="avatarDialogTabs"
+                    :unmount-on-hide="false"
+                    @update:modelValue="avatarDialogTabClick">
+                    <template #Info>
+                        <div class="x-friend-list" style="max-height: unset">
                             <div
-                                v-for="listing in avatarDialog.ref.publishedListings"
-                                :key="listing.id"
-                                class="x-friend-item"
-                                style="width: 100%; cursor: default">
-                                <div class="avatar">
-                                    <img
-                                        :src="getImageUrlFromImageId(listing.imageId)"
-                                        @click="showFullscreenImageDialog(getImageUrlFromImageId(listing.imageId))"
-                                        loading="lazy" />
+                                v-if="avatarDialog.galleryImages.length || avatarDialog.ref.authorId === currentUser.id"
+                                style="width: 100%">
+                                <span class="name">{{ t('dialog.avatar.info.gallery') }}</span>
+                                <input
+                                    id="AvatarGalleryUploadButton"
+                                    type="file"
+                                    accept="image/*"
+                                    style="display: none"
+                                    @change="onFileChangeAvatarGallery" />
+                                <Button
+                                    v-if="avatarDialog.ref.authorId === currentUser.id"
+                                    variant="outline"
+                                    size="sm"
+                                    :disabled="avatarDialog.galleryLoading"
+                                    class="ml-1"
+                                    @click="displayAvatarGalleryUpload">
+                                    <Upload />
+                                    {{ t('dialog.screenshot_metadata.upload') }}
+                                </Button>
+                                <div class="mt-2 w-[80%] ml-20">
+                                    <Carousel v-if="avatarDialog.galleryImages.length" class="w-full">
+                                        <CarouselContent class="h-50">
+                                            <CarouselItem
+                                                v-for="imageUrl in avatarDialog.galleryImages"
+                                                :key="imageUrl">
+                                                <div class="relative h-50 w-full">
+                                                    <img
+                                                        :src="imageUrl"
+                                                        style="width: 100%; height: 100%; object-fit: contain"
+                                                        @click="showFullscreenImageDialog(imageUrl)"
+                                                        loading="lazy" />
+                                                </div>
+                                            </CarouselItem>
+                                        </CarouselContent>
+                                        <CarouselPrevious />
+                                        <CarouselNext />
+                                    </Carousel>
                                 </div>
+                            </div>
+                            <div v-if="avatarDialog.ref.publishedListings?.length">
+                                <span class="name">{{ t('dialog.avatar.info.listings') }}</span>
+                                <div
+                                    v-for="listing in avatarDialog.ref.publishedListings"
+                                    :key="listing.id"
+                                    class="x-friend-item"
+                                    style="width: 100%; cursor: default">
+                                    <div class="avatar">
+                                        <img
+                                            :src="getImageUrlFromImageId(listing.imageId)"
+                                            @click="showFullscreenImageDialog(getImageUrlFromImageId(listing.imageId))"
+                                            loading="lazy" />
+                                    </div>
+                                    <div class="detail">
+                                        <span class="name">{{ listing.displayName }}</span>
+                                        <span class="extra" style="text-decoration: underline; font-style: italic"
+                                            >${{ commaNumber(listing.priceTokens) }}V</span
+                                        >
+                                        <span
+                                            class="extra"
+                                            style="text-overflow: ellipsis; text-wrap: auto"
+                                            v-text="listing.description"></span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="x-friend-item" style="width: 100%; cursor: default">
                                 <div class="detail">
-                                    <span class="name">{{ listing.displayName }}</span>
-                                    <span class="extra" style="text-decoration: underline; font-style: italic"
-                                        >${{ commaNumber(listing.priceTokens) }}V</span
-                                    >
-                                    <span
+                                    <span class="name" style="margin-bottom: 5px">{{
+                                        t('dialog.avatar.info.memo')
+                                    }}</span>
+                                    <InputGroupTextareaField
+                                        v-model="memo"
                                         class="extra"
-                                        style="text-overflow: ellipsis; text-wrap: auto"
-                                        v-text="listing.description"></span>
+                                        :rows="2"
+                                        :placeholder="t('dialog.avatar.info.memo_placeholder')"
+                                        input-class="resize-none min-h-0"
+                                        @change="onAvatarMemoChange" />
+                                </div>
+                            </div>
+                            <div class="x-friend-item" style="width: 100%; cursor: default">
+                                <div class="detail">
+                                    <span class="name">{{ t('dialog.avatar.info.id') }}</span>
+                                    <span class="extra"
+                                        >{{ avatarDialog.id
+                                        }}<TooltipWrapper side="top" :content="t('dialog.avatar.info.id_tooltip')">
+                                            <DropdownMenu>
+                                                <DropdownMenuTrigger as-child>
+                                                    <Button
+                                                        class="rounded-full text-xs"
+                                                        size="icon-sm"
+                                                        variant="outline"
+                                                        @click.stop
+                                                        ><Copy class="h-4 w-4" />
+                                                    </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>
+                            </div>
+                            <div class="x-friend-item" style="cursor: default">
+                                <div class="detail">
+                                    <span class="name">{{ t('dialog.avatar.info.created_at') }}</span>
+                                    <span class="extra">{{
+                                        formatDateFilter(avatarDialog.ref.created_at, 'long')
+                                    }}</span>
+                                </div>
+                            </div>
+                            <div class="x-friend-item" style="cursor: default">
+                                <div class="detail">
+                                    <span class="name">{{ t('dialog.avatar.info.last_updated') }}</span>
+                                    <span v-if="avatarDialog.lastUpdated" class="extra">{{
+                                        formatDateFilter(avatarDialog.lastUpdated, 'long')
+                                    }}</span>
+                                    <span v-else class="extra">{{
+                                        formatDateFilter(avatarDialog.ref.updated_at, 'long')
+                                    }}</span>
+                                </div>
+                            </div>
+                            <div class="x-friend-item" style="cursor: default">
+                                <div class="detail">
+                                    <span class="name">{{ t('dialog.avatar.info.version') }}</span>
+                                    <span
+                                        v-if="avatarDialog.ref.version !== 0"
+                                        class="extra"
+                                        v-text="avatarDialog.ref.version"></span>
+                                    <span v-else class="extra">-</span>
+                                </div>
+                            </div>
+                            <div class="x-friend-item" style="cursor: default">
+                                <div class="detail">
+                                    <span class="name"
+                                        >{{ t('dialog.avatar.info.time_spent')
+                                        }}<TooltipWrapper side="top" :content="t('dialog.world.info.accuracy_notice')">
+                                            <AlertTriangle style="margin-left: 3px" /> </TooltipWrapper
+                                    ></span>
+
+                                    <span v-if="timeSpent === 0" class="extra">-</span>
+                                    <span v-else class="extra">{{ timeToText(timeSpent) }}</span>
+                                </div>
+                            </div>
+                            <div class="x-friend-item" style="width: 100%; cursor: default">
+                                <div class="detail">
+                                    <span class="name">{{ t('dialog.avatar.info.platform') }}</span>
+                                    <span
+                                        v-if="avatarDialogPlatform"
+                                        class="extra"
+                                        v-text="avatarDialogPlatform"></span>
+                                    <span v-else class="extra">-</span>
                                 </div>
                             </div>
                         </div>
-                        <div class="x-friend-item" style="width: 100%; cursor: default">
-                            <div class="detail">
-                                <span class="name" style="margin-bottom: 5px">{{ t('dialog.avatar.info.memo') }}</span>
-                                <InputGroupTextareaField
-                                    v-model="memo"
-                                    class="extra"
-                                    :rows="2"
-                                    :placeholder="t('dialog.avatar.info.memo_placeholder')"
-                                    input-class="resize-none min-h-0"
-                                    @change="onAvatarMemoChange" />
-                            </div>
-                        </div>
-                        <div class="x-friend-item" style="width: 100%; cursor: default">
-                            <div class="detail">
-                                <span class="name">{{ t('dialog.avatar.info.id') }}</span>
-                                <span class="extra"
-                                    >{{ avatarDialog.id
-                                    }}<TooltipWrapper side="top" :content="t('dialog.avatar.info.id_tooltip')">
-                                        <DropdownMenu>
-                                            <DropdownMenuTrigger as-child>
-                                                <Button
-                                                    class="rounded-full text-xs"
-                                                    size="icon-sm"
-                                                    variant="outline"
-                                                    @click.stop
-                                                    ><Copy class="h-4 w-4" />
-                                                </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>
-                        </div>
-                        <div class="x-friend-item" style="cursor: default">
-                            <div class="detail">
-                                <span class="name">{{ t('dialog.avatar.info.created_at') }}</span>
-                                <span class="extra">{{ formatDateFilter(avatarDialog.ref.created_at, 'long') }}</span>
-                            </div>
-                        </div>
-                        <div class="x-friend-item" style="cursor: default">
-                            <div class="detail">
-                                <span class="name">{{ t('dialog.avatar.info.last_updated') }}</span>
-                                <span v-if="avatarDialog.lastUpdated" class="extra">{{
-                                    formatDateFilter(avatarDialog.lastUpdated, 'long')
-                                }}</span>
-                                <span v-else class="extra">{{
-                                    formatDateFilter(avatarDialog.ref.updated_at, 'long')
-                                }}</span>
-                            </div>
-                        </div>
-                        <div class="x-friend-item" style="cursor: default">
-                            <div class="detail">
-                                <span class="name">{{ t('dialog.avatar.info.version') }}</span>
-                                <span
-                                    v-if="avatarDialog.ref.version !== 0"
-                                    class="extra"
-                                    v-text="avatarDialog.ref.version"></span>
-                                <span v-else class="extra">-</span>
-                            </div>
-                        </div>
-                        <div class="x-friend-item" style="cursor: default">
-                            <div class="detail">
-                                <span class="name"
-                                    >{{ t('dialog.avatar.info.time_spent')
-                                    }}<TooltipWrapper side="top" :content="t('dialog.world.info.accuracy_notice')">
-                                        <AlertTriangle style="margin-left: 3px" /> </TooltipWrapper
-                                ></span>
-
-                                <span v-if="timeSpent === 0" class="extra">-</span>
-                                <span v-else class="extra">{{ timeToText(timeSpent) }}</span>
-                            </div>
-                        </div>
-                        <div class="x-friend-item" style="width: 100%; cursor: default">
-                            <div class="detail">
-                                <span class="name">{{ t('dialog.avatar.info.platform') }}</span>
-                                <span v-if="avatarDialogPlatform" class="extra" v-text="avatarDialogPlatform"></span>
-                                <span v-else class="extra">-</span>
-                            </div>
-                        </div>
-                    </div>
+                    </template>
+                    <template #JSON>
+                        <Button
+                            class="rounded-full h-6 w-6 mr-2"
+                            size="icon-sm"
+                            variant="outline"
+                            @click="refreshAvatarDialogTreeData()">
+                            <RefreshCcw />
+                        </Button>
+                        <Button
+                            class="rounded-full h-6 w-6"
+                            size="icon-sm"
+                            variant="outline"
+                            @click="downloadAndSaveJson(avatarDialog.id, avatarDialog.ref)">
+                            <Download />
+                        </Button>
+                        <vue-json-pretty :data="treeData" :deep="2" :theme="isDarkMode ? 'dark' : 'light'" show-icon />
+                        <br />
+                        <vue-json-pretty
+                            v-if="avatarDialog.fileAnalysis.length > 0"
+                            :data="avatarDialog.fileAnalysis"
+                            :deep="2"
+                            :theme="isDarkMode ? 'dark' : 'light'"
+                            show-icon />
+                    </template>
+                </TabsUnderline>
+                <template v-if="avatarDialog.visible">
+                    <SetAvatarTagsDialog v-model:setAvatarTagsDialog="setAvatarTagsDialog" />
+                    <SetAvatarStylesDialog v-model:setAvatarStylesDialog="setAvatarStylesDialog" />
+                    <ChangeAvatarImageDialog
+                        v-model:changeAvatarImageDialogVisible="changeAvatarImageDialogVisible"
+                        v-model:previousImageUrl="previousImageUrl" />
                 </template>
-                <template #JSON>
-                    <Button
-                        class="rounded-full h-6 w-6 mr-2"
-                        size="icon-sm"
-                        variant="outline"
-                        @click="refreshAvatarDialogTreeData()">
-                        <RefreshCcw />
-                    </Button>
-                    <Button
-                        class="rounded-full h-6 w-6"
-                        size="icon-sm"
-                        variant="outline"
-                        @click="downloadAndSaveJson(avatarDialog.id, avatarDialog.ref)">
-                        <Download />
-                    </Button>
-                    <vue-json-pretty :data="treeData" :deep="2" :theme="isDarkMode ? 'dark' : 'light'" show-icon />
-                    <br />
-                    <vue-json-pretty
-                        v-if="avatarDialog.fileAnalysis.length > 0"
-                        :data="avatarDialog.fileAnalysis"
-                        :deep="2"
-                        :theme="isDarkMode ? 'dark' : 'light'"
-                        show-icon />
-                </template>
-            </TabsUnderline>
-        </div>
-        <template v-if="avatarDialog.visible">
-            <SetAvatarTagsDialog v-model:setAvatarTagsDialog="setAvatarTagsDialog" />
-            <SetAvatarStylesDialog v-model:setAvatarStylesDialog="setAvatarStylesDialog" />
-            <ChangeAvatarImageDialog
-                v-model:changeAvatarImageDialogVisible="changeAvatarImageDialogVisible"
-                v-model:previousImageUrl="previousImageUrl" />
-        </template>
-    </el-dialog>
+            </div>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
@@ -544,6 +554,7 @@
     } from 'lucide-vue-next';
     import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/components/ui/carousel';
     import { computed, defineAsyncComponent, nextTick, ref, watch } from 'vue';
+    import { Dialog, DialogContent } from '@/components/ui/dialog';
     import { Button } from '@/components/ui/button';
     import { InputGroupTextareaField } from '@/components/ui/input-group';
     import { TabsUnderline } from '@/components/ui/tabs';
@@ -557,9 +568,7 @@
         commaNumber,
         copyToClipboard,
         downloadAndSaveJson,
-        extractFileId,
         formatDateFilter,
-        moveArrayItem,
         openExternalLink,
         openFolderGeneric,
         replaceVrcPackageUrl,
@@ -581,11 +590,11 @@
         DropdownMenuSeparator,
         DropdownMenuTrigger
     } from '../../ui/dropdown-menu';
-    import { avatarModerationRequest, avatarRequest, favoriteRequest, miscRequest } from '../../../api';
-    import { formatJsonVars, getNextDialogIndex } from '../../../shared/utils/base/ui';
+    import { avatarModerationRequest, avatarRequest, favoriteRequest } from '../../../api';
     import { AppDebug } from '../../../service/appConfig.js';
     import { Badge } from '../../ui/badge';
     import { database } from '../../../service/database';
+    import { formatJsonVars } from '../../../shared/utils/base/ui';
     import { handleImageUploadInput } from '../../../shared/utils/imageUpload';
 
     const ChangeAvatarImageDialog = defineAsyncComponent(() => import('./ChangeAvatarImageDialog.vue'));
@@ -612,7 +621,6 @@
         { value: 'JSON', label: t('dialog.avatar.json.header') }
     ]);
 
-    const avatarDialogIndex = ref(2000);
     const avatarDialogLastActiveTab = ref('Info');
     const changeAvatarImageDialogVisible = ref(false);
     const previousImageUrl = ref('');
@@ -677,9 +685,6 @@
         () => avatarDialog.value.loading,
         () => {
             if (avatarDialog.value.visible) {
-                nextTick(() => {
-                    avatarDialogIndex.value = getNextDialogIndex();
-                });
                 handleDialogOpen();
                 !avatarDialog.value.loading && loadLastActiveTab();
             }
@@ -1126,44 +1131,4 @@
             resetLoading();
         }
     }
-
-    function reorderAvatarGalleryImage(imageUrl, direction) {
-        const fileId = extractFileId(imageUrl);
-        let fileIds = [];
-        avatarDialog.value.ref.gallery.forEach((item) => {
-            fileIds.push(extractFileId(item.id));
-        });
-        const index = fileIds.indexOf(fileId);
-        if (index === -1) {
-            toast.error(t('message.avatar_gallery.not_found'));
-            return;
-        }
-        if (direction === -1 && index === 0) {
-            toast.warning(t('message.avatar_gallery.already_first'));
-            return;
-        }
-        if (direction === 1 && index === fileIds.length - 1) {
-            toast.warning(t('message.avatar_gallery.already_last'));
-            return;
-        }
-        if (direction === -1) {
-            moveArrayItem(fileIds, index, index - 1);
-        } else {
-            moveArrayItem(fileIds, index, index + 1);
-        }
-        avatarRequest.setAvatarGalleryOrder(fileIds).then(async (args) => {
-            toast.success(t('message.avatar_gallery.reordered'));
-            avatarDialog.value.galleryImages = await getAvatarGallery(avatarDialog.value.id);
-            return args;
-        });
-    }
-
-    function deleteAvatarGalleryImage(imageUrl) {
-        const fileId = extractFileId(imageUrl);
-        miscRequest.deleteFile(fileId).then((args) => {
-            toast.success(t('message.avatar_gallery.deleted'));
-            getAvatarGallery(avatarDialog.value.id);
-            return args;
-        });
-    }
 </script>
diff --git a/src/components/dialogs/AvatarDialog/ChangeAvatarImageDialog.vue b/src/components/dialogs/AvatarDialog/ChangeAvatarImageDialog.vue
index 1947de42..544ef16f 100644
--- a/src/components/dialogs/AvatarDialog/ChangeAvatarImageDialog.vue
+++ b/src/components/dialogs/AvatarDialog/ChangeAvatarImageDialog.vue
@@ -1,12 +1,15 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        :model-value="changeAvatarImageDialogVisible"
-        :title="t('dialog.change_content_image.avatar')"
-        width="850px"
-        append-to-body
-        @close="closeDialog">
-        <div>
+    <Dialog
+        :open="changeAvatarImageDialogVisible"
+        @update:open="(open) => {
+            if (!open) closeDialog();
+        }">
+        <DialogContent class="x-dialog sm:max-w-212.5">
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.change_content_image.avatar') }}</DialogTitle>
+            </DialogHeader>
+
+            <div>
             <input
                 id="AvatarImageUploadButton"
                 type="file"
@@ -27,12 +30,14 @@
             <div class="x-change-image-item">
                 <img :src="previousImageUrl" class="img-size" loading="lazy" />
             </div>
-        </div>
-    </el-dialog>
+            </div>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
     import { Button } from '@/components/ui/button';
+    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { Upload } from 'lucide-vue-next';
     import { ref } from 'vue';
     import { storeToRefs } from 'pinia';
diff --git a/src/components/dialogs/AvatarDialog/SetAvatarStylesDialog.vue b/src/components/dialogs/AvatarDialog/SetAvatarStylesDialog.vue
index 6f4f17fc..1b09f118 100644
--- a/src/components/dialogs/AvatarDialog/SetAvatarStylesDialog.vue
+++ b/src/components/dialogs/AvatarDialog/SetAvatarStylesDialog.vue
@@ -1,14 +1,16 @@
 <template>
-    <el-dialog
-        ref="setAvatarStylesDialog"
-        class="x-dialog"
-        :model-value="setAvatarStylesDialog.visible"
-        :title="t('dialog.set_avatar_styles.header')"
-        width="400px"
-        append-to-body
-        @close="closeSetAvatarStylesDialog">
-        <template v-if="setAvatarStylesDialog.visible">
-            <div>
+    <Dialog
+        :open="setAvatarStylesDialog.visible"
+        @update:open="(open) => {
+            if (!open) closeSetAvatarStylesDialog();
+        }">
+        <DialogContent class="x-dialog sm:max-w-100">
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.set_avatar_styles.header') }}</DialogTitle>
+            </DialogHeader>
+
+            <template v-if="setAvatarStylesDialog.visible">
+                <div>
                 <span>{{ t('dialog.set_avatar_styles.primary_style') }}</span>
                 <br />
                 <Select
@@ -64,21 +66,23 @@
                 style="margin-top: 10px"
                 input-class="resize-none"
                 @update:modelValue="(v) => updateDialog({ authorTags: v })" />
-        </template>
+            </template>
 
-        <template #footer>
-            <Button variant="secondary" class="mr-2" @click="closeSetAvatarStylesDialog">{{
-                t('dialog.set_avatar_styles.cancel')
-            }}</Button>
-            <Button @click="saveSetAvatarStylesDialog">
-                {{ t('dialog.set_avatar_styles.save') }}
-            </Button>
-        </template>
-    </el-dialog>
+            <DialogFooter>
+                <Button variant="secondary" class="mr-2" @click="closeSetAvatarStylesDialog">{{
+                    t('dialog.set_avatar_styles.cancel')
+                }}</Button>
+                <Button @click="saveSetAvatarStylesDialog">
+                    {{ t('dialog.set_avatar_styles.save') }}
+                </Button>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
     import { Button } from '@/components/ui/button';
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { InputGroupTextareaField } from '@/components/ui/input-group';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
diff --git a/src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue b/src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue
index 6191b2bc..bb8f6732 100644
--- a/src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue
+++ b/src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue
@@ -1,102 +1,115 @@
 <template>
-    <el-dialog
-        ref="setAvatarTagsDialog"
-        class="x-dialog"
-        :model-value="setAvatarTagsDialog.visible"
-        @close="closeSetAvatarTagsDialog"
-        :title="t('dialog.set_avatar_tags.header')"
-        width="780px"
-        append-to-body>
-        <template v-if="setAvatarTagsDialog.visible">
-            <label class="inline-flex items-center gap-2">
-                <Checkbox v-model="setAvatarTagsDialog.contentHorror" @update:modelValue="updateSelectedAvatarTags" />
-                <span>{{ t('dialog.set_avatar_tags.content_horror') }}</span>
-            </label>
-            <label class="inline-flex items-center gap-2">
-                <Checkbox v-model="setAvatarTagsDialog.contentGore" @update:modelValue="updateSelectedAvatarTags" />
-                <span>{{ t('dialog.set_avatar_tags.content_gore') }}</span>
-            </label>
-            <label class="inline-flex items-center gap-2">
-                <Checkbox v-model="setAvatarTagsDialog.contentViolence" @update:modelValue="updateSelectedAvatarTags" />
-                <span>{{ t('dialog.set_avatar_tags.content_violence') }}</span>
-            </label>
-            <label class="inline-flex items-center gap-2">
-                <Checkbox v-model="setAvatarTagsDialog.contentAdult" @update:modelValue="updateSelectedAvatarTags" />
-                <span>{{ t('dialog.set_avatar_tags.content_adult') }}</span>
-            </label>
-            <label class="inline-flex items-center gap-2">
-                <Checkbox v-model="setAvatarTagsDialog.contentSex" @update:modelValue="updateSelectedAvatarTags" />
-                <span>{{ t('dialog.set_avatar_tags.content_sex') }}</span>
-            </label>
-            <br />
-            <InputGroupTextareaField
-                v-model="setAvatarTagsDialog.selectedTagsCsv"
-                :rows="2"
-                :placeholder="t('dialog.set_avatar_tags.custom_tags_placeholder')"
-                style="margin-top: 10px"
-                input-class="resize-none"
-                @input="updateInputAvatarTags" />
-            <br />
-            <br />
-            <template
-                v-if="setAvatarTagsDialog.ownAvatars.length === props.setAvatarTagsDialog.selectedAvatarIds.length">
-                <Button size="sm" variant="outline" @click="setAvatarTagsSelectToggle">{{
-                    t('dialog.set_avatar_tags.select_none')
-                }}</Button>
-            </template>
-            <template v-else>
-                <Button size="sm" variant="outline" @click="setAvatarTagsSelectToggle">{{
-                    t('dialog.set_avatar_tags.select_all')
-                }}</Button>
-            </template>
-            <span style="margin-left: 5px"
-                >{{ props.setAvatarTagsDialog.selectedAvatarIds.length }} /
-                {{ setAvatarTagsDialog.ownAvatars.length }}</span
-            >
-            <Loader2 v-if="setAvatarTagsDialog.loading" class="is-loading" style="margin-left: 5px" />
-            <br />
-            <div class="x-friend-list" style="margin-top: 10px; min-height: 60px; max-height: 280px">
-                <div
-                    v-for="avatar in setAvatarTagsDialog.ownAvatars"
-                    :key="avatar.id"
-                    :class="['item-width', 'x-friend-item', 'x-friend-item-border']"
-                    @click="showAvatarDialog(avatar.id)">
-                    <div class="avatar">
-                        <img v-if="avatar.thumbnailImageUrl" :src="avatar.thumbnailImageUrl" loading="lazy" />
+    <Dialog
+        :open="setAvatarTagsDialog.visible"
+        @update:open="
+            (open) => {
+                if (!open) closeSetAvatarTagsDialog();
+            }
+        ">
+        <DialogContent class="x-dialog sm:max-w-195">
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.set_avatar_tags.header') }}</DialogTitle>
+            </DialogHeader>
+
+            <template v-if="setAvatarTagsDialog.visible">
+                <label class="inline-flex items-center gap-2">
+                    <Checkbox
+                        v-model="setAvatarTagsDialog.contentHorror"
+                        @update:modelValue="updateSelectedAvatarTags" />
+                    <span>{{ t('dialog.set_avatar_tags.content_horror') }}</span>
+                </label>
+                <label class="inline-flex items-center gap-2">
+                    <Checkbox v-model="setAvatarTagsDialog.contentGore" @update:modelValue="updateSelectedAvatarTags" />
+                    <span>{{ t('dialog.set_avatar_tags.content_gore') }}</span>
+                </label>
+                <label class="inline-flex items-center gap-2">
+                    <Checkbox
+                        v-model="setAvatarTagsDialog.contentViolence"
+                        @update:modelValue="updateSelectedAvatarTags" />
+                    <span>{{ t('dialog.set_avatar_tags.content_violence') }}</span>
+                </label>
+                <label class="inline-flex items-center gap-2">
+                    <Checkbox
+                        v-model="setAvatarTagsDialog.contentAdult"
+                        @update:modelValue="updateSelectedAvatarTags" />
+                    <span>{{ t('dialog.set_avatar_tags.content_adult') }}</span>
+                </label>
+                <label class="inline-flex items-center gap-2">
+                    <Checkbox v-model="setAvatarTagsDialog.contentSex" @update:modelValue="updateSelectedAvatarTags" />
+                    <span>{{ t('dialog.set_avatar_tags.content_sex') }}</span>
+                </label>
+                <br />
+                <InputGroupTextareaField
+                    v-model="setAvatarTagsDialog.selectedTagsCsv"
+                    :rows="2"
+                    :placeholder="t('dialog.set_avatar_tags.custom_tags_placeholder')"
+                    style="margin-top: 10px"
+                    input-class="resize-none"
+                    @input="updateInputAvatarTags" />
+                <br />
+                <br />
+                <template
+                    v-if="setAvatarTagsDialog.ownAvatars.length === props.setAvatarTagsDialog.selectedAvatarIds.length">
+                    <Button size="sm" variant="outline" @click="setAvatarTagsSelectToggle">{{
+                        t('dialog.set_avatar_tags.select_none')
+                    }}</Button>
+                </template>
+                <template v-else>
+                    <Button size="sm" variant="outline" @click="setAvatarTagsSelectToggle">{{
+                        t('dialog.set_avatar_tags.select_all')
+                    }}</Button>
+                </template>
+                <span style="margin-left: 5px"
+                    >{{ props.setAvatarTagsDialog.selectedAvatarIds.length }} /
+                    {{ setAvatarTagsDialog.ownAvatars.length }}</span
+                >
+                <Loader2 v-if="setAvatarTagsDialog.loading" class="is-loading" style="margin-left: 5px" />
+                <br />
+                <div class="x-friend-list" style="margin-top: 10px; min-height: 60px; max-height: 280px">
+                    <div
+                        v-for="avatar in setAvatarTagsDialog.ownAvatars"
+                        :key="avatar.id"
+                        :class="['item-width', 'x-friend-item', 'x-friend-item-border']"
+                        @click="showAvatarDialog(avatar.id)">
+                        <div class="avatar">
+                            <img v-if="avatar.thumbnailImageUrl" :src="avatar.thumbnailImageUrl" loading="lazy" />
+                        </div>
+                        <div class="detail">
+                            <span class="name" v-text="avatar.name"></span>
+                            <span
+                                v-if="avatar.releaseStatus === 'public'"
+                                class="extra"
+                                style="color: var(--el-color-success)"
+                                v-text="avatar.releaseStatus"></span>
+                            <span
+                                v-else-if="avatar.releaseStatus === 'private'"
+                                class="extra"
+                                style="color: var(--el-color-danger)"
+                                v-text="avatar.releaseStatus"></span>
+                            <span v-else class="extra" v-text="avatar.releaseStatus"></span>
+                            <span class="extra" v-text="avatarTagStrings.get(avatar.id)"></span>
+                        </div>
+                        <Button size="sm" variant="ghost" style="margin-left: 5px" @click.stop>
+                            <Checkbox
+                                :model-value="props.setAvatarTagsDialog.selectedAvatarIds.includes(avatar.id)"
+                                @update:modelValue="(val) => toggleAvatarSelection(avatar.id, val)" />
+                        </Button>
                     </div>
-                    <div class="detail">
-                        <span class="name" v-text="avatar.name"></span>
-                        <span
-                            v-if="avatar.releaseStatus === 'public'"
-                            class="extra"
-                            style="color: var(--el-color-success)"
-                            v-text="avatar.releaseStatus"></span>
-                        <span
-                            v-else-if="avatar.releaseStatus === 'private'"
-                            class="extra"
-                            style="color: var(--el-color-danger)"
-                            v-text="avatar.releaseStatus"></span>
-                        <span v-else class="extra" v-text="avatar.releaseStatus"></span>
-                        <span class="extra" v-text="avatarTagStrings.get(avatar.id)"></span>
-                    </div>
-                    <Button size="sm" variant="ghost" style="margin-left: 5px" @click.stop>
-                        <Checkbox
-                            :model-value="props.setAvatarTagsDialog.selectedAvatarIds.includes(avatar.id)"
-                            @update:modelValue="(val) => toggleAvatarSelection(avatar.id, val)" />
-                    </Button>
                 </div>
-            </div>
-        </template>
-        <template #footer>
-            <Button variant="secondary" class="mr-2" @click="closeSetAvatarTagsDialog">{{
-                t('dialog.set_avatar_tags.cancel')
-            }}</Button>
-            <Button @click="saveSetAvatarTagsDialog">{{ t('dialog.set_avatar_tags.save') }}</Button>
-        </template>
-    </el-dialog>
+            </template>
+
+            <DialogFooter>
+                <Button variant="secondary" class="mr-2" @click="closeSetAvatarTagsDialog">{{
+                    t('dialog.set_avatar_tags.cancel')
+                }}</Button>
+                <Button @click="saveSetAvatarTagsDialog">{{ t('dialog.set_avatar_tags.save') }}</Button>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { Button } from '@/components/ui/button';
     import { Checkbox } from '@/components/ui/checkbox';
     import { InputGroupTextareaField } from '@/components/ui/input-group';
diff --git a/src/components/dialogs/ChooseFavoriteGroupDialog.vue b/src/components/dialogs/ChooseFavoriteGroupDialog.vue
index 67c86a87..d20bc591 100644
--- a/src/components/dialogs/ChooseFavoriteGroupDialog.vue
+++ b/src/components/dialogs/ChooseFavoriteGroupDialog.vue
@@ -1,6 +1,10 @@
 <template>
-    <el-dialog :z-index="favoriteDialogIndex" v-model="isVisible" :title="t('dialog.favorite.header')" width="300px">
-        <div v-loading="loading">
+    <Dialog v-model:open="isVisible">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.favorite.header') }}</DialogTitle>
+            </DialogHeader>
+            <div v-loading="loading">
             <span style="display: block; text-align: center">{{ t('dialog.favorite.vrchat_favorites') }}</span>
             <template v-if="favoriteDialog.currentGroup && favoriteDialog.currentGroup.key">
                 <Button
@@ -23,8 +27,8 @@
                     {{ group.displayName }} ({{ group.count }} / {{ group.capacity }})
                 </Button>
             </template>
-        </div>
-        <div v-if="favoriteDialog.type === 'world'" style="margin-top: 20px">
+            </div>
+            <div v-if="favoriteDialog.type === 'world'" style="margin-top: 20px">
             <span style="display: block; text-align: center">{{ t('dialog.favorite.local_favorites') }}</span>
             <template v-for="group in localWorldFavoriteGroups" :key="group">
                 <Button
@@ -44,8 +48,8 @@
                     {{ group }} ({{ localWorldFavGroupLength(group) }})
                 </Button>
             </template>
-        </div>
-        <div v-if="favoriteDialog.type === 'avatar'" style="margin-top: 20px">
+            </div>
+            <div v-if="favoriteDialog.type === 'avatar'" style="margin-top: 20px">
             <span style="text-align: center">{{ t('dialog.favorite.local_avatar_favorites') }}</span>
             <template v-for="group in localAvatarFavoriteGroups" :key="group">
                 <Button
@@ -66,14 +70,16 @@
                     {{ group }} ({{ localAvatarFavGroupLength(group) }})
                 </Button>
             </template>
-        </div>
-    </el-dialog>
+            </div>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
-    import { computed, nextTick, ref, watch } from 'vue';
+    import { computed, ref, watch } from 'vue';
     import { Button } from '@/components/ui/button';
     import { Check } from 'lucide-vue-next';
+    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
@@ -81,7 +87,6 @@
 
     import { useFavoriteStore, useUserStore } from '../../stores';
     import { favoriteRequest } from '../../api';
-    import { getNextDialogIndex } from '../../shared/utils/base/ui';
 
     const { t } = useI18n();
 
@@ -107,7 +112,6 @@
     } = favoriteStore;
     const { isLocalUserVrcPlusSupporter } = storeToRefs(useUserStore());
 
-    const favoriteDialogIndex = ref(2000);
     const groups = ref([]);
     const loading = ref(false);
 
@@ -123,9 +127,6 @@
         (value) => {
             if (value) {
                 initFavoriteDialog();
-                nextTick(() => {
-                    favoriteDialogIndex.value = getNextDialogIndex();
-                });
             }
         }
     );
diff --git a/src/components/dialogs/CustomNavDialog.vue b/src/components/dialogs/CustomNavDialog.vue
index b2ef6df2..bd3c9a33 100644
--- a/src/components/dialogs/CustomNavDialog.vue
+++ b/src/components/dialogs/CustomNavDialog.vue
@@ -1,11 +1,9 @@
 <template>
-    <el-dialog
-        :model-value="visible"
-        class="custom-nav-dialog"
-        :title="t('nav_menu.custom_nav.dialog_title')"
-        width="600px"
-        @close="handleClose"
-        destroy-on-close>
+    <Dialog :open="visible" @update:open="(open) => (open ? null : handleClose())">
+        <DialogContent class="custom-nav-dialog">
+            <DialogHeader>
+                <DialogTitle>{{ t('nav_menu.custom_nav.dialog_title') }}</DialogTitle>
+            </DialogHeader>
         <div class="custom-nav-dialog__list" v-if="localLayout.length">
             <div
                 v-for="(entry, index) in localLayout"
@@ -90,7 +88,7 @@
             type="warning"
             :closable="false"
             :title="t('nav_menu.custom_nav.invalid_folder')" />
-        <template #footer>
+            <DialogFooter>
             <div class="custom-nav-dialog__footer">
                 <div class="custom-nav-dialog__footer-left">
                     <Button variant="outline" @click="openFolderEditor()">
@@ -109,15 +107,21 @@
                     </Button>
                 </div>
             </div>
-        </template>
-    </el-dialog>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
 
-    <el-dialog
-        v-model="folderEditor.visible"
-        class="folder-editor-dialog"
-        :title="folderEditor.isEditing ? t('nav_menu.custom_nav.edit_folder') : t('nav_menu.custom_nav.add_folder')"
-        width="900px"
-        destroy-on-close>
+    <Dialog v-model:open="folderEditor.visible">
+        <DialogContent class="folder-editor-dialog">
+            <DialogHeader>
+                <DialogTitle>
+                    {{
+                        folderEditor.isEditing
+                            ? t('nav_menu.custom_nav.edit_folder')
+                            : t('nav_menu.custom_nav.add_folder')
+                    }}
+                </DialogTitle>
+            </DialogHeader>
         <div class="folder-editor">
             <div class="folder-editor__form">
                 <InputGroupField
@@ -189,7 +193,7 @@
                 </div>
             </div>
         </div>
-        <template #footer>
+            <DialogFooter>
             <div class="folder-editor__footer">
                 <Button
                     variant="destructive"
@@ -206,13 +210,15 @@
                     {{ t('nav_menu.custom_nav.save') }}
                 </Button>
             </div>
-        </template>
-    </el-dialog>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
     import { computed, reactive, ref, watch } from 'vue';
     import { Button } from '@/components/ui/button';
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { useI18n } from 'vue-i18n';
 
     import dayjs from 'dayjs';
diff --git a/src/components/dialogs/GroupDialog/GallerySelectDialog.vue b/src/components/dialogs/GroupDialog/GallerySelectDialog.vue
index f8cc5204..60b1a255 100644
--- a/src/components/dialogs/GroupDialog/GallerySelectDialog.vue
+++ b/src/components/dialogs/GroupDialog/GallerySelectDialog.vue
@@ -1,61 +1,66 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        v-model="gallerySelectDialog.visible"
-        :title="t('dialog.gallery_select.header')"
-        width="100%"
-        append-to-body>
-        <div>
-            <span>{{ t('dialog.gallery_select.gallery') }}</span>
-            <span style="color: #909399; font-size: 12px; margin-left: 5px">{{ galleryTable.length }}/64</span>
-            <br />
-            <input
-                id="GalleryUploadButton"
-                type="file"
-                accept="image/*"
-                style="display: none"
-                @change="onFileChangeGallery" />
-            <ButtonGroup>
-                <Button variant="outline" size="sm" @click="selectImageGallerySelect('', '')">
-                    <X />
-                    {{ t('dialog.gallery_select.none') }}
-                </Button>
-                <Button variant="outline" size="sm" @click="refreshGalleryTable">
-                    <RefreshCw />
-                    {{ t('dialog.gallery_select.refresh') }}
-                </Button>
-                <Button
-                    variant="outline"
-                    size="sm"
-                    :disabled="!isLocalUserVrcPlusSupporter"
-                    @click="displayGalleryUpload">
-                    <Upload />
-                    {{ t('dialog.gallery_select.upload') }}
-                </Button>
-            </ButtonGroup>
-            <br />
-            <div
-                v-for="image in galleryTable"
-                :key="image.id"
-                class="x-friend-item"
-                style="display: inline-block; margin-top: 10px; width: unset; cursor: default">
-                <template v-if="image.versions && image.versions.length > 0">
-                    <div
-                        v-if="image.versions[image.versions.length - 1].file.url"
-                        class="vrcplus-icon"
-                        @click="selectImageGallerySelect(image.versions[image.versions.length - 1].file.url, image.id)">
-                        <img
-                            :src="image.versions[image.versions.length - 1].file.url"
-                            class="avatar"
-                            loading="lazy" /></div
-                ></template>
+    <Dialog v-model:open="gallerySelectDialog.visible">
+        <DialogContent class="x-dialog w-full sm:max-w-none">
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.gallery_select.header') }}</DialogTitle>
+            </DialogHeader>
+
+            <div>
+                <span>{{ t('dialog.gallery_select.gallery') }}</span>
+                <span style="color: #909399; font-size: 12px; margin-left: 5px">{{ galleryTable.length }}/64</span>
+                <br />
+                <input
+                    id="GalleryUploadButton"
+                    type="file"
+                    accept="image/*"
+                    style="display: none"
+                    @change="onFileChangeGallery" />
+                <ButtonGroup>
+                    <Button variant="outline" size="sm" @click="selectImageGallerySelect('', '')">
+                        <X />
+                        {{ t('dialog.gallery_select.none') }}
+                    </Button>
+                    <Button variant="outline" size="sm" @click="refreshGalleryTable">
+                        <RefreshCw />
+                        {{ t('dialog.gallery_select.refresh') }}
+                    </Button>
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        :disabled="!isLocalUserVrcPlusSupporter"
+                        @click="displayGalleryUpload">
+                        <Upload />
+                        {{ t('dialog.gallery_select.upload') }}
+                    </Button>
+                </ButtonGroup>
+                <br />
+                <div
+                    v-for="image in galleryTable"
+                    :key="image.id"
+                    class="x-friend-item"
+                    style="display: inline-block; margin-top: 10px; width: unset; cursor: default">
+                    <template v-if="image.versions && image.versions.length > 0">
+                        <div
+                            v-if="image.versions[image.versions.length - 1].file.url"
+                            class="vrcplus-icon"
+                            @click="
+                                selectImageGallerySelect(image.versions[image.versions.length - 1].file.url, image.id)
+                            ">
+                            <img
+                                :src="image.versions[image.versions.length - 1].file.url"
+                                class="avatar"
+                                loading="lazy" />
+                        </div>
+                    </template>
+                </div>
             </div>
-        </div>
-    </el-dialog>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
-    import { X, RefreshCw, Upload } from 'lucide-vue-next';
+    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+    import { RefreshCw, Upload, X } from 'lucide-vue-next';
     import { Button } from '@/components/ui/button';
     import { ButtonGroup } from '@/components/ui/button-group';
     import { storeToRefs } from 'pinia';
diff --git a/src/components/dialogs/GroupDialog/GroupDialog.vue b/src/components/dialogs/GroupDialog/GroupDialog.vue
index 8c618d3c..4f496572 100644
--- a/src/components/dialogs/GroupDialog/GroupDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialog.vue
@@ -1,187 +1,227 @@
 <template>
-    <el-dialog
-        :z-index="groupDialogIndex"
-        v-model="groupDialog.visible"
-        :show-close="false"
-        top="10vh"
-        width="940px"
-        class="x-dialog x-group-dialog">
-        <div v-loading="groupDialog.loading" class="group-body">
-            <div style="display: flex">
-                <img
-                    :src="groupDialog.ref.iconUrl"
-                    style="flex: none; width: 120px; height: 120px; border-radius: 12px"
-                    class="x-link"
-                    @click="showFullscreenImageDialog(groupDialog.ref.iconUrl)"
-                    loading="lazy" />
-                <div style="flex: 1; display: flex; align-items: center; margin-left: 15px">
-                    <div class="group-header" style="flex: 1">
-                        <span v-if="groupDialog.ref.ownerId === currentUser.id" style="margin-right: 5px">👑</span>
-                        <span
-                            class="dialog-title"
-                            style="margin-right: 5px; cursor: pointer"
-                            v-text="groupDialog.ref.name"
-                            @click="copyToClipboard(groupDialog.ref.name)"></span>
-                        <span
-                            class="group-discriminator x-grey"
-                            style="font-family: monospace; font-size: 12px; margin-right: 5px">
-                            {{ groupDialog.ref.shortCode }}.{{ groupDialog.ref.discriminator }}
-                        </span>
-                        <TooltipWrapper v-for="item in groupDialog.ref.$languages" :key="item.key" side="top">
-                            <template #content>
-                                <span>{{ item.value }} ({{ item.key }})</span>
-                            </template>
+    <Dialog v-model:open="groupDialog.visible">
+        <DialogContent
+            class="x-dialog x-group-dialog group-body translate-y-0 sm:max-w-235"
+            :show-close-button="false"
+            style="top: 10vh">
+            <div v-loading="groupDialog.loading">
+                <div style="display: flex">
+                    <img
+                        :src="groupDialog.ref.iconUrl"
+                        style="flex: none; width: 120px; height: 120px; border-radius: 12px"
+                        class="x-link"
+                        @click="showFullscreenImageDialog(groupDialog.ref.iconUrl)"
+                        loading="lazy" />
+                    <div style="flex: 1; display: flex; align-items: center; margin-left: 15px">
+                        <div class="group-header" style="flex: 1">
+                            <span v-if="groupDialog.ref.ownerId === currentUser.id" style="margin-right: 5px">👑</span>
                             <span
-                                class="flags"
-                                :class="languageClass(item.key)"
-                                style="display: inline-block; margin-right: 5px"></span>
-                        </TooltipWrapper>
-                        <div style="margin-top: 5px">
+                                class="dialog-title"
+                                style="margin-right: 5px; cursor: pointer"
+                                v-text="groupDialog.ref.name"
+                                @click="copyToClipboard(groupDialog.ref.name)"></span>
                             <span
-                                class="x-link x-grey"
-                                style="font-family: monospace"
-                                @click="showUserDialog(groupDialog.ref.ownerId)"
-                                v-text="groupDialog.ownerDisplayName"></span>
-                        </div>
-                        <div class="group-tags">
-                            <Badge
-                                v-if="groupDialog.ref.isVerified"
-                                variant="outline"
-                                style="margin-right: 5px; margin-top: 5px">
-                                {{ t('dialog.group.tags.verified') }}
-                            </Badge>
-                            <Badge
-                                v-if="groupDialog.ref.privacy === 'private'"
-                                variant="outline"
-                                style="margin-right: 5px; margin-top: 5px">
-                                {{ t('dialog.group.tags.private') }}
-                            </Badge>
-                            <Badge
-                                v-if="groupDialog.ref.privacy === 'default'"
-                                variant="outline"
-                                style="margin-right: 5px; margin-top: 5px">
-                                {{ t('dialog.group.tags.public') }}
-                            </Badge>
-                            <Badge
-                                v-if="groupDialog.ref.joinState === 'open'"
-                                variant="outline"
-                                style="margin-right: 5px; margin-top: 5px">
-                                {{ t('dialog.group.tags.open') }}
-                            </Badge>
-                            <Badge
-                                v-else-if="groupDialog.ref.joinState === 'request'"
-                                variant="outline"
-                                style="margin-right: 5px; margin-top: 5px">
-                                {{ t('dialog.group.tags.request') }}
-                            </Badge>
-                            <Badge
-                                v-else-if="groupDialog.ref.joinState === 'invite'"
-                                variant="outline"
-                                style="margin-right: 5px; margin-top: 5px">
-                                {{ t('dialog.group.tags.invite') }}
-                            </Badge>
-                            <Badge
-                                v-else-if="groupDialog.ref.joinState === 'closed'"
-                                variant="outline"
-                                style="margin-right: 5px; margin-top: 5px">
-                                {{ t('dialog.group.tags.closed') }}
-                            </Badge>
-                            <Badge
-                                v-if="groupDialog.inGroup"
-                                variant="outline"
-                                style="margin-right: 5px; margin-top: 5px">
-                                {{ t('dialog.group.tags.joined') }}
-                            </Badge>
-                            <Badge
-                                v-if="groupDialog.ref.myMember && groupDialog.ref.myMember.bannedAt"
-                                variant="outline"
-                                style="margin-right: 5px; margin-top: 5px">
-                                {{ t('dialog.group.tags.banned') }}
-                            </Badge>
-                            <template v-if="groupDialog.inGroup && groupDialog.ref.myMember">
-                                <Badge
-                                    v-if="groupDialog.ref.myMember.visibility === 'visible'"
-                                    variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px">
-                                    {{ t('dialog.group.tags.visible') }}
-                                </Badge>
-                                <Badge
-                                    v-else-if="groupDialog.ref.myMember.visibility === 'friends'"
-                                    variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px">
-                                    {{ t('dialog.group.tags.friends') }}
-                                </Badge>
-                                <Badge
-                                    v-else-if="groupDialog.ref.myMember.visibility === 'hidden'"
-                                    variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px">
-                                    {{ t('dialog.group.tags.hidden') }}
-                                </Badge>
-                                <Badge
-                                    v-if="groupDialog.ref.myMember.isSubscribedToAnnouncements"
-                                    variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px">
-                                    {{ t('dialog.group.tags.subscribed') }}
-                                </Badge>
-                            </template>
-                        </div>
-                        <div style="margin-top: 5px">
-                            <pre
-                                v-show="groupDialog.ref.name !== groupDialog.ref.description"
-                                style="
-                                    font-family: inherit;
-                                    font-size: 12px;
-                                    white-space: pre-wrap;
-                                    max-height: 40vh;
-                                    overflow-y: auto;
-                                "
-                                v-text="groupDialog.ref.description"></pre>
-                        </div>
-                    </div>
-                    <div style="flex: none; margin-left: 10px">
-                        <template v-if="groupDialog.inGroup && groupDialog.ref?.myMember">
-                            <TooltipWrapper
-                                v-if="groupDialog.ref.myMember?.isRepresenting"
-                                side="top"
-                                :content="t('dialog.group.actions.unrepresent_tooltip')">
-                                <Button
-                                    class="rounded-full mr-2"
-                                    variant="secondary"
-                                    size="icon-lg"
-                                    style="margin-left: 5px"
-                                    @click="clearGroupRepresentation(groupDialog.id)">
-                                    <Star />
-                                </Button>
+                                class="group-discriminator x-grey"
+                                style="font-family: monospace; font-size: 12px; margin-right: 5px">
+                                {{ groupDialog.ref.shortCode }}.{{ groupDialog.ref.discriminator }}
+                            </span>
+                            <TooltipWrapper v-for="item in groupDialog.ref.$languages" :key="item.key" side="top">
+                                <template #content>
+                                    <span>{{ item.value }} ({{ item.key }})</span>
+                                </template>
+                                <span
+                                    class="flags"
+                                    :class="languageClass(item.key)"
+                                    style="display: inline-block; margin-right: 5px"></span>
                             </TooltipWrapper>
-                            <TooltipWrapper v-else side="top" :content="t('dialog.group.actions.represent_tooltip')">
-                                <span>
+                            <div style="margin-top: 5px">
+                                <span
+                                    class="x-link x-grey"
+                                    style="font-family: monospace"
+                                    @click="showUserDialog(groupDialog.ref.ownerId)"
+                                    v-text="groupDialog.ownerDisplayName"></span>
+                            </div>
+                            <div class="group-tags">
+                                <Badge
+                                    v-if="groupDialog.ref.isVerified"
+                                    variant="outline"
+                                    style="margin-right: 5px; margin-top: 5px">
+                                    {{ t('dialog.group.tags.verified') }}
+                                </Badge>
+                                <Badge
+                                    v-if="groupDialog.ref.privacy === 'private'"
+                                    variant="outline"
+                                    style="margin-right: 5px; margin-top: 5px">
+                                    {{ t('dialog.group.tags.private') }}
+                                </Badge>
+                                <Badge
+                                    v-if="groupDialog.ref.privacy === 'default'"
+                                    variant="outline"
+                                    style="margin-right: 5px; margin-top: 5px">
+                                    {{ t('dialog.group.tags.public') }}
+                                </Badge>
+                                <Badge
+                                    v-if="groupDialog.ref.joinState === 'open'"
+                                    variant="outline"
+                                    style="margin-right: 5px; margin-top: 5px">
+                                    {{ t('dialog.group.tags.open') }}
+                                </Badge>
+                                <Badge
+                                    v-else-if="groupDialog.ref.joinState === 'request'"
+                                    variant="outline"
+                                    style="margin-right: 5px; margin-top: 5px">
+                                    {{ t('dialog.group.tags.request') }}
+                                </Badge>
+                                <Badge
+                                    v-else-if="groupDialog.ref.joinState === 'invite'"
+                                    variant="outline"
+                                    style="margin-right: 5px; margin-top: 5px">
+                                    {{ t('dialog.group.tags.invite') }}
+                                </Badge>
+                                <Badge
+                                    v-else-if="groupDialog.ref.joinState === 'closed'"
+                                    variant="outline"
+                                    style="margin-right: 5px; margin-top: 5px">
+                                    {{ t('dialog.group.tags.closed') }}
+                                </Badge>
+                                <Badge
+                                    v-if="groupDialog.inGroup"
+                                    variant="outline"
+                                    style="margin-right: 5px; margin-top: 5px">
+                                    {{ t('dialog.group.tags.joined') }}
+                                </Badge>
+                                <Badge
+                                    v-if="groupDialog.ref.myMember && groupDialog.ref.myMember.bannedAt"
+                                    variant="outline"
+                                    style="margin-right: 5px; margin-top: 5px">
+                                    {{ t('dialog.group.tags.banned') }}
+                                </Badge>
+                                <template v-if="groupDialog.inGroup && groupDialog.ref.myMember">
+                                    <Badge
+                                        v-if="groupDialog.ref.myMember.visibility === 'visible'"
+                                        variant="outline"
+                                        style="margin-right: 5px; margin-top: 5px">
+                                        {{ t('dialog.group.tags.visible') }}
+                                    </Badge>
+                                    <Badge
+                                        v-else-if="groupDialog.ref.myMember.visibility === 'friends'"
+                                        variant="outline"
+                                        style="margin-right: 5px; margin-top: 5px">
+                                        {{ t('dialog.group.tags.friends') }}
+                                    </Badge>
+                                    <Badge
+                                        v-else-if="groupDialog.ref.myMember.visibility === 'hidden'"
+                                        variant="outline"
+                                        style="margin-right: 5px; margin-top: 5px">
+                                        {{ t('dialog.group.tags.hidden') }}
+                                    </Badge>
+                                    <Badge
+                                        v-if="groupDialog.ref.myMember.isSubscribedToAnnouncements"
+                                        variant="outline"
+                                        style="margin-right: 5px; margin-top: 5px">
+                                        {{ t('dialog.group.tags.subscribed') }}
+                                    </Badge>
+                                </template>
+                            </div>
+                            <div style="margin-top: 5px">
+                                <pre
+                                    v-show="groupDialog.ref.name !== groupDialog.ref.description"
+                                    style="
+                                        font-family: inherit;
+                                        font-size: 12px;
+                                        white-space: pre-wrap;
+                                        max-height: 40vh;
+                                        overflow-y: auto;
+                                    "
+                                    v-text="groupDialog.ref.description"></pre>
+                            </div>
+                        </div>
+                        <div style="flex: none; margin-left: 10px">
+                            <template v-if="groupDialog.inGroup && groupDialog.ref?.myMember">
+                                <TooltipWrapper
+                                    v-if="groupDialog.ref.myMember?.isRepresenting"
+                                    side="top"
+                                    :content="t('dialog.group.actions.unrepresent_tooltip')">
                                     <Button
                                         class="rounded-full mr-2"
-                                        variant="outline"
+                                        variant="secondary"
                                         size="icon-lg"
-                                        :disabled="groupDialog.ref.privacy === 'private'"
-                                        @click="setGroupRepresentation(groupDialog.id)">
+                                        style="margin-left: 5px"
+                                        @click="clearGroupRepresentation(groupDialog.id)">
                                         <Star />
                                     </Button>
-                                </span>
-                            </TooltipWrapper>
-                        </template>
-                        <template v-else-if="groupDialog.ref.myMember?.membershipStatus === 'requested'">
-                            <TooltipWrapper side="top" :content="t('dialog.group.actions.cancel_join_request_tooltip')">
-                                <span>
+                                </TooltipWrapper>
+                                <TooltipWrapper
+                                    v-else
+                                    side="top"
+                                    :content="t('dialog.group.actions.represent_tooltip')">
+                                    <span>
+                                        <Button
+                                            class="rounded-full mr-2"
+                                            variant="outline"
+                                            size="icon-lg"
+                                            :disabled="groupDialog.ref.privacy === 'private'"
+                                            @click="setGroupRepresentation(groupDialog.id)">
+                                            <Star />
+                                        </Button>
+                                    </span>
+                                </TooltipWrapper>
+                            </template>
+                            <template v-else-if="groupDialog.ref.myMember?.membershipStatus === 'requested'">
+                                <TooltipWrapper
+                                    side="top"
+                                    :content="t('dialog.group.actions.cancel_join_request_tooltip')">
+                                    <span>
+                                        <Button
+                                            class="rounded-full mr-2"
+                                            variant="outline"
+                                            size="icon-lg"
+                                            @click="cancelGroupRequest(groupDialog.id)">
+                                            <X />
+                                        </Button>
+                                    </span>
+                                </TooltipWrapper>
+                            </template>
+                            <template v-else-if="groupDialog.ref.myMember?.membershipStatus === 'invited'">
+                                <TooltipWrapper side="top" :content="t('dialog.group.actions.pending_request_tooltip')">
+                                    <span>
+                                        <Button
+                                            class="rounded-full mr-2"
+                                            variant="outline"
+                                            size="icon-lg"
+                                            @click="joinGroup(groupDialog.id)">
+                                            <Check />
+                                        </Button>
+                                    </span>
+                                </TooltipWrapper>
+                            </template>
+                            <template v-else>
+                                <TooltipWrapper
+                                    v-if="groupDialog.ref.joinState === 'request'"
+                                    side="top"
+                                    :content="t('dialog.group.actions.request_join_tooltip')">
                                     <Button
                                         class="rounded-full mr-2"
                                         variant="outline"
                                         size="icon-lg"
-                                        @click="cancelGroupRequest(groupDialog.id)">
-                                        <X />
+                                        @click="joinGroup(groupDialog.id)">
+                                        <MessageSquare />
                                     </Button>
-                                </span>
-                            </TooltipWrapper>
-                        </template>
-                        <template v-else-if="groupDialog.ref.myMember?.membershipStatus === 'invited'">
-                            <TooltipWrapper side="top" :content="t('dialog.group.actions.pending_request_tooltip')">
-                                <span>
+                                </TooltipWrapper>
+                                <TooltipWrapper
+                                    v-if="groupDialog.ref.joinState === 'invite'"
+                                    side="top"
+                                    :content="t('dialog.group.actions.invite_required_tooltip')">
+                                    <span>
+                                        <Button class="rounded-full mr-2" variant="outline" size="icon-lg" disabled>
+                                            <MessageSquare />
+                                        </Button>
+                                    </span>
+                                </TooltipWrapper>
+                                <TooltipWrapper
+                                    v-if="groupDialog.ref.joinState === 'open'"
+                                    side="top"
+                                    :content="t('dialog.group.actions.join_group_tooltip')">
                                     <Button
                                         class="rounded-full mr-2"
                                         variant="outline"
@@ -189,551 +229,201 @@
                                         @click="joinGroup(groupDialog.id)">
                                         <Check />
                                     </Button>
-                                </span>
-                            </TooltipWrapper>
-                        </template>
-                        <template v-else>
-                            <TooltipWrapper
-                                v-if="groupDialog.ref.joinState === 'request'"
-                                side="top"
-                                :content="t('dialog.group.actions.request_join_tooltip')">
-                                <Button
-                                    class="rounded-full mr-2"
-                                    variant="outline"
-                                    size="icon-lg"
-                                    @click="joinGroup(groupDialog.id)">
-                                    <MessageSquare />
-                                </Button>
-                            </TooltipWrapper>
-                            <TooltipWrapper
-                                v-if="groupDialog.ref.joinState === 'invite'"
-                                side="top"
-                                :content="t('dialog.group.actions.invite_required_tooltip')">
-                                <span>
-                                    <Button class="rounded-full mr-2" variant="outline" size="icon-lg" disabled>
-                                        <MessageSquare />
-                                    </Button>
-                                </span>
-                            </TooltipWrapper>
-                            <TooltipWrapper
-                                v-if="groupDialog.ref.joinState === 'open'"
-                                side="top"
-                                :content="t('dialog.group.actions.join_group_tooltip')">
-                                <Button
-                                    class="rounded-full mr-2"
-                                    variant="outline"
-                                    size="icon-lg"
-                                    @click="joinGroup(groupDialog.id)">
-                                    <Check />
-                                </Button>
-                            </TooltipWrapper>
-                        </template>
-                        <DropdownMenu>
-                            <DropdownMenuTrigger as-child>
-                                <Button
-                                    class="rounded-full"
-                                    :variant="
-                                        groupDialog.ref.membershipStatus === 'userblocked' ? 'destructive' : 'outline'
-                                    "
-                                    size="icon-lg">
-                                    <MoreHorizontal />
-                                </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent>
-                                <DropdownMenuItem @click="groupDialogCommand('RefreshCw')">
-                                    <RefreshCw class="size-4" />
-                                    {{ t('dialog.group.actions.refresh') }}
-                                </DropdownMenuItem>
-                                <DropdownMenuItem @click="groupDialogCommand('Share2')">
-                                    <Share2 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')">
-                                            <BellOff 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')">
-                                            <MessageSquare 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')">
-                                                <Ticket class="size-4" />
-                                                {{ t('dialog.group.actions.create_post') }}
-                                            </DropdownMenuItem>
-                                        </template>
-                                        <DropdownMenuItem
-                                            :disabled="!hasGroupModerationPermission(groupDialog.ref)"
-                                            @click="groupDialogCommand('Moderation Tools')">
-                                            <Settings 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')">
-                                                <Eye 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')">
-                                                <Eye 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')">
-                                                <Eye 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')">
-                                            <Trash2 class="size-4" />
-                                            {{ t('dialog.group.actions.leave') }}
-                                        </DropdownMenuItem>
-                                    </template>
-                                </template>
-                                <template v-else>
-                                    <DropdownMenuSeparator />
-                                    <DropdownMenuItem
-                                        v-if="groupDialog.ref.membershipStatus === 'userblocked'"
-                                        variant="destructive"
-                                        @click="groupDialogCommand('Unblock Group')">
-                                        <CheckCircle class="size-4" />
-                                        {{ t('dialog.group.actions.unblock') }}
-                                    </DropdownMenuItem>
-                                    <DropdownMenuItem v-else @click="groupDialogCommand('Block Group')">
-                                        <XCircle class="size-4" />
-                                        {{ t('dialog.group.actions.block') }}
-                                    </DropdownMenuItem>
-                                </template>
-                            </DropdownMenuContent>
-                        </DropdownMenu>
-                    </div>
-                </div>
-            </div>
-            <TabsUnderline
-                v-model="groupDialogLastActiveTab"
-                :items="groupDialogTabs"
-                :unmount-on-hide="false"
-                @update:modelValue="groupDialogTabClick">
-                <template #Info>
-                    <div class="group-banner-image-info">
-                        <img
-                            :src="groupDialog.ref.bannerUrl"
-                            class="x-link"
-                            style="flex: none; width: 100%; aspect-ratio: 6/1; object-fit: cover; border-radius: 4px"
-                            @click="showFullscreenImageDialog(groupDialog.ref.bannerUrl)"
-                            loading="lazy" />
-                    </div>
-                    <div class="x-friend-list" style="max-height: none">
-                        <span
-                            v-if="groupDialog.instances.length"
-                            style="font-size: 12px; font-weight: bold; margin: 5px">
-                            {{ t('dialog.group.info.instances') }}
-                        </span>
-                        <div v-for="room in groupDialog.instances" :key="room.tag" style="width: 100%">
-                            <div style="margin: 5px 0">
-                                <Location :location="room.tag" style="display: inline-block" />
-                                <InviteYourself :location="room.tag" style="margin-left: 5px" />
-                                <TooltipWrapper side="top" content="RefreshCw player count">
-                                    <Button
-                                        class="rounded-full ml-1 w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
-                                        size="icon"
-                                        variant="outline"
-                                        @click="refreshInstancePlayerCount(room.tag)"
-                                        ><RefreshCw class="h-4 w-4" />
-                                    </Button>
                                 </TooltipWrapper>
-                                <LastJoin :location="room.tag" :currentlocation="lastLocation.location" />
-                                <InstanceInfo
-                                    :location="room.tag"
-                                    :instance="room.ref"
-                                    :friendcount="room.friendCount" />
-                            </div>
-                            <div
-                                v-if="room.users.length"
-                                class="x-friend-list"
-                                style="margin: 10px 0; padding: 0; max-height: unset">
-                                <div
-                                    v-for="user in room.users"
-                                    :key="user.id"
-                                    class="x-friend-item x-friend-item-border"
-                                    @click="showUserDialog(user.id)">
-                                    <div class="avatar" :class="userStatusClass(user)">
-                                        <img :src="userImage(user)" loading="lazy" />
-                                    </div>
-                                    <div class="detail">
-                                        <span
-                                            class="name"
-                                            :style="{ color: user.$userColour }"
-                                            v-text="user.displayName" />
-                                        <span v-if="user.location === 'traveling'" class="extra">
-                                            <Loader2 class="is-loading" style="margin-right: 3px" />
-                                            <Timer :epoch="user.$travelingToTime" />
-                                        </span>
-                                        <span v-else class="extra">
-                                            <Timer :epoch="user.$location_at" />
-                                        </span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="x-friend-item" style="width: 100%; cursor: default">
-                            <div class="detail">
-                                <span class="name">{{ t('dialog.group.info.announcement') }}</span>
-                                <span style="display: block" v-text="groupDialog.announcement.title" />
-                                <div
-                                    v-if="groupDialog.announcement.imageUrl"
-                                    style="display: inline-block; margin-right: 5px">
-                                    <img
-                                        :src="groupDialog.announcement.imageUrl"
-                                        class="x-link"
-                                        style="
-                                            flex: none;
-                                            width: 60px;
-                                            height: 60px;
-                                            border-radius: 4px;
-                                            object-fit: cover;
+                            </template>
+                            <DropdownMenu>
+                                <DropdownMenuTrigger as-child>
+                                    <Button
+                                        class="rounded-full"
+                                        :variant="
+                                            groupDialog.ref.membershipStatus === 'userblocked'
+                                                ? 'destructive'
+                                                : 'outline'
                                         "
-                                        @click="showFullscreenImageDialog(groupDialog.announcement.imageUrl)"
-                                        loading="lazy" />
-                                </div>
-                                <pre
-                                    class="extra"
-                                    style="
-                                        display: inline-block;
-                                        vertical-align: top;
-                                        font-family: inherit;
-                                        font-size: 12px;
-                                        white-space: pre-wrap;
-                                        margin: 0;
-                                    "
-                                    >{{ groupDialog.announcement.text || '-' }}</pre
-                                >
-                                <br />
-                                <div
-                                    v-if="groupDialog.announcement.id"
-                                    class="extra"
-                                    style="float: right; margin-left: 5px">
-                                    <TooltipWrapper v-if="groupDialog.announcement.roleIds.length" side="top">
-                                        <template #content>
-                                            <span>{{ t('dialog.group.posts.visibility') }}</span>
-                                            <br />
-                                            <template v-for="roleId in groupDialog.announcement.roleIds" :key="roleId">
-                                                <template v-for="role in groupDialog.ref.roles" :key="roleId + role.id"
-                                                    ><span v-if="role.id === roleId" v-text="role.name"
-                                                /></template>
-                                                <span
-                                                    v-if="
-                                                        groupDialog.announcement.roleIds.indexOf(roleId) <
-                                                        groupDialog.announcement.roleIds.length - 1
-                                                    ">
-                                                    ,&nbsp;
-                                                </span>
+                                        size="icon-lg">
+                                        <MoreHorizontal />
+                                    </Button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent>
+                                    <DropdownMenuItem @click="groupDialogCommand('RefreshCw')">
+                                        <RefreshCw class="size-4" />
+                                        {{ t('dialog.group.actions.refresh') }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem @click="groupDialogCommand('Share2')">
+                                        <Share2 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')">
+                                                <BellOff 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')">
+                                                <MessageSquare 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')">
+                                                    <Ticket class="size-4" />
+                                                    {{ t('dialog.group.actions.create_post') }}
+                                                </DropdownMenuItem>
                                             </template>
-                                        </template>
-                                        <Eye style="margin-right: 5px" />
-                                    </TooltipWrapper>
-                                    <DisplayName
-                                        :userid="groupDialog.announcement.authorId"
-                                        style="margin-right: 5px" />
-                                    <span v-if="groupDialog.announcement.editorId" style="margin-right: 5px">
-                                        ({{ t('dialog.group.posts.edited_by') }}
-                                        <DisplayName :userid="groupDialog.announcement.editorId" />)
-                                    </span>
-                                    <TooltipWrapper side="bottom">
-                                        <template #content>
-                                            <span
-                                                >{{ t('dialog.group.posts.created_at') }}
-                                                {{ formatDateFilter(groupDialog.announcement.createdAt, 'long') }}</span
-                                            >
+                                            <DropdownMenuItem
+                                                :disabled="!hasGroupModerationPermission(groupDialog.ref)"
+                                                @click="groupDialogCommand('Moderation Tools')">
+                                                <Settings class="size-4" />
+                                                {{ t('dialog.group.actions.moderation_tools') }}
+                                            </DropdownMenuItem>
                                             <template
                                                 v-if="
-                                                    groupDialog.announcement.updatedAt !==
-                                                    groupDialog.announcement.createdAt
+                                                    groupDialog.ref.myMember && groupDialog.ref.privacy === 'default'
                                                 ">
-                                                <br />
-                                                <span
-                                                    >{{ t('dialog.group.posts.edited_at') }}
-                                                    {{
-                                                        formatDateFilter(groupDialog.announcement.updatedAt, 'long')
-                                                    }}</span
-                                                >
+                                                <DropdownMenuSeparator />
+                                                <DropdownMenuItem @click="groupDialogCommand('Visibility Everyone')">
+                                                    <Eye 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')">
+                                                    <Eye 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')">
+                                                    <Eye 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')">
+                                                <Trash2 class="size-4" />
+                                                {{ t('dialog.group.actions.leave') }}
+                                            </DropdownMenuItem>
                                         </template>
-                                        <Timer :epoch="Date.parse(groupDialog.announcement.updatedAt)" />
-                                    </TooltipWrapper>
-                                    <template v-if="hasGroupPermission(groupDialog.ref, 'group-announcement-manage')">
-                                        <TooltipWrapper side="top" :content="t('dialog.group.posts.edit_tooltip')">
-                                            <Button
-                                                size="sm"
-                                                variant="ghost"
-                                                style="margin-left: 5px; padding: 0"
-                                                @click="
-                                                    showGroupPostEditDialog(groupDialog.id, groupDialog.announcement)
-                                                "></Button>
-                                        </TooltipWrapper>
-                                        <TooltipWrapper side="top" :content="t('dialog.group.posts.delete_tooltip')">
-                                            <Button
-                                                size="sm"
-                                                variant="ghost"
-                                                style="margin-left: 5px; padding: 0"
-                                                @click="confirmDeleteGroupPost(groupDialog.announcement)"></Button>
-                                        </TooltipWrapper>
                                     </template>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="x-friend-item" style="width: 100%; cursor: default">
-                            <div class="detail">
-                                <span class="name">{{ t('dialog.group.info.rules') }}</span>
-                                <pre
-                                    class="extra"
-                                    style="
-                                        font-family: inherit;
-                                        font-size: 12px;
-                                        white-space: pre-wrap;
-                                        margin: 0 0.5em 0 0;
-                                    "
-                                    >{{ groupDialog.ref.rules || '-' }}</pre
-                                >
-                            </div>
-                        </div>
-                        <div class="x-friend-item x-friend-item-no-hover" style="width: 100%; cursor: default">
-                            <div class="detail" style="overflow: visible">
-                                <span class="name">{{ t('dialog.group.info.upcoming_events') }}</span>
-                                <template v-if="upcomingCalenderEvents.length > 0">
-                                    <br />
-                                    <div class="grid-view events-row">
-                                        <GroupCalendarEventCard
-                                            v-for="value in upcomingCalenderEvents"
-                                            :key="value.id"
-                                            :event="value"
-                                            :is-following="value.userInterest?.isFollowing"
-                                            @update-following-calendar-data="updateFollowingCalendarData"
-                                            mode="grid"
-                                            card-class="group-dialog-grid-card" />
-                                    </div>
-                                </template>
-                                <span v-else class="extra">-</span>
-                            </div>
-                        </div>
-                        <div class="x-friend-item x-friend-item-no-hover" style="width: 100%; cursor: default">
-                            <div class="detail" style="overflow: visible">
-                                <span class="name">{{ t('dialog.group.info.past_events') }}</span>
-                                <template v-if="pastCalenderEvents.length > 0">
-                                    <br />
-                                    <div class="grid-view events-row">
-                                        <GroupCalendarEventCard
-                                            v-for="value in pastCalenderEvents"
-                                            :key="value.id"
-                                            :event="value"
-                                            :is-following="value.userInterest?.isFollowing"
-                                            @update-following-calendar-data="updateFollowingCalendarData"
-                                            mode="grid"
-                                            card-class="group-dialog-grid-card" />
-                                    </div>
-                                </template>
-                                <span v-else class="extra">-</span>
-                            </div>
-                        </div>
-                        <div class="x-friend-item" style="cursor: default">
-                            <div class="detail">
-                                <span class="name">{{ t('dialog.group.info.members') }}</span>
-                                <div class="extra">
-                                    {{ groupDialog.ref.memberCount }} ({{ groupDialog.ref.onlineMemberCount }})
-                                </div>
-                            </div>
-                        </div>
-                        <div class="x-friend-item" style="cursor: default">
-                            <div class="detail">
-                                <span class="name">{{ t('dialog.group.info.created_at') }}</span>
-                                <span class="extra">{{ formatDateFilter(groupDialog.ref.createdAt, 'long') }}</span>
-                            </div>
-                        </div>
-                        <TooltipWrapper side="top" :content="t('dialog.user.info.open_previous_instance')">
-                            <div class="x-friend-item" @click="showPreviousInstancesGroupDialog(groupDialog.ref)">
-                                <div class="detail">
-                                    <span class="name">
-                                        {{ t('dialog.group.info.last_visited') }}
-                                        <TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
-                                            <AlertTriangle style="margin-left: 3px" />
-                                        </TooltipWrapper>
-                                    </span>
-                                    <span class="extra">{{ formatDateFilter(groupDialog.lastVisit, 'long') }}</span>
-                                </div>
-                            </div>
-                        </TooltipWrapper>
-                        <div class="x-friend-item" style="cursor: default">
-                            <div class="detail">
-                                <span class="name">{{ t('dialog.group.info.links') }}</span>
-                                <div
-                                    v-if="groupDialog.ref.links && groupDialog.ref.links.length > 0"
-                                    style="margin-top: 5px"
-                                    class="flex">
-                                    <template v-for="(link, index) in groupDialog.ref.links" :key="index">
-                                        <TooltipWrapper v-if="link">
-                                            <template #content>
-                                                <span v-text="link" />
-                                            </template>
-                                            <img
-                                                :src="getFaviconUrl(link)"
-                                                style="
-                                                    width: 16px;
-                                                    height: 16px;
-                                                    vertical-align: middle;
-                                                    margin-right: 5px;
-                                                    cursor: pointer;
-                                                "
-                                                @click.stop="openExternalLink(link)"
-                                                loading="lazy" />
-                                        </TooltipWrapper>
+                                    <template v-else>
+                                        <DropdownMenuSeparator />
+                                        <DropdownMenuItem
+                                            v-if="groupDialog.ref.membershipStatus === 'userblocked'"
+                                            variant="destructive"
+                                            @click="groupDialogCommand('Unblock Group')">
+                                            <CheckCircle class="size-4" />
+                                            {{ t('dialog.group.actions.unblock') }}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem v-else @click="groupDialogCommand('Block Group')">
+                                            <XCircle class="size-4" />
+                                            {{ t('dialog.group.actions.block') }}
+                                        </DropdownMenuItem>
                                     </template>
-                                </div>
-                                <div v-else class="extra">-</div>
-                            </div>
-                        </div>
-                        <div class="inline-flex justify-between w-full">
-                            <div class="x-friend-item" style="cursor: default; width: 50%">
-                                <div class="detail">
-                                    <span class="name">{{ t('dialog.group.info.url') }}</span>
-                                    <span class="extra"
-                                        >{{ groupDialog.ref.$url }}
-                                        <TooltipWrapper side="top" :content="t('dialog.group.info.url_tooltip')">
-                                            <Button
-                                                class="rounded-full ml-1 text-xs"
-                                                size="icon-sm"
-                                                variant="outline"
-                                                @click="copyToClipboard(groupDialog.ref.$url)"
-                                                ><Copy class="h-4 w-4" />
-                                            </Button> </TooltipWrapper
-                                    ></span>
-                                </div>
-                            </div>
-                            <div class="x-friend-item w-1/2" style="cursor: default; width: 50%">
-                                <div class="detail">
-                                    <span class="name">{{ t('dialog.group.info.id') }}</span>
-                                    <span class="extra"
-                                        >{{ groupDialog.id }}
-                                        <TooltipWrapper side="top" :content="t('dialog.group.info.id_tooltip')">
-                                            <Button
-                                                class="rounded-full ml-1 text-xs"
-                                                size="icon-sm"
-                                                variant="outline"
-                                                @click="copyToClipboard(groupDialog.id)"
-                                                ><Copy class="h-4 w-4" />
-                                            </Button> </TooltipWrapper
-                                    ></span>
-                                </div>
-                            </div>
-                        </div>
-                        <div
-                            v-if="groupDialog.ref.membershipStatus === 'member'"
-                            style="width: 100%; margin-top: 10px; border-top: 1px solid #e4e7ed14">
-                            <div style="width: 100%; display: flex; margin-top: 10px">
-                                <div class="x-friend-item" style="cursor: default">
-                                    <div class="detail">
-                                        <span class="name">{{ t('dialog.group.info.joined_at') }}</span>
-                                        <span class="extra">{{
-                                            formatDateFilter(groupDialog.ref.myMember.joinedAt, 'long')
-                                        }}</span>
-                                    </div>
-                                </div>
-                                <div class="x-friend-item" style="cursor: default">
-                                    <div class="detail">
-                                        <span class="name">{{ t('dialog.group.info.roles') }}</span>
-                                        <span v-if="groupDialog.memberRoles.length === 0" class="extra"> - </span>
-                                        <span v-else class="extra">
-                                            <template v-for="(role, rIndex) in groupDialog.memberRoles" :key="rIndex">
-                                                <TooltipWrapper side="top">
-                                                    <template #content>
-                                                        <span>{{ t('dialog.group.info.role') }} {{ role.name }}</span>
-                                                        <br />
-                                                        <span
-                                                            >{{ t('dialog.group.info.role_description') }}
-                                                            {{ role.description }}</span
-                                                        >
-                                                        <br />
-                                                        <span v-if="role.updatedAt"
-                                                            >{{ t('dialog.group.info.role_updated_at') }}
-                                                            {{ formatDateFilter(role.updatedAt, 'long') }}</span
-                                                        >
-                                                        <span v-else
-                                                            >{{ t('dialog.group.info.role_created_at') }}
-                                                            {{ formatDateFilter(role.createdAt, 'long') }}</span
-                                                        >
-                                                        <br />
-                                                        <span>{{ t('dialog.group.info.role_permissions') }}</span>
-                                                        <br />
-                                                        <template
-                                                            v-for="(permission, pIndex) in role.permissions"
-                                                            :key="pIndex">
-                                                            <span>{{ permission }}</span>
-                                                            <br />
-                                                        </template>
-                                                    </template>
-                                                    <span
-                                                        >{{ role.name
-                                                        }}{{
-                                                            rIndex < groupDialog.memberRoles.length - 1 ? ', ' : ''
-                                                        }}</span
-                                                    >
-                                                </TooltipWrapper>
-                                            </template>
-                                        </span>
-                                    </div>
-                                </div>
-                            </div>
+                                </DropdownMenuContent>
+                            </DropdownMenu>
                         </div>
                     </div>
-                </template>
-                <template #Posts>
-                    <template v-if="groupDialog.visible">
-                        <span style="margin-right: 10px; vertical-align: top"
-                            >{{ t('dialog.group.posts.posts_count') }} {{ groupDialog.posts.length }}</span
-                        >
-                        <InputGroupField
-                            v-model="groupDialog.postsSearch"
-                            clearable
-                            size="sm"
-                            :placeholder="t('dialog.group.posts.search_placeholder')"
-                            style="width: 89%; margin-bottom: 10px"
-                            @input="updateGroupPostSearch" />
-                        <div class="x-friend-list">
-                            <div
-                                v-for="post in groupDialog.postsFiltered"
-                                :key="post.id"
-                                class="x-friend-item"
-                                style="width: 100%; cursor: default">
+                </div>
+                <TabsUnderline
+                    v-model="groupDialogLastActiveTab"
+                    :items="groupDialogTabs"
+                    :unmount-on-hide="false"
+                    @update:modelValue="groupDialogTabClick">
+                    <template #Info>
+                        <div class="group-banner-image-info">
+                            <img
+                                :src="groupDialog.ref.bannerUrl"
+                                class="x-link"
+                                style="
+                                    flex: none;
+                                    width: 100%;
+                                    aspect-ratio: 6/1;
+                                    object-fit: cover;
+                                    border-radius: 4px;
+                                "
+                                @click="showFullscreenImageDialog(groupDialog.ref.bannerUrl)"
+                                loading="lazy" />
+                        </div>
+                        <div class="x-friend-list" style="max-height: none">
+                            <span
+                                v-if="groupDialog.instances.length"
+                                style="font-size: 12px; font-weight: bold; margin: 5px">
+                                {{ t('dialog.group.info.instances') }}
+                            </span>
+                            <div v-for="room in groupDialog.instances" :key="room.tag" style="width: 100%">
+                                <div style="margin: 5px 0">
+                                    <Location :location="room.tag" style="display: inline-block" />
+                                    <InviteYourself :location="room.tag" style="margin-left: 5px" />
+                                    <TooltipWrapper side="top" content="RefreshCw player count">
+                                        <Button
+                                            class="rounded-full ml-1 w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
+                                            size="icon"
+                                            variant="outline"
+                                            @click="refreshInstancePlayerCount(room.tag)"
+                                            ><RefreshCw class="h-4 w-4" />
+                                        </Button>
+                                    </TooltipWrapper>
+                                    <LastJoin :location="room.tag" :currentlocation="lastLocation.location" />
+                                    <InstanceInfo
+                                        :location="room.tag"
+                                        :instance="room.ref"
+                                        :friendcount="room.friendCount" />
+                                </div>
+                                <div
+                                    v-if="room.users.length"
+                                    class="x-friend-list"
+                                    style="margin: 10px 0; padding: 0; max-height: unset">
+                                    <div
+                                        v-for="user in room.users"
+                                        :key="user.id"
+                                        class="x-friend-item x-friend-item-border"
+                                        @click="showUserDialog(user.id)">
+                                        <div class="avatar" :class="userStatusClass(user)">
+                                            <img :src="userImage(user)" loading="lazy" />
+                                        </div>
+                                        <div class="detail">
+                                            <span
+                                                class="name"
+                                                :style="{ color: user.$userColour }"
+                                                v-text="user.displayName" />
+                                            <span v-if="user.location === 'traveling'" class="extra">
+                                                <Loader2 class="is-loading" style="margin-right: 3px" />
+                                                <Timer :epoch="user.$travelingToTime" />
+                                            </span>
+                                            <span v-else class="extra">
+                                                <Timer :epoch="user.$location_at" />
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="x-friend-item" style="width: 100%; cursor: default">
                                 <div class="detail">
-                                    <span style="display: block" v-text="post.title" />
-                                    <div v-if="post.imageUrl" style="display: inline-block; margin-right: 5px">
+                                    <span class="name">{{ t('dialog.group.info.announcement') }}</span>
+                                    <span style="display: block" v-text="groupDialog.announcement.title" />
+                                    <div
+                                        v-if="groupDialog.announcement.imageUrl"
+                                        style="display: inline-block; margin-right: 5px">
                                         <img
-                                            :src="post.imageUrl"
+                                            :src="groupDialog.announcement.imageUrl"
                                             class="x-link"
                                             style="
                                                 flex: none;
@@ -742,7 +432,7 @@
                                                 border-radius: 4px;
                                                 object-fit: cover;
                                             "
-                                            @click="showFullscreenImageDialog(post.imageUrl)"
+                                            @click="showFullscreenImageDialog(groupDialog.announcement.imageUrl)"
                                             loading="lazy" />
                                     </div>
                                     <pre
@@ -755,377 +445,728 @@
                                             white-space: pre-wrap;
                                             margin: 0;
                                         "
-                                        >{{ post.text || '-' }}</pre
+                                        >{{ groupDialog.announcement.text || '-' }}</pre
                                     >
                                     <br />
-                                    <div v-if="post.authorId" class="extra" style="float: right; margin-left: 5px">
-                                        <TooltipWrapper v-if="post.roleIds.length" side="top">
+                                    <div
+                                        v-if="groupDialog.announcement.id"
+                                        class="extra"
+                                        style="float: right; margin-left: 5px">
+                                        <TooltipWrapper v-if="groupDialog.announcement.roleIds.length" side="top">
                                             <template #content>
                                                 <span>{{ t('dialog.group.posts.visibility') }}</span>
                                                 <br />
-                                                <template v-for="roleId in post.roleIds" :key="roleId">
+                                                <template
+                                                    v-for="roleId in groupDialog.announcement.roleIds"
+                                                    :key="roleId">
                                                     <template
                                                         v-for="role in groupDialog.ref.roles"
-                                                        :key="role.id + roleId"
-                                                        ><span v-if="role.id === roleId" v-text="role.name" />
-                                                    </template>
-                                                    <template
-                                                        v-if="post.roleIds.indexOf(roleId) < post.roleIds.length - 1"
-                                                        ><span>,&nbsp;</span></template
-                                                    >
+                                                        :key="roleId + role.id"
+                                                        ><span v-if="role.id === roleId" v-text="role.name"
+                                                    /></template>
+                                                    <span
+                                                        v-if="
+                                                            groupDialog.announcement.roleIds.indexOf(roleId) <
+                                                            groupDialog.announcement.roleIds.length - 1
+                                                        ">
+                                                        ,&nbsp;
+                                                    </span>
                                                 </template>
                                             </template>
                                             <Eye style="margin-right: 5px" />
                                         </TooltipWrapper>
-                                        <DisplayName :userid="post.authorId" style="margin-right: 5px" />
-                                        <span v-if="post.editorId" style="margin-right: 5px"
-                                            >({{ t('dialog.group.posts.edited_by') }}
-                                            <DisplayName :userid="post.editorId" />)</span
-                                        >
+                                        <DisplayName
+                                            :userid="groupDialog.announcement.authorId"
+                                            style="margin-right: 5px" />
+                                        <span v-if="groupDialog.announcement.editorId" style="margin-right: 5px">
+                                            ({{ t('dialog.group.posts.edited_by') }}
+                                            <DisplayName :userid="groupDialog.announcement.editorId" />)
+                                        </span>
                                         <TooltipWrapper side="bottom">
                                             <template #content>
                                                 <span
                                                     >{{ t('dialog.group.posts.created_at') }}
-                                                    {{ formatDateFilter(post.createdAt, 'long') }}</span
+                                                    {{
+                                                        formatDateFilter(groupDialog.announcement.createdAt, 'long')
+                                                    }}</span
                                                 >
-                                                <template v-if="post.updatedAt !== post.createdAt">
+                                                <template
+                                                    v-if="
+                                                        groupDialog.announcement.updatedAt !==
+                                                        groupDialog.announcement.createdAt
+                                                    ">
                                                     <br />
                                                     <span
                                                         >{{ t('dialog.group.posts.edited_at') }}
-                                                        {{ formatDateFilter(post.updatedAt, 'long') }}</span
+                                                        {{
+                                                            formatDateFilter(groupDialog.announcement.updatedAt, 'long')
+                                                        }}</span
                                                     >
                                                 </template>
                                             </template>
-                                            <Timer :epoch="Date.parse(post.updatedAt)" />
+                                            <Timer :epoch="Date.parse(groupDialog.announcement.updatedAt)" />
                                         </TooltipWrapper>
                                         <template
                                             v-if="hasGroupPermission(groupDialog.ref, 'group-announcement-manage')">
                                             <TooltipWrapper side="top" :content="t('dialog.group.posts.edit_tooltip')">
                                                 <Button
-                                                    size="icon-sm"
-                                                    class="h-6 w-6 text-xs text-muted-foreground hover:text-foreground"
+                                                    size="sm"
                                                     variant="ghost"
-                                                    @click="showGroupPostEditDialog(groupDialog.id, post)"
-                                                    ><Pencil class="h-4 w-4" />
-                                                </Button>
+                                                    style="margin-left: 5px; padding: 0"
+                                                    @click="
+                                                        showGroupPostEditDialog(
+                                                            groupDialog.id,
+                                                            groupDialog.announcement
+                                                        )
+                                                    "></Button>
                                             </TooltipWrapper>
                                             <TooltipWrapper
                                                 side="top"
                                                 :content="t('dialog.group.posts.delete_tooltip')">
                                                 <Button
-                                                    size="icon-sm"
-                                                    class="h-6 w-6 text-xs text-muted-foreground hover:text-foreground"
+                                                    size="sm"
                                                     variant="ghost"
-                                                    @click="confirmDeleteGroupPost(post)"
-                                                    ><Trash2 class="h-4 w-4" />
-                                                </Button>
+                                                    style="margin-left: 5px; padding: 0"
+                                                    @click="confirmDeleteGroupPost(groupDialog.announcement)"></Button>
                                             </TooltipWrapper>
                                         </template>
                                     </div>
                                 </div>
                             </div>
-                        </div>
-                    </template>
-                </template>
-                <template #Members>
-                    <template v-if="groupDialog.visible">
-                        <span
-                            v-if="hasGroupPermission(groupDialog.ref, 'group-members-viewall')"
-                            style="font-weight: bold; font-size: 16px"
-                            >{{ t('dialog.group.members.all_members') }}</span
-                        >
-                        <span v-else style="font-weight: bold; font-size: 16px">{{
-                            t('dialog.group.members.friends_only')
-                        }}</span>
-                        <div style="margin-top: 10px">
-                            <Button
-                                class="rounded-full h-6 w-6"
-                                variant="outline"
-                                size="icon-sm"
-                                :loading="isGroupMembersLoading"
-                                circle
-                                @click="loadAllGroupMembers">
-                                <Spinner v-if="isGroupMembersLoading" /><RefreshCcw v-else
-                            /></Button>
-                            <Button
-                                class="rounded-full h-6 w-6 ml-2"
-                                size="icon-sm"
-                                variant="outline"
-                                style="margin-left: 5px"
-                                @click="downloadAndSaveJson(`${groupDialog.id}_members`, groupDialog.members)">
-                                <Download class="h-4 w-4" />
-                            </Button>
-                            <span
-                                v-if="groupDialog.memberSearch.length"
-                                style="font-size: 14px; margin-left: 5px; margin-right: 5px"
-                                >{{ groupDialog.memberSearchResults.length }}/{{ groupDialog.ref.memberCount }}</span
-                            >
-                            <span v-else style="font-size: 14px; margin-left: 5px; margin-right: 5px"
-                                >{{ groupDialog.members.length }}/{{ groupDialog.ref.memberCount }}</span
-                            >
-                            <div
-                                v-if="hasGroupPermission(groupDialog.ref, 'group-members-manage')"
-                                style="float: right"
-                                class="flex items-center">
-                                <span style="margin-right: 5px">{{ t('dialog.group.members.sort_by') }}</span>
-                                <Select
-                                    v-model="groupDialogMemberSortValue"
-                                    :disabled="isGroupMembersLoading || groupDialog.memberSearch.length > 0">
-                                    <SelectTrigger class="h-8 w-45 mr-1">
-                                        <SelectValue :placeholder="t('dialog.group.members.sort_by')" />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                        <SelectItem
-                                            v-for="item in groupDialogSortingOptions"
-                                            :key="item.value"
-                                            :value="item.value">
-                                            {{ t(item.name) }}
-                                        </SelectItem>
-                                    </SelectContent>
-                                </Select>
-                                <span class="ml-2 mr-1">{{ t('dialog.group.members.filter') }}</span>
-                                <div style="display: inline-block; width: 220px">
-                                    <VirtualCombobox
-                                        v-model="groupDialogMemberFilterKey"
-                                        :groups="groupDialogMemberFilterGroups"
-                                        :disabled="isGroupMembersLoading || groupDialog.memberSearch.length > 0"
-                                        :placeholder="t('dialog.group.members.filter')"
-                                        :search-placeholder="t('dialog.group.members.search')"
-                                        :clearable="false"
-                                        :close-on-select="true">
-                                        <template #trigger="{ text }">
-                                            <span class="truncate">
-                                                {{ text || t('dialog.group.members.filter') }}
-                                            </span>
-                                        </template>
-                                    </VirtualCombobox>
+                            <div class="x-friend-item" style="width: 100%; cursor: default">
+                                <div class="detail">
+                                    <span class="name">{{ t('dialog.group.info.rules') }}</span>
+                                    <pre
+                                        class="extra"
+                                        style="
+                                            font-family: inherit;
+                                            font-size: 12px;
+                                            white-space: pre-wrap;
+                                            margin: 0 0.5em 0 0;
+                                        "
+                                        >{{ groupDialog.ref.rules || '-' }}</pre
+                                    >
                                 </div>
                             </div>
+                            <div class="x-friend-item x-friend-item-no-hover" style="width: 100%; cursor: default">
+                                <div class="detail" style="overflow: visible">
+                                    <span class="name">{{ t('dialog.group.info.upcoming_events') }}</span>
+                                    <template v-if="upcomingCalenderEvents.length > 0">
+                                        <br />
+                                        <div class="grid-view events-row">
+                                            <GroupCalendarEventCard
+                                                v-for="value in upcomingCalenderEvents"
+                                                :key="value.id"
+                                                :event="value"
+                                                :is-following="value.userInterest?.isFollowing"
+                                                @update-following-calendar-data="updateFollowingCalendarData"
+                                                mode="grid"
+                                                card-class="group-dialog-grid-card" />
+                                        </div>
+                                    </template>
+                                    <span v-else class="extra">-</span>
+                                </div>
+                            </div>
+                            <div class="x-friend-item x-friend-item-no-hover" style="width: 100%; cursor: default">
+                                <div class="detail" style="overflow: visible">
+                                    <span class="name">{{ t('dialog.group.info.past_events') }}</span>
+                                    <template v-if="pastCalenderEvents.length > 0">
+                                        <br />
+                                        <div class="grid-view events-row">
+                                            <GroupCalendarEventCard
+                                                v-for="value in pastCalenderEvents"
+                                                :key="value.id"
+                                                :event="value"
+                                                :is-following="value.userInterest?.isFollowing"
+                                                @update-following-calendar-data="updateFollowingCalendarData"
+                                                mode="grid"
+                                                card-class="group-dialog-grid-card" />
+                                        </div>
+                                    </template>
+                                    <span v-else class="extra">-</span>
+                                </div>
+                            </div>
+                            <div class="x-friend-item" style="cursor: default">
+                                <div class="detail">
+                                    <span class="name">{{ t('dialog.group.info.members') }}</span>
+                                    <div class="extra">
+                                        {{ groupDialog.ref.memberCount }} ({{ groupDialog.ref.onlineMemberCount }})
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="x-friend-item" style="cursor: default">
+                                <div class="detail">
+                                    <span class="name">{{ t('dialog.group.info.created_at') }}</span>
+                                    <span class="extra">{{ formatDateFilter(groupDialog.ref.createdAt, 'long') }}</span>
+                                </div>
+                            </div>
+                            <TooltipWrapper side="top" :content="t('dialog.user.info.open_previous_instance')">
+                                <div class="x-friend-item" @click="showPreviousInstancesGroupDialog(groupDialog.ref)">
+                                    <div class="detail">
+                                        <span class="name">
+                                            {{ t('dialog.group.info.last_visited') }}
+                                            <TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
+                                                <AlertTriangle style="margin-left: 3px" />
+                                            </TooltipWrapper>
+                                        </span>
+                                        <span class="extra">{{ formatDateFilter(groupDialog.lastVisit, 'long') }}</span>
+                                    </div>
+                                </div>
+                            </TooltipWrapper>
+                            <div class="x-friend-item" style="cursor: default">
+                                <div class="detail">
+                                    <span class="name">{{ t('dialog.group.info.links') }}</span>
+                                    <div
+                                        v-if="groupDialog.ref.links && groupDialog.ref.links.length > 0"
+                                        style="margin-top: 5px"
+                                        class="flex">
+                                        <template v-for="(link, index) in groupDialog.ref.links" :key="index">
+                                            <TooltipWrapper v-if="link">
+                                                <template #content>
+                                                    <span v-text="link" />
+                                                </template>
+                                                <img
+                                                    :src="getFaviconUrl(link)"
+                                                    style="
+                                                        width: 16px;
+                                                        height: 16px;
+                                                        vertical-align: middle;
+                                                        margin-right: 5px;
+                                                        cursor: pointer;
+                                                    "
+                                                    @click.stop="openExternalLink(link)"
+                                                    loading="lazy" />
+                                            </TooltipWrapper>
+                                        </template>
+                                    </div>
+                                    <div v-else class="extra">-</div>
+                                </div>
+                            </div>
+                            <div class="inline-flex justify-between w-full">
+                                <div class="x-friend-item" style="cursor: default; width: 50%">
+                                    <div class="detail">
+                                        <span class="name">{{ t('dialog.group.info.url') }}</span>
+                                        <span class="extra"
+                                            >{{ groupDialog.ref.$url }}
+                                            <TooltipWrapper side="top" :content="t('dialog.group.info.url_tooltip')">
+                                                <Button
+                                                    class="rounded-full ml-1 text-xs"
+                                                    size="icon-sm"
+                                                    variant="outline"
+                                                    @click="copyToClipboard(groupDialog.ref.$url)"
+                                                    ><Copy class="h-4 w-4" />
+                                                </Button> </TooltipWrapper
+                                        ></span>
+                                    </div>
+                                </div>
+                                <div class="x-friend-item w-1/2" style="cursor: default; width: 50%">
+                                    <div class="detail">
+                                        <span class="name">{{ t('dialog.group.info.id') }}</span>
+                                        <span class="extra"
+                                            >{{ groupDialog.id }}
+                                            <TooltipWrapper side="top" :content="t('dialog.group.info.id_tooltip')">
+                                                <Button
+                                                    class="rounded-full ml-1 text-xs"
+                                                    size="icon-sm"
+                                                    variant="outline"
+                                                    @click="copyToClipboard(groupDialog.id)"
+                                                    ><Copy class="h-4 w-4" />
+                                                </Button> </TooltipWrapper
+                                        ></span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div
+                                v-if="groupDialog.ref.membershipStatus === 'member'"
+                                style="width: 100%; margin-top: 10px; border-top: 1px solid #e4e7ed14">
+                                <div style="width: 100%; display: flex; margin-top: 10px">
+                                    <div class="x-friend-item" style="cursor: default">
+                                        <div class="detail">
+                                            <span class="name">{{ t('dialog.group.info.joined_at') }}</span>
+                                            <span class="extra">{{
+                                                formatDateFilter(groupDialog.ref.myMember.joinedAt, 'long')
+                                            }}</span>
+                                        </div>
+                                    </div>
+                                    <div class="x-friend-item" style="cursor: default">
+                                        <div class="detail">
+                                            <span class="name">{{ t('dialog.group.info.roles') }}</span>
+                                            <span v-if="groupDialog.memberRoles.length === 0" class="extra"> - </span>
+                                            <span v-else class="extra">
+                                                <template
+                                                    v-for="(role, rIndex) in groupDialog.memberRoles"
+                                                    :key="rIndex">
+                                                    <TooltipWrapper side="top">
+                                                        <template #content>
+                                                            <span
+                                                                >{{ t('dialog.group.info.role') }} {{ role.name }}</span
+                                                            >
+                                                            <br />
+                                                            <span
+                                                                >{{ t('dialog.group.info.role_description') }}
+                                                                {{ role.description }}</span
+                                                            >
+                                                            <br />
+                                                            <span v-if="role.updatedAt"
+                                                                >{{ t('dialog.group.info.role_updated_at') }}
+                                                                {{ formatDateFilter(role.updatedAt, 'long') }}</span
+                                                            >
+                                                            <span v-else
+                                                                >{{ t('dialog.group.info.role_created_at') }}
+                                                                {{ formatDateFilter(role.createdAt, 'long') }}</span
+                                                            >
+                                                            <br />
+                                                            <span>{{ t('dialog.group.info.role_permissions') }}</span>
+                                                            <br />
+                                                            <template
+                                                                v-for="(permission, pIndex) in role.permissions"
+                                                                :key="pIndex">
+                                                                <span>{{ permission }}</span>
+                                                                <br />
+                                                            </template>
+                                                        </template>
+                                                        <span
+                                                            >{{ role.name
+                                                            }}{{
+                                                                rIndex < groupDialog.memberRoles.length - 1 ? ', ' : ''
+                                                            }}</span
+                                                        >
+                                                    </TooltipWrapper>
+                                                </template>
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                    <template #Posts>
+                        <template v-if="groupDialog.visible">
+                            <span style="margin-right: 10px; vertical-align: top"
+                                >{{ t('dialog.group.posts.posts_count') }} {{ groupDialog.posts.length }}</span
+                            >
                             <InputGroupField
-                                v-model="groupDialog.memberSearch"
-                                :disabled="!hasGroupPermission(groupDialog.ref, 'group-members-manage')"
+                                v-model="groupDialog.postsSearch"
                                 clearable
                                 size="sm"
-                                :placeholder="t('dialog.group.members.search')"
-                                style="margin-top: 10px; margin-bottom: 10px"
-                                @input="groupMembersSearch" />
-                        </div>
-                        <div
-                            v-if="groupDialog.memberSearch.length"
-                            v-loading="isGroupMembersLoading"
-                            class="x-friend-list"
-                            style="margin-top: 10px; overflow: auto; max-height: 250px; min-width: 130px">
-                            <div
-                                v-for="user in groupDialog.memberSearchResults"
-                                :key="user.id"
-                                class="x-friend-item x-friend-item-border"
-                                @click="showUserDialog(user.userId)">
-                                <div class="avatar">
-                                    <img :src="userImage(user.user)" loading="lazy" />
-                                </div>
-                                <div class="detail">
-                                    <span
-                                        class="name"
-                                        :style="{ color: user.user?.$userColour }"
-                                        v-text="user.user?.displayName" />
-                                    <span class="extra">
-                                        <template v-if="hasGroupPermission(groupDialog.ref, 'group-members-manage')">
-                                            <TooltipWrapper
-                                                v-if="user.isRepresenting"
-                                                side="top"
-                                                :content="t('dialog.group.members.representing')">
-                                                <Tag style="margin-right: 5px" />
-                                            </TooltipWrapper>
-                                            <TooltipWrapper v-if="user.visibility !== 'visible'" side="top">
+                                :placeholder="t('dialog.group.posts.search_placeholder')"
+                                style="width: 89%; margin-bottom: 10px"
+                                @input="updateGroupPostSearch" />
+                            <div class="x-friend-list">
+                                <div
+                                    v-for="post in groupDialog.postsFiltered"
+                                    :key="post.id"
+                                    class="x-friend-item"
+                                    style="width: 100%; cursor: default">
+                                    <div class="detail">
+                                        <span style="display: block" v-text="post.title" />
+                                        <div v-if="post.imageUrl" style="display: inline-block; margin-right: 5px">
+                                            <img
+                                                :src="post.imageUrl"
+                                                class="x-link"
+                                                style="
+                                                    flex: none;
+                                                    width: 60px;
+                                                    height: 60px;
+                                                    border-radius: 4px;
+                                                    object-fit: cover;
+                                                "
+                                                @click="showFullscreenImageDialog(post.imageUrl)"
+                                                loading="lazy" />
+                                        </div>
+                                        <pre
+                                            class="extra"
+                                            style="
+                                                display: inline-block;
+                                                vertical-align: top;
+                                                font-family: inherit;
+                                                font-size: 12px;
+                                                white-space: pre-wrap;
+                                                margin: 0;
+                                            "
+                                            >{{ post.text || '-' }}</pre
+                                        >
+                                        <br />
+                                        <div v-if="post.authorId" class="extra" style="float: right; margin-left: 5px">
+                                            <TooltipWrapper v-if="post.roleIds.length" side="top">
                                                 <template #content>
-                                                    <span
-                                                        >{{ t('dialog.group.members.visibility') }}
-                                                        {{ user.visibility }}</span
-                                                    >
+                                                    <span>{{ t('dialog.group.posts.visibility') }}</span>
+                                                    <br />
+                                                    <template v-for="roleId in post.roleIds" :key="roleId">
+                                                        <template
+                                                            v-for="role in groupDialog.ref.roles"
+                                                            :key="role.id + roleId"
+                                                            ><span v-if="role.id === roleId" v-text="role.name" />
+                                                        </template>
+                                                        <template
+                                                            v-if="
+                                                                post.roleIds.indexOf(roleId) < post.roleIds.length - 1
+                                                            "
+                                                            ><span>,&nbsp;</span></template
+                                                        >
+                                                    </template>
                                                 </template>
                                                 <Eye style="margin-right: 5px" />
                                             </TooltipWrapper>
-                                            <TooltipWrapper
-                                                v-if="!user.isSubscribedToAnnouncements"
-                                                side="top"
-                                                :content="t('dialog.group.members.unsubscribed_announcements')">
-                                                <MessageSquare style="margin-right: 5px" />
-                                            </TooltipWrapper>
-                                            <TooltipWrapper v-if="user.managerNotes" side="top">
-                                                <template #content>
-                                                    <span>{{ t('dialog.group.members.manager_notes') }}</span>
-                                                    <br />
-                                                    <span>{{ user.managerNotes }}</span>
-                                                </template>
-                                                <Pencil style="margin-right: 5px" />
-                                            </TooltipWrapper>
-                                        </template>
-                                        <template v-for="roleId in user.roleIds" :key="roleId">
-                                            <template v-for="role in groupDialog.ref.roles" :key="role.id + roleId"
-                                                ><span v-if="role.id === roleId" v-text="role.name" /></template
-                                            ><template v-if="user.roleIds.indexOf(roleId) < user.roleIds.length - 1"
-                                                ><span>,&nbsp;</span></template
+                                            <DisplayName :userid="post.authorId" style="margin-right: 5px" />
+                                            <span v-if="post.editorId" style="margin-right: 5px"
+                                                >({{ t('dialog.group.posts.edited_by') }}
+                                                <DisplayName :userid="post.editorId" />)</span
                                             >
-                                        </template>
-                                    </span>
-                                </div>
-                            </div>
-                        </div>
-                        <ul
-                            v-else-if="groupDialog.members.length > 0"
-                            v-infinite-scroll="loadMoreGroupMembers"
-                            class="infinite-list x-friend-list"
-                            style="margin-top: 10px; overflow: auto; max-height: 250px; min-width: 130px">
-                            <li
-                                v-for="user in groupDialog.members"
-                                :key="user.id"
-                                class="infinite-list-item x-friend-item x-friend-item-border"
-                                @click="showUserDialog(user.userId)">
-                                <div class="avatar">
-                                    <img :src="userImage(user.user)" loading="lazy" />
-                                </div>
-                                <div class="detail">
-                                    <span
-                                        class="name"
-                                        :style="{ color: user.user?.$userColour }"
-                                        v-text="user.user?.displayName" />
-                                    <span class="extra">
-                                        <template v-if="hasGroupPermission(groupDialog.ref, 'group-members-manage')">
-                                            <TooltipWrapper
-                                                v-if="user.isRepresenting"
-                                                side="top"
-                                                :content="t('dialog.group.members.representing')">
-                                                <Tag style="margin-right: 5px" />
-                                            </TooltipWrapper>
-                                            <TooltipWrapper v-if="user.visibility !== 'visible'" side="top">
+                                            <TooltipWrapper side="bottom">
                                                 <template #content>
                                                     <span
-                                                        >{{ t('dialog.group.members.visibility') }}
-                                                        {{ user.visibility }}</span
+                                                        >{{ t('dialog.group.posts.created_at') }}
+                                                        {{ formatDateFilter(post.createdAt, 'long') }}</span
                                                     >
+                                                    <template v-if="post.updatedAt !== post.createdAt">
+                                                        <br />
+                                                        <span
+                                                            >{{ t('dialog.group.posts.edited_at') }}
+                                                            {{ formatDateFilter(post.updatedAt, 'long') }}</span
+                                                        >
+                                                    </template>
                                                 </template>
-                                                <Eye style="margin-right: 5px" />
+                                                <Timer :epoch="Date.parse(post.updatedAt)" />
                                             </TooltipWrapper>
-                                            <TooltipWrapper
-                                                v-if="!user.isSubscribedToAnnouncements"
-                                                side="top"
-                                                :content="t('dialog.group.members.unsubscribed_announcements')">
-                                                <MessageSquare style="margin-right: 5px" />
-                                            </TooltipWrapper>
-                                            <TooltipWrapper v-if="user.managerNotes" side="top">
-                                                <template #content>
-                                                    <span>{{ t('dialog.group.members.manager_notes') }}</span>
-                                                    <br />
-                                                    <span>{{ user.managerNotes }}</span>
-                                                </template>
-                                                <Pencil style="margin-right: 5px" />
-                                            </TooltipWrapper>
-                                        </template>
-                                        <template v-for="roleId in user.roleIds" :key="roleId">
-                                            <template v-for="role in groupDialog.ref.roles" :key="roleId + role.id"
-                                                ><span v-if="role.id === roleId" v-text="role.name" /></template
-                                            ><template v-if="user.roleIds.indexOf(roleId) < user.roleIds.length - 1"
-                                                ><span>&nbsp;</span></template
-                                            >
-                                        </template>
-                                    </span>
-                                </div>
-                            </li>
-                            <div
-                                v-if="!isGroupMembersDone"
-                                v-loading="isGroupMembersLoading"
-                                class="x-friend-item"
-                                style="width: 100%; height: 45px; text-align: center"
-                                @click="loadMoreGroupMembers">
-                                <div v-if="!isGroupMembersLoading" class="detail">
-                                    <span class="name">{{ t('dialog.group.members.load_more') }}</span>
+                                            <template
+                                                v-if="hasGroupPermission(groupDialog.ref, 'group-announcement-manage')">
+                                                <TooltipWrapper
+                                                    side="top"
+                                                    :content="t('dialog.group.posts.edit_tooltip')">
+                                                    <Button
+                                                        size="icon-sm"
+                                                        class="h-6 w-6 text-xs text-muted-foreground hover:text-foreground"
+                                                        variant="ghost"
+                                                        @click="showGroupPostEditDialog(groupDialog.id, post)"
+                                                        ><Pencil class="h-4 w-4" />
+                                                    </Button>
+                                                </TooltipWrapper>
+                                                <TooltipWrapper
+                                                    side="top"
+                                                    :content="t('dialog.group.posts.delete_tooltip')">
+                                                    <Button
+                                                        size="icon-sm"
+                                                        class="h-6 w-6 text-xs text-muted-foreground hover:text-foreground"
+                                                        variant="ghost"
+                                                        @click="confirmDeleteGroupPost(post)"
+                                                        ><Trash2 class="h-4 w-4" />
+                                                    </Button>
+                                                </TooltipWrapper>
+                                            </template>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
-                        </ul>
+                        </template>
                     </template>
-                </template>
-                <template #Photos>
-                    <Button
-                        class="rounded-full"
-                        variant="outline"
-                        size="icon-sm"
-                        :disabled="isGroupGalleryLoading"
-                        @click="getGroupGalleries">
-                        <Spinner v-if="isGroupGalleryLoading" />
-                        <RefreshCw v-else />
-                    </Button>
-                    <TabsUnderline
-                        v-model="groupDialogGalleryCurrentName"
-                        :items="groupGalleryTabs"
-                        :unmount-on-hide="false"
-                        v-loading="isGroupGalleryLoading"
-                        class="mt-2.5">
-                        <template
-                            v-for="(gallery, index) in groupDialog.ref.galleries"
-                            :key="`label-${index}`"
-                            v-slot:[`label-${index}`]>
-                            <span style="font-weight: bold; font-size: 16px" v-text="gallery.name" />
-                            <i class="x-status-icon" style="margin-left: 5px" :class="groupGalleryStatus(gallery)" />
-                            <span style="color: #909399; font-size: 12px; margin-left: 5px">{{
-                                groupDialog.galleries[gallery.id] ? groupDialog.galleries[gallery.id].length : 0
+                    <template #Members>
+                        <template v-if="groupDialog.visible">
+                            <span
+                                v-if="hasGroupPermission(groupDialog.ref, 'group-members-viewall')"
+                                style="font-weight: bold; font-size: 16px"
+                                >{{ t('dialog.group.members.all_members') }}</span
+                            >
+                            <span v-else style="font-weight: bold; font-size: 16px">{{
+                                t('dialog.group.members.friends_only')
                             }}</span>
-                        </template>
-                        <template
-                            v-for="(gallery, index) in groupDialog.ref.galleries"
-                            :key="`content-${index}`"
-                            v-slot:[String(index)]>
-                            <span style="color: #c7c7c7; padding: 10px" v-text="gallery.description" />
-                            <div
-                                style="
-                                    display: grid;
-                                    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-                                    gap: 15px;
-                                    margin-top: 10px;
-                                    max-height: 600px;
-                                    overflow-y: auto;
-                                ">
-                                <Card
-                                    v-for="image in groupDialog.galleries[gallery.id]"
-                                    :key="image.id"
-                                    class="p-0 overflow-hidden transition-shadow hover:shadow-md">
-                                    <img
-                                        :src="image.imageUrl"
-                                        :class="['x-link', 'x-popover-image']"
-                                        @click="showFullscreenImageDialog(image.imageUrl)"
-                                        loading="lazy" />
-                                </Card>
+                            <div style="margin-top: 10px">
+                                <Button
+                                    class="rounded-full h-6 w-6"
+                                    variant="outline"
+                                    size="icon-sm"
+                                    :loading="isGroupMembersLoading"
+                                    circle
+                                    @click="loadAllGroupMembers">
+                                    <Spinner v-if="isGroupMembersLoading" /><RefreshCcw v-else
+                                /></Button>
+                                <Button
+                                    class="rounded-full h-6 w-6 ml-2"
+                                    size="icon-sm"
+                                    variant="outline"
+                                    style="margin-left: 5px"
+                                    @click="downloadAndSaveJson(`${groupDialog.id}_members`, groupDialog.members)">
+                                    <Download class="h-4 w-4" />
+                                </Button>
+                                <span
+                                    v-if="groupDialog.memberSearch.length"
+                                    style="font-size: 14px; margin-left: 5px; margin-right: 5px"
+                                    >{{ groupDialog.memberSearchResults.length }}/{{
+                                        groupDialog.ref.memberCount
+                                    }}</span
+                                >
+                                <span v-else style="font-size: 14px; margin-left: 5px; margin-right: 5px"
+                                    >{{ groupDialog.members.length }}/{{ groupDialog.ref.memberCount }}</span
+                                >
+                                <div
+                                    v-if="hasGroupPermission(groupDialog.ref, 'group-members-manage')"
+                                    style="float: right"
+                                    class="flex items-center">
+                                    <span style="margin-right: 5px">{{ t('dialog.group.members.sort_by') }}</span>
+                                    <Select
+                                        v-model="groupDialogMemberSortValue"
+                                        :disabled="isGroupMembersLoading || groupDialog.memberSearch.length > 0">
+                                        <SelectTrigger class="h-8 w-45 mr-1">
+                                            <SelectValue :placeholder="t('dialog.group.members.sort_by')" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem
+                                                v-for="item in groupDialogSortingOptions"
+                                                :key="item.value"
+                                                :value="item.value">
+                                                {{ t(item.name) }}
+                                            </SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                    <span class="ml-2 mr-1">{{ t('dialog.group.members.filter') }}</span>
+                                    <div style="display: inline-block; width: 220px">
+                                        <VirtualCombobox
+                                            v-model="groupDialogMemberFilterKey"
+                                            :groups="groupDialogMemberFilterGroups"
+                                            :disabled="isGroupMembersLoading || groupDialog.memberSearch.length > 0"
+                                            :placeholder="t('dialog.group.members.filter')"
+                                            :search-placeholder="t('dialog.group.members.search')"
+                                            :clearable="false"
+                                            :close-on-select="true">
+                                            <template #trigger="{ text }">
+                                                <span class="truncate">
+                                                    {{ text || t('dialog.group.members.filter') }}
+                                                </span>
+                                            </template>
+                                        </VirtualCombobox>
+                                    </div>
+                                </div>
+                                <InputGroupField
+                                    v-model="groupDialog.memberSearch"
+                                    :disabled="!hasGroupPermission(groupDialog.ref, 'group-members-manage')"
+                                    clearable
+                                    size="sm"
+                                    :placeholder="t('dialog.group.members.search')"
+                                    style="margin-top: 10px; margin-bottom: 10px"
+                                    @input="groupMembersSearch" />
                             </div>
+                            <div
+                                v-if="groupDialog.memberSearch.length"
+                                v-loading="isGroupMembersLoading"
+                                class="x-friend-list"
+                                style="margin-top: 10px; overflow: auto; max-height: 250px; min-width: 130px">
+                                <div
+                                    v-for="user in groupDialog.memberSearchResults"
+                                    :key="user.id"
+                                    class="x-friend-item x-friend-item-border"
+                                    @click="showUserDialog(user.userId)">
+                                    <div class="avatar">
+                                        <img :src="userImage(user.user)" loading="lazy" />
+                                    </div>
+                                    <div class="detail">
+                                        <span
+                                            class="name"
+                                            :style="{ color: user.user?.$userColour }"
+                                            v-text="user.user?.displayName" />
+                                        <span class="extra">
+                                            <template
+                                                v-if="hasGroupPermission(groupDialog.ref, 'group-members-manage')">
+                                                <TooltipWrapper
+                                                    v-if="user.isRepresenting"
+                                                    side="top"
+                                                    :content="t('dialog.group.members.representing')">
+                                                    <Tag style="margin-right: 5px" />
+                                                </TooltipWrapper>
+                                                <TooltipWrapper v-if="user.visibility !== 'visible'" side="top">
+                                                    <template #content>
+                                                        <span
+                                                            >{{ t('dialog.group.members.visibility') }}
+                                                            {{ user.visibility }}</span
+                                                        >
+                                                    </template>
+                                                    <Eye style="margin-right: 5px" />
+                                                </TooltipWrapper>
+                                                <TooltipWrapper
+                                                    v-if="!user.isSubscribedToAnnouncements"
+                                                    side="top"
+                                                    :content="t('dialog.group.members.unsubscribed_announcements')">
+                                                    <MessageSquare style="margin-right: 5px" />
+                                                </TooltipWrapper>
+                                                <TooltipWrapper v-if="user.managerNotes" side="top">
+                                                    <template #content>
+                                                        <span>{{ t('dialog.group.members.manager_notes') }}</span>
+                                                        <br />
+                                                        <span>{{ user.managerNotes }}</span>
+                                                    </template>
+                                                    <Pencil style="margin-right: 5px" />
+                                                </TooltipWrapper>
+                                            </template>
+                                            <template v-for="roleId in user.roleIds" :key="roleId">
+                                                <template v-for="role in groupDialog.ref.roles" :key="role.id + roleId"
+                                                    ><span v-if="role.id === roleId" v-text="role.name" /></template
+                                                ><template v-if="user.roleIds.indexOf(roleId) < user.roleIds.length - 1"
+                                                    ><span>,&nbsp;</span></template
+                                                >
+                                            </template>
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                            <ul
+                                v-else-if="groupDialog.members.length > 0"
+                                v-infinite-scroll="loadMoreGroupMembers"
+                                class="infinite-list x-friend-list"
+                                style="margin-top: 10px; overflow: auto; max-height: 250px; min-width: 130px">
+                                <li
+                                    v-for="user in groupDialog.members"
+                                    :key="user.id"
+                                    class="infinite-list-item x-friend-item x-friend-item-border"
+                                    @click="showUserDialog(user.userId)">
+                                    <div class="avatar">
+                                        <img :src="userImage(user.user)" loading="lazy" />
+                                    </div>
+                                    <div class="detail">
+                                        <span
+                                            class="name"
+                                            :style="{ color: user.user?.$userColour }"
+                                            v-text="user.user?.displayName" />
+                                        <span class="extra">
+                                            <template
+                                                v-if="hasGroupPermission(groupDialog.ref, 'group-members-manage')">
+                                                <TooltipWrapper
+                                                    v-if="user.isRepresenting"
+                                                    side="top"
+                                                    :content="t('dialog.group.members.representing')">
+                                                    <Tag style="margin-right: 5px" />
+                                                </TooltipWrapper>
+                                                <TooltipWrapper v-if="user.visibility !== 'visible'" side="top">
+                                                    <template #content>
+                                                        <span
+                                                            >{{ t('dialog.group.members.visibility') }}
+                                                            {{ user.visibility }}</span
+                                                        >
+                                                    </template>
+                                                    <Eye style="margin-right: 5px" />
+                                                </TooltipWrapper>
+                                                <TooltipWrapper
+                                                    v-if="!user.isSubscribedToAnnouncements"
+                                                    side="top"
+                                                    :content="t('dialog.group.members.unsubscribed_announcements')">
+                                                    <MessageSquare style="margin-right: 5px" />
+                                                </TooltipWrapper>
+                                                <TooltipWrapper v-if="user.managerNotes" side="top">
+                                                    <template #content>
+                                                        <span>{{ t('dialog.group.members.manager_notes') }}</span>
+                                                        <br />
+                                                        <span>{{ user.managerNotes }}</span>
+                                                    </template>
+                                                    <Pencil style="margin-right: 5px" />
+                                                </TooltipWrapper>
+                                            </template>
+                                            <template v-for="roleId in user.roleIds" :key="roleId">
+                                                <template v-for="role in groupDialog.ref.roles" :key="roleId + role.id"
+                                                    ><span v-if="role.id === roleId" v-text="role.name" /></template
+                                                ><template v-if="user.roleIds.indexOf(roleId) < user.roleIds.length - 1"
+                                                    ><span>&nbsp;</span></template
+                                                >
+                                            </template>
+                                        </span>
+                                    </div>
+                                </li>
+                                <div
+                                    v-if="!isGroupMembersDone"
+                                    v-loading="isGroupMembersLoading"
+                                    class="x-friend-item"
+                                    style="width: 100%; height: 45px; text-align: center"
+                                    @click="loadMoreGroupMembers">
+                                    <div v-if="!isGroupMembersLoading" class="detail">
+                                        <span class="name">{{ t('dialog.group.members.load_more') }}</span>
+                                    </div>
+                                </div>
+                            </ul>
                         </template>
-                    </TabsUnderline>
-                </template>
-                <template #JSON>
-                    <Button
-                        class="rounded-full h-6 w-6 mr-2"
-                        size="icon-sm"
-                        variant="outline"
-                        @click="refreshGroupDialogTreeData()">
-                        <RefreshCcw />
-                    </Button>
-                    <Button
-                        class="rounded-full h-6 w-6"
-                        size="icon-sm"
-                        variant="outline"
-                        @click="downloadAndSaveJson(groupDialog.id, groupDialog.ref)">
-                        <Download />
-                    </Button>
-                    <vue-json-pretty
-                        :data="groupDialog.treeData"
-                        :deep="2"
-                        :theme="isDarkMode ? 'dark' : 'light'"
-                        show-icon />
-                </template>
-            </TabsUnderline>
-        </div>
+                    </template>
+                    <template #Photos>
+                        <Button
+                            class="rounded-full"
+                            variant="outline"
+                            size="icon-sm"
+                            :disabled="isGroupGalleryLoading"
+                            @click="getGroupGalleries">
+                            <Spinner v-if="isGroupGalleryLoading" />
+                            <RefreshCw v-else />
+                        </Button>
+                        <TabsUnderline
+                            v-model="groupDialogGalleryCurrentName"
+                            :items="groupGalleryTabs"
+                            :unmount-on-hide="false"
+                            v-loading="isGroupGalleryLoading"
+                            class="mt-2.5">
+                            <template
+                                v-for="(gallery, index) in groupDialog.ref.galleries"
+                                :key="`label-${index}`"
+                                v-slot:[`label-${index}`]>
+                                <span style="font-weight: bold; font-size: 16px" v-text="gallery.name" />
+                                <i
+                                    class="x-status-icon"
+                                    style="margin-left: 5px"
+                                    :class="groupGalleryStatus(gallery)" />
+                                <span style="color: #909399; font-size: 12px; margin-left: 5px">{{
+                                    groupDialog.galleries[gallery.id] ? groupDialog.galleries[gallery.id].length : 0
+                                }}</span>
+                            </template>
+                            <template
+                                v-for="(gallery, index) in groupDialog.ref.galleries"
+                                :key="`content-${index}`"
+                                v-slot:[String(index)]>
+                                <span style="color: #c7c7c7; padding: 10px" v-text="gallery.description" />
+                                <div
+                                    style="
+                                        display: grid;
+                                        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+                                        gap: 15px;
+                                        margin-top: 10px;
+                                        max-height: 600px;
+                                        overflow-y: auto;
+                                    ">
+                                    <Card
+                                        v-for="image in groupDialog.galleries[gallery.id]"
+                                        :key="image.id"
+                                        class="p-0 overflow-hidden transition-shadow hover:shadow-md">
+                                        <img
+                                            :src="image.imageUrl"
+                                            :class="['x-link', 'x-popover-image']"
+                                            @click="showFullscreenImageDialog(image.imageUrl)"
+                                            loading="lazy" />
+                                    </Card>
+                                </div>
+                            </template>
+                        </TabsUnderline>
+                    </template>
+                    <template #JSON>
+                        <Button
+                            class="rounded-full h-6 w-6 mr-2"
+                            size="icon-sm"
+                            variant="outline"
+                            @click="refreshGroupDialogTreeData()">
+                            <RefreshCcw />
+                        </Button>
+                        <Button
+                            class="rounded-full h-6 w-6"
+                            size="icon-sm"
+                            variant="outline"
+                            @click="downloadAndSaveJson(groupDialog.id, groupDialog.ref)">
+                            <Download />
+                        </Button>
+                        <vue-json-pretty
+                            :data="groupDialog.treeData"
+                            :deep="2"
+                            :theme="isDarkMode ? 'dark' : 'light'"
+                            show-icon />
+                    </template>
+                </TabsUnderline>
+            </div>
+        </DialogContent>
         <GroupPostEditDialog :dialog-data="groupPostEditDialog" :selected-gallery-file="selectedGalleryFile" />
         <PreviousInstancesGroupDialog
             :previous-instances-group-dialog="previousInstancesGroupDialog"
             :current-user="currentUser" />
-    </el-dialog>
+    </Dialog>
 </template>
 
 <script setup>
@@ -1154,6 +1195,7 @@
     } from 'lucide-vue-next';
     import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
     import { computed, nextTick, reactive, ref, watch } from 'vue';
+    import { Dialog, DialogContent } from '@/components/ui/dialog';
     import { Button } from '@/components/ui/button';
     import { Card } from '@/components/ui/card';
     import { InputGroupField } from '@/components/ui/input-group';
@@ -1197,9 +1239,9 @@
         DropdownMenuSeparator,
         DropdownMenuTrigger
     } from '../../ui/dropdown-menu';
-    import { formatJsonVars, getNextDialogIndex } from '../../../shared/utils/base/ui';
     import { groupDialogFilterOptions, groupDialogSortingOptions } from '../../../shared/constants';
     import { Badge } from '../../ui/badge';
+    import { formatJsonVars } from '../../../shared/utils/base/ui';
     import { groupRequest } from '../../../api';
 
     import GroupCalendarEventCard from '../../../views/Tools/components/GroupCalendarEventCard.vue';
@@ -1246,7 +1288,6 @@
     const { isDarkMode } = storeToRefs(useAppearanceSettingsStore());
 
     const groupDialogLastActiveTab = ref('Info');
-    const groupDialogIndex = ref(2000);
     const isGroupMembersDone = ref(false);
     const isGroupMembersLoading = ref(false);
     const groupDialogGalleryCurrentName = ref('0');
@@ -1376,17 +1417,6 @@
         });
     });
 
-    watch(
-        () => groupDialog.value.loading,
-        () => {
-            if (groupDialog.value.visible) {
-                nextTick(() => {
-                    groupDialogIndex.value = getNextDialogIndex();
-                });
-            }
-        }
-    );
-
     watch(
         () => groupDialog.value.isGetGroupDialogGroupLoading,
         (val) => {
diff --git a/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue b/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
index 3e5f4e22..0df5cfdc 100644
--- a/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
@@ -1,532 +1,568 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        v-model="groupMemberModeration.visible"
-        :title="t('dialog.group_member_moderation.header')"
-        append-to-body
-        width="90vw">
-        <div>
-            <h3>{{ groupMemberModeration.groupRef.name }}</h3>
-            <TabsUnderline
-                default-value="members"
-                :items="groupModerationTabs"
-                :unmount-on-hide="false"
-                style="height: 100%">
-                <template #members>
-                    <div style="margin-top: 10px">
-                        <Button
-                            class="rounded-full"
-                            variant="outline"
-                            size="icon-sm"
-                            :disabled="isGroupMembersLoading"
-                            @click="loadAllGroupMembers">
-                            <Spinner v-if="isGroupMembersLoading" />
-                            <RefreshCw v-else />
-                        </Button>
-                        <span style="font-size: 14px; margin-left: 5px; margin-right: 5px">
-                            {{ groupMemberModerationTable.data.length }}/{{
-                                groupMemberModeration.groupRef.memberCount
-                            }}
-                        </span>
-                        <div style="float: right; margin-top: 5px">
-                            <span style="margin-right: 5px">{{ t('dialog.group.members.sort_by') }}</span>
-                            <DropdownMenu>
-                                <DropdownMenuTrigger
-                                    as-child
-                                    :disabled="
-                                        Boolean(
-                                            isGroupMembersLoading ||
-                                            memberSearch.length ||
-                                            !hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')
-                                        )
-                                    ">
-                                    <Button
-                                        size="sm"
-                                        variant="outline"
+    <Dialog v-model:open="groupMemberModeration.visible">
+        <DialogContent class="x-dialog max-w-none w-[90vw]">
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.group_member_moderation.header') }}</DialogTitle>
+            </DialogHeader>
+
+            <div>
+                <h3>{{ groupMemberModeration.groupRef.name }}</h3>
+                <TabsUnderline
+                    default-value="members"
+                    :items="groupModerationTabs"
+                    :unmount-on-hide="false"
+                    style="height: 100%">
+                    <template #members>
+                        <div style="margin-top: 10px">
+                            <Button
+                                class="rounded-full"
+                                variant="outline"
+                                size="icon-sm"
+                                :disabled="isGroupMembersLoading"
+                                @click="loadAllGroupMembers">
+                                <Spinner v-if="isGroupMembersLoading" />
+                                <RefreshCw v-else />
+                            </Button>
+                            <span style="font-size: 14px; margin-left: 5px; margin-right: 5px">
+                                {{ groupMemberModerationTable.data.length }}/{{
+                                    groupMemberModeration.groupRef.memberCount
+                                }}
+                            </span>
+                            <div style="float: right; margin-top: 5px">
+                                <span style="margin-right: 5px">{{ t('dialog.group.members.sort_by') }}</span>
+                                <DropdownMenu>
+                                    <DropdownMenuTrigger
+                                        as-child
                                         :disabled="
                                             Boolean(
                                                 isGroupMembersLoading ||
                                                 memberSearch.length ||
                                                 !hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')
                                             )
-                                        "
-                                        @click.stop>
-                                        <span>
-                                            {{ t(memberSortOrder.name) }}
-                                            <ArrowDown style="margin-left: 5px" />
-                                        </span>
-                                    </Button>
-                                </DropdownMenuTrigger>
-                                <DropdownMenuContent>
-                                    <DropdownMenuItem
-                                        v-for="item in groupDialogSortingOptions"
-                                        :key="item.name"
-                                        @click="setGroupMemberSortOrder(item)">
-                                        {{ t(item.name) }}
-                                    </DropdownMenuItem>
-                                </DropdownMenuContent>
-                            </DropdownMenu>
-                            <span class="ml-2" style="margin-right: 5px">{{ t('dialog.group.members.filter') }}</span>
-                            <DropdownMenu>
-                                <DropdownMenuTrigger
-                                    as-child
-                                    :disabled="
-                                        Boolean(
-                                            isGroupMembersLoading ||
-                                            memberSearch.length ||
-                                            !hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')
-                                        )
-                                    ">
-                                    <Button
-                                        size="sm"
-                                        variant="outline"
-                                        :disabled="
-                                            Boolean(
-                                                isGroupMembersLoading ||
-                                                memberSearch.length ||
-                                                !hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')
-                                            )
-                                        "
-                                        @click.stop>
-                                        <span>
-                                            {{ t(memberFilter.name) }}
-                                            <ArrowDown style="margin-left: 5px" />
-                                        </span>
-                                    </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) }}
+                                        ">
+                                        <Button
+                                            size="sm"
+                                            variant="outline"
+                                            :disabled="
+                                                Boolean(
+                                                    isGroupMembersLoading ||
+                                                    memberSearch.length ||
+                                                    !hasGroupPermission(
+                                                        groupMemberModeration.groupRef,
+                                                        'group-bans-manage'
+                                                    )
+                                                )
+                                            "
+                                            @click.stop>
+                                            <span>
+                                                {{ t(memberSortOrder.name) }}
+                                                <ArrowDown style="margin-left: 5px" />
+                                            </span>
+                                        </Button>
+                                    </DropdownMenuTrigger>
+                                    <DropdownMenuContent>
+                                        <DropdownMenuItem
+                                            v-for="item in groupDialogSortingOptions"
+                                            :key="item.name"
+                                            @click="setGroupMemberSortOrder(item)">
+                                            {{ t(item.name) }}
                                         </DropdownMenuItem>
-                                    </template>
-                                </DropdownMenuContent>
-                            </DropdownMenu>
-                        </div>
-                        <InputGroupField
-                            v-model="memberSearch"
-                            :disabled="!hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')"
-                            clearable
-                            size="sm"
-                            :placeholder="t('dialog.group.members.search')"
-                            style="margin-top: 10px; margin-bottom: 10px"
-                            @input="groupMembersSearch" />
-                        <Button size="sm" variant="outline" @click="selectAllGroupMembers">{{
-                            t('dialog.group_member_moderation.select_all')
-                        }}</Button>
-                        <DataTableLayout
-                            v-if="groupMemberModerationTable.data.length"
-                            style="margin-top: 10px"
-                            :table="groupMemberModerationTanstackTable"
-                            :loading="isGroupMembersLoading"
-                            :page-sizes="pageSizes"
-                            :total-items="groupMemberModerationTotalItems" />
-                    </div>
-                </template>
-
-                <template #bans>
-                    <div style="margin-top: 10px">
-                        <Button
-                            class="rounded-full"
-                            variant="outline"
-                            size="icon-sm"
-                            :disabled="isGroupMembersLoading"
-                            @click="getAllGroupBans(groupMemberModeration.id)">
-                            <Spinner v-if="isGroupMembersLoading" />
-                            <RefreshCw v-else />
-                        </Button>
-                        <span style="font-size: 14px; margin-left: 5px; margin-right: 5px">{{
-                            groupBansModerationTable.data.length
-                        }}</span>
-                        <br />
-                        <InputGroupField
-                            v-model="groupBansModerationTable.filters[0].value"
-                            clearable
-                            size="sm"
-                            :placeholder="t('dialog.group.members.search')"
-                            style="margin-top: 10px; margin-bottom: 10px" />
-                        <Button size="sm" variant="outline" @click="selectAllGroupBans">{{
-                            t('dialog.group_member_moderation.select_all')
-                        }}</Button>
-                        <DataTableLayout
-                            style="margin-top: 10px"
-                            :table="groupBansModerationTanstackTable"
-                            :loading="isGroupMembersLoading"
-                            :page-sizes="pageSizes"
-                            :total-items="groupBansModerationTotalItems" />
-                    </div>
-                </template>
-
-                <template #invites>
-                    <div style="margin-top: 10px">
-                        <Button
-                            class="rounded-full"
-                            variant="outline"
-                            size="icon-sm"
-                            :disabled="isGroupMembersLoading"
-                            @click="getAllGroupInvitesAndJoinRequests(groupMemberModeration.id)">
-                            <Spinner v-if="isGroupMembersLoading" />
-                            <RefreshCw v-else />
-                        </Button>
-                        <br />
-                        <TabsUnderline default-value="sent" :items="groupInvitesTabs" :unmount-on-hide="false">
-                            <template #label-sent>
-                                <span style="font-weight: bold; font-size: 16px">{{
-                                    t('dialog.group_member_moderation.sent_invites')
+                                    </DropdownMenuContent>
+                                </DropdownMenu>
+                                <span class="ml-2" style="margin-right: 5px">{{
+                                    t('dialog.group.members.filter')
                                 }}</span>
-                                <span style="color: #909399; font-size: 12px; margin-left: 5px">{{
-                                    groupInvitesModerationTable.data.length
-                                }}</span>
-                            </template>
-                            <template #label-join>
-                                <span style="font-weight: bold; font-size: 16px">{{
-                                    t('dialog.group_member_moderation.join_requests')
-                                }}</span>
-                                <span style="color: #909399; font-size: 12px; margin-left: 5px">{{
-                                    groupJoinRequestsModerationTable.data.length
-                                }}</span>
-                            </template>
-                            <template #label-blocked>
-                                <span style="font-weight: bold; font-size: 16px">{{
-                                    t('dialog.group_member_moderation.blocked_requests')
-                                }}</span>
-                                <span style="color: #909399; font-size: 12px; margin-left: 5px">{{
-                                    groupBlockedModerationTable.data.length
-                                }}</span>
-                            </template>
-                            <template #sent>
-                                <Button size="sm" variant="outline" @click="selectAllGroupInvites">{{
-                                    t('dialog.group_member_moderation.select_all')
-                                }}</Button>
-                                <DataTableLayout
-                                    style="margin-top: 10px"
-                                    :table="groupInvitesModerationTanstackTable"
-                                    :loading="isGroupMembersLoading"
-                                    :page-sizes="pageSizes"
-                                    :total-items="groupInvitesModerationTotalItems" />
-                                <br />
-                                <Button
-                                    variant="outline"
-                                    :disabled="
-                                        Boolean(
-                                            progressCurrent ||
-                                            !hasGroupPermission(groupMemberModeration.groupRef, 'group-invites-manage')
-                                        )
-                                    "
-                                    @click="groupMembersDeleteSentInvite"
-                                    >{{ t('dialog.group_member_moderation.delete_sent_invite') }}</Button
-                                >
-                            </template>
-
-                            <template #join>
-                                <Button size="sm" variant="outline" @click="selectAllGroupJoinRequests">{{
-                                    t('dialog.group_member_moderation.select_all')
-                                }}</Button>
-                                <DataTableLayout
-                                    style="margin-top: 10px"
-                                    :table="groupJoinRequestsModerationTanstackTable"
-                                    :loading="isGroupMembersLoading"
-                                    :page-sizes="pageSizes"
-                                    :total-items="groupJoinRequestsModerationTotalItems" />
-                                <br />
-                                <Button
-                                    variant="outline"
-                                    :disabled="
-                                        Boolean(
-                                            progressCurrent ||
-                                            !hasGroupPermission(groupMemberModeration.groupRef, 'group-invites-manage')
-                                        )
-                                    "
-                                    class="mr-2"
-                                    @click="groupMembersAcceptInviteRequest"
-                                    >{{ t('dialog.group_member_moderation.accept_join_requests') }}</Button
-                                >
-                                <Button
-                                    variant="outline"
-                                    :disabled="
-                                        Boolean(
-                                            progressCurrent ||
-                                            !hasGroupPermission(groupMemberModeration.groupRef, 'group-invites-manage')
-                                        )
-                                    "
-                                    class="mr-2"
-                                    @click="groupMembersRejectInviteRequest"
-                                    >{{ t('dialog.group_member_moderation.reject_join_requests') }}</Button
-                                >
-                                <Button
-                                    variant="outline"
-                                    :disabled="
-                                        Boolean(
-                                            progressCurrent ||
-                                            !hasGroupPermission(groupMemberModeration.groupRef, 'group-invites-manage')
-                                        )
-                                    "
-                                    @click="groupMembersBlockJoinRequest"
-                                    >{{ t('dialog.group_member_moderation.block_join_requests') }}</Button
-                                >
-                            </template>
-
-                            <template #blocked>
-                                <Button size="sm" variant="outline" @click="selectAllGroupBlocked">{{
-                                    t('dialog.group_member_moderation.select_all')
-                                }}</Button>
-                                <DataTableLayout
-                                    style="margin-top: 10px"
-                                    :table="groupBlockedModerationTanstackTable"
-                                    :loading="isGroupMembersLoading"
-                                    :page-sizes="pageSizes"
-                                    :total-items="groupBlockedModerationTotalItems" />
-                                <br />
-                                <Button
-                                    variant="outline"
-                                    :disabled="
-                                        Boolean(
-                                            progressCurrent ||
-                                            !hasGroupPermission(groupMemberModeration.groupRef, 'group-invites-manage')
-                                        )
-                                    "
-                                    @click="groupMembersDeleteBlockedRequest"
-                                    >{{ t('dialog.group_member_moderation.delete_blocked_requests') }}</Button
-                                >
-                            </template>
-                        </TabsUnderline>
-                    </div>
-                </template>
-
-                <template #logs>
-                    <div style="margin-top: 10px">
-                        <Button
-                            class="rounded-full"
-                            variant="outline"
-                            size="icon-sm"
-                            :disabled="isGroupMembersLoading"
-                            @click="getAllGroupLogs(groupMemberModeration.id)">
-                            <Spinner v-if="isGroupMembersLoading" />
-                            <RefreshCw v-else />
-                        </Button>
-                        <span style="font-size: 14px; margin-left: 5px; margin-right: 5px">{{
-                            groupLogsModerationTable.data.length
-                        }}</span>
-                        <br />
-                        <div style="display: flex; justify-content: space-between; align-items: center">
-                            <div>
-                                <Select v-model="selectedAuditLogTypes" multiple>
-                                    <SelectTrigger style="margin: 10px 0; width: 250px">
-                                        <SelectValue :placeholder="t('dialog.group_member_moderation.filter_type')" />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                        <SelectItem
-                                            v-for="type in groupMemberModeration.auditLogTypes"
-                                            :key="type"
-                                            :value="type">
-                                            {{ getAuditLogTypeName(type) }}
-                                        </SelectItem>
-                                    </SelectContent>
-                                </Select>
-                            </div>
-                            <div>
-                                <Button variant="outline" @click="showGroupLogsExportDialog">{{
-                                    t('dialog.group_member_moderation.export_logs')
-                                }}</Button>
+                                <DropdownMenu>
+                                    <DropdownMenuTrigger
+                                        as-child
+                                        :disabled="
+                                            Boolean(
+                                                isGroupMembersLoading ||
+                                                memberSearch.length ||
+                                                !hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')
+                                            )
+                                        ">
+                                        <Button
+                                            size="sm"
+                                            variant="outline"
+                                            :disabled="
+                                                Boolean(
+                                                    isGroupMembersLoading ||
+                                                    memberSearch.length ||
+                                                    !hasGroupPermission(
+                                                        groupMemberModeration.groupRef,
+                                                        'group-bans-manage'
+                                                    )
+                                                )
+                                            "
+                                            @click.stop>
+                                            <span>
+                                                {{ t(memberFilter.name) }}
+                                                <ArrowDown style="margin-left: 5px" />
+                                            </span>
+                                        </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>
+                            <InputGroupField
+                                v-model="memberSearch"
+                                :disabled="!hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')"
+                                clearable
+                                size="sm"
+                                :placeholder="t('dialog.group.members.search')"
+                                style="margin-top: 10px; margin-bottom: 10px"
+                                @input="groupMembersSearch" />
+                            <Button size="sm" variant="outline" @click="selectAllGroupMembers">{{
+                                t('dialog.group_member_moderation.select_all')
+                            }}</Button>
+                            <DataTableLayout
+                                v-if="groupMemberModerationTable.data.length"
+                                style="margin-top: 10px"
+                                :table="groupMemberModerationTanstackTable"
+                                :loading="isGroupMembersLoading"
+                                :page-sizes="pageSizes"
+                                :total-items="groupMemberModerationTotalItems" />
                         </div>
-                        <InputGroupField
-                            v-model="groupLogsModerationTable.filters[0].value"
-                            clearable
-                            size="sm"
-                            :placeholder="t('dialog.group.members.search')"
-                            style="margin-top: 10px; margin-bottom: 10px" />
-                        <br />
-                        <DataTableLayout
-                            style="margin-top: 10px"
-                            :table="groupLogsModerationTanstackTable"
-                            :loading="isGroupMembersLoading"
-                            :page-sizes="pageSizes"
-                            :total-items="groupLogsModerationTotalItems" />
-                    </div>
-                </template>
-            </TabsUnderline>
-
-            <br />
-            <br />
-            <span class="name">{{ t('dialog.group_member_moderation.user_id') }}</span>
-            <br />
-            <InputGroupField
-                v-model="selectUserId"
-                size="sm"
-                style="margin-top: 5px"
-                :placeholder="t('dialog.group_member_moderation.user_id_placeholder')"
-                clearable />
-            <Button
-                size="sm"
-                variant="outline"
-                style="margin-top: 10px"
-                :disabled="!selectUserId"
-                @click="selectGroupMemberUserId"
-                >{{ t('dialog.group_member_moderation.select_user') }}</Button
-            >
-            <br />
-            <br />
-            <span class="name">{{ t('dialog.group_member_moderation.selected_users') }}</span>
-            <Button
-                class="rounded-full"
-                size="icon-sm"
-                variant="outline"
-                style="margin-left: 5px"
-                @click="clearSelectedGroupMembers">
-                <Trash2
-            /></Button>
-            <br />
-            <Badge
-                v-for="user in selectedUsersArray"
-                :key="user.id"
-                variant="outline"
-                style="margin-right: 5px; margin-top: 5px">
-                <TooltipWrapper v-if="user.membershipStatus !== 'member'" side="top">
-                    <template #content>
-                        <span>{{ t('dialog.group_member_moderation.user_isnt_in_group') }}</span>
                     </template>
-                    <AlertTriangle style="margin-left: 3px; display: inline-block" />
-                </TooltipWrapper>
-                <span v-text="user.user?.displayName || user.userId" style="font-weight: bold; margin-left: 5px"></span>
-                <button
-                    type="button"
-                    style="
-                        margin-left: 6px;
-                        border: none;
-                        background: transparent;
-                        padding: 0;
-                        display: inline-flex;
-                        align-items: center;
-                        color: inherit;
-                        cursor: pointer;
-                    "
-                    @click="deleteSelectedGroupMember(user)">
-                    <X class="h-3 w-3" />
-                </button>
-            </Badge>
-            <br />
-            <br />
-            <span class="name">{{ t('dialog.group_member_moderation.notes') }}</span>
-            <InputGroupTextareaField
-                v-model="note"
-                class="extra"
-                :rows="2"
-                :placeholder="t('dialog.group_member_moderation.note_placeholder')"
-                style="margin-top: 5px"
-                input-class="resize-none min-h-0" />
-            <br />
-            <br />
-            <span class="name">{{ t('dialog.group_member_moderation.selected_roles') }}</span>
-            <br />
-            <Select v-model="selectedRoles" multiple>
-                <SelectTrigger style="margin-top: 5px">
-                    <SelectValue :placeholder="t('dialog.group_member_moderation.choose_roles_placeholder')" />
-                </SelectTrigger>
-                <SelectContent>
-                    <SelectItem v-for="role in groupMemberModeration.groupRef.roles" :key="role.id" :value="role.id">
-                        {{ role.name }}
-                    </SelectItem>
-                </SelectContent>
-            </Select>
-            <br />
-            <br />
-            <span class="name">{{ t('dialog.group_member_moderation.actions') }}</span>
-            <br />
-            <div class="flex gap-2">
+
+                    <template #bans>
+                        <div style="margin-top: 10px">
+                            <Button
+                                class="rounded-full"
+                                variant="outline"
+                                size="icon-sm"
+                                :disabled="isGroupMembersLoading"
+                                @click="getAllGroupBans(groupMemberModeration.id)">
+                                <Spinner v-if="isGroupMembersLoading" />
+                                <RefreshCw v-else />
+                            </Button>
+                            <span style="font-size: 14px; margin-left: 5px; margin-right: 5px">{{
+                                groupBansModerationTable.data.length
+                            }}</span>
+                            <br />
+                            <InputGroupField
+                                v-model="groupBansModerationTable.filters[0].value"
+                                clearable
+                                size="sm"
+                                :placeholder="t('dialog.group.members.search')"
+                                style="margin-top: 10px; margin-bottom: 10px" />
+                            <Button size="sm" variant="outline" @click="selectAllGroupBans">{{
+                                t('dialog.group_member_moderation.select_all')
+                            }}</Button>
+                            <DataTableLayout
+                                style="margin-top: 10px"
+                                :table="groupBansModerationTanstackTable"
+                                :loading="isGroupMembersLoading"
+                                :page-sizes="pageSizes"
+                                :total-items="groupBansModerationTotalItems" />
+                        </div>
+                    </template>
+
+                    <template #invites>
+                        <div style="margin-top: 10px">
+                            <Button
+                                class="rounded-full"
+                                variant="outline"
+                                size="icon-sm"
+                                :disabled="isGroupMembersLoading"
+                                @click="getAllGroupInvitesAndJoinRequests(groupMemberModeration.id)">
+                                <Spinner v-if="isGroupMembersLoading" />
+                                <RefreshCw v-else />
+                            </Button>
+                            <br />
+                            <TabsUnderline default-value="sent" :items="groupInvitesTabs" :unmount-on-hide="false">
+                                <template #label-sent>
+                                    <span style="font-weight: bold; font-size: 16px">{{
+                                        t('dialog.group_member_moderation.sent_invites')
+                                    }}</span>
+                                    <span style="color: #909399; font-size: 12px; margin-left: 5px">{{
+                                        groupInvitesModerationTable.data.length
+                                    }}</span>
+                                </template>
+                                <template #label-join>
+                                    <span style="font-weight: bold; font-size: 16px">{{
+                                        t('dialog.group_member_moderation.join_requests')
+                                    }}</span>
+                                    <span style="color: #909399; font-size: 12px; margin-left: 5px">{{
+                                        groupJoinRequestsModerationTable.data.length
+                                    }}</span>
+                                </template>
+                                <template #label-blocked>
+                                    <span style="font-weight: bold; font-size: 16px">{{
+                                        t('dialog.group_member_moderation.blocked_requests')
+                                    }}</span>
+                                    <span style="color: #909399; font-size: 12px; margin-left: 5px">{{
+                                        groupBlockedModerationTable.data.length
+                                    }}</span>
+                                </template>
+                                <template #sent>
+                                    <Button size="sm" variant="outline" @click="selectAllGroupInvites">{{
+                                        t('dialog.group_member_moderation.select_all')
+                                    }}</Button>
+                                    <DataTableLayout
+                                        style="margin-top: 10px"
+                                        :table="groupInvitesModerationTanstackTable"
+                                        :loading="isGroupMembersLoading"
+                                        :page-sizes="pageSizes"
+                                        :total-items="groupInvitesModerationTotalItems" />
+                                    <br />
+                                    <Button
+                                        variant="outline"
+                                        :disabled="
+                                            Boolean(
+                                                progressCurrent ||
+                                                !hasGroupPermission(
+                                                    groupMemberModeration.groupRef,
+                                                    'group-invites-manage'
+                                                )
+                                            )
+                                        "
+                                        @click="groupMembersDeleteSentInvite"
+                                        >{{ t('dialog.group_member_moderation.delete_sent_invite') }}</Button
+                                    >
+                                </template>
+
+                                <template #join>
+                                    <Button size="sm" variant="outline" @click="selectAllGroupJoinRequests">{{
+                                        t('dialog.group_member_moderation.select_all')
+                                    }}</Button>
+                                    <DataTableLayout
+                                        style="margin-top: 10px"
+                                        :table="groupJoinRequestsModerationTanstackTable"
+                                        :loading="isGroupMembersLoading"
+                                        :page-sizes="pageSizes"
+                                        :total-items="groupJoinRequestsModerationTotalItems" />
+                                    <br />
+                                    <Button
+                                        variant="outline"
+                                        :disabled="
+                                            Boolean(
+                                                progressCurrent ||
+                                                !hasGroupPermission(
+                                                    groupMemberModeration.groupRef,
+                                                    'group-invites-manage'
+                                                )
+                                            )
+                                        "
+                                        class="mr-2"
+                                        @click="groupMembersAcceptInviteRequest"
+                                        >{{ t('dialog.group_member_moderation.accept_join_requests') }}</Button
+                                    >
+                                    <Button
+                                        variant="outline"
+                                        :disabled="
+                                            Boolean(
+                                                progressCurrent ||
+                                                !hasGroupPermission(
+                                                    groupMemberModeration.groupRef,
+                                                    'group-invites-manage'
+                                                )
+                                            )
+                                        "
+                                        class="mr-2"
+                                        @click="groupMembersRejectInviteRequest"
+                                        >{{ t('dialog.group_member_moderation.reject_join_requests') }}</Button
+                                    >
+                                    <Button
+                                        variant="outline"
+                                        :disabled="
+                                            Boolean(
+                                                progressCurrent ||
+                                                !hasGroupPermission(
+                                                    groupMemberModeration.groupRef,
+                                                    'group-invites-manage'
+                                                )
+                                            )
+                                        "
+                                        @click="groupMembersBlockJoinRequest"
+                                        >{{ t('dialog.group_member_moderation.block_join_requests') }}</Button
+                                    >
+                                </template>
+
+                                <template #blocked>
+                                    <Button size="sm" variant="outline" @click="selectAllGroupBlocked">{{
+                                        t('dialog.group_member_moderation.select_all')
+                                    }}</Button>
+                                    <DataTableLayout
+                                        style="margin-top: 10px"
+                                        :table="groupBlockedModerationTanstackTable"
+                                        :loading="isGroupMembersLoading"
+                                        :page-sizes="pageSizes"
+                                        :total-items="groupBlockedModerationTotalItems" />
+                                    <br />
+                                    <Button
+                                        variant="outline"
+                                        :disabled="
+                                            Boolean(
+                                                progressCurrent ||
+                                                !hasGroupPermission(
+                                                    groupMemberModeration.groupRef,
+                                                    'group-invites-manage'
+                                                )
+                                            )
+                                        "
+                                        @click="groupMembersDeleteBlockedRequest"
+                                        >{{ t('dialog.group_member_moderation.delete_blocked_requests') }}</Button
+                                    >
+                                </template>
+                            </TabsUnderline>
+                        </div>
+                    </template>
+
+                    <template #logs>
+                        <div style="margin-top: 10px">
+                            <Button
+                                class="rounded-full"
+                                variant="outline"
+                                size="icon-sm"
+                                :disabled="isGroupMembersLoading"
+                                @click="getAllGroupLogs(groupMemberModeration.id)">
+                                <Spinner v-if="isGroupMembersLoading" />
+                                <RefreshCw v-else />
+                            </Button>
+                            <span style="font-size: 14px; margin-left: 5px; margin-right: 5px">{{
+                                groupLogsModerationTable.data.length
+                            }}</span>
+                            <br />
+                            <div style="display: flex; justify-content: space-between; align-items: center">
+                                <div>
+                                    <Select v-model="selectedAuditLogTypes" multiple>
+                                        <SelectTrigger style="margin: 10px 0; width: 250px">
+                                            <SelectValue
+                                                :placeholder="t('dialog.group_member_moderation.filter_type')" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem
+                                                v-for="type in groupMemberModeration.auditLogTypes"
+                                                :key="type"
+                                                :value="type">
+                                                {{ getAuditLogTypeName(type) }}
+                                            </SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                                <div>
+                                    <Button variant="outline" @click="showGroupLogsExportDialog">{{
+                                        t('dialog.group_member_moderation.export_logs')
+                                    }}</Button>
+                                </div>
+                            </div>
+                            <InputGroupField
+                                v-model="groupLogsModerationTable.filters[0].value"
+                                clearable
+                                size="sm"
+                                :placeholder="t('dialog.group.members.search')"
+                                style="margin-top: 10px; margin-bottom: 10px" />
+                            <br />
+                            <DataTableLayout
+                                style="margin-top: 10px"
+                                :table="groupLogsModerationTanstackTable"
+                                :loading="isGroupMembersLoading"
+                                :page-sizes="pageSizes"
+                                :total-items="groupLogsModerationTotalItems" />
+                        </div>
+                    </template>
+                </TabsUnderline>
+
+                <br />
+                <br />
+                <span class="name">{{ t('dialog.group_member_moderation.user_id') }}</span>
+                <br />
+                <InputGroupField
+                    v-model="selectUserId"
+                    size="sm"
+                    style="margin-top: 5px"
+                    :placeholder="t('dialog.group_member_moderation.user_id_placeholder')"
+                    clearable />
                 <Button
+                    size="sm"
                     variant="outline"
-                    :disabled="
-                        Boolean(
-                            !selectedRoles.length ||
-                            progressCurrent ||
-                            !hasGroupPermission(groupMemberModeration.groupRef, 'group-roles-assign')
-                        )
-                    "
-                    @click="groupMembersAddRoles"
-                    >{{ t('dialog.group_member_moderation.add_roles') }}</Button
-                >
-                <Button
-                    variant="secondary"
-                    :disabled="
-                        Boolean(
-                            !selectedRoles.length ||
-                            progressCurrent ||
-                            !hasGroupPermission(groupMemberModeration.groupRef, 'group-roles-assign')
-                        )
-                    "
-                    @click="groupMembersRemoveRoles"
-                    >{{ t('dialog.group_member_moderation.remove_roles') }}</Button
+                    style="margin-top: 10px"
+                    :disabled="!selectUserId"
+                    @click="selectGroupMemberUserId"
+                    >{{ t('dialog.group_member_moderation.select_user') }}</Button
                 >
+                <br />
+                <br />
+                <span class="name">{{ t('dialog.group_member_moderation.selected_users') }}</span>
                 <Button
+                    class="rounded-full"
+                    size="icon-sm"
                     variant="outline"
-                    :disabled="
-                        Boolean(
-                            progressCurrent ||
-                            !hasGroupPermission(groupMemberModeration.groupRef, 'group-members-manage')
-                        )
-                    "
-                    @click="groupMembersSaveNote"
-                    >{{ t('dialog.group_member_moderation.save_note') }}</Button
-                >
-                <Button
-                    variant="outline"
-                    :disabled="
-                        Boolean(
-                            progressCurrent ||
-                            !hasGroupPermission(groupMemberModeration.groupRef, 'group-members-remove')
-                        )
-                    "
-                    @click="groupMembersKick"
-                    >{{ t('dialog.group_member_moderation.kick') }}</Button
-                >
-                <Button
-                    variant="outline"
-                    :disabled="
-                        Boolean(
-                            progressCurrent || !hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')
-                        )
-                    "
-                    @click="groupMembersBan"
-                    >{{ t('dialog.group_member_moderation.ban') }}</Button
-                >
-                <Button
-                    variant="outline"
-                    :disabled="
-                        Boolean(
-                            progressCurrent || !hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')
-                        )
-                    "
-                    @click="groupMembersUnban"
-                    >{{ t('dialog.group_member_moderation.unban') }}</Button
-                >
-                <span v-if="progressCurrent" style="margin-top: 10px">
-                    <Loader2 class="is-loading" style="margin-left: 5px; margin-right: 5px" />
-                    {{ t('dialog.group_member_moderation.progress') }} {{ progressCurrent }}/{{ progressTotal }}
-                </span>
-                <Button
-                    variant="secondary"
-                    v-if="progressCurrent"
                     style="margin-left: 5px"
-                    @click="progressTotal = 0"
-                    >{{ t('dialog.group_member_moderation.cancel') }}</Button
-                >
+                    @click="clearSelectedGroupMembers">
+                    <Trash2
+                /></Button>
+                <br />
+                <Badge
+                    v-for="user in selectedUsersArray"
+                    :key="user.id"
+                    variant="outline"
+                    style="margin-right: 5px; margin-top: 5px">
+                    <TooltipWrapper v-if="user.membershipStatus !== 'member'" side="top">
+                        <template #content>
+                            <span>{{ t('dialog.group_member_moderation.user_isnt_in_group') }}</span>
+                        </template>
+                        <AlertTriangle style="margin-left: 3px; display: inline-block" />
+                    </TooltipWrapper>
+                    <span
+                        v-text="user.user?.displayName || user.userId"
+                        style="font-weight: bold; margin-left: 5px"></span>
+                    <button
+                        type="button"
+                        style="
+                            margin-left: 6px;
+                            border: none;
+                            background: transparent;
+                            padding: 0;
+                            display: inline-flex;
+                            align-items: center;
+                            color: inherit;
+                            cursor: pointer;
+                        "
+                        @click="deleteSelectedGroupMember(user)">
+                        <X class="h-3 w-3" />
+                    </button>
+                </Badge>
+                <br />
+                <br />
+                <span class="name">{{ t('dialog.group_member_moderation.notes') }}</span>
+                <InputGroupTextareaField
+                    v-model="note"
+                    class="extra"
+                    :rows="2"
+                    :placeholder="t('dialog.group_member_moderation.note_placeholder')"
+                    style="margin-top: 5px"
+                    input-class="resize-none min-h-0" />
+                <br />
+                <br />
+                <span class="name">{{ t('dialog.group_member_moderation.selected_roles') }}</span>
+                <br />
+                <Select v-model="selectedRoles" multiple>
+                    <SelectTrigger style="margin-top: 5px">
+                        <SelectValue :placeholder="t('dialog.group_member_moderation.choose_roles_placeholder')" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem
+                            v-for="role in groupMemberModeration.groupRef.roles"
+                            :key="role.id"
+                            :value="role.id">
+                            {{ role.name }}
+                        </SelectItem>
+                    </SelectContent>
+                </Select>
+                <br />
+                <br />
+                <span class="name">{{ t('dialog.group_member_moderation.actions') }}</span>
+                <br />
+                <div class="flex gap-2">
+                    <Button
+                        variant="outline"
+                        :disabled="
+                            Boolean(
+                                !selectedRoles.length ||
+                                progressCurrent ||
+                                !hasGroupPermission(groupMemberModeration.groupRef, 'group-roles-assign')
+                            )
+                        "
+                        @click="groupMembersAddRoles"
+                        >{{ t('dialog.group_member_moderation.add_roles') }}</Button
+                    >
+                    <Button
+                        variant="secondary"
+                        :disabled="
+                            Boolean(
+                                !selectedRoles.length ||
+                                progressCurrent ||
+                                !hasGroupPermission(groupMemberModeration.groupRef, 'group-roles-assign')
+                            )
+                        "
+                        @click="groupMembersRemoveRoles"
+                        >{{ t('dialog.group_member_moderation.remove_roles') }}</Button
+                    >
+                    <Button
+                        variant="outline"
+                        :disabled="
+                            Boolean(
+                                progressCurrent ||
+                                !hasGroupPermission(groupMemberModeration.groupRef, 'group-members-manage')
+                            )
+                        "
+                        @click="groupMembersSaveNote"
+                        >{{ t('dialog.group_member_moderation.save_note') }}</Button
+                    >
+                    <Button
+                        variant="outline"
+                        :disabled="
+                            Boolean(
+                                progressCurrent ||
+                                !hasGroupPermission(groupMemberModeration.groupRef, 'group-members-remove')
+                            )
+                        "
+                        @click="groupMembersKick"
+                        >{{ t('dialog.group_member_moderation.kick') }}</Button
+                    >
+                    <Button
+                        variant="outline"
+                        :disabled="
+                            Boolean(
+                                progressCurrent ||
+                                !hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')
+                            )
+                        "
+                        @click="groupMembersBan"
+                        >{{ t('dialog.group_member_moderation.ban') }}</Button
+                    >
+                    <Button
+                        variant="outline"
+                        :disabled="
+                            Boolean(
+                                progressCurrent ||
+                                !hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')
+                            )
+                        "
+                        @click="groupMembersUnban"
+                        >{{ t('dialog.group_member_moderation.unban') }}</Button
+                    >
+                    <span v-if="progressCurrent" style="margin-top: 10px">
+                        <Loader2 class="is-loading" style="margin-left: 5px; margin-right: 5px" />
+                        {{ t('dialog.group_member_moderation.progress') }} {{ progressCurrent }}/{{ progressTotal }}
+                    </span>
+                    <Button
+                        variant="secondary"
+                        v-if="progressCurrent"
+                        style="margin-left: 5px"
+                        @click="progressTotal = 0"
+                        >{{ t('dialog.group_member_moderation.cancel') }}</Button
+                    >
+                </div>
             </div>
-        </div>
-        <group-member-moderation-export-dialog
-            v-model:isGroupLogsExportDialogVisible="isGroupLogsExportDialogVisible"
-            :group-logs-moderation-table="groupLogsModerationTable" />
-    </el-dialog>
+
+            <group-member-moderation-export-dialog
+                v-model:isGroupLogsExportDialogVisible="isGroupLogsExportDialogVisible"
+                :group-logs-moderation-table="groupLogsModerationTable" />
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
     import { AlertTriangle, ArrowDown, Loader2, RefreshCw, Trash2, X } from 'lucide-vue-next';
+    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { computed, reactive, ref, watch } from 'vue';
     import { InputGroupField, InputGroupTextareaField } from '@/components/ui/input-group';
     import { Button } from '@/components/ui/button';
diff --git a/src/components/dialogs/GroupDialog/GroupMemberModerationExportDialog.vue b/src/components/dialogs/GroupDialog/GroupMemberModerationExportDialog.vue
index 9f537ec7..aa88bcb3 100644
--- a/src/components/dialogs/GroupDialog/GroupMemberModerationExportDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupMemberModerationExportDialog.vue
@@ -1,34 +1,41 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        :model-value="isGroupLogsExportDialogVisible"
-        :title="t('dialog.group_member_moderation.export_logs')"
-        width="650px"
-        append-to-body
-        @close="setIsGroupLogsExportDialogVisible">
-        <div style="margin-bottom: 10px" class="flex flex-col gap-2">
-            <label
-                v-for="option in checkGroupsLogsExportLogsOptions"
-                :key="option.label"
-                class="inline-flex items-center gap-2">
-                <Checkbox
-                    :model-value="checkedGroupLogsExportLogsOptions.includes(option.label)"
-                    @update:modelValue="(val) => toggleGroupLogsExportOption(option.label, val)" />
-                <span>{{ t(option.text) }}</span>
-            </label>
-        </div>
-        <br />
-        <InputGroupTextareaField
-            v-model="groupLogsExportContent"
-            :rows="15"
-            readonly
-            style="margin-top: 15px"
-            input-class="resize-none"
-            @click="handleCopyGroupLogsExportContent" />
-    </el-dialog>
+    <Dialog
+        :open="isGroupLogsExportDialogVisible"
+        @update:open="
+            (open) => {
+                if (!open) setIsGroupLogsExportDialogVisible();
+            }
+        ">
+        <DialogContent class="x-dialog sm:max-w-162.5">
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.group_member_moderation.export_logs') }}</DialogTitle>
+            </DialogHeader>
+
+            <div style="margin-bottom: 10px" class="flex flex-col gap-2">
+                <label
+                    v-for="option in checkGroupsLogsExportLogsOptions"
+                    :key="option.label"
+                    class="inline-flex items-center gap-2">
+                    <Checkbox
+                        :model-value="checkedGroupLogsExportLogsOptions.includes(option.label)"
+                        @update:modelValue="(val) => toggleGroupLogsExportOption(option.label, val)" />
+                    <span>{{ t(option.text) }}</span>
+                </label>
+            </div>
+            <br />
+            <InputGroupTextareaField
+                v-model="groupLogsExportContent"
+                :rows="15"
+                readonly
+                style="margin-top: 15px"
+                input-class="resize-none"
+                @click="handleCopyGroupLogsExportContent" />
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { ref, watch } from 'vue';
     import { Checkbox } from '@/components/ui/checkbox';
     import { InputGroupTextareaField } from '@/components/ui/input-group';
diff --git a/src/components/dialogs/GroupDialog/GroupPostEditDialog.vue b/src/components/dialogs/GroupDialog/GroupPostEditDialog.vue
index abafa503..15688525 100644
--- a/src/components/dialogs/GroupDialog/GroupPostEditDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupPostEditDialog.vue
@@ -1,131 +1,144 @@
 <template>
-    <el-dialog
-        v-model="groupPostEditDialog.visible"
-        :title="t('dialog.group_post_edit.header')"
-        width="650px"
-        append-to-body>
-        <div v-if="groupPostEditDialog.visible">
-            <FieldGroup class="gap-4">
-                <Field>
-                    <FieldLabel>{{ t('dialog.group_post_edit.title') }}</FieldLabel>
-                    <FieldContent>
-                        <InputGroupField v-model="groupPostEditDialog.title" size="sm" />
-                    </FieldContent>
-                </Field>
-                <Field>
-                    <FieldLabel>{{ t('dialog.group_post_edit.message') }}</FieldLabel>
-                    <FieldContent>
-                        <InputGroupTextareaField
-                            v-model="groupPostEditDialog.text"
-                            :rows="4"
-                            style="margin-top: 10px"
-                            input-class="resize-none" />
-                    </FieldContent>
-                </Field>
-                <Field v-if="!groupPostEditDialog.postId">
-                    <FieldLabel class="sr-only">{{ t('dialog.group_post_edit.send_notification') }}</FieldLabel>
-                    <FieldContent>
-                        <label class="inline-flex items-center gap-2">
-                            <Checkbox v-model="groupPostEditDialog.sendNotification" />
-                            <span>{{ t('dialog.group_post_edit.send_notification') }}</span>
-                        </label>
-                    </FieldContent>
-                </Field>
-                <Field>
-                    <FieldLabel>{{ t('dialog.group_post_edit.post_visibility') }}</FieldLabel>
-                    <FieldContent>
-                        <RadioGroup v-model="groupPostEditDialog.visibility" class="flex items-center gap-4">
-                            <div class="flex items-center space-x-2">
-                                <RadioGroupItem id="groupPostVisibility-public" value="public" />
-                                <label for="groupPostVisibility-public">
-                                    {{ t('dialog.group_post_edit.visibility_public') }}
-                                </label>
-                            </div>
-                            <div class="flex items-center space-x-2">
-                                <RadioGroupItem id="groupPostVisibility-group" value="group" />
-                                <label for="groupPostVisibility-group">
-                                    {{ t('dialog.group_post_edit.visibility_group') }}
-                                </label>
-                            </div>
-                        </RadioGroup>
-                    </FieldContent>
-                </Field>
-                <Field v-if="groupPostEditDialog.visibility === 'group'">
-                    <FieldLabel>{{ t('dialog.new_instance.roles') }}</FieldLabel>
-                    <FieldContent>
-                        <Select
-                            multiple
-                            :model-value="Array.isArray(groupPostEditDialog.roleIds) ? groupPostEditDialog.roleIds : []"
-                            @update:modelValue="handleRoleIdsChange">
-                            <SelectTrigger size="sm" class="w-full">
-                                <SelectValue>
-                                    <span class="truncate">
-                                        {{ selectedRoleSummary || t('dialog.new_instance.role_placeholder') }}
-                                    </span>
-                                </SelectValue>
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectGroup>
-                                    <SelectItem
-                                        v-for="role in groupPostEditDialog.groupRef?.roles ?? []"
-                                        :key="role.id"
-                                        :value="role.id">
-                                        {{ role.name }}
-                                    </SelectItem>
-                                </SelectGroup>
-                            </SelectContent>
-                        </Select>
-                    </FieldContent>
-                </Field>
-                <Field>
-                    <FieldLabel>{{ t('dialog.group_post_edit.image') }}</FieldLabel>
-                    <FieldContent>
-                        <template v-if="gallerySelectDialog.selectedFileId">
-                            <div style="display: inline-block; flex: none; margin-right: 5px">
-                                <img
-                                    :src="gallerySelectDialog.selectedImageUrl"
-                                    style="flex: none; width: 60px; height: 60px; border-radius: 4px; object-fit: cover"
-                                    @click="showFullscreenImageDialog(gallerySelectDialog.selectedImageUrl)"
-                                    loading="lazy" />
-                                <Button
-                                    size="sm"
-                                    variant="outline"
-                                    style="vertical-align: top"
-                                    @click="clearImageGallerySelect">
-                                    {{ t('dialog.invite_message.clear_selected_image') }}
+    <Dialog v-model:open="groupPostEditDialog.visible">
+        <DialogContent class="sm:max-w-162.5">
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.group_post_edit.header') }}</DialogTitle>
+            </DialogHeader>
+
+            <div v-if="groupPostEditDialog.visible">
+                <FieldGroup class="gap-4">
+                    <Field>
+                        <FieldLabel>{{ t('dialog.group_post_edit.title') }}</FieldLabel>
+                        <FieldContent>
+                            <InputGroupField v-model="groupPostEditDialog.title" size="sm" />
+                        </FieldContent>
+                    </Field>
+                    <Field>
+                        <FieldLabel>{{ t('dialog.group_post_edit.message') }}</FieldLabel>
+                        <FieldContent>
+                            <InputGroupTextareaField
+                                v-model="groupPostEditDialog.text"
+                                :rows="4"
+                                style="margin-top: 10px"
+                                input-class="resize-none" />
+                        </FieldContent>
+                    </Field>
+                    <Field v-if="!groupPostEditDialog.postId">
+                        <FieldLabel class="sr-only">{{ t('dialog.group_post_edit.send_notification') }}</FieldLabel>
+                        <FieldContent>
+                            <label class="inline-flex items-center gap-2">
+                                <Checkbox v-model="groupPostEditDialog.sendNotification" />
+                                <span>{{ t('dialog.group_post_edit.send_notification') }}</span>
+                            </label>
+                        </FieldContent>
+                    </Field>
+                    <Field>
+                        <FieldLabel>{{ t('dialog.group_post_edit.post_visibility') }}</FieldLabel>
+                        <FieldContent>
+                            <RadioGroup v-model="groupPostEditDialog.visibility" class="flex items-center gap-4">
+                                <div class="flex items-center space-x-2">
+                                    <RadioGroupItem id="groupPostVisibility-public" value="public" />
+                                    <label for="groupPostVisibility-public">
+                                        {{ t('dialog.group_post_edit.visibility_public') }}
+                                    </label>
+                                </div>
+                                <div class="flex items-center space-x-2">
+                                    <RadioGroupItem id="groupPostVisibility-group" value="group" />
+                                    <label for="groupPostVisibility-group">
+                                        {{ t('dialog.group_post_edit.visibility_group') }}
+                                    </label>
+                                </div>
+                            </RadioGroup>
+                        </FieldContent>
+                    </Field>
+                    <Field v-if="groupPostEditDialog.visibility === 'group'">
+                        <FieldLabel>{{ t('dialog.new_instance.roles') }}</FieldLabel>
+                        <FieldContent>
+                            <Select
+                                multiple
+                                :model-value="
+                                    Array.isArray(groupPostEditDialog.roleIds) ? groupPostEditDialog.roleIds : []
+                                "
+                                @update:modelValue="handleRoleIdsChange">
+                                <SelectTrigger size="sm" class="w-full">
+                                    <SelectValue>
+                                        <span class="truncate">
+                                            {{ selectedRoleSummary || t('dialog.new_instance.role_placeholder') }}
+                                        </span>
+                                    </SelectValue>
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectGroup>
+                                        <SelectItem
+                                            v-for="role in groupPostEditDialog.groupRef?.roles ?? []"
+                                            :key="role.id"
+                                            :value="role.id">
+                                            {{ role.name }}
+                                        </SelectItem>
+                                    </SelectGroup>
+                                </SelectContent>
+                            </Select>
+                        </FieldContent>
+                    </Field>
+                    <Field>
+                        <FieldLabel>{{ t('dialog.group_post_edit.image') }}</FieldLabel>
+                        <FieldContent>
+                            <template v-if="gallerySelectDialog.selectedFileId">
+                                <div style="display: inline-block; flex: none; margin-right: 5px">
+                                    <img
+                                        :src="gallerySelectDialog.selectedImageUrl"
+                                        style="
+                                            flex: none;
+                                            width: 60px;
+                                            height: 60px;
+                                            border-radius: 4px;
+                                            object-fit: cover;
+                                        "
+                                        @click="showFullscreenImageDialog(gallerySelectDialog.selectedImageUrl)"
+                                        loading="lazy" />
+                                    <Button
+                                        size="sm"
+                                        variant="outline"
+                                        style="vertical-align: top"
+                                        @click="clearImageGallerySelect">
+                                        {{ t('dialog.invite_message.clear_selected_image') }}
+                                    </Button>
+                                </div>
+                            </template>
+                            <template v-else>
+                                <Button size="sm" variant="outline" @click="showGallerySelectDialog">
+                                    {{ t('dialog.invite_message.select_image') }}
                                 </Button>
-                            </div>
-                        </template>
-                        <template v-else>
-                            <Button size="sm" variant="outline" @click="showGallerySelectDialog">
-                                {{ t('dialog.invite_message.select_image') }}
-                            </Button>
-                        </template>
-                    </FieldContent>
-                </Field>
-            </FieldGroup>
-        </div>
-        <template #footer>
-            <div class="flex gap-2">
-                <Button variant="secondary" @click="groupPostEditDialog.visible = false">
-                    {{ t('dialog.group_post_edit.cancel') }}
-                </Button>
-                <Button v-if="groupPostEditDialog.postId" @click="editGroupPost">
-                    {{ t('dialog.group_post_edit.edit_post') }}
-                </Button>
-                <Button v-else @click="createGroupPost">
-                    {{ t('dialog.group_post_edit.create_post') }}
-                </Button>
+                            </template>
+                        </FieldContent>
+                    </Field>
+                </FieldGroup>
             </div>
-        </template>
-        <GallerySelectDialog
-            :gallery-select-dialog="gallerySelectDialog"
-            :gallery-table="galleryTable"
-            @refresh-gallery-table="refreshGalleryTable" />
-    </el-dialog>
+
+            <DialogFooter>
+                <div class="flex gap-2">
+                    <Button variant="secondary" @click="groupPostEditDialog.visible = false">
+                        {{ t('dialog.group_post_edit.cancel') }}
+                    </Button>
+                    <Button v-if="groupPostEditDialog.postId" @click="editGroupPost">
+                        {{ t('dialog.group_post_edit.edit_post') }}
+                    </Button>
+                    <Button v-else @click="createGroupPost">
+                        {{ t('dialog.group_post_edit.create_post') }}
+                    </Button>
+                </div>
+            </DialogFooter>
+
+            <GallerySelectDialog
+                :gallery-select-dialog="gallerySelectDialog"
+                :gallery-table="galleryTable"
+                @refresh-gallery-table="refreshGalleryTable" />
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { Field, FieldContent, FieldGroup, FieldLabel } from '@/components/ui/field';
     import { InputGroupField, InputGroupTextareaField } from '@/components/ui/input-group';
     import { computed, ref } from 'vue';
diff --git a/src/components/dialogs/InviteDialog/EditAndSendInviteDialog.vue b/src/components/dialogs/InviteDialog/EditAndSendInviteDialog.vue
index 8b438fc9..53de1b40 100644
--- a/src/components/dialogs/InviteDialog/EditAndSendInviteDialog.vue
+++ b/src/components/dialogs/InviteDialog/EditAndSendInviteDialog.vue
@@ -1,35 +1,42 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        :model-value="editAndSendInviteDialog.visible"
-        :title="t('dialog.edit_send_invite_message.header')"
-        width="400px"
-        append-to-body
-        @close="cancelEditAndSendInvite">
-        <div style="font-size: 12px">
-            <span>{{ t('dialog.edit_send_invite_message.description') }}</span>
-        </div>
+    <Dialog
+        :open="editAndSendInviteDialog.visible"
+        @update:open="
+            (open) => {
+                if (!open) cancelEditAndSendInvite();
+            }
+        ">
+        <DialogContent class="x-dialog sm:max-w-100">
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.edit_send_invite_message.header') }}</DialogTitle>
+            </DialogHeader>
 
-        <InputGroupTextareaField
-            v-model="editAndSendInviteDialog.newMessage"
-            :maxlength="64"
-            :rows="2"
-            class="mt-2.5"
-            placeholder=""
-            show-count />
+            <div style="font-size: 12px">
+                <span>{{ t('dialog.edit_send_invite_message.description') }}</span>
+            </div>
 
-        <template #footer>
-            <Button variant="secondary" class="mr-2" @click="cancelEditAndSendInvite">
-                {{ t('dialog.edit_send_invite_message.cancel') }}
-            </Button>
-            <Button @click="saveEditAndSendInvite" :disabled="!editAndSendInviteDialog.newMessage">
-                {{ t('dialog.edit_send_invite_message.send') }}
-            </Button>
-        </template>
-    </el-dialog>
+            <InputGroupTextareaField
+                v-model="editAndSendInviteDialog.newMessage"
+                :maxlength="64"
+                :rows="2"
+                class="mt-2.5"
+                placeholder=""
+                show-count />
+
+            <DialogFooter>
+                <Button variant="secondary" class="mr-2" @click="cancelEditAndSendInvite">
+                    {{ t('dialog.edit_send_invite_message.cancel') }}
+                </Button>
+                <Button @click="saveEditAndSendInvite" :disabled="!editAndSendInviteDialog.newMessage">
+                    {{ t('dialog.edit_send_invite_message.send') }}
+                </Button>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { Button } from '@/components/ui/button';
     import { InputGroupTextareaField } from '@/components/ui/input-group';
     import { storeToRefs } from 'pinia';
diff --git a/src/components/dialogs/InviteDialog/InviteDialog.vue b/src/components/dialogs/InviteDialog/InviteDialog.vue
index 620ca560..4c7eb4ba 100644
--- a/src/components/dialogs/InviteDialog/InviteDialog.vue
+++ b/src/components/dialogs/InviteDialog/InviteDialog.vue
@@ -1,89 +1,97 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        :model-value="inviteDialog.visible"
-        @close="closeInviteDialog"
-        :title="t('dialog.invite.header')"
-        width="500px"
-        append-to-body>
-        <div v-if="inviteDialog.visible" v-loading="inviteDialog.loading">
-            <Location :location="inviteDialog.worldId" :link="false" />
-            <br />
-            <Button size="sm" class="mr-2" variant="outline" style="margin-top: 10px" @click="addSelfToInvite">{{
-                t('dialog.invite.add_self')
-            }}</Button>
-            <Button
-                size="sm"
-                class="mr-2"
-                variant="outline"
-                :disabled="inviteDialog.friendsInInstance.length === 0"
-                style="margin-top: 10px"
-                @click="addFriendsInInstanceToInvite"
-                >{{ t('dialog.invite.add_friends_in_instance') }}</Button
-            >
-            <Button
-                size="sm"
-                variant="outline"
-                :disabled="vipFriends.length === 0"
-                style="margin-top: 10px"
-                @click="addFavoriteFriendsToInvite"
-                >{{ t('dialog.invite.add_favorite_friends') }}</Button
-            >
+    <Dialog
+        :open="inviteDialog.visible"
+        @update:open="
+            (open) => {
+                if (!open) closeInviteDialog();
+            }
+        ">
+        <DialogContent class="x-dialog sm:max-w-125">
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.invite.header') }}</DialogTitle>
+            </DialogHeader>
 
-            <div style="width: 100%; margin-top: 15px">
-                <VirtualCombobox
-                    :model-value="Array.isArray(inviteDialog.userIds) ? inviteDialog.userIds : []"
-                    @update:modelValue="setInviteUserIds"
-                    :groups="userPickerGroups"
-                    multiple
-                    :disabled="inviteDialog.loading"
-                    :placeholder="t('dialog.invite.select_placeholder')"
-                    :search-placeholder="t('dialog.invite.select_placeholder')"
-                    :clearable="true">
-                    <template #item="{ item, selected }">
-                        <div class="x-friend-item flex w-full items-center">
-                            <template v-if="item.user">
-                                <div :class="['avatar', userStatusClass(item.user)]">
-                                    <img :src="userImage(item.user)" loading="lazy" />
-                                </div>
-                                <div class="detail">
-                                    <span class="name" :style="{ color: item.user.$userColour }">{{
-                                        item.user.displayName
-                                    }}</span>
-                                </div>
-                            </template>
-                            <template v-else>
-                                <span>{{ item.label }}</span>
-                            </template>
+            <div v-if="inviteDialog.visible" v-loading="inviteDialog.loading">
+                <Location :location="inviteDialog.worldId" :link="false" />
+                <br />
+                <Button size="sm" class="mr-2" variant="outline" style="margin-top: 10px" @click="addSelfToInvite">{{
+                    t('dialog.invite.add_self')
+                }}</Button>
+                <Button
+                    size="sm"
+                    class="mr-2"
+                    variant="outline"
+                    :disabled="inviteDialog.friendsInInstance.length === 0"
+                    style="margin-top: 10px"
+                    @click="addFriendsInInstanceToInvite"
+                    >{{ t('dialog.invite.add_friends_in_instance') }}</Button
+                >
+                <Button
+                    size="sm"
+                    variant="outline"
+                    :disabled="vipFriends.length === 0"
+                    style="margin-top: 10px"
+                    @click="addFavoriteFriendsToInvite"
+                    >{{ t('dialog.invite.add_favorite_friends') }}</Button
+                >
 
-                            <CheckIcon :class="['ml-auto size-4', selected ? 'opacity-100' : 'opacity-0']" />
-                        </div>
-                    </template>
-                </VirtualCombobox>
+                <div style="width: 100%; margin-top: 15px">
+                    <VirtualCombobox
+                        :model-value="Array.isArray(inviteDialog.userIds) ? inviteDialog.userIds : []"
+                        @update:modelValue="setInviteUserIds"
+                        :groups="userPickerGroups"
+                        multiple
+                        :disabled="inviteDialog.loading"
+                        :placeholder="t('dialog.invite.select_placeholder')"
+                        :search-placeholder="t('dialog.invite.select_placeholder')"
+                        :clearable="true">
+                        <template #item="{ item, selected }">
+                            <div class="x-friend-item flex w-full items-center">
+                                <template v-if="item.user">
+                                    <div :class="['avatar', userStatusClass(item.user)]">
+                                        <img :src="userImage(item.user)" loading="lazy" />
+                                    </div>
+                                    <div class="detail">
+                                        <span class="name" :style="{ color: item.user.$userColour }">{{
+                                            item.user.displayName
+                                        }}</span>
+                                    </div>
+                                </template>
+                                <template v-else>
+                                    <span>{{ item.label }}</span>
+                                </template>
+
+                                <CheckIcon :class="['ml-auto size-4', selected ? 'opacity-100' : 'opacity-0']" />
+                            </div>
+                        </template>
+                    </VirtualCombobox>
+                </div>
             </div>
-        </div>
 
-        <template #footer>
-            <Button
-                variant="secondary"
-                class="mr-2"
-                :disabled="inviteDialog.loading || !inviteDialog.userIds.length"
-                @click="showSendInviteDialog"
-                >{{ t('dialog.invite.invite_with_message') }}</Button
-            >
-            <Button :disabled="inviteDialog.loading || !inviteDialog.userIds.length" @click="sendInvite">{{
-                t('dialog.invite.invite')
-            }}</Button>
-        </template>
+            <DialogFooter>
+                <Button
+                    variant="secondary"
+                    class="mr-2"
+                    :disabled="inviteDialog.loading || !inviteDialog.userIds.length"
+                    @click="showSendInviteDialog"
+                    >{{ t('dialog.invite.invite_with_message') }}</Button
+                >
+                <Button :disabled="inviteDialog.loading || !inviteDialog.userIds.length" @click="sendInvite">{{
+                    t('dialog.invite.invite')
+                }}</Button>
+            </DialogFooter>
+        </DialogContent>
+
         <SendInviteDialog
             v-model:sendInviteDialogVisible="sendInviteDialogVisible"
             v-model:sendInviteDialog="sendInviteDialog"
             :invite-dialog="inviteDialog"
             @closeInviteDialog="closeInviteDialog" />
-    </el-dialog>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { computed, ref } from 'vue';
     import { Button } from '@/components/ui/button';
     import { Check as CheckIcon } from 'lucide-vue-next';
diff --git a/src/components/dialogs/InviteDialog/SendInviteConfirmDialog.vue b/src/components/dialogs/InviteDialog/SendInviteConfirmDialog.vue
index a680f5ae..d1bf5318 100644
--- a/src/components/dialogs/InviteDialog/SendInviteConfirmDialog.vue
+++ b/src/components/dialogs/InviteDialog/SendInviteConfirmDialog.vue
@@ -1,27 +1,35 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        :model-value="isSendInviteConfirmDialogVisible"
-        :title="t('dialog.invite_message.header')"
-        width="400px"
-        append-to-body
-        @close="cancelInviteConfirm">
-        <div style="font-size: 12px">
-            <span>{{ t('dialog.invite_message.confirmation') }}</span>
-        </div>
+    <Dialog
+        :open="isSendInviteConfirmDialogVisible"
+        @update:open="
+            (open) => {
+                if (!open) cancelInviteConfirm();
+            }
+        ">
+        <DialogContent class="x-dialog sm:max-w-100">
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.invite_message.header') }}</DialogTitle>
+            </DialogHeader>
 
-        <template #footer>
-            <Button variant="secondary" @click="cancelInviteConfirm">
-                {{ t('dialog.invite_message.cancel') }}
-            </Button>
-            <Button @click="sendInviteConfirm">
-                {{ t('dialog.invite_message.confirm') }}
-            </Button>
-        </template>
-    </el-dialog>
+            <div style="font-size: 12px">
+                <span>{{ t('dialog.invite_message.confirmation') }}</span>
+            </div>
+
+            <DialogFooter>
+                <Button variant="secondary" @click="cancelInviteConfirm">
+                    {{ t('dialog.invite_message.cancel') }}
+                </Button>
+                <Button @click="sendInviteConfirm">
+                    {{ t('dialog.invite_message.confirm') }}
+                </Button>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+    import { Button } from '@/components/ui/button';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
diff --git a/src/components/dialogs/InviteDialog/SendInviteDialog.vue b/src/components/dialogs/InviteDialog/SendInviteDialog.vue
index 9887a16e..b6865922 100644
--- a/src/components/dialogs/InviteDialog/SendInviteDialog.vue
+++ b/src/components/dialogs/InviteDialog/SendInviteDialog.vue
@@ -1,55 +1,62 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        :model-value="sendInviteDialogVisible"
-        :title="t('dialog.invite_message.header')"
-        width="800px"
-        append-to-body
-        @close="cancelSendInvite">
-        <template v-if="isLocalUserVrcPlusSupporter">
-            <!--            <template v-if="gallerySelectDialog.selectedFileId">-->
-            <!--                <div style="display: inline-block; flex: none; margin-right: 5px">-->
-            <!--                    <el-popover placement="right" :width="500px" trigger="click">-->
-            <!--                        <template #reference>-->
-            <!--                            <img-->
-            <!--                                class="x-link"-->
-            <!--                                :src="gallerySelectDialog.selectedImageUrl"-->
-            <!--                                style="flex: none; width: 60px; height: 60px; border-radius: 4px; object-fit: cover" />-->
-            <!--                        </template>-->
-            <!--                        <img-->
-            <!--                            class="x-link"-->
-            <!--                            :src="gallerySelectDialog.selectedImageUrl"-->
-            <!--                            style="height: 500px"-->
-            <!--                            @click="showFullscreenImageDialog(gallerySelectDialog.selectedImageUrl)" />-->
-            <!--                    </el-popover>-->
-            <!--                </div>-->
-            <!--                <el-button size="small" @click="clearImageGallerySelect" style="vertical-align: top">-->
-            <!--                    {{ t('dialog.invite_message.clear_selected_image') }}-->
-            <!--                </el-button>-->
-            <!--            </template>-->
-            <!--            <template v-else>-->
-            <!--                <el-button size="small" @click="showGallerySelectDialog" style="margin-right: 5px">-->
-            <!--                    {{ t('dialog.invite_message.select_image') }}-->
-            <!--                </el-button>-->
-            <!--            </template>-->
-            <input class="inviteImageUploadButton" type="file" accept="image/*" @change="inviteImageUpload" />
-        </template>
+    <Dialog
+        :open="sendInviteDialogVisible"
+        @update:open="
+            (open) => {
+                if (!open) cancelSendInvite();
+            }
+        ">
+        <DialogContent class="x-dialog sm:max-w-200">
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.invite_message.header') }}</DialogTitle>
+            </DialogHeader>
 
-        <DataTableLayout
-            style="margin-top: 10px"
-            :table="inviteMessageTanstackTable"
-            :loading="false"
-            :show-pagination="false"
-            :on-row-click="handleInviteMessageRowClick" />
+            <template v-if="isLocalUserVrcPlusSupporter">
+                <!--            <template v-if="gallerySelectDialog.selectedFileId">-->
+                <!--                <div style="display: inline-block; flex: none; margin-right: 5px">-->
+                <!--                    <el-popover placement="right" :width="500px" trigger="click">-->
+                <!--                        <template #reference>-->
+                <!--                            <img-->
+                <!--                                class="x-link"-->
+                <!--                                :src="gallerySelectDialog.selectedImageUrl"-->
+                <!--                                style="flex: none; width: 60px; height: 60px; border-radius: 4px; object-fit: cover" />-->
+                <!--                        </template>-->
+                <!--                        <img-->
+                <!--                            class="x-link"-->
+                <!--                            :src="gallerySelectDialog.selectedImageUrl"-->
+                <!--                            style="height: 500px"-->
+                <!--                            @click="showFullscreenImageDialog(gallerySelectDialog.selectedImageUrl)" />-->
+                <!--                    </el-popover>-->
+                <!--                </div>-->
+                <!--                <el-button size="small" @click="clearImageGallerySelect" style="vertical-align: top">-->
+                <!--                    {{ t('dialog.invite_message.clear_selected_image') }}-->
+                <!--                </el-button>-->
+                <!--            </template>-->
+                <!--            <template v-else>-->
+                <!--                <el-button size="small" @click="showGallerySelectDialog" style="margin-right: 5px">-->
+                <!--                    {{ t('dialog.invite_message.select_image') }}-->
+                <!--                </el-button>-->
+                <!--            </template>-->
+                <input class="inviteImageUploadButton" type="file" accept="image/*" @change="inviteImageUpload" />
+            </template>
+
+            <DataTableLayout
+                style="margin-top: 10px"
+                :table="inviteMessageTanstackTable"
+                :loading="false"
+                :show-pagination="false"
+                :on-row-click="handleInviteMessageRowClick" />
+
+            <DialogFooter>
+                <Button variant="secondary" @click="cancelSendInvite">
+                    {{ t('dialog.invite_message.cancel') }}
+                </Button>
+                <Button variant="outline" @click="refreshInviteMessageTableData('message')">
+                    {{ t('dialog.invite_message.refresh') }}
+                </Button>
+            </DialogFooter>
+        </DialogContent>
 
-        <template #footer>
-            <Button variant="secondary" @click="cancelSendInvite">
-                {{ t('dialog.invite_message.cancel') }}
-            </Button>
-            <Button variant="outline" @click="refreshInviteMessageTableData('message')">
-                {{ t('dialog.invite_message.refresh') }}
-            </Button>
-        </template>
         <SendInviteConfirmDialog
             v-model:isSendInviteConfirmDialogVisible="isSendInviteConfirmDialogVisible"
             :sendInviteDialog="sendInviteDialog"
@@ -62,10 +69,11 @@
             @update:sendInviteDialog="emit('update:sendInviteDialog', $event)"
             :invite-dialog="inviteDialog"
             @closeInviteDialog="closeInviteDialog" />
-    </el-dialog>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { computed, ref } from 'vue';
     import { Button } from '@/components/ui/button';
     import { DataTableLayout } from '@/components/ui/data-table';
diff --git a/src/components/dialogs/InviteGroupDialog.vue b/src/components/dialogs/InviteGroupDialog.vue
index 723300ff..6ec869a0 100644
--- a/src/components/dialogs/InviteGroupDialog.vue
+++ b/src/components/dialogs/InviteGroupDialog.vue
@@ -1,11 +1,11 @@
 <template>
-    <el-dialog
-        :z-index="inviteGroupDialogIndex"
-        v-model="inviteGroupDialog.visible"
-        :title="t('dialog.invite_to_group.header')"
-        width="450px"
-        append-to-body>
-        <div v-if="inviteGroupDialog.visible" v-loading="inviteGroupDialog.loading">
+    <Dialog v-model:open="inviteGroupDialog.visible">
+        <DialogContent class="sm:max-w-112.5">
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.invite_to_group.header') }}</DialogTitle>
+            </DialogHeader>
+
+            <div v-if="inviteGroupDialog.visible" v-loading="inviteGroupDialog.loading">
             <span>{{ t('dialog.invite_to_group.description') }}</span>
             <br />
 
@@ -64,20 +64,25 @@
                     </template>
                 </VirtualCombobox>
             </div>
-        </div>
-        <template #footer>
-            <Button
-                :disabled="inviteGroupDialog.loading || !inviteGroupDialog.userIds.length || !inviteGroupDialog.groupId"
-                @click="sendGroupInvite">
-                {{ t('dialog.invite_to_group.invite') }}
-            </Button>
-        </template>
-    </el-dialog>
+            </div>
+
+            <DialogFooter>
+                <Button
+                    :disabled="
+                        inviteGroupDialog.loading || !inviteGroupDialog.userIds.length || !inviteGroupDialog.groupId
+                    "
+                    @click="sendGroupInvite">
+                    {{ t('dialog.invite_to_group.invite') }}
+                </Button>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
-    import { computed, nextTick, ref, watch } from 'vue';
+    import { computed, watch } from 'vue';
     import { Button } from '@/components/ui/button';
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { Check as CheckIcon } from 'lucide-vue-next';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
@@ -87,7 +92,6 @@
     import { useFriendStore, useGroupStore, useModalStore } from '../../stores';
     import { groupRequest, userRequest } from '../../api';
     import { VirtualCombobox } from '../ui/virtual-combobox';
-    import { getNextDialogIndex } from '../../shared/utils/base/ui';
 
     import configRepository from '../../service/config';
 
@@ -109,8 +113,6 @@
         }
     );
 
-    const inviteGroupDialogIndex = ref(2000);
-
     const groupsWithInvitePermission = computed(() => {
         return Array.from(currentUserGroups.value.values()).filter((group) =>
             hasGroupPermission(group, 'group-invites-manage')
@@ -223,9 +225,6 @@
     );
 
     function initDialog() {
-        nextTick(() => {
-            inviteGroupDialogIndex.value = getNextDialogIndex();
-        });
         const D = inviteGroupDialog.value;
         if (D.groupId) {
             groupRequest
diff --git a/src/components/dialogs/LaunchDialog.vue b/src/components/dialogs/LaunchDialog.vue
index 8d308f72..58da2139 100644
--- a/src/components/dialogs/LaunchDialog.vue
+++ b/src/components/dialogs/LaunchDialog.vue
@@ -1,5 +1,9 @@
 <template>
-    <el-dialog :z-index="launchDialogIndex" v-model="isVisible" :title="t('dialog.launch.header')" width="450px">
+    <Dialog v-model:open="isVisible">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.launch.header') }}</DialogTitle>
+            </DialogHeader>
         <FieldGroup class="gap-4">
             <Field>
                 <FieldLabel>{{ t('dialog.launch.url') }}</FieldLabel>
@@ -63,8 +67,7 @@
                 </FieldContent>
             </Field>
         </FieldGroup>
-        <template #footer>
-            <div class="flex justify-end">
+            <DialogFooter>
                 <Button
                     class="mr-1.5"
                     variant="outline"
@@ -117,14 +120,16 @@
                         </DropdownMenuContent>
                     </DropdownMenu>
                 </ButtonGroup>
-            </div>
-        </template>
-        <InviteDialog :invite-dialog="inviteDialog" @closeInviteDialog="closeInviteDialog" />
-    </el-dialog>
+            </DialogFooter>
+
+            <InviteDialog :invite-dialog="inviteDialog" @closeInviteDialog="closeInviteDialog" />
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
-    import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
+    import { computed, onBeforeUnmount, ref, watch } from 'vue';
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import {
         DropdownMenu,
         DropdownMenuContent,
@@ -150,7 +155,6 @@
     } from '../../stores';
     import { checkCanInvite, getLaunchURL, isRealInstance, parseLocation } from '../../shared/utils';
     import { instanceRequest, worldRequest } from '../../api';
-    import { getNextDialogIndex } from '../../shared/utils/base/ui';
 
     import InviteDialog from './InviteDialog/InviteDialog.vue';
     import configRepository from '../../service/config';
@@ -171,8 +175,6 @@
         launchDialog.value.desktop ? t('dialog.launch.start_as_desktop') : t('dialog.launch.launch')
     );
 
-    const launchDialogIndex = ref(2000);
-
     let launchAsDesktopTimeoutId;
 
     onBeforeUnmount(() => {
@@ -312,9 +314,6 @@
         if (!isRealInstance(tag)) {
             return;
         }
-        nextTick(() => {
-            launchDialogIndex.value = getNextDialogIndex();
-        });
         const D = launchDialog.value;
         D.tag = tag;
         D.secureOrShortName = shortName;
diff --git a/src/components/dialogs/ModerateGroupDialog.vue b/src/components/dialogs/ModerateGroupDialog.vue
index 3c2d7716..dceb0246 100644
--- a/src/components/dialogs/ModerateGroupDialog.vue
+++ b/src/components/dialogs/ModerateGroupDialog.vue
@@ -1,11 +1,11 @@
 <template>
-    <el-dialog
-        :z-index="moderateGroupDialogIndex"
-        v-model="moderateGroupDialog.visible"
-        :title="t('dialog.moderate_group.header')"
-        width="450px"
-        append-to-body>
-        <div v-if="moderateGroupDialog.visible">
+    <Dialog v-model:open="moderateGroupDialog.visible">
+        <DialogContent class="sm:max-w-112.5">
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.moderate_group.header') }}</DialogTitle>
+            </DialogHeader>
+
+            <div v-if="moderateGroupDialog.visible">
             <div class="x-friend-item" style="cursor: default">
                 <div class="avatar">
                     <img :src="userImage(moderateGroupDialog.userObject)" loading="lazy" />
@@ -37,30 +37,32 @@
                     </template>
                 </VirtualCombobox>
             </div>
-        </div>
-        <template #footer>
-            <Button
-                :disabled="!moderateGroupDialog.userId || !moderateGroupDialog.groupId"
-                @click="
-                    showGroupMemberModerationDialog(moderateGroupDialog.groupId, moderateGroupDialog.userId);
-                    moderateGroupDialog.visible = false;
-                ">
-                {{ t('dialog.moderate_group.moderation_tools') }}
-            </Button>
-        </template>
-    </el-dialog>
+            </div>
+
+            <DialogFooter>
+                <Button
+                    :disabled="!moderateGroupDialog.userId || !moderateGroupDialog.groupId"
+                    @click="
+                        showGroupMemberModerationDialog(moderateGroupDialog.groupId, moderateGroupDialog.userId);
+                        moderateGroupDialog.visible = false;
+                    ">
+                    {{ t('dialog.moderate_group.moderation_tools') }}
+                </Button>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
-    import { computed, nextTick, ref, watch } from 'vue';
+    import { computed, watch } from 'vue';
     import { Button } from '@/components/ui/button';
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
     import { groupRequest, userRequest } from '../../api';
     import { hasGroupModerationPermission, userImage } from '../../shared/utils';
     import { VirtualCombobox } from '../ui/virtual-combobox';
-    import { getNextDialogIndex } from '../../shared/utils/base/ui';
     import { useGroupStore } from '../../stores';
 
     const { currentUserGroups, moderateGroupDialog } = storeToRefs(useGroupStore());
@@ -99,12 +101,7 @@
         }
     );
 
-    const moderateGroupDialogIndex = ref(2000);
-
     function initDialog() {
-        nextTick(() => {
-            moderateGroupDialogIndex.value = getNextDialogIndex();
-        });
         const D = moderateGroupDialog.value;
         if (D.groupId) {
             groupRequest
diff --git a/src/components/dialogs/NewInstanceDialog.vue b/src/components/dialogs/NewInstanceDialog.vue
index 7adb0c4a..48b8b5bb 100644
--- a/src/components/dialogs/NewInstanceDialog.vue
+++ b/src/components/dialogs/NewInstanceDialog.vue
@@ -1,10 +1,9 @@
 <template>
-    <el-dialog
-        :z-index="newInstanceDialogIndex"
-        v-model="newInstanceDialog.visible"
-        :title="t('dialog.new_instance.header')"
-        width="650px"
-        append-to-body>
+    <Dialog v-model:open="newInstanceDialog.visible">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.new_instance.header') }}</DialogTitle>
+            </DialogHeader>
         <TabsUnderline
             v-model="newInstanceDialog.selectedTab"
             :items="newInstanceTabs"
@@ -435,7 +434,7 @@
                 </FieldGroup>
             </template>
         </TabsUnderline>
-        <template v-if="newInstanceDialog.selectedTab === 'Normal'" #footer>
+        <DialogFooter v-if="newInstanceDialog.selectedTab === 'Normal'">
             <template v-if="newInstanceDialog.instanceCreated">
                 <Button variant="outline" class="mr-2" @click="copyInstanceUrl(newInstanceDialog.location)">{{
                     t('dialog.new_instance.copy_url')
@@ -473,8 +472,8 @@
             <template v-else>
                 <Button @click="handleCreateNewInstance">{{ t('dialog.new_instance.create_instance') }}</Button>
             </template>
-        </template>
-        <template v-else-if="newInstanceDialog.selectedTab === 'Legacy'" #footer>
+        </DialogFooter>
+        <DialogFooter v-else-if="newInstanceDialog.selectedTab === 'Legacy'">
             <Button variant="outline" class="mr-2" @click="copyInstanceUrl(newInstanceDialog.location)">{{
                 t('dialog.new_instance.copy_url')
             }}</Button>
@@ -506,14 +505,17 @@
                     t('dialog.new_instance.launch')
                 }}</Button>
             </template>
-        </template>
+        </DialogFooter>
+        </DialogContent>
+
         <InviteDialog :invite-dialog="inviteDialog" @closeInviteDialog="closeInviteDialog" />
-    </el-dialog>
+    </Dialog>
 </template>
 
 <script setup>
     import { Field, FieldContent, FieldGroup, FieldLabel } from '@/components/ui/field';
-    import { computed, nextTick, ref, watch } from 'vue';
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+    import { computed, ref, watch } from 'vue';
     import { Button } from '@/components/ui/button';
     import { Check as CheckIcon } from 'lucide-vue-next';
     import { Checkbox } from '@/components/ui/checkbox';
@@ -545,7 +547,6 @@
     import { groupRequest, instanceRequest, worldRequest } from '../../api';
     import { ToggleGroup, ToggleGroupItem } from '../ui/toggle-group';
     import { VirtualCombobox } from '../ui/virtual-combobox';
-    import { getNextDialogIndex } from '../../shared/utils/base/ui';
 
     import InviteDialog from './InviteDialog/InviteDialog.vue';
     import configRepository from '../../service/config';
@@ -572,8 +573,6 @@
     const { currentUser, isLocalUserVrcPlusSupporter } = storeToRefs(useUserStore());
     const { canOpenInstanceInGame } = useInviteStore();
 
-    const newInstanceDialogIndex = ref(2000);
-
     const newInstanceDialog = ref({
         visible: false,
         // loading: false,
@@ -778,9 +777,6 @@
         if (!isRealInstance(tag)) {
             return;
         }
-        nextTick(() => {
-            newInstanceDialogIndex.value = getNextDialogIndex();
-        });
         const D = newInstanceDialog.value;
         const L = parseLocation(tag);
         if (D.worldId === L.worldId) {
diff --git a/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesGroupDialog.vue b/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesGroupDialog.vue
index 95147695..8a5c2eba 100644
--- a/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesGroupDialog.vue
+++ b/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesGroupDialog.vue
@@ -1,34 +1,36 @@
 <template>
-    <el-dialog
-        :z-index="previousInstancesGroupDialogIndex"
-        v-model="isVisible"
-        :title="t('dialog.previous_instances.header')"
-        width="1000px"
-        append-to-body>
-        <DataTableLayout
-            class="min-w-0 w-full"
-            :table="table"
-            :loading="loading"
-            :table-style="tableStyle"
-            :page-sizes="pageSizes"
-            :total-items="totalItems"
-            :on-page-size-change="handlePageSizeChange">
-            <template #toolbar>
-                <div style="display: flex; align-items: center; justify-content: space-between">
-                    <span style="font-size: 14px" v-text="previousInstancesGroupDialog.groupRef.name"></span>
-                    <InputGroupField
-                        class="w-1/3"
-                        v-model="search"
-                        :placeholder="t('dialog.previous_instances.search_placeholder')"
-                        clearable />
-                </div>
-            </template>
-        </DataTableLayout>
-    </el-dialog>
+    <Dialog v-model:open="isVisible">
+        <DialogContent class="sm:max-w-250">
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.previous_instances.header') }}</DialogTitle>
+            </DialogHeader>
+
+            <DataTableLayout
+                class="min-w-0 w-full"
+                :table="table"
+                :loading="loading"
+                :table-style="tableStyle"
+                :page-sizes="pageSizes"
+                :total-items="totalItems"
+                :on-page-size-change="handlePageSizeChange">
+                <template #toolbar>
+                    <div style="display: flex; align-items: center; justify-content: space-between">
+                        <span style="font-size: 14px" v-text="previousInstancesGroupDialog.groupRef.name"></span>
+                        <InputGroupField
+                            class="w-1/3"
+                            v-model="search"
+                            :placeholder="t('dialog.previous_instances.search_placeholder')"
+                            clearable />
+                    </div>
+                </template>
+            </DataTableLayout>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
-    import { computed, nextTick, ref, watch } from 'vue';
+    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+    import { computed, ref, watch } from 'vue';
     import { InputGroupField } from '@/components/ui/input-group';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
@@ -44,7 +46,6 @@
     import { DataTableLayout } from '../../ui/data-table';
     import { createColumns } from './previousInstancesGroupColumns.jsx';
     import { database } from '../../../service/database';
-    import { getNextDialogIndex } from '../../../shared/utils/base/ui';
     import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
 
     const { showPreviousInstancesInfoDialog } = useInstanceStore();
@@ -52,7 +53,6 @@
     const { stringComparer } = storeToRefs(useSearchStore());
     const { t } = useI18n();
 
-    const previousInstancesGroupDialogIndex = ref(2000);
     const loading = ref(false);
 
     const modalStore = useModalStore();
@@ -140,9 +140,6 @@
         () => props.previousInstancesGroupDialog.openFlg,
         () => {
             if (props.previousInstancesGroupDialog.visible) {
-                nextTick(() => {
-                    previousInstancesGroupDialogIndex.value = getNextDialogIndex();
-                });
                 refreshPreviousInstancesGroupTable();
             }
         }
diff --git a/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue b/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue
index 686ceea0..5d418a39 100644
--- a/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue
+++ b/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue
@@ -1,35 +1,41 @@
 <template>
-    <el-dialog
-        :z-index="previousInstancesInfoDialogIndex"
-        :model-value="previousInstancesInfoDialogVisible"
-        :title="t('dialog.previous_instances.info')"
-        width="800px"
-        :fullscreen="fullscreen"
-        destroy-on-close
-        @close="closeDialog">
-        <DataTableLayout
-            class="min-w-0 w-full"
-            :table="table"
-            :loading="loading"
-            :table-style="tableStyle"
-            :page-sizes="pageSizes"
-            :total-items="totalItems"
-            :on-page-size-change="handlePageSizeChange">
-            <template #toolbar>
-                <div style="display: flex; align-items: center; justify-content: space-between">
-                    <Location :location="location.tag" style="font-size: 14px" />
-                    <InputGroupField
-                        v-model="search"
-                        :placeholder="t('dialog.previous_instances.search_placeholder')"
-                        style="width: 150px"
-                        clearable />
-                </div>
-            </template>
-        </DataTableLayout>
-    </el-dialog>
+    <Dialog
+        :open="previousInstancesInfoDialogVisible"
+        @update:open="
+            (open) => {
+                if (!open) closeDialog();
+            }
+        ">
+        <DialogContent class="sm:max-w-200">
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.previous_instances.info') }}</DialogTitle>
+            </DialogHeader>
+
+            <DataTableLayout
+                class="min-w-0 w-full"
+                :table="table"
+                :loading="loading"
+                :table-style="tableStyle"
+                :page-sizes="pageSizes"
+                :total-items="totalItems"
+                :on-page-size-change="handlePageSizeChange">
+                <template #toolbar>
+                    <div style="display: flex; align-items: center; justify-content: space-between">
+                        <Location :location="location.tag" style="font-size: 14px" />
+                        <InputGroupField
+                            v-model="search"
+                            :placeholder="t('dialog.previous_instances.search_placeholder')"
+                            style="width: 150px"
+                            clearable />
+                    </div>
+                </template>
+            </DataTableLayout>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { computed, nextTick, ref, watch } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
@@ -40,7 +46,6 @@
     import { InputGroupField } from '../../../components/ui/input-group';
     import { createColumns } from './previousInstancesInfoColumns.jsx';
     import { database } from '../../../service/database';
-    import { getNextDialogIndex } from '../../../shared/utils/base/ui';
     import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
 
     const { lookupUser } = useUserStore();
@@ -49,8 +54,6 @@
     const { gameLogIsFriend, gameLogIsFavorite } = useGameLogStore();
     const { t } = useI18n();
 
-    const previousInstancesInfoDialogIndex = ref(2000);
-
     const loading = ref(false);
     const rawRows = ref([]);
     const search = ref('');
@@ -147,7 +150,6 @@
     );
 
     function init() {
-        previousInstancesInfoDialogIndex.value = getNextDialogIndex();
         loading.value = true;
         location.value = parseLocation(previousInstancesInfoDialogInstanceId.value);
     }
diff --git a/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesWorldDialog.vue b/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesWorldDialog.vue
index d300644d..62b0c247 100644
--- a/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesWorldDialog.vue
+++ b/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesWorldDialog.vue
@@ -1,35 +1,37 @@
 <template>
-    <el-dialog
-        :z-index="previousInstancesWorldDialogIndex"
-        v-model="isVisible"
-        :title="t('dialog.previous_instances.header')"
-        width="1000px"
-        append-to-body>
-        <DataTableLayout
-            class="min-w-0 w-full"
-            :table="table"
-            :loading="loading"
-            :table-style="tableStyle"
-            :page-sizes="pageSizes"
-            :total-items="totalItems"
-            :on-page-size-change="handlePageSizeChange">
-            <template #toolbar>
-                <div style="display: flex; align-items: center; justify-content: space-between">
-                    <span style="font-size: 14px" v-text="previousInstancesWorldDialog.worldRef.name"></span>
-                    <InputGroupField
-                        v-model="search"
-                        :placeholder="t('dialog.previous_instances.search_placeholder')"
-                        clearable
-                        class="w-1/3"
-                        style="display: block" />
-                </div>
-            </template>
-        </DataTableLayout>
-    </el-dialog>
+    <Dialog v-model:open="isVisible">
+        <DialogContent class="sm:max-w-250">
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.previous_instances.header') }}</DialogTitle>
+            </DialogHeader>
+
+            <DataTableLayout
+                class="min-w-0 w-full"
+                :table="table"
+                :loading="loading"
+                :table-style="tableStyle"
+                :page-sizes="pageSizes"
+                :total-items="totalItems"
+                :on-page-size-change="handlePageSizeChange">
+                <template #toolbar>
+                    <div style="display: flex; align-items: center; justify-content: space-between">
+                        <span style="font-size: 14px" v-text="previousInstancesWorldDialog.worldRef.name"></span>
+                        <InputGroupField
+                            v-model="search"
+                            :placeholder="t('dialog.previous_instances.search_placeholder')"
+                            clearable
+                            class="w-1/3"
+                            style="display: block" />
+                    </div>
+                </template>
+            </DataTableLayout>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
-    import { computed, nextTick, ref, watch } from 'vue';
+    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+    import { computed, ref, watch } from 'vue';
     import { InputGroupField } from '@/components/ui/input-group';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
@@ -52,7 +54,6 @@
     import { DataTableLayout } from '../../ui/data-table';
     import { createColumns } from './previousInstancesWorldColumns.jsx';
     import { database } from '../../../service/database';
-    import { getNextDialogIndex } from '../../../shared/utils/base/ui';
     import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
 
     const { t } = useI18n();
@@ -79,7 +80,6 @@
     const pageSize = ref(10);
     const tableStyle = { maxHeight: '400px' };
     const loading = ref(false);
-    const previousInstancesWorldDialogIndex = ref(2000);
 
     const isVisible = computed({
         get: () => props.previousInstancesWorldDialog.visible,
@@ -188,9 +188,6 @@
         () => props.previousInstancesWorldDialog.openFlg,
         () => {
             if (props.previousInstancesWorldDialog.visible) {
-                nextTick(() => {
-                    previousInstancesWorldDialogIndex.value = getNextDialogIndex();
-                });
                 refreshPreviousInstancesWorldTable();
             }
         }
diff --git a/src/components/dialogs/SendBoopDialog.vue b/src/components/dialogs/SendBoopDialog.vue
index c97d4f37..6c7f65d5 100644
--- a/src/components/dialogs/SendBoopDialog.vue
+++ b/src/components/dialogs/SendBoopDialog.vue
@@ -1,10 +1,9 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        v-model="sendBoopDialog.visible"
-        :title="t('dialog.boop_dialog.header')"
-        width="450px"
-        @close="closeDialog">
+    <Dialog v-model:open="sendBoopDialog.visible">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.boop_dialog.header') }}</DialogTitle>
+            </DialogHeader>
         <span>{{ displayName }}</span>
 
         <br />
@@ -58,7 +57,7 @@
             </div>
         </div>
 
-        <template #footer>
+            <DialogFooter>
             <Button size="sm" variant="outline" class="mr-2" @click="showGalleryPage">{{
                 t('dialog.boop_dialog.emoji_manager')
             }}</Button>
@@ -68,14 +67,16 @@
             <Button size="sm" :disabled="!sendBoopDialog.userId" @click="sendBoop">{{
                 t('dialog.boop_dialog.send')
             }}</Button>
-        </template>
-    </el-dialog>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
     import { computed, ref, watch } from 'vue';
     import { Button } from '@/components/ui/button';
     import { Check as CheckIcon } from 'lucide-vue-next';
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
diff --git a/src/components/dialogs/UserDialog/BioDialog.vue b/src/components/dialogs/UserDialog/BioDialog.vue
index f7f5154a..0206747a 100644
--- a/src/components/dialogs/UserDialog/BioDialog.vue
+++ b/src/components/dialogs/UserDialog/BioDialog.vue
@@ -1,56 +1,58 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        v-model="bioDialog.visible"
-        :title="t('dialog.bio.header')"
-        width="600px"
-        append-to-body>
-        <div v-loading="bioDialog.loading">
-            <InputGroupTextareaField
-                v-model="bioDialog.bio"
-                :maxlength="512"
-                :rows="5"
-                :placeholder="t('dialog.bio.bio_placeholder')"
-                class="mb-2.5"
-                show-count />
+    <Dialog v-model:open="bioDialog.visible">
+        <DialogContent class="x-dialog sm:max-w-150">
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.bio.header') }}</DialogTitle>
+            </DialogHeader>
 
-            <InputGroupAction
-                v-for="(link, index) in bioDialog.bioLinks"
-                :key="index"
-                v-model="bioDialog.bioLinks[index]"
-                :maxlength="64"
-                show-count
-                size="sm"
-                style="margin-top: 5px">
-                <template #leading>
-                    <img :src="getFaviconUrl(link)" style="width: 16px; height: 16px; vertical-align: middle" />
-                </template>
-                <template #actions>
-                    <Button variant="ghost" size="icon-sm" @click="bioDialog.bioLinks.splice(index, 1)"
-                        ><Trash2 class="size-4"
-                    /></Button>
-                </template>
-            </InputGroupAction>
+            <div v-loading="bioDialog.loading">
+                <InputGroupTextareaField
+                    v-model="bioDialog.bio"
+                    :maxlength="512"
+                    :rows="5"
+                    :placeholder="t('dialog.bio.bio_placeholder')"
+                    class="mb-2.5"
+                    show-count />
 
-            <Button
-                variant="outline"
-                :disabled="bioDialog.bioLinks.length >= 3"
-                size="sm"
-                class="mt-2"
-                @click="bioDialog.bioLinks.push('')">
-                {{ t('dialog.bio.add_link') }}
-            </Button>
-        </div>
+                <InputGroupAction
+                    v-for="(link, index) in bioDialog.bioLinks"
+                    :key="index"
+                    v-model="bioDialog.bioLinks[index]"
+                    :maxlength="64"
+                    show-count
+                    size="sm"
+                    style="margin-top: 5px">
+                    <template #leading>
+                        <img :src="getFaviconUrl(link)" style="width: 16px; height: 16px; vertical-align: middle" />
+                    </template>
+                    <template #actions>
+                        <Button variant="ghost" size="icon-sm" @click="bioDialog.bioLinks.splice(index, 1)"
+                            ><Trash2 class="size-4"
+                        /></Button>
+                    </template>
+                </InputGroupAction>
 
-        <template #footer>
-            <Button :disabled="bioDialog.loading" @click="saveBio">
-                {{ t('dialog.bio.update') }}
-            </Button>
-        </template>
-    </el-dialog>
+                <Button
+                    variant="outline"
+                    :disabled="bioDialog.bioLinks.length >= 3"
+                    size="sm"
+                    class="mt-2"
+                    @click="bioDialog.bioLinks.push('')">
+                    {{ t('dialog.bio.add_link') }}
+                </Button>
+            </div>
+
+            <DialogFooter>
+                <Button :disabled="bioDialog.loading" @click="saveBio">
+                    {{ t('dialog.bio.update') }}
+                </Button>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { InputGroupAction, InputGroupTextareaField } from '@/components/ui/input-group';
     import { Button } from '@/components/ui/button';
     import { Trash2 } from 'lucide-vue-next';
diff --git a/src/components/dialogs/UserDialog/EditNoteAndMemoDialog.vue b/src/components/dialogs/UserDialog/EditNoteAndMemoDialog.vue
index 9f966ca8..d31ba61c 100644
--- a/src/components/dialogs/UserDialog/EditNoteAndMemoDialog.vue
+++ b/src/components/dialogs/UserDialog/EditNoteAndMemoDialog.vue
@@ -1,45 +1,49 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        :model-value="props.visible"
-        title="Edit Note And Memo"
-        :show-close="false"
-        top="30vh"
-        width="500px"
-        append-to-body
-        @close="cancel">
-        <template v-if="!hideUserNotes || (hideUserNotes && hideUserMemos)">
-            <span class="name my-2">{{ t('dialog.user.info.note') }}</span>
-            <br />
-            <InputGroupTextareaField
-                v-model="note"
-                :autosize="{ minRows: 6, maxRows: 20 }"
-                :maxlength="256"
-                :rows="6"
-                :placeholder="t('dialog.user.info.note_placeholder')"
-                input-class="extra resize-none"
-                class="my-2"
-                show-count />
-        </template>
-        <template v-if="!hideUserMemos || (hideUserNotes && hideUserMemos)">
-            <span class="name">{{ t('dialog.user.info.memo') }}</span>
-            <InputGroupTextareaField
-                v-model="memo"
-                class="extra mt-2"
-                :rows="6"
-                :placeholder="t('dialog.user.info.memo_placeholder')"
-                input-class="resize-none min-h-0" />
-        </template>
-        <template #footer>
-            <div class="dialog-footer">
+    <Dialog
+        :open="props.visible"
+        @update:open="
+            (open) => {
+                if (!open) cancel();
+            }
+        ">
+        <DialogContent class="x-dialog sm:max-w-125 translate-y-0" style="top: 30vh" :show-close-button="false">
+            <DialogHeader>
+                <DialogTitle>Edit Note And Memo</DialogTitle>
+            </DialogHeader>
+
+            <template v-if="!hideUserNotes || (hideUserNotes && hideUserMemos)">
+                <span class="name my-2">{{ t('dialog.user.info.note') }}</span>
+                <br />
+                <InputGroupTextareaField
+                    v-model="note"
+                    :autosize="{ minRows: 6, maxRows: 20 }"
+                    :maxlength="256"
+                    :rows="6"
+                    :placeholder="t('dialog.user.info.note_placeholder')"
+                    input-class="extra resize-none"
+                    class="my-2"
+                    show-count />
+            </template>
+            <template v-if="!hideUserMemos || (hideUserNotes && hideUserMemos)">
+                <span class="name">{{ t('dialog.user.info.memo') }}</span>
+                <InputGroupTextareaField
+                    v-model="memo"
+                    class="extra mt-2"
+                    :rows="6"
+                    :placeholder="t('dialog.user.info.memo_placeholder')"
+                    input-class="resize-none min-h-0" />
+            </template>
+
+            <DialogFooter>
                 <Button variant="secondary" @click="cancel" class="mr-2">Cancel</Button>
                 <Button @click="saveChanges">Confirm</Button>
-            </div>
-        </template>
-    </el-dialog>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { ref, watch } from 'vue';
     import { Button } from '@/components/ui/button';
     import { InputGroupTextareaField } from '@/components/ui/input-group';
diff --git a/src/components/dialogs/UserDialog/LanguageDialog.vue b/src/components/dialogs/UserDialog/LanguageDialog.vue
index 2a9e6bde..c85f3699 100644
--- a/src/components/dialogs/UserDialog/LanguageDialog.vue
+++ b/src/components/dialogs/UserDialog/LanguageDialog.vue
@@ -1,63 +1,67 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        v-model="languageDialog.visible"
-        :title="t('dialog.language.header')"
-        width="400px"
-        append-to-body>
-        <div v-loading="languageDialog.loading">
-            <div v-for="item in currentUser.$languages" :key="item.key" style="margin: 6px 0">
-                <Badge variant="outline" style="margin-right: 5px">
-                    <span
-                        class="flags"
-                        :class="languageClass(item.key)"
-                        style="display: inline-block; margin-right: 5px"></span>
-                    {{ item.value }} ({{ item.key.toUpperCase() }})
-                    <button
-                        type="button"
-                        style="
-                            margin-left: 6px;
-                            border: none;
-                            background: transparent;
-                            padding: 0;
-                            display: inline-flex;
-                            align-items: center;
-                            color: inherit;
-                            cursor: pointer;
-                        "
-                        @click="removeUserLanguage(item.key)">
-                        <X class="h-3 w-3" />
-                    </button>
-                </Badge>
+    <Dialog v-model:open="languageDialog.visible">
+        <DialogContent class="x-dialog sm:max-w-100">
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.language.header') }}</DialogTitle>
+            </DialogHeader>
+
+            <div v-loading="languageDialog.loading">
+                <div v-for="item in currentUser.$languages" :key="item.key" style="margin: 6px 0">
+                    <Badge variant="outline" style="margin-right: 5px">
+                        <span
+                            class="flags"
+                            :class="languageClass(item.key)"
+                            style="display: inline-block; margin-right: 5px"></span>
+                        {{ item.value }} ({{ item.key.toUpperCase() }})
+                        <button
+                            type="button"
+                            style="
+                                margin-left: 6px;
+                                border: none;
+                                background: transparent;
+                                padding: 0;
+                                display: inline-flex;
+                                align-items: center;
+                                color: inherit;
+                                cursor: pointer;
+                            "
+                            @click="removeUserLanguage(item.key)">
+                            <X class="h-3 w-3" />
+                        </button>
+                    </Badge>
+                </div>
+                <Select
+                    :model-value="selectedLanguageToAdd"
+                    :disabled="
+                        languageDialog.loading || (currentUser.$languages && currentUser.$languages.length === 3)
+                    "
+                    @update:modelValue="handleAddUserLanguage">
+                    <SelectTrigger size="sm" style="margin-top: 14px">
+                        <SelectValue :placeholder="t('dialog.language.select_language')" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectGroup>
+                            <SelectItem
+                                v-for="item in languageDialog.languages"
+                                :key="item.key"
+                                :value="item.key"
+                                :text-value="item.value">
+                                <span
+                                    class="flags"
+                                    :class="languageClass(item.key)"
+                                    style="display: inline-block; margin-right: 5px"></span>
+                                {{ item.value }} ({{ item.key.toUpperCase() }})
+                            </SelectItem>
+                        </SelectGroup>
+                    </SelectContent>
+                </Select>
             </div>
-            <Select
-                :model-value="selectedLanguageToAdd"
-                :disabled="languageDialog.loading || (currentUser.$languages && currentUser.$languages.length === 3)"
-                @update:modelValue="handleAddUserLanguage">
-                <SelectTrigger size="sm" style="margin-top: 14px">
-                    <SelectValue :placeholder="t('dialog.language.select_language')" />
-                </SelectTrigger>
-                <SelectContent>
-                    <SelectGroup>
-                        <SelectItem
-                            v-for="item in languageDialog.languages"
-                            :key="item.key"
-                            :value="item.key"
-                            :text-value="item.value">
-                            <span
-                                class="flags"
-                                :class="languageClass(item.key)"
-                                style="display: inline-block; margin-right: 5px"></span>
-                            {{ item.value }} ({{ item.key.toUpperCase() }})
-                        </SelectItem>
-                    </SelectGroup>
-                </SelectContent>
-            </Select>
-        </div>
-    </el-dialog>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { X } from 'lucide-vue-next';
     import { ref } from 'vue';
     import { storeToRefs } from 'pinia';
diff --git a/src/components/dialogs/UserDialog/PreviousInstancesUserDialog.vue b/src/components/dialogs/UserDialog/PreviousInstancesUserDialog.vue
index 8aa43805..9952f68b 100644
--- a/src/components/dialogs/UserDialog/PreviousInstancesUserDialog.vue
+++ b/src/components/dialogs/UserDialog/PreviousInstancesUserDialog.vue
@@ -1,35 +1,37 @@
 <template>
-    <el-dialog
-        :z-index="previousInstancesUserDialogIndex"
-        v-model="isVisible"
-        :title="t('dialog.previous_instances.header')"
-        width="1000px"
-        append-to-body>
-        <DataTableLayout
-            class="min-w-0 w-full"
-            :table="table"
-            :loading="loading"
-            :table-style="tableStyle"
-            :page-sizes="pageSizes"
-            :total-items="totalItems"
-            :on-page-size-change="handlePageSizeChange">
-            <template #toolbar>
-                <div style="display: flex; align-items: center; justify-content: space-between">
-                    <span style="font-size: 14px" v-text="previousInstancesUserDialog.userRef.displayName"></span>
-                    <InputGroupField
-                        v-model="search"
-                        :placeholder="t('dialog.previous_instances.search_placeholder')"
-                        clearable
-                        class="w-1/3"
-                        style="display: block" />
-                </div>
-            </template>
-        </DataTableLayout>
-    </el-dialog>
+    <Dialog v-model:open="isVisible">
+        <DialogContent class="sm:max-w-250">
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.previous_instances.header') }}</DialogTitle>
+            </DialogHeader>
+
+            <DataTableLayout
+                class="min-w-0 w-full"
+                :table="table"
+                :loading="loading"
+                :table-style="tableStyle"
+                :page-sizes="pageSizes"
+                :total-items="totalItems"
+                :on-page-size-change="handlePageSizeChange">
+                <template #toolbar>
+                    <div style="display: flex; align-items: center; justify-content: space-between">
+                        <span style="font-size: 14px" v-text="previousInstancesUserDialog.userRef.displayName"></span>
+                        <InputGroupField
+                            v-model="search"
+                            :placeholder="t('dialog.previous_instances.search_placeholder')"
+                            clearable
+                            class="w-1/3"
+                            style="display: block" />
+                    </div>
+                </template>
+            </DataTableLayout>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
-    import { computed, nextTick, ref, watch } from 'vue';
+    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+    import { computed, ref, watch } from 'vue';
     import { InputGroupField } from '@/components/ui/input-group';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
@@ -52,7 +54,6 @@
     import { DataTableLayout } from '../../ui/data-table';
     import { createColumns } from './previousInstancesUserColumns.jsx';
     import { database } from '../../../service/database';
-    import { getNextDialogIndex } from '../../../shared/utils/base/ui';
     import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
 
     const props = defineProps({
@@ -90,8 +91,6 @@
     const vrcxStore = useVrcxStore();
     const { t } = useI18n();
 
-    const previousInstancesUserDialogIndex = ref(2000);
-
     const isVisible = computed({
         get: () => props.previousInstancesUserDialog.visible,
         set: (value) => {
@@ -178,9 +177,6 @@
         () => props.previousInstancesUserDialog.openFlg,
         () => {
             if (props.previousInstancesUserDialog.visible) {
-                nextTick(() => {
-                    previousInstancesUserDialogIndex.value = getNextDialogIndex();
-                });
                 refreshPreviousInstancesUserTable();
             }
         }
diff --git a/src/components/dialogs/UserDialog/PronounsDialog.vue b/src/components/dialogs/UserDialog/PronounsDialog.vue
index 26a34c1f..32e8ba56 100644
--- a/src/components/dialogs/UserDialog/PronounsDialog.vue
+++ b/src/components/dialogs/UserDialog/PronounsDialog.vue
@@ -1,27 +1,30 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        v-model="pronounsDialog.visible"
-        :title="t('dialog.pronouns.header')"
-        width="600px"
-        append-to-body>
-        <div v-loading="pronounsDialog.loading">
-            <InputGroupTextareaField
-                v-model="pronounsDialog.pronouns"
-                :maxlength="32"
-                :rows="2"
-                :placeholder="t('dialog.pronouns.pronouns_placeholder')"
-                show-count />
-        </div>
-        <template #footer>
-            <Button :disabled="pronounsDialog.loading" @click="savePronouns">
-                {{ t('dialog.pronouns.update') }}
-            </Button>
-        </template>
-    </el-dialog>
+    <Dialog v-model:open="pronounsDialog.visible">
+        <DialogContent class="x-dialog sm:max-w-150">
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.pronouns.header') }}</DialogTitle>
+            </DialogHeader>
+
+            <div v-loading="pronounsDialog.loading">
+                <InputGroupTextareaField
+                    v-model="pronounsDialog.pronouns"
+                    :maxlength="32"
+                    :rows="2"
+                    :placeholder="t('dialog.pronouns.pronouns_placeholder')"
+                    show-count />
+            </div>
+
+            <DialogFooter>
+                <Button :disabled="pronounsDialog.loading" @click="savePronouns">
+                    {{ t('dialog.pronouns.update') }}
+                </Button>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { Button } from '@/components/ui/button';
     import { InputGroupTextareaField } from '@/components/ui/input-group';
     import { toast } from 'vue-sonner';
diff --git a/src/components/dialogs/UserDialog/SendInviteRequestDialog.vue b/src/components/dialogs/UserDialog/SendInviteRequestDialog.vue
index 728f2c9a..34b0e9ce 100644
--- a/src/components/dialogs/UserDialog/SendInviteRequestDialog.vue
+++ b/src/components/dialogs/UserDialog/SendInviteRequestDialog.vue
@@ -1,30 +1,37 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        :model-value="sendInviteRequestDialogVisible"
-        :title="t('dialog.invite_request_message.header')"
-        width="800px"
-        append-to-body
-        @close="cancelSendInviteRequest">
-        <template v-if="isLocalUserVrcPlusSupporter">
-            <input class="inviteImageUploadButton" type="file" accept="image/*" @change="inviteImageUpload" />
-        </template>
+    <Dialog
+        :open="sendInviteRequestDialogVisible"
+        @update:open="
+            (open) => {
+                if (!open) cancelSendInviteRequest();
+            }
+        ">
+        <DialogContent class="x-dialog sm:max-w-200">
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.invite_request_message.header') }}</DialogTitle>
+            </DialogHeader>
 
-        <DataTableLayout
-            style="margin-top: 10px"
-            :table="inviteRequestMessageTanstackTable"
-            :loading="false"
-            :show-pagination="false"
-            :on-row-click="handleInviteRequestMessageRowClick" />
+            <template v-if="isLocalUserVrcPlusSupporter">
+                <input class="inviteImageUploadButton" type="file" accept="image/*" @change="inviteImageUpload" />
+            </template>
+
+            <DataTableLayout
+                style="margin-top: 10px"
+                :table="inviteRequestMessageTanstackTable"
+                :loading="false"
+                :show-pagination="false"
+                :on-row-click="handleInviteRequestMessageRowClick" />
+
+            <DialogFooter>
+                <Button variant="secondary" class="mr-2" @click="cancelSendInviteRequest">{{
+                    t('dialog.invite_request_message.cancel')
+                }}</Button>
+                <Button @click="refreshInviteMessageTableData('request')">{{
+                    t('dialog.invite_request_message.refresh')
+                }}</Button>
+            </DialogFooter>
+        </DialogContent>
 
-        <template #footer>
-            <Button variant="secondary" class="mr-2" @click="cancelSendInviteRequest">{{
-                t('dialog.invite_request_message.cancel')
-            }}</Button>
-            <Button @click="refreshInviteMessageTableData('request')">{{
-                t('dialog.invite_request_message.refresh')
-            }}</Button>
-        </template>
         <SendInviteConfirmDialog
             v-model:isSendInviteConfirmDialogVisible="isSendInviteConfirmDialogVisible"
             :sendInviteDialog="sendInviteDialog"
@@ -37,10 +44,11 @@
             @update:sendInviteDialog="emit('update:sendInviteDialog', $event)"
             :invite-dialog="inviteDialog"
             @closeInviteDialog="closeInviteDialog" />
-    </el-dialog>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { computed, ref } from 'vue';
     import { Button } from '@/components/ui/button';
     import { DataTableLayout } from '@/components/ui/data-table';
diff --git a/src/components/dialogs/UserDialog/SocialStatusDialog.vue b/src/components/dialogs/UserDialog/SocialStatusDialog.vue
index 15f887e1..94c64b83 100644
--- a/src/components/dialogs/UserDialog/SocialStatusDialog.vue
+++ b/src/components/dialogs/UserDialog/SocialStatusDialog.vue
@@ -1,96 +1,98 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        v-model="socialStatusDialog.visible"
-        :title="t('dialog.social_status.header')"
-        append-to-body
-        width="400px">
-        <div v-loading="socialStatusDialog.loading">
-            <Select :model-value="socialStatusDialog.status" @update:modelValue="handleSocialStatusChange">
-                <SelectTrigger size="sm" style="margin-top: 10px; width: 100%">
-                    <span class="flex items-center gap-2">
-                        <i v-if="socialStatusDialog.status === 'join me'" class="x-user-status joinme"></i>
-                        <i v-else-if="socialStatusDialog.status === 'active'" class="x-user-status online"></i>
-                        <i v-else-if="socialStatusDialog.status === 'ask me'" class="x-user-status askme"></i>
-                        <i v-else-if="socialStatusDialog.status === 'busy'" class="x-user-status busy"></i>
-                        <i v-else-if="socialStatusDialog.status === 'offline'" class="x-user-status offline"></i>
-                        <SelectValue :placeholder="t('dialog.social_status.status_placeholder')" />
-                    </span>
-                </SelectTrigger>
-                <SelectContent>
-                    <SelectGroup>
-                        <SelectItem value="join me" :text-value="t('dialog.user.status.join_me')">
-                            <i class="x-user-status joinme"></i> {{ t('dialog.user.status.join_me') }}
-                        </SelectItem>
-                        <SelectItem value="active" :text-value="t('dialog.user.status.online')">
-                            <i class="x-user-status online"></i> {{ t('dialog.user.status.online') }}
-                        </SelectItem>
-                        <SelectItem value="ask me" :text-value="t('dialog.user.status.ask_me')">
-                            <i class="x-user-status askme"></i> {{ t('dialog.user.status.ask_me') }}
-                        </SelectItem>
-                        <SelectItem value="busy" :text-value="t('dialog.user.status.busy')">
-                            <i class="x-user-status busy"></i> {{ t('dialog.user.status.busy') }}
-                        </SelectItem>
-                        <SelectItem
-                            v-if="currentUser.$isModerator"
-                            value="offline"
-                            :text-value="t('dialog.user.status.offline')">
-                            <i class="x-user-status offline"></i> {{ t('dialog.user.status.offline') }}
-                        </SelectItem>
-                    </SelectGroup>
-                </SelectContent>
-            </Select>
+    <Dialog v-model:open="socialStatusDialog.visible">
+        <DialogContent class="x-dialog sm:max-w-100">
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.social_status.header') }}</DialogTitle>
+            </DialogHeader>
 
-            <InputGroupField
-                v-model="socialStatusDialog.statusDescription"
-                :placeholder="t('dialog.social_status.status_placeholder')"
-                :maxlength="32"
-                clearable
-                show-count
-                class="mt-2.5" />
-            <Collapsible v-model:open="isOpen" class="mt-3 flex w-full flex-col gap-2">
-                <div class="flex items-center justify-between gap-4 px-4">
-                    <h4 class="text-sm font-semibold">{{ t('dialog.social_status.history') }}</h4>
-                    <CollapsibleTrigger as-child>
-                        <Button variant="ghost" size="icon" class="size-8">
-                            <ChevronsUpDown />
-                            <span class="sr-only">Toggle</span>
-                        </Button>
-                    </CollapsibleTrigger>
-                </div>
-                <div
-                    v-if="!isOpen && latestHistoryItem"
-                    class="cursor-pointer rounded-md border w-full px-4 py-2 font-mono text-sm"
-                    @click="setSocialStatusFromHistory(latestHistoryItem)">
-                    {{ latestHistoryItem.status }}
-                </div>
-                <CollapsibleContent class="flex flex-col gap-2">
-                    <div
-                        v-for="item in historyItems"
-                        :key="item.no ?? item.status"
-                        class="cursor-pointer rounded-md border w-full px-4 py-2 font-mono text-sm"
-                        @click="setSocialStatusFromHistory(item)">
-                        {{ item.status }}
+            <div v-loading="socialStatusDialog.loading">
+                <Select :model-value="socialStatusDialog.status" @update:modelValue="handleSocialStatusChange">
+                    <SelectTrigger size="sm" style="margin-top: 10px; width: 100%">
+                        <span class="flex items-center gap-2">
+                            <i v-if="socialStatusDialog.status === 'join me'" class="x-user-status joinme"></i>
+                            <i v-else-if="socialStatusDialog.status === 'active'" class="x-user-status online"></i>
+                            <i v-else-if="socialStatusDialog.status === 'ask me'" class="x-user-status askme"></i>
+                            <i v-else-if="socialStatusDialog.status === 'busy'" class="x-user-status busy"></i>
+                            <i v-else-if="socialStatusDialog.status === 'offline'" class="x-user-status offline"></i>
+                            <SelectValue :placeholder="t('dialog.social_status.status_placeholder')" />
+                        </span>
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectGroup>
+                            <SelectItem value="join me" :text-value="t('dialog.user.status.join_me')">
+                                <i class="x-user-status joinme"></i> {{ t('dialog.user.status.join_me') }}
+                            </SelectItem>
+                            <SelectItem value="active" :text-value="t('dialog.user.status.online')">
+                                <i class="x-user-status online"></i> {{ t('dialog.user.status.online') }}
+                            </SelectItem>
+                            <SelectItem value="ask me" :text-value="t('dialog.user.status.ask_me')">
+                                <i class="x-user-status askme"></i> {{ t('dialog.user.status.ask_me') }}
+                            </SelectItem>
+                            <SelectItem value="busy" :text-value="t('dialog.user.status.busy')">
+                                <i class="x-user-status busy"></i> {{ t('dialog.user.status.busy') }}
+                            </SelectItem>
+                            <SelectItem
+                                v-if="currentUser.$isModerator"
+                                value="offline"
+                                :text-value="t('dialog.user.status.offline')">
+                                <i class="x-user-status offline"></i> {{ t('dialog.user.status.offline') }}
+                            </SelectItem>
+                        </SelectGroup>
+                    </SelectContent>
+                </Select>
+
+                <InputGroupField
+                    v-model="socialStatusDialog.statusDescription"
+                    :placeholder="t('dialog.social_status.status_placeholder')"
+                    :maxlength="32"
+                    clearable
+                    show-count
+                    class="mt-2.5" />
+                <Collapsible v-model:open="isOpen" class="mt-3 flex w-full flex-col gap-2">
+                    <div class="flex items-center justify-between gap-4 px-4">
+                        <h4 class="text-sm font-semibold">{{ t('dialog.social_status.history') }}</h4>
+                        <CollapsibleTrigger as-child>
+                            <Button variant="ghost" size="icon" class="size-8">
+                                <ChevronsUpDown />
+                                <span class="sr-only">Toggle</span>
+                            </Button>
+                        </CollapsibleTrigger>
                     </div>
-                </CollapsibleContent>
-            </Collapsible>
-        </div>
+                    <div
+                        v-if="!isOpen && latestHistoryItem"
+                        class="cursor-pointer rounded-md border w-full px-4 py-2 font-mono text-sm"
+                        @click="setSocialStatusFromHistory(latestHistoryItem)">
+                        {{ latestHistoryItem.status }}
+                    </div>
+                    <CollapsibleContent class="flex flex-col gap-2">
+                        <div
+                            v-for="item in historyItems"
+                            :key="item.no ?? item.status"
+                            class="cursor-pointer rounded-md border w-full px-4 py-2 font-mono text-sm"
+                            @click="setSocialStatusFromHistory(item)">
+                            {{ item.status }}
+                        </div>
+                    </CollapsibleContent></Collapsible
+                >
+            </div>
 
-        <template #footer>
-            <Button :disabled="socialStatusDialog.loading" @click="saveSocialStatus">
-                {{ t('dialog.social_status.update') }}
-            </Button>
-        </template>
-    </el-dialog>
+            <DialogFooter>
+                <Button :disabled="socialStatusDialog.loading" @click="saveSocialStatus">
+                    {{ t('dialog.social_status.update') }}
+                </Button>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup lang="ts">
     import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
     import { computed, ref } from 'vue';
     import { Button } from '@/components/ui/button';
-    import { InputGroupField } from '@/components/ui/input-group';
     import { ChevronsUpDown } from 'lucide-vue-next';
+    import { InputGroupField } from '@/components/ui/input-group';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
diff --git a/src/components/dialogs/UserDialog/UserDialog.vue b/src/components/dialogs/UserDialog/UserDialog.vue
index 030028ac..93007729 100644
--- a/src/components/dialogs/UserDialog/UserDialog.vue
+++ b/src/components/dialogs/UserDialog/UserDialog.vue
@@ -1,346 +1,335 @@
 <template>
-    <el-dialog
-        :z-index="userDialogIndex"
-        class="x-dialog x-user-dialog"
-        v-model="userDialog.visible"
-        :show-close="false"
-        top="10vh"
-        width="940px">
-        <div v-loading="userDialog.loading">
-            <UserSummaryHeader
-                :get-user-state-text="getUserStateText"
-                :copy-user-display-name="copyUserDisplayName"
-                :toggle-badge-visibility="toggleBadgeVisibility"
-                :toggle-badge-showcased="toggleBadgeShowcased"
-                :user-dialog-command="userDialogCommand" />
+    <Dialog v-model:open="userDialog.visible">
+        <DialogContent
+            class="x-dialog x-user-dialog sm:max-w-235 translate-y-0"
+            style="top: 10vh"
+            :show-close-button="false">
+            <div v-loading="userDialog.loading">
+                <DialogHeader class="sr-only">
+                    <DialogTitle>{{
+                        userDialog.ref?.displayName || userDialog.id || t('dialog.user.info.header')
+                    }}</DialogTitle>
+                    <DialogDescription>{{ getUserStateText(userDialog.ref || {}) }}</DialogDescription>
+                </DialogHeader>
+                <UserSummaryHeader
+                    :get-user-state-text="getUserStateText"
+                    :copy-user-display-name="copyUserDisplayName"
+                    :toggle-badge-visibility="toggleBadgeVisibility"
+                    :toggle-badge-showcased="toggleBadgeShowcased"
+                    :user-dialog-command="userDialogCommand" />
 
-            <TabsUnderline
-                v-model="userDialogLastActiveTab"
-                :items="userDialogTabs"
-                :unmount-on-hide="false"
-                @update:modelValue="userDialogTabClick">
-                <template #Info>
-                    <template v-if="isFriendOnline(userDialog.friend) || currentUser.id === userDialog.id">
-                        <div
-                            v-if="userDialog.ref.location"
-                            style="
-                                display: flex;
-                                flex-direction: column;
-                                margin-bottom: 10px;
-                                padding-bottom: 10px;
-                                border-bottom: 1px solid #e4e7ed14;
-                            ">
-                            <div style="flex: none">
-                                <template v-if="isRealInstance(userDialog.$location.tag)">
-                                    <div class="flex items-center mb-1">
-                                        <Launch :location="userDialog.$location.tag" />
-                                        <InviteYourself
-                                            :location="userDialog.$location.tag"
-                                            :shortname="userDialog.$location.shortName"
-                                            style="margin-left: 5px" />
-                                        <TooltipWrapper
-                                            side="top"
-                                            :content="t('dialog.user.info.refresh_instance_info')"
-                                            ><Button
-                                                class="rounded-full ml-1 w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
-                                                size="icon"
-                                                variant="outline"
-                                                @click="refreshInstancePlayerCount(userDialog.$location.tag)"
-                                                ><RefreshCw class="h-4 w-4" />
-                                            </Button>
-                                        </TooltipWrapper>
-                                        <LastJoin
-                                            :location="userDialog.$location.tag"
-                                            :currentlocation="lastLocation.location" />
-                                        <InstanceInfo
-                                            :location="userDialog.$location.tag"
-                                            :instance="userDialog.instance.ref"
-                                            :friendcount="userDialog.instance.friendCount" />
+                <TabsUnderline
+                    v-model="userDialogLastActiveTab"
+                    :items="userDialogTabs"
+                    :unmount-on-hide="false"
+                    @update:modelValue="userDialogTabClick">
+                    <template #Info>
+                        <template v-if="isFriendOnline(userDialog.friend) || currentUser.id === userDialog.id">
+                            <div
+                                v-if="userDialog.ref.location"
+                                style="
+                                    display: flex;
+                                    flex-direction: column;
+                                    margin-bottom: 10px;
+                                    padding-bottom: 10px;
+                                    border-bottom: 1px solid #e4e7ed14;
+                                ">
+                                <div style="flex: none">
+                                    <template v-if="isRealInstance(userDialog.$location.tag)">
+                                        <div class="flex items-center mb-1">
+                                            <Launch :location="userDialog.$location.tag" />
+                                            <InviteYourself
+                                                :location="userDialog.$location.tag"
+                                                :shortname="userDialog.$location.shortName"
+                                                style="margin-left: 5px" />
+                                            <TooltipWrapper
+                                                side="top"
+                                                :content="t('dialog.user.info.refresh_instance_info')"
+                                                ><Button
+                                                    class="rounded-full ml-1 w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
+                                                    size="icon"
+                                                    variant="outline"
+                                                    @click="refreshInstancePlayerCount(userDialog.$location.tag)"
+                                                    ><RefreshCw class="h-4 w-4" />
+                                                </Button>
+                                            </TooltipWrapper>
+                                            <LastJoin
+                                                :location="userDialog.$location.tag"
+                                                :currentlocation="lastLocation.location" />
+                                            <InstanceInfo
+                                                :location="userDialog.$location.tag"
+                                                :instance="userDialog.instance.ref"
+                                                :friendcount="userDialog.instance.friendCount" />
+                                        </div>
+                                    </template>
+                                    <Location
+                                        :location="userDialog.ref.location"
+                                        :traveling="userDialog.ref.travelingToLocation"
+                                        style="display: block; margin-top: 5px" />
+                                </div>
+                                <div class="x-friend-list" style="flex: 1; margin-top: 10px; max-height: 150px">
+                                    <div
+                                        v-if="userDialog.$location.userId"
+                                        class="x-friend-item x-friend-item-border"
+                                        @click="showUserDialog(userDialog.$location.userId)">
+                                        <template v-if="userDialog.$location.user">
+                                            <div class="avatar" :class="userStatusClass(userDialog.$location.user)">
+                                                <img :src="userImage(userDialog.$location.user, true)" loading="lazy" />
+                                            </div>
+                                            <div class="detail">
+                                                <span
+                                                    class="name"
+                                                    :style="{ color: userDialog.$location.user.$userColour }"
+                                                    v-text="userDialog.$location.user.displayName"></span>
+                                                <span class="extra">{{ t('dialog.user.info.instance_creator') }}</span>
+                                            </div>
+                                        </template>
+                                        <span v-else v-text="userDialog.$location.userId"></span>
                                     </div>
-                                </template>
-                                <Location
-                                    :location="userDialog.ref.location"
-                                    :traveling="userDialog.ref.travelingToLocation"
-                                    style="display: block; margin-top: 5px" />
-                            </div>
-                            <div class="x-friend-list" style="flex: 1; margin-top: 10px; max-height: 150px">
-                                <div
-                                    v-if="userDialog.$location.userId"
-                                    class="x-friend-item x-friend-item-border"
-                                    @click="showUserDialog(userDialog.$location.userId)">
-                                    <template v-if="userDialog.$location.user">
-                                        <div class="avatar" :class="userStatusClass(userDialog.$location.user)">
-                                            <img :src="userImage(userDialog.$location.user, true)" loading="lazy" />
+                                    <div
+                                        v-for="user in userDialog.users"
+                                        :key="user.id"
+                                        class="x-friend-item x-friend-item-border"
+                                        @click="showUserDialog(user.id)">
+                                        <div class="avatar" :class="userStatusClass(user)">
+                                            <img :src="userImage(user, true)" loading="lazy" />
                                         </div>
                                         <div class="detail">
                                             <span
                                                 class="name"
-                                                :style="{ color: userDialog.$location.user.$userColour }"
-                                                v-text="userDialog.$location.user.displayName"></span>
-                                            <span class="extra">{{ t('dialog.user.info.instance_creator') }}</span>
+                                                :style="{ color: user.$userColour }"
+                                                v-text="user.displayName"></span>
+                                            <span v-if="user.location === 'traveling'" class="extra">
+                                                <Loader2 class="is-loading" style="margin-right: 3px" />
+                                                <Timer :epoch="user.$travelingToTime" />
+                                            </span>
+                                            <span v-else class="extra">
+                                                <Timer :epoch="user.$location_at" />
+                                            </span>
                                         </div>
-                                    </template>
-                                    <span v-else v-text="userDialog.$location.userId"></span>
-                                </div>
-                                <div
-                                    v-for="user in userDialog.users"
-                                    :key="user.id"
-                                    class="x-friend-item x-friend-item-border"
-                                    @click="showUserDialog(user.id)">
-                                    <div class="avatar" :class="userStatusClass(user)">
-                                        <img :src="userImage(user, true)" loading="lazy" />
                                     </div>
-                                    <div class="detail">
-                                        <span
-                                            class="name"
-                                            :style="{ color: user.$userColour }"
-                                            v-text="user.displayName"></span>
-                                        <span v-if="user.location === 'traveling'" class="extra">
-                                            <Loader2 class="is-loading" style="margin-right: 3px" />
-                                            <Timer :epoch="user.$travelingToTime" />
-                                        </span>
-                                        <span v-else class="extra">
-                                            <Timer :epoch="user.$location_at" />
-                                        </span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </template>
-
-                    <div class="x-friend-list" style="max-height: none">
-                        <div
-                            v-if="userDialog.note && !hideUserNotes"
-                            class="x-friend-item"
-                            style="width: 100%; cursor: pointer">
-                            <div class="detail" @click="isEditNoteAndMemoDialogVisible = true">
-                                <span class="name">{{ t('dialog.user.info.note') }}</span>
-                                <pre
-                                    class="extra"
-                                    style="
-                                        font-family: inherit;
-                                        font-size: 12px;
-                                        white-space: pre-wrap;
-                                        margin: 0 0.5em 0 0;
-                                        max-height: 210px;
-                                        overflow-y: auto;
-                                    "
-                                    >{{ userDialog.note }}</pre
-                                >
-                            </div>
-                        </div>
-                        <div
-                            v-if="userDialog.memo && !hideUserMemos"
-                            class="x-friend-item"
-                            style="width: 100%; cursor: pointer">
-                            <div class="detail" @click="isEditNoteAndMemoDialogVisible = true">
-                                <span class="name">{{ t('dialog.user.info.memo') }}</span>
-                                <pre
-                                    class="extra"
-                                    style="
-                                        font-family: inherit;
-                                        font-size: 12px;
-                                        white-space: pre-wrap;
-                                        margin: 0 0.5em 0 0;
-                                        max-height: 210px;
-                                        overflow-y: auto;
-                                    "
-                                    >{{ userDialog.memo }}</pre
-                                >
-                            </div>
-                        </div>
-                        <div class="x-friend-item" style="width: 100%; cursor: default">
-                            <div class="detail">
-                                <span
-                                    v-if="
-                                        userDialog.id !== currentUser.id &&
-                                        userDialog.ref.profilePicOverride &&
-                                        userDialog.ref.currentAvatarImageUrl
-                                    "
-                                    class="name">
-                                    {{ t('dialog.user.info.avatar_info_last_seen') }}
-                                </span>
-                                <span v-else class="name">{{ t('dialog.user.info.avatar_info') }}</span>
-                                <div class="extra">
-                                    <AvatarInfo
-                                        :imageurl="userDialog.ref.currentAvatarImageUrl"
-                                        :userid="userDialog.id"
-                                        :avatartags="userDialog.ref.currentAvatarTags"
-                                        style="display: inline-block" />
-                                    <TooltipWrapper
-                                        v-if="
-                                            userDialog.ref.profilePicOverride && !userDialog.ref.currentAvatarImageUrl
-                                        "
-                                        side="top"
-                                        :content="t('dialog.user.info.vrcplus_hides_avatar')">
-                                        <AlertTriangle />
-                                    </TooltipWrapper>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="x-friend-item" style="width: 100%; cursor: default">
-                            <div class="detail">
-                                <span class="name" style="margin-bottom: 5px">{{
-                                    t('dialog.user.info.represented_group')
-                                }}</span>
-                                <div
-                                    v-if="
-                                        userDialog.isRepresentedGroupLoading ||
-                                        (userDialog.representedGroup && userDialog.representedGroup.isRepresenting)
-                                    "
-                                    class="extra">
-                                    <div style="display: inline-block; flex: none; margin-right: 5px">
-                                        <el-image
-                                            v-loading="userDialog.isRepresentedGroupLoading"
-                                            class="x-link"
-                                            :src="userDialog.representedGroup.$thumbnailUrl"
-                                            style="
-                                                flex: none;
-                                                width: 60px;
-                                                height: 60px;
-                                                border-radius: 4px;
-                                                object-fit: cover;
-                                            "
-                                            :style="{
-                                                background: userDialog.isRepresentedGroupLoading ? '#f5f7fa' : ''
-                                            }"
-                                            @load="userDialog.isRepresentedGroupLoading = false"
-                                            @click="showFullscreenImageDialog(userDialog.representedGroup.iconUrl)">
-                                            <template #error></template>
-                                        </el-image>
-                                    </div>
-                                    <span
-                                        v-if="userDialog.representedGroup.isRepresenting"
-                                        style="vertical-align: top; cursor: pointer"
-                                        @click="showGroupDialog(userDialog.representedGroup.groupId)">
-                                        <span
-                                            v-if="userDialog.representedGroup.ownerId === userDialog.id"
-                                            style="margin-right: 5px"
-                                            >👑</span
-                                        >
-                                        <span
-                                            style="margin-right: 5px"
-                                            v-text="userDialog.representedGroup.name"></span>
-                                        <span>({{ userDialog.representedGroup.memberCount }})</span>
-                                    </span>
-                                </div>
-                                <div v-else class="extra">-</div>
-                            </div>
-                        </div>
-                        <div class="x-friend-item" style="width: 100%; cursor: default">
-                            <div class="detail">
-                                <span class="name">{{ t('dialog.user.info.bio') }}</span>
-                                <pre
-                                    class="extra"
-                                    style="
-                                        font-family: inherit;
-                                        font-size: 12px;
-                                        white-space: pre-wrap;
-                                        margin: 0 0.5em 0 0;
-                                        max-height: 210px;
-                                        overflow-y: auto;
-                                    "
-                                    >{{ bioCache.translated || userDialog.ref.bio || '-' }}</pre
-                                >
-                                <div style="float: right">
-                                    <Button
-                                        v-if="translationApi && userDialog.ref.bio"
-                                        class="w-3 h-6 text-xs mr-0.5"
-                                        size="icon-sm"
-                                        variant="ghost"
-                                        @click="translateBio">
-                                        <Spinner v-if="translateLoading" class="size-1" />
-                                        <Languages v-else class="h-3 w-3" />
-                                    </Button>
-                                    <Button
-                                        class="w-3 h-6 text-xs"
-                                        size="icon-sm"
-                                        variant="ghost"
-                                        v-if="userDialog.id === currentUser.id"
-                                        style="margin-left: 5px; padding: 0"
-                                        @click="showBioDialog"
-                                        ><Pencil class="h-3 w-3" />
-                                    </Button>
-                                </div>
-                                <div style="margin-top: 5px" class="flex items-center">
-                                    <TooltipWrapper v-for="(link, index) in userDialog.ref.bioLinks" :key="index">
-                                        <template #content>
-                                            <span v-text="link"></span>
-                                        </template>
-                                        <!-- onerror="this.onerror=null;this.class='icon-error'" -->
-                                        <img
-                                            :src="getFaviconUrl(link)"
-                                            style="
-                                                width: 16px;
-                                                height: 16px;
-                                                vertical-align: middle;
-                                                margin-right: 5px;
-                                                cursor: pointer;
-                                            "
-                                            @click.stop="openExternalLink(link)"
-                                            loading="lazy" />
-                                    </TooltipWrapper>
-                                </div>
-                            </div>
-                        </div>
-                        <template v-if="currentUser.id !== userDialog.id">
-                            <div class="x-friend-item" style="cursor: default">
-                                <div class="detail">
-                                    <span class="name">
-                                        {{ t('dialog.user.info.last_seen') }}
-                                        <TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
-                                            <AlertTriangle style="margin-left: 3px" />
-                                        </TooltipWrapper>
-                                    </span>
-                                    <span class="extra">{{ formatDateFilter(userDialog.lastSeen, 'long') }}</span>
-                                </div>
-                            </div>
-
-                            <div class="x-friend-item" @click="showPreviousInstancesUserDialog(userDialog.ref)">
-                                <div class="detail">
-                                    <div
-                                        class="name"
-                                        style="display: flex; justify-content: space-between; align-items: center">
-                                        <div>
-                                            {{ t('dialog.user.info.join_count') }}
-                                            <TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
-                                                <AlertTriangle style="margin-left: 3px" />
-                                            </TooltipWrapper>
-                                        </div>
-
-                                        <TooltipWrapper
-                                            side="top"
-                                            :content="t('dialog.user.info.open_previous_instance')">
-                                            <MoreHorizontal style="margin-right: 16px" />
-                                        </TooltipWrapper>
-                                    </div>
-                                    <span v-if="userDialog.joinCount === 0" class="extra">-</span>
-                                    <span v-else class="extra" v-text="userDialog.joinCount"></span>
-                                </div>
-                            </div>
-
-                            <div class="x-friend-item" style="cursor: default">
-                                <div class="detail">
-                                    <span class="name">
-                                        {{ t('dialog.user.info.time_together') }}
-                                        <TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
-                                            <AlertTriangle style="margin-left: 3px" />
-                                        </TooltipWrapper>
-                                    </span>
-                                    <span v-if="userDialog.timeSpent === 0" class="extra">-</span>
-                                    <span v-else class="extra">{{ timeToText(userDialog.timeSpent) }}</span>
                                 </div>
                             </div>
                         </template>
-                        <template v-else>
-                            <TooltipWrapper
-                                :disabled="currentUser.id !== userDialog.id"
-                                side="top"
-                                :content="t('dialog.user.info.open_previous_instance')">
-                                <div class="x-friend-item" @click="showPreviousInstancesUserDialog(userDialog.ref)">
+
+                        <div class="x-friend-list" style="max-height: none">
+                            <div
+                                v-if="userDialog.note && !hideUserNotes"
+                                class="x-friend-item"
+                                style="width: 100%; cursor: pointer">
+                                <div class="detail" @click="isEditNoteAndMemoDialogVisible = true">
+                                    <span class="name">{{ t('dialog.user.info.note') }}</span>
+                                    <pre
+                                        class="extra"
+                                        style="
+                                            font-family: inherit;
+                                            font-size: 12px;
+                                            white-space: pre-wrap;
+                                            margin: 0 0.5em 0 0;
+                                            max-height: 210px;
+                                            overflow-y: auto;
+                                        "
+                                        >{{ userDialog.note }}</pre
+                                    >
+                                </div>
+                            </div>
+                            <div
+                                v-if="userDialog.memo && !hideUserMemos"
+                                class="x-friend-item"
+                                style="width: 100%; cursor: pointer">
+                                <div class="detail" @click="isEditNoteAndMemoDialogVisible = true">
+                                    <span class="name">{{ t('dialog.user.info.memo') }}</span>
+                                    <pre
+                                        class="extra"
+                                        style="
+                                            font-family: inherit;
+                                            font-size: 12px;
+                                            white-space: pre-wrap;
+                                            margin: 0 0.5em 0 0;
+                                            max-height: 210px;
+                                            overflow-y: auto;
+                                        "
+                                        >{{ userDialog.memo }}</pre
+                                    >
+                                </div>
+                            </div>
+                            <div class="x-friend-item" style="width: 100%; cursor: default">
+                                <div class="detail">
+                                    <span
+                                        v-if="
+                                            userDialog.id !== currentUser.id &&
+                                            userDialog.ref.profilePicOverride &&
+                                            userDialog.ref.currentAvatarImageUrl
+                                        "
+                                        class="name">
+                                        {{ t('dialog.user.info.avatar_info_last_seen') }}
+                                    </span>
+                                    <span v-else class="name">{{ t('dialog.user.info.avatar_info') }}</span>
+                                    <div class="extra">
+                                        <AvatarInfo
+                                            :imageurl="userDialog.ref.currentAvatarImageUrl"
+                                            :userid="userDialog.id"
+                                            :avatartags="userDialog.ref.currentAvatarTags"
+                                            style="display: inline-block" />
+                                        <TooltipWrapper
+                                            v-if="
+                                                userDialog.ref.profilePicOverride &&
+                                                !userDialog.ref.currentAvatarImageUrl
+                                            "
+                                            side="top"
+                                            :content="t('dialog.user.info.vrcplus_hides_avatar')">
+                                            <AlertTriangle />
+                                        </TooltipWrapper>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="x-friend-item" style="width: 100%; cursor: default">
+                                <div class="detail">
+                                    <span class="name" style="margin-bottom: 5px">{{
+                                        t('dialog.user.info.represented_group')
+                                    }}</span>
+                                    <div
+                                        v-if="
+                                            userDialog.isRepresentedGroupLoading ||
+                                            (userDialog.representedGroup && userDialog.representedGroup.isRepresenting)
+                                        "
+                                        class="extra">
+                                        <div style="display: inline-block; flex: none; margin-right: 5px">
+                                            <el-image
+                                                v-loading="userDialog.isRepresentedGroupLoading"
+                                                class="x-link"
+                                                :src="userDialog.representedGroup.$thumbnailUrl"
+                                                style="
+                                                    flex: none;
+                                                    width: 60px;
+                                                    height: 60px;
+                                                    border-radius: 4px;
+                                                    object-fit: cover;
+                                                "
+                                                :style="{
+                                                    background: userDialog.isRepresentedGroupLoading ? '#f5f7fa' : ''
+                                                }"
+                                                @load="userDialog.isRepresentedGroupLoading = false"
+                                                @click="showFullscreenImageDialog(userDialog.representedGroup.iconUrl)">
+                                                <template #error></template>
+                                            </el-image>
+                                        </div>
+                                        <span
+                                            v-if="userDialog.representedGroup.isRepresenting"
+                                            style="vertical-align: top; cursor: pointer"
+                                            @click="showGroupDialog(userDialog.representedGroup.groupId)">
+                                            <span
+                                                v-if="userDialog.representedGroup.ownerId === userDialog.id"
+                                                style="margin-right: 5px"
+                                                >👑</span
+                                            >
+                                            <span
+                                                style="margin-right: 5px"
+                                                v-text="userDialog.representedGroup.name"></span>
+                                            <span>({{ userDialog.representedGroup.memberCount }})</span>
+                                        </span>
+                                    </div>
+                                    <div v-else class="extra">-</div>
+                                </div>
+                            </div>
+                            <div class="x-friend-item" style="width: 100%; cursor: default">
+                                <div class="detail">
+                                    <span class="name">{{ t('dialog.user.info.bio') }}</span>
+                                    <pre
+                                        class="extra"
+                                        style="
+                                            font-family: inherit;
+                                            font-size: 12px;
+                                            white-space: pre-wrap;
+                                            margin: 0 0.5em 0 0;
+                                            max-height: 210px;
+                                            overflow-y: auto;
+                                        "
+                                        >{{ bioCache.translated || userDialog.ref.bio || '-' }}</pre
+                                    >
+                                    <div style="float: right">
+                                        <Button
+                                            v-if="translationApi && userDialog.ref.bio"
+                                            class="w-3 h-6 text-xs mr-0.5"
+                                            size="icon-sm"
+                                            variant="ghost"
+                                            @click="translateBio">
+                                            <Spinner v-if="translateLoading" class="size-1" />
+                                            <Languages v-else class="h-3 w-3" />
+                                        </Button>
+                                        <Button
+                                            class="w-3 h-6 text-xs"
+                                            size="icon-sm"
+                                            variant="ghost"
+                                            v-if="userDialog.id === currentUser.id"
+                                            style="margin-left: 5px; padding: 0"
+                                            @click="showBioDialog"
+                                            ><Pencil class="h-3 w-3" />
+                                        </Button>
+                                    </div>
+                                    <div style="margin-top: 5px" class="flex items-center">
+                                        <TooltipWrapper v-for="(link, index) in userDialog.ref.bioLinks" :key="index">
+                                            <template #content>
+                                                <span v-text="link"></span>
+                                            </template>
+                                            <!-- onerror="this.onerror=null;this.class='icon-error'" -->
+                                            <img
+                                                :src="getFaviconUrl(link)"
+                                                style="
+                                                    width: 16px;
+                                                    height: 16px;
+                                                    vertical-align: middle;
+                                                    margin-right: 5px;
+                                                    cursor: pointer;
+                                                "
+                                                @click.stop="openExternalLink(link)"
+                                                loading="lazy" />
+                                        </TooltipWrapper>
+                                    </div>
+                                </div>
+                            </div>
+                            <template v-if="currentUser.id !== userDialog.id">
+                                <div class="x-friend-item" style="cursor: default">
                                     <div class="detail">
                                         <span class="name">
-                                            {{ t('dialog.user.info.play_time') }}
+                                            {{ t('dialog.user.info.last_seen') }}
+                                            <TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
+                                                <AlertTriangle style="margin-left: 3px" />
+                                            </TooltipWrapper>
+                                        </span>
+                                        <span class="extra">{{ formatDateFilter(userDialog.lastSeen, 'long') }}</span>
+                                    </div>
+                                </div>
+
+                                <div class="x-friend-item" @click="showPreviousInstancesUserDialog(userDialog.ref)">
+                                    <div class="detail">
+                                        <div
+                                            class="name"
+                                            style="display: flex; justify-content: space-between; align-items: center">
+                                            <div>
+                                                {{ t('dialog.user.info.join_count') }}
+                                                <TooltipWrapper
+                                                    side="top"
+                                                    :content="t('dialog.user.info.accuracy_notice')">
+                                                    <AlertTriangle style="margin-left: 3px" />
+                                                </TooltipWrapper>
+                                            </div>
+
+                                            <TooltipWrapper
+                                                side="top"
+                                                :content="t('dialog.user.info.open_previous_instance')">
+                                                <MoreHorizontal style="margin-right: 16px" />
+                                            </TooltipWrapper>
+                                        </div>
+                                        <span v-if="userDialog.joinCount === 0" class="extra">-</span>
+                                        <span v-else class="extra" v-text="userDialog.joinCount"></span>
+                                    </div>
+                                </div>
+
+                                <div class="x-friend-item" style="cursor: default">
+                                    <div class="detail">
+                                        <span class="name">
+                                            {{ t('dialog.user.info.time_together') }}
                                             <TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
                                                 <AlertTriangle style="margin-left: 3px" />
                                             </TooltipWrapper>
@@ -349,493 +338,530 @@
                                         <span v-else class="extra">{{ timeToText(userDialog.timeSpent) }}</span>
                                     </div>
                                 </div>
-                            </TooltipWrapper>
-                        </template>
-                        <div class="x-friend-item" style="cursor: default">
-                            <TooltipWrapper :side="currentUser.id !== userDialog.id ? 'bottom' : 'top'">
-                                <template #content>
-                                    <span>{{ formatDateFilter(userOnlineForTimestamp(userDialog), 'short') }}</span>
-                                </template>
-                                <div class="detail">
-                                    <span
-                                        v-if="userDialog.ref.state === 'online' && userDialog.ref.$online_for"
-                                        class="name">
-                                        {{ t('dialog.user.info.online_for') }}
-                                        <TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
-                                            <AlertTriangle style="margin-left: 3px" />
-                                        </TooltipWrapper>
-                                    </span>
-                                    <span v-else class="name">
-                                        {{ t('dialog.user.info.offline_for') }}
-                                        <TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
-                                            <AlertTriangle style="margin-left: 3px" />
-                                        </TooltipWrapper>
-                                    </span>
-                                    <span class="extra">{{ userOnlineFor(userDialog.ref) }}</span>
-                                </div>
-                            </TooltipWrapper>
-                        </div>
-                        <div class="x-friend-item" style="cursor: default">
-                            <TooltipWrapper :side="currentUser.id !== userDialog.id ? 'bottom' : 'top'">
-                                <template #content>
-                                    <span
-                                        >{{ t('dialog.user.info.last_login') }}
-                                        {{ formatDateFilter(userDialog.ref.last_login, 'long') }}</span
-                                    >
-                                    <br />
-                                    <span
-                                        >{{ t('dialog.user.info.last_activity') }}
-                                        {{ formatDateFilter(userDialog.ref.last_activity, 'long') }}</span
-                                    >
-                                </template>
-                                <div class="detail">
-                                    <span class="name">{{ t('dialog.user.info.last_activity') }}</span>
-                                    <span v-if="userDialog.ref.last_activity" class="extra">{{
-                                        timeToText(Date.now() - Date.parse(userDialog.ref.last_activity))
-                                    }}</span>
-                                    <span v-else class="extra">-</span>
-                                </div>
-                            </TooltipWrapper>
-                        </div>
-                        <div class="x-friend-item" style="cursor: default">
-                            <div class="detail">
-                                <span class="name">{{ t('dialog.user.info.date_joined') }}</span>
-                                <span class="extra" v-text="userDialog.ref.date_joined"></span>
-                            </div>
-                        </div>
-                        <div v-if="currentUser.id !== userDialog.id" class="x-friend-item" style="cursor: default">
-                            <TooltipWrapper side="top" :disabled="!userDialog.dateFriendedInfo.length">
-                                <template v-if="userDialog.dateFriendedInfo.length" #content>
-                                    <template v-for="ref in userDialog.dateFriendedInfo" :key="ref.type">
-                                        <span>{{ ref.type }}: {{ formatDateFilter(ref.created_at, 'long') }}</span
-                                        ><br />
+                            </template>
+                            <template v-else>
+                                <TooltipWrapper
+                                    :disabled="currentUser.id !== userDialog.id"
+                                    side="top"
+                                    :content="t('dialog.user.info.open_previous_instance')">
+                                    <div class="x-friend-item" @click="showPreviousInstancesUserDialog(userDialog.ref)">
+                                        <div class="detail">
+                                            <span class="name">
+                                                {{ t('dialog.user.info.play_time') }}
+                                                <TooltipWrapper
+                                                    side="top"
+                                                    :content="t('dialog.user.info.accuracy_notice')">
+                                                    <AlertTriangle style="margin-left: 3px" />
+                                                </TooltipWrapper>
+                                            </span>
+                                            <span v-if="userDialog.timeSpent === 0" class="extra">-</span>
+                                            <span v-else class="extra">{{ timeToText(userDialog.timeSpent) }}</span>
+                                        </div>
+                                    </div>
+                                </TooltipWrapper>
+                            </template>
+                            <div class="x-friend-item" style="cursor: default">
+                                <TooltipWrapper :side="currentUser.id !== userDialog.id ? 'bottom' : 'top'">
+                                    <template #content>
+                                        <span>{{ formatDateFilter(userOnlineForTimestamp(userDialog), 'short') }}</span>
                                     </template>
-                                </template>
-                                <div class="detail">
-                                    <span v-if="userDialog.unFriended" class="name">
-                                        {{ t('dialog.user.info.unfriended') }}
-                                        <TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
-                                            <AlertTriangle style="margin-left: 3px" />
-                                        </TooltipWrapper>
-                                    </span>
-                                    <span v-else class="name">
-                                        {{ t('dialog.user.info.friended') }}
-                                        <TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
-                                            <AlertTriangle style="margin-left: 3px" />
-                                        </TooltipWrapper>
-                                    </span>
-                                    <span class="extra">{{ formatDateFilter(userDialog.dateFriended, 'long') }}</span>
-                                </div>
-                            </TooltipWrapper>
-                        </div>
-                        <template v-if="currentUser.id === userDialog.id">
-                            <div class="x-friend-item" @click="toggleAvatarCopying">
-                                <div class="detail">
-                                    <span class="name">{{ t('dialog.user.info.avatar_cloning') }}</span>
-                                    <span
-                                        v-if="currentUser.allowAvatarCopying"
-                                        class="extra"
-                                        style="color: var(--el-color-success)"
-                                        >{{ t('dialog.user.info.avatar_cloning_allow') }}</span
-                                    >
-                                    <span v-else class="extra" style="color: var(--el-color-danger)">{{
-                                        t('dialog.user.info.avatar_cloning_deny')
-                                    }}</span>
-                                </div>
+                                    <div class="detail">
+                                        <span
+                                            v-if="userDialog.ref.state === 'online' && userDialog.ref.$online_for"
+                                            class="name">
+                                            {{ t('dialog.user.info.online_for') }}
+                                            <TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
+                                                <AlertTriangle style="margin-left: 3px" />
+                                            </TooltipWrapper>
+                                        </span>
+                                        <span v-else class="name">
+                                            {{ t('dialog.user.info.offline_for') }}
+                                            <TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
+                                                <AlertTriangle style="margin-left: 3px" />
+                                            </TooltipWrapper>
+                                        </span>
+                                        <span class="extra">{{ userOnlineFor(userDialog.ref) }}</span>
+                                    </div>
+                                </TooltipWrapper>
                             </div>
-                            <div class="x-friend-item" @click="toggleAllowBooping">
-                                <div class="detail">
-                                    <span class="name">{{ t('dialog.user.info.booping') }}</span>
-                                    <span
-                                        v-if="currentUser.isBoopingEnabled"
-                                        class="extra"
-                                        style="color: var(--el-color-success)"
-                                        >{{ t('dialog.user.info.avatar_cloning_allow') }}</span
-                                    >
-                                    <span v-else class="extra" style="color: var(--el-color-danger)">{{
-                                        t('dialog.user.info.avatar_cloning_deny')
-                                    }}</span>
-                                </div>
+                            <div class="x-friend-item" style="cursor: default">
+                                <TooltipWrapper :side="currentUser.id !== userDialog.id ? 'bottom' : 'top'">
+                                    <template #content>
+                                        <span
+                                            >{{ t('dialog.user.info.last_login') }}
+                                            {{ formatDateFilter(userDialog.ref.last_login, 'long') }}</span
+                                        >
+                                        <br />
+                                        <span
+                                            >{{ t('dialog.user.info.last_activity') }}
+                                            {{ formatDateFilter(userDialog.ref.last_activity, 'long') }}</span
+                                        >
+                                    </template>
+                                    <div class="detail">
+                                        <span class="name">{{ t('dialog.user.info.last_activity') }}</span>
+                                        <span v-if="userDialog.ref.last_activity" class="extra">{{
+                                            timeToText(Date.now() - Date.parse(userDialog.ref.last_activity))
+                                        }}</span>
+                                        <span v-else class="extra">-</span>
+                                    </div>
+                                </TooltipWrapper>
                             </div>
-                            <div class="x-friend-item" @click="toggleSharedConnectionsOptOut">
-                                <div class="detail">
-                                    <span class="name">{{ t('dialog.user.info.show_mutual_friends') }}</span>
-                                    <span
-                                        v-if="!currentUser.hasSharedConnectionsOptOut"
-                                        class="extra"
-                                        style="color: var(--el-color-success)"
-                                        >{{ t('dialog.user.info.avatar_cloning_allow') }}</span
-                                    >
-                                    <span v-else class="extra" style="color: var(--el-color-danger)">{{
-                                        t('dialog.user.info.avatar_cloning_deny')
-                                    }}</span>
-                                </div>
-                            </div>
-                        </template>
-                        <template v-else>
                             <div class="x-friend-item" style="cursor: default">
                                 <div class="detail">
-                                    <span class="name">{{ t('dialog.user.info.avatar_cloning') }}</span>
-                                    <span
-                                        v-if="userDialog.ref.allowAvatarCopying"
-                                        class="extra"
-                                        style="color: var(--el-color-success)"
-                                        >{{ t('dialog.user.info.avatar_cloning_allow') }}</span
-                                    >
-                                    <span v-else class="extra" style="color: var(--el-color-danger)">{{
-                                        t('dialog.user.info.avatar_cloning_deny')
-                                    }}</span>
+                                    <span class="name">{{ t('dialog.user.info.date_joined') }}</span>
+                                    <span class="extra" v-text="userDialog.ref.date_joined"></span>
                                 </div>
                             </div>
-                        </template>
-                        <div
-                            v-if="userDialog.ref.id === currentUser.id"
-                            class="x-friend-item"
-                            @click="getVRChatCredits()">
-                            <div class="detail">
-                                <span class="name">{{ t('view.profile.profile.vrchat_credits') }}</span>
-                                <span class="extra">{{ vrchatCredit ?? t('view.profile.profile.refresh') }}</span>
+                            <div v-if="currentUser.id !== userDialog.id" class="x-friend-item" style="cursor: default">
+                                <TooltipWrapper side="top" :disabled="!userDialog.dateFriendedInfo.length">
+                                    <template v-if="userDialog.dateFriendedInfo.length" #content>
+                                        <template v-for="ref in userDialog.dateFriendedInfo" :key="ref.type">
+                                            <span>{{ ref.type }}: {{ formatDateFilter(ref.created_at, 'long') }}</span
+                                            ><br />
+                                        </template>
+                                    </template>
+                                    <div class="detail">
+                                        <span v-if="userDialog.unFriended" class="name">
+                                            {{ t('dialog.user.info.unfriended') }}
+                                            <TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
+                                                <AlertTriangle style="margin-left: 3px" />
+                                            </TooltipWrapper>
+                                        </span>
+                                        <span v-else class="name">
+                                            {{ t('dialog.user.info.friended') }}
+                                            <TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
+                                                <AlertTriangle style="margin-left: 3px" />
+                                            </TooltipWrapper>
+                                        </span>
+                                        <span class="extra">{{
+                                            formatDateFilter(userDialog.dateFriended, 'long')
+                                        }}</span>
+                                    </div>
+                                </TooltipWrapper>
                             </div>
-                        </div>
-                        <div
-                            v-if="userDialog.ref.id === currentUser.id && currentUser.homeLocation"
-                            class="x-friend-item"
-                            style="width: 100%"
-                            @click="showWorldDialog(currentUser.homeLocation)">
-                            <div class="detail">
-                                <span class="name">{{ t('dialog.user.info.home_location') }}</span>
-                                <span class="extra">
-                                    <span v-text="userDialog.$homeLocationName"></span>
-                                    <Button
-                                        class="rounded-full ml-1 text-xs"
-                                        size="icon-sm"
-                                        variant="outline"
-                                        @click.stop="resetHome()"
-                                        ><Trash2 class="h-4 w-4" />
-                                    </Button>
-                                </span>
-                            </div>
-                        </div>
-                        <div class="x-friend-item" style="width: 100%; cursor: default">
-                            <div class="detail">
-                                <span class="name">{{ t('dialog.user.info.id') }}</span>
-                                <span class="extra">
-                                    {{ userDialog.id }}
-                                    <TooltipWrapper side="top" :content="t('dialog.user.info.id_tooltip')">
-                                        <DropdownMenu>
-                                            <DropdownMenuTrigger as-child>
-                                                <Button
-                                                    class="rounded-full ml-1 text-xs"
-                                                    size="icon-sm"
-                                                    variant="outline"
-                                                    @click.stop
-                                                    ><Copy class="h-4 w-4" />
-                                                </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>
-                        </div>
-                    </div>
-                </template>
-
-                <template v-if="userDialog.id !== currentUser.id && !currentUser.hasSharedConnectionsOptOut" #mutual>
-                    <div style="display: flex; align-items: center; justify-content: space-between">
-                        <div style="display: flex; align-items: center">
-                            <Button
-                                class="rounded-full"
-                                variant="outline"
-                                size="icon-sm"
-                                :disabled="userDialog.isMutualFriendsLoading"
-                                @click="getUserMutualFriends(userDialog.id)">
-                                <Spinner v-if="userDialog.isMutualFriendsLoading" />
-                                <RefreshCw v-else />
-                            </Button>
-                            <span style="margin-left: 5px">{{
-                                t('dialog.user.groups.total_count', { count: userDialog.mutualFriends.length })
-                            }}</span>
-                        </div>
-                        <div style="display: flex; align-items: center">
-                            <span style="margin-right: 5px">{{ t('dialog.user.groups.sort_by') }}</span>
-                            <Select
-                                :model-value="userDialogMutualFriendSortingKey"
-                                :disabled="userDialog.isMutualFriendsLoading"
-                                @update:modelValue="setUserDialogMutualFriendSortingByKey">
-                                <SelectTrigger size="sm" @click.stop>
-                                    <SelectValue />
-                                </SelectTrigger>
-                                <SelectContent>
-                                    <SelectItem
-                                        v-for="(item, key) in userDialogMutualFriendSortingOptions"
-                                        :key="String(key)"
-                                        :value="String(key)">
-                                        {{ t(item.name) }}
-                                    </SelectItem>
-                                </SelectContent>
-                            </Select>
-                        </div>
-                    </div>
-                    <div
-                        v-if="mutualFriendsError"
-                        @click="openExternalLink('https://docs.vrchat.com/docs/vrchat-202542#mutuals')"
-                        style="
-                            margin-top: 20px;
-                            display: flex;
-                            justify-content: center;
-                            align-items: center;
-                            color: #f56c6c;
-                            cursor: pointer;
-                        ">
-                        <AlertTriangle style="margin-right: 5px" />
-                        <span>Mutual Friends unavailable due to VRChat staged rollout, click for more info</span>
-                    </div>
-                    <ul
-                        class="x-friend-list"
-                        style="margin-top: 10px; overflow: auto; max-height: 250px; min-width: 130px">
-                        <li
-                            v-for="user in userDialog.mutualFriends"
-                            :key="user.id"
-                            class="x-friend-item x-friend-item-border"
-                            @click="showUserDialog(user.id)">
-                            <div class="avatar">
-                                <img :src="userImage(user)" loading="lazy" />
-                            </div>
-                            <div class="detail">
-                                <span
-                                    class="name"
-                                    :style="{ color: user.$userColour }"
-                                    v-text="user.displayName"></span>
-                            </div>
-                        </li>
-                    </ul>
-                </template>
-
-                <template #Groups>
-                    <div style="display: flex; align-items: center; justify-content: space-between">
-                        <div style="display: flex; align-items: center">
-                            <Button
-                                class="rounded-full"
-                                variant="outline"
-                                size="icon-sm"
-                                :disabled="userDialog.isGroupsLoading"
-                                @click="getUserGroups(userDialog.id)">
-                                <Spinner v-if="userDialog.isGroupsLoading" />
-                                <RefreshCw v-else />
-                            </Button>
-                            <span style="margin-left: 5px">{{
-                                t('dialog.user.groups.total_count', { count: userGroups.groups.length })
-                            }}</span>
-                            <template v-if="userDialogGroupEditMode">
-                                <span
-                                    style="margin-left: 10px; color: var(--el-text-color-secondary); font-size: 10px"
-                                    >{{ t('dialog.user.groups.hold_shift') }}</span
-                                >
+                            <template v-if="currentUser.id === userDialog.id">
+                                <div class="x-friend-item" @click="toggleAvatarCopying">
+                                    <div class="detail">
+                                        <span class="name">{{ t('dialog.user.info.avatar_cloning') }}</span>
+                                        <span
+                                            v-if="currentUser.allowAvatarCopying"
+                                            class="extra"
+                                            style="color: var(--el-color-success)"
+                                            >{{ t('dialog.user.info.avatar_cloning_allow') }}</span
+                                        >
+                                        <span v-else class="extra" style="color: var(--el-color-danger)">{{
+                                            t('dialog.user.info.avatar_cloning_deny')
+                                        }}</span>
+                                    </div>
+                                </div>
+                                <div class="x-friend-item" @click="toggleAllowBooping">
+                                    <div class="detail">
+                                        <span class="name">{{ t('dialog.user.info.booping') }}</span>
+                                        <span
+                                            v-if="currentUser.isBoopingEnabled"
+                                            class="extra"
+                                            style="color: var(--el-color-success)"
+                                            >{{ t('dialog.user.info.avatar_cloning_allow') }}</span
+                                        >
+                                        <span v-else class="extra" style="color: var(--el-color-danger)">{{
+                                            t('dialog.user.info.avatar_cloning_deny')
+                                        }}</span>
+                                    </div>
+                                </div>
+                                <div class="x-friend-item" @click="toggleSharedConnectionsOptOut">
+                                    <div class="detail">
+                                        <span class="name">{{ t('dialog.user.info.show_mutual_friends') }}</span>
+                                        <span
+                                            v-if="!currentUser.hasSharedConnectionsOptOut"
+                                            class="extra"
+                                            style="color: var(--el-color-success)"
+                                            >{{ t('dialog.user.info.avatar_cloning_allow') }}</span
+                                        >
+                                        <span v-else class="extra" style="color: var(--el-color-danger)">{{
+                                            t('dialog.user.info.avatar_cloning_deny')
+                                        }}</span>
+                                    </div>
+                                </div>
                             </template>
+                            <template v-else>
+                                <div class="x-friend-item" style="cursor: default">
+                                    <div class="detail">
+                                        <span class="name">{{ t('dialog.user.info.avatar_cloning') }}</span>
+                                        <span
+                                            v-if="userDialog.ref.allowAvatarCopying"
+                                            class="extra"
+                                            style="color: var(--el-color-success)"
+                                            >{{ t('dialog.user.info.avatar_cloning_allow') }}</span
+                                        >
+                                        <span v-else class="extra" style="color: var(--el-color-danger)">{{
+                                            t('dialog.user.info.avatar_cloning_deny')
+                                        }}</span>
+                                    </div>
+                                </div>
+                            </template>
+                            <div
+                                v-if="userDialog.ref.id === currentUser.id"
+                                class="x-friend-item"
+                                @click="getVRChatCredits()">
+                                <div class="detail">
+                                    <span class="name">{{ t('view.profile.profile.vrchat_credits') }}</span>
+                                    <span class="extra">{{ vrchatCredit ?? t('view.profile.profile.refresh') }}</span>
+                                </div>
+                            </div>
+                            <div
+                                v-if="userDialog.ref.id === currentUser.id && currentUser.homeLocation"
+                                class="x-friend-item"
+                                style="width: 100%"
+                                @click="showWorldDialog(currentUser.homeLocation)">
+                                <div class="detail">
+                                    <span class="name">{{ t('dialog.user.info.home_location') }}</span>
+                                    <span class="extra">
+                                        <span v-text="userDialog.$homeLocationName"></span>
+                                        <Button
+                                            class="rounded-full ml-1 text-xs"
+                                            size="icon-sm"
+                                            variant="outline"
+                                            @click.stop="resetHome()"
+                                            ><Trash2 class="h-4 w-4" />
+                                        </Button>
+                                    </span>
+                                </div>
+                            </div>
+                            <div class="x-friend-item" style="width: 100%; cursor: default">
+                                <div class="detail">
+                                    <span class="name">{{ t('dialog.user.info.id') }}</span>
+                                    <span class="extra">
+                                        {{ userDialog.id }}
+                                        <TooltipWrapper side="top" :content="t('dialog.user.info.id_tooltip')">
+                                            <DropdownMenu>
+                                                <DropdownMenuTrigger as-child>
+                                                    <Button
+                                                        class="rounded-full ml-1 text-xs"
+                                                        size="icon-sm"
+                                                        variant="outline"
+                                                        @click.stop
+                                                        ><Copy class="h-4 w-4" />
+                                                    </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>
+                            </div>
                         </div>
-                        <div style="display: flex; align-items: center">
-                            <template v-if="!userDialogGroupEditMode">
+                    </template>
+
+                    <template
+                        v-if="userDialog.id !== currentUser.id && !currentUser.hasSharedConnectionsOptOut"
+                        #mutual>
+                        <div style="display: flex; align-items: center; justify-content: space-between">
+                            <div style="display: flex; align-items: center">
+                                <Button
+                                    class="rounded-full"
+                                    variant="outline"
+                                    size="icon-sm"
+                                    :disabled="userDialog.isMutualFriendsLoading"
+                                    @click="getUserMutualFriends(userDialog.id)">
+                                    <Spinner v-if="userDialog.isMutualFriendsLoading" />
+                                    <RefreshCw v-else />
+                                </Button>
+                                <span style="margin-left: 5px">{{
+                                    t('dialog.user.groups.total_count', { count: userDialog.mutualFriends.length })
+                                }}</span>
+                            </div>
+                            <div style="display: flex; align-items: center">
                                 <span style="margin-right: 5px">{{ t('dialog.user.groups.sort_by') }}</span>
                                 <Select
-                                    :model-value="userDialogGroupSortingKey"
-                                    :disabled="userDialog.isGroupsLoading"
-                                    @update:modelValue="setUserDialogGroupSortingByKey">
+                                    :model-value="userDialogMutualFriendSortingKey"
+                                    :disabled="userDialog.isMutualFriendsLoading"
+                                    @update:modelValue="setUserDialogMutualFriendSortingByKey">
                                     <SelectTrigger size="sm" @click.stop>
                                         <SelectValue />
                                     </SelectTrigger>
                                     <SelectContent>
                                         <SelectItem
-                                            v-for="(item, key) in userDialogGroupSortingOptions"
+                                            v-for="(item, key) in userDialogMutualFriendSortingOptions"
                                             :key="String(key)"
-                                            :value="String(key)"
-                                            :disabled="
-                                                item === userDialogGroupSortingOptions.inGame &&
-                                                userDialog.id !== currentUser.id
-                                            ">
+                                            :value="String(key)">
                                             {{ t(item.name) }}
                                         </SelectItem>
                                     </SelectContent>
                                 </Select>
-                            </template>
-                            <Button
-                                variant="outline"
-                                size="sm"
-                                v-if="userDialogGroupEditMode"
-                                @click="exitEditModeCurrentUserGroups">
-                                {{ t('dialog.user.groups.exit_edit_mode') }}
-                            </Button>
-                            <Button
-                                size="sm"
-                                variant="outline"
-                                v-else-if="currentUser.id === userDialog.id"
-                                class="ml-2"
-                                @click="editModeCurrentUserGroups">
-                                {{ t('dialog.user.groups.edit_mode') }}
-                            </Button>
+                            </div>
                         </div>
-                    </div>
-                    <div v-loading="userDialog.isGroupsLoading" style="margin-top: 10px">
-                        <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) -->
-                                <Select :model-value="bulkGroupActionValue" @update:modelValue="handleBulkGroupAction">
-                                    <SelectTrigger size="sm" style="margin-right: 5px; margin-bottom: 5px" @click.stop>
-                                        <SelectValue :placeholder="t('dialog.group.actions.manage_selected')" />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                        <SelectItem value="visibility:visible">
-                                            {{ t('dialog.group.actions.visibility_everyone') }}
-                                        </SelectItem>
-                                        <SelectItem value="visibility:friends">
-                                            {{ t('dialog.group.actions.visibility_friends') }}
-                                        </SelectItem>
-                                        <SelectItem value="visibility:hidden">
-                                            {{ t('dialog.group.actions.visibility_hidden') }}
-                                        </SelectItem>
-                                        <SelectItem value="leave">
-                                            {{ t('dialog.user.groups.leave_group_tooltip') }}
-                                        </SelectItem>
-                                    </SelectContent>
-                                </Select>
+                        <div
+                            v-if="mutualFriendsError"
+                            @click="openExternalLink('https://docs.vrchat.com/docs/vrchat-202542#mutuals')"
+                            style="
+                                margin-top: 20px;
+                                display: flex;
+                                justify-content: center;
+                                align-items: center;
+                                color: #f56c6c;
+                                cursor: pointer;
+                            ">
+                            <AlertTriangle style="margin-right: 5px" />
+                            <span>Mutual Friends unavailable due to VRChat staged rollout, click for more info</span>
+                        </div>
+                        <ul
+                            class="x-friend-list"
+                            style="margin-top: 10px; overflow: auto; max-height: 250px; min-width: 130px">
+                            <li
+                                v-for="user in userDialog.mutualFriends"
+                                :key="user.id"
+                                class="x-friend-item x-friend-item-border"
+                                @click="showUserDialog(user.id)">
+                                <div class="avatar">
+                                    <img :src="userImage(user)" loading="lazy" />
+                                </div>
+                                <div class="detail">
+                                    <span
+                                        class="name"
+                                        :style="{ color: user.$userColour }"
+                                        v-text="user.displayName"></span>
+                                </div>
+                            </li>
+                        </ul>
+                    </template>
 
-                                <!-- Select All button -->
+                    <template #Groups>
+                        <div style="display: flex; align-items: center; justify-content: space-between">
+                            <div style="display: flex; align-items: center">
                                 <Button
-                                    size="sm"
+                                    class="rounded-full"
                                     variant="outline"
-                                    style="padding: 7px 15px; margin-bottom: 5px"
-                                    @click="selectAllGroups">
-                                    {{
-                                        userDialogGroupAllSelected
-                                            ? t('dialog.group.actions.deselect_all')
-                                            : t('dialog.group.actions.select_all')
-                                    }}
+                                    size="icon-sm"
+                                    :disabled="userDialog.isGroupsLoading"
+                                    @click="getUserGroups(userDialog.id)">
+                                    <Spinner v-if="userDialog.isGroupsLoading" />
+                                    <RefreshCw v-else />
                                 </Button>
-
-                                <div
-                                    v-for="group in userDialogGroupEditGroups"
-                                    :key="group.id"
-                                    class="x-friend-item x-friend-item-border"
-                                    style="width: 100%"
-                                    @click="showGroupDialog(group.id)">
-                                    <!-- Manual checkbox -->
-                                    <div
+                                <span style="margin-left: 5px">{{
+                                    t('dialog.user.groups.total_count', { count: userGroups.groups.length })
+                                }}</span>
+                                <template v-if="userDialogGroupEditMode">
+                                    <span
                                         style="
-                                            margin-left: 5px;
-                                            margin-right: 5px;
-                                            transform: scale(0.8);
-                                            transform-origin: left center;
+                                            margin-left: 10px;
+                                            color: var(--el-text-color-secondary);
+                                            font-size: 10px;
                                         "
-                                        @click.stop>
-                                        <Checkbox
-                                            :model-value="userDialogGroupEditSelectedGroupIds.includes(group.id)"
-                                            @update:modelValue="() => toggleGroupSelection(group.id)" />
-                                    </div>
-
-                                    <div style="margin-right: 3px; margin-left: 5px" @click.stop>
-                                        <Button
-                                            size="icon-sm"
-                                            variant="outline"
-                                            style="
-                                                display: block;
-                                                padding: 7px;
-                                                font-size: 9px;
-                                                margin-left: 0;
-                                                rotate: 180deg;
-                                            "
-                                            @click="moveGroupTop(group.id)">
-                                            <DownloadIcon />
-                                        </Button>
-                                        <Button
-                                            size="icon-sm"
-                                            variant="outline"
-                                            style="display: block; padding: 7px; font-size: 9px; margin-left: 0"
-                                            @click="moveGroupBottom(group.id)">
-                                            <DownloadIcon />
-                                        </Button>
-                                    </div>
-                                    <div style="margin-right: 10px" @click.stop>
-                                        <Button
-                                            size="icon-sm"
-                                            variant="outline"
-                                            style="display: block; padding: 7px; font-size: 9px; margin-left: 0"
-                                            @click="moveGroupUp(group.id)">
-                                            <ArrowUp />
-                                        </Button>
-                                        <Button
-                                            size="icon-sm"
-                                            variant="outline"
-                                            style="display: block; padding: 7px; font-size: 9px; margin-left: 0"
-                                            @click="moveGroupDown(group.id)">
-                                            <ArrowDown />
-                                        </Button>
-                                    </div>
-                                    <div class="avatar">
-                                        <img :src="group.iconUrl" loading="lazy" />
-                                    </div>
-                                    <div class="detail">
-                                        <span class="name" v-text="group.name"></span>
-                                        <span class="extra">
-                                            <TooltipWrapper
-                                                v-if="group.isRepresenting"
-                                                side="top"
-                                                :content="t('dialog.group.members.representing')">
-                                                <Tag style="margin-right: 5px" />
-                                            </TooltipWrapper>
-                                            <TooltipWrapper v-if="group.myMember?.visibility !== 'visible'" side="top">
-                                                <template #content>
-                                                    <span
-                                                        >{{ t('dialog.group.members.visibility') }}
-                                                        {{ group.myMember.visibility }}</span
-                                                    >
-                                                </template>
-                                                <Eye style="margin-right: 5px" />
-                                            </TooltipWrapper>
-                                            <span>({{ group.memberCount }})</span>
-                                        </span>
-                                    </div>
+                                        >{{ t('dialog.user.groups.hold_shift') }}</span
+                                    >
+                                </template>
+                            </div>
+                            <div style="display: flex; align-items: center">
+                                <template v-if="!userDialogGroupEditMode">
+                                    <span style="margin-right: 5px">{{ t('dialog.user.groups.sort_by') }}</span>
                                     <Select
-                                        v-if="group.myMember?.visibility"
-                                        :model-value="group.myMember.visibility"
-                                        :disabled="group.privacy !== 'default'"
-                                        @update:modelValue="(value) => setGroupVisibility(group.id, value)">
+                                        :model-value="userDialogGroupSortingKey"
+                                        :disabled="userDialog.isGroupsLoading"
+                                        @update:modelValue="setUserDialogGroupSortingByKey">
                                         <SelectTrigger size="sm" @click.stop>
-                                            <SelectValue
-                                                :placeholder="
-                                                    group.myMember.visibility === 'visible'
-                                                        ? t('dialog.group.tags.visible')
-                                                        : group.myMember.visibility === 'friends'
-                                                          ? t('dialog.group.tags.friends')
-                                                          : group.myMember.visibility === 'hidden'
-                                                            ? t('dialog.group.tags.hidden')
-                                                            : group.myMember.visibility
-                                                " />
+                                            <SelectValue />
                                         </SelectTrigger>
                                         <SelectContent>
-                                            <SelectItem value="visible">
-                                                {{ t('dialog.group.actions.visibility_everyone') }}
-                                            </SelectItem>
-                                            <SelectItem value="friends">
-                                                {{ t('dialog.group.actions.visibility_friends') }}
-                                            </SelectItem>
-                                            <SelectItem value="hidden">
-                                                {{ t('dialog.group.actions.visibility_hidden') }}
+                                            <SelectItem
+                                                v-for="(item, key) in userDialogGroupSortingOptions"
+                                                :key="String(key)"
+                                                :value="String(key)"
+                                                :disabled="
+                                                    item === userDialogGroupSortingOptions.inGame &&
+                                                    userDialog.id !== currentUser.id
+                                                ">
+                                                {{ t(item.name) }}
                                             </SelectItem>
                                         </SelectContent>
                                     </Select>
-                                    <!--//- JSON is missing isSubscribedToAnnouncements, can't be implemented-->
-                                    <!-- <Button size="sm" variant="outline"
+                                </template>
+                                <Button
+                                    variant="outline"
+                                    size="sm"
+                                    v-if="userDialogGroupEditMode"
+                                    @click="exitEditModeCurrentUserGroups">
+                                    {{ t('dialog.user.groups.exit_edit_mode') }}
+                                </Button>
+                                <Button
+                                    size="sm"
+                                    variant="outline"
+                                    v-else-if="currentUser.id === userDialog.id"
+                                    class="ml-2"
+                                    @click="editModeCurrentUserGroups">
+                                    {{ t('dialog.user.groups.edit_mode') }}
+                                </Button>
+                            </div>
+                        </div>
+                        <div v-loading="userDialog.isGroupsLoading" style="margin-top: 10px">
+                            <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) -->
+                                    <Select
+                                        :model-value="bulkGroupActionValue"
+                                        @update:modelValue="handleBulkGroupAction">
+                                        <SelectTrigger
+                                            size="sm"
+                                            style="margin-right: 5px; margin-bottom: 5px"
+                                            @click.stop>
+                                            <SelectValue :placeholder="t('dialog.group.actions.manage_selected')" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="visibility:visible">
+                                                {{ t('dialog.group.actions.visibility_everyone') }}
+                                            </SelectItem>
+                                            <SelectItem value="visibility:friends">
+                                                {{ t('dialog.group.actions.visibility_friends') }}
+                                            </SelectItem>
+                                            <SelectItem value="visibility:hidden">
+                                                {{ t('dialog.group.actions.visibility_hidden') }}
+                                            </SelectItem>
+                                            <SelectItem value="leave">
+                                                {{ t('dialog.user.groups.leave_group_tooltip') }}
+                                            </SelectItem>
+                                        </SelectContent>
+                                    </Select>
+
+                                    <!-- Select All button -->
+                                    <Button
+                                        size="sm"
+                                        variant="outline"
+                                        style="padding: 7px 15px; margin-bottom: 5px"
+                                        @click="selectAllGroups">
+                                        {{
+                                            userDialogGroupAllSelected
+                                                ? t('dialog.group.actions.deselect_all')
+                                                : t('dialog.group.actions.select_all')
+                                        }}
+                                    </Button>
+
+                                    <div
+                                        v-for="group in userDialogGroupEditGroups"
+                                        :key="group.id"
+                                        class="x-friend-item x-friend-item-border"
+                                        style="width: 100%"
+                                        @click="showGroupDialog(group.id)">
+                                        <!-- Manual checkbox -->
+                                        <div
+                                            style="
+                                                margin-left: 5px;
+                                                margin-right: 5px;
+                                                transform: scale(0.8);
+                                                transform-origin: left center;
+                                            "
+                                            @click.stop>
+                                            <Checkbox
+                                                :model-value="userDialogGroupEditSelectedGroupIds.includes(group.id)"
+                                                @update:modelValue="() => toggleGroupSelection(group.id)" />
+                                        </div>
+
+                                        <div style="margin-right: 3px; margin-left: 5px" @click.stop>
+                                            <Button
+                                                size="icon-sm"
+                                                variant="outline"
+                                                style="
+                                                    display: block;
+                                                    padding: 7px;
+                                                    font-size: 9px;
+                                                    margin-left: 0;
+                                                    rotate: 180deg;
+                                                "
+                                                @click="moveGroupTop(group.id)">
+                                                <DownloadIcon />
+                                            </Button>
+                                            <Button
+                                                size="icon-sm"
+                                                variant="outline"
+                                                style="display: block; padding: 7px; font-size: 9px; margin-left: 0"
+                                                @click="moveGroupBottom(group.id)">
+                                                <DownloadIcon />
+                                            </Button>
+                                        </div>
+                                        <div style="margin-right: 10px" @click.stop>
+                                            <Button
+                                                size="icon-sm"
+                                                variant="outline"
+                                                style="display: block; padding: 7px; font-size: 9px; margin-left: 0"
+                                                @click="moveGroupUp(group.id)">
+                                                <ArrowUp />
+                                            </Button>
+                                            <Button
+                                                size="icon-sm"
+                                                variant="outline"
+                                                style="display: block; padding: 7px; font-size: 9px; margin-left: 0"
+                                                @click="moveGroupDown(group.id)">
+                                                <ArrowDown />
+                                            </Button>
+                                        </div>
+                                        <div class="avatar">
+                                            <img :src="group.iconUrl" loading="lazy" />
+                                        </div>
+                                        <div class="detail">
+                                            <span class="name" v-text="group.name"></span>
+                                            <span class="extra">
+                                                <TooltipWrapper
+                                                    v-if="group.isRepresenting"
+                                                    side="top"
+                                                    :content="t('dialog.group.members.representing')">
+                                                    <Tag style="margin-right: 5px" />
+                                                </TooltipWrapper>
+                                                <TooltipWrapper
+                                                    v-if="group.myMember?.visibility !== 'visible'"
+                                                    side="top">
+                                                    <template #content>
+                                                        <span
+                                                            >{{ t('dialog.group.members.visibility') }}
+                                                            {{ group.myMember.visibility }}</span
+                                                        >
+                                                    </template>
+                                                    <Eye style="margin-right: 5px" />
+                                                </TooltipWrapper>
+                                                <span>({{ group.memberCount }})</span>
+                                            </span>
+                                        </div>
+                                        <Select
+                                            v-if="group.myMember?.visibility"
+                                            :model-value="group.myMember.visibility"
+                                            :disabled="group.privacy !== 'default'"
+                                            @update:modelValue="(value) => setGroupVisibility(group.id, value)">
+                                            <SelectTrigger size="sm" @click.stop>
+                                                <SelectValue
+                                                    :placeholder="
+                                                        group.myMember.visibility === 'visible'
+                                                            ? t('dialog.group.tags.visible')
+                                                            : group.myMember.visibility === 'friends'
+                                                              ? t('dialog.group.tags.friends')
+                                                              : group.myMember.visibility === 'hidden'
+                                                                ? t('dialog.group.tags.hidden')
+                                                                : group.myMember.visibility
+                                                    " />
+                                            </SelectTrigger>
+                                            <SelectContent>
+                                                <SelectItem value="visible">
+                                                    {{ t('dialog.group.actions.visibility_everyone') }}
+                                                </SelectItem>
+                                                <SelectItem value="friends">
+                                                    {{ t('dialog.group.actions.visibility_friends') }}
+                                                </SelectItem>
+                                                <SelectItem value="hidden">
+                                                    {{ t('dialog.group.actions.visibility_hidden') }}
+                                                </SelectItem>
+                                            </SelectContent>
+                                        </Select>
+                                        <!--//- JSON is missing isSubscribedToAnnouncements, can't be implemented-->
+                                        <!-- <Button size="sm" variant="outline"
                                         @click.stop="
                                             setGroupSubscription(group.id, !group.myMember.isSubscribedToAnnouncements)
                                         ">
@@ -848,247 +874,261 @@
                                             {{ t('dialog.group.tags.unsubscribed') }}</span
                                         >
                                     </Button> -->
-                                    <TooltipWrapper side="right" :content="t('dialog.user.groups.leave_group_tooltip')">
-                                        <Button
-                                            class="rounded-full h-6 w-6"
-                                            size="icon-sm"
-                                            variant="outline"
-                                            v-if="shiftHeld"
-                                            style="color: var(--el-color-danger); margin-left: 5px"
-                                            @click.stop="leaveGroup(group.id)">
-                                            <LogOut />
-                                        </Button>
-                                        <Button
-                                            class="rounded-full h-6 w-6 text-red-600"
-                                            size="icon-sm"
-                                            variant="outline"
-                                            v-else
-                                            style="margin-left: 5px"
-                                            @click.stop="leaveGroupPrompt(group.id)">
-                                            <LogOut />
-                                        </Button>
-                                    </TooltipWrapper>
-                                </div>
-                            </div>
-                        </template>
-                        <template v-else>
-                            <template v-if="userGroups.ownGroups.length > 0">
-                                <span style="font-weight: bold; font-size: 16px">{{
-                                    t('dialog.user.groups.own_groups')
-                                }}</span>
-                                <span style="color: var(--el-text-color-secondary); font-size: 12px; margin-left: 5px"
-                                    >{{ userGroups.ownGroups.length }}/{{
-                                        cachedConfig?.constants?.GROUPS?.MAX_OWNED
-                                    }}</span
-                                >
-                                <div
-                                    class="x-friend-list"
-                                    style="margin-top: 10px; margin-bottom: 15px; min-height: 60px">
-                                    <div
-                                        v-for="group in userGroups.ownGroups"
-                                        :key="group.id"
-                                        class="x-friend-item x-friend-item-border"
-                                        @click="showGroupDialog(group.id)">
-                                        <div class="avatar">
-                                            <img :src="group.iconUrl" loading="lazy" />
-                                        </div>
-                                        <div class="detail">
-                                            <span class="name" v-text="group.name"></span>
-                                            <span class="extra">
-                                                <TooltipWrapper
-                                                    v-if="group.isRepresenting"
-                                                    side="top"
-                                                    :content="t('dialog.group.members.representing')">
-                                                    <Tag style="margin-right: 5px" />
-                                                </TooltipWrapper>
-                                                <TooltipWrapper v-if="group.memberVisibility !== 'visible'" side="top">
-                                                    <template #content>
-                                                        <span
-                                                            >{{ t('dialog.group.members.visibility') }}
-                                                            {{ group.memberVisibility }}</span
-                                                        >
-                                                    </template>
-                                                    <Eye style="margin-right: 5px" />
-                                                </TooltipWrapper>
-                                                <span>({{ group.memberCount }})</span>
-                                            </span>
-                                        </div>
+                                        <TooltipWrapper
+                                            side="right"
+                                            :content="t('dialog.user.groups.leave_group_tooltip')">
+                                            <Button
+                                                class="rounded-full h-6 w-6"
+                                                size="icon-sm"
+                                                variant="outline"
+                                                v-if="shiftHeld"
+                                                style="color: var(--el-color-danger); margin-left: 5px"
+                                                @click.stop="leaveGroup(group.id)">
+                                                <LogOut />
+                                            </Button>
+                                            <Button
+                                                class="rounded-full h-6 w-6 text-red-600"
+                                                size="icon-sm"
+                                                variant="outline"
+                                                v-else
+                                                style="margin-left: 5px"
+                                                @click.stop="leaveGroupPrompt(group.id)">
+                                                <LogOut />
+                                            </Button>
+                                        </TooltipWrapper>
                                     </div>
                                 </div>
                             </template>
-                            <template v-if="userGroups.mutualGroups.length > 0">
-                                <span style="font-weight: bold; font-size: 16px">{{
-                                    t('dialog.user.groups.mutual_groups')
-                                }}</span>
-                                <span
-                                    style="color: var(--el-text-color-secondary); font-size: 12px; margin-left: 5px"
-                                    >{{ userGroups.mutualGroups.length }}</span
-                                >
-                                <div
-                                    class="x-friend-list"
-                                    style="margin-top: 10px; margin-bottom: 15px; min-height: 60px">
+                            <template v-else>
+                                <template v-if="userGroups.ownGroups.length > 0">
+                                    <span style="font-weight: bold; font-size: 16px">{{
+                                        t('dialog.user.groups.own_groups')
+                                    }}</span>
+                                    <span
+                                        style="color: var(--el-text-color-secondary); font-size: 12px; margin-left: 5px"
+                                        >{{ userGroups.ownGroups.length }}/{{
+                                            cachedConfig?.constants?.GROUPS?.MAX_OWNED
+                                        }}</span
+                                    >
                                     <div
-                                        v-for="group in userGroups.mutualGroups"
-                                        :key="group.id"
-                                        class="x-friend-item x-friend-item-border"
-                                        @click="showGroupDialog(group.id)">
-                                        <div class="avatar">
-                                            <img :src="group.iconUrl" loading="lazy" />
-                                        </div>
-                                        <div class="detail">
-                                            <span class="name" v-text="group.name"></span>
-                                            <span class="extra">
-                                                <TooltipWrapper
-                                                    v-if="group.isRepresenting"
-                                                    side="top"
-                                                    :content="t('dialog.group.members.representing')">
-                                                    <Tag style="margin-right: 5px" />
-                                                </TooltipWrapper>
-                                                <TooltipWrapper v-if="group.memberVisibility !== 'visible'" side="top">
-                                                    <template #content>
-                                                        <span
-                                                            >{{ t('dialog.group.members.visibility') }}
-                                                            {{ group.memberVisibility }}</span
-                                                        >
-                                                    </template>
-                                                    <Eye style="margin-right: 5px" />
-                                                </TooltipWrapper>
-                                                <span>({{ group.memberCount }})</span>
-                                            </span>
+                                        class="x-friend-list"
+                                        style="margin-top: 10px; margin-bottom: 15px; min-height: 60px">
+                                        <div
+                                            v-for="group in userGroups.ownGroups"
+                                            :key="group.id"
+                                            class="x-friend-item x-friend-item-border"
+                                            @click="showGroupDialog(group.id)">
+                                            <div class="avatar">
+                                                <img :src="group.iconUrl" loading="lazy" />
+                                            </div>
+                                            <div class="detail">
+                                                <span class="name" v-text="group.name"></span>
+                                                <span class="extra">
+                                                    <TooltipWrapper
+                                                        v-if="group.isRepresenting"
+                                                        side="top"
+                                                        :content="t('dialog.group.members.representing')">
+                                                        <Tag style="margin-right: 5px" />
+                                                    </TooltipWrapper>
+                                                    <TooltipWrapper
+                                                        v-if="group.memberVisibility !== 'visible'"
+                                                        side="top">
+                                                        <template #content>
+                                                            <span
+                                                                >{{ t('dialog.group.members.visibility') }}
+                                                                {{ group.memberVisibility }}</span
+                                                            >
+                                                        </template>
+                                                        <Eye style="margin-right: 5px" />
+                                                    </TooltipWrapper>
+                                                    <span>({{ group.memberCount }})</span>
+                                                </span>
+                                            </div>
                                         </div>
                                     </div>
-                                </div>
-                            </template>
-                            <template v-if="userGroups.remainingGroups.length > 0">
-                                <span style="font-weight: bold; font-size: 16px">{{
-                                    t('dialog.user.groups.groups')
-                                }}</span>
-                                <span style="color: var(--el-text-color-secondary); font-size: 12px; margin-left: 5px">
-                                    {{ userGroups.remainingGroups.length }}
-                                    <template v-if="currentUser.id === userDialog.id">
-                                        /
-                                        <template v-if="isLocalUserVrcPlusSupporter">
-                                            {{ cachedConfig?.constants?.GROUPS?.MAX_JOINED_PLUS }}
+                                </template>
+                                <template v-if="userGroups.mutualGroups.length > 0">
+                                    <span style="font-weight: bold; font-size: 16px">{{
+                                        t('dialog.user.groups.mutual_groups')
+                                    }}</span>
+                                    <span
+                                        style="color: var(--el-text-color-secondary); font-size: 12px; margin-left: 5px"
+                                        >{{ userGroups.mutualGroups.length }}</span
+                                    >
+                                    <div
+                                        class="x-friend-list"
+                                        style="margin-top: 10px; margin-bottom: 15px; min-height: 60px">
+                                        <div
+                                            v-for="group in userGroups.mutualGroups"
+                                            :key="group.id"
+                                            class="x-friend-item x-friend-item-border"
+                                            @click="showGroupDialog(group.id)">
+                                            <div class="avatar">
+                                                <img :src="group.iconUrl" loading="lazy" />
+                                            </div>
+                                            <div class="detail">
+                                                <span class="name" v-text="group.name"></span>
+                                                <span class="extra">
+                                                    <TooltipWrapper
+                                                        v-if="group.isRepresenting"
+                                                        side="top"
+                                                        :content="t('dialog.group.members.representing')">
+                                                        <Tag style="margin-right: 5px" />
+                                                    </TooltipWrapper>
+                                                    <TooltipWrapper
+                                                        v-if="group.memberVisibility !== 'visible'"
+                                                        side="top">
+                                                        <template #content>
+                                                            <span
+                                                                >{{ t('dialog.group.members.visibility') }}
+                                                                {{ group.memberVisibility }}</span
+                                                            >
+                                                        </template>
+                                                        <Eye style="margin-right: 5px" />
+                                                    </TooltipWrapper>
+                                                    <span>({{ group.memberCount }})</span>
+                                                </span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </template>
+                                <template v-if="userGroups.remainingGroups.length > 0">
+                                    <span style="font-weight: bold; font-size: 16px">{{
+                                        t('dialog.user.groups.groups')
+                                    }}</span>
+                                    <span
+                                        style="
+                                            color: var(--el-text-color-secondary);
+                                            font-size: 12px;
+                                            margin-left: 5px;
+                                        ">
+                                        {{ userGroups.remainingGroups.length }}
+                                        <template v-if="currentUser.id === userDialog.id">
+                                            /
+                                            <template v-if="isLocalUserVrcPlusSupporter">
+                                                {{ cachedConfig?.constants?.GROUPS?.MAX_JOINED_PLUS }}
+                                            </template>
+                                            <template v-else>
+                                                {{ cachedConfig?.constants?.GROUPS?.MAX_JOINED }}
+                                            </template>
                                         </template>
-                                        <template v-else>
-                                            {{ cachedConfig?.constants?.GROUPS?.MAX_JOINED }}
-                                        </template>
-                                    </template>
-                                </span>
-                                <div
-                                    class="x-friend-list"
-                                    style="margin-top: 10px; margin-bottom: 15px; min-height: 60px">
+                                    </span>
                                     <div
-                                        v-for="group in userGroups.remainingGroups"
-                                        :key="group.id"
-                                        class="x-friend-item x-friend-item-border"
-                                        @click="showGroupDialog(group.id)">
-                                        <div class="avatar">
-                                            <img :src="group.iconUrl" loading="lazy" />
-                                        </div>
-                                        <div class="detail">
-                                            <span class="name" v-text="group.name"></span>
-                                            <span class="extra">
-                                                <TooltipWrapper
-                                                    v-if="group.isRepresenting"
-                                                    side="top"
-                                                    :content="t('dialog.group.members.representing')">
-                                                    <Tag style="margin-right: 5px" />
-                                                </TooltipWrapper>
-                                                <TooltipWrapper v-if="group.memberVisibility !== 'visible'" side="top">
-                                                    <template #content>
-                                                        <span
-                                                            >{{ t('dialog.group.members.visibility') }}
-                                                            {{ group.memberVisibility }}</span
-                                                        >
-                                                    </template>
-                                                    <Eye style="margin-right: 5px" />
-                                                </TooltipWrapper>
-                                                <span>({{ group.memberCount }})</span>
-                                            </span>
+                                        class="x-friend-list"
+                                        style="margin-top: 10px; margin-bottom: 15px; min-height: 60px">
+                                        <div
+                                            v-for="group in userGroups.remainingGroups"
+                                            :key="group.id"
+                                            class="x-friend-item x-friend-item-border"
+                                            @click="showGroupDialog(group.id)">
+                                            <div class="avatar">
+                                                <img :src="group.iconUrl" loading="lazy" />
+                                            </div>
+                                            <div class="detail">
+                                                <span class="name" v-text="group.name"></span>
+                                                <span class="extra">
+                                                    <TooltipWrapper
+                                                        v-if="group.isRepresenting"
+                                                        side="top"
+                                                        :content="t('dialog.group.members.representing')">
+                                                        <Tag style="margin-right: 5px" />
+                                                    </TooltipWrapper>
+                                                    <TooltipWrapper
+                                                        v-if="group.memberVisibility !== 'visible'"
+                                                        side="top">
+                                                        <template #content>
+                                                            <span
+                                                                >{{ t('dialog.group.members.visibility') }}
+                                                                {{ group.memberVisibility }}</span
+                                                            >
+                                                        </template>
+                                                        <Eye style="margin-right: 5px" />
+                                                    </TooltipWrapper>
+                                                    <span>({{ group.memberCount }})</span>
+                                                </span>
+                                            </div>
                                         </div>
                                     </div>
-                                </div>
+                                </template>
                             </template>
-                        </template>
-                    </div>
-                </template>
+                        </div>
+                    </template>
 
-                <template #Worlds>
-                    <div style="display: flex; align-items: center; justify-content: space-between">
-                        <div style="display: flex; align-items: center">
-                            <Button
-                                class="rounded-full"
-                                variant="outline"
-                                size="icon-sm"
-                                :disabled="userDialog.isWorldsLoading"
-                                @click="refreshUserDialogWorlds()">
-                                <Spinner v-if="userDialog.isWorldsLoading" />
-                                <RefreshCw v-else />
-                            </Button>
-                            <span style="margin-left: 5px">{{
-                                t('dialog.user.worlds.total_count', { count: userDialog.worlds.length })
-                            }}</span>
+                    <template #Worlds>
+                        <div style="display: flex; align-items: center; justify-content: space-between">
+                            <div style="display: flex; align-items: center">
+                                <Button
+                                    class="rounded-full"
+                                    variant="outline"
+                                    size="icon-sm"
+                                    :disabled="userDialog.isWorldsLoading"
+                                    @click="refreshUserDialogWorlds()">
+                                    <Spinner v-if="userDialog.isWorldsLoading" />
+                                    <RefreshCw v-else />
+                                </Button>
+                                <span style="margin-left: 5px">{{
+                                    t('dialog.user.worlds.total_count', { count: userDialog.worlds.length })
+                                }}</span>
+                            </div>
+                            <div style="display: flex; align-items: center">
+                                <span class="mr-1">{{ t('dialog.user.worlds.sort_by') }}</span>
+                                <Select
+                                    :model-value="userDialogWorldSortingKey"
+                                    :disabled="userDialog.isWorldsLoading"
+                                    @update:modelValue="setUserDialogWorldSortingByKey">
+                                    <SelectTrigger size="sm" @click.stop>
+                                        <SelectValue />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem
+                                            v-for="(item, key) in userDialogWorldSortingOptions"
+                                            :key="String(key)"
+                                            :value="String(key)">
+                                            {{ t(item.name) }}
+                                        </SelectItem>
+                                    </SelectContent>
+                                </Select>
+                                <span class="ml-2 mr-1">{{ t('dialog.user.worlds.order_by') }}</span>
+                                <Select
+                                    :model-value="userDialogWorldOrderKey"
+                                    :disabled="userDialog.isWorldsLoading"
+                                    @update:modelValue="setUserDialogWorldOrderByKey">
+                                    <SelectTrigger size="sm" @click.stop>
+                                        <SelectValue />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem
+                                            v-for="(item, key) in userDialogWorldOrderOptions"
+                                            :key="String(key)"
+                                            :value="String(key)">
+                                            {{ t(item.name) }}
+                                        </SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
                         </div>
-                        <div style="display: flex; align-items: center">
-                            <span class="mr-1">{{ t('dialog.user.worlds.sort_by') }}</span>
-                            <Select
-                                :model-value="userDialogWorldSortingKey"
-                                :disabled="userDialog.isWorldsLoading"
-                                @update:modelValue="setUserDialogWorldSortingByKey">
-                                <SelectTrigger size="sm" @click.stop>
-                                    <SelectValue />
-                                </SelectTrigger>
-                                <SelectContent>
-                                    <SelectItem
-                                        v-for="(item, key) in userDialogWorldSortingOptions"
-                                        :key="String(key)"
-                                        :value="String(key)">
-                                        {{ t(item.name) }}
-                                    </SelectItem>
-                                </SelectContent>
-                            </Select>
-                            <span class="ml-2 mr-1">{{ t('dialog.user.worlds.order_by') }}</span>
-                            <Select
-                                :model-value="userDialogWorldOrderKey"
-                                :disabled="userDialog.isWorldsLoading"
-                                @update:modelValue="setUserDialogWorldOrderByKey">
-                                <SelectTrigger size="sm" @click.stop>
-                                    <SelectValue />
-                                </SelectTrigger>
-                                <SelectContent>
-                                    <SelectItem
-                                        v-for="(item, key) in userDialogWorldOrderOptions"
-                                        :key="String(key)"
-                                        :value="String(key)">
-                                        {{ t(item.name) }}
-                                    </SelectItem>
-                                </SelectContent>
-                            </Select>
-                        </div>
-                    </div>
-                    <div
-                        v-loading="userDialog.isWorldsLoading"
-                        class="x-friend-list"
-                        style="margin-top: 10px; min-height: 60px">
                         <div
-                            v-for="world in userDialog.worlds"
-                            :key="world.id"
-                            class="x-friend-item x-friend-item-border"
-                            @click="showWorldDialog(world.id)">
-                            <div class="avatar">
-                                <img :src="world.thumbnailImageUrl" loading="lazy" />
-                            </div>
-                            <div class="detail">
-                                <span class="name" v-text="world.name"></span>
-                                <span v-if="world.occupants" class="extra">({{ world.occupants }})</span>
+                            v-loading="userDialog.isWorldsLoading"
+                            class="x-friend-list"
+                            style="margin-top: 10px; min-height: 60px">
+                            <div
+                                v-for="world in userDialog.worlds"
+                                :key="world.id"
+                                class="x-friend-item x-friend-item-border"
+                                @click="showWorldDialog(world.id)">
+                                <div class="avatar">
+                                    <img :src="world.thumbnailImageUrl" loading="lazy" />
+                                </div>
+                                <div class="detail">
+                                    <span class="name" v-text="world.name"></span>
+                                    <span v-if="world.occupants" class="extra">({{ world.occupants }})</span>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                </template>
+                    </template>
 
-                <template #favorite-worlds>
-                    <!-- <Button
+                    <template #favorite-worlds>
+                        <!-- <Button
                         variant="outline"
                         v-if="userFavoriteWorlds && userFavoriteWorlds.length > 0"
                         type="default"
@@ -1099,202 +1139,223 @@
                         style="position: absolute; right: 15px; bottom: 15px; z-index: 99"
                         @click="getUserFavoriteWorlds(userDialog.id)">
                     </Button> -->
-                    <template v-if="userFavoriteWorlds && userFavoriteWorlds.length > 0">
-                        <TabsUnderline
-                            v-model="favoriteWorldsTab"
-                            :items="favoriteWorldTabs"
-                            :unmount-on-hide="false"
-                            v-loading="userDialog.isFavoriteWorldsLoading"
-                            class="zero-margin-tabs"
-                            style="margin-top: 10px; height: 50vh">
-                            <template
-                                v-for="(list, index) in userFavoriteWorlds"
-                                :key="`favorite-worlds-label-${index}`"
-                                v-slot:[`label-${index}`]>
-                                <span>
-                                    <i
-                                        class="x-status-icon"
-                                        style="margin-right: 6px"
-                                        :class="userFavoriteWorldsStatus(list[1])">
-                                    </i>
-                                    <span style="font-weight: bold; font-size: 14px" v-text="list[0]"></span>
-                                    <span
-                                        style="color: var(--el-text-color-secondary); font-size: 10px; margin-left: 5px"
-                                        >{{ list[2].length }}/{{ favoriteLimits.maxFavoritesPerGroup.world }}</span
-                                    >
-                                </span>
-                            </template>
-                            <template
-                                v-for="(list, index) in userFavoriteWorlds"
-                                :key="`favorite-worlds-content-${index}`"
-                                v-slot:[String(index)]>
-                                <div
-                                    class="x-friend-list"
-                                    style="margin-top: 10px; margin-bottom: 15px; min-height: 60px; max-height: none">
+                        <template v-if="userFavoriteWorlds && userFavoriteWorlds.length > 0">
+                            <TabsUnderline
+                                v-model="favoriteWorldsTab"
+                                :items="favoriteWorldTabs"
+                                :unmount-on-hide="false"
+                                v-loading="userDialog.isFavoriteWorldsLoading"
+                                class="zero-margin-tabs"
+                                style="margin-top: 10px; height: 50vh">
+                                <template
+                                    v-for="(list, index) in userFavoriteWorlds"
+                                    :key="`favorite-worlds-label-${index}`"
+                                    v-slot:[`label-${index}`]>
+                                    <span>
+                                        <i
+                                            class="x-status-icon"
+                                            style="margin-right: 6px"
+                                            :class="userFavoriteWorldsStatus(list[1])">
+                                        </i>
+                                        <span style="font-weight: bold; font-size: 14px" v-text="list[0]"></span>
+                                        <span
+                                            style="
+                                                color: var(--el-text-color-secondary);
+                                                font-size: 10px;
+                                                margin-left: 5px;
+                                            "
+                                            >{{ list[2].length }}/{{ favoriteLimits.maxFavoritesPerGroup.world }}</span
+                                        >
+                                    </span>
+                                </template>
+                                <template
+                                    v-for="(list, index) in userFavoriteWorlds"
+                                    :key="`favorite-worlds-content-${index}`"
+                                    v-slot:[String(index)]>
                                     <div
-                                        v-for="world in list[2]"
-                                        :key="world.favoriteId"
-                                        class="x-friend-item x-friend-item-border"
-                                        @click="showWorldDialog(world.id)">
-                                        <div class="avatar">
-                                            <img :src="world.thumbnailImageUrl" loading="lazy" />
-                                        </div>
-                                        <div class="detail">
-                                            <span class="name" v-text="world.name"></span>
-                                            <span v-if="world.occupants" class="extra">({{ world.occupants }})</span>
+                                        class="x-friend-list"
+                                        style="
+                                            margin-top: 10px;
+                                            margin-bottom: 15px;
+                                            min-height: 60px;
+                                            max-height: none;
+                                        ">
+                                        <div
+                                            v-for="world in list[2]"
+                                            :key="world.favoriteId"
+                                            class="x-friend-item x-friend-item-border"
+                                            @click="showWorldDialog(world.id)">
+                                            <div class="avatar">
+                                                <img :src="world.thumbnailImageUrl" loading="lazy" />
+                                            </div>
+                                            <div class="detail">
+                                                <span class="name" v-text="world.name"></span>
+                                                <span v-if="world.occupants" class="extra"
+                                                    >({{ world.occupants }})</span
+                                                >
+                                            </div>
                                         </div>
                                     </div>
+                                </template>
+                            </TabsUnderline>
+                        </template>
+                        <template v-else-if="!userDialog.isFavoriteWorldsLoading">
+                            <div style="display: flex; justify-content: center; align-items: center; height: 100%">
+                                <span style="font-size: 16px">No favorite worlds found.</span>
+                            </div>
+                        </template>
+                    </template>
+
+                    <template #Avatars>
+                        <div style="display: flex; align-items: center; justify-content: space-between">
+                            <div style="display: flex; align-items: center">
+                                <Button
+                                    v-if="userDialog.ref.id === currentUser.id"
+                                    class="rounded-full"
+                                    variant="outline"
+                                    size="icon-sm"
+                                    :disabled="userDialog.isAvatarsLoading"
+                                    @click="refreshUserDialogAvatars()">
+                                    <Spinner v-if="userDialog.isAvatarsLoading" />
+                                    <RefreshCw v-else />
+                                </Button>
+                                <Button
+                                    v-else
+                                    class="rounded-full"
+                                    variant="outline"
+                                    size="icon-sm"
+                                    :disabled="userDialog.isAvatarsLoading"
+                                    @click="setUserDialogAvatarsRemote(userDialog.id)">
+                                    <Spinner v-if="userDialog.isAvatarsLoading" />
+                                    <RefreshCw v-else />
+                                </Button>
+                                <span style="margin-left: 5px">{{
+                                    t('dialog.user.avatars.total_count', { count: userDialogAvatars.length })
+                                }}</span>
+                            </div>
+                            <div class="flex items-center">
+                                <template v-if="userDialog.ref.id === currentUser.id">
+                                    <span class="mr-1">{{ t('dialog.user.avatars.sort_by') }}</span>
+                                    <Select
+                                        :model-value="userDialog.avatarSorting"
+                                        :disabled="userDialog.isWorldsLoading"
+                                        @update:modelValue="changeUserDialogAvatarSorting">
+                                        <SelectTrigger size="sm" @click.stop>
+                                            <SelectValue
+                                                :placeholder="
+                                                    t(`dialog.user.avatars.sort_by_${userDialog.avatarSorting}`)
+                                                " />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="name">{{
+                                                t('dialog.user.avatars.sort_by_name')
+                                            }}</SelectItem>
+                                            <SelectItem value="update">{{
+                                                t('dialog.user.avatars.sort_by_update')
+                                            }}</SelectItem>
+                                            <SelectItem value="createdAt">{{
+                                                t('dialog.user.avatars.sort_by_uploaded')
+                                            }}</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                    <span class="ml-2 mr-1">{{ t('dialog.user.avatars.group_by') }}</span>
+                                    <Select
+                                        :model-value="userDialog.avatarReleaseStatus"
+                                        :disabled="userDialog.isWorldsLoading"
+                                        @update:modelValue="(value) => (userDialog.avatarReleaseStatus = value)">
+                                        <SelectTrigger size="sm" @click.stop>
+                                            <SelectValue
+                                                :placeholder="
+                                                    t(`dialog.user.avatars.${userDialog.avatarReleaseStatus}`)
+                                                " />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="all">{{ t('dialog.user.avatars.all') }}</SelectItem>
+                                            <SelectItem value="public">{{
+                                                t('dialog.user.avatars.public')
+                                            }}</SelectItem>
+                                            <SelectItem value="private">{{
+                                                t('dialog.user.avatars.private')
+                                            }}</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </template>
+                            </div>
+                        </div>
+                        <div class="x-friend-list" style="margin-top: 10px; min-height: 60px; max-height: 50vh">
+                            <div
+                                v-for="avatar in userDialogAvatars"
+                                :key="avatar.id"
+                                class="x-friend-item x-friend-item-border"
+                                @click="showAvatarDialog(avatar.id)">
+                                <div class="avatar">
+                                    <img
+                                        v-if="avatar.thumbnailImageUrl"
+                                        :src="avatar.thumbnailImageUrl"
+                                        loading="lazy" />
+                                </div>
+                                <div class="detail">
+                                    <span class="name" v-text="avatar.name"></span>
+                                    <span
+                                        v-if="avatar.releaseStatus === 'public'"
+                                        class="extra"
+                                        style="color: var(--el-color-success)"
+                                        v-text="avatar.releaseStatus">
+                                    </span>
+                                    <span
+                                        v-else-if="avatar.releaseStatus === 'private'"
+                                        class="extra"
+                                        style="color: var(--el-color-danger)"
+                                        v-text="avatar.releaseStatus">
+                                    </span>
+                                    <span v-else class="extra" v-text="avatar.releaseStatus"></span>
                                 </div>
-                            </template>
-                        </TabsUnderline>
-                    </template>
-                    <template v-else-if="!userDialog.isFavoriteWorldsLoading">
-                        <div style="display: flex; justify-content: center; align-items: center; height: 100%">
-                            <span style="font-size: 16px">No favorite worlds found.</span>
-                        </div>
-                    </template>
-                </template>
-
-                <template #Avatars>
-                    <div style="display: flex; align-items: center; justify-content: space-between">
-                        <div style="display: flex; align-items: center">
-                            <Button
-                                v-if="userDialog.ref.id === currentUser.id"
-                                class="rounded-full"
-                                variant="outline"
-                                size="icon-sm"
-                                :disabled="userDialog.isAvatarsLoading"
-                                @click="refreshUserDialogAvatars()">
-                                <Spinner v-if="userDialog.isAvatarsLoading" />
-                                <RefreshCw v-else />
-                            </Button>
-                            <Button
-                                v-else
-                                class="rounded-full"
-                                variant="outline"
-                                size="icon-sm"
-                                :disabled="userDialog.isAvatarsLoading"
-                                @click="setUserDialogAvatarsRemote(userDialog.id)">
-                                <Spinner v-if="userDialog.isAvatarsLoading" />
-                                <RefreshCw v-else />
-                            </Button>
-                            <span style="margin-left: 5px">{{
-                                t('dialog.user.avatars.total_count', { count: userDialogAvatars.length })
-                            }}</span>
-                        </div>
-                        <div class="flex items-center">
-                            <template v-if="userDialog.ref.id === currentUser.id">
-                                <span class="mr-1">{{ t('dialog.user.avatars.sort_by') }}</span>
-                                <Select
-                                    :model-value="userDialog.avatarSorting"
-                                    :disabled="userDialog.isWorldsLoading"
-                                    @update:modelValue="changeUserDialogAvatarSorting">
-                                    <SelectTrigger size="sm" @click.stop>
-                                        <SelectValue
-                                            :placeholder="
-                                                t(`dialog.user.avatars.sort_by_${userDialog.avatarSorting}`)
-                                            " />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                        <SelectItem value="name">{{
-                                            t('dialog.user.avatars.sort_by_name')
-                                        }}</SelectItem>
-                                        <SelectItem value="update">{{
-                                            t('dialog.user.avatars.sort_by_update')
-                                        }}</SelectItem>
-                                        <SelectItem value="createdAt">{{
-                                            t('dialog.user.avatars.sort_by_uploaded')
-                                        }}</SelectItem>
-                                    </SelectContent>
-                                </Select>
-                                <span class="ml-2 mr-1">{{ t('dialog.user.avatars.group_by') }}</span>
-                                <Select
-                                    :model-value="userDialog.avatarReleaseStatus"
-                                    :disabled="userDialog.isWorldsLoading"
-                                    @update:modelValue="(value) => (userDialog.avatarReleaseStatus = value)">
-                                    <SelectTrigger size="sm" @click.stop>
-                                        <SelectValue
-                                            :placeholder="t(`dialog.user.avatars.${userDialog.avatarReleaseStatus}`)" />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                        <SelectItem value="all">{{ t('dialog.user.avatars.all') }}</SelectItem>
-                                        <SelectItem value="public">{{ t('dialog.user.avatars.public') }}</SelectItem>
-                                        <SelectItem value="private">{{ t('dialog.user.avatars.private') }}</SelectItem>
-                                    </SelectContent>
-                                </Select>
-                            </template>
-                        </div>
-                    </div>
-                    <div class="x-friend-list" style="margin-top: 10px; min-height: 60px; max-height: 50vh">
-                        <div
-                            v-for="avatar in userDialogAvatars"
-                            :key="avatar.id"
-                            class="x-friend-item x-friend-item-border"
-                            @click="showAvatarDialog(avatar.id)">
-                            <div class="avatar">
-                                <img v-if="avatar.thumbnailImageUrl" :src="avatar.thumbnailImageUrl" loading="lazy" />
-                            </div>
-                            <div class="detail">
-                                <span class="name" v-text="avatar.name"></span>
-                                <span
-                                    v-if="avatar.releaseStatus === 'public'"
-                                    class="extra"
-                                    style="color: var(--el-color-success)"
-                                    v-text="avatar.releaseStatus">
-                                </span>
-                                <span
-                                    v-else-if="avatar.releaseStatus === 'private'"
-                                    class="extra"
-                                    style="color: var(--el-color-danger)"
-                                    v-text="avatar.releaseStatus">
-                                </span>
-                                <span v-else class="extra" v-text="avatar.releaseStatus"></span>
                             </div>
                         </div>
-                    </div>
-                </template>
+                    </template>
 
-                <template #JSON>
-                    <Button
-                        class="rounded-full h-6 w-6 mr-2"
-                        size="icon-sm"
-                        variant="outline"
-                        @click="refreshUserDialogTreeData()">
-                        <RefreshCcw />
-                    </Button>
-                    <Button
-                        class="rounded-full h-6 w-6"
-                        size="icon-sm"
-                        variant="outline"
-                        @click="downloadAndSaveJson(userDialog.id, userDialog.ref)">
-                        <Download />
-                    </Button>
-                    <vue-json-pretty
-                        :data="userDialog.treeData"
-                        :deep="2"
-                        :theme="isDarkMode ? 'dark' : 'light'"
-                        show-icon />
-                </template>
-            </TabsUnderline>
-        </div>
-        <SendInviteDialog
-            v-model:sendInviteDialogVisible="sendInviteDialogVisible"
-            v-model:sendInviteDialog="sendInviteDialog"
-            @closeInviteDialog="closeInviteDialog" />
-        <SendInviteRequestDialog
-            v-model:sendInviteRequestDialogVisible="sendInviteRequestDialogVisible"
-            v-model:sendInviteDialog="sendInviteDialog"
-            @closeInviteDialog="closeInviteDialog" />
-        <PreviousInstancesUserDialog v-model:previous-instances-user-dialog="previousInstancesUserDialog" />
-        <SocialStatusDialog
-            :social-status-dialog="socialStatusDialog"
-            :social-status-history-table="socialStatusHistoryTable" />
-        <LanguageDialog />
-        <BioDialog :bio-dialog="bioDialog" />
-        <PronounsDialog :pronouns-dialog="pronounsDialog" />
-        <ModerateGroupDialog />
-        <EditNoteAndMemoDialog v-model:visible="isEditNoteAndMemoDialogVisible" />
-    </el-dialog>
+                    <template #JSON>
+                        <Button
+                            class="rounded-full h-6 w-6 mr-2"
+                            size="icon-sm"
+                            variant="outline"
+                            @click="refreshUserDialogTreeData()">
+                            <RefreshCcw />
+                        </Button>
+                        <Button
+                            class="rounded-full h-6 w-6"
+                            size="icon-sm"
+                            variant="outline"
+                            @click="downloadAndSaveJson(userDialog.id, userDialog.ref)">
+                            <Download />
+                        </Button>
+                        <vue-json-pretty
+                            :data="userDialog.treeData"
+                            :deep="2"
+                            :theme="isDarkMode ? 'dark' : 'light'"
+                            show-icon />
+                    </template>
+                </TabsUnderline>
+                <SendInviteDialog
+                    v-model:sendInviteDialogVisible="sendInviteDialogVisible"
+                    v-model:sendInviteDialog="sendInviteDialog"
+                    @closeInviteDialog="closeInviteDialog" />
+                <SendInviteRequestDialog
+                    v-model:sendInviteRequestDialogVisible="sendInviteRequestDialogVisible"
+                    v-model:sendInviteDialog="sendInviteDialog"
+                    @closeInviteDialog="closeInviteDialog" />
+                <PreviousInstancesUserDialog v-model:previous-instances-user-dialog="previousInstancesUserDialog" />
+                <SocialStatusDialog
+                    :social-status-dialog="socialStatusDialog"
+                    :social-status-history-table="socialStatusHistoryTable" />
+                <LanguageDialog />
+                <BioDialog :bio-dialog="bioDialog" />
+                <PronounsDialog :pronouns-dialog="pronounsDialog" />
+                <ModerateGroupDialog />
+                <EditNoteAndMemoDialog v-model:visible="isEditNoteAndMemoDialogVisible" />
+            </div>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
@@ -1316,6 +1377,7 @@
         Tag,
         Trash2
     } from 'lucide-vue-next';
+    import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
     import { computed, defineAsyncComponent, nextTick, ref, watch } from 'vue';
     import {
@@ -1386,7 +1448,6 @@
     import { userDialogGroupSortingOptions, userDialogMutualFriendSortingOptions } from '../../../shared/constants';
     import { userDialogWorldOrderOptions, userDialogWorldSortingOptions } from '../../../shared/constants/';
     import { database } from '../../../service/database';
-    import { getNextDialogIndex } from '../../../shared/utils/base/ui';
 
     import SendInviteDialog from '../InviteDialog/SendInviteDialog.vue';
     import UserSummaryHeader from './UserSummaryHeader.vue';
@@ -1470,9 +1531,6 @@
         () => userDialog.value.loading,
         () => {
             if (userDialog.value.visible) {
-                nextTick(() => {
-                    userDialogIndex.value = getNextDialogIndex();
-                });
                 !userDialog.value.loading && loadLastActiveTab();
                 if (userDialog.value.id !== bioCache.value.userId) {
                     bioCache.value = {
@@ -1484,8 +1542,6 @@
         }
     );
 
-    const userDialogIndex = ref(2000);
-
     const userDialogGroupEditMode = ref(false); // whether edit mode is active
     const userDialogGroupEditGroups = ref([]); // editable group list
     const userDialogGroupAllSelected = ref(false);
diff --git a/src/components/dialogs/VRCXUpdateDialog.vue b/src/components/dialogs/VRCXUpdateDialog.vue
index 61bdf321..3195405b 100644
--- a/src/components/dialogs/VRCXUpdateDialog.vue
+++ b/src/components/dialogs/VRCXUpdateDialog.vue
@@ -1,12 +1,10 @@
 <template>
-    <el-dialog
-        :z-index="VRCXUpdateDialogIndex"
-        class="x-dialog"
-        v-model="VRCXUpdateDialog.visible"
-        :title="t('dialog.vrcx_updater.header')"
-        append-to-body
-        width="400px">
-        <div v-loading="checkingForVRCXUpdate" style="margin-top: 15px">
+    <Dialog v-model:open="VRCXUpdateDialog.visible">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.vrcx_updater.header') }}</DialogTitle>
+            </DialogHeader>
+            <div v-loading="checkingForVRCXUpdate" style="margin-top: 15px">
             <template v-if="updateInProgress">
                 <Progress :model-value="updateProgress" class="w-full" />
                 <div class="mt-2 text-xs" v-text="updateProgressText()"></div>
@@ -61,9 +59,9 @@
                     <span>{{ t('dialog.vrcx_updater.latest_version') }}</span>
                 </div>
             </template>
-        </div>
+            </div>
 
-        <template #footer>
+            <DialogFooter>
             <Button variant="secondary" class="mr-2" v-if="updateInProgress" @click="cancelUpdate">
                 {{ t('dialog.vrcx_updater.cancel') }}
             </Button>
@@ -77,15 +75,16 @@
             <Button variant="default" v-if="!updateInProgress && pendingVRCXInstall" @click="restartVRCX(true)">
                 {{ t('dialog.vrcx_updater.install') }}
             </Button>
-        </template>
-    </el-dialog>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
     import { Field, FieldContent, FieldGroup, FieldLabel } from '@/components/ui/field';
     import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
     import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
-    import { nextTick, ref, watch } from 'vue';
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { AlertCircle } from 'lucide-vue-next';
     import { Button } from '@/components/ui/button';
     import { Progress } from '@/components/ui/progress';
@@ -93,7 +92,6 @@
     import { useI18n } from 'vue-i18n';
 
     import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
-    import { getNextDialogIndex } from '../../shared/utils/base/ui';
     import { useVRCXUpdaterStore } from '../../stores';
 
     const VRCXUpdaterStore = useVRCXUpdaterStore();
@@ -111,7 +109,6 @@
 
     const { t } = useI18n();
 
-    const VRCXUpdateDialogIndex = ref(2000);
     const handleBranchChange = (value) => {
         if (!value || value === branch.value) {
             return;
@@ -119,15 +116,4 @@
         branch.value = value;
         loadBranchVersions();
     };
-
-    watch(
-        () => VRCXUpdateDialog,
-        (newVal) => {
-            if (newVal.value.visible) {
-                nextTick(() => {
-                    VRCXUpdateDialogIndex.value = getNextDialogIndex();
-                });
-            }
-        }
-    );
 </script>
diff --git a/src/components/dialogs/WorldDialog/ChangeWorldImageDialog.vue b/src/components/dialogs/WorldDialog/ChangeWorldImageDialog.vue
index fb982c52..d7ac5985 100644
--- a/src/components/dialogs/WorldDialog/ChangeWorldImageDialog.vue
+++ b/src/components/dialogs/WorldDialog/ChangeWorldImageDialog.vue
@@ -1,33 +1,40 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        :model-value="changeWorldImageDialogVisible"
-        :title="t('dialog.change_content_image.world')"
-        width="850px"
-        append-to-body
-        @close="closeDialog">
-        <div>
-            <input
-                id="WorldImageUploadButton"
-                type="file"
-                accept="image/*"
-                style="display: none"
-                @change="onFileChangeWorldImage" />
-            <span>{{ t('dialog.change_content_image.description') }}</span>
-            <br />
-            <Button variant="outline" size="sm" :disabled="changeWorldImageDialogLoading" @click="uploadWorldImage">
-                <Upload />
-                {{ t('dialog.change_content_image.upload') }}
-            </Button>
-            <br />
-            <div class="x-change-image-item">
-                <img :src="previousImageUrl" class="img-size" loading="lazy" />
+    <Dialog
+        :open="changeWorldImageDialogVisible"
+        @update:open="
+            (open) => {
+                if (!open) closeDialog();
+            }
+        ">
+        <DialogContent class="x-dialog sm:max-w-212.5">
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.change_content_image.world') }}</DialogTitle>
+            </DialogHeader>
+
+            <div>
+                <input
+                    id="WorldImageUploadButton"
+                    type="file"
+                    accept="image/*"
+                    style="display: none"
+                    @change="onFileChangeWorldImage" />
+                <span>{{ t('dialog.change_content_image.description') }}</span>
+                <br />
+                <Button variant="outline" size="sm" :disabled="changeWorldImageDialogLoading" @click="uploadWorldImage">
+                    <Upload />
+                    {{ t('dialog.change_content_image.upload') }}
+                </Button>
+                <br />
+                <div class="x-change-image-item">
+                    <img :src="previousImageUrl" class="img-size" loading="lazy" />
+                </div>
             </div>
-        </div>
-    </el-dialog>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { Button } from '@/components/ui/button';
     import { Upload } from 'lucide-vue-next';
     import { ref } from 'vue';
diff --git a/src/components/dialogs/WorldDialog/SetWorldTagsDialog.vue b/src/components/dialogs/WorldDialog/SetWorldTagsDialog.vue
index a70cd975..88f4637a 100644
--- a/src/components/dialogs/WorldDialog/SetWorldTagsDialog.vue
+++ b/src/components/dialogs/WorldDialog/SetWorldTagsDialog.vue
@@ -1,107 +1,110 @@
 <template>
-    <el-dialog
-        v-model="isVisible"
-        :title="t('dialog.set_world_tags.header')"
-        width="400px"
-        destroy-on-close
-        append-to-body>
-        <label class="inline-flex items-center gap-2">
-            <Checkbox v-model="setWorldTagsDialog.avatarScalingDisabled" />
-            <span>{{ t('dialog.set_world_tags.avatar_scaling_disabled') }}</span>
-        </label>
-        <br />
-        <label class="inline-flex items-center gap-2">
-            <Checkbox v-model="setWorldTagsDialog.focusViewDisabled" />
-            <span>{{ t('dialog.set_world_tags.focus_view_disabled') }}</span>
-        </label>
-        <br />
-        <label class="inline-flex items-center gap-2">
-            <Checkbox v-model="setWorldTagsDialog.debugAllowed" />
-            <span>{{ t('dialog.set_world_tags.enable_debugging') }}</span>
-        </label>
-        <div style="font-size: 12px; margin-top: 10px">{{ t('dialog.set_world_tags.author_tags') }}<br /></div>
-        <InputGroupTextareaField
-            v-model="setWorldTagsDialog.authorTags"
-            :rows="2"
-            placeholder=""
-            style="margin-top: 10px"
-            input-class="resize-none" />
-        <div style="font-size: 12px; margin-top: 10px">{{ t('dialog.set_world_tags.content_tags') }}<br /></div>
-        <label class="inline-flex items-center gap-2">
-            <Checkbox v-model="setWorldTagsDialog.contentHorror" />
-            <span>{{ t('dialog.set_world_tags.content_horror') }}</span>
-        </label>
-        <br />
-        <label class="inline-flex items-center gap-2">
-            <Checkbox v-model="setWorldTagsDialog.contentGore" />
-            <span>{{ t('dialog.set_world_tags.content_gore') }}</span>
-        </label>
-        <br />
-        <label class="inline-flex items-center gap-2">
-            <Checkbox v-model="setWorldTagsDialog.contentViolence" />
-            <span>{{ t('dialog.set_world_tags.content_violence') }}</span>
-        </label>
-        <br />
-        <label class="inline-flex items-center gap-2">
-            <Checkbox v-model="setWorldTagsDialog.contentAdult" />
-            <span>{{ t('dialog.set_world_tags.content_adult') }}</span>
-        </label>
-        <br />
-        <label class="inline-flex items-center gap-2">
-            <Checkbox v-model="setWorldTagsDialog.contentSex" />
-            <span>{{ t('dialog.set_world_tags.content_sex') }}</span>
-        </label>
-        <div style="font-size: 12px; margin-top: 10px">
-            {{ t('dialog.set_world_tags.default_content_settings') }}<br />
-        </div>
-        <label class="inline-flex items-center gap-2">
-            <Checkbox v-model="setWorldTagsDialog.emoji" />
-            <span>{{ t('dialog.new_instance.content_emoji') }}</span>
-        </label>
-        <br />
-        <label class="inline-flex items-center gap-2">
-            <Checkbox v-model="setWorldTagsDialog.stickers" />
-            <span>{{ t('dialog.new_instance.content_stickers') }}</span>
-        </label>
-        <br />
-        <label class="inline-flex items-center gap-2">
-            <Checkbox v-model="setWorldTagsDialog.pedestals" />
-            <span>{{ t('dialog.new_instance.content_pedestals') }}</span>
-        </label>
-        <br />
-        <label class="inline-flex items-center gap-2">
-            <Checkbox v-model="setWorldTagsDialog.prints" />
-            <span>{{ t('dialog.new_instance.content_prints') }}</span>
-        </label>
-        <br />
-        <label class="inline-flex items-center gap-2">
-            <Checkbox v-model="setWorldTagsDialog.drones" />
-            <span>{{ t('dialog.new_instance.content_drones') }}</span>
-        </label>
-        <br />
-        <label class="inline-flex items-center gap-2">
-            <Checkbox v-model="setWorldTagsDialog.props" />
-            <span>{{ t('dialog.new_instance.content_items') }}</span>
-        </label>
-        <br />
-        <label class="inline-flex items-center gap-2">
-            <Checkbox v-model="setWorldTagsDialog.thirdPerson" />
-            <span>{{ t('dialog.new_instance.content_third_person') }}</span>
-        </label>
-        <template #footer>
-            <div class="flex gap-2">
-                <Button variant="secondary" @click="isVisible = false">
-                    {{ t('dialog.set_world_tags.cancel') }}
-                </Button>
-                <Button @click="saveSetWorldTagsDialog">
-                    {{ t('dialog.set_world_tags.save') }}
-                </Button>
+    <Dialog v-model:open="isVisible">
+        <DialogContent class="sm:max-w-100">
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.set_world_tags.header') }}</DialogTitle>
+            </DialogHeader>
+
+            <label class="inline-flex items-center gap-2">
+                <Checkbox v-model="setWorldTagsDialog.avatarScalingDisabled" />
+                <span>{{ t('dialog.set_world_tags.avatar_scaling_disabled') }}</span>
+            </label>
+            <br />
+            <label class="inline-flex items-center gap-2">
+                <Checkbox v-model="setWorldTagsDialog.focusViewDisabled" />
+                <span>{{ t('dialog.set_world_tags.focus_view_disabled') }}</span>
+            </label>
+            <br />
+            <label class="inline-flex items-center gap-2">
+                <Checkbox v-model="setWorldTagsDialog.debugAllowed" />
+                <span>{{ t('dialog.set_world_tags.enable_debugging') }}</span>
+            </label>
+            <div style="font-size: 12px; margin-top: 10px">{{ t('dialog.set_world_tags.author_tags') }}<br /></div>
+            <InputGroupTextareaField
+                v-model="setWorldTagsDialog.authorTags"
+                :rows="2"
+                placeholder=""
+                style="margin-top: 10px"
+                input-class="resize-none" />
+            <div style="font-size: 12px; margin-top: 10px">{{ t('dialog.set_world_tags.content_tags') }}<br /></div>
+            <label class="inline-flex items-center gap-2">
+                <Checkbox v-model="setWorldTagsDialog.contentHorror" />
+                <span>{{ t('dialog.set_world_tags.content_horror') }}</span>
+            </label>
+            <br />
+            <label class="inline-flex items-center gap-2">
+                <Checkbox v-model="setWorldTagsDialog.contentGore" />
+                <span>{{ t('dialog.set_world_tags.content_gore') }}</span>
+            </label>
+            <br />
+            <label class="inline-flex items-center gap-2">
+                <Checkbox v-model="setWorldTagsDialog.contentViolence" />
+                <span>{{ t('dialog.set_world_tags.content_violence') }}</span>
+            </label>
+            <br />
+            <label class="inline-flex items-center gap-2">
+                <Checkbox v-model="setWorldTagsDialog.contentAdult" />
+                <span>{{ t('dialog.set_world_tags.content_adult') }}</span>
+            </label>
+            <br />
+            <label class="inline-flex items-center gap-2">
+                <Checkbox v-model="setWorldTagsDialog.contentSex" />
+                <span>{{ t('dialog.set_world_tags.content_sex') }}</span>
+            </label>
+            <div style="font-size: 12px; margin-top: 10px">
+                {{ t('dialog.set_world_tags.default_content_settings') }}<br />
             </div>
-        </template>
-    </el-dialog>
+            <label class="inline-flex items-center gap-2">
+                <Checkbox v-model="setWorldTagsDialog.emoji" />
+                <span>{{ t('dialog.new_instance.content_emoji') }}</span>
+            </label>
+            <br />
+            <label class="inline-flex items-center gap-2">
+                <Checkbox v-model="setWorldTagsDialog.stickers" />
+                <span>{{ t('dialog.new_instance.content_stickers') }}</span>
+            </label>
+            <br />
+            <label class="inline-flex items-center gap-2">
+                <Checkbox v-model="setWorldTagsDialog.pedestals" />
+                <span>{{ t('dialog.new_instance.content_pedestals') }}</span>
+            </label>
+            <br />
+            <label class="inline-flex items-center gap-2">
+                <Checkbox v-model="setWorldTagsDialog.prints" />
+                <span>{{ t('dialog.new_instance.content_prints') }}</span>
+            </label>
+            <br />
+            <label class="inline-flex items-center gap-2">
+                <Checkbox v-model="setWorldTagsDialog.drones" />
+                <span>{{ t('dialog.new_instance.content_drones') }}</span>
+            </label>
+            <br />
+            <label class="inline-flex items-center gap-2">
+                <Checkbox v-model="setWorldTagsDialog.props" />
+                <span>{{ t('dialog.new_instance.content_items') }}</span>
+            </label>
+            <br />
+            <label class="inline-flex items-center gap-2">
+                <Checkbox v-model="setWorldTagsDialog.thirdPerson" />
+                <span>{{ t('dialog.new_instance.content_third_person') }}</span>
+            </label>
+
+            <DialogFooter>
+                <div class="flex gap-2">
+                    <Button variant="secondary" @click="isVisible = false">
+                        {{ t('dialog.set_world_tags.cancel') }}
+                    </Button>
+                    <Button @click="saveSetWorldTagsDialog">
+                        {{ t('dialog.set_world_tags.save') }}
+                    </Button>
+                </div>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { computed, ref, watch } from 'vue';
     import { Button } from '@/components/ui/button';
     import { Checkbox } from '@/components/ui/checkbox';
diff --git a/src/components/dialogs/WorldDialog/WorldAllowedDomainsDialog.vue b/src/components/dialogs/WorldDialog/WorldAllowedDomainsDialog.vue
index 6469ccff..d27b0261 100644
--- a/src/components/dialogs/WorldDialog/WorldAllowedDomainsDialog.vue
+++ b/src/components/dialogs/WorldDialog/WorldAllowedDomainsDialog.vue
@@ -1,34 +1,37 @@
 <template>
-    <el-dialog
-        v-model="isVisible"
-        :title="t('dialog.allowed_video_player_domains.header')"
-        width="600px"
-        destroy-on-close
-        append-to-body>
-        <div>
-            <InputGroupAction
-                v-for="(domain, index) in urlList"
-                :key="index"
-                v-model="urlList[index]"
-                size="sm"
-                style="margin-top: 5px">
-                <template #actions>
-                    <Button variant="ghost" @click="urlList.splice(index, 1)"><Trash2 /></Button>
-                </template>
-            </InputGroupAction>
-            <Button size="sm" variant="outline" style="margin-top: 5px" @click="urlList.push('')">
-                {{ t('dialog.allowed_video_player_domains.add_domain') }}
-            </Button>
-        </div>
-        <template #footer>
-            <Button :disabled="!worldAllowedDomainsDialog.worldId" @click="saveWorldAllowedDomains">
-                {{ t('dialog.allowed_video_player_domains.save') }}
-            </Button>
-        </template>
-    </el-dialog>
+    <Dialog v-model:open="isVisible">
+        <DialogContent class="sm:max-w-150">
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.allowed_video_player_domains.header') }}</DialogTitle>
+            </DialogHeader>
+
+            <div>
+                <InputGroupAction
+                    v-for="(domain, index) in urlList"
+                    :key="index"
+                    v-model="urlList[index]"
+                    size="sm"
+                    style="margin-top: 5px">
+                    <template #actions>
+                        <Button variant="ghost" @click="urlList.splice(index, 1)"><Trash2 /></Button>
+                    </template>
+                </InputGroupAction>
+                <Button size="sm" variant="outline" style="margin-top: 5px" @click="urlList.push('')">
+                    {{ t('dialog.allowed_video_player_domains.add_domain') }}
+                </Button>
+            </div>
+
+            <DialogFooter>
+                <Button :disabled="!worldAllowedDomainsDialog.worldId" @click="saveWorldAllowedDomains">
+                    {{ t('dialog.allowed_video_player_domains.save') }}
+                </Button>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { computed, ref, watch } from 'vue';
     import { Button } from '@/components/ui/button';
     import { InputGroupAction } from '@/components/ui/input-group';
diff --git a/src/components/dialogs/WorldDialog/WorldDialog.vue b/src/components/dialogs/WorldDialog/WorldDialog.vue
index 7d12dd05..f8e4431d 100644
--- a/src/components/dialogs/WorldDialog/WorldDialog.vue
+++ b/src/components/dialogs/WorldDialog/WorldDialog.vue
@@ -1,701 +1,707 @@
 <template>
-    <el-dialog
-        :z-index="worldDialogIndex"
-        class="x-dialog x-world-dialog"
-        v-model="isDialogVisible"
-        top="10vh"
-        :show-close="false"
-        width="940px">
-        <div v-loading="worldDialog.loading">
-            <div style="display: flex">
-                <img
-                    :src="worldDialog.ref.thumbnailImageUrl"
-                    class="x-link"
-                    style="flex: none; width: 160px; height: 120px; border-radius: 12px"
-                    @click="showFullscreenImageDialog(worldDialog.ref.imageUrl)"
-                    loading="lazy" />
-                <div style="flex: 1; display: flex; align-items: center; margin-left: 15px">
-                    <div style="flex: 1">
-                        <div>
-                            <span
-                                class="dialog-title"
-                                style="margin-right: 5px; cursor: pointer"
-                                @click="copyWorldName">
-                                <Home
-                                    v-if="
-                                        currentUser.$homeLocation &&
-                                        currentUser.$homeLocation.worldId === worldDialog.id
-                                    "
-                                    style="margin-right: 5px" />
-                                {{ worldDialog.ref.name }}
-                            </span>
-                        </div>
-                        <div style="margin-top: 5px">
-                            <span
-                                class="x-link x-grey"
-                                style="font-family: monospace"
-                                @click="showUserDialog(worldDialog.ref.authorId)"
-                                v-text="worldDialog.ref.authorName" />
-                        </div>
-                        <div>
-                            <Badge
-                                v-if="worldDialog.ref.$isLabs"
-                                variant="outline"
-                                style="margin-right: 5px; margin-top: 5px">
-                                {{ t('dialog.world.tags.labs') }}
-                            </Badge>
-                            <Badge
-                                v-else-if="worldDialog.ref.releaseStatus === 'public'"
-                                variant="outline"
-                                style="margin-right: 5px; margin-top: 5px">
-                                {{ t('dialog.world.tags.public') }}
-                            </Badge>
-                            <Badge v-else variant="outline" style="margin-right: 5px; margin-top: 5px">
-                                {{ t('dialog.world.tags.private') }}
-                            </Badge>
-                            <TooltipWrapper v-if="worldDialog.isPC" side="top" content="PC">
+    <Dialog v-model:open="isDialogVisible">
+        <DialogContent
+            class="x-dialog x-world-dialog translate-y-0 sm:max-w-235"
+            :show-close-button="false"
+            style="top: 10vh">
+            <div v-loading="worldDialog.loading">
+                <div style="display: flex">
+                    <img
+                        :src="worldDialog.ref.thumbnailImageUrl"
+                        class="x-link"
+                        style="flex: none; width: 160px; height: 120px; border-radius: 12px"
+                        @click="showFullscreenImageDialog(worldDialog.ref.imageUrl)"
+                        loading="lazy" />
+                    <div style="flex: 1; display: flex; align-items: center; margin-left: 15px">
+                        <div style="flex: 1">
+                            <div>
+                                <span
+                                    class="dialog-title"
+                                    style="margin-right: 5px; cursor: pointer"
+                                    @click="copyWorldName">
+                                    <Home
+                                        v-if="
+                                            currentUser.$homeLocation &&
+                                            currentUser.$homeLocation.worldId === worldDialog.id
+                                        "
+                                        style="margin-right: 5px" />
+                                    {{ worldDialog.ref.name }}
+                                </span>
+                            </div>
+                            <div style="margin-top: 5px">
+                                <span
+                                    class="x-link x-grey"
+                                    style="font-family: monospace"
+                                    @click="showUserDialog(worldDialog.ref.authorId)"
+                                    v-text="worldDialog.ref.authorName" />
+                            </div>
+                            <div>
                                 <Badge
-                                    class="x-tag-platform-pc"
+                                    v-if="worldDialog.ref.$isLabs"
                                     variant="outline"
                                     style="margin-right: 5px; margin-top: 5px">
-                                    <Monitor class="h-4 w-4 x-tag-platform-pc" />
-                                    ><span
-                                        v-if="worldDialog.bundleSizes['standalonewindows']"
-                                        :class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']">
-                                        {{ worldDialog.bundleSizes['standalonewindows'].fileSize }}
-                                    </span>
+                                    {{ t('dialog.world.tags.labs') }}
                                 </Badge>
-                            </TooltipWrapper>
+                                <Badge
+                                    v-else-if="worldDialog.ref.releaseStatus === 'public'"
+                                    variant="outline"
+                                    style="margin-right: 5px; margin-top: 5px">
+                                    {{ t('dialog.world.tags.public') }}
+                                </Badge>
+                                <Badge v-else variant="outline" style="margin-right: 5px; margin-top: 5px">
+                                    {{ t('dialog.world.tags.private') }}
+                                </Badge>
+                                <TooltipWrapper v-if="worldDialog.isPC" side="top" content="PC">
+                                    <Badge
+                                        class="x-tag-platform-pc"
+                                        variant="outline"
+                                        style="margin-right: 5px; margin-top: 5px">
+                                        <Monitor class="h-4 w-4 x-tag-platform-pc" />
+                                        ><span
+                                            v-if="worldDialog.bundleSizes['standalonewindows']"
+                                            :class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']">
+                                            {{ worldDialog.bundleSizes['standalonewindows'].fileSize }}
+                                        </span>
+                                    </Badge>
+                                </TooltipWrapper>
 
-                            <TooltipWrapper v-if="worldDialog.isQuest" side="top" content="Quest">
-                                <Badge
-                                    class="x-tag-platform-quest"
-                                    variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px">
-                                    <Smartphone class="h-4 w-4 x-tag-platform-quest" />
-                                    ><span
-                                        v-if="worldDialog.bundleSizes['android']"
-                                        :class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']">
-                                        {{ worldDialog.bundleSizes['android'].fileSize }}
-                                    </span>
-                                </Badge>
-                            </TooltipWrapper>
+                                <TooltipWrapper v-if="worldDialog.isQuest" side="top" content="Quest">
+                                    <Badge
+                                        class="x-tag-platform-quest"
+                                        variant="outline"
+                                        style="margin-right: 5px; margin-top: 5px">
+                                        <Smartphone class="h-4 w-4 x-tag-platform-quest" />
+                                        ><span
+                                            v-if="worldDialog.bundleSizes['android']"
+                                            :class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']">
+                                            {{ worldDialog.bundleSizes['android'].fileSize }}
+                                        </span>
+                                    </Badge>
+                                </TooltipWrapper>
 
-                            <TooltipWrapper v-if="worldDialog.isIos" side="top" content="iOS">
-                                <Badge
-                                    class="x-tag-platform-ios"
-                                    variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px">
-                                    <Apple class="h-4 w-4 x-tag-platform-ios" />
-                                    ><span
-                                        v-if="worldDialog.bundleSizes['ios']"
-                                        :class="['x-grey', 'x-tag-platform-ios', 'x-tag-border-left']">
-                                        {{ worldDialog.bundleSizes['ios'].fileSize }}
-                                    </span>
-                                </Badge>
-                            </TooltipWrapper>
+                                <TooltipWrapper v-if="worldDialog.isIos" side="top" content="iOS">
+                                    <Badge
+                                        class="x-tag-platform-ios"
+                                        variant="outline"
+                                        style="margin-right: 5px; margin-top: 5px">
+                                        <Apple class="h-4 w-4 x-tag-platform-ios" />
+                                        ><span
+                                            v-if="worldDialog.bundleSizes['ios']"
+                                            :class="['x-grey', 'x-tag-platform-ios', 'x-tag-border-left']">
+                                            {{ worldDialog.bundleSizes['ios'].fileSize }}
+                                        </span>
+                                    </Badge>
+                                </TooltipWrapper>
 
-                            <Badge
-                                v-if="worldDialog.avatarScalingDisabled"
-                                variant="outline"
-                                style="margin-right: 5px; margin-top: 5px">
-                                {{ t('dialog.world.tags.avatar_scaling_disabled') }}
-                            </Badge>
-                            <Badge
-                                v-if="worldDialog.focusViewDisabled"
-                                variant="outline"
-                                style="margin-right: 5px; margin-top: 5px">
-                                {{ t('dialog.world.tags.focus_view_disabled') }}
-                            </Badge>
-                            <Badge
-                                v-if="worldDialog.ref.unityPackageUrl"
-                                variant="outline"
-                                style="margin-right: 5px; margin-top: 5px">
-                                {{ t('dialog.world.tags.future_proofing') }}
-                            </Badge>
-                            <Badge
-                                v-if="worldDialog.inCache"
-                                variant="outline"
-                                class="x-link"
-                                style="margin-right: 5px; margin-top: 5px"
-                                @click="openFolderGeneric(worldDialog.cachePath)">
-                                <span v-text="worldDialog.cacheSize" />
-                                | {{ t('dialog.world.tags.cache') }}
-                            </Badge>
-                        </div>
-                        <div>
-                            <template v-for="tag in worldDialog.ref.tags" :key="tag">
                                 <Badge
-                                    v-if="tag.startsWith('content_')"
+                                    v-if="worldDialog.avatarScalingDisabled"
                                     variant="outline"
                                     style="margin-right: 5px; margin-top: 5px">
-                                    <span v-if="tag === 'content_horror'">
-                                        {{ t('dialog.world.tags.content_horror') }}
-                                    </span>
-                                    <span v-else-if="tag === 'content_gore'">
-                                        {{ t('dialog.world.tags.content_gore') }}
-                                    </span>
-                                    <span v-else-if="tag === 'content_violence'">
-                                        {{ t('dialog.world.tags.content_violence') }}
-                                    </span>
-                                    <span v-else-if="tag === 'content_adult'">
-                                        {{ t('dialog.world.tags.content_adult') }}
-                                    </span>
-                                    <span v-else-if="tag === 'content_sex'">
-                                        {{ t('dialog.world.tags.content_sex') }}
-                                    </span>
-                                    <span v-else>
-                                        {{ tag.replace('content_', '') }}
-                                    </span>
+                                    {{ t('dialog.world.tags.avatar_scaling_disabled') }}
                                 </Badge>
-                            </template>
-                        </div>
-                        <div style="margin-top: 5px">
-                            <span
-                                v-show="worldDialog.ref.name !== worldDialog.ref.description"
-                                style="font-size: 12px"
-                                >{{ worldDialog.ref.description }}</span
-                            >
-                        </div>
-                    </div>
-                    <div style="flex: none; margin-left: 10px">
-                        <TooltipWrapper
-                            v-if="worldDialog.inCache"
-                            side="top"
-                            :content="t('dialog.world.actions.delete_cache_tooltip')">
-                            <Button
-                                class="rounded-full mr-2"
-                                size="icon-lg"
-                                variant="outline"
-                                :disabled="isGameRunning && worldDialog.cacheLocked"
-                                @click="deleteVRChatCache(worldDialog.ref)"
-                                ><Trash2
-                            /></Button>
-                        </TooltipWrapper>
-                        <TooltipWrapper
-                            v-if="worldDialog.isFavorite"
-                            side="top"
-                            :content="t('dialog.world.actions.favorites_tooltip')">
-                            <Button class="rounded-full" size="icon-lg" @click="worldDialogCommand('Add Favorite')"
-                                ><Star
-                            /></Button>
-                        </TooltipWrapper>
-                        <TooltipWrapper v-else side="top" :content="t('dialog.world.actions.favorites_tooltip')">
-                            <Button
-                                class="rounded-full"
-                                size="icon-lg"
-                                variant="outline"
-                                @click="worldDialogCommand('Add Favorite')"
-                                ><Star
-                            /></Button>
-                        </TooltipWrapper>
-                        <DropdownMenu>
-                            <DropdownMenuTrigger as-child>
-                                <Button variant="outline" size="icon-lg" class="rounded-full ml-2">
-                                    <Ellipsis />
-                                </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent>
-                                <DropdownMenuItem @click="worldDialogCommand('RefreshCw')">
-                                    <RefreshCw class="size-4" />
-                                    {{ t('dialog.world.actions.refresh') }}
-                                </DropdownMenuItem>
-                                <DropdownMenuItem @click="worldDialogCommand('Share2')">
-                                    <Share2 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')">
-                                    <MessageSquare 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')">
-                                    <Wand2 class="size-4" />
-                                    {{ t('dialog.world.actions.reset_home') }}
-                                </DropdownMenuItem>
-                                <DropdownMenuItem v-else @click="worldDialogCommand('Make Home')">
-                                    <Home class="size-4" />
-                                    {{ t('dialog.world.actions.make_home') }}
-                                </DropdownMenuItem>
-                                <DropdownMenuItem @click="worldDialogCommand('Previous Instances')">
-                                    <LineChart 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('Trash2 Persistent Data')">
-                                        <Upload class="size-4" />
-                                        {{ t('dialog.world.actions.delete_persistent_data') }}
-                                    </DropdownMenuItem>
+                                <Badge
+                                    v-if="worldDialog.focusViewDisabled"
+                                    variant="outline"
+                                    style="margin-right: 5px; margin-top: 5px">
+                                    {{ t('dialog.world.tags.focus_view_disabled') }}
+                                </Badge>
+                                <Badge
+                                    v-if="worldDialog.ref.unityPackageUrl"
+                                    variant="outline"
+                                    style="margin-right: 5px; margin-top: 5px">
+                                    {{ t('dialog.world.tags.future_proofing') }}
+                                </Badge>
+                                <Badge
+                                    v-if="worldDialog.inCache"
+                                    variant="outline"
+                                    class="x-link"
+                                    style="margin-right: 5px; margin-top: 5px"
+                                    @click="openFolderGeneric(worldDialog.cachePath)">
+                                    <span v-text="worldDialog.cacheSize" />
+                                    | {{ t('dialog.world.tags.cache') }}
+                                </Badge>
+                            </div>
+                            <div>
+                                <template v-for="tag in worldDialog.ref.tags" :key="tag">
+                                    <Badge
+                                        v-if="tag.startsWith('content_')"
+                                        variant="outline"
+                                        style="margin-right: 5px; margin-top: 5px">
+                                        <span v-if="tag === 'content_horror'">
+                                            {{ t('dialog.world.tags.content_horror') }}
+                                        </span>
+                                        <span v-else-if="tag === 'content_gore'">
+                                            {{ t('dialog.world.tags.content_gore') }}
+                                        </span>
+                                        <span v-else-if="tag === 'content_violence'">
+                                            {{ t('dialog.world.tags.content_violence') }}
+                                        </span>
+                                        <span v-else-if="tag === 'content_adult'">
+                                            {{ t('dialog.world.tags.content_adult') }}
+                                        </span>
+                                        <span v-else-if="tag === 'content_sex'">
+                                            {{ t('dialog.world.tags.content_sex') }}
+                                        </span>
+                                        <span v-else>
+                                            {{ tag.replace('content_', '') }}
+                                        </span>
+                                    </Badge>
                                 </template>
-                                <template v-else>
-                                    <DropdownMenuItem @click="worldDialogCommand('Rename')">
-                                        <Pencil class="size-4" />
-                                        {{ t('dialog.world.actions.rename') }}
+                            </div>
+                            <div style="margin-top: 5px">
+                                <span
+                                    v-show="worldDialog.ref.name !== worldDialog.ref.description"
+                                    style="font-size: 12px"
+                                    >{{ worldDialog.ref.description }}</span
+                                >
+                            </div>
+                        </div>
+                        <div style="flex: none; margin-left: 10px">
+                            <TooltipWrapper
+                                v-if="worldDialog.inCache"
+                                side="top"
+                                :content="t('dialog.world.actions.delete_cache_tooltip')">
+                                <Button
+                                    class="rounded-full mr-2"
+                                    size="icon-lg"
+                                    variant="outline"
+                                    :disabled="isGameRunning && worldDialog.cacheLocked"
+                                    @click="deleteVRChatCache(worldDialog.ref)"
+                                    ><Trash2
+                                /></Button>
+                            </TooltipWrapper>
+                            <TooltipWrapper
+                                v-if="worldDialog.isFavorite"
+                                side="top"
+                                :content="t('dialog.world.actions.favorites_tooltip')">
+                                <Button class="rounded-full" size="icon-lg" @click="worldDialogCommand('Add Favorite')"
+                                    ><Star
+                                /></Button>
+                            </TooltipWrapper>
+                            <TooltipWrapper v-else side="top" :content="t('dialog.world.actions.favorites_tooltip')">
+                                <Button
+                                    class="rounded-full"
+                                    size="icon-lg"
+                                    variant="outline"
+                                    @click="worldDialogCommand('Add Favorite')"
+                                    ><Star
+                                /></Button>
+                            </TooltipWrapper>
+                            <DropdownMenu>
+                                <DropdownMenuTrigger as-child>
+                                    <Button variant="outline" size="icon-lg" class="rounded-full ml-2">
+                                        <Ellipsis />
+                                    </Button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent>
+                                    <DropdownMenuItem @click="worldDialogCommand('RefreshCw')">
+                                        <RefreshCw class="size-4" />
+                                        {{ t('dialog.world.actions.refresh') }}
                                     </DropdownMenuItem>
-                                    <DropdownMenuItem @click="worldDialogCommand('Change Description')">
-                                        <Pencil class="size-4" />
-                                        {{ t('dialog.world.actions.change_description') }}
+                                    <DropdownMenuItem @click="worldDialogCommand('Share2')">
+                                        <Share2 class="size-4" />
+                                        {{ t('dialog.world.actions.share') }}
                                     </DropdownMenuItem>
-                                    <DropdownMenuItem @click="worldDialogCommand('Change Capacity')">
-                                        <Pencil class="size-4" />
-                                        {{ t('dialog.world.actions.change_capacity') }}
+                                    <DropdownMenuSeparator />
+                                    <DropdownMenuItem @click="worldDialogCommand('New Instance')">
+                                        <Flag class="size-4" />
+                                        {{ t('dialog.world.actions.new_instance') }}
                                     </DropdownMenuItem>
-                                    <DropdownMenuItem @click="worldDialogCommand('Change Recommended Capacity')">
-                                        <Pencil class="size-4" />
-                                        {{ t('dialog.world.actions.change_recommended_capacity') }}
-                                    </DropdownMenuItem>
-                                    <DropdownMenuItem @click="worldDialogCommand('Change YouTube Preview')">
-                                        <Pencil class="size-4" />
-                                        {{ t('dialog.world.actions.change_preview') }}
-                                    </DropdownMenuItem>
-                                    <DropdownMenuItem @click="worldDialogCommand('Change Tags')">
-                                        <Pencil class="size-4" />
-                                        {{ t('dialog.world.actions.change_warnings_settings_tags') }}
-                                    </DropdownMenuItem>
-                                    <DropdownMenuItem @click="worldDialogCommand('Change Allowed Domains')">
-                                        <Pencil class="size-4" />
-                                        {{ t('dialog.world.actions.change_allowed_video_player_domains') }}
-                                    </DropdownMenuItem>
-                                    <DropdownMenuItem v-if="isWindows" @click="worldDialogCommand('Change Image')">
-                                        <Image 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 @click="worldDialogCommand('New Instance and Self Invite')">
+                                        <MessageSquare 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="
-                                            worldDialog.ref?.tags?.includes('system_approved') ||
-                                            worldDialog.ref?.tags?.includes('system_labs')
+                                            currentUser.$homeLocation &&
+                                            currentUser.$homeLocation.worldId === worldDialog.id
                                         "
-                                        @click="worldDialogCommand('Unpublish')">
-                                        <Eye class="size-4" />
-                                        {{ t('dialog.world.actions.unpublish') }}
+                                        @click="worldDialogCommand('Reset Home')">
+                                        <Wand2 class="size-4" />
+                                        {{ t('dialog.world.actions.reset_home') }}
                                     </DropdownMenuItem>
-                                    <DropdownMenuItem v-else @click="worldDialogCommand('Publish')">
-                                        <Eye class="size-4" />
-                                        {{ t('dialog.world.actions.publish_to_labs') }}
+                                    <DropdownMenuItem v-else @click="worldDialogCommand('Make Home')">
+                                        <Home class="size-4" />
+                                        {{ t('dialog.world.actions.make_home') }}
                                     </DropdownMenuItem>
-                                    <DropdownMenuItem
-                                        :disabled="!worldDialog.hasPersistData"
-                                        @click="worldDialogCommand('Trash2 Persistent Data')">
-                                        <Upload class="size-4" />
-                                        {{ t('dialog.world.actions.delete_persistent_data') }}
+                                    <DropdownMenuItem @click="worldDialogCommand('Previous Instances')">
+                                        <LineChart class="size-4" />
+                                        {{ t('dialog.world.actions.show_previous_instances') }}
                                     </DropdownMenuItem>
-                                    <DropdownMenuItem variant="destructive" @click="worldDialogCommand('Trash2')">
-                                        <Trash2 class="size-4" />
-                                        {{ t('dialog.world.actions.delete') }}
-                                    </DropdownMenuItem>
-                                </template>
-                            </DropdownMenuContent>
-                        </DropdownMenu>
+                                    <template v-if="currentUser.id !== worldDialog.ref.authorId">
+                                        <DropdownMenuItem
+                                            :disabled="!worldDialog.hasPersistData"
+                                            @click="worldDialogCommand('Trash2 Persistent Data')">
+                                            <Upload class="size-4" />
+                                            {{ t('dialog.world.actions.delete_persistent_data') }}
+                                        </DropdownMenuItem>
+                                    </template>
+                                    <template v-else>
+                                        <DropdownMenuItem @click="worldDialogCommand('Rename')">
+                                            <Pencil class="size-4" />
+                                            {{ t('dialog.world.actions.rename') }}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem @click="worldDialogCommand('Change Description')">
+                                            <Pencil class="size-4" />
+                                            {{ t('dialog.world.actions.change_description') }}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem @click="worldDialogCommand('Change Capacity')">
+                                            <Pencil class="size-4" />
+                                            {{ t('dialog.world.actions.change_capacity') }}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem @click="worldDialogCommand('Change Recommended Capacity')">
+                                            <Pencil class="size-4" />
+                                            {{ t('dialog.world.actions.change_recommended_capacity') }}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem @click="worldDialogCommand('Change YouTube Preview')">
+                                            <Pencil class="size-4" />
+                                            {{ t('dialog.world.actions.change_preview') }}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem @click="worldDialogCommand('Change Tags')">
+                                            <Pencil class="size-4" />
+                                            {{ t('dialog.world.actions.change_warnings_settings_tags') }}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem @click="worldDialogCommand('Change Allowed Domains')">
+                                            <Pencil class="size-4" />
+                                            {{ t('dialog.world.actions.change_allowed_video_player_domains') }}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem v-if="isWindows" @click="worldDialogCommand('Change Image')">
+                                            <Image 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="
+                                                worldDialog.ref?.tags?.includes('system_approved') ||
+                                                worldDialog.ref?.tags?.includes('system_labs')
+                                            "
+                                            @click="worldDialogCommand('Unpublish')">
+                                            <Eye class="size-4" />
+                                            {{ t('dialog.world.actions.unpublish') }}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem v-else @click="worldDialogCommand('Publish')">
+                                            <Eye class="size-4" />
+                                            {{ t('dialog.world.actions.publish_to_labs') }}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem
+                                            :disabled="!worldDialog.hasPersistData"
+                                            @click="worldDialogCommand('Trash2 Persistent Data')">
+                                            <Upload class="size-4" />
+                                            {{ t('dialog.world.actions.delete_persistent_data') }}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem variant="destructive" @click="worldDialogCommand('Trash2')">
+                                            <Trash2 class="size-4" />
+                                            {{ t('dialog.world.actions.delete') }}
+                                        </DropdownMenuItem>
+                                    </template>
+                                </DropdownMenuContent>
+                            </DropdownMenu>
+                        </div>
                     </div>
                 </div>
-            </div>
-            <TabsUnderline
-                v-model="worldDialogLastActiveTab"
-                :items="worldDialogTabs"
-                :unmount-on-hide="false"
-                @update:modelValue="worldDialogTabClick">
-                <template #Instances>
-                    <div>
-                        <User />
-                        {{ t('dialog.world.instances.public_count', { count: worldDialog.ref.publicOccupants }) }}
-                        <User style="margin-left: 10px" />
-                        {{
-                            t('dialog.world.instances.private_count', {
-                                count: worldDialog.ref.privateOccupants
-                            })
-                        }}
-                        <Check style="margin-left: 10px" />
-                        {{
-                            t('dialog.world.instances.capacity_count', {
-                                count: worldDialog.ref.recommendedCapacity,
-                                max: worldDialog.ref.capacity
-                            })
-                        }}
-                    </div>
-                    <div v-for="room in worldDialog.rooms" :key="room.id">
-                        <template
-                            v-if="isAgeGatedInstancesVisible || !(room.ageGate || room.location?.includes('~ageGate'))">
-                            <div style="margin: 5px 0">
-                                <div class="flex-align-center">
-                                    <LocationWorld
-                                        :locationobject="room.$location"
-                                        :currentuserid="currentUser.id"
-                                        :worlddialogshortname="worldDialog.$location.shortName" />
-                                    <Launch :location="room.tag" style="margin-left: 5px" />
-                                    <InviteYourself
-                                        :location="room.$location.tag"
-                                        :shortname="room.$location.shortName"
-                                        style="margin-left: 5px" />
-                                    <TooltipWrapper
-                                        side="top"
-                                        :content="t('dialog.world.instances.refresh_instance_info')">
-                                        <Button
-                                            class="rounded-full ml-1 w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
-                                            size="icon"
-                                            variant="outline"
-                                            @click="refreshInstancePlayerCount(room.tag)"
-                                            ><RefreshCw class="h-4 w-4" />
-                                        </Button>
-                                    </TooltipWrapper>
-                                    <TooltipWrapper
-                                        v-if="instanceJoinHistory.get(room.$location.tag)"
-                                        side="top"
-                                        :content="t('dialog.previous_instances.info')">
-                                        <Button
-                                            class="rounded-full w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
-                                            size="icon-sm"
-                                            variant="outline"
-                                            style="margin-left: 5px"
-                                            @click="showPreviousInstancesInfoDialog(room.location)"
-                                            ><History class="h-4 w-4" />
-                                        </Button>
-                                    </TooltipWrapper>
-                                    <LastJoin :location="room.$location.tag" :currentlocation="lastLocation.location" />
-                                    <InstanceInfo
-                                        :location="room.tag"
-                                        :instance="room.ref"
-                                        :friendcount="room.friendCount" />
-                                </div>
-                                <div
-                                    v-if="room.$location.userId || room.users.length"
-                                    class="x-friend-list"
-                                    style="margin: 10px 0; max-height: unset">
+                <TabsUnderline
+                    v-model="worldDialogLastActiveTab"
+                    :items="worldDialogTabs"
+                    :unmount-on-hide="false"
+                    @update:modelValue="worldDialogTabClick">
+                    <template #Instances>
+                        <div>
+                            <User />
+                            {{ t('dialog.world.instances.public_count', { count: worldDialog.ref.publicOccupants }) }}
+                            <User style="margin-left: 10px" />
+                            {{
+                                t('dialog.world.instances.private_count', {
+                                    count: worldDialog.ref.privateOccupants
+                                })
+                            }}
+                            <Check style="margin-left: 10px" />
+                            {{
+                                t('dialog.world.instances.capacity_count', {
+                                    count: worldDialog.ref.recommendedCapacity,
+                                    max: worldDialog.ref.capacity
+                                })
+                            }}
+                        </div>
+                        <div v-for="room in worldDialog.rooms" :key="room.id">
+                            <template
+                                v-if="
+                                    isAgeGatedInstancesVisible || !(room.ageGate || room.location?.includes('~ageGate'))
+                                ">
+                                <div style="margin: 5px 0">
+                                    <div class="flex-align-center">
+                                        <LocationWorld
+                                            :locationobject="room.$location"
+                                            :currentuserid="currentUser.id"
+                                            :worlddialogshortname="worldDialog.$location.shortName" />
+                                        <Launch :location="room.tag" style="margin-left: 5px" />
+                                        <InviteYourself
+                                            :location="room.$location.tag"
+                                            :shortname="room.$location.shortName"
+                                            style="margin-left: 5px" />
+                                        <TooltipWrapper
+                                            side="top"
+                                            :content="t('dialog.world.instances.refresh_instance_info')">
+                                            <Button
+                                                class="rounded-full ml-1 w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
+                                                size="icon"
+                                                variant="outline"
+                                                @click="refreshInstancePlayerCount(room.tag)"
+                                                ><RefreshCw class="h-4 w-4" />
+                                            </Button>
+                                        </TooltipWrapper>
+                                        <TooltipWrapper
+                                            v-if="instanceJoinHistory.get(room.$location.tag)"
+                                            side="top"
+                                            :content="t('dialog.previous_instances.info')">
+                                            <Button
+                                                class="rounded-full w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
+                                                size="icon-sm"
+                                                variant="outline"
+                                                style="margin-left: 5px"
+                                                @click="showPreviousInstancesInfoDialog(room.location)"
+                                                ><History class="h-4 w-4" />
+                                            </Button>
+                                        </TooltipWrapper>
+                                        <LastJoin
+                                            :location="room.$location.tag"
+                                            :currentlocation="lastLocation.location" />
+                                        <InstanceInfo
+                                            :location="room.tag"
+                                            :instance="room.ref"
+                                            :friendcount="room.friendCount" />
+                                    </div>
                                     <div
-                                        v-if="room.$location.userId"
-                                        class="x-friend-item x-friend-item-border"
-                                        @click="showUserDialog(room.$location.userId)">
-                                        <template v-if="room.$location.user">
-                                            <div class="avatar" :class="userStatusClass(room.$location.user)">
-                                                <img :src="userImage(room.$location.user, true)" loading="lazy" />
+                                        v-if="room.$location.userId || room.users.length"
+                                        class="x-friend-list"
+                                        style="margin: 10px 0; max-height: unset">
+                                        <div
+                                            v-if="room.$location.userId"
+                                            class="x-friend-item x-friend-item-border"
+                                            @click="showUserDialog(room.$location.userId)">
+                                            <template v-if="room.$location.user">
+                                                <div class="avatar" :class="userStatusClass(room.$location.user)">
+                                                    <img :src="userImage(room.$location.user, true)" loading="lazy" />
+                                                </div>
+                                                <div class="detail">
+                                                    <span
+                                                        class="name"
+                                                        :style="{ color: room.$location.user.$userColour }"
+                                                        v-text="room.$location.user.displayName" />
+                                                    <span class="extra">
+                                                        {{ t('dialog.world.instances.instance_creator') }}
+                                                    </span>
+                                                </div>
+                                            </template>
+                                            <span v-else v-text="room.$location.userId" />
+                                        </div>
+                                        <div
+                                            v-for="user in room.users"
+                                            :key="user.id"
+                                            class="x-friend-item x-friend-item-border"
+                                            @click="showUserDialog(user.id)">
+                                            <div class="avatar" :class="userStatusClass(user)">
+                                                <img :src="userImage(user, true)" loading="lazy" />
                                             </div>
                                             <div class="detail">
                                                 <span
                                                     class="name"
-                                                    :style="{ color: room.$location.user.$userColour }"
-                                                    v-text="room.$location.user.displayName" />
-                                                <span class="extra">
-                                                    {{ t('dialog.world.instances.instance_creator') }}
+                                                    :style="{ color: user.$userColour }"
+                                                    v-text="user.displayName" />
+                                                <span v-if="user.location === 'traveling'" class="extra">
+                                                    <Loader2 class="is-loading" style="margin-right: 3px" />
+                                                    <Timer :epoch="user.$travelingToTime" />
+                                                </span>
+                                                <span v-else class="extra">
+                                                    <Timer :epoch="user.$location_at" />
                                                 </span>
                                             </div>
-                                        </template>
-                                        <span v-else v-text="room.$location.userId" />
-                                    </div>
-                                    <div
-                                        v-for="user in room.users"
-                                        :key="user.id"
-                                        class="x-friend-item x-friend-item-border"
-                                        @click="showUserDialog(user.id)">
-                                        <div class="avatar" :class="userStatusClass(user)">
-                                            <img :src="userImage(user, true)" loading="lazy" />
-                                        </div>
-                                        <div class="detail">
-                                            <span
-                                                class="name"
-                                                :style="{ color: user.$userColour }"
-                                                v-text="user.displayName" />
-                                            <span v-if="user.location === 'traveling'" class="extra">
-                                                <Loader2 class="is-loading" style="margin-right: 3px" />
-                                                <Timer :epoch="user.$travelingToTime" />
-                                            </span>
-                                            <span v-else class="extra">
-                                                <Timer :epoch="user.$location_at" />
-                                            </span>
                                         </div>
                                     </div>
                                 </div>
-                            </div>
-                        </template>
-                    </div>
-                </template>
-                <template #Info>
-                    <div class="x-friend-list" style="max-height: none">
-                        <div class="x-friend-item" style="width: 100%; cursor: default">
-                            <div class="detail">
-                                <span class="name">
-                                    {{ t('dialog.world.info.memo') }}
-                                </span>
-                                <InputGroupTextareaField
-                                    v-model="memo"
-                                    class="extra"
-                                    :rows="2"
-                                    :placeholder="t('dialog.world.info.memo_placeholder')"
-                                    input-class="resize-none min-h-0"
-                                    @change="onWorldMemoChange" />
-                            </div>
+                            </template>
                         </div>
-                        <div style="width: 100%; display: flex">
+                    </template>
+                    <template #Info>
+                        <div class="x-friend-list" style="max-height: none">
                             <div class="x-friend-item" style="width: 100%; cursor: default">
                                 <div class="detail">
                                     <span class="name">
-                                        {{ t('dialog.world.info.id') }}
+                                        {{ t('dialog.world.info.memo') }}
                                     </span>
-                                    <span class="extra" style="display: inline">
-                                        {{ worldDialog.id }}
+                                    <InputGroupTextareaField
+                                        v-model="memo"
+                                        class="extra"
+                                        :rows="2"
+                                        :placeholder="t('dialog.world.info.memo_placeholder')"
+                                        input-class="resize-none min-h-0"
+                                        @change="onWorldMemoChange" />
+                                </div>
+                            </div>
+                            <div style="width: 100%; display: flex">
+                                <div class="x-friend-item" style="width: 100%; cursor: default">
+                                    <div class="detail">
+                                        <span class="name">
+                                            {{ t('dialog.world.info.id') }}
+                                        </span>
+                                        <span class="extra" style="display: inline">
+                                            {{ worldDialog.id }}
+                                        </span>
+                                        <TooltipWrapper side="top" :content="t('dialog.world.info.id_tooltip')">
+                                            <DropdownMenu>
+                                                <DropdownMenuTrigger as-child>
+                                                    <Button
+                                                        class="rounded-full text-xs"
+                                                        size="icon-sm"
+                                                        variant="outline"
+                                                        @click.stop
+                                                        ><Copy class="h-4 w-4" />
+                                                    </Button>
+                                                </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>
+                            </div>
+                            <div
+                                v-if="worldDialog.ref.previewYoutubeId"
+                                class="x-friend-item"
+                                style="width: 350px"
+                                @click="
+                                    openExternalLink(
+                                        `https://www.youtube.com/watch?v=${worldDialog.ref.previewYoutubeId}`
+                                    )
+                                ">
+                                <div class="detail">
+                                    <span class="name">
+                                        {{ t('dialog.world.info.youtube_preview') }}
                                     </span>
-                                    <TooltipWrapper side="top" :content="t('dialog.world.info.id_tooltip')">
-                                        <DropdownMenu>
-                                            <DropdownMenuTrigger as-child>
-                                                <Button
-                                                    class="rounded-full text-xs"
-                                                    size="icon-sm"
-                                                    variant="outline"
-                                                    @click.stop
-                                                    ><Copy class="h-4 w-4" />
-                                                </Button>
-                                            </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>
+                                    <span class="extra">
+                                        https://www.youtube.com/watch?v={{ worldDialog.ref.previewYoutubeId }}
+                                    </span>
+                                </div>
+                            </div>
+                            <div class="x-friend-item" style="width: 100%; cursor: default">
+                                <div class="detail">
+                                    <span class="name">
+                                        {{ t('dialog.world.info.author_tags') }}
+                                    </span>
+                                    <span
+                                        v-if="
+                                            worldDialog.ref.tags?.filter((tag) => tag.startsWith('author_tag')).length >
+                                            0
+                                        "
+                                        class="extra">
+                                        {{ worldTags }}
+                                    </span>
+                                    <span v-else class="extra"> - </span>
+                                </div>
+                            </div>
+                            <div class="x-friend-item" style="cursor: default">
+                                <div class="detail">
+                                    <span class="name">
+                                        {{ t('dialog.world.info.players') }}
+                                    </span>
+                                    <span class="extra">
+                                        {{ commaNumber(worldDialog.ref.occupants) }}
+                                    </span>
+                                </div>
+                            </div>
+                            <div class="x-friend-item" style="cursor: default">
+                                <div class="detail">
+                                    <span class="name">
+                                        {{ t('dialog.world.info.favorites') }}
+                                    </span>
+                                    <span class="extra">
+                                        {{ commaNumber(worldDialog.ref.favorites)
+                                        }}<span
+                                            v-if="worldDialog.ref?.favorites > 0 && worldDialog.ref?.visits > 0"
+                                            class="extra">
+                                            ({{ favoriteRate }}%)
+                                        </span>
+                                    </span>
+                                </div>
+                            </div>
+                            <div class="x-friend-item" style="cursor: default">
+                                <div class="detail">
+                                    <span class="name">
+                                        {{ t('dialog.world.info.visits') }}
+                                    </span>
+                                    <span class="extra">
+                                        {{ commaNumber(worldDialog.ref.visits) }}
+                                    </span>
+                                </div>
+                            </div>
+                            <div class="x-friend-item" style="cursor: default">
+                                <div class="detail">
+                                    <span class="name">
+                                        {{ t('dialog.world.info.capacity') }}
+                                    </span>
+                                    <span class="extra">
+                                        {{ commaNumber(worldDialog.ref.recommendedCapacity) }} ({{
+                                            commaNumber(worldDialog.ref.capacity)
+                                        }})
+                                    </span>
+                                </div>
+                            </div>
+                            <div class="x-friend-item" style="cursor: default">
+                                <div class="detail">
+                                    <span class="name">
+                                        {{ t('dialog.world.info.created_at') }}
+                                    </span>
+                                    <span class="extra">
+                                        {{ formatDateFilter(worldDialog.ref.created_at, 'long') }}
+                                    </span>
+                                </div>
+                            </div>
+                            <div class="x-friend-item" style="cursor: default">
+                                <div class="detail">
+                                    <span class="name">
+                                        {{ t('dialog.world.info.last_updated') }}
+                                    </span>
+                                    <span v-if="worldDialog.lastUpdated" class="extra">
+                                        {{ formatDateFilter(worldDialog.lastUpdated, 'long') }}
+                                    </span>
+                                    <span v-else class="extra">
+                                        {{ formatDateFilter(worldDialog.ref.updated_at, 'long') }}
+                                    </span>
+                                </div>
+                            </div>
+                            <div
+                                v-if="worldDialog.ref.labsPublicationDate !== 'none'"
+                                class="x-friend-item"
+                                style="cursor: default">
+                                <div class="detail">
+                                    <span class="name">
+                                        {{ t('dialog.world.info.labs_publication_date') }}
+                                    </span>
+                                    <span class="extra">
+                                        {{ formatDateFilter(worldDialog.ref.labsPublicationDate, 'long') }}
+                                    </span>
+                                </div>
+                            </div>
+                            <div
+                                v-if="worldDialog.ref.publicationDate !== 'none'"
+                                class="x-friend-item"
+                                style="cursor: default">
+                                <div class="detail">
+                                    <span class="name" style="display: inline">
+                                        {{ t('dialog.world.info.publication_date') }}
+                                    </span>
+                                    <TooltipWrapper v-if="isTimeInLabVisible" side="top" style="margin-left: 5px">
+                                        <template #content>
+                                            <span>
+                                                {{ t('dialog.world.info.time_in_labs') }}
+                                                {{ timeInLab }}
+                                            </span>
+                                        </template>
+                                        <ArrowDown />
                                     </TooltipWrapper>
+                                    <span class="extra">
+                                        {{ formatDateFilter(worldDialog.ref.publicationDate, 'long') }}
+                                    </span>
+                                </div>
+                            </div>
+                            <div class="x-friend-item" style="cursor: default">
+                                <div class="detail">
+                                    <span class="name">
+                                        {{ t('dialog.world.info.version') }}
+                                    </span>
+                                    <span class="extra" v-text="worldDialog.ref.version" />
+                                </div>
+                            </div>
+                            <div class="x-friend-item" style="cursor: default">
+                                <div class="detail">
+                                    <span class="name">
+                                        {{ t('dialog.world.info.heat') }}
+                                    </span>
+                                    <span class="extra">
+                                        {{ commaNumber(worldDialog.ref.heat) }} {{ '🔥'.repeat(worldDialog.ref.heat) }}
+                                    </span>
+                                </div>
+                            </div>
+                            <div class="x-friend-item" style="cursor: default">
+                                <div class="detail">
+                                    <span class="name">
+                                        {{ t('dialog.world.info.popularity') }}
+                                    </span>
+                                    <span class="extra">
+                                        {{ commaNumber(worldDialog.ref.popularity) }}
+                                        {{ '💖'.repeat(worldDialog.ref.popularity) }}
+                                    </span>
+                                </div>
+                            </div>
+                            <div class="x-friend-item" style="width: 100%; cursor: default">
+                                <div class="detail">
+                                    <span class="name">
+                                        {{ t('dialog.world.info.platform') }}
+                                    </span>
+                                    <span class="extra" style="white-space: normal">{{ worldDialogPlatform }}</span>
+                                </div>
+                            </div>
+                            <div class="x-friend-item" style="cursor: default">
+                                <div class="detail">
+                                    <span class="name">
+                                        {{ t('dialog.world.info.last_visited') }}
+                                        <TooltipWrapper side="top" :content="t('dialog.world.info.accuracy_notice')"
+                                            ><AlertTriangle style="margin-left: 3px" />
+                                        </TooltipWrapper>
+                                    </span>
+                                    <span class="extra">
+                                        {{ worldDialog.timeSpent === 0 ? ' - ' : timeSpent }}
+                                    </span>
                                 </div>
                             </div>
                         </div>
-                        <div
-                            v-if="worldDialog.ref.previewYoutubeId"
-                            class="x-friend-item"
-                            style="width: 350px"
-                            @click="
-                                openExternalLink(`https://www.youtube.com/watch?v=${worldDialog.ref.previewYoutubeId}`)
-                            ">
-                            <div class="detail">
-                                <span class="name">
-                                    {{ t('dialog.world.info.youtube_preview') }}
-                                </span>
-                                <span class="extra">
-                                    https://www.youtube.com/watch?v={{ worldDialog.ref.previewYoutubeId }}
-                                </span>
-                            </div>
-                        </div>
-                        <div class="x-friend-item" style="width: 100%; cursor: default">
-                            <div class="detail">
-                                <span class="name">
-                                    {{ t('dialog.world.info.author_tags') }}
-                                </span>
-                                <span
-                                    v-if="
-                                        worldDialog.ref.tags?.filter((tag) => tag.startsWith('author_tag')).length > 0
-                                    "
-                                    class="extra">
-                                    {{ worldTags }}
-                                </span>
-                                <span v-else class="extra"> - </span>
-                            </div>
-                        </div>
-                        <div class="x-friend-item" style="cursor: default">
-                            <div class="detail">
-                                <span class="name">
-                                    {{ t('dialog.world.info.players') }}
-                                </span>
-                                <span class="extra">
-                                    {{ commaNumber(worldDialog.ref.occupants) }}
-                                </span>
-                            </div>
-                        </div>
-                        <div class="x-friend-item" style="cursor: default">
-                            <div class="detail">
-                                <span class="name">
-                                    {{ t('dialog.world.info.favorites') }}
-                                </span>
-                                <span class="extra">
-                                    {{ commaNumber(worldDialog.ref.favorites)
-                                    }}<span
-                                        v-if="worldDialog.ref?.favorites > 0 && worldDialog.ref?.visits > 0"
-                                        class="extra">
-                                        ({{ favoriteRate }}%)
-                                    </span>
-                                </span>
-                            </div>
-                        </div>
-                        <div class="x-friend-item" style="cursor: default">
-                            <div class="detail">
-                                <span class="name">
-                                    {{ t('dialog.world.info.visits') }}
-                                </span>
-                                <span class="extra">
-                                    {{ commaNumber(worldDialog.ref.visits) }}
-                                </span>
-                            </div>
-                        </div>
-                        <div class="x-friend-item" style="cursor: default">
-                            <div class="detail">
-                                <span class="name">
-                                    {{ t('dialog.world.info.capacity') }}
-                                </span>
-                                <span class="extra">
-                                    {{ commaNumber(worldDialog.ref.recommendedCapacity) }} ({{
-                                        commaNumber(worldDialog.ref.capacity)
-                                    }})
-                                </span>
-                            </div>
-                        </div>
-                        <div class="x-friend-item" style="cursor: default">
-                            <div class="detail">
-                                <span class="name">
-                                    {{ t('dialog.world.info.created_at') }}
-                                </span>
-                                <span class="extra">
-                                    {{ formatDateFilter(worldDialog.ref.created_at, 'long') }}
-                                </span>
-                            </div>
-                        </div>
-                        <div class="x-friend-item" style="cursor: default">
-                            <div class="detail">
-                                <span class="name">
-                                    {{ t('dialog.world.info.last_updated') }}
-                                </span>
-                                <span v-if="worldDialog.lastUpdated" class="extra">
-                                    {{ formatDateFilter(worldDialog.lastUpdated, 'long') }}
-                                </span>
-                                <span v-else class="extra">
-                                    {{ formatDateFilter(worldDialog.ref.updated_at, 'long') }}
-                                </span>
-                            </div>
-                        </div>
-                        <div
-                            v-if="worldDialog.ref.labsPublicationDate !== 'none'"
-                            class="x-friend-item"
-                            style="cursor: default">
-                            <div class="detail">
-                                <span class="name">
-                                    {{ t('dialog.world.info.labs_publication_date') }}
-                                </span>
-                                <span class="extra">
-                                    {{ formatDateFilter(worldDialog.ref.labsPublicationDate, 'long') }}
-                                </span>
-                            </div>
-                        </div>
-                        <div
-                            v-if="worldDialog.ref.publicationDate !== 'none'"
-                            class="x-friend-item"
-                            style="cursor: default">
-                            <div class="detail">
-                                <span class="name" style="display: inline">
-                                    {{ t('dialog.world.info.publication_date') }}
-                                </span>
-                                <TooltipWrapper v-if="isTimeInLabVisible" side="top" style="margin-left: 5px">
-                                    <template #content>
-                                        <span>
-                                            {{ t('dialog.world.info.time_in_labs') }}
-                                            {{ timeInLab }}
-                                        </span>
-                                    </template>
-                                    <ArrowDown />
-                                </TooltipWrapper>
-                                <span class="extra">
-                                    {{ formatDateFilter(worldDialog.ref.publicationDate, 'long') }}
-                                </span>
-                            </div>
-                        </div>
-                        <div class="x-friend-item" style="cursor: default">
-                            <div class="detail">
-                                <span class="name">
-                                    {{ t('dialog.world.info.version') }}
-                                </span>
-                                <span class="extra" v-text="worldDialog.ref.version" />
-                            </div>
-                        </div>
-                        <div class="x-friend-item" style="cursor: default">
-                            <div class="detail">
-                                <span class="name">
-                                    {{ t('dialog.world.info.heat') }}
-                                </span>
-                                <span class="extra">
-                                    {{ commaNumber(worldDialog.ref.heat) }} {{ '🔥'.repeat(worldDialog.ref.heat) }}
-                                </span>
-                            </div>
-                        </div>
-                        <div class="x-friend-item" style="cursor: default">
-                            <div class="detail">
-                                <span class="name">
-                                    {{ t('dialog.world.info.popularity') }}
-                                </span>
-                                <span class="extra">
-                                    {{ commaNumber(worldDialog.ref.popularity) }}
-                                    {{ '💖'.repeat(worldDialog.ref.popularity) }}
-                                </span>
-                            </div>
-                        </div>
-                        <div class="x-friend-item" style="width: 100%; cursor: default">
-                            <div class="detail">
-                                <span class="name">
-                                    {{ t('dialog.world.info.platform') }}
-                                </span>
-                                <span class="extra" style="white-space: normal">{{ worldDialogPlatform }}</span>
-                            </div>
-                        </div>
-                        <div class="x-friend-item" style="cursor: default">
-                            <div class="detail">
-                                <span class="name">
-                                    {{ t('dialog.world.info.last_visited') }}
-                                    <TooltipWrapper side="top" :content="t('dialog.world.info.accuracy_notice')"
-                                        ><AlertTriangle style="margin-left: 3px" />
-                                    </TooltipWrapper>
-                                </span>
-                                <span class="extra">
-                                    {{ worldDialog.timeSpent === 0 ? ' - ' : timeSpent }}
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-                </template>
-                <template #JSON>
-                    <Button
-                        class="rounded-full h-6 w-6 mr-2"
-                        size="icon-sm"
-                        variant="outline"
-                        @click="refreshWorldDialogTreeData()">
-                        <RefreshCcw />
-                    </Button>
-                    <Button
-                        class="rounded-full h-6 w-6"
-                        size="icon-sm"
-                        variant="outline"
-                        @click="downloadAndSaveJson(worldDialog.id, worldDialog.ref)">
-                        <Download />
-                    </Button>
-                    <vue-json-pretty :data="treeData" :deep="2" :theme="isDarkMode ? 'dark' : 'light'" show-icon />
-                    <br />
-                    <vue-json-pretty
-                        v-if="worldDialog.fileAnalysis.length > 0"
-                        :data="worldDialog.fileAnalysis"
-                        :deep="2"
-                        :theme="isDarkMode ? 'dark' : 'light'"
-                        show-icon />
-                </template>
-            </TabsUnderline>
-        </div>
+                    </template>
+                    <template #JSON>
+                        <Button
+                            class="rounded-full h-6 w-6 mr-2"
+                            size="icon-sm"
+                            variant="outline"
+                            @click="refreshWorldDialogTreeData()">
+                            <RefreshCcw />
+                        </Button>
+                        <Button
+                            class="rounded-full h-6 w-6"
+                            size="icon-sm"
+                            variant="outline"
+                            @click="downloadAndSaveJson(worldDialog.id, worldDialog.ref)">
+                            <Download />
+                        </Button>
+                        <vue-json-pretty :data="treeData" :deep="2" :theme="isDarkMode ? 'dark' : 'light'" show-icon />
+                        <br />
+                        <vue-json-pretty
+                            v-if="worldDialog.fileAnalysis.length > 0"
+                            :data="worldDialog.fileAnalysis"
+                            :deep="2"
+                            :theme="isDarkMode ? 'dark' : 'light'"
+                            show-icon />
+                    </template>
+                </TabsUnderline>
+            </div>
+        </DialogContent>
 
         <template v-if="isDialogVisible">
             <WorldAllowedDomainsDialog :world-allowed-domains-dialog="worldAllowedDomainsDialog" />
@@ -712,7 +718,7 @@
                 v-model:change-world-image-dialog-visible="changeWorldImageDialogVisible"
                 v-model:previousImageUrl="previousImageUrl" />
         </template>
-    </el-dialog>
+    </Dialog>
 </template>
 
 <script setup>
@@ -745,6 +751,7 @@
         Wand2
     } from 'lucide-vue-next';
     import { computed, defineAsyncComponent, nextTick, ref, watch } from 'vue';
+    import { Dialog, DialogContent } from '@/components/ui/dialog';
     import { Button } from '@/components/ui/button';
     import { InputGroupTextareaField } from '@/components/ui/input-group';
     import { TabsUnderline } from '@/components/ui/tabs';
@@ -787,9 +794,9 @@
         DropdownMenuTrigger
     } from '../../ui/dropdown-menu';
     import { favoriteRequest, miscRequest, userRequest, worldRequest } from '../../../api';
-    import { formatJsonVars, getNextDialogIndex } from '../../../shared/utils/base/ui';
     import { Badge } from '../../ui/badge';
     import { database } from '../../../service/database.js';
+    import { formatJsonVars } from '../../../shared/utils/base/ui';
 
     const modalStore = useModalStore();
 
@@ -913,16 +920,12 @@
         return platforms.join(', ');
     });
 
-    const worldDialogIndex = ref(2000);
     const worldDialogLastActiveTab = ref('Instances');
 
     watch(
         () => worldDialog.value.loading,
         () => {
             if (worldDialog.value.visible) {
-                nextTick(() => {
-                    worldDialogIndex.value = getNextDialogIndex();
-                });
                 handleDialogOpen();
                 !worldDialog.value.loading && loadLastActiveTab();
             }
diff --git a/src/views/Charts/components/MutualFriends.vue b/src/views/Charts/components/MutualFriends.vue
index e2d5eed4..48c652fe 100644
--- a/src/views/Charts/components/MutualFriends.vue
+++ b/src/views/Charts/components/MutualFriends.vue
@@ -44,101 +44,105 @@
             <span>{{ t('view.charts.mutual_friend.progress.no_relationships_discovered') }}</span>
         </div>
 
-        <el-dialog
-            v-model="isForceDialogVisible"
-            :title="t('view.charts.mutual_friend.force_dialog.title')"
-            width="440px">
-            <p class="mutual-graph__force-description">
-                {{ t('view.charts.mutual_friend.force_dialog.description') }}
-            </p>
-            <FieldGroup class="mutual-graph__force-form">
-                <Field>
-                    <FieldLabel>{{ t('view.charts.mutual_friend.force_dialog.repulsion') }}</FieldLabel>
-                    <FieldContent>
-                        <NumberField
-                            v-model="forceForm.repulsion"
-                            :step="1"
-                            :format-options="{ maximumFractionDigits: 0 }"
-                            class="mutual-graph__number-input">
-                            <NumberFieldContent>
-                                <NumberFieldInput />
-                            </NumberFieldContent>
-                        </NumberField>
-                        <FieldDescription class="mutual-graph__helper">
-                            {{ t('view.charts.mutual_friend.force_dialog.repulsion_help') }}
-                        </FieldDescription>
-                    </FieldContent>
-                </Field>
-                <Field>
-                    <FieldLabel>{{ t('view.charts.mutual_friend.force_dialog.edge_length_min') }}</FieldLabel>
-                    <FieldContent>
-                        <NumberField
-                            v-model="forceForm.edgeLengthMin"
-                            :step="1"
-                            :format-options="{ maximumFractionDigits: 0 }"
-                            class="mutual-graph__number-input">
-                            <NumberFieldContent>
-                                <NumberFieldInput />
-                            </NumberFieldContent>
-                        </NumberField>
-                        <FieldDescription class="mutual-graph__helper">
-                            {{ t('view.charts.mutual_friend.force_dialog.edge_length_min_help') }}
-                        </FieldDescription>
-                    </FieldContent>
-                </Field>
-                <Field>
-                    <FieldLabel>{{ t('view.charts.mutual_friend.force_dialog.edge_length_max') }}</FieldLabel>
-                    <FieldContent>
-                        <NumberField
-                            v-model="forceForm.edgeLengthMax"
-                            :step="1"
-                            :format-options="{ maximumFractionDigits: 0 }"
-                            class="mutual-graph__number-input">
-                            <NumberFieldContent>
-                                <NumberFieldInput />
-                            </NumberFieldContent>
-                        </NumberField>
-                        <FieldDescription class="mutual-graph__helper">
-                            {{ t('view.charts.mutual_friend.force_dialog.edge_length_max_help') }}
-                        </FieldDescription>
-                    </FieldContent>
-                </Field>
-                <Field>
-                    <FieldLabel>{{ t('view.charts.mutual_friend.force_dialog.gravity') }}</FieldLabel>
-                    <FieldContent>
-                        <NumberField
-                            v-model="forceForm.gravity"
-                            :max="1"
-                            :step="0.1"
-                            :format-options="{ maximumFractionDigits: 1 }"
-                            class="mutual-graph__number-input">
-                            <NumberFieldContent>
-                                <NumberFieldInput />
-                            </NumberFieldContent>
-                        </NumberField>
-                        <FieldDescription class="mutual-graph__helper">
-                            {{ t('view.charts.mutual_friend.force_dialog.gravity_help') }}
-                        </FieldDescription>
-                    </FieldContent>
-                </Field>
-            </FieldGroup>
+        <Dialog v-model:open="isForceDialogVisible">
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>{{ t('view.charts.mutual_friend.force_dialog.title') }}</DialogTitle>
+                </DialogHeader>
 
-            <template #footer>
-                <div class="mutual-graph__dialog-footer">
-                    <Button variant="secondary" class="mr-2" @click="resetForceSettings">{{
-                        t('view.charts.mutual_friend.force_dialog.reset')
-                    }}</Button>
-                    <Button :disabled="!graphReady" @click="applyForceSettings">
-                        {{ t('view.charts.mutual_friend.force_dialog.apply') }}
-                    </Button>
-                </div>
-            </template>
-        </el-dialog>
+                <p class="mutual-graph__force-description">
+                    {{ t('view.charts.mutual_friend.force_dialog.description') }}
+                </p>
+                <FieldGroup class="mutual-graph__force-form">
+                    <Field>
+                        <FieldLabel>{{ t('view.charts.mutual_friend.force_dialog.repulsion') }}</FieldLabel>
+                        <FieldContent>
+                            <NumberField
+                                v-model="forceForm.repulsion"
+                                :step="1"
+                                :format-options="{ maximumFractionDigits: 0 }"
+                                class="mutual-graph__number-input">
+                                <NumberFieldContent>
+                                    <NumberFieldInput />
+                                </NumberFieldContent>
+                            </NumberField>
+                            <FieldDescription class="mutual-graph__helper">
+                                {{ t('view.charts.mutual_friend.force_dialog.repulsion_help') }}
+                            </FieldDescription>
+                        </FieldContent>
+                    </Field>
+                    <Field>
+                        <FieldLabel>{{ t('view.charts.mutual_friend.force_dialog.edge_length_min') }}</FieldLabel>
+                        <FieldContent>
+                            <NumberField
+                                v-model="forceForm.edgeLengthMin"
+                                :step="1"
+                                :format-options="{ maximumFractionDigits: 0 }"
+                                class="mutual-graph__number-input">
+                                <NumberFieldContent>
+                                    <NumberFieldInput />
+                                </NumberFieldContent>
+                            </NumberField>
+                            <FieldDescription class="mutual-graph__helper">
+                                {{ t('view.charts.mutual_friend.force_dialog.edge_length_min_help') }}
+                            </FieldDescription>
+                        </FieldContent>
+                    </Field>
+                    <Field>
+                        <FieldLabel>{{ t('view.charts.mutual_friend.force_dialog.edge_length_max') }}</FieldLabel>
+                        <FieldContent>
+                            <NumberField
+                                v-model="forceForm.edgeLengthMax"
+                                :step="1"
+                                :format-options="{ maximumFractionDigits: 0 }"
+                                class="mutual-graph__number-input">
+                                <NumberFieldContent>
+                                    <NumberFieldInput />
+                                </NumberFieldContent>
+                            </NumberField>
+                            <FieldDescription class="mutual-graph__helper">
+                                {{ t('view.charts.mutual_friend.force_dialog.edge_length_max_help') }}
+                            </FieldDescription>
+                        </FieldContent>
+                    </Field>
+                    <Field>
+                        <FieldLabel>{{ t('view.charts.mutual_friend.force_dialog.gravity') }}</FieldLabel>
+                        <FieldContent>
+                            <NumberField
+                                v-model="forceForm.gravity"
+                                :max="1"
+                                :step="0.1"
+                                :format-options="{ maximumFractionDigits: 1 }"
+                                class="mutual-graph__number-input">
+                                <NumberFieldContent>
+                                    <NumberFieldInput />
+                                </NumberFieldContent>
+                            </NumberField>
+                            <FieldDescription class="mutual-graph__helper">
+                                {{ t('view.charts.mutual_friend.force_dialog.gravity_help') }}
+                            </FieldDescription>
+                        </FieldContent>
+                    </Field>
+                </FieldGroup>
+
+                <DialogFooter>
+                    <div class="mutual-graph__dialog-footer">
+                        <Button variant="secondary" class="mr-2" @click="resetForceSettings">{{
+                            t('view.charts.mutual_friend.force_dialog.reset')
+                        }}</Button>
+                        <Button :disabled="!graphReady" @click="applyForceSettings">
+                            {{ t('view.charts.mutual_friend.force_dialog.apply') }}
+                        </Button>
+                    </div>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
     </div>
 </template>
 
 <script setup>
     import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { Field, FieldContent, FieldDescription, FieldGroup, FieldLabel } from '@/components/ui/field';
     import { NumberField, NumberFieldContent, NumberFieldInput } from '@/components/ui/number-field';
     import { Button } from '@/components/ui/button';
diff --git a/src/views/Favorites/dialogs/AvatarExportDialog.vue b/src/views/Favorites/dialogs/AvatarExportDialog.vue
index 5cccce37..b5e1dcee 100644
--- a/src/views/Favorites/dialogs/AvatarExportDialog.vue
+++ b/src/views/Favorites/dialogs/AvatarExportDialog.vue
@@ -1,64 +1,71 @@
 <template>
-    <el-dialog v-model="isDialogVisible" :title="t('dialog.avatar_export.header')" width="650px">
-        <div style="margin-bottom: 10px" class="flex flex-col gap-2">
-            <label v-for="option in exportSelectOptions" :key="option.value" class="inline-flex items-center gap-2">
-                <Checkbox
-                    :model-value="exportSelectedOptions.includes(option.label)"
-                    @update:modelValue="(val) => toggleAvatarExportOption(option.label, val)" />
-                <span>{{ option.label }}</span>
-            </label>
-        </div>
+    <Dialog v-model:open="isDialogVisible">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.avatar_export.header') }}</DialogTitle>
+            </DialogHeader>
 
-        <div class="flex items-center gap-2">
-            <Select
-                :model-value="avatarExportFavoriteGroupSelection"
-                @update:modelValue="handleAvatarExportFavoriteGroupSelect">
-                <SelectTrigger size="sm">
-                    <SelectValue placeholder="All Favorites" />
-                </SelectTrigger>
-                <SelectContent>
-                    <SelectGroup>
-                        <SelectItem :value="AVATAR_EXPORT_ALL_VALUE">All Favorites</SelectItem>
-                        <SelectItem
-                            v-for="groupAPI in favoriteAvatarGroups"
-                            :key="groupAPI.name"
-                            :value="groupAPI.name">
-                            {{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
-                        </SelectItem>
-                    </SelectGroup>
-                </SelectContent>
-            </Select>
+            <div style="margin-bottom: 10px" class="flex flex-col gap-2">
+                <label v-for="option in exportSelectOptions" :key="option.value" class="inline-flex items-center gap-2">
+                    <Checkbox
+                        :model-value="exportSelectedOptions.includes(option.label)"
+                        @update:modelValue="(val) => toggleAvatarExportOption(option.label, val)" />
+                    <span>{{ option.label }}</span>
+                </label>
+            </div>
 
-            <Select
-                :model-value="avatarExportLocalFavoriteGroupSelection"
-                @update:modelValue="handleAvatarExportLocalFavoriteGroupSelect"
-                style="margin-left: 10px">
-                <SelectTrigger size="sm">
-                    <SelectValue placeholder="Select Group" />
-                </SelectTrigger>
-                <SelectContent>
-                    <SelectGroup>
-                        <SelectItem :value="AVATAR_EXPORT_NONE_VALUE">None</SelectItem>
-                        <SelectItem v-for="group in localAvatarFavoriteGroups" :key="group" :value="group">
-                            {{ group }} ({{ localAvatarFavGroupLength(group) }})
-                        </SelectItem>
-                    </SelectGroup>
-                </SelectContent>
-            </Select>
-        </div>
-        <br />
-        <InputGroupTextareaField
-            v-model="avatarExportContent"
-            :rows="15"
-            readonly
-            style="margin-top: 15px"
-            input-class="resize-none"
-            @click="handleCopyAvatarExportData" />
-    </el-dialog>
+            <div class="flex items-center gap-2">
+                <Select
+                    :model-value="avatarExportFavoriteGroupSelection"
+                    @update:modelValue="handleAvatarExportFavoriteGroupSelect">
+                    <SelectTrigger size="sm">
+                        <SelectValue placeholder="All Favorites" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectGroup>
+                            <SelectItem :value="AVATAR_EXPORT_ALL_VALUE">All Favorites</SelectItem>
+                            <SelectItem
+                                v-for="groupAPI in favoriteAvatarGroups"
+                                :key="groupAPI.name"
+                                :value="groupAPI.name">
+                                {{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
+                            </SelectItem>
+                        </SelectGroup>
+                    </SelectContent>
+                </Select>
+
+                <Select
+                    :model-value="avatarExportLocalFavoriteGroupSelection"
+                    @update:modelValue="handleAvatarExportLocalFavoriteGroupSelect"
+                    style="margin-left: 10px">
+                    <SelectTrigger size="sm">
+                        <SelectValue placeholder="Select Group" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectGroup>
+                            <SelectItem :value="AVATAR_EXPORT_NONE_VALUE">None</SelectItem>
+                            <SelectItem v-for="group in localAvatarFavoriteGroups" :key="group" :value="group">
+                                {{ group }} ({{ localAvatarFavGroupLength(group) }})
+                            </SelectItem>
+                        </SelectGroup>
+                    </SelectContent>
+                </Select>
+            </div>
+            <br />
+            <InputGroupTextareaField
+                v-model="avatarExportContent"
+                :rows="15"
+                readonly
+                style="margin-top: 15px"
+                input-class="resize-none"
+                @click="handleCopyAvatarExportData" />
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
     import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { computed, ref, watch } from 'vue';
     import { Checkbox } from '@/components/ui/checkbox';
     import { InputGroupTextareaField } from '@/components/ui/input-group';
diff --git a/src/views/Favorites/dialogs/AvatarImportDialog.vue b/src/views/Favorites/dialogs/AvatarImportDialog.vue
index c4608a6c..c5d502e5 100644
--- a/src/views/Favorites/dialogs/AvatarImportDialog.vue
+++ b/src/views/Favorites/dialogs/AvatarImportDialog.vue
@@ -1,120 +1,122 @@
 <template>
-    <el-dialog
-        :z-index="avatarImportDialogIndex"
-        v-model="isVisible"
-        :title="t('dialog.avatar_import.header')"
-        width="650px">
-        <div style="display: flex; align-items: center; justify-content: space-between">
-            <div style="font-size: 12px">{{ t('dialog.avatar_import.description') }}</div>
-            <div style="display: flex; align-items: center">
-                <div v-if="avatarImportDialog.progress">
-                    {{ t('dialog.avatar_import.process_progress') }} {{ avatarImportDialog.progress }} /
-                    {{ avatarImportDialog.progressTotal }}
-                    <Loader2 style="margin: 0 5px" />
+    <Dialog v-model:open="isVisible">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.avatar_import.header') }}</DialogTitle>
+            </DialogHeader>
+            <div style="display: flex; align-items: center; justify-content: space-between">
+                <div style="font-size: 12px">{{ t('dialog.avatar_import.description') }}</div>
+                <div style="display: flex; align-items: center">
+                    <div v-if="avatarImportDialog.progress">
+                        {{ t('dialog.avatar_import.process_progress') }} {{ avatarImportDialog.progress }} /
+                        {{ avatarImportDialog.progressTotal }}
+                        <Loader2 style="margin: 0 5px" />
+                    </div>
+                    <Button v-if="avatarImportDialog.loading" size="sm" variant="secondary" @click="cancelAvatarImport">
+                        {{ t('dialog.avatar_import.cancel') }}
+                    </Button>
+                    <Button size="sm" v-else :disabled="!avatarImportDialog.input" @click="processAvatarImportList">
+                        {{ t('dialog.avatar_import.process_list') }}
+                    </Button>
                 </div>
-                <Button v-if="avatarImportDialog.loading" size="sm" variant="secondary" @click="cancelAvatarImport">
-                    {{ t('dialog.avatar_import.cancel') }}
-                </Button>
-                <Button size="sm" v-else :disabled="!avatarImportDialog.input" @click="processAvatarImportList">
-                    {{ t('dialog.avatar_import.process_list') }}
-                </Button>
             </div>
-        </div>
-        <InputGroupTextareaField
-            v-model="avatarImportDialog.input"
-            :rows="10"
-            style="margin-top: 10px"
-            input-class="resize-none" />
-        <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 5px">
-            <div>
-                <div class="flex items-center gap-2">
-                    <Select
-                        :model-value="avatarImportFavoriteGroupSelection"
-                        @update:modelValue="handleAvatarImportGroupSelect"
-                        style="margin-right: 5px">
-                        <SelectTrigger size="sm">
-                            <SelectValue :placeholder="t('dialog.avatar_import.select_group_placeholder')" />
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectGroup>
-                                <SelectItem
-                                    v-for="groupAPI in favoriteAvatarGroups"
-                                    :key="groupAPI.name"
-                                    :value="groupAPI.name"
-                                    :disabled="groupAPI.count >= groupAPI.capacity">
-                                    {{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
-                                </SelectItem>
-                            </SelectGroup>
-                        </SelectContent>
-                    </Select>
+            <InputGroupTextareaField
+                v-model="avatarImportDialog.input"
+                :rows="10"
+                style="margin-top: 10px"
+                input-class="resize-none" />
+            <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 5px">
+                <div>
+                    <div class="flex items-center gap-2">
+                        <Select
+                            :model-value="avatarImportFavoriteGroupSelection"
+                            @update:modelValue="handleAvatarImportGroupSelect"
+                            style="margin-right: 5px">
+                            <SelectTrigger size="sm">
+                                <SelectValue :placeholder="t('dialog.avatar_import.select_group_placeholder')" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectGroup>
+                                    <SelectItem
+                                        v-for="groupAPI in favoriteAvatarGroups"
+                                        :key="groupAPI.name"
+                                        :value="groupAPI.name"
+                                        :disabled="groupAPI.count >= groupAPI.capacity">
+                                        {{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
+                                    </SelectItem>
+                                </SelectGroup>
+                            </SelectContent>
+                        </Select>
 
-                    <Select
-                        :model-value="avatarImportLocalFavoriteGroupSelection"
-                        @update:modelValue="handleAvatarImportLocalGroupSelect"
-                        style="margin-left: 10px">
-                        <SelectTrigger size="sm">
-                            <SelectValue :placeholder="t('dialog.avatar_import.select_group_placeholder')" />
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectGroup>
-                                <SelectItem v-for="group in localAvatarFavoriteGroups" :key="group" :value="group">
-                                    {{ group }} ({{ localAvatarFavGroupLength(group) }})
-                                </SelectItem>
-                            </SelectGroup>
-                        </SelectContent>
-                    </Select>
+                        <Select
+                            :model-value="avatarImportLocalFavoriteGroupSelection"
+                            @update:modelValue="handleAvatarImportLocalGroupSelect"
+                            style="margin-left: 10px">
+                            <SelectTrigger size="sm">
+                                <SelectValue :placeholder="t('dialog.avatar_import.select_group_placeholder')" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectGroup>
+                                    <SelectItem v-for="group in localAvatarFavoriteGroups" :key="group" :value="group">
+                                        {{ group }} ({{ localAvatarFavGroupLength(group) }})
+                                    </SelectItem>
+                                </SelectGroup>
+                            </SelectContent>
+                        </Select>
+                    </div>
+                    <span v-if="avatarImportDialog.avatarImportFavoriteGroup" style="margin-left: 5px">
+                        {{ avatarImportTable.data.length }} /
+                        {{
+                            avatarImportDialog.avatarImportFavoriteGroup.capacity -
+                            avatarImportDialog.avatarImportFavoriteGroup.count
+                        }}
+                    </span>
+                </div>
+                <div>
+                    <Button size="sm" variant="secondary" class="mr-2" @click="clearAvatarImportTable">
+                        {{ t('dialog.avatar_import.clear_table') }}
+                    </Button>
+                    <Button
+                        size="sm"
+                        :disabled="
+                            avatarImportTable.data.length === 0 ||
+                            (!avatarImportDialog.avatarImportFavoriteGroup &&
+                                !avatarImportDialog.avatarImportLocalFavoriteGroup)
+                        "
+                        @click="importAvatarImportTable">
+                        {{ t('dialog.avatar_import.import') }}
+                    </Button>
                 </div>
-                <span v-if="avatarImportDialog.avatarImportFavoriteGroup" style="margin-left: 5px">
-                    {{ avatarImportTable.data.length }} /
-                    {{
-                        avatarImportDialog.avatarImportFavoriteGroup.capacity -
-                        avatarImportDialog.avatarImportFavoriteGroup.count
-                    }}
-                </span>
             </div>
-            <div>
-                <Button size="sm" variant="secondary" class="mr-2" @click="clearAvatarImportTable">
-                    {{ t('dialog.avatar_import.clear_table') }}
+            <span v-if="avatarImportDialog.importProgress" style="margin: 10px">
+                <Loader2 style="margin-right: 5px" />
+                {{ t('dialog.avatar_import.import_progress') }}
+                {{ avatarImportDialog.importProgress }}/{{ avatarImportDialog.importProgressTotal }}
+            </span>
+            <br />
+            <template v-if="avatarImportDialog.errors">
+                <Button size="sm" variant="secondary" @click="avatarImportDialog.errors = ''">
+                    {{ t('dialog.avatar_import.clear_errors') }}
                 </Button>
-                <Button
-                    size="sm"
-                    :disabled="
-                        avatarImportTable.data.length === 0 ||
-                        (!avatarImportDialog.avatarImportFavoriteGroup &&
-                            !avatarImportDialog.avatarImportLocalFavoriteGroup)
-                    "
-                    @click="importAvatarImportTable">
-                    {{ t('dialog.avatar_import.import') }}
-                </Button>
-            </div>
-        </div>
-        <span v-if="avatarImportDialog.importProgress" style="margin: 10px">
-            <Loader2 style="margin-right: 5px" />
-            {{ t('dialog.avatar_import.import_progress') }}
-            {{ avatarImportDialog.importProgress }}/{{ avatarImportDialog.importProgressTotal }}
-        </span>
-        <br />
-        <template v-if="avatarImportDialog.errors">
-            <Button size="sm" variant="secondary" @click="avatarImportDialog.errors = ''">
-                {{ t('dialog.avatar_import.clear_errors') }}
-            </Button>
-            <h2 style="font-weight: bold; margin: 5px 0">
-                {{ t('dialog.avatar_import.errors') }}
-            </h2>
-            <pre style="white-space: pre-wrap; font-size: 12px" v-text="avatarImportDialog.errors"></pre>
-        </template>
-        <DataTableLayout
-            class="min-w-0 w-full"
-            :table="table"
-            :loading="avatarImportDialog.loading"
-            :table-style="tableStyle"
-            :show-pagination="false"
-            style="margin-top: 10px" />
-    </el-dialog>
+                <h2 style="font-weight: bold; margin: 5px 0">
+                    {{ t('dialog.avatar_import.errors') }}
+                </h2>
+                <pre style="white-space: pre-wrap; font-size: 12px" v-text="avatarImportDialog.errors"></pre>
+            </template>
+            <DataTableLayout
+                class="min-w-0 w-full"
+                :table="table"
+                :loading="avatarImportDialog.loading"
+                :table-style="tableStyle"
+                :show-pagination="false"
+                style="margin-top: 10px" />
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
     import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { computed, ref, watch } from 'vue';
     import { Button } from '@/components/ui/button';
     import { DataTableLayout } from '@/components/ui/data-table';
@@ -127,7 +129,6 @@
     import { useAvatarStore, useFavoriteStore, useGalleryStore, useUserStore } from '../../../stores';
     import { avatarRequest, favoriteRequest } from '../../../api';
     import { createColumns } from './avatarImportColumns.jsx';
-    import { getNextDialogIndex } from '../../../shared/utils/base/ui';
     import { removeFromArray } from '../../../shared/utils';
     import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
 
@@ -189,8 +190,6 @@
         enableSorting: false
     });
 
-    const avatarImportDialogIndex = ref(2000);
-
     const isVisible = computed({
         get() {
             return avatarImportDialogVisible.value;
@@ -204,7 +203,6 @@
         () => avatarImportDialogVisible.value,
         (value) => {
             if (value) {
-                avatarImportDialogIndex.value = getNextDialogIndex();
                 clearAvatarImportTable();
                 resetAvatarImport();
                 if (avatarImportDialogInput.value) {
diff --git a/src/views/Favorites/dialogs/FriendExportDialog.vue b/src/views/Favorites/dialogs/FriendExportDialog.vue
index 72d6a67f..dd3e5ccd 100644
--- a/src/views/Favorites/dialogs/FriendExportDialog.vue
+++ b/src/views/Favorites/dialogs/FriendExportDialog.vue
@@ -1,41 +1,47 @@
 <template>
-    <el-dialog
-        v-model="isDialogVisible"
-        class="x-dialog"
-        :title="t('dialog.friend_export.header')"
-        width="650px"
-        destroy-on-close>
-        <Select :model-value="friendExportFavoriteGroupSelection" @update:modelValue="handleFriendExportGroupSelect">
-            <SelectTrigger size="sm">
-                <SelectValue placeholder="All Favorites" />
-            </SelectTrigger>
-            <SelectContent>
-                <SelectGroup>
-                    <SelectItem :value="FRIEND_EXPORT_ALL_VALUE">All Favorites</SelectItem>
-                    <SelectItem v-for="groupAPI in favoriteFriendGroups" :key="groupAPI.name" :value="groupAPI.name">
-                        {{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
-                    </SelectItem>
-                </SelectGroup>
-            </SelectContent>
-        </Select>
+    <Dialog v-model:open="isDialogVisible">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.friend_export.header') }}</DialogTitle>
+            </DialogHeader>
+            <Select
+                :model-value="friendExportFavoriteGroupSelection"
+                @update:modelValue="handleFriendExportGroupSelect">
+                <SelectTrigger size="sm">
+                    <SelectValue placeholder="All Favorites" />
+                </SelectTrigger>
+                <SelectContent>
+                    <SelectGroup>
+                        <SelectItem :value="FRIEND_EXPORT_ALL_VALUE">All Favorites</SelectItem>
+                        <SelectItem
+                            v-for="groupAPI in favoriteFriendGroups"
+                            :key="groupAPI.name"
+                            :value="groupAPI.name">
+                            {{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
+                        </SelectItem>
+                    </SelectGroup>
+                </SelectContent>
+            </Select>
 
-        <br />
+            <br />
 
-        <InputGroupTextareaField
-            v-model="friendExportContent"
-            :rows="15"
-            readonly
-            style="margin-top: 15px"
-            input-class="resize-none"
-            @click="handleCopyFriendExportData" />
-    </el-dialog>
+            <InputGroupTextareaField
+                v-model="friendExportContent"
+                :rows="15"
+                readonly
+                style="margin-top: 15px"
+                input-class="resize-none"
+                @click="handleCopyFriendExportData" />
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
     import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { computed, ref, watch } from 'vue';
-    import { storeToRefs } from 'pinia';
     import { InputGroupTextareaField } from '@/components/ui/input-group';
+    import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
diff --git a/src/views/Favorites/dialogs/FriendImportDialog.vue b/src/views/Favorites/dialogs/FriendImportDialog.vue
index 2fff9f82..644ddadf 100644
--- a/src/views/Favorites/dialogs/FriendImportDialog.vue
+++ b/src/views/Favorites/dialogs/FriendImportDialog.vue
@@ -1,101 +1,103 @@
 <template>
-    <el-dialog
-        :z-index="friendImportDialogIndex"
-        v-model="isVisible"
-        :title="t('dialog.friend_import.header')"
-        width="650px">
-        <div style="display: flex; align-items: center; justify-content: space-between">
-            <div style="font-size: 12px">{{ t('dialog.friend_import.description') }}</div>
-            <div style="display: flex; align-items: center">
-                <div v-if="friendImportDialog.progress">
-                    {{ t('dialog.friend_import.process_progress') }} {{ friendImportDialog.progress }} /
-                    {{ friendImportDialog.progressTotal }}
-                    <Loader2 style="margin: 0 5px" />
+    <Dialog v-model:open="isVisible">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.friend_import.header') }}</DialogTitle>
+            </DialogHeader>
+            <div style="display: flex; align-items: center; justify-content: space-between">
+                <div style="font-size: 12px">{{ t('dialog.friend_import.description') }}</div>
+                <div style="display: flex; align-items: center">
+                    <div v-if="friendImportDialog.progress">
+                        {{ t('dialog.friend_import.process_progress') }} {{ friendImportDialog.progress }} /
+                        {{ friendImportDialog.progressTotal }}
+                        <Loader2 style="margin: 0 5px" />
+                    </div>
+                    <Button v-if="friendImportDialog.loading" size="sm" variant="secondary" @click="cancelFriendImport">
+                        {{ t('dialog.friend_import.cancel') }}
+                    </Button>
+                    <Button size="sm" v-else :disabled="!friendImportDialog.input" @click="processFriendImportList">
+                        {{ t('dialog.friend_import.process_list') }}
+                    </Button>
                 </div>
-                <Button v-if="friendImportDialog.loading" size="sm" variant="secondary" @click="cancelFriendImport">
-                    {{ t('dialog.friend_import.cancel') }}
-                </Button>
-                <Button size="sm" v-else :disabled="!friendImportDialog.input" @click="processFriendImportList">
-                    {{ t('dialog.friend_import.process_list') }}
-                </Button>
             </div>
-        </div>
-        <InputGroupTextareaField
-            v-model="friendImportDialog.input"
-            :rows="10"
-            style="margin-top: 10px"
-            input-class="resize-none" />
-        <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 5px">
-            <div>
-                <Select
-                    :model-value="friendImportFavoriteGroupSelection"
-                    @update:modelValue="handleFriendImportGroupSelect">
-                    <SelectTrigger size="sm">
-                        <SelectValue :placeholder="t('dialog.friend_import.select_group_placeholder')" />
-                    </SelectTrigger>
-                    <SelectContent>
-                        <SelectGroup>
-                            <SelectItem
-                                v-for="groupAPI in favoriteFriendGroups"
-                                :key="groupAPI.name"
-                                :value="groupAPI.name"
-                                :disabled="groupAPI.count >= groupAPI.capacity">
-                                {{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
-                            </SelectItem>
-                        </SelectGroup>
-                    </SelectContent>
-                </Select>
-                <span v-if="friendImportDialog.friendImportFavoriteGroup" style="margin-left: 5px">
-                    {{ friendImportTable.data.length }} /
-                    {{
-                        friendImportDialog.friendImportFavoriteGroup.capacity -
-                        friendImportDialog.friendImportFavoriteGroup.count
-                    }}
-                </span>
+            <InputGroupTextareaField
+                v-model="friendImportDialog.input"
+                :rows="10"
+                style="margin-top: 10px"
+                input-class="resize-none" />
+            <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 5px">
+                <div>
+                    <Select
+                        :model-value="friendImportFavoriteGroupSelection"
+                        @update:modelValue="handleFriendImportGroupSelect">
+                        <SelectTrigger size="sm">
+                            <SelectValue :placeholder="t('dialog.friend_import.select_group_placeholder')" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectGroup>
+                                <SelectItem
+                                    v-for="groupAPI in favoriteFriendGroups"
+                                    :key="groupAPI.name"
+                                    :value="groupAPI.name"
+                                    :disabled="groupAPI.count >= groupAPI.capacity">
+                                    {{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
+                                </SelectItem>
+                            </SelectGroup>
+                        </SelectContent>
+                    </Select>
+                    <span v-if="friendImportDialog.friendImportFavoriteGroup" style="margin-left: 5px">
+                        {{ friendImportTable.data.length }} /
+                        {{
+                            friendImportDialog.friendImportFavoriteGroup.capacity -
+                            friendImportDialog.friendImportFavoriteGroup.count
+                        }}
+                    </span>
+                </div>
+                <div>
+                    <Button
+                        size="sm"
+                        class="mr-2"
+                        variant="secondary"
+                        :disabled="friendImportTable.data.length === 0"
+                        @click="clearFriendImportTable">
+                        {{ t('dialog.friend_import.clear_table') }}
+                    </Button>
+                    <Button
+                        size="sm"
+                        :disabled="friendImportTable.data.length === 0 || !friendImportDialog.friendImportFavoriteGroup"
+                        @click="importFriendImportTable">
+                        {{ t('dialog.friend_import.import') }}
+                    </Button>
+                </div>
             </div>
-            <div>
-                <Button
-                    size="sm"
-                    class="mr-2"
-                    variant="secondary"
-                    :disabled="friendImportTable.data.length === 0"
-                    @click="clearFriendImportTable">
-                    {{ t('dialog.friend_import.clear_table') }}
+            <span v-if="friendImportDialog.importProgress" style="margin: 10px">
+                <Loader2 style="margin-right: 5px" />
+                {{ t('dialog.friend_import.import_progress') }} {{ friendImportDialog.importProgress }}/{{
+                    friendImportDialog.importProgressTotal
+                }}
+            </span>
+            <br />
+            <template v-if="friendImportDialog.errors">
+                <Button size="sm" variant="secondary" @click="friendImportDialog.errors = ''">
+                    {{ t('dialog.friend_import.clear_errors') }}
                 </Button>
-                <Button
-                    size="sm"
-                    :disabled="friendImportTable.data.length === 0 || !friendImportDialog.friendImportFavoriteGroup"
-                    @click="importFriendImportTable">
-                    {{ t('dialog.friend_import.import') }}
-                </Button>
-            </div>
-        </div>
-        <span v-if="friendImportDialog.importProgress" style="margin: 10px">
-            <Loader2 style="margin-right: 5px" />
-            {{ t('dialog.friend_import.import_progress') }} {{ friendImportDialog.importProgress }}/{{
-                friendImportDialog.importProgressTotal
-            }}
-        </span>
-        <br />
-        <template v-if="friendImportDialog.errors">
-            <Button size="sm" variant="secondary" @click="friendImportDialog.errors = ''">
-                {{ t('dialog.friend_import.clear_errors') }}
-            </Button>
-            <h2 style="font-weight: bold; margin: 5px 0">{{ t('dialog.friend_import.errors') }}</h2>
-            <pre style="white-space: pre-wrap; font-size: 12px" v-text="friendImportDialog.errors"></pre>
-        </template>
-        <DataTableLayout
-            class="min-w-0 w-full"
-            :table="table"
-            :loading="friendImportDialog.loading"
-            :table-style="tableStyle"
-            :show-pagination="false"
-            style="margin-top: 10px" />
-    </el-dialog>
+                <h2 style="font-weight: bold; margin: 5px 0">{{ t('dialog.friend_import.errors') }}</h2>
+                <pre style="white-space: pre-wrap; font-size: 12px" v-text="friendImportDialog.errors"></pre>
+            </template>
+            <DataTableLayout
+                class="min-w-0 w-full"
+                :table="table"
+                :loading="friendImportDialog.loading"
+                :table-style="tableStyle"
+                :show-pagination="false"
+                style="margin-top: 10px" />
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
     import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { computed, ref, watch } from 'vue';
     import { Button } from '@/components/ui/button';
     import { DataTableLayout } from '@/components/ui/data-table';
@@ -109,7 +111,6 @@
     import { useFavoriteStore, useGalleryStore, useUserStore } from '../../../stores';
     import { favoriteRequest, userRequest } from '../../../api';
     import { createColumns } from './friendImportColumns.jsx';
-    import { getNextDialogIndex } from '../../../shared/utils/base/ui';
     import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
 
     const { t } = useI18n();
@@ -169,8 +170,6 @@
         enableSorting: false
     });
 
-    const friendImportDialogIndex = ref(2000);
-
     const isVisible = computed({
         get() {
             return friendImportDialogVisible.value;
@@ -184,7 +183,6 @@
         () => friendImportDialogVisible.value,
         (value) => {
             if (value) {
-                friendImportDialogIndex.value = getNextDialogIndex();
                 clearFriendImportTable();
                 resetFriendImport();
                 friendImportFavoriteGroupSelection.value =
diff --git a/src/views/Favorites/dialogs/WorldExportDialog.vue b/src/views/Favorites/dialogs/WorldExportDialog.vue
index 586b324f..ff0642e5 100644
--- a/src/views/Favorites/dialogs/WorldExportDialog.vue
+++ b/src/views/Favorites/dialogs/WorldExportDialog.vue
@@ -1,61 +1,73 @@
 <template>
-    <el-dialog v-model="isDialogVisible" :title="t('dialog.world_export.header')" width="650px">
-        <div style="margin-bottom: 10px" class="flex flex-col gap-2">
-            <label v-for="option in exportSelectOptions" :key="option.value" class="inline-flex items-center gap-2">
-                <Checkbox
-                    :model-value="exportSelectedOptions.includes(option.label)"
-                    @update:modelValue="(val) => toggleWorldExportOption(option.label, val)" />
-                <span>{{ option.label }}</span>
-            </label>
-        </div>
+    <Dialog v-model:open="isDialogVisible">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.world_export.header') }}</DialogTitle>
+            </DialogHeader>
 
-        <div class="flex items-center gap-2">
-            <Select :model-value="worldExportFavoriteGroupSelection" @update:modelValue="handleWorldExportGroupSelect">
-                <SelectTrigger size="sm">
-                    <SelectValue placeholder="All Favorites" />
-                </SelectTrigger>
-                <SelectContent>
-                    <SelectGroup>
-                        <SelectItem :value="WORLD_EXPORT_ALL_VALUE">None</SelectItem>
-                        <SelectItem v-for="groupAPI in favoriteWorldGroups" :key="groupAPI.name" :value="groupAPI.name">
-                            {{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
-                        </SelectItem>
-                    </SelectGroup>
-                </SelectContent>
-            </Select>
+            <div style="margin-bottom: 10px" class="flex flex-col gap-2">
+                <label v-for="option in exportSelectOptions" :key="option.value" class="inline-flex items-center gap-2">
+                    <Checkbox
+                        :model-value="exportSelectedOptions.includes(option.label)"
+                        @update:modelValue="(val) => toggleWorldExportOption(option.label, val)" />
+                    <span>{{ option.label }}</span>
+                </label>
+            </div>
 
-            <Select
-                :model-value="worldExportLocalFavoriteGroupSelection"
-                @update:modelValue="handleWorldExportLocalGroupSelect"
-                style="margin-left: 10px">
-                <SelectTrigger size="sm">
-                    <SelectValue placeholder="Select Group" />
-                </SelectTrigger>
-                <SelectContent>
-                    <SelectGroup>
-                        <SelectItem :value="WORLD_EXPORT_NONE_VALUE">None</SelectItem>
-                        <SelectItem v-for="group in localWorldFavoriteGroups" :key="group" :value="group">
-                            {{ group }} ({{ localWorldFavorites[group].length }})
-                        </SelectItem>
-                    </SelectGroup>
-                </SelectContent>
-            </Select>
-        </div>
+            <div class="flex items-center gap-2">
+                <Select
+                    :model-value="worldExportFavoriteGroupSelection"
+                    @update:modelValue="handleWorldExportGroupSelect">
+                    <SelectTrigger size="sm">
+                        <SelectValue placeholder="All Favorites" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectGroup>
+                            <SelectItem :value="WORLD_EXPORT_ALL_VALUE">None</SelectItem>
+                            <SelectItem
+                                v-for="groupAPI in favoriteWorldGroups"
+                                :key="groupAPI.name"
+                                :value="groupAPI.name">
+                                {{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
+                            </SelectItem>
+                        </SelectGroup>
+                    </SelectContent>
+                </Select>
 
-        <br />
+                <Select
+                    :model-value="worldExportLocalFavoriteGroupSelection"
+                    @update:modelValue="handleWorldExportLocalGroupSelect"
+                    style="margin-left: 10px">
+                    <SelectTrigger size="sm">
+                        <SelectValue placeholder="Select Group" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectGroup>
+                            <SelectItem :value="WORLD_EXPORT_NONE_VALUE">None</SelectItem>
+                            <SelectItem v-for="group in localWorldFavoriteGroups" :key="group" :value="group">
+                                {{ group }} ({{ localWorldFavorites[group].length }})
+                            </SelectItem>
+                        </SelectGroup>
+                    </SelectContent>
+                </Select>
+            </div>
 
-        <InputGroupTextareaField
-            v-model="worldExportContent"
-            :rows="15"
-            readonly
-            style="margin-top: 15px"
-            input-class="resize-none"
-            @click="handleCopyWorldExportData" />
-    </el-dialog>
+            <br />
+
+            <InputGroupTextareaField
+                v-model="worldExportContent"
+                :rows="15"
+                readonly
+                style="margin-top: 15px"
+                input-class="resize-none"
+                @click="handleCopyWorldExportData" />
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
     import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { computed, ref, watch } from 'vue';
     import { Checkbox } from '@/components/ui/checkbox';
     import { InputGroupTextareaField } from '@/components/ui/input-group';
diff --git a/src/views/Favorites/dialogs/WorldImportDialog.vue b/src/views/Favorites/dialogs/WorldImportDialog.vue
index 1204bc8b..87fec2e2 100644
--- a/src/views/Favorites/dialogs/WorldImportDialog.vue
+++ b/src/views/Favorites/dialogs/WorldImportDialog.vue
@@ -1,125 +1,126 @@
 <template>
-    <el-dialog
-        :z-index="worldImportDialogIndex"
-        v-model="isVisible"
-        :title="t('dialog.world_import.header')"
-        width="650px"
-        class="x-dialog">
-        <div style="display: flex; align-items: center; justify-content: space-between">
-            <div style="font-size: 12px">{{ t('dialog.world_import.description') }}</div>
-            <div style="display: flex; align-items: center">
-                <div v-if="worldImportDialog.progress">
-                    {{ t('dialog.world_import.process_progress') }}
-                    {{ worldImportDialog.progress }} / {{ worldImportDialog.progressTotal }}
-                    <Loader2 style="margin: 0 5px" />
+    <Dialog v-model:open="isVisible">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.world_import.header') }}</DialogTitle>
+            </DialogHeader>
+            <div style="display: flex; align-items: center; justify-content: space-between">
+                <div style="font-size: 12px">{{ t('dialog.world_import.description') }}</div>
+                <div style="display: flex; align-items: center">
+                    <div v-if="worldImportDialog.progress">
+                        {{ t('dialog.world_import.process_progress') }}
+                        {{ worldImportDialog.progress }} / {{ worldImportDialog.progressTotal }}
+                        <Loader2 style="margin: 0 5px" />
+                    </div>
+                    <Button v-if="worldImportDialog.loading" size="sm" variant="outline" @click="cancelWorldImport">
+                        {{ t('dialog.world_import.cancel') }}
+                    </Button>
+                    <Button size="sm" v-else :disabled="!worldImportDialog.input" @click="processWorldImportList">
+                        {{ t('dialog.world_import.process_list') }}
+                    </Button>
                 </div>
-                <Button v-if="worldImportDialog.loading" size="sm" variant="outline" @click="cancelWorldImport">
-                    {{ t('dialog.world_import.cancel') }}
-                </Button>
-                <Button size="sm" v-else :disabled="!worldImportDialog.input" @click="processWorldImportList">
-                    {{ t('dialog.world_import.process_list') }}
-                </Button>
             </div>
-        </div>
-        <InputGroupTextareaField
-            v-model="worldImportDialog.input"
-            :rows="10"
-            style="margin-top: 10px"
-            input-class="resize-none" />
-        <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 5px">
-            <div>
-                <div class="flex items-center gap-2">
-                    <Select
-                        :model-value="worldImportFavoriteGroupSelection"
-                        @update:modelValue="handleWorldImportGroupSelect">
-                        <SelectTrigger size="sm">
-                            <SelectValue :placeholder="t('dialog.world_import.select_vrchat_group_placeholder')" />
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectGroup>
-                                <SelectItem
-                                    v-for="groupAPI in favoriteWorldGroups"
-                                    :key="groupAPI.name"
-                                    :value="groupAPI.name"
-                                    :disabled="groupAPI.count >= groupAPI.capacity">
-                                    {{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
-                                </SelectItem>
-                            </SelectGroup>
-                        </SelectContent>
-                    </Select>
+            <InputGroupTextareaField
+                v-model="worldImportDialog.input"
+                :rows="10"
+                style="margin-top: 10px"
+                input-class="resize-none" />
+            <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 5px">
+                <div>
+                    <div class="flex items-center gap-2">
+                        <Select
+                            :model-value="worldImportFavoriteGroupSelection"
+                            @update:modelValue="handleWorldImportGroupSelect">
+                            <SelectTrigger size="sm">
+                                <SelectValue :placeholder="t('dialog.world_import.select_vrchat_group_placeholder')" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectGroup>
+                                    <SelectItem
+                                        v-for="groupAPI in favoriteWorldGroups"
+                                        :key="groupAPI.name"
+                                        :value="groupAPI.name"
+                                        :disabled="groupAPI.count >= groupAPI.capacity">
+                                        {{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
+                                    </SelectItem>
+                                </SelectGroup>
+                            </SelectContent>
+                        </Select>
 
-                    <Select
-                        :model-value="worldImportLocalFavoriteGroupSelection"
-                        @update:modelValue="handleWorldImportLocalGroupSelect"
-                        style="margin-left: 10px">
-                        <SelectTrigger size="sm">
-                            <SelectValue :placeholder="t('dialog.world_import.select_local_group_placeholder')" />
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectGroup>
-                                <SelectItem v-for="group in localWorldFavoriteGroups" :key="group" :value="group">
-                                    {{ group }} ({{ localWorldFavGroupLength(group) }})
-                                </SelectItem>
-                            </SelectGroup>
-                        </SelectContent>
-                    </Select>
+                        <Select
+                            :model-value="worldImportLocalFavoriteGroupSelection"
+                            @update:modelValue="handleWorldImportLocalGroupSelect"
+                            style="margin-left: 10px">
+                            <SelectTrigger size="sm">
+                                <SelectValue :placeholder="t('dialog.world_import.select_local_group_placeholder')" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectGroup>
+                                    <SelectItem v-for="group in localWorldFavoriteGroups" :key="group" :value="group">
+                                        {{ group }} ({{ localWorldFavGroupLength(group) }})
+                                    </SelectItem>
+                                </SelectGroup>
+                            </SelectContent>
+                        </Select>
+                    </div>
+                    <span v-if="worldImportDialog.worldImportFavoriteGroup" style="margin-left: 5px">
+                        {{ worldImportTable.data.length }} /
+                        {{
+                            worldImportDialog.worldImportFavoriteGroup.capacity -
+                            worldImportDialog.worldImportFavoriteGroup.count
+                        }}
+                    </span>
+                </div>
+                <div>
+                    <Button
+                        size="sm"
+                        variant="secondary"
+                        class="mr-2"
+                        :disabled="worldImportTable.data.length === 0"
+                        @click="clearWorldImportTable">
+                        {{ t('dialog.world_import.clear_table') }}
+                    </Button>
+                    <Button
+                        size="sm"
+                        :disabled="
+                            worldImportTable.data.length === 0 ||
+                            (!worldImportDialog.worldImportFavoriteGroup &&
+                                !worldImportDialog.worldImportLocalFavoriteGroup)
+                        "
+                        @click="importWorldImportTable">
+                        {{ t('dialog.world_import.import') }}
+                    </Button>
                 </div>
-                <span v-if="worldImportDialog.worldImportFavoriteGroup" style="margin-left: 5px">
-                    {{ worldImportTable.data.length }} /
-                    {{
-                        worldImportDialog.worldImportFavoriteGroup.capacity -
-                        worldImportDialog.worldImportFavoriteGroup.count
-                    }}
-                </span>
             </div>
-            <div>
-                <Button
-                    size="sm"
-                    variant="secondary"
-                    class="mr-2"
-                    :disabled="worldImportTable.data.length === 0"
-                    @click="clearWorldImportTable">
-                    {{ t('dialog.world_import.clear_table') }}
+            <span v-if="worldImportDialog.importProgress" style="margin: 10px">
+                <Loader2 style="margin-right: 5px" />
+                {{ t('dialog.world_import.import_progress') }}
+                {{ worldImportDialog.importProgress }}/{{ worldImportDialog.importProgressTotal }}
+            </span>
+            <br />
+            <template v-if="worldImportDialog.errors">
+                <Button size="sm" variant="secondary" @click="worldImportDialog.errors = ''">
+                    {{ t('dialog.world_import.clear_errors') }}
                 </Button>
-                <Button
-                    size="sm"
-                    :disabled="
-                        worldImportTable.data.length === 0 ||
-                        (!worldImportDialog.worldImportFavoriteGroup &&
-                            !worldImportDialog.worldImportLocalFavoriteGroup)
-                    "
-                    @click="importWorldImportTable">
-                    {{ t('dialog.world_import.import') }}
-                </Button>
-            </div>
-        </div>
-        <span v-if="worldImportDialog.importProgress" style="margin: 10px">
-            <Loader2 style="margin-right: 5px" />
-            {{ t('dialog.world_import.import_progress') }}
-            {{ worldImportDialog.importProgress }}/{{ worldImportDialog.importProgressTotal }}
-        </span>
-        <br />
-        <template v-if="worldImportDialog.errors">
-            <Button size="sm" variant="secondary" @click="worldImportDialog.errors = ''">
-                {{ t('dialog.world_import.clear_errors') }}
-            </Button>
-            <h2 style="font-weight: bold; margin: 5px 0">
-                {{ t('dialog.world_import.errors') }}
-            </h2>
-            <pre style="white-space: pre-wrap; font-size: 12px" v-text="worldImportDialog.errors"></pre>
-        </template>
-        <DataTableLayout
-            class="min-w-0 w-full"
-            :table="table"
-            :loading="worldImportDialog.loading"
-            :table-style="tableStyle"
-            :show-pagination="false"
-            style="margin-top: 10px" />
-    </el-dialog>
+                <h2 style="font-weight: bold; margin: 5px 0">
+                    {{ t('dialog.world_import.errors') }}
+                </h2>
+                <pre style="white-space: pre-wrap; font-size: 12px" v-text="worldImportDialog.errors"></pre>
+            </template>
+            <DataTableLayout
+                class="min-w-0 w-full"
+                :table="table"
+                :loading="worldImportDialog.loading"
+                :table-style="tableStyle"
+                :show-pagination="false"
+                style="margin-top: 10px" />
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
     import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { computed, ref, watch } from 'vue';
     import { Button } from '@/components/ui/button';
     import { DataTableLayout } from '@/components/ui/data-table';
@@ -132,7 +133,6 @@
     import { useFavoriteStore, useGalleryStore, useUserStore, useWorldStore } from '../../../stores';
     import { favoriteRequest, worldRequest } from '../../../api';
     import { createColumns } from './worldImportColumns.jsx';
-    import { getNextDialogIndex } from '../../../shared/utils/base/ui';
     import { removeFromArray } from '../../../shared/utils';
     import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
 
@@ -147,8 +147,6 @@
 
     const { t } = useI18n();
 
-    const worldImportDialogIndex = ref(2000);
-
     const worldImportDialog = ref({
         loading: false,
         progress: 0,
@@ -211,7 +209,6 @@
         () => worldImportDialogVisible.value,
         (visible) => {
             if (visible) {
-                worldImportDialogIndex.value = getNextDialogIndex();
                 clearWorldImportTable();
                 resetWorldImport();
                 if (worldImportDialogInput.value) {
diff --git a/src/views/FriendList/FriendList.vue b/src/views/FriendList/FriendList.vue
index 55bfe011..6c82b339 100644
--- a/src/views/FriendList/FriendList.vue
+++ b/src/views/FriendList/FriendList.vue
@@ -78,34 +78,37 @@
                     </div>
                 </template>
             </DataTableLayout>
-            <el-dialog
-                v-model="friendsListLoadDialogVisible"
-                :title="t('view.friend_list.load_dialog_title')"
-                width="420px"
-                :close-on-click-modal="false"
-                :close-on-press-escape="false"
-                :show-close="false"
-                align-center>
-                <div style="margin-bottom: 10px" v-text="t('view.friend_list.load_dialog_message')"></div>
-                <div class="flex items-center gap-2">
-                    <Progress :model-value="friendsListLoadingPercent" class="h-4 w-full" />
-                    <span class="text-xs w-10 text-right">{{ friendsListLoadingPercent }}%</span>
-                </div>
-                <div style="margin-top: 10px; text-align: right">
-                    <span>{{ friendsListLoadingCurrent }} / {{ friendsListLoadingTotal }}</span>
-                </div>
-                <template #footer>
-                    <Button variant="secondary" @click="cancelFriendsListLoad">
-                        {{ t('view.friend_list.load_cancel') }}
-                    </Button>
-                </template>
-            </el-dialog>
+            <Dialog v-model:open="friendsListLoadDialogVisible">
+                <DialogContent
+                    :show-close-button="false"
+                    @interact-outside.prevent
+                    @escape-key-down.prevent
+                    class="sm:max-w-[420px]">
+                    <DialogHeader>
+                        <DialogTitle>{{ t('view.friend_list.load_dialog_title') }}</DialogTitle>
+                    </DialogHeader>
+                    <div style="margin-bottom: 10px" v-text="t('view.friend_list.load_dialog_message')"></div>
+                    <div class="flex items-center gap-2">
+                        <Progress :model-value="friendsListLoadingPercent" class="h-4 w-full" />
+                        <span class="text-xs w-10 text-right">{{ friendsListLoadingPercent }}%</span>
+                    </div>
+                    <div style="margin-top: 10px; text-align: right">
+                        <span>{{ friendsListLoadingCurrent }} / {{ friendsListLoadingTotal }}</span>
+                    </div>
+                    <DialogFooter>
+                        <Button variant="secondary" @click="cancelFriendsListLoad">
+                            {{ t('view.friend_list.load_cancel') }}
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
         </div>
     </div>
 </template>
 
 <script setup>
     import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { computed, nextTick, ref, watch } from 'vue';
     import { Button } from '@/components/ui/button';
     import { InputGroupField } from '@/components/ui/input-group';
diff --git a/src/views/Notifications/dialogs/EditAndSendInviteResponseDialog.vue b/src/views/Notifications/dialogs/EditAndSendInviteResponseDialog.vue
index 927f895b..6ae2bc3b 100644
--- a/src/views/Notifications/dialogs/EditAndSendInviteResponseDialog.vue
+++ b/src/views/Notifications/dialogs/EditAndSendInviteResponseDialog.vue
@@ -1,33 +1,37 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        :model-value="editAndSendInviteResponseDialog.visible"
-        @close="cancelEditAndSendInviteResponse"
-        :title="t('dialog.edit_send_invite_response_message.header')"
-        width="400px"
-        append-to-body>
-        <div style="font-size: 12px">
-            <span>{{ t('dialog.edit_send_invite_response_message.description') }}</span>
-        </div>
-        <InputGroupTextareaField
-            v-model="editAndSendInviteResponseDialog.newMessage"
-            :maxlength="64"
-            :rows="2"
-            class="mt-2.5"
-            placeholder=""
-            show-count />
-        <template #footer>
-            <Button variant="secondary" class="mr-2" @click="cancelEditAndSendInviteResponse">{{
-                t('dialog.edit_send_invite_response_message.cancel')
-            }}</Button>
-            <Button @click="saveEditAndSendInviteResponse" :disabled="!editAndSendInviteResponseDialog.newMessage">{{
-                t('dialog.edit_send_invite_response_message.send')
-            }}</Button>
-        </template>
-    </el-dialog>
+    <Dialog
+        :open="editAndSendInviteResponseDialog.visible"
+        @update:open="(open) => (open ? null : cancelEditAndSendInviteResponse())">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.edit_send_invite_response_message.header') }}</DialogTitle>
+            </DialogHeader>
+            <div style="font-size: 12px">
+                <span>{{ t('dialog.edit_send_invite_response_message.description') }}</span>
+            </div>
+            <InputGroupTextareaField
+                v-model="editAndSendInviteResponseDialog.newMessage"
+                :maxlength="64"
+                :rows="2"
+                class="mt-2.5"
+                placeholder=""
+                show-count />
+            <DialogFooter>
+                <Button variant="secondary" class="mr-2" @click="cancelEditAndSendInviteResponse">{{
+                    t('dialog.edit_send_invite_response_message.cancel')
+                }}</Button>
+                <Button
+                    @click="saveEditAndSendInviteResponse"
+                    :disabled="!editAndSendInviteResponseDialog.newMessage"
+                    >{{ t('dialog.edit_send_invite_response_message.send') }}</Button
+                >
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { Button } from '@/components/ui/button';
     import { InputGroupTextareaField } from '@/components/ui/input-group';
     import { storeToRefs } from 'pinia';
diff --git a/src/views/Notifications/dialogs/SendInviteRequestResponseDialog.vue b/src/views/Notifications/dialogs/SendInviteRequestResponseDialog.vue
index 7aa88188..9cc15301 100644
--- a/src/views/Notifications/dialogs/SendInviteRequestResponseDialog.vue
+++ b/src/views/Notifications/dialogs/SendInviteRequestResponseDialog.vue
@@ -1,44 +1,46 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        :model-value="sendInviteRequestResponseDialogVisible"
-        :title="t('dialog.invite_request_response_message.header')"
-        width="800px"
-        append-to-body
-        @close="cancelSendInviteRequestResponse">
-        <template v-if="isLocalUserVrcPlusSupporter">
-            <input class="inviteImageUploadButton" type="file" accept="image/*" @change="inviteImageUpload" />
-        </template>
+    <Dialog
+        :open="sendInviteRequestResponseDialogVisible"
+        @update:open="(open) => (open ? null : cancelSendInviteRequestResponse())">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.invite_request_response_message.header') }}</DialogTitle>
+            </DialogHeader>
+            <template v-if="isLocalUserVrcPlusSupporter">
+                <input class="inviteImageUploadButton" type="file" accept="image/*" @change="inviteImageUpload" />
+            </template>
 
-        <DataTableLayout
-            style="margin-top: 10px"
-            :table="inviteRequestResponseTable"
-            :loading="false"
-            :show-pagination="false"
-            :on-row-click="handleInviteRequestResponseRowClick" />
+            <DataTableLayout
+                style="margin-top: 10px"
+                :table="inviteRequestResponseTable"
+                :loading="false"
+                :show-pagination="false"
+                :on-row-click="handleInviteRequestResponseRowClick" />
 
-        <template #footer>
-            <Button variant="secondary" class="mr-2" @click="cancelSendInviteRequestResponse">
-                {{ t('dialog.invite_request_response_message.cancel') }}
-            </Button>
-            <Button @click="refreshInviteMessageTableData('requestResponse')">
-                {{ t('dialog.invite_request_response_message.refresh') }}
-            </Button>
-        </template>
-        <EditAndSendInviteResponseDialog
-            :edit-and-send-invite-response-dialog="editAndSendInviteResponseDialog"
-            :send-invite-response-dialog="sendInviteResponseDialog"
-            @closeInviteDialog="closeInviteDialog"
-            @closeResponseConfirmDialog="closeResponseConfirmDialog" />
-        <SendInviteResponseConfirmDialog
-            :send-invite-response-dialog="sendInviteResponseDialog"
-            :send-invite-response-confirm-dialog="sendInviteResponseConfirmDialog"
-            @closeInviteDialog="closeInviteDialog"
-            @closeResponseConfirmDialog="closeResponseConfirmDialog" />
-    </el-dialog>
+            <DialogFooter>
+                <Button variant="secondary" class="mr-2" @click="cancelSendInviteRequestResponse">
+                    {{ t('dialog.invite_request_response_message.cancel') }}
+                </Button>
+                <Button @click="refreshInviteMessageTableData('requestResponse')">
+                    {{ t('dialog.invite_request_response_message.refresh') }}
+                </Button>
+            </DialogFooter>
+            <EditAndSendInviteResponseDialog
+                :edit-and-send-invite-response-dialog="editAndSendInviteResponseDialog"
+                :send-invite-response-dialog="sendInviteResponseDialog"
+                @closeInviteDialog="closeInviteDialog"
+                @closeResponseConfirmDialog="closeResponseConfirmDialog" />
+            <SendInviteResponseConfirmDialog
+                :send-invite-response-dialog="sendInviteResponseDialog"
+                :send-invite-response-confirm-dialog="sendInviteResponseConfirmDialog"
+                @closeInviteDialog="closeInviteDialog"
+                @closeResponseConfirmDialog="closeResponseConfirmDialog" />
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { computed, ref } from 'vue';
     import { Button } from '@/components/ui/button';
     import { DataTableLayout } from '@/components/ui/data-table';
diff --git a/src/views/Notifications/dialogs/SendInviteResponseConfirmDialog.vue b/src/views/Notifications/dialogs/SendInviteResponseConfirmDialog.vue
index d9620c07..e253f628 100644
--- a/src/views/Notifications/dialogs/SendInviteResponseConfirmDialog.vue
+++ b/src/views/Notifications/dialogs/SendInviteResponseConfirmDialog.vue
@@ -1,25 +1,27 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        :model-value="sendInviteResponseConfirmDialog.visible"
-        :title="t('dialog.invite_response_message.header')"
-        width="400px"
-        append-to-body
-        @close="cancelInviteResponseConfirm">
-        <div style="font-size: 12px">
-            <span>{{ t('dialog.invite_response_message.confirmation') }}</span>
-        </div>
+    <Dialog
+        :open="sendInviteResponseConfirmDialog.visible"
+        @update:open="(open) => (open ? null : cancelInviteResponseConfirm())">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.invite_response_message.header') }}</DialogTitle>
+            </DialogHeader>
+            <div style="font-size: 12px">
+                <span>{{ t('dialog.invite_response_message.confirmation') }}</span>
+            </div>
 
-        <template #footer>
-            <Button variant="secondary" class="mr-2" @click="cancelInviteResponseConfirm">{{
-                t('dialog.invite_response_message.cancel')
-            }}</Button>
-            <Button @click="sendInviteResponseConfirm">{{ t('dialog.invite_response_message.confirm') }}</Button>
-        </template>
-    </el-dialog>
+            <DialogFooter>
+                <Button variant="secondary" class="mr-2" @click="cancelInviteResponseConfirm">{{
+                    t('dialog.invite_response_message.cancel')
+                }}</Button>
+                <Button @click="sendInviteResponseConfirm">{{ t('dialog.invite_response_message.confirm') }}</Button>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
diff --git a/src/views/Notifications/dialogs/SendInviteResponseDialog.vue b/src/views/Notifications/dialogs/SendInviteResponseDialog.vue
index 647587d6..f933e818 100644
--- a/src/views/Notifications/dialogs/SendInviteResponseDialog.vue
+++ b/src/views/Notifications/dialogs/SendInviteResponseDialog.vue
@@ -1,44 +1,44 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        :model-value="sendInviteResponseDialogVisible"
-        :title="t('dialog.invite_response_message.header')"
-        width="800px"
-        append-to-body
-        @close="cancelSendInviteResponse">
-        <template v-if="isLocalUserVrcPlusSupporter">
-            <input class="inviteImageUploadButton" type="file" accept="image/*" @change="inviteImageUpload" />
-        </template>
+    <Dialog :open="sendInviteResponseDialogVisible" @update:open="(open) => (open ? null : cancelSendInviteResponse())">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.invite_response_message.header') }}</DialogTitle>
+            </DialogHeader>
+            <template v-if="isLocalUserVrcPlusSupporter">
+                <input class="inviteImageUploadButton" type="file" accept="image/*" @change="inviteImageUpload" />
+            </template>
 
-        <DataTableLayout
-            style="margin-top: 10px"
-            :table="inviteResponseTable"
-            :loading="false"
-            :show-pagination="false"
-            :on-row-click="handleInviteResponseRowClick" />
+            <DataTableLayout
+                style="margin-top: 10px"
+                :table="inviteResponseTable"
+                :loading="false"
+                :show-pagination="false"
+                :on-row-click="handleInviteResponseRowClick" />
 
-        <template #footer>
-            <Button variant="secondary" class="mr-2" @click="cancelSendInviteResponse">{{
-                t('dialog.invite_response_message.cancel')
-            }}</Button>
-            <Button @click="refreshInviteMessageTableData('response')">{{
-                t('dialog.invite_response_message.refresh')
-            }}</Button>
-        </template>
-        <EditAndSendInviteResponseDialog
-            :edit-and-send-invite-response-dialog="editAndSendInviteResponseDialog"
-            :send-invite-response-dialog="sendInviteResponseDialog"
-            @closeResponseConfirmDialog="closeResponseConfirmDialog"
-            @closeInviteDialog="closeInviteDialog" />
-        <SendInviteResponseConfirmDialog
-            :send-invite-response-dialog="sendInviteResponseDialog"
-            :send-invite-response-confirm-dialog="sendInviteResponseConfirmDialog"
-            @closeResponseConfirmDialog="closeResponseConfirmDialog"
-            @closeInviteDialog="closeInviteDialog" />
-    </el-dialog>
+            <DialogFooter>
+                <Button variant="secondary" class="mr-2" @click="cancelSendInviteResponse">{{
+                    t('dialog.invite_response_message.cancel')
+                }}</Button>
+                <Button @click="refreshInviteMessageTableData('response')">{{
+                    t('dialog.invite_response_message.refresh')
+                }}</Button>
+            </DialogFooter>
+            <EditAndSendInviteResponseDialog
+                :edit-and-send-invite-response-dialog="editAndSendInviteResponseDialog"
+                :send-invite-response-dialog="sendInviteResponseDialog"
+                @closeResponseConfirmDialog="closeResponseConfirmDialog"
+                @closeInviteDialog="closeInviteDialog" />
+            <SendInviteResponseConfirmDialog
+                :send-invite-response-dialog="sendInviteResponseDialog"
+                :send-invite-response-confirm-dialog="sendInviteResponseConfirmDialog"
+                @closeResponseConfirmDialog="closeResponseConfirmDialog"
+                @closeInviteDialog="closeInviteDialog" />
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { computed, ref } from 'vue';
     import { Button } from '@/components/ui/button';
     import { DataTableLayout } from '@/components/ui/data-table';
diff --git a/src/views/PlayerList/dialogs/ChatboxBlacklistDialog.vue b/src/views/PlayerList/dialogs/ChatboxBlacklistDialog.vue
index c6e807ee..f7f8ff05 100644
--- a/src/views/PlayerList/dialogs/ChatboxBlacklistDialog.vue
+++ b/src/views/PlayerList/dialogs/ChatboxBlacklistDialog.vue
@@ -1,60 +1,62 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        v-model="chatboxBlacklistDialog.visible"
-        :title="t('dialog.chatbox_blacklist.header')"
-        width="600px">
-        <div v-if="chatboxBlacklistDialog.visible" v-loading="chatboxBlacklistDialog.loading">
-            <h2>{{ t('dialog.chatbox_blacklist.keyword_blacklist') }}</h2>
-            <InputGroupAction
-                v-for="(item, index) in chatboxBlacklist"
-                :key="index"
-                v-model="chatboxBlacklist[index]"
-                size="sm"
-                style="margin-top: 5px"
-                @change="saveChatboxBlacklist">
-                <template #actions>
-                    <Button
-                        variant="outline"
-                        @click="
-                            chatboxBlacklist.splice(index, 1);
-                            saveChatboxBlacklist();
-                        ">
-                    </Button>
-                </template>
-            </InputGroupAction>
-            <Button size="sm" variant="outline" style="margin-top: 5px" @click="chatboxBlacklist.push('')">
-                {{ t('dialog.chatbox_blacklist.add_item') }}
-            </Button>
-            <br />
-            <h2>{{ t('dialog.chatbox_blacklist.user_blacklist') }}</h2>
-            <Badge
-                v-for="user in chatboxUserBlacklist"
-                :key="user[0]"
-                variant="outline"
-                style="margin-right: 5px; margin-top: 5px">
-                <span>{{ user[1] }}</span>
-                <button
-                    type="button"
-                    style="
-                        margin-left: 6px;
-                        border: none;
-                        background: transparent;
-                        padding: 0;
-                        display: inline-flex;
-                        align-items: center;
-                        color: inherit;
-                        cursor: pointer;
-                    "
-                    @click="deleteChatboxUserBlacklist(user[0])">
-                    <X class="h-3 w-3" style="line-height: 1" />
-                </button>
-            </Badge>
-        </div>
-    </el-dialog>
+    <Dialog v-model:open="chatboxBlacklistDialog.visible">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.chatbox_blacklist.header') }}</DialogTitle>
+            </DialogHeader>
+            <div v-if="chatboxBlacklistDialog.visible" v-loading="chatboxBlacklistDialog.loading">
+                <h2>{{ t('dialog.chatbox_blacklist.keyword_blacklist') }}</h2>
+                <InputGroupAction
+                    v-for="(item, index) in chatboxBlacklist"
+                    :key="index"
+                    v-model="chatboxBlacklist[index]"
+                    size="sm"
+                    style="margin-top: 5px"
+                    @change="saveChatboxBlacklist">
+                    <template #actions>
+                        <Button
+                            variant="outline"
+                            @click="
+                                chatboxBlacklist.splice(index, 1);
+                                saveChatboxBlacklist();
+                            ">
+                        </Button>
+                    </template>
+                </InputGroupAction>
+                <Button size="sm" variant="outline" style="margin-top: 5px" @click="chatboxBlacklist.push('')">
+                    {{ t('dialog.chatbox_blacklist.add_item') }}
+                </Button>
+                <br />
+                <h2>{{ t('dialog.chatbox_blacklist.user_blacklist') }}</h2>
+                <Badge
+                    v-for="user in chatboxUserBlacklist"
+                    :key="user[0]"
+                    variant="outline"
+                    style="margin-right: 5px; margin-top: 5px">
+                    <span>{{ user[1] }}</span>
+                    <button
+                        type="button"
+                        style="
+                            margin-left: 6px;
+                            border: none;
+                            background: transparent;
+                            padding: 0;
+                            display: inline-flex;
+                            align-items: center;
+                            color: inherit;
+                            cursor: pointer;
+                        "
+                        @click="deleteChatboxUserBlacklist(user[0])">
+                        <X class="h-3 w-3" style="line-height: 1" />
+                    </button>
+                </Badge>
+            </div>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { Button } from '@/components/ui/button';
     import { InputGroupAction } from '@/components/ui/input-group';
     import { X } from 'lucide-vue-next';
diff --git a/src/views/Settings/dialogs/AvatarProviderDialog.vue b/src/views/Settings/dialogs/AvatarProviderDialog.vue
index 6f664415..92788003 100644
--- a/src/views/Settings/dialogs/AvatarProviderDialog.vue
+++ b/src/views/Settings/dialogs/AvatarProviderDialog.vue
@@ -1,33 +1,34 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        :model-value="isAvatarProviderDialogVisible"
-        :title="t('dialog.avatar_database_provider.header')"
-        width="600px"
-        @close="closeDialog">
-        <div>
-            <InputGroupAction
-                v-for="(provider, index) in avatarRemoteDatabaseProviderList"
-                :key="index"
-                v-model="avatarRemoteDatabaseProviderList[index]"
-                size="sm"
-                style="margin-top: 5px"
-                @change="saveAvatarProviderList">
-                <template #actions>
-                    <Button variant="outline" size="icon" @click="removeAvatarProvider(provider)">
-                        <Trash2 />
-                    </Button>
-                </template>
-            </InputGroupAction>
+    <Dialog :open="isAvatarProviderDialogVisible" @update:open="(open) => (open ? null : closeDialog())">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.avatar_database_provider.header') }}</DialogTitle>
+            </DialogHeader>
+            <div>
+                <InputGroupAction
+                    v-for="(provider, index) in avatarRemoteDatabaseProviderList"
+                    :key="index"
+                    v-model="avatarRemoteDatabaseProviderList[index]"
+                    size="sm"
+                    style="margin-top: 5px"
+                    @change="saveAvatarProviderList">
+                    <template #actions>
+                        <Button variant="outline" size="icon" @click="removeAvatarProvider(provider)">
+                            <Trash2 />
+                        </Button>
+                    </template>
+                </InputGroupAction>
 
-            <Button size="sm" style="margin-top: 5px" @click="avatarRemoteDatabaseProviderList.push('')">
-                {{ t('dialog.avatar_database_provider.add_provider') }}
-            </Button>
-        </div>
-    </el-dialog>
+                <Button size="sm" style="margin-top: 5px" @click="avatarRemoteDatabaseProviderList.push('')">
+                    {{ t('dialog.avatar_database_provider.add_provider') }}
+                </Button>
+            </div>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { Button } from '@/components/ui/button';
     import { InputGroupAction } from '@/components/ui/input-group';
     import { Trash2 } from 'lucide-vue-next';
diff --git a/src/views/Settings/dialogs/ChangelogDialog.vue b/src/views/Settings/dialogs/ChangelogDialog.vue
index a00aec96..d9385b79 100644
--- a/src/views/Settings/dialogs/ChangelogDialog.vue
+++ b/src/views/Settings/dialogs/ChangelogDialog.vue
@@ -1,43 +1,43 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        :model-value="changeLogDialog.visible"
-        :title="t('dialog.change_log.header')"
-        width="800px"
-        append-to-body
-        @close="closeDialog">
-        <div v-loading="!changeLogDialog.changeLog" class="changelog-dialog">
-            <h2 v-text="changeLogDialog.buildName"></h2>
-            <span v-show="changeLogDialog.buildName">
-                {{ t('dialog.change_log.description') }}
-                <a class="x-link" @click="openExternalLink('https://www.patreon.com/Natsumi_VRCX')">Patreon</a>,
-                <a class="x-link" @click="openExternalLink('https://ko-fi.com/natsumi_sama')">Ko-fi</a>.
-            </span>
-            <VueShowdown
-                :markdown="changeLogDialog.changeLog"
-                flavor="github"
-                :options="showdownOptions"
-                @click="handleLinkClick"
-                style="height: 62vh; overflow-y: auto; margin-top: 10px" />
-        </div>
-        <template #footer>
-            <Button
-                variant="ghost"
-                class="mr-2"
-                @click="openExternalLink('https://github.com/vrcx-team/VRCX/releases')">
-                {{ t('dialog.change_log.github') }}
-            </Button>
-            <Button variant="outline" class="mr-2" @click="openExternalLink('https://patreon.com/Natsumi_VRCX')">
-                {{ t('dialog.change_log.donate') }}
-            </Button>
-            <Button @click="closeDialog">
-                {{ t('dialog.change_log.close') }}
-            </Button>
-        </template>
-    </el-dialog>
+    <Dialog v-model:open="changeLogDialog.visible">
+        <DialogContent class="sm:max-w-4xl">
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.change_log.header') }}</DialogTitle>
+            </DialogHeader>
+            <div v-loading="!changeLogDialog.changeLog" class="changelog-dialog">
+                <h2 v-text="changeLogDialog.buildName"></h2>
+                <span v-show="changeLogDialog.buildName">
+                    {{ t('dialog.change_log.description') }}
+                    <a class="x-link" @click="openExternalLink('https://www.patreon.com/Natsumi_VRCX')">Patreon</a>,
+                    <a class="x-link" @click="openExternalLink('https://ko-fi.com/natsumi_sama')">Ko-fi</a>.
+                </span>
+                <VueShowdown
+                    :markdown="changeLogDialog.changeLog"
+                    flavor="github"
+                    :options="showdownOptions"
+                    @click="handleLinkClick"
+                    style="height: 62vh; overflow-y: auto; margin-top: 10px" />
+            </div>
+            <DialogFooter>
+                <Button
+                    variant="ghost"
+                    class="mr-2"
+                    @click="openExternalLink('https://github.com/vrcx-team/VRCX/releases')">
+                    {{ t('dialog.change_log.github') }}
+                </Button>
+                <Button variant="outline" class="mr-2" @click="openExternalLink('https://patreon.com/Natsumi_VRCX')">
+                    {{ t('dialog.change_log.donate') }}
+                </Button>
+                <Button @click="closeDialog">
+                    {{ t('dialog.change_log.close') }}
+                </Button>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { Button } from '@/components/ui/button';
     import { defineAsyncComponent } from 'vue';
     import { storeToRefs } from 'pinia';
diff --git a/src/views/Settings/dialogs/FeedFiltersDialog.vue b/src/views/Settings/dialogs/FeedFiltersDialog.vue
index e4b30947..73826ad7 100644
--- a/src/views/Settings/dialogs/FeedFiltersDialog.vue
+++ b/src/views/Settings/dialogs/FeedFiltersDialog.vue
@@ -1,49 +1,23 @@
 <template>
-    <el-dialog
-        :model-value="!!feedFiltersDialogMode"
-        :title="dialogTitle"
-        width="600px"
-        destroy-on-close
-        @close="handleDialogClose">
-        <div class="toggle-list" style="height: 75vh; overflow-y: auto">
-            <div v-for="setting in currentOptions" :key="setting.key" class="toggle-item">
-                <span class="toggle-name"
-                    >{{ setting.name
-                    }}<TooltipWrapper
-                        v-if="setting.tooltip"
-                        side="top"
-                        style="margin-left: 5px"
-                        :content="setting.tooltip">
-                        <AlertTriangle v-if="setting.tooltipWarning" />
-                        <Info v-else />
-                    </TooltipWrapper>
-                </span>
+    <Dialog :open="!!feedFiltersDialogMode" @update:open="(open) => !open && handleDialogClose()">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>{{ dialogTitle }}</DialogTitle>
+            </DialogHeader>
+            <div class="toggle-list" style="height: 75vh; overflow-y: auto">
+                <div v-for="setting in currentOptions" :key="setting.key" class="toggle-item">
+                    <span class="toggle-name"
+                        >{{ setting.name
+                        }}<TooltipWrapper
+                            v-if="setting.tooltip"
+                            side="top"
+                            style="margin-left: 5px"
+                            :content="setting.tooltip">
+                            <AlertTriangle v-if="setting.tooltipWarning" />
+                            <Info v-else />
+                        </TooltipWrapper>
+                    </span>
 
-                <ToggleGroup
-                    type="single"
-                    required
-                    variant="outline"
-                    size="sm"
-                    :model-value="currentSharedFeedFilters[setting.key]"
-                    @update:model-value="
-                        (value) => {
-                            currentSharedFeedFilters[setting.key] = value;
-                            saveSharedFeedFilters();
-                        }
-                    ">
-                    <ToggleGroupItem v-for="option in setting.options" :key="option.label" :value="option.label">
-                        {{ t(option.textKey) }}
-                    </ToggleGroupItem>
-                </ToggleGroup>
-            </div>
-
-            <template v-if="photonLoggingEnabled">
-                <br />
-                <div class="toggle-item">
-                    <span class="toggle-name">Photon Event Logging</span>
-                </div>
-                <div v-for="setting in photonFeedFiltersOptions" :key="setting.key" class="toggle-item">
-                    <span class="toggle-name">{{ setting.name }}</span>
                     <ToggleGroup
                         type="single"
                         required
@@ -61,22 +35,52 @@
                         </ToggleGroupItem>
                     </ToggleGroup>
                 </div>
-            </template>
-        </div>
 
-        <template #footer>
-            <Button variant="secondary" @click="currentResetFunction">{{
-                t('dialog.shared_feed_filters.reset')
-            }}</Button>
-            <Button style="margin-left: 10px" @click="handleDialogClose">{{
-                t('dialog.shared_feed_filters.close')
-            }}</Button>
-        </template>
-    </el-dialog>
+                <template v-if="photonLoggingEnabled">
+                    <br />
+                    <div class="toggle-item">
+                        <span class="toggle-name">Photon Event Logging</span>
+                    </div>
+                    <div v-for="setting in photonFeedFiltersOptions" :key="setting.key" class="toggle-item">
+                        <span class="toggle-name">{{ setting.name }}</span>
+                        <ToggleGroup
+                            type="single"
+                            required
+                            variant="outline"
+                            size="sm"
+                            :model-value="currentSharedFeedFilters[setting.key]"
+                            @update:model-value="
+                                (value) => {
+                                    currentSharedFeedFilters[setting.key] = value;
+                                    saveSharedFeedFilters();
+                                }
+                            ">
+                            <ToggleGroupItem
+                                v-for="option in setting.options"
+                                :key="option.label"
+                                :value="option.label">
+                                {{ t(option.textKey) }}
+                            </ToggleGroupItem>
+                        </ToggleGroup>
+                    </div>
+                </template>
+            </div>
+
+            <DialogFooter>
+                <Button variant="secondary" @click="currentResetFunction">{{
+                    t('dialog.shared_feed_filters.reset')
+                }}</Button>
+                <Button style="margin-left: 10px" @click="handleDialogClose">{{
+                    t('dialog.shared_feed_filters.close')
+                }}</Button>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
-    import { Info, AlertTriangle } from 'lucide-vue-next';
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+    import { AlertTriangle, Info } from 'lucide-vue-next';
     import { Button } from '@/components/ui/button';
     import { computed } from 'vue';
     import { storeToRefs } from 'pinia';
diff --git a/src/views/Settings/dialogs/LaunchOptionsDialog.vue b/src/views/Settings/dialogs/LaunchOptionsDialog.vue
index 8c9a8495..c2217493 100644
--- a/src/views/Settings/dialogs/LaunchOptionsDialog.vue
+++ b/src/views/Settings/dialogs/LaunchOptionsDialog.vue
@@ -1,63 +1,64 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        :model-value="isLaunchOptionsDialogVisible"
-        :title="t('dialog.launch_options.header')"
-        width="600px"
-        @close="closeDialog">
-        <div style="font-size: 12px">
-            {{ t('dialog.launch_options.description') }} <br />
-            {{ t('dialog.launch_options.example') }}
-            <Badge variant="outline"
-                >--fps=144 --enable-debug-gui --enable-sdk-log-levels --enable-udon-debug-logging
-            </Badge>
-        </div>
-
-        <InputGroupTextareaField
-            v-model="launchOptionsDialog.launchArguments"
-            :autosize="{ minRows: 2, maxRows: 5 }"
-            :rows="2"
-            placeholder=""
-            style="margin-top: 10px"
-            input-class="resize-none" />
-
-        <template v-if="!isLinux">
-            <div style="font-size: 12px; margin-top: 10px">
-                {{ t('dialog.launch_options.path_override') }}
+    <Dialog :open="isLaunchOptionsDialogVisible" @update:open="(open) => (open ? null : closeDialog())">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.launch_options.header') }}</DialogTitle>
+            </DialogHeader>
+            <div style="font-size: 12px">
+                {{ t('dialog.launch_options.description') }} <br />
+                {{ t('dialog.launch_options.example') }}
+                <Badge variant="outline"
+                    >--fps=144 --enable-debug-gui --enable-sdk-log-levels --enable-udon-debug-logging
+                </Badge>
             </div>
 
             <InputGroupTextareaField
-                v-model="launchOptionsDialog.vrcLaunchPathOverride"
-                placeholder="C:\Program Files (x86)\Steam\steamapps\common\VRChat"
-                :rows="1"
-                style="display: block; margin-top: 10px"
-                input-class="resize-none min-h-0" />
-        </template>
+                v-model="launchOptionsDialog.launchArguments"
+                :autosize="{ minRows: 2, maxRows: 5 }"
+                :rows="2"
+                placeholder=""
+                style="margin-top: 10px"
+                input-class="resize-none" />
 
-        <template #footer>
-            <div class="flex items-center justify-between">
-                <div>
-                    <Button
-                        variant="outline"
-                        class="mr-2"
-                        @click="openExternalLink('https://docs.vrchat.com/docs/launch-options')">
-                        {{ t('dialog.launch_options.vrchat_docs') }}
-                    </Button>
-                    <Button
-                        variant="outline"
-                        @click="openExternalLink('https://docs.unity3d.com/Manual/CommandLineArguments.html')">
-                        {{ t('dialog.launch_options.unity_manual') }}
+            <template v-if="!isLinux">
+                <div style="font-size: 12px; margin-top: 10px">
+                    {{ t('dialog.launch_options.path_override') }}
+                </div>
+
+                <InputGroupTextareaField
+                    v-model="launchOptionsDialog.vrcLaunchPathOverride"
+                    placeholder="C:\Program Files (x86)\Steam\steamapps\common\VRChat"
+                    :rows="1"
+                    style="display: block; margin-top: 10px"
+                    input-class="resize-none min-h-0" />
+            </template>
+
+            <DialogFooter>
+                <div class="flex items-center justify-between">
+                    <div>
+                        <Button
+                            variant="outline"
+                            class="mr-2"
+                            @click="openExternalLink('https://docs.vrchat.com/docs/launch-options')">
+                            {{ t('dialog.launch_options.vrchat_docs') }}
+                        </Button>
+                        <Button
+                            variant="outline"
+                            @click="openExternalLink('https://docs.unity3d.com/Manual/CommandLineArguments.html')">
+                            {{ t('dialog.launch_options.unity_manual') }}
+                        </Button>
+                    </div>
+                    <Button @click="updateLaunchOptions">
+                        {{ t('dialog.launch_options.save') }}
                     </Button>
                 </div>
-                <Button @click="updateLaunchOptions">
-                    {{ t('dialog.launch_options.save') }}
-                </Button>
-            </div>
-        </template>
-    </el-dialog>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { computed, ref } from 'vue';
     import { Button } from '@/components/ui/button';
     import { InputGroupTextareaField } from '@/components/ui/input-group';
diff --git a/src/views/Settings/dialogs/NotificationPositionDialog.vue b/src/views/Settings/dialogs/NotificationPositionDialog.vue
index f0a77b87..f47011fa 100644
--- a/src/views/Settings/dialogs/NotificationPositionDialog.vue
+++ b/src/views/Settings/dialogs/NotificationPositionDialog.vue
@@ -1,92 +1,93 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        :model-value="isNotificationPositionDialogVisible"
-        :title="t('dialog.notification_position.header')"
-        width="400px"
-        @close="closeDialog">
-        <div style="font-size: 12px">
-            {{ t('dialog.notification_position.description') }}
-        </div>
-        <div class="relative mx-auto mt-4 size-75">
-            <svg
-                version="1.1"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink"
-                x="0px"
-                y="0px"
-                viewBox="80 80 80 100"
-                style="margin-top: 24px"
-                xml:space="preserve"
-                class="absolute inset-0 size-full">
-                <path
-                    style="fill: black"
-                    d="M291.89,5A3.11,3.11,0,0,1,295,8.11V160.64a3.11,3.11,0,0,1-3.11,3.11H8.11A3.11,3.11,0,0,1,5,160.64V8.11A3.11,3.11,0,0,1,8.11,5H291.89m0-5H8.11A8.11,8.11,0,0,0,0,8.11V160.64a8.11,8.11,0,0,0,8.11,8.11H291.89a8.11,8.11,0,0,0,8.11-8.11V8.11A8.11,8.11,0,0,0,291.89,0Z" />
-                <rect style="fill: #c4c4c4" x="5" y="5" width="290" height="158.75" rx="2.5" />
-            </svg>
-            <RadioGroup
-                :model-value="notificationPosition"
-                class="absolute inset-0"
-                @update:modelValue="changeNotificationPosition">
-                <RadioGroupItem
-                    id="notificationPosition-topLeft"
-                    aria-label="topLeft"
-                    value="topLeft"
-                    class="absolute top-[20%] left-[10%] -translate-x-1/2 -translate-y-1/2" />
-                <RadioGroupItem
-                    id="notificationPosition-top"
-                    aria-label="top"
-                    value="top"
-                    class="absolute top-[20%] left-1/2 -translate-x-1/2 -translate-y-1/2" />
-                <RadioGroupItem
-                    id="notificationPosition-topRight"
-                    aria-label="topRight"
-                    value="topRight"
-                    class="absolute top-[20%] left-[90%] -translate-x-1/2 -translate-y-1/2" />
-                <RadioGroupItem
-                    id="notificationPosition-centerLeft"
-                    aria-label="centerLeft"
-                    value="centerLeft"
-                    class="absolute top-1/2 left-[10%] -translate-x-1/2 -translate-y-1/2" />
-                <RadioGroupItem
-                    id="notificationPosition-center"
-                    aria-label="center"
-                    value="center"
-                    class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" />
-                <RadioGroupItem
-                    id="notificationPosition-centerRight"
-                    aria-label="centerRight"
-                    value="centerRight"
-                    class="absolute top-1/2 left-[90%] -translate-x-1/2 -translate-y-1/2" />
-                <RadioGroupItem
-                    id="notificationPosition-bottomLeft"
-                    aria-label="bottomLeft"
-                    value="bottomLeft"
-                    class="absolute top-[80%] left-[10%] -translate-x-1/2 -translate-y-1/2" />
-                <RadioGroupItem
-                    id="notificationPosition-bottom"
-                    aria-label="bottom"
-                    value="bottom"
-                    class="absolute top-[80%] left-1/2 -translate-x-1/2 -translate-y-1/2" />
-                <RadioGroupItem
-                    id="notificationPosition-bottomRight"
-                    aria-label="bottomRight"
-                    value="bottomRight"
-                    class="absolute top-[80%] left-[90%] -translate-x-1/2 -translate-y-1/2" />
-            </RadioGroup>
-        </div>
-
-        <template #footer>
-            <div style="display: flex">
-                <Button @click="closeDialog">
-                    {{ t('dialog.notification_position.ok') }}
-                </Button>
+    <Dialog :open="isNotificationPositionDialogVisible" @update:open="(open) => (open ? null : closeDialog())">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.notification_position.header') }}</DialogTitle>
+            </DialogHeader>
+            <div style="font-size: 12px">
+                {{ t('dialog.notification_position.description') }}
             </div>
-        </template>
-    </el-dialog>
+            <div class="relative mx-auto mt-4 size-75">
+                <svg
+                    version="1.1"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                    x="0px"
+                    y="0px"
+                    viewBox="80 80 80 100"
+                    style="margin-top: 24px"
+                    xml:space="preserve"
+                    class="absolute inset-0 size-full">
+                    <path
+                        style="fill: black"
+                        d="M291.89,5A3.11,3.11,0,0,1,295,8.11V160.64a3.11,3.11,0,0,1-3.11,3.11H8.11A3.11,3.11,0,0,1,5,160.64V8.11A3.11,3.11,0,0,1,8.11,5H291.89m0-5H8.11A8.11,8.11,0,0,0,0,8.11V160.64a8.11,8.11,0,0,0,8.11,8.11H291.89a8.11,8.11,0,0,0,8.11-8.11V8.11A8.11,8.11,0,0,0,291.89,0Z" />
+                    <rect style="fill: #c4c4c4" x="5" y="5" width="290" height="158.75" rx="2.5" />
+                </svg>
+                <RadioGroup
+                    :model-value="notificationPosition"
+                    class="absolute inset-0"
+                    @update:modelValue="changeNotificationPosition">
+                    <RadioGroupItem
+                        id="notificationPosition-topLeft"
+                        aria-label="topLeft"
+                        value="topLeft"
+                        class="absolute top-[20%] left-[10%] -translate-x-1/2 -translate-y-1/2" />
+                    <RadioGroupItem
+                        id="notificationPosition-top"
+                        aria-label="top"
+                        value="top"
+                        class="absolute top-[20%] left-1/2 -translate-x-1/2 -translate-y-1/2" />
+                    <RadioGroupItem
+                        id="notificationPosition-topRight"
+                        aria-label="topRight"
+                        value="topRight"
+                        class="absolute top-[20%] left-[90%] -translate-x-1/2 -translate-y-1/2" />
+                    <RadioGroupItem
+                        id="notificationPosition-centerLeft"
+                        aria-label="centerLeft"
+                        value="centerLeft"
+                        class="absolute top-1/2 left-[10%] -translate-x-1/2 -translate-y-1/2" />
+                    <RadioGroupItem
+                        id="notificationPosition-center"
+                        aria-label="center"
+                        value="center"
+                        class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" />
+                    <RadioGroupItem
+                        id="notificationPosition-centerRight"
+                        aria-label="centerRight"
+                        value="centerRight"
+                        class="absolute top-1/2 left-[90%] -translate-x-1/2 -translate-y-1/2" />
+                    <RadioGroupItem
+                        id="notificationPosition-bottomLeft"
+                        aria-label="bottomLeft"
+                        value="bottomLeft"
+                        class="absolute top-[80%] left-[10%] -translate-x-1/2 -translate-y-1/2" />
+                    <RadioGroupItem
+                        id="notificationPosition-bottom"
+                        aria-label="bottom"
+                        value="bottom"
+                        class="absolute top-[80%] left-1/2 -translate-x-1/2 -translate-y-1/2" />
+                    <RadioGroupItem
+                        id="notificationPosition-bottomRight"
+                        aria-label="bottomRight"
+                        value="bottomRight"
+                        class="absolute top-[80%] left-[90%] -translate-x-1/2 -translate-y-1/2" />
+                </RadioGroup>
+            </div>
+
+            <DialogFooter>
+                <div style="display: flex">
+                    <Button @click="closeDialog">
+                        {{ t('dialog.notification_position.ok') }}
+                    </Button>
+                </div>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { Button } from '@/components/ui/button';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
diff --git a/src/views/Settings/dialogs/OpenSourceSoftwareNoticeDialog.vue b/src/views/Settings/dialogs/OpenSourceSoftwareNoticeDialog.vue
index 9f01bf73..f6c9ace8 100644
--- a/src/views/Settings/dialogs/OpenSourceSoftwareNoticeDialog.vue
+++ b/src/views/Settings/dialogs/OpenSourceSoftwareNoticeDialog.vue
@@ -1,25 +1,25 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        :model-value="ossDialog"
-        :title="t('dialog.open_source.header')"
-        width="650px"
-        @close="closeDialog"
-        destroy-on-close>
-        <div v-once style="height: 350px; overflow: hidden scroll; word-break: break-all">
-            <div>
-                <span>{{ t('dialog.open_source.description') }}</span>
-            </div>
+    <Dialog :open="ossDialog" @update:open="(open) => !open && closeDialog()">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.open_source.header') }}</DialogTitle>
+            </DialogHeader>
+            <div v-once style="height: 350px; overflow: hidden scroll; word-break: break-all">
+                <div>
+                    <span>{{ t('dialog.open_source.description') }}</span>
+                </div>
 
-            <div v-for="lib in openSourceSoftwareLicenses" :key="lib.name" style="margin-top: 15px">
-                <p style="font-weight: bold">{{ lib.name }}</p>
-                <pre style="font-size: 12px; white-space: pre-line">{{ lib.licenseText }}</pre>
+                <div v-for="lib in openSourceSoftwareLicenses" :key="lib.name" style="margin-top: 15px">
+                    <p style="font-weight: bold">{{ lib.name }}</p>
+                    <pre style="font-size: 12px; white-space: pre-line">{{ lib.licenseText }}</pre>
+                </div>
             </div>
-        </div>
-    </el-dialog>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { useI18n } from 'vue-i18n';
 
     import { openSourceSoftwareLicenses } from '../../../shared/constants/ossLicenses';
diff --git a/src/views/Settings/dialogs/PrimaryPasswordDialog.vue b/src/views/Settings/dialogs/PrimaryPasswordDialog.vue
index 64bd5e01..8bd95060 100644
--- a/src/views/Settings/dialogs/PrimaryPasswordDialog.vue
+++ b/src/views/Settings/dialogs/PrimaryPasswordDialog.vue
@@ -1,41 +1,41 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        v-model="enablePrimaryPasswordDialog.visible"
-        :before-close="enablePrimaryPasswordDialog.beforeClose"
-        :close-on-click-modal="false"
-        :title="t('dialog.primary_password.header')"
-        width="400px">
-        <InputGroupField
-            v-model="enablePrimaryPasswordDialog.password"
-            :placeholder="t('dialog.primary_password.password_placeholder')"
-            type="password"
-            size="sm"
-            maxlength="32"
-            show-password
-            autofocus />
-        <InputGroupField
-            v-model="enablePrimaryPasswordDialog.rePassword"
-            :placeholder="t('dialog.primary_password.re_input_placeholder')"
-            type="password"
-            style="margin-top: 5px"
-            size="sm"
-            maxlength="32"
-            show-password />
-        <template #footer>
-            <Button
-                :disabled="
-                    enablePrimaryPasswordDialog.password.length === 0 ||
-                    enablePrimaryPasswordDialog.password !== enablePrimaryPasswordDialog.rePassword
-                "
-                @click="handleSetPrimaryPassword()">
-                {{ t('dialog.primary_password.ok') }}
-            </Button>
-        </template>
-    </el-dialog>
+    <Dialog v-model:open="enablePrimaryPasswordDialog.visible">
+        <DialogContent @interact-outside.prevent>
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.primary_password.header') }}</DialogTitle>
+            </DialogHeader>
+            <InputGroupField
+                v-model="enablePrimaryPasswordDialog.password"
+                :placeholder="t('dialog.primary_password.password_placeholder')"
+                type="password"
+                size="sm"
+                maxlength="32"
+                show-password
+                autofocus />
+            <InputGroupField
+                v-model="enablePrimaryPasswordDialog.rePassword"
+                :placeholder="t('dialog.primary_password.re_input_placeholder')"
+                type="password"
+                style="margin-top: 5px"
+                size="sm"
+                maxlength="32"
+                show-password />
+            <DialogFooter>
+                <Button
+                    :disabled="
+                        enablePrimaryPasswordDialog.password.length === 0 ||
+                        enablePrimaryPasswordDialog.password !== enablePrimaryPasswordDialog.rePassword
+                    "
+                    @click="handleSetPrimaryPassword()">
+                    {{ t('dialog.primary_password.ok') }}
+                </Button>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { Button } from '@/components/ui/button';
     import { InputGroupField } from '@/components/ui/input-group';
     import { storeToRefs } from 'pinia';
diff --git a/src/views/Settings/dialogs/RegistryBackupDialog.vue b/src/views/Settings/dialogs/RegistryBackupDialog.vue
index 359e9c2f..363975c9 100644
--- a/src/views/Settings/dialogs/RegistryBackupDialog.vue
+++ b/src/views/Settings/dialogs/RegistryBackupDialog.vue
@@ -1,52 +1,54 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        :model-value="isRegistryBackupDialogVisible"
-        :title="t('dialog.registry_backup.header')"
-        width="600px"
-        @close="closeDialog"
-        @closed="clearVrcRegistryDialog">
-        <div style="margin-top: 10px">
-            <div style="display: flex; align-items: center; justify-content: space-between; font-size: 12px">
-                <span class="name" style="margin-right: 24px">{{ t('dialog.registry_backup.auto_backup') }}</span>
-                <Switch :model-value="vrcRegistryAutoBackup" @update:modelValue="setVrcRegistryAutoBackup" />
-            </div>
-            <div
-                style="
-                    display: flex;
-                    align-items: center;
-                    justify-content: space-between;
-                    font-size: 12px;
-                    margin-top: 5px;
-                ">
-                <span class="name" style="margin-right: 24px">{{ t('dialog.registry_backup.ask_to_restore') }}</span>
-                <Switch :model-value="vrcRegistryAskRestore" @update:modelValue="setVrcRegistryAskRestore" />
-            </div>
-            <DataTableLayout
-                class="min-w-0 w-full"
-                :table="table"
-                :loading="false"
-                :table-style="tableStyle"
-                :show-pagination="false"
-                style="margin-top: 10px" />
-            <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 10px">
-                <Button size="sm" variant="destructive" @click="deleteVrcRegistry">{{
-                    t('dialog.registry_backup.reset')
-                }}</Button>
-                <div class="flex gap-2">
-                    <Button size="sm" variant="outline" @click="promptVrcRegistryBackupName">{{
-                        t('dialog.registry_backup.backup')
-                    }}</Button>
-                    <Button size="sm" variant="outline" @click="restoreVrcRegistryFromFile">{{
-                        t('dialog.registry_backup.restore_from_file')
+    <Dialog :open="isRegistryBackupDialogVisible" @update:open="(open) => !open && closeAndClearDialog()">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.registry_backup.header') }}</DialogTitle>
+            </DialogHeader>
+            <div style="margin-top: 10px">
+                <div style="display: flex; align-items: center; justify-content: space-between; font-size: 12px">
+                    <span class="name" style="margin-right: 24px">{{ t('dialog.registry_backup.auto_backup') }}</span>
+                    <Switch :model-value="vrcRegistryAutoBackup" @update:modelValue="setVrcRegistryAutoBackup" />
+                </div>
+                <div
+                    style="
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-between;
+                        font-size: 12px;
+                        margin-top: 5px;
+                    ">
+                    <span class="name" style="margin-right: 24px">{{
+                        t('dialog.registry_backup.ask_to_restore')
+                    }}</span>
+                    <Switch :model-value="vrcRegistryAskRestore" @update:modelValue="setVrcRegistryAskRestore" />
+                </div>
+                <DataTableLayout
+                    class="min-w-0 w-full"
+                    :table="table"
+                    :loading="false"
+                    :table-style="tableStyle"
+                    :show-pagination="false"
+                    style="margin-top: 10px" />
+                <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 10px">
+                    <Button size="sm" variant="destructive" @click="deleteVrcRegistry">{{
+                        t('dialog.registry_backup.reset')
                     }}</Button>
+                    <div class="flex gap-2">
+                        <Button size="sm" variant="outline" @click="promptVrcRegistryBackupName">{{
+                            t('dialog.registry_backup.backup')
+                        }}</Button>
+                        <Button size="sm" variant="outline" @click="restoreVrcRegistryFromFile">{{
+                            t('dialog.registry_backup.restore_from_file')
+                        }}</Button>
+                    </div>
                 </div>
             </div>
-        </div>
-    </el-dialog>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { computed, ref, watch } from 'vue';
     import { Button } from '@/components/ui/button';
     import { DataTableLayout } from '@/components/ui/data-table';
@@ -201,7 +203,8 @@
             document.body.appendChild(fileInput);
 
             fileInput.onchange = function (event) {
-                const file = event.target.files[0];
+                const target = /** @type {HTMLInputElement | null} */ (event.target);
+                const file = target?.files?.[0];
                 if (file) {
                     const reader = new FileReader();
                     reader.onload = function () {
@@ -263,6 +266,13 @@
         registryBackupTable.value.data = [];
     }
 
+    function closeAndClearDialog() {
+        closeDialog();
+        // TODO: Element Plus had a distinct @closed event after animation.
+        // If you ever need exact timing, wrap DialogContent with a Transition and call clear on after-leave.
+        clearVrcRegistryDialog();
+    }
+
     function closeDialog() {
         isRegistryBackupDialogVisible.value = false;
     }
diff --git a/src/views/Settings/dialogs/TranslationApiDialog.vue b/src/views/Settings/dialogs/TranslationApiDialog.vue
index f489b0f7..52d23652 100644
--- a/src/views/Settings/dialogs/TranslationApiDialog.vue
+++ b/src/views/Settings/dialogs/TranslationApiDialog.vue
@@ -1,136 +1,139 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        :model-value="isTranslationApiDialogVisible"
-        :title="t('dialog.translation_api.header')"
-        width="450px"
-        @close="closeDialog">
-        <div class="options-container-item">
-            <span class="name">{{ t('view.settings.appearance.appearance.bio_language') }}</span>
-            <Select :model-value="bioLanguage" @update:modelValue="setBioLanguage">
-                <SelectTrigger size="sm" style="float: right">
-                    <SelectValue :placeholder="String(getLanguageName(bioLanguage) || bioLanguage || '')" />
-                </SelectTrigger>
-                <SelectContent>
-                    <SelectGroup>
-                        <SelectItem v-for="language in languageCodes" :key="language" :value="language">
-                            {{ getLanguageName(language) }}
-                        </SelectItem>
-                    </SelectGroup>
-                </SelectContent>
-            </Select>
-        </div>
-        <br />
-        <FieldGroup class="mb-3">
-            <Field>
-                <FieldLabel>{{ t('dialog.translation_api.mode') }}</FieldLabel>
-                <FieldContent>
-                    <Select :model-value="form.translationApiType" @update:modelValue="handleTranslationApiTypeChange">
-                        <SelectTrigger size="sm" style="width: 100%">
-                            <SelectValue :placeholder="t('dialog.translation_api.mode')" />
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectGroup>
-                                <SelectItem value="google" :text-value="t('dialog.translation_api.mode_google')">
-                                    {{ t('dialog.translation_api.mode_google') }}
-                                </SelectItem>
-                                <SelectItem value="openai" :text-value="t('dialog.translation_api.mode_openai')">
-                                    {{ t('dialog.translation_api.mode_openai') }}
-                                </SelectItem>
-                            </SelectGroup>
-                        </SelectContent>
-                    </Select>
-                </FieldContent>
-            </Field>
-        </FieldGroup>
-
-        <template v-if="form.translationApiType === 'google'">
-            <FieldGroup>
-                <Field>
-                    <FieldLabel>{{ t('dialog.translation_api.description') }}</FieldLabel>
-                    <FieldContent>
-                        <InputGroupField
-                            v-model="form.translationApiKey"
-                            type="password"
-                            show-password
-                            placeholder="AIzaSy..."
-                            clearable />
-                    </FieldContent>
-                </Field>
-            </FieldGroup>
-        </template>
-
-        <template v-if="form.translationApiType === 'openai'">
-            <FieldGroup>
-                <Field>
-                    <FieldLabel>{{ t('dialog.translation_api.openai.endpoint') }}</FieldLabel>
-                    <FieldContent>
-                        <InputGroupField
-                            v-model="form.translationApiEndpoint"
-                            placeholder="https://api.openai.com/v1/chat/completions"
-                            clearable />
-                    </FieldContent>
-                </Field>
-
-                <Field>
-                    <FieldLabel>{{ t('dialog.translation_api.openai.api_key') }}</FieldLabel>
-                    <FieldContent>
-                        <InputGroupField
-                            v-model="form.translationApiKey"
-                            type="password"
-                            show-password
-                            placeholder="sk-..."
-                            clearable />
-                    </FieldContent>
-                </Field>
-
-                <Field>
-                    <FieldLabel>{{ t('dialog.translation_api.openai.model') }}</FieldLabel>
-                    <FieldContent>
-                        <InputGroupField v-model="form.translationApiModel" clearable />
-                    </FieldContent>
-                </Field>
-
-                <Field>
-                    <FieldLabel>{{ t('dialog.translation_api.openai.prompt_optional') }}</FieldLabel>
-                    <FieldContent>
-                        <InputGroupTextareaField v-model="form.translationApiPrompt" :rows="3" clearable />
-                    </FieldContent>
-                </Field>
-            </FieldGroup>
-        </template>
-
-        <template #footer>
-            <div class="flex items-center justify-between">
-                <Button
-                    variant="outline"
-                    v-if="form.translationApiType === 'google'"
-                    @click="
-                        openExternalLink(
-                            'https://translatepress.com/docs/automatic-translation/generate-google-api-key/'
-                        )
-                    ">
-                    {{ t('dialog.translation_api.guide') }}
-                </Button>
-                <Button
-                    variant="outline"
-                    class="mr-2"
-                    v-if="form.translationApiType === 'openai'"
-                    @click="testOpenAiTranslation">
-                    {{ t('dialog.translation_api.test') }}
-                </Button>
-                <div>
-                    <Button style="margin-left: auto" @click="saveTranslationApiConfig">
-                        {{ t('dialog.translation_api.save') }}
-                    </Button>
-                </div>
+    <Dialog :open="isTranslationApiDialogVisible" @update:open="(open) => (open ? null : closeDialog())">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.translation_api.header') }}</DialogTitle>
+            </DialogHeader>
+            <div class="options-container-item">
+                <span class="name">{{ t('view.settings.appearance.appearance.bio_language') }}</span>
+                <Select :model-value="bioLanguage" @update:modelValue="setBioLanguage">
+                    <SelectTrigger size="sm" style="float: right">
+                        <SelectValue :placeholder="String(getLanguageName(bioLanguage) || bioLanguage || '')" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectGroup>
+                            <SelectItem v-for="language in languageCodes" :key="language" :value="language">
+                                {{ getLanguageName(language) }}
+                            </SelectItem>
+                        </SelectGroup>
+                    </SelectContent>
+                </Select>
             </div>
-        </template>
-    </el-dialog>
+            <br />
+            <FieldGroup class="mb-3">
+                <Field>
+                    <FieldLabel>{{ t('dialog.translation_api.mode') }}</FieldLabel>
+                    <FieldContent>
+                        <Select
+                            :model-value="form.translationApiType"
+                            @update:modelValue="handleTranslationApiTypeChange">
+                            <SelectTrigger size="sm" style="width: 100%">
+                                <SelectValue :placeholder="t('dialog.translation_api.mode')" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectGroup>
+                                    <SelectItem value="google" :text-value="t('dialog.translation_api.mode_google')">
+                                        {{ t('dialog.translation_api.mode_google') }}
+                                    </SelectItem>
+                                    <SelectItem value="openai" :text-value="t('dialog.translation_api.mode_openai')">
+                                        {{ t('dialog.translation_api.mode_openai') }}
+                                    </SelectItem>
+                                </SelectGroup>
+                            </SelectContent>
+                        </Select>
+                    </FieldContent>
+                </Field>
+            </FieldGroup>
+
+            <template v-if="form.translationApiType === 'google'">
+                <FieldGroup>
+                    <Field>
+                        <FieldLabel>{{ t('dialog.translation_api.description') }}</FieldLabel>
+                        <FieldContent>
+                            <InputGroupField
+                                v-model="form.translationApiKey"
+                                type="password"
+                                show-password
+                                placeholder="AIzaSy..."
+                                clearable />
+                        </FieldContent>
+                    </Field>
+                </FieldGroup>
+            </template>
+
+            <template v-if="form.translationApiType === 'openai'">
+                <FieldGroup>
+                    <Field>
+                        <FieldLabel>{{ t('dialog.translation_api.openai.endpoint') }}</FieldLabel>
+                        <FieldContent>
+                            <InputGroupField
+                                v-model="form.translationApiEndpoint"
+                                placeholder="https://api.openai.com/v1/chat/completions"
+                                clearable />
+                        </FieldContent>
+                    </Field>
+
+                    <Field>
+                        <FieldLabel>{{ t('dialog.translation_api.openai.api_key') }}</FieldLabel>
+                        <FieldContent>
+                            <InputGroupField
+                                v-model="form.translationApiKey"
+                                type="password"
+                                show-password
+                                placeholder="sk-..."
+                                clearable />
+                        </FieldContent>
+                    </Field>
+
+                    <Field>
+                        <FieldLabel>{{ t('dialog.translation_api.openai.model') }}</FieldLabel>
+                        <FieldContent>
+                            <InputGroupField v-model="form.translationApiModel" clearable />
+                        </FieldContent>
+                    </Field>
+
+                    <Field>
+                        <FieldLabel>{{ t('dialog.translation_api.openai.prompt_optional') }}</FieldLabel>
+                        <FieldContent>
+                            <InputGroupTextareaField v-model="form.translationApiPrompt" :rows="3" clearable />
+                        </FieldContent>
+                    </Field>
+                </FieldGroup>
+            </template>
+
+            <DialogFooter>
+                <div class="flex items-center justify-between">
+                    <Button
+                        variant="outline"
+                        v-if="form.translationApiType === 'google'"
+                        @click="
+                            openExternalLink(
+                                'https://translatepress.com/docs/automatic-translation/generate-google-api-key/'
+                            )
+                        ">
+                        {{ t('dialog.translation_api.guide') }}
+                    </Button>
+                    <Button
+                        variant="outline"
+                        class="mr-2"
+                        v-if="form.translationApiType === 'openai'"
+                        @click="testOpenAiTranslation">
+                        {{ t('dialog.translation_api.test') }}
+                    </Button>
+                    <div>
+                        <Button style="margin-left: auto" @click="saveTranslationApiConfig">
+                            {{ t('dialog.translation_api.save') }}
+                        </Button>
+                    </div>
+                </div>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
     import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { Field, FieldContent, FieldGroup, FieldLabel } from '@/components/ui/field';
     import { InputGroupField, InputGroupTextareaField } from '@/components/ui/input-group';
     import { reactive, watch } from 'vue';
diff --git a/src/views/Settings/dialogs/VRChatConfigDialog.vue b/src/views/Settings/dialogs/VRChatConfigDialog.vue
index be4a4433..ba85b4c1 100644
--- a/src/views/Settings/dialogs/VRChatConfigDialog.vue
+++ b/src/views/Settings/dialogs/VRChatConfigDialog.vue
@@ -1,176 +1,181 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        :model-value="isVRChatConfigDialogVisible"
-        :title="t('dialog.config_json.header')"
-        width="420px"
-        @close="closeDialog">
-        <div v-loading="loading">
-            <div style="font-size: 12px; word-break: keep-all">
-                {{ t('dialog.config_json.description1') }} <br />
-                {{ t('dialog.config_json.description2') }}
-            </div>
-            <br />
-            <span style="margin-right: 5px">{{ t('dialog.config_json.cache_size') }}</span>
-            <span v-text="VRChatUsedCacheSize"></span>
-            <span>/</span>
-            <span v-text="totalCacheSize"></span>
-            <span>GB</span>
-            <TooltipWrapper side="top" :content="t('dialog.config_json.refresh')">
-                <Button
-                    class="rounded-full"
-                    variant="outline"
-                    size="icon-sm"
-                    :disabled="VRChatCacheSizeLoading"
-                    style="margin-left: 5px"
-                    @click="getVRChatCacheSize">
-                    <Spinner v-if="VRChatCacheSizeLoading" />
-                    <RefreshCw v-else />
-                </Button>
-            </TooltipWrapper>
-
-            <div style="margin-top: 10px">
-                <span style="margin-right: 5px">{{ t('dialog.config_json.delete_all_cache') }}</span>
-                <Button size="sm" variant="outline" style="margin-left: 5px" @click="showDeleteAllVRChatCacheConfirm">{{
-                    t('dialog.config_json.delete_cache')
-                }}</Button>
-            </div>
-
-            <div style="margin-top: 10px">
-                <span style="margin-right: 5px">{{ t('dialog.config_json.delete_old_cache') }}</span>
-                <Button size="sm" variant="outline" style="margin-left: 5px" @click="sweepVRChatCache">{{
-                    t('dialog.config_json.sweep_cache')
-                }}</Button>
-            </div>
-
-            <div v-for="(item, value) in VRChatConfigList" :key="value" style="display: block; margin-top: 10px">
-                <span style="word-break: keep-all">{{ item.name }}:</span>
-                <div style="display: flex">
-                    <InputGroupAction
-                        v-model="VRChatConfigFile[value]"
-                        :placeholder="item.default"
-                        size="sm"
-                        :type="item.type ? item.type : 'text'"
-                        :min="item.min"
-                        :max="item.max"
-                        @input="refreshDialogValues"
-                        style="flex: 1; margin-top: 5px">
-                        <template #actions>
-                            <Button
-                                size="sm"
-                                variant="outline"
-                                v-if="item.folderBrowser"
-                                @click="openConfigFolderBrowser(value)">
-                            </Button>
-                        </template>
-                    </InputGroupAction>
+    <Dialog :open="isVRChatConfigDialogVisible" @update:open="(open) => (open ? null : closeDialog())">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.config_json.header') }}</DialogTitle>
+            </DialogHeader>
+            <div v-loading="loading">
+                <div style="font-size: 12px; word-break: keep-all">
+                    {{ t('dialog.config_json.description1') }} <br />
+                    {{ t('dialog.config_json.description2') }}
                 </div>
-            </div>
-
-            <div style="display: inline-block; margin-top: 10px">
-                <span>{{ t('dialog.config_json.camera_resolution') }}</span>
                 <br />
-                <Select
-                    :model-value="vrchatCameraResolutionKey"
-                    @update:modelValue="(v) => (vrchatCameraResolutionKey = v)">
-                    <SelectTrigger size="sm" style="margin-top: 5px">
-                        <SelectValue :placeholder="getVRChatCameraResolution()" />
-                    </SelectTrigger>
-                    <SelectContent>
-                        <SelectGroup>
-                            <SelectItem
-                                v-for="row in VRChatCameraResolutions"
-                                :key="row.name"
-                                :value="getVRChatResolutionKey(row)">
-                                {{ row.name }}
-                            </SelectItem>
-                        </SelectGroup>
-                    </SelectContent>
-                </Select>
-            </div>
-            <br />
-
-            <div style="display: inline-block; margin-top: 10px">
-                <span>{{ t('dialog.config_json.spout_resolution') }}</span>
-                <br />
-                <Select
-                    :model-value="vrchatSpoutResolutionKey"
-                    @update:modelValue="(v) => (vrchatSpoutResolutionKey = v)">
-                    <SelectTrigger size="sm" style="margin-top: 5px">
-                        <SelectValue :placeholder="getVRChatSpoutResolution()" />
-                    </SelectTrigger>
-                    <SelectContent>
-                        <SelectGroup>
-                            <SelectItem
-                                v-for="row in VRChatScreenshotResolutions"
-                                :key="row.name"
-                                :value="getVRChatResolutionKey(row)">
-                                {{ row.name }}
-                            </SelectItem>
-                        </SelectGroup>
-                    </SelectContent>
-                </Select>
-            </div>
-            <br />
-
-            <div style="display: inline-block; margin-top: 10px">
-                <span>{{ t('dialog.config_json.screenshot_resolution') }}</span>
-                <br />
-                <Select
-                    :model-value="vrchatScreenshotResolutionKey"
-                    @update:modelValue="(v) => (vrchatScreenshotResolutionKey = v)">
-                    <SelectTrigger size="sm" style="margin-top: 5px">
-                        <SelectValue :placeholder="getVRChatScreenshotResolution()" />
-                    </SelectTrigger>
-                    <SelectContent>
-                        <SelectGroup>
-                            <SelectItem
-                                v-for="row in VRChatScreenshotResolutions"
-                                :key="row.name"
-                                :value="getVRChatResolutionKey(row)">
-                                {{ row.name }}
-                            </SelectItem>
-                        </SelectGroup>
-                    </SelectContent>
-                </Select>
-            </div>
-            <br />
-
-            <label class="inline-flex items-center gap-2" style="margin-top: 5px; display: block">
-                <Checkbox
-                    v-model="VRChatConfigFile.picture_output_split_by_date"
-                    @update:modelValue="refreshDialogValues" />
-                <span>{{ t('dialog.config_json.picture_sort_by_date') }}</span>
-            </label>
-            <label class="inline-flex items-center gap-2" style="margin-top: 5px; display: block">
-                <Checkbox v-model="VRChatConfigFile.disableRichPresence" @update:modelValue="refreshDialogValues" />
-                <span>{{ t('dialog.config_json.disable_discord_presence') }}</span>
-            </label>
-        </div>
-        <template #footer>
-            <div style="display: flex; align-items: center; justify-content: space-between">
-                <div>
+                <span style="margin-right: 5px">{{ t('dialog.config_json.cache_size') }}</span>
+                <span v-text="VRChatUsedCacheSize"></span>
+                <span>/</span>
+                <span v-text="totalCacheSize"></span>
+                <span>GB</span>
+                <TooltipWrapper side="top" :content="t('dialog.config_json.refresh')">
                     <Button
-                        variant="ghost"
-                        @click="openExternalLink('https://docs.vrchat.com/docs/configuration-file')"
-                        >{{ t('dialog.config_json.vrchat_docs') }}</Button
+                        class="rounded-full"
+                        variant="outline"
+                        size="icon-sm"
+                        :disabled="VRChatCacheSizeLoading"
+                        style="margin-left: 5px"
+                        @click="getVRChatCacheSize">
+                        <Spinner v-if="VRChatCacheSizeLoading" />
+                        <RefreshCw v-else />
+                    </Button>
+                </TooltipWrapper>
+
+                <div style="margin-top: 10px">
+                    <span style="margin-right: 5px">{{ t('dialog.config_json.delete_all_cache') }}</span>
+                    <Button
+                        size="sm"
+                        variant="outline"
+                        style="margin-left: 5px"
+                        @click="showDeleteAllVRChatCacheConfirm"
+                        >{{ t('dialog.config_json.delete_cache') }}</Button
                     >
                 </div>
-                <div>
-                    <Button variant="secondary" class="mr-2" @click="closeDialog">{{
-                        t('dialog.config_json.cancel')
-                    }}</Button>
-                    <Button :disabled="loading" @click="saveVRChatConfigFile">{{
-                        t('dialog.config_json.save')
+
+                <div style="margin-top: 10px">
+                    <span style="margin-right: 5px">{{ t('dialog.config_json.delete_old_cache') }}</span>
+                    <Button size="sm" variant="outline" style="margin-left: 5px" @click="sweepVRChatCache">{{
+                        t('dialog.config_json.sweep_cache')
                     }}</Button>
                 </div>
+
+                <div v-for="(item, value) in VRChatConfigList" :key="value" style="display: block; margin-top: 10px">
+                    <span style="word-break: keep-all">{{ item.name }}:</span>
+                    <div style="display: flex">
+                        <InputGroupAction
+                            v-model="VRChatConfigFile[value]"
+                            :placeholder="item.default"
+                            size="sm"
+                            :type="item.type ? item.type : 'text'"
+                            :min="item.min"
+                            :max="item.max"
+                            @input="refreshDialogValues"
+                            style="flex: 1; margin-top: 5px">
+                            <template #actions>
+                                <Button
+                                    size="sm"
+                                    variant="outline"
+                                    v-if="item.folderBrowser"
+                                    @click="openConfigFolderBrowser(value)">
+                                </Button>
+                            </template>
+                        </InputGroupAction>
+                    </div>
+                </div>
+
+                <div style="display: inline-block; margin-top: 10px">
+                    <span>{{ t('dialog.config_json.camera_resolution') }}</span>
+                    <br />
+                    <Select
+                        :model-value="vrchatCameraResolutionKey"
+                        @update:modelValue="(v) => (vrchatCameraResolutionKey = v)">
+                        <SelectTrigger size="sm" style="margin-top: 5px">
+                            <SelectValue :placeholder="getVRChatCameraResolution()" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectGroup>
+                                <SelectItem
+                                    v-for="row in VRChatCameraResolutions"
+                                    :key="row.name"
+                                    :value="getVRChatResolutionKey(row)">
+                                    {{ row.name }}
+                                </SelectItem>
+                            </SelectGroup>
+                        </SelectContent>
+                    </Select>
+                </div>
+                <br />
+
+                <div style="display: inline-block; margin-top: 10px">
+                    <span>{{ t('dialog.config_json.spout_resolution') }}</span>
+                    <br />
+                    <Select
+                        :model-value="vrchatSpoutResolutionKey"
+                        @update:modelValue="(v) => (vrchatSpoutResolutionKey = v)">
+                        <SelectTrigger size="sm" style="margin-top: 5px">
+                            <SelectValue :placeholder="getVRChatSpoutResolution()" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectGroup>
+                                <SelectItem
+                                    v-for="row in VRChatScreenshotResolutions"
+                                    :key="row.name"
+                                    :value="getVRChatResolutionKey(row)">
+                                    {{ row.name }}
+                                </SelectItem>
+                            </SelectGroup>
+                        </SelectContent>
+                    </Select>
+                </div>
+                <br />
+
+                <div style="display: inline-block; margin-top: 10px">
+                    <span>{{ t('dialog.config_json.screenshot_resolution') }}</span>
+                    <br />
+                    <Select
+                        :model-value="vrchatScreenshotResolutionKey"
+                        @update:modelValue="(v) => (vrchatScreenshotResolutionKey = v)">
+                        <SelectTrigger size="sm" style="margin-top: 5px">
+                            <SelectValue :placeholder="getVRChatScreenshotResolution()" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectGroup>
+                                <SelectItem
+                                    v-for="row in VRChatScreenshotResolutions"
+                                    :key="row.name"
+                                    :value="getVRChatResolutionKey(row)">
+                                    {{ row.name }}
+                                </SelectItem>
+                            </SelectGroup>
+                        </SelectContent>
+                    </Select>
+                </div>
+                <br />
+
+                <label class="inline-flex items-center gap-2" style="margin-top: 5px; display: block">
+                    <Checkbox
+                        v-model="VRChatConfigFile.picture_output_split_by_date"
+                        @update:modelValue="refreshDialogValues" />
+                    <span>{{ t('dialog.config_json.picture_sort_by_date') }}</span>
+                </label>
+                <label class="inline-flex items-center gap-2" style="margin-top: 5px; display: block">
+                    <Checkbox v-model="VRChatConfigFile.disableRichPresence" @update:modelValue="refreshDialogValues" />
+                    <span>{{ t('dialog.config_json.disable_discord_presence') }}</span>
+                </label>
             </div>
-        </template>
-    </el-dialog>
+            <DialogFooter>
+                <div style="display: flex; align-items: center; justify-content: space-between">
+                    <div>
+                        <Button
+                            variant="ghost"
+                            @click="openExternalLink('https://docs.vrchat.com/docs/configuration-file')"
+                            >{{ t('dialog.config_json.vrchat_docs') }}</Button
+                        >
+                    </div>
+                    <div>
+                        <Button variant="secondary" class="mr-2" @click="closeDialog">{{
+                            t('dialog.config_json.cancel')
+                        }}</Button>
+                        <Button :disabled="loading" @click="saveVRChatConfigFile">{{
+                            t('dialog.config_json.save')
+                        }}</Button>
+                    </div>
+                </div>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
     import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { computed, ref, watch } from 'vue';
     import { Button } from '@/components/ui/button';
     import { Checkbox } from '@/components/ui/checkbox';
diff --git a/src/views/Settings/dialogs/YouTubeApiDialog.vue b/src/views/Settings/dialogs/YouTubeApiDialog.vue
index b225af2a..f922e6f0 100644
--- a/src/views/Settings/dialogs/YouTubeApiDialog.vue
+++ b/src/views/Settings/dialogs/YouTubeApiDialog.vue
@@ -1,34 +1,37 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        :model-value="isYouTubeApiDialogVisible"
-        :title="t('dialog.youtube_api.header')"
-        width="450px"
-        @close="closeDialog">
-        <div style="font-size: 12px">{{ t('dialog.youtube_api.description') }} <br /></div>
+    <Dialog :open="isYouTubeApiDialogVisible" @update:open="(open) => (open ? null : closeDialog())">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.youtube_api.header') }}</DialogTitle>
+            </DialogHeader>
+            <div style="font-size: 12px">{{ t('dialog.youtube_api.description') }} <br /></div>
 
-        <InputGroupTextareaField
-            v-model="youTubeApiKey"
-            :placeholder="t('dialog.youtube_api.placeholder')"
-            :maxlength="39"
-            :rows="2"
-            class="mt-2.5"
-            show-count />
+            <InputGroupTextareaField
+                v-model="youTubeApiKey"
+                :placeholder="t('dialog.youtube_api.placeholder')"
+                :maxlength="39"
+                :rows="2"
+                class="mt-2.5"
+                show-count />
 
-        <template #footer>
-            <div class="flex items-center justify-between">
-                <Button variant="outline" @click="openExternalLink('https://smashballoon.com/doc/youtube-api-key/')">
-                    {{ t('dialog.youtube_api.guide') }}
-                </Button>
-                <Button style="margin-left: auto" @click="testYouTubeApiKey">
-                    {{ t('dialog.youtube_api.save') }}
-                </Button>
-            </div>
-        </template>
-    </el-dialog>
+            <DialogFooter>
+                <div class="flex items-center justify-between">
+                    <Button
+                        variant="outline"
+                        @click="openExternalLink('https://smashballoon.com/doc/youtube-api-key/')">
+                        {{ t('dialog.youtube_api.guide') }}
+                    </Button>
+                    <Button style="margin-left: auto" @click="testYouTubeApiKey">
+                        {{ t('dialog.youtube_api.save') }}
+                    </Button>
+                </div>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { Button } from '@/components/ui/button';
     import { InputGroupTextareaField } from '@/components/ui/input-group';
     import { storeToRefs } from 'pinia';
diff --git a/src/views/Tools/dialogs/EditInviteMessageDialog.vue b/src/views/Tools/dialogs/EditInviteMessageDialog.vue
index 434e3e68..fa9bbd44 100644
--- a/src/views/Tools/dialogs/EditInviteMessageDialog.vue
+++ b/src/views/Tools/dialogs/EditInviteMessageDialog.vue
@@ -1,30 +1,31 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        :model-value="isEditInviteMessageDialogVisible"
-        :title="t('dialog.edit_invite_message.header')"
-        width="400px"
-        @close="closeDialog">
-        <div style="font-size: 12px">
-            <span>{{ t('dialog.edit_invite_message.description') }}</span>
-            <InputGroupTextareaField
-                v-model="message"
-                :maxlength="64"
-                :rows="2"
-                class="mt-2.5"
-                placeholder=""
-                show-count />
-        </div>
-        <template #footer>
-            <Button variant="secondary" class="mr-2" @click="closeDialog">{{
-                t('dialog.edit_invite_message.cancel')
-            }}</Button>
-            <Button @click="saveEditInviteMessage">{{ t('dialog.edit_invite_message.save') }}</Button>
-        </template>
-    </el-dialog>
+    <Dialog :open="isEditInviteMessageDialogVisible" @update:open="(open) => !open && closeDialog()">
+        <DialogContent class="sm:max-w-sm">
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.edit_invite_message.header') }}</DialogTitle>
+            </DialogHeader>
+            <div style="font-size: 12px">
+                <span>{{ t('dialog.edit_invite_message.description') }}</span>
+                <InputGroupTextareaField
+                    v-model="message"
+                    :maxlength="64"
+                    :rows="2"
+                    class="mt-2.5"
+                    placeholder=""
+                    show-count />
+            </div>
+            <DialogFooter>
+                <Button variant="secondary" class="mr-2" @click="closeDialog">{{
+                    t('dialog.edit_invite_message.cancel')
+                }}</Button>
+                <Button @click="saveEditInviteMessage">{{ t('dialog.edit_invite_message.save') }}</Button>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { ref, watch } from 'vue';
     import { Button } from '@/components/ui/button';
     import { InputGroupTextareaField } from '@/components/ui/input-group';
diff --git a/src/views/Tools/dialogs/EditInviteMessagesDialog.vue b/src/views/Tools/dialogs/EditInviteMessagesDialog.vue
index 041afbff..dce54412 100644
--- a/src/views/Tools/dialogs/EditInviteMessagesDialog.vue
+++ b/src/views/Tools/dialogs/EditInviteMessagesDialog.vue
@@ -1,45 +1,45 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        :model-value="isEditInviteMessagesDialogVisible"
-        :title="t('dialog.edit_invite_messages.header')"
-        width="1000px"
-        @close="closeDialog">
-        <TabsUnderline v-model="activeTab" :items="editInviteTabs" :unmount-on-hide="false" class="mt-2.5">
-            <template #message>
-                <DataTableLayout
-                    style="margin-top: 10px; cursor: pointer"
-                    :table="inviteMessageTanstackTable"
-                    :loading="false"
-                    :show-pagination="false"
-                    :on-row-click="handleEditInviteMessageRowClick" />
-            </template>
-            <template #request>
-                <DataTableLayout
-                    style="margin-top: 10px; cursor: pointer"
-                    :table="inviteRequestTanstackTable"
-                    :loading="false"
-                    :show-pagination="false"
-                    :on-row-click="handleEditInviteMessageRowClick" />
-            </template>
-            <template #requestResponse>
-                <DataTableLayout
-                    style="margin-top: 10px; cursor: pointer"
-                    :table="inviteRequestResponseTanstackTable"
-                    :loading="false"
-                    :show-pagination="false"
-                    :on-row-click="handleEditInviteMessageRowClick" />
-            </template>
-            <template #response>
-                <DataTableLayout
-                    style="margin-top: 10px; cursor: pointer"
-                    :table="inviteResponseTanstackTable"
-                    :loading="false"
-                    :show-pagination="false"
-                    :on-row-click="handleEditInviteMessageRowClick" />
-            </template>
-        </TabsUnderline>
-    </el-dialog>
+    <Dialog :open="isEditInviteMessagesDialogVisible" @update:open="(open) => !open && closeDialog()">
+        <DialogContent class="sm:max-w-5xl">
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.edit_invite_messages.header') }}</DialogTitle>
+            </DialogHeader>
+            <TabsUnderline v-model="activeTab" :items="editInviteTabs" :unmount-on-hide="false" class="mt-2.5">
+                <template #message>
+                    <DataTableLayout
+                        style="margin-top: 10px; cursor: pointer"
+                        :table="inviteMessageTanstackTable"
+                        :loading="false"
+                        :show-pagination="false"
+                        :on-row-click="handleEditInviteMessageRowClick" />
+                </template>
+                <template #request>
+                    <DataTableLayout
+                        style="margin-top: 10px; cursor: pointer"
+                        :table="inviteRequestTanstackTable"
+                        :loading="false"
+                        :show-pagination="false"
+                        :on-row-click="handleEditInviteMessageRowClick" />
+                </template>
+                <template #requestResponse>
+                    <DataTableLayout
+                        style="margin-top: 10px; cursor: pointer"
+                        :table="inviteRequestResponseTanstackTable"
+                        :loading="false"
+                        :show-pagination="false"
+                        :on-row-click="handleEditInviteMessageRowClick" />
+                </template>
+                <template #response>
+                    <DataTableLayout
+                        style="margin-top: 10px; cursor: pointer"
+                        :table="inviteResponseTanstackTable"
+                        :loading="false"
+                        :show-pagination="false"
+                        :on-row-click="handleEditInviteMessageRowClick" />
+                </template>
+            </TabsUnderline>
+        </DialogContent>
+    </Dialog>
     <template v-if="isEditInviteMessagesDialogVisible">
         <EditInviteMessageDialog
             v-model:isEditInviteMessageDialogVisible="isEditInviteMessageDialogVisible"
@@ -50,6 +50,7 @@
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { computed, ref, watch } from 'vue';
     import { DataTableLayout } from '@/components/ui/data-table';
     import { TabsUnderline } from '@/components/ui/tabs';
diff --git a/src/views/Tools/dialogs/ExportAvatarsListDialog.vue b/src/views/Tools/dialogs/ExportAvatarsListDialog.vue
index 0988cce0..7f9353c7 100644
--- a/src/views/Tools/dialogs/ExportAvatarsListDialog.vue
+++ b/src/views/Tools/dialogs/ExportAvatarsListDialog.vue
@@ -1,20 +1,26 @@
 <template>
-    <el-dialog v-model="isVisible" :title="t('dialog.export_own_avatars.header')" width="650px">
-        <InputGroupTextareaField
-            v-model="exportAvatarsListCsv"
-            v-loading="loading"
-            :rows="15"
-            readonly
-            style="margin-top: 15px"
-            input-class="resize-none"
-            @click="$event.target.tagName === 'TEXTAREA' && $event.target.select()" />
-    </el-dialog>
+    <Dialog v-model:open="isVisible">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.export_own_avatars.header') }}</DialogTitle>
+            </DialogHeader>
+            <InputGroupTextareaField
+                v-model="exportAvatarsListCsv"
+                v-loading="loading"
+                :rows="15"
+                readonly
+                style="margin-top: 15px"
+                input-class="resize-none"
+                @click="$event.target.tagName === 'TEXTAREA' && $event.target.select()" />
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { computed, ref, watch } from 'vue';
-    import { storeToRefs } from 'pinia';
     import { InputGroupTextareaField } from '@/components/ui/input-group';
+    import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
     import { useAvatarStore, useUserStore } from '../../../stores';
diff --git a/src/views/Tools/dialogs/ExportDiscordNamesDialog.vue b/src/views/Tools/dialogs/ExportDiscordNamesDialog.vue
index 695a1ebe..ec08b7b6 100644
--- a/src/views/Tools/dialogs/ExportDiscordNamesDialog.vue
+++ b/src/views/Tools/dialogs/ExportDiscordNamesDialog.vue
@@ -1,26 +1,27 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        :model-value="discordNamesDialogVisible"
-        :title="t('dialog.discord_names.header')"
-        width="650px"
-        @close="closeDialog">
-        <div style="font-size: 12px">
-            {{ t('dialog.discord_names.description') }}
-        </div>
-        <InputGroupTextareaField
-            v-model="discordNamesContent"
-            :rows="15"
-            readonly
-            style="margin-top: 15px"
-            input-class="resize-none" />
-    </el-dialog>
+    <Dialog :open="discordNamesDialogVisible" @update:open="(open) => !open && closeDialog()">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.discord_names.header') }}</DialogTitle>
+            </DialogHeader>
+            <div style="font-size: 12px">
+                {{ t('dialog.discord_names.description') }}
+            </div>
+            <InputGroupTextareaField
+                v-model="discordNamesContent"
+                :rows="15"
+                readonly
+                style="margin-top: 15px"
+                input-class="resize-none" />
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { ref, watch } from 'vue';
-    import { storeToRefs } from 'pinia';
     import { InputGroupTextareaField } from '@/components/ui/input-group';
+    import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
     import { useUserStore } from '../../../stores';
diff --git a/src/views/Tools/dialogs/ExportFriendsListDialog.vue b/src/views/Tools/dialogs/ExportFriendsListDialog.vue
index 5c80de19..8e60e1e0 100644
--- a/src/views/Tools/dialogs/ExportFriendsListDialog.vue
+++ b/src/views/Tools/dialogs/ExportFriendsListDialog.vue
@@ -1,29 +1,35 @@
 <template>
-    <el-dialog :title="t('dialog.export_friends_list.header')" v-model="isVisible" width="650px">
-        <TabsUnderline default-value="csv" :items="exportFriendsTabs" :unmount-on-hide="false" class="mt-2.5">
-            <template #csv>
-                <InputGroupTextareaField
-                    v-model="exportFriendsListCsv"
-                    :rows="15"
-                    readonly
-                    style="margin-top: 15px"
-                    input-class="resize-none"
-                    @click="$event.target.tagName === 'TEXTAREA' && $event.target.select()" />
-            </template>
-            <template #json>
-                <InputGroupTextareaField
-                    v-model="exportFriendsListJson"
-                    :rows="15"
-                    readonly
-                    style="margin-top: 15px"
-                    input-class="resize-none"
-                    @click="$event.target.tagName === 'TEXTAREA' && $event.target.select()" />
-            </template>
-        </TabsUnderline>
-    </el-dialog>
+    <Dialog v-model:open="isVisible">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.export_friends_list.header') }}</DialogTitle>
+            </DialogHeader>
+            <TabsUnderline default-value="csv" :items="exportFriendsTabs" :unmount-on-hide="false" class="mt-2.5">
+                <template #csv>
+                    <InputGroupTextareaField
+                        v-model="exportFriendsListCsv"
+                        :rows="15"
+                        readonly
+                        style="margin-top: 15px"
+                        input-class="resize-none"
+                        @click="$event.target.tagName === 'TEXTAREA' && $event.target.select()" />
+                </template>
+                <template #json>
+                    <InputGroupTextareaField
+                        v-model="exportFriendsListJson"
+                        :rows="15"
+                        readonly
+                        style="margin-top: 15px"
+                        input-class="resize-none"
+                        @click="$event.target.tagName === 'TEXTAREA' && $event.target.select()" />
+                </template>
+            </TabsUnderline>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { computed, ref, watch } from 'vue';
     import { InputGroupTextareaField } from '@/components/ui/input-group';
     import { TabsUnderline } from '@/components/ui/tabs';
diff --git a/src/views/Tools/dialogs/GroupCalendarDialog.vue b/src/views/Tools/dialogs/GroupCalendarDialog.vue
index 5aa00b5a..67fe13cc 100644
--- a/src/views/Tools/dialogs/GroupCalendarDialog.vue
+++ b/src/views/Tools/dialogs/GroupCalendarDialog.vue
@@ -1,119 +1,124 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        :model-value="visible"
-        :title="t('dialog.group_calendar.header')"
-        width="90vw"
-        height="80vh"
-        @close="closeDialog">
-        <template #header>
-            <div class="dialog-title-container">
-                <span>{{ t('dialog.group_calendar.header') }}</span>
-                <Button size="sm" variant="outline" @click="toggleViewMode" class="view-toggle-btn">
-                    {{
-                        viewMode === 'timeline'
-                            ? t('dialog.group_calendar.list_view')
-                            : t('dialog.group_calendar.calendar_view')
-                    }}
-                </Button>
-            </div>
-            <div class="featured-switch">
-                <span class="featured-switch-text">{{ t('dialog.group_calendar.featured_events') }}</span>
-                <Switch v-model="showFeaturedEvents" @update:modelValue="toggleFeaturedEvents" />
-            </div>
-        </template>
-        <div class="top-content">
-            <transition name="el-fade-in-linear" mode="out-in">
-                <div v-if="viewMode === 'timeline'" key="timeline" class="timeline-view">
-                    <div class="timeline-container">
-                        <el-timeline v-if="groupedTimelineEvents.length">
-                            <el-timeline-item
-                                v-for="(timeGroup, key) of groupedTimelineEvents"
-                                :key="key"
-                                :timestamp="dayjs(timeGroup.startsAt).format('MM-DD ddd') + ' ' + timeGroup.startTime"
-                                placement="top">
-                                <div class="time-group-container">
-                                    <GroupCalendarEventCard
-                                        v-for="value in timeGroup.events"
-                                        :key="value.id"
-                                        :event="value"
-                                        mode="timeline"
-                                        :is-following="isEventFollowing(value.id)"
-                                        :card-class="{ 'grouped-card': timeGroup.events.length > 1 }"
-                                        @update-following-calendar-data="updateFollowingCalendarData"
-                                        @click-action="showGroupDialog(value.ownerId)" />
-                                </div>
-                            </el-timeline-item>
-                        </el-timeline>
-                        <div v-else>{{ t('dialog.group_calendar.no_events') }}</div>
-                    </div>
+    <Dialog :open="visible" @update:open="(open) => (open ? null : closeDialog())">
+        <DialogContent class="x-dialog w-[90vw] max-w-[90vw] h-[80vh] overflow-hidden">
+            <DialogHeader>
+                <div class="dialog-title-container">
+                    <DialogTitle>{{ t('dialog.group_calendar.header') }}</DialogTitle>
+                    <Button size="sm" variant="outline" @click="toggleViewMode" class="view-toggle-btn">
+                        {{
+                            viewMode === 'timeline'
+                                ? t('dialog.group_calendar.list_view')
+                                : t('dialog.group_calendar.calendar_view')
+                        }}
+                    </Button>
+                </div>
+                <div class="featured-switch">
+                    <span class="featured-switch-text">{{ t('dialog.group_calendar.featured_events') }}</span>
+                    <Switch v-model="showFeaturedEvents" @update:modelValue="toggleFeaturedEvents" />
+                </div>
+            </DialogHeader>
+            <div class="top-content">
+                <transition name="el-fade-in-linear" mode="out-in">
+                    <div v-if="viewMode === 'timeline'" key="timeline" class="timeline-view">
+                        <div class="timeline-container">
+                            <el-timeline v-if="groupedTimelineEvents.length">
+                                <el-timeline-item
+                                    v-for="(timeGroup, key) of groupedTimelineEvents"
+                                    :key="key"
+                                    :timestamp="
+                                        dayjs(timeGroup.startsAt).format('MM-DD ddd') + ' ' + timeGroup.startTime
+                                    "
+                                    placement="top">
+                                    <div class="time-group-container">
+                                        <GroupCalendarEventCard
+                                            v-for="value in timeGroup.events"
+                                            :key="value.id"
+                                            :event="value"
+                                            mode="timeline"
+                                            :is-following="isEventFollowing(value.id)"
+                                            :card-class="{ 'grouped-card': timeGroup.events.length > 1 }"
+                                            @update-following-calendar-data="updateFollowingCalendarData"
+                                            @click-action="showGroupDialog(value.ownerId)" />
+                                    </div>
+                                </el-timeline-item>
+                            </el-timeline>
+                            <div v-else>{{ t('dialog.group_calendar.no_events') }}</div>
+                        </div>
 
-                    <div class="calendar-container">
-                        <el-calendar v-model="selectedDay" v-loading="isLoading">
-                            <template #date-cell="{ data }">
-                                <div class="date">
-                                    <div
-                                        class="calendar-date-content"
-                                        :class="{ 'has-events': filteredCalendar[formatDateKey(data.date)]?.length }">
-                                        {{ dayjs(data.date).format('D') }}
+                        <div class="calendar-container">
+                            <el-calendar v-model="selectedDay" v-loading="isLoading">
+                                <template #date-cell="{ data }">
+                                    <div class="date">
                                         <div
-                                            v-if="filteredCalendar[formatDateKey(data.date)]?.length"
-                                            class="calendar-event-badge"
-                                            :class="followingCalendarDate[formatDateKey(data.date)] ? 'has-following' : 'no-following'">
-                                            {{ filteredCalendar[formatDateKey(data.date)]?.length }}
+                                            class="calendar-date-content"
+                                            :class="{
+                                                'has-events': filteredCalendar[formatDateKey(data.date)]?.length
+                                            }">
+                                            {{ dayjs(data.date).format('D') }}
+                                            <div
+                                                v-if="filteredCalendar[formatDateKey(data.date)]?.length"
+                                                class="calendar-event-badge"
+                                                :class="
+                                                    followingCalendarDate[formatDateKey(data.date)]
+                                                        ? 'has-following'
+                                                        : 'no-following'
+                                                ">
+                                                {{ filteredCalendar[formatDateKey(data.date)]?.length }}
+                                            </div>
                                         </div>
                                     </div>
-                                </div>
-                            </template>
-                        </el-calendar>
-                    </div>
-                </div>
-                <div v-else key="grid" class="grid-view">
-                    <div class="search-container">
-                        <InputGroupSearch
-                            v-model="searchQuery"
-                            size="sm"
-                            :placeholder="t('dialog.group_calendar.search_placeholder')"
-                            class="search-input" />
+                                </template>
+                            </el-calendar>
+                        </div>
                     </div>
+                    <div v-else key="grid" class="grid-view">
+                        <div class="search-container">
+                            <InputGroupSearch
+                                v-model="searchQuery"
+                                size="sm"
+                                :placeholder="t('dialog.group_calendar.search_placeholder')"
+                                class="search-input" />
+                        </div>
 
-                    <div class="groups-grid" v-loading="isLoading">
-                        <div v-if="filteredGroupEvents.length" class="groups-container">
-                            <div v-for="group in filteredGroupEvents" :key="group.groupId" class="group-row">
-                                <div class="group-header" @click="toggleGroup(group.groupId)">
-                                    <ArrowRight
-                                        class="rotation-transition"
-                                        :class="{ rotate: !groupCollapsed[group.groupId] }" />
-                                    {{ group.groupName }}
-                                </div>
-                                <div class="events-row" v-show="!groupCollapsed[group.groupId]">
-                                    <GroupCalendarEventCard
-                                        v-for="event in group.events"
-                                        :key="event.id"
-                                        :event="event"
-                                        mode="grid"
-                                        :is-following="isEventFollowing(event.id)"
-                                        @update-following-calendar-data="updateFollowingCalendarData"
-                                        @click-action="showGroupDialog(event.ownerId)"
-                                        card-class="grid-card" />
+                        <div class="groups-grid" v-loading="isLoading">
+                            <div v-if="filteredGroupEvents.length" class="groups-container">
+                                <div v-for="group in filteredGroupEvents" :key="group.groupId" class="group-row">
+                                    <div class="group-header" @click="toggleGroup(group.groupId)">
+                                        <ArrowRight
+                                            class="rotation-transition"
+                                            :class="{ rotate: !groupCollapsed[group.groupId] }" />
+                                        {{ group.groupName }}
+                                    </div>
+                                    <div class="events-row" v-show="!groupCollapsed[group.groupId]">
+                                        <GroupCalendarEventCard
+                                            v-for="event in group.events"
+                                            :key="event.id"
+                                            :event="event"
+                                            mode="grid"
+                                            :is-following="isEventFollowing(event.id)"
+                                            @update-following-calendar-data="updateFollowingCalendarData"
+                                            @click-action="showGroupDialog(event.ownerId)"
+                                            card-class="grid-card" />
+                                    </div>
                                 </div>
                             </div>
-                        </div>
-                        <div v-else class="no-events">
-                            {{
-                                searchQuery
-                                    ? t('dialog.group_calendar.search_no_matching')
-                                    : t('dialog.group_calendar.search_no_this_month')
-                            }}
+                            <div v-else class="no-events">
+                                {{
+                                    searchQuery
+                                        ? t('dialog.group_calendar.search_no_matching')
+                                        : t('dialog.group_calendar.search_no_this_month')
+                                }}
+                            </div>
                         </div>
                     </div>
-                </div>
-            </transition>
-        </div>
-    </el-dialog>
+                </transition>
+            </div>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { computed, onMounted, ref, watch } from 'vue';
     import { ArrowRight } from 'lucide-vue-next';
     import { Button } from '@/components/ui/button';
diff --git a/src/views/Tools/dialogs/NoteExportDialog.vue b/src/views/Tools/dialogs/NoteExportDialog.vue
index a1818e9a..136ba48d 100644
--- a/src/views/Tools/dialogs/NoteExportDialog.vue
+++ b/src/views/Tools/dialogs/NoteExportDialog.vue
@@ -1,68 +1,69 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        :model-value="isNoteExportDialogVisible"
-        :title="t('dialog.note_export.header')"
-        width="1000px"
-        @close="closeDialog">
-        <div style="font-size: 12px">
-            {{ t('dialog.note_export.description1') }} <br />
-            {{ t('dialog.note_export.description2') }} <br />
-            {{ t('dialog.note_export.description3') }} <br />
-            {{ t('dialog.note_export.description4') }} <br />
-            {{ t('dialog.note_export.description5') }} <br />
-            {{ t('dialog.note_export.description6') }} <br />
-            {{ t('dialog.note_export.description7') }} <br />
-            {{ t('dialog.note_export.description8') }} <br />
-        </div>
+    <Dialog :open="isNoteExportDialogVisible" @update:open="(open) => !open && closeDialog()">
+        <DialogContent class="sm:max-w-5xl">
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.note_export.header') }}</DialogTitle>
+            </DialogHeader>
+            <div style="font-size: 12px">
+                {{ t('dialog.note_export.description1') }} <br />
+                {{ t('dialog.note_export.description2') }} <br />
+                {{ t('dialog.note_export.description3') }} <br />
+                {{ t('dialog.note_export.description4') }} <br />
+                {{ t('dialog.note_export.description5') }} <br />
+                {{ t('dialog.note_export.description6') }} <br />
+                {{ t('dialog.note_export.description7') }} <br />
+                {{ t('dialog.note_export.description8') }} <br />
+            </div>
 
-        <Button
-            size="sm"
-            class="mr-2"
-            variant="outline"
-            :disabled="loading"
-            style="margin-top: 10px"
-            @click="updateNoteExportDialog">
-            {{ t('dialog.note_export.refresh') }}
-        </Button>
-        <Button
-            size="sm"
-            class="mr-2"
-            variant="outline"
-            :disabled="loading"
-            style="margin-top: 10px"
-            @click="exportNoteExport">
-            {{ t('dialog.note_export.export') }}
-        </Button>
-        <Button v-if="loading" size="sm" variant="outline" style="margin-top: 10px" @click="cancelNoteExport">
-            {{ t('dialog.note_export.cancel') }}
-        </Button>
-        <span v-if="loading" style="margin: 10px">
-            <Loader2 style="margin-right: 5px" />
-            {{ t('dialog.note_export.progress') }} {{ progress }}/{{ progressTotal }}
-        </span>
-
-        <template v-if="errors">
-            <Button size="sm" variant="outline" @click="errors = ''">
-                {{ t('dialog.note_export.clear_errors') }}
+            <Button
+                size="sm"
+                class="mr-2"
+                variant="outline"
+                :disabled="loading"
+                style="margin-top: 10px"
+                @click="updateNoteExportDialog">
+                {{ t('dialog.note_export.refresh') }}
             </Button>
-            <h2 style="font-weight: bold; margin: 0">
-                {{ t('dialog.note_export.errors') }}
-            </h2>
-            <pre style="white-space: pre-wrap; font-size: 12px" v-text="errors"></pre>
-        </template>
+            <Button
+                size="sm"
+                class="mr-2"
+                variant="outline"
+                :disabled="loading"
+                style="margin-top: 10px"
+                @click="exportNoteExport">
+                {{ t('dialog.note_export.export') }}
+            </Button>
+            <Button v-if="loading" size="sm" variant="outline" style="margin-top: 10px" @click="cancelNoteExport">
+                {{ t('dialog.note_export.cancel') }}
+            </Button>
+            <span v-if="loading" style="margin: 10px">
+                <Loader2 style="margin-right: 5px" />
+                {{ t('dialog.note_export.progress') }} {{ progress }}/{{ progressTotal }}
+            </span>
 
-        <DataTableLayout
-            class="min-w-0 w-full"
-            :table="table"
-            :loading="loading"
-            :table-style="tableStyle"
-            :show-pagination="false"
-            style="margin-top: 10px" />
-    </el-dialog>
+            <template v-if="errors">
+                <Button size="sm" variant="outline" @click="errors = ''">
+                    {{ t('dialog.note_export.clear_errors') }}
+                </Button>
+                <h2 style="font-weight: bold; margin: 0">
+                    {{ t('dialog.note_export.errors') }}
+                </h2>
+                <pre style="white-space: pre-wrap; font-size: 12px" v-text="errors"></pre>
+            </template>
+
+            <DataTableLayout
+                class="min-w-0 w-full"
+                :table="table"
+                :loading="loading"
+                :table-style="tableStyle"
+                :show-pagination="false"
+                style="margin-top: 10px" />
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
+    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { computed, ref, watch } from 'vue';
     import { Button } from '@/components/ui/button';
     import { DataTableLayout } from '@/components/ui/data-table';