diff --git a/components/CommonHead.js b/components/CommonHead.js
index aef00a8e..67c4fde0 100644
--- a/components/CommonHead.js
+++ b/components/CommonHead.js
@@ -8,7 +8,7 @@ const CommonHead = ({ meta }) => {
   return <Head>
     <title>{meta.title}</title>
     <meta content={BLOG.darkBackground} name='theme-color' />
-    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
     <meta name='robots' content='follow, index' />
     <meta charSet='UTF-8' />
     {BLOG.seo.googleSiteVerification && (
diff --git a/components/Footer.js b/components/Footer.js
index 8908530f..5d674f50 100644
--- a/components/Footer.js
+++ b/components/Footer.js
@@ -7,9 +7,9 @@ const Footer = ({ fullWidth = true }) => {
     <footer
       className='flex-shrink-0 justify-center text-center m-auto w-full mx-auto text-gray-500 dark:text-gray-400 text-sm text-gray-400 p-6'
     >
-      <span className='fa fa-copyright leading-6'> {` ${y}`} <span>Made with ♥︎ by  <a href='https://www.tangly1024.com/article/about' className='underline'>@tangly1024</a>. Powered by <a href='https://notion.so' className='underline'>Notion</a> & <a href='https://vercel.com' className='underline'>Vercel</a>.</span> </span>
+      <span className='fa fa-copyright leading-6'> {` ${y}`} <span> <a href='https://www.tangly1024.com/article/about' className='underline font-bold'>tangly1024.com</a>. Powered by <a href='https://notion.so' className='underline font-bold'>Notion</a> & <a href='https://vercel.com' className='underline font-bold'>Vercel</a>.</span> </span>
       <br />
-      <span className='fa fa-shield leading-6 mr-2'> <a href='https://beian.miit.gov.cn/' className='ml-1'>闽ICP备20010331号</a></span>
+      <span className='fa fa-shield leading-6 mr-2'> <a href='https://beian.miit.gov.cn/' className='ml-1 font-bold'>闽ICP备20010331号</a></span>
 
       <span id='busuanzi_container_site_pv' className='hidden'>
             <a id='busuanzi_container_site_pv' target='_blank' className='fa  fa-eye' rel='noreferrer'
diff --git a/components/JumpToTop.js b/components/JumpToTop.js
index 95c1aebc..6b939dcd 100644
--- a/components/JumpToTop.js
+++ b/components/JumpToTop.js
@@ -5,10 +5,12 @@ import { useLocale } from '@/lib/locale'
 /**
  * 跳转到网页顶部
  * 当屏幕下滑500像素后会出现该控件
+ * @param targetRef 关联高度的目标html标签
+ * @param showPercent 是否显示百分比
  * @returns {JSX.Element}
  * @constructor
  */
-const JumpToTop = ({ targetRef }) => {
+const JumpToTop = ({ targetRef, showPercent = true }) => {
   const locale = useLocale()
   const [show, switchShow] = useState(false)
   const [percent, changePercent] = useState(0)
@@ -35,9 +37,11 @@ const JumpToTop = ({ targetRef }) => {
       <div
         className='border dark:border-gray-500 dark:bg-gray-600 bg-white cursor-pointer hover:shadow-2xl'
         onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
-        <div className='absolute bg-white dark:text-gray-200 dark:bg-gray-600 z-20 hover:opacity-0 w-11 py-3 text-center'>
+        {showPercent && (
+          <div className='absolute bg-white dark:text-gray-200 dark:bg-gray-600 z-20 hover:opacity-0 w-11 py-3 text-center'>
             {percent}%
-        </div>
+          </div>
+        )}
         <a className='dark:text-gray-200 fa fa-arrow-up p-4 transform hover:scale-150 duration-200'
            title={locale.POST.TOP} />
       </div>
diff --git a/components/TopNav.js b/components/TopNav.js
index 9ae00535..d78ee83c 100644
--- a/components/TopNav.js
+++ b/components/TopNav.js
@@ -14,7 +14,7 @@ const TopNav = ({ tags, currentTag, post }) => {
     <Drawer post={post} currentTag={currentTag} cRef={drawer} />
 
     <div id='sticky-nav'
-         className='transform xl:mt-0 duration-500 bg-white dark:bg-gray-800 border-b dark:border-gray-700'>
+         className='transform 2xl:mt-0 duration-500 bg-white dark:bg-gray-800 border-b dark:border-gray-700'>
       {/* 导航栏 */}
       <div
         className=' text-sm m-auto w-full flex flex-row justify-between items-center px-4 py-2 shadow-md '
diff --git a/layouts/IndexLayout.js b/layouts/IndexLayout.js
new file mode 100644
index 00000000..05c9c4db
--- /dev/null
+++ b/layouts/IndexLayout.js
@@ -0,0 +1,110 @@
+import BlogPost from '@/components/BlogPost'
+import PropTypes from 'prop-types'
+import Pagination from '@/components/Pagination'
+import BLOG from '@/blog.config'
+import { useRouter } from 'next/router'
+import Tags from '@/components/Tags'
+import Footer from '@/components/Footer'
+import React, { useRef } from 'react'
+import Container from '@/components/Container'
+import JumpToTop from '@/components/JumpToTop'
+import SideBar from '@/components/SideBar'
+
+const IndexLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
+  const meta = {
+    title: `${BLOG.title} | 首页`,
+    type: 'website',
+    ...customMeta
+  }
+  page = page ?? 1
+  let postsToShow = []
+  let filteredBlogPosts = posts ?? []
+  let currentSearch = ''
+  if (posts) {
+    const router = useRouter()
+    if (router.query && router.query.s) {
+      currentSearch = router.query.s
+      filteredBlogPosts = posts.filter(post => {
+        const tagContent = post.tags ? post.tags.join(' ') : ''
+        const searchContent = post.title + post.summary + tagContent + post.slug
+        return searchContent.toLowerCase().includes(currentSearch.toLowerCase())
+      })
+    }
+  }
+  const totalPages = Math.ceil(filteredBlogPosts.length / BLOG.postsPerPage)
+
+  if (posts) {
+    postsToShow = filteredBlogPosts.slice(
+      BLOG.postsPerPage * (page - 1),
+      BLOG.postsPerPage * page
+    )
+  }
+  let showNext = false
+  if (filteredBlogPosts) {
+    const totalPosts = filteredBlogPosts.length
+    showNext = page * BLOG.postsPerPage < totalPosts
+  }
+
+  const targetRef = useRef(null)
+
+  return (
+    <Container id='wrapper' meta={meta} tags={tags}>
+
+      <div ref={targetRef} className={`${BLOG.font} flex justify-between bg-gray-100 dark:bg-black min-h-screen`}>
+        {/* 侧边菜单 */}
+        <SideBar />
+        <div className='flex-grow'>
+
+          <div id='tags-bar' className='fixed 2xl:mt-0 top-16 duration-500 z-10 w-full border-b dark:border-gray-600'>
+            <Tags tags={tags} currentTag={currentTag} />
+          </div>
+
+          <main id='post-list-wrapper' className='pt-16 md:pt-28 px-2 md:px-20'>
+            {(!page || page === 1) && (<div className='py-5' />)}
+
+            {/* 当前搜索 */}
+            {(currentSearch || (page && page !== 1)) && (
+              <div className='pb-5'>
+                <div className='dark:text-gray-200 flex justify-between py-1'>
+                  {page && page !== 1 && (<span>页 {page} / {totalPages}</span>)}
+                </div>
+              </div>
+            )}
+
+            <div className=''>
+              {/* 文章列表 */}
+              <div className='grid xl: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>
+                )}
+                {postsToShow.map(post => (
+                  <BlogPost key={post.id} post={post} tags={tags} />
+                ))}
+              </div>
+
+              <Pagination page={page} showNext={showNext} />
+            </div>
+            <div className='w-full border-t '>
+              <Footer/>
+            </div>
+          </main>
+
+        </div>
+      </div>
+
+      {/* 下方菜单组 */}
+      <div
+        className='right-0 space-x-2 fixed flex bottom-24 px-5 py-1 duration-500'>
+        <div className='flex-wrap'>
+          <JumpToTop targetRef={targetRef} showPercent={false}/>
+        </div>
+      </div>
+    </Container>
+  )
+}
+IndexLayout.propTypes = {
+  posts: PropTypes.array.isRequired,
+  tags: PropTypes.object.isRequired,
+  currentTag: PropTypes.string
+}
+export default IndexLayout
diff --git a/layouts/DefaultLayout.js b/layouts/PageLayout.js
similarity index 78%
rename from layouts/DefaultLayout.js
rename to layouts/PageLayout.js
index 60e74e61..4332903e 100644
--- a/layouts/DefaultLayout.js
+++ b/layouts/PageLayout.js
@@ -3,14 +3,13 @@ import PropTypes from 'prop-types'
 import Pagination from '@/components/Pagination'
 import BLOG from '@/blog.config'
 import { useRouter } from 'next/router'
-import { useTheme } from '@/lib/theme'
 import Tags from '@/components/Tags'
-import SideBar from '@/components/SideBar'
 import Footer from '@/components/Footer'
-import React from 'react'
+import React, { useRef } from 'react'
 import Container from '@/components/Container'
+import JumpToTop from '@/components/JumpToTop'
 
-const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
+const IndexLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
   const meta = {
     title: BLOG.title,
     type: 'website',
@@ -44,17 +43,17 @@ const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
     const totalPosts = filteredBlogPosts.length
     showNext = page * BLOG.postsPerPage < totalPosts
   }
+  const targetRef = useRef(null)
 
   return (
     <Container id='wrapper' meta={meta} tags={tags}>
 
-      <div className={`${BLOG.font} flex justify-between bg-gray-100 dark:bg-black min-h-screen`}>
+      <div ref={targetRef} className={`${BLOG.font} flex justify-between bg-gray-100 dark:bg-black min-h-screen`}>
         {/* 侧边菜单 */}
-        <SideBar />
-
+        {/* <SideBar /> */}
         <div className='flex-grow'>
 
-          <div id='tags-bar' className='fixed xl:mt-0 top-16 duration-500 z-10 w-full border-b dark:border-gray-600'>
+          <div id='tags-bar' className='fixed top-16 duration-500 z-10 w-full border-b dark:border-gray-600'>
             <Tags tags={tags} currentTag={currentTag} />
           </div>
 
@@ -91,12 +90,19 @@ const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
         </div>
 
       </div>
+      {/* 下方菜单组 */}
+      <div
+        className='right-0 space-x-2 fixed flex bottom-24 px-5 py-1 duration-500'>
+        <div className='flex-wrap'>
+          <JumpToTop targetRef={targetRef} showPercent={false}/>
+        </div>
+      </div>
     </Container>
   )
 }
-DefaultLayout.propTypes = {
+IndexLayout.propTypes = {
   posts: PropTypes.array.isRequired,
   tags: PropTypes.object.isRequired,
   currentTag: PropTypes.string
 }
-export default DefaultLayout
+export default IndexLayout
diff --git a/pages/index.js b/pages/index.js
index a8784de2..f8545a5a 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,5 +1,5 @@
 import { getAllPosts, getAllTags } from '@/lib/notion'
-import DefaultLayout from '@/layouts/DefaultLayout'
+import IndexLayout from '@/layouts/IndexLayout'
 
 export async function getStaticProps () {
   let posts = await getAllPosts()
@@ -18,10 +18,10 @@ export async function getStaticProps () {
   }
 }
 
-const blog = ({ posts, page, tags }) => {
+const index = ({ posts, page, tags }) => {
   return (
-    <DefaultLayout tags={tags} posts={posts} page={page} />
+    <IndexLayout tags={tags} posts={posts} page={page} />
   )
 }
 
-export default blog
+export default index
diff --git a/pages/page/[page].js b/pages/page/[page].js
index 6436843f..5ea1de98 100644
--- a/pages/page/[page].js
+++ b/pages/page/[page].js
@@ -1,7 +1,7 @@
 import { getAllPosts, getAllTags } from '@/lib/notion'
 import BLOG from '@/blog.config'
-import DefaultLayout from '@/layouts/DefaultLayout'
 import { useRouter } from 'next/router'
+import PageLayout from '@/layouts/PageLayout'
 
 const Page = ({ posts, tags, page }) => {
   let filteredBlogPosts = posts
@@ -16,7 +16,7 @@ const Page = ({ posts, tags, page }) => {
     }
   }
 
-  return <DefaultLayout tags={tags} posts={filteredBlogPosts} page={page} />
+  return <PageLayout tags={tags} posts={filteredBlogPosts} page={page} />
 }
 
 export async function getStaticProps (context) {
diff --git a/pages/tag/[tag].js b/pages/tag/[tag].js
index 7e538091..d5714c94 100644
--- a/pages/tag/[tag].js
+++ b/pages/tag/[tag].js
@@ -1,9 +1,9 @@
 import { getAllPosts, getAllTags } from '@/lib/notion'
-import DefaultLayout from '@/layouts/DefaultLayout'
+import IndexLayout from '@/layouts/IndexLayout'
 import BLOG from '@/blog.config'
 
 export default function Tag ({ tags, posts, currentTag }) {
-  return <DefaultLayout tags={tags} posts={posts} currentTag={currentTag} />
+  return <IndexLayout tags={tags} posts={posts} currentTag={currentTag} />
 }
 
 export async function getStaticProps ({ params }) {
