diff --git a/apps/nextjs/src/components/AppComponents/Chat/chat-list.tsx b/apps/nextjs/src/components/AppComponents/Chat/chat-list.tsx
index ef81722db..a5cf23b1b 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/chat-list.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/chat-list.tsx
@@ -37,6 +37,7 @@ function DemoLimitMessage({ id }: Readonly<{ id: string }>) {
             '{"type": "error", "message": "**Your lesson is complete**\\nYou can no longer edit this lesson. [Create new lesson.](/aila)"}',
         }}
         persistedModerations={[]}
+        scrollToBottom={() => {}}
         separator={<span className="my-10 flex" />}
       />
     </div>
@@ -104,6 +105,7 @@ export function ChatList({
         persistedModerations={persistedModerations}
         ailaStreamingStatus={ailaStreamingStatus}
         demo={demo}
+        scrollToBottom={scrollToBottom}
       />
 
       {isDemoLocked && <DemoLimitMessage id={id} />}
@@ -119,6 +121,7 @@ export const ChatMessagesDisplay = ({
   persistedModerations = [],
   ailaStreamingStatus,
   demo,
+  scrollToBottom,
 }: {
   id: string;
   messages: Message[];
@@ -126,6 +129,7 @@ export const ChatMessagesDisplay = ({
   persistedModerations: PersistedModerationBase[];
   ailaStreamingStatus: AilaStreamingStatus;
   demo: DemoContextProps;
+  scrollToBottom: () => void;
 }) => {
   const { lessonPlan, isStreaming } = useLessonChat();
   const { setDialogWindow } = useDialog();
@@ -153,6 +157,7 @@ export const ChatMessagesDisplay = ({
                 persistedModerations={persistedModerations}
                 ailaStreamingStatus={ailaStreamingStatus}
                 isLastMessage={isLastMessage}
+                scrollToBottom={scrollToBottom}
                 separator={<span className="my-10 flex" />}
               />
               <ChatMessage
@@ -165,6 +170,7 @@ export const ChatMessagesDisplay = ({
                 }}
                 lastModeration={lastModeration}
                 persistedModerations={[]}
+                scrollToBottom={scrollToBottom}
                 separator={<span className="my-10 flex" />}
                 ailaStreamingStatus={ailaStreamingStatus}
                 isLastMessage={isLastMessage}
@@ -181,6 +187,7 @@ export const ChatMessagesDisplay = ({
               key={message.id}
               chatId={id}
               ailaStreamingStatus={ailaStreamingStatus}
+              scrollToBottom={scrollToBottom}
               message={
                 !["Moderating", "Idle"].includes(ailaStreamingStatus) &&
                 message.role === "assistant" &&
@@ -209,6 +216,7 @@ export const ChatMessagesDisplay = ({
           <div className="w-full flex-col gap-11">
             <ChatMessage
               chatId={id}
+              scrollToBottom={scrollToBottom}
               ailaStreamingStatus={ailaStreamingStatus}
               message={{
                 id: "working-on-it-initial",
diff --git a/apps/nextjs/src/components/AppComponents/Chat/chat-message/index.tsx b/apps/nextjs/src/components/AppComponents/Chat/chat-message/index.tsx
index ad3a45fa1..77f595a5e 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/chat-message/index.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/chat-message/index.tsx
@@ -44,6 +44,7 @@ export interface ChatMessageProps {
   separator?: JSX.Element;
   ailaStreamingStatus: AilaStreamingStatus;
   isLastMessage: boolean;
+  scrollToBottom: () => void;
 }
 
 export function ChatMessage({
@@ -52,6 +53,7 @@ export function ChatMessage({
   separator,
   ailaStreamingStatus,
   isLastMessage,
+  scrollToBottom,
 }: Readonly<ChatMessageProps>) {
   const { moderationModalHelpers } = useChatModeration();
 
@@ -226,6 +228,7 @@ export interface ChatMessagePartProps {
   inspect: boolean;
   moderationModalHelpers: ModerationModalHelpers;
   isLastMessage: boolean;
+  scrollToBottom: () => void;
 }
 
 function ChatMessagePart({
@@ -233,6 +236,7 @@ function ChatMessagePart({
   inspect,
   moderationModalHelpers,
   isLastMessage,
+  scrollToBottom,
 }: Readonly<ChatMessagePartProps>) {
   const PartComponent = {
     comment: CommentMessagePart,
@@ -250,6 +254,7 @@ function ChatMessagePart({
     part: typeof part.document;
     moderationModalHelpers: ModerationModalHelpers;
     isLastMessage: boolean;
+    scrollToBottom: () => void;
   }>;
 
   if (!PartComponent) {
@@ -263,6 +268,7 @@ function ChatMessagePart({
         part={part.document}
         moderationModalHelpers={moderationModalHelpers}
         isLastMessage={isLastMessage}
+        scrollToBottom={scrollToBottom}
       />
 
       {
@@ -317,7 +323,7 @@ export const InLineButton = ({
   return (
     <button
       onClick={handleClick}
-      className="my-6 w-fit rounded-lg border border-black border-opacity-30 bg-white p-7 text-blue"
+      className="my-6 w-fit rounded-lg border border-black border-opacity-30 bg-white p-7 text-base text-blue"
     >
       {text}
     </button>
@@ -327,7 +333,12 @@ export const InLineButton = ({
 function TextMessagePart({
   part,
   isLastMessage,
-}: Readonly<{ part: TextDocument; isLastMessage: boolean }>) {
+  scrollToBottom,
+}: Readonly<{
+  part: TextDocument;
+  isLastMessage: boolean;
+  scrollToBottom: () => void;
+}>) {
   function containsRelevantList(text: string): boolean {
     const relevancePhraseRegex =
       /might\s*be\s*relevant|could\s*be\s*relevant|are\s*relevant/i; // Variations of "might be relevant"
@@ -367,6 +378,7 @@ function TextMessagePart({
             handleContinue={handleContinue}
             part={part}
             setUserHasSelected={setUserHasSelected}
+            scrollToBottom={scrollToBottom}
           />
         )}
       </div>
@@ -387,6 +399,7 @@ function TextMessagePart({
               handleContinue={handleContinue}
               part={part}
               setUserHasSelected={setUserHasSelected}
+              scrollToBottom={scrollToBottom}
             />
           )}
       </div>
@@ -404,10 +417,12 @@ const InlineButtonGroup = ({
   handleContinue,
   part,
   setUserHasSelected,
+  scrollToBottom,
 }: {
   handleContinue: (text: string) => void;
   part: TextDocument;
   setUserHasSelected: (value: boolean) => void;
+  scrollToBottom: () => void;
 }) => {
   const [showExmapleEdits, setShowExampleEdits] = useState(false);
   const isFinalStep =
@@ -421,6 +436,7 @@ const InlineButtonGroup = ({
             text="Make them easier"
             onClick={() => {
               handleContinue("Make them easier");
+              scrollToBottom();
             }}
           />
           <InLineButton