diff --git a/ShadowEditor.Web/locales/zh-CN.json b/ShadowEditor.Web/locales/zh-CN.json
index 025fac26..3c5e34f9 100644
--- a/ShadowEditor.Web/locales/zh-CN.json
+++ b/ShadowEditor.Web/locales/zh-CN.json
@@ -762,5 +762,6 @@
     "Nick name is not allowed to be empty.": "姓名不允许为空",
     "The username is already existed.": "用户名已经存在。",
     "Edit Role": "编辑角色",
-    "Edit User": "编辑用户"
+    "Edit User": "编辑用户",
+    "Register": "注册"
 }
\ No newline at end of file
diff --git a/ShadowEditor.Web/src/editor/menu/LoginMenu.jsx b/ShadowEditor.Web/src/editor/menu/LoginMenu.jsx
index bdb44ce9..15216f12 100644
--- a/ShadowEditor.Web/src/editor/menu/LoginMenu.jsx
+++ b/ShadowEditor.Web/src/editor/menu/LoginMenu.jsx
@@ -1,22 +1,36 @@
-import { classNames, PropTypes, MenuBar, MenuItem } from '../../third_party';
+import './css/LoginMenu.css';
+import { classNames, MenuItemSeparator, Button } from '../../third_party';
 import LoginWindow from '../system/LoginWindow.jsx';
 
 /**
- * 状态菜单
+ * 登录菜单
  * @author tengge / https://github.com/tengge1
  */
 class LoginMenu extends React.Component {
     constructor(props) {
         super(props);
 
-        this.handleClick = this.handleClick.bind(this);
+        this.handleClickRegister = this.handleClickRegister.bind();
+        this.handleClickLogin = this.handleClickLogin.bind(this);
     }
 
     render() {
-        return <MenuItem title={_t(`Login`)} onClick={this.handleClick}></MenuItem>;
+        return <>
+            <MenuItemSeparator className={classNames('horizontal', 'LoginSeparator')}></MenuItemSeparator>
+            <li className={classNames('MenuItem', 'LoginMenuItem')}>
+                <Button className={'button'} onClick={this.handleClickRegister}>{_t(`Register`)}</Button>
+            </li>
+            <li className={classNames('MenuItem', 'LoginMenuItem')}>
+                <Button className={'button'} onClick={this.handleClickLogin}>{_t(`Login`)}</Button>
+            </li>
+        </>;
     }
 
-    handleClick() {
+    handleClickRegister() {
+
+    }
+
+    handleClickLogin() {
         const win = app.createElement(LoginWindow);
         app.addElement(win);
     }
diff --git a/ShadowEditor.Web/src/editor/menu/css/LoginMenu.css b/ShadowEditor.Web/src/editor/menu/css/LoginMenu.css
new file mode 100644
index 00000000..0248b5f8
--- /dev/null
+++ b/ShadowEditor.Web/src/editor/menu/css/LoginMenu.css
@@ -0,0 +1,18 @@
+.MenuItemSeparator.LoginSeparator {
+    margin-right: 4px;
+}
+
+.MenuItem.LoginMenuItem {
+    padding: 0;
+    display: flex;
+    align-items: center;
+}
+
+.MenuBar>.MenuItem.LoginMenuItem:hover {
+    padding: 0;
+}
+
+.MenuItem.LoginMenuItem>.button {
+    height: 20px;
+    line-height: 20px;
+}
\ No newline at end of file