diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index d709fe0..bf0d4f2 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -27,11 +27,136 @@ function App() {
                 dataSources
                     .filter(({ id }) => selectedSources.includes(id))
                     .map(({ url }) => fetch(url).then((res) => res.json()))
-            )).flat().map(({ latitude, longitude, objectType }) => ({
-                coords: [latitude, longitude],
-                popup: objectType,
-                icon: objectType,
-            }));
+            ))
+                .flat()
+                .map((item) => {
+                    let icon = item.objectType;
+                    let popupContent;
+                    let objectTitle;
+
+                    switch (item.objectType) {
+                        case "IrishRailTrain":
+                            objectTitle = "Irish Rail Train: " + item.trainCode;
+
+                            let trainType;
+                            switch (item.trainType) {
+                                case "M":
+                                    trainType = "Mainline";
+                                    icon = "mainline";
+                                    break;
+                                case "S":
+                                    trainType = "Suburban";
+                                    icon = "suburban";
+                                    break;
+                                case "D":
+                                    trainType = "DART";
+                                    icon = "dart";
+                                    break;
+                                default:
+                                    trainType = "Unknown";
+                            }
+
+                            let trainStatus;
+                            switch (item.trainStatus) {
+                                case "R":
+                                    trainStatus = "Running";
+                                    break;
+                                default:
+                                    trainStatus = "Not running"
+                            }
+
+                            const splitMessage = item.trainPublicMessage.split("\\n");
+                            const match = splitMessage[1].match(/\((.*?)\)/);
+                            const punctuality = match ? match[1] : "N/A";
+
+                            // set icon depending on lateness of train and type of train
+                            if (trainStatus == "Not running") {
+                                icon += "NotRunning";
+                            }
+                            else if (punctuality.charAt(0) === "-" || punctuality.charAt(0) === "0") {
+                                icon += "OnTime";
+                            }
+                            else {
+                                icon += "Late"
+                            }
+
+                            popupContent = (
+                                <div>
+                                    <h3>{objectTitle}</h3>
+                                    <ul>
+                                        <li><b>Train Details:</b> {splitMessage[1].split("(")[0]}</li>
+                                        <li><b>Train Type:</b> {trainType}</li>
+                                        <li><b>Status:</b> {trainStatus}</li>
+                                        <li><b>Direction:</b> {item.trainDirection}</li>
+                                        <li><b>Update:</b> {splitMessage[2]}</li>
+                                        <li><b>Punctuality:</b> {punctuality}</li>
+                                    </ul>
+                                </div>
+                            );
+                            break;
+
+                        case "IrishRailStation":
+                            objectTitle = item.trainStationDesc + " Train Station";
+
+                            popupContent = (
+                                <div>
+                                    <h3>{objectTitle}</h3>
+                                    <ul>
+                                        <li><b>Train Station Name:</b> {item.trainStationDesc}</li>
+                                        <li><b>Train Station ID:</b> {item.trainStationID}</li>
+                                        <li><b>Train Station Code:</b> {item.trainStationCode}</li>
+                                    </ul>
+                                </div>
+                            );
+                            break;
+
+                        case "Bus":
+                            objectTitle = item.busRouteAgencyName + ": " + item.busRouteShortName;
+
+                            popupContent = (
+                                <div>
+                                    <h3>{objectTitle}</h3>
+                                    <ul>
+                                        <li><b>Bus ID:</b> {item.busID}</li>
+                                        <li><b>Bus Route ID:</b> {item.busRoute}</li>
+                                        <li><b>Bus Route Short Name:</b> {item.busRouteShortName}</li>
+                                        <li><b>Bus Route Long Name:</b> {item.busRouteLongName}</li>
+                                        <li><b>Agency: </b> {item.busRouteAgencyName}</li>
+                                    </ul>
+
+                                </div>
+                            );
+                            break;
+
+                        case "BusStop":
+                            objectTitle = item.busStopName + " Bus Stop";
+
+                            popupContent = (
+                                <div>
+                                    <h3>{objectTitle}</h3>
+                                    <ul>
+                                        <li><b>Bus Stop ID:</b> {item.busStopID}</li>
+                                        <li><b>Bus Stop Name:</b> {item.busStopName}</li>
+                                        <li><b>Bus Stop Code:</b> {item.busStopCode || "N/A"}</li>
+                                    </ul>
+                                </div>
+                            );
+                            break;
+
+                        default:
+                            popupContent = (
+                                <div>
+                                    <h3>{item.objectType}</h3>
+                                </div>
+                            );
+                    }
+
+                    return {
+                        coords: [item.latitude, item.longitude],
+                        popup: popupContent,
+                        icon: icon,
+                    };
+                });
             setMarkers(newMarkers);
         } catch (error) {
             console.error("Error fetching data:", error);
diff --git a/frontend/src/components/MapComponent.jsx b/frontend/src/components/MapComponent.jsx
index 00cc2aa..219081d 100644
--- a/frontend/src/components/MapComponent.jsx
+++ b/frontend/src/components/MapComponent.jsx
@@ -8,7 +8,17 @@ import "leaflet.markercluster/dist/MarkerCluster.Default.css";
 
 import trainStationIconURL from "../assets/icons/train-station.png";
 import trainIconURL from "../assets/icons/train.png";
+
+import trainNotRunningIconURL from "../assets/icons/trainNotRunning.png";
+import trainOnTimeIconURL from "../assets/icons/train_ontime.png";
+import trainLateIconURL from "../assets/icons/train_late.png";
+
+import dartNotRunningIconURL from "../assets/icons/DARTnotRunning.png";
+import dartOnTimeIconURL from "../assets/icons/DARTOnTime.png";
+import dartLateIconURL from "../assets/icons/DARTLate.png";
+
 import luasIconURL from "../assets/icons/tram-station.png";
+
 import busStopIconURL from "../assets/icons/bus-station.png";
 import busIconURL from "../assets/icons/bus.png";
 
@@ -23,6 +33,19 @@ L.Icon.Default.mergeOptions({
 const icons = new Map([
     ["IrishRailStation", new Icon({ iconUrl: trainStationIconURL, iconSize: [24, 24] })],
     ["IrishRailTrain", new Icon({ iconUrl: trainIconURL, iconSize: [38, 38] })],
+
+    ["mainlineNotRunning", new Icon({ iconUrl: trainNotRunningIconURL, iconSize: [38, 38] })],
+    ["mainlineOnTime", new Icon({ iconUrl: trainOnTimeIconURL, iconSize: [38, 38] })],
+    ["mainlineLate", new Icon({ iconUrl: trainLateIconURL, iconSize: [38, 38] })],
+
+    ["suburbanNotRunning", new Icon({ iconUrl: trainNotRunningIconURL, iconSize: [38, 38] })],
+    ["suburbanOnTime", new Icon({ iconUrl: trainOnTimeIconURL, iconSize: [38, 38] })],
+    ["suburbanLate", new Icon({ iconUrl: trainLateIconURL, iconSize: [38, 38] })],
+
+    ["dartNotRunning", new Icon({ iconUrl: dartNotRunningIconURL, iconSize: [38, 38] })],
+    ["dartOnTime", new Icon({ iconUrl: dartOnTimeIconURL, iconSize: [38, 38] })],
+    ["dartLate", new Icon({ iconUrl: dartLateIconURL, iconSize: [38, 38] })],
+
     ["LuasStop", new Icon({ iconUrl: luasIconURL, iconSize: [38, 38] })],
     ["BusStop", new Icon({ iconUrl: busStopIconURL, iconSize: [24, 24] })],
     ["Bus", new Icon({ iconUrl: busIconURL, iconSize: [38, 38] })],