diff --git a/src/css/custom.css b/src/css/custom.css
index 2cb3cdd..710a237 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -13,6 +13,7 @@
   --ifm-color-primary-light: #9e47f2;
   --ifm-color-primary-lighter: #ab65f5;
   --ifm-color-primary-lightest: #c28cf8;
+  --ifm-color-landing: #white;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(138, 43, 226, 0.1);
 }
@@ -25,6 +26,7 @@
   --ifm-color-primary-light: #c1a7e2;
   --ifm-color-primary-lighter: #d1b5eb;
   --ifm-color-primary-lightest: #e2c8f3;
+  --ifm-color-landing: #1b1b1d;
   --docusaurus-highlighted-code-line-bg: rgba(177, 156, 217, 0.3);
 }
 
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index cd74dd3..2c3f6c1 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -10,7 +10,7 @@ import styles from './index.module.css';
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+    <header className={clsx('--landing', styles.heroBanner)}>
       <div className="container">
         <Heading as="h1" className="hero__title">
           {siteConfig.title}