diff --git a/frontend/src/constants/reactQueryKeys.ts b/frontend/src/constants/reactQueryKeys.ts
index c4997dd45b..93adb0ff8a 100644
--- a/frontend/src/constants/reactQueryKeys.ts
+++ b/frontend/src/constants/reactQueryKeys.ts
@@ -2,4 +2,5 @@ export const REACT_QUERY_KEY = {
 	GET_ALL_LICENCES: 'GET_ALL_LICENCES',
 	GET_QUERY_RANGE: 'GET_QUERY_RANGE',
 	GET_ALL_DASHBOARDS: 'GET_ALL_DASHBOARDS',
+	GET_TRIGGERED_ALERTS: 'GET_TRIGGERED_ALERTS',
 };
diff --git a/frontend/src/container/TriggeredAlerts/TriggeredAlert.tsx b/frontend/src/container/TriggeredAlerts/TriggeredAlert.tsx
index 2b1da13a4b..18d40b7a4b 100644
--- a/frontend/src/container/TriggeredAlerts/TriggeredAlert.tsx
+++ b/frontend/src/container/TriggeredAlerts/TriggeredAlert.tsx
@@ -1,5 +1,3 @@
-import getTriggeredApi from 'api/alerts/getTriggered';
-import useInterval from 'hooks/useInterval';
 import { useState } from 'react';
 import { Alerts } from 'types/api/alerts/getTriggered';
 
@@ -9,68 +7,34 @@ import NoFilterTable from './NoFilterTable';
 import { NoTableContainer } from './styles';
 
 function TriggeredAlerts({ allAlerts }: TriggeredAlertsProps): JSX.Element {
-	const [allInitialAlerts, setInitialAlerts] = useState(allAlerts || []);
-
-	useInterval(() => {
-		(async (): Promise<void> => {
-			const response = await getTriggeredApi({
-				active: true,
-				inhibited: true,
-				silenced: false,
-			});
-
-			if (response.statusCode === 200 && response.payload !== null) {
-				// commented reduce() call as we no longer use /alerts/groups
-				// from alertmanager which needed re-grouping on client side
-				// const initialAlerts: Alerts[] = [];
-
-				// const allAlerts: Alerts[] = response.payload.reduce((acc, cur) => {
-				//	return [...acc, ...cur.alerts];
-				// }, initialAlerts);
-
-				setInitialAlerts(response.payload);
-			}
-		})();
-	}, 30000);
-
 	const [selectedGroup, setSelectedGroup] = useState<Value[]>([]);
 	const [selectedFilter, setSelectedFilter] = useState<Value[]>([]);
 
 	return (
 		<div>
 			<Filter
-				{...{
-					allAlerts: allInitialAlerts,
-					selectedFilter,
-					selectedGroup,
-					setSelectedFilter,
-					setSelectedGroup,
-				}}
+				allAlerts={allAlerts}
+				selectedFilter={selectedFilter}
+				selectedGroup={selectedGroup}
+				setSelectedFilter={setSelectedFilter}
+				setSelectedGroup={setSelectedGroup}
 			/>
 
 			{selectedFilter.length === 0 && selectedGroup.length === 0 ? (
 				<NoTableContainer>
-					<NoFilterTable
-						selectedFilter={selectedFilter}
-						allAlerts={allInitialAlerts}
-					/>
+					<NoFilterTable selectedFilter={selectedFilter} allAlerts={allAlerts} />
 				</NoTableContainer>
 			) : (
 				<div>
 					{selectedFilter.length !== 0 && selectedGroup.length === 0 ? (
 						<NoTableContainer>
-							<NoFilterTable
-								selectedFilter={selectedFilter}
-								allAlerts={allInitialAlerts}
-							/>
+							<NoFilterTable selectedFilter={selectedFilter} allAlerts={allAlerts} />
 						</NoTableContainer>
 					) : (
 						<FilteredTable
-							{...{
-								allAlerts: allInitialAlerts,
-								selectedFilter,
-								selectedGroup,
-							}}
+							allAlerts={allAlerts}
+							selectedFilter={selectedFilter}
+							selectedGroup={selectedGroup}
 						/>
 					)}
 				</div>
diff --git a/frontend/src/container/TriggeredAlerts/index.tsx b/frontend/src/container/TriggeredAlerts/index.tsx
index 379c0b1106..106be51fda 100644
--- a/frontend/src/container/TriggeredAlerts/index.tsx
+++ b/frontend/src/container/TriggeredAlerts/index.tsx
@@ -1,91 +1,43 @@
 import getTriggeredApi from 'api/alerts/getTriggered';
 import Spinner from 'components/Spinner';
-import { State } from 'hooks/useFetch';
-import { useNotifications } from 'hooks/useNotifications';
-import { useCallback, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PayloadProps } from 'types/api/alerts/getTriggered';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import useAxiosError from 'hooks/useAxiosError';
+import { useQuery } from 'react-query';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
 
 import TriggerComponent from './TriggeredAlert';
 
 function TriggeredAlerts(): JSX.Element {
-	const [groupState, setGroupState] = useState<State<PayloadProps>>({
-		error: false,
-		errorMessage: '',
-		loading: true,
-		success: false,
-		payload: [],
-	});
-	const { t } = useTranslation(['common']);
-	const { notifications } = useNotifications();
+	const userId = useSelector<AppState, string | undefined>(
+		(state) => state.app.user?.userId,
+	);
 
-	const fetchData = useCallback(async () => {
-		try {
-			setGroupState((state) => ({
-				...state,
-				loading: true,
-			}));
+	const handleError = useAxiosError();
 
-			const response = await getTriggeredApi({
-				active: true,
-				inhibited: true,
-				silenced: false,
-			});
+	const alertsResponse = useQuery(
+		[REACT_QUERY_KEY.GET_TRIGGERED_ALERTS, userId],
+		{
+			queryFn: () =>
+				getTriggeredApi({
+					active: true,
+					inhibited: true,
+					silenced: false,
+				}),
+			refetchInterval: 30000,
+			onError: handleError,
+		},
+	);
 
-			if (response.statusCode === 200) {
-				setGroupState((state) => ({
-					...state,
-					loading: false,
-					payload: response.payload || [],
-				}));
-			} else {
-				setGroupState((state) => ({
-					...state,
-					loading: false,
-					error: true,
-					errorMessage: response.error || 'Something went wrong',
-				}));
-			}
-		} catch (error) {
-			setGroupState((state) => ({
-				...state,
-				error: true,
-				loading: false,
-				errorMessage: 'Something went wrong',
-			}));
-		}
-	}, []);
-
-	useEffect(() => {
-		fetchData();
-	}, [fetchData]);
-
-	useEffect(() => {
-		if (groupState.error) {
-			notifications.error({
-				message: groupState.errorMessage || t('something_went_wrong'),
-			});
-		}
-	}, [groupState.error, groupState.errorMessage, t, notifications]);
-
-	if (groupState.error) {
+	if (alertsResponse.error) {
 		return <TriggerComponent allAlerts={[]} />;
 	}
 
-	if (groupState.loading || groupState.payload === undefined) {
+	if (alertsResponse.isFetching || alertsResponse?.data?.payload === undefined) {
 		return <Spinner height="75vh" tip="Loading Alerts..." />;
 	}
 
-	// commented the reduce() call as we no longer use /alerts/groups
-	// API from alert manager, which returns a group for each receiver
-
-	// const initialAlerts: Alerts[] = [];
-
-	// const allAlerts: Alerts[] = groupState.payload.reduce((acc, curr) => {
-	//	return [...acc, ...curr.alerts];
-	// }, initialAlerts);
-
-	return <TriggerComponent allAlerts={groupState.payload} />;
+	return <TriggerComponent allAlerts={alertsResponse?.data?.payload || []} />;
 }
 
 export default TriggeredAlerts;