diff --git a/public/app/features/trails/DataTrailCard.tsx b/public/app/features/trails/DataTrailCard.tsx
index fa3f2b185af..a0e35dc8701 100644
--- a/public/app/features/trails/DataTrailCard.tsx
+++ b/public/app/features/trails/DataTrailCard.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import { dateTimeFormat, GrafanaTheme2 } from '@grafana/data';
 import { AdHocFiltersVariable, sceneGraph } from '@grafana/scenes';
-import { Badge, Card, IconButton, Stack, useStyles2 } from '@grafana/ui';
+import { Card, IconButton, Stack, Tag, useStyles2 } from '@grafana/ui';
 
 import { DataTrail } from './DataTrail';
 import { VAR_FILTERS } from './shared';
@@ -26,13 +26,15 @@ export function DataTrailCard({ trail, onSelect, onDelete }: Props) {
   const filters = filtersVariable.state.filters;
   const dsValue = getDataSource(trail);
 
+  const onClick = () => onSelect(trail);
+
   return (
-    <Card onClick={() => onSelect(trail)} className={styles.card}>
+    <Card onClick={onClick} className={styles.card}>
       <Card.Heading>{getMetricName(trail.state.metric)}</Card.Heading>
       <div className={styles.description}>
         <Stack gap={1.5}>
           {filters.map((f) => (
-            <Badge key={f.key} text={`${f.key}: ${f.value}`} color={'blue'} className={styles.tag} />
+            <Tag key={f.key} name={`${f.key}: ${f.value}`} colorIndex={12} />
           ))}
         </Stack>
       </div>