diff --git a/src/app.css b/src/app.css
index db19a19..4d107db 100644
--- a/src/app.css
+++ b/src/app.css
@@ -2,10 +2,24 @@
 @tailwind components;
 @tailwind utilities;
 
-.scroll-hidden {
-	-ms-overflow-style: none; /* Internet Explorer 10+ */
-	scrollbar-width: none; /* Firefox */
-}
-.scroll-hidden::-webkit-scrollbar {
-	display: none; /* Safari and Chrome */
+@layer components {
+	.scroll-hidden {
+		-ms-overflow-style: none; /* Internet Explorer 10+ */
+		scrollbar-width: none; /* Firefox */
+	}
+	.scroll-hidden::-webkit-scrollbar {
+		display: none; /* Safari and Chrome */
+	}
+
+	.h1 {
+		@apply mb-4 text-2xl font-semibold text-[#86858B] dark:text-gray-300;
+	}
+
+	.h2 {
+		@apply mb-4 text-xl font-semibold text-[#86858B] dark:text-gray-300;
+	}
+
+	.h3 {
+		@apply mb-2 text-lg font-semibold dark:text-white;
+	}
 }
diff --git a/src/components/ArrivalDeparture.svelte b/src/components/ArrivalDeparture.svelte
index e5b0cc4..c4a32ca 100644
--- a/src/components/ArrivalDeparture.svelte
+++ b/src/components/ArrivalDeparture.svelte
@@ -23,7 +23,9 @@
 		const predictedDiff = predicted - now;
 		const scheduledDiff = scheduled - now;
 
-		if (predictedDiff <= 0) {
+		if (predictedTime == 0) {
+			return { status: 'scheduled', text: 'Scheduled/not real-time', color: 'text-gray-500' };
+		} else if (predictedDiff <= 0) {
 			return {
 				status: 'early',
 				text: 'arrives ' + Math.abs(Math.floor(predictedDiff / 60000)) + ' min early',
@@ -71,10 +73,10 @@
 	class="flex h-auto w-full items-center justify-between border-b-[1px] border-[#C6C6C8] bg-[#ffffff] p-4 hover:cursor-pointer hover:bg-[#e3e3e3] dark:border-[#313135] dark:bg-[#1c1c1c] hover:dark:bg-[#363636]"
 >
 	<div class="flex flex-col gap-1">
-		<p class="text-xl font-semibold text-black dark:text-white">
+		<p class="text-left text-xl font-semibold text-black dark:text-white">
 			{routeShortName} - {tripHeadsign}
 		</p>
-		<p class="font-semibold text-black dark:text-white">
+		<p class="text-left font-semibold text-black dark:text-white">
 			<span class="text-md">{formatTime(scheduledArrivalTime)}</span> -
 			<span class={getArrivalStatus(predictedArrivalTime, scheduledArrivalTime).color}>
 				{getArrivalStatus(predictedArrivalTime, scheduledArrivalTime).text}
diff --git a/src/components/map/RouteMap.svelte b/src/components/map/RouteMap.svelte
index a031510..e3997ac 100644
--- a/src/components/map/RouteMap.svelte
+++ b/src/components/map/RouteMap.svelte
@@ -74,7 +74,7 @@
 
 			infoWindow = new google.maps.InfoWindow({
 				content: `<div>
-                            <h3>${stop.name}</h3>
+                            <h3 class='h3'>${stop.name}</h3>
                             <p>Arrival time: ${new Date(stopTime.arrivalTime * 1000).toLocaleTimeString()}</p>
                         </div>`
 			});
diff --git a/src/components/navigation/Header.svelte b/src/components/navigation/Header.svelte
index fb302e4..ce2a04b 100644
--- a/src/components/navigation/Header.svelte
+++ b/src/components/navigation/Header.svelte
@@ -12,16 +12,12 @@
 	let searchInput = '';
 
 	async function handleSearch() {
-		if (searchInput.length > 2) {
-			try {
-				const response = await fetch(`/api/oba/search?query=${encodeURIComponent(searchInput)}`);
-				const results = await response.json();
-				console.log('Route results:', results.routeSearchResults);
-				console.log('Stop results:', results.stopSearchResults);
-				dispatch('searchResults', results);
-			} catch (error) {
-				console.error('Error fetching search results:', error);
-			}
+		try {
+			const response = await fetch(`/api/oba/search?query=${encodeURIComponent(searchInput)}`);
+			const results = await response.json();
+			dispatch('searchResults', results);
+		} catch (error) {
+			console.error('Error fetching search results:', error);
 		}
 	}
 
@@ -33,7 +29,7 @@
 </script>
 
 <div
-	class="bg-blur-md flex items-center justify-between border-b border-neutral-300 bg-white/80 px-4 dark:bg-black dark:text-white"
+	class="bg-blur-md flex items-center justify-between border-b border-gray-500 bg-white/80 px-4 dark:bg-black dark:text-white"
 >
 	<div class="flex items-center justify-center gap-4 px-2 py-2">
 		<div>
diff --git a/src/components/navigation/TripDetailsModal.svelte b/src/components/navigation/TripDetailsModal.svelte
index 9f83121..bee3882 100644
--- a/src/components/navigation/TripDetailsModal.svelte
+++ b/src/components/navigation/TripDetailsModal.svelte
@@ -12,7 +12,7 @@
 	<div class="py-1 text-left">
 		<button type="button" on:click={onClose} class="close-button">
 			<FontAwesomeIcon icon={faArrowLeft} class="font-black text-black dark:text-white" />
-			<h1 class="font-semibold text-black dark:text-white">Back to {stop.name}</h1>
+			<div class="font-semibold text-black dark:text-white">Back to {stop.name}</div>
 		</button>
 	</div>
 	<div
diff --git a/src/components/oba/StopPane.svelte b/src/components/oba/StopPane.svelte
index 0b7187c..ff01a99 100644
--- a/src/components/oba/StopPane.svelte
+++ b/src/components/oba/StopPane.svelte
@@ -119,17 +119,15 @@
 		<div>
 			<div>
 				<div class="h-36 rounded-lg bg-[#1C1C1E] bg-opacity-80 p-4">
-					<h1 class="text-xl font-semibold text-white">{stop.name}</h1>
-					<h1 class="text-lg text-white">Stop #{stop.id}</h1>
+					<h1 class="h1 mb-1">{stop.name}</h1>
+					<h2 class="h2 mb-1">Stop #{stop.id}</h2>
 					{#if routeShortNames()}
-						<h1 class="text-lg text-white">Routes: {routeShortNames().join(', ')}</h1>
+						<h2 class="h2">Routes: {routeShortNames().join(', ')}</h2>
 					{/if}
 				</div>
 			</div>
 			<div>
-				<h3 class="mb-1 ml-7 mt-4 text-xl font-semibold uppercase text-[#86858B]">
-					Arrivals and Departures
-				</h3>
+				<h2 class="h2 ml-4 mt-4">Arrivals and Departures</h2>
 			</div>
 			<div class="scrollbar-hidden h-96 space-y-2 overflow-y-scroll rounded-lg">
 				<div>
diff --git a/src/components/oba/TripDetailsPane.svelte b/src/components/oba/TripDetailsPane.svelte
index 178be53..73a1a09 100644
--- a/src/components/oba/TripDetailsPane.svelte
+++ b/src/components/oba/TripDetailsPane.svelte
@@ -86,7 +86,7 @@
 	{#if error}
 		<p>{error}</p>
 	{:else if tripDetails}
-		<h2>
+		<h2 class="h2">
 			{#if routeInfo}
 				Route {routeInfo.shortName} -
 			{/if}
diff --git a/src/components/search/SearchResults.svelte b/src/components/search/SearchResults.svelte
index 09f5c2a..f7b0fc0 100644
--- a/src/components/search/SearchResults.svelte
+++ b/src/components/search/SearchResults.svelte
@@ -15,9 +15,9 @@
 </script>
 
 <div class="p-2">
-	<h2 class="mb-4 text-xl font-semibold uppercase text-[#86858B]">Search Results</h2>
+	<h2 class="h2">Search Results</h2>
 
-	<h3 class="mb-2 text-lg font-semibold dark:text-white">Routes</h3>
+	<h3 class="h3">Routes</h3>
 	{#if searchResults?.routeSearchResults?.list?.length > 0}
 		<ul class="overflow-hidden rounded-lg">
 			{#each searchResults.routeSearchResults.list as route}
@@ -35,7 +35,7 @@
 		<p>No routes found.</p>
 	{/if}
 
-	<h3 class="mb-2 mt-4 text-lg font-semibold dark:text-white">Stops</h3>
+	<h3 class="h3">Stops</h3>
 	{#if searchResults?.stopSearchResults?.list?.length > 0}
 		<ul class="overflow-hidden rounded-lg">
 			{#each searchResults.stopSearchResults.list as stop}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a21d50c..5408718 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -56,9 +56,7 @@
 		showRouteMap = false;
 	}
 	function handleSearch(event) {
-		console.log('Raw search event:', event);
 		searchResults = event.detail;
-		console.log('Search results set:', searchResults);
 	}
 
 	function closeModal() {
@@ -66,7 +64,9 @@
 	}
 </script>
 
-<Header on:searchResults={handleSearch} />
+<div class="absolute left-0 right-0 top-0 z-40">
+	<Header on:searchResults={handleSearch} />
+</div>
 
 {#if stop}
 	<ModalPane on:close={closePane} {stop}>
@@ -89,7 +89,7 @@
 				on:stopSelected={stopSelected}
 			/>
 		{:else}
-			<p class="p-4 text-center">No results found.</p>
+			<p class="p-4 text-center dark:text-gray-200">No results found.</p>
 		{/if}
 	</ModalPane>
 {/if}