diff --git a/cypress/e2e/settings/preferences-user-settings-tab.spec.ts b/cypress/e2e/settings/preferences-user-settings-tab.spec.ts
index ad16f0a1c5..61f073e62c 100644
--- a/cypress/e2e/settings/preferences-user-settings-tab.spec.ts
+++ b/cypress/e2e/settings/preferences-user-settings-tab.spec.ts
@@ -35,19 +35,16 @@ describe("Preferences user settings tab", () => {
     it("should be rendered properly", () => {
         cy.openUserSettings("Preferences");
 
-        cy.get(".mx_SettingsTab.mx_PreferencesUserSettingsTab").within(() => {
+        cy.findByTestId("mx_PreferencesUserSettingsTab").within(() => {
             // Assert that the top heading is rendered
-            cy.findByTestId("preferences").should("have.text", "Preferences").should("be.visible");
+            cy.contains("Preferences").should("be.visible");
         });
 
-        cy.get(".mx_SettingsTab.mx_PreferencesUserSettingsTab").percySnapshotElement(
-            "User settings tab - Preferences",
-            {
-                // Emulate TabbedView's actual min and max widths
-                // 580: '.mx_UserSettingsDialog .mx_TabbedView' min-width
-                // 796: 1036 (mx_TabbedView_tabsOnLeft actual width) - 240 (mx_TabbedView_tabPanel margin-right)
-                widths: [580, 796],
-            },
-        );
+        cy.findByTestId("mx_PreferencesUserSettingsTab").percySnapshotElement("User settings tab - Preferences", {
+            // Emulate TabbedView's actual min and max widths
+            // 580: '.mx_UserSettingsDialog .mx_TabbedView' min-width
+            // 796: 1036 (mx_TabbedView_tabsOnLeft actual width) - 240 (mx_TabbedView_tabPanel margin-right)
+            widths: [580, 796],
+        });
     });
 });
diff --git a/res/css/_components.pcss b/res/css/_components.pcss
index f116e45c5e..808b6b024e 100644
--- a/res/css/_components.pcss
+++ b/res/css/_components.pcss
@@ -346,7 +346,6 @@
 @import "./views/settings/tabs/user/_HelpUserSettingsTab.pcss";
 @import "./views/settings/tabs/user/_KeyboardUserSettingsTab.pcss";
 @import "./views/settings/tabs/user/_MjolnirUserSettingsTab.pcss";
-@import "./views/settings/tabs/user/_PreferencesUserSettingsTab.pcss";
 @import "./views/settings/tabs/user/_SecurityUserSettingsTab.pcss";
 @import "./views/settings/tabs/user/_SidebarUserSettingsTab.pcss";
 @import "./views/settings/tabs/user/_VoiceUserSettingsTab.pcss";
diff --git a/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.pcss
deleted file mode 100644
index c7eb699d4c..0000000000
--- a/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.pcss
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
-Copyright 2019 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.mx_PreferencesUserSettingsTab {
-    .mx_Field {
-        margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
-    }
-
-    .mx_SettingsTab_section {
-        margin-bottom: var(--SettingsTab_section-margin-bottom-preferences-labs);
-    }
-}
diff --git a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
index 4fbb174516..cc485dca45 100644
--- a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2019-2021 The Matrix.org Foundation C.I.C.
+Copyright 2019-2023 The Matrix.org Foundation C.I.C.
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
@@ -30,6 +30,9 @@ import { OpenToTabPayload } from "../../../../../dispatcher/payloads/OpenToTabPa
 import { Action } from "../../../../../dispatcher/actions";
 import SdkConfig from "../../../../../SdkConfig";
 import { showUserOnboardingPage } from "../../../user-onboarding/UserOnboardingPage";
+import SettingsSubsection from "../../shared/SettingsSubsection";
+import SettingsTab from "../SettingsTab";
+import { SettingsSection } from "../../shared/SettingsSection";
 
 interface IProps {
     closeSettingsFn(success: boolean): void;
@@ -143,27 +146,21 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
             .filter((it) => it !== "FTUE.userOnboardingButton" || showUserOnboardingPage(useCase));
 
         return (
-            <div className="mx_SettingsTab mx_PreferencesUserSettingsTab">
-                <div className="mx_SettingsTab_heading" data-testid="preferences">
-                    {_t("Preferences")}
-                </div>
+            <SettingsTab data-testid="mx_PreferencesUserSettingsTab">
+                <SettingsSection heading={_t("Preferences")}>
+                    {roomListSettings.length > 0 && (
+                        <SettingsSubsection heading={_t("Room list")}>
+                            {this.renderGroup(roomListSettings)}
+                        </SettingsSubsection>
+                    )}
 
-                {roomListSettings.length > 0 && (
-                    <div className="mx_SettingsTab_section">
-                        <span className="mx_SettingsTab_subheading">{_t("Room list")}</span>
-                        {this.renderGroup(roomListSettings)}
-                    </div>
-                )}
+                    <SettingsSubsection heading={_t("Spaces")}>
+                        {this.renderGroup(PreferencesUserSettingsTab.SPACES_SETTINGS, SettingLevel.ACCOUNT)}
+                    </SettingsSubsection>
 
-                <div className="mx_SettingsTab_section">
-                    <span className="mx_SettingsTab_subheading">{_t("Spaces")}</span>
-                    {this.renderGroup(PreferencesUserSettingsTab.SPACES_SETTINGS, SettingLevel.ACCOUNT)}
-                </div>
-
-                <div className="mx_SettingsTab_section">
-                    <span className="mx_SettingsTab_subheading">{_t("Keyboard shortcuts")}</span>
-                    <div className="mx_SettingsFlag">
-                        {_t(
+                    <SettingsSubsection
+                        heading={_t("Keyboard shortcuts")}
+                        description={_t(
                             "To view all keyboard shortcuts, <a>click here</a>.",
                             {},
                             {
@@ -174,85 +171,78 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
                                 ),
                             },
                         )}
-                    </div>
-                    {this.renderGroup(PreferencesUserSettingsTab.KEYBINDINGS_SETTINGS)}
-                </div>
+                    >
+                        {this.renderGroup(PreferencesUserSettingsTab.KEYBINDINGS_SETTINGS)}
+                    </SettingsSubsection>
 
-                <div className="mx_SettingsTab_section">
-                    <span className="mx_SettingsTab_subheading">{_t("Displaying time")}</span>
-                    {this.renderGroup(PreferencesUserSettingsTab.TIME_SETTINGS)}
-                </div>
+                    <SettingsSubsection heading={_t("Displaying time")}>
+                        {this.renderGroup(PreferencesUserSettingsTab.TIME_SETTINGS)}
+                    </SettingsSubsection>
 
-                <div className="mx_SettingsTab_section">
-                    <span className="mx_SettingsTab_subheading">{_t("Presence")}</span>
-                    <span className="mx_SettingsTab_subsectionText">
-                        {_t("Share your activity and status with others.")}
-                    </span>
-                    {this.renderGroup(PreferencesUserSettingsTab.PRESENCE_SETTINGS)}
-                </div>
+                    <SettingsSubsection
+                        heading={_t("Presence")}
+                        description={_t("Share your activity and status with others.")}
+                    >
+                        {this.renderGroup(PreferencesUserSettingsTab.PRESENCE_SETTINGS)}
+                    </SettingsSubsection>
 
-                <div className="mx_SettingsTab_section">
-                    <span className="mx_SettingsTab_subheading">{_t("Composer")}</span>
-                    {this.renderGroup(PreferencesUserSettingsTab.COMPOSER_SETTINGS)}
-                </div>
+                    <SettingsSubsection heading={_t("Composer")}>
+                        {this.renderGroup(PreferencesUserSettingsTab.COMPOSER_SETTINGS)}
+                    </SettingsSubsection>
 
-                <div className="mx_SettingsTab_section">
-                    <span className="mx_SettingsTab_subheading">{_t("Code blocks")}</span>
-                    {this.renderGroup(PreferencesUserSettingsTab.CODE_BLOCKS_SETTINGS)}
-                </div>
+                    <SettingsSubsection heading={_t("Code blocks")}>
+                        {this.renderGroup(PreferencesUserSettingsTab.CODE_BLOCKS_SETTINGS)}
+                    </SettingsSubsection>
 
-                <div className="mx_SettingsTab_section">
-                    <span className="mx_SettingsTab_subheading">{_t("Images, GIFs and videos")}</span>
-                    {this.renderGroup(PreferencesUserSettingsTab.IMAGES_AND_VIDEOS_SETTINGS)}
-                </div>
+                    <SettingsSubsection heading={_t("Images, GIFs and videos")}>
+                        {this.renderGroup(PreferencesUserSettingsTab.IMAGES_AND_VIDEOS_SETTINGS)}
+                    </SettingsSubsection>
 
-                <div className="mx_SettingsTab_section">
-                    <span className="mx_SettingsTab_subheading">{_t("Timeline")}</span>
-                    {this.renderGroup(PreferencesUserSettingsTab.TIMELINE_SETTINGS)}
-                </div>
+                    <SettingsSubsection heading={_t("Timeline")}>
+                        {this.renderGroup(PreferencesUserSettingsTab.TIMELINE_SETTINGS)}
+                    </SettingsSubsection>
 
-                <div className="mx_SettingsTab_section">
-                    <span className="mx_SettingsTab_subheading">{_t("Room directory")}</span>
-                    {this.renderGroup(PreferencesUserSettingsTab.ROOM_DIRECTORY_SETTINGS)}
-                </div>
+                    <SettingsSubsection heading={_t("Room directory")}>
+                        {this.renderGroup(PreferencesUserSettingsTab.ROOM_DIRECTORY_SETTINGS)}
+                    </SettingsSubsection>
 
-                <div className="mx_SettingsTab_section">
-                    <span className="mx_SettingsTab_subheading">{_t("General")}</span>
-                    {this.renderGroup(PreferencesUserSettingsTab.GENERAL_SETTINGS)}
+                    <SettingsSubsection heading={_t("General")} stretchContent>
+                        {this.renderGroup(PreferencesUserSettingsTab.GENERAL_SETTINGS)}
 
-                    <SettingsFlag name="Electron.showTrayIcon" level={SettingLevel.PLATFORM} hideIfCannotSet />
-                    <SettingsFlag
-                        name="Electron.enableHardwareAcceleration"
-                        level={SettingLevel.PLATFORM}
-                        hideIfCannotSet
-                        label={_t("Enable hardware acceleration (restart %(appName)s to take effect)", {
-                            appName: SdkConfig.get().brand,
-                        })}
-                    />
-                    <SettingsFlag name="Electron.alwaysShowMenuBar" level={SettingLevel.PLATFORM} hideIfCannotSet />
-                    <SettingsFlag name="Electron.autoLaunch" level={SettingLevel.PLATFORM} hideIfCannotSet />
-                    <SettingsFlag name="Electron.warnBeforeExit" level={SettingLevel.PLATFORM} hideIfCannotSet />
+                        <SettingsFlag name="Electron.showTrayIcon" level={SettingLevel.PLATFORM} hideIfCannotSet />
+                        <SettingsFlag
+                            name="Electron.enableHardwareAcceleration"
+                            level={SettingLevel.PLATFORM}
+                            hideIfCannotSet
+                            label={_t("Enable hardware acceleration (restart %(appName)s to take effect)", {
+                                appName: SdkConfig.get().brand,
+                            })}
+                        />
+                        <SettingsFlag name="Electron.alwaysShowMenuBar" level={SettingLevel.PLATFORM} hideIfCannotSet />
+                        <SettingsFlag name="Electron.autoLaunch" level={SettingLevel.PLATFORM} hideIfCannotSet />
+                        <SettingsFlag name="Electron.warnBeforeExit" level={SettingLevel.PLATFORM} hideIfCannotSet />
 
-                    <Field
-                        label={_t("Autocomplete delay (ms)")}
-                        type="number"
-                        value={this.state.autocompleteDelay}
-                        onChange={this.onAutocompleteDelayChange}
-                    />
-                    <Field
-                        label={_t("Read Marker lifetime (ms)")}
-                        type="number"
-                        value={this.state.readMarkerInViewThresholdMs}
-                        onChange={this.onReadMarkerInViewThresholdMs}
-                    />
-                    <Field
-                        label={_t("Read Marker off-screen lifetime (ms)")}
-                        type="number"
-                        value={this.state.readMarkerOutOfViewThresholdMs}
-                        onChange={this.onReadMarkerOutOfViewThresholdMs}
-                    />
-                </div>
-            </div>
+                        <Field
+                            label={_t("Autocomplete delay (ms)")}
+                            type="number"
+                            value={this.state.autocompleteDelay}
+                            onChange={this.onAutocompleteDelayChange}
+                        />
+                        <Field
+                            label={_t("Read Marker lifetime (ms)")}
+                            type="number"
+                            value={this.state.readMarkerInViewThresholdMs}
+                            onChange={this.onReadMarkerInViewThresholdMs}
+                        />
+                        <Field
+                            label={_t("Read Marker off-screen lifetime (ms)")}
+                            type="number"
+                            value={this.state.readMarkerOutOfViewThresholdMs}
+                            onChange={this.onReadMarkerOutOfViewThresholdMs}
+                        />
+                    </SettingsSubsection>
+                </SettingsSection>
+            </SettingsTab>
         );
     }
 }
diff --git a/test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap
index 45340dac36..2426d97f3a 100644
--- a/test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap
@@ -3,1047 +3,1155 @@
 exports[`PreferencesUserSettingsTab should render 1`] = `
 <DocumentFragment>
   <div
-    class="mx_SettingsTab mx_PreferencesUserSettingsTab"
+    class="mx_SettingsTab"
+    data-testid="mx_PreferencesUserSettingsTab"
   >
     <div
-      class="mx_SettingsTab_heading"
-      data-testid="preferences"
+      class="mx_SettingsTab_sections"
     >
-      Preferences
-    </div>
-    <div
-      class="mx_SettingsTab_section"
-    >
-      <span
-        class="mx_SettingsTab_subheading"
-      >
-        Room list
-      </span>
       <div
-        class="mx_SettingsFlag"
+        class="mx_SettingsSection"
       >
-        <label
-          class="mx_SettingsFlag_label"
+        <h2
+          class="mx_Heading_h2"
         >
-          <span
-            class="mx_SettingsFlag_labelText"
-          >
-            Show shortcuts to recently viewed rooms above the room list
-          </span>
-        </label>
+          Preferences
+        </h2>
         <div
-          aria-checked="true"
-          aria-disabled="true"
-          aria-label="Show shortcuts to recently viewed rooms above the room list"
-          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
-          role="switch"
-          tabindex="0"
+          class="mx_SettingsSection_subSections"
         >
           <div
-            class="mx_ToggleSwitch_ball"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      class="mx_SettingsTab_section"
-    >
-      <span
-        class="mx_SettingsTab_subheading"
-      >
-        Spaces
-      </span>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
+            class="mx_SettingsSubsection"
           >
-            Show all rooms in Home
-          </span>
-          <div
-            class="mx_SettingsFlag_microcopy"
-          >
-            All rooms you're in will appear in Home.
+            <div
+              class="mx_SettingsSubsectionHeading"
+            >
+              <h3
+                class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+              >
+                Room list
+              </h3>
+            </div>
+            <div
+              class="mx_SettingsSubsection_content"
+            >
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Show shortcuts to recently viewed rooms above the room list
+                  </span>
+                </label>
+                <div
+                  aria-checked="true"
+                  aria-disabled="true"
+                  aria-label="Show shortcuts to recently viewed rooms above the room list"
+                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+            </div>
           </div>
-        </label>
-        <div
-          aria-checked="false"
-          aria-disabled="true"
-          aria-label="Show all rooms in Home"
-          class="mx_AccessibleButton mx_ToggleSwitch"
-          role="switch"
-          tabindex="0"
-        >
           <div
-            class="mx_ToggleSwitch_ball"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      class="mx_SettingsTab_section"
-    >
-      <span
-        class="mx_SettingsTab_subheading"
-      >
-        Keyboard shortcuts
-      </span>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <span>
-          To view all keyboard shortcuts, 
-          <div
-            class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
-            role="button"
-            tabindex="0"
+            class="mx_SettingsSubsection"
           >
-            click here
+            <div
+              class="mx_SettingsSubsectionHeading"
+            >
+              <h3
+                class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+              >
+                Spaces
+              </h3>
+            </div>
+            <div
+              class="mx_SettingsSubsection_content"
+            >
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Show all rooms in Home
+                  </span>
+                  <div
+                    class="mx_SettingsFlag_microcopy"
+                  >
+                    All rooms you're in will appear in Home.
+                  </div>
+                </label>
+                <div
+                  aria-checked="false"
+                  aria-disabled="true"
+                  aria-label="Show all rooms in Home"
+                  class="mx_AccessibleButton mx_ToggleSwitch"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+            </div>
           </div>
-          .
-        </span>
-      </div>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
-          >
-            Use Ctrl + F to search timeline
-          </span>
-        </label>
-        <div
-          aria-checked="false"
-          aria-disabled="true"
-          aria-label="Use Ctrl + F to search timeline"
-          class="mx_AccessibleButton mx_ToggleSwitch"
-          role="switch"
-          tabindex="0"
-        >
           <div
-            class="mx_ToggleSwitch_ball"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      class="mx_SettingsTab_section"
-    >
-      <span
-        class="mx_SettingsTab_subheading"
-      >
-        Displaying time
-      </span>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
+            class="mx_SettingsSubsection"
           >
-            Show timestamps in 12 hour format (e.g. 2:30pm)
-          </span>
-        </label>
-        <div
-          aria-checked="false"
-          aria-disabled="true"
-          aria-label="Show timestamps in 12 hour format (e.g. 2:30pm)"
-          class="mx_AccessibleButton mx_ToggleSwitch"
-          role="switch"
-          tabindex="0"
-        >
-          <div
-            class="mx_ToggleSwitch_ball"
-          />
-        </div>
-      </div>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
-          >
-            Always show message timestamps
-          </span>
-        </label>
-        <div
-          aria-checked="false"
-          aria-disabled="true"
-          aria-label="Always show message timestamps"
-          class="mx_AccessibleButton mx_ToggleSwitch"
-          role="switch"
-          tabindex="0"
-        >
-          <div
-            class="mx_ToggleSwitch_ball"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      class="mx_SettingsTab_section"
-    >
-      <span
-        class="mx_SettingsTab_subheading"
-      >
-        Presence
-      </span>
-      <span
-        class="mx_SettingsTab_subsectionText"
-      >
-        Share your activity and status with others.
-      </span>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
-          >
-            Send read receipts
-          </span>
-        </label>
-        <div
-          aria-checked="true"
-          aria-disabled="true"
-          aria-label="Send read receipts"
-          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
-          role="switch"
-          tabindex="0"
-        >
-          <div
-            class="mx_ToggleSwitch_ball"
-          />
-        </div>
-      </div>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
-          >
-            Send typing notifications
-          </span>
-        </label>
-        <div
-          aria-checked="true"
-          aria-disabled="true"
-          aria-label="Send typing notifications"
-          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
-          role="switch"
-          tabindex="0"
-        >
-          <div
-            class="mx_ToggleSwitch_ball"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      class="mx_SettingsTab_section"
-    >
-      <span
-        class="mx_SettingsTab_subheading"
-      >
-        Composer
-      </span>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
-          >
-            Automatically replace plain text Emoji
-          </span>
-        </label>
-        <div
-          aria-checked="false"
-          aria-disabled="true"
-          aria-label="Automatically replace plain text Emoji"
-          class="mx_AccessibleButton mx_ToggleSwitch"
-          role="switch"
-          tabindex="0"
-        >
-          <div
-            class="mx_ToggleSwitch_ball"
-          />
-        </div>
-      </div>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
-          >
-            Enable Markdown
-          </span>
-          <div
-            class="mx_SettingsFlag_microcopy"
-          >
-            <span>
-              Start messages with 
-              <code>
-                /plain
-              </code>
-               to send without markdown.
-            </span>
+            <div
+              class="mx_SettingsSubsectionHeading"
+            >
+              <h3
+                class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+              >
+                Keyboard shortcuts
+              </h3>
+            </div>
+            <div
+              class="mx_SettingsSubsection_description"
+            >
+              <div
+                class="mx_SettingsSubsection_text"
+              >
+                <span>
+                  To view all keyboard shortcuts, 
+                  <div
+                    class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+                    role="button"
+                    tabindex="0"
+                  >
+                    click here
+                  </div>
+                  .
+                </span>
+              </div>
+            </div>
+            <div
+              class="mx_SettingsSubsection_content"
+            >
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Use Ctrl + F to search timeline
+                  </span>
+                </label>
+                <div
+                  aria-checked="false"
+                  aria-disabled="true"
+                  aria-label="Use Ctrl + F to search timeline"
+                  class="mx_AccessibleButton mx_ToggleSwitch"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+            </div>
           </div>
-        </label>
-        <div
-          aria-checked="true"
-          aria-disabled="true"
-          aria-label="Enable Markdown"
-          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
-          role="switch"
-          tabindex="0"
-        >
           <div
-            class="mx_ToggleSwitch_ball"
-          />
-        </div>
-      </div>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
+            class="mx_SettingsSubsection"
           >
-            Enable Emoji suggestions while typing
-          </span>
-        </label>
-        <div
-          aria-checked="true"
-          aria-disabled="true"
-          aria-label="Enable Emoji suggestions while typing"
-          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
-          role="switch"
-          tabindex="0"
-        >
+            <div
+              class="mx_SettingsSubsectionHeading"
+            >
+              <h3
+                class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+              >
+                Displaying time
+              </h3>
+            </div>
+            <div
+              class="mx_SettingsSubsection_content"
+            >
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Show timestamps in 12 hour format (e.g. 2:30pm)
+                  </span>
+                </label>
+                <div
+                  aria-checked="false"
+                  aria-disabled="true"
+                  aria-label="Show timestamps in 12 hour format (e.g. 2:30pm)"
+                  class="mx_AccessibleButton mx_ToggleSwitch"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Always show message timestamps
+                  </span>
+                </label>
+                <div
+                  aria-checked="false"
+                  aria-disabled="true"
+                  aria-label="Always show message timestamps"
+                  class="mx_AccessibleButton mx_ToggleSwitch"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
           <div
-            class="mx_ToggleSwitch_ball"
-          />
-        </div>
-      </div>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
+            class="mx_SettingsSubsection"
           >
-            Use Ctrl + Enter to send a message
-          </span>
-        </label>
-        <div
-          aria-checked="false"
-          aria-disabled="true"
-          aria-label="Use Ctrl + Enter to send a message"
-          class="mx_AccessibleButton mx_ToggleSwitch"
-          role="switch"
-          tabindex="0"
-        >
+            <div
+              class="mx_SettingsSubsectionHeading"
+            >
+              <h3
+                class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+              >
+                Presence
+              </h3>
+            </div>
+            <div
+              class="mx_SettingsSubsection_description"
+            >
+              <div
+                class="mx_SettingsSubsection_text"
+              >
+                Share your activity and status with others.
+              </div>
+            </div>
+            <div
+              class="mx_SettingsSubsection_content"
+            >
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Send read receipts
+                  </span>
+                </label>
+                <div
+                  aria-checked="true"
+                  aria-disabled="true"
+                  aria-label="Send read receipts"
+                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Send typing notifications
+                  </span>
+                </label>
+                <div
+                  aria-checked="true"
+                  aria-disabled="true"
+                  aria-label="Send typing notifications"
+                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
           <div
-            class="mx_ToggleSwitch_ball"
-          />
-        </div>
-      </div>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
+            class="mx_SettingsSubsection"
           >
-            Surround selected text when typing special characters
-          </span>
-        </label>
-        <div
-          aria-checked="false"
-          aria-disabled="true"
-          aria-label="Surround selected text when typing special characters"
-          class="mx_AccessibleButton mx_ToggleSwitch"
-          role="switch"
-          tabindex="0"
-        >
+            <div
+              class="mx_SettingsSubsectionHeading"
+            >
+              <h3
+                class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+              >
+                Composer
+              </h3>
+            </div>
+            <div
+              class="mx_SettingsSubsection_content"
+            >
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Automatically replace plain text Emoji
+                  </span>
+                </label>
+                <div
+                  aria-checked="false"
+                  aria-disabled="true"
+                  aria-label="Automatically replace plain text Emoji"
+                  class="mx_AccessibleButton mx_ToggleSwitch"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Enable Markdown
+                  </span>
+                  <div
+                    class="mx_SettingsFlag_microcopy"
+                  >
+                    <span>
+                      Start messages with 
+                      <code>
+                        /plain
+                      </code>
+                       to send without markdown.
+                    </span>
+                  </div>
+                </label>
+                <div
+                  aria-checked="true"
+                  aria-disabled="true"
+                  aria-label="Enable Markdown"
+                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Enable Emoji suggestions while typing
+                  </span>
+                </label>
+                <div
+                  aria-checked="true"
+                  aria-disabled="true"
+                  aria-label="Enable Emoji suggestions while typing"
+                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Use Ctrl + Enter to send a message
+                  </span>
+                </label>
+                <div
+                  aria-checked="false"
+                  aria-disabled="true"
+                  aria-label="Use Ctrl + Enter to send a message"
+                  class="mx_AccessibleButton mx_ToggleSwitch"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Surround selected text when typing special characters
+                  </span>
+                </label>
+                <div
+                  aria-checked="false"
+                  aria-disabled="true"
+                  aria-label="Surround selected text when typing special characters"
+                  class="mx_AccessibleButton mx_ToggleSwitch"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Show stickers button
+                  </span>
+                </label>
+                <div
+                  aria-checked="true"
+                  aria-disabled="true"
+                  aria-label="Show stickers button"
+                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Insert a trailing colon after user mentions at the start of a message
+                  </span>
+                </label>
+                <div
+                  aria-checked="true"
+                  aria-disabled="true"
+                  aria-label="Insert a trailing colon after user mentions at the start of a message"
+                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
           <div
-            class="mx_ToggleSwitch_ball"
-          />
-        </div>
-      </div>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
+            class="mx_SettingsSubsection"
           >
-            Show stickers button
-          </span>
-        </label>
-        <div
-          aria-checked="true"
-          aria-disabled="true"
-          aria-label="Show stickers button"
-          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
-          role="switch"
-          tabindex="0"
-        >
+            <div
+              class="mx_SettingsSubsectionHeading"
+            >
+              <h3
+                class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+              >
+                Code blocks
+              </h3>
+            </div>
+            <div
+              class="mx_SettingsSubsection_content"
+            >
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Enable automatic language detection for syntax highlighting
+                  </span>
+                </label>
+                <div
+                  aria-checked="false"
+                  aria-disabled="true"
+                  aria-label="Enable automatic language detection for syntax highlighting"
+                  class="mx_AccessibleButton mx_ToggleSwitch"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Expand code blocks by default
+                  </span>
+                </label>
+                <div
+                  aria-checked="false"
+                  aria-disabled="true"
+                  aria-label="Expand code blocks by default"
+                  class="mx_AccessibleButton mx_ToggleSwitch"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Show line numbers in code blocks
+                  </span>
+                </label>
+                <div
+                  aria-checked="true"
+                  aria-disabled="true"
+                  aria-label="Show line numbers in code blocks"
+                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
           <div
-            class="mx_ToggleSwitch_ball"
-          />
-        </div>
-      </div>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
+            class="mx_SettingsSubsection"
           >
-            Insert a trailing colon after user mentions at the start of a message
-          </span>
-        </label>
-        <div
-          aria-checked="true"
-          aria-disabled="true"
-          aria-label="Insert a trailing colon after user mentions at the start of a message"
-          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
-          role="switch"
-          tabindex="0"
-        >
+            <div
+              class="mx_SettingsSubsectionHeading"
+            >
+              <h3
+                class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+              >
+                Images, GIFs and videos
+              </h3>
+            </div>
+            <div
+              class="mx_SettingsSubsection_content"
+            >
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Enable inline URL previews by default
+                  </span>
+                </label>
+                <div
+                  aria-checked="true"
+                  aria-disabled="true"
+                  aria-label="Enable inline URL previews by default"
+                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Autoplay GIFs
+                  </span>
+                </label>
+                <div
+                  aria-checked="false"
+                  aria-disabled="true"
+                  aria-label="Autoplay GIFs"
+                  class="mx_AccessibleButton mx_ToggleSwitch"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Autoplay videos
+                  </span>
+                </label>
+                <div
+                  aria-checked="false"
+                  aria-disabled="true"
+                  aria-label="Autoplay videos"
+                  class="mx_AccessibleButton mx_ToggleSwitch"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Show previews/thumbnails for images
+                  </span>
+                </label>
+                <div
+                  aria-checked="true"
+                  aria-disabled="true"
+                  aria-label="Show previews/thumbnails for images"
+                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
           <div
-            class="mx_ToggleSwitch_ball"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      class="mx_SettingsTab_section"
-    >
-      <span
-        class="mx_SettingsTab_subheading"
-      >
-        Code blocks
-      </span>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
+            class="mx_SettingsSubsection"
           >
-            Enable automatic language detection for syntax highlighting
-          </span>
-        </label>
-        <div
-          aria-checked="false"
-          aria-disabled="true"
-          aria-label="Enable automatic language detection for syntax highlighting"
-          class="mx_AccessibleButton mx_ToggleSwitch"
-          role="switch"
-          tabindex="0"
-        >
+            <div
+              class="mx_SettingsSubsectionHeading"
+            >
+              <h3
+                class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+              >
+                Timeline
+              </h3>
+            </div>
+            <div
+              class="mx_SettingsSubsection_content"
+            >
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Show typing notifications
+                  </span>
+                </label>
+                <div
+                  aria-checked="true"
+                  aria-disabled="true"
+                  aria-label="Show typing notifications"
+                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Show a placeholder for removed messages
+                  </span>
+                </label>
+                <div
+                  aria-checked="true"
+                  aria-disabled="true"
+                  aria-label="Show a placeholder for removed messages"
+                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Show read receipts sent by other users
+                  </span>
+                </label>
+                <div
+                  aria-checked="true"
+                  aria-disabled="true"
+                  aria-label="Show read receipts sent by other users"
+                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Show join/leave messages (invites/removes/bans unaffected)
+                  </span>
+                </label>
+                <div
+                  aria-checked="true"
+                  aria-disabled="true"
+                  aria-label="Show join/leave messages (invites/removes/bans unaffected)"
+                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Show display name changes
+                  </span>
+                </label>
+                <div
+                  aria-checked="true"
+                  aria-disabled="true"
+                  aria-label="Show display name changes"
+                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Show chat effects (animations when receiving e.g. confetti)
+                  </span>
+                </label>
+                <div
+                  aria-checked="true"
+                  aria-disabled="true"
+                  aria-label="Show chat effects (animations when receiving e.g. confetti)"
+                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Show avatar changes
+                  </span>
+                </label>
+                <div
+                  aria-checked="true"
+                  aria-disabled="true"
+                  aria-label="Show avatar changes"
+                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Show avatars in user, room and event mentions
+                  </span>
+                </label>
+                <div
+                  aria-checked="true"
+                  aria-disabled="true"
+                  aria-label="Show avatars in user, room and event mentions"
+                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Enable big emoji in chat
+                  </span>
+                </label>
+                <div
+                  aria-checked="true"
+                  aria-disabled="true"
+                  aria-label="Enable big emoji in chat"
+                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Jump to the bottom of the timeline when you send a message
+                  </span>
+                </label>
+                <div
+                  aria-checked="true"
+                  aria-disabled="true"
+                  aria-label="Jump to the bottom of the timeline when you send a message"
+                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Show current avatar and name for users in message history
+                  </span>
+                </label>
+                <div
+                  aria-checked="false"
+                  aria-disabled="true"
+                  aria-label="Show current avatar and name for users in message history"
+                  class="mx_AccessibleButton mx_ToggleSwitch"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
           <div
-            class="mx_ToggleSwitch_ball"
-          />
-        </div>
-      </div>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
+            class="mx_SettingsSubsection"
           >
-            Expand code blocks by default
-          </span>
-        </label>
-        <div
-          aria-checked="false"
-          aria-disabled="true"
-          aria-label="Expand code blocks by default"
-          class="mx_AccessibleButton mx_ToggleSwitch"
-          role="switch"
-          tabindex="0"
-        >
+            <div
+              class="mx_SettingsSubsectionHeading"
+            >
+              <h3
+                class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+              >
+                Room directory
+              </h3>
+            </div>
+            <div
+              class="mx_SettingsSubsection_content"
+            >
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Show NSFW content
+                  </span>
+                </label>
+                <div
+                  aria-checked="false"
+                  aria-disabled="true"
+                  aria-label="Show NSFW content"
+                  class="mx_AccessibleButton mx_ToggleSwitch"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
           <div
-            class="mx_ToggleSwitch_ball"
-          />
-        </div>
-      </div>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
+            class="mx_SettingsSubsection"
           >
-            Show line numbers in code blocks
-          </span>
-        </label>
-        <div
-          aria-checked="true"
-          aria-disabled="true"
-          aria-label="Show line numbers in code blocks"
-          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
-          role="switch"
-          tabindex="0"
-        >
-          <div
-            class="mx_ToggleSwitch_ball"
-          />
+            <div
+              class="mx_SettingsSubsectionHeading"
+            >
+              <h3
+                class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+              >
+                General
+              </h3>
+            </div>
+            <div
+              class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"
+            >
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Prompt before sending invites to potentially invalid matrix IDs
+                  </span>
+                </label>
+                <div
+                  aria-checked="true"
+                  aria-disabled="true"
+                  aria-label="Prompt before sending invites to potentially invalid matrix IDs"
+                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+              <div
+                class="mx_Field mx_Field_input"
+              >
+                <input
+                  id="mx_Field_1"
+                  label="Autocomplete delay (ms)"
+                  placeholder="Autocomplete delay (ms)"
+                  type="number"
+                  value="200"
+                />
+                <label
+                  for="mx_Field_1"
+                >
+                  Autocomplete delay (ms)
+                </label>
+              </div>
+              <div
+                class="mx_Field mx_Field_input"
+              >
+                <input
+                  id="mx_Field_2"
+                  label="Read Marker lifetime (ms)"
+                  placeholder="Read Marker lifetime (ms)"
+                  type="number"
+                  value="3000"
+                />
+                <label
+                  for="mx_Field_2"
+                >
+                  Read Marker lifetime (ms)
+                </label>
+              </div>
+              <div
+                class="mx_Field mx_Field_input"
+              >
+                <input
+                  id="mx_Field_3"
+                  label="Read Marker off-screen lifetime (ms)"
+                  placeholder="Read Marker off-screen lifetime (ms)"
+                  type="number"
+                  value="30000"
+                />
+                <label
+                  for="mx_Field_3"
+                >
+                  Read Marker off-screen lifetime (ms)
+                </label>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
-    <div
-      class="mx_SettingsTab_section"
-    >
-      <span
-        class="mx_SettingsTab_subheading"
-      >
-        Images, GIFs and videos
-      </span>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
-          >
-            Enable inline URL previews by default
-          </span>
-        </label>
-        <div
-          aria-checked="true"
-          aria-disabled="true"
-          aria-label="Enable inline URL previews by default"
-          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
-          role="switch"
-          tabindex="0"
-        >
-          <div
-            class="mx_ToggleSwitch_ball"
-          />
-        </div>
-      </div>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
-          >
-            Autoplay GIFs
-          </span>
-        </label>
-        <div
-          aria-checked="false"
-          aria-disabled="true"
-          aria-label="Autoplay GIFs"
-          class="mx_AccessibleButton mx_ToggleSwitch"
-          role="switch"
-          tabindex="0"
-        >
-          <div
-            class="mx_ToggleSwitch_ball"
-          />
-        </div>
-      </div>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
-          >
-            Autoplay videos
-          </span>
-        </label>
-        <div
-          aria-checked="false"
-          aria-disabled="true"
-          aria-label="Autoplay videos"
-          class="mx_AccessibleButton mx_ToggleSwitch"
-          role="switch"
-          tabindex="0"
-        >
-          <div
-            class="mx_ToggleSwitch_ball"
-          />
-        </div>
-      </div>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
-          >
-            Show previews/thumbnails for images
-          </span>
-        </label>
-        <div
-          aria-checked="true"
-          aria-disabled="true"
-          aria-label="Show previews/thumbnails for images"
-          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
-          role="switch"
-          tabindex="0"
-        >
-          <div
-            class="mx_ToggleSwitch_ball"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      class="mx_SettingsTab_section"
-    >
-      <span
-        class="mx_SettingsTab_subheading"
-      >
-        Timeline
-      </span>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
-          >
-            Show typing notifications
-          </span>
-        </label>
-        <div
-          aria-checked="true"
-          aria-disabled="true"
-          aria-label="Show typing notifications"
-          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
-          role="switch"
-          tabindex="0"
-        >
-          <div
-            class="mx_ToggleSwitch_ball"
-          />
-        </div>
-      </div>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
-          >
-            Show a placeholder for removed messages
-          </span>
-        </label>
-        <div
-          aria-checked="true"
-          aria-disabled="true"
-          aria-label="Show a placeholder for removed messages"
-          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
-          role="switch"
-          tabindex="0"
-        >
-          <div
-            class="mx_ToggleSwitch_ball"
-          />
-        </div>
-      </div>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
-          >
-            Show read receipts sent by other users
-          </span>
-        </label>
-        <div
-          aria-checked="true"
-          aria-disabled="true"
-          aria-label="Show read receipts sent by other users"
-          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
-          role="switch"
-          tabindex="0"
-        >
-          <div
-            class="mx_ToggleSwitch_ball"
-          />
-        </div>
-      </div>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
-          >
-            Show join/leave messages (invites/removes/bans unaffected)
-          </span>
-        </label>
-        <div
-          aria-checked="true"
-          aria-disabled="true"
-          aria-label="Show join/leave messages (invites/removes/bans unaffected)"
-          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
-          role="switch"
-          tabindex="0"
-        >
-          <div
-            class="mx_ToggleSwitch_ball"
-          />
-        </div>
-      </div>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
-          >
-            Show display name changes
-          </span>
-        </label>
-        <div
-          aria-checked="true"
-          aria-disabled="true"
-          aria-label="Show display name changes"
-          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
-          role="switch"
-          tabindex="0"
-        >
-          <div
-            class="mx_ToggleSwitch_ball"
-          />
-        </div>
-      </div>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
-          >
-            Show chat effects (animations when receiving e.g. confetti)
-          </span>
-        </label>
-        <div
-          aria-checked="true"
-          aria-disabled="true"
-          aria-label="Show chat effects (animations when receiving e.g. confetti)"
-          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
-          role="switch"
-          tabindex="0"
-        >
-          <div
-            class="mx_ToggleSwitch_ball"
-          />
-        </div>
-      </div>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
-          >
-            Show avatar changes
-          </span>
-        </label>
-        <div
-          aria-checked="true"
-          aria-disabled="true"
-          aria-label="Show avatar changes"
-          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
-          role="switch"
-          tabindex="0"
-        >
-          <div
-            class="mx_ToggleSwitch_ball"
-          />
-        </div>
-      </div>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
-          >
-            Show avatars in user, room and event mentions
-          </span>
-        </label>
-        <div
-          aria-checked="true"
-          aria-disabled="true"
-          aria-label="Show avatars in user, room and event mentions"
-          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
-          role="switch"
-          tabindex="0"
-        >
-          <div
-            class="mx_ToggleSwitch_ball"
-          />
-        </div>
-      </div>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
-          >
-            Enable big emoji in chat
-          </span>
-        </label>
-        <div
-          aria-checked="true"
-          aria-disabled="true"
-          aria-label="Enable big emoji in chat"
-          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
-          role="switch"
-          tabindex="0"
-        >
-          <div
-            class="mx_ToggleSwitch_ball"
-          />
-        </div>
-      </div>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
-          >
-            Jump to the bottom of the timeline when you send a message
-          </span>
-        </label>
-        <div
-          aria-checked="true"
-          aria-disabled="true"
-          aria-label="Jump to the bottom of the timeline when you send a message"
-          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
-          role="switch"
-          tabindex="0"
-        >
-          <div
-            class="mx_ToggleSwitch_ball"
-          />
-        </div>
-      </div>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
-          >
-            Show current avatar and name for users in message history
-          </span>
-        </label>
-        <div
-          aria-checked="false"
-          aria-disabled="true"
-          aria-label="Show current avatar and name for users in message history"
-          class="mx_AccessibleButton mx_ToggleSwitch"
-          role="switch"
-          tabindex="0"
-        >
-          <div
-            class="mx_ToggleSwitch_ball"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      class="mx_SettingsTab_section"
-    >
-      <span
-        class="mx_SettingsTab_subheading"
-      >
-        Room directory
-      </span>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
-          >
-            Show NSFW content
-          </span>
-        </label>
-        <div
-          aria-checked="false"
-          aria-disabled="true"
-          aria-label="Show NSFW content"
-          class="mx_AccessibleButton mx_ToggleSwitch"
-          role="switch"
-          tabindex="0"
-        >
-          <div
-            class="mx_ToggleSwitch_ball"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      class="mx_SettingsTab_section"
-    >
-      <span
-        class="mx_SettingsTab_subheading"
-      >
-        General
-      </span>
-      <div
-        class="mx_SettingsFlag"
-      >
-        <label
-          class="mx_SettingsFlag_label"
-        >
-          <span
-            class="mx_SettingsFlag_labelText"
-          >
-            Prompt before sending invites to potentially invalid matrix IDs
-          </span>
-        </label>
-        <div
-          aria-checked="true"
-          aria-disabled="true"
-          aria-label="Prompt before sending invites to potentially invalid matrix IDs"
-          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
-          role="switch"
-          tabindex="0"
-        >
-          <div
-            class="mx_ToggleSwitch_ball"
-          />
-        </div>
-      </div>
-      <div
-        class="mx_Field mx_Field_input"
-      >
-        <input
-          id="mx_Field_1"
-          label="Autocomplete delay (ms)"
-          placeholder="Autocomplete delay (ms)"
-          type="number"
-          value="200"
-        />
-        <label
-          for="mx_Field_1"
-        >
-          Autocomplete delay (ms)
-        </label>
-      </div>
-      <div
-        class="mx_Field mx_Field_input"
-      >
-        <input
-          id="mx_Field_2"
-          label="Read Marker lifetime (ms)"
-          placeholder="Read Marker lifetime (ms)"
-          type="number"
-          value="3000"
-        />
-        <label
-          for="mx_Field_2"
-        >
-          Read Marker lifetime (ms)
-        </label>
-      </div>
-      <div
-        class="mx_Field mx_Field_input"
-      >
-        <input
-          id="mx_Field_3"
-          label="Read Marker off-screen lifetime (ms)"
-          placeholder="Read Marker off-screen lifetime (ms)"
-          type="number"
-          value="30000"
-        />
-        <label
-          for="mx_Field_3"
-        >
-          Read Marker off-screen lifetime (ms)
-        </label>
-      </div>
-    </div>
   </div>
 </DocumentFragment>
 `;