diff --git a/package-lock.json b/package-lock.json
index 6c9b43a..ed97523 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "hpos-dashboard",
+  "name": "hpos-web",
   "version": "0.1.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "hpos-dashboard",
+      "name": "hpos-web",
       "version": "0.1.0",
       "dependencies": {
         "@testing-library/jest-dom": "^5.16.5",
diff --git a/src/components/Alerts.css b/src/components/Alerts.css
new file mode 100644
index 0000000..5310b0e
--- /dev/null
+++ b/src/components/Alerts.css
@@ -0,0 +1,10 @@
+.alert-card {
+    width: 40vw;
+   height: 20vh;
+   background-color: white;
+   margin: 10px;
+   border-style: solid;
+   border-color: rgb(219, 219, 219);
+   border-radius: 6px;
+   border-width: max(1px, 0.0625rem);
+}
\ No newline at end of file
diff --git a/src/components/Alerts.js b/src/components/Alerts.js
new file mode 100644
index 0000000..3d146b8
--- /dev/null
+++ b/src/components/Alerts.js
@@ -0,0 +1,43 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { query, collection, onSnapshot } from 'firebase/firestore';
+
+import './Alerts.css';
+import db from '../firebase';
+
+const Alerts = () => {
+    const [alerts, setAlerts] = useState([]);
+
+    useEffect(() => {
+        if (!alerts.length) {
+            const q = query(collection(db, "alerts"));
+
+            const unsub = onSnapshot(q, (querySnapshot) => {
+                const testDevices = new Set();
+                const hposTests = [];
+                querySnapshot.forEach((document) => {
+                    console.log(document.data());
+                    const hposTestData = document.data();
+                    hposTests.push(hposTestData);
+                    const { deviceSerialNumber } = hposTestData;
+                    testDevices.add(deviceSerialNumber);
+                });
+                const groups = [...testDevices];
+                // setDevices(groups);
+                setAlerts(hposTests);
+            });
+
+            return () => unsub;
+        }
+    }, []);
+
+    return (
+        <div>
+            {alerts.length &&
+            alerts.map((alert) => <div key={alert.id} className='alert-card'>
+                {alert.message}
+            </div>)}
+        </div>
+    )
+}
+
+export default Alerts;
diff --git a/src/firebase.js b/src/firebase.js
index 636613a..0df53dc 100644
--- a/src/firebase.js
+++ b/src/firebase.js
@@ -14,6 +14,18 @@ import { getAnalytics } from "firebase/analytics";
 //     measurementId: "G-6JHQ47S9DD"
 //   };
   
+
+// /* preprod */
+// const firebaseConfig = {
+//   apiKey: "AIzaSyB2-suWmKh2PgQbRmx7rzPjYhgoovQIsQ8",
+//   authDomain: "hpos-preprod.firebaseapp.com",
+//   projectId: "hpos-preprod",
+//   storageBucket: "hpos-preprod.appspot.com",
+//   messagingSenderId: "121176529204",
+//   appId: "1:121176529204:web:6c0db8e642992192bbed61",
+//   measurementId: "G-GYM6LRQ8KR"
+// };
+
   
   /* prod */
   const firebaseConfig = {
diff --git a/src/index.js b/src/index.js
index 6b69d50..5dce466 100644
--- a/src/index.js
+++ b/src/index.js
@@ -13,6 +13,7 @@ import TestAnalytics from './components/TestAnalytics';
 import WorldMap from './components/WorldMap';
 import RegistraionChart from './RegistraionChart';
 import Calibrations from './components/Calibrations';
+import Alerts from './components/Alerts';
 
 const router = createBrowserRouter([
   {
@@ -43,6 +44,10 @@ const router = createBrowserRouter([
     path: "/op",
     element: <AppOp />,
   },
+  {
+    path: "/alerts",
+    element: <Alerts />,
+  },
 ]);