diff --git a/src/layouts/Header.js b/src/layouts/Header.js
new file mode 100644
index 0000000..5917de1
--- /dev/null
+++ b/src/layouts/Header.js
@@ -0,0 +1,30 @@
+import { Menu, Icon } from 'antd';
+import Link from 'umi/link';
+
+function Header({ location }) {
+  return (
+    <Menu
+      selectedKeys={[location.pathname]}
+      mode="horizontal"
+      theme="dark"
+    >
+      <Menu.Item key="/">
+        <Link to="/"><Icon type="home" />Home</Link>
+      </Menu.Item>
+      <Menu.Item key="/users">
+        <Link to="/users"><Icon type="bars" />Users</Link>
+      </Menu.Item>
+      <Menu.Item key="/umi">
+        <a href="https://github.com/umijs/umi" target="_blank">umi</a>
+      </Menu.Item>
+      <Menu.Item key="/dva">
+        <a href="https://github.com/dvajs/dva" target="_blank">dva</a>
+      </Menu.Item>
+      <Menu.Item key="/404">
+        <Link to="/page-you-dont-know"><Icon type="frown-circle" />404</Link>
+      </Menu.Item>
+    </Menu>
+  );
+}
+
+export default Header;
diff --git a/src/layouts/index.css b/src/layouts/index.css
new file mode 100644
index 0000000..103e7f9
--- /dev/null
+++ b/src/layouts/index.css
@@ -0,0 +1,15 @@
+.normal {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.content {
+  flex: 1;
+  display: flex;
+}
+
+.main {
+  padding: 0 8px;
+  flex: 1 0 auto;
+}
diff --git a/src/layouts/index.js b/src/layouts/index.js
new file mode 100644
index 0000000..f362f42
--- /dev/null
+++ b/src/layouts/index.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import styles from './index.css';
+import Header from './Header';
+import withRouter from 'umi/withRouter';
+
+function Layout({ children, location }) {
+  return (
+    <div className={styles.normal}>
+      <Header location={location} />
+      <div className={styles.content}>
+        <div className={styles.main}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default withRouter(Layout);