diff --git a/src/lib/components/SettingsGroup.svelte b/src/lib/components/SettingsGroup.svelte
index 5bfb0fd..0fceec5 100644
--- a/src/lib/components/SettingsGroup.svelte
+++ b/src/lib/components/SettingsGroup.svelte
@@ -5,16 +5,18 @@
   // (modern Chromium / WebKit), and falls back to instant open/close
   // elsewhere. prefers-reduced-motion disables both.
   import { ChevronRight } from "lucide-svelte";
+  import type { Component } from "svelte";
 
   interface Props {
     title: string;
     description?: string;
     open?: boolean;
     onopen?: () => void;
+    icon?: Component<{ size?: number; class?: string; "aria-hidden"?: boolean | "true" | "false" }>;
     children?: import("svelte").Snippet;
   }
 
-  let { title, description = "", open = false, onopen, children }: Props = $props();
+  let { title, description = "", open = false, onopen, icon: Icon, children }: Props = $props();
 
   // Fires once on the first transition from closed → open. Used by
   // sections that lazy-load expensive data (e.g. TTS voice enumeration).
@@ -47,13 +49,16 @@
     class="flex items-start gap-2 cursor-pointer list-none py-3 px-1 rounded hover:bg-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent"
   >
     <ChevronRight
-      class="chevron size-4 mt-0.5 shrink-0 text-text-tertiary"
+      class="chevron size-4 mt-1 shrink-0 text-text-tertiary"
       aria-hidden="true"
     />
+    {#if Icon}
+      <Icon size={16} class="mt-1 shrink-0 text-text-tertiary" aria-hidden="true" />
+    {/if}
     <div class="flex-1">
-      <p class="text-sm text-text font-medium">{title}</p>
+      <p class="text-sm text-text font-semibold">{title}</p>
       {#if description}
-        <p class="text-[11px] text-text-tertiary mt-0.5">{description}</p>
+        <p class="text-[11px] text-text-tertiary tracking-wide mt-1">{description}</p>
       {/if}
     </div>
   </summary>