diff --git a/frontend/src/_components/OnboardingNavbar.jsx b/frontend/src/_components/OnboardingNavbar.jsx
index 76e8f0c510..320a315667 100644
--- a/frontend/src/_components/OnboardingNavbar.jsx
+++ b/frontend/src/_components/OnboardingNavbar.jsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import Logo from '@assets/images/Logomark.svg';
-function OnboardingNavbar() {
+function OnboardingNavbar({ darkMode }) {
+  darkMode = darkMode ?? (localStorage.getItem('darkMode') || false);
   return (
-    <div className="onboarding-navbar container-xl">
+    <div className={`onboarding-navbar container-xl ${darkMode && 'theme-dark'}`}>
       <Link to="/">
         <Logo height="23" width="92" alt="tooljet logo" data-cy="page-logo" />
       </Link>
diff --git a/frontend/src/_styles/onboarding.scss b/frontend/src/_styles/onboarding.scss
index d1e889925c..3c37891191 100644
--- a/frontend/src/_styles/onboarding.scss
+++ b/frontend/src/_styles/onboarding.scss
@@ -586,6 +586,7 @@
     top: 0;
     display: flex;
     align-items: center;
+    background-color: #fff;
 
     img {
         cursor: pointer;
@@ -1090,6 +1091,9 @@
 
 // Dark-Mode styles onboarding  && self host dark mode
 .theme-dark {
+    .onboarding-navbar {
+        background-color: #2b394b;
+    }
 
     .org-avatar:hover {
         .avatar {