diff --git a/app/assets/stylesheets/aboutme_welcome.scss b/app/assets/stylesheets/aboutme_welcome.scss
index 17d9c96..b9e07f5 100644
--- a/app/assets/stylesheets/aboutme_welcome.scss
+++ b/app/assets/stylesheets/aboutme_welcome.scss
@@ -36,6 +36,10 @@
     left: 0;
   }
 
+  .responsive-button {
+    padding: 0.7rem 1rem;
+  }
+
   a {
     word-wrap: break-word;
   }
@@ -47,45 +51,45 @@
       }
     }
   }
-    .top-bar-wrapper {
-      background: 0 0;
-      transition: background .5s ease-in-out,padding .5s ease-in-out;
-      &.active {
-        background: #000;
-        border-bottom: 1px solid #666;
-
-        .top-bar {
-          margin: 0.5rem 0;
-        }
-      }
+  .top-bar-wrapper {
+    background: 0 0;
+    transition: background .5s ease-in-out,padding .5s ease-in-out;
+    &.active {
+      background: #000;
+      border-bottom: 1px solid #666;
 
       .top-bar {
-        background: 0 0;
-        margin: 1.5rem 0;
-        .name {
-          font-size: 1.325rem;
-        }
-      }
-
-      .top-bar ul{
-        & {
-          background: 0 0;
-        }
-        li, li a {
-          background: 0 0;
-          font-size: 1rem;
-          color: #fefefe;
-        }
-
-        li a:hover {
-          background: #666;
-        }
-
-        li a.active {
-          background: #4C4C4C;
-        }
+        margin: 0.5rem 0;
       }
     }
+
+    .top-bar {
+      background: 0 0;
+      margin: 1.5rem 0;
+      .name {
+        font-size: 1.325rem;
+      }
+    }
+
+    .top-bar ul{
+      & {
+        background: 0 0;
+      }
+      li, li a {
+        background: 0 0;
+        font-size: 1rem;
+        color: #fefefe;
+      }
+
+      li a:hover {
+        background: #666;
+      }
+
+      li a.active {
+        background: #4C4C4C;
+      }
+    }
+  }
   //}
 
   p {
diff --git a/app/views/home/index.en.html.slim b/app/views/home/index.en.html.slim
index bf317a8..35052b7 100644
--- a/app/views/home/index.en.html.slim
+++ b/app/views/home/index.en.html.slim
@@ -3,13 +3,17 @@
 - content_for(:main) do
   .about-page
     .top-bar-wrapper.contain-to-grid.fixed
-      .row
-        .small-12.columns
-          nav#about-top-bar.top-bar
-            .top-bar-left
-              ul.menu
-                li
-                  a.name href='/' Back to WinDy Blog
+      nav#about-top-bar.top-bar
+        .top-bar-left
+          ul.menu
+            li
+              a.name href='/' Back to WinDy Blog
+        .top-bar-right
+          ul.menu
+            li
+              .responsive-button data-responsive-toggle="responsive-menu" data-hide-for="medium"
+                button class="menu-icon" type="button" data-toggle=''
+        #responsive-menu
             .top-bar-right
               ul.menu
                 li
diff --git a/app/views/home/index.html.slim b/app/views/home/index.html.slim
index 62200ec..19ebc64 100644
--- a/app/views/home/index.html.slim
+++ b/app/views/home/index.html.slim
@@ -11,13 +11,19 @@
         .top-bar-right
           ul.menu
             li
-              a href='#about' 关于
-            li
-              a href='#skill' 技能
-            li
-              a href='#work' 作品
-            li
-              a href='#contact' 联系
+              .responsive-button data-responsive-toggle="responsive-menu" data-hide-for="medium"
+                button class="menu-icon" type="button" data-toggle=''
+        #responsive-menu
+          .top-bar-right
+            ul.menu
+              li
+                a href='#about' 关于
+              li
+                a href='#skill' 技能
+              li
+                a href='#work' 作品
+              li
+                a href='#contact' 联系
     #intro
     header.intro
       .intro-heading