diff --git a/src/App.tsx b/src/App.tsx
index 6dc7e6d..a701b87 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -98,10 +98,10 @@ function App() {
               <Route path="clubs">
                 <Route index element={<ClubList />} />
                 <Route path="search" element={<ClubSearch />} />
-                <Route path=":clubId" element={<ClubDetail />} />
               </Route>
             </Route>
             <Route element={<Layout />}>
+              <Route path="clubs/:clubId" element={<ClubDetail />} />
               <Route path="clubs/:clubId/applications" element={<ApplicationPage />} />
               <Route path="clubs/:clubId/fee" element={<ClubFeePage />} />
               <Route path="clubs/:clubId/complete" element={<ApplyCompletePage />} />
diff --git a/src/assets/svg/chat-send-arrow.svg b/src/assets/svg/chat-send-arrow.svg
new file mode 100644
index 0000000..929e885
--- /dev/null
+++ b/src/assets/svg/chat-send-arrow.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M11.25 17.6538V8.10775L7.4 11.9577L6.34625 10.9038L12 5.25L17.6538 10.9038L16.6 11.9577L12.75 8.10775V17.6538H11.25Z"
+    fill="currentColor"
+  />
+</svg>
diff --git a/src/components/layout/Header/components/ChatHeader.tsx b/src/components/layout/Header/components/ChatHeader.tsx
index 3c045f4..c68ab35 100644
--- a/src/components/layout/Header/components/ChatHeader.tsx
+++ b/src/components/layout/Header/components/ChatHeader.tsx
@@ -21,24 +21,16 @@ function ChatHeader() {
 
   return (
     <>
-      <header className="fixed top-0 right-0 left-0 z-30 flex h-11 items-center justify-center bg-white px-4 py-2">
-        <button
-          type="button"
-          aria-label="뒤로가기"
-          onClick={smartBack}
-          className="absolute top-1/2 left-4 -translate-y-1/2"
-        >
-          <ChevronLeftIcon />
-        </button>
+      <header className="fixed top-0 right-0 left-0 z-30 flex h-11 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>
 
-        <span className="text-lg">{chatRoom?.roomName ?? ''}</span>
+          <span className="truncate text-[18px] leading-5 font-normal text-indigo-700">{chatRoom?.roomName ?? ''}</span>
+        </div>
 
-        <button
-          type="button"
-          aria-label="채팅방 정보 열기"
-          onClick={openSidebar}
-          className="absolute top-1/2 right-4 -translate-y-1/2"
-        >
+        <button type="button" aria-label="채팅방 정보 열기" onClick={openSidebar} className="ml-3 shrink-0">
           <HamburgerIcon />
         </button>
       </header>
diff --git a/src/components/layout/Header/headerConfig.ts b/src/components/layout/Header/headerConfig.ts
index a0b8983..82a1f18 100644
--- a/src/components/layout/Header/headerConfig.ts
+++ b/src/components/layout/Header/headerConfig.ts
@@ -5,6 +5,10 @@ export const HEADER_CONFIGS: HeaderConfig[] = [
     type: 'none',
     match: (pathname) => pathname === '/',
   },
+  {
+    type: 'default',
+    match: (pathname) => /^\/clubs\/\d+$/.test(pathname),
+  },
   {
     type: 'profile',
     match: (pathname) => pathname === '/mypage',
diff --git a/src/components/layout/Header/routeTitles.ts b/src/components/layout/Header/routeTitles.ts
index 2fc300b..aacc14c 100644
--- a/src/components/layout/Header/routeTitles.ts
+++ b/src/components/layout/Header/routeTitles.ts
@@ -48,10 +48,6 @@ export const ROUTE_TITLES: RouteTitle[] = [
     match: (pathname) => pathname.startsWith('/clubs/search'),
     title: '동아리 검색',
   },
-  {
-    match: (pathname) => pathname === '/chats',
-    title: '채팅방',
-  },
   {
     match: (pathname) => pathname === '/council',
     title: '총동아리연합회',
diff --git a/src/pages/Chat/ChatRoom.tsx b/src/pages/Chat/ChatRoom.tsx
index f8a7602..6472098 100644
--- a/src/pages/Chat/ChatRoom.tsx
+++ b/src/pages/Chat/ChatRoom.tsx
@@ -1,9 +1,10 @@
 import { useEffect, useRef, useState } from 'react';
-import clsx from 'clsx';
 import { useParams } from 'react-router-dom';
-import PaperPlaneIcon from '@/assets/svg/paper-plane.svg';
+import type { ChatMessage } from '@/apis/chat/entity';
+import SendArrowIcon from '@/assets/svg/chat-send-arrow.svg';
 import LinkifiedText from '@/components/common/LinkifiedText';
 import useKeyboardHeight from '@/utils/hooks/useViewportHeight';
+import { cn } from '@/utils/ts/cn';
 import useChat from './hooks/useChat';
 import useChatRoomScroll from './hooks/useChatRoomScroll';
 
@@ -23,6 +24,58 @@ const formatTime = (dateString: string) => {
   return `${hour}:${minute}`;
 };
 
+interface ChatMessageRowProps {
+  isGroup: boolean;
+  isSameSender: boolean;
+  message: ChatMessage;
+}
+
+function ChatMessageRow({ isGroup, isSameSender, message }: ChatMessageRowProps) {
+  const showSenderName = isGroup && !message.isMine && !isSameSender;
+  const formattedTime = formatTime(message.createdAt);
+  const formattedUnreadCount = message.unreadCount > 0 ? String(message.unreadCount) : null;
+
+  if (message.isMine) {
+    return (
+      <div className="flex justify-end px-6 py-2">
+        <div className="flex max-w-full items-end gap-2">
+          {formattedUnreadCount && (
+            <span className="text-primary-500 text-[10px] leading-[1.6] font-medium">{formattedUnreadCount}</span>
+          )}
+          <span className="text-[10px] leading-[1.6] font-medium text-indigo-100">{formattedTime}</span>
+
+          <div className="bg-primary-500/80 text-sub4 max-w-[78%] rounded-2xl px-3 py-2 text-white shadow-[0_0_3px_rgba(0,0,0,0.15)]">
+            <LinkifiedText
+              text={message.content}
+              className="wrap-anywhere whitespace-pre-wrap"
+              linkClassName="text-white underline"
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="px-6 py-2">
+      <div className="max-w-full">
+        {showSenderName && <div className="text-sub4 text-text-400 mb-1 px-3">{message.senderName}</div>}
+
+        <div className="flex items-end gap-2">
+          <div className="bg-indigo-5 text-sub4 max-w-[78%] rounded-2xl px-3 py-2 text-black">
+            <LinkifiedText
+              text={message.content}
+              className="wrap-anywhere whitespace-pre-wrap"
+              linkClassName="text-primary-500 underline"
+            />
+          </div>
+          <span className="shrink-0 text-[10px] leading-[1.6] font-medium text-indigo-100">{formattedTime}</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function ChatRoom() {
   const { chatRoomId } = useParams();
   const { sendMessage, chatMessages, fetchNextPage, hasNextPage, isFetchingNextPage, chatRoomList, isSendingMessage } =
@@ -47,6 +100,16 @@ function ChatRoom() {
   const isGroup = currentRoom?.chatType === 'GROUP';
 
   const sortedMessages = [...chatMessages].reverse();
+  const isSubmitDisabled = isSendingMessage || !value.trim();
+
+  const resetTextareaHeight = () => {
+    if (!textareaRef.current) return;
+
+    textareaRef.current.style.height = 'auto';
+    const baseHeight = baseTextareaHeightRef.current || textareaRef.current.scrollHeight;
+    baseTextareaHeightRef.current = baseHeight;
+    textareaRef.current.style.height = `${baseHeight}px`;
+  };
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
@@ -61,8 +124,6 @@ function ChatRoom() {
 
     setValue('');
     if (textareaRef.current) {
-      const baseHeight = baseTextareaHeightRef.current || textareaRef.current.scrollHeight;
-      textareaRef.current.style.height = `${baseHeight}px`;
       textareaRef.current.focus();
     }
     scrollToBottom();
@@ -81,18 +142,20 @@ function ChatRoom() {
   };
 
   useEffect(() => {
-    if (!textareaRef.current) return;
-
-    textareaRef.current.style.height = 'auto';
-    baseTextareaHeightRef.current = textareaRef.current.scrollHeight;
-    textareaRef.current.style.height = `${baseTextareaHeightRef.current}px`;
+    resetTextareaHeight();
   }, []);
 
+  useEffect(() => {
+    if (!value) {
+      resetTextareaHeight();
+    }
+  }, [value]);
+
   return (
-    <div className="bg-indigo-0 flex min-h-0 flex-1 flex-col">
+    <div className="flex min-h-0 flex-1 flex-col bg-white">
       <div
         ref={scrollContainerRef}
-        className="bg-indigo-0 min-h-0 flex-1 overflow-x-hidden overflow-y-auto overscroll-contain pb-4"
+        className="min-h-0 flex-1 overflow-x-hidden overflow-y-auto overscroll-contain py-3"
       >
         <div ref={topRef} />
 
@@ -106,91 +169,42 @@ function ChatRoom() {
           const isSameSender = prevMessage?.senderId === message.senderId && !showDateHeader;
 
           return (
-            <div
-              key={message.messageId}
-              className={clsx('w-full min-w-0 px-6', showDateHeader ? 'mt-4' : isSameSender ? 'mt-1' : 'mt-3')}
-            >
+            <div key={message.messageId} className="w-full min-w-0">
               {showDateHeader && (
-                <div className="flex justify-center py-3">
-                  <span className="bg-indigo-25 text-primary rounded-full px-3 py-1 text-xs">
+                <div className={cn('flex justify-center px-6', index === 0 ? 'pb-2' : 'pt-4 pb-2')}>
+                  <span className="text-text-400 text-sub4 rounded-2xl bg-white px-3 py-1">
                     {formatDate(message.createdAt)}
                   </span>
                 </div>
               )}
 
-              <div className={clsx('flex w-full min-w-0 items-end', message.isMine ? 'justify-end' : 'justify-start')}>
-                {!message.isMine && (
-                  <div className="flex max-w-full min-w-0 flex-col">
-                    {isGroup && !isSameSender && (
-                      <div className="text-body3 mb-1 pl-10 text-indigo-400">{message.senderName}</div>
-                    )}
-
-                    <div className="flex min-w-0 items-start gap-2">
-                      {isGroup && (
-                        <div className="w-8 shrink-0">
-                          {!isSameSender ? (
-                            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-300 text-xs">
-                              {message.senderName?.[0]}
-                            </div>
-                          ) : (
-                            <div className="h-8 w-8" />
-                          )}
-                        </div>
-                      )}
-
-                      <div className="bg-info-100 text-body1 rounded-lg px-3 py-2 wrap-anywhere whitespace-pre-wrap">
-                        <LinkifiedText text={message.content} />
-                      </div>
-
-                      <div className="flex shrink-0 flex-col items-start gap-0.5 self-end">
-                        {message.unreadCount > 0 && (
-                          <span className="text-cap2 text-info-600 font-medium">{message.unreadCount}</span>
-                        )}
-                        <span className="text-cap2 text-indigo-300">{formatTime(message.createdAt)}</span>
-                      </div>
-                    </div>
-                  </div>
-                )}
-
-                {/* ===== RIGHT (내 메시지) ===== */}
-                {message.isMine && (
-                  <div className="flex max-w-full min-w-0 flex-row-reverse items-end gap-2">
-                    <div className="bg-indigo-5 text-body1 rounded-lg px-3 py-2 wrap-anywhere whitespace-pre-wrap">
-                      <LinkifiedText text={message.content} />
-                    </div>
-
-                    <div className="flex shrink-0 flex-col items-end self-end">
-                      {message.unreadCount > 0 && (
-                        <span className="text-cap2 text-info-600 font-medium">{message.unreadCount}</span>
-                      )}
-                      <span className="text-cap2 text-indigo-300">{formatTime(message.createdAt)}</span>
-                    </div>
-                  </div>
-                )}
-              </div>
+              <ChatMessageRow isGroup={isGroup} isSameSender={isSameSender} message={message} />
             </div>
           );
         })}
       </div>
 
-      <form onSubmit={handleSubmit} className="bg-indigo-25 flex min-w-0 shrink-0 items-end gap-2 px-5 py-2">
-        <textarea
-          ref={textareaRef}
-          value={value}
-          onChange={handleInputChange}
-          className="bg-indigo-0 max-h-32 min-w-0 flex-1 resize-none overflow-x-hidden rounded-sm px-3 py-2 text-sm wrap-anywhere whitespace-pre-wrap text-indigo-700 placeholder:text-indigo-500"
-          rows={1}
-          placeholder="메세지 보내기"
-          maxLength={1000}
-        />
-
-        <button
-          type="submit"
-          disabled={isSendingMessage || !value.trim()}
-          className="bg-primary flex h-9 w-9 shrink-0 items-center justify-center rounded-sm disabled:opacity-50"
-        >
-          <PaperPlaneIcon className="text-indigo-0" />
-        </button>
+      <form onSubmit={handleSubmit} className="shrink-0 bg-white px-5 pt-3 pb-[calc(22px+var(--sab))]">
+        <div className="bg-text-100 flex min-w-0 items-end gap-3 rounded-[30px] px-4 py-3">
+          <textarea
+            ref={textareaRef}
+            value={value}
+            onChange={handleInputChange}
+            aria-label="메시지 입력"
+            className="text-text-600 text-sub4 placeholder:text-text-300 max-h-32 min-h-6 min-w-0 flex-1 resize-none overflow-x-hidden bg-transparent py-1 wrap-anywhere whitespace-pre-wrap outline-none"
+            rows={1}
+            maxLength={1000}
+          />
+
+          <button
+            type="submit"
+            aria-label="메시지 전송"
+            disabled={isSubmitDisabled}
+            className="text-text-600 disabled:text-text-300 flex size-6 shrink-0 items-center justify-center"
+          >
+            <SendArrowIcon className="size-6" />
+          </button>
+        </div>
       </form>
     </div>
   );
diff --git a/src/pages/Chat/index.tsx b/src/pages/Chat/index.tsx
index 89b0b97..64a55ba 100644
--- a/src/pages/Chat/index.tsx
+++ b/src/pages/Chat/index.tsx
@@ -1,77 +1,112 @@
 import { Link } from 'react-router-dom';
-import BellOfIcon from '@/assets/svg/bell-off.svg';
+import type { Room } from '@/apis/chat/entity';
+import BellOffIcon from '@/assets/svg/bell-off.svg';
+import PersonIcon from '@/assets/svg/person.svg';
 import useChat from './hooks/useChat';
 
+const DEFAULT_LAST_MESSAGE = '동아리에 궁금한 점을 물어보세요';
+
+const formatTime = (timeString: string) => {
+  const timeMatch = timeString.match(/(\d{1,2}):(\d{2})/);
+
+  if (!timeMatch) {
+    return '';
+  }
+
+  const hour = Number(timeMatch[1]);
+  const minute = Number(timeMatch[2]);
+  const period = hour < 12 ? '오전' : '오후';
+  const displayHour = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
+
+  return `${period} ${displayHour}:${String(minute).padStart(2, '0')}`;
+};
+
+function ChatRoomAvatar({ roomImageUrl }: Pick<Room, 'roomImageUrl'>) {
+  if (roomImageUrl) {
+    return (
+      <img
+        src={roomImageUrl}
+        alt=""
+        aria-hidden="true"
+        className="border-indigo-5 size-12 shrink-0 rounded-full border object-cover"
+      />
+    );
+  }
+
+  return (
+    <div className="bg-indigo-5 flex size-12 shrink-0 items-center justify-center rounded-full" aria-hidden="true">
+      <PersonIcon className="size-6 text-white" />
+    </div>
+  );
+}
+
+function ChatRoomListItem({ room }: { room: Room }) {
+  const isGroup = room.chatType === 'GROUP';
+  const hasUnreadMessage = room.unreadCount > 0;
+  const previewMessage = room.lastMessage?.trim() || DEFAULT_LAST_MESSAGE;
+
+  return (
+    <Link
+      to={`${room.roomId}`}
+      className="active:bg-indigo-5 flex items-center gap-3 bg-white px-5 py-3 transition-colors"
+    >
+      <ChatRoomAvatar roomImageUrl={room.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>
+
+            {isGroup && (
+              <span className="bg-primary-500 inline-flex shrink-0 items-center justify-center rounded-[50px] px-1 py-0.5 text-[12px] leading-3 font-medium text-white">
+                단체
+              </span>
+            )}
+
+            {room.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>
+          )}
+        </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 block size-2 rounded-full" />
+              <span className="sr-only">{`읽지 않은 메시지 ${room.unreadCount}개`}</span>
+            </span>
+          )}
+        </div>
+      </div>
+    </Link>
+  );
+}
+
 function ChatListPage() {
   const { chatRoomList } = useChat();
 
-  const formatTime = (timeString: string) => {
-    const timePart = timeString.split(' ')[1];
-    const [hour, minute] = timePart.split(':').map(Number);
-    const period = hour < 12 ? '오전' : '오후';
-    const displayHour = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
-    return `${period} ${displayHour}:${String(minute).padStart(2, '0')}`;
-  };
-
   if (chatRoomList.rooms.length === 0) {
     return (
-      <div className="bg-indigo-0 flex min-h-0 flex-1 flex-col items-center justify-center py-3">
-        <div className="text-sm text-gray-500">채팅방이 없어요</div>
-        <div className="mt-1 text-xs text-gray-400">동아리에 문의하면 채팅이 시작돼요</div>
+      <div className="bg-indigo-0 flex min-h-0 flex-1 flex-col items-center justify-center px-6 py-3 text-center">
+        <div className="text-sub2 text-text-700">채팅방이 없어요</div>
+        <div className="text-body3 text-text-500 mt-1">동아리에 문의하면 채팅이 시작돼요</div>
       </div>
     );
   }
 
   return (
-    <div className="bg-indigo-0 flex min-h-0 flex-1 flex-col py-3">
-      {chatRoomList.rooms.map((room) => {
-        const isGroup = room.chatType === 'GROUP';
-
-        return (
-          <Link
-            to={`${room.roomId}`}
-            key={room.roomId}
-            className="active:bg-indigo-5 bg-indigo-0 flex items-center gap-3 px-5 py-4"
-          >
-            <img
-              src={room.roomImageUrl}
-              alt={room.roomName}
-              className={`h-11 w-11 shrink-0 rounded-full border ${isGroup ? 'border-primary' : 'border-indigo-5'}`}
-            />
-
-            <div className="flex min-w-0 flex-1 flex-col gap-2">
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-2">
-                  <div className="text-sm leading-4 font-bold text-indigo-700">{room.roomName}</div>
-
-                  {isGroup && <span className="bg-primary text-cap2 rounded px-1.5 py-0.5 text-white">단체</span>}
-                  {room.isMuted && (
-                    <span className="text-xs text-gray-400">
-                      <BellOfIcon className="h-4 w-4" />
-                    </span>
-                  )}
-                </div>
-
-                <div className="shrink-0 text-xs leading-3.5 font-medium text-indigo-300">
-                  {room.lastSentAt ? formatTime(room.lastSentAt) : ''}
-                </div>
-              </div>
-
-              <div className="flex items-center justify-between gap-2">
-                <div className="max-w-[80%] min-w-0 truncate text-xs leading-3.5 font-medium text-indigo-300">
-                  {room.lastMessage ?? '동아리에 궁금한 점을 물어보세요'}
-                </div>
-
-                {room.unreadCount > 0 && (
-                  <div className="text-indigo-0 min-w-5 shrink-0 rounded-full bg-[#3182f6] px-1 py-0.5 text-center">
-                    {room.unreadCount}
-                  </div>
-                )}
-              </div>
-            </div>
-          </Link>
-        );
-      })}
+    <div className="flex min-h-0 flex-1 flex-col bg-white py-3">
+      {chatRoomList.rooms.map((room) => (
+        <ChatRoomListItem key={room.roomId} room={room} />
+      ))}
     </div>
   );
 }
diff --git a/src/pages/Club/Application/components/AccountInfo.tsx b/src/pages/Club/Application/components/AccountInfo.tsx
index 8f47ee6..a5bf346 100644
--- a/src/pages/Club/Application/components/AccountInfo.tsx
+++ b/src/pages/Club/Application/components/AccountInfo.tsx
@@ -41,7 +41,7 @@ function AccountInfoCard({ accountInfo }: AccountInfoCardProps) {
             showToast('복사에 실패했습니다');
           }
         }}
-        className="bg-primary text-indigo-0 flex items-center justify-center gap-1.5 rounded-sm py-3 text-xs font-medium disabled:opacity-50"
+        className="bg-primary-500 text-indigo-0 flex items-center justify-center gap-1.5 rounded-sm py-3 text-xs font-medium disabled:opacity-50"
       >
         <CopyIcon /> 계좌번호 복사하기
       </button>
diff --git a/src/pages/Club/ClubDetail/components/ClubIntro.tsx b/src/pages/Club/ClubDetail/components/ClubIntro.tsx
index 45db858..9ab1329 100644
--- a/src/pages/Club/ClubDetail/components/ClubIntro.tsx
+++ b/src/pages/Club/ClubDetail/components/ClubIntro.tsx
@@ -61,7 +61,7 @@ function ClubIntro({ clubDetail }: ClubIntroProps) {
           type="button"
           onClick={handleInquireClick}
           disabled={isCreatingChatRoom}
-          className="bg-primary text-body3 flex items-center justify-center gap-1 rounded-sm py-3 text-white"
+          className="bg-primary-500 text-body3 flex items-center justify-center gap-1 rounded-sm py-3 text-white"
         >
           <PaperPlaneIcon className="text-white" />
           {isCreatingChatRoom ? '이동 중...' : '문의하기'}
diff --git a/src/pages/Club/ClubDetail/components/ClubMember.tsx b/src/pages/Club/ClubDetail/components/ClubMember.tsx
index 7813bff..12c5aba 100644
--- a/src/pages/Club/ClubDetail/components/ClubMember.tsx
+++ b/src/pages/Club/ClubDetail/components/ClubMember.tsx
@@ -1,49 +1,78 @@
+import clsx from 'clsx';
 import { useParams } from 'react-router-dom';
 import type { ClubMember, PositionType } from '@/apis/club/entity';
-import Card from '@/components/common/Card';
 import { useGetClubMembers } from '../hooks/useGetClubMembers';
 
 const POSITION_LABELS: Record<PositionType, string> = {
   PRESIDENT: '회장',
   VICE_PRESIDENT: '부회장',
-  MANAGER: '관리자',
+  MANAGER: '임원진',
   MEMBER: '일반 회원',
 };
 
+const POSITION_BADGE_STYLES: Partial<Record<PositionType, string>> = {
+  PRESIDENT: 'bg-[#69BFDF]',
+  VICE_PRESIDENT: 'bg-[#F6DE8C]',
+  MANAGER: 'bg-[#FFB8B8]',
+};
+
+function ClubMemberAvatar({ imageUrl, name }: Pick<ClubMember, 'imageUrl' | 'name'>) {
+  if (imageUrl) {
+    return (
+      <img
+        className="border-indigo-5 size-10 rounded-full border object-cover"
+        src={imageUrl}
+        alt={`${name} 프로필 이미지`}
+      />
+    );
+  }
+
+  return <div aria-hidden className="bg-indigo-75 size-10 rounded-full" />;
+}
+
 const ClubMemberCard = (clubMember: ClubMember) => {
   return (
-    <Card className="flex-row items-center gap-2">
-      <img className="h-10 w-10 rounded-full" src={clubMember.imageUrl} alt="Member Avatar" />
-      <div>
-        <div className="flex gap-1">
-          <div className="text-sm leading-4 font-medium text-indigo-700">{clubMember.name}</div>
+    <div className="flex items-center gap-2 rounded-2xl bg-white p-4">
+      <ClubMemberAvatar imageUrl={clubMember.imageUrl} name={clubMember.name} />
+      <div className="min-w-0">
+        <div className="flex flex-wrap items-center gap-1.5">
+          <div className="text-sub2 text-indigo-700">{clubMember.name}</div>
           {clubMember.position !== 'MEMBER' && (
-            <div className="text-indigo-0 flex items-center rounded-sm bg-[#3182F6] px-1 py-0.5 text-[10px] leading-3 font-semibold">
+            <div
+              className={clsx(
+                'flex items-center rounded-sm px-1 py-0.5 text-[10px] leading-[1.6] font-semibold text-white',
+                POSITION_BADGE_STYLES[clubMember.position]
+              )}
+            >
               {POSITION_LABELS[clubMember.position]}
             </div>
           )}
         </div>
-        <div className="mt-1 text-xs font-medium text-indigo-300">{clubMember.studentNumber}</div>
+        <div className="text-body3 text-indigo-300">{clubMember.studentNumber}</div>
       </div>
-    </Card>
+    </div>
   );
 };
 
-function ClubMemberTab() {
+interface ClubMemberTabProps {
+  memberCount: number;
+}
+
+function ClubMemberTab({ memberCount }: ClubMemberTabProps) {
   const { clubId } = useParams();
   const { data: clubMembers } = useGetClubMembers(Number(clubId));
-  const totalMembers = clubMembers?.clubMembers.length;
+  const members = clubMembers?.clubMembers ?? [];
+  const totalMembers = clubMembers?.clubMembers.length ?? memberCount;
+
   return (
-    <>
-      <div className="text-sm leading-3.5 text-indigo-300">
-        총 <span className="font-bold text-black">{totalMembers}명</span>의 동아리인원
-      </div>
-      <div className="flex flex-col gap-1.5">
-        {clubMembers?.clubMembers.map((member) => (
+    <div className="flex flex-col gap-2">
+      <div className="text-sub2 text-indigo-300">{totalMembers}명</div>
+      <div className="flex flex-col gap-2">
+        {members.map((member) => (
           <ClubMemberCard key={member.studentNumber} {...member} />
         ))}
       </div>
-    </>
+    </div>
   );
 }
 
diff --git a/src/pages/Club/ClubDetail/components/ClubRecruitment.tsx b/src/pages/Club/ClubDetail/components/ClubRecruitment.tsx
index bcfeada..86a8fe4 100644
--- a/src/pages/Club/ClubDetail/components/ClubRecruitment.tsx
+++ b/src/pages/Club/ClubDetail/components/ClubRecruitment.tsx
@@ -58,7 +58,7 @@ function ClubRecruitment({ clubId, isMember, presidentUserId }: ClubRecruitProps
           hasQuestions ? (
             <Link
               to="applications"
-              className="bg-primary w-full rounded-sm py-3 text-center text-xs leading-3 font-medium text-white"
+              className="bg-primary-500 w-full rounded-sm py-3 text-center text-xs leading-3 font-medium text-white"
             >
               지원하기
             </Link>
@@ -66,7 +66,7 @@ function ClubRecruitment({ clubId, isMember, presidentUserId }: ClubRecruitProps
             <button
               type="button"
               onClick={openConfirm}
-              className="bg-primary w-full rounded-sm py-3 text-center text-xs leading-3 font-medium text-white"
+              className="bg-primary-500 w-full rounded-sm py-3 text-center text-xs leading-3 font-medium text-white"
             >
               지원하기
             </button>
@@ -101,7 +101,7 @@ function ClubRecruitment({ clubId, isMember, presidentUserId }: ClubRecruitProps
               type="button"
               onClick={handleApply}
               disabled={isPending}
-              className="bg-primary text-h3 w-full rounded-lg py-3.5 text-center text-white disabled:opacity-50"
+              className="bg-primary-500 text-h3 w-full rounded-lg py-3.5 text-center text-white disabled:opacity-50"
             >
               지원하기
             </button>
diff --git a/src/pages/Club/ClubDetail/index.tsx b/src/pages/Club/ClubDetail/index.tsx
index cfd7fa9..50b478d 100644
--- a/src/pages/Club/ClubDetail/index.tsx
+++ b/src/pages/Club/ClubDetail/index.tsx
@@ -1,6 +1,6 @@
 import { Activity, useEffect } from 'react';
 import clsx from 'clsx';
-import { useParams, useSearchParams, useLocation } from 'react-router-dom';
+import { useLocation, useParams, useSearchParams } from 'react-router-dom';
 import useScrollToTop from '@/utils/hooks/useScrollToTop';
 import ClubAccount from './components/ClubAccount';
 import ClubIntro from './components/ClubIntro';
@@ -24,9 +24,10 @@ function ClubDetail() {
   }, [location.state]);
 
   const [searchParams, setSearchParams] = useSearchParams();
-  const currentTab = searchParams.get('tab') || 'intro';
+  const requestedTab = searchParams.get('tab');
+  const clubIdNumber = Number(clubId);
 
-  const { data: clubDetail } = useGetClubDetail(Number(clubId));
+  const { data: clubDetail } = useGetClubDetail(clubIdNumber);
 
   const handleTabClick = (tab: TabType) => {
     setSearchParams({ tab }, { replace: true });
@@ -44,32 +45,34 @@ function ClubDetail() {
   ];
 
   const visibleTabs = tabs.filter((tab) => tab.show);
+  const currentTab = visibleTabs.some((tab) => tab.key === requestedTab)
+    ? (requestedTab as TabType)
+    : (visibleTabs.find((tab) => tab.key === 'intro')?.key ?? visibleTabs[0]?.key ?? 'intro');
 
   return (
-    <>
-      <div className="fixed right-0 left-0 bg-white shadow-[0_1px_2px_0_rgba(0,0,0,0.04)]">
-        <div className="flex items-start gap-4 p-4">
+    <div className="bg-indigo-5 min-h-full">
+      <div className="overflow-hidden rounded-b-[20px] bg-white shadow-[0_0_20px_rgba(0,0,0,0.03)]">
+        <div className="flex items-start gap-3 px-4 pb-4">
           <img
-            className="border-indigo-5 h-17.5 w-17.5 rounded-sm border"
+            className="border-indigo-5 size-16 rounded-sm border object-cover"
             src={clubDetail.imageUrl}
             alt={clubDetail.name}
           />
-          <div className="flex min-w-0 flex-col gap-1">
-            <div className="text-xl leading-5.5 font-black">{clubDetail.name}</div>
-            <div className="text-body3">{clubDetail.categoryName}</div>
-            <div className="text-sub2 truncate">{clubDetail.description}</div>
+          <div className="flex min-w-0 flex-1 flex-col gap-1">
+            <div className="truncate text-[20px] leading-[22px] font-extrabold text-black">{clubDetail.name}</div>
+            <div className="text-body3 text-black">{clubDetail.categoryName}</div>
+            <div className="text-sub2 truncate text-black">{clubDetail.description}</div>
           </div>
         </div>
-        <div className="flex items-center gap-3 bg-white px-3">
+        <div className="flex items-center gap-3 bg-white px-4">
           {visibleTabs.map((tab) => (
             <button
               key={tab.key}
+              type="button"
               onClick={() => handleTabClick(tab.key)}
               className={clsx(
-                'relative h-[38px] px-3 py-1 text-sm leading-5 font-medium transition-colors',
-                currentTab === tab.key
-                  ? 'text-indigo-700 after:absolute after:bottom-0 after:left-0 after:h-[1.6px] after:w-full after:bg-indigo-300'
-                  : 'text-indigo-300'
+                'text-sub2 h-[38px] border-b-[1.6px] px-3 transition-colors',
+                currentTab === tab.key ? 'border-[#69BFDF] text-[#69BFDF]' : 'border-transparent text-indigo-300'
               )}
             >
               {tab.label}
@@ -77,11 +80,11 @@ function ClubDetail() {
           ))}
         </div>
       </div>
-      <div className="mt-35 flex flex-col gap-2 p-3">
+      <div className="flex flex-col gap-2 px-5 pt-3 pb-[calc(var(--sab)+20px)]">
         {clubDetail.recruitment.status !== 'CLOSED' && (
           <Activity mode={currentTab === 'recruitment' ? 'visible' : 'hidden'}>
             <ClubRecruit
-              clubId={Number(clubId)}
+              clubId={clubIdNumber}
               isMember={clubDetail.isMember}
               presidentUserId={clubDetail.presidentUserId}
             />
@@ -92,7 +95,7 @@ function ClubDetail() {
         </Activity>
         {clubDetail.isMember && (
           <Activity mode={currentTab === 'members' ? 'visible' : 'hidden'}>
-            <ClubMemberTab />
+            <ClubMemberTab memberCount={clubDetail.memberCount} />
           </Activity>
         )}
         {(clubDetail.isMember || clubDetail.isApplied) && (
@@ -101,7 +104,7 @@ function ClubDetail() {
           </Activity>
         )}
       </div>
-    </>
+    </div>
   );
 }
 
diff --git a/src/pages/Club/ClubList/components/ClubCard.tsx b/src/pages/Club/ClubList/components/ClubCard.tsx
index 6ffcb48..57beb58 100644
--- a/src/pages/Club/ClubList/components/ClubCard.tsx
+++ b/src/pages/Club/ClubList/components/ClubCard.tsx
@@ -33,7 +33,7 @@ function ClubCard({ club }: ClubCardProps) {
   const clubTag: ClubTag | null = (() => {
     if (club.isPendingApproval) {
       return {
-        label: '승인대기중',
+        label: '승인 대기중',
         bgColor: '#FEF3C7',
         textColor: '#B45309',
       };
@@ -62,24 +62,24 @@ function ClubCard({ club }: ClubCardProps) {
     <Link
       to={`/clubs/${club.id}${club.status === 'ONGOING' ? '?tab=recruitment' : ''}`}
       state={{ from: 'clubList' }}
-      className="border-indigo-5 flex w-full items-start gap-3 rounded-lg border bg-white p-3"
+      className="border-indigo-5 flex w-full items-start gap-3 rounded-2xl border bg-white p-4"
     >
-      <img src={club.imageUrl} className="border-indigo-5 h-12 w-12 rounded-sm border" alt={club.name} />
+      <img src={club.imageUrl} className="border-indigo-5 h-12 w-12 rounded-sm border object-cover" alt={club.name} />
       <div className="min-w-0 flex-1">
         <div className="flex items-center justify-between">
-          <div className="flex items-center gap-1">
-            <div className="text-h3 text-indigo-700">{club.name}</div>
-            <div className="text-caption1 text-indigo-300">{club.categoryName}</div>
+          <div className="flex min-w-0 items-center gap-1.5">
+            <div className="text-h3 truncate text-indigo-700">{club.name}</div>
+            <div className="shrink-0 text-[11px] leading-[15px] text-indigo-300">{club.categoryName}</div>
           </div>
           {clubTag && (
             <div
-              className="text-caption1 flex items-center gap-0.5 rounded-full px-3 py-1"
+              className="flex shrink-0 items-center gap-0.5 rounded-full px-3 py-1.5 text-[10px] leading-3 font-semibold"
               style={{
                 backgroundColor: clubTag.bgColor,
                 color: clubTag.textColor,
               }}
             >
-              <CircleWarningIcon style={{ color: clubTag.textColor }} />
+              <CircleWarningIcon className="size-3 shrink-0" style={{ color: clubTag.textColor }} />
               {clubTag.label}
             </div>
           )}
diff --git a/src/pages/Club/ClubList/components/SearchBar.tsx b/src/pages/Club/ClubList/components/SearchBar.tsx
index 275f752..56947a1 100644
--- a/src/pages/Club/ClubList/components/SearchBar.tsx
+++ b/src/pages/Club/ClubList/components/SearchBar.tsx
@@ -2,6 +2,8 @@ import { type FormEvent } from 'react';
 import { Link } from 'react-router-dom';
 import SearchIcon from '@/assets/svg/search.svg';
 
+const SEARCH_PLACEHOLDER = '동아리 이름으로 검색';
+
 interface SearchBarProps {
   isButton?: boolean;
   value?: string;
@@ -11,19 +13,23 @@ interface SearchBarProps {
 }
 
 function SearchBar({ isButton, value, onChange, onSubmit, autoFocus }: SearchBarProps) {
-  const wrapperClass = 'fixed left-0 right-0 bg-white px-3 py-2 shadow-[0_2px_2px_0_rgba(0,0,0,0.04)] z-10';
+  const wrapperClass =
+    'fixed top-11 left-0 right-0 z-20 rounded-b-2xl bg-white px-3 py-2 shadow-[0_0_20px_0_rgba(0,0,0,0.03)]';
 
   const content = (
-    <div className="bg-indigo-5 flex items-center gap-2.5 rounded-lg px-3 py-2">
-      <SearchIcon />
-      <input
-        className="flex-1 bg-transparent font-medium outline-none placeholder:text-indigo-200"
-        placeholder="동아리 이름으로 검색"
-        readOnly={isButton && !onChange}
-        value={value}
-        onChange={onChange ? (e) => onChange(e.target.value) : undefined}
-        autoFocus={autoFocus}
-      />
+    <div className="bg-indigo-5 flex h-12 items-center gap-2.5 rounded-2xl px-3">
+      <SearchIcon className="size-4 shrink-0" />
+      {isButton && !onChange ? (
+        <div className="text-base font-medium text-indigo-300">{SEARCH_PLACEHOLDER}</div>
+      ) : (
+        <input
+          className="flex-1 bg-transparent text-base font-medium text-indigo-300 outline-none placeholder:text-indigo-300"
+          placeholder={SEARCH_PLACEHOLDER}
+          value={value}
+          onChange={onChange ? (e) => onChange(e.target.value) : undefined}
+          autoFocus={autoFocus}
+        />
+      )}
     </div>
   );
 
diff --git a/src/pages/Club/ClubList/index.tsx b/src/pages/Club/ClubList/index.tsx
index f3f6a7c..0d0e07f 100644
--- a/src/pages/Club/ClubList/index.tsx
+++ b/src/pages/Club/ClubList/index.tsx
@@ -19,12 +19,12 @@ function ClubList() {
   const allClubs = data?.pages.flatMap((page) => page.clubs) ?? [];
 
   return (
-    <div className="pb-15">
+    <>
       <SearchBar isButton />
-      <div className="bg-background mt-13 flex flex-col gap-2 px-3 pt-2 pb-4">
-        <div className="text-sub2 text-indigo-300">
-          총 <span className="text-black">{totalCount}개</span>의 동아리
-        </div>
+      <div className="h-16 shrink-0" />
+
+      <div className="flex flex-col gap-2 px-5 pt-2 pb-4">
+        <div className="text-sub2 px-3 text-indigo-300">총 {totalCount}개의 동아리</div>
 
         <div className="flex flex-col gap-2">
           {allClubs.map((club) => (
@@ -34,7 +34,7 @@ function ClubList() {
 
         {hasNextPage && <div ref={observerRef} className="flex h-20 items-center justify-center" />}
       </div>
-    </div>
+    </>
   );
 }
 
diff --git a/src/pages/Club/ClubSearch/index.tsx b/src/pages/Club/ClubSearch/index.tsx
index 97001c0..33e3137 100644
--- a/src/pages/Club/ClubSearch/index.tsx
+++ b/src/pages/Club/ClubSearch/index.tsx
@@ -44,15 +44,14 @@ function ClubSearch() {
   return (
     <>
       <SearchBar value={keyword} onChange={handleChange} autoFocus />
+      <div className="h-16 shrink-0" />
 
-      <div className="mt-13 flex flex-col gap-2 px-3 pt-2 pb-4">
+      <div className="flex flex-col gap-2 px-5 pt-2 pb-4">
         {!debouncedQuery ? (
           <div className="py-6 text-center text-xs text-indigo-300">검색어를 입력해서 동아리를 검색해보세요.</div>
         ) : (
           <>
-            <div className="text-caption2 text-indigo-300">
-              총 <span className="font-bold text-black">{totalCount}개</span>의 동아리
-            </div>
+            <div className="text-sub2 px-3 text-indigo-300">총 {totalCount}개의 동아리</div>
 
             <div className="flex flex-col gap-2">
               {allClubs.map((club) => (