diff --git a/app/src/components/SettingsDrawer/BrokerStatistics.tsx b/app/src/components/SettingsDrawer/BrokerStatistics.tsx
index aabf2a8..04b3c7c 100644
--- a/app/src/components/SettingsDrawer/BrokerStatistics.tsx
+++ b/app/src/components/SettingsDrawer/BrokerStatistics.tsx
@@ -7,6 +7,7 @@ import { Theme, withStyles } from '@material-ui/core/styles'
 import { TopicViewModel } from '../../model/TopicViewModel'
 import { Typography } from '@material-ui/core'
 import { usePollingToFetchTreeNode } from '../helper/usePollingToFetchTreeNode'
+import { useUpdateComponentWhenNodeUpdates } from '../helper/useUpdateComponentWhenNodeUpdates'
 const abbreviate = require('number-abbreviate')
 
 interface Stats {
@@ -32,6 +33,7 @@ interface Props {
 function BrokerStatistics(props: Props) {
   const { tree, classes } = props
   const sysTopic = usePollingToFetchTreeNode(props.tree, '$SYS')
+  useUpdateComponentWhenNodeUpdates(sysTopic)
 
   return useMemo(() => {
     if (!Boolean(sysTopic)) {
diff --git a/app/src/components/helper/useUpdateComponentWhenNodeUpdates.tsx b/app/src/components/helper/useUpdateComponentWhenNodeUpdates.tsx
new file mode 100644
index 0000000..e8385d9
--- /dev/null
+++ b/app/src/components/helper/useUpdateComponentWhenNodeUpdates.tsx
@@ -0,0 +1,17 @@
+import * as q from '../../../../backend/src/Model'
+import { useEffect, useState } from 'react'
+
+export function useUpdateComponentWhenNodeUpdates(node?: q.TreeNode<any>): number {
+  const [lastUpdate, setLastUpdate] = useState(0)
+  useEffect(() => {
+    if (!node) {
+      return
+    }
+    const updateComponent = () => setLastUpdate(Date.now())
+    node.onMerge.subscribe(updateComponent)
+    return function cleanup() {
+      node.onMerge.unsubscribe(updateComponent)
+    }
+  }, [node])
+  return lastUpdate
+}