diff --git a/config/dependencies.yaml b/config/dependencies.yaml
index 6fb3423bad9..8d88eec9876 100644
--- a/config/dependencies.yaml
+++ b/config/dependencies.yaml
@@ -320,10 +320,12 @@ org:
     '@mdx-js/runtime': *mdxRuntime
     '@tailwindcss/typography': *tailwindTypography
     'algoliasearch': *algoliasearch
+    'react-copy-to-clipboard': 5.1.0
     'daisyui': *daisyui
     'lodash.get': *_get
     'lodash.orderby': *_orderby
     'lodash.set': *_set
+    'luxon': '3.2.1'
     'next': *next
     'react-dropzone': '14.2.3'
     'react-hotkeys-hook': *reactHotkeysHook
diff --git a/sites/backend/src/models/user.mjs b/sites/backend/src/models/user.mjs
index 13010c92fb2..07b4ab3954f 100644
--- a/sites/backend/src/models/user.mjs
+++ b/sites/backend/src/models/user.mjs
@@ -519,7 +519,10 @@ UserModel.prototype.guardedMfaUpdate = async function ({ body, user, ip }) {
         log.warn(err, 'Could not disable MFA after token check')
         return this.setResponse(500, 'mfaDeactivationFailed')
       }
-      return this.setResponse(200, false, {})
+      return this.setResponse(200, false, {
+        result: 'success',
+        account: this.asAccount(),
+      })
     } else {
       console.log('token check failed')
       return this.setResponse(401, 'authenticationFailed')
@@ -537,7 +540,10 @@ UserModel.prototype.guardedMfaUpdate = async function ({ body, user, ip }) {
         log.warn(err, 'Could not enable MFA after token check')
         return this.setResponse(500, 'mfaActivationFailed')
       }
-      return this.setResponse(200, false, {})
+      return this.setResponse(200, false, {
+        result: 'success',
+        account: this.asAccount(),
+      })
     } else return this.setResponse(403, 'mfaTokenInvalid')
   }
   // Enroll
diff --git a/sites/backend/src/utils/mfa.mjs b/sites/backend/src/utils/mfa.mjs
index f14c7074eae..542425deb3f 100644
--- a/sites/backend/src/utils/mfa.mjs
+++ b/sites/backend/src/utils/mfa.mjs
@@ -21,7 +21,10 @@ export const mfa = ({ service }) => ({
       } catch (err) {
         console.log(err)
       }
-      svg = svg.replace(dark, 'currentColor').replace(light, 'none')
+      svg = svg
+        .replace(dark, 'currentColor')
+        .replace(light, 'none')
+        .replace('<svg ', '<svg class="qrcode" width="100%" height="100%" ')
 
       return { secret, otpauth, qrcode: svg }
     },
diff --git a/sites/org/components/account/account.en.yaml b/sites/org/components/account/account.en.yaml
index 20356d3c715..7b495890863 100644
--- a/sites/org/components/account/account.en.yaml
+++ b/sites/org/components/account/account.en.yaml
@@ -6,6 +6,8 @@ links: Links
 info: Info
 settings: Settings
 actions: Actions
+created: Created
+expires: Expires
 
 yourProfile: Your profile
 yourPatterns: Your patterns
@@ -24,19 +26,28 @@ imperial: Units
 apikeys: API Keys
 newsletter: Newsletter subscription
 password: Password
-passwordPlaceholder: Enter your new password here
+newPasswordPlaceholder: Enter your new password here
+passwordPlaceholder: Enter your password here
 mfa: Two-Factor authentication
 mfaTipTitle: Please consider enabling Two-Factor Authentication
 mfaTipMsg: We do not enforce a password policy, but we do recommend you enable Two-Factor Authentication to keep your FreeSewing account safe.
+mfaEnabled: Two-Factor Authentication is enabled
+mfaDisabled: Two-Factor Authentication is disabled
+mfaSetup: Set up Two-Factor Authentication
+mfaAdd: Add FreeSewing to your Authenticator App by scanning the QR code above.
+confirmWithPassword: Please enter your password to confirm this action
+confirmWithMfa: Please enter a code from your Authenticator App to confirm this action
+enableMfa: Enable Two-Factor Authentication
+disableMfa: Disable Two-Factor Authentication
 language: Language
 developer: Developer
 
-reloadAccount: Reload account
-exportData: Export your data
-reviewContent: Review your consent
-restrictProcessing: Restrict processing of your data
-disableAccount: Disable your account
-removeAccount: Remove your account
+reload: Reload account
+export: Export your data
+review: Review your consent
+restrict: Restrict processing of your data
+disable: Disable your account
+remove: Remove your account
 
 mdSupport: You can use markdown here
 or: or
@@ -44,6 +55,11 @@ continue: Continue
 save: Save
 noThanks: No thanks
 
+# reload
+nailedIt: Nailed it
+reloadMsg1: The data stored in your browser can sometimes get out of sync with the data stored in our backend.
+reloadMsg2: This lets you reload your account data from the backend. It has the same effect as loggin out, and then logging in again
+
 # bio
 bioTitle: Tell people a little bit about yourself
 bioPreview: Bio Preview
@@ -114,3 +130,22 @@ languageTitle: Which language do you prefer?
 
 # password
 passwordTitle: Something only you know
+
+# api key
+newApikey: Generate a new API key
+keyName: Key name
+keyNameDesc: A unique name for this API key. Only visible to you.
+keyExpires: Key expiration
+keyExpiresDesc: "The key will expire on:"
+keyLevel: Key permission level
+keyLevel0: Authenticate only
+keyLevel1: Read access to your own patterns and measurement sets
+keyLevel2: Read access to all your account data
+keyLevel3: Write access to your own patterns and measurement sets
+keyLevel4: Write access to all your account data
+keyLevel5: Read access to patterns and measurement sets of other users
+keyLevel6: Write access to patterns and measurement sets of other users
+keyLevel7: Write access to all account data of other users
+keyLevel8: Impersonate other users, full write access to all data
+cancel: Cancel
+keySecretWarning: This is the only time you can see the key secret, make sure to copy it.
diff --git a/sites/org/components/account/apikeys.mjs b/sites/org/components/account/apikeys.mjs
new file mode 100644
index 00000000000..2845625f59c
--- /dev/null
+++ b/sites/org/components/account/apikeys.mjs
@@ -0,0 +1,262 @@
+// Hooks
+import { useState, useEffect } from 'react'
+import { useTranslation } from 'next-i18next'
+import { useBackend } from 'site/hooks/useBackend.mjs'
+import { useToast } from 'site/hooks/useToast.mjs'
+// Dependencies
+import { DateTime } from 'luxon'
+import { CopyToClipboard } from 'react-copy-to-clipboard'
+// Components
+import { BackToAccountButton, Choice } from './shared.mjs'
+import { Popout } from 'shared/components/popout.mjs'
+import { WebLink } from 'shared/components/web-link.mjs'
+import { Bullet } from 'site/components/bullet.mjs'
+import { CopyIcon } from 'shared/components/icons.mjs'
+
+export const ns = ['account', 'toast']
+
+const ExpiryPicker = ({ t, expires, setExpires }) => {
+  const [days, setDays] = useState(true) // False = months
+  const [val, setVal] = useState(3)
+
+  // Run update when component mounts
+  useEffect(() => update(val), [])
+
+  const update = (evt) => {
+    const value = typeof evt === 'number' ? evt : evt.target.value
+    setVal(value)
+    const plus = {}
+    if (days) plus.days = value
+    else plus.months = value
+    setExpires(DateTime.now().plus(plus))
+  }
+
+  return (
+    <>
+      <div className="flex flex-row gap-2 items-center">
+        <input
+          type="range"
+          min="0"
+          max={days ? 30 : 24}
+          value={val}
+          className="range range-secondary"
+          onChange={update}
+        />
+        <div className="btn-group btn-group-vertical">
+          <button
+            className={`btn btn-secondary btn-sm ${days ? '' : 'btn-outline'}`}
+            onClick={() => setDays(true)}
+          >
+            {days ? (
+              <span>
+                {val}&nbsp;{t('days')}
+              </span>
+            ) : (
+              t('days')
+            )}
+          </button>
+          <button
+            className={`btn btn-secondary btn-sm ${days ? 'btn-outline' : ''}`}
+            onClick={() => {
+              setDays(false)
+              setVal(1)
+            }}
+          >
+            {!days ? (
+              <span>
+                {val}&nbsp;{t('months')}
+              </span>
+            ) : (
+              t('months')
+            )}
+          </button>
+        </div>
+      </div>
+      <Popout note compact>
+        {t('keyExpiresDesc')}
+        <b> {expires.toHTTP()}</b>
+      </Popout>
+    </>
+  )
+}
+
+const CopyInput = ({ text }) => {
+  const { t } = useTranslation(['toast'])
+  const toast = useToast()
+
+  const [copied, setCopied] = useState(false)
+
+  const showCopied = () => {
+    setCopied(true)
+    toast.success(<span>{t('copiedToClipboard')}</span>)
+    window.setTimeout(() => setCopied(false), 3000)
+  }
+
+  return (
+    <div className="flex flez-row gap-2 items-center w-full">
+      <input value={text} className="input w-full input-bordered flex flex-row" type="text" />
+      <CopyToClipboard text={text} onCopy={showCopied}>
+        <button className={`btn ${copied ? 'btn-success' : 'btn-secondary'}`}>
+          <CopyIcon />
+        </button>
+      </CopyToClipboard>
+    </div>
+  )
+}
+
+const Row = ({ title, children }) => (
+  <div className="flex flex-row flex-wrap items-center lg:gap-4 my-2">
+    <div className="w-24 text-left md:text-right block md:inline font-bold">{title}</div>
+    <div className="grow">{children}</div>
+  </div>
+)
+const ShowKey = ({ apikey, t, clear }) => (
+  <div>
+    <Row title={t('keyName')}>{apikey.name}</Row>
+    <Row title={t('created')}>{DateTime.fromISO(apikey.createdAt).toHTTP()}</Row>
+    <Row title={t('expires')}>{DateTime.fromISO(apikey.expiresAt).toHTTP()}</Row>
+    <Row title="Key ID">
+      <CopyInput text={apikey.key} />
+    </Row>
+    <Row title="Key Secret">
+      <CopyInput text={apikey.secret} />
+    </Row>
+    <Popout warning compact>
+      {t('keySecretWarning')}
+    </Popout>
+    <button className="btn btn-primary capitalize mt-4i w-full" onClick={clear}>
+      {t('apikeys')}
+    </button>
+  </div>
+)
+
+const NewKey = ({ app, t, setGenerate, backend, toast }) => {
+  const [name, setName] = useState('')
+  const [level, setLevel] = useState(1)
+  const [expires, setExpires] = useState(DateTime.now())
+  const [apikey, setApikey] = useState(false)
+
+  const levels = app.account.role === 'admin' ? [0, 1, 2, 3, 4, 5, 6, 7, 8] : [0, 1, 2, 3, 4]
+
+  const createKey = async () => {
+    app.startLoading()
+    const result = await backend.createApikey({
+      name,
+      level,
+      expiresIn: Math.floor((expires.valueOf() - DateTime.now().valueOf()) / 1000),
+    })
+    console.log({ result })
+    if (result.key) {
+      toast.success(<span>{t('nailedIt')}</span>)
+      setApikey(result)
+    } else toast.for.backendError()
+    app.stopLoading()
+  }
+
+  const clear = () => {
+    setApikey(false)
+    setGenerate(false)
+  }
+
+  return (
+    <div>
+      <h2>{t('newApikey')}</h2>
+      {apikey ? (
+        <>
+          <ShowKey apikey={apikey} t={t} clear={clear} />
+        </>
+      ) : (
+        <>
+          <h3>{t('keyName')}</h3>
+          <p>{t('keyNameDesc')}</p>
+          <input
+            value={name}
+            onChange={(evt) => setName(evt.target.value)}
+            className="input w-full input-bordered flex flex-row"
+            type="text"
+            placeholder={'Alicia key'}
+          />
+          <h3>{t('keyExpires')}</h3>
+          <ExpiryPicker {...{ t, expires, setExpires }} />
+          <h3>{t('keyLevel')}</h3>
+          {levels.map((l) => (
+            <Choice val={l} t={t} update={setLevel} current={level} key={l}>
+              <span className="block text-lg leading-5">{t(`keyLevel${l}`)}</span>
+            </Choice>
+          ))}
+          <div className="flex flex-row gap-2 items-center w-full my-8">
+            <button
+              className="btn btn-primary grow capitalize"
+              disabled={name.length < 1}
+              onClick={createKey}
+            >
+              {t('newApikey')}
+            </button>
+            <button
+              className="btn btn-primary btn-outline capitalize"
+              onClick={() => setGenerate(false)}
+            >
+              {t('cancel')}
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
+
+export const Apikeys = ({ app, title = false, welcome = false }) => {
+  const backend = useBackend(app)
+  const { t } = useTranslation(ns)
+  const toast = useToast()
+
+  const [keys, setKeys] = useState([])
+  const [generate, setGenerate] = useState(false)
+
+  //useEffect(() => {
+  //  const getApikeys = () => {
+  //    const allKeys = await backend.getApikeys()
+  //    if (allKeys) setKeys(allKeys)
+  //  }
+  //  getApiKeys()
+  //}, [ ])
+
+  const save = async () => {
+    app.startLoading()
+    const result = await backend.updateAccount({ bio })
+    if (result === true) toast.for.settingsSaved()
+    else toast.for.backendError()
+    app.stopLoading()
+  }
+
+  return (
+    <>
+      <div>
+        {generate ? (
+          <NewKey {...{ app, t, setGenerate, backend, toast }} />
+        ) : (
+          <>
+            <h2>{t('apikeys')}</h2>
+            <button className="btn btn-primary w-full capitalize" onClick={() => setGenerate(true)}>
+              {t('newApikey')}
+            </button>
+            <BackToAccountButton loading={app.loading} />
+            <Popout tip>
+              <h5>Refer to FreeSewing.dev for details (English only)</h5>
+              <p>
+                This is an advanced feature aimed at developers or anyone who wants to interact with
+                our backend directly. For details, please refer to{' '}
+                <WebLink
+                  href="https://freesewing.dev/reference/backend/api/apikeys"
+                  txt="the API keys reference documentation"
+                />{' '}
+                on <WebLink href="https://freesewing.dev/" txt="FreeSewing.dev" /> our site for
+                developers and contributors.
+              </p>
+            </Popout>
+          </>
+        )}
+      </div>
+    </>
+  )
+}
diff --git a/sites/org/components/account/links.mjs b/sites/org/components/account/links.mjs
index 0242f628867..1b4c3e6b747 100644
--- a/sites/org/components/account/links.mjs
+++ b/sites/org/components/account/links.mjs
@@ -30,12 +30,11 @@ const LinkList = ({ items, t, control, first = false }) => {
 }
 
 const actions = {
-  reloadAccount: 4,
-  exportData: 3,
-  reviewContent: 4,
-  restrictProcessing: 4,
-  disableAccount: 4,
-  removeAccount: 2,
+  reload: 4,
+  export: 3,
+  restrict: 4,
+  disable: 4,
+  remove: 2,
 }
 
 export const AccountLinks = ({ account }) => {
diff --git a/sites/org/components/account/mfa.mjs b/sites/org/components/account/mfa.mjs
new file mode 100644
index 00000000000..40621a80c7b
--- /dev/null
+++ b/sites/org/components/account/mfa.mjs
@@ -0,0 +1,151 @@
+// Hooks
+import { useState } from 'react'
+import { useTranslation } from 'next-i18next'
+import { useBackend } from 'site/hooks/useBackend.mjs'
+import { useToast } from 'site/hooks/useToast.mjs'
+// Components
+import Link from 'next/link'
+import { BackToAccountButton, updateAccount } from './shared.mjs'
+import { SaveSettingsButton } from 'site/components/buttons/save-settings-button.mjs'
+import { Popout } from 'shared/components/popout.mjs'
+import { RightIcon } from 'shared/components/icons.mjs'
+import { Bullet } from 'site/components/bullet.mjs'
+
+export const ns = ['account']
+
+const CodeInput = ({ code, setCode, t }) => (
+  <input
+    value={code}
+    onChange={(evt) => setCode(evt.target.value)}
+    className="input w-full text-4xl  input-bordered input-lg flex flex-row text-center mb-8 tracking-widest"
+    type="number"
+    placeholder={t('000000')}
+  />
+)
+
+export const MfaSettings = ({ app, title = false, welcome = false }) => {
+  const backend = useBackend(app)
+  const { t } = useTranslation(ns)
+  const toast = useToast()
+
+  const [mfa, setMfa] = useState(app.account.mfaEnabled)
+  const [enable, setEnable] = useState(false)
+  const [disable, setDisable] = useState(false)
+  const [code, setCode] = useState('')
+  const [password, setPassword] = useState('')
+
+  const enableMfa = async () => {
+    app.startLoading()
+    const result = await backend.enableMfa()
+    if (result) setEnable(result)
+    app.stopLoading()
+  }
+
+  const disableMfa = async () => {
+    app.startLoading()
+    const result = await backend.disableMfa({
+      mfa: false,
+      password,
+      token: code,
+    })
+    if (result) {
+      if (result === true) toast.warning(<span>{t('mfaDisabled')}</span>)
+      else toast.for.backendError()
+      setDisable(false)
+      setEnable(false)
+      setCode('')
+      setPassword('')
+    }
+    app.stopLoading()
+  }
+
+  const confirmMfa = async () => {
+    app.startLoading()
+    const result = await backend.confirmMfa({
+      mfa: true,
+      secret: enable.secret,
+      token: code,
+    })
+    if (result === true) toast.success(<span>{t('mfaEnabled')}</span>)
+    else toast.for.backendError()
+    setEnable(false)
+    setCode('')
+    app.stopLoading()
+  }
+
+  let titleText = app.account.mfaEnabled ? t('mfaEnabled') : t('mfaDisabled')
+  if (enable) titleText = t('mfaSetup')
+
+  return (
+    <>
+      {title ? <h2 className="text-4xl">{titleText}</h2> : null}
+      {enable ? (
+        <>
+          <div className="flex flex-row items-center justify-center">
+            <div
+              dangerouslySetInnerHTML={{ __html: enable.qrcode }}
+              classname="w-full h-auto m-auto grow"
+            />
+          </div>
+          <Bullet num="1">{t('mfaAdd')}</Bullet>
+          <Bullet num="2">{t('confirmWithMfa')}</Bullet>
+          <input
+            value={code}
+            onChange={(evt) => setCode(evt.target.value)}
+            className="input w-64 m-auto text-4xl  input-bordered input-lg flex flex-row text-center mb-8 tracking-widest"
+            type="number"
+            placeholder={t('000000')}
+          />
+          <button className="btn btn-success btn-lg block w-full" onClick={confirmMfa}>
+            {t('enableMfa')}
+          </button>
+        </>
+      ) : null}
+      {disable ? (
+        <div className="my-8">
+          <Bullet num="1">
+            <h5>{t('confirmWithPassword')}</h5>
+            <input
+              value={password}
+              onChange={(evt) => setPassword(evt.target.value)}
+              className="input w-full input-bordered flex flex-row"
+              type="text"
+              placeholder={t('passwordPlaceholder')}
+            />
+          </Bullet>
+          <Bullet num="2">
+            <h5>{t('confirmWithMfa')}</h5>
+            <CodeInput code={code} setCode={setCode} t={t} />
+          </Bullet>
+          <button
+            className="btn btn-error btn-lg block w-full"
+            onClick={disableMfa}
+            disabled={code.length < 4 || password.length < 3}
+          >
+            {t('disableMfa')}
+          </button>
+        </div>
+      ) : null}
+      <div className="flex flex-row items-center mt-4">
+        {app.account.mfaEnabled ? (
+          disable ? null : (
+            <button className="btn btn-primary block w-full" onClick={() => setDisable(true)}>
+              {t('disableMfa')}
+            </button>
+          )
+        ) : enable ? null : (
+          <div>
+            <button className="btn btn-primary block w-full" onClick={enableMfa}>
+              {t('mfaSetup')}
+            </button>
+            <Popout tip>
+              <h5>{t('mfaTipTitle')}</h5>
+              <p>{t('mfaTipMsg')}</p>
+            </Popout>
+          </div>
+        )}
+      </div>
+      {!welcome && <BackToAccountButton loading={app.loading} />}
+    </>
+  )
+}
diff --git a/sites/org/components/account/password.mjs b/sites/org/components/account/password.mjs
index 475033ad175..6e8c54349c8 100644
--- a/sites/org/components/account/password.mjs
+++ b/sites/org/components/account/password.mjs
@@ -10,7 +10,7 @@ import { SaveSettingsButton } from 'site/components/buttons/save-settings-button
 import { Popout } from 'shared/components/popout.mjs'
 import { RightIcon } from 'shared/components/icons.mjs'
 
-export const ns = ['account']
+export const ns = ['account', 'toast']
 
 export const PasswordSettings = ({ app, title = false, welcome = false }) => {
   const backend = useBackend(app)
@@ -35,7 +35,7 @@ export const PasswordSettings = ({ app, title = false, welcome = false }) => {
           onChange={(evt) => setPassword(evt.target.value)}
           className="input w-full input-bordered flex flex-row"
           type="text"
-          placeholder={t('passwordPlaceholder')}
+          placeholder={t('newPasswordPlaceholder')}
         />
       </div>
       <SaveSettingsButton app={app} btnProps={{ onClick: save, disabled: password.length < 4 }} />
diff --git a/sites/org/components/account/reload.mjs b/sites/org/components/account/reload.mjs
new file mode 100644
index 00000000000..91c6706c705
--- /dev/null
+++ b/sites/org/components/account/reload.mjs
@@ -0,0 +1,40 @@
+// Hooks
+import { useState } from 'react'
+import { useTranslation } from 'next-i18next'
+import { useBackend } from 'site/hooks/useBackend.mjs'
+import { useToast } from 'site/hooks/useToast.mjs'
+// Components
+import Link from 'next/link'
+import Markdown from 'react-markdown'
+import { Icons, welcomeSteps, BackToAccountButton } from './shared.mjs'
+import { Popout } from 'shared/components/popout.mjs'
+import { PageLink } from 'shared/components/page-link.mjs'
+import { SaveSettingsButton } from 'site/components/buttons/save-settings-button.mjs'
+import { ContinueButton } from 'site/components/buttons/continue-button.mjs'
+
+export const ns = ['account', 'toast']
+
+export const ReloadAccount = ({ app, title = false }) => {
+  const backend = useBackend(app)
+  const { t } = useTranslation(ns)
+  const toast = useToast()
+
+  const reload = async () => {
+    app.startLoading()
+    const result = await backend.reloadAccount()
+    if (result === true) toast.success(<span>{t('nailedIt')}</span>)
+    else toast.for.backendError()
+    app.stopLoading()
+  }
+
+  return (
+    <>
+      {title ? <h2>{t('reloadMsg1')}</h2> : null}
+      <p>{t('reloadMsg2')}</p>
+      <button className="btn btn-primary capitalize w-full my-2" onClick={reload}>
+        {t('reload')}
+      </button>
+      <BackToAccountButton loading={app.loading} />
+    </>
+  )
+}
diff --git a/sites/org/components/bullet.mjs b/sites/org/components/bullet.mjs
new file mode 100644
index 00000000000..cc30456274f
--- /dev/null
+++ b/sites/org/components/bullet.mjs
@@ -0,0 +1,8 @@
+export const Bullet = ({ num, children }) => (
+  <div className="flex flex-row items-center py-4 w-full gap-4">
+    <span className="bg-secondary text-secondary-content rounded-full w-8 h-8 p-1 inline-block text-center font-bold mr-4 shrink-0">
+      {num}
+    </span>
+    <div className="text-lg grow">{children}</div>
+  </div>
+)
diff --git a/sites/org/components/toast/toast.en.yaml b/sites/org/components/toast/toast.en.yaml
index 70796077043..9546e0ac319 100644
--- a/sites/org/components/toast/toast.en.yaml
+++ b/sites/org/components/toast/toast.en.yaml
@@ -1,2 +1,3 @@
 settingsSaved: Settings saved
 backendError: Backend returned an error
+copiedToClipboard: Copied to clipboard
diff --git a/sites/org/hooks/useBackend.mjs b/sites/org/hooks/useBackend.mjs
index 1ff78c92c5c..36098ed047d 100644
--- a/sites/org/hooks/useBackend.mjs
+++ b/sites/org/hooks/useBackend.mjs
@@ -4,7 +4,7 @@ import process from 'process'
 /*
  * Helper methods to interact with the FreeSewing backend
  */
-const api = axios.create({
+const apiHandler = axios.create({
   baseURL: process.env.NEXT_PUBLIC_BACKEND || 'https://backend.freesewing.org',
   timeout: 3000,
 })
@@ -14,21 +14,56 @@ export function useBackend(app) {
     headers: { Authorization: 'Bearer ' + app.token },
   }
 
+  const api = {
+    get: async (uri, config = {}) => {
+      let result
+      try {
+        result = await apiHandler.get(uri, config)
+        return result
+      } catch (err) {
+        return err
+      }
+      return false
+    },
+    post: async (uri, data = null, config = {}) => {
+      let result
+      try {
+        result = await apiHandler.post(uri, data, config)
+        return result
+      } catch (err) {
+        return err
+      }
+      return false
+    },
+    patch: async (uri, data = null, config = {}) => {
+      let result
+      try {
+        result = await apiHandler.patch(uri, data, config)
+        return result
+      } catch (err) {
+        return err
+      }
+      return false
+    },
+    delete: async (uri, config = {}) => {
+      let result
+      try {
+        result = await apiHandler.delete(uri, data, config)
+        return result
+      } catch (err) {
+        return err
+      }
+      return false
+    },
+  }
+
   const backend = {}
 
   /*
    * User signup
    */
   backend.signUp = async ({ email, language }) => {
-    let result
-    try {
-      app.startLoading()
-      result = await api.post('/signup', { email, language })
-    } catch (err) {
-      return err
-    } finally {
-      app.stopLoading()
-    }
+    const result = await api.post('/signup', { email, language })
     if (result && result.status === 201 && result.data) return result.data
     return null
   }
@@ -37,15 +72,7 @@ export function useBackend(app) {
    * Load confirmation
    */
   backend.loadConfirmation = async ({ id, check }) => {
-    let result
-    try {
-      app.startLoading()
-      result = await api.get(`/confirmations/${id}/${check}`)
-    } catch (err) {
-      return err
-    } finally {
-      app.stopLoading()
-    }
+    const result = await api.get(`/confirmations/${id}/${check}`)
     if (result && result.status === 201 && result.data) return result.data
     return null
   }
@@ -54,15 +81,7 @@ export function useBackend(app) {
    * Confirm signup
    */
   backend.confirmSignup = async ({ id, consent }) => {
-    let result
-    try {
-      app.startLoading()
-      result = await api.post(`/confirm/signup/${id}`, { consent })
-    } catch (err) {
-      return err
-    } finally {
-      app.stopLoading()
-    }
+    const result = await api.post(`/confirm/signup/${id}`, { consent })
     if (result && result.status === 200 && result.data) return result.data
     return null
   }
@@ -71,19 +90,12 @@ export function useBackend(app) {
    * Generic update account method
    */
   backend.updateAccount = async (data) => {
-    let result
-    try {
-      app.startLoading()
-      result = await api.patch(`/account/jwt`, data, auth)
-    } catch (err) {
-      return err
-    } finally {
-      app.stopLoading()
-    }
+    const result = await api.patch(`/account/jwt`, data, auth)
     if (result && result.status === 200 && result.data?.account) {
       app.setAccount(result.data.account)
       return true
     }
+    console.log('backend result', result)
 
     return false
   }
@@ -92,32 +104,18 @@ export function useBackend(app) {
    * Checks whether a username is available
    */
   backend.isUsernameAvailable = async (username) => {
-    try {
-      app.startLoading()
-      await api.post(`/available/username/jwt`, { username }, auth)
-    } catch (err) {
-      // 404 means user is not found, so the username is available
-      if (err.response?.status === 404) return true
-      return false
-    } finally {
-      app.stopLoading()
-    }
+    const result = await api.post(`/available/username/jwt`, { username }, auth)
+    // 404 means username is available, which is success in this case
+    if (result.response?.status === 404) return true
+
     return false
   }
 
   /*
    * Remove account method
    */
-  backend.removeAccount = async (data) => {
-    let result
-    try {
-      app.startLoading()
-      result = await api.delete(`/account/jwt`, auth)
-    } catch (err) {
-      return err
-    } finally {
-      app.stopLoading()
-    }
+  backend.removeAccount = async () => {
+    const result = await api.delete(`/account/jwt`, auth)
     if (result && result.status === 200 && result.data?.account) {
       app.setAccount(result.data.account)
       return true
@@ -126,5 +124,68 @@ export function useBackend(app) {
     return false
   }
 
+  /*
+   * Enable MFA
+   */
+  backend.enableMfa = async () => {
+    const result = await api.post(`/account/mfa/jwt`, { mfa: true }, auth)
+    if (result && result.status === 200 && result.data?.mfa) {
+      return result.data.mfa
+    }
+
+    return false
+  }
+
+  /*
+   * Confirm MFA
+   */
+  backend.confirmMfa = async (data) => {
+    const result = await api.post(`/account/mfa/jwt`, { ...data, mfa: true }, auth)
+    if (result && result.status === 200 && result.data?.account) {
+      app.setAccount(result.data.account)
+      return true
+    }
+
+    return false
+  }
+
+  /*
+   * Disable MFA
+   */
+  backend.disableMfa = async (data) => {
+    const result = await await api.post(`/account/mfa/jwt`, { ...data, mfa: false }, auth)
+    if (result && result.status === 200 && result.data?.account) {
+      app.setAccount(result.data.account)
+      return true
+    }
+
+    return false
+  }
+
+  /*
+   * Reload account
+   */
+  backend.reloadAccount = async () => {
+    const result = await await api.get(`/whoami/jwt`, auth)
+    if (result && result.status === 200 && result.data?.account) {
+      app.setAccount(result.data.account)
+      return true
+    }
+
+    return false
+  }
+
+  /*
+   * Create API key
+   */
+  backend.createApikey = async (data) => {
+    const result = await await api.post(`/apikeys/jwt`, data, auth)
+    if (result && result.status === 201 && result.data?.apikey) {
+      return result.data.apikey
+    }
+
+    return false
+  }
+
   return backend
 }
diff --git a/sites/org/package.json b/sites/org/package.json
index 3856623608f..980f300cea1 100644
--- a/sites/org/package.json
+++ b/sites/org/package.json
@@ -34,10 +34,12 @@
     "@mdx-js/runtime": "2.0.0-next.9",
     "@tailwindcss/typography": "0.5.9",
     "algoliasearch": "4.14.3",
+    "react-copy-to-clipboard": "5.1.0",
     "daisyui": "2.47.0",
     "lodash.get": "4.4.2",
     "lodash.orderby": "4.6.0",
     "lodash.set": "4.3.2",
+    "luxon": "latest",
     "next": "13.1.5",
     "react-dropzone": "14.2.3",
     "react-hotkeys-hook": "4.3.2",
diff --git a/sites/org/pages/account/apikeys.mjs b/sites/org/pages/account/apikeys.mjs
new file mode 100644
index 00000000000..8fa4a952856
--- /dev/null
+++ b/sites/org/pages/account/apikeys.mjs
@@ -0,0 +1,54 @@
+// Hooks
+import { useApp } from 'site/hooks/useApp.mjs'
+import { useTranslation } from 'next-i18next'
+// Dependencies
+import dynamic from 'next/dynamic'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+// Components
+import { PageWrapper, ns as pageNs } from 'site/components/wrappers/page.mjs'
+import { ns as authNs } from 'site/components/wrappers/auth/index.mjs'
+import { ns as apikeysNs } from 'site/components/account/apikeys.mjs'
+
+// Translation namespaces used on this page
+const namespaces = [...new Set([...apikeysNs, ...authNs, ...pageNs])]
+
+/*
+ * Some things should never generated as SSR
+ * So for these, we run a dynamic import and disable SSR rendering
+ */
+const DynamicAuthWrapper = dynamic(
+  () => import('site/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  { ssr: false }
+)
+
+const DynamicApikeys = dynamic(
+  () => import('site/components/account/apikeys.mjs').then((mod) => mod.Apikeys),
+  { ssr: false }
+)
+
+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}>
+      <DynamicAuthWrapper app={app}>
+        <DynamicApikeys app={app} title />
+      </DynamicAuthWrapper>
+    </PageWrapper>
+  )
+}
+
+export default AccountPage
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, namespaces)),
+    },
+  }
+}
diff --git a/sites/org/pages/account/mfa.mjs b/sites/org/pages/account/mfa.mjs
new file mode 100644
index 00000000000..65ee5fe4039
--- /dev/null
+++ b/sites/org/pages/account/mfa.mjs
@@ -0,0 +1,54 @@
+// Hooks
+import { useApp } from 'site/hooks/useApp.mjs'
+import { useTranslation } from 'next-i18next'
+// Dependencies
+import dynamic from 'next/dynamic'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+// Components
+import { PageWrapper, ns as pageNs } from 'site/components/wrappers/page.mjs'
+import { ns as authNs } from 'site/components/wrappers/auth/index.mjs'
+import { ns as mfaNs } from 'site/components/account/mfa.mjs'
+
+// Translation namespaces used on this page
+const namespaces = [...new Set([...mfaNs, ...authNs, ...pageNs])]
+
+/*
+ * Some things should never generated as SSR
+ * So for these, we run a dynamic import and disable SSR rendering
+ */
+const DynamicAuthWrapper = dynamic(
+  () => import('site/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  { ssr: false }
+)
+
+const DynamicMfa = dynamic(
+  () => import('site/components/account/mfa.mjs').then((mod) => mod.MfaSettings),
+  { ssr: false }
+)
+
+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}>
+      <DynamicAuthWrapper app={app}>
+        <DynamicMfa app={app} title />
+      </DynamicAuthWrapper>
+    </PageWrapper>
+  )
+}
+
+export default AccountPage
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, namespaces)),
+    },
+  }
+}
diff --git a/sites/org/pages/account/reload.mjs b/sites/org/pages/account/reload.mjs
new file mode 100644
index 00000000000..63c87c4b97c
--- /dev/null
+++ b/sites/org/pages/account/reload.mjs
@@ -0,0 +1,54 @@
+// Hooks
+import { useApp } from 'site/hooks/useApp.mjs'
+import { useTranslation } from 'next-i18next'
+// Dependencies
+import dynamic from 'next/dynamic'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+// Components
+import { PageWrapper, ns as pageNs } from 'site/components/wrappers/page.mjs'
+import { ns as authNs } from 'site/components/wrappers/auth/index.mjs'
+import { ns as reloadNs } from 'site/components/account/reload.mjs'
+
+// Translation namespaces used on this page
+const namespaces = [...new Set([...reloadNs, ...authNs, ...pageNs])]
+
+/*
+ * Some things should never generated as SSR
+ * So for these, we run a dynamic import and disable SSR rendering
+ */
+const DynamicAuthWrapper = dynamic(
+  () => import('site/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  { ssr: false }
+)
+
+const DynamicReload = dynamic(
+  () => import('site/components/account/reload.mjs').then((mod) => mod.ReloadAccount),
+  { ssr: false }
+)
+
+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}>
+      <DynamicAuthWrapper app={app}>
+        <DynamicReload app={app} title />
+      </DynamicAuthWrapper>
+    </PageWrapper>
+  )
+}
+
+export default AccountPage
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, namespaces)),
+    },
+  }
+}
diff --git a/sites/shared/styles/globals.css b/sites/shared/styles/globals.css
index 017901fc117..47543359c72 100644
--- a/sites/shared/styles/globals.css
+++ b/sites/shared/styles/globals.css
@@ -550,10 +550,15 @@ details.jargon-details[open] svg.jargon-close {
   opacity: 0.6;
 }
 
-/* Fix styling for pan&zoom */
 /*
-div#pan-zoom-wrapper > div.react-transform-wrapper > div.react-transform-component {
-  width: calc(100vw - 64rem);
-  height: calc(100vh - 8rem);
+ * Fix slider styles that for some reason are ugly
+ */
+.range::-moz-range-thumb {
+  border-radius: 100%;
+}
+input[type='range']::-moz-range-track {
+  background-color: hsla(var(--bc) / 0.1);
+}
+.range {
+  border-radius: 1rem;
 }
-*/
diff --git a/yarn.lock b/yarn.lock
index 38415c39c95..531005ad9d2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12898,6 +12898,11 @@ lru-cache@^7.4.4, lru-cache@^7.5.1, lru-cache@^7.7.1:
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-7.13.1.tgz#267a81fbd0881327c46a81c5922606a2cfe336c4"
   integrity sha512-CHqbAq7NFlW3RSnoWXLJBxCWaZVBrfa9UEHId2M3AW8iEBurbqduNexEUCGc3SHc6iCYXNJCDi903LajSVAEPQ==
 
+luxon@latest:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/luxon/-/luxon-3.2.1.tgz#14f1af209188ad61212578ea7e3d518d18cee45f"
+  integrity sha512-QrwPArQCNLAKGO/C+ZIilgIuDnEnKx5QYODdDtbFaxzsbZcc/a7WFq7MhsVYgRlwawLtvOUESTlfJ+hc/USqPg==
+
 magic-string@^0.25.3:
   version "0.25.9"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"