diff --git a/frontend/src/modules/Servicemap/ServiceMap.tsx b/frontend/src/modules/Servicemap/ServiceMap.tsx
index f6098cd994..46cf64b6cc 100644
--- a/frontend/src/modules/Servicemap/ServiceMap.tsx
+++ b/frontend/src/modules/Servicemap/ServiceMap.tsx
@@ -10,7 +10,7 @@ import {
 import { Spin } from "antd";
 import styled from "styled-components";
 import { StoreState } from "../../store/reducers";
-import { getGraphData } from "./utils";
+import { getZoomPx, getGraphData } from "./utils";
 import SelectService from "./SelectService";
 import { ForceGraph2D } from "react-force-graph";
 
@@ -72,7 +72,7 @@ const ServiceMap = (props: ServiceMapProps) => {
 	}
 
 	const zoomToService = (value: string) => {
-		fgRef && fgRef.current.zoomToFit(700, 380, (e) => e.id === value);
+		fgRef && fgRef.current.zoomToFit(700, getZoomPx(), (e) => e.id === value);
 	};
 
 	const { nodes, links } = getGraphData(serviceMap);
diff --git a/frontend/src/modules/Servicemap/utils.ts b/frontend/src/modules/Servicemap/utils.ts
index 296cd05060..ada3fb4a00 100644
--- a/frontend/src/modules/Servicemap/utils.ts
+++ b/frontend/src/modules/Servicemap/utils.ts
@@ -73,3 +73,14 @@ export const getGraphData = (serviceMap: serviceMapStore): graphDataType => {
 		links,
 	};
 };
+
+export const getZoomPx = (): number => {
+	const width = window.screen.width;
+	if (width < 1400) {
+		return 190;
+	} else if (width > 1400 && width < 2500) {
+		return 380;
+	} else if (width > 2500) {
+		return 360;
+	}
+};