Include tabler icons and switch buttons to use icons

src/routes/map/[slug]/+page.svelte

@@ -5,6 +5,7 @@
 	import { resolve } from '$app/paths';
 
 	import logo from '$lib/assets/round-logo.svg';
+    import { IconArrowsExchange, IconSettings } from '@tabler/icons-svelte';
 
 	// data.route contains: routeStart, routeEnd, routeId, elecStart, elecEnd, routeDetail[]
 	export let data;
@@ -82,9 +83,9 @@
 
 		<div class="quick-actions">
 			<button class="icon-btn" onclick={() => (reversed = !reversed)}>
-				⇄ {reversed ? 'UP' : 'DN'}
+				<IconArrowsExchange />
 			</button>
-			<button class="icon-btn" onclick={() => (showFilters = !showFilters)}> Settings </button>
+			<button class="icon-btn" onclick={() => (showFilters = !showFilters)}> <IconSettings /> </button>
 		</div>
 	</header>
 
@@ -184,11 +185,18 @@
 		width: 52px;
 		height: 52px;
 		padding-left: 0;
-		margin-left: 0;
+		margin-left: 15px;
 		flex-shrink: 0;
 		transition: all 0.3s ease;
 	}
 
+	@media (max-width: 350px) {
+		.home-link {
+			width: 42px;
+			height: 42px;
+		}
+	}
+
 	.home-link:hover {
 		transform: translateY(-1px) scale(1.05);
 		filter: brightness(1.1);
@@ -224,25 +232,23 @@
 	.quick-actions {
 		display: flex;
 		gap: 0.5rem;
+		margin-right: 15px;
 	}
 
 	.map-spine {
 		padding-top: 72px;
 	}
 
-	@media (min-width: 768px) {
-		.primary-station {
+	@media (min-width: 536px) {
+.primary-station {
 			font-size: 1.5rem;
 		}
 		.secondary-station {
 			font-size: 1rem;
 		}
+	}
 
-		.top-nav {
-			padding: 0 2rem;
-			height: 80px;
-		}
-
+	@media (min-width: 768px) {
 		h1 {
 			font-size: 1.5rem;
 			letter-spacing: -0.03em;
@@ -359,6 +365,12 @@
 		transition: all 0.3s ease;
 	}
 
+	@media (max-width: 350px) {
+		.icon-btn {
+			padding: 0.3rem 0.3rem;
+		}
+	}
+
 	.icon-btn:hover {
 		background: #2d2d2d;
 	}