diff --git a/web/src/pages/Cluster/components/cluster_card.js b/web/src/pages/Cluster/components/cluster_card.js
index 4c60cec1..178dda2a 100644
--- a/web/src/pages/Cluster/components/cluster_card.js
+++ b/web/src/pages/Cluster/components/cluster_card.js
@@ -1,7 +1,69 @@
 import './cluster_card.scss';
 
+import React from "react";
+
+import {
+    MiniArea, Pie
+} from '@/components/Charts';
+
 const ClusterCard = ()=>{
-  return (
+
+    const dataLine1 = [
+        {
+            x:"1991",
+            y: 10
+        },
+        {
+            x:"1992",
+            y: 161
+        },
+        {
+            x:"1993",
+            y: 120
+        },
+        {
+            x:"1994",
+            y: 190
+        },
+        {
+            x:"1995",
+            y: 50
+        },
+        {
+            x:"1996",
+            y: 80
+        },
+        {
+            x:"1997",
+            y: 130
+        },
+        {
+            x:"1998",
+            y: 200
+        },
+        {
+            x:"1999",
+            y: 140
+        },
+        {
+            x:"2000",
+            y: 90
+        },
+        {
+            x:"2001",
+            y: 40
+        },
+        {
+            x:"2002",
+            y: 100
+        },
+        {
+            x:"2003",
+            y: 10
+        }
+    ];
+
+    return (
     <div class="cluster-item">
         <div class="cluster-name">
             <span>Cluster A</span>
@@ -41,12 +103,40 @@ const ClusterCard = ()=>{
         <div class="cluster-chart">
             <div class="chart-top">
                 <div class="pie-chart">
-                    <div class="item pie1"></div>
-                    <div class="item pie2"></div>
+                    <div class="item pie1">
+                        <Pie
+                            animate={false}
+                            color={'#a9b108'}
+                            inner={0.55}
+                            tooltip={false}
+                            margin={[0, 0, 0, 0]}
+                            percent={0.75 * 100}
+                            height={80}
+                            total={'75%'}
+                        />
+                    </div>
+                    <div class="item pie2">
+                        <Pie
+                            animate={false}
+                            color={'#a9b108'}
+                            inner={0.55}
+                            tooltip={false}
+                            margin={[0, 0, 0, 0]}
+                            percent={0.96 * 100}
+                            height={80}
+                            total={'96%'}
+                        />
+                    </div>
                 </div>
                 <div class="line-chart">
-                    <div class="item line1"></div>
-                    <div class="item line2"></div>
+                    <div class="item line1">
+                        <MiniArea color="#efe6e6" height={40} data={dataLine1} />
+                        <div class="line-subtitle">200k search/s</div>
+                    </div>
+                    <div class="item line2">
+                        <MiniArea color="#efe6e6" height={40} data={dataLine1} />
+                        <div class="line-subtitle">200k indexing/s</div>
+                    </div>
                 </div>
             </div>
             <div class="chart-bottom">
diff --git a/web/src/pages/Cluster/components/cluster_card.scss b/web/src/pages/Cluster/components/cluster_card.scss
index 312d18ba..ac0db7ec 100644
--- a/web/src/pages/Cluster/components/cluster_card.scss
+++ b/web/src/pages/Cluster/components/cluster_card.scss
@@ -96,16 +96,16 @@
   width: 50%;
   display: flex;
   justify-content: space-between;
-  background-color: lightgray;
+  //background-color: lightgray;
 }
 .cluster-item .cluster-chart .chart-top .pie-chart .item {
   width: 50%;
 }
 .cluster-item .cluster-chart .chart-top .pie-chart .item.pie1{
-  background-color: goldenrod;
+  //background-color: goldenrod;
 }
 .cluster-item .cluster-chart .chart-top .pie-chart .item.pie2{
-  background-color: greenyellow;
+  //background-color: greenyellow;
 }
 .cluster-item .cluster-chart .chart-top .line-chart {
   height: 80px;
@@ -117,11 +117,18 @@
   height: 40px;
   width: 100%;
 }
+
+.cluster-item .cluster-chart .chart-top .line-chart .item .line-subtitle{
+  margin-top: -5px;
+  text-align: center;
+  font-size: 10px;
+}
 .cluster-item .cluster-chart .chart-top .line-chart .item.line1{
-  background-color: #ff8080;
+  //background-color: #ff8080;
+  margin-top: -10px;
 }
 .cluster-item .cluster-chart .chart-top .line-chart .item.line2{
-  background-color: lightseagreen;
+  //background-color: lightseagreen;
 }
 .cluster-item .cluster-chart .chart-bottom {
   height: 26px;