diff --git a/tools/upend_js/index.ts b/tools/upend_js/index.ts
index 5cd81ab..a70e9a9 100644
--- a/tools/upend_js/index.ts
+++ b/tools/upend_js/index.ts
@@ -27,20 +27,28 @@ export class UpListing {
 
   public get objects(): UpObject[] {
     const allEntities = new Set(this.entries.map((e) => e.entity));
-    return Array.from(allEntities).map((entity) => new UpObject(entity));
+    return Array.from(allEntities).map(
+      (entity) => new UpObject(entity, this.entries)
+    );
   }
 }
 
 export class UpObject {
   public readonly address;
+  private entries: UpEntry[];
 
-  constructor(address: string) {
+  constructor(address: string, entries?: UpEntry[]) {
     this.address = address;
+    this.entries = entries || [];
   }
 
-  public attr(entries: UpEntry[]) {
+  public bind(entries: UpEntry[]) {
+    this.entries = entries;
+  }
+
+  public get attr() {
     const result = {} as { [key: string]: UpEntry[] };
-    entries
+    this.entries
       .filter((e) => e.entity == this.address)
       .forEach((entry) => {
         if (!result[entry.attribute]) {
@@ -53,10 +61,14 @@ export class UpObject {
     return result;
   }
 
-  public asDict(entries: UpEntry[]) {
+  public get(attr: string) {
+    return this.attr[attr] ? this.attr[attr][0].value.c : undefined;
+  }
+
+  public asDict() {
     return {
       address: this.address,
-      attributes: this.attr(entries),
+      attributes: this.attr,
     };
   }
 }
diff --git a/ui/src/App.svelte b/ui/src/App.svelte
index 25f928d..5c0b1ea 100644
--- a/ui/src/App.svelte
+++ b/ui/src/App.svelte
@@ -7,6 +7,7 @@
   import "@shoelace-style/shoelace/dist/components/input/input.js";
   import "@shoelace-style/shoelace/dist/components/icon-button/icon-button.js";
   import "@shoelace-style/shoelace/dist/components/spinner/spinner.js";
+  import "@shoelace-style/shoelace/dist/components/card/card.js";
   import Browse from "./views/Browse.svelte";
 
   setBasePath("/vendor/shoelace");
diff --git a/ui/src/views/Home.svelte b/ui/src/views/Home.svelte
index 65080c0..70dc50b 100644
--- a/ui/src/views/Home.svelte
+++ b/ui/src/views/Home.svelte
@@ -2,7 +2,8 @@
   import { formatRelative, parseISO } from "date-fns";
 
   import { Link } from "svelte-navigator";
-  import type { IFile, VaultInfo } from "upend/types";
+  import { UpListing } from "upend";
+  import type { IFile, ListingResult, VaultInfo } from "upend/types";
 
   let infoData: VaultInfo | undefined;
 
@@ -10,6 +11,14 @@
     infoData = await response.json();
   });
 
+  const roots = (async () => {
+    const response = await fetch("/api/hier_roots");
+    const data = (await response.json()) as ListingResult;
+    const listing = new UpListing(data);
+    console.log(listing.objects.map((obj) => obj.attr));
+    return listing.objects.filter((obj) => Boolean(obj.attr["LBL"]));
+  })();
+
   const latestFiles = (async () => {
     const response = await fetch("/api/files/latest");
     return (await response.json()) as IFile[];
@@ -26,6 +35,30 @@
     {infoData?.name || "UpEnd"}
   </h1>
 
+  <section class="roots">
+    <h2>Roots</h2>
+    {#await roots}
+      <sl-spinner style="font-size: 3rem; --track-width: 6px" />
+    {:then data}
+      <ul>
+        {#each data as root}
+          <li>
+            <sl-card class="root">
+              <Link to="/browse/{root.address}">
+                <h1>{root.get("LBL")}</h1>
+              </Link>
+              <div slot="footer">
+                {root.attr["HAS"]?.length || 0} children
+              </div>
+            </sl-card>
+          </li>
+        {:else}
+          <li>No roots :(</li>
+        {/each}
+      </ul>
+    {/await}
+  </section>
+
   <section class="latest">
     <h2>Most recently added files</h2>
     {#await latestFiles}
@@ -69,4 +102,20 @@
     left: 50%;
     transform: translateX(-50%);
   }
+
+  .roots {
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0 2rem;
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+      gap: 2rem;
+    }
+
+    .root {
+      width: 100%;
+      text-align: center;
+    }
+  }
 </style>
diff --git a/ui/yarn.lock b/ui/yarn.lock
index a623d62..7bd9ab7 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -3301,8 +3301,8 @@ __metadata:
 
 "upend@file:../tools/upend_js::locator=svelte-app%40workspace%3A.":
   version: 0.0.1
-  resolution: "upend@file:../tools/upend_js#../tools/upend_js::hash=33980e&locator=svelte-app%40workspace%3A."
-  checksum: 6370b50d9a8c407e5807f62020fa045f0df1ad727b12d6273fe00cf08b47cc75da6d89493538b084ab5fddd66d3e735fcda33e750fe729910e6ee5be6d66d14e
+  resolution: "upend@file:../tools/upend_js#../tools/upend_js::hash=0110ea&locator=svelte-app%40workspace%3A."
+  checksum: 52a706bb4738034b16ec95a0e569fc38597177fadc0a2b327ac59889b19b06d032554e0e4f47b978416f65ac96341ad5c4b6bf2c56a59d0bdafc4bcfabf1681b
   languageName: node
   linkType: hard