diff --git a/REUSE.toml b/REUSE.toml
index 97493328c2e..39176bbd3b8 100644
--- a/REUSE.toml
+++ b/REUSE.toml
@@ -158,6 +158,7 @@ SPDX-License-Identifier = "LicenseRef-qskinny"
 path = [
   "tools/lsp/ui/assets/chevron-down.svg",
   "tools/lsp/ui/assets/inspect.svg",
+  "tools/lsp/ui/assets/list-filter.svg",
   "tools/lsp/ui/assets/layout-sidebar**.svg",
   "tools/lsp/ui/assets/search.svg",
   "tools/lsp/ui/assets/sync.svg",
diff --git a/tools/lsp/preview/element_selection.rs b/tools/lsp/preview/element_selection.rs
index cfc4a5c5656..912e7234142 100644
--- a/tools/lsp/preview/element_selection.rs
+++ b/tools/lsp/preview/element_selection.rs
@@ -447,10 +447,23 @@ pub fn selection_stack_at(
 pub fn filter_sort_selection_stack(
     model: slint::ModelRc<crate::preview::ui::SelectionStackFrame>,
     filter: slint::SharedString,
+    sort_by_area: bool,
 ) -> slint::ModelRc<crate::preview::ui::SelectionStackFrame> {
     use slint::ModelExt;
 
-    eprintln!("filter: {filter}");
+    eprintln!("filter: {filter}: {sort_by_area}");
+
+    let model = if sort_by_area {
+        Rc::new(model.sort_by(|a, b| {
+            let a_area = a.width * a.height;
+            let b_area = b.width * b.height;
+
+            a_area.partial_cmp(&b_area).unwrap_or(std::cmp::Ordering::Equal)
+        }))
+        .into()
+    } else {
+        model
+    };
 
     let filter = filter.to_string();
 
diff --git a/tools/lsp/ui/api.slint b/tools/lsp/ui/api.slint
index 4f180543470..a5e41135b02 100644
--- a/tools/lsp/ui/api.slint
+++ b/tools/lsp/ui/api.slint
@@ -404,7 +404,7 @@ export global Api {
 
     // ## Element selection:
     callback selection-stack-at(x: length, y: length) -> [SelectionStackFrame];
-    pure callback filter-sort-selection-stack(model: [SelectionStackFrame], filter: string) -> [SelectionStackFrame];
+    pure callback filter-sort-selection-stack(model: [SelectionStackFrame], filter: string, sort-by-area: bool) -> [SelectionStackFrame];
     pure callback find-selected-selection-stack-frame([SelectionStackFrame]) -> SelectionStackFrame;
     callback select-element(file: string, offset: int, x: length, y: length);
 
diff --git a/tools/lsp/ui/assets/list-filter.svg b/tools/lsp/ui/assets/list-filter.svg
new file mode 100644
index 00000000000..82c0e947076
--- /dev/null
+++ b/tools/lsp/ui/assets/list-filter.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M6 12v-1h4v1H6zM4 7h8v1H4V7zm10-4v1H2V3h12z"/></svg>
\ No newline at end of file
diff --git a/tools/lsp/ui/components/selection-popup.slint b/tools/lsp/ui/components/selection-popup.slint
index 9dc5649b2c3..902bf3a0688 100644
--- a/tools/lsp/ui/components/selection-popup.slint
+++ b/tools/lsp/ui/components/selection-popup.slint
@@ -1,7 +1,7 @@
 // Copyright © SixtyFPS GmbH <info@slint.dev>
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
 
-import { ListView, Palette, ScrollView, LineEdit } from "std-widgets.slint";
+import { ListView, Palette, ScrollView, LineEdit, Button } from "std-widgets.slint";
 import { EditorFontSettings, EditorSizeSettings, EditorSpaceSettings, EditorPalette } from "./styling.slint";
 import { Api, SelectionStackFrame } from "../api.slint";
 import { Icons } from "styling.slint";
@@ -165,6 +165,12 @@ component PopupInner inherits Rectangle {
                     self.focus();
                 }
             }
+
+            sort-by-area-button := Button {
+                checkable: true;
+                icon: Icons.list-filter;
+                colorize-icon: true;
+            }
         }
 
         ScrollView {
@@ -172,7 +178,7 @@ component PopupInner inherits Rectangle {
 
             list-view := VerticalLayout {
 
-                for frame[index] in Api.filter-sort-selection-stack(root.selection-stack, filter-edit.text): frame-rect := Rectangle {
+                for frame[index] in Api.filter-sort-selection-stack(root.selection-stack, filter-edit.text, sort-by-area-button.checked): frame-rect := Rectangle {
                     height: root.frame-height;
 
                     function frame-color(frame: SelectionStackFrame) -> brush {
diff --git a/tools/lsp/ui/components/styling.slint b/tools/lsp/ui/components/styling.slint
index f2985923536..4dcbbd055dd 100644
--- a/tools/lsp/ui/components/styling.slint
+++ b/tools/lsp/ui/components/styling.slint
@@ -6,6 +6,7 @@ import { Palette } from "std-widgets.slint";
 export global Icons {
     out property <image> add: @image-url("../assets/add.svg");
     out property <image> chevron-down: @image-url("../assets/chevron-down.svg");
+    out property <image> list-filter: @image-url("../assets/list-filter.svg");
     out property <image> inspect: @image-url("../assets/inspect.svg");
     out property <image> search: @image-url("../assets/search.svg");
     out property <image> sidebar-left-off: @image-url("../assets/layout-sidebar-left-off.svg");