diff --git a/package_template.json b/package_template.json
index 9992ebd..b5fd31f 100644
--- a/package_template.json
+++ b/package_template.json
@@ -19,7 +19,7 @@
   "devDependencies": {
     "npm-run-all": "^4.1.5",
     "sapper": "alpha",
-    "svelte": "beta"
+    "svelte": "^3.0.0"
   },
   "merge-configs": {
     "rollup": {
diff --git a/src/components/Nav.html b/src/components/Nav.svelte
similarity index 94%
rename from src/components/Nav.html
rename to src/components/Nav.svelte
index 23c0631..d7f8da1 100644
--- a/src/components/Nav.html
+++ b/src/components/Nav.svelte
@@ -1,13 +1,6 @@
-<nav>
-	<ul>
-		<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='{segment === "blog" ? "selected" : ""}' href='blog'>blog</a></li>
-	</ul>
-</nav>
+<script>
+	export let segment;
+</script>
 
 <style>
 	nav {
@@ -53,4 +46,15 @@
 		padding: 1em 0.5em;
 		display: block;
 	}
-</style>
\ No newline at end of file
+</style>
+
+<nav>
+	<ul>
+		<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='{segment === "blog" ? "selected" : ""}' href='blog'>blog</a></li>
+	</ul>
+</nav>
\ No newline at end of file
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
index 076184e..8432299 100644
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -1,5 +1,5 @@
 <script>
-	import Nav from '../components/Nav.html';
+	import Nav from '../components/Nav.svelte';
 
 	export let segment;
 </script>