diff --git a/src/components/map/GoogleMap.svelte b/src/components/map/GoogleMap.svelte
index 9d4a740..719c880 100644
--- a/src/components/map/GoogleMap.svelte
+++ b/src/components/map/GoogleMap.svelte
@@ -19,6 +19,7 @@
 	export let selectedRoute = null;
 	export let showRoute = false;
 	export let showRouteMap = false;
+	export let showAllStops = true;
 
 	const dispatch = createEventDispatcher();
 
@@ -84,6 +85,11 @@
 		markers = [];
 	}
 
+	$: if (showAllStops) {
+		clearAllMarkers();
+		allStops.forEach((s) => addMarker(s));
+	}
+
 	$: if (selectedRoute && showRoute) {
 		clearAllMarkers();
 		const stopsToShow = allStops.filter((s) => s.routeIds.includes(selectedRoute.id));
diff --git a/src/components/oba/StopPane.svelte b/src/components/oba/StopPane.svelte
index 0ed3cbb..c543eb4 100644
--- a/src/components/oba/StopPane.svelte
+++ b/src/components/oba/StopPane.svelte
@@ -6,6 +6,8 @@
 
 	export let stop;
 	export let arrivalsAndDeparturesResponse = null;
+	export let showAllStops = true;
+
 	let arrivalsAndDepartures;
 	let loading = false;
 	let error;
@@ -29,6 +31,11 @@
 		loading = false;
 	}
 
+	$: if (showAllStops) {
+		showTripDetails = false;
+		selectedTripDetails = null;
+	}
+
 	$: (async (s, arrDep) => {
 		// if the arrivalsAndDeparturesResponse is passed in, use that
 		// instead of loading fresh data.
@@ -67,13 +74,13 @@
 		showTripDetails = true;
 		dispatch('tripSelected', selectedTripDetails);
 		dispatch('updateRouteMap', { show: true });
-		console.log('StopPane: Trip selected, showing route map');
 	}
 
 	function handleCloseTripDetailModal() {
 		showTripDetails = false;
 		dispatch('tripSelected', null);
 		dispatch('updateRouteMap', { show: false });
+		dispatch('showAllStops');
 	}
 </script>
 
@@ -84,7 +91,7 @@
 		>
 			<div class="flex items-center text-white">
 				<svg
-					class="-ml-1 mr-3 h-5 w-5 animate-spin text-white"
+					class="w-5 h-5 mr-3 -ml-1 text-white animate-spin"
 					xmlns="http://www.w3.org/2000/svg"
 					fill="none"
 					viewBox="0 0 24 24"
@@ -122,7 +129,7 @@
 					Arrivals and Departures
 				</h3>
 			</div>
-			<div class="scrollbar-hidden h-96 space-y-2 overflow-y-scroll rounded-lg">
+			<div class="space-y-2 overflow-y-scroll rounded-lg scrollbar-hidden h-96">
 				<div>
 					{#each arrivalsAndDepartures.arrivalsAndDepartures as arrival}
 						<ArrivalDeparture
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2f8a51d..fae48b8 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -8,6 +8,7 @@
 	let showRoute = false;
 	let selectedRoute = null;
 	let showRouteMap = false;
+	let showAllStops = false;
 
 	function stopSelected(event) {
 		stop = event.detail.stop;
@@ -21,22 +22,40 @@
 	}
 
 	function tripSelected(event) {
-		selectedTrip = event.detail;
-		showRoute = true;
-		selectedRoute = {
-			id: event.detail.routeId,
-			shortName: event.detail.routeShortName
-		};
+		if (event.detail) {
+			selectedTrip = event.detail;
+			showRoute = true;
+			selectedRoute = {
+				id: event.detail.routeId,
+				shortName: event.detail.routeShortName
+			};
+		} else {
+			selectedTrip = null;
+			showRoute = false;
+			selectedRoute = null;
+		}
 	}
 
 	function handleUpdateRouteMap(event) {
 		showRouteMap = event.detail.show;
+		showAllStops = !event.detail.show;
+	}
+
+	function handleShowAllStops() {
+		showAllStops = true;
+		showRouteMap = false;
 	}
 </script>
 
 {#if stop}
 	<ModalPane on:close={closePane}>
-		<StopPane {stop} on:tripSelected={tripSelected} on:updateRouteMap={handleUpdateRouteMap} />
+		<StopPane
+			{showAllStops}
+			{stop}
+			on:tripSelected={tripSelected}
+			on:updateRouteMap={handleUpdateRouteMap}
+			on:showAllStops={handleShowAllStops}
+		/>
 	</ModalPane>
 {/if}