diff --git a/frontend/src/features/chat/components/ChatMessage.tsx b/frontend/src/features/chat/components/ChatMessage.tsx
index 66fcf19..363326b 100644
--- a/frontend/src/features/chat/components/ChatMessage.tsx
+++ b/frontend/src/features/chat/components/ChatMessage.tsx
@@ -10,8 +10,9 @@ import { RejectCM } from '@/features/chat/components/templates/RejectCM'
 
 export function ChatMessage() {
   return (
-    <div className="flex-1 w-full min-h-0 pr-[16px] pt-[64px]">
-      <div className="chat-scroll h-full overflow-y-auto flex flex-col pl-[140px] pr-[126px]">
+    <div className="flex-1 w-full min-h-0 pr-[16px]">
+      {/* pt-[64px]: 첫 메시지를 우측 협상절차 카드 상단과 맞추되, 스크롤 시 여백도 함께 밀려 올라가도록 스크롤 컨테이너 안쪽에 둔다 */}
+      <div className="chat-scroll h-full overflow-y-auto flex flex-col pt-[64px] pl-[140px] pr-[126px]">
         <ChatList />
       </div>
     </div>
diff --git a/frontend/src/features/chat/components/UserButton.tsx b/frontend/src/features/chat/components/UserButton.tsx
index 3ad6a0c..480c81a 100644
--- a/frontend/src/features/chat/components/UserButton.tsx
+++ b/frontend/src/features/chat/components/UserButton.tsx
@@ -20,7 +20,8 @@ export function UserButton({ type, text, textList, priceErrorMessage }: UserButt
   if (type === '') return null
 
   return (
-    <div className="flex w-full pb-[52px]">
+    // pr-[16px]: 채팅 스크롤 영역(ChatMessage 바깥 pr-[16px])과 오른쪽 끝 정렬
+    <div className="flex w-full pb-[52px] pr-[16px]">
       <div className="grid grid-cols-[1fr_auto_1fr] items-center w-full">
         <div />
         <div className="flex justify-center">
diff --git a/frontend/src/index.css b/frontend/src/index.css
index ae917ee..994ab26 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -173,6 +173,10 @@
 }
 
 /* 채팅 영역 스크롤바 (배경과 구분되게 진하게) */
+/* 트랙 상단 64px 여백: 콘텐츠는 맨 위까지 스크롤되지만 스크롤바는 우측 협상절차 카드 상단과 같은 높이에서 시작 */
+.chat-scroll::-webkit-scrollbar-track {
+  margin-top: 64px;
+}
 .chat-scroll::-webkit-scrollbar-thumb {
   background-color: var(--neutral-40);
 }