diff --git a/template/app/controller/Classes.js b/template/app/controller/Classes.js
index fb83075c09a3293dc86b8161b829f47de70563df..9cbc11b2ddec226a39ff0eaf26a30a270b781f50 100644
--- a/template/app/controller/Classes.js
+++ b/template/app/controller/Classes.js
@@ -36,7 +36,7 @@ Ext.define('Docs.controller.Classes', {
         },
         {
             ref: 'tree',
-            selector: 'classtree'
+            selector: '#classtree'
         },
         {
             ref: 'favoritesGrid',
diff --git a/template/app/controller/Tabs.js b/template/app/controller/Tabs.js
index 2677a4f9c6d946ff46c4b8ccd9775b805fbd53b3..d20888e66153376d7de320183fc883ec3468800c 100644
--- a/template/app/controller/Tabs.js
+++ b/template/app/controller/Tabs.js
@@ -7,7 +7,7 @@ Ext.define('Docs.controller.Tabs', {
     refs: [
         {
             ref: 'classTree',
-            selector: 'classtree'
+            selector: '#classtree'
         },
         {
             ref: 'guideTree',
diff --git a/template/app/view/cls/Tree.js b/template/app/view/DocTree.js
similarity index 93%
rename from template/app/view/cls/Tree.js
rename to template/app/view/DocTree.js
index 6372840a1ab4e75db81c163564f68c31335dc883..f0edbe085261a3b7ba2b615c6385f73a52ae8425 100644
--- a/template/app/view/cls/Tree.js
+++ b/template/app/view/DocTree.js
@@ -1,11 +1,11 @@
 /**
- * The class tree
+ * The base tree class for classes/guides/videos/examples.
  */
-Ext.define('Docs.view.cls.Tree', {
+Ext.define('Docs.view.DocTree', {
     extend: 'Ext.tree.Panel',
-    alias : 'widget.classtree',
+    alias: 'widget.doctree',
 
-    cls: 'class-tree iScroll',
+    cls: 'doc-tree iScroll',
     useArrows: true,
     rootVisible: false,
 
diff --git a/template/app/view/Viewport.js b/template/app/view/Viewport.js
index bcd12db10faadb9e669657b2ca461a2fdc65337a..b3ec456917520d9e636df273567935bf851f7a64 100644
--- a/template/app/view/Viewport.js
+++ b/template/app/view/Viewport.js
@@ -9,7 +9,7 @@ Ext.define('Docs.view.Viewport', {
         'Docs.view.index.Welcome',
         'Docs.view.cls.Index',
         'Docs.view.cls.Container',
-        'Docs.view.cls.Tree',
+        'Docs.view.DocTree',
         'Docs.view.guides.Index',
         'Docs.view.guides.Tree',
         'Docs.view.videos.Index',
@@ -78,7 +78,7 @@ Ext.define('Docs.view.Viewport', {
                         width: 240,
                         items: [
                             {
-                                xtype: 'classtree',
+                                xtype: 'doctree',
                                 id: 'classtree',
                                 root: Docs.data.classes
                             },
diff --git a/template/app/view/examples/Tree.js b/template/app/view/examples/Tree.js
index 8d20e14d3b73aa1e7c4bb56ff47b52a73145a414..3f006bf2cb405f00a3c5bc4024928f5c7fcbc647 100644
--- a/template/app/view/examples/Tree.js
+++ b/template/app/view/examples/Tree.js
@@ -2,7 +2,7 @@
  * The examples tree
  */
 Ext.define('Docs.view.examples.Tree', {
-    extend: 'Docs.view.cls.Tree',
+    extend: 'Docs.view.DocTree',
     alias: 'widget.exampletree',
 
     initComponent: function() {
@@ -14,11 +14,12 @@ Ext.define('Docs.view.examples.Tree', {
 
         Ext.Array.each(Docs.data.examples, function(group) {
             var children = Ext.Array.map(group.items, function(sample) {
-                return Ext.apply(sample, {
+                return {
                     leaf: true,
+                    text: sample.text,
                     url: '/example/' + sample.url,
                     iconCls: 'icon-example'
-                });
+                };
             });
 
             this.root.children.push({
diff --git a/template/app/view/guides/Tree.js b/template/app/view/guides/Tree.js
index 7cb875b6f1a105470dc5ead532481ebc1e2494c5..35efe1e11d7e9b0dc1e6ec9adcfed526cf3b0f28 100644
--- a/template/app/view/guides/Tree.js
+++ b/template/app/view/guides/Tree.js
@@ -2,7 +2,7 @@
  * The guides tree
  */
 Ext.define('Docs.view.guides.Tree', {
-    extend: 'Docs.view.cls.Tree',
+    extend: 'Docs.view.DocTree',
     alias: 'widget.guidetree',
 
     initComponent: function() {
diff --git a/template/app/view/videos/Tree.js b/template/app/view/videos/Tree.js
index 01305253622711d969a26ccf6b3951ee9479beaa..1bc1e42fd7f448010965fea85d5ceaa24e70d8bc 100644
--- a/template/app/view/videos/Tree.js
+++ b/template/app/view/videos/Tree.js
@@ -2,7 +2,7 @@
  * The videos tree
  */
 Ext.define('Docs.view.videos.Tree', {
-    extend: 'Docs.view.cls.Tree',
+    extend: 'Docs.view.DocTree',
     alias: 'widget.videotree',
 
     initComponent: function() {
@@ -14,12 +14,12 @@ Ext.define('Docs.view.videos.Tree', {
 
         Ext.Array.each(Docs.data.videos, function(group, idx) {
             var children = Ext.Array.map(group.items, function(video) {
-                return Ext.apply(video, {
+                return {
                     leaf: true,
                     text: video.title,
                     url: '/video/' + video.id,
                     iconCls: 'icon-video'
-                });
+                };
             });
 
             this.root.children.push({
diff --git a/template/resources/sass/viewport.scss b/template/resources/sass/viewport.scss
index 17349e0e75bedf0cf205bc4f92a3484b889efda3..51c315f54e65ec9007644dc8549f03c72c630e91 100644
--- a/template/resources/sass/viewport.scss
+++ b/template/resources/sass/viewport.scss
@@ -249,7 +249,7 @@ a {
     border-width: 1px 0; } }
 
 // Use normal color for class-links in tree
-.class-tree {
+.doc-tree {
   .docClass, .docClass:hover {
     color: #000; } }