diff --git a/themes/commerce/components/BlogPostCard.js b/themes/commerce/components/BlogPostCard.js
deleted file mode 100644
index f1febbdd..00000000
--- a/themes/commerce/components/BlogPostCard.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import Link from 'next/link'
-import React from 'react'
-import CONFIG from '../config'
-import { BlogPostCardInfo } from './BlogPostCardInfo'
-import BLOG from '@/blog.config'
-import LazyImage from '@/components/LazyImage'
-// import Image from 'next/image'
-
-const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
-  const showPreview = CONFIG.POST_LIST_PREVIEW && post.blockMap
-  if (post && !post.pageCoverThumbnail && CONFIG.POST_LIST_COVER_DEFAULT) {
-    post.pageCoverThumbnail = siteInfo?.pageCover
-  }
-  const showPageCover = CONFIG.POST_LIST_COVER && post?.pageCoverThumbnail && !showPreview
-  //   const delay = (index % 2) * 200
-
-  return (
-
-        <div className={`${CONFIG.POST_LIST_COVER_HOVER_ENLARGE ? ' hover:scale-110 transition-all duration-150' : ''}`} >
-            <div key={post.id}
-                data-aos="fade-up"
-                data-aos-easing="ease-in-out"
-                data-aos-duration="800"
-                data-aos-once="false"
-                data-aos-anchor-placement="top-bottom"
-                id='blog-post-card'
-                className={`group md:h-56 w-full flex justify-between md:flex-row flex-col-reverse ${CONFIG.POST_LIST_IMG_CROSSOVER && index % 2 === 1 ? 'md:flex-row-reverse' : ''}
-                    overflow-hidden border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray`}>
-
-                {/* 文字内容 */}
-                <BlogPostCardInfo index={index} post={post} showPageCover={showPageCover} showPreview={showPreview} showSummary={showSummary} />
-
-                {/* 图片封面 */}
-                {showPageCover && (
-                    <div className="md:w-5/12 overflow-hidden">
-                        <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
-                        <LazyImage priority={index === 1} src={post?.pageCoverThumbnail} className='h-56 w-full object-cover object-center group-hover:scale-110 duration-500' />
-                        </Link>
-                    </div>
-                )}
-
-            </div>
-
-        </div>
-
-  )
-}
-
-export default BlogPostCard
diff --git a/themes/commerce/components/BlogPostListPage.js b/themes/commerce/components/BlogPostListPage.js
index 92008f83..c185265c 100644
--- a/themes/commerce/components/BlogPostListPage.js
+++ b/themes/commerce/components/BlogPostListPage.js
@@ -1,4 +1,4 @@
-import BlogPostCard from './BlogPostCard'
+import ProductCard from './ProductCard'
 import PaginationNumber from './PaginationNumber'
 import BLOG from '@/blog.config'
 import BlogPostListEmpty from './BlogPostListEmpty'
@@ -22,7 +22,7 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
         {/* 文章列表 */}
         <div className="space-y-6 px-2">
           {posts?.map(post => (
-            <BlogPostCard index={posts.indexOf(post)} key={post.id} post={post} siteInfo={siteInfo}/>
+            <ProductCard index={posts.indexOf(post)} key={post.id} post={post} siteInfo={siteInfo}/>
           ))}
         </div>
         {showPagination && <PaginationNumber page={page} totalPage={totalPage} />}
diff --git a/themes/commerce/components/BlogPostListScroll.js b/themes/commerce/components/BlogPostListScroll.js
index 7646b056..3f0729e9 100644
--- a/themes/commerce/components/BlogPostListScroll.js
+++ b/themes/commerce/components/BlogPostListScroll.js
@@ -1,5 +1,5 @@
 import BLOG from '@/blog.config'
-import BlogPostCard from './BlogPostCard'
+import ProductCard from './ProductCard'
 import BlogPostListEmpty from './BlogPostListEmpty'
 import { useGlobal } from '@/lib/global'
 import React from 'react'
@@ -59,7 +59,7 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG.PO
       {/* 文章列表 */}
       <div className="space-y-6 px-2">
         {postsToShow.map(post => (
-          <BlogPostCard key={post.id} post={post} showSummary={showSummary} siteInfo={siteInfo}/>
+          <ProductCard key={post.id} post={post} showSummary={showSummary} siteInfo={siteInfo}/>
         ))}
       </div>
 
diff --git a/themes/commerce/components/Footer.js b/themes/commerce/components/Footer.js
index d6034985..54689135 100644
--- a/themes/commerce/components/Footer.js
+++ b/themes/commerce/components/Footer.js
@@ -14,7 +14,7 @@ const Footer = (props) => {
   const copyrightDate = parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
   const { categoryOptions, customMenu } = props
 
-  return <footer id="footer-wrapper" className='relative  bg-[#2A2A2A] justify-center m-auto w-full leading-6 text-gray-300 text-sm p-10'>
+  return <footer id="footer-wrapper" className='relative bg-[#2A2A2A] justify-center w-full leading-6 text-gray-300 text-sm p-10'>
 
         <div id='footer-container' className='w-full mx-auto max-w-screen-xl'>
 
@@ -23,7 +23,7 @@ const Footer = (props) => {
 
                     {/* 分类菜单  */}
                     <div>
-                        <div className='font-bold mb-4 text-white'>{siteConfig('COMMERCE_TEXT_MENU_GROUP', 'Product Center')}</div>
+                        <div className='font-bold mb-4 text-white'>{siteConfig('COMMERCE_TEXT_FOOTER_MENU_1', 'Product Center')}</div>
                         <nav id='home-nav-button' className={'flex flex-col space-y-2 text-start'}>
                             {categoryOptions.map(category => {
                               return (
@@ -41,7 +41,7 @@ const Footer = (props) => {
 
                     {/* 系统菜单  */}
                     <div>
-                        <div className='font-bold mb-4 text-white'>{siteConfig('COMMERCE_TEXT_MENU_TITLE', 'About US')}</div>
+                        <div className='font-bold mb-4 text-white'>{siteConfig('COMMERCE_TEXT_FOOTER_MENU_2', 'About US')}</div>
                         <nav id='home-nav-button' className={'flex flex-col space-y-2 text-start'}>
                             {customMenu.map(menu => {
                               return (
@@ -59,9 +59,9 @@ const Footer = (props) => {
 
                 </div>
 
-                {siteConfig('COMMERCE_TEXT_SHOP_LINKS') && <div className='border-l pl-4 border-gray-600 my-6 whitespace-pre-line text-left max-w-md'>
-                    <div className='font-bold text-white'>{siteConfig('COMMERCE_TEXT_SHOP_TITLE')}</div>
-                    <div>{siteConfig('COMMERCE_TEXT_SHOP_LINKS')}</div>
+                {siteConfig('COMMERCE_TEXT_FOOTER_LINKS') && <div className='md:border-l pl-4 border-gray-600 my-6 whitespace-pre-line text-left max-w-md'>
+                    <div className='font-bold text-white'>{siteConfig('COMMERCE_TEXT_FOOTER_TITLE', 'Contact US')}</div>
+                    <div>{siteConfig('COMMERCE_TEXT_FOOTER_LINKS')}</div>
                 </div>}
             </div>
 
diff --git a/themes/commerce/components/PostHeader.js b/themes/commerce/components/PostHeader.js
index acafaf0f..be727a94 100644
--- a/themes/commerce/components/PostHeader.js
+++ b/themes/commerce/components/PostHeader.js
@@ -1,14 +1,8 @@
 import Link from 'next/link'
-import TagItemMini from './TagItemMini'
-import { useGlobal } from '@/lib/global'
-import BLOG from '@/blog.config'
 import NotionIcon from '@/components/NotionIcon'
 import LazyImage from '@/components/LazyImage'
-import { formatDateFmt } from '@/lib/formatDate'
 
 export default function PostHeader({ post, siteInfo }) {
-  const { locale } = useGlobal()
-
   if (!post) {
     return <></>
   }
@@ -37,41 +31,6 @@ export default function PostHeader({ post, siteInfo }) {
             <NotionIcon icon={post.pageIcon} className='text-4xl mx-1' />{post.title}
           </div>
 
-          <section className="flex-wrap shadow-text-md flex text-sm justify-center mt-4 text-white dark:text-gray-400 font-light leading-8">
-
-            <div className='flex justify-center dark:text-gray-200 text-opacity-70'>
-              {post?.type !== 'Page' && (
-                <>
-                  <Link
-                    href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}
-                    passHref
-                    className="pl-1 mr-2 cursor-pointer hover:underline">
-
-                    {locale.COMMON.POST_TIME}: {post?.publishDay}
-
-                  </Link>
-                </>
-              )}
-              <div className="pl-1 mr-2">
-                {locale.COMMON.LAST_EDITED_TIME}: {post.lastEditedDay}
-              </div>
-            </div>
-
-            {JSON.parse(BLOG.ANALYTICS_BUSUANZI_ENABLE) && <div className="busuanzi_container_page_pv font-light mr-2">
-              <span className="mr-2 busuanzi_value_page_pv" />
-              {locale.COMMON.VIEWS}
-            </div>}
-          </section>
-
-            <div className='mt-4 mb-1'>
-                {post.tagItems && (
-                    <div className="flex justify-center flex-nowrap overflow-x-auto">
-                        {post.tagItems.map(tag => (
-                            <TagItemMini key={tag.name} tag={tag} />
-                        ))}
-                    </div>
-                )}
-            </div>
         </div>
       </header>
     </div>
diff --git a/themes/commerce/components/ProductCard.js b/themes/commerce/components/ProductCard.js
new file mode 100644
index 00000000..62bfd4b4
--- /dev/null
+++ b/themes/commerce/components/ProductCard.js
@@ -0,0 +1,38 @@
+import Link from 'next/link'
+import React from 'react'
+import CONFIG from '../config'
+import BLOG from '@/blog.config'
+import LazyImage from '@/components/LazyImage'
+// import Image from 'next/image'
+
+/**
+ * 商品卡
+ */
+const ProductCard = ({ index, post, siteInfo }) => {
+  if (post && !post.pageCoverThumbnail && CONFIG.POST_LIST_COVER_DEFAULT) {
+    post.pageCoverThumbnail = siteInfo?.pageCover
+  }
+
+  return (
+
+        <div className={`${CONFIG.POST_LIST_COVER_HOVER_ENLARGE ? ' hover:scale-110 transition-all duration-150' : ''}`} >
+
+            <div key={post.id} className={'group flex flex-col space-y-2 justify-between  border dark:border-black bg-white dark:bg-hexo-black-gray'}>
+
+                {/* 图片封面 */}
+                <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
+                    <div className="overflow-hidden m-2">
+                        <LazyImage priority={index === 1} src={post?.pageCoverThumbnail} className='h-auto aspect-square w-full object-cover object-center group-hover:scale-110 duration-500' />
+                    </div>
+                </Link>
+
+                <div className='text-center'>{post.title}</div>
+
+            </div>
+
+        </div>
+
+  )
+}
+
+export default ProductCard
diff --git a/themes/commerce/components/ProductCenter.js b/themes/commerce/components/ProductCenter.js
index f9a3d204..17d10a90 100644
--- a/themes/commerce/components/ProductCenter.js
+++ b/themes/commerce/components/ProductCenter.js
@@ -1,5 +1,6 @@
 import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
+import ProductCard from './ProductCard'
 
 /**
  * 产品中心
@@ -7,17 +8,19 @@ import Link from 'next/link'
  * @returns
  */
 export default function ProductCenter(props) {
-  const { categoryOptions } = props
+  const { categoryOptions, allNavPages } = props
+  const posts = allNavPages.slice(0, parseInt(siteConfig('COMMERCE_HOME_POSTS_COUNT', 9)))
 
   return <div className='w-full my-4 mx-4'>
-        <div className='w-full text-center text-4xl font-bold'>{siteConfig('TEXT_HOME_PRODUCT_CENTER', 'Product Center')}</div>
+        <div className='w-full text-center text-4xl font-bold'>{siteConfig('COMMERCE_TEXT_CENTER_TITLE', 'Product Center')}</div>
+        {siteConfig('COMMERCE_TEXT_CENTER_DESCRIPTION') && <div className='w-full text-center text-lg my-3 text-gray-500'>{siteConfig('COMMERCE_TEXT_CENTER_DESCRIPTION')}</div>}
 
         <div className='flex'>
 
-            <div className='hidden md:block w-72 bg-white p-4 mx-2'>
+            <div className='hidden md:block w-72 mx-2'>
                 {/* 分类菜单  */}
-                <div>
-                    <div className='font-bold mb-4 border-b-2 p-2 border-[#D2232A]'>{siteConfig('COMMERCE_TEXT_MENU_GROUP', 'Product Center')}</div>
+                <div className='bg-white  p-4'>
+                    <div className='font-bold text-lg mb-4 border-b-2 py-2 border-[#D2232A]'>{siteConfig('COMMERCE_TEXT_MENU_GROUP', 'Product Categories')}</div>
                     <nav id='home-nav-button' className={'flex flex-col space-y-2 text-start'}>
                         {categoryOptions.map(category => {
                           return (
@@ -35,7 +38,15 @@ export default function ProductCenter(props) {
                 </div>
             </div>
 
-            <div className='w-full border'>右侧产品列表</div>
+            <div className='w-full p-4 mx-2'>
+                {/* 文章列表 */}
+                <div className="grid md:grid-cols-3 grid-cols-2 gap-5">
+                    {posts?.map(post => (
+                        <ProductCard index={posts.indexOf(post)} key={post.id} post={post} />
+                    ))}
+                </div>
+
+            </div>
         </div>
     </div>
 }
diff --git a/themes/commerce/components/RightFloatArea.js b/themes/commerce/components/RightFloatArea.js
index 06fef20e..0d5015a1 100644
--- a/themes/commerce/components/RightFloatArea.js
+++ b/themes/commerce/components/RightFloatArea.js
@@ -1,6 +1,5 @@
 import throttle from 'lodash.throttle'
 import { useCallback, useEffect, useState } from 'react'
-import FloatDarkModeButton from './FloatDarkModeButton'
 import JumpToTopButton from './JumpToTopButton'
 
 /**
@@ -31,9 +30,9 @@ export default function RightFloatArea({ floatSlot }) {
   }, [])
 
   return (
-        <div className={(showFloatButton ? 'opacity-100 ' : 'invisible opacity-0') + '  duration-300 transition-all bottom-12 right-1 fixed justify-end z-20  text-white bg-red-500 dark:bg-hexo-black-gray rounded-sm'}>
+        <div className={(showFloatButton ? 'opacity-100 ' : 'invisible opacity-0') + '  duration-300 transition-all bottom-24 right-1 fixed justify-end z-20  text-white bg-red-500 dark:bg-hexo-black-gray'}>
                 <div className={'justify-center  flex flex-col items-center cursor-pointer'}>
-                    <FloatDarkModeButton />
+                    {/* <FloatDarkModeButton /> */}
                     {floatSlot}
                     <JumpToTopButton />
                 </div>
diff --git a/themes/commerce/index.js b/themes/commerce/index.js
index 9141ea0b..cca45ee3 100644
--- a/themes/commerce/index.js
+++ b/themes/commerce/index.js
@@ -19,12 +19,7 @@ import PostHeader from './components/PostHeader'
 import JumpToCommentButton from './components/JumpToCommentButton'
 import TocDrawer from './components/TocDrawer'
 import TocDrawerButton from './components/TocDrawerButton'
-import Comment from '@/components/Comment'
 import NotionPage from '@/components/NotionPage'
-import ArticleAdjacent from './components/ArticleAdjacent'
-import ArticleCopyright from './components/ArticleCopyright'
-import ArticleRecommend from './components/ArticleRecommend'
-import ShareBar from '@/components/ShareBar'
 import TagItemMini from './components/TagItemMini'
 import Link from 'next/link'
 import SlotBar from './components/SlotBar'
@@ -34,6 +29,7 @@ import replaceSearchResult from '@/components/Mark'
 import { siteConfig } from '@/lib/config'
 import TopNavBar from './components/TopNavBar'
 import ProductCenter from './components/ProductCenter'
+import LazyImage from '@/components/LazyImage'
 
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -51,7 +47,7 @@ const LayoutBase = props => {
   })
 
   return (
-        <div id='theme-commerce'>
+        <div id='theme-commerce' className='flex flex-col min-h-screen justify-between'>
             {/* 网页SEO */}
             <CommonHead meta={meta} />
             <Style />
@@ -124,7 +120,7 @@ const LayoutIndex = (props) => {
   return <LayoutBase headerSlot={headerSlot} {...props}>
 
         {/* 产品中心 */}
-        <ProductCenter {...props}/>
+        <ProductCenter {...props} />
 
         {/* 企业介绍  + 联系 */}
         {notice && <div className='w-full my-4 mx-4'>
@@ -213,6 +209,7 @@ const LayoutSlug = props => {
   const drawerRight = useRef(null)
 
   const targetRef = isBrowser ? document.getElementById('article-wrapper') : null
+  const headerImage = post?.pageCover ? post.pageCover : siteConfig('HOME_BANNER_IMAGE')
 
   const floatSlot = <>
         {post?.toc?.length > 1 && <div className="block lg:hidden">
@@ -227,33 +224,35 @@ const LayoutSlug = props => {
 
   return (
         <LayoutBase {...props} headerSlot={<PostHeader {...props} />} showCategory={false} showTag={false} floatSlot={floatSlot} >
-            <div className="w-full lg:hover:shadow lg:border rounded-t-xl lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black article">
+            <div className="w-full max-w-screen-xl mx-auto lg:hover:shadow lg:border lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black article">
                 {lock && <ArticleLock validPassword={validPassword} />}
 
                 {!lock && <div id="article-wrapper" className="overflow-x-auto flex-grow mx-auto md:w-full md:px-5 ">
 
+                    {/* 预览区块 */}
+                    <div className='flex md:flex-row flex-col w-full justify-between py-4' >
+
+                        <div id='left-img' className='w-1/2 flex justify-center items-center border'>
+                            <LazyImage src={headerImage} className='m-auto w-full h-auto aspect-square object-cover object-center' />
+                        </div>
+
+                        <div id='info-right' className='w-1/2 p-4'>
+                            <div>{post?.title}</div>
+                            <div>{post?.summary}</div>
+                        </div>
+                    </div>
+
+                    <hr className='border-2 border-[#D2232A]'/>
+
                     <article itemScope itemType="https://schema.org/Movie" className="subpixel-antialiased overflow-y-hidden" >
+
                         {/* Notion文章主体 */}
                         <section className='px-5 justify-center mx-auto max-w-2xl lg:max-w-full'>
                             {post && <NotionPage post={post} />}
                         </section>
 
-                        {/* 分享 */}
-                        <ShareBar post={post} />
-                        {post?.type === 'Post' && <>
-                            <ArticleCopyright {...props} />
-                            <ArticleRecommend {...props} />
-                            <ArticleAdjacent {...props} />
-                        </>}
-
                     </article>
 
-                    <div className='pt-4 border-dashed'></div>
-
-                    {/* 评论互动 */}
-                    <div className="duration-200 overflow-x-auto bg-white dark:bg-hexo-black-gray px-3">
-                        <Comment frontMatter={post} />
-                    </div>
                 </div>}
             </div>