diff --git a/components/BlogPost.js b/components/BlogPost.js
index c94e3376..dfd1a74a 100644
--- a/components/BlogPost.js
+++ b/components/BlogPost.js
@@ -4,7 +4,7 @@ import Link from 'next/link'
 
 const BlogPost = ({ post }) => {
   return (
-    <div key={post.id} className='z-10 animate__animated animate__slideInUp animate__faster inline-block border dark:border-gray-600 my-2 w-full md:max-w-md bg-white bg-opacity-80 dark:bg-gray-700 dark:hover:bg-gray-600 overflow-hidden'>
+    <div key={post.id} className='animate__animated animate__slideInUp animate__faster inline-block border dark:border-gray-600 my-2 w-full md:max-w-md bg-white bg-opacity-80 dark:bg-gray-700 dark:hover:bg-gray-600 overflow-hidden'>
         {/*  封面图 */}
         {post.page_cover && post.page_cover.length > 1 && (
           <Link href={`${BLOG.path}/article/${post.slug}`} className='md:flex-shrink-0 md:w-52 md:h-52 rounded-lg'>
diff --git a/components/SideBar.js b/components/SideBar.js
index b0dbf9ca..b82ed45e 100644
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -4,7 +4,7 @@ import InfoCard from '@/components/InfoCard'
 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 lg:block'>
+  return <aside className='z-10 dark:border-gray-500 border-gray-200 bg-white hidden xl: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 id='sidebar' className='hidden md:block sticky top-20 duration-500'>
diff --git a/pages/article/[slug].js b/pages/article/[slug].js
index 5d17cb18..4dcaf9dc 100644
--- a/pages/article/[slug].js
+++ b/pages/article/[slug].js
@@ -35,7 +35,7 @@ const BlogPost = ({ post, blockMap, tags, prev, next }) => {
     {/* 阅读进度条 */}
     <Progress targetRef={targetRef} />
 
-    <div id='article-wrapper' ref={targetRef} className='flex-grow bg-white bg-opacity-90'>
+    <div id='article-wrapper' ref={targetRef} className='flex-grow bg-white bg-opacity-90 dark:bg-black'>
       {/* 中央区域 wrapper */}
       <header
         className='hover:shadow-2xl duration-200 mx-auto max-w-5xl mt-16 lg:mt-20 md:flex-shrink-0 animate__fadeIn animate__animated'>
@@ -144,7 +144,7 @@ const BlogPost = ({ post, blockMap, tags, prev, next }) => {
     {/* 右侧目录 */}
     <aside className='dark:bg-gray-800 bg-white z-10'>
       <section
-        className='h-full xl:static xl:block hidden top-0 right-0 fixed h-full w-52  duration-500'>
+        className='h-full 2xl:static 2xl:block hidden top-0 right-0 fixed h-full w-52  duration-500'>
         <div id='right-toc' className='sticky top-16 duration-500'>
           <div
             className='border-t dark:border-gray-600 border-b text-2xl bg-white font-bold text-black dark:bg-gray-900 dark:text-white py-6 px-6'>