diff --git a/frontend_tests/node_tests/templates.js b/frontend_tests/node_tests/templates.js
index 4f81f162c7..2f303accae 100644
--- a/frontend_tests/node_tests/templates.js
+++ b/frontend_tests/node_tests/templates.js
@@ -828,6 +828,13 @@ function render(template_name, args) {
     assert($(html).find(".message_reaction").has(".emoji .emoji-smile"));
 }());
 
+(function more_topics() {
+    var html = render('more_topics');
+    global.write_handlebars_output("more_topics", html);
+
+    assert($(html).hasClass('show-more-topics'));
+}());
+
 (function new_stream_users() {
     var args = {
         users: [
diff --git a/frontend_tests/node_tests/topic_list.js b/frontend_tests/node_tests/topic_list.js
index 3364447e90..e285c678fd 100644
--- a/frontend_tests/node_tests/topic_list.js
+++ b/frontend_tests/node_tests/topic_list.js
@@ -82,7 +82,13 @@ zrequire('topic_list');
 
     assert.equal(topic_list.active_stream_id(), undefined);
 
-    var widget = topic_list.rebuild(parent_elem, stream_id);
+    var widget = topic_list.widget(parent_elem, stream_id);
+
+    widget.build_more_topics_section = function () {
+        return $('<more topics>');
+    };
+
+    widget.build();
 
     assert(widget.is_for_stream(stream_id));
     assert.equal(widget.get_parent(), parent_elem);
@@ -90,8 +96,7 @@ zrequire('topic_list');
     assert(checked_mutes);
     assert(rendered);
     assert.equal(list_items[0].html(), '<topic list item>');
-    assert.equal(list_items[1], $('<li class="show-more-topics">'));
+    assert.equal(list_items[1].html(), '<more topics>');
     assert(attached_to_parent);
 
-    assert.equal(topic_list.active_stream_id(), stream_id);
 }());
diff --git a/static/js/topic_list.js b/static/js/topic_list.js
index 76c07cdbc6..2830c3a6e9 100644
--- a/static/js/topic_list.js
+++ b/static/js/topic_list.js
@@ -94,22 +94,17 @@ exports.widget = function (parent_elem, my_stream_id) {
             ul.append(li);
         });
 
-        // We should actually only show more topics when we're zoomed out, although
-        // CSS makes this fine for now.
-        var show_more_topics_link = true;
-
-        if (show_more_topics_link) {
-            var show_more = $('<li class="show-more-topics">');
-            show_more.attr('data-stream', my_stream_name);
-            var link = $('<a href="#">');
-            link.html(i18n.t('more topics'));
-            show_more.html(link);
-            ul.append(show_more);
-        }
+        var show_more = self.build_more_topics_section();
+        ul.append(show_more);
 
         return ul;
     };
 
+    self.build_more_topics_section = function () {
+        var show_more_html = templates.render('more_topics');
+        return $(show_more_html);
+    };
+
     self.get_parent = function () {
         return parent_elem;
     };
@@ -180,8 +175,6 @@ exports.rebuild = function (stream_li, stream_id) {
     exports.remove_expanded_topics();
     active_widget = exports.widget(stream_li, stream_id);
     active_widget.build(active_topic);
-
-    return active_widget; // used for testing
 };
 
 // For zooming, we only do topic-list stuff here...let stream_list
diff --git a/static/templates/more_topics.handlebars b/static/templates/more_topics.handlebars
new file mode 100644
index 0000000000..93fda9406b
--- /dev/null
+++ b/static/templates/more_topics.handlebars
@@ -0,0 +1,3 @@
+<li class="show-more-topics">
+    <a href="#">{{t "more topics" }}</a>
+</li>