diff --git a/index.css b/index.css
index f821afd6..d39e7a39 100644
--- a/index.css
+++ b/index.css
@@ -7,7 +7,7 @@ body {
     z-index: 1001;
 }
 
-.OxCode .doclink {
+.OxSyntaxHighlighter .doclink {
     text-decoration: underline;
 }
 .OxComment .doclink {
@@ -18,6 +18,12 @@ body {
     text-decoration: underline;
 }
 
+.OxThemeClassic .OxLabel.label,
+.OxThemeModern .OxLabel.label {
+    border-color: transparent;
+    background-color: transparent;
+}
+
 .loading {
     left: 0;
     right: 0;
@@ -31,7 +37,9 @@ body {
     padding: 32px;
     margin: 32px auto 32px auto;
     border-radius: 8px;
-    font-size: 14px;
+    //font-size: 14px;
+    //line-height: 20px;
+    font-size: 13px;
     line-height: 20px;
 }
 .page code, .page pre {
@@ -63,7 +71,7 @@ body {
     font-size: 12px;
 }
 .readme .text {
-    padding: 8px;
+    padding: 16px;
     font-size: 14px;
     line-height: 20px;
 }
@@ -92,18 +100,16 @@ body {
 
 body.OxThemeClassic,
 .OxThemeClassic .screen {
-    background-color: rgb(240, 240, 240);    
+    background-color: rgb(224, 224, 224);    
 }
 body.OxThemeModern,
 .OxThemeModern .screen {
     background-color: rgb(16, 16, 16);
 }
 
-.OxThemeClassic .OxLabel.label,
 .OxThemeClassic .page {
     background-color: rgb(255, 255, 255);
 }
-.OxThemeModern .OxLabel.label,
 .OxThemeModern .page {
     background-color: rgb(0, 0, 0);
 }
@@ -118,10 +124,10 @@ body.OxThemeModern,
 .OxThemeClassic .logo,
 .OxThemeClassic .page,
 .OxThemeClassic .readme .OxSyntaxHighlighter {
-    box-shadow: 0 0 1px rgb(0, 0, 0)
+    box-shadow: 0 0 1px rgb(160, 160, 160)
 }
 .OxThemeModern .logo,
 .OxThemeModern .page,
 .OxThemeModern .readme .OxSyntaxHighlighter {
-    box-shadow: 0 0 1px rgb(255, 255, 255)
+    box-shadow: 0 0 1px rgb(96, 96, 96)
 }
diff --git a/index.js b/index.js
index 5755eebb..2f9e2f47 100644
--- a/index.js
+++ b/index.js
@@ -77,19 +77,21 @@ Ox.load(function() {
                     left: center - 128 + 'px',
                     top: middle - 128 + 'px',
                     width: '256px',
-                    height: '128px'
+                    height: '128px',
+                    borderRadius: '32px'
                 } : {
-                    top: '8px',
-                    left: '8px',
+                    top: '6px',
+                    left: '6px',
                     width: '48px',
-                    height: '24px'
+                    height: '24px',
+                    borderRadius: '6px'
                 };
             } else if (element == 'menu') {
                 css = home ? {
                     top: middle + 56 + 'px',
                     left: Math.ceil(center - app.$ui.menu.width() / 2) + 'px'
                 } : {
-                    top: '8px',
+                    top: '6px',
                     left: Math.ceil(center - app.$ui.menu.width() / 2) + 'px'
                 };
             } else if (element == 'screen') {
@@ -99,8 +101,8 @@ Ox.load(function() {
                     top: middle + 96 + 'px',
                     right: Math.floor(center - app.$ui.switch.width() / 2) + 'px'
                 } : {
-                    top: '8px',
-                    right: '8px'
+                    top: '6px',
+                    right: '6px'
                 };
             } else if (element == 'warning') {
                 css = {
@@ -121,8 +123,8 @@ Ox.load(function() {
                 src = 'source/Ox.UI/themes/' + theme
                     + '/svg/symbolLoadingAnimated.svg'
             } else if (element == 'logo') {
-                src = 'source/Ox.UI/themes/' + theme + '/png/logo'
-                    + (home || !app.state.loaded ? 128 : 16) + '.png'                
+                src = 'source/Ox.UI/themes/' + theme
+                    + '/png/logo128.png'                
             }
             return src;
         },
@@ -240,7 +242,9 @@ Ox.load(function() {
         patchButtonGroup: function($buttonGroup) {
             $buttonGroup.find('.OxButton').css({
                 height: '22px',
-                fontSize: '12px'
+                paddingLeft: '8px',
+                paddingRight: '8px',
+                fontSize: '13px'
             });
             $buttonGroup.find('.OxButton:first-child').css({
                 //paddingLeft: '9px',
@@ -257,10 +261,10 @@ Ox.load(function() {
             code: [
                 new RegExp(
                     '<span class="OxIdentifier">Ox</span>'
-                    + '(<span class="OxOperator">\.</span>'
+                    + '(<span class="OxOperator">\\.</span>'
                     + '<span class="OxIdentifier">UI</span>)?'
-                    + '<span class="OxOperator">\.</span>'
-                    + '<span class="OxIdentifier">([\\$\\w]+)<\/span>',
+                    + '<span class="OxOperator">\\.</span>'
+                    + '<span class="Ox\\w+">([\\$\\w]+)<\\/span>',
                     'g'
                 ),
                 function (str) {
@@ -319,8 +323,14 @@ Ox.load(function() {
         ui: {
             doc: function() {
                 return Ox.DocPanel({
-                        element: app.html.documentation,
-                        files: app.data.documentation,
+                        element: $('<div>')
+                            .addClass('Ox___Serif page')
+                            .css({
+                                margin: '32px',
+                                width: window.innerWidth - 640 + 'px'
+                            })
+                            .html(app.html.documentation),
+                        files: app.data.docItems ? void 0 : app.data.documentation,
                         getModule: function(item) {
                             var file = item.file.replace(/^dev\//, '');
                             return file.split('/')[0];
@@ -329,9 +339,9 @@ Ox.load(function() {
                             var file = item.file.replace(/^dev\//, '');
                             return item.section || file.split('/')[2].split('.')[0];
                         },
+                        items: app.data.docItems || void 0,
                         path: 'dev/',
-                        replace: [app.re.code],
-                        selected: ''
+                        replace: [app.re.code]
                     })
                     .bindEvent({
                         select: function(data) {
@@ -339,10 +349,22 @@ Ox.load(function() {
                                 'doc' + (data.id ? '/' + data.id : '')
                             )
                         }
+                    })
+                    .bindEventOnce({
+                        load: function(data) {
+                            app.data.docItems = data.items;
+                        }
                     });
             },
             examples: function() {
                 return Ox.ExamplePanel({
+                        element: $('<div>')
+                            .addClass('Ox___Serif page')
+                            .css({
+                                margin: '32px',
+                                width: window.innerWidth - 640 + 'px'
+                            })
+                            .html(app.html.examples),
                         examples: app.data.examples,
                         keywords: /\b(Ox\.[\w]+)\b/g,
                         path: 'examples/',
@@ -404,7 +426,7 @@ Ox.load(function() {
             page: function(page, replace) {
                 var $element = Ox.Container();
                 $('<div>')
-                    .addClass('OxSerif page')
+                    .addClass('Ox____Serif page')
                     .html(app.html[page].replace(app.re.version[0], app.re.version[1]))
                     .appendTo($element);
                 return $element;
@@ -414,7 +436,7 @@ Ox.load(function() {
                             content: function(id) {
                                 return app.$ui[id] = app.ui[id] ? app.ui[id]() : app.ui.page(id);
                             },
-                            size: 40,
+                            size: 36,
                             tabs: app.data.pages
                         })
                         .bindEvent({
@@ -423,7 +445,7 @@ Ox.load(function() {
                             }
                         }),
                     $buttonGroup = $panel.find('.OxButtonGroup').css({
-                        top: '8px'
+                        top: '6px'
                     });
                 app.patchButtonGroup($buttonGroup);
                 return $panel;
@@ -471,16 +493,26 @@ Ox.load(function() {
                     $('.readme .item.selected').removeClass('selected');
                     id && $('#readme_' + id).addClass('selected');                    
                     Ox.get('readme/html/' + (id || '_readme') + '.html', function(html) {
-                        $text.html(html);
-                        $text.find('.code').each(function() {
-                            var $this = $(this);
-                            $this.replaceWith(
-                                Ox.SyntaxHighlighter({
-                                    source: $this.text()
-                                })
-                                .attr({id: $this.attr('id')})
-                            );
-                        });
+                        $text.empty()
+                            .append(
+                                id ? html
+                                : $('<div>')
+                                    .addClass('Ox___Serif page')
+                                    .css({
+                                        margin: '16px',
+                                        width: window.innerWidth - 640 + 'px'
+                                    })
+                                    .html(html)
+                            )
+                            .find('.code').each(function() {
+                                var $this = $(this);
+                                $this.replaceWith(
+                                    Ox.SyntaxHighlighter({
+                                        source: $this.text()
+                                    })
+                                    .attr({id: $this.attr('id')})
+                                );
+                            });
                     });
                     app.url.set('readme' + (id ? '/' + id : ''));
                 }
@@ -550,10 +582,16 @@ Ox.load(function() {
             if (current.page != app.history.page) {
                 app.$ui.panel.select(current.page);
             }
+            if (current.item != app.history.item) {
+                Ox.print('setting selected!')
+                app.$ui[current.page].options({selected: current.item});
+            }
+            /*
             if (Ox.in(['readme', 'examples', 'doc'], current.page)) {
                 Ox.print('cp',current.page, current.item)
                 app.$ui[current.page].options({selected: current.item});
             }
+            */
             (!current.page || !app.history.page ? app.animate : Ox.void)(function() {
                 //app.url.replace(url);
                 app.history = current;
diff --git a/readme/html/_documentation.html b/readme/html/_documentation.html
index 224d377c..167516f1 100644
--- a/readme/html/_documentation.html
+++ b/readme/html/_documentation.html
@@ -1,2 +1,2 @@
-<h1>Documentation</h1>
-<p>Generated with <a href="#documentation/Ox.doc"><code>Ox.doc</code></a>. Please note that parts of it may still be incomplete, incorrect or in flux.</p>
\ No newline at end of file
+<h1><b>Documentation</b></h1>
+<p>Generated with <a href="#doc/Ox.doc"><code>Ox.doc</code></a>. Please note that parts of it may still be incomplete, incorrect or in flux.</p>
\ No newline at end of file
diff --git a/readme/html/_examples.html b/readme/html/_examples.html
index b6742055..5e785326 100644
--- a/readme/html/_examples.html
+++ b/readme/html/_examples.html
@@ -1,2 +1,2 @@
-<h1>Examples</h1>
+<h1><b>Examples</b></h1>
 <p>...</p>
\ No newline at end of file
diff --git a/readme/html/_readme.html b/readme/html/_readme.html
index a02508ec..1e5de60c 100644
--- a/readme/html/_readme.html
+++ b/readme/html/_readme.html
@@ -1,2 +1,2 @@
-<h1>Readme</h1>
+<h1><b>Readme</b></h1>
 <p>The missing blog. The missing FAQ. The missing manual.</p>
\ No newline at end of file