diff --git a/apps/studio/components/interfaces/Account/TOTPFactors/index.tsx b/apps/studio/components/interfaces/Account/TOTPFactors/index.tsx
index 2f15dde1656..07656cbe0b9 100644
--- a/apps/studio/components/interfaces/Account/TOTPFactors/index.tsx
+++ b/apps/studio/components/interfaces/Account/TOTPFactors/index.tsx
@@ -2,7 +2,7 @@ import { useFlag } from 'common'
 import dayjs from 'dayjs'
 import { Plus } from 'lucide-react'
 import { useState } from 'react'
-import { Button, Card, CardContent } from 'ui'
+import { Button, Card, CardContent, cn } from 'ui'
 import { Admonition } from 'ui-patterns/Admonition'
 import {
   PageSection,
@@ -44,6 +44,41 @@ export const TOTPFactors = () => {
 
   return (
     <>
+      {enableAuthRecoveryCodes && (
+        <PageSection>
+          <PageSectionMeta>
+            <PageSectionSummary>
+              <PageSectionTitle>Recovery codes</PageSectionTitle>
+              <PageSectionDescription>
+                Recovery codes allow you to recover your account in case you lost access to your MFA
+                apps.
+              </PageSectionDescription>
+            </PageSectionSummary>
+          </PageSectionMeta>
+          <PageSectionContent aria-live="polite">
+            {recoveryCodesStatus?.status === 'unenrolled' && <GenerateRecoveryCodesModal />}
+            {recoveryCodesStatus?.status === 'available' && recoveryCodesStatus?.data && (
+              <Card>
+                <CardContent className="flex flex-col gap-2">
+                  <p
+                    className={cn(
+                      'text-sm',
+                      recoveryCodesStatus.data.remaining < 2 ? 'text-warning' : ''
+                    )}
+                  >
+                    {recoveryCodesStatus.data.remaining}/{recoveryCodesStatus.data.total} recovery
+                    codes available
+                  </p>
+                  <div className="flex gap-2 ml-auto">
+                    <RegenerateRecoveryCodesModal />
+                    {IS_STAGING_OR_LOCAL && <UnenrollRecoveryCodesModal />}
+                  </div>
+                </CardContent>
+              </Card>
+            )}
+          </PageSectionContent>
+        </PageSection>
+      )}
       <PageSection>
         <PageSectionMeta>
           <PageSectionSummary>
@@ -62,20 +97,6 @@ export const TOTPFactors = () => {
           )}
         </PageSectionMeta>
         <PageSectionContent className="flex flex-col gap-4">
-          {recoveryCodesStatus?.status === 'unenrolled' && <GenerateRecoveryCodesModal />}
-          {recoveryCodesStatus?.status === 'available' && (
-            <Admonition
-              layout="responsive"
-              title={`${recoveryCodesStatus?.data?.remaining}/${recoveryCodesStatus?.data?.total} recovery codes available`}
-              description="Recovery codes allow you to recover your account in case you lost access to your MFA apps."
-              actions={
-                <div className="flex flex-col gap-2">
-                  <RegenerateRecoveryCodesModal />
-                  {IS_STAGING_OR_LOCAL && <UnenrollRecoveryCodesModal />}
-                </div>
-              }
-            />
-          )}
           {shouldShowLockoutWarning && (
             <Admonition
               type="danger"