diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
index 58ea255..28c505a 100644
--- a/src/components/Nav.svelte
+++ b/src/components/Nav.svelte
@@ -1,7 +1,28 @@
 <script>
-  export let segment
+  import NavItem from "./NavItem.svelte";
+  export let segment;
+
+  const titlesMap = {
+    undefined: "home",
+    "free-open-source": "free & open source",
+    "about-contact": "about & contact",
+    faq: "faq",
+    "global-open-infrastructure": "global open infrastructure",
+    "privacy-by-design": "privacy by design",
+  };
 </script>
 
+<nav>
+  <NavItem {segment} href="." matchingSegment={undefined} humanName="home" />
+
+  <NavItem
+    {segment}
+    href="./about-contact"
+    matchingSegment="about-contact"
+    humanName="about & contact"
+  />
+</nav>
+
 <style>
   nav {
     font-weight: 300;
@@ -14,5 +35,3 @@
     align-items: center;
   }
 </style>
-
-<nav>{segment}</nav>
diff --git a/src/components/NavItem.svelte b/src/components/NavItem.svelte
new file mode 100644
index 0000000..6e6bc88
--- /dev/null
+++ b/src/components/NavItem.svelte
@@ -0,0 +1,24 @@
+<script>
+  export let segment;
+  export let humanName;
+  export let href;
+  export let matchingSegment;
+</script>
+
+<div
+  class="navItem"
+  aria-current={segment === matchingSegment ? "page" : undefined}
+>
+  <a rel="prefetch" {href}>{humanName}</a>
+</div>
+
+<style>
+  .navItem {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+  }
+</style>