diff --git a/web/libs/css/dash2.sidemenu.css b/web/libs/css/dash2.sidemenu.css
index 148f9e93..b80387c2 100644
--- a/web/libs/css/dash2.sidemenu.css
+++ b/web/libs/css/dash2.sidemenu.css
@@ -5,15 +5,15 @@
     padding: 0;
 }
 
-.side-menu .monitor_block{padding:0;position:relative}
-.side-menu .monitor_block img{width:100%;height:75px;cursor:pointer;border: 0.5px inset #263238;}
+.side-menu .monitor_block{padding:2px;position:relative}
+.side-menu .monitor_block img{width:100%;height:75px;cursor:pointer;border: 0.5px solid #003d71;border-radius:4px;}
 @media screen and (max-width:1025px){
 .side-menu .monitor_block img{height:175px;}
 }
 .side-menu .monitor_block:hover .icons{opacity:1}
 .side-menu .monitor_block:hover .title{opacity:1}
-.side-menu .monitor_block .icons,.side-menu .monitor_block .title{opacity:0;width:100%;bottom:0;left:0;background:rgba(0,0,0,0.6);position:absolute;padding:2.5px;z-index:11;cursor:move}
-.side-menu .monitor_block .title{bottom:auto;top:0;color:#fff}
+.side-menu .monitor_block .icons,.side-menu .monitor_block .title{opacity:0;width:calc(100% - 4px);bottom:2px;left:2px;background:rgba(0,0,0,0.6);position:absolute;padding:2.5px;z-index:11;cursor:move;border-radius:4px}
+.side-menu .monitor_block .title{bottom:auto;top:2px;color:#fff}
 .nav-xs.side-menu .monitor_block{width:100%}
 .side-menu .monitor_block .list-data{display:none}
 .output_data:empty{display:none}
diff --git a/web/libs/js/dash2.elementbuilder.js b/web/libs/js/dash2.elementbuilder.js
index 02598017..a739bdff 100644
--- a/web/libs/js/dash2.elementbuilder.js
+++ b/web/libs/js/dash2.elementbuilder.js
@@ -33,7 +33,7 @@ $.ccio.tm=function(x,d,z,user){
             })
         break;
         case 1://monitor icon
-            d.src=placeholder.getData(placeholder.plcimg({bgcolor:'#b57d00',text:'...'}));
+            d.src=placeholder.getData(placeholder.plcimg({bgcolor:'#1d88e2',text:'...'}));
             tmp+='<div auth="'+user.auth_token+'" mid="'+d.mid+'" ke="'+d.ke+'" title="'+d.mid+' : '+d.name+'" class="monitor_block glM'+d.mid+user.auth_token+' col-md-4"><img monitor="watch" class="snapshot" src="'+d.src+'"><div class="box"><div class="title monitor_name truncate">'+d.name+'</div><div class="list-data"><div class="monitor_mid">'+d.mid+'</div><div><b>'+lang['Save as']+' :</b> <span class="monitor_ext">'+d.ext+'</span></div><div><b>Status :</b> <span class="monitor_status">'+d.status+'</span></div></div><div class="icons text-center">'
             tmp+='<div class="btn-group btn-group-xs">'
                 var buttons = {
diff --git a/web/libs/js/dash2.socketio.js b/web/libs/js/dash2.socketio.js
index 7f6810d6..a65fd3f4 100644
--- a/web/libs/js/dash2.socketio.js
+++ b/web/libs/js/dash2.socketio.js
@@ -223,7 +223,7 @@ $.ccio.globalWebsocket=function(d,user){
                 var snapElement = $('[mid="'+d.mid+'"][ke="'+d.ke+'"][auth="'+user.auth_token+'"] .snapshot')
                 switch(d.snapshot_format){
                     case'plc':
-                        snapElement.attr('src',placeholder.getData(placeholder.plcimg(d.snapshot)))
+                        snapElement.attr('src',placeholder.getData(placeholder.plcimg({text:d.snapshot.toUpperCase().split('').join(' '), fsize: 25, bgcolor:'#1462a5'})))
                     break;
                     case'ab':
                         d.reader = new FileReader();
diff --git a/web/libs/js/placeholder.js b/web/libs/js/placeholder.js
index f3e79418..e6c0f395 100644
--- a/web/libs/js/placeholder.js
+++ b/web/libs/js/placeholder.js
@@ -1,2 +1,6 @@
+// placeholder.js : https://www.cssscript.com/generating-custom-image-placeholders-with-pure-javascript-placeholder-js/
+// author : hustcc
+// license : MIT
+// revision : :	December 18, 2015
 (function($){!function(t,e){"object"==typeof module&&module.exports?module.exports=e(t):t.placeholder=e(t)}("undefined"!=typeof window?window:this,function(){function t(t){c&&u||(c=document.createElement("canvas"),u=c.getContext("2d"));var e=parseInt(t.a[0]),n=parseInt(t.a[1]);c.width=e,c.height=n,u.clearRect(0,0,e,n),u.fillStyle=t.c,u.fillRect(0,0,e,n),u.fillStyle=t.d,u.font=t.e+" normal "+t.f+" "+(t.g||100)+"px "+t.h;var r=1;if(""===t.g){var o=.7*e,l=.7*n,i=u.measureText(t.b).width,a=100;r=Math.min(o/i,l/a)}return u.translate(e/2,n/2),u.scale(r,r),u.textAlign="center",u.textBaseline="middle",u.fillText(t.b,0,0),c}function e(){return"#"+("00000"+(16777216*Math.random()<<0).toString(16)).slice(-6)}function n(t){t=t||{};var n=t.size||"128x128",r=t.text||n,o=t.bgcolor||e(),l=t.color||e(),i=t.fstyle||"normal",a=t.fweight||"bold",c=t.fsize||"",u=t.ffamily||"consolas",f={};return n=n.split("x"),2!==n.length&&(n=[128,128]),f.a=n,f.b=r,f.c=o,f.d=l,f.e=i,f.f=a,f.g=c,f.h=u,t=null,f}function r(e){return e=n(e),t(e)}function o(t){return r(t).toDataURL()}function l(t,e,n){return t.getAttribute(e)||n}function i(t){var e,n={},r=t.split("&");for(var o in r){e=r[o].split("=");try{n[e[0]]=decodeURIComponent(e[1])}catch(l){n[e[0]]=e[1]}}return n}function a(t){for(var e,n,r=document.querySelectorAll("img.placeholder"),a=0;a<r.length;a++)e=r[a],!t&&l(e,f,"")||(n=i(l(e,"options","")),e.setAttribute("src",o(n)),e.setAttribute(f,"1"))}var c,u,f="placeholder-rendered";return a(),{getData:o,getCanvas:r,render:a}});})(jQuery)
-placeholder.plcimg=function(k,o){o={size:'200x200',bgcolor:'#630303',color:'#fff',text:'CC',fsize:'40',ffamily:'Segoe UI'};if(typeof k==='string'){o.text=k;};if(typeof k==='object'){$.each(k,function(n,v){o[n]=v;})};return o;};
+placeholder.plcimg=function(k,o){o={size:'200x200',bgcolor:'#d9534f',color:'#fff',text:'CC',fsize:'40',ffamily:'Helvetica Neue',fweight:'normal'};if(typeof k==='string'){o.text=k;};if(typeof k==='object'){$.each(k,function(n,v){o[n]=v;})};return o;};
diff --git a/web/pages/home.ejs b/web/pages/home.ejs
index a6c75fe5..b6ccfbcd 100644
--- a/web/pages/home.ejs
+++ b/web/pages/home.ejs
@@ -54,7 +54,7 @@
       <header id="main_header" class="demo-header mdl-layout__header">
         <div class="mdl-layout__header-row">
         <ul class="nav navbar-nav">
-            <li title="<%-lang['Toggle Sidebar']%>" class_toggle="hide-side" data-target=".mdl-js-layout"><a>&nbsp;<i class="fa fa-bars"></i>&nbsp;</a></li>
+            <li title="<%-lang['Toggle Sidebar']%>" class_toggle="hide-side" data-target=".mdl-js-layout"><a>&nbsp;<i class="fa fa-align-right"></i>&nbsp;</a></li>
             <li title="<%-lang['Add Monitor']%>" mid="" ke="" class="hidden-xs permission_monitor_create"><a monitor="edit">&nbsp;<i class="fa fa-plus"></i>&nbsp;</a></li>
             <li title="<%-lang['Power Video Viewer']%>" class="hidden-xs" data-toggle="modal" data-target="#powerVideo"><a>&nbsp;<i class="fa fa-map-marker"></i>&nbsp;</a></li>
             <li>