diff --git a/docs/src/components/IssueIcon.js b/docs/src/components/IssueIcon.js
new file mode 100644
index 00000000..81458262
--- /dev/null
+++ b/docs/src/components/IssueIcon.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export default () => (
+  <svg viewBox="0 0 24 24">
+    <path
+      fill="#000"
+      d="M56,21.0062084 C55.7532904,21.0062084 55.5235708,20.9979033 55.2836824,20.9810434 C55.1020397,20.9682771 54.9164665,20.9509088 54.6809967,20.9254591 C54.5465244,20.9109252 54.0297968,20.8522232 54.0018697,20.8490992 C53.9744999,20.8460377 53.4603501,21.1392786 52.7239435,21.6691807 C52.6488067,21.7233329 52.6488067,21.7233329 52.5733402,21.7779828 C51.7412517,22.3810404 51.7212346,22.3953222 51.4482456,22.5699985 C50.9069763,22.9163381 50.5772183,23.0618037 50.1661475,22.9758631 C49.5578633,22.8486919 49.3973426,22.4246132 49.339637,21.7541988 C49.3146144,21.4634899 49.3148684,21.211316 49.3293387,20.5551955 C49.3322097,20.4246259 49.3322097,20.4246259 49.3347228,20.2951186 C49.3437292,19.7995716 49.3371267,19.4823231 49.3070385,19.2354687 C49.2878458,19.0780047 49.2663647,19.0214492 49.3687252,19.0882962 C46.6446875,17.3093506 45,14.5307092 45,11.5031042 C45,6.22440119 49.950017,2 56,2 C62.049983,2 67,6.22440119 67,11.5031042 C67,16.7818072 62.049983,21.0062084 56,21.0062084 Z M51.674981,20.5284725 C51.7521097,20.4726186 51.7521097,20.4726186 51.8298158,20.4166146 C53.0200187,19.5601706 53.5645501,19.2496017 54.1718242,19.3175316 C54.2034666,19.3210711 54.71571,19.3792637 54.8452759,19.3932673 C55.0632933,19.4168308 55.2309502,19.4325222 55.3908641,19.4437614 C55.595599,19.4581506 55.7896031,19.4651644 56,19.4651644 C61.2525887,19.4651644 65.4651163,15.8701452 65.4651163,11.5031042 C65.4651163,7.1360632 61.2525887,3.54104392 56,3.54104392 C50.7474113,3.54104392 46.5348837,7.1360632 46.5348837,11.5031042 C46.5348837,13.9850104 47.8994765,16.2904417 50.2056207,17.79648 C50.82548,18.201282 50.8972196,18.78986 50.869351,20.3232343 C50.8667445,20.4575447 50.8667445,20.4575447 50.8638463,20.5893102 C50.8589803,20.8099458 50.8558989,20.9801797 50.8548971,21.1179201 C50.9891634,21.0254093 51.1856783,20.8830955 51.674981,20.5284725 Z M51.3953488,13.0441481 C50.547656,13.0441481 49.8604651,12.3541992 49.8604651,11.5031042 C49.8604651,10.6520091 50.547656,9.96206026 51.3953488,9.96206026 C52.2430417,9.96206026 52.9302326,10.6520091 52.9302326,11.5031042 C52.9302326,12.3541992 52.2430417,13.0441481 51.3953488,13.0441481 Z M56.5116279,13.0441481 C55.663935,13.0441481 54.9767442,12.3541992 54.9767442,11.5031042 C54.9767442,10.6520091 55.663935,9.96206026 56.5116279,9.96206026 C57.3593208,9.96206026 58.0465116,10.6520091 58.0465116,11.5031042 C58.0465116,12.3541992 57.3593208,13.0441481 56.5116279,13.0441481 Z M61.627907,13.0441481 C60.7802141,13.0441481 60.0930233,12.3541992 60.0930233,11.5031042 C60.0930233,10.6520091 60.7802141,9.96206026 61.627907,9.96206026 C62.4755998,9.96206026 63.1627907,10.6520091 63.1627907,11.5031042 C63.1627907,12.3541992 62.4755998,13.0441481 61.627907,13.0441481 Z"
+      transform="translate(-44)"
+    />
+  </svg>
+);
+
diff --git a/docs/src/components/SideNav/style.scss b/docs/src/components/SideNav/style.scss
index a3828e81..6fa6f0fd 100644
--- a/docs/src/components/SideNav/style.scss
+++ b/docs/src/components/SideNav/style.scss
@@ -8,12 +8,15 @@
       overflow: scroll;
       padding-bottom: 60px;
     }
+    &.navbar-default {
+      background-color: transparent;
+    }
     &.navbar {
       position: fixed;
       width: inherit;
       height: calc(100vh - 51px);
-      border-right: 1px solid #ececec;
       border: 0;
+      border-right: 1px solid #ececec;
       border-radius: 0;
     }
     .navbar-nav > li {
@@ -23,7 +26,10 @@
         padding: 8px 0px 8px 10px;
       }
     }
-    .Sidebar__Header {
+    &__Header {
+      &.navbar-nav {
+        float: none;
+      }
       .nav a {
         display: block;
         cursor: pointer;
diff --git a/docs/src/components/TopBar/index.js b/docs/src/components/TopBar/index.js
index d8737423..dad73722 100644
--- a/docs/src/components/TopBar/index.js
+++ b/docs/src/components/TopBar/index.js
@@ -1,9 +1,10 @@
 import { Link } from "gatsby"
 import PropTypes from "prop-types"
 import React from "react"
-import { Navbar, Nav } from 'react-bootstrap';
+import { Navbar, Nav, Tooltip, OverlayTrigger } from 'react-bootstrap';
 import { SideNavItems } from '../SideNav';
 import GitHubIcon from '../GitHubIcon';
+import IssueIcon from '../IssueIcon';
 import logo from '../../images/logo.png';
 import useWindowWidth from '../../utils/hooks/get-window-width';
 import './style.scss';
@@ -61,13 +62,31 @@ const TopBar = (props) => {
           <Nav pullRight>
             <li>
               <a target="_blank" rel="noopener noreferrer"  href="https://github.com/xsky-fe/wizard-ui">
-                <span className="github-icon">
+                <span className="svg-icon">
                   <GitHubIcon />
                 </span>
                 GITHUB
               </a>
             </li>
           </Nav>
+          <Nav pullRight>
+            <li>
+              <OverlayTrigger
+                placement="left"
+                overlay={(
+                  <Tooltip id="tooltip">
+                    提交 Issue
+                  </Tooltip>
+                )}
+              >
+                <a target="_blank" rel="noopener noreferrer"  href="https://github.com/xsky-fe/wizard-ui/issues/new">
+                   <span className="svg-icon">
+                    <IssueIcon />
+                  </span>
+                </a>
+              </OverlayTrigger>
+            </li>
+          </Nav>
         </Navbar.Collapse>
       </Navbar>
     </div>
diff --git a/docs/src/components/TopBar/style.scss b/docs/src/components/TopBar/style.scss
index 4ec11628..2eb10295 100644
--- a/docs/src/components/TopBar/style.scss
+++ b/docs/src/components/TopBar/style.scss
@@ -12,7 +12,7 @@
       color: #6b58c4;
     }
   }
-  .github-icon {
+  .svg-icon {
     margin-right: 8px;
     display: inline-block;
     height: 16px;
@@ -27,6 +27,11 @@
 }
 @media(min-width: 768px) {
   .TopBar {
+    .navbar-default {
+      background-color: #fff;
+      border: 0;
+      box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, .15);
+    }
     .Sidebar__Header {
       &.navbar-nav {
         margin: 0;
diff --git a/docs/src/templates/components-post.js b/docs/src/templates/components-post.js
index f7912a4b..09a6af3a 100644
--- a/docs/src/templates/components-post.js
+++ b/docs/src/templates/components-post.js
@@ -30,7 +30,7 @@ class BlogPostTemplate extends React.Component {
           <Col xs={24} md={4} xl={4}>
             <SideNav location={this.props.location} />
           </Col>
-          <Col xs={24} md={16} xl={16}>
+          <Col xs={24} md={17} xl={17}>
             <div className="Main__Body">
               <Header post={post}/>
               <MDXProvider components={components}>
@@ -50,7 +50,7 @@ class BlogPostTemplate extends React.Component {
               )}
             </div>
           </Col>
-          <Col md={4} xl={4}>
+          <Col md={3} xl={3}>
             <Toc headings={headings} location={this.props.location}/>
           </Col>
         </Row>