diff --git a/installit b/installit
index 3c67b6e..850e2e9 100755
--- a/installit
+++ b/installit
@@ -90,9 +90,15 @@ cd ${current_dir}
 # //netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css
 mkdir -p ./public/lib/font-awesome
 cd ./public/lib/font-awesome
-if [ ! -f ./modernizr.min.js ]; then
+if [ ! -f ./font-awesome.css ]; then
   curl -O http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css
 fi
 cd ${current_dir}
 
-
+# https://raw.github.com/cloudhead/less.js/master/dist/less-1.3.3.min.js
+mkdir -p ./public/lib/lessjs
+cd ./public/lib/lessjs
+if [ ! -f ./less-1.3.3.min.js ]; then
+  curl -O https://raw.github.com/cloudhead/less.js/master/dist/less-1.3.3.min.js
+fi
+cd ${current_dir}
diff --git a/public/index.html b/public/index.html
index 4e9b1e3..e5ebdc2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -49,7 +49,9 @@
     <!-- @@style__app_main_style -->
     <!-- @@_end_remove -->
     <!-- @@remove_ -->
-    <link href="/style.css" rel="stylesheet" type="text/css">
+    <!--<link href="/style.css" rel="stylesheet" type="text/css">-->
+    <link rel="stylesheet/less" type="text/css" href="./style.css" />
+    <script src="/lib/lessjs/less-1.3.3.min.js" type="text/javascript" charset="utf-8"></script>
     <!-- @@_end_remove -->
 </head>
 
@@ -67,39 +69,30 @@
         <select data-bind="options: _availableModes(), optionsText: 'name', value: _selectedMode"></select>
     </div>
     <!-- ko stopBinding: true --><!-- isolate navigation viewmodel, prevent main from interfering -->
-    <div id="navigation" class="navbar">
+    <div id="navigation" class="navbar navbar-inverse">
         <div class="navbar-inner">
             <div class="container">
                 <a class="brand" href="#">Navigation</a>
                 <div class="dropdown" data-bind="template: {name: 'links_nav', foreach: links }"></div>
                 <script type="text/html" id="links_nav_sub">
-                    <li>
-                    <!-- ko ifnot: $data.hasOwnProperty('links') -->
-                    <a href="#" data-bind="attr: { href: $data.url(), title: $data.title()}, click: $root._openLink">
-                        <span data-bind="text: $data.title()"></span>
-                    </a>
-                    <!-- /ko -->
-                    <!-- ko if: $data.hasOwnProperty('links') -->
-                    <a href="#">
-                        <span data-bind="text: $data.title()"></span>
-                        <span data-bind="text: $root._getDepth($data)"></span>
-                        <i class="icon-arrow-right"></i>
-                    </a>
-                    <!--<ul data-bind="attr: { 'class': 'dropdown-menu ' + ($root._getDepth($data) ? 'sub-menu-'+$root._getDepth($data) : '')}">-->
-                    <ul data-bind="attr: { 'class': 'dropdown-menu sub-menu' }, template: {name: 'links_nav_sub', foreach: links }">
-                    </ul>
-                    <!-- /ko -->
+                    <li data-bind="css: { 'dropdown-submenu': $data.hasOwnProperty('links')}">
+                        <!-- ko ifnot: $data.hasOwnProperty('links') -->
+                        <a href="#" data-bind="attr: { href: $data.url(), title: $data.title() }, click: $root._openLink, text: $data.title()"></a>
+                        <!-- /ko --><!-- ko if: $data.hasOwnProperty('links') -->
+                        <a href="#" data-bind="text: $data.title()"></a>
+                        <ul data-bind="attr: { 'class': 'dropdown-menu' }, template: {name: 'links_nav_sub', foreach: links }"></ul>
+                        <!-- /ko -->
                     </li>
                 </script>
                 <script type="text/html" id="links_nav">
                     <div class="btn-group">
-                    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
-                        <span data-bind="text: $data.title()"></span>
-                        <span class="caret"></span>
-                    </a>
-                    <!-- ko if: $data.hasOwnProperty('links') -->
-                    <ul class="dropdown-menu" data-bind="template: {name: 'links_nav_sub', foreach: links,  }"></ul>
-                    <!-- /ko -->
+                        <a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#">
+                            <span data-bind="text: $data.title()"></span>
+                            <span class="caret"></span>
+                        </a>
+                        <!-- ko if: $data.hasOwnProperty('links') -->
+                        <ul class="dropdown-menu" data-bind="template: {name: 'links_nav_sub', foreach: links,  }"></ul>
+                        <!-- /ko -->
                     </div>
                 </script>
             </div>
@@ -133,7 +126,7 @@
     </div>
 </div>
 <div id="content">
-    <div id="tree">
+    <div id="tree" class="">
         <ul>
             <li>
                 <span data-bind="text: name"></span>
@@ -141,7 +134,45 @@
             </li>
         </ul>
     </div>
-    <div id="editor"></div>
+    <div id="main" class="">
+        <div id="tabs">
+            <ul class="nav nav-pills">
+                <li>
+                    <a class="btn" title="preview" data-bind="enable: _chosenAttributeId, click: _previewAttribute"><i class="icon-eye-open"></i></a>
+                </li>
+                <li class="dropdown">
+                    <a class="btn dropdown-toggle"
+                       data-toggle="dropdown"
+                       href="#"><span data-bind="text: _selectedMode().name()">
+                        Dropdown
+                       </span>
+                        <b class="caret"></b>
+                    </a>
+                    <ul class="dropdown-menu">
+                        <!-- ko foreach: _availableModes() -->
+                        <li><a data-bind="click: $root._selectedMode, text: $data.name"></a></li>
+                        <!-- /ko -->
+                    </ul>
+                </li>
+                <li class="divider-vertical"></li>
+                    <!-- ko foreach: _keys() -->
+                    <li data-bind="css: { active: $data == $root._chosenAttributeId() }">
+                        <a data-bind="text: $data,
+                            click: $root._goToAttribute,
+                            css: { active: $data == $root._chosenAttributeId() }"></a>
+                    </li>
+                    <!-- /ko -->
+                <li>
+                <div class="nav navbar-form pull-right">
+                    <input type="text" class="span2"
+                           data-bind="value: _newAttribute"/>
+                </div>
+                </li>
+            </ul>
+        </div>
+        <div id="editor"></div>
+
+    </div>
 </div>
 <!-- @@import_file__templates/scripts.html__into__app_templates_scripts -->
 <!-- @@template__app_templates_scripts__context__app_main -->
@@ -352,7 +383,7 @@ function initViewModelMain(app, doc, vm_config) {
         var id = viewModel._chosenAttributeId();
         if (id) {
             var ext = app.fn.main.getExtensionForAttribute(id);
-            var url = '/page/app/main.' + id + ext;
+            var url = '/page/app/main.' + id + ext + '#!watch';
             open_in_new_tab(url);
         }
 
diff --git a/public/style.css b/public/style.css
index f1e8af9..99a1cfb 100644
--- a/public/style.css
+++ b/public/style.css
@@ -13,11 +13,13 @@ body {
     font-style: italic;
 }
 
+@header-height: 200px;
+
 #header {
     position: fixed;
     top: 0;
     right: 0;
-    height: 200px;
+    height: @header-height;
     width: 100%;
     background-color: black;
 }
@@ -32,42 +34,45 @@ body {
     display: inline;
 }
 
+@content-divider: 150px;
+
 #content {
     position: fixed;
-    top:200px;
+    top: @header-height;
     width: 100%;
     bottom: 0;
 }
 
-#editor {
+#main {
+    left: @content-divider;
+    right: 0;
+}
+
+@tabs-height: 38px;
+#tabs {
     margin: 0;
     position: absolute;
     top: 0;
+    height: @tabs-height;
+    left: @content-divider;
+    right: 0;
+    /*background-color: lightpink;*/
+}
+#editor {
+    margin: 0;
+    position: absolute;
+    top: @tabs-height;
     bottom: 0;
-    left: 370px;
+    left: @content-divider;
     right: 0;
 }
 
 #tree {
     left:0;
-    right:370px;
+    right:@content-divider;
     /*bottom: 0px;*/
 }
 #htext a {
     color: #aaf;
     font-weight: bold;
 }
-
-/* MULTI-LEVEL DROPDOWNS FOR BOOTSTRAP */
-.dropdown-menu .sub-menu {
-    left: 100%;
-    position: relative;
-    top: -31px;
-    visibility: hidden;
-    margin-top: -1px;
-}
-.dropdown-menu li:hover > .sub-menu {
-    visibility: visible;
-    display: block;
-}
-/* END MULTI-LEVEL DROPDOWNS FOR BOOTSTRAP */
diff --git a/public/templates/head.html b/public/templates/head.html
index d0fb6d0..c054e85 100644
--- a/public/templates/head.html
+++ b/public/templates/head.html
@@ -2,4 +2,9 @@
 <!--<script src="/lib/modernizr/modernizr.min.js"></script>-->
 <link href="/lib/bootstrap/bootstrap-combined.min.css" rel="stylesheet" type="text/css">
 <!--<link href="/lib/font-awesome/font-awesome.css" rel="stylesheet" type="text/css">-->
+{{#if debug }}
+<!-- @@less__app_main_style -->
+<script src="/lib/lessjs/less-1.3.3.min.js" type="text/javascript" charset="utf-8"></script>
+{{else}}
 <!-- @@style__app_main_style -->
+{{/if}}
diff --git a/public/templates/navigation.json b/public/templates/navigation.json
index 01d993b..dab31b7 100644
--- a/public/templates/navigation.json
+++ b/public/templates/navigation.json
@@ -71,6 +71,10 @@
 								}
 							]
 						},
+						{
+							"title": "LessCSS",
+							"url": "http://lesscss.org/"
+						},
 						{
 							"title": "ShareJS",
 							"url": "https://github.com/josephg/ShareJS/wiki"