diff --git a/src/components/Loader/Loader.js b/src/components/Loader/Loader.js
index 2d2943f..e9edb99 100644
--- a/src/components/Loader/Loader.js
+++ b/src/components/Loader/Loader.js
@@ -6,8 +6,9 @@ import styles from './Loader.less'
 const Loader = ({ spinning, fullScreen }) => {
   return (<div className={classNames(styles.loader, {
     [styles.hidden]: !spinning,
-    [styles.loader_fullScreen]: fullScreen,
-  })}>
+    [styles.fullScreen]: fullScreen,
+  })}
+  >
     <div className={styles.warpper}>
       <div className={styles.inner} />
       <div className={styles.text} >LOADING</div>
diff --git a/src/components/Loader/Loader.less b/src/components/Loader/Loader.less
index 723402d..fed0403 100644
--- a/src/components/Loader/Loader.less
+++ b/src/components/Loader/Loader.less
@@ -1,68 +1,68 @@
-.loader_fullScreen {
-  position: fixed !important;
-}
-
-.loader {
-  display: block;
-  background-color: #fff;
-  width: 100%;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 100000;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  opacity: 1;
-  text-align: center;
-
-  .warpper {
-    width: 100px;
-    height: 100px;
-    display: inline-flex;
-    flex-direction: column;
-    justify-content: space-around;
-  }
-
-  .inner {
-    width: 48px;
-    height: 48px;
-    margin: 0 auto;
-    text-indent: -12345px;
-    border-top: 1px solid rgba(0, 0, 0, 0.08);
-    border-right: 1px solid rgba(0, 0, 0, 0.08);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-    border-left: 1px solid rgba(0, 0, 0, 0.7);
-    border-radius: 50%;
-    z-index: 100001;
-
-    :local {
-      animation: spinner 600ms infinite linear;
-    }
-  }
-
-  .text {
-    width: 100px;
-    height: 20px;
-    text-align: center;
-    font-size: 12px;
-    letter-spacing: 4px;
-    color: #000;
-  }
-
-  &.hidden {
-    z-index: -1;
-    opacity: 0;
-    transition: opacity 1s ease 0.5s, z-index 0.1s ease 1.5s;
-  }
-}
-@keyframes spinner {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
+.loader {
+  display: block;
+  background-color: #fff;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 100000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 1;
+  text-align: center;
+
+  &.fullScreen {
+    position: fixed;
+  }
+
+  .warpper {
+    width: 100px;
+    height: 100px;
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: space-around;
+  }
+
+  .inner {
+    width: 48px;
+    height: 48px;
+    margin: 0 auto;
+    text-indent: -12345px;
+    border-top: 1px solid rgba(0, 0, 0, 0.08);
+    border-right: 1px solid rgba(0, 0, 0, 0.08);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+    border-left: 1px solid rgba(0, 0, 0, 0.7);
+    border-radius: 50%;
+    z-index: 100001;
+
+    :local {
+      animation: spinner 600ms infinite linear;
+    }
+  }
+
+  .text {
+    width: 100px;
+    height: 20px;
+    text-align: center;
+    font-size: 12px;
+    letter-spacing: 4px;
+    color: #000;
+  }
+
+  &.hidden {
+    z-index: -1;
+    opacity: 0;
+    transition: opacity 1s ease 0.5s, z-index 0.1s ease 1.5s;
+  }
+}
+@keyframes spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/components/Page/Page.js b/src/components/Page/Page.js
new file mode 100644
index 0000000..5d37ade
--- /dev/null
+++ b/src/components/Page/Page.js
@@ -0,0 +1,19 @@
+import React, { Component } from 'react'
+import classnames from 'classnames'
+import Loader from '../Loader'
+
+export default class Page extends Component {
+  render () {
+    const { className, children, loading = false } = this.props
+    const loadingStyle = {
+      height: 'calc(100vh - 184px)',
+      overflow: 'hidden',
+    }
+    return (
+      <div className={classnames(className)} style={loading ? loadingStyle : null}>
+        {loading ? <Loader spinning /> : ''}
+        {children}
+      </div>
+    )
+  }
+}
diff --git a/src/components/Page/Page.less b/src/components/Page/Page.less
new file mode 100644
index 0000000..fed0403
--- /dev/null
+++ b/src/components/Page/Page.less
@@ -0,0 +1,68 @@
+.loader {
+  display: block;
+  background-color: #fff;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 100000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 1;
+  text-align: center;
+
+  &.fullScreen {
+    position: fixed;
+  }
+
+  .warpper {
+    width: 100px;
+    height: 100px;
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: space-around;
+  }
+
+  .inner {
+    width: 48px;
+    height: 48px;
+    margin: 0 auto;
+    text-indent: -12345px;
+    border-top: 1px solid rgba(0, 0, 0, 0.08);
+    border-right: 1px solid rgba(0, 0, 0, 0.08);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+    border-left: 1px solid rgba(0, 0, 0, 0.7);
+    border-radius: 50%;
+    z-index: 100001;
+
+    :local {
+      animation: spinner 600ms infinite linear;
+    }
+  }
+
+  .text {
+    width: 100px;
+    height: 20px;
+    text-align: center;
+    font-size: 12px;
+    letter-spacing: 4px;
+    color: #000;
+  }
+
+  &.hidden {
+    z-index: -1;
+    opacity: 0;
+    transition: opacity 1s ease 0.5s, z-index 0.1s ease 1.5s;
+  }
+}
+@keyframes spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/components/Page/package.json b/src/components/Page/package.json
new file mode 100644
index 0000000..a3811bd
--- /dev/null
+++ b/src/components/Page/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "Page",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./Page.js"
+}
diff --git a/src/components/index.js b/src/components/index.js
index 2c8a0d6..a1a372c 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -7,6 +7,7 @@ import FilterItem from './FilterItem'
 import Loader from './Loader'
 import * as Layout from './Layout/index.js'
 import LinkWrapper from './LinkWrapper'
+import Page from './Page'
 
 import layer from './layer'
 
@@ -21,4 +22,5 @@ export {
   Loader,
   layer,
   LinkWrapper,
+  Page,
 }
diff --git a/src/models/app.js b/src/models/app.js
index 5e2f7a0..7a205a5 100644
--- a/src/models/app.js
+++ b/src/models/app.js
@@ -98,7 +98,7 @@ export default {
         }
       } else if (config.openPages && config.openPages.indexOf(locationPathname) < 0) {
         yield put(routerRedux.push({
-          pathname: 'login',
+          pathname: '/login',
           query: {
             from: locationPathname,
           },
diff --git a/src/router.js b/src/router.js
index 4aef55a..542018c 100644
--- a/src/router.js
+++ b/src/router.js
@@ -70,14 +70,17 @@ const Routers = function ({ history, app }) {
     <ConnectedRouter history={history}>
       <App>
         <Switch>
-          <Route exact path='/' render={() => (<Redirect to='/dashboard' />)} />
+          <Route exact path="/" render={() => (<Redirect to="/dashboard" />)} />
           {
             routes.map(({ path, ...dynamics }, key) => (
-              <Route key={key} exact path={path} component={dynamic({
-                app,
-                LoadingComponent: ({ productId }) => (<Loader spinning />),
-                ...dynamics
-              })} />
+              <Route key={key}
+                exact
+                path={path}
+                component={dynamic({
+                  app,
+                  ...dynamics,
+                })}
+              />
             ))
           }
           <Route component={error} />
diff --git a/src/routes/dashboard/index.js b/src/routes/dashboard/index.js
index 8466d54..fd9b8ee 100644
--- a/src/routes/dashboard/index.js
+++ b/src/routes/dashboard/index.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { connect } from 'dva'
 import { Row, Col, Card } from 'antd'
 import { color } from 'utils'
-import { Loader } from 'components'
+import { Page } from 'components'
 import { NumberCard, Quote, Sales, Weather, RecentSales, Comments, Completed, Browser, Cpu, User } from './components'
 import styles from './index.less'
 
@@ -21,8 +21,7 @@ function Dashboard ({ dashboard, loading }) {
   </Col>))
 
   return (
-    <div>
-      <Loader spinning={loading.models.dashboard && sales.length === 0} />
+    <Page loading={loading.models.dashboard && sales.length === 0}>
       <Row gutter={24}>
         {numberCards}
         <Col lg={18} md={24}>
@@ -97,7 +96,7 @@ function Dashboard ({ dashboard, loading }) {
           </Card>
         </Col>
       </Row>
-    </div>
+    </Page>
   )
 }