diff --git a/web/public/index.html b/web/public/index.html
index 3cb6d97..569cd1a 100644
--- a/web/public/index.html
+++ b/web/public/index.html
@@ -41,11 +41,11 @@
       .piece-progress{
         position: relative;
         z-index: 1;
-        background-color:#009090;
+        background-color:#3fb57a;
 
-        top: 0;
-        left: 0;
-        width: 10px;
+        top: -1px;
+        left: -1px;
+        width: 12px;
       }
     </style>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/web/src/components/DialogCacheInfo.js b/web/src/components/DialogCacheInfo.js
index bc2b2a6..f993da1 100644
--- a/web/src/components/DialogCacheInfo.js
+++ b/web/src/components/DialogCacheInfo.js
@@ -122,9 +122,8 @@ export default function DialogCacheInfo(props) {
                 </Typography>
             </DialogTitle>
             <DialogContent>
-                {/*<div className="cache" dangerouslySetInnerHTML={{ __html: getCacheMap(cache) }} />*/}
                 <div className="cache">
-                    {pMap.map((itm) => <span className={itm.class} title={itm.info}>{itm.prc>0 && itm.prc<100 && (<div className="piece-progress" style={{height: itm.prc+"%"}}></div>)}</span>)}
+                    {pMap.map((itm) => <span className={itm.class} title={itm.info}>{itm.prc>0 && itm.prc<100 && (<div className="piece-progress" style={{height: itm.prc/100*12+"px"}}></div>)}</span>)}
                 </div>
             </DialogContent>
         </div>