diff --git a/extension/src/components/Room.tsx b/extension/src/components/Room.tsx
index 583f603..461abd7 100644
--- a/extension/src/components/Room.tsx
+++ b/extension/src/components/Room.tsx
@@ -1,5 +1,5 @@
 import { io, Socket } from "socket.io-client";
-import { useEffect, useRef, useState } from "react";
+import { CSSProperties, useEffect, useRef, useState } from "react";
 import Question from "./Question";
 import { QuestionInterface, SubmissionStatus } from "../types/Question";
 import CopyIcon from "../icons/CopyIcon";
@@ -49,6 +49,8 @@ export default function Room({
     duration: number | undefined | null;
 }) {
     const isLoadingGlobal = useIsMutating();
+    const [isAutoScrollEnabled, setIsAutoScrollEnabled] = useState(true);
+
     let inputRef = useRef<HTMLInputElement>(null);
     let messagesRef = useRef<HTMLUListElement>(null);
     let [messages, setMessages] = useState<MessageInterface[]>([
@@ -238,9 +240,16 @@ export default function Room({
         };
     }, [roomId]);
 
+    function handleScroll(e: React.UIEvent<HTMLDivElement>) {
+        const target = e.target as HTMLDivElement;
+        const threshold = 50;
+        const isAtBottom = target.scrollHeight - target.scrollTop - threshold <= target.clientHeight; 
+        setIsAutoScrollEnabled(isAtBottom);
+    }
+
     useEffect(() => {
         function autoScrollToLatestMessage() {
-            if (!messagesRef.current) {
+            if (!messagesRef.current || !isAutoScrollEnabled) {
                 return;
             }
 
@@ -249,9 +258,9 @@ export default function Room({
                 behavior: "auto",
             });
         }
-
-        autoScrollToLatestMessage();
-    }, [messages]);
+        if(isAutoScrollEnabled)
+            autoScrollToLatestMessage();
+    }, [messages, isAutoScrollEnabled]);
 
     return (
         <div className="flex h-screen flex-col gap-y-2 border-x-8 border-t-8 border-lc-border-light bg-lc-bg-light px-2 text-sm text-lc-text-light dark:border-lc-border dark:bg-lc-bg dark:text-white">
@@ -307,15 +316,22 @@ export default function Room({
                 )}
             </div>
 
+
             <div
                 id="leetrooms-chat"
                 className="mx-2 grow overflow-auto border border-transparent px-3 py-[10px]"
+                onScroll={handleScroll}
             >
                 <ul ref={messagesRef} className="flex flex-col gap-y-1.5">
                     {messages.map((message, index) => (
                         <Message key={index} message={message} />
                     ))}
                 </ul>
+                {!isAutoScrollEnabled && (
+                    <div  className="fixed left-1/2 bottom-0 transform -translate-x-1/2 mx-2 mb-16 bg-blue-200 text-blue-800 px-4 py-2 rounded-md shadow-md whitespace-nowrap">
+                        Auto-scroll paused. Scroll down to resume.
+                    </div>
+                )}
             </div>
 
             <div className="mx-2 mb-2.5 flex flex-row items-center justify-between gap-x-2 rounded-lg border border-transparent bg-lc-fg-light py-[5px] pl-3 pr-2 focus-within:border-blue-500 hover:border-blue-500 dark:bg-lc-fg">