diff --git a/themes/typography/components/BlogArchiveItem.js b/themes/typography/components/BlogArchiveItem.js
index c4be6c66..4f849906 100644
--- a/themes/typography/components/BlogArchiveItem.js
+++ b/themes/typography/components/BlogArchiveItem.js
@@ -8,21 +8,21 @@ import Link from 'next/link'
 export default function BlogArchiveItem({ archiveTitle, archivePosts }) {
   return (
     <div key={archiveTitle} className='pb-16'>
-      <div id={archiveTitle} className='pb-2 text-3xl dark:text-gray-300'>
+      <div id={archiveTitle} className='text-[#111827] opacity-30 pb-2 text-3xl dark:text-gray-300'>
         {archiveTitle}
       </div>
 
       <ul>
-        {archivePosts[archiveTitle].map(post => {
+        {archivePosts.map(post => {
           return (
             <li
               key={post.id}
-              className='p-1 pl-0 text-xs md:text-base items-center '>
+              className='p-1 pl-0 text-base items-center mb-3'>
               <div id={post?.publishDay} className='flex justify-between'>
                 <Link
                   href={post?.href}
                   passHref
-                  className='dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600'>
+                  className='dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden cursor-pointer text-[#111827] font-bold'>
                   {post.title}
                 </Link>
                 <span className='text-gray-400'>{post.date?.start_date}</span>
diff --git a/themes/typography/index.js b/themes/typography/index.js
index 8dce7ccc..5e648964 100644
--- a/themes/typography/index.js
+++ b/themes/typography/index.js
@@ -95,9 +95,7 @@ const LayoutBase = props => {
                   <div className='animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-gray-900 dark:border-white'></div>
                 </div>
               ) : (
-                <>
-                  {children}
-                </>
+                <>{children}</>
               )}
               <AdSlot type='native' />
               {/* 移动端页脚 - 显示在底部 */}
@@ -170,25 +168,48 @@ const LayoutSearch = props => {
     }
   }, [])
 
-
   return <LayoutPostList {...props} />
 }
 
+ function groupArticlesByYearArray(articles) {
+  const grouped = {};
+
+  for (const article of articles) {
+    const year = new Date(article.publishDate).getFullYear().toString();
+    if (!grouped[year]) {
+      grouped[year] = [];
+    }
+    grouped[year].push(article);
+  }
+
+  for (const year in grouped) {
+    grouped[year].sort((a, b) => b.publishDate - a.publishDate);
+  }
+
+  // 转成数组并按年份倒序
+  return Object.entries(grouped)
+    .sort(([a], [b]) => b - a)
+    .map(([year, posts]) => ({ year, posts }));
+}
+
+
+
 /**
  * 归档页
  * @param {*} props
  * @returns
  */
 const LayoutArchive = props => {
-  const { archivePosts } = props
+  const { posts } = props
+  const sortPosts = groupArticlesByYearArray(posts)
   return (
     <>
       <div className='mb-10 pb-20 md:pb-12 p-5  min-h-screen w-full'>
-        {Object.keys(archivePosts).map(archiveTitle => (
+        {sortPosts.map(p => (
           <BlogArchiveItem
-            key={archiveTitle}
-            archiveTitle={archiveTitle}
-            archivePosts={archivePosts}
+            key={p.year}
+            archiveTitle={p.year}
+            archivePosts={p.posts}
           />
         ))}
       </div>