diff --git a/res/css/views/settings/tabs/_SettingsTab.pcss b/res/css/views/settings/tabs/_SettingsTab.pcss
index 4f240109c18..fac189e8587 100644
--- a/res/css/views/settings/tabs/_SettingsTab.pcss
+++ b/res/css/views/settings/tabs/_SettingsTab.pcss
@@ -103,5 +103,5 @@ limitations under the License.
     grid-template-columns: 1fr;
     grid-gap: $spacing-32;
 
-    padding: $spacing-16 0;
+    padding-bottom: $spacing-16;
 }
diff --git a/res/css/views/settings/tabs/room/_RolesRoomSettingsTab.pcss b/res/css/views/settings/tabs/room/_RolesRoomSettingsTab.pcss
index 5d0a8ed1423..ce8dff9f0c2 100644
--- a/res/css/views/settings/tabs/room/_RolesRoomSettingsTab.pcss
+++ b/res/css/views/settings/tabs/room/_RolesRoomSettingsTab.pcss
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_RolesRoomSettingsTab ul {
+.mx_RolesRoomSettingsTab_bannedList {
     margin-bottom: 0;
 }
 
diff --git a/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.pcss b/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.pcss
index cf3e16bc044..339b5d2590e 100644
--- a/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.pcss
+++ b/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.pcss
@@ -14,14 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_SecurityRoomSettingsTab {
-    .mx_SettingsTab_showAdvanced {
-        margin-bottom: $spacing-16;
-    }
+.mx_SecurityRoomSettingsTab_advancedSection {
+    margin-top: $spacing-16;
+}
 
-    .mx_SecurityRoomSettingsTab_warning {
-        display: flex;
-        align-items: center;
-        column-gap: $spacing-4;
-    }
+.mx_SecurityRoomSettingsTab_warning {
+    display: flex;
+    align-items: center;
+    column-gap: $spacing-4;
 }
diff --git a/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx
index e8ce957c3b5..a7068ea1cfa 100644
--- a/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx
+++ b/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx
@@ -27,6 +27,9 @@ import { Action } from "../../../../../dispatcher/actions";
 import CopyableText from "../../../elements/CopyableText";
 import { ViewRoomPayload } from "../../../../../dispatcher/payloads/ViewRoomPayload";
 import SettingsStore from "../../../../../settings/SettingsStore";
+import SettingsTab from "../SettingsTab";
+import { SettingsSection } from "../../shared/SettingsSection";
+import SettingsSubsection from "../../shared/SettingsSubsection";
 
 interface IProps {
     room: Room;
@@ -154,30 +157,27 @@ export default class AdvancedRoomSettingsTab extends React.Component<IProps, ISt
         }
 
         return (
-            <div className="mx_SettingsTab">
-                <div className="mx_SettingsTab_heading">{_t("Advanced")}</div>
-                <div className="mx_SettingsTab_section mx_SettingsTab_subsectionText">
-                    <span className="mx_SettingsTab_subheading">
-                        {room.isSpaceRoom() ? _t("Space information") : _t("Room information")}
-                    </span>
-                    <div>
-                        <span>{_t("Internal room ID")}</span>
-                        <CopyableText getTextToCopy={() => this.props.room.roomId}>
-                            {this.props.room.roomId}
-                        </CopyableText>
-                    </div>
-                    {unfederatableSection}
-                </div>
-                <div className="mx_SettingsTab_section mx_SettingsTab_subsectionText">
-                    <span className="mx_SettingsTab_subheading">{_t("Room version")}</span>
-                    <div>
-                        <span>{_t("Room version:")}</span>&nbsp;
-                        {room.getVersion()}
-                    </div>
-                    {oldRoomLink}
-                    {roomUpgradeButton}
-                </div>
-            </div>
+            <SettingsTab>
+                <SettingsSection heading={_t("Advanced")}>
+                    <SettingsSubsection heading={room.isSpaceRoom() ? _t("Space information") : _t("Room information")}>
+                        <div>
+                            <span>{_t("Internal room ID")}</span>
+                            <CopyableText getTextToCopy={() => this.props.room.roomId}>
+                                {this.props.room.roomId}
+                            </CopyableText>
+                        </div>
+                        {unfederatableSection}
+                    </SettingsSubsection>
+                    <SettingsSubsection heading={_t("Room version")}>
+                        <div>
+                            <span>{_t("Room version:")}</span>&nbsp;
+                            {room.getVersion()}
+                        </div>
+                        {oldRoomLink}
+                        {roomUpgradeButton}
+                    </SettingsSubsection>
+                </SettingsSection>
+            </SettingsTab>
         );
     }
 }
diff --git a/src/components/views/settings/tabs/room/BridgeSettingsTab.tsx b/src/components/views/settings/tabs/room/BridgeSettingsTab.tsx
index 8731cee0a6a..04b75cb4cc6 100644
--- a/src/components/views/settings/tabs/room/BridgeSettingsTab.tsx
+++ b/src/components/views/settings/tabs/room/BridgeSettingsTab.tsx
@@ -21,6 +21,8 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { _t } from "../../../../../languageHandler";
 import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
 import BridgeTile from "../../BridgeTile";
+import SettingsTab from "../SettingsTab";
+import { SettingsSection } from "../../shared/SettingsSection";
 
 const BRIDGE_EVENT_TYPES = [
     "uk.half-shot.bridge",
@@ -99,10 +101,9 @@ export default class BridgeSettingsTab extends React.Component<IProps> {
         }
 
         return (
-            <div className="mx_SettingsTab">
-                <div className="mx_SettingsTab_heading">{_t("Bridges")}</div>
-                <div className="mx_SettingsTab_section mx_SettingsTab_subsectionText">{content}</div>
-            </div>
+            <SettingsTab>
+                <SettingsSection heading={_t("Bridges")}>{content}</SettingsSection>
+            </SettingsTab>
         );
     }
 }
diff --git a/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.tsx
index a915aa42e38..cc8db528a12 100644
--- a/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.tsx
+++ b/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.tsx
@@ -27,6 +27,9 @@ import { UIFeature } from "../../../../../settings/UIFeature";
 import UrlPreviewSettings from "../../../room_settings/UrlPreviewSettings";
 import AliasSettings from "../../../room_settings/AliasSettings";
 import PosthogTrackers from "../../../../../PosthogTrackers";
+import SettingsSubsection from "../../shared/SettingsSubsection";
+import SettingsTab from "../SettingsTab";
+import { SettingsSection } from "../../shared/SettingsSection";
 
 interface IProps {
     room: Room;
@@ -72,35 +75,36 @@ export default class GeneralRoomSettingsTab extends React.Component<IProps, ISta
         let leaveSection;
         if (room.getMyMembership() === "join") {
             leaveSection = (
-                <>
-                    <span className="mx_SettingsTab_subheading">{_t("Leave room")}</span>
-                    <div className="mx_SettingsTab_section">
-                        <AccessibleButton kind="danger" onClick={this.onLeaveClick}>
-                            {_t("Leave room")}
-                        </AccessibleButton>
-                    </div>
-                </>
+                <SettingsSubsection heading={_t("Leave room")}>
+                    <AccessibleButton kind="danger" onClick={this.onLeaveClick}>
+                        {_t("Leave room")}
+                    </AccessibleButton>
+                </SettingsSubsection>
             );
         }
 
         return (
-            <div className="mx_SettingsTab mx_GeneralRoomSettingsTab">
-                <div className="mx_SettingsTab_heading">{_t("General")}</div>
-                <div className="mx_SettingsTab_section mx_GeneralRoomSettingsTab_profileSection">
-                    <RoomProfileSettings roomId={room.roomId} />
-                </div>
-
-                <div className="mx_SettingsTab_heading">{_t("Room Addresses")}</div>
-                <AliasSettings
-                    roomId={room.roomId}
-                    canSetCanonicalAlias={canSetCanonical}
-                    canSetAliases={canSetAliases}
-                    canonicalAliasEvent={canonicalAliasEv}
-                />
-                <div className="mx_SettingsTab_heading">{_t("Other")}</div>
-                {urlPreviewSettings}
-                {leaveSection}
-            </div>
+            <SettingsTab>
+                <SettingsSection heading={_t("General")}>
+                    <div className="mx_SettingsTab_section mx_GeneralRoomSettingsTab_profileSection">
+                        <RoomProfileSettings roomId={room.roomId} />
+                    </div>
+                </SettingsSection>
+
+                <SettingsSection heading={_t("Room Addresses")}>
+                    <AliasSettings
+                        roomId={room.roomId}
+                        canSetCanonicalAlias={canSetCanonical}
+                        canSetAliases={canSetAliases}
+                        canonicalAliasEvent={canonicalAliasEv}
+                    />
+                </SettingsSection>
+
+                <SettingsSection heading={_t("Other")}>
+                    {urlPreviewSettings}
+                    {leaveSection}
+                </SettingsSection>
+            </SettingsTab>
         );
     }
 }
diff --git a/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx b/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx
index d8232210fa8..f1304d44ed7 100644
--- a/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx
+++ b/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx
@@ -32,6 +32,9 @@ import defaultDispatcher from "../../../../../dispatcher/dispatcher";
 import { Action } from "../../../../../dispatcher/actions";
 import { UserTab } from "../../../dialogs/UserTab";
 import { chromeFileInputFix } from "../../../../../utils/BrowserWorkarounds";
+import SettingsTab from "../SettingsTab";
+import { SettingsSection } from "../../shared/SettingsSection";
+import SettingsSubsection from "../../shared/SettingsSubsection";
 
 interface IProps {
     roomId: string;
@@ -168,149 +171,148 @@ export default class NotificationsSettingsTab extends React.Component<IProps, IS
         }
 
         return (
-            <div className="mx_SettingsTab">
-                <div className="mx_SettingsTab_heading">{_t("Notifications")}</div>
-
-                <div className="mx_SettingsTab_section mx_NotificationSettingsTab_notificationsSection">
-                    <StyledRadioGroup
-                        name="roomNotificationSetting"
-                        definitions={[
-                            {
-                                value: RoomNotifState.AllMessages,
-                                className: "mx_NotificationSettingsTab_defaultEntry",
-                                label: (
-                                    <>
-                                        {_t("Default")}
-                                        <div className="mx_NotificationSettingsTab_microCopy">
-                                            {_t(
-                                                "Get notifications as set up in your <a>settings</a>",
-                                                {},
-                                                {
-                                                    a: (sub) => (
-                                                        <AccessibleButton
-                                                            kind="link_inline"
-                                                            onClick={this.onOpenSettingsClick}
-                                                        >
-                                                            {sub}
-                                                        </AccessibleButton>
-                                                    ),
-                                                },
-                                            )}
-                                        </div>
-                                    </>
-                                ),
-                            },
-                            {
-                                value: RoomNotifState.AllMessagesLoud,
-                                className: "mx_NotificationSettingsTab_allMessagesEntry",
-                                label: (
-                                    <>
-                                        {_t("All messages")}
-                                        <div className="mx_NotificationSettingsTab_microCopy">
-                                            {_t("Get notified for every message")}
-                                        </div>
-                                    </>
-                                ),
-                            },
-                            {
-                                value: RoomNotifState.MentionsOnly,
-                                className: "mx_NotificationSettingsTab_mentionsKeywordsEntry",
-                                label: (
-                                    <>
-                                        {_t("@mentions & keywords")}
-                                        <div className="mx_NotificationSettingsTab_microCopy">
-                                            {_t(
-                                                "Get notified only with mentions and keywords " +
-                                                    "as set up in your <a>settings</a>",
-                                                {},
-                                                {
-                                                    a: (sub) => (
-                                                        <AccessibleButton
-                                                            kind="link_inline"
-                                                            onClick={this.onOpenSettingsClick}
-                                                        >
-                                                            {sub}
-                                                        </AccessibleButton>
-                                                    ),
-                                                },
-                                            )}
-                                        </div>
-                                    </>
-                                ),
-                            },
-                            {
-                                value: RoomNotifState.Mute,
-                                className: "mx_NotificationSettingsTab_noneEntry",
-                                label: (
-                                    <>
-                                        {_t("Off")}
-                                        <div className="mx_NotificationSettingsTab_microCopy">
-                                            {_t("You won't get any notifications")}
-                                        </div>
-                                    </>
-                                ),
-                            },
-                        ]}
-                        onChange={this.onRoomNotificationChange}
-                        value={this.roomProps.notificationVolume}
-                    />
-                </div>
+            <SettingsTab>
+                <SettingsSection heading={_t("Notifications")}>
+                    <div className="mx_NotificationSettingsTab_notificationsSection">
+                        <StyledRadioGroup
+                            name="roomNotificationSetting"
+                            definitions={[
+                                {
+                                    value: RoomNotifState.AllMessages,
+                                    className: "mx_NotificationSettingsTab_defaultEntry",
+                                    label: (
+                                        <>
+                                            {_t("Default")}
+                                            <div className="mx_NotificationSettingsTab_microCopy">
+                                                {_t(
+                                                    "Get notifications as set up in your <a>settings</a>",
+                                                    {},
+                                                    {
+                                                        a: (sub) => (
+                                                            <AccessibleButton
+                                                                kind="link_inline"
+                                                                onClick={this.onOpenSettingsClick}
+                                                            >
+                                                                {sub}
+                                                            </AccessibleButton>
+                                                        ),
+                                                    },
+                                                )}
+                                            </div>
+                                        </>
+                                    ),
+                                },
+                                {
+                                    value: RoomNotifState.AllMessagesLoud,
+                                    className: "mx_NotificationSettingsTab_allMessagesEntry",
+                                    label: (
+                                        <>
+                                            {_t("All messages")}
+                                            <div className="mx_NotificationSettingsTab_microCopy">
+                                                {_t("Get notified for every message")}
+                                            </div>
+                                        </>
+                                    ),
+                                },
+                                {
+                                    value: RoomNotifState.MentionsOnly,
+                                    className: "mx_NotificationSettingsTab_mentionsKeywordsEntry",
+                                    label: (
+                                        <>
+                                            {_t("@mentions & keywords")}
+                                            <div className="mx_NotificationSettingsTab_microCopy">
+                                                {_t(
+                                                    "Get notified only with mentions and keywords " +
+                                                        "as set up in your <a>settings</a>",
+                                                    {},
+                                                    {
+                                                        a: (sub) => (
+                                                            <AccessibleButton
+                                                                kind="link_inline"
+                                                                onClick={this.onOpenSettingsClick}
+                                                            >
+                                                                {sub}
+                                                            </AccessibleButton>
+                                                        ),
+                                                    },
+                                                )}
+                                            </div>
+                                        </>
+                                    ),
+                                },
+                                {
+                                    value: RoomNotifState.Mute,
+                                    className: "mx_NotificationSettingsTab_noneEntry",
+                                    label: (
+                                        <>
+                                            {_t("Off")}
+                                            <div className="mx_NotificationSettingsTab_microCopy">
+                                                {_t("You won't get any notifications")}
+                                            </div>
+                                        </>
+                                    ),
+                                },
+                            ]}
+                            onChange={this.onRoomNotificationChange}
+                            value={this.roomProps.notificationVolume}
+                        />
+                    </div>
 
-                <div className="mx_SettingsTab_section mx_SettingsTab_subsectionText">
-                    <span className="mx_SettingsTab_subheading">{_t("Sounds")}</span>
-                    <div>
-                        <div className="mx_SettingsTab_subsectionText">
-                            <span>
-                                {_t("Notification sound")}: <code>{this.state.currentSound}</code>
-                            </span>
+                    <SettingsSubsection heading={_t("Sounds")}>
+                        <div>
+                            <div className="mx_SettingsTab_subsectionText">
+                                <span>
+                                    {_t("Notification sound")}: <code>{this.state.currentSound}</code>
+                                </span>
+                            </div>
+                            <AccessibleButton
+                                className="mx_NotificationSound_resetSound"
+                                disabled={this.state.currentSound == "default"}
+                                onClick={this.clearSound}
+                                kind="primary"
+                            >
+                                {_t("Reset")}
+                            </AccessibleButton>
                         </div>
-                        <AccessibleButton
-                            className="mx_NotificationSound_resetSound"
-                            disabled={this.state.currentSound == "default"}
-                            onClick={this.clearSound}
-                            kind="primary"
-                        >
-                            {_t("Reset")}
-                        </AccessibleButton>
-                    </div>
-                    <div>
-                        <h3>{_t("Set a new custom sound")}</h3>
-                        <div className="mx_SettingsFlag">
-                            <form autoComplete="off" noValidate={true}>
-                                <input
-                                    ref={this.soundUpload}
-                                    className="mx_NotificationSound_soundUpload"
-                                    type="file"
-                                    onClick={chromeFileInputFix}
-                                    onChange={this.onSoundUploadChanged}
-                                    accept="audio/*"
-                                    aria-label={_t("Upload custom sound")}
-                                />
-                            </form>
-
-                            {currentUploadedFile}
+                        <div>
+                            <h4>{_t("Set a new custom sound")}</h4>
+                            <div className="mx_SettingsFlag">
+                                <form autoComplete="off" noValidate={true}>
+                                    <input
+                                        ref={this.soundUpload}
+                                        className="mx_NotificationSound_soundUpload"
+                                        type="file"
+                                        onClick={chromeFileInputFix}
+                                        onChange={this.onSoundUploadChanged}
+                                        accept="audio/*"
+                                        aria-label={_t("Upload custom sound")}
+                                    />
+                                </form>
+
+                                {currentUploadedFile}
+                            </div>
+
+                            <AccessibleButton
+                                className="mx_NotificationSound_browse"
+                                onClick={this.triggerUploader}
+                                kind="primary"
+                            >
+                                {_t("Browse")}
+                            </AccessibleButton>
+
+                            <AccessibleButton
+                                className="mx_NotificationSound_save"
+                                disabled={this.state.uploadedFile == null}
+                                onClick={this.onClickSaveSound}
+                                kind="primary"
+                            >
+                                {_t("Save")}
+                            </AccessibleButton>
+                            <br />
                         </div>
-
-                        <AccessibleButton
-                            className="mx_NotificationSound_browse"
-                            onClick={this.triggerUploader}
-                            kind="primary"
-                        >
-                            {_t("Browse")}
-                        </AccessibleButton>
-
-                        <AccessibleButton
-                            className="mx_NotificationSound_save"
-                            disabled={this.state.uploadedFile == null}
-                            onClick={this.onClickSaveSound}
-                            kind="primary"
-                        >
-                            {_t("Save")}
-                        </AccessibleButton>
-                        <br />
-                    </div>
-                </div>
-            </div>
+                    </SettingsSubsection>
+                </SettingsSection>
+            </SettingsTab>
         );
     }
 }
diff --git a/src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx
index 3f2c6d65fe0..0ed44cf173c 100644
--- a/src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx
+++ b/src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx
@@ -36,6 +36,8 @@ import { VoiceBroadcastInfoEventType } from "../../../../../voice-broadcast";
 import { ElementCall } from "../../../../../models/Call";
 import SdkConfig, { DEFAULTS } from "../../../../../SdkConfig";
 import { AddPrivilegedUsers } from "../../AddPrivilegedUsers";
+import SettingsTab from "../SettingsTab";
+import { SettingsSection } from "../../shared/SettingsSection";
 
 interface IEventShowOpts {
     isState?: boolean;
@@ -399,7 +401,7 @@ export default class RolesRoomSettingsTab extends React.Component<IProps> {
             const canBanUsers = currentUserLevel >= banLevel;
             bannedUsersSection = (
                 <SettingsFieldset legend={_t("Banned users")}>
-                    <ul>
+                    <ul className="mx_RolesRoomSettingsTab_bannedList">
                         {banned.map((member) => {
                             const banEvent = member.events.member?.getContent();
                             const bannedById = member.events.member?.getSender();
@@ -479,24 +481,25 @@ export default class RolesRoomSettingsTab extends React.Component<IProps> {
             .filter(Boolean);
 
         return (
-            <div className="mx_SettingsTab mx_RolesRoomSettingsTab">
-                <div className="mx_SettingsTab_heading">{_t("Roles & Permissions")}</div>
-                {privilegedUsersSection}
-                {canChangeLevels && <AddPrivilegedUsers room={room} defaultUserLevel={defaultUserLevel} />}
-                {mutedUsersSection}
-                {bannedUsersSection}
-                <SettingsFieldset
-                    legend={_t("Permissions")}
-                    description={
-                        isSpaceRoom
-                            ? _t("Select the roles required to change various parts of the space")
-                            : _t("Select the roles required to change various parts of the room")
-                    }
-                >
-                    {powerSelectors}
-                    {eventPowerSelectors}
-                </SettingsFieldset>
-            </div>
+            <SettingsTab>
+                <SettingsSection heading={_t("Roles & Permissions")}>
+                    {privilegedUsersSection}
+                    {canChangeLevels && <AddPrivilegedUsers room={room} defaultUserLevel={defaultUserLevel} />}
+                    {mutedUsersSection}
+                    {bannedUsersSection}
+                    <SettingsFieldset
+                        legend={_t("Permissions")}
+                        description={
+                            isSpaceRoom
+                                ? _t("Select the roles required to change various parts of the space")
+                                : _t("Select the roles required to change various parts of the room")
+                        }
+                    >
+                        {powerSelectors}
+                        {eventPowerSelectors}
+                    </SettingsFieldset>
+                </SettingsSection>
+            </SettingsTab>
         );
     }
 }
diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
index aad1535505a..71afe65d98b 100644
--- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
+++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
@@ -41,6 +41,8 @@ import SettingsFieldset from "../../SettingsFieldset";
 import ExternalLink from "../../../elements/ExternalLink";
 import PosthogTrackers from "../../../../../PosthogTrackers";
 import MatrixClientContext from "../../../../../contexts/MatrixClientContext";
+import { SettingsSection } from "../../shared/SettingsSection";
+import SettingsTab from "../SettingsTab";
 
 interface IProps {
     room: Room;
@@ -265,6 +267,23 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
             roomName: room.name,
         });
 
+        let advanced: JSX.Element | undefined;
+        if (room.getJoinRule() === JoinRule.Public) {
+            advanced = (
+                <div>
+                    <AccessibleButton
+                        onClick={this.toggleAdvancedSection}
+                        kind="link"
+                        className="mx_SettingsTab_showAdvanced"
+                        aria-expanded={this.state.showAdvancedSection}
+                    >
+                        {this.state.showAdvancedSection ? _t("Hide advanced") : _t("Show advanced")}
+                    </AccessibleButton>
+                    {this.state.showAdvancedSection && this.renderAdvanced()}
+                </div>
+            );
+        }
+
         return (
             <SettingsFieldset legend={_t("Access")} description={description}>
                 <JoinRuleSettings
@@ -275,6 +294,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
                     promptUpgrade={true}
                     aliasWarning={aliasWarning}
                 />
+                {advanced}
             </SettingsFieldset>
         );
     }
@@ -399,7 +419,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
         const canSetGuestAccess = state?.mayClientSendStateEvent(EventType.RoomGuestAccess, client);
 
         return (
-            <>
+            <div className="mx_SecurityRoomSettingsTab_advancedSection">
                 <LabelledToggleSwitch
                     value={guestAccess === GuestAccess.CanJoin}
                     onChange={this.onGuestAccessChange}
@@ -412,7 +432,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
                             "the room without having a registered account.",
                     )}
                 </p>
-            </>
+            </div>
         );
     }
 
@@ -437,45 +457,30 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
 
         const historySection = this.renderHistory();
 
-        let advanced: JSX.Element | undefined;
-        if (room.getJoinRule() === JoinRule.Public) {
-            advanced = (
-                <div className="mx_SettingsTab_section">
-                    <AccessibleButton
-                        onClick={this.toggleAdvancedSection}
-                        kind="link"
-                        className="mx_SettingsTab_showAdvanced"
-                        aria-expanded={this.state.showAdvancedSection}
-                    >
-                        {this.state.showAdvancedSection ? _t("Hide advanced") : _t("Show advanced")}
-                    </AccessibleButton>
-                    {this.state.showAdvancedSection && this.renderAdvanced()}
-                </div>
-            );
-        }
-
         return (
-            <div className="mx_SettingsTab mx_SecurityRoomSettingsTab">
-                <div className="mx_SettingsTab_heading">{_t("Security & Privacy")}</div>
-
-                <SettingsFieldset
-                    legend={_t("Encryption")}
-                    description={_t("Once enabled, encryption cannot be disabled.")}
-                >
-                    <LabelledToggleSwitch
-                        value={isEncrypted}
-                        onChange={this.onEncryptionChange}
-                        label={_t("Encrypted")}
-                        disabled={!canEnableEncryption}
-                    />
-                    {encryptionSettings}
-                </SettingsFieldset>
-
-                {this.renderJoinRule()}
-
-                {advanced}
-                {historySection}
-            </div>
+            <SettingsTab>
+                <SettingsSection heading={_t("Security & Privacy")}>
+                    <SettingsFieldset
+                        legend={_t("Encryption")}
+                        description={_t("Once enabled, encryption cannot be disabled.")}
+                    >
+                        <LabelledToggleSwitch
+                            value={isEncrypted}
+                            onChange={this.onEncryptionChange}
+                            label={_t("Encrypted")}
+                            disabled={!canEnableEncryption}
+                        />
+                        {encryptionSettings}
+                    </SettingsFieldset>
+
+                    {this.renderJoinRule()}
+                    {historySection}
+                </SettingsSection>
+            </SettingsTab>
+            // <div className="mx_SettingsTab mx_SecurityRoomSettingsTab">
+            //     <div className="mx_SettingsTab_heading">{_t("Security & Privacy")}</div>
+
+            // </div>
         );
     }
 }
diff --git a/test/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap
index fa0aa0338e9..f8ec32b7f3a 100644
--- a/test/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap
@@ -6,50 +6,78 @@ exports[`AdvancedRoomSettingsTab should render as expected 1`] = `
     class="mx_SettingsTab"
   >
     <div
-      class="mx_SettingsTab_heading"
+      class="mx_SettingsTab_sections"
     >
-      Advanced
-    </div>
-    <div
-      class="mx_SettingsTab_section mx_SettingsTab_subsectionText"
-    >
-      <span
-        class="mx_SettingsTab_subheading"
+      <div
+        class="mx_SettingsSection"
       >
-        Room information
-      </span>
-      <div>
-        <span>
-          Internal room ID
-        </span>
+        <h2
+          class="mx_Heading_h2"
+        >
+          Advanced
+        </h2>
         <div
-          class="mx_CopyableText mx_CopyableText_border"
+          class="mx_SettingsSection_subSections"
         >
-          !room:example.com
           <div
-            aria-label="Copy"
-            class="mx_AccessibleButton mx_CopyableText_copyButton"
-            role="button"
-            tabindex="0"
-          />
+            class="mx_SettingsSubsection"
+          >
+            <div
+              class="mx_SettingsSubsectionHeading"
+            >
+              <h3
+                class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+              >
+                Room information
+              </h3>
+            </div>
+            <div
+              class="mx_SettingsSubsection_content"
+            >
+              <div>
+                <span>
+                  Internal room ID
+                </span>
+                <div
+                  class="mx_CopyableText mx_CopyableText_border"
+                >
+                  !room:example.com
+                  <div
+                    aria-label="Copy"
+                    class="mx_AccessibleButton mx_CopyableText_copyButton"
+                    role="button"
+                    tabindex="0"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="mx_SettingsSubsection"
+          >
+            <div
+              class="mx_SettingsSubsectionHeading"
+            >
+              <h3
+                class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+              >
+                Room version
+              </h3>
+            </div>
+            <div
+              class="mx_SettingsSubsection_content"
+            >
+              <div>
+                <span>
+                  Room version:
+                </span>
+                 1
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
-    <div
-      class="mx_SettingsTab_section mx_SettingsTab_subsectionText"
-    >
-      <span
-        class="mx_SettingsTab_subheading"
-      >
-        Room version
-      </span>
-      <div>
-        <span>
-          Room version:
-        </span>
-         1
-      </div>
-    </div>
   </div>
 </DocumentFragment>
 `;
diff --git a/test/components/views/settings/tabs/room/__snapshots__/BridgeSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/room/__snapshots__/BridgeSettingsTab-test.tsx.snap
index c38e07d15f8..ed78d3834cb 100644
--- a/test/components/views/settings/tabs/room/__snapshots__/BridgeSettingsTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/room/__snapshots__/BridgeSettingsTab-test.tsx.snap
@@ -6,75 +6,83 @@ exports[`<BridgeSettingsTab /> renders when room is bridging messages 1`] = `
     class="mx_SettingsTab"
   >
     <div
-      class="mx_SettingsTab_heading"
+      class="mx_SettingsTab_sections"
     >
-      Bridges
-    </div>
-    <div
-      class="mx_SettingsTab_section mx_SettingsTab_subsectionText"
-    >
-      <div>
-        <p>
-          <span>
-            This room is bridging messages to the following platforms. 
-            <a
-              href="https://matrix.org/bridges/"
-              rel="noreferrer noopener"
-              target="_blank"
-            >
-              Learn more.
-            </a>
-          </span>
-        </p>
-        <ul
-          class="mx_RoomSettingsDialog_BridgeList"
+      <div
+        class="mx_SettingsSection"
+      >
+        <h2
+          class="mx_Heading_h2"
         >
-          <li
-            class="mx_RoomSettingsDialog_BridgeList_listItem"
-          >
-            <div
-              class="mx_RoomSettingsDialog_column_icon"
-            >
-              <div
-                class="mx_RoomSettingsDialog_noProtocolIcon"
-              />
-            </div>
-            <div
-              class="mx_RoomSettingsDialog_column_data"
+          Bridges
+        </h2>
+        <div
+          class="mx_SettingsSection_subSections"
+        >
+          <div>
+            <p>
+              <span>
+                This room is bridging messages to the following platforms. 
+                <a
+                  href="https://matrix.org/bridges/"
+                  rel="noreferrer noopener"
+                  target="_blank"
+                >
+                  Learn more.
+                </a>
+              </span>
+            </p>
+            <ul
+              class="mx_RoomSettingsDialog_BridgeList"
             >
-              <h3
-                class="mx_RoomSettingsDialog_column_data_protocolName"
+              <li
+                class="mx_RoomSettingsDialog_BridgeList_listItem"
               >
-                protocol-test
-              </h3>
-              <p
-                class="mx_RoomSettingsDialog_column_data_details mx_RoomSettingsDialog_workspace_channel_details"
-              >
-                <span
-                  class="mx_RoomSettingsDialog_channel"
+                <div
+                  class="mx_RoomSettingsDialog_column_icon"
+                >
+                  <div
+                    class="mx_RoomSettingsDialog_noProtocolIcon"
+                  />
+                </div>
+                <div
+                  class="mx_RoomSettingsDialog_column_data"
                 >
-                  <span>
-                    Channel: 
-                    <span>
-                      channel-test
+                  <h3
+                    class="mx_RoomSettingsDialog_column_data_protocolName"
+                  >
+                    protocol-test
+                  </h3>
+                  <p
+                    class="mx_RoomSettingsDialog_column_data_details mx_RoomSettingsDialog_workspace_channel_details"
+                  >
+                    <span
+                      class="mx_RoomSettingsDialog_channel"
+                    >
+                      <span>
+                        Channel: 
+                        <span>
+                          channel-test
+                        </span>
+                      </span>
                     </span>
-                  </span>
-                </span>
-              </p>
-              <ul
-                class="mx_RoomSettingsDialog_column_data_metadata mx_RoomSettingsDialog_metadata"
-              >
-                 
-                <li>
-                  <span>
-                    This bridge is managed by 
-                    .
-                  </span>
-                </li>
-              </ul>
-            </div>
-          </li>
-        </ul>
+                  </p>
+                  <ul
+                    class="mx_RoomSettingsDialog_column_data_metadata mx_RoomSettingsDialog_metadata"
+                  >
+                     
+                    <li>
+                      <span>
+                        This bridge is managed by 
+                        .
+                      </span>
+                    </li>
+                  </ul>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -87,25 +95,33 @@ exports[`<BridgeSettingsTab /> renders when room is not bridging messages to any
     class="mx_SettingsTab"
   >
     <div
-      class="mx_SettingsTab_heading"
-    >
-      Bridges
-    </div>
-    <div
-      class="mx_SettingsTab_section mx_SettingsTab_subsectionText"
+      class="mx_SettingsTab_sections"
     >
-      <p>
-        <span>
-          This room isn't bridging messages to any platforms. 
-          <a
-            href="https://matrix.org/bridges/"
-            rel="noreferrer noopener"
-            target="_blank"
-          >
-            Learn more.
-          </a>
-        </span>
-      </p>
+      <div
+        class="mx_SettingsSection"
+      >
+        <h2
+          class="mx_Heading_h2"
+        >
+          Bridges
+        </h2>
+        <div
+          class="mx_SettingsSection_subSections"
+        >
+          <p>
+            <span>
+              This room isn't bridging messages to any platforms. 
+              <a
+                href="https://matrix.org/bridges/"
+                rel="noreferrer noopener"
+                target="_blank"
+              >
+                Learn more.
+              </a>
+            </span>
+          </p>
+        </div>
+      </div>
     </div>
   </div>
 </div>
diff --git a/test/components/views/settings/tabs/room/__snapshots__/RolesRoomSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/room/__snapshots__/RolesRoomSettingsTab-test.tsx.snap
index d771a152d2a..aea48398946 100644
--- a/test/components/views/settings/tabs/room/__snapshots__/RolesRoomSettingsTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/room/__snapshots__/RolesRoomSettingsTab-test.tsx.snap
@@ -9,7 +9,9 @@ exports[`RolesRoomSettingsTab Banned users renders banned users 1`] = `
   >
     Banned users
   </legend>
-  <ul>
+  <ul
+    class="mx_RolesRoomSettingsTab_bannedList"
+  >
     <li>
       <span
         title="Banned by @alice:server.org"