diff --git a/app/index.html b/app/index.html
index 94e1168..cd95e5c 100644
--- a/app/index.html
+++ b/app/index.html
@@ -118,7 +118,7 @@
       }
       #side-nav {
           height: 100%;
-          width: 250px;
+          width: 300px;
           flex: 0 0 auto !important;
           float: left;
           padding: 0;
@@ -218,7 +218,7 @@
       }
 
       #logout {
-        width: 200px;
+        width: 250px;
         margin: 0 25px;
         box-sizing: border-box;
         background-color: #4E342E;
@@ -236,13 +236,11 @@
       #log {
         font-size: 12px;
       }
-      #log-container {  
-        padding: 15px; 
-        height: calc(100% - 280px);
-        margin-bottom: 40px
+      #log-container {   
+        height: calc(100% - 320px);
+        margin-bottom: 70px;
       }
-      #log-text {
-        padding-bottom: 15px;      
+      #log-text {   
         overflow-y: scroll;
         width: 100%;
         height: 100%;
@@ -293,7 +291,7 @@
         background-color: #5D4037;
       }
       #log-container h6 {
-        margin-bottom: 25px;
+        padding: 15px;
       }
       .tabs .indicator {
           background-color: #5D4037;
@@ -324,6 +322,37 @@
       .modal.modal-fixed-footer .modal-footer {
         background: #FFF;
       }
+      .log-img {
+        height: 30px;
+        float: right;
+      }
+      .log-date {
+        display: block;
+        opacity: 0.6;
+      }
+      .log-pokemon {
+        height: 60px;
+      }
+      .log-message {
+        margin-top: 0;
+      }
+      .log-item {
+        padding: 5px 15px;
+        border-bottom: 1px solid rgba(0,0,0,0.25);
+      }
+      .log-item:after {
+        content: "";
+        display: table;
+        clear: both;
+      }
+      .log-image-container {
+        width: 60px;
+        float: right;
+      }
+      .log-message-narrow {
+        width: 200px;
+        float: left;
+      }
     </style>
   </head>
   <body>
diff --git a/app/index.js b/app/index.js
index 59df22b..f3cfac5 100644
--- a/app/index.js
+++ b/app/index.js
@@ -93,8 +93,7 @@ $(document).ready(function() {
   ipcRenderer.on('pythonLog', function(evt, data) {
     var lines = data.msg.split("\n")
     for (var i = 0; i < lines.length; i++) {
-      var line = lines[i].replace(/\[\d\d:\d\d:\d\d\] /, "")
-      $('#log').append('<p>' + line + '</p>');
+        log(lines[i]);
     }
     console.log(data.msg);
   });
@@ -518,4 +517,58 @@ function fillInventory(){
         </div>';
             $('#modal-info').html(text);
             setTimeout(function(){$('.tabs').tabs();},1);
+}
+
+function log(message){
+  if(message.length < 1)
+  {
+    return;
+  }
+  var log = {};
+
+  var bracket_data = message.match(/\[(.*?)\]/g);
+  if(!bracket_data)
+  {
+    console.log("Error while parsing message: "+message);
+    return;
+  }
+  log.worker = bracket_data[0].replace(/[\[\]]/g,"");
+  log.type = bracket_data[1].replace(/[\[\]]/g,"");
+  log.action = bracket_data[2].replace(/[\[\]]/g,"");
+  log.message = message.split("["+log.action+"] ")[1];
+  log.images = [];
+
+  // Check for item words
+  for (var key in itemsArray) {
+    var item_name = itemsArray[key];
+    if(log.message.indexOf(item_name)>-1)
+    {
+      log.images.push('<img src="../resources/image/items/'+key+'.png" class="log-img">')
+    }
+  }
+
+  // Check for pokemon words
+  for(var i = 0; i < pokemonArray.length; i++)
+  {
+    if(log.message.indexOf(pokemonArray[i].Name)>-1)
+    {
+      log.images.push('<img src="../resources/image/pokemon/'+pad_with_zeroes(i+1,3)+'.png" class="log-img log-pokemon">')
+    }
+  }
+  log.date = new Date();
+  var log_item = "";
+  if(log.images.length>0){
+    log_item = '<div class="log-item">\
+                   <span class="log-date">'+ log.date.toTimeString().split(" ")[0] +"</span>\
+                   <p class='log-message log-message-narrow'>"+ log.message +"</p>\
+                   <div class='log-image-container'>" +log.images.join("")+"</div>\
+                </div>";
+  }else {
+    log_item = '<div class="log-item">\
+                   <span class="log-date">'+ log.date.toTimeString().split(" ")[0] +"</span>\
+                   <p class='log-message'>"+ log.message +"</p>\
+                </div>";
+  }
+  $('#log').append(log_item);
+  $('#log-text').animate({scrollTop: $('#log-text')[0].scrollHeight}, 100);
 }
\ No newline at end of file
