diff --git a/frontend/src/container/ListAlertRules/index.tsx b/frontend/src/container/ListAlertRules/index.tsx
index abcf1efe58..a5c616bfe6 100644
--- a/frontend/src/container/ListAlertRules/index.tsx
+++ b/frontend/src/container/ListAlertRules/index.tsx
@@ -8,15 +8,22 @@ import ListAlert from './ListAlert';
 
 function ListAlertRules(): JSX.Element {
 	const { t } = useTranslation('common');
-	const { data, isError, isLoading, refetch } = useQuery('allAlerts', {
+	const { data, isError, isLoading, refetch, status } = useQuery('allAlerts', {
 		queryFn: getAll,
 		cacheTime: 0,
 	});
 
+	// api failed to load the data
 	if (isError) {
 		return <div>{data?.error || t('something_went_wrong')}</div>;
 	}
 
+	// api is successful but error is present
+	if (status === 'success' && data.statusCode !== 200) {
+		return <div>{data?.error || t('something_went_wrong')}</div>;
+	}
+
+	// in case of loading
 	if (isLoading || !data?.payload) {
 		return <Spinner height="75vh" tip="Loading Rules..." />;
 	}