diff --git a/src/components/settings/billing/billing-card.tsx b/src/components/settings/billing/billing-card.tsx
index 1be005d..f517fc2 100644
--- a/src/components/settings/billing/billing-card.tsx
+++ b/src/components/settings/billing/billing-card.tsx
@@ -117,7 +117,7 @@ export default function BillingCard() {
             <Skeleton className="h-6 w-3/5" />
           </div>
         </CardContent>
-        <CardFooter className="mt-2 px-6 py-4 flex justify-end items-center bg-background rounded-none">
+        <CardFooter className="mt-2 px-6 py-4 flex justify-end items-center bg-muted rounded-none">
           <Skeleton className="h-8 w-1/4" />
         </CardFooter>
       </Card>
@@ -139,7 +139,7 @@ export default function BillingCard() {
             {loadPaymentError?.message}
           </div>
         </CardContent>
-        <CardFooter className="mt-2 px-6 py-4 flex justify-end items-center bg-background rounded-none">
+        <CardFooter className="mt-2 px-6 py-4 flex justify-end items-center bg-muted rounded-none">
           <Button
             variant="outline"
             className="cursor-pointer"
@@ -262,7 +262,7 @@ export default function BillingCard() {
           </div>
         )}
       </CardContent>
-      <CardFooter className="mt-2 px-6 py-4 flex justify-end items-center bg-background rounded-none">
+      <CardFooter className="mt-2 px-6 py-4 flex justify-end items-center bg-muted rounded-none">
         {/* user is on free plan, show upgrade plan button */}
         {isFreePlan && (
           <Button variant="default" className="cursor-pointer" asChild>
diff --git a/src/components/settings/credits/credits-balance-card.tsx b/src/components/settings/credits/credits-balance-card.tsx
index 74c1b1d..9f6678d 100644
--- a/src/components/settings/credits/credits-balance-card.tsx
+++ b/src/components/settings/credits/credits-balance-card.tsx
@@ -105,7 +105,7 @@ export default function CreditsBalanceCard() {
             <Skeleton className="h-8 w-1/5" />
           </div>
         </CardContent>
-        <CardFooter className="px-6 py-4 flex justify-between items-center bg-background rounded-none">
+        <CardFooter className="px-6 py-4 flex justify-between items-center bg-muted rounded-none">
           <Skeleton className="h-6 w-3/5" />
         </CardFooter>
       </Card>
@@ -125,7 +125,7 @@ export default function CreditsBalanceCard() {
             {balanceError?.message || statsError?.message}
           </div>
         </CardContent>
-        <CardFooter className="mt-2 px-6 py-4 flex justify-end items-center bg-background rounded-none">
+        <CardFooter className="mt-2 px-6 py-4 flex justify-end items-center bg-muted rounded-none">
           <Button
             variant="outline"
             className="cursor-pointer"
@@ -157,7 +157,7 @@ export default function CreditsBalanceCard() {
           {/* <Badge variant="outline">available</Badge> */}
         </div>
       </CardContent>
-      <CardFooter className="px-6 py-4 flex justify-between items-center bg-background rounded-none">
+      <CardFooter className="px-6 py-4 flex justify-between items-center bg-muted rounded-none">
         {/* Expiring credits warning */}
         {!isLoadingStats && creditStats && (
           <div className="text-sm text-muted-foreground space-y-2">
diff --git a/src/components/settings/notification/newsletter-form-card.tsx b/src/components/settings/notification/newsletter-form-card.tsx
index 5593383..c09e420 100644
--- a/src/components/settings/notification/newsletter-form-card.tsx
+++ b/src/components/settings/notification/newsletter-form-card.tsx
@@ -173,7 +173,7 @@ export function NewsletterFormCard({ className }: NewsletterFormCardProps) {
               }
             />
           </CardContent>
-          <CardFooter className="mt-6 px-6 py-4 bg-background rounded-none">
+          <CardFooter className="mt-6 px-6 py-4 bg-muted rounded-none">
             <p className="text-sm text-muted-foreground">
               {t('newsletter.hint')}
             </p>
diff --git a/src/components/settings/profile/update-avatar-card.tsx b/src/components/settings/profile/update-avatar-card.tsx
index ff23b8d..19f3857 100644
--- a/src/components/settings/profile/update-avatar-card.tsx
+++ b/src/components/settings/profile/update-avatar-card.tsx
@@ -171,7 +171,7 @@ export function UpdateAvatarCard({ className }: UpdateAvatarCardProps) {
 
         <FormError message={error} />
       </CardContent>
-      <CardFooter className="mt-auto px-6 py-4 flex justify-between items-center bg-background rounded-none">
+      <CardFooter className="mt-auto px-6 py-4 flex justify-between items-center bg-muted rounded-none">
         <p className="text-sm text-muted-foreground">
           {t('avatar.recommendation')}
         </p>
diff --git a/src/components/settings/profile/update-name-card.tsx b/src/components/settings/profile/update-name-card.tsx
index b4d3abf..bb7649f 100644
--- a/src/components/settings/profile/update-name-card.tsx
+++ b/src/components/settings/profile/update-name-card.tsx
@@ -140,7 +140,7 @@ export function UpdateNameCard({ className }: UpdateNameCardProps) {
             />
             <FormError message={error} />
           </CardContent>
-          <CardFooter className="mt-6 px-6 py-4 flex justify-between items-center bg-background rounded-none">
+          <CardFooter className="mt-6 px-6 py-4 flex justify-between items-center bg-muted rounded-none">
             <p className="text-sm text-muted-foreground">{t('name.hint')}</p>
 
             <Button
diff --git a/src/components/settings/security/delete-account-card.tsx b/src/components/settings/security/delete-account-card.tsx
index 0bc6edf..782d9f5 100644
--- a/src/components/settings/security/delete-account-card.tsx
+++ b/src/components/settings/security/delete-account-card.tsx
@@ -97,7 +97,7 @@ export function DeleteAccountCard() {
           </div>
         )}
       </CardContent>
-      <CardFooter className="mt-2 px-6 py-4 flex justify-end items-center bg-background rounded-none">
+      <CardFooter className="mt-2 px-6 py-4 flex justify-end items-center bg-muted rounded-none">
         <Button
           variant="destructive"
           onClick={() => setShowConfirmation(true)}
diff --git a/src/components/settings/security/password-card-wrapper.tsx b/src/components/settings/security/password-card-wrapper.tsx
index 29f7709..066da14 100644
--- a/src/components/settings/security/password-card-wrapper.tsx
+++ b/src/components/settings/security/password-card-wrapper.tsx
@@ -69,7 +69,7 @@ function PasswordSkeletonCard() {
         <Skeleton className="h-5 w-1/2" />
         <Skeleton className="h-6 w-full" />
       </CardContent>
-      <CardFooter className="px-6 py-4 flex justify-end items-center bg-background rounded-none">
+      <CardFooter className="px-6 py-4 flex justify-end items-center bg-muted rounded-none">
         <Skeleton className="h-8 w-1/4" />
       </CardFooter>
     </Card>
diff --git a/src/components/settings/security/reset-password-card.tsx b/src/components/settings/security/reset-password-card.tsx
index 69d621d..e512b7e 100644
--- a/src/components/settings/security/reset-password-card.tsx
+++ b/src/components/settings/security/reset-password-card.tsx
@@ -66,7 +66,7 @@ export function ResetPasswordCard({ className }: ResetPasswordCardProps) {
       <CardContent className="space-y-4 flex-1">
         <p className="text-sm text-muted-foreground">{t('info')}</p>
       </CardContent>
-      <CardFooter className="mt-auto px-6 py-4 flex justify-end items-center bg-background rounded-none">
+      <CardFooter className="mt-auto px-6 py-4 flex justify-end items-center bg-muted rounded-none">
         <Button onClick={handleSetupPassword} className="cursor-pointer">
           {t('button')}
         </Button>
diff --git a/src/components/settings/security/update-password-card.tsx b/src/components/settings/security/update-password-card.tsx
index 5b4588f..fa3414a 100644
--- a/src/components/settings/security/update-password-card.tsx
+++ b/src/components/settings/security/update-password-card.tsx
@@ -206,7 +206,7 @@ export function UpdatePasswordCard({ className }: UpdatePasswordCardProps) {
             />
             <FormError message={error} />
           </CardContent>
-          <CardFooter className="mt-6 px-6 py-4 flex justify-between items-center bg-background rounded-none">
+          <CardFooter className="mt-6 px-6 py-4 flex justify-between items-center bg-muted rounded-none">
             <p className="text-sm text-muted-foreground">{t('hint')}</p>
 
             <Button