diff --git a/javascripts/discourse-category-previews/components/category-preview.js b/javascripts/discourse-category-previews/components/category-preview.js
index f806a7a..34ee24c 100644
--- a/javascripts/discourse-category-previews/components/category-preview.js
+++ b/javascripts/discourse-category-previews/components/category-preview.js
@@ -6,6 +6,7 @@ const rawCategoryPreviews = settings.category_previews.split("|");
 
 export default Component.extend({
   noCategoryStyle: equal("siteSettings.category_style", "none"),
+  boxStyle: equal("siteSettings.desktop_category_page_style", "categories_boxes"),
 
   @discourseComputed()
   preview() {
diff --git a/javascripts/discourse-category-previews/templates/connectors/category-box-before-each-box/category-preview-box-connector.hbs b/javascripts/discourse-category-previews/templates/connectors/category-box-before-each-box/category-preview-box-connector.hbs
new file mode 100644
index 0000000..96543ec
--- /dev/null
+++ b/javascripts/discourse-category-previews/templates/connectors/category-box-before-each-box/category-preview-box-connector.hbs
@@ -0,0 +1 @@
+{{category-preview tagName="" args=(hash category=category)}}
diff --git a/javascripts/discourse/templates/components/category-preview.hbs b/javascripts/discourse/templates/components/category-preview.hbs
index 57b80aa..6128f54 100644
--- a/javascripts/discourse/templates/components/category-preview.hbs
+++ b/javascripts/discourse/templates/components/category-preview.hbs
@@ -35,6 +35,48 @@
           </tbody>
         </table>
       </div>
+    {{else if boxStyle}}
+      <div style={{unless noCategoryStyle (border-color p.color)}} class="category category-box {{if noCategoryStyle "no-category-boxes-style"}} {{p.className}}">
+        <div class="category-box-inner">
+          <div class="category-logo">
+            {{#if p.uploaded_logo.url}}
+              {{cdn-img
+                src=p.uploaded_logo.url
+                class="logo"
+                width=p.uploaded_logo.width
+                height=p.uploaded_logo.height
+                alt=""
+              }}
+            {{/if}}
+          </div>
+          <div class="category-details">
+            <div class="category-box-heading">
+              {{#if p.href}}
+                <a class="parent-box-link" href={{p.href}}>
+                  <h3>
+                    {{#if (theme-setting 'locked_icon')}}
+                      {{d-icon (theme-setting 'locked_icon')}}
+                    {{/if}}
+                    {{p.title}}
+                  </h3>
+                </a>
+              {{else}}
+                <h3>
+                  {{#if (theme-setting 'locked_icon')}}
+                    {{d-icon (theme-setting 'locked_icon')}}
+                  {{/if}}
+                  {{p.title}}
+                </h3>
+              {{/if}}
+            </div>
+            {{#if p.description}}
+              <div class="description">
+                {{html-safe p.description}}
+              </div>
+            {{/if}}
+          </div>
+        </div>
+      </div>
     {{else}}
       <tr class={{p.className}}>
         <td colspan=2 class="category {{if noCategoryStyle "no-category-style"}}" style={{unless noCategoryStyle (border-color p.color)}}>
@@ -58,7 +100,7 @@
             {{/if}}
           </h3>
           {{#if p.description}}
-            <div class="category-description">{{p.description}}</div>
+            <div class="category-description">{{html-safe p.description}}</div>
           {{/if}}
         </td>
       </tr>