diff --git a/apps/rowboat/app/lib/components/user_button.tsx b/apps/rowboat/app/lib/components/user_button.tsx
index e612492f..04180ab1 100644
--- a/apps/rowboat/app/lib/components/user_button.tsx
+++ b/apps/rowboat/app/lib/components/user_button.tsx
@@ -2,24 +2,29 @@
 import { useUser } from '@auth0/nextjs-auth0';
 import { Avatar, Dropdown, DropdownItem, DropdownSection, DropdownTrigger, DropdownMenu } from "@heroui/react";
 import { useRouter } from 'next/navigation';
-import Link from 'next/link';
 
-export function UserButton({ useBilling }: { useBilling?: boolean }) {
+export function UserButton({ useBilling, collapsed }: { useBilling?: boolean, collapsed?: boolean }) {
     const router = useRouter();
     const { user } = useUser();
     if (!user) {
         return <></>;
     }
 
+    const title = user.email ?? user.name ?? 'Unknown user';
     const name = user.name ?? user.email ?? 'Unknown user';
 
     return <Dropdown>
         <DropdownTrigger>
-            <Avatar
-                name={name}
-                size="sm"
-                className="cursor-pointer"
-            />
+            <div className="flex items-center gap-2">
+                <Avatar
+                    name={name}
+                    size='md'
+                    isBordered
+                    radius='md'
+                    className='shrink-0'
+                />
+                {!collapsed && <span className="text-sm truncate">{name}</span>}
+            </div>
         </DropdownTrigger>
         <DropdownMenu
             onAction={(key) => {
@@ -31,7 +36,7 @@ export function UserButton({ useBilling }: { useBilling?: boolean }) {
                 }
             }}
         >
-            <DropdownSection title={name}>
+            <DropdownSection title={title}>
                 {useBilling ? (
                     <DropdownItem key="billing">
                         Billing
diff --git a/apps/rowboat/app/projects/layout/components/sidebar.tsx b/apps/rowboat/app/projects/layout/components/sidebar.tsx
index bd1a92c3..8f4d89db 100644
--- a/apps/rowboat/app/projects/layout/components/sidebar.tsx
+++ b/apps/rowboat/app/projects/layout/components/sidebar.tsx
@@ -282,21 +282,12 @@ export default function Sidebar({ projectId, useAuth, collapsed = false, onToggl
               </Tooltip>
             )}
 
-            {useAuth && (
-              <Tooltip content={collapsed ? "Account" : ""} showArrow placement="right">
-                <div 
-                  className={`
-                    w-full rounded-md flex items-center
-                    text-[15px] font-medium transition-all duration-200
-                    ${collapsed ? 'justify-center py-4' : 'px-4 py-4 gap-3'}
-                    hover:bg-zinc-100 dark:hover:bg-zinc-800/50
-                  `}
-                >
-                  <UserButton useBilling={useBilling} />
-                  {!collapsed && <span>Account</span>}
-                </div>
-              </Tooltip>
-            )}
+            {useAuth && <>
+              {collapsed && <Tooltip content="Account" showArrow placement="right">
+                  <UserButton useBilling={useBilling} collapsed={collapsed} />
+              </Tooltip>}
+              {!collapsed && <UserButton useBilling={useBilling} collapsed={collapsed} />}
+            </>}
           </div>
         </div>
       </aside>