diff --git a/template/app/view/ThumbList.js b/template/app/view/ThumbList.js
index 59516695b34b22cd05e41e4dd16354e320dc8ec5..83ac23a3aff2c84fe7b46827244e20f2fb1f59a8 100644
--- a/template/app/view/ThumbList.js
+++ b/template/app/view/ThumbList.js
@@ -4,6 +4,9 @@
 Ext.define('Docs.view.ThumbList', {
     extend: 'Ext.view.View',
     alias: 'widget.thumblist',
+    requires: [
+        'Docs.CommentCounts'
+    ],
 
     cls: 'thumb-list',
     itemSelector: 'dl',
@@ -14,6 +17,13 @@ Ext.define('Docs.view.ThumbList', {
      */
     urlField: 'url',
 
+    /**
+     * @cfg
+     * The type to use for retrieving comment counts.
+     * Should be either "guide" or "video".
+     */
+    commentType: "",
+
     /**
      * @cfg {String[]} itemTpl
      * The template to use for rendering a single item.
@@ -73,24 +83,45 @@ Ext.define('Docs.view.ThumbList', {
         this.itemTpl = undefined;
         this.data = undefined;
 
-        this.on({
-            'afterrender': function(cmp) {
-                cmp.el.addListener('mouseover', function(evt, el) {
-                    Ext.get(el).addCls('over');
-                }, this, {
-                    delegate: 'dd'
-                });
-                cmp.el.addListener('mouseout', function(evt, el) {
-                    Ext.get(el).removeCls('over');
-                }, this, {
-                    delegate: 'dd'
-                });
-            }
-        });
+        this.commentCountTpl = Ext.create('Ext.Template',
+            '<span class="toggleMemberComments">{0}</span>'
+        );
+
+        // Listen to viewready because the whole HTML is not yet
+        // rendered when afterrender fires - and initComments relies
+        // on the view being rendered fully.
+        this.on("viewready", function() {
+            this.initHover();
+            Docs.CommentCounts.afterLoaded(this.initComments, this);
+        }, this);
 
         this.callParent(arguments);
     },
 
+    initHover: function() {
+        this.getEl().on('mouseover', function(event, el) {
+            Ext.get(el).addCls('over');
+        }, this, {
+            delegate: 'dd'
+        });
+
+        this.getEl().on('mouseout', function(event, el) {
+            Ext.get(el).removeCls('over');
+        }, this, {
+            delegate: 'dd'
+        });
+    },
+
+    initComments: function() {
+        this.getEl().select("dd").each(function(dd) {
+            var name = dd.getAttributeNS("ext", this.urlField).replace(/^.*\//, "");
+            var count = Docs.CommentCounts.get(this.commentType, name);
+            if (count) {
+                this.commentCountTpl.append(dd.down("p"), [count]);
+            }
+        }, this);
+    },
+
     // Given groups data with subgroups like this:
     //
     // - group A
diff --git a/template/app/view/guides/Index.js b/template/app/view/guides/Index.js
index 8703fff13c9f3cbea04283c189ee9a34959ac6a5..75c5cec3bc578482859e25599a30b2535de2f388 100644
--- a/template/app/view/guides/Index.js
+++ b/template/app/view/guides/Index.js
@@ -4,9 +4,7 @@
 Ext.define('Docs.view.guides.Index', {
     extend: 'Ext.container.Container',
     alias: 'widget.guideindex',
-    requires: [
-        'Docs.view.ThumbList'
-    ],
+    requires: ['Docs.view.ThumbList'],
     mixins: ['Docs.view.Scrolling'],
 
     cls: 'iScroll',
@@ -17,6 +15,7 @@ Ext.define('Docs.view.guides.Index', {
         this.items = [
             { xtype: 'container', html: '<h1 class="eg">Guides</h1>' },
             Ext.create('Docs.view.ThumbList', {
+                type: "guide",
                 itemTpl: [
                     '<dd ext:url="#!/guide/{name}"><div class="thumb"><img src="guides/{name}/icon.png"/></div>',
                         '<div><h4>{title}</h4><p>{description}</p></div>',
diff --git a/template/app/view/videos/Index.js b/template/app/view/videos/Index.js
index 5ebd0e74d1f30b780117c455cbc663a5a25ee8ad..d4a7a61a55184ed5835328b7379d1a72d095e41c 100644
--- a/template/app/view/videos/Index.js
+++ b/template/app/view/videos/Index.js
@@ -17,6 +17,7 @@ Ext.define('Docs.view.videos.Index', {
         this.items = [
             { xtype: 'container', html: '<h1 class="eg">Videos</h1>' },
             Ext.create('Docs.view.ThumbList', {
+                type: "video",
                 itemTpl: [
                     '<dd ext:url="#!/video/{name}"><div class="thumb"><img src="{thumb}"/></div>',
                         '<div><h4>{title}',