diff --git a/css/main.css b/css/main.css
index b48f12f..6febfec 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,266 +1,266 @@
-html, body {
-	height: 100%;
-	margin: 0;
-	padding: 0;
+html,
+body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
 }
 #map {
-	height: 100%;
+    height: 100%;
 }
 #menu {
-	position: fixed;
-	right: 10px;
-	top: 10px;
-	z-index: 5;
-	height: auto;
-	width: 180px;
+    position: fixed;
+    right: 10px;
+    top: 10px;
+    z-index: 5;
+    height: auto;
+    width: 180px;
 }
 #submenu {
-	position: fixed;
-	left: 50%;
-	top: 10px;
-	transform: translate(-50%, 0);
-	width: 50%;
-	z-index: 6;
-	display: none;
+    position: fixed;
+    left: 50%;
+    top: 10px;
+    transform: translate(-50%, 0);
+    width: 70%;
+    z-index: 6;
+    display: none;
 }
 #sortButtons {
-	text-align: right;
+    text-align: right;
 }
 #sortButtons .chip {
-	margin-right: 3px;
+    margin-right: 3px;
 }
 #close {
-	float: right;
-	font-size: 32px;
-	cursor: pointer;
-	line-height: 48px;
+    float: right;
+    font-size: 32px;
+    cursor: pointer;
+    line-height: 48px;
 }
 .items {
-	overflow-y: scroll;
-	overflow-x: hidden;
-	height: 80vh;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    max-height: 70vh;
 }
 .item_img {
-	width: 75px;
-	height: auto;
+    width: 75px;
+    height: auto;
 }
 .gif_img {
-	width: 38px;
-	height: auto;
+    width: 38px;
+    height: auto;
 }
 .png_img {
-	width: 96px;
-	height: auto;
+    width: 96px;
+    height: auto;
 }
 .navButton {
-	position: relative;
-	top: -30px;
-	right: -30px;
+    position: relative;
+    top: -30px;
+    right: -30px;
 }
 .row {
-	margin-bottom: 0;
+    margin-bottom: 0;
 }
 .collapsible-body a {
-	width: 100%;
+    width: 100%;
 }
 #toast-container {
-  top: auto !important;
-  right: auto !important;
-  bottom: 10%;
-  left:7%;
-  z-index: 0
+    top: auto !important;
+    right: auto !important;
+    bottom: 10%;
+    left: 7%;
+    z-index: 0
 }
 #toast-container > .toast {
     float: left;
 }
 #bots-list {
-	max-height: 80vh;
+    max-height: 70vh;
+    overflow-y: scroll;
 }
 #bots-list::-webkit-scrollbar {
-	display: none;
+    display: none;
 }
 .collapsible-body {
-	background: #FFF;
-	padding: 1em;
+    background: #FFF;
+    padding: 1em;
 }
 .card .card-content {
-	padding: 10px 20px 20px 20px;
+    padding: 10px 20px 20px 20px;
 }
 .collapsible-title {
-	display: block;
-	min-height: 3rem;
-	line-height: 3rem;
-	padding: 0 1rem;
-	background-color: #fff;
-	border-bottom: 1px solid #ddd;
-}
-
+    display: block;
+    min-height: 3rem;
+    line-height: 3rem;
+    padding: 0 1rem;
+    background-color: #fff;
+    border-bottom: 1px solid #ddd;
+}
 .collapsible-title i {
-	width: 2rem;
-	font-size: 1.6rem;
-	line-height: 3rem;
-	display: block;
-	float: left;
-	text-align: center;
-	margin-right: 1rem;
-}
-
+    width: 2rem;
+    font-size: 1.6rem;
+    line-height: 3rem;
+    display: block;
+    float: left;
+    text-align: center;
+    margin-right: 1rem;
+}
 .bot-name {
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
 }
 #logs-panel {
-	display: none;
-	position: fixed;
-	height: 50vh;
-	width: 360px;
-	z-index: 5;
-	left: 10px;
-	bottom: 10px;
+    display: none;
+    position: fixed;
+    height: 50vh;
+    width: 360px;
+    z-index: 5;
+    left: 10px;
+    bottom: 10px;
 }
 #logs-panel .card {
-	overflow-y: scroll;
-	height: 100%;
-	margin: 0;
+    overflow-y: scroll;
+    height: 100%;
+    margin: 0;
 }
 .log-item {
-	padding: .3em 0 .3em 0;
-	font-size: 14px;
+    padding: .3em 0 .3em 0;
+    font-size: 14px;
 }
 .log-date {
-	color: #666;
+    color: #666;
 }
 .bot-0 {
-	background-color: #A93226 !important;
+    background-color: #A93226 !important;
 }
 .bot-0:hover {
-	background-color: #E6B0AA;
+    background-color: #E6B0AA;
 }
 .botbar-0 {
-	background-color: #E6B0AA;
+    background-color: #E6B0AA;
 }
 .bot-1 {
-	background-color: #884EA0 !important;
+    background-color: #884EA0 !important;
 }
 .bot-1:hover {
-	background-color: #D7BDE2;
+    background-color: #D7BDE2;
 }
 .botbar-1 {
-	background-color: #D7BDE2;
+    background-color: #D7BDE2;
 }
 .bot-2 {
-	background-color: #2471A3 !important;
+    background-color: #2471A3 !important;
 }
 .bot-2:hover {
-	background-color: #A9CCE3;
+    background-color: #A9CCE3;
 }
 .botbar-2 {
-	background-color: #A9CCE3;
+    background-color: #A9CCE3;
 }
 .bot-3 {
-	background-color: #17A589 !important;
+    background-color: #17A589 !important;
 }
 .bot-3:hover {
-	background-color: #A3E4D7;
+    background-color: #A3E4D7;
 }
 .botbar-3 {
-	background-color: #A3E4D7;
+    background-color: #A3E4D7;
 }
 .bot-4 {
-	background-color: #229954 !important;
+    background-color: #229954 !important;
 }
 .bot-4:hover {
-	background-color: #A9DFBF;
+    background-color: #A9DFBF;
 }
 .botbar-4 {
-	background-color: #A9DFBF;
+    background-color: #A9DFBF;
 }
 .bot-5 {
-	background-color: #D4AC0D !important;
+    background-color: #D4AC0D !important;
 }
 .bot-5:hover {
-	background-color: #F9E79F;
+    background-color: #F9E79F;
 }
 .botbar-5 {
-	background-color: #F9E79F;
+    background-color: #F9E79F;
 }
 .bot-6 {
-	background-color: #CA6F1E !important;
+    background-color: #CA6F1E !important;
 }
 .bot-6:hover {
-	background-color: #F5CBA7;
+    background-color: #F5CBA7;
 }
 .botbar-6 {
-	background-color: #F5CBA7;
+    background-color: #F5CBA7;
 }
 .bot-7 {
-	background-color: #CB4335 !important;
+    background-color: #CB4335 !important;
 }
 .bot-7:hover {
-	background-color: #F5B7B1;
+    background-color: #F5B7B1;
 }
 .botbar-7 {
-	background-color: #F5B7B1;
+    background-color: #F5B7B1;
 }
 .bot-8 {
-	background-color: #7D3C98 !important;
+    background-color: #7D3C98 !important;
 }
 .bot-8:hover {
-	background-color: #D2B4DE;
+    background-color: #D2B4DE;
 }
 .botbar-8 {
-	background-color: #D2B4DE;
+    background-color: #D2B4DE;
 }
 .bot-9 {
-	background-color: #2E86C1 !important;
+    background-color: #2E86C1 !important;
 }
 .bot-9:hover {
-	background-color: #AED6F1;
+    background-color: #AED6F1;
 }
 .botbar-9 {
-	background-color: #AED6F1;
+    background-color: #AED6F1;
 }
 .bot-10 {
-	background-color: #138D75 !important;
+    background-color: #138D75 !important;
 }
 .bot-10:hover {
-	background-color: #A2D9CE;
+    background-color: #A2D9CE;
 }
 .botbar-10 {
-	background-color: #A2D9CE;
+    background-color: #A2D9CE;
 }
 .bot-11 {
-	background-color: #28B463 !important;
+    background-color: #28B463 !important;
 }
 .bot-11:hover {
-	background-color: #ABEBC6;
+    background-color: #ABEBC6;
 }
 .botbar-11 {
-	background-color: #ABEBC6;
+    background-color: #ABEBC6;
 }
 .bot-12 {
-	background-color: #D68910 !important;
+    background-color: #D68910 !important;
 }
 .bot-12:hover {
-	background-color: #FAD7A0;
+    background-color: #FAD7A0;
 }
 .botbar-12 {
-	background-color: #FAD7A0;
+    background-color: #FAD7A0;
 }
 .bot-13 {
-	background-color: #BA4A00 !important;
+    background-color: #BA4A00 !important;
 }
 .bot-13:hover {
-	background-color: #EDBB99;
+    background-color: #EDBB99;
 }
 .botbar-13 {
-	background-color: #EDBB99;
+    background-color: #EDBB99;
 }
-
 .pkmn-progress {
     width: 80%;
     height: 5px;
-    margin: 0.3rem auto;
+    margin: auto;
+    margin-left: 0;
     max-width: 96px;
 }
diff --git a/js/main.js b/js/main.js
index 10ab923..c2cfd0e 100644
--- a/js/main.js
+++ b/js/main.js
@@ -2,6 +2,17 @@
 
 var socket_io;
 var pokemonActions;
+function timeConverter(UNIX_timestamp){
+  var a = new Date(UNIX_timestamp);
+  var year = a.getFullYear();
+  var month = a.getMonth() + 1;
+  var date = a.getDate();
+  var hour = a.getHours();
+  var min = a.getMinutes();
+  var sec = a.getSeconds();
+  var time = ('0' + date).slice(-2) + '-' + ('0' + month).slice(-2) + '-' + year + ' ' + hour + ':' + min + ':' + sec ;
+  return time;
+}
 
 $(document).ready(function() {
   mapView.init();
@@ -690,9 +701,11 @@ var mapView = {
         pkmnIVS = sortedPokemon[i].stamina,
         pkmnHP = sortedPokemon[i].health,
         pkmnMHP = sortedPokemon[i].max_health,
-        candyNum = self.getCandy(pkmnNum, user_id);
+        candyNum = self.getCandy(pkmnNum, user_id),
+	pkmnDate = timeConverter(sortedPokemon[i].creation_time)
+	;
 
-      out += '<div class="col s12 m6 l3 center"><img src="image/pokemon/' +
+      out += '<div class="col s12 m6 l3 left"><img src="image/pokemon/' +
         pkmnImage + '" class="png_img"><br><b>' +
         pkmnName +
         '</b><br><div class="progress pkmn-progress pkmn-' + pkmnNum + '"> <div class="determinate pkmn-' + pkmnNum + '" style="width: ' + (pkmnHP / pkmnMHP) * 100 +'%"></div> </div>'+
@@ -700,7 +713,7 @@ var mapView = {
         '<br><b>CP:</b>' + pkmnCP +
         '<br><b>IV:</b> ' + (pkmnIV >= 0.8 ? '<span style="color: #039be5">' + pkmnIV + '</span>' : pkmnIV) +
         '<br><b>A/D/S:</b> ' + pkmnIVA + '/' + pkmnIVD + '/' + pkmnIVS +
-        '<br><b>Candy: </b>' + candyNum
+        '<br><b>Candy: </b>' + candyNum + '<br><b>Date: </b>' + pkmnDate
         ;
 
       if(Object.keys(pokemonActions).length){