diff --git a/src/components/buttons/ThemeButton.tsx b/src/components/buttons/ThemeButton.tsx
new file mode 100644
index 0000000..9002335
--- /dev/null
+++ b/src/components/buttons/ThemeButton.tsx
@@ -0,0 +1,23 @@
+import clsx from 'clsx';
+import { useTheme } from 'next-themes';
+import * as React from 'react';
+import { FiMoon, FiSun } from 'react-icons/fi';
+
+import useLoaded from '@/hooks/useLoaded';
+
+type ThemeButtonProps = React.ComponentPropsWithoutRef<'button'>;
+
+export default function ThemeButton({ className, ...rest }: ThemeButtonProps) {
+  const { theme, setTheme } = useTheme();
+  const isLoaded = useLoaded();
+
+  return (
+    <button
+      className={clsx(className)}
+      {...rest}
+      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+    >
+      {theme === 'light' && isLoaded ? <FiMoon /> : <FiSun />}
+    </button>
+  );
+}
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index ad2537a..648476b 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -1,15 +1,31 @@
+import UnderlineLink from '@/components/links/UnderlineLink';
+
 export default function Footer() {
   return (
-    <footer className='relative bottom-2 flex w-full justify-center text-gray-700 dark:text-gray-200'>
-      © {new Date().getFullYear()} By{'  '}
-      <a
-        href='https://github.com/Chocolate1999'
-        target='_blank'
-        className='pl-1'
-        rel='noreferrer'
-      >
-        Chocolate
-      </a>
+    <footer className='mt-16 text-right text-[#b3b3b3] dark:text-gray-200'>
+      <section className='flex flex-col items-end'>
+        <div>
+          <a
+            href='https://creativecommons.org/licenses/by-nc-sa/4.0/'
+            rel='noreferrer'
+            target='_blank'
+          >
+            CC BY-NC-SA 4.0
+          </a>{' '}
+          {new Date().getFullYear()}
+          <a
+            href='https://github.com/Chocolate1999'
+            target='_blank'
+            className='pl-1'
+            rel='noreferrer'
+          >
+            © Yang Chao Yi
+          </a>
+        </div>
+        <UnderlineLink href='https://beian.miit.gov.cn/'>
+          湘ICP备20002952号
+        </UnderlineLink>
+      </section>
     </footer>
   );
 }
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index ccdb66e..97573ee 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -3,8 +3,8 @@ import { useMemo } from 'react';
 
 import clsxm from '@/lib/clsxm';
 
-import HeaderNav from '@/components/layout/hader-nav';
-import HeaderButton from '@/components/layout/header-button';
+import HeaderNav from '@/components/layout/HeaderNav';
+import Icon from '@/components/layout/Icon';
 
 export default function Header() {
   const docScroll = useScroll();
@@ -16,16 +16,18 @@ export default function Header() {
   return (
     <header
       className={clsxm(
-        'fixed top-0 z-50 w-full bg-transparent',
+        '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]'
       )}
     >
-      <div className='layout flex h-[60px] items-center justify-between leading-[60px]'>
-        <HeaderNav />
-        <HeaderButton />
-      </div>
+      <section className='layout'>
+        <div className='mx-8 flex h-[60px] items-center justify-between leading-[60px]'>
+          <HeaderNav />
+          <Icon />
+        </div>
+      </section>
     </header>
   );
 }
diff --git a/src/components/layout/hader-nav/index.tsx b/src/components/layout/HeaderNav.tsx
similarity index 89%
rename from src/components/layout/hader-nav/index.tsx
rename to src/components/layout/HeaderNav.tsx
index 8e3f911..151c435 100644
--- a/src/components/layout/hader-nav/index.tsx
+++ b/src/components/layout/HeaderNav.tsx
@@ -8,10 +8,10 @@ const HeaderNav = () => {
   const navVal = useRecoilValue(navAtom);
 
   return (
-    <div className='flex h-full w-auto flex-row items-center justify-center'>
+    <div className='flex h-full w-auto flex-row items-center justify-center gap-[24px]'>
       {navVal.map((item) => {
         return (
-          <div className='pr-[32px]' key={item.name}>
+          <div key={item.name}>
             <UnstyledLink href={item.link}>
               <span className='hover:text-[#0066ff] dark:text-gray-100'>
                 {item.name}
diff --git a/src/components/layout/Icon.tsx b/src/components/layout/Icon.tsx
new file mode 100644
index 0000000..644e889
--- /dev/null
+++ b/src/components/layout/Icon.tsx
@@ -0,0 +1,28 @@
+import { BsGithub } from 'react-icons/bs';
+import { SiBilibili } from 'react-icons/si';
+
+import ThemeButton from '@/components/buttons/ThemeButton';
+
+const Logo = () => {
+  return (
+    <div className='flex cursor-pointer gap-[24px] text-[22px]'>
+      <a
+        href='https://github.com/Chocolate1999'
+        rel='noreferrer'
+        target='_blank'
+      >
+        <BsGithub />
+      </a>
+      <a
+        href='https://space.bilibili.com/351534170'
+        rel='noreferrer'
+        target='_blank'
+      >
+        <SiBilibili />
+      </a>
+      <ThemeButton />
+    </div>
+  );
+};
+
+export default Logo;
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index 328abad..cd9b47d 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -4,12 +4,15 @@ import Footer from '@/components/layout/Footer';
 import Header from '@/components/layout/Header';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
-  // Put Header or Footer Here
   return (
-    <div className='next-container'>
+    <>
       <Header />
-      {children}
-      <Footer />
-    </div>
+      <div className='layout'>
+        <div className='mx-8'>
+          {children}
+          <Footer />
+        </div>
+      </div>
+    </>
   );
 }
diff --git a/src/components/layout/hader-nav/style.module.scss b/src/components/layout/hader-nav/style.module.scss
deleted file mode 100644
index 7fefa07..0000000
--- a/src/components/layout/hader-nav/style.module.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-@keyframes fade-up-header {
-  0% {
-    opacity: 0;
-    transform: translateY(10%);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.navDropDownContainer {
-  animation-name: fade-up-header;
-  animation-duration: 0.3s;
-  animation-timing-function: ease;
-  animation-fill-mode: forwards;
-  box-shadow: 0px 3px 10px 0px rgb(0 0 0 / 10%);
-}
-
-.itemContainer {
-  display: flex;
-  flex-direction: column;
-  align-content: flex-start;
-  height: inherit;
-  flex-wrap: wrap;
-  margin-bottom: 65px;
-}
diff --git a/src/components/layout/header-button/index.tsx b/src/components/layout/header-button/index.tsx
deleted file mode 100644
index 16316ce..0000000
--- a/src/components/layout/header-button/index.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import styles from './style.module.scss';
-
-import clsxm from '@/lib/clsxm';
-
-const HeaderButton = () => {
-  return (
-    <div className='flex flex-row items-center justify-end'>
-      <div
-        className={clsxm(
-          'cursor-pointe inline-block cursor-pointer',
-          styles.startButton
-        )}
-      >
-        Started
-      </div>
-    </div>
-  );
-};
-
-export default HeaderButton;
diff --git a/src/components/layout/header-button/style.module.scss b/src/components/layout/header-button/style.module.scss
deleted file mode 100644
index 638db3b..0000000
--- a/src/components/layout/header-button/style.module.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.startButton {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 8px 22px;
-  gap: 10px;
-  color: #ffffff;
-  width: 108px;
-  height: 40px;
-
-  background: linear-gradient(
-    101.26deg,
-    #2d61fc 1.01%,
-    #9362ed 45.41%,
-    #f06195 97.11%,
-    #fca1ad 136.14%
-  );
-  border-radius: 6px;
-}
diff --git a/src/components/layout/style.module.css b/src/components/layout/style.module.css
new file mode 100644
index 0000000..49fde0e
--- /dev/null
+++ b/src/components/layout/style.module.css
@@ -0,0 +1,14 @@
+@keyframes fade-up-header {
+  0% {
+    opacity: 0;
+    transform: translateY(10%);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.logo_name {
+}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 788cf13..25b8655 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,5 +1,6 @@
 import { AppProps } from 'next/app';
 import Router from 'next/router';
+import { ThemeProvider } from 'next-themes';
 import nProgress from 'nprogress';
 import { RecoilRoot } from 'recoil';
 
@@ -21,7 +22,9 @@ Router.events.on('routeChangeComplete', nProgress.done);
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <RecoilRoot>
-      <Component {...pageProps} />
+      <ThemeProvider attribute='class' enableSystem={false}>
+        <Component {...pageProps} />
+      </ThemeProvider>
     </RecoilRoot>
   );
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 5d53f6f..df46ae9 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,15 +1,11 @@
 import * as React from 'react';
-import { SiGithub, SiWechat } from 'react-icons/si';
 
-import { trackEvent } from '@/lib/analytics';
 import clsxm from '@/lib/clsxm';
 import useLoaded from '@/hooks/useLoaded';
 
 import Layout from '@/components/layout/Layout';
 import CustomLink from '@/components/links/CustomLink';
-import UnstyledLink from '@/components/links/UnstyledLink';
 import Seo from '@/components/Seo';
-import Tooltip from '@/components/Tooltip';
 
 export default function HomePage() {
   const isLoaded = useLoaded();
@@ -18,82 +14,43 @@ export default function HomePage() {
     <Layout>
       <Seo />
       <main>
-        <section className={clsxm('min-h-screen', isLoaded && 'fade-in-start')}>
-          <div className='flex min-h-screen flex-col justify-center text-center'>
-            <article className=' layout 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>
-              <p
-                className={clsxm(
-                  ' mt-6 max-w-2xl text-gray-700 dark:text-gray-300',
-                  '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.
-              </p>
-              <p
-                className={clsxm(
-                  ' mt-2 max-w-2xl text-gray-700 dark:text-gray-300',
-                  '2xl:text-xl text-left text-lg'
-                )}
-                data-fade='4'
-              >
-                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'>
-                  Learn more about me
-                </CustomLink>
-              </div>
-              <div className='flex'>
-                <Tooltip content={<p>Chocolate1999</p>}>
-                  <div
-                    data-fade='6'
-                    className='mt-8 flex flex-wrap gap-4 gap-y-2'
-                  >
-                    <UnstyledLink
-                      href='https://github.com/Chocolate1999'
-                      className={clsxm(
-                        'inline-flex items-center gap-1 text-base font-medium',
-                        'text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white',
-                        'focus:outline-none focus-visible:ring focus-visible:ring-primary-300',
-                        'transition-colors'
-                      )}
-                      onClick={() => {
-                        trackEvent('Social Link: Github', 'link');
-                      }}
-                    >
-                      <SiGithub className='shrink-0' />
-                    </UnstyledLink>
-                  </div>
-                </Tooltip>
-                <Tooltip content={<p>小狮子前端</p>}>
-                  <div
-                    data-fade='6'
-                    className='mt-8 ml-4 flex flex-wrap gap-4 gap-y-2'
-                  >
-                    <UnstyledLink
-                      href='https://github.com/Chocolate1999'
-                      className={clsxm(
-                        'inline-flex items-center gap-1 text-base font-medium',
-                        'text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white',
-                        'focus:outline-none focus-visible:ring focus-visible:ring-primary-300',
-                        'transition-colors'
-                      )}
-                    >
-                      <SiWechat className='shrink-0' />
-                    </UnstyledLink>
-                  </div>
-                </Tooltip>
+        <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>
+                <p
+                  className={clsxm(
+                    ' mt-6 max-w-2xl text-gray-700 dark:text-gray-300',
+                    '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.
+                </p>
+                <p
+                  className={clsxm(
+                    ' mt-2 max-w-2xl text-gray-700 dark:text-gray-300',
+                    '2xl:text-xl text-left text-lg'
+                  )}
+                  data-fade='4'
+                >
+                  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'>
+                    Learn more about me
+                  </CustomLink>
+                </div>
               </div>
             </article>
           </div>
diff --git a/src/pages/style.module.scss b/src/pages/style.module.scss
deleted file mode 100644
index 2d5e863..0000000
--- a/src/pages/style.module.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.container {
-  background: linear-gradient(
-    90deg,
-    rgba(247, 149, 51, 0.1),
-    rgba(243, 112, 85, 0.1) 15%,
-    rgba(239, 78, 123, 0.1) 30%,
-    rgba(161, 102, 171, 0.1) 44%,
-    rgba(80, 115, 184, 0.1) 58%,
-    rgba(16, 152, 173, 0.1) 72%,
-    rgba(7, 179, 155, 0.1) 86%,
-    rgba(109, 186, 130, 0.1)
-  );
-}
-
-.blogButton {
-  box-shadow: 2px 7px 15px 0px rgba(218, 222, 226, 0.59);
-}
diff --git a/src/store/index.tsx b/src/store/index.tsx
index 9db4359..bb576db 100644
--- a/src/store/index.tsx
+++ b/src/store/index.tsx
@@ -15,17 +15,5 @@ export const navAtom = atom({
       name: 'Projects',
       link: '/projects',
     },
-    {
-      name: 'Collection',
-      link: '/collection',
-    },
-    {
-      name: 'Talks',
-      link: '/talks',
-    },
-    {
-      name: 'Links',
-      link: '/links',
-    },
   ],
 });
diff --git a/src/styles/globals.css b/src/styles/globals.css
index ec460e0..af5159d 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -71,24 +71,9 @@
   }
   /* #endregion  /**======== Default Typography =========== */
 
-  .next-container {
-    background: linear-gradient(
-      90deg,
-      rgba(247, 149, 51, 0.1),
-      rgba(243, 112, 85, 0.1) 15%,
-      rgba(239, 78, 123, 0.1) 30%,
-      rgba(161, 102, 171, 0.1) 44%,
-      rgba(80, 115, 184, 0.1) 58%,
-      rgba(16, 152, 173, 0.1) 72%,
-      rgba(7, 179, 155, 0.1) 86%,
-      rgba(109, 186, 130, 0.1)
-    );
-    @apply dark:bg-[#222] dark:bg-none;
-  }
-
   .layout {
-    max-width: 1200px;
-    @apply mx-auto w-11/12;
+    max-width: 1400px;
+    @apply mx-auto w-full;
   }
 
   .bg-dark a.custom-link {