diff --git a/frontend/src/components/ChannelTags.tsx b/frontend/src/components/ChannelTags.tsx
index ee985a8d..99ad3c95 100644
--- a/frontend/src/components/ChannelTags.tsx
+++ b/frontend/src/components/ChannelTags.tsx
@@ -22,7 +22,8 @@ interface TagChipProps {
 }
 
 function TagChip({ tag, onClick, title }: TagChipProps) {
-  const cls = "chip-solid shrink-0 text-3xs px-1.5 py-0.5 rounded-full max-w-36 truncate";
+  const cls =
+    "chip-solid shrink-0 text-2xs font-medium px-1.5 py-0.5 rounded-full max-w-36 truncate";
   return onClick ? (
     <button
       type="button"
diff --git a/frontend/src/components/Channels.tsx b/frontend/src/components/Channels.tsx
index 6ca1b90b..c7566b86 100644
--- a/frontend/src/components/Channels.tsx
+++ b/frontend/src/components/Channels.tsx
@@ -397,7 +397,7 @@ export default function Channels() {
     [t],
   );
   const tabs = (
-    <div className="px-4 pt-4 max-w-384 mx-auto flex items-center justify-between gap-4 flex-wrap">
+    <div className="px-4 pt-2 max-w-384 mx-auto flex items-center justify-between gap-4 flex-wrap">
       <Tabs
         tabs={viewTabs}
         active={view}
diff --git a/frontend/src/components/DataTable.tsx b/frontend/src/components/DataTable.tsx
index d6da209e..3c781b9b 100644
--- a/frontend/src/components/DataTable.tsx
+++ b/frontend/src/components/DataTable.tsx
@@ -236,7 +236,7 @@ export default function DataTable<T>({
             {paged.map((row) => (
               <tr
                 key={rowKey(row)}
-                className={`border-b border-border/50 hover:bg-card/40 transition ${
+                className={`border-b border-border/50 hover:bg-(--hover) transition ${
                   rowClassName?.(row) ?? ""
                 }`}
               >
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 21d79e7f..ce4b33c9 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -294,6 +294,11 @@ html {
      jitter at DPR=1. round() keeps the font-scale feature but quantises to crisp integer metrics. */
   font-size: round(calc(16px * var(--font-scale)), 1px);
   background: var(--bg);
+  /* Shared interactive-row hover tint. `--card` reads faint in dark schemes (it sits close to `--bg`),
+     so hover was barely visible; a foreground-mix reads clearly in every scheme + theme (it lightens
+     on dark, darkens on light) and adapts automatically since --fg is per-scheme. One source for every
+     hoverable row (the .selectable recipe + DataTable rows). */
+  --hover: color-mix(in srgb, var(--fg) 9%, transparent);
 }
 
 body {
@@ -414,7 +419,7 @@ body {
       color 0.15s ease;
   }
   .selectable:hover {
-    background-color: var(--card);
+    background-color: var(--hover);
   }
   .selectable:focus-visible {
     /* outline (not a box-shadow ring) so it never fights a glass surface's box-shadow and never gets