diff --git a/package-lock.json b/package-lock.json
index 192aae3..790dc0a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,9 @@
 		"": {
 			"name": "onebusaway-webapp",
 			"version": "0.0.1",
+			"dependencies": {
+				"@fortawesome/free-regular-svg-icons": "^6.6.0"
+			},
 			"devDependencies": {
 				"@fortawesome/fontawesome-svg-core": "^6.5.2",
 				"@fortawesome/free-solid-svg-icons": "^6.5.2",
@@ -549,6 +552,25 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/@fortawesome/free-regular-svg-icons": {
+			"version": "6.6.0",
+			"resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.6.0.tgz",
+			"integrity": "sha512-Yv9hDzL4aI73BEwSEh20clrY8q/uLxawaQ98lekBx6t9dQKDHcDzzV1p2YtBGTtolYtNqcWdniOnhzB+JPnQEQ==",
+			"dependencies": {
+				"@fortawesome/fontawesome-common-types": "6.6.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/@fortawesome/free-regular-svg-icons/node_modules/@fortawesome/fontawesome-common-types": {
+			"version": "6.6.0",
+			"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz",
+			"integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/@fortawesome/free-solid-svg-icons": {
 			"version": "6.5.2",
 			"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.2.tgz",
diff --git a/package.json b/package.json
index b389acf..2a6542a 100644
--- a/package.json
+++ b/package.json
@@ -34,5 +34,8 @@
 		"vite": "^5.0.3",
 		"vitest": "^1.2.0"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"@fortawesome/free-regular-svg-icons": "^6.6.0"
+	}
 }
diff --git a/src/components/ArrivalDeparture.svelte b/src/components/ArrivalDeparture.svelte
index af135f5..e5b0cc4 100644
--- a/src/components/ArrivalDeparture.svelte
+++ b/src/components/ArrivalDeparture.svelte
@@ -3,6 +3,12 @@
 	export let tripHeadsign;
 	export let scheduledArrivalTime;
 	export let predictedArrivalTime;
+	export let tripId;
+	export let vehicleId;
+	export let serviceDate;
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
 
 	function formatTime(time) {
 		const date = new Date(time);
@@ -45,10 +51,24 @@
 
 		return `${Math.floor((chosenTime - now) / 60000)}m`;
 	}
+
+	function handleTripDetail() {
+		dispatch('showTripDetails', {
+			tripId,
+			vehicleId,
+			serviceDate,
+			routeShortName,
+			tripHeadsign,
+			scheduledArrivalTime,
+			timeToReach: calculateTimeToReach(predictedArrivalTime, scheduledArrivalTime),
+			arrivalStatus: getArrivalStatus(predictedArrivalTime, scheduledArrivalTime)
+		});
+	}
 </script>
 
-<div
-	class="flex h-auto items-center justify-between border-b-[1px] border-[#C6C6C8] bg-[#ffffff] p-4 hover:cursor-pointer hover:bg-[#e3e3e3] dark:border-[#313135] dark:bg-[#1c1c1c] hover:dark:bg-[#363636]"
+<button
+	on:click={handleTripDetail}
+	class="flex h-auto w-full items-center justify-between border-b-[1px] border-[#C6C6C8] bg-[#ffffff] p-4 hover:cursor-pointer hover:bg-[#e3e3e3] dark:border-[#313135] dark:bg-[#1c1c1c] hover:dark:bg-[#363636]"
 >
 	<div class="flex flex-col gap-1">
 		<p class="text-xl font-semibold text-black dark:text-white">
@@ -66,4 +86,4 @@
 			{calculateTimeToReach(predictedArrivalTime, scheduledArrivalTime)}
 		</p>
 	</div>
-</div>
+</button>
diff --git a/src/components/map/GoogleMap.svelte b/src/components/map/GoogleMap.svelte
index 2aeb3e6..16924f8 100644
--- a/src/components/map/GoogleMap.svelte
+++ b/src/components/map/GoogleMap.svelte
@@ -158,10 +158,6 @@
 			}
 		});
 	});
-
-	function handleStopSelected(stop) {
-		dispatch('stopSelected', { stop });
-	}
 </script>
 
 <div id="map"></div>
diff --git a/src/components/navigation/ModalPane.svelte b/src/components/navigation/ModalPane.svelte
index e81a823..fd6e5a0 100644
--- a/src/components/navigation/ModalPane.svelte
+++ b/src/components/navigation/ModalPane.svelte
@@ -33,7 +33,7 @@
 <style lang="postcss">
 	.modal-pane {
 		@apply absolute bottom-0 left-0 z-40 w-full bg-transparent px-2 shadow-lg md:max-w-prose;
-		@apply rounded-lg bg-[#F3F2F8] dark:bg-black;
+		@apply rounded-lg border-b-[1px] border-[#C6C6C8] bg-[#F3F2F8] dark:border-[1px] dark:border-[#C6C6C8] dark:border-opacity-15 dark:bg-black;
 	}
 
 	.close-button {
diff --git a/src/components/navigation/TripDetailsModal.svelte b/src/components/navigation/TripDetailsModal.svelte
new file mode 100644
index 0000000..9f83121
--- /dev/null
+++ b/src/components/navigation/TripDetailsModal.svelte
@@ -0,0 +1,63 @@
+<script>
+	import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
+	import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
+	import TripDetailsPane from '../oba/TripDetailsPane.svelte';
+
+	export let stop;
+	export let selectedTripDetails;
+	export let onClose;
+</script>
+
+<div class="trip-details-modal scrollbar-hidden">
+	<div class="py-1 text-left">
+		<button type="button" on:click={onClose} class="close-button">
+			<FontAwesomeIcon icon={faArrowLeft} class="font-black text-black dark:text-white" />
+			<h1 class="font-semibold text-black dark:text-white">Back to {stop.name}</h1>
+		</button>
+	</div>
+	<div
+		class="flex items-center justify-between rounded-lg bg-[#ffffff] p-4 hover:bg-[#e3e3e3] dark:bg-[#1c1c1c] hover:dark:bg-[#363636]"
+	>
+		<div>
+			<h2 class="text-lg font-semibold text-black dark:text-white">
+				{selectedTripDetails.routeShortName} - {selectedTripDetails.tripHeadsign}
+			</h2>
+			<p class="text-sm font-semibold text-gray-600 dark:text-gray-400">
+				{new Date(selectedTripDetails.scheduledArrivalTime).toLocaleTimeString([], {
+					hour: '2-digit',
+					minute: '2-digit'
+				})} -
+				<span class={selectedTripDetails.arrivalStatus.color}>
+					{selectedTripDetails.arrivalStatus.text}
+				</span>
+			</p>
+		</div>
+		<p class={`mt-1 text-sm font-semibold ${selectedTripDetails.arrivalStatus.color}`}>
+			{selectedTripDetails.timeToReach}
+		</p>
+	</div>
+	<div class="px-4 py-2">
+		<TripDetailsPane
+			{stop}
+			tripId={selectedTripDetails.tripId}
+			serviceDate={selectedTripDetails.serviceDate}
+		/>
+	</div>
+</div>
+
+<style lang="postcss">
+	.trip-details-modal {
+		@apply absolute bottom-0 left-0 z-40 h-full w-full overflow-y-scroll rounded-lg bg-white px-2 shadow-lg md:max-w-prose;
+		@apply rounded-lg border-b-[1px] border-[#C6C6C8] bg-white p-4 shadow-lg dark:border-[1px] dark:border-[#C6C6C8] dark:border-opacity-15 dark:bg-black;
+	}
+	.close-button {
+		@apply flex items-center gap-2 rounded px-4 py-2;
+		@apply transition duration-300 ease-in-out hover:bg-neutral-200 dark:hover:bg-neutral-200/50;
+	}
+	.scrollbar-hidden {
+		scrollbar-width: none;
+		-ms-overflow-style: none;
+		overflow: -moz-scrollbars-none;
+		-webkit-scrollbar: none;
+	}
+</style>
diff --git a/src/components/oba/StopPane.svelte b/src/components/oba/StopPane.svelte
index ca1b373..6091f4a 100644
--- a/src/components/oba/StopPane.svelte
+++ b/src/components/oba/StopPane.svelte
@@ -1,5 +1,7 @@
 <script>
 	import ArrivalDeparture from '../ArrivalDeparture.svelte';
+	import { onMount } from 'svelte';
+	import TripDetailsModal from '../navigation/TripDetailsModal.svelte';
 
 	export let stop;
 	export let arrivalsAndDeparturesResponse = null;
@@ -7,6 +9,10 @@
 	let loading = false;
 	let error;
 
+	let showTripDetails = false;
+	let selectedTripDetails = null;
+	let interval;
+
 	async function loadData(stopID) {
 		loading = true;
 		const response = await fetch(`/api/oba/arrivals-and-departures-for-stop/${stopID}`);
@@ -25,12 +31,19 @@
 		// instead of loading fresh data.
 		if (arrDep) {
 			arrivalsAndDepartures = arrDep.data.entry;
-		}
-		else {
+		} else {
 			await loadData(s.id);
 		}
 	})(stop, arrivalsAndDeparturesResponse);
 
+	onMount(() => {
+		interval = setInterval(() => {
+			loadData(stop.id);
+		}, 30000);
+
+		return () => clearInterval(interval);
+	});
+
 	let _routeShortNames = null;
 	function routeShortNames() {
 		if (!_routeShortNames) {
@@ -41,6 +54,18 @@
 		}
 		return _routeShortNames;
 	}
+	function handleShowTripDetails(event) {
+		selectedTripDetails = {
+			...event.detail,
+			routeShortName: event.detail.routeShortName,
+			tripHeadsign: event.detail.tripHeadsign,
+			scheduledArrivalTime: event.detail.scheduledArrivalTime
+		};
+		showTripDetails = true;
+	}
+	function handleCloseTripDetailModal() {
+		showTripDetails = false;
+	}
 </script>
 
 <div>
@@ -96,15 +121,23 @@
 							tripHeadsign={arrival.tripHeadsign}
 							scheduledArrivalTime={arrival.scheduledArrivalTime}
 							predictedArrivalTime={arrival.predictedArrivalTime}
+							tripId={arrival.tripId}
+							vehicleId={arrival.vehicleId}
+							serviceDate={arrival.serviceDate}
+							on:showTripDetails={handleShowTripDetails}
 						/>
 					{/each}
 				</div>
 			</div>
 		</div>
 	{/if}
+
+	{#if showTripDetails}
+		<TripDetailsModal {stop} {selectedTripDetails} onClose={handleCloseTripDetailModal} />
+	{/if}
 </div>
 
-<style>
+<style lang="postcss">
 	.scrollbar-hidden {
 		scrollbar-width: none;
 		-ms-overflow-style: none;
diff --git a/src/components/oba/TripDetailsPane.svelte b/src/components/oba/TripDetailsPane.svelte
new file mode 100644
index 0000000..ecfec31
--- /dev/null
+++ b/src/components/oba/TripDetailsPane.svelte
@@ -0,0 +1,143 @@
+<script>
+	import { onMount, onDestroy } from 'svelte';
+	import { faBus, faPersonWalking } from '@fortawesome/free-solid-svg-icons';
+	import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
+
+	export let stop;
+	export let tripId;
+	export let serviceDate = null;
+
+	let tripDetails = null;
+	let routeInfo = null;
+	let stopInfo = {};
+	let error = null;
+	let interval;
+	let currentStopIndex = -1;
+	let busPosition = 0;
+
+	function formatTime(seconds) {
+		if (!seconds) return '';
+		const date = new Date(seconds * 1000);
+		return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+	}
+
+	function calculateBusPosition() {
+		if (tripDetails && tripDetails.status && tripDetails.status.position) {
+			const { lat, lon } = tripDetails.status.position;
+
+			busPosition = tripDetails.schedule.stopTimes.findIndex((stop, index, array) => {
+				const nextStop = array[index + 1];
+				if (!nextStop) return true;
+				const stopLat = stopInfo[stop.stopId].lat;
+				const stopLon = stopInfo[stop.stopId].lon;
+				const nextStopLat = stopInfo[nextStop.stopId].lat;
+				const nextStopLon = stopInfo[nextStop.stopId].lon;
+				return (lat >= stopLat && lat < nextStopLat) || (lon >= stopLon && lon < nextStopLon);
+			});
+		}
+	}
+
+	async function loadTripDetails() {
+		try {
+			let url = `/api/oba/trip-details/${tripId}?includeTrip=true&includeSchedule=true&includeStatus=true`;
+			if (serviceDate) {
+				url += `&serviceDate=${serviceDate}`;
+			}
+			const response = await fetch(url);
+
+			if (!response.ok) {
+				error = 'Unable to fetch trip details';
+				return;
+			}
+
+			const jsonBody = await response.json();
+			const data = jsonBody.data;
+
+			tripDetails = data.entry;
+
+			if (data?.references?.routes) {
+				routeInfo = data.references.routes.find((route) => route.id === tripDetails.routeId);
+			}
+
+			if (data?.references?.stops) {
+				stopInfo = data.references.stops.reduce((acc, stop) => {
+					acc[stop.id] = stop;
+					return acc;
+				}, {});
+			}
+
+			if (tripDetails.status?.closestStop) {
+				currentStopIndex = tripDetails.schedule.stopTimes.findIndex(
+					(stop) => stop.stopId === tripDetails.status.closestStop
+				);
+			} else {
+				currentStopIndex = -1;
+			}
+
+			console.log('Current Stop Index:', currentStopIndex);
+			console.log('Closest Stop:', tripDetails.status?.closestStop);
+
+			calculateBusPosition();
+		} catch (err) {
+			console.error('Error fetching trip details:', err);
+			error = 'Error fetching trip details';
+		}
+	}
+
+	onMount(() => {
+		loadTripDetails();
+		interval = setInterval(loadTripDetails, 30000);
+	});
+
+	onDestroy(() => {
+		clearInterval(interval);
+	});
+</script>
+
+<div class="trip-details-pane">
+	{#if error}
+		<p>{error}</p>
+	{:else if tripDetails}
+		<h2>
+			{#if routeInfo}
+				Route {routeInfo.shortName} -
+			{/if}
+		</h2>
+		{#if tripDetails.schedule?.stopTimes.length > 0}
+			<div class="relative">
+				<div class="absolute bottom-0 left-3.5 top-0 w-[1px] bg-neutral-400"></div>
+
+				{#each tripDetails.schedule.stopTimes as tripStop, index}
+					<div class="relative mb-4 flex items-center">
+						<div
+							class="relative z-10 flex size-8 items-center justify-center rounded-md border border-neutral-400 bg-white"
+						>
+							{#if index === busPosition}
+								<FontAwesomeIcon
+									icon={faBus}
+									class="absolute bg-white text-sm text-xl text-green-500 dark:bg-black"
+								/>
+							{/if}
+							{#if tripStop.stopId === stop.id}
+								<FontAwesomeIcon
+									icon={faPersonWalking}
+									class="absolute bottom-0 right-0 size-2 rounded-br-md rounded-tl-md border-l border-t bg-neutral-50/80 px-1 py-0.5 text-sm text-blue-500 dark:bg-black"
+								/>
+							{/if}
+						</div>
+						<div class="ml-4 flex w-full items-center justify-between">
+							<div class="text-md font-semibold text-[#000000] dark:text-white">
+								{stopInfo[tripStop.stopId] ? stopInfo[tripStop.stopId].name : tripStop.stopId}
+							</div>
+							<div class="text-sm text-[#86858B]">{formatTime(tripStop.arrivalTime)}</div>
+						</div>
+					</div>
+				{/each}
+			</div>
+		{:else}
+			<p class="text-black dark:text-white">No stop times available for this trip.</p>
+		{/if}
+	{:else}
+		<p class="text-black dark:text-white">Loading trip details...</p>
+	{/if}
+</div>
diff --git a/src/lib/RestAPI/arrivalsAndDeparturesForStop.js b/src/lib/RestAPI/arrivalsAndDeparturesForStop.js
index 082e385..6385625 100644
--- a/src/lib/RestAPI/arrivalsAndDeparturesForStop.js
+++ b/src/lib/RestAPI/arrivalsAndDeparturesForStop.js
@@ -3,7 +3,7 @@ import { error, json } from '@sveltejs/kit';
 import { PUBLIC_OBA_SERVER_URL as baseURL } from '$env/static/public';
 import { PRIVATE_OBA_API_KEY as apiKey } from '$env/static/private';
 
-export default async function(stopID) {
+export default async function (stopID) {
 	const apiURL = `${baseURL}/api/where/arrivals-and-departures-for-stop/${stopID}.json?key=${apiKey}`;
 	const response = await fetch(apiURL);
 
diff --git a/src/lib/RestAPI/stop.js b/src/lib/RestAPI/stop.js
index 2fb518a..83e93e8 100644
--- a/src/lib/RestAPI/stop.js
+++ b/src/lib/RestAPI/stop.js
@@ -3,7 +3,7 @@ import { error, json } from '@sveltejs/kit';
 import { PUBLIC_OBA_SERVER_URL as baseURL } from '$env/static/public';
 import { PRIVATE_OBA_API_KEY as apiKey } from '$env/static/private';
 
-export default async function(stopID) {
+export default async function (stopID) {
 	const apiURL = `${baseURL}/api/where/stop/${stopID}.json?key=${apiKey}`;
 	const response = await fetch(apiURL);
 
diff --git a/src/lib/RestAPI/tripDetails.js b/src/lib/RestAPI/tripDetails.js
new file mode 100644
index 0000000..722c93a
--- /dev/null
+++ b/src/lib/RestAPI/tripDetails.js
@@ -0,0 +1,24 @@
+import { error, json } from '@sveltejs/kit';
+import { PUBLIC_OBA_SERVER_URL as baseURL } from '$env/static/public';
+import { PRIVATE_OBA_API_KEY as apiKey } from '$env/static/private';
+
+export async function GET({ params, url }) {
+	const { tripId } = params;
+	const vehicleId = url.searchParams.get('vehicleId');
+	const serviceDate = url.searchParams.get('serviceDate');
+
+	let apiURL = `${baseURL}/api/where/trip-details/${tripId}.json?key=${apiKey}`;
+
+	if (vehicleId) apiURL += `&vehicleId=${vehicleId}`;
+	if (serviceDate) apiURL += `&serviceDate=${serviceDate}`;
+
+	const response = await fetch(apiURL);
+
+	if (!response.ok) {
+		error(500, 'Unable to fetch trip-details.');
+		return;
+	}
+
+	const data = await response.json();
+	return json(data);
+}
diff --git a/src/routes/api/oba/trip-details/[tripId]/+server.js b/src/routes/api/oba/trip-details/[tripId]/+server.js
new file mode 100644
index 0000000..d499846
--- /dev/null
+++ b/src/routes/api/oba/trip-details/[tripId]/+server.js
@@ -0,0 +1,44 @@
+import { error, json } from '@sveltejs/kit';
+import { PUBLIC_OBA_SERVER_URL as baseURL } from '$env/static/public';
+import { PRIVATE_OBA_API_KEY as apiKey } from '$env/static/private';
+
+export async function GET({ params, url }) {
+	const { tripId } = params;
+
+	const serviceDate = url.searchParams.get('serviceDate');
+	const includeTrip = url.searchParams.get('includeTrip') || 'true';
+	const includeSchedule = url.searchParams.get('includeSchedule') || 'true';
+	const includeStatus = url.searchParams.get('includeStatus') || 'true';
+	const time = url.searchParams.get('time');
+
+	let apiURL = `${baseURL}/api/where/trip-details/${tripId}.json?key=${apiKey}`;
+
+	if (serviceDate) apiURL += `&serviceDate=${serviceDate}`;
+	apiURL += `&includeTrip=${includeTrip}`;
+	apiURL += `&includeSchedule=${includeSchedule}`;
+	apiURL += `&includeStatus=${includeStatus}`;
+	if (time) apiURL += `&time=${time}`;
+
+	try {
+		const response = await fetch(apiURL);
+
+		if (!response.ok) {
+			throw new Error(`HTTP error! status: ${response.status}`);
+		}
+
+		const data = await response.json();
+
+		// Ensure stops are included in the references
+		if (!data.data.references || !data.data.references.stops) {
+			// If stops are not included, we might need to fetch them separately
+			// This is a placeholder for that logic
+			data.data.references = data.data.references || {};
+			data.data.references.stops = []; // Fetch stops here if needed
+		}
+
+		return json(data);
+	} catch (err) {
+		console.error('Error fetching trip details:', err);
+		throw error(500, 'Unable to fetch trip details.');
+	}
+}
diff --git a/src/routes/stops/[stopID]/+page.server.js b/src/routes/stops/[stopID]/+page.server.js
index c5f189b..462ff55 100644
--- a/src/routes/stops/[stopID]/+page.server.js
+++ b/src/routes/stops/[stopID]/+page.server.js
@@ -2,15 +2,15 @@ import stopAPI from '$lib/RestAPI/stop.js';
 import arrivalDepartureAPI from '$lib/RestAPI/arrivalsAndDeparturesForStop.js';
 
 export async function load({ params }) {
-  const stopID = params.stopID;
-  const stopResponse = await stopAPI(stopID);
-  const stopBody = await stopResponse.json();
-  const arrivalsAndDeparturesResponse = await arrivalDepartureAPI(stopID)
-  const arrivalsAndDeparturesResponseJSON = await arrivalsAndDeparturesResponse.json();
+	const stopID = params.stopID;
+	const stopResponse = await stopAPI(stopID);
+	const stopBody = await stopResponse.json();
+	const arrivalsAndDeparturesResponse = await arrivalDepartureAPI(stopID);
+	const arrivalsAndDeparturesResponseJSON = await arrivalsAndDeparturesResponse.json();
 
-  return {
-    stopID: params.stopID,
-    stopData: stopBody.data,
-    arrivalsAndDeparturesResponse: arrivalsAndDeparturesResponseJSON
-  }
+	return {
+		stopID: params.stopID,
+		stopData: stopBody.data,
+		arrivalsAndDeparturesResponse: arrivalsAndDeparturesResponseJSON
+	};
 }
diff --git a/src/routes/stops/[stopID]/+page.svelte b/src/routes/stops/[stopID]/+page.svelte
index 9c47e40..8e1d218 100644
--- a/src/routes/stops/[stopID]/+page.svelte
+++ b/src/routes/stops/[stopID]/+page.svelte
@@ -5,6 +5,6 @@
 	const arrivalsAndDeparturesResponse = data.arrivalsAndDeparturesResponse;
 </script>
 
-<div class='pt-20 px-8 max-w-5xl mx-auto'>
+<div class="mx-auto max-w-5xl px-8 pt-20">
 	<StopPane {stop} {arrivalsAndDeparturesResponse} />
 </div>