diff --git a/res/css/views/elements/_StyledCheckbox.scss b/res/css/views/elements/_StyledCheckbox.scss
index aab448605c..60f1bf0277 100644
--- a/res/css/views/elements/_StyledCheckbox.scss
+++ b/res/css/views/elements/_StyledCheckbox.scss
@@ -77,8 +77,8 @@ limitations under the License.
         }
 
         &:checked:disabled + label > .mx_Checkbox_background {
-            background-color: $muted-fg-color;
-            border-color: rgba($muted-fg-color, 0.5);
+            background-color: $accent-color;
+            border-color: $accent-color;
         }
     }
 }
diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
index b24f548d60..d724b164e5 100644
--- a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
@@ -209,9 +209,15 @@ limitations under the License.
 }
 
 .mx_AppearanceUserSettingsTab_Advanced {
+    color: $primary-fg-color;
+
+    > * {
+        margin-bottom: 16px;
+    }
+
     .mx_AppearanceUserSettingsTab_AdvancedToggle {
         color: $accent-color;
-        margin-bottom: 16px;
+        cursor: pointer;
     }
 
     .mx_AppearanceUserSettingsTab_systemFont {
diff --git a/src/components/views/elements/SettingsFlag.tsx b/src/components/views/elements/SettingsFlag.tsx
index 9bdd04d803..4f41db51e2 100644
--- a/src/components/views/elements/SettingsFlag.tsx
+++ b/src/components/views/elements/SettingsFlag.tsx
@@ -30,6 +30,7 @@ interface IProps {
     isExplicit?: boolean;
     // XXX: once design replaces all toggles make this the default
     useCheckbox?: boolean;
+    disabled?: boolean;
     onChange?(checked: boolean): void;
 }
 
@@ -78,14 +79,23 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
         else label = _t(label);
 
         if (this.props.useCheckbox) {
-            return <StyledCheckbox checked={this.state.value} onChange={this.checkBoxOnChange} disabled={!canChange} >
+            return <StyledCheckbox
+                checked={this.state.value}
+                onChange={this.checkBoxOnChange}
+                disabled={this.props.disabled || !canChange}
+            >
                 {label}
             </StyledCheckbox>;
         } else {
             return (
                 <div className="mx_SettingsFlag">
                     <span className="mx_SettingsFlag_label">{label}</span>
-                    <ToggleSwitch checked={this.state.value} onChange={this.onChange} disabled={!canChange} aria-label={label} />
+                    <ToggleSwitch
+                        checked={this.state.value}
+                        onChange={this.onChange}
+                        disabled={this.props.disabled || !canChange}
+                        aria-label={label}
+                    />
                 </div>
             );
         }
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
index e935663bbe..9846be18d3 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
@@ -391,7 +391,13 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
         let advanced: React.ReactNode;
 
         if (this.state.showAdvanced) {
-            advanced = <div>
+            advanced = <>
+                <SettingsFlag
+                    name="useCompactLayout"
+                    level={SettingLevel.DEVICE}
+                    useCheckbox={true}
+                    disabled={this.state.useIRCLayout}
+                />
                 <SettingsFlag
                     name="useSystemFont"
                     level={SettingLevel.DEVICE}
@@ -413,7 +419,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                     disabled={!this.state.useSystemFont}
                     value={this.state.systemFont}
                 />
-            </div>;
+            </>;
         }
         return <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_Advanced">
             {toggle}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 74e747726a..4970a650db 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -441,7 +441,7 @@
     "Font size": "Font size",
     "Use custom size": "Use custom size",
     "Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",
-    "Use compact timeline layout": "Use compact timeline layout",
+    "Use a more compact ‘Modern’ layout": "Use a more compact ‘Modern’ layout",
     "Show a placeholder for removed messages": "Show a placeholder for removed messages",
     "Show join/leave messages (invites/kicks/bans unaffected)": "Show join/leave messages (invites/kicks/bans unaffected)",
     "Show avatar changes": "Show avatar changes",
diff --git a/src/settings/Settings.js b/src/settings/Settings.js
index 5948a4ec9e..f19b827307 100644
--- a/src/settings/Settings.js
+++ b/src/settings/Settings.js
@@ -197,7 +197,7 @@ export const SETTINGS = {
     },
     "useCompactLayout": {
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
-        displayName: _td('Use compact timeline layout'),
+        displayName: _td('Use a more compact ‘Modern’ layout'),
         default: false,
     },
     "showRedactions": {