diff --git a/web/assets/js/util/common.js b/web/assets/js/util/common.js
index 89b2c3e8..0478e6c5 100644
--- a/web/assets/js/util/common.js
+++ b/web/assets/js/util/common.js
@@ -110,6 +110,19 @@ function usageColor(data, threshold, total) {
     }
 }
 
+function clientUsageColor(clientStats, trafficDiff) {
+    switch (true) {
+        case !clientStats || clientStats.total == 0:
+            return "#7a316f";
+        case clientStats.up + clientStats.down < clientStats.total - trafficDiff:
+            return "#0e49b5";
+        case clientStats.up + clientStats.down < clientStats.total:
+            return "#FFA031";
+        default:
+            return "#E04141";
+    }
+}
+
 function userExpiryColor(threshold, client, isDark = false) {
     if (!client.enable) {
         return isDark ? '#2c3950' : '#bcbcbc';
diff --git a/web/html/xui/client_modal.html b/web/html/xui/client_modal.html
index c30f22fb..853b83a7 100644
--- a/web/html/xui/client_modal.html
+++ b/web/html/xui/client_modal.html
@@ -110,9 +110,6 @@
             get isExpiry() {
                 return this.clientModal.isEdit && this.client.expiryTime >0 ? (this.client.expiryTime < new Date().getTime())  : false;
             },
-            get statsColor() {
-                return usageColor(clientStats.up + clientStats.down, app.trafficDiff, this.client.totalGB);
-            },
             get delayedStart() {
                 return this.clientModal.delayedStart;
             },
diff --git a/web/html/xui/form/client.html b/web/html/xui/form/client.html
index da7ab787..f2063c27 100644
--- a/web/html/xui/form/client.html
+++ b/web/html/xui/form/client.html
@@ -89,7 +89,7 @@
         <tr v-if="isEdit && clientStats">
             <td>{{ i18n "usage" }}</td>
             <td>
-                <a-tag :color="statsColor">
+                <a-tag :color="clientUsageColor(clientStats, app.trafficDiff)">
                     [[ sizeFormat(clientStats.up) ]] / 
                     [[ sizeFormat(clientStats.down) ]]
                     ([[ sizeFormat(clientStats.up + clientStats.down) ]])
diff --git a/web/html/xui/inbound_client_table.html b/web/html/xui/inbound_client_table.html
index ea248980..58ae0124 100644
--- a/web/html/xui/inbound_client_table.html
+++ b/web/html/xui/inbound_client_table.html
@@ -84,7 +84,7 @@
                                 :percent="statsProgress(record, client.email)"/>
                 </td>
                 <td width="120px" v-else-if="client.totalGB > 0">
-                    <a-progress :stroke-color="statsColor(record, client.email)"
+                    <a-progress :stroke-color="clientStatsColor(record, client.email)"
                                 :show-info="false"
                                 :status="isClientOnline(client.email)? 'active' : isClientEnabled(record, client.email)? 'exception' : ''"
                                 :percent="statsProgress(record, client.email)"/>
@@ -200,7 +200,7 @@
                                     </tr>
                                 </table>
                             </template>
-                            <a-progress :stroke-color="statsColor(record, client.email)"
+                            <a-progress :stroke-color="clientStatsColor(record, client.email)"
                                         :show-info="false"
                                         :status="isClientOnline(client.email)? 'active' : isClientEnabled(record, client.email)? 'exception' : ''"
                                         :percent="statsProgress(record, client.email)"/>
diff --git a/web/html/xui/inbound_info_modal.html b/web/html/xui/inbound_info_modal.html
index 289ea3cb..89909f06 100644
--- a/web/html/xui/inbound_info_modal.html
+++ b/web/html/xui/inbound_info_modal.html
@@ -10,38 +10,43 @@
     <table style="margin-bottom: 10px; width: 100%;">
         <tr><td>
             <table>
-                <tr><td>{{ i18n "protocol" }}</td><td><a-tag color="green">[[ dbInbound.protocol ]]</a-tag></td></tr>
-                <tr><td>{{ i18n "pages.inbounds.address" }}</td><td><a-tag color="blue">[[ dbInbound.address ]]</a-tag></td></tr>
-                <tr><td>{{ i18n "pages.inbounds.port" }}</td><td><a-tag color="green">[[ dbInbound.port ]]</a-tag></td></tr>
+                <tr><td>{{ i18n "protocol" }}</td><td><a-tag color="purple">[[ dbInbound.protocol ]]</a-tag></td></tr>
+                <tr><td>{{ i18n "pages.inbounds.address" }}</td><td><a-tag>[[ dbInbound.address ]]</a-tag></td></tr>
+                <tr><td>{{ i18n "pages.inbounds.port" }}</td><td><a-tag>[[ dbInbound.port ]]</a-tag></td></tr>
             </table>
         </td>
         <td v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
             <table>
                 <tr>
-                    <td>{{ i18n "transmission" }}</td><td><a-tag color="green">[[ inbound.network ]]</a-tag></td>
+                    <td>{{ i18n "transmission" }}</td><td><a-tag color="blue">[[ inbound.network ]]</a-tag></td>
                 </tr>
             <template v-if="inbound.isTcp || inbound.isWs || inbound.isH2">
-                <tr v-if="inbound.host"><td>{{ i18n "host" }}</td><td><a-tag color="green">[[ inbound.host ]]</a-tag></td></tr>
-                <tr v-else><td>{{ i18n "host" }}</td><td><a-tag color="orange">{{ i18n "none" }}</a-tag></td></tr>
-            
-                <tr v-if="inbound.path"><td>{{ i18n "path" }}</td><td><a-tag color="green">[[ inbound.path ]]</a-tag></td></tr>
-                <tr v-else><td>{{ i18n "path" }}</td><td><a-tag color="orange">{{ i18n "none" }}</a-tag></td></tr>
+                <tr>
+                    <td>{{ i18n "host" }}</td>
+                    <td v-if="inbound.host"><a-tag>[[ inbound.host ]]</a-tag></td>
+                    <td v-else><a-tag color="orange">{{ i18n "none" }}</a-tag></td></tr>
+                </tr>
+                <tr>
+                    <td>{{ i18n "path" }}</td>
+                    <td v-if="inbound.path"><a-tag>[[ inbound.path ]]</a-tag></td>
+                    <td v-else><a-tag color="orange">{{ i18n "none" }}</a-tag></td>
+                </tr>
             </template>
             
             <template v-if="inbound.isQuic">
-                <tr><td>quic {{ i18n "encryption" }}</td><td><a-tag color="green">[[ inbound.quicSecurity ]]</a-tag></td></tr>
-                <tr><td>quic {{ i18n "password" }}</td><td><a-tag color="green">[[ inbound.quicKey ]]</a-tag></td></tr>
-                <tr><td>quic {{ i18n "camouflage" }}</td><td><a-tag color="green">[[ inbound.quicType ]]</a-tag></td></tr>
+                <tr><td>quic {{ i18n "encryption" }}</td><td><a-tag>[[ inbound.quicSecurity ]]</a-tag></td></tr>
+                <tr><td>quic {{ i18n "password" }}</td><td><a-tag>[[ inbound.quicKey ]]</a-tag></td></tr>
+                <tr><td>quic {{ i18n "camouflage" }}</td><td><a-tag>[[ inbound.quicType ]]</a-tag></td></tr>
             </template>
             
             <template v-if="inbound.isKcp">
-                <tr><td>kcp {{ i18n "encryption" }}</td><td><a-tag color="green">[[ inbound.kcpType ]]</a-tag></td></tr>
-                <tr><td>kcp {{ i18n "password" }}</td><td><a-tag color="green">[[ inbound.kcpSeed ]]</a-tag></td></tr>
+                <tr><td>kcp {{ i18n "encryption" }}</td><td><a-tag>[[ inbound.kcpType ]]</a-tag></td></tr>
+                <tr><td>kcp {{ i18n "password" }}</td><td><a-tag>[[ inbound.kcpSeed ]]</a-tag></td></tr>
             </template>
             
             <template v-if="inbound.isGrpc">
-                <tr><td>grpc serviceName</td><td><a-tag color="green">[[ inbound.serviceName ]]</a-tag></td></tr>
-                <tr><td>grpc multiMode</td><td><a-tag color="green">[[ inbound.stream.grpc.multiMode ]]</a-tag></td></tr>
+                <tr><td>grpc serviceName</td><td><a-tag>[[ inbound.serviceName ]]</a-tag></td></tr>
+                <tr><td>grpc multiMode</td><td><a-tag>[[ inbound.stream.grpc.multiMode ]]</a-tag></td></tr>
             </template>
             </table>
         </td></tr>
@@ -60,13 +65,13 @@
     <table v-if="dbInbound.isSS" style="margin-bottom: 10px; width: 100%;">
         <tr>
             <td>{{ i18n "encryption" }}</td>
-            <td><a-tag color="green">[[ inbound.settings.method ]]</a-tag></td>
+            <td><a-tag color="blue">[[ inbound.settings.method ]]</a-tag></td>
         </tr><tr v-if="inbound.isSS2022">
             <td>{{ i18n "password" }}</td>
-            <td><a-tag color="blue">[[ inbound.settings.password ]]</a-tag></td>
+            <td><a-tag>[[ inbound.settings.password ]]</a-tag></td>
         </tr><tr>
             <td>{{ i18n "pages.inbounds.network" }}</td>
-            <td><a-tag color="green">[[ inbound.settings.network ]]</a-tag></td>
+            <td><a-tag color="blue">[[ inbound.settings.network ]]</a-tag></td>
         </tr>
     </table>
     <template v-if="infoModal.clientSettings">
@@ -74,37 +79,37 @@
         <table style="margin-bottom: 10px;">
             <tr>
                 <td>{{ i18n "pages.inbounds.email" }}</td>
-                <td><a-tag color="green">[[ infoModal.clientSettings.email ]]</a-tag></td>
+                <td><a-tag color="blue">[[ infoModal.clientSettings.email ]]</a-tag></td>
             </tr>
             <tr v-if="infoModal.clientSettings.id">
                 <td>ID</td>
-                <td><a-tag color="green">[[ infoModal.clientSettings.id ]]</a-tag></td>
+                <td><a-tag>[[ infoModal.clientSettings.id ]]</a-tag></td>
             </tr>
             <tr v-if="infoModal.inbound.canEnableTlsFlow()">
                 <td>Flow</td>
-                <td><a-tag color="green">[[ infoModal.clientSettings.flow ]]</a-tag></td>
+                <td><a-tag>[[ infoModal.clientSettings.flow ]]</a-tag></td>
             </tr>
             <tr v-if="infoModal.clientSettings.password">
                 <td>Password</td>
-                <td><a-tag color="green">[[ infoModal.clientSettings.password ]]</a-tag></td>
+                <td><a-tag>[[ infoModal.clientSettings.password ]]</a-tag></td>
             </tr>
             <tr>
                 <td>{{ i18n "status" }}</td>
                 <td>
                     <a-tag v-if="isEnable" color="blue">{{ i18n "enabled" }}</a-tag>
-                    <a-tag v-else color="red">{{ i18n "disabled" }}</a-tag>
+                    <a-tag v-else>{{ i18n "disabled" }}</a-tag>
                     <a-tag v-if="!isActive" color="red">{{ i18n "depleted" }}</a-tag>
                 </td>
             </tr>
             <tr v-if="infoModal.clientStats">
                 <td>{{ i18n "usage" }}</td>
                 <td>
-                    <a-tag color="green">[[ sizeFormat(infoModal.clientStats.up + infoModal.clientStats.down) ]]</a-tag>
-                    <a-tag color="blue">↑ [[ sizeFormat(infoModal.clientStats.up) ]] / [[ sizeFormat(infoModal.clientStats.down) ]] ↓</a-tag>
+                    <a-tag color="blue">[[ sizeFormat(infoModal.clientStats.up + infoModal.clientStats.down) ]]</a-tag>
+                    <a-tag>↑ [[ sizeFormat(infoModal.clientStats.up) ]] / [[ sizeFormat(infoModal.clientStats.down) ]] ↓</a-tag>
                 </td>
             </tr>
         </table>
-        <table style="margin-bottom: 10px; width: 100%;">
+        <table style="margin-bottom: 10px; width: 100%; text-align: center;">
             <tr>
                 <th>{{ i18n "remained" }}</th>
                 <th>{{ i18n "pages.inbounds.totalFlow" }}</th>
@@ -120,7 +125,7 @@
                     <a-tag v-if="infoModal.clientSettings.totalGB > 0" :color="statsColor(infoModal.clientStats)">
                         [[ sizeFormat(infoModal.clientSettings.totalGB) ]]
                     </a-tag>
-                    <a-tag v-else color="green">{{ i18n "indefinite" }}</a-tag>
+                    <a-tag v-else color="purple" class="infinite-tag">&infin;</a-tag>
                 </td>
                 <td>
                     <template v-if="infoModal.clientSettings.expiryTime > 0">
@@ -128,8 +133,8 @@
                             [[ DateUtil.formatMillis(infoModal.clientSettings.expiryTime) ]]
                         </a-tag>
                     </template>
-                    <a-tag v-else-if="infoModal.clientSettings.expiryTime < 0" color="cyan">[[ infoModal.clientSettings.expiryTime / -86400000 ]] {{ i18n "pages.client.days" }}</a-tag>
-                    <a-tag v-else color="green">{{ i18n "indefinite" }}</a-tag>
+                    <a-tag v-else-if="infoModal.clientSettings.expiryTime < 0" color="blue">[[ infoModal.clientSettings.expiryTime / -86400000 ]] {{ i18n "pages.client.days" }}</a-tag>
+                    <a-tag v-else color="purple" class="infinite-tag">&infin;</a-tag>
                 </td>
             </tr>
         </table>
@@ -162,7 +167,7 @@
         <template v-if="dbInbound.hasLink()">
             <a-divider>URL</a-divider>
             <a-row v-for="(link,index) in infoModal.links">
-                <a-col :span="22"><a-tag color="cyan">[[ link.remark ]]</a-tag><br />[[ link.link ]]</a-col>
+                <a-col :span="22"><a-tag color="blue">[[ link.remark ]]</a-tag><br />[[ link.link ]]</a-col>
                 <a-col :span="2" style="text-align: right;">
                     <a-tooltip title='{{ i18n "copy" }}'>
                         <button class="ant-btn ant-btn-primary" :id="'copy-url-link-'+index" @click="copyToClipboard('copy-url-link-'+index, link.link)">
@@ -177,7 +182,7 @@
         <template v-if="dbInbound.isSS && !inbound.isSSMultiUser">
             <a-divider>URL</a-divider>
             <a-row v-for="(link,index) in infoModal.links">
-                <a-col :span="22"><a-tag color="cyan">[[ link.remark ]]</a-tag><br />[[ link.link ]]</a-col>
+                <a-col :span="22"><a-tag color="blue">[[ link.remark ]]</a-tag><br />[[ link.link ]]</a-col>
                 <a-col :span="2" style="text-align: right;">
                     <a-tooltip title='{{ i18n "copy" }}'>
                         <button class="ant-btn ant-btn-primary" :id="'copy-url-link-'+index" @click="copyToClipboard('copy-url-link-'+index, link.link)">
@@ -194,9 +199,9 @@
                 <th>{{ i18n "pages.inbounds.network" }}</th>
                 <th>FollowRedirect</th>
             </tr><tr>
-                <td><a-tag color="green">[[ inbound.settings.address ]]</a-tag></td>
+                <td><a-tag color="blue">[[ inbound.settings.address ]]</a-tag></td>
                 <td><a-tag color="blue">[[ inbound.settings.port ]]</a-tag></td>
-                <td><a-tag color="green">[[ inbound.settings.network ]]</a-tag></td>
+                <td><a-tag color="blue">[[ inbound.settings.network ]]</a-tag></td>
                 <td><a-tag color="blue">[[ inbound.settings.followRedirect ]]</a-tag></td>
             </tr>
         </table>
@@ -208,7 +213,7 @@
             </tr>
             <tr>
                 <td><a-tag color="green">[[ inbound.settings.auth ]]</a-tag></td>
-                <td><a-tag color="blue">[[ inbound.settings.udp]]</a-tag></td>
+                <td><a-tag color="green">[[ inbound.settings.udp]]</a-tag></td>
                 <td><a-tag color="green">[[ inbound.settings.ip ]]</a-tag></td>
             </tr>
             <template v-if="inbound.settings.auth == 'password'">
@@ -217,9 +222,9 @@
                 <td>{{ i18n "username" }}</td>
                 <td>{{ i18n "password" }}</td>
             </tr><tr v-for="account,index in inbound.settings.accounts">
-                <td><a-tag color="green">[[ index ]]</a-tag></td>
+                <td>[[ index ]]</td>
                 <td><a-tag color="blue">[[ account.user ]]</a-tag></td>
-                <td><a-tag color="green">[[ account.pass ]]</a-tag></td>
+                <td><a-tag color="blue">[[ account.pass ]]</a-tag></td>
             </tr>
             </template>
         </table>
@@ -229,9 +234,9 @@
                 <th>{{ i18n "username" }}</th>
                 <th>{{ i18n "password" }}</th>
             </tr><tr v-for="account,index in inbound.settings.accounts">
-                <td><a-tag color="green">[[ index ]]</a-tag></td>
+                <td>[[ index ]]</td>
                 <td><a-tag color="blue">[[ account.user ]]</a-tag></td>
-                <td><a-tag color="green">[[ account.pass ]]</a-tag></td>
+                <td><a-tag color="blue">[[ account.pass ]]</a-tag></td>
             </tr>
         </table>
     </template>
diff --git a/web/html/xui/inbounds.html b/web/html/xui/inbounds.html
index 228f403d..e75346a7 100644
--- a/web/html/xui/inbounds.html
+++ b/web/html/xui/inbounds.html
@@ -1115,19 +1115,10 @@
                 remained = clientStats.totalGB - (clientStats.up + clientStats.down);
                 return remained>0 ? remained : 0;
             },
-            statsColor(dbInbound, email) {
-                if (email.length == 0) return '#0e49b5';
+            clientStatsColor(dbInbound, email) {
+                if (email.length == 0) return clientUsageColor();
                 clientStats = dbInbound.clientStats.find(stats => stats.email === email);
-                switch (true) {
-                    case !clientStats:
-                        return "#0e49b5";
-                    case clientStats.up + clientStats.down < clientStats.total - app.trafficDiff:
-                        return "#0e49b5";
-                    case clientStats.up + clientStats.down < clientStats.total:
-                        return "#FFA031";
-                    default:
-                        return "#E04141";
-                }
+                return clientUsageColor(clientStats, app.trafficDiff)
             },
             statsProgress(dbInbound, email) {
                 if (email.length == 0) return 100;