diff --git a/app/static/js/dm.js b/app/static/js/dm.js
index ceade09..316f463 100644
--- a/app/static/js/dm.js
+++ b/app/static/js/dm.js
@@ -119,6 +119,25 @@ function setupEventListeners() {
             }
         });
     }
+
+    // Scroll-to-bottom button
+    const messagesContainer = document.getElementById('dmMessagesContainer');
+    const scrollToBottomBtn = document.getElementById('dmScrollToBottomBtn');
+    if (messagesContainer && scrollToBottomBtn) {
+        messagesContainer.addEventListener('scroll', function() {
+            const isAtBottom = messagesContainer.scrollHeight - messagesContainer.scrollTop <= messagesContainer.clientHeight + 100;
+            if (isAtBottom) {
+                scrollToBottomBtn.classList.remove('visible');
+            } else {
+                scrollToBottomBtn.classList.add('visible');
+            }
+        });
+
+        scrollToBottomBtn.addEventListener('click', function() {
+            messagesContainer.scrollTop = messagesContainer.scrollHeight;
+            scrollToBottomBtn.classList.remove('visible');
+        });
+    }
 }
 
 /**
diff --git a/app/templates/dm.html b/app/templates/dm.html
index 83e0fc4..ddf1fb3 100644
--- a/app/templates/dm.html
+++ b/app/templates/dm.html
@@ -74,7 +74,7 @@
             </div>
             <!-- Messages Container -->
             <div class="row flex-grow-1 overflow-hidden" style="min-height: 0;">
-                <div class="col-12" style="height: 100%;">
+                <div class="col-12 position-relative" style="height: 100%;">
                     <div id="dmMessagesContainer" class="messages-container h-100 overflow-auto p-3">
                         <div id="dmMessagesList">
                             <!-- Placeholder shown when no conversation selected -->
@@ -85,6 +85,10 @@
                             </div>
                         </div>
                     </div>
+                    <!-- Scroll to bottom button -->
+                    <button id="dmScrollToBottomBtn" class="scroll-to-bottom-btn" title="Scroll to bottom">
+                        <i class="bi bi-chevron-double-down"></i>
+                    </button>
                 </div>
             </div>