diff --git a/project/frontend/src/components/channel/ChannelMessageBox.tsx b/project/frontend/src/components/channel/ChannelMessageBox.tsx
index 88a94f91..b75c0373 100644
--- a/project/frontend/src/components/channel/ChannelMessageBox.tsx
+++ b/project/frontend/src/components/channel/ChannelMessageBox.tsx
@@ -1,8 +1,11 @@
-import { unwrap } from '@/api/unwrap';
 import { ApiContext } from '@/app/_internal/provider/ApiContext';
-import { useCallback, useContext } from 'react';
-import { useQuery } from 'react-query';
-import { MessageContent, messageType } from '../dm/message/MessageContent';
+import useChannelMessage from '@/hooks/chat/useChannel';
+import { useContext } from 'react';
+import {
+  MessageContent,
+  MessageContentInterface,
+  messageType,
+} from '../dm/message/MessageContent';
 import { MessageSendBox } from '../dm/message/MessageSendBox';
 import { ChannelInfo } from './ChannelInfo';
 
@@ -11,21 +14,15 @@ export function ChannleMessageBox({
 }: Readonly<{ channelId: string }>) {
   const { api } = useContext(ApiContext);
 
-  const { isLoading, isError, data } = useQuery(
-    'channelInfo',
-    useCallback(
-      async () => unwrap(await api.channelControllerFindChannelInfo(channelId)),
-      [api, channelId],
-    ),
-  );
+  const { channelInfo, isLoading, channelMessage } =
+    useChannelMessage(channelId);
 
   if (isLoading) return <div>Loading...</div>;
-  if (isError || !data) return <p>알 수 없는 에러</p>;
 
   const localMe = localStorage.getItem('me');
   const me = localMe ? JSON.parse(localMe) : null;
 
-  const myAuthority: any = data.members.filter((mem: any) => {
+  const myAuthority: any = channelInfo?.members.filter((mem: any) => {
     return mem.memberId === me?.id;
   });
   if (isLoading) return <div>Loading...</div>;
@@ -34,7 +31,7 @@ export function ChannleMessageBox({
     <>
       <ChannelInfo
         channelId={channelId}
-        channelData={data}
+        channelData={channelInfo}
         myAuthority={myAuthority[0]?.memberType}
         myNickname={me?.nickname}
       />
@@ -42,6 +39,7 @@ export function ChannleMessageBox({
         channelId={channelId}
         type={messageType.CHANNEL}
         myNickname={me?.nickname}
+        initData={channelMessage as MessageContentInterface[]}
       />
       <MessageSendBox channelId={channelId} type={messageType.CHANNEL} />
     </>
diff --git a/project/frontend/src/components/dm/message/MessageBox.tsx b/project/frontend/src/components/dm/message/MessageBox.tsx
index f4b5a5d2..b39c45cb 100644
--- a/project/frontend/src/components/dm/message/MessageBox.tsx
+++ b/project/frontend/src/components/dm/message/MessageBox.tsx
@@ -1,7 +1,4 @@
-import { unwrap } from '@/api/unwrap';
-import { ApiContext } from '@/app/_internal/provider/ApiContext';
-import { useCallback, useContext } from 'react';
-import { useQuery } from 'react-query';
+import useDirectMessage from '@/hooks/chat/useDirectMessage';
 import { MessageContent, messageType } from './MessageContent';
 import { MessageSendBox } from './MessageSendBox';
 import { UserInfo } from './UserInfo';
@@ -13,35 +10,32 @@ export function MessageBox({
   readonly username: string;
   readonly channelId: string;
 }) {
-  const { api } = useContext(ApiContext);
-  const { isLoading, isError, data } = useQuery(
-    'userByNickanme',
-    useCallback(
-      async () => unwrap(await api.usersControllerGetUsetByNickname(username)),
-      [api, username],
-    ),
+  const { isLoading, dmInfo, channelMessage } = useDirectMessage(
+    channelId,
+    username,
   );
 
-  if (isLoading) return <div>로딩중... 👾</div>;
-  if (isError || !data) return <p>알 수 없는 에러</p>;
+  if (isLoading || !dmInfo) return <div>로딩중... 👾</div>;
 
   const localMe = localStorage.getItem('me');
   const me = localMe ? JSON.parse(localMe) : null;
+  console.log(channelMessage);
   return (
     <>
       <UserInfo
-        imageUri={data.profileImageUrl}
-        username={data.nickname}
+        imageUri={dmInfo.profileImageUrl}
+        username={dmInfo.nickname}
         onActive={false}
-        targetId={data.id}
+        targetId={dmInfo.id}
       />
       <MessageContent
         type={messageType.DM}
         myNickname={me?.nickname}
         targetName={username}
         channelId={channelId}
+        initData={channelMessage}
       />
-      <MessageSendBox type={messageType.DM} targetUserId={data.id} />
+      <MessageSendBox type={messageType.DM} targetUserId={dmInfo.id} />
     </>
   );
 }
diff --git a/project/frontend/src/components/dm/message/MessageContent.tsx b/project/frontend/src/components/dm/message/MessageContent.tsx
index fd9ebb3e..4f80c134 100644
--- a/project/frontend/src/components/dm/message/MessageContent.tsx
+++ b/project/frontend/src/components/dm/message/MessageContent.tsx
@@ -1,5 +1,5 @@
-import { useInitMessage } from '@/hooks/useInitMessage';
-import { useSocket } from '@/hooks/useSocket';
+import useInfScroll from '@/hooks/chat/useInfScroll';
+import { useSocket } from '@/hooks/chat/useSocket';
 import { useEffect, useRef, useState } from 'react';
 import { MyChat } from './MyChat';
 import { OtherChat } from './OtherChat';
@@ -26,41 +26,69 @@ export interface MessageContentInterface {
 
 const isSystemMessage = (message: { type: string }) =>
   ['leave', 'join'].includes(message.type);
-const isMySessage = (
+const isMyMessage = (
   msg1: { data: { member: { nickname: string } } },
   msg2: { data: { member: { nickname: string } } },
 ) => msg1.data.member.nickname === msg2.data.member.nickname;
 const calIsFirst = (
-  mesaageList: { type: string; data: { member: { nickname: string } } }[],
+  messageList: { type: string; data: { member: { nickname: string } } }[],
   idx: number,
-) =>
-  idx === 0 ||
-  isSystemMessage(mesaageList[idx - 1]) ||
-  !isMySessage(mesaageList[idx - 1], mesaageList[idx]);
+): boolean => {
+  if (idx === 0) return true;
+  const targetIndex =
+    messageList[idx - 1].type === 'scroll-target' ? idx - 2 : idx - 1;
 
+  return (
+    isSystemMessage(messageList[targetIndex]) ||
+    !isMyMessage(messageList[targetIndex], messageList[idx])
+  );
+};
+
+let render = { isSocketRender: true };
 export function MessageContent({
   channelId,
   type,
   myNickname,
+  initData,
   targetName,
 }: Readonly<{
   channelId: string;
   type: messageType;
   myNickname: string;
+  initData: MessageContentInterface[];
   targetName?: string;
 }>) {
-  const [messages, setMessages] = useState<MessageContentInterface[]>([]);
-  const messageEndRef = useRef<HTMLDivElement>(null);
-  useInitMessage(type, setMessages, channelId, targetName);
-  useSocket(type, setMessages, channelId, targetName);
-
+  const [messages, setMessages] = useState<MessageContentInterface[]>(initData);
+  const [isLastPage, setIsLastPage] = useState<boolean>(false);
+  const scrollTargetRef = useRef<HTMLDivElement>(null);
+  const messageStartRef = useRef<HTMLDivElement>(null);
+  useSocket(type, setMessages, channelId, targetName, render);
+  useInfScroll(
+    messageStartRef,
+    setMessages,
+    messages,
+    type,
+    channelId,
+    isLastPage,
+    setIsLastPage,
+    render,
+    targetName,
+  );
+  useEffect(() => {
+    setMessages(initData);
+  }, [initData, channelId]);
   useEffect(() => {
-    messageEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    scrollTargetRef.current?.scrollIntoView({ behavior: 'auto' });
   }, [messages]);
-
+  render.isSocketRender = false;
+  console.log('messages : ', messages);
+  console.log('initmessage : ', initData);
   return (
     <div className="w-[95%] h-[610px] pt-[20px] bg-chat-color2 rounded-[10px] flex flex-col overflow-y-scroll mt-sm">
+      <div ref={messageStartRef} />
       {messages.map((message, idx) => {
+        if (message.type === 'scroll-target')
+          return <div key={crypto.randomUUID()} ref={scrollTargetRef} />;
         if (message.type === 'leave' || message.type === 'join') {
           return (
             <UserStateAnnounce
@@ -91,7 +119,6 @@ export function MessageContent({
           );
         }
       })}
-      <div ref={messageEndRef} />
     </div>
   );
 }
diff --git a/project/frontend/src/components/dm/message/MyChat.tsx b/project/frontend/src/components/dm/message/MyChat.tsx
index 40944b71..dbdbc316 100644
--- a/project/frontend/src/components/dm/message/MyChat.tsx
+++ b/project/frontend/src/components/dm/message/MyChat.tsx
@@ -9,8 +9,8 @@ export function MyChat({
   return (
     <div className=" pr-[3%] mb-[1.5%] flex flex-col">
       <p
-        className="p-[2%] text-left inline-block max-w-[35%] rounded-[20px]
-                break-words bg-white self-end min-w-[10%]"
+        className="p-[2%] text-left inline-block max-w-[200px] rounded-[20px]
+                break-words bg-white self-end min-w-[30px]"
       >
         {message}
       </p>
diff --git a/project/frontend/src/components/dm/message/OtherChat.tsx b/project/frontend/src/components/dm/message/OtherChat.tsx
index 5784d144..1d99c8a4 100644
--- a/project/frontend/src/components/dm/message/OtherChat.tsx
+++ b/project/frontend/src/components/dm/message/OtherChat.tsx
@@ -55,10 +55,10 @@ export function OtherChat({
           setGameMode={toggleGameMode}
         />
       </Portal>
-      <div className="flex flex-row pl-[3%] mb-[1.5%] items-center">
+      <div className="flex flex-row pl-[3%] mb-[1.5%]">
         {isFirst === true ? (
           <button
-            className="w-[50px] h-[50px] mb-[10px]"
+            className="w-[50px] h-[50px] mb-[10px] self-start"
             onClick={handleModalOpen}
           >
             <Image
@@ -80,8 +80,8 @@ export function OtherChat({
             ''
           )}
           <p
-            className={`p-[2%] text-left text-white inline-block max-w-[35%] rounded-[20px]
-                break-words bg-chat-color1 self-start min-w-[10%]`}
+            className={`p-[2%] text-left text-white inline-block max-w-[200px] rounded-[20px]
+                break-words bg-chat-color1 self-start min-w-[30px]`}
           >
             {message}
           </p>
diff --git a/project/frontend/src/components/dm/message/UserStateAnnounce.tsx b/project/frontend/src/components/dm/message/UserStateAnnounce.tsx
index 99e5775e..845d8ef6 100644
--- a/project/frontend/src/components/dm/message/UserStateAnnounce.tsx
+++ b/project/frontend/src/components/dm/message/UserStateAnnounce.tsx
@@ -11,14 +11,14 @@ export function UserStateAnnounce({
     <>
       {userState === UserState.LEAVE ? (
         <p
-          className="w-[480px] h-[25px] bg-light-background rounded-md
+          className="w-[460px] h-[25px] bg-light-background rounded-md
          text-dark-gray self-center text-center text-[15px] mb-[10px]"
         >
           {nickname} 님이 나갔습니다.
         </p>
       ) : (
         <p
-          className="w-[480px] h-[25px] bg-light-background rounded-md
+          className="w-[460px] h-[25px] bg-light-background rounded-md
           text-dark-gray self-center text-center text-[15px] mb-[10px]"
         >
           {nickname} 님이 들어왔습니다.
diff --git a/project/frontend/src/hooks/chat/useChannel.ts b/project/frontend/src/hooks/chat/useChannel.ts
new file mode 100644
index 00000000..05f5cb08
--- /dev/null
+++ b/project/frontend/src/hooks/chat/useChannel.ts
@@ -0,0 +1,42 @@
+import { unwrap } from '@/api/unwrap';
+import { ApiContext } from '@/app/_internal/provider/ApiContext';
+import { useCallback, useContext } from 'react';
+import { useQueries } from 'react-query';
+import { DEFAULT_PAGE_SIZE } from './useInfScroll';
+
+export default function useChannelMessage(channelId: string) {
+  const { api } = useContext(ApiContext);
+  const channelInfoFn = useCallback(
+    async () => unwrap(await api.channelControllerFindChannelInfo(channelId)),
+    [api, channelId],
+  );
+  const initialData = useCallback(async () => {
+    const query = {
+      pageSize: DEFAULT_PAGE_SIZE,
+    };
+    return unwrap(
+      await api.channelControllerGetChannelMessages(channelId, query),
+    );
+  }, [api, channelId]);
+  const data = useQueries([
+    { queryKey: 'channelInfo', queryFn: channelInfoFn },
+    { queryKey: 'channelMessage', queryFn: initialData },
+  ]);
+  const isLoading = data.some((d: any) => d.isLoading);
+  if (isLoading) return { isLoading: true };
+
+  const channelMessage: any = data[1].data;
+  if (
+    channelMessage.length > 0 &&
+    channelMessage[channelMessage.length - 1].type !== 'scroll-target'
+  ) {
+    channelMessage.push({
+      type: 'scroll-target',
+    });
+  }
+  return {
+    isLoading: isLoading,
+    channelInfo: data[0].data,
+    channelMessage,
+  };
+}
diff --git a/project/frontend/src/hooks/chat/useDirectMessage.ts b/project/frontend/src/hooks/chat/useDirectMessage.ts
new file mode 100644
index 00000000..3f76b6b5
--- /dev/null
+++ b/project/frontend/src/hooks/chat/useDirectMessage.ts
@@ -0,0 +1,45 @@
+import { unwrap } from '@/api/unwrap';
+import { ApiContext } from '@/app/_internal/provider/ApiContext';
+import { useCallback, useContext } from 'react';
+import { useQueries } from 'react-query';
+import { DEFAULT_PAGE_SIZE } from './useInfScroll';
+
+export default function useDirectMessage(
+  channelId: string,
+  targetName: string,
+) {
+  const { api } = useContext(ApiContext);
+  const dmInfoFn = useCallback(
+    async () => unwrap(await api.usersControllerGetUsetByNickname(targetName)),
+    [api, targetName],
+  );
+  const initialData = useCallback(async () => {
+    const query = {
+      pageSize: DEFAULT_PAGE_SIZE,
+    };
+    return unwrap(
+      await api.dmControllerGetDmChannelMessages(targetName, query),
+    );
+  }, [api, targetName]);
+  const data = useQueries([
+    { queryKey: 'userByNickanme', queryFn: dmInfoFn, cacheTime: 0 },
+    { queryKey: 'channelMessage', queryFn: initialData, cacheTime: 0 },
+  ]);
+  const isLoading = data.some((d: any) => d.isLoading);
+  if (isLoading) return { isLoading: true };
+  const channelMessage: any = data[1].data;
+
+  if (
+    channelMessage.length > 0 &&
+    channelMessage[channelMessage.length - 1].type !== 'scroll-target'
+  ) {
+    channelMessage.push({
+      type: 'scroll-target',
+    });
+  }
+  return {
+    isLoading: isLoading,
+    dmInfo: data[0].data,
+    channelMessage,
+  };
+}
diff --git a/project/frontend/src/hooks/chat/useInfScroll.ts b/project/frontend/src/hooks/chat/useInfScroll.ts
new file mode 100644
index 00000000..f3a67ce4
--- /dev/null
+++ b/project/frontend/src/hooks/chat/useInfScroll.ts
@@ -0,0 +1,81 @@
+import { QueryParamsType } from '@/api/api';
+import { ApiContext } from '@/app/_internal/provider/ApiContext';
+import {
+  MessageContentInterface,
+  messageType,
+} from '@/components/dm/message/MessageContent';
+import { useCallback, useContext, useEffect } from 'react';
+
+export const DEFAULT_PAGE_SIZE = 10;
+export default function useInfScroll(
+  messageStartRef: any,
+  setMessages: (arg: any) => void,
+  messages: MessageContentInterface[],
+  type: messageType,
+  channelId: string,
+  isLastPage: boolean,
+  setIsLastPage: (arg: boolean) => void,
+  render: any,
+  targetName?: string,
+) {
+  const { api } = useContext(ApiContext);
+
+  const loadMoreMessages = useCallback(async () => {
+    if (messages.length === 0) return;
+    const lastCursor = messages[0].data.sentAt;
+    console.log('loadMoreMessages');
+    console.log('lastCursor', lastCursor);
+    const queryRequest: QueryParamsType = {
+      pageSize: DEFAULT_PAGE_SIZE,
+      cursorTimestamp: lastCursor,
+    };
+    let res: any;
+    if (type === messageType.DM) {
+      if (targetName === undefined) return;
+      res = await api.dmControllerGetDmChannelMessages(
+        targetName,
+        queryRequest,
+      );
+    } else {
+      res = await api.channelControllerGetChannelMessages(
+        channelId,
+        queryRequest,
+      );
+    }
+    if (res.data.length === 0) setIsLastPage(true);
+    else {
+      setMessages((prevState: MessageContentInterface[]) => {
+        const prevData = prevState.filter(
+          (data) => data.type !== 'scroll-target',
+        );
+        res.data.push({
+          type: 'scroll-target',
+        });
+        return [...res.data, ...prevData];
+      });
+    }
+  }, [channelId, messages, api, setMessages, setIsLastPage, targetName, type]);
+
+  useEffect(() => {
+    var options = {
+      root: null,
+      rootMargin: '20px',
+      threshold: 1.0,
+    };
+
+    const observer = new IntersectionObserver(handleObserver, options);
+    if (messageStartRef.current) {
+      observer.observe(messageStartRef.current);
+    }
+
+    function handleObserver(entities: any, observer: any) {
+      const target = entities[0];
+      if (target.isIntersecting) {
+        if (isLastPage || render.isSocketRender) return;
+        loadMoreMessages();
+      }
+    }
+
+    return () => observer.disconnect();
+  }, [messageStartRef, channelId, loadMoreMessages, isLastPage, render]);
+}
diff --git a/project/frontend/src/hooks/useInitMessage.ts b/project/frontend/src/hooks/chat/useInitMessage.ts
similarity index 100%
rename from project/frontend/src/hooks/useInitMessage.ts
rename to project/frontend/src/hooks/chat/useInitMessage.ts
diff --git a/project/frontend/src/hooks/useSocket.ts b/project/frontend/src/hooks/chat/useSocket.ts
similarity index 75%
rename from project/frontend/src/hooks/useSocket.ts
rename to project/frontend/src/hooks/chat/useSocket.ts
index 58789148..5fbb39bd 100644
--- a/project/frontend/src/hooks/useSocket.ts
+++ b/project/frontend/src/hooks/chat/useSocket.ts
@@ -1,23 +1,39 @@
 import useToast from '@/components/common/useToast';
-import { messageType } from '@/components/dm/message/MessageContent';
+import {
+  MessageContentInterface,
+  messageType,
+} from '@/components/dm/message/MessageContent';
 import { getSocket } from '@/lib/Socket';
 import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
 
 export const useSocket = (
-  type: messageType,
+  type: any,
   setMessages: any,
   channelId: string,
   targetName: string | undefined,
+  render: object,
 ) => {
   const router = useRouter();
   const { openMessage } = useToast();
-
   useEffect(() => {
     const socket = getSocket();
     const localMe = localStorage.getItem('me');
     const me = localMe ? JSON.parse(localMe) : null;
 
+    const setMessageWithScrollTarget = (
+      render: any,
+      setMessages: any,
+      res: any,
+    ) => {
+      render.isSocketRender = true;
+      setMessages((prevState: MessageContentInterface[]) => {
+        const prevData = prevState.filter(
+          (data) => data.type !== 'scroll-target',
+        );
+        return [...prevData, res, { type: 'scroll-target' }];
+      });
+    };
 
     const handleDirectMessage = (
       socket: any,
@@ -26,7 +42,7 @@ export const useSocket = (
     ) => {
       socket.on(`directMessage`, (res: any) => {
         if (res.data.channelId === channelId)
-          setMessages((messages: any) => [...messages, res]);
+          setMessageWithScrollTarget(render, setMessages, res);
       });
     };
 
@@ -37,7 +53,7 @@ export const useSocket = (
     ) => {
       socket.on(`channelMessage`, (res: any) => {
         if (res.data.channelId === channelId) {
-          setMessages((messages: any) => [...messages, res]);
+          setMessageWithScrollTarget(render, setMessages, res);
         }
       });
     };
@@ -53,14 +69,14 @@ export const useSocket = (
           openMessage('채널에서 나갔습니다!');
           router.replace('/channel');
         } else {
-          setMessages((messages: any) => [...messages, res]);
+          setMessageWithScrollTarget(render, setMessages, res);
         }
       });
     };
 
     const handleJoin = (socket: any, setMessages: any) => {
       socket.on('join', (res: any) => {
-        setMessages((messages: any) => [...messages, res]);
+        setMessageWithScrollTarget(render, setMessages, res);
       });
     };
 
@@ -73,7 +89,10 @@ export const useSocket = (
       socket.on('kickBanPromote', (res: any) => {
         const targetUserId = res.data.targetUser.id;
 
-        if (res.data.actionType === 'KICK' || res.data.actionType === 'BANNED') {
+        if (
+          res.data.actionType === 'KICK' ||
+          res.data.actionType === 'BANNED'
+        ) {
           if (targetUserId === meId && channelId === res.data.channelId) {
             if (res.data.actionType === 'KICK') {
               openMessage('방장이 나가라고 합니다!');
@@ -112,5 +131,5 @@ export const useSocket = (
       socket.off('join');
       socket.off('kickBanPromote');
     };
-  }, [type, setMessages, channelId, router, openMessage, targetName]);
+  }, [type, setMessages, channelId, router, targetName, render, openMessage]);
 };