diff --git a/src/App.tsx b/src/App.tsx
index e4093e0..2f729df 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -127,6 +127,7 @@ function App() {
               <Route path="profile" element={<Profile />} />
               <Route path="chats/:chatRoomId" element={<ChatRoom />} />
               <Route path="chats/:chatRoomId/info" element={<ChatRoomInfo />} />
+              <Route path="chats/:chatRoomId/invite" element={<ChatAdd />} />
             </Route>
           </Route>
 
diff --git a/src/apis/chat/entity.ts b/src/apis/chat/entity.ts
index 4ed8bff..31469ac 100644
--- a/src/apis/chat/entity.ts
+++ b/src/apis/chat/entity.ts
@@ -48,6 +48,18 @@ export interface CreateChatRoomResponse {
   chatRoomId: number;
 }
 
+export interface ChatRoomMember {
+  userId: number;
+  name: string;
+  profileImageUrl: string | null;
+  isOwner: boolean;
+  joinedAt: string;
+}
+
+export interface ChatRoomMembersResponse {
+  members: ChatRoomMember[];
+}
+
 export interface Messages {
   roomId: number;
   chatType: ChatType;
diff --git a/src/apis/chat/index.ts b/src/apis/chat/index.ts
index bbe1090..639dd07 100644
--- a/src/apis/chat/index.ts
+++ b/src/apis/chat/index.ts
@@ -3,13 +3,14 @@ import type {
   ChatMessage,
   ChatMessageRequestParam,
   ChatMessagesResponse,
+  ChatRoomMembersResponse,
   ChatRoomsResponse,
   CreateChatRoomResponse,
-  SendChatMessageRequest,
   InvitableFriendsRequestParams,
   InvitableFriendsResponse,
-  MatchResponse,
   MatchedRequestParams,
+  MatchResponse,
+  SendChatMessageRequest,
 } from './entity';
 
 export const getChatRooms = async () => {
@@ -35,6 +36,21 @@ export const postChatRoomsGroup = async (userIds: number[]) => {
   return response;
 };
 
+export const getChatRoomMembers = async (chatRoomId: number) => {
+  const response = await apiClient.get<ChatRoomMembersResponse>(`chats/rooms/${chatRoomId}/members`, {
+    requiresAuth: true,
+  });
+  return response;
+};
+
+export const postChatRoomMembers = async (chatRoomId: number, userIds: number[]) => {
+  const response = await apiClient.post<void>(`chats/rooms/${chatRoomId}/members`, {
+    body: { userIds },
+    requiresAuth: true,
+  });
+  return response;
+};
+
 export const postChatMessage = async ({ chatRoomId, content }: SendChatMessageRequest) => {
   return apiClient.post<ChatMessage>(`chats/rooms/${chatRoomId}/messages`, {
     body: { content },
diff --git a/src/apis/chat/mutations.ts b/src/apis/chat/mutations.ts
index f162b6a..4e35388 100644
--- a/src/apis/chat/mutations.ts
+++ b/src/apis/chat/mutations.ts
@@ -1,18 +1,20 @@
 import { mutationOptions } from '@tanstack/react-query';
 import {
+  deleteChatRoom,
   patchChatRoomName,
-  postChatRoomsGroup,
   postAdminChatRoom,
+  postChatRoomMembers,
   postChatMessage,
   postChatMute,
   postChatRooms,
-  deleteChatRoom,
+  postChatRoomsGroup,
 } from '@/apis/chat';
 
 export const chatMutationKeys = {
   createRoom: () => ['chat', 'createRoom'] as const,
   createAdminRoom: () => ['chat', 'createAdminRoom'] as const,
   createRoomGroup: () => ['chat', 'createRoomGroup'] as const,
+  inviteMembers: () => ['chat', 'inviteMembers'] as const,
   sendMessage: () => ['chat', 'sendMessage'] as const,
   toggleMute: (chatRoomId?: number) => ['chat', 'toggleMute', chatRoomId ?? 'unknown'] as const,
   updateRoomName: () => ['chat', 'updateRoomName'] as const,
@@ -35,6 +37,12 @@ export const chatMutations = {
       mutationKey: chatMutationKeys.createRoomGroup(),
       mutationFn: postChatRoomsGroup,
     }),
+  inviteMembers: () =>
+    mutationOptions({
+      mutationKey: chatMutationKeys.inviteMembers(),
+      mutationFn: ({ chatRoomId, userIds }: { chatRoomId: number; userIds: number[] }) =>
+        postChatRoomMembers(chatRoomId, userIds),
+    }),
   sendMessage: () =>
     mutationOptions({
       mutationKey: chatMutationKeys.sendMessage(),
diff --git a/src/apis/chat/queries.ts b/src/apis/chat/queries.ts
index 470030e..9e1d7df 100644
--- a/src/apis/chat/queries.ts
+++ b/src/apis/chat/queries.ts
@@ -1,5 +1,5 @@
 import { infiniteQueryOptions, queryOptions } from '@tanstack/react-query';
-import { getChatMessages, getChatRooms, getSearchChat, getInvitableFriends } from '@/apis/chat';
+import { getChatMessages, getChatRoomMembers, getChatRooms, getInvitableFriends, getSearchChat } from '@/apis/chat';
 import type { ChatMessagesResponse, SortBy } from '@/apis/chat/entity';
 
 interface ChatMessagesPageParam {
@@ -19,9 +19,13 @@ interface ChatMessagesQueryParams {
   limit?: number;
 }
 
+const hasValidChatRoomId = (chatRoomId?: number): chatRoomId is number => Number.isFinite(chatRoomId);
+
 export const chatQueryKeys = {
   all: ['chat'] as const,
   rooms: () => [...chatQueryKeys.all, 'rooms'] as const,
+  members: (chatRoomId: number) => [...chatQueryKeys.all, 'members', chatRoomId] as const,
+  membersDisabled: () => [...chatQueryKeys.all, 'members', 'disabled'] as const,
   messagesByRoom: (chatRoomId: number) => [...chatQueryKeys.all, 'messages', chatRoomId] as const,
   messages: ({ chatRoomId, messageId, limit }: ChatMessagesQueryKeyParams) =>
     [...chatQueryKeys.messagesByRoom(chatRoomId), messageId ?? 'latest', limit] as const,
@@ -36,6 +40,21 @@ export const chatQueries = {
       queryKey: chatQueryKeys.rooms(),
       queryFn: getChatRooms,
     }),
+  members: (chatRoomId?: number) => {
+    const isEnabled = hasValidChatRoomId(chatRoomId);
+
+    return queryOptions({
+      queryKey: isEnabled ? chatQueryKeys.members(chatRoomId) : chatQueryKeys.membersDisabled(),
+      queryFn: () => {
+        if (!hasValidChatRoomId(chatRoomId)) {
+          throw new Error('채팅방 ID가 필요합니다.');
+        }
+
+        return getChatRoomMembers(chatRoomId);
+      },
+      enabled: isEnabled,
+    });
+  },
   messages: ({ chatRoomId, messageId, limit = 20 }: ChatMessagesQueryParams) =>
     infiniteQueryOptions({
       queryKey: chatRoomId
diff --git a/src/components/layout/Header/components/ChatHeader.tsx b/src/components/layout/Header/components/ChatHeader.tsx
index 5cdfd8c..492d906 100644
--- a/src/components/layout/Header/components/ChatHeader.tsx
+++ b/src/components/layout/Header/components/ChatHeader.tsx
@@ -1,5 +1,7 @@
 import type { Ref } from 'react';
+import { useQuery } from '@tanstack/react-query';
 import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
+import { chatQueries } from '@/apis/chat/queries';
 import ChevronLeftIcon from '@/assets/svg/chevron-left.svg';
 import HamburgerIcon from '@/assets/svg/hamburger.svg';
 import ToggleSwitch from '@/components/common/ToggleSwitch';
@@ -25,7 +27,11 @@ function ChatHeader({ headerRef }: { headerRef?: Ref<HTMLElement> }) {
 
   const chatRoom = chatRoomList.rooms.find((room) => room.roomId === numericRoomId);
   const isGroup = isGroupChatType(chatRoom?.chatType);
+  const { data: chatRoomMembersData } = useQuery(
+    chatQueries.members(isGroup && chatRoom?.chatType === 'GROUP' ? numericRoomId : undefined)
+  );
   const isMuted = chatRoom?.isMuted ?? false;
+  const memberCount = chatRoom?.chatType === 'GROUP' ? (chatRoomMembersData?.members.length ?? 0) : clubMembers.length;
 
   const handleBack = () => {
     if (isInfoPage && chatRoomId) {
@@ -59,7 +65,7 @@ function ChatHeader({ headerRef }: { headerRef?: Ref<HTMLElement> }) {
 
         <div className="flex min-w-0 items-center gap-1">
           <span className="truncate leading-5 font-bold text-indigo-700">{chatRoom?.roomName ?? ''}</span>
-          {isGroup && <span className="text-text-700 text-[13px] leading-5">{clubMembers.length}</span>}
+          {isGroup && <span className="text-text-700 text-[13px] leading-5">{memberCount}</span>}
         </div>
       </div>
 
diff --git a/src/components/layout/Header/headerConfig.ts b/src/components/layout/Header/headerConfig.ts
index 25d3dcb..6b3adab 100644
--- a/src/components/layout/Header/headerConfig.ts
+++ b/src/components/layout/Header/headerConfig.ts
@@ -30,6 +30,10 @@ export const HEADER_CONFIGS: HeaderConfig[] = [
     type: 'none',
     match: (pathname) => pathname === '/chats/add',
   },
+  {
+    type: 'none',
+    match: (pathname) => /^\/chats\/\d+\/invite$/.test(pathname),
+  },
   {
     type: 'chatSearch',
     match: (pathname) => pathname === '/chats/search',
diff --git a/src/components/layout/Header/routeTitles.ts b/src/components/layout/Header/routeTitles.ts
index 5abb8c9..7cb1c58 100644
--- a/src/components/layout/Header/routeTitles.ts
+++ b/src/components/layout/Header/routeTitles.ts
@@ -72,6 +72,10 @@ export const ROUTE_TITLES: RouteTitle[] = [
     match: (pathname) => pathname === '/chats/add',
     title: '채팅방 추가',
   },
+  {
+    match: (pathname) => /^\/chats\/\d+\/invite$/.test(pathname),
+    title: '인원 추가하기',
+  },
   {
     match: (pathname) => pathname === '/chats/search',
     title: '채팅방 검색',
diff --git a/src/pages/Chat/AddChatRoom.tsx b/src/pages/Chat/AddChatRoom.tsx
index 5f70d57..65e5806 100644
--- a/src/pages/Chat/AddChatRoom.tsx
+++ b/src/pages/Chat/AddChatRoom.tsx
@@ -1,6 +1,6 @@
 import { startTransition, useState } from 'react';
 import { keepPreviousData, useQuery } from '@tanstack/react-query';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import type { InvitableSection, InvitableUser, SortBy } from '@/apis/chat/entity';
 import { chatQueries } from '@/apis/chat/queries';
 import SearchIcon from '@/assets/svg/big-search-icon.svg';
@@ -10,7 +10,8 @@ import { MemberAvatar } from '@/components/common/MemberAvatar';
 import RouteLoadingFallback from '@/components/common/RouteLoadingFallback';
 import ChatAddHeader from '@/components/layout/Header/components/ChatAddHeader';
 import { getHeaderPresentation } from '@/components/layout/Header/presentation';
-import { useCreateChatRoomGroupMutation } from '@/pages/Chat/hooks/useChatMutations';
+import { useCreateChatRoomGroupMutation, useInviteChatRoomMembersMutation } from '@/pages/Chat/hooks/useChatMutations';
+import { useApiErrorToast } from '@/utils/hooks/error/useApiErrorToast';
 import useDebouncedCallback from '@/utils/hooks/useDebounce';
 import { isApiError } from '@/utils/ts/error/apiError';
 import { isServerErrorStatus, redirectToServerErrorPage } from '@/utils/ts/error/errorRedirect';
@@ -67,8 +68,14 @@ const SORT_OPTIONS = [
 export default function AddChatRoom() {
   const navigate = useNavigate();
   const { pathname } = useLocation();
+  const { chatRoomId } = useParams<{ chatRoomId?: string }>();
   const { title } = getHeaderPresentation(pathname);
+  const numericRoomId = chatRoomId ? Number(chatRoomId) : undefined;
+  const isInviteMode = numericRoomId != null && Number.isFinite(numericRoomId);
+  const showApiErrorToast = useApiErrorToast();
   const { mutateAsync: createRoomGroup, isPending: isCreatingRoomGroup } = useCreateChatRoomGroupMutation();
+  const { mutateAsync: inviteChatRoomMembers, isPending: isInvitingChatRoomMembers } =
+    useInviteChatRoomMembersMutation();
 
   const [keyword, setKeyword] = useState('');
   const [debouncedQuery, setDebouncedQuery] = useState('');
@@ -79,29 +86,60 @@ export default function AddChatRoom() {
     ...chatQueries.invite(debouncedQuery, sortBy),
     placeholderData: keepPreviousData,
   });
+  const { data: chatRoomMembersData, isPending: isChatRoomMembersPending } = useQuery(
+    chatQueries.members(isInviteMode ? numericRoomId : undefined)
+  );
   const hasData = data != null;
+  const isCurrentRoomMembersReady = !isInviteMode || chatRoomMembersData != null;
+  const currentRoomMemberIds = isCurrentRoomMembersReady
+    ? new Set(chatRoomMembersData?.members.map((member) => member.userId) ?? [])
+    : null;
+  const filteredSections =
+    data?.grouped === true && currentRoomMemberIds != null
+      ? data.sections
+          .map((section) => ({
+            ...section,
+            users: section.users.filter((user) => !currentRoomMemberIds.has(user.userId)),
+          }))
+          .filter((section) => section.users.length > 0)
+      : [];
+  const filteredUsers =
+    data?.grouped === false && currentRoomMemberIds != null
+      ? data.users.filter((user) => !currentRoomMemberIds.has(user.userId))
+      : [];
   const visibleSelectedUserIds = (() => {
-    if (!data) {
+    if (!data || currentRoomMemberIds == null) {
       return [];
     }
 
     if (data.grouped) {
       return Array.from(selectedUserIds).filter((selectedUserId) =>
-        data.sections.some((section) => section.users.some((user) => user.userId === selectedUserId))
+        filteredSections.some((section) => section.users.some((user) => user.userId === selectedUserId))
       );
     }
 
     return Array.from(selectedUserIds).filter((selectedUserId) =>
-      data.users.some((user) => user.userId === selectedUserId)
+      filteredUsers.some((user) => user.userId === selectedUserId)
     );
   })();
+  const isSubmitting = isCreatingRoomGroup || isInvitingChatRoomMembers;
+  const isInviteMembersLoading = isInviteMode && (!isCurrentRoomMembersReady || isChatRoomMembersPending);
 
   const onConfirm = async () => {
-    if (visibleSelectedUserIds.length === 0 || isCreatingRoomGroup) {
+    if (visibleSelectedUserIds.length === 0 || isSubmitting || isInviteMembersLoading) {
       return;
     }
 
     try {
+      if (isInviteMode && numericRoomId != null) {
+        await inviteChatRoomMembers({
+          chatRoomId: numericRoomId,
+          userIds: visibleSelectedUserIds,
+        });
+        navigate(`/chats/${numericRoomId}/info`, { replace: true });
+        return;
+      }
+
       const result = await createRoomGroup(visibleSelectedUserIds);
       navigate(`/chats/${result.chatRoomId}`);
     } catch (error) {
@@ -109,7 +147,8 @@ export default function AddChatRoom() {
         redirectToServerErrorPage();
         return;
       }
-      throw error;
+
+      showApiErrorToast(error, isInviteMode ? '멤버 초대에 실패했습니다.' : '채팅방 생성에 실패했습니다.');
     }
   };
 
@@ -134,6 +173,10 @@ export default function AddChatRoom() {
   };
 
   const toggleUser = (userId: number) => {
+    if (isInviteMembersLoading) {
+      return;
+    }
+
     setSelectedUserIds((prev) => {
       const next = new Set(prev);
       if (next.has(userId)) {
@@ -151,7 +194,7 @@ export default function AddChatRoom() {
     }
 
     if (data.grouped) {
-      return data.sections.map((section) => (
+      return filteredSections.map((section) => (
         <InvitableSectionList
           key={section.clubId}
           {...section}
@@ -161,10 +204,21 @@ export default function AddChatRoom() {
       ));
     }
 
-    return <InvitableUserList users={data.users} onToggle={toggleUser} selectedUserIds={selectedUserIds} />;
+    return <InvitableUserList users={filteredUsers} onToggle={toggleUser} selectedUserIds={selectedUserIds} />;
   })();
   const selectedCount = visibleSelectedUserIds.length;
-  const isConfirmDisabled = selectedCount === 0 || isCreatingRoomGroup;
+  const isInvitableListEmpty =
+    !isInviteMembersLoading && data
+      ? data.grouped
+        ? filteredSections.length === 0
+        : filteredUsers.length === 0
+      : false;
+  const emptyMessage = keyword.trim()
+    ? '검색 결과가 없어요.'
+    : isInviteMode
+      ? '초대할 수 있는 친구가 없어요.'
+      : '선택할 수 있는 친구가 없어요.';
+  const isConfirmDisabled = selectedCount === 0 || isSubmitting || isInviteMembersLoading;
 
   return (
     <div className="flex h-full flex-col items-center px-5 pt-19">
@@ -193,11 +247,19 @@ export default function AddChatRoom() {
           />
         </div>
 
-        {isPending && !hasData ? (
+        {isInviteMembersLoading ? (
+          <RouteLoadingFallback />
+        ) : isPending && !hasData ? (
           <RouteLoadingFallback />
         ) : (
           <>
-            {invitableListContent}
+            {isInvitableListEmpty ? (
+              <div className="text-text-400 flex flex-1 items-center justify-center text-[14px] leading-[1.6]">
+                {emptyMessage}
+              </div>
+            ) : (
+              invitableListContent
+            )}
             {isFetching && hasData && (
               <div className="text-text-400 flex justify-center text-xs leading-[1.6]">불러오는 중...</div>
             )}
diff --git a/src/pages/Chat/ChatRoomInfo.tsx b/src/pages/Chat/ChatRoomInfo.tsx
index 097feec..1ade83b 100644
--- a/src/pages/Chat/ChatRoomInfo.tsx
+++ b/src/pages/Chat/ChatRoomInfo.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
 import { useNavigate, useParams } from 'react-router-dom';
-import type { ClubMember } from '@/apis/club/entity';
+import { chatQueries } from '@/apis/chat/queries';
 import { MemberAvatar } from '@/components/common/MemberAvatar';
 import Modal from '@/components/common/Modal';
 import { useToastContext } from '@/contexts/useToastContext';
@@ -10,15 +11,22 @@ import { useAuthStore } from '@/stores/authStore';
 import { useApiErrorToast } from '@/utils/hooks/error/useApiErrorToast';
 import { cn } from '@/utils/ts/cn';
 
+interface ChatRoomInfoMember {
+  isOwner?: boolean;
+  name: string;
+  studentNumber?: string;
+  userId: number;
+}
+
 interface MemberRowProps {
-  member: ClubMember;
+  member: ChatRoomInfoMember;
   isCurrentUser: boolean;
   isActive: boolean;
   canOpenActions: boolean;
   showKickAction: boolean;
   isCreatingChatRoom: boolean;
   onToggle: (userId: number) => void;
-  onCreateDirectChat: (member: ClubMember) => void;
+  onCreateDirectChat: (member: ChatRoomInfoMember) => void;
   onShowUnsupportedAction: () => void;
 }
 
@@ -50,8 +58,13 @@ function MemberRow({
       >
         <MemberAvatar name={member.name} />
         <div className="min-w-0 flex-1">
-          <div className="truncate text-[15px] leading-[1.6] font-semibold text-indigo-700">
-            {member.name} ({member.studentNumber})
+          <div className="flex items-center gap-1.5">
+            <div className="truncate text-[15px] leading-[1.6] font-semibold text-indigo-700">
+              {member.studentNumber ? `${member.name} (${member.studentNumber})` : member.name}
+            </div>
+            {member.isOwner && (
+              <span className="text-primary-500 shrink-0 text-[12px] leading-[1.6] font-medium">방장</span>
+            )}
           </div>
         </div>
         {isCurrentUser && <span className="text-text-300 text-[12px] leading-[1.6] font-medium">나</span>}
@@ -112,28 +125,61 @@ function ChatRoomInfo() {
   const isGroupChat = isGroupChatType(chatRoom?.chatType);
   const isClubGroupChat = chatType === 'CLUB_GROUP';
   const isGeneralGroupChat = chatType === 'GROUP';
+  const currentUserId =
+    currentUser != null && 'userId' in currentUser && typeof currentUser.userId === 'number'
+      ? currentUser.userId
+      : undefined;
+  const { data: chatRoomMembersData, isPending: isChatRoomMembersPending } = useQuery(
+    chatQueries.members(isGeneralGroupChat ? numericRoomId : undefined)
+  );
+  const generalGroupMembers = chatRoomMembersData?.members ?? [];
   const canLeaveRoom = isDirectChatType(chatType) || isGeneralGroupChat;
-  const currentClubMember = currentUser
-    ? clubMembers.find(
-        (member) => member.name === currentUser.name && member.studentNumber === currentUser.studentNumber
-      )
-    : null;
+  const currentClubMember =
+    clubMembers.find((member) =>
+      currentUserId != null
+        ? member.userId === currentUserId
+        : member.name === currentUser?.name && member.studentNumber === currentUser?.studentNumber
+    ) ?? null;
   const isCurrentClubExecutive = currentClubMember != null && currentClubMember.position !== 'MEMBER';
   const canManageMembers = isClubGroupChat ? isCurrentClubExecutive : false;
+  const canInviteMembers = isGeneralGroupChat;
+  const displayedMembers: ChatRoomInfoMember[] = isGeneralGroupChat
+    ? generalGroupMembers.map((member) => ({
+        userId: member.userId,
+        name: member.name,
+        isOwner: member.isOwner,
+      }))
+    : clubMembers.map((member) => ({
+        userId: member.userId,
+        name: member.name,
+        studentNumber: member.studentNumber,
+      }));
+  const memberCount = displayedMembers.length;
+  const isCurrentDisplayedMember = (member: ChatRoomInfoMember) => {
+    if (currentUserId != null) {
+      return member.userId === currentUserId;
+    }
+
+    return member.name === currentUser?.name && member.studentNumber === currentUser?.studentNumber;
+  };
 
   const handleToggleMemberAction = (userId: number) => {
     setActiveMemberId((previous) => (previous === userId ? null : userId));
   };
 
   const handleAddMember = () => {
-    showToast('인원 추가 기능은 준비 중입니다.', 'info');
+    navigate(`/chats/${numericRoomId}/invite`, {
+      state: {
+        backPath: `/chats/${numericRoomId}/info`,
+      },
+    });
   };
 
   const handleShowUnsupportedAction = () => {
     showToast('멤버 관리 기능은 아직 연결되지 않았습니다.', 'info');
   };
 
-  const handleCreateDirectChat = async (member: ClubMember) => {
+  const handleCreateDirectChat = async (member: ChatRoomInfoMember) => {
     try {
       const response = await createChatRoom(member.userId);
       navigate(`/chats/${response.chatRoomId}`);
@@ -161,10 +207,10 @@ function ChatRoomInfo() {
             <section className="rounded-2xl bg-white px-5 py-4 shadow-[0_0_20px_0_rgba(0,0,0,0.03)]">
               <div className="flex flex-col gap-5">
                 <div className="text-text-700 text-[15px] leading-5">
-                  {isGroupChat ? `친구 (${clubMembers.length})` : '채팅방 정보'}
+                  {isGroupChat ? `친구 (${memberCount})` : '채팅방 정보'}
                 </div>
 
-                {isGroupChat && canManageMembers && (
+                {canInviteMembers && (
                   <button type="button" onClick={handleAddMember} className="flex items-center gap-3 text-left">
                     <div className="bg-text-100 text-text-600 flex size-10 shrink-0 items-center justify-center rounded-[10px] text-[15px] leading-[1.6] font-medium">
                       +
@@ -173,12 +219,12 @@ function ChatRoomInfo() {
                   </button>
                 )}
 
-                {clubMembers.length > 0 ? (
+                {isGeneralGroupChat && isChatRoomMembersPending ? (
+                  <p className="text-text-500 text-[14px] leading-[1.6]">멤버 목록을 불러오는 중...</p>
+                ) : memberCount > 0 ? (
                   <div className="flex flex-col gap-5">
-                    {clubMembers.map((member) => {
-                      const isCurrentUser = currentUser
-                        ? member.name === currentUser.name && member.studentNumber === currentUser.studentNumber
-                        : false;
+                    {displayedMembers.map((member) => {
+                      const isCurrentUser = isCurrentDisplayedMember(member);
                       const canOpenActions = isGroupChat && !isCurrentUser;
                       const showKickAction = canManageMembers;
 
diff --git a/src/pages/Chat/hooks/useChatMutations.ts b/src/pages/Chat/hooks/useChatMutations.ts
index 8419a6a..c59f442 100644
--- a/src/pages/Chat/hooks/useChatMutations.ts
+++ b/src/pages/Chat/hooks/useChatMutations.ts
@@ -24,6 +24,20 @@ export const useCreateChatRoomGroupMutation = () => {
   });
 };
 
+export const useInviteChatRoomMembersMutation = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    ...chatMutations.inviteMembers(),
+    onSuccess: async (_, variables) => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: chatQueryKeys.members(variables.chatRoomId) }),
+        queryClient.invalidateQueries({ queryKey: chatQueryKeys.rooms() }),
+      ]);
+    },
+  });
+};
+
 export const useSendChatMessageMutation = () => {
   const queryClient = useQueryClient();