diff --git a/src/charts/StatisticCard.jsx b/src/charts/StatisticCard.jsx
new file mode 100644
index 0000000..0de1fcc
--- /dev/null
+++ b/src/charts/StatisticCard.jsx
@@ -0,0 +1,27 @@
+import { observer } from "mobx-react";
+import { Card, Statistic, Progress } from 'antd';
+import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
+
+export default observer((props) => {
+  const valueStyle = { color: props.VSrate < 0 ? '#cf1322' : '#3f8600' };
+  const VSIcon = () => (props.VSrate < 0 ? <ArrowDownOutlined /> : <ArrowUpOutlined />);
+  return (
+    <Card>
+      <Statistic
+        className={'__hn-sta-wrapper'}
+        valueStyle={valueStyle}
+        suffix={
+          props.VSrate && (
+            <>
+              <VSIcon />
+              <span>{props.VSrate}</span>
+              <span>%</span>
+            </>
+          )
+        }
+        {...props}
+      />
+      {props.showProgress !== false && <Progress percent={props.KPIrate} size="small" format={(percent) => `${props.KPIrate}%`} />}
+    </Card>
+  );
+});
diff --git a/src/views/Home.jsx b/src/views/Home.jsx
index 2d41cb9..9f5b9ca 100644
--- a/src/views/Home.jsx
+++ b/src/views/Home.jsx
@@ -1,9 +1,10 @@
 import { useContext, useEffect } from 'react';
 import { observer } from 'mobx-react';
-import { Row, Col, Spin, Card, Statistic, Progress } from 'antd';
+import { Row, Col, Spin, } from 'antd';
 import { stores_Context } from '../config';
 import { useNavigate } from 'react-router-dom';
 import { SlackOutlined, SketchOutlined, AntCloudOutlined, RedditOutlined, GithubOutlined, ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
+import StatisticCard from './../charts/StatisticCard';
 import { empty } from './../utils/commons';
 import './home.css';
 
@@ -22,30 +23,6 @@ export default observer(() => {
     return () => {};
   }, []);
 
-  const StatisticCard = (props) => {
-    const valueStyle = { color: props.VSrate < 0 ? '#cf1322' : '#3f8600' };
-    const VSIcon = () => (props.VSrate < 0 ? <ArrowDownOutlined /> : <ArrowUpOutlined />);
-    return (
-      <Card>
-        <Statistic
-          className={'__hn-sta-wrapper'}
-          valueStyle={valueStyle}
-          suffix={
-            props.VSrate && (
-              <>
-                <VSIcon />
-                <span>{props.VSrate}</span>
-                <span>%</span>
-              </>
-            )
-          }
-          {...props}
-        />
-        {props.showProgress !== false && <Progress percent={props.KPIrate} size="small" format={(percent) => `${props.KPIrate}%`} />}
-      </Card>
-    );
-  };
-
   const layoutProps = {
     gutter: { xs: 8, sm: 8, lg: 16 },
     lg: { span: 6 },