From 59700b90abfd130ff0665a10f1e1e410fa65bfe3 Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Mon, 12 Jan 2026 18:10:14 +0900
Subject: [PATCH] replace some el-button

---
 src/components/InviteYourself.vue             |  23 ++-
 src/components/dialogs/CustomNavDialog.vue    |  93 +++++-----
 .../GroupMemberModerationDialog.vue           | 166 +++++++++---------
 .../dialogs/InviteDialog/SendInviteDialog.vue |  22 +--
 .../PreviousInstancesGroupDialog.vue          |  38 ++--
 .../PreviousInstancesWorldDialog.vue          |  41 +++--
 .../dialogs/UserDialog/BioDialog.vue          |  16 +-
 .../PreviousInstancesUserDialog.vue           |  54 +++---
 .../UserDialog/SendInviteRequestDialog.vue    |  19 +-
 .../WorldDialog/WorldAllowedDomainsDialog.vue |  12 +-
 src/views/Favorites/FavoritesAvatar.vue       |  69 +++++---
 src/views/Favorites/FavoritesFriend.vue       |  31 ++--
 src/views/Favorites/FavoritesWorld.vue        |  62 ++++---
 .../components/FavoritesAvatarItem.vue        |  51 +++---
 .../FavoritesAvatarLocalHistoryItem.vue       |  38 ++--
 .../components/FavoritesFriendItem.vue        |  34 ++--
 .../components/FavoritesMoveDropdown.vue      |   6 +-
 .../components/FavoritesWorldItem.vue         |  60 ++++---
 .../components/FavoritesWorldLocalItem.vue    |  49 +++---
 .../Favorites/dialogs/AvatarImportDialog.vue  |  30 ++--
 .../Favorites/dialogs/FriendImportDialog.vue  |  35 ++--
 .../Favorites/dialogs/WorldImportDialog.vue   |  37 ++--
 src/views/FriendList/FriendList.vue           |  25 +--
 .../SendInviteRequestResponseDialog.vue       |  20 +--
 .../SendInviteResponseConfirmDialog.vue       |   8 +-
 .../dialogs/SendInviteResponseDialog.vue      |  19 +-
 .../Settings/dialogs/AvatarProviderDialog.vue |   9 +-
 .../Settings/dialogs/RegistryBackupDialog.vue |  48 ++---
 src/views/Tools/Gallery.vue                   | 149 ++++++++--------
 29 files changed, 697 insertions(+), 567 deletions(-)

diff --git a/src/components/InviteYourself.vue b/src/components/InviteYourself.vue
index 68491a12..3f2c2425 100644
--- a/src/components/InviteYourself.vue
+++ b/src/components/InviteYourself.vue
@@ -1,21 +1,28 @@
 <template>
     <div v-if="isVisible" :class="['inline-block']">
         <TooltipWrapper v-if="!canOpenInstanceInGame" side="top" :content="t('dialog.user.info.self_invite_tooltip')">
-            <el-button v-show="isVisible" @click="confirmInvite" size="small" :icon="Message" circle />
+            <Button
+                class="rounded-full h-6 w-6 text-xs"
+                size="icon-sm"
+                variant="outline"
+                v-show="isVisible"
+                @click="confirmInvite"
+                ><i class="ri-mail-line"></i
+            ></Button>
         </TooltipWrapper>
         <TooltipWrapper v-else side="top" :content="t('dialog.user.info.open_in_vrchat_tooltip')">
-            <el-button v-if="isOpeningInstance" size="small" circle>
-                <el-icon class="is-loading">
-                    <Loading />
-                </el-icon>
-            </el-button>
-            <el-button v-else @click="openInstance" size="small" :icon="Message" circle />
+            <Button class="rounded-full h-6 w-6 text-xs" size="icon-sm" variant="outline" v-if="isOpeningInstance">
+                <i class="ri-loader-line"></i>
+            </Button>
+            <Button class="rounded-full h-6 w-6 text-xs" size="icon-sm" variant="outline" v-else @click="openInstance"
+                ><i class="ri-mail-line"></i
+            ></Button>
         </TooltipWrapper>
     </div>
 </template>
 
 <script setup>
-    import { Loading, Message } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
     import { computed } from 'vue';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
diff --git a/src/components/dialogs/CustomNavDialog.vue b/src/components/dialogs/CustomNavDialog.vue
index 77204a1f..05d8cbeb 100644
--- a/src/components/dialogs/CustomNavDialog.vue
+++ b/src/components/dialogs/CustomNavDialog.vue
@@ -18,16 +18,22 @@
                     </div>
                     <div class="custom-nav-entry__controls">
                         <div class="custom-nav-entry__move">
-                            <el-button circle size="small" :disabled="index === 0" @click="handleMoveEntry(index, -1)">
+                            <Button
+                                class="rounded-full w-6 h-6 text-xs"
+                                size="icon-sm"
+                                variant="outline"
+                                :disabled="index === 0"
+                                @click="handleMoveEntry(index, -1)">
                                 <i class="ri-arrow-up-line"></i>
-                            </el-button>
-                            <el-button
-                                circle
-                                size="small"
+                            </Button>
+                            <Button
+                                class="rounded-full w-6 h-6 text-xs"
+                                size="icon-sm"
+                                variant="outline"
                                 :disabled="index === localLayout.length - 1"
                                 @click="handleMoveEntry(index, 1)">
                                 <i class="ri-arrow-down-line"></i>
-                            </el-button>
+                            </Button>
                         </div>
                     </div>
                 </template>
@@ -38,25 +44,27 @@
                             <span>{{ entry.name?.trim() || t('nav_menu.custom_nav.folder_name_placeholder') }}</span>
                         </div>
                         <div class="custom-nav-entry__actions">
-                            <el-button size="small" plain @click="openFolderEditor(index)">
+                            <Button size="icon-sm w-6 h-6 text-xs" variant="outline" @click="openFolderEditor(index)">
                                 <i class="ri-edit-box-line"></i>
                                 {{ t('nav_menu.custom_nav.edit_folder') }}
-                            </el-button>
+                            </Button>
                             <div class="custom-nav-entry__move">
-                                <el-button
-                                    circle
-                                    size="small"
+                                <Button
+                                    class="rounded-full text-xs w-6 h-6"
+                                    size="icon-sm"
+                                    variant="outline"
                                     :disabled="index === 0"
                                     @click="handleMoveEntry(index, -1)">
                                     <i class="ri-arrow-up-line"></i>
-                                </el-button>
-                                <el-button
-                                    circle
-                                    size="small"
+                                </Button>
+                                <Button
+                                    class="rounded-full text-xs w-6 h-6"
+                                    size="icon-sm"
+                                    variant="outline"
                                     :disabled="index === localLayout.length - 1"
                                     @click="handleMoveEntry(index, 1)">
                                     <i class="ri-arrow-down-line"></i>
-                                </el-button>
+                                </Button>
                             </div>
                         </div>
                     </div>
@@ -85,20 +93,20 @@
         <template #footer>
             <div class="custom-nav-dialog__footer">
                 <div class="custom-nav-dialog__footer-left">
-                    <el-button type="primary" plain @click="openFolderEditor()">
+                    <Button variant="outline" @click="openFolderEditor()">
                         {{ t('nav_menu.custom_nav.add_folder') }}
-                    </el-button>
-                    <el-button type="warning" plain @click="handleReset">
+                    </Button>
+                    <Button variant="outline" @click="handleReset">
                         {{ t('nav_menu.custom_nav.restore_default') }}
-                    </el-button>
+                    </Button>
                 </div>
                 <div class="custom-nav-dialog__footer-right">
-                    <el-button @click="handleClose">
+                    <Button variant="secondary" @click="handleClose">
                         {{ t('nav_menu.custom_nav.cancel') }}
-                    </el-button>
-                    <el-button type="primary" :disabled="isSaveDisabled" @click="handleSave">
+                    </Button>
+                    <Button :disabled="isSaveDisabled" @click="handleSave">
                         {{ t('nav_menu.custom_nav.save') }}
-                    </el-button>
+                    </Button>
                 </div>
             </div>
         </template>
@@ -156,24 +164,26 @@
                         </div>
                         <div class="folder-editor__selected-actions">
                             <div class="custom-nav-entry__move">
-                                <el-button
-                                    circle
-                                    size="small"
+                                <Button
+                                    class="rounded-full text-xs w-6 h-6"
+                                    size="icon-sm"
+                                    variant="outline"
                                     :disabled="index === 0"
                                     @click="handleFolderItemMove(index, -1)">
                                     <i class="ri-arrow-up-line"></i>
-                                </el-button>
-                                <el-button
-                                    circle
-                                    size="small"
+                                </Button>
+                                <Button
+                                    class="rounded-full text-xs w-6 h-6"
+                                    size="icon-sm"
+                                    variant="outline"
                                     :disabled="index === folderEditor.data.items.length - 1"
                                     @click="handleFolderItemMove(index, 1)">
                                     <i class="ri-arrow-down-line"></i>
-                                </el-button>
+                                </Button>
                             </div>
-                            <el-button size="small" text @click="toggleFolderItem(key, false)">
+                            <Button size="sm" variant="outline" @click="toggleFolderItem(key, false)">
                                 {{ t('nav_menu.custom_nav.remove_from_folder') }}
-                            </el-button>
+                            </Button>
                         </div>
                     </div>
                 </div>
@@ -181,20 +191,20 @@
         </div>
         <template #footer>
             <div class="folder-editor__footer">
-                <el-button
+                <Button
+                    variant="destructive"
                     v-if="folderEditor.isEditing"
-                    type="danger"
                     :disabled="!canDeleteFolder"
                     @click="handleFolderEditorDelete">
                     {{ t('nav_menu.custom_nav.delete_folder') }}
-                </el-button>
+                </Button>
                 <div class="folder-editor__footer-spacer"></div>
-                <el-button @click="closeFolderEditor">
+                <Button variant="secondary" @click="closeFolderEditor">
                     {{ t('nav_menu.custom_nav.cancel') }}
-                </el-button>
-                <el-button type="primary" :disabled="folderEditorSaveDisabled" @click="handleFolderEditorSave">
+                </Button>
+                <Button :disabled="folderEditorSaveDisabled" @click="handleFolderEditorSave">
                     {{ t('nav_menu.custom_nav.save') }}
-                </el-button>
+                </Button>
             </div>
         </template>
     </el-dialog>
@@ -202,6 +212,7 @@
 
 <script setup>
     import { computed, reactive, ref, watch } from 'vue';
+    import { Button } from '@/components/ui/button';
     import { useI18n } from 'vue-i18n';
 
     import dayjs from 'dayjs';
diff --git a/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue b/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
index 23dc6fb9..2f54f580 100644
--- a/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
@@ -70,8 +70,9 @@
                                             !hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')
                                         )
                                     ">
-                                    <el-button
-                                        size="small"
+                                    <Button
+                                        size="sm"
+                                        variant="outline"
                                         :disabled="
                                             Boolean(
                                                 isGroupMembersLoading ||
@@ -84,7 +85,7 @@
                                             {{ t(memberFilter.name) }}
                                             <el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
                                         </span>
-                                    </el-button>
+                                    </Button>
                                 </DropdownMenuTrigger>
                                 <DropdownMenuContent>
                                     <DropdownMenuItem
@@ -110,20 +111,18 @@
                             style="margin-top: 10px; margin-bottom: 10px"
                             @input="groupMembersSearch"></el-input>
                         <br />
-                        <el-button size="small" @click="selectAllGroupMembers">{{
+                        <Button size="sm" variant="outline" @click="selectAllGroupMembers">{{
                             t('dialog.group_member_moderation.select_all')
-                        }}</el-button>
+                        }}</Button>
                         <DataTable
                             v-if="groupMemberModerationTable.data.length"
                             v-bind="groupMemberModerationTable"
                             style="margin-top: 10px">
                             <el-table-column width="55" prop="$selected">
                                 <template #default="scope">
-                                    <el-button text size="small" @click.stop>
-                                        <Checkbox
-                                            v-model="scope.row.$selected"
-                                            @update:modelValue="groupMemberModerationTableSelectionChange(scope.row)" />
-                                    </el-button>
+                                    <Checkbox
+                                        v-model="scope.row.$selected"
+                                        @update:modelValue="groupMemberModerationTableSelectionChange(scope.row)" />
                                 </template>
                             </el-table-column>
                             <el-table-column
@@ -228,17 +227,15 @@
                             :placeholder="t('dialog.group.members.search')"
                             style="margin-top: 10px; margin-bottom: 10px"></el-input>
                         <br />
-                        <el-button size="small" @click="selectAllGroupBans">{{
+                        <Button size="sm" variant="outline" @click="selectAllGroupBans">{{
                             t('dialog.group_member_moderation.select_all')
-                        }}</el-button>
+                        }}</Button>
                         <DataTable v-bind="groupBansModerationTable" style="margin-top: 10px">
                             <el-table-column width="55" prop="$selected">
                                 <template #default="scope">
-                                    <el-button text size="small" @click.stop>
-                                        <Checkbox
-                                            v-model="scope.row.$selected"
-                                            @update:modelValue="groupMemberModerationTableSelectionChange(scope.row)" />
-                                    </el-button>
+                                    <Checkbox
+                                        v-model="scope.row.$selected"
+                                        @update:modelValue="groupMemberModerationTableSelectionChange(scope.row)" />
                                 </template>
                             </el-table-column>
                             <el-table-column
@@ -342,19 +339,17 @@
                                         groupInvitesModerationTable.data.length
                                     }}</span>
                                 </template>
-                                <el-button size="small" @click="selectAllGroupInvites">{{
+                                <Button size="sm" variant="outline" @click="selectAllGroupInvites">{{
                                     t('dialog.group_member_moderation.select_all')
-                                }}</el-button>
+                                }}</Button>
                                 <DataTable v-bind="groupInvitesModerationTable" style="margin-top: 10px">
                                     <el-table-column width="55" prop="$selected">
                                         <template #default="scope">
-                                            <el-button text size="small" @click.stop>
-                                                <Checkbox
-                                                    v-model="scope.row.$selected"
-                                                    @update:modelValue="
-                                                        groupMemberModerationTableSelectionChange(scope.row)
-                                                    " />
-                                            </el-button>
+                                            <Checkbox
+                                                v-model="scope.row.$selected"
+                                                @update:modelValue="
+                                                    groupMemberModerationTableSelectionChange(scope.row)
+                                                " />
                                         </template>
                                     </el-table-column>
                                     <el-table-column
@@ -403,7 +398,8 @@
                                     </el-table-column>
                                 </DataTable>
                                 <br />
-                                <el-button
+                                <Button
+                                    variant="outline"
                                     :disabled="
                                         Boolean(
                                             progressCurrent ||
@@ -411,7 +407,7 @@
                                         )
                                     "
                                     @click="groupMembersDeleteSentInvite"
-                                    >{{ t('dialog.group_member_moderation.delete_sent_invite') }}</el-button
+                                    >{{ t('dialog.group_member_moderation.delete_sent_invite') }}</Button
                                 >
                             </el-tab-pane>
 
@@ -424,19 +420,17 @@
                                         groupJoinRequestsModerationTable.data.length
                                     }}</span>
                                 </template>
-                                <el-button size="small" @click="selectAllGroupJoinRequests">{{
+                                <Button size="sm" variant="outline" @click="selectAllGroupJoinRequests">{{
                                     t('dialog.group_member_moderation.select_all')
-                                }}</el-button>
+                                }}</Button>
                                 <DataTable v-bind="groupJoinRequestsModerationTable" style="margin-top: 10px">
                                     <el-table-column width="55" prop="$selected">
                                         <template #default="scope">
-                                            <el-button text size="small" @click.stop>
-                                                <Checkbox
-                                                    v-model="scope.row.$selected"
-                                                    @update:modelValue="
-                                                        groupMemberModerationTableSelectionChange(scope.row)
-                                                    " />
-                                            </el-button>
+                                            <Checkbox
+                                                v-model="scope.row.$selected"
+                                                @update:modelValue="
+                                                    groupMemberModerationTableSelectionChange(scope.row)
+                                                " />
                                         </template>
                                     </el-table-column>
                                     <el-table-column
@@ -485,7 +479,8 @@
                                     </el-table-column>
                                 </DataTable>
                                 <br />
-                                <el-button
+                                <Button
+                                    variant="outline"
                                     :disabled="
                                         Boolean(
                                             progressCurrent ||
@@ -493,9 +488,10 @@
                                         )
                                     "
                                     @click="groupMembersAcceptInviteRequest"
-                                    >{{ t('dialog.group_member_moderation.accept_join_requests') }}</el-button
+                                    >{{ t('dialog.group_member_moderation.accept_join_requests') }}</Button
                                 >
-                                <el-button
+                                <Button
+                                    variant="outline"
                                     :disabled="
                                         Boolean(
                                             progressCurrent ||
@@ -503,9 +499,10 @@
                                         )
                                     "
                                     @click="groupMembersRejectInviteRequest"
-                                    >{{ t('dialog.group_member_moderation.reject_join_requests') }}</el-button
+                                    >{{ t('dialog.group_member_moderation.reject_join_requests') }}</Button
                                 >
-                                <el-button
+                                <Button
+                                    variant="outline"
                                     :disabled="
                                         Boolean(
                                             progressCurrent ||
@@ -513,7 +510,7 @@
                                         )
                                     "
                                     @click="groupMembersBlockJoinRequest"
-                                    >{{ t('dialog.group_member_moderation.block_join_requests') }}</el-button
+                                    >{{ t('dialog.group_member_moderation.block_join_requests') }}</Button
                                 >
                             </el-tab-pane>
 
@@ -526,19 +523,17 @@
                                         groupBlockedModerationTable.data.length
                                     }}</span>
                                 </template>
-                                <el-button size="small" @click="selectAllGroupBlocked">{{
+                                <Button size="sm" variant="outline" @click="selectAllGroupBlocked">{{
                                     t('dialog.group_member_moderation.select_all')
-                                }}</el-button>
+                                }}</Button>
                                 <DataTable v-bind="groupBlockedModerationTable" style="margin-top: 10px">
                                     <el-table-column width="55" prop="$selected">
                                         <template #default="scope">
-                                            <el-button text size="small" @click.stop>
-                                                <Checkbox
-                                                    v-model="scope.row.$selected"
-                                                    @update:modelValue="
-                                                        groupMemberModerationTableSelectionChange(scope.row)
-                                                    " />
-                                            </el-button>
+                                            <Checkbox
+                                                v-model="scope.row.$selected"
+                                                @update:modelValue="
+                                                    groupMemberModerationTableSelectionChange(scope.row)
+                                                " />
                                         </template>
                                     </el-table-column>
                                     <el-table-column
@@ -587,7 +582,8 @@
                                     </el-table-column>
                                 </DataTable>
                                 <br />
-                                <el-button
+                                <Button
+                                    variant="secondary"
                                     :disabled="
                                         Boolean(
                                             progressCurrent ||
@@ -595,7 +591,7 @@
                                         )
                                     "
                                     @click="groupMembersDeleteBlockedRequest"
-                                    >{{ t('dialog.group_member_moderation.delete_blocked_requests') }}</el-button
+                                    >{{ t('dialog.group_member_moderation.delete_blocked_requests') }}</Button
                                 >
                             </el-tab-pane>
                         </el-tabs>
@@ -634,9 +630,9 @@
                                 </Select>
                             </div>
                             <div>
-                                <el-button @click="showGroupLogsExportDialog">{{
+                                <Button variant="outline" @click="showGroupLogsExportDialog">{{
                                     t('dialog.group_member_moderation.export_logs')
-                                }}</el-button>
+                                }}</Button>
                             </div>
                         </div>
                         <el-input
@@ -709,23 +705,25 @@
                 style="margin-top: 5px; width: 340px"
                 :placeholder="t('dialog.group_member_moderation.user_id_placeholder')"
                 clearable></el-input>
-            <el-button
-                size="small"
+            <Button
+                size="sm"
+                variant="outline"
                 style="margin-top: 5px; margin-left: 5px"
                 :disabled="!selectUserId"
                 @click="selectGroupMemberUserId"
-                >{{ t('dialog.group_member_moderation.select_user') }}</el-button
+                >{{ t('dialog.group_member_moderation.select_user') }}</Button
             >
             <br />
             <br />
             <span class="name">{{ t('dialog.group_member_moderation.selected_users') }}</span>
-            <el-button
-                type="default"
-                size="small"
-                :icon="Delete"
-                circle
+            <Button
+                class="rounded-full"
+                size="icon-sm"
+                variant="outline"
                 style="margin-left: 5px"
-                @click="clearSelectedGroupMembers"></el-button>
+                @click="clearSelectedGroupMembers">
+                <Trash2
+            /></Button>
             <br />
             <Badge
                 v-for="user in selectedUsersArray"
@@ -786,7 +784,8 @@
             <br />
             <span class="name">{{ t('dialog.group_member_moderation.actions') }}</span>
             <br />
-            <el-button
+            <Button
+                variant="outline"
                 :disabled="
                     Boolean(
                         !selectedRoles.length ||
@@ -795,9 +794,10 @@
                     )
                 "
                 @click="groupMembersAddRoles"
-                >{{ t('dialog.group_member_moderation.add_roles') }}</el-button
+                >{{ t('dialog.group_member_moderation.add_roles') }}</Button
             >
-            <el-button
+            <Button
+                variant="secondary"
                 :disabled="
                     Boolean(
                         !selectedRoles.length ||
@@ -806,47 +806,51 @@
                     )
                 "
                 @click="groupMembersRemoveRoles"
-                >{{ t('dialog.group_member_moderation.remove_roles') }}</el-button
+                >{{ t('dialog.group_member_moderation.remove_roles') }}</Button
             >
-            <el-button
+            <Button
+                variant="outline"
                 :disabled="
                     Boolean(
                         progressCurrent || !hasGroupPermission(groupMemberModeration.groupRef, 'group-members-manage')
                     )
                 "
                 @click="groupMembersSaveNote"
-                >{{ t('dialog.group_member_moderation.save_note') }}</el-button
+                >{{ t('dialog.group_member_moderation.save_note') }}</Button
             >
-            <el-button
+            <Button
+                variant="outline"
                 :disabled="
                     Boolean(
                         progressCurrent || !hasGroupPermission(groupMemberModeration.groupRef, 'group-members-remove')
                     )
                 "
                 @click="groupMembersKick"
-                >{{ t('dialog.group_member_moderation.kick') }}</el-button
+                >{{ t('dialog.group_member_moderation.kick') }}</Button
             >
-            <el-button
+            <Button
+                variant="outline"
                 :disabled="
                     Boolean(progressCurrent || !hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage'))
                 "
                 @click="groupMembersBan"
-                >{{ t('dialog.group_member_moderation.ban') }}</el-button
+                >{{ t('dialog.group_member_moderation.ban') }}</Button
             >
-            <el-button
+            <Button
+                variant="outline"
                 :disabled="
                     Boolean(progressCurrent || !hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage'))
                 "
                 @click="groupMembersUnban"
-                >{{ t('dialog.group_member_moderation.unban') }}</el-button
+                >{{ t('dialog.group_member_moderation.unban') }}</Button
             >
             <span v-if="progressCurrent" style="margin-top: 10px">
                 <el-icon class="is-loading" style="margin-left: 5px; margin-right: 5px"><Loading /></el-icon>
                 {{ t('dialog.group_member_moderation.progress') }} {{ progressCurrent }}/{{ progressTotal }}
             </span>
-            <el-button v-if="progressCurrent" style="margin-left: 5px" @click="progressTotal = 0">{{
+            <Button variant="secondary" v-if="progressCurrent" style="margin-left: 5px" @click="progressTotal = 0">{{
                 t('dialog.group_member_moderation.cancel')
-            }}</el-button>
+            }}</Button>
         </div>
         <group-member-moderation-export-dialog
             v-model:isGroupLogsExportDialogVisible="isGroupLogsExportDialogVisible"
@@ -855,8 +859,10 @@
 </template>
 
 <script setup>
-    import { ArrowDown, Delete, Loading, Refresh, Warning } from '@element-plus/icons-vue';
+    import { ArrowDown, Loading, Refresh, Warning } from '@element-plus/icons-vue';
     import { reactive, ref, watch } from 'vue';
+    import { Button } from '@/components/ui/button';
+    import { Trash2 } from 'lucide-vue-next';
     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 01330f5c..d43db81b 100644
--- a/src/components/dialogs/InviteDialog/SendInviteDialog.vue
+++ b/src/components/dialogs/InviteDialog/SendInviteDialog.vue
@@ -57,22 +57,24 @@
             </el-table-column>
             <el-table-column :label="t('table.profile.invite_messages.action')" width="70" align="right">
                 <template #default="scope">
-                    <el-button
-                        text
-                        :icon="Edit"
-                        size="small"
-                        @click.stop="showEditAndSendInviteDialog(scope.row)"></el-button>
+                    <Button
+                        size="icon-sm"
+                        class="w-6 h-6"
+                        variant="ghost"
+                        @click.stop="showEditAndSendInviteDialog(scope.row)">
+                        <SquarePen />
+                    </Button>
                 </template>
             </el-table-column>
         </DataTable>
 
         <template #footer>
-            <el-button @click="cancelSendInvite">
+            <Button variant="secondary" @click="cancelSendInvite">
                 {{ t('dialog.invite_message.cancel') }}
-            </el-button>
-            <el-button @click="refreshInviteMessageTableData('message')">
+            </Button>
+            <Button variant="outline" @click="refreshInviteMessageTableData('message')">
                 {{ t('dialog.invite_message.refresh') }}
-            </el-button>
+            </Button>
         </template>
         <SendInviteConfirmDialog
             v-model:isSendInviteConfirmDialogVisible="isSendInviteConfirmDialogVisible"
@@ -90,7 +92,7 @@
 </template>
 
 <script setup>
-    import { Edit } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
     import { ref } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
diff --git a/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesGroupDialog.vue b/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesGroupDialog.vue
index 08a5105d..e1225b58 100644
--- a/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesGroupDialog.vue
+++ b/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesGroupDialog.vue
@@ -37,24 +37,30 @@
 
             <el-table-column :label="t('table.previous_instances.action')" width="90" align="right">
                 <template #default="scope">
-                    <el-button
-                        text
-                        :icon="DataLine"
-                        size="small"
-                        @click="showPreviousInstancesInfoDialog(scope.row.location)" />
-                    <el-button
+                    <Button
+                        size="icon-sm"
+                        class="w-6 h-6 text-xs"
+                        variant="ghost"
+                        @click="showPreviousInstancesInfoDialog(scope.row.location)"
+                        ><i class="ri-information-line"></i
+                    ></Button>
+                    <Button
+                        size="icon-sm"
+                        variant="ghost"
+                        class="w-6 h-6 text-xs"
                         v-if="shiftHeld"
                         style="color: #f56c6c"
-                        text
-                        :icon="Close"
-                        size="small"
-                        @click="deleteGameLogGroupInstance(scope.row)" />
-                    <el-button
+                        @click="deleteGameLogGroupInstance(scope.row)"
+                        ><i class="ri-delete-bin-line"></i
+                    ></Button>
+                    <Button
+                        size="icon-sm"
+                        variant="ghost"
+                        class="w-6 h-6 text-xs"
                         v-else
-                        text
-                        :icon="Close"
-                        size="small"
-                        @click="deleteGameLogGroupInstancePrompt(scope.row)" />
+                        @click="deleteGameLogGroupInstancePrompt(scope.row)"
+                        ><i class="ri-delete-bin-line"></i
+                    ></Button>
                 </template>
             </el-table-column>
         </DataTable>
@@ -63,7 +69,7 @@
 
 <script setup>
     import { computed, nextTick, reactive, ref, watch } from 'vue';
-    import { Close, DataLine } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
     import { ElMessageBox } from 'element-plus';
     import { useI18n } from 'vue-i18n';
 
diff --git a/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesWorldDialog.vue b/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesWorldDialog.vue
index 7b284042..c146768b 100644
--- a/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesWorldDialog.vue
+++ b/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesWorldDialog.vue
@@ -41,27 +41,30 @@
             </el-table-column>
             <el-table-column :label="t('table.previous_instances.action')" width="90" align="right">
                 <template #default="scope">
-                    <el-button
-                        text
-                        :icon="DataLine"
-                        size="small"
-                        class="button-pd-0"
-                        @click="showPreviousInstancesInfoDialog(scope.row.location)"></el-button>
-                    <el-button
+                    <Button
+                        size="icon-sm"
+                        variant="ghost"
+                        class="button-pd-0 w-6 h-6 text-xs"
+                        @click="showPreviousInstancesInfoDialog(scope.row.location)"
+                        ><i class="ri-information-line"></i
+                    ></Button>
+                    <Button
+                        size="icon-sm"
+                        variant="ghost"
                         v-if="shiftHeld"
                         style="color: #f56c6c"
-                        text
-                        :icon="Close"
-                        size="small"
-                        class="button-pd-0"
-                        @click="deleteGameLogWorldInstance(scope.row)"></el-button>
-                    <el-button
+                        class="button-pd-0 w-6 h-6 text-xs"
+                        @click="deleteGameLogWorldInstance(scope.row)"
+                        ><i class="ri-delete-bin-line"></i
+                    ></Button>
+                    <Button
+                        size="icon-sm"
+                        variant="ghost"
                         v-else
-                        text
-                        :icon="Close"
-                        size="small"
-                        class="button-pd-0"
-                        @click="deleteGameLogWorldInstancePrompt(scope.row)"></el-button>
+                        class="button-pd-0 w-6 h-6 text-xs"
+                        @click="deleteGameLogWorldInstancePrompt(scope.row)"
+                        ><i class="ri-delete-bin-line"></i
+                    ></Button>
                 </template>
             </el-table-column>
         </DataTable>
@@ -70,7 +73,7 @@
 
 <script setup>
     import { computed, nextTick, reactive, ref, watch } from 'vue';
-    import { Close, DataLine } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
     import { ElMessageBox } from 'element-plus';
     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 f7abb6be..aeed5dce 100644
--- a/src/components/dialogs/UserDialog/BioDialog.vue
+++ b/src/components/dialogs/UserDialog/BioDialog.vue
@@ -23,27 +23,29 @@
                 show-word-limit
                 style="margin-top: 5px">
                 <img :src="getFaviconUrl(link)" style="width: 16px; height: 16px; vertical-align: middle" />
-                <el-button :icon="Delete" @click="bioDialog.bioLinks.splice(index, 1)" />
+                <Button variant="outline" @click="bioDialog.bioLinks.splice(index, 1)" />
             </el-input>
 
-            <el-button
+            <Button
+                variant="outline"
                 :disabled="bioDialog.bioLinks.length >= 3"
-                size="small"
-                style="margin-top: 5px"
+                size="sm"
+                class="mt-2"
                 @click="bioDialog.bioLinks.push('')">
                 {{ t('dialog.bio.add_link') }}
-            </el-button>
+            </Button>
         </div>
 
         <template #footer>
-            <el-button type="primary" :disabled="bioDialog.loading" @click="saveBio">
+            <Button :disabled="bioDialog.loading" @click="saveBio">
                 {{ t('dialog.bio.update') }}
-            </el-button>
+            </Button>
         </template>
     </el-dialog>
 </template>
 
 <script setup>
+    import { Button } from '@/components/ui/button';
     import { Delete } from '@element-plus/icons-vue';
     import { InputGroupCharCount } from '@/components/ui/input-group';
     import { toast } from 'vue-sonner';
diff --git a/src/components/dialogs/UserDialog/PreviousInstancesUserDialog.vue b/src/components/dialogs/UserDialog/PreviousInstancesUserDialog.vue
index 5bd5397a..1b75f827 100644
--- a/src/components/dialogs/UserDialog/PreviousInstancesUserDialog.vue
+++ b/src/components/dialogs/UserDialog/PreviousInstancesUserDialog.vue
@@ -38,33 +38,37 @@
             </el-table-column>
             <el-table-column :label="t('table.previous_instances.action')" width="90" align="right">
                 <template #default="scope">
-                    <el-button
-                        text
-                        :icon="SwitchButton"
-                        size="small"
-                        class="button-pd-0"
-                        @click="showLaunchDialog(scope.row.location)"></el-button>
-                    <el-button
-                        text
-                        :icon="DataLine"
-                        size="small"
-                        class="button-pd-0"
-                        @click="showPreviousInstancesInfoDialog(scope.row.location)"></el-button>
-                    <el-button
+                    <Button
+                        size="icon-sm"
+                        variant="ghost"
+                        class="button-pd-0 w-6 h-6 text-xs"
+                        @click="showLaunchDialog(scope.row.location)"
+                        ><i class="ri-door-open-line"></i
+                    ></Button>
+                    <Button
+                        size="icon-sm"
+                        variant="ghost"
+                        class="button-pd-0 w-6 h-6 text-xs"
+                        @click="showPreviousInstancesInfoDialog(scope.row.location)"
+                        ><i class="ri-information-line"></i
+                    ></Button>
+                    <Button
+                        size="icon-sm"
+                        variant="ghost"
                         v-if="shiftHeld"
                         style="color: #f56c6c"
-                        text
-                        :icon="Close"
-                        size="small"
-                        class="button-pd-0"
-                        @click="deleteGameLogUserInstance(scope.row)"></el-button>
-                    <el-button
+                        class="button-pd-0 w-6 h-6 text-xs"
+                        @click="deleteGameLogUserInstance(scope.row)"
+                        ><i class="ri-delete-bin-line"></i
+                    ></Button>
+                    <Button
+                        size="icon-sm"
+                        variant="ghost"
                         v-else
-                        text
-                        :icon="Close"
-                        size="small"
-                        class="button-pd-0"
-                        @click="deleteGameLogUserInstancePrompt(scope.row)"></el-button>
+                        class="button-pd-0 w-6 h-6 text-xs"
+                        @click="deleteGameLogUserInstancePrompt(scope.row)"
+                        ><i class="ri-delete-bin-line"></i
+                    ></Button>
                 </template>
             </el-table-column>
         </DataTable>
@@ -73,7 +77,7 @@
 
 <script setup>
     import { computed, nextTick, reactive, ref, watch } from 'vue';
-    import { Close, DataLine, SwitchButton } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
     import { ElMessageBox } from 'element-plus';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
diff --git a/src/components/dialogs/UserDialog/SendInviteRequestDialog.vue b/src/components/dialogs/UserDialog/SendInviteRequestDialog.vue
index 94d9a7c6..9d0669e2 100644
--- a/src/components/dialogs/UserDialog/SendInviteRequestDialog.vue
+++ b/src/components/dialogs/UserDialog/SendInviteRequestDialog.vue
@@ -32,20 +32,20 @@
             </el-table-column>
             <el-table-column :label="t('table.profile.invite_messages.action')" width="70" align="right">
                 <template #default="scope">
-                    <el-button
-                        text
-                        :icon="Edit"
-                        size="small"
-                        @click.stop="showEditAndSendInviteDialog(scope.row)"></el-button>
+                    <Button size="icon-sm" variant="ghost" @click.stop="showEditAndSendInviteDialog(scope.row)">
+                        <SquarePen
+                    /></Button>
                 </template>
             </el-table-column>
         </DataTable>
 
         <template #footer>
-            <el-button @click="cancelSendInviteRequest">{{ t('dialog.invite_request_message.cancel') }}</el-button>
-            <el-button @click="refreshInviteMessageTableData('request')">{{
+            <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')
-            }}</el-button>
+            }}</Button>
         </template>
         <SendInviteConfirmDialog
             v-model:isSendInviteConfirmDialogVisible="isSendInviteConfirmDialogVisible"
@@ -63,7 +63,8 @@
 </template>
 
 <script setup>
-    import { Edit } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
+    import { SquarePen } from 'lucide-vue-next';
     import { ref } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
diff --git a/src/components/dialogs/WorldDialog/WorldAllowedDomainsDialog.vue b/src/components/dialogs/WorldDialog/WorldAllowedDomainsDialog.vue
index 01b13bd0..716206a3 100644
--- a/src/components/dialogs/WorldDialog/WorldAllowedDomainsDialog.vue
+++ b/src/components/dialogs/WorldDialog/WorldAllowedDomainsDialog.vue
@@ -12,23 +12,23 @@
                 v-model="urlList[index]"
                 size="small"
                 style="margin-top: 5px">
-                <el-button :icon="Delete" @click="urlList.splice(index, 1)"></el-button>
+                <Button variant="outline" @click="urlList.splice(index, 1)"></Button>
             </el-input>
-            <el-button size="small" style="margin-top: 5px" @click="urlList.push('')">
+            <Button size="sm" variant="outline" style="margin-top: 5px" @click="urlList.push('')">
                 {{ t('dialog.allowed_video_player_domains.add_domain') }}
-            </el-button>
+            </Button>
         </div>
         <template #footer>
-            <el-button type="primary" :disabled="!worldAllowedDomainsDialog.worldId" @click="saveWorldAllowedDomains">
+            <Button :disabled="!worldAllowedDomainsDialog.worldId" @click="saveWorldAllowedDomains">
                 {{ t('dialog.allowed_video_player_domains.save') }}
-            </el-button>
+            </Button>
         </template>
     </el-dialog>
 </template>
 
 <script setup>
     import { computed, ref, watch } from 'vue';
-    import { Delete } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
diff --git a/src/views/Favorites/FavoritesAvatar.vue b/src/views/Favorites/FavoritesAvatar.vue
index 27b1c04f..6a0c6b0a 100644
--- a/src/views/Favorites/FavoritesAvatar.vue
+++ b/src/views/Favorites/FavoritesAvatar.vue
@@ -35,7 +35,7 @@
                     @input="searchAvatarFavorites" />
                 <DropdownMenu v-model:open="avatarToolbarMenuOpen">
                     <DropdownMenuTrigger as-child>
-                        <el-button :icon="MoreFilled" size="small" circle />
+                        <Button class="rounded-full" size="icon-sm" variant="ghost"> <Ellipsis /> </Button>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent class="favorites-dropdown">
                         <li class="favorites-dropdown__control" @click.stop>
@@ -195,16 +195,19 @@
                         <div class="group-section__header">
                             <span>{{ t('view.favorite.avatars.local_favorites') }}</span>
                             <template v-if="!refreshingLocalFavorites">
-                                <el-button
-                                    size="small"
-                                    :icon="Refresh"
-                                    circle
-                                    @click.stop="refreshLocalAvatarFavorites" />
+                                <Button
+                                    class="rounded-full"
+                                    size="icon"
+                                    variant="outline"
+                                    @click.stop="refreshLocalAvatarFavorites"
+                                    ><RefreshCcw
+                                /></Button>
                             </template>
-                            <el-button v-else size="small" text @click.stop="cancelLocalAvatarRefresh">
-                                <el-icon class="is-loading"><Loading /></el-icon>
+                            <Button size="sm" variant="ghost" v-else @click.stop="cancelLocalAvatarRefresh">
+                                <Loader />
+
                                 {{ t('view.favorite.avatars.cancel_refresh') }}
-                            </el-button>
+                            </Button>
                         </div>
                         <div class="group-section__list">
                             <template v-if="localAvatarFavoriteGroups.length">
@@ -226,12 +229,13 @@
                                                 :open="activeGroupMenu === localGroupMenuKey(group)"
                                                 @update:open="handleGroupMenuVisible(localGroupMenuKey(group), $event)">
                                                 <PopoverTrigger asChild>
-                                                    <el-button
-                                                        text
-                                                        size="small"
-                                                        :icon="MoreFilled"
-                                                        circle
-                                                        @click.stop></el-button>
+                                                    <Button
+                                                        class="rounded-full"
+                                                        size="icon-sm"
+                                                        variant="ghost"
+                                                        @click.stop
+                                                        ><Ellipsis
+                                                    /></Button>
                                                 </PopoverTrigger>
                                                 <PopoverContent side="right" class="w-50 p-1 rounded-lg">
                                                     <div class="favorites-group-menu">
@@ -295,7 +299,9 @@
                                 :open="activeGroupMenu === historyGroupMenuKey"
                                 @update:open="handleGroupMenuVisible(historyGroupMenuKey, $event)">
                                 <PopoverTrigger asChild>
-                                    <el-button text size="small" :icon="MoreFilled" circle @click.stop></el-button>
+                                    <Button class="rounded-full" size="icon-sm" variant="ghost" @click.stop
+                                        ><Ellipsis
+                                    /></Button>
                                 </PopoverTrigger>
                                 <PopoverContent side="right" class="w-45 p-1 rounded-lg">
                                     <div class="favorites-group-menu">
@@ -359,25 +365,34 @@
                         <div
                             v-if="avatarEditMode && !isSearchActive && activeRemoteGroup"
                             class="favorites-content__actions">
-                            <el-button size="small" @click="toggleSelectAllAvatars">
+                            <Button size="sm" variant="outline" @click="toggleSelectAllAvatars">
                                 {{
                                     isAllAvatarsSelected
                                         ? t('view.favorite.deselect_all')
                                         : t('view.favorite.select_all')
                                 }}
-                            </el-button>
-                            <el-button size="small" :disabled="!hasAvatarSelection" @click="clearSelectedAvatars">
+                            </Button>
+                            <Button
+                                size="sm"
+                                variant="secondary"
+                                :disabled="!hasAvatarSelection"
+                                @click="clearSelectedAvatars">
                                 {{ t('view.favorite.clear') }}
-                            </el-button>
-                            <el-button size="small" :disabled="!hasAvatarSelection" @click="copySelectedAvatars">
+                            </Button>
+                            <Button
+                                size="sm"
+                                variant="outline"
+                                :disabled="!hasAvatarSelection"
+                                @click="copySelectedAvatars">
                                 {{ t('view.favorite.copy') }}
-                            </el-button>
-                            <el-button
-                                size="small"
+                            </Button>
+                            <Button
+                                size="sm"
+                                variant="outline"
                                 :disabled="!hasAvatarSelection"
                                 @click="showAvatarBulkUnfavoriteSelectionConfirm">
                                 {{ t('view.favorite.bulk_unfavorite') }}
-                            </el-button>
+                            </Button>
                         </div>
                     </div>
                     <div ref="avatarFavoritesContainerRef" class="favorites-content__list">
@@ -496,8 +511,10 @@
 
 <script setup>
     import { computed, h, nextTick, onBeforeMount, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
-    import { Loading, MoreFilled, Plus, Refresh } from '@element-plus/icons-vue';
     import { ElMessageBox, ElNotification, ElProgress } from 'element-plus';
+    import { MoreFilled, Plus, Refresh } from '@element-plus/icons-vue';
+    import { Ellipsis, RefreshCcw } from 'lucide-vue-next';
+    import { Button } from '@/components/ui/button';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
diff --git a/src/views/Favorites/FavoritesFriend.vue b/src/views/Favorites/FavoritesFriend.vue
index e9eed49c..3d3b3c91 100644
--- a/src/views/Favorites/FavoritesFriend.vue
+++ b/src/views/Favorites/FavoritesFriend.vue
@@ -35,7 +35,7 @@
                     @input="searchFriendFavorites" />
                 <DropdownMenu v-model:open="friendToolbarMenuOpen">
                     <DropdownMenuTrigger as-child>
-                        <el-button :icon="MoreFilled" size="small" circle />
+                        <Button class="rounded-full" size="icon-sm" variant="ghost"><Ellipsis /></Button>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent class="favorites-dropdown">
                         <li class="favorites-dropdown__control" @click.stop>
@@ -196,25 +196,34 @@
                     </div>
                     <div class="favorites-content__edit-actions">
                         <div v-if="friendEditMode && !isSearchActive" class="favorites-content__actions">
-                            <el-button size="small" @click="toggleSelectAllFriends">
+                            <Button size="sm" variant="outline" @click="toggleSelectAllFriends">
                                 {{
                                     isAllFriendsSelected
                                         ? t('view.favorite.deselect_all')
                                         : t('view.favorite.select_all')
                                 }}
-                            </el-button>
-                            <el-button size="small" :disabled="!hasFriendSelection" @click="clearSelectedFriends">
+                            </Button>
+                            <Button
+                                size="sm"
+                                variant="secondary"
+                                :disabled="!hasFriendSelection"
+                                @click="clearSelectedFriends">
                                 {{ t('view.favorite.clear') }}
-                            </el-button>
-                            <el-button size="small" :disabled="!hasFriendSelection" @click="copySelectedFriends">
+                            </Button>
+                            <Button
+                                size="sm"
+                                variant="outline"
+                                :disabled="!hasFriendSelection"
+                                @click="copySelectedFriends">
                                 {{ t('view.favorite.copy') }}
-                            </el-button>
-                            <el-button
-                                size="small"
+                            </Button>
+                            <Button
+                                size="sm"
+                                variant="outline"
                                 :disabled="!hasFriendSelection"
                                 @click="showFriendBulkUnfavoriteSelectionConfirm">
                                 {{ t('view.favorite.bulk_unfavorite') }}
-                            </el-button>
+                            </Button>
                         </div>
                     </div>
                     <div ref="friendFavoritesContainerRef" class="favorites-content__list">
@@ -287,7 +296,9 @@
 <script setup>
     import { computed, onBeforeMount, ref, watch } from 'vue';
     import { MoreFilled, Refresh } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
     import { ElMessageBox } from 'element-plus';
+    import { Ellipsis } from 'lucide-vue-next';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
diff --git a/src/views/Favorites/FavoritesWorld.vue b/src/views/Favorites/FavoritesWorld.vue
index cacd2df6..56d1d0e2 100644
--- a/src/views/Favorites/FavoritesWorld.vue
+++ b/src/views/Favorites/FavoritesWorld.vue
@@ -35,7 +35,7 @@
                     @input="searchWorldFavorites" />
                 <DropdownMenu v-model:open="worldToolbarMenuOpen">
                     <DropdownMenuTrigger as-child>
-                        <el-button :icon="MoreFilled" size="small" circle />
+                        <Button class="rounded-full" size="icon" variant="outline"><Ellipsis /></Button>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent class="favorites-dropdown">
                         <li class="favorites-dropdown__control" @click.stop>
@@ -194,16 +194,18 @@
                     <div class="group-section">
                         <div class="group-section__header">
                             <span>{{ t('view.favorite.worlds.local_favorites') }}</span>
-                            <el-button
+                            <Button
+                                class="rounded-full"
+                                size="icon-sm"
+                                variant="outline"
                                 v-if="!refreshingLocalFavorites"
-                                size="small"
                                 @click.stop="refreshLocalWorldFavorites"
-                                :icon="Refresh"
-                                circle />
-                            <el-button v-else size="small" text @click.stop="cancelLocalWorldRefresh">
-                                <el-icon class="is-loading"><Loading /></el-icon>
+                                ><RefreshCcw
+                            /></Button>
+                            <Button size="icon-sm" variant="ghost" v-else @click.stop="cancelLocalWorldRefresh">
+                                <RefreshCcw />
                                 {{ t('view.favorite.worlds.cancel_refresh') }}
-                            </el-button>
+                            </Button>
                         </div>
                         <div class="group-section__list">
                             <template v-if="localWorldFavoriteGroups.length">
@@ -226,12 +228,13 @@
                                                         handleGroupMenuVisible(localGroupMenuKey(group), $event)
                                                     ">
                                                     <PopoverTrigger asChild>
-                                                        <el-button
-                                                            text
-                                                            size="small"
-                                                            :icon="MoreFilled"
-                                                            circle
-                                                            @click.stop></el-button>
+                                                        <Button
+                                                            class="rounded-full"
+                                                            size="icon-sm"
+                                                            variant="ghost"
+                                                            @click.stop
+                                                            ><Ellipsis
+                                                        /></Button>
                                                     </PopoverTrigger>
                                                     <PopoverContent side="right" class="w-50 p-1 rounded-lg">
                                                         <div class="favorites-group-menu">
@@ -302,25 +305,34 @@
                     </div>
                     <div class="favorites-content__edit-actions">
                         <div v-if="worldEditMode && !isSearchActive" class="favorites-content__actions">
-                            <el-button size="small" @click="toggleSelectAllWorlds">
+                            <Button size="sm" variant="outline" @click="toggleSelectAllWorlds">
                                 {{
                                     isAllWorldsSelected
                                         ? t('view.favorite.deselect_all')
                                         : t('view.favorite.select_all')
                                 }}
-                            </el-button>
-                            <el-button size="small" :disabled="!hasWorldSelection" @click="clearSelectedWorlds">
+                            </Button>
+                            <Button
+                                size="sm"
+                                variant="secondary"
+                                :disabled="!hasWorldSelection"
+                                @click="clearSelectedWorlds">
                                 {{ t('view.favorite.clear') }}
-                            </el-button>
-                            <el-button size="small" :disabled="!hasWorldSelection" @click="copySelectedWorlds">
+                            </Button>
+                            <Button
+                                size="sm"
+                                variant="outline"
+                                :disabled="!hasWorldSelection"
+                                @click="copySelectedWorlds">
                                 {{ t('view.favorite.copy') }}
-                            </el-button>
-                            <el-button
-                                size="small"
+                            </Button>
+                            <Button
+                                size="sm"
+                                variant="outline"
                                 :disabled="!hasWorldSelection"
                                 @click="showWorldBulkUnfavoriteSelectionConfirm">
                                 {{ t('view.favorite.bulk_unfavorite') }}
-                            </el-button>
+                            </Button>
                         </div>
                     </div>
                     <div ref="worldFavoritesContainerRef" class="favorites-content__list">
@@ -413,7 +425,9 @@
 
 <script setup>
     import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue';
-    import { Loading, MoreFilled, Plus, Refresh } from '@element-plus/icons-vue';
+    import { MoreFilled, Plus, Refresh } from '@element-plus/icons-vue';
+    import { Ellipsis, RefreshCcw } from 'lucide-vue-next';
+    import { Button } from '@/components/ui/button';
     import { ElMessageBox } from 'element-plus';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
diff --git a/src/views/Favorites/components/FavoritesAvatarItem.vue b/src/views/Favorites/components/FavoritesAvatarItem.vue
index d1d460a2..89dfa4a7 100644
--- a/src/views/Favorites/components/FavoritesAvatarItem.vue
+++ b/src/views/Favorites/components/FavoritesAvatarItem.vue
@@ -68,13 +68,14 @@
                     <div class="favorites-search-card__action-group">
                         <div class="favorites-search-card__action" v-if="canSelectAvatar">
                             <TooltipWrapper side="top" :content="t('view.favorite.select_avatar_tooltip')">
-                                <el-button
+                                <Button
+                                    size="icon-sm"
+                                    variant="outline"
                                     :disabled="currentUser.currentAvatar === favorite.id"
-                                    size="small"
-                                    :icon="Check"
-                                    circle
-                                    class="favorites-search-card__action-btn"
-                                    @click.stop="selectAvatarWithConfirmation(favorite.id)" />
+                                    class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
+                                    @click.stop="selectAvatarWithConfirmation(favorite.id)"
+                                    ><i class="ri-check-line"></i
+                                ></Button>
                             </TooltipWrapper>
                         </div>
                         <div class="favorites-search-card__action">
@@ -82,22 +83,22 @@
                                 v-if="showDangerUnfavorite"
                                 side="bottom"
                                 :content="t('view.favorite.unfavorite_tooltip')">
-                                <el-button
-                                    size="small"
-                                    :icon="Close"
-                                    circle
-                                    class="favorites-search-card__action-btn"
-                                    type="danger"
-                                    @click.stop="handlePrimaryDeleteAction" />
+                                <Button
+                                    size="icon-sm"
+                                    variant="destructive"
+                                    class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
+                                    @click.stop="handlePrimaryDeleteAction"
+                                    ><i class="ri-delete-bin-line"></i
+                                ></Button>
                             </TooltipWrapper>
                             <TooltipWrapper v-else side="bottom" :content="t('view.favorite.edit_favorite_tooltip')">
-                                <el-button
-                                    type="default"
-                                    :icon="Star"
-                                    size="small"
-                                    circle
-                                    class="favorites-search-card__action-btn"
-                                    @click.stop="showFavoriteDialog('avatar', favorite.id)" />
+                                <Button
+                                    size="icon-sm"
+                                    variant="outline"
+                                    class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
+                                    @click.stop="showFavoriteDialog('avatar', favorite.id)"
+                                    ><i class="ri-star-line"></i
+                                ></Button>
                             </TooltipWrapper>
                         </div>
                     </div>
@@ -113,9 +114,13 @@
             </div>
             <div class="favorites-search-card__actions">
                 <div class="favorites-search-card__action">
-                    <el-button circle type="default" size="small" @click.stop="handlePrimaryDeleteAction">
+                    <Button
+                        class="rounded-full text-xs h-6 w-6"
+                        size="icon-sm"
+                        variant="outline"
+                        @click.stop="handlePrimaryDeleteAction">
                         <i class="ri-delete-bin-line"></i>
-                    </el-button>
+                    </Button>
                 </div>
             </div>
         </template>
@@ -123,7 +128,7 @@
 </template>
 
 <script setup>
-    import { Check, Close, Star } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
     import { Checkbox } from '@/components/ui/checkbox';
     import { computed } from 'vue';
     import { storeToRefs } from 'pinia';
diff --git a/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue b/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue
index a265aa84..93ddeac4 100644
--- a/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue
+++ b/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue
@@ -15,24 +15,33 @@
             <div class="favorites-search-card__action-group">
                 <div class="favorites-search-card__action">
                     <TooltipWrapper side="top" :content="t('view.favorite.select_avatar_tooltip')">
-                        <el-button
+                        <Button
+                            size="icon-sm"
+                            variant="outline"
                             :disabled="currentUser.currentAvatar === favorite.id"
-                            size="small"
-                            :icon="Check"
-                            circle
-                            class="favorites-search-card__action-btn"
-                            @click.stop="selectAvatarWithConfirmation(favorite.id)" />
+                            class="favorites-search-card__action-btn rounded-full"
+                            @click.stop="selectAvatarWithConfirmation(favorite.id)">
+                            <Check
+                        /></Button>
                     </TooltipWrapper>
                 </div>
                 <div class="favorites-search-card__action">
                     <TooltipWrapper side="bottom" :content="t('view.favorite.favorite_tooltip')">
-                        <el-button
-                            type="default"
-                            :icon="favoriteExists ? Star : StarFilled"
-                            size="small"
-                            circle
-                            class="favorites-search-card__action-btn"
-                            @click.stop="showFavoriteDialog('avatar', favorite.id)" />
+                        <Button
+                            v-if="favoriteExists"
+                            size="icon-sm"
+                            variant="outline"
+                            class="favorites-search-card__action-btn rounded-full"
+                            @click.stop="showFavoriteDialog('avatar', favorite.id)">
+                            <Star />
+                        </Button>
+                        <Button
+                            else
+                            size="icon-sm"
+                            class="favorites-search-card__action-btn rounded-full"
+                            @click.stop="showFavoriteDialog('avatar', favorite.id)">
+                            <Star />
+                        </Button>
                     </TooltipWrapper>
                 </div>
             </div>
@@ -41,7 +50,8 @@
 </template>
 
 <script setup>
-    import { Check, Star, StarFilled } from '@element-plus/icons-vue';
+    import { Check, Star } from 'lucide-vue-next';
+    import { Button } from '@/components/ui/button';
     import { computed } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
diff --git a/src/views/Favorites/components/FavoritesFriendItem.vue b/src/views/Favorites/components/FavoritesFriendItem.vue
index 3af0de20..4f2008fd 100644
--- a/src/views/Favorites/components/FavoritesFriendItem.vue
+++ b/src/views/Favorites/components/FavoritesFriendItem.vue
@@ -34,14 +34,13 @@
                         </div>
                         <div class="favorites-search-card__action">
                             <TooltipWrapper side="left" :content="t('view.favorite.unfavorite_tooltip')">
-                                <el-button
-                                    size="small"
-                                    circle
-                                    class="favorites-search-card__action-btn"
-                                    type="default"
+                                <Button
+                                    size="icon-sm"
+                                    variant="outline"
+                                    class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
                                     @click.stop="handleDeleteFavorite">
                                     <i class="ri-delete-bin-line"></i>
-                                </el-button>
+                                </Button>
                             </TooltipWrapper>
                         </div>
                     </div>
@@ -49,12 +48,13 @@
                 <template v-else>
                     <div class="favorites-search-card__action">
                         <TooltipWrapper side="right" :content="t('view.favorite.edit_favorite_tooltip')">
-                            <el-button
-                                size="small"
-                                :icon="Star"
-                                circle
-                                class="favorites-search-card__action-btn"
-                                @click.stop="showFavoriteDialog('friend', favorite.id)" />
+                            <Button
+                                size="icon-sm"
+                                variant="outline"
+                                class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
+                                @click.stop="showFavoriteDialog('friend', favorite.id)"
+                                ><i class="ri-star-line"></i
+                            ></Button>
                         </TooltipWrapper>
                     </div>
                 </template>
@@ -69,9 +69,13 @@
             </div>
             <div class="favorites-search-card__actions">
                 <div class="favorites-search-card__action">
-                    <el-button circle type="default" size="small" @click.stop="handleDeleteFavorite">
+                    <Button
+                        class="rounded-full text-xs h-6 w-6"
+                        size="icon-sm"
+                        variant="outline"
+                        @click.stop="handleDeleteFavorite">
                         <i class="ri-delete-bin-line"></i>
-                    </el-button>
+                    </Button>
                 </div>
             </div>
         </template>
@@ -79,8 +83,8 @@
 </template>
 
 <script setup>
+    import { Button } from '@/components/ui/button';
     import { Checkbox } from '@/components/ui/checkbox';
-    import { Star } from '@element-plus/icons-vue';
     import { computed } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
diff --git a/src/views/Favorites/components/FavoritesMoveDropdown.vue b/src/views/Favorites/components/FavoritesMoveDropdown.vue
index f0cf2d34..f1177970 100644
--- a/src/views/Favorites/components/FavoritesMoveDropdown.vue
+++ b/src/views/Favorites/components/FavoritesMoveDropdown.vue
@@ -1,7 +1,9 @@
 <template>
     <DropdownMenu v-model:open="moveDropdownOpen" style="margin-left: 5px">
         <DropdownMenuTrigger as-child>
-            <el-button type="default" :icon="Back" size="small" circle></el-button>
+            <Button class="rounded-full w-6 h-6 text-xs" size="icon-sm" variant="ghost"
+                ><i class="ri-arrow-left-line"></i
+            ></Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent class="favorites-dropdown">
             <span style="font-weight: bold; display: block; text-align: center">
@@ -23,7 +25,7 @@
 
 <script setup>
     import { computed, ref } from 'vue';
-    import { Back } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
diff --git a/src/views/Favorites/components/FavoritesWorldItem.vue b/src/views/Favorites/components/FavoritesWorldItem.vue
index 9bfdcd1f..3939ba3f 100644
--- a/src/views/Favorites/components/FavoritesWorldItem.vue
+++ b/src/views/Favorites/components/FavoritesWorldItem.vue
@@ -50,14 +50,13 @@
                                 type="world" />
                         </div>
                         <div class="favorites-search-card__action">
-                            <el-button
-                                size="small"
-                                circle
-                                class="favorites-search-card__action-btn"
-                                type="default"
+                            <Button
+                                size="icon-sm"
+                                variant="outline"
+                                class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
                                 @click.stop="handleDeleteFavorite">
                                 <i class="ri-delete-bin-line"></i>
-                            </el-button>
+                            </Button>
                         </div>
                     </div>
                 </template>
@@ -65,12 +64,13 @@
                     <div class="favorites-search-card__action-group">
                         <div class="favorites-search-card__action">
                             <TooltipWrapper side="top" :content="inviteOrLaunchText">
-                                <el-button
-                                    size="small"
-                                    :icon="Message"
-                                    class="favorites-search-card__action-btn"
+                                <Button
+                                    size="icon-sm"
+                                    variant="outline"
+                                    class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
                                     @click.stop="newInstanceSelfInvite(favorite.id)"
-                                    circle />
+                                    ><i class="ri-mail-line"></i
+                                ></Button>
                             </TooltipWrapper>
                         </div>
                         <div class="favorites-search-card__action">
@@ -78,22 +78,22 @@
                                 v-if="showDangerUnfavorite"
                                 side="top"
                                 :content="t('view.favorite.unfavorite_tooltip')">
-                                <el-button
-                                    size="small"
-                                    :icon="Close"
-                                    circle
-                                    class="favorites-search-card__action-btn"
-                                    type="danger"
-                                    @click.stop="handleDeleteFavorite" />
+                                <Button
+                                    size="icon-sm"
+                                    variant="destructive"
+                                    class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
+                                    @click.stop="handleDeleteFavorite"
+                                    ><i class="ri-star-line"></i
+                                ></Button>
                             </TooltipWrapper>
                             <TooltipWrapper v-else side="top" :content="t('view.favorite.edit_favorite_tooltip')">
-                                <el-button
-                                    type="default"
-                                    :icon="Star"
-                                    size="small"
-                                    circle
-                                    class="favorites-search-card__action-btn"
-                                    @click.stop="showFavoriteDialog('world', favorite.id)" />
+                                <Button
+                                    size="icon-sm"
+                                    variant="outline"
+                                    class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
+                                    @click.stop="showFavoriteDialog('world', favorite.id)"
+                                    ><i class="ri-delete-bin-line"></i
+                                ></Button>
                             </TooltipWrapper>
                         </div>
                     </div>
@@ -113,9 +113,13 @@
             </div>
             <div class="favorites-search-card__actions">
                 <div class="favorites-search-card__action">
-                    <el-button circle type="default" size="small" @click.stop="handleDeleteFavorite">
+                    <Button
+                        class="rounded-full text-xs h-6 w-6"
+                        size="icon-sm"
+                        variant="outline"
+                        @click.stop="handleDeleteFavorite">
                         <i class="ri-delete-bin-line"></i>
-                    </el-button>
+                    </Button>
                 </div>
             </div>
         </template>
@@ -123,7 +127,7 @@
 </template>
 
 <script setup>
-    import { Close, Message, Star } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
     import { Checkbox } from '@/components/ui/checkbox';
     import { computed } from 'vue';
     import { storeToRefs } from 'pinia';
diff --git a/src/views/Favorites/components/FavoritesWorldLocalItem.vue b/src/views/Favorites/components/FavoritesWorldLocalItem.vue
index 26e3de32..e68c2108 100644
--- a/src/views/Favorites/components/FavoritesWorldLocalItem.vue
+++ b/src/views/Favorites/components/FavoritesWorldLocalItem.vue
@@ -47,12 +47,13 @@
                     <div class="favorites-search-card__action-group">
                         <div class="favorites-search-card__action">
                             <TooltipWrapper side="top" :content="inviteOrLaunchText">
-                                <el-button
-                                    size="small"
-                                    :icon="Message"
-                                    class="favorites-search-card__action-btn"
+                                <Button
+                                    size="icon-sm"
+                                    variant="outline"
+                                    class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
                                     @click.stop="newInstanceSelfInvite(favorite.id)"
-                                    circle />
+                                    ><i class="ri-mail-line"></i
+                                ></Button>
                             </TooltipWrapper>
                         </div>
                         <div class="favorites-search-card__action">
@@ -60,22 +61,22 @@
                                 v-if="showDangerUnfavorite"
                                 side="top"
                                 :content="t('view.favorite.unfavorite_tooltip')">
-                                <el-button
-                                    size="small"
-                                    :icon="Close"
-                                    circle
-                                    class="favorites-search-card__action-btn"
-                                    type="danger"
-                                    @click.stop="handleDeleteFavorite" />
+                                <Button
+                                    size="icon-sm"
+                                    variant="destructive"
+                                    class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
+                                    @click.stop="handleDeleteFavorite"
+                                    ><i class="ri-delete-bin-line"></i
+                                ></Button>
                             </TooltipWrapper>
                             <TooltipWrapper v-else side="top" :content="t('view.favorite.edit_favorite_tooltip')">
-                                <el-button
-                                    type="default"
-                                    :icon="Star"
-                                    size="small"
-                                    circle
-                                    class="favorites-search-card__action-btn"
-                                    @click.stop="showFavoriteDialog('world', favorite.id)" />
+                                <Button
+                                    size="icon-sm"
+                                    variant="outline"
+                                    class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
+                                    @click.stop="showFavoriteDialog('world', favorite.id)"
+                                    ><i class="ri-star-line"></i
+                                ></Button>
                             </TooltipWrapper>
                         </div>
                     </div>
@@ -91,9 +92,13 @@
             </div>
             <div class="favorites-search-card__actions">
                 <div class="favorites-search-card__action">
-                    <el-button circle type="default" size="small" @click.stop="handleDeleteFavorite">
+                    <Button
+                        class="rounded-full text-xs h-6 w-6"
+                        size="icon-sm"
+                        variant="outline"
+                        @click.stop="handleDeleteFavorite">
                         <i class="ri-delete-bin-line"></i>
-                    </el-button>
+                    </Button>
                 </div>
             </div>
         </template>
@@ -101,7 +106,7 @@
 </template>
 
 <script setup>
-    import { Close, Message, Star } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
     import { computed } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
diff --git a/src/views/Favorites/dialogs/AvatarImportDialog.vue b/src/views/Favorites/dialogs/AvatarImportDialog.vue
index 8c3081d3..eea0b079 100644
--- a/src/views/Favorites/dialogs/AvatarImportDialog.vue
+++ b/src/views/Favorites/dialogs/AvatarImportDialog.vue
@@ -12,12 +12,12 @@
                     {{ avatarImportDialog.progressTotal }}
                     <el-icon style="margin: 0 5px"><Loading /></el-icon>
                 </div>
-                <el-button v-if="avatarImportDialog.loading" size="small" @click="cancelAvatarImport">
+                <Button v-if="avatarImportDialog.loading" size="sm" variant="secondary" @click="cancelAvatarImport">
                     {{ t('dialog.avatar_import.cancel') }}
-                </el-button>
-                <el-button v-else size="small" :disabled="!avatarImportDialog.input" @click="processAvatarImportList">
+                </Button>
+                <Button size="sm" v-else :disabled="!avatarImportDialog.input" @click="processAvatarImportList">
                     {{ t('dialog.avatar_import.process_list') }}
-                </el-button>
+                </Button>
             </div>
         </div>
         <el-input
@@ -75,13 +75,11 @@
                 </span>
             </div>
             <div>
-                <el-button size="small" @click="clearAvatarImportTable">
+                <Button size="sm" variant="secondary" class="mr-2" @click="clearAvatarImportTable">
                     {{ t('dialog.avatar_import.clear_table') }}
-                </el-button>
-                <el-button
-                    size="small"
-                    type="primary"
-                    style="margin: 5px"
+                </Button>
+                <Button
+                    size="sm"
                     :disabled="
                         avatarImportTable.data.length === 0 ||
                         (!avatarImportDialog.avatarImportFavoriteGroup &&
@@ -89,7 +87,7 @@
                     "
                     @click="importAvatarImportTable">
                     {{ t('dialog.avatar_import.import') }}
-                </el-button>
+                </Button>
             </div>
         </div>
         <span v-if="avatarImportDialog.importProgress" style="margin: 10px">
@@ -99,9 +97,9 @@
         </span>
         <br />
         <template v-if="avatarImportDialog.errors">
-            <el-button size="small" @click="avatarImportDialog.errors = ''">
+            <Button size="sm" variant="secondary" @click="avatarImportDialog.errors = ''">
                 {{ t('dialog.avatar_import.clear_errors') }}
-            </el-button>
+            </Button>
             <h2 style="font-weight: bold; margin: 5px 0">
                 {{ t('dialog.avatar_import.errors') }}
             </h2>
@@ -154,7 +152,7 @@
             </el-table-column>
             <el-table-column :label="t('table.import.action')" width="90" align="right">
                 <template #default="{ row }">
-                    <el-button text :icon="Close" size="small" @click="deleteItemAvatarImport(row)"> </el-button>
+                    <Button size="icon-sm" variant="ghost" @click="deleteItemAvatarImport(row)"><Trash2 /> </Button>
                 </template>
             </el-table-column>
         </DataTable>
@@ -164,7 +162,9 @@
 <script setup>
     import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
     import { computed, ref, watch } from 'vue';
-    import { Close, Loading } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
+    import { Loading } from '@element-plus/icons-vue';
+    import { Trash2 } from 'lucide-vue-next';
     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 520486c9..54788058 100644
--- a/src/views/Favorites/dialogs/FriendImportDialog.vue
+++ b/src/views/Favorites/dialogs/FriendImportDialog.vue
@@ -12,12 +12,12 @@
                     {{ friendImportDialog.progressTotal }}
                     <el-icon style="margin: 0 5px"><Loading /></el-icon>
                 </div>
-                <el-button v-if="friendImportDialog.loading" size="small" @click="cancelFriendImport">
+                <Button v-if="friendImportDialog.loading" size="sm" variant="secondary" @click="cancelFriendImport">
                     {{ t('dialog.friend_import.cancel') }}
-                </el-button>
-                <el-button v-else size="small" :disabled="!friendImportDialog.input" @click="processFriendImportList">
+                </Button>
+                <Button size="sm" v-else :disabled="!friendImportDialog.input" @click="processFriendImportList">
                     {{ t('dialog.friend_import.process_list') }}
-                </el-button>
+                </Button>
             </div>
         </div>
         <el-input
@@ -56,17 +56,20 @@
                 </span>
             </div>
             <div>
-                <el-button size="small" :disabled="friendImportTable.data.length === 0" @click="clearFriendImportTable">
+                <Button
+                    size="sm"
+                    class="mr-2"
+                    variant="secondary"
+                    :disabled="friendImportTable.data.length === 0"
+                    @click="clearFriendImportTable">
                     {{ t('dialog.friend_import.clear_table') }}
-                </el-button>
-                <el-button
-                    size="small"
-                    type="primary"
-                    style="margin: 5px"
+                </Button>
+                <Button
+                    size="sm"
                     :disabled="friendImportTable.data.length === 0 || !friendImportDialog.friendImportFavoriteGroup"
                     @click="importFriendImportTable">
                     {{ t('dialog.friend_import.import') }}
-                </el-button>
+                </Button>
             </div>
         </div>
         <span v-if="friendImportDialog.importProgress" style="margin: 10px">
@@ -77,9 +80,9 @@
         </span>
         <br />
         <template v-if="friendImportDialog.errors">
-            <el-button size="small" @click="friendImportDialog.errors = ''">
+            <Button size="sm" variant="secondary" @click="friendImportDialog.errors = ''">
                 {{ t('dialog.friend_import.clear_errors') }}
-            </el-button>
+            </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>
@@ -107,7 +110,7 @@
             </el-table-column>
             <el-table-column :label="t('table.import.action')" width="90" align="right">
                 <template #default="{ row }">
-                    <el-button text :icon="Close" size="small" @click="deleteItemFriendImport(row)"> </el-button>
+                    <Button size="icon-sm" variant="ghost" @click="deleteItemFriendImport(row)"><Trash2 /></Button>
                 </template>
             </el-table-column>
         </DataTable>
@@ -117,7 +120,9 @@
 <script setup>
     import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
     import { computed, ref, watch } from 'vue';
-    import { Close, Loading } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
+    import { Loading } from '@element-plus/icons-vue';
+    import { Trash2 } from 'lucide-vue-next';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
diff --git a/src/views/Favorites/dialogs/WorldImportDialog.vue b/src/views/Favorites/dialogs/WorldImportDialog.vue
index 13c452cf..be4d99ac 100644
--- a/src/views/Favorites/dialogs/WorldImportDialog.vue
+++ b/src/views/Favorites/dialogs/WorldImportDialog.vue
@@ -13,12 +13,12 @@
                     {{ worldImportDialog.progress }} / {{ worldImportDialog.progressTotal }}
                     <el-icon style="margin: 0 5px"><Loading /></el-icon>
                 </div>
-                <el-button v-if="worldImportDialog.loading" size="small" @click="cancelWorldImport">
+                <Button v-if="worldImportDialog.loading" size="sm" variant="outline" @click="cancelWorldImport">
                     {{ t('dialog.world_import.cancel') }}
-                </el-button>
-                <el-button v-else size="small" :disabled="!worldImportDialog.input" @click="processWorldImportList">
+                </Button>
+                <Button size="sm" v-else :disabled="!worldImportDialog.input" @click="processWorldImportList">
                     {{ t('dialog.world_import.process_list') }}
-                </el-button>
+                </Button>
             </div>
         </div>
         <el-input
@@ -75,13 +75,16 @@
                 </span>
             </div>
             <div>
-                <el-button size="small" :disabled="worldImportTable.data.length === 0" @click="clearWorldImportTable">
+                <Button
+                    size="sm"
+                    variant="secondary"
+                    class="mr-2"
+                    :disabled="worldImportTable.data.length === 0"
+                    @click="clearWorldImportTable">
                     {{ t('dialog.world_import.clear_table') }}
-                </el-button>
-                <el-button
-                    size="small"
-                    type="primary"
-                    style="margin: 5px"
+                </Button>
+                <Button
+                    size="sm"
                     :disabled="
                         worldImportTable.data.length === 0 ||
                         (!worldImportDialog.worldImportFavoriteGroup &&
@@ -89,7 +92,7 @@
                     "
                     @click="importWorldImportTable">
                     {{ t('dialog.world_import.import') }}
-                </el-button>
+                </Button>
             </div>
         </div>
         <span v-if="worldImportDialog.importProgress" style="margin: 10px">
@@ -99,9 +102,9 @@
         </span>
         <br />
         <template v-if="worldImportDialog.errors">
-            <el-button size="small" @click="worldImportDialog.errors = ''">
+            <Button size="sm" variant="secondary" @click="worldImportDialog.errors = ''">
                 {{ t('dialog.world_import.clear_errors') }}
-            </el-button>
+            </Button>
             <h2 style="font-weight: bold; margin: 5px 0">
                 {{ t('dialog.world_import.errors') }}
             </h2>
@@ -149,7 +152,9 @@
             </el-table-column>
             <el-table-column :label="t('table.import.action')" width="90" align="right">
                 <template #default="{ row }">
-                    <el-button text :icon="Close" size="small" @click="deleteItemWorldImport(row)"></el-button>
+                    <Button size="icon-sm" class="w-6 h-6" variant="ghost" @click="deleteItemWorldImport(row)"
+                        ><Trash2
+                    /></Button>
                 </template>
             </el-table-column>
         </DataTable>
@@ -159,7 +164,9 @@
 <script setup>
     import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
     import { computed, ref, watch } from 'vue';
-    import { Close, Loading } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
+    import { Loading } from '@element-plus/icons-vue';
+    import { Trash2 } from 'lucide-vue-next';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
diff --git a/src/views/FriendList/FriendList.vue b/src/views/FriendList/FriendList.vue
index b52dddb7..e8915925 100644
--- a/src/views/FriendList/FriendList.vue
+++ b/src/views/FriendList/FriendList.vue
@@ -29,9 +29,9 @@
                 </div>
                 <div class="flex items-center">
                     <div v-if="friendsListBulkUnfriendMode" class="inline-block mr-10">
-                        <el-button @click="showBulkUnfriendSelectionConfirm">
+                        <Button variant="outline" @click="showBulkUnfriendSelectionConfirm">
                             {{ t('view.friend_list.bulk_unfriend_selection') }}
-                        </el-button>
+                        </Button>
                         <!-- el-button(size="small" @click="showBulkUnfriendAllConfirm" style="margin-right:5px") Bulk Unfriend All-->
                     </div>
                     <div class="flex items-center mr-3">
@@ -41,11 +41,13 @@
                             @update:modelValue="toggleFriendsListBulkUnfriendMode" />
                     </div>
                     <div class="flex items-center">
-                        <el-button @click="openChartsTab">
+                        <Button variant="outline" @click="openChartsTab">
                             {{ t('view.friend_list.load_mutual_friends') }}
-                        </el-button>
+                        </Button>
 
-                        <el-button @click="friendsListLoadUsers">{{ t('view.friend_list.load') }}</el-button>
+                        <Button variant="outline" @click="friendsListLoadUsers">{{
+                            t('view.friend_list.load')
+                        }}</Button>
                     </div>
                 </div>
             </div>
@@ -56,11 +58,9 @@
                 @row-click="selectFriendsListRow">
                 <el-table-column v-if="friendsListBulkUnfriendMode" width="55">
                     <template #default="{ row }">
-                        <div class="flex items-center justify-center" @click.stop>
-                            <Checkbox
-                                :model-value="selectedFriends.has(row.id)"
-                                @update:modelValue="toggleFriendSelection(row.id)" />
-                        </div>
+                        <Checkbox
+                            :model-value="selectedFriends.has(row.id)"
+                            @update:modelValue="toggleFriendSelection(row.id)" />
                     </template>
                 </el-table-column>
                 <el-table-column width="20"></el-table-column>
@@ -249,9 +249,9 @@
                     <span>{{ friendsListLoadingCurrent }} / {{ friendsListLoadingTotal }}</span>
                 </div>
                 <template #footer>
-                    <el-button @click="cancelFriendsListLoad">
+                    <Button variant="outline" @click="cancelFriendsListLoad">
                         {{ t('view.friend_list.load_cancel') }}
-                    </el-button>
+                    </Button>
                 </template>
             </el-dialog>
         </div>
@@ -260,6 +260,7 @@
 
 <script setup>
     import { computed, nextTick, reactive, ref, watch } from 'vue';
+    import { Button } from '@/components/ui/button';
     import { ElMessageBox } from 'element-plus';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
diff --git a/src/views/Notifications/dialogs/SendInviteRequestResponseDialog.vue b/src/views/Notifications/dialogs/SendInviteRequestResponseDialog.vue
index 6ecb8024..115e2cce 100644
--- a/src/views/Notifications/dialogs/SendInviteRequestResponseDialog.vue
+++ b/src/views/Notifications/dialogs/SendInviteRequestResponseDialog.vue
@@ -29,23 +29,20 @@
             </el-table-column>
             <el-table-column :label="t('table.profile.invite_messages.action')" width="70" align="right">
                 <template #default="scope">
-                    <el-button
-                        text
-                        :icon="Edit"
-                        size="small"
-                        @click.stop="showEditAndSendInviteResponseDialog(scope.row)">
-                    </el-button>
+                    <Button size="icon-sm" variant="ghost" @click.stop="showEditAndSendInviteResponseDialog(scope.row)">
+                        <SquarePen
+                    /></Button>
                 </template>
             </el-table-column>
         </DataTable>
 
         <template #footer>
-            <el-button @click="cancelSendInviteRequestResponse">
+            <Button variant="secondary" class="mr-2" @click="cancelSendInviteRequestResponse">
                 {{ t('dialog.invite_request_response_message.cancel') }}
-            </el-button>
-            <el-button @click="refreshInviteMessageTableData('requestResponse')">
+            </Button>
+            <Button @click="refreshInviteMessageTableData('requestResponse')">
                 {{ t('dialog.invite_request_response_message.refresh') }}
-            </el-button>
+            </Button>
         </template>
         <EditAndSendInviteResponseDialog
             :edit-and-send-invite-response-dialog="editAndSendInviteResponseDialog"
@@ -61,7 +58,8 @@
 </template>
 
 <script setup>
-    import { Edit } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
+    import { SquarePen } from 'lucide-vue-next';
     import { ref } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
diff --git a/src/views/Notifications/dialogs/SendInviteResponseConfirmDialog.vue b/src/views/Notifications/dialogs/SendInviteResponseConfirmDialog.vue
index b9ddde0d..d9620c07 100644
--- a/src/views/Notifications/dialogs/SendInviteResponseConfirmDialog.vue
+++ b/src/views/Notifications/dialogs/SendInviteResponseConfirmDialog.vue
@@ -11,10 +11,10 @@
         </div>
 
         <template #footer>
-            <el-button @click="cancelInviteResponseConfirm">{{ t('dialog.invite_response_message.cancel') }}</el-button>
-            <el-button type="primary" @click="sendInviteResponseConfirm">{{
-                t('dialog.invite_response_message.confirm')
-            }}</el-button>
+            <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>
 </template>
diff --git a/src/views/Notifications/dialogs/SendInviteResponseDialog.vue b/src/views/Notifications/dialogs/SendInviteResponseDialog.vue
index 9f993ade..40af7cd4 100644
--- a/src/views/Notifications/dialogs/SendInviteResponseDialog.vue
+++ b/src/views/Notifications/dialogs/SendInviteResponseDialog.vue
@@ -28,20 +28,20 @@
             </el-table-column>
             <el-table-column :label="t('table.profile.invite_messages.action')" width="70" align="right">
                 <template #default="scope">
-                    <el-button
-                        text
-                        :icon="Edit"
-                        size="small"
-                        @click.stop="showEditAndSendInviteResponseDialog(scope.row)" />
+                    <Button size="icon-sm" variant="ghost" @click.stop="showEditAndSendInviteResponseDialog(scope.row)">
+                        <SquarePen
+                    /></Button>
                 </template>
             </el-table-column>
         </DataTable>
 
         <template #footer>
-            <el-button @click="cancelSendInviteResponse">{{ t('dialog.invite_response_message.cancel') }}</el-button>
-            <el-button @click="refreshInviteMessageTableData('response')">{{
+            <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')
-            }}</el-button>
+            }}</Button>
         </template>
         <EditAndSendInviteResponseDialog
             :edit-and-send-invite-response-dialog="editAndSendInviteResponseDialog"
@@ -57,7 +57,8 @@
 </template>
 
 <script setup>
-    import { Edit } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
+    import { SquarePen } from 'lucide-vue-next';
     import { ref } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
diff --git a/src/views/Settings/dialogs/AvatarProviderDialog.vue b/src/views/Settings/dialogs/AvatarProviderDialog.vue
index d92ed4c8..6c3f9ddd 100644
--- a/src/views/Settings/dialogs/AvatarProviderDialog.vue
+++ b/src/views/Settings/dialogs/AvatarProviderDialog.vue
@@ -13,18 +13,19 @@
                 size="small"
                 style="margin-top: 5px"
                 @change="saveAvatarProviderList">
-                <el-button :icon="Delete" @click="removeAvatarProvider(provider)"></el-button>
+                <Button variant="outline" size="icon" @click="removeAvatarProvider(provider)"><Trash2 /></Button>
             </el-input>
 
-            <el-button size="small" style="margin-top: 5px" @click="avatarRemoteDatabaseProviderList.push('')">
+            <Button size="sm" style="margin-top: 5px" @click="avatarRemoteDatabaseProviderList.push('')">
                 {{ t('dialog.avatar_database_provider.add_provider') }}
-            </el-button>
+            </Button>
         </div>
     </el-dialog>
 </template>
 
 <script setup>
-    import { Delete } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
+    import { Trash2 } from 'lucide-vue-next';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
diff --git a/src/views/Settings/dialogs/RegistryBackupDialog.vue b/src/views/Settings/dialogs/RegistryBackupDialog.vue
index b6cbed13..1033d633 100644
--- a/src/views/Settings/dialogs/RegistryBackupDialog.vue
+++ b/src/views/Settings/dialogs/RegistryBackupDialog.vue
@@ -32,43 +32,46 @@
                 <el-table-column :label="t('dialog.registry_backup.action')" width="90" align="right">
                     <template #default="scope">
                         <TooltipWrapper side="top" :content="t('dialog.registry_backup.restore')">
-                            <el-button
-                                text
-                                :icon="Upload"
-                                size="small"
+                            <Button
+                                size="sm"
+                                variant="ghost"
                                 class="button-pd-0"
-                                @click="restoreVrcRegistryBackup(scope.row)"></el-button>
+                                @click="restoreVrcRegistryBackup(scope.row)">
+                                <RotateCcw
+                            /></Button>
                         </TooltipWrapper>
                         <TooltipWrapper side="top" :content="t('dialog.registry_backup.save_to_file')">
-                            <el-button
-                                text
-                                :icon="Download"
-                                size="small"
+                            <Button
+                                size="icon-sm"
+                                variant="ghost"
                                 class="button-pd-0"
-                                @click="saveVrcRegistryBackupToFile(scope.row)"></el-button>
+                                @click="saveVrcRegistryBackupToFile(scope.row)">
+                                <Download
+                            /></Button>
                         </TooltipWrapper>
                         <TooltipWrapper side="top" :content="t('dialog.registry_backup.delete')">
-                            <el-button
-                                text
-                                :icon="Delete"
-                                size="small"
+                            <Button
+                                size="icon-sm"
+                                variant="ghost"
                                 class="button-pd-0"
-                                @click="deleteVrcRegistryBackup(scope.row)"></el-button>
+                                @click="deleteVrcRegistryBackup(scope.row)"
+                                ><Trash2
+                            /></Button>
                         </TooltipWrapper>
                     </template>
                 </el-table-column>
             </DataTable>
             <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 10px">
-                <el-button type="danger" size="small" @click="deleteVrcRegistry">{{
+                <Button size="sm" variant="destructive" @click="deleteVrcRegistry">{{
                     t('dialog.registry_backup.reset')
-                }}</el-button>
+                }}</Button>
                 <div>
-                    <el-button size="small" @click="promptVrcRegistryBackupName">{{
+                    <Button size="sm" variant="outline" @click="promptVrcRegistryBackupName">{{
                         t('dialog.registry_backup.backup')
-                    }}</el-button>
-                    <el-button size="small" @click="restoreVrcRegistryFromFile">{{
+                    }}</Button>
+                    <Button size="sm" variant="outline" @click="restoreVrcRegistryFromFile">{{
                         t('dialog.registry_backup.restore_from_file')
-                    }}</el-button>
+                    }}</Button>
                 </div>
             </div>
         </div>
@@ -76,8 +79,9 @@
 </template>
 
 <script setup>
-    import { Delete, Download, Upload } from '@element-plus/icons-vue';
+    import { Download, RotateCcw, Trash2 } from 'lucide-vue-next';
     import { ref, watch } from 'vue';
+    import { Button } from '@/components/ui/button';
     import { ElMessageBox } from 'element-plus';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
diff --git a/src/views/Tools/Gallery.vue b/src/views/Tools/Gallery.vue
index a2602e7d..26157f17 100644
--- a/src/views/Tools/Gallery.vue
+++ b/src/views/Tools/Gallery.vue
@@ -1,9 +1,9 @@
 <template>
     <div class="gallery-page x-container">
         <div class="gallery-page__header">
-            <el-button text :icon="ArrowLeft" class="gallery-page__back" @click="goBack">
+            <Button variant="ghost" class="gallery-page__back" @click="goBack">
                 {{ t('nav_tooltip.tools') }}
-            </el-button>
+            </Button>
             <span class="header">{{ t('dialog.gallery_icons.header') }}</span>
         </div>
         <el-progress
@@ -70,19 +70,20 @@
                                 loading="lazy" />
                         </div>
                         <div class="float-right" style="margin-top: 5px">
-                            <el-button
-                                type="default"
-                                @click="showFullscreenImageDialog(image.versions[image.versions.length - 1].file.url)"
-                                size="small"
-                                :icon="Picture"
-                                circle></el-button>
-                            <el-button
-                                type="default"
-                                @click="deleteGalleryImage(image.id)"
-                                size="small"
-                                :icon="Delete"
-                                circle
-                                style="margin-left: 5px"></el-button>
+                            <Button
+                                class="rounded-full mr-2"
+                                size="icon-sm"
+                                variant="outline"
+                                @click="showFullscreenImageDialog(image.versions[image.versions.length - 1].file.url)">
+                                <Maximize2 />
+                            </Button>
+                            <Button
+                                class="rounded-full"
+                                size="icon-sm"
+                                variant="outline"
+                                @click="deleteGalleryImage(image.id)">
+                                <Trash2 />
+                            </Button>
                         </div>
                     </template>
                 </div>
@@ -140,19 +141,20 @@
                                 loading="lazy" />
                         </div>
                         <div class="float-right" style="margin-top: 5px">
-                            <el-button
-                                type="default"
-                                @click="showFullscreenImageDialog(image.versions[image.versions.length - 1].file.url)"
-                                size="small"
-                                :icon="Picture"
-                                circle></el-button>
-                            <el-button
-                                type="default"
+                            <Button
+                                class="rounded-full mr-2"
+                                size="icon-sm"
+                                variant="outline"
+                                @click="showFullscreenImageDialog(image.versions[image.versions.length - 1].file.url)">
+                                <Maximize2 />
+                            </Button>
+                            <Button
+                                class="rounded-full"
+                                size="icon-sm"
+                                variant="outline"
                                 @click="deleteVRCPlusIcon(image.id)"
-                                size="small"
-                                :icon="Delete"
-                                circle
-                                style="margin-left: 5px"></el-button></div
+                                ><Trash2
+                            /></Button></div
                     ></template>
                 </div>
             </el-tab-pane>
@@ -217,14 +219,13 @@
                         <span>{{ t('dialog.gallery_icons.emoji_animation_type') }}</span>
                     </label>
                     <template v-if="emojiAnimType">
-                        <el-button
-                            type="default"
-                            size="small"
-                            :icon="Link"
-                            style="margin-right: 10px"
+                        <Button
+                            size="sm"
+                            variant="outline"
+                            class="mr-3"
                             @click="openExternalLink('https://vrcemoji.com')">
                             {{ t('dialog.gallery_icons.create_animated_emoji') }}
-                        </el-button>
+                        </Button>
                         <span style="margin-right: 10px">{{ t('dialog.gallery_icons.emoji_animation_fps') }}</span>
                         <NumberField
                             v-model="emojiAnimFps"
@@ -295,24 +296,25 @@
                             <br />
                         </div>
                         <div class="float-right" style="margin-top: 5px">
-                            <el-button
-                                type="default"
+                            <Button
+                                class="rounded-full mr-2"
+                                size="icon-sm"
+                                variant="outline"
                                 @click="
                                     showFullscreenImageDialog(
                                         image.versions[image.versions.length - 1].file.url,
                                         getEmojiFileName(image)
                                     )
                                 "
-                                size="small"
-                                :icon="Picture"
-                                circle></el-button>
-                            <el-button
-                                type="default"
-                                @click="deleteEmoji(image.id)"
-                                size="small"
-                                :icon="Delete"
-                                circle
-                                style="margin-left: 5px"></el-button></div
+                                ><Maximize2
+                            /></Button>
+                            <Button
+                                class="rounded-full mr-2"
+                                size="icon-sm"
+                                variant="outline"
+                                @click="deleteEmoji(image.id)">
+                                <Trash2
+                            /></Button></div
                     ></template>
                 </div>
             </el-tab-pane>
@@ -367,19 +369,20 @@
                                 loading="lazy" />
                         </div>
                         <div class="float-right" style="margin-top: 5px">
-                            <el-button
-                                type="default"
+                            <Button
+                                class="rounded-full mr-2"
+                                size="icon-sm"
+                                variant="outline"
                                 @click="showFullscreenImageDialog(image.versions[image.versions.length - 1].file.url)"
-                                size="small"
-                                :icon="Picture"
-                                circle></el-button>
-                            <el-button
-                                type="default"
+                                ><Maximize2
+                            /></Button>
+                            <Button
+                                class="rounded-full"
+                                size="icon-sm"
+                                variant="outline"
                                 @click="deleteSticker(image.id)"
-                                size="small"
-                                :icon="Delete"
-                                circle
-                                style="margin-left: 5px"></el-button></div
+                                ><Trash2
+                            /></Button></div
                     ></template>
                 </div>
             </el-tab-pane>
@@ -463,19 +466,16 @@
                         <span v-else style="display: block">&nbsp;</span>
                     </div>
                     <div class="float-right">
-                        <el-button
-                            type="default"
-                            @click="showFullscreenImageDialog(image.files.image, getPrintFileName(image))"
-                            size="small"
-                            :icon="Picture"
-                            circle></el-button>
-                        <el-button
-                            type="default"
-                            @click="deletePrint(image.id)"
-                            size="small"
-                            :icon="Delete"
-                            circle
-                            style="margin-left: 5px"></el-button>
+                        <Button
+                            class="rounded-full mr-2"
+                            size="icon-sm"
+                            variant="outline"
+                            @click="showFullscreenImageDialog(image.files.image, getPrintFileName(image))">
+                            <Maximize2
+                        /></Button>
+                        <Button class="rounded-full" size="icon-sm" variant="outline" @click="deletePrint(image.id)">
+                            <Trash2
+                        /></Button>
                     </div>
                 </div>
             </el-tab-pane>
@@ -531,15 +531,13 @@
                         <span v-else-if="item.itemType === 'emoji'">{{ t('dialog.gallery_icons.emoji') }}</span>
                         <span v-else v-text="item.itemTypeLabel"></span>
                     </div>
-                    <el-button
+                    <Button
+                        size="sm"
                         v-if="item.itemType === 'bundle'"
-                        type="default"
                         @click="consumeInventoryBundle(item.id)"
-                        size="small"
-                        :icon="Plus"
                         class="float-right">
                         {{ t('dialog.gallery_icons.consume_bundle') }}
-                    </el-button>
+                    </Button>
                 </div>
             </el-tab-pane>
         </el-tabs>
@@ -547,7 +545,6 @@
 </template>
 
 <script setup>
-    import { ArrowLeft, Close, Delete, Link, Picture, Plus, Present, Refresh, Upload } from '@element-plus/icons-vue';
     import {
         NumberField,
         NumberFieldContent,
@@ -555,7 +552,9 @@
         NumberFieldIncrement,
         NumberFieldInput
     } from '@/components/ui/number-field';
+    import { Close, Present, Refresh, Upload } from '@element-plus/icons-vue';
     import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+    import { Maximize2, Trash2 } from 'lucide-vue-next';
     import { Button } from '@/components/ui/button';
     import { ButtonGroup } from '@/components/ui/button-group';
     import { Checkbox } from '@/components/ui/checkbox';