diff --git a/pkg/ui/react-app/src/pages/graph/Panel.tsx b/pkg/ui/react-app/src/pages/graph/Panel.tsx
index 354831d548..2ba02d1131 100644
--- a/pkg/ui/react-app/src/pages/graph/Panel.tsx
+++ b/pkg/ui/react-app/src/pages/graph/Panel.tsx
@@ -231,6 +231,7 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
       method: 'GET',
       headers: {
         'Content-Type': 'application/json',
+        'X-Thanos-Force-Tracing': 'true',
         // Conditionally add the header if the checkbox is enabled
         ...(this.props.options.forceTracing ? { 'X-Thanos-Force-Tracing': 'true' } : {}),
       },
@@ -238,8 +239,15 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
       credentials: 'same-origin',
       signal: abortController.signal,
     })
-      .then((resp) => resp.json())
-      .then((json) => {
+      .then((resp) => {
+        return resp.json().then((json) => {
+          return {
+            json,
+            headers: resp.headers,
+          };
+        });
+      })
+      .then(({ json, headers }) => {
         if (json.status !== 'success') {
           throw new Error(json.error || 'invalid response JSON');
         }
@@ -254,7 +262,7 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
           }
           analysis = json.data.analysis;
         }
-
+        const traceID = headers.get('X-Thanos-Trace-ID');
         this.setState({
           error: null,
           data: json.data,
@@ -262,12 +270,14 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
             startTime,
             endTime,
             resolution,
+            traceID: traceID ? traceID : '',
           },
           warnings: json.warnings,
           stats: {
             loadTime: Date.now() - queryStart,
             resolution,
             resultSeries,
+            traceID,
           },
           loading: false,
           analysis: analysis,
diff --git a/pkg/ui/react-app/src/pages/graph/QueryStatsView.test.tsx b/pkg/ui/react-app/src/pages/graph/QueryStatsView.test.tsx
index e04c914e1a..4df5fc37c3 100755
--- a/pkg/ui/react-app/src/pages/graph/QueryStatsView.test.tsx
+++ b/pkg/ui/react-app/src/pages/graph/QueryStatsView.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import QueryStatsView from './QueryStatsView';
 
 describe('QueryStatsView', () => {
@@ -8,10 +8,13 @@ describe('QueryStatsView', () => {
       loadTime: 100,
       resolution: 5,
       resultSeries: 10000,
+      traceID: 'e575f9d4eab63a90cdc3dc4ef1b8dda0',
     };
-    const queryStatsView = shallow(<QueryStatsView {...queryStatsProps} />);
-    expect(queryStatsView.prop('className')).toEqual('query-stats');
-    expect(queryStatsView.children().prop('className')).toEqual('float-right');
-    expect(queryStatsView.children().text()).toEqual('Load time: 100ms   Resolution: 5s   Result series: 10000');
+    const queryStatsView = mount(<QueryStatsView {...queryStatsProps} />);
+    expect(queryStatsView.find('.query-stats').prop('className')).toEqual('query-stats');
+    expect(queryStatsView.find('.float-right').prop('className')).toEqual('float-right');
+    expect(queryStatsView.find('.float-right').html()).toEqual(
+      `<span class="float-right">Load time: ${queryStatsProps.loadTime}ms   Resolution: ${queryStatsProps.resolution}s   Result series: ${queryStatsProps.resultSeries}   Trace ID: ${queryStatsProps.traceID}</span>`
+    );
   });
 });
diff --git a/pkg/ui/react-app/src/pages/graph/QueryStatsView.tsx b/pkg/ui/react-app/src/pages/graph/QueryStatsView.tsx
index 8bfd91c74b..d3e9a7a5c4 100644
--- a/pkg/ui/react-app/src/pages/graph/QueryStatsView.tsx
+++ b/pkg/ui/react-app/src/pages/graph/QueryStatsView.tsx
@@ -4,16 +4,17 @@ export interface QueryStats {
   loadTime: number;
   resolution: number;
   resultSeries: number;
+  traceID: string | null;
 }
 
 const QueryStatsView: FC<QueryStats> = (props) => {
-  const { loadTime, resolution, resultSeries } = props;
+  const { loadTime, resolution, resultSeries, traceID } = props;
+  const prev = `Load time: ${loadTime}ms &ensp; Resolution: ${resolution}s &ensp; Result series: ${resultSeries}`;
+  const str = traceID ? prev + ` &ensp; Trace ID: ${traceID}` : prev;
 
   return (
     <div className="query-stats">
-      <span className="float-right">
-        Load time: {loadTime}ms &ensp; Resolution: {resolution}s &ensp; Result series: {resultSeries}
-      </span>
+      <span className="float-right" dangerouslySetInnerHTML={{ __html: str }}></span>
     </div>
   );
 };
diff --git a/pkg/ui/react-app/src/types/types.ts b/pkg/ui/react-app/src/types/types.ts
index ca31bc6cc4..08054fa1ac 100644
--- a/pkg/ui/react-app/src/types/types.ts
+++ b/pkg/ui/react-app/src/types/types.ts
@@ -17,6 +17,7 @@ export interface QueryParams {
   startTime: number;
   endTime: number;
   resolution: number;
+  traceID: string;
 }
 
 export type Rule = {