diff --git a/layout/about.ejs b/layout/about.ejs
index 84b4744..573fbe4 100644
--- a/layout/about.ejs
+++ b/layout/about.ejs
@@ -1,10 +1,12 @@
-<div class="about-container fade-in-down-animation">
-    <div class="about-content markdown-body">
-        <%- page.content %>
-    </div>
-    <div class="about-comments">
-        <% if (page.comments) { %>
-            <%- partial('_partial/comments/comment') %>
-        <% } %>
+<div class="fade-in-down-animation">
+    <div class="about-container">
+        <div class="about-content markdown-body">
+            <%- page.content %>
+        </div>
+        <div class="about-comments">
+            <% if (page.comments) { %>
+                <%- partial('_partial/comments/comment') %>
+            <% } %>
+        </div>
     </div>
 </div>
diff --git a/layout/archive-content.ejs b/layout/archive-content.ejs
index 558b855..bd6bf66 100644
--- a/layout/archive-content.ejs
+++ b/layout/archive-content.ejs
@@ -1,3 +1,5 @@
-<div class="archive-container fade-in-down-animation">
-    <%- partial('_partial/archive-list', {posts_new: site.posts}) %>
+<div class="fade-in-down-animation">
+    <div class="archive-container ">
+        <%- partial('_partial/archive-list', {posts_new: site.posts}) %>
+    </div>
 </div>
\ No newline at end of file
diff --git a/layout/article-content.ejs b/layout/article-content.ejs
index 618db3c..9955e09 100644
--- a/layout/article-content.ejs
+++ b/layout/article-content.ejs
@@ -1,41 +1,44 @@
-<div class="article-content-container">
+<div class="fade-in-down-animation">
+    <div class="article-content-container">
 
-    <div class="article-title">
-        <h3><a class="title-hover-animation"><%= page.title %></a></h3>
-    </div>
+        <div class="article-title">
+            <h3><a class="title-hover-animation"><%= page.title %></a></h3>
+        </div>
 
-    <div class="meta-info">
-        <%- partial('_partial/article-meta-info', {articleObject: page, index: true}) %>
-    </div>
+        <div class="meta-info">
+            <%- partial('_partial/article-meta-info', {articleObject: page, index: true}) %>
+        </div>
 
-    <div class="article-content markdown-body">
-        <%- page.content %>
-    </div>
+        <div class="article-content markdown-body">
+            <%- page.content %>
+        </div>
 
-    <div class="article-nav">
-        <% if (page.prev) { %>
-            <div class="article-prev">
-                <a class="prev btn" rel="prev"
-                   href="<%= url_for(page.prev.path) %>"><i class="fa fa-chevron-left"></i> <%= page.prev.title %>
-                </a>
-            </div>
-        <% } %>
-        <% if (page.next) { %>
-            <div class="article-next">
-                <a class="next btn" rel="next"
-                   href="<%= url_for(page.next.path) %>"><%= page.next.title %> <i class="fa fa-chevron-right"></i>
-                </a>
-            </div>
-        <% } %>
-    </div>
+        <div class="article-nav">
+            <% if (page.prev) { %>
+                <div class="article-prev">
+                    <a class="prev btn" rel="prev"
+                       href="<%= url_for(page.prev.path) %>"><i class="fa fa-chevron-left"></i> <%= page.prev.title %>
+                    </a>
+                </div>
+            <% } %>
+            <% if (page.next) { %>
+                <div class="article-next">
+                    <a class="next btn" rel="next"
+                       href="<%= url_for(page.next.path) %>"><%= page.next.title %> <i class="fa fa-chevron-right"></i>
+                    </a>
+                </div>
+            <% } %>
+        </div>
 
-    <div class="comment-container">
-        <%- partial('_partial/comments/comment') %>
+        <div class="comment-container">
+            <%- partial('_partial/comments/comment') %>
+        </div>
     </div>
 </div>
-
 <% if ( (theme.magic.enable && !theme.magic.sidebar.enable && theme.toc.enable) || (!theme.magic.enable && theme.toc.enable)) { %>
     <div class="article-toc-container fade-in-down-animation">
-        <%- partial('_partial/sidebar-toc') %>
+        <div class="article-toc">
+            <%- partial('_partial/sidebar-toc') %>
+        </div>
     </div>
 <% } %>
\ No newline at end of file
diff --git a/layout/category-content.ejs b/layout/category-content.ejs
index 7b9a77c..8fe604f 100644
--- a/layout/category-content.ejs
+++ b/layout/category-content.ejs
@@ -1,6 +1,8 @@
-<div class="category-container fade-in-down-animation">
-    <div class="category-name">
-        <i class="fa fa-folder"></i> <%- __('category') %>：<%= page.category %> [<%= page.posts.length %>]
+<div class="fade-in-down-animation">
+    <div class="category-container">
+        <div class="category-name">
+            <i class="fa fa-folder"></i> <%- __('category') %>：<%= page.category %> [<%= page.posts.length %>]
+        </div>
+        <%- partial('_partial/archive-list', {posts_new: page.posts}) %>
     </div>
-    <%- partial('_partial/archive-list', {posts_new: page.posts}) %>
 </div>
diff --git a/layout/tag-content.ejs b/layout/tag-content.ejs
index 5f091c6..441002f 100644
--- a/layout/tag-content.ejs
+++ b/layout/tag-content.ejs
@@ -1,4 +1,7 @@
-<div class="tag-container fade-in-down-animation">
-    <div class="tag-name"><i class="fa fa-tag"></i> <%- __('tag') %>：<%= page.tag %> [<%= page.posts.length %>]</div>
-    <%- partial('_partial/archive-list', {posts_new: page.posts}) %>
-</div>
+<div class="fade-in-down-animation">
+    <div class="tag-container">
+        <div class="tag-name"><i class="fa fa-tag"></i> <%- __('tag') %>：<%= page.tag %> [<%= page.posts.length %>]
+        </div>
+        <%- partial('_partial/archive-list', {posts_new: page.posts}) %>
+    </div>
+</div>
\ No newline at end of file
diff --git a/source/css/layout/_partial/local-search.styl b/source/css/layout/_partial/local-search.styl
index daa153d..68e655f 100644
--- a/source/css/layout/_partial/local-search.styl
+++ b/source/css/layout/_partial/local-search.styl
@@ -43,7 +43,7 @@ $icon-size = 1.2em;
   }
 
   .search-header {
-    background: var(--border-color);
+    background: var(--fourth-text-color);
     border-top-left-radius: 2px;
     border-top-right-radius: 2px;
     display: flex;
diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl
index 6d9f88d..1ffd6bd 100644
--- a/source/css/layout/article-content.styl
+++ b/source/css/layout/article-content.styl
@@ -58,9 +58,6 @@ if ((hexo-config('magic.enable') && !hexo-config('magic.sidebar.enable') && hexo
   .article-toc-container {
     position: fixed;
     top: $header-height + $component-interspace;
-    background: var(--background-color);
-    max-width: 200px;
-    max-height: 600px;
 
     if (hexo-config('side-tools.position') == left) {
       right: 30px;
@@ -68,14 +65,19 @@ if ((hexo-config('magic.enable') && !hexo-config('magic.sidebar.enable') && hexo
       left: 30px;
     }
 
-    if (hexo-config('magic.enable') == true) {
-      magic-container(1.02, 1.02, 20px);
-    } else {
-      transition();
-      border: 1px solid var(--border-color);
-      padding: 20px;
-    }
+    .article-toc {
+      max-width: 200px;
+      max-height: 600px;
+      background: var(--background-color);
 
+      if (hexo-config('magic.enable') == true) {
+        magic-container(1.02, 1.02, 20px);
+      } else {
+        transition();
+        border: 1px solid var(--border-color);
+        padding: 20px;
+      }
+    }
 
   }