diff --git a/src/components/RoadmapAIChat/RoadmapAIChat.tsx b/src/components/RoadmapAIChat/RoadmapAIChat.tsx
index b08d38815..979d12714 100644
--- a/src/components/RoadmapAIChat/RoadmapAIChat.tsx
+++ b/src/components/RoadmapAIChat/RoadmapAIChat.tsx
@@ -17,9 +17,7 @@ import {
 import { BotIcon, Loader2Icon, PauseCircleIcon, SendIcon } from 'lucide-react';
 import { ChatEditor } from '../ChatEditor/ChatEditor';
 import { roadmapTreeMappingOptions } from '../../queries/roadmap-tree';
-import {
-  type AllowedAIChatRole
-} from '../GenerateCourse/AICourseLessonChat';
+import { type AllowedAIChatRole } from '../GenerateCourse/AICourseLessonChat';
 import { isLoggedIn, removeAuthToken } from '../../lib/jwt';
 import type { JSONContent, Editor } from '@tiptap/core';
 import { flushSync } from 'react-dom';
@@ -285,23 +283,25 @@ export function RoadmapAIChat(props: RoadmapAIChatProps) {
   }, []);
 
   return (
-    <div className="flex flex-row flex-grow">
-      <div className="relative flex-grow h-full overflow-y-scroll">
+    <div className="flex flex-grow flex-row">
+      <div className="relative h-full flex-grow overflow-y-scroll">
         {isLoading && (
           <div className="absolute inset-0 flex h-full w-full items-center justify-center">
             <Loader2Icon className="size-6 animate-spin stroke-[2.5]" />
           </div>
         )}
         {roadmapJSONData?.json && !isLoading && (
-          <ChatRoadmapRenderer
-            roadmapId={roadmapId}
-            nodes={roadmapJSONData?.json.nodes}
-            edges={roadmapJSONData?.json.edges}
-          />
+          <div className="mx-auto max-w-[968px] px-4">
+            <ChatRoadmapRenderer
+              roadmapId={roadmapId}
+              nodes={roadmapJSONData?.json.nodes}
+              edges={roadmapJSONData?.json.edges}
+            />
+          </div>
         )}
       </div>
 
-      <div className="flex-grow max-w-[40%] flex h-full flex-col border-l border-gray-200 bg-white">
+      <div className="flex h-full max-w-[40%] flex-grow flex-col border-l border-gray-200 bg-white">
         <div className="flex min-h-[46px] items-center justify-between gap-2 border-b border-gray-200 px-3 py-2 text-sm">
           <span className="flex items-center gap-2 text-sm">
             <BotIcon className="size-4 shrink-0 text-black" />