diff --git a/cmd/dashboard/controller/controller.go b/cmd/dashboard/controller/controller.go
index f655620..cb7f4fa 100644
--- a/cmd/dashboard/controller/controller.go
+++ b/cmd/dashboard/controller/controller.go
@@ -148,13 +148,34 @@ var funcMap = template.FuncMap{
 	"add": func(a, b int) int {
 		return a + b
 	},
-	"Transleft": func(a, b float64) (n float64) {
+	"TransLeftPercent": func(a, b float64) (n float64) {
 		n, _ = strconv.ParseFloat(fmt.Sprintf("%.2f", (100-(a/b)*100)), 64)
 		if n < 0 {
 			n = 0
 		}
 		return
 	},
+	"TransLeft": func(a, b uint64) string {
+		if a < b {
+			return "0KB"
+		}
+		return bytefmt.ByteSize(a - b)
+	},
+	"TransClassName": func(a float64) string {
+		if a == 0 {
+			return "offline"
+		}
+		if a > 50 {
+			return "fine"
+		}
+		if a > 20 {
+			return "warning"
+		}
+		if a > 0 {
+			return "error"
+		}
+		return "offline"
+	},
 	"UintToFloat": func(a uint64) (n float64) {
 		n, _ = strconv.ParseFloat((strconv.FormatUint(a, 10)), 64)
 		return
diff --git a/resource/template/theme-default/service.html b/resource/template/theme-default/service.html
index b7d03ce..c79ec61 100644
--- a/resource/template/theme-default/service.html
+++ b/resource/template/theme-default/service.html
@@ -59,6 +59,7 @@
                 <tbody>
                     {{range $id, $stats := .CycleTransferStats}}
                     {{range $innerId, $transfer := $stats.Transfer}}
+                    {{$TransLeftPercent := TransLeftPercent (UintToFloat $transfer) (UintToFloat $stats.Max)}}
                         <tr>
                             <td class="ui center aligned">{{$id}}</td>
                             <td class="ui center aligned">{{$stats.Name}}</td>
@@ -69,7 +70,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" 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>
+                            <td class="ui center aligned" style="padding: 14px 0px 0px 0px; position: relative;"><div class="thirteen wide column"><div class="ui progress {{TransClassName $TransLeftPercent}}" style=" background: rgba(0,0,0,.1); background-color: rgba(0,0,0,.1)!important; height: 25px;"><div class="bar" style="transition-duration: 300ms; min-width: unset; background-color: rgb(10, 148, 242); width: {{$TransLeftPercent}}% !important;"></div><small style="position: relative; top: -2em;;">{{TransLeft $stats.Max $transfer}} / {{$TransLeftPercent}} %</small></div></div></td>
                         </tr>
                     {{end}}
                     {{end}}