diff --git a/src/app/components/NavigationLink/NavigationLink.tsx b/src/app/components/NavigationLink/NavigationLink.tsx
index 1a2304d..d79a341 100644
--- a/src/app/components/NavigationLink/NavigationLink.tsx
+++ b/src/app/components/NavigationLink/NavigationLink.tsx
@@ -11,8 +11,7 @@ export function NavigationLink({
   children,
   onClick,
 }: NavigationLinkProps) {
-  const pathname = usePathname();
-  const isActive = pathname.includes(href.toString());
+  const isActive = useIsActive(href);
 
   return (
     <Link
@@ -22,12 +21,30 @@ export function NavigationLink({
       {...(isActive ? { 'aria-current': 'page' } : {})}
     >
       <span
-        className={classNames('lg:text-white', {
-          underline: isActive,
-        })}
+        className={classNames(
+          "lg:text-l font-['Public Sans'] font-bold leading-7 lg:text-white",
+          {
+            'underline underline-offset-8': isActive,
+          },
+        )}
       >
         {children}
       </span>
     </Link>
   );
 }
+
+/**
+ * Given a nav Link URL, returns `true` if the current page in the application matches
+ * the navigation Link's URL. If the user is on a subroute of a matching page, that will also match.
+ * @param url URL of the navigation Link
+ * @returns `true` if the current route matches the nav Link's URL, otherwise `false`
+ */
+function useIsActive(url: NavigationLinkProps['href']) {
+  const pathname = usePathname();
+  const urlStr = url.toString();
+  return (
+    pathname === urlStr ||
+    (pathname.startsWith(urlStr) && (urlStr !== '/' || pathname === '/'))
+  );
+}