diff --git a/src/components/Sections/Components.tsx b/src/components/Sections/Components.tsx
index ee661f19a45..785a55fd216 100644
--- a/src/components/Sections/Components.tsx
+++ b/src/components/Sections/Components.tsx
@@ -10,7 +10,7 @@ export const TextTitle = ({
 }) => (
   <span
     className="block font-inter
-    text-heading2 text-primary-800 font-semibold mb-[16px]
+    text-heading2 text-primary-800 dark:text-primary-500 font-semibold mb-[16px]
     sm:text-heading4 sm:mb-2 sm:mt-5"
   >
     {children}
@@ -20,7 +20,7 @@ export const TextTitle = ({
 export const H3Title = ({ children }: { children: React.ReactNode }) => (
   <span
     className="block font-inter
-    text-heading3 text-primary-800 font-semibold mb-[24px]
+    text-heading3 text-primary-800 dark:text-primary-500 font-semibold mb-[24px]
     sm:text-heading4"
   >
     {children}
@@ -34,7 +34,7 @@ export const TextDescription = ({
 }) => (
   <div
     className="font-inter
-    text-label18 text-neutral-500 
+    text-label18 text-neutral-500 dark:text-[#e3e3e3]
     sm:text-label16 sm:text-start"
   >
     {children}
@@ -108,7 +108,7 @@ export const InlineLink = ({
 export const BreakLine = () => (
   <div
     className="
-  h-[2px] bg-neutral-100
+  h-[2px] bg-neutral-100 dark:bg-neutral-600
   "
   />
 );
@@ -127,7 +127,7 @@ export const Sup = ({
     {children}
     <span
       className="font-inter text-label14 text-center
-      flex h-[24px] text-neutral-500 mt-[4px]
+      flex h-[24px] text-neutral-500 dark:text-[#e3e3e3] mt-[4px]
       sm:text-[12px] sm:leading-[12px] sm:mt-1
     "
     >
@@ -143,4 +143,4 @@ export const SupImg = ({ src }: { src: string }) => (
     sm:w-[48px] sm:h-[48px]
   "
   />
-);
+);
\ No newline at end of file
diff --git a/src/components/Sections/HomepageHeader.tsx b/src/components/Sections/HomepageHeader.tsx
index dab3d7c036a..63272e1a899 100644
--- a/src/components/Sections/HomepageHeader.tsx
+++ b/src/components/Sections/HomepageHeader.tsx
@@ -59,7 +59,7 @@ export function HomepageHeader() {
           <div
             className="
             mt-5 mobile:mt-3 sm:mt-3
-            text-primary-800
+            text-primary-800  
             text-label24
             sm:text-label16Lake mobile:text-label16Lake
             font-inter
@@ -94,7 +94,7 @@ export function HomepageHeader() {
             flex
             whitespace-nowrap
             rounded-[8px] sm:rounded-[5px] mobile:rounded-[5px]
-            bg-neutral-invert
+            bg-neutral-invert dark:bg-[#242526]
             text-primary-500
             border-2 border-primary-500 border-solid
             hover:text-primary-500 
@@ -112,7 +112,7 @@ export function HomepageHeader() {
             flex
             whitespace-nowrap
             rounded-[8px] sm:rounded-[5px] mobile:rounded-[5px]
-            bg-neutral-invert
+            bg-neutral-invert dark:bg-[#242526]
             text-primary-500
             border-2 border-primary-500 border-solid
             hover:text-primary-500 
@@ -140,10 +140,11 @@ export function HomepageHeader() {
        mb-[40px]
        items-center
       ">
-        <div className="h-[2px] bg-neutral-100 w-[46%] sm:w-[42%] mobile:w-[35%] relative"></div>
+        <div className="h-[2px] bg-neutral-100 w-[46%]  sm:w-[42%] mobile:w-[35%] relative"></div>
         <span className="
          flex-1
          w-[81px]
+         dark:text-[#e3e3e3]
         ">
         Trusted by
         </span>
diff --git a/src/components/Sections/UseCases.tsx b/src/components/Sections/UseCases.tsx
index fc048376b10..d0d539f9e73 100644
--- a/src/components/Sections/UseCases.tsx
+++ b/src/components/Sections/UseCases.tsx
@@ -23,12 +23,12 @@ function UCCard({ lead, title, desc, demoURL, children }: {
       sm:h-[182px]">
       {children}
     </div>
-    <div className="bg-white px-4 py-2 h-[264px] sm:h-[195px] sm:p-2 mobile:h-[240px]">
-      <div className="font-inter text-neutral-300 text-label18 font-medium mb-2 pr-1
+    <div className="bg-white dark:bg-[#242526] px-4 py-2 h-[264px] sm:h-[195px] sm:p-2 mobile:h-[240px]">
+      <div className="font-inter text-neutral-300 dark:text-[#e3e3e3] text-label18 font-medium mb-2 pr-1
         sm:text-label16 sm:font-normal sm:mb-[4px]">{lead}</div>
-      <div className="font-inter text-primary-800 text-heading2 font-semibold mb-2 pr-1
+      <div className="font-inter text-primary-500 text-heading2 font-semibold mb-2 pr-1
         sm:text-[20px] sm:leading-[28px] sm:mb-[4px] sm:pr-[0]">{title}</div>
-      <div className="font-inter text-neutral-500 text-label18 font-normal pr-1
+      <div className="font-inter text-neutral-500 dark:text-[#e3e3e3] text-label18 font-normal pr-1
         sm:text-label16 sm:pr-[0]">{desc}</div>
        <C.TextLink link={demoURL}>{lead === "Data Engineers" ? "Learn More" : "See it Live"}</C.TextLink>
     </div>
diff --git a/src/components/Sections/UserFlow.tsx b/src/components/Sections/UserFlow.tsx
index 11a596e5a48..708a9590a50 100644
--- a/src/components/Sections/UserFlow.tsx
+++ b/src/components/Sections/UserFlow.tsx
@@ -19,7 +19,7 @@ const Card = ({ icon, text, children }: {
     <div className="mt-[40px]">{icon}</div>
     <div className="mt-[10px] text-heading4 font-inter font-semibold text-primary-800">{text}</div>
   </div>
-  <div className="mt-5 text-label18 font-inter pl-1 text-neutral-500">{children}</div>
+  <div className="mt-5 text-label18 font-inter pl-1 text-neutral-500 dark:text-[#e3e3e3]">{children}</div>
 </div>)
 
 const Arrow = () => <div className="h-[140px] flex items-center"><BlueArrow className="xl:w-[3.33vw] xl:max-w-[80px] " /></div>
diff --git a/src/components/Sections/WhyDevlake.tsx b/src/components/Sections/WhyDevlake.tsx
index 719438e013a..2fbc7c26602 100644
--- a/src/components/Sections/WhyDevlake.tsx
+++ b/src/components/Sections/WhyDevlake.tsx
@@ -99,7 +99,7 @@ function Supports() {
         </C.Sup>
       </div>
       <div
-        className="text-label18 font-inter text-neutral-500 mt-6
+        className="text-label18 font-inter text-neutral-500 dark:text-[#e3e3e3] mt-6
         sm:text-label16 sm:mt-4"
       >
         Check out all {" "}
diff --git a/src/components/Team/Committer.tsx b/src/components/Team/Committer.tsx
index 40ce0bf76aa..1b1cb72642e 100644
--- a/src/components/Team/Committer.tsx
+++ b/src/components/Team/Committer.tsx
@@ -7,13 +7,13 @@ export function Committer() {
   return (
     <div className="py-[60px] sm:py-5 mobile:py-4">
       <h2 className="
-    text-primary-800 font-semibold
+    text-primary-500 font-semibold
       text-heading1 sm:text-heading3
       mb-[16px] sm:mb-[12px] mobile:mb-[12px]
       ">
         Committers
       </h2>
-      <p className="text-label18 font-normal text-neutral-500 mb-[64px] sm:mb-[32px] mobile:mb-[24px] ">
+      <p className="text-label18 font-normal text-neutral-500 mb-[64px] sm:mb-[32px] mobile:mb-[24px] dark:text-[#e3e3e3] ">
         Committers contribute to the codebase and documentation, participate in discussions via the dev mailing list, work on the issue tracker and initiate many other activities to foster the dynamic and engaging community we all love.
       </p>
       <div className="
diff --git a/src/components/Team/Contributor.tsx b/src/components/Team/Contributor.tsx
index d307e6b1ba0..c6d79672dc1 100644
--- a/src/components/Team/Contributor.tsx
+++ b/src/components/Team/Contributor.tsx
@@ -30,14 +30,14 @@ export function Contributor() {
         <div className="py-[60px] sm:py-5 mobile:py-4">
           <h2
             className="
-    text-primary-800 font-semibold
+    text-primary-500 font-semibold
       text-heading1 sm:text-heading3
       mb-[16px] sm:mb-[12px] mobile:mb-[12px]
       "
           >
             Contributors
           </h2>
-          <p className="text-label18 font-normal text-neutral-500 mb-[64px] sm:mb-[32px] mobile:mb-[24px] ">
+          <p className="text-label18 font-normal text-neutral-500 dark:text-[#e3e3e3] mb-[64px] sm:mb-[32px] mobile:mb-[24px] ">
             New contributors are always welcomed by our community. You will be
             awarded with a certificate once your first PRs get merged into the
             codebase.
diff --git a/src/components/Team/PPMC.tsx b/src/components/Team/PPMC.tsx
index 28a1cf0bcf0..ae26eb934a4 100644
--- a/src/components/Team/PPMC.tsx
+++ b/src/components/Team/PPMC.tsx
@@ -7,7 +7,7 @@ export function PPMC() {
   return (
     <div className="py-[60px] sm:py-5 mobile:py-4">
       <h2 className="
-    text-primary-800 font-semibold
+    text-primary-500 font-semibold
       text-heading1 sm:text-heading3
       mb-[64px] sm:mb-[32px] mobile:mb-[24px]
       ">
diff --git a/src/css/custom.css b/src/css/custom.css
index ab5dae3c9b1..20affe5f0ee 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -61,7 +61,7 @@ html[data-theme="dark"] .docusaurus-highlight-code-line {
 
   .section-title {
     @apply text-heading1 mb-[64px];
-    @apply text-primary-800 font-semibold;
+    @apply text-primary-500 font-semibold;
     @apply sm:text-heading3;
     @apply mobile:mb-4 sm:mt-3 sm:mb-[36px];
   }
diff --git a/src/pages/index.js b/src/pages/index.js
index ba8e56a85da..85704ddbb46 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -16,9 +16,9 @@ export default function Home() {
     <Layout
       title={`${siteConfig.title}`}
       description="Apache DevLake is an open-source dev data platform that ingests, analyzes, and visualizes the fragmented data from DevOps tools to distill insights for engineering productivity.">
-      <div className='bg-[#f8f8f8]'>
+      <div className='bg-[#f8f8f8] dark:bg-[#1b1b1d]'>
        <HeaderLearnMore />
-        <div className=' mx-auto bg-white'>
+        <div className='mx-auto bg-white dark:bg-[#242526]'>
           <HomepageHeader />
           <main className='max-w-[70%] xl:mx-auto
             sm:max-w-[90%] mx-auto xl:max-w-[1280px]'>
@@ -32,4 +32,4 @@ export default function Home() {
       </div>
     </Layout>
   );
-}
+}
\ No newline at end of file
diff --git a/src/pages/team/index.js b/src/pages/team/index.js
index 3e8c152d99d..5d95ddc8a62 100644
--- a/src/pages/team/index.js
+++ b/src/pages/team/index.js
@@ -13,8 +13,8 @@ export default function Team() {
     <Layout
       title={`${siteConfig.title}`}
       description="Apache DevLake is an open-source dev data platform that ingests, analyzes, and visualizes the fragmented data from DevOps tools to distill insights for engineering productivity.">
-      <div className='bg-[#f8f8f8]'>
-        <div className='mx-auto bg-white max-w-[100vw] overflow-hidden relative'>
+      <div className='bg-[#f8f8f8] dark:bg-[#1b1b1d]'>
+        <div className='mx-auto bg-white dark:bg-[#242526] max-w-[100vw] overflow-hidden relative'>
           <TeampageHeaderBG />
           <main 
           className='
@@ -30,4 +30,4 @@ export default function Team() {
       </div>
     </Layout>
   );
-}
+}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index a22c159234e..00f767e59e4 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 
 let {tailwindConfig} = require('dev-website-tailwind-config');
+
+tailwindConfig.darkMode = ['class', '[data-theme="dark"]'];
+
 tailwindConfig.theme.extend.fontSize = {
     ...tailwindConfig.theme.extend.fontSize,
     label40: ['40px', { lineHeight : '56px' }],