diff --git a/src/components/dashboard/numberCard.js b/src/components/dashboard/numberCard.js
new file mode 100644
index 0000000..5d4b958
--- /dev/null
+++ b/src/components/dashboard/numberCard.js
@@ -0,0 +1,18 @@
+import React, {PropTypes} from 'react'
+import {Icon} from 'antd'
+import styles from './numberCard.less'
+
+function NumberCard(props) {
+  const {icon, color, title, number} = props
+  return (
+    <div className={styles.numberCard}>
+      <Icon className={styles.iconWarp} type={icon}/>
+      <div className={styles.content}>
+        <p className={styles.title}>{title||'Online Review'}</p>
+        <p className={styles.number}>{number||'1654,563'}</p>
+      </div>
+    </div>
+  )
+}
+
+export default NumberCard
diff --git a/src/components/dashboard/numberCard.less b/src/components/dashboard/numberCard.less
new file mode 100644
index 0000000..4ff50ae
--- /dev/null
+++ b/src/components/dashboard/numberCard.less
@@ -0,0 +1,23 @@
+.numberCard{
+  box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.05);
+  display: flex;
+  padding: 32px;
+  font-family: monospace;
+  .iconWarp{
+    font-size: 54px;
+  }
+  .content{
+    width: 100%;
+    padding-left: 24px;
+    .title{
+      line-height: 16px;
+      font-size: 16px;
+      margin-bottom: 8px;
+    }
+    .number{
+      line-height: 32px;
+      font-size: 24px;
+      font-weight: 700;
+    }
+  }
+}
diff --git a/src/components/layout/common.less b/src/components/layout/common.less
index 5f90d0c..d964893 100644
--- a/src/components/layout/common.less
+++ b/src/components/layout/common.less
@@ -56,6 +56,9 @@ body {
 
   .ant-table-tbody > tr > td {
     text-align: center;
+    &:last-child{
+      border-right: none;
+    }
   }
 
   &.ant-table-small {
diff --git a/src/components/layout/main.less b/src/components/layout/main.less
index d5e8281..1cb9272 100644
--- a/src/components/layout/main.less
+++ b/src/components/layout/main.less
@@ -1,4 +1,4 @@
-@import "./vars.less";
+@import "../vars.less";
 
 .layout {
   position: relative;
diff --git a/src/components/layout/vars.less b/src/components/vars.less
similarity index 98%
rename from src/components/layout/vars.less
rename to src/components/vars.less
index 7140eea..29ab682 100644
--- a/src/components/layout/vars.less
+++ b/src/components/vars.less
@@ -1,4 +1,4 @@
-@import "../../../node_modules/antd/lib/style/themes/default.less";
+@import "../../node_modules/antd/lib/style/themes/default.less";
 // // Prefix
 // @ant-prefix             : ant;
 //
diff --git a/src/router.js b/src/router.js
index abf1c58..8f5079b 100644
--- a/src/router.js
+++ b/src/router.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Router, Route , IndexRedirect , hashHistory} from 'dva/router'
+import { Router, Route , IndexRedirect } from 'dva/router'
 import App from './routes/app'
 import Error from './routes/error'
 import Dashboard from './routes/dashboard'
diff --git a/src/routes/dashboard.js b/src/routes/dashboard.js
index 932cadc..7227552 100644
--- a/src/routes/dashboard.js
+++ b/src/routes/dashboard.js
@@ -1,14 +1,25 @@
 import React, { PropTypes } from 'react'
 import { Link } from 'dva/router'
+import { Row, Col, Icon } from 'antd'
+import NumberCard from '../components/dashboard/numberCard'
 
 function Dashboard() {
   return (
     <div>
-      <h1>Hello Antd.</h1>
-      <hr />
-      <ul>
-        <li>You can go to <Link to="/users">/users</Link></li>
-      </ul>
+      <Row type="flex" justify="space-between">
+       <Col span={5}>
+         <NumberCard icon='dot-chart' />
+       </Col>
+       <Col span={5}>
+         <NumberCard icon='dot-chart' />
+       </Col>
+       <Col span={5}>
+         <NumberCard icon='dot-chart' />
+       </Col>
+       <Col span={5}>
+         <NumberCard icon='dot-chart' />
+       </Col>
+     </Row>
     </div>
   )
 }