diff --git a/res/css/_common.pcss b/res/css/_common.pcss
index 74328af39b2..9964ec8e508 100644
--- a/res/css/_common.pcss
+++ b/res/css/_common.pcss
@@ -596,7 +596,9 @@ legend {
 .mx_Dialog
     button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
         .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button),
+    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(
+        .mx_EncryptionUserSettingsTab button
+    ),
 .mx_Dialog input[type="submit"],
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
 .mx_Dialog_buttons input[type="submit"] {
@@ -616,8 +618,8 @@ legend {
 .mx_Dialog
     button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
         .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(
-        .mx_ShareDialog button
+    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(
+        .mx_EncryptionUserSettingsTab button
     ):last-child {
     margin-right: 0px;
 }
@@ -625,7 +627,9 @@ legend {
 .mx_Dialog
     button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
         .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):focus,
+    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(
+        .mx_EncryptionUserSettingsTab button
+    ):focus,
 .mx_Dialog input[type="submit"]:focus,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):focus,
 .mx_Dialog_buttons input[type="submit"]:focus {
@@ -637,7 +641,9 @@ legend {
 .mx_Dialog_buttons
     button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(
         .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button),
+    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(
+        .mx_EncryptionUserSettingsTab button
+    ),
 .mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
     color: var(--cpd-color-text-on-solid-primary);
     background-color: var(--cpd-color-bg-action-primary-rest);
@@ -650,7 +656,7 @@ legend {
 .mx_Dialog_buttons
     button.danger:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(.mx_UserProfileSettings button):not(
         .mx_ThemeChoicePanel_CustomTheme button
-    ):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button),
+    ):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(.mx_EncryptionUserSettingsTab button),
 .mx_Dialog_buttons input[type="submit"].danger {
     background-color: var(--cpd-color-bg-critical-primary);
     border: solid 1px var(--cpd-color-bg-critical-primary);
@@ -666,7 +672,9 @@ legend {
 .mx_Dialog
     button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
         .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):disabled,
+    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(
+        .mx_EncryptionUserSettingsTab button
+    ):disabled,
 .mx_Dialog input[type="submit"]:disabled,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):disabled,
 .mx_Dialog_buttons input[type="submit"]:disabled {
diff --git a/res/css/_components.pcss b/res/css/_components.pcss
index 7426f407990..0887059e323 100644
--- a/res/css/_components.pcss
+++ b/res/css/_components.pcss
@@ -351,6 +351,7 @@
 @import "./views/settings/_ThemeChoicePanel.pcss";
 @import "./views/settings/_UpdateCheckButton.pcss";
 @import "./views/settings/_UserProfileSettings.pcss";
+@import "./views/settings/encryption/_RecoveryPanel.pcss";
 @import "./views/settings/tabs/_SettingsBanner.pcss";
 @import "./views/settings/tabs/_SettingsIndent.pcss";
 @import "./views/settings/tabs/_SettingsSection.pcss";
diff --git a/res/css/views/settings/encryption/_RecoveryPanel.pcss b/res/css/views/settings/encryption/_RecoveryPanel.pcss
new file mode 100644
index 00000000000..0ecc51187d4
--- /dev/null
+++ b/res/css/views/settings/encryption/_RecoveryPanel.pcss
@@ -0,0 +1,22 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.mx_RecoveryPanel {
+    .mx_RecoveryPanel_Subheader {
+        display: flex;
+        flex-direction: column;
+        gap: var(--cpd-space-2x);
+
+        > span {
+            display: flex;
+            align-items: center;
+            gap: var(--cpd-space-2x);
+            font: var(--cpd-font-body-sm-medium);
+            color: var(--cpd-color-text-success-primary);
+        }
+    }
+}
diff --git a/src/components/views/settings/encryption/RecoveryPanel.tsx b/src/components/views/settings/encryption/RecoveryPanel.tsx
new file mode 100644
index 00000000000..a125d7eb865
--- /dev/null
+++ b/src/components/views/settings/encryption/RecoveryPanel.tsx
@@ -0,0 +1,85 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { JSX, useEffect, useState } from "react";
+import { Button, InlineSpinner } from "@vector-im/compound-web";
+import KeyIcon from "@vector-im/compound-design-tokens/assets/web/icons/key";
+import CheckCircleIcon from "@vector-im/compound-design-tokens/assets/web/icons/check-circle-solid";
+
+import { SettingsSection } from "../shared/SettingsSection.tsx";
+import { _t } from "../../../../languageHandler.tsx";
+import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext.tsx";
+import { SettingsHeader } from "../SettingsHeader.tsx";
+
+/**
+ * This component allows the user to set up or change their recovery key.
+ */
+export function RecoveryPanel(): JSX.Element {
+    const [hasRecoveryKey, setHasRecoveryKey] = useState<boolean | null>(null);
+    const isLoading = hasRecoveryKey === null;
+    const matrixClient = useMatrixClientContext();
+
+    useEffect(() => {
+        const getRecoveryKey = async (): Promise<void> =>
+            setHasRecoveryKey(Boolean(await matrixClient.getCrypto()?.getKeyBackupInfo()));
+        getRecoveryKey();
+    }, [matrixClient]);
+
+    return (
+        <SettingsSection
+            legacy={false}
+            heading={
+                <SettingsHeader
+                    hasRecommendedTag={!isLoading && !hasRecoveryKey}
+                    label={_t("settings|encryption|recovery_title")}
+                />
+            }
+            subHeading={<Subheader hasRecoveryKey={hasRecoveryKey} />}
+            className="mx_RecoveryPanel"
+        >
+            {isLoading && <InlineSpinner />}
+            {!isLoading && (
+                <>
+                    {hasRecoveryKey ? (
+                        <Button size="sm" kind="secondary" Icon={KeyIcon}>
+                            {_t("settings|encryption|recovery_change_recovery_key")}
+                        </Button>
+                    ) : (
+                        <Button size="sm" kind="primary" Icon={KeyIcon}>
+                            {_t("settings|encryption|recovery_set_up_recovery")}
+                        </Button>
+                    )}
+                </>
+            )}
+        </SettingsSection>
+    );
+}
+
+/**
+ * The subheader for the recovery panel.
+ */
+interface SubheaderProps {
+    /**
+     * Whether the user has a recovery key.
+     * If null, the recovery key is still fetching.
+     */
+    hasRecoveryKey: boolean | null;
+}
+
+function Subheader({ hasRecoveryKey }: SubheaderProps): JSX.Element {
+    if (!hasRecoveryKey) return <>{_t("settings|encryption|recovery_description")}</>;
+
+    return (
+        <div className="mx_RecoveryPanel_Subheader">
+            {_t("settings|encryption|recovery_description")}
+            <span>
+                <CheckCircleIcon width="20" height="20" />
+                {_t("settings|encryption|recovery_key_active")}
+            </span>
+        </div>
+    );
+}
diff --git a/src/components/views/settings/tabs/user/EncryptionUserSettingsTab.tsx b/src/components/views/settings/tabs/user/EncryptionUserSettingsTab.tsx
index 7964f2641ae..0cbf4e539b5 100644
--- a/src/components/views/settings/tabs/user/EncryptionUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/EncryptionUserSettingsTab.tsx
@@ -8,7 +8,12 @@
 import React, { JSX } from "react";
 
 import SettingsTab from "../SettingsTab";
+import { RecoveryPanel } from "../../encryption/RecoveryPanel.tsx";
 
 export function EncryptionUserSettingsTab(): JSX.Element {
-    return <SettingsTab />;
+    return (
+        <SettingsTab className="mx_EncryptionUserSettingsTab">
+            <RecoveryPanel />
+        </SettingsTab>
+    );
 }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index ffdbddb6df8..020396c9383 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2464,6 +2464,11 @@
         "enable_markdown_description": "Start messages with <code>/plain</code> to send without markdown.",
         "encryption": {
             "dialog_title": "<strong>Settings:</strong> Encryption",
+            "recovery_change_recovery_key": "Change recovery key",
+            "recovery_description": "Recover your cryptographic identity and message history with a recovery key if you’ve lost all your existing devices.",
+            "recovery_key_active": "Recovery key active",
+            "recovery_set_up_recovery": "Set up recovery",
+            "recovery_title": "Recovery",
             "title": "Encryption"
         },
         "general": {