diff --git a/layout/includes/404.pug b/layout/includes/404.pug
index 1b6b4e2..5d370c0 100644
--- a/layout/includes/404.pug
+++ b/layout/includes/404.pug
@@ -1,7 +1,7 @@
 - var top_img = theme.error_404.background || theme.default_top_img
 - var bg_img = `background-image: url('${url_for(top_img)}')`
 
-#body-wrap.error
+#body-wrap.error404
   div(style='display: none')
     include ./header/index.pug
 
diff --git a/layout/includes/third-party/comments/facebook_comments.pug b/layout/includes/third-party/comments/facebook_comments.pug
index 4075c1e..03cf3cd 100644
--- a/layout/includes/third-party/comments/facebook_comments.pug
+++ b/layout/includes/third-party/comments/facebook_comments.pug
@@ -7,7 +7,7 @@ script.
     if (typeof FB === 'object') FB.XFBML.parse()
     else {
       let ele = document.createElement('script')
-      ele.setAttribute('src','https://connect.facebook.net/!{theme.facebook_comments.lang}/sdk.js#xfbml=1&version=v9.0')
+      ele.setAttribute('src','https://connect.facebook.net/!{theme.facebook_comments.lang}/sdk.js#xfbml=1&version=v10.0')
       ele.setAttribute('async', 'true')
       ele.setAttribute('defer', 'true')
       ele.setAttribute('crossorigin', 'anonymous')
diff --git a/layout/includes/third-party/comments/waline.pug b/layout/includes/third-party/comments/waline.pug
index 0804536..2039587 100644
--- a/layout/includes/third-party/comments/waline.pug
+++ b/layout/includes/third-party/comments/waline.pug
@@ -13,7 +13,7 @@ script.
         emojiCDN: '#{theme.waline.emojiCDN}',
         emojiMaps: !{emojiMaps},
         visitor: #{theme.waline.visitor},
-        dark: '[data-theme="dark"]'
+        dark: 'html[data-theme="dark"]'
       }, !{JSON.stringify(theme.waline.option)}))
     }
 
diff --git a/layout/includes/widget/card_self.pug b/layout/includes/widget/card_bottom_self.pug
similarity index 71%
rename from layout/includes/widget/card_self.pug
rename to layout/includes/widget/card_bottom_self.pug
index a02763f..e32907d 100644
--- a/layout/includes/widget/card_self.pug
+++ b/layout/includes/widget/card_bottom_self.pug
@@ -1,5 +1,5 @@
-if site.data.widget
-  each item in site.data.widget
+if site.data.widget && site.data.widget.bottom
+  each item in site.data.widget.bottom
     .card-widget(class=item.class_name id=item.id_name style=item.order ? `order: ${item.order}` : '')
       .item-headline
         i(class=item.icon)
diff --git a/layout/includes/widget/card_top_self.pug b/layout/includes/widget/card_top_self.pug
new file mode 100644
index 0000000..6e81059
--- /dev/null
+++ b/layout/includes/widget/card_top_self.pug
@@ -0,0 +1,8 @@
+if site.data.widget && site.data.widget.top
+  each item in site.data.widget.top
+    .card-widget(class=item.class_name id=item.id_name)
+      .item-headline
+        i(class=item.icon)
+        span=item.name
+      .item-content
+        !=item.html
\ No newline at end of file
diff --git a/layout/includes/widget/index.pug b/layout/includes/widget/index.pug
index a37b066..f9b9930 100644
--- a/layout/includes/widget/index.pug
+++ b/layout/includes/widget/index.pug
@@ -7,6 +7,7 @@
     else
       !=partial('includes/widget/card_author', {}, {cache: true})
       !=partial('includes/widget/card_announcement', {}, {cache: true})
+      !=partial('includes/widget/card_top_self', {}, {cache: true})      
       .sticky_layout
         if showToc
           include ./card_post_toc.pug
@@ -16,6 +17,8 @@
     //- page
     !=partial('includes/widget/card_author', {}, {cache: true})
     !=partial('includes/widget/card_announcement', {}, {cache: true})
+    !=partial('includes/widget/card_top_self', {}, {cache: true})      
+
     .sticky_layout
       !=partial('includes/widget/card_recent_post', {}, {cache: true})
       !=partial('includes/widget/card_ad', {}, {cache: true})
@@ -24,4 +27,4 @@
       !=partial('includes/widget/card_tags', {}, {cache: true})
       !=partial('includes/widget/card_archives', {}, {cache: true})
       !=partial('includes/widget/card_webinfo', {}, {cache: true})
-      !=partial('includes/widget/card_self', {}, {cache: true})
\ No newline at end of file
+      !=partial('includes/widget/card_bottom_self', {}, {cache: true})
\ No newline at end of file
diff --git a/package.json b/package.json
index 0bbc312..131bfb0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "3.7.7",
+  "version": "3.8.0-b1",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {
diff --git a/source/css/_layout/404.styl b/source/css/_layout/404.styl
deleted file mode 100644
index e9a8610..0000000
--- a/source/css/_layout/404.styl
+++ /dev/null
@@ -1,82 +0,0 @@
-if hexo-config('error_404.enable')
-  #error-wrap
-    position: absolute
-    top: 50%
-    right: 0
-    left: 0
-    margin: 0 auto
-    padding: 0 1rem
-    max-width: 1000px
-    transform: translate(0, -50%)
-
-    .error-content
-      display: flex
-      flex-direction: row
-      justify-content: center
-      align-items: center
-      margin: 0 1rem
-      height: 18rem
-      border-radius: 8px
-      background: var(--card-bg)
-      box-shadow: var(--card-box-shadow)
-      transition: all .3s
-
-      &:hover
-        box-shadow: var(--card-hover-box-shadow)
-
-      +maxWidth768()
-        flex-direction: column
-        margin: 0
-        height: 25rem
-
-      .error-img
-        flex: 1
-        height: 100%
-        border-top-left-radius: 8px
-        border-bottom-left-radius: 8px
-        background-color: $theme-color
-        background-position: center
-        background-size: cover
-
-        +maxWidth768()
-          flex: 1
-          width: 100%
-          border-top-right-radius: 8px
-          border-bottom-left-radius: 0
-
-      .error-info
-        flex: 1
-        padding: .5rem
-        text-align: center
-        font-size: 14px
-
-        if $site-name-font
-          font-family: $site-name-font
-
-        +maxWidth768()
-          flex: 1.1
-          width: 100%
-
-        .error_title
-          margin-top: -4rem
-          font-size: 9em
-
-          +maxWidth768()
-            margin-top: -3rem
-
-        .error_subtitle
-          @extend .limit-more-line
-          margin-top: -3.5rem
-          word-break: break-word
-          font-size: 1.6em
-          -webkit-line-clamp: 2
-
-        a
-          display: inline-block
-          margin-top: .5rem
-          padding: .3rem 1.5rem
-          background: var(--btn-bg)
-          color: var(--btn-color)
-
-          i
-            padding-right: .3rem
diff --git a/source/css/_layout/head.styl b/source/css/_layout/head.styl
index d9cb609..30a9a6f 100644
--- a/source/css/_layout/head.styl
+++ b/source/css/_layout/head.styl
@@ -9,7 +9,7 @@
 
   // index
   &.full_page
-    height: $index_top_img_height
+    min-height: $index_top_img_height
     background-attachment: fixed
 
     #site-info
@@ -70,7 +70,7 @@
 
   // page
   &.not-home-page
-    height: 20rem
+    min-height: 20rem
 
     +maxWidth768()
       height: 14rem
@@ -86,7 +86,7 @@
 
   // post
   &.post-bg
-    height: 20rem
+    min-height: 20rem
 
     +maxWidth768()
       height: 18rem
@@ -118,7 +118,7 @@
 
   &.not-top-img
     margin-bottom: .5rem
-    height: 60px
+    min-height: 60px
     background: 0
 
     #nav
diff --git a/source/css/_page/404.styl b/source/css/_page/404.styl
new file mode 100644
index 0000000..20e6fed
--- /dev/null
+++ b/source/css/_page/404.styl
@@ -0,0 +1,86 @@
+if hexo-config('error_404.enable')
+  .error404
+    #error-wrap
+      position: absolute
+      top: 50%
+      right: 0
+      left: 0
+      margin: 0 auto
+      padding: 0 1rem
+      max-width: 1000px
+      transform: translate(0, -50%)
+
+      .error-content
+        display: flex
+        flex-direction: row
+        justify-content: center
+        align-items: center
+        margin: 0 1rem
+        height: 18rem
+        border-radius: 8px
+        background: var(--card-bg)
+        box-shadow: var(--card-box-shadow)
+        transition: all .3s
+
+        &:hover
+          box-shadow: var(--card-hover-box-shadow)
+
+        +maxWidth768()
+          flex-direction: column
+          margin: 0
+          height: 25rem
+
+        .error-img
+          flex: 1
+          height: 100%
+          border-top-left-radius: 8px
+          border-bottom-left-radius: 8px
+          background-color: $theme-color
+          background-position: center
+          background-size: cover
+
+          +maxWidth768()
+            flex: 1
+            width: 100%
+            border-top-right-radius: 8px
+            border-bottom-left-radius: 0
+
+        .error-info
+          flex: 1
+          padding: .5rem
+          text-align: center
+          font-size: 14px
+
+          if $site-name-font
+            font-family: $site-name-font
+
+          +maxWidth768()
+            flex: 1.1
+            width: 100%
+
+          .error_title
+            margin-top: -4rem
+            font-size: 9em
+
+            +maxWidth768()
+              margin-top: -3rem
+
+          .error_subtitle
+            @extend .limit-more-line
+            margin-top: -3.5rem
+            word-break: break-word
+            font-size: 1.6em
+            -webkit-line-clamp: 2
+
+          a
+            display: inline-block
+            margin-top: .5rem
+            padding: .3rem 1.5rem
+            background: var(--btn-bg)
+            color: var(--btn-color)
+
+            i
+              padding-right: .3rem
+
+    & + #rightside
+      display: none
\ No newline at end of file
diff --git a/source/css/_page/common.styl b/source/css/_page/common.styl
index 4fd0049..4076804 100644
--- a/source/css/_page/common.styl
+++ b/source/css/_page/common.styl
@@ -1,8 +1,15 @@
+#body-wrap
+  display: flex
+  flex-direction: column
+  height: 100vh
+
 .layout
   display: flex
+  flex: 1 auto
   margin: 0 auto
   padding: 2rem 15px
   max-width: 1200px
+  width: 100%
 
   +maxWidth900()
     flex-direction: column
diff --git a/source/css/var.styl b/source/css/var.styl
index 87e1503..6205406 100644
--- a/source/css/var.styl
+++ b/source/css/var.styl
@@ -33,7 +33,7 @@ $font-color = #1F2D3D
 $rem = 20px
 $text-line-height = 2
 $web-bg = hexo-config('background') && unquote(hexo-config('background'))
-$index_top_img_height = hexo-config('index_top_img_height') ? convert(hexo-config('index_top_img_height')) : 100vh
+$index_top_img_height = hexo-config('index_top_img_height') ? convert(hexo-config('index_top_img_height')) : 100%
 $index_site_info_top = hexo-config('index_site_info_top') ? convert(hexo-config('index_site_info_top')) : 43%
 // Global color & SVG
 $light-blue = $theme-color