diff --git a/config/routes.ts b/config/routes.ts
index 23f9b1e..9e480e1 100644
--- a/config/routes.ts
+++ b/config/routes.ts
@@ -73,6 +73,11 @@ const routes: IRoute[] = [
         exact: true,
         component: '@/page/user/',
       },
+      {
+        path: '/login',
+        exact: true,
+        component: '@/page/login',
+      },
     ],
   },
 
diff --git a/src/component/RightContent/index.tsx b/src/component/RightContent/index.tsx
index a0f6fb4..603aa3e 100644
--- a/src/component/RightContent/index.tsx
+++ b/src/component/RightContent/index.tsx
@@ -1,6 +1,6 @@
+import { Avatar, Badge, Dropdown, Menu, Space } from 'antd';
 import React from 'react';
-import { history, useModel, Link } from 'umi';
-import { Avatar, Space, Button, Badge, Menu, Dropdown } from 'antd';
+import { Link, useModel } from 'umi';
 
 const RightContent: React.FC<Props> = (props) => {
   const { user, logout } = useModel('user');
@@ -9,14 +9,7 @@ const RightContent: React.FC<Props> = (props) => {
   if (!user) {
     return (
       <div className="cnode-header-right">
-        <Button
-          type="link"
-          onClick={() => {
-            history.push('/auth');
-          }}
-        >
-          登录
-        </Button>
+        <Link to="/login">登录</Link>
       </div>
     );
   }
diff --git a/src/layout/index.tsx b/src/layout/index.tsx
index f841659..8379ab8 100644
--- a/src/layout/index.tsx
+++ b/src/layout/index.tsx
@@ -3,6 +3,8 @@ import ProCard from '@ant-design/pro-card';
 
 import { PageContainer } from '@ant-design/pro-layout';
 import { BackTop, Space } from 'antd';
+import { Route } from 'antd/lib/breadcrumb/Breadcrumb';
+import { PageHeaderProps } from 'antd/lib/page-header';
 import { IRoute, Link } from 'umi';
 
 import AppQrcode from './component/AppQrcode';
@@ -33,25 +35,30 @@ const BREADCRUMB_NAME_MAP = {
   user: '用户',
   topic: '话题',
   edit: '编辑',
+  login: '登录',
 };
 
 const Layout: React.FC<React.PropsWithChildren<Props>> = (props) => {
   const { route, location } = props;
   const currentRoute = getCurrentRoute(route, location.pathname);
 
-  let headerConfig: any = {
+  let headerConfig: Partial<PageHeaderProps> = {
     title: currentRoute?.title || currentRoute?.name,
     subTitle: currentRoute?.description,
   };
 
-  const detailPaths = location.pathname.match(/\/(topic|user)\/(\w+)(\/\w+)?/);
+  const detailPaths = location.pathname.match(
+    /\/(login|topic|user)(\/\w+)?(\/\w+)?/,
+  );
+
+  let routes: Route[] = [];
 
   if (detailPaths) {
     const [pathname, category, id, status] = detailPaths;
 
     const isEdit = status === '/edit';
 
-    const routes = [
+    routes = [
       {
         path: '/',
         breadcrumbName: '主页',
@@ -62,7 +69,7 @@ const Layout: React.FC<React.PropsWithChildren<Props>> = (props) => {
       },
       {
         path: `/${category}/${id}`,
-        breadcrumbName: id,
+        breadcrumbName: id && id.replace('/', ''),
       },
     ];
 
diff --git a/src/page/login/index.less b/src/page/login/index.less
new file mode 100644
index 0000000..5e04b98
--- /dev/null
+++ b/src/page/login/index.less
@@ -0,0 +1,57 @@
+@import '~antd/es/style/themes/default.less';
+
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 50vh;
+  overflow: auto;
+  // background: @layout-body-background;
+
+  background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
+  background-repeat: no-repeat;
+  background-position: center 110px;
+  background-size: 100%;
+}
+
+.main {
+  width: 480px;
+  margin: auto;
+}
+
+.submit {
+  width: 100%;
+}
+
+.top {
+  text-align: center;
+}
+
+.header {
+  height: 44px;
+  line-height: 44px;
+  a {
+    text-decoration: none;
+  }
+}
+
+.logo {
+  height: 44px;
+  margin-right: 16px;
+  vertical-align: top;
+}
+
+.title {
+  position: relative;
+  top: 2px;
+  color: @heading-color;
+  font-weight: 600;
+  font-size: 33px;
+  font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+}
+
+.desc {
+  margin-top: 12px;
+  margin-bottom: 40px;
+  color: @text-color-secondary;
+  font-size: @font-size-base;
+}
diff --git a/src/page/login/index.tsx b/src/page/login/index.tsx
new file mode 100644
index 0000000..c59542d
--- /dev/null
+++ b/src/page/login/index.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { Form, Input, Button, Space } from 'antd';
+import { UserOutlined, LockOutlined, GithubOutlined } from '@ant-design/icons';
+
+import config from '@/config/';
+import * as styles from './index.less';
+import { Link } from 'umi';
+import { login } from '@/service/user';
+
+const Login: React.FC<Props> = (props) => {
+  const [form] = Form.useForm();
+
+  const handleLogin = async () => {
+    const values = form.getFieldsValue();
+    console.log(values);
+
+    await login(values);
+  };
+
+  const renderTop = () => (
+    <>
+      <div className={styles.header}>
+        <Link to="/">
+          <img alt="logo" className={styles.logo} src={config.logo} />
+        </Link>
+      </div>
+      <div className={styles.desc}>{config.description}</div>
+    </>
+  );
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.main}>
+        <div className={styles.top}>{renderTop()}</div>
+        <Form name="basic" form={form}>
+          <Form.Item required name="loginname">
+            <Input prefix={<UserOutlined />} placeholder="请输入用户名" />
+          </Form.Item>
+          <Form.Item name="pass" required>
+            <Input
+              prefix={<LockOutlined />}
+              placeholder="请输入密码"
+              type="password"
+            />
+          </Form.Item>
+
+          <Form.Item>
+            <Button
+              className={styles.submit}
+              htmlType="submit"
+              type="primary"
+              onClick={handleLogin}
+            >
+              登录
+            </Button>
+          </Form.Item>
+
+          <Form.Item label="其他登录方式">
+            <Link to="/">
+              <GithubOutlined />
+            </Link>
+          </Form.Item>
+        </Form>
+      </div>
+    </div>
+  );
+};
+
+export default Login;
+
+interface Props {}
diff --git a/src/service/user.ts b/src/service/user.ts
index 61571e9..e5b67c4 100644
--- a/src/service/user.ts
+++ b/src/service/user.ts
@@ -37,3 +37,10 @@ export const loadUser = async (params: {
 
   return res;
 };
+
+export const login = async (data: { loginname: string; pass: string }) => {
+  return await request(`${BASE_URL}/api/auth/signin`, {
+    method: 'POST',
+    data,
+  });
+};