diff --git a/freechat-client/pages/index.html b/freechat-client/pages/index.html
index b04008f..e0d72e6 100644
--- a/freechat-client/pages/index.html
+++ b/freechat-client/pages/index.html
@@ -31,17 +31,19 @@
 
 <div class="wrapper" id="content-container">
 	<nav>
-		<div class="channels-list-header"><h3 id="server-name">...</h3></div>
+		<div class="channels-list-header"><h3 id="server-name"></h3></div>
 		<ul class="list-unstyled components" id="channels-list">
 		</ul>
 	</nav>
-	<!-- Sample data so we know what things should look like -->
-	<div class="container scroller" id="messages-container" style="max-width: 100%;">
-		<div class="channel-list-header"><h4 id="channel-name">...</h4></div>
-		<div class="channel-list-header"><p id="channel-description"></p></div>
-		<ul class="list-unstyled components" id="messages-list">
-			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
-		</ul>
+
+	<div class="container" style="max-width: 100%;">
+		<div class="channel-list-header">
+			<h4 id="channel-name"><h4>
+			<p id="channel-description"></p>
+		</div>
+
+		<ul class="scrollarea list-unstyled components" id="messages-list"></ul>
+
 		<div class="container" id="send-container">
 			<form class="form-inline">
 				<div class="form-group">
@@ -128,7 +130,7 @@
 			}
 		})
 		.catch(err => {
-			console.log(err.options)
+			console.log(err, err.options)
 			$('#server-list').append(
 				$('<input>').attr({
 					type: 'button',
diff --git a/freechat-client/sass/scroll.scss b/freechat-client/sass/scroll.scss
index dbbeefd..8418935 100644
--- a/freechat-client/sass/scroll.scss
+++ b/freechat-client/sass/scroll.scss
@@ -10,3 +10,8 @@
 	background:  $text;
 	border-radius: 10px;
 }
+
+.scrollarea {
+	max-height: 100vh;
+	overflow: scroll;
+}