diff --git a/README.md b/README.md
index 116abe90c..abf04a2d2 100644
--- a/README.md
+++ b/README.md
@@ -70,4 +70,8 @@ Vue.use(naiveUi)
 1. Z-index management on `Select` & `Tooltip` & `Modal`(Low Priority)
 2. Full featured table component(Medium Priority)
 3. Form component(Medium Priority)
-4. Complete unit test for all existing components(High Priority)
+4. FormItem component(High Priority)
+5. Complete unit test for all existing components(High Priority)
+6. Create a Markdown webpack loader to convert documentation(Low Priority)
+7. Refactor documentation page(for code clairity)
+8. Code refactor for some 😢  messy code(which is my bad...)
\ No newline at end of file
diff --git a/demo/components/startPage.vue b/demo/components/startPage.vue
index 8f90d5e3b..801f31b50 100644
--- a/demo/components/startPage.vue
+++ b/demo/components/startPage.vue
@@ -222,6 +222,7 @@ export default {
 .markdown-body a {
   background-color: transparent;
   color: #63e2b7;
+  text-decoration: none;
 }
 
 .markdown-body a:active,
@@ -230,23 +231,26 @@ export default {
 }
 
 .markdown-body strong {
-  font-weight: inherit;
+  font-weight: 600;
   font-weight: bolder;
 }
 
 .markdown-body h1 {
-  font-size: 2em;
   margin: .67em 0;
+  font-size: 32px;
 }
 
 .markdown-body img {
+  background-color: transparent;
+  box-sizing: content-box;
+  max-width: 100%;
   border-style: none;
 }
 
 .markdown-body code,
 .markdown-body kbd,
 .markdown-body pre {
-  font-family: monospace,monospace;
+  font-family: monospace;
   font-size: 1em;
   color: #333;
 }
@@ -255,15 +259,21 @@ export default {
   box-sizing: content-box;
   height: 0;
   overflow: visible;
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid #dfe2e5;
+  margin: 15px 0;
+  background-color: #e1e4e8;
+  padding: 0;
 }
 
 .markdown-body input {
   font: inherit;
   margin: 0;
-}
-
-.markdown-body input {
   overflow: visible;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
 }
 
 .markdown-body [type=checkbox] {
@@ -275,33 +285,10 @@ export default {
   box-sizing: border-box;
 }
 
-.markdown-body input {
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-}
-
-.markdown-body a {
-  text-decoration: none;
-}
-
 .markdown-body a:hover {
   text-decoration: underline;
 }
 
-.markdown-body strong {
-  font-weight: 600;
-}
-
-.markdown-body hr {
-  background: transparent;
-  border: 0;
-  border-bottom: 1px solid #dfe2e5;
-  height: 0;
-  margin: 15px 0;
-  overflow: hidden;
-}
-
 .markdown-body hr:before {
   content: "";
   display: table;
@@ -317,6 +304,9 @@ export default {
   border-collapse: collapse;
   border-spacing: 0;
   color: #333;
+  display: block;
+  overflow: auto;
+  width: 100%;
 }
 
 .markdown-body td,
@@ -334,12 +324,10 @@ export default {
 .markdown-body h4,
 .markdown-body h5,
 .markdown-body h6 {
-  margin-bottom: 0;
-  margin-top: 0;
-}
-
-.markdown-body h1 {
-  font-size: 32px;
+  font-weight: 600;
+  line-height: 1.25;
+  margin-bottom: 16px;
+  margin-top: 24px;
 }
 
 .markdown-body h1,
@@ -383,14 +371,17 @@ export default {
 }
 
 .markdown-body blockquote {
+  border-left: .25em solid #dfe2e5;
+  color: #6a737d;
+  padding: 0 1em;
   margin: 0;
 }
 
 .markdown-body ol,
 .markdown-body ul {
+  padding-left: 2em;
   margin-bottom: 0;
   margin-top: 0;
-  padding-left: 0;
 }
 
 .markdown-body ol ol,
@@ -416,6 +407,7 @@ export default {
 }
 
 .markdown-body pre {
+  word-wrap: normal;
   margin-bottom: 0;
   margin-top: 0;
 }
@@ -554,20 +546,6 @@ export default {
   margin-top: 0;
 }
 
-.markdown-body hr {
-  background-color: #e1e4e8;
-  border: 0;
-  height: .25em;
-  margin: 24px 0;
-  padding: 0;
-}
-
-.markdown-body blockquote {
-  border-left: .25em solid #dfe2e5;
-  color: #6a737d;
-  padding: 0 1em;
-}
-
 .markdown-body blockquote>:first-child {
   margin-top: 0;
 }
@@ -578,66 +556,18 @@ export default {
 
 .markdown-body kbd {
   background-color: #fafbfc;
-  border: 1px solid #c6cbd1;
-  border-bottom-color: #959da5;
+  border: 1px solid #d1d5da;
+  border-bottom-color: #c6cbd1;
   border-radius: 3px;
-  box-shadow: inset 0 -1px 0 #959da5;
+  box-shadow: inset 0 -1px 0 #c6cbd1;
   color: #444d56;
   display: inline-block;
-  font-size: 11px;
+  font: 11px SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
   line-height: 10px;
   padding: 3px 5px;
   vertical-align: middle;
 }
 
-.markdown-body h1,
-.markdown-body h2,
-.markdown-body h3,
-.markdown-body h4,
-.markdown-body h5,
-.markdown-body h6 {
-  font-weight: 600;
-  line-height: 1.25;
-  margin-bottom: 16px;
-  margin-top: 24px;
-}
-
-.markdown-body h1 {
-  font-size: 2em;
-}
-
-.markdown-body h1,
-.markdown-body h2 {
-  border-bottom: 1px solid #eaecef;
-  padding-bottom: .3em;
-}
-
-.markdown-body h2 {
-  font-size: 1.5em;
-}
-
-.markdown-body h3 {
-  font-size: 1.25em;
-}
-
-.markdown-body h4 {
-  font-size: 1em;
-}
-
-.markdown-body h5 {
-  font-size: .875em;
-}
-
-.markdown-body h6 {
-  color: #6a737d;
-  font-size: .85em;
-}
-
-.markdown-body ol,
-.markdown-body ul {
-  padding-left: 2em;
-}
-
 .markdown-body ol ol,
 .markdown-body ol ul,
 .markdown-body ul ol,
@@ -675,12 +605,6 @@ export default {
   padding: 0 16px;
 }
 
-.markdown-body table {
-  display: block;
-  overflow: auto;
-  width: 100%;
-}
-
 .markdown-body table th {
   font-weight: 600;
 }
@@ -700,12 +624,6 @@ export default {
   background-color: #f6f8fa;
 }
 
-.markdown-body img {
-  background-color: #fff;
-  box-sizing: content-box;
-  max-width: 100%;
-}
-
 .markdown-body img[align=right] {
   padding-left: 20px;
 }
@@ -722,10 +640,6 @@ export default {
   padding: .2em .4em;
 }
 
-.markdown-body pre {
-  word-wrap: normal;
-}
-
 .markdown-body pre>code {
   background: transparent;
   border: 0;
@@ -836,20 +750,6 @@ export default {
   cursor: pointer;
 }
 
-.markdown-body kbd {
-  background-color: #fafbfc;
-  border: 1px solid #d1d5da;
-  border-bottom-color: #c6cbd1;
-  border-radius: 3px;
-  box-shadow: inset 0 -1px 0 #c6cbd1;
-  color: #444d56;
-  display: inline-block;
-  font: 11px SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
-  line-height: 10px;
-  padding: 3px 5px;
-  vertical-align: middle;
-}
-
 .markdown-body :checked+.radio-label {
   border-color: #0366d6;
   position: relative;
@@ -929,59 +829,4 @@ export default {
   vertical-align: middle;
 }
 
-.markdown-body hr {
-  border-bottom-color: #eee;
-}
-
-.markdown-body .pl-0 {
-  padding-left: 0!important;
-}
-
-.markdown-body .pl-1 {
-  padding-left: 4px!important;
-}
-
-.markdown-body .pl-2 {
-  padding-left: 8px!important;
-}
-
-.markdown-body .pl-3 {
-  padding-left: 16px!important;
-}
-
-.markdown-body .pl-4 {
-  padding-left: 24px!important;
-}
-
-.markdown-body .pl-5 {
-  padding-left: 32px!important;
-}
-
-.markdown-body .pl-6 {
-  padding-left: 40px!important;
-}
-
-.markdown-body .pl-7 {
-  padding-left: 48px!important;
-}
-
-.markdown-body .pl-8 {
-  padding-left: 64px!important;
-}
-
-.markdown-body .pl-9 {
-  padding-left: 80px!important;
-}
-
-.markdown-body .pl-10 {
-  padding-left: 96px!important;
-}
-
-.markdown-body .pl-11 {
-  padding-left: 112px!important;
-}
-
-.markdown-body .pl-12 {
-  padding-left: 128px!important;
-}
 </style>
diff --git a/demo/readme.js b/demo/readme.js
index 324888eb3..490f0ac10 100644
--- a/demo/readme.js
+++ b/demo/readme.js
@@ -12,7 +12,7 @@ export default `<div class="markdown-body"><h1 id="naiveui">naive-ui</h1>
 <h4 id="javascriptstyle">Javascript Style</h4>
 <p>You <strong>MUST</strong> follow <a href="https://standardjs.com/">Standard JS</a>.</p>
 <h4 id="scssstyle">SCSS Style</h4>
-<p>Run <code>npm run lint-style</code> to echeck styles.</p>
+<p>Run <code>npm run lint-style</code> to check styles.</p>
 <h4 id="checkboth">Check Both</h4>
 <p>Run <code>npm run lint</code>
 You <strong>MUST</strong> fix all lint warnings and errors before you push your branch.</p>
@@ -121,5 +121,9 @@ Vue.use(naiveUi)
 <li>Z-index management on <code>Select</code> &amp; <code>Tooltip</code> &amp; <code>Modal</code>(Low Priority)</li>
 <li>Full featured table component(Medium Priority)</li>
 <li>Form component(Medium Priority)</li>
+<li>FormItem component(High Priority)</li>
 <li>Complete unit test for all existing components(High Priority)</li>
+<li>Create a Markdown webpack loader to convert documentation(Low Priority)</li>
+<li>Refactor documentation page(for code clairity)</li>
+<li>Code refactor for some 😢  messy code(which is my bad…)</li>
 </ol></div>`