diff --git a/.changeset/fix_unlickable_handles.md b/.changeset/fix_unlickable_handles.md
new file mode 100644
index 000000000..5fb8fb3a1
--- /dev/null
+++ b/.changeset/fix_unlickable_handles.md
@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Fix clickable handles
diff --git a/src/app/components/user-profile/UserHero.tsx b/src/app/components/user-profile/UserHero.tsx
index 622315d3d..ba79f3fed 100644
--- a/src/app/components/user-profile/UserHero.tsx
+++ b/src/app/components/user-profile/UserHero.tsx
@@ -318,28 +318,34 @@ function UserHeroNameInner({
         )}
       </Box>
       <Box alignItems="Center" gap="100" wrap="Wrap">
-        <Text size="T200" className={classNames(BreakWord, LineClamp3)} title={username}>
-          <Chip
-            onClick={() => {
-              if (username && server) {
-                copyToClipboard(`@${username}:${server}`);
-                isSuccess.current = true;
-              } else isSuccess.current = false;
-              setCopied();
-            }}
-            style={{ backgroundColor: 'transparent', padding: '0' }}
-            onPointerEnter={() => setIsHovered(true)}
-            onPointerLeave={() => setIsHovered(false)}
-            before={`@${username}`}
-            after={
-              copied || isHovered ? (
-                profileIcon(copied ? (isSuccess ? Check : CrossIcon) : CopyIcon)
-              ) : (
-                <></>
-              )
-            }
-          />
-        </Text>
+        <Chip
+          onClick={(evt) => {
+            evt.stopPropagation();
+            if (username && server) {
+              copyToClipboard(`@${username}:${server}`);
+              isSuccess.current = true;
+            } else isSuccess.current = false;
+            setCopied();
+          }}
+          style={{ backgroundColor: 'transparent', color: 'inherit', padding: '0' }}
+          onPointerEnter={() => setIsHovered(true)}
+          onPointerLeave={() => setIsHovered(false)}
+          before={
+            <Text
+              size="T200"
+              className={classNames(BreakWord, LineClamp3)}
+              title={username}
+              truncate
+            >{`@${username}`}</Text>
+          }
+          after={
+            copied || isHovered ? (
+              profileIcon(copied ? (isSuccess ? Check : CrossIcon) : CopyIcon)
+            ) : (
+              <></>
+            )
+          }
+        />
       </Box>
     </Box>
   );
diff --git a/src/app/components/user-profile/UserRoomProfile.tsx b/src/app/components/user-profile/UserRoomProfile.tsx
index 31903dc52..5f41ce764 100644
--- a/src/app/components/user-profile/UserRoomProfile.tsx
+++ b/src/app/components/user-profile/UserRoomProfile.tsx
@@ -579,7 +579,7 @@ export function UserRoomProfile({ userId, initialProfile }: Readonly<UserRoomPro
             padding: showCustomHeroCard && innerColor ? config.space.S200 : config.space.S300,
           }}
         >
-          <Box gap="200" alignItems="Center" wrap="Wrap">
+          <Box gap="200" alignItems="Center" wrap="Wrap" style={{ color: textColor }}>
             <UserHeroName
               displayName={displayName}
               userId={userId}
diff --git a/src/app/hooks/timeline/useTimelineEventRenderer.tsx b/src/app/hooks/timeline/useTimelineEventRenderer.tsx
index c9f651b58..3b8d639b6 100644
--- a/src/app/hooks/timeline/useTimelineEventRenderer.tsx
+++ b/src/app/hooks/timeline/useTimelineEventRenderer.tsx
@@ -437,7 +437,8 @@ export function useTimelineEventRenderer({
       ) : null;
 
     const reactionRelations = getEventReactions(timelineSet, mEventId);
-    const reactions = reactionRelations?.getSortedAnnotationsByKey();
+    const annotations = reactionRelations?.getSortedAnnotationsByKey();
+    const reactions = annotations?.filter((annotation) => annotation[1].size > 0);
     const hasReactions = reactions && reactions.length > 0;
 
     return (
@@ -540,7 +541,8 @@ export function useTimelineEventRenderer({
             : (threadReplyTargetId ?? rawReplyEventId);
 
         const reactionRelations = getEventReactions(timelineSet, mEventId);
-        const reactions = reactionRelations?.getSortedAnnotationsByKey();
+        const annotations = reactionRelations?.getSortedAnnotationsByKey();
+        const reactions = annotations?.filter((annotation) => annotation[1].size > 0);
         const hasReactions = reactions && reactions.length > 0;
         const highlighted = focusItem?.index === item && focusItem.highlight;
         const marked = activeReplyId === mEventId && !suppressMark;
@@ -645,7 +647,7 @@ export function useTimelineEventRenderer({
               if (!reactionRelations && !threadChip) return undefined;
               return (
                 <>
-                  {reactionRelations && (
+                  {reactionRelations && hasReactions && (
                     <Reactions
                       style={{ marginTop: config.space.S200 }}
                       room={room}
@@ -709,7 +711,8 @@ export function useTimelineEventRenderer({
             : (threadReplyTargetId ?? rawReplyEventId);
 
         const reactionRelations = getEventReactions(timelineSet, mEventId);
-        const reactions = reactionRelations?.getSortedAnnotationsByKey();
+        const annotations = reactionRelations?.getSortedAnnotationsByKey();
+        const reactions = annotations?.filter((annotation) => annotation[1].size > 0);
         const hasReactions = reactions && reactions.length > 0;
         const highlighted = focusItem?.index === item && focusItem.highlight;
         const marked = activeReplyId === mEventId && !suppressMark;
@@ -777,7 +780,7 @@ export function useTimelineEventRenderer({
               if (!reactionRelations && !threadChip) return undefined;
               return (
                 <>
-                  {reactionRelations && (
+                  {reactionRelations && hasReactions && (
                     <Reactions
                       style={{ marginTop: config.space.S200 }}
                       room={room}
@@ -888,7 +891,8 @@ export function useTimelineEventRenderer({
             : (threadReplyTargetId ?? rawReplyEventId);
 
         const reactionRelations = getEventReactions(timelineSet, mEventId);
-        const reactions = reactionRelations?.getSortedAnnotationsByKey();
+        const annotations = reactionRelations?.getSortedAnnotationsByKey();
+        const reactions = annotations?.filter((annotation) => annotation[1].size > 0);
         const hasReactions = reactions && reactions.length > 0;
         const highlighted = focusItem?.index === item && focusItem.highlight;
         const marked = activeReplyId === mEventId && !suppressMark;
@@ -949,7 +953,7 @@ export function useTimelineEventRenderer({
               if (!reactionRelations && !threadChip) return undefined;
               return (
                 <>
-                  {reactionRelations && (
+                  {reactionRelations && hasReactions && (
                     <Reactions
                       style={{ marginTop: config.space.S200 }}
                       room={room}
@@ -1014,7 +1018,8 @@ export function useTimelineEventRenderer({
             : (threadReplyTargetId ?? rawReplyEventId);
 
         const reactionRelations = getEventReactions(timelineSet, mEventId);
-        const reactions = reactionRelations?.getSortedAnnotationsByKey();
+        const annotations = reactionRelations?.getSortedAnnotationsByKey();
+        const reactions = annotations?.filter((annotation) => annotation[1].size > 0);
         const hasReactions = reactions && reactions.length > 0;
         const highlighted = focusItem?.index === item && focusItem.highlight;
         const marked = activeReplyId === mEventId && !suppressMark;
@@ -1119,7 +1124,7 @@ export function useTimelineEventRenderer({
               if (!reactionRelations && !threadChip) return undefined;
               return (
                 <>
-                  {reactionRelations && (
+                  {reactionRelations && hasReactions && (
                     <Reactions
                       style={{ marginTop: config.space.S200 }}
                       room={room}
@@ -1186,7 +1191,8 @@ export function useTimelineEventRenderer({
 
         const senderId = mEvent.getSender() ?? '';
         const reactionRelations = getEventReactions(timelineSet, mEventId);
-        const reactions = reactionRelations?.getSortedAnnotationsByKey();
+        const annotations = reactionRelations?.getSortedAnnotationsByKey();
+        const reactions = annotations?.filter((annotation) => annotation[1].size > 0);
         const hasReactions = reactions && reactions.length > 0;
 
         return (
@@ -1226,7 +1232,7 @@ export function useTimelineEventRenderer({
               if (!reactionRelations && !threadChip) return undefined;
               return (
                 <>
-                  {reactionRelations && (
+                  {reactionRelations && hasReactions && (
                     <Reactions
                       style={{ marginTop: config.space.S200 }}
                       room={room}
@@ -1279,7 +1285,8 @@ export function useTimelineEventRenderer({
         );
 
         const reactionRelations = getEventReactions(timelineSet, mEventId);
-        const reactions = reactionRelations?.getSortedAnnotationsByKey();
+        const annotations = reactionRelations?.getSortedAnnotationsByKey();
+        const reactions = annotations?.filter((annotation) => annotation[1].size > 0);
         const hasReactions = reactions && reactions.length > 0;
 
         return (
@@ -1319,7 +1326,7 @@ export function useTimelineEventRenderer({
               if (!reactionRelations && !threadChip) return undefined;
               return (
                 <>
-                  {reactionRelations && (
+                  {reactionRelations && hasReactions && (
                     <Reactions
                       style={{ marginTop: config.space.S200 }}
                       room={room}
@@ -1374,7 +1381,8 @@ export function useTimelineEventRenderer({
         );
 
         const reactionRelations = getEventReactions(timelineSet, mEventId);
-        const reactions = reactionRelations?.getSortedAnnotationsByKey();
+        const annotations = reactionRelations?.getSortedAnnotationsByKey();
+        const reactions = annotations?.filter((annotation) => annotation[1].size > 0);
         const hasReactions = reactions && reactions.length > 0;
 
         return (
@@ -1414,7 +1422,7 @@ export function useTimelineEventRenderer({
               if (!reactionRelations && !threadChip) return undefined;
               return (
                 <>
-                  {reactionRelations && (
+                  {reactionRelations && hasReactions && (
                     <Reactions
                       style={{ marginTop: config.space.S200 }}
                       room={room}
@@ -1469,7 +1477,8 @@ export function useTimelineEventRenderer({
         );
 
         const reactionRelations = getEventReactions(timelineSet, mEventId);
-        const reactions = reactionRelations?.getSortedAnnotationsByKey();
+        const annotations = reactionRelations?.getSortedAnnotationsByKey();
+        const reactions = annotations?.filter((annotation) => annotation[1].size > 0);
         const hasReactions = reactions && reactions.length > 0;
 
         return (
@@ -1509,7 +1518,7 @@ export function useTimelineEventRenderer({
               if (!reactionRelations && !threadChip) return undefined;
               return (
                 <>
-                  {reactionRelations && (
+                  {reactionRelations && hasReactions && (
                     <Reactions
                       style={{ marginTop: config.space.S200 }}
                       room={room}
@@ -1571,7 +1580,8 @@ export function useTimelineEventRenderer({
         );
 
         const reactionRelations = getEventReactions(timelineSet, mEventId);
-        const reactions = reactionRelations?.getSortedAnnotationsByKey();
+        const annotations = reactionRelations?.getSortedAnnotationsByKey();
+        const reactions = annotations?.filter((annotation) => annotation[1].size > 0);
         const hasReactions = reactions && reactions.length > 0;
 
         return (
@@ -1611,7 +1621,7 @@ export function useTimelineEventRenderer({
               if (!reactionRelations && !threadChip) return undefined;
               return (
                 <>
-                  {reactionRelations && (
+                  {reactionRelations && hasReactions && (
                     <Reactions
                       style={{ marginTop: config.space.S200 }}
                       room={room}
@@ -1680,7 +1690,8 @@ export function useTimelineEventRenderer({
           ) : null;
 
         const reactionRelations = getEventReactions(timelineSet, mEventId);
-        const reactions = reactionRelations?.getSortedAnnotationsByKey();
+        const annotations = reactionRelations?.getSortedAnnotationsByKey();
+        const reactions = annotations?.filter((annotation) => annotation[1].size > 0);
         const hasReactions = reactions && reactions.length > 0;
 
         if (mEvent.isRedacted()) {
@@ -1813,7 +1824,7 @@ export function useTimelineEventRenderer({
               if (!reactionRelations && !threadChip) return undefined;
               return (
                 <>
-                  {reactionRelations && (
+                  {reactionRelations && hasReactions && (
                     <Reactions
                       style={{ marginTop: config.space.S200 }}
                       room={room}
@@ -1895,7 +1906,8 @@ export function useTimelineEventRenderer({
         ) : null;
 
         const reactionRelations = getEventReactions(timelineSet, mEventId);
-        const reactions = reactionRelations?.getSortedAnnotationsByKey();
+        const annotations = reactionRelations?.getSortedAnnotationsByKey();
+        const reactions = annotations?.filter((annotation) => annotation[1].size > 0);
         const hasReactions = reactions && reactions.length > 0;
 
         return (
@@ -1935,7 +1947,7 @@ export function useTimelineEventRenderer({
               if (!reactionRelations && !threadChip) return undefined;
               return (
                 <>
-                  {reactionRelations && (
+                  {reactionRelations && hasReactions && (
                     <Reactions
                       style={{ marginTop: config.space.S200 }}
                       room={room}
@@ -2003,7 +2015,8 @@ export function useTimelineEventRenderer({
         );
 
         const reactionRelations = getEventReactions(timelineSet, mEventId);
-        const reactions = reactionRelations?.getSortedAnnotationsByKey();
+        const annotations = reactionRelations?.getSortedAnnotationsByKey();
+        const reactions = annotations?.filter((annotation) => annotation[1].size > 0);
         const hasReactions = reactions && reactions.length > 0;
 
         return (
@@ -2043,7 +2056,7 @@ export function useTimelineEventRenderer({
               if (!reactionRelations && !threadChip) return undefined;
               return (
                 <>
-                  {reactionRelations && (
+                  {reactionRelations && hasReactions && (
                     <Reactions
                       style={{ marginTop: config.space.S200 }}
                       room={room}
diff --git a/src/app/pages/client/profile/Profile.tsx b/src/app/pages/client/profile/Profile.tsx
index 5f58d994d..30be9a695 100644
--- a/src/app/pages/client/profile/Profile.tsx
+++ b/src/app/pages/client/profile/Profile.tsx
@@ -44,6 +44,7 @@ import { UseStateProvider } from '$components/UseStateProvider';
 import { FocusTrap } from 'focus-trap-react';
 import { LogoutDialog } from '$components/LogoutDialog';
 import { stopPropagation } from '$utils/keyboard';
+import { getMxIdServer } from '$utils/mxIdHelper';
 
 export function ProfileMobile() {
   const mx = useMatrixClient();
@@ -52,6 +53,7 @@ export function ProfileMobile() {
   const [oldSidebar] = useSetting(settingsAtom, 'oldSidebar');
 
   const userId = mx.getUserId() ?? '';
+  const server = getMxIdServer(userId);
   const profile = useUserProfile(userId);
   const presence = useUserPresence(userId);
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
@@ -167,7 +169,7 @@ export function ProfileMobile() {
             />
 
             <Box style={{ padding: `0 ${config.space.S400}` }}>
-              <GlobalUserHeroName displayName={displayName} userId={userId} />
+              <GlobalUserHeroName displayName={displayName} userId={userId} server={server} />
             </Box>
           </Box>
 
diff --git a/src/app/pages/client/sidebar/UserMenuTab.tsx b/src/app/pages/client/sidebar/UserMenuTab.tsx
index f319ef230..e561fd096 100644
--- a/src/app/pages/client/sidebar/UserMenuTab.tsx
+++ b/src/app/pages/client/sidebar/UserMenuTab.tsx
@@ -65,6 +65,7 @@ import {
   UserIcon,
 } from '@phosphor-icons/react';
 import * as css from './UserMenuTab.css';
+import { getMxIdServer } from '$utils/mxIdHelper';
 
 const log = createLogger('AccountSwitcherTab');
 
@@ -643,6 +644,7 @@ export function UserMenuTab({ isBottom, isMobile }: { isBottom?: boolean; isMobi
   const navigate = useNavigate();
 
   const userId = mx.getUserId() ?? '';
+  const server = getMxIdServer(userId);
   const profile = useUserProfile(userId);
   const presence = useUserPresence(userId);
   const currentPresence = presence?.presence ?? Presence.Online;
@@ -761,7 +763,7 @@ export function UserMenuTab({ isBottom, isMobile }: { isBottom?: boolean; isMobi
                     allowEditing={true}
                   />
                   <Box style={{ padding: `0 ${config.space.S400} 0` }}>
-                    <GlobalUserHeroName displayName={displayName} userId={userId} />
+                    <GlobalUserHeroName displayName={displayName} userId={userId} server={server} />
                   </Box>
                 </Box>
 
diff --git a/src/app/pages/client/sidebar/UserQuickTools.tsx b/src/app/pages/client/sidebar/UserQuickTools.tsx
index b9357e8e4..6d4155725 100644
--- a/src/app/pages/client/sidebar/UserQuickTools.tsx
+++ b/src/app/pages/client/sidebar/UserQuickTools.tsx
@@ -55,6 +55,8 @@ export function UserQuickTools({
               <>
                 <UserMenuTab isBottom />
                 <Box
+                  shrink="No"
+                  grow="No"
                   style={{
                     gap: config.space.S300,
                   }}