diff --git a/app/client.js b/app/client.js
index 511f399..de3c7dc 100755
--- a/app/client.js
+++ b/app/client.js
@@ -13,8 +13,8 @@ import ssr from "choo-ssr";
 
 //  V A R I A B L E S
 
-const head = local("app/components/head");
-const wrapper = local("app/components/wrapper");
+const head = local("app/components/head").default;
+const wrapper = local("app/components/wrapper").default;
 
 
 
diff --git a/app/components/head.js b/app/components/head.js
index 4f34a39..307021a 100644
--- a/app/components/head.js
+++ b/app/components/head.js
@@ -16,7 +16,7 @@ let title = "";
 
 //  E X P O R T
 
-module.exports = exports = (state, emit) => {
+export default (state, emit) => {
   switch(true) {
     case (state.route !== "/" && state.params.wildcard):
       title = `${state.params.wildcard.capitalize()} ∙ LBRY ∙ ${config.meta.tagline}`;
diff --git a/app/components/navigation.js b/app/components/navigation.js
index 5693f1d..708b6de 100644
--- a/app/components/navigation.js
+++ b/app/components/navigation.js
@@ -5,79 +5,72 @@
 //  P A C K A G E S
 
 import html from "choo/html";
-import Nanocomponent from "nanocomponent";
-import xtend from "xtend";
 
 
 
 //  E X P O R T
 
-export default class Navigation extends Nanocomponent {
-  constructor() {
-    super();
-
-    this.state = {
-      active: true,
-      links: [
-        {
-          name: "LBRY.io",
-          title: "Escape the techno scene",
-          url: "https://lbry.io"
-        },
-        {
-          name: "Overview",
-          title: "LBRY overview",
-          url: "/overview"
-        },
-        {
-          name: "Playground",
-          title: "Experience LBRY",
-          url: "/playground"
-        },
-        {
-          name: "Resources",
-          title: "View LBRY resources",
-          url: "/resources"
-        },
-        {
-          name: "Community",
-          title: "Interact with LBRY",
-          url: "/community"
-        }
-      ]
-    };
-
-    this.renderLink = this.renderLink.bind(this);
-  }
-
-  createElement(props) {
-    this.state = xtend(this.state, props);
-
-    return html`
-      <nav class="navigation">
-        <div class="inner-wrap">
-          <a class="navigation__item logo" href="/" title="LBRY homepage">Home</a>
-          ${this.state.links.map(this.renderLink)}
-        </div>
-      </nav>
-    `;
-  }
-
-  renderLink(props, i, arr) { // eslint-disable-line
-    let activeClass;
-
-    if (this.state.href === "/" && props.url === "/") {
-      activeClass = true;
-    } else if (props.url !== "/" && this.state.href.indexOf(props.url) >= 0) {
-      activeClass = true;
+export default currentUrl => {
+  const links = [
+    {
+      name: "LBRY.io",
+      title: "Escape the techno scene",
+      url: "https://lbry.io"
+    },
+    {
+      name: "Overview",
+      title: "LBRY overview",
+      url: "/overview"
+    },
+    {
+      name: "Playground",
+      title: "Experience LBRY",
+      url: "/playground"
+    },
+    {
+      name: "Resources",
+      title: "View LBRY resources",
+      url: "/resources"
+    },
+    {
+      name: "Community",
+      title: "Interact with LBRY",
+      url: "/community"
     }
+  ];
 
-    return html`
-      <a
-        class="navigation__item${activeClass ? " active" : ""}"
-        href="${props.url}"
-        title="${props.title}"
-      >${props.name}</a>
-    `;
+  return html`
+    <nav class="navigation">
+      <div class="inner-wrap">
+        <a class="navigation__item logo" href="/" title="LBRY homepage">Home</a>
+        ${links.map(link => renderLink(currentUrl, link))}
+      </div>
+    </nav>
+  `;
+};
+
+
+
+//  H E L P E R
+
+function renderLink(href, link) {
+  let activeClass;
+
+  switch(true) {
+    case (link.url !== "/" && href.indexOf(link.url) >= 0):
+      activeClass = true;
+      break;
+
+    default:
+      activeClass = false;
+      break;
   }
+
+  return html`
+    <a
+      class="navigation__item${activeClass ? " active" : ""}"
+      href="${link.url}"
+      title="${link.title}"
+    >${link.name}</a>
+  `;
 }
diff --git a/app/components/wrapper.js b/app/components/wrapper.js
index e2d6a2f..cda916f 100644
--- a/app/components/wrapper.js
+++ b/app/components/wrapper.js
@@ -5,26 +5,25 @@
 //  P A C K A G E
 
 import asyncHtml from "choo-async/html";
+import { require as local } from "app-root-path";
 
 //  V A R I A B L E S
 
-import footer from "./footer";
-import Navigation from "./navigation";
-
-const navigation = new Navigation();
+const footer = local("app/components/footer").default;
+const navigation = local("app/components/navigation").default;
 
 
 
 //  E X P O R T
 
-module.exports = exports = children => (state, emit) => asyncHtml`
+export default children => (state, emit) => asyncHtml`
   <main>
     <noscript>
       <p>LBRY is quite fancy and relies on a bit of JavaScript to do these fancy things.</p>
       <p>Please enable it, if you can.</p>
     </noscript>
 
-    ${navigation.render({ href: state.href || "/" })}
+    ${navigation(state.href)}
     <aside class="flashes" id="flash-container"></aside>
     ${children(state, emit)}
     ${footer(state, emit)}
diff --git a/package.json b/package.json
index 11744d1..b68f032 100755
--- a/package.json
+++ b/package.json
@@ -32,15 +32,13 @@
     "make-promises-safe": "^1.1.0",
     "markdown-it": "^8.4.2",
     "markdown-it-anchor": "^5.0.2",
-    "nanocomponent": "^6.5.2",
     "prismjs": "^1.15.0",
     "redis": "^2.8.0",
     "request": "^2.88.0",
     "request-promise-native": "^1.0.5",
     "slack-node": "^0.1.8",
     "socket.io": "^2.1.1",
-    "stringify-object": "^3.2.2",
-    "xtend": "^4.0.1"
+    "stringify-object": "^3.2.2"
   },
   "description": "Documentation for the LBRY protocol and associated projects",
   "devDependencies": {