diff --git a/index.html b/index.html
index 9feb1d8..f3e684e 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,7 @@
         $(function () {
             // Create socket
             var socket = io();
+            const date = new Date();
 
             // Wait for server response and identify client
             socket.on('user_identify', function(){
@@ -28,32 +29,58 @@
 
             // Receive messages from server
             socket.on('message_receive', function(msg){
-                $('.message_container').append($('<span>').html(msg.username + ': ' + msg.message));
-                $('.message_container').append($('<br>'));
+                document.getElementById('message_container').innerHTML += 
+                    `<div class="message">
+                        <img src="https://www.gravatar.com/avatar/${msg.mailHash}?s=48">
+                        <div>
+                            <span>${msg.username}</span>
+                            <span>${date.getHours() + ':' + date.getMinutes()}</span>
+                            <span>${msg.message}</span>
+                        </div>
+                    </div>`;
             });
         });
     </script>
   </head>
   <body>
     <style>
-      div.chat_container {
-        border: 1px solid black;
-        width: 500px;
-      }
-      div.message_container {
-        border: 1px solid black;
-        height: 500px;
-        overflow: auto;
-      }
-      div.input_container {
-        border: 1px solid black;
-      }
-      div.input_container > form > input, div.input_container > button {
-        margin: 10px;
-      }
+        div.chat_container {
+            border: 1px solid black;
+            width: 500px;
+        }
+        div#message_container {
+            border: 1px solid black;
+            height: 500px;
+            overflow: auto;
+        }
+        div.input_container {
+            border: 1px solid black;
+        }
+        div.input_container > form > input, div.input_container > button {
+            margin: 10px;
+        }
+        div.message {
+            background-color: white;
+            height: auto;
+            word-wrap: anywhere;
+            display: grid;
+            grid-template-columns: 48px auto; 
+        }
+        div.message > div { 
+            height: auto;
+            display: grid;
+            padding: 10px 10px 10px 20px;
+            grid-template-areas: 
+              'username time'
+              'message message';
+        }
+        div.message > img { padding: 10px; }
+        div.message > div > span:nth-child(1) { grid-area: username; border-left: 3px solid black; padding-left: 5px;}
+        div.message > div > span:nth-child(2) { grid-area: time; text-align: right;}
+        div.message > div > span:nth-child(3) { grid-area: message; border-left: 3px solid black; padding-left: 5px;}
     </style> 
     <div class="chat_container">
-      <div class="message_container">
+      <div id="message_container">
         <!-- JS will push messages here -->
       </div>
       <div class="input_container">
