diff --git a/frontend/src/container/ListAlertRules/ListAlert.tsx b/frontend/src/container/ListAlertRules/ListAlert.tsx
index 5bff7041c8..22d5315b09 100644
--- a/frontend/src/container/ListAlertRules/ListAlert.tsx
+++ b/frontend/src/container/ListAlertRules/ListAlert.tsx
@@ -2,28 +2,35 @@
 import { PlusOutlined } from '@ant-design/icons';
 import { notification, Tag, Typography } from 'antd';
 import Table, { ColumnsType } from 'antd/lib/table';
-import getAll from 'api/alerts/getAll';
 import TextToolTip from 'components/TextToolTip';
 import ROUTES from 'constants/routes';
 import useInterval from 'hooks/useInterval';
 import history from 'lib/history';
 import React, { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { UseQueryResult } from 'react-query';
 import { generatePath } from 'react-router-dom';
+import { ErrorResponse, SuccessResponse } from 'types/api';
 import { Alerts } from 'types/api/alerts/getAll';
 
 import DeleteAlert from './DeleteAlert';
 import { Button, ButtonContainer } from './styles';
 import Status from './TableComponents/Status';
 
-function ListAlert({ allAlertRules }: ListAlertProps): JSX.Element {
+function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 	const [data, setData] = useState<Alerts[]>(allAlertRules || []);
+	const { t } = useTranslation('common');
 
 	useInterval(() => {
 		(async (): Promise<void> => {
-			const { payload, statusCode } = await getAll();
-
-			if (statusCode === 200 && payload !== null) {
-				setData(payload);
+			const { data: refetchData, status } = await refetch();
+			if (status === 'success') {
+				setData(refetchData?.payload || []);
+			}
+			if (status === 'error') {
+				notification.error({
+					message: t('something_went_wrong'),
+				});
 			}
 		})();
 	}, 30000);
@@ -148,6 +155,7 @@ function ListAlert({ allAlertRules }: ListAlertProps): JSX.Element {
 
 interface ListAlertProps {
 	allAlertRules: Alerts[];
+	refetch: UseQueryResult<ErrorResponse | SuccessResponse<Alerts[]>>['refetch'];
 }
 
 export default ListAlert;
diff --git a/frontend/src/container/ListAlertRules/index.tsx b/frontend/src/container/ListAlertRules/index.tsx
index 8fd131736c..abcf1efe58 100644
--- a/frontend/src/container/ListAlertRules/index.tsx
+++ b/frontend/src/container/ListAlertRules/index.tsx
@@ -8,8 +8,9 @@ import ListAlert from './ListAlert';
 
 function ListAlertRules(): JSX.Element {
 	const { t } = useTranslation('common');
-	const { data, isError, isLoading } = useQuery('allAlerts', {
+	const { data, isError, isLoading, refetch } = useQuery('allAlerts', {
 		queryFn: getAll,
+		cacheTime: 0,
 	});
 
 	if (isError) {
@@ -24,6 +25,7 @@ function ListAlertRules(): JSX.Element {
 		<ListAlert
 			{...{
 				allAlertRules: data.payload,
+				refetch,
 			}}
 		/>
 	);