diff --git a/zero.Core/Api/PageTreeApi.cs b/zero.Core/Api/PageTreeApi.cs
index 4c8b4344..f286d829 100644
--- a/zero.Core/Api/PageTreeApi.cs
+++ b/zero.Core/Api/PageTreeApi.cs
@@ -3,6 +3,7 @@ using Raven.Client.Documents;
 using System;
 using System.Collections.Generic;
 using System.Text;
+using System.Threading.Tasks;
 using zero.Core.Entities;
 
 namespace zero.Core.Api
@@ -19,8 +20,10 @@ namespace zero.Core.Api
 
 
     /// <inheritdoc />
-    public IList<TreeItem> GetChildren(string contentPath, string parent = null) // TODO remove content path as it's only needed to load test data
+    public async Task<IList<TreeItem>> GetChildren(string contentPath, string parent = null) // TODO remove content path as it's only needed to load test data
     {
+      await Task.Delay(parent != null ? 1200 : 0);
+
       string path = System.IO.Path.Combine(contentPath, "Resources/tree" + (parent != null ? "-" + parent.ToString() : String.Empty) + ".debug.json");
       string text = System.IO.File.ReadAllText(path, Encoding.UTF8);
 
@@ -34,6 +37,6 @@ namespace zero.Core.Api
     /// <summary>
     /// Get all children for the current parent page (or root if empty)
     /// </summary>
-    IList<TreeItem> GetChildren(string contentPath, string parent = null);
+    Task<IList<TreeItem>> GetChildren(string contentPath, string parent = null);
   }
 }
diff --git a/zero.Web/App/Components/tree.vue b/zero.Web/App/Components/tree.vue
index 1a6d8585..9198057c 100644
--- a/zero.Web/App/Components/tree.vue
+++ b/zero.Web/App/Components/tree.vue
@@ -1,6 +1,19 @@
 <template>
-  <div class="ui-tree">
-    tree
+  <div class="ui-tree" :style="{ 'padding-left': depth > 0 ? ((depth * 18) + 'px') : null }">
+    <span v-if="status === 'loading'" class="ui-tree-item-loading"><i></i></span>
+    <template v-for="item in items">
+      <div class="ui-tree-item" :class="getClasses(item)">
+        <button v-if="item.hasChildren" @click="toggle(item)" type="button" class="ui-tree-item-toggle">
+          <i class="ui-tree-item-arrow" :class="['fth-chevron-' + (item.isOpen ? 'up' : 'down')]"></i>
+        </button>
+        <router-link to="/" class="ui-tree-item-link">
+          <i class="ui-tree-item-icon" :class="item.icon"></i>
+          <i v-if="item.modifier" :title="item.modifier.name" class="ui-tree-item-modifier" :class="item.modifier.icon"></i>
+          {{item.name | localize}}
+        </router-link>
+      </div>
+      <ui-tree v-if="item.hasChildren && item.isOpen" :get="get" :parent="item.id" :depth="depth + 1" />
+    </template>
   </div>
 </template>
 
@@ -10,15 +23,32 @@
     name: 'uiTree',
 
     props: {
+      depth: {
+        type: Number,
+        default: 0
+      },
+      parent: {
+        type: String,
+        default: null
+      },
       get: {
         type: Function,
         required: true
+      },
+      onChange: {
+        type: Function,
+        default: () => { }
       }
     },
 
+    data: () => ({
+      items: [],
+      status: 'none'
+    }),
+
     created ()
     {
-      this.load();
+      this.load(this.parent);
     },
 
     methods: {
@@ -26,20 +56,187 @@
       // loads children of the given parent id or on root if empty
       load(parent)
       {
-        let promise = this.get(parent);
+        this.setStatus('loading', this.items);
 
-        //if (typeof promise !== 'object' || !promise['then'] || typeof promise.then !== 'function')
+        let promise = this.get(parent);
 
         promise.then(response =>
         {
-          console.info(response);
+          this.items = response;
+          this.setStatus('loaded', this.items);
         })
         .catch(error =>
         {
+          this.setStatus('error', this.items, error);
           // TODO handle errors
         });
+      },
+
+
+      // updates the status for the current tree
+      setStatus(status)
+      {
+        this.status = status;
+        this.onChange(status, this.items);
+      },
+
+
+      // sets the current status for child tree
+      setChildTreeStatus(status, items, x)
+      {
+        console.info(status, items, x, this);
+      },
+
+
+      // toggles children of an item
+      toggle(item)
+      {
+        item.isOpen = !item.isOpen;
+
+        //if (item.isOpen && !item.items)
+        //{
+        //  item.children = this.load(item.id, items =>
+        //  {
+        //    item.items = items;
+        //  });
+        //}
+      },
+
+
+      // get all classes for a tree item
+      getClasses(item)
+      {
+        return {
+          'has-children': item.hasChildren,
+          'is-open': item.isOpen
+        };
       }
 
     }
   }
-</script>
\ No newline at end of file
+</script>
+
+
+<style lang="scss">
+  .ui-tree
+  {
+    position: relative;
+  }
+
+  .ui-tree-item
+  {
+    display: grid;
+    
+    align-items: center;
+    font-size: var(--font-size);
+    padding: 0 var(--padding);
+    height: 50px;
+    color: var(--color-fg-reverse-mid);
+    position: relative;
+    transition: color 0.2s ease;
+
+    .ui-tree-item-arrow
+    {
+      transition: transform 0.2s ease;
+    }
+
+    &.is-open > .ui-tree-item-toggle .ui-tree-item-arrow
+    {
+      transform: rotate(180deg);
+    }
+  }
+
+  .ui-tree-item-link
+  {
+    display: grid;
+    grid-template-columns: 30px 1fr auto;
+    grid-gap: 6px;
+    height: 100%;
+    align-items: center;
+    position: relative;
+
+    &:hover
+    {
+      color: var(--color-fg);
+
+      .ui-tree-item-icon
+      {
+        color: var(--color-fg);
+      }
+    }
+  }
+
+  .ui-tree-item-toggle
+  {
+    position: absolute;
+    color: var(--color-fg-mid);
+    height: 100%;
+    top: 0;
+    left: 0;
+    width: 30px;
+    text-align: right;
+    padding-right: 5px;
+    outline: none !important;
+    transition: color 0.2s ease;
+
+    &:hover
+    {
+      color: var(--color-fg);
+    }
+  }
+
+  .ui-tree-item-icon
+  {
+    font-size: 18px;
+    line-height: 1;
+    font-weight: 400;
+    position: relative;
+    top: -2px;
+    color: var(--color-fg-reverse-mid);
+    transition: color 0.2s ease;
+  }
+
+  .ui-tree-item-loading
+  {
+    display: block;
+    overflow: hidden;
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 2px;
+
+    i
+    {
+      background-color: var(--color-line);
+      transform: translateX(-100%) scaleX(1);
+      animation: treeitemloading 1s linear infinite;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+  }
+
+  @keyframes treeitemloading
+  {
+    0%  { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+  }
+
+  .ui-tree-item-modifier
+  {
+    position: absolute;
+    left: 10px;
+    bottom: 12px;
+    background: var(--color-bg-light);
+    border-radius: 50%;
+    width: 14px;
+    height: 14px;
+    color: var(--color-text-mid);
+    font-size: 11px;
+    font-style: normal;
+    text-align: center;
+    line-height: 14px;
+  }
+</style>
\ No newline at end of file
diff --git a/zero.Web/App/Pages/page.vue b/zero.Web/App/Pages/page.vue
index 44cd3db4..a819a95a 100644
--- a/zero.Web/App/Pages/page.vue
+++ b/zero.Web/App/Pages/page.vue
@@ -14,11 +14,26 @@
   export default {
     name: 'app-page',
 
+    data: () => ({
+      cache: {}
+    }),
+
     methods: {
 
       getItems(parent)
       {
-        return PageTreeApi.getChildren(parent);
+        const key = !parent ? '__root' : parent;
+
+        if (this.cache[key])
+        {
+          return Promise.resolve(this.cache[key]);
+        }
+
+        return PageTreeApi.getChildren(parent).then(response =>
+        {
+          this.cache[key] = response;
+          return response;
+        });
       }
 
     }
@@ -39,6 +54,6 @@
   {
     width: 340px;
     background: var(--color-bg-light);
-    padding: var(--padding);
+    padding: var(--padding) 0;
   }
 </style>
\ No newline at end of file
diff --git a/zero.Web/Controllers/PageTreeController.cs b/zero.Web/Controllers/PageTreeController.cs
index 1f0a49fa..5784c0ae 100644
--- a/zero.Web/Controllers/PageTreeController.cs
+++ b/zero.Web/Controllers/PageTreeController.cs
@@ -1,6 +1,7 @@
 using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Hosting;
 using Microsoft.AspNetCore.Mvc;
+using System.Threading.Tasks;
 using zero.Core;
 using zero.Core.Api;
 
@@ -20,9 +21,9 @@ namespace zero.Web.Controllers
     }
 
 
-    public IActionResult GetChildren(string parent = null)
+    public async Task<IActionResult> GetChildren(string parent = null)
     {
-      return Json(Api.GetChildren(Env.ContentRootPath, parent));
+      return Json(await Api.GetChildren(Env.ContentRootPath, parent));
     }
   }
 }
diff --git a/zero.Web/Resources/Localization/zero.en-us.json b/zero.Web/Resources/Localization/zero.en-us.json
index a873ef3c..a83a9779 100644
--- a/zero.Web/Resources/Localization/zero.en-us.json
+++ b/zero.Web/Resources/Localization/zero.en-us.json
@@ -11,5 +11,10 @@
       "pages": "Pages",
       "settings": "Settings"
     }
+  },
+
+  "recyclebin": {
+    "name": "Recycle bin",
+    "description": "View recently deleted entities"
   }
 }
\ No newline at end of file
diff --git a/zero.Web/Resources/tree.debug.json b/zero.Web/Resources/tree.debug.json
index b3676e1b..0b14e6dd 100644
--- a/zero.Web/Resources/tree.debug.json
+++ b/zero.Web/Resources/tree.debug.json
@@ -12,8 +12,8 @@
     "id": "-99",
     "parentId": null,
     "sort": 1000,
-    "name": "@generic.recyclebin.name",
-    "description": "@generic.recyclebin.description",
+    "name": "@recyclebin.name",
+    "description": "@recyclebin.description",
     "icon": "fth-trash",
     "hasChildren": false
   }
diff --git a/zero.Web/Sass/Canvas/_navigation.scss b/zero.Web/Sass/Canvas/_navigation.scss
index 071c6b9c..75567ecd 100644
--- a/zero.Web/Sass/Canvas/_navigation.scss
+++ b/zero.Web/Sass/Canvas/_navigation.scss
@@ -60,7 +60,6 @@ a.app-nav-item
 
   &:hover, &.is-active
   {
-    background: rgba(black, 0.1);
     color: var(--color-fg-reverse);
 
     .app-nav-item-icon
@@ -71,6 +70,7 @@ a.app-nav-item
 
   &.is-active
   {
+    background: rgba(black, 0.1);
     font-weight: 700;
   }
 
diff --git a/zero.Web/Sass/Core/_settings.scss b/zero.Web/Sass/Core/_settings.scss
index cf3c05d0..d5c9e81e 100644
--- a/zero.Web/Sass/Core/_settings.scss
+++ b/zero.Web/Sass/Core/_settings.scss
@@ -20,7 +20,7 @@
   --color-bg-light: #242526;
 
   // line colors
-  --color-line: #eaebec;
+  --color-line: #2f3233;
   --color-line-mid: #d7d8d9;
 
 
@@ -28,6 +28,9 @@
 
   --padding: 32px;
   --height-top: 74px;
+
+  --font-size: 14px;
+  --font-size-s: 12px;
 }
 
 
diff --git a/zero.Web/Sass/Modules/Buttons/_button.scss b/zero.Web/Sass/Modules/Buttons/_button.scss
index ca98099b..56a9f0ce 100644
--- a/zero.Web/Sass/Modules/Buttons/_button.scss
+++ b/zero.Web/Sass/Modules/Buttons/_button.scss
@@ -3,6 +3,7 @@
 button
 {
   @extend %font;
+  color: var(--color-fg);
 
   &:focus
   {