diff --git a/src/app/components/invite-user-prompt/InviteUserPrompt.tsx b/src/app/components/invite-user-prompt/InviteUserPrompt.tsx
new file mode 100644
index 00000000..82313c3e
--- /dev/null
+++ b/src/app/components/invite-user-prompt/InviteUserPrompt.tsx
@@ -0,0 +1,291 @@
+import React, {
+  ChangeEventHandler,
+  FormEventHandler,
+  KeyboardEventHandler,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Box,
+  Header,
+  config,
+  Text,
+  IconButton,
+  Icon,
+  Icons,
+  Input,
+  Button,
+  Spinner,
+  color,
+  TextArea,
+  Dialog,
+  Menu,
+  toRem,
+  Scroll,
+  MenuItem,
+} from 'folds';
+import { Room } from 'matrix-js-sdk';
+import { isKeyHotkey } from 'is-hotkey';
+import FocusTrap from 'focus-trap-react';
+import { stopPropagation } from '../../utils/keyboard';
+import { useDirectUsers } from '../../hooks/useDirectUsers';
+import { getMxIdLocalPart, getMxIdServer, isUserId } from '../../utils/matrix';
+import { Membership } from '../../../types/matrix/room';
+import { useAsyncSearch, UseAsyncSearchOptions } from '../../hooks/useAsyncSearch';
+import { highlightText, makeHighlightRegex } from '../../plugins/react-custom-html-parser';
+import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { BreakWord } from '../../styles/Text.css';
+import { useAlive } from '../../hooks/useAlive';
+
+const SEARCH_OPTIONS: UseAsyncSearchOptions = {
+  limit: 1000,
+  matchOptions: {
+    contain: true,
+  },
+};
+const getUserIdString = (userId: string) => getMxIdLocalPart(userId) ?? userId;
+
+type InviteUserProps = {
+  room: Room;
+  requestClose: () => void;
+};
+export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
+  const mx = useMatrixClient();
+  const alive = useAlive();
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const directUsers = useDirectUsers();
+  const [validUserId, setValidUserId] = useState<string>();
+
+  const filteredUsers = useMemo(
+    () =>
+      directUsers.filter((userId) => {
+        const membership = room.getMember(userId)?.membership;
+        return membership !== Membership.Join;
+      }),
+    [directUsers, room]
+  );
+  const [result, search, resetSearch] = useAsyncSearch(
+    filteredUsers,
+    getUserIdString,
+    SEARCH_OPTIONS
+  );
+  const queryHighlighRegex = result?.query
+    ? makeHighlightRegex(result.query.split(' '))
+    : undefined;
+
+  const [inviteState, invite] = useAsyncCallback<void, Error, [string, string | undefined]>(
+    useCallback(
+      async (userId, reason) => {
+        await mx.invite(room.roomId, userId, reason);
+      },
+      [mx, room]
+    )
+  );
+
+  const inviting = inviteState.status === AsyncStatus.Loading;
+
+  const handleReset = () => {
+    if (inputRef.current) inputRef.current.value = '';
+    setValidUserId(undefined);
+    resetSearch();
+  };
+
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
+    evt.preventDefault();
+    const target = evt.target as HTMLFormElement | undefined;
+
+    if (inviting || !validUserId) return;
+
+    const reasonInput = target?.reasonInput as HTMLTextAreaElement | undefined;
+    const reason = reasonInput?.value.trim();
+
+    invite(validUserId, reason || undefined).then(() => {
+      if (alive()) {
+        handleReset();
+        if (reasonInput) reasonInput.value = '';
+      }
+    });
+  };
+
+  const handleSearchChange: ChangeEventHandler<HTMLInputElement> = (evt) => {
+    const value = evt.currentTarget.value.trim();
+    if (isUserId(value)) {
+      setValidUserId(value);
+    } else {
+      setValidUserId(undefined);
+      const term = getMxIdLocalPart(value) ?? (value.startsWith('@') ? value.slice(1) : value);
+      if (term) {
+        search(term);
+      } else {
+        resetSearch();
+      }
+    }
+  };
+
+  const handleUserId = (userId: string) => {
+    if (inputRef.current) {
+      inputRef.current.value = userId;
+      setValidUserId(userId);
+      resetSearch();
+      inputRef.current.focus();
+    }
+  };
+
+  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (evt) => {
+    if (isKeyHotkey('escape', evt)) {
+      resetSearch();
+      return;
+    }
+    if (isKeyHotkey('tab', evt) && result && result.items.length > 0) {
+      evt.preventDefault();
+      const userId = result.items[0];
+      handleUserId(userId);
+    }
+  };
+
+  return (
+    <Overlay open backdrop={<OverlayBackdrop />}>
+      <OverlayCenter>
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: () => inputRef.current,
+            clickOutsideDeactivates: true,
+            onDeactivate: requestClose,
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Dialog>
+            <Box grow="Yes" direction="Column">
+              <Header
+                size="500"
+                style={{ padding: `0 ${config.space.S200} 0 ${config.space.S400}` }}
+              >
+                <Box grow="Yes">
+                  <Text size="H4" truncate>
+                    Invite
+                  </Text>
+                </Box>
+                <Box shrink="No">
+                  <IconButton size="300" radii="300" onClick={requestClose}>
+                    <Icon src={Icons.Cross} />
+                  </IconButton>
+                </Box>
+              </Header>
+              <Box
+                as="form"
+                onSubmit={handleSubmit}
+                shrink="No"
+                style={{ padding: config.space.S400 }}
+                direction="Column"
+                gap="400"
+              >
+                <Box direction="Column" gap="100">
+                  <Text size="L400">User ID</Text>
+                  <div>
+                    <Input
+                      size="500"
+                      ref={inputRef}
+                      onChange={handleSearchChange}
+                      onKeyDown={handleKeyDown}
+                      placeholder="@john:server"
+                      name="userIdInput"
+                      variant="Background"
+                      disabled={inviting}
+                      autoComplete="off"
+                      required
+                    />
+                    {result && result.items.length > 0 && (
+                      <FocusTrap
+                        focusTrapOptions={{
+                          initialFocus: false,
+                          onDeactivate: resetSearch,
+                          returnFocusOnDeactivate: false,
+                          clickOutsideDeactivates: true,
+                          allowOutsideClick: true,
+                          isKeyForward: (evt: KeyboardEvent) => isKeyHotkey('arrowdown', evt),
+                          isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
+                          escapeDeactivates: stopPropagation,
+                        }}
+                      >
+                        <Box style={{ position: 'relative' }}>
+                          <Menu style={{ position: 'absolute', top: 0, zIndex: 1, width: '100%' }}>
+                            <Scroll size="300" style={{ maxHeight: toRem(100) }}>
+                              <div style={{ padding: config.space.S100 }}>
+                                {result.items.map((userId) => {
+                                  const username = `${getMxIdLocalPart(userId)}`;
+                                  const userServer = getMxIdServer(userId);
+
+                                  return (
+                                    <MenuItem
+                                      key={userId}
+                                      type="button"
+                                      size="300"
+                                      variant="Surface"
+                                      radii="300"
+                                      onClick={() => handleUserId(userId)}
+                                      after={
+                                        <Text size="T200" truncate>
+                                          {userServer}
+                                        </Text>
+                                      }
+                                      disabled={inviting}
+                                    >
+                                      <Box grow="Yes">
+                                        <Text size="T300" truncate>
+                                          <b>
+                                            {queryHighlighRegex
+                                              ? highlightText(queryHighlighRegex, [
+                                                  username ?? userId,
+                                                ])
+                                              : username}
+                                          </b>
+                                        </Text>
+                                      </Box>
+                                    </MenuItem>
+                                  );
+                                })}
+                              </div>
+                            </Scroll>
+                          </Menu>
+                        </Box>
+                      </FocusTrap>
+                    )}
+                  </div>
+                </Box>
+                <Box direction="Column" gap="100">
+                  <Text size="L400">Reason (Optional)</Text>
+                  <TextArea
+                    size="500"
+                    name="reasonInput"
+                    variant="Background"
+                    rows={4}
+                    resize="None"
+                  />
+                </Box>
+                {inviteState.status === AsyncStatus.Error && (
+                  <Text size="T200" style={{ color: color.Critical.Main }} className={BreakWord}>
+                    <b>{inviteState.error.message}</b>
+                  </Text>
+                )}
+                <Button
+                  type="submit"
+                  disabled={!validUserId || inviting}
+                  before={inviting && <Spinner size="200" variant="Primary" fill="Solid" />}
+                >
+                  <Text size="B400">Invite</Text>
+                </Button>
+              </Box>
+            </Box>
+          </Dialog>
+        </FocusTrap>
+      </OverlayCenter>
+    </Overlay>
+  );
+}
diff --git a/src/app/components/invite-user-prompt/index.ts b/src/app/components/invite-user-prompt/index.ts
new file mode 100644
index 00000000..156810b8
--- /dev/null
+++ b/src/app/components/invite-user-prompt/index.ts
@@ -0,0 +1 @@
+export * from './InviteUserPrompt';
diff --git a/src/app/components/message/content/style.css.ts b/src/app/components/message/content/style.css.ts
index 93f3649c..bb5d8484 100644
--- a/src/app/components/message/content/style.css.ts
+++ b/src/app/components/message/content/style.css.ts
@@ -16,7 +16,6 @@ export const AbsoluteContainer = style([
     position: 'absolute',
     top: 0,
     left: 0,
-    zIndex: 1,
     width: '100%',
     height: '100%',
   },
@@ -26,6 +25,7 @@ export const AbsoluteFooter = style([
   DefaultReset,
   {
     position: 'absolute',
+    pointerEvents: 'none',
     bottom: config.space.S100,
     left: config.space.S100,
     right: config.space.S100,
diff --git a/src/app/components/room-intro/RoomIntro.tsx b/src/app/components/room-intro/RoomIntro.tsx
index c388efd4..ce550992 100644
--- a/src/app/components/room-intro/RoomIntro.tsx
+++ b/src/app/components/room-intro/RoomIntro.tsx
@@ -1,8 +1,7 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import { Avatar, Box, Button, Spinner, Text, as } from 'folds';
 import { Room } from 'matrix-js-sdk';
 import { useAtomValue } from 'jotai';
-import { openInviteUser } from '../../../client/action/navigation';
 import { IRoomCreateContent, Membership, StateEvent } from '../../../types/matrix/room';
 import { getMemberDisplayName, getStateEvent } from '../../utils/room';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
@@ -17,6 +16,7 @@ import { mDirectAtom } from '../../state/mDirectList';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
+import { InviteUserPrompt } from '../invite-user-prompt';
 
 export type RoomIntroProps = {
   room: Room;
@@ -27,6 +27,7 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
   const useAuthentication = useMediaAuthentication();
   const { navigateRoom } = useRoomNavigate();
   const mDirects = useAtomValue(mDirectAtom);
+  const [invitePrompt, setInvitePrompt] = useState(false);
 
   const createEvent = getStateEvent(room, StateEvent.RoomCreate);
   const avatarMxc = useRoomAvatar(room, mDirects.has(room.roomId));
@@ -76,14 +77,13 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
           )}
         </Box>
         <Box gap="200" wrap="Wrap">
-          <Button
-            onClick={() => openInviteUser(room.roomId)}
-            variant="Secondary"
-            size="300"
-            radii="300"
-          >
+          <Button onClick={() => setInvitePrompt(true)} variant="Secondary" size="300" radii="300">
             <Text size="B300">Invite Member</Text>
           </Button>
+
+          {invitePrompt && (
+            <InviteUserPrompt room={room} requestClose={() => setInvitePrompt(false)} />
+          )}
           {typeof prevRoomId === 'string' &&
             (mx.getRoom(prevRoomId)?.getMyMembership() === Membership.Join ? (
               <Button
diff --git a/src/app/components/user-avatar/UserAvatar.tsx b/src/app/components/user-avatar/UserAvatar.tsx
index 98067ad4..d9de9b79 100644
--- a/src/app/components/user-avatar/UserAvatar.tsx
+++ b/src/app/components/user-avatar/UserAvatar.tsx
@@ -1,15 +1,17 @@
 import { AvatarFallback, AvatarImage, color } from 'folds';
 import React, { ReactEventHandler, ReactNode, useState } from 'react';
+import classNames from 'classnames';
 import * as css from './UserAvatar.css';
 import colorMXID from '../../../util/colorMXID';
 
 type UserAvatarProps = {
+  className?: string;
   userId: string;
   src?: string;
   alt?: string;
   renderFallback: () => ReactNode;
 };
-export function UserAvatar({ userId, src, alt, renderFallback }: UserAvatarProps) {
+export function UserAvatar({ className, userId, src, alt, renderFallback }: UserAvatarProps) {
   const [error, setError] = useState(false);
 
   const handleLoad: ReactEventHandler<HTMLImageElement> = (evt) => {
@@ -20,7 +22,7 @@ export function UserAvatar({ userId, src, alt, renderFallback }: UserAvatarProps
     return (
       <AvatarFallback
         style={{ backgroundColor: colorMXID(userId), color: color.Surface.Container }}
-        className={css.UserAvatar}
+        className={classNames(css.UserAvatar, className)}
       >
         {renderFallback()}
       </AvatarFallback>
@@ -29,7 +31,7 @@ export function UserAvatar({ userId, src, alt, renderFallback }: UserAvatarProps
 
   return (
     <AvatarImage
-      className={css.UserAvatar}
+      className={classNames(css.UserAvatar, className)}
       src={src}
       alt={alt}
       onError={() => setError(true)}
diff --git a/src/app/components/user-profile/UserHero.tsx b/src/app/components/user-profile/UserHero.tsx
index cf4c815f..0e7fb748 100644
--- a/src/app/components/user-profile/UserHero.tsx
+++ b/src/app/components/user-profile/UserHero.tsx
@@ -1,6 +1,17 @@
-import React from 'react';
-import { Avatar, Box, Icon, Icons, Text } from 'folds';
+import React, { useState } from 'react';
+import {
+  Avatar,
+  Box,
+  Icon,
+  Icons,
+  Modal,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Text,
+} from 'folds';
 import classNames from 'classnames';
+import FocusTrap from 'focus-trap-react';
 import * as css from './styles.css';
 import { UserAvatar } from '../user-avatar';
 import colorMXID from '../../../util/colorMXID';
@@ -8,6 +19,8 @@ import { getMxIdLocalPart } from '../../utils/matrix';
 import { BreakWord, LineClamp3 } from '../../styles/Text.css';
 import { UserPresence } from '../../hooks/useUserPresence';
 import { AvatarPresence, PresenceBadge } from '../presence';
+import { ImageViewer } from '../image-viewer';
+import { stopPropagation } from '../../utils/keyboard';
 
 type UserHeroProps = {
   userId: string;
@@ -15,6 +28,8 @@ type UserHeroProps = {
   presence?: UserPresence;
 };
 export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
+  const [viewAvatar, setViewAvatar] = useState<string>();
+
   return (
     <Box direction="Column" className={css.UserHero}>
       <div
@@ -24,7 +39,9 @@ export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
           filter: avatarUrl ? undefined : 'brightness(50%)',
         }}
       >
-        {avatarUrl && <img className={css.UserHeroCover} src={avatarUrl} alt={userId} />}
+        {avatarUrl && (
+          <img className={css.UserHeroCover} src={avatarUrl} alt={userId} draggable="false" />
+        )}
       </div>
       <div className={css.UserHeroAvatarContainer}>
         <AvatarPresence
@@ -33,8 +50,14 @@ export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
             presence && <PresenceBadge presence={presence.presence} status={presence.status} />
           }
         >
-          <Avatar className={css.UserHeroAvatar} size="500">
+          <Avatar
+            as={avatarUrl ? 'button' : 'div'}
+            onClick={avatarUrl ? () => setViewAvatar(avatarUrl) : undefined}
+            className={css.UserHeroAvatar}
+            size="500"
+          >
             <UserAvatar
+              className={css.UserHeroAvatarImg}
               userId={userId}
               src={avatarUrl}
               alt={userId}
@@ -42,6 +65,28 @@ export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
             />
           </Avatar>
         </AvatarPresence>
+        {viewAvatar && (
+          <Overlay open backdrop={<OverlayBackdrop />}>
+            <OverlayCenter>
+              <FocusTrap
+                focusTrapOptions={{
+                  initialFocus: false,
+                  onDeactivate: () => setViewAvatar(undefined),
+                  clickOutsideDeactivates: true,
+                  escapeDeactivates: stopPropagation,
+                }}
+              >
+                <Modal size="500" onContextMenu={(evt: any) => evt.stopPropagation()}>
+                  <ImageViewer
+                    src={viewAvatar}
+                    alt={userId}
+                    requestClose={() => setViewAvatar(undefined)}
+                  />
+                </Modal>
+              </FocusTrap>
+            </OverlayCenter>
+          </Overlay>
+        )}
       </div>
     </Box>
   );
diff --git a/src/app/components/user-profile/UserRoomProfile.tsx b/src/app/components/user-profile/UserRoomProfile.tsx
index eac12491..78d201ec 100644
--- a/src/app/components/user-profile/UserRoomProfile.tsx
+++ b/src/app/components/user-profile/UserRoomProfile.tsx
@@ -78,18 +78,20 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
         <Box direction="Column" gap="400">
           <Box gap="400" alignItems="Start">
             <UserHeroName displayName={displayName} userId={userId} />
-            <Box shrink="No">
-              <Button
-                size="300"
-                variant="Primary"
-                fill="Solid"
-                radii="300"
-                before={<Icon size="50" src={Icons.Message} filled />}
-                onClick={handleMessage}
-              >
-                <Text size="B300">Message</Text>
-              </Button>
-            </Box>
+            {userId !== myUserId && (
+              <Box shrink="No">
+                <Button
+                  size="300"
+                  variant="Primary"
+                  fill="Solid"
+                  radii="300"
+                  before={<Icon size="50" src={Icons.Message} filled />}
+                  onClick={handleMessage}
+                >
+                  <Text size="B300">Message</Text>
+                </Button>
+              </Box>
+            )}
           </Box>
           <Box alignItems="Center" gap="200" wrap="Wrap">
             {server && <ServerChip server={server} />}
diff --git a/src/app/components/user-profile/styles.css.ts b/src/app/components/user-profile/styles.css.ts
index ad6d5a95..62272a2e 100644
--- a/src/app/components/user-profile/styles.css.ts
+++ b/src/app/components/user-profile/styles.css.ts
@@ -39,4 +39,16 @@ export const UserAvatarContainer = style({
 });
 export const UserHeroAvatar = style({
   outline: `${config.borderWidth.B600} solid ${color.Surface.Container}`,
+  selectors: {
+    'button&': {
+      cursor: 'pointer',
+    },
+  },
+});
+export const UserHeroAvatarImg = style({
+  selectors: {
+    [`button${UserHeroAvatar}:hover &`]: {
+      filter: 'brightness(0.5)',
+    },
+  },
 });
diff --git a/src/app/features/lobby/HierarchyItemMenu.tsx b/src/app/features/lobby/HierarchyItemMenu.tsx
index ccbbe179..c6aff741 100644
--- a/src/app/features/lobby/HierarchyItemMenu.tsx
+++ b/src/app/features/lobby/HierarchyItemMenu.tsx
@@ -18,7 +18,6 @@ import {
 import { HierarchyItem } from '../../hooks/useSpaceHierarchy';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { MSpaceChildContent, StateEvent } from '../../../types/matrix/room';
-import { openInviteUser } from '../../../client/action/navigation';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { UseStateProvider } from '../../components/UseStateProvider';
 import { LeaveSpacePrompt } from '../../components/leave-space-prompt';
@@ -30,6 +29,7 @@ import { useOpenSpaceSettings } from '../../state/hooks/spaceSettings';
 import { IPowerLevels } from '../../hooks/usePowerLevels';
 import { getRoomCreatorsForRoomId } from '../../hooks/useRoomCreators';
 import { getRoomPermissionsAPI } from '../../hooks/useRoomPermissions';
+import { InviteUserPrompt } from '../../components/invite-user-prompt';
 
 type HierarchyItemWithParent = HierarchyItem & {
   parentId: string;
@@ -126,24 +126,39 @@ function InviteMenuItem({
   requestClose: () => void;
   disabled?: boolean;
 }) {
+  const mx = useMatrixClient();
+  const room = mx.getRoom(item.roomId);
+  const [invitePrompt, setInvitePrompt] = useState(false);
+
   const handleInvite = () => {
-    openInviteUser(item.roomId);
-    requestClose();
+    setInvitePrompt(true);
   };
 
   return (
-    <MenuItem
-      onClick={handleInvite}
-      size="300"
-      radii="300"
-      variant="Primary"
-      fill="None"
-      disabled={disabled}
-    >
-      <Text as="span" size="T300" truncate>
-        Invite
-      </Text>
-    </MenuItem>
+    <>
+      <MenuItem
+        onClick={handleInvite}
+        size="300"
+        radii="300"
+        variant="Primary"
+        fill="None"
+        aria-pressed={invitePrompt}
+        disabled={disabled || !room}
+      >
+        <Text as="span" size="T300" truncate>
+          Invite
+        </Text>
+      </MenuItem>
+      {invitePrompt && room && (
+        <InviteUserPrompt
+          room={room}
+          requestClose={() => {
+            setInvitePrompt(false);
+            requestClose();
+          }}
+        />
+      )}
+    </>
   );
 }
 
diff --git a/src/app/features/lobby/LobbyHeader.tsx b/src/app/features/lobby/LobbyHeader.tsx
index 77287123..a0c4d3ab 100644
--- a/src/app/features/lobby/LobbyHeader.tsx
+++ b/src/app/features/lobby/LobbyHeader.tsx
@@ -26,7 +26,6 @@ import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { RoomAvatar } from '../../components/room-avatar';
 import { nameInitials } from '../../utils/common';
 import * as css from './LobbyHeader.css';
-import { openInviteUser } from '../../../client/action/navigation';
 import { IPowerLevels } from '../../hooks/usePowerLevels';
 import { UseStateProvider } from '../../components/UseStateProvider';
 import { LeaveSpacePrompt } from '../../components/leave-space-prompt';
@@ -38,6 +37,7 @@ import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useOpenSpaceSettings } from '../../state/hooks/spaceSettings';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
+import { InviteUserPrompt } from '../../components/invite-user-prompt';
 
 type LobbyMenuProps = {
   powerLevels: IPowerLevels;
@@ -53,9 +53,10 @@ const LobbyMenu = forwardRef<HTMLDivElement, LobbyMenuProps>(
     const canInvite = permissions.action('invite', mx.getSafeUserId());
     const openSpaceSettings = useOpenSpaceSettings();
 
+    const [invitePrompt, setInvitePrompt] = useState(false);
+
     const handleInvite = () => {
-      openInviteUser(space.roomId);
-      requestClose();
+      setInvitePrompt(true);
     };
 
     const handleRoomSettings = () => {
@@ -65,6 +66,15 @@ const LobbyMenu = forwardRef<HTMLDivElement, LobbyMenuProps>(
 
     return (
       <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
+        {invitePrompt && (
+          <InviteUserPrompt
+            room={space}
+            requestClose={() => {
+              setInvitePrompt(false);
+              requestClose();
+            }}
+          />
+        )}
         <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
           <MenuItem
             onClick={handleInvite}
@@ -73,6 +83,7 @@ const LobbyMenu = forwardRef<HTMLDivElement, LobbyMenuProps>(
             size="300"
             after={<Icon size="100" src={Icons.UserPlus} />}
             radii="300"
+            aria-pressed={invitePrompt}
             disabled={!canInvite}
           >
             <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index ee8b6787..7eac21da 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -30,7 +30,6 @@ import { roomToUnreadAtom } from '../../state/room/roomToUnread';
 import { usePowerLevels } from '../../hooks/usePowerLevels';
 import { copyToClipboard } from '../../utils/dom';
 import { markAsRead } from '../../../client/action/notifications';
-import { openInviteUser } from '../../../client/action/navigation';
 import { UseStateProvider } from '../../components/UseStateProvider';
 import { LeaveRoomPrompt } from '../../components/leave-room-prompt';
 import { useRoomTypingMember } from '../../hooks/useRoomTypingMembers';
@@ -51,6 +50,7 @@ import {
 import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationSwitcher';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
+import { InviteUserPrompt } from '../../components/invite-user-prompt';
 
 type RoomNavItemMenuProps = {
   room: Room;
@@ -70,14 +70,15 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
     const openRoomSettings = useOpenRoomSettings();
     const space = useSpaceOptionally();
 
+    const [invitePrompt, setInvitePrompt] = useState(false);
+
     const handleMarkAsRead = () => {
       markAsRead(mx, room.roomId, hideActivity);
       requestClose();
     };
 
     const handleInvite = () => {
-      openInviteUser(room.roomId);
-      requestClose();
+      setInvitePrompt(true);
     };
 
     const handleCopyLink = () => {
@@ -94,6 +95,15 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
 
     return (
       <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
+        {invitePrompt && room && (
+          <InviteUserPrompt
+            room={room}
+            requestClose={() => {
+              setInvitePrompt(false);
+              requestClose();
+            }}
+          />
+        )}
         <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
           <MenuItem
             onClick={handleMarkAsRead}
@@ -137,6 +147,7 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
             size="300"
             after={<Icon size="100" src={Icons.UserPlus} />}
             radii="300"
+            aria-pressed={invitePrompt}
             disabled={!canInvite}
           >
             <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx
index 291c21c0..d2f65fcb 100644
--- a/src/app/features/room/RoomViewHeader.tsx
+++ b/src/app/features/room/RoomViewHeader.tsx
@@ -45,7 +45,6 @@ import { useRoomUnread } from '../../state/hooks/unread';
 import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
 import { markAsRead } from '../../../client/action/notifications';
 import { roomToUnreadAtom } from '../../state/room/roomToUnread';
-import { openInviteUser } from '../../../client/action/navigation';
 import { copyToClipboard } from '../../utils/dom';
 import { LeaveRoomPrompt } from '../../components/leave-room-prompt';
 import { useRoomAvatar, useRoomName, useRoomTopic } from '../../hooks/useRoomMeta';
@@ -69,6 +68,7 @@ import { JumpToTime } from './jump-to-time';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
+import { InviteUserPrompt } from '../../components/invite-user-prompt';
 
 type RoomMenuProps = {
   room: Room;
@@ -87,14 +87,15 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
   const notificationMode = getRoomNotificationMode(notificationPreferences, room.roomId);
   const { navigateRoom } = useRoomNavigate();
 
+  const [invitePrompt, setInvitePrompt] = useState(false);
+
   const handleMarkAsRead = () => {
     markAsRead(mx, room.roomId, hideActivity);
     requestClose();
   };
 
   const handleInvite = () => {
-    openInviteUser(room.roomId);
-    requestClose();
+    setInvitePrompt(true);
   };
 
   const handleCopyLink = () => {
@@ -113,6 +114,15 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
 
   return (
     <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
+      {invitePrompt && (
+        <InviteUserPrompt
+          room={room}
+          requestClose={() => {
+            setInvitePrompt(false);
+            requestClose();
+          }}
+        />
+      )}
       <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
         <MenuItem
           onClick={handleMarkAsRead}
@@ -156,6 +166,7 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
           size="300"
           after={<Icon size="100" src={Icons.UserPlus} />}
           radii="300"
+          aria-pressed={invitePrompt}
           disabled={!canInvite}
         >
           <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
diff --git a/src/app/pages/client/inbox/Invites.tsx b/src/app/pages/client/inbox/Invites.tsx
index bd9b694d..20518e56 100644
--- a/src/app/pages/client/inbox/Invites.tsx
+++ b/src/app/pages/client/inbox/Invites.tsx
@@ -81,6 +81,7 @@ type InviteData = {
   senderId: string;
   senderName: string;
   inviteTs?: number;
+  reason?: string;
 
   isSpace: boolean;
   isDirect: boolean;
@@ -102,11 +103,17 @@ const makeInviteData = (mx: MatrixClient, room: Room, useAuthentication: boolean
   const member = room.getMember(userId);
   const memberEvent = member?.events.member;
 
+  const content = memberEvent?.getContent();
   const senderId = memberEvent?.getSender();
+
   const senderName = senderId
     ? getMemberDisplayName(room, senderId) ?? getMxIdLocalPart(senderId) ?? senderId
     : undefined;
-  const inviteTs = memberEvent?.getTs() ?? 0;
+  const inviteTs = memberEvent?.getTs();
+  const reason =
+    content && 'reason' in content && typeof content.reason === 'string'
+      ? content.reason
+      : undefined;
 
   return {
     room,
@@ -119,6 +126,7 @@ const makeInviteData = (mx: MatrixClient, room: Room, useAuthentication: boolean
     senderId: senderId ?? 'Unknown',
     senderName: senderName ?? 'Unknown',
     inviteTs,
+    reason,
 
     isSpace: isSpace(room),
     isDirect: direct,
@@ -130,7 +138,8 @@ const hasBadWords = (invite: InviteData): boolean =>
   testBadWords(invite.roomName) ||
   testBadWords(invite.roomTopic ?? '') ||
   testBadWords(invite.senderName) ||
-  testBadWords(invite.senderId);
+  testBadWords(invite.senderId) ||
+  testBadWords(invite.reason || '');
 
 type NavigateHandler = (roomId: string, space: boolean) => void;
 
@@ -184,7 +193,7 @@ function InviteCard({
       variant="SurfaceVariant"
       direction="Column"
       gap="300"
-      style={{ padding: `${config.space.S400} ${config.space.S400} ${config.space.S200}` }}
+      style={{ padding: config.space.S400 }}
     >
       {(invite.isEncrypted || invite.isDirect || invite.isSpace) && (
         <Box gap="200" alignItems="Center">
@@ -298,22 +307,29 @@ function InviteCard({
           </Box>
         </Box>
       </Box>
-      <Box gap="200" alignItems="Baseline">
-        <Box grow="Yes">
-          <Text size="T200" priority="300">
-            From: <b>{invite.senderId}</b>
-          </Text>
-        </Box>
-        {invite.inviteTs && (
-          <Box shrink="No">
-            <Time
-              size="T200"
-              ts={invite.inviteTs}
-              hour24Clock={hour24Clock}
-              dateFormatString={dateFormatString}
-              priority="300"
-            />
+      <Box direction="Column">
+        <Box gap="200" alignItems="Baseline">
+          <Box grow="Yes">
+            <Text size="T200" priority="300">
+              From: <b>{invite.senderId}</b>
+            </Text>
           </Box>
+          {typeof invite.inviteTs === 'number' && invite.inviteTs !== 0 && (
+            <Box shrink="No">
+              <Time
+                size="T200"
+                ts={invite.inviteTs}
+                hour24Clock={hour24Clock}
+                dateFormatString={dateFormatString}
+                priority="300"
+              />
+            </Box>
+          )}
+        </Box>
+        {invite.reason && (
+          <Text size="T200" priority="300">
+            Reason: {invite.reason}
+          </Text>
         )}
       </Box>
     </SequenceCard>
diff --git a/src/app/pages/client/sidebar/SpaceTabs.tsx b/src/app/pages/client/sidebar/SpaceTabs.tsx
index 3ee6c725..c06fab92 100644
--- a/src/app/pages/client/sidebar/SpaceTabs.tsx
+++ b/src/app/pages/client/sidebar/SpaceTabs.tsx
@@ -82,7 +82,6 @@ import { useRoomsUnread } from '../../../state/hooks/unread';
 import { roomToUnreadAtom } from '../../../state/room/roomToUnread';
 import { markAsRead } from '../../../../client/action/notifications';
 import { copyToClipboard } from '../../../utils/dom';
-import { openInviteUser } from '../../../../client/action/navigation';
 import { stopPropagation } from '../../../utils/keyboard';
 import { getMatrixToRoom } from '../../../plugins/matrix-to';
 import { getViaServers } from '../../../plugins/via-servers';
@@ -93,6 +92,7 @@ import { settingsAtom } from '../../../state/settings';
 import { useOpenSpaceSettings } from '../../../state/hooks/spaceSettings';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
+import { InviteUserPrompt } from '../../../components/invite-user-prompt';
 
 type SpaceMenuProps = {
   room: Room;
@@ -111,6 +111,8 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(
     const canInvite = permissions.action('invite', mx.getSafeUserId());
     const openSpaceSettings = useOpenSpaceSettings();
 
+    const [invitePrompt, setInvitePrompt] = useState(false);
+
     const allChild = useSpaceChildren(
       allRoomsAtom,
       room.roomId,
@@ -136,8 +138,7 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(
     };
 
     const handleInvite = () => {
-      openInviteUser(room.roomId);
-      requestClose();
+      setInvitePrompt(true);
     };
 
     const handleRoomSettings = () => {
@@ -147,6 +148,15 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(
 
     return (
       <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
+        {invitePrompt && room && (
+          <InviteUserPrompt
+            room={room}
+            requestClose={() => {
+              setInvitePrompt(false);
+              requestClose();
+            }}
+          />
+        )}
         <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
           <MenuItem
             onClick={handleMarkAsRead}
@@ -181,6 +191,7 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(
             size="300"
             after={<Icon size="100" src={Icons.UserPlus} />}
             radii="300"
+            aria-pressed={invitePrompt}
             disabled={!canInvite}
           >
             <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx
index a335a0ad..fba3de50 100644
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -57,7 +57,6 @@ import { useSpaceJoinedHierarchy } from '../../../hooks/useSpaceHierarchy';
 import { allRoomsAtom } from '../../../state/room-list/roomList';
 import { PageNav, PageNavContent, PageNavHeader } from '../../../components/page';
 import { usePowerLevels } from '../../../hooks/usePowerLevels';
-import { openInviteUser } from '../../../../client/action/navigation';
 import { useRecursiveChildScopeFactory, useSpaceChildren } from '../../../state/hooks/roomList';
 import { roomToParentsAtom } from '../../../state/room/roomToParents';
 import { markAsRead } from '../../../../client/action/notifications';
@@ -84,6 +83,7 @@ import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
 import { ContainerColor } from '../../../styles/ContainerColor.css';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { BreakWord } from '../../../styles/Text.css';
+import { InviteUserPrompt } from '../../../components/invite-user-prompt';
 
 type SpaceMenuProps = {
   room: Room;
@@ -102,6 +102,8 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
   const openSpaceSettings = useOpenSpaceSettings();
   const { navigateRoom } = useRoomNavigate();
 
+  const [invitePrompt, setInvitePrompt] = useState(false);
+
   const allChild = useSpaceChildren(
     allRoomsAtom,
     room.roomId,
@@ -122,8 +124,7 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
   };
 
   const handleInvite = () => {
-    openInviteUser(room.roomId);
-    requestClose();
+    setInvitePrompt(true);
   };
 
   const handleRoomSettings = () => {
@@ -139,6 +140,15 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
   return (
     <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
       <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+        {invitePrompt && room && (
+          <InviteUserPrompt
+            room={room}
+            requestClose={() => {
+              setInvitePrompt(false);
+              requestClose();
+            }}
+          />
+        )}
         <MenuItem
           onClick={handleMarkAsRead}
           size="300"
@@ -160,6 +170,7 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
           size="300"
           after={<Icon size="100" src={Icons.UserPlus} />}
           radii="300"
+          aria-pressed={invitePrompt}
           disabled={!canInvite}
         >
           <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>