diff --git a/App.js b/App.js
index 6c89420bb..050295298 100644
--- a/App.js
+++ b/App.js
@@ -1,9 +1,9 @@
 import 'react-native-gesture-handler'; // should be on top
 import React from 'react';
-import { Linking, DeviceEventEmitter, AppState, StyleSheet, KeyboardAvoidingView, Platform, View } from 'react-native';
+import { Linking, Appearance, DeviceEventEmitter, AppState, StyleSheet, KeyboardAvoidingView, Platform, View } from 'react-native';
 import Clipboard from '@react-native-community/clipboard';
 import Modal from 'react-native-modal';
-import { NavigationContainer, CommonActions } from '@react-navigation/native';
+import { NavigationContainer, CommonActions, DefaultTheme, DarkTheme } from '@react-navigation/native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import Navigation from './Navigation';
 import { navigationRef } from './NavigationService';
@@ -219,7 +219,7 @@ export default class App extends React.Component {
     return (
       <SafeAreaProvider>
         <View style={styles.root}>
-          <NavigationContainer ref={navigationRef}>
+          <NavigationContainer ref={navigationRef} theme={Appearance.getColorScheme() === 'dark' ? { ...DarkTheme } : DefaultTheme} tr>
             <Navigation />
           </NavigationContainer>
           {this.renderClipboardContentModal()}
diff --git a/BlueComponents.js b/BlueComponents.js
index 17993cfd3..835279b2b 100644
--- a/BlueComponents.js
+++ b/BlueComponents.js
@@ -416,6 +416,7 @@ export const BlueNavigationStyle = (navigation, withNavigationCloseButton = fals
       backgroundColor: BlueApp.settings.brandingColor,
       borderBottomWidth: 0,
       elevation: 0,
+      shadowOpacity: 0,
       shadowOffset: { height: 0, width: 0 },
     },
     headerTitleStyle: {
diff --git a/Navigation.js b/Navigation.js
index 16a028f20..687351bcc 100644
--- a/Navigation.js
+++ b/Navigation.js
@@ -71,6 +71,7 @@ const defaultScreenOptions =
         gestureEnabled: true,
         gestureResponseDistance: { vertical: SCREEN_HEIGHT, horizontal: 50 },
         cardOverlayEnabled: true,
+        cardStyle: { backgroundColor: '#FFFFFF' },
         headerStatusBarHeight: navigation.dangerouslyGetState().routes.indexOf(route) > 0 ? 10 : undefined,
         ...TransitionPresets.ModalPresentationIOS,
       })
@@ -80,6 +81,7 @@ const defaultStackScreenOptions =
     ? {
         gestureEnabled: true,
         cardOverlayEnabled: true,
+        cardStyle: { backgroundColor: '#FFFFFF' },
         headerStatusBarHeight: 10,
       }
     : undefined;
diff --git a/ios/LaunchScreen.storyboard b/ios/LaunchScreen.storyboard
index ea9fd251b..11c51cc32 100644
--- a/ios/LaunchScreen.storyboard
+++ b/ios/LaunchScreen.storyboard
@@ -15,7 +15,7 @@
                     <view key="view" contentMode="scaleToFill" id="Ze5-6b-2t3">
                         <rect key="frame" x="0.0" y="0.0" width="414" height="896"/>
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
-                        <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                        <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
                         <viewLayoutGuide key="safeArea" id="Bcu-3y-fUS"/>
                     </view>
                 </viewController>
diff --git a/screen/wallets/hodlHodl.js b/screen/wallets/hodlHodl.js
index f27959ae8..8cda2072e 100644
--- a/screen/wallets/hodlHodl.js
+++ b/screen/wallets/hodlHodl.js
@@ -16,6 +16,7 @@ import {
   TouchableHighlight,
   TouchableOpacity,
   View,
+  StatusBar,
 } from 'react-native';
 import { BlueButtonLink, BlueNavigationStyle, SafeBlueArea } from '../../BlueComponents';
 import PropTypes from 'prop-types';
@@ -794,6 +795,7 @@ export default class HodlHodl extends Component {
   render() {
     return (
       <SafeBlueArea>
+        <StatusBar barStyle="light-content" />
         <SectionList
           refreshControl={<RefreshControl onRefresh={this._onRefreshOffers} refreshing={this.state.showShowFlatListRefreshControl} />}
           renderItem={this.renderItem}
diff --git a/screen/wallets/list.js b/screen/wallets/list.js
index efe515b9f..8bdc203d5 100644
--- a/screen/wallets/list.js
+++ b/screen/wallets/list.js
@@ -13,7 +13,7 @@ import {
   Alert,
   Platform,
 } from 'react-native';
-import { BlueScanButton, WalletsCarousel, BlueHeaderDefaultMain, BlueTransactionListItem } from '../../BlueComponents';
+import { BlueScanButton, WalletsCarousel, BlueHeaderDefaultMain, BlueTransactionListItem, BlueNavigationStyle } from '../../BlueComponents';
 import { Icon } from 'react-native-elements';
 import DeeplinkSchemaMatch from '../../class/deeplink-schema-match';
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
@@ -151,17 +151,13 @@ const styles = StyleSheet.create({
 export default class WalletsList extends Component {
   static navigationOptions = ({ navigation, route }) => {
     return {
+      ...BlueNavigationStyle(navigation, true),
       title: '',
       headerRight: () => (
         <TouchableOpacity testID="SettingsButton" style={styles.headerTouch} onPress={() => NavigationService.navigate('Settings')}>
           <Icon size={22} name="kebab-horizontal" type="octicon" color={BlueApp.settings.foregroundColor} />
         </TouchableOpacity>
       ),
-      headerStyle: {
-        shadowColor: 'transparent',
-        elevation: 0,
-        shadowOpacity: 0,
-      },
     };
   };
 
diff --git a/screen/wallets/pleaseBackup.js b/screen/wallets/pleaseBackup.js
index 02bbe7a81..f18fb33ac 100644
--- a/screen/wallets/pleaseBackup.js
+++ b/screen/wallets/pleaseBackup.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useCallback } from 'react';
-import { ActivityIndicator, View, BackHandler, Text, ScrollView, StyleSheet } from 'react-native';
+import { ActivityIndicator, View, BackHandler, Text, ScrollView, StyleSheet, StatusBar } from 'react-native';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import { BlueSpacing20, SafeBlueArea, BlueNavigationStyle, BlueText, BlueButton } from '../../BlueComponents';
 import Privacy from '../../Privacy';
@@ -102,6 +102,7 @@ const PleaseBackup = () => {
     </View>
   ) : (
     <SafeBlueArea style={styles.flex}>
+      <StatusBar barStyle="light-content" />
       <ScrollView contentContainerStyle={styles.scrollViewContent} testID="PleaseBackupScrollView">
         <View style={styles.please}>
           <BlueText style={styles.successText}>{loc.pleasebackup.success}</BlueText>
diff --git a/screen/wallets/pleaseBackupLNDHub.js b/screen/wallets/pleaseBackupLNDHub.js
index 7339689df..9c4fe0b5e 100644
--- a/screen/wallets/pleaseBackupLNDHub.js
+++ b/screen/wallets/pleaseBackupLNDHub.js
@@ -1,6 +1,6 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import { useNavigation, useRoute } from '@react-navigation/native';
-import { View, Dimensions, StyleSheet, BackHandler } from 'react-native';
+import { View, Dimensions, StyleSheet, BackHandler, StatusBar } from 'react-native';
 import {
   SafeBlueArea,
   BlueNavigationStyle,
@@ -52,6 +52,7 @@ const PleaseBackupLNDHub = () => {
 
   return (
     <SafeBlueArea style={styles.root}>
+      <StatusBar barStyle="light-content" />
       <ScrollView centerContent contentContainerStyle={styles.scrollViewContent} onLayout={onLayout}>
         <BlueCard>
           <View>