diff --git a/src/components/views/elements/MessagePreview.tsx b/src/components/views/elements/MessagePreview.tsx
index 6a0fa9a756..3be0a16781 100644
--- a/src/components/views/elements/MessagePreview.tsx
+++ b/src/components/views/elements/MessagePreview.tsx
@@ -14,14 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { MatrixClientPeg } from '../../../MatrixClientPeg';
-
 import React from 'react';
-
-import * as Avatar from '../../../Avatar';
 import classnames from 'classnames';
 import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
-import * as sdk from "../../../index";
+
+import * as Avatar from '../../../Avatar';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
+import EventTile from '../rooms/EventTile';
 
 interface IProps {
     /**
@@ -42,8 +41,8 @@ interface IProps {
 
 interface IState {
     userId: string;
-    displayname: string,
-    avatar_url: string,
+    displayname: string;
+    avatar_url: string;
 }
 
 const AVATAR_SIZE = 32;
@@ -62,7 +61,8 @@ export default class MessagePreview extends React.Component<IProps, IState> {
     async componentDidMount() {
         // Fetch current user data
         const client = MatrixClientPeg.get()
-        const userId = await client.getUserId();
+        const userId = client.getUserId();
+        console.log({userId})
         const profileInfo = await client.getProfileInfo(userId);
         const avatar_url = Avatar.avatarUrlForUser(
             {avatarUrl: profileInfo.avatar_url},
@@ -76,24 +76,22 @@ export default class MessagePreview extends React.Component<IProps, IState> {
 
     }
 
-    public render() {
-        const EventTile = sdk.getComponent("views.rooms.EventTile");
-
+    private fakeEvent({userId, displayname, avatar_url}: IState) {
         // Fake it till we make it
         const event = new MatrixEvent(JSON.parse(`{
                 "type": "m.room.message",
-                "sender": "${this.state.userId}",
+                "sender": "${userId}",
                 "content": {
                   "m.new_content": {
                     "msgtype": "m.text",
                     "body": "${this.props.message}",
-                    "displayname": "${this.state.displayname}",
-                    "avatar_url": "${this.state.avatar_url}"
+                    "displayname": "${displayname}",
+                    "avatar_url": "${avatar_url}"
                   },
                   "msgtype": "m.text",
                   "body": "${this.props.message}",
-                  "displayname": "${this.state.displayname}",
-                  "avatar_url": "${this.state.avatar_url}"
+                  "displayname": "${displayname}",
+                  "avatar_url": "${avatar_url}"
                 },
                 "unsigned": {
                   "age": 97
@@ -104,13 +102,19 @@ export default class MessagePreview extends React.Component<IProps, IState> {
 
         // Fake it more
         event.sender = {
-            name: this.state.displayname,
-            userId: this.state.userId,
+            name: displayname,
+            userId: userId,
             getAvatarUrl: (..._) => {
-                return this.state.avatar_url;
+                return avatar_url;
             },
         }
 
+
+    }
+
+    public render() {
+        const event = this.fakeEvent(this.state);
+
         let className = classnames(
             this.props.className,
             {
@@ -119,7 +123,7 @@ export default class MessagePreview extends React.Component<IProps, IState> {
             }
         );
 
-        return <div className={className} >
+        return <div className={className}>
             <EventTile mxEvent={event} useIRCLayout={this.props.useIRCLayout} />
         </div>
     }
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
index 881868907d..f7fb479c12 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
@@ -19,7 +19,6 @@ limitations under the License.
 import React from 'react';
 import {_t} from "../../../../../languageHandler";
 import SettingsStore, {SettingLevel} from "../../../../../settings/SettingsStore";
-import * as sdk from "../../../../../index";
 import { enumerateThemes } from "../../../../../theme";
 import ThemeWatcher from "../../../../../settings/watchers/ThemeWatcher";
 import Field from "../../../elements/Field";
@@ -30,28 +29,32 @@ import { FontWatcher } from "../../../../../settings/watchers/FontWatcher";
 import { RecheckThemePayload } from '../../../../../dispatcher/payloads/RecheckThemePayload';
 import { Action } from '../../../../../dispatcher/actions';
 import { IValidationResult, IFieldState } from '../../../elements/Validation';
+import StyledRadioButton from '../../../elements/StyledRadioButton';
+import StyledCheckbox from '../../../elements/StyledCheckbox';
+import SettingsFlag from '../../../elements/SettingsFlag';
+import MessagePreview from '../../../elements/MessagePreview';
 
 interface IProps {
 }
 
 interface IThemeState {
-    theme: string,
-    useSystemTheme: boolean,
+    theme: string;
+    useSystemTheme: boolean;
 }
 
 export interface CustomThemeMessage {
-    isError: boolean,
-    text: string
+    isError: boolean;
+    text: string;
 };
 
 interface IState extends IThemeState {
     // String displaying the current selected fontSize.
     // Needs to be string for things like '17.' without
     // trailing 0s.
-    fontSize: string,
-    customThemeUrl: string,
-    customThemeMessage: CustomThemeMessage,
-    useCustomFontSize: boolean,
+    fontSize: string;
+    customThemeUrl: string;
+    customThemeMessage: CustomThemeMessage;
+    useCustomFontSize: boolean;
 }
 
 export default class AppearanceUserSettingsTab extends React.Component<IProps, IState> {
@@ -198,10 +201,6 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
     };
 
     private renderThemeSection() {
-        const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
-        const StyledCheckbox = sdk.getComponent("views.elements.StyledCheckbox");
-        const StyledRadioButton = sdk.getComponent("views.elements.StyledRadioButton");
-
         const themeWatcher = new ThemeWatcher();
         let systemThemeSection: JSX.Element;
         if (themeWatcher.isSystemThemeSupported()) {
@@ -279,15 +278,13 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
     }
 
     private renderFontSection() {
-        const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
-        const MessagePreview = sdk.getComponent("views.elements.MessagePreview");
-
         return <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_fontScaling">
 
             <span className="mx_SettingsTab_subheading">{_t("Font size")}</span>
             <MessagePreview
                 className="mx_AppearanceUserSettingsTab_fontSlider_preview"
-                message="Hey you. You're the best!"
+                message={_t("Hey you. You're the best!")}
+                useIRCLayout={false}
             />
             <div className="mx_AppearanceUserSettingsTab_fontSlider">
                 <div className="mx_AppearanceUserSettingsTab_fontSlider_smallText">Aa</div>
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index aacec471f6..dbc0db6861 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -779,6 +779,7 @@
     "Custom theme URL": "Custom theme URL",
     "Add theme": "Add theme",
     "Theme": "Theme",
+    "Hey you. You're the best!": "Hey you. You're the best!",
     "Customise your appearance": "Customise your appearance",
     "Appearance Settings only affect this Riot session.": "Appearance Settings only affect this Riot session.",
     "Flair": "Flair",