diff --git a/app/assets/javascripts/wizard/components/homepage-preview.js.es6 b/app/assets/javascripts/wizard/components/homepage-preview.js.es6
index 2ca082f62e6..6b68cba8bf1 100644
--- a/app/assets/javascripts/wizard/components/homepage-preview.js.es6
+++ b/app/assets/javascripts/wizard/components/homepage-preview.js.es6
@@ -16,11 +16,12 @@ export default createPreviewComponent(659, 320, {
 
   paint(ctx, colors, width, height) {
     this.drawFullHeader(colors);
-    this.drawPills(colors, height * 0.15);
 
     if (this.get('step.fieldsById.homepage_style.value') === "latest") {
+      this.drawPills(colors, height * 0.15);
       this.renderLatest(ctx, colors, width, height);
     } else {
+      this.drawPills(colors, height * 0.15, { categories: true });
       this.renderCategories(ctx, colors, width, height);
     }
   },
@@ -52,10 +53,7 @@ export default createPreviewComponent(659, 320, {
     drawLine(0, y);
     drawLine(width / 2, y);
 
-
-
     const categoryHeight = height / 6;
-
     const titles = this.getTitles();
 
     // Categories
diff --git a/app/assets/javascripts/wizard/lib/preview.js.es6 b/app/assets/javascripts/wizard/lib/preview.js.es6
index 11b49a31351..de1d0a132b4 100644
--- a/app/assets/javascripts/wizard/lib/preview.js.es6
+++ b/app/assets/javascripts/wizard/lib/preview.js.es6
@@ -139,7 +139,9 @@ export function createPreviewComponent(width, height, obj) {
       ctx.fillText("\uf002", width - (avatarSize * 3) - (headerMargin * 0.5), avatarSize);
     },
 
-    drawPills(colors, headerHeight) {
+    drawPills(colors, headerHeight, opts) {
+      opts = opts || {};
+
       const { ctx } = this;
 
       const categoriesSize = headerHeight * 2;
@@ -160,20 +162,21 @@ export function createPreviewComponent(width, height, obj) {
       ctx.fillStyle = colors.primary;
       ctx.fillText("\uf0da", categoriesSize - (headerMargin / 4), headerHeight + (headerMargin * 1.6) + fontSize);
 
-      // pills
+      const text = opts.categories ? "Categories" : "Latest";
+
+      const activeWidth = categoriesSize * (opts.categories ? 0.80 : 0.55);
       ctx.beginPath();
       ctx.fillStyle = colors.quaternary;
-      ctx.rect((headerMargin * 2)+ categoriesSize, headerHeight + headerMargin, categoriesSize * 0.55, badgeHeight);
+      ctx.rect((headerMargin * 2)+ categoriesSize, headerHeight + headerMargin, activeWidth, badgeHeight);
       ctx.fill();
 
       ctx.font = `${fontSize}px 'Arial'`;
       ctx.fillStyle = colors.secondary;
       let x = (headerMargin * 3.0) + categoriesSize;
-
-      ctx.fillText("Latest", x - (headerMargin * 0.1), headerHeight + (headerMargin * 1.5) + fontSize);
+      ctx.fillText(text, x - (headerMargin * 0.1), headerHeight + (headerMargin * 1.5) + fontSize);
 
       ctx.fillStyle = colors.primary;
-      x += categoriesSize * 0.6;
+      x += categoriesSize * (opts.categories ? 0.8 : 0.6);
       ctx.fillText("New", x, headerHeight + (headerMargin * 1.5) + fontSize);
 
       x += categoriesSize * 0.4;
diff --git a/lib/wizard/builder.rb b/lib/wizard/builder.rb
index f8a7360fa1c..9f9fad1371b 100644
--- a/lib/wizard/builder.rb
+++ b/lib/wizard/builder.rb
@@ -170,7 +170,10 @@ class Wizard
       end
 
       @wizard.append_step('homepage') do |step|
-        style = step.add_field(id: 'homepage_style', type: 'dropdown', required: true)
+
+        current = SiteSetting.top_menu.starts_with?("categories") ? "categories" : "latest"
+
+        style = step.add_field(id: 'homepage_style', type: 'dropdown', required: true, value: current)
         style.add_choice('latest')
         style.add_choice('categories')
         step.add_field(id: 'homepage_preview', type: 'component')