diff --git a/src/app/message/chat/page.tsx b/src/app/message/chat/page.tsx
deleted file mode 100644
index 70146172..00000000
--- a/src/app/message/chat/page.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { TabNavigation } from '@/components/shared';
-
-const SOCIAL_TABS = [
-  { label: '팔로잉', value: 'following' },
-  { label: '메세지', value: 'chat' },
-];
-
-export default function ChatPage() {
-  return (
-    <div className='min-h-screen bg-[#F1F5F9]'>
-      <TabNavigation basePath='/message' tabs={SOCIAL_TABS} />
-      <section className='flex w-full flex-col gap-4 px-4 py-4'>
-        <h2 className='text-h2-bold'>채팅 페이지</h2>
-      </section>
-    </div>
-  );
-}
diff --git a/src/app/message/page.tsx b/src/app/message/page.tsx
index 8ae33d94..b8585d40 100644
--- a/src/app/message/page.tsx
+++ b/src/app/message/page.tsx
@@ -1,4 +1,8 @@
-import { FollowingList, FollowingSearch } from '@/components/pages/message';
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+
+import { Chat, FollowingList, FollowingSearch } from '@/components/pages/message';
 import { TabNavigation } from '@/components/shared';
 
 const SOCIAL_TABS = [
@@ -28,11 +32,19 @@ const FOLLOWING_LIST = [
 ];
 
 export default function FollowingPage() {
+  const params = useSearchParams();
+  const tab = params.get('tab') || 'following';
   return (
     <div className='min-h-screen bg-[#F1F5F9]'>
       <TabNavigation basePath='/message' tabs={SOCIAL_TABS} />
-      <FollowingSearch />
-      <FollowingList items={FOLLOWING_LIST} />
+
+      {tab === 'chat' && <Chat />}
+      {tab === 'following' && (
+        <>
+          <FollowingSearch />
+          <FollowingList items={FOLLOWING_LIST} />
+        </>
+      )}
     </div>
   );
 }
diff --git a/src/components/pages/message/chat/index.tsx b/src/components/pages/message/chat/index.tsx
new file mode 100644
index 00000000..dc5cb065
--- /dev/null
+++ b/src/components/pages/message/chat/index.tsx
@@ -0,0 +1,3 @@
+export const Chat = () => {
+  return <>채팅 컴포넌트</>;
+};
diff --git a/src/components/pages/message/index.ts b/src/components/pages/message/index.ts
index 9181d2e2..0573a09a 100644
--- a/src/components/pages/message/index.ts
+++ b/src/components/pages/message/index.ts
@@ -1,3 +1,4 @@
+export { Chat } from './chat';
 export { FollowingCard } from './message-following-card';
 export { FollowingList } from './message-following-list';
 export { FollowingSearch } from './message-following-search';
diff --git a/src/components/pages/message/message-following-search/index.tsx b/src/components/pages/message/message-following-search/index.tsx
index df443812..990fdcc0 100644
--- a/src/components/pages/message/message-following-search/index.tsx
+++ b/src/components/pages/message/message-following-search/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import { Icon } from '@/components/icon';
-import { Button, ModalContent, ModalTitle, useModal } from '@/components/ui';
+import { Button, Input, ModalContent, ModalTitle, useModal } from '@/components/ui';
 
 const FollowerModal = () => {
   const { close } = useModal();
@@ -15,8 +15,9 @@ const FollowerModal = () => {
   return (
     <ModalContent>
       <ModalTitle className='mb-3'>팔로우 할 닉네임을 입력하세요</ModalTitle>
-      <input
+      <Input
         className='text-text-sm-medium mb-3 w-full rounded-3xl bg-gray-100 px-4 py-2.5 text-gray-800'
+        iconButton={<Icon id='search' className='absolute top-2.5 right-3 size-5 text-gray-500' />}
         placeholder='nickname'
         onKeyDown={(e) => {
           if (e.key === 'Enter') {