diff --git a/frontend/src/modules/Servicemap/Map.tsx b/frontend/src/modules/Servicemap/Map.tsx
index b663aa5ed2..43cad85610 100644
--- a/frontend/src/modules/Servicemap/Map.tsx
+++ b/frontend/src/modules/Servicemap/Map.tsx
@@ -13,6 +13,8 @@ function ServiceMap({ fgRef, serviceMap }: any): JSX.Element {
 
 	const graphData = { nodes, links };
 
+	let zoomLevel = 1;
+
 	return (
 		<ForceGraph2D
 			ref={fgRef}
@@ -23,8 +25,9 @@ function ServiceMap({ fgRef, serviceMap }: any): JSX.Element {
 			linkDirectionalParticles="value"
 			linkDirectionalParticleSpeed={(d) => d.value}
 			nodeCanvasObject={(node, ctx) => {
-				const label = transformLabel(node.id);
-				const { fontSize } = node;
+				const label = transformLabel(node.id, zoomLevel);
+				let { fontSize } = node;
+				fontSize = (fontSize * 3) / zoomLevel;
 				ctx.font = `${fontSize}px Roboto`;
 				const { width } = node;
 
@@ -43,6 +46,9 @@ function ServiceMap({ fgRef, serviceMap }: any): JSX.Element {
 					tooltip.innerHTML = getTooltip(node);
 				}
 			}}
+			onZoom={(zoom) => {
+				zoomLevel = zoom.k;
+			}}
 			nodePointerAreaPaint={(node, color, ctx) => {
 				ctx.fillStyle = color;
 				ctx.beginPath();
diff --git a/frontend/src/modules/Servicemap/utils.ts b/frontend/src/modules/Servicemap/utils.ts
index f1da9e3c3a..500224241a 100644
--- a/frontend/src/modules/Servicemap/utils.ts
+++ b/frontend/src/modules/Servicemap/utils.ts
@@ -59,6 +59,7 @@ export const getGraphData = (serviceMap, isDarkMode): graphDataType => {
 				width: MIN_WIDTH,
 				color,
 				nodeVal: MIN_WIDTH,
+				name: node,
 			};
 		}
 		if (service.errorRate > 0) {
@@ -72,6 +73,7 @@ export const getGraphData = (serviceMap, isDarkMode): graphDataType => {
 			width,
 			color,
 			nodeVal: width,
+			name: node,
 		};
 	});
 	return {
@@ -123,9 +125,12 @@ export const getTooltip = (link: {
 							</div>`;
 };
 
-export const transformLabel = (label: string) => {
-	const MAX_LENGTH = 13;
-	const MAX_SHOW = 10;
+export const transformLabel = (label: string, zoomLevel: number) => {
+	//? 13 is the minimum label length. Scaling factor of 0.9 which is slightly less than 1
+	//? ensures smoother zoom transitions, gradually increasing MAX_LENGTH, displaying more of the label as
+	//? zooming in.
+	const MAX_LENGTH = 13 * (zoomLevel / 0.9);
+	const MAX_SHOW = MAX_LENGTH - 3;
 	if (label.length > MAX_LENGTH) {
 		return `${label.slice(0, MAX_SHOW)}...`;
 	}