diff --git a/app/components/nav-bar.tsx b/app/components/nav-bar.tsx
index bc2db917..0c2add69 100644
--- a/app/components/nav-bar.tsx
+++ b/app/components/nav-bar.tsx
@@ -14,18 +14,22 @@ import { useOptionalUser } from '~/utils'
 
 export function 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 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">