diff --git a/docs/src/components/Homepage/banner.js b/docs/src/components/Homepage/banner.js
index 20e2fdc6c..43bd96711 100644
--- a/docs/src/components/Homepage/banner.js
+++ b/docs/src/components/Homepage/banner.js
@@ -1,10 +1,7 @@
 import React from "react";
-import { useColorMode } from "@docusaurus/theme-common";
 import { XMarkIcon } from "@heroicons/react/20/solid";
 
 export default function HomepageBanner() {
-  const { isDarkTheme } = useColorMode();
-
   return (
     <div className="flex items-center gap-x-6 bg-gray-900 px-6 py-2.5 sm:px-3.5 sm:before:flex-1">
       <p className="text-sm leading-6 text-white">
diff --git a/docs/src/components/Homepage/downloads.js b/docs/src/components/Homepage/downloads.js
index 1bd14df4e..4bb29b01a 100644
--- a/docs/src/components/Homepage/downloads.js
+++ b/docs/src/components/Homepage/downloads.js
@@ -1,8 +1,5 @@
 import React from "react";
-import { useColorMode } from "@docusaurus/theme-common";
 
 export default function HomepageDownloads() {
-  const { isDarkTheme } = useColorMode();
-
   return <div>Downloads section</div>;
 }
diff --git a/docs/src/components/Homepage/features.js b/docs/src/components/Homepage/features.js
index c6c4e03d7..b04aa1c94 100644
--- a/docs/src/components/Homepage/features.js
+++ b/docs/src/components/Homepage/features.js
@@ -1,5 +1,4 @@
 import React from "react";
-import { useColorMode } from "@docusaurus/theme-common";
 import {
   ArrowPathIcon,
   CloudArrowUpIcon,
@@ -31,7 +30,6 @@ const features = [
 ];
 
 export default function HomepageFeatures() {
-  const { isDarkTheme } = useColorMode();
   return (
     <div className="bg-white dark:bg-gray-900 py-12 sm:py-16">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
diff --git a/docs/src/components/Homepage/hero.js b/docs/src/components/Homepage/hero.js
index 048c1b045..4c2d8aa91 100644
--- a/docs/src/components/Homepage/hero.js
+++ b/docs/src/components/Homepage/hero.js
@@ -4,13 +4,13 @@ import { useColorMode } from "@docusaurus/theme-common";
 import Dropdown from "@site/src/components/Elements/dropdown";
 
 export default function HomepageHero() {
-  const { isDarkTheme } = useColorMode();
+  const { colorMode } = useColorMode();
 
   return (
     <div className="bg-white dark:bg-gray-900">
       <div className="relative isolate pt-14">
         {/* Background top gradient styling */}
-        {isDarkTheme ? (
+        {colorMode === "dark" ? (
           <div
             className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
             aria-hidden="true"
@@ -54,15 +54,9 @@ export default function HomepageHero() {
               <div className="mt-10 flex items-center justify-center gap-x-6">
                 {/* TODO: handle mobile model download app instead */}
                 <Dropdown />
-                {/* <a
-                  href="#"
-                  className="text-base font-semibold leading-6 text-gray-900 dark:text-white"
-                >
-                  Book a Demo <span aria-hidden="true">→</span>
-                </a> */}
                 <button
                   type="button"
-                  className="cursor-pointer relative inline-flex items-center rounded px-3.5 py-2.5 text-base font-semibold text-indigo-600 bg-white border-indigo-600 hover:bg-indigo-600 hover:text-white"
+                  className="cursor-pointer relative inline-flex items-center rounded px-3.5 py-2 text-base font-semibold text-indigo-600 bg-white border-indigo-600 dark:border-white hover:bg-indigo-600 dark:hover:border-indigo-600 hover:text-white"
                 >
                   Book a Demo
                 </button>
@@ -71,7 +65,7 @@ export default function HomepageHero() {
             {/* Desktop screenshot image full width */}
             <img
               src={
-                isDarkTheme
+                colorMode === "dark"
                   ? require("@site/static/img/desktop-screenshot-dark.png")
                       .default
                   : require("@site/static/img/desktop-screenshot.png").default
diff --git a/docs/src/components/Homepage/usecases.js b/docs/src/components/Homepage/usecases.js
index 25abab296..7fcb012d9 100644
--- a/docs/src/components/Homepage/usecases.js
+++ b/docs/src/components/Homepage/usecases.js
@@ -1,5 +1,4 @@
 import React from "react";
-import { useColorMode } from "@docusaurus/theme-common";
 import {
   CloudArrowUpIcon,
   LockClosedIcon,
@@ -28,8 +27,6 @@ const features = [
 ];
 
 export default function HomepageUseCases() {
-  const { isDarkTheme } = useColorMode();
-
   return (
     <div className="overflow-hidden bg-white dark:bg-gray-900 py-24 sm:py-32">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">