diff --git a/components/src/maplibre/Map/Map.stories.svelte b/components/src/maplibre/Map/Map.stories.svelte
index 5cc19876..00d58d88 100644
--- a/components/src/maplibre/Map/Map.stories.svelte
+++ b/components/src/maplibre/Map/Map.stories.svelte
@@ -161,20 +161,28 @@
 			>
 				<ScaleControl />
 				<AttributionControl />
-				<NavigationControl />
 			</Map>
 			<div class="placeholder">Placeholder</div>
 		</DesignTokens>
 	</div>
 </Story>
+<Story asChild name="initialBounds">
+	<div class="container">
+		<DesignTokens theme="light">
+			<Map showDebug style={SWRDataLabLight()} initialBounds={[5.87, 47.1, 15.04, 55.1]}>
+				<ScaleControl />
+				<AttributionControl />
+			</Map>
+		</DesignTokens>
+	</div>
+</Story>
 
 <Story asChild name="Alternate Style">
-	<div class="container dark">
+	<div class="container">
 		<DesignTokens theme="dark">
-			<Map style={alternateStyle}>
+			<Map style={alternateStyle} initialBounds={[5.87, 47.27, 15.04, 55.06]}>
 				<ScaleControl />
 				<AttributionControl />
-				<NavigationControl showCompass visualizePitch />
 				<GeocoderControl languages="de" service="maptiler" key="V32kPHZjMa0Mkn6YvSzA" />
 			</Map>
 		</DesignTokens>
@@ -186,9 +194,6 @@
 		width: 100%;
 		height: 600px;
 	}
-	.dark {
-		color: rgb(230, 230, 230);
-	}
 	.placeholder {
 		height: 500px;
 		background: var(--gray-light-5);
diff --git a/components/src/maplibre/Map/Map.svelte b/components/src/maplibre/Map/Map.svelte
index 3c9478ff..68473772 100644
--- a/components/src/maplibre/Map/Map.svelte
+++ b/components/src/maplibre/Map/Map.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import maplibre, {
+		type LngLatBoundsLike,
 		type MapLibreEvent,
 		type ProjectionSpecification,
 		type StyleSpecification
@@ -12,6 +13,11 @@
 
 	interface MapProps {
 		style?: StyleSpecification | string;
+		/**
+		 * The initial bounds of the map. If specified, it overrides initialLocation.
+		 */
+		initialBounds?: LngLatBoundsLike;
+		maxBounds?: LngLatBoundsLike;
 		initialLocation?: Location;
 		allowRotation?: boolean;
 		allowZoom?: boolean;
@@ -55,6 +61,8 @@
 		allowZoom = true,
 		showDebug = false,
 		cursor,
+		initialBounds,
+		maxBounds,
 		initialLocation: receivedInitialLocation,
 		// Future: This should become bindable.readonly when that becomes
 		// available, see: https://github.com/sveltejs/svelte/issues/7712
@@ -88,8 +96,10 @@
 			minZoom,
 			maxZoom,
 			bearing,
-			attributionControl: false, // Added via component
+			attributionControl: false,
 			center: [initialLocation.lng, initialLocation.lat],
+			bounds: initialBounds || null,
+			maxBounds: maxBounds || null,
 			zoom: initialLocation.zoom,
 			pitch: initialLocation.pitch,
 			cooperativeGestures,