diff --git a/languages/en.yml b/languages/en.yml
index 6852f22..2591759 100755
--- a/languages/en.yml
+++ b/languages/en.yml
@@ -28,6 +28,7 @@ footer:
   times: times
 search:
   placeholder: Search
+  placeholder_home: ' '
 symbol:
   comma: ", "
   period: ". "
diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml
index 29dd2d8..08b759d 100755
--- a/languages/zh-CN.yml
+++ b/languages/zh-CN.yml
@@ -28,6 +28,7 @@ footer:
   times: 次
 search:
   placeholder: 搜索
+  placeholder_home: 'la víspera de la tormenta'
 symbol:
   comma: "，"
   period: "。"
diff --git a/languages/zh-HK.yml b/languages/zh-HK.yml
index c74c0ee..41babb6 100755
--- a/languages/zh-HK.yml
+++ b/languages/zh-HK.yml
@@ -28,6 +28,7 @@ footer:
   times: 次
 search:
   placeholder: 搜尋
+  placeholder_home: ' '
 symbol:
   comma: "，"
   period: "。"
diff --git a/languages/zh-TW.yml b/languages/zh-TW.yml
index b52e941..2b0ea87 100755
--- a/languages/zh-TW.yml
+++ b/languages/zh-TW.yml
@@ -28,6 +28,7 @@ footer:
   times: 次
 search:
   placeholder: 搜尋
+  placeholder_home: ' '
 symbol:
   comma: "，"
   period: "。"
diff --git a/layout/_partial/footer.ejs b/layout/_partial/footer.ejs
index ea3bdb5..5e0f387 100755
--- a/layout/_partial/footer.ejs
+++ b/layout/_partial/footer.ejs
@@ -19,3 +19,4 @@
   <div><%- __('footer.use') %> <a href="https://xaoxuu.com/wiki/material-x/" target="_blank" class="codename">Material X</a> <%- __('footer.theme') %><% if (theme.services && theme.services.busuanzi == true) { %><%- __('symbol.comma') %><%- __('footer.total_views') %> <span id="busuanzi_value_site_pv"><i class="fas fa-spinner fa-spin fa-fw" aria-hidden="true"></i></span> <%- __('footer.times') %><% } %><%- __('symbol.period') %>
   </div>
 </footer>
+<script>setLoadingBarProgress(80);</script>
diff --git a/layout/archive.ejs b/layout/archive.ejs
index 11826ab..3d50db7 100755
--- a/layout/archive.ejs
+++ b/layout/archive.ejs
@@ -48,6 +48,7 @@
 	<% } %>
 </div>
 <%- partial('_partial/side') %>
+<%- partial('_partial/footer', null, {cache: !config.relative_link}) %>
 
 
 
diff --git a/layout/category.ejs b/layout/category.ejs
index 88c8cb2..1a12e1f 100755
--- a/layout/category.ejs
+++ b/layout/category.ejs
@@ -3,3 +3,4 @@
   <%- partial('_partial/archive') %>
 </div>
 <%- partial('_partial/side') %>
+<%- partial('_partial/footer', null, {cache: !config.relative_link}) %>
diff --git a/layout/index.ejs b/layout/index.ejs
index 88c8cb2..f872e62 100755
--- a/layout/index.ejs
+++ b/layout/index.ejs
@@ -1,5 +1,26 @@
-<%- partial('_partial/header', null, {cache: !config.relative_link, path: path}) %>
-<div class='l_main'>
-  <%- partial('_partial/archive') %>
+<div class='home-cover'>
+  <h1 class='title'>xaoxuu</h1>
+  <br>
+  <% if (theme.search.enable === true) { %>
+    <div class="m_search">
+      <form name="searchform" class="form u-search-form">
+        <input type="text" class="input u-search-input" placeholder="<%- __('search.placeholder_home') %>" />
+        <span class="icon"><i class="fas fa-search fa-fw"></i></span>
+      </form>
+    </div>
+  <% } %>
+  <div class='menu'>
+    <ul class='h-list'>
+      <% if (config.menu) { %>
+        <% (config.menu || []).forEach(function(value){ %>
+          <li>
+            <a id="<%= url_for(value.url).replace(/\/|%/g, "")?url_for(value.url).replace(/\/|%/g, ""):"home" %>"
+             class="nav flat-box" href="<%= url_for(value.url) %>">
+              <i class='<%= value.icon %> fa-fw'></i>&nbsp;<%= __('navbar.'+value.name) == ('navbar.'+value.name) ? value.name : __('navbar.'+value.name) %>
+            </a>
+          </li>
+        <%})%>
+      <% } %>
+    </ul>
+  </div>
 </div>
-<%- partial('_partial/side') %>
diff --git a/layout/layout.ejs b/layout/layout.ejs
index 90dd519..139467a 100755
--- a/layout/layout.ejs
+++ b/layout/layout.ejs
@@ -9,8 +9,6 @@
   </div>
   <a class="s-top fas fa-arrow-up fa-fw" href='javascript:void(0)'></a>
   </div>
-  <%- partial('_partial/footer', null, {cache: !config.relative_link}) %>
-  <script>setLoadingBarProgress(80);</script>
   <%- partial('_partial/scripts') %>
   <script>setLoadingBarProgress(100);</script>
 </body>
diff --git a/layout/links.ejs b/layout/links.ejs
index a3194ec..377f7d2 100755
--- a/layout/links.ejs
+++ b/layout/links.ejs
@@ -50,3 +50,4 @@
 
 </div>
 <%- partial('_partial/side') %>
+<%- partial('_partial/footer', null, {cache: !config.relative_link}) %>
diff --git a/layout/page.ejs b/layout/page.ejs
index 84ef495..ceaf5a2 100755
--- a/layout/page.ejs
+++ b/layout/page.ejs
@@ -3,3 +3,4 @@
   <%- partial('_partial/article', {post: page, index: false}) %>
 </div>
 <%- partial('_partial/side') %>
+<%- partial('_partial/footer', null, {cache: !config.relative_link}) %>
diff --git a/layout/post.ejs b/layout/post.ejs
index 84ef495..ceaf5a2 100755
--- a/layout/post.ejs
+++ b/layout/post.ejs
@@ -3,3 +3,4 @@
   <%- partial('_partial/article', {post: page, index: false}) %>
 </div>
 <%- partial('_partial/side') %>
+<%- partial('_partial/footer', null, {cache: !config.relative_link}) %>
diff --git a/layout/tag.ejs b/layout/tag.ejs
index 88c8cb2..1a12e1f 100755
--- a/layout/tag.ejs
+++ b/layout/tag.ejs
@@ -3,3 +3,4 @@
   <%- partial('_partial/archive') %>
 </div>
 <%- partial('_partial/side') %>
+<%- partial('_partial/footer', null, {cache: !config.relative_link}) %>
diff --git a/source/less/_base.less b/source/less/_base.less
index ad812f7..b2dc595 100755
--- a/source/less/_base.less
+++ b/source/less/_base.less
@@ -43,6 +43,167 @@ body {
   }
 }
 
+.home-cover{
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  // background: white;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+
+  margin-bottom: 2*@gap;
+  align-items: center;
+  align-self: center;
+  align-content: center;
+  padding: @gap;
+  .title{
+    font-size: @fontsize_h1*2;
+    margin-top: 25vh;
+    align-self: center;
+  }
+  .m_search{
+    margin-top: 10vh;
+    position: relative;
+    height: @height_navbar - @gap;
+    width: 1.2*@width_sidebar;
+    @media(max-width: @on_laptop){
+      width: 1.2*@width_sidebar_m;
+    }
+    line-height: @height_navbar - @gap;
+    vertical-align: middle;
+    .form {
+      position: relative;
+      display: block;
+      width: 100%;
+    }
+    .icon,.input{
+      .enable-trans(.1s);
+    }
+    .icon {
+      position: absolute;
+      display:block;
+      height: @height_navbar - @gap;
+      width: @height_navbar - @gap;
+      line-height: @height_navbar - @gap;
+      top: 0;
+      left: @gap/2;
+      font-size: @fontsize_base;
+    }
+    .input {
+      display:block;
+      font-size: @fontsize_base;
+      line-height: @height_navbar - @gap;
+      margin: 0;
+      width: 100%;
+      color: fade(@color_text_in_header, 60%);
+      padding-left: @fontsize_base + @gap - 2px;
+      @media(max-width: @on_phone){
+        padding-left: @fontsize_base + @gap - 2px;
+      }
+      height: @height_navbar - @gap;
+      line-height: @height_navbar - @gap;
+      font-family: @fontfamily_base;
+      border: none;
+      border-radius: @border_radius_searchbar;
+      background: fade(@theme_cardbg, 15%);
+      box-sizing: border-box;
+      -webkit-appearance: none;
+      box-shadow: none;
+      border: 1px dashed transparent;
+      .enable-trans();
+      ~ .icon{
+        color: fade(@color_text_in_header, 60%);
+      }
+      .set-placeholder({color: fade(@color_text_in_header, 60%)});
+      &:hover{
+        border: 1px dashed fade(@color_text_in_header, 60%);
+      }
+      &:focus {
+        ~ .icon{
+          color: @color_text_in_header;
+        }
+        color: @color_text_in_header;
+        border: 1px solid fade(@color_text_in_header, 60%);
+        // .set-placeholder({color: @black});
+      }
+    }
+
+  }
+  background: @theme_cardbg;
+  &, a{
+    color: @theme_main;
+  }
+  box-shadow: @boxshadow_card_normal; // 适合白色导航栏背景
+  .menu{
+    margin-top: 4vh;
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      li {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        padding: 0;
+        height: auto;
+      }
+    }
+    ul > li > a{
+      font-size: @fontsize_small;
+      padding: 0 2px;
+      margin: 0 4px;
+      .enable-trans();
+      color: fade(@color_text_main, 70%);
+      border-bottom: @loading_height solid transparent;
+      &.current{
+        border-bottom: @loading_height solid fade(@theme_main, 80%);
+      }
+      &:hover{
+        color: @theme_main;
+        border-bottom: @loading_height solid @theme_main;
+      }
+      &:active,&.active{
+        color: @theme_main;
+        border-bottom: @loading_height solid @theme_main;
+      }
+    }
+  }
+  .switcher{
+    & > li{
+      a{
+        &:hover {
+          background: fade(@theme_main, 15%);
+        }
+      }
+    }
+  }
+  .m_search {
+    .input {
+      color: fade(@theme_main, 60%);
+      background: @theme_background;
+      ~ .icon{
+        color: fade(@theme_main, 60%);
+      }
+      .set-placeholder({color: fade(@theme_main, 60%)});
+      &:hover{
+        border: 1px dashed fade(@theme_main, 60%);
+      }
+      &:focus {
+        ~ .icon{
+          color: @theme_main;
+        }
+        color: @theme_main;
+        background: fade(@theme_main, 15%);
+        border: 1px solid fade(@theme_main, 60%);
+      }
+    }
+
+  }
+}
+
 
 .z-depth-nav {
   box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.24), 0 3px 6px 0px rgba(0, 0, 0, 0.1);
@@ -197,12 +358,8 @@ img {
     clear: both;
   }
 }
-.container.clearfix{
-  display: flex;
-  @media(max-width: @on_pad) {
-    display: inherit;
-  }
-}
+
+
 .hidden {
   text-indent: -9999px;
   visibility: hidden;
diff --git a/source/less/_header.less b/source/less/_header.less
index 8d72f04..0a9cf89 100755
--- a/source/less/_header.less
+++ b/source/less/_header.less
@@ -31,7 +31,12 @@
     height: @height_navbar;
   }
   background: @color_bg_navbar;
-
+  &.hide{
+    transform: translateY(100px) scale(0);
+  }
+  &.show{
+    transform: translateY(0) scale(1);
+  }
   &, a{
     .txt-ellipsis;
     height: @height_navbar;