diff --git a/src/app.css b/src/app.css
index 989db93..c910ea2 100644
--- a/src/app.css
+++ b/src/app.css
@@ -43,7 +43,7 @@ body {
 }
 
 *:focus-visible {
-	outline: 2px solid #3b82f6;
+	outline: 2px solid #16a34a;
 	outline-offset: 2px;
 }
 
diff --git a/src/lib/components/ComparatorPanel.svelte b/src/lib/components/ComparatorPanel.svelte
index 848c56c..e5e6326 100644
--- a/src/lib/components/ComparatorPanel.svelte
+++ b/src/lib/components/ComparatorPanel.svelte
@@ -176,19 +176,9 @@
 		}
 	}
 
-	function toggleWatchKey(key: string) {
-		const current = new SvelteSet(watchedKeys);
-		if (current.has(key)) {
-			current.delete(key);
-		} else {
-			current.add(key);
-		}
-		cmpState.watchedKeysInput = Array.from(current).join(', ');
-		handleWatchInput();
-	}
-
 	function getValueByPath(obj: unknown, path: string): unknown {
-		const parts = path.split('.');
+		const normalized = path.replace(/\[(\d+)\]/g, '.$1');
+		const parts = normalized.split('.');
 		function walk(current: unknown, idx: number): unknown {
 			if (idx >= parts.length) return current;
 			if (current === null || current === undefined) return undefined;
@@ -488,7 +478,7 @@
 					type="text"
 					bind:value={cmpState.server1Base}
 					list="server1-url-history"
-					class="w-full rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 font-mono text-sm text-gray-700 transition-all focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:ring-indigo-500/40"
+					class="w-full rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 font-mono text-sm text-gray-700 transition-all focus:border-green-500 focus:ring-2 focus:ring-green-500/20 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:ring-green-500/40"
 				/>
 				<datalist id="server1-url-history">
 					{#each server1UrlHistory as url (url)}
@@ -507,7 +497,7 @@
 					type="text"
 					bind:value={cmpState.server2Base}
 					list="server2-url-history"
-					class="w-full rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 font-mono text-sm text-gray-700 transition-all focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:ring-indigo-500/40"
+					class="w-full rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 font-mono text-sm text-gray-700 transition-all focus:border-green-500 focus:ring-2 focus:ring-green-500/20 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:ring-green-500/40"
 				/>
 				<datalist id="server2-url-history">
 					{#each server2UrlHistory as url (url)}
@@ -528,7 +518,7 @@
 					<select
 						id="api-endpoint"
 						bind:value={cmpState.selectedEndpoint}
-						class="w-full cursor-pointer appearance-none rounded-lg border border-gray-200 bg-white px-4 py-3 text-sm font-medium text-gray-700 transition-all focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:focus:ring-indigo-500/40"
+						class="w-full cursor-pointer appearance-none rounded-lg border border-gray-200 bg-white px-4 py-3 text-sm font-medium text-gray-700 transition-all focus:border-green-500 focus:ring-2 focus:ring-green-500/20 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:focus:ring-green-500/40"
 					>
 						{#each endpoints as endpoint (endpoint.id)}
 							<option value={endpoint.id}>{endpoint.name}</option>
@@ -554,7 +544,7 @@
 						oninput={(e) => handleParamChange(param.name, e.currentTarget.value)}
 						placeholder={param.placeholder || ''}
 						list={'param-history-' + param.name}
-						class="w-full rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-700 transition-all focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:ring-indigo-500/40"
+						class="w-full rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-700 transition-all focus:border-green-500 focus:ring-2 focus:ring-green-500/20 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:ring-green-500/40"
 					/>
 					{#if history.length > 0}
 						<datalist id={'param-history-' + param.name}>
@@ -577,7 +567,7 @@
 					type="text"
 					bind:value={cmpState.focusPath}
 					placeholder="e.g. data.entry.status"
-					class="w-full rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-700 transition-all placeholder:text-gray-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:placeholder:text-gray-600 dark:focus:ring-indigo-500/40"
+					class="w-full rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-700 transition-all placeholder:text-gray-400 focus:border-green-500 focus:ring-2 focus:ring-green-500/20 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:placeholder:text-gray-600 dark:focus:ring-green-500/40"
 				/>
 			</div>
 
@@ -590,12 +580,12 @@
 				<button
 					id="ignore-keys-trigger"
 					onclick={() => (cmpState.showIgnoreModal = true)}
-					class="group flex w-full items-center justify-between rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 text-left text-sm text-gray-700 transition-all focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:ring-indigo-500/40"
+					class="group flex w-full items-center justify-between rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 text-left text-sm text-gray-700 transition-all focus:border-green-500 focus:ring-2 focus:ring-green-500/20 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:ring-green-500/40"
 				>
 					<span class="truncate">
 						{ignoredKeys.length ? `${ignoredKeys.length} keys ignored` : 'Select keys...'}
 					</span>
-					<span class="text-gray-400 transition-colors group-hover:text-indigo-500">
+					<span class="text-gray-400 transition-colors group-hover:text-green-500">
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
 							class="h-4 w-4"
@@ -618,12 +608,12 @@
 				<label
 					for="watch-keys-trigger"
 					class="mb-2 block text-xs font-semibold tracking-wide text-gray-500 uppercase dark:text-gray-400"
-					>Watch Keys <span class="text-indigo-500">(Log)</span></label
+					>Watch Keys <span class="text-green-500">(Log)</span></label
 				>
 				<button
 					id="watch-keys-trigger"
 					onclick={() => (cmpState.showWatchModal = true)}
-					class="group flex w-full items-center justify-between rounded-lg border border-indigo-200 bg-indigo-50 px-4 py-3 text-left text-sm text-indigo-700 transition-all focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none dark:border-indigo-900/30 dark:bg-indigo-900/20 dark:text-indigo-300 dark:focus:ring-indigo-500/40"
+					class="group flex w-full items-center justify-between rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-left text-sm text-green-700 transition-all focus:border-green-500 focus:ring-2 focus:ring-green-500/20 focus:outline-none dark:border-green-900/30 dark:bg-green-900/20 dark:text-green-300 dark:focus:ring-green-500/40"
 				>
 					<span class="truncate">
 						{#if cmpState.lastLoggedTime}
@@ -631,13 +621,13 @@
 								>Logged!</span
 							>
 						{:else if isLogging}
-							<span class="font-medium text-indigo-600 dark:text-indigo-400">Logging...</span>
+							<span class="font-medium text-green-600 dark:text-green-400">Logging...</span>
 						{:else}
 							{watchedKeys.length ? `${watchedKeys.length} keys watched` : 'Select keys...'}
 						{/if}
 					</span>
 					<span
-						class="text-indigo-400 transition-colors group-hover:text-indigo-600 dark:group-hover:text-indigo-200"
+						class="text-green-400 transition-colors group-hover:text-green-600 dark:group-hover:text-green-200"
 					>
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
@@ -666,7 +656,7 @@
 					<input
 						type="checkbox"
 						bind:checked={cmpState.autoRefresh}
-						class="h-4 w-4 rounded border-gray-300 bg-white text-indigo-600 focus:ring-indigo-500 focus:ring-offset-0 dark:border-gray-600 dark:bg-gray-700"
+						class="h-4 w-4 rounded border-gray-300 bg-white text-green-600 focus:ring-green-500 focus:ring-offset-0 dark:border-gray-600 dark:bg-gray-700"
 					/>
 					<span class="text-sm font-medium text-gray-600 dark:text-gray-400">Auto-refresh</span>
 				</label>
@@ -677,17 +667,31 @@
 							bind:value={cmpState.refreshInterval}
 							min="1"
 							max="60"
-							class="w-16 rounded-lg border border-gray-200 bg-white px-2 py-1.5 text-center text-sm font-medium text-gray-700 focus:border-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300"
+							class="w-16 rounded-lg border border-gray-200 bg-white px-2 py-1.5 text-center text-sm font-medium text-gray-700 focus:border-green-500 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300"
 						/>
 						<span class="text-xs text-gray-400">sec</span>
 					</div>
 				{/if}
+
+				<div class="ml-4 flex items-center gap-2">
+					<label class="text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400"
+						>Tolerance ±%</label
+					>
+					<input
+						type="number"
+						bind:value={cmpState.numericTolerancePercent}
+						min="0"
+						max="100"
+						step="0.5"
+						class="w-16 rounded-lg border border-gray-200 bg-white px-2 py-1.5 text-center text-sm font-medium text-gray-700 focus:border-green-500 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300"
+					/>
+				</div>
 			</div>
 
 			<button
 				onclick={fetchBoth}
 				disabled={cmpState.loading}
-				class="flex items-center gap-2 rounded-lg bg-indigo-600 px-5 py-2 text-sm font-medium text-white transition-all hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50"
+				class="flex items-center gap-2 rounded-lg bg-green-600 px-5 py-2 text-sm font-medium text-white transition-all hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
 				title="Run Comparison (Ctrl+Enter)"
 			>
 				{#if cmpState.loading}
@@ -708,7 +712,7 @@
 					Running...
 				{:else}
 					<span>Run Comparison</span>
-					<kbd class="ml-1 rounded bg-indigo-500 px-1.5 py-0.5 text-xs font-normal">Ctrl+↵</kbd>
+					<kbd class="ml-1 rounded bg-green-500 px-1.5 py-0.5 text-xs font-normal">Ctrl+↵</kbd>
 				{/if}
 			</button>
 		</div>
@@ -783,7 +787,7 @@
 				class="absolute inset-0 z-50 flex items-center justify-center bg-white/80 backdrop-blur-sm dark:bg-gray-900/80"
 			>
 				<div class="flex flex-col items-center gap-3">
-					<svg class="h-8 w-8 animate-spin text-indigo-600" fill="none" viewBox="0 0 24 24">
+					<svg class="h-8 w-8 animate-spin text-green-600" fill="none" viewBox="0 0 24 24">
 						<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
 						></circle>
 						<path
@@ -803,6 +807,7 @@
 			response2={cmpState.response2}
 			focusPath={cmpState.focusPath}
 			{ignoredKeys}
+			numericTolerancePercent={cmpState.numericTolerancePercent}
 		/>
 	</div>
 {:else if !cmpState.loading}
@@ -823,7 +828,7 @@
 		</div>
 		<h3 class="mb-2 text-xl font-semibold text-gray-800 dark:text-white">Ready to Compare</h3>
 		<p class="max-w-md text-gray-500">
-			Configure your endpoints above, then click <strong class="text-indigo-600"
+			Configure your endpoints above, then click <strong class="text-green-600"
 				>Run Comparison</strong
 			> to analyze the API response differences.
 		</p>
@@ -872,7 +877,7 @@
 					type="text"
 					bind:value={cmpState.ignoreSearch}
 					placeholder="Search keys..."
-					class="w-full rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200"
+					class="w-full rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm focus:border-green-500 focus:ring-2 focus:ring-green-500/20 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200"
 				/>
 			</div>
 
@@ -900,13 +905,13 @@
 									type="checkbox"
 									checked={ignoredKeys.includes(key)}
 									onchange={() => toggleIgnoreKey(key)}
-									class="h-4 w-4 rounded border-gray-300 bg-white text-indigo-600 focus:ring-indigo-500 focus:ring-offset-0 dark:border-gray-600 dark:bg-gray-700"
+									class="h-4 w-4 rounded border-gray-300 bg-white text-green-600 focus:ring-green-500 focus:ring-offset-0 dark:border-gray-600 dark:bg-gray-700"
 								/>
 								<span class="font-mono text-sm font-medium text-gray-700 dark:text-gray-300"
 									>{key}</span
 								>
 								{#if ignoredKeys.includes(key)}
-									<span class="ml-auto text-xs font-medium text-indigo-600 dark:text-indigo-400"
+									<span class="ml-auto text-xs font-medium text-green-600 dark:text-green-400"
 										>Ignored</span
 									>
 								{/if}
@@ -986,7 +991,7 @@
 					type="text"
 					bind:value={cmpState.watchSearch}
 					placeholder="Search keys..."
-					class="w-full rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200"
+					class="w-full rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm focus:border-green-500 focus:ring-2 focus:ring-green-500/20 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200"
 				/>
 			</div>
 
@@ -1013,14 +1018,14 @@
 								<input
 									type="checkbox"
 									checked={watchedKeys.includes(key)}
-									onchange={() => toggleWatchKey(key)}
-									class="h-4 w-4 rounded border-gray-300 bg-white text-indigo-600 focus:ring-indigo-500 focus:ring-offset-0 dark:border-gray-600 dark:bg-gray-700"
+									onchange={() => cmpState.toggleWatchKey(key)}
+									class="h-4 w-4 rounded border-gray-300 bg-white text-green-600 focus:ring-green-500 focus:ring-offset-0 dark:border-gray-600 dark:bg-gray-700"
 								/>
 								<span class="font-mono text-sm font-medium text-gray-700 dark:text-gray-300"
 									>{key}</span
 								>
 								{#if watchedKeys.includes(key)}
-									<span class="ml-auto text-xs font-medium text-indigo-600 dark:text-indigo-400"
+									<span class="ml-auto text-xs font-medium text-green-600 dark:text-green-400"
 										>Watching</span
 									>
 								{/if}
diff --git a/src/lib/components/DiffViewer.svelte b/src/lib/components/DiffViewer.svelte
index 8874659..677ba86 100644
--- a/src/lib/components/DiffViewer.svelte
+++ b/src/lib/components/DiffViewer.svelte
@@ -9,9 +9,16 @@
 		response2: unknown;
 		focusPath?: string;
 		ignoredKeys?: string[];
+		numericTolerancePercent?: number;
 	}
 
-	let { response1, response2, focusPath = '', ignoredKeys = [] }: Props = $props();
+	let {
+		response1,
+		response2,
+		focusPath = '',
+		ignoredKeys = [],
+		numericTolerancePercent = 0
+	}: Props = $props();
 
 	const trimmedPath = $derived(focusPath.trim());
 	const focused1 = $derived(trimmedPath ? getByPath(response1, trimmedPath) : response1);
@@ -338,7 +345,7 @@
 		<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
 			{#if isSearching}
 				<svg
-					class="h-4 w-4 animate-spin text-indigo-500"
+					class="h-4 w-4 animate-spin text-green-500"
 					xmlns="http://www.w3.org/2000/svg"
 					fill="none"
 					viewBox="0 0 24 24"
@@ -367,7 +374,7 @@
 			bind:value={localSearchQuery}
 			oninput={handleSearchInput}
 			placeholder="Search (min 2 chars)..."
-			class="w-full rounded-lg border border-gray-200 bg-gray-50 py-2 pr-10 pl-10 text-sm text-gray-700 transition-all placeholder:text-gray-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:placeholder:text-gray-500"
+			class="w-full rounded-lg border border-gray-200 bg-gray-50 py-2 pr-10 pl-10 text-sm text-gray-700 transition-all placeholder:text-gray-400 focus:border-green-500 focus:ring-2 focus:ring-green-500/20 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:placeholder:text-gray-500"
 		/>
 		{#if localSearchQuery}
 			<button
@@ -390,7 +397,7 @@
 	<button
 		onclick={() => (syncScroll = !syncScroll)}
 		class="flex items-center gap-2 rounded-lg border px-3 py-2 text-sm font-medium transition-all {syncScroll
-			? 'border-indigo-200 bg-indigo-50 text-indigo-700 dark:border-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-400'
+			? 'border-green-200 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-900/30 dark:text-green-400'
 			: 'border-gray-200 bg-gray-50 text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400'}"
 		title="{syncScroll ? 'Disable' : 'Enable'} synchronized scrolling"
 	>
@@ -408,7 +415,7 @@
 	<button
 		onclick={() => (syncSelect = !syncSelect)}
 		class="flex items-center gap-2 rounded-lg border px-3 py-2 text-sm font-medium transition-all {syncSelect
-			? 'border-indigo-200 bg-indigo-50 text-indigo-700 dark:border-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-400'
+			? 'border-green-200 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-900/30 dark:text-green-400'
 			: 'border-gray-200 bg-gray-50 text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400'}"
 		title="{syncSelect ? 'Disable' : 'Enable'} synchronized expand/collapse"
 	>
@@ -427,7 +434,7 @@
 		<button
 			onclick={() => (showSortModal = !showSortModal)}
 			class="flex items-center gap-2 rounded-lg border px-3 py-2 text-sm font-medium transition-all {sortEnabled
-				? 'border-indigo-200 bg-indigo-50 text-indigo-700 dark:border-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-400'
+				? 'border-green-200 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-900/30 dark:text-green-400'
 				: 'border-gray-200 bg-gray-50 text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400'}"
 			title="Sort arrays by ID to align matching items"
 		>
@@ -480,7 +487,7 @@
 							</label>
 							<select
 								bind:value={selectedArrayPath}
-								class="w-full rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-700 focus:border-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300"
+								class="w-full rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-700 focus:border-green-500 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300"
 							>
 								<option value="auto">Auto-detect best array</option>
 								{#each detectedArrays as arr (arr.path)}
@@ -503,7 +510,7 @@
 									<label
 										class="flex cursor-pointer items-start gap-2 border-b border-gray-100 px-3 py-2 last:border-b-0 hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-700/50 {selectedIdField ===
 										field.value
-											? 'bg-indigo-50 dark:bg-indigo-900/20'
+											? 'bg-green-50 dark:bg-green-900/20'
 											: ''}"
 									>
 										<input
@@ -511,7 +518,7 @@
 											name="idField"
 											value={field.value}
 											bind:group={selectedIdField}
-											class="mt-0.5 h-3.5 w-3.5 accent-indigo-600"
+											class="mt-0.5 h-3.5 w-3.5 accent-green-600"
 										/>
 										<div class="flex-1">
 											<span class="text-sm font-medium text-gray-700 dark:text-gray-200"
@@ -534,7 +541,7 @@
 							<button
 								onclick={doSort}
 								disabled={sortLoading}
-								class="flex flex-1 items-center justify-center gap-1.5 rounded-lg bg-indigo-600 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-700 disabled:opacity-50"
+								class="flex flex-1 items-center justify-center gap-1.5 rounded-lg bg-green-600 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:opacity-50"
 							>
 								{#if sortLoading}
 									<svg class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
@@ -633,6 +640,7 @@
 			matchingPaths={matchingPaths1}
 			{syncedExpandedPaths}
 			onToggle={syncSelect ? handleToggle : undefined}
+			{numericTolerancePercent}
 		/>
 	</div>
 	<div
@@ -650,6 +658,7 @@
 			matchingPaths={matchingPaths2}
 			{syncedExpandedPaths}
 			onToggle={syncSelect ? handleToggle : undefined}
+			{numericTolerancePercent}
 		/>
 	</div>
 </div>
diff --git a/src/lib/components/GtfsRtLogViewer.svelte b/src/lib/components/GtfsRtLogViewer.svelte
index af6dbeb..832ba58 100644
--- a/src/lib/components/GtfsRtLogViewer.svelte
+++ b/src/lib/components/GtfsRtLogViewer.svelte
@@ -131,7 +131,7 @@
 				</p>
 			</div>
 			<span
-				class="rounded-full bg-indigo-100 px-3 py-1 text-sm font-medium text-indigo-600 dark:bg-indigo-900/40 dark:text-indigo-300"
+				class="rounded-full bg-green-100 px-3 py-1 text-sm font-medium text-green-600 dark:bg-green-900/40 dark:text-green-300"
 			>
 				{#if totalSnapshotsLoading}
 					Loading...
@@ -161,7 +161,7 @@
 								onclick={() => (gtfsRtLogState.timeRange = range as 'live' | '1h' | '24h' | 'all')}
 								class="flex-1 rounded-md px-3 py-1.5 text-xs font-medium transition-all sm:flex-none
                                        {gtfsRtLogState.timeRange === range
-									? 'bg-indigo-600 text-white shadow'
+									? 'bg-green-600 text-white shadow'
 									: 'text-gray-600 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700'}"
 							>
 								{range === '1h'
@@ -203,7 +203,7 @@
 					bind:value={gtfsRtLogState.limit}
 					min="10"
 					max="1000"
-					class="w-full rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200"
+					class="w-full rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm text-gray-900 focus:border-green-500 focus:ring-2 focus:ring-green-500/30 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200"
 				/>
 			</div>
 
@@ -255,7 +255,7 @@
 				<div class="group relative pb-4 last:pb-0">
 					<button
 						onclick={() => openDetail(snapshot.id)}
-						class="group w-full rounded-lg border border-gray-200 bg-gray-50 p-4 text-left transition-all hover:border-indigo-400 hover:bg-gray-100 hover:shadow-md dark:border-gray-800 dark:bg-gray-800/60 dark:hover:border-indigo-600/60 dark:hover:bg-gray-800"
+						class="group w-full rounded-lg border border-gray-200 bg-gray-50 p-4 text-left transition-all hover:border-green-400 hover:bg-gray-100 hover:shadow-md dark:border-gray-800 dark:bg-gray-800/60 dark:hover:border-green-600/60 dark:hover:bg-gray-800"
 					>
 						<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
 							<div class="flex flex-col gap-6 sm:flex-row sm:items-center">
@@ -321,13 +321,13 @@
 							</div>
 
 							<div
-								class="flex items-center gap-2 text-indigo-500 opacity-70 transition-opacity group-hover:opacity-100 dark:text-indigo-400"
+								class="flex items-center gap-2 text-green-500 opacity-70 transition-opacity group-hover:opacity-100 dark:text-green-400"
 							>
 								<span class="hidden text-xs font-black tracking-wider uppercase sm:inline"
 									>Inspect</span
 								>
 								<div
-									class="rounded-lg bg-indigo-100 p-2 transition-colors group-hover:bg-indigo-600 group-hover:text-white dark:bg-indigo-900/30"
+									class="rounded-lg bg-green-100 p-2 transition-colors group-hover:bg-green-600 group-hover:text-white dark:bg-green-900/30"
 								>
 									<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 										<path
@@ -368,7 +368,7 @@
 				class="flex items-center justify-between border-b border-gray-200 bg-gray-50 px-6 py-4 dark:border-gray-800 dark:bg-gray-950/50"
 			>
 				<div class="flex items-center gap-4">
-					<div class="rounded-xl bg-indigo-600 p-2.5 text-white">
+					<div class="rounded-xl bg-green-600 p-2.5 text-white">
 						<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 							<path
 								stroke-linecap="round"
@@ -380,7 +380,7 @@
 					</div>
 					<div>
 						<h3 class="text-lg font-bold text-gray-900 dark:text-white">Snapshot Detail</h3>
-						<p class="text-xs text-indigo-500 dark:text-indigo-400">
+						<p class="text-xs text-green-500 dark:text-green-400">
 							{formatTimestamp(
 								gtfsRtLogState.snapshots.find((s) => s.id === selectedSnapshotId)?.timestamp || ''
 							)}
@@ -464,7 +464,7 @@
 			>
 				<button
 					onclick={() => (showDetail = false)}
-					class="rounded-lg bg-indigo-600 px-6 py-2.5 text-sm font-medium text-white transition hover:bg-indigo-700"
+					class="rounded-lg bg-green-600 px-6 py-2.5 text-sm font-medium text-white transition hover:bg-green-700"
 				>
 					Close
 				</button>
diff --git a/src/lib/components/JsonDiff.svelte b/src/lib/components/JsonDiff.svelte
index 976cdcc..eb7935e 100644
--- a/src/lib/components/JsonDiff.svelte
+++ b/src/lib/components/JsonDiff.svelte
@@ -134,7 +134,7 @@
 				class:border-green-400={status === 'added' && side === 'left'}
 				class:border-gray-200={status === 'same'}
 			>
-				<span class="font-bold text-indigo-700">"{key}"</span><span class="mx-1 text-gray-500"
+				<span class="font-bold text-green-700">"{key}"</span><span class="mx-1 text-gray-500"
 					>:</span
 				>
 				{#if isPrimitive(value)}
diff --git a/src/lib/components/JsonTree.svelte b/src/lib/components/JsonTree.svelte
index ca1234d..5a8e1ad 100644
--- a/src/lib/components/JsonTree.svelte
+++ b/src/lib/components/JsonTree.svelte
@@ -9,6 +9,7 @@
 		isPrimitive,
 		sortEntries
 	} from '$lib/utils/jsonCompare';
+	import { comparatorState } from '$lib/panelState.svelte';
 
 	interface Props {
 		value: unknown;
@@ -26,6 +27,7 @@
 		currentPath?: string;
 		syncedExpandedPaths?: Set<string>;
 		onToggle?: (path: string, expanded: boolean) => void;
+		numericTolerancePercent?: number;
 	}
 
 	const CHUNK_SIZE = 50;
@@ -47,7 +49,8 @@
 		matchingPaths = new Set<string>(),
 		currentPath = '',
 		syncedExpandedPaths,
-		onToggle
+		onToggle,
+		numericTolerancePercent = 0
 	}: Props = $props();
 
 	function matchesSearch(text: string): boolean {
@@ -145,12 +148,28 @@
 								: false
 	);
 
+	function normalizeKeyPath(path: string): string {
+		return path.replace(/\[\d+\]/g, '.*');
+	}
+
+	const watchedKeySet = $derived(
+		new Set(
+			comparatorState.watchedKeysInput
+				.split(',')
+				.map((k) => k.trim())
+				.filter((k) => k.length > 0)
+				.map((k) => normalizeKeyPath(k))
+		)
+	);
+
+	const isWatched = $derived(!!currentPath && watchedKeySet.has(normalizeKeyPath(currentPath)));
+
 	const isPrimitiveValue = $derived(isPrimitive(value));
 	const status = $derived(
 		skipComparison
 			? 'same'
 			: isPrimitiveValue || expanded || level === 0
-				? getDiffStatus(value, otherValue, side, ignoredKeys)
+				? getDiffStatus(value, otherValue, side, ignoredKeys, numericTolerancePercent)
 				: 'same'
 	);
 	const hasDiff = $derived(status !== 'same' && !isReference);
@@ -158,7 +177,7 @@
 	const diffCount = $derived(
 		skipComparison || expanded || isReference || isPrimitiveValue
 			? 0
-			: countDifferences(value, otherValue, ignoredKeys)
+			: countDifferences(value, otherValue, ignoredKeys, 999, numericTolerancePercent)
 	);
 
 	const arrayItems = $derived(isArray(value) ? value : []);
@@ -279,7 +298,7 @@
 			valueMatchesSearch
 				? 'bg-yellow-50/30 ring-2 ring-yellow-400/50 dark:bg-yellow-900/20'
 				: ''} {currentPath && matchingPaths.has(currentPath)
-				? 'bg-indigo-100/50 ring-2 ring-indigo-500/50 dark:bg-indigo-900/30'
+				? 'bg-green-100/50 ring-2 ring-green-500/50 dark:bg-green-900/30'
 				: ''}"
 		>
 			{#if isArray(value) || isObject(value)}
@@ -290,7 +309,43 @@
 					<span class="transition-transform {expanded ? 'rotate-0' : '-rotate-90'}">▼</span>
 				</button>
 			{:else}
-				<span class="mr-2 w-5 flex-shrink-0"></span>
+				<span class="mr-1 w-5 flex-shrink-0"></span>
+			{/if}
+
+			{#if currentPath}
+				<button
+					onclick={(e) => {
+						e.stopPropagation();
+						comparatorState.toggleWatchKey(normalizeKeyPath(currentPath));
+					}}
+					class="mr-1 flex h-5 w-5 shrink-0 items-center justify-center rounded opacity-0 transition-all group-hover:opacity-100 hover:bg-gray-200 dark:hover:bg-gray-700 {isWatched
+						? 'text-green-600 opacity-100 dark:text-green-400'
+						: 'text-gray-400 dark:text-gray-500'}"
+					title={isWatched ? 'Remove from watched keys' : 'Add to watched keys'}
+				>
+					{#if isWatched}
+						<svg class="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 24 24">
+							<path
+								d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
+							/>
+						</svg>
+					{:else}
+						<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+							/>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+							/>
+						</svg>
+					{/if}
+				</button>
 			{/if}
 
 			<span class="mr-1 flex-shrink-0 font-semibold text-cyan-700 select-text dark:text-cyan-400">
@@ -353,7 +408,7 @@
 								e.stopPropagation();
 								expandAllChildren();
 							}}
-							class="flex items-center gap-1 rounded-md border border-emerald-200 bg-emerald-50 px-2 py-0.5 text-[10px] font-medium text-emerald-700 transition-colors hover:bg-emerald-100 dark:border-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-400 dark:hover:bg-emerald-900/50"
+							class="flex items-center gap-1 rounded-md border border-green-200 bg-green-50 px-2 py-0.5 text-[10px] font-medium text-green-700 transition-colors hover:bg-green-100 dark:border-green-800 dark:bg-green-900/30 dark:text-green-400 dark:hover:bg-green-900/50"
 							title="Expand all items"
 						>
 							<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"
@@ -427,6 +482,7 @@
 						currentPath={currentPath ? `${currentPath}[${index}]` : `[${index}]`}
 						{syncedExpandedPaths}
 						{onToggle}
+						{numericTolerancePercent}
 					/>
 				{/each}
 				{#if hasMoreItems}
@@ -499,6 +555,7 @@
 						currentPath={currentPath ? `${currentPath}.${key}` : key}
 						{syncedExpandedPaths}
 						{onToggle}
+						{numericTolerancePercent}
 					/>
 				{/each}
 				{#if hasMoreEntries}
diff --git a/src/lib/components/JsonViewer.svelte b/src/lib/components/JsonViewer.svelte
index f4653bf..3f9947c 100644
--- a/src/lib/components/JsonViewer.svelte
+++ b/src/lib/components/JsonViewer.svelte
@@ -12,6 +12,7 @@
 		matchingPaths?: Set<string>;
 		syncedExpandedPaths?: Set<string>;
 		onToggle?: (path: string, expanded: boolean) => void;
+		numericTolerancePercent?: number;
 	}
 
 	let {
@@ -22,7 +23,8 @@
 		searchQuery = '',
 		matchingPaths = new Set<string>(),
 		syncedExpandedPaths,
-		onToggle
+		onToggle,
+		numericTolerancePercent = 0
 	}: Props = $props();
 
 	let globalExpand = $state<boolean | null>(null);
@@ -145,6 +147,7 @@
 				{matchingPaths}
 				{syncedExpandedPaths}
 				{onToggle}
+				{numericTolerancePercent}
 			/>
 		{:else}
 			<div class="py-8 text-center text-gray-400 italic">No JSON data</div>
diff --git a/src/lib/components/KeyLogViewer.svelte b/src/lib/components/KeyLogViewer.svelte
index 232aa6f..7dd4f87 100644
--- a/src/lib/components/KeyLogViewer.svelte
+++ b/src/lib/components/KeyLogViewer.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { endpoints as configuredEndpoints } from '$lib/endpoints';
 	import { onMount, untrack } from 'svelte';
-	import { SvelteSet } from 'svelte/reactivity';
+	import { SvelteSet, SvelteMap } from 'svelte/reactivity';
 	import { logState } from '$lib/logState.svelte';
-	import { loggerState, type KeyLogEntry } from '$lib/panelState.svelte';
+	import { comparatorState, loggerState, type KeyLogEntry } from '$lib/panelState.svelte';
 	import { fly } from 'svelte/transition';
-	import { deepEqualIgnoreOrder } from '$lib/utils/jsonCompare';
+	import { deepEqualIgnoreOrder, sortById } from '$lib/utils/jsonCompare';
 
 	import JsonViewer from '$lib/components/JsonViewer.svelte';
 
@@ -30,6 +30,182 @@
 
 	let syncedExpandedPaths = new SvelteSet<string>();
 	let server1ScrollContainer = $state<HTMLElement | undefined>(undefined);
+
+	let traceKeyPath = $state('');
+	let showChart = $state(false);
+	let chartTimeRange = $state<'30m' | '1h' | '2h' | '6h' | '24h' | 'all'>('all');
+	let chartLogs = $state<KeyLogEntry[]>([]);
+
+	const trendByLogId = $derived.by(() => {
+		const map = new SvelteMap<
+			number,
+			{ server1: 'up' | 'down' | 'same' | null; server2: 'up' | 'down' | 'same' | null }
+		>();
+		const last = new SvelteMap<string, { s1: number; s2: number }>();
+		for (const log of filteredLogs) {
+			const s1 = typeof log.server1_value === 'number' ? log.server1_value : NaN;
+			const s2 = typeof log.server2_value === 'number' ? log.server2_value : NaN;
+			const prev = last.get(log.key_path);
+			const t1 =
+				prev !== undefined && !isNaN(s1)
+					? s1 > prev.s1
+						? 'up'
+						: s1 < prev.s1
+							? 'down'
+							: 'same'
+					: null;
+			const t2 =
+				prev !== undefined && !isNaN(s2)
+					? s2 > prev.s2
+						? 'up'
+						: s2 < prev.s2
+							? 'down'
+							: 'same'
+					: null;
+			map.set(log.id, { server1: t1, server2: t2 });
+			last.set(log.key_path, {
+				s1: isNaN(s1) ? (prev?.s1 ?? 0) : s1,
+				s2: isNaN(s2) ? (prev?.s2 ?? 0) : s2
+			});
+		}
+		return map;
+	});
+
+	const S1_COLORS = ['#16a34a', '#15803d', '#166534', '#22c55e', '#4ade80', '#86efac'];
+	const S2_COLORS = ['#f97316', '#ea580c', '#c2410c', '#fb923c', '#fdba74', '#fed7aa'];
+
+	const chartData = $derived.by(() => {
+		const empty = {
+			entries: [] as KeyLogEntry[],
+			hasNumeric: false,
+			s1: { series: [] as { label: string; points: { x: number; y: number }[] }[], maxLen: 0 },
+			s2: { series: [] as { label: string; points: { x: number; y: number }[] }[], maxLen: 0 },
+			minVal: 0,
+			maxVal: 1,
+			range: 1
+		};
+		if (!traceKeyPath) return empty;
+
+		let raw = chartLogs.filter((l) => l.key_path === traceKeyPath);
+
+		if (chartTimeRange !== 'all') {
+			const ms = {
+				'30m': 30 * 60 * 1000,
+				'1h': 60 * 60 * 1000,
+				'2h': 2 * 60 * 60 * 1000,
+				'6h': 6 * 60 * 60 * 1000,
+				'24h': 24 * 60 * 60 * 1000
+			}[chartTimeRange];
+			const cutoff = Date.now() - ms;
+			raw = raw.filter((l) => new Date(l.timestamp).getTime() >= cutoff);
+		}
+
+		const entries = raw;
+		const allRawVals: number[] = entries.flatMap((e) => {
+			const s1 = e.server1_value;
+			const s2 = e.server2_value;
+			const a1 = Array.isArray(s1)
+				? (s1 as unknown[]).filter((v): v is number => typeof v === 'number' && Number.isFinite(v))
+				: typeof s1 === 'number' && Number.isFinite(s1)
+					? [s1]
+					: [];
+			const a2 = Array.isArray(s2)
+				? (s2 as unknown[]).filter((v): v is number => typeof v === 'number' && Number.isFinite(v))
+				: typeof s2 === 'number' && Number.isFinite(s2)
+					? [s2]
+					: [];
+			return [...a1, ...a2];
+		});
+		const hasNumeric = allRawVals.some((v: number) => !isNaN(v));
+
+		function buildSeries(getVal: (e: KeyLogEntry) => unknown): {
+			series: { label: string; points: { x: number; y: number }[] }[];
+			maxLen: number;
+		} {
+			const maxLen = entries.reduce((m, e) => {
+				const v = getVal(e);
+				return Array.isArray(v) ? Math.max(m, v.length) : Math.max(m, 1);
+			}, 0);
+			const series: { label: string; points: { x: number; y: number }[] }[] = [];
+			for (let i = 0; i < maxLen; i++) {
+				const points: { x: number; y: number }[] = [];
+				for (let ei = 0; ei < entries.length; ei++) {
+					const raw = getVal(entries[ei]);
+					let val: number;
+					if (Array.isArray(raw)) {
+						val = i < raw.length ? Number(raw[i]) : NaN;
+					} else {
+						val = i === 0 ? Number(raw) : NaN;
+					}
+					if (!isNaN(val)) {
+						points.push({ x: ei, y: val });
+					}
+				}
+				if (points.length > 0) {
+					series.push({ label: `#${i}`, points });
+				}
+			}
+			return { series, maxLen };
+		}
+
+		const s1 = buildSeries((e) => e.server1_value);
+		const s2 = buildSeries((e) => e.server2_value);
+
+		const allNumericVals = entries
+			.flatMap((e) => {
+				const a1 = Array.isArray(e.server1_value)
+					? (e.server1_value as unknown[]).map(Number)
+					: [Number(e.server1_value)];
+				const a2 = Array.isArray(e.server2_value)
+					? (e.server2_value as unknown[]).map(Number)
+					: [Number(e.server2_value)];
+				return [...a1, ...a2];
+			})
+			.filter((v) => !isNaN(v));
+
+		const minVal = allNumericVals.length > 0 ? Math.min(...allNumericVals) : 0;
+		const maxVal = allNumericVals.length > 0 ? Math.max(...allNumericVals) : 1;
+		const range = maxVal - minVal || 1;
+
+		return { entries, hasNumeric, s1, s2, minVal, maxVal, range };
+	});
+
+	let columnWidths = $state<Record<string, number>>({});
+	let resizingColumn = $state<string | null>(null);
+	let resizeStartX = $state(0);
+	let resizeStartWidth = $state(0);
+
+	function startResize(e: MouseEvent, col: string) {
+		e.preventDefault();
+		const th = (e.currentTarget as HTMLElement).parentElement;
+		if (!th) return;
+		resizingColumn = col;
+		resizeStartX = e.clientX;
+		resizeStartWidth = th.offsetWidth;
+	}
+
+	function resetColumnWidths() {
+		columnWidths = {};
+	}
+
+	$effect(() => {
+		if (!resizingColumn) return;
+		function onMouseMove(e: MouseEvent) {
+			if (!resizingColumn) return;
+			const diff = e.clientX - resizeStartX;
+			const newWidth = Math.max(60, resizeStartWidth + diff);
+			columnWidths = { ...columnWidths, [resizingColumn]: newWidth };
+		}
+		function onMouseUp() {
+			resizingColumn = null;
+		}
+		document.addEventListener('mousemove', onMouseMove);
+		document.addEventListener('mouseup', onMouseUp);
+		return () => {
+			document.removeEventListener('mousemove', onMouseMove);
+			document.removeEventListener('mouseup', onMouseUp);
+		};
+	});
 	let server2ScrollContainer = $state<HTMLElement | undefined>(undefined);
 	let isScrollSyncing = false;
 
@@ -223,12 +399,42 @@
 		}
 	}
 
+	async function fetchChartLogs() {
+		if (!loggerState.selectedEndpoint || !traceKeyPath) return;
+		const capturedEndpoint = loggerState.selectedEndpoint;
+		const capturedKey = traceKeyPath;
+		try {
+			let url = `/api/keylog?endpoint=${encodeURIComponent(capturedEndpoint)}&keyPath=${encodeURIComponent(capturedKey)}&limit=10000`;
+			const res = await fetch(url);
+			if (capturedEndpoint !== loggerState.selectedEndpoint || capturedKey !== traceKeyPath) return;
+			const data = await res.json();
+			chartLogs = data.logs || [];
+		} catch (e) {
+			console.error('Failed to fetch chart logs:', e);
+		}
+	}
+
+	$effect(() => {
+		void traceKeyPath;
+		void showChart;
+		void loggerState.selectedEndpoint;
+		if (showChart && traceKeyPath && loggerState.selectedEndpoint) {
+			fetchChartLogs();
+		} else {
+			chartLogs = [];
+		}
+	});
+
 	function sortForDisplay<T>(arr: readonly T[]): T[] {
 		if (arr.length === 0) return [];
 		const allNumbers = arr.every((x) => typeof x === 'number' && !Number.isNaN(x));
 		if (allNumbers) {
 			return [...arr].sort((a, b) => (a as number) - (b as number));
 		}
+		const allObjects = arr.every((x) => typeof x === 'object' && x !== null);
+		if (allObjects) {
+			return [...arr].sort(sortById);
+		}
 		return [...arr].sort((a, b) => {
 			const sa = typeof a === 'object' && a !== null ? JSON.stringify(a) : String(a);
 			const sb = typeof b === 'object' && b !== null ? JSON.stringify(b) : String(b);
@@ -236,6 +442,11 @@
 		});
 	}
 
+	function lastPathSegment(path: string): string {
+		const parts = path.split('.');
+		return parts[parts.length - 1];
+	}
+
 	function formatValue(value: unknown): string {
 		if (value === null || value === undefined) return '—';
 		if (Array.isArray(value)) return JSON.stringify(sortForDisplay(value));
@@ -244,7 +455,7 @@
 	}
 
 	function valuesMatch(v1: unknown, v2: unknown): boolean {
-		return deepEqualIgnoreOrder(v1, v2);
+		return deepEqualIgnoreOrder(v1, v2, [], comparatorState.numericTolerancePercent);
 	}
 
 	function formatTimestamp(ts: string): string {
@@ -314,10 +525,18 @@
 			</div>
 			<div class="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
 				<span
-					class="rounded-full bg-indigo-100 px-3 py-1 font-medium text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300"
+					class="rounded-full bg-green-100 px-3 py-1 font-medium text-green-700 dark:bg-green-900/30 dark:text-green-300"
 				>
 					{loggerState.totalCount} total logs
 				</span>
+				{#if Object.keys(columnWidths).length > 0}
+					<button
+						onclick={resetColumnWidths}
+						class="rounded-lg border border-gray-200 bg-white px-2.5 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
+					>
+						Reset columns
+					</button>
+				{/if}
 			</div>
 		</div>
 
@@ -332,7 +551,7 @@
 				<select
 					id="endpoint-select"
 					bind:value={loggerState.selectedEndpoint}
-					class="w-full cursor-pointer appearance-none rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 transition-all focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
+					class="w-full cursor-pointer appearance-none rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 transition-all focus:border-green-500 focus:ring-2 focus:ring-green-500/20 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
 				>
 					<option value="">Select endpoint...</option>
 					{#each configuredEndpoints as endpoint (endpoint.id)}
@@ -361,7 +580,7 @@
 							(e.target as HTMLSelectElement).value = '';
 						}}
 						disabled={!loggerState.selectedEndpoint}
-						class="w-full cursor-pointer appearance-none rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition-all focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
+						class="w-full cursor-pointer appearance-none rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition-all focus:border-green-500 focus:ring-2 focus:ring-green-500/20 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
 					>
 						<option value="" disabled selected>Add key path...</option>
 						{#each loggerState.keyPaths as kp (kp)}
@@ -375,12 +594,12 @@
 						<div class="flex flex-wrap gap-2">
 							{#each [...loggerState.selectedKeyPaths] as kp (kp)}
 								<span
-									class="flex items-center gap-1 rounded-full bg-indigo-100 px-2 py-1 text-[11px] font-medium text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300"
+									class="flex items-center gap-1 rounded-full bg-green-100 px-2 py-1 text-[11px] font-medium text-green-700 dark:bg-green-900/30 dark:text-green-300"
 								>
 									{kp}
 									<button
 										onclick={() => loggerState.selectedKeyPaths.delete(kp)}
-										class="hover:text-indigo-900 dark:hover:text-indigo-100"
+										class="hover:text-green-900 dark:hover:text-green-100"
 										aria-label="Remove key path"
 									>
 										<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -422,7 +641,7 @@
 					bind:value={loggerState.limit}
 					min="10"
 					max="1000"
-					class="w-full rounded-lg border border-gray-200 bg-gray-50 px-4 py-2.5 text-sm text-gray-700 transition-all focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300"
+					class="w-full rounded-lg border border-gray-200 bg-gray-50 px-4 py-2.5 text-sm text-gray-700 transition-all focus:border-green-500 focus:ring-2 focus:ring-green-500/20 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300"
 				/>
 			</div>
 
@@ -463,79 +682,329 @@
 						Diff
 					</button>
 				</div>
+				{#if comparatorState.numericTolerancePercent > 0}
+					<div
+						class="mt-1.5 flex items-center gap-1 rounded-md bg-amber-50 px-2 py-1 text-[11px] font-medium text-amber-700 dark:bg-amber-900/20 dark:text-amber-400"
+					>
+						<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+							></path>
+						</svg>
+						±{comparatorState.numericTolerancePercent}% tolerance
+					</div>
+				{/if}
 			</div>
 
 			<div
 				class="col-span-12 flex items-center justify-between border-t border-gray-100 pt-4 dark:border-gray-700"
 			>
-				<div class="flex items-center gap-2">
-					<div
-						class="mr-2 block text-xs font-semibold tracking-wide text-gray-500 uppercase dark:text-gray-400"
-					>
-						Time Range:
-					</div>
-					<div
-						class="flex items-center rounded-lg border border-gray-200 bg-gray-50 p-1 dark:border-gray-700 dark:bg-gray-900"
-					>
-						{#each ['live', '1h', '24h', 'all'] as range (range)}
-							<button
-								onclick={() => (loggerState.timeRange = range as 'live' | '1h' | '24h' | 'all')}
-								class="rounded-md px-3 py-1.5 text-xs font-medium capitalize transition-all {loggerState.timeRange ===
-								range
-									? 'bg-white text-indigo-700 shadow-sm dark:bg-indigo-900/30 dark:text-indigo-300'
-									: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'}"
-							>
-								{range === '1h' ? 'Last 1h' : range === '24h' ? 'Last 24h' : range}
-							</button>
-						{/each}
+				<div class="flex items-center gap-4">
+					<div class="flex items-center gap-2">
+						<div
+							class="text-xs font-semibold tracking-wide text-gray-500 uppercase dark:text-gray-400"
+						>
+							Time Range:
+						</div>
+						<div
+							class="flex items-center rounded-lg border border-gray-200 bg-gray-50 p-1 dark:border-gray-700 dark:bg-gray-900"
+						>
+							{#each ['live', '1h', '24h', 'all'] as range (range)}
+								<button
+									onclick={() => (loggerState.timeRange = range as 'live' | '1h' | '24h' | 'all')}
+									class="rounded-md px-3 py-1.5 text-xs font-medium capitalize transition-all {loggerState.timeRange ===
+									range
+										? 'bg-white text-green-700 shadow-sm dark:bg-green-900/30 dark:text-green-300'
+										: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'}"
+								>
+									{range === '1h' ? 'Last 1h' : range === '24h' ? 'Last 24h' : range}
+								</button>
+							{/each}
+						</div>
 					</div>
-					{#if loggerState.timeRange === 'live'}
+					<div class="flex items-center gap-2">
 						<div
-							class="ml-2 flex items-center gap-1.5 text-xs font-medium text-green-600 dark:text-green-400"
+							class="text-xs font-semibold tracking-wide text-gray-500 uppercase dark:text-gray-400"
 						>
-							<span class="relative flex h-2 w-2">
-								<span
-									class="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"
-								></span>
-								<span class="relative inline-flex h-2 w-2 rounded-full bg-green-500"></span>
-							</span>
-							Live
+							Trace:
 						</div>
-					{/if}
+						<select
+							bind:value={traceKeyPath}
+							class="rounded-lg border border-gray-200 bg-gray-50 px-2 py-1.5 text-xs font-medium text-gray-700 focus:border-green-500 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300"
+						>
+							<option value="">Select key...</option>
+							{#each [...new Set(loggerState.logs.map((l) => l.key_path))] as kp (kp)}
+								<option value={kp}>{lastPathSegment(kp)}</option>
+							{/each}
+						</select>
+						<button
+							onclick={() => {
+								if (traceKeyPath) showChart = !showChart;
+							}}
+							disabled={!traceKeyPath}
+							class="flex items-center gap-1 rounded-lg px-2.5 py-1.5 text-xs font-medium transition-all {showChart &&
+							traceKeyPath
+								? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
+								: 'border border-gray-200 bg-white text-gray-600 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-40 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700'}"
+						>
+							<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
+								/>
+							</svg>
+							Chart
+						</button>
+					</div>
 				</div>
-
-				<div class="flex items-center gap-2">
+				<div class="flex items-center gap-3">
 					<button
-						onclick={() => {
-							if (loggerState.selectedEndpoint) {
-								fetchLogs(false);
-								fetchCount();
-							}
-						}}
-						disabled={!loggerState.selectedEndpoint || loggerState.loading}
-						class="rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition-all hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+						onclick={exportCSV}
+						class="flex items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-xs font-medium text-gray-600 transition-all hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
 					>
-						Refresh
+						<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+							><path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+							></path></svg
+						>
+						Export CSV
 					</button>
 					<button
-						onclick={exportCSV}
-						disabled={loggerState.logs.length === 0}
-						class="rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition-all hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+						onclick={() => fetchLogs()}
+						class="flex items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-xs font-medium text-gray-600 transition-all hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
+						title="Refresh"
 					>
-						Export CSV
+						<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+							></path>
+						</svg>
 					</button>
-
 					<button
 						onclick={clearLogs}
-						class="rounded-lg border border-red-200 bg-white px-4 py-2 text-sm font-medium text-red-600 transition-all hover:bg-red-50 dark:border-red-900/30 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-red-900/20"
+						class="flex items-center gap-1.5 rounded-lg border border-red-200 bg-white px-3 py-1.5 text-xs font-medium text-red-600 transition-all hover:bg-red-50 dark:border-red-900/30 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-red-900/20"
 					>
-						Clear Logs
+						Clear
 					</button>
 				</div>
 			</div>
 		</div>
 	</div>
 
+	<!-- Chart -->
+	{#if showChart && traceKeyPath && chartData.entries.length > 1}
+		{@const pad = { top: 20, right: 16, bottom: 28, left: 48 }}
+		{@const cw = 400}
+		{@const ch = 220}
+		{@const iw = cw - pad.left - pad.right}
+		{@const ih = ch - pad.top - pad.bottom}
+		{@const scaleY = (v: number) => pad.top + ih - ((v - chartData.minVal) / chartData.range) * ih}
+		{@const scaleX = (ei: number) =>
+			pad.left + (ei / Math.max(chartData.entries.length - 1, 1)) * iw}
+		{@const yTicks = Array.from({ length: 5 }, (_, i) => {
+			const v = chartData.minVal + (chartData.range * i) / 4;
+			return { value: v, y: scaleY(v) };
+		})}
+		<div
+			class="rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800"
+		>
+			<div class="mb-3 flex flex-wrap items-center gap-3">
+				<h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">
+					Trace: <span class="font-mono text-green-600 dark:text-green-400">{traceKeyPath}</span>
+				</h3>
+				<div class="ml-auto flex items-center gap-2">
+					<span class="text-[11px] font-medium text-gray-500 dark:text-gray-400">Time:</span>
+					<div
+						class="flex items-center rounded-lg border border-gray-200 bg-gray-50 p-0.5 dark:border-gray-700 dark:bg-gray-900"
+					>
+						{#each ['30m', '1h', '2h', '6h', '24h', 'all'] as range (range)}
+							<button
+								onclick={() =>
+									(chartTimeRange = range as '30m' | '1h' | '2h' | '6h' | '24h' | 'all')}
+								class="rounded-md px-2.5 py-1.5 text-xs font-medium transition-all {chartTimeRange ===
+								range
+									? 'bg-white text-green-700 shadow-sm dark:bg-green-900/30 dark:text-green-300'
+									: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'}"
+							>
+								{range === 'all' ? 'All' : range}
+							</button>
+						{/each}
+					</div>
+					<span class="text-xs text-gray-500">({chartData.entries.length} pts)</span>
+				</div>
+			</div>
+			{#if chartData.hasNumeric}
+				<div class="grid grid-cols-2 gap-6">
+					<div>
+						<h4
+							class="mb-2 text-xs font-bold tracking-wide text-green-600 uppercase dark:text-green-400"
+						>
+							Server 1
+						</h4>
+						<svg viewBox="0 0 {cw} {ch}" class="w-full">
+							{#each yTicks as tick (tick.value)}
+								<line
+									x1={pad.left}
+									x2={cw - pad.right}
+									y1={tick.y}
+									y2={tick.y}
+									stroke="currentColor"
+									class="text-gray-200 dark:text-gray-700"
+									stroke-width="1"
+								/>
+							{/each}
+							{#each yTicks as tick (tick.value)}
+								<text
+									x={pad.left - 4}
+									y={tick.y + 3}
+									text-anchor="end"
+									class="fill-gray-500 text-[9px] dark:fill-gray-400"
+								>
+									{tick.value.toFixed(1)}
+								</text>
+							{/each}
+							<clipPath id="clip-s1">
+								<rect x={pad.left} y={pad.top} width={iw} height={ih} />
+							</clipPath>
+							<g clip-path="url(#clip-s1)">
+								{#each chartData.s1.series as s, si (si)}
+									<polyline
+										points={s.points.map((p) => `${scaleX(p.x)},${scaleY(p.y)}`).join(' ')}
+										fill="none"
+										stroke={S1_COLORS[si % S1_COLORS.length]}
+										stroke-width="2"
+										stroke-linejoin="round"
+										stroke-linecap="round"
+									/>
+								{/each}
+							</g>
+							{#if chartData.s1.series.length > 1}
+								<text
+									x={pad.left + 4}
+									y={pad.top - 4}
+									class="fill-gray-400 text-[8px] dark:fill-gray-500"
+								>
+									{chartData.s1.series.length} lines
+								</text>
+							{/if}
+							{#if chartData.s1.series.length > 1}
+								<g transform="translate({pad.left}, {ch - 16})">
+									{#each chartData.s1.series.slice(0, 6) as s, si (si)}
+										<line
+											x1={si * 50}
+											y1={0}
+											x2={si * 50 + 14}
+											y2={0}
+											stroke={S1_COLORS[si % S1_COLORS.length]}
+											stroke-width="2"
+										/>
+										<text
+											x={si * 50 + 16}
+											y={3}
+											class="fill-gray-500 text-[8px] dark:fill-gray-400"
+										>
+											{s.label}
+										</text>
+									{/each}
+								</g>
+							{/if}
+						</svg>
+					</div>
+					<div>
+						<h4
+							class="mb-2 text-xs font-bold tracking-wide text-orange-600 uppercase dark:text-orange-400"
+						>
+							Server 2
+						</h4>
+						<svg viewBox="0 0 {cw} {ch}" class="w-full">
+							{#each yTicks as tick (tick.value)}
+								<line
+									x1={pad.left}
+									x2={cw - pad.right}
+									y1={tick.y}
+									y2={tick.y}
+									stroke="currentColor"
+									class="text-gray-200 dark:text-gray-700"
+									stroke-width="1"
+								/>
+							{/each}
+							{#each yTicks as tick (tick.value)}
+								<text
+									x={pad.left - 4}
+									y={tick.y + 3}
+									text-anchor="end"
+									class="fill-gray-500 text-[9px] dark:fill-gray-400"
+								>
+									{tick.value.toFixed(1)}
+								</text>
+							{/each}
+							<clipPath id="clip-s2">
+								<rect x={pad.left} y={pad.top} width={iw} height={ih} />
+							</clipPath>
+							<g clip-path="url(#clip-s2)">
+								{#each chartData.s2.series as s, si (si)}
+									<polyline
+										points={s.points.map((p) => `${scaleX(p.x)},${scaleY(p.y)}`).join(' ')}
+										fill="none"
+										stroke={S2_COLORS[si % S2_COLORS.length]}
+										stroke-width="2"
+										stroke-linejoin="round"
+										stroke-linecap="round"
+									/>
+								{/each}
+							</g>
+							{#if chartData.s2.series.length > 1}
+								<text
+									x={pad.left + 4}
+									y={pad.top - 4}
+									class="fill-gray-400 text-[8px] dark:fill-gray-500"
+								>
+									{chartData.s2.series.length} lines
+								</text>
+							{/if}
+							{#if chartData.s2.series.length > 1}
+								<g transform="translate({pad.left}, {ch - 16})">
+									{#each chartData.s2.series.slice(0, 6) as s, si (si)}
+										<line
+											x1={si * 50}
+											y1={0}
+											x2={si * 50 + 14}
+											y2={0}
+											stroke={S2_COLORS[si % S2_COLORS.length]}
+											stroke-width="2"
+										/>
+										<text
+											x={si * 50 + 16}
+											y={3}
+											class="fill-gray-500 text-[8px] dark:fill-gray-400"
+										>
+											{s.label}
+										</text>
+									{/each}
+								</g>
+							{/if}
+						</svg>
+					</div>
+				</div>
+			{:else}
+				<div class="flex items-center justify-center py-8 text-sm text-gray-400 dark:text-gray-500">
+					Values are not numeric — chart cannot be rendered
+				</div>
+			{/if}
+		</div>
+	{/if}
+
 	<!-- Logs Table -->
 	{#if !loggerState.selectedEndpoint}
 		<div
@@ -558,7 +1027,7 @@
 				Choose an endpoint from the dropdown above to view logged key values over time.
 				{#if loggedEndpoints.length === 0}
 					<br /><br />
-					<strong class="text-indigo-600">No logs yet.</strong> Enable key watching in the API Comparator
+					<strong class="text-green-600">No logs yet.</strong> Enable key watching in the API Comparator
 					to start logging.
 				{/if}
 			</p>
@@ -567,7 +1036,7 @@
 		<div
 			class="flex items-center justify-center rounded-xl border border-gray-200 bg-white p-16 dark:border-gray-700 dark:bg-gray-800"
 		>
-			<svg class="h-8 w-8 animate-spin text-indigo-600" fill="none" viewBox="0 0 24 24">
+			<svg class="h-8 w-8 animate-spin text-green-600" fill="none" viewBox="0 0 24 24">
 				<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
 				></circle>
 				<path
@@ -585,38 +1054,78 @@
 		</div>
 	{:else}
 		<div
-			class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800"
+			class="max-h-[65vh] overflow-y-auto rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800"
 		>
 			<div class="overflow-x-auto">
-				<table class="w-full">
+				<table class="w-full" style="table-layout: fixed;">
 					<thead>
 						<tr
 							class="border-b border-gray-100 bg-gray-50 dark:border-gray-700 dark:bg-gray-900/50"
 						>
 							<th
-								class="px-4 py-3 text-left text-xs font-semibold tracking-wide text-gray-500 uppercase dark:text-gray-400"
+								class="relative px-4 py-3 text-left text-xs font-semibold tracking-wide text-gray-500 uppercase dark:text-gray-400"
+								style={columnWidths.timestamp ? `width: ${columnWidths.timestamp}px` : ''}
 							>
-								Timestamp
+								<span class="flex items-center gap-1"> Timestamp </span>
+								<button
+									aria-label="Resize timestamp column"
+									class="absolute top-0 right-0 z-10 h-full w-2 cursor-col-resize bg-gray-300/20 transition-colors select-none hover:bg-green-500/40 active:bg-green-500/60 dark:bg-gray-600/20 dark:hover:bg-green-500/40"
+									onmousedown={(e) => startResize(e, 'timestamp')}
+								>
+									<div class="mx-auto h-full w-px bg-gray-300 dark:bg-gray-600"></div>
+								</button>
 							</th>
 							<th
-								class="px-4 py-3 text-left text-xs font-semibold tracking-wide text-gray-500 uppercase dark:text-gray-400"
+								class="relative px-4 py-3 text-left text-xs font-semibold tracking-wide text-gray-500 uppercase dark:text-gray-400"
+								style={columnWidths.keypath ? `width: ${columnWidths.keypath}px` : ''}
 							>
 								Key Path
+								<button
+									aria-label="Resize key path column"
+									class="absolute top-0 right-0 z-10 h-full w-2 cursor-col-resize bg-gray-300/20 transition-colors select-none hover:bg-green-500/40 active:bg-green-500/60 dark:bg-gray-600/20 dark:hover:bg-green-500/40"
+									onmousedown={(e) => startResize(e, 'keypath')}
+								>
+									<div class="mx-auto h-full w-px bg-gray-300 dark:bg-gray-600"></div>
+								</button>
 							</th>
 							<th
-								class="px-4 py-3 text-left text-xs font-semibold tracking-wide text-gray-500 uppercase dark:text-gray-400"
+								class="relative px-4 py-3 text-left text-xs font-semibold tracking-wide text-gray-500 uppercase dark:text-gray-400"
+								style={columnWidths.server1 ? `width: ${columnWidths.server1}px` : ''}
 							>
 								Server 1
+								<button
+									aria-label="Resize server 1 column"
+									class="absolute top-0 right-0 z-10 h-full w-2 cursor-col-resize bg-gray-300/20 transition-colors select-none hover:bg-green-500/40 active:bg-green-500/60 dark:bg-gray-600/20 dark:hover:bg-green-500/40"
+									onmousedown={(e) => startResize(e, 'server1')}
+								>
+									<div class="mx-auto h-full w-px bg-gray-300 dark:bg-gray-600"></div>
+								</button>
 							</th>
 							<th
-								class="px-4 py-3 text-left text-xs font-semibold tracking-wide text-gray-500 uppercase dark:text-gray-400"
+								class="relative px-4 py-3 text-left text-xs font-semibold tracking-wide text-gray-500 uppercase dark:text-gray-400"
+								style={columnWidths.server2 ? `width: ${columnWidths.server2}px` : ''}
 							>
 								Server 2
+								<button
+									aria-label="Resize server 2 column"
+									class="absolute top-0 right-0 z-10 h-full w-2 cursor-col-resize bg-gray-300/20 transition-colors select-none hover:bg-green-500/40 active:bg-green-500/60 dark:bg-gray-600/20 dark:hover:bg-green-500/40"
+									onmousedown={(e) => startResize(e, 'server2')}
+								>
+									<div class="mx-auto h-full w-px bg-gray-300 dark:bg-gray-600"></div>
+								</button>
 							</th>
 							<th
-								class="px-4 py-3 text-center text-xs font-semibold tracking-wide text-gray-500 uppercase dark:text-gray-400"
+								class="relative px-4 py-3 text-center text-xs font-semibold tracking-wide text-gray-500 uppercase dark:text-gray-400"
+								style={columnWidths.match ? `width: ${columnWidths.match}px` : ''}
 							>
 								Match
+								<button
+									aria-label="Resize match column"
+									class="absolute top-0 right-0 z-10 h-full w-2 cursor-col-resize bg-gray-300/20 transition-colors select-none hover:bg-green-500/40 active:bg-green-500/60 dark:bg-gray-600/20 dark:hover:bg-green-500/40"
+									onmousedown={(e) => startResize(e, 'match')}
+								>
+									<div class="mx-auto h-full w-px bg-gray-300 dark:bg-gray-600"></div>
+								</button>
 							</th>
 						</tr>
 					</thead>
@@ -628,15 +1137,22 @@
 							<tr
 								in:fly={{ y: -10, duration: 300 }}
 								onclick={() => openDetail(log)}
-								class="cursor-pointer transition-colors hover:bg-indigo-50/50 dark:hover:bg-indigo-900/10"
+								class="cursor-pointer transition-colors hover:bg-green-50/50 dark:hover:bg-green-900/10"
 							>
-								<td class="px-4 py-3 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400">
+								<td
+									class="truncate px-4 py-3 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400"
+								>
 									{formatTimestamp(log.timestamp)}
 								</td>
-								<td class="px-4 py-3 font-mono text-sm text-gray-900 dark:text-gray-200">
-									{log.key_path}
+								<td
+									class="truncate px-4 py-3 font-mono text-sm text-gray-900 dark:text-gray-200"
+									title={log.key_path}
+								>
+									{lastPathSegment(log.key_path)}
 								</td>
-								<td class="max-w-xs px-4 py-3 font-mono text-sm text-gray-700 dark:text-gray-300">
+								<td
+									class="overflow-hidden px-4 py-3 font-mono text-sm text-gray-700 dark:text-gray-300"
+								>
 									{#if isArray}
 										<button
 											type="button"
@@ -644,7 +1160,7 @@
 												e.stopPropagation();
 												openArrayDetail(log);
 											}}
-											class="group inline-flex max-w-full items-center gap-1.5 rounded-md border border-indigo-200 bg-indigo-50 px-2 py-1 text-xs text-indigo-700 transition-colors hover:bg-indigo-100 dark:border-indigo-900/40 dark:bg-indigo-900/20 dark:text-indigo-300 dark:hover:bg-indigo-900/40"
+											class="group inline-flex max-w-full items-center gap-1.5 rounded-md border border-green-200 bg-green-50 px-2 py-1 text-xs text-green-700 transition-colors hover:bg-green-100 dark:border-green-900/40 dark:bg-green-900/20 dark:text-green-300 dark:hover:bg-green-900/40"
 											title="View array elements"
 										>
 											<span class="font-semibold"
@@ -652,17 +1168,62 @@
 													? (log.server1_value as unknown[]).length
 													: 0} items]</span
 											>
-											<span class="truncate text-indigo-500/70 dark:text-indigo-400/70">
+											<span class="truncate text-green-500/70 dark:text-green-400/70">
 												{formatValue(log.server1_value)}
 											</span>
 										</button>
 									{:else}
-										<div class="truncate" title={formatValue(log.server1_value)}>
+										{@const trend = trendByLogId.get(log.id)}
+										<div
+											class="flex items-center gap-0.5 truncate"
+											title={formatValue(log.server1_value)}
+										>
+											{#if trend?.server1}
+												{#if trend.server1 === 'up'}
+													<svg
+														class="h-3 w-3 shrink-0 text-green-500"
+														fill="currentColor"
+														viewBox="0 0 20 20"
+													>
+														<path
+															fill-rule="evenodd"
+															d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z"
+															clip-rule="evenodd"
+														/>
+													</svg>
+												{:else if trend.server1 === 'down'}
+													<svg
+														class="h-3 w-3 shrink-0 text-red-500"
+														fill="currentColor"
+														viewBox="0 0 20 20"
+													>
+														<path
+															fill-rule="evenodd"
+															d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z"
+															clip-rule="evenodd"
+														/>
+													</svg>
+												{:else}
+													<svg
+														class="h-3 w-3 shrink-0 text-gray-400"
+														fill="currentColor"
+														viewBox="0 0 20 20"
+													>
+														<path
+															fill-rule="evenodd"
+															d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z"
+															clip-rule="evenodd"
+														/>
+													</svg>
+												{/if}
+											{/if}
 											{formatValue(log.server1_value)}
 										</div>
 									{/if}
 								</td>
-								<td class="max-w-xs px-4 py-3 font-mono text-sm text-gray-700 dark:text-gray-300">
+								<td
+									class="overflow-hidden px-4 py-3 font-mono text-sm text-gray-700 dark:text-gray-300"
+								>
 									{#if isArray}
 										<button
 											type="button"
@@ -670,7 +1231,7 @@
 												e.stopPropagation();
 												openArrayDetail(log);
 											}}
-											class="group inline-flex max-w-full items-center gap-1.5 rounded-md border border-indigo-200 bg-indigo-50 px-2 py-1 text-xs text-indigo-700 transition-colors hover:bg-indigo-100 dark:border-indigo-900/40 dark:bg-indigo-900/20 dark:text-indigo-300 dark:hover:bg-indigo-900/40"
+											class="group inline-flex max-w-full items-center gap-1.5 rounded-md border border-green-200 bg-green-50 px-2 py-1 text-xs text-green-700 transition-colors hover:bg-green-100 dark:border-green-900/40 dark:bg-green-900/20 dark:text-green-300 dark:hover:bg-green-900/40"
 											title="View array elements"
 										>
 											<span class="font-semibold"
@@ -678,12 +1239,55 @@
 													? (log.server2_value as unknown[]).length
 													: 0} items]</span
 											>
-											<span class="truncate text-indigo-500/70 dark:text-indigo-400/70">
+											<span class="truncate text-green-500/70 dark:text-green-400/70">
 												{formatValue(log.server2_value)}
 											</span>
 										</button>
 									{:else}
-										<div class="truncate" title={formatValue(log.server2_value)}>
+										{@const trend = trendByLogId.get(log.id)}
+										<div
+											class="flex items-center gap-0.5 truncate"
+											title={formatValue(log.server2_value)}
+										>
+											{#if trend?.server2}
+												{#if trend.server2 === 'up'}
+													<svg
+														class="h-3 w-3 shrink-0 text-green-500"
+														fill="currentColor"
+														viewBox="0 0 20 20"
+													>
+														<path
+															fill-rule="evenodd"
+															d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z"
+															clip-rule="evenodd"
+														/>
+													</svg>
+												{:else if trend.server2 === 'down'}
+													<svg
+														class="h-3 w-3 shrink-0 text-red-500"
+														fill="currentColor"
+														viewBox="0 0 20 20"
+													>
+														<path
+															fill-rule="evenodd"
+															d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z"
+															clip-rule="evenodd"
+														/>
+													</svg>
+												{:else}
+													<svg
+														class="h-3 w-3 shrink-0 text-gray-400"
+														fill="currentColor"
+														viewBox="0 0 20 20"
+													>
+														<path
+															fill-rule="evenodd"
+															d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z"
+															clip-rule="evenodd"
+														/>
+													</svg>
+												{/if}
+											{/if}
 											{formatValue(log.server2_value)}
 										</div>
 									{/if}
@@ -740,7 +1344,7 @@
 			>
 				<div>
 					<h3 class="text-lg font-semibold text-gray-800 dark:text-white">
-						Log Detail: <span class="font-mono text-indigo-600 dark:text-indigo-400"
+						Log Detail: <span class="font-mono text-green-600 dark:text-green-400"
 							>{selectedLogEntry.key_path}</span
 						>
 					</h3>
@@ -836,7 +1440,7 @@
 				<button
 					aria-label="Close modal"
 					onclick={() => (showDetailModal = false)}
-					class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none"
+					class="rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700 focus:ring-2 focus:ring-green-500/20 focus:outline-none"
 				>
 					Close
 				</button>
@@ -883,7 +1487,7 @@
 				<div class="min-w-0">
 					<h3 class="text-lg font-semibold text-gray-800 dark:text-white">
 						Array Compare:
-						<span class="font-mono text-indigo-600 dark:text-indigo-400"
+						<span class="font-mono text-green-600 dark:text-green-400"
 							>{arrayDetailLog.key_path}</span
 						>
 					</h3>
@@ -1059,7 +1663,7 @@
 				</button>
 				<button
 					onclick={closeArrayDetail}
-					class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none"
+					class="rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700 focus:ring-2 focus:ring-green-500/20 focus:outline-none"
 				>
 					Close
 				</button>
diff --git a/src/lib/components/ProtobufPanel.svelte b/src/lib/components/ProtobufPanel.svelte
index 1ef5e11..c62e674 100644
--- a/src/lib/components/ProtobufPanel.svelte
+++ b/src/lib/components/ProtobufPanel.svelte
@@ -373,7 +373,7 @@
 						type="text"
 						bind:value={pbState.tripUpdatesUrl}
 						placeholder="https://example.com/gtfs-rt/trip-updates"
-						class="mt-2 w-full rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 font-mono text-sm text-gray-700 transition-all placeholder:text-gray-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:placeholder:text-gray-600 dark:focus:ring-indigo-500/40"
+						class="mt-2 w-full rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 font-mono text-sm text-gray-700 transition-all placeholder:text-gray-400 focus:border-green-500 focus:ring-2 focus:ring-green-500/20 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:placeholder:text-gray-600 dark:focus:ring-green-500/40"
 					/>
 				</label>
 			</div>
@@ -386,7 +386,7 @@
 						type="text"
 						bind:value={pbState.vehiclePositionsUrl}
 						placeholder="https://example.com/gtfs-rt/vehicle-positions"
-						class="mt-2 w-full rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 font-mono text-sm text-gray-700 transition-all placeholder:text-gray-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:placeholder:text-gray-600 dark:focus:ring-indigo-500/40"
+						class="mt-2 w-full rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 font-mono text-sm text-gray-700 transition-all placeholder:text-gray-400 focus:border-green-500 focus:ring-2 focus:ring-green-500/20 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:placeholder:text-gray-600 dark:focus:ring-green-500/40"
 					/>
 				</label>
 			</div>
@@ -399,7 +399,7 @@
 						type="text"
 						bind:value={pbState.serviceAlertsUrl}
 						placeholder="https://example.com/gtfs-rt/service-alerts"
-						class="mt-2 w-full rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 font-mono text-sm text-gray-700 transition-all placeholder:text-gray-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:placeholder:text-gray-600 dark:focus:ring-indigo-500/40"
+						class="mt-2 w-full rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 font-mono text-sm text-gray-700 transition-all placeholder:text-gray-400 focus:border-green-500 focus:ring-2 focus:ring-green-500/20 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:placeholder:text-gray-600 dark:focus:ring-green-500/40"
 					/>
 				</label>
 			</div>
@@ -412,7 +412,7 @@
 				>
 				<button
 					onclick={addHeader}
-					class="text-sm font-medium text-indigo-600 transition-colors hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-blue-300"
+					class="text-sm font-medium text-green-600 transition-colors hover:text-green-700 dark:text-green-400 dark:hover:text-green-300"
 				>
 					+ Add Header
 				</button>
@@ -425,14 +425,14 @@
 							value={header.key}
 							oninput={(e) => updateHeader(index, 'key', e.currentTarget.value)}
 							placeholder="Header Name (e.g., x-api-key)"
-							class="flex-1 rounded-lg border border-gray-200 bg-gray-50 px-4 py-2.5 font-mono text-sm text-gray-700 transition-all placeholder:text-gray-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:placeholder:text-gray-600"
+							class="flex-1 rounded-lg border border-gray-200 bg-gray-50 px-4 py-2.5 font-mono text-sm text-gray-700 transition-all placeholder:text-gray-400 focus:border-green-500 focus:ring-2 focus:ring-green-500/20 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:placeholder:text-gray-600"
 						/>
 						<input
 							type="text"
 							value={header.value}
 							oninput={(e) => updateHeader(index, 'value', e.currentTarget.value)}
 							placeholder="Header Value"
-							class="flex-1 rounded-lg border border-gray-200 bg-gray-50 px-4 py-2.5 font-mono text-sm text-gray-700 transition-all placeholder:text-gray-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:placeholder:text-gray-600"
+							class="flex-1 rounded-lg border border-gray-200 bg-gray-50 px-4 py-2.5 font-mono text-sm text-gray-700 transition-all placeholder:text-gray-400 focus:border-green-500 focus:ring-2 focus:ring-green-500/20 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:placeholder:text-gray-600"
 						/>
 						{#if pbState.headers.length > 1}
 							<button
@@ -469,7 +469,7 @@
 					<input
 						type="checkbox"
 						bind:checked={pbState.autoRefresh}
-						class="h-4 w-4 rounded border-gray-300 bg-white text-indigo-600 focus:ring-indigo-500 focus:ring-offset-0 dark:border-gray-600 dark:bg-gray-700"
+						class="h-4 w-4 rounded border-gray-300 bg-white text-green-600 focus:ring-green-500 focus:ring-offset-0 dark:border-gray-600 dark:bg-gray-700"
 					/>
 					<span class="text-sm font-medium text-gray-600 dark:text-gray-400">Auto-refresh</span>
 				</label>
@@ -480,7 +480,7 @@
 							bind:value={pbState.refreshInterval}
 							min="5"
 							max="300"
-							class="w-16 rounded-lg border border-gray-200 bg-white px-2 py-1.5 text-center text-sm font-medium text-gray-700 focus:border-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300"
+							class="w-16 rounded-lg border border-gray-200 bg-white px-2 py-1.5 text-center text-sm font-medium text-gray-700 focus:border-green-500 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300"
 						/>
 						<span class="text-xs text-gray-400">sec</span>
 					</div>
@@ -491,7 +491,7 @@
 						type="checkbox"
 						bind:checked={pbState.loggingEnabled}
 						onchange={saveToLocalStorage}
-						class="h-4 w-4 rounded border-gray-300 bg-white text-indigo-600 focus:ring-indigo-500 focus:ring-offset-0 dark:border-gray-600 dark:bg-gray-700"
+						class="h-4 w-4 rounded border-gray-300 bg-white text-green-600 focus:ring-green-500 focus:ring-offset-0 dark:border-gray-600 dark:bg-gray-700"
 					/>
 					<span class="text-sm font-medium text-gray-600 dark:text-gray-400">Enable logging</span>
 				</label>
@@ -505,7 +505,7 @@
 			<button
 				onclick={fetchAllFeeds}
 				disabled={pbState.loading}
-				class="flex items-center gap-2 rounded-lg bg-indigo-600 px-6 py-2.5 font-medium text-white transition-all hover:bg-indigo-700 hover:shadow-lg active:scale-[0.98] disabled:bg-indigo-400 disabled:shadow-none"
+				class="flex items-center gap-2 rounded-lg bg-green-600 px-6 py-2.5 font-medium text-white transition-all hover:bg-green-700 hover:shadow-lg active:scale-[0.98] disabled:bg-green-400 disabled:shadow-none"
 				title="Fetch All Feeds (Ctrl+Enter)"
 			>
 				{#if pbState.loading}
@@ -526,7 +526,7 @@
 					Fetching...
 				{:else}
 					<span>Fetch All Feeds</span>
-					<kbd class="ml-1 rounded bg-indigo-500 px-1.5 py-0.5 text-xs font-normal">Ctrl+↵</kbd>
+					<kbd class="ml-1 rounded bg-green-500 px-1.5 py-0.5 text-xs font-normal">Ctrl+↵</kbd>
 				{/if}
 			</button>
 		</div>
diff --git a/src/lib/components/ProtobufViewer.svelte b/src/lib/components/ProtobufViewer.svelte
index e6875f8..efec21c 100644
--- a/src/lib/components/ProtobufViewer.svelte
+++ b/src/lib/components/ProtobufViewer.svelte
@@ -325,7 +325,7 @@
 					onclick={() => (protobufState.activeTab = tab.id)}
 					class="flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all {protobufState.activeTab ===
 					tab.id
-						? 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400'
+						? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
 						: 'text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700'}"
 				>
 					{#if tab.icon === 'trip'}
@@ -389,7 +389,7 @@
 										? 'bg-red-200 text-red-800 dark:bg-red-800 dark:text-red-200'
 										: 'bg-red-100 text-red-600 dark:bg-red-700 dark:text-red-300'
 									: protobufState.activeTab === tab.id
-										? 'bg-indigo-200 text-indigo-800 dark:bg-indigo-800 dark:text-indigo-200'
+										? 'bg-green-200 text-green-800 dark:bg-green-800 dark:text-green-200'
 										: 'bg-gray-200 text-gray-600 dark:bg-gray-600 dark:text-gray-300'}"
 							title={tab.isLimited
 								? `Showing ${tab.count} of ${tab.total} (limited to prevent memory issues)`
@@ -413,7 +413,7 @@
 					<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
 						{#if isSearching}
 							<svg
-								class="h-4 w-4 animate-spin text-indigo-500"
+								class="h-4 w-4 animate-spin text-green-500"
 								xmlns="http://www.w3.org/2000/svg"
 								fill="none"
 								viewBox="0 0 24 24"
@@ -453,7 +453,7 @@
 						value={protobufState.searchQuery}
 						oninput={handleSearchInput}
 						placeholder="Search vehicle ID, trip, route..."
-						class="w-64 rounded-lg border border-gray-200 bg-gray-50 py-1.5 pr-8 pl-9 text-sm text-gray-700 transition-all placeholder:text-gray-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder:text-gray-500"
+						class="w-64 rounded-lg border border-gray-200 bg-gray-50 py-1.5 pr-8 pl-9 text-sm text-gray-700 transition-all placeholder:text-gray-400 focus:border-green-500 focus:ring-2 focus:ring-green-500/20 focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder:text-gray-500"
 					/>
 					{#if protobufState.searchQuery}
 						<button
@@ -560,8 +560,8 @@
 								onclick={() => (activeRawTextTab = tab.id)}
 								class="flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium shadow-sm transition-colors {activeRawTextTab ===
 								tab.id
-									? 'bg-indigo-500 text-white dark:bg-indigo-600'
-									: 'bg-white text-gray-700 hover:bg-blue-50 hover:text-indigo-700 dark:bg-gray-600 dark:text-gray-200 dark:hover:bg-indigo-900/30 dark:hover:text-indigo-400'}"
+									? 'bg-green-500 text-white dark:bg-green-600'
+									: 'bg-white text-gray-700 hover:bg-green-50 hover:text-green-700 dark:bg-gray-600 dark:text-gray-200 dark:hover:bg-green-900/30 dark:hover:text-green-400'}"
 							>
 								{#if tab.icon === 'trip'}
 									<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
@@ -762,7 +762,7 @@
 							>
 								<div class="flex items-center gap-3">
 									<span
-										class="rounded bg-indigo-100 px-2 py-0.5 text-xs font-semibold text-indigo-700 dark:bg-indigo-900/50 dark:text-indigo-400"
+										class="rounded bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-700 dark:bg-green-900/50 dark:text-green-400"
 									>
 										#{index + 1}
 									</span>
@@ -770,6 +770,10 @@
 										{@const tripUpdate = item as Record<string, unknown>}
 										{@const trip = tripUpdate.trip as Record<string, string> | undefined}
 										{@const vehicleInfo = tripUpdate.vehicle as Record<string, string> | undefined}
+										{@const stopTimeUpdates = tripUpdate.stopTimeUpdate as
+											| Array<Record<string, string>>
+											| undefined}
+										{@const tripStopId = stopTimeUpdates?.find((s) => s?.stopId)?.stopId}
 										<span class="font-mono text-sm">
 											{trip?.tripId || tripUpdate.id || 'Unknown Trip'}
 										</span>
@@ -780,6 +784,13 @@
 												Route: {trip.routeId}
 											</span>
 										{/if}
+										{#if tripStopId}
+											<span
+												class="rounded bg-pink-100 px-2 py-0.5 text-xs text-pink-700 dark:bg-pink-900/50 dark:text-pink-400"
+											>
+												Stop: {tripStopId}
+											</span>
+										{/if}
 										{#if vehicleInfo?.id || vehicleInfo?.label}
 											<span
 												class="flex items-center gap-1 rounded bg-orange-100 px-2 py-0.5 text-xs text-orange-700 dark:bg-orange-900/50 dark:text-orange-400"
@@ -806,6 +817,8 @@
 										{@const vehicle = item as Record<string, unknown>}
 										{@const vehicleInfo = vehicle.vehicle as Record<string, string> | undefined}
 										{@const trip = vehicle.trip as Record<string, string> | undefined}
+										{@const vehicleStopId =
+											(vehicle as Record<string, string>).stopId || trip?.stopId}
 										<span class="font-mono text-sm">
 											{vehicleInfo?.id || vehicleInfo?.label || vehicle.id || 'Unknown Vehicle'}
 										</span>
@@ -816,6 +829,13 @@
 												Route: {trip.routeId}
 											</span>
 										{/if}
+										{#if vehicleStopId}
+											<span
+												class="rounded bg-pink-100 px-2 py-0.5 text-xs text-pink-700 dark:bg-pink-900/50 dark:text-pink-400"
+											>
+												Stop: {vehicleStopId}
+											</span>
+										{/if}
 										{#if trip?.tripId}
 											<span
 												class="rounded bg-cyan-100 px-2 py-0.5 text-xs text-cyan-700 dark:bg-cyan-900/50 dark:text-cyan-400"
@@ -864,7 +884,7 @@
 								disabled={paginationLoading?.[
 									protobufState.activeTab as 'tripUpdates' | 'vehiclePositions' | 'alerts'
 								]}
-								class="inline-flex items-center gap-2 rounded-lg border border-indigo-300 bg-indigo-50 px-6 py-3 text-sm font-medium text-indigo-700 transition-colors hover:bg-indigo-100 disabled:cursor-not-allowed disabled:opacity-50 dark:border-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300 dark:hover:bg-indigo-900/50"
+								class="inline-flex items-center gap-2 rounded-lg border border-green-300 bg-green-50 px-6 py-3 text-sm font-medium text-green-700 transition-colors hover:bg-green-100 disabled:cursor-not-allowed disabled:opacity-50 dark:border-green-700 dark:bg-green-900/30 dark:text-green-300 dark:hover:bg-green-900/50"
 							>
 								{#if paginationLoading?.[protobufState.activeTab as 'tripUpdates' | 'vehiclePositions' | 'alerts']}
 									<svg class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
diff --git a/src/lib/components/SimpleJsonTree.svelte b/src/lib/components/SimpleJsonTree.svelte
index b000e00..a3a6450 100644
--- a/src/lib/components/SimpleJsonTree.svelte
+++ b/src/lib/components/SimpleJsonTree.svelte
@@ -110,7 +110,7 @@
 								e.stopPropagation();
 								expandAllChildren();
 							}}
-							class="flex items-center gap-1 rounded-md border border-emerald-200 bg-emerald-50 px-2 py-0.5 text-[10px] font-medium text-emerald-700 transition-colors hover:bg-emerald-100 dark:border-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-400 dark:hover:bg-emerald-900/50"
+							class="flex items-center gap-1 rounded-md border border-green-200 bg-green-50 px-2 py-0.5 text-[10px] font-medium text-green-700 transition-colors hover:bg-green-100 dark:border-green-800 dark:bg-green-900/30 dark:text-green-400 dark:hover:bg-green-900/50"
 							title="Expand all items"
 						>
 							<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"
diff --git a/src/lib/components/SplitPane.svelte b/src/lib/components/SplitPane.svelte
index 46daa62..c2f882f 100644
--- a/src/lib/components/SplitPane.svelte
+++ b/src/lib/components/SplitPane.svelte
@@ -58,8 +58,8 @@
 	</div>
 
 	<div
-		class="flex w-4 shrink-0 cursor-col-resize items-center justify-center bg-gray-200 transition-colors hover:bg-indigo-400 dark:bg-gray-800 dark:hover:bg-indigo-600"
-		class:!bg-indigo-500={isDragging}
+		class="flex w-4 shrink-0 cursor-col-resize items-center justify-center bg-gray-200 transition-colors hover:bg-green-400 dark:bg-gray-800 dark:hover:bg-green-600"
+		class:bg-green-500!={isDragging}
 		onmousedown={handleMouseDown}
 		role="separator"
 		aria-label="Resize panels"
diff --git a/src/lib/components/ToolsPanel.svelte b/src/lib/components/ToolsPanel.svelte
index 078f1d3..a3882c2 100644
--- a/src/lib/components/ToolsPanel.svelte
+++ b/src/lib/components/ToolsPanel.svelte
@@ -115,7 +115,7 @@
 							type="checkbox"
 							id="auto-open"
 							bind:checked={autoOpen}
-							class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800"
+							class="h-4 w-4 rounded border-gray-300 text-green-600 focus:ring-green-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800"
 						/>
 						<label
 							for="auto-open"
@@ -138,13 +138,13 @@
 						type="text"
 						bind:value={inputValue}
 						placeholder="e.g. 1770671432"
-						class="w-full rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
+						class="w-full rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-900 focus:border-green-500 focus:ring-2 focus:ring-green-500/20 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
 					/>
 				</div>
 
 				{#if result.isValid}
 					<div
-						class="rounded-lg border border-indigo-100 bg-indigo-50/50 p-4 dark:border-indigo-900/30 dark:bg-indigo-900/10"
+						class="rounded-lg border border-green-100 bg-green-50/50 p-4 dark:border-green-900/30 dark:bg-green-900/10"
 					>
 						<div class="space-y-3">
 							<div>
@@ -160,8 +160,8 @@
 							{#if result.serviceDay}
 								<div>
 									<!-- Helper: Common Timestamps -->
-									<div class="text-xs text-indigo-600 dark:text-indigo-400">GTFS Service Time</div>
-									<div class="font-mono text-sm font-medium text-indigo-700 dark:text-indigo-300">
+									<div class="text-xs text-green-600 dark:text-green-400">GTFS Service Time</div>
+									<div class="font-mono text-sm font-medium text-green-700 dark:text-green-300">
 										{result.serviceDay}
 									</div>
 								</div>
@@ -170,7 +170,7 @@
 								<div class="text-xs text-gray-500 dark:text-gray-400">Relative</div>
 								<div class="text-sm text-gray-700 dark:text-gray-300">{result.relative}</div>
 							</div>
-							<div class="border-t border-indigo-100 pt-2 dark:border-indigo-900/30">
+							<div class="border-t border-green-100 pt-2 dark:border-green-900/30">
 								<span
 									class="inline-flex items-center rounded-full bg-white px-2 py-0.5 text-xs font-medium text-gray-600 shadow-sm dark:bg-gray-800 dark:text-gray-300"
 								>
diff --git a/src/lib/panelState.svelte.ts b/src/lib/panelState.svelte.ts
index e2bfc3f..9a6f006 100644
--- a/src/lib/panelState.svelte.ts
+++ b/src/lib/panelState.svelte.ts
@@ -26,10 +26,29 @@ export class ComparatorState {
 	focusPath = $state('');
 	isExpanded = $state(false);
 
+	toggleWatchKey(key: string) {
+		const current = new SvelteSet(
+			this.watchedKeysInput
+				.split(',')
+				.map((k) => k.trim())
+				.filter((k) => k.length > 0)
+		);
+		if (current.has(key)) {
+			current.delete(key);
+		} else {
+			current.add(key);
+		}
+		this.watchedKeysInput = Array.from(current).join(', ');
+		if (typeof localStorage !== 'undefined') {
+			localStorage.setItem(`watch_${this.selectedEndpoint}`, this.watchedKeysInput);
+		}
+	}
+
 	autoRefresh = $state(false);
 	refreshInterval = $state(5);
 	lastLoggedTime = $state<number | null>(null);
 	refreshTimer: number | undefined = undefined;
+	numericTolerancePercent = $state(0);
 }
 
 export interface ProtobufFeedData {
diff --git a/src/lib/utils/jsonCompare.ts b/src/lib/utils/jsonCompare.ts
index f49ff50..113e547 100644
--- a/src/lib/utils/jsonCompare.ts
+++ b/src/lib/utils/jsonCompare.ts
@@ -164,7 +164,7 @@ export function matchArraysById(
 	return results;
 }
 
-const equalityCache = new WeakMap<object, WeakMap<object, boolean>>();
+const equalityCache = new Map<number, WeakMap<object, WeakMap<object, boolean>>>();
 
 let cacheCleanupScheduled = false;
 function scheduleCacheCleanup() {
@@ -175,14 +175,27 @@ function scheduleCacheCleanup() {
 	}, 60000);
 }
 
-export function deepEqualIgnoreOrder(a: unknown, b: unknown, ignoredKeys: string[] = []): boolean {
+export function deepEqualIgnoreOrder(
+	a: unknown,
+	b: unknown,
+	ignoredKeys: string[] = [],
+	numericTolerancePercent: number = 0
+): boolean {
 	if (Object.is(a, b)) return true;
 
 	if (typeof a !== typeof b) return false;
 	if (a === null || b === null) return a === b;
 
+	if (typeof a === 'number' && typeof b === 'number' && numericTolerancePercent > 0) {
+		const maxAbs = Math.max(Math.abs(a), Math.abs(b));
+		if (maxAbs === 0) return true;
+		const percentDiff = (Math.abs(a - b) / maxAbs) * 100;
+		if (percentDiff <= numericTolerancePercent) return true;
+	}
+
 	if (typeof a === 'object' && typeof b === 'object' && ignoredKeys.length === 0) {
-		const aCache = equalityCache.get(a as object);
+		const tolCache = equalityCache.get(numericTolerancePercent);
+		const aCache = tolCache?.get(a as object);
 		if (aCache?.has(b as object)) {
 			return aCache.get(b as object)!;
 		}
@@ -195,9 +208,15 @@ export function deepEqualIgnoreOrder(a: unknown, b: unknown, ignoredKeys: string
 			result = false;
 		} else if (a.length === 0) {
 			result = true;
+		} else if (numericTolerancePercent > 0) {
+			const aSorted = [...a].sort(sortById);
+			const bSorted = [...b].sort(sortById);
+			result = aSorted.every((item, index) =>
+				deepEqualIgnoreOrder(item, bSorted[index], ignoredKeys, numericTolerancePercent)
+			);
 		} else {
-			const aSorted = a.map((item) => stableStringify(item, ignoredKeys)).sort(sortById);
-			const bSorted = b.map((item) => stableStringify(item, ignoredKeys)).sort(sortById);
+			const aSorted = [...a].sort(sortById).map((item) => stableStringify(item, ignoredKeys));
+			const bSorted = [...b].sort(sortById).map((item) => stableStringify(item, ignoredKeys));
 			result = aSorted.every((value, index) => value === bSorted[index]);
 		}
 	} else if (isObject(a) && isObject(b)) {
@@ -213,7 +232,9 @@ export function deepEqualIgnoreOrder(a: unknown, b: unknown, ignoredKeys: string
 			result = true;
 		} else {
 			result = aKeys.every(
-				(key, index) => key === bKeys[index] && deepEqualIgnoreOrder(a[key], b[key], ignoredKeys)
+				(key, index) =>
+					key === bKeys[index] &&
+					deepEqualIgnoreOrder(a[key], b[key], ignoredKeys, numericTolerancePercent)
 			);
 		}
 	} else {
@@ -221,10 +242,15 @@ export function deepEqualIgnoreOrder(a: unknown, b: unknown, ignoredKeys: string
 	}
 
 	if (typeof a === 'object' && typeof b === 'object' && ignoredKeys.length === 0) {
-		let aCache = equalityCache.get(a as object);
+		let tolCache = equalityCache.get(numericTolerancePercent);
+		if (!tolCache) {
+			tolCache = new WeakMap();
+			equalityCache.set(numericTolerancePercent, tolCache);
+		}
+		let aCache = tolCache.get(a as object);
 		if (!aCache) {
 			aCache = new WeakMap();
-			equalityCache.set(a as object, aCache);
+			tolCache.set(a as object, aCache);
 		}
 		aCache.set(b as object, result);
 		scheduleCacheCleanup();
@@ -237,12 +263,15 @@ export function getDiffStatus(
 	value: unknown,
 	otherValue: unknown,
 	side: 'left' | 'right',
-	ignoredKeys: string[] = []
+	ignoredKeys: string[] = [],
+	numericTolerancePercent: number = 0
 ): DiffStatus {
 	if (otherValue === undefined) {
 		return side === 'left' ? 'missing' : 'added';
 	}
-	return deepEqualIgnoreOrder(value, otherValue, ignoredKeys) ? 'same' : 'different';
+	return deepEqualIgnoreOrder(value, otherValue, ignoredKeys, numericTolerancePercent)
+		? 'same'
+		: 'different';
 }
 
 const MAX_DIFF_COUNT = 999;
@@ -251,12 +280,13 @@ export function countDifferences(
 	a: unknown,
 	b: unknown,
 	ignoredKeys: string[] = [],
-	maxCount: number = MAX_DIFF_COUNT
+	maxCount: number = MAX_DIFF_COUNT,
+	numericTolerancePercent: number = 0
 ): number {
 	if (a === undefined && b === undefined) return 0;
 	if (a === undefined || b === undefined) return 1;
 	if (isPrimitive(a) || isPrimitive(b)) {
-		return deepEqualIgnoreOrder(a, b, ignoredKeys) ? 0 : 1;
+		return deepEqualIgnoreOrder(a, b, ignoredKeys, numericTolerancePercent) ? 0 : 1;
 	}
 
 	if (isArray(a) && isArray(b)) {
@@ -269,7 +299,7 @@ export function countDifferences(
 				let sampleDiffs = 0;
 				for (let i = 0; i < sampleSize && i < a.length; i++) {
 					const idx = Math.floor((i / sampleSize) * a.length);
-					if (!deepEqualIgnoreOrder(a[idx], b[idx], ignoredKeys)) {
+					if (!deepEqualIgnoreOrder(a[idx], b[idx], ignoredKeys, numericTolerancePercent)) {
 						sampleDiffs++;
 					}
 				}
@@ -277,26 +307,34 @@ export function countDifferences(
 			}
 		}
 
-		const aSorted = a.map((item) => stableStringify(item, ignoredKeys)).sort(sortById);
-		const bSorted = b.map((item) => stableStringify(item, ignoredKeys)).sort(sortById);
+		const aItems = a.map((item) => ({ key: stableStringify(item, ignoredKeys), item }));
+		const bItems = b.map((item) => ({ key: stableStringify(item, ignoredKeys), item }));
+		aItems.sort((x, y) => sortById(x.item, y.item));
+		bItems.sort((x, y) => sortById(x.item, y.item));
 		let i = 0;
 		let j = 0;
 		let diff = 0;
-		while ((i < aSorted.length || j < bSorted.length) && diff < maxCount) {
-			if (i >= aSorted.length) {
+		while ((i < aItems.length || j < bItems.length) && diff < maxCount) {
+			if (i >= aItems.length) {
 				diff += 1;
 				j += 1;
 				continue;
 			}
-			if (j >= bSorted.length) {
+			if (j >= bItems.length) {
 				diff += 1;
 				i += 1;
 				continue;
 			}
-			if (aSorted[i] === bSorted[j]) {
+			if (aItems[i].key === bItems[j].key) {
 				i += 1;
 				j += 1;
-			} else if (aSorted[i] < bSorted[j]) {
+			} else if (
+				numericTolerancePercent > 0 &&
+				deepEqualIgnoreOrder(aItems[i].item, bItems[j].item, ignoredKeys, numericTolerancePercent)
+			) {
+				i += 1;
+				j += 1;
+			} else if (aItems[i].key < bItems[j].key) {
 				diff += 1;
 				i += 1;
 			} else {
@@ -312,11 +350,17 @@ export function countDifferences(
 		for (const key of keys) {
 			if (ignoredKeys.includes(key)) continue;
 			if (diff >= maxCount) break;
-			diff += countDifferences(a[key], b[key], ignoredKeys, maxCount - diff);
+			diff += countDifferences(
+				a[key],
+				b[key],
+				ignoredKeys,
+				maxCount - diff,
+				numericTolerancePercent
+			);
 		}
 		return Math.min(diff, maxCount);
 	}
-	return deepEqualIgnoreOrder(a, b, ignoredKeys) ? 0 : 1;
+	return deepEqualIgnoreOrder(a, b, ignoredKeys, numericTolerancePercent) ? 0 : 1;
 }
 
 export function sortEntries(obj: Record<string, unknown>): [string, unknown][] {
diff --git a/src/lib/utils/search.ts b/src/lib/utils/search.ts
index dab8061..5755e7b 100644
--- a/src/lib/utils/search.ts
+++ b/src/lib/utils/search.ts
@@ -49,6 +49,7 @@ export interface GTFSVehiclePosition {
 		directionId?: number;
 		startTime?: string;
 		startDate?: string;
+		stopId?: string;
 	};
 	position?: {
 		latitude?: number;
@@ -81,6 +82,7 @@ export interface SearchIndex {
 	vehicleIds: Map<string, Set<number>>;
 	tripIds: Map<string, Set<number>>;
 	routeIds: Map<string, Set<number>>;
+	stopIds: Map<string, Set<number>>;
 	labels: Map<string, Set<number>>;
 }
 
@@ -92,6 +94,7 @@ export function buildSearchIndex(
 		vehicleIds: new Map(),
 		tripIds: new Map(),
 		routeIds: new Map(),
+		stopIds: new Map(),
 		labels: new Map()
 	};
 
@@ -114,6 +117,14 @@ export function buildSearchIndex(
 			addToIndex(index.routeIds, tripUpdate.trip?.routeId, idx);
 			addToIndex(index.vehicleIds, tripUpdate.vehicle?.id, idx);
 			addToIndex(index.labels, tripUpdate.vehicle?.label, idx);
+			const stopTimeUpdates = tripUpdate.stopTimeUpdate as
+				| Array<Record<string, unknown>>
+				| undefined;
+			if (stopTimeUpdates) {
+				stopTimeUpdates.forEach((stu) => {
+					addToIndex(index.stopIds, stu.stopId as string, idx);
+				});
+			}
 		} else if (type === 'vehiclePositions') {
 			const vehicle = e as GTFSVehiclePosition;
 			addToIndex(index.vehicleIds, vehicle.vehicle?.id, idx);
@@ -121,6 +132,8 @@ export function buildSearchIndex(
 			addToIndex(index.labels, vehicle.vehicle?.label, idx);
 			addToIndex(index.tripIds, vehicle.trip?.tripId, idx);
 			addToIndex(index.routeIds, vehicle.trip?.routeId, idx);
+			addToIndex(index.stopIds, (e as Record<string, string>).stopId, idx);
+			addToIndex(index.stopIds, vehicle.trip?.stopId, idx);
 		} else if (type === 'alerts') {
 			const alert = e as GTFSAlert;
 			addToIndex(index.tripIds, alert.id, idx);
@@ -138,7 +151,13 @@ export function searchWithIndex(entities: unknown[], query: string, index: Searc
 	const lowerQuery = query.toLowerCase().trim();
 	const matchingIndices = new Set<number>();
 
-	for (const map of [index.vehicleIds, index.tripIds, index.routeIds, index.labels]) {
+	for (const map of [
+		index.vehicleIds,
+		index.tripIds,
+		index.routeIds,
+		index.stopIds,
+		index.labels
+	]) {
 		for (const [key, indices] of map) {
 			if (key.includes(lowerQuery)) {
 				indices.forEach((idx) => matchingIndices.add(idx));
@@ -223,22 +242,34 @@ export function filterGTFSEntities<T extends unknown[]>(
 
 		if (type === 'tripUpdates') {
 			const tripUpdate = e as GTFSTripUpdate;
+			const stopTimeUpdates = tripUpdate.stopTimeUpdate as
+				| Array<Record<string, string>>
+				| undefined;
+			const hasStopIdMatch = stopTimeUpdates?.some((stu) =>
+				stu.stopId?.toLowerCase().includes(lowerQuery)
+			);
+			const tripRaw = tripUpdate.trip as Record<string, string> | undefined;
 			return (
 				tripUpdate.id?.toLowerCase().includes(lowerQuery) ||
 				tripUpdate.trip?.tripId?.toLowerCase().includes(lowerQuery) ||
 				tripUpdate.trip?.routeId?.toLowerCase().includes(lowerQuery) ||
 				tripUpdate.trip?.scheduleRelationship?.toLowerCase().includes(lowerQuery) ||
 				tripUpdate.vehicle?.id?.toLowerCase().includes(lowerQuery) ||
-				tripUpdate.vehicle?.label?.toLowerCase().includes(lowerQuery)
+				tripUpdate.vehicle?.label?.toLowerCase().includes(lowerQuery) ||
+				tripRaw?.stopId?.toLowerCase().includes(lowerQuery) ||
+				hasStopIdMatch
 			);
 		} else if (type === 'vehiclePositions') {
 			const vehicle = e as GTFSVehiclePosition;
+			const raw = e as Record<string, string>;
 			return (
 				vehicle.id?.toLowerCase().includes(lowerQuery) ||
 				vehicle.vehicle?.id?.toLowerCase().includes(lowerQuery) ||
 				vehicle.vehicle?.label?.toLowerCase().includes(lowerQuery) ||
 				vehicle.trip?.tripId?.toLowerCase().includes(lowerQuery) ||
-				vehicle.trip?.routeId?.toLowerCase().includes(lowerQuery)
+				vehicle.trip?.routeId?.toLowerCase().includes(lowerQuery) ||
+				raw.stopId?.toLowerCase().includes(lowerQuery) ||
+				(raw.trip as unknown as Record<string, string>)?.stopId?.toLowerCase().includes(lowerQuery)
 			);
 		} else if (type === 'alerts') {
 			const alert = e as GTFSAlert;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 346d526..876d80f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -209,7 +209,7 @@
 				<button
 					onclick={toggleSplitMode}
 					class="flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors {isSplitMode
-						? 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-300'
+						? 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300'
 						: 'text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200'}"
 					title="Toggle Split View"
 				>
@@ -278,7 +278,7 @@
 					<select
 						id="left-panel"
 						bind:value={leftPanel}
-						class="rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
+						class="rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm focus:border-green-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
 					>
 						{#each leftPanelOptions as option (option.value)}
 							<option value={option.value}>{option.label}</option>
@@ -302,7 +302,7 @@
 					<select
 						id="right-panel"
 						bind:value={rightPanel}
-						class="rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
+						class="rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm focus:border-green-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
 					>
 						{#each rightPanelOptions as option (option.value)}
 							<option value={option.value}>{option.label}</option>
@@ -311,7 +311,7 @@
 				</div>
 				<button
 					onclick={() => splitPaneRef?.resetSplit()}
-					class="rounded-lg bg-indigo-100 p-2 text-indigo-600 transition-colors hover:bg-indigo-200 dark:bg-indigo-900 dark:text-indigo-300 dark:hover:bg-indigo-800"
+					class="rounded-lg bg-green-100 p-2 text-green-600 transition-colors hover:bg-green-200 dark:bg-green-900 dark:text-green-300 dark:hover:bg-green-800"
 					title="Reset split to 50/50"
 				>
 					<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -381,7 +381,7 @@
 						<button
 							onclick={() => (loggerSubTab = 'api')}
 							class="rounded-lg px-6 py-2 text-sm font-bold transition-all {loggerSubTab === 'api'
-								? 'bg-white text-indigo-600 shadow-sm dark:bg-gray-700 dark:text-indigo-400'
+								? 'bg-white text-green-600 shadow-sm dark:bg-gray-700 dark:text-green-400'
 								: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'}"
 						>
 							API Response Logs
@@ -390,7 +390,7 @@
 							onclick={() => (loggerSubTab = 'gtfsrt')}
 							class="rounded-lg px-6 py-2 text-sm font-bold transition-all {loggerSubTab ===
 							'gtfsrt'
-								? 'bg-white text-indigo-600 shadow-sm dark:bg-gray-700 dark:text-indigo-400'
+								? 'bg-white text-green-600 shadow-sm dark:bg-gray-700 dark:text-green-400'
 								: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'}"
 						>
 							GTFS-RT Snapshots