diff --git a/frontend/src/components/MessageInput.css b/frontend/src/components/MessageInput.css
index 8d0b119..dd045c7 100644
--- a/frontend/src/components/MessageInput.css
+++ b/frontend/src/components/MessageInput.css
@@ -3,13 +3,20 @@
   gap: 12px;
   padding: 16px;
   box-sizing: border-box;
+  max-width: 70%;
 }
 
 .message-input .input-wrapper {
   position: relative;
   display: flex;
   flex-direction: column;
-  width: 70%;
+  flex: 1;
+}
+
+@media (max-width: 768px) {
+  .message-input {
+    max-width: 95%;
+  }
 }
 
 .message-input .char-count {
diff --git a/frontend/src/components/MessageList.css b/frontend/src/components/MessageList.css
index 0001853..e80a1a4 100644
--- a/frontend/src/components/MessageList.css
+++ b/frontend/src/components/MessageList.css
@@ -44,6 +44,12 @@
   gap: 4px;
 }
 
+@media (max-width: 768px) {
+  .message-bubble {
+    max-width: 90%;
+  }
+}
+
 .message.mine .message-bubble {
   background: #e94560;
   border-bottom-right-radius: 4px;