diff --git a/docs/website/components/index/index.tsx b/docs/website/components/index/index.tsx
index 57e985da10..e9e05e68b1 100644
--- a/docs/website/components/index/index.tsx
+++ b/docs/website/components/index/index.tsx
@@ -101,9 +101,9 @@ export default function Index({
       </div>
 
       {/* FEATURES */}
-      <div className="py-16 md:py-20 px-4 sm:px-6 lg:px-20 bg-[#F5F5F5] flex flex-col md:flex-row items-center justify-center gap-6 md:gap-0">
+      <div className="py-16 md:py-20 px-4 sm:px-6 lg:px-20 bg-[#F5F5F5] dark:bg-inherit flex flex-col md:flex-row items-center justify-center gap-6 md:gap-0">
         <div className="px-4 max-w-[854px] w-full h-full">
-          <h2 className="text-4xl md:text-6xl font-semibold text-center md:text-start text-[#2E2929]">
+          <h2 className="text-4xl md:text-6xl font-semibold text-center md:text-start text-[#2E2929] dark:text-[#EEEBEB]">
             {featuresTitle.split(' ').slice(0, -1).join(' ')}{' '}
             <span className="text-[#FF914B]">{featuresTitle.split(' ').slice(-1)}</span>
           </h2>
@@ -114,12 +114,18 @@ export default function Index({
                 className="flex flex-col items-center justify-center md:items-start md:justify-start"
               >
                 <div className="w-12 h-12 md:w-16 md:h-16">
-                  <Image src={feature.logo} alt="features logo" width={40} height={40} />
+                  <Image
+                    src={feature.logo}
+                    alt="features logo"
+                    width={40}
+                    height={40}
+                    className="dark:filter dark:invert dark:brightness-150"
+                  />
                 </div>
                 <h3 className="text-4xl font-medium text-[#FF914B] text-center md:text-start">
                   {feature.title}
                 </h3>
-                <p className="text-gray-600 mt-2 text-center md:text-start">
+                <p className="text-gray-600 mt-2 text-center md:text-start dark:text-[#EAEAEA]">
                   {feature.description}
                 </p>
               </div>
diff --git a/docs/website/theme.config.tsx b/docs/website/theme.config.tsx
index 17eb6f0a61..856b3cdec3 100644
--- a/docs/website/theme.config.tsx
+++ b/docs/website/theme.config.tsx
@@ -7,7 +7,7 @@ import { useConfig } from 'nextra-theme-docs'
 const theme: DocsThemeConfig = {
   docsRepositoryBase: 'https://github.com/rooch-network/rooch/blob/main/docs/website',
   nextThemes: {
-    defaultTheme: 'light',
+    defaultTheme: 'system',
   },
   logo: (
     <div>
@@ -56,49 +56,52 @@ const theme: DocsThemeConfig = {
       ? 'Unlocking infinite utility for the Bitcoin Economy'
       : '开启比特币经济的无限可能'
     return (
-        <>
-            <meta name="msapplication-TileColor" content="#ffffff"/>
-            <meta name="theme-color" content="#ffffff"/>
-            <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-            {/* MULTI-LANGUAGES */}
-            <link rel="alternate" href={'https://rooch.network' + asPath} hrefLang="x-default"/>
-            <link rel="alternate" href={'https://rooch.network' + asPath} hrefLang="en-us"/>
-            <link rel="alternate" href={'https://rooch.network' + asPath} hrefLang="en"/>
-            <link rel="alternate" href={'https://rooch.network/zh-CN' + asPath} hrefLang="zh-cn"/>
-            <link rel="alternate" href={'https://rooch.network/zh-CN' + asPath} hrefLang="zh"/>
-            {/* WEBSITE */}
-            <meta name="description" content={pageDescription}/>
-            <meta property="og:description" content={pageDescription}/>
-            <meta property="og:image" content="https://rooch.network/logo/rooch-banner.png"/>
-            <meta name="apple-mobile-web-app-title" content="Rooch Network"/>
-            {/* TWITTER */}
-            <meta name="twitter:card" content="summary_large_image"/>
-            <meta name="twitter:site" content="https://rooch.network"/>
-            <meta name="twitter:creator" content="https://rooch.network"/>
-            <meta name="twitter:title" content="Rooch Network | Unlocking Infinite Utility for the Bitcoin Economy"/>
-            <meta name="twitter:description" content={pageDescription}/>
-            <meta name="twitter:image" content="https://rooch.network/logo/rooch-banner.png"/>
-            <meta name="twitter:image:alt" content="Rooch Network"/>
-            {/* FAVICON */}
-            <link rel="icon" href="/logo/rooch_black_logo.svg" type="image/svg+xml"/>
-            <link rel="icon" href="/logo/rooch_black_logo.png" type="image/png"/>
-            <link
-                rel="icon"
-                href="/logo/rooch_white_logo.svg"
-                type="image/svg+xml"
-                media="(prefers-color-scheme: dark)"
-            />
-            <link
-                rel="icon"
-                href="/logo/rooch_white_logo.png"
-                type="image/png"
-                media="(prefers-color-scheme: dark)"
-            />
-        </>
+      <>
+        <meta name="msapplication-TileColor" content="#ffffff" />
+        <meta name="theme-color" content="#ffffff" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        {/* MULTI-LANGUAGES */}
+        <link rel="alternate" href={'https://rooch.network' + asPath} hrefLang="x-default" />
+        <link rel="alternate" href={'https://rooch.network' + asPath} hrefLang="en-us" />
+        <link rel="alternate" href={'https://rooch.network' + asPath} hrefLang="en" />
+        <link rel="alternate" href={'https://rooch.network/zh-CN' + asPath} hrefLang="zh-cn" />
+        <link rel="alternate" href={'https://rooch.network/zh-CN' + asPath} hrefLang="zh" />
+        {/* WEBSITE */}
+        <meta name="description" content={pageDescription} />
+        <meta property="og:description" content={pageDescription} />
+        <meta property="og:image" content="https://rooch.network/logo/rooch-banner.png" />
+        <meta name="apple-mobile-web-app-title" content="Rooch Network" />
+        {/* TWITTER */}
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:site" content="https://rooch.network" />
+        <meta name="twitter:creator" content="https://rooch.network" />
+        <meta
+          name="twitter:title"
+          content="Rooch Network | Unlocking Infinite Utility for the Bitcoin Economy"
+        />
+        <meta name="twitter:description" content={pageDescription} />
+        <meta name="twitter:image" content="https://rooch.network/logo/rooch-banner.png" />
+        <meta name="twitter:image:alt" content="Rooch Network" />
+        {/* FAVICON */}
+        <link rel="icon" href="/logo/rooch_black_logo.svg" type="image/svg+xml" />
+        <link rel="icon" href="/logo/rooch_black_logo.png" type="image/png" />
+        <link
+          rel="icon"
+          href="/logo/rooch_white_logo.svg"
+          type="image/svg+xml"
+          media="(prefers-color-scheme: dark)"
+        />
+        <link
+          rel="icon"
+          href="/logo/rooch_white_logo.png"
+          type="image/png"
+          media="(prefers-color-scheme: dark)"
+        />
+      </>
     )
   },
-    project: {
-        link: 'https://github.com/rooch-network',
+  project: {
+    link: 'https://github.com/rooch-network',
   },
   chat: {
     link: 'https://discord.gg/rooch',