diff --git a/components/src/maplibre/MapStyle/SWRDataLabDark.ts b/components/src/maplibre/MapStyle/SWRDataLabDark.ts
index f1334f39..bb855197 100644
--- a/components/src/maplibre/MapStyle/SWRDataLabDark.ts
+++ b/components/src/maplibre/MapStyle/SWRDataLabDark.ts
@@ -48,8 +48,9 @@ const tokens: styleTokens = {
 	boundary_state: 'hsl(218, 4%, 37%)',
 	rail: 'hsl(0, 0%, 33%)',
 	building: '#111',
-	hillshade_light: 'hsla(0, 0%, 77%, 0.15)',
-	hillshade_dark: 'hsla(0, 0%, 0%, 0.65)'
+	hillshade_light: 'hsl(0, 0%, 50%)',
+	hillshade_dark: 'hsl(0, 0%, 0%)',
+	hillshade_accent: 'black'
 };
 
 const { landuse } = makeLanduse(tokens);
@@ -91,23 +92,13 @@ const style: styleFunction = (opts) => {
 				maxzoom: 14
 			},
 			...(options.enableHillshade && {
-				'versatiles-hillshade': {
-					tilejson: '3.0.0',
-					name: 'VersaTiles Hillshade Vectors',
-					description: 'VersaTiles Hillshade Vectors based on Mapzen Jörð Terrain Tiles',
-					attribution:
-						'<a href="https://github.com/tilezen/joerd/blob/master/docs/attribution.md">Mapzen Terrain Tiles, DEM Sources</a>',
-					version: '1.0.0',
-					tiles: ['https://tiles.datenhub.net/tiles/hillshade/{z}/{x}/{y}'],
-					type: 'vector',
-					scheme: 'xyz',
-					format: 'pbf',
-					bounds: [-180, -85.0511287798066, 180, 85.0511287798066],
-					minzoom: 0,
+				'versatiles-elevation': {
+					type: 'raster-dem',
+					tileSize: 256,
 					maxzoom: 12,
-					vector_layers: [
-						{ id: 'hillshade-vectors', fields: { shade: 'String' }, minzoom: 0, maxzoom: 12 }
-					]
+					minzoom: 0,
+					tiles: ['https://tiles.datenhub.net/tiles/elevation/{z}/{x}/{y}'],
+					attribution: '<a href="https://mapterhorn.com/attribution">© Mapterhorn</a>'
 				}
 			}),
 			...(options.enableBuildingExtrusions && {
diff --git a/components/src/maplibre/MapStyle/SWRDataLabLight.mdx b/components/src/maplibre/MapStyle/SWRDataLabLight.mdx
index a245def4..2fe7d379 100644
--- a/components/src/maplibre/MapStyle/SWRDataLabLight.mdx
+++ b/components/src/maplibre/MapStyle/SWRDataLabLight.mdx
@@ -40,8 +40,8 @@ Light-themed general-purpose basemap using SWR colours and typefaces based on
     </tr>
 	<tr>
 		<td>Hillshading</td>
-		<td>[versatiles-hillshade](https://download.versatiles.org/) vector tiles based on Mapzen Jörð Terrain Tiles served from `tiles.datenhub.net`</td>
-    <td>[CC BY 4.0](https://docs.versatiles.org/basics/tilesets.html#license--attribution-1)</td>
+		<td>[versatiles-elevation](https://download.versatiles.org/) vector tiles based on [Mapterthorn terrain data](https://mapterhorn.com/) served from `tiles.datenhub.net`</td>
+    <td>[Copernicus Regulation EU No 377/2014](https://docs.versatiles.org/basics/tilesets.html#elevation)</td>
     </tr>
     <tr>
     	<td>Building footprints + heights</td>
diff --git a/components/src/maplibre/MapStyle/SWRDataLabLight.ts b/components/src/maplibre/MapStyle/SWRDataLabLight.ts
index 6efc7fd1..3959080a 100644
--- a/components/src/maplibre/MapStyle/SWRDataLabLight.ts
+++ b/components/src/maplibre/MapStyle/SWRDataLabLight.ts
@@ -55,7 +55,8 @@ const tokens: styleTokens = {
 	boundary_state: 'hsl(37, 10%, 75%)',
 	boundary_country_case: 'white',
 	hillshade_light: '#fff',
-	hillshade_dark: 'hsla(0, 0%, 53%, 0.15)'
+	hillshade_dark: 'hsl(30, 20%, 20%)',
+	hillshade_accent: 'white'
 };
 
 const { landuse } = makeLanduse(tokens);
@@ -97,24 +98,16 @@ const style: styleFunction = (opts) => {
 				maxzoom: 14
 			},
 			...(options.enableHillshade && {
-				'versatiles-hillshade': {
-					tilejson: '3.0.0',
-					name: 'VersaTiles Hillshade Vectors',
-					description: 'VersaTiles Hillshade Vectors based on Mapzen Jörð Terrain Tiles',
-					attribution:
-						'<a href="https://github.com/tilezen/joerd/blob/master/docs/attribution.md">Mapzen Terrain Tiles, DEM Sources</a>',
-					version: '1.0.0',
-					tiles: ['https://tiles.datenhub.net/tiles/hillshade/{z}/{x}/{y}'],
-					type: 'vector',
-					scheme: 'xyz',
-					format: 'pbf',
-					bounds: [-180, -85.0511287798066, 180, 85.0511287798066],
-					minzoom: 0,
-					maxzoom: 12,
-					vector_layers: [
-						{ id: 'hillshade-vectors', fields: { shade: 'String' }, minzoom: 0, maxzoom: 12 }
-					]
-				}
+				...(options.enableHillshade && {
+					'versatiles-elevation': {
+						type: 'raster-dem',
+						tileSize: 256,
+						maxzoom: 12,
+						minzoom: 0,
+						tiles: ['https://tiles.datenhub.net/tiles/elevation/{z}/{x}/{y}'],
+						attribution: '<a href="https://mapterhorn.com/attribution">© Mapterhorn</a>'
+					}
+				})
 			}),
 			...(options.enableBuildingExtrusions && {
 				'basemap-de': {
diff --git a/components/src/maplibre/MapStyle/components/Hillshade.ts b/components/src/maplibre/MapStyle/components/Hillshade.ts
index cf97f2f8..cb609ae0 100644
--- a/components/src/maplibre/MapStyle/components/Hillshade.ts
+++ b/components/src/maplibre/MapStyle/components/Hillshade.ts
@@ -3,43 +3,20 @@ import { type Layer, type styleTokens } from '../../types';
 export default function makeHillshade(tokens: styleTokens): any {
 	const hillshade: Layer[] = [
 		{
-			id: 'hillshade-light',
-			filter: ['all', ['==', 'shade', 'light']],
+			id: 'hillshade',
+			type: 'hillshade',
+			source: 'versatiles-elevation',
 			paint: {
-				'fill-color': tokens.hillshade_light,
-				'fill-opacity': {
-					stops: [
-						[0, 0],
-						[4, 1]
-					]
-				},
-				'fill-outline-color': 'transparent',
-				'fill-antialias': true
-			}
-		},
-		{
-			id: 'hillshade-dark',
-			filter: ['all', ['==', 'shade', 'dark']],
-			paint: {
-				'fill-color': tokens.hillshade_dark,
-				'fill-opacity': {
-					stops: [
-						[0, 0],
-						[4, 1]
-					]
-				},
-				'fill-outline-color': 'transparent',
-				'fill-antialias': true
+				'hillshade-exaggeration': 0.05,
+				'hillshade-shadow-color': tokens.hillshade_dark,
+				'hillshade-highlight-color': tokens.hillshade_light,
+				'hillshade-accent-color': tokens.hillshade_accent,
+				'hillshade-illumination-direction': 315,
+				'hillshade-illumination-altitude': 45,
+				'hillshade-illumination-anchor': 'map',
+				'hillshade-method': 'standard'
 			}
 		}
-	].map((el) => {
-		return {
-			type: 'fill',
-			'source-layer': 'hillshade-vectors',
-			source: 'versatiles-hillshade',
-			...el
-		} as Layer;
-	});
-
+	];
 	return { hillshade };
 }