diff --git a/static/trip.html b/static/trip.html
index cb6f39a..f9d17f4 100644
--- a/static/trip.html
+++ b/static/trip.html
@@ -74,8 +74,6 @@
         .room-label { font-weight: bold; font-size: 0.8rem; margin-bottom: 0.2rem; }
         .solver-score { font-size: 0.8rem; margin-top: 0.3rem; color: var(--wa-color-neutral-500); }
         .swap-group { border-left: 2px solid var(--wa-color-brand-50); padding-left: 0.5rem; margin-bottom: 0.5rem; }
-        .swap-group-nav { display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.3rem; }
-        .swap-group-label { font-size: 0.8rem; color: var(--wa-color-neutral-500); min-width: 3rem; text-align: center; }
         .divider { border: none; border-top: 1px solid #909090; margin: 0.75rem 0; }
         .pref-rows { display: grid; grid-template-columns: auto 1fr; }
         .pref-row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; gap: 0.5rem; padding: 0.3rem 0.4rem; }
diff --git a/static/trip.js b/static/trip.js
index 7ba4a1c..5ce9d54 100644
--- a/static/trip.js
+++ b/static/trip.js
@@ -541,55 +541,33 @@ document.getElementById('solve-btn').addEventListener('click', async () => {
                 renderRoomCard(room, container, roomNum++, true);
             }
 
-            for (const group of swapGroups) {
+            for (let gi = 0; gi < swapGroups.length; gi++) {
+                const group = swapGroups[gi];
+                const prefix = String.fromCharCode('A'.charCodeAt(0) + gi);
                 const section = document.createElement('div');
                 section.className = 'swap-group';
-
-                let current = 0;
-                const roomsDiv = document.createElement('div');
                 const baseRoomNum = roomNum;
 
-                const render = () => {
-                    roomsDiv.innerHTML = '';
+                const tabGroup = document.createElement('wa-tab-group');
+                for (let ci = 0; ci < group.configs.length; ci++) {
+                    const tab = document.createElement('wa-tab');
+                    tab.slot = 'nav';
+                    tab.panel = 'sg-' + gi + '-' + ci;
+                    tab.textContent = prefix + (ci + 1);
+                    tabGroup.appendChild(tab);
+                }
+                for (let ci = 0; ci < group.configs.length; ci++) {
+                    const panel = document.createElement('wa-tab-panel');
+                    panel.name = 'sg-' + gi + '-' + ci;
                     let rn = baseRoomNum;
-                    for (const room of group.configs[current]) {
-                        renderRoomCard(room, roomsDiv, rn++, false);
+                    for (const room of group.configs[ci]) {
+                        renderRoomCard(room, panel, rn++, false);
                     }
-                };
+                    tabGroup.appendChild(panel);
+                }
 
-                const nav = document.createElement('div');
-                nav.className = 'swap-group-nav';
-                const prevBtn = document.createElement('wa-button');
-                prevBtn.size = 'small';
-                prevBtn.variant = 'text';
-                prevBtn.textContent = '\u25c0';
-                const lbl = document.createElement('span');
-                lbl.className = 'swap-group-label';
-                lbl.textContent = '1 of ' + group.configs.length;
-                const nextBtn = document.createElement('wa-button');
-                nextBtn.size = 'small';
-                nextBtn.variant = 'text';
-                nextBtn.textContent = '\u25b6';
-
-                prevBtn.addEventListener('click', () => {
-                    current = (current - 1 + group.configs.length) % group.configs.length;
-                    lbl.textContent = (current + 1) + ' of ' + group.configs.length;
-                    render();
-                });
-                nextBtn.addEventListener('click', () => {
-                    current = (current + 1) % group.configs.length;
-                    lbl.textContent = (current + 1) + ' of ' + group.configs.length;
-                    render();
-                });
-
-                nav.appendChild(prevBtn);
-                nav.appendChild(lbl);
-                nav.appendChild(nextBtn);
-                section.appendChild(nav);
-                section.appendChild(roomsDiv);
+                section.appendChild(tabGroup);
                 container.appendChild(section);
-
-                render();
                 roomNum += group.configs[0].length;
             }
         }