Now let me read the existing layout and globals.css to understand the current setup before building the profile page:

Now I'll create a mobile-first user profile page with a dark, clean aesthetic inspired by the design brief. I'll update the globals.css with a dark sports-app theme, update the layout metadata, and create the profile page with components.

Good, the dark theme was already removed. Now let me create the profile page and supporting components:

I've created a mobile-first user profile page with a dark, modern sports-app aesthetic. The page features:

• Profile Header: Shows the user's avatar (with fallback initials), full name, display name with @ prefix, and email address. Includes a navigation bar with back and settings buttons.
• Leagues Section: Displays a scrollable list of league cards, each showing the league name, sport type, member count, user's role (member/captain/admin), and season status (active/upcoming/completed) with color-coded badges.

The design uses a dark blue-gray color scheme with teal accent colors for the primary elements. The layout is constrained to max-w-md for optimal mobile viewing and includes proper touch targets, semantic HTML, and accessible patterns throughout.

I see the profile header already shows the display name (as @alexthunder). I'll assume you want to make it an editable field. Let me also check the page to see how the data is structured:

I see the display name is already being shown. The profile shows @mjohnson23 under the full name. Could you clarify what you'd like? Are you looking for:

1. An editable input field for the display name (so users can change it)
2. A more prominent display of the display name (different styling/placement)
3. A separate info card section showing profile fields including display name

Which approach would you prefer?