diff --git a/frontend/src/components/Brokers/Brokers.tsx b/frontend/src/components/Brokers/Brokers.tsx
index 9d4261a0cb..552beac1da 100644
--- a/frontend/src/components/Brokers/Brokers.tsx
+++ b/frontend/src/components/Brokers/Brokers.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PageLoader from 'components/common/PageLoader/PageLoader';
 import { ClusterId } from 'types';
+import useInterval from 'lib/hooks/useInterval';
 
 interface Props {
   clusterId: string;
@@ -15,8 +16,15 @@ const Topics: React.FC<Props> = ({
   fetchBrokers,
   fetchBrokerMetrics,
 }) => {
-  React.useEffect(() => { fetchBrokers(clusterId); }, [fetchBrokers, clusterId]);
-  React.useEffect(() => { fetchBrokerMetrics(clusterId); }, [fetchBrokerMetrics, clusterId]);
+  React.useEffect(
+    () => {
+      fetchBrokers(clusterId);
+      fetchBrokerMetrics(clusterId);
+    },
+    [fetchBrokers, fetchBrokerMetrics, clusterId],
+  );
+
+  useInterval(() => { fetchBrokerMetrics(clusterId); }, 5000);
 
   if (isFetched) {
     return (
diff --git a/frontend/src/lib/hooks/useInterval.ts b/frontend/src/lib/hooks/useInterval.ts
new file mode 100644
index 0000000000..0d444e70d2
--- /dev/null
+++ b/frontend/src/lib/hooks/useInterval.ts
@@ -0,0 +1,30 @@
+import React from 'react';
+
+type Callback = () => any;
+
+const useInterval = (callback: Callback, delay: number) => {
+  const savedCallback = React.useRef<Callback>();
+
+  React.useEffect(
+    () => {
+      savedCallback.current = callback;
+    },
+    [callback],
+  );
+
+  React.useEffect(
+    () => {
+      const tick = () => {
+        savedCallback.current && savedCallback.current()
+      };
+
+      if (delay !== null) {
+        const id = setInterval(tick, delay);
+        return () => clearInterval(id);
+      }
+    },
+    [delay],
+  );
+}
+
+export default useInterval;