diff --git a/README.md b/README.md
index 5b327c9..a203ca7 100644
--- a/README.md
+++ b/README.md
@@ -220,6 +220,21 @@ pageFooter: true
   $ npm uninstall hexo-generator-index --save
   $ npm install hexo-generator-index-pin-top --save
   ```
+### Categories
+``` bash
+  hexo new page categories
+```
+Then paste following codes to file: _posts/categories/index.md
+``` md
+---
+title: categories
+type: categories
+layout: "categories"
+---
+```
+
+### Tags
+Same as categories.
 
 ### Post poster
 
diff --git a/source/css/_partial/archive.styl b/source/css/_partial/archive.styl
index 0d74698..a5edc4f 100644
--- a/source/css/_partial/archive.styl
+++ b/source/css/_partial/archive.styl
@@ -46,7 +46,7 @@
     padding-left 3rem
     .archive-article-title
       text-decoration: none
-      font-size 1.5rem
+      font-size 1.8rem
 
 .archive-article-footer
   margin-top: 1.5rem
diff --git a/source/css/_partial/article.styl b/source/css/_partial/article.styl
index 98499d3..389c5af 100644
--- a/source/css/_partial/article.styl
+++ b/source/css/_partial/article.styl
@@ -32,7 +32,7 @@
   @extend $block-caption
   &::before
     content '\eaf2'
-    margin-right .5rem
+    margin-right .15rem
     font-family remixicon
     opacity .5
 
@@ -42,7 +42,7 @@
   &:before
     content "\efde"
     font-family remixicon
-    margin-right .5rem
+    margin-right .15rem
     opacity 0.6
   .article-category-link
     @extend $block-caption
diff --git a/source/css/_partial/categories.styl b/source/css/_partial/categories.styl
index 483e26c..dca14f4 100644
--- a/source/css/_partial/categories.styl
+++ b/source/css/_partial/categories.styl
@@ -4,10 +4,36 @@
   list-unstyled()
   margin-right -.5rem
   margin-left -.5rem
-  > .category-list-item
-    display inline-block
-    padding .5rem 1rem
+  .category-list-item
+    margin: 10px 10px;
+    padding: 0 14px;
+    display: inline-block;
+    text-align: center;
+    height: 38px;
+    min-width: 80px;
+    line-height: 38px;
+    font-size: 1.5rem;
+    font-weight: 500;
+    border-radius: 5px;
+    word-wrap: break-word;
+    cursor: pointer;
+    box-shadow: 0 3px 5px rgba(0, 0, 0, .12);
+    background-color: water
     &:before
       content "\efde"
       font-family remixicon
-      margin-right .5rem
\ No newline at end of file
+      margin-right .5rem
+      display inline-block
+      vertical-align middle
+    &:hover
+      background: linear-gradient(to right, link-hover-color 0%, link-active-color 100%) !important;
+      a
+        color: #fff
+      &:before
+        color: #fff
+  a 
+    display inline-block
+    vertical-align middle
+    text-decoration: none 
+    color: body-color
+    
\ No newline at end of file
diff --git a/source/css/_partial/tag.styl b/source/css/_partial/tag.styl
index 1c76c47..24f17a1 100644
--- a/source/css/_partial/tag.styl
+++ b/source/css/_partial/tag.styl
@@ -11,4 +11,16 @@
     &:before
       content "\eec3"
       font-family remixicon
-      margin-right .5rem
\ No newline at end of file
+      margin-right .5rem
+      display inline-block
+      vertical-align middle
+      color: tag-color
+    .tag-list-link
+      text-decoration: none
+      height 30px
+      line-height 30px
+      padding: 5px 15px
+      font-size: 1.5rem
+      border-radius: 15px
+      background-color tag-color
+      color white