diff --git a/server/src/wled_controller/static/css/layout.css b/server/src/wled_controller/static/css/layout.css
index 8b97f48..51a2a7b 100644
--- a/server/src/wled_controller/static/css/layout.css
+++ b/server/src/wled_controller/static/css/layout.css
@@ -291,6 +291,8 @@ h2 {
     padding: 8px 16px;
     cursor: pointer;
     transition: background 0.1s;
+    position: relative;
+    z-index: 1;
 }
 
 .cp-result:hover {
diff --git a/server/src/wled_controller/static/css/patterns.css b/server/src/wled_controller/static/css/patterns.css
index 174ba0c..9be4429 100644
--- a/server/src/wled_controller/static/css/patterns.css
+++ b/server/src/wled_controller/static/css/patterns.css
@@ -80,6 +80,8 @@
 .card-highlight,
 .template-card.card-highlight {
     animation: cardHighlight 2s ease-in-out;
+    position: relative;
+    z-index: 11;
 }
 
 /* Key Colors target styles */
diff --git a/server/src/wled_controller/static/js/core/command-palette.js b/server/src/wled_controller/static/js/core/command-palette.js
index f89085c..1415c65 100644
--- a/server/src/wled_controller/static/js/core/command-palette.js
+++ b/server/src/wled_controller/static/js/core/command-palette.js
@@ -123,18 +123,6 @@ async function _fetchAllEntities() {
     return _buildItems(results);
 }
 
-// ─── Filtering ───
-
-function _filterItems(query) {
-    if (!query) return _items;
-    const lower = query.toLowerCase();
-    const terms = lower.split(/\s+/).filter(Boolean);
-    return _items.filter(item => {
-        const text = `${item.name} ${item.detail} ${t('search.group.' + item.group)}`.toLowerCase();
-        return terms.every(term => text.includes(term));
-    });
-}
-
 // ─── Group ordering ───
 
 const _groupOrder = [
@@ -143,6 +131,25 @@ const _groupOrder = [
     'audio', 'value',
 ];
 
+const _groupRank = new Map(_groupOrder.map((g, i) => [g, i]));
+
+// ─── Filtering ───
+
+function _filterItems(query) {
+    let result = _items;
+    if (query) {
+        const lower = query.toLowerCase();
+        const terms = lower.split(/\s+/).filter(Boolean);
+        result = _items.filter(item => {
+            const text = `${item.name} ${item.detail} ${t('search.group.' + item.group)}`.toLowerCase();
+            return terms.every(term => text.includes(term));
+        });
+    }
+    // Sort by _groupOrder so indices match the grouped render order
+    result.sort((a, b) => (_groupRank.get(a.group) ?? 99) - (_groupRank.get(b.group) ?? 99));
+    return result;
+}
+
 // ─── Rendering ───
 
 function _render() {