diff --git a/freechat-client/pages/index.html b/freechat-client/pages/index.html
index 0b89085..3df49a3 100644
--- a/freechat-client/pages/index.html
+++ b/freechat-client/pages/index.html
@@ -41,35 +41,11 @@
 		</ul>
 	</nav>
 	<!-- Sample data so we know what things should look like -->
-	<div class="container" id="messages-container" style="max-width: 100%;">
+	<div class="container scroller" id="messages-container" style="max-width: 100%;">
 		<div class="channel-list-header"><h4>#Channel name here</h4></div>
 		<div class="channel-list-header"><p>Channel description here</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>
-			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
-			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
-			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
-			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
-			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
-			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
-			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
-			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
-			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
-			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
-			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
-			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
-			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
-			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
-			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
-			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
-			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
-			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
-			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
-			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
-			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
-			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
-			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
-			<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" id="send-container">
 			<form class="form-inline">
diff --git a/freechat-client/sass/scroll.scss b/freechat-client/sass/scroll.scss
new file mode 100644
index 0000000..dbbeefd
--- /dev/null
+++ b/freechat-client/sass/scroll.scss
@@ -0,0 +1,12 @@
+@import 'general';
+
+::-webkit-scrollbar {     
+	background-color: $back-grey;
+	width: .8em
+}
+
+::-webkit-scrollbar-thumb:window-inactive,
+::-webkit-scrollbar-thumb {
+	background:  $text;
+	border-radius: 10px;
+}
diff --git a/freechat-client/sass/style.scss b/freechat-client/sass/style.scss
index e64f0d1..a0ae398 100644
--- a/freechat-client/sass/style.scss
+++ b/freechat-client/sass/style.scss
@@ -1,4 +1,5 @@
 @import 'general';
+@import 'scroll';
 
 body {
     color: $text;
@@ -120,8 +121,7 @@ ul ul a {
 	padding-bottom: 50px;
 	overflow-y: scroll;
 	min-height: 480;
-	max-height: 1080px;
-	//max-height: 100%;
+	max-height: 1005px; // 1080 - $send-container-height
 }
 
 // Now the message box which must be pinned at the bottom