diff --git a/frontend/src/components/ChatRoom.css b/frontend/src/components/ChatRoom.css
index ef8f5da..57a53b6 100644
--- a/frontend/src/components/ChatRoom.css
+++ b/frontend/src/components/ChatRoom.css
@@ -124,6 +124,11 @@
   overflow: hidden;
 }
 
+.input-area {
+  background: #16213e;
+  border-top: 1px solid #0f3460;
+}
+
 @media (max-width: 768px) {
   .user-list {
     display: none;
diff --git a/frontend/src/components/ChatRoom.tsx b/frontend/src/components/ChatRoom.tsx
index a906d94..cf07dd1 100644
--- a/frontend/src/components/ChatRoom.tsx
+++ b/frontend/src/components/ChatRoom.tsx
@@ -169,7 +169,9 @@ function ChatRoom({ roomId, userName, onLeave }: ChatRoomProps) {
 
         <main className="messages-container">
           <MessageList messages={messages} />
-          <MessageInput onSend={handleSendMessage} disabled={!isConnected} />
+          <div className="input-area">
+            <MessageInput onSend={handleSendMessage} disabled={!isConnected} />
+          </div>
         </main>
       </div>
     </div>
diff --git a/frontend/src/components/MessageInput.css b/frontend/src/components/MessageInput.css
index fff8887..2fa630e 100644
--- a/frontend/src/components/MessageInput.css
+++ b/frontend/src/components/MessageInput.css
@@ -2,8 +2,10 @@
   display: flex;
   gap: 12px;
   padding: 16px;
-  background: #16213e;
-  border-top: 1px solid #0f3460;
+  max-width: 800px;
+  margin: 0 auto;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .message-input .input-wrapper {
diff --git a/frontend/src/components/MessageList.css b/frontend/src/components/MessageList.css
index 0001853..32a1d1c 100644
--- a/frontend/src/components/MessageList.css
+++ b/frontend/src/components/MessageList.css
@@ -5,6 +5,10 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
+  max-width: 800px;
+  margin: 0 auto;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .empty-state {