diff --git a/tests/ui/perfherder/legend_card_test.jsx b/tests/ui/perfherder/legend_card_test.jsx
new file mode 100644
index 000000000..5f9384176
--- /dev/null
+++ b/tests/ui/perfherder/legend_card_test.jsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { cleanup, render, waitForElement } from '@testing-library/react';
+
+import LegendCard from '../../../ui/perfherder/graphs/LegendCard';
+import { legendCardText } from '../../../ui/perfherder/constants';
+
+const testData = [
+  {
+    color: ['brown', '#b87e17'],
+    data: [],
+    framework_id: 1,
+    id: 'mozilla-central ts_paint_flex opt e10s stylo',
+    lowerIsBetter: true,
+    name: 'ts_paint_flex opt e10s stylo',
+    parentSignature: null,
+    platform: 'linux64',
+    projectId: 1,
+    repository_name: 'mozilla-central',
+    resultSetData: [],
+    signatureHash: '9c0028a9c871b51c8296485c8fc09b21fe41eec0',
+    signature_id: 1647493,
+    visible: true,
+  },
+  {
+    color: ['darkorchid', '#9932cc'],
+    data: [],
+    framework_id: 13,
+    id: 'mozilla-central raptor-tp6-amazon-firefox opt',
+    lowerIsBetter: true,
+    name: 'raptor-tp6-amazon-firefox opt ',
+    parentSignature: null,
+    platform: 'linux64',
+    projectId: 1,
+    repository_name: 'mozilla-central',
+    resultSetData: [],
+    signatureHash: '554cc85b904ede676c691b65bbe19911c7320718',
+    signature_id: 2146210,
+    visible: true,
+  },
+];
+
+const colors = [
+  ['darkorchid', '#9932cc'],
+  ['blue', '#1752b8'],
+];
+
+const legendCard = (series, testData) =>
+  render(
+    <LegendCard
+      series={series}
+      testData={testData}
+      frameworks={[{ id: 1, name: 'talos' }]}
+      updateState={() => {}}
+      updateStateParams={() => {}}
+      colors={colors}
+    />,
+  );
+
+afterEach(cleanup);
+
+test('legend card displays the framework badge', async () => {
+  const { queryByText } = legendCard(testData[0], testData);
+
+  const frameworkBadge = await waitForElement(() => queryByText('talos'));
+  expect(frameworkBadge).toBeInTheDocument();
+});
+
+test('legend card with incorrect framework displays the unknown framework badge message', async () => {
+  const { queryByText } = legendCard(testData[1], testData);
+
+  const frameworkBadge = await waitForElement(() =>
+    queryByText(legendCardText.unknownFrameworkMessage),
+  );
+  expect(frameworkBadge).toBeInTheDocument();
+});
diff --git a/ui/perfherder/constants.js b/ui/perfherder/constants.js
index dbf242aa0..a0f4aa51c 100644
--- a/ui/perfherder/constants.js
+++ b/ui/perfherder/constants.js
@@ -19,6 +19,10 @@ export const filterText = {
   inputPlaceholder: 'filter text e.g. linux tp5o',
 };
 
+export const legendCardText = {
+  unknownFrameworkMessage: 'unknown framework',
+};
+
 export const selectorCardText = {
   invalidRevision: 'Invalid revision',
   invalidRevisionLength: 'Revision must be at least 40 characters',
diff --git a/ui/perfherder/graphs/LegendCard.jsx b/ui/perfherder/graphs/LegendCard.jsx
index 5d161f86c..bc7d04eaa 100644
--- a/ui/perfherder/graphs/LegendCard.jsx
+++ b/ui/perfherder/graphs/LegendCard.jsx
@@ -3,16 +3,19 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormGroup, Input } from 'reactstrap';
+import { Badge, FormGroup, Input } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
 
+import { legendCardText } from '../constants';
+
 const LegendCard = ({
   series,
   testData,
   updateState,
   updateStateParams,
   selectedDataPoint,
+  frameworks,
   colors,
 }) => {
   const updateSelectedTest = () => {
@@ -86,6 +89,10 @@ const LegendCard = ({
     resetParams(newData);
   };
 
+  const getFrameworkName = frameworkId => {
+    const framework = frameworks.find(item => item.id === frameworkId);
+    return framework ? framework.name : legendCardText.unknownFrameworkMessage;
+  };
   const subtitleStyle = 'p-0 mb-0 border-0 text-secondary text-left';
 
   return (
@@ -125,10 +132,8 @@ const LegendCard = ({
         >
           {series.platform}
         </p>
-        <span className="small">{`${series.signatureHash.slice(
-          0,
-          16,
-        )}...`}</span>
+        <Badge> {getFrameworkName(series.framework_id)} </Badge>
+        <div className="small">{`${series.signatureHash.slice(0, 16)}...`}</div>
       </div>
       <Input
         className="show-hide-check"