diff --git a/lib/jsduck/tree_icons.rb b/lib/jsduck/tree_icons.rb
index 062304d62526bc83a6f159c907339ca90a511544..2aca51a70b784e3966b8a69d93bd5808d509343f 100644
--- a/lib/jsduck/tree_icons.rb
+++ b/lib/jsduck/tree_icons.rb
@@ -10,7 +10,7 @@ module JsDuck
           icons.merge!(extract_icons(child))
         end
       else
-        icons[node[:id]] = node[:iconCls]
+        icons[node[:clsName]] = node[:iconCls]
       end
       icons
     end
diff --git a/template/app/History.js b/template/app/History.js
index bb8883ef1e42aefb9159dcb9b16aa99e67ae2a64..fd0d8326c5a3ddf262a5121343799590da48692a 100644
--- a/template/app/History.js
+++ b/template/app/History.js
@@ -2,13 +2,8 @@
  * Browser history management using Ext.util.History.
  */
 Ext.define("Docs.History", {
-    extend: 'Docs.LocalStore',
-    storeName: 'History',
     singleton: true,
 
-    // Maximum number of items to keep in history store
-    maxHistoryLength: 25,
-
     /**
      * Initializes history management.
      */
@@ -17,16 +12,10 @@ Ext.define("Docs.History", {
             this.navigate(Ext.util.History.getToken());
         }, this);
         Ext.util.History.on("change", this.navigate, this);
-        this.callParent();
     },
 
     // Parses current URL and navigates to the page
     navigate: function(token) {
-        if (this.ignoreChange) {
-            this.ignoreChange = false;
-            return;
-        }
-
         var url = this.parseToken(token);
         if (url.type === "api") {
             Docs.App.getController('Classes').loadClass(url.key, true);
@@ -35,7 +24,7 @@ Ext.define("Docs.History", {
             Docs.App.getController('Classes').showGuide(url.key, true);
         }
         else {
-            Ext.getCmp('container').layout.setActiveItem(0);
+            Ext.getCmp('card-panel').layout.setActiveItem(0);
         }
     },
 
@@ -45,56 +34,12 @@ Ext.define("Docs.History", {
         return matches ? {type: matches[1], key: matches[2]} : {};
     },
 
-    // Extracts class name from history token
-    // Returns false when it's not class-related token.
-    parseClassName: function(token) {
-        var url = this.parseToken(token);
-        if (url.type === "api") {
-            return url.key.replace(/-.*$/, '');
-        }
-        else {
-            return false;
-        }
-    },
-
     /**
      * Adds URL to history
      *
      * @param {String} token  the part of URL after #
      */
     push: function(token) {
-        this.ignoreChange = true;
         Ext.util.History.add(token);
-
-        // Add class name to history store if it's not there already
-        var cls = this.parseClassName(token);
-        if (cls) {
-            // When class already in history remove it and add again.
-            // This way the most recently visited items will always be at the top.
-            var oldIndex = this.store.findExact('cls', cls);
-            if (oldIndex > -1) {
-                this.store.removeAt(oldIndex);
-            }
-
-            // Add new item at the beginning
-            this.store.insert(0, {cls: cls});
-
-            // Remove items from the end of history if there are too many
-            while (this.store.getAt(this.maxHistoryLength)) {
-                this.store.removeAt(this.maxHistoryLength);
-            }
-            this.syncStore();
-        }
-    },
-
-    /**
-     * Removes class from History store
-     *
-     * @param {String} cls
-     */
-    removeClass: function(cls) {
-        var index = this.store.findExact('cls', cls);
-        this.store.removeAt(index);
-        this.syncStore();
     }
 });
diff --git a/template/app/LocalStore.js b/template/app/LocalStore.js
index 7bad266f1c6ddca1f4d446743553d65548e35a87..b259fc59ce23509c5d4c3ab1d99ccc97674160c1 100644
--- a/template/app/LocalStore.js
+++ b/template/app/LocalStore.js
@@ -1,7 +1,7 @@
 /**
  * Provides methods dealing with localStorage- and memory-store.
  *
- * Base class for History and Favorites.
+ * Base class for Favorites and Settings.
  */
 Ext.define("Docs.LocalStore", {
     storeName: '',
@@ -15,7 +15,24 @@ Ext.define("Docs.LocalStore", {
     init: function() {
         this.localStorage = ('localStorage' in window && window['localStorage'] !== null);
         this.store = Ext.getStore(this.storeName);
-        this.localStorage && this.store.load();
+
+        if (this.localStorage) {
+            this.store.load();
+            if (window.addEventListener) {
+                window.addEventListener("storage", Ext.Function.bind(this.onStorageChange, this), false);
+            }
+            else {
+                window.attachEvent("onstorage", Ext.Function.bind(this.onStorageChange, this));
+            }
+        }
+    },
+
+    // When records in localstorage change, reload the store.
+    onStorageChange: function(e) {
+        e = e || window.event;
+        if (e.key === this.store.getProxy().id) {
+            this.store.load();
+        }
     },
 
     /**
diff --git a/template/app/controller/Classes.js b/template/app/controller/Classes.js
index 2f3bafbbff1ff25ac87dfc102d80d6d98a8240cb..72d712a374d7d24ba3a4c591f2e5f0ac209a1dec 100644
--- a/template/app/controller/Classes.js
+++ b/template/app/controller/Classes.js
@@ -12,13 +12,11 @@ Ext.define('Docs.controller.Classes', {
 
     stores: [
         'Favorites',
-        'History',
         'Settings'
     ],
 
     models: [
         'Favorite',
-        'History',
         'Setting'
     ],
 
@@ -32,15 +30,26 @@ Ext.define('Docs.controller.Classes', {
             selector: 'classheader'
         },
         {
-            ref: 'tabPanel',
-            selector: 'classtabpanel'
+            ref: 'overview',
+            selector: 'classoverview'
         },
         {
             ref: 'tree',
             selector: 'classtree'
+        },
+        {
+            ref: 'favoritesGrid',
+            selector: '#favorites-grid'
+        },
+        {
+            ref: 'historyGrid',
+            selector: '#history-grid'
         }
     ],
 
+    // Code for the middle mouse button
+    MIDDLE: 1,
+
     init: function() {
         this.addEvents(
             /**
@@ -64,8 +73,8 @@ Ext.define('Docs.controller.Classes', {
             "showGuide"
         );
 
-        Ext.getBody().addListener('click', function(cmp, el) {
-            this.loadClass(el.rel);
+        Ext.getBody().addListener('click', function(event, el) {
+            (event.button === this.MIDDLE) ? window.open(el.href) : this.loadClass(el.rel);
         }, this, {
             preventDefault: true,
             delegate: '.docClass'
@@ -73,20 +82,20 @@ Ext.define('Docs.controller.Classes', {
 
         this.control({
             'classtree': {
-                // Can't simply assign the loadClass function as event
-                // handler, because an extra event options object is
-                // appended to the event arguments, which we don't
-                // want to give to the loadClass, as this would render
-                // the noHistory parameter to true.
-                classclick: function(cls) {
-                    this.loadClass(cls);
+                classclick: function(cls, event) {
+                    (event.button === this.MIDDLE) ? window.open("#/api/" + cls) : this.loadClass(cls);
+                }
+            },
+            'classgrid': {
+                classclick: function(cls, event) {
+                    (event.button === this.MIDDLE) ? window.open("#/api/" + cls) : this.loadClass(cls);
                 }
             },
 
             'indexcontainer': {
                 afterrender: function(cmp) {
-                    cmp.el.addListener('click', function(cmp, el) {
-                        this.showGuide(el.rel);
+                    cmp.el.addListener('click', function(event, el) {
+                        (event.button === this.MIDDLE) ? window.open(el.href) : this.loadClass(el.rel);
                     }, this, {
                         preventDefault: true,
                         delegate: '.guide'
@@ -126,7 +135,7 @@ Ext.define('Docs.controller.Classes', {
         var cls = clsUrl;
         var member;
 
-        Ext.getCmp('container').layout.setActiveItem(1);
+        Ext.getCmp('card-panel').layout.setActiveItem(1);
 
         // separate class and member name
         var matches = clsUrl.match(/^(.*?)(?:-(.*))?$/);
@@ -142,8 +151,8 @@ Ext.define('Docs.controller.Classes', {
         if (this.cache[cls]) {
             this.showClass(this.cache[cls], member);
         } else {
-            if (this.getTabPanel()) {
-                this.getTabPanel().setLoading(true);
+            if (this.getOverview()) {
+                this.getOverview().setLoading(true);
             }
 
             Ext.data.JsonP.request({
@@ -162,34 +171,27 @@ Ext.define('Docs.controller.Classes', {
     },
 
     showClass: function(cls, anchor) {
-        var classOverview = this.getTabPanel().down('classoverview');
-
         if (this.currentCls != cls) {
             this.getViewport().setPageTitle(cls.name);
             this.getHeader().load(cls);
+            this.getOverview().load(cls);
 
-            // Init overview tab if not already available
-            if (!classOverview) {
-                classOverview = Ext.create('Docs.view.cls.Overview');
-                this.getTabPanel().add(classOverview);
-                this.getTabPanel().setActiveTab(0);
-            }
-            classOverview.load(cls);
-
-            this.getTabPanel().setLoading(false);
+            this.getOverview().setLoading(false);
 
             this.getTree().selectClass(cls.name);
             this.fireEvent('showClass', cls.name);
         }
 
         if (anchor) {
-            classOverview.scrollToEl("#" + anchor);
+            this.getOverview().scrollToEl("#" + anchor);
             this.fireEvent('showMember', cls.name, anchor);
         } else {
-            classOverview.getEl().down('.x-panel-body').scrollTo('top', 0);
+            this.getOverview().getEl().down('.x-panel-body').scrollTo('top', 0);
         }
 
         this.currentCls = cls;
+
+        this.getFavoritesGrid().selectClass(cls.name);
     },
 
     showGuide: function(name, noHistory) {
@@ -201,7 +203,7 @@ Ext.define('Docs.controller.Classes', {
             success: function(json) {
                 this.getViewport().setPageTitle(json.guide.match(/<h1>(.*)<\/h1>/)[1]);
                 Ext.getCmp("guide").update(json.guide);
-                Ext.getCmp('container').layout.setActiveItem(2);
+                Ext.getCmp('card-panel').layout.setActiveItem(2);
                 Docs.Syntax.highlight(Ext.get("guide"));
                 this.fireEvent('showGuide', name);
             },
diff --git a/template/app/model/History.js b/template/app/model/History.js
deleted file mode 100644
index 908cc7fe6844a8e28b833e41a5284e04260cd323..0000000000000000000000000000000000000000
--- a/template/app/model/History.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Previously visited classes / guides
- */
-Ext.define('Docs.model.History', {
-    fields: ['id', 'cls'],
-    extend: 'Ext.data.Model',
-    proxy: {
-        type: ('localStorage' in window && window['localStorage'] !== null) ? 'localstorage' : 'memory',
-        id  : 'docs-history'
-    }
-});
diff --git a/template/app/store/History.js b/template/app/store/History.js
deleted file mode 100644
index 9288a781481df394fa09a9a5b5779777c68de556..0000000000000000000000000000000000000000
--- a/template/app/store/History.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * History Store
- */
-Ext.define('Docs.store.History', {
-    extend: 'Ext.data.Store',
-    model: 'Docs.model.History',
-    // Sort history with latest on top
-    sorters: [
-        { property: 'id', direction: 'DESC' }
-    ]
-});
diff --git a/template/app/view/ClassGrid.js b/template/app/view/ClassGrid.js
new file mode 100644
index 0000000000000000000000000000000000000000..ddfb0c5b0cd4a3298362bcfd5c8c946b81f27f99
--- /dev/null
+++ b/template/app/view/ClassGrid.js
@@ -0,0 +1,119 @@
+/**
+ * Gridpanel for showing list of classes.
+ */
+Ext.define('Docs.view.ClassGrid', {
+    extend: 'Ext.grid.Panel',
+    alias: 'widget.classgrid',
+    hideHeaders: true,
+    border: false,
+    bodyBorder: false,
+
+    /**
+     * @cfg {Object} icons
+     * Mapping of class names to icon class names.
+     */
+    icons: {},
+
+    /**
+     * @cfg {Boolean} enableClose
+     * Show or hide the close column
+     */
+    enableClose: true,
+
+    initComponent: function() {
+        this.addEvents(
+            /**
+             * @event classclick
+             * Fired when class in grid clicked.
+             * @param {String} name  Name of the class that was selected. For example "Ext.Ajax".
+             * @param {Ext.EventObject} e
+             */
+            "classclick",
+            /**
+             * @event closeclick
+             * Fired when close button in grid clicked.
+             * @param {String} name  Name of the class that was closed. For example "Ext.Ajax".
+             */
+            "closeclick"
+        );
+
+        this.columns = [
+            {
+                width: 18,
+                dataIndex: 'cls',
+                renderer: function(cls, data) {
+                    data.tdCls = this.icons[cls];
+                },
+                scope: this
+            },
+            {
+                dataIndex: 'cls',
+                flex: true
+            }
+        ];
+
+        if (this.enableClose) {
+            this.columns = this.columns.concat([
+                {
+                    xtype: 'actioncolumn',
+                    width: 18,
+                    icon: 'resources/images/x12.png',
+                    tooltip: 'Delete',
+                    handler: function(view, rowIndex) {
+                        this.fireEvent("closeclick", this.getStore().getAt(rowIndex).get("cls"));
+                    },
+                    scope: this
+                }
+            ]);
+        }
+
+        this.callParent(arguments);
+
+        // Prevent item from becoming selected right away, because the
+        // the click event that follows can possibly cause the class
+        // to be loaded in another window, in which case the selection
+        // of the clicked-on item should not happen.  When it needs to
+        // be selected, the #showClass method in Class controller will
+        // explicitly call #selectClass.
+        this.on("beforeselect", function() {
+            return false;
+        }, this);
+
+        this.on("itemclick", function(view, record, item, index, event) {
+            // Don't fire classclick when close button clicked
+            if (!event.getTarget("img")) {
+                this.fireEvent("classclick", record.get("cls"), event);
+            }
+        }, this);
+
+        // Initialize selection after rendering
+        this.on("afterrender", function() {
+            this.selectClass(this.selectedClass);
+        }, this);
+    },
+
+    /**
+     * Selects class if grid contains such class.
+     * Fires no events while selecting.
+     * @param {String} cls  class name.
+     */
+    selectClass: function(cls) {
+        this.selectedClass = cls;
+        // when grid hasn't been rendered yet, trying to select will give us error.
+        if (this.rendered) {
+            var index = this.getStore().findExact('cls', cls);
+            this.selectIndex(index);
+        }
+    },
+
+    selectIndex: function(index) {
+        if (index > -1) {
+            this.view.focusRow(index);
+            this.getSelectionModel().select(index, false, true);
+        }
+        else {
+            this.getSelectionModel().deselectAll(true);
+        }
+    }
+
+});
diff --git a/template/app/view/Viewport.js b/template/app/view/Viewport.js
index 34ac9ccb7ab4197caf9ee41bc41aa7260e0d6f71..913a430d072569dafddf354258ea93714147499e 100644
--- a/template/app/view/Viewport.js
+++ b/template/app/view/Viewport.js
@@ -9,6 +9,8 @@ Ext.define('Docs.view.Viewport', {
         'Docs.view.cls.Container',
         'Docs.view.index.Container',
         'Docs.view.tree.Tree',
+        'Docs.view.ClassGrid',
+        'Docs.Favorites',
         'Docs.History'
     ],
 
@@ -23,7 +25,7 @@ Ext.define('Docs.view.Viewport', {
                 region:'west',
                 width: 240,
                 id: 'west-region-container',
-                padding: '5 0 20 20',
+                padding: '5 0 0 0',
                 layout: 'vbox',
                 defaults: {
                     xtype: 'container',
@@ -34,14 +36,14 @@ Ext.define('Docs.view.Viewport', {
                         xtype: 'button',
                         cls: 'logo',
                         height: 60,
-                        margin: '0 0 10 0',
+                        margin: '0 0 10 10',
                         width: 220,
                         border: 0,
                         ui: 'hmm',
                         listeners: {
                             click: function() {
                                 this.setPageTitle("");
-                                Ext.getCmp('container').layout.setActiveItem(0);
+                                Ext.getCmp('card-panel').layout.setActiveItem(0);
                                 Docs.History.push("");
                             },
                             scope: this
@@ -50,6 +52,7 @@ Ext.define('Docs.view.Viewport', {
                     {
                         cls: 'search',
                         id: 'search-container',
+                        margin: '0 0 0 5',
                         height: 40,
                         items: [
                             {
@@ -72,9 +75,56 @@ Ext.define('Docs.view.Viewport', {
                         ]
                     },
                     {
+                        id: 'nested-west-region-container',
                         flex: 1,
-                        xtype: 'classtree',
-                        root: Docs.classData
+                        layout: 'border',
+                        border: false,
+                        items: [
+                            {
+                                id: 'classes-tab-panel',
+                                xtype: 'tabpanel',
+                                region: 'north',
+                                height: 150,
+                                padding: '2 4 0 0',
+                                bodyPadding: '8 15 8 12',
+                                border: false,
+                                plain: true,
+                                split: true,
+                                listeners: {
+                                    afterRender: function() {
+                                        // Add 7px padding at left side of tab-bar
+                                        this.tabBar.insert(0, {width: 7, xtype: 'container'});
+                                    }
+                                },
+                                items: [
+                                    {
+                                        xtype: 'classgrid',
+                                        id: 'favorites-grid',
+                                        title: 'Favorites',
+                                        iconCls: 'icon-fav',
+                                        viewConfig: {
+                                            plugins: {
+                                                ptype: 'gridviewdragdrop'
+                                            }
+                                        },
+                                        store: Ext.getStore('Favorites'),
+                                        icons: Docs.icons,
+                                        listeners: {
+                                            closeclick: function(cls) {
+                                                Docs.Favorites.remove(cls);
+                                            }
+                                        }
+                                    }
+                                ]
+                            },
+                            {
+                                region: 'center',
+                                xtype: 'classtree',
+                                padding: '10 10 0 10',
+                                margin: '0 5 10 0',
+                                root: Docs.classData
+                            }
+                        ]
                     }
                 ]
             },
@@ -83,12 +133,13 @@ Ext.define('Docs.view.Viewport', {
                 id: 'center-container',
                 layout: 'fit',
                 minWidth: 800,
+                padding: '20 20 5 0',
                 items: {
-                    id: 'container',
+                    id: 'card-panel',
+                    cls: 'card-panel',
                     xtype: 'container',
                     layout: 'card',
                     padding: '20',
-                    cls: 'container',
                     items: [
                         {
                             autoScroll: true,
diff --git a/template/app/view/cls/Container.js b/template/app/view/cls/Container.js
index 9ae3f205035aa7a0d70c41490091386221a09f19..2c01bd0f6d2e97c5831ca422a545281ba9f17cba 100644
--- a/template/app/view/cls/Container.js
+++ b/template/app/view/cls/Container.js
@@ -7,7 +7,7 @@ Ext.define('Docs.view.cls.Container', {
     alias: 'widget.classcontainer',
     requires: [
         'Docs.view.cls.Header',
-        'Docs.view.cls.TabPanel'
+        'Docs.view.cls.Overview'
     ],
 
     layout: {
@@ -18,7 +18,7 @@ Ext.define('Docs.view.cls.Container', {
     initComponent: function() {
         this.items = [
             Ext.create('Docs.view.cls.Header'),
-            Ext.create('Docs.view.cls.TabPanel', {
+            Ext.create('Docs.view.cls.Overview', {
                 flex: 1
             })
         ];
diff --git a/template/app/view/cls/Overview.js b/template/app/view/cls/Overview.js
index df4965481431b193211ca1f24712d7987bae7ac7..2cebb5346df0a6cca610ce207c9e98144a4b9124 100644
--- a/template/app/view/cls/Overview.js
+++ b/template/app/view/cls/Overview.js
@@ -11,7 +11,6 @@ Ext.define('Docs.view.cls.Overview', {
     ],
 
     cls: 'class-overview iScroll',
-    title: 'Overview',
     autoScroll: true,
     bodyPadding: '20',
 
@@ -64,7 +63,9 @@ Ext.define('Docs.view.cls.Overview', {
         this.classTpl = this.classTpl || new Ext.XTemplate(
             '<div>',
                 '{hierarchy}',
-                '{doc}',
+                 '<div class="doc-contents">',
+                    '{doc}',
+                '</div>',
                 '<div class="members">',
                     '{members}',
                 '</div>',
diff --git a/template/app/view/cls/TabPanel.js b/template/app/view/cls/TabPanel.js
deleted file mode 100644
index 316a494ddbd7eb149e02d56dbbc7587aa56ccec8..0000000000000000000000000000000000000000
--- a/template/app/view/cls/TabPanel.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * The documentation panel.
- * TODO: Source code tab, Examples, Q&A
- */
-Ext.define('Docs.view.cls.TabPanel', {
-    extend: 'Ext.tab.Panel',
-    alias: 'widget.classtabpanel',
-    requires: [
-        'Docs.view.cls.Overview'
-    ],
-
-    plain: true,
-
-    // Remember tab scroll position on Webkit
-    listeners: {
-        beforetabchange: function(tabPanel, newCard, oldCard) {
-            oldCard.prevScroll = oldCard.body.getScroll()['top'];
-        },
-        tabchange: function(tabPanel, newCard, oldCard) {
-            if (newCard.prevScroll) {
-                newCard.body.scrollTo('top', newCard.prevScroll);
-            }
-        }
-    }
-
-});
diff --git a/template/app/view/index/Container.js b/template/app/view/index/Container.js
index 34321422fe2d0644746eac1f5238c14f58ddc6a7..4f032ddc20f7edc6545b94e5f88f9e9bc7038abb 100644
--- a/template/app/view/index/Container.js
+++ b/template/app/view/index/Container.js
@@ -11,45 +11,46 @@ Ext.define('Docs.view.index.Container', {
         var data = this.classData;
 
         var tpl = new Ext.XTemplate(
-            '<h1 class="pb">{title}</h1>',
+            '<h1 class="top">{title}</h1>',
             '<tpl if="notice">',
                 '<div class="notice">{notice}</div>',
             '</tpl>',
-            '<div class="legend icons">',
+            '<div class="section legend">',
                 '<h4>Legend</h4>',
                 '<ul>',
-                  '<li class="icn icon-pkg">Package</li>',
-                  '<li class="icn icon-class">Class</li>',
-                  '<li class="icn icon-singleton">Singleton</li>',
-                  '<li class="icn icon-component">Component</li>',
-                  '<li class="icn icon-book">Guide</li>',
+                    '<li class="icon icon-pkg">Package</li>',
+                    '<li class="icon icon-class">Class</li>',
+                    '<li class="icon icon-singleton">Singleton</li>',
+                    '<li class="icon icon-component">Component</li>',
+                    '<li class="icon icon-guide">Guide</li>',
                 '</ul>',
-              '</div>',
-              '<div class="legend guides">',
+            '</div>',
+            '<div class="section guides">',
                 '<h1>Guides</h1>',
                 '<div class="lft">',
-                  '<a class="guide getting_started" rel="getting_started" href="guides/getting_started/index.html">Getting Started</a>',
-                  '<a class="guide class_system" rel="class_system" href="guides/class_system/index.html">Class System</a>',
-                  '<a class="guide application_architecture" rel="application_architecture" href="guides/application_architecture/index.html">MVC Architecture</a>',
-                  '<a class="guide layouts_and_containers" rel="layouts_and_containers" href="guides/layouts_and_containers/index.html">Layouts and Containers</a>',
+                    '<a class="guide getting_started" rel="getting_started" href="#/guide/getting_started">Getting Started</a>',
+                    '<a class="guide class_system" rel="class_system" href="#/guide/class_system">Class System</a>',
+                    '<a class="guide application_architecture" rel="application_architecture" href="#/guide/application_architecture">MVC Architecture</a>',
+                    '<a class="guide layouts_and_containers" rel="layouts_and_containers" href="#/guide/layouts_and_containers">Layouts and Containers</a>',
                 '</div>',
                 '<div class="mid">',
-                  '<a class="guide data" rel="data" href="guides/data/index.html">Data</a>',
-                  '<a class="guide grid" rel="grid" href="guides/grid/index.html">Grids</a>',
-                  '<a class="guide tree" rel="tree" href="guides/tree/index.html">Trees</a>',
-                  '<a class="guide drawing_and_charting" rel="drawing_and_charting" href="guides/drawing_and_charting/index.html">Charts</a>',
+                    '<a class="guide data" rel="data" href="#/guide/data">Data</a>',
+                    '<a class="guide grid" rel="grid" href="#/guide/grid">Grids</a>',
+                    '<a class="guide tree" rel="tree" href="#/guide/tree">Trees</a>',
+                    '<a class="guide drawing_and_charting" rel="drawing_and_charting" href="#/guide/drawing_and_charting">Charts</a>',
+                '</div>',
+                '<div class="rgt">',
+                    '<a class="guide components" rel="components" href="#/guide/components">Components</a>',
+                    '<a class="guide theming" rel="theming" href="#/guide/theming">Theming</a>',
+                    '<a class="guide direct" rel="direct" href="#/guide/direct">Direct</a>',
+                    '<a class="guide accessibility" rel="accessibility" href="#/guide/accessibility">Accessibility</a>',
                 '</div>',
-                '<div class="right">',
-                  '<a class="guide components" rel="components" href="guides/components/index.html">Components</a>',
-                  '<a class="guide theming" rel="theming" href="guides/theming/index.html">Theming</a>',
-                  '<a class="guide direct" rel="direct" href="guides/direct/index.html">Direct</a>',
-                  '<a class="guide accessibility" rel="accessibility" href="guides/accessibility/index.html">Accessibility</a>',
+                '<div class="examples">',
+                    '<a href="http://dev.sencha.com/deploy/ext-4.0.3/examples/index.html">View the Ext 4.0 examples &rarr;</a>',
                 '</div>',
-                '<div class="egLink"><a href="http://dev.sencha.com/deploy/ext-4.0.3/examples/index.html">View the Ext 4.0 examples &rarr;</a></div>',
-              '</div>',
             '</div>',
             '<tpl for="organisation">',
-                '<div class="category">',
+                '<div class="section classes">',
                     '<h1>{name}</h1>',
                     '<tpl for="categories">',
                         '<div class="{align}">',
diff --git a/template/app/view/tree/Tree.js b/template/app/view/tree/Tree.js
index af043aee9f2fff62ae63d16ad0660902f1964a14..cb490a9901501cf1cbabf9cfaed0eacb173456c4 100644
--- a/template/app/view/tree/Tree.js
+++ b/template/app/view/tree/Tree.js
@@ -5,9 +5,7 @@ Ext.define('Docs.view.tree.Tree', {
     extend: 'Ext.tree.Panel',
     alias : 'widget.classtree',
     requires: [
-        'Docs.view.HoverMenuButton',
-        'Docs.Favorites',
-        'Docs.History'
+        'Docs.Favorites'
     ],
 
     cls: 'class-tree iScroll',
@@ -24,6 +22,7 @@ Ext.define('Docs.view.tree.Tree', {
              * @event
              * Fired when class in tree was clicked on and needs to be loaded.
              * @param {String} cls  name of the class.
+             * @param {Ext.EventObject} e
              */
             "classclick"
         );
@@ -34,51 +33,8 @@ Ext.define('Docs.view.tree.Tree', {
 
         this.on("itemclick", this.onItemClick, this);
 
-        this.dockedItems = [
-            {
-                xtype: 'container',
-                layout: 'hbox',
-                dock: 'top',
-                margin: '0 0 15 0',
-                items: [
-                    {
-                        xtype: 'hovermenubutton',
-                        cls: 'icon-fav sidebar',
-                        text: 'Favorites',
-                        menuCfg: {
-                            cls: 'sidebar',
-                            emptyText: 'No favorites',
-                            showCloseButtons: true
-                        },
-                        store: Ext.getStore('Favorites'),
-                        listeners: {
-                            closeclick: function(cls) {
-                                Docs.Favorites.remove(cls);
-                            }
-                        }
-                    },
-                    {
-                        xtype: 'hovermenubutton',
-                        cls: 'icon-hist sidebar',
-                        text: 'History',
-                        menuCfg: {
-                            cls: 'sidebar',
-                            emptyText: 'No history',
-                            showCloseButtons: true
-                        },
-                        store: Ext.getStore('History'),
-                        listeners: {
-                            closeclick: function(cls) {
-                                Docs.History.removeClass(cls);
-                            }
-                        }
-                    }
-                ]
-            }
-        ];
-
         this.callParent();
-        
+
         // Add links for favoriting classes
         //
         // Wait for the Favorites to load, then wait for tree to render,
@@ -91,7 +47,7 @@ Ext.define('Docs.view.tree.Tree', {
             this.rendered ? this.initFavIcons() : this.on("render", this.initFavIcons, this);
         }, this);
     },
-    
+
     initFavIcons: function() {
         this.getRootNode().cascadeBy(this.addFavIcons, this);
     },
@@ -119,7 +75,7 @@ Ext.define('Docs.view.tree.Tree', {
                 }
             }
             else {
-                this.fireEvent("classclick", clsName);
+                this.fireEvent("classclick", clsName, e);
             }
         }
         else if (!node.isLeaf()) {
diff --git a/template/resources/images/drag-bar-center.png b/template/resources/images/drag-bar-center.png
new file mode 100644
index 0000000000000000000000000000000000000000..e0bf174810d668415bcd560112db1f5484f91874
Binary files /dev/null and b/template/resources/images/drag-bar-center.png differ
diff --git a/template/resources/sass/viewport.scss b/template/resources/sass/viewport.scss
index a6e6ca70baf5e0d57fe5e34fd1c37927afe7e016..6aa52d71ae60e6789f0ec8b0cc08eccf0c896a13 100644
--- a/template/resources/sass/viewport.scss
+++ b/template/resources/sass/viewport.scss
@@ -1,3 +1,15 @@
+// Colors
+$docs-bg-color: #f8f8f8;
+$docs-text-color: #484848;
+$docs-link-color: #083772;
+$docs-link-hover-color: #0464BB;
+$docs-border-color: #bfbfbf;
+
+// Fonts
+$docs-font: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+$docs-heading-font: "klavika-web-1", "klavika-web-2", sans-serif;
+$docs-monospace-font: "Menlo", "Courier New", Courier, monospace;
+
 @mixin box-shadow($x, $y, $radius, $color) {
   -webkit-box-shadow: $x $y $radius $color;
   -moz-box-shadow: $x $y $radius $color; }
@@ -47,7 +59,7 @@
     background: url(../images/icons.png) no-repeat -3px -111px !important; }
   .icon-component {
     background: url(../images/icons.png) no-repeat -3px -137px !important; }
-  .icon-book {
+  .icon-guide {
     background: url(../images/icons.png) no-repeat -3px -5px !important; }
   .icon-event {
     background: url(../images/icons.png) no-repeat -3px -245px !important; }
@@ -60,7 +72,7 @@
   .icon-subclass {
     background: url(../images/icons.png) no-repeat -3px -299px !important; }
   .icon-fav {
-    background: url(../images/icons.png) no-repeat -3px -326px !important; }
+    background: url(../images/icons.png) no-repeat -3px -328px !important; }
   .icon-hist {
     background: url(../images/icons.png) no-repeat -3px -380px !important; } }
 
@@ -71,7 +83,7 @@
 
 @mixin gray-h4 {
   h4 {
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-family: $docs-font;
     font-size: 90%;
     padding: 11px 0 5px 0;
     text-transform: uppercase;
@@ -84,10 +96,10 @@ html {
 
 body {
   -webkit-font-smoothing: antialiased;
-  font-family: 13px / 1.231 "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+  font: 13px / 1.231 $docs-font;
   min-width: 980px;
-  color: #484848;
-  background: #f8f8f8;
+  color: $docs-text-color;
+  background: $docs-bg-color;
   min-height: 100%; }
 
 #loading {
@@ -115,11 +127,10 @@ body {
     height: 120px; } }
 
 a {
-  color: #083772;
-  text-decoration: none; }
-
-a:hover {
-  color: #0464BB; }
+  color: $docs-link-color;
+  text-decoration: none;
+  &:hover {
+    color: $docs-link-hover-color; } }
 
 .notice {
   background-color: #ffc;
@@ -147,7 +158,7 @@ a:hover {
 
 #search-dropdown {
   border-style: solid;
-  border-color: #bebdbf;
+  border-color: $docs-border-color;
   border-width: 1px 1px 0 1px;
   background: white;
   position: absolute;
@@ -163,7 +174,7 @@ a:hover {
     padding: 5px 5px 5px 30px;
     border-width: 0px 0px 1px 0px;
     border-style: solid;
-    border-color: #bebdbf;
+    border-color: $docs-border-color;
     color: #605f5f;
     .title {
       font-weight: bold;
@@ -194,10 +205,35 @@ a:hover {
 
 
 #center-container, #west-region-container {
-  background: #F8F8F8 url(../images/headBG.png) repeat-x; }
+  background: $docs-bg-color url(../images/headBG.png) repeat-x; }
+
+#nested-west-region-container {
+  background: $docs-bg-color;
+  #classes-tab-panel {
+    .x-grid-row td {
+      background: none;
+      border: 0;
+      cursor: pointer;
+      img {
+        display: none;
+        margin-top: 1px; } }
+    .x-grid-row-over td {
+      background-color: #f0f0f0; }
+    .x-grid-row-over td img {
+      display: block; }
+    .x-grid-cell-inner {
+      padding: 2px 2px 3px 2px; } }
+  .x-splitter {
+    background: #ccc;
+    border-style: solid;
+    border-color: $docs-border-color;
+    height: 6px !important;
+    background-attachment: fixed;
+    background: #e9e9e9 url(../images/drag-bar-center.png) no-repeat center;
+    border-width: 1px 0; } }
 
 #footer {
-  background: #F8F8F8;
+  background: $docs-bg-color;
   color: gray;
   text-align: right;
   font-size: 10px;
@@ -209,10 +245,8 @@ a:hover {
     display: block !important; } }
 
 #center-container {
-  padding: 20px 20px 5px 20px;
-
   h1 {
-    font-family: "klavika-web-1", "klavika-web-2", sans-serif;
+    font-family: $docs-heading-font;
     letter-spacing: -1px;
     padding-bottom: 5px;
     padding-top: 2px;
@@ -248,140 +282,117 @@ a:hover {
       margin-left: -12px;
       padding: 0.1em 0 0.4em 2em; } } }
 
-.container {
+.card-panel {
   background: #fff;
   @include border-radius(5px);
   @include box-shadow(0, 0, 4px, rgba(0, 0, 0, 0.4));
-  padding: 20px;
   line-height: 1.4em;
   h3 {
     font-size: 1.2em;
     padding: 1em 0 0.4em 0;
-    font-weight: normal; }
-  .legend.guides {
-    padding: 15px;
-    width: 560px !important;
-    line-height: 1.7em;
-    h1 {
-      font-size: 1.7em !important; }
-    .lft {
-      float: left;
-      width: 200px; }
-    .mid {
-      float: left;
-      width: 100px;
-      margin-left: 20px; }
-    .right {
-      margin-left: 370px; }
-    a {
-      display: block;
-      height: 32px;
-      margin: 10px 0;
-      padding-left: 40px; }
-    .egLink {
-      border-top: 1px solid #ebebeb;
-      a {
-        padding-left: 10px;
-        margin: 10px 0 0 0;
-        height: auto; } }
-    .getting_started {
-      background: url(../images/guides.png) no-repeat 0px 0px; }
-    .drawing_and_charting {
-      background: url(../images/guides.png) no-repeat 0px -288px; }
-    .layouts_and_containers {
-      background: url(../images/guides.png) no-repeat 0px -130px; }
-    .application_architecture {
-      background: url(../images/guides.png) no-repeat 0px -98px; }
-    .class_system {
-      background: url(../images/guides.png) no-repeat 0px -31px; }
-    .data {
-      background: url(../images/guides.png) no-repeat 0px -66px; }
-    .grid {
-      background: url(../images/guides.png) no-repeat 0px -193px; }
-    .tree {
-      background: url(../images/guides.png) no-repeat 0px -228px; }
-    .components {
-      background: url(../images/guides.png) no-repeat 0px -160px; }
-    .theming {
-      background: url(../images/guides.png) no-repeat 0px -320px; }
-    .direct {
-      background: url(../images/guides.png) no-repeat 0px -387px; }
-    .accessibility {
-      background: url(../images/guides.png) no-repeat 0px -453px; } }
-  .category {
-    clear: both;
-    background-color: #f7f7f7;
-    border: 1px solid #ebebeb;
-    padding: 20px 10px 20px 20px;
-    margin: 0 20px 20px 0;
-    @include border-radius(10px); }
-  .category:last-child {
-    margin-bottom: 0; }
-  .lft {
-    float: left;
-    width: 250px;
-    margin-left: 20px; }
-  .mid {
-    float: left;
-    width: 280px; }
-  .rgt {
-    float: left; }
-  .links {
-    margin-left: 1.5em;
-    a {
-      display: block; }
-    a.more {
-      font-weight: bold; } }
+    font-weight: normal; } }
 
-  .legend {
+// Styles for index page
+#center-container .class-list {
+  // Main heading at the top of the page
+  h1.top {
+    margin-bottom: 12px; }
+  // All sections are inside gray round-corners bubbles
+  .section {
     @include border-radius(5px);
     background-color: #f7f7f7;
     border: 1px solid #ebebeb;
     padding: 0 15px 15px 10px;
-    margin: 0 20px 10px 0;
-    &.icons {
-      width: 120px;
-      float: right; }
-    ul {
-      float: left; }
-    .icn {
-      padding-left: 22px; }
-    a {
-      display: block; }
-    @include gray-h4; } }
-
-
-#center-container .class-list {
-  h1.pb { margin-bottom: 12px; }
-  h2 {
-    font-weight: bold; }
-  td {
-    padding: 0 0 0 20px;
-    vertical-align: top; }
-  .group {
-    h1 {
-      padding-bottom: 10px; }
-    background: #fafafa;
-    padding: 10px 20px 20px 20px;
     margin: 0 20px 20px 0;
-    @include border-radius(10px);
-    h2 {
-      border-bottom: 1px solid #dddddd;
-      padding-bottom: 2px;
-      margin-bottom: 2px;
-      padding-top: 10px; }
-    td.l {
-      span {
-        font-family: courier;
-        padding-right: 3px; } } }
-  .piechartLinks {
-    a {
-      display: block; } } }
-
-
-.class-tree {
+    // Icons legend, floated to right
+    &.legend {
+      width: 120px;
+      float: right;
+      @include gray-h4;
+      ul {
+        float: left; }
+      .icon {
+        padding-left: 22px; }
+      a {
+        display: block; } }
+    // Guides section at top left
+    &.guides {
+      padding: 15px;
+      width: 560px;
+      line-height: 1.7em;
+      h1 {
+        font-size: 1.7em !important; }
+      .lft {
+        float: left;
+        width: 200px;
+        margin-left: 20px }
+      .mid {
+        float: left;
+        width: 100px;
+        margin-left: 20px; }
+      .rgt {
+        margin-left: 370px; }
+      a {
+        display: block;
+        height: 32px;
+        margin: 10px 0;
+        padding-left: 40px; }
+      // Link to examples
+      .examples {
+        border-top: 1px solid #ebebeb;
+        a {
+          padding-left: 10px;
+          margin: 10px 0 0 0;
+          height: auto; } }
+      // Icons for each guide
+      .getting_started {
+        background: url(../images/guides.png) no-repeat 0px 0px; }
+      .drawing_and_charting {
+        background: url(../images/guides.png) no-repeat 0px -288px; }
+      .layouts_and_containers {
+        background: url(../images/guides.png) no-repeat 0px -130px; }
+      .application_architecture {
+        background: url(../images/guides.png) no-repeat 0px -98px; }
+      .class_system {
+        background: url(../images/guides.png) no-repeat 0px -31px; }
+      .data {
+        background: url(../images/guides.png) no-repeat 0px -66px; }
+      .grid {
+        background: url(../images/guides.png) no-repeat 0px -193px; }
+      .tree {
+        background: url(../images/guides.png) no-repeat 0px -228px; }
+      .components {
+        background: url(../images/guides.png) no-repeat 0px -160px; }
+      .theming {
+        background: url(../images/guides.png) no-repeat 0px -320px; }
+      .direct {
+        background: url(../images/guides.png) no-repeat 0px -387px; }
+      .accessibility {
+        background: url(../images/guides.png) no-repeat 0px -453px; } }
+    // Sections for class lists
+    &.classes {
+      clear: both;
+      padding: 20px 10px 20px 20px;
+      .lft {
+        float: left;
+        width: 250px;
+        margin-left: 20px; }
+      .mid {
+        float: left;
+        width: 280px; }
+      .rgt {
+        float: left; }
+      .links {
+        margin-left: 1.5em;
+        a {
+          display: block; }
+        a.more {
+          font-weight: bold; } } } } }
+
+
+#nested-west-region-container {
   .x-grid-cell-inner {
-    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+    font-family: $docs-font;
     font-size: 13px;
     position: relative;
     -webkit-transition: background-color 0.15s linear;
@@ -403,7 +414,7 @@ a:hover {
         &:hover {
           @include icon-fav-over; } } } }
   .x-panel-body {
-    background: #f8f8f8; }
+    background: $docs-bg-color; }
   .sortBy {
     position: relative;
     padding-bottom: 10px;
@@ -437,14 +448,14 @@ a:hover {
     border: solid 1px #e8e8e8;
     @include border-radius(5px);
     color: #314e64;
-    font-family: "Menlo", "Courier New", Courier, monospace;
+    font-family: $docs-monospace-font;
     padding: 10px 20px;
     line-height: 1.3em;
     margin: 10px 0 14px;
     overflow-x: auto;
     overflow-y: hidden;
     code {
-      font-family: "Menlo", "Courier New", Courier, monospace; }
+      font-family: $docs-monospace-font; }
     i,em {
       font-style: normal; } }
   pre.prettyprint {
@@ -467,7 +478,7 @@ a:hover {
       padding: 0 0 0 12px;
       margin-top: 3px; }
     .alternate-class-name {
-      color: #484848; }
+      color: $docs-text-color; }
     .subclass {
       background: url(../images/elbow-end.gif) no-repeat -5px 0;
       margin-top: 3px;
@@ -498,37 +509,49 @@ a:hover {
   h4 {
     font-weight: bold; } }
 
+@mixin guides-h2-heading {
+  font-family: $docs-font;
+  letter-spacing: -1px;
+  line-height: 20px;
+  border-bottom: 1px solid #f1f1f1;
+  font-size: 20px;
+  font-weight: bold;
+  color: #314e64;
+  margin: 30px 0 15px;
+  padding-bottom: 5px; }
+
+@mixin guides-h3-heading {
+  font-weight: bold;
+  color: #314e64;
+  margin-top: 1em;
+  font-size: 14px;
+  line-height: 16px;
+  margin-bottom: 4px; }
+
 #guide {
   padding-right: 10px;
   font-size: 14px;
   h1 {
     background: url(../images/doc-m.png) no-repeat -5px -5px;
     padding: 10px 0 10px 55px;
-    font-family: "klavika-web-1", "klavika-web-2", sans-serif;
+    font-family: $docs-heading-font;
     letter-spacing: -1px;
     margin-bottom: 16px;
     font-size: 2.3em;
     color: #66ab16; }
   h2 {
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    letter-spacing: -1px;
-    line-height: 20px;
-    border-bottom: 1px solid #f1f1f1;
-    font-size: 20px;
-    font-weight: bold;
-    color: #314e64;
-    margin: 30px 0 15px;
-    padding-bottom: 5px; }
+    @include guides-h2-heading; }
   h3 {
-    font-weight: bold;
-    color: #314e64;
-    margin-top: 1em;
-    font-size: 14px;
-    line-height: 16px;
-    margin-bottom: 4px; }
+    @include guides-h3-heading; }
   hr {
     display: none; } }
 
+// Nice styles for headings inside documentation
+#center-container .doc-contents {
+  h1, h2 {
+    @include guides-h2-heading; }
+  h3 {
+    @include guides-h3-heading; } }
 
 .class-overview {
   .deprecated-signature, .protected-signature, .static-signature, .constructor-signature {
@@ -544,11 +567,11 @@ a:hover {
   .protected-signature {
     background-color: #aaa; }
   .static-signature {
-    background-color: #484848; }
+    background-color: $docs-text-color; }
   .constructor-signature {
     margin-left: 0;
     margin-right: 5px;
-    background-color: #484848; }
+    background-color: $docs-text-color; }
   .cfgGroup {
     margin: 10px 0 3px 0; } }
 
@@ -559,7 +582,7 @@ a:hover {
   first-child: {
     padding-top: 0; };
   .pre {
-    font-family: "Menlo", "Courier New", Courier, monospace;
+    font-family: $docs-monospace-font;
     font-size: 0.9em; }
   .definedBy {
     float: right;
@@ -612,7 +635,7 @@ a:hover {
       color: #888888;
       font-size: 0.9em;
       &:hover {
-        color: #0464bb; } }
+        color: $docs-link-hover-color; } }
     a.side {
       display: block;
       position: absolute;
@@ -635,7 +658,7 @@ a:hover {
       -webkit-transition: color 0.2s linear;
       font-size: 0.9em;
       &:hover {
-        color: #0464bb; } }
+        color: $docs-link-hover-color; } }
     &:hover {
       a.viewSource {
         color: rgba(128, 128, 128, 1);
@@ -677,10 +700,6 @@ a:hover {
   background: url(../images/expandcollapse.png) no-repeat 2px 2px !important; }
 
 .member-links {
-  border-width: 0 0 1px 0;
-  border-style: solid;
-  border-color: #bfbfbf;
-  // @include vertical-gradient(#e8e8e8, #eaeaea)
   .expandAllMembers {
     background: url(../images/expandcollapse.png) no-repeat -14px 2px; }
   .collapseAllMembers {
@@ -690,9 +709,6 @@ a:hover {
 .hover-menu-button {
   padding-left: 20px;
   cursor: pointer;
-  // The same button when used for favorites and history
-  &.sidebar {
-    padding-right: 10px; }
   sup {
     font-size: 0.8em;
     position: relative;
@@ -706,14 +722,10 @@ a:hover {
   z-index: 8;
   top: 21px;
   line-height: 1.3em;
-  border: 1px solid #bfbfbf;
+  border: 1px solid $docs-border-color;
   border-top: 1px solid #eaeaea;
   left: -16px;
   @include border-radius-bottom(5px);
-  // The same menu when used for favorites and history
-  &.sidebar {
-    min-width: 220px;
-    left: 20px !important; }
   table {
     width: 100%; }
   td {
@@ -724,10 +736,10 @@ a:hover {
     display: block;
     position: relative;
     padding: 2px 30px 2px 0;
-    color: #0464bb;
+    color: $docs-link-hover-color;
     white-space: nowrap;
     &:hover {
-      color: #083772;
+      color: $docs-link-color;
       text-decoration: underline; }
     &.close {
       position: absolute;
@@ -748,4 +760,4 @@ a:hover {
       padding: 0 0.5em;
       @include border-radius(2px);
       color: white;
-      background: #484848; } } }
+      background: $docs-text-color; } } }