diff --git a/README.md b/README.md
index 68d6b33..6206682 100644
--- a/README.md
+++ b/README.md
@@ -39,6 +39,12 @@ The most beautiful minimalist blog in modern built with Nextjs and tailwindcss.
 
 ![Alt](https://repobeats.axiom.co/api/embed/0d333a7111c72a0c7ed603bfab7298225a46a856.svg 'Repobeats analytics image')
 
+## 🧑‍💻 Contribution
+
+Thank you to all the people who already contributed to my project!
+
+<a href="https://github.com/Chocolate1999/nextjs-tailwind-blog/graphs/contributors"><img src="https://github.com/Chocolate1999/nextjs-tailwind-blog/blob/main/CONTRIBUTORS.svg" /></a>
+
 ## 📄 License
 
 [MIT License](https://github.com/Chocolate1999/nextjs-tailwind-blog/blob/main/LICENSE) © 2022-PRESENT [Chocolate](https://github.com/Chocolate1999)
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index 648476b..9ab0664 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -1,8 +1,8 @@
-import UnderlineLink from '@/components/links/UnderlineLink';
+import CustomLink from '@/components/links/CustomLink';
 
 export default function Footer() {
   return (
-    <footer className='mt-16 text-right text-[#b3b3b3] dark:text-gray-200'>
+    <footer className='mt-16 text-right text-[#b3b3b3] '>
       <section className='flex flex-col items-end'>
         <div>
           <a
@@ -22,9 +22,9 @@ export default function Footer() {
             © Yang Chao Yi
           </a>
         </div>
-        <UnderlineLink href='https://beian.miit.gov.cn/'>
+        <CustomLink href='https://beian.miit.gov.cn/'>
           湘ICP备20002952号
-        </UnderlineLink>
+        </CustomLink>
       </section>
     </footer>
   );
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 97573ee..c938298 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -19,7 +19,7 @@ export default function Header() {
         'sticky top-0 z-50 w-full bg-transparent',
         isDocHover &&
           'solid border-b border-black border-opacity-[0.12] bg-white bg-opacity-[98] backdrop-blur-[40px]',
-        'dark:border-b  dark:border-black dark:bg-[#060807]'
+        'dark:border-b  dark:border-black dark:bg-[#215c8c]'
       )}
     >
       <section className='layout'>
diff --git a/src/components/links/CustomLink.tsx b/src/components/links/CustomLink.tsx
index 78a5169..a5f038d 100644
--- a/src/components/links/CustomLink.tsx
+++ b/src/components/links/CustomLink.tsx
@@ -13,11 +13,11 @@ export default function CustomLink({
       className={clsx(
         'animated-underline custom-link inline-flex items-center font-medium',
         'focus:outline-none focus-visible:ring focus-visible:ring-primary-300',
-        'border-b border-dotted border-dark hover:border-black/0',
+        'border-b border-dotted border-dark hover:border-black/0 dark:border-white',
         className
       )}
     >
-      <span className='dark:bg-gradient-to-tr dark:from-primary-300 dark:to-primary-400 dark:bg-clip-text dark:text-transparent'>
+      <span className=' dark:bg-gradient-to-tr dark:from-primary-300 dark:to-primary-400 dark:bg-clip-text dark:text-[#b3b3b3]'>
         {children}
       </span>
     </UnstyledLink>
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 25b8655..e7790b8 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -22,7 +22,7 @@ Router.events.on('routeChangeComplete', nProgress.done);
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <RecoilRoot>
-      <ThemeProvider attribute='class' enableSystem={false}>
+      <ThemeProvider attribute='class' enableSystem={true}>
         <Component {...pageProps} />
       </ThemeProvider>
     </RecoilRoot>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index df46ae9..edf4c32 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -15,29 +15,92 @@ export default function HomePage() {
       <Seo />
       <main>
         <section className={clsxm(isLoaded && 'fade-in-start')}>
-          <div className='mt-[120px] text-center'>
-            <article className='layout '>
-              <div className='flex flex-col items-start'>
-                <h2 className='text-2x dark:text-gray-100' data-fade='1'>
-                  Hi!
-                </h2>
-                <h1 className=' mt-1 text-3xl dark:text-gray-100' data-fade='2'>
-                  You can call me Chocolate
-                </h1>
+          <div className='mt-[120px]  text-left'>
+            <article className=''>
+              <div className='mx-8 flex flex-col items-start'>
+                <p
+                  className='mb-8 text-4xl text-[#555] dark:text-[#bbb]'
+                  data-fade='1'
+                >
+                  一百个Chocolate
+                </p>
+                <p
+                  className='text-lg text-[#555] dark:text-[#bbb]'
+                  data-fade='1'
+                >
+                  Hey, I am Chocolate, the 21st front-end development, currently
+                  moving bricks in a large factory.
+                </p>
+                <p
+                  className={clsxm(
+                    'mt-6  text-[#555] dark:text-[#bbb]',
+                    '2xl:text-xl text-left text-lg'
+                  )}
+                  data-fade='3'
+                >
+                  JS, TS, LeetCode, Vue, React, algorithm lovers.
+                </p>
+                <hr
+                  className='mx-auto my-[2em] h-0 w-[50px] border-t-[1px] border-[#7d7d7d4d]'
+                  data-fade='4'
+                />
                 <p
                   className={clsxm(
-                    ' mt-6 max-w-2xl text-gray-700 dark:text-gray-300',
+                    'mt-6  text-[#555] dark:text-[#bbb]',
                     '2xl:text-xl text-left text-lg'
                   )}
                   data-fade='3'
                 >
-                  JS, TS, LeetCode, Vue, React, algorithm lovers.The 21st
-                  front-end development, currently moving bricks in a large
-                  factory.
+                  After experiencing high school life, I understand that
+                  "fortunately, the cold window has been bitter for several
+                  years, and since then there are many warm springs"
                 </p>
                 <p
                   className={clsxm(
-                    ' mt-2 max-w-2xl text-gray-700 dark:text-gray-300',
+                    'mt-6  text-[#555] dark:text-[#bbb]',
+                    '2xl:text-xl text-left text-lg'
+                  )}
+                  data-fade='3'
+                >
+                  And through college life, I understand that "learning is like
+                  sailing against the current, if you don't advance, you will
+                  retreat".
+                </p>
+                <p
+                  className={clsxm(
+                    'mt-6  text-[#555] dark:text-[#bbb]',
+                    '2xl:text-xl text-left text-lg'
+                  )}
+                  data-fade='3'
+                >
+                  The dream is to become a person with a certain influence,
+                  sweat with blood, and create the future with positivity!
+                </p>
+                <hr
+                  className='mx-auto my-[2em] h-0 w-[50px] border-t-[1px] border-[#7d7d7d4d]'
+                  data-fade='4'
+                />
+                <p
+                  className={clsxm(
+                    ' mt-2 text-[#555] dark:text-[#bbb]',
+                    '2xl:text-xl text-left text-lg'
+                  )}
+                  data-fade='4'
+                >
+                  Find me on{' '}
+                  <CustomLink href='https://github.com/Chocolate1999'>
+                    Github
+                  </CustomLink>{' '}
+                  and{' '}
+                  <CustomLink href='https://space.bilibili.com/351534170'>
+                    哔哩哔哩
+                  </CustomLink>
+                  .
+                </p>
+
+                <p
+                  className={clsxm(
+                    ' mt-2 text-[#555] dark:text-[#bbb]',
                     '2xl:text-xl text-left text-lg'
                   )}
                   data-fade='4'
@@ -45,6 +108,7 @@ export default function HomePage() {
                   Motto: Learning is like sailing against the current, if you
                   don't advance, you will retreat!
                 </p>
+
                 <div data-fade='5' className='mt-4 flex'>
                   <CustomLink href='/blog'>To Blog</CustomLink>
                   <CustomLink href='/about' className='ml-6'>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index af5159d..f7e22f1 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -111,7 +111,6 @@
   }
 }
 
-/* #region  /**=========== Fade In =========== */
 [data-fade] {
   @apply translate-y-10 opacity-0 transition duration-[400ms] ease-out motion-reduce:translate-y-0 motion-reduce:opacity-100;
 }
@@ -142,11 +141,8 @@
 .fade-in-start [data-fade='8'] {
   transition-delay: 800ms;
 }
-/* #endregion  /**======== Fade In =========== */
 
-/* #region  /**=========== Animate Shadow =========== */
 .animate-shadow {
   @apply after:absolute after:inset-0 after:z-[-1] after:opacity-0 after:transition-opacity hover:after:opacity-100;
   @apply after:shadow-md dark:after:shadow-none;
 }
-/* #endregion  /**======== Animate Shadow =========== */
diff --git a/tailwind.config.js b/tailwind.config.js
index 24f27c7..89fb10a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,6 +4,7 @@ const { fontFamily } = require('tailwindcss/defaultTheme');
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.{js,jsx,ts,tsx}'],
+  darkMode: 'class',
   theme: {
     screens: {
       mobile: {