diff --git a/client/react/src/modals/system/SystemAlerts.js b/client/react/src/modals/system/SystemAlerts.js
new file mode 100644
index 0000000..1161221
--- /dev/null
+++ b/client/react/src/modals/system/SystemAlerts.js
@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react';
+import Modal from '@mui/material/Modal';
+import Box from '@mui/material/Box';
+import Alerts from '../../pages/Alerts';
+
+const SystemAlerts = ({ isOpen, system, onRequestClose }) => {
+  const [alerts, setAlerts] = useState([]);
+
+  useEffect(() => {
+    if (isOpen && system && system.system) {
+      const url = 'http://127.0.0.1:5000/system/' + system.system.id.toString() + '/alerts'
+      // Fetch plant data from the server
+      fetch(url)
+        .then((response) => response.json())
+        .then((data) => setAlerts(data))
+        .catch((error) => console.error('Error fetching plant data:', error));
+    }
+  }, [isOpen, system]);
+
+  if (!system) {
+    return (<div></div>);
+  }
+
+  return (
+    <Modal
+      open={isOpen}
+      onClose={onRequestClose}
+      disableAutoFocus={true}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'inherit',
+        border: 'none',
+      }}
+    >
+      <Box sx={{ width: 756, height: 512, bgcolor: 'background.paper', borderRadius: 2 }}>
+        <Alerts alerts={alerts}></Alerts>
+      </Box>
+    </Modal>
+  );
+};
+
+export default SystemAlerts;
diff --git a/client/react/src/modals/SystemPlants.js b/client/react/src/modals/system/SystemPlants.js
similarity index 96%
rename from client/react/src/modals/SystemPlants.js
rename to client/react/src/modals/system/SystemPlants.js
index daf69c4..db04a9c 100644
--- a/client/react/src/modals/SystemPlants.js
+++ b/client/react/src/modals/system/SystemPlants.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import Modal from '@mui/material/Modal';
 import Box from '@mui/material/Box';
-import Plants from '../pages/Plants';
+import Plants from '../../pages/Plants';
 
 const SystemPlants = ({ isOpen, system, onRequestClose }) => {
   const [plants, setPlants] = useState([]);
@@ -18,7 +18,6 @@ const SystemPlants = ({ isOpen, system, onRequestClose }) => {
   }, [isOpen, system]);
 
   if (!system) {
-
     return (<div></div>);
   }
 
diff --git a/client/react/src/models/System.js b/client/react/src/models/System.js
index cf6085d..b5f6eb3 100644
--- a/client/react/src/models/System.js
+++ b/client/react/src/models/System.js
@@ -13,12 +13,14 @@ import IconButton from '@mui/material/IconButton';
 import ReportGmailerrorredSharpIcon from '@mui/icons-material/ReportGmailerrorredSharp';
 import CardActions from '@mui/material/CardActions';
 import PointOfSaleIcon from '@mui/icons-material/PointOfSale';
-import SystemPlants from '../modals/SystemPlants';
+import SystemPlants from '../modals/system/SystemPlants';
+import SystemAlerts from '../modals/system/SystemAlerts';
 
 const System = ({ system, full }) => {
 
   const [isSystemsPlanetsOpen, setIsSystemsPlanetsOpen] = useState(false);
-
+  const [isSystemAlertsOpen, setIsSystemsAlertsOpen] = useState(false);
+ 
   if (!system) {
     // Handle case when system data is not available
     return <div>No system data available</div>;
@@ -118,6 +120,13 @@ const System = ({ system, full }) => {
           system={{system}}
         />
       )}
+      {isSystemAlertsOpen && (
+        <SystemAlerts
+          isOpen={isSystemAlertsOpen}
+          onRequestClose={() => setIsSystemsAlertsOpen(false)}
+          system={{system}}
+        />
+      )}
     </>
   );
 };
diff --git a/client/react/src/pages/Alerts.js b/client/react/src/pages/Alerts.js
index ec281da..a07b748 100644
--- a/client/react/src/pages/Alerts.js
+++ b/client/react/src/pages/Alerts.js
@@ -12,10 +12,10 @@ import ReportGmailerrorredSharpIcon from '@mui/icons-material/ReportGmailerrorre
 // import Typography from '@mui/material/Typography';
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
 
-const Alerts = () => {
+const Alerts = (alerts) => {
 
   // Passable Data
-  const [plantAlerts, setPlantAlerts] = useState([]);
+  const [plantAlerts, setPlantAlerts] = useState(alerts && alerts.alerts ? alerts.alerts : []);
 
   const [resolve, setResolve] = useState(null);
 
diff --git a/server/app.py b/server/app.py
index 3982aa3..aa20078 100644
--- a/server/app.py
+++ b/server/app.py
@@ -446,6 +446,24 @@ def get_systems_plants(system_id):
     # Return JSON response
     return jsonify(plants_json)
 
+@app.route("/system/<int:system_id>/plants", methods=["GET"])
+def get_systems_alerts(system_id):
+    """
+    Get system's alerts.
+    """
+    # Log the request
+    logger.info("Received request to get a system's alerts")
+    
+    session = Session()
+    plant_alerts = session.query(PlantAlerts).filter(Plant.system_id == system_id).all()
+    session.close()
+
+    # Transform plant alerts to JSON format
+    plant_alerts_json = [plant_alert.to_json() for plant_alert in plant_alerts]
+
+    # Return JSON response
+    return jsonify(plant_alerts_json)
+
 if __name__ == "__main__":
     # Run the Flask app
     app.run(debug=True)