diff --git a/src/frontend/src/api/endpoints/room/room.api.ts b/src/frontend/src/api/endpoints/room/room.api.ts
index 79b2d11c..f4de8766 100644
--- a/src/frontend/src/api/endpoints/room/room.api.ts
+++ b/src/frontend/src/api/endpoints/room/room.api.ts
@@ -1,5 +1,12 @@
 import instance from '@/api/axios.instance';
-import { PlaylistDto, RoomRequestDto, MyRoomDto, RoomDto, CurrentRoomDto } from './room.interface';
+import {
+  PlaylistDto,
+  RoomRequestDto,
+  MyRoomDto,
+  RoomDto,
+  CurrentRoomDto,
+  ReceiveMessageDto,
+} from './room.interface';
 
 export const roomApi = {
   // 방 생성
@@ -41,6 +48,14 @@ export const roomApi = {
   //   return data;
   // },
 
+  // 메시지 조회
+  getMessages: async (roomId: number, cursor?: number, limit?: number) => {
+    const { data } = await instance.get<ReceiveMessageDto[]>(`/messages/${roomId}`, {
+      params: { cursor, limit: limit ?? 10 },
+    });
+    return data;
+  },
+
   // 방 참여자 조회
   getParticipants: async (roomId: string) => {
     const { data } = await instance.get(`/rooms/participants`, { params: { roomId } });
diff --git a/src/frontend/src/api/endpoints/room/room.interface.ts b/src/frontend/src/api/endpoints/room/room.interface.ts
index e18dd491..9484b6a1 100644
--- a/src/frontend/src/api/endpoints/room/room.interface.ts
+++ b/src/frontend/src/api/endpoints/room/room.interface.ts
@@ -66,3 +66,18 @@ export interface CurrentRoomDto {
     playlist: CurrentRoomPlaylistDto[];
   };
 }
+
+export interface SendMessageDto {
+  roomId: number;
+  userId: number;
+  nickname: string | null;
+  role: number;
+  profileImageUrl: string | null;
+  content: string | null;
+  message: string;
+}
+
+export interface ReceiveMessageDto extends SendMessageDto {
+  id: string;
+  timestamp: number;
+}
diff --git a/src/frontend/src/components/Modal/RoomCreateModal/index.tsx b/src/frontend/src/components/Modal/RoomCreateModal/index.tsx
index ddfbd838..f0207bfc 100644
--- a/src/frontend/src/components/Modal/RoomCreateModal/index.tsx
+++ b/src/frontend/src/components/Modal/RoomCreateModal/index.tsx
@@ -24,6 +24,7 @@ interface IRoomCreateModal {
 
 export const RoomCreateModal = ({ onCancel }: IRoomCreateModal) => {
   const titleRef = useRef<HTMLInputElement>(null);
+  const descriptionRef = useRef<HTMLTextAreaElement>(null);
   const [isPublic, setIsPublic] = useState(true);
   const [titleLength, setTitleLength] = useState(0);
   const createRoom = useCreateRoom();
@@ -50,7 +51,7 @@ export const RoomCreateModal = ({ onCancel }: IRoomCreateModal) => {
 
     createRoom.mutate({
       title: titleRef.current?.value || '',
-      description: '',
+      description: descriptionRef.current?.value || '',
       isPublic: isPublic,
     });
     onCancel();
@@ -81,7 +82,7 @@ export const RoomCreateModal = ({ onCancel }: IRoomCreateModal) => {
           required
         />
         <TitleLength>{`${titleLength} / 60`}</TitleLength>
-        <TextArea placeholder="방 설명" rows={4} />
+        <TextArea placeholder="방 설명" rows={4} ref={descriptionRef} />
         <PrivacyToggleContainer>
           <PrivacyButton $active={isPublic} onClick={() => setIsPublic(true)}>
             {isPublic ? (
diff --git a/src/frontend/src/components/Sidebar/Chating/ChatMessages/ChatLayout/ChatNickname/index.tsx b/src/frontend/src/components/Sidebar/Chating/ChatMessages/ChatLayout/ChatNickname/index.tsx
index efb4ec4a..fa32cf0c 100644
--- a/src/frontend/src/components/Sidebar/Chating/ChatMessages/ChatLayout/ChatNickname/index.tsx
+++ b/src/frontend/src/components/Sidebar/Chating/ChatMessages/ChatLayout/ChatNickname/index.tsx
@@ -34,7 +34,7 @@ export const ChatNickname = (props: IChatNickname) => {
 const Wrapper = styled.div`
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 4px;
 `;
 
 const Img = styled.img``;
diff --git a/src/frontend/src/components/Sidebar/Chating/ChatMessages/ChatLayout/index.css.ts b/src/frontend/src/components/Sidebar/Chating/ChatMessages/ChatLayout/index.css.ts
index 1fd09164..a0ed5829 100644
--- a/src/frontend/src/components/Sidebar/Chating/ChatMessages/ChatLayout/index.css.ts
+++ b/src/frontend/src/components/Sidebar/Chating/ChatMessages/ChatLayout/index.css.ts
@@ -9,6 +9,7 @@ export const Profile = styled.img`
   width: 40px;
   height: 40px;
   margin-right: 4px;
+  border-radius: 10px;
 `;
 export const ChatContainer = styled.div`
   display: flex;
@@ -18,10 +19,11 @@ export const Title = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
+  margin-bottom: 4px;
 `;
 export const Title__Time = styled.div`
   font-size: 12px;
   color: #888888;
-  margin-left: 4px;
+  margin-left: 8px;
 `;
 export const ChatText = styled.div``;
diff --git a/src/frontend/src/components/Sidebar/Chating/ChatMessages/ChatLayout/index.tsx b/src/frontend/src/components/Sidebar/Chating/ChatMessages/ChatLayout/index.tsx
index aeefc2e0..528fb096 100644
--- a/src/frontend/src/components/Sidebar/Chating/ChatMessages/ChatLayout/index.tsx
+++ b/src/frontend/src/components/Sidebar/Chating/ChatMessages/ChatLayout/index.tsx
@@ -1,25 +1,19 @@
-import ProfileImg from '@/assets/img/ProfileImg.svg';
 import { Wrapper, Profile, ChatContainer, Title, Title__Time, ChatText } from './index.css';
-import { UserRole } from '@/types/enums/UserRole';
 import { ChatNickname } from '@/components/Sidebar/Chating/ChatMessages/ChatLayout/ChatNickname';
+import { ReceiveMessageDto } from '@/api/endpoints/room/room.interface';
+import { formatDateToKorean } from '@/utils/dateUtils';
+import DefaultProfile from '@/assets/img/DefaultProfile.svg';
 
-interface IChat {
-  role: UserRole;
-  nickname: string;
-  time: string;
-  text: string;
-}
-
-export const ChatLayout = (props: IChat) => {
+export const ChatLayout = ({ message }: { message: ReceiveMessageDto }) => {
   return (
     <Wrapper>
-      <Profile className="Profile" src={ProfileImg} />
+      <Profile className="Profile" src={message.profileImageUrl ?? DefaultProfile} />
       <ChatContainer>
         <Title>
-          <ChatNickname role={props.role} nickname={props.nickname} />
-          <Title__Time>{props.time}</Title__Time>
+          <ChatNickname role={message.role} nickname={message.nickname ?? '알수없음'} />
+          <Title__Time>{formatDateToKorean(message.timestamp ?? new Date().getTime())}</Title__Time>
         </Title>
-        <ChatText>{props.text}</ChatText>
+        <ChatText>{message.message}</ChatText>
       </ChatContainer>
     </Wrapper>
   );
diff --git a/src/frontend/src/components/Sidebar/Chating/ChatMessages/index.css.ts b/src/frontend/src/components/Sidebar/Chating/ChatMessages/index.css.ts
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/frontend/src/components/Sidebar/Chating/ChatMessages/index.tsx b/src/frontend/src/components/Sidebar/Chating/ChatMessages/index.tsx
deleted file mode 100644
index 02f3ec62..00000000
--- a/src/frontend/src/components/Sidebar/Chating/ChatMessages/index.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { UserRole } from '@/types/enums/UserRole';
-// import { ChatLayout } from '@/components/Sidebar/Chating/ChatMessages/ChatLayout';
-import { ChatLayout } from '@/components/Sidebar/Chating/ChatMessages/ChatLayout';
-
-interface IChatMessages {
-  chatData: {
-    role: UserRole;
-    nickname: string;
-    time: string;
-    text: string;
-  }[];
-}
-
-export const ChatMessages = (props: IChatMessages) => {
-  return (
-    <>
-      {props.chatData.map((chat, index) => (
-        <ChatLayout
-          key={index}
-          role={chat.role}
-          nickname={chat.nickname}
-          time={chat.time}
-          text={chat.text}
-        />
-      ))}
-    </>
-  );
-};
diff --git a/src/frontend/src/components/Sidebar/Chating/index.css.ts b/src/frontend/src/components/Sidebar/Chating/index.css.ts
index 3e4cf028..6bde1e99 100644
--- a/src/frontend/src/components/Sidebar/Chating/index.css.ts
+++ b/src/frontend/src/components/Sidebar/Chating/index.css.ts
@@ -7,6 +7,7 @@ export const ChatContainer = styled.div`
   background-color: #ffffff;
   border: 1px solid #d4d4d4;
   border-radius: 10px;
+  position: relative;
 `;
 
 export const ChatScrollArea = styled.div`
@@ -99,3 +100,34 @@ export const ChatInputButton = styled.button`
 export const Blank = styled.div<{ $blankPadding: string }>`
   padding-bottom: ${({ $blankPadding }) => $blankPadding};
 `;
+
+export const ScrollButton = styled.button`
+  position: absolute;
+  bottom: 70px;
+  right: 15px;
+  z-index: 100;
+  background-color: var(--palette-primary);
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+  opacity: 0.9;
+  border: none;
+  border-radius: 50%;
+  padding: 5px 10px;
+  cursor: pointer;
+  width: 40px;
+  height: 40px;
+
+  & > span {
+    position: absolute;
+    right: -0.5rem;
+    top: -0.5rem;
+    background-color: var(--palette-accent-redOrange);
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 50%;
+    color: #fff;
+    font-weight: 500;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+`;
diff --git a/src/frontend/src/components/Sidebar/Chating/index.tsx b/src/frontend/src/components/Sidebar/Chating/index.tsx
index aba31d50..5a00ea1c 100644
--- a/src/frontend/src/components/Sidebar/Chating/index.tsx
+++ b/src/frontend/src/components/Sidebar/Chating/index.tsx
@@ -1,255 +1,122 @@
-import { useState, useRef, useEffect, useCallback } from 'react';
-import Stomp, { Client, Message } from 'stompjs';
-import SockJS from 'sockjs-client';
+import { useRef, useEffect, useCallback, useState } from 'react';
 import { ChatInput } from '@/components/Sidebar/Chating/ChatInput';
-import { ChatMessages } from '@/components/Sidebar/Chating/ChatMessages';
-import { UserRole } from '@/types/enums/UserRole';
-import { ChatContainer, ChatScrollArea, Blank } from './index.css';
-import { DoublyLinkedList } from '@/hooks/utils/DoublyLinkedList';
-
-const BATCH_INTERVAL = 100;
-const MAX_BATCH_SIZE = 20;
-
-const INITIAL_CHAT_NUM = 20;
-const EXTRA_CHAT_NUM = 5;
-const MAX_CHAT_NUM = 30;
-const CHAT_HEIGHT = 60;
-
-const initialChatData = Array.from({ length: 100 }, (_, i) => ({
-  role: i % 2 === 0 ? UserRole.MEMBER : UserRole.CREATOR,
-  nickname: `User${i}`,
-  time: `10:${(i % 60).toString().padStart(2, '0')}`,
-  text: `This is message number ${i}`,
-}));
-
-export const ChatBox = () => {
-  const chatListRef = useRef(new DoublyLinkedList(initialChatData));
-  const startIndexRef = useRef(Math.max(chatListRef.current.length - INITIAL_CHAT_NUM, 0));
-  const [visibleChat, setVisibleChat] = useState(
-    chatListRef.current.slice(
-      Math.max(chatListRef.current.length - INITIAL_CHAT_NUM, 0),
-      chatListRef.current.length,
-    ),
-  );
-
-  const [extraTopNum, setExtraTopNum] = useState(0);
-  const [extraDownNum, setExtraDownNum] = useState(0);
-  const [status, setStatus] = useState<string>('Disconnected');
+import { ChatContainer, ChatScrollArea, ScrollButton } from './index.css';
+import { useCurrentRoomStore } from '@/stores/useCurrentRoomStore';
+import { ChatLayout } from './ChatMessages/ChatLayout';
+import ArrowDown from '@/assets/img/ArrowDown.svg';
+export const Chat = () => {
+  const messages = useCurrentRoomStore(state => state.messages);
+  const sendMessage = useCurrentRoomStore(state => state.sendMessage);
+  const fetchMessages = useCurrentRoomStore(state => state.fetchMessages);
 
   const chatContainerRef = useRef<HTMLDivElement>(null);
-  const stompClientRef = useRef<Client | null>(null);
-  const topSentinelRef = useRef<HTMLDivElement>(null);
-  const bottomSentinelRef = useRef<HTMLDivElement>(null);
-  const incomingQueueRef = useRef<{ content: string; userId: string }[]>([]);
-
-  const roomId = '1';
-  const userId = useRef(`user${Math.floor(Math.random() * 1000)}`);
-
-  const isAtBottom = useCallback(() => {
-    if (!chatContainerRef.current) return false;
-    const { scrollTop, clientHeight, scrollHeight } = chatContainerRef.current;
-    return scrollHeight - scrollTop - clientHeight < 10;
-  }, []);
-
-  const sendMessage = useCallback(
-    (message: string) => {
-      if (!stompClientRef.current || !stompClientRef.current.connected) {
-        console.warn('웹소켓 연결이 되지 않아 메시지 전송 불가');
-        return;
-      }
-      stompClientRef.current.send('/app/sendMessage', {}, JSON.stringify({ roomId, message }));
-    },
-    [roomId],
-  );
 
-  const addMessage = useCallback(
-    (message: string, sender: string = 'Me', _isBatch: boolean = false) => {
-      if (sender !== 'Me' && sender === userId.current) return;
-
-      const newChat = {
-        role: sender === 'Me' ? UserRole.MEMBER : UserRole.CREATOR,
-        nickname: sender,
-        time: new Date().toLocaleTimeString().slice(0, 5),
-        text: message,
-      };
-
-      if (sender === 'Me') {
-        sendMessage(message);
-      }
-
-      chatListRef.current.push(newChat);
-      const newLength = chatListRef.current.length;
-
-      setTimeout(() => {
-        if (sender === 'Me' || isAtBottom()) {
-          const newStartIndex = newLength > MAX_CHAT_NUM ? newLength - MAX_CHAT_NUM : 0;
-          startIndexRef.current = newStartIndex;
-          setVisibleChat(chatListRef.current.slice(newStartIndex, newLength));
-          scrollToBottom();
-        }
-      }, 0);
-    },
-    [isAtBottom, sendMessage],
-  );
+  const prevScrollHeightRef = useRef(0);
+  const [isInitialLoad, setIsInitialLoad] = useState(true);
+  const [isFetching, setIsFetching] = useState(false);
+  const [isMyMessage, setIsMyMessage] = useState(false);
+  const [showScrollButton, setShowScrollButton] = useState(false);
+  const [isAtBottom, setIsAtBottom] = useState(false);
+  const [newMessageCount, setnewMessageCount] = useState(0);
+  const [hasMoreMessages, setHasMoreMessages] = useState(true);
 
+  // 최초 메시지 로딩 시 스크롤 이동
   useEffect(() => {
-    const intervalId = setInterval(() => {
-      if (incomingQueueRef.current.length > 0) {
-        const batch = incomingQueueRef.current.splice(0, MAX_BATCH_SIZE);
-
-        setTimeout(() => {
-          batch.forEach(msg => {
-            addMessage(msg.content, msg.userId, true);
-          });
-        }, 0);
-      }
-    }, BATCH_INTERVAL);
+    if (!chatContainerRef.current || !messages.length) return;
 
-    return () => clearInterval(intervalId);
-  }, [addMessage]);
-
-  // WebSocket 연결
-  const connect = useCallback(() => {
-    if (stompClientRef.current) {
-      console.warn('웹소켓이 이미 연결되어 있습니다.');
-      return;
+    if (isInitialLoad) {
+      chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
+      setIsInitialLoad(false);
     }
-    const API_BASE_URL = 'http://localhost:8000';
-    const socket = new SockJS(`${API_BASE_URL}/api/chat/ws`);
-    const client = Stomp.over(socket);
-    client.connect({}, () => {
-      console.log('WebSocket Connected');
-      setStatus('Connected');
-      stompClientRef.current = client;
-
-      // 채팅방 구독
-      const subscription = client.subscribe(`/topic/${roomId}`, (message: Message) => {
-        try {
-          const payload = JSON.parse(message.body);
-          incomingQueueRef.current.push({ content: payload.content, userId: payload.userId });
-        } catch (error) {
-          console.error('❌: ', error);
-        }
-      });
+  }, [messages, isInitialLoad]);
 
-      client.send('/app/joinRoom', {}, JSON.stringify({ roomId, userId: userId.current }));
+  // 메시지 변경 시 스크롤 이동
+  useEffect(() => {
+    if (!chatContainerRef.current) return;
 
-      return () => {
-        subscription.unsubscribe();
-      };
-    });
-  }, [roomId]);
-
-  // WebSocket 연결 해제
-  const disconnect = useCallback(() => {
-    if (stompClientRef.current && stompClientRef.current.connected) {
-      stompClientRef.current.disconnect(() => {
-        console.log('❌ 웹소켓 연결이 해제되었습니다.');
-        setStatus('Disconnected');
-        stompClientRef.current = null;
+    if (prevScrollHeightRef.current && isFetching) {
+      chatContainerRef.current.scrollTop =
+        chatContainerRef.current.scrollHeight - prevScrollHeightRef.current;
+      setIsFetching(false);
+    } else if (isMyMessage || isAtBottom) {
+      chatContainerRef.current.scrollTo({
+        top: chatContainerRef.current.scrollHeight,
+        behavior: 'smooth',
       });
+      setIsMyMessage(false);
+      setIsAtBottom(true);
     } else {
-      console.warn('웹소켓이 이미 연결되지 않았습니다.');
+      // 새로운 메시지가 온 경우, 스크롤 버튼 띄우기
+      setnewMessageCount(prev => prev + 1);
     }
-  }, []);
+  }, [messages]);
 
-  // 상단 감지 Observer
-  useEffect(() => {
-    const observerOptions = { root: chatContainerRef.current, threshold: 1.0 };
-    const topObserver = new IntersectionObserver(entries => {
-      const entry = entries[0];
-      if (entry.isIntersecting && startIndexRef.current > 0) {
-        const newStartIndex = Math.max(0, startIndexRef.current - EXTRA_CHAT_NUM);
-        const prevHeight = chatContainerRef.current?.scrollHeight || 0;
-        if (visibleChat.length === MAX_CHAT_NUM) {
-          setExtraDownNum(prev => prev + EXTRA_CHAT_NUM);
-          setExtraTopNum(prev => Math.max(prev - EXTRA_CHAT_NUM, 0));
-        }
-        startIndexRef.current = newStartIndex;
-        setVisibleChat(chatListRef.current.slice(newStartIndex, newStartIndex + MAX_CHAT_NUM));
-        requestAnimationFrame(() => {
-          if (chatContainerRef.current) {
-            const newHeight = chatContainerRef.current.scrollHeight + extraTopNum * CHAT_HEIGHT;
-            chatContainerRef.current.scrollTop = newHeight - prevHeight;
-          }
-        });
-      }
-    }, observerOptions);
+  const handleScrollToBottom = () => {
+    if (!chatContainerRef.current) return;
 
-    if (topSentinelRef.current) {
-      topObserver.observe(topSentinelRef.current);
-    }
-    return () => {
-      if (topSentinelRef.current) {
-        topObserver.unobserve(topSentinelRef.current);
-      }
-    };
-  }, [visibleChat]);
+    chatContainerRef.current.scrollTo({
+      top: chatContainerRef.current.scrollHeight,
+      behavior: 'smooth',
+    });
+  };
 
-  // 하단 감지 Observer
-  useEffect(() => {
-    const observerOptions = { root: chatContainerRef.current, threshold: 1.0 };
-    const bottomObserver = new IntersectionObserver(entries => {
-      const entry = entries[0];
-      if (
-        entry.isIntersecting &&
-        startIndexRef.current < chatListRef.current.length - MAX_CHAT_NUM
-      ) {
-        const newStartIndex = Math.min(
-          startIndexRef.current + EXTRA_CHAT_NUM,
-          chatListRef.current.length - MAX_CHAT_NUM,
-        );
-        const prevHeight = chatContainerRef.current?.scrollHeight || 0;
-        if (visibleChat.length === MAX_CHAT_NUM) {
-          setExtraDownNum(prev => Math.max(prev - EXTRA_CHAT_NUM, 0));
-          setExtraTopNum(prev => prev + EXTRA_CHAT_NUM);
-        }
-        startIndexRef.current = newStartIndex;
-        setVisibleChat(chatListRef.current.slice(newStartIndex, newStartIndex + MAX_CHAT_NUM));
-        requestAnimationFrame(() => {
-          if (chatContainerRef.current) {
-            const newHeight = chatContainerRef.current.scrollHeight;
-            chatContainerRef.current.scrollTop +=
-              newHeight - prevHeight - CHAT_HEIGHT * EXTRA_CHAT_NUM;
-          }
-        });
-      }
-    }, observerOptions);
+  // 메시지 추가
+  const addMessage = useCallback(
+    (message: string) => {
+      prevScrollHeightRef.current = 0;
+      setIsMyMessage(true);
+      sendMessage(message);
+    },
+    [sendMessage],
+  );
 
-    if (bottomSentinelRef.current) {
-      bottomObserver.observe(bottomSentinelRef.current);
-    }
-    return () => {
-      if (bottomSentinelRef.current) {
-        bottomObserver.unobserve(bottomSentinelRef.current);
-      }
-    };
-  }, [visibleChat]);
+  const handleScroll = async () => {
+    if (!chatContainerRef.current) return;
 
-  const scrollToBottom = useCallback(() => {
-    if (chatContainerRef.current) {
-      setExtraTopNum(prev => prev + extraDownNum);
-      setExtraDownNum(0);
-      chatContainerRef.current.scrollTo({
-        top: chatContainerRef.current.scrollHeight,
-        behavior: 'smooth',
-      });
+    const currentScrollTop = chatContainerRef.current.scrollTop;
+    const scrollHeight = chatContainerRef.current.scrollHeight;
+    const clientHeight = chatContainerRef.current.clientHeight;
+
+    // 바텀에서 적당히 떨어진 거리 (예: 50px)
+    const bottomThreshold = 120;
+
+    prevScrollHeightRef.current = currentScrollTop;
+    const isAtBottom = scrollHeight - clientHeight === currentScrollTop;
+
+    if (isAtBottom) {
+      setShowScrollButton(false);
+      setIsAtBottom(true);
+      setnewMessageCount(0);
+    } else {
+      if (scrollHeight - currentScrollTop - clientHeight > bottomThreshold) {
+        setShowScrollButton(true);
+      }
+      setIsAtBottom(false);
     }
-  }, [extraDownNum]);
+    if (currentScrollTop == 0 && hasMoreMessages) {
+      prevScrollHeightRef.current = scrollHeight;
+      setIsFetching(true);
+      const count = await fetchMessages(useCurrentRoomStore.getState().messages[0]?.timestamp);
+      if (count == 0) setHasMoreMessages(false);
+    }
+  };
 
   return (
     <ChatContainer>
-      <ChatScrollArea ref={chatContainerRef}>
-        <Blank $blankPadding={`${CHAT_HEIGHT * extraTopNum}px`} />
-        <div ref={topSentinelRef} style={{ height: 100 }} />
-        <ChatMessages chatData={visibleChat} />
-        <div ref={bottomSentinelRef} style={{ height: 1 }} />
-        <Blank $blankPadding={`${CHAT_HEIGHT * extraDownNum}px`} />
+      <ChatScrollArea ref={chatContainerRef} onScroll={handleScroll}>
+        {messages.map((message, index) => (
+          <ChatLayout message={message} key={index} />
+        ))}
       </ChatScrollArea>
-      <ChatInput onSendMessage={msg => addMessage(msg, 'Me')} />
-      <button onClick={connect}>연결하기</button>
-      <button onClick={disconnect}>연결 끊기</button>
-      <p>Status: {status}</p>
+      <ChatInput onSendMessage={msg => addMessage(msg)} />
+      {showScrollButton && (
+        <ScrollButton onClick={handleScrollToBottom}>
+          <img src={ArrowDown} alt="ArrowDown" />
+          {newMessageCount != 0 && <span>{newMessageCount}</span>}
+        </ScrollButton>
+      )}
     </ChatContainer>
   );
 };
+
+// TODO: messages key={index} -> timestamp로 변경하기
diff --git a/src/frontend/src/components/Sidebar/index.tsx b/src/frontend/src/components/Sidebar/index.tsx
index c1c3f708..b9d220be 100644
--- a/src/frontend/src/components/Sidebar/index.tsx
+++ b/src/frontend/src/components/Sidebar/index.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { ChatBox } from './Chating';
+import { Chat } from './Chating';
 import { UserList } from './UserList';
 import { Playlist } from './Playlist';
 import { VoiceChat } from './VoiceChat';
@@ -14,7 +14,7 @@ export const Sidebar = () => {
   const [interfaceType, setInterfaceType] = useState<SidebarType>(SidebarType.CHAT);
 
   const contentComponents = {
-    [SidebarType.CHAT]: ChatBox,
+    [SidebarType.CHAT]: Chat,
     [SidebarType.PLAYLIST]: Playlist,
     [SidebarType.VOICECHAT]: VoiceChat,
     [SidebarType.USERLIST]: UserList,
diff --git a/src/frontend/src/pages/RoomPage/index.tsx b/src/frontend/src/pages/RoomPage/index.tsx
index de893097..34c44b97 100644
--- a/src/frontend/src/pages/RoomPage/index.tsx
+++ b/src/frontend/src/pages/RoomPage/index.tsx
@@ -14,13 +14,13 @@ export const RoomPage = () => {
   const { data: room } = useCurrentRoom(roomCode);
   console.log('RoomPage:', room);
 
-  const { messages } = useCurrentRoomStore(); // NOTE: 채팅 메시지 테스트용
-
   useEffect(() => {
     if (room) {
       useCurrentRoomStore.getState().setCurrentRoom(room);
-      useCurrentRoomStore.getState().subscribeChat(room.roomDetails.roomInfo[0]?.roomId);
     }
+    return () => {
+      useCurrentRoomStore.getState().clearCurrentRoom();
+    };
   }, [room]);
 
   return (
@@ -29,8 +29,6 @@ export const RoomPage = () => {
         <Wrapper>
           <YouTubePlayer />
           <RoomDetail />
-          {/* NOTE: 채팅 메시지 테스트 용 */}
-          <ul>{messages && messages.map((message, i) => <li key={i}>{message.message}</li>)}</ul>
         </Wrapper>
         <Sidebar />
       </Container>
diff --git a/src/frontend/src/stores/useCurrentRoomStore.ts b/src/frontend/src/stores/useCurrentRoomStore.ts
index 45016652..8f26edea 100644
--- a/src/frontend/src/stores/useCurrentRoomStore.ts
+++ b/src/frontend/src/stores/useCurrentRoomStore.ts
@@ -8,39 +8,103 @@ import { create } from 'zustand';
 import { CurrentRoomDto } from '@/api/endpoints/room/room.interface';
 import { useWebSocketStore } from './useWebSocketStore';
 import { useUserStore } from './useUserStore';
-import { ReceiveMessageDto, SendMessageDto } from '@/types/dto/Message.dto';
+import { ReceiveMessageDto, SendMessageDto } from '@/api/endpoints/room/room.interface';
+import { roomApi } from '@/api/endpoints/room/room.api';
+import { UserRole } from '@/types/enums/UserRole';
 
 interface CurrentRoomStore {
+  roomId?: number;
   currentRoom: CurrentRoomDto | null;
   messages: ReceiveMessageDto[];
-  sendMessage: (messageDto: SendMessageDto) => void;
-  subscribeChat: (roomId: number) => void;
+  messageQueue: ReceiveMessageDto[];
+  sendMessage: (message: string) => void;
+  subscribeChat: () => void;
+  fetchMessages: (cursor?: number, limit?: number) => Promise<number | undefined>;
   addMessage: (message: ReceiveMessageDto) => void;
   setCurrentRoom: (room: CurrentRoomDto) => void;
   clearCurrentRoom: () => void;
+  processBatchMessages: () => void;
 }
+const BATCH_SIZE = 20;
+const BATCH_INTERVAL = 100;
 
 export const useCurrentRoomStore = create<CurrentRoomStore>((set, get) => ({
+  roomId: undefined,
   currentRoom: null,
   messages: [],
+  messageQueue: [],
+  setCurrentRoom: (room: CurrentRoomDto) => {
+    set({ currentRoom: room, roomId: room.roomDetails.roomInfo[0]?.roomId });
+    get().fetchMessages();
+    get().subscribeChat();
+  },
+  clearCurrentRoom: () =>
+    set({ roomId: undefined, currentRoom: null, messages: [], messageQueue: [] }),
 
-  setCurrentRoom: (room: CurrentRoomDto) => set({ currentRoom: room }),
-  clearCurrentRoom: () => set({ currentRoom: null }),
+  subscribeChat: () => {
+    const roomId = get().roomId;
+    if (!roomId) return;
 
-  subscribeChat: (roomId: number) => {
     const destination = `/topic/room/${roomId}/chat`;
     useWebSocketStore.getState().subTopic(destination, (message: ReceiveMessageDto) => {
-      get().addMessage(message);
+      console.log('---------message', message);
+      set(state => ({ messageQueue: [...state.messageQueue, message] }));
     });
+
+    const intervalId = setInterval(() => {
+      get().processBatchMessages();
+    }, BATCH_INTERVAL);
+
+    return () => clearInterval(intervalId);
+  },
+
+  processBatchMessages: () => {
+    set(state => {
+      if (state.messageQueue.length === 0) return state;
+
+      // 큐에서 일정 개수만큼 메시지를 가져옴
+      const batch = state.messageQueue.slice(0, BATCH_SIZE);
+      const remainingQueue = state.messageQueue.slice(BATCH_SIZE);
+
+      // 메시지 배열과 큐 업데이트
+      return {
+        ...state,
+        messages: [...state.messages, ...batch],
+        messageQueue: remainingQueue,
+      };
+    });
+  },
+
+  fetchMessages: async (cursor?: number, limit?: number) => {
+    const roomId = get().roomId;
+    if (!roomId) return;
+    const messageHistory = await roomApi.getMessages(roomId, cursor, limit ?? 30);
+    const sortedMessages = messageHistory.sort((a, b) => a.timestamp - b.timestamp);
+    set({ messages: [...sortedMessages, ...get().messages] });
+
+    return messageHistory.length;
   },
 
-  sendMessage: (messageDto: SendMessageDto) => {
+  sendMessage: (message: string) => {
     const { client } = useWebSocketStore.getState();
     if (!client) return;
 
     const { user } = useUserStore.getState();
     if (!user) return;
+    const roomId = get().roomId;
+    const myRole = get().currentRoom?.myRole;
+    if (!roomId) return;
 
+    const messageDto: SendMessageDto = {
+      roomId: roomId,
+      userId: user.userId,
+      nickname: user.nickname,
+      role: myRole ?? UserRole.MEMBER,
+      profileImageUrl: user.profileImageUrl,
+      content: null,
+      message: message,
+    };
+    console.log('---------messageDto', messageDto);
     client.send(`/app/send-message`, {}, JSON.stringify(messageDto));
   },
 
diff --git a/src/frontend/src/stores/useMyRoomsStore.ts b/src/frontend/src/stores/useMyRoomsStore.ts
index 0555d51d..68e90ce4 100644
--- a/src/frontend/src/stores/useMyRoomsStore.ts
+++ b/src/frontend/src/stores/useMyRoomsStore.ts
@@ -5,6 +5,7 @@ import { create } from 'zustand';
 import { roomApi } from '@/api/endpoints/room/room.api';
 import { persist } from 'zustand/middleware';
 import { useWebSocketStore } from './useWebSocketStore';
+import { useCurrentRoomStore } from './useCurrentRoomStore';
 
 interface MyRoomsStore {
   myRooms: MyRoomDto[];
@@ -28,6 +29,10 @@ export const useMyRoomsStore = create(
           set({ myRooms });
           console.log('myRooms', myRooms);
           const myRoomIds = myRooms.map(room => room.roomId);
+          const currentRoomId = useCurrentRoomStore.getState().roomId;
+          if (currentRoomId) { // 현재 /rooom에서 방을 보고 있다면 구독을 currentRoomStore에서 처리
+            myRoomIds.splice(myRoomIds.indexOf(currentRoomId), 1);
+          }
           useWebSocketStore.getState().subscribeRooms(myRoomIds);
           return myRooms;
         } catch (error) {
diff --git a/src/frontend/src/stores/useWebSocketStore.ts b/src/frontend/src/stores/useWebSocketStore.ts
index 895fcd09..2bd015fd 100644
--- a/src/frontend/src/stores/useWebSocketStore.ts
+++ b/src/frontend/src/stores/useWebSocketStore.ts
@@ -37,8 +37,8 @@ export const useWebSocketStore = create<WebSocketStore>((set, get) => ({
   connect: () => {
     if (get().client?.connected) {
       get().disconnect();
-      return;
     }
+    
     // 기존 소켓 정리
     if (get().socket) {
       get().socket?.close();
diff --git a/src/frontend/src/types/dto/Message.dto.ts b/src/frontend/src/types/dto/Message.dto.ts
deleted file mode 100644
index e48073cd..00000000
--- a/src/frontend/src/types/dto/Message.dto.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export interface SendMessageDto {
-  roomId: number;
-  userId: number;
-  content?: string;
-  message?: string;
-}
-
-export interface ReceiveMessageDto extends SendMessageDto {
-  timestamp: string;
-}
diff --git a/src/frontend/src/utils/dateUtils.ts b/src/frontend/src/utils/dateUtils.ts
index 4cb8d7c7..151304ab 100644
--- a/src/frontend/src/utils/dateUtils.ts
+++ b/src/frontend/src/utils/dateUtils.ts
@@ -1,11 +1,20 @@
 export const formatDateToKorean = (timestamp: string | number | Date): string => {
   const date = new Date(timestamp);
-  return date.toLocaleString('ko-KR', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-    hour12: false,
-  });
+  const today = new Date();
+
+  if (date.toDateString() === today.toDateString()) {
+    return date.toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', hour12: false });
+  } else {
+    const isCurrentYear = date.getFullYear() === today.getFullYear();
+    const formattedDate = isCurrentYear
+      ? `${(date.getMonth() + 1).toString().padStart(2, '0')}.${date.getDate().toString().padStart(2, '0')}`
+      : `${date.getFullYear()}.${(date.getMonth() + 1).toString().padStart(2, '0')}.${date.getDate().toString().padStart(2, '0')}`;
+
+    const formattedTime = date.toLocaleTimeString('ko-KR', {
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false,
+    });
+    return `${formattedDate} ${formattedTime}`;
+  }
 };