diff --git a/frontend/src/modules/Servicemap/ServiceMap.tsx b/frontend/src/modules/Servicemap/ServiceMap.tsx
index 77fec0c920..048c6980b9 100644
--- a/frontend/src/modules/Servicemap/ServiceMap.tsx
+++ b/frontend/src/modules/Servicemap/ServiceMap.tsx
@@ -10,7 +10,8 @@ import {
 import { Spin } from "antd";
 import styled from "styled-components";
 import { StoreState } from "../../store/reducers";
-import { getZoomPx, getGraphData, getTooltip } from "./utils";
+
+import { getZoomPx, getGraphData, getTooltip, transformLabel } from "./utils";
 import SelectService from "./SelectService";
 import { ForceGraph2D } from "react-force-graph";
 
@@ -97,7 +98,7 @@ const ServiceMap = (props: ServiceMapProps) => {
 				linkDirectionalParticles="value"
 				linkDirectionalParticleSpeed={(d) => d.value}
 				nodeCanvasObject={(node, ctx, globalScale) => {
-					const label = node.id;
+					const label = transformLabel(node.id);
 					const fontSize = node.fontSize;
 					ctx.font = `${fontSize}px Roboto`;
 					const width = node.width;
diff --git a/frontend/src/modules/Servicemap/utils.ts b/frontend/src/modules/Servicemap/utils.ts
index 8a733b824c..fb7abfb57a 100644
--- a/frontend/src/modules/Servicemap/utils.ts
+++ b/frontend/src/modules/Servicemap/utils.ts
@@ -107,3 +107,12 @@ export const getTooltip = (node: {
 								</div>
 							</div>`;
 };
+
+export const transformLabel = (label: string) => {
+	const MAX_LENGTH = 13;
+	const MAX_SHOW = 10;
+	if (label.length > MAX_LENGTH) {
+		return `${label.slice(0, MAX_SHOW)}...`;
+	}
+	return label;
+};