diff --git a/src/tpl/nav.html b/src/tpl/nav.html
index 08bdd70..b99c35e 100644
--- a/src/tpl/nav.html
+++ b/src/tpl/nav.html
@@ -3,83 +3,69 @@
   <div class="nav__write">
     <button class="btn" wo-touch="state.writer.write(); $event.stopPropagation()">Write</button>
   </div>
+
   <ul class="nav__folders">
-    <li class="nav__folder nav__folder--open">
-      <a href="javascript:;">
-        <svg role="presentation"><use xlink:href="#icon-inbox" /></svg> Inbox
-        <span class="nav__counter">99+</span>
+    <li ng-repeat="folder in account.folders" ng-if="folder.wellknown" class="nav__folder" ng-class="{'nav__folder--open': state.nav.currentFolder === folder}">
+      <a href="javascript:;" wo-touch="openFolder(folder)">
+        <svg role="presentation">
+          <use ng-if="folder.type === 'Inbox'" xlink:href="#icon-inbox" />
+          <use ng-if="folder.type === 'Sent'" xlink:href="#icon-sent" />
+          <use ng-if="folder.type === 'Outbox'" xlink:href="#icon-inbox" />
+          <use ng-if="folder.type === 'Drafts'" xlink:href="#icon-draft" />
+          <use ng-if="folder.type === 'Trash'" xlink:href="#icon-trash" />
+          <use ng-if="folder.type === 'Flagged'" xlink:href="#icon-star" />
+        </svg>
+        {{folder.type}}
+        <span ng-show="folder.count > 0" class="nav__counter">{{folder.count}}</span>
       </a>
-      <button class="btn-icon-very-light">
+      <!--<button class="btn-icon-very-light">
         <svg><use xlink:href="#icon-dropdown" /><title>More</title></svg>
-      </button>
+      </button>-->
     </li>
-    <li class="nav__folder">
-      <a href="javascript:;">
-        <svg role="presentation"><use xlink:href="#icon-sent" /></svg> Sent
-      </a>
-    </li>
-    <li class="nav__folder">
-      <a href="javascript:;">
-        <svg role="presentation"><use xlink:href="#icon-draft" /></svg> Drafts
-      </a>
-    </li>
-    <li class="nav__folder">
-      <a href="javascript:;">
-        <svg role="presentation"><use xlink:href="#icon-trash" /></svg> Trash
-      </a>
-    </li>
-    <li class="nav__folder">
-      <a href="javascript:;">
-        <svg role="presentation"><use xlink:href="#icon-star" /></svg> Markiert
-        <span class="nav__counter">1</span>
-      </a>
-    </li>
-  </ul>
+  </ul><!--/nav__folders-->
+
   <ul class="nav__folders">
-    <li class="nav__folder">
-      <a href="javascript:;">
-        <svg role="presentation"><use xlink:href="#icon-folder" /></svg> Extra long folder name
+    <li ng-repeat="folder in account.folders" ng-if="!folder.wellknown" class="nav__folder" ng-class="{'nav__folder--open': state.nav.currentFolder === folder}">
+      <a href="javascript:;" wo-touch="openFolder(folder)">
+        <svg role="presentation"><use xlink:href="#icon-folder" /></svg>
+        {{folder.name}}
+        <span ng-show="folder.count > 0" class="nav__counter">{{folder.count}}</span>
       </a>
     </li>
-    <li class="nav__folder">
-      <a href="javascript:;">
-        <svg role="presentation"><use xlink:href="#icon-folder" /></svg> Travel
-      </a>
-    </li>
-    <li class="nav__folder">
-      <a href="javascript:;">
-        <svg role="presentation"><use xlink:href="#icon-folder" /></svg> Bank
-      </a>
-    </li>
-  </ul>
+  </ul><!--/nav__folders-->
 
   <ul class="nav__secondary">
     <li>
-      <a href="javascript:;" wo-touch="state.account.toggle(true); $event.preventDefault()">
+      <a href="javascript:;" wo-touch="state.account.toggle(true)">
         <svg role="presentation"><use xlink:href="#icon-account" /></svg> Account
       </a>
     </li>
     <li>
-      <a href="javascript:;" wo-touch="state.contacts.toggle(true); $event.preventDefault()">
+      <a href="javascript:;" wo-touch="state.contacts.toggle(true)">
         <svg role="presentation"><use xlink:href="#icon-contact" /></svg> Contacts
       </a>
     </li>
     <li>
-      <a href="javascript:;" wo-touch="state.privateKeyUpload.toggle(true); $event.preventDefault()">
+      <a href="javascript:;" wo-touch="state.privateKeyUpload.toggle(true)">
         <svg role="presentation"><use xlink:href="#icon-key" /></svg> Key sync (experimental)
       </a>
     </li>
     <li>
-      <a href="javascript:;" wo-touch="state.writer.reportBug(); $event.preventDefault()">
+      <a href="javascript:;" wo-touch="state.writer.reportBug()">
         <svg role="presentation"><use xlink:href="#icon-bug" /></svg> Report a bug
       </a>
     </li>
     <li>
-      <a href="javascript:;" wo-touch="state.about.toggle(true); $event.preventDefault()">
+      <a href="javascript:;" wo-touch="state.about.toggle(true)">
         <svg role="presentation"><use xlink:href="#icon-about" /></svg> About
       </a>
     </li>
-  </ul>
+    <li>
+      <a href="javascript:;" wo-touch="logout()">
+        <svg role="presentation"><use xlink:href="#icon-account" /></svg> Logout
+      </a>
+    </li>
+  </ul><!--/nav__secondary-->
 
   <footer ng-class="{syncing: account.loggingIn || account.busy || searching}">
     <span class="spinner"></span>
@@ -90,33 +76,4 @@
       {{lastUpdateLbl}} {{lastUpdate | date:'shortTime'}}
     </span>
   </footer>
-</nav>
-
-<!--<div class="nav">
-  <header>
-    <h1>WHITEOUT<span>.IO</span></h1>
-  </header>
-
-  <ul class="nav-primary">
-    <li ng-repeat="folder in account.folders" ng-switch="folder.count !== undefined && folder.count > 0">
-      <a href="#" wo-touch="openFolder(folder); $event.preventDefault()">
-        {{folder.type}}
-        <span class="label-wrapper" ng-switch-when="true">
-          <span class="label label-light">{{folder.count}}</span>
-        </span>
-      </a>
-    </li>
-  </ul>
-
-  <ul class="nav-secondary">
-    <li><a href="#" wo-touch="state.account.toggle(true); $event.preventDefault()">Account</a></li>
-    <li><a href="#" wo-touch="state.contacts.toggle(true); $event.preventDefault()">Contacts</a></li>
-    <li><a href="#" wo-touch="state.privateKeyUpload.toggle(true); $event.preventDefault()">Key sync (experimental)</a></li>
-    <li><a href="#" wo-touch="state.writer.reportBug(); $event.preventDefault()">Report a bug</a></li>
-    <li><a href="#" wo-touch="state.about.toggle(true); $event.preventDefault()">About</a></li>
-  </ul>
-
-  <footer>
-    {{lastUpdateLbl}} {{lastUpdate | date:'shortTime'}}
-  </footer>
-</div>-->
\ No newline at end of file
+</nav>
\ No newline at end of file
diff --git a/src/tpl/navigation.html b/src/tpl/navigation.html
deleted file mode 100644
index 9cb1198..0000000
--- a/src/tpl/navigation.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<div class="content">
-  <header>
-    <h1>WHITEOUT<span>.IO</span></h1>
-  </header>
-
-  <ul class="nav-primary">
-    <li ng-repeat="folder in account.folders" ng-switch="folder.count !== undefined && folder.count > 0">
-      <a href="#" wo-touch="openFolder(folder); $event.preventDefault()">
-        {{folder.wellknown? folder.type : folder.name}}
-        <span class="label-wrapper" ng-switch-when="true">
-          <span class="label label-light">{{folder.count}}</span>
-        </span>
-      </a>
-    </li>
-  </ul>
-
-  <ul class="nav-secondary">
-    <li><a href="#" wo-touch="state.account.toggle(true); $event.preventDefault()">Account</a></li>
-    <li><a href="#" wo-touch="state.contacts.toggle(true); $event.preventDefault()">Contacts</a></li>
-    <li><a href="#" wo-touch="state.privateKeyUpload.toggle(true); $event.preventDefault()">Key sync (experimental)</a></li>
-    <li><a href="#" wo-touch="state.writer.reportBug(); $event.preventDefault()">Report a bug</a></li>
-    <li><a href="#" wo-touch="state.about.toggle(true); $event.preventDefault()">About</a></li>
-    <li><a href="#" wo-touch="logout(); $event.preventDefault()">Logout</a></li>
-  </ul>
-
-  <footer>
-    {{lastUpdateLbl}} {{lastUpdate | date:'shortTime'}}
-  </footer>
-</div>
\ No newline at end of file