diff --git a/assets/base.css b/assets/base.css
index bbf9a89..c873957 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -1,5 +1,10 @@
 /* Base css */
 
+li, ul{
+    line-height: 1;
+
+}
+
 :root {
     --block-width: 100%;
     --block-height: 0.6*var(--block-width);
@@ -10,6 +15,12 @@
     --color-light-green: rgba(76, 175, 80, 0.5);
     --color-orange: rgb(255, 152, 0);
     --color-light-orange: rgb(255, 152, 0, 0.5);
+    --color-purple: rgb(152, 0, 152);
+    --color-light-purple: rgb(152, 0, 152, 0.5);
+    --color-cyan: rgb(130, 130, 231);
+    --color-light-cyan: rgb(130, 130, 231, 0.5);
+    --color-red: rgb(215, 72, 49);
+    --color-light-red: rgb(215, 72, 49, 0.7);
 }
 a,a:hover {
     transition: all 0.5s;
@@ -29,6 +40,7 @@ header {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    height: 20px;
 }
 
 .user-profile img {
@@ -63,7 +75,7 @@ main {
 
 main>div {
     background-color: white;
-    border-radius: 10px;
+    border-radius: 20px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     padding: 20px;
 }
diff --git a/home/home.css b/home/home.css
index 8fc4465..cfac2e1 100644
--- a/home/home.css
+++ b/home/home.css
@@ -7,7 +7,6 @@ header {
 .user-profile {
     display: flex;
     align-items: center;
-    margin-bottom: 10px;
 }   
 
 .user-profile span {
@@ -16,18 +15,20 @@ header {
 
 
 .function-buttons {
-    width: var(--block-width);
-    height: var(--block-height);
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
 }
 
 .button {
-    margin: 10px;
-    padding: 100px;
+    margin: 20px 18px;
+    padding: 90px;
     text-decoration: none;
     font-weight: bold;
-    border-radius: 0;
+    display: flexbox;
+    border-radius: 10px;
+    width: 72px;
+    height: 36px;
 }
 .button a{
     color: white;
@@ -52,4 +53,23 @@ header {
     &:hover{
         background-color: var(--color-light-orange);
     }
+}
+
+.purple{
+    background-color: var(--color-purple);
+    &:hover{
+        background-color: var(--color-light-purple);
+    }
+}
+.cyan{
+    background-color: var(--color-cyan);
+    &:hover{
+        background-color: var(--color-light-cyan);
+    }
+}
+.red{
+    background-color: var(--color-red);
+    &:hover{
+        background-color: var(--color-light-red);
+    }
 }
\ No newline at end of file
diff --git a/home/home.html b/home/home.html
index 8a6d46f..f9829c5 100644
--- a/home/home.html
+++ b/home/home.html
@@ -18,6 +18,9 @@
             <a class="button blue" href="../wordrecognize/wordRecognize.html">单词学习</a>
             <a class="button green" href="../wordbook/wordBook.html">错题本和简单词</a>
             <a class="button orange" href="../userdata/userdata.html">用户数据</a>
+            <a class="button purple" href="../article/article.html">文章阅读</a>
+            <a class="button red" href="../login/login.html">登录</a>
+            <a class="button cyan" href="../register/register.html">注册</a>
         </div>
     </main>
 </body>
diff --git a/wordrecognize/wordRecognize.js b/wordrecognize/wordRecognize.js
index 0ad9277..69c523b 100644
--- a/wordrecognize/wordRecognize.js
+++ b/wordrecognize/wordRecognize.js
@@ -152,6 +152,8 @@ window.addEventListener("load", function () {
         .addEventListener("click", function () {
           translationElement.style.display = "inline";
           wordElement.style.display = "inline";
+          spellInput.style.display = "none";
+          submitButton.style.display = "none";
           simpleWordButton.style.display = "none";
         });