diff --git a/packages/core/tracing/sandbox/App.vue b/packages/core/tracing/sandbox/App.vue
index 58dc016d60..f27acf9d27 100644
--- a/packages/core/tracing/sandbox/App.vue
+++ b/packages/core/tracing/sandbox/App.vue
@@ -6,3 +6,8 @@
   </div>
 </template>
 
+<style lang="scss" scoped>
+body {
+  overscroll-behavior-y: none;
+}
+</style>
diff --git a/packages/core/tracing/sandbox/fixtures/trace-batches.json b/packages/core/tracing/sandbox/fixtures/trace-batches.json
index 369770bd43..30f943e2d7 100644
--- a/packages/core/tracing/sandbox/fixtures/trace-batches.json
+++ b/packages/core/tracing/sandbox/fixtures/trace-batches.json
@@ -1 +1 @@
-{"batches":[{"resource":{"attributes":[{"key":"session.id","value":{"stringValue":"0193cf2f-943d-793a-819b-04ccf30948f3"}},{"key":"service.instance.id","value":{"stringValue":"4eb9bfce-d4fb-429d-b5d4-f37be1dfd680"}},{"key":"service.version","value":{"stringValue":"3.10.0.0"}},{"key":"service.name","value":{"stringValue":"kong"}}]},"scopeSpans":[{"scope":{"name":"kong-internal","version":"0.1.0"},"spans":[{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"jaw9O51b7eQ=","name":"kong","kind":"SPAN_KIND_SERVER","startTimeUnixNano":"1734347832732999936","endTimeUnixNano":"1734347833661143808","attributes":[{"key":"url.full","value":{"stringValue":"http://localhost/foo/anything"}},{"key":"http.response.status_code","value":{"doubleValue":200}},{"key":"network.peer.address","value":{"stringValue":"34.226.108.155"}},{"key":"proxy.kong.latency.upstream.ttfb","value":{"doubleValue":568}},{"key":"proxy.kong.latency.upstream.read_response_duration","value":{"doubleValue":1}},{"key":"proxy.kong.latency.total","value":{"doubleValue":927}},{"key":"proxy.kong.latency.redis.total_io","value":{"doubleValue":0}},{"key":"proxy.kong.latency.tcpsock.total_io","value":{"doubleValue":0}},{"key":"http.request.size","value":{"stringValue":"280"}},{"key":"proxy.kong.request.id","value":{"stringValue":"0f9fc8071dbf62141d8f136bbb4cdd39"}},{"key":"client.address","value":{"stringValue":"127.0.0.1"}},{"key":"network.protocol.name","value":{"stringValue":"http"}},{"key":"proxy.kong.service.id","value":{"stringValue":"6ac56e3e-6f02-417b-b683-3d8bcfa7a839"}},{"key":"network.peer.port","value":{"doubleValue":443}},{"key":"network.protocol.version","value":{"stringValue":"1.1"}},{"key":"proxy.kong.route.id","value":{"stringValue":"34627a0f-d67f-4aff-b5db-462e0d4ca1f3"}},{"key":"client.port","value":{"stringValue":"51632"}},{"key":"proxy.kong.upstream.id","value":{"stringValue":"060cc439-1fa0-4711-a87b-7721d71c4eb4"}},{"key":"http.request.method","value":{"stringValue":"POST"}},{"key":"proxy.kong.upstream.addr","value":{"stringValue":"34.226.108.155"}},{"key":"proxy.kong.upstream.host","value":{"stringValue":"34.226.108.155:443"}},{"key":"http.request.header.host","value":{"stringValue":"localhost"}},{"key":"proxy.kong.target.id","value":{"stringValue":"4fa11aba-7e12-48ff-9bc8-827db4939301"}},{"key":"http.route","value":{"stringValue":"/foo"}},{"key":"url.scheme","value":{"stringValue":"http"}}],"status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"eU4w1buq/ME=","parentSpanId":"jaw9O51b7eQ=","name":"kong.read_client_http_headers","kind":"SPAN_KIND_SERVER","startTimeUnixNano":"1734347832732999936","endTimeUnixNano":"1734347832733523456","attributes":[{"key":"proxy.kong.http.request.headers.count","value":{"doubleValue":8}},{"key":"proxy.kong.http.request.headers.size","value":{"doubleValue":195}}],"status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"Pq8AHC6l7/k=","parentSpanId":"jaw9O51b7eQ=","name":"kong.phase.rewrite","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734347832733757440","endTimeUnixNano":"1734347832734179072","status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"jB8u1zr5ziA=","parentSpanId":"jaw9O51b7eQ=","name":"kong.phase.access","kind":"SPAN_KIND_INTERNAL","endTimeUnixNano":"1734347832734516480","status":{},"events":[{"timeUnixNano":"1730397283960413400","attributes":[{"key":"message","value":{"stringValue":"exception"}},{"key":"exception.message","value":{"stringValue":"./kong/plugins/request-transformer/handler.lua:20: attempt to index global 'some_nil_variable' (a nil value)"}}],"droppedAttributesCount":0,"name":""}]},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"jB8u1zr5zig=","parentSpanId":"jaw9O51b7eQ=","name":"kong.phase.access","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734347832734516480","status":{},"events":[{"timeUnixNano":"1730397283960413400","attributes":[{"key":"message","value":{"stringValue":"exception"}},{"key":"exception.message","value":{"stringValue":"./kong/plugins/request-transformer/handler.lua:20: attempt to index global 'some_nil_variable' (a nil value)"}}],"droppedAttributesCount":0,"name":""}]},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"kvqrSQxXvCg=","parentSpanId":"jB8u1zr5zig=","name":"kong.router","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734347832734629632","endTimeUnixNano":"1734347832734826752","attributes":[{"key":"proxy.kong.router.matched","value":{"boolValue":true}},{"key":"proxy.kong.service.id","value":{"stringValue":"6ac56e3e-6f02-417b-b683-3d8bcfa7a839"}},{"key":"proxy.kong.route.id","value":{"stringValue":"34627a0f-d67f-4aff-b5db-462e0d4ca1f3"}},{"key":"proxy.kong.router.upstream_path","value":{"stringValue":"/"}}],"status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"Cur1GqHIG/8=","parentSpanId":"jB8u1zr5zig=","name":"kong.phase.access","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734347832735258880","endTimeUnixNano":"1734347832736532224","status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"TltE6SKF1Gw=","parentSpanId":"Cur1GqHIG/8=","name":"kong.router","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734347832735565312","endTimeUnixNano":"1734347832735602944","attributes":[{"key":"proxy.kong.router.matched","value":{"boolValue":true}},{"key":"proxy.kong.service.id","value":{"stringValue":"6ac56e3e-6f02-417b-b683-3d8bcfa7a839"}},{"key":"proxy.kong.route.id","value":{"stringValue":"34627a0f-d67f-4aff-b5db-462e0d4ca1f3"}},{"key":"proxy.kong.router.upstream_path","value":{"stringValue":"/"}}],"status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"VWA3UYCXUxs=","parentSpanId":"Cur1GqHIG/8=","name":"kong.access.plugin.acme","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734347832735847168","endTimeUnixNano":"1734347832735917568","attributes":[{"key":"proxy.kong.plugin.id","value":{"stringValue":"a34e6c20-3f98-4841-9858-3ca8a09095b7"}}],"status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"CfAKAQA8cJI=","parentSpanId":"Cur1GqHIG/8=","name":"kong.access.plugin.request-transformer","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734347832736018176","endTimeUnixNano":"1734347832736438528","attributes":[{"key":"proxy.kong.plugin.id","value":{"stringValue":"bdcb19c8-3dca-4ea9-8a0e-679fb50a3138"}}],"status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"9CpiF5ZqCak=","parentSpanId":"CfAKAQA8cJI=","name":"kong.read_client_http_body","kind":"SPAN_KIND_SERVER","startTimeUnixNano":"1734347832736348160","endTimeUnixNano":"1734347832736356096","status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"YSaVrPJeALo=","parentSpanId":"CfAKAQA8cJI=","name":"kong.read_client_http_body","kind":"SPAN_KIND_SERVER","startTimeUnixNano":"1734347832736419840","endTimeUnixNano":"1734347832736424960","status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"cjHPVXNFEgI=","parentSpanId":"jB8u1zr5zig=","name":"kong.read_client_http_body","kind":"SPAN_KIND_SERVER","startTimeUnixNano":"1734347832736904448","endTimeUnixNano":"1734347832736909312","status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"mziYy3y5MYI=","parentSpanId":"jB8u1zr5zig=","name":"kong.phase.header_filter","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734347833659182848","endTimeUnixNano":"1734347833659495168","status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"JAhrk1KDjxo=","parentSpanId":"jB8u1zr5zig=","name":"kong.phase.body_filter","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734347833659626752","endTimeUnixNano":"1734347833660816128","status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"izyzMU3IxCE=","parentSpanId":"jaw9O51b7eQ=","name":"kong.upstream.selection","kind":"SPAN_KIND_CLIENT","startTimeUnixNano":"1734347832737147392","endTimeUnixNano":"1734347833091174400","attributes":[{"key":"proxy.kong.upstream.lb_algorithm","value":{"stringValue":"round-robin"}},{"key":"try_count","value":{"doubleValue":1}},{"key":"proxy.kong.upstream.id","value":{"stringValue":"060cc439-1fa0-4711-a87b-7721d71c4eb4"}}],"status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"1pq1U0wCeVY=","parentSpanId":"izyzMU3IxCE=","name":"kong.upstream.try_select","kind":"SPAN_KIND_CLIENT","startTimeUnixNano":"1734347832737147392","endTimeUnixNano":"1734347833091174400","attributes":[{"key":"try_count","value":{"doubleValue":1}},{"key":"keepalive","value":{"boolValue":true}},{"key":"network.peer.name","value":{"stringValue":"httpbin.org"}},{"key":"network.peer.address","value":{"stringValue":"34.226.108.155"}},{"key":"proxy.kong.target.id","value":{"stringValue":"4fa11aba-7e12-48ff-9bc8-827db4939301"}},{"key":"network.peer.port","value":{"doubleValue":443}},{"key":"proxy.kong.latency.upstream.connect_duration","value":{"doubleValue":354}}],"status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"pNj/Jg8tINw=","parentSpanId":"jaw9O51b7eQ=","name":"kong.upstream.ttfb","kind":"SPAN_KIND_CLIENT","startTimeUnixNano":"1734347833091174400","endTimeUnixNano":"1734347833659174400","status":{}},{"traceId":"NIyrU6/7p6ncDoct0nEbgA==","spanId":"7peBX+7x154=","parentSpanId":"jaw9O51b7eQ=","name":"kong.upstream.read_response","kind":"SPAN_KIND_CLIENT","startTimeUnixNano":"1734347833659174400","endTimeUnixNano":"1734347833660174336","status":{}}]}]}]}
+{"batches":[{"resource":{"attributes":[{"key":"service.instance.id","value":{"stringValue":"5445b0c8-417b-47a0-b747-c7565e925795"}},{"key":"service.version","value":{"stringValue":"3.10.0.0"}},{"key":"session.id","value":{"stringValue":"0193f2d3-3c27-72c1-8c98-968e21c0aee1"}},{"key":"service.name","value":{"stringValue":"kong"}}]},"scopeSpans":[{"scope":{"name":"kong-internal","version":"0.1.0"},"spans":[{"traceId":"OO2ACWBe0hJbXNOOKR4m6A==","spanId":"XGRJrQWeLiY=","name":"kong","kind":"SPAN_KIND_SERVER","startTimeUnixNano":"1734945777892000000","endTimeUnixNano":"1734945778545911040","attributes":[{"key":"proxy.kong.route.id","value":{"stringValue":"d4783d0e-f7bd-41e5-b676-4bea060a4482"}},{"key":"proxy.kong.consumer.id","value":{"stringValue":"26c55ffc-ff1e-44ee-8c1d-a57d0efed5bb"}},{"key":"proxy.kong.upstream.id","value":{"stringValue":"unknown"}},{"key":"proxy.kong.latency.3p.redis.total_io","value":{"doubleValue":0}},{"key":"proxy.kong.upstream.addr","value":{"stringValue":"98.85.100.80"}},{"key":"proxy.kong.upstream.host","value":{"stringValue":"98.85.100.80:80"}},{"key":"proxy.kong.latency.client","value":{"doubleValue":1.230848}},{"key":"proxy.kong.target.id","value":{"stringValue":"unknown"}},{"key":"http.request.header.host","value":{"stringValue":"localhost"}},{"key":"proxy.kong.latency.upstream","value":{"doubleValue":553.02685546875}},{"key":"proxy.kong.request.id","value":{"stringValue":"15016151c88a7d6efdd9f70211390e00"}},{"key":"http.request.method","value":{"stringValue":"GET"}},{"key":"proxy.kong.latency.3p.total_io","value":{"doubleValue":97.96864}},{"key":"url.scheme","value":{"stringValue":"http"}},{"key":"http.request.size","value":{"stringValue":"177"}},{"key":"proxy.kong.latency.upstream.ttfb","value":{"doubleValue":273}},{"key":"network.protocol.version","value":{"stringValue":"1.1"}},{"key":"network.protocol.name","value":{"stringValue":"http"}},{"key":"proxy.kong.latency.3p.http_client.total_io","value":{"doubleValue":0}},{"key":"network.peer.address","value":{"stringValue":"98.85.100.80"}},{"key":"http.response.status_code","value":{"doubleValue":200}},{"key":"proxy.kong.latency.internal","value":{"doubleValue":0.7736565312499124}},{"key":"proxy.kong.latency.total","value":{"doubleValue":653}},{"key":"url.full","value":{"stringValue":"http://localhost/headers"}},{"key":"proxy.kong.latency.3p.tcpsock.total_io","value":{"doubleValue":0}},{"key":"http.route","value":{"stringValue":"/"}},{"key":"proxy.kong.latency.3p.dns.total_io","value":{"doubleValue":97.96864}},{"key":"client.port","value":{"stringValue":"54336"}},{"key":"proxy.kong.latency.upstream.read_response_duration","value":{"doubleValue":42}},{"key":"client.address","value":{"stringValue":"10.88.0.3"}},{"key":"network.peer.port","value":{"doubleValue":80}},{"key":"proxy.kong.service.id","value":{"stringValue":"1e4a129d-fc17-454f-91ae-e9e337d91ef7"}}],"status":{}},{"traceId":"OO2ACWBe0hJbXNOOKR4m6A==","spanId":"aacSUwadpqE=","parentSpanId":"XGRJrQWeLiY=","name":"kong.read_client_http_headers","kind":"SPAN_KIND_SERVER","startTimeUnixNano":"1734945777892000000","endTimeUnixNano":"1734945777892954368","attributes":[{"key":"proxy.kong.http.request.headers.count","value":{"doubleValue":7}},{"key":"proxy.kong.http.request.headers.size","value":{"doubleValue":154}}],"status":{}},{"traceId":"OO2ACWBe0hJbXNOOKR4m6A==","spanId":"PEs/Bv4uaTI=","parentSpanId":"XGRJrQWeLiY=","name":"kong.phase.rewrite","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734945777892962048","endTimeUnixNano":"1734945777893030656","status":{}},{"traceId":"OO2ACWBe0hJbXNOOKR4m6A==","spanId":"7pDGDX3R5Oo=","parentSpanId":"XGRJrQWeLiY=","name":"kong.phase.access","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734945777893038080","endTimeUnixNano":"1734945777992456960","status":{}},{"traceId":"OO2ACWBe0hJbXNOOKR4m6A==","spanId":"SjF7n5NjpnM=","parentSpanId":"7pDGDX3R5Oo=","name":"kong.router","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734945777893170176","endTimeUnixNano":"1734945777893306368","attributes":[{"key":"proxy.kong.router.matched","value":{"boolValue":true}},{"key":"proxy.kong.router.upstream_path","value":{"stringValue":"/"}},{"key":"proxy.kong.route.id","value":{"stringValue":"d4783d0e-f7bd-41e5-b676-4bea060a4482"}},{"key":"proxy.kong.service.id","value":{"stringValue":"1e4a129d-fc17-454f-91ae-e9e337d91ef7"}}],"status":{}},{"traceId":"OO2ACWBe0hJbXNOOKR4m6A==","spanId":"IassFhpADd4=","parentSpanId":"7pDGDX3R5Oo=","name":"kong.access.plugin.basic-auth","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734945777893407232","endTimeUnixNano":"1734945777893959680","attributes":[{"key":"proxy.kong.plugin.id","value":{"stringValue":"9159d5cf-a5c2-4b52-9b7b-ef8364738bd5"}}],"status":{}},{"traceId":"OO2ACWBe0hJbXNOOKR4m6A==","spanId":"+SHWMqgXcNI=","parentSpanId":"7pDGDX3R5Oo=","name":"kong.access.plugin.rate-limiting","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734945777893981696","endTimeUnixNano":"1734945777894172928","attributes":[{"key":"proxy.kong.plugin.id","value":{"stringValue":"6def3c80-02b6-4c06-9cc8-aa4b6054083d"}}],"status":{}},{"traceId":"OO2ACWBe0hJbXNOOKR4m6A==","spanId":"QS939BibQew=","parentSpanId":"7pDGDX3R5Oo=","name":"kong.access.plugin.request-transformer","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734945777894209280","endTimeUnixNano":"1734945777894420992","attributes":[{"key":"proxy.kong.plugin.id","value":{"stringValue":"a20e552b-a9ec-442e-8112-519fd4cba2cd"}}],"status":{}},{"traceId":"OO2ACWBe0hJbXNOOKR4m6A==","spanId":"ouLjxrSPI+U=","parentSpanId":"7pDGDX3R5Oo=","name":"kong.dns","kind":"SPAN_KIND_CLIENT","startTimeUnixNano":"1734945777894442496","endTimeUnixNano":"1734945777992443648","attributes":[{"key":"proxy.kong.dns.record.ip","value":{"stringValue":"98.85.100.80"}},{"key":"proxy.kong.dns.record.port","value":{"doubleValue":80}},{"key":"proxy.kong.dns.tries","value":{"arrayValue":{"values":[{"kvlistValue":{"values":[{"key":"msg","value":{"arrayValue":{"values":[{"stringValue":"cache-miss"}]}}},{"key":"qname","value":{"stringValue":"(short)httpbin.org"}}]}},{"kvlistValue":{"values":[{"key":"qtype","value":{"doubleValue":33}},{"key":"msg","value":{"arrayValue":{"values":[{"stringValue":"cache-miss"},{"stringValue":"querying"},{"stringValue":"dns server error: 3 name error"}]}}},{"key":"qname","value":{"stringValue":"httpbin.org"}}]}},{"kvlistValue":{"values":[{"key":"qtype","value":{"doubleValue":1}},{"key":"msg","value":{"arrayValue":{"values":[{"stringValue":"cache-miss"},{"stringValue":"querying"}]}}},{"key":"qname","value":{"stringValue":"httpbin.org"}}]}}]}}},{"key":"proxy.kong.dns.record.domain","value":{"stringValue":"httpbin.org"}}],"status":{}},{"traceId":"OO2ACWBe0hJbXNOOKR4m6A==","spanId":"VhrEVU4LHpU=","parentSpanId":"XGRJrQWeLiY=","name":"kong.read_client_http_body","kind":"SPAN_KIND_SERVER","startTimeUnixNano":"1734945777992481536","endTimeUnixNano":"1734945777992624128","status":{}},{"traceId":"OO2ACWBe0hJbXNOOKR4m6A==","spanId":"9lvYW/eP63k=","parentSpanId":"XGRJrQWeLiY=","name":"kong.phase.header_filter","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734945778503905792","endTimeUnixNano":"1734945778504432640","status":{}},{"traceId":"OO2ACWBe0hJbXNOOKR4m6A==","spanId":"QqQCNGmyUrQ=","parentSpanId":"XGRJrQWeLiY=","name":"kong.phase.body_filter","kind":"SPAN_KIND_INTERNAL","startTimeUnixNano":"1734945778545603072","endTimeUnixNano":"1734945778545764864","status":{}},{"traceId":"OO2ACWBe0hJbXNOOKR4m6A==","spanId":"UO4zpoqc014=","parentSpanId":"XGRJrQWeLiY=","name":"kong.upstream.selection","kind":"SPAN_KIND_CLIENT","startTimeUnixNano":"1734945777992626432","endTimeUnixNano":"1734945778230653440","attributes":[{"key":"proxy.kong.upstream.id","value":{"stringValue":"unknown"}},{"key":"try_count","value":{"doubleValue":1}},{"key":"proxy.kong.upstream.lb_algorithm","value":{"stringValue":"unknown"}}],"status":{}},{"traceId":"OO2ACWBe0hJbXNOOKR4m6A==","spanId":"5r+nlh8z2Os=","parentSpanId":"UO4zpoqc014=","name":"kong.upstream.try_select","kind":"SPAN_KIND_CLIENT","startTimeUnixNano":"1734945777992626432","endTimeUnixNano":"1734945778230653440","attributes":[{"key":"network.peer.port","value":{"doubleValue":80}},{"key":"try_count","value":{"doubleValue":1}},{"key":"network.peer.address","value":{"stringValue":"98.85.100.80"}},{"key":"proxy.kong.latency.upstream.connect_duration","value":{"doubleValue":238}},{"key":"keepalive","value":{"boolValue":true}},{"key":"network.peer.name","value":{"stringValue":"httpbin.org"}},{"key":"proxy.kong.target.id","value":{"stringValue":"unknown"}}],"status":{}},{"traceId":"OO2ACWBe0hJbXNOOKR4m6A==","spanId":"NkBDHdQ8Prk=","parentSpanId":"XGRJrQWeLiY=","name":"kong.upstream.ttfb","kind":"SPAN_KIND_CLIENT","startTimeUnixNano":"1734945778230653440","endTimeUnixNano":"1734945778503653376","status":{}},{"traceId":"OO2ACWBe0hJbXNOOKR4m6A==","spanId":"Tx2fk5OVCb4=","parentSpanId":"XGRJrQWeLiY=","name":"kong.upstream.read_response","kind":"SPAN_KIND_CLIENT","startTimeUnixNano":"1734945778503653376","endTimeUnixNano":"1734945778545653248","status":{}},{"traceId":"OO2ACWBe0hJbXNOOKR4m6A==","spanId":"bcQ4HvPhEGo=","parentSpanId":"XGRJrQWeLiY=","name":"kong.wait_for_client_read","kind":"SPAN_KIND_SERVER","startTimeUnixNano":"1734945778545764864","endTimeUnixNano":"1734945778545898752","status":{}}]}]}]}
diff --git a/packages/core/tracing/src/components/trace-viewer/SpanAttribute.vue b/packages/core/tracing/src/components/trace-viewer/SpanAttribute.vue
index a20470df3f..fb6318bcc0 100644
--- a/packages/core/tracing/src/components/trace-viewer/SpanAttribute.vue
+++ b/packages/core/tracing/src/components/trace-viewer/SpanAttribute.vue
@@ -30,7 +30,7 @@
 import { ConfigCardItem, ConfigurationSchemaType, EntityLink, type EntityLinkData } from '@kong-ui-public/entities-shared'
 import { computed, inject, onWatcherCleanup, shallowRef, watch } from 'vue'
 import composables from '../../composables'
-import { SPAN_ATTRIBUTE_VALUE_UNKNOWN, SpanAttributeKeys, TRACE_VIEWER_CONFIG } from '../../constants'
+import { SPAN_ATTRIBUTE_KEYS, SPAN_ATTRIBUTE_VALUE_UNKNOWN, TRACE_VIEWER_CONFIG } from '../../constants'
 import type { EntityRequest, IKeyValue, SpanNode, TraceViewerConfig } from '../../types'
 import { getPhaseAndPlugin, unwrapAnyValue } from '../../utils'
 
@@ -75,12 +75,12 @@ const formattedValue = computed(() => {
 // A map of keys of attributes whose values are IDs of entities (services, routes, consumers, etc.)
 // to their corresponding entities
 const ATTRIBUTE_KEY_TO_ENTITY: Record<string, string> = {
-  [SpanAttributeKeys.KONG_SERVICE_ID]: 'services',
-  [SpanAttributeKeys.KONG_ROUTE_ID]: 'routes',
-  [SpanAttributeKeys.KONG_CONSUMER_ID]: 'consumers',
-  [SpanAttributeKeys.KONG_PLUGIN_ID]: 'plugins',
-  [SpanAttributeKeys.KONG_TARGET_ID]: 'targets',
-  [SpanAttributeKeys.KONG_UPSTREAM_ID]: 'upstreams',
+  [SPAN_ATTRIBUTE_KEYS.KONG_SERVICE_ID]: 'services',
+  [SPAN_ATTRIBUTE_KEYS.KONG_ROUTE_ID]: 'routes',
+  [SPAN_ATTRIBUTE_KEYS.KONG_CONSUMER_ID]: 'consumers',
+  [SPAN_ATTRIBUTE_KEYS.KONG_PLUGIN_ID]: 'plugins',
+  [SPAN_ATTRIBUTE_KEYS.KONG_TARGET_ID]: 'targets',
+  [SPAN_ATTRIBUTE_KEYS.KONG_UPSTREAM_ID]: 'upstreams',
 }
 
 // Let's only make the attributes listed above copyable, for now.
@@ -110,7 +110,7 @@ const entityRequest = computed(() => {
   }
 
   switch (props.keyValue.key) {
-    case SpanAttributeKeys.KONG_PLUGIN_ID: {
+    case SPAN_ATTRIBUTE_KEYS.KONG_PLUGIN_ID: {
       // We will need to parse the plugin name from the span name
       request.plugin = getPhaseAndPlugin(props.span.name)?.plugin
       if (!request.plugin) {
@@ -120,8 +120,8 @@ const entityRequest = computed(() => {
       }
       break
     }
-    case SpanAttributeKeys.KONG_TARGET_ID: {
-      const upstreamIdAttrValue = props.span.attributes?.find((attr) => attr.key === SpanAttributeKeys.KONG_UPSTREAM_ID)?.value
+    case SPAN_ATTRIBUTE_KEYS.KONG_TARGET_ID: {
+      const upstreamIdAttrValue = props.span.attributes?.find((attr) => attr.key === SPAN_ATTRIBUTE_KEYS.KONG_UPSTREAM_ID)?.value
       const upstreamId = upstreamIdAttrValue && unwrapAnyValue<string>(upstreamIdAttrValue)
       if (!upstreamId) {
         console.warn(`Failed to look up the upstream ID for the upstream target in the span "${props.span.name}"`)
diff --git a/packages/core/tracing/src/components/trace-viewer/SpanAttributeTable.vue b/packages/core/tracing/src/components/trace-viewer/SpanAttributeTable.vue
index e605ebf032..a3e121333b 100644
--- a/packages/core/tracing/src/components/trace-viewer/SpanAttributeTable.vue
+++ b/packages/core/tracing/src/components/trace-viewer/SpanAttributeTable.vue
@@ -13,9 +13,9 @@
         :span="span"
       />
 
-      <template v-if="span.attributes">
+      <template v-if="filteredAttributes.length > 0">
         <SpanAttribute
-          v-for="keyValue in span.attributes"
+          v-for="keyValue in filteredAttributes"
           :key="keyValue.key"
           :key-value="keyValue"
           :span="span"
@@ -28,7 +28,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import composables from '../../composables'
-import { SpanAttributeKeys, WATERFALL_ROW_PADDING_X } from '../../constants'
+import { SPAN_ATTR_KEY_KONG_LATENCY_PREFIX, WATERFALL_ROW_PADDING_X } from '../../constants'
 import type { IKeyValue, SpanNode } from '../../types'
 import { formatNanoDateTimeString } from '../../utils'
 import SpanAttribute from './SpanAttribute.vue'
@@ -40,14 +40,16 @@ const props = defineProps<{ span: SpanNode['span'] }>()
 const internalAttributes = computed<(IKeyValue & { label?: string })[]>(() => {
   return [
     {
-      key: SpanAttributeKeys._INTERNAL_START_TIME,
+      // Hardcoding the key here as it's not used elsewhere
+      key: '_internal.start_time',
       value: {
         stringValue: formatNanoDateTimeString(props.span.startTimeUnixNano),
       },
       label: t('span_attributes.labels.start_time'),
     },
     {
-      key: SpanAttributeKeys._INTERNAL_END_TIME,
+      // Hardcoding the key here as it's not used elsewhere
+      key: '_internal.end_time',
       value: {
         stringValue: formatNanoDateTimeString(props.span.endTimeUnixNano),
       },
@@ -55,6 +57,15 @@ const internalAttributes = computed<(IKeyValue & { label?: string })[]>(() => {
     },
   ]
 })
+
+const filteredAttributes = computed(() => {
+  if (!props.span.attributes) {
+    return []
+  }
+
+  return props.span.attributes
+    .filter((attr) => !attr.key.startsWith(SPAN_ATTR_KEY_KONG_LATENCY_PREFIX))
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/core/tracing/src/components/trace-viewer/SpanDescription.vue b/packages/core/tracing/src/components/trace-viewer/SpanBasicInfo.vue
similarity index 55%
rename from packages/core/tracing/src/components/trace-viewer/SpanDescription.vue
rename to packages/core/tracing/src/components/trace-viewer/SpanBasicInfo.vue
index 96675a3c85..25dacad457 100644
--- a/packages/core/tracing/src/components/trace-viewer/SpanDescription.vue
+++ b/packages/core/tracing/src/components/trace-viewer/SpanBasicInfo.vue
@@ -1,13 +1,22 @@
 <template>
-  <KCard class="span-description-card">
-    <p class="span-description">
-      <span class="name">
-        {{ span.name }}:
-      </span>
-      <span :class="['description', { 'not-available': !description }]">
-        {{ description || t('trace_viewer.no_span_description') }}
-      </span>
-    </p>
+  <KCard class="span-basic-info">
+    <div class="rows">
+      <div class="label">
+        {{ t('trace_viewer.span_basic_info.labels.name') }}
+      </div>
+      <div class="value">
+        {{ span.name }}
+      </div>
+
+      <template v-if="description">
+        <div class="label">
+          {{ t('trace_viewer.span_basic_info.labels.description') }}
+        </div>
+        <div class="value">
+          {{ description }}
+        </div>
+      </template>
+    </div>
 
     <KExternalLink
       v-if="description"
@@ -34,29 +43,28 @@ const description = computed(() => {
   const pluginSpan = getPhaseAndPlugin(props.span.name)
   // We will use general description for plugin spans that exactly match `kong.(phase).plugin.(plugin)`.
   const subI18nKey = pluginSpan && !pluginSpan.suffix ? `kong.${pluginSpan.phase}.plugin` : props.span.name
-  const i18nKey = `trace_viewer.span_descriptions.${subI18nKey}`
+  const i18nKey = `trace_viewer.span_basic_info.descriptions.${subI18nKey}.$`
   return te(i18nKey as any) ? t(i18nKey as any) : undefined
 })
 </script>
 
 <style lang="scss" scoped>
-.span-description-card {
-  padding: $kui-space-50;
-}
+.span-basic-info {
+  padding: $kui-space-60;
 
-.span-description {
-  margin: 0;
-
-  .name {
-    font-weight: $kui-font-weight-semibold;
-  }
+  .rows {
+    display: grid;
+    gap: $kui-space-20 $kui-space-40;
+    grid-template-columns: min-content auto;
 
-  .description.not-available {
-    font-style: italic;
+    .label {
+      font-weight: $kui-font-weight-semibold;
+    }
   }
 }
 
 .docs-link {
   align-self: flex-end;
+  margin-top: $kui-space-40;
 }
 </style>
diff --git a/packages/core/tracing/src/components/trace-viewer/SpanEvent.vue b/packages/core/tracing/src/components/trace-viewer/SpanEvent.vue
index 1db558b9f1..5872f09446 100644
--- a/packages/core/tracing/src/components/trace-viewer/SpanEvent.vue
+++ b/packages/core/tracing/src/components/trace-viewer/SpanEvent.vue
@@ -12,7 +12,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import composables from '../../composables'
-import { SPAN_EVENT_ATTRIBUTES } from '../../constants'
+import { SPAN_EVENT_ATTRIBUTE_KEYS } from '../../constants'
 import type { Event } from '../../types'
 
 const { i18n: { t } } = composables.useI18n()
@@ -22,7 +22,7 @@ const props = defineProps<{ event: Event }>()
 // We only have exception-typed events for now
 const exceptionMessage = computed(() =>
   props.event.attributes?.find(
-    (keyValue) => keyValue.key === SPAN_EVENT_ATTRIBUTES.EXCEPTION_MESSAGE.name,
+    (keyValue) => keyValue.key === SPAN_EVENT_ATTRIBUTE_KEYS.EXCEPTION_MESSAGE,
   )?.value.stringValue,
 )
 </script>
diff --git a/packages/core/tracing/src/components/trace-viewer/SpanLatencyTable.vue b/packages/core/tracing/src/components/trace-viewer/SpanLatencyTable.vue
new file mode 100644
index 0000000000..f53da1d0f9
--- /dev/null
+++ b/packages/core/tracing/src/components/trace-viewer/SpanLatencyTable.vue
@@ -0,0 +1,91 @@
+<template>
+  <div
+    v-if="latencies.length > 0"
+    class="span-latency-table"
+  >
+    <div class="title">
+      {{ t('trace_viewer.latency.section_title') }}
+    </div>
+
+    <div class="latencies">
+      <template
+        v-for="latency in latencies"
+        :key="latency.key"
+      >
+        <ConfigCardItem
+          :item="{
+            type: ConfigurationSchemaType.Text,
+            key: latency.key,
+            label: latency.labelKey ? t(latency.labelKey) : latency.key,
+            value: formatLatency(latency.milliseconds),
+          }"
+        />
+
+        <template v-if="Array.isArray(latency.children) && latency.children.length > 0">
+          <ConfigCardItem
+            v-for="child in latency.children"
+            :key="child.key"
+            class="latency-nested"
+            :item="{
+              type: ConfigurationSchemaType.Text,
+              key: child.key,
+              label: child.labelKey ? t(child.labelKey) : child.key,
+              value: formatLatency(child.milliseconds),
+            }"
+          />
+        </template>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ConfigCardItem, ConfigurationSchemaType } from '@kong-ui-public/entities-shared'
+import { computed } from 'vue'
+import composables from '../../composables'
+import { WATERFALL_ROW_PADDING_X } from '../../constants'
+import type { SpanNode } from '../../types'
+import { formatLatency, toSpanLatencies } from '../../utils'
+
+const { i18n: { t } } = composables.useI18n()
+
+const props = defineProps<{ span: SpanNode['span'] }>()
+
+const latencies = computed(() => toSpanLatencies(props.span.attributes))
+</script>
+
+<style lang="scss" scoped>
+.span-latency-table {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+
+  .title {
+    background-color: $kui-color-background-neutral-weakest;
+    border-bottom: 1px solid $kui-color-border-neutral-weaker;
+    font-size: $kui-font-size-30;
+    font-weight: $kui-font-weight-semibold;
+    padding: $kui-space-60 v-bind(WATERFALL_ROW_PADDING_X);
+    width: 100%;
+  }
+
+  .latencies {
+    width: 100%;
+
+    :deep(.config-card-details-value) {
+      font-family: $kui-font-family-code;
+      font-size: $kui-font-size-30;
+
+      .copy-text {
+        font-size: $kui-font-size-30;
+      }
+    }
+
+    .latency-nested {
+      :deep(.config-card-details-label) {
+        padding-left: $kui-space-40;
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/core/tracing/src/components/trace-viewer/TraceLatency.vue b/packages/core/tracing/src/components/trace-viewer/TraceLatency.vue
new file mode 100644
index 0000000000..06b457d295
--- /dev/null
+++ b/packages/core/tracing/src/components/trace-viewer/TraceLatency.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="trace-latency">
+    <div class="title">
+      {{ t('trace_viewer.latency.label') }}
+    </div>
+
+    <div
+      v-for="latency in latencies"
+      :key="latency.key"
+      class="latency"
+    >
+      {{ latency.labelKey ? t(latency.labelKey) : latency.key }}: {{ formatLatency(latency.milliseconds) }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import composables from '../../composables'
+import type { SpanNode } from '../../types'
+import { formatLatency, toOverviewLatencies } from '../../utils'
+
+const { i18n: { t } } = composables.useI18n()
+
+const props = defineProps<{ span: SpanNode['span'] }>()
+
+const latencies = computed(() => toOverviewLatencies(props.span.attributes))
+</script>
+
+<style lang="scss" scoped>
+.trace-latency {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  flex-shrink: 0;
+  font-size: $kui-font-size-30;
+  gap: $kui-space-40;
+  justify-content: flex-start;
+
+  .title {
+    font-weight: $kui-font-weight-semibold;
+  }
+}
+</style>
diff --git a/packages/core/tracing/src/components/trace-viewer/TraceViewer.vue b/packages/core/tracing/src/components/trace-viewer/TraceViewer.vue
index 47a013c826..d6e9269cfd 100644
--- a/packages/core/tracing/src/components/trace-viewer/TraceViewer.vue
+++ b/packages/core/tracing/src/components/trace-viewer/TraceViewer.vue
@@ -18,8 +18,8 @@
             width="25"
           />
         </template>
-        <template v-else>
-          <WaterfallLegend />
+        <template v-else-if="rootSpan">
+          <TraceLatency :span="rootSpan.span" />
 
           <div
             v-if="url"
@@ -64,7 +64,7 @@
         v-else-if="selectedSpan"
         class="span-details"
       >
-        <SpanDescription :span="selectedSpan.span" />
+        <SpanBasicInfo :span="selectedSpan.span" />
 
         <KAlert
           v-if="spanMaybeIncomplete(selectedSpan)"
@@ -75,7 +75,8 @@
           :title="t('trace_viewer.incomplete_span_warning.title')"
         >
           <template #icon>
-            <DangerCircleIcon />
+            <!-- TODO: Waiting for https://github.com/Kong/kongponents/pull/2550 to be adopted -->
+            <DangerIcon />
           </template>
         </KAlert>
 
@@ -84,6 +85,10 @@
           :span="selectedSpan.span"
         />
 
+        <SpanLatencyTable
+          :span="selectedSpan.span"
+        />
+
         <SpanAttributeTable
           :span="selectedSpan.span"
         />
@@ -104,18 +109,19 @@
 </template>
 
 <script setup lang="ts">
-import { DangerCircleIcon } from '@kong/icons'
+import { DangerIcon } from '@kong/icons'
 import { Pane, Splitpanes } from '@kong/splitpanes'
 import { provide, reactive, shallowRef } from 'vue'
 import composables from '../../composables'
 import { TRACE_VIEWER_CONFIG, WATERFALL_ROW_COLUMN_GAP, WATERFALL_ROW_LABEL_WIDTH, WATERFALL_ROW_PADDING_X, WATERFALL_SPAN_BAR_FADING_WIDTH } from '../../constants'
 import type { SpanNode, TraceViewerConfig } from '../../types'
 import { spanMaybeIncomplete } from '../../utils'
-import WaterfallLegend from '../waterfall/WaterfallLegend.vue'
 import WaterfallView from '../waterfall/WaterfallView.vue'
 import SpanAttributeTable from './SpanAttributeTable.vue'
-import SpanDescription from './SpanDescription.vue'
+import SpanBasicInfo from './SpanBasicInfo.vue'
 import SpanEventList from './SpanEventList.vue'
+import SpanLatencyTable from './SpanLatencyTable.vue'
+import TraceLatency from './TraceLatency.vue'
 
 import '@kong/splitpanes/dist/splitpanes.css'
 
@@ -224,7 +230,7 @@ const handleUpdateSelectedSpan = (span?: SpanNode) => {
         flex-direction: row;
         gap: $kui-space-40;
         justify-content: flex-end;
-        min-width: 30%;
+        max-width: 30%;
 
         .label {
           font-size: $kui-font-size-30;
diff --git a/packages/core/tracing/src/components/waterfall/WaterfallLegend.vue b/packages/core/tracing/src/components/waterfall/WaterfallLegend.vue
deleted file mode 100644
index 913848567c..0000000000
--- a/packages/core/tracing/src/components/waterfall/WaterfallLegend.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-  <div class="waterfall-legend">
-    <div class="title">
-      {{ t('waterfall.legend.latency') }}
-    </div>
-    <div
-      v-for="(legendItem, legendItemKind) in WATERFALL_LEGENDS"
-      :key="legendItemKind"
-      class="legend-item"
-    >
-      <div
-        class="color"
-        :style="{ backgroundColor: legendItem.color }"
-      />
-      <div>{{ t(`waterfall.legend.labels.${legendItemKind}`) }}</div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import composables from '../../composables'
-import { WATERFALL_LEGENDS } from '../../constants'
-
-const { i18n: { t } } = composables.useI18n()
-</script>
-
-<style lang="scss" scoped>
-.waterfall-legend {
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  flex-grow: 1;
-  flex-shrink: 0;
-  font-size: $kui-font-size-30;
-  gap: $kui-space-40;
-  justify-content: flex-start;
-
-  .title {
-    font-weight: $kui-font-weight-semibold;
-  }
-
-  .legend-item {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    gap: $kui-space-20;
-    justify-content: flex-start;
-
-    .color {
-      height: 10px;
-      width: 10px;
-    }
-  }
-}
-</style>
diff --git a/packages/core/tracing/src/components/waterfall/WaterfallSpanBar.vue b/packages/core/tracing/src/components/waterfall/WaterfallSpanBar.vue
index 3dcd4b5e01..477aaac625 100644
--- a/packages/core/tracing/src/components/waterfall/WaterfallSpanBar.vue
+++ b/packages/core/tracing/src/components/waterfall/WaterfallSpanBar.vue
@@ -3,10 +3,10 @@
 </template>
 
 <script setup lang="ts">
+import { KUI_BORDER_RADIUS_20 } from '@kong/design-tokens'
 import { computed, inject } from 'vue'
-import { WATERFALL_CONFIG, WATERFALL_LEGENDS, WATERFALL_SPAN_BAR_FADING_WIDTH, WaterfallLegendItemKind } from '../../constants'
+import { WATERFALL_CONFIG, WATERFALL_SPAN_BAR_FADING_WIDTH } from '../../constants'
 import type { SpanNode, WaterfallConfig } from '../../types'
-import { KUI_BORDER_RADIUS_20 } from '@kong/design-tokens'
 
 const config = inject<WaterfallConfig>(WATERFALL_CONFIG)
 if (!config) {
@@ -17,27 +17,6 @@ const props = defineProps<{
   spanNode: SpanNode
 }>()
 
-// TODO: This is not final
-const barColor = computed(() => {
-  if (props.spanNode.root) {
-    return WATERFALL_LEGENDS[WaterfallLegendItemKind.TOTAL].color
-  }
-
-  if (props.spanNode.span.name.includes('client')) {
-    return WATERFALL_LEGENDS[WaterfallLegendItemKind.CLIENT].color
-  }
-
-  if (props.spanNode.span.name.includes('upstream')) {
-    return WATERFALL_LEGENDS[WaterfallLegendItemKind.UPSTREAM].color
-  }
-
-  if (props.spanNode.span.name === 'kong.dns') {
-    return WATERFALL_LEGENDS[WaterfallLegendItemKind.THIRD_PARTY].color
-  }
-
-  return WATERFALL_LEGENDS[WaterfallLegendItemKind.KONG].color
-})
-
 const barEdges = computed(() => {
   const spanStart = props.spanNode.span.startTimeUnixNano
   const spanEnd = props.spanNode.span.endTimeUnixNano
@@ -74,7 +53,7 @@ const barRight = computed(() =>{
   z-index: 1;
 
   &::after {
-    background-color: v-bind(barColor);
+    background-color: $kui-color-background-primary;
     border-radius: $kui-border-radius-20;
     content: '';
     height: 100%;
diff --git a/packages/core/tracing/src/components/waterfall/WaterfallSpanRow.vue b/packages/core/tracing/src/components/waterfall/WaterfallSpanRow.vue
index 3332ceb6df..8d71c8ffdc 100644
--- a/packages/core/tracing/src/components/waterfall/WaterfallSpanRow.vue
+++ b/packages/core/tracing/src/components/waterfall/WaterfallSpanRow.vue
@@ -22,7 +22,10 @@
       />
 
       <div class="label-content">
-        <div class="name">
+        <div
+          class="name"
+          :title="spanNode.span.name"
+        >
           {{ spanNode.span.name }}
         </div>
 
@@ -33,7 +36,7 @@
             :size="KUI_FONT_SIZE_30"
           />
 
-          <DangerCircleIcon
+          <DangerIcon
             v-if="maybeIncomplete"
             :color="KUI_COLOR_TEXT_DANGER"
             :size="KUI_FONT_SIZE_30"
@@ -71,9 +74,9 @@
 
 <script lang="ts" setup>
 import { KUI_COLOR_TEXT_DANGER, KUI_COLOR_TEXT_WARNING, KUI_FONT_SIZE_30 } from '@kong/design-tokens'
-import { WarningIcon, DangerCircleIcon } from '@kong/icons'
+import { DangerIcon, WarningIcon } from '@kong/icons'
 import { computed, inject, ref, watch, type PropType, type Ref } from 'vue'
-import { SPAN_EVENT_ATTRIBUTES, WATERFALL_CONFIG, WATERFALL_ROWS_STATE, WATERFALL_SPAN_BAR_FADING_WIDTH, WaterfallRowsState } from '../../constants'
+import { SPAN_EVENT_ATTRIBUTE_KEYS, WATERFALL_CONFIG, WATERFALL_ROWS_STATE, WATERFALL_SPAN_BAR_FADING_WIDTH, WaterfallRowsState } from '../../constants'
 import { type SpanNode, type WaterfallConfig } from '../../types'
 import { getDurationFormatter, spanMaybeIncomplete } from '../../utils'
 import WaterfallSpanBar from './WaterfallSpanBar.vue'
@@ -152,7 +155,7 @@ const hasException = computed(() => {
       continue
     }
     for (const keyValue of event.attributes) {
-      if (keyValue.key === SPAN_EVENT_ATTRIBUTES.EXCEPTION_MESSAGE.name) {
+      if (keyValue.key === SPAN_EVENT_ATTRIBUTE_KEYS.EXCEPTION_MESSAGE) {
         return true
       }
     }
diff --git a/packages/core/tracing/src/composables/useI18n.ts b/packages/core/tracing/src/composables/useI18n.ts
index 950be42ab7..bc627452bb 100644
--- a/packages/core/tracing/src/composables/useI18n.ts
+++ b/packages/core/tracing/src/composables/useI18n.ts
@@ -14,3 +14,5 @@ export default function useI18n(): UseI18nReturn {
     i18nT: i18nTComponent<typeof english>(i18n), // Translation component <i18n-t>
   }
 }
+
+export type TranslationKey = Parameters<UseI18nReturn['i18n']['t']>[0]
diff --git a/packages/core/tracing/src/constants/sampler-attributes.json b/packages/core/tracing/src/constants/sampler-attributes.json
new file mode 100644
index 0000000000..99e9c6121c
--- /dev/null
+++ b/packages/core/tracing/src/constants/sampler-attributes.json
@@ -0,0 +1 @@
+{"proxy.kong.latency.3p.redis.total_io":{"name":"proxy.kong.latency.3p.redis.total_io","type":"Int"},"proxy.kong.upstream.id":{"name":"proxy.kong.upstream.id","type":"String"},"network.protocol.name":{"type":"String","name":"network.protocol.name","aliases":[{"name":"net.protocol"}]},"network.peer.address":{"name":"network.peer.address","type":"IpAddr"},"http.response.status_code":{"name":"http.response.status_code","type":"Int"},"proxy.kong.upstream.status_code":{"name":"proxy.kong.upstream.status_code","type":"Int"},"network.peer.name":{"name":"network.peer.name","type":"String"},"proxy.kong.target.id":{"name":"proxy.kong.target.id","type":"String"},"network.peer.port":{"name":"network.peer.port","type":"Int"},"proxy.kong.latency.upstream.read_response_duration":{"name":"proxy.kong.latency.upstream.read_response_duration","type":"Int"},"proxy.kong.upstream.host":{"name":"proxy.kong.upstream.host","type":"String"},"proxy.kong.latency.total":{"name":"proxy.kong.latency.total","type":"Int"},"proxy.kong.latency.upstream":{"name":"proxy.kong.latency.upstream","type":"Int"},"client.port":{"type":"Int","name":"client.port","aliases":[{"name":"net.src.port"}]},"http.route":{"type":"String","name":"http.route","aliases":[{"name":"http.path"}]},"http.request.method":{"type":"String","name":"http.request.method","aliases":[{"name":"http.method"}]},"network.protocol.version":{"name":"network.protocol.version","type":"String"},"proxy.kong.latency.3p.total_io":{"name":"proxy.kong.latency.3p.total_io","type":"Int"},"proxy.kong.upstream.addr":{"name":"proxy.kong.upstream.addr","type":"IpAddr"},"server.port":{"type":"Int","name":"server.port","aliases":[{"name":"net.dst.port"}]},"proxy.kong.latency.3p.tcpsock.total_io":{"name":"proxy.kong.latency.3p.tcpsock.total_io","type":"Int"},"network.transport":{"name":"network.transport","type":"String"},"proxy.kong.latency.client":{"name":"proxy.kong.latency.client","type":"Int"},"proxy.kong.latency.3p.dns.total_io":{"name":"proxy.kong.latency.3p.dns.total_io","type":"Int"},"url.scheme":{"type":"String","name":"url.scheme","aliases":[{"name":"net.protocol"}]},"server.address":{"type":"String","name":"server.address","aliases":[{"name":"tls.sni"},{"name":"net.dst.ip","type":"IpAddr"}]},"proxy.kong.route.id":{"name":"proxy.kong.route.id","type":"String"},"proxy.kong.latency.3p.http_client.total_io":{"name":"proxy.kong.latency.3p.http_client.total_io","type":"Int"},"http.request.size":{"name":"http.request.size","type":"Int"},"http.request.header.host":{"type":"String","name":"http.request.header.host","aliases":[{"name":"http.host"}]},"proxy.kong.latency.upstream.ttfb":{"name":"proxy.kong.latency.upstream.ttfb","type":"Int"},"client.address":{"type":"IpAddr","name":"client.address","aliases":[{"name":"net.src.ip"}]},"proxy.kong.consumer.id":{"name":"proxy.kong.consumer.id","type":"String"},"destination.address":{"name":"destination.address","type":"IpAddr"},"proxy.kong.service.id":{"name":"proxy.kong.service.id","type":"String"},"proxy.kong.latency.internal":{"name":"proxy.kong.latency.internal","type":"Int"},"url.full":{"name":"url.full","type":"String"}}
diff --git a/packages/core/tracing/src/constants/spans.ts b/packages/core/tracing/src/constants/spans.ts
index d1fb46497c..29e5748d5a 100644
--- a/packages/core/tracing/src/constants/spans.ts
+++ b/packages/core/tracing/src/constants/spans.ts
@@ -1,248 +1,61 @@
 
-import { type SpanAttributeSchema, type SpanEventAttributeSchema } from '../types'
+import type { TranslationKey } from '../composables/useI18n'
+import { type SpanSamplerAttribute } from '../types'
+import samplerAttributes from './sampler-attributes.json'
 
 export const SPAN_ZERO_ID = '0000000000000000'
 export const SPAN_ATTRIBUTE_VALUE_UNKNOWN = 'unknown'
 
-// Internally used here only
-const SPAN_ATTR_KEY_KONG_PREFIX = 'proxy.kong'
+export const SPAN_SAMPLER_ATTRIBUTES: Record<keyof typeof samplerAttributes, SpanSamplerAttribute> =
+  samplerAttributes satisfies Record<string, SpanSamplerAttribute>
 
-export enum SpanAttributeKeys {
-  _INTERNAL_END_TIME = '$$ui_internal.end_time',
-  _INTERNAL_START_TIME = '$$ui_internal.start_time',
-  CLIENT_ADDRESS = 'client.address',
-  CLIENT_PORT = 'client.port',
-  DB_STATEMENT = 'db.statement',
-  DB_SYSTEM = 'db.system',
-  DESTINATION_ADDRESS = 'destination.address',
-  HTTP_REQUEST_METHOD = 'http.request.method',
-  HTTP_RESPONSE_STATUS_CODE = 'http.response.status_code',
-  HTTP_ROUTE = 'http.route',
-  KONG_CONSUMER_ID = `${SPAN_ATTR_KEY_KONG_PREFIX}.consumer.id`,
-  KONG_LATENCY_TOTAL_MS = `${SPAN_ATTR_KEY_KONG_PREFIX}.latency_total_ms`,
-  KONG_PLUGIN_ID = `${SPAN_ATTR_KEY_KONG_PREFIX}.plugin.id`,
-  KONG_REDIS_TOTAL_IO_MS = `${SPAN_ATTR_KEY_KONG_PREFIX}.redis.total_io_ms`,
-  KONG_REQUEST_ID = `${SPAN_ATTR_KEY_KONG_PREFIX}.request.id`,
-  KONG_ROUTE_ID = `${SPAN_ATTR_KEY_KONG_PREFIX}.route.id`,
-  KONG_SAMPLING_RULE = `${SPAN_ATTR_KEY_KONG_PREFIX}.sampling_rule`,
-  KONG_SERVICE_ID = `${SPAN_ATTR_KEY_KONG_PREFIX}.service.id`,
-  KONG_TARGET_ID = `${SPAN_ATTR_KEY_KONG_PREFIX}.target.id`,
-  KONG_TCPSOCK_TOTAL_IO_MS = `${SPAN_ATTR_KEY_KONG_PREFIX}.tcpsock.total_io_ms`,
-  KONG_UPSTREAM_ADDR = `${SPAN_ATTR_KEY_KONG_PREFIX}.upstream.addr`,
-  KONG_UPSTREAM_CONNECT_DURATION_MS = `${SPAN_ATTR_KEY_KONG_PREFIX}.upstream.connect_duration_ms`,
-  KONG_UPSTREAM_HOST = `${SPAN_ATTR_KEY_KONG_PREFIX}.upstream.host`,
-  KONG_UPSTREAM_ID = `${SPAN_ATTR_KEY_KONG_PREFIX}.upstream.id`,
-  KONG_UPSTREAM_LB_ALGORITHM = `${SPAN_ATTR_KEY_KONG_PREFIX}.upstream.lb_algorithm`,
-  KONG_UPSTREAM_READ_RESPONSE_DURATION_MS = `${SPAN_ATTR_KEY_KONG_PREFIX}.upstream.read_response_duration_ms`,
-  KONG_UPSTREAM_RESPONSE_DURATION_MS = `${SPAN_ATTR_KEY_KONG_PREFIX}.upstream.response_duration_ms`,
-  KONG_UPSTREAM_STATUS_CODE = `${SPAN_ATTR_KEY_KONG_PREFIX}.upstream.status_code`,
-  KONG_UPSTREAM_TTFB_MS = `${SPAN_ATTR_KEY_KONG_PREFIX}.upstream.ttfb_ms`,
-  NETWORK_PEER_ADDRESS = 'network.peer.address',
-  NETWORK_PEER_NAME = 'network.peer.name',
-  NETWORK_PEER_PORT = 'network.peer.port',
-  NETWORK_PROTOCOL_NAME = 'network.protocol.name',
-  NETWORK_PROTOCOL_VERSION = 'network.protocol.version',
-  NETWORK_TRANSPORT = 'network.transport',
-  SERVER_ADDRESS = 'server.address',
-  SERVER_PORT = 'server.port',
-  URL_FULL = 'url.full',
-  URL_QUERY = 'url.query',
-  URL_SCHEME = 'url.scheme',
-}
+export const SPAN_ATTR_KEY_KONG_PREFIX = 'proxy.kong.'
+export const SPAN_ATTR_KEY_KONG_LATENCY_PREFIX = `${SPAN_ATTR_KEY_KONG_PREFIX}latency.`
+export const SPAN_ATTR_KEY_KONG_LATENCY_3P_PREFIX = `${SPAN_ATTR_KEY_KONG_LATENCY_PREFIX}3p.`
 
 /**
- * These definitions are exported from Gateway's codebase.
- * They are subject to change in the future.
+ * These are known attributes that will appear in the spans for ease of access.
+ * Why not using enums? --Because we don't want to make the list here exhaustive.
  */
-const unnamedSpanAttributes: Record<SpanAttributeKeys, Omit<SpanAttributeSchema, 'name'>> = {
-  [SpanAttributeKeys.CLIENT_ADDRESS]: {
-    type: 'IpAddr',
-    sampling: {
-      aliases: ['net.src.ip'],
-    },
-  },
-  [SpanAttributeKeys.CLIENT_PORT]: {
-    type: 'Int',
-    sampling: {
-      aliases: ['net.src.port'],
-    },
-  },
-  [SpanAttributeKeys.DESTINATION_ADDRESS]: {
-    type: 'IpAddr',
-    sampling: true,
-  },
-  [SpanAttributeKeys.SERVER_ADDRESS]: {
-    type: 'String',
-    sampling: {
-      aliases: [
-        'tls.sni',
-        { name: 'net.dst.ip', type: 'IpAddr' },
-      ],
-    },
-  },
-  [SpanAttributeKeys.SERVER_PORT]: {
-    type: 'Int',
-    sampling: {
-      aliases: ['net.dst.port'],
-    },
-  },
-  [SpanAttributeKeys.NETWORK_PROTOCOL_NAME]: {
-    type: 'String',
-    sampling: {
-      aliases: ['net.protocol'],
-    },
-  },
-  [SpanAttributeKeys.NETWORK_PROTOCOL_VERSION]: {
-    type: 'String',
-    sampling: true,
-  },
-  [SpanAttributeKeys.NETWORK_TRANSPORT]: {
-    type: 'String',
-    sampling: true,
-  },
-  [SpanAttributeKeys.URL_SCHEME]: {
-    type: 'String',
-    sampling: {
-      aliases: ['net.protocol'],
-    },
-  },
-  [SpanAttributeKeys.HTTP_REQUEST_METHOD]: {
-    type: 'String',
-    sampling: {
-      aliases: ['http.method'],
-    },
-  },
-  [SpanAttributeKeys.HTTP_ROUTE]: {
-    type: 'String',
-    sampling: {
-      aliases: ['http.path'],
-    },
-  },
-  [SpanAttributeKeys.URL_FULL]: {
-    type: 'String',
-    sampling: true,
-  },
-  [SpanAttributeKeys.URL_QUERY]: {
-    type: 'String',
-    sampling: true,
-  },
-  [SpanAttributeKeys.HTTP_RESPONSE_STATUS_CODE]: {
-    type: 'Int',
-    sampling: true,
-  },
-  [SpanAttributeKeys.NETWORK_PEER_ADDRESS]: {
-    type: 'IpAddr',
-    sampling: true,
-  },
-  /**
-   * This is non-standard but it's available to us via the balancer
-   */
-  [SpanAttributeKeys.NETWORK_PEER_NAME]: {
-    type: 'String',
-    sampling: true,
-  },
-  [SpanAttributeKeys.NETWORK_PEER_PORT]: {
-    type: 'Int',
-    sampling: true,
-  },
-  [SpanAttributeKeys.KONG_SERVICE_ID]: {
-    type: 'String',
-    sampling: true,
-  },
-  [SpanAttributeKeys.KONG_ROUTE_ID]: {
-    type: 'String',
-    sampling: true,
-  },
-  [SpanAttributeKeys.KONG_CONSUMER_ID]: {
-    type: 'String',
-    sampling: true,
-  },
-  [SpanAttributeKeys.KONG_UPSTREAM_ID]: {
-    type: 'String',
-    sampling: true,
-  },
-  [SpanAttributeKeys.KONG_UPSTREAM_STATUS_CODE]: {
-    type: 'Int',
-    sampling: true,
-  },
-  [SpanAttributeKeys.KONG_UPSTREAM_ADDR]: {
-    type: 'IpAddr',
-    sampling: true,
-  },
-  [SpanAttributeKeys.KONG_UPSTREAM_HOST]: {
-    type: 'String',
-    sampling: true,
-  },
-  [SpanAttributeKeys.KONG_UPSTREAM_LB_ALGORITHM]: {
-    type: 'String',
-  },
-  [SpanAttributeKeys.KONG_TARGET_ID]: {
-    type: 'String',
-    sampling: true,
-  },
-  [SpanAttributeKeys.KONG_PLUGIN_ID]: {
-    type: 'String',
-  },
-  [SpanAttributeKeys.KONG_SAMPLING_RULE]: {
-    type: 'String',
-  },
-  [SpanAttributeKeys.KONG_REQUEST_ID]: {
-    type: 'String',
-  },
-  [SpanAttributeKeys.KONG_UPSTREAM_TTFB_MS]: {
-    type: 'Int',
-    sampling: true,
-  },
-  [SpanAttributeKeys.KONG_UPSTREAM_READ_RESPONSE_DURATION_MS]: {
-    type: 'Int',
-    sampling: true,
-  },
-  [SpanAttributeKeys.KONG_UPSTREAM_CONNECT_DURATION_MS]: {
-    type: 'Int',
-  },
-  [SpanAttributeKeys.KONG_UPSTREAM_RESPONSE_DURATION_MS]: {
-    type: 'Int',
-  },
-  [SpanAttributeKeys.KONG_LATENCY_TOTAL_MS]: {
-    type: 'Int',
-    sampling: true,
-  },
-  [SpanAttributeKeys.KONG_REDIS_TOTAL_IO_MS]: {
-    type: 'Int',
-    sampling: true,
-  },
-  [SpanAttributeKeys.KONG_TCPSOCK_TOTAL_IO_MS]: {
-    type: 'Int',
-    sampling: true,
-  },
-  [SpanAttributeKeys.DB_SYSTEM]: {
-    type: 'String',
-  },
-  [SpanAttributeKeys.DB_STATEMENT]: {
-    type: 'String',
-  },
-  [SpanAttributeKeys._INTERNAL_START_TIME]: {
-    type: 'String',
-    internal: true,
-  },
-  [SpanAttributeKeys._INTERNAL_END_TIME]: {
-    type: 'String',
-    internal: true,
-  },
-} satisfies Record<SpanAttributeKeys, Omit<SpanAttributeSchema, 'name'>>
-//^^^^^^^^^ `satisfies` helps us to identify missing enums
+export const SPAN_ATTRIBUTE_KEYS = {
+  HTTP_REQUEST_METHOD: 'http.request.method',
+  HTTP_RESPONSE_STATUS_CODE: 'http.response.status_code',
+  HTTP_ROUTE: 'http.route',
+  KONG_CONSUMER_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}consumer.id`,
+  KONG_LATENCY_3P_DNS_TOTAL_IO: `${SPAN_ATTR_KEY_KONG_LATENCY_3P_PREFIX}dns.total_io`,
+  KONG_LATENCY_3P_HTTP_CLIENT_TOTAL_IO: `${SPAN_ATTR_KEY_KONG_LATENCY_3P_PREFIX}http_client.total_io`,
+  KONG_LATENCY_3P_REDIS_TOTAL_IO: `${SPAN_ATTR_KEY_KONG_LATENCY_3P_PREFIX}redis.total_io`,
+  KONG_LATENCY_3P_TCPSOCK_TOTAL_IO: `${SPAN_ATTR_KEY_KONG_LATENCY_3P_PREFIX}tcpsock.total_io`,
+  KONG_LATENCY_3P_TOTAL_IO: `${SPAN_ATTR_KEY_KONG_LATENCY_3P_PREFIX}total_io`,
+  KONG_LATENCY_CLIENT: `${SPAN_ATTR_KEY_KONG_LATENCY_PREFIX}client`,
+  KONG_LATENCY_INTERNAL: `${SPAN_ATTR_KEY_KONG_LATENCY_PREFIX}internal`,
+  KONG_LATENCY_TOTAL: `${SPAN_ATTR_KEY_KONG_LATENCY_PREFIX}total`,
+  KONG_LATENCY_UPSTREAM: `${SPAN_ATTR_KEY_KONG_LATENCY_PREFIX}upstream`,
+  KONG_PLUGIN_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}plugin.id`,
+  KONG_ROUTE_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}route.id`,
+  KONG_SERVICE_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}service.id`,
+  KONG_TARGET_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}target.id`,
+  KONG_UPSTREAM_ID: `${SPAN_ATTR_KEY_KONG_PREFIX}upstream.id`,
+  URL_FULL: 'url.full',
+} satisfies Record<string, string>
 
-export const SPAN_ATTRIBUTES =
-  Object.fromEntries(Object.entries(unnamedSpanAttributes)
-    .map(([key, value]) => ([key, { name: key, ...value } as SpanAttributeSchema]))) as Record<SpanAttributeKeys, SpanAttributeSchema>
+export const SPAN_LATENCY_ATTR_LABEL_KEYS: Record<string, TranslationKey> = {
+  [SPAN_ATTRIBUTE_KEYS.KONG_LATENCY_3P_DNS_TOTAL_IO]: 'trace_viewer.latency.labels.3p_dns',
+  [SPAN_ATTRIBUTE_KEYS.KONG_LATENCY_3P_HTTP_CLIENT_TOTAL_IO]: 'trace_viewer.latency.labels.3p_http_client',
+  [SPAN_ATTRIBUTE_KEYS.KONG_LATENCY_3P_REDIS_TOTAL_IO]: 'trace_viewer.latency.labels.3p_redis',
+  [SPAN_ATTRIBUTE_KEYS.KONG_LATENCY_3P_TCPSOCK_TOTAL_IO]: 'trace_viewer.latency.labels.3p_tcpsock',
+  [SPAN_ATTRIBUTE_KEYS.KONG_LATENCY_3P_TOTAL_IO]: 'trace_viewer.latency.labels.3p',
+  [SPAN_ATTRIBUTE_KEYS.KONG_LATENCY_CLIENT]: 'trace_viewer.latency.labels.client',
+  [SPAN_ATTRIBUTE_KEYS.KONG_LATENCY_INTERNAL]: 'trace_viewer.latency.labels.internal',
+  [SPAN_ATTRIBUTE_KEYS.KONG_LATENCY_TOTAL]: 'trace_viewer.latency.labels.total',
+  [SPAN_ATTRIBUTE_KEYS.KONG_LATENCY_UPSTREAM]: 'trace_viewer.latency.labels.upstream',
+}
 
-export const SPAN_EVENT_ATTRIBUTES = {
-  MESSAGE: {
-    name: 'message',
-    type: 'String',
-  },
-  EXCEPTION_MESSAGE: {
-    name: 'exception.message',
-    type: 'String',
-  },
-} satisfies Record<string, SpanEventAttributeSchema>
+/**
+ * These are known attributes that will appear in the span events for ease of access.
+ * Why not using enums? --Because we don't want to make the list here exhaustive.
+ */
+export const SPAN_EVENT_ATTRIBUTE_KEYS = {
+  MESSAGE: 'message',
+  EXCEPTION_MESSAGE: 'exception.message',
+} satisfies Record<string, string>
diff --git a/packages/core/tracing/src/constants/waterfall.ts b/packages/core/tracing/src/constants/waterfall.ts
index a4546e2857..53a6d87505 100644
--- a/packages/core/tracing/src/constants/waterfall.ts
+++ b/packages/core/tracing/src/constants/waterfall.ts
@@ -1,13 +1,7 @@
 import {
-  KUI_COLOR_BACKGROUND_PRIMARY,
-  KUI_METHOD_COLOR_TEXT_TRACE,
-  KUI_COLOR_TEXT_DECORATIVE_AQUA,
-  KUI_COLOR_TEXT_DECORATIVE_PURPLE,
-  KUI_METHOD_COLOR_TEXT_PATCH,
   KUI_SPACE_40,
   KUI_SPACE_50,
 } from '@kong/design-tokens'
-import type { WaterfallLegendItem } from '../types'
 
 // Vue provide/inject keys
 export const WATERFALL_CONFIG = Symbol('WaterfallConfig')
@@ -29,33 +23,3 @@ export enum WaterfallRowsState {
   /** User has manually collapsed/expanded some rows */
   OVERRIDDEN = 'overridden',
 }
-
-// TODO: This is INDETERMINATE now
-export enum WaterfallLegendItemKind {
-  TOTAL = 'total',
-  KONG = 'kong',
-  UPSTREAM = 'upstream',
-  THIRD_PARTY = 'third_party',
-  CLIENT = 'client',
-}
-
-// TODO: Reserved for span color-coding.
-// They are subject to change in the future.
-export const WATERFALL_LEGENDS = {
-  [WaterfallLegendItemKind.TOTAL]: {
-    color: KUI_COLOR_BACKGROUND_PRIMARY, // blur.60
-  },
-  [WaterfallLegendItemKind.KONG]: {
-    color: KUI_METHOD_COLOR_TEXT_TRACE, // pink.60
-  },
-  [WaterfallLegendItemKind.UPSTREAM]: {
-    color: KUI_COLOR_TEXT_DECORATIVE_AQUA, // aqua.50
-  },
-  [WaterfallLegendItemKind.THIRD_PARTY]: {
-    color: KUI_METHOD_COLOR_TEXT_PATCH, // aqua.60
-  },
-  [WaterfallLegendItemKind.CLIENT]:  {
-    color: KUI_COLOR_TEXT_DECORATIVE_PURPLE, // purple.60
-  },
-} satisfies Record<WaterfallLegendItemKind, WaterfallLegendItem>
-
diff --git a/packages/core/tracing/src/locales/en.json b/packages/core/tracing/src/locales/en.json
index 8bad6d75bd..ce11421362 100644
--- a/packages/core/tracing/src/locales/en.json
+++ b/packages/core/tracing/src/locales/en.json
@@ -18,53 +18,119 @@
       "message": "This span is incomplete, this could be because of a sampling issue. Please exercise caution when interpreting this span.",
       "title": "Incomplete span"
     },
+    "latency": {
+      "label": "Latency",
+      "labels": {
+        "3p": "3rd-party",
+        "3p_dns": "DNS",
+        "3p_http_client": "HTTP client",
+        "3p_redis": "Redis",
+        "3p_tcpsock": "TCP socket",
+        "client": "Client",
+        "internal": "Kong (internal)",
+        "total": "Total",
+        "upstream": "Upstream"
+      },
+      "section_title": "Latency breakdown"
+    },
     "no_span_description": "No description available for this span",
     "span_attributes": {
       "not_applicable": "Not applicable",
       "title": "Span attributes"
     },
-    "span_descriptions": {
-      "kong": {
-        "access": {
-          "plugin": "This span captures the execution time of the plugin that runs in the access phase. Multiple instances of this span can occur, one per plugin configured to run in this phase."
-        },
-        "body_filter": {
-          "plugin": "This span captures the execution time of the plugin that runs in the body_filter phase. Multiple instances of this span can occur, one per plugin configured to run in this phase."
-        },
-        "certificate": {
-          "plugin": "This span captures the execution time of the plugin that runs in the certificate phase. Multiple instances of this span can occur, one per plugin configured to run in this phase."
-        },
-        "dns": "Kong does most of it's DNS lookup asynchronously, but depending on configuration or custom_plugin code Kong may have to do synchronous DNS lookups. This span captures the time taken to resolve DNS queries.",
-        "find_upstream": "For each upstream target marked as healthy, Kong will attempt to open a TCP connection, optionally do a TLS handshake and send over the request headers. If all of this succeeds, Kong will finish sending the full request and wait for a response. If any of the step fails, Kong will switch to the next upstream and try again. This span captures the time taken to validate a specific upstream.",
-        "flush_to_downstream": "This span measures the time taken for the client to read the response once it sent from Kong. This span can identify clients that are slow at reading responses, or are trying to read responses over slow connections.",
-        "header_filter": {
-          "plugin": "This span captures the execution time of the plugin that runs in the header_filter phase. Multiple instances of this span can occur, one per plugin configured to run in this phase."
-        },
-        "io": {
-          "func": "Depending on configuration or custom plugin behaviour, Kong may have to reach out to 3rd parties (like redis, IdP, http-api etc) as part of normal request processing. This span captures the amount of time Kong spent waiting for the 3rd party to respond. Multiple instances of this span can occur, one per 3rd party i/o. This span does not capture the time spent waiting on the actual upstream, that is captured in it's own dedicated span."
-        },
-        "phase": {
-          "access": "This span captures the cumulative execution time of all the plugins that may run in the access phase of the request lifecycle.",
-          "body_filter": "This span captures the cumulative execution time of all the plugins that may run in the body filter phase of the request lifecycle.",
-          "certificate": "This span captures the cumulative execution time of all the plugins that may run in the certificate phase of the request lifecycle.",
-          "header_filter": "This span captures the cumulative execution time of all the plugins that may run in the header filter phase of the request lifecycle.",
-          "response": "This span captures the cumulative execution time of all the plugins that may run in the response phase of the request lifecycle.",
-          "rewrite": "This span captures the cumulative execution time of all the plugins that may run in the rewrite phase of the request lifecycle."
-        },
-        "read_client_http_body": "This span captures the time taken to read the full body of the request from the client. This span can be very useful to determine if a client is on a slow network, sending a large body or simply taking too long to send a POST/PUT/PATCH body.",
-        "read_client_http_headers": "This span captures the time taken to read the full set of http headers from the client. This span can be very useful to determine if a client is slow or may be coming over a slow or problematic network.",
-        "read_response_from_upstream": "Span capturing the time taken for the upstream to generate a full response. This effectively measures the time Kong sees between the first byte of the response header and the last byte of the response body coming from the upstream. This span can be used to identify slowness in response generation from upstream.",
-        "response": {
-          "plugin": "This span captures the execution time of the plugin that runs in the response phase. Multiple instances of this span can occur, one per plugin configured to run in this phase."
-        },
-        "rewrite": {
-          "plugin": "This span captures the execution time of the plugin that runs in the rewrite phase. Multiple instances of this span can occur, one per plugin configured to run in this phase."
-        },
-        "router": "This span captures the time taken by the router to search for a match. The span attributes return interesting information about the match.",
-        "upstream": {
-          "selection": "Depending on configuration, Kong will try to find a healthy upstream by trying various targets in order determined by the configured load balancing algorithm. This span captures the total time spent in finding a healthy upstream. Child spans of this span capture the individual attempts."
-        },
-        "waiting_for_upstream": "Span capturing the \"time to first byte\" from the upstream. This includes the time taken to finish writing the http request to upstream, and the time taken by the upstream to start generating a response. This span can be used to identify network delays between Kong and an upstream as well as identifying upstreams that take long to start generating a response."
+    "span_basic_info": {
+      "descriptions": {
+        "kong": {
+          "$": "This span captures the entire request-response duration.",
+          "access": {
+            "plugin": {
+              "$": "This span captures the execution time of the plugin that runs in the access phase. Multiple instances of this span can occur, one per plugin configured to run in this phase."
+            }
+          },
+          "body_filter": {
+            "plugin": {
+              "$": "This span captures the execution time of the plugin that runs in the body_filter phase. Multiple instances of this span can occur, one per plugin configured to run in this phase."
+            }
+          },
+          "certificate": {
+            "plugin": {
+              "$": "This span captures the execution time of the plugin that runs in the certificate phase. Multiple instances of this span can occur, one per plugin configured to run in this phase."
+            }
+          },
+          "dns": {
+            "$": "Kong does most of it's DNS lookup asynchronously, but depending on configuration or custom_plugin code Kong may have to do synchronous DNS lookups. This span captures the time taken to resolve DNS queries."
+          },
+          "find_upstream": {
+            "$": "For each upstream target marked as healthy, Kong will attempt to open a TCP connection, optionally do a TLS handshake and send over the request headers. If all of this succeeds, Kong will finish sending the full request and wait for a response. If any of the step fails, Kong will switch to the next upstream and try again. This span captures the time taken to validate a specific upstream."
+          },
+          "flush_to_downstream": {
+            "$": "This span measures the time taken for the client to read the response once it sent from Kong. This span can identify clients that are slow at reading responses, or are trying to read responses over slow connections."
+          },
+          "header_filter": {
+            "plugin": {
+              "$": "This span captures the execution time of the plugin that runs in the header_filter phase. Multiple instances of this span can occur, one per plugin configured to run in this phase."
+            }
+          },
+          "io": {
+            "func": {
+              "$": "Depending on configuration or custom plugin behaviour, Kong may have to reach out to 3rd parties (like redis, IdP, http-api etc) as part of normal request processing. This span captures the amount of time Kong spent waiting for the 3rd party to respond. Multiple instances of this span can occur, one per 3rd party i/o. This span does not capture the time spent waiting on the actual upstream, that is captured in it's own dedicated span."
+            }
+          },
+          "phase": {
+            "access": {
+              "$": "This span captures the cumulative execution time of all the plugins that may run in the access phase of the request lifecycle."
+            },
+            "body_filter": {
+              "$": "This span captures the cumulative execution time of all the plugins that may run in the body filter phase of the request lifecycle."
+            },
+            "certificate": {
+              "$": "This span captures the cumulative execution time of all the plugins that may run in the certificate phase of the request lifecycle."
+            },
+            "header_filter": {
+              "$": "This span captures the cumulative execution time of all the plugins that may run in the header filter phase of the request lifecycle."
+            },
+            "response": {
+              "$": "This span captures the cumulative execution time of all the plugins that may run in the response phase of the request lifecycle."
+            },
+            "rewrite": {
+              "$": "This span captures the cumulative execution time of all the plugins that may run in the rewrite phase of the request lifecycle."
+            }
+          },
+          "read_client_http_body": {
+            "$": "This span captures the time taken to read the full body of the request from the client. This span can be very useful to determine if a client is on a slow network, sending a large body or simply taking too long to send a POST/PUT/PATCH body."
+          },
+          "read_client_http_headers": {
+            "$": "This span captures the time taken to read the full set of http headers from the client. This span can be very useful to determine if a client is slow or may be coming over a slow or problematic network."
+          },
+          "read_response_from_upstream": {
+            "$": "Span capturing the time taken for the upstream to generate a full response. This effectively measures the time Kong sees between the first byte of the response header and the last byte of the response body coming from the upstream. This span can be used to identify slowness in response generation from upstream."
+          },
+          "response": {
+            "plugin": {
+              "$": "This span captures the execution time of the plugin that runs in the response phase. Multiple instances of this span can occur, one per plugin configured to run in this phase."
+            }
+          },
+          "rewrite": {
+            "plugin": {
+              "$": "This span captures the execution time of the plugin that runs in the rewrite phase. Multiple instances of this span can occur, one per plugin configured to run in this phase."
+            }
+          },
+          "router": {
+            "$": "This span captures the time taken by the router to search for a match. The span attributes return interesting information about the match."
+          },
+          "upstream": {
+            "selection": {
+              "$": "Depending on configuration, Kong will try to find a healthy upstream by trying various targets in order determined by the configured load balancing algorithm. This span captures the total time spent in finding a healthy upstream. Child spans of this span capture the individual attempts."
+            }
+          },
+          "waiting_for_upstream": {
+            "$": "Span capturing the \"time to first byte\" from the upstream. This includes the time taken to finish writing the http request to upstream, and the time taken by the upstream to start generating a response. This span can be used to identify network delays between Kong and an upstream as well as identifying upstreams that take long to start generating a response."
+          }
+        }
+      },
+      "labels": {
+        "description": "Description",
+        "name": "Name"
       }
     },
     "span_events": {
@@ -79,16 +145,6 @@
     "action": {
       "collapse_all": "Collapse all",
       "expand_all": "Expand all"
-    },
-    "legend": {
-      "labels": {
-        "client": "Client",
-        "kong": "Kong (internal)",
-        "third_party": "Third party",
-        "total": "Total",
-        "upstream": "Upstream"
-      },
-      "latency": "Latency"
     }
   }
 }
diff --git a/packages/core/tracing/src/types/spans.ts b/packages/core/tracing/src/types/spans.ts
index bd1f70a9b0..8314525c50 100644
--- a/packages/core/tracing/src/types/spans.ts
+++ b/packages/core/tracing/src/types/spans.ts
@@ -1,3 +1,4 @@
+import type { TranslationKey } from '../composables/useI18n'
 import type { IKeyValue } from './otlp'
 
 /**
@@ -50,40 +51,38 @@ export interface SpanNode {
   }
 }
 
-interface AttributeSchema {
-  name: string
-  type: string
-}
-
-export interface SpanAttributeExprAlias {
+/**
+ * Presenting the definition of a field in the Expressions (ATC) language.
+ */
+export interface ExpressionsField {
   name: string
-  type: string
+  /**
+   * When this field is omitted, we will use the `type` of its residing attribute.
+   */
+  type?: string
 }
 
 /**
- * Definition of the sampling rule configuration for a span attribute.
- * This is mainly used under the context of the Expressions (ATC) language.
+ * The span attribute that will be used for sampling.
  */
-export interface SpanAttributeSampling {
+export interface SpanSamplerAttribute {
+  name: string
   /**
-   * Type of the value in Expressions (ATC). This field is currently preserved.
-   * When omitted, the type is inferred from the span attribute.
+   * Type under the context of the Expressions (ATC) language.
    */
-  type?: string
+  type: string
   /**
-   * Aliases for the usage in Expressions (ATC). This field is currently preserved.
-   * If a string is used as an alias, the type is inferred from the sampling rules configuration.
+   * Aliases for the usage in Expressions (ATC).
    */
-  aliases: (SpanAttributeExprAlias | string)[]
+  aliases?: ExpressionsField[]
 }
 
-export interface SpanAttributeSchema extends AttributeSchema {
+export interface SpanLatency<Children = never> {
+  key: string
   /**
-   * Configuration for sampling rules associated with this attribute.
-   * When omitted, the attribute is not used for sampling.
+   * When omitted, we will use the `key` as the label.
    */
-  sampling?: boolean | SpanAttributeSampling
-  internal?: boolean
+  labelKey?: TranslationKey
+  milliseconds: number
+  children?: Children
 }
-
-export type SpanEventAttributeSchema = AttributeSchema
diff --git a/packages/core/tracing/src/utils/spans.ts b/packages/core/tracing/src/utils/spans.ts
index 25f4474064..b855c3703f 100644
--- a/packages/core/tracing/src/utils/spans.ts
+++ b/packages/core/tracing/src/utils/spans.ts
@@ -1,6 +1,6 @@
 import { cloneDeep } from 'lodash-es'
-import { SPAN_ZERO_ID } from '../constants'
-import { type IAnyValue, type Span, type SpanNode } from '../types'
+import { SPAN_ATTR_KEY_KONG_LATENCY_3P_PREFIX, SPAN_ATTRIBUTE_KEYS, SPAN_LATENCY_ATTR_LABEL_KEYS, SPAN_ZERO_ID } from '../constants'
+import { type IAnyValue, type IKeyValue, type Span, type SpanLatency, type SpanNode } from '../types'
 
 /**
  * These are spans whose names are changed.
@@ -182,3 +182,78 @@ export const unwrapAnyValue = <T = any> (value: IAnyValue): T | null => {
 
   return null
 }
+
+const LATENCY_ORDERING = [
+  SPAN_ATTRIBUTE_KEYS.KONG_LATENCY_TOTAL,
+  SPAN_ATTRIBUTE_KEYS.KONG_LATENCY_INTERNAL,
+  SPAN_ATTRIBUTE_KEYS.KONG_LATENCY_UPSTREAM,
+  SPAN_ATTRIBUTE_KEYS.KONG_LATENCY_3P_TOTAL_IO,
+  SPAN_ATTRIBUTE_KEYS.KONG_LATENCY_CLIENT,
+].reduce((map, key, index) => {
+  map[key] = index
+  return map
+}, {} as Record<string, number>)
+
+/**
+ * IMPORTANT: Please pass the attributes of a root span.
+ */
+export const toOverviewLatencies = (attributes?: IKeyValue[]): SpanLatency[] => {
+  if (!attributes) {
+    return []
+  }
+
+  return attributes
+    .reduce((attrs, attr) => {
+      if (!Object.prototype.hasOwnProperty.call(LATENCY_ORDERING, attr.key)) {
+        return attrs
+      }
+
+      attrs.push({
+        key: attr.key,
+        labelKey: SPAN_LATENCY_ATTR_LABEL_KEYS[attr.key],
+        milliseconds: unwrapAnyValue(attr.value) as number,
+      })
+
+      return attrs
+    }, [] as SpanLatency[])
+    .sort((a, b) => LATENCY_ORDERING[a.key] - LATENCY_ORDERING[b.key])
+}
+
+export const toSpanLatencies = (attributes?: IKeyValue[]): SpanLatency<SpanLatency[]>[] => {
+  if (!attributes) {
+    return []
+  }
+
+  const latencies: SpanLatency<SpanLatency[]>[] = []
+  let latency3rdParty: SpanLatency<SpanLatency[]> | undefined
+  const latencies3rdParty: SpanLatency[] = []
+
+  for (const attr of attributes) {
+    if (Object.prototype.hasOwnProperty.call(LATENCY_ORDERING, attr.key)) {
+      // Handle the major latencies
+      const latency: SpanLatency<SpanLatency[]> = {
+        key: attr.key,
+        labelKey: SPAN_LATENCY_ATTR_LABEL_KEYS[attr.key],
+        milliseconds: unwrapAnyValue(attr.value) as number,
+        children: [],
+      }
+      if (attr.key === SPAN_ATTRIBUTE_KEYS.KONG_LATENCY_3P_TOTAL_IO) {
+        latency3rdParty = latency
+      }
+      latencies.push(latency)
+    } else if (attr.key.startsWith(SPAN_ATTR_KEY_KONG_LATENCY_3P_PREFIX)) {
+      // Handle the NESTED 3rd-party latencies; we will later add them to the major 3rd-party latency
+      latencies3rdParty.push({
+        key: attr.key,
+        labelKey:  SPAN_LATENCY_ATTR_LABEL_KEYS[attr.key],
+        milliseconds: unwrapAnyValue(attr.value) as number,
+      })
+    }
+  }
+
+  if (latency3rdParty) {
+    latency3rdParty.children = latencies3rdParty
+  }
+
+  return latencies.sort((a, b) => LATENCY_ORDERING[a.key] - LATENCY_ORDERING[b.key])
+}
diff --git a/packages/core/tracing/src/utils/time.ts b/packages/core/tracing/src/utils/time.ts
index 8fc537f81e..b902bd2448 100644
--- a/packages/core/tracing/src/utils/time.ts
+++ b/packages/core/tracing/src/utils/time.ts
@@ -35,6 +35,17 @@ export const getDurationFormatter = (locales: Intl.LocalesArgument = 'en') => {
   }
 }
 
+/**
+ * Latencies are rounded up and formatted in milliseconds with one decimal place.
+ */
+export const formatLatency = (milliseconds?: number) => {
+  if (milliseconds === undefined || Number.isNaN(milliseconds)) {
+    return 'N/A'
+  }
+
+  return `${Math.round(milliseconds * 10 + Number.EPSILON) / 10}ms`
+}
+
 /**
  * This function formats a nanosecond duration into a human-readable string.
  * The output string will use the local time zone.