diff --git a/packages/components/src/components/DetailsHeader/DetailsHeader.scss b/packages/components/src/components/DetailsHeader/DetailsHeader.scss
index 4f4401c5e..f351ff8d3 100644
--- a/packages/components/src/components/DetailsHeader/DetailsHeader.scss
+++ b/packages/components/src/components/DetailsHeader/DetailsHeader.scss
@@ -1,5 +1,5 @@
 /*
-Copyright 2019-2021 The Tekton Authors
+Copyright 2019-2022 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -88,7 +88,6 @@ header.tkn--step-details-header {
   &[data-status='terminated'][data-reason='Error'],
   &[data-status='False'],
   &[data-status='cancelled'],
-  &[data-reason='PipelineRunCancelled'],
   &[data-reason='TaskRunCancelled'],
   &[data-reason='TaskRunTimeout'] {
     .tkn--status-label {
diff --git a/packages/components/src/components/DetailsHeader/DetailsHeader.stories.js b/packages/components/src/components/DetailsHeader/DetailsHeader.stories.js
index 372f2eec0..90dc737e1 100644
--- a/packages/components/src/components/DetailsHeader/DetailsHeader.stories.js
+++ b/packages/components/src/components/DetailsHeader/DetailsHeader.stories.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2019-2021 The Tekton Authors
+Copyright 2019-2022 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -48,11 +48,12 @@ export default {
   title: 'Components/DetailsHeader'
 };
 
-export const Running = args => (
+export const Cancelled = args => (
   <DetailsHeader
-    status="running"
+    reason="TaskRunCancelled"
+    status="terminated"
     displayName="build"
-    taskRun={getTaskRun({ reason: 'Running', status: 'Unknown' })}
+    taskRun={getTaskRun({ reason: 'TaskRunCancelled', status: 'False' })}
     {...args}
   />
 );
@@ -96,3 +97,12 @@ export const Pending = args => (
     {...args}
   />
 );
+
+export const Running = args => (
+  <DetailsHeader
+    status="running"
+    displayName="build"
+    taskRun={getTaskRun({ reason: 'Running', status: 'Unknown' })}
+    {...args}
+  />
+);
diff --git a/packages/components/src/components/StatusIcon/StatusIcon.js b/packages/components/src/components/StatusIcon/StatusIcon.js
index 2e3db7c96..b0e8a4ecb 100644
--- a/packages/components/src/components/StatusIcon/StatusIcon.js
+++ b/packages/components/src/components/StatusIcon/StatusIcon.js
@@ -82,7 +82,9 @@ export default function StatusIcon({
     statusClass = hasWarning ? 'warning' : 'success';
   } else if (
     status === 'False' &&
-    (reason === 'PipelineRunCancelled' || reason === 'TaskRunCancelled')
+    (reason === 'PipelineRunCancelled' ||
+      reason === 'Cancelled' ||
+      reason === 'TaskRunCancelled')
   ) {
     statusClass = 'cancelled';
   } else if (
diff --git a/packages/components/src/components/StatusIcon/StatusIcon.stories.js b/packages/components/src/components/StatusIcon/StatusIcon.stories.js
index edbba5d00..645bb70b6 100644
--- a/packages/components/src/components/StatusIcon/StatusIcon.stories.js
+++ b/packages/components/src/components/StatusIcon/StatusIcon.stories.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2020-2021 The Tekton Authors
+Copyright 2020-2022 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -34,12 +34,30 @@ export default {
   title: 'Components/StatusIcon'
 };
 
-export const Queued = args => <StatusIcon {...args} />;
+export const CancelledGraceful = args => (
+  <StatusIcon reason="Cancelled" status="False" {...args} />
+);
+CancelledGraceful.storyName =
+  'Cancelled - PipelineRun TEP-0058 graceful termination';
+
+export const CancelledPipelineRun = args => (
+  <StatusIcon reason="PipelineRunCancelled" status="False" {...args} />
+);
+CancelledPipelineRun.storyName = 'Cancelled - PipelineRun legacy';
+
+export const CancelledTaskRun = args => (
+  <StatusIcon reason="TaskRunCancelled" status="False" {...args} />
+);
+CancelledTaskRun.storyName = 'Cancelled - TaskRun';
+
+export const Failed = args => <StatusIcon status="False" {...args} />;
 
 export const Pending = args => (
   <StatusIcon reason="Pending" status="Unknown" {...args} />
 );
 
+export const Queued = args => <StatusIcon {...args} />;
+
 export const Running = args => (
   <StatusIcon reason="Running" status="Unknown" {...args} />
 );
@@ -50,5 +68,3 @@ export const SucceededWithWarning = args => (
   <StatusIcon hasWarning status="True" {...args} />
 );
 SucceededWithWarning.storyName = 'Succeeded with warning';
-
-export const Failed = args => <StatusIcon status="False" {...args} />;
diff --git a/packages/components/src/components/StatusIcon/StatusIcon.test.js b/packages/components/src/components/StatusIcon/StatusIcon.test.js
index d89e4ac54..6892ef57f 100644
--- a/packages/components/src/components/StatusIcon/StatusIcon.test.js
+++ b/packages/components/src/components/StatusIcon/StatusIcon.test.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2021 The Tekton Authors
+Copyright 2021-2022 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -28,6 +28,10 @@ describe('StatusIcon', () => {
     render(<StatusIcon reason="PipelineRunCancelled" status="False" />);
   });
 
+  it('renders Cancelled state', () => {
+    render(<StatusIcon reason="Cancelled" status="False" />);
+  });
+
   it('renders TaskRunCancelled state', () => {
     render(<StatusIcon reason="TaskRunCancelled" status="False" />);
   });
diff --git a/packages/utils/src/utils/index.js b/packages/utils/src/utils/index.js
index 1ba4b9d8c..fc69481c1 100644
--- a/packages/utils/src/utils/index.js
+++ b/packages/utils/src/utils/index.js
@@ -316,13 +316,16 @@ export function runMatchesStatusFilter({ run, statusFilter }) {
       return (
         (status === 'False' &&
           reason !== 'PipelineRunCancelled' &&
+          reason !== 'Cancelled' &&
           reason !== 'TaskRunCancelled') ||
         (status === 'Unknown' && reason === 'PipelineRunCouldntCancel')
       );
     case 'cancelled':
       return (
         status === 'False' &&
-        (reason === 'PipelineRunCancelled' || reason === 'TaskRunCancelled')
+        (reason === 'PipelineRunCancelled' ||
+          reason === 'Cancelled' ||
+          reason === 'TaskRunCancelled')
       );
     case 'completed':
       return status === 'True';