diff --git a/packages/react-maplibre/src/components/MlMarker/MlMarker.tsx b/packages/react-maplibre/src/components/MlMarker/MlMarker.tsx
index 0202192e..306bcecd 100644
--- a/packages/react-maplibre/src/components/MlMarker/MlMarker.tsx
+++ b/packages/react-maplibre/src/components/MlMarker/MlMarker.tsx
@@ -2,7 +2,18 @@ import React, { useRef, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import useMap from '../../hooks/useMap';
 import maplibregl from 'maplibre-gl';
-import { Box } from '@mui/material';
+import { Box, Paper, IconButton } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+
+// Constants for popup styling
+const POPUP_PADDING_VERTICAL = 12;
+const POPUP_PADDING_HORIZONTAL = 16;
+const CLOSE_BUTTON_SPACING = 4;
+const SCROLLBAR_WIDTH = 16; // Typical scrollbar width
+const CLOSE_BUTTON_OFFSET = SCROLLBAR_WIDTH + CLOSE_BUTTON_SPACING;
+const POPUP_MIN_WIDTH = 200;
+const POPUP_MAX_WIDTH = 750;
+const POPUP_MAX_HEIGHT = 500;
 
 export interface MlMarkerProps {
 	/** ID of the map to add the marker to */
@@ -27,6 +38,10 @@ export interface MlMarkerProps {
 	contentOffset?: number;
 	/** Whether mouse events pass through the marker content */
 	passEventsThrough?: boolean;
+	/** Whether to show a close button to remove the marker */
+	showCloseButton?: boolean;
+	/** Callback function when the close button is clicked */
+	onClose?: () => void;
 	/** Anchor position of the marker relative to its coordinates */
 	anchor?:
 		| 'top'
@@ -103,16 +118,33 @@ function getBoxMargins(
 	return m;
 }
 
-const MlMarker = ({ passEventsThrough = true, contentOffset = 5, ...props }: MlMarkerProps) => {
+const MlMarker = ({
+	passEventsThrough = true,
+	contentOffset = 5,
+	showCloseButton = true,
+	...props
+}: MlMarkerProps) => {
 	const mapHook = useMap({
 		mapId: props.mapId,
 		waitForLayer: props.insertBeforeLayer,
 	});
 
 	const [marker, setMarker] = useState<maplibregl.Marker | null>(null);
+	const [contentWidth, setContentWidth] = useState<number>(300);
 	const container = useRef<HTMLDivElement | null>(null);
 	const iframeRef = useRef<HTMLIFrameElement | null>(null);
 
+	const handleClose = (event: React.MouseEvent) => {
+		event.stopPropagation();
+		if (props.onClose) {
+			props.onClose();
+		} else {
+			// Default behavior: remove the marker
+			marker?.remove();
+			container.current?.remove();
+		}
+	};
+
 	useEffect(() => {
 		if (!mapHook.map) return;
 
@@ -161,9 +193,17 @@ const MlMarker = ({ passEventsThrough = true, contentOffset = 5, ...props }: MlM
 
 	function handleIframeLoad() {
 		const iframeDoc = iframeRef.current?.contentWindow?.document;
-		if (iframeDoc && iframeRef.current?.parentElement) {
+		if (iframeDoc && iframeRef.current) {
 			const scrollHeight = iframeDoc.documentElement.scrollHeight;
-			iframeRef.current.parentElement.style.height = `${scrollHeight}px`;
+			const scrollWidth = iframeDoc.documentElement.scrollWidth;
+			iframeRef.current.style.height = `${scrollHeight}px`;
+
+			// Set width based on content, with min and max constraints
+			const calculatedWidth = Math.max(
+				POPUP_MIN_WIDTH,
+				Math.min(scrollWidth + POPUP_PADDING_HORIZONTAL * 2, POPUP_MAX_WIDTH)
+			);
+			setContentWidth(calculatedWidth);
 		}
 	}
 
@@ -173,41 +213,117 @@ const MlMarker = ({ passEventsThrough = true, contentOffset = 5, ...props }: MlM
 			<Box
 				sx={{
 					position: 'absolute',
-					display: 'flex',
-					width: '300px',
-					maxHeight: '500px',
-					opacity: passEventsThrough ? 1 : 0.7,
-					zIndex: -1,
 					transform: getBoxTransform(props.anchor),
 					...getBoxMargins(props.anchor, contentOffset, props.markerStyle),
-					pointerEvents: passEventsThrough ? 'none' : 'auto',
-					'&:hover': {
-						opacity: 1,
-					},
+					zIndex: -1,
 					...props.containerStyle,
 				}}
 			>
-				<iframe
-					ref={iframeRef}
-					onLoad={handleIframeLoad}
-					style={{
-						width: '100%',
-						borderStyle: 'none',
-						...props.iframeStyle,
+				<Paper
+					elevation={8}
+					sx={{
+						width: `${contentWidth}px`,
+						maxWidth: '90vw',
+						opacity: passEventsThrough ? 1 : 0.85,
+						pointerEvents: 'auto',
+						overflow: 'hidden',
+						position: 'relative',
+						transition: 'opacity 0.2s ease-in-out, width 0.2s ease-in-out',
+						'&:hover': {
+							opacity: 1,
+						},
 					}}
-					srcDoc={`<div>
+				>
+					{showCloseButton && (
+						<IconButton
+							onClick={handleClose}
+							sx={{
+								position: 'absolute',
+								top: CLOSE_BUTTON_SPACING,
+								right: CLOSE_BUTTON_OFFSET,
+								zIndex: 1,
+								padding: '4px',
+								backgroundColor: 'rgba(255, 255, 255, 0.9)',
+								'&:hover': {
+									backgroundColor: 'rgba(255, 255, 255, 1)',
+								},
+							}}
+							size="small"
+						>
+							<CloseIcon fontSize="small" />
+						</IconButton>
+					)}
+					<Box
+						sx={{
+							maxHeight: `${POPUP_MAX_HEIGHT}px`,
+							overflowY: 'auto',
+							overflowX: 'hidden',
+						}}
+					>
+						<iframe
+							ref={iframeRef}
+							onLoad={handleIframeLoad}
+							style={{
+								width: '100%',
+								border: 'none',
+								display: 'block',
+								...props.iframeStyle,
+							}}
+							srcDoc={`<div>
 	<style>
+		* {
+			box-sizing: border-box;
+		}
 		body {
+			margin: 0;
+			padding: ${POPUP_PADDING_VERTICAL}px ${POPUP_PADDING_HORIZONTAL}px;
+			${showCloseButton ? 'padding-top: 40px;' : ''}
+			background: transparent;
+			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+			font-size: 14px;
+			line-height: 1.6;
+			color: rgba(0, 0, 0, 0.87);
+			-webkit-font-smoothing: antialiased;
+			-moz-osx-font-smoothing: grayscale;
+			overflow-x: hidden;
 			${Object.entries(props.iframeBodyStyle || {})
 				.map(([key, val]) => `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${val};`)
 				.join(' ')}
 		}
+		h1, h2, h3, h4, h5, h6 {
+			margin: 0 0 8px 0;
+			font-weight: 500;
+		}
+		p {
+			margin: 0 0 8px 0;
+		}
+		table {
+			border-collapse: collapse;
+			width: 100%;
+			max-width: 100%;
+		}
+		th, td {
+			padding: 4px 8px;
+			text-align: left;
+			border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+			word-wrap: break-word;
+		}
+		th {
+			font-weight: 500;
+			color: rgba(0, 0, 0, 0.6);
+		}
+		img {
+			max-width: 100%;
+			height: auto;
+		}
 	</style>
 	${props.content || ''}
 </div>`}
-					sandbox="allow-same-origin allow-popups-to-escape-sandbox allow-scripts"
-					title={mapHook.componentId}
-				/>
+							sandbox="allow-same-origin allow-popups-to-escape-sandbox allow-scripts"
+							title={mapHook.componentId}
+						/>
+					</Box>
+				</Paper>
 			</Box>,
 			container.current
 		)
diff --git a/packages/react-maplibre/src/components/MlSketchTool/MlSketchTool.tsx b/packages/react-maplibre/src/components/MlSketchTool/MlSketchTool.tsx
index 08c8513e..3100fca8 100644
--- a/packages/react-maplibre/src/components/MlSketchTool/MlSketchTool.tsx
+++ b/packages/react-maplibre/src/components/MlSketchTool/MlSketchTool.tsx
@@ -330,7 +330,9 @@ const MlSketchTool = (props: MlSketchToolProps) => {
 											if (!updatedGeometries[index].properties) {
 												updatedGeometries[index].properties = {};
 											}
-											updatedGeometries[index].properties!.name = newName;
+											if (updatedGeometries[index].properties) {
+												updatedGeometries[index].properties.name = newName;
+											}
 											return {
 												..._sketchState,
 												geometries: updatedGeometries,
@@ -351,7 +353,9 @@ const MlSketchTool = (props: MlSketchToolProps) => {
 											if (!updatedGeometries[index].properties) {
 												updatedGeometries[index].properties = {};
 											}
-											updatedGeometries[index].properties!.customName = true;
+											if (updatedGeometries[index].properties) {
+												updatedGeometries[index].properties.customName = true;
+											}
 											return {
 												..._sketchState,
 												geometries: updatedGeometries,
@@ -386,7 +390,9 @@ const MlSketchTool = (props: MlSketchToolProps) => {
 												if (!updatedGeometries[index].properties) {
 													updatedGeometries[index].properties = {};
 												}
-												updatedGeometries[index].properties!.customName = false;
+												if (updatedGeometries[index].properties) {
+													updatedGeometries[index].properties.customName = false;
+												}
 												return {
 													..._sketchState,
 													geometries: updatedGeometries,
diff --git a/packages/react-maplibre/src/components/MlWmsLayer/MlWmsLayer.tsx b/packages/react-maplibre/src/components/MlWmsLayer/MlWmsLayer.tsx
index 5ce229a5..d324f59b 100644
--- a/packages/react-maplibre/src/components/MlWmsLayer/MlWmsLayer.tsx
+++ b/packages/react-maplibre/src/components/MlWmsLayer/MlWmsLayer.tsx
@@ -1,6 +1,7 @@
 import { useMemo, useRef, useEffect, useCallback } from 'react';
 import useMap from '../../hooks/useMap';
 import { RasterLayerSpecification, RasterSourceSpecification } from 'maplibre-gl';
+import { normalizeWmsParams } from '../../utils/wmsUtils';
 
 const defaultProps: MlWmsLayerProps = {
 	url: '',
@@ -11,6 +12,7 @@ const defaultProps: MlWmsLayerProps = {
 		version: '1.1.1',
 		request: 'GetMap',
 		srs: 'EPSG:3857',
+		crs: 'EPSG:3857',
 		width: '256',
 		height: '256',
 		Transparent: 'true',
@@ -62,11 +64,12 @@ const MlWmsLayer = (props: MlWmsLayerProps) => {
 			_wmsUrl = _propsUrlParams[0];
 		}
 		const _urlParamsFromUrl = new URLSearchParams(_propsUrlParams?.[1]);
+
 		// first spread in default props manually to enable overriding a single parameter without replacing the whole default urlParameters object
 		const urlParamsObj = {
-			...defaultProps.urlParameters,
-			...Object.fromEntries(_urlParamsFromUrl),
-			...props.urlParameters,
+			...normalizeWmsParams(defaultProps.urlParameters),
+			...normalizeWmsParams(_urlParamsFromUrl),
+			...normalizeWmsParams(props.urlParameters),
 		};
 		const urlParams = new URLSearchParams(urlParamsObj as unknown as Record<string, string>);
 		const urlParamsStr =
diff --git a/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx b/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx
index 8b3b5ef1..fad8a518 100644
--- a/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx
+++ b/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import MlWmsLayer from '../MlWmsLayer/MlWmsLayer';
 import MlMarker from '../MlMarker/MlMarker';
-import useWms, { useWmsProps, useWmsReturnType } from '../../hooks/useWms';
+import useWms, { useWmsReturnType } from '../../hooks/useWms';
 
 import InfoIcon from '@mui/icons-material/Info';
 import List from '@mui/material/List';
@@ -19,6 +19,7 @@ import ConfirmDialog from '../../ui_components/ConfirmDialog';
 
 import * as turf from '@turf/turf';
 import SortableContainer from '../../ui_components/LayerList/util/SortableContainer';
+import { normalizeWmsParams } from '../../utils/wmsUtils';
 
 const originShift = (2 * Math.PI * 6378137) / 2.0;
 const lngLatToMeters = function (lnglat: LngLat, accuracy = { enable: true, decimal: 1 }) {
@@ -73,13 +74,21 @@ export interface MlWmsLoaderProps {
 	layerId?: string;
 	insertBeforeLayer?: string;
 	/**
-	 * URL parameters that will be used in the getCapabilities request
+	 * Base URL parameters that will be used for all WMS requests (GetCapabilities, GetMap, GetFeatureInfo)
 	 */
-	urlParameters?: useWmsProps['urlParameters'];
+	baseUrlParameters?: { [key: string]: string };
 	/**
-	 * URL parameters that will be added when requesting WMS capabilities
+	 * URL parameters specific to GetCapabilities requests
 	 */
-	wmsUrlParameters?: { [key: string]: string };
+	getCapabilitiesUrlParameters?: { [key: string]: string };
+	/**
+	 * URL parameters specific to GetMap requests
+	 */
+	getMapUrlParameters?: { [key: string]: string };
+	/**
+	 * URL parameters specific to GetFeatureInfo requests
+	 */
+	getFeatureInfoUrlParameters?: { [key: string]: string };
 	/**
 	 * If true, zooms to the extent of the WMS layer after loading the getCapabilities response
 	 */
@@ -177,14 +186,26 @@ export type LayerType = {
 const defaultProps = {
 	mapId: undefined,
 	url: '',
-	urlParameters: {
+	baseUrlParameters: {
 		SERVICE: 'WMS',
 		VERSION: '1.3.0',
-		REQUEST: 'GetCapabilities',
 	},
-	wmsUrlParameters: {
+	getCapabilitiesUrlParameters: {},
+	getMapUrlParameters: {
 		TRANSPARENT: 'TRUE',
 	},
+	getFeatureInfoUrlParameters: {
+		FEATURE_COUNT: '10',
+		STYLES: '',
+		WIDTH: '100',
+		HEIGHT: '100',
+		SRS: 'EPSG:3857',
+		CRS: 'EPSG:3857',
+		X: '50',
+		Y: '50',
+		I: '50',
+		J: '50',
+	},
 	featureInfoEnabled: true,
 	featureInfoMarkerEnabled: true,
 	zoomToExtent: false,
@@ -199,6 +220,16 @@ const defaultProps = {
  */
 const MlWmsLoader = (props: MlWmsLoaderProps) => {
 	props = { ...defaultProps, ...props };
+
+	const capabilitiesUrlParameters = useMemo(
+		() => ({
+			...props.baseUrlParameters,
+			...props.getCapabilitiesUrlParameters,
+			REQUEST: 'GetCapabilities',
+		}),
+		[props.baseUrlParameters, props.getCapabilitiesUrlParameters]
+	);
+
 	const {
 		capabilities: _capabilities,
 		error,
@@ -206,7 +237,7 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => {
 		getFeatureInfoUrl: _getFeatureInfoUrl,
 		wmsUrl: _wmsUrl,
 	}: useWmsReturnType = useWms({
-		urlParameters: props.urlParameters,
+		urlParameters: capabilitiesUrlParameters,
 	});
 
 	const [open, setOpen] = useState(props?.config?.open || false);
@@ -291,33 +322,20 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => {
 			const _sw = _bbox && lngLatToMeters({ lng: _bbox[0], lat: _bbox[1] } as LngLat);
 			const _ne = _bbox && lngLatToMeters({ lng: _bbox[2], lat: _bbox[3] } as LngLat);
 			const bbox = _sw && _ne && [_sw[0], _sw[1], _ne[0], _ne[1]];
+
 			const _getFeatureInfoUrlParams = {
 				REQUEST: 'GetFeatureInfo',
-
 				BBOX: bbox?.join(','),
-				SERVICE: 'WMS',
 				INFO_FORMAT:
 					capabilities?.Capability?.Request?.GetFeatureInfo.Format.indexOf('text/html') !== -1
 						? 'text/html'
 						: 'text/plain',
-				FEATURE_COUNT: '10',
 				LAYERS: layers
 					.map((layer: LayerType) => (layer.visible && layer.queryable ? layer.Name : undefined))
 					.filter((n) => n),
 				QUERY_LAYERS: layers
 					.map((layer: LayerType) => (layer.visible && layer.queryable ? layer.Name : undefined))
 					.filter((n) => n),
-				STYLES: '',
-				WIDTH: 100,
-				HEIGHT: 100,
-				srs: 'EPSG:3857',
-				CRS: 'EPSG:3857',
-				version: '1.3.0',
-				X: 50,
-				Y: 50,
-				I: 50,
-				J: 50,
-				buffer: '50',
 			};
 
 			let _gfiUrl: string | undefined = getFeatureInfoUrl;
@@ -329,14 +347,18 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => {
 			const _urlParamsFromUrl = new URLSearchParams(_gfiUrlParts?.[1]);
 
 			const urlParamsObj = {
-				...Object.fromEntries(_urlParamsFromUrl),
+				...normalizeWmsParams(defaultProps.baseUrlParameters),
+				...normalizeWmsParams(defaultProps.getFeatureInfoUrlParameters),
+				...normalizeWmsParams(_urlParamsFromUrl, (key) => key.toUpperCase() !== 'REQUEST'),
+				...normalizeWmsParams(props.baseUrlParameters),
+				...normalizeWmsParams(props.getFeatureInfoUrlParameters),
 				..._getFeatureInfoUrlParams,
 			};
 			// create URLSearchParams object to assemble the URL Parameters
 			// "as any" can be removed once the URLSearchParams ts spec is fixed
 			const urlParams = new URLSearchParams(urlParamsObj as unknown as Record<string, string>);
 
-			fetch(props.url + '?' + urlParams.toString())
+			fetch(_gfiUrl + '?' + urlParams.toString())
 				.then((res) => {
 					if (!res.ok) {
 						throw new Error('FeatureInfo could not be fetched');
@@ -421,10 +443,9 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => {
 						if (idx === 0) {
 							_LatLonBoundingBox = layer.EX_GeographicBoundingBox || layer?.LatLonBoundingBox || [];
 						}
-						const isVisible =
-							props.visibleLayersAtStart && layer.Name
-								? props.visibleLayersAtStart.includes(layer.Name)
-								: false;
+						const isVisible = props.visibleLayersAtStart
+							? props.visibleLayersAtStart.includes(layer.Name || '')
+							: true;
 						return {
 							visible: isVisible,
 							Attribution: { Title: '' },
@@ -596,7 +617,8 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => {
 							attribution={attribution}
 							visible={visible}
 							urlParameters={{
-								...props.wmsUrlParameters,
+								...props.baseUrlParameters,
+								...props.getMapUrlParameters,
 								layers: layers
 									?.filter?.((layer) => layer.visible)
 									.map((el) => el.Name)
diff --git a/packages/react-maplibre/src/hooks/useWms.ts b/packages/react-maplibre/src/hooks/useWms.ts
index 91d56e61..999c1fb8 100644
--- a/packages/react-maplibre/src/hooks/useWms.ts
+++ b/packages/react-maplibre/src/hooks/useWms.ts
@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import WMSCapabilities, { WMSCapabilitiesJSON } from 'wms-capabilities';
+import { normalizeWmsParams } from '../utils/wmsUtils';
 
 export interface useWmsProps {
 	url?: string;
@@ -45,11 +46,14 @@ function useWms(props: useWmsProps): useWmsReturnType {
 		const _urlParamsFromUrl = new URLSearchParams(_propsUrlParams?.[1]);
 
 		const urlParamsObj = {
-			...Object.fromEntries(_urlParamsFromUrl),
-			...props.urlParameters,
+			...normalizeWmsParams(_urlParamsFromUrl),
+			...normalizeWmsParams(props.urlParameters),
 		};
 		// create URLSearchParams object to assemble the URL Parameters
-		const urlParams = new URLSearchParams(urlParamsObj);
+		const urlParamsObjStringified = Object.fromEntries(
+			Object.entries(urlParamsObj).map(([key, value]) => [key, String(value)])
+		);
+		const urlParams = new URLSearchParams(urlParamsObjStringified);
 
 		const urlParamsStr =
 			decodeURIComponent(urlParams.toString()) + ''.replace(/%2F/g, '/').replace(/%3A/g, ':');
diff --git a/packages/react-maplibre/src/utils/wmsUtils.ts b/packages/react-maplibre/src/utils/wmsUtils.ts
new file mode 100644
index 00000000..9f666960
--- /dev/null
+++ b/packages/react-maplibre/src/utils/wmsUtils.ts
@@ -0,0 +1,21 @@
+/**
+ * Normalizes URL parameter keys to uppercase to avoid duplicates when merging WMS parameters
+ * @param params - Object or URLSearchParams to normalize
+ * @param filterFn - Optional filter function to exclude certain key-value pairs
+ * @returns Object with uppercase keys
+ */
+export function normalizeWmsParams(
+	params: { [key: string]: string | number } | URLSearchParams | undefined,
+	filterFn?: (key: string, value: string) => boolean
+): { [key: string]: string | number } {
+	if (!params) {
+		return {};
+	}
+
+	const entries =
+		params instanceof URLSearchParams ? Array.from(params.entries()) : Object.entries(params);
+
+	const filtered = filterFn ? entries.filter(([key, value]) => filterFn(key, value)) : entries;
+
+	return Object.fromEntries(filtered.map(([key, value]) => [key.toUpperCase(), value]));
+}