diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/api/db.json b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/api/db.json
index 204609f66fe..e4ed0ac048e 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/api/db.json
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/api/db.json
@@ -44,6 +44,42 @@
             "replicationType": "RATIS",
             "replicationFactor": 1,
             "leaderNode": "localhost1.storage.enterprise.com"
+          },
+          {
+            "pipelineID": "02e3d908-ff01-4ce6-ad75-f3ec79bcc710",
+            "replicationType": "RATIS",
+            "replicationFactor": 3,
+            "leaderNode": "localhost1.storage.enterprise.com"
+          },
+          {
+            "pipelineID": "09d3a478-ff01-4ce6-ad75-f3ec79bcc711",
+            "replicationType": "RATIS",
+            "replicationFactor": 1,
+            "leaderNode": "localhost1.storage.enterprise.com"
+          },
+          {
+            "pipelineID": "02e3d908-ff01-4ce6-ad75-f3ec79bcc712",
+            "replicationType": "RATIS",
+            "replicationFactor": 3,
+            "leaderNode": "localhost1.storage.enterprise.com"
+          },
+          {
+            "pipelineID": "09d3a478-ff01-4ce6-ad75-f3ec79bcc713",
+            "replicationType": "RATIS",
+            "replicationFactor": 1,
+            "leaderNode": "localhost1.storage.enterprise.com"
+          },
+          {
+            "pipelineID": "02e3d908-ff01-4ce6-ad75-f3ec79bcc714",
+            "replicationType": "RATIS",
+            "replicationFactor": 3,
+            "leaderNode": "localhost1.storage.enterprise.com"
+          },
+          {
+            "pipelineID": "09d3a478-ff01-4ce6-ad75-f3ec79bcc715",
+            "replicationType": "RATIS",
+            "replicationFactor": 1,
+            "leaderNode": "localhost1.storage.enterprise.com"
           }
         ],
         "containers": 80,
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/datanodes/datanodes.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/datanodes/datanodes.tsx
index 19f306ae4f6..c42bd8c1f91 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/datanodes/datanodes.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/datanodes/datanodes.tsx
@@ -17,7 +17,7 @@
  */
 
 import React from 'react';
-import {Table, Icon, Tooltip} from 'antd';
+import {Table, Icon, Tooltip, Popover} from 'antd';
 import {PaginationConfig} from 'antd/lib/pagination';
 import moment from 'moment';
 import {ReplicationIcon} from 'utils/themeIcons';
@@ -192,21 +192,36 @@ const COLUMNS = [
     key: 'pipelines',
     isVisible: true,
     render: (pipelines: IPipeline[], record: IDatanode) => {
+      let firstThreePipelinesIDs = [];
+      let remainingPipelinesIDs: any[] = [];
+      firstThreePipelinesIDs = pipelines && pipelines.filter((element, index) => index < 3);
+      remainingPipelinesIDs = pipelines && pipelines.slice(3, pipelines.length);
+
+      const RenderPipelineIds = ({ pipelinesIds }) => {
+        return pipelinesIds && pipelinesIds.map((pipeline: any, index: any) => (
+          <div key={index} className='pipeline-container'>
+            <ReplicationIcon
+              replicationFactor={pipeline.replicationFactor}
+              replicationType={pipeline.replicationType}
+              leaderNode={pipeline.leaderNode}
+              isLeader={pipeline.leaderNode === record.hostname} />
+            {pipeline.pipelineID}
+          </div >
+        ))
+      }
+
       return (
-        <div>
+        <>
           {
-            pipelines && pipelines.map((pipeline, index) => (
-              <div key={index} className='pipeline-container'>
-                <ReplicationIcon
-                  replicationFactor={pipeline.replicationFactor}
-                  replicationType={pipeline.replicationType}
-                  leaderNode={pipeline.leaderNode}
-                  isLeader={pipeline.leaderNode === record.hostname}/>
-                {pipeline.pipelineID}
-              </div>
-            ))
+            <RenderPipelineIds pipelinesIds={firstThreePipelinesIDs} />
           }
-        </div>
+          {
+            remainingPipelinesIDs.length > 0 &&
+            <Popover content={<RenderPipelineIds pipelinesIds={remainingPipelinesIDs} />} title="Remaining pipelines" placement="rightTop" trigger="hover">
+              {`... and ${remainingPipelinesIDs.length} more pipelines`}
+            </Popover>
+          }
+        </>
       );
     }
   },