diff --git a/packages/app-project/src/components/ProjectHeader/components/DropdownNav/DropdownNav.js b/packages/app-project/src/components/ProjectHeader/components/DropdownNav/DropdownNav.js
index 598d6164b6..1667cc3117 100644
--- a/packages/app-project/src/components/ProjectHeader/components/DropdownNav/DropdownNav.js
+++ b/packages/app-project/src/components/ProjectHeader/components/DropdownNav/DropdownNav.js
@@ -6,6 +6,7 @@ import { bool, object, oneOfType, string } from 'prop-types'
 import { useState } from 'react'
 import styled, { css } from 'styled-components'
 import { useTranslation } from 'next-i18next'
+import { useRouter } from 'next/router'
 
 import { useProjectNavigation } from '../../hooks'
 
@@ -47,7 +48,7 @@ function DropdownNav({
   className,
   margin = defaultMargin,
   organizationSlug = '',
-  organizationTitle = '',
+  organizationTitle = ''
 }) {
   const { t } = useTranslation('components')
   const navLinks = useProjectNavigation(adminMode)
@@ -61,6 +62,32 @@ function DropdownNav({
     setIsOpen(true)
   }
 
+  function NavItem({ navLink }) {
+    const router = useRouter()
+    let isCurrentPage
+    if (router?.asPath) {
+      const routerPath = router.asPath.split('/')
+      const hrefPath = navLink.href.split('/')
+      /*
+        The path arrays will be ['', owner, project, section, ...rest].
+        The section is always the fourth item.
+      */
+      isCurrentPage = routerPath[3] === hrefPath[3]
+    }
+
+    return (
+      <Box as='li' key={navLink.href}>
+        <NavLink
+          aria-current={isCurrentPage ? 'page' : undefined}
+          color='white'
+          link={navLink}
+          StyledAnchor={StyledAnchor}
+          weight='bold'
+        />
+      </Box>
+    )
+  }
+
   const dropContent = (
     <Box
       aria-label={t('ProjectHeader.ProjectNav.ariaLabel')}
@@ -69,48 +96,24 @@ function DropdownNav({
       elevation='medium'
       margin={{ top: 'medium ' }}
     >
-      <Box
-        as='ul'
-        pad='0px'
-      >
-        <>
-          {navLinks.map(navLink => (
-            <Box
-              as='li'
-              key={navLink.href}
-            >
-              <NavLink
-                color='white'
-                link={navLink}
-                StyledAnchor={StyledAnchor}
-                weight='bold'
-              />
-            </Box>
-          ))}
-        </>
+      <Box as='ul' pad='0px'>
+        {navLinks.map(navLink => (
+          <NavItem key={navLink.href} navLink={navLink} />
+        ))}
         {organizationTitle ? (
-          <Box
-            as='li'
-            key={organizationSlug}
-          >
+          <Box as='li' key={organizationSlug}>
             <StyledAnchor
               href={`/organizations/${organizationSlug}`}
-              label={(
+              label={
                 <Box pad='none'>
-                  <SpacedText
-                    color='white'
-                    size='xsmall'
-                  >
+                  <SpacedText color='white' size='xsmall'>
                     {t('ProjectHeader.organization')}
                   </SpacedText>
-                  <SpacedText
-                    color='white'
-                    weight='bold'
-                  >
+                  <SpacedText color='white' weight='bold'>
                     {organizationTitle}
                   </SpacedText>
                 </Box>
-              )}
+              }
             />
           </Box>
         ) : null}
@@ -160,7 +163,4 @@ DropdownNav.propTypes = {
 }
 
 export default DropdownNav
-export {
-  DropdownNav,
-  StyledDropButton
-}
+// export { DropdownNav, StyledDropButton }
diff --git a/packages/app-project/src/components/ProjectHeader/components/Nav/Nav.js b/packages/app-project/src/components/ProjectHeader/components/Nav/Nav.js
index 337d5afa89..467a7e9f40 100644
--- a/packages/app-project/src/components/ProjectHeader/components/Nav/Nav.js
+++ b/packages/app-project/src/components/ProjectHeader/components/Nav/Nav.js
@@ -1,5 +1,6 @@
 import { SpacedText } from '@zooniverse/react-components'
 import { Anchor, Box } from 'grommet'
+import { useRouter } from 'next/router'
 import { bool } from 'prop-types'
 import styled, { css } from 'styled-components'
 import { useTranslation } from 'next-i18next'
@@ -28,31 +29,50 @@ const StyledAnchor = styled(Anchor)`
     &[href]:hover {
       border-bottom-color: ${props.color};
     }
-    &:not([href]) {
+    &[aria-current='page'] {
       cursor: default;
       border-bottom-color: ${props.color};
     }
   `}
 `
 
-function Nav({
-  adminMode = false,
-}) {
+function NavItem({ navLink }) {
+  const router = useRouter()
+
+  let isCurrentPage
+  if (router?.isReady) {
+    const routerPath = router.asPath.split('/')
+    const hrefPath = navLink.href.split('/')
+     /*
+      Client-side routerPath will be ['', owner, project, section, ...rest].
+      The link hrefPath will be ['', owner, project, section, ...rest].
+      The section is always the fourth item in the array.
+    */
+    isCurrentPage = routerPath[3] === hrefPath[3]
+  }
+
+  return (
+    <Box as='li' key={navLink.href} flex='grow' pad={{ left: 'small' }}>
+      <NavLink
+        aria-current={ isCurrentPage ? 'page' : undefined }
+        color='white'
+        link={navLink}
+        StyledAnchor={StyledAnchor}
+        StyledSpacedText={StyledSpacedText}
+        weight='bold'
+      />
+    </Box>
+  )
+}
+
+function Nav({ adminMode = false }) {
   const navLinks = useProjectNavigation(adminMode)
   const { t } = useTranslation('components')
   return (
     <Box aria-label={t('ProjectHeader.ProjectNav.ariaLabel')} as='nav'>
       <Box as='ul' direction='row' style={{ paddingInlineStart: 0 }}>
         {navLinks.map(navLink => (
-          <Box as='li' key={navLink.href} flex='grow' pad={{ left: 'small' }}>
-            <NavLink
-              color='white'
-              link={navLink}
-              StyledAnchor={StyledAnchor}
-              StyledSpacedText={StyledSpacedText}
-              weight='bold'
-            />
-          </Box>
+          <NavItem key={navLink.href} navLink={navLink} />
         ))}
       </Box>
     </Box>
diff --git a/packages/app-project/src/screens/ProjectAboutPage/components/AboutDropdownNav/AboutDropdownNav.js b/packages/app-project/src/screens/ProjectAboutPage/components/AboutDropdownNav/AboutDropdownNav.js
index e3fe48ab6d..4080990432 100644
--- a/packages/app-project/src/screens/ProjectAboutPage/components/AboutDropdownNav/AboutDropdownNav.js
+++ b/packages/app-project/src/screens/ProjectAboutPage/components/AboutDropdownNav/AboutDropdownNav.js
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { arrayOf, object, string } from 'prop-types'
+import { arrayOf, string } from 'prop-types'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
 
@@ -9,8 +9,7 @@ import { FormDown } from 'grommet-icons'
 import { SpacedText } from '@zooniverse/react-components'
 import AboutNavLink from '../AboutNavLink'
 
-// this is a separate componenet specifically for testing with enzyme
-export const AboutDropContent = ({ aboutNavLinks }) => {
+const AboutDropContent = ({ aboutNavLinks }) => {
   const router = useRouter()
   const { owner, project } = router.query
   const baseUrl = `/${owner}/${project}/about`
@@ -24,14 +23,12 @@ export const AboutDropContent = ({ aboutNavLinks }) => {
           href: `${baseUrl}/research`,
           text: t('About.PageHeading.title.research')
         }}
-        router={router}
       />
       <AboutNavLink
         link={{
           href: `${baseUrl}/team`,
           text: t('About.PageHeading.title.team')
         }}
-        router={router}
       />
       {aboutNavLinks.includes('results') && (
         <AboutNavLink
@@ -39,7 +36,6 @@ export const AboutDropContent = ({ aboutNavLinks }) => {
             href: `${baseUrl}/results`,
             text: t('About.PageHeading.title.results')
           }}
-          router={router}
         />
       )}
       {aboutNavLinks.includes('education') && (
@@ -48,7 +44,6 @@ export const AboutDropContent = ({ aboutNavLinks }) => {
             href: `${baseUrl}/education`,
             text: t('About.PageHeading.title.education')
           }}
-          router={router}
         />
       )}
       {aboutNavLinks.includes('faq') && (
@@ -57,14 +52,13 @@ export const AboutDropContent = ({ aboutNavLinks }) => {
             href: `${baseUrl}/faq`,
             text: t('About.PageHeading.title.faq')
           }}
-          router={router}
         />
       )}
     </Nav>
   )
 }
 
-const AboutDropdownNav = ({ aboutNavLinks, router }) => {
+const AboutDropdownNav = ({ aboutNavLinks }) => {
   const [isOpen, setIsOpen] = useState(false)
 
   const handleOpen = () => setIsOpen(!isOpen)
@@ -77,7 +71,7 @@ const AboutDropdownNav = ({ aboutNavLinks, router }) => {
       isOpen={isOpen}
       alignSelf='center'
       dropContent={
-        <AboutDropContent aboutNavLinks={aboutNavLinks} router={router} />
+        <AboutDropContent aboutNavLinks={aboutNavLinks} />
       }
       onClose={handleOpen}
       onOpen={handleOpen}
@@ -94,7 +88,6 @@ const AboutDropdownNav = ({ aboutNavLinks, router }) => {
 
 AboutDropdownNav.propTypes = {
   aboutNavLinks: arrayOf(string),
-  router: object
 }
 
 export default AboutDropdownNav
diff --git a/packages/app-project/src/screens/ProjectAboutPage/components/AboutNavLink/AboutNavLink.js b/packages/app-project/src/screens/ProjectAboutPage/components/AboutNavLink/AboutNavLink.js
index 069e23f642..75d1da6946 100644
--- a/packages/app-project/src/screens/ProjectAboutPage/components/AboutNavLink/AboutNavLink.js
+++ b/packages/app-project/src/screens/ProjectAboutPage/components/AboutNavLink/AboutNavLink.js
@@ -1,10 +1,10 @@
-import { string, object, shape } from 'prop-types'
+import { Anchor, Box } from 'grommet'
+import { useRouter } from 'next/router'
+import { string, shape } from 'prop-types'
 import styled from 'styled-components'
-import addQueryParams from '@helpers/addQueryParams'
 
-/** Components */
+import addQueryParams from '@helpers/addQueryParams'
 import NavLink from '@shared/components/NavLink'
-import { Anchor, Box } from 'grommet'
 
 const StyledAnchor = styled(Anchor)`
   &:hover {
@@ -12,9 +12,10 @@ const StyledAnchor = styled(Anchor)`
   }
 `
 
-const AboutNavLink = ({ router, link }) => {
+const AboutNavLink = ({ link }) => {
   const { href } = link
-  const isCurrentPage = router?.asPath === addQueryParams(href)
+  const router = useRouter()
+  const isCurrentPage = router?.isReady && router?.asPath === addQueryParams(href)
 
   return (
     <Box
@@ -22,6 +23,7 @@ const AboutNavLink = ({ router, link }) => {
       pad={{ horizontal: '20px', vertical: '5px' }}
     >
       <NavLink
+        aria-current={ isCurrentPage ? 'page' : undefined }
         link={link}
         color={{ dark: 'neutral-6', light: 'dark-3' }}
         weight={isCurrentPage ? 'bold' : 'normal'}
@@ -35,8 +37,7 @@ AboutNavLink.propTypes = {
   link: shape({
     href: string,
     text: string
-  }),
-  router: object
+  })
 }
 
 export default AboutNavLink
diff --git a/packages/app-project/src/screens/ProjectAboutPage/components/AboutSidebar/AboutSidebar.js b/packages/app-project/src/screens/ProjectAboutPage/components/AboutSidebar/AboutSidebar.js
index 27f7b7f5b8..c7e5b3e521 100644
--- a/packages/app-project/src/screens/ProjectAboutPage/components/AboutSidebar/AboutSidebar.js
+++ b/packages/app-project/src/screens/ProjectAboutPage/components/AboutSidebar/AboutSidebar.js
@@ -1,7 +1,7 @@
 import AboutNavLink from '../AboutNavLink'
 import { Nav } from 'grommet'
 import { useRouter } from 'next/router'
-import { arrayOf, object, string } from 'prop-types'
+import { arrayOf, string } from 'prop-types'
 import { useTranslation } from 'next-i18next'
 
 const AboutSidebar = ({ aboutNavLinks }) => {
@@ -18,14 +18,12 @@ const AboutSidebar = ({ aboutNavLinks }) => {
           href: `${baseUrl}/research`,
           text: t('About.PageHeading.title.research')
         }}
-        router={router}
       />
       <AboutNavLink
         link={{
           href: `${baseUrl}/team`,
           text: t('About.PageHeading.title.team')
         }}
-        router={router}
       />
       {aboutNavLinks.includes('results') && (
         <AboutNavLink
@@ -33,7 +31,6 @@ const AboutSidebar = ({ aboutNavLinks }) => {
             href: `${baseUrl}/results`,
             text: t('About.PageHeading.title.results')
           }}
-          router={router}
         />
       )}
       {aboutNavLinks.includes('education') && (
@@ -42,7 +39,6 @@ const AboutSidebar = ({ aboutNavLinks }) => {
             href: `${baseUrl}/education`,
             text: t('About.PageHeading.title.education')
           }}
-          router={router}
         />
       )}
       {aboutNavLinks.includes('faq') && (
@@ -51,7 +47,6 @@ const AboutSidebar = ({ aboutNavLinks }) => {
             href: `${baseUrl}/faq`,
             text: t('About.PageHeading.title.faq')
           }}
-          router={router}
         />
       )}
     </Nav>
@@ -60,7 +55,6 @@ const AboutSidebar = ({ aboutNavLinks }) => {
 
 AboutSidebar.propTypes = {
   aboutNavLinks: arrayOf(string),
-  router: object
 }
 
 export default AboutSidebar
diff --git a/packages/app-project/src/shared/components/NavLink/NavLink.js b/packages/app-project/src/shared/components/NavLink/NavLink.js
index b7ebc0300d..d406b8b540 100644
--- a/packages/app-project/src/shared/components/NavLink/NavLink.js
+++ b/packages/app-project/src/shared/components/NavLink/NavLink.js
@@ -1,7 +1,6 @@
 import { SpacedText } from '@zooniverse/react-components'
 import { Anchor } from 'grommet'
 import Link from 'next/link'
-import { withRouter } from 'next/router'
 import PropTypes from 'prop-types'
 
 import addQueryParams from '@helpers/addQueryParams'
@@ -10,23 +9,15 @@ function NavLink ({
   color,
   disabled = false,
   link,
-  router = {},
   StyledAnchor = Anchor,
   StyledSpacedText = SpacedText,
   weight,
   ...anchorProps
 }) {
   const { href, text } = link
-  const isCurrentPage = router?.asPath === addQueryParams(href)
 
   const label = <StyledSpacedText color={color} weight={weight}>{text}</StyledSpacedText>
 
-  if (isCurrentPage) {
-    return (
-      <StyledAnchor color={color} label={label} {...anchorProps} />
-    )
-  }
-
   if (disabled) {
     // On the surface this may look odd, since you can't disable links
     // Sometimes we want to render anchors that look like buttons
@@ -39,7 +30,7 @@ function NavLink ({
     // We also do not wrap it with next.js's Link
     return <StyledAnchor as='span' color={color} disabled label={label} {...anchorProps} />
   }
-  
+
   return (
     <StyledAnchor
       forwardedAs={Link}
@@ -59,11 +50,9 @@ NavLink.propTypes = {
     href: PropTypes.string,
     text: PropTypes.string
   }).isRequired,
-  router: PropTypes.object,
   StyledAnchor: PropTypes.elementType,
   StyledSpacedText: PropTypes.elementType,
   weight: PropTypes.string
 }
 
-export default withRouter(NavLink)
-export { NavLink }
+export default NavLink
diff --git a/packages/app-project/src/shared/components/NavLink/NavLink.mock.js b/packages/app-project/src/shared/components/NavLink/NavLink.mock.js
index 56e8875239..759d6d5d7d 100644
--- a/packages/app-project/src/shared/components/NavLink/NavLink.mock.js
+++ b/packages/app-project/src/shared/components/NavLink/NavLink.mock.js
@@ -8,8 +8,8 @@ export const NavLinkCurrentPageMock = {
 }
 
 export const NavLinkOtherPageMock = {
-  asPath: '/projects/foo/bar/bing',
-  pathname: '/projects/[project]/[owner]/bing',
+  asPath: '/foo/bar/bing',
+  pathname: '/[project]/[owner]/bing',
   query: {
     owner: 'foo',
     project: 'bar'
@@ -17,6 +17,6 @@ export const NavLinkOtherPageMock = {
 }
 
 export const NavLinkMock = {
-  href: '/projects/foo/bar/baz',
+  href: '/foo/bar/baz',
   text: 'Foobar'
 }
diff --git a/packages/app-project/src/shared/components/NavLink/NavLink.spec.js b/packages/app-project/src/shared/components/NavLink/NavLink.spec.js
index 5002f7392f..d4f9f160f5 100644
--- a/packages/app-project/src/shared/components/NavLink/NavLink.spec.js
+++ b/packages/app-project/src/shared/components/NavLink/NavLink.spec.js
@@ -10,8 +10,8 @@ describe('Component > NavLink', function () {
       render(<OnCurrentPageStory />)
     })
 
-    it('should not have a link', function () {
-      expect(screen.queryByRole('link')).to.be.null()
+    it('should have the correct link', function () {
+      expect(screen.getByRole('link').getAttribute('href')).to.equal(NavLinkMock.href)
     })
 
     it('should have the correct text', function () {