diff --git a/index.css b/index.css
index 785e87d5..f86f028d 100644
--- a/index.css
+++ b/index.css
@@ -1,12 +1,6 @@
 body {
     margin: 0;
 }
-body.OxThemeClassic {
-    background-color: rgb(240, 240, 240);    
-}
-body.OxThemeModern {
-    background-color: rgb(16, 16, 16);
-}
 
 .animate, .loading {
     position: absolute;
@@ -32,26 +26,14 @@ body.OxThemeModern {
     margin: auto;
 }
 
-.OxThemeClassic .logo {
-    box-shadow: 0 0 1px rgb(0, 0, 0)
-}
-.OxThemeModern .logo {
-    box-shadow: 0 0 1px rgb(255, 255, 255)
-}
-
 .page {
-    width: 512px;
+    width: 576px;
     padding: 32px;
-    margin: 16px auto 16px auto;
-    border-width: 1px;
-    border-style: solid;
+    margin: 32px auto 32px auto;
     border-radius: 8px;
     font-size: 14px;
     line-height: 20px;
 }
-.page blockquote {
-    margin-left: 28px;
-}
 .page code, .page pre {
     font-size: 12px;
 }
@@ -63,23 +45,75 @@ body.OxThemeModern {
     font-size: 16px;
     line-height: 22px;
 }
-.OxThemeClassic .page {
-    border-color: rgb(208, 208, 208);
-    background: rgb(255, 255, 255);
+
+.readme .item {
+    padding: 4px 8px 4px 8px;
+    border-radius: 8px;
+    margin: 8px;
+    cursor: pointer;
 }
-.OxThemeModern .page {
-    border-color: rgb(48, 48, 48);
-    background: rgb(0, 0, 0);
+.readme .item.selected {
+    cursor: normal;
 }
+.readme .item .title {
+    font-size: 14px;
+}
+.readme .item .date {
+    margin-top: 2px;
+    font-size: 12px;
+}
+.readme .text {
+    padding: 8px;
+    font-size: 14px;
+    line-height: 20px;
+}
+.readme .text code, .readme .text pre {
+    font-size: 12px;
+}
+.readme .text h1 {
+    font-size: 18px;
+    line-height: 24px;
+}
+.readme .text h2 {
+    font-size: 16px;
+    line-height: 22px;
+}
+
 
 .screen {
     width: 100%;
     height: 100%;
     z-index: 1000;    
 }
+
+body.OxThemeClassic,
 .OxThemeClassic .screen {
-    background-color: rgba(240, 240, 240, 1);    
+    background-color: rgb(240, 240, 240);    
 }
+body.OxThemeModern,
 .OxThemeModern .screen {
-    background-color: rgba(16, 16, 16, 1);
+    background-color: rgb(16, 16, 16);
 }
+
+.OxThemeClassic .page {
+    background: rgb(255, 255, 255);
+}
+.OxThemeModern .page {
+    background: rgb(0, 0, 0);
+}
+
+.OxThemeClassic .logo,
+.OxThemeClassic .page {
+    box-shadow: 0 0 1px rgb(0, 0, 0)
+}
+.OxThemeModern .logo,
+.OxThemeModern .page {
+    box-shadow: 0 0 1px rgb(255, 255, 255)
+}
+
+.OxThemeClassic .readme .item.selected {
+    background: rgb(224, 224, 224);
+}
+.OxThemeModern .readme .item.selected {
+    background: rgb(32, 32, 32);
+}
\ No newline at end of file
diff --git a/index.js b/index.js
index 770a3f15..f339f4a2 100644
--- a/index.js
+++ b/index.js
@@ -28,14 +28,23 @@ Ox.load(function() {
                             });
                             app.$ui.panel.find('.OxButtonGroup').css({opacity: 1});
                             app.$ui.screen.hide();
-                            app.$ui.label.show();
+                            app.$ui.label.hide();
                             app.$ui.menu.hide().options({value: ''});
                         }
                     } : void 0
                 );
             });
         },
-        data: {},
+        data: {
+            sections: [
+                {id: 'about', title: 'About'},
+                {id: 'readme', title: 'Readme'},
+                {id: 'examples', title: 'Examples'},
+                {id: 'doc', title: 'Documentation'},
+                {id: 'downloads', title: 'Downloads'},
+                {id: 'development', title: 'Development'}
+            ]
+        },
         getCSS: function(element) {
             var css = {},
                 home = !app.url.get(),
@@ -123,7 +132,7 @@ Ox.load(function() {
             app.$ui.panel = app.ui.panel()
                 .select(app.user('url'))
                 .appendTo(Ox.$body);
-            // jqueryfy
+            // jqueryfy so that we can animate
             ['screen', 'logo', 'loading'].forEach(function(element) {
                 app.$ui[element] = $('.' + element);
             });
@@ -177,7 +186,7 @@ Ox.load(function() {
         },
         loadData: function(callback) {
             Ox.getJSON('index.json', function(data) {
-                app.data = data;
+                app.data = Ox.extend(app.data, data);
                 callback();                
             });
         },
@@ -219,6 +228,16 @@ Ox.load(function() {
             comment: [
                 /\b(Ox\.\w+)\b/g,
                 '<a href="#doc/$1" class="OxMonospace doclink">$1</a>'
+            ],
+            version: [
+                '{version}',
+                function() {
+                    return (
+                        /:\/\/oxjs.org\//.test(window.location.href)
+                            ? 'The latest version is'
+                            : 'You\'re currently running version'
+                    ) + ' <code>' + app.data.version + '.</code>'
+                }
             ]
         },
         resize: function() {
@@ -228,15 +247,6 @@ Ox.load(function() {
                 app.$ui[element] && app.$ui[element].css(app.getCSS(element));
             });
         },
-        sections: [
-            {id: 'about', title: 'About'},
-            {id: 'readme', title: 'Readme'},
-            {id: 'examples', title: 'Examples'},
-            {id: 'doc', title: 'Documentation'},
-            {id: 'downloads', title: 'Downloads'},
-            {id: 'development', title: 'Development'},
-            {id: 'contact', title: 'Contact'}
-        ],
         setTheme: function(theme) {
             app.user({theme: theme});
             (Ox.$('#icon') || Ox.$('<link>').attr({
@@ -246,9 +256,9 @@ Ox.load(function() {
             }).appendTo(Ox.$('head'))).attr({
                 href: app.getSRC('icon')
             });
-            app.$ui.logo && app.$ui.logo.attr({
-                src: app.getSRC('logo')
-            }).css(app.getCSS('logo'));
+            app.$ui.logo && app.$ui.logo
+                .attr({src: app.getSRC('logo')})
+                .css(app.getCSS('logo'));
             Ox.Theme
                 ? Ox.Theme(theme)
                 : Ox.$('body').addClass('OxTheme' + Ox.toTitleCase(theme)
@@ -314,7 +324,7 @@ Ox.load(function() {
             },
             menu: function() {
                 return Ox.ButtonGroup({
-                        buttons: app.sections,
+                        buttons: app.data.sections,
                         min: 0,
                         selectable: true,
                     })
@@ -325,12 +335,12 @@ Ox.load(function() {
                         }
                     })
             },
-            page: function(page) {
+            page: function(page, replace) {
                 var $element = Ox.Container();
                 Ox.get('readme/html/_' + page + '.html', function(html) {
                     $('<div>')
                         .addClass('OxSerif page')
-                        .html(html)
+                        .html(html.replace(app.re.version[0], app.re.version[1]))
                         .appendTo($element);
                 });
                 return $element;
@@ -341,15 +351,7 @@ Ox.load(function() {
                         return app.ui[id] ? app.ui[id]() : app.ui.page(id);
                     },
                     size: 32,
-                    tabs: [
-                        {id: 'about', title: 'About'},
-                        {id: 'readme', title: 'Readme'},
-                        {id: 'examples', title: 'Examples'},
-                        {id: 'doc', title: 'Documentation'},
-                        {id: 'downloads', title: 'Downloads'},
-                        {id: 'dev', title: 'Development'},
-                        {id: 'contact', title: 'Contact'}
-                    ]
+                    tabs: app.data.sections
                 })
                 .bindEvent({
                     change: function(data) {
@@ -358,7 +360,70 @@ Ox.load(function() {
                 });
             },
             readme: function() {
-                return Ox.Element();
+                var $list = Ox.Container().css({overflowY: 'scroll'}),
+                    $text = Ox.Container().addClass('OxSerif text'),
+                    $panel = Ox.SplitPanel({
+                            elements: [
+                                {element: $list, size: 256},
+                                {element: $text}
+                            ],
+                            orientation: 'horizontal'
+                        })
+                        .addClass('readme');
+                app.data.readme.forEach(function(item, i) {
+                    var $item = $('<div>')
+                        .addClass('item')
+                        .css({
+                            width: 224 - Ox.UI.SCROLLBAR_SIZE + 'px'
+                        })
+                        .bind({
+                            click: function(e) {
+                                var $this = $(this);
+                                if (!$this.is('.selected')) {
+                                    selectItem(item.id, $this);
+                                } else if (e.metaKey) {
+                                    selectItem(null, $this);
+                                }
+                            }
+                        })
+                        .appendTo($list);
+                    $('<div>')
+                        .addClass('OxSerif title')
+                        .html(item.title)
+                        .appendTo($item);
+                    $('<div>')
+                        .addClass('OxSerif OxLight date')
+                        .html(Ox.formatDate(item.date, '%B %e, %Y', true))
+                        .appendTo($item);
+                });
+                function selectItem(id, $element) {
+                    $('.readme .item.selected').removeClass('selected');
+                    if (id) {
+                        $element.addClass('selected');
+                        Ox.get('readme/html/' + id + '.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')})
+                                    /*
+                                    .css({
+                                        border: '1px solid rgb(192, 192, 192)'
+                                    })
+                                    */
+                                );
+                            });
+                        });
+                        app.url.push('readme/' + id);
+                    } else {
+                        $text.empty();
+                        app.url.push('readme');
+                    }
+                }
+                return $panel;
             },
             screen: function() {
                 return Ox.$('<div>').addClass('screen animate');