diff --git a/src/app.css b/src/app.css
index c1bae2b..91088bd 100644
--- a/src/app.css
+++ b/src/app.css
@@ -19,6 +19,26 @@
 		@apply rounded-lg border-gray-500 bg-white/90 px-4 shadow-lg dark:bg-black dark:text-white dark:shadow-lg dark:shadow-gray-200/10;
 	}
 
+	.tab-container {
+		@apply flex border-b border-gray-300;
+	}
+
+	.tab-container__item {
+		@apply -mb-px px-4 py-2 font-semibold text-gray-500;
+	}
+
+	.tab-container__item--active {
+		@apply border-b-2 border-green-500 text-green-500;
+	}
+
+	.button {
+		@apply rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50;
+	}
+
+	.button--primary {
+		@apply rounded-md bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600;
+	}
+
 	.rtl {
 		@apply flex-row-reverse text-right;
 		direction: rtl;
diff --git a/src/components/StandalonePage.svelte b/src/components/StandalonePage.svelte
new file mode 100644
index 0000000..2cd0932
--- /dev/null
+++ b/src/components/StandalonePage.svelte
@@ -0,0 +1,3 @@
+<div class="mx-auto h-full max-w-5xl overflow-y-auto pt-4">
+	<slot></slot>
+</div>
diff --git a/src/components/controls/CompassArrow.svelte b/src/components/controls/CompassArrow.svelte
new file mode 100644
index 0000000..b57c39d
--- /dev/null
+++ b/src/components/controls/CompassArrow.svelte
@@ -0,0 +1,41 @@
+<!--
+
+    This Svelte component renders a FontAwesome arrow icon that rotates based on the provided `stopDirection` prop.
+
+    Props:
+    - `stopDirection` (string): The direction in which the arrow should point. 
+      Possible values are 'N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'. 
+      If the value is not one of these, the arrow will be hidden.
+-->
+
+<script>
+	import { faArrowRight } from '@fortawesome/free-solid-svg-icons';
+	import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
+
+	export let stopDirection = '';
+
+	function rotationAngleClass() {
+		switch (stopDirection) {
+			case 'N':
+				return '-rotate-90';
+			case 'NE':
+				return '-rotate-45';
+			case 'E':
+				return 'rotate-0';
+			case 'SE':
+				return 'rotate-45';
+			case 'S':
+				return 'rotate-90';
+			case 'SW':
+				return 'rotate-135';
+			case 'W':
+				return 'rotate-180';
+			case 'NW':
+				return 'rotate-225';
+			default:
+				return 'hidden';
+		}
+	}
+</script>
+
+<FontAwesomeIcon icon={faArrowRight} class={rotationAngleClass()} />
diff --git a/src/components/schedule-for-stop/StopDetailsHeader.svelte b/src/components/schedule-for-stop/StopDetailsHeader.svelte
deleted file mode 100644
index f0d82db..0000000
--- a/src/components/schedule-for-stop/StopDetailsHeader.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script>
-	import { faBus, faMapMarkerAlt, faArrowRight } from '@fortawesome/free-solid-svg-icons';
-	import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
-	import { t } from 'svelte-i18n';
-	export let stopName;
-	export let stopId;
-	export let stopDirection;
-</script>
-
-<div class="mb-6 rounded-lg bg-white p-6 text-center shadow-lg">
-	<h1 class="flex items-center justify-center gap-2 text-3xl font-bold text-green-700">
-		<FontAwesomeIcon icon={faBus} />
-		{$t('schedule_for_stop.stop_details')}
-	</h1>
-	<p class="mt-2 flex items-center justify-center gap-2 text-lg text-gray-700">
-		<FontAwesomeIcon icon={faMapMarkerAlt} />
-		<strong>{$t('schedule_for_stop.stop_name')}:</strong>
-		{stopName} | <strong>{$t('schedule_for_stop.stop_id')}:</strong>
-		{stopId}
-	</p>
-	<p class="mt-2 flex items-center justify-center gap-2 text-lg text-gray-700">
-		<FontAwesomeIcon icon={faArrowRight} />
-		<strong>{$t('schedule_for_stop.direction')}:</strong>
-		{stopDirection}
-	</p>
-	<div class="mt-4 flex justify-center">
-		<a
-			href={`/stops/${stopId}`}
-			class="flex items-center justify-center gap-2 rounded-lg bg-green-500 px-3 py-1 text-white shadow hover:bg-green-600"
-		>
-			<FontAwesomeIcon icon={faMapMarkerAlt} />
-			{$t('schedule_for_stop.click_for_realtime')}
-		</a>
-	</div>
-</div>
diff --git a/src/components/stops/StopPageHeader.svelte b/src/components/stops/StopPageHeader.svelte
new file mode 100644
index 0000000..2c4a4c1
--- /dev/null
+++ b/src/components/stops/StopPageHeader.svelte
@@ -0,0 +1,39 @@
+<script>
+	import { faMapMarkerAlt } from '@fortawesome/free-solid-svg-icons';
+	import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
+	import CompassArrow from '$components/controls/CompassArrow.svelte';
+	import TabContainer from '$components/tabs/TabContainer.svelte';
+	import TabLink from '$components/tabs/TabLink.svelte';
+	import { page } from '$app/stores';
+
+	import { t } from 'svelte-i18n';
+	export let stopName;
+	export let stopId;
+	export let stopDirection;
+</script>
+
+<div class="mb-8 text-center">
+	<h1 class="flex items-center justify-center gap-2 text-3xl font-bold text-green-700">
+		{stopName}
+	</h1>
+	<div class="text-normal mt-2 flex items-center justify-center gap-x-8 text-gray-700">
+		<div class="rounded-md bg-gray-50 px-2 py-1">
+			<FontAwesomeIcon icon={faMapMarkerAlt} />
+			<strong>{$t('schedule_for_stop.stop_id')}:</strong>
+			{stopId}
+		</div>
+		<div class="rounded-md bg-gray-50 px-2 py-1">
+			<CompassArrow {stopDirection} />
+			<strong>{$t('schedule_for_stop.direction')}:</strong>
+			{stopDirection}
+		</div>
+	</div>
+	<TabContainer>
+		<TabLink href="/stops/{stopId}" current={$page.route.id === '/stops/[stopID]'}
+			>{$t('arrivals_and_departures_for_stop.title')}</TabLink
+		>
+		<TabLink href="/stops/{stopId}/schedule" current={$page.route.id === '/stops/[stopID]/schedule'}
+			>{$t('schedule_for_stop.route_schedules')}</TabLink
+		>
+	</TabContainer>
+</div>
diff --git a/src/components/tabs/TabContainer.svelte b/src/components/tabs/TabContainer.svelte
new file mode 100644
index 0000000..cb37e3e
--- /dev/null
+++ b/src/components/tabs/TabContainer.svelte
@@ -0,0 +1,3 @@
+<div class="tab-container">
+	<slot></slot>
+</div>
diff --git a/src/components/tabs/TabLink.svelte b/src/components/tabs/TabLink.svelte
new file mode 100644
index 0000000..572d096
--- /dev/null
+++ b/src/components/tabs/TabLink.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let current = false;
+	export let href;
+</script>
+
+<div class="tab-container__item" class:tab-container__item--active={current}>
+	<a {href} class="block">
+		<slot></slot>
+	</a>
+</div>
diff --git a/src/components/trip-planner/ItineraryTab.svelte b/src/components/trip-planner/ItineraryTab.svelte
index d12eb7c..61f2ff8 100644
--- a/src/components/trip-planner/ItineraryTab.svelte
+++ b/src/components/trip-planner/ItineraryTab.svelte
@@ -6,9 +6,8 @@
 </script>
 
 <button
-	class={`-mb-px px-4 py-2 font-semibold ${
-		activeTab === index ? 'border-b-2 border-green-500 text-green-500' : 'text-gray-500'
-	}`}
+	class="tab-container__item"
+	class:tab-container__item--active={activeTab === index}
 	on:click={() => setActiveTab(index)}
 >
 	{$t('trip-planner.itinerary')}
diff --git a/src/components/trip-planner/TripPlanModal.svelte b/src/components/trip-planner/TripPlanModal.svelte
index ad0c777..9029f59 100644
--- a/src/components/trip-planner/TripPlanModal.svelte
+++ b/src/components/trip-planner/TripPlanModal.svelte
@@ -69,7 +69,7 @@
 	{/if}
 
 	{#if itineraries.length > 0}
-		<div class="flex border-b border-gray-300">
+		<div class="tab-container">
 			<!-- eslint-disable no-unused-vars -->
 			{#each itineraries as _, index}
 				<ItineraryTab {index} {activeTab} {setActiveTab} />
diff --git a/src/locales/am.json b/src/locales/am.json
index d8ba9a3..aed15e8 100644
--- a/src/locales/am.json
+++ b/src/locales/am.json
@@ -75,22 +75,20 @@
 		"no_real_time_data": "ለዚህ ተሽከርካሪ በእሁድኛ ጊዜ ውሂብ አናስተውላም።",
 		"next_stop": "ቀጣይ ማቆሚያ:"
 	},
+	"arrivals_and_departures_for_stop": {
+		"title": "መድረሻዎች እና ማቆሚያዎች"
+	},
 	"schedule_for_stop": {
 		"view_schedule": "ጊዜ ሰንጠረዥን ይመልከቱ",
 		"no_am_schedules_available": "ምንም AM ጊዜ ሰንጠረዦች አልተገኙም",
 		"no_pm_schedules_available": "ምንም PM ጊዜ ሰንጠረዦች አልተገኙም",
 		"minutes": "ደቂቃዎች",
 		"hour": "ሰዓት",
-		"selected_date": "የተመረጠ ቀን",
-		"show_all_routes": "ሁሉንም መንገዶች አሳይ",
-		"collapse_all_routes": "ሁሉንም መንገዶች አጠፋ",
+		"show_all_routes": "ሁሉንም ዘርጋ",
+		"collapse_all_routes": "ሁሉንም ሰብስብ",
 		"route_schedules": "የመንገድ ጊዜ ሰንጠረዦች",
 		"no_schedules_available": "ምንም ጊዜ ሰንጠረዦች ለተመረጠው ቀን አልተገኙም።",
-		"stop_details": "የማቆሚያ ዝርዝሮች",
-		"select_date": "ቀን ይምረጡ",
 		"stop_id": "የማቆሚያ መታወቂያ",
-		"direction": "አቅጣጫ",
-		"click_for_realtime": "ለትክክለኛ ጊዜ መረጃ እዚህ ጠቅ ያድርጉ",
-		"stop_name": "የማቆሚያ ስም"
+		"direction": "አቅጣጫ"
 	}
 }
diff --git a/src/locales/ar.json b/src/locales/ar.json
index 79cea4e..867750e 100644
--- a/src/locales/ar.json
+++ b/src/locales/ar.json
@@ -75,22 +75,20 @@
 		"no_real_time_data": "لا توجد بيانات في الوقت الحقيقي لهذه المركبة الآن.",
 		"next_stop": "المحطة التالية:"
 	},
+	"arrivals_and_departures_for_stop": {
+		"title": "الوصول والمغادرة"
+	},
 	"schedule_for_stop": {
 		"view_schedule": "عرض الجدول",
 		"no_am_schedules_available": "لا توجد جداول صباحية متاحة",
 		"no_pm_schedules_available": "لا توجد جداول مسائية متاحة",
 		"minutes": "دقائق",
 		"hour": "ساعة",
-		"selected_date": "التاريخ المحدد",
-		"show_all_routes": "عرض جميع المسارات",
-		"collapse_all_routes": "إخفاء جميع المسارات",
+		"show_all_routes": "توسيع الكل",
+		"collapse_all_routes": "طي الكل",
 		"route_schedules": "جداول المسارات",
 		"no_schedules_available": "لا توجد جداول متاحة للتاريخ المحدد.",
-		"stop_details": "تفاصيل المحطة",
-		"select_date": "اختر التاريخ",
 		"stop_id": "رقم المحطة",
-		"direction": "الاتجاه",
-		"click_for_realtime": "انقر هنا لمعلومات الوقت الفعلي",
-		"stop_name": "اسم المحطة"
+		"direction": "الاتجاه"
 	}
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index cd04427..851d720 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -75,22 +75,20 @@
 		"no_real_time_data": "We don't have real-time data for this vehicle now.",
 		"next_stop": "Next stop:"
 	},
+	"arrivals_and_departures_for_stop": {
+		"title": "Arrivals and Departures"
+	},
 	"schedule_for_stop": {
 		"view_schedule": "View Schedule",
 		"no_am_schedules_available": "No AM schedules available",
 		"no_pm_schedules_available": "No PM schedules available",
 		"minutes": "Minutes",
 		"hour": "Hour",
-		"selected_date": "Selected date",
 		"show_all_routes": "Show All Routes",
 		"collapse_all_routes": "Collapse All Routes",
 		"route_schedules": "Route Schedules",
 		"no_schedules_available": "No schedules available for the selected date.",
-		"stop_details": "Stop Details",
-		"select_date": "Select Date",
 		"stop_id": "Stop ID",
-		"direction": "Direction",
-		"click_for_realtime": "Click here for real-time info",
-		"stop_name": "Stop Name"
+		"direction": "Direction"
 	}
 }
diff --git a/src/locales/es.json b/src/locales/es.json
index 90d13c5..f265952 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -75,22 +75,20 @@
 		"no_real_time_data": "Actualmente no tenemos datos en tiempo real para este vehículo.",
 		"next_stop": "Próxima parada:"
 	},
+	"arrivals_and_departures_for_stop": {
+		"title": "Llegadas y Salidas"
+	},
 	"schedule_for_stop": {
 		"view_schedule": "Ver horario",
 		"no_am_schedules_available": "No hay horarios AM disponibles",
 		"no_pm_schedules_available": "No hay horarios PM disponibles",
 		"minutes": "Minutos",
 		"hour": "Hora",
-		"selected_date": "Fecha seleccionada",
-		"show_all_routes": "Mostrar todas las rutas",
-		"collapse_all_routes": "Colapsar todas las rutas",
+		"show_all_routes": "Expandir Todo",
+		"collapse_all_routes": "Contraer Todo",
 		"route_schedules": "Horarios de rutas",
 		"no_schedules_available": "No hay horarios disponibles para la fecha seleccionada.",
-		"stop_details": "Detalles de la parada",
-		"select_date": "Seleccionar fecha",
 		"stop_id": "ID de la parada",
-		"direction": "Dirección",
-		"click_for_realtime": "Haga clic aquí para información en tiempo real",
-		"stop_name": "Nombre de la parada"
+		"direction": "Dirección"
 	}
 }
diff --git a/src/locales/pl.json b/src/locales/pl.json
index f1867ae..ddd0e54 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -75,22 +75,20 @@
 		"no_real_time_data": "Obecnie nie mamy danych w czasie rzeczywistym dla tego pojazdu.",
 		"next_stop": "Następny przystanek:"
 	},
+	"arrivals_and_departures_for_stop": {
+		"title": "Przyjazdy i Odjazdy"
+	},
 	"schedule_for_stop": {
 		"view_schedule": "Zobacz rozkład",
 		"no_am_schedules_available": "Brak dostępnych rozkładów AM",
 		"no_pm_schedules_available": "Brak dostępnych rozkładów PM",
 		"minutes": "Minuty",
 		"hour": "Godzina",
-		"selected_date": "Wybrana data",
-		"show_all_routes": "Pokaż wszystkie trasy",
-		"collapse_all_routes": "Zwiń wszystkie trasy",
+		"show_all_routes": "Rozwiń Wszystko",
+		"collapse_all_routes": "Zwiń Wszystko",
 		"route_schedules": "Rozkłady tras",
 		"no_schedules_available": "Brak dostępnych rozkładów na wybraną datę.",
-		"stop_details": "Szczegóły przystanku",
-		"select_date": "Wybierz datę",
 		"stop_id": "ID przystanku",
-		"direction": "Kierunek",
-		"click_for_realtime": "Kliknij tutaj, aby zobaczyć informacje w czasie rzeczywistym",
-		"stop_name": "Nazwa przystanku"
+		"direction": "Kierunek"
 	}
 }
diff --git a/src/locales/so.json b/src/locales/so.json
index e21076b..47e8978 100644
--- a/src/locales/so.json
+++ b/src/locales/so.json
@@ -75,22 +75,20 @@
 		"no_real_time_data": "Ma hayno xog ku saabsan wakhtiga dhabta ah ee gaarigan hadda.",
 		"next_stop": "Joogsiga xiga:"
 	},
+	"arrivals_and_departures_for_stop": {
+		"title": "Imaanshaha iyo Bixitaanka"
+	},
 	"schedule_for_stop": {
 		"view_schedule": "Eeg jadwalka",
 		"no_am_schedules_available": "Jadwal AM lama heli karo",
 		"no_pm_schedules_available": "Jadwal PM lama heli karo",
 		"minutes": "Daqiiqado",
 		"hour": "Saacad",
-		"selected_date": "Taariikhda la doortay",
-		"show_all_routes": "Tus dhammaan waddooyinka",
-		"collapse_all_routes": "Yaree dhammaan waddooyinka",
+		"show_all_routes": "Ballaari Dhamaan",
+		"collapse_all_routes": "Laabo Dhamaan",
 		"route_schedules": "Jadwalka waddooyinka",
 		"no_schedules_available": "Jadwal lama heli karo taariikhda la doortay.",
-		"stop_details": "Faahfaahinta joogsiga",
-		"select_date": "Dooro taariikhda",
 		"stop_id": "Aqoonsiga joogsiga",
-		"direction": "Jihada",
-		"click_for_realtime": "Riix halkan si aad u aragto macluumaadka wakhtiga dhabta ah",
-		"stop_name": "Magaca joogsiga"
+		"direction": "Jihada"
 	}
 }
diff --git a/src/locales/tl.json b/src/locales/tl.json
index cc2317b..c804b6e 100644
--- a/src/locales/tl.json
+++ b/src/locales/tl.json
@@ -74,22 +74,20 @@
 		"no_real_time_data": "Wala kaming real-time na data para sa sasakyang ito ngayon.",
 		"next_stop": "Susunod na hintuan:"
 	},
+	"arrivals_and_departures_for_stop": {
+		"title": "Mga Pagdating at Pag-alis"
+	},
 	"schedule_for_stop": {
 		"view_schedule": "Tingnan ang iskedyul",
 		"no_am_schedules_available": "Walang magagamit na AM na iskedyul",
 		"no_pm_schedules_available": "Walang magagamit na PM na iskedyul",
 		"minutes": "Minuto",
 		"hour": "Oras",
-		"selected_date": "Napiling petsa",
-		"show_all_routes": "Ipakita ang lahat ng ruta",
-		"collapse_all_routes": "I-collapse ang lahat ng ruta",
+		"show_all_routes": "Ipakita Lahat",
+		"collapse_all_routes": "I-collapse Lahat",
 		"route_schedules": "Mga iskedyul ng ruta",
 		"no_schedules_available": "Walang magagamit na iskedyul para sa napiling petsa.",
-		"stop_details": "Mga detalye ng hintuan",
-		"select_date": "Pumili ng petsa",
 		"stop_id": "ID ng hintuan",
-		"direction": "Direksyon",
-		"click_for_realtime": "I-click dito para sa real-time na impormasyon",
-		"stop_name": "Pangalan ng hintuan"
+		"direction": "Direksyon"
 	}
 }
diff --git a/src/locales/vi.json b/src/locales/vi.json
index 0481afc..e22761c 100644
--- a/src/locales/vi.json
+++ b/src/locales/vi.json
@@ -74,22 +74,20 @@
 		"no_real_time_data": "Hiện tại không có dữ liệu thời gian thực cho xe này.",
 		"next_stop": "Trạm dừng tiếp theo:"
 	},
+	"arrivals_and_departures_for_stop": {
+		"title": "Lịch Đến và Đi"
+	},
 	"schedule_for_stop": {
 		"view_schedule": "Xem lịch trình",
 		"no_am_schedules_available": "Không có lịch trình buổi sáng nào khả dụng",
 		"no_pm_schedules_available": "Không có lịch trình buổi chiều nào khả dụng",
 		"minutes": "Phút",
 		"hour": "Giờ",
-		"selected_date": "Ngày đã chọn",
-		"show_all_routes": "Hiển thị tất cả tuyến đường",
-		"collapse_all_routes": "Thu gọn tất cả tuyến đường",
+		"show_all_routes": "Mở Rộng Tất Cả",
+		"collapse_all_routes": "Thu Gọn Tất Cả",
 		"route_schedules": "Lịch trình tuyến đường",
 		"no_schedules_available": "Không có lịch trình nào khả dụng cho ngày đã chọn.",
-		"stop_details": "Chi tiết điểm dừng",
-		"select_date": "Chọn ngày",
 		"stop_id": "Mã điểm dừng",
-		"direction": "Hướng",
-		"click_for_realtime": "Nhấp vào đây để xem thông tin thời gian thực",
-		"stop_name": "Tên điểm dừng"
+		"direction": "Hướng"
 	}
 }
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index dd6d63c..35b733e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -10,6 +10,7 @@
 	import StopModal from '$components/stops/StopModal.svelte';
 	import TripPlanModal from '$components/trip-planner/TripPlanModal.svelte';
 	import { browser } from '$app/environment';
+	import { PUBLIC_OBA_REGION_NAME } from '$env/static/public';
 
 	let stop;
 	let selectedTrip = null;
@@ -167,6 +168,10 @@
 	});
 </script>
 
+<svelte:head>
+	<title>{PUBLIC_OBA_REGION_NAME}</title>
+</svelte:head>
+
 {#if showAlertModal}
 	<AlertsModal {alert} />
 {/if}
diff --git a/src/routes/stops/[stopID]/+page.svelte b/src/routes/stops/[stopID]/+page.svelte
index 237fbe5..531eaee 100644
--- a/src/routes/stops/[stopID]/+page.svelte
+++ b/src/routes/stops/[stopID]/+page.svelte
@@ -1,11 +1,20 @@
 <script>
 	import StopPane from '$components/stops/StopPane.svelte';
+	import StopPageHeader from '$components/stops/StopPageHeader.svelte';
+	import StandalonePage from '$components/StandalonePage.svelte';
 	import '$lib/i18n.js';
+	import { t } from 'svelte-i18n';
+
 	export let data;
 	const stop = data.stopData.entry;
 	const arrivalsAndDeparturesResponse = data.arrivalsAndDeparturesResponse;
 </script>
 
-<div class="mx-auto max-w-5xl px-8 pt-20">
+<svelte:head>
+	<title>{stop.name} - {$t('arrivals_and_departures_for_stop.title')}</title>
+</svelte:head>
+
+<StandalonePage>
+	<StopPageHeader stopName={stop.name} stopId={stop.id} stopDirection={stop.direction} />
 	<StopPane {stop} {arrivalsAndDeparturesResponse} />
-</div>
+</StandalonePage>
diff --git a/src/routes/stops/[stopID]/schedule/+page.svelte b/src/routes/stops/[stopID]/schedule/+page.svelte
index ff78115..71243cc 100644
--- a/src/routes/stops/[stopID]/schedule/+page.svelte
+++ b/src/routes/stops/[stopID]/schedule/+page.svelte
@@ -2,7 +2,8 @@
 	import { page } from '$app/stores';
 	import LoadingSpinner from '$components/LoadingSpinner.svelte';
 	import ScheduleAccordionItem from '$components/schedule-for-stop/ScheduleAccordionItem.svelte';
-	import StopDetailsHeader from '$components/schedule-for-stop/StopDetailsHeader.svelte';
+	import StopPageHeader from '$components/stops/StopPageHeader.svelte';
+	import StandalonePage from '$components/StandalonePage.svelte';
 	import { formatTime } from '$lib/formatters.js';
 	import { Accordion } from 'flowbite-svelte';
 	import { Datepicker } from 'flowbite-svelte';
@@ -10,7 +11,7 @@
 	import { isLoading } from 'svelte-i18n';
 	import { t } from 'svelte-i18n';
 
-	let selectedDate = '';
+	let selectedDate = new Date();
 	let prevSelectedDate = null;
 	let schedulesMap = new Map();
 	let routeReference = new Map();
@@ -120,62 +121,51 @@
 		expandedItems = expandedItems.map((item, i) => (i === index ? !item : item));
 	}
 
-	onMount(() => {
+	onMount(async () => {
 		const formattedDate = currentDate.toISOString().split('T')[0];
-		fetchScheduleForStop(stopId, formattedDate);
+		await fetchScheduleForStop(stopId, formattedDate);
+		toggleAll(true);
 	});
 </script>
 
-{#if loading || $isLoading}
-	<LoadingSpinner />
-{:else}
-	<div class="mx-auto max-w-7xl overflow-y-auto p-5" style="max-height: calc(100vh - 100px);">
-		<StopDetailsHeader {stopName} {stopId} {stopDirection} />
+<svelte:head>
+	<title>{stopName} - {$t('schedule_for_stop.route_schedules')}</title>
+</svelte:head>
 
-		<div class="flex flex-col gap-6 md:flex-row">
-			<div class="md:w-1/3">
-				<h2 class="mb-4 text-xl font-semibold text-gray-800">
-					{$t('schedule_for_stop.select_date')}
-				</h2>
-				<div class="rounded-lg border border-gray-300 bg-white p-4 shadow">
-					<Datepicker inline bind:value={selectedDate} />
-					<p class="mt-4 text-sm text-gray-600">
-						{$t('schedule_for_stop.selected_date')}: {selectedDate
-							? selectedDate.toLocaleDateString()
-							: currentDate.toLocaleDateString()}
-					</p>
-				</div>
-			</div>
+<StandalonePage>
+	{#if loading || $isLoading}
+		<LoadingSpinner />
+	{:else}
+		<StopPageHeader {stopName} {stopId} {stopDirection} />
 
+		<div class="flex flex-col">
 			<div class="flex flex-1 flex-col">
 				<h2 class="mb-4 text-2xl font-bold text-gray-800">
 					{$t('schedule_for_stop.route_schedules')}
 				</h2>
 
 				<div class="mb-4 flex gap-4">
-					<button
-						class="text-md rounded-lg bg-green-500 px-6 py-2 text-white shadow hover:bg-green-600 active:bg-green-700"
-						on:click={() => toggleAll(true)}
-					>
-						{$t('schedule_for_stop.show_all_routes')}
-					</button>
-					<button
-						class="text-md rounded-lg bg-gray-500 px-6 py-2 text-white shadow hover:bg-gray-600 active:bg-gray-700"
-						on:click={() => toggleAll(false)}
-					>
-						{$t('schedule_for_stop.collapse_all_routes')}
-					</button>
+					<div class="min-w-32">
+						<Datepicker bind:value={selectedDate} inputClass="w-96" />
+					</div>
+
+					<div class="flex-1 text-right">
+						<button class="button" on:click={() => toggleAll(true)}>
+							{$t('schedule_for_stop.show_all_routes')}
+						</button>
+						<button class="button" on:click={() => toggleAll(false)}>
+							{$t('schedule_for_stop.collapse_all_routes')}
+						</button>
+					</div>
 				</div>
 
-				<div
-					class="flex-1 overflow-y-auto rounded-lg border border-gray-200 bg-white p-6 shadow-lg"
-				>
+				<div class="flex-1 rounded-lg border border-gray-200 bg-white p-6">
 					{#if emptySchedules}
 						<p class="text-center text-gray-700">
 							{$t('schedule_for_stop.no_schedules_available')}
 						</p>
 					{:else}
-						<Accordion flush>
+						<Accordion flush multiple>
 							{#each schedules as schedule, index (schedule.tripHeadsign)}
 								<ScheduleAccordionItem
 									{schedule}
@@ -188,5 +178,5 @@
 				</div>
 			</div>
 		</div>
-	</div>
-{/if}
+	{/if}
+</StandalonePage>
diff --git a/tailwind.config.js b/tailwind.config.js
index a4bb789..01af366 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -23,6 +23,10 @@ export default {
 					800: '#CC4522',
 					900: '#A5371B'
 				}
+			},
+			rotate: {
+				135: '135deg',
+				225: '225deg'
 			}
 		}
 	},