diff --git a/client/src/lib/Map.svelte b/client/src/lib/Map.svelte
index b510ba7..d4fc749 100644
--- a/client/src/lib/Map.svelte
+++ b/client/src/lib/Map.svelte
@@ -55,6 +55,18 @@
 			load_image('radar-rect-green');
 			load_image('radar-rect-red');
 
+			// should this be here? am unfamiliar with the structure
+
+			const layers = map.getStyle().layers;
+			let sym_layer;
+			for (let i = 0; i < layers.length; i++) {
+				if (layers[i].type === 'symbol') {
+					sym_layer = layers[i].id;
+					break;
+				}
+			}
+
+
 			map.addSource('alerts', {
 				type: 'geojson',
 				data: 'https://api.weather.gov/alerts/active?status=actual'
@@ -67,7 +79,7 @@
 					// @ts-expect-error this type is too complicated
 					'fill-color': fillLUT,
 				}
-			});
+			}, sym_layer);
 			map.addLayer({
 				id: 'alerts-outline',
 				type: 'line',
@@ -80,7 +92,7 @@
 					'line-color': borderLUT,
 					'line-width': 3
 				}
-			});
+			}, sym_layer);
 			let createPopup = (e, full: boolean) => {
 				const randLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));
 				const uniqid = randLetter + Date.now();
@@ -98,7 +110,7 @@
 					}
 				});
 			};
-			map.on('click', 'alerts', (e) => {createPopup(e,true)});
+			map.on('click', 'alerts', (e) => { createPopup(e, true) });
 			let currentFeatureCoordinates = undefined;
 			const popup = new maplibregl.Popup({
 				closeButton: false,