diff --git a/README.md b/README.md
index cce9757..38ece8d 100644
--- a/README.md
+++ b/README.md
@@ -23,6 +23,7 @@
 * Share Qrcode
 * SEO
 * Immersive Status Bar
+* Article Catalog
 
 ## Install
 
@@ -36,7 +37,7 @@
    cp -R themes/vexo/_source/* source/
    ```
 
-2. Modify `_config.yml` with your own info. look like this
+2. Update project `_config.yml` theme config, look like this
 
    ```
    themes: vexo
@@ -44,11 +45,11 @@
 
    Here theme's name must same as the theme folder name.
 
-3. Or you can copy my theme `_config.yml` into you hexo blog directory , replace default `_config.yml`
+3. Modify theme `themes/vexo/_config.yml` with your own info.
 
 4. That's all , hope you will like :)
 
-## Update
+## Update Version
 
 ```
 cd themes/vexo
@@ -63,16 +64,20 @@ The **front-matter** of a post looks like that:
 ---
 title: "Hello World"
 date: 2016-06-10 23:00
-banner: http://your-banner-image-link.jpg
+banner: your-banner-link.jpg
 tags:
  - Movies
  - Life
 ---
 ```
 
-Add to top of your article markdown file. 
+Add this to the top of your article markdown file. 
 
 ## Change Log  
+**2017-09-21**
+* Added article catalog
+* Fixed bugs
+
 **2017-08-08**
 * Added article custom banner
 * Fixed gitment error
diff --git a/_config.yml b/_config.yml
index 4d2cc8b..ebb2939 100644
--- a/_config.yml
+++ b/_config.yml
@@ -16,6 +16,12 @@ menu:
 highlight:
   tomorrow
 
+# catalog
+catalog: true
+
+# donate
+donate: true
+
 # gitment
 gitment_owner: yanm1ng
 gitment_repo: yanm1ng.github.io
@@ -30,4 +36,10 @@ baidu_id:
 about: 
   banner: http://file.muyutech.com/about.jpg
   avatar: https://avatars3.githubusercontent.com/u/16443628?v=3&s=460
-  description: The end is always near.
\ No newline at end of file
+  description: The end is always near.
+  # Links
+  weibo_username: yanm1ng
+  twitter_username: yanm1ng
+  github_username: yanm1ng
+  zhihu_username: yummy1121
+  douban_username: yanm1ng
\ No newline at end of file
diff --git a/layout/_partial/catalog.ejs b/layout/_partial/catalog.ejs
new file mode 100644
index 0000000..143dd27
--- /dev/null
+++ b/layout/_partial/catalog.ejs
@@ -0,0 +1,10 @@
+<aside class="catalog-container">
+  <div class="toc-main">
+    <strong class="toc-title">Catalog</strong>
+    <% if (toc(page.content) !== ""){ %>
+      <%- toc(page.content, { "class": "toc-nav", "list_number": false }) %>
+    <% } else { %>
+      <ol class="nav"><%= __('none') %></ol>
+    <% } %>
+  </div>
+</aside>
\ No newline at end of file
diff --git a/layout/about.ejs b/layout/about.ejs
index a1817d5..8b6e2b3 100644
--- a/layout/about.ejs
+++ b/layout/about.ejs
@@ -6,40 +6,40 @@
   <h3><%- config.author %></h3>
   <p class="discription"><%- theme.about.description %></p>
   <section class="share-icons">
-    <% if (config.weibo_username) { %>
-      <a class="icon-weibo" href="http://weibo.com/<%- config.weibo_username %>" target="_blank">
+    <% if (theme.about.weibo_username) { %>
+      <a class="icon-weibo" href="http://weibo.com/<%- theme.about.weibo_username %>" target="_blank">
         <span class="fa-stack fa-lg">
           <i class="fa fa-circle fa-stack-2x"></i>
           <i class="fa fa-weibo fa-stack-1x fa-inverse"></i>
         </span>
       </a>
     <% } %>
-    <% if (config.twitter_username) { %>
-      <a class="icon-twitter" href="https://twitter.com/<%- config.twitter_username %>" target="_blank">
+    <% if (theme.about.twitter_username) { %>
+      <a class="icon-twitter" href="https://twitter.com/<%- theme.about.twitter_username %>" target="_blank">
         <span class="fa-stack fa-lg">
           <i class="fa fa-circle fa-stack-2x"></i>
           <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
         </span>
       </a>
     <% } %>
-    <% if (config.github_username) { %>
-      <a class="icon-github" href="https://github.com/<%- config.github_username %>" target="_blank">
+    <% if (theme.about.github_username) { %>
+      <a class="icon-github" href="https://github.com/<%- theme.about.github_username %>" target="_blank">
         <span class="fa-stack fa-lg">
           <i class="fa fa-circle fa-stack-2x"></i>
           <i class="fa fa-github fa-stack-1x fa-inverse"></i>
         </span>
       </a>
     <% } %>
-    <% if (config.zhihu_username) { %>
-      <a class="icon-zhihu" href="https://www.zhihu.com/people/<%- config.zhihu_username %>" target="_blank">
+    <% if (theme.about.zhihu_username) { %>
+      <a class="icon-zhihu" href="https://www.zhihu.com/people/<%- theme.about.zhihu_username %>" target="_blank">
         <span class="fa-stack fa-lg">
           <i class="fa fa-circle fa-stack-2x"></i>
           <i class="fa fa-stack-1x fa-inverse">知</i>
         </span>
       </a>
     <% } %>
-    <% if (config.douban_username) { %>
-        <a class="icon-douban" href="https://www.douban.com/people/<%- config.douban_username %>" target="_blank">
+    <% if (theme.about.douban_username) { %>
+        <a class="icon-douban" href="https://www.douban.com/people/<%- theme.about.douban_username %>" target="_blank">
             <span class="fa-stack fa-lg">
                 <i class="fa fa-circle fa-stack-2x"></i>
                 <i class="fa fa-stack-1x fa-inverse">豆</i>
diff --git a/layout/page.ejs b/layout/page.ejs
index ea34c9a..13a02fd 100644
--- a/layout/page.ejs
+++ b/layout/page.ejs
@@ -5,44 +5,61 @@
     <a href="javascript:;"></a>
   </div>
 </div>
-<main class="app-body">
+<main class="app-body flex-box">
+  <!-- Article START -->
   <article class="post-article">
     <section class="markdown-content"><%- page.content %></section>
+    <!-- Tags START -->
     <% if (page.tags && page.tags.length) { %>
       <div class="tags">
         <span>Tags:</span>
         <%- partial('_partial/tag', { tags: page.tags }) %>
       </div>
     <% } %>
-    <div class="money-like">
-      <div class="reward-btn">
-        赏
-        <span class="money-code">
-          <span class="alipay-code">
-            <div class="code-image"></div>
-            <b>使用支付宝打赏</b>
+    <!-- Tags END -->
+    <!-- 打赏 START -->
+    <% if (theme.donate) { %>
+      <div class="money-like">
+        <div class="reward-btn">
+          赏
+          <span class="money-code">
+            <span class="alipay-code">
+              <div class="code-image"></div>
+              <b>使用支付宝打赏</b>
+            </span>
+            <span class="wechat-code">
+              <div class="code-image"></div>
+              <b>使用微信打赏</b>
+            </span>
           </span>
-          <span class="wechat-code">
-            <div class="code-image"></div>
-            <b>使用微信打赏</b>
-          </span>
-        </span>
+        </div>
+        <p class="notice">若你觉得我的文章对你有帮助，欢迎点击上方按钮对我打赏</p>
       </div>
-      <p class="notice">若你觉得我的文章对你有帮助，欢迎点击上方按钮对我打赏</p>
-    </div>
+    <% } %>
+    <!-- 打赏 END -->
+    <!-- 二维码 START -->
     <div class="qrcode">
       <canvas id="share-qrcode"></canvas>
       <p class="notice">扫描二维码，分享此文章</p>
     </div>
+    <!-- 二维码 END -->
     <% if (theme.gitment_owner) { %>
+      <!-- Gitment START -->
       <div id="comments"></div>
+      <!-- Gitment END -->
     <% } else { %>
-      <!-- UY BEGIN -->
+      <!-- UY START -->
       <div id="uyan_frame"></div>
       <script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js"></script>
       <!-- UY END -->
     <% } %>
   </article>
+  <!-- Article END -->
+  <!-- Catalog START -->
+  <% if (theme.catalog) { %>
+    <%- partial('_partial/catalog') %>
+  <% } %>
+  <!-- Catalog END -->
 </main>
 
 <script>
@@ -60,32 +77,37 @@
 
      // error image
     $(".markdown-content img").on('error', function() {
-      $(this).attr('src', 'http://file.muyutech.com/error-img.png') 
+      $(this).attr('src', 'http://file.muyutech.com/error-img.png')
+      $(this).css({
+        'cursor': 'default'
+      })
     })
 
     // zoom image
     $(".markdown-content img").on('click', function() {
       var src = $(this).attr('src')
-      var imageW = $(this).width()
-      var imageH = $(this).height()
-      
-      var zoom = ($(window).width() * 0.95 / imageW).toFixed(2)
-      zoom = zoom < 1 ? 1 : zoom
-      zoom = zoom > 2 ? 2 : zoom
-      var transY = (($(window).height() - imageH) / 2).toFixed(2)
+      if (src !== 'http://file.muyutech.com/error-img.png') {
+        var imageW = $(this).width()
+        var imageH = $(this).height()
+        
+        var zoom = ($(window).width() * 0.95 / imageW).toFixed(2)
+        zoom = zoom < 1 ? 1 : zoom
+        zoom = zoom > 2 ? 2 : zoom
+        var transY = (($(window).height() - imageH) / 2).toFixed(2)
 
-      $('body').append('<div class="image-view-wrap"><div class="image-view-inner"><img src="'+ src +'" /></div></div>')
-      $('.image-view-wrap').addClass('wrap-active')
-      $('.image-view-wrap img').css({
-        'width': `${imageW}`,
-        'transform': `translate3d(0, ${transY}px, 0) scale3d(${zoom}, ${zoom}, 1)`
-      })
-      $('html').css('overflow', 'hidden')
+        $('body').append('<div class="image-view-wrap"><div class="image-view-inner"><img src="'+ src +'" /></div></div>')
+        $('.image-view-wrap').addClass('wrap-active')
+        $('.image-view-wrap img').css({
+          'width': `${imageW}`,
+          'transform': `translate3d(0, ${transY}px, 0) scale3d(${zoom}, ${zoom}, 1)`
+        })
+        $('html').css('overflow', 'hidden')
 
-      $('.image-view-wrap').on('click', function() {
-        $(this).remove()
-        $('html').attr('style', '')
-      })
+        $('.image-view-wrap').on('click', function() {
+          $(this).remove()
+          $('html').attr('style', '')
+        })
+      }
     })
 
     // qrcode
@@ -96,7 +118,7 @@
 
     // gitment
     var gitmentConfig = "<%= theme['gitment_owner'] %>";
-    if (gitmentConfig != "undefined") {
+    if (gitmentConfig !== 'undefined') {
       var gitment = new Gitment({
         id: "<%- page.title %>",
         owner: "<%= theme['gitment_owner'] %>",
diff --git a/source/css/_config.styl b/source/css/_config.styl
index 78d8381..3f25666 100644
--- a/source/css/_config.styl
+++ b/source/css/_config.styl
@@ -11,10 +11,11 @@ color-shadow = #e3e3e3
 logo-url = "images/logo.png"
 menu-url = "images/menu.png"
 arrow-url = "images/top.png"
+catalog-url = "images/catalog.png"
 alipay-url = "images/alipay.jpg"
 wechat-url = "images/wechat.jpg"
 avatar-url = "images/avatar.png"
 escheres-url = "images/escheres.png"
 
 m-mobile = "screen and (max-width: 480px)"
-m-pad = "screen and (max-width: 720px)"
\ No newline at end of file
+m-pad = "screen and (max-width: 960px)"
\ No newline at end of file
diff --git a/source/css/_partial/catalog.styl b/source/css/_partial/catalog.styl
new file mode 100644
index 0000000..f030d5b
--- /dev/null
+++ b/source/css/_partial/catalog.styl
@@ -0,0 +1,38 @@
+.catalog-container
+  display: block
+  margin-left: 20px
+  flex-basis: 280px
+  -webkit-flex-basis: 280px
+  flex-shrink: 0
+  -webkit-flex-shrink: 0
+  @media m-pad
+    display: none
+  .fixed-toc
+    position: fixed
+    top: 90px
+  .toc-main
+    padding-left: 20px
+    border-left: 1px solid color-border
+    width: 280px
+    box-sizing: border-box
+    .toc-title
+      font-size: 1.2em
+      position: relative
+      padding-left: 28px
+      &:before
+        content: ''
+        position: absolute
+        width: 22px
+        height: 22px
+        left: 0
+        top: 2px
+        background: url(catalog-url) no-repeat
+        background-size: contain
+    .toc-nav
+      padding: 0
+      margin-top: 1em
+    ol
+      padding-left: 20px
+    li
+      list-style-type: none
+      line-height: 1.5
\ No newline at end of file
diff --git a/source/css/images/catalog.png b/source/css/images/catalog.png
new file mode 100644
index 0000000..10b8793
Binary files /dev/null and b/source/css/images/catalog.png differ
diff --git a/source/css/style.styl b/source/css/style.styl
index 7a26288..abbc651 100644
--- a/source/css/style.styl
+++ b/source/css/style.styl
@@ -7,9 +7,6 @@
   background: color-primary
   color: color-white
 
-::-webkit-scrollbar
-  display: none
-
 body
   font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif
   -webkit-font-smoothing: antialiased
@@ -37,6 +34,13 @@ p
 pre
   overflow-x: auto
 
+.flex-box
+  display: flex
+  display: -ms-flexbox
+  display: -webkit-box
+  display: -webkit-flex
+  transform: unset !important
+
 .wechat-share
   width: 0
   height: 0
@@ -46,10 +50,10 @@ pre
     height 400px
 
 .app-body
-  padding: 1em
+  padding: 2em 1em
   margin: 0 auto
   height: 100%
-  max-width: 750px
+  max-width: 980px
   position: relative
   opacity: 0
   transform: translateY(-20px)
@@ -79,7 +83,7 @@ pre
 .article-card
   padding-bottom: 20px
   &:first-child
-    margin-top: 80px
+    margin-top: 60px
 
 h2.article-head
   font-size: 1.6em
@@ -159,9 +163,7 @@ h2.article-head
       border-left: 1px solid color-white
 
 .post-article
-  margin-top: 20px
-  @media m-mobile
-    margin-top: 0
+  margin-top: 0
 
 .money-like
   padding: 2em 0 3em
@@ -272,13 +274,12 @@ h2.article-head
   transform: translate(80px, 0)
   transition: all .3s ease
   box-shadow: 0 0 3px 0 rgba(0,0,0,.12), 0 3px 3px 0 rgba(0,0,0,.24)
-
-.arrow-icon
-  background-image: url(arrow-url)
-  width: 30px
-  height: 30px
-  display: block
-  background-size: contain
+  .arrow-icon
+    background-image: url(arrow-url)
+    width: 30px
+    height: 30px
+    display: block
+    background-size: contain
 
 .opacity
   opacity: 1
@@ -299,4 +300,5 @@ h2.article-head
 @import "_partial/tags"
 @import "_partial/archive"
 @import "_partial/about"
-@import "_partial/project"
\ No newline at end of file
+@import "_partial/project"
+@import "_partial/catalog"
\ No newline at end of file
diff --git a/source/js/script.js b/source/js/script.js
index e58fc7e..c16be85 100644
--- a/source/js/script.js
+++ b/source/js/script.js
@@ -5,6 +5,7 @@
   var banner = document.getElementById('article-banner') || false
   var about = document.getElementById('about-banner') || false
   var top = $('.scroll-top')
+  var catalog = $('.catalog-container .toc-main')
   var isOpen = false
 
   $(document).ready(function () {
@@ -55,11 +56,11 @@
   })
 
   $('.arrow-down').on('click', function () {
-    $('html,body').animate({ scrollTop: banner.offsetHeight - header.height() }, 500)
+    $('html, body').animate({ scrollTop: banner.offsetHeight - header.height() }, 500)
   })
 
   top.on('click', function () {
-    $('html,body').animate({ scrollTop: 0 }, 600)
+    $('html, body').animate({ scrollTop: 0 }, 600)
   })
 
   document.addEventListener('scroll', function () {
@@ -77,5 +78,10 @@
     } else {
       top.removeClass('opacity')
     }
+    if (scrollTop > 190) {
+      catalog.addClass('fixed-toc')
+    } else {
+      catalog.removeClass('fixed-toc')
+    }
   })
 })(jQuery)