diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index d6ef59b7..6884c991 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -182,12 +182,19 @@ export default function Conversation() {
       )}px`;
     }
   };
-
+  const checkScroll = () => {
+    const el = conversationRef.current;
+    if (!el) return;
+    const isBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 10;
+    setHasScrolledToLast(isBottom);
+  };
   useEffect(() => {
     handleInput();
     window.addEventListener('resize', handleInput);
+    conversationRef.current?.addEventListener('scroll', checkScroll);
     return () => {
       window.removeEventListener('resize', handleInput);
+      conversationRef.current?.removeEventListener('scroll', checkScroll);
     };
   }, []);
   return (
diff --git a/frontend/src/index.css b/frontend/src/index.css
index cfc784fb..f6a98192 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -2,6 +2,16 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --viewport-height: 100vh;
+}
+
+@supports (height: 100dvh) {
+  :root {
+      --viewport-height: 100dvh; /* Use dvh where supported */
+  }
+}
+
 body.dark {
   background-color: #202124; /* raisin-black */
 }
@@ -63,20 +73,19 @@ html {
 
 body {
   margin: 0;
-  min-height: 100vh;
+  min-height: var(--viewport-height);
   overflow-x: hidden;
   font-family: 'Inter', sans-serif;
 }
 /*
-Avoid changing height in mobile browsers
+Avoid over-scrolling in mobile browsers
 */
 @media only screen and (max-width: 500px) {
   body,
   html {
-    height: 100%;
+    min-height: var(--viewport-height);
     position: fixed;
     width: 100%;
-    overflow-y: none;
   }
 }
 /**