diff --git a/src/components/IconPicker.vue b/src/components/IconPicker.vue
index 827c88eb..f1ff552f 100644
--- a/src/components/IconPicker.vue
+++ b/src/components/IconPicker.vue
@@ -1,52 +1,56 @@
 <template>
-    <el-popover v-model:visible="visible" trigger="click" placement="bottom-start" :width="620">
-        <template #reference>
+    <Popover v-model:open="visible">
+        <PopoverTrigger asChild>
             <el-button class="icon-picker__trigger" plain>
                 <i v-if="modelValue" :class="modelValue"></i>
                 <span>{{ t('nav_menu.icon_picker.pick_icon') }}</span>
             </el-button>
-        </template>
-        <div class="icon-picker">
-            <el-input
-                v-model="search"
-                clearable
-                class="icon-picker__search"
-                :placeholder="t('nav_menu.icon_picker.search_placeholder')" />
-            <el-scrollbar v-if="filteredCategories.length" height="600px" class="icon-picker__scroll">
-                <div v-for="category in filteredCategories" :key="category.name" class="icon-picker__category">
-                    <div class="icon-picker__category-title">
-                        {{ category.name }}
-                    </div>
-                    <div class="icon-picker__grid">
-                        <div v-for="group in category.groups" :key="group.id" class="icon-picker__group">
-                            <div class="icon-picker__group-label">
-                                {{ group.label }}
-                            </div>
-                            <div class="icon-picker__variants">
-                                <button
-                                    v-for="variant in group.variants"
-                                    :key="variant.className"
-                                    type="button"
-                                    class="icon-picker__variant"
-                                    :class="{ 'is-active': variant.className === modelValue }"
-                                    :title="group.tooltip"
-                                    @click="handleSelect(variant.className)">
-                                    <i :class="[variant.className, 'ri-2x']"></i>
-                                </button>
+        </PopoverTrigger>
+        <PopoverContent side="bottom" align="start" class="w-[620px]">
+            <div class="icon-picker">
+                <el-input
+                    v-model="search"
+                    clearable
+                    class="icon-picker__search"
+                    :placeholder="t('nav_menu.icon_picker.search_placeholder')" />
+                <el-scrollbar v-if="filteredCategories.length" height="600px" class="icon-picker__scroll">
+                    <div v-for="category in filteredCategories" :key="category.name" class="icon-picker__category">
+                        <div class="icon-picker__category-title">
+                            {{ category.name }}
+                        </div>
+                        <div class="icon-picker__grid">
+                            <div v-for="group in category.groups" :key="group.id" class="icon-picker__group">
+                                <div class="icon-picker__group-label">
+                                    {{ group.label }}
+                                </div>
+                                <div class="icon-picker__variants">
+                                    <button
+                                        v-for="variant in group.variants"
+                                        :key="variant.className"
+                                        type="button"
+                                        class="icon-picker__variant"
+                                        :class="{ 'is-active': variant.className === modelValue }"
+                                        :title="group.tooltip"
+                                        @click="handleSelect(variant.className)">
+                                        <i :class="[variant.className, 'ri-2x']"></i>
+                                    </button>
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
-            </el-scrollbar>
-            <div v-else class="icon-picker__empty">{{ t('nav_menu.icon_picker.no_icon_found') }}</div>
-        </div>
-    </el-popover>
+                </el-scrollbar>
+                <div v-else class="icon-picker__empty">{{ t('nav_menu.icon_picker.no_icon_found') }}</div>
+            </div>
+        </PopoverContent>
+    </Popover>
 </template>
 
 <script setup>
     import { computed, ref, watch } from 'vue';
     import { useI18n } from 'vue-i18n';
 
+    import { Popover, PopoverContent, PopoverTrigger } from './ui/popover';
+
     import remixIconTags from '../shared/constants/remixIconTags.json';
 
     const { t } = useI18n();
diff --git a/src/components/dialogs/UserDialog/UserSummaryHeader.vue b/src/components/dialogs/UserDialog/UserSummaryHeader.vue
index d9413ecf..22b243db 100644
--- a/src/components/dialogs/UserDialog/UserSummaryHeader.vue
+++ b/src/components/dialogs/UserDialog/UserSummaryHeader.vue
@@ -182,8 +182,8 @@
                             <span v-if="badge.hidden">&nbsp;(Hidden)</span>
                         </template>
                         <div style="display: inline-block">
-                            <el-popover placement="bottom" :width="300" trigger="click">
-                                <template #reference>
+                            <Popover>
+                                <PopoverTrigger asChild>
                                     <img
                                         class="x-link x-user-badge"
                                         :src="badge.badgeImageUrl"
@@ -198,40 +198,44 @@
                                         "
                                         :class="{ 'x-user-badge-hidden': badge.hidden }"
                                         loading="lazy" />
-                                </template>
-                                <img
-                                    :src="badge.badgeImageUrl"
-                                    :class="['x-link', 'x-popover-image']"
-                                    @click="showFullscreenImageDialog(badge.badgeImageUrl)"
-                                    loading="lazy" />
-                                <br />
-                                <div style="display: block; width: 275px; word-break: normal">
-                                    <span>{{ badge.badgeName }}</span>
+                                </PopoverTrigger>
+                                <PopoverContent side="bottom" class="w-[300px]">
+                                    <img
+                                        :src="badge.badgeImageUrl"
+                                        :class="['x-link', 'x-popover-image']"
+                                        @click="showFullscreenImageDialog(badge.badgeImageUrl)"
+                                        loading="lazy" />
                                     <br />
-                                    <span class="x-grey" style="font-size: 12px">{{ badge.badgeDescription }}</span>
-                                    <br />
-                                    <span
-                                        v-if="badge.assignedAt"
-                                        class="x-grey"
-                                        style="font-family: monospace; font-size: 12px">
-                                        {{ t('dialog.user.badges.assigned') }}:
-                                        {{ formatDateFilter(badge.assignedAt, 'long') }}
-                                    </span>
-                                    <template v-if="userDialog.id === currentUser.id">
+                                    <div style="display: block; width: 275px; word-break: normal">
+                                        <span>{{ badge.badgeName }}</span>
                                         <br />
-                                        <el-checkbox
-                                            v-model="badge.hidden"
-                                            style="margin-top: 5px"
-                                            @change="toggleBadgeVisibility(badge)">
-                                            {{ t('dialog.user.badges.hidden') }}
-                                        </el-checkbox>
+                                        <span class="x-grey" style="font-size: 12px">{{ badge.badgeDescription }}</span>
                                         <br />
-                                        <el-checkbox v-model="badge.showcased" @change="toggleBadgeShowcased(badge)">
-                                            {{ t('dialog.user.badges.showcased') }}
-                                        </el-checkbox>
-                                    </template>
-                                </div>
-                            </el-popover>
+                                        <span
+                                            v-if="badge.assignedAt"
+                                            class="x-grey"
+                                            style="font-family: monospace; font-size: 12px">
+                                            {{ t('dialog.user.badges.assigned') }}:
+                                            {{ formatDateFilter(badge.assignedAt, 'long') }}
+                                        </span>
+                                        <template v-if="userDialog.id === currentUser.id">
+                                            <br />
+                                            <el-checkbox
+                                                v-model="badge.hidden"
+                                                style="margin-top: 5px"
+                                                @change="toggleBadgeVisibility(badge)">
+                                                {{ t('dialog.user.badges.hidden') }}
+                                            </el-checkbox>
+                                            <br />
+                                            <el-checkbox
+                                                v-model="badge.showcased"
+                                                @change="toggleBadgeShowcased(badge)">
+                                                {{ t('dialog.user.badges.showcased') }}
+                                            </el-checkbox>
+                                        </template>
+                                    </div>
+                                </PopoverContent>
+                            </Popover>
                         </div>
                     </TooltipWrapper>
                 </div>
@@ -260,6 +264,7 @@
     import { useI18n } from 'vue-i18n';
 
     import { formatDateFilter, languageClass, userImage, userStatusClass } from '../../../shared/utils';
+    import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover';
     import { useGalleryStore, useUserStore } from '../../../stores';
     import { Badge } from '../../ui/badge';
 
diff --git a/src/components/ui/popover/Popover.vue b/src/components/ui/popover/Popover.vue
new file mode 100644
index 00000000..7c00abd6
--- /dev/null
+++ b/src/components/ui/popover/Popover.vue
@@ -0,0 +1,18 @@
+<script setup>
+    import { PopoverRoot, useForwardPropsEmits } from 'reka-ui';
+
+    const props = defineProps({
+        defaultOpen: { type: Boolean, required: false },
+        open: { type: Boolean, required: false },
+        modal: { type: Boolean, required: false }
+    });
+    const emits = defineEmits(['update:open']);
+
+    const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+    <PopoverRoot v-slot="slotProps" data-slot="popover" v-bind="forwarded">
+        <slot v-bind="slotProps" />
+    </PopoverRoot>
+</template>
diff --git a/src/components/ui/popover/PopoverAnchor.vue b/src/components/ui/popover/PopoverAnchor.vue
new file mode 100644
index 00000000..cd8bdb51
--- /dev/null
+++ b/src/components/ui/popover/PopoverAnchor.vue
@@ -0,0 +1,15 @@
+<script setup>
+    import { PopoverAnchor } from 'reka-ui';
+
+    const props = defineProps({
+        reference: { type: null, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <PopoverAnchor data-slot="popover-anchor" v-bind="props">
+        <slot />
+    </PopoverAnchor>
+</template>
diff --git a/src/components/ui/popover/PopoverContent.vue b/src/components/ui/popover/PopoverContent.vue
new file mode 100644
index 00000000..305503cb
--- /dev/null
+++ b/src/components/ui/popover/PopoverContent.vue
@@ -0,0 +1,62 @@
+<script setup>
+    import { PopoverContent, PopoverPortal, useForwardPropsEmits } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    defineOptions({
+        inheritAttrs: false
+    });
+
+    const props = defineProps({
+        forceMount: { type: Boolean, required: false },
+        side: { type: null, required: false },
+        sideOffset: { type: Number, required: false, default: 4 },
+        sideFlip: { type: Boolean, required: false },
+        align: { type: null, required: false, default: 'center' },
+        alignOffset: { type: Number, required: false },
+        alignFlip: { type: Boolean, required: false },
+        avoidCollisions: { type: Boolean, required: false },
+        collisionBoundary: { type: null, required: false },
+        collisionPadding: { type: [Number, Object], required: false },
+        arrowPadding: { type: Number, required: false },
+        sticky: { type: String, required: false },
+        hideWhenDetached: { type: Boolean, required: false },
+        positionStrategy: { type: String, required: false },
+        updatePositionStrategy: { type: String, required: false },
+        disableUpdateOnLayoutShift: { type: Boolean, required: false },
+        prioritizePosition: { type: Boolean, required: false },
+        reference: { type: null, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        disableOutsidePointerEvents: { type: Boolean, required: false },
+        class: { type: null, required: false }
+    });
+    const emits = defineEmits([
+        'escapeKeyDown',
+        'pointerDownOutside',
+        'focusOutside',
+        'interactOutside',
+        'openAutoFocus',
+        'closeAutoFocus'
+    ]);
+
+    const delegatedProps = reactiveOmit(props, 'class');
+
+    const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <PopoverPortal>
+        <PopoverContent
+            data-slot="popover-content"
+            v-bind="{ ...$attrs, ...forwarded }"
+            :class="
+                cn(
+                    'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md origin-(--reka-popover-content-transform-origin) outline-hidden',
+                    props.class
+                )
+            ">
+            <slot />
+        </PopoverContent>
+    </PopoverPortal>
+</template>
diff --git a/src/components/ui/popover/PopoverTrigger.vue b/src/components/ui/popover/PopoverTrigger.vue
new file mode 100644
index 00000000..55d78b6f
--- /dev/null
+++ b/src/components/ui/popover/PopoverTrigger.vue
@@ -0,0 +1,20 @@
+<script setup>
+    import { PopoverTrigger } from 'reka-ui';
+    import { computed } from 'vue';
+
+    const props = defineProps({
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false }
+    });
+
+    const forwarded = computed(() => ({
+        ...props,
+        as: props.as ?? (props.asChild ? 'span' : 'button')
+    }));
+</script>
+
+<template>
+    <PopoverTrigger data-slot="popover-trigger" v-bind="forwarded">
+        <slot />
+    </PopoverTrigger>
+</template>
diff --git a/src/components/ui/popover/index.js b/src/components/ui/popover/index.js
new file mode 100644
index 00000000..4f8d5292
--- /dev/null
+++ b/src/components/ui/popover/index.js
@@ -0,0 +1,4 @@
+export { default as Popover } from './Popover.vue';
+export { default as PopoverAnchor } from './PopoverAnchor.vue';
+export { default as PopoverContent } from './PopoverContent.vue';
+export { default as PopoverTrigger } from './PopoverTrigger.vue';
diff --git a/src/views/Charts/components/InstanceActivity.vue b/src/views/Charts/components/InstanceActivity.vue
index 85a256be..a4013104 100644
--- a/src/views/Charts/components/InstanceActivity.vue
+++ b/src/views/Charts/components/InstanceActivity.vue
@@ -25,53 +25,58 @@
                     ><el-button :icon="Refresh" circle style="margin-right: 5px" @click="reloadData"></el-button
                 ></TooltipWrapper>
 
-                <el-popover placement="bottom" trigger="click" :width="250">
-                    <div class="settings">
-                        <div>
-                            <span>{{ t('view.charts.instance_activity.settings.bar_width') }}</span>
-                            <div>
-                                <el-slider
-                                    v-model.lazy="barWidth"
-                                    :max="50"
-                                    :min="1"
-                                    @change="
-                                        (value) => changeBarWidth(value, () => handleEchartsRerender())
-                                    "></el-slider>
-                            </div>
-                        </div>
-                        <div>
-                            <span>{{ t('view.charts.instance_activity.settings.show_detail') }}</span>
-                            <el-switch
-                                v-model="isDetailVisible"
-                                @change="(value) => changeIsDetailInstanceVisible(value, () => handleSettingsChange())">
-                            </el-switch>
-                        </div>
-                        <div v-if="isDetailVisible">
-                            <span>{{ t('view.charts.instance_activity.settings.show_solo_instance') }}</span>
-                            <el-switch
-                                v-model="isSoloInstanceVisible"
-                                @change="(value) => changeIsSoloInstanceVisible(value, () => handleSettingsChange())">
-                            </el-switch>
-                        </div>
-                        <div v-if="isDetailVisible">
-                            <span>{{ t('view.charts.instance_activity.settings.show_no_friend_instance') }}</span>
-                            <el-switch
-                                v-model="isNoFriendInstanceVisible"
-                                @change="
-                                    (value) => changeIsNoFriendInstanceVisible(value, () => handleSettingsChange())
-                                ">
-                            </el-switch>
-                        </div>
-                    </div>
-
-                    <template #reference>
+                <Popover>
+                    <PopoverTrigger asChild>
                         <div>
                             <TooltipWrapper :content="t('view.charts.instance_activity.settings.header')" side="top">
                                 <el-button :icon="Setting" style="margin-right: 5px" circle></el-button>
                             </TooltipWrapper>
                         </div>
-                    </template>
-                </el-popover>
+                    </PopoverTrigger>
+                    <PopoverContent side="bottom" class="w-[250px]">
+                        <div class="settings">
+                            <div>
+                                <span>{{ t('view.charts.instance_activity.settings.bar_width') }}</span>
+                                <div>
+                                    <el-slider
+                                        v-model.lazy="barWidth"
+                                        :max="50"
+                                        :min="1"
+                                        @change="
+                                            (value) => changeBarWidth(value, () => handleEchartsRerender())
+                                        "></el-slider>
+                                </div>
+                            </div>
+                            <div>
+                                <span>{{ t('view.charts.instance_activity.settings.show_detail') }}</span>
+                                <el-switch
+                                    v-model="isDetailVisible"
+                                    @change="
+                                        (value) => changeIsDetailInstanceVisible(value, () => handleSettingsChange())
+                                    ">
+                                </el-switch>
+                            </div>
+                            <div v-if="isDetailVisible">
+                                <span>{{ t('view.charts.instance_activity.settings.show_solo_instance') }}</span>
+                                <el-switch
+                                    v-model="isSoloInstanceVisible"
+                                    @change="
+                                        (value) => changeIsSoloInstanceVisible(value, () => handleSettingsChange())
+                                    ">
+                                </el-switch>
+                            </div>
+                            <div v-if="isDetailVisible">
+                                <span>{{ t('view.charts.instance_activity.settings.show_no_friend_instance') }}</span>
+                                <el-switch
+                                    v-model="isNoFriendInstanceVisible"
+                                    @change="
+                                        (value) => changeIsNoFriendInstanceVisible(value, () => handleSettingsChange())
+                                    ">
+                                </el-switch>
+                            </div>
+                        </div>
+                    </PopoverContent>
+                </Popover>
                 <el-button-group style="margin-right: 5px">
                     <TooltipWrapper :content="t('view.charts.instance_activity.previous_day')" side="top">
                         <el-button
@@ -124,13 +129,14 @@
 </template>
 
 <script setup>
-    import { nextTick, onActivated, onBeforeMount, onBeforeUnmount, onDeactivated, onMounted, ref, watch } from 'vue';
     import { ArrowLeft, ArrowRight, InfoFilled, Refresh, Setting, WarningFilled } from '@element-plus/icons-vue';
+    import { nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
     import dayjs from 'dayjs';
 
+    import { Popover, PopoverContent, PopoverTrigger } from '../../../components/ui/popover';
     import { useAppearanceSettingsStore, useFriendStore, useUserStore } from '../../../stores';
     import { parseLocation, timeToText } from '../../../shared/utils';
     import { useActivityDataProcessor } from '../composables/useActivityDataProcessor';
diff --git a/src/views/Favorites/FavoritesAvatar.vue b/src/views/Favorites/FavoritesAvatar.vue
index 16ccab8d..0ec5d913 100644
--- a/src/views/Favorites/FavoritesAvatar.vue
+++ b/src/views/Favorites/FavoritesAvatar.vue
@@ -93,71 +93,68 @@
                                         <Badge variant="outline">
                                             {{ formatVisibility(group.visibility) }}
                                         </Badge>
-                                        <el-popover
-                                            :visible="activeGroupMenu === remoteGroupMenuKey(group.key)"
-                                            @update:visible="
+                                        <Popover
+                                            :open="activeGroupMenu === remoteGroupMenuKey(group.key)"
+                                            @update:open="
                                                 handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
-                                            "
-                                            placement="right"
-                                            trigger="click"
-                                            :hide-after="0"
-                                            :width="220"
-                                            popper-style="padding: 4px; border-radius: 8px;">
-                                            <template #reference>
+                                            ">
+                                            <PopoverTrigger asChild>
                                                 <el-button
                                                     text
                                                     size="small"
                                                     :icon="MoreFilled"
                                                     circle
                                                     @click.stop></el-button>
-                                            </template>
-                                            <div class="favorites-group-menu">
-                                                <button
-                                                    type="button"
-                                                    class="favorites-group-menu__item"
-                                                    @click="handleRemoteRename(group)">
-                                                    <span>{{ t('view.favorite.rename_tooltip') }}</span>
-                                                </button>
-                                                <el-popover
-                                                    placement="right"
-                                                    trigger="hover"
-                                                    :width="180"
-                                                    popper-style="padding: 4px; border-radius: 8px;">
-                                                    <div class="group-visibility-menu">
-                                                        <button
-                                                            v-for="visibility in avatarGroupVisibilityOptions"
-                                                            :key="visibility"
-                                                            type="button"
-                                                            :class="[
-                                                                'group-visibility-menu__item',
-                                                                { 'is-active': group.visibility === visibility }
-                                                            ]"
-                                                            @click="handleVisibilitySelection(group, visibility)">
-                                                            <span>{{ formatVisibility(visibility) }}</span>
-                                                            <span
-                                                                v-if="group.visibility === visibility"
-                                                                class="group-visibility-menu__check">
-                                                                <i class="ri-check-line"></i>
-                                                            </span>
-                                                        </button>
-                                                    </div>
-                                                    <template #reference>
-                                                        <button
-                                                            type="button"
-                                                            class="favorites-group-menu__item favorites-group-menu__item--submenu">
-                                                            <span>{{ t('view.favorite.visibility_tooltip') }}</span>
-                                                            <span class="favorites-group-menu__arrow">›</span>
-                                                        </button>
-                                                    </template>
-                                                </el-popover>
-                                                <button
-                                                    type="button"
-                                                    class="favorites-group-menu__item favorites-group-menu__item--danger"
-                                                    @click="handleRemoteClear(group)">
-                                                    <span>{{ t('view.favorite.clear') }}</span>
-                                                </button>
-                                            </div>
-                                        </el-popover>
+                                            </PopoverTrigger>
+                                            <PopoverContent side="right" class="w-[220px] p-1 rounded-lg">
+                                                <div class="favorites-group-menu">
+                                                    <button
+                                                        type="button"
+                                                        class="favorites-group-menu__item"
+                                                        @click="handleRemoteRename(group)">
+                                                        <span>{{ t('view.favorite.rename_tooltip') }}</span>
+                                                    </button>
+                                                    <el-popover
+                                                        placement="right"
+                                                        trigger="hover"
+                                                        :width="180"
+                                                        popper-style="padding: 4px; border-radius: 8px;">
+                                                        <div class="group-visibility-menu">
+                                                            <button
+                                                                v-for="visibility in avatarGroupVisibilityOptions"
+                                                                :key="visibility"
+                                                                type="button"
+                                                                :class="[
+                                                                    'group-visibility-menu__item',
+                                                                    { 'is-active': group.visibility === visibility }
+                                                                ]"
+                                                                @click="handleVisibilitySelection(group, visibility)">
+                                                                <span>{{ formatVisibility(visibility) }}</span>
+                                                                <span
+                                                                    v-if="group.visibility === visibility"
+                                                                    class="group-visibility-menu__check">
+                                                                    <i class="ri-check-line"></i>
+                                                                </span>
+                                                            </button>
+                                                        </div>
+                                                        <template #reference>
+                                                            <button
+                                                                type="button"
+                                                                class="favorites-group-menu__item favorites-group-menu__item--submenu">
+                                                                <span>{{ t('view.favorite.visibility_tooltip') }}</span>
+                                                                <span class="favorites-group-menu__arrow">›</span>
+                                                            </button>
+                                                        </template>
+                                                    </el-popover>
+                                                    <button
+                                                        type="button"
+                                                        class="favorites-group-menu__item favorites-group-menu__item--danger"
+                                                        @click="handleRemoteClear(group)">
+                                                        <span>{{ t('view.favorite.clear') }}</span>
+                                                    </button>
+                                                </div>
+                                            </PopoverContent>
+                                        </Popover>
                                     </div>
                                 </div>
                             </template>
@@ -212,45 +209,40 @@
                                             <span class="group-item__count">{{
                                                 localAvatarFavGroupLength(group)
                                             }}</span>
-                                            <el-popover
-                                                :visible="activeGroupMenu === localGroupMenuKey(group)"
-                                                @update:visible="
-                                                    handleGroupMenuVisible(localGroupMenuKey(group), $event)
-                                                "
-                                                placement="right"
-                                                trigger="click"
-                                                :hide-after="0"
-                                                :width="200"
-                                                popper-style="padding: 4px; border-radius: 8px;">
-                                                <template #reference>
+                                            <Popover
+                                                :open="activeGroupMenu === localGroupMenuKey(group)"
+                                                @update:open="handleGroupMenuVisible(localGroupMenuKey(group), $event)">
+                                                <PopoverTrigger asChild>
                                                     <el-button
                                                         text
                                                         size="small"
                                                         :icon="MoreFilled"
                                                         circle
                                                         @click.stop></el-button>
-                                                </template>
-                                                <div class="favorites-group-menu">
-                                                    <button
-                                                        type="button"
-                                                        class="favorites-group-menu__item"
-                                                        @click="handleLocalRename(group)">
-                                                        <span>{{ t('view.favorite.rename_tooltip') }}</span>
-                                                    </button>
-                                                    <button
-                                                        type="button"
-                                                        class="favorites-group-menu__item"
-                                                        @click="handleCheckInvalidAvatars(group)">
-                                                        <span>{{ t('view.favorite.avatars.check_invalid') }}</span>
-                                                    </button>
-                                                    <button
-                                                        type="button"
-                                                        class="favorites-group-menu__item favorites-group-menu__item--danger"
-                                                        @click="handleLocalDelete(group)">
-                                                        <span>{{ t('view.favorite.delete_tooltip') }}</span>
-                                                    </button>
-                                                </div>
-                                            </el-popover>
+                                                </PopoverTrigger>
+                                                <PopoverContent side="right" class="w-[200px] p-1 rounded-lg">
+                                                    <div class="favorites-group-menu">
+                                                        <button
+                                                            type="button"
+                                                            class="favorites-group-menu__item"
+                                                            @click="handleLocalRename(group)">
+                                                            <span>{{ t('view.favorite.rename_tooltip') }}</span>
+                                                        </button>
+                                                        <button
+                                                            type="button"
+                                                            class="favorites-group-menu__item"
+                                                            @click="handleCheckInvalidAvatars(group)">
+                                                            <span>{{ t('view.favorite.avatars.check_invalid') }}</span>
+                                                        </button>
+                                                        <button
+                                                            type="button"
+                                                            class="favorites-group-menu__item favorites-group-menu__item--danger"
+                                                            @click="handleLocalDelete(group)">
+                                                            <span>{{ t('view.favorite.delete_tooltip') }}</span>
+                                                        </button>
+                                                    </div>
+                                                </PopoverContent>
+                                            </Popover>
                                         </div>
                                     </div>
                                 </div>
@@ -286,26 +278,23 @@
                     <div class="group-section">
                         <div class="group-section__header">
                             <span>Local History</span>
-                            <el-popover
-                                :visible="activeGroupMenu === historyGroupMenuKey"
-                                @update:visible="handleGroupMenuVisible(historyGroupMenuKey, $event)"
-                                placement="right"
-                                trigger="click"
-                                :hide-after="0"
-                                :width="180"
-                                popper-style="padding: 4px; border-radius: 8px;">
-                                <template #reference>
+                            <Popover
+                                :open="activeGroupMenu === historyGroupMenuKey"
+                                @update:open="handleGroupMenuVisible(historyGroupMenuKey, $event)">
+                                <PopoverTrigger asChild>
                                     <el-button text size="small" :icon="MoreFilled" circle @click.stop></el-button>
-                                </template>
-                                <div class="favorites-group-menu">
-                                    <button
-                                        type="button"
-                                        class="favorites-group-menu__item favorites-group-menu__item--danger"
-                                        @click="handleHistoryClear">
-                                        <span>{{ t('view.favorite.clear_tooltip') }}</span>
-                                    </button>
-                                </div>
-                            </el-popover>
+                                </PopoverTrigger>
+                                <PopoverContent side="right" class="w-[180px] p-1 rounded-lg">
+                                    <div class="favorites-group-menu">
+                                        <button
+                                            type="button"
+                                            class="favorites-group-menu__item favorites-group-menu__item--danger"
+                                            @click="handleHistoryClear">
+                                            <span>{{ t('view.favorite.clear_tooltip') }}</span>
+                                        </button>
+                                    </div>
+                                </PopoverContent>
+                            </Popover>
                         </div>
                         <div class="group-section__list">
                             <div
@@ -504,6 +493,7 @@
     import { useI18n } from 'vue-i18n';
 
     import { useAppearanceSettingsStore, useAvatarStore, useFavoriteStore, useUserStore } from '../../stores';
+    import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
     import { avatarRequest, favoriteRequest } from '../../api';
     import { Badge } from '../../components/ui/badge';
     import { useFavoritesCardScaling } from './composables/useFavoritesCardScaling.js';
diff --git a/src/views/Favorites/FavoritesFriend.vue b/src/views/Favorites/FavoritesFriend.vue
index 277a5777..ffe7b1e6 100644
--- a/src/views/Favorites/FavoritesFriend.vue
+++ b/src/views/Favorites/FavoritesFriend.vue
@@ -95,71 +95,68 @@
                                         <Badge variant="outline">
                                             {{ formatVisibility(group.visibility) }}
                                         </Badge>
-                                        <el-popover
-                                            :visible="activeGroupMenu === remoteGroupMenuKey(group.key)"
-                                            @update:visible="
+                                        <Popover
+                                            :open="activeGroupMenu === remoteGroupMenuKey(group.key)"
+                                            @update:open="
                                                 handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
-                                            "
-                                            placement="right"
-                                            trigger="click"
-                                            :hide-after="0"
-                                            :width="220"
-                                            popper-style="padding: 4px; border-radius: 8px;">
-                                            <template #reference>
+                                            ">
+                                            <PopoverTrigger asChild>
                                                 <el-button
                                                     text
                                                     size="small"
                                                     :icon="MoreFilled"
                                                     circle
                                                     @click.stop></el-button>
-                                            </template>
-                                            <div class="favorites-group-menu">
-                                                <button
-                                                    type="button"
-                                                    class="favorites-group-menu__item"
-                                                    @click="handleRemoteRename(group)">
-                                                    <span>{{ t('view.favorite.rename_tooltip') }}</span>
-                                                </button>
-                                                <el-popover
-                                                    placement="right"
-                                                    trigger="hover"
-                                                    :width="180"
-                                                    popper-style="padding: 4px; border-radius: 8px;">
-                                                    <div class="group-visibility-menu">
-                                                        <button
-                                                            v-for="visibility in friendGroupVisibilityOptions"
-                                                            :key="visibility"
-                                                            type="button"
-                                                            :class="[
-                                                                'group-visibility-menu__item',
-                                                                { 'is-active': group.visibility === visibility }
-                                                            ]"
-                                                            @click="handleVisibilitySelection(group, visibility)">
-                                                            <span>{{ formatVisibility(visibility) }}</span>
-                                                            <span
-                                                                v-if="group.visibility === visibility"
-                                                                class="group-visibility-menu__check">
-                                                                <i class="ri-check-line"></i>
-                                                            </span>
-                                                        </button>
-                                                    </div>
-                                                    <template #reference>
-                                                        <button
-                                                            type="button"
-                                                            class="favorites-group-menu__item favorites-group-menu__item--submenu">
-                                                            <span>{{ t('view.favorite.visibility_tooltip') }}</span>
-                                                            <span class="favorites-group-menu__arrow">›</span>
-                                                        </button>
-                                                    </template>
-                                                </el-popover>
-                                                <button
-                                                    type="button"
-                                                    class="favorites-group-menu__item favorites-group-menu__item--danger"
-                                                    @click="handleRemoteClear(group)">
-                                                    <span>{{ t('view.favorite.clear') }}</span>
-                                                </button>
-                                            </div>
-                                        </el-popover>
+                                            </PopoverTrigger>
+                                            <PopoverContent side="right" class="w-[220px] p-1 rounded-lg">
+                                                <div class="favorites-group-menu">
+                                                    <button
+                                                        type="button"
+                                                        class="favorites-group-menu__item"
+                                                        @click="handleRemoteRename(group)">
+                                                        <span>{{ t('view.favorite.rename_tooltip') }}</span>
+                                                    </button>
+                                                    <el-popover
+                                                        placement="right"
+                                                        trigger="hover"
+                                                        :width="180"
+                                                        popper-style="padding: 4px; border-radius: 8px;">
+                                                        <div class="group-visibility-menu">
+                                                            <button
+                                                                v-for="visibility in friendGroupVisibilityOptions"
+                                                                :key="visibility"
+                                                                type="button"
+                                                                :class="[
+                                                                    'group-visibility-menu__item',
+                                                                    { 'is-active': group.visibility === visibility }
+                                                                ]"
+                                                                @click="handleVisibilitySelection(group, visibility)">
+                                                                <span>{{ formatVisibility(visibility) }}</span>
+                                                                <span
+                                                                    v-if="group.visibility === visibility"
+                                                                    class="group-visibility-menu__check">
+                                                                    <i class="ri-check-line"></i>
+                                                                </span>
+                                                            </button>
+                                                        </div>
+                                                        <template #reference>
+                                                            <button
+                                                                type="button"
+                                                                class="favorites-group-menu__item favorites-group-menu__item--submenu">
+                                                                <span>{{ t('view.favorite.visibility_tooltip') }}</span>
+                                                                <span class="favorites-group-menu__arrow">›</span>
+                                                            </button>
+                                                        </template>
+                                                    </el-popover>
+                                                    <button
+                                                        type="button"
+                                                        class="favorites-group-menu__item favorites-group-menu__item--danger"
+                                                        @click="handleRemoteClear(group)">
+                                                        <span>{{ t('view.favorite.clear') }}</span>
+                                                    </button>
+                                                </div>
+                                            </PopoverContent>
+                                        </Popover>
                                     </div>
                                 </div>
                             </template>
@@ -287,6 +284,7 @@
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
+    import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
     import { useAppearanceSettingsStore, useFavoriteStore, useUserStore } from '../../stores';
     import { Badge } from '../../components/ui/badge';
     import { favoriteRequest } from '../../api';
diff --git a/src/views/Favorites/FavoritesWorld.vue b/src/views/Favorites/FavoritesWorld.vue
index 6bb4f53f..caafab33 100644
--- a/src/views/Favorites/FavoritesWorld.vue
+++ b/src/views/Favorites/FavoritesWorld.vue
@@ -95,69 +95,68 @@
                                         <Badge variant="outline">
                                             {{ formatVisibility(group.visibility) }}
                                         </Badge>
-                                        <el-popover
-                                            :visible="activeGroupMenu === remoteGroupMenuKey(group.key)"
-                                            @update:visible="
+                                        <Popover
+                                            :open="activeGroupMenu === remoteGroupMenuKey(group.key)"
+                                            @update:open="
                                                 handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
-                                            "
-                                            placement="right"
-                                            trigger="click"
-                                            :hide-after="0"
-                                            :width="200"
-                                            popper-style="padding: 4px; border-radius: 8px;">
-                                            <template #reference>
+                                            ">
+                                            <PopoverTrigger asChild>
                                                 <el-button
                                                     text
                                                     size="small"
                                                     :icon="MoreFilled"
                                                     circle
                                                     @click.stop></el-button>
-                                            </template>
-                                            <div class="favorites-group-menu">
-                                                <button
-                                                    type="button"
-                                                    class="favorites-group-menu__item"
-                                                    @click="handleRemoteRename(group)">
-                                                    <span>{{ t('view.favorite.rename_tooltip') }}</span>
-                                                </button>
-                                                <el-popover
-                                                    placement="right-start"
-                                                    trigger="hover"
-                                                    :width="200"
-                                                    popper-style="padding: 4px; border-radius: 8px;">
-                                                    <div class="group-visibility-menu">
-                                                        <button
-                                                            v-for="visibility in worldGroupVisibilityOptions"
-                                                            :key="visibility"
-                                                            type="button"
-                                                            class="group-visibility-menu__item"
-                                                            :class="{ 'is-active': group.visibility === visibility }"
-                                                            @click="handleVisibilitySelection(group, visibility)">
-                                                            <span>{{ formatVisibility(visibility) }}</span>
-                                                            <span
-                                                                v-if="group.visibility === visibility"
-                                                                class="group-visibility-menu__check"
-                                                                >✔</span
-                                                            >
-                                                        </button>
-                                                    </div>
-                                                    <template #reference>
-                                                        <button
-                                                            type="button"
-                                                            class="favorites-group-menu__item favorites-group-menu__item--submenu">
-                                                            <span>{{ t('view.favorite.visibility_tooltip') }}</span>
-                                                            <span class="favorites-group-menu__arrow">›</span>
-                                                        </button>
-                                                    </template>
-                                                </el-popover>
-                                                <button
-                                                    type="button"
-                                                    class="favorites-group-menu__item favorites-group-menu__item--danger"
-                                                    @click="handleRemoteClear(group)">
-                                                    <span>{{ t('view.favorite.clear') }}</span>
-                                                </button>
-                                            </div>
-                                        </el-popover>
+                                            </PopoverTrigger>
+                                            <PopoverContent side="right" class="w-[200px] p-1 rounded-lg">
+                                                <div class="favorites-group-menu">
+                                                    <button
+                                                        type="button"
+                                                        class="favorites-group-menu__item"
+                                                        @click="handleRemoteRename(group)">
+                                                        <span>{{ t('view.favorite.rename_tooltip') }}</span>
+                                                    </button>
+                                                    <el-popover
+                                                        placement="right-start"
+                                                        trigger="hover"
+                                                        :width="200"
+                                                        popper-style="padding: 4px; border-radius: 8px;">
+                                                        <div class="group-visibility-menu">
+                                                            <button
+                                                                v-for="visibility in worldGroupVisibilityOptions"
+                                                                :key="visibility"
+                                                                type="button"
+                                                                class="group-visibility-menu__item"
+                                                                :class="{
+                                                                    'is-active': group.visibility === visibility
+                                                                }"
+                                                                @click="handleVisibilitySelection(group, visibility)">
+                                                                <span>{{ formatVisibility(visibility) }}</span>
+                                                                <span
+                                                                    v-if="group.visibility === visibility"
+                                                                    class="group-visibility-menu__check"
+                                                                    >✔</span
+                                                                >
+                                                            </button>
+                                                        </div>
+                                                        <template #reference>
+                                                            <button
+                                                                type="button"
+                                                                class="favorites-group-menu__item favorites-group-menu__item--submenu">
+                                                                <span>{{ t('view.favorite.visibility_tooltip') }}</span>
+                                                                <span class="favorites-group-menu__arrow">›</span>
+                                                            </button>
+                                                        </template>
+                                                    </el-popover>
+                                                    <button
+                                                        type="button"
+                                                        class="favorites-group-menu__item favorites-group-menu__item--danger"
+                                                        @click="handleRemoteClear(group)">
+                                                        <span>{{ t('view.favorite.clear') }}</span>
+                                                    </button>
+                                                </div>
+                                            </PopoverContent>
+                                        </Popover>
                                     </div>
                                 </div>
                             </template>
@@ -210,39 +209,36 @@
                                         <div class="group-item__right">
                                             <span class="group-item__count">{{ localWorldFavGroupLength(group) }}</span>
                                             <div class="group-item__bottom">
-                                                <el-popover
-                                                    :visible="activeGroupMenu === localGroupMenuKey(group)"
-                                                    @update:visible="
+                                                <Popover
+                                                    :open="activeGroupMenu === localGroupMenuKey(group)"
+                                                    @update:open="
                                                         handleGroupMenuVisible(localGroupMenuKey(group), $event)
-                                                    "
-                                                    placement="right"
-                                                    trigger="click"
-                                                    :hide-after="0"
-                                                    :width="200"
-                                                    popper-style="padding: 4px; border-radius: 8px;">
-                                                    <template #reference>
+                                                    ">
+                                                    <PopoverTrigger asChild>
                                                         <el-button
                                                             text
                                                             size="small"
                                                             :icon="MoreFilled"
                                                             circle
                                                             @click.stop></el-button>
-                                                    </template>
-                                                    <div class="favorites-group-menu">
-                                                        <button
-                                                            type="button"
-                                                            class="favorites-group-menu__item"
-                                                            @click="handleLocalRename(group)">
-                                                            <span>{{ t('view.favorite.rename_tooltip') }}</span>
-                                                        </button>
-                                                        <button
-                                                            type="button"
-                                                            class="favorites-group-menu__item favorites-group-menu__item--danger"
-                                                            @click="handleLocalDelete(group)">
-                                                            <span>{{ t('view.favorite.delete_tooltip') }}</span>
-                                                        </button>
-                                                    </div>
-                                                </el-popover>
+                                                    </PopoverTrigger>
+                                                    <PopoverContent side="right" class="w-[200px] p-1 rounded-lg">
+                                                        <div class="favorites-group-menu">
+                                                            <button
+                                                                type="button"
+                                                                class="favorites-group-menu__item"
+                                                                @click="handleLocalRename(group)">
+                                                                <span>{{ t('view.favorite.rename_tooltip') }}</span>
+                                                            </button>
+                                                            <button
+                                                                type="button"
+                                                                class="favorites-group-menu__item favorites-group-menu__item--danger"
+                                                                @click="handleLocalDelete(group)">
+                                                                <span>{{ t('view.favorite.delete_tooltip') }}</span>
+                                                            </button>
+                                                        </div>
+                                                    </PopoverContent>
+                                                </Popover>
                                             </div>
                                         </div>
                                     </div>
@@ -412,6 +408,7 @@
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
+    import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
     import { useAppearanceSettingsStore, useFavoriteStore, useWorldStore } from '../../stores';
     import { favoriteRequest, worldRequest } from '../../api';
     import { Badge } from '../../components/ui/badge';
diff --git a/src/views/FriendsLocations/FriendsLocations.vue b/src/views/FriendsLocations/FriendsLocations.vue
index ac000001..1566a4de 100644
--- a/src/views/FriendsLocations/FriendsLocations.vue
+++ b/src/views/FriendsLocations/FriendsLocations.vue
@@ -9,8 +9,8 @@
                     :prefix-icon="Search"
                     clearable
                     placeholder="Search Friend"></el-input>
-                <el-popover placement="bottom" trigger="click" :width="350">
-                    <template #reference>
+                <Popover>
+                    <PopoverTrigger asChild>
                         <div>
                             <TooltipWrapper :content="t('view.charts.instance_activity.settings.header')" side="top">
                                 <el-button style="margin-right: 5px" circle
@@ -18,40 +18,42 @@
                                 ></el-button>
                             </TooltipWrapper>
                         </div>
-                    </template>
-                    <div style="display: flex; justify-content: space-between; align-items: center">
-                        <span class="friend-view__settings-label">{{
-                            t('view.friends_locations.separate_same_instance_friends')
-                        }}</span>
-                        <el-switch v-model="showSameInstance" />
-                    </div>
-                    <div class="friend-view__settings-row">
-                        <span class="friend-view__settings-label">{{ t('view.friends_locations.scale') }}</span>
-                        <div class="friend-view__scale-control">
-                            <span class="friend-view__scale-value">{{ cardScalePercentLabel }}&nbsp;</span>
-                            <el-slider
-                                v-model="cardScale"
-                                class="friend-view__slider"
-                                :min="0.5"
-                                :max="1.0"
-                                :step="0.01"
-                                :show-tooltip="false" />
+                    </PopoverTrigger>
+                    <PopoverContent side="bottom" class="w-[350px]">
+                        <div style="display: flex; justify-content: space-between; align-items: center">
+                            <span class="friend-view__settings-label">{{
+                                t('view.friends_locations.separate_same_instance_friends')
+                            }}</span>
+                            <el-switch v-model="showSameInstance" />
                         </div>
-                    </div>
-                    <div class="friend-view__settings-row">
-                        <span class="friend-view__settings-label">{{ t('view.friends_locations.spacing') }}</span>
-                        <div class="friend-view__scale-control">
-                            <span class="friend-view__scale-value">{{ cardSpacingPercentLabel }}&nbsp;</span>
-                            <el-slider
-                                v-model="cardSpacing"
-                                class="friend-view__slider"
-                                :min="0.25"
-                                :max="1.0"
-                                :step="0.05"
-                                :show-tooltip="false" />
+                        <div class="friend-view__settings-row">
+                            <span class="friend-view__settings-label">{{ t('view.friends_locations.scale') }}</span>
+                            <div class="friend-view__scale-control">
+                                <span class="friend-view__scale-value">{{ cardScalePercentLabel }}&nbsp;</span>
+                                <el-slider
+                                    v-model="cardScale"
+                                    class="friend-view__slider"
+                                    :min="0.5"
+                                    :max="1.0"
+                                    :step="0.01"
+                                    :show-tooltip="false" />
+                            </div>
                         </div>
-                    </div>
-                </el-popover>
+                        <div class="friend-view__settings-row">
+                            <span class="friend-view__settings-label">{{ t('view.friends_locations.spacing') }}</span>
+                            <div class="friend-view__scale-control">
+                                <span class="friend-view__scale-value">{{ cardSpacingPercentLabel }}&nbsp;</span>
+                                <el-slider
+                                    v-model="cardSpacing"
+                                    class="friend-view__slider"
+                                    :min="0.25"
+                                    :max="1.0"
+                                    :step="0.05"
+                                    :show-tooltip="false" />
+                            </div>
+                        </div>
+                    </PopoverContent>
+                </Popover>
             </div>
         </div>
         <div v-else class="friend-view__toolbar friend-view__toolbar--loading">
@@ -167,6 +169,7 @@
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
+    import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
     import { getFriendsLocations } from '../../shared/utils/location.js';
     import { useFriendStore } from '../../stores';