diff --git a/apps/mobile/loading.js b/apps/mobile/loading.js
index ece7219e4..1b4cb7538 100755
--- a/apps/mobile/loading.js
+++ b/apps/mobile/loading.js
@@ -1,11 +1,10 @@
 import React from 'react';
-import {SIZE, WEIGHT} from './src/common/common';
 import * as Animatable from 'react-native-animatable';
-import {useTracked} from './src/provider';
-import {w} from './src/utils/utils';
+import {SIZE, WEIGHT} from './src/common/common';
 import {DialogManager} from './src/components/DialogManager';
 import {Toast} from './src/components/Toast';
-
+import {useTracked} from './src/provider';
+import {w} from './src/utils/utils';
 export const Loading = () => {
   const [state, dispatch] = useTracked();
   const {colors, loading} = state;
diff --git a/apps/mobile/src/components/Container/index.js b/apps/mobile/src/components/Container/index.js
index 9714dcdfb..0b20dea19 100644
--- a/apps/mobile/src/components/Container/index.js
+++ b/apps/mobile/src/components/Container/index.js
@@ -3,25 +3,24 @@ import {
   Keyboard,
   KeyboardAvoidingView,
   Platform,
+  SafeAreaView,
   Text,
   TouchableOpacity,
   View,
-  StatusBar,
-  SafeAreaView,
 } from 'react-native';
 import * as Animatable from 'react-native-animatable';
+import {useSafeArea} from 'react-native-safe-area-context';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {br, opacity, pv, SIZE, WEIGHT} from '../../common/common';
 import {useTracked} from '../../provider';
 import {ACTIONS} from '../../provider/actions';
 import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/eventManager';
-import {eScrollEvent, eClearSearch} from '../../services/events';
-import {db, getElevation, ToastEvent, DDS, selection} from '../../utils/utils';
+import {eClearSearch, eScrollEvent} from '../../services/events';
+import {inputRef} from '../../utils/refs';
+import {db, DDS, getElevation, selection, ToastEvent} from '../../utils/utils';
 import {Header} from '../header';
 import {Search} from '../SearchInput';
 import SelectionHeader from '../SelectionHeader';
-import {inputRef} from '../../utils/refs';
-import {useSafeArea} from 'react-native-safe-area-context';
 
 const AnimatedTouchableOpacity = Animatable.createAnimatableComponent(
   TouchableOpacity,
@@ -196,7 +195,9 @@ export const Container = ({
         }}>
         {noSelectionHeader ? null : <SelectionHeader items={data} />}
 
-        <View
+        <Animatable.View
+          transition="backgroundColor"
+          duration={300}
           style={{
             position: selectionMode ? 'relative' : 'absolute',
             backgroundColor: colors.bg,
@@ -237,7 +238,7 @@ export const Container = ({
               value={text}
             />
           ) : null}
-        </View>
+        </Animatable.View>
 
         {children}
 
diff --git a/apps/mobile/src/components/NoteItem/index.js b/apps/mobile/src/components/NoteItem/index.js
index ef2e41210..047aae715 100644
--- a/apps/mobile/src/components/NoteItem/index.js
+++ b/apps/mobile/src/components/NoteItem/index.js
@@ -5,10 +5,9 @@ import {ph, pv, SIZE, WEIGHT} from '../../common/common';
 import {eSendEvent, openVault} from '../../services/eventManager';
 import {eOnLoadNote, eShowMergeDialog} from '../../services/events';
 import {openEditorAnimation} from '../../utils/animations';
-import {DDS, timeSince, db} from '../../utils/utils';
+import {DDS, timeSince} from '../../utils/utils';
 import {ActionSheetEvent, simpleDialogEvent} from '../DialogManager/recievers';
 import {TEMPLATE_TRASH} from '../DialogManager/templates';
-import storage from '../../utils/storage';
 
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
diff --git a/apps/mobile/src/services/events.js b/apps/mobile/src/services/events.js
index 3147756c5..803ee364d 100644
--- a/apps/mobile/src/services/events.js
+++ b/apps/mobile/src/services/events.js
@@ -71,3 +71,5 @@ export const eClearEditor = '534';
 export const eApplyChanges = '535';
 
 export const eShowMergeDialog = '536';
+
+export const eSwitchNightMode = '537';