diff --git a/app/components/nav-bar.tsx b/app/components/nav-bar.tsx
index 60fd86a3..5f02e348 100644
--- a/app/components/nav-bar.tsx
+++ b/app/components/nav-bar.tsx
@@ -16,18 +16,22 @@ import { useTranslation } from 'react-i18next'
 export function NavBar() {
 	const { t } = useTranslation('navbar')
 	const location = useLocation()
+	// User is optional
+	// If no user render Login button
+	const user = useOptionalUser()
 	const parts = location.pathname
 		.split('/')
 		.slice(1)
 		.map((item) => {
 			const decoded = decodeURIComponent(item)
+
+			// respect the way the username is written, taking
+			// it from the user model instead of the url
+			if (item.toLowerCase() === user?.name.toLowerCase()) return user?.name
+
 			return t(decoded.charAt(0).toUpperCase() + decoded.slice(1))
 		}) // prevents empty parts from showing
 
-	// User is optional
-	// If no user render Login button
-	const user = useOptionalUser()
-
 	return (
 		<div className="border-b bg-white p-4 dark:bg-dark-background dark:text-dark-text">
 			<div className="flex h-16 items-center justify-between">