diff --git a/src/components/device-page/device-tree.vue b/src/components/device-page/device-tree.vue
index d5bb3e3..8a3f260 100644
--- a/src/components/device-page/device-tree.vue
+++ b/src/components/device-page/device-tree.vue
@@ -130,7 +130,17 @@ const lineDeviceTreeData = computed<Record<string, TreeOption[]>>(() => {
         label: stationName,
         key: stationCode,
         prefix: () => renderStationNodePrefix(station),
-        suffix: () => `(${onlineDevices?.length ?? 0}/${offlineDevices?.length ?? 0}/${devices?.length ?? 0})`,
+        suffix: () => {
+          return h('span', null, [
+            '(',
+            h('span', { style: { color: themeVars.value.successColor } }, `${onlineDevices?.length ?? 0}`),
+            '/',
+            h('span', { style: { color: themeVars.value.errorColor } }, `${offlineDevices?.length ?? 0}`),
+            '/',
+            `${devices?.length ?? 0}`,
+            ')',
+          ]);
+        },
         children:
           lineDevices.value[stationCode]?.[paneName]?.map<TreeOption>((dev) => {
             const device = dev as NdmDeviceResultVO;