diff --git a/layout/article-content.ejs b/layout/article-content.ejs
index eeb0e5b4..f3943bf1 100644
--- a/layout/article-content.ejs
+++ b/layout/article-content.ejs
@@ -3,108 +3,121 @@
 
         <div class="article-content-container border-box">
 
-            <div class="article-title">
-                <span class="title-hover-animation"><%= page.title %></span>
-            </div>
+            <% if (page?.cover) { %>
+                <div class="article-content-top border-box">
+                    <div class="cover-article-title text-ellipsis">
+                        <%= page.title %>
+                    </div>
+                    <img class="post-cover" src="<%= page.cover %>" alt="<%= page.title %>">
+                </div>
+            <% } %>
 
-            <% if (theme?.base_info?.author || config?.author) { %>
-                <div class="article-header border-box">
-                    <% if (theme?.style?.avatar) { %>
-                        <div class="avatar-box border-box">
-                            <%- image_tag(theme?.style?.avatar) %>
-                        </div>
-                    <% } %>
-                    <div class="info-box">
-                        <div class="author">
-                            <span class="name"><%= theme?.base_info?.author || config?.author %></span>
-                            <% if (theme?.post?.author_label?.enable === true) { %>
-                                <span class="author-label"><%- getAuthorLabel(site.posts.length, theme?.post?.author_label) %></span>
-                            <% } %>
+            <div class="article-content-bottom border-box<%= page?.cover ? ' has-cover' : '' %>">
+                <% if (!page?.cover) { %>
+                    <div class="article-title">
+                        <span class="title-hover-animation"><%= page.title %></span>
+                    </div>
+                <% } %>
+
+                <% if (theme?.base_info?.author || config?.author) { %>
+                    <div class="article-header border-box">
+                        <% if (theme?.style?.avatar) { %>
+                            <div class="avatar-box border-box">
+                                <%- image_tag(theme?.style?.avatar) %>
+                            </div>
+                        <% } %>
+                        <div class="info-box">
+                            <div class="author">
+                                <span class="name"><%= theme?.base_info?.author || config?.author %></span>
+                                <% if (theme?.post?.author_label?.enable === true) { %>
+                                    <span class="author-label"><%- getAuthorLabel(site.posts.length, theme?.post?.author_label) %></span>
+                                <% } %>
+                            </div>
+                            <div class="meta-info border-box">
+                                <%- partial('_partial/article-meta-info', { post: page, page_type: 'post' }) %>
+                            </div>
                         </div>
+                    </div>
+                <% } else { %>
+                    <div class="article-header-meta-info">
                         <div class="meta-info border-box">
                             <%- partial('_partial/article-meta-info', { post: page, page_type: 'post' }) %>
                         </div>
                     </div>
-                </div>
-            <% } else { %>
-                <div class="article-header-meta-info">
-                    <div class="meta-info border-box">
-                        <%- partial('_partial/article-meta-info', { post: page, page_type: 'post' }) %>
-                    </div>
-                </div>
-            <% } %>
-
-            <div class="article-content keep-markdown-body">
-                <% if (page?.aging === true) { %>
-                    <div class="article-aging-tips"
-                         data-update-date="<%= page.updated %>"
-                         data-aging-days="<%= page?.aging_days %>"
-                    >
-                        <i class="fa-solid fa-circle-exclamation"></i><%- __('article-aging', '<span class="days">0</span>') %>
-                    </div>
                 <% } %>
 
-                <%- page.content %>
-            </div>
+                <div class="article-content keep-markdown-body">
+                    <% if (page?.aging === true) { %>
+                        <div class="article-aging-tips"
+                             data-update-date="<%= page.updated %>"
+                             data-aging-days="<%= page?.aging_days %>"
+                        >
+                            <i class="fa-solid fa-circle-exclamation"></i><%- __('article-aging', '<span class="days">0</span>') %>
+                        </div>
+                    <% } %>
 
-            <% if (
-                    (theme?.post?.copyright_info === true || theme?.copyright_info?.enable === true) && page?.copyright_info !== false
-            ) { %>
-                <div class="post-copyright-info">
-                    <%- partial('_partial/article-copyright-info') %>
+                    <%- page.content %>
                 </div>
-            <% } %>
 
-            <% if (page.tags.length) { %>
-                <ul class="post-tags-box">
-                    <% page.tags.forEach((tag) => { %>
-                        <li class="tag-item">
-                            <a href="<%- url_for(tag.path) %>"><i class="icon fas fa-hashtag"></i><%= tag.name %></a>&nbsp;
-                        </li>
-                    <% }); %>
-                </ul>
-            <% } %>
+                <% if (
+                        (theme?.post?.copyright_info === true || theme?.copyright_info?.enable === true) && page?.copyright_info !== false
+                ) { %>
+                    <div class="post-copyright-info">
+                        <%- partial('_partial/article-copyright-info') %>
+                    </div>
+                <% } %>
 
-            <% if (page.prev || page.next) { %>
-                <div class="article-nav">
-                    <% if (page.prev) { %>
-                        <div class="article-prev">
-                            <a class="prev"
-                               rel="prev"
-                               href="<%= url_for(page.prev.path) %>"
-                            >
+                <% if (page.tags.length) { %>
+                    <ul class="post-tags-box">
+                        <% page.tags.forEach((tag) => { %>
+                            <li class="tag-item">
+                                <a href="<%- url_for(tag.path) %>"><i class="icon fas fa-hashtag"></i><%= tag.name %></a>&nbsp;
+                            </li>
+                        <% }); %>
+                    </ul>
+                <% } %>
+
+                <% if (page.prev || page.next) { %>
+                    <div class="article-nav">
+                        <% if (page.prev) { %>
+                            <div class="article-prev">
+                                <a class="prev"
+                                   rel="prev"
+                                   href="<%= url_for(page.prev.path) %>"
+                                >
                             <span class="left arrow-icon flex-center">
                               <i class="fas fa-chevron-left"></i>
                             </span>
-                                <span class="title flex-center">
+                                    <span class="title flex-center">
                                 <span class="post-nav-title-item text-ellipsis"><%= page.prev.title %></span>
                                 <span class="post-nav-item"><%= __('prev_posts') %></span>
                             </span>
-                            </a>
-                        </div>
-                    <% } %>
-                    <% if (page.next) { %>
-                        <div class="article-next">
-                            <a class="next"
-                               rel="next"
-                               href="<%= url_for(page.next.path) %>"
-                            >
+                                </a>
+                            </div>
+                        <% } %>
+                        <% if (page.next) { %>
+                            <div class="article-next">
+                                <a class="next"
+                                   rel="next"
+                                   href="<%= url_for(page.next.path) %>"
+                                >
                             <span class="title flex-center">
                                 <span class="post-nav-title-item text-ellipsis"><%= page.next.title %></span>
                                 <span class="post-nav-item"><%= __('next_posts') %></span>
                             </span>
-                                <span class="right arrow-icon flex-center">
+                                    <span class="right arrow-icon flex-center">
                               <i class="fas fa-chevron-right"></i>
                             </span>
-                            </a>
-                        </div>
-                    <% } %>
-                </div>
-            <% } %>
+                                </a>
+                            </div>
+                        <% } %>
+                    </div>
+                <% } %>
 
-            <% if (page?.comment !== false) { %>
-                <%- partial('_partial/comment/comment') %>
-            <% } %>
+                <% if (page?.comment !== false) { %>
+                    <%- partial('_partial/comment/comment') %>
+                <% } %>
+            </div>
         </div>
 
         <% if (is_post() && theme?.toc?.enable === true && page?.toc !== false) { %>
diff --git a/layout/home-content.ejs b/layout/home-content.ejs
index a796e375..a92d3b66 100644
--- a/layout/home-content.ejs
+++ b/layout/home-content.ejs
@@ -5,7 +5,7 @@
 
                 <% if (post?.cover) { %>
                     <div class="home-article-item-top border-box"
-                         style="height: <%= post?.cover_height ? post?.cover_height + 'px' : '8rem' %>"
+                         style="height: <%= post?.cover_height ? post?.cover_height + 'px' : '9.2rem' %>"
                     >
                         <% if (post.sticky) { %>
                             <div class="post-sticky-box cover">
diff --git a/source/css/common/variables.styl b/source/css/common/variables.styl
index 2cee055e..cde290eb 100644
--- a/source/css/common/variables.styl
+++ b/source/css/common/variables.styl
@@ -79,8 +79,9 @@ $primary-color-dark-2 = darken($primary-color, 20%)
 // theme light mode color set
 // ==============================================================================================
 $background-color-1 = #fff
-$background-color-2= darken($background-color-1, 3%)
-$background-color-3= darken($background-color-1, 6%)
+$background-color-1-transparent = alpha($background-color-1, 0.6)
+$background-color-2 = darken($background-color-1, 3%)
+$background-color-3 = darken($background-color-1, 6%)
 $content-background-color = #fff
 
 $text-color-3 = #50505c
@@ -125,8 +126,9 @@ $post-h-bottom-border-color = alpha($text-color-3, 0.15)
 // theme dark mode color set
 // ==============================================================================================
 $dark-background-color-1 = #22272e
-$dark-background-color-2= lighten($dark-background-color-1, 4%)
-$dark-background-color-3= lighten($dark-background-color-1, 8%)
+$dark-background-color-1-transparent = alpha($dark-background-color-1, 0.6)
+$dark-background-color-2 = lighten($dark-background-color-1, 4%)
+$dark-background-color-3 = lighten($dark-background-color-1, 8%)
 $dark-content-background-color = darken($dark-background-color-1, 2%)
 
 $dark-text-color-3 = #adbac5
@@ -180,6 +182,7 @@ root-color(mode) {
 
   // background color
   --background-color-1 mode == 'light' ? $background-color-1 : $dark-background-color-1
+  --background-color-1-transparent mode == 'light' ? $background-color-1-transparent : $dark-background-color-1-transparent
   --background-color-2 mode == 'light' ? $background-color-2 : $dark-background-color-2
   --background-color-3 mode == 'light' ? $background-color-3 : $dark-background-color-3
 
diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl
index c150e965..bdeb0639 100644
--- a/source/css/layout/article-content.styl
+++ b/source/css/layout/article-content.styl
@@ -3,6 +3,7 @@ $arrow-icon-width = 1rem
 $post-nav-max-width = 14rem
 $article-title-font-size = 1.6rem
 $toc-container-width = 15rem
+$spacer-padding = 2rem
 
 
 .post-page-container {
@@ -38,9 +39,10 @@ $toc-container-width = 15rem
     order 0
     width 100%
     height 100%
+    overflow hidden
 
 
-    keep-container(1, 2rem, 2rem)
+    keep-container(1, 0, 2rem)
 
     +keep-mobile() {
       padding 1.2rem 0.6rem
@@ -52,6 +54,60 @@ $toc-container-width = 15rem
     }
 
 
+    .article-content-top {
+      display flex
+      align-items flex-end
+      width 100%
+      height 12rem
+      padding $spacer-padding * 0.5
+      overflow hidden
+      background-color var(--background-color-2)
+
+
+      +keep-tablet() {
+        height 10rem
+
+        .cover-article-title {
+          font-size $article-title-font-size * 0.9
+        }
+      }
+
+
+      .cover-article-title {
+        position relative
+        z-index $z-index-1
+        box-sizing border-box
+        max-width 100%
+        padding $spacer-padding * 0.5
+        color var(--text-color-2)
+        font-weight 600
+        font-size $article-title-font-size
+        background var(--background-color-1-transparent)
+        border-radius var(--box-border-radius)
+        backdrop-filter blur(2px)
+      }
+
+
+      .post-cover {
+        position absolute
+        top 0
+        left 0
+        box-sizing border-box
+        width 100%
+        height 100%
+        object-fit cover
+      }
+    }
+
+
+    .article-content-bottom {
+      padding $spacer-padding
+
+      &.has-cover {
+        padding-top $spacer-padding * 0.5
+      }
+    }
+
     .article-title {
       color var(--text-color-2)
       font-weight 600
diff --git a/source/css/layout/home-content.styl b/source/css/layout/home-content.styl
index 7e6768d2..952724f6 100644
--- a/source/css/layout/home-content.styl
+++ b/source/css/layout/home-content.styl
@@ -53,7 +53,7 @@
           height 100%
           object-fit cover
           transform-origin center center
-          transition-t("transform", "0.1", "1", "linear")
+          transition-t("transform", "0", "1", "linear")
 
           &:hover {
             transform scale(1.03)