diff --git a/src/components/workflows/TrendLegend.vue b/src/components/workflows/TrendLegend.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dfa23155ed297a3bf52b61ae63cab90e93c997ce
--- /dev/null
+++ b/src/components/workflows/TrendLegend.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  showTextColors: boolean
+}>(), {
+  showTextColors: true
+})
+</script>
+
+<template>
+  <div class="flex space-x-3 text-sm text-gray-600" :class="{ 'text-colors': showTextColors }">
+    <div class="flex items-center positive"><i class="w-3 h-3 mr-1"></i><span>{{ $t('positive') }}</span></div>
+    <div class="flex items-center neutral"><i class="w-3 h-3 mr-1"></i><span>{{ $t('neutral') }}</span></div>
+    <div class="flex items-center negative"><i class="w-3 h-3 mr-1"></i><span>{{ $t('negative') }}</span></div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+.text-colors {
+  .positive {
+    i {
+      background: var(--color--positive-text);
+    }
+  }
+
+  .neutral {
+    i {
+      background: var(--color--neutral-text);
+    }
+  }
+
+  .negative {
+    i {
+      background: var(--color--negative-text);
+    }
+  }
+}
+
+.positive {
+  i {
+    background: var(--color--positive-background);
+  }
+}
+
+.neutral {
+  i {
+    background: var(--color--neutral-background);
+  }
+}
+
+.negative {
+  i {
+    background: var(--color--negative-background);
+  }
+}
+
+</style>
diff --git a/src/components/workflows/WorkflowsTable.vue b/src/components/workflows/WorkflowsTable.vue
index 09f9f0494d97d1cfedb18d75468b3a3e10d99692..f12c7076bd2b381b8d0cd7c9fd1adf189e22d931 100644
--- a/src/components/workflows/WorkflowsTable.vue
+++ b/src/components/workflows/WorkflowsTable.vue
@@ -7,6 +7,7 @@ import Dropdown from 'primevue/dropdown'
 import workflowsStore from "@/store/workflows-store"
 import api from "@/helpers/api"
 import filtersStore from "@/store/filters-store"
+import TrendLegend from "@/components/workflows/TrendLegend.vue"
 
 const { t } = useI18n()
 
@@ -118,11 +119,12 @@ const groupByDocuments = () => {
     Loading...
   </template>
   <template v-else>
-    <div class="flex mb-4" v-if="evals.length > 0">
-      <div class="flex items-center ml-auto">
+    <div class="flex flex-col" v-if="evals.length > 0">
+      <div class="flex items-center mb-4 ml-auto">
         <p class="mr-2">{{ $t('group_by') }}:</p>
         <Dropdown v-model="sortBy" :options="sortOptions" optionLabel="label" placeholder="Choose something.." class="" />
       </div>
+      <TrendLegend :show-text-colors="false" class="ml-auto mb-4"/>
     </div>
     <table v-if="evals.length > 0" class="w-full border border-collapse rounded text-sm">
       <thead>
diff --git a/src/components/workflows/WorkflowsTimeline.vue b/src/components/workflows/WorkflowsTimeline.vue
index bb038ec106f82a4f67bb82d4df09ec6d01dddd3f..e957da89fa4d6d3410c4ef572bb5185b4dc6ca04 100644
--- a/src/components/workflows/WorkflowsTimeline.vue
+++ b/src/components/workflows/WorkflowsTimeline.vue
@@ -9,6 +9,7 @@ import { DropdownPassThroughStyles } from '@/helpers/pt'
 import workflowsStore from '@/store/workflows-store'
 import filtersStore from '@/store/filters-store'
 import timelineStore from "@/store/timeline-store"
+import TrendLegend from "@/components/workflows/TrendLegend.vue";
 
 const { t } = useI18n()
 const gtList = computed<GroundTruth[]>(() => workflowsStore.gt.filter(({ id }) => filtersStore.gt.findIndex(({ value }) => value === id) > -1))
@@ -44,6 +45,7 @@ watch(selectedMetric,
         unstyled
       />
     </div>
+    <TrendLegend class="ml-auto mb-4"/>
     <div class="flex flex-col space-y-6">
       <template v-if="gtList.length > 0">
         <TimelineItem v-for="gt in gtList" :key="gt.id" :gt="gt" :metric="selectedMetricValue" />
diff --git a/src/locales/de.json b/src/locales/de.json
index 6f3886156c26c334677021185e90fea4b02d944a..a44655dd9c0b9d190ebb0a1b4f8a0b091ccbb427 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -55,5 +55,8 @@
   "date": "Datum",
   "ground_truth": "Ground Truth",
   "average": "Durchschnitt",
-  "cer_standard_deviation": "CER Standardabweichung"
+  "cer_standard_deviation": "CER Standardabweichung",
+  "positive": "positiv",
+  "neutral": "neutral",
+  "negative": "negativ"
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index 499ff47e760394953564d2bcb7f11ee7c10e4caf..d4ec545bf941115d9176836a10f2e22228a5323e 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -49,5 +49,8 @@
   "date": "Date",
   "ground_truth": "Ground Truth",
   "average": "Average",
-  "cer_standard_deviation": "CER Standard Deviation"
+  "cer_standard_deviation": "CER Standard Deviation",
+  "positive": "positive",
+  "neutral": "neutral",
+  "negative": "negative"
 }