diff --git a/cmd/dashboard/controller/controller.go b/cmd/dashboard/controller/controller.go
index 8984d65..f655620 100644
--- a/cmd/dashboard/controller/controller.go
+++ b/cmd/dashboard/controller/controller.go
@@ -148,6 +148,17 @@ var funcMap = template.FuncMap{
 	"add": func(a, b int) int {
 		return a + b
 	},
+	"Transleft": func(a, b float64) (n float64) {
+		n, _ = strconv.ParseFloat(fmt.Sprintf("%.2f", (100-(a/b)*100)), 64)
+		if n < 0 {
+			n = 0
+		}
+		return
+	},
+	"UintToFloat": func(a uint64) (n float64) {
+		n, _ = strconv.ParseFloat((strconv.FormatUint(a, 10)), 64)
+		return
+	},
 	"dayBefore": func(i int) string {
 		year, month, day := time.Now().Date()
 		today := time.Date(year, month, day, 0, 0, 0, 0, time.Local)
diff --git a/resource/l10n/zh-CN.toml b/resource/l10n/zh-CN.toml
index c135bd2..40818ec 100644
--- a/resource/l10n/zh-CN.toml
+++ b/resource/l10n/zh-CN.toml
@@ -528,3 +528,6 @@ other = "任务失败"
 
 [IPChanged]
 other = "IP变更"
+
+[Transleft]
+other = "流量剩余"
diff --git a/resource/template/theme-default/service.html b/resource/template/theme-default/service.html
index 199088b..b7d03ce 100644
--- a/resource/template/theme-default/service.html
+++ b/resource/template/theme-default/service.html
@@ -53,8 +53,7 @@
                         <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>
+                        <th class='ui center aligned' style='padding: 0px 31px 0px 31px;'>{{tr "Transleft"}}</th>
                     </tr>
                 </thead>
                 <tbody>
@@ -70,8 +69,7 @@
                             <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>
+                            <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: {{Transleft (UintToFloat $transfer) (UintToFloat $stats.Max)}}% !important;"></div><small style="position: absolute; top: 4px; margin-left: -20px;">{{Transleft (UintToFloat $transfer) (UintToFloat $stats.Max)}} %</small></div></div></td>
                         </tr>
                     {{end}}
                     {{end}}
@@ -82,27 +80,5 @@
         </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