diff --git a/res/css/views/settings/encryption/_AdvancedPanel.pcss b/res/css/views/settings/encryption/_AdvancedPanel.pcss
index 46cccac5d44..d99afe016a1 100644
--- a/res/css/views/settings/encryption/_AdvancedPanel.pcss
+++ b/res/css/views/settings/encryption/_AdvancedPanel.pcss
@@ -5,25 +5,30 @@
* Please see LICENSE files in the repository root for full details.
*/
-.mx_AdvancedPanel_Details {
+.mx_AdvancedPanel_Details,
+.mx_OtherSettings {
display: flex;
flex-direction: column;
gap: var(--cpd-space-6x);
width: 100%;
align-items: start;
+ .mx_AdvancedPanel_Details_title,
+ .mx_OtherSettings_title {
+ font: var(--cpd-font-body-lg-semibold);
+ padding-bottom: var(--cpd-space-2x);
+ border-bottom: 1px solid var(--cpd-color-gray-400);
+ width: 100%;
+ }
+}
+
+.mx_AdvancedPanel_Details {
.mx_AdvancedPanel_Details_content {
display: flex;
flex-direction: column;
gap: var(--cpd-space-4x);
width: 100%;
- > span {
- font: var(--cpd-font-body-lg-semibold);
- padding-bottom: var(--cpd-space-2x);
- border-bottom: 1px solid var(--cpd-color-gray-400);
- }
-
> div {
display: flex;
diff --git a/src/components/views/settings/encryption/AdvancedPanel.tsx b/src/components/views/settings/encryption/AdvancedPanel.tsx
index 96b3031b3b5..8480db4d66b 100644
--- a/src/components/views/settings/encryption/AdvancedPanel.tsx
+++ b/src/components/views/settings/encryption/AdvancedPanel.tsx
@@ -6,7 +6,7 @@
*/
import React, { JSX, lazy, MouseEventHandler } from "react";
-import { Button, InlineSpinner } from "@vector-im/compound-web";
+import { Button, HelpMessage, InlineField, InlineSpinner, Label, Root, ToggleControl } from "@vector-im/compound-web";
import DownloadIcon from "@vector-im/compound-design-tokens/assets/web/icons/download";
import ShareIcon from "@vector-im/compound-design-tokens/assets/web/icons/share";
@@ -15,6 +15,9 @@ import { SettingsSection } from "../shared/SettingsSection";
import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext";
import { useAsyncMemo } from "../../../../hooks/useAsyncMemo";
import Modal from "../../../../Modal";
+import { SettingLevel } from "../../../../settings/SettingLevel";
+import { useSettingValueAt } from "../../../../hooks/useSettings";
+import SettingsStore from "../../../../settings/SettingsStore";
interface AdvancedPanelProps {
/**
@@ -30,6 +33,7 @@ export function AdvancedPanel({ onResetIdentityClick }: AdvancedPanelProps): JSX
return (