diff --git a/apps/frontend/components/auth/HeaderAuthPanel.tsx b/apps/frontend/components/auth/HeaderAuthPanel.tsx
index 47f4af043..b0a2e8c4a 100644
--- a/apps/frontend/components/auth/HeaderAuthPanel.tsx
+++ b/apps/frontend/components/auth/HeaderAuthPanel.tsx
@@ -47,6 +47,7 @@ export default function HeaderAuthPanel({
   const isEditor = group === 'editor'
   const [needsUpdate, setNeedsUpdate] = useState(false)
   const pathname = usePathname()
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
 
   useEffect(() => {
     const checkIfNeedsUpdate = async () => {
@@ -71,7 +72,7 @@ export default function HeaderAuthPanel({
     <div className="ml-2 flex items-center gap-2">
       {session ? (
         <>
-          <DropdownMenu>
+          <DropdownMenu onOpenChange={(open) => setIsDropdownOpen(open)}>
             <DropdownMenuTrigger
               className={cn(
                 'hidden items-center gap-2 rounded-md px-4 py-1 md:flex',
@@ -89,7 +90,9 @@ export default function HeaderAuthPanel({
                   {session?.user.username}
                 </p>
               )}
-              <ChevronDown className="w-4" />
+              <ChevronDown
+                className={cn('w-4 text-white', isDropdownOpen && 'rotate-180')}
+              />
             </DropdownMenuTrigger>
             <DropdownMenuContent
               className={cn(