diff --git a/app/assets/javascripts/discourse/templates/mobile/components/categories-only.hbs b/app/assets/javascripts/discourse/templates/mobile/components/categories-only.hbs
new file mode 100644
index 00000000000..8f064ab82d8
--- /dev/null
+++ b/app/assets/javascripts/discourse/templates/mobile/components/categories-only.hbs
@@ -0,0 +1,59 @@
+{{#if categories}}
+  <div class="category-list {{if showTopics 'with-topics'}}">
+    {{#each categories as |c|}}
+      <div class='category-list-item category' style={{border-color c.color}}>
+        <table class='topic-list'>
+          <tr>
+            <th class="main-link">
+              {{category-title-link category=c}}
+            </th>
+          </tr>
+
+          {{#if c.description_excerpt}}
+            <tr class="category-description">
+              <td colspan="3">
+                {{{c.description_excerpt}}}
+              </td>
+            </tr>
+          {{/if}}
+
+          {{#if showTopics}}
+            {{#each c.topics as |t|}}
+              {{mobile-category-topic topic=t}}
+            {{/each}}
+          {{/if}}
+
+          {{#if c.subcategories}}
+            <tr class="subcategories-list">
+              <td>
+                <div class='subcategories'>
+                  {{#each c.subcategories as |subcategory|}}
+                    {{category-link subcategory}}
+                  {{/each}}
+                </div>
+              </td>
+            </tr>
+          {{/if}}
+
+        </table>
+        <footer class="clearfix">
+
+          <figure title="{{i18n 'all_time_desc'}}">{{number c.topics_all_time}} <figcaption>{{i18n 'all_time'}}</figcaption></figure>
+
+          {{#if c.pickMonth}}
+          <figure title="{{i18n 'month_desc'}}">{{number c.topics_month}} <figcaption>{{i18n 'month'}}</figcaption></figure>
+          {{/if}}
+
+          {{#if c.pickWeek}}
+            <figure title="{{i18n 'week_desc'}}">{{number c.topics_week}} <figcaption>{{i18n 'week'}}</figcaption></figure>
+          {{/if}}
+
+          {{#if c.can_edit}}
+            <a href {{action "editCategory" c}} class='btn btn-small'>{{i18n 'category.edit'}}</a>
+          {{/if}}
+
+        </footer>
+      </div>
+    {{/each}}
+  </div>
+{{/if}}
diff --git a/app/assets/javascripts/discourse/templates/mobile/components/categories-with-featured-topics.hbs b/app/assets/javascripts/discourse/templates/mobile/components/categories-with-featured-topics.hbs
new file mode 100644
index 00000000000..9243d150285
--- /dev/null
+++ b/app/assets/javascripts/discourse/templates/mobile/components/categories-with-featured-topics.hbs
@@ -0,0 +1,3 @@
+{{categories-only categories=categories
+                  latestTopicOnly=latestTopicOnly
+                  showTopics="true"}}
diff --git a/app/assets/javascripts/discourse/templates/mobile/discovery/categories.hbs b/app/assets/javascripts/discourse/templates/mobile/discovery/categories.hbs
index 2c93702e92f..29d0abb762b 100644
--- a/app/assets/javascripts/discourse/templates/mobile/discovery/categories.hbs
+++ b/app/assets/javascripts/discourse/templates/mobile/discovery/categories.hbs
@@ -1,53 +1,6 @@
-{{#each model.categories as |c|}}
-  <div class='category-list-item category' style={{border-color c.color}}>
-    <table class='topic-list'>
-      <tr>
-        <th class="main-link">
-          {{category-title-link category=c}}
-        </th>
-      </tr>
-
-      {{#if c.description_excerpt}}
-        <tr class="category-description">
-          <td colspan="3">
-            {{{c.description_excerpt}}}
-          </td>
-        </tr>
-      {{/if}}
-
-      {{#each c.topics as |t|}}
-        {{mobile-category-topic topic=t}}
-      {{/each}}
-
-      {{#if c.subcategories}}
-        <tr class="subcategories-list">
-          <td>
-            <div class='subcategories'>
-              {{#each c.subcategories as |subcategory|}}
-                {{category-link subcategory}}
-              {{/each}}
-            </div>
-          </td>
-        </tr>
-      {{/if}}
-
-    </table>
-    <footer class="clearfix">
-
-      <figure title="{{i18n 'all_time_desc'}}">{{number c.topics_all_time}} <figcaption>{{i18n 'all_time'}}</figcaption></figure>
-
-      {{#if c.pickMonth}}
-      <figure title="{{i18n 'month_desc'}}">{{number c.topics_month}} <figcaption>{{i18n 'month'}}</figcaption></figure>
-      {{/if}}
-
-      {{#if c.pickWeek}}
-        <figure title="{{i18n 'week_desc'}}">{{number c.topics_week}} <figcaption>{{i18n 'week'}}</figcaption></figure>
-      {{/if}}
-
-      {{#if c.can_edit}}
-        <a href {{action "editCategory" c}} class='btn btn-small'>{{i18n 'category.edit'}}</a>
-      {{/if}}
-
-    </footer>
-  </div>
-{{/each}}
+{{#discovery-categories refresh="refresh"}}
+  {{component categoryPageStyle
+              categories=model.categories
+              latestTopicOnly=latestTopicOnly
+              topics=model.topics}}
+{{/discovery-categories}}
\ No newline at end of file
diff --git a/app/assets/stylesheets/common/base/category-list.scss b/app/assets/stylesheets/common/base/category-list.scss
new file mode 100644
index 00000000000..4818ecc2d0d
--- /dev/null
+++ b/app/assets/stylesheets/common/base/category-list.scss
@@ -0,0 +1,136 @@
+.category-boxes, .category-boxes-with-topics {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  width: 100%;
+
+  .category-box {
+    display: flex;
+    flex-direction: row;
+    align-content: flex-start;
+
+    box-sizing: border-box;
+    border: 2px solid blend-primary-secondary(20%);
+
+    .mobile-view & {
+      width: 100%;
+    }
+
+    .logo {
+      display: block;
+      height: 40px;
+      margin: 0 auto 1em auto;
+    }
+
+    h3 .fa {
+      color: $primary;
+    }
+  }
+
+  &.no-logos {
+    .logo {
+      display: none;
+    }
+  }
+}
+
+.category-boxes {
+  .category-box {
+    width: 23%;
+    margin: 0 1% 1.5em 1%;
+    > a {
+      width: 100%;
+      padding: 0;
+    }
+  }
+
+  .category-box-heading {
+    padding: 1em 1em 0 1em;
+  }
+
+  .description {
+    padding: 0 1em 1em 1em;
+    text-align: center;
+    font-size: 1.05em;
+    color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));
+    .overflow {
+      max-height: 6em;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  h3 {
+    font-size: 1.5em;
+    margin-bottom: 0.5em;
+    margin-top: 0.25em;
+    line-height: 1.1em;
+    text-align: center;
+  }
+
+  &.no-logos {
+    .category-box a {
+      padding: 3em 1em;
+    }
+  }
+}
+
+.category-boxes-with-topics {
+  .category-box {
+    width: 31%;
+    margin: 0 1% 1.5em 1%;
+    padding: 0;
+    border-width: 0 0 0 6px;
+    border-style: solid;
+    border-color: blend-primary-secondary(20%);
+  }
+  .category-box-inner {
+    width: 100%;
+    padding: 0;
+    border-width: 2px 2px 2px 0;
+    border-style: solid;
+    border-color: blend-primary-secondary(20%);
+  }
+
+  h3 {
+    font-size: 1.2em;
+    text-align: center;
+  }
+
+  .category-box-heading {
+    padding: 1em 1em 0.5em 1em;
+    a[href] {
+      width: 100%;
+      color: $primary;
+    }
+  }
+
+  .featured-topics {
+    padding: 0.5em 1em 1em 1em;
+    ul {
+      color: blend-primary-secondary(70%);
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+    li {
+      padding: 0;
+      margin-left: 1.5em;
+      .overflow {
+        max-height: 3em;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+    li:before {
+      content: '\f0f6';
+      font-family: 'FontAwesome';
+      float: left;
+      margin-left: -1.5em;
+    }
+    li.topic-pinned:before { content: '\f08d'; }
+    li.topic-closed:before, li.topic-archived:before { content: '\f023'; }
+  }
+}
diff --git a/app/assets/stylesheets/desktop/category-list.scss b/app/assets/stylesheets/desktop/category-list.scss
index 2a6a53add6a..d33120135f9 100644
--- a/app/assets/stylesheets/desktop/category-list.scss
+++ b/app/assets/stylesheets/desktop/category-list.scss
@@ -176,140 +176,3 @@
     }
   }
 }
-
-.category-boxes, .category-boxes-with-topics {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  margin-top: 1em;
-  margin-bottom: 1em;
-  width: 100%;
-
-  .category-box {
-    display: flex;
-    flex-direction: row;
-    align-content: flex-start;
-
-    box-sizing: border-box;
-    border: 2px solid blend-primary-secondary(20%);
-
-    .mobile-view & {
-      width: 100%;
-    }
-
-    .logo {
-      display: block;
-      height: 40px;
-      margin: 0 auto 1em auto;
-    }
-
-    h3 .fa {
-      color: $primary;
-    }
-  }
-
-  &.no-logos {
-    .logo {
-      display: none;
-    }
-  }
-}
-
-.category-boxes {
-  .category-box {
-    width: 23%;
-    margin: 0 1% 1.5em 1%;
-    > a {
-      width: 100%;
-      padding: 0;
-    }
-  }
-
-  .category-box-heading {
-    padding: 1em 1em 0 1em;
-  }
-
-  .description {
-    padding: 0 1em 1em 1em;
-    text-align: center;
-    font-size: 1.05em;
-    color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));
-    .overflow {
-      max-height: 6em;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  h3 {
-    font-size: 1.5em;
-    margin-bottom: 0.5em;
-    margin-top: 0.25em;
-    line-height: 1.1em;
-    text-align: center;
-  }
-
-  &.no-logos {
-    .category-box a {
-      padding: 3em 1em;
-    }
-  }
-}
-
-.category-boxes-with-topics {
-  .category-box {
-    width: 31%;
-    margin: 0 1% 1.5em 1%;
-    padding: 0;
-    border-width: 0 0 0 6px;
-    border-style: solid;
-    border-color: blend-primary-secondary(20%);
-  }
-  .category-box-inner {
-    width: 100%;
-    padding: 0;
-    border-width: 2px 2px 2px 0;
-    border-style: solid;
-    border-color: blend-primary-secondary(20%);
-  }
-
-  h3 {
-    font-size: 1.2em;
-    text-align: center;
-  }
-
-  .category-box-heading {
-    padding: 1em 1em 0.5em 1em;
-    a[href] {
-      width: 100%;
-      color: $primary;
-    }
-  }
-
-  .featured-topics {
-    padding: 0.5em 1em 1em 1em;
-    ul {
-      color: blend-primary-secondary(70%);
-      list-style: none;
-      padding: 0;
-      margin: 0;
-    }
-    li {
-      padding: 0;
-      margin-left: 1.5em;
-      .overflow {
-        max-height: 3em;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-    li:before {
-      content: '\f0f6';
-      font-family: 'FontAwesome';
-      float: left;
-      margin-left: -1.5em;
-    }
-    li.topic-pinned:before { content: '\f08d'; }
-    li.topic-closed:before, li.topic-archived:before { content: '\f023'; }
-  }
-}
diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
index 17644a5f27c..d66aa8115ac 100644
--- a/app/assets/stylesheets/mobile/topic-list.scss
+++ b/app/assets/stylesheets/mobile/topic-list.scss
@@ -130,8 +130,31 @@
 
 // Category list
 // --------------------------------------------------
-.categories-list .list-container {
-  margin-left: -10px; // Extend past the .wrap padding to the edge of the window
+.categories-list .category-list {
+  margin-left: -10px;
+  margin-bottom: 2em;
+
+  td {
+    padding: 12px 5px;
+    color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));
+    vertical-align: top;
+  }
+
+  td:first-of-type {
+    padding-left: 10px;
+  }
+
+  tbody {
+    tr {
+      border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
+      &:first-of-type {
+        border-top: 3px solid dark-light-diff($primary, $secondary, 90%, -75%);
+      }
+    }
+    .category {
+      border-left: 6px solid;
+    }
+  }
 }
 
 .category-list-item.category {
@@ -277,6 +300,11 @@ tr.category-topic-link {
   }
 }
 
+.category-box {
+  h3 {
+    margin: 0 0 0.5em 0;
+  }
+}
 
 .topic-list-bottom {
   margin: 20px 0 0 0;
@@ -391,6 +419,7 @@ ol.category-breadcrumb {
 .category-logo {
   display: block;
   max-width: 100%;
+  max-height: 150px;
   padding: 8px 0;
 }
 
@@ -420,6 +449,6 @@ td .main-link {
   }
 }
 
-.category-list-item .category-description {
+.category-list.with-topics .category-list-item .category-description {
   display: none;
 }