Top menu the login button need show which user login, base on email name

src/components/layout/Header.tsx

@@ -102,12 +102,13 @@ export default function Header() {
             {isMounted && isAuthenticated ? (
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <Button variant="ghost" size="icon" className="rounded-full h-9 w-9 md:h-10 md:w-10">
-                    <UserCircle2 className="h-6 w-6" />
+                  <Button variant="ghost" size="sm" className="px-2 sm:px-3 capitalize">
+                    <UserCircle2 className="mr-2 h-4 w-4" />
+                    {userEmail?.split('@')[0]}
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end">
-                  <DropdownMenuLabel>{t('header.my_account')}</DropdownMenuLabel>
+                  <DropdownMenuLabel className="truncate">{userEmail}</DropdownMenuLabel>
                   <DropdownMenuSeparator />
                   <DropdownMenuItem asChild>
                     <Link href={`/${locale}/dashboard`}>
@@ -154,8 +155,7 @@ export default function Header() {
             ) : (
               // Skeleton for auth buttons during hydration
               <div className="flex items-center gap-2">
-                <div className="h-9 w-20 bg-muted rounded-md animate-pulse"></div>
-                <div className="h-9 w-24 bg-muted rounded-md animate-pulse"></div>
+                <div className="h-9 w-28 bg-muted rounded-md animate-pulse"></div>
               </div>
             )}
           </nav>