diff --git a/client/App.js b/client/App.js
index 29732686..79321f06 100644
--- a/client/App.js
+++ b/client/App.js
@@ -1,9 +1,8 @@
 import React, { Component } from 'react'
 import axios from 'axios';
 import { Route, HashRouter, Redirect } from 'react-router-dom'
-import { Home, ProjectGroups, Interface, News } from './containers/index'
+import { Header, Home, ProjectGroups, Interface, News, AddInterface } from './containers/index'
 import User from './containers/User/User.js'
-import Header from './components/Header/Header'
 
 const LOADING_STATUS = 0;
 const GUEST_STATUS = 1;
@@ -45,6 +44,7 @@ class App extends Component {
             <Route path="/Interface" component={Interface} />
             <Route path="/user" component={User} />
             <Route path="/News" component={News} />
+            <Route path="/AddInterface" component={ AddInterface } />
           </div>
 
         </HashRouter>
diff --git a/client/app.js b/client/app.js
index 29732686..79321f06 100644
--- a/client/app.js
+++ b/client/app.js
@@ -1,9 +1,8 @@
 import React, { Component } from 'react'
 import axios from 'axios';
 import { Route, HashRouter, Redirect } from 'react-router-dom'
-import { Home, ProjectGroups, Interface, News } from './containers/index'
+import { Header, Home, ProjectGroups, Interface, News, AddInterface } from './containers/index'
 import User from './containers/User/User.js'
-import Header from './components/Header/Header'
 
 const LOADING_STATUS = 0;
 const GUEST_STATUS = 1;
@@ -45,6 +44,7 @@ class App extends Component {
             <Route path="/Interface" component={Interface} />
             <Route path="/user" component={User} />
             <Route path="/News" component={News} />
+            <Route path="/AddInterface" component={ AddInterface } />
           </div>
 
         </HashRouter>
diff --git a/client/containers/AddInterface/ReqParams/ReqParams.js b/client/containers/AddInterface/ReqParams/ReqParams.js
index 02b1a663..473309b4 100644
--- a/client/containers/AddInterface/ReqParams/ReqParams.js
+++ b/client/containers/AddInterface/ReqParams/ReqParams.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-// import { autobind } from 'core-decorators'
 import wangEditor from 'wangeditor'
 import { getReqParams } from '../../../actions/addInterface.js'
 
diff --git a/client/containers/Interface/Interface.js b/client/containers/Interface/Interface.js
index ec5a3851..3f766154 100644
--- a/client/containers/Interface/Interface.js
+++ b/client/containers/Interface/Interface.js
@@ -2,6 +2,7 @@ import './Interface.scss'
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
+import axios from 'axios'
 import InterfaceList from './InterfaceList/InterfaceList.js'
 import InterfaceTable from './InterfaceTable/InterfaceTable.js'
 import InterfaceMode from './InterfaceMode/InterfaceMode.js'
@@ -42,6 +43,17 @@ class Interface extends Component {
 
   componentWillMount () {
     this.props.fetchInterfaceData()
+    const params = {
+      project_id: 8
+    }
+
+    axios.get('/interface/list', params)
+      .then(data => {
+        console.log(data)
+      })
+      .catch(e => {
+        console.log(e)
+      })
   }
 
   render () {
diff --git a/client/containers/Interface/Interface.scss b/client/containers/Interface/Interface.scss
index c2542dad..308e672f 100644
--- a/client/containers/Interface/Interface.scss
+++ b/client/containers/Interface/Interface.scss
@@ -3,7 +3,7 @@
   max-width: 11rem;
   display: -webkit-box;
   -webkit-box-flex: 1;
-  margin: .88rem auto 0 auto;
+  margin: 15px auto 0 auto;
   font-size: 0.14rem;
   background: #FFF;
 
@@ -17,9 +17,15 @@
       color: #344562;
       cursor: pointer;
       
-      &:hover, &.active {
-        background: #657289;
-        color: #FFF;
+      &:hover {
+        color: #29f;
+      }
+      
+      a {
+        color: #344562;
+        &:hover {
+          color: #29f;
+        }
       }
     }
   }
diff --git a/client/containers/Interface/InterfaceList/InterfaceList.js b/client/containers/Interface/InterfaceList/InterfaceList.js
index f079507a..e7cfe677 100644
--- a/client/containers/Interface/InterfaceList/InterfaceList.js
+++ b/client/containers/Interface/InterfaceList/InterfaceList.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import { Link } from 'react-router-dom'
 
 class InterfaceList extends Component {
   static propTypes = {
@@ -15,7 +16,7 @@ class InterfaceList extends Component {
 
     return (
       <ul className="interface-list">
-        <li className="active">添加接口</li>
+        <li><Link to="/AddInterface">添加接口</Link></li>
         <li onClick={projectMember}>管理项目成员</li>
       </ul>
     )
diff --git a/client/containers/Login/Login.js b/client/containers/Login/Login.js
new file mode 100644
index 00000000..c4113bc7
--- /dev/null
+++ b/client/containers/Login/Login.js
@@ -0,0 +1,72 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Form, Button, Input, Icon } from 'antd';
+import { loginActions } from  '../../actions/login';
+const FormItem = Form.Item;
+@connect(
+  state => {
+    return {
+      loginData: state.login
+    }
+  },
+  {
+    loginActions
+  }
+)
+
+class Login extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  static propTypes = {
+    form: PropTypes.object,
+    loginActions: PropTypes.func
+  }
+
+  handleSubmit = (e) => {
+    e.preventDefault();
+    const form = this.props.form;
+    form.validateFields((err, values) => {
+      if (!err) {
+        this.props.loginActions(values);
+      }
+    });
+  }
+
+  render() {
+    const { getFieldDecorator } = this.props.form;
+    return (
+      <Form onSubmit={this.handleSubmit}>
+
+        {/* 用户名 (Email) */}
+        <FormItem>
+          {getFieldDecorator('email', {
+            rules: [{ required: true, message: '请输入email!' }]
+          })(
+            <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Email" />
+          )}
+        </FormItem>
+
+        {/* 密码 */}
+        <FormItem>
+          {getFieldDecorator('password', {
+            rules: [{ required: true, message: '请输入密码!' }]
+          })(
+            <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
+          )}
+        </FormItem>
+
+
+        {/* 登录按钮 */}
+        <FormItem>
+          <Button type="primary" htmlType="submit" className="login-form-button">登录</Button>
+        </FormItem>
+
+      </Form>
+    )
+  }
+}
+const LoginForm = Form.create()(Login);
+export default LoginForm;
diff --git a/client/index.js b/client/index.js
index 0e2e9d0d..577cb6e7 100644
--- a/client/index.js
+++ b/client/index.js
@@ -3,7 +3,7 @@ import 'babel-polyfill'
 import thunkMiddleware from 'redux-thunk'
 import promiseMiddleware from 'redux-promise';
 import ReactDOM from 'react-dom'
-import App from './app'
+import App from './App'
 import { createStore, combineReducers, applyMiddleware } from 'redux'
 import { Provider } from 'react-redux'
 import ReduxContainer from './ReduxContainer.js'