diff --git a/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte b/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte
index 31d3fdd..832bcff 100644
--- a/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte
+++ b/components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte
@@ -106,6 +106,20 @@
 		</div>
 	</DesignTokens>
 </Story>
+<Story asChild name="position=top-right">
+	<DesignTokens theme="light">
+		<div class="container">
+			<Map style={SWRDataLabLight()} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
+				<GeocoderControl
+					position="top-right"
+					languages="de"
+					service="maptiler"
+					key="V32kPHZjMa0Mkn6YvSzA"
+				/>
+			</Map>
+		</div>
+	</DesignTokens>
+</Story>
 
 <style>
 	.container {
diff --git a/components/src/maplibre/GeocoderControl/GeocoderControl.svelte b/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
index 6854326..dcdfec6 100644
--- a/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
+++ b/components/src/maplibre/GeocoderControl/GeocoderControl.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import maplibre from 'maplibre-gl';
+	import maplibre, { type ControlPosition } from 'maplibre-gl';
 	import MaplibreGeocoder, { type MaplibreGeocoderApi } from '@maplibre/maplibre-gl-geocoder';
 	import { MaptilerGeocoderAPI } from './GeocoderAPIs';
 	import MapControl from '../MapControl/MapControl.svelte';
@@ -36,6 +36,7 @@
 		 * Overwrite the default input placeholder
 		 */
 		placeholder?: string;
+		position?: ControlPosition;
 	}
 
 	const {
@@ -45,6 +46,7 @@
 		languages = 'en',
 		types = [],
 		placeholder,
+		position = 'top-left',
 		limit = 3
 	}: GeocoderControlProps = $props();
 
@@ -68,7 +70,7 @@
 	});
 </script>
 
-<MapControl control={geocoder} position="top-left" />
+<MapControl control={geocoder} {position} />
 
 <style lang="scss">
 	:global {