diff --git a/frontend/src/modules/Servicemap/ServiceMap.tsx b/frontend/src/modules/Servicemap/ServiceMap.tsx
index 7408fe206d..45849c53d6 100644
--- a/frontend/src/modules/Servicemap/ServiceMap.tsx
+++ b/frontend/src/modules/Servicemap/ServiceMap.tsx
@@ -5,12 +5,13 @@ import { Card } from 'antd';
 import Spinner from 'components/Spinner';
 import React, { useEffect, useRef } from 'react';
 import { ForceGraph2D } from 'react-force-graph';
-import { connect } from 'react-redux';
+import { connect, useSelector } from 'react-redux';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
 import { getDetailedServiceMapItems, ServiceMapStore } from 'store/actions';
 import { AppState } from 'store/reducers';
 import styled from 'styled-components';
 import { GlobalTime } from 'types/actions/globalTime';
+import AppReducer from 'types/reducer/app';
 
 import SelectService from './SelectService';
 import { getGraphData, getTooltip, getZoomPx, transformLabel } from './utils';
@@ -53,6 +54,8 @@ export interface graphDataType {
 function ServiceMap(props: ServiceMapProps): JSX.Element {
 	const fgRef = useRef();
 
+	const { isDarkMode } = useSelector<AppState, AppReducer>((state) => state.app);
+
 	const { getDetailedServiceMapItems, globalTime, serviceMap } = props;
 
 	useEffect(() => {
@@ -115,10 +118,11 @@ function ServiceMap(props: ServiceMapProps): JSX.Element {
 					ctx.fillStyle = node.color;
 					ctx.beginPath();
 					ctx.arc(node.x, node.y, width, 0, 2 * Math.PI, false);
+					ctx.fillStyle = isDarkMode ? '#3d0b00' : '#ffbcad';
 					ctx.fill();
 					ctx.textAlign = 'center';
 					ctx.textBaseline = 'middle';
-					ctx.fillStyle = '#646464';
+					ctx.fillStyle = isDarkMode ? '#ffffff' : '#000000';
 					ctx.fillText(label, node.x, node.y);
 				}}
 				onNodeClick={(node) => {