diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index b7c34c77..5d348ba0 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -117,6 +117,7 @@ const config: Config = {
       logo: {
         alt: "recode hive Logo",
         src: "img/logo.png",
+        srcDark: "img/logo-dark.png", // add: light-colored / white-background version for night mode
       },
       items: [
         {
diff --git a/src/components/dashboard/Sidebar/DashboardSidebar.css b/src/components/dashboard/Sidebar/DashboardSidebar.css
index 17a9a57e..032c1eae 100644
--- a/src/components/dashboard/Sidebar/DashboardSidebar.css
+++ b/src/components/dashboard/Sidebar/DashboardSidebar.css
@@ -11,7 +11,7 @@
   border-right: 1px solid var(--ifm-color-emphasis-200);
   background: var(--ifm-background-color);
   transition: width 0.2s ease;
-  overflow: hidden;
+  
 }
 
 .dashboard-rail.collapsed {
@@ -113,7 +113,7 @@
   border-radius: 10px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
   padding: 6px;
-  z-index: 20;
+  z-index: 1000;
   display: flex;
   flex-direction: column;
 }
diff --git a/src/theme/ColorModeToggle/index.tsx b/src/theme/ColorModeToggle/index.tsx
index 551b45c9..9f14ec47 100644
--- a/src/theme/ColorModeToggle/index.tsx
+++ b/src/theme/ColorModeToggle/index.tsx
@@ -1,31 +1,14 @@
 import React from "react";
-import { useSafeColorMode } from "@site/src/utils/useSafeColorMode";
-import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
+import { useColorMode } from "@docusaurus/theme-common";
 
 export default function ColorModeToggle(): JSX.Element {
-  const { colorMode } = useSafeColorMode();
-
-  // Safe setColorMode that works with DOM
-  const setColorMode = (mode: "light" | "dark") => {
-    if (!ExecutionEnvironment.canUseDOM) return;
-    // Set DOM attribute immediately for instant visual feedback
-    document.documentElement.setAttribute("data-theme", mode);
-    // Also store in localStorage
-    localStorage.setItem("theme", mode);
-    // Trigger Docusaurus's internal theme change if available
-    try {
-      const {
-        setColorMode: docusaurusSetColorMode,
-      } = require("@docusaurus/theme-common");
-      docusaurusSetColorMode(mode);
-    } catch (e) {
-      // Fallback: just set the DOM attribute
-    }
-  };
+  const { colorMode, setColorMode } = useColorMode();
 
   const toggleColorMode = () => {
     const newMode = colorMode === "dark" ? "light" : "dark";
-    // Only use Docusaurus's setColorMode - it handles everything properly
+    // Use Docusaurus's real setColorMode - this updates the actual
+    // ColorModeProvider context, which drives ThemedImage (navbar logo),
+    // data-theme attribute, and localStorage all in one call.
     setColorMode(newMode);
   };
 
@@ -93,4 +76,4 @@ export default function ColorModeToggle(): JSX.Element {
       </div>
     </button>
   );
-}
+}
\ No newline at end of file
diff --git a/src/theme/Footer/Layout/index.tsx b/src/theme/Footer/Layout/index.tsx
index 2902a5a9..91bb1dfe 100644
--- a/src/theme/Footer/Layout/index.tsx
+++ b/src/theme/Footer/Layout/index.tsx
@@ -132,7 +132,7 @@ export default function FooterLayout(): ReactNode {
               <span>code second.</span>
             </p>
             <div className="rh-footer__cta">
-              <Link to="/blog" className="rh-btn rh-btn--white">
+              <Link to="/blogs" className="rh-btn rh-btn--white">
                 <svg
                   className="rh-btn__icon"
                   width="16"
diff --git a/static/img/logo-dark.png b/static/img/logo-dark.png
new file mode 100644
index 00000000..c6642609
Binary files /dev/null and b/static/img/logo-dark.png differ