diff --git a/src/components/settings/export-section.tsx b/src/components/settings/export-section.tsx
index 4116dd584..2e020214e 100644
--- a/src/components/settings/export-section.tsx
+++ b/src/components/settings/export-section.tsx
@@ -39,7 +39,9 @@ import { Button } from "@/components/ui/button";
 import { DateInput } from "@/components/ui/date-input";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
+import { SettingsCard } from "@/components/settings/settings-card";
 import { SettingsCardHeader } from "@/components/settings/_card-header";
+import { cn } from "@/lib/utils";
 import { ImportPanel } from "@/components/settings/import-panel";
 import { queryKeys } from "@/lib/query-keys";
 import { useTranslations } from "@/lib/i18n/context";
@@ -135,9 +137,9 @@ function ExportCardShell({
   outerClassName,
 }: ExportCardShellProps) {
   return (
-    <div
+    <SettingsCard
       data-testid={testId}
-      className={`bg-card border-border flex h-full flex-col rounded-xl border p-4 sm:p-6${outerClassName ? ` ${outerClassName}` : ""}`}
+      className={cn("flex h-full flex-col", outerClassName)}
     >
       <SettingsCardHeader
         icon={Icon}
@@ -151,7 +153,7 @@ function ExportCardShell({
       />
       {children && <div className="mt-3 space-y-3">{children}</div>}
       <div className="mt-4 flex flex-wrap items-center gap-3">{footer}</div>
-    </div>
+    </SettingsCard>
   );
 }
 
diff --git a/src/components/settings/import-panel.tsx b/src/components/settings/import-panel.tsx
index 879237ceb..cab5ed23c 100644
--- a/src/components/settings/import-panel.tsx
+++ b/src/components/settings/import-panel.tsx
@@ -41,6 +41,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { Progress } from "@/components/ui/progress";
+import { SettingsCard } from "@/components/settings/settings-card";
 import { Textarea } from "@/components/ui/textarea";
 import { queryKeys } from "@/lib/query-keys";
 import { useTranslations } from "@/lib/i18n/context";
@@ -102,9 +103,9 @@ function ImportCardShell({
   children,
 }: ImportCardShellProps) {
   return (
-    <div
+    <SettingsCard
       data-testid={testId}
-      className="bg-card border-border flex h-full flex-col rounded-xl border p-4 sm:p-6"
+      className="flex h-full flex-col"
     >
       <div className="flex items-center gap-2">
         <Icon
@@ -115,7 +116,7 @@ function ImportCardShell({
       </div>
       <p className="text-muted-foreground mt-1 text-xs">{description}</p>
       <div className="mt-3 flex flex-1 flex-col gap-3">{children}</div>
-    </div>
+    </SettingsCard>
   );
 }