diff --git a/frontend/css/style.css b/frontend/css/style.css
index 29c0649..0191870 100644
--- a/frontend/css/style.css
+++ b/frontend/css/style.css
@@ -2704,6 +2704,257 @@ body.theme-light .video-card img:not(.is-loaded) {
     flex-shrink: 0;
 }
 
+/* --- Channel picker ---------------------------------------------------- */
+/* The trigger in the menu drawer: what's being read now, favicon and all. */
+.channel-trigger {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+    padding: 10px 12px;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    color: var(--text-primary);
+    font-family: var(--font-body);
+    font-size: 14px;
+    text-align: left;
+    cursor: pointer;
+    transition: border-color 0.15s ease, background 0.15s ease;
+}
+
+.channel-trigger:hover,
+.channel-trigger:focus-visible {
+    border-color: var(--border-hover);
+    outline: none;
+}
+
+.channel-trigger-text {
+    flex: 1;
+    min-width: 0;
+}
+
+.channel-trigger-name,
+.channel-trigger-note {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.channel-trigger-note {
+    font-size: 12px;
+    color: var(--text-secondary);
+    text-transform: none;
+    letter-spacing: 0;
+}
+
+.channel-trigger-caret {
+    flex-shrink: 0;
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 6px solid var(--text-secondary);
+}
+
+/* A favicon, with the channel's initial behind it for the ones that never
+   arrive -- a row is never a name beside an empty square. */
+.channel-mark {
+    position: relative;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 8px;
+    background: rgba(201, 165, 103, 0.14);
+    border: 1px solid var(--border);
+    overflow: hidden;
+}
+
+.channel-mark::before {
+    content: attr(data-letter);
+    font-family: var(--font-display);
+    font-size: 14px;
+    line-height: 1;
+    color: var(--accent);
+}
+
+.channel-favicon {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    padding: 3px;
+    background: inherit;
+}
+
+.channel-picker {
+    position: fixed;
+    inset: 0;
+    z-index: 4200;
+    display: none;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 8vh 12px 12px 12px;
+    background: rgba(10, 8, 4, 0.55);
+    backdrop-filter: blur(6px);
+}
+
+.channel-picker.open { display: flex; }
+
+.channel-picker-box {
+    display: flex;
+    flex-direction: column;
+    width: min(560px, 100%);
+    max-height: min(74vh, 700px);
+    /* Solid, not the usual translucent panel: the section headings stick over
+       the rows as they scroll, and a see-through heading is unreadable. */
+    background: var(--bg-primary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    box-shadow: 0 30px 70px var(--shadow);
+    overflow: hidden;
+    animation: card-rise 0.2s ease both;
+}
+
+.channel-picker-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 16px 18px 10px 18px;
+}
+
+.channel-picker-head h3 {
+    font-family: var(--font-display);
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.channel-search {
+    margin: 0 18px 12px 18px;
+    padding: 11px 14px;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    color: var(--text-primary);
+    font-family: var(--font-body);
+    font-size: 14px;
+}
+
+.channel-search::placeholder { color: var(--text-secondary); }
+.channel-search:focus { outline: none; border-color: var(--border-hover); }
+
+.channel-picker-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0 10px 10px 10px;
+    overscroll-behavior: contain;
+}
+
+.channel-section {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    padding: 10px 8px 6px 8px;
+    background: var(--bg-primary);
+    font-size: 11px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--text-secondary);
+}
+
+.channel-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    width: 100%;
+    padding: 10px 12px;
+    border: 1px solid transparent;
+    border-radius: 10px;
+    background: transparent;
+    color: var(--text-primary);
+    font-family: var(--font-body);
+    text-align: left;
+    cursor: pointer;
+}
+
+.channel-row.is-active { background: var(--bg-tertiary); }
+
+.channel-row.is-current {
+    border-color: var(--border-hover);
+    background: rgba(201, 165, 103, 0.10);
+}
+
+.channel-row-text {
+    flex: 1;
+    min-width: 0;
+}
+
+.channel-row-name {
+    display: block;
+    font-size: 14px;
+}
+
+.channel-row-note {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    margin-top: 2px;
+    font-size: 12px;
+    line-height: 1.4;
+    color: var(--text-secondary);
+}
+
+.channel-row-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+    margin-top: 6px;
+}
+
+.channel-tag {
+    padding: 2px 7px;
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    font-size: 10px;
+    letter-spacing: 0.04em;
+    color: var(--text-secondary);
+}
+
+.channel-row-flag {
+    flex-shrink: 0;
+    align-self: center;
+    font-size: 10px;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--accent);
+}
+
+.channel-picker-empty {
+    padding: 8px 20px 20px 20px;
+    color: var(--text-secondary);
+    font-size: 13px;
+}
+
+@media (max-width: 720px) {
+    .channel-picker { padding: 0; }
+
+    .channel-picker-box {
+        width: 100%;
+        max-height: 100%;
+        height: 100%;
+        border: none;
+        border-radius: 0;
+    }
+}
+
 /* --- Reels HUD polish: serif title + brass scrubber + mute pulse ------- */
 .feed-title { font-family: var(--font-display); }
 
diff --git a/frontend/index.html b/frontend/index.html
index ac2e67f..fbfbc4c 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -58,8 +58,17 @@
                     <select id="source-select"></select>
                 </div>
                 <div class="setting-item">
-                    <label for="channel-select">Channel</label>
-                    <select id="channel-select"></select>
+                    <label for="channel-picker-btn">Channel</label>
+                    <button id="channel-picker-btn" class="channel-trigger" type="button" aria-haspopup="dialog" aria-expanded="false">
+                        <span class="channel-mark" id="channel-trigger-mark">
+                            <img class="channel-favicon" id="channel-trigger-icon" alt="" decoding="async">
+                        </span>
+                        <span class="channel-trigger-text">
+                            <span class="channel-trigger-name" id="channel-trigger-name">No channel</span>
+                            <span class="channel-trigger-note" id="channel-trigger-note"></span>
+                        </span>
+                        <span class="channel-trigger-caret" aria-hidden="true"></span>
+                    </button>
                 </div>
             </div>
 
@@ -194,6 +203,19 @@
 
     <button id="back-to-top" class="back-to-top" type="button" title="Back to top" aria-label="Back to top">↑</button>
 
+    <div id="channel-picker" class="channel-picker" aria-hidden="true">
+        <div class="channel-picker-box" role="dialog" aria-modal="true" aria-labelledby="channel-picker-title">
+            <div class="channel-picker-head">
+                <h3 id="channel-picker-title">Channel</h3>
+                <button id="channel-picker-close" class="close-btn" type="button" aria-label="Close">✕</button>
+            </div>
+            <input id="channel-search" class="channel-search" type="text" placeholder="Search channels…"
+                   autocomplete="off" spellcheck="false" aria-controls="channel-picker-list">
+            <div id="channel-picker-list" class="channel-picker-list" role="listbox" aria-label="Channels"></div>
+            <div id="channel-picker-empty" class="channel-picker-empty">No channel matches that.</div>
+        </div>
+    </div>
+
     <div id="command-palette" class="command-palette" aria-hidden="true">
         <div class="cmdk-box" role="dialog" aria-modal="true" aria-label="Command palette">
             <input id="cmdk-input" class="cmdk-input" type="text" placeholder="Type a command or search… (⌘K)" autocomplete="off" spellcheck="false">
diff --git a/frontend/js/enhance.js b/frontend/js/enhance.js
index a7efb8d..06a0148 100644
--- a/frontend/js/enhance.js
+++ b/frontend/js/enhance.js
@@ -196,11 +196,19 @@ App.enhance = App.enhance || {};
                     out.push({ label: opt.textContent, hint: 'Source', run: () => { sourceSelect.value = opt.value; fireChange(sourceSelect); } });
                 });
             }
-            const channelSelect = document.getElementById('channel-select');
-            if (channelSelect) {
-                Array.from(channelSelect.options).forEach((opt) => {
-                    if (opt.value === channelSelect.value) return;
-                    out.push({ label: opt.textContent, hint: 'Channel', run: () => { channelSelect.value = opt.value; fireChange(channelSelect); } });
+            // The channel list is the picker's (App.ui.channels), not a
+            // <select>'s -- same entries, drawn as palette rows.
+            if (App.ui && App.ui.channels) {
+                const current = App.storage && App.storage.getSession ?
+                    App.storage.getSession() : null;
+                const currentId = (current && current.channel) ? current.channel.id : '';
+                App.ui.channels.entries().forEach((entry) => {
+                    if (entry.id === currentId) return;
+                    out.push({
+                        label: entry.label,
+                        hint: entry.group || 'Channel',
+                        run: () => App.ui.channels.choose(entry.id)
+                    });
                 });
             }
             return out;
diff --git a/frontend/js/ui.js b/frontend/js/ui.js
index a123283..deebe9c 100644
--- a/frontend/js/ui.js
+++ b/frontend/js/ui.js
@@ -229,12 +229,356 @@ App.ui = App.ui || {};
         }
     };
 
+    // ---------------------------------------------------------------------
+    // Channel picker
+    //
+    // A <select> of ninety channels tells the reader almost nothing: a wall of
+    // bare names, nothing to say which site a name belongs to or what it
+    // carries, and no way to look for one. The server sends far more than the
+    // name -- a favicon, a description, tags, whether the channel still says
+    // "work in progress" -- so the picker shows that, and lets the reader type.
+    //
+    // The <select> was also where the command palette read its channel actions
+    // from, so the list lives here now and the palette asks for it.
+    // ---------------------------------------------------------------------
+    App.ui.channels = (function() {
+        // Sections in display order: a group, then whatever the server didn't
+        // put in one. Rebuilt whenever the menu renders, which is whenever the
+        // server, its status, or the selection changes.
+        let sections = [];
+        let matched = [];      // the rows the current search leaves on screen
+        let activeIndex = 0;
+        let bound = false;
+
+        const el = (id) => document.getElementById(id);
+
+        const activeServerData = function() {
+            const session = App.storage.getSession();
+            if (!session) return null;
+            const entry = App.storage.getServerEntries()
+                .find((candidate) => candidate.url === session.server);
+            return (entry && entry.data) || null;
+        };
+
+        // Everything about a channel worth searching, in one string: a reader
+        // typing "jav", "leaks" or the site's own name should all land.
+        const haystack = function(parts) {
+            return parts.filter(Boolean).join(' ').toLowerCase();
+        };
+
+        const channelRow = function(channel, groupTitle) {
+            const tags = Array.isArray(channel.tags) ? channel.tags : [];
+            return {
+                id: channel.id,
+                name: channel.name || channel.id,
+                note: channel.description || '',
+                favicon: channel.favicon || '',
+                tags: tags.slice(0, 3),
+                // "work in progress" is the server's own word for a channel
+                // that may not answer; worth saying before it's picked.
+                flag: channel.status && channel.status !== 'active' ? channel.status :
+                    (channel.premium ? 'premium' : ''),
+                group: groupTitle || '',
+                search: haystack([channel.name, channel.id, channel.description,
+                    tags.join(' '), groupTitle])
+            };
+        };
+
+        const build = function() {
+            const data = activeServerData();
+            const channels = (data && Array.isArray(data.channels)) ? data.channels : [];
+            const groups = (data && Array.isArray(data.channelGroups)) ? data.channelGroups : [];
+            const byId = new Map(channels.map((channel) => [channel.id, channel]));
+            const grouped = new Set();
+            sections = [];
+
+            groups.forEach((group) => {
+                const ids = (Array.isArray(group.channelIds) ? group.channelIds : [])
+                    .filter((id) => byId.has(id));
+                if (!ids.length) return;
+                ids.forEach((id) => grouped.add(id));
+                const title = group.title || group.id;
+                sections.push({
+                    title: title,
+                    rows: [{
+                        id: `group:${group.id}`,
+                        name: `All ${title}`,
+                        // Every group row would otherwise be an "A" for "All".
+                        mark: title,
+                        note: `Every channel in ${title}, interleaved.`,
+                        favicon: '',
+                        tags: [],
+                        flag: ids.length === 1 ? '1 channel' : `${ids.length} channels`,
+                        group: title,
+                        search: haystack(['all', title, group.id])
+                    }].concat(ids.map((id) => channelRow(byId.get(id), title)))
+                });
+            });
+
+            const ungrouped = channels
+                .filter((channel) => !grouped.has(channel.id))
+                .sort((a, b) => (a.name || a.id || '').toLowerCase()
+                    .localeCompare((b.name || b.id || '').toLowerCase()));
+            if (ungrouped.length) {
+                sections.push({
+                    title: sections.length ? 'Everything else' : 'Channels',
+                    rows: ungrouped.map((channel) => channelRow(channel, ''))
+                });
+            }
+        };
+
+        // The letter behind a favicon that hasn't arrived (or never will), so a
+        // row is never a name next to an empty square.
+        const markFor = function(row) {
+            const mark = document.createElement('span');
+            mark.className = 'channel-mark';
+            mark.dataset.letter = (row.mark || row.name || '?').trim().charAt(0).toUpperCase();
+            if (row.favicon) {
+                const img = document.createElement('img');
+                img.className = 'channel-favicon';
+                img.alt = '';
+                img.loading = 'lazy';
+                img.decoding = 'async';
+                mark.appendChild(img);
+                // The same route race, proxy fallback and retries every other
+                // remote picture in the app goes through.
+                App.videos.attachThumbnail(img, row.favicon);
+            }
+            return mark;
+        };
+
+        const rowButton = function(row, currentId) {
+            const button = document.createElement('button');
+            button.type = 'button';
+            button.className = 'channel-row' + (row.id === currentId ? ' is-current' : '');
+            button.setAttribute('role', 'option');
+            button.setAttribute('aria-selected', row.id === currentId ? 'true' : 'false');
+            button.dataset.channelId = row.id;
+            button.appendChild(markFor(row));
+
+            const text = document.createElement('span');
+            text.className = 'channel-row-text';
+            const name = document.createElement('span');
+            name.className = 'channel-row-name';
+            name.textContent = row.name;
+            text.appendChild(name);
+            if (row.note) {
+                const note = document.createElement('span');
+                note.className = 'channel-row-note';
+                note.textContent = row.note;
+                text.appendChild(note);
+            }
+            if (row.tags.length) {
+                const tags = document.createElement('span');
+                tags.className = 'channel-row-tags';
+                row.tags.forEach((tag) => {
+                    const chip = document.createElement('span');
+                    chip.className = 'channel-tag';
+                    chip.textContent = tag;
+                    tags.appendChild(chip);
+                });
+                text.appendChild(tags);
+            }
+            button.appendChild(text);
+
+            if (row.flag) {
+                const flag = document.createElement('span');
+                flag.className = 'channel-row-flag';
+                flag.textContent = row.flag;
+                button.appendChild(flag);
+            }
+            return button;
+        };
+
+        const render = function() {
+            const list = el('channel-picker-list');
+            const empty = el('channel-picker-empty');
+            const search = el('channel-search');
+            if (!list) return;
+            const query = (search ? search.value : '').trim().toLowerCase();
+            const session = App.storage.getSession();
+            const currentId = (session && session.channel) ? session.channel.id : '';
+
+            list.innerHTML = '';
+            matched = [];
+            sections.forEach((section) => {
+                const rows = query
+                    ? section.rows.filter((row) => row.search.includes(query))
+                    : section.rows;
+                if (!rows.length) return;
+                const heading = document.createElement('div');
+                heading.className = 'channel-section';
+                heading.textContent = section.title;
+                list.appendChild(heading);
+                rows.forEach((row) => {
+                    const button = rowButton(row, currentId);
+                    const index = matched.length;
+                    button.addEventListener('click', () => App.ui.channels.choose(row.id));
+                    button.addEventListener('pointermove', () => setActive(index));
+                    list.appendChild(button);
+                    matched.push(button);
+                });
+            });
+            if (empty) empty.hidden = matched.length > 0;
+            // A shorter list under an unchanged scroll position hides its own
+            // first hits, so every search starts back at the top.
+            if (query) list.scrollTop = 0;
+            // A search starts on its first hit; an unsearched list starts on the
+            // channel already being read, which is also what gets scrolled to.
+            const current = matched.findIndex((button) => button.classList.contains('is-current'));
+            setActive(query || current < 0 ? 0 : current, !query);
+        };
+
+        const setActive = function(index, scroll) {
+            if (!matched.length) { activeIndex = 0; return; }
+            activeIndex = Math.max(0, Math.min(index, matched.length - 1));
+            matched.forEach((button, i) => button.classList.toggle('is-active', i === activeIndex));
+            if (scroll && matched[activeIndex]) {
+                matched[activeIndex].scrollIntoView({ block: 'center' });
+            }
+        };
+
+        const step = function(delta) {
+            setActive(activeIndex + delta);
+            const button = matched[activeIndex];
+            if (button) button.scrollIntoView({ block: 'nearest' });
+        };
+
+        const open = function() {
+            const picker = el('channel-picker');
+            const search = el('channel-search');
+            const trigger = el('channel-picker-btn');
+            if (!picker) return;
+            build();
+            if (search) search.value = '';
+            // Shown before it is filled: scrolling the current channel into
+            // view can't work while the list is still display:none.
+            picker.classList.add('open');
+            picker.setAttribute('aria-hidden', 'false');
+            render();
+            if (trigger) trigger.setAttribute('aria-expanded', 'true');
+            // Typing is the point of the thing -- but not on a phone, where
+            // focusing the field throws up the keyboard over the list.
+            if (search && window.matchMedia('(min-width: 720px)').matches) {
+                requestAnimationFrame(() => search.focus());
+            }
+        };
+
+        const close = function() {
+            const picker = el('channel-picker');
+            const trigger = el('channel-picker-btn');
+            if (picker) {
+                picker.classList.remove('open');
+                picker.setAttribute('aria-hidden', 'true');
+            }
+            if (trigger) trigger.setAttribute('aria-expanded', 'false');
+        };
+
+        const bind = function() {
+            if (bound) return;
+            const picker = el('channel-picker');
+            const trigger = el('channel-picker-btn');
+            const search = el('channel-search');
+            const closeBtn = el('channel-picker-close');
+            if (!picker || !trigger) return;
+            bound = true;
+
+            trigger.addEventListener('click', open);
+            if (closeBtn) closeBtn.addEventListener('click', close);
+            picker.addEventListener('click', (event) => { if (event.target === picker) close(); });
+            if (search) {
+                search.addEventListener('input', render);
+                search.addEventListener('keydown', (event) => {
+                    if (event.key === 'ArrowDown') { event.preventDefault(); step(1); }
+                    else if (event.key === 'ArrowUp') { event.preventDefault(); step(-1); }
+                    else if (event.key === 'Enter') {
+                        event.preventDefault();
+                        const button = matched[activeIndex];
+                        if (button) button.click();
+                    } else if (event.key === 'Escape') { event.preventDefault(); close(); }
+                });
+            }
+            document.addEventListener('keydown', (event) => {
+                if (event.key === 'Escape' && picker.classList.contains('open')) close();
+            });
+        };
+
+        // The trigger says what is being read now, with the same favicon the
+        // list shows, so the menu answers the question without being opened.
+        const renderTrigger = function() {
+            const session = App.storage.getSession();
+            const channel = session && session.channel;
+            const name = el('channel-trigger-name');
+            const note = el('channel-trigger-note');
+            const mark = el('channel-trigger-mark');
+            const icon = el('channel-trigger-icon');
+            if (!name || !mark || !icon) return;
+            name.textContent = channel ? (channel.name || channel.id) : 'No channel';
+            mark.dataset.letter = (channel ? (channel.name || channel.id || '?') : '?')
+                .trim().charAt(0).toUpperCase();
+            if (note) {
+                note.textContent = channel
+                    ? (channel.isGroup ? 'Whole group' : (channel.description || ''))
+                    : 'This source has no channels.';
+            }
+            App.videos.detachThumbnail(icon);
+            icon.removeAttribute('src');
+            icon.hidden = !(channel && channel.favicon);
+            if (channel && channel.favicon) App.videos.attachThumbnail(icon, channel.favicon);
+        };
+
+        return {
+            // Called by renderMenu: the picker follows whatever the menu is
+            // showing, and nothing else has to know it exists.
+            render: function() {
+                bind();
+                build();
+                renderTrigger();
+                if (el('channel-picker') && el('channel-picker').classList.contains('open')) {
+                    render();
+                }
+            },
+            open: open,
+            close: close,
+            // The flat list the command palette offers alongside its own
+            // actions -- id and label only; it draws its own rows.
+            entries: function() {
+                if (!sections.length) build();
+                const out = [];
+                sections.forEach((section) => section.rows.forEach((row) => {
+                    out.push({ id: row.id, label: row.name, group: section.title });
+                }));
+                return out;
+            },
+            choose: function(id) {
+                const session = App.storage.getSession();
+                const data = activeServerData();
+                const nextChannel = data ? App.session.resolveChannelById(data, id) : null;
+                if (!session || !nextChannel) return;
+                const serverPrefs = App.storage.getPreferences()[session.server] || {};
+                const savedOptions = serverPrefs.optionsByChannel ?
+                    serverPrefs.optionsByChannel[nextChannel.id] : null;
+                const nextSession = {
+                    server: session.server,
+                    channel: nextChannel,
+                    options: savedOptions ?
+                        App.session.hydrateOptions(nextChannel, savedOptions) :
+                        App.session.buildDefaultOptions(nextChannel)
+                };
+                App.storage.setSession(nextSession);
+                App.session.savePreference(nextSession);
+                close();
+                App.ui.renderMenu();
+                App.videos.resetAndReload();
+            }
+        };
+    })();
+
     // Settings + menu rendering.
     App.ui.renderMenu = function() {
         const session = App.storage.getSession();
         const serverEntries = App.storage.getServerEntries();
         const sourceSelect = document.getElementById('source-select');
-        const channelSelect = document.getElementById('channel-select');
         const filtersContainer = document.getElementById('filters-container');
         const sourcesList = document.getElementById('sources-list');
         const addSourceBtn = document.getElementById('add-source-btn');
@@ -242,7 +586,7 @@ App.ui = App.ui || {};
         const reloadChannelBtn = document.getElementById('reload-channel-btn');
         const favoritesToggle = document.getElementById('favorites-toggle');
 
-        if (!sourceSelect || !channelSelect || !filtersContainer) return;
+        if (!sourceSelect || !filtersContainer) return;
 
         sourceSelect.innerHTML = "";
         serverEntries.forEach((entry) => {
@@ -281,80 +625,7 @@ App.ui = App.ui || {};
             App.videos.resetAndReload();
         };
 
-        const activeServer = serverEntries.find((entry) => entry.url === (session && session.server));
-        const activeServerData = activeServer && activeServer.data ? activeServer.data : null;
-        const availableChannels = activeServerData && activeServerData.channels ?
-            [...activeServerData.channels] :
-            [];
-        availableChannels.sort((a, b) => {
-            const nameA = (a.name || a.id || '').toLowerCase();
-            const nameB = (b.name || b.id || '').toLowerCase();
-            return nameA.localeCompare(nameB);
-        });
-
-        const channelGroups = activeServerData && Array.isArray(activeServerData.channelGroups) ?
-            activeServerData.channelGroups :
-            [];
-
-        channelSelect.innerHTML = "";
-        const groupedChannelIds = new Set();
-        channelGroups.forEach((group) => {
-            const channelIds = Array.isArray(group.channelIds) ?
-                group.channelIds.filter((id) => availableChannels.some((channel) => channel.id === id)) :
-                [];
-            if (channelIds.length === 0) return;
-            channelIds.forEach((id) => groupedChannelIds.add(id));
-
-            const optgroup = document.createElement('optgroup');
-            optgroup.label = group.title || group.id;
-
-            const groupOption = document.createElement('option');
-            groupOption.value = `group:${group.id}`;
-            groupOption.textContent = `All ${group.title || group.id}`;
-            optgroup.appendChild(groupOption);
-
-            channelIds.forEach((id) => {
-                const channel = availableChannels.find((ch) => ch.id === id);
-                const option = document.createElement('option');
-                option.value = channel.id;
-                option.textContent = channel.name || channel.id;
-                optgroup.appendChild(option);
-            });
-
-            channelSelect.appendChild(optgroup);
-        });
-
-        availableChannels
-            .filter((channel) => !groupedChannelIds.has(channel.id))
-            .forEach((channel) => {
-                const option = document.createElement('option');
-                option.value = channel.id;
-                option.textContent = channel.name || channel.id;
-                channelSelect.appendChild(option);
-            });
-
-        if (session && session.channel) {
-            channelSelect.value = session.channel.id;
-        }
-
-        channelSelect.onchange = () => {
-            const selectedId = channelSelect.value;
-            const nextChannel = activeServerData ? App.session.resolveChannelById(activeServerData, selectedId) : null;
-            const prefs = App.storage.getPreferences();
-            const serverPrefs = prefs[session.server] || {};
-            const savedOptions = nextChannel && serverPrefs.optionsByChannel ?
-                serverPrefs.optionsByChannel[nextChannel.id] :
-                null;
-            const nextSession = {
-                server: session.server,
-                channel: nextChannel,
-                options: nextChannel ? (savedOptions ? App.session.hydrateOptions(nextChannel, savedOptions) : App.session.buildDefaultOptions(nextChannel)) : {}
-            };
-            App.storage.setSession(nextSession);
-            App.session.savePreference(nextSession);
-            App.ui.renderMenu();
-            App.videos.resetAndReload();
-        };
+        App.ui.channels.render();
 
         App.ui.renderFilters(filtersContainer, session);
 
diff --git a/tests/smoke_channels.py b/tests/smoke_channels.py
new file mode 100644
index 0000000..59eedf9
--- /dev/null
+++ b/tests/smoke_channels.py
@@ -0,0 +1,199 @@
+#!/usr/bin/env python3
+"""Channel picker smoke tests.
+
+Run against a locally running backend:
+
+    backend/main.py &
+    .venv/bin/python tests/smoke_channels.py
+
+The picker replaced a <select>, so what's checked here is what the <select>
+couldn't do -- show what a channel *is* (favicon, description, tags, group) and
+let it be searched -- plus the two things it could: switching the channel, and
+feeding the command palette its list.
+"""
+import sys
+from playwright.sync_api import sync_playwright
+
+BASE = "http://127.0.0.1:5000/"
+SERVER = "https://hottub.spacemoehre.de"
+CHANNEL = "xvideos"
+
+SEED = """([server, channel]) => {
+    localStorage.setItem('config', JSON.stringify({ servers: [{ [server]: {} }] }));
+    localStorage.setItem('preferences', JSON.stringify({ [server]: { channelId: channel } }));
+    localStorage.removeItem('session');
+    localStorage.setItem('favorites', JSON.stringify([]));
+}"""
+
+ROWS = """() => {
+    const list = document.getElementById('channel-picker-list');
+    const rows = Array.from(list.querySelectorAll('.channel-row'));
+    return {
+        sections: Array.from(list.querySelectorAll('.channel-section')).map((s) => s.textContent),
+        count: rows.length,
+        withNote: rows.filter((r) => !!r.querySelector('.channel-row-note')).length,
+        withTags: rows.filter((r) => !!r.querySelector('.channel-tag')).length,
+        withIconEl: rows.filter((r) => !!r.querySelector('img.channel-favicon')).length,
+        iconsLoaded: rows.filter((r) => {
+            const img = r.querySelector('img.channel-favicon');
+            return img && img.naturalWidth > 0;
+        }).length,
+        current: rows.filter((r) => r.classList.contains('is-current'))
+                     .map((r) => r.dataset.channelId),
+        groupRows: rows.filter((r) => r.dataset.channelId.startsWith('group:')).length,
+        emptyHidden: document.getElementById('channel-picker-empty').hidden,
+    };
+}"""
+
+
+class Checks:
+    def __init__(self):
+        self.failed = 0
+
+    def ok(self, label, condition, detail=""):
+        mark = "PASS" if condition else "FAIL"
+        if not condition:
+            self.failed += 1
+        print(f"  [{mark}] {label}" + (f" -- {detail}" if detail and not condition else ""))
+
+
+def boot(page):
+    page.goto(BASE, wait_until="domcontentloaded")
+    page.evaluate(SEED, [SERVER, CHANNEL])
+    page.goto(BASE, wait_until="load")
+    try:
+        page.wait_for_selector(".video-card", timeout=90000)
+    except Exception:
+        page.goto(BASE, wait_until="load")
+        page.wait_for_selector(".video-card", timeout=90000)
+    page.wait_for_timeout(2500)
+
+
+def main():
+    c = Checks()
+    with sync_playwright() as p:
+        browser = p.chromium.launch(args=[
+            "--no-sandbox", "--disable-dev-shm-usage", "--disable-gpu",
+        ])
+        page = browser.new_page(viewport={"width": 1400, "height": 1000})
+        crashes = []
+        page.on("pageerror", lambda e: crashes.append(str(e)))
+        boot(page)
+
+        print("\nthe menu says which channel is being read")
+        page.evaluate("() => App.ui.toggleDrawer('menu')")
+        page.wait_for_timeout(2500)
+        trigger = page.evaluate("""() => ({
+            name: document.getElementById('channel-trigger-name').textContent,
+            note: document.getElementById('channel-trigger-note').textContent,
+            iconLoaded: document.getElementById('channel-trigger-icon').naturalWidth > 0,
+        })""")
+        c.ok("the trigger names the current channel", trigger["name"] == "XVideos", str(trigger))
+        c.ok("and says something about it", len(trigger["note"]) > 10, str(trigger))
+        c.ok("and shows its favicon", trigger["iconLoaded"], str(trigger))
+
+        print("\nopening it lists the channels with what the server knows")
+        page.click("#channel-picker-btn")
+        page.wait_for_timeout(3000)
+        rows = page.evaluate(ROWS)
+        c.ok("every channel is listed", rows["count"] > 50, str(rows["count"]))
+        c.ok("grouped under the server's own headings", len(rows["sections"]) > 1,
+             str(rows["sections"][:4]))
+        c.ok("each group can be browsed whole", rows["groupRows"] > 1, str(rows["groupRows"]))
+        c.ok("rows carry a description", rows["withNote"] > rows["count"] // 2, str(rows))
+        c.ok("rows carry tags", rows["withTags"] > rows["count"] // 2, str(rows))
+        c.ok("rows carry a favicon", rows["withIconEl"] > rows["count"] // 2, str(rows))
+        c.ok("and the favicons actually load", rows["iconsLoaded"] > 10,
+             f"{rows['iconsLoaded']} of {rows['withIconEl']} loaded")
+        c.ok("the current channel is marked", rows["current"] == [CHANNEL], str(rows["current"]))
+
+        print("\nsearching narrows it")
+        page.fill("#channel-search", "hentai")
+        page.wait_for_timeout(600)
+        found = page.evaluate(ROWS)
+        c.ok("fewer rows than before", 0 < found["count"] < rows["count"], str(found["count"]))
+        # A row can match on its own text or on the group it sits under -- the
+        # heading is as much a fact about the channel as its description.
+        c.ok("every row left standing matches what was typed",
+             page.evaluate("""() => {
+                 let heading = '';
+                 return Array.from(document.getElementById('channel-picker-list').children)
+                     .every((node) => {
+                         if (node.classList.contains('channel-section')) {
+                             heading = node.textContent.toLowerCase();
+                             return true;
+                         }
+                         const text = (node.textContent + ' ' + node.dataset.channelId + ' ' + heading);
+                         return text.toLowerCase().includes('hentai');
+                     });
+             }"""))
+        # Description and tags are searched too, not just the name.
+        page.fill("#channel-search", "leaks")
+        page.wait_for_timeout(600)
+        by_tag = page.evaluate(ROWS)
+        c.ok("a tag finds channels whose name doesn't say it", by_tag["count"] > 0,
+             str(by_tag["count"]))
+
+        page.fill("#channel-search", "zzzznothing")
+        page.wait_for_timeout(600)
+        nothing = page.evaluate(ROWS)
+        c.ok("a search with no hits says so",
+             nothing["count"] == 0 and not nothing["emptyHidden"], str(nothing))
+
+        print("\npicking one switches the feed")
+        page.fill("#channel-search", "eporner")
+        page.wait_for_timeout(600)
+        page.click(".channel-row")
+        page.wait_for_timeout(1500)
+        c.ok("the picker closes",
+             page.evaluate("() => !document.getElementById('channel-picker').classList.contains('open')"))
+        session = page.evaluate("() => App.storage.getSession().channel.id")
+        c.ok("the session moved to it", session == "eporner", session)
+        c.ok("the trigger followed",
+             page.evaluate("() => document.getElementById('channel-trigger-name').textContent") == "EPorner")
+        page.wait_for_selector(".video-card", timeout=90000)
+        c.ok("and the grid reloaded",
+             page.evaluate("() => App.state.loadedVideos.length > 0"))
+
+        print("\nthe keyboard works too")
+        page.click("#channel-picker-btn")
+        page.wait_for_timeout(1200)
+        page.fill("#channel-search", "beeg")
+        page.wait_for_timeout(500)
+        page.press("#channel-search", "ArrowDown")
+        page.press("#channel-search", "ArrowUp")
+        page.press("#channel-search", "Enter")
+        page.wait_for_timeout(1500)
+        c.ok("Enter picks the highlighted row",
+             page.evaluate("() => App.storage.getSession().channel.id") == "beeg",
+             page.evaluate("() => App.storage.getSession().channel.id"))
+
+        page.click("#channel-picker-btn")
+        page.wait_for_timeout(800)
+        page.press("#channel-search", "Escape")
+        page.wait_for_timeout(300)
+        c.ok("Escape closes it without changing anything",
+             page.evaluate("""() => !document.getElementById('channel-picker').classList.contains('open')
+                 && App.storage.getSession().channel.id === 'beeg'"""))
+
+        print("\nthe command palette still offers the channels")
+        entries = page.evaluate("() => App.ui.channels.entries().length")
+        c.ok("the picker hands out its list", entries > 50, str(entries))
+        page.evaluate("() => App.enhance.openPalette()")
+        page.wait_for_timeout(400)
+        page.fill("#cmdk-input", "Redtube")
+        page.wait_for_timeout(400)
+        page.press("#cmdk-input", "Enter")
+        page.wait_for_timeout(1500)
+        c.ok("and choosing one from there switches the channel",
+             page.evaluate("() => App.storage.getSession().channel.id") == "redtube",
+             page.evaluate("() => App.storage.getSession().channel.id"))
+
+        c.ok("nothing threw along the way", not crashes, str(crashes[:2]))
+        browser.close()
+
+    print(f"\n{'OK' if not c.failed else 'FAILED'}: {c.failed} check(s) failed")
+    return 1 if c.failed else 0
+
+
+sys.exit(main())