diff --git a/assets/main.css b/assets/main.css
index 29a0726..6e16000 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -138,11 +138,29 @@ ul#server_selection_list {
 	margin: 0 3px;
 }
 
-.channel-contents-wrapper {
+#channel_contents_wrapper {
 	overflow-x: hidden;
 	overflow-y: scroll;
-	margin-left: 12px;
+	padding-left: 12px;
 	height: 100%;
+
+	transition-property: background-position, border;
+	transition-duration: 0.1s;
+
+	background-position-y: calc(100% + 50px);
+	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08));
+	background-size: 1px 50px;
+	background-repeat: repeat-x;
+
+	border-bottom: 1px solid rgba(170, 170, 170, 0);
+}
+#channel_contents_wrapper.new-messages {
+	background-image: linear-gradient(to bottom, rgba(0, 0, 255, 0), rgba(0, 0, 255, 0.1));
+}
+#channel_contents_wrapper.not-at-bottom {
+	transition-duration: 1s;
+	background-position-y: 100%;
+	border-bottom-color: rgba(170, 170, 170, 0.5);
 }
 #channel_contents {
 	text-rendering: optimizeLegibility;
@@ -151,7 +169,7 @@ ul#server_selection_list {
 	padding: 0 10px;
 }
 .compose-wrapper {
-	padding: 0 5px 8px;
+	padding: 5px 8px;
 }
 #compose {
 	width: 100%;
diff --git a/index.html b/index.html
index ae632fa..700c20c 100644
--- a/index.html
+++ b/index.html
@@ -52,7 +52,7 @@
 		<div class="main-area">
 			<div id="channel_header"></div>
 
-			<div class="channel-contents-wrapper">
+			<div id="channel_contents_wrapper">
 				<div class="centered" id="channel_contents">
 
 					<div style="text-align: center; width: 100%; height: 100%; display: flex;
diff --git a/main.js b/main.js
index 1ea5a63..77bbd13 100644
--- a/main.js
+++ b/main.js
@@ -280,6 +280,7 @@ function populateChannelContents(contents) {
 	}
 
 	byId("channel_contents").append(...nodes);
+	checkScrolledToBottom();
 }
 
 function logIn() {
@@ -412,4 +413,15 @@ function updateComposeHeight() {
 byId("compose").addEventListener("input", updateComposeHeight);
 updateComposeHeight();
 
+function checkScrolledToBottom() {
+	const el = byId("channel_contents_wrapper");
+
+	const scrolledTo = el.clientHeight + el.scrollTop;
+	const scrollHeight = el.scrollHeight
+	const atBottom = scrolledTo >= scrollHeight;
+	el.className = atBottom ? "" : "not-at-bottom";
+}
+byId("channel_contents_wrapper").addEventListener("scroll", checkScrolledToBottom);
+checkScrolledToBottom();
+
 byId("login_button").addEventListener("click", logIn);