diff --git a/src/components/pipelines-metrics/PipelinesMetricsPage.tsx b/src/components/pipelines-metrics/PipelinesMetricsPage.tsx
index 60ce6771..e141dbb6 100644
--- a/src/components/pipelines-metrics/PipelinesMetricsPage.tsx
+++ b/src/components/pipelines-metrics/PipelinesMetricsPage.tsx
@@ -70,6 +70,7 @@ const PipelinesMetricsPage: React.FC = () => {
           summaryData={sampleData.summary}
           bordered={false}
           namespace={namespace}
+          interval={interval}
         />
 
         <Flex>
diff --git a/src/components/pipelines-overview/PipelineRunsDurationCard.tsx b/src/components/pipelines-overview/PipelineRunsDurationCard.tsx
index 71e4de9d..800cec19 100644
--- a/src/components/pipelines-overview/PipelineRunsDurationCard.tsx
+++ b/src/components/pipelines-overview/PipelineRunsDurationCard.tsx
@@ -14,7 +14,7 @@ import {
   Grid,
   GridItem,
 } from '@patternfly/react-core';
-import { SummaryProps } from './utils';
+import { SummaryProps, useInterval } from './utils';
 import { getResultsSummary } from '../utils/summary-api';
 import { DataType } from '../utils/tekton-results';
 import { ALL_NAMESPACES_KEY } from '../../consts';
@@ -49,7 +49,7 @@ const PipelinesRunsDurationCard: React.FC<PipelinesRunsDurationProps> = ({
     ? (filter = `data.status.startTime>timestamp("${date}")&&data.metadata.labels['tekton.dev/pipeline']=="${parentName}"`)
     : (filter = `data.status.startTime>timestamp("${date}")`);
 
-  React.useEffect(() => {
+  const getSummaryData = () => {
     getResultsSummary(namespace, {
       summary: 'total_duration,avg_duration,max_duration',
       data_type: DataType.PipelineRun,
@@ -61,7 +61,9 @@ const PipelinesRunsDurationCard: React.FC<PipelinesRunsDurationProps> = ({
       .catch((e) => {
         console.error('unable to post', e);
       });
-  }, [namespace, timespan]);
+  };
+
+  useInterval(getSummaryData, interval, namespace, date);
 
   return (
     <>
diff --git a/src/components/pipelines-overview/PipelineRunsNumbersChart.tsx b/src/components/pipelines-overview/PipelineRunsNumbersChart.tsx
index 74bfdc11..e08e3471 100644
--- a/src/components/pipelines-overview/PipelineRunsNumbersChart.tsx
+++ b/src/components/pipelines-overview/PipelineRunsNumbersChart.tsx
@@ -22,6 +22,7 @@ import {
 import { DataType } from '../utils/tekton-results';
 import { SummaryResponse, getResultsSummary } from '../utils/summary-api';
 import { ALL_NAMESPACES_KEY } from '../../consts';
+import { useInterval } from './utils';
 
 interface PipelinesRunsNumbersChartProps {
   namespace?: string;
@@ -65,7 +66,7 @@ const PipelinesRunsNumbersChart: React.FC<PipelinesRunsNumbersChartProps> = ({
     ? (filter = `data.status.startTime>timestamp("${date}")&&data.metadata.labels['tekton.dev/pipeline']=="${parentName}"`)
     : (filter = `data.status.startTime>timestamp("${date}")`);
 
-  React.useEffect(() => {
+  const getSummaryData = () => {
     const summaryOpt = {
       summary: 'total',
       data_type: DataType.PipelineRun,
@@ -74,11 +75,15 @@ const PipelinesRunsNumbersChart: React.FC<PipelinesRunsNumbersChartProps> = ({
     };
 
     getResultsSummary(namespace, summaryOpt)
-      .then((d) => setData(d))
+      .then((d) => {
+        setData(d);
+      })
       .catch((e) => {
         throw e;
       });
-  }, [namespace, date, interval]);
+  };
+
+  useInterval(getSummaryData, interval, namespace, date);
 
   const chartData = tickValues?.map((value) => {
     return {
diff --git a/src/components/pipelines-overview/PipelineRunsStatusCard.tsx b/src/components/pipelines-overview/PipelineRunsStatusCard.tsx
index 4c44b0e1..348fdf6d 100644
--- a/src/components/pipelines-overview/PipelineRunsStatusCard.tsx
+++ b/src/components/pipelines-overview/PipelineRunsStatusCard.tsx
@@ -35,12 +35,12 @@ import {
   getXaxisValues,
   parsePrometheusDuration,
 } from './dateTime';
-import { SummaryProps } from './utils';
+import { SummaryProps, useInterval } from './utils';
 import { SummaryResponse, getResultsSummary } from '../utils/summary-api';
 import { DataType } from '../utils/tekton-results';
+import './PipelinesOverview.scss';
 import { LoadingInline } from '../Loading';
 import { ALL_NAMESPACES_KEY } from '../../consts';
-import './PipelinesOverview.scss';
 
 interface PipelinesRunsStatusCardProps {
   timespan?: number;
@@ -48,6 +48,7 @@ interface PipelinesRunsStatusCardProps {
   summaryData: SummaryProps;
   bordered?: boolean;
   namespace: string;
+  interval: number;
 }
 
 type DomainType = { x?: DomainTuple; y?: DomainTuple };
@@ -57,6 +58,7 @@ const PipelinesRunsStatusCard: React.FC<PipelinesRunsStatusCardProps> = ({
   domain,
   bordered,
   namespace,
+  interval,
 }) => {
   const { t } = useTranslation('plugin__pipeline-console-plugin');
   const [data, setData] = React.useState<SummaryResponse>();
@@ -75,32 +77,40 @@ const PipelinesRunsStatusCard: React.FC<PipelinesRunsStatusCardProps> = ({
     namespace = '-';
   }
 
-  React.useEffect(() => {
+  const getSummaryData = (summary, setData, groupBy?) => {
     const summaryOpt = {
-      summary: 'succeeded,cancelled,failed,others,running,total',
+      summary,
       filter: `data.status.startTime>timestamp("${date}")`,
       data_type: DataType.PipelineRun,
     };
+    groupBy && (summaryOpt['groupBy'] = groupBy);
+
     getResultsSummary(namespace, summaryOpt)
-      .then((d) => setData(d))
+      .then((d) => {
+        setData(d);
+      })
       .catch((e) => {
         throw e;
       });
-  }, [namespace, date]);
+  };
 
-  React.useEffect(() => {
-    const summaryOpt2 = {
-      summary: 'succeeded,total',
-      filter: `data.status.startTime>timestamp("${date}")`,
-      groupBy: 'day',
-      data_type: DataType.PipelineRun,
-    };
-    getResultsSummary(namespace, summaryOpt2)
-      .then((d) => setData2(d))
-      .catch((e) => {
-        throw e;
-      });
-  }, [namespace, date]);
+  useInterval(
+    () =>
+      getSummaryData(
+        'succeeded,cancelled,failed,others,running,total',
+        setData,
+      ),
+    interval,
+    namespace,
+    date,
+  );
+
+  useInterval(
+    () => getSummaryData('succeeded,total', setData2, 'day'),
+    interval,
+    namespace,
+    date,
+  );
 
   const tickValues = getXaxisValues(timespan);
 
diff --git a/src/components/pipelines-overview/PipelineRunsTotalCard.tsx b/src/components/pipelines-overview/PipelineRunsTotalCard.tsx
index b6f44779..9cd35552 100644
--- a/src/components/pipelines-overview/PipelineRunsTotalCard.tsx
+++ b/src/components/pipelines-overview/PipelineRunsTotalCard.tsx
@@ -11,7 +11,7 @@ import {
   GridItem,
   Label,
 } from '@patternfly/react-core';
-import { SummaryProps } from './utils';
+import { SummaryProps, useInterval } from './utils';
 import { PipelineModel, RepositoryModel } from '../../models';
 import { getResultsSummary } from '../utils/summary-api';
 import { DataType } from '../utils/tekton-results';
@@ -44,51 +44,44 @@ const PipelinesRunsTotalCard: React.FC<PipelinesRunsDurationProps> = ({
   }
 
   const date = getDropDownDate(timespan).toISOString();
-  const filter = `data.metadata.labels.contains("pipelinesascode.tekton.dev/repository")&&data.status.startTime>timestamp("${date}")`;
 
-  React.useEffect(() => {
+  const getSummaryData = (filter, setData) => {
     getResultsSummary(namespace, {
       summary: 'total',
       data_type: DataType.PipelineRun,
       filter,
     })
       .then((response) => {
-        setRepoRun(response.summary[0].total);
+        setData(response.summary[0].total);
       })
       .catch((e) => {
         console.error('Error in getSummary', e);
       });
-  }, [namespace, timespan]);
+  };
+
+  const filter = `data.metadata.labels.contains("pipelinesascode.tekton.dev/repository")&&data.status.startTime>timestamp("${date}")`;
+  useInterval(
+    () => getSummaryData(filter, setRepoRun),
+    interval,
+    namespace,
+    date,
+  );
 
   const filter2 = `!data.metadata.labels.contains("pipelinesascode.tekton.dev/repository")&&data.status.startTime>timestamp("${date}")`;
-  React.useEffect(() => {
-    getResultsSummary(namespace, {
-      summary: 'total',
-      data_type: DataType.PipelineRun,
-      filter: filter2,
-    })
-      .then((response) => {
-        setPlrRun(response.summary[0].total);
-      })
-      .catch((e) => {
-        console.error('Error in getSummary', e);
-      });
-  }, [namespace, timespan]);
+  useInterval(
+    () => getSummaryData(filter2, setPlrRun),
+    interval,
+    namespace,
+    date,
+  );
 
   const filter3 = `data.status.startTime>timestamp("${date}")`;
-  React.useEffect(() => {
-    getResultsSummary(namespace, {
-      summary: 'total',
-      data_type: DataType.PipelineRun,
-      filter: filter3,
-    })
-      .then((response) => {
-        setTotalRun(response.summary[0].total);
-      })
-      .catch((e) => {
-        console.error('Error in getSummary', e);
-      });
-  }, [namespace, timespan]);
+  useInterval(
+    () => getSummaryData(filter3, setTotalRun),
+    interval,
+    namespace,
+    date,
+  );
 
   return (
     <>
diff --git a/src/components/pipelines-overview/PipelinesOverviewPage.tsx b/src/components/pipelines-overview/PipelinesOverviewPage.tsx
index 2a7ddb4b..b0cc326f 100644
--- a/src/components/pipelines-overview/PipelinesOverviewPage.tsx
+++ b/src/components/pipelines-overview/PipelinesOverviewPage.tsx
@@ -109,6 +109,7 @@ const PipelinesOverviewPage: React.FC = () => {
           summaryData={sampleData.summary}
           bordered={true}
           namespace={namespace}
+          interval={interval}
         />
 
         <Flex>
diff --git a/src/components/pipelines-overview/utils.ts b/src/components/pipelines-overview/utils.ts
index 66e42958..ae0f48b4 100644
--- a/src/components/pipelines-overview/utils.ts
+++ b/src/components/pipelines-overview/utils.ts
@@ -67,3 +67,18 @@ export const LAST_LANGUAGE_LOCAL_STORAGE_KEY = 'bridge/last-language';
 
 export const getLastLanguage = (): string =>
   localStorage.getItem(LAST_LANGUAGE_LOCAL_STORAGE_KEY);
+
+export const useInterval = (
+  getData: () => void,
+  interval: number,
+  namespace: string,
+  date: string,
+) => {
+  React.useEffect(() => {
+    getData();
+    if (interval !== null) {
+      const intervalID = setInterval(() => getData(), interval);
+      return () => clearInterval(intervalID);
+    }
+  }, [interval, namespace, date]);
+};