diff --git a/apps/mobile/src/components/Menu/index.js b/apps/mobile/src/components/Menu/index.js
index f29e138e0..8254a4869 100644
--- a/apps/mobile/src/components/Menu/index.js
+++ b/apps/mobile/src/components/Menu/index.js
@@ -31,6 +31,7 @@ import Icon from 'react-native-vector-icons/Feather';
 import {getElevation, w, h, Toast} from '../../utils/utils';
 import AsyncStorage from '@react-native-community/async-storage';
 import {useForceUpdate} from '../../views/ListsEditor';
+import {AnimatedSafeAreaView} from '../../views/Home';
 
 export const Menu = ({close = () => {}, hide, update = () => {}}) => {
   const [colors, setColors] = useState(COLOR_SCHEME);
@@ -48,25 +49,24 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
   }, []);
 
   return (
-    <SafeAreaView
+    <AnimatedSafeAreaView
+      transition="backgroundColor"
+      duration={1000}
       style={{
         height: '100%',
         opacity: hide ? 0 : 1,
-        backgroundColor: colors.navbg,
+        backgroundColor: colors.night ? colors.navbg : colors.navbg,
       }}>
       <ScrollView
         contentContainerStyle={{
           justifyContent: 'space-between',
           height: '100%',
-          backgroundColor: colors.navbg,
         }}>
         <View>
           <View
             style={{
-              borderWidth: 1,
-              borderColor: colors.navbg,
               height: 2,
-              backgroundColor: colors.navbg,
+
               width: '100%',
               marginBottom: 5,
               marginTop: Platform.OS == 'ios' ? h * 0.01 : h * 0.03,
@@ -239,8 +239,6 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
 
           <View
             style={{
-              borderWidth: 1,
-              borderColor: colors.navbg,
               height: 2,
               backgroundColor: colors.navbg,
               width: '100%',
@@ -290,8 +288,6 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
 
           <View
             style={{
-              borderWidth: 1,
-              borderColor: colors.navbg,
               height: 2,
               backgroundColor: colors.navbg,
               width: '100%',
@@ -385,9 +381,8 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
               width: '100%',
               justifyContent: 'center',
               alignItems: 'center',
-              borderColor: colors.accent,
+
               backgroundColor: colors.accent,
-              borderWidth: 1,
             }}>
             <Text
               style={{
@@ -438,6 +433,6 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
       </View> */}
         </View>
       </ScrollView>
-    </SafeAreaView>
+    </AnimatedSafeAreaView>
   );
 };
diff --git a/apps/mobile/src/components/Recents/index.js b/apps/mobile/src/components/Recents/index.js
index 9c3bd74e3..912d4f81d 100644
--- a/apps/mobile/src/components/Recents/index.js
+++ b/apps/mobile/src/components/Recents/index.js
@@ -65,7 +65,6 @@ export const RecentList = ({update, onScroll, margin}) => {
         style={{
           height: '100%',
           width: '100%',
-          backgroundColor: colors.bg,
         }}
         ListHeaderComponent={
           <View
diff --git a/apps/mobile/src/components/SearchInput/index.js b/apps/mobile/src/components/SearchInput/index.js
index 17e0d4ae8..5882f1ee9 100644
--- a/apps/mobile/src/components/SearchInput/index.js
+++ b/apps/mobile/src/components/SearchInput/index.js
@@ -41,7 +41,7 @@ export const Search = props => {
           borderRadius: br,
           borderWidth: props.hide ? 0 : 1.5,
           paddingHorizontal: ph,
-          backgroundColor: colors.bg,
+
           paddingVertical: props.hide
             ? 0
             : Platform.OS == 'ios'
diff --git a/apps/mobile/src/components/header/index.js b/apps/mobile/src/components/header/index.js
index 2a956d1ce..34dc52b8c 100644
--- a/apps/mobile/src/components/header/index.js
+++ b/apps/mobile/src/components/header/index.js
@@ -20,8 +20,8 @@ export const Header = ({
           sendHeight(e.nativeEvent.layout.height);
         }
       }}
-      transition="height"
-      duration={300}
+      transition={['height', 'marginBottom']}
+      duration={250}
       style={{
         height: hide ? 50 : 50,
         flexDirection: 'row',
@@ -30,7 +30,11 @@ export const Header = ({
         alignItems: 'center',
         paddingHorizontal: Platform.isPad ? '2.5%' : '5%',
         paddingTop: Platform.OS == 'ios' ? h * 0.02 : h * 0.06,
-        marginBottom: h * 0.06,
+        marginBottom: hide
+          ? h * 0.03
+          : Platform.OS == 'ios'
+          ? h * 0.04
+          : h * 0.04,
       }}>
       <View
         style={{
diff --git a/apps/mobile/src/services/NavigationService.js b/apps/mobile/src/services/NavigationService.js
index b72f0906c..0e3e2da65 100755
--- a/apps/mobile/src/services/NavigationService.js
+++ b/apps/mobile/src/services/NavigationService.js
@@ -26,6 +26,9 @@ const TopLevelNavigator = createStackNavigator(
     },
     Editor: {
       screen: Editor,
+      navigationOptions: {
+        gesturesEnabled: false,
+      },
     },
     Reminders: {
       screen: Reminders,
@@ -78,6 +81,7 @@ const TopLevelNavigator = createStackNavigator(
   },
   {
     initialRouteName: 'Home',
+    cardStyle: false,
   },
 );
 
diff --git a/apps/mobile/src/views/Editor/index.js b/apps/mobile/src/views/Editor/index.js
index 97e1f088d..98cfd84ae 100755
--- a/apps/mobile/src/views/Editor/index.js
+++ b/apps/mobile/src/views/Editor/index.js
@@ -29,20 +29,25 @@ import {NavigationEvents} from 'react-navigation';
 import {storage} from '../../../App';
 import {SideMenuEvent} from '../../utils/utils';
 import {Dialog} from '../../components/Dialog';
-
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import * as Animatable from 'react-native-animatable';
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
 
 var timestamp = null;
 var content = null;
 var title = null;
-
+const AnimatedTouchableOpacity = Animatable.createAnimatableComponent(
+  TouchableOpacity,
+);
+const AnimatedTextInput = Animatable.createAnimatableComponent(TextInput);
 const Editor = ({navigation}) => {
   // STATE
 
   const [colors, setColors] = useState(COLOR_SCHEME);
   const [keyboardHeight, setKeyboardHeight] = useState(0);
   const [dialog, setDialog] = useState(false);
+  const [resize, setResize] = useState(false);
   // VARIABLES
 
   let updateInterval = null;
@@ -53,7 +58,6 @@ const Editor = ({navigation}) => {
 
   let EditorWebView = createRef();
   const _textRender = createRef();
-  const titleRef = createRef();
 
   // FUNCTIONS
 
@@ -86,10 +90,6 @@ const Editor = ({navigation}) => {
     }
   };
 
-  useEffect(() => {
-    titleRef.current.focus();
-  }, []);
-
   const _renderEditor = () => {
     return (
       <KeyboardAvoidingView
@@ -108,42 +108,67 @@ const Editor = ({navigation}) => {
               alignSelf: 'center',
               marginTop: Platform.OS == 'ios' ? h * 0.01 : h * 0.04,
             }}>
-            <Icon
-              style={{
-                paddingRight: 10,
-                marginTop: 5,
+            <AnimatedTouchableOpacity
+              onPress={() => {
+                setDialog(true);
               }}
-              name="chevron-left"
-              color={colors.icon}
-              size={SIZE.xxl}
-            />
+              transition={['width', 'height']}
+              duration={250}
+              style={{
+                width: resize ? 35 : 40,
+                height: resize ? 35 : 40,
+              }}>
+              <Icon
+                style={{
+                  paddingRight: 10,
+                  marginTop: 3.5,
+                }}
+                name="chevron-left"
+                color={colors.icon}
+                size={resize ? SIZE.xl : SIZE.xxl}
+              />
+            </AnimatedTouchableOpacity>
 
-            <TextInput
-              ref={titleRef}
+            <AnimatedTextInput
+              transition="fontSize"
               placeholder="Untitled Note"
               placeholderTextColor={colors.icon}
               style={{
                 width: '80%',
                 fontFamily: WEIGHT.bold,
-                fontSize: SIZE.xxl,
+                fontSize: resize ? SIZE.xl : SIZE.xxl,
+                color: colors.pri,
                 maxWidth: '90%',
                 paddingVertical: 0,
               }}
               onChangeText={value => {
                 title = value;
+                if (title.length > 12) {
+                  setResize(true);
+                } else if (title.length < 12) {
+                  setResize(false);
+                }
               }}
               onSubmitEditing={async () => await saveNote()}
             />
 
-            <Icon
+            <AnimatedTouchableOpacity
+              transition={['width', 'height']}
+              duration={250}
               style={{
-                paddingRight: 10,
-                marginTop: 5,
-              }}
-              name="more-vertical"
-              color={colors.icon}
-              size={SIZE.xxl}
-            />
+                width: resize ? 35 : 40,
+                height: resize ? 35 : 40,
+              }}>
+              <Icon
+                style={{
+                  paddingRight: 10,
+                  marginTop: 5,
+                }}
+                name="more-vertical"
+                color={colors.icon}
+                size={resize ? SIZE.xl : SIZE.xxl}
+              />
+            </AnimatedTouchableOpacity>
           </View>
 
           <WebView
diff --git a/apps/mobile/src/views/Home/index.js b/apps/mobile/src/views/Home/index.js
index 04984b67c..80f131271 100755
--- a/apps/mobile/src/views/Home/index.js
+++ b/apps/mobile/src/views/Home/index.js
@@ -31,6 +31,11 @@ import Icon from 'react-native-vector-icons/Feather';
 import NavigationService from '../../services/NavigationService';
 import {ScrollView} from 'react-native-gesture-handler';
 import {useForceUpdate} from '../ListsEditor';
+import * as Animatable from 'react-native-animatable';
+
+export const AnimatedSafeAreaView = Animatable.createAnimatableComponent(
+  SafeAreaView,
+);
 export const Home = ({navigation}) => {
   const [loading, setLoading] = useState(true);
   const [colors, setColors] = useState(COLOR_SCHEME);
@@ -43,7 +48,7 @@ export const Home = ({navigation}) => {
   const [buttonHide, setButtonHide] = useState(false);
   const forceUpdate = useForceUpdate();
   let offsetY = 0;
-  let countUp = 0;
+  let countUp = 1;
   let countDown = 0;
   let headerHeight = 0;
   let searchHeight = 0;
@@ -157,25 +162,28 @@ export const Home = ({navigation}) => {
       </KeyboardAvoidingView>
     </SafeAreaView>
   ) : (
-    <SafeAreaView
+    <AnimatedSafeAreaView
+      transition="backgroundColor"
+      duration={1000}
       style={{
         height: '100%',
-        backgroundColor: colors.bg,
+        backgroundColor: colors.night ? colors.bg : colors.bg,
       }}>
       <KeyboardAvoidingView
         style={{
           height: '100%',
-          backgroundColor: colors.bg,
         }}>
         <NavigationEvents
           onWillFocus={() => {
             setUpdate(update + 1);
           }}
         />
-        <View
+        <Animatable.View
+          transition="backgroundColor"
+          duration={1000}
           style={{
             position: 'absolute',
-            backgroundColor: colors.bg,
+            backgroundColor: colors.night ? colors.bg : colors.bg,
             zIndex: 10,
             width: '100%',
           }}>
@@ -211,7 +219,7 @@ export const Home = ({navigation}) => {
             clearSearch={clearSearch}
             value={text}
           />
-        </View>
+        </Animatable.View>
         {hidden ? (
           <NotesList
             margin={margin}
@@ -238,19 +246,29 @@ export const Home = ({navigation}) => {
           <RecentList
             onScroll={y => {
               if (buttonHide) return;
-              if (y < 30) setHideHeader(false);
+              if (y < 30) {
+                setHideHeader(false);
+                countDown = 0;
+                countUp = 1;
+              }
+
               if (y > offsetY) {
-                if (y - offsetY < 150 || countDown > 0) return;
+                if (y - offsetY < 100 || countDown > 0) return;
                 countDown = 1;
                 countUp = 0;
                 setHideHeader(true);
+                offsetY = y;
+                console.log(y, offsetY, 'down');
               } else {
-                if (offsetY - y < 150 || countUp > 0) return;
+                if (offsetY - y < 100 || countUp > 0) return;
                 countDown = 0;
                 countUp = 1;
                 setHideHeader(false);
+                offsetY = y;
+                console.log(y, offsetY, 'up');
               }
               offsetY = y;
+              console.log(offsetY);
             }}
             margin={margin}
             update={update}
@@ -294,7 +312,7 @@ export const Home = ({navigation}) => {
           </TouchableOpacity>
         )}
       </KeyboardAvoidingView>
-    </SafeAreaView>
+    </AnimatedSafeAreaView>
   );
 };