diff --git a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.tsx b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.tsx
index 5baba664bb..a785501c18 100644
--- a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.tsx
+++ b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.tsx
@@ -23,6 +23,7 @@ import { formatDuration } from '../../../utils/date';
 
 import { FetchedState, TNil } from '../../../types';
 import { ApiError } from '../../../types/api-error';
+import TraceId from '../../common/TraceId';
 
 import './TraceHeader.css';
 
@@ -86,9 +87,7 @@ export default function TraceHeader(props: Props) {
           {traceID ? (
             <React.Fragment>
               <TraceName key="name" traceName={traceName} error={error} state={state} />{' '}
-              <small key="id" className="u-tx-muted ub-pr2">
-                {traceID.slice(0, 7)}
-              </small>
+              <TraceId traceId={traceID} />
               <TraceTimelineLink traceID={traceID} />
             </React.Fragment>
           ) : (
diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx
index ac66389f83..55fcd48721 100644
--- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx
+++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx
@@ -37,6 +37,7 @@ import { getTraceLinks } from '../../../model/link-patterns';
 import './TracePageHeader.css';
 import ExternalLinks from '../../common/ExternalLinks';
 import { getTargetEmptyOrBlank } from '../../../utils/config/get-target';
+import TraceId from '../../common/TraceId';
 
 type TracePageHeaderEmbedProps = {
   canCollapse: boolean;
@@ -153,7 +154,7 @@ export function TracePageHeaderFn(props: TracePageHeaderEmbedProps & { forwarded
 
   const title = (
     <h1 className={`TracePageHeader--title ${canCollapse ? 'is-collapsible' : ''}`}>
-      <TraceName traceName={trace.traceName} /> <small className="u-tx-muted">{traceShortID}</small>
+      <TraceName traceName={trace.traceName} /> <TraceId traceId={trace.traceID} />
     </h1>
   );
 
diff --git a/packages/jaeger-ui/src/components/common/TraceId.css b/packages/jaeger-ui/src/components/common/TraceId.css
new file mode 100644
index 0000000000..073e14e17f
--- /dev/null
+++ b/packages/jaeger-ui/src/components/common/TraceId.css
@@ -0,0 +1,28 @@
+/*
+Copyright (c) 2018 Uber Technologies, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+.TraceIDLength {
+  display: inline-block;
+  vertical-align: middle;
+}
+.TraceIDLength--short {
+  font-size: 18px;
+  padding: 3px 4px;
+}
+.TraceIDLength--full {
+  font-size: 16px;
+  padding: 3px 4px;
+  letter-spacing: 0.2px;
+}
diff --git a/packages/jaeger-ui/src/components/common/TraceId.test.js b/packages/jaeger-ui/src/components/common/TraceId.test.js
new file mode 100644
index 0000000000..952d41d5ef
--- /dev/null
+++ b/packages/jaeger-ui/src/components/common/TraceId.test.js
@@ -0,0 +1,100 @@
+// Copyright (c) 2023 The Jaeger Authors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { TraceId } from './TraceId';
+import { getConfigValue } from '../../utils/config/get-config';
+
+jest.mock('../../utils/config/get-config', () => ({
+  getConfigValue: jest.fn(),
+}));
+
+describe('TraceIdDisplayLength', () => {
+  const DEFAULT_LENGTH = 7;
+  const MOCK_TRACE_ID = '12345678901234567890';
+  const CUSTOM_CLASS = 'custom-class';
+
+  let wrapper;
+
+  const defaultProps = {
+    traceId: MOCK_TRACE_ID,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const createWrapper = (props = {}) => {
+    return shallow(<TraceId {...defaultProps} {...props} />);
+  };
+
+  describe('TraceIdDisplayLength Component', () => {
+    it('renders the default traceIdLength 7', () => {
+      getConfigValue.mockReturnValue(undefined);
+      wrapper = createWrapper();
+
+      const displayedText = wrapper.text();
+      expect(displayedText).toEqual(MOCK_TRACE_ID.slice(0, DEFAULT_LENGTH));
+    });
+
+    it('renders the config length when provided', () => {
+      const configuredLength = 5;
+      getConfigValue.mockReturnValue(configuredLength);
+      wrapper = createWrapper();
+
+      const displayedText = wrapper.text();
+      expect(displayedText).toEqual(MOCK_TRACE_ID.slice(0, configuredLength));
+    });
+  });
+
+  describe('Edge case handling', () => {
+    it('renders the full traceId when it is shorter then configured length', () => {
+      const shortTraceId = '12345';
+      const configuredLength = 10;
+      getConfigValue.mockReturnValue(configuredLength);
+
+      wrapper = createWrapper({ traceId: shortTraceId });
+      expect(wrapper.text()).toEqual(shortTraceId);
+    });
+
+    it('renders when traceId is undefiend', () => {
+      wrapper = createWrapper({ traceId: '' });
+      expect(wrapper.text()).toEqual('');
+    });
+  });
+
+  describe('Style handling', () => {
+    it('applies custom className when provided', () => {
+      wrapper = createWrapper({ className: CUSTOM_CLASS });
+      expect(wrapper.hasClass(CUSTOM_CLASS)).toBe(true);
+    });
+
+    it('default classes for styling', () => {
+      wrapper = createWrapper();
+      expect(wrapper.hasClass('TraceIDLength')).toBe(true);
+      expect(wrapper.hasClass('u-tx-muted')).toBe(true);
+    });
+
+    it('adds a length-based class depending on the configuration', () => {
+      getConfigValue.mockReturnValue(DEFAULT_LENGTH);
+      wrapper = createWrapper();
+      expect(wrapper.hasClass('TraceIDLength--short')).toBe(true);
+
+      getConfigValue.mockReturnValue(32);
+      wrapper = createWrapper();
+      expect(wrapper.hasClass('TraceIDLength--full')).toBe(true);
+    });
+  });
+});
diff --git a/packages/jaeger-ui/src/components/common/TraceId.tsx b/packages/jaeger-ui/src/components/common/TraceId.tsx
new file mode 100644
index 0000000000..f8090ca51c
--- /dev/null
+++ b/packages/jaeger-ui/src/components/common/TraceId.tsx
@@ -0,0 +1,34 @@
+// Copyright (c) 2023 The Jaeger Authors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from 'react';
+import { getConfigValue } from '../../utils/config/get-config';
+import './TraceId.css';
+
+type Props = {
+  traceId: string;
+  className?: string;
+};
+
+export function TraceId({ traceId, className = '' }: Props) {
+  const traceIdDisplayLength = getConfigValue('traceIdDisplayLength') || 7;
+  const traceIdDisplay = traceId ? traceId.slice(0, traceIdDisplayLength) : '';
+  const lengthClass = traceIdDisplayLength === 7 ? 'TraceIDLength--short' : 'TraceIDLength--full';
+
+  return (
+    <small className={`TraceIDLength ${lengthClass} u-tx-muted ub-pr2 ${className} `}>{traceIdDisplay}</small>
+  );
+}
+
+export default TraceId;
diff --git a/packages/jaeger-ui/src/constants/default-config.tsx b/packages/jaeger-ui/src/constants/default-config.tsx
index 9bf2ce2155..f70d8f8443 100644
--- a/packages/jaeger-ui/src/constants/default-config.tsx
+++ b/packages/jaeger-ui/src/constants/default-config.tsx
@@ -77,6 +77,7 @@ const defaultConfig: Config = {
     },
     maxLimit: 1500,
   },
+  traceIdDisplayLength: 7,
   storageCapabilities: {
     archiveStorage: false,
   },
diff --git a/packages/jaeger-ui/src/types/config.tsx b/packages/jaeger-ui/src/types/config.tsx
index e27b43b35e..c2be547870 100644
--- a/packages/jaeger-ui/src/types/config.tsx
+++ b/packages/jaeger-ui/src/types/config.tsx
@@ -135,6 +135,9 @@ export type Config = {
   // TODO when is it useful?
   scripts?: readonly TScript[];
 
+  // traceIDLength controls the length of the trace ID displayed in the UI.
+  traceIdDisplayLength?: number;
+
   // storage capabilities given by the query service.
   storageCapabilities?: StorageCapabilities;