diff --git a/app/assets/javascripts/wizard/components/theme-preview.js b/app/assets/javascripts/wizard/components/theme-preview.js
deleted file mode 100644
index 7ef561db1fb..00000000000
--- a/app/assets/javascripts/wizard/components/theme-preview.js
+++ /dev/null
@@ -1,127 +0,0 @@
-import {
-  LOREM,
-  chooseDarker,
-  createPreviewComponent,
-  darkLightDiff,
-} from "wizard/lib/preview";
-import discourseComputed, { observes } from "discourse-common/utils/decorators";
-import I18n from "I18n";
-
-export default createPreviewComponent(305, 165, {
-  logo: null,
-  avatar: null,
-
-  classNameBindings: ["isSelected"],
-
-  @discourseComputed("selectedId", "colorsId")
-  isSelected(selectedId, colorsId) {
-    return selectedId === colorsId;
-  },
-
-  click() {
-    this.onChange(this.colorsId);
-  },
-
-  @observes("step.fieldsById.base_scheme_id.value")
-  themeChanged() {
-    this.triggerRepaint();
-  },
-
-  images() {
-    return {
-      logo: this.wizard.getLogoUrl(),
-      avatar: "/images/wizard/trout.png",
-    };
-  },
-
-  paint({ ctx, colors, font, headingFont, width, height }) {
-    const headerHeight = height * 0.3;
-
-    this.drawFullHeader(colors, headingFont, this.logo);
-
-    const margin = width * 0.04;
-    const avatarSize = height * 0.2;
-    const lineHeight = height / 9.5;
-
-    // Draw a fake topic
-    this.scaleImage(
-      this.avatar,
-      margin,
-      headerHeight + height * 0.085,
-      avatarSize,
-      avatarSize
-    );
-
-    const titleFontSize = headerHeight / 44;
-
-    ctx.beginPath();
-    ctx.fillStyle = colors.primary;
-    ctx.font = `bold ${titleFontSize}em '${headingFont}'`;
-    ctx.fillText(I18n.t("wizard.previews.topic_title"), margin, height * 0.3);
-
-    const bodyFontSize = height / 220.0;
-    ctx.font = `${bodyFontSize}em '${font}'`;
-
-    let line = 0;
-    const lines = LOREM.split("\n");
-    for (let i = 0; i < 4; i++) {
-      line = height * 0.35 + i * lineHeight;
-      ctx.fillText(lines[i], margin + avatarSize + margin, line);
-    }
-
-    // Share Button
-    const shareButtonWidth = I18n.t("wizard.previews.share_button").length * 9;
-
-    ctx.beginPath();
-    ctx.rect(margin, line + lineHeight, shareButtonWidth, height * 0.14);
-    ctx.fillStyle = darkLightDiff(colors.primary, colors.secondary, 90, 65);
-    ctx.fill();
-    ctx.fillStyle = chooseDarker(colors.primary, colors.secondary);
-    ctx.font = `${bodyFontSize}em '${font}'`;
-    ctx.fillText(
-      I18n.t("wizard.previews.share_button"),
-      margin + 8,
-      line + lineHeight * 1.85
-    );
-
-    // Reply Button
-    const replyButtonWidth = I18n.t("wizard.previews.reply_button").length * 9;
-    ctx.beginPath();
-    ctx.rect(
-      shareButtonWidth + margin + 10,
-      line + lineHeight,
-      replyButtonWidth,
-      height * 0.14
-    );
-    ctx.fillStyle = colors.tertiary;
-    ctx.fill();
-    ctx.fillStyle = colors.secondary;
-    ctx.font = `${bodyFontSize}em '${font}'`;
-    ctx.fillText(
-      I18n.t("wizard.previews.reply_button"),
-      shareButtonWidth + margin + 18,
-      line + lineHeight * 1.85
-    );
-
-    // Draw Timeline
-    const timelineX = width * 0.8;
-    ctx.beginPath();
-    ctx.strokeStyle = colors.tertiary;
-    ctx.lineWidth = 0.5;
-    ctx.moveTo(timelineX, height * 0.3);
-    ctx.lineTo(timelineX, height * 0.7);
-    ctx.stroke();
-
-    // Timeline
-    ctx.beginPath();
-    ctx.strokeStyle = colors.tertiary;
-    ctx.lineWidth = 2;
-    ctx.moveTo(timelineX, height * 0.3);
-    ctx.lineTo(timelineX, height * 0.4);
-    ctx.stroke();
-
-    ctx.font = `Bold ${bodyFontSize}em ${font}`;
-    ctx.fillStyle = colors.primary;
-    ctx.fillText("1 / 20", timelineX + margin, height * 0.3 + margin * 1.5);
-  },
-});
diff --git a/app/assets/javascripts/wizard/lib/preview.js b/app/assets/javascripts/wizard/lib/preview.js
index 48a2e72e310..964691539a3 100644
--- a/app/assets/javascripts/wizard/lib/preview.js
+++ b/app/assets/javascripts/wizard/lib/preview.js
@@ -96,7 +96,7 @@ export function createPreviewComponent(width, height, obj) {
           return false;
         }
 
-        const colorsArray = this.wizard.getCurrentColors(this.colorsId);
+        const colorsArray = this.wizard.currentColors;
         if (!colorsArray) {
           return;
         }
@@ -107,11 +107,7 @@ export function createPreviewComponent(width, height, obj) {
           colors[name] = `#${c.hex}`;
         });
 
-        const font = this.wizard.getCurrentFont(this.fontId);
-        const headingFont = this.wizard.getCurrentFont(
-          this.fontId,
-          "heading_font"
-        );
+        const { font, headingFont } = this.wizard;
         if (!font) {
           return;
         }
diff --git a/app/assets/javascripts/wizard/models/wizard.js b/app/assets/javascripts/wizard/models/wizard.js
index 37af97a47cd..9f880c4e16a 100644
--- a/app/assets/javascripts/wizard/models/wizard.js
+++ b/app/assets/javascripts/wizard/models/wizard.js
@@ -25,63 +25,30 @@ const Wizard = EmberObject.extend(Evented, {
     return logoStep.get("fieldsById.logo.value");
   },
 
-  // A bit clunky, but get the current colors from the appropriate step
-  getCurrentColors(schemeId) {
+  get currentColors() {
     const colorStep = this.steps.findBy("id", "styling");
     if (!colorStep) {
       return this.current_color_scheme;
     }
 
-    const themeChoice = colorStep.get("fieldsById.color_scheme");
+    const themeChoice = colorStep.fieldsById.color_scheme;
     if (!themeChoice) {
       return;
     }
 
-    const themeId = schemeId ? schemeId : themeChoice.get("value");
-    if (!themeId) {
-      return;
-    }
-
-    const choices = themeChoice.get("choices");
-    if (!choices) {
-      return;
-    }
-
-    const option = choices.findBy("id", themeId);
-    if (!option) {
-      return;
-    }
-
-    return option.data.colors;
+    return themeChoice.choices?.findBy("id", themeChoice.value)?.data.colors;
   },
 
-  getCurrentFont(fontId, type = "body_font") {
-    const fontsStep = this.steps.findBy("id", "styling");
-    if (!fontsStep) {
-      return;
-    }
+  get font() {
+    const fontChoice = this.steps.findBy("id", "styling")?.fieldsById
+      ?.body_font;
+    return fontChoice.choices?.findBy("id", fontChoice.value)?.label;
+  },
 
-    const fontChoice = fontsStep.get(`fieldsById.${type}`);
-    if (!fontChoice) {
-      return;
-    }
-
-    const choiceId = fontId ? fontId : fontChoice.get("value");
-    if (!choiceId) {
-      return;
-    }
-
-    const choices = fontChoice.get("choices");
-    if (!choices) {
-      return;
-    }
-
-    const option = choices.findBy("id", choiceId);
-    if (!option) {
-      return;
-    }
-
-    return option.label;
+  get headingFont() {
+    const fontChoice = this.steps.findBy("id", "styling")?.fieldsById
+      ?.heading_font;
+    return fontChoice.choices?.findBy("id", fontChoice.value)?.label;
   },
 });