diff --git a/apps/studio/components/interfaces/Account/TOTPFactors/index.tsx b/apps/studio/components/interfaces/Account/TOTPFactors/index.tsx
index 19a44f4cdeb..0eab7e9b764 100644
--- a/apps/studio/components/interfaces/Account/TOTPFactors/index.tsx
+++ b/apps/studio/components/interfaces/Account/TOTPFactors/index.tsx
@@ -19,8 +19,7 @@ export const TOTPFactors = () => {
     <>
       <section className="space-y-3">
         <p className="text-sm text-foreground-light">
-          Generate one-time passwords via authenticator apps like 1Password, Authy, etc. as a second
-          factor to verify your identity during sign-in.
+          Use an authenticator app (like 1Password or Authy) to verify your identity at sign-in.
         </p>
         <div>
           {isLoading && <GenericSkeletonLoader />}
diff --git a/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx b/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx
index a89cf6162a4..10b746c6695 100644
--- a/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx
+++ b/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx
@@ -59,6 +59,7 @@ export const OrganizationInvite = () => {
   const isInvitationLoading = inviteStatus === 'loading'
   const inviteContent = getOrganizationInviteContent({
     data,
+    error,
     isSignUpEnabled,
     status: inviteStatus,
   })
@@ -66,6 +67,8 @@ export const OrganizationInvite = () => {
   const loginRedirectLink = `/sign-in?returnTo=${encodeURIComponent(`/join?token=${token}&slug=${slug}`)}`
   const signupRedirectLink = `/sign-up?returnTo=${encodeURIComponent(`/join?token=${token}&slug=${slug}`)}`
 
+  const mfaRequiredError = error?.message.includes('MFA required')
+
   const { mutate: joinOrganization, isPending: isJoining } =
     useOrganizationAcceptInvitationMutation({
       onSuccess: () => {
@@ -85,21 +88,21 @@ export const OrganizationInvite = () => {
   const withLayout = (children: ReactNode) => (
     <InterstitialLayout
       logo={<SupabaseLogo />}
+      titleClassName="text-xl"
       title={
         isInvitationLoading ? (
           <ShimmeringLoader className="mx-auto h-7 w-36 max-w-full py-0" />
-        ) : inviteContent.title ? (
+        ) : (
           inviteContent.title
-        ) : undefined
+        )
       }
       description={
         isInvitationLoading ? (
           <ShimmeringLoader className="mx-auto h-4 w-48 max-w-full py-0" />
-        ) : inviteContent.description ? (
+        ) : (
           inviteContent.description
-        ) : undefined
+        )
       }
-      titleClassName="text-xl"
     >
       <div className="px-6 pb-6">{children}</div>
     </InterstitialLayout>
@@ -154,6 +157,16 @@ export const OrganizationInvite = () => {
     )
   }
 
+  if (mfaRequiredError) {
+    return withLayout(
+      <div className="flex flex-col gap-3">
+        <Button variant="default" block asChild>
+          <Link href="/account/security">Go to account settings</Link>
+        </Button>
+      </div>
+    )
+  }
+
   if (hasError) {
     return withLayout(
       <OrganizationInviteError
diff --git a/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.utils.ts b/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.utils.ts
index 308bc1e702a..8738739589b 100644
--- a/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.utils.ts
+++ b/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.utils.ts
@@ -13,12 +13,6 @@ type OrganizationInviteStatusVariables = {
   profileExists: boolean
 }
 
-type OrganizationInviteContentVariables = {
-  data?: OrganizationInviteByToken
-  isSignUpEnabled: boolean
-  status: OrganizationInviteStatus
-}
-
 export type OrganizationInviteStatus =
   | 'signed-out'
   | 'loading'
@@ -65,9 +59,15 @@ export function getOrganizationInviteStatus({
 
 export function getOrganizationInviteContent({
   data,
+  error,
   isSignUpEnabled,
   status,
-}: OrganizationInviteContentVariables) {
+}: {
+  data?: OrganizationInviteByToken
+  error?: ResponseError | null
+  isSignUpEnabled: boolean
+  status: OrganizationInviteStatus
+}) {
   const signedOutDescription = `Sign in${
     isSignUpEnabled ? ' or create an account' : ''
   } to view this invitation`
@@ -90,7 +90,14 @@ export function getOrganizationInviteContent({
   if (status === 'expired') return { title: 'Invite expired' }
   if (status === 'invalid') return { title: 'Invite invalid' }
   if (status === 'no-longer-valid') return { title: 'Invite no longer available' }
-  if (status === 'error') return { title: 'Unable to load invitation' }
+  if (status === 'error') {
+    if (error?.message.includes('MFA required')) {
+      return {
+        title: 'Set up MFA for your account',
+        description: 'MFA needs to be enabled on your account to join this organization',
+      }
+    } else return { title: 'Unable to load invitation' }
+  }
 
   return {}
 }
diff --git a/apps/studio/components/interfaces/UserDropdown.tsx b/apps/studio/components/interfaces/UserDropdown.tsx
index 6f8d579b48e..8a87fa472ca 100644
--- a/apps/studio/components/interfaces/UserDropdown.tsx
+++ b/apps/studio/components/interfaces/UserDropdown.tsx
@@ -1,5 +1,5 @@
 import { useFlag } from 'common'
-import { FlaskConical, Loader2, ScrollText, Settings } from 'lucide-react'
+import { FlaskConical, Loader2, ScrollText, User2 } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
@@ -116,14 +116,13 @@ export function UserDropdown({
                     }
                   }}
                 >
-                  <Settings size={14} strokeWidth={1.5} className="text-foreground-lighter" />
-                  Account preferences
+                  <User2 size={14} strokeWidth={1.5} className="text-foreground-lighter" />
+                  Account
                 </Link>
               </DropdownMenuItem>
               <DropdownMenuItem
                 className="flex gap-2 cursor-pointer"
                 onClick={() => toggleFeaturePreviewModal(true)}
-                // onSelect={() => toggleFeaturePreviewModal(true)}
               >
                 <FlaskConical size={14} strokeWidth={1.5} className="text-foreground-lighter" />
                 Feature previews
diff --git a/apps/studio/pages/account/security.tsx b/apps/studio/pages/account/security.tsx
index 426e9cd5a4e..a6d8dfdb5cc 100644
--- a/apps/studio/pages/account/security.tsx
+++ b/apps/studio/pages/account/security.tsx
@@ -1,5 +1,5 @@
-import { Smartphone } from 'lucide-react'
-import { Badge, cn, Collapsible, CollapsibleContent, CollapsibleTrigger } from 'ui'
+import { Lock } from 'lucide-react'
+import { Badge, Card, CardContent, CardHeader } from 'ui'
 import { PageContainer } from 'ui-patterns/PageContainer'
 import {
   PageHeader,
@@ -18,19 +18,6 @@ import { useMfaListFactorsQuery } from '@/data/profile/mfa-list-factors-query'
 import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
 import type { NextPageWithLayout } from '@/types'
 
-const collapsibleClasses = [
-  'bg-surface-100',
-  'hover:bg-surface-200',
-  'data-open:bg-surface-200',
-  'border-default',
-  'hover:border-strong data-open:border-strong',
-  'data-open:pb-px col-span-12 rounded-sm',
-  '-space-y-px overflow-hidden',
-  'border shadow-sm',
-  'transition',
-  'hover:z-50',
-]
-
 const Security: NextPageWithLayout = () => {
   const showSecuritySettings = useIsFeatureEnabled('account:show_security_settings')
 
@@ -53,28 +40,23 @@ const Security: NextPageWithLayout = () => {
         </PageHeaderMeta>
       </PageHeader>
       <PageContainer size="small">
-        <Collapsible className={cn('mt-8', collapsibleClasses)}>
-          <CollapsibleTrigger asChild>
-            <button
-              type="button"
-              className="group flex w-full items-center justify-between rounded-sm py-3 px-4 md:px-6 text-foreground"
-            >
-              <div className="flex flex-row gap-4 items-center py-1">
-                <Smartphone strokeWidth={1.5} />
-                <span className="text-sm">Authenticator app</span>
-              </div>
+        <Card className="mt-8">
+          <CardHeader className="py-3 flex flex-row items-center justify-between">
+            <div className="flex flex-row gap-4 items-center py-1 mb-0">
+              <Lock size={18} strokeWidth={1.5} />
+              <span className="text-sm">Multi-factor authentication (MFA)</span>
+            </div>
 
-              {data ? (
-                <Badge variant={data.totp.length === 0 ? 'default' : 'success'}>
-                  {data.totp.length} app{data.totp.length === 1 ? '' : 's'} configured
-                </Badge>
-              ) : null}
-            </button>
-          </CollapsibleTrigger>
-          <CollapsibleContent className="group border-t border-default bg-surface-100 py-6 px-4 md:px-6 text-foreground">
+            {data ? (
+              <Badge variant={data.totp.length === 0 ? 'default' : 'success'}>
+                {data.totp.length} app{data.totp.length === 1 ? '' : 's'} configured
+              </Badge>
+            ) : null}
+          </CardHeader>
+          <CardContent>
             <TOTPFactors />
-          </CollapsibleContent>
-        </Collapsible>
+          </CardContent>
+        </Card>
       </PageContainer>
     </>
   )