diff --git a/webapp/templates/shoutbox-popout.html b/webapp/templates/shoutbox-popout.html
index 9ec0952..0fae3f0 100644
--- a/webapp/templates/shoutbox-popout.html
+++ b/webapp/templates/shoutbox-popout.html
@@ -29,8 +29,14 @@
 </div>
 
 <div class="flex flex-1 overflow-hidden">
-	<div class="flex-1 overflow-y-auto font-mono text-xs p-2" id="shoutboxDisplay" style="scrollbar-width: thin;">
-		<div class="text-gray-500 text-center py-4" id="shoutboxPlaceholder">Aucun message</div>
+	<div class="flex-1 relative">
+		<div class="absolute inset-0 overflow-y-auto font-mono text-xs p-2" id="shoutboxDisplay" style="scrollbar-width: thin;">
+			<div class="text-gray-500 text-center py-4" id="shoutboxPlaceholder">Aucun message</div>
+		</div>
+		<button id="newMsgBtn" onclick="scrollToBottom()" class="hidden absolute bottom-2 left-1/2 -translate-x-1/2 z-10 px-3 py-1 rounded-full bg-indigo-600/90 hover:bg-indigo-500 text-white text-xs font-medium shadow-lg animate-pulse flex items-center gap-1.5 backdrop-blur-sm">
+			<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path></svg>
+			<span id="newMsgText">Nouveaux messages</span>
+		</button>
 	</div>
 	<div class="w-24 border-l border-gray-800 bg-gray-900/50 p-2 overflow-y-auto flex-shrink-0" style="scrollbar-width: thin;">
 		<div class="text-xs text-gray-500 font-semibold mb-1">En ligne</div>
@@ -55,6 +61,7 @@ var lastTimestamp = '';
 var autoScroll = true;
 var tabVisible = true;
 var audioCtx = null;
+var unreadCount = 0;
 
 document.addEventListener('visibilitychange', function() { tabVisible = !document.hidden; });
 
@@ -145,7 +152,26 @@ function addItem(item) {
 	display.appendChild(line);
 	if (!tabVisible) beep();
 	while (display.children.length > 200) display.removeChild(display.firstChild);
-	if (autoScroll) display.scrollTop = display.scrollHeight;
+	if (autoScroll) {
+		display.scrollTop = display.scrollHeight;
+	} else {
+		unreadCount++;
+		var btn = document.getElementById('newMsgBtn');
+		var txt = document.getElementById('newMsgText');
+		if (btn && txt) {
+			txt.textContent = unreadCount + ' nouveau' + (unreadCount > 1 ? 'x' : '') + ' message' + (unreadCount > 1 ? 's' : '');
+			btn.classList.remove('hidden');
+		}
+	}
+}
+
+function scrollToBottom() {
+	var d = document.getElementById('shoutboxDisplay');
+	d.scrollTop = d.scrollHeight;
+	autoScroll = true;
+	unreadCount = 0;
+	var btn = document.getElementById('newMsgBtn');
+	if (btn) btn.classList.add('hidden');
 }
 
 function updateOnline(users) {
@@ -170,7 +196,15 @@ function poll() {
 	fetch(url)
 		.then(function(r) { return r.json(); })
 		.then(function(data) {
-			if (data.items && data.items.length > 0) data.items.forEach(addItem);
+			if (data.items && data.items.length > 0) {
+				data.items.forEach(addItem);
+				if (autoScroll) {
+					setTimeout(function() {
+						var d = document.getElementById('shoutboxDisplay');
+						d.scrollTop = d.scrollHeight;
+					}, 0);
+				}
+			}
 			if (data.timestamp) lastTimestamp = data.timestamp;
 			if (data.online_users) updateOnline(data.online_users);
 			var cnt = document.getElementById('shoutboxCount');
@@ -202,6 +236,11 @@ function sendShoutboxMessage(event) {
 
 document.getElementById('shoutboxDisplay').addEventListener('scroll', function() {
 	autoScroll = this.scrollHeight - this.scrollTop <= this.clientHeight + 30;
+	if (autoScroll && unreadCount > 0) {
+		unreadCount = 0;
+		var btn = document.getElementById('newMsgBtn');
+		if (btn) btn.classList.add('hidden');
+	}
 });
 
 setInterval(poll, 3000);
diff --git a/webapp/templates/twitch-moderation.html b/webapp/templates/twitch-moderation.html
index 990f31f..53d08ba 100644
--- a/webapp/templates/twitch-moderation.html
+++ b/webapp/templates/twitch-moderation.html
@@ -329,8 +329,14 @@
 			</div>
 		</div>
 		<div class="flex flex-1 overflow-hidden">
-			<div class="flex-1 overflow-y-auto font-mono text-xs p-2 bg-gray-950 dark:bg-gray-950 bg-opacity-95" id="shoutboxDisplay" style="scrollbar-width: thin;">
-				<div class="text-gray-500 text-center py-4" id="shoutboxPlaceholder">Aucun message</div>
+			<div class="flex-1 relative">
+				<div class="absolute inset-0 overflow-y-auto font-mono p-2 bg-gray-950 dark:bg-gray-950 bg-opacity-95" id="shoutboxDisplay" style="scrollbar-width: thin;">
+					<div class="text-gray-500 text-center py-4" id="shoutboxPlaceholder">Aucun message</div>
+				</div>
+				<button id="shoutboxNewMsgBtn" onclick="shoutboxScrollToBottom()" class="hidden absolute bottom-2 left-1/2 -translate-x-1/2 z-10 px-3 py-1 rounded-full bg-indigo-600/90 hover:bg-indigo-500 text-white text-xs font-medium shadow-lg animate-pulse flex items-center gap-1.5 backdrop-blur-sm">
+					<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path></svg>
+					<span id="shoutboxNewMsgText">Nouveaux messages</span>
+				</button>
 			</div>
 			<div class="w-28 border-l border-gray-700 bg-gray-900 p-2 overflow-y-auto" style="scrollbar-width: thin;">
 				<div class="text-xs text-gray-400 font-semibold mb-1.5">En ligne</div>
@@ -994,6 +1000,7 @@ var shoutboxLastTimestamp = '';
 var shoutboxAutoScroll = true;
 var shoutboxTabVisible = true;
 var shoutboxAudioCtx = null;
+var shoutboxUnreadCount = 0;
 var shoutboxSoundEnabled = localStorage.getItem('shoutbox_sound') !== 'off';
 var shoutboxFontSizePx = parseInt(localStorage.getItem('shoutbox_fontsize')) || 12;
 
@@ -1124,7 +1131,26 @@ function addShoutboxItem(item) {
 	if (!shoutboxTabVisible) shoutboxBeep();
 
 	while (display.children.length > 200) display.removeChild(display.firstChild);
-	if (shoutboxAutoScroll) display.scrollTop = display.scrollHeight;
+	if (shoutboxAutoScroll) {
+		display.scrollTop = display.scrollHeight;
+	} else {
+		shoutboxUnreadCount++;
+		var btn = document.getElementById('shoutboxNewMsgBtn');
+		var txt = document.getElementById('shoutboxNewMsgText');
+		if (btn && txt) {
+			txt.textContent = shoutboxUnreadCount + ' nouveau' + (shoutboxUnreadCount > 1 ? 'x' : '') + ' message' + (shoutboxUnreadCount > 1 ? 's' : '');
+			btn.classList.remove('hidden');
+		}
+	}
+}
+
+function shoutboxScrollToBottom() {
+	var d = document.getElementById('shoutboxDisplay');
+	d.scrollTop = d.scrollHeight;
+	shoutboxAutoScroll = true;
+	shoutboxUnreadCount = 0;
+	var btn = document.getElementById('shoutboxNewMsgBtn');
+	if (btn) btn.classList.add('hidden');
 }
 
 function updateOnlineList(users) {
@@ -1164,6 +1190,12 @@ function fetchShoutbox() {
 		.then(function(data) {
 			if (data.items && data.items.length > 0) {
 				data.items.forEach(addShoutboxItem);
+				if (shoutboxAutoScroll) {
+					setTimeout(function() {
+						var d = document.getElementById('shoutboxDisplay');
+						d.scrollTop = d.scrollHeight;
+					}, 0);
+				}
 			}
 			if (data.timestamp) shoutboxLastTimestamp = data.timestamp;
 			if (data.online_users) updateOnlineList(data.online_users);
@@ -1222,6 +1254,11 @@ function clearShoutbox() {
 
 document.getElementById('shoutboxDisplay').addEventListener('scroll', function() {
 	shoutboxAutoScroll = this.scrollHeight - this.scrollTop <= this.clientHeight + 30;
+	if (shoutboxAutoScroll && shoutboxUnreadCount > 0) {
+		shoutboxUnreadCount = 0;
+		var btn = document.getElementById('shoutboxNewMsgBtn');
+		if (btn) btn.classList.add('hidden');
+	}
 });
 
 shoutboxApplyFontSize();