diff --git a/public/index.html b/public/index.html
index 576537c..e01f572 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,13 +15,13 @@
 <!-- @@_end_remove --><html>
 <head>
     <title>app/main/index</title>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
+    <!--<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>-->
+    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css">
+    <!--<link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet" type="text/css">-->
+    <!-- @@style__app_main_style -->
     <!-- @@remove_ -->
     <link href="/style.css" rel="stylesheet" type="text/css">
     <!-- @@_end_remove -->
-    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css">
-    <link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet" type="text/css">
-    <!-- @@style__app_main_style -->
 </head>
 
 <body>
@@ -32,18 +32,30 @@
         Editing <b>index</b>
         <strong data-bind="text: _keys().length"></strong>
         <div data-bind="visible: _getMode()">
-        mode: <strong data-bind="text: _getMode()"></strong>
+            mode: <strong data-bind="text: _getMode()"></strong>
         </div>
         <select data-bind="options: _availableModes(), optionsText: 'name', value: _selectedMode"></select>
-        <div id="main">
-            <ul class="folders">
-                <!-- ko foreach: _keys() -->
-                <li data-bind="text: $data,
-                    css: { selected: $data == $root._chosenFolderId() },
-                    click: $root._goToFolder"></li>
-                <!-- /ko -->
-                <li><input data-bind="value: $root._newAttribute" /></li>
-            </ul>
+    </div>
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="container">
+                <a class="brand" href="#">Currently open</a>
+                <div class="nav btn-toolbar">
+                    <!-- ko foreach: _keys() -->
+                    <div class="btn-group">
+                        <a class="btn" data-bind="text: $data,
+                            click: $root._goToFolder,
+                            css: { active: $data == $root._chosenFolderId() }" ></a>
+                        <button class="btn" data-bind="enable: false, click: $root._closeDoc">&times;</button>
+                    </div>
+                    <!-- /ko -->
+                </div>
+            <!--<ul class="nav pull-right"><li>-->
+                <form class="nav navbar-form pull-right">
+                    <input type="text" class="span2" data-bind="value: $root._newAttribute" />
+                </form>
+            <!--</li></ul>-->
+            </div>
         </div>
     </div>
 </div>
@@ -254,7 +266,9 @@
                 setMode(viewModel._chosenFolderId(), newValue.ace());
             }
         });
-
+        viewModel._closeDoc = function(folder) {
+            console.log('closing ',folder);
+        };
         ko.applyBindings(viewModel);
         window.viewModel=viewModel;
         console.log('viewModel', viewModel);
diff --git a/public/style.css b/public/style.css
index 3a61150..c810ea6 100644
--- a/public/style.css
+++ b/public/style.css
@@ -2,6 +2,9 @@ body {
     overflow: hidden;
 }
 
+.container {
+    width: 100%
+}
 .ace_bold {
     font-weight: bold;
 }
@@ -14,16 +17,13 @@ body {
     position: fixed;
     top: 0;
     right: 0;
-    height: 100px;
+    height: 200px;
     width: 100%;
     background-color: black;
 }
 
 #htext {
-    /*line-height: 30px;*/
-    /*vertical-align: middle;*/
-
-    /*padding-left: 10px;*/
+    padding-left: 20px;
     color: white;
     font-family: baskerville, palatino, 'palatino linotype', georgia, serif;
 }
@@ -34,22 +34,22 @@ body {
 
 #content {
     position: fixed;
-    top:100px;
+    top:200px;
     width: 100%;
-    bottom: 0px;
+    bottom: 0;
 }
 
 #editor {
-    margin: 0px;
+    margin: 0;
     position: absolute;
-    top: 0px;
-    bottom: 0px;
+    top: 0;
+    bottom: 0;
     left: 370px;
-    right: 0px;
+    right: 0;
 }
 
 #tree {
-    left:0px;
+    left:0;
     right:370px;
     /*bottom: 0px;*/
 }
@@ -58,51 +58,3 @@ body {
     font-weight: bold;
 }
 
-.folders {
-    background-color: #bbb;
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-    border-radius: 7px;
-    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d6d6d6), color-stop(0.4, #c0c0c0), color-stop(1, #a4a4a4));
-    margin: 10px 0 16px 0;
-    font-size: 0px;
-}
-
-.folders li:hover {
-    background-color: #ddd;
-}
-
-.folders li:first-child {
-    border-left: none;
-    border-radius: 7px 0 0 7px;
-}
-
-.folders li {
-    font-size: 16px;
-    font-weight: bold;
-    display: inline-block;
-    padding: 0.5em 1.5em;
-    cursor: pointer;
-    color: #444;
-    text-shadow: #f7f7f7 0 1px 1px;
-    border-left: 1px solid #ddd;
-    border-right: 1px solid #888;
-}
-
-.folders li {
-    *display: inline !important;
-}
-
-/* IE7 only */
-.folders .selected {
-    background-color: #444 !important;
-    color: white;
-    text-shadow: none;
-    border-right-color: #aaa;
-    border-left: none;
-    box-shadow: inset 1px 2px 6px #070707;
-}
-
-
-
