UI BUG: Header Layout Feels Cluttered and Needs Better Hierarchy

[KAkhinish2108]

Is there an existing issue for this?

• I have searched the existing issues

What happened?

📌 Description

The current header layout feels visually cluttered and lacks a clear UI hierarchy. Key actions are placed in positions that reduce usability and make the header look messy rather than intentional.

This affects first impressions and overall navigation clarity.

🔍 Problems Identified

1.Theme Toggle Button

i. Currently placed in the center, which breaks standard UI conventions.
ii. Theme toggles are typically secondary actions and should not occupy central focus.

2. Search Button Placement

   i. The search button appears after the theme toggle.
   ii. From a UX standpoint, search is a primary action and should be more accessible.

3. GitHub Redirect Button

   i. The GitHub redirect button is visually detached from the GitHub logo.
   ii. This reduces discoverability and feels inconsistent.

✅ Proposed Improvements

i. Move the theme toggle button to the corner (top-right preferred).

ii. Place the search button before the theme toggle, giving it higher priority.

iii. Position the GitHub redirect button next to the GitHub logo to create a clear visual association.

🎯 Expected Outcome

i. Cleaner and more professional-looking header

ii. Better visual hierarchy and usability

iii. Improved alignment with common UI/UX best practices

📸 ScreenShots

Record

• I agree to follow this project's Code of Conduct

[github-actions]

👋 Thanks for opening this issue! The maintainers will review it shortly. Till then, do not open any PR. This is a strict rule we like to follow around here :)

[Abhinandankaushik]

hey @rahulharpal1603
i would like to work on this issue
please assign it to me

[KAkhinish2108]

@Abhinandankaushik

Basically this is currently a new repo so it's like you yourself has to open an Issue if you feel that there is any, then by yourself you have to solve them..