diff --git a/apps/web/components/pages/chat-page.tsx b/apps/web/components/pages/chat-page.tsx
index 585286a8..db365885 100644
--- a/apps/web/components/pages/chat-page.tsx
+++ b/apps/web/components/pages/chat-page.tsx
@@ -5,7 +5,7 @@ import { Loading } from "@multica/ui/components/ui/loading";
 import { ChatView } from "@multica/ui/components/chat-view";
 import { DevicePairing } from "@multica/ui/components/device-pairing";
 import { useGatewayConnection } from "@multica/hooks/use-gateway-connection";
-import { useChat } from "@multica/hooks/use-chat";
+import { useGatewayChat } from "@multica/hooks/use-gateway-chat";
 
 const ChatPage = () => {
   const { pageState, connectionState, identity, error, client, pairingKey, connect, disconnect } =
@@ -45,7 +45,6 @@ const ChatPage = () => {
   );
 };
 
-/** Thin wrapper that wires useChat hook to the shared ChatView */
 function ConnectedChat({
   client,
   hubId,
@@ -57,8 +56,7 @@ function ConnectedChat({
   agentId: string;
   onDisconnect: () => void;
 }) {
-  const chat = useChat({ client, hubId, agentId });
-
+  const chat = useGatewayChat({ client, hubId, agentId });
   return <ChatView {...chat} onDisconnect={onDisconnect} />;
 }
 
diff --git a/packages/ui/src/components/message-list.tsx b/packages/ui/src/components/message-list.tsx
index 1772f946..aa8d321f 100644
--- a/packages/ui/src/components/message-list.tsx
+++ b/packages/ui/src/components/message-list.tsx
@@ -55,7 +55,7 @@ export const MessageList = memo(function MessageList({ messages, streamingIds }:
   }, [messages])
 
   return (
-    <div className="relative p-6 max-w-4xl mx-auto">
+    <div className="relative p-6 px-10 max-w-4xl mx-auto">
       {messages.map((msg) => {
         // ToolResult messages → render as tool execution item
         if (msg.role === "toolResult") {