diff --git a/vehicle-data-platform/apps/web/src/App.tsx b/vehicle-data-platform/apps/web/src/App.tsx
index 1df675d6..133def83 100644
--- a/vehicle-data-platform/apps/web/src/App.tsx
+++ b/vehicle-data-platform/apps/web/src/App.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { Toast } from '@douyinfe/semi-ui';
 import { api } from './api/client';
 import { AppShell, type PageKey } from './layout/AppShell';
@@ -15,14 +15,19 @@ export default function App() {
   const [activeVin, setActiveVin] = useState('LB9A32A24R0LS1426');
   const [linkIssueCount, setLinkIssueCount] = useState<number | null>(null);
 
-  useEffect(() => {
-    api.opsHealth()
+  const refreshOpsHealth = useCallback(() => {
+    return api.opsHealth()
       .then((health) => {
         setLinkIssueCount(health.linkHealth.filter((item) => item.status !== 'ok').length);
+        return health;
       })
       .catch((error: Error) => Toast.error(error.message));
   }, []);
 
+  useEffect(() => {
+    refreshOpsHealth();
+  }, [refreshOpsHealth]);
+
   const openVehicle = (vin: string) => {
     const nextVin = vin.trim();
     if (!nextVin) {
@@ -39,7 +44,7 @@ export default function App() {
     detail: <VehicleDetail vin={activeVin} />,
     history: <History />,
     mileage: <Mileage />,
-    quality: <Quality />
+    quality: <Quality onHealthLoaded={(health) => setLinkIssueCount(health.linkHealth.filter((item) => item.status !== 'ok').length)} />
   };
 
   return (
diff --git a/vehicle-data-platform/apps/web/src/pages/Quality.tsx b/vehicle-data-platform/apps/web/src/pages/Quality.tsx
index 8b6116a2..803223fc 100644
--- a/vehicle-data-platform/apps/web/src/pages/Quality.tsx
+++ b/vehicle-data-platform/apps/web/src/pages/Quality.tsx
@@ -18,7 +18,7 @@ function storageReadStatus(health: OpsHealth | null) {
   return health?.tdengineWritable && health.mysqlWritable ? 'ok' : 'error';
 }
 
-export function Quality() {
+export function Quality({ onHealthLoaded }: { onHealthLoaded?: (health: OpsHealth) => void }) {
   const [issues, setIssues] = useState<QualityIssueRow[]>([]);
   const [health, setHealth] = useState<OpsHealth | null>(null);
   const [loadingIssues, setLoadingIssues] = useState(true);
@@ -42,7 +42,10 @@ export function Quality() {
   useEffect(() => {
     loadIssues({}, 1, pagination.pageSize);
     api.opsHealth()
-      .then(setHealth)
+      .then((nextHealth) => {
+        setHealth(nextHealth);
+        onHealthLoaded?.(nextHealth);
+      })
       .catch((error: Error) => Toast.error(error.message));
   }, []);