diff --git a/web/src/components/Settings/ui.tsx b/web/src/components/Settings/ui.tsx
index 8c11197..15ed4a5 100644
--- a/web/src/components/Settings/ui.tsx
+++ b/web/src/components/Settings/ui.tsx
@@ -1,6 +1,6 @@
 // Shared UI primitives extracted from ConfigPage.tsx
 import { useState, type ReactNode } from 'react';
-import { X, Plus, Trash2 } from 'lucide-react';
+import { X, Plus, Trash2, HelpCircle } from 'lucide-react';
 import { inputCls } from './constants';
 import type { KnownSource } from './types';
 
@@ -15,9 +15,24 @@ export function Field({
 }) {
   return (
     <div className="space-y-1.5">
-      <label className="block text-[13px] font-medium text-[var(--text-secondary)]">{label}</label>
+      <label className="flex items-center gap-1 text-[13px] font-medium text-[var(--text-secondary)]">
+        <span>{label}</span>
+        {hint && (
+          <span className="group/hint relative inline-flex">
+            <HelpCircle
+              className="h-3.5 w-3.5 shrink-0 cursor-help text-[var(--text-muted)] transition-colors group-hover/hint:text-[var(--accent-cyan)]"
+              aria-label={hint}
+            />
+            <span
+              role="tooltip"
+              className="pointer-events-none invisible absolute top-full left-0 z-50 mt-1.5 w-max max-w-[280px] rounded-lg border border-[var(--border-color)] bg-[var(--bg-tertiary)] px-2.5 py-1.5 text-xs leading-relaxed font-normal text-[var(--text-secondary)] opacity-0 shadow-lg transition-opacity duration-150 group-hover/hint:visible group-hover/hint:opacity-100"
+            >
+              {hint}
+            </span>
+          </span>
+        )}
+      </label>
       {children}
-      {hint && <p className="text-xs text-[var(--text-muted)]">{hint}</p>}
     </div>
   );
 }