diff --git a/frontend/components/settings/settings-billing.tsx b/frontend/components/settings/settings-billing.tsx
index e7aa4a7..41dec4b 100644
--- a/frontend/components/settings/settings-billing.tsx
+++ b/frontend/components/settings/settings-billing.tsx
@@ -176,7 +176,7 @@ export function SigningPanel() {
         description={t("settings.network.description")}
         title={t("settings.network.title")}
       >
-        <SettingsCard className="flex items-center justify-between gap-4 p-5">
+        <SettingsCard className="flex flex-row items-center justify-between gap-4 p-5">
           <div className="min-w-0 space-y-0.5">
             <div className="flex items-center gap-2">
               <p className="text-sm font-medium">
@@ -251,7 +251,7 @@ export function SigningPanel() {
         description={t("settings.signing.backupDescription")}
         title={t("settings.signing.backupTitle")}
       >
-        <SettingsCard className="flex items-center justify-between gap-4 p-4">
+        <SettingsCard className="flex flex-row items-center justify-between gap-4 p-4">
           <div className="space-y-0.5">
             <p className="text-sm font-medium">
               {t("settings.signing.backupLabel")}
diff --git a/frontend/components/settings/settings-parts.tsx b/frontend/components/settings/settings-parts.tsx
index c349276..970ed96 100644
--- a/frontend/components/settings/settings-parts.tsx
+++ b/frontend/components/settings/settings-parts.tsx
@@ -5,12 +5,13 @@ import { useState } from "react";
 import { Check, Copy } from "lucide-react";
 import { useTranslation } from "react-i18next";
 
-import { cn } from "@/lib/utils";
 import {
+  Card,
   CardFrame,
   CardFrameAction,
   CardFrameDescription,
   CardFrameHeader,
+  CardFramePanel,
   CardFrameTitle,
 } from "@/components/ui/card";
 import { Switch } from "@/components/ui/switch";
@@ -43,7 +44,7 @@ export function SettingsFrame({
         ) : null}
         {action ? <CardFrameAction>{action}</CardFrameAction> : null}
       </CardFrameHeader>
-      <div className={cn("p-5", bodyClassName)}>{children}</div>
+      <CardFramePanel className={bodyClassName}>{children}</CardFramePanel>
     </CardFrame>
   );
 }
@@ -74,6 +75,10 @@ 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.
 export function SettingsCard({
   className,
   children,
@@ -81,11 +86,7 @@ export function SettingsCard({
   className?: string;
   children: ReactNode;
 }) {
-  return (
-    <div className={cn("rounded-2xl border border-border bg-card/30", className)}>
-      {children}
-    </div>
-  );
+  return <Card className={className}>{children}</Card>;
 }
 
 export function ToggleRow({
@@ -103,7 +104,7 @@ export function ToggleRow({
   onCheckedChange?: (checked: boolean) => void;
 }) {
   return (
-    <SettingsCard className="flex items-center justify-between gap-4 px-4 py-3.5">
+    <SettingsCard className="flex flex-row items-center justify-between gap-4 px-4 py-3.5">
       <div className="space-y-0.5">
         <p className="text-sm font-medium">{title}</p>
         {description ? (
diff --git a/frontend/components/settings/settings-preferences.tsx b/frontend/components/settings/settings-preferences.tsx
index cb4d94b..8fc8b85 100644
--- a/frontend/components/settings/settings-preferences.tsx
+++ b/frontend/components/settings/settings-preferences.tsx
@@ -375,7 +375,7 @@ export function ProfilePanel() {
         description={t("settings.profile.dangerZoneDescription")}
         title={t("settings.profile.dangerZone")}
       >
-        <SettingsCard className="flex items-center justify-between gap-4 p-4">
+        <SettingsCard className="flex flex-row items-center justify-between gap-4 p-4">
           <div className="space-y-0.5">
             <p className="text-sm font-medium">
               {t("settings.profile.deleteAccount")}
diff --git a/frontend/components/ui/card.tsx b/frontend/components/ui/card.tsx
index 260be33..e0b9be7 100644
--- a/frontend/components/ui/card.tsx
+++ b/frontend/components/ui/card.tsx
@@ -136,6 +136,26 @@ 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,