diff --git a/client/src/components/header/nav.tsx b/client/src/components/header/nav.tsx
index 68d2f24..26938fb 100644
--- a/client/src/components/header/nav.tsx
+++ b/client/src/components/header/nav.tsx
@@ -5,13 +5,17 @@ export function Nav() {
   return (
     <nav>
       <ul>
-        <li>
-          <Link to="/">Home</Link>
-        </li>
-        <li>
-          <Link to="/about">About</Link>
-        </li>
+        <NavLink path="/" name="Home" />
+        <NavLink path="/about" name="About" />
       </ul>
     </nav>
   );
 }
+
+function NavLink(props: { path: string; name: string }) {
+  return (
+    <li>
+      <Link to={props.path}>{props.name}</Link>
+    </li>
+  );
+}