diff --git a/src/lib/Routes.svelte b/src/lib/Routes.svelte
index 6a62a3a..4c60cca 100644
--- a/src/lib/Routes.svelte
+++ b/src/lib/Routes.svelte
@@ -34,7 +34,7 @@
 			// 	17,
 			// 	10
 			// ],
-			'line-width': 4,
+			'line-width': 3,
 
 			'line-color': ['get', 'color'],
 			'line-opacity': 1.0
diff --git a/src/lib/Trips.svelte b/src/lib/Trips.svelte
index 3cfed36..1ac5295 100644
--- a/src/lib/Trips.svelte
+++ b/src/lib/Trips.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { GeoJSON, Popup, SymbolLayer } from 'svelte-maplibre';
+	import { mode } from 'mode-watcher';
 	import { env } from '$env/dynamic/public';
 
 	interface Props {
@@ -66,43 +67,53 @@
 		id="trips"
 		hoverCursor="pointer"
 		{filter}
-		layout={{
-			// 'icon-image': ['match', ['get', 'direction'], 0, 'bus_right', 1, 'bus_left', 'bus_left'],
-			// 'icon-image': 'bus_white_left',
-			// 'icon-image': [
-			// 	'case',
-			// 	['>', ['get', 'passengers'], 50],
-			// 	'bus_full',
-			// 	['>', ['get', 'passengers'], 30],
-			// 	'bus_half_full',
-			// 	'bus_white_left' // default color
-			// ],
-			'icon-image': [
+		paint={{
+			'icon-color': [
 				'case',
-				// If capacity is 0, use 'bus_white_left'
-				// ['==', ['get', 'capacity'], 0],
-				// 'bus_white_left',
-
 				// Calculate passengers / capacity with coalesce to handle nulls
 				[
 					'>',
 					['/', ['coalesce', ['get', 'passengers'], 0], ['coalesce', ['get', 'capacity'], 1]],
 					0.5
 				],
-				'bus_full',
+				'#b91c1c',
 
 				[
 					'>',
 					['/', ['coalesce', ['get', 'passengers'], 0], ['coalesce', ['get', 'capacity'], 1]],
 					0.3
 				],
-				'bus_half_full',
+				'#facc15',
+				// default
+				$mode !== 'light' ? '#FFFFFF' : '#000000'
+			]
+			// 'icon-color': $mode !== 'light' ? '#FFFFFF' : '#000000'
+		}}
+		layout={{
+			// 'icon-image': ['match', ['get', 'direction'], 0, 'bus_right', 1, 'bus_left', 'bus_left'],
+			// 'icon-image': [
+			// 	'case',
+			// 	// Calculate passengers / capacity with coalesce to handle nulls
+			// 	[
+			// 		'>',
+			// 		['/', ['coalesce', ['get', 'passengers'], 0], ['coalesce', ['get', 'capacity'], 1]],
+			// 		0.5
+			// 	],
+			// 	'bus_full',
+
+			// 	[
+			// 		'>',
+			// 		['/', ['coalesce', ['get', 'passengers'], 0], ['coalesce', ['get', 'capacity'], 1]],
+			// 		0.3
+			// 	],
+			// 	'bus_half_full',
+			// 	// Default icon if none of the above conditions are met
+			// 	'bus_white_left'
+			// ],
 
-				// Default icon if none of the above conditions are met
-				'bus_white_left'
-			],
+			'icon-image': 'bus_sdf',
 			// 'icon-size': ['interpolate', ['exponential', 0.5], ['zoom'], 8, 0.05, 17, 0.1],
-			'icon-size': 0.1,
+			'icon-size': 0.15,
 			'icon-rotate': ['coalesce', ['get', 'bearing'], 0],
 			'icon-allow-overlap': show_overlapping
 		}}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b7a8ae0..352ec3f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -9,12 +9,6 @@
 	import Stops from '$lib/Stops.svelte';
 	import { slide } from 'svelte/transition';
 
-	// import StopsCool from '$lib/light-version/Stops.svelte';
-	// import TripsCool from '$lib/light-version/Trips.svelte';
-	// import RoutesCool from '$lib/light-version/Routes.svelte';
-
-	// let map: maplibregl.Map | undefined = $state();
-	// let loaded: boolean = $state(false);
 	let map = $state<maplibregl.Map>();
 
 	onMount(() => {
@@ -36,7 +30,7 @@
 
 		const filter: maplibregl.ExpressionSpecification = ['all'];
 		// need to coalesce bc some values are null
-		if (!show_unknown)  filter.push(['!=', ['coalesce', ['get', 'passengers'], -1], -1]);
+		if (!show_unknown) filter.push(['!=', ['coalesce', ['get', 'passengers'], -1], -1]);
 		if (min_val) filter.push(['>=', ['coalesce', ['get', 'passengers'], 0], min_val]);
 		if (max_val) filter.push(['<=', ['coalesce', ['get', 'passengers'], 0], max_val]);
 
@@ -73,11 +67,23 @@
 				</label>
 				<label class="grid grid-cols-[1fr,auto] items-center gap-2">
 					<span>Min passengers</span>
-					<input bind:value={min_val} type="number" inputmode="numeric" min="0" class="w-16" />
+					<input
+						bind:value={min_val}
+						type="number"
+						inputmode="numeric"
+						min="0"
+						class="w-16 rounded border border-neutral-900 dark:border-neutral-100"
+					/>
 				</label>
 				<label class="grid grid-cols-[1fr,auto] items-center gap-2">
 					<span>Max passengers</span>
-					<input bind:value={max_val} type="number" inputmode="numeric" min="0" class="w-16" />
+					<input
+						bind:value={max_val}
+						type="number"
+						inputmode="numeric"
+						min="0"
+						class="w-16 rounded border border-neutral-900 dark:border-neutral-100"
+					/>
 				</label>
 			</div>
 		{/if}
@@ -107,30 +113,22 @@
 		// const bus_up = await map.loadImage($mode !== 'light' ? '/bus-up-white.png' : '/bus-up.png');
 		// map.addImage('bus_up', bus_up.data);
 
-		const images = [
-			`bus_${$mode !== 'light' ? 'white' : 'black'}_left`,
-			// `but_white_right`,
-			'bus_full',
-			'bus_half_full'
-		];
-
-		for (const img of images) {
-			const image = await map.loadImage(`/${img}.png`);
-			map.addImage(img, image.data);
-		}
-
-		// const bus_right = await map.loadImage(
-		// 	$mode !== 'light' ? '/bus_white_right.png' : '/bus_black_right.png'
-		// );
-		// map.addImage('bus_right', bus_right.data);
-
-		// const bus_left = await map.loadImage(
-		// 	$mode !== 'light' ? '/bus_white_left.png' : '/bus_black_left.png'
-		// );
-		// map.addImage('bus_left', bus_left.data);
-
-		// const stop = await map.loadImage($mode !== 'light' ? '/bus_stop.png' : '/bus_stop.png');
-		// map.addImage('bus_stop', stop.data);
+		// const images = [
+		// 	`bus_${$mode !== 'light' ? 'white' : 'black'}_left`,
+		// 	// `but_white_right`,
+		// 	'bus_full',
+		// 	'bus_half_full'
+		// ];
+
+		// Promise.all([
+		// 	...images.map(async (img) => {
+		// 		const image = await map.loadImage(`/${img}.png`);
+		// 		map.addImage(img, image.data);
+		// 	})
+		// ]);
+		// generated using https://jobtalle.com/SDFMaker/
+		const img_sdf = await map.loadImage('/bus_sdf.png');
+		map.addImage('bus_sdf', img_sdf.data, { sdf: true });
 	}}
 	center={[-74.006, 40.7128]}
 	maxBounds={[
diff --git a/static/bus_sdf.png b/static/bus_sdf.png
new file mode 100644
index 0000000..7744def
Binary files /dev/null and b/static/bus_sdf.png differ