diff --git a/themes/heo/components/LatestPostsGroup.js b/themes/heo/components/LatestPostsGroup.js
index 22ac3e42..80f0363f 100644
--- a/themes/heo/components/LatestPostsGroup.js
+++ b/themes/heo/components/LatestPostsGroup.js
@@ -1,8 +1,6 @@
 import BLOG from '@/blog.config'
-import { useGlobal } from '@/lib/global'
 // import Image from 'next/image'
 import Link from 'next/link'
-import { useRouter } from 'next/router'
 
 /**
  * 最新文章列表
@@ -12,61 +10,41 @@ import { useRouter } from 'next/router'
  */
 const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
   // 获取当前路径
-  const currentPath = useRouter().asPath
-  const { locale } = useGlobal()
 
   if (!latestPosts) {
     return <></>
   }
 
-  return <>
-        <div className=" mb-2 px-1 flex flex-nowrap justify-between">
-            <div>
-                <i className="mr-2 fas fas fa-history" />
-                {locale.COMMON.LATEST_POSTS}
-            </div>
-        </div>
+  return <div className='grid grid-cols-2 gap-4'>
         {latestPosts.map(post => {
-          const selected = currentPath === `${BLOG.SUB_PATH}/${post.slug}`
-
           const headerImage = post?.pageCoverThumbnail ? post.pageCoverThumbnail : siteInfo?.pageCover
 
           return (
-            (<Link
-                    key={post.id}
+            (<Link key={post.id} passHref
                     title={post.title}
                     href={`${BLOG.SUB_PATH}/${post.slug}`}
-                    passHref
-                    className={'my-3 flex'}>
 
-                    <div className="w-20 h-14 overflow-hidden relative">
-                          {/* <Image
-                            src={headerImage}
-                            fill
-                            style={{ objectFit: 'cover' }}
-                            placeholder='blur'
-                            blurDataURL='/bg_image.jpg'
-                            quality={10}
-                            alt={post.title} /> */}
-                            {/* eslint-disable-next-line @next/next/no-img-element */}
-                            <img src={`${headerImage}`} className='object-cover w-full h-full'/>
+                    className={'my-3 flex flex-col w-full'}>
+
+                    <div className="w-full h-24 md:h-60 overflow-hidden relative rounded-lg mb-2">
+                        {/* eslint-disable-next-line @next/next/no-img-element */}
+                        <img src={`${headerImage}`} className='object-cover w-full h-full' />
                     </div>
+
                     <div
                         className={
-                            (selected ? ' text-indigo-400 ' : 'dark:text-gray-400 ') +
-                            ' text-sm overflow-x-hidden hover:text-indigo-600 px-2 duration-200 w-full rounded ' +
-                            ' hover:text-indigo-400 cursor-pointer items-center flex'
+                            ' font-bold  overflow-x-hidden hover:text-indigo-600 px-2 duration-200 w-full rounded ' +
+                            ' hover:text-indigo-400 cursor-pointer'
                         }
                     >
-                        <div>
-                            <div className='line-clamp-2 menu-link'>{post.title}</div>
-                            <div className="text-gray-500">{post.lastEditedTime}</div>
-                        </div>
+
+                        <div className='line-clamp-2 menu-link'>{post.title}</div>
+
                     </div>
 
                 </Link>)
           )
         })}
-    </>
+    </div>
 }
 export default LatestPostsGroup
diff --git a/themes/heo/index.js b/themes/heo/index.js
index c9e3152e..795d6ea0 100644
--- a/themes/heo/index.js
+++ b/themes/heo/index.js
@@ -31,6 +31,7 @@ import { Transition } from '@headlessui/react'
 import { Style } from './style'
 import { NoticeBar } from './components/NoticeBar'
 import { HashTag } from '@/components/HeroIcons'
+import LatestPostsGroup from './components/LatestPostsGroup'
 
 /**
  * 基础布局 采用上中下布局，移动端使用顶部侧边导航栏
@@ -128,14 +129,15 @@ const LayoutIndex = (props) => {
 const LayoutPostList = (props) => {
   // 右侧栏
   const slotRight = <SideRight {...props} />
+  const headerSlot = <header>
+        {/* 顶部导航 */}
+        <div id='nav-bar-wrapper' className='h-16'><NavBar {...props} /></div>
+    </header>
 
-  return <LayoutBase {...props} slotRight={slotRight}>
+  return <LayoutBase {...props} slotRight={slotRight} headerSlot={headerSlot}>
         {/* 文章分类条 */}
         <CategoryBar {...props} />
-
-        {BLOG.POST_LIST_STYLE === 'page'
-          ? <BlogPostListPage {...props} />
-          : <BlogPostListScroll {...props} />}
+        {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
     </LayoutBase>
 }
 
@@ -262,33 +264,63 @@ const LayoutSlug = props => {
  * @returns
  */
 const Layout404 = props => {
-  const router = useRouter()
-  useEffect(() => {
-    // 延时3秒如果加载失败就返回首页
-    setTimeout(() => {
-      if (isBrowser()) {
-        const article = document.getElementById('notion-article')
-        if (!article) {
-          router.push('/').then(() => {
-            // console.log('找不到页面', router.asPath)
-          })
-        }
-      }
-    }, 3000)
-  })
+  const { meta, siteInfo } = props
+  const { onLoading } = useGlobal()
   return (
-        <LayoutBase {...props}>
-            <div className="text-black w-full h-screen text-center justify-center content-center items-center flex flex-col">
-                <div className="dark:text-gray-200">
-                    <h2 className="inline-block border-r-2 border-gray-600 mr-2 px-3 py-2 align-top">
-                        404
-                    </h2>
-                    <div className="inline-block text-left h-32 leading-10 items-center">
-                        <h2 className="m-0 p-0">页面未找到</h2>
-                    </div>
+        <div id='theme-heo' className='bg-[#f7f9fe] h-full min-h-screen flex flex-col overflow-hidden'>
+            {/* 网页SEO */}
+            <CommonHead meta={meta} siteInfo={siteInfo} />
+            <Style />
+
+            {/* 顶部嵌入 导航栏，首页放hero，文章页放文章详情 */}
+            <header>
+                {/* 顶部导航 */}
+                <div id='nav-bar-wrapper' className='h-16'><NavBar {...props} /></div>
+            </header>
+
+            {/* 主区块 */}
+            <main id="wrapper-outer" className={'flex-grow max-w-4xl w-screen mx-auto px-5'}>
+
+                <div id="error-wrapper" className={'w-full mx-auto justify-center'} >
+
+                    <Transition
+                        show={!onLoading}
+                        appear={true}
+                        enter="transition ease-in-out duration-700 transform order-first"
+                        enterFrom="opacity-0 translate-y-16"
+                        enterTo="opacity-100 translate-y-0"
+                        leave="transition ease-in-out duration-300 transform"
+                        leaveFrom="opacity-100 translate-y-0"
+                        leaveTo="opacity-0 -translate-y-16"
+                        unmount={false}
+                    >
+
+                        {/* 404卡牌 */}
+                        <div className='error-content flex flex-col md:flex-row w-full mt-12 h-[30rem] md:h-96 justify-center items-center bg-white border rounded-2xl'>
+                            {/* 左侧动图 */}
+                            {/* eslint-disable-next-line @next/next/no-img-element */}
+                            <img className="error-img h-60 md:h-full p-4" src={'https://bu.dusays.com/2023/03/03/6401a7906aa4a.gif'}></img>
+
+                           {/* 右侧文字 */}
+                            <div className='error-info flex-1 flex flex-col justify-center items-center space-y-4'>
+                                <h1 className='error-title font-extrabold md:text-9xl text-7xl'>404</h1>
+                                <div>请尝试站内搜索寻找文章</div>
+                                <Link href='/'>
+                                    <button className='bg-blue-500 p-2 text-white shadow rounded-lg hover:bg-blue-600 hover:shadow-md duration-200 transition-all'>回到主页</button>
+                                </Link>
+                            </div>
+                        </div>
+
+                        {/* 404页面底部显示最新文章 */}
+                        <div className='mt-12'>
+                            <LatestPostsGroup {...props} />
+                        </div>
+
+                    </Transition>
                 </div>
-            </div>
-        </LayoutBase>
+            </main>
+
+        </div>
   )
 }