diff --git a/hledger-api/client/accounts/view.html b/hledger-api/client/accounts/view.html
index a8fdcba56..174bbd955 100644
--- a/hledger-api/client/accounts/view.html
+++ b/hledger-api/client/accounts/view.html
@@ -1,11 +1,14 @@
 <div ng-controller="AccountsController as accountsList">
   <h2>Accounts</h2>
-  Search: <input ng-model="query"/>
-  <ul class="unstyled">
-    {{accountsList.accounts}}
-    <li ng-repeat="account in accounts | filter: query">
-      <a href="#/accounts/{{account.name}}/journal">{{account.name}}</a>
-      <span class="balance">{{account.balance}}</span>
-    </li>
+  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/client/hledger-client.css b/hledger-api/client/hledger-client.css
new file mode 100644
index 000000000..046e00407
--- /dev/null
+++ b/hledger-api/client/hledger-client.css
@@ -0,0 +1,7 @@
+ul.accounts, ul.accounts ul {
+  list-style-type: none;
+  padding-left: 0;
+}
+ul.accounts ul {
+  margin-left: 15px;
+}
diff --git a/hledger-api/client/index.html b/hledger-api/client/index.html
index b1dc7c308..55c484763 100644
--- a/hledger-api/client/index.html
+++ b/hledger-api/client/index.html
@@ -11,6 +11,7 @@
     <script src="libraries/jquery-2.2.0.min.js"></script>
     <script src="hledger-client.js"></script>
     <link type="text/css" rel="stylesheet" href="libraries/bootstrap/css/bootstrap.css">
+    <link type="text/css" rel="stylesheet" href="hledger-client.css">
   </head>
   <body class="container">
     <nav class="navbar">
