diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx
index 1c539addf2d2f..2fa13b5da43e2 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx
@@ -12,9 +12,7 @@ import {
   EuiFlyoutBody,
   EuiTitle,
   EuiDescriptionList,
-  EuiText,
   EuiSpacer,
-  EuiCodeBlock,
   EuiFlyoutFooter,
   EuiFlexGroup,
   EuiFlexItem,
@@ -22,6 +20,8 @@ import {
 } from '@elastic/eui';
 import { Pipeline } from '../../../../common/types';
 
+import { PipelineDetailsJsonBlock } from './details_json_block';
+
 export interface Props {
   pipeline: Pipeline;
   onEditClick: () => void;
@@ -71,23 +71,31 @@ export const PipelineDetails: FunctionComponent<Props> = ({
 
         <EuiSpacer size="m" />
 
-        <EuiText size="s">
-          <label htmlFor="piplineDetailsProcessorsJson">
-            <b>
-              {i18n.translate('xpack.ingestPipelines.list.pipelineDetails.processorsTitle', {
-                defaultMessage: 'Processors JSON',
-              })}
-            </b>
-          </label>
-        </EuiText>
-        <EuiCodeBlock
-          id="piplineDetailsProcessorsJson"
-          language="json"
-          overflowHeight={500}
-          isCopyable
-        >
-          {JSON.stringify(pipeline.processors, null, 2)}
-        </EuiCodeBlock>
+        <PipelineDetailsJsonBlock
+          htmlForId="pipelineDetailsProcessorsJson"
+          label={i18n.translate('xpack.ingestPipelines.list.pipelineDetails.processorsTitle', {
+            defaultMessage: 'Processors JSON',
+          })}
+          json={pipeline.processors}
+        />
+
+        {/* On Failure Processor JSON */}
+        {pipeline.onFailure?.length && (
+          <>
+            <EuiSpacer size="m" />
+            <PipelineDetailsJsonBlock
+              htmlForId="pipelineDetailsOnFailureProcessorsJson"
+              label={i18n.translate(
+                'xpack.ingestPipelines.list.pipelineDetails.failureProcessorsTitle',
+                {
+                  defaultMessage: 'On failure processors JSON',
+                }
+              )}
+              json={pipeline.onFailure}
+            />
+          </>
+        )}
+        {/* End On Failure Processor JSON */}
       </EuiFlyoutBody>
 
       <EuiFlyoutFooter>