diff --git a/.changeset/pmp_user_heroes_fixrefactor_persona_picker.md b/.changeset/pmp_user_heroes_fixrefactor_persona_picker.md
new file mode 100644
index 0000000000..5331bc273d
--- /dev/null
+++ b/.changeset/pmp_user_heroes_fixrefactor_persona_picker.md
@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+# PMP User Heroes, Fix+Refactor Persona Picker
diff --git a/src/app/components/UserRoomProfileRenderer.tsx b/src/app/components/UserRoomProfileRenderer.tsx
index 462e51b6b5..9bbdcc99a0 100644
--- a/src/app/components/UserRoomProfileRenderer.tsx
+++ b/src/app/components/UserRoomProfileRenderer.tsx
@@ -9,7 +9,7 @@ import { UserRoomProfile } from './user-profile';
 import { ResponsiveMenu } from './ResponsiveMenu';
 
 function UserRoomProfileContextMenu({ state }: { state: UserRoomProfileState }) {
-  const { roomId, spaceId, userId, cords, position, initialProfile } = state;
+  const { roomId, spaceId, userId, pmp, cords, position, initialProfile } = state;
   const allJoinedRooms = useAllJoinedRoomsSet();
   const getRoom = useGetRoom(allJoinedRooms);
   const room = getRoom(roomId);
@@ -37,6 +37,7 @@ function UserRoomProfileContextMenu({ state }: { state: UserRoomProfileState })
                 userId={userId}
                 initialProfile={initialProfile}
                 onSurfaceColorChange={setSurfaceColor}
+                pmp={pmp}
               />
             </RoomProvider>
           </SpaceProvider>
diff --git a/src/app/components/event-history/EventHistory.tsx b/src/app/components/event-history/EventHistory.tsx
index 810cbd9b0e..6cc59126c1 100644
--- a/src/app/components/event-history/EventHistory.tsx
+++ b/src/app/components/event-history/EventHistory.tsx
@@ -253,6 +253,7 @@ export const EventHistory = as<'div', EventHistoryProps>(
                 room.roomId,
                 space?.roomId,
                 readerId,
+                undefined,
                 getMouseEventCords(event.nativeEvent),
                 'Bottom'
               );
diff --git a/src/app/components/event-readers/EventReaders.tsx b/src/app/components/event-readers/EventReaders.tsx
index 6bc4842eb4..e1a4d08a64 100644
--- a/src/app/components/event-readers/EventReaders.tsx
+++ b/src/app/components/event-readers/EventReaders.tsx
@@ -93,6 +93,7 @@ export const EventReaders = as<'div', EventReadersProps>(
                         room.roomId,
                         space?.roomId,
                         readerId,
+                        undefined,
                         getMouseEventCords(event.nativeEvent),
                         'Bottom'
                       );
diff --git a/src/app/components/message-preview/MessagePreview.tsx b/src/app/components/message-preview/MessagePreview.tsx
index f78a64a121..a47645c7ca 100644
--- a/src/app/components/message-preview/MessagePreview.tsx
+++ b/src/app/components/message-preview/MessagePreview.tsx
@@ -451,10 +451,11 @@ export function MessagePreview({
         room.roomId,
         undefined,
         sender,
+        perMessageProfile,
         evt.currentTarget.getBoundingClientRect()
       );
     },
-    [openUserRoomProfile, room.roomId, sender]
+    [openUserRoomProfile, room.roomId, perMessageProfile, sender]
   );
 
   return (
diff --git a/src/app/components/message/modals/Options.tsx b/src/app/components/message/modals/Options.tsx
index 79e47e4cbe..bf018c863e 100644
--- a/src/app/components/message/modals/Options.tsx
+++ b/src/app/components/message/modals/Options.tsx
@@ -430,7 +430,6 @@ function OptionsReproxyPersonaPicker({
     <>
       <TemporaryPersonaPicker
         mx={mx}
-        hideTabs={true}
         onPersonaSelect={reproxyMessage}
         requestClose={closeMenu}
         anchor={anchor}
diff --git a/src/app/components/overlay-stack/OverlayStack.tsx b/src/app/components/overlay-stack/OverlayStack.tsx
index 5ba40c97e5..7e1b4f5a74 100644
--- a/src/app/components/overlay-stack/OverlayStack.tsx
+++ b/src/app/components/overlay-stack/OverlayStack.tsx
@@ -31,7 +31,7 @@ export function OverlayStackProvider({ children }: { children: ReactNode }) {
         setClaims((prev) =>
           prev.some((claim) => claim.id === id)
             ? prev
-            : [...prev, { id, seq }].sort((a, b) => a.seq - b.seq)
+            : [...prev, { id, seq }].toSorted((a, b) => a.seq - b.seq)
         ),
       release: (id) => setClaims((prev) => prev.filter((claim) => claim.id !== id)),
     }),
diff --git a/src/app/components/user-profile/UserHero.tsx b/src/app/components/user-profile/UserHero.tsx
index 0a12511618..7f9b421c92 100644
--- a/src/app/components/user-profile/UserHero.tsx
+++ b/src/app/components/user-profile/UserHero.tsx
@@ -43,6 +43,9 @@ import { useTimeoutToggle } from '$hooks/useTimeoutToggle';
 import { CopyIcon, CrossIcon } from '@phosphor-icons/react';
 import { useOpenSettings } from '$features/settings';
 import { ModalOverlay } from '$components/modal-overlay/ModalOverlay';
+import type { Persona } from '$app/persona';
+import type { MatrixClient } from 'matrix-js-sdk';
+import { usePersonaCosmetics } from '$hooks/usePerMessageProfile';
 
 type UserHeroProps = {
   userId: string;
@@ -258,10 +261,13 @@ export function UserHero({
 }
 
 type UserHeroNameProps = {
+  mx?: MatrixClient;
   displayName?: string;
   userId: string;
   server?: string;
   customHeroCards?: boolean;
+  pmp?: Persona;
+  clearPmp?: () => void;
 };
 
 type UserHeroNameInnerProps = {
@@ -272,6 +278,8 @@ type UserHeroNameInnerProps = {
   color?: string;
   font?: string;
   customHeroCards?: boolean;
+  isPmp?: boolean;
+  clearPmp?: () => void;
 };
 
 function UserHeroNameInner({
@@ -281,6 +289,8 @@ function UserHeroNameInner({
   server,
   color,
   font,
+  isPmp,
+  clearPmp,
 }: UserHeroNameInnerProps) {
   const [copied, setCopied] = useTimeoutToggle();
   const [isHovered, setIsHovered] = useState(false);
@@ -332,26 +342,61 @@ function UserHeroNameInner({
             )
           }
         />
+        {isPmp && (
+          <>
+            {' - '}
+            <Chip
+              onClick={(evt) => {
+                evt.stopPropagation();
+                clearPmp?.();
+              }}
+              style={{ backgroundColor: 'transparent', color: 'inherit', padding: '0' }}
+              before={
+                <Text
+                  size="T200"
+                  className={classNames(BreakWord, LineClamp3, css.LinkUnderline)}
+                  truncate
+                >
+                  View account profile
+                </Text>
+              }
+            />
+          </>
+        )}
       </Box>
     </Box>
   );
 }
 
-export function UserHeroName({ displayName, userId, server, customHeroCards }: UserHeroNameProps) {
+export function UserHeroName({
+  mx,
+  displayName,
+  userId,
+  server,
+  customHeroCards,
+  pmp,
+  clearPmp,
+}: UserHeroNameProps) {
   const username = getMxIdLocalPart(userId);
   const nick = useNickname(userId);
 
+  // personas
+  const { nameColor: getPmpNameColor } = usePersonaCosmetics(mx);
+  const pmpNameColor = pmp?.['eu.she-a.color'] ? getPmpNameColor?.(pmp) : null;
+
   // Sable username color and fonts
   const { color, font } = useSableCosmetics(userId, useRoom(), customHeroCards);
-  const shownName = nick ?? displayName ?? username ?? userId;
+  const shownName = pmp?.displayname ?? nick ?? displayName ?? username ?? userId;
 
   return (
     <UserHeroNameInner
       username={username}
+      isPmp={!!pmp}
       server={server}
       shownName={shownName}
-      color={color}
+      color={pmpNameColor ?? color}
       font={font}
+      clearPmp={clearPmp}
     />
   );
 }
diff --git a/src/app/components/user-profile/UserRoomProfile.tsx b/src/app/components/user-profile/UserRoomProfile.tsx
index d1b07d58f9..9c99193c0e 100644
--- a/src/app/components/user-profile/UserRoomProfile.tsx
+++ b/src/app/components/user-profile/UserRoomProfile.tsx
@@ -62,6 +62,8 @@ import { KnownMembership } from '$types/matrix-sdk';
 import { useRoomMemberHydration } from '$hooks/useRoomMemberHydration';
 import * as css from './styles.css';
 import * as prefix from '$unstable/prefixes';
+import type { Persona } from '$app/persona';
+import { usePersonaCosmetics } from '$hooks/usePerMessageProfile';
 
 const KNOWN_KEYS = new Set([
   prefix.MATRIX_SABLE_UNSTABLE_PROFILE_BIOGRAPHY_PROPERTY_NAME,
@@ -80,6 +82,7 @@ const KNOWN_KEYS = new Set([
 
 type UserExtendedSectionProps = {
   profile: UserProfile;
+  pmp?: Persona;
   htmlReactParserOptions: HTMLReactParserOptions;
   linkifyOpts: LinkifyOpts;
   innerColor?: string;
@@ -96,6 +99,7 @@ const renderValue = (val: unknown) => {
 
 function UserExtendedSection({
   profile,
+  pmp,
   htmlReactParserOptions,
   linkifyOpts,
   innerColor,
@@ -127,7 +131,7 @@ function UserExtendedSection({
   const languagesToFilterFor = getSettings().filterPronounsLanguages ?? ['en'];
 
   const pronouns = filterPronounsByLanguage(
-    profile.pronouns,
+    pmp?.['io.fsky.nyx.pronouns'] ?? profile.pronouns,
     languageFilterEnabled,
     languagesToFilterFor
   )
@@ -403,11 +407,13 @@ function UserExtendedSection({
 
 type UserRoomProfileProps = {
   userId: string;
+  pmp?: Persona;
   initialProfile?: Partial<UserProfile>;
   onSurfaceColorChange?: (color: string) => void;
 };
 export function UserRoomProfile({
   userId,
+  pmp: initialPmp,
   initialProfile,
   onSurfaceColorChange,
 }: Readonly<UserRoomProfileProps>) {
@@ -456,8 +462,17 @@ export function UserRoomProfile({
 
   useRoomMemberHydration(room, userId);
 
+  const [pmp, setPmp] = useState(initialPmp);
+  const { avatarUrl: getPmpAvatarUrl } = usePersonaCosmetics(mx, false);
+  const pmpAvatarUrl = pmp?.avatar_url ? getPmpAvatarUrl?.(pmp) : null;
+
+  const handleClearPmp = () => {
+    setPmp(undefined);
+  };
+
   const avatarMxc = getMemberAvatarMxc(room, userId) ?? extendedProfile.avatarUrl;
-  const avatarUrl = (avatarMxc && mxcUrlToHttp(mx, avatarMxc, useAuthentication)) ?? undefined;
+  const avatarUrl =
+    pmpAvatarUrl ?? (avatarMxc && mxcUrlToHttp(mx, avatarMxc, useAuthentication)) ?? undefined;
 
   const parsedBanner =
     typeof extendedProfile.bannerUrl === 'string'
@@ -607,10 +622,13 @@ export function UserRoomProfile({
         >
           <Box gap="200" alignItems="Center" wrap="Wrap" style={{ color: textColor }}>
             <UserHeroName
-              displayName={displayName}
+              mx={mx}
+              displayName={pmp?.displayname ?? displayName}
               userId={userId}
               customHeroCards={showCustomHeroCard}
               server={server}
+              pmp={pmp}
+              clearPmp={handleClearPmp}
             />
             {userId !== myUserId && (
               <Button
@@ -633,6 +651,7 @@ export function UserRoomProfile({
           </Box>
           <UserExtendedSection
             profile={extendedProfile}
+            pmp={pmp}
             htmlReactParserOptions={htmlReactParserOptions}
             linkifyOpts={linkifyOpts}
             innerColor={innerColor}
diff --git a/src/app/components/user-profile/styles.css.ts b/src/app/components/user-profile/styles.css.ts
index a3e083b507..9ab6e1626b 100644
--- a/src/app/components/user-profile/styles.css.ts
+++ b/src/app/components/user-profile/styles.css.ts
@@ -131,3 +131,11 @@ export const UserHeroMenuItem = style({
     },
   },
 });
+
+export const LinkUnderline = style({
+  cursor: 'pointer',
+  textDecoration: 'underline',
+  ':hover': {
+    textDecoration: 'none',
+  },
+});
diff --git a/src/app/features/call-status/LiveChip.tsx b/src/app/features/call-status/LiveChip.tsx
index c1feaedaf5..5f2df8f550 100644
--- a/src/app/features/call-status/LiveChip.tsx
+++ b/src/app/features/call-status/LiveChip.tsx
@@ -65,6 +65,7 @@ export function LiveChip({ count, room, members }: LiveChipProps) {
                           room.roomId,
                           undefined,
                           userId,
+                          undefined,
                           getMouseEventCords(evt.nativeEvent),
                           'Right'
                         )
diff --git a/src/app/features/call-status/MemberGlance.tsx b/src/app/features/call-status/MemberGlance.tsx
index c6ca70abb9..49b33064f5 100644
--- a/src/app/features/call-status/MemberGlance.tsx
+++ b/src/app/features/call-status/MemberGlance.tsx
@@ -51,6 +51,7 @@ export function MemberGlance({ room, members, speakers, max = 6 }: MemberGlanceP
                 room.roomId,
                 undefined,
                 userId,
+                undefined,
                 getMouseEventCords(evt.nativeEvent),
                 'Top'
               )
diff --git a/src/app/features/call/CallMemberCard.tsx b/src/app/features/call/CallMemberCard.tsx
index 192188476c..3a5163c78d 100644
--- a/src/app/features/call/CallMemberCard.tsx
+++ b/src/app/features/call/CallMemberCard.tsx
@@ -59,6 +59,7 @@ function CallMemberCard({ member }: CallMemberCardProps) {
           room.roomId,
           undefined,
           userId,
+          undefined,
           getMouseEventCords(evt.nativeEvent),
           'Right'
         )
diff --git a/src/app/features/common-settings/members/Members.tsx b/src/app/features/common-settings/members/Members.tsx
index 9f327a7a2f..e462c1b044 100644
--- a/src/app/features/common-settings/members/Members.tsx
+++ b/src/app/features/common-settings/members/Members.tsx
@@ -142,7 +142,13 @@ export function Members({ requestBack, requestClose }: MembersProps) {
     const btn = evt.currentTarget as HTMLButtonElement;
     const userId = btn.getAttribute('data-user-id');
     if (userId) {
-      openProfile(room.roomId, space?.roomId, userId, getMouseEventCords(evt.nativeEvent));
+      openProfile(
+        room.roomId,
+        space?.roomId,
+        userId,
+        undefined,
+        getMouseEventCords(evt.nativeEvent)
+      );
     }
   };
 
diff --git a/src/app/features/room-nav/RoomNavUser.tsx b/src/app/features/room-nav/RoomNavUser.tsx
index 8854bebb02..d3ce157211 100644
--- a/src/app/features/room-nav/RoomNavUser.tsx
+++ b/src/app/features/room-nav/RoomNavUser.tsx
@@ -37,7 +37,13 @@ export function RoomNavUser({ room, callMembership, hideText }: RoomNavUserProps
   const isCallParticipant = isActiveCall && userId !== mx.getUserId();
 
   const handleNavUserClick: MouseEventHandler<HTMLButtonElement> = (evt) => {
-    openProfile(room.roomId, space?.roomId, userId, evt.currentTarget.getBoundingClientRect());
+    openProfile(
+      room.roomId,
+      space?.roomId,
+      userId,
+      undefined,
+      evt.currentTarget.getBoundingClientRect()
+    );
   };
 
   const ariaLabel = isCallParticipant ? `Call Participant: ${name}` : name;
diff --git a/src/app/features/room/MembersDrawer.tsx b/src/app/features/room/MembersDrawer.tsx
index 55e4ce6bc3..f2a23306c5 100644
--- a/src/app/features/room/MembersDrawer.tsx
+++ b/src/app/features/room/MembersDrawer.tsx
@@ -311,7 +311,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
     // BODGE, dependent on menuItem height staying at toRem(40)
     cords.y = Math.min(cords.y, window.innerHeight - 42);
 
-    openUserRoomProfile(room.roomId, space?.roomId, userId, cords, 'Left');
+    openUserRoomProfile(room.roomId, space?.roomId, userId, undefined, cords, 'Left');
   };
 
   const [memberSidebarWidth, setMemberSidebarWidth] = useSetting(
diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx
index 7c75880b68..06efa2f68b 100644
--- a/src/app/features/room/RoomInput.tsx
+++ b/src/app/features/room/RoomInput.tsx
@@ -212,7 +212,7 @@ import { AudioMessageRecorder } from './AudioMessageRecorder';
 import * as prefix from '$unstable/prefixes';
 import { PollDialog } from './poll-modals';
 import { useClientConfig } from '$hooks/useClientConfig';
-import { PersistentPersonaPicker, type PersonaPickerTab } from './persona-picker/PersonaPicker.tsx';
+import { PersonaPicker, type PersonaPickerTab } from './persona-picker/PersonaPicker.tsx';
 import { createComposerController, type ComposerController } from './composerController';
 import { buildEditReplacement, buildOutgoingMessage } from './composerMessage';
 import { pickNativeFile } from './nativeFilePicker';
@@ -2356,8 +2356,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                   </IconButton>
                 </>
               )}
-              {pmpPickerEnable && !editingEvent && (
-                <PersistentPersonaPicker
+              {pmpPickerEnable && (isMobileOrTablet() ? !editingEvent : true) && (
+                <PersonaPicker
                   tab={personaPickerTab}
                   mx={mx}
                   roomId={roomId}
diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index fde976baf0..d399c3b356 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -78,6 +78,7 @@ import type { IImageContent } from '$types/matrix/common';
 import { useTimelineRendererContext } from '$hooks/timeline/useTimelineRendererContext';
 import { TimelineScrollingProvider, useScrollActivity } from '$hooks/useTimelineScrollActivity';
 import * as css from './RoomTimeline.css';
+import type { Persona } from '$app/persona';
 
 const MAX_VIEWPORT_FILL_PAGINATIONS = 5;
 
@@ -926,6 +927,7 @@ export function RoomTimeline({
       roomId: string,
       spaceId: string | undefined,
       userId: string,
+      pmp: Persona | undefined,
       rect: DOMRect,
       undefinedArg?: undefined,
       options?: unknown
diff --git a/src/app/features/room/ThreadDrawer.tsx b/src/app/features/room/ThreadDrawer.tsx
index 5531fee23a..140a25a577 100644
--- a/src/app/features/room/ThreadDrawer.tsx
+++ b/src/app/features/room/ThreadDrawer.tsx
@@ -46,6 +46,7 @@ import { RoomViewFollowing, RoomViewFollowingPlaceholder } from './RoomViewFollo
 import * as css from './ThreadDrawer.css';
 import { SidebarResizer } from '$pages/client/sidebar/SidebarResizer';
 import { isMobileOrTablet } from '$utils/platform';
+import type { Persona } from '$app/persona';
 
 type ThreadDrawerProps = {
   room: Room;
@@ -150,6 +151,7 @@ export function ThreadDrawer({ room, threadRootId, onClose, overlay }: ThreadDra
       roomId: string,
       spaceId: string | undefined,
       userId: string,
+      pmp: Persona | undefined,
       rect: DOMRect,
       undefinedArg?: undefined,
       options?: unknown
diff --git a/src/app/features/room/message/Message.tsx b/src/app/features/room/message/Message.tsx
index fe53008387..cf9b7a9376 100644
--- a/src/app/features/room/message/Message.tsx
+++ b/src/app/features/room/message/Message.tsx
@@ -665,6 +665,7 @@ function MessageInternal(
             as="button"
             size="300"
             data-user-id={senderId}
+            data-parent-message-id={mEvent.getId() ?? ':3'}
             onClick={onUserClick}
           >
             <UserAvatar
diff --git a/src/app/features/room/persona-picker/PersonaPicker.test.tsx b/src/app/features/room/persona-picker/PersonaPicker.test.tsx
index 5467b9e53f..298d834c36 100644
--- a/src/app/features/room/persona-picker/PersonaPicker.test.tsx
+++ b/src/app/features/room/persona-picker/PersonaPicker.test.tsx
@@ -1,9 +1,9 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { act, fireEvent, render, renderHook, screen, waitFor } from '@testing-library/react';
 import type { ReactNode } from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import type { MatrixClient } from 'matrix-js-sdk';
 import type { PerMessageProfileMsc4461 } from '$app/persona';
-import { TemporaryPersonaPicker, PersonaPickerTab } from './PersonaPicker';
+import { PersonaPicker, PersonaPickerTab, useProfiles } from './PersonaPicker';
 
 const mocked = vi.hoisted(() => ({
   getAll: vi.fn<(mx: MatrixClient) => Promise<PerMessageProfileMsc4461[]>>(),
@@ -49,6 +49,12 @@ vi.mock('$app/persona/catalog', () => ({
   },
 }));
 vi.mock('$hooks/useMediaAuthentication.ts', () => ({ useMediaAuthentication: () => false }));
+vi.mock('$hooks/usePerMessageProfile.ts', () => ({
+  usePersonaCosmetics: () => ({
+    avatarUrl: () => undefined,
+    nameColor: () => undefined,
+  }),
+}));
 // useActiveTheme reaches for window.matchMedia, which jsdom does not provide.
 vi.mock('$hooks/useTheme.ts', () => ({
   ThemeKind: { Light: 'light', Dark: 'dark' },
@@ -76,7 +82,10 @@ vi.mock('$components/info-card/InfoCard.tsx', () => ({
 }));
 vi.mock('@phosphor-icons/react', () => ({ InfoIcon: {} }));
 vi.mock('$utils/matrix.ts', () => ({ mxcUrlToHttp: () => undefined }));
-vi.mock('$utils/platform', () => ({ isMobileOrTablet: () => false }));
+vi.mock('$utils/platform', () => ({
+  hasServiceWorker: () => false,
+  isMobileOrTablet: () => false,
+}));
 vi.mock('$utils/common', () => ({ nameInitials: (name: string) => name.slice(0, 1) }));
 vi.mock('./PersonaPicker.css.ts', () => ({
   PersonaPickerMenuItem: '',
@@ -128,7 +137,7 @@ const profiles: PerMessageProfileMsc4461[] = [
 
 function renderPicker(mx = {} as MatrixClient, tab = PersonaPickerTab.Global) {
   return render(
-    <TemporaryPersonaPicker
+    <PersonaPicker
       tab={tab}
       mx={mx}
       roomId="!room:example.org"
@@ -158,22 +167,25 @@ describe('PersonaPicker async flows', () => {
       client === firstClient ? firstFetch.promise : secondFetch.promise
     );
 
-    const view = renderPicker(firstClient);
-    view.rerender(
-      <TemporaryPersonaPicker
-        mx={secondClient}
-        roomId="!room:example.org"
-        suppressEditorRefocus={vi.fn<() => void>()}
-        onTabChange={vi.fn<(tab: PersonaPickerTab) => void>()}
-        latchedPersona={undefined}
-      />
-    );
+    const mountedRef = { current: true };
+    const generationRef = { current: 0 };
+    const view = renderHook(({ mx }) => useProfiles(mx, mountedRef, generationRef), {
+      initialProps: { mx: firstClient },
+    });
+    await waitFor(() => expect(mocked.getAll).toHaveBeenCalledWith(firstClient));
+    view.rerender({ mx: secondClient });
 
-    secondFetch.resolve([{ id: 'new', displayname: 'New', trigger: { prefix: [] } }]);
-    expect(await screen.findByText('New')).toBeInTheDocument();
-    firstFetch.resolve([{ id: 'old', displayname: 'Old', trigger: { prefix: [] } }]);
+    await act(async () => {
+      secondFetch.resolve([{ id: 'new', displayname: 'New', trigger: { prefix: [] } }]);
+      await secondFetch.promise;
+    });
+    await waitFor(() => expect(view.result.current.profiles?.[0]?.id).toBe('new'));
+    await act(async () => {
+      firstFetch.resolve([{ id: 'old', displayname: 'Old', trigger: { prefix: [] } }]);
+      await firstFetch.promise;
+    });
 
-    await waitFor(() => expect(screen.queryByText('Old')).not.toBeInTheDocument());
+    expect(view.result.current.profiles?.[0]?.id).toBe('new');
   });
 
   it('does not update state when an in-flight profile fetch resolves after unmount', async () => {
@@ -200,6 +212,20 @@ describe('PersonaPicker async flows', () => {
     roomSync.reject(new Error('room sync failed'));
   });
 
+  it('clears the optimistic selection when disabling the active persona', async () => {
+    mocked.getAccount.mockResolvedValue(profiles[0]);
+    renderPicker();
+
+    await waitFor(() => {
+      expect(grabPersonaButton('First')).toHaveAttribute('aria-selected', 'true');
+    });
+
+    fireEvent.click(grabPersonaButton('First'));
+
+    expect(grabPersonaButton('First')).not.toHaveAttribute('aria-selected', 'true');
+    expect(mocked.setAccount).toHaveBeenCalledWith(expect.anything(), undefined, undefined, true);
+  });
+
   it('keeps the latest optimistic selection when an earlier write fails', async () => {
     const firstWrite = deferred<void>();
     const secondWrite = deferred<void>();
@@ -230,7 +256,7 @@ describe('PersonaPicker async flows', () => {
 
     fireEvent.click(grabPersonaButton('First'));
     view.rerender(
-      <TemporaryPersonaPicker
+      <PersonaPicker
         tab={PersonaPickerTab.PerRoom}
         mx={mx}
         roomId="!room:example.org"
@@ -249,7 +275,7 @@ describe('PersonaPicker async flows', () => {
     });
 
     view.rerender(
-      <TemporaryPersonaPicker
+      <PersonaPicker
         tab={PersonaPickerTab.Global}
         mx={mx}
         roomId="!room:example.org"
diff --git a/src/app/features/room/persona-picker/PersonaPicker.tsx b/src/app/features/room/persona-picker/PersonaPicker.tsx
index 0c502e277e..ac29e77ebd 100644
--- a/src/app/features/room/persona-picker/PersonaPicker.tsx
+++ b/src/app/features/room/persona-picker/PersonaPicker.tsx
@@ -6,10 +6,8 @@ import {
 } from '$components/icons/phosphor';
 import { ResponsiveMenu } from '$components/ResponsiveMenu';
 import { UserAvatar } from '$components/user-avatar/UserAvatar.tsx';
-import { useMediaAuthentication } from '$hooks/useMediaAuthentication.ts';
-import type { PerMessageProfileMsc4461 } from '$app/persona';
+import type { PerMessageProfileMsc4461, Persona } from '$app/persona';
 import { ProfileCatalog } from '$app/persona/catalog';
-import { mxcUrlToHttp } from '$utils/matrix.ts';
 import { isMobileOrTablet } from '$utils/platform';
 import { nameInitials } from '$utils/common';
 import {
@@ -29,6 +27,7 @@ import {
 } from 'folds';
 import type { MatrixClient } from 'matrix-js-sdk';
 import {
+  type RefObject,
   useCallback,
   useEffect,
   useRef,
@@ -39,7 +38,7 @@ import {
 import * as css from './PersonaPicker.css.ts';
 import { InfoCard } from '$components/info-card/InfoCard.tsx';
 import { InfoIcon } from '@phosphor-icons/react';
-import { ThemeKind, useActiveTheme } from '$hooks/useTheme.ts';
+import { usePersonaCosmetics } from '$hooks/usePerMessageProfile.ts';
 
 const pillStyles = {
   cursor: 'pointer',
@@ -69,82 +68,138 @@ type PersonaPickerProps = {
   hideTabs?: boolean;
   anchor?: RectCords;
 };
+type TemporaryPersonaPickerProps = {
+  mx: MatrixClient;
+  suppressEditorRefocus?: () => void;
+  onPersonaSelect: (persona: PerMessageProfileMsc4461 | undefined) => void | Promise<void>;
+  requestClose: () => void;
+  anchor?: RectCords;
+};
 
-export function TemporaryPersonaPicker(props: PersonaPickerProps) {
-  return (
-    <PersonaPickerMenu {...props} presentation={PersonaPickerPresentation.TemporarySelectorMenu} />
-  );
-}
-
-export function PersistentPersonaPicker(props: PersonaPickerProps) {
-  return <PersonaPickerMenu {...props} presentation={PersonaPickerPresentation.PersistentPicker} />;
-}
-
-function PersonaPickerMenu({
-  tab: tabProp = PersonaPickerTab.Global,
-  mx,
-  roomId,
-  suppressEditorRefocus,
-  onTabChange,
-  latchedPersona,
-  onPersonaSelect,
-  anchor,
-  requestClose,
-}: PersonaPickerProps & { presentation: PersonaPickerPresentation }) {
-  const useAuthentication = useMediaAuthentication();
-  const [tab, setTab] = useState(tabProp);
-  const activeTheme = useActiveTheme();
-  const [AddPersonaMenuAnchor, setAddPersonaMenuAnchor] = useState<RectCords | undefined>(anchor);
+export function useProfiles(
+  mx: MatrixClient,
+  mountedRef: MutableRefObject<boolean>,
+  profileFetchGenerationRef: MutableRefObject<number>
+) {
   const [profiles, setProfiles] = useState<PerMessageProfileMsc4461[] | undefined>(undefined);
-  const [selectedGlobalPersona, setSelectedGlobalPersona] =
-    useState<PerMessageProfileMsc4461 | null>(null);
-  const [selectedRoomPersona, setSelectedRoomPersona] = useState<PerMessageProfileMsc4461 | null>(
-    latchedPersona ?? null
-  );
-  const mountedRef = useRef(false);
-  const profileFetchGenerationRef = useRef(0);
-  // Bumped on each click so an in-flight sync cannot undo a fresher choice. Global and
-  // per-room selections are independent, so one must not invalidate the other's rollback.
-  const globalSelectionRef = useRef(0);
-  const roomSelectionRef = useRef(0);
-  const isPickerMenuItemSelected = (persona: PerMessageProfileMsc4461) => {
-    const selectedPersona =
-      tab === PersonaPickerTab.Global ? selectedGlobalPersona : selectedRoomPersona;
-    return persona.id === selectedPersona?.id ? true : undefined;
-  };
 
-  const nameColor = useCallback(
-    (persona: PerMessageProfileMsc4461) =>
-      activeTheme.kind === ThemeKind.Dark
-        ? persona['eu.she-a.color']?.on_dark
-        : persona['eu.she-a.color']?.on_light,
-    [activeTheme]
-  );
+  const fetchProfiles = useCallback(async () => {
+    const fetchGeneration = ++profileFetchGenerationRef.current;
+    try {
+      const fetchedProfiles = await new ProfileCatalog(mx).list();
+      if (!mountedRef.current || fetchGeneration !== profileFetchGenerationRef.current) {
+        return;
+      }
+      setProfiles(fetchedProfiles);
+    } catch {
+      // Profile loading is best effort; keep the existing list when it fails.
+    }
+  }, [mountedRef, mx, profileFetchGenerationRef]);
 
-  const defactoPersona = () => selectedRoomPersona ?? selectedGlobalPersona;
+  useEffect(() => {
+    void fetchProfiles();
+    return () => {
+      profileFetchGenerationRef.current += 1;
+    };
+  }, [fetchProfiles, profileFetchGenerationRef]);
 
-  const searchInputRef = useRef<HTMLInputElement>(null);
+  return { profiles, fetchProfiles };
+}
 
-  const scrollRef = useRef<HTMLDivElement>(null);
+function useFilteredProfiles(
+  profiles: Persona[],
+  mountedRef: MutableRefObject<boolean>,
+  searchInputRef: RefObject<HTMLInputElement>,
+  profileFetchGenerationRef: MutableRefObject<number>
+) {
   const [filteredProfiles, setFilteredProfiles] = useState<PerMessageProfileMsc4461[] | undefined>(
-    undefined
+    profiles ?? undefined
   );
-
+  //
   useEffect(() => {
     mountedRef.current = true;
     return () => {
       mountedRef.current = false;
       profileFetchGenerationRef.current += 1;
     };
-  }, []);
+  }, [mountedRef, profileFetchGenerationRef]);
 
-  const clearFilterInput = () => {
+  const clearFilter = () => {
     if (searchInputRef.current) {
       searchInputRef.current.value = '';
     }
     setFilteredProfiles(profiles);
   };
 
+  const filter = useCallback(
+    (e: FormEvent) => {
+      const term = (e.target as HTMLInputElement).value.toLocaleLowerCase();
+
+      const filtered = term
+        ? profiles?.filter((profile) =>
+            searchInputRef.current
+              ? profile.displayname.toLocaleLowerCase().includes(searchInputRef.current?.value) ||
+                profile.id.toLocaleLowerCase().includes(searchInputRef.current?.value)
+              : true
+          )
+        : profiles;
+
+      setFilteredProfiles(filtered);
+    },
+    [profiles, searchInputRef]
+  );
+
+  useEffect(() => {
+    setFilteredProfiles(profiles);
+  }, [profiles]);
+
+  return { filteredProfiles, filter, clearFilter };
+}
+
+function useSelectedProfiles(
+  mx: MatrixClient,
+  roomId: string,
+  latchedPersona: Persona | undefined,
+  mountedRef: MutableRefObject<boolean>
+) {
+  const [selectedGlobalPersona, setSelectedGlobalPersona] =
+    useState<PerMessageProfileMsc4461 | null>(null);
+  const [selectedRoomPersona, setSelectedRoomPersona] = useState<PerMessageProfileMsc4461 | null>(
+    latchedPersona ?? null
+  );
+
+  // Bumped on each click so an in-flight sync cannot undo a fresher choice. Global and
+  // per-room selections are independent, so one must not invalidate the other's rollback.
+  const globalSelectionRef = useRef(0);
+  const roomSelectionRef = useRef(0);
+
+  const toggle = async (profile: Persona, isGlobal: boolean) => {
+    const previousPersona = isGlobal ? selectedGlobalPersona : selectedRoomPersona;
+    const disabling = profile.id === previousPersona?.id;
+
+    const setPersona = isGlobal ? setSelectedGlobalPersona : setSelectedRoomPersona;
+    const generationRef = isGlobal ? globalSelectionRef : roomSelectionRef;
+    const selectionGeneration = ++generationRef.current;
+
+    setPersona(disabling ? null : profile);
+
+    try {
+      await new ProfileCatalog(mx).setSelection(
+        isGlobal ? 'account' : { roomId: roomId! },
+        disabling ? undefined : profile.id,
+        undefined,
+        disabling
+      );
+    } catch {
+      if (mountedRef.current && selectionGeneration === generationRef.current) {
+        setPersona(previousPersona);
+      }
+    }
+  };
+
+  const setGlobal = async (profile: Persona) => toggle(profile, true);
+  const setRoom = async (profile: Persona) => toggle(profile, false);
+
   useEffect(() => {
     let cancelled = false;
 
@@ -184,55 +239,56 @@ function PersonaPickerMenu({
     };
   }, [mx, roomId, latchedPersona, selectedRoomPersona]);
 
-  const fetchProfiles = useCallback(async (mx_: MatrixClient) => {
-    const fetchGeneration = ++profileFetchGenerationRef.current;
-    try {
-      const fetchedProfiles = await new ProfileCatalog(mx_).list();
-      if (!mountedRef.current || fetchGeneration !== profileFetchGenerationRef.current) {
-        return;
-      }
-      setProfiles(fetchedProfiles);
-      setFilteredProfiles(fetchedProfiles);
-    } catch {
-      // Profile loading is best effort; keep the existing list when it fails.
-    }
-  }, []);
-
-  useEffect(() => {
-    void fetchProfiles(mx);
-    return () => {
-      profileFetchGenerationRef.current += 1;
-    };
-  }, [fetchProfiles, mx]);
+  return {
+    room: selectedRoomPersona,
+    global: selectedGlobalPersona,
+    setRoom,
+    setGlobal,
+  };
+}
 
-  const filter = useCallback(
-    (e: FormEvent) => {
-      const term = (e.target as HTMLInputElement).value.toLocaleLowerCase();
+export function PersonaPicker({
+  tab: tabProp = PersonaPickerTab.Global,
+  mx,
+  roomId,
+  suppressEditorRefocus,
+  onTabChange,
+  latchedPersona,
+  anchor,
+}: PersonaPickerProps) {
+  const [tab, setTab] = useState(tabProp);
+  const [AddPersonaMenuAnchor, setAddPersonaMenuAnchor] = useState<RectCords | undefined>(anchor);
+  const mountedRef = useRef(false);
+  const profileFetchGenerationRef = useRef(0);
 
-      const filtered = term
-        ? profiles?.filter((profile) =>
-            searchInputRef.current
-              ? profile.displayname.toLocaleLowerCase().includes(searchInputRef.current?.value) ||
-                profile.id.toLocaleLowerCase().includes(searchInputRef.current?.value)
-              : true
-          )
-        : profiles;
+  const { profiles } = useProfiles(mx, mountedRef, profileFetchGenerationRef);
 
-      setFilteredProfiles(filtered);
-    },
-    [profiles]
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const { filteredProfiles, filter, clearFilter } = useFilteredProfiles(
+    profiles ?? [],
+    mountedRef,
+    searchInputRef,
+    profileFetchGenerationRef
   );
 
-  const avatarUrl = useCallback(
-    (profile: PerMessageProfileMsc4461) => {
-      if (profile.avatar_url !== undefined) {
-        return mxcUrlToHttp(mx, profile.avatar_url, useAuthentication, 96, 96, 'crop') ?? undefined;
-      } else {
-        return undefined;
-      }
-    },
-    [mx, useAuthentication]
-  );
+  const {
+    room: selectedRoomPersona,
+    global: selectedGlobalPersona,
+    setRoom,
+    setGlobal,
+  } = useSelectedProfiles(mx, roomId ?? '', latchedPersona, mountedRef);
+
+  const isPickerMenuItemSelected = (persona: PerMessageProfileMsc4461) => {
+    const selectedPersona =
+      tab === PersonaPickerTab.Global ? selectedGlobalPersona : selectedRoomPersona;
+    return persona.id === selectedPersona?.id ? true : undefined;
+  };
+
+  const { nameColor, avatarUrl } = usePersonaCosmetics(mx);
+
+  const defactoPersona = () => selectedRoomPersona ?? selectedGlobalPersona;
+
+  const scrollRef = useRef<HTMLDivElement>(null);
 
   return (
     <ResponsiveMenu
@@ -243,7 +299,7 @@ function PersonaPickerMenu({
       alignOffset={-44}
       requestClose={() => {
         setAddPersonaMenuAnchor(undefined);
-        clearFilterInput();
+        clearFilter();
       }}
       menu={
         <Menu>
@@ -284,123 +340,92 @@ function PersonaPickerMenu({
                 </Text>
               </Badge>
             </Box>
+            <Input
+              ref={searchInputRef}
+              variant="SurfaceVariant"
+              size="400"
+              placeholder="Search"
+              maxLength={50}
+              autoFocus={!isMobileOrTablet()}
+              onChange={filter}
+              before={menuIcon(MagnifyingGlass)}
+            />
 
-            <>
-              <Input
-                ref={searchInputRef}
-                variant="SurfaceVariant"
-                size="400"
-                placeholder="Search"
-                maxLength={50}
-                autoFocus={!isMobileOrTablet()}
-                onChange={filter}
-                before={menuIcon(MagnifyingGlass)}
-              />
-
-              <Scroll hideTrack ref={scrollRef} size="400" style={{ maxHeight: '10rem' }}>
-                {filteredProfiles?.map((profile) => (
-                  <MenuItem
-                    key={profile.id}
-                    size="400"
-                    radii="300"
-                    className={css.PersonaPickerMenuItem}
-                    aria-selected={isPickerMenuItemSelected(profile)}
-                    onClick={async () => {
-                      if (onPersonaSelect) {
-                        await onPersonaSelect(profile);
-                        requestClose?.();
-                        return;
-                      }
-                      const isGlobal = tab === PersonaPickerTab.Global;
-                      const previousPersona = isGlobal
-                        ? selectedGlobalPersona
-                        : selectedRoomPersona;
-                      const disabling = profile.id === previousPersona?.id;
-                      const setPersona = isGlobal
-                        ? setSelectedGlobalPersona
-                        : setSelectedRoomPersona;
-                      const generationRef = isGlobal ? globalSelectionRef : roomSelectionRef;
-                      const selectionGeneration = ++generationRef.current;
-
-                      setPersona(disabling ? null : profile);
-
-                      try {
-                        await new ProfileCatalog(mx).setSelection(
-                          isGlobal ? 'account' : { roomId: roomId! },
-                          disabling ? undefined : profile.id,
-                          undefined,
-                          disabling
-                        );
-                      } catch {
-                        if (mountedRef.current && selectionGeneration === generationRef.current) {
-                          setPersona(previousPersona);
-                        }
-                      }
-                    }}
-                    before={
-                      <Avatar
-                        size="300"
-                        radii="400"
-                        style={{
-                          width: 28,
-                          height: 28,
-                          marginLeft: -6,
-                        }}
-                        aria-label="Profile avatar"
-                      >
-                        <UserAvatar
-                          userId={profile.id}
-                          src={avatarUrl(profile)}
-                          fallbackColor={profile['eu.she-a.color']?.on_light ?? undefined}
-                          renderFallback={() => (
-                            <Text as="span" size="H4" aria-label="Avatar fallback">
-                              {nameInitials(profile.displayname)}
-                            </Text>
-                          )}
-                          alt={`Avatar for profile ${profile.id}`}
-                        />
-                      </Avatar>
-                    }
-                  >
-                    <Box direction="Column">
-                      <Text
-                        truncate
-                        style={{ color: nameColor(profile) ?? undefined, maxWidth: toRem(150) }}
-                      >
-                        {profile.displayname}
-                      </Text>
-                      <Text
-                        truncate
-                        size="T200"
-                        style={{
-                          color: `color-mix(${color.Surface.OnContainer}, transparent 20%)`,
-                          maxWidth: toRem(150),
-                        }}
-                      >
-                        {profile.id}
-                      </Text>
-                    </Box>
-                  </MenuItem>
-                ))}
-              </Scroll>
-              <InfoCard
-                before={menuIcon(InfoIcon, { weight: 'fill' })}
-                variant="Primary"
-                description={
-                  selectedRoomPersona ? (
-                    <>
-                      Message will use your <em>per-room</em> persona.
-                    </>
-                  ) : selectedGlobalPersona ? (
-                    <>
-                      Message will use your <em>global</em> persona.
-                    </>
-                  ) : (
-                    <>No persona chosen.</>
-                  )
-                }
-              />
-            </>
+            <Scroll hideTrack ref={scrollRef} size="400" style={{ maxHeight: '10rem' }}>
+              {filteredProfiles?.map((profile) => (
+                <MenuItem
+                  key={profile.id}
+                  size="400"
+                  radii="300"
+                  className={css.PersonaPickerMenuItem}
+                  aria-selected={isPickerMenuItemSelected(profile)}
+                  onClick={async () => {
+                    const setPersona = tab === PersonaPickerTab.Global ? setGlobal : setRoom;
+                    setPersona(profile);
+                  }}
+                  before={
+                    <Avatar
+                      size="300"
+                      radii="400"
+                      style={{
+                        width: 28,
+                        height: 28,
+                        marginLeft: -6,
+                      }}
+                      aria-label="Profile avatar"
+                    >
+                      <UserAvatar
+                        userId={profile.id}
+                        src={avatarUrl?.(profile)}
+                        fallbackColor={profile['eu.she-a.color']?.on_light ?? undefined}
+                        renderFallback={() => (
+                          <Text as="span" size="H4" aria-label="Avatar fallback">
+                            {nameInitials(profile.displayname)}
+                          </Text>
+                        )}
+                        alt={`Avatar for profile ${profile.id}`}
+                      />
+                    </Avatar>
+                  }
+                >
+                  <Box direction="Column">
+                    <Text
+                      truncate
+                      style={{ color: nameColor?.(profile) ?? undefined, maxWidth: toRem(150) }}
+                    >
+                      {profile.displayname}
+                    </Text>
+                    <Text
+                      truncate
+                      size="T200"
+                      style={{
+                        color: `color-mix(${color.Surface.OnContainer}, transparent 20%)`,
+                        maxWidth: toRem(150),
+                      }}
+                    >
+                      {profile.id}
+                    </Text>
+                  </Box>
+                </MenuItem>
+              ))}
+            </Scroll>
+            <InfoCard
+              before={menuIcon(InfoIcon, { weight: 'fill' })}
+              variant="Primary"
+              description={
+                selectedRoomPersona ? (
+                  <>
+                    Message will use your <em>per-room</em> persona.
+                  </>
+                ) : selectedGlobalPersona ? (
+                  <>
+                    Message will use your <em>global</em> persona.
+                  </>
+                ) : (
+                  <>No persona chosen.</>
+                )
+              }
+            />
           </Box>
         </Menu>
       }
@@ -431,7 +456,7 @@ function PersonaPickerMenu({
             <UserAvatar
               className={css.PersonaPickerButtonAvatarImage}
               userId={defactoPersona()!.id}
-              src={avatarUrl(defactoPersona()!)}
+              src={avatarUrl?.(defactoPersona()!)}
               renderFallback={() => (
                 <Text as="span" size="H6" aria-label="Avatar fallback">
                   {nameInitials(defactoPersona()!.displayname)}
@@ -447,3 +472,127 @@ function PersonaPickerMenu({
     </ResponsiveMenu>
   );
 }
+
+export function TemporaryPersonaPicker({
+  mx,
+  onPersonaSelect,
+  anchor,
+  requestClose,
+}: TemporaryPersonaPickerProps) {
+  const [AddPersonaMenuAnchor, setAddPersonaMenuAnchor] = useState<RectCords | undefined>(anchor);
+  // const [selectedGlobalPersona, setSelectedGlobalPersona] =
+  //   useState<PerMessageProfileMsc4461 | null>(null);
+  // const [selectedRoomPersona, setSelectedRoomPersona] = useState<PerMessageProfileMsc4461 | null>(
+  //   latchedPersona ?? null
+  // );
+  const mountedRef = useRef(false);
+  const profileFetchGenerationRef = useRef(0);
+
+  const { profiles } = useProfiles(mx, mountedRef, profileFetchGenerationRef);
+
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const { filteredProfiles, filter, clearFilter } = useFilteredProfiles(
+    profiles ?? [],
+    mountedRef,
+    searchInputRef,
+    profileFetchGenerationRef
+  );
+
+  const { nameColor, avatarUrl } = usePersonaCosmetics(mx);
+
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <ResponsiveMenu
+      anchor={AddPersonaMenuAnchor}
+      position={'Left'}
+      align="Start"
+      offset={16}
+      alignOffset={-44}
+      requestClose={() => {
+        setAddPersonaMenuAnchor(undefined);
+        clearFilter();
+        requestClose();
+      }}
+      menu={
+        <Menu>
+          <Box
+            direction="Column"
+            gap="100"
+            style={{ padding: config.space.S200, minWidth: '18rem' }}
+          >
+            <Input
+              ref={searchInputRef}
+              variant="SurfaceVariant"
+              size="400"
+              placeholder="Search"
+              maxLength={50}
+              autoFocus={!isMobileOrTablet()}
+              onChange={filter}
+              before={menuIcon(MagnifyingGlass)}
+            />
+
+            <Scroll hideTrack ref={scrollRef} size="400" style={{ maxHeight: '10rem' }}>
+              {filteredProfiles?.map((profile) => (
+                <MenuItem
+                  key={profile.id}
+                  size="400"
+                  radii="300"
+                  className={css.PersonaPickerMenuItem}
+                  onClick={async () => {
+                    await onPersonaSelect(profile);
+                    requestClose();
+                    return;
+                  }}
+                  before={
+                    <Avatar
+                      size="300"
+                      radii="400"
+                      style={{
+                        width: 28,
+                        height: 28,
+                        marginLeft: -6,
+                      }}
+                      aria-label="Profile avatar"
+                    >
+                      <UserAvatar
+                        userId={profile.id}
+                        src={avatarUrl?.(profile)}
+                        fallbackColor={profile['eu.she-a.color']?.on_light ?? undefined}
+                        renderFallback={() => (
+                          <Text as="span" size="H4" aria-label="Avatar fallback">
+                            {nameInitials(profile.displayname)}
+                          </Text>
+                        )}
+                        alt={`Avatar for profile ${profile.id}`}
+                      />
+                    </Avatar>
+                  }
+                >
+                  <Box direction="Column">
+                    <Text
+                      truncate
+                      style={{ color: nameColor?.(profile) ?? undefined, maxWidth: toRem(150) }}
+                    >
+                      {profile.displayname}
+                    </Text>
+                    <Text
+                      truncate
+                      size="T200"
+                      style={{
+                        color: `color-mix(${color.Surface.OnContainer}, transparent 20%)`,
+                        maxWidth: toRem(150),
+                      }}
+                    >
+                      {profile.id}
+                    </Text>
+                  </Box>
+                </MenuItem>
+              ))}
+            </Scroll>
+          </Box>
+        </Menu>
+      }
+    ></ResponsiveMenu>
+  );
+}
diff --git a/src/app/features/room/poll-modals/PollResponses.tsx b/src/app/features/room/poll-modals/PollResponses.tsx
index eb3f3639bf..6f014d7a27 100644
--- a/src/app/features/room/poll-modals/PollResponses.tsx
+++ b/src/app/features/room/poll-modals/PollResponses.tsx
@@ -131,6 +131,7 @@ export const PollResponsesViewer = as<'div', PollResponsesViewerProps>(
                           room.roomId,
                           space?.roomId,
                           senderId,
+                          undefined,
                           getMouseEventCords(event.nativeEvent),
                           'Bottom'
                         );
diff --git a/src/app/features/room/reaction-viewer/ReactionViewer.tsx b/src/app/features/room/reaction-viewer/ReactionViewer.tsx
index 93e3dcf7aa..9e18470de3 100644
--- a/src/app/features/room/reaction-viewer/ReactionViewer.tsx
+++ b/src/app/features/room/reaction-viewer/ReactionViewer.tsx
@@ -116,6 +116,7 @@ export const ReactionViewer = as<'div', ReactionViewerProps>(
                           room.roomId,
                           space?.roomId,
                           senderId,
+                          undefined,
                           getMouseEventCords(event.nativeEvent),
                           'Bottom'
                         );
diff --git a/src/app/features/settings/Persona/PerMessageProfileEditor.test.tsx b/src/app/features/settings/Persona/PerMessageProfileEditor.test.tsx
new file mode 100644
index 0000000000..37ee53708a
--- /dev/null
+++ b/src/app/features/settings/Persona/PerMessageProfileEditor.test.tsx
@@ -0,0 +1,59 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import type { MatrixClient } from '$types/matrix-sdk';
+import type * as PerMessageProfileModule from '$hooks/usePerMessageProfile';
+import { PerMessageProfileEditor } from './PerMessageProfileEditor';
+
+const mocked = vi.hoisted(() => ({
+  addOrUpdate: vi.fn<typeof PerMessageProfileModule.addOrUpdatePerMessageProfile>(),
+  rename: vi.fn<typeof PerMessageProfileModule.renamePerMessageProfile>(),
+  remove: vi.fn<typeof PerMessageProfileModule.deletePerMessageProfile>(),
+}));
+
+vi.mock('$hooks/usePerMessageProfile', async (importOriginal) => ({
+  ...(await importOriginal<typeof PerMessageProfileModule>()),
+  addOrUpdatePerMessageProfile: mocked.addOrUpdate,
+  renamePerMessageProfile: mocked.rename,
+  deletePerMessageProfile: mocked.remove,
+}));
+
+vi.mock('$hooks/useMediaAuthentication', () => ({
+  useMediaAuthentication: () => false,
+}));
+
+describe('PerMessageProfileEditor', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocked.addOrUpdate.mockResolvedValue(undefined);
+    mocked.rename.mockResolvedValue(undefined);
+  });
+
+  it('uses the renamed persona ID for later saves', async () => {
+    render(
+      <PerMessageProfileEditor
+        mx={{} as MatrixClient}
+        profileId="old-id"
+        displayName="New Profile"
+        shorthands={{ prefix: [] }}
+      />
+    );
+
+    fireEvent.change(screen.getByLabelText('profile id'), { target: { value: 'new-id' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Save profile changes for old-id' }));
+
+    await waitFor(() => {
+      expect(mocked.rename).toHaveBeenCalledWith(expect.anything(), 'old-id', 'new-id');
+    });
+
+    fireEvent.change(screen.getByLabelText('Display name for old-id'), {
+      target: { value: 'Edited Profile' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'Save profile changes for old-id' }));
+
+    await waitFor(() => expect(mocked.addOrUpdate).toHaveBeenCalledTimes(2));
+    expect(mocked.addOrUpdate.mock.calls[1]?.[1]).toMatchObject({
+      id: 'new-id',
+      displayname: 'Edited Profile',
+    });
+  });
+});
diff --git a/src/app/features/settings/Persona/PerMessageProfileEditor.tsx b/src/app/features/settings/Persona/PerMessageProfileEditor.tsx
index 165f91a480..039aa3dfed 100644
--- a/src/app/features/settings/Persona/PerMessageProfileEditor.tsx
+++ b/src/app/features/settings/Persona/PerMessageProfileEditor.tsx
@@ -354,7 +354,7 @@ export function PerMessageProfileEditor({
   const [saveState, handleSave] = useAsyncCallback(
     useCallback(async () => {
       await addOrUpdatePerMessageProfile(mx, {
-        id: profileId,
+        id: currentId,
         displayname: newDisplayName,
         avatar_url: avatarMxc,
         [MATRIX_UNSTABLE_PROFILE_PRONOUNS_PROPERTY_NAME]: newPronouns,
@@ -374,12 +374,12 @@ export function PerMessageProfileEditor({
       setChangingDisplayName(false);
       setDisableSetDisplayname(false);
       if (hasIdChange) {
-        await renamePerMessageProfile(mx, profileId, newId);
+        await renamePerMessageProfile(mx, currentId, newId);
         setCurrentId(newId);
       }
     }, [
       mx,
-      profileId,
+      currentId,
       newDisplayName,
       avatarMxc,
       newPronouns,
@@ -393,11 +393,11 @@ export function PerMessageProfileEditor({
 
   const [deleteState, handleDelete] = useAsyncCallback(
     useCallback(async () => {
-      await deletePerMessageProfile(mx, profileId);
+      await deletePerMessageProfile(mx, currentId);
       setCurrentDisplayName('');
       setCurrentPronouns([]);
-      if (onDelete) onDelete(profileId);
-    }, [mx, profileId, onDelete])
+      if (onDelete) onDelete(currentId);
+    }, [mx, currentId, onDelete])
   );
 
   const handleIdChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
diff --git a/src/app/hooks/timeline/useTimelineActions.ts b/src/app/hooks/timeline/useTimelineActions.ts
index b68a71f71f..aa4010fb49 100644
--- a/src/app/hooks/timeline/useTimelineActions.ts
+++ b/src/app/hooks/timeline/useTimelineActions.ts
@@ -11,6 +11,8 @@ import { getMemberDisplayName } from '$utils/room/display';
 import { extractReplyDraftBody, resolveReplyDraftTarget } from '$utils/room/relations';
 import { createMentionElement, moveCursor } from '$components/editor';
 import * as prefix from '$unstable/prefixes';
+import type { Persona } from '$hooks/usePerMessageProfile';
+import { convertBeeperFormatToOurPerMessageProfile } from '$hooks/usePerMessageProfile';
 
 /**
  * The profile popup reads name, avatar and the identity fields off the room
@@ -55,6 +57,7 @@ export interface UseTimelineActionsOptions {
     roomId: string,
     spaceId: string | undefined,
     userId: string,
+    pmp: Persona | undefined,
     rect: DOMRect,
     undefinedArg?: undefined,
     options?: unknown
@@ -104,16 +107,28 @@ export function useTimelineActions({
       const userId = evt.currentTarget.getAttribute('data-user-id');
       if (!userId) return;
 
+      const messageId = evt.currentTarget.getAttribute('data-parent-message-id');
+      let perMessageProfile;
+      if (messageId) {
+        const pmp = room.findEventById(messageId)?.getContent()[
+          prefix.MATRIX_UNSTABLE_PER_MESSAGE_PROFILE_PROPERTY_NAME
+        ];
+        if (pmp) {
+          perMessageProfile = convertBeeperFormatToOurPerMessageProfile(pmp);
+        }
+      }
+
       openUserRoomProfile(
         room.roomId,
         spaceId,
         userId,
+        perMessageProfile,
         evt.currentTarget.getBoundingClientRect(),
         undefined,
         buildCachedProfilePayload(getGlobalProfile(userId))
       );
     },
-    [room.roomId, spaceId, openUserRoomProfile, getGlobalProfile]
+    [room, spaceId, openUserRoomProfile, getGlobalProfile]
   );
 
   const handleUsernameClick: MouseEventHandler<HTMLButtonElement> = useCallback(
diff --git a/src/app/hooks/timeline/useTimelineEventRenderer.tsx b/src/app/hooks/timeline/useTimelineEventRenderer.tsx
index 8bf1cbc014..073967cf97 100644
--- a/src/app/hooks/timeline/useTimelineEventRenderer.tsx
+++ b/src/app/hooks/timeline/useTimelineEventRenderer.tsx
@@ -91,8 +91,9 @@ import { EncryptedContent, Message, Reactions } from '$features/room/message';
 import { useSableCosmetics } from '$hooks/useSableCosmetics';
 import { useRoomMemberHydration } from '$hooks/useRoomMemberHydration';
 import { M_POLL_START } from 'matrix-js-sdk';
+import type { Persona } from '$app/persona';
 
-function DecoratedUser({ room, userId, userName }: DecoratedUserProps) {
+function DecoratedUser({ room, userId, userName, pmp }: DecoratedUserProps) {
   const { color, font } = useSableCosmetics(userId, room ?? ({} as Room));
 
   const openUserRoomProfile = useOpenUserRoomProfile();
@@ -104,10 +105,11 @@ function DecoratedUser({ room, userId, userName }: DecoratedUserProps) {
         room.roomId,
         undefined,
         userId,
+        pmp,
         evt.currentTarget.getBoundingClientRect()
       );
     },
-    [room, userId, openUserRoomProfile]
+    [room, userId, openUserRoomProfile, pmp]
   );
 
   return (
@@ -121,6 +123,7 @@ type DecoratedUserProps = {
   room: Room;
   userId: string;
   userName?: string;
+  pmp?: Persona;
 };
 
 type ThreadReplyChipProps = {
diff --git a/src/app/hooks/useMemberEventParser.tsx b/src/app/hooks/useMemberEventParser.tsx
index a5fdaa83df..9ecc19cfa6 100644
--- a/src/app/hooks/useMemberEventParser.tsx
+++ b/src/app/hooks/useMemberEventParser.tsx
@@ -39,7 +39,13 @@ function DecoratedUser({ roomId, userId, userName }: DecoratedUserProps) {
     (evt) => {
       evt.preventDefault();
       evt.stopPropagation();
-      openUserRoomProfile(roomId, undefined, userId, evt.currentTarget.getBoundingClientRect());
+      openUserRoomProfile(
+        roomId,
+        undefined,
+        userId,
+        undefined,
+        evt.currentTarget.getBoundingClientRect()
+      );
     },
     [roomId, userId, openUserRoomProfile]
   );
diff --git a/src/app/hooks/useMentionClickHandler.ts b/src/app/hooks/useMentionClickHandler.ts
index f265a692df..4191cbb587 100644
--- a/src/app/hooks/useMentionClickHandler.ts
+++ b/src/app/hooks/useMentionClickHandler.ts
@@ -38,7 +38,7 @@ export const useMentionClickHandler = (roomId: string): ReactEventHandler<HTMLEl
       if (typeof mentionId !== 'string') return;
 
       if (isUserId(mentionId)) {
-        openProfile(roomId, space?.roomId, mentionId, target.getBoundingClientRect());
+        openProfile(roomId, space?.roomId, mentionId, undefined, target.getBoundingClientRect());
         return;
       }
 
diff --git a/src/app/hooks/usePerMessageProfile.ts b/src/app/hooks/usePerMessageProfile.ts
index b6d881f3aa..fc783968fa 100644
--- a/src/app/hooks/usePerMessageProfile.ts
+++ b/src/app/hooks/usePerMessageProfile.ts
@@ -10,6 +10,11 @@ import { resolvePersonaProxy } from '$app/persona/proxy';
 import { resolvePersona } from '$app/persona/selection';
 import { ProfileCatalog } from '$app/persona/catalog';
 import type { PerMessageProfileMsc4461, Persona } from '$app/persona';
+import { useMediaAuthentication } from './useMediaAuthentication';
+import { mxcUrlToHttp } from '$app/utils/mediaUrl';
+import { useCallback } from 'react';
+import { useAccessibleNameColor } from './useAccessibleNameColor';
+import { useActiveTheme, ThemeKind } from './useTheme';
 
 // Compatibility exports for existing callers while persona persistence lives in the catalog.
 export * from '$app/persona/catalog';
@@ -87,3 +92,37 @@ export async function getCurrentlyUsedPerMessageProfileForAccount(
 ): Promise<PerMessageProfileMsc4461 | undefined> {
   return (await new ProfileCatalog(mx).getSelection('account'))?.persona;
 }
+
+export function usePersonaCosmetics(mx: MatrixClient | undefined, smallAvatar: boolean = true) {
+  const useAuthentication = useMediaAuthentication();
+  const activeTheme = useActiveTheme();
+  const accessibleNameColor = useAccessibleNameColor(activeTheme.kind);
+
+  const nameColor = useCallback(
+    (persona: PerMessageProfileMsc4461) =>
+      accessibleNameColor(
+        activeTheme.kind === ThemeKind.Dark
+          ? persona['eu.she-a.color']?.on_dark
+          : persona['eu.she-a.color']?.on_light
+      ),
+    [activeTheme, accessibleNameColor]
+  );
+
+  const avatarUrl = useCallback(
+    (profile: PerMessageProfileMsc4461) => {
+      if (profile.avatar_url !== undefined) {
+        return (
+          (smallAvatar
+            ? mxcUrlToHttp(mx!, profile.avatar_url, useAuthentication, 96, 96, 'crop')
+            : mxcUrlToHttp(mx!, profile.avatar_url, useAuthentication)) ?? undefined
+        );
+      } else {
+        return undefined;
+      }
+    },
+    [mx, useAuthentication, smallAvatar]
+  );
+
+  if (!mx) return { avatarUrl: undefined, nameColor: undefined };
+  return { nameColor, avatarUrl };
+}
diff --git a/src/app/state/hooks/userRoomProfile.ts b/src/app/state/hooks/userRoomProfile.ts
index 0928238776..88f3530ecc 100644
--- a/src/app/state/hooks/userRoomProfile.ts
+++ b/src/app/state/hooks/userRoomProfile.ts
@@ -4,6 +4,7 @@ import type { Position, RectCords } from 'folds';
 import type { UserProfile } from '$hooks/useUserProfile';
 import type { UserRoomProfileState } from '$state/userRoomProfile';
 import { userRoomProfileAtom } from '$state/userRoomProfile';
+import type { Persona } from '$app/persona';
 
 export const useUserRoomProfileState = (): UserRoomProfileState | undefined => {
   const data = useAtomValue(userRoomProfileAtom);
@@ -25,6 +26,7 @@ type OpenCallback = (
   roomId: string,
   spaceId: string | undefined,
   userId: string,
+  pmp: Persona | undefined,
   cords: RectCords,
   position?: Position,
   initialProfile?: Partial<UserProfile>
@@ -34,11 +36,12 @@ export const useOpenUserRoomProfile = (): OpenCallback => {
   const setUserRoomProfile = useSetAtom(userRoomProfileAtom);
 
   const open: OpenCallback = useCallback(
-    (roomId, spaceId, userId, cords, position, initialProfile) => {
+    (roomId, spaceId, userId, pmp, cords, position, initialProfile) => {
       setUserRoomProfile({
         roomId,
         spaceId,
         userId,
+        pmp,
         cords,
         position,
         initialProfile,
diff --git a/src/app/state/userRoomProfile.ts b/src/app/state/userRoomProfile.ts
index 22e5b0bfb4..34e7d318e5 100644
--- a/src/app/state/userRoomProfile.ts
+++ b/src/app/state/userRoomProfile.ts
@@ -1,11 +1,13 @@
 import type { Position, RectCords } from 'folds';
 import { atom } from 'jotai';
 import type { UserProfile } from '$hooks/useUserProfile';
+import type { Persona } from '$app/persona';
 
 export type UserRoomProfileState = {
   userId: string;
   roomId: string;
   spaceId?: string;
+  pmp?: Persona;
   cords: RectCords;
   position?: Position;
   initialProfile?: Partial<UserProfile>;