diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index db09b7c9c3b..d2ed50b3f56 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -1893,6 +1893,10 @@ select {
   height:0.75rem
 }
 
+.h-32 {
+  height:8rem
+}
+
 .h-36 {
   height:9rem
 }
@@ -1958,10 +1962,6 @@ select {
   height:100vh
 }
 
-.h-32 {
-  height:8rem
-}
-
 .max-h-3 {
   max-height:0.75rem
 }
@@ -2014,6 +2014,10 @@ select {
   width:0.75rem
 }
 
+.w-32 {
+  width:8rem
+}
+
 .w-36 {
   width:9rem
 }
@@ -2092,16 +2096,12 @@ select {
   width:100vw
 }
 
-.w-32 {
-  width:8rem
-}
-
 .min-w-0 {
   min-width:0px
 }
 
-.min-w-24 {
-  min-width:6rem
+.min-w-32 {
+  min-width:8rem
 }
 
 .min-w-\[1\.8rem\] {
@@ -2128,10 +2128,6 @@ select {
   min-width:100%
 }
 
-.min-w-32 {
-  min-width:8rem
-}
-
 .max-w-3xl {
   max-width:48rem
 }
@@ -2704,21 +2700,6 @@ select {
   background-color:transparent
 }
 
-.bg-neutral-50 {
-  --tw-bg-opacity:1;
-  background-color:rgba(var(--color-neutral-50), var(--tw-bg-opacity))
-}
-
-.bg-primary-50 {
-  --tw-bg-opacity:1;
-  background-color:rgba(var(--color-primary-50), var(--tw-bg-opacity))
-}
-
-.bg-primary-900 {
-  --tw-bg-opacity:1;
-  background-color:rgba(var(--color-primary-900), var(--tw-bg-opacity))
-}
-
 .bg-gradient-to-b {
   background-image:linear-gradient(to bottom, var(--tw-gradient-stops))
 }
@@ -2747,24 +2728,6 @@ select {
   --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
 }
 
-.from-primary-700 {
-  --tw-gradient-from:rgba(var(--color-primary-700), 1) var(--tw-gradient-from-position);
-  --tw-gradient-to:rgba(var(--color-primary-700), 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
-}
-
-.from-primary-800 {
-  --tw-gradient-from:rgba(var(--color-primary-800), 1) var(--tw-gradient-from-position);
-  --tw-gradient-to:rgba(var(--color-primary-800), 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
-}
-
-.from-primary-400 {
-  --tw-gradient-from:rgba(var(--color-primary-400), 1) var(--tw-gradient-from-position);
-  --tw-gradient-to:rgba(var(--color-primary-400), 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
-}
-
 .from-60\% {
   --tw-gradient-from-position:60%
 }
@@ -2777,6 +2740,10 @@ select {
   --tw-gradient-to:rgba(var(--color-neutral-100), 1) var(--tw-gradient-to-position)
 }
 
+.to-primary-200 {
+  --tw-gradient-to:rgba(var(--color-primary-200), 1) var(--tw-gradient-to-position)
+}
+
 .to-secondary-600 {
   --tw-gradient-to:rgba(var(--color-secondary-600), 1) var(--tw-gradient-to-position)
 }
@@ -2785,26 +2752,6 @@ select {
   --tw-gradient-to:transparent var(--tw-gradient-to-position)
 }
 
-.to-primary-600 {
-  --tw-gradient-to:rgba(var(--color-primary-600), 1) var(--tw-gradient-to-position)
-}
-
-.to-primary-300 {
-  --tw-gradient-to:rgba(var(--color-primary-300), 1) var(--tw-gradient-to-position)
-}
-
-.to-primary-800 {
-  --tw-gradient-to:rgba(var(--color-primary-800), 1) var(--tw-gradient-to-position)
-}
-
-.to-primary-700 {
-  --tw-gradient-to:rgba(var(--color-primary-700), 1) var(--tw-gradient-to-position)
-}
-
-.to-primary-200 {
-  --tw-gradient-to:rgba(var(--color-primary-200), 1) var(--tw-gradient-to-position)
-}
-
 .bg-clip-padding {
   background-clip:padding-box
 }
@@ -5426,6 +5373,11 @@ pre {
   color:rgba(var(--color-neutral-100), var(--tw-text-opacity))
 }
 
+.hover\:text-neutral-300:hover {
+  --tw-text-opacity:1;
+  color:rgba(var(--color-neutral-300), var(--tw-text-opacity))
+}
+
 .hover\:text-primary-400:hover {
   --tw-text-opacity:1;
   color:rgba(var(--color-primary-400), var(--tw-text-opacity))
@@ -5446,16 +5398,6 @@ pre {
   color:rgba(var(--color-primary-700), var(--tw-text-opacity))
 }
 
-.hover\:text-neutral-200:hover {
-  --tw-text-opacity:1;
-  color:rgba(var(--color-neutral-200), var(--tw-text-opacity))
-}
-
-.hover\:text-neutral-300:hover {
-  --tw-text-opacity:1;
-  color:rgba(var(--color-neutral-300), var(--tw-text-opacity))
-}
-
 .hover\:underline:hover {
   text-decoration-line:underline
 }
@@ -5703,11 +5645,6 @@ pre {
   background-color:rgba(var(--color-primary-900), var(--tw-bg-opacity))
 }
 
-.dark\:bg-neutral-900:is(.dark *) {
-  --tw-bg-opacity:1;
-  background-color:rgba(var(--color-neutral-900), var(--tw-bg-opacity))
-}
-
 .dark\:from-neutral-800:is(.dark *) {
   --tw-gradient-from:rgba(var(--color-neutral-800), 1) var(--tw-gradient-from-position);
   --tw-gradient-to:rgba(var(--color-neutral-800), 0) var(--tw-gradient-to-position);
@@ -5720,42 +5657,18 @@ pre {
   --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
 }
 
-.dark\:from-primary-400:is(.dark *) {
-  --tw-gradient-from:rgba(var(--color-primary-400), 1) var(--tw-gradient-from-position);
-  --tw-gradient-to:rgba(var(--color-primary-400), 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
-}
-
-.dark\:from-primary-500:is(.dark *) {
-  --tw-gradient-from:rgba(var(--color-primary-500), 1) var(--tw-gradient-from-position);
-  --tw-gradient-to:rgba(var(--color-primary-500), 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
-}
-
 .dark\:to-neutral-800:is(.dark *) {
   --tw-gradient-to:rgba(var(--color-neutral-800), 1) var(--tw-gradient-to-position)
 }
 
-.dark\:to-secondary-800:is(.dark *) {
-  --tw-gradient-to:rgba(var(--color-secondary-800), 1) var(--tw-gradient-to-position)
-}
-
-.dark\:to-primary-600:is(.dark *) {
-  --tw-gradient-to:rgba(var(--color-primary-600), 1) var(--tw-gradient-to-position)
-}
-
-.dark\:to-primary-300:is(.dark *) {
-  --tw-gradient-to:rgba(var(--color-primary-300), 1) var(--tw-gradient-to-position)
-}
-
-.dark\:to-primary-700:is(.dark *) {
-  --tw-gradient-to:rgba(var(--color-primary-700), 1) var(--tw-gradient-to-position)
-}
-
 .dark\:to-primary-800:is(.dark *) {
   --tw-gradient-to:rgba(var(--color-primary-800), 1) var(--tw-gradient-to-position)
 }
 
+.dark\:to-secondary-800:is(.dark *) {
+  --tw-gradient-to:rgba(var(--color-secondary-800), 1) var(--tw-gradient-to-position)
+}
+
 .dark\:text-neutral:is(.dark *) {
   --tw-text-opacity:1;
   color:rgba(var(--color-neutral), var(--tw-text-opacity))
diff --git a/layouts/partials/home/custom.html b/layouts/partials/home/custom.html
index 0954c6c08e3..315458d1fc2 100644
--- a/layouts/partials/home/custom.html
+++ b/layouts/partials/home/custom.html
@@ -4,7 +4,7 @@
 
 <style>#content_progress{display:none;}</style>
 
-<article class="max-w-full prose dark:prose-invert">
+<section class="max-w-full prose dark:prose-invert">
 		<div class="relative">
 				<div class="absolute inset-x-0 bottom-0 h-1/2 bg-gray-100"></div>
 				<div class="mx-auto max-w-7xl p-0">
@@ -773,7 +773,7 @@ <h2 class="mt-0 mb-0 text-xl text-neutral-800 dark:text-neutral-300">
 
 																if (articleDataList.length > 0) {
 																		const titles = articleDataList.map(data => data.title);
-																		const title = titles.map(t => `《${t}》`).join('<br />');
+																		const title = titles.map(t => `“${t}”`).join('<br />');
 
 																		let count = 0;
 																		let post = articleDataList.length;
@@ -813,45 +813,35 @@ <h2 class="mt-0 mb-0 text-xl text-neutral-800 dark:text-neutral-300">
 
 										</script>
 
-										<section class="prose dark:prose-invert">{{ .Content }}</section>
-
 								</div>
 						</div>
 				</div>
 		</div>
-</article>
+</section>
+
 <section>
-		{{ $recentArticles := 5 }}
-		{{ $showMoreLinkDest := "/posts" }}
-		{{ if .Site.Params.homepage.showRecent | default false }}
-		{{ if index .Site.Params.homepage "showRecentItems" }}
-		{{ $recentArticles = .Site.Params.homepage.showRecentItems }}
-		{{ end }}
+
 		<h2 class="mt-8 text-2xl font-extrabold mb-10">{{ i18n "shortcode.recent_articles" }}</h2>
 
-		{{ if and .Site.Params.homepage.cardView (not .Site.Params.homepage.cardViewScreenWidth) | default false }}
-		{{ partial "recent-articles/cardview.html" . }}
-		{{ else if and .Site.Params.homepage.cardView .Site.Params.homepage.cardViewScreenWidth | default false }}
-		{{ partial "recent-articles/cardview-fullwidth.html" . }}
-		{{ else }}
-		{{ partial "recent-articles/list.html" . }}
-		{{ end }}
-
-		{{ if .Site.Params.homepage.showMoreLink | default false }}
-		{{ if index .Site.Params.homepage "showRecentItems" }}
-		{{ $showMoreLinkDest = .Site.Params.homepage.showMoreLinkDest }}
-		{{ end }}
+		<section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
+			{{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
+			{{ $paginatedPages := .Paginate $pages }}
+			{{ $filteredPages := after 0 $paginatedPages.Pages }}
+			{{ range first 9 $filteredPages }}
+				{{ partial "article-link/card.html" . }}
+			{{ end }}
+		</section>
+
 		<div class="mt-10 flex justify-center">
-		<a href="{{ $showMoreLinkDest }}">
-				<button
-				class="bg-transparent hover:text-primary-500 prose dark:prose-invert font-semibold hover:text-white py-2 px-4 border border-primary-500 hover:border-transparent rounded">
+		<a href="/blog">
+				<button class="bg-transparent hover:text-primary-500 prose dark:prose-invert font-semibold hover:text-white py-2 px-4 border border-primary-500 hover:border-transparent rounded" type="button">
 				{{ i18n "recent.show_more" | markdownify }}
 				</button>
 		</a>
 		</div>
-		{{ end }}
-		{{ end }}
+
 </section>
+
 {{ if .Site.Params.homepage.layoutBackgroundBlur | default false }}
 <div id="background-blur" class="fixed opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl"></div>