diff --git a/apps/mobile/src/components/ActionSheetComponent/index.js b/apps/mobile/src/components/ActionSheetComponent/index.js
index 8dfa3b71e..1db25f264 100644
--- a/apps/mobile/src/components/ActionSheetComponent/index.js
+++ b/apps/mobile/src/components/ActionSheetComponent/index.js
@@ -71,8 +71,6 @@ export const ActionSheetComponent = ({
 
   function changeColorScheme(colors = COLOR_SCHEME, accent = ACCENT) {
     let newColors = setColorScheme(colors, accent);
-    StatusBar.setBarStyle(colors.night ? 'light-content' : 'dark-content');
-
     dispatch({type: Actions.THEME, colors: newColors});
   }
 
diff --git a/apps/mobile/src/components/Button/index.js b/apps/mobile/src/components/Button/index.js
index 98295d90c..4646d084d 100644
--- a/apps/mobile/src/components/Button/index.js
+++ b/apps/mobile/src/components/Button/index.js
@@ -1,9 +1,9 @@
 import React from 'react';
-import { ActivityIndicator, StyleSheet, Text } from 'react-native';
+import {ActivityIndicator, StyleSheet, Text} from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useTracked } from '../../provider';
-import { PressableButton } from '../PressableButton';
-import {ph, pv, SIZE, WEIGHT} from "../../utils/SizeUtils";
+import {useTracked} from '../../provider';
+import {PressableButton} from '../PressableButton';
+import {ph, pv, SIZE, WEIGHT} from '../../utils/SizeUtils';
 
 export const Button = ({
   height = 40,
@@ -14,11 +14,12 @@ export const Button = ({
   title = '',
   icon,
   color = 'accent',
-  fontSize=SIZE.sm
+  fontSize = SIZE.sm,
+  iconColor = 'white',
 }) => {
   const [state, dispatch] = useTracked();
   const {colors} = state;
-  const usedColor = 'accent' ? colors.accent : color;
+  const usedColor = color === 'accent' ? colors.accent : colors[color];
 
   return (
     <PressableButton
@@ -28,7 +29,7 @@ export const Button = ({
       alpha={grayed ? (!colors.night ? -0.04 : 0.04) : -0.1}
       customStyle={{
         height: height,
-        width: width? width : null,
+        width: width ? width : null,
         paddingVertical: pv,
         paddingHorizontal: ph,
         borderRadius: 5,
@@ -44,12 +45,15 @@ export const Button = ({
           style={{
             marginRight: 5,
           }}
-          color={grayed ? colors.icon : 'white'}
+          color={grayed ? colors.icon : colors[iconColor]}
           size={SIZE.lg}
         />
       ) : null}
       <Text
-        style={[styles.buttonText, {color: grayed ? colors.icon : 'white',fontSize:fontSize}]}>
+        style={[
+          styles.buttonText,
+          {color: grayed ? colors.icon : colors[iconColor], fontSize: fontSize},
+        ]}>
         {title}
       </Text>
     </PressableButton>
diff --git a/apps/mobile/src/components/Container/ContainerBottomButton.js b/apps/mobile/src/components/Container/ContainerBottomButton.js
index a34b9bc6c..94e4eff5b 100644
--- a/apps/mobile/src/components/Container/ContainerBottomButton.js
+++ b/apps/mobile/src/components/Container/ContainerBottomButton.js
@@ -82,7 +82,7 @@ export const ContainerBottomButton = ({title, onPress, color}) => {
           <Icon
             name={title === 'Clear all trash' ? 'delete' : 'plus'}
             color="white"
-            size={SIZE.xl}
+            size={SIZE.xxl}
           />
         </View>
       </PressableButton>
diff --git a/apps/mobile/src/components/Header/HeaderMenu.js b/apps/mobile/src/components/Header/HeaderMenu.js
index 314de2412..dfe58121a 100644
--- a/apps/mobile/src/components/Header/HeaderMenu.js
+++ b/apps/mobile/src/components/Header/HeaderMenu.js
@@ -24,12 +24,12 @@ export const HeaderMenu = () => {
       }}>
       <Text
         style={{
-          fontSize: SIZE.xs + 1,
+          fontSize: SIZE.sm,
           fontFamily: WEIGHT.regular,
           color: colors.pri,
           marginRight: 5,
-          height: 30,
-          textAlignVertical: 'bottom',
+          height: 35,
+          textAlignVertical:'center'
         }}>
         {settings.sort.slice(0, 1).toUpperCase() +
           settings.sort.slice(1, settings.sort.length)}
@@ -40,7 +40,7 @@ export const HeaderMenu = () => {
           settings.sortOrder === 'asc' ? 'sort-ascending' : 'sort-descending'
         }
         style={{
-          textAlignVertical: 'bottom',
+          textAlignVertical:'center',
           height: 30,
         }}
         size={SIZE.md}
diff --git a/apps/mobile/src/components/ListPlaceholders/index.js b/apps/mobile/src/components/ListPlaceholders/index.js
index 83008a3dc..cc06a4757 100644
--- a/apps/mobile/src/components/ListPlaceholders/index.js
+++ b/apps/mobile/src/components/ListPlaceholders/index.js
@@ -7,9 +7,10 @@ import {
   TAG_SVG,
   FAV_SVG,
   TRASH_SVG,
+  SETTINGS_SVG,
 } from '../../assets/images/assets';
-import { useTracked } from '../../provider';
-export const Placeholder = ({type}) => {
+import {useTracked} from '../../provider';
+export const Placeholder = ({type, w, h}) => {
   const [state, dispatch] = useTracked();
   const {colors} = state;
   const getSVG = () => {
@@ -24,14 +25,16 @@ export const Placeholder = ({type}) => {
         return FAV_SVG(colors.accent);
       case 'trash':
         return TRASH_SVG(colors.accent);
+      case 'settings':
+        return SETTINGS_SVG(colors.accent);
     }
   };
 
   return (
     <View
       style={{
-        height: 250,
-        width: 250,
+        height: w || 250,
+        width: h || 250,
       }}>
       <SvgXml xml={getSVG()} width="100%" height="100%" />
     </View>
diff --git a/apps/mobile/src/components/Menu/TagsSection.js b/apps/mobile/src/components/Menu/TagsSection.js
index 1860b059c..8d1a6dcd7 100644
--- a/apps/mobile/src/components/Menu/TagsSection.js
+++ b/apps/mobile/src/components/Menu/TagsSection.js
@@ -1,11 +1,11 @@
 import React, {useEffect} from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
+import {Text, View} from 'react-native';
 import {useTracked} from '../../provider';
 import {Actions} from '../../provider/Actions';
 import {eSendEvent} from '../../services/EventManager';
-import {refreshNotesPage} from '../../utils/Events';
 import NavigationService from '../../services/Navigation';
-import {opacity, SIZE, WEIGHT} from '../../utils/SizeUtils';
+import {refreshNotesPage} from '../../utils/Events';
+import {SIZE, WEIGHT} from '../../utils/SizeUtils';
 import {PressableButton} from '../PressableButton';
 
 export const TagsSection = () => {
@@ -33,7 +33,7 @@ export const TagsSection = () => {
         heading: item.title,
       },
     });
-    NavigationService.navigate('Notes', params);
+    NavigationService.navigate('NotesPage', params);
     eSendEvent(refreshNotesPage, params);
     NavigationService.closeDrawer();
   };
diff --git a/apps/mobile/src/components/Menu/index.js b/apps/mobile/src/components/Menu/index.js
index 8d926e4c5..eb5ce203e 100644
--- a/apps/mobile/src/components/Menu/index.js
+++ b/apps/mobile/src/components/Menu/index.js
@@ -25,7 +25,6 @@ export const Menu = ({close = () => {}, hide, noTextMode = false}) => {
 
   function changeColorScheme(colors = COLOR_SCHEME, accent = ACCENT) {
     let newColors = setColorScheme(colors, accent);
-    StatusBar.setBarStyle(colors.night ? 'light-content' : 'dark-content');
     dispatch({type: Actions.THEME, colors: newColors});
   }
 
@@ -70,7 +69,7 @@ export const Menu = ({close = () => {}, hide, noTextMode = false}) => {
           minHeight: '50%',
         }}
         showsVerticalScrollIndicator={false}>
-        
+
           {MenuItemsList.map((item, index) => (
             <MenuListItem
               testID={item.name}
diff --git a/apps/mobile/src/components/NotebookItem/index.js b/apps/mobile/src/components/NotebookItem/index.js
index d33117554..c5c6f5dce 100644
--- a/apps/mobile/src/components/NotebookItem/index.js
+++ b/apps/mobile/src/components/NotebookItem/index.js
@@ -78,7 +78,7 @@ export const NotebookItem = ({
               item.topics.slice(1, 3).map((topic) => (
                 <TouchableOpacity
                   onPress={() => {
-                    NavigationService.navigate('Notes', {
+                    NavigationService.navigate('NotesPage', {
                       ...topic,
                     });
                   }}
diff --git a/apps/mobile/src/components/SimpleList/ListHeaderComponent.js b/apps/mobile/src/components/SimpleList/ListHeaderComponent.js
new file mode 100644
index 000000000..aeaba2815
--- /dev/null
+++ b/apps/mobile/src/components/SimpleList/ListHeaderComponent.js
@@ -0,0 +1,100 @@
+import React, {useEffect} from 'react';
+import {Text, View} from 'react-native';
+import {useTracked} from '../../provider';
+import {normalize, SIZE} from '../../utils/SizeUtils';
+import Heading from '../Typography/Heading';
+import {Placeholder} from '../ListPlaceholders';
+import {eScrollEvent} from '../../utils/Events';
+import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
+import Animated from 'react-native-reanimated';
+import {dWidth} from '../../utils';
+import {MessageCard} from './MessageCard';
+import Paragraph from '../Typography/Paragraph';
+
+const opacity = new Animated.Value(1);
+export const ListHeaderComponent = ({
+  type,
+  data,
+  messageCard = true,
+  title,
+  paragraph,
+  color
+}) => {
+  const [state] = useTracked();
+  const {colors, headerTextState} = state;
+
+  const onScroll = async (y) => {
+    if (y > 25) {
+      let o = y / 125;
+      o = 1 - o;
+      console.log(o);
+      opacity.setValue(o);
+    } else {
+      opacity.setValue(1);
+    }
+  };
+
+  useEffect(() => {
+    eSubscribeEvent(eScrollEvent, onScroll);
+    return () => {
+      eUnSubscribeEvent(eScrollEvent, onScroll);
+    };
+  }, []);
+
+  return (
+    <Animated.View
+      style={{
+        minHeight: 200,
+        padding: 12,
+        backgroundColor:color || colors.shade,
+        opacity: opacity,
+      }}>
+      {messageCard && <MessageCard />}
+
+      {/*     <Icon style={{
+        position:'absolute',
+        right:0,
+      }} name="home" color={colors.bg} size={SIZE.xxxl * 4} />  */}
+
+      <View
+        style={{
+          right: 0,
+          paddingRight: 12,
+          opacity: 0.5,
+          bottom: 0,
+          paddingHorizontal: 12,
+          position: 'absolute',
+        }}>
+        <Placeholder w={normalize(150)} h={normalize(150)} type={type} />
+      </View>
+      <View
+        style={{
+          position: 'absolute',
+          bottom: 0,
+          paddingHorizontal: 12,
+          paddingBottom: 12,
+        }}>
+        <Heading
+          style={{marginBottom: paragraph ? -10 : 0}}
+          size={SIZE.xxxl * 1.5}
+          color={headerTextState.color}>
+          <Text
+            style={{
+              color: colors.accent,
+            }}>
+            {headerTextState.heading.slice(0, 1) === '#' ? '#' : null}
+          </Text>
+
+          {title
+            ? title
+            : headerTextState.heading.slice(0, 1) === '#'
+            ? headerTextState.heading.slice(1)
+            : headerTextState.heading}
+        </Heading>
+        {paragraph && (
+          <Paragraph color={colors.icon}> {'\n' + paragraph}</Paragraph>
+        )}
+      </View>
+    </Animated.View>
+  );
+};
diff --git a/apps/mobile/src/components/SimpleList/MessageCard.js b/apps/mobile/src/components/SimpleList/MessageCard.js
new file mode 100644
index 000000000..2eb38a472
--- /dev/null
+++ b/apps/mobile/src/components/SimpleList/MessageCard.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import { useTracked } from '../../provider';
+import { COLORS_NOTE } from '../../utils/Colors';
+import { SIZE } from '../../utils/SizeUtils';
+
+export const MessageCard = ({data}) => {
+  const [state] = useTracked();
+  const {colors, selectionMode, currentScreen, messageBoardState} = state;
+
+  return (
+    <View>
+      {!messageBoardState.visible || selectionMode ? null : (
+        <TouchableOpacity
+          activeOpacity={0.7}
+          onPress={messageBoardState.onPress}
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'flex-start',
+            position: 'absolute',
+            right: 0,
+            top: 0,
+          }}>
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+            }}>
+            <Text
+              style={{
+                color: COLORS_NOTE[currentScreen]
+                  ? COLORS_NOTE[currentScreen]
+                  : colors.accent,
+                fontSize: SIZE.sm,
+                marginRight: 10,
+              }}>
+              {messageBoardState.actionText}
+            </Text>
+
+            <Icon
+              name="arrow-right"
+              size={SIZE.sm}
+              color={
+                COLORS_NOTE[currentScreen]
+                  ? COLORS_NOTE[currentScreen]
+                  : colors.accent
+              }
+            />
+          </View>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
diff --git a/apps/mobile/src/components/SimpleList/index.js b/apps/mobile/src/components/SimpleList/index.js
index d74b9d4f6..808b1f27d 100644
--- a/apps/mobile/src/components/SimpleList/index.js
+++ b/apps/mobile/src/components/SimpleList/index.js
@@ -22,6 +22,11 @@ import {COLORS_NOTE} from '../../utils/Colors';
 import {SIZE, WEIGHT} from '../../utils/SizeUtils';
 import {db} from '../../utils/DB';
 import {HeaderMenu} from '../Header/HeaderMenu';
+import Heading from '../Typography/Heading';
+import {ListHeaderComponent} from './ListHeaderComponent';
+import Paragraph from '../Typography/Paragraph';
+import {Button} from '../Button';
+import Seperator from '../Seperator';
 
 const header = {
   type: 'MAIN_HEADER',
@@ -38,9 +43,10 @@ const SimpleList = ({
   sortMenuButton,
   scrollRef,
   jumpToDialog,
+  placeholderData,
 }) => {
   const [state, dispatch] = useTracked();
-  const {colors, selectionMode, messageBoardState} = state;
+  const {colors, selectionMode} = state;
   const searchResults = {...state.searchResults};
   const [refreshing, setRefreshing] = useState(false);
   const [dataProvider, setDataProvider] = useState(
@@ -53,7 +59,6 @@ const SimpleList = ({
   const listData = data;
   const dataType = type;
   const _onScroll = (event) => {
-    console.log(event.nativeEvent);
     if (!event) return;
     let y = event.nativeEvent.contentOffset.y;
     eSendEvent(eScrollEvent, y);
@@ -76,7 +81,7 @@ const SimpleList = ({
         width: '100%',
         justifyContent: 'space-between',
         paddingHorizontal: 12,
-        height: 30,
+        height: 35,
       }}>
       <Text
         onPress={() => {
@@ -89,9 +94,8 @@ const SimpleList = ({
           styles.sectionHeader,
           {
             color: colors.accent,
-            height: 30,
+            height: 35,
             minWidth: 60,
-            textAlignVertical: 'bottom',
           },
         ]}>
         {item.title}
@@ -146,10 +150,29 @@ const SimpleList = ({
       style={[
         {
           backgroundColor: colors.bg,
+          height: '100%',
         },
-        styles.emptyList,
       ]}>
-      <>{placeholder}</>
+      <ListHeaderComponent type={type} />
+
+      <View
+        style={{
+          flexGrow: 1,
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}>
+        <Heading>{placeholderData.heading}</Heading>
+        <Paragraph color={colors.icon}>{placeholderData.paragraph}</Paragraph>
+        <Seperator />
+       {placeholderData.button && <Button
+          onPress={placeholderData.action}
+          color="bg"
+          title={placeholderData.button}
+          icon="plus"
+          iconColor="accent"
+          fontSize={SIZE.md}
+        /> } 
+      </View>
     </View>
   );
 
@@ -181,14 +204,11 @@ const SimpleList = ({
           break;
         case 'header':
           dim.width = width;
-          dim.height = 30 * fontScale;
+          dim.height = 35 * fontScale;
           break;
         case 'MAIN_HEADER':
           dim.width = width;
-          dim.height =
-            !messageBoardState.visible || !listData[0] || selectionMode
-              ? 0
-              : 40 * fontScale;
+          dim.height = 200;
           break;
         default:
           dim.width = width;
@@ -223,6 +243,7 @@ const SimpleList = ({
       dataProvider={dataProvider}
       rowRenderer={_renderRow}
       onScroll={_onScroll}
+      canChangeSize={true}
       renderFooter={() => <View style={{height: 400}} />}
       scrollViewProps={{
         refreshControl: (
@@ -249,7 +270,6 @@ const SimpleList = ({
         height: '100%',
         backgroundColor: colors.bg,
         width: '100%',
-        paddingTop: 10,
       }}
     />
   );
@@ -257,77 +277,7 @@ const SimpleList = ({
 
 export default SimpleList;
 
-const MessageCard = ({data}) => {
-  const [state] = useTracked();
-  const {colors, selectionMode, currentScreen, messageBoardState} = state;
 
-  return (
-    <View>
-      {!messageBoardState.visible || !data[0] || selectionMode ? null : (
-        <PressableButton
-          onPress={messageBoardState.onPress}
-          color={
-            COLORS_NOTE[currentScreen]
-              ? COLORS_NOTE[currentScreen]
-              : colors.shade
-          }
-          selectedColor={
-            COLORS_NOTE[currentScreen]
-              ? COLORS_NOTE[currentScreen]
-              : colors.accent
-          }
-          alpha={!colors.night ? -0.02 : 0.1}
-          opacity={0.12}
-          customStyle={styles.loginCard}>
-          <View
-            style={{
-              width: 25,
-              backgroundColor: COLORS_NOTE[currentScreen]
-                ? COLORS_NOTE[currentScreen]
-                : colors.accent,
-              height: 25,
-              borderRadius: 100,
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}>
-            <Icon
-              style={styles.loginIcon}
-              name={messageBoardState.icon}
-              color="white"
-              size={SIZE.xs}
-            />
-          </View>
-          <View
-            style={{
-              marginLeft: 10,
-            }}>
-            <Text
-              style={{
-                fontFamily: WEIGHT.regular,
-                color: colors.icon,
-                fontSize: SIZE.xxs - 1,
-              }}>
-              {messageBoardState.message}
-            </Text>
-            <Text
-              style={{
-                color: COLORS_NOTE[currentScreen]
-                  ? COLORS_NOTE[currentScreen]
-                  : colors.accent,
-                fontSize: SIZE.xxs,
-              }}>
-              {messageBoardState.actionText}
-            </Text>
-          </View>
-        </PressableButton>
-      )}
-    </View>
-  );
-};
-
-const ListHeaderComponent = ({type, data}) => {
-  return <MessageCard type={type} data={data} />;
-};
 
 const styles = StyleSheet.create({
   loginCard: {
@@ -354,7 +304,7 @@ const styles = StyleSheet.create({
   },
   sectionHeader: {
     fontFamily: WEIGHT.bold,
-    fontSize: SIZE.xs + 1,
+    fontSize: SIZE.sm,
     alignSelf: 'center',
     textAlignVertical: 'center',
   },
diff --git a/apps/mobile/src/components/SortDialog/index.js b/apps/mobile/src/components/SortDialog/index.js
index 1b6690c26..565569bcb 100644
--- a/apps/mobile/src/components/SortDialog/index.js
+++ b/apps/mobile/src/components/SortDialog/index.js
@@ -136,7 +136,7 @@ class SortDialog extends React.Component {
                         <Seperator/>
                         {
                             Object.keys(SORT).map((item, index) => <PressableButton
-
+                                key={item}
                                 color={this.state.settings.sort === item ? colors.shade : "transparent"}
                                 onPress={async () => {
                                     await setSetting(this.state.settings, 'sort', item);
diff --git a/apps/mobile/src/components/Typography/Paragraph.js b/apps/mobile/src/components/Typography/Paragraph.js
index 3bfd5d42b..76bfdd375 100644
--- a/apps/mobile/src/components/Typography/Paragraph.js
+++ b/apps/mobile/src/components/Typography/Paragraph.js
@@ -26,6 +26,7 @@ const Paragraph = ({color, size, style, ...restProps}) => {
           fontFamily: WEIGHT.regular,
           fontSize: size || SIZE.sm,
           color: color || colors.pri,
+          fontWeight:'400'
         },
         style,
       ]}></Text>
diff --git a/apps/mobile/src/navigation/NavigatorStack.js b/apps/mobile/src/navigation/NavigatorStack.js
index c8fda0f1f..392460bc2 100644
--- a/apps/mobile/src/navigation/NavigatorStack.js
+++ b/apps/mobile/src/navigation/NavigatorStack.js
@@ -74,7 +74,7 @@ export const NavigatorStack = () => {
             headerShown: false,
             cardStyleInterpolator: forFade,
           }}>
-          <Stack.Screen name="Home" component={Home} />
+          <Stack.Screen name="Notes" component={Home} />
           <Stack.Screen
             initialParams={{
               title: 'Notebooks',
@@ -86,7 +86,7 @@ export const NavigatorStack = () => {
           />
           <Stack.Screen name="Favorites" component={Favorites} />
           <Stack.Screen name="Trash" component={Trash} />
-          <Stack.Screen name="Notes" component={Notes} />
+          <Stack.Screen name="NotesPage" component={Notes} />
           <Stack.Screen name="Tags" component={Tags} />
           <Stack.Screen name="Notebook" component={Notebook} />
           <Stack.Screen name="Settings" component={Settings} />
diff --git a/apps/mobile/src/utils/index.js b/apps/mobile/src/utils/index.js
index ed4f62efd..c70a7a0fa 100755
--- a/apps/mobile/src/utils/index.js
+++ b/apps/mobile/src/utils/index.js
@@ -103,7 +103,7 @@ export const itemSkus = Platform.select({
 
 export const MenuItemsList = [
   {
-    name: 'Home',
+    name: 'Notes',
     icon: 'home-variant-outline',
     close: true,
   },
diff --git a/apps/mobile/src/views/Editor/EditorHeader.js b/apps/mobile/src/views/Editor/EditorHeader.js
index 5f0b1f9a3..250971cef 100644
--- a/apps/mobile/src/views/Editor/EditorHeader.js
+++ b/apps/mobile/src/views/Editor/EditorHeader.js
@@ -1,263 +1,282 @@
-import React, {createRef, useEffect, useState} from 'react';
-import {BackHandler, Keyboard, Platform, StatusBar, View,} from 'react-native';
+import React, {useEffect, useState} from 'react';
+import {BackHandler, Keyboard, Platform, StatusBar, View} from 'react-native';
 import {ActionIcon} from '../../components/ActionIcon';
-import {ActionSheetEvent, simpleDialogEvent,} from '../../components/DialogManager/recievers';
-import {TEMPLATE_EXIT_FULLSCREEN, TEMPLATE_NEW_NOTE,} from '../../components/DialogManager/Templates';
-import {useTracked} from '../../provider';
-import {eSendEvent, eSubscribeEvent, eUnSubscribeEvent, ToastEvent,} from '../../services/EventManager';
-import {eClearEditor, eCloseFullscreenEditor, eOnLoadNote, eOpenFullscreenEditor,} from '../../utils/Events';
-import {exitEditorAnimation} from '../../utils/Animations';
-import {editing} from '../../utils';
 import {
-    checkNote,
-    clearEditor,
-    clearTimer,
-    EditorWebView,
-    getNote,
-    isNotedEdited,
-    loadNote,
-    post,
-    textInput,
-} from './Functions';
-import {normalize} from '../../utils/SizeUtils';
+  ActionSheetEvent,
+  simpleDialogEvent,
+} from '../../components/DialogManager/recievers';
+import {
+  TEMPLATE_EXIT_FULLSCREEN,
+  TEMPLATE_NEW_NOTE,
+} from '../../components/DialogManager/Templates';
+import {useTracked} from '../../provider';
 import {DDS} from '../../services/DeviceDetection';
-import HistoryComponent from "./HistoryComponent";
+import {
+  eSendEvent,
+  eSubscribeEvent,
+  eUnSubscribeEvent,
+  ToastEvent,
+} from '../../services/EventManager';
+import {editing} from '../../utils';
+import {exitEditorAnimation} from '../../utils/Animations';
+import {
+  eClearEditor,
+  eCloseFullscreenEditor,
+  eOnLoadNote,
+  eOpenFullscreenEditor,
+} from '../../utils/Events';
+import {normalize} from '../../utils/SizeUtils';
+import {
+  checkNote,
+  clearEditor,
+  clearTimer,
+  EditorWebView,
+  getNote,
+  isNotedEdited,
+  loadNote,
+  post,
+  textInput,
+} from './Functions';
+import HistoryComponent from './HistoryComponent';
 
 let handleBack;
 let tapCount = 0;
 
 const EditorHeader = ({noMenu}) => {
-    const [state] = useTracked();
-    const {colors, premiumUser} = state;
-    const [fullscreen, setFullscreen] = useState(false);
+  const [state] = useTracked();
+  const {colors, premiumUser} = state;
+  const [fullscreen, setFullscreen] = useState(false);
 
+  useEffect(() => {
+    let c = {...colors};
+    c.factor = normalize(1);
+    post('theme', colors);
+  }, [colors.bg]);
 
+  useEffect(() => {
+    if (!DDS.isTab) return;
+    if (noMenu) {
+      post('nomenu', true);
+    } else {
+      post('nomenu', false);
+    }
+  }, [noMenu]);
 
-    useEffect(() => {
-        let c = {...colors};
-        c.factor = normalize(1);
-        post('theme', colors);
-    }, [colors.bg]);
+  useEffect(() => {
+    eSubscribeEvent(eOnLoadNote, load);
+    eSubscribeEvent(eCloseFullscreenEditor, closeFullscreen);
+    eSubscribeEvent(eClearEditor, onCallClear);
 
-    useEffect(() => {
-        if (!DDS.isTab) return;
-        if (noMenu) {
-            post('nomenu', true);
-        } else {
-            post('nomenu', false);
-        }
-    }, [noMenu]);
-
-    useEffect(() => {
-        eSubscribeEvent(eOnLoadNote, load);
-        eSubscribeEvent(eCloseFullscreenEditor, closeFullscreen);
-        eSubscribeEvent(eClearEditor, onCallClear);
-      
-        return () => {
-            eUnSubscribeEvent(eClearEditor, onCallClear);
-            eUnSubscribeEvent(eCloseFullscreenEditor, closeFullscreen);
-            eUnSubscribeEvent(eOnLoadNote, load);
-          
-        };
-    }, []);
-
-    useEffect(() => {
-        if (!noMenu && DDS.isTab) {
-            handleBack = BackHandler.addEventListener('hardwareBackPress', () => {
-                simpleDialogEvent(TEMPLATE_EXIT_FULLSCREEN());
-                editing.isFullscreen = false;
-                return true;
-            });
-        }
-
-        return () => {
-            clearTimer();
-            if (handleBack) {
-                handleBack.remove();
-                handleBack = null;
-            }
-        };
-    }, [noMenu]);
-
-    const load = async (item) => {
-        Keyboard.addListener("keyboardDidShow",() => {
-            post("keyboard")
-        })
-        await loadNote(item);
-        if (item.type === 'new') {
-            textInput.current?.focus();
-            post('focusTitle');
-            Platform.OS === 'android' ? EditorWebView.current?.requestFocus() : null;
-        }
-        if (!DDS.isTab) {
-            handleBack = BackHandler.addEventListener(
-                'hardwareBackPress',
-                _onHardwareBackPress,
-            );
-        }
+    return () => {
+      eUnSubscribeEvent(eClearEditor, onCallClear);
+      eUnSubscribeEvent(eCloseFullscreenEditor, closeFullscreen);
+      eUnSubscribeEvent(eOnLoadNote, load);
     };
+  }, []);
 
-    const onCallClear = async () => {
-        if (editing.currentlyEditing) {
-            exitEditorAnimation();
-        }
-        await clearEditor();
-    };
-    const closeFullscreen = () => {
-        setFullscreen(false);
+  useEffect(() => {
+    if (!noMenu && DDS.isTab) {
+      handleBack = BackHandler.addEventListener('hardwareBackPress', () => {
+        simpleDialogEvent(TEMPLATE_EXIT_FULLSCREEN());
+        editing.isFullscreen = false;
+        return true;
+      });
+    }
+
+    return () => {
+      clearTimer();
+      if (handleBack) {
+        handleBack.remove();
+        handleBack = null;
+      }
     };
+  }, [noMenu]);
 
-    useEffect(() => {
-        EditorWebView.current?.reload();
-    }, [premiumUser]);
+  const load = async (item) => {
+    Keyboard.addListener('keyboardDidShow', () => {
+      post('keyboard');
+    });
+    await loadNote(item);
+    if (item.type === 'new') {
+      textInput.current?.focus();
+      post('focusTitle');
+      Platform.OS === 'android' ? EditorWebView.current?.requestFocus() : null;
+    }
+    if (!DDS.isTab) {
+      handleBack = BackHandler.addEventListener(
+        'hardwareBackPress',
+        _onHardwareBackPress,
+      );
+    }
+  };
 
-    const _onHardwareBackPress = async () => {
-        if (editing.currentlyEditing) {
-            if (tapCount > 0) {
-                await _onBackPress();
-                return true;
-            } else {
-                tapCount = 1;
-                setTimeout(() => {
-                    tapCount = 0;
-                }, 3000);
-                ToastEvent.show('Press back again to exit editor', 'success');
-                return true;
-            }
-        }
-    };
+  const onCallClear = async () => {
+    if (editing.currentlyEditing) {
+      exitEditorAnimation();
+    }
+    await clearEditor();
+  };
+  const closeFullscreen = () => {
+    setFullscreen(false);
+  };
 
-    const _onBackPress = async () => {
-        editing.currentlyEditing = true;
-        if (DDS.isTab && !DDS.isSmallTab) {
-            simpleDialogEvent(TEMPLATE_EXIT_FULLSCREEN());
-        } else {
-            exitEditorAnimation();
+  useEffect(() => {
+    EditorWebView.current?.reload();
+  }, [premiumUser]);
 
-            if (checkNote() && isNotedEdited()) {
-                ToastEvent.show('Note Saved!', 'success');
-            }
-            await clearEditor();
-            Keyboard.removeListener("keyboardDidShow",() => {
-                post("keyboard")
-            })
-            if (handleBack) {
-                handleBack.remove();
-                handleBack = null;
-            }
-        }
-    };
+  const _onHardwareBackPress = async () => {
+    if (editing.currentlyEditing) {
+      if (tapCount > 0) {
+        await _onBackPress();
+        return true;
+      } else {
+        tapCount = 1;
+        setTimeout(() => {
+          tapCount = 0;
+        }, 3000);
+        ToastEvent.show('Press back again to exit editor', 'success');
+        return true;
+      }
+    }
+  };
 
-    return (
-        <>
-       {noMenu || DDS.isPhone || DDS.isSmallTab ? (
-                    <View />
-                ) : (
-                    <ActionIcon
-                        name="arrow-left"
-                        color={colors.heading}
-                        onPress={_onBackPress}
-                        bottom={5}
-                        iconStyle={{
-                            textAlignVertical: 'center',
-                        }}
-                        customStyle={{
-                            marginLeft: -5,
-                            position: 'absolute',
-                            marginTop:
-                                Platform.OS === 'ios' ? 0 : StatusBar.currentHeight + 5,
-                            zIndex: 11,
-                            left: 0,
-                            justifyContent: 'center',
-                            alignItems: 'center',
-                        }}
-                    />
-                )}
+  const _onBackPress = async () => {
+    editing.currentlyEditing = true;
+    if (DDS.isTab && !DDS.isSmallTab) {
+      simpleDialogEvent(TEMPLATE_EXIT_FULLSCREEN());
+    } else {
+      exitEditorAnimation();
+      eSendEvent('historyEvent', {
+        undo: 0,
+        redo: 0,
+      });
 
-                <View
-                    style={{
-                        flexDirection: 'row',
-                        width: DDS.isTab && !DDS.isSmallTab ? '30%' : '100%',
-                        height: 50,
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
-                        paddingHorizontal: 12,
-                        position: DDS.isTab && !DDS.isSmallTab ? 'absolute' : 'relative',
-                        backgroundColor: colors.bg,
-                        right: 0,
-                        marginTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight,
-                        zIndex: 10,
-                    }}>
-                    {DDS.isTab && !DDS.isSmallTab ? (
-                        <View />
-                    ) : (
-                        <ActionIcon
-                            name="arrow-left"
-                            color={colors.heading}
-                            onPress={_onBackPress}
-                            bottom={5}
-                            customStyle={{
-                                marginLeft: -5,
-                            }}
-                        />
-                    )}
+      if (checkNote() && isNotedEdited()) {
+        ToastEvent.show('Note Saved!', 'success');
+      }
+      await clearEditor();
+      Keyboard.removeListener('keyboardDidShow', () => {
+        post('keyboard');
+      });
+      if (handleBack) {
+        handleBack.remove();
+        handleBack = null;
+      }
+    }
+  };
 
-                    <View
-                        style={{
-                            flexDirection: 'row',
-                        }}>
-                        <ActionIcon
-                            name="plus"
-                            color={colors.heading}
-                            customStyle={{
-                                marginLeft: 10,
-                            }}
-                            onPress={() => {
-                                simpleDialogEvent(TEMPLATE_NEW_NOTE);
-                            }}
-                        />
-                        {DDS.isTab && !DDS.isSmallTab && !fullscreen ? (
-                            <ActionIcon
-                                name="fullscreen"
-                                color={colors.heading}
-                                customStyle={{
-                                    marginLeft: 10,
-                                }}
-                                onPress={() => {
-                                    eSendEvent(eOpenFullscreenEditor);
-                                    setFullscreen(true);
-                                    editing.isFullscreen = true;
-                                    post(
-                                        JSON.stringify({
-                                            type: 'nomenu',
-                                            value: false,
-                                        }),
-                                    );
-                                }}
-                            />
-                        ) : null}
+  return (
+    <>
+      {noMenu || DDS.isPhone || DDS.isSmallTab ? (
+        <View />
+      ) : (
+        <ActionIcon
+          name="arrow-left"
+          color={colors.heading}
+          onPress={_onBackPress}
+          bottom={5}
+          iconStyle={{
+            textAlignVertical: 'center',
+          }}
+          customStyle={{
+            marginLeft: -5,
+            position: 'absolute',
+            marginTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight + 5,
+            zIndex: 11,
+            left: 0,
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        />
+      )}
 
-                        <HistoryComponent/>
+      <View
+        style={{
+          flexDirection: 'row',
+          width: DDS.isTab && !DDS.isSmallTab ? '30%' : '100%',
+          height: 50,
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          paddingHorizontal: 12,
+          position: DDS.isTab && !DDS.isSmallTab ? 'absolute' : 'relative',
+          backgroundColor: colors.bg,
+          right: 0,
+          marginTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight,
+          zIndex: 10,
+        }}>
+        {DDS.isTab && !DDS.isSmallTab ? (
+          <View />
+        ) : (
+          <ActionIcon
+            name="arrow-left"
+            color={colors.heading}
+            onPress={_onBackPress}
+            bottom={5}
+            customStyle={{
+              marginLeft: -5,
+            }}
+          />
+        )}
 
-                        <ActionIcon
-                            name="dots-horizontal"
-                            color={colors.heading}
-                            customStyle={{
-                                marginLeft: 10,
-                            }}
-                            onPress={() => {
-                                ActionSheetEvent(
-                                    getNote(),
-                                    true,
-                                    true,
-                                    ['Add to', 'Share', 'Export', 'Delete'],
-                                    ['Dark Mode', 'Add to Vault', 'Pin', 'Favorite'],
-                                );
-                            }}
-                        />
-                    </View>
-                </View></>
-    );
+        <View
+          style={{
+            flexDirection: 'row',
+          }}>
+          <ActionIcon
+            name="plus"
+            color={colors.accent}
+            customStyle={{
+              marginLeft: 10,
+              borderRadius: 5,
+            }}
+            onPress={() => {
+              simpleDialogEvent(TEMPLATE_NEW_NOTE);
+            }}
+          />
+
+          {DDS.isTab && !DDS.isSmallTab && !fullscreen ? (
+            <ActionIcon
+              name="fullscreen"
+              color={colors.heading}
+              customStyle={{
+                marginLeft: 10,
+              }}
+              onPress={() => {
+                eSendEvent(eOpenFullscreenEditor);
+                setFullscreen(true);
+                editing.isFullscreen = true;
+                post(
+                  JSON.stringify({
+                    type: 'nomenu',
+                    value: false,
+                  }),
+                );
+              }}
+            />
+          ) : null}
+
+          <HistoryComponent />
+
+          <ActionIcon
+            name="dots-horizontal"
+            color={colors.heading}
+            customStyle={{
+              marginLeft: 10,
+            }}
+            onPress={() => {
+              ActionSheetEvent(
+                getNote(),
+                true,
+                true,
+                ['Add to', 'Share', 'Export', 'Delete'],
+                ['Dark Mode', 'Add to Vault', 'Pin', 'Favorite'],
+              );
+            }}
+          />
+        </View>
+      </View>
+    </>
+  );
 };
 
 export default EditorHeader;
diff --git a/apps/mobile/src/views/Editor/Functions.js b/apps/mobile/src/views/Editor/Functions.js
index b99070ea6..1cdfa307b 100644
--- a/apps/mobile/src/views/Editor/Functions.js
+++ b/apps/mobile/src/views/Editor/Functions.js
@@ -166,6 +166,8 @@ export const _onMessage = async (evt) => {
   clearTimeout(timer);
   timer = null;
   if (message === 'loaded') {
+  } else if (JSON.parse(message).type === 'history') {
+    eSendEvent('historyEvent', JSON.parse(message));
   } else if (message !== '' && message !== 'loaded') {
     onChange(message);
     timer = setTimeout(() => {
diff --git a/apps/mobile/src/views/Editor/HistoryComponent.js b/apps/mobile/src/views/Editor/HistoryComponent.js
index e4fa9ba3c..d34227f06 100644
--- a/apps/mobile/src/views/Editor/HistoryComponent.js
+++ b/apps/mobile/src/views/Editor/HistoryComponent.js
@@ -1,6 +1,7 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {ActionIcon} from '../../components/ActionIcon';
 import {useTracked} from '../../provider';
+import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
 import {post,} from './Functions';
 
 
@@ -12,26 +13,42 @@ const HistoryComponent = () => {
         redo:0
     });
 
+    const onHistoryChange = (data) => {
+        setHistoryState(data);
+    }
+
+    useEffect(() => {
+        eSubscribeEvent('historyEvent',onHistoryChange);
+
+        return () => {
+            eUnSubscribeEvent('historyEvent',onHistoryChange);
+        }
+    },[])
+
     return (
         <>
 
             <ActionIcon
-                name="undo-variant"
+                name="undo"
+                disabled={historyState.undo === 0}
                 color={colors.heading}
                 customStyle={{
                     marginLeft: 10,
                 }}
                 onPress={() => {
+                    if (historyState.undo === 0) return;
                     post('undo');
                 }}
             />
             <ActionIcon
-                name="redo-variant"
+                name="redo"
+                disabled={historyState.redo=== 0}
                 color={colors.heading}
                 customStyle={{
                     marginLeft: 10,
                 }}
                 onPress={() => {
+                    if (historyState.redo === 0) return;
                     post('redo');
                 }}
             />