diff --git a/source/Ox.UI/js/Code/ExamplePanel.js b/source/Ox.UI/js/Code/ExamplePanel.js
index 6a1022d6..24ca3e30 100644
--- a/source/Ox.UI/js/Code/ExamplePanel.js
+++ b/source/Ox.UI/js/Code/ExamplePanel.js
@@ -27,7 +27,7 @@ Ox.ExamplePanel = function(options, self) {
         .options(options || {})
         .update({
             selected: function() {
-                self.$list.options({selected: [self.options.selected]});
+                selectItem(self.options.selected);
             }
         });
 
@@ -49,32 +49,35 @@ Ox.ExamplePanel = function(options, self) {
         })
     );
 
-    loadList(function(items) {
+    loadItems(function(items) {
+        var treeItems = [];
         self.items = items;
-        self.$list = Ox.TextList({
-                columns: [
-                    {
-                        id: 'id',
-                        unique: true
-                    },
-                    {
-                        id: 'title',
-                        operator: '+',
-                        title: 'Title',
-                        visible: true,
-                        width: self.options.size - Ox.UI.SCROLLBAR_SIZE
-                    }
-                ],
-                items: self.items,
-                max: 1,
-                selected: self.options.selected
-                    ? [self.options.selected] : [],
-                scrollbarVisible: true,
-                sort: ['+title']
+        items.forEach(function(item) {
+            var sectionIndex = Ox.getIndexById(treeItems, item.section + '/');
+            if (sectionIndex == -1) {
+                treeItems.push({
+                    id: item.section + '/',
+                    items: [],
+                    title: item.sectionTitle
+                });
+                sectionIndex = treeItems.length - 1;
+            }
+            treeItems[sectionIndex].items.push(item);
+        });
+        self.$list = Ox.TreeList({
+                expanded: true,
+                items: treeItems,
+                selected: self.options.selected ? [self.options.selected] : [],
+                width: self.options.size
             })
             .bindEvent({
                 select: function(data) {
-                    selectItem(data.ids[0] || '');
+                    Ox.print('SELECT', data.ids[0])
+                    if (!data.ids[0] || !Ox.endsWith(data.ids[0], '/')) {
+                        selectItem(
+                            data.ids[0] ? data.ids[0].split('/').pop() : ''
+                        );
+                    }
                 }
             });
         self.$panel.replaceElement(0, self.$list);
@@ -82,17 +85,31 @@ Ox.ExamplePanel = function(options, self) {
         that.triggerEvent('load', {});
     });
 
-    function loadList(callback) {
+    function getItemByName(name) {
+        var item = null;
+        Ox.forEach(self.items, function(v) {
+            if (v.id.split('/').pop() == name) {
+                item = v;
+                Ox.Break();
+            }
+        });
+        return item;
+    }
+
+    function loadItems(callback) {
         var items = [];
         self.options.examples.forEach(function(example) {
             var item = {
                 html: self.options.path + example + '/index.html',
                 id: example,
-                js: self.options.path + example + '/js/example.js'
+                js: self.options.path + example + '/js/example.js',
+                section: example.split('/').shift()
             };
             Ox.get(item.html, function(html) {
-                var title = html.match(/<title>(.+)<\/title>/);
-                item.title = title ? title[1] : 'Untitled'
+                var match = html.match(/<title>(.+)<\/title>/);
+                item.title = match ? match[1] : 'Untitled';
+                match = html.match(/<meta http-equiv="Keywords" content="(.+)"\/>/);
+                item.sectionTitle = match ? match[1] : 'Untitled';
                 Ox.get(item.js, function(js) {
                     var references = js.match(self.options.references);
                     item.references = references ? Ox.unique(references).sort(function(a, b) {
@@ -108,26 +125,27 @@ Ox.ExamplePanel = function(options, self) {
     }
 
     function selectItem(id) {
-        var item = id ? Ox.getObjectById(self.items, id) : null
+        var item = id ? getItemByName(id) : null;
+        Ox.print('SELECT ITEM', id, item)
         if (item) {
             self.options.selected = id;
-            self.$panel.replaceElement(1,
-                self.$page = Ox.ExamplePage({
-                        height: window.innerHeight,
-                        html: item.html,
-                        js: item.js,
-                        references: item.references,
-                        replaceCode: self.options.replaceCode,
-                        replaceComment: self.options.replaceComment,
-                        title: item.title,
-                        width: window.innerWidth - self.options.size
-                    })
-                    .bindEvent({
-                        close: function() {
-                            selectItem();
-                        }
-                    })
-            );
+            self.$list.options({selected: [item.section + '/' + id]});
+            self.$page = Ox.ExamplePage({
+                    height: window.innerHeight,
+                    html: item.html,
+                    js: item.js,
+                    references: item.references,
+                    replaceCode: self.options.replaceCode,
+                    replaceComment: self.options.replaceComment,
+                    title: item.title,
+                    width: window.innerWidth - self.options.size
+                })
+                .bindEvent({
+                    close: function() {
+                        selectItem();
+                    }
+                });
+            self.$panel.replaceElement(1, self.$page);
         } else {
             self.options.selected = '';
             self.$list.options({selected: []});