diff --git a/src/lib/app_components/e_app_sys_bar.svelte b/src/lib/app_components/e_app_sys_bar.svelte
index bcbcb02c..8f3b27ad 100644
--- a/src/lib/app_components/e_app_sys_bar.svelte
+++ b/src/lib/app_components/e_app_sys_bar.svelte
@@ -204,25 +204,20 @@ let access_label = $derived.by(() => {
     return map[t] ?? t;
 });
 
-// Theme picker groups — keep label lists in sync with e_app_url_builder.svelte
-// Skeleton system themes (first-party, no AE prefix)
+// Theme picker groups — keep in sync with e_app_url_builder.svelte
+// Pruned to themes that are actually used. Full Skeleton list had 10 entries;
+// concord/crimson/hamlindigo/rocket/terminus/vintage removed (never used).
 const skeleton_themes = [
     { value: 'nouveau', label: 'Nouveau' },
     { value: 'cerberus', label: 'Cerberus' },
-    { value: 'concord', label: 'Concord' },
-    { value: 'crimson', label: 'Crimson' },
-    { value: 'hamlindigo', label: 'Hamlindigo' },
     { value: 'modern', label: 'Modern' },
-    { value: 'rocket', label: 'Rocket' },
-    { value: 'terminus', label: 'Terminus' },
-    { value: 'vintage', label: 'Vintage' },
     { value: 'wintry', label: 'Wintry' },
 ];
-// AE custom themes
+// AE custom themes — Firefly variants are event-specific; prune when no longer needed.
 const ae_themes = [
     { value: 'AE_OSIT_default', label: 'OSIT' },
     { value: 'AE_Firefly', label: 'Firefly ✦' },
-    { value: 'AE_Firefly_SteelBlue', label: 'Steel ✦' },
+    { value: 'AE_Firefly_SteelBlue', label: 'Steel Blue ✦' },
     { value: 'AE_Firefly_Indigo', label: 'Indigo ✦' },
     { value: 'AE_Firefly_Rainbow', label: 'Rainbow ✨' },
     { value: 'AE_Firefly_Axonius', label: 'Axonius ✦' },
@@ -441,45 +436,25 @@ function apply_theme(value: string) {
                             </button>
                         </div>
 
-                        <!-- Theme picker: grouped pills -->
-                        <div class="space-y-2">
-                            <div class="text-xs font-medium text-gray-400 dark:text-gray-500">Theme</div>
-
-                            <!-- Skeleton system themes -->
-                            <div class="space-y-1">
-                                <div class="text-[10px] font-semibold uppercase tracking-wider text-gray-300 dark:text-gray-600">System</div>
-                                <div class="flex flex-wrap gap-1">
+                        <!-- Theme picker: compact grouped select -->
+                        <div class="flex items-center gap-2">
+                            <span class="shrink-0 text-xs text-gray-400 dark:text-gray-500">Theme</span>
+                            <select
+                                bind:value={$ae_loc.theme_name}
+                                onchange={(e) => apply_theme((e.target as HTMLSelectElement).value)}
+                                class="flex-1 rounded-md border border-gray-200 bg-gray-50 px-2 py-1 text-xs text-gray-800 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
+                                title="Select theme (current: {$ae_loc.theme_name ?? 'default'})">
+                                <optgroup label="System">
                                     {#each skeleton_themes as opt (opt.value)}
-                                        <button
-                                            type="button"
-                                            onclick={() => apply_theme(opt.value)}
-                                            class="rounded-md px-2 py-0.5 text-xs transition-all
-                                                {$ae_loc.theme_name === opt.value
-                                                    ? 'bg-primary-500 text-white font-semibold shadow-sm'
-                                                    : 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'}">
-                                            {opt.label}
-                                        </button>
+                                        <option value={opt.value}>{opt.label}</option>
                                     {/each}
-                                </div>
-                            </div>
-
-                            <!-- AE custom themes -->
-                            <div class="space-y-1">
-                                <div class="text-[10px] font-semibold uppercase tracking-wider text-gray-300 dark:text-gray-600">AE</div>
-                                <div class="flex flex-wrap gap-1">
+                                </optgroup>
+                                <optgroup label="AE">
                                     {#each ae_themes as opt (opt.value)}
-                                        <button
-                                            type="button"
-                                            onclick={() => apply_theme(opt.value)}
-                                            class="rounded-md px-2 py-0.5 text-xs transition-all
-                                                {$ae_loc.theme_name === opt.value
-                                                    ? 'bg-primary-500 text-white font-semibold shadow-sm'
-                                                    : 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'}">
-                                            {opt.label}
-                                        </button>
+                                        <option value={opt.value}>{opt.label}</option>
                                     {/each}
-                                </div>
-                            </div>
+                                </optgroup>
+                            </select>
                         </div>
                     </div>
                 {/if}