diff --git a/dapp/src/components/Header/Navigation/Navigation.tsx b/dapp/src/components/Header/Navigation/Navigation.tsx
index bdc668687..f2626dd67 100644
--- a/dapp/src/components/Header/Navigation/Navigation.tsx
+++ b/dapp/src/components/Header/Navigation/Navigation.tsx
@@ -2,7 +2,7 @@ import React from "react"
 import { Box, BoxProps, HStack, List } from "@chakra-ui/react"
 import { EXTERNAL_HREF } from "#/constants"
 import { routerPath } from "#/router/path"
-import { isString } from "#/utils"
+import { router } from "#/utils"
 import NavigationItem, { NavigationItemProps } from "./NavigationItem"
 
 const NAVIGATION_ITEMS: NavigationItemProps[] = [
@@ -20,10 +20,7 @@ function Navigation(props: BoxProps) {
     <Box as="nav" {...props}>
       <HStack as={List} spacing={5} ml={12}>
         {NAVIGATION_ITEMS.map((item) => (
-          <NavigationItem
-            key={isString(item.to) ? item.to : item.to.pathname}
-            {...item}
-          />
+          <NavigationItem key={router.getURLPath(item.to)} {...item} />
         ))}
       </HStack>
     </Box>
diff --git a/dapp/src/components/Header/Navigation/NavigationItem.tsx b/dapp/src/components/Header/Navigation/NavigationItem.tsx
index 3366abe11..817de9ce8 100644
--- a/dapp/src/components/Header/Navigation/NavigationItem.tsx
+++ b/dapp/src/components/Header/Navigation/NavigationItem.tsx
@@ -2,7 +2,7 @@ import React from "react"
 import { ListItem, useMultiStyleConfig } from "@chakra-ui/react"
 import { To, useSearchParams } from "react-router-dom"
 import { useModal } from "#/hooks"
-import { isString } from "#/utils"
+import { router } from "#/utils"
 import { NavLink, NavLinkProps } from "../../shared/NavLink"
 
 export type NavigationItemProps = NavLinkProps
@@ -20,7 +20,7 @@ function NavigationItem(props: NavigationItemProps) {
   const to: To = isExternal
     ? defaultTo
     : {
-        pathname: isString(defaultTo) ? defaultTo : defaultTo.pathname,
+        pathname: router.getURLPath(defaultTo),
         search: searchParams.toString(),
       }
 
diff --git a/dapp/src/utils/index.ts b/dapp/src/utils/index.ts
index 43b73bfed..5cf970f2b 100644
--- a/dapp/src/utils/index.ts
+++ b/dapp/src/utils/index.ts
@@ -16,3 +16,4 @@ export { default as orangeKit } from "./orangeKit"
 export { default as userAgent } from "./userAgent"
 export { default as referralProgram } from "./referralProgram"
 export { default as mezoPortalAPI } from "./mezoPortalApi"
+export { default as router } from "./router"
diff --git a/dapp/src/utils/router.ts b/dapp/src/utils/router.ts
new file mode 100644
index 000000000..f523a3c85
--- /dev/null
+++ b/dapp/src/utils/router.ts
@@ -0,0 +1,6 @@
+import { To } from "react-router-dom"
+import { isString } from "./type-check"
+
+const getURLPath = (to: To) => (isString(to) ? to : to.pathname)
+
+export default { getURLPath }