diff --git a/blog.config.js b/blog.config.js
index d250381b..b1b45541 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -4,7 +4,8 @@ const BLOG = {
   email: 'tlyong1992@hotmail.com',
   link: 'https://tangly1024.com',
   description: '分享编程技术与记录生活',
-  headerStrings: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页文字
+  headerStrings: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '唐风集里，收卷波澜'], // Index words
+  bannerImage: 'http://bing.creepersan.com/api/v1/img-current', // Index Banner Image
   lang: 'zh-CN', // ['zh-CN','en-US'] default lang => see /lib/lang.js for more.
   notionPageId: process.env.NOTION_PAGE_ID || 'bee1fccfa3bd47a1a7be83cc71372d83', // Important page_id！！！
   notionAccessToken: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public
diff --git a/components/Header.js b/components/Header.js
index 668d20b8..2f1873f8 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -93,7 +93,7 @@ export default function Header () {
       style={{
         height: 'calc(100vh + 1px)',
         backgroundImage:
-          'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0,0,0,0.4), rgba(0, 0, 0, 0.5) ),url("./bg_image.jpg")'
+          `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0,0,0,0.4), rgba(0, 0, 0, 0.5) ),url('${BLOG.bannerImage}')`
       }}
     >
       <div className="absolute z-10 flex h-full items-center -mt-14 justify-center w-full text-4xl md:text-7xl text-white">
diff --git a/components/InfoCard.js b/components/InfoCard.js
index 9afc803f..27e03a23 100644
--- a/components/InfoCard.js
+++ b/components/InfoCard.js
@@ -5,7 +5,7 @@ import React from 'react'
 
 const InfoCard = ({ postCount }) => {
   return <>
-    <div className='flex flex-col items-center justify-center cursor-pointer' onClick={ () => { Router.push('/') }}>
+    <div className='flex flex-col items-center justify-center cursor-pointer py-6' onClick={ () => { Router.push('/') }}>
         <div className='hover:rotate-45 hover:scale-125 transform duration-200'>
           <Image
           alt={BLOG.title}
@@ -13,7 +13,7 @@ const InfoCard = ({ postCount }) => {
           height={120}
           loading='lazy'
           src='/avatar.jpg'
-          className='rounded-full border-black'
+          className='rounded-full'
         />
         </div>
         <div className='text-3xl font-serif dark:text-white py-2 hover:scale-105 transform duration-200'>{BLOG.title}</div>
diff --git a/components/LatestPostsGroup.js b/components/LatestPostsGroup.js
index a754553c..3b7d5b31 100644
--- a/components/LatestPostsGroup.js
+++ b/components/LatestPostsGroup.js
@@ -33,8 +33,8 @@ const LatestPostsGroup = ({ posts, sliceCount = 5 }) => {
         return (
           <Link key={post.id} title={post.title} href={`${BLOG.path}/article/${post.slug}`} passHref>
             <a className={ 'my-1 px-2 flex font-light'}>
-              <div className={ (selected ? 'text-white  bg-gray-600 ' : 'text-gray-500 dark:text-gray-400 ') + 'text-xs py-1.5 flex overflow-x-hidden whitespace-nowrap hover:bg-gray-500 px-3 w-full ' +
-                'hover:text-white dark:hover:text-white cursor-pointer truncate' }>
+              <div className={ (selected ? 'text-white  bg-gray-600 ' : 'text-gray-500 dark:text-gray-400 ') + ' text-xs py-1.5 flex overflow-x-hidden whitespace-nowrap hover:bg-gray-500 px-3 w-full ' +
+                'hover:text-white dark:hover:text-white cursor-pointer' }>
                 <FontAwesomeIcon icon={faFileAlt} className='mr-2'/>
                 {post.title}
               </div>
diff --git a/components/SideAreaLeft.js b/components/SideAreaLeft.js
index 0e402c89..9c388745 100644
--- a/components/SideAreaLeft.js
+++ b/components/SideAreaLeft.js
@@ -25,7 +25,7 @@ const SideAreaLeft = ({ title, tags, currentTag, post, posts, categories, curren
   return <>
 
     <div className={(!post ? 'sticky top-8 ' : ' ') + ' w-60'}>
-      <section className='hidden lg:block mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200 py-6'>
+      <section className='hidden lg:block mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
         <InfoCard postCount={postCount} />
       </section>
 
@@ -58,7 +58,7 @@ const SideAreaLeft = ({ title, tags, currentTag, post, posts, categories, curren
 
     {showToc && (
       <section className='sticky top-8 pb-20  bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
-        <div className='border-b text-center text-2xl bg-white text-black dark:border-gray-700 dark:bg-gray-700 dark:text-white py-6 px-6'>
+        <div className='border-b text-center text-2xl bg-white text-black dark:border-gray-700 dark:bg-gray-700 dark:text-gray-300 py-6 px-6'>
           {locale.COMMON.TABLE_OF_CONTENTS}
         </div>
         <Toc toc={post.toc} targetRef={targetRef} />
diff --git a/components/SideAreaRight.js b/components/SideAreaRight.js
index 1bdbf3fb..d10fcaf0 100644
--- a/components/SideAreaRight.js
+++ b/components/SideAreaRight.js
@@ -78,7 +78,7 @@ const SideAreaRight = ({
         {categories && (
           <section className=' py-4 mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
             <div className='text-sm px-5 mb-2 flex flex-nowrap justify-between font-light'>
-              <div className='pb-1 text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-2' />{locale.COMMON.CATEGORY}</div>
+              <div className='pb-1 text-gray-600 dark:text-gray-300'><FontAwesomeIcon icon={faThList} className='mr-2' />{locale.COMMON.CATEGORY}</div>
               <Link href='/category' passHref>
                 <a className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
                   {locale.COMMON.MORE} <FontAwesomeIcon icon={faAngleDoubleRight} />
@@ -93,7 +93,7 @@ const SideAreaRight = ({
         {posts && (
           <section className=" py-4 mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200">
             <div className="text-sm pb-2 px-5  flex flex-nowrap justify-between">
-              <div className="font-light text-gray-600  dark:text-gray-200">
+              <div className="font-light text-gray-600  dark:text-gray-300">
                 <FontAwesomeIcon icon={faArchive} className="mr-2" />
                 {locale.COMMON.LATEST_POSTS}
                 <span className='text-red-500 text-xs ml-1'>NEW</span>
diff --git a/pages/_document.js b/pages/_document.js
index b9d762a3..9fe7f67b 100644
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -18,7 +18,7 @@ class MyDocument extends Document {
           <ThirdPartyScript />
         </Head>
 
-        <body className='bg-gray-100 dark:bg-gray-900 duration-200'>
+        <body className='bg-gray-200 dark:bg-black duration-200'>
           <Main />
           <NextScript />
         </body>