diff --git a/anonkun.py b/anonkun.py
index dc6dcb1..811b3d6 100644
--- a/anonkun.py
+++ b/anonkun.py
@@ -63,8 +63,11 @@ def text(data):
 	"""
 	Sent by a client when the user entered a new message.
 	"""
-	message = data["msg"]
-	emit('message', {'msg': message})
+	message = data["message"]
+	name = data["name"]
+	date = int(time.time())
+	data["date"] = date
+	emit('message', data)
 
 
 @app.template_filter("strftime")
@@ -72,7 +75,7 @@ def unix2string(unix):
 	"""
 	Converts a unix timestamp into a string.
 	"""
-	form = "[%Y-%m-%d %H:%M:%S]"
+	form = "%Y-%m-%d %H:%M:%S"
 	t = time.localtime(unix)
 	return time.strftime(form, t)
 
diff --git a/templates/index.html b/templates/index.html
index 29143ee..9499a9c 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -5,7 +5,6 @@
 	<script type="text/javascript" src="{{ url_for('static', filename='socket.io.slim.js') }}"></script>
 	<script>
 	var socket;
-	var messages_received = [];
 	var tid = setInterval( function () {
 		if ( document.readyState !== 'complete' ) return;
 		clearInterval( tid );
@@ -15,34 +14,43 @@
 			socket.emit('joined', {});
 		});
 		socket.on('message', function(data) {
-			if (messages_received.length >= 50) {
-				message_received.shift()
-			}
-			messages_received.push(data.msg);
-			message_string = '';
-			for (var i = 0; i < messages_received.length; i++) {
-				message_string = message_string + '<tr><td>2018</td><td>Anonymous</td><td>' + messages_received[i] + '</td>';
-			}
-			document.getElementById('messages').innerHTML = message_string;
+			date = new Date(data.date * 1000);
+			date_str = date.getFullYear() + '-' + padToTwo(date.getMonth()) + '-' + padToTwo(date.getDay()) + ' ';
+			date_str += padToTwo(date.getHours()) + ':' + padToTwo(date.getMinutes()) + ':' + padToTwo(date.getSeconds());
+
+			msg_str = '<div class="messageHeader">\n<span class="messageName">' + data.name + '</span> ';
+			msg_str += '<span class="messageDate">' + date_str + '</span>\n</div>\n';
+			msg_str += '<div class="message">' + data.message + '</div>\n';
+
+			mbox = document.getElementById('messageBox');
+			mbox.innerHTML = mbox.innerHTML + msg_str;
+			mbox.scrollTop = mbox.scrollHeight;
 		});
 		document.getElementById('text').addEventListener('keypress', function(event) {
 			if (event.key == 'Enter') {
 				text = document.getElementById('text').value;
 				document.getElementById('text').value = '';
-				socket.emit('text', {msg: text});
+				socket.emit('text', {message: text, name: 'Anonymous'});
 			}
 		});
 	}, 100 );
+
+	function padToTwo(number) {
+		if (number<=99) { number = ("0"+number).slice(-2); }
+		return number;
+	}
 	</script>
 </head>
 <body>
 	<div id="document">
-		<h1>Lol</h1>
+		<h1>Chat</h1>
 	</div>
-	<div id="messagebox" style="height:120px; width:320px; border:1px solid #ccc; overflow:auto;">
+	<div id="messageBox" style="height:120px; width:320px; border:1px solid #ccc; overflow:auto;">
 		{% for message in messages %}
 		<div class="message">
-			<div class="messageHeader">{{ message["name"] }} {{ message["date"] | strftime }}</div>
+			<div class="messageHeader">
+				<span class="messageName">{{ message["name"] }}</span> <span class="messageDate">{{ message["date"] | strftime }}</span>
+			</div>
 			<div class="messageMessage">{{ message["message"] }}</div>
 		</div>
 		{% endfor %}
