diff --git a/apps/studio/components/interfaces/Account/TOTPFactors/GenerateRecoveryCodesModal.tsx b/apps/studio/components/interfaces/Account/TOTPFactors/GenerateRecoveryCodesModal.tsx
index 552c24727db..424ad8f0b30 100644
--- a/apps/studio/components/interfaces/Account/TOTPFactors/GenerateRecoveryCodesModal.tsx
+++ b/apps/studio/components/interfaces/Account/TOTPFactors/GenerateRecoveryCodesModal.tsx
@@ -19,7 +19,6 @@ export const GenerateRecoveryCodesModal = () => {
       layout="horizontal"
       title="No recovery codes generated"
       description="Recovery codes let you access your account if you lose access to your MFA device"
-      className="[&>div>div>div>div>p]:text-balance"
       actions={
         <>
           <Button onClick={() => mutate({})} loading={isPending}>
diff --git a/apps/studio/components/interfaces/Account/TOTPFactors/index.tsx b/apps/studio/components/interfaces/Account/TOTPFactors/index.tsx
index 45fe27d87a8..4ec5ebd21ea 100644
--- a/apps/studio/components/interfaces/Account/TOTPFactors/index.tsx
+++ b/apps/studio/components/interfaces/Account/TOTPFactors/index.tsx
@@ -150,7 +150,7 @@ export const TOTPFactors = () => {
                 <CardContent className="flex items-center justify-between">
                   <div className="flex items-center gap-x-4">
                     <div className="w-9 h-9 rounded-full bg-selection flex items-center justify-center">
-                      <RectangleEllipsis size={18} />
+                      <RectangleEllipsis size={18} className="text-foreground-lighter" />
                     </div>
                     <div className="text-sm">
                       <p className={cn(codes.remaining < 2 ? 'text-warning' : '')}>