diff --git a/src/components/CustomStatusBarAndBackground/CustomStatusBarAndBackgroundContext.tsx b/src/components/CustomStatusBarAndBackground/CustomStatusBarAndBackgroundContext.tsx
index 4a1a1cd2f964..58a116789bbe 100644
--- a/src/components/CustomStatusBarAndBackground/CustomStatusBarAndBackgroundContext.tsx
+++ b/src/components/CustomStatusBarAndBackground/CustomStatusBarAndBackgroundContext.tsx
@@ -1,11 +1,12 @@
 import {createContext} from 'react';
 
 type CustomStatusBarAndBackgroundContextType = {
-    isRootStatusBarDisabled: boolean;
-    disableRootStatusBar: (isDisabled: boolean) => void;
+    isRootStatusBarEnabled: boolean;
+    setRootStatusBarEnabled: (isEnabled: boolean) => void;
 };
 
-const CustomStatusBarAndBackgroundContext = createContext<CustomStatusBarAndBackgroundContextType>({isRootStatusBarDisabled: false, disableRootStatusBar: () => undefined});
+// Signin page has its seperate Statusbar and ThemeProvider, so when user is on the SignInPage we need to disable the root statusbar so there is no double status bar in component stack, first in Root and other in SignInPage
+const CustomStatusBarAndBackgroundContext = createContext<CustomStatusBarAndBackgroundContextType>({isRootStatusBarEnabled: true, setRootStatusBarEnabled: () => undefined});
 
 export default CustomStatusBarAndBackgroundContext;
 export {type CustomStatusBarAndBackgroundContextType};
diff --git a/src/components/CustomStatusBarAndBackground/CustomStatusBarAndBackgroundContextProvider.tsx b/src/components/CustomStatusBarAndBackground/CustomStatusBarAndBackgroundContextProvider.tsx
index b4d553b60d0f..61f0d37c21cf 100644
--- a/src/components/CustomStatusBarAndBackground/CustomStatusBarAndBackgroundContextProvider.tsx
+++ b/src/components/CustomStatusBarAndBackground/CustomStatusBarAndBackgroundContextProvider.tsx
@@ -2,13 +2,13 @@ import React, {useMemo, useState} from 'react';
 import CustomStatusBarAndBackgroundContext from './CustomStatusBarAndBackgroundContext';
 
 function CustomStatusBarAndBackgroundContextProvider({children}: React.PropsWithChildren) {
-    const [isRootStatusBarDisabled, disableRootStatusBar] = useState(false);
+    const [isRootStatusBarEnabled, setRootStatusBarEnabled] = useState(true);
     const value = useMemo(
         () => ({
-            isRootStatusBarDisabled,
-            disableRootStatusBar,
+            isRootStatusBarEnabled,
+            setRootStatusBarEnabled,
         }),
-        [isRootStatusBarDisabled],
+        [isRootStatusBarEnabled],
     );
 
     return <CustomStatusBarAndBackgroundContext.Provider value={value}>{children}</CustomStatusBarAndBackgroundContext.Provider>;
diff --git a/src/components/CustomStatusBarAndBackground/index.tsx b/src/components/CustomStatusBarAndBackground/index.tsx
index c653fec73e91..4535acc734af 100644
--- a/src/components/CustomStatusBarAndBackground/index.tsx
+++ b/src/components/CustomStatusBarAndBackground/index.tsx
@@ -14,28 +14,29 @@ type CustomStatusBarAndBackgroundProps = {
 };
 
 function CustomStatusBarAndBackground({isNested = false}: CustomStatusBarAndBackgroundProps) {
-    const {isRootStatusBarDisabled, disableRootStatusBar} = useContext(CustomStatusBarAndBackgroundContext);
+    const {isRootStatusBarEnabled, setRootStatusBarEnabled} = useContext(CustomStatusBarAndBackgroundContext);
     const theme = useTheme();
     const [statusBarStyle, setStatusBarStyle] = useState(theme.statusBarStyle);
 
-    const isDisabled = !isNested && isRootStatusBarDisabled;
+    const isDisabled = !isNested && !isRootStatusBarEnabled;
 
     // Disable the root status bar when a nested status bar is rendered
     useEffect(() => {
         if (isNested) {
-            disableRootStatusBar(true);
+            setRootStatusBarEnabled(false);
         }
 
         return () => {
             if (!isNested) {
                 return;
             }
-            disableRootStatusBar(false);
+            setRootStatusBarEnabled(true);
         };
-    }, [disableRootStatusBar, isNested]);
+    }, [isNested, setRootStatusBarEnabled]);
 
-    const prevStatusBarBackgroundColor = useRef(theme.appBG);
-    const statusBarBackgroundColor = useRef(theme.appBG);
+    // The prev and current status bar background color refs are initialized with the splash screen background color so the status bar color is changed from the splash screen color to the expected color atleast once on first render - https://github.com/Expensify/App/issues/34154
+    const prevStatusBarBackgroundColor = useRef(theme.splashBG);
+    const statusBarBackgroundColor = useRef(theme.splashBG);
     const statusBarAnimation = useSharedValue(0);
 
     useAnimatedReaction(
@@ -57,7 +58,9 @@ function CustomStatusBarAndBackground({isNested = false}: CustomStatusBarAndBack
     // This callback is triggered everytime the route changes or the theme changes
     const updateStatusBarStyle = useCallback(
         (listenerId?: number) => {
-            // Check if this function is either called through the current navigation listener or the general useEffect which listens for theme changes.
+            // Check if this function is either called through the current navigation listener
+            // react-navigation library has a bug internally, where it can't keep track of the listeners, therefore, sometimes when the useEffect would re-render and we run navigationRef.removeListener the listener isn't removed and we end up with two or more listeners.
+            // https://github.com/Expensify/App/issues/34154#issuecomment-1898519399
             if (listenerId !== undefined && listenerId !== listenerCount.current) {
                 return;
             }
diff --git a/src/libs/getSplashBackgroundColor/index.native.ts b/src/libs/getSplashBackgroundColor/index.native.ts
new file mode 100644
index 000000000000..1d21b7a004e1
--- /dev/null
+++ b/src/libs/getSplashBackgroundColor/index.native.ts
@@ -0,0 +1,7 @@
+import colors from '@styles/theme/colors';
+
+function getSplashBackgroundColor() {
+    return colors.green400;
+}
+
+export default getSplashBackgroundColor;
diff --git a/src/libs/getSplashBackgroundColor/index.ts b/src/libs/getSplashBackgroundColor/index.ts
new file mode 100644
index 000000000000..97484d49163e
--- /dev/null
+++ b/src/libs/getSplashBackgroundColor/index.ts
@@ -0,0 +1,7 @@
+import colors from '@styles/theme/colors';
+
+function getSplashBackgroundColor() {
+    return colors.productDark100;
+}
+
+export default getSplashBackgroundColor;
diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts
index e3b5e423dc2a..3f59b08fc447 100644
--- a/src/styles/theme/themes/dark.ts
+++ b/src/styles/theme/themes/dark.ts
@@ -1,3 +1,4 @@
+import getSplashBackgroundColor from '@libs/getSplashBackgroundColor';
 import colors from '@styles/theme/colors';
 import type {ThemeColors} from '@styles/theme/types';
 import CONST from '@src/CONST';
@@ -6,7 +7,7 @@ import SCREENS from '@src/SCREENS';
 const darkTheme = {
     // Figma keys
     appBG: colors.productDark100,
-    splashBG: colors.green400,
+    splashBG: getSplashBackgroundColor(),
     highlightBG: colors.productDark200,
     border: colors.productDark400,
     borderLighter: colors.productDark400,
diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts
index 73231454f09f..c0b4a5fe3182 100644
--- a/src/styles/theme/themes/light.ts
+++ b/src/styles/theme/themes/light.ts
@@ -1,3 +1,4 @@
+import getSplashBackgroundColor from '@libs/getSplashBackgroundColor';
 import colors from '@styles/theme/colors';
 import type {ThemeColors} from '@styles/theme/types';
 import CONST from '@src/CONST';
@@ -6,7 +7,7 @@ import SCREENS from '@src/SCREENS';
 const lightTheme = {
     // Figma keys
     appBG: colors.productLight100,
-    splashBG: colors.green400,
+    splashBG: getSplashBackgroundColor(),
     highlightBG: colors.productLight200,
     border: colors.productLight400,
     borderLighter: colors.productLight400,