diff --git a/sites/org/pages/account/apikeys.mjs b/sites/org/pages/account/apikeys.mjs
index 04154e9491b..25c5f2ed7da 100644
--- a/sites/org/pages/account/apikeys.mjs
+++ b/sites/org/pages/account/apikeys.mjs
@@ -1,6 +1,5 @@
 // Hooks
 import { useApp } from 'shared/hooks/use-app.mjs'
-import { useTranslation } from 'next-i18next'
 // Dependencies
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
@@ -29,14 +28,9 @@ const DynamicApikeys = dynamic(
 
 const AccountPage = (props) => {
   const app = useApp(props)
-  const { t } = useTranslation(namespaces)
-  const crumbs = [
-    [t('yourAccount'), '/account'],
-    [t('apikeys'), '/account/apikeys'],
-  ]
 
   return (
-    <PageWrapper app={app} title={t('apikeys')} crumbs={crumbs}>
+    <PageWrapper app={app}>
       <DynamicAuthWrapper app={app}>
         <DynamicApikeys app={app} />
       </DynamicAuthWrapper>
diff --git a/sites/org/pages/account/bio.mjs b/sites/org/pages/account/bio.mjs
index 355052a48ca..723221f67db 100644
--- a/sites/org/pages/account/bio.mjs
+++ b/sites/org/pages/account/bio.mjs
@@ -1,6 +1,5 @@
 // Hooks
 import { useApp } from 'shared/hooks/use-app.mjs'
-import { useTranslation } from 'next-i18next'
 // Dependencies
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
@@ -28,14 +27,9 @@ const DynamicBio = dynamic(
 
 const AccountPage = (props) => {
   const app = useApp(props)
-  const { t } = useTranslation(namespaces)
-  const crumbs = [
-    [t('yourAccount'), '/account'],
-    [t('bio'), '/account/bio'],
-  ]
 
   return (
-    <PageWrapper app={app} title={t('bio')} crumbs={crumbs}>
+    <PageWrapper app={app}>
       <DynamicAuthWrapper app={app}>
         <DynamicBio app={app} title />
       </DynamicAuthWrapper>
diff --git a/sites/org/pages/account/compare.mjs b/sites/org/pages/account/compare.mjs
index 04412279521..d503a8fa28d 100644
--- a/sites/org/pages/account/compare.mjs
+++ b/sites/org/pages/account/compare.mjs
@@ -1,6 +1,5 @@
 // Hooks
 import { useApp } from 'shared/hooks/use-app.mjs'
-import { useTranslation } from 'next-i18next'
 // Dependencies
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
@@ -28,14 +27,9 @@ const DynamicCompare = dynamic(
 
 const AccountPage = (props) => {
   const app = useApp(props)
-  const { t } = useTranslation(namespaces)
-  const crumbs = [
-    [t('yourAccount'), '/account'],
-    [t('compare'), '/account/compare'],
-  ]
 
   return (
-    <PageWrapper app={app} title={t('compare')} crumbs={crumbs}>
+    <PageWrapper app={app}>
       <DynamicAuthWrapper app={app}>
         <DynamicCompare app={app} title />
       </DynamicAuthWrapper>
@@ -49,6 +43,9 @@ export async function getStaticProps({ locale }) {
   return {
     props: {
       ...(await serverSideTranslations(locale, namespaces)),
+      page: {
+        path: ['account', 'compare'],
+      },
     },
   }
 }
diff --git a/sites/org/pages/account/consent.mjs b/sites/org/pages/account/consent.mjs
index 6269f00f8c4..b8ef8b89c70 100644
--- a/sites/org/pages/account/consent.mjs
+++ b/sites/org/pages/account/consent.mjs
@@ -1,6 +1,5 @@
 // Hooks
 import { useApp } from 'shared/hooks/use-app.mjs'
-import { useTranslation } from 'next-i18next'
 // Dependencies
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
@@ -28,14 +27,9 @@ const DynamicConsent = dynamic(
 
 const AccountPage = (props) => {
   const app = useApp(props)
-  const { t } = useTranslation(namespaces)
-  const crumbs = [
-    [t('account:yourAccount'), '/account'],
-    [t('consent'), '/account/consent'],
-  ]
 
   return (
-    <PageWrapper app={app} title={t('account:consent')} crumbs={crumbs}>
+    <PageWrapper app={app}>
       <DynamicAuthWrapper app={app}>
         <DynamicConsent app={app} title />
       </DynamicAuthWrapper>
diff --git a/sites/org/pages/account/control.mjs b/sites/org/pages/account/control.mjs
index c0d208aaddf..19b72451b33 100644
--- a/sites/org/pages/account/control.mjs
+++ b/sites/org/pages/account/control.mjs
@@ -1,6 +1,5 @@
 // Hooks
 import { useApp } from 'shared/hooks/use-app.mjs'
-import { useTranslation } from 'next-i18next'
 // Dependencies
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
@@ -28,10 +27,9 @@ const DynamicControl = dynamic(
 
 const AccountPage = (props) => {
   const app = useApp(props)
-  const { t } = useTranslation(namespaces)
 
   return (
-    <PageWrapper app={app} itle={t('control')}>
+    <PageWrapper app={app}>
       <DynamicAuthWrapper app={app}>
         <DynamicControl app={app} title />
       </DynamicAuthWrapper>
diff --git a/sites/org/pages/account/email.mjs b/sites/org/pages/account/email.mjs
index 541d7a579fc..8cf5e1d3ebf 100644
--- a/sites/org/pages/account/email.mjs
+++ b/sites/org/pages/account/email.mjs
@@ -1,6 +1,5 @@
 // Hooks
 import { useApp } from 'shared/hooks/use-app.mjs'
-import { useTranslation } from 'next-i18next'
 // Dependencies
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
@@ -28,14 +27,9 @@ const DynamicEmail = dynamic(
 
 const AccountPage = (props) => {
   const app = useApp(props)
-  const { t } = useTranslation(namespaces)
-  const crumbs = [
-    [t('yourAccount'), '/account'],
-    [t('email'), '/account/email'],
-  ]
 
   return (
-    <PageWrapper app={app} title={t('email')} crumbs={crumbs}>
+    <PageWrapper app={app}>
       <DynamicAuthWrapper app={app}>
         <DynamicEmail app={app} title />
       </DynamicAuthWrapper>
@@ -49,6 +43,9 @@ export async function getStaticProps({ locale }) {
   return {
     props: {
       ...(await serverSideTranslations(locale, namespaces)),
+      page: {
+        path: ['account', 'email'],
+      },
     },
   }
 }
diff --git a/sites/org/pages/account/github.mjs b/sites/org/pages/account/github.mjs
index cad34e00c98..4b7a1d29ac2 100644
--- a/sites/org/pages/account/github.mjs
+++ b/sites/org/pages/account/github.mjs
@@ -1,6 +1,5 @@
 // Hooks
 import { useApp } from 'shared/hooks/use-app.mjs'
-import { useTranslation } from 'next-i18next'
 // Dependencies
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
@@ -28,14 +27,9 @@ const DynamicGithub = dynamic(
 
 const AccountPage = (props) => {
   const app = useApp(props)
-  const { t } = useTranslation(namespaces)
-  const crumbs = [
-    [t('yourAccount'), '/account'],
-    [t('github'), '/account/github'],
-  ]
 
   return (
-    <PageWrapper app={app} title={t('github')} crumbs={crumbs}>
+    <PageWrapper app={app}>
       <DynamicAuthWrapper app={app}>
         <DynamicGithub app={app} title />
       </DynamicAuthWrapper>
@@ -49,6 +43,9 @@ export async function getStaticProps({ locale }) {
   return {
     props: {
       ...(await serverSideTranslations(locale, namespaces)),
+      page: {
+        path: ['account', 'github'],
+      },
     },
   }
 }
diff --git a/sites/org/pages/account/img.mjs b/sites/org/pages/account/img.mjs
index 05da39ed1be..5244151b139 100644
--- a/sites/org/pages/account/img.mjs
+++ b/sites/org/pages/account/img.mjs
@@ -1,6 +1,5 @@
 // Hooks
 import { useApp } from 'shared/hooks/use-app.mjs'
-import { useTranslation } from 'next-i18next'
 // Dependencies
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
@@ -28,14 +27,9 @@ const DynamicImg = dynamic(
 
 const AccountPage = (props) => {
   const app = useApp(props)
-  const { t } = useTranslation(namespaces)
-  const crumbs = [
-    [t('yourAccount'), '/account'],
-    [t('img'), '/account/img'],
-  ]
 
   return (
-    <PageWrapper app={app} title={t('img')} crumbs={crumbs}>
+    <PageWrapper app={app}>
       <DynamicAuthWrapper app={app}>
         <DynamicImg app={app} title />
       </DynamicAuthWrapper>
@@ -49,6 +43,9 @@ export async function getStaticProps({ locale }) {
   return {
     props: {
       ...(await serverSideTranslations(locale, namespaces)),
+      page: {
+        path: ['account', 'img'],
+      },
     },
   }
 }
diff --git a/sites/org/pages/account/language.mjs b/sites/org/pages/account/language.mjs
index c44091c113d..02fd10b5e75 100644
--- a/sites/org/pages/account/language.mjs
+++ b/sites/org/pages/account/language.mjs
@@ -1,6 +1,5 @@
 // Hooks
 import { useApp } from 'shared/hooks/use-app.mjs'
-import { useTranslation } from 'next-i18next'
 // Dependencies
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
@@ -28,14 +27,9 @@ const DynamicLanguage = dynamic(
 
 const AccountPage = (props) => {
   const app = useApp(props)
-  const { t } = useTranslation(namespaces)
-  const crumbs = [
-    [t('yourAccount'), '/account'],
-    [t('language'), '/account/language'],
-  ]
 
   return (
-    <PageWrapper app={app} title={t('language')} crumbs={crumbs}>
+    <PageWrapper app={app}>
       <DynamicAuthWrapper app={app}>
         <DynamicLanguage app={app} title />
       </DynamicAuthWrapper>
@@ -49,6 +43,9 @@ export async function getStaticProps({ locale }) {
   return {
     props: {
       ...(await serverSideTranslations(locale, namespaces)),
+      page: {
+        path: ['account', 'language'],
+      },
     },
   }
 }
diff --git a/sites/org/pages/account/mfa.mjs b/sites/org/pages/account/mfa.mjs
index 00e7028439f..faa538d9c94 100644
--- a/sites/org/pages/account/mfa.mjs
+++ b/sites/org/pages/account/mfa.mjs
@@ -1,6 +1,5 @@
 // Hooks
 import { useApp } from 'shared/hooks/use-app.mjs'
-import { useTranslation } from 'next-i18next'
 // Dependencies
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
@@ -28,14 +27,9 @@ const DynamicMfa = dynamic(
 
 const AccountPage = (props) => {
   const app = useApp(props)
-  const { t } = useTranslation(namespaces)
-  const crumbs = [
-    [t('yourAccount'), '/account'],
-    [t('mfa'), '/account/mfa'],
-  ]
 
   return (
-    <PageWrapper app={app} title={t('mfa')} crumbs={crumbs}>
+    <PageWrapper app={app}>
       <DynamicAuthWrapper app={app}>
         <DynamicMfa app={app} title />
       </DynamicAuthWrapper>
@@ -49,6 +43,9 @@ export async function getStaticProps({ locale }) {
   return {
     props: {
       ...(await serverSideTranslations(locale, namespaces)),
+      page: {
+        path: ['account', 'mfa'],
+      },
     },
   }
 }
diff --git a/sites/org/pages/account/newsletter.mjs b/sites/org/pages/account/newsletter.mjs
index b6fee46c5b5..49712e7d678 100644
--- a/sites/org/pages/account/newsletter.mjs
+++ b/sites/org/pages/account/newsletter.mjs
@@ -1,6 +1,5 @@
 // Hooks
 import { useApp } from 'shared/hooks/use-app.mjs'
-import { useTranslation } from 'next-i18next'
 // Dependencies
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
@@ -28,14 +27,9 @@ const DynamicNewsletter = dynamic(
 
 const AccountPage = (props) => {
   const app = useApp(props)
-  const { t } = useTranslation(namespaces)
-  const crumbs = [
-    [t('yourAccount'), '/account'],
-    [t('newsletter'), '/account/newsletter'],
-  ]
 
   return (
-    <PageWrapper app={app} title={t('newsletter')} crumbs={crumbs}>
+    <PageWrapper app={app}>
       <DynamicAuthWrapper app={app}>
         <DynamicNewsletter app={app} title />
       </DynamicAuthWrapper>
@@ -49,6 +43,9 @@ export async function getStaticProps({ locale }) {
   return {
     props: {
       ...(await serverSideTranslations(locale, namespaces)),
+      page: {
+        path: ['account', 'newsletter'],
+      },
     },
   }
 }
diff --git a/sites/org/pages/account/password.mjs b/sites/org/pages/account/password.mjs
index 0d95cb3ca50..deefe496504 100644
--- a/sites/org/pages/account/password.mjs
+++ b/sites/org/pages/account/password.mjs
@@ -1,6 +1,5 @@
 // Hooks
 import { useApp } from 'shared/hooks/use-app.mjs'
-import { useTranslation } from 'next-i18next'
 // Dependencies
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
@@ -28,14 +27,9 @@ const DynamicPassword = dynamic(
 
 const AccountPage = (props) => {
   const app = useApp(props)
-  const { t } = useTranslation(namespaces)
-  const crumbs = [
-    [t('yourAccount'), '/account'],
-    [t('password'), '/account/password'],
-  ]
 
   return (
-    <PageWrapper app={app} title={t('password')} crumbs={crumbs}>
+    <PageWrapper app={app}>
       <DynamicAuthWrapper app={app}>
         <DynamicPassword app={app} title />
       </DynamicAuthWrapper>
@@ -49,6 +43,9 @@ export async function getStaticProps({ locale }) {
   return {
     props: {
       ...(await serverSideTranslations(locale, namespaces)),
+      page: {
+        path: ['account', 'password'],
+      },
     },
   }
 }
diff --git a/sites/org/pages/account/reload.mjs b/sites/org/pages/account/reload.mjs
index bac3d1c2bbd..51ce046ce76 100644
--- a/sites/org/pages/account/reload.mjs
+++ b/sites/org/pages/account/reload.mjs
@@ -1,6 +1,5 @@
 // Hooks
 import { useApp } from 'shared/hooks/use-app.mjs'
-import { useTranslation } from 'next-i18next'
 // Dependencies
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
@@ -28,14 +27,9 @@ const DynamicReload = dynamic(
 
 const AccountPage = (props) => {
   const app = useApp(props)
-  const { t } = useTranslation(namespaces)
-  const crumbs = [
-    [t('yourAccount'), '/account'],
-    [t('reload'), '/account/reload'],
-  ]
 
   return (
-    <PageWrapper app={app} title={t('reload')} crumbs={crumbs}>
+    <PageWrapper app={app}>
       <DynamicAuthWrapper app={app}>
         <DynamicReload app={app} title />
       </DynamicAuthWrapper>
@@ -49,6 +43,9 @@ export async function getStaticProps({ locale }) {
   return {
     props: {
       ...(await serverSideTranslations(locale, namespaces)),
+      page: {
+        path: ['account', 'reload'],
+      },
     },
   }
 }
diff --git a/sites/org/pages/account/units.mjs b/sites/org/pages/account/units.mjs
index 4e33ce67c43..e8408303b51 100644
--- a/sites/org/pages/account/units.mjs
+++ b/sites/org/pages/account/units.mjs
@@ -1,6 +1,5 @@
 // Hooks
 import { useApp } from 'shared/hooks/use-app.mjs'
-import { useTranslation } from 'next-i18next'
 // Dependencies
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
@@ -28,14 +27,9 @@ const DynamicImperial = dynamic(
 
 const AccountPage = (props) => {
   const app = useApp(props)
-  const { t } = useTranslation(namespaces)
-  const crumbs = [
-    [t('yourAccount'), '/account'],
-    [t('imperial'), '/account/imperial'],
-  ]
 
   return (
-    <PageWrapper app={app} title={t('imperial')} crumbs={crumbs}>
+    <PageWrapper app={app}>
       <DynamicAuthWrapper app={app}>
         <DynamicImperial app={app} title />
       </DynamicAuthWrapper>
@@ -49,6 +43,9 @@ export async function getStaticProps({ locale }) {
   return {
     props: {
       ...(await serverSideTranslations(locale, namespaces)),
+      page: {
+        path: ['account', 'units'],
+      },
     },
   }
 }
diff --git a/sites/org/pages/account/username.mjs b/sites/org/pages/account/username.mjs
index 85e48dc5893..1818e96271e 100644
--- a/sites/org/pages/account/username.mjs
+++ b/sites/org/pages/account/username.mjs
@@ -1,6 +1,5 @@
 // Hooks
 import { useApp } from 'shared/hooks/use-app.mjs'
-import { useTranslation } from 'next-i18next'
 // Dependencies
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
@@ -28,14 +27,9 @@ const DynamicUsername = dynamic(
 
 const AccountPage = (props) => {
   const app = useApp(props)
-  const { t } = useTranslation(namespaces)
-  const crumbs = [
-    [t('yourAccount'), '/account'],
-    [t('username'), '/account/username'],
-  ]
 
   return (
-    <PageWrapper app={app} title={t('username')} crumbs={crumbs}>
+    <PageWrapper app={app}>
       <DynamicAuthWrapper app={app}>
         <DynamicUsername app={app} title />
       </DynamicAuthWrapper>
@@ -49,6 +43,9 @@ export async function getStaticProps({ locale }) {
   return {
     props: {
       ...(await serverSideTranslations(locale, namespaces)),
+      page: {
+        path: ['account', 'username'],
+      },
     },
   }
 }
diff --git a/sites/shared/components/account/compare.mjs b/sites/shared/components/account/compare.mjs
index 3ac74646a22..29e59a45ee5 100644
--- a/sites/shared/components/account/compare.mjs
+++ b/sites/shared/components/account/compare.mjs
@@ -37,7 +37,7 @@ export const CompareSettings = ({ app, title = false, welcome = false }) => {
       : '/docs/guide'
 
   return (
-    <>
+    <div className="max-w-xl">
       {title ? <h2 className="text-4xl">{t('compareTitle')}</h2> : null}
       {['yes', 'no'].map((val) => (
         <Choice val={val} t={t} update={update} current={selection} bool key={val}>
@@ -75,7 +75,7 @@ export const CompareSettings = ({ app, title = false, welcome = false }) => {
       ) : (
         <BackToAccountButton loading={app.state.loading} />
       )}
-    </>
+    </div>
   )
 }
 
diff --git a/sites/shared/components/account/control.mjs b/sites/shared/components/account/control.mjs
index 05cc115c22c..af31ce527be 100644
--- a/sites/shared/components/account/control.mjs
+++ b/sites/shared/components/account/control.mjs
@@ -33,7 +33,7 @@ export const ControlSettings = ({ app, title = false, welcome = false }) => {
     welcomeSteps[selection].length > 1 ? '/welcome/' + welcomeSteps[selection][1] : '/docs/guide'
 
   return (
-    <>
+    <div className="max-w-xl">
       {title ? <h1 className="text-4xl">{t('controlTitle')}</h1> : null}
       {[1, 2, 3, 4, 5].map((val) => {
         if (selection === 1 && val > 2) return null
@@ -74,6 +74,6 @@ export const ControlSettings = ({ app, title = false, welcome = false }) => {
       ) : (
         <BackToAccountButton loading={app.state.loading} />
       )}
-    </>
+    </div>
   )
 }
diff --git a/sites/shared/components/account/email.mjs b/sites/shared/components/account/email.mjs
index a1fb6c738e7..5da50bb4258 100644
--- a/sites/shared/components/account/email.mjs
+++ b/sites/shared/components/account/email.mjs
@@ -33,7 +33,7 @@ export const EmailSettings = ({ app, title = false }) => {
   const valid = (validateEmail(email) && validateTld(email)) || false
 
   return (
-    <>
+    <div className="max-w-xl">
       {title ? <h2 className="text-4xl">{t('emailTitle')}</h2> : null}
       {changed ? (
         <Popout note>
@@ -60,6 +60,6 @@ export const EmailSettings = ({ app, title = false }) => {
         </>
       )}
       <BackToAccountButton loading={app.state.loading} />
-    </>
+    </div>
   )
 }
diff --git a/sites/shared/components/account/github.mjs b/sites/shared/components/account/github.mjs
index c7259ad7b62..104b0645700 100644
--- a/sites/shared/components/account/github.mjs
+++ b/sites/shared/components/account/github.mjs
@@ -29,7 +29,7 @@ export const GithubSettings = ({ app, title = false, welcome = false }) => {
   }
 
   return (
-    <>
+    <div className="max-w-xl">
       {title ? <h2 className="text-4xl">{t('githubTitle')}</h2> : null}
       <div className="flex flex-row items-center mt-4">
         <input
@@ -42,6 +42,6 @@ export const GithubSettings = ({ app, title = false, welcome = false }) => {
       </div>
       <SaveSettingsButton app={app} btnProps={{ onClick: save }} />
       {!welcome && <BackToAccountButton loading={app.state.loading} />}
-    </>
+    </div>
   )
 }
diff --git a/sites/shared/components/account/img.mjs b/sites/shared/components/account/img.mjs
index 9b43dfe53a0..d3f3a067f2e 100644
--- a/sites/shared/components/account/img.mjs
+++ b/sites/shared/components/account/img.mjs
@@ -44,7 +44,7 @@ export const ImgSettings = ({ app, title = false, welcome = false }) => {
   const nextHref = '/docs/guide'
 
   return (
-    <>
+    <div className="max-w-xl">
       {title ? <h2 className="text-4xl">{t('imgTitle')}</h2> : null}
       <div>
         {!welcome || img !== false ? (
@@ -96,6 +96,6 @@ export const ImgSettings = ({ app, title = false, welcome = false }) => {
           <BackToAccountButton loading={app.state.loading} />
         </>
       )}
-    </>
+    </div>
   )
 }
diff --git a/sites/shared/components/account/imperial.mjs b/sites/shared/components/account/imperial.mjs
index b3ef84c88d7..48d48b7aa89 100644
--- a/sites/shared/components/account/imperial.mjs
+++ b/sites/shared/components/account/imperial.mjs
@@ -37,7 +37,7 @@ export const ImperialSettings = ({ app, title = false, welcome = false }) => {
       : '/docs/guide'
 
   return (
-    <>
+    <div className="max-w-xl">
       {title ? <h1 className="text-4xl">{t('unitsTitle')}</h1> : <h1></h1>}
       {['metric', 'imperial'].map((val) => (
         <Choice
@@ -79,6 +79,6 @@ export const ImperialSettings = ({ app, title = false, welcome = false }) => {
       ) : (
         <BackToAccountButton loading={app.state.loading} />
       )}
-    </>
+    </div>
   )
 }
diff --git a/sites/shared/components/account/language.mjs b/sites/shared/components/account/language.mjs
index f7280610166..d2306a2915c 100644
--- a/sites/shared/components/account/language.mjs
+++ b/sites/shared/components/account/language.mjs
@@ -33,7 +33,7 @@ export const LanguageSettings = ({ app, title = false }) => {
   }
 
   return (
-    <>
+    <div className="max-w-xl">
       {title ? <h2 className="text-4xl">{t('languageTitle')}</h2> : null}
       {conf.languages.map((val) => (
         <Choice val={val} t={t} update={update} current={language} key={val}>
@@ -41,6 +41,6 @@ export const LanguageSettings = ({ app, title = false }) => {
         </Choice>
       ))}
       <BackToAccountButton loading={app.state.loading} />
-    </>
+    </div>
   )
 }
diff --git a/sites/shared/components/account/mfa.mjs b/sites/shared/components/account/mfa.mjs
index 04a1ec5e47f..79fd32e33af 100644
--- a/sites/shared/components/account/mfa.mjs
+++ b/sites/shared/components/account/mfa.mjs
@@ -80,7 +80,7 @@ export const MfaSettings = ({ app, title = false, welcome = false }) => {
   if (enable) titleText = t('mfaSetup')
 
   return (
-    <>
+    <div className="max-w-xl">
       {title ? <h2 className="text-4xl">{titleText}</h2> : null}
       {enable ? (
         <>
@@ -146,6 +146,6 @@ export const MfaSettings = ({ app, title = false, welcome = false }) => {
         )}
       </div>
       {!welcome && <BackToAccountButton loading={app.state.loading} />}
-    </>
+    </div>
   )
 }
diff --git a/sites/shared/components/account/newsletter.mjs b/sites/shared/components/account/newsletter.mjs
index 40bb485f717..65eff7175ae 100644
--- a/sites/shared/components/account/newsletter.mjs
+++ b/sites/shared/components/account/newsletter.mjs
@@ -37,7 +37,7 @@ export const NewsletterSettings = ({ app, title = false, welcome = false }) => {
       : '/docs/guide'
 
   return (
-    <>
+    <div className="max-w-xl">
       {title ? <h1 className="text-4xl">{t('newsletterTitle')}</h1> : null}
       {['yes', 'no'].map((val) => (
         <Choice val={val} t={t} update={update} current={selection} bool key={val}>
@@ -75,7 +75,7 @@ export const NewsletterSettings = ({ app, title = false, welcome = false }) => {
       ) : (
         <BackToAccountButton loading={app.state.loading} />
       )}
-    </>
+    </div>
   )
 }
 
diff --git a/sites/shared/components/account/password.mjs b/sites/shared/components/account/password.mjs
index 79df45272b2..f0e4853067b 100644
--- a/sites/shared/components/account/password.mjs
+++ b/sites/shared/components/account/password.mjs
@@ -33,7 +33,7 @@ export const PasswordSettings = ({ app, title = false, welcome = false }) => {
   }
 
   return (
-    <>
+    <div className="max-w-xl">
       {title ? <h2 className="text-4xl">{t('passwordTitle')}</h2> : null}
       <div className="flex flex-row items-center mt-4 gap-2">
         <input
@@ -65,6 +65,6 @@ export const PasswordSettings = ({ app, title = false, welcome = false }) => {
           </p>
         </Popout>
       )}
-    </>
+    </div>
   )
 }
diff --git a/sites/shared/components/account/username.mjs b/sites/shared/components/account/username.mjs
index f5b6ca505ae..88c42dc98fd 100644
--- a/sites/shared/components/account/username.mjs
+++ b/sites/shared/components/account/username.mjs
@@ -57,7 +57,7 @@ export const UsernameSettings = ({ app, title = false, welcome = false }) => {
   }
 
   return (
-    <>
+    <div className="max-w-xl">
       {title ? <h1 className="text-4xl">{t('usernameTitle')}</h1> : null}
       <div className="flex flex-row items-center">
         <input
@@ -114,6 +114,6 @@ export const UsernameSettings = ({ app, title = false, welcome = false }) => {
       ) : (
         <BackToAccountButton loading={app.state.loading} />
       )}
-    </>
+    </div>
   )
 }