diff --git a/blog.config.js b/blog.config.js
index 330a8aed..132f810d 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -13,7 +13,7 @@ const BLOG = {
   darkBackground: '#111827', // use hex value, don't forget '#'
   path: '', // leave this empty unless you want to deploy in a folder
   since: 2020, // if leave this empty, current year will be used.
-  postsPerPage: 6, // post counts per page
+  postsPerPage: 8, // post counts per page
   sortByDate: false,
   showAbout: true, // WIP
   showArchive: true, // WIP
diff --git a/components/SideBar.js b/components/SideBar.js
index 67dae1ff..fd641d46 100644
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -5,19 +5,23 @@ import TagList from '@/components/TagList'
 
 const SideBar = ({ tags, currentTag, post }) => {
   return <aside className='z-10 dark:border-gray-500 border-gray-200 bg-white hidden md:block'>
-    <div className='dark:bg-gray-800 border-r dark:border-gray-700 h-full scroll-hidden left-0 duration-500 ease-in-out min-h-screen'>
+    <div
+      className='dark:bg-gray-800 border-r dark:border-gray-700 h-full scroll-hidden left-0 duration-500 ease-in-out min-h-screen'>
       <div id='sidebar' className='hidden md:block sticky top-20 duration-500'>
-        <InfoCard/>
-        <hr className='dark:border-gray-700'/>
+        <div className='hidden xl:block'>
+          <InfoCard />
+          <hr className='dark:border-gray-700' />
+        </div>
         <div className={post ? 'hidden xl:block' : 'block'}>
-          <MenuButtonGroup allowCollapse={true}/>
+          <MenuButtonGroup allowCollapse={true} />
         </div>
 
         {tags && (
           <div>
             {/* 标签云  */}
-            <hr className='dark:border-gray-700'/>
-            <section className='py-3 px-5 text-gray-600 dark:text-gray-400 dark:hover:bg-black duration-100 flex flex-nowrap align-middle'>
+            <hr className='dark:border-gray-700' />
+            <section
+              className='py-3 px-5 text-gray-600 dark:text-gray-400 dark:hover:bg-black duration-100 flex flex-nowrap align-middle'>
               <div className='my-auto w-5 text-xl justify-center flex'>
                 <i className='fa fa-tags' />
               </div>
diff --git a/layouts/IndexLayout.js b/layouts/IndexLayout.js
index 595b1a6c..56043739 100644
--- a/layouts/IndexLayout.js
+++ b/layouts/IndexLayout.js
@@ -71,7 +71,7 @@ const IndexLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
 
             <div className=''>
               {/* 文章列表 */}
-              <div className='grid xl:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-3'>
+              <div className='grid 2xl:grid-cols-4 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-3'>
                 {!postsToShow.length && (
                   <p className='text-gray-500 dark:text-gray-300'>No posts found.</p>
                 )}