diff --git a/client/src/components/AppShell.tsx b/client/src/components/AppShell.tsx
index 5728fe7..40d0c72 100644
--- a/client/src/components/AppShell.tsx
+++ b/client/src/components/AppShell.tsx
@@ -96,9 +96,11 @@ function NavItem({
   const active = to ? location.pathname === to : false
 
   const className = cn(
-    'flex items-center gap-3 rounded-md px-3 py-2 text-sm',
-    active ? 'bg-sidebar-accent font-medium text-sidebar-accent-foreground' : 'text-sidebar-foreground/80',
-    muted ? 'opacity-50' : 'hover:bg-sidebar-accent/60',
+    'flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors',
+    active
+      ? 'bg-white/15 font-medium text-white shadow-sm ring-1 ring-white/15 backdrop-blur-sm'
+      : 'text-sidebar-foreground/80',
+    muted ? 'opacity-50' : 'hover:bg-white/10 hover:text-white',
   )
 
   const content = (
diff --git a/client/src/index.css b/client/src/index.css
index d4e45db..a45ccc0 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -224,3 +224,20 @@ textarea {
   background-color: color-mix(in oklch, oklch(0.32 0.05 286) 82%, transparent) !important;
   border-color: color-mix(in oklch, white 16%, transparent);
 }
+
+/* Pills: frosted for neutral variants, gradient for the primary one. */
+[data-slot="badge"][data-variant="secondary"],
+[data-slot="badge"][data-variant="outline"] {
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  background-color: color-mix(in oklch, white 58%, transparent);
+  border-color: color-mix(in oklch, white 55%, transparent);
+}
+.dark [data-slot="badge"][data-variant="secondary"],
+.dark [data-slot="badge"][data-variant="outline"] {
+  background-color: color-mix(in oklch, white 12%, transparent);
+  border-color: color-mix(in oklch, white 16%, transparent);
+}
+[data-slot="badge"][data-variant="default"] {
+  background-image: linear-gradient(135deg, oklch(0.58 0.24 277), oklch(0.56 0.25 305));
+}