diff --git a/src/views/Favorites/FavoritesAvatar.vue b/src/views/Favorites/FavoritesAvatar.vue
index 3b4cd132..558353ab 100644
--- a/src/views/Favorites/FavoritesAvatar.vue
+++ b/src/views/Favorites/FavoritesAvatar.vue
@@ -137,38 +137,41 @@
                                                         @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>
+                                                    <DropdownMenu>
+                                                        <DropdownMenuTrigger as-child>
                                                             <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>
+                                                        </DropdownMenuTrigger>
+                                                        <DropdownMenuContent
+                                                            side="right"
+                                                            align="start"
+                                                            class="w-[180px] p-1 rounded-lg">
+                                                            <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>
+                                                        </DropdownMenuContent>
+                                                    </DropdownMenu>
                                                     <button
                                                         type="button"
                                                         class="favorites-group-menu__item favorites-group-menu__item--danger"
diff --git a/src/views/Favorites/FavoritesFriend.vue b/src/views/Favorites/FavoritesFriend.vue
index dddacc8f..5399ca92 100644
--- a/src/views/Favorites/FavoritesFriend.vue
+++ b/src/views/Favorites/FavoritesFriend.vue
@@ -137,38 +137,41 @@
                                                         @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>
+                                                    <DropdownMenu>
+                                                        <DropdownMenuTrigger as-child>
                                                             <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>
+                                                        </DropdownMenuTrigger>
+                                                        <DropdownMenuContent
+                                                            side="right"
+                                                            align="start"
+                                                            class="w-[180px] p-1 rounded-lg">
+                                                            <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>
+                                                        </DropdownMenuContent>
+                                                    </DropdownMenu>
                                                     <button
                                                         type="button"
                                                         class="favorites-group-menu__item favorites-group-menu__item--danger"
diff --git a/src/views/Favorites/FavoritesWorld.vue b/src/views/Favorites/FavoritesWorld.vue
index e434fb64..0ea16501 100644
--- a/src/views/Favorites/FavoritesWorld.vue
+++ b/src/views/Favorites/FavoritesWorld.vue
@@ -137,38 +137,41 @@
                                                         @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>
+                                                    <DropdownMenu>
+                                                        <DropdownMenuTrigger as-child>
                                                             <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>
+                                                        </DropdownMenuTrigger>
+                                                        <DropdownMenuContent
+                                                            side="right"
+                                                            align="start"
+                                                            class="w-[200px] p-1 rounded-lg">
+                                                            <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>
+                                                        </DropdownMenuContent>
+                                                    </DropdownMenu>
                                                     <button
                                                         type="button"
                                                         class="favorites-group-menu__item favorites-group-menu__item--danger"
diff --git a/src/views/Tools/components/GroupCalendarEventCard.vue b/src/views/Tools/components/GroupCalendarEventCard.vue
index a9fa0cee..28663055 100644
--- a/src/views/Tools/components/GroupCalendarEventCard.vue
+++ b/src/views/Tools/components/GroupCalendarEventCard.vue
@@ -6,48 +6,71 @@
                 <div v-if="showGroupName" class="event-group-name" @click="onGroupClick">
                     {{ groupName }}
                 </div>
-                <el-popover placement="right" :width="500" trigger="hover">
-                    <el-descriptions :title="event.title" size="small" :column="2" class="event-title-popover">
-                        <template #extra>
-                            <div>
-                                {{ formatTimeRange(event.startsAt, event.endsAt) }}
-                            </div>
-                        </template>
-
-                        <el-descriptions-item>
-                            <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>
-                            <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) }}
-                        </el-descriptions-item>
-                        <el-descriptions-item :label="t('dialog.group_calendar.event_card.interested_user')">
-                            {{ event.interestedUserCount }}
-                        </el-descriptions-item>
-                        <el-descriptions-item :label="t('dialog.group_calendar.event_card.close_time')">
-                            {{ event.closeInstanceAfterEndMinutes + ' min' }}
-                        </el-descriptions-item>
-                        <el-descriptions-item :label="t('dialog.group_calendar.event_card.created')">
-                            {{ formatDateFilter(event.createdAt, 'long') }}
-                        </el-descriptions-item>
-                        <el-descriptions-item :label="t('dialog.group_calendar.event_card.description')">
-                            {{ event.description }}
-                        </el-descriptions-item>
-                    </el-descriptions>
-                    <template #reference>
+                <Popover>
+                    <PopoverTrigger as-child>
                         <div class="event-title-content" @click="onGroupClick">
                             {{ event.title }}
                         </div>
-                    </template>
-                </el-popover>
+                    </PopoverTrigger>
+                    <PopoverContent side="right" align="start" class="w-[500px] p-3">
+                        <div class="flex items-baseline justify-between gap-3 text-xs">
+                            <div class="text-[13px] font-semibold">{{ event.title }}</div>
+                            <div class="whitespace-nowrap text-[var(--el-text-color-regular)]">
+                                {{ formatTimeRange(event.startsAt, event.endsAt) }}
+                            </div>
+                        </div>
+                        <div class="mt-2 grid grid-cols-2 gap-x-3 gap-y-2 text-xs">
+                            <div class="flex min-w-0 flex-col gap-1">
+                                <Button variant="outline" size="sm" @click="openCalendarEvent(event)">
+                                    <Calendar />
+                                    {{ t('dialog.group_calendar.event_card.export_to_calendar') }}
+                                </Button>
+                            </div>
+                            <div class="flex min-w-0 flex-col gap-1">
+                                <Button variant="outline" size="sm" @click="downloadEventIcs(event)">
+                                    <Download />
+                                    {{ t('dialog.group_calendar.event_card.download_ics') }}
+                                </Button>
+                            </div>
+                            <div class="flex min-w-0 flex-col gap-1">
+                                <div class="text-[var(--el-text-color-regular)]">
+                                    {{ t('dialog.group_calendar.event_card.category') }}
+                                </div>
+                                <div class="font-medium">{{ capitalizeFirst(event.category) }}</div>
+                            </div>
+                            <div class="flex min-w-0 flex-col gap-1">
+                                <div class="text-[var(--el-text-color-regular)]">
+                                    {{ t('dialog.group_calendar.event_card.interested_user') }}
+                                </div>
+                                <div class="font-medium">{{ event.interestedUserCount }}</div>
+                            </div>
+                            <div class="flex min-w-0 flex-col gap-1">
+                                <div class="text-[var(--el-text-color-regular)]">
+                                    {{ t('dialog.group_calendar.event_card.close_time') }}
+                                </div>
+                                <div class="font-medium">
+                                    {{ event.closeInstanceAfterEndMinutes + ' min' }}
+                                </div>
+                            </div>
+                            <div class="flex min-w-0 flex-col gap-1">
+                                <div class="text-[var(--el-text-color-regular)]">
+                                    {{ t('dialog.group_calendar.event_card.created') }}
+                                </div>
+                                <div class="font-medium">
+                                    {{ formatDateFilter(event.createdAt, 'long') }}
+                                </div>
+                            </div>
+                            <div class="col-span-2 flex min-w-0 flex-col gap-1">
+                                <div class="text-[var(--el-text-color-regular)]">
+                                    {{ t('dialog.group_calendar.event_card.description') }}
+                                </div>
+                                <div class="whitespace-pre-wrap break-words font-normal leading-snug">
+                                    {{ event.description }}
+                                </div>
+                            </div>
+                        </div>
+                    </PopoverContent>
+                </Popover>
             </div>
             <div class="event-info">
                 <div :class="timeClass">
@@ -74,6 +97,7 @@
 
 <script setup>
     import { Calendar, Download, Share, Star, StarFilled } from '@element-plus/icons-vue';
+    import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
     import { Button } from '@/components/ui/button';
     import { Card } from '@/components/ui/card';
     import { computed } from 'vue';
@@ -348,5 +372,4 @@
         font-weight: 500;
         color: var(--el-color-primary);
     }
-
 </style>