style(x): settings redesign — grouped nav, brand logos, blurred overlay

- Dialog shell: sectioned sidebar nav (Configure / App), larger header
  without divider, more padding
- Connections & Mobile: real brand logos (Google, Fireflies, Slack,
  WhatsApp, Telegram), no icon tiles, no separator lines
- Models: provider logos on the your-own-providers cards
- Code Mode: Anthropic/OpenAI marks for Claude Code and Codex
- Help: GitHub and Discord logos, tile-free rows
- Dialog overlay: frosted backdrop blur

apps/x/apps/renderer/src/components/onboarding/provider-icons.tsx

@@ -75,6 +75,38 @@ export function SlackIcon({ className }: IconProps) {
   )
 }
 
+export function GitHubIcon({ className }: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" className={cn("size-5", className)}>
+      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+    </svg>
+  )
+}
+
+export function DiscordIcon({ className }: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" className={cn("size-5", className)}>
+      <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" fill="#5865F2" />
+    </svg>
+  )
+}
+
+export function WhatsAppIcon({ className }: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" className={cn("size-5", className)}>
+      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z" fill="#25D366" />
+    </svg>
+  )
+}
+
+export function TelegramIcon({ className }: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" className={cn("size-5", className)}>
+      <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" fill="#26A5E4" />
+    </svg>
+  )
+}
+
 export function FirefliesIcon({ className }: IconProps) {
   return (
     <svg viewBox="0 0 24 24" fill="currentColor" className={cn("size-5", className)}>

apps/x/apps/renderer/src/components/settings-dialog.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import { useState, useEffect, useCallback, useMemo } from "react"
-import { Server, Key, Shield, Palette, Monitor, Sun, Moon, Loader2, CheckCircle2, Plus, X, Wrench, Search, ChevronRight, Link2, Tags, Mail, BookOpen, User, Plug, HelpCircle, MessageCircle, Bug, Terminal, AlertTriangle, RefreshCw, PanelRight, Bell, Smartphone } from "lucide-react"
+import { Server, Key, Shield, Palette, Monitor, Sun, Moon, Loader2, CheckCircle2, Plus, X, Wrench, Search, ChevronRight, Link2, Tags, Mail, BookOpen, User, Plug, HelpCircle, MessageCircle, Terminal, AlertTriangle, RefreshCw, PanelRight, Bell, Smartphone } from "lucide-react"
 
 import {
   Dialog,
@@ -23,6 +23,7 @@ import { Switch } from "@/components/ui/switch"
 import { cn } from "@/lib/utils"
 import { useTheme } from "@/contexts/theme-context"
 import { toast } from "sonner"
+import { AnthropicIcon, DiscordIcon, GenericApiIcon, GitHubIcon, GoogleIcon, OllamaIcon, OpenAIIcon, OpenRouterIcon, VercelIcon } from "@/components/onboarding/provider-icons"
 import { AccountSettings } from "@/components/settings/account-settings"
 import { ConnectedAccountsSettings } from "@/components/settings/connected-accounts-settings"
 import { MobileChannelsSettings } from "@/components/settings/mobile-channels-settings"
@@ -112,6 +113,13 @@ const tabs: TabConfig[] = [
   },
 ]
 
+/** Sidebar nav grouping: identity first, capabilities, then app-level. */
+const NAV_SECTIONS: { label: string | null; ids: ConfigTab[] }[] = [
+  { label: null, ids: ["account", "connections", "mobile"] },
+  { label: "Configure", ids: ["models", "mcp", "security", "code-mode", "note-tagging"] },
+  { label: "App", ids: ["appearance", "notifications", "help"] },
+]
+
 interface SettingsDialogProps {
   /** Optional trigger element. Omit when controlling `open` externally. */
   children?: React.ReactNode
@@ -136,9 +144,7 @@ function HelpSettings() {
         className="w-full justify-start gap-3 h-auto py-3"
         onClick={() => window.open("https://github.com/rowboatlabs/rowboat/issues/new", "_blank")}
       >
-        <div className="flex size-8 items-center justify-center rounded-md bg-destructive/10">
-          <Bug className="size-4 text-destructive" />
-        </div>
+        <GitHubIcon className="size-5 shrink-0" />
         <div className="flex flex-col items-start">
           <span className="text-sm font-medium">Report a bug</span>
           <span className="text-xs text-muted-foreground">Send feedback to the Rowboat team</span>
@@ -149,9 +155,7 @@ function HelpSettings() {
         className="w-full justify-start gap-3 h-auto py-3"
         onClick={() => window.open("https://discord.com/invite/wajrgmJQ6b", "_blank")}
       >
-        <div className="flex size-8 items-center justify-center rounded-md bg-[#5865F2]">
-          <MessageCircle className="size-4 text-white" />
-        </div>
+        <DiscordIcon className="size-5 shrink-0" />
         <div className="flex flex-col items-start">
           <span className="text-sm font-medium">Join our Discord</span>
           <span className="text-xs text-muted-foreground">Chat with the community</span>
@@ -162,9 +166,7 @@ function HelpSettings() {
         className="w-full justify-start gap-3 h-auto py-3"
         onClick={() => window.open("mailto:contact@rowboatlabs.com", "_blank")}
       >
-        <div className="flex size-8 items-center justify-center rounded-md bg-muted">
-          <Mail className="size-4" />
-        </div>
+        <Mail className="size-5 shrink-0" />
         <div className="flex flex-col items-start">
           <span className="text-sm font-medium">Contact us</span>
           <span className="text-xs text-muted-foreground">contact@rowboatlabs.com</span>
@@ -313,17 +315,17 @@ interface LlmModelOption {
   release_date?: string
 }
 
-const primaryProviders: Array<{ id: LlmProviderFlavor; name: string; description: string }> = [
-  { id: "openai", name: "OpenAI", description: "GPT models" },
-  { id: "anthropic", name: "Anthropic", description: "Claude models" },
-  { id: "google", name: "Gemini", description: "Google AI Studio" },
-  { id: "ollama", name: "Ollama (Local)", description: "Run models locally" },
+const primaryProviders: Array<{ id: LlmProviderFlavor; name: string; description: string; icon: React.ElementType }> = [
+  { id: "openai", name: "OpenAI", description: "GPT models", icon: OpenAIIcon },
+  { id: "anthropic", name: "Anthropic", description: "Claude models", icon: AnthropicIcon },
+  { id: "google", name: "Gemini", description: "Google AI Studio", icon: GoogleIcon },
+  { id: "ollama", name: "Ollama (Local)", description: "Run models locally", icon: OllamaIcon },
 ]
 
-const moreProviders: Array<{ id: LlmProviderFlavor; name: string; description: string }> = [
-  { id: "openrouter", name: "OpenRouter", description: "Multiple models, one key" },
-  { id: "aigateway", name: "AI Gateway (Vercel)", description: "Vercel's AI Gateway" },
-  { id: "openai-compatible", name: "OpenAI-Compatible", description: "Custom OpenAI-compatible API" },
+const moreProviders: Array<{ id: LlmProviderFlavor; name: string; description: string; icon: React.ElementType }> = [
+  { id: "openrouter", name: "OpenRouter", description: "Multiple models, one key", icon: OpenRouterIcon },
+  { id: "aigateway", name: "AI Gateway (Vercel)", description: "Vercel's AI Gateway", icon: VercelIcon },
+  { id: "openai-compatible", name: "OpenAI-Compatible", description: "Custom OpenAI-compatible API", icon: GenericApiIcon },
 ]
 
 const preferredDefaults: Partial<Record<LlmProviderFlavor, string>> = {
@@ -647,7 +649,7 @@ function ModelSettings({ dialogOpen, rowboatConnected = false }: { dialogOpen: b
     }
   }, [defaultProvider, providerConfigs, rowboatConnected])
 
-  const renderProviderCard = (p: { id: LlmProviderFlavor; name: string; description: string }) => {
+  const renderProviderCard = (p: { id: LlmProviderFlavor; name: string; description: string; icon: React.ElementType }) => {
     const isDefault = defaultProvider === p.id
     const isSelected = provider === p.id
     const hasModel = providerConfigs[p.id].models[0]?.trim().length > 0
@@ -665,7 +667,8 @@ function ModelSettings({ dialogOpen, rowboatConnected = false }: { dialogOpen: b
             : "border-border hover:bg-accent"
         )}
       >
-        <div className="flex items-center gap-1.5">
+        <div className="flex items-center gap-2">
+          <p.icon className="size-4 shrink-0" />
           <span className="text-sm font-medium">{p.name}</span>
           {isDefault && !rowboatConnected && (
             <span className="rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium leading-none text-primary">
@@ -1869,7 +1872,11 @@ function AgentStatusRow({
   const ready = installed && status?.signedIn
   return (
     <div className="rounded-md border px-3 py-2.5 flex items-center gap-3">
-      <Terminal className="size-4 text-muted-foreground shrink-0" />
+      {agent === 'claude' ? (
+        <AnthropicIcon className="size-5 shrink-0" />
+      ) : (
+        <OpenAIIcon className="size-5 shrink-0" />
+      )}
       <div className="flex-1 min-w-0">
         <div className="text-sm font-medium">{name}</div>
         <div className="text-xs text-muted-foreground mt-0.5 flex items-center gap-3">
@@ -2323,34 +2330,47 @@ export function SettingsDialog({ children, defaultTab = "account", open: control
         <div className="flex h-full overflow-hidden">
           {/* Sidebar */}
           <div className="w-48 border-r bg-muted/30 p-2 flex flex-col">
-            <div className="px-2 py-3 mb-2">
-              <h2 className="font-semibold text-sm">Settings</h2>
+            <div className="px-2 pt-3.5 pb-3 mb-2">
+              <h2 className="font-semibold text-base tracking-tight">Settings</h2>
             </div>
-            <nav className="flex flex-col gap-1">
-              {visibleTabs.map((tab) => (
-                <button
-                  key={tab.id}
-                  onClick={() => handleTabChange(tab.id)}
-                  className={cn(
-                    "flex items-center gap-2 px-2 py-2 rounded-md text-sm transition-colors text-left",
-                    activeTab === tab.id
-                      ? "bg-background text-foreground shadow-sm"
-                      : "text-muted-foreground hover:text-foreground hover:bg-background/50"
-                  )}
-                >
-                  <tab.icon className="size-4" />
-                  {tab.label}
-                </button>
-              ))}
+            <nav className="flex flex-col">
+              {NAV_SECTIONS.map((section) => {
+                const sectionTabs = visibleTabs.filter((tab) => section.ids.includes(tab.id))
+                if (sectionTabs.length === 0) return null
+                return (
+                  <div key={section.label ?? "main"} className="flex flex-col gap-0.5">
+                    {section.label ? (
+                      <div className="px-2 pb-1 pt-4 text-[10.5px] font-semibold uppercase tracking-wider text-muted-foreground/70">
+                        {section.label}
+                      </div>
+                    ) : null}
+                    {sectionTabs.map((tab) => (
+                      <button
+                        key={tab.id}
+                        onClick={() => handleTabChange(tab.id)}
+                        className={cn(
+                          "flex items-center gap-2 px-2 py-1.5 rounded-md text-sm transition-colors text-left",
+                          activeTab === tab.id
+                            ? "bg-background text-foreground shadow-sm"
+                            : "text-muted-foreground hover:text-foreground hover:bg-background/50"
+                        )}
+                      >
+                        <tab.icon className="size-4" />
+                        {tab.label}
+                      </button>
+                    ))}
+                  </div>
+                )
+              })}
             </nav>
           </div>
 
           {/* Main content */}
           <div className="flex-1 flex flex-col min-w-0 min-h-0">
             {/* Header */}
-            <div className="px-4 py-3 border-b">
-              <h3 className="font-medium text-sm">{activeTabConfig.label}</h3>
-              <p className="text-xs text-muted-foreground mt-0.5">
+            <div className="px-6 pb-4 pt-5">
+              <h3 className="text-lg font-semibold tracking-tight">{activeTabConfig.label}</h3>
+              <p className="text-sm text-muted-foreground mt-1">
                 {activeTab === "models" && rowboatConnected
                   ? "Select your default models"
                   : activeTabConfig.description}
@@ -2358,7 +2378,7 @@ export function SettingsDialog({ children, defaultTab = "account", open: control
             </div>
 
             {/* Content */}
-            <div className={cn("flex-1 p-4 min-h-0", (activeTab === "models" || activeTab === "connections" || activeTab === "mobile" || activeTab === "account" || activeTab === "code-mode" || activeTab === "notifications") ? "overflow-y-auto" : activeTab === "note-tagging" ? "overflow-hidden flex flex-col" : "overflow-hidden")}>
+            <div className={cn("flex-1 px-6 pb-5 min-h-0", (activeTab === "models" || activeTab === "connections" || activeTab === "mobile" || activeTab === "account" || activeTab === "code-mode" || activeTab === "notifications") ? "overflow-y-auto" : activeTab === "note-tagging" ? "overflow-hidden flex flex-col" : "overflow-hidden")}>
               {activeTab === "account" ? (
                 <AccountSettings dialogOpen={open} />
               ) : activeTab === "connections" ? (

apps/x/apps/renderer/src/components/settings/connected-accounts-settings.tsx

@@ -1,9 +1,9 @@
 "use client"
 
 import * as React from "react"
-import { Loader2, Mic, Mail, Calendar, MessageSquare } from "lucide-react"
+import { Loader2, Calendar } from "lucide-react"
+import { FirefliesIcon, GoogleIcon, SlackIcon } from "@/components/onboarding/provider-icons"
 import { Button } from "@/components/ui/button"
-import { Separator } from "@/components/ui/separator"
 import { Switch } from "@/components/ui/switch"
 import { Textarea } from "@/components/ui/textarea"
 import { GoogleClientIdModal } from "@/components/google-client-id-modal"
@@ -47,9 +47,7 @@ export function ConnectedAccountsSettings({ dialogOpen }: ConnectedAccountsSetti
         className="flex items-center justify-between gap-2 rounded-md px-3 py-2 hover:bg-accent/50 transition-colors"
       >
         <div className="flex items-center gap-2.5 min-w-0">
-          <div className="flex size-8 items-center justify-center rounded-md bg-muted">
-            {icon}
-          </div>
+          {icon}
           <div className="flex flex-col min-w-0">
             <span className="text-sm font-medium truncate">{displayName}</span>
             {state.isLoading ? (
@@ -145,9 +143,7 @@ export function ConnectedAccountsSettings({ dialogOpen }: ConnectedAccountsSetti
             {c.useComposioForGoogle ? (
               <div className="flex items-center justify-between gap-2 rounded-md px-3 py-2 hover:bg-accent/50 transition-colors">
                 <div className="flex items-center gap-2.5 min-w-0">
-                  <div className="flex size-8 items-center justify-center rounded-md bg-muted">
-                    <Mail className="size-4" />
-                  </div>
+                  <GoogleIcon className="size-5 shrink-0" />
                   <div className="flex flex-col min-w-0">
                     <span className="text-sm font-medium truncate">Gmail</span>
                     {c.gmailLoading ? (
@@ -189,14 +185,12 @@ export function ConnectedAccountsSettings({ dialogOpen }: ConnectedAccountsSetti
                 </div>
               </div>
             ) : (
-              c.providers.includes('google') && renderOAuthProvider('google', 'Google', <Mail className="size-4" />, 'Sync emails and calendar')
+              c.providers.includes('google') && renderOAuthProvider('google', 'Google', <GoogleIcon className="size-5" />, 'Sync emails and calendar')
             )}
             {c.useComposioForGoogleCalendar && (
               <div className="flex items-center justify-between gap-2 rounded-md px-3 py-2 hover:bg-accent/50 transition-colors">
                 <div className="flex items-center gap-2.5 min-w-0">
-                  <div className="flex size-8 items-center justify-center rounded-md bg-muted">
-                    <Calendar className="size-4" />
-                  </div>
+                  <Calendar className="size-5 shrink-0" />
                   <div className="flex flex-col min-w-0">
                     <span className="text-sm font-medium truncate">Google Calendar</span>
                     {c.googleCalendarLoading ? (
@@ -238,7 +232,6 @@ export function ConnectedAccountsSettings({ dialogOpen }: ConnectedAccountsSetti
                 </div>
               </div>
             )}
-            <Separator className="my-2" />
           </>
         )}
 
@@ -252,14 +245,13 @@ export function ConnectedAccountsSettings({ dialogOpen }: ConnectedAccountsSetti
             </div>
 
             {/* Fireflies */}
-            {renderOAuthProvider('fireflies-ai', 'Fireflies', <Mic className="size-4" />, 'AI meeting transcripts')}
+            {renderOAuthProvider('fireflies-ai', 'Fireflies', <FirefliesIcon className="size-5" />, 'AI meeting transcripts')}
           </>
         )}
 
         {/* Team Communication Section */}
         <>
-          <Separator className="my-2" />
-          <div className="px-3 pt-1 pb-0.5">
+          <div className="px-3 pt-3 pb-0.5">
             <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
               Team Communication
             </span>
@@ -267,9 +259,7 @@ export function ConnectedAccountsSettings({ dialogOpen }: ConnectedAccountsSetti
           <div className="rounded-md px-3 py-2 hover:bg-accent/50 transition-colors">
             <div className="flex items-center justify-between gap-2">
               <div className="flex items-center gap-2.5 min-w-0">
-                <div className="flex size-8 items-center justify-center rounded-md bg-muted">
-                  <MessageSquare className="size-4" />
-                </div>
+                <SlackIcon className="size-5 shrink-0" />
                 <div className="flex flex-col min-w-0">
                   <span className="text-sm font-medium truncate">Slack</span>
                   {c.slackLoading ? (
@@ -408,8 +398,7 @@ export function ConnectedAccountsSettings({ dialogOpen }: ConnectedAccountsSetti
         {/* Knowledge Sources Section */}
         {c.slackEnabled && (
           <>
-            <Separator className="my-2" />
-            <div className="px-3 pt-1 pb-0.5">
+            <div className="px-3 pt-3 pb-0.5">
               <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
                 Knowledge Sources
               </span>
@@ -417,9 +406,7 @@ export function ConnectedAccountsSettings({ dialogOpen }: ConnectedAccountsSetti
             <div className="rounded-md px-3 py-2 hover:bg-accent/50 transition-colors">
               <div className="flex items-center justify-between gap-2">
                 <div className="flex items-center gap-2.5 min-w-0">
-                  <div className="flex size-8 items-center justify-center rounded-md bg-muted">
-                    <MessageSquare className="size-4" />
-                  </div>
+                  <SlackIcon className="size-5 shrink-0" />
                   <div className="flex flex-col min-w-0">
                     <span className="text-sm font-medium truncate">Slack to knowledge</span>
                     <span className="text-xs text-muted-foreground truncate">

apps/x/apps/renderer/src/components/settings/mobile-channels-settings.tsx

@@ -2,10 +2,10 @@
 
 import { useCallback, useEffect, useState } from "react"
 import type { z } from "zod"
-import { Coffee, Loader2, MessageCircle, Send, Smartphone } from "lucide-react"
+import { Coffee, Loader2, Smartphone } from "lucide-react"
+import { TelegramIcon, WhatsAppIcon } from "@/components/onboarding/provider-icons"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
-import { Separator } from "@/components/ui/separator"
 import { Switch } from "@/components/ui/switch"
 import { toast } from "sonner"
 import type { ChannelsConfig, ChannelsStatus } from "@x/shared/src/channels.js"
@@ -104,9 +104,7 @@ export function MobileChannelsSettings({ dialogOpen }: { dialogOpen: boolean })
       {/* Caffeinate */}
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2.5">
-          <div className="flex size-8 items-center justify-center rounded-md bg-muted">
-            <Coffee className="size-4" />
-          </div>
+          <Coffee className="size-5 shrink-0" />
           <div className="flex flex-col">
             <span className="text-sm font-medium">Caffeinate</span>
             <span className="text-xs text-muted-foreground">
@@ -131,15 +129,12 @@ export function MobileChannelsSettings({ dialogOpen }: { dialogOpen: boolean })
         />
       </div>
 
-      <Separator />
 
       {/* WhatsApp */}
       <div className="space-y-3">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2.5">
-            <div className="flex size-8 items-center justify-center rounded-md bg-muted">
-              <MessageCircle className="size-4" />
-            </div>
+            <WhatsAppIcon className="size-5 shrink-0" />
             <div className="flex flex-col">
               <span className="text-sm font-medium">WhatsApp</span>
               <span className="text-xs text-muted-foreground">
@@ -228,15 +223,12 @@ export function MobileChannelsSettings({ dialogOpen }: { dialogOpen: boolean })
         )}
       </div>
 
-      <Separator />
 
       {/* Telegram */}
       <div className="space-y-3">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2.5">
-            <div className="flex size-8 items-center justify-center rounded-md bg-muted">
-              <Send className="size-4" />
-            </div>
+            <TelegramIcon className="size-5 shrink-0" />
             <div className="flex flex-col">
               <span className="text-sm font-medium">Telegram</span>
               <span className="text-xs text-muted-foreground">

apps/x/apps/renderer/src/components/ui/dialog.tsx

@@ -36,7 +36,7 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/40 backdrop-blur-sm",
         className
       )}
       {...props}