diff --git a/src/components/dialogs/AvatarDialog/AvatarDialog.vue b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
index dad9a762..7913568d 100644
--- a/src/components/dialogs/AvatarDialog/AvatarDialog.vue
+++ b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
@@ -338,16 +338,17 @@
                                 accept="image/*"
                                 style="display: none"
                                 @change="onFileChangeAvatarGallery" />
-                            <el-button
+                            <Button
                                 v-if="avatarDialog.ref.authorId === currentUser.id"
+                                variant="outline"
+                                size="sm"
                                 :disabled="avatarDialog.galleryLoading"
-                                size="small"
-                                :icon="Upload"
-                                :loading="avatarDialog.galleryLoading"
-                                style="margin-left: 5px"
-                                @click="displayAvatarGalleryUpload"
-                                >{{ t('dialog.screenshot_metadata.upload') }}</el-button
-                            >
+                                class="ml-1"
+                                @click="displayAvatarGalleryUpload">
+                                <Spinner v-if="avatarDialog.galleryLoading" />
+                                <Upload v-else />
+                                {{ t('dialog.screenshot_metadata.upload') }}
+                            </Button>
                             <el-progress
                                 v-if="avatarDialog.galleryLoading"
                                 :show-text="false"
@@ -544,6 +545,7 @@
     import { computed, defineAsyncComponent, nextTick, ref, watch } from 'vue';
     import { Button } from '@/components/ui/button';
     import { ElMessageBox } from 'element-plus';
+    import { Spinner } from '@/components/ui/spinner';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
diff --git a/src/components/dialogs/AvatarDialog/ChangeAvatarImageDialog.vue b/src/components/dialogs/AvatarDialog/ChangeAvatarImageDialog.vue
index 907aee21..b35ed864 100644
--- a/src/components/dialogs/AvatarDialog/ChangeAvatarImageDialog.vue
+++ b/src/components/dialogs/AvatarDialog/ChangeAvatarImageDialog.vue
@@ -22,15 +22,15 @@
                 style="margin-bottom: 12px" />
             <span>{{ t('dialog.change_content_image.description') }}</span>
             <br />
-            <el-button
-                type="default"
-                size="small"
-                :icon="Upload"
-                :loading="changeAvatarImageDialogLoading"
+            <Button
+                variant="outline"
+                size="icon-sm"
                 :disabled="changeAvatarImageDialogLoading"
                 @click="uploadAvatarImage">
+                <Spinner v-if="changeAvatarImageDialogLoading" />
+                <Upload v-else />
                 {{ t('dialog.change_content_image.upload') }}
-            </el-button>
+            </Button>
             <br />
             <div class="x-change-image-item">
                 <img :src="previousImageUrl" class="img-size" loading="lazy" />
@@ -40,6 +40,8 @@
 </template>
 
 <script setup>
+    import { Button } from '@/components/ui/button';
+    import { Spinner } from '@/components/ui/spinner';
     import { Upload } from '@element-plus/icons-vue';
     import { ref } from 'vue';
     import { storeToRefs } from 'pinia';
diff --git a/src/components/dialogs/GroupDialog/GroupDialog.vue b/src/components/dialogs/GroupDialog/GroupDialog.vue
index 5b6868d4..c39175ec 100644
--- a/src/components/dialogs/GroupDialog/GroupDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialog.vue
@@ -144,50 +144,54 @@
                                 v-if="groupDialog.ref.myMember?.isRepresenting"
                                 side="top"
                                 :content="t('dialog.group.actions.unrepresent_tooltip')">
-                                <el-button
-                                    type="warning"
-                                    :icon="Star"
-                                    size="large"
-                                    circle
+                                <Button
+                                    class="rounded-full"
+                                    variant="secondary"
+                                    size="icon-lg"
                                     style="margin-left: 5px"
-                                    @click="clearGroupRepresentation(groupDialog.id)"></el-button>
+                                    @click="clearGroupRepresentation(groupDialog.id)">
+                                    <Star />
+                                </Button>
                             </TooltipWrapper>
                             <TooltipWrapper v-else side="top" :content="t('dialog.group.actions.represent_tooltip')">
                                 <span>
-                                    <el-button
-                                        type="default"
-                                        :icon="StarFilled"
-                                        size="large"
-                                        circle
+                                    <Button
+                                        class="rounded-full"
+                                        variant="outline"
+                                        size="icon-lg"
                                         style="margin-left: 5px"
                                         :disabled="groupDialog.ref.privacy === 'private'"
-                                        @click="setGroupRepresentation(groupDialog.id)"></el-button>
+                                        @click="setGroupRepresentation(groupDialog.id)">
+                                        <StarFilled />
+                                    </Button>
                                 </span>
                             </TooltipWrapper>
                         </template>
                         <template v-else-if="groupDialog.ref.myMember?.membershipStatus === 'requested'">
                             <TooltipWrapper side="top" :content="t('dialog.group.actions.cancel_join_request_tooltip')">
                                 <span>
-                                    <el-button
-                                        type="default"
-                                        :icon="Close"
-                                        size="large"
-                                        circle
+                                    <Button
+                                        class="rounded-full"
+                                        variant="outline"
+                                        size="icon-lg"
                                         style="margin-left: 5px"
-                                        @click="cancelGroupRequest(groupDialog.id)"></el-button>
+                                        @click="cancelGroupRequest(groupDialog.id)">
+                                        <Close />
+                                    </Button>
                                 </span>
                             </TooltipWrapper>
                         </template>
                         <template v-else-if="groupDialog.ref.myMember?.membershipStatus === 'invited'">
                             <TooltipWrapper side="top" :content="t('dialog.group.actions.pending_request_tooltip')">
                                 <span>
-                                    <el-button
-                                        type="default"
-                                        :icon="Check"
-                                        size="large"
-                                        circle
+                                    <Button
+                                        class="rounded-full"
+                                        variant="outline"
+                                        size="icon-lg"
                                         style="margin-left: 5px"
-                                        @click="joinGroup(groupDialog.id)"></el-button>
+                                        @click="joinGroup(groupDialog.id)">
+                                        <Check />
+                                    </Button>
                                 </span>
                             </TooltipWrapper>
                         </template>
@@ -196,49 +200,55 @@
                                 v-if="groupDialog.ref.joinState === 'request'"
                                 side="top"
                                 :content="t('dialog.group.actions.request_join_tooltip')">
-                                <el-button
-                                    type="default"
-                                    :icon="Message"
-                                    size="large"
-                                    circle
+                                <Button
+                                    class="rounded-full"
+                                    variant="outline"
+                                    size="icon-lg"
                                     style="margin-left: 5px"
-                                    @click="joinGroup(groupDialog.id)"></el-button>
+                                    @click="joinGroup(groupDialog.id)">
+                                    <Message />
+                                </Button>
                             </TooltipWrapper>
                             <TooltipWrapper
                                 v-if="groupDialog.ref.joinState === 'invite'"
                                 side="top"
                                 :content="t('dialog.group.actions.invite_required_tooltip')">
                                 <span>
-                                    <el-button
-                                        type="default"
-                                        :icon="Message"
-                                        size="large"
+                                    <Button
+                                        class="rounded-full"
+                                        variant="outline"
+                                        size="icon-lg"
                                         disabled
-                                        circle
-                                        style="margin-left: 5px"></el-button>
+                                        style="margin-left: 5px">
+                                        <Message />
+                                    </Button>
                                 </span>
                             </TooltipWrapper>
                             <TooltipWrapper
                                 v-if="groupDialog.ref.joinState === 'open'"
                                 side="top"
                                 :content="t('dialog.group.actions.join_group_tooltip')">
-                                <el-button
-                                    type="default"
-                                    :icon="Check"
-                                    size="large"
-                                    circle
+                                <Button
+                                    class="rounded-full"
+                                    variant="outline"
+                                    size="icon-lg"
                                     style="margin-left: 5px"
-                                    @click="joinGroup(groupDialog.id)"></el-button>
+                                    @click="joinGroup(groupDialog.id)">
+                                    <Check />
+                                </Button>
                             </TooltipWrapper>
                         </template>
                         <DropdownMenu>
                             <DropdownMenuTrigger as-child>
-                                <el-button
-                                    :type="groupDialog.ref.membershipStatus === 'userblocked' ? 'danger' : 'default'"
-                                    :icon="MoreFilled"
-                                    size="large"
-                                    style="margin-left: 5px"
-                                    circle></el-button>
+                                <Button
+                                    class="rounded-full"
+                                    :variant="
+                                        groupDialog.ref.membershipStatus === 'userblocked' ? 'destructive' : 'outline'
+                                    "
+                                    size="icon-lg"
+                                    style="margin-left: 5px">
+                                    <MoreFilled />
+                                </Button>
                             </DropdownMenuTrigger>
                             <DropdownMenuContent>
                                 <DropdownMenuItem @click="groupDialogCommand('Refresh')">
@@ -1042,13 +1052,15 @@
                     </template>
                 </el-tab-pane>
                 <el-tab-pane name="Photos" :label="t('dialog.group.gallery.header')" lazy>
-                    <el-button
-                        type="default"
-                        size="small"
-                        :icon="Refresh"
-                        :loading="isGroupGalleryLoading"
-                        circle
-                        @click="getGroupGalleries" />
+                    <Button
+                        class="rounded-full"
+                        variant="outline"
+                        size="icon-sm"
+                        :disabled="isGroupGalleryLoading"
+                        @click="getGroupGalleries">
+                        <Spinner v-if="isGroupGalleryLoading" />
+                        <Refresh v-else />
+                    </Button>
                     <el-tabs
                         v-model="groupDialogGalleryCurrentName"
                         v-loading="isGroupGalleryLoading"
diff --git a/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue b/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
index 2f54f580..dc4f9bbe 100644
--- a/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
@@ -10,13 +10,15 @@
             <el-tabs style="height: 100%">
                 <el-tab-pane :label="t('dialog.group_member_moderation.members')">
                     <div style="margin-top: 10px">
-                        <el-button
-                            type="default"
-                            size="small"
-                            :icon="Refresh"
-                            :loading="isGroupMembersLoading"
-                            circle
-                            @click="loadAllGroupMembers" />
+                        <Button
+                            class="rounded-full"
+                            variant="outline"
+                            size="icon-sm"
+                            :disabled="isGroupMembersLoading"
+                            @click="loadAllGroupMembers">
+                            <Spinner v-if="isGroupMembersLoading" />
+                            <Refresh v-else />
+                        </Button>
                         <span style="font-size: 14px; margin-left: 5px; margin-right: 5px">
                             {{ groupMemberModerationTable.data.length }}/{{
                                 groupMemberModeration.groupRef.memberCount
@@ -34,8 +36,9 @@
                                             !hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')
                                         )
                                     ">
-                                    <el-button
-                                        size="small"
+                                    <Button
+                                        size="sm"
+                                        variant="outline"
                                         :disabled="
                                             Boolean(
                                                 isGroupMembersLoading ||
@@ -48,7 +51,7 @@
                                             {{ t(memberSortOrder.name) }}
                                             <el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
                                         </span>
-                                    </el-button>
+                                    </Button>
                                 </DropdownMenuTrigger>
                                 <DropdownMenuContent>
                                     <DropdownMenuItem
@@ -209,13 +212,15 @@
                     :label="t('dialog.group_member_moderation.bans')"
                     :disabled="!hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')">
                     <div style="margin-top: 10px">
-                        <el-button
-                            type="default"
-                            size="small"
-                            :icon="Refresh"
-                            :loading="isGroupMembersLoading"
-                            circle
-                            @click="getAllGroupBans(groupMemberModeration.id)"></el-button>
+                        <Button
+                            class="rounded-full"
+                            variant="outline"
+                            size="icon-sm"
+                            :disabled="isGroupMembersLoading"
+                            @click="getAllGroupBans(groupMemberModeration.id)">
+                            <Spinner v-if="isGroupMembersLoading" />
+                            <Refresh v-else />
+                        </Button>
                         <span style="font-size: 14px; margin-left: 5px; margin-right: 5px">{{
                             groupBansModerationTable.data.length
                         }}</span>
@@ -321,13 +326,15 @@
                     :label="t('dialog.group_member_moderation.invites')"
                     :disabled="!hasGroupPermission(groupMemberModeration.groupRef, 'group-invites-manage')">
                     <div style="margin-top: 10px">
-                        <el-button
-                            type="default"
-                            size="small"
-                            :icon="Refresh"
-                            :loading="isGroupMembersLoading"
-                            circle
-                            @click="getAllGroupInvitesAndJoinRequests(groupMemberModeration.id)"></el-button>
+                        <Button
+                            class="rounded-full"
+                            variant="outline"
+                            size="icon-sm"
+                            :disabled="isGroupMembersLoading"
+                            @click="getAllGroupInvitesAndJoinRequests(groupMemberModeration.id)">
+                            <Spinner v-if="isGroupMembersLoading" />
+                            <Refresh v-else />
+                        </Button>
                         <br />
                         <el-tabs>
                             <el-tab-pane>
@@ -602,13 +609,15 @@
                     :label="t('dialog.group_member_moderation.logs')"
                     :disabled="!hasGroupPermission(groupMemberModeration.groupRef, 'group-audit-view')">
                     <div style="margin-top: 10px">
-                        <el-button
-                            type="default"
-                            size="small"
-                            :icon="Refresh"
-                            :loading="isGroupMembersLoading"
-                            circle
-                            @click="getAllGroupLogs(groupMemberModeration.id)"></el-button>
+                        <Button
+                            class="rounded-full"
+                            variant="outline"
+                            size="icon-sm"
+                            :disabled="isGroupMembersLoading"
+                            @click="getAllGroupLogs(groupMemberModeration.id)">
+                            <Spinner v-if="isGroupMembersLoading" />
+                            <Refresh v-else />
+                        </Button>
                         <span style="font-size: 14px; margin-left: 5px; margin-right: 5px">{{
                             groupLogsModerationTable.data.length
                         }}</span>
@@ -862,6 +871,7 @@
     import { ArrowDown, Loading, Refresh, Warning } from '@element-plus/icons-vue';
     import { reactive, ref, watch } from 'vue';
     import { Button } from '@/components/ui/button';
+    import { Spinner } from '@/components/ui/spinner';
     import { Trash2 } from 'lucide-vue-next';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
diff --git a/src/components/dialogs/InviteDialog/SendInviteDialog.vue b/src/components/dialogs/InviteDialog/SendInviteDialog.vue
index d43db81b..47863493 100644
--- a/src/components/dialogs/InviteDialog/SendInviteDialog.vue
+++ b/src/components/dialogs/InviteDialog/SendInviteDialog.vue
@@ -93,6 +93,7 @@
 
 <script setup>
     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/InviteGroupDialog.vue b/src/components/dialogs/InviteGroupDialog.vue
index f4879ce3..75d68707 100644
--- a/src/components/dialogs/InviteGroupDialog.vue
+++ b/src/components/dialogs/InviteGroupDialog.vue
@@ -66,18 +66,18 @@
             </div>
         </div>
         <template #footer>
-            <el-button
-                type="primary"
+            <Button
                 :disabled="inviteGroupDialog.loading || !inviteGroupDialog.userIds.length || !inviteGroupDialog.groupId"
                 @click="sendGroupInvite">
                 {{ t('dialog.invite_to_group.invite') }}
-            </el-button>
+            </Button>
         </template>
     </el-dialog>
 </template>
 
 <script setup>
     import { computed, nextTick, ref, watch } from 'vue';
+    import { Button } from '@/components/ui/button';
     import { Check as CheckIcon } from 'lucide-vue-next';
     import { ElMessageBox } from 'element-plus';
     import { storeToRefs } from 'pinia';
diff --git a/src/components/dialogs/UserDialog/EditNoteAndMemoDialog.vue b/src/components/dialogs/UserDialog/EditNoteAndMemoDialog.vue
index 12d1b3ea..52d43201 100644
--- a/src/components/dialogs/UserDialog/EditNoteAndMemoDialog.vue
+++ b/src/components/dialogs/UserDialog/EditNoteAndMemoDialog.vue
@@ -43,6 +43,7 @@
 
 <script setup>
     import { ref, watch } from 'vue';
+    import { Button } from '@/components/ui/button';
     import { InputGroupCharCount } from '@/components/ui/input-group';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
diff --git a/src/components/dialogs/UserDialog/PronounsDialog.vue b/src/components/dialogs/UserDialog/PronounsDialog.vue
index a3e5b39b..1065a906 100644
--- a/src/components/dialogs/UserDialog/PronounsDialog.vue
+++ b/src/components/dialogs/UserDialog/PronounsDialog.vue
@@ -14,14 +14,15 @@
                 :placeholder="t('dialog.pronouns.pronouns_placeholder')" />
         </div>
         <template #footer>
-            <el-button type="primary" :disabled="pronounsDialog.loading" @click="savePronouns">
+            <Button :disabled="pronounsDialog.loading" @click="savePronouns">
                 {{ t('dialog.pronouns.update') }}
-            </el-button>
+            </Button>
         </template>
     </el-dialog>
 </template>
 
 <script setup>
+    import { Button } from '@/components/ui/button';
     import { InputGroupCharCount } from '@/components/ui/input-group';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
diff --git a/src/components/dialogs/UserDialog/SocialStatusDialog.vue b/src/components/dialogs/UserDialog/SocialStatusDialog.vue
index 49085323..119d2396 100644
--- a/src/components/dialogs/UserDialog/SocialStatusDialog.vue
+++ b/src/components/dialogs/UserDialog/SocialStatusDialog.vue
@@ -76,9 +76,9 @@
         </div>
 
         <template #footer>
-            <el-button type="primary" :disabled="socialStatusDialog.loading" @click="saveSocialStatus">
+            <Button :disabled="socialStatusDialog.loading" @click="saveSocialStatus">
                 {{ t('dialog.social_status.update') }}
-            </el-button>
+            </Button>
         </template>
     </el-dialog>
 </template>
diff --git a/src/components/dialogs/UserDialog/UserDialog.vue b/src/components/dialogs/UserDialog/UserDialog.vue
index 5f8bc1b6..04ede4cb 100644
--- a/src/components/dialogs/UserDialog/UserDialog.vue
+++ b/src/components/dialogs/UserDialog/UserDialog.vue
@@ -555,14 +555,15 @@
                     lazy>
                     <div style="display: flex; align-items: center; justify-content: space-between">
                         <div style="display: flex; align-items: center">
-                            <el-button
-                                type="default"
-                                :loading="userDialog.isMutualFriendsLoading"
-                                size="small"
-                                :icon="Refresh"
-                                circle
+                            <Button
+                                class="rounded-full"
+                                variant="outline"
+                                size="icon-sm"
+                                :disabled="userDialog.isMutualFriendsLoading"
                                 @click="getUserMutualFriends(userDialog.id)">
-                            </el-button>
+                                <Spinner v-if="userDialog.isMutualFriendsLoading" />
+                                <Refresh v-else />
+                            </Button>
                             <span style="margin-left: 5px">{{
                                 t('dialog.user.groups.total_count', { count: userDialog.mutualFriends.length })
                             }}</span>
@@ -625,14 +626,15 @@
                 <el-tab-pane name="Groups" :label="t('dialog.user.groups.header')" lazy>
                     <div style="display: flex; align-items: center; justify-content: space-between">
                         <div style="display: flex; align-items: center">
-                            <el-button
-                                type="default"
-                                :loading="userDialog.isGroupsLoading"
-                                size="small"
-                                :icon="Refresh"
-                                circle
+                            <Button
+                                class="rounded-full"
+                                variant="outline"
+                                size="icon-sm"
+                                :disabled="userDialog.isGroupsLoading"
                                 @click="getUserGroups(userDialog.id)">
-                            </el-button>
+                                <Spinner v-if="userDialog.isGroupsLoading" />
+                                <Refresh v-else />
+                            </Button>
                             <span style="margin-left: 5px">{{
                                 t('dialog.user.groups.total_count', { count: userGroups.groups.length })
                             }}</span>
@@ -742,9 +744,9 @@
                                     </div>
 
                                     <div style="margin-right: 3px; margin-left: 5px" @click.stop>
-                                        <el-button
-                                            size="small"
-                                            :icon="DownloadIcon"
+                                        <Button
+                                            size="icon-sm"
+                                            variant="outline"
                                             style="
                                                 display: block;
                                                 padding: 7px;
@@ -753,27 +755,31 @@
                                                 rotate: 180deg;
                                             "
                                             @click="moveGroupTop(group.id)">
-                                        </el-button>
-                                        <el-button
-                                            size="small"
-                                            :icon="DownloadIcon"
+                                            <DownloadIcon />
+                                        </Button>
+                                        <Button
+                                            size="icon-sm"
+                                            variant="outline"
                                             style="display: block; padding: 7px; font-size: 9px; margin-left: 0"
                                             @click="moveGroupBottom(group.id)">
-                                        </el-button>
+                                            <DownloadIcon />
+                                        </Button>
                                     </div>
                                     <div style="margin-right: 10px" @click.stop>
-                                        <el-button
-                                            size="small"
-                                            :icon="Top"
+                                        <Button
+                                            size="icon-sm"
+                                            variant="outline"
                                             style="display: block; padding: 7px; font-size: 9px; margin-left: 0"
                                             @click="moveGroupUp(group.id)">
-                                        </el-button>
-                                        <el-button
-                                            size="small"
-                                            :icon="Bottom"
+                                            <Top />
+                                        </Button>
+                                        <Button
+                                            size="icon-sm"
+                                            variant="outline"
                                             style="display: block; padding: 7px; font-size: 9px; margin-left: 0"
                                             @click="moveGroupDown(group.id)">
-                                        </el-button>
+                                            <Bottom />
+                                        </Button>
                                     </div>
                                     <div class="avatar">
                                         <img :src="group.iconUrl" loading="lazy" />
@@ -1011,14 +1017,15 @@
                 <el-tab-pane name="Worlds" :label="t('dialog.user.worlds.header')" lazy>
                     <div style="display: flex; align-items: center; justify-content: space-between">
                         <div style="display: flex; align-items: center">
-                            <el-button
-                                type="default"
-                                :loading="userDialog.isWorldsLoading"
-                                size="small"
-                                :icon="Refresh"
-                                circle
+                            <Button
+                                class="rounded-full"
+                                variant="outline"
+                                size="icon-sm"
+                                :disabled="userDialog.isWorldsLoading"
                                 @click="refreshUserDialogWorlds()">
-                            </el-button>
+                                <Spinner v-if="userDialog.isWorldsLoading" />
+                                <Refresh v-else />
+                            </Button>
                             <span style="margin-left: 5px">{{
                                 t('dialog.user.worlds.total_count', { count: userDialog.worlds.length })
                             }}</span>
@@ -1149,24 +1156,26 @@
                 <el-tab-pane name="Avatars" :label="t('dialog.user.avatars.header')" lazy>
                     <div style="display: flex; align-items: center; justify-content: space-between">
                         <div style="display: flex; align-items: center">
-                            <el-button
+                            <Button
                                 v-if="userDialog.ref.id === currentUser.id"
-                                type="default"
-                                :loading="userDialog.isAvatarsLoading"
-                                size="small"
-                                :icon="Refresh"
-                                circle
+                                class="rounded-full"
+                                variant="outline"
+                                size="icon-sm"
+                                :disabled="userDialog.isAvatarsLoading"
                                 @click="refreshUserDialogAvatars()">
-                            </el-button>
-                            <el-button
+                                <Spinner v-if="userDialog.isAvatarsLoading" />
+                                <Refresh v-else />
+                            </Button>
+                            <Button
                                 v-else
-                                type="default"
-                                :loading="userDialog.isAvatarsLoading"
-                                size="small"
-                                :icon="Refresh"
-                                circle
+                                class="rounded-full"
+                                variant="outline"
+                                size="icon-sm"
+                                :disabled="userDialog.isAvatarsLoading"
                                 @click="setUserDialogAvatarsRemote(userDialog.id)">
-                            </el-button>
+                                <Spinner v-if="userDialog.isAvatarsLoading" />
+                                <Refresh v-else />
+                            </Button>
                             <span style="margin-left: 5px">{{
                                 t('dialog.user.avatars.total_count', { count: userDialogAvatars.length })
                             }}</span>
diff --git a/src/components/dialogs/WorldDialog/ChangeWorldImageDialog.vue b/src/components/dialogs/WorldDialog/ChangeWorldImageDialog.vue
index 58fe7ba3..5eccdaf0 100644
--- a/src/components/dialogs/WorldDialog/ChangeWorldImageDialog.vue
+++ b/src/components/dialogs/WorldDialog/ChangeWorldImageDialog.vue
@@ -22,15 +22,11 @@
                 style="margin-bottom: 12px" />
             <span>{{ t('dialog.change_content_image.description') }}</span>
             <br />
-            <el-button
-                type="default"
-                size="small"
-                :icon="Upload"
-                :loading="changeWorldImageDialogLoading"
-                :disabled="changeWorldImageDialogLoading"
-                @click="uploadWorldImage">
+            <Button variant="outline" size="sm" :disabled="changeWorldImageDialogLoading" @click="uploadWorldImage">
+                <Spinner v-if="changeWorldImageDialogLoading" />
+                <Upload v-else />
                 {{ t('dialog.change_content_image.upload') }}
-            </el-button>
+            </Button>
             <br />
             <div class="x-change-image-item">
                 <img :src="previousImageUrl" class="img-size" loading="lazy" />
@@ -40,6 +36,8 @@
 </template>
 
 <script setup>
+    import { Button } from '@/components/ui/button';
+    import { Spinner } from '@/components/ui/spinner';
     import { Upload } from '@element-plus/icons-vue';
     import { ref } from 'vue';
     import { storeToRefs } from 'pinia';
diff --git a/src/views/Charts/components/MutualFriends.vue b/src/views/Charts/components/MutualFriends.vue
index 646a0931..d951c9be 100644
--- a/src/views/Charts/components/MutualFriends.vue
+++ b/src/views/Charts/components/MutualFriends.vue
@@ -13,9 +13,10 @@
                     </Button>
                 </TooltipWrapper>
                 <TooltipWrapper :content="fetchButtonLabel" side="top">
-                    <el-button type="primary" :disabled="fetchButtonDisabled" :loading="isFetching" @click="startFetch">
+                    <Button :disabled="fetchButtonDisabled" @click="startFetch">
+                        <Spinner v-if="isFetching" />
                         {{ fetchButtonLabel }}
-                    </el-button>
+                    </Button>
                 </TooltipWrapper>
                 <TooltipWrapper
                     v-if="isFetching"
@@ -130,6 +131,7 @@
     import { Button } from '@/components/ui/button';
     import { ElMessageBox } from 'element-plus';
     import { Settings } from 'lucide-vue-next';
+    import { Spinner } from '@/components/ui/spinner';
     import { onBeforeRouteLeave } from 'vue-router';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
diff --git a/src/views/Favorites/FavoritesAvatar.vue b/src/views/Favorites/FavoritesAvatar.vue
index 6a0c6b0a..d336e466 100644
--- a/src/views/Favorites/FavoritesAvatar.vue
+++ b/src/views/Favorites/FavoritesAvatar.vue
@@ -80,12 +80,15 @@
                         <div class="group-section__header">
                             <span>{{ t('view.favorite.avatars.vrchat_favorites') }}</span>
                             <TooltipWrapper side="bottom" :content="t('view.favorite.refresh_favorites_tooltip')">
-                                <el-button
-                                    :loading="isFavoriteLoading"
-                                    size="small"
-                                    :icon="Refresh"
-                                    circle
-                                    @click.stop="handleRefreshFavorites" />
+                                <Button
+                                    class="rounded-full"
+                                    variant="outline"
+                                    size="icon-sm"
+                                    :disabled="isFavoriteLoading"
+                                    @click.stop="handleRefreshFavorites">
+                                    <Spinner v-if="isFavoriteLoading" />
+                                    <Refresh v-else />
+                                </Button>
                             </TooltipWrapper>
                         </div>
                         <div class="group-section__list">
@@ -112,12 +115,9 @@
                                                 handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
                                             ">
                                             <PopoverTrigger asChild>
-                                                <el-button
-                                                    text
-                                                    size="small"
-                                                    :icon="MoreFilled"
-                                                    circle
-                                                    @click.stop></el-button>
+                                                <Button class="rounded-full" variant="ghost" size="icon-sm" @click.stop>
+                                                    <MoreFilled />
+                                                </Button>
                                             </PopoverTrigger>
                                             <PopoverContent side="right" class="w-55 p-1 rounded-lg">
                                                 <div class="favorites-group-menu">
@@ -515,6 +515,8 @@
     import { MoreFilled, Plus, Refresh } from '@element-plus/icons-vue';
     import { Ellipsis, RefreshCcw } from 'lucide-vue-next';
     import { Button } from '@/components/ui/button';
+    import { Loader } from 'lucide-vue-next';
+    import { Spinner } from '@/components/ui/spinner';
     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 3d3b3c91..cd797c44 100644
--- a/src/views/Favorites/FavoritesFriend.vue
+++ b/src/views/Favorites/FavoritesFriend.vue
@@ -80,12 +80,15 @@
                         <div class="group-section__header">
                             <span>{{ t('view.favorite.worlds.vrchat_favorites') }}</span>
                             <TooltipWrapper side="bottom" :content="t('view.favorite.refresh_favorites_tooltip')">
-                                <el-button
-                                    :loading="isFavoriteLoading"
-                                    size="small"
-                                    :icon="Refresh"
-                                    circle
-                                    @click.stop="handleRefreshFavorites" />
+                                <Button
+                                    class="rounded-full"
+                                    variant="outline"
+                                    size="icon-sm"
+                                    :disabled="isFavoriteLoading"
+                                    @click.stop="handleRefreshFavorites">
+                                    <Spinner v-if="isFavoriteLoading" />
+                                    <Refresh v-else />
+                                </Button>
                             </TooltipWrapper>
                         </div>
                         <div class="group-section__list">
@@ -112,12 +115,9 @@
                                                 handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
                                             ">
                                             <PopoverTrigger asChild>
-                                                <el-button
-                                                    text
-                                                    size="small"
-                                                    :icon="MoreFilled"
-                                                    circle
-                                                    @click.stop></el-button>
+                                                <Button class="rounded-full" variant="ghost" size="icon-sm" @click.stop>
+                                                    <MoreFilled />
+                                                </Button>
                                             </PopoverTrigger>
                                             <PopoverContent side="right" class="w-55 p-1 rounded-lg">
                                                 <div class="favorites-group-menu">
@@ -299,6 +299,7 @@
     import { Button } from '@/components/ui/button';
     import { ElMessageBox } from 'element-plus';
     import { Ellipsis } from 'lucide-vue-next';
+    import { Spinner } from '@/components/ui/spinner';
     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 56d1d0e2..2dfd7cef 100644
--- a/src/views/Favorites/FavoritesWorld.vue
+++ b/src/views/Favorites/FavoritesWorld.vue
@@ -80,12 +80,15 @@
                         <div class="group-section__header">
                             <span>{{ t('view.favorite.worlds.vrchat_favorites') }}</span>
                             <TooltipWrapper side="bottom" :content="t('view.favorite.refresh_favorites_tooltip')">
-                                <el-button
-                                    :loading="isFavoriteLoading"
-                                    size="small"
-                                    :icon="Refresh"
-                                    circle
-                                    @click.stop="handleRefreshFavorites" />
+                                <Button
+                                    class="rounded-full"
+                                    variant="outline"
+                                    size="icon-sm"
+                                    :disabled="isFavoriteLoading"
+                                    @click.stop="handleRefreshFavorites">
+                                    <Spinner v-if="isFavoriteLoading" />
+                                    <Refresh v-else />
+                                </Button>
                             </TooltipWrapper>
                         </div>
                         <div class="group-section__list">
@@ -112,12 +115,9 @@
                                                 handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
                                             ">
                                             <PopoverTrigger asChild>
-                                                <el-button
-                                                    text
-                                                    size="small"
-                                                    :icon="MoreFilled"
-                                                    circle
-                                                    @click.stop></el-button>
+                                                <Button class="rounded-full" variant="ghost" size="icon-sm" @click.stop>
+                                                    <MoreFilled />
+                                                </Button>
                                             </PopoverTrigger>
                                             <PopoverContent side="right" class="w-50 p-1 rounded-lg">
                                                 <div class="favorites-group-menu">
@@ -429,6 +429,7 @@
     import { Ellipsis, RefreshCcw } from 'lucide-vue-next';
     import { Button } from '@/components/ui/button';
     import { ElMessageBox } from 'element-plus';
+    import { Spinner } from '@/components/ui/spinner';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
diff --git a/src/views/Favorites/components/FavoritesAvatarItem.vue b/src/views/Favorites/components/FavoritesAvatarItem.vue
index 89dfa4a7..8427f530 100644
--- a/src/views/Favorites/components/FavoritesAvatarItem.vue
+++ b/src/views/Favorites/components/FavoritesAvatarItem.vue
@@ -52,14 +52,13 @@
                                         ? t('view.favorite.delete_tooltip')
                                         : t('view.favorite.unfavorite_tooltip')
                                 ">
-                                <el-button
-                                    size="small"
-                                    circle
-                                    class="favorites-search-card__action-btn"
-                                    :type="isLocalFavorite ? 'default' : 'default'"
+                                <Button
+                                    size="icon-sm"
+                                    variant="outline"
+                                    class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
                                     @click.stop="handlePrimaryDeleteAction">
                                     <i class="ri-delete-bin-line"></i>
-                                </el-button>
+                                </Button>
                             </TooltipWrapper>
                         </div>
                     </div>
diff --git a/src/views/Favorites/components/FavoritesWorldLocalItem.vue b/src/views/Favorites/components/FavoritesWorldLocalItem.vue
index e68c2108..564b4623 100644
--- a/src/views/Favorites/components/FavoritesWorldLocalItem.vue
+++ b/src/views/Favorites/components/FavoritesWorldLocalItem.vue
@@ -32,14 +32,13 @@
                                 type="world" />
                         </div>
                         <div class="favorites-search-card__action">
-                            <el-button
-                                size="small"
-                                circle
-                                class="favorites-search-card__action-btn"
-                                :type="deleteButtonType"
+                            <Button
+                                size="icon-sm"
+                                :variant="shiftHeld ? 'destructive' : 'outline'"
+                                class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
                                 @click.stop="handlePrimaryDeleteAction">
                                 <i class="ri-delete-bin-line"></i>
-                            </el-button>
+                            </Button>
                         </div>
                     </div>
                 </template>
@@ -142,8 +141,6 @@
         return url || props.favorite.thumbnailImageUrl;
     });
 
-    const deleteButtonType = computed(() => (shiftHeld.value ? 'danger' : 'default'));
-
     const inviteOrLaunchText = computed(() => {
         return canOpenInstanceInGame
             ? t('dialog.world.actions.new_instance_and_open_ingame')
diff --git a/src/views/Moderation/Moderation.vue b/src/views/Moderation/Moderation.vue
index 210f8f26..af7a2ca1 100644
--- a/src/views/Moderation/Moderation.vue
+++ b/src/views/Moderation/Moderation.vue
@@ -19,12 +19,15 @@
                 :placeholder="t('view.moderation.search_placeholder')"
                 class="filter-input" />
             <TooltipWrapper side="bottom" :content="t('view.moderation.refresh_tooltip')">
-                <el-button
-                    type="default"
-                    :loading="playerModerationTable.loading"
-                    @click="refreshPlayerModerations()"
-                    :icon="Refresh"
-                    circle />
+                <Button
+                    class="rounded-full"
+                    variant="outline"
+                    size="icon-sm"
+                    :disabled="playerModerationTable.loading"
+                    @click="refreshPlayerModerations()">
+                    <Spinner v-if="playerModerationTable.loading" />
+                    <Refresh v-else />
+                </Button>
             </TooltipWrapper>
         </div>
 
@@ -40,8 +43,10 @@
 
 <script setup>
     import { computed, ref, watch } from 'vue';
+    import { Button } from '@/components/ui/button';
     import { ElMessageBox } from 'element-plus';
     import { Refresh } from '@element-plus/icons-vue';
+    import { Spinner } from '@/components/ui/spinner';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
diff --git a/src/views/Notifications/Notification.vue b/src/views/Notifications/Notification.vue
index 4e937fb8..0cbe6f48 100644
--- a/src/views/Notifications/Notification.vue
+++ b/src/views/Notifications/Notification.vue
@@ -49,13 +49,16 @@
                         class="flex-[0.4]"
                         style="margin: 0 10px" />
                     <TooltipWrapper side="bottom" :content="t('view.notification.refresh_tooltip')">
-                        <el-button
-                            type="default"
-                            :loading="isNotificationsLoading"
-                            :icon="Refresh"
-                            circle
+                        <Button
+                            class="rounded-full"
+                            variant="outline"
+                            size="icon-sm"
+                            :disabled="isNotificationsLoading"
                             style="flex: none"
-                            @click="refreshNotifications()" />
+                            @click="refreshNotifications()">
+                            <Spinner v-if="isNotificationsLoading" />
+                            <Refresh v-else />
+                        </Button>
                     </TooltipWrapper>
                 </div>
             </template>
@@ -71,8 +74,10 @@
 
 <script setup>
     import { computed, ref, watch } from 'vue';
+    import { Button } from '@/components/ui/button';
     import { ElMessageBox } from 'element-plus';
     import { Refresh } from '@element-plus/icons-vue';
+    import { Spinner } from '@/components/ui/spinner';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
diff --git a/src/views/Search/Search.vue b/src/views/Search/Search.vue
index beae225e..7d9574b3 100644
--- a/src/views/Search/Search.vue
+++ b/src/views/Search/Search.vue
@@ -158,14 +158,15 @@
                             </SelectContent>
                         </Select>
                         <TooltipWrapper side="bottom" :content="t('view.search.avatar.refresh_tooltip')">
-                            <el-button
-                                type="default"
-                                :loading="userDialog.isAvatarsLoading"
-                                size="small"
-                                :icon="Refresh"
-                                class="ml-1"
-                                circle
-                                @click="refreshUserDialogAvatars"></el-button>
+                            <Button
+                                class="rounded-full ml-1"
+                                variant="outline"
+                                size="icon-sm"
+                                :disabled="userDialog.isAvatarsLoading"
+                                @click="refreshUserDialogAvatars">
+                                <Spinner v-if="userDialog.isAvatarsLoading" />
+                                <Refresh v-else />
+                            </Button>
                         </TooltipWrapper>
                         <span style="font-size: 14px; margin-left: 5px; margin-right: 5px">{{
                             t('view.search.avatar.result_count', {
@@ -346,6 +347,7 @@
     import { Button } from '@/components/ui/button';
     import { ButtonGroup } from '@/components/ui/button-group';
     import { Checkbox } from '@/components/ui/checkbox';
+    import { Spinner } from '@/components/ui/spinner';
     import { Trash2 } from 'lucide-vue-next';
     import { ref } from 'vue';
     import { storeToRefs } from 'pinia';
diff --git a/src/views/Settings/dialogs/VRChatConfigDialog.vue b/src/views/Settings/dialogs/VRChatConfigDialog.vue
index bce4882b..f2b4f7ed 100644
--- a/src/views/Settings/dialogs/VRChatConfigDialog.vue
+++ b/src/views/Settings/dialogs/VRChatConfigDialog.vue
@@ -17,14 +17,16 @@
             <span v-text="totalCacheSize"></span>
             <span>GB</span>
             <TooltipWrapper side="top" :content="t('dialog.config_json.refresh')">
-                <el-button
-                    type="default"
-                    :loading="VRChatCacheSizeLoading"
-                    size="small"
-                    :icon="Refresh"
-                    circle
+                <Button
+                    class="rounded-full"
+                    variant="outline"
+                    size="icon-sm"
+                    :disabled="VRChatCacheSizeLoading"
                     style="margin-left: 5px"
-                    @click="getVRChatCacheSize"></el-button>
+                    @click="getVRChatCacheSize">
+                    <Spinner v-if="VRChatCacheSizeLoading" />
+                    <Refresh v-else />
+                </Button>
             </TooltipWrapper>
 
             <div style="margin-top: 10px">
@@ -173,6 +175,7 @@
     import { Checkbox } from '@/components/ui/checkbox';
     import { ElMessageBox } from 'element-plus';
     import { Refresh } from '@element-plus/icons-vue';
+    import { Spinner } from '@/components/ui/spinner';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
diff --git a/src/views/Sidebar/Sidebar.vue b/src/views/Sidebar/Sidebar.vue
index 18f3a8fb..ca1c15a4 100644
--- a/src/views/Sidebar/Sidebar.vue
+++ b/src/views/Sidebar/Sidebar.vue
@@ -42,14 +42,16 @@
             </el-select>
             <div>
                 <TooltipWrapper side="bottom" :content="t('side_panel.refresh_tooltip')">
-                    <el-button
-                        type="default"
-                        :loading="isRefreshFriendsLoading"
-                        size="small"
-                        :icon="Refresh"
-                        circle
+                    <Button
+                        class="rounded-full"
+                        variant="outline"
+                        size="icon-sm"
+                        :disabled="isRefreshFriendsLoading"
                         style="margin-right: 10px"
-                        @click="refreshFriendsList"></el-button>
+                        @click="refreshFriendsList">
+                        <Spinner v-if="isRefreshFriendsLoading" />
+                        <Refresh v-else />
+                    </Button>
                 </TooltipWrapper>
             </div>
         </div>
@@ -74,7 +76,9 @@
 </template>
 
 <script setup>
+    import { Button } from '@/components/ui/button';
     import { Refresh } from '@element-plus/icons-vue';
+    import { Spinner } from '@/components/ui/spinner';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
diff --git a/src/views/Tools/components/GroupCalendarEventCard.vue b/src/views/Tools/components/GroupCalendarEventCard.vue
index d54cb319..15e3364f 100644
--- a/src/views/Tools/components/GroupCalendarEventCard.vue
+++ b/src/views/Tools/components/GroupCalendarEventCard.vue
@@ -15,14 +15,16 @@
                         </template>
 
                         <el-descriptions-item>
-                            <el-button type="default" :icon="Calendar" size="small" @click="openCalendarEvent(event)">{{
-                                t('dialog.group_calendar.event_card.export_to_calendar')
-                            }}</el-button>
+                            <Button variant="outline" size="sm" @click="openCalendarEvent(event)">
+                                <Calendar />
+                                {{ t('dialog.group_calendar.event_card.export_to_calendar') }}
+                            </Button>
                         </el-descriptions-item>
                         <el-descriptions-item>
-                            <el-button type="default" :icon="Download" size="small" @click="downloadEventIcs(event)">{{
-                                t('dialog.group_calendar.event_card.download_ics')
-                            }}</el-button>
+                            <Button variant="outline" size="sm" @click="downloadEventIcs(event)">
+                                <Download />
+                                {{ t('dialog.group_calendar.event_card.download_ics') }}
+                            </Button>
                         </el-descriptions-item>
                         <el-descriptions-item :label="t('dialog.group_calendar.event_card.category')">
                             {{ capitalizeFirst(event.category) }}
@@ -72,6 +74,7 @@
 
 <script setup>
     import { Calendar, Download, Share, Star, StarFilled } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
     import { computed } from 'vue';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
diff --git a/src/views/Tools/dialogs/NoteExportDialog.vue b/src/views/Tools/dialogs/NoteExportDialog.vue
index d0b3bfe8..940affda 100644
--- a/src/views/Tools/dialogs/NoteExportDialog.vue
+++ b/src/views/Tools/dialogs/NoteExportDialog.vue
@@ -16,15 +16,20 @@
             {{ t('dialog.note_export.description8') }} <br />
         </div>
 
-        <el-button size="small" :disabled="loading" style="margin-top: 10px" @click="updateNoteExportDialog">
+        <Button
+            size="sm"
+            variant="outline"
+            :disabled="loading"
+            style="margin-top: 10px"
+            @click="updateNoteExportDialog">
             {{ t('dialog.note_export.refresh') }}
-        </el-button>
-        <el-button size="small" :disabled="loading" style="margin-top: 10px" @click="exportNoteExport">
+        </Button>
+        <Button size="sm" variant="outline" :disabled="loading" style="margin-top: 10px" @click="exportNoteExport">
             {{ t('dialog.note_export.export') }}
-        </el-button>
-        <el-button v-if="loading" size="small" style="margin-top: 10px" @click="cancelNoteExport">
+        </Button>
+        <Button v-if="loading" size="sm" variant="outline" style="margin-top: 10px" @click="cancelNoteExport">
             {{ t('dialog.note_export.cancel') }}
-        </el-button>
+        </Button>
         <span v-if="loading" style="margin: 10px">
             <el-icon style="margin-right: 5px"><Loading /></el-icon>
             {{ t('dialog.note_export.progress') }} {{ progress }}/{{ progressTotal }}