diff --git a/themes/commerce/components/BlogPostListPage.js b/themes/commerce/components/BlogPostListPage.js
index c185265c..3f4583c3 100644
--- a/themes/commerce/components/BlogPostListPage.js
+++ b/themes/commerce/components/BlogPostListPage.js
@@ -20,7 +20,7 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
     return (
       <div id="container" className='w-full'>
         {/* 文章列表 */}
-        <div className="space-y-6 px-2">
+        <div className="py-4 gap-4 grid grid-cols-3">
           {posts?.map(post => (
             <ProductCard index={posts.indexOf(post)} key={post.id} post={post} siteInfo={siteInfo}/>
           ))}
diff --git a/themes/commerce/components/ProductCategories.js b/themes/commerce/components/ProductCategories.js
new file mode 100644
index 00000000..54ec316e
--- /dev/null
+++ b/themes/commerce/components/ProductCategories.js
@@ -0,0 +1,27 @@
+import { siteConfig } from '@/lib/config'
+import Link from 'next/link'
+
+export default function ProductCategories(props) {
+  const { categoryOptions } = props
+
+  return <div className='hidden md:block w-72 mx-2'>
+        {/* 分类菜单  */}
+        <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 (
+                        <Link
+                            key={`${category.name}`}
+                            title={`${category.name}`}
+                            href={`/category/${category.name}`}
+                            className='hover:text-[#D2232A]'
+                            passHref>
+                            {category.name}
+                        </Link>
+                  )
+                })}
+            </nav>
+        </div>
+    </div>
+}
diff --git a/themes/commerce/components/ProductCenter.js b/themes/commerce/components/ProductCenter.js
index 17d10a90..ec82469d 100644
--- a/themes/commerce/components/ProductCenter.js
+++ b/themes/commerce/components/ProductCenter.js
@@ -1,6 +1,6 @@
 import { siteConfig } from '@/lib/config'
-import Link from 'next/link'
 import ProductCard from './ProductCard'
+import ProductCategories from './ProductCategories'
 
 /**
  * 产品中心
@@ -8,7 +8,7 @@ import ProductCard from './ProductCard'
  * @returns
  */
 export default function ProductCenter(props) {
-  const { categoryOptions, allNavPages } = props
+  const { allNavPages } = props
   const posts = allNavPages.slice(0, parseInt(siteConfig('COMMERCE_HOME_POSTS_COUNT', 9)))
 
   return <div className='w-full my-4 mx-4'>
@@ -17,26 +17,7 @@ export default function ProductCenter(props) {
 
         <div className='flex'>
 
-            <div className='hidden md:block w-72 mx-2'>
-                {/* 分类菜单  */}
-                <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 (
-                                <Link
-                                    key={`${category.name}`}
-                                    title={`${category.name}`}
-                                    href={`/category/${category.name}`}
-                                    className='hover:text-[#D2232A]'
-                                    passHref>
-                                    {category.name}
-                                </Link>
-                          )
-                        })}
-                    </nav>
-                </div>
-            </div>
+            <ProductCategories {...props} />
 
             <div className='w-full p-4 mx-2'>
                 {/* 文章列表 */}
diff --git a/themes/commerce/components/SlotBar.js b/themes/commerce/components/SlotBar.js
index fff30e39..c7c1c802 100644
--- a/themes/commerce/components/SlotBar.js
+++ b/themes/commerce/components/SlotBar.js
@@ -9,15 +9,15 @@ export default function SlotBar(props) {
   const { tag, category } = props
 
   if (tag) {
-    return <div className="cursor-pointer px-3 py-2 mb-2 font-light hover:text-red-700 dark:hover:text-red-400 transform dark:text-white">
+    return <div className="cursor-pointer px-3 py-2 mb-4 font-light hover:text-red-700 dark:hover:text-red-400 transform dark:text-white">
               <Link key={tag} href={`/tag/${encodeURIComponent(tag)}`} passHref
                   className={'cursor-pointer inline-block rounded duration-200 mr-2 py-0.5 px-1 text-xl whitespace-nowrap '}>
-                  <div className='font-light dark:text-gray-400 dark:hover:text-white'> #{tag} </div>
+                  <div className='border-b-2 border-[#D2232A] font-light dark:text-gray-400 dark:hover:text-white'> #{tag} </div>
               </Link>
           </div>
   } else if (category) {
-    return <div className="cursor-pointer text-lg px-5 py-1 mb-2 font-light hover:text-red-700 dark:hover:text-red-400 transform dark:text-white">
-              <i className="mr-1 far fa-folder-open" />  {category}
+    return <div className="cursor-pointer text-lg px-5  mb-4 font-light hover:text-red-700 dark:hover:text-red-400 transform dark:text-white">
+             <span className='border-b-2 pb-4 font-bold border-[#D2232A]'>{category}</span>
           </div>
   }
   return <></>
diff --git a/themes/commerce/index.js b/themes/commerce/index.js
index cca45ee3..136b325f 100644
--- a/themes/commerce/index.js
+++ b/themes/commerce/index.js
@@ -30,6 +30,7 @@ import { siteConfig } from '@/lib/config'
 import TopNavBar from './components/TopNavBar'
 import ProductCenter from './components/ProductCenter'
 import LazyImage from '@/components/LazyImage'
+import ProductCategories from './components/ProductCategories'
 
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -139,9 +140,12 @@ const LayoutIndex = (props) => {
  * @returns
  */
 const LayoutPostList = (props) => {
-  return <LayoutBase {...props} className='pt-8'>
-        <SlotBar {...props} />
-        {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
+  const slotRight = <ProductCategories {...props}/>
+  return <LayoutBase {...props} slotRight={slotRight}>
+        <div className='bg-white border-[#D2232A] p-4'>
+            <SlotBar {...props} />
+            {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
+        </div>
     </LayoutBase>
 }
 
@@ -242,7 +246,7 @@ const LayoutSlug = props => {
                         </div>
                     </div>
 
-                    <hr className='border-2 border-[#D2232A]'/>
+                    <hr className='border-2 border-[#D2232A]' />
 
                     <article itemScope itemType="https://schema.org/Movie" className="subpixel-antialiased overflow-y-hidden" >