diff --git a/apps/web/src/domains/settings/ai/ai-types.ts b/apps/web/src/domains/settings/ai/ai-types.ts
index 4b614586dc3..0b34484e38c 100644
--- a/apps/web/src/domains/settings/ai/ai-types.ts
+++ b/apps/web/src/domains/settings/ai/ai-types.ts
@@ -304,4 +304,4 @@ export const LS_TTS_VOICE_ID_PREFIX = "vellum:voice:ttsVoiceId:";
 export const LS_STT_PROVIDER = "vellum:voice:sttProvider";
 export const LS_STT_API_KEY_PREFIX = "vellum:voice:sttApiKey:";
 
-export const LS_IMAGE_GEN_CREDENTIAL = "vellum:ai:geminiKey";
+
diff --git a/apps/web/src/domains/settings/ai/call-site-helpers.test.ts b/apps/web/src/domains/settings/ai/call-site-helpers.test.ts
index c54981262b9..41d849976d9 100644
--- a/apps/web/src/domains/settings/ai/call-site-helpers.test.ts
+++ b/apps/web/src/domains/settings/ai/call-site-helpers.test.ts
@@ -5,7 +5,7 @@ import { buildOrderedProfiles } from "@/domains/settings/ai/ai-utils";
 import {
   isDraftActive,
   draftsEqual,
-} from "@/domains/settings/ai/call-site-overrides-modal";
+} from "@/domains/settings/ai/call-site-helpers";
 
 // ---------------------------------------------------------------------------
 // isDraftActive
diff --git a/apps/web/src/domains/settings/ai/call-site-helpers.ts b/apps/web/src/domains/settings/ai/call-site-helpers.ts
new file mode 100644
index 00000000000..530ea5df990
--- /dev/null
+++ b/apps/web/src/domains/settings/ai/call-site-helpers.ts
@@ -0,0 +1,31 @@
+import type { CallSiteOverrideDraft } from "@/domains/settings/ai/ai-types";
+
+// ---------------------------------------------------------------------------
+// Sentinel value for the "Custom" profile picker option
+// ---------------------------------------------------------------------------
+
+export const CUSTOM_SENTINEL = "__custom__";
+
+// ---------------------------------------------------------------------------
+// Pure helpers
+// ---------------------------------------------------------------------------
+
+export function isDraftActive(d: CallSiteOverrideDraft | null | undefined): boolean {
+  if (!d) return false;
+  return !!(d.profile || d.provider || d.model);
+}
+
+export function draftsEqual(
+  a: CallSiteOverrideDraft | null | undefined,
+  b: CallSiteOverrideDraft | null | undefined,
+): boolean {
+  const aActive = isDraftActive(a);
+  const bActive = isDraftActive(b);
+  if (aActive !== bActive) return false;
+  if (!aActive) return true;
+  return (
+    (a?.profile ?? null) === (b?.profile ?? null) &&
+    (a?.provider ?? null) === (b?.provider ?? null) &&
+    (a?.model ?? null) === (b?.model ?? null)
+  );
+}
diff --git a/apps/web/src/domains/settings/ai/call-site-overrides-modal.tsx b/apps/web/src/domains/settings/ai/call-site-overrides-modal.tsx
index 5ef179d1e23..7b449bda452 100644
--- a/apps/web/src/domains/settings/ai/call-site-overrides-modal.tsx
+++ b/apps/web/src/domains/settings/ai/call-site-overrides-modal.tsx
@@ -5,9 +5,7 @@ import { useQuery } from "@tanstack/react-query";
 
 import { Button } from "@vellum/design-library/components/button";
 import { ConfirmDialog } from "@vellum/design-library/components/confirm-dialog";
-import { Dropdown } from "@vellum/design-library/components/dropdown";
 import { Input } from "@vellum/design-library/components/input";
-import { Toggle } from "@vellum/design-library/components/toggle";
 import { Modal } from "@vellum/design-library/components/modal";
 import { toast } from "@vellum/design-library/components/toast";
 import type { ConfigLlmCallsitesGetResponse } from "@/generated/daemon/types.gen";
@@ -16,12 +14,10 @@ import { captureError } from "@/lib/sentry/capture-error";
 import { useAssistantFeatureFlagStore } from "@/stores/assistant-feature-flag-store";
 import {
   getDefaultModelForProvider,
-  getModelsForProvider,
 } from "@/assistant/llm-model-catalog";
 
 import {
   type CallSiteOverrideDraft,
-  INFERENCE_PROVIDER_DISPLAY_NAMES,
   INFERENCE_PROVIDERS,
 } from "@/domains/settings/ai/ai-types";
 import {
@@ -34,12 +30,8 @@ import {
   useDaemonConfigQuery,
   useDaemonConfigMutation,
 } from "@/domains/settings/ai/use-daemon-config";
-
-// ---------------------------------------------------------------------------
-// Sentinel value for the "Custom" profile picker option
-// ---------------------------------------------------------------------------
-
-const CUSTOM_SENTINEL = "__custom__";
+import { CUSTOM_SENTINEL, isDraftActive, draftsEqual } from "@/domains/settings/ai/call-site-helpers";
+import { CallSiteOverrideRow } from "@/domains/settings/ai/call-site-overrides-row";
 
 // ---------------------------------------------------------------------------
 // Types
@@ -55,30 +47,6 @@ export interface CallSiteOverridesModalProps {
   assistantId: string;
 }
 
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-export function isDraftActive(d: CallSiteOverrideDraft | null | undefined): boolean {
-  if (!d) return false;
-  return !!(d.profile || d.provider || d.model);
-}
-
-export function draftsEqual(
-  a: CallSiteOverrideDraft | null | undefined,
-  b: CallSiteOverrideDraft | null | undefined,
-): boolean {
-  const aActive = isDraftActive(a);
-  const bActive = isDraftActive(b);
-  if (aActive !== bActive) return false;
-  if (!aActive) return true;
-  return (
-    (a?.profile ?? null) === (b?.profile ?? null) &&
-    (a?.provider ?? null) === (b?.provider ?? null) &&
-    (a?.model ?? null) === (b?.model ?? null)
-  );
-}
-
 // ---------------------------------------------------------------------------
 // CallSiteOverridesModal
 // ---------------------------------------------------------------------------
@@ -192,8 +160,6 @@ function CallSiteOverridesModalInner({
   // Derived state
   // ---------------------------------------------------------------------------
 
-  const availableProviders = INFERENCE_PROVIDERS;
-
   const gatedCallSiteIdSet = useMemo(
     () => new Set(catalogCallSiteIds),
     [catalogCallSiteIds],
@@ -281,75 +247,41 @@ function CallSiteOverridesModalInner({
   }, [catalog, filteredCallSites]);
 
   // ---------------------------------------------------------------------------
-  // Row helpers
+  // Row callbacks
   // ---------------------------------------------------------------------------
 
-  function getDraft(id: string): CallSiteOverrideDraft | null {
-    return drafts[id] ?? null;
-  }
-
-  function isOverrideOn(id: string): boolean {
-    return isDraftActive(getDraft(id));
-  }
-
-  function getProfilePickerValue(id: string): string {
-    const d = getDraft(id);
-    if (!d || !isDraftActive(d)) return "";
-    if (d.provider || d.model) return CUSTOM_SENTINEL;
-    return d.profile ?? "";
-  }
-
-  function handleToggle(id: string, on: boolean, defaultProfile?: string) {
-    if (!on) {
-      setDraftEdits((prev) => ({ ...prev, [id]: null }));
-      return;
-    }
-    const seedProfile = selectSeedProfileForOverride(
-      orderedProfiles,
-      defaultProfile,
-      queryComplexityRoutingEnabled,
-    );
-    if (seedProfile) {
-      setDraftEdits((prev) => ({ ...prev, [id]: { profile: seedProfile } }));
-    } else {
-      const defaultProvider = availableProviders[0];
-      const defaultModel = getDefaultModelForProvider(defaultProvider) ?? "";
-      setDraftEdits((prev) => ({
-        ...prev,
-        [id]: { provider: defaultProvider, model: defaultModel },
-      }));
-    }
-  }
-
-  function handleProfilePickerChange(id: string, val: string) {
-    if (val === CUSTOM_SENTINEL) {
-      const defaultProvider = availableProviders[0];
-      const defaultModel = getDefaultModelForProvider(defaultProvider) ?? "";
-      setDraftEdits((prev) => ({
-        ...prev,
-        [id]: { profile: null, provider: defaultProvider, model: defaultModel },
-      }));
-    } else if (val === "") {
-      setDraftEdits((prev) => ({ ...prev, [id]: null }));
-    } else {
-      setDraftEdits((prev) => ({
-        ...prev,
-        [id]: { profile: val, provider: null, model: null },
-      }));
-    }
-  }
-
-  function handleProviderChange(id: string, provider: string) {
-    const defaultModel = getDefaultModelForProvider(provider) ?? "";
-    setDraftEdits((prev) => ({
-      ...prev,
-      [id]: { ...(prev[id] ?? drafts[id]), profile: null, provider, model: defaultModel },
-    }));
-  }
+  const handleDraftChange = useCallback(
+    (id: string, draft: CallSiteOverrideDraft | null) => {
+      setDraftEdits((prev) => ({ ...prev, [id]: draft }));
+    },
+    [],
+  );
 
-  function handleModelChange(id: string, model: string) {
-    setDraftEdits((prev) => ({ ...prev, [id]: { ...(prev[id] ?? drafts[id]), model } }));
-  }
+  const handleToggle = useCallback(
+    (id: string, on: boolean) => {
+      if (!on) {
+        setDraftEdits((prev) => ({ ...prev, [id]: null }));
+        return;
+      }
+      const cs = gatedCallSites.find((c) => c.id === id);
+      const seedProfile = selectSeedProfileForOverride(
+        orderedProfiles,
+        cs?.defaultProfile,
+        queryComplexityRoutingEnabled,
+      );
+      if (seedProfile) {
+        setDraftEdits((prev) => ({ ...prev, [id]: { profile: seedProfile } }));
+      } else {
+        const defaultProvider = INFERENCE_PROVIDERS[0];
+        const defaultModel = getDefaultModelForProvider(defaultProvider) ?? "";
+        setDraftEdits((prev) => ({
+          ...prev,
+          [id]: { provider: defaultProvider, model: defaultModel },
+        }));
+      }
+    },
+    [gatedCallSites, orderedProfiles, queryComplexityRoutingEnabled],
+  );
 
   // ---------------------------------------------------------------------------
   // Save / Reset
@@ -471,25 +403,12 @@ function CallSiteOverridesModalInner({
                   </p>
                   <div className="space-y-1">
                     {sites.map((cs) => {
-                      const overrideOn = isOverrideOn(cs.id);
-                      const profileVal = getProfilePickerValue(cs.id);
-                      const isCustom = profileVal === CUSTOM_SENTINEL;
-                      const draft = getDraft(cs.id);
-                      const currentProvider =
-                        draft?.provider ?? availableProviders[0];
-                      const availableModels = getModelsForProvider(
-                        currentProvider ?? "anthropic",
-                      );
-                      const modelOptions = availableModels.map((m) => ({
-                        value: m.id,
-                        label: m.displayName,
-                      }));
-                      const hasModelError = !!draft?.provider && !draft?.model;
-                      const profileOptions = buildProfileOptionsForRow(
-                        profileVal === "" || profileVal === CUSTOM_SENTINEL
-                          ? null
-                          : profileVal,
-                      );
+                      const profileVal = (() => {
+                        const d = drafts[cs.id] ?? null;
+                        if (!d || !isDraftActive(d)) return "";
+                        if (d.provider || d.model) return CUSTOM_SENTINEL;
+                        return d.profile ?? "";
+                      })();
                       const defaultProfileLabel = cs.defaultProfile
                         ? (orderedProfiles.find(
                             (op) => op.name === cs.defaultProfile,
@@ -497,90 +416,21 @@ function CallSiteOverridesModalInner({
                         : null;
 
                       return (
-                        <div
+                        <CallSiteOverrideRow
                           key={cs.id}
-                          className="rounded-lg border border-[var(--border-base)] bg-[var(--surface-base)] p-3"
-                        >
-                          <div className="flex items-start gap-3">
-                            <div className="min-w-0 flex-1">
-                              {/* typography: off-scale — call-site name uses medium weight for visual hierarchy within card */}
-                              <p className="text-body-medium-default font-medium text-[var(--content-default)]">
-                                {cs.displayName}
-                              </p>
-                              {cs.description && (
-                                <p className="mt-0.5 text-body-small-default text-[var(--content-tertiary)]">
-                                  {cs.description}
-                                  {defaultProfileLabel && (
-                                    <span className="ml-1.5 text-body-small-default text-[var(--content-tertiary)] opacity-60">
-                                      &middot; Default: {defaultProfileLabel}
-                                    </span>
-                                  )}
-                                </p>
-                              )}
-                            </div>
-                            <div className="flex shrink-0 items-center gap-2">
-                              {overrideOn && (
-                                <Dropdown
-                                  value={profileVal}
-                                  onChange={(val) =>
-                                    handleProfilePickerChange(cs.id, val)
-                                  }
-                                  options={profileOptions}
-                                  className="w-36"
-                                />
-                              )}
-                              <Toggle
-                                checked={overrideOn}
-                                onChange={(on) =>
-                                  handleToggle(cs.id, on, cs.defaultProfile)
-                                }
-                                aria-label={`Override ${cs.displayName}`}
-                              />
-                            </div>
-                          </div>
-
-                          {/* Custom provider + model pickers */}
-                          {overrideOn && isCustom && (
-                            <div className="mt-3 space-y-2 border-t border-[var(--border-base)] pt-3">
-                              <div className="flex gap-2">
-                                <div className="flex-1">
-                                  <label className="mb-1 block text-body-small-default text-[var(--content-tertiary)]">
-                                    Provider
-                                  </label>
-                                  <Dropdown
-                                    value={currentProvider ?? ""}
-                                    onChange={(val) =>
-                                      handleProviderChange(cs.id, val)
-                                    }
-                                    options={availableProviders.map((p) => ({
-                                      value: p,
-                                      label:
-                                        INFERENCE_PROVIDER_DISPLAY_NAMES[p] ??
-                                        p,
-                                    }))}
-                                  />
-                                </div>
-                                <div className="flex-1">
-                                  <label className="mb-1 block text-body-small-default text-[var(--content-tertiary)]">
-                                    Model
-                                  </label>
-                                  <Dropdown
-                                    value={draft?.model ?? ""}
-                                    onChange={(val) =>
-                                      handleModelChange(cs.id, val)
-                                    }
-                                    options={modelOptions}
-                                  />
-                                </div>
-                              </div>
-                              {hasModelError && (
-                                <p className="text-body-small-default text-[var(--system-negative-strong)]">
-                                  Pick a model
-                                </p>
-                              )}
-                            </div>
+                          id={cs.id}
+                          displayName={cs.displayName}
+                          description={cs.description}
+                          defaultProfileLabel={defaultProfileLabel}
+                          draft={drafts[cs.id] ?? null}
+                          profileOptions={buildProfileOptionsForRow(
+                            profileVal === "" || profileVal === CUSTOM_SENTINEL
+                              ? null
+                              : profileVal,
                           )}
-                        </div>
+                          onDraftChange={handleDraftChange}
+                          onToggle={handleToggle}
+                        />
                       );
                     })}
                   </div>
diff --git a/apps/web/src/domains/settings/ai/call-site-overrides-row.tsx b/apps/web/src/domains/settings/ai/call-site-overrides-row.tsx
new file mode 100644
index 00000000000..37317b32a54
--- /dev/null
+++ b/apps/web/src/domains/settings/ai/call-site-overrides-row.tsx
@@ -0,0 +1,160 @@
+import { Dropdown } from "@vellum/design-library/components/dropdown";
+import { Toggle } from "@vellum/design-library/components/toggle";
+
+import type { CallSiteOverrideDraft } from "@/domains/settings/ai/ai-types";
+import {
+  INFERENCE_PROVIDERS,
+  INFERENCE_PROVIDER_DISPLAY_NAMES,
+} from "@/domains/settings/ai/ai-types";
+import {
+  getDefaultModelForProvider,
+  getModelsForProvider,
+} from "@/assistant/llm-model-catalog";
+import { CUSTOM_SENTINEL, isDraftActive } from "@/domains/settings/ai/call-site-helpers";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface ProfileOption {
+  value: string;
+  label: string;
+}
+
+export interface CallSiteOverrideRowProps {
+  id: string;
+  displayName: string;
+  description?: string;
+  defaultProfileLabel: string | null;
+  draft: CallSiteOverrideDraft | null;
+  profileOptions: ProfileOption[];
+  onDraftChange: (id: string, draft: CallSiteOverrideDraft | null) => void;
+  onToggle: (id: string, on: boolean) => void;
+}
+
+// ---------------------------------------------------------------------------
+// CallSiteOverrideRow
+// ---------------------------------------------------------------------------
+
+export function CallSiteOverrideRow({
+  id,
+  displayName,
+  description,
+  defaultProfileLabel,
+  draft,
+  profileOptions,
+  onDraftChange,
+  onToggle,
+}: CallSiteOverrideRowProps) {
+  const overrideOn = isDraftActive(draft);
+
+  const profileVal = (() => {
+    if (!draft || !overrideOn) return "";
+    if (draft.provider || draft.model) return CUSTOM_SENTINEL;
+    return draft.profile ?? "";
+  })();
+
+  const isCustom = profileVal === CUSTOM_SENTINEL;
+  const currentProvider = draft?.provider ?? INFERENCE_PROVIDERS[0];
+  const availableModels = getModelsForProvider(currentProvider ?? "anthropic");
+  const modelOptions = availableModels.map((m) => ({
+    value: m.id,
+    label: m.displayName,
+  }));
+  const hasModelError = !!draft?.provider && !draft?.model;
+
+  function handleProfilePickerChange(val: string) {
+    if (val === CUSTOM_SENTINEL) {
+      const defaultProvider = INFERENCE_PROVIDERS[0];
+      const defaultModel = getDefaultModelForProvider(defaultProvider) ?? "";
+      onDraftChange(id, { profile: null, provider: defaultProvider, model: defaultModel });
+    } else if (val === "") {
+      onDraftChange(id, null);
+    } else {
+      onDraftChange(id, { profile: val, provider: null, model: null });
+    }
+  }
+
+  function handleProviderChange(provider: string) {
+    const defaultModel = getDefaultModelForProvider(provider) ?? "";
+    onDraftChange(id, { ...(draft ?? {}), profile: null, provider, model: defaultModel });
+  }
+
+  function handleModelChange(model: string) {
+    onDraftChange(id, { ...(draft ?? {}), model });
+  }
+
+  return (
+    <div className="rounded-lg border border-[var(--border-base)] bg-[var(--surface-base)] p-3">
+      <div className="flex items-start gap-3">
+        <div className="min-w-0 flex-1">
+          {/* typography: off-scale — call-site name uses medium weight for visual hierarchy within card */}
+          <p className="text-body-medium-default font-medium text-[var(--content-default)]">
+            {displayName}
+          </p>
+          {description && (
+            <p className="mt-0.5 text-body-small-default text-[var(--content-tertiary)]">
+              {description}
+              {defaultProfileLabel && (
+                <span className="ml-1.5 text-body-small-default text-[var(--content-tertiary)] opacity-60">
+                  &middot; Default: {defaultProfileLabel}
+                </span>
+              )}
+            </p>
+          )}
+        </div>
+        <div className="flex shrink-0 items-center gap-2">
+          {overrideOn && (
+            <Dropdown
+              value={profileVal}
+              onChange={handleProfilePickerChange}
+              options={profileOptions}
+              className="w-36"
+            />
+          )}
+          <Toggle
+            checked={overrideOn}
+            onChange={(on) => onToggle(id, on)}
+            aria-label={`Override ${displayName}`}
+          />
+        </div>
+      </div>
+
+      {/* Custom provider + model pickers */}
+      {overrideOn && isCustom && (
+        <div className="mt-3 space-y-2 border-t border-[var(--border-base)] pt-3">
+          <div className="flex gap-2">
+            <div className="flex-1">
+              <label className="mb-1 block text-body-small-default text-[var(--content-tertiary)]">
+                Provider
+              </label>
+              <Dropdown
+                value={currentProvider ?? ""}
+                onChange={handleProviderChange}
+                options={INFERENCE_PROVIDERS.map((p) => ({
+                  value: p,
+                  label: INFERENCE_PROVIDER_DISPLAY_NAMES[p] ?? p,
+                }))}
+              />
+            </div>
+            <div className="flex-1">
+              <label className="mb-1 block text-body-small-default text-[var(--content-tertiary)]">
+                Model
+              </label>
+              <Dropdown
+                value={draft?.model ?? ""}
+                onChange={handleModelChange}
+                options={modelOptions}
+              />
+            </div>
+          </div>
+          {hasModelError && (
+            <p className="text-body-small-default text-[var(--system-negative-strong)]">
+              Pick a model
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/src/domains/settings/ai/email-managed-content.tsx b/apps/web/src/domains/settings/ai/email-managed-content.tsx
index 8ded7461d2a..695544ceb69 100644
--- a/apps/web/src/domains/settings/ai/email-managed-content.tsx
+++ b/apps/web/src/domains/settings/ai/email-managed-content.tsx
@@ -325,7 +325,7 @@ export function EmailManagedContent({
     return (
       <div className="space-y-3">
         {subscriptionWarning}
-        <label className="block text-body-small-default text-[var(--content-quiet)]">
+        <label className="block text-body-small-default text-[var(--content-tertiary)]">
           Subdomain
         </label>
         <DomainField
@@ -365,7 +365,7 @@ export function EmailManagedContent({
       <div className="space-y-4">
         {subscriptionWarning}
         <div className="space-y-1.5">
-          <label className="block text-body-small-default text-[var(--content-quiet)]">
+          <label className="block text-body-small-default text-[var(--content-tertiary)]">
             Domain
           </label>
           <div className="flex items-center gap-2">
@@ -398,7 +398,7 @@ export function EmailManagedContent({
         </div>
 
         <div className="space-y-1.5">
-          <label className="block text-body-small-default text-[var(--content-quiet)]">
+          <label className="block text-body-small-default text-[var(--content-tertiary)]">
             Email address
           </label>
           <div className="flex items-center gap-2">
@@ -441,7 +441,7 @@ export function EmailManagedContent({
     <div className="space-y-4">
       {subscriptionWarning}
       <div className="space-y-1.5">
-        <label className="block text-body-small-default text-[var(--content-quiet)]">
+        <label className="block text-body-small-default text-[var(--content-tertiary)]">
           Address
         </label>
         <div className="flex items-center gap-2">
diff --git a/apps/web/src/domains/settings/ai/image-generation-card.tsx b/apps/web/src/domains/settings/ai/image-generation-card.tsx
index 52d871cb123..346a769b0cb 100644
--- a/apps/web/src/domains/settings/ai/image-generation-card.tsx
+++ b/apps/web/src/domains/settings/ai/image-generation-card.tsx
@@ -9,7 +9,6 @@ import { toast } from "@vellum/design-library/components/toast";
 import { captureError } from "@/lib/sentry/capture-error";
 import { assistantDaemonConfigQueryKey } from "@/lib/sync/query-tags";
 import {
-  removeLocalSetting,
   setLocalSetting,
   getLocalSetting,
 } from "@/utils/local-settings";
@@ -18,7 +17,6 @@ import type { ServiceMode } from "@/domains/settings/ai/ai-types";
 import {
   AVAILABLE_IMAGE_GEN_MODELS,
   IMAGE_GEN_MODEL_DISPLAY_NAMES,
-  LS_IMAGE_GEN_CREDENTIAL,
   LS_IMAGE_GEN_MODE,
   LS_IMAGE_GEN_MODEL,
 } from "@/domains/settings/ai/ai-types";
@@ -90,7 +88,6 @@ export function ImageGenerationCard() {
       setLocalSetting(LS_IMAGE_GEN_MODE, imageGenMode);
       setLocalSetting(LS_IMAGE_GEN_MODEL, imageGenModel);
       if (hasUserKey) {
-        setLocalSetting(LS_IMAGE_GEN_CREDENTIAL, trimmed);
         setImageGenApiKey("");
       }
       toast.success("Image generation settings saved.");
@@ -109,7 +106,6 @@ export function ImageGenerationCard() {
   ]);
 
   const handleReset = useCallback(() => {
-    removeLocalSetting(LS_IMAGE_GEN_CREDENTIAL);
     setImageGenApiKey("");
     setImageGenModel("gemini-3.1-flash-image-preview");
     setLocalSetting(LS_IMAGE_GEN_MODEL, "gemini-3.1-flash-image-preview");
diff --git a/apps/web/src/domains/settings/ai/speech-to-text-card.tsx b/apps/web/src/domains/settings/ai/speech-to-text-card.tsx
index 2f91e8d5c1b..0e23a2795c5 100644
--- a/apps/web/src/domains/settings/ai/speech-to-text-card.tsx
+++ b/apps/web/src/domains/settings/ai/speech-to-text-card.tsx
@@ -1,4 +1,3 @@
-import { Loader2 } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 
 import { Dropdown } from "@vellum/design-library/components/dropdown";
@@ -25,7 +24,6 @@ export function SpeechToTextCard() {
   const [initialProvider, setInitialProvider] = useState<string>(draftProvider);
   const [apiKeyText, setApiKeyText] = useState("");
   const [providerHasKey, setProviderHasKey] = useState(false);
-  const [saving, setSaving] = useState(false);
 
   const selectedProvider = useMemo(() => {
     return (
@@ -49,19 +47,14 @@ export function SpeechToTextCard() {
   }, [draftProvider, initialProvider, apiKeyText]);
 
   const handleSave = useCallback(() => {
-    setSaving(true);
-    try {
-      setLocalSetting(LS_STT_PROVIDER, draftProvider);
-      const trimmedKey = apiKeyText.trim();
-      if (trimmedKey.length > 0) {
-        setLocalSetting(LS_STT_API_KEY_PREFIX + draftProvider, trimmedKey);
-        setProviderHasKey(true);
-      }
-      setInitialProvider(draftProvider);
-      setApiKeyText("");
-    } finally {
-      setSaving(false);
+    setLocalSetting(LS_STT_PROVIDER, draftProvider);
+    const trimmedKey = apiKeyText.trim();
+    if (trimmedKey.length > 0) {
+      setLocalSetting(LS_STT_API_KEY_PREFIX + draftProvider, trimmedKey);
+      setProviderHasKey(true);
     }
+    setInitialProvider(draftProvider);
+    setApiKeyText("");
   }, [draftProvider, apiKeyText]);
 
   const handleReset = useCallback(() => {
@@ -81,7 +74,7 @@ export function SpeechToTextCard() {
     >
       <div className="space-y-4">
         <div className="space-y-1">
-          <label className="block text-body-small-default text-[var(--content-quiet)]">
+          <label className="block text-body-small-default text-[var(--content-tertiary)]">
             Provider
           </label>
           <Dropdown
@@ -96,7 +89,7 @@ export function SpeechToTextCard() {
         </div>
 
         <div className="space-y-1">
-          <label className="block text-body-small-default text-[var(--content-quiet)]">
+          <label className="block text-body-small-default text-[var(--content-tertiary)]">
             API Key
           </label>
           <Input
@@ -111,8 +104,7 @@ export function SpeechToTextCard() {
         <CredentialsGuide guide={selectedProvider.credentialsGuide} />
 
         <div className="flex items-center justify-end gap-2">
-          <SaveButton onClick={handleSave} disabled={!hasChanges || saving} />
-          {saving && <Loader2 className="h-4 w-4 animate-spin text-stone-400" />}
+          <SaveButton onClick={handleSave} disabled={!hasChanges} />
           {providerHasKey && <ResetButton onClick={handleReset} />}
         </div>
       </div>
diff --git a/apps/web/src/domains/settings/ai/text-to-speech-card.tsx b/apps/web/src/domains/settings/ai/text-to-speech-card.tsx
index bed0fc12d72..78125b3d8c8 100644
--- a/apps/web/src/domains/settings/ai/text-to-speech-card.tsx
+++ b/apps/web/src/domains/settings/ai/text-to-speech-card.tsx
@@ -1,4 +1,3 @@
-import { Loader2 } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 
 import { useQuery } from "@tanstack/react-query";
@@ -50,7 +49,6 @@ export function TextToSpeechCard() {
   const [voiceIdText, setVoiceIdText] = useState("");
   const [initialVoiceId, setInitialVoiceId] = useState("");
   const [providerHasKey, setProviderHasKey] = useState(false);
-  const [saving, setSaving] = useState(false);
   const [testing, setTesting] = useState(false);
 
   const selectedProvider = useMemo(() => {
@@ -81,22 +79,17 @@ export function TextToSpeechCard() {
   }, [draftProvider, initialProvider, apiKeyText, voiceIdText, initialVoiceId]);
 
   const handleSave = useCallback(() => {
-    setSaving(true);
-    try {
-      setLocalSetting(LS_TTS_PROVIDER, draftProvider);
-      const trimmedKey = apiKeyText.trim();
-      if (trimmedKey.length > 0) {
-        setLocalSetting(LS_TTS_API_KEY_PREFIX + draftProvider, trimmedKey);
-        setProviderHasKey(true);
-      }
-      const trimmedVoiceId = voiceIdText.trim();
-      setLocalSetting(LS_TTS_VOICE_ID_PREFIX + draftProvider, trimmedVoiceId);
-      setInitialProvider(draftProvider);
-      setInitialVoiceId(trimmedVoiceId);
-      setApiKeyText("");
-    } finally {
-      setSaving(false);
+    setLocalSetting(LS_TTS_PROVIDER, draftProvider);
+    const trimmedKey = apiKeyText.trim();
+    if (trimmedKey.length > 0) {
+      setLocalSetting(LS_TTS_API_KEY_PREFIX + draftProvider, trimmedKey);
+      setProviderHasKey(true);
     }
+    const trimmedVoiceId = voiceIdText.trim();
+    setLocalSetting(LS_TTS_VOICE_ID_PREFIX + draftProvider, trimmedVoiceId);
+    setInitialProvider(draftProvider);
+    setInitialVoiceId(trimmedVoiceId);
+    setApiKeyText("");
   }, [draftProvider, apiKeyText, voiceIdText]);
 
   const handleReset = useCallback(() => {
@@ -163,7 +156,7 @@ export function TextToSpeechCard() {
     >
       <div className="space-y-4">
         <div className="space-y-1">
-          <label className="block text-body-small-default text-[var(--content-quiet)]">
+          <label className="block text-body-small-default text-[var(--content-tertiary)]">
             Provider
           </label>
           <Dropdown
@@ -178,7 +171,7 @@ export function TextToSpeechCard() {
         </div>
 
         <div className="space-y-1">
-          <label className="block text-body-small-default text-[var(--content-quiet)]">
+          <label className="block text-body-small-default text-[var(--content-tertiary)]">
             API Key
           </label>
           <Input
@@ -192,7 +185,7 @@ export function TextToSpeechCard() {
 
         {selectedProvider.supportsVoiceSelection && (
           <div className="space-y-1">
-            <label className="block text-body-small-default text-[var(--content-quiet)]">
+            <label className="block text-body-small-default text-[var(--content-tertiary)]">
               Voice ID
             </label>
             <Input
@@ -216,10 +209,7 @@ export function TextToSpeechCard() {
             {testing ? "Testing…" : "Test"}
           </Button>
           <div className="ml-auto flex items-center gap-2">
-            <SaveButton onClick={handleSave} disabled={!hasChanges || saving} />
-            {saving && (
-              <Loader2 className="h-4 w-4 animate-spin text-stone-400" />
-            )}
+            <SaveButton onClick={handleSave} disabled={!hasChanges} />
             {providerHasKey && <ResetButton onClick={handleReset} />}
           </div>
         </div>