diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index eec2c92..275c329 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -1,7 +1,7 @@
 import type { Config, Download, Group, WorkApp } from "../types";
 import { Back, Cog, Collapse, Forward, Reload } from "./icons";
 import Downloads from "./Downloads";
-import { Favicon, GROUP_LABEL, ICON_CHROME } from "./ui";
+import { BUTTON_BAR, Favicon, GROUP_LABEL, ICON_CHROME, ICON_ON_BAR } from "./ui";
 
 interface Props {
   config: Config;
@@ -50,13 +50,13 @@ export default function Nav({
      you want gone. */
   const controls = (
     <>
-      <button onClick={onBack} disabled={disabled} title="Back (or swipe left)" className={ICON_CHROME}>
+      <button onClick={onBack} disabled={disabled} title="Back (or swipe left)" className={ICON_ON_BAR}>
         <Back />
       </button>
-      <button onClick={onForward} disabled={disabled} title="Forward (or swipe right)" className={ICON_CHROME}>
+      <button onClick={onForward} disabled={disabled} title="Forward (or swipe right)" className={ICON_ON_BAR}>
         <Forward />
       </button>
-      <button onClick={onReload} disabled={disabled} title="Reload" className={ICON_CHROME}>
+      <button onClick={onReload} disabled={disabled} title="Reload" className={ICON_ON_BAR}>
         <Reload />
       </button>
     </>
@@ -205,16 +205,18 @@ export default function Nav({
       <div data-tauri-drag-region className="shrink-0" style={{ height: chrome }} />
       <header
         data-tauri-drag-region
-        className="flex items-center gap-0.5 border-b border-slate-200 px-1.5 py-2.5 dark:border-slate-800"
+        className="border-b border-slate-200 px-2 py-2 dark:border-slate-800"
       >
-        {controls}
-        <button
-          onClick={onToggleCollapse}
-          title="Collapse"
-          className={`${ICON_CHROME} ml-auto`}
-        >
-          <Collapse open />
-        </button>
+        <div className={BUTTON_BAR}>
+          {controls}
+          <button
+            onClick={onToggleCollapse}
+            title="Collapse"
+            className={`${ICON_ON_BAR} ml-auto`}
+          >
+            <Collapse open />
+          </button>
+        </div>
       </header>
 
       <nav data-tauri-drag-region className="min-h-0 flex-1 overflow-y-auto px-2 py-3">
@@ -237,7 +239,6 @@ export default function Nav({
                   <path strokeLinecap="round" strokeLinejoin="round" d="M9 6l6 6-6 6" />
                 </svg>
                 <span className="truncate">{g.name}</span>
-                <span className="ml-auto font-mono text-[10px] opacity-60">{apps.length}</span>
               </button>
               {!g.collapsed && <ul data-tauri-drag-region className="space-y-0.5">{apps.map(appRow)}</ul>}
             </section>
diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 59b0fc6..012e8a9 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -16,7 +16,10 @@ import {
   HELP,
   ICON_CHROME,
   INPUT,
+  INPUT_BARE,
   LABEL,
+  ROW,
+  ROW_LIST,
   SUBPANEL,
   SectionHeading,
   Segmented,
@@ -113,29 +116,26 @@ export default function Settings({
           {/* ----------------------------------------------------- apps */}
           <section className="space-y-2">
             <SectionHeading>Apps</SectionHeading>
-            <div className="space-y-1.5">
-              {config.apps.length === 0 && <p className={HELP}>Nothing yet. Add the first one below.</p>}
+            {config.apps.length === 0 && <p className={HELP}>Nothing yet. Add the first one below.</p>}
+            <div className={ROW_LIST}>
               {orderedApps.map((app) => (
-                <div
-                  key={app.id}
-                  className="flex items-center gap-2 rounded-lg border border-slate-200 px-2 py-1.5 dark:border-slate-800"
-                >
+                <div key={app.id} className={ROW}>
                   <Favicon icon={app.icon} name={app.name} />
                   <input
                     value={app.name}
                     onChange={(e) => patch(app, { name: e.target.value })}
-                    className={`${INPUT} h-[26px] w-full flex-1`}
+                    className={`${INPUT_BARE} h-[26px] w-full flex-1`}
                   />
                   <input
                     value={app.url}
                     onChange={(e) => patch(app, { url: e.target.value })}
                     title="Changing this rebuilds the app's view"
-                    className={`${INPUT} h-[26px] w-full flex-[1.4] font-mono text-[11px]`}
+                    className={`${INPUT_BARE} h-[26px] w-full flex-[1.4] font-mono text-[11px]`}
                   />
                   <select
                     value={app.groupId ?? ""}
                     onChange={(e) => patch(app, { groupId: e.target.value || null })}
-                    className={`${INPUT} h-[26px] w-[110px] shrink-0 cursor-pointer`}
+                    className={`${INPUT_BARE} h-[26px] w-[110px] shrink-0 cursor-pointer`}
                   >
                     <option value="">No group</option>
                     {groups.map((g) => (
@@ -186,19 +186,15 @@ export default function Settings({
           {/* ---------------------------------------------------- groups */}
           <section className="space-y-2">
             <SectionHeading>Groups</SectionHeading>
-            <div className="space-y-1.5">
-              {groups.length === 0 && <p className={HELP}>No groups yet.</p>}
+            {groups.length === 0 && <p className={HELP}>No groups yet.</p>}
+            <div className={ROW_LIST}>
               {groups.map((g: Group) => (
-                <div key={g.id}
-                  className="flex items-center gap-2 rounded-lg border border-slate-200 px-2 py-1.5 dark:border-slate-800">
+                <div key={g.id} className={ROW}>
                   <input
                     value={g.name}
                     onChange={(e) => run(() => api.updateGroup({ ...g, name: e.target.value }))}
-                    className={`${INPUT} h-[26px] w-full flex-1`}
+                    className={`${INPUT_BARE} h-[26px] w-full flex-1`}
                   />
-                  <span className="shrink-0 font-mono text-[10px] text-slate-400">
-                    {config.apps.filter((a) => a.groupId === g.id).length} apps
-                  </span>
                   <button
                     onClick={() => run(() => api.deleteGroup(g.id))}
                     title={`Delete ${g.name} — its apps stay, ungrouped`}
@@ -239,12 +235,9 @@ export default function Settings({
           {/* ------------------------------------------------------ zoom */}
           <section className="space-y-2">
             <SectionHeading>Zoom</SectionHeading>
-            <div className="space-y-1.5">
+            <div className={ROW_LIST}>
               {orderedApps.map((app) => (
-                <div
-                  key={app.id}
-                  className="flex items-center gap-3 rounded-lg border border-slate-200 px-2 py-1.5 dark:border-slate-800"
-                >
+                <div key={app.id} className={`${ROW} gap-3`}>
                   <Favicon icon={app.icon} name={app.name} />
                   <span className="w-28 shrink-0 truncate text-[12px]">{app.name}</span>
                   <input
diff --git a/src/components/ui.tsx b/src/components/ui.tsx
index 50e57f9..757c844 100644
--- a/src/components/ui.tsx
+++ b/src/components/ui.tsx
@@ -29,6 +29,23 @@ export const INPUT =
   "placeholder:text-slate-400 dark:border-slate-800 dark:bg-slate-800 dark:placeholder:text-slate-500";
 export const SUBPANEL = "rounded-lg bg-slate-50 p-3 dark:bg-slate-800/50";
 
+/* A list of editable rows, framed once. Giving every row a border and every
+   field inside it another one stacks four outlines per row, and ten rows of
+   that is a thicket you have to read past to find the thing you came for. */
+export const ROW_LIST =
+  "divide-y divide-slate-200 overflow-hidden rounded-lg border border-slate-200 " +
+  "dark:divide-slate-800 dark:border-slate-800";
+export const ROW = "flex items-center gap-2 px-2 py-1.5";
+
+/** A field inside a ROW: the row frames it, so it draws no outline until used.
+    The focus tell is the border alone — a filled background would be the same
+    white (or slate-900) as the panel behind it, which says nothing. */
+export const INPUT_BARE =
+  `${CONTROL_H} min-w-0 rounded-md border border-transparent bg-transparent px-2 text-[12px] outline-none ` +
+  "hover:border-slate-200 focus:border-sky-500 " +
+  "dark:hover:border-slate-700 dark:focus:border-sky-500 " +
+  "placeholder:text-slate-400 dark:placeholder:text-slate-500";
+
 const BTN_BASE =
   `inline-flex ${CONTROL_H} items-center justify-center rounded-lg text-[12px] ` +
   "disabled:cursor-not-allowed cursor-pointer";
@@ -54,6 +71,14 @@ export const BTN_QUIET =
   "text-[11px] text-slate-500 underline underline-offset-2 cursor-pointer " +
   "hover:text-sky-600 dark:text-slate-400 dark:hover:text-sky-400";
 
+/* A row of icon buttons sharing one tinted surface, so they read as a single
+   instrument rather than three loose targets. The hovered one lifts out of it. */
+export const BUTTON_BAR =
+  "flex items-center gap-0.5 rounded-lg bg-slate-100/80 p-0.5 dark:bg-slate-800/60";
+export const ICON_ON_BAR =
+  `${ICON_BTN} text-slate-500 hover:bg-white hover:text-slate-900 hover:shadow-sm ` +
+  "dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-white";
+
 /** Icon-button skin used throughout the chrome. */
 export const ICON_CHROME =
   `${ICON_BTN} text-slate-500 hover:bg-slate-100 hover:text-slate-900 ` +