diff --git a/packages/website/components/Footer.tsx b/packages/website/components/Footer.tsx
index e68fb44de7f..84c68d874f0 100644
--- a/packages/website/components/Footer.tsx
+++ b/packages/website/components/Footer.tsx
@@ -1,6 +1,19 @@
-export default function Footer() {
+import { ThemeSwitch, useConfig } from "nextra-theme-docs";
+
+export default function Footer({ menu }) {
+  const config = useConfig();
+
   return (
     <footer className="bg-neutral-100 dark:bg-neutral-900">
+      <div
+        className={`nx-mx-auto nx-flex nx-py-2 px-8 nx-border dark:nx-border-neutral-800 contrast-more:nx-border-neutral-400
+          ${menu && (config.darkMode)
+            ? 'nx-flex'
+            : 'nx-hidden'
+          }`}
+      >
+        {config.darkMode && <ThemeSwitch />}
+      </div>
       <div className="grid grid-cols-2 gap-8 px-6 py-8 md:grid-cols-3 md:px-44">
         <div>
           <h2 className="mb-6 text-sm font-semibold text-neutral-500 uppercase dark:text-neutral-300">
diff --git a/packages/website/theme.config.tsx b/packages/website/theme.config.tsx
index afe49741c3a..b0cf3dec507 100644
--- a/packages/website/theme.config.tsx
+++ b/packages/website/theme.config.tsx
@@ -16,7 +16,7 @@ export default {
     content: null,
   },
   footer: {
-    component: <Footer />,
+    component: Footer,
   },
   head: () => {
     const { asPath } = useRouter();
@@ -46,4 +46,5 @@ export default {
       titleTemplate: "%s – Taiko",
     };
   },
+  darkMode: true,
 };