[UI/UX] Enhance Profile Page Design & Fix Edit Profile Update Issues

[HarshYadav152]

The current profile page UI feels visually inconsistent with the application's overall theme and aesthetic. Additionally, there are issues with the Edit Profile functionality where profile changes are either not updating correctly or not reflecting immediately in the UI.

This issue focuses on improving both the design/UX of the profile page and the functionality of profile editing to provide a smoother and more polished user experience.

---

📸 Reference Screenshots

Desktop View

Mobile View

Current Profile UI Reference

---

Current Issues

UI/UX Issues

• Profile page design does not fully match the homepage/navbar theme
• Layout spacing and alignment feel inconsistent
• Mobile responsiveness needs improvement
• Profile information hierarchy can be clearer
• Card styling and typography need refinement
• Empty avatar/profile states look unfinished

Functional Issues

• Edit profile changes are not updating correctly
• Updated information may not reflect instantly in the UI
• Possible state synchronization or API refresh issue
• Form interaction/feedback can be improved

---

Expected Behavior

Design Improvements

Update the profile page to better align with the application's modern dark-themed aesthetic and ensure consistency across the app.

Enhancements should include:

• Improved visual hierarchy
• Better spacing and alignment
• Refined profile card styling
• Consistent typography and colors
• Modernized avatar/profile section
• Improved responsive behavior for mobile/tablet devices
• Smooth transitions and hover states where appropriate

Functional Improvements

Ensure the Edit Profile feature works reliably.

Expected functionality:

• Profile updates save successfully
• Changes reflect instantly after saving
• Proper loading and success/error states
• Form validation works correctly
• UI refreshes without requiring manual reload

---

Suggested Enhancements

UI

• Improve profile container/card design
• Add consistent shadows, borders, and gradients
• Enhance edit button styling
• Improve mobile layout spacing
• Better avatar placeholder styling
• Add responsive typography scaling

UX

• Add save success/error toast messages
• Add loading indicators during profile updates
• Prevent accidental empty submissions
• Improve edit mode interaction flow

---

Acceptance Criteria

UI/UX

• Profile page matches application theme and navbar aesthetic
• Responsive across desktop, tablet, and mobile devices
• Improved spacing, alignment, and typography
• Modernized avatar/profile section
• Consistent dark-theme styling

Functionality

• Edit profile updates user data correctly
• Changes reflect instantly in UI after saving
• Proper validation and error handling implemented
• Loading and success states added
• No layout or rendering issues after updates

---

[Muskankr]

Hi @HarshYadav152 , I would like to work on this issue as NSOC'26 Contributor. Could you please assign this to me?

[Anuj-kumar-in]

Hii @HarshYadav152 ,

I Contributing under NSOC'26 And contributing everyday.I will add two different PR one for its UI part and another one for functionality part so you can review code easily.I want to work on this issue. Happy to assign it to me.
Thank you.

[harika880]

Hi @HarshYadav152 , I am contributing under NSoC'26 and would love to work on this issue.
I will handle both parts:

UI/UX — Align profile page with the app's dark theme, fix spacing, alignment, responsiveness, avatar styling, and typography consistency
Functionality — Fix the Edit Profile feature so updates save correctly, reflect instantly in the UI, with proper loading/success/error states and form validation

I'll submit two separate PRs — one for UI and one for functionality — to make review easier.
Could you please assign this issue to me? Thank you!

[HarshYadav152]

@Anuj-kumar-in Will you ready to take this issue?

[Anuj-kumar-in]

@HarshYadav152 yes please

[HarshYadav152]

@Anuj-kumar-in Go for it