diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts
index 1c42e7df58..ed685729dd 100644
--- a/frontend/src/constants/routes.ts
+++ b/frontend/src/constants/routes.ts
@@ -3,7 +3,7 @@ const ROUTES = {
 	SERVICE_METRICS: '/application/:servicename',
 	SERVICE_MAP: '/service-map',
 	TRACE: '/trace',
-	TRACE_GRAPH: '/traces/:id',
+	TRACE_GRAPH: '/trace/:id',
 	SETTINGS: '/settings',
 	INSTRUMENTATION: '/add-instrumentation',
 	USAGE_EXPLORER: '/usage-explorer',
diff --git a/frontend/src/container/TraceList/index.tsx b/frontend/src/container/TraceList/index.tsx
index cae991d33a..9f655dd964 100644
--- a/frontend/src/container/TraceList/index.tsx
+++ b/frontend/src/container/TraceList/index.tsx
@@ -116,7 +116,7 @@ const TraceDetails = (): JSX.Element => {
 				): React.HTMLAttributes<HTMLElement> => ({
 					onClick: (): void => {
 						history.push({
-							pathname: ROUTES.TRACES + '/' + record.traceid,
+							pathname: ROUTES.TRACE + '/' + record.traceid,
 							state: {
 								spanId: record.spanid,
 							},
diff --git a/frontend/src/modules/Traces/TraceGraph.tsx b/frontend/src/modules/Traces/TraceGraph.tsx
index 6840fc8322..2cd6e59c1d 100644
--- a/frontend/src/modules/Traces/TraceGraph.tsx
+++ b/frontend/src/modules/Traces/TraceGraph.tsx
@@ -6,7 +6,7 @@ import { flamegraph } from 'd3-flame-graph';
 import * as d3Tip from 'd3-tip';
 import { isEmpty, sortBy } from 'lodash-es';
 import React, { useEffect, useState } from 'react';
-import { connect } from 'react-redux';
+import { connect, useDispatch } from 'react-redux';
 import { useLocation, useParams } from 'react-router-dom';
 import {
 	fetchTraceItem,
@@ -33,7 +33,8 @@ const TraceGanttChartContainer = styled(Card)`
 const _TraceGraph = (props: TraceGraphProps) => {
 	const location = useLocation();
 	const spanId = location?.state?.spanId;
-	const params = useParams<{ id?: string }>();
+	const { id } = useParams<{ id?: string }>();
+
 	const [clickedSpanTags, setClickedSpanTags] = useState<pushDStree>([]);
 	const [selectedSpan, setSelectedSpan] = useState({});
 	const [clickedSpan, setClickedSpan] = useState(null);
@@ -62,11 +63,12 @@ const _TraceGraph = (props: TraceGraphProps) => {
 	};
 
 	const tree = spanToTreeUtil(props.traceItem[0].events);
+	const dispatch = useDispatch();
 
 	useEffect(() => {
 		//sets span width based on value - which is mapped to duration
-		props.fetchTraceItem(params.id);
-	}, []);
+		fetchTraceItem(id || '')(dispatch);
+	}, [dispatch, id]);
 
 	useEffect(() => {
 		if (props.traceItem) {
@@ -176,7 +178,7 @@ const _TraceGraph = (props: TraceGraphProps) => {
 							}}
 						>
 							<div style={{ textAlign: 'center' }}>
-								Trace Graph component ID is {params.id}{' '}
+								Trace Graph component ID is {id}{' '}
 							</div>
 							<div id="chart" style={{ fontSize: 12, marginTop: 20 }}></div>
 						</div>
diff --git a/frontend/src/store/actions/traces.ts b/frontend/src/store/actions/traces.ts
index d312865e24..f7771346fb 100644
--- a/frontend/src/store/actions/traces.ts
+++ b/frontend/src/store/actions/traces.ts
@@ -142,7 +142,7 @@ export const fetchTraces = (globalTime: GlobalTime, filter_params: string) => {
 
 export const fetchTraceItem = (traceID: string) => {
 	return async (dispatch: Dispatch): Promise<void> => {
-		const request_string = ROUTES.TRACES + '/' + traceID;
+		const request_string = '/traces' + '/' + traceID;
 		const response = await api.get<spansWSameTraceIDResponse>(request_string);
 
 		dispatch<FetchTraceItemAction>({