diff --git a/elements/dat-import.js b/elements/dat-import.js
index 97af3c10..c2be850c 100644
--- a/elements/dat-import.js
+++ b/elements/dat-import.js
@@ -1,6 +1,6 @@
 'use strict'
 
-const microcomponent = require('microcomponent')
+const Nanocomponent = require('nanocomponent')
 const html = require('choo/html')
 const assert = require('assert')
 const css = require('sheetify')
@@ -60,17 +60,18 @@ const prefix = css`
 `
 
 function DatImportElement () {
-  var component = microcomponent({ name: 'dat-import' })
-  component.on('render', render)
-  component.on('update', update)
-  return component
+  if (!(this instanceof DatImportElement)) return new DatImportElement()
+  Nanocomponent.call(this)
+}
+
+DatImportElement.prototype = Object.create(Nanocomponent.prototype)
 
-  function render () {
-    const onsubmit = this.props.onsubmit
+DatImportElement.prototype.createElement = function (props) {
+  const onsubmit = props.onsubmit
 
-    assert.equal(typeof onsubmit, 'function', 'dat-import: onsubmit should be type function')
+  assert.equal(typeof onsubmit, 'function', 'dat-import: onsubmit should be type function')
 
-    return html`
+  return html`
       <label for="dat-import" class="relative dib pa0 b--none ${prefix}">
         <input name="dat-import"
           type="text"
@@ -80,16 +81,14 @@ function DatImportElement () {
         ${icon('link', { class: 'absolute top-0 bottom-0 left-0' })}
       </label>
     `
-
-    function onKeyDown (e) {
-      const value = e.target.value
-      if (e.key !== 'Enter' || !value) return
-      e.target.value = ''
-      onsubmit(value)
-    }
+  function onKeyDown (e) {
+    const value = e.target.value
+    if (e.key !== 'Enter' || !value) return
+    e.target.value = ''
+    onsubmit(value)
   }
+}
 
-  function update () {
-    return false
-  }
+DatImportElement.prototype.update = function (props) {
+  return false
 }
diff --git a/elements/download.js b/elements/download.js
index 9505740b..8606c59b 100644
--- a/elements/download.js
+++ b/elements/download.js
@@ -1,6 +1,6 @@
 'use strict'
 
-var microcomponent = require('microcomponent')
+var Nanocomponent = require('nanocomponent')
 var dialog = require('electron').remote.dialog
 var bytes = require('prettier-bytes')
 var FileList = require('./file-list')
@@ -10,6 +10,8 @@ var icon = require('./icon')
 var button = require('./button')
 var os = require('os')
 
+module.exports = Download
+
 var detailHeader = css`
   :host {
     height: 4rem;
@@ -33,57 +35,56 @@ var label = css`
   }
 `
 
-module.exports = function () {
-  var component = microcomponent({
-    name: 'download',
-    state: {
-      fileList: FileList()
-    }
-  })
-  component.on('render', render)
-  component.on('update', update)
-  return component
+function Download () {
+  if (!(this instanceof Download)) return new Download()
+  Nanocomponent.call(this)
+  this.state = {
+    fileList: FileList()
+  }
+}
 
-  function render () {
-    var { key, oncancel, err, dat, ondownload, onupdate } = this.props
-    var { fileList } = this.state
-    var location = this.state.location || `${os.homedir()}/Downloads`
+Download.prototype = Object.create(Nanocomponent.prototype)
 
-    var title = dat
+Download.prototype.createElement = function (props) {
+  var { key, oncancel, err, dat, ondownload, onupdate } = props
+  var { fileList } = this.state
+  var location = this.state.location || `${os.homedir()}/Downloads`
+
+  var title = dat
       ? dat.metadata
         ? dat.metadata.title
         : key
       : 'Fetching metadata …'
-    var author = dat
+  var author = dat
       ? dat.metadata
         ? dat.metadata.author
         : 'N/A'
       : '…'
-    var description = dat
+  var description = dat
       ? dat.metadata
         ? dat.metadata.description
         : 'N/A'
       : '…'
-    var size = dat
+  var size = dat
       ? dat.archive.content
         ? bytes(dat.archive.content.byteLength)
         : 'N/A'
       : '…'
-    var peers = dat
+  var peers = dat
       ? dat.network.connected
       : '…'
 
-    function onChangeLocation () {
-      var files = dialog.showOpenDialog({
-        properties: ['openDirectory'],
-        defaultPath: location
-      })
-      if (!files || !files.length) return
-      component.state.location = files[0]
-      onupdate()
-    }
+  function onChangeLocation () {
+    var files = dialog.showOpenDialog({
+      properties: ['openDirectory'],
+      defaultPath: location
+    })
+    if (!files || !files.length) return
+    this.state.location = files[0]
+    onupdate()
+  }
 
-    return html`
+  return html`
       <main class="flex flex-column">
       ${err
         ? html`
@@ -177,9 +178,9 @@ module.exports = function () {
         </footer>
       </main>
     `
-  }
+}
 
-  function update (props) {
-    return true
-  }
+Download.prototype.update = function (props) {
+  return true
 }
+
diff --git a/elements/file-list.js b/elements/file-list.js
index 2dd3aa64..0a1b7fe6 100644
--- a/elements/file-list.js
+++ b/elements/file-list.js
@@ -1,9 +1,11 @@
-var microcomponent = require('microcomponent')
+var Nanocomponent = require('nanocomponent')
 var bytes = require('prettier-bytes')
 var mirror = require('mirror-folder')
 var html = require('choo/html')
 var css = require('sheetify')
 
+module.exports = FileList
+
 var fileListContainer = css`
   :host {
     min-height: 5rem;
@@ -21,51 +23,53 @@ var fileList = css`
   }
 `
 
-module.exports = function () {
-  var component = microcomponent({
-    name: 'file-list',
-    state: {
-      update: true
-    }
-  })
-  component.on('render', render)
-  component.on('update', update)
-  return component
+function FileList () {
+  if (!(this instanceof FileList)) return new FileList()
+  Nanocomponent.call(this)
+  this.state = {
+    update: true
+  }
+  this.props = null
+}
 
-  function render () {
-    var { dat, onupdate } = this.props
+FileList.prototype = Object.create(Nanocomponent.prototype)
 
-    if (dat) {
-      if (dat.files) {
-        this.state.update = false
-      } else {
-        if (dat.archive) {
-          dat.files = []
-          if (dat.archive.content) walk()
-          else dat.archive.on('content', walk)
-        }
+FileList.prototype.createElement = function (props) {
+  var self = this
+  this.props = props
+  var { dat, onupdate } = this.props
+
+  if (dat) {
+    if (dat.files) {
+      this.state.update = false
+    } else {
+      if (dat.archive) {
+        dat.files = []
+        if (dat.archive.content) walk()
+        else dat.archive.on('content', walk)
       }
     }
+  }
 
-    function walk () {
-      var fs = { name: '/', fs: dat.archive }
-      var progress = mirror(fs, '/', { dryRun: true })
-      progress.on('put', function (file) {
-        file.name = file.name.slice(1)
-        if (file.name === '') return
-        dat.files.push({
-          path: file.name,
-          stat: file.stat
-        })
-        dat.files.sort(function (a, b) {
-          return a.path.localeCompare(b.path)
-        })
-        component.state.update = true
-        onupdate()
+  function walk () {
+    var fs = { name: '/', fs: dat.archive }
+    var progress = mirror(fs, '/', { dryRun: true })
+    progress.on('put', function (file) {
+      file.name = file.name.slice(1)
+      if (file.name === '') return
+      dat.files.push({
+        path: file.name,
+        stat: file.stat
       })
-    }
+      dat.files.sort(function (a, b) {
+        return a.path.localeCompare(b.path)
+      })
+      self.state.update = true
+      onupdate()
+    })
+  }
 
-    return html`
+  return html`
       <div class="flex-auto bg-white mb2 mw6 ${fileListContainer}">
         ${dat && dat.files && dat.files.length
           ? html`
@@ -87,7 +91,7 @@ module.exports = function () {
               })}
             </table>
             `
-          : html`
+            : html`
             <div class="f7 f6-l pa2">
               N/A
             </div>
@@ -95,9 +99,8 @@ module.exports = function () {
         }
       </div>
     `
-  }
+}
 
-  function update (props) {
-    return props.dat !== this.props.dat || this.state.update
-  }
+FileList.prototype.update = function (props) {
+  return props.dat !== this.props.dat || this.state.update
 }
diff --git a/elements/header.js b/elements/header.js
index 91c6888e..16404194 100644
--- a/elements/header.js
+++ b/elements/header.js
@@ -1,6 +1,6 @@
 'use strict'
 
-const microcomponent = require('microcomponent')
+const Nanocomponent = require('nanocomponent')
 const html = require('choo/html')
 const assert = require('assert')
 const css = require('sheetify')
@@ -19,6 +19,9 @@ const header = css`
     background-color: var(--color-neutral);
     color: var(--color-white);
     -webkit-app-region: drag;
+    z-index: 1000;
+    position: relative;
+    width: 100%;
   }
 `
 
@@ -35,68 +38,69 @@ const menuButtonIcon = css`
 `
 
 function HeaderElement () {
-  var importButton = DatImport()
-  var component = microcomponent({ name: 'header' })
-  component.on('render', render)
-  component.on('update', update)
-  return component
-
-  function render () {
-    var { isReady, onimport, oncreate, onreport } = this.props
-    var { showMenu, willShowMenu } = this.state
-
-    if (typeof willShowMenu === 'boolean') {
-      showMenu = this.state.showMenu = willShowMenu
-      this.state.willShowMenu = null
-    }
+  if (!(this instanceof HeaderElement)) return new HeaderElement()
+  Nanocomponent.call(this)
+  this.props = null
+  this.state = {}
+}
 
-    assert.equal(typeof isReady, 'boolean', 'elements/header: isReady should be type boolean')
-    assert.equal(typeof onimport, 'function', 'elements/header: onimport should be type function')
-    assert.equal(typeof oncreate, 'function', 'elements/header: oncreate should be type function')
+HeaderElement.prototype = Object.create(Nanocomponent.prototype)
 
-    if (!isReady) {
-      return html`<header class="${header}"></header>`
-    }
+HeaderElement.prototype.createElement = function (props) {
+  this.props = props
+  var { isReady, onimport, oncreate, onreport, onupdate } = this.props
+  var { showMenu } = this.state
+  var importButton = DatImport()
 
-    var createButton = button.header('Share Folder', {
-      id: 'create-new-dat',
-      icon: icon('create-new-dat', { class: shareButtonIcon }),
-      class: 'ml2 ml3-l b--transparent v-mid color-neutral-30 hover-color-white f7 f6-l',
-      onclick: oncreate
-    })
-
-    var loginButton = button.header('Log In', {
-      class: 'ml3 v-mid color-neutral-30 hover-color-white f7 f6-l dn'
-    })
-
-    var menuButton = button.icon('Open Menu', {
-      icon: icon('menu', { class: menuButtonIcon }),
-      class: 'ml3 v-mid color-neutral-20 hover-color-white pointer',
-      onclick: toggle
-    })
-
-    function toggle () {
-      if (component.state.showMenu) hide()
-      else show()
-    }
+  assert.equal(typeof isReady, 'boolean', 'elements/header: isReady should be type boolean')
+  assert.equal(typeof onimport, 'function', 'elements/header: onimport should be type function')
+  assert.equal(typeof oncreate, 'function', 'elements/header: oncreate should be type function')
 
-    function show () {
-      document.body.addEventListener('click', clickedOutside)
-      component.state.willShowMenu = true
-      component.render(component.props)
-    }
+  if (!isReady) {
+    return html`<header class="${header}"></header>`
+  }
 
-    function hide () {
-      document.body.removeEventListener('click', clickedOutside)
-      component.state.willShowMenu = false
-      component.render(component.props)
+  var createButton = button.header('Share Folder', {
+    id: 'create-new-dat',
+    icon: icon('create-new-dat', { class: shareButtonIcon }),
+    class: 'ml2 ml3-l b--transparent v-mid color-neutral-30 hover-color-white f7 f6-l',
+    onclick: oncreate
+  })
+
+  var loginButton = button.header('Log In', {
+    class: 'ml3 v-mid color-neutral-30 hover-color-white f7 f6-l dn'
+  })
+
+  var menuButton = button.icon('Open Menu', {
+    icon: icon('menu', { class: menuButtonIcon }),
+    class: 'ml3 v-mid color-neutral-20 hover-color-white pointer',
+    onclick: function () {
+      toggle(true)
+      return false
     }
-
-    function clickedOutside (e) {
-      if (!component._element.contains(e.target)) hide()
+  })
+
+  var self = this
+  function toggle (newState) {
+    if (self.state.showMenu !== newState) {
+      self.state.showMenu = newState
+      setTimeout(function () {
+        if (newState) {
+          document.body.addEventListener('click', clickedOutside)
+        } else {
+          document.body.removeEventListener('click', clickedOutside)
+        }
+      }, 1)
+      self.state.update = true
+      onupdate()
     }
+  }
 
-    return html`
+  function clickedOutside (e) {
+    if (!self.element.contains(e.target)) toggle(false)
+  }
+
+  return html`
       <header class="${header}">
         <div class="fr relative">
           ${importButton.render({
@@ -123,10 +127,12 @@ function HeaderElement () {
         </div>
       </header>
     `
-  }
+}
 
-  function update (props) {
-    return props.isReady !== this.props.isReady ||
-      typeof this.state.willShowMenu === 'boolean'
+HeaderElement.prototype.update = function (props) {
+  if (this.state.update) {
+    this.state.update = false
+    return true
   }
+  return props.isReady !== this.props.isReady
 }
diff --git a/elements/inspect.js b/elements/inspect.js
index 6ede7c48..aaeb6e06 100644
--- a/elements/inspect.js
+++ b/elements/inspect.js
@@ -1,6 +1,6 @@
 'use strict'
 
-var microcomponent = require('microcomponent')
+var Nanocomponent = require('nanocomponent')
 var toStr = require('dat-encoding').toStr
 var bytes = require('prettier-bytes')
 var FileList = require('./file-list')
@@ -9,6 +9,8 @@ var html = require('choo/html')
 var css = require('sheetify')
 var icon = require('./icon')
 
+module.exports = Inspect
+
 var detailHeader = css`
   :host {
     height: 4rem;
@@ -32,46 +34,45 @@ var label = css`
   }
 `
 
-module.exports = function () {
-  var component = microcomponent({
-    name: 'inspect',
-    state: {
-      fileList: FileList()
-    }
-  })
-  component.on('render', render)
-  component.on('update', update)
-  return component
+function Inspect () {
+  if (!(this instanceof Inspect)) return new Inspect()
+  Nanocomponent.call(this)
+  this.state = {
+    fileList: FileList()
+  }
+}
+
+Inspect.prototype = Object.create(Nanocomponent.prototype)
 
-  function render () {
-    var { oncancel, onupdate, dat } = this.props
-    var { fileList } = this.state
+Inspect.prototype.createElement = function (props) {
+  var { oncancel, onupdate, dat } = props
+  var { fileList } = this.state
 
-    var title = dat
+  var title = dat
       ? dat.metadata
         ? dat.metadata.title
         : dat.key
       : 'Fetching metadata …'
-    var author = dat
+  var author = dat
       ? dat.metadata
         ? dat.metadata.author
         : 'N/A'
       : '…'
-    var description = dat
+  var description = dat
       ? dat.metadata && dat.metadata.description
         ? dat.metadata.description
         : 'N/A'
       : '…'
-    var size = dat
+  var size = dat
       ? dat.archive.content
         ? bytes(dat.archive.content.byteLength)
         : 'N/A'
       : '…'
-    var peers = dat
+  var peers = (dat && dat.network)
       ? dat.network.connected
       : '…'
 
-    return html`
+  return html`
       <main class="flex flex-column">
         <div class="flex flex-column flex-auto">
           <header class="flex items-center ${detailHeader}">
@@ -150,9 +151,9 @@ module.exports = function () {
         </footer>
       </main>
     `
-  }
+}
 
-  function update (props) {
-    return true
-  }
+Inspect.prototype.update = function (props) {
+  return true
 }
+
diff --git a/elements/intro.js b/elements/intro.js
index 45c5b31b..e5ebb6e3 100644
--- a/elements/intro.js
+++ b/elements/intro.js
@@ -1,6 +1,6 @@
 var html = require('choo/html')
 var css = require('sheetify')
-var microcomponent = require('microcomponent')
+var Nanocomponent = require('nanocomponent')
 
 var button = require('./button')
 
@@ -79,34 +79,34 @@ function dots (screen) {
 }
 
 function IntroScreen () {
-  var component = microcomponent({
-    name: 'intro',
-    state: {
-      screen: 0
-    }
-  })
-  component.on('render', render)
-  component.on('update', update)
-  component.on('load', load)
-  component.on('unload', unload)
-  return component
-
-  function next () {
-    component.state.screen++
-    component.state.nextScreen = true
-    component.props.onupdate()
+  if (!(this instanceof IntroScreen)) return new IntroScreen()
+  Nanocomponent.call(this)
+  this.state = {
+    screen: 0
   }
+  this.props = null
+}
 
-  function render () {
-    var { onOpenHomepage, onexit } = this.props
-    var screen = this.state.screen
+IntroScreen.prototype = Object.create(Nanocomponent.prototype)
 
-    function openHomepage (ev) {
-      ev.preventDefault()
-      onOpenHomepage()
-    }
+IntroScreen.prototype.createElement = function (props) {
+  this.props = props
+  var { onOpenHomepage, onexit } = this.props
+  var screen = this.state.screen
 
-    return html`
+  function openHomepage (ev) {
+    ev.preventDefault()
+    onOpenHomepage()
+  }
+
+  var self = this
+  function next () {
+    self.state.screen++
+    self.state.nextScreen = true
+    self.props.onupdate()
+  }
+
+  return html`
       <main class="${intro}">
         <img src="./assets/intro-${screen + 1}.svg" alt="" class="absolute ${image}">
         <div class="${content}">
@@ -142,38 +142,38 @@ function IntroScreen () {
         </div>
         ${screen === 0
           ? button.green('Get Started', { onclick: next, class: 'mt2 mb5 relative' })
-          : html`
+            : html`
             <div class="${footer}">
                 ${button('Skip Intro', { onclick: onexit })}
                 ${dots(screen)}
                 ${screen < 5
                   ? button.green('Next', { onclick: next })
-                  : button.green('Done', { onclick: onexit })}
+                    : button.green('Done', { onclick: onexit })}
               </div>
             `}
       </main>
     `
-  }
+}
 
-  function update () {
-    if (this.state.nextScreen) {
-      this.state.nextScreen = false
-      return true
-    }
-    return false
+IntroScreen.prototype.update = function (props) {
+  if (this.state.nextScreen) {
+    this.state.nextScreen = false
+    return true
   }
+  return false
+}
 
-  function load () {
-    window.addEventListener('keydown', onkeydown)
-  }
+IntroScreen.prototype.load = function () {
+  window.addEventListener('keydown', this.onkeydown)
+}
 
-  function unload () {
-    window.removeEventListener('keydown', onkeydown)
-  }
+IntroScreen.prototype.unload = function () {
+  window.removeEventListener('keydown', this.onkeydown)
+}
 
-  function onkeydown (ev) {
-    if (ev.code !== 'Escape') return
-    window.removeEventListener('keydown', onkeydown)
-    component.props.onexit()
-  }
+IntroScreen.prototype.onkeydown = function (ev) {
+  if (ev.code !== 'Escape') return
+  window.removeEventListener('keydown', this.onkeydown)
+  this.props.onexit()
 }
+
diff --git a/elements/sprite.js b/elements/sprite.js
index d971c46a..68382798 100644
--- a/elements/sprite.js
+++ b/elements/sprite.js
@@ -1,21 +1,27 @@
-const microcomponent = require('microcomponent')
+var html = require('choo/html')
+const Nanocomponent = require('nanocomponent')
 const datIcons = require('dat-icons/raw')
 
-module.exports = svgSprite
+module.exports = SvgSprite
 
-function svgSprite () {
-  const component = microcomponent({ name: 'svg-sprite' })
-  component.on('render', render)
-  component.on('update', update)
-  return component
+function SvgSprite () {
+  if (!(this instanceof SvgSprite)) return new SvgSprite()
+  Nanocomponent.call(this)
+}
+
+SvgSprite.prototype = Object.create(Nanocomponent.prototype)
 
-  function render () {
-    const _el = document.createElement('div')
-    _el.innerHTML = datIcons()
-    return _el.childNodes[0]
-  }
+SvgSprite.prototype.createElement = function () {
+  const _el = document.createElement('div')
+  _el.innerHTML = datIcons()
+  return html`
+  <div>
+    ${_el.childNodes[0]}
+  </div>
+  `
+}
 
-  function update () {
-    return false
-  }
+SvgSprite.prototype.update = function () {
+  return false
 }
+
diff --git a/elements/status-bar.js b/elements/status-bar.js
index c666479e..223eabc7 100644
--- a/elements/status-bar.js
+++ b/elements/status-bar.js
@@ -1,10 +1,12 @@
 'use strict'
 
-const microcomponent = require('microcomponent')
+const Nanocomponent = require('nanocomponent')
 const bytes = require('prettier-bytes')
 const html = require('choo/html')
 const css = require('sheetify')
 
+module.exports = StatusBar
+
 const style = css`
   :host {
     position: absolute;
@@ -16,21 +18,23 @@ const style = css`
   }
 `
 
-module.exports = function () {
-  const component = microcomponent({
-    name: 'status bar',
-    pure: true
-  })
-  component.on('render', render)
-  return component
+function StatusBar () {
+  if (!(this instanceof StatusBar)) return new StatusBar()
+  Nanocomponent.call(this)
+}
+
+StatusBar.prototype = Object.create(Nanocomponent.prototype)
 
-  function render () {
-    const { up, down } = this.props
-    return html`
+StatusBar.prototype.createElement = function (props) {
+  const { up, down } = props
+  return html`
       <div id="status-bar" class=${style}>
         <span class="f7 mr3">Download: ${bytes(down)}/s</span>
         <span class="f7">Upload: ${bytes(up)}/s</span>
       </div>
     `
-  }
+}
+
+StatusBar.prototype.update = function () {
+  return
 }
diff --git a/elements/status.js b/elements/status.js
index ecd9f0c4..80771ed3 100644
--- a/elements/status.js
+++ b/elements/status.js
@@ -1,6 +1,7 @@
 const bytes = require('prettier-bytes')
 const html = require('choo/html')
 const css = require('sheetify')
+const { datState } = require('../lib/datInfo')
 
 const progressbar = css`
   :host {
@@ -82,15 +83,16 @@ const progressSubline = css`
 
 module.exports = function (dat, stats) {
   var progress = Math.floor((dat.progress || 0) * 100)
-  var progressbarLine = (stats.state === 'loading')
+  var state = datState(dat)
+  var progressbarLine = (state === 'loading')
     ? 'line-loading'
-    : (stats.state === 'paused' || stats.state === 'stale')
+    : (state === 'paused' || state === 'stale')
       ? 'line-paused'
       : 'line-complete'
   var netStats = dat.stats.network
 
   var progressText
-  switch (stats.state) {
+  switch (state) {
     case 'complete':
       progressText = `Complete. ↑ ${speed(netStats.uploadSpeed)}`
       break
diff --git a/elements/table-head.js b/elements/table-head.js
new file mode 100644
index 00000000..890a50bc
--- /dev/null
+++ b/elements/table-head.js
@@ -0,0 +1,31 @@
+'use strict'
+const Nanocomponent = require('nanocomponent')
+const html = require('choo/html')
+
+function TableHead () {
+  if (!(this instanceof TableHead)) return new TableHead()
+  Nanocomponent.call(this)
+}
+
+TableHead.prototype = Object.create(Nanocomponent.prototype)
+
+TableHead.prototype.createElement = function () {
+  return html`
+      <thead>
+        <tr>
+          <th class="cell-1"></th>
+          <th class="tl cell-2">Link</th>
+          <th class="tl cell-3">Status</th>
+          <th class="tl cell-4">Size</th>
+          <th class="tl cell-5">Peers</th>
+          <th class="cell-6"></th>
+        </tr>
+      </thead>
+    `
+}
+
+TableHead.prototype.update = function () {
+  return
+}
+
+module.exports = TableHead
diff --git a/elements/table-row.js b/elements/table-row.js
index 81fa7e9c..b0876a31 100644
--- a/elements/table-row.js
+++ b/elements/table-row.js
@@ -1,6 +1,5 @@
-var microcomponent = require('microcomponent')
+var Nanocomponent = require('nanocomponent')
 var encoding = require('dat-encoding')
-var bytes = require('prettier-bytes')
 var html = require('choo/html')
 var css = require('sheetify')
 
@@ -8,6 +7,7 @@ var TitleField = require('./table-title-field')
 var button = require('./button')
 var status = require('./status')
 var icon = require('./icon')
+var { datSize, datPeers, datState } = require('../lib/datInfo')
 
 var cellStyles = css`
   :host {
@@ -116,53 +116,46 @@ var networkStyles = css`
 module.exports = Row
 
 function Row () {
-  var hexContent = HexContent()
-  var finderButton = FinderButton()
-  var linkButton = LinkButton()
-  var deleteButton = DeleteButton()
-  var titleField = TitleField()
-  var networkIcon = NetworkIcon()
-
-  var component = microcomponent({ name: 'table-row' })
-  component.on('render', render)
-  component.on('update', update)
-  return component
-
-  function render () {
-    var { dat, state, emit, highlight } = this.props
-    if (dat instanceof Error) return errorRow(dat, emit, deleteButton)
-
-    var stats = dat.stats
-    var peers = dat.network ? dat.network.connected : 'N/A'
-    var key = encoding.encode(dat.key)
-    var styles = cellStyles
-    if (highlight) styles += ' fade-highlight'
-
-    stats.size = dat.archive.content
-      ? bytes(dat.archive.content.byteLength)
-      : 'N/A'
-    stats.state = !dat.network
-      ? 'paused'
-      : dat.writable || dat.progress === 1
-        ? 'complete'
-        : peers
-          ? 'loading'
-          : 'stale'
-
-    function onclick () {
+  if (!(this instanceof Row)) return new Row()
+  Nanocomponent.call(this)
+
+  this.partials = {
+    hexContent: HexContent(),
+    finderButton: FinderButton(),
+    linkButton: LinkButton(),
+    deleteButton: DeleteButton(),
+    titleField: TitleField(),
+    networkIcon: NetworkIcon()
+  }
+}
+
+Row.prototype = Object.create(Nanocomponent.prototype)
+
+Row.prototype.createElement = function (props) {
+  var { dat, emit, highlight } = props
+  var partials = this.partials
+  if (dat instanceof Error) return errorRow(dat, emit, partials.deleteButton)
+
+  var key = encoding.encode(dat.key)
+  var styles = cellStyles
+  if (highlight) styles += ' fade-highlight'
+
+  function onclick () {
+    if (!partials.titleField.state.isEditing) {
       emit('dats:inspect', dat)
     }
+  }
 
-    return html`
+  return html`
       <tr id=${key} class=${styles} onclick=${onclick}>
         <td class="cell-1">
           <div class="w2 center">
-            ${hexContent.render({ dat, stats, emit })}
+            ${partials.hexContent.render(props)}
           </div>
         </td>
         <td class="cell-2">
           <div class="cell-truncate">
-            ${titleField.render({ dat, state, emit })}
+            ${partials.titleField.render(props)}
             <p class="f7 f6-l color-neutral-60 truncate">
               <span class="author">${dat.metadata.author || 'Anonymous'} • </span>
               <span class="title">
@@ -172,206 +165,224 @@ function Row () {
           </div>
         </td>
         <td class="cell-3">
-          ${status(dat, stats)}
+          ${status(dat)}
         </td>
         <td class="f6 f5-l cell-4 size">
-          ${stats.size}
+          ${datSize(dat)}
         </td>
         <td class="cell-5 ${networkStyles}">
-          ${networkIcon.render({ dat, emit })}
-          <span class="network v-top f6 f5-l ml1">${peers}</span>
+          ${partials.networkIcon.render(props)}
+          <span class="network v-top f6 f5-l ml1">${datPeers(dat)}</span>
         </td>
         <td class="cell-6">
           <div class="flex justify-end ${iconStyles}">
-            ${finderButton.render({ dat, emit })}
-            ${linkButton.render({ dat, emit })}
-            ${deleteButton.render({ dat, emit })}
+            ${partials.finderButton.render(props)}
+            ${partials.linkButton.render(props)}
+            ${partials.deleteButton.render(props)}
           </div>
         </td>
       </tr>
     `
-  }
+}
 
-  function update (props) {
-    return true
-  }
+Row.prototype.update = function (props) {
+  return Object.values(this.partials).find(component => component.update(props, true)) !== undefined
 }
 
 function FinderButton () {
-  var component = microcomponent({ name: 'finder-button' })
-  component.on('render', render)
-  component.on('update', update)
-  return component
-
-  function render () {
-    var { dat, emit } = this.props
-    return button.icon('Open in Finder', {
-      icon: icon('open-in-finder'),
-      class: 'row-action',
-      onclick: function (e) {
-        e.preventDefault()
-        e.stopPropagation()
-        emit('dats:open', dat)
-      }
-    })
-  }
+  if (!(this instanceof FinderButton)) return new FinderButton()
+  Nanocomponent.call(this)
+}
 
-  function update () {
-    return false
-  }
+FinderButton.prototype = Object.create(Nanocomponent.prototype)
+
+FinderButton.prototype.createElement = function (props) {
+  var { dat, emit } = props
+  return button.icon('Open in Finder', {
+    icon: icon('open-in-finder'),
+    class: 'row-action',
+    onclick: function (e) {
+      e.preventDefault()
+      e.stopPropagation()
+      emit('dats:open', dat)
+    }
+  })
+}
+
+FinderButton.prototype.update = function () {
+  return false
 }
 
 function LinkButton () {
-  var component = microcomponent({ name: 'link-button' })
-  component.on('render', render)
-  component.on('update', update)
-  return component
-
-  function render () {
-    var { dat, emit } = this.props
-    return button.icon('Share Dat', {
-      icon: icon('link'),
-      class: 'row-action',
-      onclick: function (e) {
-        e.preventDefault()
-        e.stopPropagation()
-        emit('dats:share', dat)
-      }
-    })
-  }
+  if (!(this instanceof LinkButton)) return new LinkButton()
+  Nanocomponent.call(this)
+}
 
-  function update () {
-    return false
-  }
+LinkButton.prototype = Object.create(Nanocomponent.prototype)
+
+LinkButton.prototype.createElement = function (props) {
+  var { dat, emit } = props
+  return button.icon('Share Dat', {
+    icon: icon('link'),
+    class: 'row-action',
+    onclick: function (e) {
+      e.preventDefault()
+      e.stopPropagation()
+      emit('dats:share', dat)
+    }
+  })
 }
 
-function DeleteButton () {
-  var component = microcomponent({ name: 'delete-button' })
-  component.on('render', render)
-  component.on('update', update)
-  return component
-
-  function render () {
-    var { dat, emit } = this.props
-    return button.icon('Remove Dat', {
-      icon: icon('delete'),
-      class: 'row-action delete',
-      onclick: function (e) {
-        e.preventDefault()
-        e.stopPropagation()
-        emit('dats:remove', { key: dat.key || dat.data.key })
-      }
-    })
-  }
+LinkButton.prototype.update = function () {
+  return false
+}
 
-  function update () {
-    return false
-  }
+function DeleteButton () {
+  if (!(this instanceof DeleteButton)) return new DeleteButton()
+  Nanocomponent.call(this)
 }
 
-function NetworkIcon () {
-  var component = microcomponent({
-    name: 'network-icon',
-    state: {
-      peerCount: 0
+DeleteButton.prototype = Object.create(Nanocomponent.prototype)
+
+DeleteButton.prototype.createElement = function (props) {
+  var { dat, emit } = props
+  return button.icon('Remove Dat', {
+    icon: icon('delete'),
+    class: 'row-action delete',
+    onclick: function (e) {
+      e.preventDefault()
+      e.stopPropagation()
+      emit('dats:remove', { key: dat.key || dat.data.key })
     }
   })
-  component.on('render', render)
-  component.on('update', update)
-  return component
-
-  function render () {
-    var { dat } = this.props
-    var peerCount = this.state.peerCount = dat.network
-      ? dat.network.connected
-      : 0
-    var iconClass = peerCount === 0
-      ? 'network-peers-0'
-      : peerCount === 1
-        ? 'network-peers-1'
-        : 'network-peers-many'
-
-    return icon('network', { class: iconClass })
-  }
+}
+
+DeleteButton.prototype.update = function () {
+  return false
+}
 
-  function update ({ dat, emit }) {
-    var newPeerCount = dat.network ? dat.network.connected : 0
-    return this.state.peerCount !== newPeerCount
+function NetworkIcon () {
+  if (!(this instanceof NetworkIcon)) return new NetworkIcon()
+  Nanocomponent.call(this)
+  this.state = {
+    peerCount: 0
   }
 }
 
+NetworkIcon.prototype = Object.create(Nanocomponent.prototype)
+
+NetworkIcon.prototype.createElement = function (props) {
+  var { dat } = props
+  var peerCount = this.state.peerCount = dat.network
+    ? dat.network.connected
+    : 0
+  var iconClass = peerCount === 0
+    ? 'network-peers-0'
+    : peerCount === 1
+    ? 'network-peers-1'
+    : 'network-peers-many'
+
+  return html`
+    <div>${icon('network', { class: iconClass })}</div>
+  `
+}
+
+NetworkIcon.prototype.update = function ({ dat, emit }) {
+  var newPeerCount = dat.network ? dat.network.connected : 0
+  return this.state.peerCount !== newPeerCount
+}
+
 // create a new hexcontent icon
 function HexContent () {
-  var component = microcomponent({ name: 'hex-content' })
-  component.on('render', render)
-  component.on('update', update)
-  return component
-
-  function onmousemove (ev) {
-    if (!component.state.hover) return
-    if (component._element.contains(ev.target)) return
-    component.state.setHover = false
-    document.body.removeEventListener('mousemove', onmousemove)
-    component.render(component.props)
+  if (!(this instanceof HexContent)) return new HexContent()
+  Nanocomponent.call(this)
+  this.state = {
+    peerCount: 0
   }
+}
 
-  function render () {
-    var state = this.state.state = this.props.stats.state
-    var { emit, dat } = this.props
+HexContent.prototype = Object.create(Nanocomponent.prototype)
 
-    if (typeof this.state.setHover === 'boolean') {
-      if (this.state.setHover) document.body.addEventListener('mousemove', onmousemove)
-      this.state.hover = this.state.setHover
-      this.state.setHover = null
-    }
+HexContent.prototype.createElement = function (props) {
+  var state = this.state.state = datState(props.dat)
+  var { emit, dat } = props
 
-    if (this.state.hover) {
-      return button.icon('pause', {
-        icon: icon('hexagon-pause', {class: 'w2'}),
-        class: 'color-neutral-40 ph0',
-        onclick: togglePause
-      })
-    } else if (state === 'loading') {
-      return button.icon('loading', {
-        icon: icon('hexagon-down', {class: 'w2'}),
-        class: 'color-blue hover-color-blue-hover ph0',
-        onclick: togglePause
-      })
-    } else if (state === 'paused') {
-      return button.icon('paused', {
-        icon: icon('hexagon-resume', {class: 'w2'}),
-        class: 'color-neutral-30 hover-color-neutral-40 ph0',
-        onclick: togglePause
-      })
-    } else if (state === 'complete') {
-      return button.icon('complete', {
-        icon: icon('hexagon-up', {class: 'w2'}),
-        class: 'color-green hover-color-green-hover ph0',
-        onclick: togglePause,
-        onmouseover: ev => {
-          this.state.setHover = true
-          this.render(this.props)
-        }
-      })
-    } else {
-      return button.icon('stale', {
-        icon: icon('hexagon-x', {class: 'w2'}),
-        class: 'color-neutral-30 hover-color-neutral-40 ph0',
-        onclick: togglePause
-      })
+  var self = this
+  function onmousemove (ev) {
+    if (!self.element.contains(ev.target)) {
+      self.state.hover = false
+      self.state.update = true
+      self.state.listening = false
+      document.body.removeEventListener('mousemove', onmousemove)
+      emit('render')
     }
+  }
 
-    function togglePause (e) {
-      e.preventDefault()
-      e.stopPropagation()
-      emit('dats:toggle-pause', dat)
-    }
+  if (this.state.hover && !this.state.listening) {
+    document.body.addEventListener('mousemove', onmousemove)
+    this.state.listening = true
+  }
+
+  if (this.state.hover) {
+    return button.icon('pause', {
+      icon: icon('hexagon-pause', {class: 'w2'}),
+      class: 'color-neutral-40 ph0',
+      onclick: togglePause
+    })
+  } else if (state === 'loading') {
+    return button.icon('loading', {
+      icon: icon('hexagon-down', {class: 'w2'}),
+      class: 'color-blue hover-color-blue-hover ph0',
+      onclick: togglePause
+    })
+  } else if (state === 'paused') {
+    return button.icon('paused', {
+      icon: icon('hexagon-resume', {class: 'w2'}),
+      class: 'color-neutral-30 hover-color-neutral-40 ph0',
+      onclick: togglePause
+    })
+  } else if (state === 'complete') {
+    return button.icon('complete', {
+      icon: icon('hexagon-up', {class: 'w2'}),
+      class: 'color-green hover-color-green-hover ph0',
+      onclick: togglePause,
+      onmouseover: ev => {
+        this.state.hover = true
+        this.state.update = true
+        emit('render')
+      }
+    })
+  } else {
+    return button.icon('stale', {
+      icon: icon('hexagon-x', {class: 'w2'}),
+      class: 'color-neutral-30 hover-color-neutral-40 ph0',
+      onclick: togglePause
+    })
   }
 
-  function update ({ dat, stats, emit }) {
-    return stats.state !== this.state.state ||
-      typeof this.state.setHover === 'boolean'
+  function togglePause (e) {
+    e.preventDefault()
+    e.stopPropagation()
+    emit('dats:toggle-pause', dat)
+  }
+}
+
+HexContent.prototype.update = function ({ dat, emit }, external) {
+  if (this.state.update) {
+    if (!external) {
+      // `.update` is usually called (and part of) the `.render` method
+      // meaning that setting "state.update" once will result in exactly
+      // one rendering. However, since the table-row is a complex component
+      // and the table row uses `.update` to see if any of the child
+      // components would need an update. If the call comes from
+      // the parent (or externally) we do not reset the update property
+      // to make sure that `.state.update` stays true until actually
+      // rendering the component
+      this.state.update = false
+    }
+    return true
   }
+  return datState(dat) !== this.state.state
 }
 
 function errorRow (err, emit, deleteButton) {
diff --git a/elements/table-title-field.js b/elements/table-title-field.js
index 3630ed86..a1eb502c 100644
--- a/elements/table-title-field.js
+++ b/elements/table-title-field.js
@@ -1,4 +1,4 @@
-var microcomponent = require('microcomponent')
+var Nanocomponent = require('nanocomponent')
 var nanomorph = require('nanomorph')
 var html = require('choo/html')
 var css = require('sheetify')
@@ -52,21 +52,10 @@ module.exports = TitleField
 // - pressing enter (saving)
 // - clicking the save button (saving)
 function TitleField () {
-  var component = microcomponent({
-    name: 'table-title-field',
-    state: resetState()
-  })
-  component.on('render', render)
-  component.on('render:active', renderActive)
-  component.on('render:inactive', renderInactive)
-  component.on('update', update)
-  return component
-
-  function update ({ dat }) {
-    return dat.writable !== this.state.writable ||
-      dat.key.toString('hex') !== this.state.key ||
-      this.state.title !== dat.metadata.title || '#' + this.state.key
-  }
+  if (!(this instanceof TitleField)) return new TitleField()
+  Nanocomponent.call(this)
+  this.props = null
+  this.state = resetState()
 
   function resetState () {
     return {
@@ -77,28 +66,34 @@ function TitleField () {
       key: null
     }
   }
+}
 
-  function render () {
-    var dat = component.props.dat
-    var state = component.state
+TitleField.prototype = Object.create(Nanocomponent.prototype)
 
-    if (dat) {
-      state.writable = dat.writable
-      state.key = dat.key.toString('hex')
-      state.title = dat.metadata.title || ''
-      state.placeholderTitle = '#' + state.key
-    }
+TitleField.prototype.createElement = function (props) {
+  var dat = props.dat
+  this.props = props
+  var state = this.state
 
-    if (state.isEditing && state.writable) return component.emit('render:active')
-    else return component.emit('render:inactive')
+  if (dat) {
+    state.writable = dat.writable
+    state.key = dat.key.toString('hex')
+    state.title = dat.metadata.title || ''
+    state.placeholderTitle = '#' + state.key
   }
 
-  function renderInactive () {
-    var state = this.state
-    state.editValue = ''
+  return (state.isEditing && state.writable)
+    ? this.renderActive()
+    : this.renderInactive()
+}
+
+TitleField.prototype.renderInactive = function () {
+  var self = this
+  var state = this.state
+  state.editValue = ''
 
-    return state.writable
-      ? html`
+  return state.writable
+    ? html`
           <div class=${editableField}>
             <h2 class="f6 f5-l normal truncate pr3" onclick=${onclick}>
               ${state.title || state.placeholderTitle}
@@ -106,7 +101,7 @@ function TitleField () {
             </h2>
           </div>
         `
-      : html`
+    : html`
           <div>
             <h2 class="f6 f5-l normal truncate pr3">
               ${state.title || state.placeholderTitle}
@@ -114,25 +109,26 @@ function TitleField () {
           </div>
         `
 
-    function onclick (e) {
-      e.stopPropagation()
-      e.preventDefault()
-      state.isEditing = true
-      state.editValue = state.title
-      component.render(Object.assign({}, component.props))
-    }
+  function onclick (e) {
+    e.stopPropagation()
+    e.preventDefault()
+    state.isEditing = true
+    state.editValue = state.title
+    state.update = true
+    self.props.emit('render')
   }
+}
 
-  function renderActive () {
-    setTimeout(function () {
-      var input = self._element.querySelector('input')
-      input.focus()
-      input.select()
-    }, 0)
+TitleField.prototype.renderActive = function () {
+  var self = this
+  setTimeout(function () {
+    var input = self.element.querySelector('input')
+    input.focus()
+    input.select()
+  }, 0)
 
-    var self = this
-    var state = this.state
-    return html`
+  var state = this.state
+  return html`
       <div>
         <div class=${overlay} onclick=${deactivate}></div>
         <div class="${editableField} bg-white nt1 nb1 nl1 pl1 shadow-1 flex justify-between">
@@ -143,44 +139,77 @@ function TitleField () {
       </div>
     `
 
-    function handleKeypress (e) {
-      var oldValue = state.editValue
-      var newValue = e.target.value
-      state.editValue = newValue
-      e.stopPropagation()
+  function handleKeypress (e) {
+    var oldValue = state.editValue
+    var newValue = e.target.value
+    state.editValue = newValue
+    e.stopPropagation()
 
-      if (e.code === 'Escape') {
-        e.preventDefault()
-        deactivate()
-      } else if (e.code === 'Enter') {
-        e.preventDefault()
-        handleSave()
-      } else if (oldValue !== newValue) {
-        nanomorph(self._element.querySelector('button'), renderButton())
-      }
+    if (e.code === 'Escape') {
+      e.preventDefault()
+      deactivate()
+    } else if (e.code === 'Enter') {
+      e.preventDefault()
+      handleSave()
+    } else if (oldValue !== newValue) {
+      nanomorph(self.element.querySelector('button'), renderButton())
     }
+  }
 
-    function renderButton () {
-      if (state.editValue === state.title) {
-        return button('Save', { onclick: deactivate })
-      } else {
-        return button.green('Save', { onclick: handleSave })
-      }
+  function renderButton () {
+    if (state.editValue === state.title) {
+      return button('Save', { onclick: deactivate })
+    } else {
+      return button.green('Save', { onclick: handleSave })
     }
+  }
 
-    function handleSave (e) {
-      if (e) {
-        e.stopPropagation()
-        e.preventDefault()
-      }
-      component.props.emit('dats:update-title', { key: self.state.key, title: self.state.editValue })
-      deactivate()
+  function handleSave (e) {
+    if (e) {
+      e.stopPropagation()
+      e.preventDefault()
     }
+    self.props.emit('dats:update-title', { key: self.state.key, title: self.state.editValue })
+    deactivate()
+  }
+
+  function deactivate (e) {
+    if (e) e.stopPropagation()
+    state.isEditing = false
+    state.update = true
+    self.props.emit('render')
+  }
+}
 
-    function deactivate (e) {
-      if (e) e.stopPropagation()
-      state.isEditing = false
-      component.render(Object.assign({}, component.props))
+TitleField.prototype.update = function ({ dat }, external) {
+  if (this.state.update) {
+    if (!external) {
+      // `.update` is usually called (and part of) the `.render` method
+      // meaning that setting "state.update" once will result in exactly
+      // one rendering. However, since the table-row is a complex component
+      // and the table row uses `.update` to see if any of the child
+      // components would need an update. If the call comes from
+      // the parent (or externally) we do not reset the update property
+      // to make sure that `.state.update` stays true until actually
+      // rendering the component
+      this.state.update = false
     }
+    return true
   }
+
+  if (dat.writable !== this.state.writable) {
+    return true
+  }
+
+  if (dat.key.toString('hex') !== this.state.key) {
+    return true
+  }
+
+  var oldTitle = (dat.metadata.title || '#' + this.state.key)
+
+  if (this.state.title !== oldTitle) {
+    return true
+  }
+
+  return false
 }
diff --git a/elements/table.js b/elements/table.js
index b27a9782..d05a1ab6 100644
--- a/elements/table.js
+++ b/elements/table.js
@@ -1,9 +1,9 @@
-var microcomponent = require('microcomponent')
 var nanolog = require('nanologger')
 var html = require('choo/html')
 var css = require('sheetify')
 
 var TableRow = require('./table-row')
+var TableHead = require('./table-head')
 
 var tableStyles = css`
   :host {
@@ -42,8 +42,8 @@ var tableStyles = css`
   }
 `
 
-var tableHead = TableHead()
 var tableRows = TableRows()
+var tableHead = TableHead()
 
 module.exports = tableElement
 
@@ -77,12 +77,12 @@ function TableRows () {
       var row = elements[key]
       usedKeys.push(key)
       if (row) {
-        return row.render({ dat, state, emit })
+        return row.createElement({ dat, state, emit })
       } else {
         var highlight = !initialLoad
         var newRow = TableRow()
         elements[key] = newRow
-        return newRow.render({ dat, state, emit, highlight })
+        return newRow.createElement({ dat, state, emit, highlight })
       }
     })
 
@@ -94,24 +94,3 @@ function TableRows () {
     return renderedElements
   }
 }
-
-function TableHead () {
-  return microcomponent({
-    name: 'table-head',
-    pure: true
-  })
-  .on('render', function () {
-    return html`
-      <thead>
-        <tr>
-          <th class="cell-1"></th>
-          <th class="tl cell-2">Link</th>
-          <th class="tl cell-3">Status</th>
-          <th class="tl cell-4">Size</th>
-          <th class="tl cell-5">Peers</th>
-          <th class="cell-6"></th>
-        </tr>
-      </thead>
-    `
-  })
-}
diff --git a/lib/datInfo.js b/lib/datInfo.js
new file mode 100644
index 00000000..a50eada9
--- /dev/null
+++ b/lib/datInfo.js
@@ -0,0 +1,24 @@
+'use strict'
+var bytes = require('prettier-bytes')
+
+function datPeers (dat) {
+  return dat.network ? dat.network.connected : 'N/A'
+}
+
+module.exports = {
+  datPeers,
+  datSize (dat) {
+    return dat.archive.content
+      ? bytes(dat.archive.content.byteLength)
+      : 'N/A'
+  },
+  datState (dat) {
+    return !dat.network
+      ? 'paused'
+      : dat.writable || dat.progress === 1
+      ? 'complete'
+      : datPeers(dat)
+      ? 'loading'
+      : 'stale'
+  }
+}
diff --git a/models/dats.js b/models/dats.js
index 81acb9d3..0b6e3d5d 100644
--- a/models/dats.js
+++ b/models/dats.js
@@ -26,6 +26,15 @@ var downloadsDir = (argv.data)
 
 module.exports = datsModel
 
+function showOpenDialog () {
+  if (process.env.TEST_OPEN_DIALOG_RESULT) {
+    return [process.env.TEST_OPEN_DIALOG_RESULT]
+  }
+  return dialog.showOpenDialog({
+    properties: ['openDirectory']
+  })
+}
+
 function datsModel (state, bus) {
   state.dats = xtend({
     downloadsDir: downloadsDir,
@@ -92,9 +101,7 @@ function datsModel (state, bus) {
   // choose a directory and convert it to a dat archive
   bus.on('dats:create', function (pathname) {
     if (!pathname) {
-      var files = dialog.showOpenDialog({
-        properties: ['openDirectory']
-      })
+      var files = showOpenDialog()
       if (!files || !files.length) return
       pathname = files[0]
     }
diff --git a/package-lock.json b/package-lock.json
index 4a5afd3b..f6da39b5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,9 +10,18 @@
       "integrity": "sha512-+rr4OgeTNrLuJAf09o3USdttEYiXvZshWMkhD6wR9v1ieXH0JM1Q2yT41/cJuJcqiPpSXlM/g3aR+Y5MWQdr0Q==",
       "dev": true,
       "requires": {
-        "7zip-bin-mac": "1.0.1"
+        "7zip-bin-linux": "1.2.0",
+        "7zip-bin-mac": "1.0.1",
+        "7zip-bin-win": "2.1.1"
       }
     },
+    "7zip-bin-linux": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/7zip-bin-linux/-/7zip-bin-linux-1.2.0.tgz",
+      "integrity": "sha512-umB98LN18XBGKPw4EKET2zPDqVhEU1mxXA1Gx0BM+DoBt4hnlZPNkpSMNzmuNbQshi9SzLhqlTAyKcAgNrbV3Q==",
+      "dev": true,
+      "optional": true
+    },
     "7zip-bin-mac": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/7zip-bin-mac/-/7zip-bin-mac-1.0.1.tgz",
@@ -20,6 +29,13 @@
       "dev": true,
       "optional": true
     },
+    "7zip-bin-win": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/7zip-bin-win/-/7zip-bin-win-2.1.1.tgz",
+      "integrity": "sha512-6VGEW7PXGroTsoI2QW3b0ea95HJmbVBHvfANKLLMzSzFA1zKqVX5ybNuhmeGpf6vA0x8FJTt6twpprDANsY5WQ==",
+      "dev": true,
+      "optional": true
+    },
     "@types/node": {
       "version": "7.0.48",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-7.0.48.tgz",
@@ -414,6 +430,20 @@
         "nanocomponent": "2.0.3",
         "sheetify": "6.2.0",
         "xtend": "4.0.1"
+      },
+      "dependencies": {
+        "nanocomponent": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/nanocomponent/-/nanocomponent-2.0.3.tgz",
+          "integrity": "sha1-yupqOad9l+T3HanCo15hl8cLcus=",
+          "requires": {
+            "observe-resize": "1.1.3",
+            "on-intersect": "1.1.0",
+            "on-load": "3.3.1",
+            "polite-element": "1.0.5",
+            "yo-yoify": "3.7.3"
+          }
+        }
       }
     },
     "base64-js": {
@@ -5319,11 +5349,6 @@
       "integrity": "sha1-OGchPo3Xm/Ho8jAMDPwe+xgsDfE=",
       "dev": true
     },
-    "juliangruber-shallow-equal": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/juliangruber-shallow-equal/-/juliangruber-shallow-equal-1.0.4.tgz",
-      "integrity": "sha1-JqQhSCNXVPlCuDwGYfZKsS0245g="
-    },
     "k-bucket": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/k-bucket/-/k-bucket-3.3.0.tgz",
@@ -5749,27 +5774,6 @@
         "readable-stream": "2.3.3"
       }
     },
-    "microcomponent": {
-      "version": "3.1.6",
-      "resolved": "https://registry.npmjs.org/microcomponent/-/microcomponent-3.1.6.tgz",
-      "integrity": "sha1-C9QBOlcEJCHscGbU2OYKx2v99Ms=",
-      "requires": {
-        "juliangruber-shallow-equal": "1.0.4",
-        "nanocomponent": "5.0.3",
-        "nanologger": "1.3.1",
-        "nanomorph": "5.1.3"
-      },
-      "dependencies": {
-        "nanocomponent": {
-          "version": "5.0.3",
-          "resolved": "https://registry.npmjs.org/nanocomponent/-/nanocomponent-5.0.3.tgz",
-          "integrity": "sha1-pc5nwmCBh7PTfsTqjHyiN1agLcc=",
-          "requires": {
-            "on-load": "3.3.1"
-          }
-        }
-      }
-    },
     "micromatch": {
       "version": "2.3.11",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz",
@@ -6052,15 +6056,26 @@
       }
     },
     "nanocomponent": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/nanocomponent/-/nanocomponent-2.0.3.tgz",
-      "integrity": "sha1-yupqOad9l+T3HanCo15hl8cLcus=",
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/nanocomponent/-/nanocomponent-6.5.0.tgz",
+      "integrity": "sha512-4r2uISrf+xu3xf50GCoXlPFCjq5PnGCxQBPcf+CErw2XWqkjP04hI+H0TH/8W3mikst6hee/avbXjGOmhysmWQ==",
       "requires": {
-        "observe-resize": "1.1.3",
-        "on-intersect": "1.1.0",
-        "on-load": "3.3.1",
-        "polite-element": "1.0.5",
-        "yo-yoify": "3.7.3"
+        "global": "4.3.2",
+        "nanoassert": "1.1.0",
+        "nanomorph": "5.1.3",
+        "nanotiming": "6.1.5",
+        "on-load": "3.3.4"
+      },
+      "dependencies": {
+        "on-load": {
+          "version": "3.3.4",
+          "resolved": "https://registry.npmjs.org/on-load/-/on-load-3.3.4.tgz",
+          "integrity": "sha512-WhwvSW0hZndA7HjN1O3AypgaAahFPTOmJ43bQUTQHsiHhtp9/kk+WlMnd/skqBkWuiNcQqNwKo2ZiwwRWStJIA==",
+          "requires": {
+            "global": "4.3.2",
+            "nanoassert": "1.1.0"
+          }
+        }
       }
     },
     "nanohref": {
diff --git a/package.json b/package.json
index aef1213a..2fc78239 100644
--- a/package.json
+++ b/package.json
@@ -23,12 +23,12 @@
     "electron-window": "^0.8.1",
     "envobj": "^1.0.2",
     "explain-error": "^1.0.3",
-    "microcomponent": "^3.1.6",
     "minimist": "^1.2.0",
     "mirror-folder": "^2.1.0",
     "mkdirp": "^0.5.1",
     "ms": "^0.7.2",
     "multidat": "^5.0.1",
+    "nanocomponent": "^6.5.0",
     "nanologger": "^1.0.2",
     "nanomorph": "^5.0.0",
     "prettier-bytes": "^1.0.3",
diff --git a/pages/main.js b/pages/main.js
index 6434a2a8..07a1ffdb 100644
--- a/pages/main.js
+++ b/pages/main.js
@@ -31,6 +31,7 @@ function mainView (state, emit) {
   const isReady = state.dats.ready
   const headerProps = {
     isReady: isReady,
+    onupdate: () => emit('render'),
     oncreate: () => emit('dats:create'),
     onimport: (link) => emit('dats:download', link),
     onreport: () => shell.openExternal('https://github.com/datproject/dat-desktop/issues')
diff --git a/tests/index.js b/tests/index.js
index b0a23b62..24495ef4 100644
--- a/tests/index.js
+++ b/tests/index.js
@@ -3,6 +3,7 @@ var spectron = require('spectron')
 var path = require('path')
 var tap = require('tap').test
 var del = require('del')
+var { execSync } = require('child_process')
 
 var TEST_DATA = path.join(__dirname, 'test_data')
 var TEST_DATA_DB = path.join(TEST_DATA, 'multidat.json')
@@ -27,6 +28,7 @@ tap('init', function (t) {
       .then((val) => t.notEqual(val.width, 0, 'getBounds'))
       .then(() => app.browserWindow.getBounds())
       .then((val) => t.notEqual(val.height, 0, 'getBounds'))
+      .catch(e => t.fail(e))
       .then(() => endTest(app))
   })
   t.end()
@@ -53,13 +55,16 @@ tap('onboarding', function (t) {
       .then(() => app.client.click('button'))
       .then(() => wait())
       .then(() => app.client.getText('button[title="Skip Intro"]'))
+      .catch(e => t.fail(e))
       .then(() => endTest(app))
   })
   t.end()
 })
 
 tap('working with dats', function (t) {
-  var app = createApp()
+  var app = createApp({
+    openDialogResult: path.join(__dirname, 'fixtures')
+  })
   return waitForLoad(app)
     .then(() => app.browserWindow.isVisible())
     .then((isVisible) => t.ok(isVisible, 'isVisible'))
@@ -67,7 +72,7 @@ tap('working with dats', function (t) {
     .then(() => wait(4000))
     .then(() => app.client.click('button[title="Skip Intro"]'))
     .then(() => wait())
-    .then(() => app.client.click('button')) // create new
+    .then(() => app.client.click('button[title="Share Folder"]')) // create new
     .then(() => wait())
     .then(() => app.client.getText('.size'))
     .then((text) => {
@@ -99,16 +104,20 @@ tap('working with dats', function (t) {
     .then(() => wait())
     .then(() => app.client.getText('.tutorial'))
     .then((text) => t.ok(text.toLowerCase().match(/share/), 'now the dat is gone and welcome screen is back'))
+    .catch(e => t.fail(e))
     .then(() => endTest(app))
 })
 
 // Create a new app instance
-function createApp () {
-  return new spectron.Application({
+function createApp (opts) {
+  opts = opts || {}
+  var app = new spectron.Application({
     path: path.join(__dirname, '../node_modules/.bin/electron'),
     args: [path.join(__dirname, '../index.js'), '--data', TEST_DATA, '--db', TEST_DATA_DB],
-    env: { NODE_ENV: 'test', RUNNING_IN_SPECTRON: true }
+    env: { NODE_ENV: 'test', RUNNING_IN_SPECTRON: true, TEST_OPEN_DIALOG_RESULT: opts.openDialogResult }
   })
+  process.on('SIGTERM', () => endTest(app))
+  return app
 }
 
 // Starts the app, waits for it to load, returns a promise
@@ -133,7 +142,13 @@ function wait (ms) {
 
 // Quit the app, end the test, either in success (!err) or failure (err)
 function endTest (app) {
-  var paths = [TEST_DATA, path.join(__dirname, 'fixtures', '.dat')]
-  return del(paths)
-    .then(() => app.stop())
+  var fixPath = path.join(__dirname, 'fixtures')
+  return Promise.all([
+    del(fixPath),
+    del(TEST_DATA)
+  ])
+    .then(() => {
+      execSync(`git checkout -- "${fixPath}"`)
+      return app.stop()
+    })
 }