diff --git a/hledger-api/static/accounts/index.html b/hledger-api/static/accounts/index.html
new file mode 100644
index 000000000..31800c0de
--- /dev/null
+++ b/hledger-api/static/accounts/index.html
@@ -0,0 +1 @@
+<div ui-view></div>
diff --git a/hledger-api/static/accounts/show.html b/hledger-api/static/accounts/show.html
new file mode 100644
index 000000000..90046ab99
--- /dev/null
+++ b/hledger-api/static/accounts/show.html
@@ -0,0 +1 @@
+{{account}}
diff --git a/hledger-api/static/accounts/sidebar.html b/hledger-api/static/accounts/sidebar.html
new file mode 100644
index 000000000..c03daf143
--- /dev/null
+++ b/hledger-api/static/accounts/sidebar.html
@@ -0,0 +1,21 @@
+<div ng-controller="AccountsController as accountsList">
+  <h2>Accounts</h2>
+  <div class="form-group">
+    <label>Search: <input ng-model="account_name"/></label>
+  </div>
+  <ul class="unstyled accounts">
+    <li ng-repeat="account in accounts | filter: account_name" ng-include="'account.html'"></li>
+  </ul>
+  <script type="text/ng-template" id="account.html">
+    <a href="#/accounts/{{account.aname}}">{{ account.aname|accountNameNode }}</a>
+    <div class="balances">
+      <div class="balance" ng-repeat="balance in account.aibalance">
+        <span class="quantity">{{balance.aquantity}}</span>
+        <span class="commodity commodity-side-{{balance.astyle.ascommodityside}}">{{balance.acommodity}}</span>
+      </div>
+    </div>
+    <ul ng-if="account.children">
+      <li ng-repeat="account in account.children | filter: account_name" ng-include="'account.html'"></li>
+    </ul>
+  </script
+</div>
diff --git a/hledger-api/static/accounts/view.html b/hledger-api/static/accounts/view.html
deleted file mode 100644
index 174bbd955..000000000
--- a/hledger-api/static/accounts/view.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<div ng-controller="AccountsController as accountsList">
-  <h2>Accounts</h2>
-  Search: <input ng-model="account_name"/>
-  <ul class="unstyled accounts">
-    <li ng-repeat="account in accounts | filter: account_name" ng-include="'account.html'"></li>
-  </ul>
-  <script type="text/ng-template" id="account.html">
-    <a href="#/accounts/{{account.name}}/journal">{{account.name}}</a>
-    <span class="balance">{{account.balance}}</span>
-    <ul ng-if="account.children">
-      <li ng-repeat="account in account.children | filter: account_name" ng-include="'account.html'"></li>
-    </ul>
-  </script>
-</div>
diff --git a/hledger-api/static/hledger-client.js b/hledger-api/static/hledger-client.js
index 1d2fe5f59..9b7898614 100644
--- a/hledger-api/static/hledger-client.js
+++ b/hledger-api/static/hledger-client.js
@@ -2,6 +2,7 @@ var hledger = angular.module('hledger', [
   'ui.router',
   'ngResource'
 ])
+hledger.api_root = '/api/v1';
 function listToTree(list, id_field, parent_field) {
   children = function(list, parent_id) {
     return $.grep(list,
@@ -19,10 +20,23 @@ function listToTree(list, id_field, parent_field) {
 hledger.config(function($stateProvider, $urlRouterProvider) {
   //$urlRouterProvider.otherwise("/");
   $stateProvider
+    .state('dashboard', {
+      url: ""
+    })
     .state('accounts', {
+      abstract: true,
       url: "/accounts",
-      templateUrl: "accounts/index.html",
-      controller: 'AccountsController'
+      templateUrl: "accounts/index.html"
+    })
+    .state('accounts.show', {
+      url: "/:id",
+      templateUrl: 'accounts/show.html',
+      resolve: {
+        Account: 'Account',
+        account: function(Account, $stateParams) {
+          return Account.get($stateParams);
+        }
+      }
     })
     .state('help', {
       url: "/help",
@@ -31,7 +45,7 @@ hledger.config(function($stateProvider, $urlRouterProvider) {
 });
 
 hledger.factory('Journal', function($resource) {
-  return($resource("/journals/:id"));
+  return($resource(hledger.api_root + "/journals/:id"));
 });
 
 hledger.controller("JournalController", function($scope, Journal) {
@@ -41,7 +55,7 @@ hledger.controller("JournalController", function($scope, Journal) {
 });
 
 hledger.factory('Account', function($resource) {
-  return($resource("/accounts/:id"));
+  return($resource(hledger.api_root + "/accounts/:id"));
 });
 
 hledger.controller("AccountsController", function($scope, Account) {
diff --git a/hledger-api/static/index.html b/hledger-api/static/index.html
index dccd386c2..5a7aa51ca 100644
--- a/hledger-api/static/index.html
+++ b/hledger-api/static/index.html
@@ -16,12 +16,13 @@
   <body class="container">
     <nav class="navbar">
       <ul class="nav navbar-nav">
-        <li><a ui-sref="">Dashboard</a></li>
+        <li><a ui-sref="dashboard">Dashboard</a></li>
         <li><a ui-sref="help">Help</a></li>
       </ul>
     </nav>
-    <div ng-include src="'/accounts/index.html'" class="col-xs-6 col-md-3"></div>
+    <div ng-include src="'/accounts/sidebar.html'" class="col-xs-6 col-md-3"></div>
     <div ui-view class="col-xs-12 col-md-8"></div>
+    <div class="clear"></div>
     <footer>hleder-api-client</footer>
   </body>
 </html>