diff --git a/app/app/controllers.ls b/app/app/controllers.ls
index ae039c9f..99b1c3d2 100644
--- a/app/app/controllers.ls
+++ b/app/app/controllers.ls
@@ -17,6 +17,7 @@ angular.module 'app.controllers' <[ui.state]>
       update: -> console?log \notyetupdated
     iframes: HackFolder.iframes
     docs: HackFolder.docs
+    tree: HackFolder.tree
     activate: HackFolder.activate
     HackFolder: HackFolder
     reload: (hackId) -> HackFolder.getIndex hackId, true ->
@@ -52,11 +53,13 @@ angular.module 'app.controllers' <[ui.state]>
 .factory HackFolder: <[$http]> ++ ($http) ->
   iframes = {}
   docs = []
+  tree = []
   var hackId
   do
     iframes: iframes
     collapsed: false
     docs: docs
+    tree: tree
     activate: (id, edit=false) ->
       [{type}:doc] = [d for d in docs when d.id is id]
       mode = if edit => \edit else \view
@@ -93,7 +96,8 @@ angular.module 'app.controllers' <[ui.state]>
       entries = for line in csv.split /\n/ when line
         [url, title, ...rest] = line.split /,/
         title -= /"/g
-        entry = { url, title } <<< match url
+        [_, prefix, url] = url.match /^"?(\s*)(\S+)"?$/
+        entry = { url, title, indent: prefix.length } <<< match url
         | // ^https?:\/\/www\.ethercalc\.(?:com|org)/(.*) //
             type: \ethercalc
             id: that.1
@@ -119,5 +123,17 @@ angular.module 'app.controllers' <[ui.state]>
         | otherwise => console?log \unrecognized url
         entry.icon ?= "img/#{ entry.type }.png"
         entry
+      last-parent = 0
       docs.splice 0, -1, ...(entries.filter -> it?)
+      nested = for entry, i in docs when i > 0
+        if entry.indent
+          entries[last-parent]
+            ..children ?= []
+            ..children.push entry
+            ..collapsed = true
+          null
+        else
+          last-parent = i
+          entry
+      tree.splice 0, -1, ...(nested.filter -> it?)
       cb docs
diff --git a/app/partials/app/hack.static.jade b/app/partials/app/hack.static.jade
index be014c44..328b5900 100644
--- a/app/partials/app/hack.static.jade
+++ b/app/partials/app/hack.static.jade
@@ -5,11 +5,19 @@
         &nbsp;
         a.indexlink.expanded-content(ng-href="http://ethercalc.org/{{hackId}}",target="_blank",ngx-final) {{hackId}} 
         small: a.reload(ng-click="reload(hackId)",ngx-noclick) &#x21BA;
-      ul(ui-sortable='sortableOptions', ng-model='docs')
-        li(ng-repeat='doc in docs', ng-title="{{doc.title || doc.id}}",ngx-noclick,ng-class='{active: doc.id == docId}')
-          a.link(ng-href='/#/{{hackId}}/{{doc.id}}',ngx-final)
-            img(ng-src="{{doc.icon}}",title="{{doc.title || doc.id}}")
-            span.expanded-content {{doc.title || doc.id}}
+      ul(ui-sortable='sortableOptions', ng-model='tree')
+        li(ng-repeat='doc in tree', ng-title="{{doc.title || doc.id}}",ngx-noclick,ng-class='{active: doc.id == docId}')
+          .entry
+            a.link(ng-href='/#/{{hackId}}/{{doc.id}}',ngx-final)
+              img(ng-src="{{doc.icon}}",title="{{doc.title || doc.id}}")
+              span.expanded-content {{doc.title || doc.id}}
+            span.collapser(ui-if='doc.children',ng-class='{collapsed: doc.collapsed}',ng-click='doc.collapsed=!doc.collapsed') {{ {"true": "&#x25B8;", "false": "&#x25BE;"}[!!doc.collapsed] }}
+          ul(ui-if='doc.children && !doc.collapsed',ui-sortable='sortableOptions', ng-model='doc.children')
+            li(ng-repeat='doc in doc.children', ng-title="{{doc.title || doc.id}}",ngx-noclick,ng-class='{active: doc.id == docId}')
+              .entry
+                a.link(ng-href='/#/{{hackId}}/{{doc.id}}',ngx-final)
+                  img(ng-src="{{doc.icon}}",title="{{doc.title || doc.id}}")
+                  span.expanded-content {{doc.title || doc.id}}
     .pad-container(ng-style='{height: height-49}')
       article.pad(ng-repeat='(key, iframe) in iframes',ng-show='docId == key')
         span.docmode(ng-show="hasViewMode(iframe.doc.type) && iframe.mode != 'edit'",ng-click="activate(iframe.doc.id, true)") edit
diff --git a/app/styles/hack.sass b/app/styles/hack.sass
index 30cbb128..3c644da2 100644
--- a/app/styles/hack.sass
+++ b/app/styles/hack.sass
@@ -81,7 +81,7 @@ a
       li
         margin-top: 1px
         padding: 2px 5px 2px 11px
-        height: 1.2em
+        min-height: 1.2em
         font-size: 16px
         &:hover
           background: rgba(255,255,255,0.7)
@@ -93,6 +93,7 @@ a
     margin-left: 10px
     margin-right: 20px
     li
+      position: relative
       list-style: none
       cursor: pointer
       margin: 0
@@ -101,8 +102,15 @@ a
         padding: 5px 0 15px -3px
         margin-top: 5px
         font-weight: 700
-      &.active
+      &.active > .entry
         background: orange
+        margin-left: -30px
+        margin-right: -20px
+        padding-left: 30px
+      span.collapser
+        position: absolute
+        right: 5px
+        top: 0px
 
 
   .pad-container