diff --git a/spug_web/src/layout/Header.js b/spug_web/src/layout/Header.js
index 628cc6d..efd3365 100644
--- a/spug_web/src/layout/Header.js
+++ b/spug_web/src/layout/Header.js
@@ -6,7 +6,8 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { Layout, Dropdown, Menu, Avatar } from 'antd';
-import { MenuFoldOutlined, MenuUnfoldOutlined, UserOutlined, LogoutOutlined } from '@ant-design/icons';
+import { MenuFoldOutlined, MenuUnfoldOutlined, UserOutlined, LogoutOutlined, CodeOutlined } from '@ant-design/icons';
+import { AuthDiv } from 'components';
 import Notification from './Notification';
 import styles from './layout.module.less';
 import http from '../libs/http';
@@ -20,6 +21,10 @@ export default function (props) {
     http.get('/api/account/logout/')
   }
 
+  function openTerminal() {
+    window.open('/ssh')
+  }
+
   const UserMenu = (
     <Menu>
       <Menu.Item>
@@ -42,7 +47,10 @@ export default function (props) {
         </div>
       </div>
       <Notification/>
-      <div className={styles.right}>
+      <AuthDiv className={styles.terminal} auth="host.console.view|host.console.list" onClick={openTerminal}>
+        <CodeOutlined style={{fontSize: 16}}/>
+      </AuthDiv>
+      <div className={styles.user}>
         <Dropdown overlay={UserMenu} style={{background: '#000'}}>
           <span className={styles.action}>
             <Avatar size="small" src={avatar} style={{marginRight: 8}}/>
diff --git a/spug_web/src/layout/Notification.js b/spug_web/src/layout/Notification.js
index 24395be..329544c 100644
--- a/spug_web/src/layout/Notification.js
+++ b/spug_web/src/layout/Notification.js
@@ -106,7 +106,7 @@ export default function () {
 
   const count = notifies.length - reads.length;
   return (
-    <div className={styles.right}>
+    <div className={styles.notification}>
       <Dropdown trigger={['click']} onVisibleChange={handleVisible} overlay={(
         <Menu className={styles.notify}>
           <Menu.Item style={{padding: 0, whiteSpace: 'unset'}}>
@@ -133,11 +133,11 @@ export default function () {
           </Menu.Item>
         </Menu>
       )}>
-        <span className={styles.trigger}>
+        <div className={styles.trigger}>
           <Badge count={count > 0 ? count : 0}>
             <NotificationOutlined style={{fontSize: 16}}/>
           </Badge>
-        </span>
+        </div>
       </Dropdown>
     </div>
   )
diff --git a/spug_web/src/layout/avatar.png b/spug_web/src/layout/avatar.png
index 64669bd..d8b1c8a 100644
Binary files a/spug_web/src/layout/avatar.png and b/spug_web/src/layout/avatar.png differ
diff --git a/spug_web/src/layout/layout.module.less b/spug_web/src/layout/layout.module.less
index e3799f4..1ee5674 100644
--- a/spug_web/src/layout/layout.module.less
+++ b/spug_web/src/layout/layout.module.less
@@ -12,7 +12,20 @@
     flex: 1;
   }
 
-  .right {
+  .terminal {
+    padding: 0 12px;
+    cursor: pointer;
+    line-height: 48px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.025);
+    }
+  }
+
+  .user {
     .action {
       cursor: pointer;
       padding: 0 12px;
@@ -27,12 +40,9 @@
   }
 
   .trigger {
-    font-size: 20px;
-    line-height: 48px;
     cursor: pointer;
     transition: all 0.3s, padding 0s;
-    padding: 0 24px;
-    float: left;
+    padding: 0 12px;
   }
 
   .trigger:hover {