diff --git a/server/src/wled_controller/static/css/layout.css b/server/src/wled_controller/static/css/layout.css
index 8462187..6694a04 100644
--- a/server/src/wled_controller/static/css/layout.css
+++ b/server/src/wled_controller/static/css/layout.css
@@ -63,7 +63,7 @@ h2 {
     padding: 2px 4px;
     border: none;
     border-radius: 5px;
-    background: transparent;
+    background: var(--card-bg);
     color: var(--text-secondary);
     font-size: 0.7rem;
     font-weight: 600;
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 69782a9..1fcfea2 100644
--- a/server/src/wled_controller/static/js/core/command-palette.js
+++ b/server/src/wled_controller/static/js/core/command-palette.js
@@ -10,6 +10,7 @@ import {
     ICON_DEVICE, ICON_TARGET, ICON_AUTOMATION, ICON_VALUE_SOURCE, ICON_SCENE,
     ICON_CAPTURE_TEMPLATE, ICON_PP_TEMPLATE, ICON_PATTERN_TEMPLATE,
 } from './icons.js';
+import { getCardColor } from './card-colors.js';
 
 let _isOpen = false;
 let _items = [];
@@ -191,7 +192,9 @@ function _render() {
         html += `<div class="cp-group-header">${t('search.group.' + group)}</div>`;
         for (const item of items) {
             const active = idx === _selectedIdx ? ' cp-active' : '';
-            html += `<div class="cp-result${active}" data-cp-idx="${idx}">` +
+            const color = getCardColor(item.nav[4]);
+            const colorStyle = color ? ` style="border-left:3px solid ${color}"` : '';
+            html += `<div class="cp-result${active}" data-cp-idx="${idx}"${colorStyle}>` +
                 `<span class="cp-icon">${item.icon}</span>` +
                 `<span class="cp-name">${_escHtml(item.name)}</span>` +
                 (item.detail ? `<span class="cp-detail">${_escHtml(item.detail)}</span>` : '') +