diff --git a/ren/tree/body.hoon b/ren/tree/body.hoon
index 2743cfe11..3161bbc7e 100644
--- a/ren/tree/body.hoon
+++ b/ren/tree/body.hoon
@@ -5,10 +5,5 @@
 /=    dat    /%  /tree-json/ :: default include
 ^-  marl
 ;=  ;script(type "text/javascript"): window.tree = {(pojo (joba %data dat))}
-    ;div.container
-      ;div.row#main
-        ;div#head;
-        ;div#body;
-      ==
-    ==
+    ;div#tree;
 ==
diff --git a/web/lib/css/bootstrap.css b/web/lib/css/bootstrap.css
index 90a42ec43..300875360 100644
--- a/web/lib/css/bootstrap.css
+++ b/web/lib/css/bootstrap.css
@@ -2089,21 +2089,21 @@ input[type="checkbox"].disabled {
 .has-success.checkbox label,
 .has-success.radio-inline label,
 .has-success.checkbox-inline label {
-  color: #02d124;
+  color: #64de79;
 }
 
 .has-success .form-control {
-  border-color: #02d124;
+  border-color: #64de79;
 }
 
 .has-success .input-group-addon {
-  color: #02d124;
-  background-color: #a1feb0;
-  border-color: #02d124;
+  color: #64de79;
+  background-color: white;
+  border-color: #64de79;
 }
 
 .has-success .form-control-feedback {
-  color: #02d124;
+  color: #64de79;
 }
 
 .has-success .form-control-success {
@@ -2406,28 +2406,28 @@ fieldset[disabled] a.btn {
 
 .btn-success {
   color: #fff;
-  background-color: #02d124;
-  border-color: #02d124;
+  background-color: #64de79;
+  border-color: #64de79;
 }
 
 .btn-success:hover {
   color: #fff;
-  background-color: #029e1b;
-  border-color: #01941a;
+  background-color: #3ad555;
+  border-color: #32d34d;
 }
 
 .btn-success:focus, .btn-success.focus {
   color: #fff;
-  background-color: #029e1b;
-  border-color: #01941a;
+  background-color: #3ad555;
+  border-color: #32d34d;
 }
 
 .btn-success:active, .btn-success.active,
 .open > .btn-success.dropdown-toggle {
   color: #fff;
-  background-color: #029e1b;
+  background-color: #3ad555;
   background-image: none;
-  border-color: #01941a;
+  border-color: #32d34d;
 }
 
 .btn-success:active:hover, .btn-success:active:focus, .btn-success:active.focus, .btn-success.active:hover, .btn-success.active:focus, .btn-success.active.focus,
@@ -2435,18 +2435,18 @@ fieldset[disabled] a.btn {
 .open > .btn-success.dropdown-toggle:focus,
 .open > .btn-success.dropdown-toggle.focus {
   color: #fff;
-  background-color: #017b15;
-  border-color: #01530e;
+  background-color: #29c244;
+  border-color: #22a038;
 }
 
 .btn-success.disabled:focus, .btn-success.disabled.focus, .btn-success:disabled:focus, .btn-success:disabled.focus {
-  background-color: #02d124;
-  border-color: #02d124;
+  background-color: #64de79;
+  border-color: #64de79;
 }
 
 .btn-success.disabled:hover, .btn-success:disabled:hover {
-  background-color: #02d124;
-  border-color: #02d124;
+  background-color: #64de79;
+  border-color: #64de79;
 }
 
 .btn-warning {
@@ -2624,31 +2624,31 @@ fieldset[disabled] a.btn {
 }
 
 .btn-success-outline {
-  color: #02d124;
+  color: #64de79;
   background-color: transparent;
   background-image: none;
-  border-color: #02d124;
+  border-color: #64de79;
 }
 
 .btn-success-outline:focus, .btn-success-outline.focus, .btn-success-outline:active, .btn-success-outline.active,
 .open > .btn-success-outline.dropdown-toggle {
   color: #fff;
-  background-color: #02d124;
-  border-color: #02d124;
+  background-color: #64de79;
+  border-color: #64de79;
 }
 
 .btn-success-outline:hover {
   color: #fff;
-  background-color: #02d124;
-  border-color: #02d124;
+  background-color: #64de79;
+  border-color: #64de79;
 }
 
 .btn-success-outline.disabled:focus, .btn-success-outline.disabled.focus, .btn-success-outline:disabled:focus, .btn-success-outline:disabled.focus {
-  border-color: #3cfd5c;
+  border-color: #b8f0c2;
 }
 
 .btn-success-outline.disabled:hover, .btn-success-outline:disabled:hover {
-  border-color: #3cfd5c;
+  border-color: #b8f0c2;
 }
 
 .btn-warning-outline {
@@ -3741,8 +3741,8 @@ input[type="button"].btn-block {
 }
 
 .card-success {
-  background-color: #02d124;
-  border-color: #02d124;
+  background-color: #64de79;
+  border-color: #64de79;
 }
 
 .card-info {
@@ -3777,7 +3777,7 @@ input[type="button"].btn-block {
 
 .card-success-outline {
   background-color: transparent;
-  border-color: #02d124;
+  border-color: #64de79;
 }
 
 .card-warning-outline {
@@ -4066,11 +4066,11 @@ a.label:focus, a.label:hover {
 }
 
 .label-success {
-  background-color: #02d124;
+  background-color: #64de79;
 }
 
 .label-success[href]:focus, .label-success[href]:hover {
-  background-color: #029e1b;
+  background-color: #3ad555;
 }
 
 .label-info {
@@ -4334,16 +4334,16 @@ a.label:focus, a.label:hover {
 }
 
 .progress-success[value]::-webkit-progress-value {
-  background-color: #02d124;
+  background-color: #64de79;
 }
 
 .progress-success[value]::-moz-progress-bar {
-  background-color: #02d124;
+  background-color: #64de79;
 }
 
 @media screen and (min-width: 0\0) {
   .progress-success .progress-bar {
-    background-color: #02d124;
+    background-color: #64de79;
   }
 }
 
@@ -5566,11 +5566,11 @@ a.text-primary:focus, a.text-primary:hover {
 }
 
 .text-success {
-  color: #02d124 !important;
+  color: #64de79 !important;
 }
 
 a.text-success:focus, a.text-success:hover {
-  color: #029e1b;
+  color: #3ad555;
 }
 
 .text-info {
@@ -5617,11 +5617,11 @@ a.bg-primary:focus, a.bg-primary:hover {
 
 .bg-success {
   color: #fff !important;
-  background-color: #02d124 !important;
+  background-color: #64de79 !important;
 }
 
 a.bg-success:focus, a.bg-success:hover {
-  background-color: #029e1b;
+  background-color: #3ad555;
 }
 
 .bg-info {
@@ -6020,12 +6020,14 @@ h1,
 h2,
 h3 {
   padding-top: 2rem;
+  line-height: 4rem;
 }
 
 h4,
 h5,
 h6 {
   padding-top: 1rem;
+  line-height: 2rem;
 }
 
 h3, h4 {
@@ -6052,6 +6054,25 @@ h1:first-of-type {
   margin-bottom: 0;
 }
 
+h1.first,
+h2.first,
+h3.first {
+  padding-top: 0;
+  padding-bottom: 2rem;
+}
+
+.gray {
+  color: #55595c;
+}
+
+.gray-light {
+  color: #b1b7bd;
+}
+
+.gray-lighter {
+  color: #eceeef;
+}
+
 @media (max-width: 767px) {
   h1 {
     font-size: 2rem;
@@ -6086,7 +6107,7 @@ textarea:focus {
   border-color: #000;
 }
 
-.container {
+body {
   padding-top: 3rem;
   padding-bottom: 9rem;
 }
@@ -6128,7 +6149,7 @@ textarea:focus {
 }
 
 .green {
-  color: #02d124;
+  color: #64de79;
 }
 
 .yellow {
@@ -6150,7 +6171,7 @@ textarea:focus {
 }
 
 .inverse.green {
-  background-color: #02d124;
+  background-color: #64de79;
 }
 
 .inverse.yellow {
diff --git a/web/talk/main.css b/web/talk/main.css
index 3dc1e517c..842664f88 100644
--- a/web/talk/main.css
+++ b/web/talk/main.css
@@ -6,22 +6,20 @@ div.input.valid-false {
   color: #FF0808;
   border-color: #FF0808; }
 
-div.meta {
-  display: inline-block; }
-
-div.grams {
+.grams {
   list-style-type: none;
   padding: 0;
   margin-top: -1.875rem; }
+  .grams .meta {
+    display: inline-block; }
 
-div.meta label {
-  background-color: #B1B7BD;
+.grams .meta label {
   margin-right: 0.9375rem;
   height: 0.9375rem;
   width: 0.9375rem;
   text-align: center; }
 
-div.meta label:before {
+.grams .meta label:before {
   content: attr(data-glyph);
   color: #fff;
   font-family: 'scp';
@@ -30,24 +28,24 @@ div.meta label:before {
   line-height: 1rem;
   vertical-align: middle; }
 
-div.meta label,
-div.meta h2,
-div.meta h3 {
+.grams .meta label,
+.grams .meta h2,
+.grams .meta h3 {
   display: inline-block; }
 
-div.meta h2,
-div.meta h3 {
+.grams .meta h2,
+.grams .meta h3 {
   font-family: 'scp';
   font-size: .8rem;
   font-weight: 400;
   margin-top: 0;
   padding-top: 0; }
 
-div.meta h3 {
+.grams .meta h3 {
   margin-left: 2rem;
   line-height: 1rem; }
 
-div.meta .time {
+.grams .meta .time {
   padding-right: 2rem; }
 
 div.gram.first:first-of-type {
@@ -71,8 +69,11 @@ div.gram.same:hover div.meta {
 
 .exp {
   font-family: 'scp';
-  font-size: .9rem;
-  max-height: 2rem; }
+  font-size: .9rem; }
+  .exp .speech {
+    white-space: nowrap;
+    max-width: 100%;
+    overflow-x: scroll; }
   .exp .speech > span {
     color: #fff;
     background-color: #000;
@@ -89,6 +90,19 @@ div.gram.same:hover div.meta {
     background-color: #000;
     color: #fff; }
 
+.comment .speech a.btn {
+  background-color: transparent;
+  color: #B1B7BD;
+  font-size: .9rem;
+  border: 0;
+  border-bottom: 3px solid #b1b7bd;
+  text-transform: none;
+  text-decoration: none;
+  padding: 0;
+  line-height: 1rem;
+  margin: 1rem 0 2rem 0;
+  letter-spacing: 0; }
+
 .gram pre {
   background-color: transparent; }
 
diff --git a/web/talk/main.js b/web/talk/main.js
index 6692300c0..04b935e05 100644
--- a/web/talk/main.js
+++ b/web/talk/main.js
@@ -590,11 +590,13 @@ module.exports = recl({
     if (this.state.station && this.state.listening.indexOf(this.state.station) === -1) {
       MessageActions.listenStation(this.state.station);
     }
-    $(window).on('scroll', this.checkMore);
+    if (this.props.readOnly == null) {
+      $(window).on('scroll', this.checkMore);
+      window.util.scrollToBottom();
+    }
     this.focused = true;
     $(window).on('blur', this._blur);
-    $(window).on('focus', this._focus);
-    return window.util.scrollToBottom();
+    return $(window).on('focus', this._focus);
   },
   componentWillUpdate: function(props, state) {
     var $window, i, j, key, lastSaid, len, len1, message, nowSaid, old, ref, ref1, results, sameAs, scrollTop;
@@ -623,7 +625,7 @@ module.exports = recl({
   },
   componentDidUpdate: function(_props, _state) {
     var _messages, d, t;
-    if (this.setOffset) {
+    if (this.setOffset && (this.props.readOnly == null)) {
       $(window).scrollTop(this.setOffset);
       this.setOffset = null;
     }
@@ -657,7 +659,7 @@ module.exports = recl({
     return StationActions.setAudience(audi);
   },
   render: function() {
-    var _messages, lastIndex, lastSaid, messageHeights, messages, ref, station;
+    var _messages, body, lastIndex, lastSaid, messageHeights, messages, ref, station;
     station = this.state.station;
     messages = this.sortedMessages(this.state.messages);
     this.last = messages[messages.length - 1];
@@ -696,15 +698,20 @@ module.exports = recl({
         }));
       };
     })(this));
+    if (this.props.readOnly == null) {
+      body = React.createElement(Infinite, {
+        useWindowAsScrollContainer: true,
+        containerHeight: window.innerHeight,
+        elementHeight: messageHeights,
+        key: "messages-infinite"
+      }, _messages);
+    } else {
+      body = _messages;
+    }
     return div({
       className: "grams",
       key: "messages"
-    }, React.createElement(Infinite, {
-      useWindowAsScrollContainer: true,
-      containerHeight: window.innerHeight,
-      elementHeight: messageHeights,
-      key: "messages-infinite"
-    }, _messages));
+    }, body);
   }
 });
 
@@ -1280,6 +1287,9 @@ TreeActions.registerComponent("talk", React.createClass({
     var station;
     require('./utils/util.coffee');
     require('./utils/move.coffee');
+    if (!this.props.readonly) {
+      $(window).on('scroll', window.util.checkScroll);
+    }
     station = this.getStation();
     StationActions.listen();
     StationActions.listenStation(station);
@@ -1959,8 +1969,6 @@ $(window).on('scroll', function(e) {
   return so.ls = so.cs;
 });
 
-$(window).on('scroll', window.util.checkScroll);
-
 
 },{}],16:[function(require,module,exports){
 if (!window.util) {
diff --git a/web/tree/main.css b/web/tree/main.css
index dc9beb913..4bb0568f4 100644
--- a/web/tree/main.css
+++ b/web/tree/main.css
@@ -14,9 +14,62 @@ img.logo {
 img.logo.first {
   margin-bottom: 2rem; }
 
+div.logo {
+  width: 3rem;
+  height: 3rem;
+  background-color: #fff;
+  display: inline-block;
+  margin-right: 1rem;
+  border-radius: 50%;
+  vertical-align: middle;
+  margin-top: -.8rem;
+  background-color: #000; }
+
+div.logo:before {
+  content: "~";
+  color: #B1B7BD;
+  font-size: 2.6rem;
+  vertical-align: middle;
+  line-height: 3rem;
+  margin-top: .2rem;
+  text-align: center;
+  width: 2rem;
+  display: inline-block; }
+
+div.logo.inverse:before {
+  color: #fff; }
+
+.lead .logo.inverse {
+  margin-top: -1.4rem; }
+
 .short {
   width: 75%; }
 
+.meta-data {
+  padding: 1rem;
+  background-color: #f7f7f9;
+  font-family: 'scp';
+  max-width: 12rem;
+  margin-bottom: 2rem; }
+  .meta-data h2,
+  .meta-data h3 {
+    padding: 0;
+    margin: 0;
+    font-size: 1rem;
+    line-height: 2rem; }
+
+.link-next {
+  margin-top: 4rem; }
+  .link-next a {
+    padding: .6rem;
+    border: 2px solid;
+    text-decoration: none;
+    font-weight: 500;
+    margin-top: 4rem; }
+  .link-next a:hover {
+    background-color: #000;
+    color: #fff; }
+
 .loading:before {
   font-family: 'scp';
   background-color: #000;
@@ -27,6 +80,7 @@ img.logo.first {
   height: 1.6rem;
   text-align: center;
   font-size: .8rem;
+  line-height: 1.7rem;
   display: block;
   font-weight: 600;
   z-index: 3; }
@@ -66,7 +120,8 @@ img.logo.first {
   #head {
     top: 0;
     z-index: 10;
-    width: 100%; }
+    width: 100%;
+    position: absolute; }
   #head.m-down,
   #head.m-up {
     position: absolute; }
@@ -93,22 +148,54 @@ img.logo.first {
     .ctrl ul.nav li {
       width: 100%;
       overflow: hidden;
-      white-space: nowrap; }
+      white-space: nowrap;
+      margin-bottom: .6rem; }
   .ctrl ul.nav:hover {
     overflow: visible; }
-  .ctrl a.nav-link:hover {
-    text-decoration: underline; }
   .ctrl a.nav-link {
-    letter-spacing: 1px; }
+    letter-spacing: 1px;
+    text-decoration: none;
+    border-bottom: 2px solid;
+    line-height: 1rem; }
   .ctrl .selected a.nav-link {
     font-weight: 500; }
 
+.ctrl.navbar {
+  position: relative;
+  margin-bottom: 3rem;
+  padding: 0;
+  background-color: transparent; }
+  .ctrl.navbar .icon,
+  .ctrl.navbar ul.nav,
+  .ctrl.navbar li {
+    display: inline-block;
+    padding: 0; }
+  .ctrl.navbar ul.nav {
+    margin-top: 0;
+    overflow: visible; }
+    .ctrl.navbar ul.nav li {
+      width: auto;
+      display: inline-block;
+      min-width: 16.66667%; }
+    .ctrl.navbar ul.nav .right {
+      float: right; }
+    .ctrl.navbar ul.nav .btn {
+      margin: 0;
+      padding: 0;
+      border: 0;
+      text-transform: none; }
+
 .ctrl.open,
 .ctrl:hover {
   max-width: 33.33333%;
   min-width: 16.66667%;
   width: auto; }
 
+.ctrl.navbar.open,
+.ctrl.navbar:hover {
+  max-width: none;
+  min-width: none; }
+
 @media (max-width: 991px) {
   ul.nav {
     line-height: 1.3rem; }
@@ -137,7 +224,10 @@ img.logo.first {
   .ctrl.open {
     max-height: 12rem; }
   a.nav-link {
-    font-size: 1rem; }
+    font-size: 1rem;
+    line-height: 1rem;
+    text-decoration: none;
+    border-bottom: 2px solid; }
   .ctrl.open ul.nav {
     max-height: 9rem;
     overflow-y: scroll; } }
@@ -249,35 +339,43 @@ img.logo.first {
       margin-top: 0;
       margin-bottom: 0; } }
 
-[data-path^='/docs'] .selected .nav-link {
-  color: #02D124; }
+[data-path^='/docs'] .selected .nav-link,
+[data-path^='/work'] .selected .nav-link {
+  color: #55595c; }
 
-[data-path^='/docs'] .nav-link {
+[data-path^='/docs'] .nav-link,
+[data-path^='/work'] .nav-link {
   font-weight: 500; }
 
-[data-path^='/docs'] .home {
-  background-color: #0500F0;
-  border-color: #0500F0; }
+[data-path^='/docs'] .home,
+[data-path^='/work'] .home {
+  background-color: #55595c;
+  border-color: #55595c; }
 
-[data-path^='/docs'] .home:hover {
-  background-color: #0500F0;
-  border-color: #0500F0;
+[data-path^='/docs'] .home:hover,
+[data-path^='/work'] .home:hover {
+  background-color: #B1B7BD;
+  border-color: #B1B7BD;
   opacity: .6; }
 
-[data-path^='/docs'] .home:before {
+[data-path^='/docs'] .home:before,
+[data-path^='/work'] .home:before {
   content: "~";
   color: #fff;
   line-height: .8rem;
-  font-size: 1.4rem; }
+  font-size: 1.4rem;
+  padding-left: 1px; }
 
 @media (max-width: 991px) {
-  [data-path^='/docs'] .home:before {
+  [data-path^='/docs'] .home:before,
+  [data-path^='/work'] .home:before {
     line-height: 0.7rem;
     font-size: 1rem;
     margin-left: .06rem; } }
 
 @media (max-width: 767px) {
-  [data-path^='/docs'] .home:before {
+  [data-path^='/docs'] .home:before,
+  [data-path^='/work'] .home:before {
     line-height: .7rem;
     margin-left: .05rem;
     font-size: 1rem; } }
@@ -322,35 +420,183 @@ img.logo.first {
     line-height: 1rem;
     margin-bottom: 1rem; } }
 
+.urbit.navbar.ctrl .icon .home {
+  border-color: #B1B7BD;
+  background-color: #B1B7BD;
+  width: 3rem;
+  height: 3rem;
+  margin: 0 4rem 0 0; }
+
+.urbit.navbar.ctrl .icon .home:before {
+  content: "~";
+  color: #fff;
+  font-size: 2.6rem;
+  line-height: 2.6rem;
+  text-align: center;
+  width: 2.4rem;
+  display: inline-block; }
+
+.urbit.navbar.ctrl ul.nav li {
+  height: 3rem;
+  vertical-align: middle; }
+
+.urbit.navbar.ctrl ul.nav li a {
+  text-decoration: none;
+  color: #B1B7BD;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 3rem; }
+
+.urbit.navbar.ctrl ul.nav .btn {
+  border: 3px solid #000;
+  margin-top: -3px;
+  height: 3rem;
+  padding: 0rem; }
+  .urbit.navbar.ctrl ul.nav .btn a {
+    font-size: 1rem;
+    color: #000;
+    letter-spacing: 0; }
+
+.urbit.navbar.ctrl ul.nav .btn.selected,
+.urbit.navbar.ctrl ul.nav .btn:hover {
+  background-color: #000; }
+  .urbit.navbar.ctrl ul.nav .btn.selected a,
+  .urbit.navbar.ctrl ul.nav .btn:hover a {
+    color: #fff; }
+
+.urbit.navbar.ctrl ul.nav li a:hover,
+.urbit.navbar.ctrl ul.nav li.selected a {
+  color: #000; }
+
+.urbit.navbar.ctrl .subnav ul.nav {
+  height: 1.5rem; }
+  .urbit.navbar.ctrl .subnav ul.nav li {
+    height: 1.5rem; }
+  .urbit.navbar.ctrl .subnav ul.nav li a {
+    line-height: 1.5rem; }
+  .urbit.navbar.ctrl .subnav ul.nav .btn {
+    position: relative;
+    height: 3rem; }
+    .urbit.navbar.ctrl .subnav ul.nav .btn a {
+      line-height: 3rem; }
+
+.urbit.home.navbar.ctrl .icon .home {
+  opacity: 0;
+  border-color: #fff;
+  background-color: #fff; }
+
+.urbit.home.navbar.ctrl .icon .home:before {
+  color: #B1B7BD; }
+
+.urbit.home.navbar.ctrl ul.nav li a {
+  color: #f7f7f9; }
+
+@media (max-width: 767px) {
+  .urbit.navbar.ctrl .icon {
+    margin-top: .5rem;
+    margin-bottom: .5rem; }
+    .urbit.navbar.ctrl .icon .home {
+      width: 2rem;
+      height: 2rem;
+      margin: 0; }
+    .urbit.navbar.ctrl .icon .home:before {
+      font-size: 1.6rem;
+      line-height: 1.8rem;
+      width: 1.6rem; }
+  .urbit.navbar.ctrl .navbar-toggler {
+    margin-top: .5rem;
+    margin-left: 1rem; }
+  .urbit.navbar.ctrl ul.nav,
+  .urbit.navbar.ctrl .subnav ul.nav {
+    overflow: visible;
+    height: auto;
+    margin-left: 3rem;
+    float: left; }
+    .urbit.navbar.ctrl ul.nav li,
+    .urbit.navbar.ctrl .subnav ul.nav li {
+      display: block;
+      height: 1.5rem; }
+      .urbit.navbar.ctrl ul.nav li a,
+      .urbit.navbar.ctrl .subnav ul.nav li a {
+        line-height: 1.5rem; }
+    .urbit.navbar.ctrl ul.nav li.btn,
+    .urbit.navbar.ctrl .subnav ul.nav li.btn {
+      height: 1.5rem;
+      border: 0; }
+      .urbit.navbar.ctrl ul.nav li.btn a,
+      .urbit.navbar.ctrl .subnav ul.nav li.btn a {
+        color: #64DE79;
+        line-height: 1.5rem; } }
+
 .lead h1:first-of-type {
   padding-bottom: 0; }
 
-.body[data-path^='/docs'] h1 {
-  color: #0500F0; }
+.flush {
+  padding-top: 0; }
 
-.body[data-path^='/docs'] h1 code {
+.h-arrow {
+  width: 100%;
+  height: 9rem;
+  margin-bottom: 3rem; }
+  .h-arrow h1,
+  .h-arrow img {
+    float: left; }
+  .h-arrow img {
+    height: 6rem;
+    margin: 1rem 0 0 1rem; }
+  .h-arrow h1 {
+    color: #000;
+    display: inline-block;
+    line-height: 4rem; }
+  .h-arrow h1 code {
+    background-color: transparent;
+    color: #000; }
+
+.footer {
+  margin-top: 6rem;
+  font-weight: 500;
+  color: #B1B7BD; }
+  .footer a {
+    color: #55595c;
+    text-decoration: none;
+    border-bottom: 2px solid #55595c;
+    margin-left: .6rem; }
+
+.body[data-path^='/docs'] h1,
+.body[data-path^='/work'] h1 {
+  color: #000; }
+
+.body[data-path^='/docs'] h1 code,
+.body[data-path^='/work'] h1 code {
   background-color: transparent;
-  color: #0500F0;
+  color: #000;
   padding: 0; }
 
-.body[data-path^='/docs'] .book h2 {
+.body[data-path^='/docs'] .book h2,
+.body[data-path^='/work'] .book h2 {
   color: #B1B7BD; }
 
-.body[data-path^='/docs'] .book h2 code {
-  color: #0500F0;
+.body[data-path^='/docs'] .book h2 code,
+.body[data-path^='/work'] .book h2 code {
+  color: #000;
   background-color: transparent; }
 
-.body[data-path^='/docs'] .book h2 a {
-  color: #0500F0; }
+.body[data-path^='/docs'] .book h2 a,
+.body[data-path^='/work'] .book h2 a {
+  color: #000; }
 
-.body[data-path^='/docs'] .book hr {
+.body[data-path^='/docs'] .book hr,
+.body[data-path^='/work'] .book hr {
   margin-bottom: 3rem; }
 
+.body[data-path^='/work'] h2 {
+  color: #000; }
+
 .body[data-path^='/docs/system/hoon/runes/'] h1 {
   color: #B1B7BD; }
 
 .body[data-path^='/docs/system/hoon/runes/basic'] h1 {
-  color: #0500F0; }
+  color: #000; }
 
 .body[data-path^='/docs/system/hoon/library/'] h3 {
   font-size: 1.5rem; }
@@ -362,6 +608,176 @@ img.logo.first {
   padding-top: 0;
   margin-bottom: 0; }
 
+.body .urbit h1 {
+  color: #000;
+  line-height: 4rem; }
+
+.body .urbit a.green:hover {
+  color: #64DE79; }
+
+.body .urbit .container.stack {
+  margin-bottom: 3rem; }
+
+.body .urbit .container.stack.six {
+  margin-top: 12rem;
+  margin-bottom: 6rem; }
+
+.body .urbit .btn.black {
+  text-transform: none;
+  text-decoration: none;
+  border: 3px solid #000;
+  letter-spacing: 0;
+  margin-right: 1rem; }
+
+.body .urbit button.submit:hover,
+.body .urbit .btn.black:hover {
+  background-color: #000;
+  color: #fff; }
+
+.body .urbit .front {
+  padding-bottom: 4rem; }
+  .body .urbit .front h1 {
+    padding-top: 0; }
+  .body .urbit .front h1,
+  .body .urbit .front h1 a {
+    font-size: 4rem;
+    line-height: 6rem; }
+
+.body .urbit .image-fs {
+  height: 44rem;
+  margin-bottom: 3rem; }
+  .body .urbit .image-fs .text-container,
+  .body .urbit .image-fs .image-container {
+    position: absolute; }
+  .body .urbit .image-fs .text-container {
+    display: table;
+    height: 44rem;
+    width: 100%;
+    z-index: 1; }
+    .body .urbit .image-fs .text-container .text {
+      display: table-cell;
+      vertical-align: middle; }
+    .body .urbit .image-fs .text-container .rect {
+      width: 60%;
+      margin-left: auto;
+      margin-right: auto; }
+      .body .urbit .image-fs .text-container .rect h1 {
+        padding-bottom: 1rem;
+        text-align: left; }
+    .body .urbit .image-fs .text-container .rect.no-header {
+      font-weight: 500;
+      color: #fff;
+      font-size: 1.4rem; }
+      .body .urbit .image-fs .text-container .rect.no-header p.email {
+        font-size: 1rem; }
+      .body .urbit .image-fs .text-container .rect.no-header button.submit {
+        background-color: transparent;
+        border-color: #fff; }
+  .body .urbit .image-fs .image-container {
+    z-index: 0;
+    height: 44rem;
+    width: 100%;
+    overflow: hidden; }
+    .body .urbit .image-fs .image-container img {
+      position: relative;
+      left: 50%;
+      margin-left: -50%;
+      top: 50%;
+      margin-top: -50%;
+      min-height: 44rem;
+      min-width: 100%; }
+  .body .urbit .image-fs h1 {
+    text-align: center;
+    color: #fff; }
+
+.body .urbit .image-fs.first {
+  margin-top: -9rem; }
+
+.body .urbit .slide {
+  margin-bottom: 12rem;
+  position: relative; }
+  .body .urbit .slide h1 {
+    padding-bottom: 1rem; }
+  .body .urbit .slide .pair {
+    display: table; }
+    .body .urbit .slide .pair .text,
+    .body .urbit .slide .pair .image {
+      display: table-cell;
+      vertical-align: middle; }
+    .body .urbit .slide .pair .image.right {
+      padding-left: 5%; }
+    .body .urbit .slide .pair .image.left {
+      padding-right: 5%; }
+    .body .urbit .slide .pair .text {
+      width: 75%; }
+    .body .urbit .slide .pair .image {
+      width: 20%; }
+    .body .urbit .slide .pair p:last-child {
+      margin-bottom: 0; }
+
+.body .urbit .end {
+  padding: 1rem;
+  background-color: #64DE79;
+  color: white;
+  text-decoration: none;
+  font-size: 2rem;
+  font-weight: 500; }
+
+.body .urbit input.email,
+.body .urbit button.submit {
+  line-height: 1rem;
+  padding: .6rem;
+  border: 0; }
+
+.body .urbit input.email {
+  font-weight: 500;
+  background-color: #B1B7BD;
+  color: #fff;
+  margin-right: 1rem;
+  border: 3px solid #B1B7BD; }
+
+.body .urbit input.email::-moz-placeholder {
+  color: #D2D2D2; }
+
+.body .urbit input.email::-webkit-input-placeholder {
+  color: #D2D2D2; }
+
+.body .urbit button.submit {
+  text-transform: none;
+  text-decoration: none;
+  border: 3px solid #000;
+  background-color: #fff;
+  font-weight: 500;
+  letter-spacing: 0; }
+
+.body .urbit .last a {
+  display: block;
+  font-weight: 500;
+  color: #B1B7BD; }
+
+.body .urbit .last h2 {
+  padding-top: 0;
+  padding-bottom: 1rem;
+  margin-bottom: 0; }
+
+.body .urbit.home p.email {
+  margin-top: 3rem; }
+
+@media (max-width: 767px) {
+  .body .urbit {
+    margin-top: 4rem; }
+    .body .urbit .slide .pair,
+    .body .urbit .slide .pair .text,
+    .body .urbit .slide .pair .image {
+      display: block;
+      width: 100%; }
+    .body .urbit .slide .pair .image {
+      text-align: center; }
+    .body .urbit .slide .pair .image.left {
+      margin-bottom: 2rem; }
+    .body .urbit .slide .pair .image.right {
+      margin-top: 2rem; } }
+
 @keyframes menu-open {
   0% {
     visibility: hidden; }
@@ -468,14 +884,31 @@ img.logo.first {
   font-weight: 500;
   font-size: 1.4rem; }
 
-.body[data-path^='/docs'] .list {
+.body[data-path^='/docs'] .list,
+.body[data-path^='/work'] .list {
   list-style-type: none;
   padding-left: 0; }
   .body[data-path^='/docs'] .list a,
-  .body[data-path^='/docs'] .list h1 {
-    color: #02D124;
+  .body[data-path^='/docs'] .list h1,
+  .body[data-path^='/work'] .list a,
+  .body[data-path^='/work'] .list h1 {
+    color: #55595c;
     font-weight: 500;
-    height: 2rem; }
+    height: 2rem;
+    display: inline;
+    text-decoration: none; }
+  .body[data-path^='/docs'] .list h1,
+  .body[data-path^='/work'] .list h1 {
+    border-bottom: 2px solid #55595c; }
+
+.body[data-path^='/work'] .list.main a,
+.body[data-path^='/work'] .list.main h1 {
+  font-size: 2rem;
+  line-height: 4rem;
+  height: 4rem; }
+
+.body[data-path^='/work'] .list.main h1 {
+  border-width: 4px; }
 
 .body[data-path^='/docs'] .list.runes {
   margin-top: 3rem; }
@@ -493,7 +926,7 @@ img.logo.first {
   .body[data-path^='/docs'] .list.runes a h1 code {
     margin-right: 1rem;
     background-color: transparent;
-    color: #0500F0; }
+    color: #55595c; }
   .body[data-path^='/docs'] .list.runes a code {
     background-color: #eceeef; }
   .body[data-path^='/docs'] .list.runes a code {
@@ -512,6 +945,21 @@ img.logo.first {
   .body[data-path^='/docs'] .list.runes a:hover:after {
     background-color: #0500F0; }
 
+.urbit ul.blog {
+  list-style-type: none;
+  padding-left: 0; }
+  .urbit ul.blog li {
+    margin-bottom: 12rem; }
+  .urbit ul.blog .btn {
+    padding: .3rem;
+    border: 3px solid #64DE79;
+    color: #64DE79;
+    text-decoration: none;
+    text-transform: none; }
+  .urbit ul.blog .btn:hover {
+    background-color: #64DE79;
+    color: #fff; }
+
 .kids.runes h1 {
   padding-top: 3rem; }
 
@@ -528,6 +976,53 @@ img.logo.first {
 .kids.runes > div p:first-of-type {
   font-weight: 500; }
 
+.urbit .post .date,
+.urbit.post .date {
+  font-family: 'scp';
+  color: #B1B7BD;
+  font-size: .7rem;
+  font-weight: 200; }
+
+.urbit .post h1.title,
+.urbit .post p.preview,
+.urbit.post h1.title,
+.urbit.post p.preview {
+  font-weight: 500; }
+
+.urbit .post h1.title,
+.urbit.post h1.title {
+  font-size: 2rem;
+  padding-bottom: 0; }
+
+.urbit .post h1.title,
+.urbit .post img,
+.urbit.post h1.title,
+.urbit.post img {
+  width: 100%;
+  margin-bottom: 2rem; }
+
+.urbit .post .date,
+.urbit .post p.preview,
+.urbit .post h3.author,
+.urbit.post .date,
+.urbit.post p.preview,
+.urbit.post h3.author {
+  margin-bottom: .6rem; }
+
+.urbit .post h3.author,
+.urbit.post h3.author {
+  padding-top: 0;
+  font-size: 1rem;
+  font-weight: 200; }
+
+.urbit .post h3:before,
+.urbit.post h3:before {
+  content: "—";
+  margin-right: .6rem; }
+
+.urbit.post .preview {
+  max-width: 75%; }
+
 .sections h1 {
   font-size: 2rem;
   color: #0500F0; }
@@ -546,7 +1041,7 @@ img.logo.first {
 .sections ul li,
 .sections ul li a,
 .sections ul li h1 span {
-  color: #02D124;
+  color: #55595c;
   height: 2rem; }
 
 .sections .kids > div {
@@ -555,7 +1050,8 @@ img.logo.first {
   margin-right: 3rem;
   margin-top: 2rem;
   min-width: 14rem;
-  margin-bottom: 3rem; }
+  margin-bottom: 3rem;
+  padding: 0; }
 
 .sections .kids > div p {
   font-weight: 500; }
@@ -564,7 +1060,7 @@ img.logo.first {
   display: none; }
 
 .lead-offset {
-  margin-left: 8rem; }
+  margin-left: 4rem; }
 
 @media (max-width: 991px) {
   .lead-offset {
@@ -578,7 +1074,7 @@ img.logo.first {
 
 .add-comment {
   width: 100%;
-  border-top: 3px dotted #000;
+  border-top: 3px dotted #f7f7f9;
   margin-top: 6rem; }
   .add-comment .btn {
     font-size: .8rem; }
@@ -586,7 +1082,7 @@ img.logo.first {
     width: 66%;
     display: block;
     height: 12rem;
-    background-color: #F7F7F7;
+    background-color: #f7f7f9;
     border-bottom: 0;
     margin-bottom: 2rem;
     margin-top: 3rem;
@@ -596,16 +1092,17 @@ img.logo.first {
   padding-top: 3rem; }
   .comments .comment {
     margin-top: 2rem; }
-    .comments .comment h3,
-    .comments .comment > span {
-      font-family: 'scp'; }
     .comments .comment > span {
+      font-family: 'scp';
       font-size: .8rem;
       color: #B1B7BD; }
-    .comments .comment h3 {
+    .comments .comment h2 {
       padding-top: 0;
       font-size: 1rem;
       font-weight: 500; }
+      .comments .comment h2 code {
+        background-color: transparent;
+        padding: 0; }
     .comments .comment p {
       width: 66%; }
 
diff --git a/web/tree/main.js b/web/tree/main.js
index c9805606f..c4fcc4440 100644
--- a/web/tree/main.js
+++ b/web/tree/main.js
@@ -85,284 +85,7 @@ module.exports = {
 };
 
 
-},{"../dispatcher/Dispatcher.coffee":19,"../persistence/TreePersistence.coffee":21}],2:[function(require,module,exports){
-var BodyComponent, Dpad, Nav, Sibs, TreeActions, TreeStore, a, button, clas, div, li, query, reactify, recl, ref, rend, ul, util;
-
-clas = require('classnames');
-
-BodyComponent = React.createFactory(require('./BodyComponent.coffee'));
-
-query = require('./Async.coffee');
-
-reactify = require('./Reactify.coffee');
-
-TreeStore = require('../stores/TreeStore.coffee');
-
-TreeActions = require('../actions/TreeActions.coffee');
-
-Sibs = require('./SibsComponent.coffee');
-
-Dpad = require('./DpadComponent.coffee');
-
-util = require('../utils/util.coffee');
-
-recl = React.createClass;
-
-rend = ReactDOM.render;
-
-ref = React.DOM, div = ref.div, a = ref.a, ul = ref.ul, li = ref.li, button = ref.button;
-
-Nav = React.createFactory(query({
-  path: 't',
-  kids: {
-    name: 't',
-    head: 'r',
-    meta: 'j'
-  }
-}, recl({
-  displayName: "Links",
-  stateFromStore: function() {
-    return TreeStore.getNav();
-  },
-  getInitialState: function() {
-    return this.stateFromStore();
-  },
-  _onChangeStore: function() {
-    if (this.isMounted()) {
-      return this.setState(this.stateFromStore());
-    }
-  },
-  componentDidMount: function() {
-    return TreeStore.addChangeListener(this._onChangeStore);
-  },
-  componentWillUnmount: function() {
-    return TreeStore.removeChangeListener(this._onChangeStore);
-  },
-  onClick: function() {
-    return this.toggleFocus();
-  },
-  onMouseOver: function() {
-    return this.toggleFocus(true);
-  },
-  onMouseOut: function() {
-    return this.toggleFocus(false);
-  },
-  onTouchStart: function() {
-    return this.ts = Number(Date.now());
-  },
-  onTouchEnd: function() {
-    var dt;
-    return dt = this.ts - Number(Date.now());
-  },
-  _home: function() {
-    return this.props.goTo("/");
-  },
-  toggleFocus: function(state) {
-    return $(ReactDOM.findDOMNode(this)).toggleClass('focus', state);
-  },
-  toggleNav: function() {
-    return TreeActions.toggleNav();
-  },
-  render: function() {
-    var attr, dpad, navClas, sibs, title, toggleClas;
-    attr = {
-      onMouseOver: this.onMouseOver,
-      onMouseOut: this.onMouseOut,
-      onClick: this.onClick,
-      onTouchStart: this.onTouchStart,
-      onTouchEnd: this.onTouchEnd,
-      'data-path': this.props.dataPath
-    };
-    if (_.keys(window).indexOf("ontouchstart") !== -1) {
-      delete attr.onMouseOver;
-      delete attr.onMouseOut;
-    }
-    navClas = clas({
-      'col-md-2': true,
-      ctrl: true,
-      open: this.state.open === true
-    });
-    attr = _.extend(attr, {
-      className: navClas,
-      key: "nav"
-    });
-    title = this.state.title ? this.state.title : "";
-    dpad = this.state.dpad !== false ? Dpad(this.props, "") : "";
-    sibs = this.state.sibs !== false ? Sibs(_.merge(this.props, {
-      toggleNav: this.toggleNav
-    }), "") : "";
-    toggleClas = clas({
-      'navbar-toggler': true,
-      show: this.state.subnav != null
-    });
-    return div(attr, div({
-      className: 'links',
-      key: "links"
-    }, div({
-      className: 'icon'
-    }, div({
-      className: 'home',
-      onClick: this._home
-    }, ""), div({
-      className: 'app'
-    }, title), dpad, button({
-      className: toggleClas,
-      type: 'button',
-      onClick: this.toggleNav
-    }, "☰")), sibs));
-  }
-}), recl({
-  displayName: "Links_loading",
-  _home: function() {
-    return this.props.goTo("/");
-  },
-  render: function() {
-    return div({
-      className: "col-md-2 ctrl",
-      "data-path": this.props.dataPath,
-      key: "nav-loading"
-    }, div({
-      className: 'links'
-    }, div({
-      className: 'icon'
-    }, div({
-      className: 'home',
-      onClick: this._home
-    }, "")), ul({
-      className: "nav"
-    }, li({
-      className: "nav-item selected"
-    }, a({
-      className: "nav-link"
-    }, this.props.curr)))));
-  }
-})));
-
-module.exports = query({
-  sein: 't',
-  path: 't',
-  name: 't',
-  meta: 'j'
-}, recl({
-  displayName: "Anchor",
-  stateFromStore: function() {
-    return TreeStore.getNav();
-  },
-  getInitialState: function() {
-    return _.extend(this.stateFromStore(), {
-      url: window.location.pathname
-    });
-  },
-  _onChangeStore: function() {
-    if (this.isMounted()) {
-      return this.setState(this.stateFromStore());
-    }
-  },
-  componentWillUnmount: function() {
-    clearInterval(this.interval);
-    $('body').off('click', 'a');
-    return TreeStore.removeChangeListener(this._onChangeStore);
-  },
-  componentDidUpdate: function() {
-    return this.setTitle();
-  },
-  componentDidMount: function() {
-    var _this;
-    this.setTitle();
-    this.interval = setInterval(this.checkURL, 100);
-    TreeStore.addChangeListener(this._onChangeStore);
-    _this = this;
-    return $('body').on('click', 'a', function(e) {
-      var href;
-      href = $(this).attr('href');
-      if (href[0] === "#") {
-        return true;
-      }
-      if (href && !/^https?:\/\//i.test(href)) {
-        e.preventDefault();
-        if ((href != null ? href[0] : void 0) !== "/") {
-          href = (document.location.pathname.replace(/[^\/]*\/?$/, '')) + href;
-        }
-        return _this.goTo(util.fragpath(href));
-      }
-    });
-  },
-  setTitle: function() {
-    var ref1, title;
-    title = $('#body h1').first().text() || this.props.name;
-    if ((ref1 = this.props.meta) != null ? ref1.title : void 0) {
-      title = this.props.meta.title;
-    }
-    return document.title = title + " - " + this.props.path;
-  },
-  setPath: function(href, hist) {
-    var href_parts, next;
-    href_parts = href.split("#");
-    next = href_parts[0];
-    if (next.substr(-1) === "/") {
-      next = next.slice(0, -1);
-    }
-    href_parts[0] = next;
-    if (hist !== false) {
-      history.pushState({}, "", util.basepath(href_parts.join("#")));
-    }
-    if (next !== this.props.path) {
-      ReactDOM.unmountComponentAtNode($('#body')[0]);
-      TreeActions.setCurr(next);
-      return rend(BodyComponent({}, ""), $('#body')[0]);
-    }
-  },
-  reset: function() {
-    $("html,body").animate({
-      scrollTop: 0
-    });
-    $('#nav').attr('style', '');
-    $('#nav').removeClass('scrolling m-up');
-    return $('#nav').addClass('m-down m-fixed');
-  },
-  goTo: function(path) {
-    this.reset();
-    return this.setPath(path);
-  },
-  checkURL: function() {
-    if (this.state.url !== window.location.pathname) {
-      this.reset();
-      this.setPath(util.fragpath(window.location.pathname), false);
-      return this.setState({
-        url: window.location.pathname
-      });
-    }
-  },
-  render: function() {
-    var kids;
-    if (this.props.meta.anchor === 'none') {
-      return div({}, "");
-    }
-    kids = [
-      Nav({
-        curr: this.props.name,
-        dataPath: this.props.sein,
-        sein: this.props.sein,
-        goTo: this.goTo,
-        key: "nav"
-      }, "div")
-    ];
-    if (this.state.subnav) {
-      kids.push(reactify({
-        gn: this.state.subnav,
-        ga: {
-          open: this.state.open,
-          toggle: TreeActions.toggleNav
-        },
-        c: []
-      }, "subnav"));
-    }
-    return div({}, kids);
-  }
-}));
-
-
-},{"../actions/TreeActions.coffee":1,"../stores/TreeStore.coffee":22,"../utils/util.coffee":24,"./Async.coffee":3,"./BodyComponent.coffee":4,"./DpadComponent.coffee":8,"./Reactify.coffee":14,"./SibsComponent.coffee":17,"classnames":25}],3:[function(require,module,exports){
+},{"../dispatcher/Dispatcher.coffee":20,"../persistence/TreePersistence.coffee":22}],2:[function(require,module,exports){
 var TreeActions, TreeStore, _load, code, div, recl, ref, span;
 
 _load = require('./LoadComponent.coffee');
@@ -516,8 +239,8 @@ module.exports = function(queries, Child, load) {
 };
 
 
-},{"../actions/TreeActions.coffee":1,"../stores/TreeStore.coffee":22,"./LoadComponent.coffee":12}],4:[function(require,module,exports){
-var Comments, TreeActions, a, clas, div, extras, img, input, load, p, query, reactify, recl, ref, rele, util;
+},{"../actions/TreeActions.coffee":1,"../stores/TreeStore.coffee":23,"./LoadComponent.coffee":11}],3:[function(require,module,exports){
+var Comments, TreeActions, TreeStore, a, clas, div, extras, h1, h3, img, input, load, p, query, reactify, recl, ref, rele, util;
 
 clas = require('classnames');
 
@@ -529,6 +252,8 @@ reactify = require('./Reactify.coffee');
 
 TreeActions = require('../actions/TreeActions.coffee');
 
+TreeStore = require('../stores/TreeStore.coffee');
+
 Comments = require('./CommentsComponent.coffee');
 
 util = require('../utils/util.coffee');
@@ -537,7 +262,7 @@ recl = React.createClass;
 
 rele = React.createElement;
 
-ref = React.DOM, div = ref.div, p = ref.p, img = ref.img, a = ref.a, input = ref.input;
+ref = React.DOM, div = ref.div, h1 = ref.h1, h3 = ref.h3, p = ref.p, img = ref.img, a = ref.a, input = ref.input;
 
 extras = {
   spam: recl({
@@ -572,6 +297,46 @@ extras = {
       }));
     }
   }),
+  date: recl({
+    displayName: "Date",
+    render: function() {
+      return div({
+        className: 'date'
+      }, this.props.date);
+    }
+  }),
+  title: recl({
+    displayName: "Title",
+    render: function() {
+      return h1({
+        className: 'title'
+      }, this.props.title);
+    }
+  }),
+  image: recl({
+    displayName: "Image",
+    render: function() {
+      return img({
+        src: this.props.image
+      }, "");
+    }
+  }),
+  preview: recl({
+    displayName: "Preview",
+    render: function() {
+      return p({
+        className: 'preview'
+      }, this.props.preview);
+    }
+  }),
+  author: recl({
+    displayName: "Author",
+    render: function() {
+      return h3({
+        className: 'author'
+      }, this.props.author);
+    }
+  }),
   next: query({
     path: 't',
     kids: {
@@ -610,9 +375,27 @@ extras = {
   footer: recl({
     displayName: "Footer",
     render: function() {
+      var containerClas, footerClas;
+      containerClas = clas({
+        footer: true,
+        container: this.props.container === 'false'
+      });
+      footerClas = clas({
+        'col-md-12': this.props.container === 'false'
+      });
       return div({
-        className: "footer"
-      }, p({}, "This page was served by Urbit."));
+        className: containerClas,
+        key: 'footer-container'
+      }, [
+        div({
+          className: footerClas,
+          key: 'footer-inner'
+        }, [
+          "This page was served by an Urbit.", a({
+            href: "mailto:urbit@urbit.org"
+          }, "urbit@urbit.org")
+        ])
+      ]);
     }
   })
 };
@@ -625,49 +408,91 @@ module.exports = query({
   sein: 't'
 }, recl({
   displayName: "Body",
+  stateFromStore: function() {
+    return {
+      curr: TreeStore.getCurr()
+    };
+  },
+  getInitialState: function() {
+    return this.stateFromStore();
+  },
+  _onChangeStore: function() {
+    if (this.isMounted()) {
+      return this.setState(this.stateFromStore());
+    }
+  },
+  componentDidMount: function() {
+    return TreeStore.addChangeListener(this._onChangeStore);
+  },
   render: function() {
-    var bodyClas, containerClas, extra, ref1;
+    var bodyClas, extra, innerClas, parts, ref1;
     extra = (function(_this) {
       return function(name, props) {
         if (props == null) {
           props = {};
         }
         if (_this.props.meta[name] != null) {
+          if ((_.keys(props)).length === 0) {
+            props[name] = _this.props.meta[name];
+          }
           return React.createElement(extras[name], props);
         }
       };
     })(this);
-    containerClas = clas({
-      "col-md-10": true,
-      "col-md-offset-3": this.props.meta.anchor !== 'none',
+    innerClas = {
       body: true
-    });
+    };
+    if (this.props.meta.anchor !== 'none' && this.props.meta.navmode !== 'navbar') {
+      innerClas['col-md-10'] = true;
+      innerClas['col-md-offset-3'] = true;
+    }
+    if (this.props.meta.navmode === 'navbar' && this.props.meta.container !== 'false') {
+      innerClas['col-md-9'] = true;
+      innerClas['col-md-offset-1'] = true;
+    }
+    innerClas = clas(innerClas);
     bodyClas = clas((ref1 = this.props.meta.layout) != null ? ref1.split(',') : void 0);
-    return div({
-      className: containerClas,
-      'data-path': this.props.path
-    }, [
-      div({
-        key: "body" + this.props.path,
-        bodyClas: bodyClas
-      }, extra('spam'), extra('logo', {
+    parts = [
+      extra('spam'), extra('logo', {
         color: this.props.meta.logo
       }), reactify(this.props.body), extra('next', {
         dataPath: this.props.sein,
         curr: this.props.name
-      }), extra('comments'), extra('footer'))
+      }), extra('comments'), extra('footer', {
+        container: this.props.meta.container
+      })
+    ];
+    if (this.props.meta.type === "post") {
+      parts.splice(1, 0, extra('date'), extra('title'), extra('image'), extra('preview'), extra('author'));
+    }
+    return div({
+      dataPath: this.state.curr,
+      key: this.state.curr
+    }, [
+      div({
+        className: innerClas,
+        'data-path': this.props.path,
+        key: 'body-inner'
+      }, [
+        div({
+          key: "body" + this.props.path,
+          id: 'body',
+          className: bodyClas
+        }, parts)
+      ])
     ]);
   }
 }), recl({
   render: function() {
     return div({
+      id: 'body',
       className: "col-md-offset-3 col-md-10"
     }, rele(load));
   }
 }));
 
 
-},{"../actions/TreeActions.coffee":1,"../utils/util.coffee":24,"./Async.coffee":3,"./CommentsComponent.coffee":6,"./LoadComponent.coffee":12,"./Reactify.coffee":14,"classnames":25}],5:[function(require,module,exports){
+},{"../actions/TreeActions.coffee":1,"../stores/TreeStore.coffee":23,"../utils/util.coffee":25,"./Async.coffee":2,"./CommentsComponent.coffee":5,"./LoadComponent.coffee":11,"./Reactify.coffee":14,"classnames":26}],4:[function(require,module,exports){
 var div, recl, ref, textarea;
 
 recl = React.createClass;
@@ -690,7 +515,7 @@ module.exports = recl({
 });
 
 
-},{}],6:[function(require,module,exports){
+},{}],5:[function(require,module,exports){
 var Comment, TreeActions, a, clas, div, form, img, input, load, p, query, reactify, recl, ref, rele, textarea, util;
 
 clas = require('classnames');
@@ -785,7 +610,7 @@ module.exports = query({
 }));
 
 
-},{"../actions/TreeActions.coffee":1,"../utils/util.coffee":24,"./Async.coffee":3,"./LoadComponent.coffee":12,"./Reactify.coffee":14,"classnames":25}],7:[function(require,module,exports){
+},{"../actions/TreeActions.coffee":1,"../utils/util.coffee":25,"./Async.coffee":2,"./LoadComponent.coffee":11,"./Reactify.coffee":14,"classnames":26}],6:[function(require,module,exports){
 var div, recl;
 
 recl = React.createClass;
@@ -809,7 +634,7 @@ module.exports = {
 };
 
 
-},{"./CodeMirror.coffee":5,"./EmailComponent.coffee":9,"./KidsComponent.coffee":10,"./ListComponent.coffee":11,"./ModuleComponent.coffee":13,"./ScriptComponent.coffee":15,"./SearchComponent.coffee":16,"./TocComponent.coffee":18}],8:[function(require,module,exports){
+},{"./CodeMirror.coffee":4,"./EmailComponent.coffee":8,"./KidsComponent.coffee":9,"./ListComponent.coffee":10,"./ModuleComponent.coffee":12,"./ScriptComponent.coffee":15,"./SearchComponent.coffee":16,"./TocComponent.coffee":18}],7:[function(require,module,exports){
 var a, div, recl, ref, util;
 
 util = require('../utils/util.coffee');
@@ -818,7 +643,7 @@ recl = React.createClass;
 
 ref = React.DOM, div = ref.div, a = ref.a;
 
-module.exports = React.createFactory(recl({
+module.exports = recl({
   displayName: "Dpad",
   renderUp: function() {
     if (this.props.sein) {
@@ -864,10 +689,10 @@ module.exports = React.createFactory(recl({
       key: 'dpad'
     }, this.renderUp(), this.renderArrows());
   }
-}));
+});
 
 
-},{"../utils/util.coffee":24}],9:[function(require,module,exports){
+},{"../utils/util.coffee":25}],8:[function(require,module,exports){
 var button, div, input, p, reactify, recl, ref;
 
 reactify = require('./Reactify.coffee');
@@ -887,9 +712,12 @@ module.exports = recl({
   onClick: function() {
     return this.submit();
   },
-  onKeyUp: function(e) {
+  onChange: function(e) {
     var email, valid;
-    email = this.$email.val();
+    email = e.target.value;
+    this.setState({
+      email: e.target.value
+    });
     valid = email.indexOf('@') !== -1 && email.indexOf('.') !== -1 && email.length > 7 && email.split(".")[1].length > 1 && email.split("@")[0].length > 0 && email.split("@")[1].length > 4;
     this.$email.toggleClass('valid', valid);
     this.$email.removeClass('error');
@@ -919,19 +747,21 @@ module.exports = recl({
     return this.$email = $('input.email');
   },
   render: function() {
-    var cont;
+    var cont, ref1, submit;
     if (this.state.submit === false) {
+      submit = (ref1 = this.props.submit) != null ? ref1 : "Sign up";
       cont = [
         input({
           key: "field",
           className: "email",
           placeholder: "your@email.com",
-          onKeyUp: this.onKeyUp
-        }, this.state.email), button({
+          onChange: this.onChange,
+          value: this.state.email
+        }), button({
           key: "submit",
           className: "submit",
           onClick: this.onClick
-        }, "Sign up")
+        }, submit)
       ];
     } else {
       cont = [
@@ -948,7 +778,7 @@ module.exports = recl({
 });
 
 
-},{"./Reactify.coffee":14}],10:[function(require,module,exports){
+},{"./Reactify.coffee":14}],9:[function(require,module,exports){
 var a, clas, div, hr, li, query, reactify, recl, ref, ul;
 
 clas = require('classnames');
@@ -1022,7 +852,8 @@ module.exports = query({
         results.push([
           div({
             key: keyed[k],
-            id: keyed[k]
+            id: keyed[k],
+            className: "col-md-4"
           }, reactify(elem.body)), hr({})
         ]);
       }
@@ -1032,7 +863,7 @@ module.exports = query({
 }));
 
 
-},{"./Async.coffee":3,"./Reactify.coffee":14,"classnames":25}],11:[function(require,module,exports){
+},{"./Async.coffee":2,"./Reactify.coffee":14,"classnames":26}],10:[function(require,module,exports){
 var a, clas, div, h1, li, pre, query, reactify, recl, ref, span, ul, util;
 
 clas = require('classnames');
@@ -1061,7 +892,6 @@ module.exports = query({
     k = clas({
       list: true
     }, this.props.dataType, {
-      posts: this.props.dataType === 'post',
       "default": this.props['data-source'] === 'default'
     }, this.props.className);
     kids = this.renderList();
@@ -1077,7 +907,7 @@ module.exports = query({
     }, 'Error: Empty path'), div({}, pre({}, this.props.path), span({}, 'is either empty or does not exist.')));
   },
   renderList: function() {
-    var _date, _k, _keys, date, elem, href, i, item, k, len, parts, path, preview, ref1, ref2, ref3, ref4, ref5, ref6, ref7, results, sorted, title, v;
+    var _date, _k, _keys, author, cont, date, elem, href, i, image, item, k, len, linked, node, parts, path, preview, ref1, ref2, ref3, ref4, ref5, ref6, results, sorted, title, v;
     sorted = true;
     _keys = [];
     ref1 = this.props.kids;
@@ -1131,6 +961,9 @@ module.exports = query({
       if ((ref6 = elem.meta) != null ? ref6.title : void 0) {
         title = {
           gn: 'h1',
+          ga: {
+            className: 'title'
+          },
           c: [elem.meta.title]
         };
       }
@@ -1140,62 +973,100 @@ module.exports = query({
       if (!title) {
         title = {
           gn: 'h1',
+          ga: {
+            className: 'title'
+          },
           c: [item]
         };
       }
       if (!this.props.titlesOnly) {
-        if (this.props.dataDates) {
-          _date = elem.meta.date;
-          if (!_date || _date.length === 0) {
-            _date = "";
-          }
-          date = {
-            gn: 'div',
-            ga: {
-              className: 'date'
-            },
-            c: [_date]
-          };
-          parts.push(date);
+        _date = elem.meta.date;
+        if (!_date || _date.length === 0) {
+          _date = "";
         }
+        date = {
+          gn: 'div',
+          ga: {
+            className: 'date'
+          },
+          c: [_date]
+        };
+        parts.push(date);
       }
       parts.push(title);
       if (!this.props.titlesOnly) {
-        if (this.props.dataPreview) {
-          if (this.props.dataType === 'post' && !elem.meta.preview) {
-            parts.push.apply(parts, elem.snip.c.slice(0, 2));
-          } else {
-            if (elem.meta.preview) {
-              preview = {
-                gn: 'p',
-                c: [elem.meta.preview]
-              };
+        if (this.props.dataType === 'post') {
+          if (elem.meta.image) {
+            image = {
+              gn: 'img',
+              ga: {
+                src: elem.meta.image
+              }
+            };
+            parts.push(image);
+          }
+          if (this.props.dataPreview) {
+            if (!elem.meta.preview) {
+              parts.push.apply(parts, elem.snip.c.slice(0, 2));
             } else {
-              preview = elem.snip;
+              if (elem.meta.preview) {
+                preview = {
+                  gn: 'p',
+                  ga: {
+                    className: 'preview'
+                  },
+                  c: [elem.meta.preview]
+                };
+              } else {
+                preview = elem.snip;
+              }
+              parts.push(preview);
             }
-            parts.push(preview);
+            if (elem.meta.author) {
+              author = {
+                gn: 'h3',
+                ga: {
+                  className: 'author'
+                },
+                c: [elem.meta.author]
+              };
+              parts.push(author);
+            }
+            cont = {
+              gn: 'a',
+              ga: {
+                className: 'btn continue',
+                href: href
+              },
+              c: ['Continue reading']
+            };
+            parts.push(cont);
+            linked = true;
           }
         }
       }
-      results.push(li({
-        key: item,
-        className: (ref7 = this.props.dataType) != null ? ref7 : ""
-      }, a({
-        href: href,
-        className: clas({
-          preview: this.props.dataPreview != null
-        })
-      }, reactify({
+      node = reactify({
         gn: 'div',
         c: parts
-      }))));
+      });
+      if (linked == null) {
+        node = a({
+          href: href,
+          className: clas({
+            preview: this.props.dataPreview != null
+          })
+        }, node);
+      }
+      results.push(li({
+        key: item
+      }, node));
     }
     return results;
   }
 }));
 
 
-},{"../utils/util.coffee":24,"./Async.coffee":3,"./Reactify.coffee":14,"classnames":25}],12:[function(require,module,exports){
+},{"../utils/util.coffee":25,"./Async.coffee":2,"./Reactify.coffee":14,"classnames":26}],11:[function(require,module,exports){
 var div, recl, ref, span;
 
 recl = React.createClass;
@@ -1233,7 +1104,7 @@ module.exports = recl({
 });
 
 
-},{}],13:[function(require,module,exports){
+},{}],12:[function(require,module,exports){
 var TreeActions, div, recl;
 
 recl = React.createClass;
@@ -1267,7 +1138,327 @@ module.exports = recl({
 });
 
 
-},{"../actions/TreeActions.coffee":1}],14:[function(require,module,exports){
+},{"../actions/TreeActions.coffee":1}],13:[function(require,module,exports){
+var BodyComponent, Dpad, Nav, Sibs, TreeActions, TreeStore, a, button, clas, div, li, query, reactify, recl, ref, rend, ul, util;
+
+clas = require('classnames');
+
+BodyComponent = React.createFactory(require('./BodyComponent.coffee'));
+
+query = require('./Async.coffee');
+
+reactify = require('./Reactify.coffee');
+
+TreeStore = require('../stores/TreeStore.coffee');
+
+TreeActions = require('../actions/TreeActions.coffee');
+
+Sibs = React.createFactory(require('./SibsComponent.coffee'));
+
+Dpad = React.createFactory(require('./DpadComponent.coffee'));
+
+util = require('../utils/util.coffee');
+
+recl = React.createClass;
+
+rend = ReactDOM.render;
+
+ref = React.DOM, div = ref.div, a = ref.a, ul = ref.ul, li = ref.li, button = ref.button;
+
+Nav = React.createFactory(query({
+  path: 't',
+  kids: {
+    name: 't',
+    head: 'r',
+    meta: 'j'
+  }
+}, recl({
+  displayName: "Links",
+  stateFromStore: function() {
+    return TreeStore.getNav();
+  },
+  getInitialState: function() {
+    return this.stateFromStore();
+  },
+  _onChangeStore: function() {
+    if (this.isMounted()) {
+      return this.setState(this.stateFromStore());
+    }
+  },
+  componentDidMount: function() {
+    return TreeStore.addChangeListener(this._onChangeStore);
+  },
+  componentWillUnmount: function() {
+    return TreeStore.removeChangeListener(this._onChangeStore);
+  },
+  onClick: function() {
+    return this.toggleFocus();
+  },
+  onMouseOver: function() {
+    return this.toggleFocus(true);
+  },
+  onMouseOut: function() {
+    return this.toggleFocus(false);
+  },
+  onTouchStart: function() {
+    return this.ts = Number(Date.now());
+  },
+  onTouchEnd: function() {
+    var dt;
+    return dt = this.ts - Number(Date.now());
+  },
+  _home: function() {
+    return this.props.goTo(this.props.meta.navhome ? this.props.meta.navhome : "/");
+  },
+  toggleFocus: function(state) {
+    return $(ReactDOM.findDOMNode(this)).toggleClass('focus', state);
+  },
+  toggleNav: function() {
+    return TreeActions.toggleNav();
+  },
+  render: function() {
+    var attr, dpad, i, iconClass, itemsClass, len, linksClas, navClas, ref1, ref2, ref3, sibs, sub, subprops, title, toggleClas, v;
+    attr = {
+      onMouseOver: this.onMouseOver,
+      onMouseOut: this.onMouseOut,
+      onClick: this.onClick,
+      onTouchStart: this.onTouchStart,
+      onTouchEnd: this.onTouchEnd,
+      'data-path': this.props.dataPath
+    };
+    if (_.keys(window).indexOf("ontouchstart") !== -1) {
+      delete attr.onMouseOver;
+      delete attr.onMouseOut;
+    }
+    linksClas = clas({
+      links: true,
+      subnav: (this.props.meta.navsub != null)
+    });
+    navClas = {
+      navbar: this.props.meta.navmode === 'navbar',
+      ctrl: true,
+      open: this.state.open === true
+    };
+    if (this.props.meta.layout) {
+      ref1 = this.props.meta.layout.split(",");
+      for (i = 0, len = ref1.length; i < len; i++) {
+        v = ref1[i];
+        navClas[v.trim()] = true;
+      }
+    }
+    navClas = clas(navClas);
+    iconClass = clas({
+      icon: true,
+      'col-md-1': this.props.meta.navmode === 'navbar'
+    });
+    attr = _.extend(attr, {
+      className: navClas,
+      key: "nav"
+    });
+    title = this.state.title ? this.state.title : "";
+    dpad = this.state.dpad !== false && ((ref2 = this.props.meta) != null ? ref2.navdpad : void 0) !== "false" ? Dpad(this.props, "") : "";
+    sibs = this.state.sibs !== false && ((ref3 = this.props.meta) != null ? ref3.navsibs : void 0) !== "false" ? Sibs(_.merge(_.clone(this.props), {
+      toggleNav: this.toggleNav
+    }), "") : "";
+    itemsClass = clas({
+      items: true,
+      'col-md-11': this.props.meta.navmode === 'navbar'
+    });
+    if (this.props.meta.navsub) {
+      subprops = _.cloneDeep(this.props);
+      subprops.dataPath = subprops.meta.navsub;
+      delete subprops.meta.navselect;
+      subprops.className = 'subnav';
+      sub = Sibs(_.merge(subprops, {
+        toggleNav: this.toggleNav
+      }), "");
+    }
+    toggleClas = clas({
+      'navbar-toggler': true,
+      show: this.state.subnav != null
+    });
+    return div(attr, div({
+      className: linksClas,
+      key: "links"
+    }, div({
+      className: iconClass
+    }, div({
+      className: 'home',
+      onClick: this._home
+    }, ""), div({
+      className: 'app'
+    }, title), dpad, button({
+      className: toggleClas,
+      type: 'button',
+      onClick: this.toggleNav
+    }, "☰")), div({
+      className: itemsClass
+    }, sibs, sub)));
+  }
+}), recl({
+  displayName: "Links_loading",
+  _home: function() {
+    return this.props.goTo("/");
+  },
+  render: function() {
+    return div({
+      className: "col-md-2 ctrl",
+      "data-path": this.props.dataPath,
+      key: "nav-loading"
+    }, div({
+      className: 'links'
+    }, div({
+      className: 'icon'
+    }, div({
+      className: 'home',
+      onClick: this._home
+    }, "")), ul({
+      className: "nav"
+    }, li({
+      className: "nav-item selected"
+    }, a({
+      className: "nav-link"
+    }, this.props.curr)))));
+  }
+})));
+
+module.exports = query({
+  sein: 't',
+  path: 't',
+  name: 't',
+  meta: 'j'
+}, recl({
+  displayName: "Anchor",
+  stateFromStore: function() {
+    return TreeStore.getNav();
+  },
+  getInitialState: function() {
+    return _.extend(this.stateFromStore(), {
+      url: window.location.pathname
+    });
+  },
+  _onChangeStore: function() {
+    if (this.isMounted()) {
+      return this.setState(this.stateFromStore());
+    }
+  },
+  componentWillUnmount: function() {
+    clearInterval(this.interval);
+    $('body').off('click', 'a');
+    return TreeStore.removeChangeListener(this._onChangeStore);
+  },
+  componentDidUpdate: function() {
+    this.setTitle();
+    return this.checkRedirect();
+  },
+  componentDidMount: function() {
+    var _this;
+    this.setTitle();
+    TreeStore.addChangeListener(this._onChangeStore);
+    _this = this;
+    $('body').on('click', 'a', function(e) {
+      var href, url;
+      href = $(this).attr('href');
+      if (href[0] === "#") {
+        return true;
+      }
+      if (href && !/^https?:\/\//i.test(href)) {
+        e.preventDefault();
+        url = new URL(this.href);
+        if (url.pathname.substr(-1) !== "/") {
+          url.pathname += "/";
+        }
+        return _this.goTo(url.pathname + url.search + url.hash);
+      }
+    });
+    return this.checkRedirect();
+  },
+  checkRedirect: function() {
+    if (this.props.meta.redirect) {
+      return setTimeout(((function(_this) {
+        return function() {
+          return _this.goTo(_this.props.meta.redirect);
+        };
+      })(this)), 0);
+    }
+  },
+  setTitle: function() {
+    var ref1, title;
+    title = $('#body h1').first().text() || this.props.name;
+    if ((ref1 = this.props.meta) != null ? ref1.title : void 0) {
+      title = this.props.meta.title;
+    }
+    return document.title = title + " - " + this.props.path;
+  },
+  setPath: function(path, hist) {
+    var next;
+    if (hist !== false) {
+      history.pushState({}, "", path);
+    }
+    next = util.fragpath(path.split('#')[0]);
+    if (next !== this.props.path) {
+      return TreeActions.setCurr(next);
+    }
+  },
+  reset: function() {
+    return $("html,body").animate({
+      scrollTop: 0
+    });
+  },
+  goTo: function(path) {
+    this.reset();
+    return this.setPath(path);
+  },
+  checkURL: function() {
+    if (this.state.url !== window.location.pathname) {
+      this.reset();
+      this.setPath(window.location.pathname, false);
+      return this.setState({
+        url: window.location.pathname
+      });
+    }
+  },
+  render: function() {
+    var kids, kidsPath, navClas;
+    if (this.props.meta.anchor === 'none') {
+      return div({}, "");
+    }
+    navClas = clas({
+      container: this.props.meta.container === 'false'
+    });
+    kidsPath = this.props.sein;
+    if (this.props.meta.navpath) {
+      kidsPath = this.props.meta.navpath;
+    }
+    kids = [
+      Nav({
+        curr: this.props.name,
+        dataPath: kidsPath,
+        meta: this.props.meta,
+        sein: this.props.sein,
+        goTo: this.goTo,
+        key: "nav"
+      }, "div")
+    ];
+    if (this.state.subnav) {
+      kids.push(reactify({
+        gn: this.state.subnav,
+        ga: {
+          open: this.state.open,
+          toggle: TreeActions.toggleNav
+        },
+        c: []
+      }, "subnav"));
+    }
+    return div({
+      id: 'head',
+      className: navClas
+    }, kids);
+  }
+}));
+
+
+},{"../actions/TreeActions.coffee":1,"../stores/TreeStore.coffee":23,"../utils/util.coffee":25,"./Async.coffee":2,"./BodyComponent.coffee":3,"./DpadComponent.coffee":7,"./Reactify.coffee":14,"./SibsComponent.coffee":17,"classnames":26}],14:[function(require,module,exports){
 var TreeStore, Virtual, div, load, reactify, recl, ref, rele, span, walk;
 
 recl = React.createClass;
@@ -1355,7 +1546,7 @@ module.exports = _.extend(reactify, {
 });
 
 
-},{"../stores/TreeStore.coffee":22,"./LoadComponent.coffee":12}],15:[function(require,module,exports){
+},{"../stores/TreeStore.coffee":23,"./LoadComponent.coffee":11}],15:[function(require,module,exports){
 var appendNext, recl, rele, waitingScripts;
 
 recl = React.createClass;
@@ -1392,7 +1583,9 @@ module.exports = recl({
     }
   },
   componentWillUnmount: function() {
-    return document.body.removeChild(this.js);
+    if (this.js.parentNode === document.body) {
+      return document.body.removeChild(this.js);
+    }
   },
   render: function() {
     return rele("script", this.props);
@@ -1538,8 +1731,8 @@ module.exports = query({
 }));
 
 
-},{"./Async.coffee":3,"./Reactify.coffee":14}],17:[function(require,module,exports){
-var a, clas, li, reactify, recl, ref, ul, util;
+},{"./Async.coffee":2,"./Reactify.coffee":14}],17:[function(require,module,exports){
+var a, clas, li, query, reactify, recl, ref, ul, util;
 
 util = require('../utils/util.coffee');
 
@@ -1547,11 +1740,20 @@ clas = require('classnames');
 
 reactify = require('./Reactify.coffee');
 
+query = require('./Async.coffee');
+
 recl = React.createClass;
 
 ref = React.DOM, ul = ref.ul, li = ref.li, a = ref.a;
 
-module.exports = React.createFactory(recl({
+module.exports = query({
+  path: 't',
+  kids: {
+    snip: 'r',
+    head: 'r',
+    meta: 'j'
+  }
+}, recl({
   displayName: "Siblings",
   toText: function(elem) {
     return reactify.walk(elem, function() {
@@ -1565,13 +1767,25 @@ module.exports = React.createFactory(recl({
     });
   },
   render: function() {
-    var keys;
+    var keys, navClas;
     keys = util.getKeys(this.props.kids);
+    navClas = {
+      nav: true,
+      'col-md-12': this.props.meta.navmode === 'navbar'
+    };
+    if (this.props.className) {
+      navClas[this.props.className] = true;
+    }
+    navClas = clas(navClas);
     return ul({
-      className: "nav"
+      className: navClas
     }, keys.map((function(_this) {
       return function(key) {
-        var className, data, head, href;
+        var className, data, head, href, selected;
+        selected = key === _this.props.curr;
+        if (_this.props.meta.navselect) {
+          selected = key === _this.props.meta.navselect;
+        }
         href = util.basepath(_this.props.path + "/" + key);
         data = _this.props.kids[key];
         if (data.meta) {
@@ -1583,8 +1797,11 @@ module.exports = React.createFactory(recl({
         head || (head = key);
         className = clas({
           "nav-item": true,
-          selected: key === _this.props.curr
+          selected: selected
         });
+        if (data.meta.sibsclass) {
+          className += " " + clas(data.meta.sibsclass.split(","));
+        }
         return li({
           className: className,
           key: key
@@ -1599,7 +1816,7 @@ module.exports = React.createFactory(recl({
 }));
 
 
-},{"../utils/util.coffee":24,"./Reactify.coffee":14,"classnames":25}],18:[function(require,module,exports){
+},{"../utils/util.coffee":25,"./Async.coffee":2,"./Reactify.coffee":14,"classnames":26}],18:[function(require,module,exports){
 var div, query, reactify, recl,
   slice = [].slice;
 
@@ -1736,7 +1953,50 @@ module.exports = query({
 }));
 
 
-},{"./Async.coffee":3,"./Reactify.coffee":14}],19:[function(require,module,exports){
+},{"./Async.coffee":2,"./Reactify.coffee":14}],19:[function(require,module,exports){
+var body, clas, div, head, query, recf, recl;
+
+query = require('./Async.coffee');
+
+clas = require('classnames');
+
+recf = React.createFactory;
+
+recl = React.createClass;
+
+head = recf(require('./NavComponent.coffee'));
+
+body = recf(require('./BodyComponent.coffee'));
+
+div = React.DOM.div;
+
+module.exports = query({
+  body: 'r',
+  name: 't',
+  path: 't',
+  meta: 'j',
+  sein: 't'
+}, recl({
+  displayName: "Tree",
+  render: function() {
+    var treeClas;
+    treeClas = clas({
+      container: this.props.meta.container !== 'false'
+    });
+    return div({
+      className: treeClas
+    }, [
+      head({
+        key: 'head-container'
+      }, ""), body({
+        key: 'body-container'
+      }, "")
+    ]);
+  }
+}));
+
+
+},{"./Async.coffee":2,"./BodyComponent.coffee":3,"./NavComponent.coffee":13,"classnames":26}],20:[function(require,module,exports){
 module.exports = _.extend(new Flux.Dispatcher(), {
   handleServerAction: function(action) {
     return this.dispatch({
@@ -1753,15 +2013,18 @@ module.exports = _.extend(new Flux.Dispatcher(), {
 });
 
 
-},{}],20:[function(require,module,exports){
+},{}],21:[function(require,module,exports){
 var rend;
 
 rend = ReactDOM.render;
 
 $(function() {
-  var body, frag, head, util;
+  var frag, main, util;
   util = require('./utils/util.coffee');
   require('./utils/scroll.coffee');
+  if (document.location.pathname.substr(-1) !== "/") {
+    history.replaceState({}, "", document.location.pathname + "/" + document.location.search + document.location.hash);
+  }
   window.tree.actions = require('./actions/TreeActions.coffee');
   window.tree.actions.addVirtual(require('./components/Components.coffee'));
   frag = util.fragpath(window.location.pathname.replace(/\.[^\/]*$/, ''));
@@ -1774,14 +2037,12 @@ $(function() {
     }
     return window.tree.actions.clearData();
   };
-  head = React.createFactory(require('./components/AnchorComponent.coffee'));
-  body = React.createFactory(require('./components/BodyComponent.coffee'));
-  rend(head({}, ""), $('#head')[0]);
-  return rend(body({}, ""), $('#body')[0]);
+  main = React.createFactory(require('./components/TreeComponent.coffee'));
+  return rend(main({}, ""), document.getElementById('tree'));
 });
 
 
-},{"./actions/TreeActions.coffee":1,"./components/AnchorComponent.coffee":2,"./components/BodyComponent.coffee":4,"./components/Components.coffee":7,"./utils/scroll.coffee":23,"./utils/util.coffee":24}],21:[function(require,module,exports){
+},{"./actions/TreeActions.coffee":1,"./components/Components.coffee":6,"./components/TreeComponent.coffee":19,"./utils/scroll.coffee":24,"./utils/util.coffee":25}],22:[function(require,module,exports){
 var dedup, pending, util, waspWait;
 
 util = require('../utils/util.coffee');
@@ -1869,7 +2130,7 @@ module.exports = {
 };
 
 
-},{"../utils/util.coffee":24}],22:[function(require,module,exports){
+},{"../utils/util.coffee":25}],23:[function(require,module,exports){
 var EventEmitter, MessageDispatcher, QUERIES, TreeStore, _curr, _data, _nav, _tree, _virt, clog;
 
 EventEmitter = require('events').EventEmitter.EventEmitter;
@@ -2138,7 +2399,7 @@ TreeStore.dispatchToken = MessageDispatcher.register(function(p) {
 module.exports = TreeStore;
 
 
-},{"../dispatcher/Dispatcher.coffee":19,"events":26}],23:[function(require,module,exports){
+},{"../dispatcher/Dispatcher.coffee":20,"events":27}],24:[function(require,module,exports){
 var scroll;
 
 scroll = {
@@ -2232,7 +2493,7 @@ scroll.init();
 module.exports = scroll;
 
 
-},{}],24:[function(require,module,exports){
+},{}],25:[function(require,module,exports){
 var _basepath;
 
 _basepath = window.urb.util.basepath("/");
@@ -2281,7 +2542,7 @@ module.exports = {
 };
 
 
-},{}],25:[function(require,module,exports){
+},{}],26:[function(require,module,exports){
 /*!
   Copyright (c) 2016 Jed Watson.
   Licensed under the MIT License (MIT), see
@@ -2331,7 +2592,7 @@ module.exports = {
 	}
 }());
 
-},{}],26:[function(require,module,exports){
+},{}],27:[function(require,module,exports){
 // Copyright Joyent, Inc. and other Node contributors.
 //
 // Permission is hereby granted, free of charge, to any person obtaining a
@@ -2631,4 +2892,4 @@ function isUndefined(arg) {
   return arg === void 0;
 }
 
-},{}]},{},[20]);
+},{}]},{},[21]);