diff --git a/README.md b/README.md
index 19815e66..8efa7176 100644
--- a/README.md
+++ b/README.md
@@ -4,8 +4,9 @@
 
 >🃏 A magical documentation site generator.
 
-## CLI
-[https://github.com/QingWei-Li/docsify-cli](https://github.com/QingWei-Li/docsify-cli)
+## Links
+- [Documentation](https://qingwei-li.github.io/docsify)
+- [CLI](https://github.com/QingWei-Li/docsify-cli)
 
 ## Features
 - Easy and lightweight
diff --git a/themes/buble.css b/themes/buble.css
index e69de29b..1835f40f 100644
--- a/themes/buble.css
+++ b/themes/buble.css
@@ -0,0 +1,404 @@
+@import url('https://fonts.googleapis.com/css?family=Inconsolata|Inconsolata-Bold');
+
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-overflow-scrolling: touch;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-text-size-adjust: none;
+  -webkit-touch-callout: none;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* navbar */
+nav {
+  position: absolute;
+  right: 0;
+  left: 0;
+  z-index: 10;
+  margin: 25px 60px 0 0;
+  text-align: right;
+}
+
+nav a {
+  margin: 0 1em;
+  padding: 5px 0;
+  font-size: 16px;
+  text-decoration: none;
+  color: inherit;
+  transition: color .3s;
+}
+
+nav a:hover {
+  color: #0074D9;
+}
+
+nav a.active {
+  color: #0074D9;
+  border-bottom: 2px solid #0074D9;
+}
+
+/* github corner */
+.github-corner {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 10;
+}
+
+.github-corner svg {
+  color: #fff;
+  fill: #0074D9;
+  height: 80px;
+  width: 80px;
+}
+
+.github-corner:hover .octo-arm {
+  animation:octocat-wave 560ms ease-in-out;
+}
+
+@keyframes octocat-wave {
+  0%,100%{ transform: rotate(0); }
+  20%,60%{ transform: rotate(-25deg); }
+  40%,80%{ transform: rotate(10deg); }
+}
+
+@media (max-width: 500px) {
+  .github-corner:hover .octo-arm {
+    animation: none;
+  }
+  .github-corner .octo-arm {
+    animation: octocat-wave 560ms ease-in-out;
+  }
+}
+
+html, body {
+  height: 100%;
+}
+
+body {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  background-color: #fff;
+  color: #34495e;
+  font-family: 'Source Sans Pro', arial, sans-serif;
+  font-weight: 400px;
+  font-size: 15px;
+  letter-spacing: 0;
+  margin: 0;
+}
+
+/* main */
+main {
+  height: 100%;
+  position: relative;
+  width: 100%;
+}
+
+/* sidebar */
+.sidebar {
+  background-color: #fff;
+  border-right: 1px solid rgba(0,0,0,.07);
+  bottom: 0;
+  color: #364149;
+  overflow-y: auto;
+  position: absolute;
+  top: 0;
+  width: 14em;
+  z-index: 1;
+  padding-top: 40px;
+}
+
+.sidebar ul {
+  margin: 0;
+  padding: 0;
+}
+
+.sidebar ul, .sidebar ul li {
+  list-style: none;
+}
+
+.sidebar a {
+  color: #666;
+  text-decoration: none;
+}
+
+.sidebar li {
+  list-style: none;
+  padding: 0.2em 0.2em 0.2em 1em;
+  margin: 0;
+}
+
+.sidebar .active {
+  background-color: #eee;
+}
+
+.sidebar .active a {
+  color: #333;
+}
+
+/* main content */
+.content {
+  bottom: 0;
+  left: 14em;
+  overflow-y: auto;
+  position: absolute;
+  right: 0;
+  top: 0;
+  overflow-x: hidden;
+  padding-top: 20px;
+}
+
+@media screen and (max-width: 600px) {
+  .sidebar {
+    left: -14em;
+  }
+
+  .content {
+    left: 0;
+  }
+}
+
+/* markdown content found on pages */
+.markdown-section {
+  position: relative;
+  margin: 0 auto;
+  max-width: 64em;
+  padding: 20px 15px 40px 15px;
+}
+
+.markdown-section * {
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  font-size: inherit;
+}
+
+.markdown-section>:first-child {
+  margin-top: 0!important;
+}
+
+.markdown-section h1,
+.markdown-section h2,
+.markdown-section h3,
+.markdown-section h4,
+.markdown-section strong {
+  font-weight: 400;
+  color: #333;
+}
+
+.markdown-section a {
+  color: #0074D9;
+  font-weight: 400;
+}
+
+.markdown-section p,
+.markdown-section ul,
+.markdown-section ol {
+  word-spacing: 0.05em;
+}
+
+.markdown-section h1 {
+  margin: 0 0 1em;
+  font-size: 2em;
+  font-weight: 500;
+}
+
+.markdown-section h2 {
+  padding: 1rem 0 0 0;
+  margin: 0 0 1rem 0;
+  font-size: 1.8em;
+  font-weight: 400;
+}
+
+.markdown-section h3 {
+  margin: 52px 0 1.2em;
+  font-size: 1.5em;
+}
+
+
+.markdown-section h4 {
+  font-size: 1.25em;
+}
+
+.markdown-section h5 {
+  font-size: 1em;
+}
+
+.markdown-section h6 {
+  font-size: 1em;
+  color: #777;
+}
+
+.markdown-section figure,
+.markdown-section p,
+.markdown-section ul,
+.markdown-section ol {
+  margin: 1.2em 0;
+}
+
+.markdown-section p,
+.markdown-section ul,
+.markdown-section ol {
+  margin: 0 0 1em 0;
+  line-height: 1.5;
+}
+
+.markdown-section ul,
+.markdown-section ol {
+  padding-left: 1.5em;
+}
+
+.markdown-section li {
+  margin: 0;
+  line-height: 1.5;
+}
+
+.markdown-section blockquote {
+  color: #858585;
+  border-left: 4px solid #0074D9;
+  margin: 2em 0;
+  padding-left: 20px;
+}
+
+.markdown-section blockquote p {
+  font-weight: 600;
+  margin-left: 0;
+}
+
+.markdown-section iframe {
+  margin: 1em 0;
+}
+
+.markdown-section em {
+  color: #7f8c8d;
+}
+
+.markdown-section code {
+  background-color: #f9f9f9;
+  padding: 0.2em 0.4em;
+  border-radius: 3px;
+  white-space: pre;
+  font-family: Inconsolata;
+}
+
+.markdown-section pre {
+  background-color: #f9f9f9;
+  border-left: 2px solid #eee;
+  padding: 8px;
+  margin: 0 0 1em 0;
+  font-family: Inconsolata;
+  padding: 12px 10px 12px 12px;
+  font-size: 16px;
+}
+
+/* code highlight */
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #93a1a1; /* base1 */
+}
+
+.token.punctuation {
+  color: #586e75; /* base01 */
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #268bd2; /* blue */
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.url,
+.token.inserted {
+  color: #2aa198; /* cyan */
+}
+
+.token.entity {
+  color: #657b83; /* base00 */
+  background: #eee8d5; /* base2 */
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #a11; /* green */
+}
+
+.token.function {
+  color: #b58900; /* yellow */
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #cb4b16; /* orange */
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+.markdown-section pre>code {
+  padding: 0;
+  font-family: Inconsolata;
+  line-height: 1.2em;
+}
+
+.markdown-section code::after, .markdown-section code::before {
+  letter-spacing: 0.05em;
+}
+
+code .token {
+  min-height: 1.5em;
+  -webkit-font-smoothing: initial;
+  -moz-osx-font-smoothing: initial;
+}
+
+pre code {
+  overflow-x: auto;
+  position: relative;
+  padding: 0;
+  background-color: #f8f8f8;
+  padding: 0.8em 0.8em 0.4em;
+  line-height: 1.1em;
+  border-radius: 2px;
+}
+
+.content img {
+  max-width: 100%;
+}
+
+.content span.light {
+  color: #7f8c8d;
+}
+
+.content span.info {
+  display: inline-block;
+  font-size: 0.85em;
+  margin-left: 20px;
+  vertical-align: middle;
+  width: 280px;
+}
diff --git a/themes/vue.css b/themes/vue.css
index 64d9fae3..7e18e230 100644
--- a/themes/vue.css
+++ b/themes/vue.css
@@ -1,4 +1,4 @@
-s@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600');
+@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600');
 
 * {
   -webkit-box-sizing: border-box;