diff --git a/frontend/components/settings/settings-ai.tsx b/frontend/components/settings/settings-ai.tsx
index 3f395fa..695eb3b 100644
--- a/frontend/components/settings/settings-ai.tsx
+++ b/frontend/components/settings/settings-ai.tsx
@@ -15,6 +15,7 @@ import {
 } from "@/components/ui/select";
 import {
   FieldLabel,
+  SettingsCard,
   SettingsFrame,
   ToggleRow,
 } from "@/components/settings/settings-parts";
@@ -209,7 +210,6 @@ export function AIPanel() {
     <>
       {policy ? (
         <SettingsFrame
-          bodyClassName="space-y-3"
           description={t("settings.ai.availability.description")}
           title={t("settings.ai.availability.title")}
         >
@@ -238,7 +238,7 @@ export function AIPanel() {
                 />
               ) : null}
               {policyDirty ? (
-                <div className="flex justify-end">
+                <SettingsCard className="flex flex-row justify-end p-4">
                   <Button
                     disabled={savingPolicy}
                     onClick={savePolicy}
@@ -248,17 +248,19 @@ export function AIPanel() {
                       ? t("settings.ai.saving")
                       : t("settings.ai.saveChanges")}
                   </Button>
-                </div>
+                </SettingsCard>
               ) : null}
             </>
           ) : (
-            <p className="text-sm text-muted-foreground">
-              {policy.aiEnabled
-                ? policy.disabledForEmployees
-                  ? t("settings.ai.availability.readonlyEmployeesOnly")
-                  : t("settings.ai.availability.readonlyEnabled")
-                : t("settings.ai.availability.readonlyDisabled")}
-            </p>
+            <SettingsCard className="p-5">
+              <p className="text-sm text-muted-foreground">
+                {policy.aiEnabled
+                  ? policy.disabledForEmployees
+                    ? t("settings.ai.availability.readonlyEmployeesOnly")
+                    : t("settings.ai.availability.readonlyEnabled")
+                  : t("settings.ai.availability.readonlyDisabled")}
+              </p>
+            </SettingsCard>
           )}
         </SettingsFrame>
       ) : null}
@@ -267,7 +269,7 @@ export function AIPanel() {
         description={t("settings.ai.modeDescription")}
         title={t("settings.ai.modeTitle")}
       >
-        <div className="space-y-1.5">
+        <SettingsCard className="space-y-1.5 p-5">
           <FieldLabel>{t("settings.ai.mode")}</FieldLabel>
           <Select
             onValueChange={(value) => set("mode", value as AiMode)}
@@ -290,7 +292,7 @@ export function AIPanel() {
           <p className="text-xs text-muted-foreground">
             {t(`settings.ai.mode${modeHintSuffix}Hint`)}
           </p>
-        </div>
+        </SettingsCard>
       </SettingsFrame>
 
       {config.mode === "off" ? (
@@ -298,18 +300,20 @@ export function AIPanel() {
           description={t("settings.ai.offDescription")}
           title={t("settings.ai.offTitle")}
         >
-          <p className="text-sm text-muted-foreground">
-            {t("settings.ai.offNote")}
-          </p>
+          <SettingsCard className="p-5">
+            <p className="text-sm text-muted-foreground">
+              {t("settings.ai.offNote")}
+            </p>
+          </SettingsCard>
         </SettingsFrame>
       ) : config.mode !== "local" ? (
         // API and Automatic both configure a cloud provider (Automatic falls
         // back to local Ollama when no key is set).
         <SettingsFrame
-          bodyClassName="space-y-5"
           description={t("settings.ai.providerDescription")}
           title={t("settings.ai.providerTitle")}
         >
+          <SettingsCard className="space-y-5 p-5">
           <div className="grid gap-4 sm:grid-cols-2">
               <div className="space-y-1.5">
                 <FieldLabel>{t("settings.ai.provider")}</FieldLabel>
@@ -396,13 +400,14 @@ export function AIPanel() {
                 </SelectPopup>
               </Select>
             </div>
+          </SettingsCard>
         </SettingsFrame>
       ) : (
         <SettingsFrame
-          bodyClassName="space-y-5"
           description={t("settings.ai.localDescription")}
           title={t("settings.ai.localTitle")}
         >
+          <SettingsCard className="space-y-5 p-5">
           <div className="grid gap-4 sm:grid-cols-2">
               <div className="space-y-1.5">
                 <FieldLabel>{t("settings.ai.ollamaBaseUrl")}</FieldLabel>
@@ -432,15 +437,16 @@ export function AIPanel() {
                 ? t("settings.ai.testing")
                 : t("settings.ai.testConnection")}
             </Button>
+          </SettingsCard>
         </SettingsFrame>
       )}
 
       {config.mode !== "off" ? (
         <SettingsFrame
-          bodyClassName="space-y-4"
           description={t("settings.ai.veilDescription")}
           title={t("settings.ai.veilTitle")}
         >
+          <SettingsCard className="space-y-4 p-5">
           <div className="space-y-1.5">
               <FieldLabel>{t("settings.ai.veilLevel")}</FieldLabel>
               <Select
@@ -464,6 +470,7 @@ export function AIPanel() {
                 ? t("settings.ai.veilLocalNote")
                 : t("settings.ai.veilApiNote")}
             </p>
+          </SettingsCard>
         </SettingsFrame>
       ) : null}
 
diff --git a/frontend/components/settings/settings-care-team.tsx b/frontend/components/settings/settings-care-team.tsx
index 70672d3..7854566 100644
--- a/frontend/components/settings/settings-care-team.tsx
+++ b/frontend/components/settings/settings-care-team.tsx
@@ -128,13 +128,13 @@ export function CareTeamPanel({
       title={t("settings.careTeam.title")}
     >
       {error && (
-        <p className="rounded-2xl bg-destructive/10 px-3 py-2 text-sm text-destructive">
-          {error}
-        </p>
+        <SettingsCard className="bg-destructive/10 p-4">
+          <p className="text-sm text-destructive">{error}</p>
+        </SettingsCard>
       )}
 
       {canManage && (
-        <div className="flex items-center justify-between gap-4">
+        <SettingsCard className="flex flex-row items-center justify-between gap-4 p-4">
           <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
             <Info className="size-3.5 shrink-0" />
             {t("settings.careTeam.clickHint")}
@@ -143,7 +143,7 @@ export function CareTeamPanel({
             <UserPlus className="size-4" />
             {t("settings.careTeam.addMember")}
           </Button>
-        </div>
+        </SettingsCard>
       )}
 
       <SettingsCard className="divide-y divide-border">
diff --git a/frontend/components/settings/settings-parts.tsx b/frontend/components/settings/settings-parts.tsx
index 970ed96..94dc315 100644
--- a/frontend/components/settings/settings-parts.tsx
+++ b/frontend/components/settings/settings-parts.tsx
@@ -11,29 +11,35 @@ import {
   CardFrameAction,
   CardFrameDescription,
   CardFrameHeader,
-  CardFramePanel,
   CardFrameTitle,
 } from "@/components/ui/card";
 import { Switch } from "@/components/ui/switch";
 
 // A settings section rendered inside the COSS "frame" surface: a titled header
-// (with optional description + action) sitting above a padded body. Replaces the
-// old plain-`div` SettingsCard pattern so every settings panel shares one framed
-// look. Use `bodyClassName` to control the body layout (spacing/grid).
+// above one or more cards.
+//
+// Children are rendered as *direct* children of CardFrame on purpose. CardFrame
+// styles its cards through direct-child selectors (`*:data-[slot=card]:-m-px`,
+// the clip-path, `rounded-t/b-xl`, `shadow-none`, `before:hidden`) — it pulls
+// each card out by a pixel so it sits flush inside the frame's own border. Put
+// anything between the frame and the card, even an unstyled div, and every one
+// of those selectors stops matching: the card keeps its own border and shadow
+// and you get a box inside a box.
+//
+// So: no padding here. Body padding belongs on the Card (`<SettingsCard
+// className="p-5">`), which is where COSS puts it.
 export function SettingsFrame({
   title,
   description,
   action,
   children,
   className,
-  bodyClassName,
 }: {
   title: string;
   description?: string;
   action?: ReactNode;
   children: ReactNode;
   className?: string;
-  bodyClassName?: string;
 }) {
   return (
     <CardFrame className={className}>
@@ -44,14 +50,14 @@ export function SettingsFrame({
         ) : null}
         {action ? <CardFrameAction>{action}</CardFrameAction> : null}
       </CardFrameHeader>
-      <CardFramePanel className={bodyClassName}>{children}</CardFramePanel>
+      {children}
     </CardFrame>
   );
 }
 
-// Back-compat wrapper: existing panels compose with SettingsSection, which now
+// Back-compat wrapper: existing panels compose with SettingsSection, which
 // renders through the COSS frame surface so the whole settings page shares one
-// framed look. The body keeps vertical spacing between stacked children.
+// framed look.
 export function SettingsSection({
   title,
   description,
@@ -64,12 +70,7 @@ export function SettingsSection({
   children: ReactNode;
 }) {
   return (
-    <SettingsFrame
-      action={action}
-      bodyClassName="space-y-4"
-      description={description}
-      title={title}
-    >
+    <SettingsFrame action={action} description={description} title={title}>
       {children}
     </SettingsFrame>
   );
@@ -78,7 +79,8 @@ export function SettingsSection({
 // A card surface used inside settings panels. Rendering a real COSS `Card` (with
 // `data-slot="card"`) keeps settings cards consistent with the rest of the app
 // and lets them pick up the frame's card treatment. `Card` is `flex flex-col`,
-// so row layouts must pass `flex-row` in their className.
+// so row layouts must pass `flex-row` in their className. It carries no padding
+// of its own — pass `p-5` (the settings default) or a `divide-y` list.
 export function SettingsCard({
   className,
   children,
diff --git a/frontend/components/settings/settings-preferences.tsx b/frontend/components/settings/settings-preferences.tsx
index 8fc8b85..7c44fdf 100644
--- a/frontend/components/settings/settings-preferences.tsx
+++ b/frontend/components/settings/settings-preferences.tsx
@@ -337,38 +337,34 @@ export function ProfilePanel() {
         description={t("settings.profile.patientNotificationsDescription")}
         title={t("settings.profile.patientNotifications")}
       >
-        <div className="space-y-3">
-          {patientNotifications.map((item) => (
-            <ToggleRow
-              checked={Boolean(prefs[`notif.${item.titleKey}`])}
-              description={t(`settings.profile.notif.${item.descKey}`)}
-              key={item.titleKey}
-              onCheckedChange={(checked) =>
-                setPref(`notif.${item.titleKey}`, checked)
-              }
-              title={t(`settings.profile.notif.${item.titleKey}`)}
-            />
-          ))}
-        </div>
+        {patientNotifications.map((item) => (
+          <ToggleRow
+            checked={Boolean(prefs[`notif.${item.titleKey}`])}
+            description={t(`settings.profile.notif.${item.descKey}`)}
+            key={item.titleKey}
+            onCheckedChange={(checked) =>
+              setPref(`notif.${item.titleKey}`, checked)
+            }
+            title={t(`settings.profile.notif.${item.titleKey}`)}
+          />
+        ))}
       </SettingsSection>
 
       <SettingsSection
         description={t("settings.profile.accountNotificationsDescription")}
         title={t("settings.profile.accountNotifications")}
       >
-        <div className="space-y-3">
-          {accountNotifications.map((item) => (
-            <ToggleRow
-              checked={Boolean(prefs[`notif.${item.titleKey}`])}
-              description={t(`settings.profile.notif.${item.descKey}`)}
-              key={item.titleKey}
-              onCheckedChange={(checked) =>
-                setPref(`notif.${item.titleKey}`, checked)
-              }
-              title={t(`settings.profile.notif.${item.titleKey}`)}
-            />
-          ))}
-        </div>
+        {accountNotifications.map((item) => (
+          <ToggleRow
+            checked={Boolean(prefs[`notif.${item.titleKey}`])}
+            description={t(`settings.profile.notif.${item.descKey}`)}
+            key={item.titleKey}
+            onCheckedChange={(checked) =>
+              setPref(`notif.${item.titleKey}`, checked)
+            }
+            title={t(`settings.profile.notif.${item.titleKey}`)}
+          />
+        ))}
       </SettingsSection>
 
       <SettingsSection
diff --git a/frontend/components/ui/card.tsx b/frontend/components/ui/card.tsx
index e0b9be7..260be33 100644
--- a/frontend/components/ui/card.tsx
+++ b/frontend/components/ui/card.tsx
@@ -136,26 +136,6 @@ export function CardFrameFooter({
   });
 }
 
-// The padded body of a frame: content that sits between the frame header and
-// footer. Mirrors the other CardFrame* subcomponents (useRender + data-slot) so
-// a frame can be composed entirely from primitives instead of a raw <div>.
-export function CardFramePanel({
-  className,
-  render,
-  ...props
-}: useRender.ComponentProps<"div">): React.ReactElement {
-  const defaultProps = {
-    className: cn("p-5", className),
-    "data-slot": "card-frame-panel",
-  };
-
-  return useRender({
-    defaultTagName: "div",
-    props: mergeProps<"div">(defaultProps, props),
-    render,
-  });
-}
-
 export function CardHeader({
   className,
   render,