diff --git a/app/assets/javascripts/discourse/components/categories-only.js.es6 b/app/assets/javascripts/discourse/components/categories-only.js.es6
new file mode 100644
index 00000000000..9250c1ae73b
--- /dev/null
+++ b/app/assets/javascripts/discourse/components/categories-only.js.es6
@@ -0,0 +1,3 @@
+export default Ember.Component.extend({
+  tagName: ''
+});
diff --git a/app/assets/javascripts/discourse/components/latest-topic-list-item.js.es6 b/app/assets/javascripts/discourse/components/latest-topic-list-item.js.es6
index 07a4c53b2f5..f92992e6f18 100644
--- a/app/assets/javascripts/discourse/components/latest-topic-list-item.js.es6
+++ b/app/assets/javascripts/discourse/components/latest-topic-list-item.js.es6
@@ -1,6 +1,7 @@
 import { showEntrance } from "discourse/components/topic-list-item";
 
 export default Ember.Component.extend({
-  tagName: "tr",
   click: showEntrance,
+  attributeBindings: ['topic.id:data-topic-id'],
+  classNameBindings: [':latest-topic-list-item', 'topic.archived']
 });
diff --git a/app/assets/javascripts/discourse/components/latest-topic-list.js.es6 b/app/assets/javascripts/discourse/components/latest-topic-list.js.es6
new file mode 100644
index 00000000000..664eb94c31e
--- /dev/null
+++ b/app/assets/javascripts/discourse/components/latest-topic-list.js.es6
@@ -0,0 +1,3 @@
+export default Ember.Component.extend({
+  classNames: ['latest-topic-list']
+});
diff --git a/app/assets/javascripts/discourse/templates/components/categories-and-latest-topics.hbs b/app/assets/javascripts/discourse/templates/components/categories-and-latest-topics.hbs
index c837733c189..1a32cea92d3 100644
--- a/app/assets/javascripts/discourse/templates/components/categories-and-latest-topics.hbs
+++ b/app/assets/javascripts/discourse/templates/components/categories-and-latest-topics.hbs
@@ -1,29 +1,7 @@
-{{categories-only categories=categories}}
+<div class='column categories'>
+  {{categories-only categories=categories}}
+</div>
 
-<table class="topic-list topic-list-latest">
-  <thead>
-    <tr>
-      <th class="latest">{{i18n "filters.latest.title"}}</th>
-    </tr>
-  </thead>
-  <tbody>
-    {{#if topics}}
-      {{#each topics as |t|}}
-        {{latest-topic-list-item topic=t}}
-      {{/each}}
-      <tr class="more-topics">
-        <td>
-          <a href="/latest" class="btn pull-right">{{i18n "more"}}</a>
-        </td>
-      </tr>
-    {{else}}
-      <tr class="no-topics">
-        <td>
-          <h3>{{i18n "topics.none.latest"}}</h3>
-        </td>
-      </tr>
-    {{/if}}
-  </tbody>
-</table>
-
-<div class="clearfix"></div>
+<div class='column'>
+  {{latest-topic-list topics=topics}}
+</div>
diff --git a/app/assets/javascripts/discourse/templates/components/latest-topic-list-item.hbs b/app/assets/javascripts/discourse/templates/components/latest-topic-list-item.hbs
index ab80c70c21f..a3666f6842d 100644
--- a/app/assets/javascripts/discourse/templates/components/latest-topic-list-item.hbs
+++ b/app/assets/javascripts/discourse/templates/components/latest-topic-list-item.hbs
@@ -1,33 +1,25 @@
-<table>
-  <tbody>
-    <tr data-topic-id={{topic.id}} class="{{if topic.archived 'archived'}}">
-      <td class="topic-poster">
-        {{#with topic.lastPoster as |lastPoster|}}
-          {{#user-link user=lastPoster}}
-            {{avatar lastPoster imageSize="large"}}
-          {{/user-link}}
-        {{/with}}
-      </td>
-      <td class="main-link">
-        <tr>
-          {{raw "topic-status" topic=topic}}
-          {{topic-link topic}}
-          {{#if topic.featured_link}}
-            {{topic-featured-link topic}}
-          {{/if}}
-          {{topic-post-badges newPosts=topic.totalUnread unseen=topic.unseen url=topic.lastUnreadUrl}}
-        </tr>
-        <tr>
-          {{category-link topic.category}}
-          {{discourse-tags topic mode="list"}}
-        </tr>
-      </td>
-      <td class="topic-stats">
-        {{raw "list/posts-count-column" topic=topic tagName="div"}}
-        <div class="topic-last-activity">
-          <a href="{{topic.lastPostUrl}}" title="{{topic.bumpedAtTitle}}">{{format-date topic.bumpedAt format="tiny" noTitle="true"}}</a>
-        </div>
-      </td>
-    </tr>
-  </tbody>
-</table>
+<div class='topic-poster'>
+  {{#user-link user=topic.lastPoster}}
+    {{avatar topic.lastPoster imageSize="large"}}
+  {{/user-link}}
+</div>
+<div class='main-link'>
+  <div class='top-row'>
+    {{raw "topic-status" topic=topic}}
+    {{topic-link topic}}
+    {{#if topic.featured_link}}
+      {{topic-featured-link topic}}
+    {{/if}}
+    {{topic-post-badges newPosts=topic.totalUnread unseen=topic.unseen url=topic.lastUnreadUrl}}
+  </div>
+  <div class='bottom-row'>
+    {{category-link topic.category}}
+    {{discourse-tags topic mode="list"}}
+  </div>
+</div>
+<div class='topic-stats'>
+  {{raw "list/posts-count-column" topic=topic tagName="div"}}
+  <div class="topic-last-activity">
+    <a href="{{topic.lastPostUrl}}" title="{{topic.bumpedAtTitle}}">{{format-date topic.bumpedAt format="tiny" noTitle="true"}}</a>
+  </div>
+</div>
diff --git a/app/assets/javascripts/discourse/templates/components/latest-topic-list.hbs b/app/assets/javascripts/discourse/templates/components/latest-topic-list.hbs
new file mode 100644
index 00000000000..fa79f98fb93
--- /dev/null
+++ b/app/assets/javascripts/discourse/templates/components/latest-topic-list.hbs
@@ -0,0 +1,16 @@
+<div class='table-heading'>
+  {{i18n "filters.latest.title"}}
+</div>
+
+{{#if topics}}
+  {{#each topics as |t|}}
+    {{latest-topic-list-item topic=t}}
+  {{/each}}
+  <div class="more-topics">
+    <a href="/latest" class="btn pull-right">{{i18n "more"}}</a>
+  </div>
+{{else}}
+  <div class='no-topics'>
+    <h3>{{i18n "topics.none.latest"}}</h3>
+  </div>
+{{/if}}
diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss
index 73460e47c32..ccd2ff1c072 100644
--- a/app/assets/stylesheets/common/base/_topic-list.scss
+++ b/app/assets/stylesheets/common/base/_topic-list.scss
@@ -19,6 +19,25 @@
 html.anon .topic-list a.title:visited:not(.badge-notification) {color: $primary-medium; }
 .topic-list a.title.visited:not(.badge-notification) {color: $primary-medium; }
 
+.topic-list-main-link {
+  font-size: 1.143em;
+  a.title {
+    padding: 15px 0;
+    word-break: break-word;
+    color: $primary;
+  }
+
+  .anon & {
+    a.title:visited:not(.badge-notification) {
+      color: $primary-medium;
+    }
+  }
+
+  a.title.visited:not(.badge-notification) {
+    color: $primary-medium;
+  }
+}
+
 .topic-list {
   width: 100%;
   border-collapse: collapse;
@@ -58,7 +77,7 @@ html.anon .topic-list a.title:visited:not(.badge-notification) {color: $primary-
   }
 
   > tbody > tr:first-of-type {
-    border-top: 3px solid $primary-low; 
+    border-top: 3px solid $primary-low;
   }
 
   th,
@@ -81,11 +100,7 @@ html.anon .topic-list a.title:visited:not(.badge-notification) {color: $primary-
   }
 
   .main-link {
-    font-size: 1.143em;
-    a.title {
-      padding: 15px 0;
-      word-break: break-word;
-    }
+    @extend .topic-list-main-link;
   }
 
   .topic-featured-link {
@@ -344,3 +359,14 @@ ol.category-breadcrumb {
 div.education {
   color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
 }
+
+.list-cell {
+  padding: 12px 5px;
+  color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));
+}
+
+.table-heading {
+  @extend .list-cell;
+  border-bottom: 2px solid $primary-low;
+}
+
diff --git a/app/assets/stylesheets/desktop.scss b/app/assets/stylesheets/desktop.scss
index 71f19278eda..211ed21e229 100644
--- a/app/assets/stylesheets/desktop.scss
+++ b/app/assets/stylesheets/desktop.scss
@@ -11,6 +11,7 @@
 @import "desktop/modal";
 @import "desktop/user-card";
 @import "desktop/category-list";
+@import "desktop/latest-topic-list";
 @import "desktop/topic-list";
 @import "desktop/topic-post";
 @import "desktop/topic";
diff --git a/app/assets/stylesheets/desktop/category-list.scss b/app/assets/stylesheets/desktop/category-list.scss
index e6926808ede..fb2de653449 100644
--- a/app/assets/stylesheets/desktop/category-list.scss
+++ b/app/assets/stylesheets/desktop/category-list.scss
@@ -3,8 +3,7 @@
   width: 100%;
 
   td, th {
-    padding: 12px 5px;
-    color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));
+    @extend .list-cell;
   }
 
   td {
@@ -90,9 +89,9 @@
 
   tbody {
     tr {
-      border-bottom: 1px solid $primary-low; 
+      border-bottom: 1px solid $primary-low;
       &:first-of-type {
-        border-top: 3px solid $primary-low; 
+        border-top: 3px solid $primary-low;
       }
     }
 
@@ -116,38 +115,15 @@
 }
 
 .categories-and-latest {
+  display: flex;
+  flex-direction: row;
 
-  .category-list,
-  .topic-list-latest {
-    width: 48%;
+  div.column {
+    flex: 1;
   }
 
-  .category-list {
-    float: left;
-  }
-
-  .topic-list-latest {
-    float: right;
-    th.latest {
-      line-height: 19px;
-    }
-  }
-
-  .main-link {
-    width: 100%;
-  }
-
-  .new-posts {
-    margin-left: 6px;
-  }
-
-  .topic-stats {
-    text-align: right;
-    color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));
-  }
-
-  .topic-last-activity a {
-    color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));
+  div.column.categories {
+    margin-right: 2em;
   }
 
   .discourse-tag {
@@ -157,25 +133,5 @@
   .topic-featured-link {
     padding-left: 8px;
   }
-
-  .topic-list {
-    .posts {
-      width: 100%;
-      text-align: right;
-      margin-bottom: 10px;
-    }
-
-    .num.posts a {
-      padding: 0;
-    }
-
-    .more-topics,
-    .no-topics {
-      border-bottom: none;
-      td {
-        padding-right: 0;
-        color: $primary;
-      }
-    }
-  }
 }
+
diff --git a/app/assets/stylesheets/desktop/latest-topic-list.scss b/app/assets/stylesheets/desktop/latest-topic-list.scss
new file mode 100644
index 00000000000..db703a77b3d
--- /dev/null
+++ b/app/assets/stylesheets/desktop/latest-topic-list.scss
@@ -0,0 +1,41 @@
+.latest-topic-list {
+  @extend .topic-list-icons;
+
+  .table-heading {
+    padding: 12px 5px;
+    color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));
+  }
+
+  .no-topics, .more-topics {
+    margin-top: 1em;
+  }
+}
+
+.latest-topic-list-item {
+  padding: 1em;
+  border-bottom: 1px solid $primary-low;
+  display: flex;
+
+  align-items: center;
+
+  .topic-poster {
+    width: 60px;
+  }
+  .main-link {
+    @extend .topic-list-main-link;
+    flex: 15;
+
+    .top-row {
+      margin-bottom: 0.1em;
+    }
+  }
+  .topic-stats {
+    flex: 1;
+    text-align: right;
+    color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));
+  }
+
+  .topic-last-activity a {
+    color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));
+  }
+}
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index f877f044d6a..0754158f88d 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/app/assets/stylesheets/desktop/topic-list.scss
@@ -33,12 +33,17 @@
 // Base list
 // --------------------------------------------------
 
-.topic-list {
-  margin: 0 0 10px;
+.topic-list-icons {
   .d-icon-thumb-tack { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); }
   .d-icon-thumb-tack.unpinned { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); }
   a.title {color: $primary;}
   .d-icon-bookmark { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); }
+}
+
+.topic-list {
+  @extend .topic-list-icons;
+
+  margin: 0 0 10px;
   th,
   td {
     padding: 12px 5px;