diff --git a/src/App.tsx b/src/App.tsx
index 2a029ce..e4093e0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -20,6 +20,7 @@ const ChatListPage = lazy(() => import('./pages/Chat'));
 const ChatSearch = lazy(() => import('./pages/Chat/ChatSearch'));
 const ChatAdd = lazy(() => import('./pages/Chat/AddChatRoom'));
 const ChatRoom = lazy(() => import('./pages/Chat/ChatRoom'));
+const ChatRoomInfo = lazy(() => import('./pages/Chat/ChatRoomInfo'));
 const ApplicationPage = lazy(() => import('./pages/Club/Application'));
 const ApplyCompletePage = lazy(() => import('./pages/Club/Application/applyCompletePage'));
 const ClubFeePage = lazy(() => import('./pages/Club/Application/clubFeePage'));
@@ -88,6 +89,8 @@ function App() {
             <Route element={<Layout showBottomNav />}>
               <Route path="home" element={<Home />} />
               <Route path="notifications" element={<NotificationsPage />} />
+              <Route path="chats/search" element={<ChatSearch />} />
+              <Route path="chats/add" element={<ChatAdd />} />
               <Route path="council">
                 <Route index element={<CouncilDetail />} />
                 <Route path="notice/:noticeId" element={<CouncilNotice />} />
@@ -122,9 +125,8 @@ function App() {
               <Route path="mypage/manager/:clubId/recruitment/account" element={<ManagedAccount />} />
               <Route path="mypage/manager/:clubId/members/sheet/preview" element={<ManagedSheetImportPreview />} />
               <Route path="profile" element={<Profile />} />
-              <Route path="chats/search" element={<ChatSearch />} />
-              <Route path="chats/add" element={<ChatAdd />} />
               <Route path="chats/:chatRoomId" element={<ChatRoom />} />
+              <Route path="chats/:chatRoomId/info" element={<ChatRoomInfo />} />
             </Route>
           </Route>
 
diff --git a/src/apis/chat/entity.ts b/src/apis/chat/entity.ts
index 5b5f87e..4ed8bff 100644
--- a/src/apis/chat/entity.ts
+++ b/src/apis/chat/entity.ts
@@ -56,6 +56,8 @@ export interface Messages {
   matchedMessage: string;
   matchedMessageSentAt: string;
   matchedMessageId: number;
+  unreadCount: number;
+  isMuted: boolean;
 }
 
 export interface RoomMatched extends PaginationResponse {
@@ -75,27 +77,40 @@ export interface MatchResponse {
   messageMatches?: MessageMatched;
 }
 
-export interface User {
+export interface InvitableUser {
   userId: number;
   name: string;
   imageUrl: string;
   studentNumber: string;
 }
 
-export interface Section {
+export interface InvitableSection {
   clubId: number;
   clubName: string;
-  users: User[];
+  users: InvitableUser[];
 }
 
-export interface InvitableFriendRequestParams extends PaginationParams {
+export interface InvitableFriendsRequestParams extends PaginationParams {
   query: string;
   sortBy: SortBy;
 }
 
-export interface InvitableFriend extends PaginationResponse {
+interface InvitableFriendsBase extends PaginationResponse {
   sortBy: SortBy;
-  grouped: boolean;
-  users?: User[];
-  sections?: Section[];
 }
+
+export interface GroupedInvitableFriendsResponse extends InvitableFriendsBase {
+  sortBy: 'CLUB';
+  grouped: true;
+  users: [];
+  sections: InvitableSection[];
+}
+
+export interface FlatInvitableFriendsResponse extends InvitableFriendsBase {
+  sortBy: 'NAME';
+  grouped: false;
+  users: InvitableUser[];
+  sections: [];
+}
+
+export type InvitableFriendsResponse = GroupedInvitableFriendsResponse | FlatInvitableFriendsResponse;
diff --git a/src/apis/chat/index.ts b/src/apis/chat/index.ts
index 5eae7fe..bbe1090 100644
--- a/src/apis/chat/index.ts
+++ b/src/apis/chat/index.ts
@@ -6,10 +6,10 @@ import type {
   ChatRoomsResponse,
   CreateChatRoomResponse,
   SendChatMessageRequest,
+  InvitableFriendsRequestParams,
+  InvitableFriendsResponse,
   MatchResponse,
   MatchedRequestParams,
-  InvitableFriendRequestParams,
-  InvitableFriend,
 } from './entity';
 
 export const getChatRooms = async () => {
@@ -85,8 +85,8 @@ export const getSearchChat = async ({ ...query }: MatchedRequestParams) => {
   return response;
 };
 
-export const getInvitableFriends = async ({ ...query }: InvitableFriendRequestParams) => {
-  const response = await apiClient.get<InvitableFriend>('chats/rooms/invitables', {
+export const getInvitableFriends = async ({ ...query }: InvitableFriendsRequestParams) => {
+  const response = await apiClient.get<InvitableFriendsResponse>('chats/rooms/invitables', {
     params: query,
     requiresAuth: true,
   });
diff --git a/src/apis/chat/queries.ts b/src/apis/chat/queries.ts
index ecd86e6..9283903 100644
--- a/src/apis/chat/queries.ts
+++ b/src/apis/chat/queries.ts
@@ -2,10 +2,17 @@ import { infiniteQueryOptions, queryOptions } from '@tanstack/react-query';
 import { getChatMessages, getChatRooms, getSearchChat, getInvitableFriends } from '@/apis/chat';
 import type { ChatMessagesResponse, SortBy } from '@/apis/chat/entity';
 
+interface ChatMessagesPageParam {
+  page: number;
+  useMessageId: boolean;
+}
+
 export const chatQueryKeys = {
   all: ['chat'] as const,
   rooms: () => [...chatQueryKeys.all, 'rooms'] as const,
-  messages: (chatRoomId: number) => [...chatQueryKeys.all, 'messages', chatRoomId] as const,
+  messagesByRoom: (chatRoomId: number) => [...chatQueryKeys.all, 'messages', chatRoomId] as const,
+  messages: (chatRoomId: number, messageId?: number) =>
+    [...chatQueryKeys.messagesByRoom(chatRoomId), messageId ?? 'latest'] as const,
   disabledMessages: () => [...chatQueryKeys.all, 'messages', 'disabled'] as const,
   search: (keyword: string) => [...chatQueryKeys.all, 'search', keyword],
   invite: (query: string, sortBy: SortBy) => [...chatQueryKeys.all, 'invite', query, sortBy],
@@ -19,17 +26,23 @@ export const chatQueries = {
     }),
   messages: (chatRoomId?: number, messageId?: number, limit = 20) =>
     infiniteQueryOptions({
-      queryKey: chatRoomId ? chatQueryKeys.messages(chatRoomId) : chatQueryKeys.disabledMessages(),
+      queryKey: chatRoomId ? chatQueryKeys.messages(chatRoomId, messageId) : chatQueryKeys.disabledMessages(),
       queryFn: ({ pageParam }) =>
         getChatMessages({
           chatRoomId: chatRoomId!,
-          messageId: messageId,
-          page: pageParam,
+          messageId: pageParam.useMessageId ? messageId : undefined,
+          page: pageParam.page,
           limit,
         }),
-      initialPageParam: 1,
+      initialPageParam: { page: 1, useMessageId: Boolean(messageId) } satisfies ChatMessagesPageParam,
       getNextPageParam: (lastPage: ChatMessagesResponse) =>
-        lastPage.currentPage < lastPage.totalPage ? lastPage.currentPage + 1 : undefined,
+        lastPage.currentPage < lastPage.totalPage
+          ? ({ page: lastPage.currentPage + 1, useMessageId: false } satisfies ChatMessagesPageParam)
+          : undefined,
+      getPreviousPageParam: (firstPage: ChatMessagesResponse) =>
+        firstPage.currentPage > 1
+          ? ({ page: firstPage.currentPage - 1, useMessageId: false } satisfies ChatMessagesPageParam)
+          : undefined,
       enabled: Boolean(chatRoomId),
     }),
   search: (keyword: string) =>
diff --git a/src/components/common/Dropdown.tsx b/src/components/common/Dropdown.tsx
index 138d502..fac291e 100644
--- a/src/components/common/Dropdown.tsx
+++ b/src/components/common/Dropdown.tsx
@@ -31,10 +31,6 @@ export default function Dropdown<T extends string>({
   useClickTouchOutside(dropdownRef, () => setIsOpen(false));
 
   const selectedOption = options.find((opt) => opt.value === value);
-  const orderedOptions = [
-    ...options.filter((option) => option.value !== value),
-    ...options.filter((option) => option.value === value),
-  ];
 
   const handleSelect = (optionValue: T) => {
     onChange(optionValue);
@@ -47,7 +43,7 @@ export default function Dropdown<T extends string>({
         type="button"
         onClick={() => setIsOpen(!isOpen)}
         className={cn(
-          'inline-flex h-7.25 items-center justify-evenly overflow-hidden rounded-full bg-[#69BFDF] px-2.5 text-[13px] leading-[1.6] font-medium text-white transition-opacity active:opacity-90',
+          'bg-primary-500 inline-flex h-7.25 items-center justify-evenly overflow-hidden rounded-full px-2.5 text-[13px] leading-[1.6] font-medium text-white transition-opacity active:opacity-90',
           isOpen && 'opacity-95',
           triggerClassName
         )}
@@ -67,7 +63,7 @@ export default function Dropdown<T extends string>({
         )}
       >
         <div className="flex min-w-14 flex-col gap-1">
-          {orderedOptions.map((option) => (
+          {options.map((option) => (
             <button
               key={option.value}
               type="button"
diff --git a/src/components/common/MemberAvatar.tsx b/src/components/common/MemberAvatar.tsx
new file mode 100644
index 0000000..bb46529
--- /dev/null
+++ b/src/components/common/MemberAvatar.tsx
@@ -0,0 +1,10 @@
+export function MemberAvatar({ name }: { name: string }) {
+  return (
+    <div
+      className="bg-indigo-25 text-text-600 flex size-10 shrink-0 items-center justify-center rounded-[10px] text-[15px] leading-6 font-medium"
+      aria-hidden="true"
+    >
+      {name.charAt(0)}
+    </div>
+  );
+}
diff --git a/src/components/layout/Header/components/ChatAddHeader.tsx b/src/components/layout/Header/components/ChatAddHeader.tsx
index 8f7db2b..8c7caf5 100644
--- a/src/components/layout/Header/components/ChatAddHeader.tsx
+++ b/src/components/layout/Header/components/ChatAddHeader.tsx
@@ -1,21 +1,27 @@
 import BackTitleHeader from '@/components/layout/Header/components/BackTitleHeader';
 
 interface ChatListHeaderProps {
+  disabled?: boolean;
   title: string;
   onConfirm: () => void;
 }
 
-export default function ChatAddHeader({ title, onConfirm }: ChatListHeaderProps) {
-  const confirm = (
-    <button type="button" onClick={onConfirm}>
-      <span className="text-primary-500">확인</span>
+export default function ChatAddHeader({ disabled = false, title, onConfirm }: ChatListHeaderProps) {
+  const confirmButton = (
+    <button
+      type="button"
+      onClick={onConfirm}
+      disabled={disabled}
+      className="text-primary-500 disabled:text-primary-300"
+    >
+      확인
     </button>
   );
 
   return (
     <BackTitleHeader
       title={title}
-      rightSlot={confirm}
+      rightSlot={confirmButton}
       headerClassName="h-13 rounded-b-3xl px-4 py-3 shadow-[0_0_20px_0_rgba(0,0,0,0.03)]"
       rightSlotContainerClassName="flex items-center gap-2"
     />
diff --git a/src/components/layout/Header/components/ChatHeader.tsx b/src/components/layout/Header/components/ChatHeader.tsx
index 41dd624..147de4f 100644
--- a/src/components/layout/Header/components/ChatHeader.tsx
+++ b/src/components/layout/Header/components/ChatHeader.tsx
@@ -1,97 +1,83 @@
 import type { Ref } from 'react';
-import { useParams } from 'react-router-dom';
+import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
 import ChevronLeftIcon from '@/assets/svg/chevron-left.svg';
 import HamburgerIcon from '@/assets/svg/hamburger.svg';
+import ToggleSwitch from '@/components/common/ToggleSwitch';
 import useChat from '@/pages/Chat/hooks/useChat';
 import { isGroupChatType } from '@/pages/Chat/utils/chatType';
-import useBooleanState from '@/utils/hooks/useBooleanState';
+import { useApiErrorToast } from '@/utils/hooks/error/useApiErrorToast';
 import { useSmartBack } from '@/utils/hooks/useSmartBack';
 import { cn } from '@/utils/ts/cn';
 
 function ChatHeader({ headerRef }: { headerRef?: Ref<HTMLElement> }) {
   const smartBack = useSmartBack();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { pathname, state } = location;
   const { chatRoomId } = useParams();
   const numericRoomId = Number(chatRoomId);
+  const isInfoPage = pathname.endsWith('/info');
 
+  const showApiErrorToast = useApiErrorToast();
   const { chatRoomList, clubMembers, toggleMute, isTogglingMute } = useChat(numericRoomId);
 
-  const { value: open, setTrue: openSidebar, setFalse: closeSidebar } = useBooleanState();
-
   const chatRoom = chatRoomList.rooms.find((room) => room.roomId === numericRoomId);
   const isGroup = isGroupChatType(chatRoom?.chatType);
   const isMuted = chatRoom?.isMuted ?? false;
 
-  return (
-    <>
-      <header ref={headerRef} className="fixed top-0 right-0 left-0 z-30 flex h-13 items-center bg-white px-4 py-2">
-        <div className="flex min-w-0 flex-1 items-center gap-3">
-          <button type="button" aria-label="뒤로가기" onClick={smartBack} className="shrink-0">
-            <ChevronLeftIcon />
-          </button>
+  const handleBack = () => {
+    if (isInfoPage && chatRoomId) {
+      navigate(`/chats/${chatRoomId}`, { state });
+      return;
+    }
 
-          <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>}
-          </div>
-        </div>
-
-        <button type="button" aria-label="채팅방 정보 열기" onClick={openSidebar} className="shrink-0">
-          <HamburgerIcon />
-        </button>
-      </header>
+    smartBack();
+  };
 
-      <div
-        className={cn('fixed inset-0 z-50 transition-colors duration-300', {
-          'pointer-events-auto bg-black/30': open,
-          'pointer-events-none bg-black/0': !open,
-        })}
-        onClick={closeSidebar}
-      >
-        <div
-          className={cn(
-            'absolute top-0 right-0 flex h-full w-72 transform flex-col overflow-hidden bg-white p-4 transition-transform duration-300 ease-in-out',
-            open ? 'translate-x-0' : 'translate-x-full'
-          )}
-          onClick={(e) => e.stopPropagation()}
-        >
-          <div className="mb-6 flex shrink-0 items-center justify-between border-b pb-4">
-            <span className="text-sm font-medium">알림</span>
+  const handleToggleMute = async () => {
+    try {
+      await toggleMute(numericRoomId);
+    } catch (error) {
+      showApiErrorToast(error, '알림 설정 변경에 실패했습니다.');
+    }
+  };
 
-            <button
-              type="button"
-              disabled={isTogglingMute}
-              onClick={() => void toggleMute(numericRoomId)}
-              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
-                isMuted ? 'bg-gray-300' : 'bg-primary'
-              } disabled:cursor-not-allowed disabled:opacity-60`}
-            >
-              <span
-                className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
-                  isMuted ? 'translate-x-1' : 'translate-x-6'
-                }`}
-              />
-            </button>
-          </div>
+  return (
+    <header
+      ref={headerRef}
+      className={cn('fixed top-0 right-0 left-0 z-30 flex items-center bg-white', {
+        'h-13 px-4 py-2': !isInfoPage,
+        'h-15.75 rounded-b-3xl px-4 py-3 shadow-[0_0_20px_0_rgba(0,0,0,0.03)]': isInfoPage,
+      })}
+    >
+      <div className="flex min-w-0 flex-1 items-center gap-3">
+        <button type="button" aria-label="뒤로가기" onClick={handleBack} className="shrink-0">
+          <ChevronLeftIcon />
+        </button>
 
-          {isGroup && (
-            <>
-              <div className="mb-4 shrink-0 text-sm font-bold">참여자 {clubMembers.length}명</div>
-              <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto">
-                {clubMembers.map((member) => (
-                  <div key={member.userId} className="flex items-center gap-3">
-                    <img src={member.imageUrl} className="h-8 w-8 rounded-full" />
-                    <div className="flex flex-col">
-                      <span className="text-sm font-medium">{member.name}</span>
-                      <span className="text-xs text-gray-400">{member.studentNumber}</span>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </>
-          )}
+        <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>}
         </div>
       </div>
-    </>
+
+      {isInfoPage ? (
+        <ToggleSwitch
+          label={isMuted ? '알림 켜기' : '알림 끄기'}
+          enabled={!isMuted}
+          onChange={() => void handleToggleMute()}
+          disabled={isTogglingMute}
+          ariaLabel="채팅방 알림 설정"
+          layout="horizontal"
+          variant="manager"
+          className="shrink-0"
+        />
+      ) : (
+        <Link to={`/chats/${chatRoomId}/info`} state={state} className="shrink-0" aria-label="채팅방 정보 열기">
+          <HamburgerIcon />
+        </Link>
+      )}
+    </header>
   );
 }
 
diff --git a/src/components/layout/Header/components/ChatSearchHeader.tsx b/src/components/layout/Header/components/ChatSearchHeader.tsx
deleted file mode 100644
index d433552..0000000
--- a/src/components/layout/Header/components/ChatSearchHeader.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { Ref } from 'react';
-import BackTitleHeader from '@/components/layout/Header/components/BackTitleHeader';
-
-interface ChatListHeaderProps {
-  title: string;
-  headerRef?: Ref<HTMLElement>;
-}
-
-export default function ChatSearchHeader({ title, headerRef }: ChatListHeaderProps) {
-  return (
-    <BackTitleHeader
-      title={title}
-      headerRef={headerRef}
-      headerClassName="h-13 rounded-b-3xl px-4 py-3 shadow-[0_0_20px_0_rgba(0,0,0,0.03)]"
-      rightSlotContainerClassName="flex items-center gap-2"
-    />
-  );
-}
diff --git a/src/components/layout/Header/headerConfig.ts b/src/components/layout/Header/headerConfig.ts
index f3bdb35..25d3dcb 100644
--- a/src/components/layout/Header/headerConfig.ts
+++ b/src/components/layout/Header/headerConfig.ts
@@ -36,7 +36,7 @@ export const HEADER_CONFIGS: HeaderConfig[] = [
   },
   {
     type: 'chat',
-    match: (pathname) => /^\/chats\/\d+$/.test(pathname),
+    match: (pathname) => /^\/chats\/\d+(?:\/info)?$/.test(pathname),
   },
   {
     type: 'normal',
diff --git a/src/pages/Chat/AddChatRoom.tsx b/src/pages/Chat/AddChatRoom.tsx
index 3826ffa..58ddf91 100644
--- a/src/pages/Chat/AddChatRoom.tsx
+++ b/src/pages/Chat/AddChatRoom.tsx
@@ -1,56 +1,60 @@
-import { Fragment, useState } from 'react';
-import { useSuspenseQuery } from '@tanstack/react-query';
+import { startTransition, useState } from 'react';
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
 import { useLocation, useNavigate } from 'react-router-dom';
-import type { User, Section, SortBy } from '@/apis/chat/entity';
+import type { InvitableSection, InvitableUser, SortBy } from '@/apis/chat/entity';
 import { chatQueries } from '@/apis/chat/queries';
-import Search from '@/assets/svg/big-search-icon.svg';
-import Check from '@/assets/svg/check_color.svg';
+import SearchIcon from '@/assets/svg/big-search-icon.svg';
+import CheckIcon from '@/assets/svg/check_color.svg';
 import Dropdown from '@/components/common/Dropdown';
+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 useChat from '@/pages/Chat/hooks/useChat';
+import { useCreateChatRoomGroupMutation } from '@/pages/Chat/hooks/useChatMutations';
 import useDebouncedCallback from '@/utils/hooks/useDebounce';
 import { isApiError } from '@/utils/ts/error/apiError';
 import { isServerErrorStatus, redirectToServerErrorPage } from '@/utils/ts/error/errorRedirect';
 
-type UserListProps = {
+interface UserListProps {
   onToggle: (userId: number) => void;
   selectedUserIds: Set<number>;
-};
+}
+
+interface InvitableUserItemProps extends UserListProps, Pick<InvitableUser, 'name' | 'studentNumber' | 'userId'> {}
+
+function InvitableUserItem({ userId, name, studentNumber, onToggle, selectedUserIds }: InvitableUserItemProps) {
+  const isSelected = selectedUserIds.has(userId);
 
-function InvitableSectionList({ clubName, users, onToggle, selectedUserIds }: Section & UserListProps) {
   return (
-    <div className="px-5 py-5">
-      <span className="text-text-700 text-[14px]">{clubName}</span>
-      {users.map((user) => (
-        <Fragment key={user.userId}>
-          <div className="flex py-4 pr-3" onClick={() => onToggle(user.userId)}>
-            <div className="text-text-600 bg-text-100 flex size-10 shrink-0 items-center justify-center rounded-xl text-[15px]">
-              {user.name[0]}
-            </div>
-            <span className="flex w-full items-center px-3 text-indigo-700">
-              {user.name} ({user.studentNumber})
-            </span>
-            {selectedUserIds.has(user.userId) && <Check className="size-6.5 pt-2" />}
-          </div>
-        </Fragment>
-      ))}
-    </div>
+    <button type="button" className="flex items-center gap-3 text-left" onClick={() => onToggle(userId)}>
+      <MemberAvatar name={name} />
+      <span className="flex w-full items-center text-[15px] leading-[1.6] font-semibold text-indigo-700">
+        {name} ({studentNumber})
+      </span>
+      {isSelected && <CheckIcon className="size-6.5" />}
+    </button>
   );
 }
 
-function InvitableUserList({ userId, name, studentNumber, onToggle, selectedUserIds }: User & UserListProps) {
+function InvitableSectionList({ clubName, users, onToggle, selectedUserIds }: InvitableSection & UserListProps) {
   return (
-    <div className="px-5" onClick={() => onToggle(userId)}>
-      <div className="flex py-4">
-        <div className="text-text-600 bg-text-100 flex size-10 shrink-0 items-center justify-center rounded-xl text-[15px]">
-          {name[0]}
-        </div>
-        <span className="flex w-full items-center px-3 text-indigo-700">
-          {name} ({studentNumber})
-        </span>
-        {selectedUserIds.has(userId) && <Check className="size-6.5 pt-2" />}
+    <section className="flex flex-col gap-3">
+      <p className="text-text-700 text-[14px] leading-5">{clubName}</p>
+      <div className="flex flex-col gap-5">
+        {users.map((user) => (
+          <InvitableUserItem key={user.userId} {...user} onToggle={onToggle} selectedUserIds={selectedUserIds} />
+        ))}
       </div>
+    </section>
+  );
+}
+
+function InvitableUserList({ users, onToggle, selectedUserIds }: { users: InvitableUser[] } & UserListProps) {
+  return (
+    <div className="flex flex-col gap-5">
+      {users.map((user) => (
+        <InvitableUserItem key={user.userId} {...user} onToggle={onToggle} selectedUserIds={selectedUserIds} />
+      ))}
     </div>
   );
 }
@@ -61,22 +65,44 @@ const SORT_OPTIONS = [
 ] as const;
 
 export default function AddChatRoom() {
+  const navigate = useNavigate();
   const { pathname } = useLocation();
   const { title } = getHeaderPresentation(pathname);
+  const { mutateAsync: createRoomGroup, isPending: isCreatingRoomGroup } = useCreateChatRoomGroupMutation();
+
   const [keyword, setKeyword] = useState('');
   const [debouncedQuery, setDebouncedQuery] = useState('');
   const [sortBy, setSortBy] = useState<SortBy>('CLUB');
   const [selectedUserIds, setSelectedUserIds] = useState<Set<number>>(new Set());
 
-  const navigate = useNavigate();
-  const { createRoomGroup } = useChat();
-  const { data } = useSuspenseQuery({
+  const { data, isFetching, isPending } = useQuery({
     ...chatQueries.invite(debouncedQuery, sortBy),
+    placeholderData: keepPreviousData,
   });
+  const hasData = Boolean(data);
+  const visibleSelectedUserIds = (() => {
+    if (!data) {
+      return [];
+    }
+
+    if (data.grouped) {
+      return Array.from(selectedUserIds).filter((selectedUserId) =>
+        data.sections.some((section) => section.users.some((user) => user.userId === selectedUserId))
+      );
+    }
+
+    return Array.from(selectedUserIds).filter((selectedUserId) =>
+      data.users.some((user) => user.userId === selectedUserId)
+    );
+  })();
 
   const onConfirm = async () => {
+    if (visibleSelectedUserIds.length === 0 || isCreatingRoomGroup) {
+      return;
+    }
+
     try {
-      const result = await createRoomGroup(Array.from(selectedUserIds));
+      const result = await createRoomGroup(visibleSelectedUserIds);
       navigate(`/chats/${result.chatRoomId}`);
     } catch (error) {
       if (isApiError(error) && isServerErrorStatus(error.status)) {
@@ -89,12 +115,24 @@ export default function AddChatRoom() {
 
   const updateDebouncedQuery = useDebouncedCallback((value: string) => {
     const trimmed = value.trim();
-    setDebouncedQuery(trimmed);
+    startTransition(() => {
+      setSelectedUserIds(new Set());
+      setDebouncedQuery(trimmed);
+    });
   }, 300);
+
   const handleChange = (value: string) => {
     setKeyword(value);
     updateDebouncedQuery(value);
   };
+
+  const handleSortChange = (value: SortBy) => {
+    startTransition(() => {
+      setSelectedUserIds(new Set());
+      setSortBy(value);
+    });
+  };
+
   const toggleUser = (userId: number) => {
     setSelectedUserIds((prev) => {
       const next = new Set(prev);
@@ -107,42 +145,64 @@ export default function AddChatRoom() {
     });
   };
 
+  const invitableListContent = (() => {
+    if (!data) {
+      return null;
+    }
+
+    if (data.grouped) {
+      return data.sections.map((section) => (
+        <InvitableSectionList
+          key={section.clubId}
+          {...section}
+          onToggle={toggleUser}
+          selectedUserIds={selectedUserIds}
+        />
+      ));
+    }
+
+    return <InvitableUserList users={data.users} onToggle={toggleUser} selectedUserIds={selectedUserIds} />;
+  })();
+  const selectedCount = visibleSelectedUserIds.length;
+  const isConfirmDisabled = selectedCount === 0 || isCreatingRoomGroup;
+
   return (
-    <div className="flex h-full flex-col items-center pt-19">
-      <ChatAddHeader title={title} onConfirm={onConfirm} />
-      <label className="flex h-13 w-87.5 items-center overflow-hidden rounded-full bg-white px-3">
+    <div className="flex h-full flex-col items-center px-5 pt-19">
+      <ChatAddHeader title={title} onConfirm={onConfirm} disabled={isConfirmDisabled} />
+
+      <div className="flex w-full shrink-0 items-center overflow-hidden rounded-full bg-white px-5 py-2.5">
         <input
           type="text"
           value={keyword}
           onChange={(e) => handleChange(e.target.value)}
-          className="h-full flex-1 bg-white px-3"
+          className="flex-1 text-[15px] leading-[1.6] text-indigo-300"
           placeholder="이름, 학번 검색"
         />
-        <Search />
-      </label>
-      <div className="mt-6 h-full w-87.5 overflow-y-auto rounded-t-2xl bg-white py-4">
-        <div className="flex w-full px-5">
-          <span className="text-#344352 flex-1 translate-y-2 text-[15px]">친구 선택({data?.currentCount})</span>
+        <SearchIcon />
+      </div>
+
+      <div className="scrollbar-hidden mt-6 flex min-h-0 w-full flex-1 flex-col gap-5 overflow-y-auto rounded-t-2xl bg-white px-5 py-4">
+        <div className="flex w-full items-center justify-between">
+          <span className="text-text-700 text-[15px] leading-5">친구 선택 ({selectedCount})</span>
           <Dropdown
-            className="h-7.25 w-19 text-[13px] font-medium"
+            className="w-19"
             triggerClassName="w-full"
             options={SORT_OPTIONS}
             value={sortBy}
-            onChange={(value) => setSortBy(value)}
+            onChange={handleSortChange}
           />
         </div>
-        {data?.sortBy === 'CLUB'
-          ? data?.sections?.map((section) => (
-              <InvitableSectionList
-                key={section.clubId}
-                {...section}
-                onToggle={toggleUser}
-                selectedUserIds={selectedUserIds}
-              />
-            ))
-          : data?.users?.map((user) => (
-              <InvitableUserList key={user.userId} {...user} onToggle={toggleUser} selectedUserIds={selectedUserIds} />
-            ))}
+
+        {isPending && !hasData ? (
+          <RouteLoadingFallback />
+        ) : (
+          <>
+            {invitableListContent}
+            {isFetching && hasData && (
+              <div className="text-text-400 flex justify-center text-xs leading-[1.6]">불러오는 중...</div>
+            )}
+          </>
+        )}
       </div>
     </div>
   );
diff --git a/src/pages/Chat/ChatRoom.tsx b/src/pages/Chat/ChatRoom.tsx
index b98f78a..ad03e41 100644
--- a/src/pages/Chat/ChatRoom.tsx
+++ b/src/pages/Chat/ChatRoom.tsx
@@ -85,21 +85,32 @@ function ChatRoom() {
   const [searchParams] = useSearchParams();
   const targetMessageId = searchParams.get('messageId') ? Number(searchParams.get('messageId')) : undefined;
 
-  const { sendMessage, chatMessages, fetchNextPage, hasNextPage, isFetchingNextPage, isSendingMessage } = useChat(
-    Number(chatRoomId),
-    targetMessageId
-  );
+  const {
+    sendMessage,
+    chatMessages,
+    fetchNextPage,
+    fetchPreviousPage,
+    hasNextPage,
+    hasPreviousPage,
+    isFetchingNextPage,
+    isFetchingPreviousPage,
+    isSendingMessage,
+  } = useChat(Number(chatRoomId), targetMessageId);
   const [value, setValue] = useState('');
 
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const baseTextareaHeightRef = useRef(0);
-  const { scrollContainerRef, topRef, scrollToBottom } = useChatRoomScroll({
+  const { bottomRef, scrollContainerRef, topRef, scrollToBottom } = useChatRoomScroll({
     chatRoomId,
     chatMessagesLength: chatMessages.length,
     latestMessageId: chatMessages[0]?.messageId,
+    targetMessageId,
     fetchNextPage,
+    fetchPreviousPage,
     hasNextPage,
+    hasPreviousPage,
     isFetchingNextPage,
+    isFetchingPreviousPage,
   });
 
   useViewportHeightLock(scrollContainerRef);
@@ -192,6 +203,8 @@ function ChatRoom() {
             </div>
           );
         })}
+
+        <div ref={bottomRef} />
       </div>
 
       <form
diff --git a/src/pages/Chat/ChatRoomInfo.tsx b/src/pages/Chat/ChatRoomInfo.tsx
new file mode 100644
index 0000000..5563f81
--- /dev/null
+++ b/src/pages/Chat/ChatRoomInfo.tsx
@@ -0,0 +1,254 @@
+import { useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import type { ClubMember } from '@/apis/club/entity';
+import { MemberAvatar } from '@/components/common/MemberAvatar';
+import Modal from '@/components/common/Modal';
+import { useToastContext } from '@/contexts/useToastContext';
+import useChat from '@/pages/Chat/hooks/useChat';
+import { isDirectChatType, isGroupChatType } from '@/pages/Chat/utils/chatType';
+import { useAuthStore } from '@/stores/authStore';
+import { useApiErrorToast } from '@/utils/hooks/error/useApiErrorToast';
+import { cn } from '@/utils/ts/cn';
+
+interface MemberRowProps {
+  member: ClubMember;
+  isCurrentUser: boolean;
+  isActive: boolean;
+  canOpenActions: boolean;
+  showKickAction: boolean;
+  isCreatingChatRoom: boolean;
+  onToggle: (userId: number) => void;
+  onCreateDirectChat: (member: ClubMember) => void;
+  onShowUnsupportedAction: () => void;
+}
+
+function MemberRow({
+  member,
+  isCurrentUser,
+  isActive,
+  canOpenActions,
+  showKickAction,
+  isCreatingChatRoom,
+  onToggle,
+  onCreateDirectChat,
+  onShowUnsupportedAction,
+}: MemberRowProps) {
+  const actionWidthClassName = showKickAction ? 'w-34.25' : 'w-18.75';
+
+  return (
+    <div className="flex min-h-11.75 items-center">
+      <button
+        type="button"
+        onClick={() => onToggle(member.userId)}
+        disabled={!canOpenActions}
+        className={cn(
+          'flex min-h-11.75 min-w-0 flex-1 items-center gap-3 text-left transition-transform duration-200 ease-out disabled:cursor-default',
+          {
+            '-translate-x-3.75': isActive && canOpenActions,
+          }
+        )}
+      >
+        <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>
+        </div>
+        {isCurrentUser && <span className="text-text-300 text-[12px] leading-[1.6] font-medium">나</span>}
+      </button>
+
+      {!isCurrentUser && (
+        <div
+          aria-hidden={!isActive}
+          className={cn(
+            'flex h-11.75 shrink-0 items-center overflow-hidden transition-[width,margin,opacity] duration-200 ease-out',
+            actionWidthClassName,
+            isActive && canOpenActions
+              ? 'pointer-events-auto ml-4 opacity-100'
+              : 'pointer-events-none ml-0 w-0 opacity-0'
+          )}
+        >
+          {showKickAction && (
+            <button
+              type="button"
+              onClick={onShowUnsupportedAction}
+              tabIndex={isActive && canOpenActions ? 0 : -1}
+              disabled={!isActive || !canOpenActions}
+              className="flex h-full w-15.5 items-center justify-center bg-[#ff4e4e] px-1.75 text-center text-[12px] leading-[1.6] font-medium whitespace-nowrap text-white"
+            >
+              내보내기
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={() => onCreateDirectChat(member)}
+            tabIndex={isActive && canOpenActions ? 0 : -1}
+            disabled={!isActive || !canOpenActions || isCreatingChatRoom}
+            className="bg-text-300 flex h-full w-18.75 items-center justify-center px-1.75 text-center text-[12px] leading-[1.6] font-medium whitespace-nowrap text-white disabled:opacity-60"
+          >
+            1:1 채팅하기
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ChatRoomInfo() {
+  const navigate = useNavigate();
+  const { chatRoomId } = useParams();
+  const numericRoomId = Number(chatRoomId);
+
+  const currentUser = useAuthStore((state) => state.user);
+  const { showToast } = useToastContext();
+  const showApiErrorToast = useApiErrorToast();
+  const { chatRoomList, clubMembers, createChatRoom, isCreatingChatRoom, deleteChatRoom, isDeletingChatRoom } =
+    useChat(numericRoomId);
+  const [activeMemberId, setActiveMemberId] = useState<number | null>(null);
+  const [isLeaveModalOpen, setIsLeaveModalOpen] = useState(false);
+
+  const chatRoom = chatRoomList.rooms.find((room) => room.roomId === numericRoomId);
+  const chatType = chatRoom?.chatType;
+  const isGroupChat = isGroupChatType(chatRoom?.chatType);
+  const isClubGroupChat = chatType === 'CLUB_GROUP';
+  const isGeneralGroupChat = chatType === 'GROUP';
+  const canLeaveRoom = isDirectChatType(chatType) || isGeneralGroupChat;
+  const currentClubMember = currentUser
+    ? clubMembers.find(
+        (member) => member.name === currentUser.name && member.studentNumber === currentUser.studentNumber
+      )
+    : null;
+  const isCurrentClubExecutive = Boolean(currentClubMember && currentClubMember.position !== 'MEMBER');
+  const canManageMembers = isClubGroupChat ? isCurrentClubExecutive : false;
+
+  const handleToggleMemberAction = (userId: number) => {
+    setActiveMemberId((previous) => (previous === userId ? null : userId));
+  };
+
+  const handleAddMember = () => {
+    showToast('인원 추가 기능은 준비 중입니다.', 'info');
+  };
+
+  const handleShowUnsupportedAction = () => {
+    showToast('멤버 관리 기능은 아직 연결되지 않았습니다.', 'info');
+  };
+
+  const handleCreateDirectChat = async (member: ClubMember) => {
+    try {
+      const response = await createChatRoom(member.userId);
+      navigate(`/chats/${response.chatRoomId}`);
+    } catch (error) {
+      showApiErrorToast(error, '1:1 채팅방 생성에 실패했습니다.');
+    }
+  };
+
+  const handleLeaveRoom = async () => {
+    try {
+      await deleteChatRoom(numericRoomId);
+      navigate('/chats', { replace: true });
+    } catch (error) {
+      showApiErrorToast(error, '채팅방 나가기에 실패했습니다.');
+    } finally {
+      setIsLeaveModalOpen(false);
+    }
+  };
+
+  return (
+    <>
+      <div className="bg-background flex min-h-0 flex-1 flex-col overflow-hidden">
+        <div className="min-h-0 flex-1 overflow-y-auto px-4 pt-4 pb-[calc(24px+var(--effective-bottom-safe-area))]">
+          <div className="flex flex-col gap-4">
+            <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})` : '채팅방 정보'}
+                </div>
+
+                {isGroupChat && canManageMembers && (
+                  <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">
+                      +
+                    </div>
+                    <span className="text-primary-500 text-[15px] leading-[1.6] font-semibold">인원 추가하기</span>
+                  </button>
+                )}
+
+                {clubMembers.length > 0 ? (
+                  <div className="flex flex-col gap-5">
+                    {clubMembers.map((member) => {
+                      const isCurrentUser = currentUser
+                        ? member.name === currentUser.name && member.studentNumber === currentUser.studentNumber
+                        : false;
+                      const canOpenActions = isGroupChat && !isCurrentUser;
+                      const showKickAction = canManageMembers;
+
+                      return (
+                        <MemberRow
+                          key={member.userId}
+                          member={member}
+                          isCurrentUser={isCurrentUser}
+                          isActive={activeMemberId === member.userId}
+                          canOpenActions={canOpenActions}
+                          showKickAction={showKickAction}
+                          isCreatingChatRoom={isCreatingChatRoom}
+                          onToggle={handleToggleMemberAction}
+                          onCreateDirectChat={handleCreateDirectChat}
+                          onShowUnsupportedAction={handleShowUnsupportedAction}
+                        />
+                      );
+                    })}
+                  </div>
+                ) : (
+                  <p className="text-text-500 text-[14px] leading-[1.6]">
+                    {isGroupChat ? '표시할 친구가 아직 없어요.' : '이 채팅방은 참여자 목록을 지원하지 않아요.'}
+                  </p>
+                )}
+              </div>
+            </section>
+
+            {canLeaveRoom && (
+              <button
+                type="button"
+                onClick={() => setIsLeaveModalOpen(true)}
+                disabled={isDeletingChatRoom}
+                className="rounded-2xl bg-white px-5 py-4 text-[16px] leading-[1.6] font-medium text-[#ff4e4e] shadow-[0_0_20px_0_rgba(0,0,0,0.03)] disabled:opacity-60"
+              >
+                채팅방 나가기
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <Modal
+        isOpen={isLeaveModalOpen && canLeaveRoom}
+        onClose={() => setIsLeaveModalOpen(false)}
+        className="rounded-2xl px-4 py-5"
+      >
+        <div className="text-text-700 flex flex-col gap-5 text-center text-[15px] leading-[1.6]">
+          <p className="font-semibold">채팅방 나가기</p>
+          <p className="font-medium">{chatRoom?.roomName ?? ''} 채팅방을 나가시겠어요?</p>
+          <div className="flex gap-2 text-[15px] leading-5.5 font-bold">
+            <button
+              type="button"
+              className="border-primary-500 text-primary-500 flex-1 rounded-[10px] border py-2.75"
+              onClick={() => setIsLeaveModalOpen(false)}
+            >
+              취소
+            </button>
+            <button
+              type="button"
+              className="bg-primary-500 border-primary-500 flex-1 rounded-[10px] border text-white disabled:opacity-60"
+              onClick={() => void handleLeaveRoom()}
+              disabled={isDeletingChatRoom}
+            >
+              나가기
+            </button>
+          </div>
+        </div>
+      </Modal>
+    </>
+  );
+}
+
+export default ChatRoomInfo;
diff --git a/src/pages/Chat/ChatSearch.tsx b/src/pages/Chat/ChatSearch.tsx
index ef84477..f208917 100644
--- a/src/pages/Chat/ChatSearch.tsx
+++ b/src/pages/Chat/ChatSearch.tsx
@@ -1,69 +1,68 @@
-import { useState, Fragment } from 'react';
-import { useSuspenseQuery } from '@tanstack/react-query';
-import { Link } from 'react-router-dom';
-import type { Messages } from '@/apis/chat/entity';
+import { startTransition, useState } from 'react';
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
+import { useSearchParams } from 'react-router-dom';
 import { chatQueries } from '@/apis/chat/queries';
-import Search from '@/assets/svg/big-search-icon.svg';
+import SearchIcon from '@/assets/svg/big-search-icon.svg';
+import RouteLoadingFallback from '@/components/common/RouteLoadingFallback';
 import useDebouncedCallback from '@/utils/hooks/useDebounce';
-import { ChatRoomAvatar, ChatRoomListItem } from './components/ChatRoomListItem';
-import { formatTime } from './utils/formatTime';
-
-function MessageListItem({ message, keyword }: { message: Messages; keyword: string }) {
-  const parts = message.matchedMessage.split(keyword);
-  return (
-    <Link
-      to={`/chats/${message.roomId}?messageId=${message.matchedMessageId}`}
-      className="active:bg-indigo-5 flex touch-pan-y items-center gap-3 bg-white px-4 py-3 transition-colors select-none"
-    >
-      <ChatRoomAvatar roomImageUrl={message.roomImageUrl} />
-      <div className="min-w-0 flex-1">
-        <div className="flex items-start justify-between gap-3">
-          <div className="flex min-w-0 items-center gap-1">
-            <span className="text-text-700 truncate text-[16px] leading-[1.6] font-semibold">{message.roomName}</span>
-          </div>
-          {message.matchedMessageSentAt && (
-            <span className="text-text-500 shrink-0 text-[12px] leading-[1.6] font-normal">
-              {formatTime(message.matchedMessageSentAt)}
-            </span>
-          )}
-        </div>
-        <div className="mt-0.5 flex items-center gap-3">
-          <p className="text-text-500 min-w-0 flex-1 truncate text-[12px] leading-[1.6] font-normal">
-            {parts.map((part, index) => (
-              <Fragment key={index}>
-                {part}
-                {index < parts.length - 1 && <span className="font-bold text-black">{keyword}</span>}
-              </Fragment>
-            ))}
-          </p>
-        </div>
-      </div>
-    </Link>
-  );
-}
+import { ChatMessageListItem, ChatRoomListItem } from './components/ChatRoomListItem';
 
 function ChatSearchResults({ keyword }: { keyword: string }) {
-  const { data } = useSuspenseQuery(chatQueries.search(keyword));
+  const { data, isFetching, isPending } = useQuery({
+    ...chatQueries.search(keyword),
+    placeholderData: keepPreviousData,
+  });
+
+  const backPath = keyword ? `/chats/search?keyword=${encodeURIComponent(keyword)}` : '/chats/search';
+  const navigationState = { backPath };
+  const hasRoomMatches = Boolean(data?.roomMatches?.rooms?.length);
+  const hasMessageMatches = Boolean(data?.messageMatches?.messages?.length);
+  const hasResults = hasRoomMatches || hasMessageMatches;
 
   return (
-    <div className="mt-6 h-full w-87.5 overflow-hidden rounded-t-2xl bg-white py-4">
-      {data?.roomMatches?.rooms?.map((room) => (
-        <ChatRoomListItem key={room.roomId} room={room} />
-      ))}
-      {data?.messageMatches?.messages?.map((message, index) => (
-        <MessageListItem key={`${message.roomId}-${index}`} message={message} keyword={keyword} />
-      ))}
+    <div className="scrollbar-hidden mt-6 min-h-0 w-full flex-1 overflow-y-auto rounded-t-2xl bg-white py-4">
+      {isPending && !data ? (
+        <RouteLoadingFallback />
+      ) : hasResults ? (
+        <>
+          {data?.roomMatches?.rooms?.map((room) => (
+            <ChatRoomListItem key={room.roomId} room={room} navigationState={navigationState} />
+          ))}
+          {data?.messageMatches?.messages?.map((message, index) => (
+            <ChatMessageListItem
+              key={`${message.roomId}-${index}`}
+              message={message}
+              keyword={keyword}
+              navigationState={navigationState}
+            />
+          ))}
+        </>
+      ) : (
+        <div className="text-text-500 flex justify-center px-4 py-10 text-center text-sm leading-[1.6]">
+          검색 결과가 없어요
+        </div>
+      )}
+
+      {isFetching && data && (
+        <div className="text-text-400 flex justify-center px-4 pt-4 text-xs leading-[1.6]">검색 중...</div>
+      )}
     </div>
   );
 }
 
 export default function ChatSearch() {
-  const [keyword, setKeyword] = useState('');
-  const [debouncedQuery, setDebouncedQuery] = useState('');
+  const [searchParams, setSearchParams] = useSearchParams();
+  const initialKeyword = searchParams.get('keyword') ?? '';
+
+  const [keyword, setKeyword] = useState(initialKeyword);
+  const [debouncedQuery, setDebouncedQuery] = useState(initialKeyword.trim());
 
   const updateDebouncedQuery = useDebouncedCallback((value: string) => {
     const trimmed = value.trim();
-    setDebouncedQuery(trimmed);
+    startTransition(() => {
+      setDebouncedQuery(trimmed);
+      setSearchParams(trimmed ? { keyword: trimmed } : {}, { replace: true });
+    });
   }, 300);
 
   const handleChange = (value: string) => {
@@ -72,17 +71,17 @@ export default function ChatSearch() {
   };
 
   return (
-    <div className="flex h-full flex-col items-center pt-6">
-      <label className="flex h-13 w-87.5 items-center overflow-hidden rounded-full bg-white px-3">
+    <div className="flex h-full flex-col items-center px-5 pt-6">
+      <div className="flex w-full shrink-0 items-center overflow-hidden rounded-full bg-white px-5 py-2.5">
         <input
           type="text"
           value={keyword}
           onChange={(e) => handleChange(e.target.value)}
-          className="h-full flex-1 bg-white px-3"
+          className="flex-1 text-[15px] leading-[1.6] text-indigo-300"
           placeholder="채팅방명, 채팅으로 검색"
         />
-        <Search />
-      </label>
+        <SearchIcon />
+      </div>
       {debouncedQuery && <ChatSearchResults keyword={debouncedQuery} />}
     </div>
   );
diff --git a/src/pages/Chat/components/ChatRoomListItem.tsx b/src/pages/Chat/components/ChatRoomListItem.tsx
index 49492f6..d5d8db3 100644
--- a/src/pages/Chat/components/ChatRoomListItem.tsx
+++ b/src/pages/Chat/components/ChatRoomListItem.tsx
@@ -1,5 +1,6 @@
+import { Fragment, type ComponentProps, type ReactNode } from 'react';
 import { Link } from 'react-router-dom';
-import type { Room } from '@/apis/chat/entity';
+import type { Messages, Room } from '@/apis/chat/entity';
 import BellOffIcon from '@/assets/svg/bell-off.svg';
 import PersonIcon from '@/assets/svg/person.svg';
 import { formatTime } from '@/pages/Chat/utils/formatTime';
@@ -28,50 +29,119 @@ interface ChatRoomListItemProps {
   room: Room;
   defaultMessage?: string;
   onLongPress?: (x: number, y: number, room: Room) => void;
+  navigationState?: ComponentProps<typeof Link>['state'];
 }
 
-export function ChatRoomListItem({ room, defaultMessage = '', onLongPress }: ChatRoomListItemProps) {
-  const hasUnreadMessage = room.unreadCount > 0;
-  const previewMessage = room.lastMessage?.trim() || defaultMessage;
-  const longPress = useLongPress({
-    onLongPress: (x, y) => onLongPress?.(x, y, room),
-  });
+interface ChatMessageListItemProps {
+  message: Messages;
+  keyword: string;
+  navigationState?: ComponentProps<typeof Link>['state'];
+}
+
+interface ChatListItemBaseProps {
+  to: string;
+  roomImageUrl: string;
+  roomName: string;
+  sentAt?: string | null;
+  preview: ReactNode;
+  isMuted?: boolean;
+  unreadCount?: number;
+  navigationState?: ComponentProps<typeof Link>['state'];
+  linkProps?: Omit<ComponentProps<typeof Link>, 'children' | 'className' | 'to'>;
+}
+
+function UnreadCountBadge({ unreadCount }: { unreadCount: number }) {
+  if (unreadCount <= 0) {
+    return null;
+  }
 
+  return (
+    <span className="shrink-0">
+      <span
+        aria-hidden="true"
+        className="bg-primary-500 flex h-4 min-w-5 items-center justify-center rounded-full px-1 py-0.5 text-[10px] text-white"
+      >
+        {unreadCount > 300 ? '300+' : unreadCount}
+      </span>
+    </span>
+  );
+}
+
+function ChatListItemBase({
+  to,
+  roomImageUrl,
+  roomName,
+  sentAt,
+  preview,
+  isMuted = false,
+  unreadCount = 0,
+  navigationState,
+  linkProps,
+}: ChatListItemBaseProps) {
   return (
     <Link
-      {...longPress}
-      to={`/chats/${room.roomId}`}
+      {...linkProps}
+      to={to}
+      state={navigationState}
       className="active:bg-indigo-5 flex touch-pan-y items-center gap-3 bg-white px-4 py-3 transition-colors select-none"
     >
-      <ChatRoomAvatar roomImageUrl={room.roomImageUrl} />
+      <ChatRoomAvatar roomImageUrl={roomImageUrl} />
       <div className="min-w-0 flex-1">
         <div className="flex items-start justify-between gap-3">
           <div className="flex min-w-0 items-center gap-1">
-            <span className="text-text-700 truncate text-[16px] leading-[1.6] font-semibold">{room.roomName}</span>
-            {room.isMuted && <BellOffIcon aria-hidden className="size-3.5 shrink-0 opacity-50" />}
+            <span className="text-text-700 truncate leading-[1.6] font-semibold">{roomName}</span>
+            {isMuted && <BellOffIcon aria-hidden className="size-3.5 shrink-0 opacity-50" />}
           </div>
-          {room.lastSentAt && (
-            <span className="text-text-500 shrink-0 text-[12px] leading-[1.6] font-normal">
-              {formatTime(room.lastSentAt)}
-            </span>
-          )}
+          {sentAt && <span className="text-text-500 shrink-0 text-xs leading-[1.6]">{formatTime(sentAt)}</span>}
         </div>
         <div className="mt-0.5 flex items-center gap-3">
-          <p className="text-text-500 min-w-0 flex-1 truncate text-[12px] leading-[1.6] font-normal">
-            {previewMessage}
-          </p>
-          {hasUnreadMessage && (
-            <span className="shrink-0">
-              <span
-                aria-hidden="true"
-                className="bg-primary-500 flex h-4 min-w-5 items-center justify-center rounded-full px-1 py-0.5 text-[10px] text-white"
-              >
-                {room.unreadCount > 300 ? '300+' : room.unreadCount}
-              </span>
-            </span>
-          )}
+          <p className="text-text-500 min-w-0 flex-1 truncate text-xs leading-[1.6]">{preview}</p>
+          <UnreadCountBadge unreadCount={unreadCount} />
         </div>
       </div>
     </Link>
   );
 }
+
+export function ChatRoomListItem({ room, defaultMessage = '', onLongPress, navigationState }: ChatRoomListItemProps) {
+  const previewMessage = room.lastMessage?.trim() || defaultMessage;
+  const longPress = useLongPress({
+    onLongPress: (x, y) => onLongPress?.(x, y, room),
+  });
+
+  return (
+    <ChatListItemBase
+      linkProps={longPress}
+      to={`/chats/${room.roomId}`}
+      roomImageUrl={room.roomImageUrl}
+      roomName={room.roomName}
+      sentAt={room.lastSentAt}
+      preview={previewMessage}
+      isMuted={room.isMuted}
+      unreadCount={room.unreadCount}
+      navigationState={navigationState}
+    />
+  );
+}
+
+export function ChatMessageListItem({ message, keyword, navigationState }: ChatMessageListItemProps) {
+  const parts = message.matchedMessage.split(keyword);
+
+  return (
+    <ChatListItemBase
+      to={`/chats/${message.roomId}?messageId=${message.matchedMessageId}`}
+      roomImageUrl={message.roomImageUrl}
+      roomName={message.roomName}
+      sentAt={message.matchedMessageSentAt}
+      isMuted={message.isMuted}
+      unreadCount={message.unreadCount}
+      navigationState={navigationState}
+      preview={parts.map((part, index) => (
+        <Fragment key={index}>
+          {part}
+          {index < parts.length - 1 && <span className="font-bold">{keyword}</span>}
+        </Fragment>
+      ))}
+    />
+  );
+}
diff --git a/src/pages/Chat/hooks/useChat.ts b/src/pages/Chat/hooks/useChat.ts
index 95098d2..19fbfcd 100644
--- a/src/pages/Chat/hooks/useChat.ts
+++ b/src/pages/Chat/hooks/useChat.ts
@@ -23,14 +23,29 @@ const useChat = (chatRoomId?: number, messageId?: number) => {
   const {
     data: chatMessagesData,
     fetchNextPage,
+    fetchPreviousPage,
     hasNextPage,
+    hasPreviousPage,
     isFetchingNextPage,
+    isFetchingPreviousPage,
   } = useInfiniteQuery({
     ...chatQueries.messages(chatRoomId, messageId),
     refetchInterval: 1000,
   });
 
-  const allMessages = chatMessagesData?.pages.flatMap((page) => page.messages) ?? [];
+  const allMessages = (() => {
+    const messages = chatMessagesData?.pages.flatMap((page) => page.messages) ?? [];
+    const seenMessageIds = new Set<number>();
+
+    return messages.filter((message) => {
+      if (seenMessageIds.has(message.messageId)) {
+        return false;
+      }
+
+      seenMessageIds.add(message.messageId);
+      return true;
+    });
+  })();
 
   const totalUnreadCount = chatRoomList.rooms.reduce((sum, room) => sum + room.unreadCount, 0);
 
@@ -53,8 +68,11 @@ const useChat = (chatRoomId?: number, messageId?: number) => {
     isCreatingChatRoom: createChatRoomMutation.isPending,
     chatMessages: allMessages,
     fetchNextPage,
+    fetchPreviousPage,
     hasNextPage,
+    hasPreviousPage,
     isFetchingNextPage,
+    isFetchingPreviousPage,
     totalUnreadCount,
     sendMessage: sendMessageMutation.mutate,
     isSendingMessage: sendMessageMutation.isPending,
diff --git a/src/pages/Chat/hooks/useChatMutations.ts b/src/pages/Chat/hooks/useChatMutations.ts
index ee5d8cc..8419a6a 100644
--- a/src/pages/Chat/hooks/useChatMutations.ts
+++ b/src/pages/Chat/hooks/useChatMutations.ts
@@ -31,7 +31,7 @@ export const useSendChatMessageMutation = () => {
     ...chatMutations.sendMessage(),
     onSuccess: async (_, variables) => {
       await Promise.all([
-        queryClient.invalidateQueries({ queryKey: chatQueryKeys.messages(variables.chatRoomId) }),
+        queryClient.invalidateQueries({ queryKey: chatQueryKeys.messagesByRoom(variables.chatRoomId) }),
         queryClient.invalidateQueries({ queryKey: chatQueryKeys.rooms() }),
       ]);
     },
diff --git a/src/pages/Chat/hooks/useChatRoomScroll.ts b/src/pages/Chat/hooks/useChatRoomScroll.ts
index fd25f55..8c2fa0b 100644
--- a/src/pages/Chat/hooks/useChatRoomScroll.ts
+++ b/src/pages/Chat/hooks/useChatRoomScroll.ts
@@ -5,9 +5,13 @@ interface UseChatRoomScrollParams {
   chatRoomId?: string;
   chatMessagesLength: number;
   latestMessageId?: number | string;
+  targetMessageId?: number;
   fetchNextPage: () => void;
+  fetchPreviousPage: () => void;
   hasNextPage: boolean | undefined;
+  hasPreviousPage: boolean | undefined;
   isFetchingNextPage: boolean;
+  isFetchingPreviousPage: boolean;
 }
 
 const BOTTOM_THRESHOLD_PX = 80;
@@ -20,9 +24,13 @@ const useChatRoomScroll = ({
   chatRoomId,
   chatMessagesLength,
   latestMessageId,
+  targetMessageId,
   fetchNextPage,
+  fetchPreviousPage,
   hasNextPage,
+  hasPreviousPage,
   isFetchingNextPage,
+  isFetchingPreviousPage,
 }: UseChatRoomScrollParams) => {
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const chatMessagesLengthRef = useRef(chatMessagesLength);
@@ -56,6 +64,17 @@ const useChatRoomScroll = ({
 
   const topRef = useInfiniteScroll(handleFetchNextPage, hasNextPage, isFetchingNextPage, { threshold: 0.1 });
 
+  const handleFetchPreviousPage = useCallback(() => {
+    if (!hasPreviousPage || isFetchingPreviousPage) return;
+
+    void fetchPreviousPage();
+  }, [fetchPreviousPage, hasPreviousPage, isFetchingPreviousPage]);
+
+  const bottomRef = useInfiniteScroll(handleFetchPreviousPage, hasPreviousPage, isFetchingPreviousPage, {
+    threshold: 0.1,
+    enabled: Boolean(targetMessageId),
+  });
+
   useEffect(() => {
     chatMessagesLengthRef.current = chatMessagesLength;
   }, [chatMessagesLength]);
@@ -67,7 +86,7 @@ const useChatRoomScroll = ({
     previousScrollHeightRef.current = 0;
     previousClientHeightRef.current = 0;
     isNearBottomRef.current = true;
-  }, [chatRoomId]);
+  }, [chatRoomId, targetMessageId]);
 
   useEffect(() => {
     const container = scrollContainerRef.current;
@@ -83,7 +102,7 @@ const useChatRoomScroll = ({
     return () => {
       container.removeEventListener('scroll', handleScroll);
     };
-  }, [chatRoomId]);
+  }, [chatRoomId, targetMessageId]);
 
   useLayoutEffect(() => {
     const container = scrollContainerRef.current;
@@ -134,9 +153,10 @@ const useChatRoomScroll = ({
     return () => {
       resizeObserver?.disconnect();
     };
-  }, [chatRoomId, scrollToBottom]);
+  }, [chatRoomId, targetMessageId, scrollToBottom]);
 
   return {
+    bottomRef,
     scrollContainerRef,
     topRef,
     scrollToBottom,
diff --git a/src/pages/Manager/ManagedMemberList/components/MemberCard.tsx b/src/pages/Manager/ManagedMemberList/components/MemberCard.tsx
index 72fa14e..f904fc6 100644
--- a/src/pages/Manager/ManagedMemberList/components/MemberCard.tsx
+++ b/src/pages/Manager/ManagedMemberList/components/MemberCard.tsx
@@ -1,17 +1,6 @@
 import type { MouseEvent } from 'react';
-
 import MoreHorizontalIcon from '@/assets/svg/more-horizontal.svg';
-
-export function MemberAvatar({ name }: { name: string }) {
-  return (
-    <div
-      className="bg-indigo-25 text-text-600 flex size-10 items-center justify-center rounded-[10px] text-[15px] leading-6 font-medium"
-      aria-hidden="true"
-    >
-      {name.charAt(0)}
-    </div>
-  );
-}
+import { MemberAvatar } from '@/components/common/MemberAvatar';
 
 interface MemberCardProps {
   disabled?: boolean;
diff --git a/src/pages/Manager/ManagedMemberList/components/RoleManageModal.tsx b/src/pages/Manager/ManagedMemberList/components/RoleManageModal.tsx
index b20beec..8169f07 100644
--- a/src/pages/Manager/ManagedMemberList/components/RoleManageModal.tsx
+++ b/src/pages/Manager/ManagedMemberList/components/RoleManageModal.tsx
@@ -1,8 +1,7 @@
 import type { ClubMember } from '@/apis/club/entity';
 import CheckIcon from '@/assets/svg/check-icon.svg';
 import BottomModal from '@/components/common/BottomModal';
-
-import { MemberAvatar } from './MemberCard';
+import { MemberAvatar } from '@/components/common/MemberAvatar';
 import RoleManageSelector, { type RoleManageOption } from './RoleManageSelector';
 
 interface RoleManageModalProps {
diff --git a/src/pages/Manager/ManagedSheetImportPreview/index.tsx b/src/pages/Manager/ManagedSheetImportPreview/index.tsx
index a7c7c1e..19567dc 100644
--- a/src/pages/Manager/ManagedSheetImportPreview/index.tsx
+++ b/src/pages/Manager/ManagedSheetImportPreview/index.tsx
@@ -5,11 +5,11 @@ import type { PositionType } from '@/apis/club/entity';
 import { managedClubQueries } from '@/apis/club/managedQueries';
 import CheckIcon from '@/assets/svg/check.svg';
 import PersonAddIcon from '@/assets/svg/person-add-icon.svg';
+import { MemberAvatar } from '@/components/common/MemberAvatar';
 import BottomOverlaySpacer from '@/components/layout/BottomOverlaySpacer';
 import { useInAppNotificationToastContext } from '@/contexts/useInAppNotificationToastContext';
 import { useToastContext } from '@/contexts/useToastContext';
 import { useConfirmManagedClubSheetImportMutation } from '@/pages/Manager/hooks/useManagedMemberMutations';
-import { MemberAvatar } from '@/pages/Manager/ManagedMemberList/components/MemberCard';
 import { useApiErrorToast } from '@/utils/hooks/error/useApiErrorToast';
 import { cn } from '@/utils/ts/cn';
 
diff --git a/src/pages/Timer/index.tsx b/src/pages/Timer/index.tsx
index 7f04682..980c00a 100644
--- a/src/pages/Timer/index.tsx
+++ b/src/pages/Timer/index.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState, useTransition } from 'react';
+import { useDeferredValue, useMemo, useRef, useState } from 'react';
 import type { StudyRankingParams } from '@/apis/studyTime/entity';
 import BottomSheet, { type SheetPosition } from '@/components/common/BottomSheet';
 import Dropdown from '@/components/common/Dropdown';
@@ -29,15 +29,23 @@ function TimerPage() {
   const { bottomOverlayInsetPx } = useLayoutElementsContext();
   const timerSectionRef = useRef<HTMLDivElement>(null);
 
-  const [isPending, startTransition] = useTransition();
   const [activeTab, setActiveTab] = useState<TabType>('개인');
   const [sort, setSort] = useState<StudyRankingParams['sort']>('MONTHLY');
+  const rankingParams = useMemo(
+    () => ({
+      activeTab,
+      sort,
+    }),
+    [activeTab, sort]
+  );
+  const deferredRankingParams = useDeferredValue(rankingParams);
   const [sheetPosition, setSheetPosition] = useState<SheetPosition>('half');
   const [autoExpandResetKey, setAutoExpandResetKey] = useState(0);
   const { isExitConfirmOpen, closeExitConfirm, confirmExit } = useTimerExitGuard({ isRunning, stop });
 
   const tabs: TabType[] = ['동아리', '학번', '개인'];
   const isBusy = isStarting || isStopping;
+  const isRankingPending = activeTab !== deferredRankingParams.activeTab || sort !== deferredRankingParams.sort;
   const { bottomInsetPx, fullSheetTopOffset, halfSheetTopOffset, timerSectionPaddingTopClassName, timerSize } =
     useTimerLayout({
       bottomOverlayInsetPx,
@@ -79,12 +87,7 @@ function TimerPage() {
           <div className="flex min-h-0 flex-1 flex-col">
             <div className="relative shrink-0 px-5">
               <div className="text-text-700 text-center text-[16px] leading-[1.6] font-bold">랭킹</div>
-              <Dropdown
-                className="absolute top-0 right-5"
-                options={SORT_OPTIONS}
-                value={sort}
-                onChange={(value) => startTransition(() => setSort(value))}
-              />
+              <Dropdown className="absolute top-0 right-5" options={SORT_OPTIONS} value={sort} onChange={setSort} />
             </div>
 
             <div className="mt-2.5 flex w-full shrink-0 items-center justify-between">
@@ -92,7 +95,7 @@ function TimerPage() {
                 <button
                   key={tab}
                   type="button"
-                  onClick={() => startTransition(() => setActiveTab(tab))}
+                  onClick={() => setActiveTab(tab)}
                   className={cn(
                     'flex-1 border-b-[1.4px] px-0 py-1.5 text-center text-[14px] leading-[1.6] font-medium text-indigo-200',
                     activeTab === tab && 'text-primary-500 border-blue-200 font-bold',
@@ -104,10 +107,12 @@ function TimerPage() {
               ))}
             </div>
 
-            <div className={cn('min-h-0 flex-1 overflow-hidden px-5', isPending && 'opacity-60 transition-opacity')}>
+            <div
+              className={cn('min-h-0 flex-1 overflow-hidden px-5', isRankingPending && 'opacity-60 transition-opacity')}
+            >
               <RankingList
-                type={TAB_TO_TYPE[activeTab]}
-                sort={sort}
+                type={TAB_TO_TYPE[deferredRankingParams.activeTab]}
+                sort={deferredRankingParams.sort}
                 sheetPosition={position}
                 hiddenBottomInsetPx={bottomInsetPx}
                 autoExpandResetKey={autoExpandResetKey}