diff --git a/components/RightAside.js b/components/RightAside.js
index f32339c8..475630e2 100644
--- a/components/RightAside.js
+++ b/components/RightAside.js
@@ -5,7 +5,7 @@ const RightAside = ({ toc }) => {
   // 无目录就直接返回空
   if (toc.length < 1) return <></>
 
-  return <aside className='bg-gray-700 px-5 hidden lg:block py-5 hover:shadow-2xl duration-200'>
+  return <aside className='bg-gray-800 px-5 hidden lg:block py-5 hover:shadow-2xl duration-200'>
       <div className='sticky top-8 w-60 overflow-x-auto'>
       <Toc toc={toc}/>
       </div>
diff --git a/components/SideBar.js b/components/SideBar.js
index 10a5d743..73c96648 100644
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -2,7 +2,7 @@ import Tags from '@/components/Tags'
 import { useLocale } from '@/lib/locale'
 import Link from 'next/link'
 import BLOG from '@/blog.config'
-import { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import Router, { useRouter } from 'next/router'
 import DarkModeButton from '@/components/DarkModeButton'
 import Footer from '@/components/Footer'
@@ -43,10 +43,10 @@ const SideBar = ({ tags, currentTag }) => {
 
     <div className={(collapse ? '-ml-80 ' : 'shadow-2xl xl:shadow-none') + ' dark:bg-gray-800 bg-white sidebar h-full w-60 md:w-80 duration-500 ease-in-out'}>
 
-      <section className='mx-5 pt-5'>
+      <section className='mx-5 pt-5 pb-2'>
         <Link href='/'>
           <a
-            className='text-3xl hover:shadow-xl bg-white dark:bg-gray-800 dark:text-gray-300 font-semibold hover:bg-gray-800 hover:text-white p-2 duration-200'>{BLOG.title}</a>
+            className='text-3xl hover:shadow-2xl bg-gray-500 text-white dark:bg-gray-900 dark:text-gray-300 font-semibold hover:bg-gray-800 hover:text-white p-2 duration-200'>{BLOG.title}</a>
         </Link>
       </section>
 
@@ -73,7 +73,7 @@ const SideBar = ({ tags, currentTag }) => {
       {/* <hr className='my-5' /> */}
 
       <div className='p-5'>
-        <span className='dark:text-gray-200'>标签</span>
+        <span className='text-xl border-b-2 text-gray-500 dark:text-gray-400'>标签</span>
         <Tags tags={tags} currentTag={currentTag} />
       </div>
 
diff --git a/layouts/DefaultLayout.js b/layouts/DefaultLayout.js
index 77b7cc25..4e668753 100644
--- a/layouts/DefaultLayout.js
+++ b/layouts/DefaultLayout.js
@@ -77,7 +77,7 @@ const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
       {/* <TopNav tags={tags} currentTag={currentTag} /> */}
       {/* <Header navBarTitle={meta.title} fullWidth={true}/> */}
 
-      <div className={`${BLOG.font} flex bg-gray-200 dark:bg-black`}>
+      <div className={`${BLOG.font} flex bg-gray-200 dark:bg-black min-h-screen`}>
         <SideBar tags={tags} currentTag={currentTag} />
 
         <main className='md:pb-10 md:px-24 p-5 flex-grow'>
diff --git a/pages/_document.js b/pages/_document.js
index adf9fbb4..8ca31e5c 100644
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -17,7 +17,7 @@ class MyDocument extends Document {
           <ThirdPartyScript />
         </Head>
 
-        <body>
+        <body className='bg-gray-200 dark:bg-black'>
           <Main />
           <NextScript />
         </body>
