diff --git a/resource/template/common/header.html b/resource/template/common/header.html
index 0443dc9..0b47369 100644
--- a/resource/template/common/header.html
+++ b/resource/template/common/header.html
@@ -6,6 +6,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <meta content="telephone=no" name="format-detection">
     <title>{{.Title}}</title>
     <link rel="stylesheet" type="text/css"
         href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/semantic-ui/2.4.1/semantic.min.css">
diff --git a/resource/template/theme-default/service.html b/resource/template/theme-default/service.html
index 71e1aae..199088b 100644
--- a/resource/template/theme-default/service.html
+++ b/resource/template/theme-default/service.html
@@ -53,6 +53,8 @@
                         <th class="ui center aligned">MIN</th>
                         <th class="ui center aligned">{{tr "NextCheck"}}</th>
                         <th class="ui center aligned">{{tr "CurrentUsage"}}</th>
+                        <th class="ui center aligned" style="display:none!important">用量</th>
+                        <th class="ui center aligned" id="TotalTable" style="display:none!important">总量</th>
                     </tr>
                 </thead>
                 <tbody>
@@ -68,6 +70,8 @@
                             <td class="ui center aligned">{{$stats.Min|bf}}</td>
                             <td class="ui center aligned">{{(index $stats.NextUpdate $innerId)|sft}}</td>
                             <td class="ui center aligned">{{$transfer|bf}}</td>
+                            <td class="ui center aligned used" style="display:none!important">{{$transfer}}</td>
+                            <td class="ui center aligned total" style="display:none!important">{{$stats.Max}}</td>
                         </tr>
                     {{end}}
                     {{end}}
@@ -78,5 +82,27 @@
         </div>
     </div>
 </div>
+<script>
+window.onload = function(){
+var used = []
+var total = []
+var percent = []
+$("#TotalTable").after("<th class='ui center aligned' style='padding: 0px 31px 0px 31px;'>剩余</th>")
+$('.used').each(function () {
+        used.push($(this).html())
+    })
+$('.total').each(function () {
+        total.push($(this).html())
+    })
+for(var i=0;i<used.length;i++){
+    percent[i] = (100 - ((used[i] / total[i]) * 100)).toFixed(2)
+    if (percent[i] < 25){
+            $(".total").eq(i).after("<td class='ui center aligned' style='padding: 14px 0px 0px 0px; position: relative;><div class='thirteen wide column'><div class='ui progress warning'><div class='bar' style='transition-duration: 300ms; min-width: unset; background-color: rgb(10, 148, 242); width: "+percent[i]+"% !important;'><small>"+percent[i]+"%</small></div></div></div></td>") 
+    }else{
+            $(".total").eq(i).after("<td class='ui center aligned' style='padding: 14px 0px 0px 0px; position: relative;'><div class='thirteen wide column'><div class='ui progress fine'><div class='bar' style='transition-duration: 300ms; min-width: unset; background-color: rgb(10, 148, 242); width: "+percent[i]+"% !important;'><small>"+percent[i]+"%</small></div></div></div></td>") 
+    } 
+}
+}
+</script>
 {{template "common/footer" .}}
 {{end}}
\ No newline at end of file