diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/expandable_text.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/expandable_text.tsx
deleted file mode 100644
index 7dfe7c142dd54..0000000000000
--- a/x-pack/plugins/ingest_pipelines/public/application/components/expandable_text.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-import React, { useState, FunctionComponent } from 'react';
-import { EuiLink, EuiText } from '@elastic/eui';
-
-interface Props {
-  text: string;
-  charLimit?: number;
-}
-
-const DEFAULT_CHAR_LIMIT = 25;
-
-export const ExpandableText: FunctionComponent<Props> = ({
-  text,
-  charLimit = DEFAULT_CHAR_LIMIT,
-}) => {
-  const [isExpanded, setExpanded] = useState(false);
-  const exceedsCharLimit = text.length > charLimit;
-
-  const processedText = exceedsCharLimit
-    ? isExpanded
-      ? text
-      : text.substr(0, charLimit) + '...'
-    : text;
-
-  return (
-    <EuiText size="s">
-      {processedText}
-      {exceedsCharLimit && (
-        <>
-          &nbsp;
-          <EuiLink onClick={() => setExpanded(!isExpanded)}>{isExpanded ? 'Less' : 'More'}</EuiLink>
-        </>
-      )}
-    </EuiText>
-  );
-};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/index.ts b/x-pack/plugins/ingest_pipelines/public/application/components/index.ts
deleted file mode 100644
index 2ade8f98dcc7f..0000000000000
--- a/x-pack/plugins/ingest_pipelines/public/application/components/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-export { ExpandableText } from './expandable_text';
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 b624e64a8cfda..8d59f77b301eb 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
@@ -5,18 +5,28 @@
  */
 
 import React, { FunctionComponent } from 'react';
-import { EuiFlyout, EuiFlyoutHeader, EuiFlyoutBody } from '@elastic/eui';
+import { i18n } from '@kbn/118n';
+import { EuiFlyout, EuiFlyoutHeader, EuiFlyoutBody, EuiTitle } from '@elastic/eui';
 import { Pipeline } from '../../../../common/types';
 
 export interface Props {
-  visible: boolean;
   pipeline: Pipeline;
+  onClose: () => void;
 }
 
-export const PipelineDetails: FunctionComponent<Props> = ({ pipeline, visible }) => {
-  if (!visible) {
-    return null;
-  }
-
-  return;
+export const PipelineDetails: FunctionComponent<Props> = ({ pipeline, onClose }) => {
+  return (
+    <EuiFlyout
+      onClose={onClose}
+      aria-labelledby="pipelineDetailsFlyoutTitle"
+      size="m"
+      maxWidth={550}
+    >
+      <EuiFlyoutHeader>
+        <EuiTitle id="pipelineDetailsFlyoutTitle">
+          <h2>{pipeline.name}</h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+    </EuiFlyout>
+  );
 };
diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/main.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/main.tsx
index 314118e632e96..6b48ea0bca8b0 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/main.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/main.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
@@ -21,15 +21,19 @@ import {
 
 import { EuiSpacer, EuiText } from '@elastic/eui';
 
+import { Pipeline } from '../../../../common/types';
 import { useKibana } from '../../../shared_imports';
 import { UIM_PIPELINES_LIST_LOAD } from '../../constants';
 
 import { EmptyList } from './empty_list';
 import { PipelineTable } from './table';
+import { PipelineDetails } from './details';
 
 export const PipelinesList: React.FunctionComponent = () => {
   const { services } = useKibana();
 
+  const [selectedPipeline, setSelectedPipeline] = useState<Pipeline | undefined>(undefined);
+
   // Track component loaded
   useEffect(() => {
     services.metric.trackUiMetric(UIM_PIPELINES_LIST_LOAD);
@@ -52,6 +56,7 @@ export const PipelinesList: React.FunctionComponent = () => {
       <PipelineTable
         onEditPipelineClick={() => {}}
         onDeletePipelineClick={() => {}}
+        onViewPipelineClick={setSelectedPipeline}
         pipelines={data}
       />
     );
@@ -60,55 +65,63 @@ export const PipelinesList: React.FunctionComponent = () => {
   }
 
   return (
-    <EuiPageBody>
-      <EuiPageContent>
-        <EuiTitle size="l">
-          <EuiFlexGroup alignItems="center">
-            <EuiFlexItem>
-              <h1 data-test-subj="appTitle">
-                <FormattedMessage
-                  id="xpack.ingestPipelines.list.listTitle"
-                  defaultMessage="Ingest Pipelines"
-                />
-              </h1>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
-                href={services.documentation.getIngestNodeUrl()}
-                target="_blank"
-                iconType="help"
-              >
-                <FormattedMessage
-                  id="xpack.ingestPipelines.list.pipelinesDocsLinkText"
-                  defaultMessage="Ingest Pipelines docs"
-                />
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiTitle>
-        <EuiSpacer size="s" />
-        <EuiTitle size="s">
-          <EuiText color="subdued">
-            <FormattedMessage
-              id="xpack.ingestPipelines.list.pipelinesDescription"
-              defaultMessage="Use ingest node pipelines to pre-process documents before indexing."
+    <>
+      <EuiPageBody>
+        <EuiPageContent>
+          <EuiTitle size="l">
+            <EuiFlexGroup alignItems="center">
+              <EuiFlexItem>
+                <h1 data-test-subj="appTitle">
+                  <FormattedMessage
+                    id="xpack.ingestPipelines.list.listTitle"
+                    defaultMessage="Ingest Pipelines"
+                  />
+                </h1>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiButtonEmpty
+                  href={services.documentation.getIngestNodeUrl()}
+                  target="_blank"
+                  iconType="help"
+                >
+                  <FormattedMessage
+                    id="xpack.ingestPipelines.list.pipelinesDocsLinkText"
+                    defaultMessage="Ingest Pipelines docs"
+                  />
+                </EuiButtonEmpty>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiTitle>
+          <EuiSpacer size="s" />
+          <EuiTitle size="s">
+            <EuiText color="subdued">
+              <FormattedMessage
+                id="xpack.ingestPipelines.list.pipelinesDescription"
+                defaultMessage="Use ingest node pipelines to pre-process documents before indexing."
+              />
+            </EuiText>
+          </EuiTitle>
+          <EuiSpacer size="m" />
+          {/* Error call out or pipeline table */}
+          {error ? (
+            <EuiCallOut
+              iconType="faceSad"
+              color="danger"
+              title={i18n.translate('xpack.ingestPipelines.list.loadErrorTitle', {
+                defaultMessage: 'Cannot load pipelines, please refresh the page to try again.',
+              })}
             />
-          </EuiText>
-        </EuiTitle>
-        <EuiSpacer size="m" />
-        {/* Error call out or pipeline table */}
-        {error ? (
-          <EuiCallOut
-            iconType="faceSad"
-            color="danger"
-            title={i18n.translate('xpack.ingestPipelines.list.loadErrorTitle', {
-              defaultMessage: 'Cannot load pipelines, please refresh the page to try again.',
-            })}
-          />
-        ) : (
-          content
-        )}
-      </EuiPageContent>
-    </EuiPageBody>
+          ) : (
+            content
+          )}
+        </EuiPageContent>
+      </EuiPageBody>
+      {selectedPipeline && (
+        <PipelineDetails
+          pipeline={selectedPipeline}
+          onClose={() => setSelectedPipeline(undefined)}
+        />
+      )}
+    </>
   );
 };
diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/table.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/table.tsx
index a7321564e54b8..0e5d90c891931 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/table.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/table.tsx
@@ -9,18 +9,18 @@ import { EuiInMemoryTable, EuiLink } from '@elastic/eui';
 
 import { Pipeline } from '../../../../common/types';
 
-import { ExpandableText } from '../../components';
-
 export interface Props {
   pipelines: Pipeline[];
   onEditPipelineClick: (pipeline: Pipeline) => void;
   onDeletePipelineClick: (pipeline: Pipeline) => void;
+  onViewPipelineClick: (pipeline: Pipeline) => void;
 }
 
 export const PipelineTable: FunctionComponent<Props> = ({
   pipelines,
   onEditPipelineClick,
   onDeletePipelineClick,
+  onViewPipelineClick,
 }) => {
   return (
     <EuiInMemoryTable
@@ -39,14 +39,9 @@ export const PipelineTable: FunctionComponent<Props> = ({
           name: i18n.translate('xpack.ingestPipelines.list.table.nameColumnTitle', {
             defaultMessage: 'Name',
           }),
-          render: (name: any) => <EuiLink onClick={() => {}}>{name}</EuiLink>,
-        },
-        {
-          field: 'description',
-          name: i18n.translate('xpack.ingestPipelines.list.table.descriptionColumnTitle', {
-            defaultMessage: 'Description',
-          }),
-          render: (description: any) => <ExpandableText charLimit={50} text={description} />,
+          render: (name: any, pipeline) => (
+            <EuiLink onClick={() => onViewPipelineClick(pipeline)}>{name}</EuiLink>
+          ),
         },
         {
           name: i18n.translate('xpack.ingestPipelines.list.table.actionColumnTitle', {