diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index b4ad117573..814a614007 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -121,8 +121,8 @@ $irc-line-height: $font-18px;
             }
         }
 
-        .mx_EvenTile_line .mx_MessageActionBar,
-        .mx_EvenTile_line .mx_ReplyThread_wrapper {
+        .mx_EventTile_line .mx_MessageActionBar,
+        .mx_EventTile_line .mx_ReplyThread_wrapper {
             display: block;
         }
 
diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
index 14189fc5e1..044b5e2240 100644
--- a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
@@ -16,6 +16,7 @@ limitations under the License.
 
 .mx_AppearanceUserSettingsTab_fontSlider,
 .mx_AppearanceUserSettingsTab_fontSlider_preview,
+.mx_AppearanceUserSettingsTab_Layout,
 .mx_AppearanceUserSettingsTab .mx_Field {
     @mixin mx_Settings_fullWidthField;
 }
@@ -41,6 +42,14 @@ limitations under the License.
     border-radius: 10px;
     padding: 0 16px 9px 16px;
     pointer-events: none;
+
+    .mx_EventTile_msgOption {
+        display: none;
+    }
+
+    &.mx_IRCLayout {
+        padding-top: 9px;
+    }
 }
 
 .mx_AppearanceUserSettingsTab_fontSlider_smallText {
@@ -135,3 +144,58 @@ limitations under the License.
 .mx_SettingsTab_customFontSizeField {
     margin-left: calc($font-16px + 10px);
 }
+
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons {
+    display: flex;
+    flex-direction: row;
+
+    color: $primary-fg-color;
+
+    .mx_AppearanceUserSettingsTab_spacer {
+        width: 24px;
+    }
+
+    > .mx_AppearanceUserSettingsTab_Layout_RadioButton {
+        flex-grow: 0;
+        flex-shrink: 1;
+        display: flex;
+        flex-direction: column;
+
+        width: 300px;
+
+        border: 1px solid $input-darker-bg-color;
+        border-radius: 10px;
+
+        .mx_EventTile_msgOption {
+            display: none;
+        }
+
+        .mx_AppearanceUserSettingsTab_Layout_RadioButton_preview {
+            flex-grow: 1;
+            display: flex;
+            align-items: center;
+            padding: 10px;
+        }
+
+        .mx_RadioButton {
+            flex-grow: 0;
+            padding: 10px;
+        }
+
+        .mx_EventTile_content {
+            margin-right: 0;
+        }
+    }
+
+    .mx_RadioButton {
+        border-top: 1px solid $input-darker-bg-color;
+
+        > input + div {
+            border-color: rgba($muted-fg-color, 0.2);
+        }
+    }
+
+    .mx_RadioButton_checked {
+        background-color: rgba($accent-color, 0.08);
+    }
+}
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 4a0cc470d5..ea533bfe57 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -166,7 +166,7 @@ export default createReactClass({
             canReact: false,
             canReply: false,
 
-            useIRCLayout: SettingsStore.getValue("feature_irc_ui"),
+            useIRCLayout: SettingsStore.getValue("useIRCLayout"),
 
             matrixClientIsReady: this.context && this.context.isInitialSyncComplete(),
         };
@@ -199,7 +199,7 @@ export default createReactClass({
         this._roomView = createRef();
         this._searchResultsPanel = createRef();
 
-        this._layoutWatcherRef = SettingsStore.watchSetting("feature_irc_ui", null, this.onLayoutChange);
+        this._layoutWatcherRef = SettingsStore.watchSetting("useIRCLayout", null, this.onLayoutChange);
     },
 
     _onReadReceiptsChange: function() {
@@ -546,7 +546,7 @@ export default createReactClass({
 
     onLayoutChange: function() {
         this.setState({
-            useIRCLayout: SettingsStore.getValue("feature_irc_ui"),
+            useIRCLayout: SettingsStore.getValue("useIRCLayout"),
         });
     },
 
diff --git a/src/components/views/elements/StyledRadioButton.tsx b/src/components/views/elements/StyledRadioButton.tsx
index 0ea786d953..d7ae4d5af8 100644
--- a/src/components/views/elements/StyledRadioButton.tsx
+++ b/src/components/views/elements/StyledRadioButton.tsx
@@ -36,6 +36,7 @@ export default class StyledRadioButton extends React.PureComponent<IProps, IStat
             {
                 "mx_RadioButton_disabled": disabled,
                 "mx_RadioButton_enabled": !disabled,
+                "mx_RadioButton_checked": this.props.checked,
             });
         return <label className={_className}>
             <input type='radio' disabled={disabled} {...otherProps} />
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
index d2165e3762..46723ec7cd 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
@@ -55,9 +55,12 @@ interface IState extends IThemeState {
     customThemeUrl: string;
     customThemeMessage: CustomThemeMessage;
     useCustomFontSize: boolean;
+    useIRCLayout: boolean;
 }
 
+
 export default class AppearanceUserSettingsTab extends React.Component<IProps, IState> {
+    private readonly MESSAGE_PREVIEW_TEXT = _t("Hey you. You're the best!");
 
     private themeTimer: NodeJS.Timeout;
 
@@ -70,6 +73,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
             customThemeUrl: "",
             customThemeMessage: {isError: false, text: ""},
             useCustomFontSize: SettingsStore.getValue("useCustomFontSize"),
+            useIRCLayout: SettingsStore.getValue("useIRCLayout"),
         };
     }
 
@@ -200,6 +204,16 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
         this.setState({customThemeUrl: e.target.value});
     };
 
+    private onLayoutChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+        const val = e.target.value === "true";
+
+        this.setState({
+            useIRCLayout: val,
+        });
+
+        SettingsStore.setValue("useIRCLayout", null, SettingLevel.DEVICE, val);
+    };
+
     private renderThemeSection() {
         const themeWatcher = new ThemeWatcher();
         let systemThemeSection: JSX.Element;
@@ -262,7 +276,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                         return <StyledRadioButton
                             key={theme.id}
                             value={theme.id}
-                            name={"theme"}
+                            name="theme"
                             disabled={this.state.useSystemTheme}
                             checked={!this.state.useSystemTheme && theme.id === this.state.theme}
                             className={"mx_ThemeSelector_" + theme.id}
@@ -283,8 +297,8 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
             <span className="mx_SettingsTab_subheading">{_t("Font size")}</span>
             <EventTilePreview
                 className="mx_AppearanceUserSettingsTab_fontSlider_preview"
-                message={_t("Hey you. You're the best!")}
-                useIRCLayout={false}
+                message={this.MESSAGE_PREVIEW_TEXT}
+                useIRCLayout={this.state.useIRCLayout}
             />
             <div className="mx_AppearanceUserSettingsTab_fontSlider">
                 <div className="mx_AppearanceUserSettingsTab_fontSlider_smallText">Aa</div>
@@ -320,6 +334,46 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
         </div>;
     }
 
+    private renderLayoutSection = () => {
+        return <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_Layout">
+            <span className="mx_SettingsTab_subheading">{_t("Message layout")}</span>
+
+            <div className="mx_AppearanceUserSettingsTab_Layout_RadioButtons" >
+                <div className="mx_AppearanceUserSettingsTab_Layout_RadioButton">
+                    <EventTilePreview
+                        className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
+                        message={this.MESSAGE_PREVIEW_TEXT}
+                        useIRCLayout={true}
+                    />
+                    <StyledRadioButton
+                        name="layout"
+                        value="true"
+                        checked={this.state.useIRCLayout}
+                        onChange={this.onLayoutChange}
+                    >
+                        {_t("Compact")}
+                    </StyledRadioButton>
+                </div>
+                <div className="mx_AppearanceUserSettingsTab_spacer" />
+                <div className="mx_AppearanceUserSettingsTab_Layout_RadioButton">
+                    <EventTilePreview
+                        className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
+                        message={this.MESSAGE_PREVIEW_TEXT}
+                        useIRCLayout={false}
+                    />
+                    <StyledRadioButton
+                        name="layout"
+                        value="false"
+                        checked={!this.state.useIRCLayout}
+                        onChange={this.onLayoutChange}
+                    >
+                        {_t("Modern")}
+                    </StyledRadioButton>
+                </div>
+            </div>
+        </div>;
+    };
+
     render() {
         return (
             <div className="mx_SettingsTab mx_AppearanceUserSettingsTab">
@@ -329,6 +383,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                 </div>
                 {this.renderThemeSection()}
                 {SettingsStore.isFeatureEnabled("feature_font_scaling") ? this.renderFontSection() : null}
+                {SettingsStore.isFeatureEnabled("feature_irc_ui") ? this.renderLayoutSection() : null}
             </div>
         );
     }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 94bbe721ec..8b71a832ab 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -435,7 +435,7 @@
     "Try out new ways to ignore people (experimental)": "Try out new ways to ignore people (experimental)",
     "Use the improved room list (in development - will refresh to apply changes)": "Use the improved room list (in development - will refresh to apply changes)",
     "Support adding custom themes": "Support adding custom themes",
-    "Use IRC layout": "Use IRC layout",
+    "Enable IRC layout option in the appearance tab": "Enable IRC layout option in the appearance tab",
     "Show info about bridges in room settings": "Show info about bridges in room settings",
     "Font size": "Font size",
     "Use custom size": "Use custom size",
@@ -483,6 +483,7 @@
     "How fast should messages be downloaded.": "How fast should messages be downloaded.",
     "Manually verify all remote sessions": "Manually verify all remote sessions",
     "IRC display name width": "IRC display name width",
+    "Use IRC layout": "Use IRC layout",
     "Collecting app version information": "Collecting app version information",
     "Collecting logs": "Collecting logs",
     "Uploading report": "Uploading report",
@@ -770,6 +771,7 @@
     "Downloading update...": "Downloading update...",
     "New version available. <a>Update now.</a>": "New version available. <a>Update now.</a>",
     "Check for update": "Check for update",
+    "Hey you. You're the best!": "Hey you. You're the best!",
     "Size must be a number": "Size must be a number",
     "Custom font size can only be between %(min)s pt and %(max)s pt": "Custom font size can only be between %(min)s pt and %(max)s pt",
     "Use between %(min)s pt and %(max)s pt": "Use between %(min)s pt and %(max)s pt",
@@ -779,7 +781,9 @@
     "Custom theme URL": "Custom theme URL",
     "Add theme": "Add theme",
     "Theme": "Theme",
-    "Hey you. You're the best!": "Hey you. You're the best!",
+    "Message layout": "Message layout",
+    "Compact": "Compact",
+    "Modern": "Modern",
     "Customise your appearance": "Customise your appearance",
     "Appearance Settings only affect this Riot session.": "Appearance Settings only affect this Riot session.",
     "Flair": "Flair",
diff --git a/src/settings/Settings.js b/src/settings/Settings.js
index da8a4e7ad1..c1ec1adb86 100644
--- a/src/settings/Settings.js
+++ b/src/settings/Settings.js
@@ -153,7 +153,7 @@ export const SETTINGS = {
     },
     "feature_irc_ui": {
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
-        displayName: _td('Use IRC layout'),
+        displayName: _td('Enable IRC layout option in the appearance tab'),
         default: false,
         isFeature: true,
     },
@@ -545,4 +545,9 @@ export const SETTINGS = {
         displayName: _td("IRC display name width"),
         default: 80,
     },
+    "useIRCLayout": {
+        supportedLevels: LEVELS_ACCOUNT_SETTINGS,
+        displayName: _td("Use IRC layout"),
+        default: false,
+    },
 };