diff --git a/public/app/plugins/datasource/tempo/mockJsonResponse.json b/public/app/plugins/datasource/tempo/mockJsonResponse.json
index 31cae22d1e3..51ed3ce0060 100644
--- a/public/app/plugins/datasource/tempo/mockJsonResponse.json
+++ b/public/app/plugins/datasource/tempo/mockJsonResponse.json
@@ -46,9 +46,9 @@
           "instrumentationLibrary": {},
           "spans": [
             {
-              "traceId": "AAAAAAAAAABguiq7RPE+rg==",
-              "spanId": "cmteMBAvwNA=",
-              "parentSpanId": "OY8PIaPbma4=",
+              "traceId": "000000000000000060ba2abb44f13eae",
+              "spanId": "726b5e30102fc0d0",
+              "parentSpanId": "398f0f21a3db99ae",
               "name": "HTTP GET - root",
               "kind": "SPAN_KIND_SERVER",
               "startTimeUnixNano": "1627471657255809000",
@@ -156,8 +156,8 @@
           "instrumentationLibrary": {},
           "spans": [
             {
-              "traceId": "AAAAAAAAAABguiq7RPE+rg==",
-              "spanId": "GVdnHErYWoo=",
+              "traceId": "000000000000000060ba2abb44f13eae",
+              "spanId": "1957671c4ad85a8a",
               "parentSpanId": "WgdmnUQaoyY=",
               "name": "HTTP Client",
               "startTimeUnixNano": "1627471657251425000",
@@ -214,8 +214,8 @@
           "instrumentationLibrary": {},
           "spans": [
             {
-              "traceId": "AAAAAAAAAABguiq7RPE+rg==",
-              "spanId": "YLoqu0TxPq4=",
+              "traceId": "000000000000000060ba2abb44f13eae",
+              "spanId": "60ba2abb44f13eae",
               "name": "HTTP Client",
               "startTimeUnixNano": "1627471657247632000",
               "endTimeUnixNano": "1627471657260233000",
@@ -285,9 +285,9 @@
           "instrumentationLibrary": {},
           "spans": [
             {
-              "traceId": "AAAAAAAAAABguiq7RPE+rg==",
-              "spanId": "VzhhbsaOedI=",
-              "parentSpanId": "YLoqu0TxPq4=",
+              "traceId": "000000000000000060ba2abb44f13eae",
+              "spanId": "5738616ec68e79d2",
+              "parentSpanId": "60ba2abb44f13eae",
               "name": "HTTP GET",
               "kind": "SPAN_KIND_CLIENT",
               "startTimeUnixNano": "1627471657247674000",
@@ -530,9 +530,9 @@
           "instrumentationLibrary": {},
           "spans": [
             {
-              "traceId": "AAAAAAAAAABguiq7RPE+rg==",
-              "spanId": "OY8PIaPbma4=",
-              "parentSpanId": "GVdnHErYWoo=",
+              "traceId": "000000000000000060ba2abb44f13eae",
+              "spanId": "398f0f21a3db99ae",
+              "parentSpanId": "1957671c4ad85a8a",
               "name": "HTTP GET",
               "kind": "SPAN_KIND_CLIENT",
               "startTimeUnixNano": "1627471657251445000",
@@ -775,9 +775,9 @@
           "instrumentationLibrary": {},
           "spans": [
             {
-              "traceId": "AAAAAAAAAABguiq7RPE+rg==",
-              "spanId": "WgdmnUQaoyY=",
-              "parentSpanId": "VzhhbsaOedI=",
+              "traceId": "000000000000000060ba2abb44f13eae",
+              "spanId": "5a07669d441aa326",
+              "parentSpanId": "5738616ec68e79d2",
               "name": "HTTP GET - root",
               "kind": "SPAN_KIND_SERVER",
               "startTimeUnixNano": "1627471657251228000",
diff --git a/public/app/plugins/datasource/tempo/resultTransformer.ts b/public/app/plugins/datasource/tempo/resultTransformer.ts
index 403787af5fb..38eefebadd6 100644
--- a/public/app/plugins/datasource/tempo/resultTransformer.ts
+++ b/public/app/plugins/datasource/tempo/resultTransformer.ts
@@ -116,29 +116,6 @@ export function transformTraceList(
   return response;
 }
 
-// Don't forget to change the backend code when the id representation changed
-function transformBase64IDToHexString(base64: string) {
-  const raw = atob(base64);
-  let result = '';
-  for (let i = 0; i < raw.length; i++) {
-    const hex = raw.charCodeAt(i).toString(16);
-    result += hex.length === 2 ? hex : '0' + hex;
-  }
-
-  return result.length > 16 ? result.slice(16) : result;
-}
-
-function transformHexStringToBase64ID(hex: string) {
-  const hexArray = hex.match(/\w{2}/g) || [];
-  return btoa(
-    hexArray
-      .map(function (a) {
-        return String.fromCharCode(parseInt(a, 16));
-      })
-      .join('')
-  );
-}
-
 function getAttributeValue(value: collectorTypes.opentelemetryProto.common.v1.AnyValue): any {
   if (value.stringValue) {
     return value.stringValue;
@@ -297,9 +274,9 @@ export function transformFromOTLP(
       for (const librarySpan of data.instrumentationLibrarySpans) {
         for (const span of librarySpan.spans) {
           frame.add({
-            traceID: transformBase64IDToHexString(span.traceId),
-            spanID: transformBase64IDToHexString(span.spanId),
-            parentSpanID: transformBase64IDToHexString(span.parentSpanId || ''),
+            traceID: span.traceId.length > 16 ? span.traceId.slice(16) : span.traceId,
+            spanID: span.spanId,
+            parentSpanID: span.parentSpanId || '',
             operationName: span.name || '',
             serviceName,
             serviceTags,
@@ -376,10 +353,10 @@ export function transformToOTLP(data: MutableDataFrame): {
     }
 
     result.batches[batchIndex].instrumentationLibrarySpans[0].spans.push({
-      traceId: transformHexStringToBase64ID(span.traceID.padStart(32, '0')),
-      spanId: transformHexStringToBase64ID(span.spanID),
+      traceId: span.traceID.padStart(32, '0'),
+      spanId: span.spanID,
+      parentSpanId: span.parentSpanID || '',
       traceState: '',
-      parentSpanId: transformHexStringToBase64ID(span.parentSpanID || ''),
       name: span.operationName,
       kind: getOTLPSpanKind(span.tags) as any,
       startTimeUnixNano: span.startTime * 1000000,
diff --git a/public/app/plugins/datasource/tempo/testResponse.ts b/public/app/plugins/datasource/tempo/testResponse.ts
index 1aa1bf0a781..5d91c5ceca7 100644
--- a/public/app/plugins/datasource/tempo/testResponse.ts
+++ b/public/app/plugins/datasource/tempo/testResponse.ts
@@ -2137,9 +2137,9 @@ export const otlpResponse = {
         {
           spans: [
             {
-              traceId: 'AAAAAAAAAABguiq7RPE+rg==',
-              spanId: 'cmteMBAvwNA=',
-              parentSpanId: 'OY8PIaPbma4=',
+              traceId: '000000000000000060ba2abb44f13eae',
+              spanId: '726b5e30102fc0d0',
+              parentSpanId: '398f0f21a3db99ae',
               name: 'HTTP GET - root',
               kind: 'SPAN_KIND_CLIENT',
               startTimeUnixNano: 1627471657255809000,