diff --git a/front-end/src/components/AlertsPage.js b/front-end/src/components/AlertsPage.js
index 7627bdf..8a55cfd 100644
--- a/front-end/src/components/AlertsPage.js
+++ b/front-end/src/components/AlertsPage.js
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import axios from 'axios';
+import { queryAlert } from '../utils/alerts';
 import '../css/alertsPage.css';
 
 function AlertsPage() {
@@ -8,41 +8,11 @@ function AlertsPage() {
   const [error, setError] = useState('');
 
   const fetchAlerts = () => {
-    // axios
-    //   .get(`${process.env.REACT_APP_SERVER_HOSTNAME}/fetchAlerts`)
-    //   .then((response) => {
-    //     // axios bundles up all response data in response.data property
-    //     const alerts = response.data.alerts;
-    //     setAlerts(alerts);
-    //   })
-    //   .catch((err) => {
-    //     setError(err);
-    //   })
-    //   .finally(() => {
-    //     // the response has been received, so remove the loading icon
-    //     setLoaded(true);
-    //   });
-
-    // Only for DEMO remove later
-    setAlerts([
-      {
-        title: 'Alert Title A',
-        content:
-          'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu bibendum at varius vel pharetra vel turpis nunc. Suscipit adipiscing bibendum est ultricies integer. Turpis nunc eget lorem dolor.',
-      },
-      {
-        title: 'Alert Title B',
-        content:
-          'Bibendum est ultricies integer quis. Diam maecenas ultricies mi eget mauris pharetra et ultrices neque.',
-      },
-      {
-        title: 'Alert Title C',
-        content:
-          'Sit amet porttitor eget dolor morbi non arcu risus quis. Quis blandit turpis cursus in hac habitasse platea. Pellentesque elit eget gravida cum sociis natoque penatibus et.',
-      },
-      { title: 'Alert Title D', content: 'Eu feugiat pretium nibh ipsum consequat nisl.' },
-    ]);
-    // --------------------------
+    queryAlert(true).then((messages) => {
+      setAlerts(messages);
+      setLoaded(true);
+      // if alerts are loaded, remove the loading icon (if any)
+    });
   };
 
   useEffect(() => {
@@ -54,12 +24,17 @@ function AlertsPage() {
       <h1 className="alerts-header">Alerts</h1>
       <div className="alerts-content">
         <div className="alerts-item-wrapper">
-          {alerts.map((alert, index) => (
-            <div key={index} className="alerts-item">
-              <h3 className="font-semibold text-xl">{alert.title}</h3>
-              <p>{alert.content}</p>
-            </div>
-          ))}
+          {alerts && alerts.length ? (
+            alerts.map((alert) => (
+              <div key={alert.id} className="alerts-item">
+                <span className="time">{alert.createdF}</span>
+                <div className="headertext">{alert.gtfsAlertHeaderText}</div>
+                <p>{alert.gtfsAlertDescriptionText}</p>
+              </div>
+            ))
+          ) : (
+            <div>There is no alert</div>
+          )}
         </div>
       </div>
     </div>
diff --git a/front-end/src/css/alertsPage.css b/front-end/src/css/alertsPage.css
index a5b9d29..17730e0 100644
--- a/front-end/src/css/alertsPage.css
+++ b/front-end/src/css/alertsPage.css
@@ -22,6 +22,14 @@
   @apply bg-lightMidTone w-80 p-4 rounded-xl shadow-md space-y-2;
 }
 
+.alerts-item .time {
+  @apply text-sm;
+}
+
+.alerts-item .headertext {
+  @apply font-semibold text-xl;
+}
+
 .dark .alerts-item {
   @apply bg-darkMode-lightMidTone text-black;
 }
diff --git a/front-end/src/utils/alerts.js b/front-end/src/utils/alerts.js
new file mode 100644
index 0000000..bd50264
--- /dev/null
+++ b/front-end/src/utils/alerts.js
@@ -0,0 +1,74 @@
+// Todo
+// Interval-based background query
+
+import axios from 'axios';
+
+// const QUERY_INTERVAL = 120000; // 2 mins
+const MIN_QUERY_DELAY = 60000; // 1 min
+let lastMessages = [];
+let lastQuery = 0;
+
+// Query alert. referch parameter determines "query all" or "query updates only"
+export async function queryAlert(refresh) {
+  // Prevent too frequent requests
+  if (performance.now() - lastQuery < MIN_QUERY_DELAY) {
+    return lastMessages;
+  }
+
+  // JSON payload
+  const json = {
+    systemSelected0: localStorage.agencyId,
+  };
+
+  const subscribedRoutes = localStorage.subscribedRoutes ? localStorage.subscribedRoutes.split(',') : [];
+  subscribedRoutes.forEach((route, index) => {
+    json['routeSelected' + index] = route;
+  });
+
+  json.amount = 1;
+  json.routesAmount = subscribedRoutes.length;
+
+  // Params for URL
+  const params = {
+    getAlertMessages: '1',
+    deviceId: localStorage.deviceId,
+    alertCRC: refresh ? 'na' : localStorage.alertCRC,
+    buildNo: localStorage.softwareVer,
+  };
+
+  // Fetch all or updates
+  if (refresh) {
+    params.embedded = '0';
+  } else {
+    params.noOption = '1';
+  }
+
+  const urlParams = new URLSearchParams(params);
+  const url = `${localStorage.serviceEndpointSub}/goServices.php?${urlParams.toString()}`;
+
+  try {
+    const response = await axios.post(url, json);
+    const data = response.data;
+    if (!data) {
+      throw new Error('empty response');
+    }
+    if (data.agencyPhone) {
+      localStorage.agencyPhone = data.agencyPhone;
+    }
+    if (data.wsUrl) {
+      localStorage.wsUrl = data.wsUrl;
+    }
+    if ((data.alertCRC && data.alertCRC != localStorage.alertCRC) || (data.msgs && data.msgs.length)) {
+      localStorage.alertCRC = data.alertCRC;
+    }
+    const messages = data.msgs && data.msgs.length ? data.msgs : [];
+
+    lastMessages = messages;
+    lastQuery = performance.now();
+
+    return messages;
+  } catch (error) {
+    console.log('Alerts query error: ' + error.message);
+    return [];
+  }
+}