diff --git a/playwright/snapshots/user-menu/user-menu.spec.ts/user-menu-linux.png b/playwright/snapshots/user-menu/user-menu.spec.ts/user-menu-linux.png
index f713a7dc98..e06fbbda1b 100644
Binary files a/playwright/snapshots/user-menu/user-menu.spec.ts/user-menu-linux.png and b/playwright/snapshots/user-menu/user-menu.spec.ts/user-menu-linux.png differ
diff --git a/res/css/views/auth/_LoginWithQR.pcss b/res/css/views/auth/_LoginWithQR.pcss
index c246388869..9d4744a389 100644
--- a/res/css/views/auth/_LoginWithQR.pcss
+++ b/res/css/views/auth/_LoginWithQR.pcss
@@ -11,6 +11,13 @@ Please see LICENSE files in the repository root for full details.
     margin-bottom: $spacing-16;
 }
 
+.mx_LoginWithQRSection {
+    .mx_AccessibleButton_kind_primary + p {
+        color: var(--cpd-color-text-secondary);
+        margin-top: var(--cpd-space-2x);
+    }
+}
+
 .mx_LoginWithQRSection .mx_AccessibleButton svg {
     margin-right: $spacing-12;
 }
@@ -135,9 +142,16 @@ Please see LICENSE files in the repository root for full details.
         padding: var(--cpd-space-3x);
         gap: 10px;
 
-        background-color: var(--cpd-color-bg-success-subtle);
+        background-color: var(--cpd-color-bg-subtle-secondary);
         svg {
-            color: var(--cpd-color-icon-success-primary);
+            color: var(--cpd-color-icon-secondary);
+        }
+
+        &.mx_LoginWithQR_icon--success {
+            background-color: var(--cpd-color-bg-success-subtle);
+            svg {
+                color: var(--cpd-color-icon-success-primary);
+            }
         }
 
         &.mx_LoginWithQR_icon--critical {
diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx
index ac6a8c8e0b..4bdb6e227b 100644
--- a/src/components/structures/UserMenu.tsx
+++ b/src/components/structures/UserMenu.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { createRef, ReactNode } from "react";
-import { discoverAndValidateOIDCIssuerWellKnown, Room } from "matrix-js-sdk/src/matrix";
+import { Room } from "matrix-js-sdk/src/matrix";
 
 import { MatrixClientPeg } from "../../MatrixClientPeg";
 import defaultDispatcher from "../../dispatcher/dispatcher";
@@ -44,8 +44,6 @@ import { Icon as LiveIcon } from "../../../res/img/compound/live-8px.svg";
 import { VoiceBroadcastRecording, VoiceBroadcastRecordingsStoreEvent } from "../../voice-broadcast";
 import { SDKContext } from "../../contexts/SDKContext";
 import { shouldShowFeedback } from "../../utils/Feedback";
-import { shouldShowQr } from "../views/settings/devices/LoginWithQRSection";
-import { Features } from "../../settings/Settings";
 
 interface IProps {
     isPanelCollapsed: boolean;
@@ -60,8 +58,6 @@ interface IState {
     isHighContrast: boolean;
     selectedSpace?: Room | null;
     showLiveAvatarAddon: boolean;
-    showQrLogin: boolean;
-    supportsQrLogin: boolean;
 }
 
 const toRightOf = (rect: PartialDOMRect): MenuProps => {
@@ -98,8 +94,6 @@ export default class UserMenu extends React.Component<IProps, IState> {
             isHighContrast: this.isUserOnHighContrastTheme(),
             selectedSpace: SpaceStore.instance.activeSpaceRoom,
             showLiveAvatarAddon: this.context.voiceBroadcastRecordingsStore.hasCurrent(),
-            showQrLogin: false,
-            supportsQrLogin: false,
         };
 
         OwnProfileStore.instance.on(UPDATE_EVENT, this.onProfileUpdate);
@@ -123,7 +117,6 @@ export default class UserMenu extends React.Component<IProps, IState> {
         );
         this.dispatcherRef = defaultDispatcher.register(this.onAction);
         this.themeWatcherRef = SettingsStore.watchSetting("theme", null, this.onThemeChanged);
-        this.checkQrLoginSupport();
     }
 
     public componentWillUnmount(): void {
@@ -138,29 +131,6 @@ export default class UserMenu extends React.Component<IProps, IState> {
         );
     }
 
-    private checkQrLoginSupport = async (): Promise<void> => {
-        if (!this.context.client || !SettingsStore.getValue(Features.OidcNativeFlow)) return;
-
-        const { issuer } = await this.context.client.getAuthIssuer().catch(() => ({ issuer: undefined }));
-        if (issuer) {
-            const [oidcClientConfig, versions, wellKnown, isCrossSigningReady] = await Promise.all([
-                discoverAndValidateOIDCIssuerWellKnown(issuer),
-                this.context.client.getVersions(),
-                this.context.client.waitForClientWellKnown(),
-                this.context.client.getCrypto()?.isCrossSigningReady(),
-            ]);
-
-            const supportsQrLogin = shouldShowQr(
-                this.context.client,
-                !!isCrossSigningReady,
-                oidcClientConfig,
-                versions,
-                wellKnown,
-            );
-            this.setState({ supportsQrLogin, showQrLogin: true });
-        }
-    };
-
     private isUserOnDarkTheme(): boolean {
         if (SettingsStore.getValue("use_system_theme")) {
             return window.matchMedia("(prefers-color-scheme: dark)").matches;
@@ -363,28 +333,13 @@ export default class UserMenu extends React.Component<IProps, IState> {
             );
         }
 
-        let linkNewDeviceButton: JSX.Element | undefined;
-        if (this.state.showQrLogin) {
-            const extraProps: Omit<
-                React.ComponentProps<typeof IconizedContextMenuOption>,
-                "iconClassname" | "label" | "onClick"
-            > = {};
-            if (!this.state.supportsQrLogin) {
-                extraProps.disabled = true;
-                extraProps.title = _t("user_menu|link_new_device_not_supported");
-                extraProps.caption = _t("user_menu|link_new_device_not_supported_caption");
-                extraProps.placement = "right";
-            }
-
-            linkNewDeviceButton = (
-                <IconizedContextMenuOption
-                    {...extraProps}
-                    iconClassName="mx_UserMenu_iconQr"
-                    label={_t("user_menu|link_new_device")}
-                    onClick={(e) => this.onSettingsOpen(e, UserTab.SessionManager, { showMsc4108QrCode: true })}
-                />
-            );
-        }
+        const linkNewDeviceButton = (
+            <IconizedContextMenuOption
+                iconClassName="mx_UserMenu_iconQr"
+                label={_t("user_menu|link_new_device")}
+                onClick={(e) => this.onSettingsOpen(e, UserTab.SessionManager, { showMsc4108QrCode: true })}
+            />
+        );
 
         let primaryOptionList = (
             <IconizedContextMenuOptionList>
diff --git a/src/components/views/auth/LoginWithQRFlow.tsx b/src/components/views/auth/LoginWithQRFlow.tsx
index 72511f2ccb..645613dafe 100644
--- a/src/components/views/auth/LoginWithQRFlow.tsx
+++ b/src/components/views/auth/LoginWithQRFlow.tsx
@@ -17,6 +17,7 @@ import CheckCircleSolidIcon from "@vector-im/compound-design-tokens/assets/web/i
 import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error";
 import { Heading, MFAInput, Text } from "@vector-im/compound-web";
 import classNames from "classnames";
+import { QrCodeIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
@@ -94,7 +95,10 @@ export default class LoginWithQRFlow extends React.Component<XOR<Props, MSC3906P
 
         switch (this.props.phase) {
             case Phase.Error: {
-                let success = false;
+                backButton = false;
+
+                let Icon = ErrorIcon;
+                let success: boolean | null = false;
                 let title: string | undefined;
                 let message: ReactNode | undefined;
 
@@ -138,6 +142,7 @@ export default class LoginWithQRFlow extends React.Component<XOR<Props, MSC3906P
 
                     case ClientRendezvousFailureReason.OtherDeviceAlreadySignedIn:
                         success = true;
+                        Icon = CheckCircleSolidIcon;
                         title = _t("auth|qr_code_login|error_other_device_already_signed_in_title");
                         message = _t("auth|qr_code_login|error_other_device_already_signed_in");
                         break;
@@ -157,6 +162,15 @@ export default class LoginWithQRFlow extends React.Component<XOR<Props, MSC3906P
                         message = _t("auth|qr_code_login|error_etag_missing");
                         break;
 
+                    case LegacyRendezvousFailureReason.HomeserverLacksSupport:
+                    case ClientRendezvousFailureReason.HomeserverLacksSupport:
+                        success = null;
+                        Icon = QrCodeIcon;
+                        backButton = true;
+                        title = _t("auth|qr_code_login|unsupported_heading");
+                        message = _t("auth|qr_code_login|unsupported_explainer");
+                        break;
+
                     case MSC4108FailureReason.DeviceAlreadyExists:
                     case MSC4108FailureReason.DeviceNotFound:
                     case MSC4108FailureReason.UnexpectedMessageReceived:
@@ -168,15 +182,15 @@ export default class LoginWithQRFlow extends React.Component<XOR<Props, MSC3906P
                         break;
                 }
                 className = "mx_LoginWithQR_error";
-                backButton = false;
                 main = (
                     <>
                         <div
                             className={classNames("mx_LoginWithQR_icon", {
-                                "mx_LoginWithQR_icon--critical": !success,
+                                "mx_LoginWithQR_icon--critical": success === false,
+                                "mx_LoginWithQR_icon--success": success === true,
                             })}
                         >
-                            {success ? <CheckCircleSolidIcon width="32px" /> : <ErrorIcon width="32px" />}
+                            <Icon width="32px" height="32px" />
                         </div>
                         <Heading as="h1" size="sm" weight="semibold">
                             {title}
diff --git a/src/components/views/settings/devices/LoginWithQRSection.tsx b/src/components/views/settings/devices/LoginWithQRSection.tsx
index f776d69765..c5efb35efc 100644
--- a/src/components/views/settings/devices/LoginWithQRSection.tsx
+++ b/src/components/views/settings/devices/LoginWithQRSection.tsx
@@ -18,12 +18,11 @@ import {
     DEVICE_CODE_SCOPE,
 } from "matrix-js-sdk/src/matrix";
 import QrCodeIcon from "@vector-im/compound-design-tokens/assets/web/icons/qr-code";
+import { Text } from "@vector-im/compound-web";
 
 import { _t } from "../../../../languageHandler";
 import AccessibleButton from "../../elements/AccessibleButton";
 import SettingsSubsection from "../shared/SettingsSubsection";
-import SettingsStore from "../../../../settings/SettingsStore";
-import { Features } from "../../../../settings/Settings";
 import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext";
 
 interface IProps {
@@ -64,9 +63,8 @@ export function shouldShowQr(
         oidcClientConfig?.metadata?.grant_types_supported.includes(DEVICE_CODE_SCOPE);
 
     return (
-        deviceAuthorizationGrantSupported &&
+        !!deviceAuthorizationGrantSupported &&
         msc4108Supported &&
-        SettingsStore.getValue(Features.OidcNativeFlow) &&
         !!cli.getCrypto()?.exportSecretsBundle &&
         isCrossSigningReady
     );
@@ -85,19 +83,15 @@ const LoginWithQRSection: React.FC<IProps> = ({
         ? shouldShowQr(cli, !!isCrossSigningReady, oidcClientConfig, versions, wellKnown)
         : shouldShowQrLegacy(versions, wellKnown, capabilities);
 
-    // don't show anything if no method is available
-    if (!offerShowQr) {
-        return null;
-    }
-
     return (
         <SettingsSubsection heading={_t("settings|sessions|sign_in_with_qr")}>
             <div className="mx_LoginWithQRSection">
                 <p className="mx_SettingsTab_subsectionText">{_t("settings|sessions|sign_in_with_qr_description")}</p>
-                <AccessibleButton onClick={onShowQr} kind="primary">
+                <AccessibleButton onClick={onShowQr} kind="primary" disabled={!offerShowQr}>
                     <QrCodeIcon height={20} width={20} />
                     {_t("settings|sessions|sign_in_with_qr_button")}
                 </AccessibleButton>
+                {!offerShowQr && <Text size="sm">{_t("settings|sessions|sign_in_with_qr_unsupported")}</Text>}
             </div>
         </SettingsSubsection>
     );
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 77fecde80e..c86520236f 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -283,6 +283,8 @@
             "security_code_prompt": "If asked, enter the code below on your other device.",
             "select_qr_code": "Select \"%(scanQRCode)s\"",
             "sign_in_new_device": "Sign in new device",
+            "unsupported_explainer": "Your account provider doesn't support signing into a new device with a QR code.",
+            "unsupported_heading": "QR code not supported",
             "waiting_for_device": "Waiting for device to sign in"
         },
         "register_action": "Create Account",
@@ -2855,6 +2857,7 @@
             "sign_in_with_qr": "Link new device",
             "sign_in_with_qr_button": "Show QR code",
             "sign_in_with_qr_description": "Use a QR code to sign in to another device and set up secure messaging.",
+            "sign_in_with_qr_unsupported": "Not supported by your account provider",
             "sign_out": "Sign out of this session",
             "sign_out_all_other_sessions": "Sign out of all other sessions (%(otherSessionsCount)s)",
             "sign_out_confirm_description": {
@@ -3829,8 +3832,6 @@
     },
     "user_menu": {
         "link_new_device": "Link new device",
-        "link_new_device_not_supported": "Not supported",
-        "link_new_device_not_supported_caption": "You need to sign in manually",
         "settings": "All settings",
         "switch_theme_dark": "Switch to dark mode",
         "switch_theme_light": "Switch to light mode"
diff --git a/test/components/views/settings/devices/LoginWithQRSection-test.tsx b/test/components/views/settings/devices/LoginWithQRSection-test.tsx
index 2a200ce3f8..6a5e043074 100644
--- a/test/components/views/settings/devices/LoginWithQRSection-test.tsx
+++ b/test/components/views/settings/devices/LoginWithQRSection-test.tsx
@@ -137,19 +137,19 @@ describe("<LoginWithQRSection />", () => {
 
             test("no homeserver support", async () => {
                 const { container } = render(getComponent({ versions: makeVersions({ "org.matrix.msc4108": false }) }));
-                expect(container.textContent).toBe(""); // show nothing
+                expect(container.textContent).toContain("Not supported by your account provider");
             });
 
             test("no support in crypto", async () => {
                 client.getCrypto()!.exportSecretsBundle = undefined;
                 const { container } = render(getComponent({ client }));
-                expect(container.textContent).toBe(""); // show nothing
+                expect(container.textContent).toContain("Not supported by your account provider");
             });
 
             test("failed to connect", async () => {
                 fetchMock.catch(500);
                 const { container } = render(getComponent({ client }));
-                expect(container.textContent).toBe(""); // show nothing
+                expect(container.textContent).toContain("Not supported by your account provider");
             });
         });
     });
diff --git a/test/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap
index ec3bb4a690..9b6d83f4b6 100644
--- a/test/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<LoginWithQRFlow /> errors renders authorization_expired 1`] = `
       >
         <svg
           fill="currentColor"
-          height="1em"
+          height="32px"
           viewBox="0 0 24 24"
           width="32px"
           xmlns="http://www.w3.org/2000/svg"
@@ -56,7 +56,7 @@ exports[`<LoginWithQRFlow /> errors renders check_code_mismatch 1`] = `
       >
         <svg
           fill="currentColor"
-          height="1em"
+          height="32px"
           viewBox="0 0 24 24"
           width="32px"
           xmlns="http://www.w3.org/2000/svg"
@@ -98,7 +98,7 @@ exports[`<LoginWithQRFlow /> errors renders device_already_exists 1`] = `
       >
         <svg
           fill="currentColor"
-          height="1em"
+          height="32px"
           viewBox="0 0 24 24"
           width="32px"
           xmlns="http://www.w3.org/2000/svg"
@@ -140,7 +140,7 @@ exports[`<LoginWithQRFlow /> errors renders device_not_found 1`] = `
       >
         <svg
           fill="currentColor"
-          height="1em"
+          height="32px"
           viewBox="0 0 24 24"
           width="32px"
           xmlns="http://www.w3.org/2000/svg"
@@ -182,7 +182,7 @@ exports[`<LoginWithQRFlow /> errors renders etag_missing 1`] = `
       >
         <svg
           fill="currentColor"
-          height="1em"
+          height="32px"
           viewBox="0 0 24 24"
           width="32px"
           xmlns="http://www.w3.org/2000/svg"
@@ -224,7 +224,7 @@ exports[`<LoginWithQRFlow /> errors renders expired 1`] = `
       >
         <svg
           fill="currentColor"
-          height="1em"
+          height="32px"
           viewBox="0 0 24 24"
           width="32px"
           xmlns="http://www.w3.org/2000/svg"
@@ -266,7 +266,7 @@ exports[`<LoginWithQRFlow /> errors renders expired 2`] = `
       >
         <svg
           fill="currentColor"
-          height="1em"
+          height="32px"
           viewBox="0 0 24 24"
           width="32px"
           xmlns="http://www.w3.org/2000/svg"
@@ -301,32 +301,70 @@ exports[`<LoginWithQRFlow /> errors renders homeserver_lacks_support 1`] = `
     data-testid="login-with-qr"
   >
     <div
-      class="mx_LoginWithQR_main"
+      class="mx_LoginWithQR_heading"
     >
       <div
-        class="mx_LoginWithQR_icon mx_LoginWithQR_icon--critical"
+        aria-label="Back"
+        class="mx_AccessibleButton mx_LoginWithQR_BackButton"
+        data-testid="back-button"
+        role="button"
+        tabindex="0"
       >
         <svg
           fill="currentColor"
           height="1em"
           viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="m13.3 17.3-4.6-4.6a.877.877 0 0 1-.213-.325A1.106 1.106 0 0 1 8.425 12c0-.133.02-.258.062-.375A.878.878 0 0 1 8.7 11.3l4.6-4.6a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7L10.8 12l3.9 3.9a.949.949 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+          />
+        </svg>
+      </div>
+      <div
+        class="mx_LoginWithQR_breadcrumbs"
+      >
+        Sessions
+         / 
+        Link new device
+      </div>
+    </div>
+    <div
+      class="mx_LoginWithQR_main"
+    >
+      <div
+        class="mx_LoginWithQR_icon"
+      >
+        <svg
+          fill="currentColor"
+          height="32px"
+          viewBox="0 0 24 24"
           width="32px"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 15a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 16c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-4c.283 0 .52-.096.713-.287A.968.968 0 0 0 13 12V8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8v4c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 9a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
+            clip-rule="evenodd"
+            d="M3 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm2 5V5h4v4H5Zm-2 5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6Zm2 5v-4h4v4H5Zm9-16a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-6Zm1 2v4h4V5h-4Z"
+            fill-rule="evenodd"
+          />
+          <path
+            d="M15 16v-3h-2v3h2Z"
+          />
+          <path
+            d="M17 16h-2v2h-2v3h2v-3h2v2h4v-2h-2v-5h-2v3Z"
           />
         </svg>
       </div>
       <h1
         class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102"
       >
-        Something went wrong!
+        QR code not supported
       </h1>
       <p
         data-testid="cancellation-message"
       >
-        An unexpected error occurred. The request to connect your other device has been cancelled.
+        Your account provider doesn't support signing into a new device with a QR code.
       </p>
     </div>
     <div
@@ -343,32 +381,70 @@ exports[`<LoginWithQRFlow /> errors renders homeserver_lacks_support 2`] = `
     data-testid="login-with-qr"
   >
     <div
-      class="mx_LoginWithQR_main"
+      class="mx_LoginWithQR_heading"
     >
       <div
-        class="mx_LoginWithQR_icon mx_LoginWithQR_icon--critical"
+        aria-label="Back"
+        class="mx_AccessibleButton mx_LoginWithQR_BackButton"
+        data-testid="back-button"
+        role="button"
+        tabindex="0"
       >
         <svg
           fill="currentColor"
           height="1em"
           viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="m13.3 17.3-4.6-4.6a.877.877 0 0 1-.213-.325A1.106 1.106 0 0 1 8.425 12c0-.133.02-.258.062-.375A.878.878 0 0 1 8.7 11.3l4.6-4.6a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7L10.8 12l3.9 3.9a.949.949 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+          />
+        </svg>
+      </div>
+      <div
+        class="mx_LoginWithQR_breadcrumbs"
+      >
+        Sessions
+         / 
+        Link new device
+      </div>
+    </div>
+    <div
+      class="mx_LoginWithQR_main"
+    >
+      <div
+        class="mx_LoginWithQR_icon"
+      >
+        <svg
+          fill="currentColor"
+          height="32px"
+          viewBox="0 0 24 24"
           width="32px"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 15a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 16c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-4c.283 0 .52-.096.713-.287A.968.968 0 0 0 13 12V8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8v4c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 9a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
+            clip-rule="evenodd"
+            d="M3 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm2 5V5h4v4H5Zm-2 5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6Zm2 5v-4h4v4H5Zm9-16a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-6Zm1 2v4h4V5h-4Z"
+            fill-rule="evenodd"
+          />
+          <path
+            d="M15 16v-3h-2v3h2Z"
+          />
+          <path
+            d="M17 16h-2v2h-2v3h2v-3h2v2h4v-2h-2v-5h-2v3Z"
           />
         </svg>
       </div>
       <h1
         class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102"
       >
-        Something went wrong!
+        QR code not supported
       </h1>
       <p
         data-testid="cancellation-message"
       >
-        An unexpected error occurred. The request to connect your other device has been cancelled.
+        Your account provider doesn't support signing into a new device with a QR code.
       </p>
     </div>
     <div
@@ -392,7 +468,7 @@ exports[`<LoginWithQRFlow /> errors renders insecure_channel_detected 1`] = `
       >
         <svg
           fill="currentColor"
-          height="1em"
+          height="32px"
           viewBox="0 0 24 24"
           width="32px"
           xmlns="http://www.w3.org/2000/svg"
@@ -447,7 +523,7 @@ exports[`<LoginWithQRFlow /> errors renders invalid_code 1`] = `
       >
         <svg
           fill="currentColor"
-          height="1em"
+          height="32px"
           viewBox="0 0 24 24"
           width="32px"
           xmlns="http://www.w3.org/2000/svg"
@@ -485,11 +561,11 @@ exports[`<LoginWithQRFlow /> errors renders other_device_already_signed_in 1`] =
       class="mx_LoginWithQR_main"
     >
       <div
-        class="mx_LoginWithQR_icon"
+        class="mx_LoginWithQR_icon mx_LoginWithQR_icon--success"
       >
         <svg
           fill="currentColor"
-          height="1em"
+          height="32px"
           viewBox="0 0 24 24"
           width="32px"
           xmlns="http://www.w3.org/2000/svg"
@@ -531,7 +607,7 @@ exports[`<LoginWithQRFlow /> errors renders other_device_not_signed_in 1`] = `
       >
         <svg
           fill="currentColor"
-          height="1em"
+          height="32px"
           viewBox="0 0 24 24"
           width="32px"
           xmlns="http://www.w3.org/2000/svg"
@@ -573,7 +649,7 @@ exports[`<LoginWithQRFlow /> errors renders rate_limited 1`] = `
       >
         <svg
           fill="currentColor"
-          height="1em"
+          height="32px"
           viewBox="0 0 24 24"
           width="32px"
           xmlns="http://www.w3.org/2000/svg"
@@ -615,7 +691,7 @@ exports[`<LoginWithQRFlow /> errors renders unexpected_message_received 1`] = `
       >
         <svg
           fill="currentColor"
-          height="1em"
+          height="32px"
           viewBox="0 0 24 24"
           width="32px"
           xmlns="http://www.w3.org/2000/svg"
@@ -657,7 +733,7 @@ exports[`<LoginWithQRFlow /> errors renders unknown 1`] = `
       >
         <svg
           fill="currentColor"
-          height="1em"
+          height="32px"
           viewBox="0 0 24 24"
           width="32px"
           xmlns="http://www.w3.org/2000/svg"
@@ -699,7 +775,7 @@ exports[`<LoginWithQRFlow /> errors renders unknown 2`] = `
       >
         <svg
           fill="currentColor"
-          height="1em"
+          height="32px"
           viewBox="0 0 24 24"
           width="32px"
           xmlns="http://www.w3.org/2000/svg"
@@ -741,7 +817,7 @@ exports[`<LoginWithQRFlow /> errors renders unsupported_algorithm 1`] = `
       >
         <svg
           fill="currentColor"
-          height="1em"
+          height="32px"
           viewBox="0 0 24 24"
           width="32px"
           xmlns="http://www.w3.org/2000/svg"
@@ -783,7 +859,7 @@ exports[`<LoginWithQRFlow /> errors renders unsupported_protocol 1`] = `
       >
         <svg
           fill="currentColor"
-          height="1em"
+          height="32px"
           viewBox="0 0 24 24"
           width="32px"
           xmlns="http://www.w3.org/2000/svg"
@@ -825,7 +901,7 @@ exports[`<LoginWithQRFlow /> errors renders unsupported_protocol 2`] = `
       >
         <svg
           fill="currentColor"
-          height="1em"
+          height="32px"
           viewBox="0 0 24 24"
           width="32px"
           xmlns="http://www.w3.org/2000/svg"
@@ -867,7 +943,7 @@ exports[`<LoginWithQRFlow /> errors renders user_cancelled 1`] = `
       >
         <svg
           fill="currentColor"
-          height="1em"
+          height="32px"
           viewBox="0 0 24 24"
           width="32px"
           xmlns="http://www.w3.org/2000/svg"
@@ -909,7 +985,7 @@ exports[`<LoginWithQRFlow /> errors renders user_cancelled 2`] = `
       >
         <svg
           fill="currentColor"
-          height="1em"
+          height="32px"
           viewBox="0 0 24 24"
           width="32px"
           xmlns="http://www.w3.org/2000/svg"
@@ -951,7 +1027,7 @@ exports[`<LoginWithQRFlow /> errors renders user_declined 1`] = `
       >
         <svg
           fill="currentColor"
-          height="1em"
+          height="32px"
           viewBox="0 0 24 24"
           width="32px"
           xmlns="http://www.w3.org/2000/svg"
@@ -993,7 +1069,7 @@ exports[`<LoginWithQRFlow /> errors renders user_declined 2`] = `
       >
         <svg
           fill="currentColor"
-          height="1em"
+          height="32px"
           viewBox="0 0 24 24"
           width="32px"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/test/components/views/settings/devices/__snapshots__/LoginWithQRSection-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/LoginWithQRSection-test.tsx.snap
index d24d7d1550..b84129e3a5 100644
--- a/test/components/views/settings/devices/__snapshots__/LoginWithQRSection-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/LoginWithQRSection-test.tsx.snap
@@ -1,10 +1,196 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<LoginWithQRSection /> MSC3906 should not render MSC3886 + get_login_token disabled 1`] = `<div />`;
+exports[`<LoginWithQRSection /> MSC3906 should not render MSC3886 + get_login_token disabled 1`] = `
+<div>
+  <div
+    class="mx_SettingsSubsection"
+  >
+    <div
+      class="mx_SettingsSubsectionHeading"
+    >
+      <h3
+        class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
+      >
+        Link new device
+      </h3>
+    </div>
+    <div
+      class="mx_SettingsSubsection_content"
+    >
+      <div
+        class="mx_LoginWithQRSection"
+      >
+        <p
+          class="mx_SettingsTab_subsectionText"
+        >
+          Use a QR code to sign in to another device and set up secure messaging.
+        </p>
+        <div
+          aria-disabled="true"
+          class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary mx_AccessibleButton_disabled"
+          disabled=""
+          role="button"
+          tabindex="0"
+        >
+          <svg
+            fill="currentColor"
+            height="20"
+            viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M3 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm2 5V5h4v4H5Zm-2 5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6Zm2 5v-4h4v4H5Zm9-16a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-6Zm1 2v4h4V5h-4Z"
+              fill-rule="evenodd"
+            />
+            <path
+              d="M15 16v-3h-2v3h2Z"
+            />
+            <path
+              d="M17 16h-2v2h-2v3h2v-3h2v2h4v-2h-2v-5h-2v3Z"
+            />
+          </svg>
+          Show QR code
+        </div>
+        <p
+          class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
+        >
+          Not supported by your account provider
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;
 
-exports[`<LoginWithQRSection /> MSC3906 should not render no support at all 1`] = `<div />`;
+exports[`<LoginWithQRSection /> MSC3906 should not render no support at all 1`] = `
+<div>
+  <div
+    class="mx_SettingsSubsection"
+  >
+    <div
+      class="mx_SettingsSubsectionHeading"
+    >
+      <h3
+        class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
+      >
+        Link new device
+      </h3>
+    </div>
+    <div
+      class="mx_SettingsSubsection_content"
+    >
+      <div
+        class="mx_LoginWithQRSection"
+      >
+        <p
+          class="mx_SettingsTab_subsectionText"
+        >
+          Use a QR code to sign in to another device and set up secure messaging.
+        </p>
+        <div
+          aria-disabled="true"
+          class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary mx_AccessibleButton_disabled"
+          disabled=""
+          role="button"
+          tabindex="0"
+        >
+          <svg
+            fill="currentColor"
+            height="20"
+            viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M3 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm2 5V5h4v4H5Zm-2 5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6Zm2 5v-4h4v4H5Zm9-16a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-6Zm1 2v4h4V5h-4Z"
+              fill-rule="evenodd"
+            />
+            <path
+              d="M15 16v-3h-2v3h2Z"
+            />
+            <path
+              d="M17 16h-2v2h-2v3h2v-3h2v2h4v-2h-2v-5h-2v3Z"
+            />
+          </svg>
+          Show QR code
+        </div>
+        <p
+          class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
+        >
+          Not supported by your account provider
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;
 
-exports[`<LoginWithQRSection /> MSC3906 should not render only get_login_token enabled 1`] = `<div />`;
+exports[`<LoginWithQRSection /> MSC3906 should not render only get_login_token enabled 1`] = `
+<div>
+  <div
+    class="mx_SettingsSubsection"
+  >
+    <div
+      class="mx_SettingsSubsectionHeading"
+    >
+      <h3
+        class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
+      >
+        Link new device
+      </h3>
+    </div>
+    <div
+      class="mx_SettingsSubsection_content"
+    >
+      <div
+        class="mx_LoginWithQRSection"
+      >
+        <p
+          class="mx_SettingsTab_subsectionText"
+        >
+          Use a QR code to sign in to another device and set up secure messaging.
+        </p>
+        <div
+          aria-disabled="true"
+          class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary mx_AccessibleButton_disabled"
+          disabled=""
+          role="button"
+          tabindex="0"
+        >
+          <svg
+            fill="currentColor"
+            height="20"
+            viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M3 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm2 5V5h4v4H5Zm-2 5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6Zm2 5v-4h4v4H5Zm9-16a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-6Zm1 2v4h4V5h-4Z"
+              fill-rule="evenodd"
+            />
+            <path
+              d="M15 16v-3h-2v3h2Z"
+            />
+            <path
+              d="M17 16h-2v2h-2v3h2v-3h2v2h4v-2h-2v-5h-2v3Z"
+            />
+          </svg>
+          Show QR code
+        </div>
+        <p
+          class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
+        >
+          Not supported by your account provider
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;
 
 exports[`<LoginWithQRSection /> MSC3906 should render panel get_login_token + .well-known 1`] = `
 <div>