diff --git a/client/js/components/hyperdrive/client.js b/client/js/components/hyperdrive/client.js
index 6035781c..486c908c 100644
--- a/client/js/components/hyperdrive/client.js
+++ b/client/js/components/hyperdrive/client.js
@@ -1,6 +1,20 @@
 var yofs = require('yo-fs')
 
-module.exports = function ui (root, entries, onclick) {
-  var tree = yofs(root, entries, onclick)
+module.exports = function ui (root, entries, opts, onclick) {
+  var lookup = {}
+  for (var i in entries) {
+    var entry = entries[i]
+    lookup[entry.name] = entry
+    var dir = path.dirname(entry.name)
+    if (!lookup[dir]) {
+      lookup[dir] = {
+        type: 'directory',
+        name: dir,
+        length: 0
+      }
+    }
+  }
+  var vals = Object.keys(lookup).map(key => lookup[key])
+  var tree = yofs(root, vals, opts, onclick)
   return tree.widget
 }
diff --git a/client/js/components/hyperdrive/index.js b/client/js/components/hyperdrive/index.js
index e33d8896..f8ef05e2 100644
--- a/client/js/components/hyperdrive/index.js
+++ b/client/js/components/hyperdrive/index.js
@@ -23,6 +23,7 @@ module.exports = function (state, emit) {
       }
     }
   }
+  
   emit('archive:update', {updatedAt: updated})
   var vals = Object.keys(lookup).map(key => lookup[key])
   var onclick = (ev, entry) => {
@@ -35,6 +36,10 @@ module.exports = function (state, emit) {
       return false
     }
   }
-
-  return hyperdriveRenderer(state.archive.root, vals, onclick)
+  
+  var opts = {
+    offset: state.archive.offset,
+    limit: state.archive.limit
+  }
+  return hyperdriveRenderer(state.archive.root, state.archive.entries, opts, onclick)
 }