diff --git a/components/Chat/Chat.tsx b/components/Chat/Chat.tsx
index e73d9c4da..abbbf616e 100644
--- a/components/Chat/Chat.tsx
+++ b/components/Chat/Chat.tsx
@@ -7,7 +7,7 @@ const Chat = () => {
 
   return (
     <div
-      className={`w-screen overflow-hidden ${messages.length ? "px-4 pt-20 mb-[150px] overflow-y-auto h-[calc(100vh-150px)]" : "flex flex-col items-center justify-center h-screen"}`}
+      className={`overflow-hidden ${messages.length ? "w-screen px-4 pt-20 mb-[150px] overflow-y-auto h-[calc(100vh-150px)]" : "flex flex-col items-center justify-center h-screen mx-auto max-w-3xl"}`}
     >
       <p className="font-sans font-semibold text-2xl mb-2 text-center">
         {`How is Luh Tyler's 3D Game Performing?`}
diff --git a/components/Chat/ChatInput.tsx b/components/Chat/ChatInput.tsx
index 13b24a2f6..adf0e9fc5 100644
--- a/components/Chat/ChatInput.tsx
+++ b/components/Chat/ChatInput.tsx
@@ -16,7 +16,7 @@ const ChatInput: React.FC = () => {
     <div
       className={`w-full px-2 z-[10] bg-background ${messages.length ? "fixed bottom-2 left-0" : "relative"}`}
     >
-      <div className="border-gray-700 border-[1px] rounded-md p-2">
+      <div className="border-gray-700 border-[1px] rounded-md p-2 max-w-3xl mx-auto">
         <form onSubmit={handleSubmit} className="w-full">
           <textarea
             value={input}
diff --git a/components/Chat/Messages.tsx b/components/Chat/Messages.tsx
index 369a0fbde..36cb9c4ca 100644
--- a/components/Chat/Messages.tsx
+++ b/components/Chat/Messages.tsx
@@ -6,7 +6,7 @@ const Messages = () => {
   const { messages } = useChatProvider();
 
   return (
-    <div className="w-full mt-4">
+    <div className="w-full mt-4 max-w-3xl mx-auto">
       <div className="space-y-4">
         {messages.map((message: Message, index: number) => (
           <div key={index} className="p-3 rounded-lg flex w-full gap-2">