diff --git a/app/client.js b/app/client.js
index 0d3fa40..b83ce1a 100644
--- a/app/client.js
+++ b/app/client.js
@@ -1,9 +1,7 @@
 import { init } from 'sapper/runtime.js';
-import { routes } from './manifest/client.js';
-import App from './App.html';
+import { manifest } from './manifest/client.js';
 
 init({
 	target: document.querySelector('#sapper'),
-	routes,
-	App
+	manifest
 });
\ No newline at end of file
diff --git a/app/server.js b/app/server.js
index 663191c..8ab6e2a 100644
--- a/app/server.js
+++ b/app/server.js
@@ -2,14 +2,13 @@ import sirv from 'sirv';
 import polka from 'polka';
 import sapper from 'sapper';
 import compression from 'compression';
-import { routes } from './manifest/server.js';
-import App from './App.html';
+import { manifest } from './manifest/server.js';
 
 polka() // You can also use Express
 	.use(
 		compression({ threshold: 0 }),
 		sirv('assets'),
-		sapper({ routes, App })
+		sapper({ manifest })
 	)
 	.listen(process.env.PORT)
 	.catch(err => {
diff --git a/components/Nav.html b/components/Nav.html
index a6b72ad..23c0631 100644
--- a/components/Nav.html
+++ b/components/Nav.html
@@ -1,11 +1,11 @@
 <nav>
 	<ul>
-		<li><a class='{path === "/"  ? "selected" : ""}' href='.'>home</a></li>
-		<li><a class='{path === "/about"  ? "selected" : ""}' href='about'>about</a></li>
+		<li><a class='{segment === undefined ? "selected" : ""}' href='.'>home</a></li>
+		<li><a class='{segment === "about" ? "selected" : ""}' href='about'>about</a></li>
 
 		<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
 		     the blog data when we hover over the link or tap it on a touchscreen -->
-		<li><a rel=prefetch class='{path.startsWith("/blog")  ? "selected" : ""}' href='blog'>blog</a></li>
+		<li><a rel=prefetch class='{segment === "blog" ? "selected" : ""}' href='blog'>blog</a></li>
 	</ul>
 </nav>
 
diff --git a/package.json b/package.json
index cf2cdd1..9eacb02 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
   "dependencies": {
     "compression": "^1.7.1",
     "polka": "^0.4.0",
-    "sapper": "^0.14.0",
+    "sapper": "^0.15.0",
     "sirv": "^0.1.1"
   },
   "devDependencies": {
diff --git a/app/App.html b/routes/_layout.html
similarity index 65%
rename from app/App.html
rename to routes/_layout.html
index 8ed8545..efa6c15 100644
--- a/app/App.html
+++ b/routes/_layout.html
@@ -1,7 +1,7 @@
-<Nav path={props.path}/>
+<Nav segment={child.segment}/>
 
 <main>
-	<svelte:component this={Page} {...props}/>
+	<svelte:component this={child.component} {...child.props}/>
 </main>
 
 <style>
@@ -16,11 +16,9 @@
 </style>
 
 <script>
-	import Nav from '../components/Nav.html';
-
 	export default {
 		components: {
-			Nav
+			Nav: '../components/Nav.html'
 		}
 	};
 </script>
\ No newline at end of file