diff --git a/frontend/src/modules/Servicemap/ServiceMap.tsx b/frontend/src/modules/Servicemap/ServiceMap.tsx
index b18151562e..d75003ce5e 100644
--- a/frontend/src/modules/Servicemap/ServiceMap.tsx
+++ b/frontend/src/modules/Servicemap/ServiceMap.tsx
@@ -44,10 +44,11 @@ const ServiceMap = (props: ServiceMapProps) => {
 		getDetailedServiceMapItems(globalTime);
 	}, []);
 
-	if (!serviceMap.items.length) {
+	if (!serviceMap.items.length || !serviceMap.services.length) {
 		return "loading";
 	}
-	const { nodes, links } = getGraphData(serviceMap.items);
+
+	const { nodes, links } = getGraphData(serviceMap);
 	const graphData = { nodes, links };
 	return (
 		<div>
@@ -63,10 +64,11 @@ const ServiceMap = (props: ServiceMapProps) => {
 				linkDirectionalParticleSpeed={(d) => d.value}
 				nodeCanvasObject={(node, ctx, globalScale) => {
 					const label = node.id;
-					const fontSize = 16 / globalScale;
+					const fontSize = node.fontSize;
 					ctx.font = `${fontSize}px Sans-Serif`;
 					const textWidth = ctx.measureText(label).width;
-					const bckgDimensions = [textWidth, fontSize].map((n) => n + fontSize); // some padding
+					const width = textWidth > node.width ? textWidth : node.width;
+					const bckgDimensions = [width, fontSize].map((n) => n + fontSize); // some padding
 					ctx.fillStyle = node.color;
 					ctx.fillRect(
 						node.x - bckgDimensions[0] / 2,
diff --git a/frontend/src/modules/Servicemap/utils.ts b/frontend/src/modules/Servicemap/utils.ts
index d06961fde9..b97776e2fc 100644
--- a/frontend/src/modules/Servicemap/utils.ts
+++ b/frontend/src/modules/Servicemap/utils.ts
@@ -1,12 +1,31 @@
-import { uniqBy, uniq, maxBy, cloneDeep } from "lodash";
-import { servicesMapItem } from "Src/store/actions";
+import { uniqBy, uniq, maxBy, cloneDeep, find } from "lodash";
+import { serviceMapStore } from "Src/store/actions";
 import { graphDataType } from "./ServiceMap";
 
-export const getGraphData = (item: servicesMapItem[]): graphDataType => {
-	const highestNum = maxBy(item, (e) => e.callCount).callCount;
-	const divNum = Number(String(1).padEnd(highestNum.toString().length, "0"));
+export const getDimensions = (num, highest) => {
+	const MAX_WIDTH = 8;
+	const MIN_WIDTH = 5;
+	const MAX_FONT_SIZE = 8;
+	const MIN_FONT_SIZE = 5;
+	const percentage = (num / highest) * 100;
+	const width = (percentage * (MAX_WIDTH - MIN_WIDTH)) / 100 + MIN_WIDTH;
+	const fontSize =
+		(percentage * (MAX_FONT_SIZE - MIN_FONT_SIZE)) / 100 + MIN_FONT_SIZE;
+	return {
+		fontSize,
+		width,
+	};
+};
 
-	const links = cloneDeep(item).map((node) => {
+export const getGraphData = (serviceMap: serviceMapStore): graphDataType => {
+	const { items, services } = serviceMap;
+	const highestCallCount = maxBy(items, (e) => e.callCount).callCount;
+	const highestCallRate = maxBy(services, (e) => e.callRate).callRate;
+	const divNum = Number(
+		String(1).padEnd(highestCallCount.toString().length, "0"),
+	);
+
+	const links = cloneDeep(items).map((node) => {
 		const { parent, child, callCount } = node;
 		return {
 			source: parent,
@@ -14,13 +33,20 @@ export const getGraphData = (item: servicesMapItem[]): graphDataType => {
 			value: (100 - callCount / divNum) * 0.01,
 		};
 	});
-	const uniqParent = uniqBy(cloneDeep(item), "parent").map((e) => e.parent);
-	const uniqChild = uniqBy(cloneDeep(item), "child").map((e) => e.child);
+	const uniqParent = uniqBy(cloneDeep(items), "parent").map((e) => e.parent);
+	const uniqChild = uniqBy(cloneDeep(items), "child").map((e) => e.child);
 	const uniqNodes = uniq([...uniqParent, ...uniqChild]);
-	const nodes = uniqNodes.map((node, i) => ({
-		id: node,
-		group: i + 1,
-	}));
+	const nodes = uniqNodes.map((node, i) => {
+		const service = find(services, (service) => service.serviceName === node);
+		let color = "#84ff00";
+		if (service.errorRate > 0) {
+			color = "#f00a0a";
+		} else if (service.fourXXRate > 0) {
+			color = "#ebeb15";
+		}
+		const { fontSize, width } = getDimensions(service.callRate, highestCallRate);
+		return { id: node, group: i + 1, fontSize, width, color, nodeVal: width };
+	});
 	return {
 		nodes,
 		links,