diff --git a/ui/web/src/pages/tts/sections/behavior-section.tsx b/ui/web/src/pages/tts/sections/behavior-section.tsx
index 41dd2d7f..3e7e8879 100644
--- a/ui/web/src/pages/tts/sections/behavior-section.tsx
+++ b/ui/web/src/pages/tts/sections/behavior-section.tsx
@@ -27,8 +27,8 @@ export function BehaviorSection({ draft, onUpdate }: Props) {
   const [open, setOpen] = useState(true);
 
   return (
-    <Card>
-      <CardHeader className="pb-0">
+    <Card className="gap-3">
+      <CardHeader>
         <button
           type="button"
           className="flex w-full items-center justify-between py-1 text-left"
@@ -48,7 +48,7 @@ export function BehaviorSection({ draft, onUpdate }: Props) {
       </CardHeader>
 
       {open && (
-        <CardContent className="space-y-4 pt-4">
+        <CardContent className="space-y-4">
           {/* Auto mode */}
           <div className="grid gap-1.5">
             <Label>{t("general.autoApplyMode")}</Label>
diff --git a/ui/web/src/pages/tts/sections/credentials-section.tsx b/ui/web/src/pages/tts/sections/credentials-section.tsx
index 1d7dddf3..95ebbe89 100644
--- a/ui/web/src/pages/tts/sections/credentials-section.tsx
+++ b/ui/web/src/pages/tts/sections/credentials-section.tsx
@@ -60,8 +60,8 @@ export function CredentialsSection({ provider, draft, onUpdate, testConnection,
   };
 
   return (
-    <Card>
-      <CardHeader className="pb-3">
+    <Card className="gap-3">
+      <CardHeader>
         <CardTitle className="text-base">
           2. {t("providerSettings", { provider: t(`providers.${provider}`) })}
         </CardTitle>
diff --git a/ui/web/src/pages/tts/sections/provider-setup.tsx b/ui/web/src/pages/tts/sections/provider-setup.tsx
index 6aae3875..ff91fe2e 100644
--- a/ui/web/src/pages/tts/sections/provider-setup.tsx
+++ b/ui/web/src/pages/tts/sections/provider-setup.tsx
@@ -22,8 +22,8 @@ export function ProviderSetup({ provider, onChange }: Props) {
   const hint = provider === "edge" ? t("edge.hint") : null;
 
   return (
-    <Card>
-      <CardHeader className="pb-3">
+    <Card className="gap-3">
+      <CardHeader>
         <CardTitle className="text-base">
           1. {t("general.primaryProvider")}
         </CardTitle>
diff --git a/ui/web/src/pages/tts/sections/test-playground.tsx b/ui/web/src/pages/tts/sections/test-playground.tsx
index 5c1bcde3..861338c0 100644
--- a/ui/web/src/pages/tts/sections/test-playground.tsx
+++ b/ui/web/src/pages/tts/sections/test-playground.tsx
@@ -117,8 +117,8 @@ export function TestPlayground({ provider, voiceId, modelId, synthesize, showAud
   const canPlayNow = canPlay({ text, provider }) && !loading;
 
   return (
-    <Card>
-      <CardHeader className="pb-3">
+    <Card className="gap-3">
+      <CardHeader>
         <CardTitle className="text-base">4. {t("playground.title", "Test Playground")}</CardTitle>
       </CardHeader>
       <CardContent className="space-y-3">
diff --git a/ui/web/src/pages/tts/tts-page.tsx b/ui/web/src/pages/tts/tts-page.tsx
index fadc65bc..8d1c7564 100644
--- a/ui/web/src/pages/tts/tts-page.tsx
+++ b/ui/web/src/pages/tts/tts-page.tsx
@@ -200,8 +200,8 @@ export function TtsPage() {
       )}
 
       {draft.provider && isCredentialsSaved(draft.provider, tts) && (
-        <Card>
-          <CardHeader className="pb-3">
+        <Card className="gap-3">
+          <CardHeader>
             <CardTitle className="text-base">3. {t("voice_label")} &amp; {t("general.title", "Settings")}</CardTitle>
           </CardHeader>
           <CardContent className="space-y-4">