diff --git a/app/App.html b/app/App.html
index 862341d..8ed8545 100644
--- a/app/App.html
+++ b/app/App.html
@@ -1,9 +1,4 @@
-<Nav page={
-	props.path === '/' ? 'home' :
-	props.path === '/about' ? 'about' :
-	props.path.startsWith('/blog') ? 'blog' :
-	null
-}/>
+<Nav path={props.path}/>
 
 <main>
 	<svelte:component this={Page} {...props}/>
diff --git a/components/Nav.html b/components/Nav.html
index 699d59f..a6b72ad 100644
--- a/components/Nav.html
+++ b/components/Nav.html
@@ -1,11 +1,11 @@
 <nav>
 	<ul>
-		<li><a class='{page === "home"  ? "selected" : ""}' href='.'>home</a></li>
-		<li><a class='{page === "about"  ? "selected" : ""}' href='about'>about</a></li>
+		<li><a class='{path === "/"  ? "selected" : ""}' href='.'>home</a></li>
+		<li><a class='{path === "/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='{page === "blog"  ? "selected" : ""}' href='blog'>blog</a></li>
+		<li><a rel=prefetch class='{path.startsWith("/blog")  ? "selected" : ""}' href='blog'>blog</a></li>
 	</ul>
 </nav>