diff --git a/src/views/Sidebar/Sidebar.vue b/src/views/Sidebar/Sidebar.vue
index 4b0df85d..72e61db2 100644
--- a/src/views/Sidebar/Sidebar.vue
+++ b/src/views/Sidebar/Sidebar.vue
@@ -35,8 +35,7 @@
                                 size="icon-sm"
                                 @click="isNotificationCenterOpen = !isNotificationCenterOpen">
                                 <Bell />
-                                <span
-                                    class="absolute top-1 right-1.25 size-1.5 rounded-full bg-red-500" />
+                                <span class="absolute top-1 right-1.25 size-1.5 rounded-full bg-red-500" />
                             </Button>
                         </TooltipWrapper>
                     </ContextMenuTrigger>
@@ -95,7 +94,7 @@
                                 class="w-full text-sm"
                                 @click="
                                     isSettingsPopoverOpen = false;
-                                    isGroupOrderSheetOpen = true;
+                                    isGroupOrderDialogOpen = true;
                                 ">
                                 {{ t('side_panel.settings.edit_group_order') }}
                             </Button>
@@ -245,7 +244,7 @@
             </template>
         </TabsUnderline>
         <NotificationCenterSheet />
-        <GroupOrderSheet v-model:open="isGroupOrderSheetOpen" />
+        <FavoriteFriendGroupOrderDialog v-model:open="isGroupOrderDialogOpen" />
         <QuickSearchDialog />
     </div>
 </template>
@@ -289,7 +288,7 @@
 
     import FriendsSidebar from './components/FriendsSidebar.vue';
     import QuickSearchDialog from '../../components/QuickSearchDialog.vue';
-    import GroupOrderSheet from './components/GroupOrderSheet.vue';
+    import FavoriteFriendGroupOrderDialog from './components/FavoriteFriendGroupOrderDialog.vue';
     import GroupsSidebar from './components/GroupsSidebar.vue';
     import NotificationCenterSheet from './components/NotificationCenterSheet.vue';
 
@@ -374,7 +373,7 @@
     });
 
     const CLEAR_VALUE = '__clear__';
-    const isGroupOrderSheetOpen = ref(false);
+    const isGroupOrderDialogOpen = ref(false);
     const isSettingsPopoverOpen = ref(false);
 
     const sortOptions = computed(() => [
diff --git a/src/views/Sidebar/__tests__/Sidebar.test.js b/src/views/Sidebar/__tests__/Sidebar.test.js
index ec25e37f..d56e9d30 100644
--- a/src/views/Sidebar/__tests__/Sidebar.test.js
+++ b/src/views/Sidebar/__tests__/Sidebar.test.js
@@ -129,7 +129,7 @@ vi.mock('../components/FriendsSidebar.vue', () => ({
 vi.mock('../components/GroupsSidebar.vue', () => ({
     default: { template: '<div />' }
 }));
-vi.mock('../components/GroupOrderSheet.vue', () => ({
+vi.mock('../components/FavoriteFriendGroupOrderDialog.vue', () => ({
     default: { template: '<div />' }
 }));
 vi.mock('../components/NotificationCenterSheet.vue', () => ({
diff --git a/src/views/Sidebar/components/GroupOrderSheet.vue b/src/views/Sidebar/components/FavoriteFriendGroupOrderDialog.vue
similarity index 88%
rename from src/views/Sidebar/components/GroupOrderSheet.vue
rename to src/views/Sidebar/components/FavoriteFriendGroupOrderDialog.vue
index 830d06e9..2dfb6d65 100644
--- a/src/views/Sidebar/components/GroupOrderSheet.vue
+++ b/src/views/Sidebar/components/FavoriteFriendGroupOrderDialog.vue
@@ -1,10 +1,10 @@
 <template>
-    <Sheet v-model:open="isOpen">
-        <SheetContent side="right" class="w-80 flex flex-col" @open-auto-focus.prevent>
-            <SheetHeader>
-                <SheetTitle>{{ t('side_panel.settings.edit_group_order') }}</SheetTitle>
-            </SheetHeader>
-            <div class="flex-1 overflow-auto p-3">
+    <Dialog v-model:open="isOpen">
+        <DialogContent class="w-80 flex flex-col max-h-[80vh]" @open-auto-focus.prevent>
+            <DialogHeader>
+                <DialogTitle>{{ t('side_panel.settings.edit_group_order') }}</DialogTitle>
+            </DialogHeader>
+            <div class="flex-1 overflow-auto py-3">
                 <DragDropProvider @dragEnd="onDragEnd">
                     <div class="flex flex-col gap-1.5">
                         <SortableGroupItem
@@ -16,20 +16,20 @@
                     </div>
                 </DragDropProvider>
             </div>
-            <div class="flex justify-end gap-2 border-t p-3">
+            <DialogFooter>
                 <Button variant="secondary" size="sm" @click="resetOrder">
                     {{ t('common.actions.reset') }}
                 </Button>
                 <Button size="sm" @click="confirmOrder">
                     {{ t('common.actions.confirm') }}
                 </Button>
-            </div>
-        </SheetContent>
-    </Sheet>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script setup>
-    import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { computed, ref, watch } from 'vue';
     import { Button } from '@/components/ui/button';
     import { DragDropProvider } from '@dnd-kit/vue';