diff --git a/src/components/Layout/Bread.js b/src/components/Layout/Bread.js
new file mode 100644
index 0000000..5db9e34
--- /dev/null
+++ b/src/components/Layout/Bread.js
@@ -0,0 +1,62 @@
+import React, { PropTypes } from 'react'
+import { Breadcrumb, Icon } from 'antd'
+import styles from './Bread.less'
+import { menu } from '../../utils'
+
+let pathSet = []
+const getPathSet = function (menuArray, parentPath) {
+  parentPath = parentPath || '/'
+  menuArray.forEach(item => {
+    pathSet[(parentPath + item.key).replace(/\//g, '-').hyphenToHump()] = {
+      path: parentPath + item.key,
+      name: item.name,
+      icon: item.icon || '',
+      clickable: item.clickable === undefined,
+    }
+    if (item.child) {
+      getPathSet(item.child, `${parentPath}${item.key}/`)
+    }
+  })
+}
+getPathSet(menu)
+
+function Bread ({ location }) {
+  let pathNames = []
+  location.pathname.substr(1).split('/').forEach((item, key) => {
+    if (key > 0) {
+      pathNames.push((`${pathNames[key - 1]}-${item}`).hyphenToHump())
+    } else {
+      pathNames.push((`-${item}`).hyphenToHump())
+    }
+  })
+  const breads = pathNames.map((item, key) => {
+    if (!(item in pathSet)) {
+      item = 'Dashboard'
+    }
+    return (
+      <Breadcrumb.Item key={key} {...((pathNames.length - 1 === key) || !pathSet[item].clickable) ? '' : { href: `#${pathSet[item].path}` }}>
+        {pathSet[item].icon
+          ? <Icon type={pathSet[item].icon} />
+          : ''}
+        <span>{pathSet[item].name}</span>
+      </Breadcrumb.Item>
+    )
+  })
+
+  return (
+    <div className={styles.bread}>
+      <Breadcrumb>
+        <Breadcrumb.Item href="/"><Icon type="home" />
+          <span>主页</span>
+        </Breadcrumb.Item>
+        {breads}
+      </Breadcrumb>
+    </div>
+  )
+}
+
+Bread.propTypes = {
+  location: PropTypes.object,
+}
+
+export default Bread
diff --git a/src/components/Layout/Bread.less b/src/components/Layout/Bread.less
new file mode 100644
index 0000000..9c091e5
--- /dev/null
+++ b/src/components/Layout/Bread.less
@@ -0,0 +1,8 @@
+@import "../vars.less";
+
+.bread {
+  height: 64px;
+  line-height: 64px;
+  padding: 0 24px;
+  margin-bottom: -24px;
+}
diff --git a/src/components/Layout/Footer.js b/src/components/Layout/Footer.js
new file mode 100644
index 0000000..6e7f6bb
--- /dev/null
+++ b/src/components/Layout/Footer.js
@@ -0,0 +1,9 @@
+import React from 'react'
+import styles from './Footer.less'
+import { config } from '../../utils'
+
+const Footer = () => <div className={styles.footer}>
+  {config.footerText}
+</div>
+
+export default Footer
diff --git a/src/components/Layout/Footer.less b/src/components/Layout/Footer.less
new file mode 100644
index 0000000..9f5a967
--- /dev/null
+++ b/src/components/Layout/Footer.less
@@ -0,0 +1,12 @@
+@import "../vars.less";
+
+.footer {
+  height: 48px;
+  line-height: 48px;
+  text-align: center;
+  font-size: 12px;
+  color: #999;
+  background: #fff;
+  box-shadow: @shadow-2;
+  width: 100%;
+}
diff --git a/src/components/Layout/Header.js b/src/components/Layout/Header.js
new file mode 100644
index 0000000..f778050
--- /dev/null
+++ b/src/components/Layout/Header.js
@@ -0,0 +1,63 @@
+import React, { PropTypes } from 'react'
+import { Menu, Icon, Popover } from 'antd'
+import styles from './Header.less'
+import Menus from './Menu'
+
+const SubMenu = Menu.SubMenu
+
+function Header ({ user, logout, switchSider, siderFold, isNavbar, menuPopoverVisible, location, switchMenuPopover, navOpenKeys, changeOpenKeys }) {
+  let handleClickMenu = e => e.key === 'logout' && logout()
+  const menusProps = {
+    siderFold: false,
+    darkTheme: false,
+    isNavbar,
+    handleClickNavMenu: switchMenuPopover,
+    location,
+    navOpenKeys,
+    changeOpenKeys,
+  }
+  return (
+    <div className={styles.header}>
+      {isNavbar
+        ? <Popover placement="bottomLeft" onVisibleChange={switchMenuPopover} visible={menuPopoverVisible} overlayClassName={styles.popovermenu} trigger="click" content={<Menus {...menusProps} />}>
+          <div className={styles.button}>
+            <Icon type="bars" />
+          </div>
+        </Popover>
+        : <div className={styles.button} onClick={switchSider}>
+          <Icon type={siderFold ? 'menu-unfold' : 'menu-fold'} />
+        </div>}
+      <div className={styles.rightWarpper}>
+        <div className={styles.button}>
+          <Icon type="mail" />
+        </div>
+        <Menu mode="horizontal" onClick={handleClickMenu}>
+          <SubMenu style={{
+            float: 'right',
+          }} title={< span > <Icon type="user" />
+            {user.name} < /span>}
+          >
+            <Menu.Item key="logout">
+              <a>注销</a>
+            </Menu.Item>
+          </SubMenu>
+        </Menu>
+      </div>
+    </div>
+  )
+}
+
+Header.propTypes = {
+  user: PropTypes.object,
+  logout: PropTypes.func,
+  switchSider: PropTypes.func,
+  siderFold: PropTypes.bool,
+  isNavbar: PropTypes.bool,
+  menuPopoverVisible: PropTypes.bool,
+  location: PropTypes.object,
+  switchMenuPopover: PropTypes.func,
+  navOpenKeys: PropTypes.array,
+  changeOpenKeys: PropTypes.func,
+}
+
+export default Header
diff --git a/src/components/Layout/Header.less b/src/components/Layout/Header.less
new file mode 100644
index 0000000..1eca871
--- /dev/null
+++ b/src/components/Layout/Header.less
@@ -0,0 +1,57 @@
+@import "../vars.less";
+
+.header {
+  :global .ant-menu-horizontal {
+    & > .ant-menu-submenu {
+      float: right;
+    }
+    border: none;
+    display: inline-block;
+  }
+  box-shadow: @shadow-2;
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  height: 47px;
+  background-color: #fff;
+
+  .rightWarpper {
+    display: flex;
+  }
+
+  .button {
+    width: 47px;
+    height: 47px;
+    line-height: 47px;
+    text-align: center;
+    font-size: 18px;
+    cursor: pointer;
+    transition: @transition-ease-in;
+
+    &:hover {
+      color: @primary-color;
+      background-color: fade(@primary-color, 15%);
+    }
+  }
+}
+
+.popovermenu {
+  width: 280px;
+  margin-left: 6px;
+
+  :global .ant-popover-inner-content {
+    padding: 0;
+
+    .ant-menu-inline .ant-menu-item,
+    .ant-menu-vertical .ant-menu-item {
+      border-right: 0;
+      height: 48px;
+      line-height: 48px;
+    }
+
+    .ant-menu-inline .ant-menu-item-selected,
+    .ant-menu-inline .ant-menu-selected {
+      border-right: 0;
+    }
+  }
+}
diff --git a/src/components/Layout/Layout.less b/src/components/Layout/Layout.less
index fcc402c..7c5e000 100644
--- a/src/components/Layout/Layout.less
+++ b/src/components/Layout/Layout.less
@@ -144,6 +144,7 @@
       .ant-menu-root {
         height: ~"calc(100vh - 144px)";
         overflow-x: hidden;
+        border-right: none;
 
         &::-webkit-scrollbar-thumb {
           background-color: transparent;
@@ -183,40 +184,6 @@
     }
   }
 
-  .header {
-    :global .ant-menu-horizontal {
-      & > .ant-menu-submenu {
-        float: right;
-      }
-      border: none;
-    }
-    box-shadow: @shadow-2;
-    position: relative;
-
-    .siderbutton {
-      height: 47px;
-      width: 47px;
-      line-height: 47px;
-      text-align: center;
-      font-size: 18px;
-      cursor: pointer;
-      position: absolute;
-      transition: @transition-ease-in;
-
-      &:hover {
-        color: @primary-color;
-        background-color: fade(@primary-color, 15%);
-      }
-    }
-  }
-
-  .bread {
-    height: 64px;
-    line-height: 64px;
-    padding: 0 24px;
-    margin-bottom: -24px;
-  }
-
   .main {
     margin-left: 224px;
     overflow: auto;
@@ -241,17 +208,6 @@
       position: relative;
     }
   }
-
-  .footer {
-    height: 48px;
-    line-height: 48px;
-    text-align: center;
-    font-size: 12px;
-    color: #999;
-    background: #fff;
-    box-shadow: @shadow-2;
-    width: 100%;
-  }
 }
 
 :global .ant-menu-dark {
@@ -306,27 +262,6 @@
   }
 }
 
-.popovermenu {
-  width: 280px;
-  margin-left: 6px;
-
-  :global .ant-popover-inner-content {
-    padding: 0;
-
-    .ant-menu-inline .ant-menu-item,
-    .ant-menu-vertical .ant-menu-item {
-      border-right: 0;
-      height: 48px;
-      line-height: 48px;
-    }
-
-    .ant-menu-inline .ant-menu-item-selected,
-    .ant-menu-inline .ant-menu-selected {
-      border-right: 0;
-    }
-  }
-}
-
 .spin {
   :global .ant-spin-container {
     height: 100vh;
diff --git a/src/components/Layout/Menu.js b/src/components/Layout/Menu.js
new file mode 100644
index 0000000..378bfc2
--- /dev/null
+++ b/src/components/Layout/Menu.js
@@ -0,0 +1,80 @@
+import React, { PropTypes } from 'react'
+import { Menu, Icon } from 'antd'
+import { Link } from 'dva/router'
+import { menu } from '../../utils'
+
+const topMenus = menu.map(item => item.key)
+const getMenus = function (menuArray, siderFold, parentPath = '/') {
+  return menuArray.map(item => {
+    const linkTo = parentPath + item.key
+    if (item.child) {
+      return (
+        <Menu.SubMenu key={linkTo} title={<span>{item.icon ? <Icon type={item.icon} /> : ''}{siderFold && topMenus.indexOf(item.key) >= 0 ? '' : item.name}</span>}>
+          {getMenus(item.child, siderFold, `${linkTo}/`)}
+        </Menu.SubMenu>
+      )
+    }
+    return (
+      <Menu.Item key={linkTo}>
+
+        <Link to={linkTo}>
+          {item.icon ? <Icon type={item.icon} /> : ''}
+          {siderFold && topMenus.indexOf(item.key) >= 0 ? '' : item.name}
+        </Link>
+      </Menu.Item>
+    )
+  })
+}
+
+function Menus ({ siderFold, darkTheme, location, handleClickNavMenu, navOpenKeys, changeOpenKeys }) {
+  const menuItems = getMenus(menu, siderFold)
+
+  const getAncestorKeys = (key) => {
+    const map = {
+      '/navigation/navigation2': ['/navigation'],
+    }
+    return map[key] || []
+  }
+
+  const onOpenChange = (openKeys) => {
+    const latestOpenKey = openKeys.find(key => !(navOpenKeys.indexOf(key) > -1))
+    const latestCloseKey = navOpenKeys.find(key => !(openKeys.indexOf(key) > -1))
+    let nextOpenKeys = []
+    if (latestOpenKey) {
+      nextOpenKeys = getAncestorKeys(latestOpenKey).concat(latestOpenKey)
+    }
+    if (latestCloseKey) {
+      nextOpenKeys = getAncestorKeys(latestCloseKey)
+    }
+    changeOpenKeys(nextOpenKeys)
+  }
+  // 菜单栏收起时，不能操作openKeys
+  let menuProps = !siderFold ? {
+    onOpenChange,
+    openKeys: navOpenKeys,
+  } : {}
+
+  return (
+    <Menu
+      {...menuProps}
+      mode={siderFold ? 'vertical' : 'inline'}
+      theme={darkTheme ? 'dark' : 'light'}
+      onClick={handleClickNavMenu}
+      defaultSelectedKeys={[location.pathname !== '/' ? location.pathname : '/dashboard']}
+    >
+      {menuItems}
+    </Menu>
+  )
+}
+
+Menus.propTypes = {
+  siderFold: PropTypes.bool,
+  darkTheme: PropTypes.bool,
+  location: PropTypes.object,
+  isNavbar: PropTypes.bool,
+  handleClickNavMenu: PropTypes.func,
+  navOpenKeys: PropTypes.array,
+  changeOpenKeys: PropTypes.func,
+}
+
+export default Menus
diff --git a/src/components/Layout/Sider.js b/src/components/Layout/Sider.js
new file mode 100644
index 0000000..a143ef5
--- /dev/null
+++ b/src/components/Layout/Sider.js
@@ -0,0 +1,39 @@
+import React, { PropTypes } from 'react'
+import { Icon, Switch } from 'antd'
+import styles from './Layout.less'
+import { config } from '../../utils'
+import Menus from './Menu'
+
+function Sider ({ siderFold, darkTheme, location, changeTheme, navOpenKeys, changeOpenKeys }) {
+  const menusProps = {
+    siderFold,
+    darkTheme,
+    location,
+    navOpenKeys,
+    changeOpenKeys,
+  }
+  return (
+    <div>
+      <div className={styles.logo}>
+        <img alt={'logo'} src={config.logoSrc} />
+        {siderFold ? '' : <span>{config.logoText}</span>}
+      </div>
+      <Menus {...menusProps} />
+      {!siderFold ? <div className={styles.switchtheme}>
+        <span><Icon type="bulb" />切换主题</span>
+        <Switch onChange={changeTheme} defaultChecked={darkTheme} checkedChildren="黑" unCheckedChildren="白" />
+      </div> : ''}
+    </div>
+  )
+}
+
+Sider.propTypes = {
+  siderFold: PropTypes.bool,
+  darkTheme: PropTypes.bool,
+  location: PropTypes.object,
+  changeTheme: PropTypes.func,
+  navOpenKeys: PropTypes.array,
+  changeOpenKeys: PropTypes.func,
+}
+
+export default Sider
diff --git a/src/components/Layout/Sider.less b/src/components/Layout/Sider.less
new file mode 100644
index 0000000..9146181
--- /dev/null
+++ b/src/components/Layout/Sider.less
@@ -0,0 +1 @@
+@import "../vars.less";
diff --git a/src/components/layout/bread.js b/src/components/layout/bread.js
index 39a4b0f..5db9e34 100644
--- a/src/components/layout/bread.js
+++ b/src/components/layout/bread.js
@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react'
 import { Breadcrumb, Icon } from 'antd'
-import styles from './Layout.less'
+import styles from './Bread.less'
 import { menu } from '../../utils'
 
 let pathSet = []
diff --git a/src/components/layout/footer.js b/src/components/layout/footer.js
index 6dcc09f..6e7f6bb 100644
--- a/src/components/layout/footer.js
+++ b/src/components/layout/footer.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import styles from './Layout.less'
+import styles from './Footer.less'
 import { config } from '../../utils'
 
 const Footer = () => <div className={styles.footer}>
diff --git a/src/components/layout/header.js b/src/components/layout/header.js
index 14e430d..f778050 100644
--- a/src/components/layout/header.js
+++ b/src/components/layout/header.js
@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react'
 import { Menu, Icon, Popover } from 'antd'
-import styles from './Layout.less'
+import styles from './Header.less'
 import Menus from './Menu'
 
 const SubMenu = Menu.SubMenu
@@ -20,25 +20,29 @@ function Header ({ user, logout, switchSider, siderFold, isNavbar, menuPopoverVi
     <div className={styles.header}>
       {isNavbar
         ? <Popover placement="bottomLeft" onVisibleChange={switchMenuPopover} visible={menuPopoverVisible} overlayClassName={styles.popovermenu} trigger="click" content={<Menus {...menusProps} />}>
-          <div className={styles.siderbutton}>
+          <div className={styles.button}>
             <Icon type="bars" />
           </div>
         </Popover>
-        : <div className={styles.siderbutton} onClick={switchSider}>
+        : <div className={styles.button} onClick={switchSider}>
           <Icon type={siderFold ? 'menu-unfold' : 'menu-fold'} />
         </div>}
-
-      <Menu className="header-menu" mode="horizontal" onClick={handleClickMenu}>
-        <SubMenu style={{
-          float: 'right',
-        }} title={< span > <Icon type="user" />
-          {user.name} < /span>}
-        >
-          <Menu.Item key="logout">
-            <a>注销</a>
-          </Menu.Item>
-        </SubMenu>
-      </Menu>
+      <div className={styles.rightWarpper}>
+        <div className={styles.button}>
+          <Icon type="mail" />
+        </div>
+        <Menu mode="horizontal" onClick={handleClickMenu}>
+          <SubMenu style={{
+            float: 'right',
+          }} title={< span > <Icon type="user" />
+            {user.name} < /span>}
+          >
+            <Menu.Item key="logout">
+              <a>注销</a>
+            </Menu.Item>
+          </SubMenu>
+        </Menu>
+      </div>
     </div>
   )
 }
diff --git a/src/components/layout/menu.js b/src/components/layout/menu.js
index f5eeac4..378bfc2 100644
--- a/src/components/layout/menu.js
+++ b/src/components/layout/menu.js
@@ -16,6 +16,7 @@ const getMenus = function (menuArray, siderFold, parentPath = '/') {
     }
     return (
       <Menu.Item key={linkTo}>
+
         <Link to={linkTo}>
           {item.icon ? <Icon type={item.icon} /> : ''}
           {siderFold && topMenus.indexOf(item.key) >= 0 ? '' : item.name}