diff --git a/components/src/DesignTokens/Tokens.ts b/components/src/DesignTokens/Tokens.ts
index 7b4759af..173aef18 100644
--- a/components/src/DesignTokens/Tokens.ts
+++ b/components/src/DesignTokens/Tokens.ts
@@ -182,8 +182,8 @@ const semantics: ColourMap = {
 		light: '#ffffff'
 	},
 	surfaceHover: {
-		dark: '#0d0d0e',
-		light: '#ebebeb'
+		dark: '#121212',
+		light: '#eee'
 	},
 	raisedSurfaceFill: {
 		dark: '#393a3b',
diff --git a/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte b/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte
index 73d68fdc..8cf86045 100644
--- a/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte
+++ b/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte
@@ -34,7 +34,12 @@
 	<DesignTokens theme="light">
 		<div class="container">
 			<Map style={SWRDataLabLight()} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
-				<GeocoderControl languages="de" service="maptiler" key="V32kPHZjMa0Mkn6YvSzA" />
+				<GeocoderControl
+					size="large"
+					languages="de"
+					service="maptiler"
+					key="V32kPHZjMa0Mkn6YvSzA"
+				/>
 			</Map>
 		</div>
 	</DesignTokens>
diff --git a/components/src/maplibre/GeocoderControl/GeocoderControl.svelte b/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
index 1aaf0aa8..55fe9437 100644
--- a/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
+++ b/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
@@ -61,15 +61,13 @@
 <style lang="scss">
 	:global {
 		.maplibregl-ctrl-geocoder {
-			background-color: var(--color-surfaceFill);
+			background-color: var(--color-pageFill);
 			position: relative;
 			width: 100%;
 			z-index: 1;
 			font-family: var(--swr-sans);
-			font-size: var(--fs-small-1);
-			border-radius: var(--br-small);
+			font-size: var(--fs-base);
 			border: 1px solid var(--color-textSecondary);
-			box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.075);
 
 			button {
 				cursor: pointer;
@@ -83,19 +81,21 @@
 		}
 
 		.maplibregl-ctrl-geocoder--input {
-			width: calc(100% - 3.7em);
 			height: 100%;
 			font-family: inherit;
 			font-size: inherit;
 			background-color: transparent;
 			color: var(--color-textPrimary);
 			border: 0;
-			height: 1.95em;
-			padding: 0 1.95em;
-			padding-top: 0.1em;
+			height: 2em;
+			padding: 0 1.85em;
 			text-overflow: ellipsis;
 			white-space: nowrap;
 			overflow: hidden;
+			&::-webkit-search-cancel-button,
+			&::-webkit-search-decoration {
+				appearance: none;
+			}
 		}
 
 		.maplibregl-ctrl-geocoder--input::placeholder {
@@ -119,15 +119,13 @@
 
 		/* Suggestions */
 		.maplibregl-ctrl-geocoder .suggestions {
-			background: var(--color-surfaceFill);
-			border: 1px solid rgba(0, 0, 0, 0.75);
-			box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
-			border-radius: var(--br-small);
-			left: 0;
+			background: var(--color-pageFill);
+			border: 1px solid var(--color-textSecondary);
+			left: -1px;
 			list-style: none;
 			position: absolute;
 			width: 100%;
-			top: calc(100% + 0.5em);
+			top: 100%;
 			z-index: 1000;
 			overflow: hidden;
 		}
@@ -141,9 +139,9 @@
 		.maplibregl-ctrl-geocoder .suggestions > li > a {
 			cursor: default;
 			display: block;
-			padding: 0.5em 0.75em;
-			color: var(--gray-dark-5);
-			padding-bottom: 0.5em;
+			font-size: var(--fs-small-1);
+			padding: 0.7em 0.75em;
+			padding-bottom: 0.65em;
 			border-bottom: 1px solid var(--color-surfaceBorder);
 		}
 		.maplibregl-ctrl-geocoder .suggestions > li:last-child > a {
@@ -199,7 +197,6 @@
 			position: absolute;
 			top: 50%;
 			transform: translateY(-50%);
-			height: 1em;
 			path {
 				fill: var(--color-textPrimary);
 			}
@@ -207,10 +204,14 @@
 
 		.maplibregl-ctrl-geocoder--icon-close {
 			right: 0;
+			height: 1.15em;
+			opacity: 0.5;
 		}
 		.maplibregl-ctrl-geocoder--icon-search {
-			left: 0.5em;
-			height: 1.5em;
+			left: 0.4em;
+			height: 1.25em;
+			top: 51%; // optical correction
+			width: auto;
 		}
 	}
 </style>
diff --git a/components/src/maplibre/Map/Map.stories.svelte b/components/src/maplibre/Map/Map.stories.svelte
index a7815f2d..11cf1c13 100644
--- a/components/src/maplibre/Map/Map.stories.svelte
+++ b/components/src/maplibre/Map/Map.stories.svelte
@@ -9,7 +9,7 @@
 	import AttributionControl from '../AttributionControl/AttributionControl.svelte';
 	import GeocoderControl from '../GeocoderControl/GeocoderControl.svelte';
 
-	import { SWRDataLabLight } from '../MapStyle';
+	import { SWRDataLabLight, SWRDataLabDark } from '../MapStyle';
 
 	import { eclipse } from '@versatiles/style';
 	import { MapContext } from '../context.svelte';
@@ -74,7 +74,7 @@
 			<Map style={SWRDataLabLight()}>
 				<ScaleControl />
 				<AttributionControl />
-				<NavigationControl showCompass visualizePitch />
+				<NavigationControl showCompass visualizePitch position="bottom-left" />
 				<GeocoderControl languages="de" service="maptiler" key="V32kPHZjMa0Mkn6YvSzA" />
 			</Map>
 		</DesignTokens>
@@ -134,9 +134,9 @@
 
 <Story asChild name="Globe Projection">
 	<div class="container">
-		<DesignTokens theme="light">
+		<DesignTokens theme="dark">
 			<Map
-				style={SWRDataLabLight()}
+				style={SWRDataLabDark()}
 				showDebug
 				projection={{ type: 'globe' }}
 				pitch={52}
@@ -144,7 +144,7 @@
 			>
 				<ScaleControl />
 				<AttributionControl />
-				<NavigationControl showCompass visualizePitch />
+				<NavigationControl showCompass visualizePitch position="top-right" />
 				<GeocoderControl languages="de" service="maptiler" key="V32kPHZjMa0Mkn6YvSzA" />
 			</Map>
 		</DesignTokens>
diff --git a/components/src/maplibre/Map/Map.svelte b/components/src/maplibre/Map/Map.svelte
index d5496465..d0a72f43 100644
--- a/components/src/maplibre/Map/Map.svelte
+++ b/components/src/maplibre/Map/Map.svelte
@@ -299,8 +299,8 @@
 		}
 
 		.maplibregl-ctrl-top-right {
-			right: 0;
-			top: 0;
+			right: 0.5em;
+			top: 0.5em;
 		}
 
 		.maplibregl-ctrl-bottom-left {
@@ -311,6 +311,7 @@
 		.maplibregl-ctrl-bottom-right {
 			bottom: 0.5em;
 			right: 0.5em;
+			align-items: flex-end;
 		}
 
 		.maplibregl-ctrl {
@@ -319,10 +320,9 @@
 		}
 
 		.maplibregl-ctrl-group {
-			background: var(--color-surfaceFill);
+			background: var(--color-pageFill);
 			border: 1px solid var(--color-textSecondary);
 			box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.075);
-			border-radius: var(--br-small);
 			overflow: hidden;
 		}
 
@@ -391,6 +391,9 @@
 		.maplibregl-marker path {
 			fill: var(--color-textPrimary);
 		}
+		.maplibregl-marker circle {
+			fill: var(--color-pageFill);
+		}
 		.maplibregl-cooperative-gesture-screen {
 			align-items: center;
 			font-family: var(--swr-sans);
diff --git a/components/src/maplibre/MapControl/MapControl.svelte b/components/src/maplibre/MapControl/MapControl.svelte
index d21e79b2..6ea96462 100644
--- a/components/src/maplibre/MapControl/MapControl.svelte
+++ b/components/src/maplibre/MapControl/MapControl.svelte
@@ -35,7 +35,5 @@
 </script>
 
 <div bind:this={el} class={`maplibregl-ctrl ${className}`}>
-	{#if children}
-		{@render children()}
-	{/if}
+	{@render children?.()}
 </div>
diff --git a/components/src/maplibre/MapStyle/SWRDataLabDark.ts b/components/src/maplibre/MapStyle/SWRDataLabDark.ts
index a0899cc4..c69f1149 100644
--- a/components/src/maplibre/MapStyle/SWRDataLabDark.ts
+++ b/components/src/maplibre/MapStyle/SWRDataLabDark.ts
@@ -18,13 +18,13 @@ const tokens = {
 	sans_bold: ['SWR Sans Bold'],
 	background: {
 		stops: [
-			[8, 'hsl(210, 9%, 13%)'],
+			[8, 'hsl(210, 3%, 10%)'],
 			[10, '#1e1f22']
 		]
 	},
 	water: 'hsl(210, 12%, 7%)',
 	water_light: 'hsl(210, 12%, 8%)',
-	water_ocean: 'hsl(214, 25%, 7%)',
+	water_ocean: 'hsl(214, 5%, 5%)',
 	marsh: 'hsl(180, 3%, 35%)',
 	grass: 'hsl(170, 20%, 14%)',
 	grass_dark: 'hsl(170, 16%, 12%)',
diff --git a/components/src/maplibre/ScaleControl/ScaleControl.svelte b/components/src/maplibre/ScaleControl/ScaleControl.svelte
index 4e8ec9aa..1023a69c 100644
--- a/components/src/maplibre/ScaleControl/ScaleControl.svelte
+++ b/components/src/maplibre/ScaleControl/ScaleControl.svelte
@@ -21,6 +21,7 @@
 			font-weight: 400;
 			font-size: var(--fs-small-3);
 			font-family: var(--swr-text);
+			margin-bottom: 0.2em;
 		}
 	}
 </style>