diff --git a/template/app/Application.js b/template/app/Application.js
index 35ad1b273b923a4df1a995280addae26dcfb1f9d..b648c0e60d0fbc84cdb36b52deee5eb09c454eec 100644
--- a/template/app/Application.js
+++ b/template/app/Application.js
@@ -20,6 +20,7 @@ Ext.define('Docs.Application', {
     ],
 
     controllers: [
+        'Content',
         'Classes',
         'Search',
         'InlineExamples',
@@ -45,9 +46,9 @@ Ext.define('Docs.Application', {
             Docs.initEventTracking();
         }
 
-        setInterval(function(){
-            Ext.DomQuery.select('link')[4].href = "resources/css/viewport.css?" + Math.ceil(Math.random() * 100000000)
-        }, 1000)
+        // setInterval(function(){
+        //     Ext.DomQuery.select('link')[4].href = "resources/css/viewport.css?" + Math.ceil(Math.random() * 100000000)
+        // }, 1000)
     }
 
 });
diff --git a/template/app/controller/Classes.js b/template/app/controller/Classes.js
index d7f2c205a46f2746024fb2dd743869f8e5b2f8ee..776c0dbc9fe5214b21317855976aca9a1b250b4a 100644
--- a/template/app/controller/Classes.js
+++ b/template/app/controller/Classes.js
@@ -3,7 +3,7 @@
  * between pages.
  */
 Ext.define('Docs.controller.Classes', {
-    extend: 'Ext.app.Controller',
+    extend: 'Docs.controller.Content',
 
     requires: [
         'Docs.History',
@@ -39,7 +39,7 @@ Ext.define('Docs.controller.Classes', {
         },
         {
             ref: 'tree',
-            selector: 'classtree'
+            selector: 'classtree[cmpName=classtree]'
         },
         {
             ref: 'favoritesGrid',
@@ -74,7 +74,7 @@ Ext.define('Docs.controller.Classes', {
         });
 
         this.control({
-            'classtree': {
+            'classtree[cmpName=classtree]': {
                 urlclick: function(url, event) {
                     this.handleUrlClick(url, event, this.getTree());
                 }
@@ -149,15 +149,6 @@ Ext.define('Docs.controller.Classes', {
         }
     },
 
-    // Code for the middle mouse button
-    MIDDLE: 1,
-
-    // True when middle mouse button pressed or shift/ctrl key pressed
-    // together with mouse button (for Mac)
-    opensNewWindow: function(event) {
-        return event.button === this.MIDDLE || event.shiftKey || event.ctrlKey;
-    },
-
     /**
      * Loads main page.
      *
@@ -247,14 +238,6 @@ Ext.define('Docs.controller.Classes', {
         }
 
         this.currentCls = cls;
-    },
-
-    /**
-     * Returns base URL used for making AJAX requests.
-     * @return {String} URL
-     */
-    getBaseUrl: function() {
-        return document.location.href.replace(/#.*/, "").replace(/index.html/, "");
     }
 
 });
diff --git a/template/app/controller/Content.js b/template/app/controller/Content.js
new file mode 100644
index 0000000000000000000000000000000000000000..ccfcd9a92601773dad0de922aee7378486952c52
--- /dev/null
+++ b/template/app/controller/Content.js
@@ -0,0 +1,24 @@
+/**
+ * Controller for Welcome page
+ */
+Ext.define('Docs.controller.Content', {
+    extend: 'Ext.app.Controller',
+
+    // Code for the middle mouse button
+    MIDDLE: 1,
+
+    // True when middle mouse button pressed or shift/ctrl key pressed
+    // together with mouse button (for Mac)
+    opensNewWindow: function(event) {
+        return event.button === this.MIDDLE || event.shiftKey || event.ctrlKey;
+    },
+
+    /**
+     * Returns base URL used for making AJAX requests.
+     * @return {String} URL
+     */
+    getBaseUrl: function() {
+        return document.location.href.replace(/#.*/, "").replace(/index.html/, "");
+    }
+
+});
diff --git a/template/app/controller/Favorites.js b/template/app/controller/Favorites.js
index 6897827ddf95fadab6351a91ca6bd7190f5a03aa..c99296e7c7dcfc1c664bebebed052347a9181ff5 100644
--- a/template/app/controller/Favorites.js
+++ b/template/app/controller/Favorites.js
@@ -51,7 +51,7 @@ Ext.define('Docs.controller.Favorites', {
             add: function(url) {
                 // Show favorites when first favorite added
                 if (Docs.Favorites.getCount() > 0) {
-                    this.getPanel().show();
+                    // this.getPanel().show();
                 }
                 // Add favorite marking to tree
                 this.getTree().setFavorite(url, true);
@@ -59,7 +59,7 @@ Ext.define('Docs.controller.Favorites', {
             remove: function(url) {
                 // Hide favorites when favorites list empty
                 if (Docs.Favorites.getCount() === 0) {
-                    this.getPanel().hide();
+                    // this.getPanel().hide();
                 }
                 // remove favorite marking from tree
                 this.getTree().setFavorite(url, false);
diff --git a/template/app/controller/Guides.js b/template/app/controller/Guides.js
index 44478f39b484562b50ecd9e6b8db7fb55cc87089..fe8a0e392ce9b525f202f1dc0ebdbfd5f29bb17b 100644
--- a/template/app/controller/Guides.js
+++ b/template/app/controller/Guides.js
@@ -2,7 +2,18 @@
  * Controller for Welcome page
  */
 Ext.define('Docs.controller.Guides', {
-    extend: 'Ext.app.Controller',
+    extend: 'Docs.controller.Content',
+
+    refs: [
+        {
+            ref: 'viewport',
+            selector: '#viewport'
+        },
+        {
+            ref: 'tree',
+            selector: 'classtree[cmpName=guidetree]'
+        }
+    ],
 
     init: function() {
         this.addEvents(
@@ -15,6 +26,11 @@ Ext.define('Docs.controller.Guides', {
         );
 
         this.control({
+            'classtree[cmpName=guidetree]': {
+                urlclick: function(url, event) {
+                    this.handleUrlClick(url, event, this.getTree());
+                }
+            },
             'indexcontainer': {
                 afterrender: function(cmp) {
                     cmp.el.addListener('click', function(event, el) {
@@ -28,10 +44,26 @@ Ext.define('Docs.controller.Guides', {
         })
     },
 
+    // We don't want to select the class that was opened in another window,
+    // so restore the previous selection.
+    handleUrlClick: function(url, event, view) {
+        // Remove everything up to #
+        url = url.replace(/.*#/, "");
+
+        if (this.opensNewWindow(event)) {
+            window.open("#"+url);
+            view && view.selectUrl(this.activeUrl ? this.activeUrl : "");
+        }
+        else {
+            this.loadGuide(url);
+        }
+    },
+
     loadIndex: function() {
         Ext.getCmp('doctabs').activateTab('#/guide');
         Ext.getCmp('card-panel').layout.setActiveItem('guides');
-        Ext.getCmp('tree-container').hide();
+        Ext.getCmp('tree-container').show();
+        Ext.getCmp('tree-container').layout.setActiveItem(2);
     },
 
     /**
@@ -41,6 +73,10 @@ Ext.define('Docs.controller.Guides', {
      * @param {Boolean} noHistory  true to disable adding entry to browser history
      */
     loadGuide: function(url, noHistory) {
+        Ext.getCmp('card-panel').layout.setActiveItem('guide');
+        Ext.getCmp('tree-container').show();
+        Ext.getCmp('tree-container').layout.setActiveItem(2);
+
         if (this.activeUrl === url) return;
         this.activeUrl = url;
 
@@ -54,7 +90,7 @@ Ext.define('Docs.controller.Guides', {
                 success: function(json) {
                     this.getViewport().setPageTitle(json.guide.match(/<h1>(.*)<\/h1>/)[1]);
                     Ext.getCmp("guide").update(json.guide);
-                    Ext.getCmp('card-panel').layout.setActiveItem(2);
+
                     Docs.Syntax.highlight(Ext.get("guide"));
                     this.fireEvent('showGuide', name[1]);
                     this.getTree().selectUrl(url);
@@ -65,14 +101,6 @@ Ext.define('Docs.controller.Guides', {
                 scope: this
             });
         }
-    },
-
-    /**
-     * Returns base URL used for making AJAX requests.
-     * @return {String} URL
-     */
-    getBaseUrl: function() {
-        return document.location.href.replace(/#.*/, "").replace(/index.html/, "");
     }
 
 });
diff --git a/template/app/controller/Tabs.js b/template/app/controller/Tabs.js
index 2bfee023251c2f4f924fd522d063c51bcb880978..f90d9b8b76a05b07d747f4016b39581cf788fbdb 100644
--- a/template/app/controller/Tabs.js
+++ b/template/app/controller/Tabs.js
@@ -6,8 +6,12 @@ Ext.define('Docs.controller.Tabs', {
 
     refs: [
         {
-            ref: 'tree',
-            selector: 'classtree'
+            ref: 'classTree',
+            selector: 'classtree[cmpName=classtree]'
+        },
+        {
+            ref: 'guideTree',
+            selector: 'classtree[cmpName=guidetree]'
         }
     ],
 
@@ -15,10 +19,14 @@ Ext.define('Docs.controller.Tabs', {
 
         this.getController('Classes').addListener({
             showClass: function(cls) {
-                this.addTabFromTree("/api/"+cls);
+                this.addTabFromTree("/api/"+cls, this.getClassTree());
             },
+            scope: this
+        });
+
+        this.getController('Guides').addListener({
             showGuide: function(guide) {
-                this.addTabFromTree("/guide/"+guide);
+                this.addTabFromTree("/guide/"+guide, this.getGuideTree());
             },
             scope: this
         });
@@ -37,8 +45,8 @@ Ext.define('Docs.controller.Tabs', {
      * Adds a tab based on information from the class tree
      * @param {String} url The url of the record in the tree
      */
-    addTabFromTree: function(url) {
-        var treeRecord = this.getTree().findRecordByUrl(url);
+    addTabFromTree: function(url, tree) {
+        var treeRecord = tree.findRecordByUrl(url);
         Ext.getCmp('doctabs').addTab({
             href: '#' + treeRecord.raw.url,
             text: treeRecord.raw.text,
diff --git a/template/app/view/Viewport.js b/template/app/view/Viewport.js
index 98d3ffa3b8df6adc2a9b82c206edd00ecf048523..a138d71947cf01ce85898645173743de7c54bca7 100644
--- a/template/app/view/Viewport.js
+++ b/template/app/view/Viewport.js
@@ -104,10 +104,16 @@ Ext.define('Docs.view.Viewport', {
                         items: [
                             {
                                 xtype: 'classtree',
+                                cmpName: 'classtree',
                                 root: Docs.classData
                             },
                             {
                                 xtype: 'examplestree'
+                            },
+                            {
+                                xtype: 'classtree',
+                                cmpName: 'guidetree',
+                                root: Docs.guideData
                             }
                         ]
                     },
diff --git a/template/app/view/cls/Index.js b/template/app/view/cls/Index.js
index 708cd77f41be6619901cbf66d2e2f2acba678025..384bd424f8639bda6a566058c10eacc2d383333f 100644
--- a/template/app/view/cls/Index.js
+++ b/template/app/view/cls/Index.js
@@ -43,7 +43,6 @@ Ext.define('Docs.view.cls.Index', {
     extractData: function() {
         var data = {
             notice: Ext.get("notice-text"),
-            guides: Ext.get("guides-content"),
             categories: Ext.get("categories-content")
         };
         for (var i in data) {
diff --git a/template/app/view/examples/Index.js b/template/app/view/examples/Index.js
index 72285f3823fbf5d1d71188e47ac8471848057f1c..0fee1bc4c45b37cac7e82fb4789d45e0853f29f2 100644
--- a/template/app/view/examples/Index.js
+++ b/template/app/view/examples/Index.js
@@ -28,97 +28,3 @@ Ext.define('Docs.view.examples.Index', {
         this.callParent(arguments);
     }
 });
-
-// Ext.onReady(function() {
-//
-//     (Ext.defer(function() {
-//         // Instantiate Ext.App instance
-//         var App = Ext.create('Ext.App', {});
-//
-//         var catalog = Ext.samples.samplesCatalog;
-//
-//         for (var i = 0, c; c = catalog[i]; i++) {
-//             c.id = 'sample-' + i;
-//         }
-//
-//         var store = Ext.create('Ext.data.JsonStore', {
-//             idProperty : 'id',
-//             fields     : ['id', 'title', 'samples'],
-//             data       : catalog
-//         });
-//
-//         var panel = Ext.create('Ext.Panel', {
-//             frame      : false,
-//             renderTo   : Ext.get('all-demos'),
-//             height     : 300,
-//             autoScroll : true,
-//             items      : Ext.create('Ext.samples.SamplePanel', {
-//                 store : store
-//             })
-//         });
-//
-//         var tpl = Ext.create('Ext.XTemplate',
-//             '<tpl for="."><li><a href="#{id}">{title:stripTags}</a></li></tpl>'
-//         );
-//         tpl.overwrite('sample-menu', catalog);
-//
-//         Ext.select('#sample-spacer').remove();
-//
-//         var headerEl  = Ext.get('hd'),
-//             footerEl  = Ext.get('ft'),
-//             bodyEl    = Ext.get('bd'),
-//             sideBoxEl = bodyEl.down('div[class=side-box]'),
-//             titleEl   = bodyEl.down('h1#pagetitle');
-//
-//         var doResize = function() {
-//             var windowHeight = Ext.getDoc().getViewSize(false).height;
-//
-//             var footerHeight  = footerEl.getHeight() + footerEl.getMargin().top,
-//                 titleElHeight = titleEl.getHeight() + titleEl.getMargin().top,
-//                 headerHeight  = headerEl.getHeight() + titleElHeight;
-//
-//             var warnEl = Ext.get('fb');
-//             var warnHeight = warnEl ? warnEl.getHeight() : 0;
-//
-//             var availHeight = windowHeight - ( footerHeight + headerHeight + 14) - warnHeight;
-//             var sideBoxHeight = sideBoxEl.getHeight();
-//
-//             panel.setHeight((availHeight > sideBoxHeight) ? availHeight : sideBoxHeight);
-//         };
-//
-//         // Resize on demand
-//         Ext.EventManager.onWindowResize(doResize);
-//
-//         var firebugWarning = function () {
-//             var cp = Ext.create('Ext.state.CookieProvider');
-//
-//             if(window.console && window.console.firebug && ! cp.get('hideFBWarning')){
-//                 var tpl = Ext.create('Ext.Template',
-//                     '<div id="fb" style="border: 1px solid #FF0000; background-color:#FFAAAA; display:none; padding:15px; color:#000000;"><b>Warning: </b> Firebug is known to cause performance issues with Ext JS. <a href="#" id="hideWarning">[ Hide ]</a></div>'
-//                 );
-//                 var newEl = tpl.insertFirst('all-demos');
-//
-//                 Ext.fly('hideWarning').on('click', function() {
-//                     Ext.fly(newEl).slideOut('t',{remove:true});
-//                     cp.set('hideFBWarning', true);
-//                     doResize();
-//                 });
-//                 Ext.fly(newEl).slideIn();
-//                 doResize();
-//             }
-//         };
-//
-//         var hideMask = function () {
-//             Ext.get('loading').remove();
-//             Ext.fly('loading-mask').animate({
-//                 opacity:0,
-//                 remove:true,
-//                 callback: firebugWarning
-//             });
-//         };
-//
-//         Ext.defer(hideMask, 250);
-//         doResize();
-//
-//     },500));
-// });
diff --git a/template/app/view/examples/Tree.js b/template/app/view/examples/Tree.js
index 30236b89ed9ac97e20ebcfaec2d439750cf444e7..b050067dd6746f0b6485ccfe49dca03eee2f0706 100644
--- a/template/app/view/examples/Tree.js
+++ b/template/app/view/examples/Tree.js
@@ -40,8 +40,7 @@ Ext.define('Docs.view.examples.Tree', {
 
             this.root.children.push({
                 text: sampleGroup.title,
-                children: children,
-                expanded: true
+                children: children
             })
         }, this);
 
diff --git a/template/app/view/guides/Index.js b/template/app/view/guides/Index.js
index 5142fe032a6f214b18fcc46a0f1771e865ef3ab4..2ce16e3d458c2df52b37f4bc1a980a33cfd9c600 100644
--- a/template/app/view/guides/Index.js
+++ b/template/app/view/guides/Index.js
@@ -1,7 +1,22 @@
 Ext.define('Docs.view.guides.Index', {
     extend: 'Ext.container.Container',
     alias : 'widget.guideindex',
-    cls: 'guideindex',
+    cls: 'class-list',
+
+    initComponent: function() {
+        this.tpl = new Ext.XTemplate(
+            '<div class="section guides">',
+                '<h1>Guides</h1>',
+                '{guides}',
+            '</div>'
+        );
+
+        var guideData = Ext.get("guides-content");
+        this.data = { guides: guideData.dom.innerHTML };
+        guideData.remove();
+
+        this.callParent(arguments);
+    }
 
-    html: 'Guides'
 });
+
diff --git a/template/app/view/tree/Tree.js b/template/app/view/tree/Tree.js
index 4cac01e396275e32252a3298b6c923c3d72aadb8..dcd7b77fc416c33207c05247c37331de87a87127 100644
--- a/template/app/view/tree/Tree.js
+++ b/template/app/view/tree/Tree.js
@@ -40,7 +40,7 @@ Ext.define('Docs.view.tree.Tree', {
         );
 
         this.nodeTpl = new Ext.XTemplate(
-            '<a href="#{url}" rel="{url}" class="docClass">{text}</a> ',
+            '<a href="#{url}" rel="{url}">{text}</a> ',
             '<a rel="{url}" class="fav {show}"></a>'
         );