diff --git a/web/src/pages/Cluster/ClusterItem.less b/web/src/pages/Cluster/ClusterItem.less
new file mode 100644
index 00000000..e4e5b1cc
--- /dev/null
+++ b/web/src/pages/Cluster/ClusterItem.less
@@ -0,0 +1,7 @@
+
+.clusterItem {
+  display: inline-block;
+  text-align: center;
+  width: 100%;
+  height: 400px;
+}
diff --git a/web/src/pages/Cluster/ClusterList.js b/web/src/pages/Cluster/ClusterList.js
index f2a4e51a..13a44cf7 100644
--- a/web/src/pages/Cluster/ClusterList.js
+++ b/web/src/pages/Cluster/ClusterList.js
@@ -4,6 +4,7 @@ import {Link} from 'umi';
 import {extendHex, defineGrid} from 'honeycomb-grid';
 import { SVG } from '@svgdotjs/svg.js'
 import { connect } from 'dva';
+import styles from './ClusterItem.less';
 
 @connect(({ clusterMonitor }) => ({
   clusterMonitor
@@ -64,7 +65,7 @@ class ClusterItem extends Component {
     const draw = SVG().addTo(this.root).size('100%', '100%')
 
     let data = this.props.data;
-    const rect = { width: 5, height: 3 };
+    const rect = { width: 4, height: 20 };
     
     const Hex = extendHex({
       size: 30,
@@ -116,9 +117,10 @@ class ClusterItem extends Component {
   }
   render(){
     return (
-      <div ref={ref=>this.root=ref}></div>
+      <div className={styles.clusterItem} ref={ref=>this.root=ref}></div>
     )
   }
 }
 
+export {ClusterItem};
 export default ClusterList;
\ No newline at end of file
diff --git a/web/src/pages/Cluster/Overview.js b/web/src/pages/Cluster/Overview.js
index 4e0e29c5..ae7ef354 100644
--- a/web/src/pages/Cluster/Overview.js
+++ b/web/src/pages/Cluster/Overview.js
@@ -1,9 +1,10 @@
 import React, {Fragment} from 'react';
-import {Card, Divider, Popconfirm, Row, Col, Table, Descriptions} from "antd";
+import {Card, List, Divider, Popconfirm, Row, Col, Table, Descriptions} from "antd";
 import {Link} from "umi"
 import moment from "moment";
 import styles from "./Overview.less";
 import {connect} from "dva";
+import {ClusterItem} from "./ClusterList";
 
 let HealthCircle = (props)=>{
   return (
@@ -56,45 +57,133 @@ class Overview extends  React.Component {
       ),
     }
   ];
+
+  clusterItem = {
+    name: 'cluster-test-name4',
+    nodes: [{
+      name: 'node-32',
+      status: 'green'
+    },{
+      name: 'node-33',
+      status: 'green'
+    },{
+      name: 'node-34',
+      status: 'green'
+    },{
+      name: 'node-35',
+      status: 'green'
+    },{
+      name: 'node-36',
+      status: 'green'
+    },{
+      name: 'node-37',
+      status: 'yellow'
+    },{
+      name: 'node-33',
+      status: 'green'
+    },{
+      name: 'node-34',
+      status: 'green'
+    },{
+      name: 'node-35',
+      status: 'green'
+    },{
+      name: 'node-36',
+      status: 'green'
+    },{
+      name: 'node-37',
+      status: 'yellow'
+    },{
+      name: 'node-33',
+      status: 'green'
+    },{
+      name: 'node-34',
+      status: 'green'
+    },{
+      name: 'node-35',
+      status: 'green'
+    },{
+      name: 'node-36',
+      status: 'green'
+    },{
+      name: 'node-37',
+      status: 'yellow'
+    },{
+      name: 'node-33',
+      status: 'green'
+    },{
+      name: 'node-34',
+      status: 'green'
+    },{
+      name: 'node-35',
+      status: 'green'
+    },{
+      name: 'node-36',
+      status: 'green'
+    },{
+      name: 'node-37',
+      status: 'yellow'
+    },{
+      name: 'node-38',
+      status: 'green'
+    }],
+  };
+
   render() {
-    return (<Card title={this.props.selectedCluster?this.props.selectedCluster.name:''}>
-      <Row gutter={[16,16]}>
-        <Col xs={24} sm={12} md={12} lg={8} >
-          <Card title="Summary" size={"small"}>
-            <Descriptions column={1} bordered colon={false} className={styles.overview}>
-              <Descriptions.Item label="Health"><HealthCircle color="green"/>Healthy</Descriptions.Item>
-              <Descriptions.Item label="Version">7.10.0</Descriptions.Item>
-              <Descriptions.Item label="Uptime">3 天</Descriptions.Item>
-              <Descriptions.Item label="License">Basic</Descriptions.Item>
-            </Descriptions>
+
+    return (
+        <div>
+          <Card title={this.props.selectedCluster?this.props.selectedCluster.name:''}>
+            <Row gutter={[16,16]}>
+              <Col xs={24} sm={12} md={12} lg={8} >
+                <Card title="Summary" size={"small"}>
+                  <Descriptions column={1} bordered colon={false} className={styles.overview}>
+                    <Descriptions.Item label="Health"><HealthCircle color="green"/>Healthy</Descriptions.Item>
+                    <Descriptions.Item label="Version">7.10.0</Descriptions.Item>
+                    <Descriptions.Item label="Uptime">3 天</Descriptions.Item>
+                    <Descriptions.Item label="License">Basic</Descriptions.Item>
+                  </Descriptions>
+                </Card>
+              </Col>
+              <Col xs={24} sm={12} md={12} lg={8}>
+                <Card title="Nodes:2" size={"small"}>
+                  <Descriptions column={1} bordered colon={false} size="small" className={styles.overview}>
+                    <Descriptions.Item label="Disk Available">
+                      83.21%
+                      <p className={styles.light}>775.1 GB / 931.5 GB</p>
+                    </Descriptions.Item>
+                    <Descriptions.Item label="JVM Heap">
+                      27.60%
+                      <p className={styles.light}>565.3 GB / 2.0 GB</p>
+                    </Descriptions.Item>
+                  </Descriptions>
+                </Card>
+              </Col>
+              <Col xs={24} sm={12} md={12} lg={8}>
+                <Card title="Indices:27" size={"small"}>
+                  <Descriptions column={1} bordered colon={false} className={styles.overview}>
+                    <Descriptions.Item label="Documents">20,812,087</Descriptions.Item>
+                    <Descriptions.Item label="Disk Usage">1.1 GB</Descriptions.Item>
+                    <Descriptions.Item label="Primary Shards">28</Descriptions.Item>
+                    <Descriptions.Item label="Replica Shards">26</Descriptions.Item>
+                  </Descriptions>
+                </Card>
+              </Col>
+            </Row>
           </Card>
-        </Col>
-        <Col xs={24} sm={12} md={12} lg={8}>
-          <Card title="Nodes:2" size={"small"}>
-            <Descriptions column={1} bordered colon={false} size="small" className={styles.overview}>
-              <Descriptions.Item label="Disk Available">
-                83.21%
-                <p className={styles.light}>775.1 GB / 931.5 GB</p>
-              </Descriptions.Item>
-              <Descriptions.Item label="JVM Heap">
-                27.60%
-                <p className={styles.light}>565.3 GB / 2.0 GB</p>
-              </Descriptions.Item>
-            </Descriptions>
+
+          <Card title={this.clusterItem.name + ": "+ this.clusterItem.nodes.length}
+                extra={<Link to={"/cluster/monitoring/" + this.clusterItem.name}>查看更多</Link>}
+          >
+            <div className={styles.clusterItemCard}>
+              {/* {item.nodes.map(node => {
+                    return (<a><Tag style={{marginBottom:5}} color={node.status}>{node.name}</Tag></a>);
+                  })} */}
+              <ClusterItem data={this.clusterItem} />
+            </div>
           </Card>
-        </Col>
-        <Col xs={24} sm={12} md={12} lg={8}>
-          <Card title="Indices:27" size={"small"}>
-            <Descriptions column={1} bordered colon={false} className={styles.overview}>
-              <Descriptions.Item label="Documents">20,812,087</Descriptions.Item>
-              <Descriptions.Item label="Disk Usage">1.1 GB</Descriptions.Item>
-              <Descriptions.Item label="Primary Shards">28</Descriptions.Item>
-              <Descriptions.Item label="Replica Shards">26</Descriptions.Item>
-            </Descriptions>
-          </Card>
-        </Col>
-      </Row>
-    </Card>)
+        </div>
+    )
   }
 }
 
diff --git a/web/src/pages/Cluster/Overview.less b/web/src/pages/Cluster/Overview.less
index 85036184..a85530ce 100644
--- a/web/src/pages/Cluster/Overview.less
+++ b/web/src/pages/Cluster/Overview.less
@@ -16,4 +16,8 @@
     .light{
         color: #666;
     }
+}
+
+.clusterItemCard {
+    text-align: center;
 }
\ No newline at end of file