diff --git a/template/app/controller/Comments.js b/template/app/controller/Comments.js
index 2d450531f964147606b7511e5d06378a89d654ff..84ec77c2b7a52e71bc98710633c2df51fe2e0e53 100644
--- a/template/app/controller/Comments.js
+++ b/template/app/controller/Comments.js
@@ -29,6 +29,10 @@ Ext.define('Docs.controller.Comments', {
         {
             ref: 'index',
             selector: '#commentindex'
+        },
+        {
+            ref: 'commentsList',
+            selector: 'commentslist'
         }
     ],
 
@@ -135,7 +139,7 @@ Ext.define('Docs.controller.Comments', {
                 }
             },
 
-            'commentindex': {
+            'commentslist': {
                 settingChange: function() {
                     this.fetchRecentComments();
                 }
@@ -286,14 +290,14 @@ Ext.define('Docs.controller.Comments', {
             sortByScore: settings.sortByScore ? 1 : undefined
         };
 
-        this.getIndex().setMasked(true);
+        this.getCommentsList().setMasked(true);
 
         this.request("jsonp", {
             url: '/comments_recent',
             method: 'GET',
             params: params,
             success: function(response) {
-                this.getIndex().setMasked(false);
+                this.getCommentsList().setMasked(false);
 
                 this.renderComments(response, 'recentcomments', {
                     hideCommentForm: true,
diff --git a/template/app/view/comments/Index.js b/template/app/view/comments/Index.js
index 59ec89f6fce6c01169571f10c179549c5792000c..e558e167660d57f52e0fd97f7bfdb122513de0e2 100644
--- a/template/app/view/comments/Index.js
+++ b/template/app/view/comments/Index.js
@@ -1,12 +1,12 @@
 /**
- * Container for recent comments listing.
+ * Container for recent comments and top users.
  */
 Ext.define('Docs.view.comments.Index', {
     extend: 'Ext.panel.Panel',
     alias: 'widget.commentindex',
     mixins: ['Docs.view.Scrolling'],
     requires: [
-        'Docs.Settings',
+        'Docs.view.comments.List',
         'Docs.view.comments.TopUsers'
     ],
 
@@ -17,46 +17,7 @@ Ext.define('Docs.view.comments.Index', {
     items: [
         {
             region: "center",
-            layout: "border",
-            id: 'comment-index-container',
-            dockedItems: [
-                {
-                    xtype: 'container',
-                    dock: 'top',
-                    height: 35,
-                    html: [
-                        '<h1 style="float:left;">Comments</h1>',
-                        '<p style="float:left; margin: 5px 0 0 25px">',
-                        '<label style="padding-right: 10px;"><input type="checkbox" name="hideRead" id="hideRead" /> Hide read</label>',
-                        '<label><input type="checkbox" name="hideCurrentUser" id="hideCurrentUser" /> Hide current User</label>',
-                        '</p>'
-                    ].join(" ")
-                }
-            ],
-            items: [
-                {
-                    xtype: 'tabpanel',
-                    cls: "comments-tabpanel",
-                    plain: true,
-                    region: "north",
-                    height: 25,
-                    items: [
-                        {
-                            title: "Recent"
-                        },
-                        {
-                            title: "Votes"
-                        }
-                    ]
-                },
-                {
-                    region: "center",
-                    xtype: 'container',
-                    id: 'recentcomments',
-                    cls: "iScroll",
-                    autoScroll: true
-                }
-            ]
+            xtype: "commentslist"
         },
         {
             region: "east",
@@ -66,83 +27,6 @@ Ext.define('Docs.view.comments.Index', {
         }
     ],
 
-    afterRender: function() {
-        this.callParent(arguments);
-
-        this.initCheckboxes();
-        this.initTabs();
-
-        this.setMasked(true);
-    },
-
-    /**
-     * Masks or unmasks the container
-     * @param {Boolean} masked True to show mask.
-     */
-    setMasked: function(masked) {
-        var container = Ext.get('comment-index-container');
-        if (container) {
-            container[masked ? "mask" : "unmask"]();
-        }
-    },
-
-    // Initializes all checkboxes from settings.
-    // Bind event handlers to fire changeSetting event when checked/unchecked.
-    initCheckboxes: function() {
-        var settings = Docs.Settings.get("comments");
-        Ext.Array.forEach(['hideRead', 'hideCurrentUser'], function(id) {
-            var cb = Ext.get(id);
-            if (cb) {
-                cb.dom.checked = settings[id];
-                cb.on("change", function() {
-                    this.saveSetting(id, cb.dom.checked);
-                    /**
-                     * @event settingChange
-                     * Fired when one of the comments settings checkboxes is checked/unchecked.
-                     * @param {String} name The name of the setting
-                     * @param {Boolean} enabled True if setting is turned on, false when off.
-                     */
-                    this.fireEvent("settingChange", id, cb.dom.checked);
-                }, this);
-            }
-        }, this);
-
-        // Hide the hideRead checkbox if user is not moderator
-        this.setHideReadVisibility();
-        var Auth = Docs.App.getController("Auth");
-        Auth.on("available", this.setHideReadVisibility, this);
-        Auth.on("loggedIn", this.setHideReadVisibility, this);
-        Auth.on("loggedOut", this.setHideReadVisibility, this);
-    },
-
-    setHideReadVisibility: function() {
-        var mod = Docs.App.getController("Auth").isModerator();
-        Ext.get("hideRead").up("label").setStyle("display", mod ? "inline" : "none");
-    },
-
-    initTabs: function() {
-        if (Docs.Settings.get("comments").sortByScore) {
-            this.down("tabpanel[cls=comments-tabpanel]").setActiveTab(1);
-        }
-
-        this.down("tabpanel[cls=comments-tabpanel]").on("tabchange", function(panel, newTab) {
-            if (newTab.title === "Recent") {
-                this.saveSetting("sortByScore", false);
-                this.fireEvent("settingChange", "sortByScore", false);
-            }
-            else {
-                this.saveSetting("sortByScore", true);
-                this.fireEvent("settingChange", "sortByScore", true);
-            }
-        }, this);
-    },
-
-    saveSetting: function(name, enabled) {
-        var settings = Docs.Settings.get('comments');
-        settings[name] = enabled;
-        Docs.Settings.set('comments', settings);
-    },
-
     /**
      * Returns tab config for comments page.
      * @return {Object}
diff --git a/template/app/view/comments/List.js b/template/app/view/comments/List.js
new file mode 100644
index 0000000000000000000000000000000000000000..cb7417876564b428582ff179e440e24524f5305a
--- /dev/null
+++ b/template/app/view/comments/List.js
@@ -0,0 +1,135 @@
+/**
+ * Container for recent comments listing.
+ */
+Ext.define('Docs.view.comments.List', {
+    extend: 'Ext.panel.Panel',
+    alias: "widget.commentslist",
+    requires: ['Docs.Settings'],
+    componentCls: 'comment-index-container',
+
+    dockedItems: [
+        {
+            xtype: 'container',
+            dock: 'top',
+            height: 35,
+            html: [
+                '<h1 style="float:left;">Comments</h1>',
+                '<p style="float:left; margin: 5px 0 0 25px">',
+                '<label style="padding-right: 10px;"><input type="checkbox" name="hideRead" id="hideRead" /> Hide read</label>',
+                '<label><input type="checkbox" name="hideCurrentUser" id="hideCurrentUser" /> Hide current User</label>',
+                '</p>'
+            ].join(" ")
+        }
+    ],
+
+    layout: "border",
+    items: [
+        {
+            xtype: 'tabpanel',
+            cls: "comments-tabpanel",
+            plain: true,
+            region: "north",
+            height: 25,
+            items: [
+                {
+                    title: "Recent"
+                },
+                {
+                    title: "Votes"
+                }
+            ]
+        },
+        {
+            region: "center",
+            xtype: 'container',
+            id: 'recentcomments',
+            cls: "iScroll",
+            autoScroll: true
+        }
+    ],
+
+    afterRender: function() {
+        this.callParent(arguments);
+
+        this.initCheckboxes();
+        this.initTabs();
+
+        this.setMasked(true);
+    },
+
+    /**
+     * Masks or unmasks the container
+     * @param {Boolean} masked True to show mask.
+     */
+    setMasked: function(masked) {
+        var container = this.getEl();
+        if (container) {
+            container[masked ? "mask" : "unmask"]();
+        }
+    },
+
+    // Initializes all checkboxes from settings.
+    // Bind event handlers to fire changeSetting event when checked/unchecked.
+    initCheckboxes: function() {
+        var settings = Docs.Settings.get("comments");
+        Ext.Array.forEach(['hideRead', 'hideCurrentUser'], function(id) {
+            var cb = Ext.get(id);
+            if (cb) {
+                cb.dom.checked = settings[id];
+                cb.on("change", function() {
+                    this.saveSetting(id, cb.dom.checked);
+                    /**
+                     * @event settingChange
+                     * Fired when one of the comments settings checkboxes is checked/unchecked.
+                     * @param {String} name The name of the setting
+                     * @param {Boolean} enabled True if setting is turned on, false when off.
+                     */
+                    this.fireEvent("settingChange", id, cb.dom.checked);
+                }, this);
+            }
+        }, this);
+
+        // Hide the hideRead checkbox if user is not moderator
+        this.setHideReadVisibility();
+        var Auth = Docs.App.getController("Auth");
+        Auth.on("available", this.setHideReadVisibility, this);
+        Auth.on("loggedIn", this.setHideReadVisibility, this);
+        Auth.on("loggedOut", this.setHideReadVisibility, this);
+    },
+
+    setHideReadVisibility: function() {
+        var mod = Docs.App.getController("Auth").isModerator();
+        Ext.get("hideRead").up("label").setStyle("display", mod ? "inline" : "none");
+    },
+
+    initTabs: function() {
+        if (Docs.Settings.get("comments").sortByScore) {
+            this.down("tabpanel[cls=comments-tabpanel]").setActiveTab(1);
+        }
+
+        this.down("tabpanel[cls=comments-tabpanel]").on("tabchange", function(panel, newTab) {
+            if (newTab.title === "Recent") {
+                this.saveSetting("sortByScore", false);
+                this.fireEvent("settingChange", "sortByScore", false);
+            }
+            else {
+                this.saveSetting("sortByScore", true);
+                this.fireEvent("settingChange", "sortByScore", true);
+            }
+        }, this);
+    },
+
+    saveSetting: function(name, enabled) {
+        var settings = Docs.Settings.get('comments');
+        settings[name] = enabled;
+        Docs.Settings.set('comments', settings);
+    },
+
+    /**
+     * Returns tab config for comments page.
+     * @return {Object}
+     */
+    getTab: function() {
+        return Docs.enableComments ? {cls: 'comments', href: '#!/comment', tooltip: 'Comments'} : false;
+    }
+});
diff --git a/template/resources/sass/_comments.scss b/template/resources/sass/_comments.scss
index 7f2a7f5d65cca814e8a4040dad75556dfa948f77..f0b153f665edfbc5ba882b488773b5b65fde30d8 100644
--- a/template/resources/sass/_comments.scss
+++ b/template/resources/sass/_comments.scss
@@ -295,7 +295,7 @@
   li {
     list-style-type: none; } }
 
-#comment-index-container .x-mask {
+.comment-index-container .x-mask {
   opacity: 0.9;
   background: #fff url(../images/ajax-loader.gif) no-repeat center; }