diff --git a/src/components/MlGeoJsonLayer/assets/sample_1.json b/src/components/MlGeoJsonLayer/assets/sample_1.json
index 457e16e8d..e89b4bb32 100644
--- a/src/components/MlGeoJsonLayer/assets/sample_1.json
+++ b/src/components/MlGeoJsonLayer/assets/sample_1.json
@@ -89,7 +89,7 @@
 			}
 		},
 		{
-			"id": "2c3972ac51f4350582ecc9de57d47c75",
+			"id": "4",
 			"type": "Feature",
 			"properties": { "name": "Keiserplatz" },
 			"geometry": {
diff --git a/src/components/MlGeoJsonLayer/util/getDefaultPaintPropsByType.ts b/src/components/MlGeoJsonLayer/util/getDefaultPaintPropsByType.ts
index a9f32cfac..ab4901199 100644
--- a/src/components/MlGeoJsonLayer/util/getDefaultPaintPropsByType.ts
+++ b/src/components/MlGeoJsonLayer/util/getDefaultPaintPropsByType.ts
@@ -10,15 +10,15 @@ const getDefaultPaintPropsByType = (
 				return defaultPaintOverrides.fill;
 			}
 			return {
-				'fill-color': 'rgba(10,240,256,0.6)',
-				'fill-outline-color': 'rgba(20,230,256,0.8)',
+				'fill-color': 'rgba(0, 158, 224,0.6)',
+				'fill-outline-color': 'rgba(0, 158, 224,0.8)',
 			};
 		case 'line':
 			if (defaultPaintOverrides?.line) {
 				return defaultPaintOverrides.line;
 			}
 			return {
-				'line-color': 'rgb(203,211,2)',
+				'line-color': 'rgb(0, 158, 224)',
 				'line-width': 5,
 				'line-blur': 0,
 			};
@@ -27,10 +27,10 @@ const getDefaultPaintPropsByType = (
 				return defaultPaintOverrides.circle;
 			}
 			return {
-				'circle-color': 'rgba(10,240,256,0.8)',
-				'circle-stroke-color': '#fff',
-				'circle-stroke-width': 2,
-				'circle-radius': 4,
+				'circle-color': 'rgb(0, 158, 224)',
+				//'circle-stroke-color': 'rgba(255, 255, 255, 0.5)',
+				//'circle-stroke-width': 2,
+				'circle-radius': 6,
 			};
 		default:
 			return {};
diff --git a/src/components/MlHighlightFeature/MlHighlightFeature.meta_.json b/src/components/MlHighlightFeature/MlHighlightFeature.meta_.json
new file mode 100644
index 000000000..996ad2a0a
--- /dev/null
+++ b/src/components/MlHighlightFeature/MlHighlightFeature.meta_.json
@@ -0,0 +1,14 @@
+{
+  "name": "MlHighlightFeature",
+  "title": "",
+  "description": "",
+  "i18n": {
+    "de": {
+      "title": "",
+      "description": ""
+    }
+  },
+  "tags": [],
+  "category": "",
+  "type": "component"
+}
diff --git a/src/components/MlHighlightFeature/MlHighlightFeature.stories.tsx b/src/components/MlHighlightFeature/MlHighlightFeature.stories.tsx
new file mode 100644
index 000000000..b49bb26a4
--- /dev/null
+++ b/src/components/MlHighlightFeature/MlHighlightFeature.stories.tsx
@@ -0,0 +1,177 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+import MlHighlightFeature, { MlHighlightFeatureProps } from './MlHighlightFeature';
+
+import mapContextDecorator from '../../decorators/MapContextDecorator';
+
+import examplePolygons from '../MlGeoJsonLayer/assets/sample_1.json';
+import exampleLines from './assets/sample_lines.json';
+import examplePoints from './assets/sample_points.json';
+import MlGeoJsonLayer from '../MlGeoJsonLayer/MlGeoJsonLayer';
+import { Feature, FeatureCollection } from '@turf/turf';
+import useMap from '../../hooks/useMap';
+import TopToolbar from '../../ui_components/TopToolbar';
+import { Button, Menu, MenuItem, Typography } from '@mui/material';
+
+const storyoptions = {
+	title: 'MapComponents/MlHighlightFeature',
+	component: MlHighlightFeature,
+	argTypes: {},
+	decorators: mapContextDecorator,
+};
+export default storyoptions;
+
+interface TemplateProps extends MlHighlightFeatureProps {
+	type:
+		| 'symbol'
+		| 'circle'
+		| 'fill'
+		| 'line'
+		| 'heatmap'
+		| 'fill-extrusion'
+		| 'hillshade'
+		| 'background'
+		| undefined;
+	sample: FeatureCollection;
+}
+
+const configTitles = {
+	circle: 'Highlight point geometries',
+	line: 'Highlight line geometries',
+	polygon: 'Highlight polygon geometries',
+};
+
+const Template = (props: TemplateProps) => {
+	const [selectedFeatures, setSelectedFeatures] = useState<Feature[] | undefined>(props.features);
+	const selectedId = useRef<number[]>([]);
+	const mapHook = useMap({
+		mapId: undefined,
+	});
+	const initializedRef = useRef(false);
+
+	useEffect(() => {
+		if (!mapHook.map || initializedRef.current) return;
+
+		initializedRef.current = true;
+		mapHook.map.map.flyTo({ center: [7.105175528281227, 50.73348799274236], zoom: 15 });
+	}, [mapHook.map]);
+
+	const handleClick = useCallback((event: any) => {
+		const featureId = event.features[0].id;
+		const featureExists = selectedId.current.includes(featureId);
+
+		setSelectedFeatures((current) => {
+			if (featureExists) {
+				selectedId.current = selectedId.current.filter((id) => id !== featureId);
+				return current?.filter((feature) => feature.id !== featureId);
+			} else {
+				selectedId.current.push(featureId);
+				return [
+					...(current || []),
+					{
+						type: event.features[0].type,
+						geometry: event.features[0].geometry,
+						id: featureId,
+					} as Feature,
+				];
+			}
+		});
+	}, []);
+
+	return (
+		<>
+			<MlHighlightFeature
+				features={selectedFeatures}
+				offset={props.offset}
+				paint={props.paint}
+				insertBeforeLayer={props.insertBeforeLayer}
+				variant='dark'
+			/>
+
+			<MlGeoJsonLayer type={props.type} geojson={props.sample} onClick={handleClick}/>
+		</>
+	);
+};
+
+export const Polygon = Template.bind({});
+Polygon.parameters = {};
+Polygon.args = {
+	sample: examplePolygons,
+	type: 'fill',
+	offset: -5,
+	//paint: { 'line-color': "#3598DB" },
+};
+
+export const Line = Template.bind({});
+Line.parameters = {};
+Line.args = { sample: exampleLines, type: 'line'};
+
+export const Circle = Template.bind({});
+Circle.parameters = {};
+Circle.args = { sample: examplePoints, type: 'circle', offset: 8 };
+
+/// Catalogue Story
+
+const catalogueTemplate = () => {
+	const [selectedLayer, setSelectedLayer] = useState<string>('polygon');
+
+	const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+	const open = Boolean(anchorEl);
+	const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+		setAnchorEl(event.currentTarget);
+	};
+	const handleClose = () => {
+		setAnchorEl(null);
+	};
+
+	const handleLayerSelect = (layer: string) => {
+		setSelectedLayer(layer);
+	};
+
+	return (
+		<>
+			<TopToolbar
+				unmovableButtons={
+					<>
+						<Typography variant="h6" color={'ButtonText'} marginRight={'20px'}>
+							{configTitles[selectedLayer]}
+						</Typography>
+
+						<Button
+							id="basic-button"
+							variant="contained"
+							aria-controls={open ? 'basic-menu' : undefined}
+							aria-haspopup="true"
+							aria-expanded={open ? 'true' : undefined}
+							onClick={handleClick}
+						>
+							Example Configs
+						</Button>
+						<Menu
+							id="basic-menu"
+							anchorEl={anchorEl}
+							open={open}
+							onClose={handleClose}
+							MenuListProps={{
+								'aria-labelledby': 'basic-button',
+							}}
+						>
+							<MenuItem onClick={() => handleLayerSelect('polygon')}>
+								Polygon Configuration
+							</MenuItem>
+							<MenuItem onClick={() => handleLayerSelect('circle')}>Circle Configuration</MenuItem>
+							<MenuItem onClick={() => handleLayerSelect('line')}>Line Configuration</MenuItem>
+						</Menu>
+						{selectedLayer === 'circle' && <Template {...Circle.args} />}
+						{selectedLayer === 'line' && <Template {...Line.args} />}
+						{selectedLayer === 'polygon' && <Template {...Polygon.args} />}
+					</>
+				}
+			/>
+		</>
+	);
+};
+
+export const CatalogueDemo = catalogueTemplate.bind({});
+CatalogueDemo.parameters = {};
+CatalogueDemo.args = {};
diff --git a/src/components/MlHighlightFeature/MlHighlightFeature.tsx b/src/components/MlHighlightFeature/MlHighlightFeature.tsx
new file mode 100644
index 000000000..60ad71294
--- /dev/null
+++ b/src/components/MlHighlightFeature/MlHighlightFeature.tsx
@@ -0,0 +1,170 @@
+import React, { useEffect, useState } from 'react';
+import {
+	featureCollection as createCollection,
+	FeatureCollection,
+	Feature,
+	Geometry,
+	Position,
+} from '@turf/turf';
+import { LayerSpecification } from 'maplibre-gl';
+import MlGeoJsonLayer, { MlGeoJsonLayerProps } from '../MlGeoJsonLayer/MlGeoJsonLayer';
+import createPolygonAroundLine from './utils/lineToPolygonconverter';
+import getTheme from '../../ui_components/MapcomponentsTheme';
+
+export interface MlHighlightFeatureProps {
+	/**
+	 * Id of the target MapLibre instance in mapContext
+	 */
+	mapId?: string;
+	/**
+	 * The Featrue or FeatureCollecion to be highlighted by the component.
+	 */
+	features: Feature[] | undefined;
+	/**
+	 * Distance between the original and the highlighted Features.
+	 *
+	 * For polygon features (line and polygon inputs), a positive value results in an inset, while a negative value results in an outset.
+	 * For circle features (point input), negative values are not allowed; therefore, the absolute value will be used.
+	 * Default value: -5
+	 */
+	offset?: number;
+	/**
+	 * Paint properties of the config object that is passed to the MapLibreGl.addLayer call.
+	 * The paint properties must be compatible with the output type:
+	 * For polygon and line inputs ---> Line Type
+	 * For circle inputs ----> circle Type
+	 * All available properties are documented in the MapLibreGl documentation
+	 * https://maplibre.org/maplibre-style-spec/layers/#paint
+	 */
+
+	paint?: LayerSpecification['paint'];
+
+	insertBeforeLayer?: string;
+
+	variant?: 'dark' | 'hell' | 'outline';
+}
+
+/**
+ * It takes a Feature Array and generate a new layer with a highlight of the given Features.
+ *
+ */
+
+const MlHighlightFeature = (props: MlHighlightFeatureProps) => {
+	const selectedVariant = props.variant || 'outlined';
+	const [geojson, setGeojson] = useState<FeatureCollection>();
+	const [paint, setPaint] = useState<any>();
+	const [layerType, setLayerType] = useState<MlGeoJsonLayerProps['type']>('circle');
+
+	const theme = getTheme('light');
+	const defaultColor = theme.palette.primary.main;
+
+	const variant = {
+		dark: { color: '#555555', opacity: 0.5 },
+		outline: { color: defaultColor, lineColor: '#777777', lineWidth: 3 },
+		hell: { color: '#FFFFFF', opacity: 0.5 },
+	};
+
+	function getHighlightedFeature(feature: Feature) {
+		const newFeature: Feature = feature;
+
+		switch (feature.geometry.type) {
+			case 'Polygon':
+				if (props.variant == 'outline') {
+					setPaint({
+						'line-color': variant[selectedVariant].lineColor,
+						'line-width': variant[selectedVariant].lineWidth,
+						'line-offset': props.offset,
+						...props.paint,
+					});
+					setLayerType('line');
+				} else {
+					setPaint({
+						'fill-color': variant[selectedVariant].color,
+						'fill-opacity': variant[selectedVariant].opacity,
+						...props.paint,
+					});
+					setLayerType('fill');
+				}
+				break;
+
+			case 'LineString':
+				if (selectedVariant == 'outline') {
+					setPaint({ 'line-color': variant[selectedVariant].lineColor, 'line-offset': props.offset, ...props.paint });
+					setLayerType('line');
+						// transform newFeature into a polygon that surrounds the line
+						newFeature.geometry = createPolygonAroundLine(
+							(newFeature.geometry as Geometry).coordinates as Position[],
+							props.offset ? props.offset * 1e-5 : 1 * 1e-5
+						);
+				} else {
+					setPaint({
+						'line-color': variant[selectedVariant].color,
+						'line-opacity': variant[selectedVariant].opacity,
+						...props.paint,
+					});
+				
+					setLayerType('line');
+				}
+					break;
+										
+
+			case 'Point':
+				if (selectedVariant == 'outline') {
+
+				setLayerType('circle');
+				setPaint({
+					'circle-stroke-color': variant[selectedVariant].lineColor,
+					'circle-opacity': 0,
+					'circle-stroke-width': 2,
+					'circle-radius': props.offset && Math.abs(props.offset),
+					...props.paint,
+				});
+			} else {
+				setPaint({
+					'circle-color': variant[selectedVariant].color,
+					'circle-opacity': variant[selectedVariant].opacity,
+					...props.paint,
+				});
+			
+				setLayerType('circle');
+			}
+
+				break;
+		}
+		return newFeature;
+	}
+
+	useEffect(() => {
+		if (!props.features) {
+			setGeojson(undefined);
+			return;
+		}
+		const highlightedFeatures: Feature[] = [];
+		props.features.forEach((feature: Feature) =>
+			highlightedFeatures.push(getHighlightedFeature(feature))
+		);
+		setGeojson(createCollection(highlightedFeatures));
+	}, [props]);
+
+	return (
+		<>
+			{geojson && (
+				<MlGeoJsonLayer
+					mapId={props.mapId}
+					geojson={geojson}
+					layerId="MlHighlightFeature"
+					type={layerType}
+					options={{ paint: paint }}
+					insertBeforeLayer={props.insertBeforeLayer}
+				/>
+			)}
+		</>
+	);
+};
+
+MlHighlightFeature.defaultProps = {
+	mapId: undefined,
+	offset: 0,
+	variant: 'outlined',
+};
+export default MlHighlightFeature;
diff --git a/src/components/MlHighlightFeature/assets/sample_lines.json b/src/components/MlHighlightFeature/assets/sample_lines.json
new file mode 100644
index 000000000..9e2663c34
--- /dev/null
+++ b/src/components/MlHighlightFeature/assets/sample_lines.json
@@ -0,0 +1,9 @@
+{
+"type": "FeatureCollection",
+"name": "sample_lines",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+"features": [
+{ "type": "Feature", "id": 1, "properties": { "fid": 1 }, "geometry": { "type": "LineString", "coordinates": [ [ 7.097676922982851, 50.734551394091113 ], [ 7.104988124482984, 50.730979883248132 ] ] } },
+{ "type": "Feature", "id": 2, "properties": { "fid": 2 }, "geometry": { "type": "LineString", "coordinates": [ [ 7.097826896346955, 50.735844664743446 ], [ 7.099064176600823, 50.73571415281139 ], [ 7.099832790091864, 50.735785341183039 ], [ 7.101126310357271, 50.735571775743473 ], [ 7.102607297327812, 50.735073452597419 ], [ 7.103900817593219, 50.734397148418843 ], [ 7.104781911107337, 50.733851351961363 ], [ 7.106337884759929, 50.733080106993825 ] ] } }
+]
+}
diff --git a/src/components/MlHighlightFeature/assets/sample_points.json b/src/components/MlHighlightFeature/assets/sample_points.json
new file mode 100644
index 000000000..19a651fcc
--- /dev/null
+++ b/src/components/MlHighlightFeature/assets/sample_points.json
@@ -0,0 +1,10 @@
+{
+"type": "FeatureCollection",
+"name": "sample_points",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+"features": [
+{ "type": "Feature", "id": 1, "properties": { "fid": 1 }, "geometry": { "type": "Point", "coordinates": [ 7.103957057604736, 50.73287291831204 ] } },
+{ "type": "Feature", "id": 2, "properties": { "fid": 2 }, "geometry": { "type": "Point", "coordinates": [ 7.100868183124798, 50.734072226879221 ] } },
+{ "type": "Feature", "id": 3, "properties": { "fid": 3 }, "geometry": { "type": "Point", "coordinates": [ 7.103567703678694, 50.735123650224132 ] } }
+]
+}
diff --git a/src/components/MlHighlightFeature/utils/getPaintObject.ts b/src/components/MlHighlightFeature/utils/getPaintObject.ts
new file mode 100644
index 000000000..144a7f029
--- /dev/null
+++ b/src/components/MlHighlightFeature/utils/getPaintObject.ts
@@ -0,0 +1,39 @@
+import { useState } from "react";
+import getTheme from "../../../ui_components/MapcomponentsTheme";
+
+export default function(geomType: string, variant: string){
+
+	const [paint, setPaint] = useState<any>();
+	const theme = getTheme("light");
+	const defaultColor = theme.palette.primary.main;
+
+	switch (geomType) {
+		case 'Polygon':
+			if (variant == "dark"){
+				setPaint({ 'fill-color': "#555555", "fill-opacity": 0.5});
+			} 
+			if (variant == "hell"){
+				setPaint({ 'line-color': defaultColor, });
+			} 
+			if (variant == "outlined"){
+				setPaint({ 'line-color': defaultColor, });
+			} 
+			
+			break;
+
+		case 'LineString':
+			setPaint({ 'line-color': defaultColor});
+		
+			break;
+
+		case 'Point':
+			setPaint({
+				'circle-stroke-color': defaultColor,
+				'circle-opacity': 0,				
+			});
+
+			break;
+		}
+
+	return paint;
+	}
diff --git a/src/components/MlHighlightFeature/utils/lineToPolygonconverter.ts b/src/components/MlHighlightFeature/utils/lineToPolygonconverter.ts
new file mode 100644
index 000000000..25cf1f6b1
--- /dev/null
+++ b/src/components/MlHighlightFeature/utils/lineToPolygonconverter.ts
@@ -0,0 +1,42 @@
+import { Position } from "@turf/turf";
+
+function createPolygonAroundLine(line: Position[], offsetDistance: number) {
+  function offsetPoint(point: Position, angle: number, distance: number) {
+    return [
+      point[0] + Math.cos(angle) * distance,
+      point[1] + Math.sin(angle) * distance
+    ];
+  }
+
+  function angleBetweenPoints(p1: number[], p2: number[]) {
+    return Math.atan2(p2[1] - p1[1], p2[0] - p1[0]);
+  }
+
+  const leftOffsetPoints = [];
+  const rightOffsetPoints = [];
+
+  for (let i = 0; i < line.length - 1; i++) {
+    const p1 = line[i];
+    const p2 = line[i + 1];
+    const angle = angleBetweenPoints(p1, p2);
+    const leftAngle = angle + Math.PI / 2;
+    const rightAngle = angle - Math.PI / 2;
+
+    leftOffsetPoints.push(offsetPoint(p1, leftAngle, offsetDistance));
+    rightOffsetPoints.push(offsetPoint(p1, rightAngle, offsetDistance));
+  }
+
+  // Add the last point with the same angle as the second last segment
+  const lastAngle = angleBetweenPoints(line[line.length - 2], line[line.length - 1]);
+  const lastLeftAngle = lastAngle + Math.PI / 2;
+  const lastRightAngle = lastAngle - Math.PI / 2;
+
+  leftOffsetPoints.push(offsetPoint(line[line.length - 1], lastLeftAngle, offsetDistance));
+  rightOffsetPoints.push(offsetPoint(line[line.length - 1], lastRightAngle, offsetDistance));
+
+  // Combine points to form the polygon
+  const polygon = [...leftOffsetPoints, ...rightOffsetPoints.reverse()];
+  return { type: 'Polygon', coordinates: [polygon] };
+}
+
+export default createPolygonAroundLine;
diff --git a/src/components/MlSketchTool/MlSketchTool.tsx b/src/components/MlSketchTool/MlSketchTool.tsx
index 6f645ff82..ad178ea48 100644
--- a/src/components/MlSketchTool/MlSketchTool.tsx
+++ b/src/components/MlSketchTool/MlSketchTool.tsx
@@ -282,18 +282,18 @@ const MlSketchTool = (props: MlSketchToolProps) => {
 						layerId={'highlightBorder'}
 						defaultPaintOverrides={{
 							circle:{
-							'circle-color': '#dd9900',
-							'circle-opacity': 0.4,
+							'circle-color': '#555555',
+							'circle-opacity': 0.5,
 							'circle-radius': 10,
 						},
 							line:{
-							'line-color': '#dd9900',
-							'line-opacity': 0.4,
+							'line-color': '#555555',
+							'line-opacity': 0.5,
 							'line-width': 10,
 						},
 							fill:{
-							'fill-color': '#dd9900',
-							'fill-opacity': 0.4
+							'fill-color': '#555555',
+							'fill-opacity': 0.5
 						},
 						}}
 					/>