diff --git a/src/pages/index.js b/src/pages/index.js
index f5161a16..2d5a90d3 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -6,6 +6,7 @@ import Layout from '@theme/Layout'
 import clsx from 'clsx'
 import React from 'react'
 import { ExampleScroller } from "../components/ExampleScroller"
+import ThemedImage from '@theme/ThemedImage';
 
 import whoIsUsing from '../data/whoIsUsing'
 import styles from './index.module.css'
@@ -210,7 +211,14 @@ function Home() {
             </h2>
             <br/>
             <div>
-                <img src="img/cncf-logo.png" />
+              <ThemedImage
+                className={styles.cncfLogo}
+                alt="CNCF themed image"
+                sources={{
+                  light: useBaseUrl('/img/cncf-color.png'),
+                  dark: useBaseUrl('/img/cncf-white.png'),
+                }}
+              />
             </div>
           </div>
         </div>
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index a10f90d4..efbd2080 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -129,6 +129,10 @@
   height: 96px;
 }
 
+[data-theme='dark'] .cncfLogo {
+  height: 75px;
+}
+
 @media screen and (max-width: 768px) {
   .cncfLogo {
     height: 64px;
diff --git a/static/img/cncf-color.png b/static/img/cncf-color.png
new file mode 100644
index 00000000..a1fa79e9
Binary files /dev/null and b/static/img/cncf-color.png differ
diff --git a/static/img/cncf-logo.png b/static/img/cncf-logo.png
deleted file mode 100644
index f1199211..00000000
Binary files a/static/img/cncf-logo.png and /dev/null differ
diff --git a/static/img/cncf-white.png b/static/img/cncf-white.png
new file mode 100644
index 00000000..9c3fd076
Binary files /dev/null and b/static/img/cncf-white.png differ